Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<head>
  <meta charset="utf-8">
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-card/paper-card.html" rel="import">
  <link href="paper-item/paper-item.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
  <link href="paper-checkbox/paper-checkbox.html" rel="import">
  <link href="iron-list/iron-list.html" rel="import">
</head>
<body>
  
<dom-module id="x-element">
  
<template>
  <style>
    paper-card {
      display: block;
    }
    
    iron-list {
      height: 100%;
    }
    
    paper-item {
      padding: 0;
    }
    
    .flex-horizontal-with-ratios {
      @apply(--layout-horizontal);
    }
​
    .flexchild {
      @apply(--layout-flex);
    }
    
    .info-head > * {
      font-weight: 700;
      padding: 16px 0;
    }
    .info-head {
      border-bottom: 1px solid #7f7f7f;
    }
    .info-item {
      border-bottom: 1px solid #d4d4d4;
      padding: 16px 0;
      min-height: inherit;
    }
  </style>
  <paper-card heading="Users">
    <div hidden$="[[!hasUsers]]" class="card-options">
      <paper-button hidden$="[[!showDeleteOption]]" on-tap="_deleteSelected" raised>Delete</paper-button>
    </div>
    
    <div class="card-content">
      <div class="flex-horizontal-with-ratios info-head">
        <div class="flexchild">
          Name
        </div>
        <div class="flexchild">
          Gender
        </div>
      </div>
​
      <iron-list items="[[users]]" as="user" selected-items="{{selectedUsers}}" multi-selection>
        <template>
          <paper-item class="info-item flex-horizontal-with-ratios">
            <div class="flexchild">
              <paper-checkbox on-tap="_selectItem"></paper-checkbox> [[user.name]]
            </div>
            <div class="flexchild">
              [[user.gender]]
            </div>          
          </paper-item>
        </template>
      </iron-list>
    </div>
  </paper-card>
</template>
  
<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        users: {
          type: Array,
          value: [{
            name: 'John Doe',
            gender: 'male'
          }, {
            name: 'Jane Doe',
            gender: 'female'
          }, {
            name: 'Jack Doe',
            gender: 'male'
          }]
        },
        hasUsers: {
          type: Boolean,
          value: false
        },
        showDeleteOption: {
          type: Boolean,
          value: false
        }
      },
      observers: [
        '_listsChanged(users.*, selectedUsers.*)'
      ],
      _listsChanged: function(users, selectedUsers) {
        this.set('showDeleteOption', selectedUsers.base.length > 0);
        
        this.set('hasUsers', users.base.length > 0);
      },
      _selectItem: function(e) {
        var index = e.model.index,
            model = this.users[index],
            exists = this.selectedUsers.indexOf(model) != -1;
        
        if (exists) {
          this.querySelector('iron-list').deselectItem(model);
        } else {
          this.querySelector('iron-list').selectItem(model);
        }
        
        console.log(this.selectedUsers);
      },
      _deleteSelected: function(e) {
        this.selectedUsers.forEach(function(user) {
          var index = this.users.indexOf(user);
;
          if (index != -1) {
            this.splice('users', index, 1);
          }          
        }, this);
        
        this.querySelector('iron-list').clearSelection();
        
        console.log(this.selectedUsers);
      }
    });
  })();
</script>
  
</dom-module>
  
<x-element></x-element>
  
</body>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
fakiolinhopro
0viewers