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

Unified Diff: third_party/polymer/components-chromium/core-pages/demo.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 3 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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components-chromium/core-pages/demo.html
diff --git a/third_party/polymer/components-chromium/core-pages/demo.html b/third_party/polymer/components-chromium/core-pages/demo.html
new file mode 100644
index 0000000000000000000000000000000000000000..a9806535d9df7fd9e7336feb8f21586188a01f80
--- /dev/null
+++ b/third_party/polymer/components-chromium/core-pages/demo.html
@@ -0,0 +1,130 @@
+<!doctype html>
+<html>
+<head>
+
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title>core-pages</title>
+
+ <script src="../platform/platform.js"></script>
+
+ <link rel="import" href="core-pages.html">
+
+ <style>
+
+ html, body {
+ height: 100%;
+ }
+
+ body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: sans-serif;
+ }
+
+ core-pages {
+ width: 300px;
+ height: 300px;
+ border: 1px solid black;
+ -webkit-user-select: none;
+ border-radius: 5px;
+ }
+
+ core-pages > div {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: inherit;
+ }
+
+ core-pages.fancy {
+ border: none;
+ margin-left: 2em;
+ }
+
+ core-pages.fancy > div {
+ opacity: 0;
+ -webkit-transform: translate3d(-100px, 0, 0) scale(0.9);
+ transform: translate3d(-100px, 0, 0) scale(0.9);
+ transition: all 1s cubic-bezier(.03,.56,.7,.98);
+ color: white;
+ }
+
+ core-pages.fancy > div:nth-child(1) {
+ background-color: red;
+ }
+
+ core-pages.fancy > div:nth-child(2) {
+ background-color: green;
+ }
+
+ core-pages.fancy > div:nth-child(3) {
+ background-color: blue;
+ }
+
+ core-pages.fancy > div:nth-child(4) {
+ background-color: purple;
+ }
+
+ core-pages.fancy > div:nth-child(5) {
+ background-color: black;
+ }
+
+ core-pages.fancy .core-selected + div {
+ -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
+ transform: translate3d(100px, 0, 0) scale(1);
+ }
+
+ core-pages.fancy .core-selected {
+ opacity: 1;
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ core-pages.fancy div.begin {
+ -webkit-transform: translate3d(100px, 0, 0) scale(0.9);
+ transform: translate3d(100px, 0, 0) scale(0.9);
+ }
+
+ </style>
+
+</head>
+<body unresolved>
+
+ <core-pages id="first" selected="0">
+ <div>One</div>
+ <div>Two</div>
+ <div>Three</div>
+ <div>Four</div>
+ <div>Five</div>
+ </core-pages>
+
+ <core-pages class="fancy" selected="0">
+ <div>One</div>
+ <div>Two</div>
+ <div>Three</div>
+ <div>Four</div>
+ <div>Five</div>
+ </core-pages>
+
+ <script>
+ document.querySelector('#first').onclick = function(e) {
+ this.selected = (this.selected + 1) % this.items.length;
+ };
+
+ document.querySelector('core-pages.fancy').onclick = function(e) {
+ this.selected = (this.selected + 1) % this.items.length;
+ this.async(function() {
+ if (this.selectedIndex == 0) {
+ this.selectedItem.classList.remove('begin');
+ } else if (this.selectedIndex == this.items.length - 1) {
+ this.items[0].classList.add('begin');
+ }
+ });
+ };
+ </script>
+
+</body>
+</html>

Powered by Google App Engine
This is Rietveld 408576698