Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(40)

Side by Side Diff: pkg/polymer/lib/elements/polymer-overlay/demo.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>polymer-overlay</title>
5 <link rel="import" href="polymer-overlay.html">
6 <script src="../platform/platform.js"></script>
7 <style>
8 .dialog {
9 box-sizing: border-box;
10 -moz-box-sizing: border-box;
11 font-family: Arial, Helvetica, sans-serif;
12 font-size: 13px;
13 -webkit-user-select: none;
14 -moz-user-select: none;
15 overflow: hidden;
16 background: white;
17 padding:30px 42px;
18 outline: 1px solid rgba(0,0,0,0.2);
19 box-shadow: 0 4px 16px rgba(0,0,0,0.2);
20 }
21
22 #dialog, #dialog2 {
23 top: 72px;
24 left: 50%;
25 width: 512px;
26 margin-left: -256px;
27 }
28
29 #confirmation {
30 position: absolute;
31 left: 50%;
32 top: 100px;
33 text-align: center;
34 width: 150px;
35 margin-left: -75px;
36 }
37 </style>
38 </head>
39 <body unresolved>
40 <polymer-element name="x-dialog" attributes="opened autoCloseDis abled">
41 <template>
42 <style>
43 :host {
44 box-sizing: border-box;
45 -moz-box-sizing: border-box;
46 font-family: Arial, Helvetica, s ans-serif;
47 font-size: 13px;
48 -webkit-user-select: none;
49 -moz-user-select: none;
50 overflow: hidden;
51 background: white;
52 padding:30px 42px;
53 outline: 1px solid rgba(0,0,0,0. 2);
54 box-shadow: 0 4px 16px rgba(0,0, 0,0.2);
55 }
56 </style>
57 <polymer-overlay id="overlay" opened="{{opened}} " autoCloseDisabled="{{autoCloseDisabled}}"></polymer-overlay>
58 <content></content>
59 </template>
60 <script>
61 Polymer('x-dialog', {
62 ready: function() {
63 this.$.overlay.target = this;
64 },
65 toggle: function() {
66 this.$.overlay.toggle();
67 }
68 });
69 </script>
70 </polymer-element>
71 <button overlay="#dialog">Toggle Dialog</button>
72 ( open styling:
73 <select onchange="changeOpening(event)">
74 <option>polymer-overlay-scale-slideup</option>
75 <option>polymer-overlay-shake</option>
76 <option>polymer-overlay-fade</option>
77 <option>none</option>
78 </select>,
79 <label>modal: <input type="checkbox" onchange="modalChange(event )"></label>
80 <label>scrim: <input type="checkbox" onchange="scrimChange(event )"></label>
81 )
82 <br>
83 <x-dialog id="dialog" class="dialog polymer-overlay-scale-slideu p">
84 <h2>Dialog</h2>
85 <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 o rci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.</div><br><br>
86 <div>Ut aliquam vulputate congue. Vestibulum pretium pre tium nulla quis sollicitudin. Praesent lacinia congue erat nec mattis. Fusce com modo lacus est. Duis turpis eros, ultrices sed aliquet non, blandit egestas veli t. Integer a augue nec lorem tristique hendrerit. Curabitur imperdiet risus id e nim bibendum vestibulum. Integer id magna at arcu faucibus fermentum vel a augue . Sed fringilla venenatis dolor, in blandit magna molestie luctus. Vestibulum di gnissim posuere ultrices. Aenean urna nisl, tincidunt vitae iaculis ut, pharetra nec eros.</div><br><br>
87 <div>
88 <input placeholder="say something..." autofocus oninput="somethingCheck()"></input><br>
89 I agree with this wholeheartedly.
90 <x-dialog id="confirmation" class="dialog">
91 Thank you.
92 </x-dialog>
93 </div><br><br>
94 <button overlay-toggle>OK</button>
95 </x-dialog>
96
97 <br><br>
98
99 <button overlay="#dialog2">Toggle Dialog 2</button>
100
101 <x-dialog id="dialog2" class="dialog polymer-overlay-shake" auto CloseDisabled="true">
102 <div>
103 <h2>Dialog 2</h2>
104 I'm dizzy.
105 </div>
106 <br><br>
107 <button overlay-toggle>OK</button>
108 </x-dialog>
109 <script>
110 $ = document.querySelector.bind(document);
111
112 somethingCheck = function() {
113 $('#confirmation').opened = (event.target.value == 'something');
114 }
115
116 changeOpening = function(e) {
117 var s = e.target.selectedOptions[0];
118 if (s) {
119 dialog.className = dialog.className.repl ace(/polymer-[^\s]*/, '')
120 dialog.classList.add(s.textContent);
121 }
122 }
123
124 modalChange = function(e) {
125 dialog.autoCloseDisabled = e.target.checked;
126 }
127
128 scrimChange = function(e) {
129 dialog.scrim = e.target.checked;
130 }
131
132 var overlayButtons = document.querySelectorAll('button[o verlay]');
133 Array.prototype.forEach.call(overlayButtons, function(b) {
134 b.addEventListener('tap', function(e) {
135 document.querySelector(e.target.getAttri bute('overlay')).toggle();
136 })
137 });
138 </script>
139 </body>
140 </html>
OLDNEW
« no previous file with comments | « pkg/polymer/lib/elements/polymer-overlay/bower.json ('k') | pkg/polymer/lib/elements/polymer-overlay/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698