CODEWITHSUNDEEP
polymerpolymer-2.x
batgerel.e
batgerel.e

Reputation: 857

How to load js correctly in polymer

I have a problem with my app on mobile device. When i refresh page on browser js not working first time but after i pan and zoom-out script will work.

Here is html file:

 <div class="userLogged" on-click="userMenu">
    <iron-icon icon="vaadin:user"></iron-icon>
 </div>

Here is my js:

userMenu(e) {
    e.stopPropagation();
    var menu = this.shadowRoot.querySelector('.userMenu');
    if (menu.classList.contains('slideRight'))
       menu.classList.remove('slideRight');
    else
    menu.classList.add('slideRight');
 }

Full code of my page

enter image description here enter image description here

Upvotes: 1

Views: 69

Answers (1)

codeMonkey
codeMonkey

Reputation: 4845

A quick sidenote: the name of your class should be PageControl as in class PageControl extends Polymer.Element -- should match the id of the dom-module.

I would make a property userMenuClass and do it like this:

<template>
    ...
    <div class="userLogged" on-click="userMenu"> ... </div>
    ...
    <div class$="[[userMenuClass]]"></div>  <!-- Note the $ after class. You need this to get binding to work properly. -->
...
</template>
<script>
    ....
    static get properties() {
        return {
            'userMenuClass': {
                type: String,
                value: () => 'userMenu slideRight'
            }
        }
    }
    ...
    userMenu (e) {
        let menuClass = 'userMenu';
        if (this.userMenuClass.indexOf('slideRight') == -1)  {
            menuClass += ' slideRight';
        }
        this.set('userMenuClass', menuClass);
    }
</script>

Upvotes: 2

Related Questions