This repository has been archived by the owner on Mar 13, 2018. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
polymer-overlay: move from toolkit-ui
- Loading branch information
Yvonne Yip
committed
Jul 9, 2013
1 parent
9f1b187
commit d3f92ce
Showing
4 changed files
with
552 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>polymer-overlay</title> | ||
| <link rel="import" href="polymer-overlay.html"> | ||
| <script src="../../polymer/polymer.js"></script> | ||
| <style> | ||
| polymer-overlay { | ||
| box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| font-size: 13px; | ||
| -webkit-user-select: none; | ||
| -moz-user-select: none; | ||
| overflow: hidden; | ||
| background: white; | ||
| padding:30px 42px; | ||
| outline: 1px solid rgba(0,0,0,0.2); | ||
| box-shadow: 0 4px 16px rgba(0,0,0,0.2); | ||
| } | ||
|
|
||
| #dialog, #dialog2 { | ||
| top: 72px; | ||
| left: 50%; | ||
| width: 512px; | ||
| margin-left: -256px; | ||
| } | ||
|
|
||
| #confirmation { | ||
| position: absolute; | ||
| left: 50%; | ||
| top: 100px; | ||
| text-align: center; | ||
| width: 150px; | ||
| margin-left: -75px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <button overlay="#dialog">Toggle Dialog</button> | ||
| ( open styling: | ||
| <select onchange="changeOpening(event)"> | ||
| <option>polymer-overlay-scale-slideup</option> | ||
| <option>polymer-overlay-shake</option> | ||
| <option>polymer-overlay-fade</option> | ||
| <option>none</option> | ||
| </select>, | ||
| <label>modal: <input type="checkbox" onchange="modalChange(event)"></label> | ||
| <label>scrim: <input type="checkbox" onchange="scrimChange(event)"></label> | ||
| ) | ||
| <br> | ||
| <polymer-overlay id="dialog" class="polymer-overlay-scale-slideup"> | ||
| <h2>Dialog</h2> | ||
| <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> | ||
| <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> | ||
| <div> | ||
| <input placeholder="say something..." autofocus oninput="somethingCheck()"></input><br> | ||
| I agree with this wholeheartedly. | ||
| <polymer-overlay id="confirmation"> | ||
| Thank you. | ||
| </polymer-overlay> | ||
| </div><br><br> | ||
| <button overlay-toggle>OK</button> | ||
| </polymer-overlay> | ||
|
|
||
| <br><br> | ||
|
|
||
| <button overlay="#dialog2">Toggle Dialog 2</button> | ||
|
|
||
| <polymer-overlay id="dialog2" class="polymer-overlay-shake" autoCloseDisabled="true"> | ||
| <h2>Dialog 2</h2> | ||
| I'm dizzy. | ||
| </div><br><br> | ||
| <button overlay-toggle>OK</button> | ||
| </polymer-overlay> | ||
| <script> | ||
| $ = document.querySelector.bind(document); | ||
|
|
||
| somethingCheck = function() { | ||
| $('#confirmation').opened = (event.target.value == 'something'); | ||
| } | ||
|
|
||
| changeOpening = function(e) { | ||
| var s = e.target.selectedOptions[0]; | ||
| if (s) { | ||
| dialog.className = dialog.className.replace(/g-[^\s]*/, '') | ||
| dialog.classList.add(s.textContent); | ||
| } | ||
| } | ||
|
|
||
| modalChange = function(e) { | ||
| dialog.autoCloseDisabled = e.target.checked; | ||
| } | ||
|
|
||
| scrimChange = function(e) { | ||
| dialog.scrim = e.target.checked; | ||
| } | ||
|
|
||
| var overlayButtons = document.querySelectorAll('button[overlay]'); | ||
| Array.prototype.forEach.call(overlayButtons, function(b) { | ||
| b.addEventListener('tap', function(e) { | ||
| var overlay = document.querySelector(e.target.getAttribute('overlay')); | ||
| if (overlay) { | ||
| overlay.toggle(); | ||
| } | ||
| }) | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /* | ||
| * Copyright 2013 The Polymer Authors. All rights reserved. | ||
| * Use of this source code is governed by a BSD-style | ||
| * license that can be found in the LICENSE file. | ||
| */ | ||
|
|
||
| @-webkit-keyframes polymer-overlay-shakeFadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| -webkit-transform: translateX(0); | ||
| } | ||
| 10% { | ||
| -webkit-transform: translateX(-50px); | ||
| } | ||
| 30% { | ||
| -webkit-transform: translateX(50px); | ||
| } | ||
| 50% { | ||
| -webkit-transform: translateX(-25px); | ||
| } | ||
| 70% { | ||
| -webkit-transform: translateX(25px); | ||
| } | ||
| 90% { | ||
| -webkit-transform: translateX(-13px); | ||
| } | ||
| 100% { | ||
| -webkit-transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @keyframes polymer-overlay-shakeFadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: translateX(0); | ||
| } | ||
| 10% { | ||
| transform: translateX(-50px); | ||
| } | ||
| 30% { | ||
| transform: translateX(50px); | ||
| } | ||
| 50% { | ||
| transform: translateX(-25px); | ||
| } | ||
| 70% { | ||
| transform: translateX(25px); | ||
| } | ||
| 90% { | ||
| transform: translateX(-13px); | ||
| } | ||
| 100% { | ||
| transform: translateX(0); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @-webkit-keyframes polymer-overlay-shakeFadeOut { | ||
| 0% { | ||
| opacity: 1; | ||
| -webkit-transform: translateX(0); | ||
| } | ||
| 10% { | ||
| -webkit-transform: translateX(-50px); | ||
| } | ||
| 30% { | ||
| -webkit-transform: translateX(50px); | ||
| } | ||
| 100% { | ||
| -webkit-transform: translateX(-100%); | ||
| opacity: 0; | ||
| } | ||
| } | ||
|
|
||
| @keyframes polymer-overlay-shakeFadeOut { | ||
| 0% { | ||
| opacity: 1; | ||
| transform: translateX(0); | ||
| } | ||
| 10% { | ||
| transform: translateX(-50px); | ||
| } | ||
| 30% { | ||
| transform: translateX(50px); | ||
| } | ||
| 100% { | ||
| transform: translateX(-100%); | ||
| opacity: 0; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| /* | ||
| * Copyright 2013 The Polymer Authors. All rights reserved. | ||
| * Use of this source code is governed by a BSD-style | ||
| * license that can be found in the LICENSE file. | ||
| */ | ||
|
|
||
| /* | ||
| TODO(sorvell): include a reasonable set of default overlay opening | ||
| animations. What's here right now is ad hoc. | ||
| */ | ||
|
|
||
| /* | ||
| Styling a polymer-overlay: | ||
| 1. use the 'opened' class to style the overlay when it is open. | ||
| A transition or animation can be applied to animate the overlay into place. | ||
| Note: there's no need to set the display property of an overlay. That's | ||
| managed automatically. | ||
| 2. To apply a different animation when the overlay closes, use the | ||
| 'closing' class. | ||
| */ | ||
|
|
||
| /* Note that trbl: 0 + position: fixed will not 'fit to window' | ||
| if a transform is applied to a parent of this element. That parent | ||
| becomes the containing block; see: | ||
| http://dev.w3.org/csswg/css3-transforms/#transform-rendering | ||
| We address this by using script based positioning =( | ||
| */ | ||
| @host { | ||
| * { | ||
| position: fixed; | ||
| z-index: 10; | ||
| outline: none; | ||
| display: none; | ||
| opacity: 0.99; | ||
| -webkit-transition: opacity 0.001s; | ||
| transition: opacity 0.001s; | ||
| } | ||
|
|
||
| /* | ||
| The revealed class exists because it's necessary to 'show' a node | ||
| before applying a transition. When an overlay is opened, it is | ||
| immediately revealed (display: block) and then asynchronously the | ||
| opened or closing classes are added. | ||
| Because we don't want to actually show the node before a transition | ||
| or animation is applied, when the node is | ||
| revealed, it is made display: block but visibility: hidden. | ||
| It is then made visibility: visible when it is opened. | ||
| */ | ||
|
|
||
| .revealed { | ||
| display: block; | ||
| visibility: hidden; | ||
| } | ||
|
|
||
| .revealed.opened { | ||
| opacity: 1; | ||
| display: block; | ||
| visibility: visible; | ||
| } | ||
|
|
||
| .revealed.closing { | ||
| display: block; | ||
| visibility: visible; | ||
| } | ||
|
|
||
| /* | ||
| When an animation is detected (via an animationstart event) this class | ||
| is applied to remove any transition. This ensures only 1 animation end event | ||
| will be processed. | ||
| NOTE: if a rule such as a media query changes an overlay from using a css | ||
| animation to a transition, the animation class must be altered or removed. | ||
| */ | ||
| .animation { | ||
| -webkit-transition: none; | ||
| transition: none; | ||
| } | ||
|
|
||
| .polymer-overlay-fade { | ||
| opacity: 0; | ||
| -webkit-transition: all 0.218s; | ||
| transition: all 0.218s; | ||
| } | ||
|
|
||
| .polymer-overlay-fade.opened { | ||
| opacity: 1; | ||
| } | ||
|
|
||
| .polymer-overlay-scale-slideup { | ||
| opacity: 0.0; | ||
| -webkit-transform: scale(1.05); | ||
| transform: scale(1.05); | ||
| } | ||
|
|
||
| .polymer-overlay-scale-slideup.opened { | ||
| opacity: 1.0; | ||
| -webkit-transform: scale(1.0); | ||
| transform: scale(1.0); | ||
| -webkit-transition: all 0.218s; | ||
| transition: all 0.218s; | ||
| } | ||
|
|
||
| .polymer-overlay-scale-slideup.closing { | ||
| opacity: 0; | ||
| -webkit-transform: translateY(-100%); | ||
| transform: translateY(-100%); | ||
| -webkit-transition: all 0.4s; | ||
| transition: all 0.4s; | ||
| } | ||
|
|
||
| .polymer-overlay-shake.opened { | ||
| -webkit-animation-duration: 0.5s; | ||
| -webkit-animation-fill-mode: both; | ||
| -webkit-animation-name: polymer-overlay-shakeFadeIn; | ||
| animation-duration: 0.5s; | ||
| animation-fill-mode: both; | ||
| animation-name: polymer-overlay-shakeFadeIn; | ||
| } | ||
|
|
||
| .polymer-overlay-shake.closing { | ||
| -webkit-animation-duration: 0.5s; | ||
| -webkit-animation-fill-mode: both; | ||
| -webkit-animation-name: polymer-overlay-shakeFadeOut; | ||
| animation-duration: 0.5s; | ||
| animation-fill-mode: both; | ||
| animation-name: polymer-overlay-shakeFadeOut; | ||
| } | ||
| } |
Oops, something went wrong.