Search code examples
javascriptpolymerpaper-elements

paper-dialog and paper-transition-center does not show when toggle() called

I have the following code

element.html

<link rel="import"
      href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
      href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
      href="bower_components/core-icons/core-icons.html" />
<link rel="import"
      href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
      href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
      href="bower_components/core-menu/core-menu.html" />
<link rel="import"
      href="bower_components/core-item/core-item.html" />
<link rel="import"
      href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
      href="bower_components/paper-dialog-master/paper_dialog_transition.html">
<link rel="import"
      href="bower_components/paper-dialog-master/paper_dialog.html">

Home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Maps</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial=scalle=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="elements.html" />
    <link rel="stylesheet" href="styles/Home.css" />
    <script src="scripts/app.js"></script>
    <style type="text/css">
        #dlgAddMap
        {
            height:100px;
            width:100px;
            background:#fff;
        }
    </style>
</head>
<body fullbleed layout vertical>
    <core-drawer-panel id="drawerPanel">
        <core-header-panel drawer>
            <core-toolbar>Menu</core-toolbar>
            <core-menu>
                <core-item label="Maps"></core-item>
            </core-menu>
        </core-header-panel>

        <core-header-panel main>
            <core-toolbar>
                <paper-icon-button id="navicon" icon="menu"></paper-icon-button>
                <div>Maps</div>
            </core-toolbar>
            <div class="content">
                <paper-fab icon="add" id="addMap" onclick="document.querySelector('#dlgAddMap').toggle();" class="addButton"></paper-fab>
            </div>
        </core-header-panel>
    </core-drawer-panel>
    <paper-dialog heading="Title for dialog" transition="paper-transition-center" id="dlgAddMap">
        <paper-button label="Cancel" affirmative></paper-button>
        <paper-button label="Accept" affirmative autofocus></paper-button>
    </paper-dialog>
</body>

</html>

and for completeness

App.js

document.addEventListener('polymer-ready', function () {
    var navicon = document.getElementById('navicon');
    var addMap = document.getElementById('addMap');
    var drawerPanel = document.getElementById('drawerPanel');

    navicon.addEventListener('click', function () {
        drawerPanel.togglePanel();
    });

    addMap.addEventListener('click', function () {
        try {
            if (document.querySelector('#dlgAddMap')) {
                document.querySelector('#dlgAddMap').toggle();
            }
            else {
                alert('Cannot find the Add Map Dialog');
            }
        }
        catch ( e )
        {
            alert(e.message);
        }
    });
});

The trouble is even when I click the paper-fab button I have not been able to get the dialog to show. Although you see the click even accepted by the button, nothing happens.

Solution

  • The answer in the end was with the imports. The polymer download uses an underline with the bower_components but uses a dash ('-') in the name of the folders and filenames for components. It was corrected by just correcting the entries in the elements.html

    <link rel="import"
      href="bower_components/core-toolbar/core-toolbar.html" />
<link rel="import"
      href="bower_components/paper-icon-button/paper-icon-button.html" />
<link rel="import"
      href="bower_components/core-icons/core-icons.html" />
<link rel="import"
      href="bower_components/core-header-panel/core-header-panel.html" />
<link rel="import"
      href="bower_components/core-drawer-panel/core-drawer-panel.html" />
<link rel="import"
      href="bower_components/core-menu/core-menu.html" />
<link rel="import"
      href="bower_components/core-item/core-item.html" />
<link rel="import" 
      href="bower_components/paper-button/paper-button.html" />
<link rel="import"
      href="bower_components/paper-fab/paper-fab.html" />
<link rel="import"
      href="bower_components/paper-dialog/paper-dialog.html" />
<link rel="import"
      href="bower_components/paper-dialog/paper-dialog-transition.html" />
<link rel="import"
      href="bower_components/paper-dialog/paper-action-dialog.html" />