<!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <!doctype html> <html> <head> <title>iron-list, paper-scroll-header-panel, filltext.com demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="../../polymer/polymer.html"> <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> <link rel="import" href="../../paper-toolbar/paper-toolbar.html"> <link rel="import" href="../../paper-scroll-header-panel/paper-scroll-header-panel.html"> <link rel="import" href="../../paper-spinner/paper-spinner.html"> <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> <link rel="import" href="../../iron-ajax/iron-ajax.html"> <link rel="import" href="../../iron-icons/iron-icons.html"> <link rel="import" href="../iron-list.html"> <style is="custom-style"> :root { --dark-primary-color: #F57C00; } paper-scroll-header-panel { @apply(--layout-fit); @apply(--layout-vertical); @apply(--paper-font-common-base); } paper-toolbar { background-color: var(--dark-primary-color); } paper-toolbar.tall .title { font-size: 40px; margin-left: 60px; -webkit-transform-origin: left center; transform-origin: left center; overflow: visible; } .middle-container { height: 100%; /*margin-left: 60px;*/ } .bottom { padding-left: 62px; } iron-list { background-color: var(--paper-grey-200, #eee); padding-bottom: 16px; } .item { @apply(--layout-horizontal); margin: 16px 16px 0 16px; padding: 20px; border-radius: 8px; background-color: white; border: 1px solid #ddd; } .pad { padding: 0 16px; @apply(--layout-flex); @apply(--layout-vertical); } .primary { font-size: 16px; font-weight: bold; } .secondary { font-size: 14px; } .dim { color: gray; } /* Small */ @media (max-width: 600px) { paper-toolbar.tall .title { font-size: 20px; } } .index { width: 30px; } </style> </head> <body unresolved> <template is="dom-bind" id="app"> <iron-ajax id="get_filltext_ajax" auto url="//www.filltext.com/" params='{"rows": "1000", "fname":"{firstName}", "lname": "{lastName}", "address": "{streetAddress}", "city": "{city}", "state": "{usState|abb}", "zip": "{zip}", "integer": "{number|100}", "business": "{business}", "index": "{index}"}' handle-as="json" loading="{{loading}}" last-response="{{people}}"> </iron-ajax> <paper-scroll-header-panel class="fit" condenses keep-condensed-header> <paper-toolbar class="tall"> <paper-icon-button icon="arrow-back"></paper-icon-button> <div class="flex"></div> <paper-icon-button icon="search"></paper-icon-button> <paper-icon-button icon="refresh" on-tap="refreshData"></paper-icon-button> <paper-icon-button icon="more-vert"></paper-icon-button> <div class="middle middle-container center horizontal layout"> <div class="title">iron-list & filltext.com</div> </div> <div class="bottom bottom-container center horizontal layout"> <div class="bottom-title"> <span class="length">Rows: <span>{{people.length}}</span></span> <paper-spinner active="{{loading}}"></paper-spinner> </div> </div> </paper-toolbar> <iron-list items="[[people]]" as="item"> <template> <div> <div class="item"> <div class="primary dim">[[item.index]]</div> <div class="pad"> <div class="primary"><span>[[item.fname]]</span> <span>[[item.lname]]</span></div> <div class="secondary"><span>[[item.address]]</span> <span>[[item.city]]</span></div> <div class="secondary"><span>[[item.city]]</span>, <span>[[item.state]]</span> <span>[[item.zip]]</span></div> <div class="secondary dim">[[item.business]]</div> </div> <iron-icon icon$="[[iconForItem(item)]]"></iron-icon> </div> </div> </template> </iron-list> </paper-scroll-header-panel> </template> <script> var app = document.querySelector('#app'); document.querySelector('template[is=dom-bind]').iconForItem = function(item) { return item ? (item.integer < 50 ? 'star-border' : 'star') : ''; }; // Custom transformation: scale header's title addEventListener('paper-header-transform', function(e) { var title = document.querySelector('.title'); var middleContainer = document.querySelector('.middle-container'); var bottomContainer = document.querySelector('.bottom-container'); var detail = e.detail; var heightDiff = detail.height - detail.condensedHeight; var yRatio = Math.min(1, detail.y / heightDiff); var maxMiddleScale = 0.50; // title max size when condensed. The smaller the number the smaller the condensed size. var scaleMiddle = Math.max(maxMiddleScale, (heightDiff - detail.y) / (heightDiff / (1-maxMiddleScale)) + maxMiddleScale); var scaleBottom = 1 - yRatio; // Move/translate middleContainer Polymer.Base.transform('translate3d(0,' + yRatio * 100 + '%,0)', middleContainer); // Scale bottomContainer and bottom title to 0 and back Polymer.Base.transform('scale(' + scaleBottom + ') translateZ(0)', bottomContainer); // Scale middle Title Polymer.Base.transform('scale(' + scaleMiddle + ') translateZ(0)', title); }); // Refresh Data app.refreshData = function() { this.$.get_filltext_ajax.generateRequest(); }; </script> </body> </html>