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>
<html>
<head>
  <title>polymer</title>
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
  <link rel="import" href="http://element-party.xyz/bower_components/polymer/polymer.html">
  <link rel="import" href="http://element-party.xyz/bower_components/iron-flex-layout/classes/iron-flex-layout.html">
</head>
  <link rel="import" href="http://element-party.xyz/bower_components/iron-icon/iron-icon.html">
  <link rel="import" href="http://element-party.xyz/bower_components/iron-icons/iron-icons.html">
  <link rel="import" href="http://element-party.xyz/bower_components/iron-list/iron-list.html">
  <link rel="import" href="http://element-party.xyz/bower_components/paper-fab/paper-fab.html">
  <link rel="import" href="http://element-party.xyz/bower_components/paper-icon-button/paper-icon-button.html">
  <link rel="import" href="http://element-party.xyz/bower_components/paper-item/paper-icon-item.html">
  <link rel="import" href="http://element-party.xyz/bower_components/paper-material/paper-material.html">
  <link rel="import" href="http://element-party.xyz/bower_components/paper-menu-button/paper-menu-button.html">
  <link rel="import" href="http://element-party.xyz/bower_components/paper-menu/paper-menu.html">
<body>
  
<dom-module id="my-projects-list">
  <style>
    
    iron-icon: {
      padding-right: 10px;
    }
    
    iron-list: {
      padding-bottom: 16px;
    }
        
    paper-menu: {
      display: block;
    }
    
    #itemShadow {
      margin: 16px 16px 5px 16px;
    }
    
    #projOptionsBtn {
      margin-top: 10px;
      margin-right: 10px;
    }
    
    .fab {
      position: fixed;
      bottom: 30px;
      right: 30px;
      -webkit-transform: translateZ(0);
    }
    
    .item {
      padding: 20px;
      background-color: white;
      border: 1px solid #ddd;
    }
    
    .pad {
      padding: 0 16px;
    }
    
    paper-fab:hover {
      background-color: #b71c1c;
    }
    
    paper-fab.red {
      --paper-fab-background: #db4437;
      --paper-fab-keyboard-focus-background: #b71c1c;
    }
    
    
  </style>
  
  <template>
    
    <div id="projectsVertBoundary" class="layout vertical">
      
      <div id="projectsHorBoundary" class="layout horizontal center-center">
        
        <iron-list id="projectsList" items="[[projects]]" indexAs="_id" as="projLI" class="layout flex">
          
          <template>
            <div>
              <paper-material id="itemShadow" animated elevation="1">
                <div class="item layout horizontal" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)">
                  
                  <paper-menu-button id="projOptionsBtn" vertical-align="top" horizontal-align="right" class="layout fixed-right">
                    <paper-icon-button id="projOptionsBtnIcon" icon="menu" class="dropdown-trigger"></paper-icon-button>
                    <paper-menu id="projOptionsMenu" class="dropdown-content">
                      <paper-icon-item id="projEdit">
                        <iron-icon icon="create"></iron-icon>&nbsp;&nbsp;Edit Project
                      </paper-icon-item>
                      <paper-icon-item id="projCopy">
                        <iron-icon icon="content-copy"></iron-icon>&nbsp;&nbsp;Copy Project
                      </paper-icon-item>
                      <paper-icon-item id="projDelete">
                        <iron-icon icon="delete"></iron-icon>&nbsp;&nbsp;Delete Project
                      </paper-icon-item>
                    </paper-menu>
                  </paper-menu-button>
                  
                  <div class="pad layout flex vertical">
                    <div>Project Name:&nbsp;&nbsp;<span>[[projLI.name]]</span></div>  
                  </div>
                  
                </div>
              </paper-material>
            </div>
          </template>
        </iron-list>
      </div>
      
      <div class="layout horizontal end-justified">
        <paper-fab id="addProjBtn" icon="add" class="fab red" onmouseover="hoverOver(this)" onmouseout="hoverOut(this)"></paper-fab>  
      </div>
    
    </div>
    
  </template>
  
</dom-module>
  
​
<script>
  HTMLImports.whenReady(function() {
    
    hoverOver = function(srcElement) {
        if (srcElement.nodeName == "PAPER-FAB") {
            srcElement.querySelector("paper-material").elevation = 3;
        } else if (srcElement.classList.contains("item")) {
            srcElement.parentElement.elevation = 3;
        }
​
    };
​
    hoverOut = function(srcElement) {
        if (srcElement.nodeName == "PAPER-FAB") {
            srcElement.querySelector("paper-material").elevation = 1;
        } else if (srcElement.classList.contains("item")) {
            srcElement.parentElement.elevation = 1;
        }
    };
    
    
    Polymer({
      is: 'my-projects-list',
      properties: {
        projects: {type: Array, 
                   value: [ {_id: '01', name: 'Project One', data: 'some other data for #1'}, 
                            {_id: '02', name: 'Project Two', data: 'some other data for #2'} 
                          ]
                  }
      },
    });
  });
</script>
​
<my-projects-list></my-projects-list>
  
​
</body>
</html>
​
Output

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

Dismiss x
public
Bin info
Sinjinspro
0viewers