Skip to content
This repository was archived by the owner on Mar 13, 2018. It is now read-only.

Commit a385ebf

Browse files
author
Yvonne Yip
committed
polymer-overlay: refactor (no animations yet)
1 parent 1297a41 commit a385ebf

3 files changed

Lines changed: 171 additions & 74 deletions

File tree

polymer-overlay/index.html

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel="import" href="polymer-overlay.html">
66
<script src="../../polymer/polymer.js"></script>
77
<style>
8-
polymer-overlay {
8+
.dialog {
99
box-sizing: border-box;
1010
-moz-box-sizing: border-box;
1111
font-family: Arial, Helvetica, sans-serif;
@@ -49,35 +49,51 @@
4949
<label>scrim: <input type="checkbox" onchange="scrimChange(event)"></label>
5050
)
5151
<br>
52-
<polymer-overlay id="dialog" class="polymer-overlay-scale-slideup">
52+
<div id="dialog" class="dialog polymer-overlay-scale-slideup">
53+
<polymer-overlay></polymer-overlay>
5354
<h2>Dialog</h2>
5455
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla sapien sed enim sollicitudin laoreet. Suspendisse suscipit, metus ac volutpat sodales, libero magna semper lacus, molestie fringilla massa orci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.</div><br><br>
5556
<div>Ut aliquam vulputate congue. Vestibulum pretium pretium nulla quis sollicitudin. Praesent lacinia congue erat nec mattis. Fusce commodo lacus est. Duis turpis eros, ultrices sed aliquet non, blandit egestas velit. Integer a augue nec lorem tristique hendrerit. Curabitur imperdiet risus id enim bibendum vestibulum. Integer id magna at arcu faucibus fermentum vel a augue. Sed fringilla venenatis dolor, in blandit magna molestie luctus. Vestibulum dignissim posuere ultrices. Aenean urna nisl, tincidunt vitae iaculis ut, pharetra nec eros.</div><br><br>
5657
<div>
5758
<input placeholder="say something..." autofocus oninput="somethingCheck()"></input><br>
5859
I agree with this wholeheartedly.
59-
<polymer-overlay id="confirmation">
60+
<div id="confirmation" class="dialog">
61+
<polymer-overlay></polymer-overlay>
6062
Thank you.
61-
</polymer-overlay>
63+
</div>
6264
</div><br><br>
6365
<button overlay-toggle>OK</button>
64-
</polymer-overlay>
66+
</div>
6567

6668
<br><br>
6769

6870
<button overlay="#dialog2">Toggle Dialog 2</button>
6971

70-
<polymer-overlay id="dialog2" class="polymer-overlay-shake" autoCloseDisabled="true">
71-
<h2>Dialog 2</h2>
72-
I'm dizzy.
73-
</div><br><br>
72+
<div id="dialog2" class="dialog polymer-overlay-shake" autoCloseDisabled="true">
73+
<polymer-overlay></polymer-overlay>
74+
<div>
75+
<h2>Dialog 2</h2>
76+
I'm dizzy.
77+
</div>
78+
<br><br>
7479
<button overlay-toggle>OK</button>
75-
</polymer-overlay>
80+
</div>
7681
<script>
82+
setupOverlays = function() {
83+
var overlays = document.querySelectorAll('polymer-overlay');
84+
Array.prototype.forEach.call(overlays, function(o) {
85+
o.target = o.parentNode;
86+
});
87+
}
88+
89+
document.addEventListener('WebComponentsReady', function() {
90+
setupOverlays();
91+
});
92+
7793
$ = document.querySelector.bind(document);
7894

7995
somethingCheck = function() {
80-
$('#confirmation').opened = (event.target.value == 'something');
96+
$('#confirmation').querySelector('polymer-overlay').opened = (event.target.value == 'something');
8197
}
8298

8399
changeOpening = function(e) {
@@ -101,7 +117,7 @@ <h2>Dialog 2</h2>
101117
b.addEventListener('tap', function(e) {
102118
var overlay = document.querySelector(e.target.getAttribute('overlay'));
103119
if (overlay) {
104-
overlay.toggle();
120+
overlay.querySelector('polymer-overlay').toggle();
105121
}
106122
})
107123
});

polymer-overlay/polymer-overlay-global.css

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,44 @@
44
* license that can be found in the LICENSE file.
55
*/
66

7+
.polymer-overlay {
8+
position: fixed;
9+
z-index: 10;
10+
outline: none;
11+
display: none;
12+
opacity: 0.99;
13+
-webkit-transition: opacity 0.001s;
14+
transition: opacity 0.001s;
15+
}
16+
17+
/*
18+
The revealed class exists because it's necessary to 'show' a node
19+
before applying a transition. When an overlay is opened, it is
20+
immediately revealed (display: block) and then asynchronously the
21+
opened or closing classes are added.
22+
23+
Because we don't want to actually show the node before a transition
24+
or animation is applied, when the node is
25+
revealed, it is made display: block but visibility: hidden.
26+
It is then made visibility: visible when it is opened.
27+
*/
28+
29+
.polymer-overlay.revealed {
30+
display: block;
31+
visibility: hidden;
32+
}
33+
34+
.polymer-overlay.revealed.opened {
35+
opacity: 1;
36+
display: block;
37+
visibility: visible;
38+
}
39+
40+
.polymer-overlay.revealed.closing {
41+
display: block;
42+
visibility: visible;
43+
}
44+
745
@-webkit-keyframes polymer-overlay-shakeFadeIn {
846
0% {
947
opacity: 0;

0 commit comments

Comments
 (0)