Advanced Groups properties "pull" doesn't works. #21

elrancid · 2016-10-21T13:08:24Z

I need a fixed left list, not sortable, with "pull" option equals to "clone" (so the items remains in list), and a right list (sortable) where to put the items from the left list.
I've set the put and pull properties as described in documentation.
My groups properties are:

groupLeft = {
  name: 'listGroup',
  pull: 'clone',
  put: false
};
groupRight: {
  name: 'listGroup'
};

The property "clone" seems doesn't works and the left items are movable to the right list.

Inspecting the code seems that Sortable.js has the right values, but the behaviour is not correct. If you think that this is an issue related to Sortable.js I'll open an issue in that repository.

Here the full working code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
  <link rel="import" href="bower_components/polymer-sortablejs/polymer-sortablejs.html">
  <link rel="import" href="bower_components/paper-item/paper-item.html">
  <link rel="import" href="bower_components/paper-item/paper-item-body.html">
  <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="bower_components/iron-icons/av-icons.html">
  <style>
  html, body, x-test {
    height: 100%;
    margin: 0;
  }
  body: {
    /* make layout horizontal */
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  </style>
</head>
<body>
  <dom-module id="x-test">
    <style is="custom-style" include="iron-flex iron-flex-alignment">
      :host {
        background-color: #FFF;
        @apply(--layout-horizontal);
        @apply(--layout-flex);
        @apply(--layout-self-stretch);
      }
      sortable-js {
        overflow-x: hidden;
        overflow-y: scroll;
        border: 1px solid #616161;
        background-color: #ffffff;
        margin: 10px;
      }
      .sortable-ghost {
        opacity: .3;
        background: #f60;
      }
    </style>
    <template>
      <div class="flex layout horizontal">
        <div id="left" class="flex self-stretch layout horizontal">

          <sortable-js
            id="sortableLeft"
            animation="150"
            sort="[[FALSE]]"
            group="[[groupLeft]]"
            class="flex self-stretch">
            <template is="dom-repeat" items="{{itemsLeft}}">
              <paper-item>
                <paper-item-body>{{item.name}}</paper-item-body>
              </paper-item>
            </template>
          </sortable-js>

        </div>
        <div id="right" class="flex self-stretch layout horizontal">

          <sortable-js
            id="sortableRight"
            animation="150"
            group="[[groupRight]]"
            on-add="onAdd"
            on-remove="onRemove"
            class="flex self-stretch">
            <template is="dom-repeat" items="{{itemsRight}}">
              <paper-item>
                <paper-item-body>[[item.name]]</paper-item-body>
                <paper-icon-button
                  index="[[index]]"
                  icon="icons:clear"
                  title="remove"
                  on-tap="removeFromPlaylist">
                </paper-icon-button>
              </paper-item>
            </template>
          </sortable-js>

        </div>
      </div>
    </template>
  </dom-module>
  <script>
  HTMLImports.whenReady(function() {
    Polymer({
      is: 'x-test',
      properties: {
        FALSE: {
          type: Boolean,
          value: false
        },
        groupLeft: {
          type: Object,
          value: {
            name: 'listGroup',
            pull: 'clone',
            put: false
          }
        },
        groupRight: {
          type: Object,
          value: {
            name: 'listGroup'
          }
        },
        itemsLeft: {
          type: Array,
          value: window.items
        },
        itemsRight: {
          type: Array,
          value: [
            {name:'aaaa'}
          ]
        }
      },
      removeFromPlaylist: function(evt) {
        let element = evt.target;
        while (element.nodeName !== 'PAPER-ICON-BUTTON') {
          element = element.parentElement;
        }
        this.splice('itemsRight', element.index, 1);
        console.log(this.localName+'.removeFromPlaylist() itemsRight:',this.itemsRight);
      },
      onAdd: function(evt) {
        console.log(this.localName+'.onAdd() itemsRight:',this.itemsRight);
      },
      onRemove: function(evt) {
        console.log(this.localName+'.onRemove() itemsRight:',this.itemsRight);
      }
    });
  });
  // JSONP callback to initialize data from dummy source
  window.setItems = function(items) {
    window.items = items;
  };
  </script>
  <script src="http://www.json-generator.com/api/json/get/cimkLprNMy?indent=2&callback=setItems"></script>
  <x-test id="test"></x-test>
</body>
</html>

You must to add the bower components in order to run this demo:

bower install polymer iron-elements paper-elements polymer-sortablejs

Thank you to all responses

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Advanced Groups properties "pull" doesn't works. #21

Advanced Groups properties "pull" doesn't works. #21

elrancid commented Oct 21, 2016 •

edited

Loading

Advanced Groups properties "pull" doesn't works. #21

Advanced Groups properties "pull" doesn't works. #21

Comments

elrancid commented Oct 21, 2016 • edited Loading

elrancid commented Oct 21, 2016 •

edited

Loading