Skip to content

Commit

Permalink
Update to Polymer 1.0
Browse files Browse the repository at this point in the history 
To-Do:
- restore service-worker-cache
- restore animations
- find out why only 3 slides are showing in the demo

Remove some extra div closing tags

We need the children from pages, not the children of this

The demo showed only 3 pages, because pageMax was set to the number of
children in this, not this.pages

Use the platinum sw

Use the platinum sw to restore offline functionality

set the right path for sw

Use same animation as p for pre elements in a google-slide

Make animations work

No use for two way binding in slide author

transitions cleanup

remove the unused property

compute binding for hiding of the buttons
  • Loading branch information
@wburgers
wburgers committed Oct 9, 2015
1 parent 62af907 commit 17044ac
Show file tree
Hide file tree
Showing 18 changed files with 219 additions and 200 deletions.
3 changes: 0 additions & 3 deletions .bowerrc
View file

This file was deleted.

1 change: 1 addition & 0 deletions .gitignore
View file
@@ -0,0 +1 @@
bower_components/
18 changes: 7 additions & 11 deletions bower.json
View file
Expand Up @@ -19,18 +19,14 @@
"/tests/"
],
"dependencies": {
"polymer": "Polymer/polymer#^0.4.2",
"service-worker-cache": "wibblymat/service-worker-cache#~0.0.7",
"core-animated-pages": "Polymer/core-animated-pages#~0.4.2",
"paper-shadow": "Polymer/paper-shadow#~0.4.2",
"font-roboto": "Polymer/font-roboto#~0.4.2",
"paper-fab": "Polymer/paper-fab#~0.4.2",
"core-a11y-keys": "Polymer/core-a11y-keys#~0.4.2"
"polymer": "Polymer/polymer#^1.0.0",
"iron-pages": "PolymerElements/iron-pages#~1.0.0",
"paper-fab": "PolymerElements/paper-fab#~1.0.0",
"iron-a11y-keys": "PolymerElements/iron-a11y-keys#~1.0.0",
"neon-animation": "PolymerElements/neon-animation#~1.0.0",
"platinum-sw": "PolymerElements/platinum-sw#^1.2.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^0.7.3"
},
"resolutions": {
"font-roboto": "^0.4.0"
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
}
}
0 demo.css → demo/demo.css
View file
File renamed without changes.
125 changes: 60 additions & 65 deletions demo.html → demo/demo.html
View file
Expand Up @@ -13,96 +13,94 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>google-slides Demo</title>

<script src="../platform/platform.js"></script>
<link rel="import" href="../google-slides/google-slides.html">
<link rel="import" href="../font-roboto/roboto.html">
<script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="../../google-slides/google-slides.html">
<link rel="import" href="../../font-roboto/roboto.html">
<link rel="stylesheet" href="demo.css">

</head>
<body unresolved>

<google-slides>
<div is="google-slide" class="googlegreen" layout vertical center center-justified>
<div is="google-slide" class="googlegreen layout vertical center center-justified">
<h1>&lt;google-slides&gt;</h1>
<p>
<google-slide-author
avatar="resources/images/addy.jpg"
twitter="@addyosmani"
plus="+AddyOsmani">
<google-slide-author
avatar="resources/images/wburgers.jpg"
twitter="@willemburgers"
plus="+WillemBurgers">
</google-slide-author>
</p>
</div>
<google-slide class="googlered" layout vertical center center-justified>
<google-slide class="googlered layout vertical center center-justified">
<h1>Polymer</h1>
<p>@Polymer</p>
<p><a href="http://polymer-project.org">Polymer Project Docs</a></p>
<p>A presentation by someone</p>
</google-slide>
<google-slide class="googleyellow" layout vertical center center-justified>
<google-slide class="googleyellow layout vertical center center-justified">
<h1>Polymer</h1>
<p>Core Elements</p>
<p>Paper Elements(Material design)</p>
<p>Google APIs</p>
<p>Polymer Designer</p>
<p>Chrome Dev Editor</p>
</google-slide>
<google-slide class="googleblue" layout vertical center center-justified>
<google-slide class="googleblue layout vertical center center-justified">
<video controls autobuffer onclick="this.play();" height="500"><source src="resources/videos/Welcome-to-the-World-of-Tomorrow.mp4" type="video/mp4"></video>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Core Elements</h1>
<p><a target="_blank" href="http://www.polymer-project.org/docs/elements/core-elements.html">www.polymer-project.org/docs/elements/core-elements.html</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<div layout horizontal center-justified>
<div flex one layout vertical start-justified>
<h2>Visual</h2>
<p><code>&lt;core-header-panel&gt;</code><a target="_blank" href="bower_components/core-header-panel/">[^]</a></p>
<p><code>&lt;core-toolbar&gt;</code><a target="_blank" href="bower_components/core-toolbar/">[^]</a></p>
<p><code>&lt;core-drawer-panel&gt;</code><a target="_blank" href="bower_components/core-drawer-panel/">[^]</a></p>
<p><code>&lt;core-menu&gt;</code><a target="_blank" href="bower_components/core-menu/">[^]</a></p>
<p><code>&lt;core-icon&gt;</code><a target="_blank" href="bower_components/core-icon/">[^]</a></p>
<p><code>&lt;core-overlay&gt;</code><a target="_blank" href="bower_components/core-overlay/">[^]</a></p>
<p><code>&lt;core-animated-pages&gt;</code><a target="_blank" href="bower_components/core-animated-pages/">[^]</a></p>
</div>
<div layout vertical start-justified>
<h2>Non-visual</h2>
<p><code>&lt;core-ajax&gt;</code><a target="_blank" href="bower_components/core-ajax/">[^]</a></p>
<p><code>&lt;core-localstorage&gt;</code><a target="_blank" href="../../io2014-codelabs/unbug/PolymerMobileCodelab/">[^]</a></p>
<p><code>&lt;core-range&gt;</code></p>
<p><code>&lt;core-media-query&gt;</code></p>
<p><code>&lt;core-iconset&gt;</code></p>
</div>
<google-slide class="layout vertical center center-justified">
<div class="layout horizontal center-justified">
<div class="flex one layout vertical start-justified">
<h2>Visual</h2>
<p><code>&lt;core-header-panel&gt;</code><a target="_blank" href="bower_components/core-header-panel/">[^]</a></p>
<p><code>&lt;core-toolbar&gt;</code><a target="_blank" href="bower_components/core-toolbar/">[^]</a></p>
<p><code>&lt;core-drawer-panel&gt;</code><a target="_blank" href="bower_components/core-drawer-panel/">[^]</a></p>
<p><code>&lt;core-menu&gt;</code><a target="_blank" href="bower_components/core-menu/">[^]</a></p>
<p><code>&lt;core-icon&gt;</code><a target="_blank" href="bower_components/core-icon/">[^]</a></p>
<p><code>&lt;core-overlay&gt;</code><a target="_blank" href="bower_components/core-overlay/">[^]</a></p>
<p><code>&lt;core-animated-pages&gt;</code><a target="_blank" href="bower_components/core-animated-pages/">[^]</a></p>
</div>
<div class="layout vertical start-justified">
<h2>Non-visual</h2>
<p><code>&lt;core-ajax&gt;</code><a target="_blank" href="bower_components/core-ajax/">[^]</a></p>
<p><code>&lt;core-localstorage&gt;</code><a target="_blank" href="../../io2014-codelabs/unbug/PolymerMobileCodelab/">[^]</a></p>
<p><code>&lt;core-range&gt;</code></p>
<p><code>&lt;core-media-query&gt;</code></p>
<p><code>&lt;core-iconset&gt;</code></p>
</div>
</div>
</google-slide>
<google-slide layout vertical center center-justified>
<h1>Material design with Polymer</h1>
<p>Application layout</p>
<p>Icons</p>
<p>Material controls</p>
<p>Dialogs, snackbars, and toasts</p>
<p>Material effects<p>
<p>Transitions</p>
<p>Scrolling techniques</p>
</div>
</google-slide>
<google-slide layout vertical center center-justified>
<div layout vertical center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Material design with Polymer</h1>
<p>Application layout</p>
<p>Icons</p>
<p>Material controls</p>
<p>Dialogs, snackbars, and toasts</p>
<p>Material effects<p>
<p>Transitions</p>
<p>Scrolling techniques</p>
</google-slide>
<google-slide class="layout vertical center center-justified">
<div class="layout vertical center-justified">
<h1>Application layout<a target="_blank" href="http://www.polymer-project.org/docs/elements/layout-elements.html">[^]</a></h1>
<p><code>&lt;core-header-panel&gt;</code><a target="_blank" href="bower_components/core-header-panel/">[^]</a></p>
<p><code>&lt;core-toolbar&gt;</code><a target="_blank" href="bower_components/core-toolbar/">[^]</a></p>
<p><code>&lt;core-drawer-panel&gt;</code><a target="_blank" href="bower_components/core-drawer-panel/">[^]</a></p>
<p><code>&lt;core-scaffold&gt;</code><a target="_blank" href="bower_components/core-scaffold/">[^]</a></p>
<p><code>&lt;core-toolbar&gt;</code><a target="_blank" href="bower_components/core-toolbar/">[^]</a></p>
<p><code>&lt;core-drawer-panel&gt;</code><a target="_blank" href="bower_components/core-drawer-panel/">[^]</a></p>
<p><code>&lt;core-scaffold&gt;</code><a target="_blank" href="bower_components/core-scaffold/">[^]</a></p>
</div>
</google-slide>
<google-slide layout vertical center center-justified>
<div layout vertical center-justified>
<google-slide class="layout vertical center center-justified">
<div class="layout vertical center-justified">
<h1>Icons<a target="_blank" href="http://www.polymer-project.org/docs/elements/icons.html">[^]</a></h1>
<p><code>&lt;core-icon&gt;</code><a target="_blank" href="bower_components/core-icon/">[^]</a></p>
</div>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Material controls</h1>
<p><code>&lt;paper-button&gt;</code><a target="_blank" href="bower_components/paper-button/">[^]</a></p>
<p><code>&lt;paper-checkbox&gt;</code><a target="_blank" href="bower_components/paper-checkbox/">[^]</a></p>
Expand All @@ -114,31 +112,30 @@ <h1>Material controls</h1>
<p><code>&lt;paper-slider&gt;</code><a target="_blank" href="bower_components/paper-slider/">[^]</a></p>
<p><code>&lt;paper-progress&gt;</code><a target="_blank" href="bower_components/paper-progress/">[^]</a></p>
<p><code>&lt;paper-input&gt;</code><a target="_blank" href="bower_components/paper-input/">[^]</a></p>
</div>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Dialogs, snackbars, and toasts</h1>
<p><code>&lt;paper-dialog&gt;</code><a target="_blank" href="bower_components/paper-dialog/">[^]</a></p>
<p><code>&lt;paper-toast&gt;</code><a target="_blank" href="bower_components/paper-toast/">[^]</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Material effects</h1>
<p><code>&lt;paper-ripple&gt;</code><a target="_blank" href="bower_components/paper-ripple/">[^]</a></p>
<p><code>&lt;paper-shadow&gt;</code><a target="_blank" href="bower_components/paper-shadow/">[^]</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Transitions</h1>
<p><code>&lt;core-animated-pages&gt;</code><a target="_blank" href="bower_components/core-animated-pages/">[^]</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Scrolling techniques</h1>
<p><code>&lt;core-scroll-header-panel&gt;</code><a target="_blank" href="bower_components/core-scroll-header-panel/">[^]</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Paper Elements<a target="_blank" href="bower_components/paper-elements/demo.html">[^]</a></h1>
<p><a target="_blank" href="http://www.polymer-project.org/docs/elements/paper-elements.html">www.polymer-project.org/docs/elements/paper-elements.html</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Topeka App<a target="_blank" href="../Topeka/topeka/">[^]</a></h1>
<p><a target="_blank" href="http://www.polymer-project.org/docs/elements/paper-elements.html">www.polymer-project.org/docs/elements/paper-elements.html</a></p>
<h1>Material Playground<a target="_blank" href="../MaterialPlayground/material-playground/">[^]</a></h1>
Expand All @@ -148,7 +145,7 @@ <h1>Paper Calculator<a target="_blank" href="../PaperCalculator/paper-calculator
<h1>Polymer Chrome App</h1>
<p><a target="_blank" href="https://github.com/PolymerLabs/polymerchromeapp">https://github.com/PolymerLabs/polymerchromeapp</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Google APIs</h1>
<p><code>&lt;google-signin&gt;</code><a target="_blank" href="http://127.0.0.1:51792/PolymerDriveCodelab/index.html">[^]</a></p>
<p><code>&lt;google-map&gt;</code><a target="_blank" href="http://127.0.0.1:51792/PolymerMapsCodelab/index.html">[^]</a></p>
Expand All @@ -158,27 +155,25 @@ <h1>Google APIs</h1>
<p><code>&lt;google-calendar&gt;</code></p>
<p><a href="https://github.com/GoogleWebComponents" target="_blank">https://github.com/GoogleWebComponents</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Custom Elements</h1>
<p><a href="http://customelements.io/" target="_blank">http://customelements.io/</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Polymer Designer<a target="_blank" href="../Designer/designer/">[^]</a></h1>
<p><a target="_blank" href="http://www.polymer-project.org/tools/designer/">www.polymer-project.org/tools/designer/</a></p>
<h1>Mobile UI Elements</h1>
<p><a href="https://github.com/ForceDotComLabs/mobile-ui-elements" target="_blank">https://github.com/ForceDotComLabs/mobile-ui-elements</a></p>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<h1>Chrome Dev Editor</h1>
<p><a target="_blank" href="https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=en">https://chrome.google.com/webstore/detail/chrome-dev-editor-develop/pnoffddplpippgcfjdhbmhkofpnaalpg?hl=en</a></p>
</div>
</google-slide>
<google-slide layout vertical center center-justified>
<google-slide class="layout vertical center center-justified">
<video controls autobuffer onclick="this.play();" height="500"><source src="resources/videos/Welcome-to-the-World-of-Tomorrow.mp4" type="video/mp4"></video>
<p><a target="_blank" href="http://www.polymer-project.org/">http://www.polymer-project.org</a></p>
<p><a target="_blank" href="https://github.com/Polymer">https://github.com/Polymer</a></p>
</google-slide>
</google-slides>

</body>
</html>
0 resources/images/MIHTool.png → demo/resources/images/MIHTool.png
View file
File renamed without changes
0 resources/images/addy.jpg → demo/resources/images/addy.jpg
View file
File renamed without changes
0 resources/images/hiring.png → demo/resources/images/hiring.png
View file
File renamed without changes
0 resources/images/p-logo.svg → demo/resources/images/p-logo.svg
View file
File renamed without changes
0 resources/images/unbug.jpeg → demo/resources/images/unbug.jpeg
View file
File renamed without changes
Binary file added demo/resources/images/wburgers.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 ...deos/Welcome-to-the-World-of-Tomorrow.mp4 → ...deos/Welcome-to-the-World-of-Tomorrow.mp4
View file
File renamed without changes.
64 changes: 41 additions & 23 deletions google-slide-author.html
View file
@@ -1,31 +1,30 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<!--
A social card with information for your talk.
##### Example
<google-slide-author
avatar="resources/images/addy.jpg"
twitter="@addyosmani"
<google-slide-author
avatar="resources/images/addy.jpg"
twitter="@addyosmani"
plus="+AddyOsmani">
</google-slide-author>
@element google-slide-author.
@blurb A social card with information for your talk.
@status alpha
-->
<polymer-element name="google-slide-author" attributes="plus twitter avatar" noscript>
<template>
<style>
<dom-module id="google-slide-author">
<style>
:host {
display: block;
}

:host .twitter {
font-size: 0.8em;
}
}

:host .plus {
line-height: 40px;
Expand All @@ -36,21 +35,40 @@
width: 90px;
border-radius: 50%;
margin: 25px;
}
}
</style>
<div layout horizontal>
<div >
<template if="{{avatar.length > 0}}">
<img src="{{avatar}}">
</template>
</div>

<div flex>
<p class="plus">{{plus}}</p>
<p class="twitter">{{twitter}}</p>
</div>
</div>

<template>
<div class="layout horizontal">
<div>
<template is="dom-if" if="{{_ifAvatar(avatar)}}">
<img src="{{avatar}}">
</template>
</div>

<div class="flex">
<p class="plus">[[plus]]</p>
<p class="twitter">[[twitter]]</p>
</div>
</div>
</template>
</polymer-element>

<script>
Polymer({
is: 'google-slide-author',
properties: {
avatar: {
type: String
},
plus: {
type: String
},
twitter: {
type: String
}
},
_ifAvatar: function (avatar) {
return avatar.length > 0;
}
});
</script>
</dom-module>
18 changes: 11 additions & 7 deletions google-slide.html
View file
@@ -1,4 +1,5 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<!--
A single slide entry in a `google-slides` deck. You can either define
Expand All @@ -12,12 +13,11 @@
@element google-slide
@blurb A single slide entry in a `google-slides` deck.
@status alpha
-->
<polymer-element name="google-slide" noscript>
<template>
<style>

<dom-module id="google-slide">
<style>
:host {
display: block;
}
Expand All @@ -42,12 +42,16 @@

:host section.nav > div:first-child {
padding-right: 0;
}
}
</style>
<template>
<section>
<div layout vertical center-justified>
<div class="layout vertical center-justified">
<content></content>
</div>
</section>
</template>
</polymer-element>
<script>
Polymer({ is: 'google-slide' });
</script>
</dom-module>

0 comments on commit 17044ac

Please sign in to comment.