polymer-core-rails 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +82 -0
- data/Rakefile +2 -0
- data/app/assets/components/core-ajax/core-ajax.html.erb +320 -0
- data/app/assets/components/core-ajax/core-xhr.html.erb +112 -0
- data/app/assets/components/core-animated-pages/core-animated-pages.css +18 -0
- data/app/assets/components/core-animated-pages/core-animated-pages.html.erb +413 -0
- data/app/assets/components/core-animated-pages/transitions/cascade-transition.html +138 -0
- data/app/assets/components/core-animated-pages/transitions/core-transition-pages.html.erb +173 -0
- data/app/assets/components/core-animated-pages/transitions/cross-fade.html.erb +173 -0
- data/app/assets/components/core-animated-pages/transitions/hero-transition.css +12 -0
- data/app/assets/components/core-animated-pages/transitions/hero-transition.html.erb +267 -0
- data/app/assets/components/core-animated-pages/transitions/list-cascade.html +58 -0
- data/app/assets/components/core-animated-pages/transitions/scale-up.html +37 -0
- data/app/assets/components/core-animated-pages/transitions/slide-down.html +55 -0
- data/app/assets/components/core-animated-pages/transitions/slide-from-bottom.html +31 -0
- data/app/assets/components/core-animated-pages/transitions/slide-from-right.html +35 -0
- data/app/assets/components/core-animated-pages/transitions/slide-up.html +82 -0
- data/app/assets/components/core-animated-pages/transitions/tile-cascade.html +101 -0
- data/app/assets/components/core-animation/core-animation-group.html.erb +168 -0
- data/app/assets/components/core-animation/core-animation.html.erb +523 -0
- data/app/assets/components/core-animation/web-animations.html.erb +1 -0
- data/app/assets/components/core-collapse/core-collapse.css +16 -0
- data/app/assets/components/core-collapse/core-collapse.html.erb +247 -0
- data/app/assets/components/core-drag-drop/core-drag-drop.html +109 -0
- data/app/assets/components/core-drawer-panel/core-drawer-panel.css +162 -0
- data/app/assets/components/core-drawer-panel/core-drawer-panel.html.erb +150 -0
- data/app/assets/components/core-field/core-field.css +38 -0
- data/app/assets/components/core-field/core-field.html.erb +32 -0
- data/app/assets/components/core-header-panel/core-header-panel.css +75 -0
- data/app/assets/components/core-header-panel/core-header-panel.html.erb +196 -0
- data/app/assets/components/core-icon/core-icon.css +25 -0
- data/app/assets/components/core-icon/core-icon.html.erb +126 -0
- data/app/assets/components/core-icon-button/core-icon-button.css +70 -0
- data/app/assets/components/core-icon-button/core-icon-button.html.erb +83 -0
- data/app/assets/components/core-icons/core-icons.html +14 -0
- data/app/assets/components/core-iconset/core-iconset.html.erb +236 -0
- data/app/assets/components/core-iconset-svg/core-iconset-svg.html +170 -0
- data/app/assets/components/core-input/core-input.css +35 -0
- data/app/assets/components/core-input/core-input.html.erb +311 -0
- data/app/assets/components/core-item/core-item.css +31 -0
- data/app/assets/components/core-item/core-item.html.erb +80 -0
- data/app/assets/components/core-list/core-list.css +20 -0
- data/app/assets/components/core-list/core-list.html.erb +403 -0
- data/app/assets/components/core-localstorage/core-localstorage.html +126 -0
- data/app/assets/components/core-media-query/core-media-query.html +86 -0
- data/app/assets/components/core-menu/core-menu.css +18 -0
- data/app/assets/components/core-menu/core-menu.html.erb +62 -0
- data/app/assets/components/core-menu/core-submenu.css +29 -0
- data/app/assets/components/core-menu/core-submenu.html.erb +106 -0
- data/app/assets/components/core-menu-button/core-menu-button.css +10 -0
- data/app/assets/components/core-menu-button/core-menu-button.html.erb +139 -0
- data/app/assets/components/core-meta/core-meta.html +143 -0
- data/app/assets/components/core-overlay/core-key-helper.html +17 -0
- data/app/assets/components/core-overlay/core-overlay-layer.html +112 -0
- data/app/assets/components/core-overlay/core-overlay.html.erb +661 -0
- data/app/assets/components/core-pages/core-pages.css +30 -0
- data/app/assets/components/core-pages/core-pages.html.erb +43 -0
- data/app/assets/components/core-range/core-range.html +107 -0
- data/app/assets/components/core-scaffold/core-scaffold.html.erb +147 -0
- data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.css +57 -0
- data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.html.erb +257 -0
- data/app/assets/components/core-selection/core-selection.html +148 -0
- data/app/assets/components/core-selector/core-selector.html.erb +423 -0
- data/app/assets/components/core-shared-lib/core-shared-lib.html +150 -0
- data/app/assets/components/core-signals/core-signals.html +83 -0
- data/app/assets/components/core-splitter/core-splitter.css.erb +27 -0
- data/app/assets/components/core-splitter/core-splitter.html.erb +159 -0
- data/app/assets/components/core-splitter/handle-h.svg +4 -0
- data/app/assets/components/core-splitter/handle.svg +4 -0
- data/app/assets/components/core-style/core-style.html +385 -0
- data/app/assets/components/core-toolbar/core-toolbar.css +126 -0
- data/app/assets/components/core-toolbar/core-toolbar.html.erb +73 -0
- data/app/assets/components/core-tooltip/core-tooltip.css +103 -0
- data/app/assets/components/core-tooltip/core-tooltip.html.erb +144 -0
- data/app/assets/components/core-transition/core-transition-css.html.erb +76 -0
- data/app/assets/components/core-transition/core-transition-overlay.css +46 -0
- data/app/assets/components/core-transition/core-transition.html.erb +44 -0
- data/app/assets/components/web-animations-js/web-animations.js +5666 -0
- data/lib/polymer-core-rails/engine.rb +4 -0
- data/lib/polymer-core-rails/version.rb +3 -0
- data/lib/polymer-core-rails.rb +2 -0
- metadata +167 -0
@@ -0,0 +1,173 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
|
10
|
+
<%= html_import_tag "core-style/core-style" %>
|
11
|
+
<%= html_import_tag "core-transition/core-transition" %>
|
12
|
+
|
13
|
+
<!--
|
14
|
+
|
15
|
+
`core-transition-pages` represents a page transition, which may include CSS and/or
|
16
|
+
script. It will look for a `core-style` element with the same `id` to install in the
|
17
|
+
scope of the `core-animated-pages` that's using the transition.
|
18
|
+
|
19
|
+
Example:
|
20
|
+
|
21
|
+
<core-style id="fooTransition">
|
22
|
+
// some CSS here
|
23
|
+
</core-style>
|
24
|
+
<core-transition-pages id="fooTransition"></core-transition-pages>
|
25
|
+
|
26
|
+
There are three stages to a page transition:
|
27
|
+
|
28
|
+
1. `prepare`: Called to set up the incoming and outgoing pages to the "before" state,
|
29
|
+
e.g. setting the incoming page to `opacity: 0` for `cross-fade` or find and
|
30
|
+
measure hero elements for `hero-transition`.
|
31
|
+
|
32
|
+
2. `go`: Called to run the transition. For CSS-based transitions, this generally
|
33
|
+
applies a CSS `transition` property.
|
34
|
+
|
35
|
+
3. `complete`: Called when the elements are finished transitioning.
|
36
|
+
|
37
|
+
See the individual transition documentation for specific details.
|
38
|
+
|
39
|
+
@element core-transition-pages
|
40
|
+
@status beta
|
41
|
+
@homepage github.io
|
42
|
+
-->
|
43
|
+
<!--
|
44
|
+
Fired when the transition completes.
|
45
|
+
|
46
|
+
@event core-transitionend
|
47
|
+
-->
|
48
|
+
<polymer-element name="core-transition-pages" extends="core-transition">
|
49
|
+
<script>
|
50
|
+
|
51
|
+
(function () {
|
52
|
+
|
53
|
+
// create some basic transition styling data.
|
54
|
+
var transitions = CoreStyle.g.transitions = CoreStyle.g.transitions || {};
|
55
|
+
transitions.duration = '500ms';
|
56
|
+
transitions.heroDelay = '50ms';
|
57
|
+
transitions.scaleDelay = '500ms';
|
58
|
+
transitions.cascadeFadeDuration = '250ms';
|
59
|
+
|
60
|
+
Polymer({
|
61
|
+
|
62
|
+
publish: {
|
63
|
+
/**
|
64
|
+
* This class will be applied to the scope element in the `prepare` function.
|
65
|
+
* It is removed in the `complete` function. Used to activate a set of CSS
|
66
|
+
* rules that need to apply before the transition runs, e.g. a default opacity
|
67
|
+
* or transform for the non-active pages.
|
68
|
+
*
|
69
|
+
* @attribute scopeClass
|
70
|
+
* @type string
|
71
|
+
* @default ''
|
72
|
+
*/
|
73
|
+
scopeClass: '',
|
74
|
+
|
75
|
+
/**
|
76
|
+
* This class will be applied to the scope element in the `go` function. It is
|
77
|
+
* remoived in the `complete' function. Generally used to apply a CSS transition
|
78
|
+
* rule only during the transition.
|
79
|
+
*
|
80
|
+
* @attribute activeClass
|
81
|
+
* @type string
|
82
|
+
* @default ''
|
83
|
+
*/
|
84
|
+
activeClass: '',
|
85
|
+
|
86
|
+
/**
|
87
|
+
* Specifies which CSS property to look for when it receives a `transitionEnd` event
|
88
|
+
* to determine whether the transition is complete. If not specified, the first
|
89
|
+
* transitionEnd event received will complete the transition.
|
90
|
+
*
|
91
|
+
* @attribute transitionProperty
|
92
|
+
* @type string
|
93
|
+
* @default ''
|
94
|
+
*/
|
95
|
+
transitionProperty: ''
|
96
|
+
},
|
97
|
+
|
98
|
+
/**
|
99
|
+
* True if this transition is complete.
|
100
|
+
*
|
101
|
+
* @attribute completed
|
102
|
+
* @type boolean
|
103
|
+
* @default false
|
104
|
+
*/
|
105
|
+
completed: false,
|
106
|
+
|
107
|
+
prepare: function(scope, options) {
|
108
|
+
this.boundCompleteFn = this.complete.bind(this, scope);
|
109
|
+
if (this.scopeClass) {
|
110
|
+
scope.classList.add(this.scopeClass);
|
111
|
+
}
|
112
|
+
},
|
113
|
+
|
114
|
+
go: function(scope, options) {
|
115
|
+
this.completed = false;
|
116
|
+
if (this.activeClass) {
|
117
|
+
scope.classList.add(this.activeClass);
|
118
|
+
}
|
119
|
+
scope.addEventListener('transitionend', this.boundCompleteFn, false);
|
120
|
+
},
|
121
|
+
|
122
|
+
setup: function(scope) {
|
123
|
+
if (!scope._pageTransitionStyles) {
|
124
|
+
scope._pageTransitionStyles = {};
|
125
|
+
}
|
126
|
+
|
127
|
+
var name = this.calcStyleName();
|
128
|
+
|
129
|
+
if (!scope._pageTransitionStyles[name]) {
|
130
|
+
this.installStyleInScope(scope, name);
|
131
|
+
scope._pageTransitionStyles[name] = true;
|
132
|
+
}
|
133
|
+
},
|
134
|
+
|
135
|
+
calcStyleName: function() {
|
136
|
+
return this.id || this.localName;
|
137
|
+
},
|
138
|
+
|
139
|
+
installStyleInScope: function(scope, id) {
|
140
|
+
if (!scope.shadowRoot) {
|
141
|
+
scope.createShadowRoot().innerHTML = '<content></content>';
|
142
|
+
}
|
143
|
+
var root = scope.shadowRoot;
|
144
|
+
var scopeStyle = document.createElement('core-style');
|
145
|
+
root.insertBefore(scopeStyle, root.firstChild);
|
146
|
+
scopeStyle.applyRef(id);
|
147
|
+
},
|
148
|
+
|
149
|
+
complete: function(scope, e) {
|
150
|
+
// TODO(yvonne): hack, need to manage completion better
|
151
|
+
if (e.propertyName !== 'box-shadow' && (!this.transitionProperty || e.propertyName.indexOf(this.transitionProperty) !== -1)) {
|
152
|
+
this.completed = true;
|
153
|
+
this.fire('core-transitionend', this, scope);
|
154
|
+
}
|
155
|
+
},
|
156
|
+
|
157
|
+
// TODO(sorvell): ideally we do this in complete.
|
158
|
+
ensureComplete: function(scope) {
|
159
|
+
scope.removeEventListener('transitionend', this.boundCompleteFn, false);
|
160
|
+
if (this.scopeClass) {
|
161
|
+
scope.classList.remove(this.scopeClass);
|
162
|
+
}
|
163
|
+
if (this.activeClass) {
|
164
|
+
scope.classList.remove(this.activeClass);
|
165
|
+
}
|
166
|
+
}
|
167
|
+
|
168
|
+
});
|
169
|
+
|
170
|
+
})();
|
171
|
+
|
172
|
+
</script>
|
173
|
+
</polymer-element>
|
@@ -0,0 +1,173 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
|
10
|
+
<%= html_import_tag "core-animated-pages/transitions/core-transition-pages" %>
|
11
|
+
|
12
|
+
<core-style id="cross-fade">
|
13
|
+
polyfill-next-selector { content: ':host > * [cross-fade]'; }
|
14
|
+
::content > * /deep/ [cross-fade] {
|
15
|
+
-webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
16
|
+
transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
17
|
+
}
|
18
|
+
|
19
|
+
polyfill-next-selector { content: ':host > * [cross-fade][bg]'; }
|
20
|
+
::content > * /deep/ [cross-fade][bg] {
|
21
|
+
-webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
22
|
+
transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
23
|
+
}
|
24
|
+
|
25
|
+
polyfill-next-selector { content: ':host > * [cross-fade][hero-p]'; }
|
26
|
+
::content > * /deep/ [cross-fade][hero-p] {
|
27
|
+
-webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
28
|
+
transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
29
|
+
}
|
30
|
+
|
31
|
+
polyfill-next-selector { content: ':host > .core-selected [cross-fade]'; }
|
32
|
+
::content > .core-selected /deep/ [cross-fade] {
|
33
|
+
opacity: 1;
|
34
|
+
}
|
35
|
+
|
36
|
+
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade]:not([hero-p]):not([bg])'; }
|
37
|
+
::content > [animate]:not(.core-selected) /deep/ [cross-fade]:not([hero-p]):not([bg]) {
|
38
|
+
opacity: 0;
|
39
|
+
}
|
40
|
+
|
41
|
+
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][bg]'; }
|
42
|
+
::content > [animate]:not(.core-selected) /deep/ [cross-fade][bg] {
|
43
|
+
background-color: rgba(0, 0, 0, 0);
|
44
|
+
}
|
45
|
+
|
46
|
+
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade][hero-p]'; }
|
47
|
+
::content > [animate]:not(.core-selected) /deep/ [cross-fade][hero-p] {
|
48
|
+
background-color: rgba(0, 0, 0, 0);
|
49
|
+
}
|
50
|
+
</core-style>
|
51
|
+
|
52
|
+
<core-style id="cross-fade-delayed">
|
53
|
+
polyfill-next-selector { content: ':host > * [cross-fade-delayed]'; }
|
54
|
+
::content > * /deep/ [cross-fade-delayed] {
|
55
|
+
-webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
56
|
+
transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
57
|
+
}
|
58
|
+
|
59
|
+
polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; }
|
60
|
+
::content > .core-selected /deep/ [cross-fade-delayed] {
|
61
|
+
-webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transitions.duration}};
|
62
|
+
transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out {{g.transitions.xfadeDelay || g.transitions.xfadeDuration || g.transitions.duration}};
|
63
|
+
}
|
64
|
+
|
65
|
+
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [cross-fade-delayed]'; }
|
66
|
+
::content > [animate]:not(.core-selected) /deep/ [cross-fade-delayed] {
|
67
|
+
opacity: 0;
|
68
|
+
}
|
69
|
+
|
70
|
+
polyfill-next-selector { content: ':host > .core-selected [cross-fade-delayed]'; }
|
71
|
+
::content > .core-selected /deep/ [cross-fade-delayed] {
|
72
|
+
opacity: 1;
|
73
|
+
}
|
74
|
+
|
75
|
+
</core-style>
|
76
|
+
|
77
|
+
<core-style id="cross-fade-all">
|
78
|
+
/* cross-fade-all: cross fade everything except for heroes and their parents */
|
79
|
+
polyfill-next-selector { content: ':host(.cross-fade-all) > * *:not([hero]):not([hero-p]):not([cross-fade])'; }
|
80
|
+
:host(.cross-fade-all) ::content > * /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) {
|
81
|
+
-webkit-transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
82
|
+
transition: opacity {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
83
|
+
}
|
84
|
+
|
85
|
+
polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) *:not([hero]):not([hero-p]):not([cross-fade])'; }
|
86
|
+
:host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ *:not([hero]):not([hero-p]):not([cross-fade]) {
|
87
|
+
opacity: 0;
|
88
|
+
}
|
89
|
+
|
90
|
+
polyfill-next-selector { content: ':host(.cross-fade-all) > .core-selected *:not([hero])'; }
|
91
|
+
.host(.cross-fade-all) ::content > .core-selected /deep/ * {
|
92
|
+
opacity: 1;
|
93
|
+
}
|
94
|
+
|
95
|
+
/* Only background-color is allowed for the hero's parents, no opacity transitions */
|
96
|
+
polyfill-next-selector { content: ':host(.cross-fade-all) > * [hero-p]'; }
|
97
|
+
:host(.cross-fade-all) ::content > * /deep/ [hero-p] {
|
98
|
+
-webkit-transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
99
|
+
transition: background-color {{g.transitions.xfadeDuration || g.transitions.duration}} ease-out;
|
100
|
+
opacity: 1;
|
101
|
+
}
|
102
|
+
|
103
|
+
polyfill-next-selector { content: ':host(.cross-fade-all) > [animate]:not(.core-selected) [hero-p]'; }
|
104
|
+
:host(.cross-fade-all) ::content > [animate]:not(.core-selected) /deep/ [hero-p] {
|
105
|
+
background-color: rgba(0, 0, 0, 0);
|
106
|
+
}
|
107
|
+
</core-style>
|
108
|
+
|
109
|
+
<!--
|
110
|
+
|
111
|
+
`cross-fade` fades out elements in the outgoing page and fades in elements in the
|
112
|
+
incoming page during a page transition. You can configure the duration of the
|
113
|
+
transition with the global variable `CoreStyle.g.transitions.xfadeDuration`.
|
114
|
+
|
115
|
+
Example:
|
116
|
+
|
117
|
+
<core-animated-pages transition="cross-fade">
|
118
|
+
<section>
|
119
|
+
<div id="div1" cross-fade></div>
|
120
|
+
</section>
|
121
|
+
<section>
|
122
|
+
<div id="div2" cross-fade bg>
|
123
|
+
<div id="div3" cross-fade></div>
|
124
|
+
<div id="div4"></div>
|
125
|
+
</div>
|
126
|
+
</section>
|
127
|
+
</core-animated-pages>
|
128
|
+
|
129
|
+
In the above example, `#div1` and `#div3` has the `cross-fade` attribute. `#div1`
|
130
|
+
will fade out and `#div3` will fade in with opacity transitions when the page switches
|
131
|
+
from 0 to 1. Sometimes, you may want to only fade the background color of an element
|
132
|
+
but not its children, and you can use the `bg` attribute along with the `#div1`
|
133
|
+
attribute as in `#div2`.
|
134
|
+
|
135
|
+
@class cross-fade
|
136
|
+
@extends core-transition-pages
|
137
|
+
@status beta
|
138
|
+
@homepage github.io
|
139
|
+
|
140
|
+
-->
|
141
|
+
|
142
|
+
<!--
|
143
|
+
|
144
|
+
`cross-fade-delayed` performs a cross-fade after some delay, either specified in
|
145
|
+
the global variable `CoreStyle.g.transitions.xfadeDelay` or the duration of the
|
146
|
+
transition.
|
147
|
+
|
148
|
+
Example:
|
149
|
+
|
150
|
+
<core-animated-pages transition="hero-transition cross-fade-delayed">
|
151
|
+
<section>
|
152
|
+
<div id="div1" hero-id hero></div>
|
153
|
+
</section>
|
154
|
+
<section>
|
155
|
+
<div id="div2" hero-id hero>
|
156
|
+
<div id="div3" cross-fade-delayed></div>
|
157
|
+
</div>
|
158
|
+
</section>
|
159
|
+
</core-animated-pages>
|
160
|
+
|
161
|
+
In the above example, `#div3` fades in after the hero transition from `#div1` to
|
162
|
+
`#div2` completes.
|
163
|
+
|
164
|
+
@class cross-fade-delayed
|
165
|
+
@extends core-transition-pages
|
166
|
+
@status beta
|
167
|
+
@homepage github.io
|
168
|
+
|
169
|
+
-->
|
170
|
+
|
171
|
+
<core-transition-pages id="cross-fade"></core-transition-pages>
|
172
|
+
<core-transition-pages id="cross-fade-delayed"></core-transition-pages>
|
173
|
+
<core-transition-pages id="cross-fade-all" scopeClass="cross-fade-all"></core-transition-pages>
|
@@ -0,0 +1,12 @@
|
|
1
|
+
/* Hide heroes that are not currently transitioning */
|
2
|
+
polyfill-next-selector { content: ':host > [animate] [hero]'; }
|
3
|
+
::content > [animate] /deep/ [hero], ::content > [animate]::shadow [hero] {
|
4
|
+
visibility: hidden;
|
5
|
+
}
|
6
|
+
|
7
|
+
polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; }
|
8
|
+
::content > .core-selected[animate] /deep/ [hero],
|
9
|
+
::content > .core-selected[animate]::shadow [hero] {
|
10
|
+
visibility: visible;
|
11
|
+
z-index: 10000;
|
12
|
+
}
|
@@ -0,0 +1,267 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
|
10
|
+
<%= html_import_tag "core-animated-pages/transitions/core-transition-pages" %>
|
11
|
+
|
12
|
+
<core-style id="hero-transition">
|
13
|
+
/* Hide heroes that are not currently transitioning */
|
14
|
+
polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [hero]'; }
|
15
|
+
::content > [animate]:not(.core-selected) /deep/ [hero] {
|
16
|
+
opacity: 0;
|
17
|
+
}
|
18
|
+
|
19
|
+
polyfill-next-selector { content: ':host > .core-selected[animate] [hero]'; }
|
20
|
+
::content > .core-selected[animate] /deep/ [hero] {
|
21
|
+
opacity: 1;
|
22
|
+
z-index: 10000;
|
23
|
+
}
|
24
|
+
|
25
|
+
polyfill-next-selector { content: ':host > * [hero-p]'; }
|
26
|
+
::content > * /deep/ [hero-p] {
|
27
|
+
-webkit-transition: box-shadow 100ms ease-out;
|
28
|
+
transition: box-shadow 100ms ease-out;
|
29
|
+
}
|
30
|
+
|
31
|
+
polyfill-next-selector { content: ':host > [animate] [hero-p]'; }
|
32
|
+
::content > [animate] /deep/ [hero-p] {
|
33
|
+
box-shadow: none !important;
|
34
|
+
}
|
35
|
+
</core-style>
|
36
|
+
|
37
|
+
|
38
|
+
<!--
|
39
|
+
|
40
|
+
`hero-transition` transforms two elements in different pages such that they appear
|
41
|
+
to be shared across the pages.
|
42
|
+
|
43
|
+
Example:
|
44
|
+
|
45
|
+
<core-animated-pages transition="hero-transition">
|
46
|
+
<section layout horizontal>
|
47
|
+
<div id="div1" flex></div>
|
48
|
+
<div id="div2" flex hero-id="shared" hero></div>
|
49
|
+
</section>
|
50
|
+
<section>
|
51
|
+
<section layout horizontal>
|
52
|
+
<div id="div3" flex hero-id="shared" hero></div>
|
53
|
+
<div id="div4" flex></div>
|
54
|
+
</section>
|
55
|
+
</section>
|
56
|
+
</core-animated-pages>
|
57
|
+
|
58
|
+
In the above example, the elements `#div2` and `#div3` shares the same `hero-id`
|
59
|
+
attribute and a single element appears to translate and scale smoothly between
|
60
|
+
the two positions during a page transition.
|
61
|
+
|
62
|
+
Both elements from the source and destination pages must share the same `hero-id`
|
63
|
+
and must both contain the `hero` attribute to trigger the transition. The separate
|
64
|
+
`hero` attribute allows you to use binding to configure the transition:
|
65
|
+
|
66
|
+
Example:
|
67
|
+
|
68
|
+
<core-animated-pages transition="hero-transition">
|
69
|
+
<section layout horizontal>
|
70
|
+
<div id="div1" flex hero-id="shared" hero?="{{selected == 0}}"></div>
|
71
|
+
<div id="div2" flex hero-id="shared" hero?="{{selected == 1}}"></div>
|
72
|
+
</section>
|
73
|
+
<section>
|
74
|
+
<section layout horizontal>
|
75
|
+
<div id="div3" flex hero-id="shared" hero></div>
|
76
|
+
</section>
|
77
|
+
</section>
|
78
|
+
</core-animated-pages>
|
79
|
+
|
80
|
+
In the above example, either `#div1` or `#div2` scales to `#div3` during a page transition,
|
81
|
+
depending on the value of `selected`.
|
82
|
+
|
83
|
+
Because it is common to share elements with different `border-radius` values, by default
|
84
|
+
this transition will also animate the `border-radius` property.
|
85
|
+
|
86
|
+
You can configure the duration of the hero transition with the global variable
|
87
|
+
`CoreStyle.g.transitions.heroDuration`.
|
88
|
+
|
89
|
+
@class hero-transition
|
90
|
+
@extends core-transition-pages
|
91
|
+
@status beta
|
92
|
+
@homepage github.io
|
93
|
+
-->
|
94
|
+
<polymer-element name="hero-transition" extends="core-transition-pages">
|
95
|
+
<script>
|
96
|
+
(function() {
|
97
|
+
|
98
|
+
var webkitStyles = '-webkit-transition' in document.documentElement.style
|
99
|
+
var TRANSITION_CSSNAME = webkitStyles ? '-webkit-transition' : 'transition';
|
100
|
+
var TRANSFORM_CSSNAME = webkitStyles ? '-webkit-transform' : 'transform';
|
101
|
+
var TRANSITION_NAME = webkitStyles ? 'webkitTransition' : 'transition';
|
102
|
+
var TRANSFORM_NAME = webkitStyles ? 'webkitTransform' : 'transform';
|
103
|
+
|
104
|
+
var hasShadowDOMPolyfill = window.ShadowDOMPolyfill;
|
105
|
+
|
106
|
+
Polymer({
|
107
|
+
|
108
|
+
go: function(scope, options) {
|
109
|
+
var props = [
|
110
|
+
'border-radius',
|
111
|
+
'width',
|
112
|
+
'height',
|
113
|
+
TRANSFORM_CSSNAME
|
114
|
+
];
|
115
|
+
|
116
|
+
var duration = options && options.duration ||
|
117
|
+
(CoreStyle.g.transitions.heroDuration ||
|
118
|
+
CoreStyle.g.transitions.duration);
|
119
|
+
|
120
|
+
scope._heroes.forEach(function(h) {
|
121
|
+
var d = h.h0.hasAttribute('hero-delayed') ? CoreStyle.g.transitions.heroDelay : '';
|
122
|
+
var wt = [];
|
123
|
+
props.forEach(function(p) {
|
124
|
+
wt.push(p + ' ' + duration + ' ' + options.easing + ' ' + d);
|
125
|
+
});
|
126
|
+
|
127
|
+
h.h1.style[TRANSITION_NAME] = wt.join(', ');
|
128
|
+
h.h1.style.borderRadius = h.r1;
|
129
|
+
h.h1.style[TRANSFORM_NAME] = 'none';
|
130
|
+
});
|
131
|
+
|
132
|
+
this.super(arguments);
|
133
|
+
|
134
|
+
if (!scope._heroes.length) {
|
135
|
+
this.completed = true;
|
136
|
+
}
|
137
|
+
},
|
138
|
+
|
139
|
+
prepare: function(scope, options) {
|
140
|
+
this.super(arguments);
|
141
|
+
var src = options.src, dst = options.dst;
|
142
|
+
|
143
|
+
if (scope._heroes && scope._heroes.length) {
|
144
|
+
this.ensureComplete(scope);
|
145
|
+
} else {
|
146
|
+
scope._heroes = [];
|
147
|
+
}
|
148
|
+
|
149
|
+
// FIXME(yvonne): basic support for nested pages.
|
150
|
+
// Look for heroes in the light DOM and one level of shadow DOM of the src and dst,
|
151
|
+
// and also in src.selectedItem or dst.selectedItem, then transform the dst hero to src
|
152
|
+
var ss = '[hero]';
|
153
|
+
var h$ = this.findAllInShadows(src, ss);
|
154
|
+
if (src.selectedItem) {
|
155
|
+
hs$ = this.findAllInShadows(src.selectedItem, ss);
|
156
|
+
hsa$ = [];
|
157
|
+
// De-duplicate items
|
158
|
+
Array.prototype.forEach.call(hs$, function(hs) {
|
159
|
+
if (h$.indexOf(hs) === -1) {
|
160
|
+
hsa$.push(hs);
|
161
|
+
}
|
162
|
+
})
|
163
|
+
h$ = h$.concat(hsa$);
|
164
|
+
}
|
165
|
+
|
166
|
+
for (var i=0, h0; h0=h$[i]; i++) {
|
167
|
+
var v = h0.getAttribute('hero-id');
|
168
|
+
var ds = '[hero][hero-id="' + v + '"]';
|
169
|
+
var h1 = this.findInShadows(dst, ds);
|
170
|
+
|
171
|
+
if (!h1 && dst.selectedItem) {
|
172
|
+
h1 = this.findInShadows(dst.selectedItem, ds);
|
173
|
+
}
|
174
|
+
|
175
|
+
// console.log('src', src);
|
176
|
+
// console.log('dst', dst, dst.selectedItem);
|
177
|
+
// console.log(v, h0, h1);
|
178
|
+
if (v && h1) {
|
179
|
+
var c0 = getComputedStyle(h0);
|
180
|
+
var c1 = getComputedStyle(h1);
|
181
|
+
var h = {
|
182
|
+
h0: h0,
|
183
|
+
b0: h0.getBoundingClientRect(),
|
184
|
+
r0: c0.borderRadius,
|
185
|
+
h1: h1,
|
186
|
+
b1: h1.getBoundingClientRect(),
|
187
|
+
r1: c1.borderRadius
|
188
|
+
};
|
189
|
+
|
190
|
+
var dl = h.b0.left - h.b1.left;
|
191
|
+
var dt = h.b0.top - h.b1.top;
|
192
|
+
var sw = h.b0.width / h.b1.width;
|
193
|
+
var sh = h.b0.height / h.b1.height;
|
194
|
+
|
195
|
+
// h.scaley = h.h0.hasAttribute('scaley');
|
196
|
+
// if (!h.scaley && (sw !== 1 || sh !== 1)) {
|
197
|
+
// sw = sh = 1;
|
198
|
+
// h.h1.style.width = h.b0.width + 'px';
|
199
|
+
// h.h1.style.height = h.b0.height + 'px';
|
200
|
+
// }
|
201
|
+
|
202
|
+
// Also animate the border-radius for the circle-to-square transition
|
203
|
+
if (h.r0 !== h.r1) {
|
204
|
+
h.h1.style.borderRadius = h.r0;
|
205
|
+
}
|
206
|
+
|
207
|
+
// console.log(h);
|
208
|
+
|
209
|
+
h.h1.style[TRANSFORM_NAME] = 'translate(' + dl + 'px,' + dt + 'px)' + ' scale(' + sw + ',' + sh + ')';
|
210
|
+
h.h1.style[TRANSFORM_NAME + 'Origin'] = '0 0';
|
211
|
+
|
212
|
+
scope._heroes.push(h);
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
},
|
217
|
+
|
218
|
+
// carefully look into ::shadow with polyfill specific hack
|
219
|
+
findInShadows: function(node, selector) {
|
220
|
+
return node.querySelector(selector) || (hasShadowDOMPolyfill ?
|
221
|
+
Platform.queryAllShadows(node, selector) :
|
222
|
+
node.querySelector('::shadow ' + selector));
|
223
|
+
},
|
224
|
+
|
225
|
+
findAllInShadows: function(node, selector) {
|
226
|
+
if (hasShadowDOMPolyfill) {
|
227
|
+
var nodes = node.querySelectorAll(selector).array();
|
228
|
+
var shadowNodes = Platform.queryAllShadows(node, selector, true);
|
229
|
+
return nodes.concat(shadowNodes);
|
230
|
+
} else {
|
231
|
+
return node.querySelectorAll(selector).array().concat(node.shadowRoot ? node.shadowRoot.querySelectorAll(selector).array() : []);
|
232
|
+
}
|
233
|
+
},
|
234
|
+
|
235
|
+
ensureComplete: function(scope) {
|
236
|
+
this.super(arguments);
|
237
|
+
if (scope._heroes) {
|
238
|
+
scope._heroes.forEach(function(h) {
|
239
|
+
h.h1.style[TRANSITION_NAME] = null;
|
240
|
+
h.h1.style[TRANSFORM_NAME] = null;
|
241
|
+
});
|
242
|
+
scope._heroes = [];
|
243
|
+
}
|
244
|
+
},
|
245
|
+
|
246
|
+
complete: function(scope, e) {
|
247
|
+
// if (e.propertyName === TRANSFORM_CSSNAME) {
|
248
|
+
var done = false;
|
249
|
+
scope._heroes.forEach(function(h) {
|
250
|
+
if (h.h1 === e.path[0]) {
|
251
|
+
done = true;
|
252
|
+
}
|
253
|
+
});
|
254
|
+
|
255
|
+
if (done) {
|
256
|
+
this.super(arguments);
|
257
|
+
}
|
258
|
+
// }
|
259
|
+
}
|
260
|
+
|
261
|
+
});
|
262
|
+
|
263
|
+
})();
|
264
|
+
</script>
|
265
|
+
</polymer-element>
|
266
|
+
|
267
|
+
<hero-transition id="hero-transition"></hero-transition>
|
@@ -0,0 +1,58 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
|
10
|
+
<link href="core-transition-pages.html" rel="import">
|
11
|
+
|
12
|
+
|
13
|
+
<core-style id="list-cascade">
|
14
|
+
polyfill-next-selector { content: ':host.list-cascade > * [list-cascade]'; }
|
15
|
+
:host(.list-cascade) ::content > * [list-cascade] * {
|
16
|
+
-webkit-transition: -webkit-transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascade || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
17
|
+
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascade || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
|
18
|
+
}
|
19
|
+
|
20
|
+
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *'; }
|
21
|
+
::content > .core-selected [list-cascade] * {
|
22
|
+
-webkit-transform: none;
|
23
|
+
transform: none;
|
24
|
+
}
|
25
|
+
|
26
|
+
polyfill-next-selector { content: ':host > *:not(.core-selected) [list-cascade] *'; }
|
27
|
+
::content > *:not(.core-selected) [list-cascade] * {
|
28
|
+
-webkit-transform: translateY(200%);
|
29
|
+
transform: translateY(200%);
|
30
|
+
opacity: 0.2;
|
31
|
+
}
|
32
|
+
|
33
|
+
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(2)'; }
|
34
|
+
::content > .core-selected [list-cascade] *:nth-child(2) {
|
35
|
+
-webkit-transition-delay: 0.1s;
|
36
|
+
transition-delay: 0.1s;
|
37
|
+
}
|
38
|
+
|
39
|
+
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(3)'; }
|
40
|
+
::content > .core-selected [list-cascade] *:nth-child(3) {
|
41
|
+
-webkit-transition-delay: 0.2s;
|
42
|
+
transition-delay: 0.2s;
|
43
|
+
}
|
44
|
+
|
45
|
+
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(4)'; }
|
46
|
+
::content > .core-selected [list-cascade] *:nth-child(4) {
|
47
|
+
-webkit-transition-delay: 0.3s;
|
48
|
+
transition-delay: 0.3s;
|
49
|
+
}
|
50
|
+
|
51
|
+
polyfill-next-selector { content: ':host > .core-selected [list-cascade] *:nth-child(5)'; }
|
52
|
+
::content > .core-selected [list-cascade] *:nth-child(5) {
|
53
|
+
-webkit-transition-delay: 0.4s;
|
54
|
+
transition-delay: 0.4s;
|
55
|
+
}
|
56
|
+
</core-style>
|
57
|
+
|
58
|
+
<core-transition-pages id="list-cascade" activeClass="list-cascade"></core-transition-pages>
|