Skip to content
This repository was archived by the owner on Jan 4, 2021. It is now read-only.

Commit 3139925

Browse files
RomainCscnRomainCscn
committed
[DEV] Initial migration to Polymer 3
1 parent 6072bdc commit 3139925

File tree

836 files changed

+63437
-65496
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

836 files changed

+63437
-65496
lines changed

‎.eslintrc

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"extends": "airbnb",
3+
"parserOptions": {
4+
"ecmaVersion": 6,
5+
"sourceType": "module",
6+
"ecmaFeatures": {
7+
"jsx": true
8+
}
9+
},
10+
"rules": {
11+
"semi": 2,
12+
"no-unused-vars" : "off",
13+
"comma-dangle" : "off",
14+
"no-plusplus" : "off",
15+
"no-restricted-properties" : "off",
16+
"prefer-template" : "off",
17+
"import/no-extraneous-dependencies" : "off",
18+
"import/prefer-default-export" : "off",
19+
"max-len": ["off", 100, 2, {
20+
"ignoreUrls": true,
21+
"ignoreComments": false,
22+
"ignoreStrings": true,
23+
"ignoreTemplateLiterals": true
24+
}]
25+
}
26+
}

‎docs/components/app-layout/app-box/app-box.html renamed to ‎docs/components/app-layout/app-box/app-box.js

Lines changed: 123 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
<!--
1+
import '../../polymer/polymer.js';
2+
import '../../iron-flex-layout/iron-flex-layout.js';
3+
import { IronResizableBehavior } from '../../iron-resizable-behavior/iron-resizable-behavior.js';
4+
import { AppScrollEffectsBehavior } from '../app-scroll-effects/app-scroll-effects-behavior.js';
5+
import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
6+
/**
27
@license
38
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
49
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
510
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
611
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
712
Code distributed by Google as part of the polymer project is also
813
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-
-->
10-
11-
<link rel="import" href="../../polymer/polymer.html">
12-
<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
13-
<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
14-
<link rel="import" href="../app-scroll-effects/app-scroll-effects-behavior.html">
15-
16-
<!--
14+
*/
15+
/**
1716
app-box is a container element that can have scroll effects - visual effects based on
1817
scroll position. For example, the parallax effect can be used to move an image at a slower
1918
rate than the foreground.
@@ -86,10 +85,9 @@ <h2>Sub title</h2>
8685
@element app-box
8786
@demo app-box/demo/document-scroll.html Document Scroll
8887
@demo app-box/demo/scrolling-region.html Scrolling Region
89-
-->
90-
91-
<dom-module id="app-box">
92-
<template>
88+
*/
89+
Polymer({
90+
_template: `
9391
<style>
9492
:host {
9593
position: relative;
@@ -129,121 +127,117 @@ <h2>Sub title</h2>
129127
<div id="contentContainer">
130128
<slot></slot>
131129
</div>
132-
</template>
133-
134-
<script>
135-
Polymer({
136-
is: 'app-box',
137-
138-
behaviors: [
139-
Polymer.AppScrollEffectsBehavior,
140-
Polymer.IronResizableBehavior
141-
],
142-
143-
listeners: {
144-
'iron-resize': '_resizeHandler'
145-
},
146-
147-
/**
148-
* The current scroll progress.
149-
*
150-
* @type {number}
151-
*/
152-
_progress: 0,
153-
154-
attached: function() {
155-
this.resetLayout();
156-
},
157-
158-
_debounceRaf: function(fn) {
159-
var self = this;
160-
if (this._raf) {
161-
window.cancelAnimationFrame(this._raf);
162-
}
163-
this._raf = window.requestAnimationFrame(function() {
164-
self._raf = null;
165-
fn.call(self);
166-
});
167-
},
168-
169-
/**
170-
* Resets the layout. This method is automatically called when the element is attached to the DOM.
171-
*
172-
* @method resetLayout
173-
*/
174-
resetLayout: function() {
175-
this._debounceRaf(function() {
176-
// noop if the box isn't in the rendered tree
177-
if (this.offsetWidth === 0 && this.offsetHeight === 0) {
178-
return;
179-
}
180-
181-
var scrollTop = this._clampedScrollTop;
182-
var savedDisabled = this.disabled;
183-
184-
this.disabled = true;
185-
this._elementTop = this._getElementTop();
186-
this._elementHeight = this.offsetHeight;
187-
this._cachedScrollTargetHeight = this._scrollTargetHeight;
188-
this._setUpEffect();
189-
this._updateScrollState(scrollTop);
190-
this.disabled = savedDisabled;
191-
});
192-
},
193-
194-
_getElementTop: function() {
195-
var currentNode = this;
196-
var top = 0;
197-
198-
while (currentNode && currentNode !== this.scrollTarget) {
199-
top += currentNode.offsetTop;
200-
currentNode = currentNode.offsetParent;
201-
}
202-
return top;
203-
},
204-
205-
_updateScrollState: function(scrollTop) {
206-
if (this.isOnScreen()) {
207-
var viewportTop = this._elementTop - scrollTop;
208-
this._progress = 1 - (viewportTop + this._elementHeight) / this._cachedScrollTargetHeight;
209-
this._runEffects(this._progress, scrollTop);
210-
}
211-
},
212-
213-
/**
214-
* Returns true if this app-box is on the screen.
215-
* That is, visible in the current viewport.
216-
*
217-
* @method isOnScreen
218-
* @return {boolean}
219-
*/
220-
isOnScreen: function() {
221-
return this._elementTop < this._scrollTop + this._cachedScrollTargetHeight
222-
&& this._elementTop + this._elementHeight > this._scrollTop;
223-
},
224-
225-
_resizeHandler: function() {
226-
this.resetLayout();
227-
},
228-
229-
_getDOMRef: function(id) {
230-
if (id === 'background') {
231-
return this.$.background;
232-
}
233-
if (id === 'backgroundFrontLayer') {
234-
return this.$.backgroundFrontLayer;
235-
}
236-
},
237-
238-
/**
239-
* Returns an object containing the progress value of the scroll effects.
240-
*
241-
* @method getScrollState
242-
* @return {Object}
243-
*/
244-
getScrollState: function() {
245-
return { progress: this._progress };
130+
`,
131+
132+
is: 'app-box',
133+
134+
behaviors: [
135+
AppScrollEffectsBehavior,
136+
IronResizableBehavior
137+
],
138+
139+
listeners: {
140+
'iron-resize': '_resizeHandler'
141+
},
142+
143+
/**
144+
* The current scroll progress.
145+
*
146+
* @type {number}
147+
*/
148+
_progress: 0,
149+
150+
attached: function() {
151+
this.resetLayout();
152+
},
153+
154+
_debounceRaf: function(fn) {
155+
var self = this;
156+
if (this._raf) {
157+
window.cancelAnimationFrame(this._raf);
158+
}
159+
this._raf = window.requestAnimationFrame(function() {
160+
self._raf = null;
161+
fn.call(self);
162+
});
163+
},
164+
165+
/**
166+
* Resets the layout. This method is automatically called when the element is attached to the DOM.
167+
*
168+
* @method resetLayout
169+
*/
170+
resetLayout: function() {
171+
this._debounceRaf(function() {
172+
// noop if the box isn't in the rendered tree
173+
if (this.offsetWidth === 0 && this.offsetHeight === 0) {
174+
return;
246175
}
176+
177+
var scrollTop = this._clampedScrollTop;
178+
var savedDisabled = this.disabled;
179+
180+
this.disabled = true;
181+
this._elementTop = this._getElementTop();
182+
this._elementHeight = this.offsetHeight;
183+
this._cachedScrollTargetHeight = this._scrollTargetHeight;
184+
this._setUpEffect();
185+
this._updateScrollState(scrollTop);
186+
this.disabled = savedDisabled;
247187
});
248-
</script>
249-
</dom-module>
188+
},
189+
190+
_getElementTop: function() {
191+
var currentNode = this;
192+
var top = 0;
193+
194+
while (currentNode && currentNode !== this.scrollTarget) {
195+
top += currentNode.offsetTop;
196+
currentNode = currentNode.offsetParent;
197+
}
198+
return top;
199+
},
200+
201+
_updateScrollState: function(scrollTop) {
202+
if (this.isOnScreen()) {
203+
var viewportTop = this._elementTop - scrollTop;
204+
this._progress = 1 - (viewportTop + this._elementHeight) / this._cachedScrollTargetHeight;
205+
this._runEffects(this._progress, scrollTop);
206+
}
207+
},
208+
209+
/**
210+
* Returns true if this app-box is on the screen.
211+
* That is, visible in the current viewport.
212+
*
213+
* @method isOnScreen
214+
* @return {boolean}
215+
*/
216+
isOnScreen: function() {
217+
return this._elementTop < this._scrollTop + this._cachedScrollTargetHeight
218+
&& this._elementTop + this._elementHeight > this._scrollTop;
219+
},
220+
221+
_resizeHandler: function() {
222+
this.resetLayout();
223+
},
224+
225+
_getDOMRef: function(id) {
226+
if (id === 'background') {
227+
return this.$.background;
228+
}
229+
if (id === 'backgroundFrontLayer') {
230+
return this.$.backgroundFrontLayer;
231+
}
232+
},
233+
234+
/**
235+
* Returns an object containing the progress value of the scroll effects.
236+
*
237+
* @method getScrollState
238+
* @return {Object}
239+
*/
240+
getScrollState: function() {
241+
return { progress: this._progress };
242+
}
243+
});

‎docs/components/app-layout/app-box/demo/document-scroll.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919

2020
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
2121

22-
<link rel="import" href="../../app-toolbar/app-toolbar.html">
23-
<link rel="import" href="../../demo/sample-content.html">
24-
<link rel="import" href="../../app-scroll-effects/effects/parallax-background.html">
25-
<link rel="import" href="../app-box.html">
22+
<script type="module" src="../../app-toolbar/app-toolbar.js"></script>
23+
<script type="module" src="../../demo/sample-content.js"></script>
24+
<script type="module" src="../../app-scroll-effects/effects/parallax-background.js"></script>
25+
<script type="module" src="../app-box.js"></script>
2626

2727
<custom-style>
2828
<style is="custom-style">

‎docs/components/app-layout/app-box/demo/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
2020

21-
<link rel="import" href="../../../paper-styles/demo-pages.html">
21+
<script type="module" src="../../../paper-styles/demo-pages.js"></script>
2222
</head>
2323
<style>
2424
a {

‎docs/components/app-layout/app-box/demo/scrolling-region.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919

2020
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
2121

22-
<link rel="import" href="../../app-toolbar/app-toolbar.html">
23-
<link rel="import" href="../../demo/sample-content.html">
24-
<link rel="import" href="../../app-scroll-effects/effects/parallax-background.html">
25-
<link rel="import" href="../app-box.html">
22+
<script type="module" src="../../app-toolbar/app-toolbar.js"></script>
23+
<script type="module" src="../../demo/sample-content.js"></script>
24+
<script type="module" src="../../app-scroll-effects/effects/parallax-background.js"></script>
25+
<script type="module" src="../app-box.js"></script>
2626

2727
<custom-style>
2828
<style is="custom-style">

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy