Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@polymer/app-layout
Advanced tools
@polymer/app-layout - npm Package Compare versions
Comparing version 3.0.0-pre.12 to 3.0.0-pre.13
@@ -1,7 +0,1 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import '@polymer/iron-flex-layout/iron-flex-layout.js'; | ||
| import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { AppScrollEffectsBehavior } from '../app-scroll-effects/app-scroll-effects-behavior.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -90,2 +84,14 @@ @license | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import '../../iron-flex-layout/iron-flex-layout.js'; | ||
| import { IronResizableBehavior } from '../../iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { AppScrollEffectsBehavior } from '../app-scroll-effects/app-scroll-effects-behavior.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -135,12 +141,5 @@ _template: html` | ||
| is: 'app-box', | ||
| behaviors: [AppScrollEffectsBehavior, IronResizableBehavior], | ||
| listeners: {'iron-resize': '_resizeHandler'}, | ||
| behaviors: [ | ||
| AppScrollEffectsBehavior, | ||
| IronResizableBehavior | ||
| ], | ||
| listeners: { | ||
| 'iron-resize': '_resizeHandler' | ||
| }, | ||
| /** | ||
@@ -169,3 +168,4 @@ * The current scroll progress. | ||
| /** | ||
| * Resets the layout. This method is automatically called when the element is attached to the DOM. | ||
| * Resets the layout. This method is automatically called when the element is | ||
| * attached to the DOM. | ||
| * | ||
@@ -208,3 +208,4 @@ * @method resetLayout | ||
| var viewportTop = this._elementTop - scrollTop; | ||
| this._progress = 1 - (viewportTop + this._elementHeight) / this._cachedScrollTargetHeight; | ||
| this._progress = 1 - | ||
| (viewportTop + this._elementHeight) / this._cachedScrollTargetHeight; | ||
| this._runEffects(this._progress, scrollTop); | ||
@@ -222,4 +223,5 @@ } | ||
| isOnScreen: function() { | ||
| return this._elementTop < this._scrollTop + this._cachedScrollTargetHeight | ||
| && this._elementTop + this._elementHeight > this._scrollTop; | ||
| return this._elementTop < | ||
| this._scrollTop + this._cachedScrollTargetHeight && | ||
| this._elementTop + this._elementHeight > this._scrollTop; | ||
| }, | ||
@@ -247,4 +249,4 @@ | ||
| getScrollState: function() { | ||
| return { progress: this._progress }; | ||
| return {progress: this._progress}; | ||
| } | ||
| }); |
@@ -1,8 +0,1 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import '@polymer/iron-media-query/iron-media-query.js'; | ||
| import { AppLayoutBehavior } from '../app-layout-behavior/app-layout-behavior.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js'; | ||
| import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js'; | ||
| /** | ||
@@ -135,2 +128,15 @@ @license | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import '../../iron-media-query/iron-media-query.js'; | ||
| import { AppLayoutBehavior } from '../app-layout-behavior/app-layout-behavior.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../polymer/lib/utils/html-tag.js'; | ||
| import { dom } from '../../polymer/lib/legacy/polymer.dom.js'; | ||
| import { afterNextRender } from '../../polymer/lib/utils/render-status.js'; | ||
| Polymer({ | ||
@@ -184,7 +190,4 @@ _template: html` | ||
| is: 'app-drawer-layout', | ||
| behaviors: [AppLayoutBehavior], | ||
| behaviors: [ | ||
| AppLayoutBehavior | ||
| ], | ||
| properties: { | ||
@@ -194,26 +197,16 @@ /** | ||
| */ | ||
| forceNarrow: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| forceNarrow: {type: Boolean, value: false}, | ||
| /** | ||
| * If the viewport's width is smaller than this value, the panel will change to narrow | ||
| * layout. In the mode the drawer will be closed. | ||
| * If the viewport's width is smaller than this value, the panel will change | ||
| * to narrow layout. In the mode the drawer will be closed. | ||
| */ | ||
| responsiveWidth: { | ||
| type: String, | ||
| value: '640px' | ||
| }, | ||
| responsiveWidth: {type: String, value: '640px'}, | ||
| /** | ||
| * Returns true if it is in narrow layout. This is useful if you need to show/hide | ||
| * elements based on the layout. | ||
| * Returns true if it is in narrow layout. This is useful if you need to | ||
| * show/hide elements based on the layout. | ||
| */ | ||
| narrow: { | ||
| type: Boolean, | ||
| reflectToAttribute: true, | ||
| readOnly: true, | ||
| notify: true | ||
| }, | ||
| narrow: | ||
| {type: Boolean, reflectToAttribute: true, readOnly: true, notify: true}, | ||
@@ -223,20 +216,10 @@ /** | ||
| */ | ||
| openedWhenNarrow: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| openedWhenNarrow: {type: Boolean, value: false}, | ||
| _drawerPosition: { | ||
| type: String | ||
| } | ||
| _drawerPosition: {type: String} | ||
| }, | ||
| listeners: { | ||
| 'click': '_clickHandler' | ||
| }, | ||
| listeners: {'click': '_clickHandler'}, | ||
| observers: ['_narrowChanged(narrow)'], | ||
| observers: [ | ||
| '_narrowChanged(narrow)' | ||
| ], | ||
| /** | ||
@@ -252,3 +235,4 @@ * A reference to the app-drawer element. | ||
| attached: function() { | ||
| // Disable drawer transitions until after app-drawer-layout sets the initial opened state. | ||
| // Disable drawer transitions until after app-drawer-layout sets the initial | ||
| // opened state. | ||
| var drawer = this.drawer; | ||
@@ -285,3 +269,4 @@ if (drawer) { | ||
| if (drawer.hasAttribute('no-transition')) { | ||
| // Enable drawer transitions after app-drawer-layout sets the initial opened state. | ||
| // Enable drawer transitions after app-drawer-layout sets the initial | ||
| // opened state. | ||
| afterNextRender(this, function() { | ||
@@ -305,4 +290,5 @@ drawer.removeAttribute('no-transition'); | ||
| _computeMediaQuery: function(forceNarrow, responsiveWidth) { | ||
| return forceNarrow ? '(min-width: 0px)' : '(max-width: ' + responsiveWidth + ')'; | ||
| return forceNarrow ? '(min-width: 0px)' : | ||
| '(max-width: ' + responsiveWidth + ')'; | ||
| } | ||
| }); |
@@ -1,8 +0,1 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import '@polymer/iron-flex-layout/iron-flex-layout.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js'; | ||
| import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js'; | ||
| /** | ||
@@ -67,2 +60,14 @@ @license | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import '../../iron-flex-layout/iron-flex-layout.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../polymer/lib/utils/html-tag.js'; | ||
| import { afterNextRender } from '../../polymer/lib/utils/render-status.js'; | ||
| import { dom } from '../../polymer/lib/legacy/polymer.dom.js'; | ||
| Polymer({ | ||
@@ -192,8 +197,4 @@ _template: html` | ||
| */ | ||
| opened: { | ||
| type: Boolean, | ||
| value: false, | ||
| notify: true, | ||
| reflectToAttribute: true | ||
| }, | ||
| opened: | ||
| {type: Boolean, value: false, notify: true, reflectToAttribute: true}, | ||
@@ -203,7 +204,3 @@ /** | ||
| */ | ||
| persistent: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| }, | ||
| persistent: {type: Boolean, value: false, reflectToAttribute: true}, | ||
@@ -213,25 +210,16 @@ /** | ||
| */ | ||
| transitionDuration: { | ||
| type: Number, | ||
| value: 200 | ||
| }, | ||
| transitionDuration: {type: Number, value: 200}, | ||
| /** | ||
| * The alignment of the drawer on the screen ('left', 'right', 'start' or 'end'). | ||
| * 'start' computes to left and 'end' to right in LTR layout and vice versa in RTL | ||
| * layout. | ||
| * The alignment of the drawer on the screen ('left', 'right', 'start' or | ||
| * 'end'). 'start' computes to left and 'end' to right in LTR layout and | ||
| * vice versa in RTL layout. | ||
| */ | ||
| align: { | ||
| type: String, | ||
| value: 'left' | ||
| }, | ||
| align: {type: String, value: 'left'}, | ||
| /** | ||
| * The computed, read-only position of the drawer on the screen ('left' or 'right'). | ||
| * The computed, read-only position of the drawer on the screen ('left' or | ||
| * 'right'). | ||
| */ | ||
| position: { | ||
| type: String, | ||
| readOnly: true, | ||
| reflectToAttribute: true | ||
| }, | ||
| position: {type: String, readOnly: true, reflectToAttribute: true}, | ||
@@ -241,7 +229,3 @@ /** | ||
| */ | ||
| swipeOpen: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| }, | ||
| swipeOpen: {type: Boolean, value: false, reflectToAttribute: true}, | ||
@@ -251,6 +235,3 @@ /** | ||
| */ | ||
| noFocusTrap: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| noFocusTrap: {type: Boolean, value: false}, | ||
@@ -260,6 +241,3 @@ /** | ||
| */ | ||
| disableSwipe: { | ||
| type: Boolean, | ||
| value: false | ||
| } | ||
| disableSwipe: {type: Boolean, value: false} | ||
| }, | ||
@@ -284,5 +262,6 @@ | ||
| this._boundEscKeydownHandler = this._escKeydownHandler.bind(this); | ||
| this.addEventListener('keydown', this._tabKeydownHandler.bind(this)) | ||
| this.addEventListener('keydown', this._tabKeydownHandler.bind(this)); | ||
| // Only listen for horizontal track so you can vertically scroll inside the drawer. | ||
| // Only listen for horizontal track so you can vertically scroll | ||
| // inside the drawer. | ||
| this.listen(this, 'track', '_track'); | ||
@@ -388,3 +367,4 @@ this.setScrollDirection('y'); | ||
| // Disable transitions since style attributes will reflect user track events. | ||
| // Disable transitions since style attributes will reflect user track | ||
| // events. | ||
| this._styleTransitionDuration(0); | ||
@@ -397,8 +377,5 @@ this.style.visibility = 'visible'; | ||
| // Use Date.now() since event.timeStamp is inconsistent across browsers (e.g. most | ||
| // browsers use milliseconds but FF 44 uses microseconds). | ||
| this._trackDetails.push({ | ||
| dx: event.detail.dx, | ||
| timeStamp: Date.now() | ||
| }); | ||
| // Use Date.now() since event.timeStamp is inconsistent across browsers | ||
| // (e.g. most browsers use milliseconds but FF 44 uses microseconds). | ||
| this._trackDetails.push({dx: event.detail.dx, timeStamp: Date.now()}); | ||
| }, | ||
@@ -411,6 +388,7 @@ | ||
| var isInEndState = isPositionLeft ? (x >= 0 || x <= -drawerWidth) : | ||
| (x <= 0 || x >= drawerWidth); | ||
| (x <= 0 || x >= drawerWidth); | ||
| if (!isInEndState) { | ||
| // No longer need the track events after this method returns - allow them to be GC'd. | ||
| // No longer need the track events after this method returns - allow them | ||
| // to be GC'd. | ||
| var trackDetails = this._trackDetails; | ||
@@ -425,4 +403,4 @@ this._trackDetails = null; | ||
| // If the drawer is not flinging, toggle the opened state based on the position of | ||
| // the drawer. | ||
| // If the drawer is not flinging, toggle the opened state based on the | ||
| // position of the drawer. | ||
| var halfWidth = drawerWidth / 2; | ||
@@ -438,3 +416,4 @@ if (event.detail.dx < -halfWidth) { | ||
| } else { | ||
| this.debounce('_resetDrawerState', this._resetDrawerState, this.transitionDuration); | ||
| this.debounce( | ||
| '_resetDrawerState', this._resetDrawerState, this.transitionDuration); | ||
| } | ||
@@ -511,3 +490,3 @@ | ||
| // initial slope of the timing function. | ||
| var t = this._FLING_INITIAL_SLOPE * dx / velocity | ||
| var t = this._FLING_INITIAL_SLOPE * dx / velocity; | ||
| this._styleTransitionDuration(t); | ||
@@ -564,3 +543,4 @@ this._styleTransitionTimingFunction(this._FLING_TIMING_FUNCTION); | ||
| this._drawerState = this.persistent ? | ||
| this._DRAWER_STATE.OPENED_PERSISTENT : this._DRAWER_STATE.OPENED; | ||
| this._DRAWER_STATE.OPENED_PERSISTENT : | ||
| this._DRAWER_STATE.OPENED; | ||
| } else { | ||
@@ -601,16 +581,17 @@ this._drawerState = this._DRAWER_STATE.CLOSED; | ||
| // NOTE: Unless we use /deep/ (which we shouldn't since it's deprecated), this will | ||
| // not select focusable elements inside shadow roots. | ||
| // NOTE: Unless we use /deep/ (which we shouldn't since it's deprecated), | ||
| // this will not select focusable elements inside shadow roots. | ||
| var focusableElementsSelector = [ | ||
| 'a[href]:not([tabindex="-1"])', | ||
| 'area[href]:not([tabindex="-1"])', | ||
| 'input:not([disabled]):not([tabindex="-1"])', | ||
| 'select:not([disabled]):not([tabindex="-1"])', | ||
| 'textarea:not([disabled]):not([tabindex="-1"])', | ||
| 'button:not([disabled]):not([tabindex="-1"])', | ||
| 'iframe:not([tabindex="-1"])', | ||
| '[tabindex]:not([tabindex="-1"])', | ||
| '[contentEditable=true]:not([tabindex="-1"])' | ||
| ].join(','); | ||
| var focusableElements = dom(this).querySelectorAll(focusableElementsSelector); | ||
| 'a[href]:not([tabindex="-1"])', | ||
| 'area[href]:not([tabindex="-1"])', | ||
| 'input:not([disabled]):not([tabindex="-1"])', | ||
| 'select:not([disabled]):not([tabindex="-1"])', | ||
| 'textarea:not([disabled]):not([tabindex="-1"])', | ||
| 'button:not([disabled]):not([tabindex="-1"])', | ||
| 'iframe:not([tabindex="-1"])', | ||
| '[tabindex]:not([tabindex="-1"])', | ||
| '[contentEditable=true]:not([tabindex="-1"])' | ||
| ].join(','); | ||
| var focusableElements = | ||
| dom(this).querySelectorAll(focusableElementsSelector); | ||
@@ -621,3 +602,4 @@ if (focusableElements.length > 0) { | ||
| } else { | ||
| // Reset saved tab stops when there are no focusable elements in the drawer. | ||
| // Reset saved tab stops when there are no focusable elements in the | ||
| // drawer. | ||
| this._firstTabStop = null; | ||
@@ -627,5 +609,6 @@ this._lastTabStop = null; | ||
| // Focus on app-drawer if it has non-zero tabindex. Otherwise, focus the first focusable | ||
| // element in the drawer, if it exists. Use the tabindex attribute since the this.tabIndex | ||
| // property in IE/Edge returns 0 (instead of -1) when the attribute is not set. | ||
| // Focus on app-drawer if it has non-zero tabindex. Otherwise, focus the | ||
| // first focusable element in the drawer, if it exists. Use the tabindex | ||
| // attribute since the this.tabIndex property in IE/Edge returns 0 (instead | ||
| // of -1) when the attribute is not set. | ||
| var tabindex = this.getAttribute('tabindex'); | ||
@@ -645,5 +628,7 @@ if (tabindex && parseInt(tabindex, 10) > -1) { | ||
| var TAB_KEYCODE = 9; | ||
| if (this._drawerState === this._DRAWER_STATE.OPENED && event.keyCode === TAB_KEYCODE) { | ||
| if (this._drawerState === this._DRAWER_STATE.OPENED && | ||
| event.keyCode === TAB_KEYCODE) { | ||
| if (event.shiftKey) { | ||
| if (this._firstTabStop && dom(event).localTarget === this._firstTabStop) { | ||
| if (this._firstTabStop && | ||
| dom(event).localTarget === this._firstTabStop) { | ||
| event.preventDefault(); | ||
@@ -653,3 +638,4 @@ this._lastTabStop.focus(); | ||
| } else { | ||
| if (this._lastTabStop && dom(event).localTarget === this._lastTabStop) { | ||
| if (this._lastTabStop && | ||
| dom(event).localTarget === this._lastTabStop) { | ||
| event.preventDefault(); | ||
@@ -665,5 +651,6 @@ this._firstTabStop.focus(); | ||
| // Use a debounce timer instead of transitionend since transitionend won't fire when | ||
| // app-drawer is display: none. | ||
| this.debounce('_resetDrawerState', this._resetDrawerState, this.transitionDuration); | ||
| // Use a debounce timer instead of transitionend since transitionend won't | ||
| // fire when app-drawer is display: none. | ||
| this.debounce( | ||
| '_resetDrawerState', this._resetDrawerState, this.transitionDuration); | ||
| }, | ||
@@ -670,0 +657,0 @@ |
@@ -1,3 +0,3 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| const $_documentContainer = document.createElement('div'); | ||
| import '../../polymer/polymer-legacy.js'; | ||
| const $_documentContainer = document.createElement('template'); | ||
| $_documentContainer.setAttribute('style', 'display: none;'); | ||
@@ -81,3 +81,3 @@ | ||
| document.head.appendChild($_documentContainer); | ||
| document.head.appendChild($_documentContainer.content); | ||
@@ -199,2 +199,7 @@ /** | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| ; |
@@ -1,7 +0,1 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import '@polymer/iron-flex-layout/iron-flex-layout.js'; | ||
| import { AppLayoutBehavior } from '../app-layout-behavior/app-layout-behavior.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js'; | ||
| /** | ||
@@ -65,2 +59,14 @@ @license | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import '../../iron-flex-layout/iron-flex-layout.js'; | ||
| import { AppLayoutBehavior } from '../app-layout-behavior/app-layout-behavior.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../polymer/lib/utils/html-tag.js'; | ||
| import { dom } from '../../polymer/lib/legacy/polymer.dom.js'; | ||
| Polymer({ | ||
@@ -147,7 +153,4 @@ _template: html` | ||
| is: 'app-header-layout', | ||
| behaviors: [AppLayoutBehavior], | ||
| behaviors: [ | ||
| AppLayoutBehavior | ||
| ], | ||
| properties: { | ||
@@ -158,12 +161,7 @@ /** | ||
| */ | ||
| hasScrollingRegion: { | ||
| type: Boolean, | ||
| value: false, | ||
| reflectToAttribute: true | ||
| } | ||
| hasScrollingRegion: | ||
| {type: Boolean, value: false, reflectToAttribute: true} | ||
| }, | ||
| observers: [ | ||
| 'resetLayout(isAttached, hasScrollingRegion)' | ||
| ], | ||
| observers: ['resetLayout(isAttached, hasScrollingRegion)'], | ||
@@ -184,10 +182,11 @@ /** | ||
| } | ||
| // Remove the initializing class, which staticly positions the header and the content | ||
| // until the height of the header can be read. | ||
| // Remove the initializing class, which staticly positions the header and | ||
| // the content until the height of the header can be read. | ||
| this.$.wrapper.classList.remove('initializing'); | ||
| // Update scroll target. | ||
| header.scrollTarget = this.hasScrollingRegion ? | ||
| this.$.contentContainer : this.ownerDocument.documentElement; | ||
| // Get header height here so that style reads are batched together before style writes | ||
| // (i.e. getBoundingClientRect() below). | ||
| this.$.contentContainer : | ||
| this.ownerDocument.documentElement; | ||
| // Get header height here so that style reads are batched together before | ||
| // style writes (i.e. getBoundingClientRect() below). | ||
| var headerHeight = header.offsetHeight; | ||
@@ -209,5 +208,5 @@ // Update the header position. | ||
| if (header.fixed && !header.condenses && this.hasScrollingRegion) { | ||
| // If the header size does not change and we're using a scrolling region, exclude | ||
| // the header area from the scrolling region so that the header doesn't overlap | ||
| // the scrollbar. | ||
| // If the header size does not change and we're using a scrolling region, | ||
| // exclude the header area from the scrolling region so that the header | ||
| // doesn't overlap the scrollbar. | ||
| containerStyle.marginTop = headerHeight + 'px'; | ||
@@ -214,0 +213,0 @@ containerStyle.paddingTop = ''; |
@@ -1,8 +0,1 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import '@polymer/iron-flex-layout/iron-flex-layout.js'; | ||
| import { AppScrollEffectsBehavior } from '../app-scroll-effects/app-scroll-effects-behavior.js'; | ||
| import { AppLayoutBehavior } from '../app-layout-behavior/app-layout-behavior.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js'; | ||
| /** | ||
@@ -228,2 +221,15 @@ @license | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import '../../iron-flex-layout/iron-flex-layout.js'; | ||
| import { AppScrollEffectsBehavior } from '../app-scroll-effects/app-scroll-effects-behavior.js'; | ||
| import { AppLayoutBehavior } from '../app-layout-behavior/app-layout-behavior.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../polymer/lib/utils/html-tag.js'; | ||
| import { dom } from '../../polymer/lib/legacy/polymer.dom.js'; | ||
| Polymer({ | ||
@@ -315,13 +321,10 @@ _template: html` | ||
| is: 'app-header', | ||
| behaviors: [AppScrollEffectsBehavior, AppLayoutBehavior], | ||
| behaviors: [ | ||
| AppScrollEffectsBehavior, | ||
| AppLayoutBehavior | ||
| ], | ||
| properties: { | ||
| /** | ||
| * If true, the header will automatically collapse when scrolling down. | ||
| * That is, the `sticky` element remains visible when the header is fully condensed | ||
| * whereas the rest of the elements will collapse below `sticky` element. | ||
| * That is, the `sticky` element remains visible when the header is fully | ||
| *condensed whereas the rest of the elements will collapse below `sticky` | ||
| *element. | ||
| * | ||
@@ -338,5 +341,6 @@ * By default, the `sticky` element is the first toolbar in the light DOM: | ||
| * | ||
| * Additionally, you can specify which toolbar or element remains visible in condensed mode | ||
| * by adding the `sticky` attribute to that element. For example: if we want the last | ||
| * toolbar to remain visible, we can add the `sticky` attribute to it. | ||
| * Additionally, you can specify which toolbar or element remains visible in | ||
| *condensed mode by adding the `sticky` attribute to that element. For | ||
| *example: if we want the last toolbar to remain visible, we can add the | ||
| *`sticky` attribute to it. | ||
| * | ||
@@ -353,6 +357,3 @@ *```html | ||
| */ | ||
| condenses: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| condenses: {type: Boolean, value: false}, | ||
@@ -362,6 +363,3 @@ /** | ||
| */ | ||
| fixed: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| fixed: {type: Boolean, value: false}, | ||
@@ -371,6 +369,3 @@ /** | ||
| */ | ||
| reveals: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| reveals: {type: Boolean, value: false}, | ||
@@ -380,12 +375,6 @@ /** | ||
| */ | ||
| shadow: { | ||
| type: Boolean, | ||
| reflectToAttribute: true, | ||
| value: false | ||
| } | ||
| shadow: {type: Boolean, reflectToAttribute: true, value: false} | ||
| }, | ||
| observers: [ | ||
| '_configChanged(isAttached, condenses, fixed)' | ||
| ], | ||
| observers: ['_configChanged(isAttached, condenses, fixed)'], | ||
@@ -459,3 +448,4 @@ /** | ||
| var nodes = dom(this.$.slot).getDistributedNodes(); | ||
| // Get the element with the sticky attribute on it or the first element in the light DOM. | ||
| // Get the element with the sticky attribute on it or the first element in | ||
| // the light DOM. | ||
| for (var i = 0, node; node = /** @type {!HTMLElement} */ (nodes[i]); i++) { | ||
@@ -490,7 +480,8 @@ if (node.nodeType === Node.ELEMENT_NODE) { | ||
| // prepare for measurement | ||
| if (!firstSetup) { | ||
| if (!firstSetup) { | ||
| this._updateScrollState(0, true); | ||
| } | ||
| if (this._mayMove()) { | ||
| this._dHeight = this._stickyEl ? this._height - this._stickyEl.offsetHeight : 0; | ||
| this._dHeight = | ||
| this._stickyEl ? this._height - this._stickyEl.offsetHeight : 0; | ||
| } else { | ||
@@ -532,3 +523,4 @@ this._dHeight = 0; | ||
| if (this._mayMove()) { | ||
| top = this._clamp(this.reveals ? lastTop + dScrollTop : scrollTop, 0, maxHeaderTop); | ||
| top = this._clamp( | ||
| this.reveals ? lastTop + dScrollTop : scrollTop, 0, maxHeaderTop); | ||
| } | ||
@@ -541,3 +533,4 @@ if (scrollTop >= this._dHeight) { | ||
| // set the initial scroll position | ||
| if (now - this._initTimestamp > 300 || this._wasScrollingDown !== isScrollingDown) { | ||
| if (now - this._initTimestamp > 300 || | ||
| this._wasScrollingDown !== isScrollingDown) { | ||
| this._initScrollTop = scrollTop; | ||
@@ -548,3 +541,4 @@ this._initTimestamp = now; | ||
| // check if the header is allowed to snap | ||
| if (Math.abs(this._initScrollTop - scrollTop) > 30 || absDScrollTop > 10) { | ||
| if (Math.abs(this._initScrollTop - scrollTop) > 30 || | ||
| absDScrollTop > 10) { | ||
| if (isScrollingDown && scrollTop >= maxHeaderTop) { | ||
@@ -556,3 +550,4 @@ top = maxHeaderTop; | ||
| var scrollVelocity = dScrollTop / (now - this._lastTimestamp); | ||
| this.style.transitionDuration = this._clamp((top - lastTop) / scrollVelocity, 0, 300) + 'ms'; | ||
| this.style.transitionDuration = | ||
| this._clamp((top - lastTop) / scrollVelocity, 0, 300) + 'ms'; | ||
| } else { | ||
@@ -574,3 +569,4 @@ top = this._top; | ||
| } | ||
| if (forceUpdate || progress !== this._progress || lastTop !== top || scrollTop === 0) { | ||
| if (forceUpdate || progress !== this._progress || lastTop !== top || | ||
| scrollTop === 0) { | ||
| this._progress = progress; | ||
@@ -592,4 +588,4 @@ this._runEffects(progress, top); | ||
| /** | ||
| * Returns true if the current header will condense based on the size of the header | ||
| * and the `consenses` property. | ||
| * Returns true if the current header will condense based on the size of the | ||
| * header and the `consenses` property. | ||
| * | ||
@@ -621,3 +617,3 @@ * @return {boolean} | ||
| return this._top === 0 ? this._clampedScrollTop > 0 : | ||
| this._clampedScrollTop - this._maxHeaderTop >= 0; | ||
| this._clampedScrollTop - this._maxHeaderTop >= 0; | ||
| }, | ||
@@ -633,4 +629,9 @@ | ||
| if (this._stickyEl) { | ||
| this.translate3d(0, this.condenses && y >= this._stickyElTop ? | ||
| (Math.min(y, this._dHeight) - this._stickyElTop) + 'px' : 0, 0, this._stickyEl); | ||
| this.translate3d( | ||
| 0, | ||
| this.condenses && y >= this._stickyElTop ? | ||
| (Math.min(y, this._dHeight) - this._stickyElTop) + 'px' : | ||
| 0, | ||
| 0, | ||
| this._stickyEl); | ||
| } | ||
@@ -653,3 +654,4 @@ }, | ||
| this._bgContainer.appendChild(this._bgFront); | ||
| dom(this.root).insertBefore(this._bgContainer, this.$.contentContainer); | ||
| dom(this.root).insertBefore( | ||
| this._bgContainer, this.$.contentContainer); | ||
| } | ||
@@ -685,4 +687,4 @@ }, | ||
| getScrollState: function() { | ||
| return { progress: this._progress, top: this._top }; | ||
| return {progress: this._progress, top: this._top}; | ||
| } | ||
| }); |
@@ -1,78 +0,91 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js'; | ||
| import * as async from '@polymer/polymer/lib/utils/async.js'; | ||
| import { animationFrame } from '@polymer/polymer/lib/utils/async.js'; | ||
| import { Debouncer } from '@polymer/polymer/lib/utils/debounce.js'; | ||
| import { enqueueDebouncer } from '@polymer/polymer/lib/utils/flush.js'; | ||
| /** | ||
| @license | ||
| Copyright (c) 2016 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 | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import { IronResizableBehavior } from '../../iron-resizable-behavior/iron-resizable-behavior.js'; | ||
| import { dom } from '../../polymer/lib/legacy/polymer.dom.js'; | ||
| import * as async from '../../polymer/lib/utils/async.js'; | ||
| import { animationFrame } from '../../polymer/lib/utils/async.js'; | ||
| import { Debouncer } from '../../polymer/lib/utils/debounce.js'; | ||
| import { enqueueDebouncer } from '../../polymer/lib/utils/flush.js'; | ||
| /** | ||
| * @polymerBehavior Polymer.AppLayoutBehavior | ||
| **/ | ||
| export const AppLayoutBehavior = [ | ||
| IronResizableBehavior, { | ||
| IronResizableBehavior, | ||
| { | ||
| listeners: { | ||
| 'app-reset-layout': '_appResetLayoutHandler', | ||
| 'iron-resize': 'resetLayout' | ||
| }, | ||
| listeners: { | ||
| 'app-reset-layout': '_appResetLayoutHandler', | ||
| 'iron-resize': 'resetLayout' | ||
| }, | ||
| attached: function() { | ||
| this.fire('app-reset-layout'); | ||
| }, | ||
| attached: function() { | ||
| this.fire('app-reset-layout'); | ||
| }, | ||
| _appResetLayoutHandler: function(e) { | ||
| if (dom(e).path[0] === this) { | ||
| return; | ||
| } | ||
| this.resetLayout(); | ||
| e.stopPropagation(); | ||
| }, | ||
| _appResetLayoutHandler: function(e) { | ||
| if (dom(e).path[0] === this) { | ||
| return; | ||
| } | ||
| this.resetLayout(); | ||
| e.stopPropagation(); | ||
| }, | ||
| _updateLayoutStates: function() { | ||
| console.error('unimplemented'); | ||
| }, | ||
| _updateLayoutStates: function() { | ||
| console.error('unimplemented'); | ||
| }, | ||
| /** | ||
| * Resets the layout. If you changed the size of this element via CSS | ||
| * you can notify the changes by either firing the `iron-resize` event | ||
| * or calling `resetLayout` directly. | ||
| * | ||
| * @method resetLayout | ||
| */ | ||
| resetLayout: function() { | ||
| // Polymer v2.x | ||
| var self = this; | ||
| var cb = this._updateLayoutStates.bind(this); | ||
| if (async && animationFrame) { | ||
| this._layoutDebouncer = Debouncer.debounce( | ||
| this._layoutDebouncer, | ||
| animationFrame, | ||
| cb); | ||
| enqueueDebouncer(this._layoutDebouncer); | ||
| } | ||
| // Polymer v1.x | ||
| else { | ||
| this.debounce('resetLayout', cb); | ||
| } | ||
| this._notifyDescendantResize(); | ||
| }, | ||
| /** | ||
| * Resets the layout. If you changed the size of this element via CSS | ||
| * you can notify the changes by either firing the `iron-resize` event | ||
| * or calling `resetLayout` directly. | ||
| * | ||
| * @method resetLayout | ||
| */ | ||
| resetLayout: function() { | ||
| // Polymer v2.x | ||
| var self = this; | ||
| var cb = this._updateLayoutStates.bind(this); | ||
| if (async && animationFrame) { | ||
| this._layoutDebouncer = Debouncer.debounce( | ||
| this._layoutDebouncer, animationFrame, cb); | ||
| enqueueDebouncer(this._layoutDebouncer); | ||
| } | ||
| // Polymer v1.x | ||
| else { | ||
| this.debounce('resetLayout', cb); | ||
| } | ||
| this._notifyDescendantResize(); | ||
| }, | ||
| _notifyLayoutChanged: function() { | ||
| var self = this; | ||
| // TODO: the event `app-reset-layout` can be fired synchronously | ||
| // as long as `_updateLayoutStates` waits for all the microtasks after rAF. | ||
| // E.g. requestAnimationFrame(setTimeOut()) | ||
| requestAnimationFrame(function() { | ||
| self.fire('app-reset-layout'); | ||
| }); | ||
| }, | ||
| _notifyLayoutChanged: function() { | ||
| var self = this; | ||
| // TODO: the event `app-reset-layout` can be fired synchronously | ||
| // as long as `_updateLayoutStates` waits for all the microtasks after | ||
| // rAF. E.g. requestAnimationFrame(setTimeOut()) | ||
| requestAnimationFrame(function() { | ||
| self.fire('app-reset-layout'); | ||
| }); | ||
| }, | ||
| _notifyDescendantResize: function() { | ||
| if (!this.isAttached) { | ||
| return; | ||
| _notifyDescendantResize: function() { | ||
| if (!this.isAttached) { | ||
| return; | ||
| } | ||
| this._interestedResizables.forEach(function(resizable) { | ||
| if (this.resizerShouldNotify(resizable)) { | ||
| this._notifyDescendant(resizable); | ||
| } | ||
| }, this); | ||
| } | ||
| this._interestedResizables.forEach(function(resizable) { | ||
| if (this.resizerShouldNotify(resizable)) { | ||
| this._notifyDescendant(resizable); | ||
| } | ||
| }, this); | ||
| } | ||
| }]; | ||
| ]; |
@@ -1,293 +0,397 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import { IronScrollTargetBehavior } from '@polymer/iron-scroll-target-behavior/iron-scroll-target-behavior.js'; | ||
| /** | ||
| @license | ||
| Copyright (c) 2016 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 | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import { IronScrollTargetBehavior } from '../../iron-scroll-target-behavior/iron-scroll-target-behavior.js'; | ||
| import { _scrollEffects } from '../helpers/helpers.js'; | ||
| /** | ||
| * `Polymer.AppScrollEffectsBehavior` provides an interface that allows an | ||
| * element to use scrolls effects. | ||
| * | ||
| * ### Importing the app-layout effects | ||
| * | ||
| * app-layout provides a set of scroll effects that can be used by explicitly | ||
| * importing `app-scroll-effects.html`: | ||
| * | ||
| * ```html | ||
| * <link rel="import" | ||
| * href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html"> | ||
| * ``` | ||
| * | ||
| * The scroll effects can also be used by individually importing | ||
| * `app-layout/app-scroll-effects/effects/[effectName].html`. For example: | ||
| * | ||
| * ```html | ||
| * <link rel="import" | ||
| * href="/bower_components/app-layout/app-scroll-effects/effects/waterfall.html"> | ||
| * ``` | ||
| * | ||
| * ### Consuming effects | ||
| * | ||
| * Effects can be consumed via the `effects` property. For example: | ||
| * | ||
| * ```html | ||
| * <app-header effects="waterfall"></app-header> | ||
| * ``` | ||
| * | ||
| * ### Creating scroll effects | ||
| * | ||
| * You may want to create a custom scroll effect if you need to modify the CSS | ||
| * of an element based on the scroll position. | ||
| * | ||
| * A scroll effect definition is an object with `setUp()`, `tearDown()` and | ||
| * `run()` functions. | ||
| * | ||
| * To register the effect, you can use | ||
| * `Polymer.AppLayout.registerEffect(effectName, effectDef)` For example, let's | ||
| * define an effect that resizes the header's logo: | ||
| * | ||
| * ```js | ||
| * Polymer.AppLayout.registerEffect('resizable-logo', { | ||
| * setUp: function(config) { | ||
| * // the effect's config is passed to the setUp. | ||
| * this._fxResizeLogo = { logo: Polymer.dom(this).querySelector('[logo]') }; | ||
| * }, | ||
| * | ||
| * run: function(progress) { | ||
| * // the progress of the effect | ||
| * this.transform('scale3d(' + progress + ', '+ progress +', 1)', | ||
| * this._fxResizeLogo.logo); | ||
| * }, | ||
| * | ||
| * tearDown: function() { | ||
| * // clean up and reset of states | ||
| * delete this._fxResizeLogo; | ||
| * } | ||
| * }); | ||
| * ``` | ||
| * Now, you can consume the effect: | ||
| * | ||
| * ```html | ||
| * <app-header id="appHeader" effects="resizable-logo"> | ||
| * <img logo src="logo.svg"> | ||
| * </app-header> | ||
| * ``` | ||
| * | ||
| * ### Imperative API | ||
| * | ||
| * ```js | ||
| * var logoEffect = appHeader.createEffect('resizable-logo', effectConfig); | ||
| * // run the effect: logoEffect.run(progress); | ||
| * // tear down the effect: logoEffect.tearDown(); | ||
| * ``` | ||
| * | ||
| * ### Configuring effects | ||
| * | ||
| * For effects installed via the `effects` property, their configuration can be | ||
| * set via the `effectsConfig` property. For example: | ||
| * | ||
| * ```html | ||
| * <app-header effects="waterfall" | ||
| * effects-config='{"waterfall": {"startsAt": 0, "endsAt": 0.5}}'> | ||
| * </app-header> | ||
| * ``` | ||
| * | ||
| * All effects have a `startsAt` and `endsAt` config property. They specify at | ||
| * what point the effect should start and end. This value goes from 0 to 1 | ||
| * inclusive. | ||
| * | ||
| * @polymerBehavior | ||
| */ | ||
| export const AppScrollEffectsBehavior = [ | ||
| IronScrollTargetBehavior, | ||
| { | ||
| { | ||
| properties: { | ||
| properties: { | ||
| /** | ||
| * A space-separated list of the effects names that will be triggered when | ||
| * the user scrolls. e.g. `waterfall parallax-background` installs the | ||
| * `waterfall` and `parallax-background`. | ||
| */ | ||
| effects: {type: String}, | ||
| /** | ||
| * An object that configurates the effects installed via the `effects` | ||
| * property. e.g. | ||
| * ```js | ||
| * element.effectsConfig = { | ||
| * "blend-background": { | ||
| * "startsAt": 0.5 | ||
| * } | ||
| * }; | ||
| * ``` | ||
| * Every effect has at least two config properties: `startsAt` and | ||
| * `endsAt`. These properties indicate when the event should start and end | ||
| * respectively and relative to the overall element progress. So for | ||
| * example, if `blend-background` starts at `0.5`, the effect will only | ||
| * start once the current element reaches 0.5 of its progress. In this | ||
| * context, the progress is a value in the range of `[0, 1]` that | ||
| * indicates where this element is on the screen relative to the viewport. | ||
| */ | ||
| effectsConfig: { | ||
| type: Object, | ||
| value: function() { | ||
| return {}; | ||
| } | ||
| }, | ||
| /** | ||
| * Disables CSS transitions and scroll effects on the element. | ||
| */ | ||
| disabled: {type: Boolean, reflectToAttribute: true, value: false}, | ||
| /** | ||
| * Allows to set a `scrollTop` threshold. When greater than 0, | ||
| * `thresholdTriggered` is true only when the scroll target's `scrollTop` | ||
| * has reached this value. | ||
| * | ||
| * For example, if `threshold = 100`, `thresholdTriggered` is true when | ||
| * the `scrollTop` is at least `100`. | ||
| */ | ||
| threshold: {type: Number, value: 0}, | ||
| /** | ||
| * True if the `scrollTop` threshold (set in `scrollTopThreshold`) has | ||
| * been reached. | ||
| */ | ||
| thresholdTriggered: { | ||
| type: Boolean, | ||
| notify: true, | ||
| readOnly: true, | ||
| reflectToAttribute: true | ||
| } | ||
| }, | ||
| observers: ['_effectsChanged(effects, effectsConfig, isAttached)'], | ||
| /** | ||
| * A space-separated list of the effects names that will be triggered when the user scrolls. | ||
| * e.g. `waterfall parallax-background` installs the `waterfall` and `parallax-background`. | ||
| * Updates the scroll state. This method should be overridden | ||
| * by the consumer of this behavior. | ||
| * | ||
| * @method _updateScrollState | ||
| * @param {number} scrollTop | ||
| */ | ||
| effects: { | ||
| type: String | ||
| }, | ||
| _updateScrollState: function(scrollTop) {}, | ||
| /** | ||
| * An object that configurates the effects installed via the `effects` property. e.g. | ||
| * ```js | ||
| * element.effectsConfig = { | ||
| * "blend-background": { | ||
| * "startsAt": 0.5 | ||
| * } | ||
| * }; | ||
| * ``` | ||
| * Every effect has at least two config properties: `startsAt` and `endsAt`. | ||
| * These properties indicate when the event should start and end respectively | ||
| * and relative to the overall element progress. So for example, if `blend-background` | ||
| * starts at `0.5`, the effect will only start once the current element reaches 0.5 | ||
| * of its progress. In this context, the progress is a value in the range of `[0, 1]` | ||
| * that indicates where this element is on the screen relative to the viewport. | ||
| * Returns true if the current element is on the screen. | ||
| * That is, visible in the current viewport. This method should be | ||
| * overridden by the consumer of this behavior. | ||
| * | ||
| * @method isOnScreen | ||
| * @return {boolean} | ||
| */ | ||
| effectsConfig: { | ||
| type: Object, | ||
| value: function() { | ||
| return {}; | ||
| } | ||
| isOnScreen: function() { | ||
| return false; | ||
| }, | ||
| /** | ||
| * Disables CSS transitions and scroll effects on the element. | ||
| * Returns true if there's content below the current element. This method | ||
| * should be overridden by the consumer of this behavior. | ||
| * | ||
| * @method isContentBelow | ||
| * @return {boolean} | ||
| */ | ||
| disabled: { | ||
| type: Boolean, | ||
| reflectToAttribute: true, | ||
| value: false | ||
| isContentBelow: function() { | ||
| return false; | ||
| }, | ||
| /** | ||
| * Allows to set a `scrollTop` threshold. When greater than 0, `thresholdTriggered` | ||
| * is true only when the scroll target's `scrollTop` has reached this value. | ||
| * List of effects handlers that will take place during scroll. | ||
| * | ||
| * For example, if `threshold = 100`, `thresholdTriggered` is true when the `scrollTop` | ||
| * is at least `100`. | ||
| * @type {Array<Function>} | ||
| */ | ||
| threshold: { | ||
| type: Number, | ||
| value: 0 | ||
| }, | ||
| _effectsRunFn: null, | ||
| /** | ||
| * True if the `scrollTop` threshold (set in `scrollTopThreshold`) has | ||
| * been reached. | ||
| * List of the effects definitions installed via the `effects` property. | ||
| * | ||
| * @type {Array<Object>} | ||
| */ | ||
| thresholdTriggered: { | ||
| type: Boolean, | ||
| notify: true, | ||
| readOnly: true, | ||
| reflectToAttribute: true | ||
| } | ||
| }, | ||
| _effects: null, | ||
| observers: [ | ||
| '_effectsChanged(effects, effectsConfig, isAttached)' | ||
| ], | ||
| /** | ||
| * The clamped value of `_scrollTop`. | ||
| * @type number | ||
| */ | ||
| get _clampedScrollTop() { | ||
| return Math.max(0, this._scrollTop); | ||
| }, | ||
| /** | ||
| * Updates the scroll state. This method should be overridden | ||
| * by the consumer of this behavior. | ||
| * | ||
| * @method _updateScrollState | ||
| * @param {number} scrollTop | ||
| */ | ||
| _updateScrollState: function(scrollTop) {}, | ||
| detached: function() { | ||
| this._tearDownEffects(); | ||
| }, | ||
| /** | ||
| * Returns true if the current element is on the screen. | ||
| * That is, visible in the current viewport. This method should be | ||
| * overridden by the consumer of this behavior. | ||
| * | ||
| * @method isOnScreen | ||
| * @return {boolean} | ||
| */ | ||
| isOnScreen: function() { | ||
| return false; | ||
| }, | ||
| /** | ||
| * Creates an effect object from an effect's name that can be used to run | ||
| * effects programmatically. | ||
| * | ||
| * @method createEffect | ||
| * @param {string} effectName The effect's name registered via `Polymer.AppLayout.registerEffect`. | ||
| * @param {Object=} effectConfig The effect config object. (Optional) | ||
| * @return {Object} An effect object with the following functions: | ||
| * | ||
| * * `effect.setUp()`, Sets up the requirements for the effect. | ||
| * This function is called automatically before the `effect` function | ||
| * returns. | ||
| * * `effect.run(progress, y)`, Runs the effect given a `progress`. | ||
| * * `effect.tearDown()`, Cleans up any DOM nodes or element references | ||
| * used by the effect. | ||
| * | ||
| * Example: | ||
| * ```js | ||
| * var parallax = element.createEffect('parallax-background'); | ||
| * // runs the effect | ||
| * parallax.run(0.5, 0); | ||
| * ``` | ||
| */ | ||
| createEffect: function(effectName, effectConfig) { | ||
| var effectDef = _scrollEffects[effectName]; | ||
| if (!effectDef) { | ||
| throw new ReferenceError(this._getUndefinedMsg(effectName)); | ||
| } | ||
| var prop = this._boundEffect(effectDef, effectConfig || {}); | ||
| prop.setUp(); | ||
| return prop; | ||
| }, | ||
| /** | ||
| * Returns true if there's content below the current element. This method | ||
| * should be overridden by the consumer of this behavior. | ||
| * | ||
| * @method isContentBelow | ||
| * @return {boolean} | ||
| */ | ||
| isContentBelow: function() { | ||
| return false; | ||
| }, | ||
| /** | ||
| * Called when `effects` or `effectsConfig` changes. | ||
| */ | ||
| _effectsChanged: function(effects, effectsConfig, isAttached) { | ||
| this._tearDownEffects(); | ||
| /** | ||
| * List of effects handlers that will take place during scroll. | ||
| * | ||
| * @type {Array<Function>} | ||
| */ | ||
| _effectsRunFn: null, | ||
| if (!effects || !isAttached) { | ||
| return; | ||
| } | ||
| effects.split(' ').forEach(function(effectName) { | ||
| var effectDef; | ||
| if (effectName !== '') { | ||
| if ((effectDef = _scrollEffects[effectName])) { | ||
| this._effects.push( | ||
| this._boundEffect(effectDef, effectsConfig[effectName])); | ||
| } else { | ||
| console.warn(this._getUndefinedMsg(effectName)); | ||
| } | ||
| } | ||
| }, this); | ||
| /** | ||
| * List of the effects definitions installed via the `effects` property. | ||
| * | ||
| * @type {Array<Object>} | ||
| */ | ||
| _effects: null, | ||
| this._setUpEffect(); | ||
| }, | ||
| /** | ||
| * The clamped value of `_scrollTop`. | ||
| * @type number | ||
| */ | ||
| get _clampedScrollTop() { | ||
| return Math.max(0, this._scrollTop); | ||
| }, | ||
| /** | ||
| * Forces layout | ||
| */ | ||
| _layoutIfDirty: function() { | ||
| return this.offsetWidth; | ||
| }, | ||
| detached: function() { | ||
| this._tearDownEffects(); | ||
| }, | ||
| /** | ||
| * Returns an effect object bound to the current context. | ||
| * | ||
| * @param {Object} effectDef | ||
| * @param {Object=} effectsConfig The effect config object if the effect accepts config values. (Optional) | ||
| */ | ||
| _boundEffect: function(effectDef, effectsConfig) { | ||
| effectsConfig = effectsConfig || {}; | ||
| var startsAt = parseFloat(effectsConfig.startsAt || 0); | ||
| var endsAt = parseFloat(effectsConfig.endsAt || 1); | ||
| var deltaS = endsAt - startsAt; | ||
| var noop = function() {}; | ||
| // fast path if possible | ||
| var runFn = (startsAt === 0 && endsAt === 1) ? | ||
| effectDef.run : | ||
| function(progress, y) { | ||
| effectDef.run.call( | ||
| this, Math.max(0, (progress - startsAt) / deltaS), y); | ||
| }; | ||
| return { | ||
| setUp: effectDef.setUp ? effectDef.setUp.bind(this, effectsConfig) : | ||
| noop, | ||
| run: effectDef.run ? runFn.bind(this) : noop, | ||
| tearDown: effectDef.tearDown ? effectDef.tearDown.bind(this) : noop | ||
| }; | ||
| }, | ||
| /** | ||
| * Creates an effect object from an effect's name that can be used to run | ||
| * effects programmatically. | ||
| * | ||
| * @method createEffect | ||
| * @param {string} effectName The effect's name registered via `Polymer.AppLayout.registerEffect`. | ||
| * @param {Object=} effectConfig The effect config object. (Optional) | ||
| * @return {Object} An effect object with the following functions: | ||
| * | ||
| * * `effect.setUp()`, Sets up the requirements for the effect. | ||
| * This function is called automatically before the `effect` function returns. | ||
| * * `effect.run(progress, y)`, Runs the effect given a `progress`. | ||
| * * `effect.tearDown()`, Cleans up any DOM nodes or element references used by the effect. | ||
| * | ||
| * Example: | ||
| * ```js | ||
| * var parallax = element.createEffect('parallax-background'); | ||
| * // runs the effect | ||
| * parallax.run(0.5, 0); | ||
| * ``` | ||
| */ | ||
| createEffect: function(effectName, effectConfig) { | ||
| var effectDef = _scrollEffects[effectName]; | ||
| if (!effectDef) { | ||
| throw new ReferenceError(this._getUndefinedMsg(effectName)); | ||
| } | ||
| var prop = this._boundEffect(effectDef, effectConfig || {}); | ||
| prop.setUp(); | ||
| return prop; | ||
| }, | ||
| /** | ||
| * Sets up the effects. | ||
| */ | ||
| _setUpEffect: function() { | ||
| if (this.isAttached && this._effects) { | ||
| this._effectsRunFn = []; | ||
| this._effects.forEach(function(effectDef) { | ||
| // install the effect only if no error was reported | ||
| if (effectDef.setUp() !== false) { | ||
| this._effectsRunFn.push(effectDef.run); | ||
| } | ||
| }, this); | ||
| } | ||
| }, | ||
| /** | ||
| * Called when `effects` or `effectsConfig` changes. | ||
| */ | ||
| _effectsChanged: function(effects, effectsConfig, isAttached) { | ||
| this._tearDownEffects(); | ||
| /** | ||
| * Tears down the effects. | ||
| */ | ||
| _tearDownEffects: function() { | ||
| if (this._effects) { | ||
| this._effects.forEach(function(effectDef) { | ||
| effectDef.tearDown(); | ||
| }); | ||
| } | ||
| this._effectsRunFn = []; | ||
| this._effects = []; | ||
| }, | ||
| if (!effects || !isAttached) { | ||
| return; | ||
| } | ||
| effects.split(' ').forEach(function(effectName) { | ||
| var effectDef; | ||
| if (effectName !== '') { | ||
| if ((effectDef = _scrollEffects[effectName])) { | ||
| this._effects.push(this._boundEffect(effectDef, effectsConfig[effectName])); | ||
| } else { | ||
| console.warn(this._getUndefinedMsg(effectName)); | ||
| } | ||
| /** | ||
| * Runs the effects. | ||
| * | ||
| * @param {number} p The progress | ||
| * @param {number} y The top position of the current element relative to the viewport. | ||
| */ | ||
| _runEffects: function(p, y) { | ||
| if (this._effectsRunFn) { | ||
| this._effectsRunFn.forEach(function(run) { | ||
| run(p, y); | ||
| }); | ||
| } | ||
| }, this); | ||
| }, | ||
| this._setUpEffect(); | ||
| }, | ||
| /** | ||
| * Forces layout | ||
| */ | ||
| _layoutIfDirty: function() { | ||
| return this.offsetWidth; | ||
| }, | ||
| /** | ||
| * Returns an effect object bound to the current context. | ||
| * | ||
| * @param {Object} effectDef | ||
| * @param {Object=} effectsConfig The effect config object if the effect accepts config values. (Optional) | ||
| */ | ||
| _boundEffect: function(effectDef, effectsConfig) { | ||
| effectsConfig = effectsConfig || {}; | ||
| var startsAt = parseFloat(effectsConfig.startsAt || 0); | ||
| var endsAt = parseFloat(effectsConfig.endsAt || 1); | ||
| var deltaS = endsAt - startsAt; | ||
| var noop = function() {}; | ||
| // fast path if possible | ||
| var runFn = (startsAt === 0 && endsAt === 1) ? effectDef.run : | ||
| function(progress, y) { | ||
| effectDef.run.call(this, | ||
| Math.max(0, (progress - startsAt) / deltaS), y); | ||
| }; | ||
| return { | ||
| setUp: effectDef.setUp ? effectDef.setUp.bind(this, effectsConfig) : noop, | ||
| run: effectDef.run ? runFn.bind(this) : noop, | ||
| tearDown: effectDef.tearDown ? effectDef.tearDown.bind(this) : noop | ||
| }; | ||
| }, | ||
| /** | ||
| * Sets up the effects. | ||
| */ | ||
| _setUpEffect: function() { | ||
| if (this.isAttached && this._effects) { | ||
| this._effectsRunFn = []; | ||
| this._effects.forEach(function(effectDef) { | ||
| // install the effect only if no error was reported | ||
| if (effectDef.setUp() !== false) { | ||
| this._effectsRunFn.push(effectDef.run); | ||
| /** | ||
| * Overrides the `_scrollHandler`. | ||
| */ | ||
| _scrollHandler: function() { | ||
| if (!this.disabled) { | ||
| var scrollTop = this._clampedScrollTop; | ||
| this._updateScrollState(scrollTop); | ||
| if (this.threshold > 0) { | ||
| this._setThresholdTriggered(scrollTop >= this.threshold); | ||
| } | ||
| }, this); | ||
| } | ||
| }, | ||
| } | ||
| }, | ||
| /** | ||
| * Tears down the effects. | ||
| */ | ||
| _tearDownEffects: function() { | ||
| if (this._effects) { | ||
| this._effects.forEach(function(effectDef) { | ||
| effectDef.tearDown(); | ||
| }); | ||
| } | ||
| this._effectsRunFn = []; | ||
| this._effects = []; | ||
| }, | ||
| /** | ||
| * Override this method to return a reference to a node in the local DOM. | ||
| * The node is consumed by a scroll effect. | ||
| * | ||
| * @param {string} id The id for the node. | ||
| */ | ||
| _getDOMRef: function(id) { | ||
| console.warn('_getDOMRef', '`' + id + '` is undefined'); | ||
| }, | ||
| /** | ||
| * Runs the effects. | ||
| * | ||
| * @param {number} p The progress | ||
| * @param {number} y The top position of the current element relative to the viewport. | ||
| */ | ||
| _runEffects: function(p, y) { | ||
| if (this._effectsRunFn) { | ||
| this._effectsRunFn.forEach(function(run) { | ||
| run(p, y); | ||
| }); | ||
| _getUndefinedMsg: function(effectName) { | ||
| return 'Scroll effect `' + effectName + '` is undefined. ' + | ||
| 'Did you forget to import app-layout/app-scroll-effects/effects/' + | ||
| effectName + '.html ?'; | ||
| } | ||
| }, | ||
| /** | ||
| * Overrides the `_scrollHandler`. | ||
| */ | ||
| _scrollHandler: function() { | ||
| if (!this.disabled) { | ||
| var scrollTop = this._clampedScrollTop; | ||
| this._updateScrollState(scrollTop); | ||
| if (this.threshold > 0) { | ||
| this._setThresholdTriggered(scrollTop >= this.threshold); | ||
| } | ||
| } | ||
| }, | ||
| /** | ||
| * Override this method to return a reference to a node in the local DOM. | ||
| * The node is consumed by a scroll effect. | ||
| * | ||
| * @param {string} id The id for the node. | ||
| */ | ||
| _getDOMRef: function(id) { | ||
| console.warn('_getDOMRef', '`'+ id +'` is undefined'); | ||
| }, | ||
| _getUndefinedMsg: function(effectName) { | ||
| return 'Scroll effect `' + effectName + '` is undefined. ' + | ||
| 'Did you forget to import app-layout/app-scroll-effects/effects/' + effectName + '.html ?'; | ||
| } | ||
| }]; | ||
| ]; |
@@ -18,2 +18,7 @@ import './effects/blend-background.js'; | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| ; |
@@ -1,8 +0,2 @@ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * While scrolling down, fade in the rear background layer and fade out the front background | ||
| * layer (opacity interpolated based on scroll position). | ||
| */ | ||
| /** | ||
| @license | ||
@@ -16,2 +10,9 @@ Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | ||
| */ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * While scrolling down, fade in the rear background layer and fade out the | ||
| * front background layer (opacity interpolated based on scroll position). | ||
| */ | ||
| registerEffect('blend-background', { | ||
@@ -18,0 +19,0 @@ /** @this Polymer.AppLayout.ElementWithBackground */ |
@@ -1,10 +0,2 @@ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Upon scrolling past a threshold, fade in the rear background layer and fade out the front | ||
| * background layer (opacity CSS transitioned over time). | ||
| * | ||
| * | ||
| */ | ||
| /** | ||
| @license | ||
@@ -18,2 +10,11 @@ Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | ||
| */ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Upon scrolling past a threshold, fade in the rear background layer and fade | ||
| * out the front background layer (opacity CSS transitioned over time). | ||
| * | ||
| * | ||
| */ | ||
| registerEffect('fade-background', { | ||
@@ -20,0 +21,0 @@ /** @this Polymer.AppLayout.ElementWithBackground */ |
@@ -1,11 +0,2 @@ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import './waterfall.js'; | ||
| import './resize-title.js'; | ||
| import './blend-background.js'; | ||
| import './parallax-background.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Shorthand for the waterfall, resize-title, blend-background, and parallax-background effects. | ||
| */ | ||
| /** | ||
| @license | ||
@@ -19,2 +10,13 @@ Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | ||
| */ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import './waterfall.js'; | ||
| import './resize-title.js'; | ||
| import './blend-background.js'; | ||
| import './parallax-background.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Shorthand for the waterfall, resize-title, blend-background, and | ||
| * parallax-background effects. | ||
| */ | ||
| registerEffect('material', { | ||
@@ -25,5 +27,6 @@ /** | ||
| setUp: function setUp() { | ||
| this.effects = 'waterfall resize-title blend-background parallax-background'; | ||
| this.effects = | ||
| 'waterfall resize-title blend-background parallax-background'; | ||
| return false; | ||
| } | ||
| }); |
@@ -1,7 +0,2 @@ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Vertically translate the background based on a factor of the scroll position. | ||
| */ | ||
| /** | ||
| @license | ||
@@ -15,2 +10,8 @@ Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | ||
| */ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Vertically translate the background based on a factor of the scroll position. | ||
| */ | ||
| registerEffect('parallax-background', { | ||
@@ -27,3 +28,4 @@ /** | ||
| fx.backgroundRearLayer = this._getDOMRef('backgroundRearLayer'); | ||
| fx.deltaBg = fx.backgroundFrontLayer.offsetHeight - fx.background.offsetHeight; | ||
| fx.deltaBg = | ||
| fx.backgroundFrontLayer.offsetHeight - fx.background.offsetHeight; | ||
| if (fx.deltaBg === 0) { | ||
@@ -45,5 +47,9 @@ if (isNaN(scalar)) { | ||
| var fx = this._fxParallaxBackground; | ||
| this.transform('translate3d(0px, ' + (fx.deltaBg * Math.min(1, p)) + 'px, 0px)', fx.backgroundFrontLayer); | ||
| this.transform( | ||
| 'translate3d(0px, ' + (fx.deltaBg * Math.min(1, p)) + 'px, 0px)', | ||
| fx.backgroundFrontLayer); | ||
| if (fx.backgroundRearLayer) { | ||
| this.transform('translate3d(0px, ' + (fx.deltaBg * Math.min(1, p)) + 'px, 0px)', fx.backgroundRearLayer); | ||
| this.transform( | ||
| 'translate3d(0px, ' + (fx.deltaBg * Math.min(1, p)) + 'px, 0px)', | ||
| fx.backgroundRearLayer); | ||
| } | ||
@@ -50,0 +56,0 @@ }, |
@@ -1,8 +0,2 @@ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Upon scrolling past a threshold, CSS transition the font size of a designated title element | ||
| * between two values. | ||
| */ | ||
| /** | ||
| @license | ||
@@ -16,2 +10,9 @@ Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | ||
| */ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Upon scrolling past a threshold, CSS transition the font size of a designated | ||
| * title element between two values. | ||
| */ | ||
| registerEffect('resize-snapped-title', { | ||
@@ -28,7 +29,9 @@ /** | ||
| if (!condensedTitle) { | ||
| console.warn('Scroll effect `resize-snapped-title`: undefined `condensed-title`'); | ||
| console.warn( | ||
| 'Scroll effect `resize-snapped-title`: undefined `condensed-title`'); | ||
| return false; | ||
| } | ||
| if (!title) { | ||
| console.warn('Scroll effect `resize-snapped-title`: undefined `main-title`'); | ||
| console.warn( | ||
| 'Scroll effect `resize-snapped-title`: undefined `main-title`'); | ||
| return false; | ||
@@ -35,0 +38,0 @@ } |
@@ -0,2 +1,12 @@ | ||
| /** | ||
| @license | ||
| Copyright (c) 2016 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 | ||
| */ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
@@ -10,4 +20,4 @@ function interpolate(progress, points, fn, ctx) { | ||
| /** | ||
| * Transform the font size of a designated title element between two values based on the scroll | ||
| * position. | ||
| * Transform the font size of a designated title element between two values | ||
| * based on the scroll position. | ||
| */ | ||
@@ -45,3 +55,4 @@ registerEffect('resize-title', { | ||
| fx.scale = parseInt(window.getComputedStyle(condensedTitle)['font-size'], 10) / | ||
| fx.scale = | ||
| parseInt(window.getComputedStyle(condensedTitle)['font-size'], 10) / | ||
| parseInt(window.getComputedStyle(title)['font-size'], 10); | ||
@@ -68,7 +79,12 @@ fx.titleDX = titleClientRect.left - condensedTitleClientRect.left; | ||
| } | ||
| interpolate(Math.min(1, p), [ [1, fx.scale], [0, -fx.titleDX], [y, y-fx.titleDY] ], | ||
| function(scale, translateX, translateY) { | ||
| this.transform('translate(' + translateX + 'px, ' + translateY + 'px) ' + | ||
| 'scale3d(' + scale + ', ' + scale + ', 1)', fx.title); | ||
| }, this); | ||
| interpolate( | ||
| Math.min(1, p), | ||
| [[1, fx.scale], [0, -fx.titleDX], [y, y - fx.titleDY]], | ||
| function(scale, translateX, translateY) { | ||
| this.transform( | ||
| 'translate(' + translateX + 'px, ' + translateY + 'px) ' + | ||
| 'scale3d(' + scale + ', ' + scale + ', 1)', | ||
| fx.title); | ||
| }, | ||
| this); | ||
| }, | ||
@@ -75,0 +91,0 @@ /** @this Polymer.AppLayout.ElementWithBackground */ |
@@ -1,8 +0,2 @@ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Toggles the shadow property in app-header when content is scrolled to create a sense of depth | ||
| * between the element and the content underneath. | ||
| */ | ||
| /** | ||
| @license | ||
@@ -16,2 +10,9 @@ Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | ||
| */ | ||
| import '../app-scroll-effects-behavior.js'; | ||
| import { registerEffect } from '../../helpers/helpers.js'; | ||
| /** | ||
| * Toggles the shadow property in app-header when content is scrolled to create | ||
| * a sense of depth between the element and the content underneath. | ||
| */ | ||
| registerEffect('waterfall', { | ||
@@ -18,0 +19,0 @@ /** |
| /** | ||
| * Checks if an element has a given CSS text | ||
| * | ||
| * @param {HTMLElement} el | ||
| * @param {string} cssText | ||
| */ | ||
| /** | ||
| @license | ||
@@ -16,3 +10,9 @@ Copyright (c) 2016 The Polymer Project Authors. All rights reserved. | ||
| */ | ||
| window.sameCSS = function (el, cssText) { | ||
| /** | ||
| * Checks if an element has a given CSS text | ||
| * | ||
| * @param {HTMLElement} el | ||
| * @param {string} cssText | ||
| */ | ||
| window.sameCSS = function(el, cssText) { | ||
| var propName; | ||
@@ -36,4 +36,5 @@ var dummy = document.createElement('div'); | ||
| if (elStyle[propName] && elStyle[propName] !== dummyStyle[propName]) { | ||
| throw new Error('`' + propName + '` is different: ' + | ||
| '`' + elStyle[propName] + '` != `' + dummyStyle[propName] + '`'); | ||
| throw new Error( | ||
| '`' + propName + '` is different: ' + | ||
| '`' + elStyle[propName] + '` != `' + dummyStyle[propName] + '`'); | ||
| } | ||
@@ -40,0 +41,0 @@ } |
@@ -1,6 +0,1 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import { AppScrollEffectsBehavior } from '../app-scroll-effects-behavior.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -15,2 +10,7 @@ @license | ||
| */ | ||
| import '../../../polymer/polymer-legacy.js'; | ||
| import { AppScrollEffectsBehavior } from '../app-scroll-effects-behavior.js'; | ||
| import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -68,18 +68,6 @@ _template: html` | ||
| is: 'x-container', | ||
| behaviors: [AppScrollEffectsBehavior], | ||
| properties: {shadow: {type: Boolean, reflectToAttribute: true}}, | ||
| observers: ['_xScrollEffectChanged(effects)'], | ||
| behaviors: [ | ||
| AppScrollEffectsBehavior | ||
| ], | ||
| properties: { | ||
| shadow: { | ||
| type: Boolean, | ||
| reflectToAttribute: true | ||
| } | ||
| }, | ||
| observers: [ | ||
| '_xScrollEffectChanged(effects)' | ||
| ], | ||
| _getDOMRef: function(id) { | ||
@@ -86,0 +74,0 @@ return this.$[id] || null; |
@@ -1,5 +0,1 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import '@polymer/iron-flex-layout/iron-flex-layout.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -61,2 +57,12 @@ @license | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import '../../iron-flex-layout/iron-flex-layout.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -63,0 +69,0 @@ _template: html` |
@@ -1,4 +0,1 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js'; | ||
| Polymer({ | ||
@@ -19,21 +19,13 @@ is: 'sample-content', | ||
| size: { | ||
| type: Number, | ||
| value: 0 | ||
| }, | ||
| size: {type: Number, value: 0}, | ||
| label: { | ||
| value: '' | ||
| }, | ||
| label: {value: ''}, | ||
| padding: { | ||
| value: '16px' | ||
| }, | ||
| padding: {value: '16px'}, | ||
| margin: { | ||
| value: '24px' | ||
| }, | ||
| margin: {value: '24px'}, | ||
| boxShadow: { | ||
| value: '0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)' | ||
| value: | ||
| '0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)' | ||
| } | ||
@@ -43,5 +35,3 @@ | ||
| observers: [ | ||
| '_render(size, label, padding, margin, boxShadow)' | ||
| ], | ||
| observers: ['_render(size, label, padding, margin, boxShadow)'], | ||
@@ -71,3 +61,3 @@ _lorem_ipsum_strings: [ | ||
| var ls = this._lorem_ipsum_strings; | ||
| var s = ''; | ||
| var s = ''; | ||
| do { | ||
@@ -87,9 +77,12 @@ s += ls[Math.floor(Math.random() * ls.length)]; | ||
| for (var i = 0; i < size; i++) { | ||
| html += | ||
| '<div style="box-shadow: ' + boxShadow + '; padding: ' + padding + '; margin: ' + margin + '; border-radius: 5px; background-color: #fff; color: #757575;">' + | ||
| '<div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #555; text-align: center;">' + this._randomLetter() + '</div>' + | ||
| '<div style="font-size: 22px; margin: 16px 0; color: #212121;">' + this.label + ' ' + this._randomString() + '</div>' + | ||
| '<p style="font-size: 16px;">' + this._randomString() + '</p>' + | ||
| '<p style="font-size: 14px;">' + this._randomString(3) + '</p>' + | ||
| '</div>'; | ||
| html += '<div style="box-shadow: ' + boxShadow + '; padding: ' + padding + | ||
| '; margin: ' + margin + | ||
| '; border-radius: 5px; background-color: #fff; color: #757575;">' + | ||
| '<div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #555; text-align: center;">' + | ||
| this._randomLetter() + '</div>' + | ||
| '<div style="font-size: 22px; margin: 16px 0; color: #212121;">' + | ||
| this.label + ' ' + this._randomString() + '</div>' + | ||
| '<p style="font-size: 16px;">' + this._randomString() + '</p>' + | ||
| '<p style="font-size: 14px;">' + this._randomString(3) + '</p>' + | ||
| '</div>'; | ||
| this.innerHTML = html; | ||
@@ -96,0 +89,0 @@ } |
@@ -1,2 +0,12 @@ | ||
| import '@polymer/polymer/polymer-legacy.js'; | ||
| /** | ||
| @license | ||
| Copyright (c) 2016 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 | ||
| */ | ||
| import '../../polymer/polymer-legacy.js'; | ||
| export const _scrollEffects = {}; | ||
@@ -7,8 +17,16 @@ export let _scrollTimer = null; | ||
| t /= d; | ||
| return -c * t*(t-2) + b; | ||
| return -c * t * (t - 2) + b; | ||
| }; | ||
| export const registerEffect = function registerEffect(effectName, effectDef) { | ||
| /** | ||
| * Registers a scroll effect to be used in elements that implement the | ||
| * `Polymer.AppScrollEffectsBehavior` behavior. | ||
| * | ||
| * @param {string} effectName The effect name. | ||
| * @param {Object} effectDef The effect definition. | ||
| */ | ||
| export const registerEffect = function registerEffect( | ||
| effectName, effectDef) { | ||
| if (_scrollEffects[effectName] != null) { | ||
| throw new Error('effect `'+ effectName + '` is already registered.'); | ||
| throw new Error('effect `' + effectName + '` is already registered.'); | ||
| } | ||
@@ -34,2 +52,25 @@ _scrollEffects[effectName] = effectDef; | ||
| /** | ||
| * Scrolls to a particular set of coordinates in a scroll target. | ||
| * If the scroll target is not defined, then it would use the main document as | ||
| * the target. | ||
| * | ||
| * To scroll in a smooth fashion, you can set the option `behavior: 'smooth'`. | ||
| * e.g. | ||
| * | ||
| * ```js | ||
| * Polymer.AppLayout.scroll({top: 0, behavior: 'smooth'}); | ||
| * ``` | ||
| * | ||
| * To scroll in a silent mode, without notifying scroll changes to any | ||
| * app-layout elements, you can set the option `behavior: 'silent'`. This is | ||
| * particularly useful we you are using `app-header` and you desire to scroll to | ||
| * the top of a scrolling region without running scroll effects. e.g. | ||
| * | ||
| * ```js | ||
| * Polymer.AppLayout.scroll({top: 0, behavior: 'silent'}); | ||
| * ``` | ||
| * | ||
| * @param {Object} options {top: Number, left: Number, behavior: String(smooth | silent)} | ||
| */ | ||
| export const scroll = function scroll(options) { | ||
@@ -40,3 +81,4 @@ options = options || {}; | ||
| var target = options.target || docEl; | ||
| var hasNativeScrollBehavior = 'scrollBehavior' in target.style && target.scroll; | ||
| var hasNativeScrollBehavior = | ||
| 'scrollBehavior' in target.style && target.scroll; | ||
| var scrollClassName = 'app-layout-silent-scroll'; | ||
@@ -46,34 +88,40 @@ var scrollTop = options.top || 0; | ||
| var scrollTo = target === docEl ? window.scrollTo : | ||
| function scrollTo(scrollLeft, scrollTop) { | ||
| target.scrollLeft = scrollLeft; | ||
| target.scrollTop = scrollTop; | ||
| }; | ||
| function scrollTo(scrollLeft, scrollTop) { | ||
| target.scrollLeft = scrollLeft; | ||
| target.scrollTop = scrollTop; | ||
| }; | ||
| if (options.behavior === 'smooth') { | ||
| if (hasNativeScrollBehavior) { | ||
| target.scroll(options); | ||
| } else { | ||
| var timingFn = scrollTimingFunction; | ||
| var startTime = Date.now(); | ||
| var currentScrollTop = target === docEl ? window.pageYOffset : target.scrollTop; | ||
| var currentScrollLeft = target === docEl ? window.pageXOffset : target.scrollLeft; | ||
| var currentScrollTop = | ||
| target === docEl ? window.pageYOffset : target.scrollTop; | ||
| var currentScrollLeft = | ||
| target === docEl ? window.pageXOffset : target.scrollLeft; | ||
| var deltaScrollTop = scrollTop - currentScrollTop; | ||
| var deltaScrollLeft = scrollLeft - currentScrollLeft; | ||
| var duration = 300; | ||
| var updateFrame = (function updateFrame() { | ||
| var now = Date.now(); | ||
| var elapsedTime = now - startTime; | ||
| var updateFrame = | ||
| (function updateFrame() { | ||
| var now = Date.now(); | ||
| var elapsedTime = now - startTime; | ||
| if (elapsedTime < duration) { | ||
| scrollTo(timingFn(elapsedTime, currentScrollLeft, deltaScrollLeft, duration), | ||
| timingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration)); | ||
| requestAnimationFrame(updateFrame); | ||
| } else { | ||
| scrollTo(scrollLeft, scrollTop); | ||
| } | ||
| }).bind(this); | ||
| if (elapsedTime < duration) { | ||
| scrollTo( | ||
| timingFn( | ||
| elapsedTime, | ||
| currentScrollLeft, | ||
| deltaScrollLeft, | ||
| duration), | ||
| timingFn( | ||
| elapsedTime, currentScrollTop, deltaScrollTop, duration)); | ||
| requestAnimationFrame(updateFrame); | ||
| } else { | ||
| scrollTo(scrollLeft, scrollTop); | ||
| } | ||
| }).bind(this); | ||
@@ -90,7 +138,8 @@ updateFrame(); | ||
| // Browsers keep the scroll momentum even if the bottom of the scrolling content | ||
| // was reached. This means that calling scroll({top: 0, behavior: 'silent'}) when | ||
| // the momentum is still going will result in more scroll events and thus scroll effects. | ||
| // This seems to only apply when using document scrolling. | ||
| // Therefore, when should we remove the class from the document element? | ||
| // Browsers keep the scroll momentum even if the bottom of the scrolling | ||
| // content was reached. This means that calling scroll({top: 0, behavior: | ||
| // 'silent'}) when the momentum is still going will result in more scroll | ||
| // events and thus scroll effects. This seems to only apply when using | ||
| // document scrolling. Therefore, when should we remove the class from the | ||
| // document element? | ||
@@ -111,6 +160,4 @@ if (_scrollTimer) { | ||
| } else { | ||
| scrollTo(scrollLeft, scrollTop); | ||
| } | ||
| }; |
| { | ||
| "files": { | ||
| "app-layout.html": { | ||
| "convertedUrl": "app-layout.html", | ||
| "convertedUrl": "app-layout.js", | ||
| "exports": {} | ||
@@ -6,0 +6,0 @@ }, |
@@ -13,25 +13,28 @@ { | ||
| "bower": "^1.8.0", | ||
| "@polymer/font-roboto": "3.0.0-pre.12", | ||
| "@polymer/iron-component-page": "3.0.0-pre.12", | ||
| "@polymer/iron-icon": "3.0.0-pre.12", | ||
| "@polymer/iron-icons": "3.0.0-pre.12", | ||
| "@polymer/iron-list": "3.0.0-pre.12", | ||
| "@polymer/iron-pages": "3.0.0-pre.12", | ||
| "@polymer/iron-scroll-threshold": "3.0.0-pre.12", | ||
| "@polymer/paper-fab": "3.0.0-pre.12", | ||
| "@polymer/paper-icon-button": "3.0.0-pre.12", | ||
| "@polymer/paper-item": "3.0.0-pre.12", | ||
| "@polymer/paper-listbox": "3.0.0-pre.12", | ||
| "@polymer/paper-progress": "3.0.0-pre.12", | ||
| "@polymer/paper-spinner": "3.0.0-pre.12", | ||
| "@polymer/paper-styles": "3.0.0-pre.12", | ||
| "@polymer/paper-tabs": "3.0.0-pre.12", | ||
| "@polymer/test-fixture": "3.0.0-pre.12", | ||
| "wct-browser-legacy": "0.0.1-pre.11", | ||
| "@webcomponents/webcomponentsjs": "^1.0.0" | ||
| "webmat": "^0.2.0", | ||
| "es6-promise": "^4.0.0", | ||
| "@polymer/font-roboto": "^3.0.0-pre.13", | ||
| "@polymer/iron-component-page": "^3.0.0-pre.13", | ||
| "@polymer/iron-icon": "^3.0.0-pre.13", | ||
| "@polymer/iron-icons": "^3.0.0-pre.13", | ||
| "@polymer/iron-list": "^3.0.0-pre.13", | ||
| "@polymer/iron-pages": "^3.0.0-pre.13", | ||
| "@polymer/iron-scroll-threshold": "^3.0.0-pre.13", | ||
| "@polymer/paper-fab": "^3.0.0-pre.13", | ||
| "@polymer/paper-icon-button": "^3.0.0-pre.13", | ||
| "@polymer/paper-item": "^3.0.0-pre.13", | ||
| "@polymer/paper-listbox": "^3.0.0-pre.13", | ||
| "@polymer/paper-progress": "^3.0.0-pre.13", | ||
| "@polymer/paper-spinner": "^3.0.0-pre.13", | ||
| "@polymer/paper-styles": "^3.0.0-pre.13", | ||
| "@polymer/paper-tabs": "^3.0.0-pre.13", | ||
| "@polymer/test-fixture": "^3.0.0-pre.13", | ||
| "wct-browser-legacy": "^0.0.1-pre.11", | ||
| "@webcomponents/webcomponentsjs": "^2.0.0-0" | ||
| }, | ||
| "scripts": { | ||
| "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir ." | ||
| "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .", | ||
| "format": "webmat && npm run update-types" | ||
| }, | ||
| "version": "3.0.0-pre.12", | ||
| "version": "3.0.0-pre.13", | ||
| "resolutions": { | ||
@@ -46,8 +49,8 @@ "inherits": "2.0.3", | ||
| "dependencies": { | ||
| "@polymer/iron-flex-layout": "3.0.0-pre.12", | ||
| "@polymer/iron-media-query": "3.0.0-pre.12", | ||
| "@polymer/iron-resizable-behavior": "3.0.0-pre.12", | ||
| "@polymer/iron-scroll-target-behavior": "3.0.0-pre.12", | ||
| "@polymer/polymer": "3.0.0-pre.12" | ||
| "@polymer/iron-flex-layout": "^3.0.0-pre.13", | ||
| "@polymer/iron-media-query": "^3.0.0-pre.13", | ||
| "@polymer/iron-resizable-behavior": "^3.0.0-pre.13", | ||
| "@polymer/iron-scroll-target-behavior": "^3.0.0-pre.13", | ||
| "@polymer/polymer": "^3.0.0-pre.13" | ||
| } | ||
| } |
@@ -1,16 +0,1 @@ | ||
| import '../../app-drawer-layout/app-drawer-layout.js'; | ||
| import '../../app-drawer/app-drawer.js'; | ||
| import '../../app-header/app-header.js'; | ||
| import '../../app-header-layout/app-header-layout.js'; | ||
| import '../../app-toolbar/app-toolbar.js'; | ||
| import '@polymer/iron-flex-layout/iron-flex-layout.js'; | ||
| import '@polymer/iron-icons/iron-icons.js'; | ||
| import '@polymer/iron-media-query/iron-media-query.js'; | ||
| import '@polymer/paper-icon-button/paper-icon-button.js'; | ||
| import '@polymer/paper-item/paper-item.js'; | ||
| import '@polymer/paper-listbox/paper-listbox.js'; | ||
| import '@polymer/paper-tabs/paper-tabs.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -25,2 +10,17 @@ @license | ||
| */ | ||
| import '../../app-drawer-layout/app-drawer-layout.js'; | ||
| import '../../app-drawer/app-drawer.js'; | ||
| import '../../app-header/app-header.js'; | ||
| import '../../app-header-layout/app-header-layout.js'; | ||
| import '../../app-toolbar/app-toolbar.js'; | ||
| import '../../../iron-flex-layout/iron-flex-layout.js'; | ||
| import '../../../iron-icons/iron-icons.js'; | ||
| import '../../../iron-media-query/iron-media-query.js'; | ||
| import '../../../paper-icon-button/paper-icon-button.js'; | ||
| import '../../../paper-item/paper-item.js'; | ||
| import '../../../paper-listbox/paper-listbox.js'; | ||
| import '../../../paper-tabs/paper-tabs.js'; | ||
| import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -98,6 +98,3 @@ _template: html` | ||
| selected: { | ||
| type: String, | ||
| value: 'Item One' | ||
| }, | ||
| selected: {type: String, value: 'Item One'}, | ||
@@ -104,0 +101,0 @@ wideLayout: { |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -15,0 +15,0 @@ _template: html` |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -15,0 +15,0 @@ _template: html` |
@@ -1,2 +0,2 @@ | ||
| const $_documentContainer = document.createElement('div'); | ||
| const $_documentContainer = document.createElement('template'); | ||
| $_documentContainer.setAttribute('style', 'display: none;'); | ||
@@ -19,3 +19,3 @@ | ||
| document.head.appendChild($_documentContainer); | ||
| document.head.appendChild($_documentContainer.content); | ||
@@ -31,2 +31,7 @@ /** | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| ; |
@@ -1,8 +0,1 @@ | ||
| import './recipe-detail.js'; | ||
| import './recipe-list.js'; | ||
| import './app-icons.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { scroll } from '../../../helpers/helpers.js'; | ||
| /** | ||
@@ -17,2 +10,9 @@ @license | ||
| */ | ||
| import './recipe-detail.js'; | ||
| import './recipe-list.js'; | ||
| import './app-icons.js'; | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| import { scroll } from '../../../helpers/helpers.js'; | ||
| Polymer({ | ||
@@ -157,6 +157,3 @@ _template: html` | ||
| _pageData: { | ||
| type: Object, | ||
| observer: '_pageDataChanged' | ||
| }, | ||
| _pageData: {type: Object, observer: '_pageDataChanged'}, | ||
@@ -166,3 +163,3 @@ _selectedPage: String, | ||
| _idData: Object, | ||
| _scrollPositionMap: { | ||
@@ -197,7 +194,8 @@ type: Object, | ||
| _drawerSelected: function() { | ||
| if (!this.$.drawer.persistent) this.$.drawer.close(); | ||
| if (!this.$.drawer.persistent) | ||
| this.$.drawer.close(); | ||
| }, | ||
| /** | ||
| * Preserves the document scroll position, so | ||
| * Preserves the document scroll position, so | ||
| * it can be restored when returning to a page. | ||
@@ -207,3 +205,3 @@ */ | ||
| var map = this._scrollPositionMap; | ||
| if (oldPageData != null && oldPageData.page != null) { | ||
@@ -214,7 +212,7 @@ map[oldPageData.page] = window.pageYOffset; | ||
| if (map[pageData.page] != null) { | ||
| scroll({ top: map[pageData.page], behavior: 'silent' }); | ||
| scroll({top: map[pageData.page], behavior: 'silent'}); | ||
| } else if (this.isAttached) { | ||
| scroll({ top: 0, behavior: 'silent' }); | ||
| scroll({top: 0, behavior: 'silent'}); | ||
| } | ||
| } | ||
| }); |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -173,11 +173,5 @@ _template: html` | ||
| recipe: { | ||
| type: Object, | ||
| observer: '__recipeChanged' | ||
| }, | ||
| recipe: {type: Object, observer: '__recipeChanged'}, | ||
| __favorite: { | ||
| type: Boolean, | ||
| value: false | ||
| } | ||
| __favorite: {type: Boolean, value: false} | ||
@@ -184,0 +178,0 @@ }, |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -170,6 +170,3 @@ _template: html` | ||
| is: 'recipe-list', | ||
| properties: { | ||
| recipes: Object | ||
| } | ||
| properties: {recipes: Object} | ||
| }); |
@@ -1,2 +0,2 @@ | ||
| const $_documentContainer = document.createElement('div'); | ||
| const $_documentContainer = document.createElement('template'); | ||
| $_documentContainer.setAttribute('style', 'display: none;'); | ||
@@ -12,3 +12,3 @@ | ||
| document.head.appendChild($_documentContainer); | ||
| document.head.appendChild($_documentContainer.content); | ||
@@ -24,2 +24,7 @@ /** | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| ; |
@@ -1,5 +0,1 @@ | ||
| import './app-icons.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -14,2 +10,6 @@ @license | ||
| */ | ||
| import './app-icons.js'; | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -16,0 +16,0 @@ _template: html` |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -15,0 +15,0 @@ _template: html` |
@@ -1,9 +0,1 @@ | ||
| import './app-icons.js'; | ||
| import './article-headline.js'; | ||
| import './article-detail.js'; | ||
| import './two-columns-grid.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { scroll } from '../../../helpers/helpers.js'; | ||
| /** | ||
@@ -18,2 +10,10 @@ @license | ||
| */ | ||
| import './app-icons.js'; | ||
| import './article-headline.js'; | ||
| import './article-detail.js'; | ||
| import './two-columns-grid.js'; | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| import { scroll } from '../../../helpers/helpers.js'; | ||
| Polymer({ | ||
@@ -228,6 +228,3 @@ _template: html` | ||
| subsubRoute: { | ||
| type: Object, | ||
| observer: '_subsubrouteChanged' | ||
| }, | ||
| subsubRoute: {type: Object, observer: '_subsubrouteChanged'}, | ||
@@ -249,5 +246,3 @@ categoryData: Object, | ||
| observers: [ | ||
| '_updateArticle(articles, categoryData.category, idData.id)' | ||
| ], | ||
| observers: ['_updateArticle(articles, categoryData.category, idData.id)'], | ||
@@ -270,5 +265,5 @@ attached: function() { | ||
| } | ||
| for (var i=0, cat; cat=articles[i]; i++) { | ||
| for (var i = 0, cat; cat = articles[i]; i++) { | ||
| if (cat.name === category) { | ||
| for (var j=0, article; article=cat.items[j]; j++) { | ||
| for (var j = 0, article; article = cat.items[j]; j++) { | ||
| if (article.id === id) { | ||
@@ -284,3 +279,4 @@ this.article = article; | ||
| _drawerSelected: function() { | ||
| if (!this.$.drawer.persistent) this.$.drawer.close(); | ||
| if (!this.$.drawer.persistent) | ||
| this.$.drawer.close(); | ||
| }, | ||
@@ -305,7 +301,7 @@ | ||
| if (map[subroute.prefix] != null) { | ||
| scroll({ top: map[subroute.prefix], behavior: 'silent' }); | ||
| scroll({top: map[subroute.prefix], behavior: 'silent'}); | ||
| } else if (this.isAttached) { | ||
| scroll({ top: 0, behavior: 'silent' }); | ||
| scroll({top: 0, behavior: 'silent'}); | ||
| } | ||
| } | ||
| }); |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -27,2 +24,10 @@ @license | ||
| */ | ||
| /* | ||
| FIXME(polymer-modulizer): the above comments were extracted | ||
| from HTML and may be out of place here. Review them and | ||
| then delete this comment! | ||
| */ | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -85,6 +90,3 @@ _template: html` | ||
| */ | ||
| columnWidth: { | ||
| type: Number, | ||
| value: 300 | ||
| }, | ||
| columnWidth: {type: Number, value: 300}, | ||
@@ -94,25 +96,18 @@ /** | ||
| */ | ||
| gutter: { | ||
| type: Number, | ||
| value: 8 | ||
| }, | ||
| gutter: {type: Number, value: 8}, | ||
| /** | ||
| * Indicates it is in narrow layout which means the grid is displayed as single column. | ||
| * Indicates it is in narrow layout which means the grid is displayed as | ||
| * single column. | ||
| */ | ||
| narrowLayout: { | ||
| type: Boolean, | ||
| notify: true, | ||
| reflectToAttribute: true | ||
| } | ||
| narrowLayout: {type: Boolean, notify: true, reflectToAttribute: true} | ||
| }, | ||
| observers: [ | ||
| '_updateLayout(columnWidth, gutter)' | ||
| ], | ||
| observers: ['_updateLayout(columnWidth, gutter)'], | ||
| attached: function() { | ||
| // observers may run before attached, and updateStyles() will skip if it is not attached. | ||
| // So we need to make sure updateStyles() is called after it's attached. | ||
| // observers may run before attached, and updateStyles() will skip if it is | ||
| // not attached. So we need to make sure updateStyles() is called after it's | ||
| // attached. | ||
| this._updateCustomStyles(); | ||
@@ -119,0 +114,0 @@ }, |
@@ -1,7 +0,1 @@ | ||
| import './shrine-list.js'; | ||
| import './shrine-detail.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| import { scroll } from '../../../helpers/helpers.js'; | ||
| /** | ||
@@ -16,2 +10,8 @@ @license | ||
| */ | ||
| import './shrine-list.js'; | ||
| import './shrine-detail.js'; | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| import { scroll } from '../../../helpers/helpers.js'; | ||
| Polymer({ | ||
@@ -284,9 +284,5 @@ _template: html` | ||
| items: { | ||
| type: Array | ||
| }, | ||
| items: {type: Array}, | ||
| featuredItems: { | ||
| type: Array | ||
| }, | ||
| featuredItems: {type: Array}, | ||
@@ -310,5 +306,3 @@ page: { | ||
| observers: [ | ||
| '_hashDidChange(route.path, items, featuredItems)' | ||
| ], | ||
| observers: ['_hashDidChange(route.path, items, featuredItems)'], | ||
@@ -333,5 +327,7 @@ attached: function() { | ||
| if (featuredItems && section) { | ||
| return featuredItems.filter(function(item) { | ||
| return item.category.toLowerCase() === section; | ||
| }).pop(); | ||
| return featuredItems | ||
| .filter(function(item) { | ||
| return item.category.toLowerCase() === section; | ||
| }) | ||
| .pop(); | ||
| } | ||
@@ -352,3 +348,3 @@ return ''; | ||
| _hashDidChange: function() { | ||
| scroll({ top: 0, behavior: 'silent' }); | ||
| scroll({top: 0, behavior: 'silent'}); | ||
| this.$.headerLayout.resetLayout(); | ||
@@ -355,0 +351,0 @@ this.$.drawer.close(); |
@@ -1,5 +0,1 @@ | ||
| import './shrine-simple-item.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -14,2 +10,6 @@ @license | ||
| */ | ||
| import './shrine-simple-item.js'; | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -263,14 +263,7 @@ _template: html` | ||
| item: { | ||
| type: Object, | ||
| observer: '_itemChanged' | ||
| }, | ||
| item: {type: Object, observer: '_itemChanged'}, | ||
| section: { | ||
| type: String | ||
| }, | ||
| section: {type: String}, | ||
| relatedItems: { | ||
| type: Array | ||
| } | ||
| relatedItems: {type: Array} | ||
@@ -277,0 +270,0 @@ }, |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -187,6 +187,3 @@ _template: html` | ||
| item: { | ||
| type: Object, | ||
| observer: '_itemChanged' | ||
| } | ||
| item: {type: Object, observer: '_itemChanged'} | ||
@@ -193,0 +190,0 @@ }, |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -118,7 +118,5 @@ _template: html` | ||
| item: { | ||
| type: Object | ||
| } | ||
| item: {type: Object} | ||
| } | ||
| }); |
@@ -1,6 +0,1 @@ | ||
| import './shrine-item.js'; | ||
| import './shrine-featured-item.js'; | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -15,2 +10,7 @@ @license | ||
| */ | ||
| import './shrine-item.js'; | ||
| import './shrine-featured-item.js'; | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -100,18 +100,12 @@ _template: html` | ||
| items: { | ||
| type: Array | ||
| }, | ||
| items: {type: Array}, | ||
| featuredItem: { | ||
| type: Object | ||
| }, | ||
| featuredItem: {type: Object}, | ||
| section: { | ||
| type: String | ||
| } | ||
| section: {type: String} | ||
| }, | ||
| _sortItems: function() { | ||
| return Math.round(Math.random()*3) - 1; | ||
| return Math.round(Math.random() * 3) - 1; | ||
| } | ||
| }); |
@@ -1,4 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| /** | ||
@@ -13,2 +10,5 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../../polymer/lib/utils/html-tag.js'; | ||
| Polymer({ | ||
@@ -66,7 +66,5 @@ _template: html` | ||
| item: { | ||
| type: Object | ||
| } | ||
| item: {type: Object} | ||
| } | ||
| }); |
@@ -1,14 +0,1 @@ | ||
| import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '@polymer/polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = document.createElement('div'); | ||
| $_documentContainer.setAttribute('style', 'display: none;'); | ||
| $_documentContainer.innerHTML = `<iron-iconset-svg name="app" size="24"> | ||
| <svg><defs> | ||
| <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></g> | ||
| </defs></svg> | ||
| </iron-iconset-svg>`; | ||
| document.head.appendChild($_documentContainer); | ||
| /** | ||
@@ -23,2 +10,15 @@ @license | ||
| */ | ||
| import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js'; | ||
| import { html } from '../../../polymer/lib/utils/html-tag.js'; | ||
| const $_documentContainer = document.createElement('template'); | ||
| $_documentContainer.setAttribute('style', 'display: none;'); | ||
| $_documentContainer.innerHTML = `<iron-iconset-svg name="app" size="24"> | ||
| <svg><defs> | ||
| <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></g> | ||
| </defs></svg> | ||
| </iron-iconset-svg>`; | ||
| document.head.appendChild($_documentContainer.content); | ||
| Polymer({ | ||
@@ -132,51 +132,21 @@ _template: html` | ||
| condenses: { | ||
| type: Boolean, | ||
| value: true | ||
| }, | ||
| condenses: {type: Boolean, value: true}, | ||
| fixed: { | ||
| type: Boolean, | ||
| value: true | ||
| }, | ||
| fixed: {type: Boolean, value: true}, | ||
| reveals: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| reveals: {type: Boolean, value: false}, | ||
| shadow: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| shadow: {type: Boolean, value: false}, | ||
| blendBackground: { | ||
| type: Boolean, | ||
| value: true | ||
| }, | ||
| blendBackground: {type: Boolean, value: true}, | ||
| fadeBackground: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| fadeBackground: {type: Boolean, value: false}, | ||
| parallaxBackground: { | ||
| type: Boolean, | ||
| value: true | ||
| }, | ||
| parallaxBackground: {type: Boolean, value: true}, | ||
| resizeSnappedTitle: { | ||
| type: Boolean, | ||
| value: false | ||
| }, | ||
| resizeSnappedTitle: {type: Boolean, value: false}, | ||
| resizeTitle: { | ||
| type: Boolean, | ||
| value: true | ||
| }, | ||
| resizeTitle: {type: Boolean, value: true}, | ||
| waterfall: { | ||
| type: Boolean, | ||
| value: true | ||
| } | ||
| waterfall: {type: Boolean, value: true} | ||
@@ -183,0 +153,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.71%
1489617
- Lines of code
- increased by0.64%
19687
Worsened metrics
- Dev dependency count
- increased by10%
22
Dependency changes
+ Added@polymer/iron-flex-layout@3.0.1(transitive)
+ Added@polymer/iron-media-query@3.0.1(transitive)
+ Added@polymer/iron-resizable-behavior@3.0.1(transitive)
+ Added@polymer/iron-scroll-target-behavior@3.0.1(transitive)
+ Added@polymer/polymer@3.5.2(transitive)
- Removed@polymer/iron-flex-layout@3.0.0-pre.12(transitive)
- Removed@polymer/iron-media-query@3.0.0-pre.12(transitive)
- Removed@polymer/iron-resizable-behavior@3.0.0-pre.12(transitive)
- Removed@polymer/iron-scroll-target-behavior@3.0.0-pre.12(transitive)
- Removed@polymer/polymer@3.0.0-pre.12(transitive)
- Removed@webcomponents/webcomponentsjs@1.3.3(transitive)