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> |