Last active
February 13, 2016 18:39
-
-
Save jucier/f8523af613bede251a21 to your computer and use it in GitHub Desktop.
designer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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