| Index: bower_components/sampler-scaffold/sampler-scaffold.html
|
| diff --git a/bower_components/sampler-scaffold/sampler-scaffold.html b/bower_components/sampler-scaffold/sampler-scaffold.html
|
| deleted file mode 100644
|
| index 11fce136d7aef8d71c7d7d2710fb7b587158cf49..0000000000000000000000000000000000000000
|
| --- a/bower_components/sampler-scaffold/sampler-scaffold.html
|
| +++ /dev/null
|
| @@ -1,224 +0,0 @@
|
| -<!--
|
| -Copyright (c) 2014 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
|
| --->
|
| -
|
| -<!--
|
| -`sampler-scaffold` provides a responsive layout for elements sampler.
|
| -
|
| -Exampler:
|
| -
|
| - <sampler-scaffold label="HTML Input Elements">
|
| -
|
| - <core-item label="String" url="demos/string.html"></core-item>
|
| - <core-item label="Checkbox" url="demos/checkbox.html"></core-item>
|
| - <core-item label="Radio" url="demos/radio.html"></core-item>
|
| - <core-item label="Range" url="demos/range.html"></core-item>
|
| - <core-item label="Color" url="demos/color.html"></core-item>
|
| -
|
| - </sampler-scaffold>
|
| -
|
| -Use `label` to set the sampler label and `responsiveWidth` to change the layout
|
| -of the scaffold.
|
| -
|
| -@element sampler-scaffold
|
| -@homepage github.io
|
| --->
|
| -
|
| -<link rel="import" href="../core-toolbar/core-toolbar.html">
|
| -<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
|
| -<link rel="import" href="../core-header-panel/core-header-panel.html">
|
| -<link rel="import" href="../core-item/core-item.html">
|
| -<link rel="import" href="../core-menu/core-menu.html">
|
| -<link rel="import" href="../core-menu/core-submenu.html">
|
| -<link rel="import" href="../core-icon-button/core-icon-button.html">
|
| -
|
| -<polymer-element name="sampler-scaffold" attributes="label responsiveWidth">
|
| -<template>
|
| -
|
| - <link rel="stylesheet" href="sampler-scaffold.css">
|
| -
|
| - <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="320px" responsiveWidth="{{responsiveWidth}}">
|
| -
|
| - <core-header-panel id="mainHeaderPanel" main mode="{{narrow ? 'waterfall' : 'cover'}}" shadow>
|
| -
|
| - <core-toolbar class="{{ {'medium-tall' : !narrow} | tokenList }}">
|
| - <content select=".menuButton" on-tap="{{togglePanel}}">
|
| - <core-icon-button class="menuButton fallback" icon="menu"></core-icon-button>
|
| - </content>
|
| - <div hidden?="{{!narrow}}">{{item.label}}</div>
|
| - <content select=".sourceButton" on-tap="{{viewSourceAction}}">
|
| - <core-icon-button class="sourceButton fallback" icon="launch"></core-icon-button>
|
| - </content>
|
| -
|
| - </core-toolbar>
|
| -
|
| - <div id="card" on-transitionend="{{cardTransitionDone}}" hidden?="{{!item}}">
|
| -
|
| - <div class="element-label" hidden?="{{narrow}}">{{item.label}}</div>
|
| -
|
| - <div id="frameContainer">
|
| - <iframe id="frame" on-load="{{frameLoaded}}"></iframe>
|
| - </div>
|
| -
|
| - </div>
|
| -
|
| - </core-header-panel>
|
| -
|
| - <core-header-panel drawer>
|
| -
|
| - <core-toolbar class="{{ {'medium-tall' : !narrow} | tokenList }}">
|
| - <div class="bottom main-label fit">{{label}}</div>
|
| - </core-toolbar>
|
| -
|
| - <core-menu id="menu" on-core-select="{{menuSelect}}">
|
| - <content></content>
|
| - </core-menu>
|
| -
|
| - </core-header-panel>
|
| -
|
| - </core-drawer-panel>
|
| -
|
| -</template>
|
| -<script>
|
| -
|
| - Polymer('sampler-scaffold', {
|
| -
|
| - /**
|
| - * When the browser window size is smaller than the `responsiveWidth`,
|
| - * `sampler-scaffold` changes to a narrow layout. In narrow layout,
|
| - * the drawer will be stacked on top of the main panel.
|
| - *
|
| - * @attribute responsiveWidth
|
| - * @type string
|
| - */
|
| - responsiveWidth: '860px',
|
| -
|
| - /**
|
| - * Sampler label.
|
| - *
|
| - * @attribute label
|
| - * @type string
|
| - */
|
| -
|
| - ready: function() {
|
| - this.boundResizeFrame = this.resizeFrame.bind(this);
|
| - window.addEventListener('resize', this.updateFrameHeight.bind(this));
|
| - window.addEventListener('hashchange', this.parseLocationHash.bind(this));
|
| - },
|
| -
|
| - domReady: function() {
|
| - this.async(function() {
|
| - this.parseLocationHash();
|
| - }, null, 300);
|
| - },
|
| -
|
| - parseLocationHash: function() {
|
| - var route = window.location.hash.slice(1);
|
| - for (var i = 0, item; item = this.$.menu.items[i]; i++) {
|
| - if (item.getAttribute('tag') === route) {
|
| - this.$.menu.selected = i;
|
| - return;
|
| - }
|
| - }
|
| - this.$.menu.selected = this.$.menu.selected || 0;
|
| - },
|
| -
|
| - menuSelect: function(e, detail) {
|
| - if (detail.isSelected) {
|
| - this.item = detail.item;
|
| - if (this.item.children.length) {
|
| - this.item.selected = 0;
|
| - }
|
| - this.item.tag = this.item.getAttribute('tag');
|
| - var url = this.item.getAttribute('url');
|
| - this.$.frame.contentWindow.location.replace(url);
|
| - window.location.hash = this.item.tag;
|
| - if (this.narrow) {
|
| - this.$.drawerPanel.closeDrawer();
|
| - } else {
|
| - this.animateCard();
|
| - }
|
| - }
|
| - },
|
| -
|
| - animateCard: function() {
|
| - this.$.card.classList.remove('move-up');
|
| - this.$.card.style.display = 'none';
|
| - this.async(function() {
|
| - this.$.card.style.display = 'block';
|
| - this.moveCard(this.$.mainHeaderPanel.offsetHeight);
|
| - this.async(function() {
|
| - this.$.card.classList.add('move-up');
|
| - this.moveCard(null);
|
| - }, null, 300);
|
| - });
|
| - },
|
| -
|
| - moveCard: function(y) {
|
| - var s = this.$.card.style;
|
| - s.webkitTransform = s.transform =
|
| - y ? 'translate3d(0, ' + y + 'px,0)' : '';
|
| - },
|
| -
|
| - cardTransitionDone: function() {
|
| - if (this.$.card.classList.contains('move-up')) {
|
| - this.$.card.classList.remove('move-up');
|
| - this.updateFrameHeight();
|
| - }
|
| - },
|
| -
|
| - togglePanel: function() {
|
| - this.$.drawerPanel.togglePanel();
|
| - },
|
| -
|
| - frameLoaded: function() {
|
| - if (!this.item) {
|
| - return;
|
| - }
|
| - this.$.frame.contentWindow.addEventListener('polymer-ready', function() {
|
| - setTimeout(this.updateFrameHeight.bind(this), 100);
|
| - this.$.frame.contentWindow.addEventListener('core-resize',
|
| - this.boundResizeFrame, false);
|
| - }.bind(this));
|
| - },
|
| -
|
| - resizeFrame: function() {
|
| - this.job('resizeFrame', function() {
|
| - this.updateFrameHeight();
|
| - });
|
| - },
|
| -
|
| - updateFrameHeight: function() {
|
| - var frame = this.$.frame;
|
| - var doc = frame.contentDocument;
|
| - if (doc) {
|
| - var docElt = doc.documentElement;
|
| - // TODO(ffu); expose scroll info from header-panel
|
| - var pos = this.$.mainHeaderPanel.$.mainContainer.scrollTop;
|
| - frame.style.height = 'auto';
|
| - frame.style.height = docElt.scrollHeight + 'px';
|
| - if (doc.body) {
|
| - var s = doc.body.style;
|
| - s.overflow = 'hidden';
|
| - // to avoid the 'blinking bug'
|
| - // https://code.google.com/p/chromium/issues/detail?id=332024
|
| - s.webkitTransform = s.transform = 'translateZ(0)';
|
| - }
|
| - this.$.mainHeaderPanel.$.mainContainer.scrollTop = pos;
|
| - }
|
| - },
|
| -
|
| - viewSourceAction: function() {
|
| - window.open('view-source:' + this.$.frame.contentWindow.location.href,
|
| - this.item.tag);
|
| - }
|
| -
|
| - });
|
| -
|
| -</script>
|
| -</polymer-element>
|
|
|