CODEWITHSUNDEEP
jqueryhtmlcsspolymer
Adam
Adam

Reputation: 5

how to stop all iron-list transitions being toggled - Polymer

I've been having trouble with an iron-list and triggering a transition of a panel coming in from right.

I have gotten the transition to work properly, however when I click on the settings icon for one particular row, ALL panels for all rows are triggered.

Any suggestions on how to solve that?

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-list/iron-list.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

<dom-module id="test-app-test">
  <template>
    <style include="iron-flex iron-flex-alignment">
       :host {
        display: block;
      }

      .container {
        border-bottom: 1px solid lightgrey;
      }

      .data:hover {
        background: lightgrey;
      }

      .data:last-child {
          border-bottom: none;
        }

        iron-list {
          background: white;
        }

        .icons {
          margin: 24px 16px 24px 16px;
        }

        .settings {
          padding: 10px 0px 10px 0px;
          margin: 0px 10px 0px 10px;
          width: 150px;
          height: 100%;
          background: grey;
          position: fixed;
          right: -160px;
          transition: transform 0.5s;
          color: white; 
        }

        .settingsMove {
          transform: translate(-140px);
        }

    </style>
      <iron-ajax url="data.json" last-response="{{data}}" auto ></iron-ajax>  
          <iron-list items="[[data]]" as="data" class="topList" selection-enabled >
              <template >

                    <div class="container horizontal layout">
                      <paper-icon-button class="icons" icon="settings" on-click="toggleSettings"></paper-icon-button>
                      <div class="settings">
                        <paper-icon-button icon="delete"></paper-icon-button>
                        <paper-icon-button icon="create"></paper-icon-button>
                        <paper-icon-button icon="clear" on-click="toggleSettings"></paper-icon-button>
                      </div>
                    </div>              
              </template>
        </iron-list>
  </template>

  <script>
    Polymer({

      is: 'test-app-test',

      properties: {

      },

      toggleSettings : function() {
          $('.settings').removeClass('settingsMove');
          $(this).toggleClass('settingsMove');
      },

    });
  </script>
</dom-module>

https://jsfiddle.net/f6dvbpx6/

Upvotes: 0

Views: 48

Answers (1)

Kuba Šimonovsk&#253;
Kuba Šimonovsk&#253;

Reputation: 2041

Your function toggleSettings find all elements with settings class which is wrong behavior. You need to select only 1 element( parent of button propably? your code doesn't make sense). To do this, update your function:

 toggleSettings : function(e) {
      this.toggleClass("settingsMove", false, e.target.parentElement);
      this.toggleClass("settingsMove", true, e.target);
 },

I am using Polymer function toggleClass because it seems to me much more better than Jquery which isn't really required in Polymer projects. Plus word this doesn't work like you expect. It doesn't point to current clicked element but to host element. (whole test-app-test)

Propably something like this? I have no idea what you are trying, because your code really doesn't make sense to me. You are trying to find element with class settings and on this element, remove class settingsMove ? and then on paper-icon-button set class settingsMove ?

What you want to achiev ? when user presses button, one specific row is hidden from view?

Upvotes: 0

Related Questions