Skip to content

Instantly share code, notes, and snippets.

@jucier

jucier/designer.html

Last active February 13, 2016 18:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jucier/f8523af613bede251a21 to your computer and use it in GitHub Desktop.
Save jucier/f8523af613bede251a21 to your computer and use it in GitHub Desktop.
Download ZIP
designer
Raw
designer.html
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-menu/core-submenu.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}}">
<paper-icon-button icon="menu" title="menu" class="menuButton fallback"></paper-icon-button>
<!--<core-icon-button class="menuButton fallback" icon="menu"></core-icon-button>-->
</content>
<div hidden?="{{!narrow}}">{{item.label}}</div>
<content select=".sourceButton" on-tap="{{togglePanel}}">
<!--<content select=".sourceButton" on-tap="{{viewSourceAction}}">-->
<core-icon-button class="sourceButton fallback" icon="more-vert"></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>
<paper-ripple fit=""></paper-ripple>
<paper-tabs class="tab" link>
<paper-tab><a href="//instagram.com/moreilandia_brasil/" horizontal center-center layout><core-icon relative="" id="icon" src="{{src}}" icon="{{icon}}" aria-label="post-twitter" role="img"><svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M20 2h-16c-1.1 0-1.99.9-1.99 2l-.01 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-16c0-1.1-.9-2-2-2zm-2.29 7.33c-.06 4.62-3.02 7.78-7.42 7.98-1.82.08-3.14-.5-4.28-1.23 1.34.21 3.01-.32 3.9-1.09-1.32-.13-2.1-.8-2.46-1.88.38.07.78.05 1.14-.03-1.19-.4-2.04-1.13-2.08-2.67.33.15.68.29 1.14.32-.9-.5-1.55-2.35-.8-3.57 1.32 1.45 2.91 2.63 5.52 2.79-.65-2.8 3.06-4.32 4.61-2.44.66-.13 1.19-.38 1.7-.65-.21.65-.62 1.1-1.12 1.47.54-.07 1.03-.21 1.44-.41-.25.53-.81 1.01-1.29 1.41z"></path></g></svg></core-icon></a></paper-tab>
<paper-tab><a href="//www.youtube.com/channel/UCpXiXRpH07-sQNcTLMu8a2w" horizontal center-center layout><core-icon icon="social:post-facebook" aria-label="post-facebook" role="img"><svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M20 2h-16c-1.1 0-1.99.9-1.99 2l-.01 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-16c0-1.1-.9-2-2-2zm-1 2v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v7h-3v-7h-2v-3h2v-2.5c0-1.93 1.57-3.5 3.5-3.5h2.5z"></path></g></svg></core-icon></a></paper-tab>
<paper-tab><a href="//www.youtube.com/channel/UCpXiXRpH07-sQNcTLMu8a2w" horizontal center-center layout><core-icon icon="social:post-gplus" aria-label="post-gplus" role="img"><svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit="" style="pointer-events: none; display: block;"><g><path d="M11.2 8.87c0-1.02-.63-3.02-2.08-3.02-.64 0-1.32.44-1.32 1.67 0 1.18.63 2.93 1.97 2.93.06.01 1.43-.01 1.43-1.58zm-.63 4.94l-.31-.01h-.02c-.26 0-1.15.05-1.82.27-.65.24-1.42.72-1.42 1.7 0 1.08 1.04 2.23 2.96 2.23 1.52 0 2.44-1 2.44-1.97 0-.77-.46-1.24-1.83-2.22zm9.43-11.81h-16c-1.1 0-1.99.9-1.99 2l-.01 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-16c0-1.1-.9-2-2-2zm-10.93 17.2c-2.8 0-4.07-1.56-4.07-3.01 0-.45.14-1.59 1.48-2.39.77-.47 1.85-.78 3.14-.91-.19-.25-.34-.55-.34-.99 0-.16.02-.31.05-.46h-.38c-1.97 0-3.15-1.55-3.15-3.04 0-1.73 1.29-3.6 4.11-3.6h4.21l-.34.34-.71.71-.06.06h-.71c.41.42.9 1.12.9 2.16 0 1.4-.74 2.09-1.56 2.73-.16.12-.42.38-.42.72 0 .3.24.5.39.62.13.11.3.22.47.34.81.57 1.92 1.34 1.92 2.88 0 1.77-1.29 3.84-4.93 3.84zm9.93-7.2h-2v2h-1v-2h-2v-1h2v-2h1v2h2v1z"></path></g></svg></core-icon></a></paper-tab>
</paper-tabs>
<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', {
responsiveWidth: '860px',
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment