Forked from Addy Osmani's Pen Polymer CodePen starter.
A Pen by Captain Anonymous on CodePen.
<!-- | |
All the Polymer paper-* and core-* elements have been imported here for you. Prototype away! | |
--> | |
<!-- Let's build a countdown clock --> | |
<paper-tabs selected="0"> | |
<paper-tab onclick="stuff(0);">Timer</paper-tab> | |
<paper-tab onclick="stuff(1);">Countdown</paper-tab> | |
<paper-tab onclick="stuff(2);">Clock</paper-tab> | |
</paper-tabs> | |
<!-- | |
<select onchange="change();"> | |
<option value="cross-fade-all" selected>cross-fade-all</option> | |
<option value="slide-from-right">slide-from-right</option> | |
</select> | |
--> | |
<core-animated-pages transitions="slide-from-right"> | |
<section> | |
<div layout vertical center center-justified style="background:#B4E0E1;"> | |
<div><flip-clock displayMode="timer" commandButtons="true"></flip-clock></div> | |
</div> | |
</section> | |
<section> | |
<div layout vertical center center-justified style="background:#F9B24F;"> | |
<div><flip-clock displayMode="countdown" startFrom="20" commandButtons="true"></flip-clock></div> | |
</div> | |
</section> | |
<section> | |
<div layout vertical center center-justified style="background:#E61875"> | |
<div><flip-clock></flip-clock></div> | |
</div> | |
</section> | |
<!-- | |
<section> | |
<div layout vertical center center-justified style="background:orange;"> | |
<div>4</div> | |
</div> | |
</section> | |
<section> | |
<div layout vertical center center-justified style="background:green;"> | |
<div>5</div> | |
</div> | |
</section> | |
--> | |
</core-animated-pages> | |
<!--- More custom stuff --> | |
<!-- | |
A flip clock, timer and countdown made with Polymer | |
##### Example | |
<flip-clock></flip-clock> | |
@element flip-clock | |
@blurb A flip clock, timer and countdown made with Polymer | |
@status alpha | |
@homepage http://Granze.github.io/flip-clock | |
--> | |
<polymer-element name="flip-clock" attributes="displayMode commandButtons showSeconds startFrom auto"> | |
<template> | |
<style> | |
:host { | |
display: block; | |
} | |
:host #clock { | |
font-size: 0; | |
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | |
font-weight: bold; | |
} | |
:host #clock * { | |
font-size: 70px; | |
} | |
/* | |
:host #clock > span { | |
position: relative; | |
display: inline-block; | |
margin-right: 10px; | |
padding: 5px 15px; | |
border-radius: 4px; | |
color: #fff; | |
box-shadow: 1px 1px 1px #555; | |
background-color: #333; | |
background: -webkit-linear-gradient(top, #333 0%, #444 50%, #333 51%, #222 100%); | |
background: linear-gradient(to bottom, #333 0%,#444 50%,#333 51%,#222 100%); | |
} | |
:host #clock > span:after { | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 50%; | |
width: 100%; | |
height: 3px; | |
background-color: #111; | |
} | |
:host #clock > b { | |
color: #333; | |
margin-right: 10px; | |
} | |
:host .btn { | |
margin: 20px 10px 10px 10px; | |
padding: 5px 10px; | |
border: 1px solid #000; | |
border-radius: 2px; | |
cursor: pointer; | |
color: #dedede; | |
background-color: #333; | |
} | |
*/ | |
:host paper-button { | |
font-size: 20px; | |
} | |
:host paper-button.colored { | |
color: #4285f4; | |
fill: #4285f4; | |
} | |
:host paper-button[raisedButton].colored { | |
background: #4285f4; | |
color: #fff; | |
} | |
:host paper-button[raisedButton].colored #ripple, | |
:hsot paper-button[raisedButton].colored::shadow #ripple { | |
color: #2a56c6; | |
} | |
:host paper-button[raisedButton].colored #focusBg, | |
:host paper-button[raisedButton].colored::shadow #focusBg { | |
background: #3367d6; | |
} | |
</style> | |
<content> | |
<div id="clock"> | |
<span id="hours0">{{time[0]}}</span><span id="hours1">{{time[1]}}</span> | |
<b>:</b> | |
<span id="minutes0">{{time[2]}}</span><span id="minutes1">{{time[3]}}</span> | |
<template if="{{showSeconds}}"> | |
<b>:</b> | |
<span id="seconds0">{{time[4]}}</span><span id="seconds1">{{time[5]}}</span> | |
</template> | |
</div> | |
<template if="{{displayMode == 'countdown'}}"> | |
<input type="number" value="{{time}}"> | |
<!-- | |
<input type="number" value="{{time[0]}}"><input type="number" value="{{time[1]}}">: | |
<input type="number" value="{{time[2]}}"><input type="number" value="{{time[3]}}">: | |
<input type="number" value="{{time[4]}}"><input type="number" value="{{time[5]}}"> | |
--> | |
</template> | |
<template if="{{commandButtons && displayMode !== 'clock'}}"> | |
<!-- | |
<button class="toggle btn" on-click="{{startCount}}" disabled?="{{isRunning}}">Start </button> | |
--> | |
<paper-button raisedButton class="colored" on-click="{{startCount}}" disabled?="{{isRunning}}" label="start"></paper-button> | |
<!-- | |
<button class="toggle btn" on-click="{{stopCount}}">Stop</button> | |
--> | |
<paper-button raisedButton class="colored" on-click="{{stopCount}}" label="Stop"></paper-button> | |
<!-- | |
<button class="reset btn" on-click="{{resetCount}}">Reset</button>--> | |
<paper-button raisedButton class="colored" on-click="{{resetCount}}">Reset</paper-button> | |
</template> | |
</content> | |
</template> | |
<script> | |
Polymer('flip-clock', { | |
/** | |
* The `displayMode` attribute determine the kind of clock to display. | |
* | |
* @attribute displayMode | |
* @type string | |
* @default clock | |
* @options clock, countdown, timer | |
*/ | |
displayMode: 'clock', | |
/** | |
* Display start/stop and reset buttons | |
* | |
* @attribute commandButtons | |
* @type bool | |
*/ | |
commandButtons: false, | |
/** | |
* Show or hide seconds | |
* | |
* @attribute showSeconds | |
* @type bool | |
* @default true | |
*/ | |
showSeconds: true, | |
/** | |
* Set the minutes to start from for the countdown mode | |
* | |
* @attribute startFrom | |
* @type int | |
* @default null | |
*/ | |
startFrom: null, | |
/** | |
* String containing the digits displayed in the flip clock | |
* | |
* @attribute time | |
* @type string | |
* @default '000000' | |
*/ | |
time: '000000', | |
/** | |
* Set the hours, minutes and seconds in the timer | |
* | |
* @attribute timer | |
* @type string | |
*/ | |
timer: null, | |
/** | |
* Auto start timer and/or countdown | |
* | |
* @attribute auto | |
* @type bool | |
*/ | |
auto: false, | |
/** | |
* Track if the timer (or the countdown) is running or not | |
* | |
* @attribute isRunning | |
* @type bool | |
*/ | |
isRunning: false, | |
/** | |
* The `createClock` method start a clock that display the current time. | |
* | |
* @method createClock | |
*/ | |
createClock: function() { | |
this.time = moment().format('HHmmss'); | |
this.async(this.createClock, null, 1000); | |
}, | |
/** | |
* The `createTimer` method create a timer | |
* | |
* @method createTimer | |
*/ | |
createTimer: function() { | |
if(this.isRunning) { | |
this.time = this.timer.add('s', 1).format('HHmmss'); | |
this.async(this.createTimer, null, 1000); | |
} | |
}, | |
/** | |
* The `createCountdown` method create a countdown | |
* | |
* @method createCountdown | |
*/ | |
createCountdown: function() { | |
if(this.isRunning) { | |
if(this.time > 0) { | |
this.time = this.timer.subtract('s', 1).format('HHmmss'); | |
this.async(this.createCountdown, null, 1000); | |
} | |
} | |
}, | |
/** | |
* The `startCount` method does no work at this time. | |
* | |
* @method startCount | |
*/ | |
startCount: function() { | |
if(!this.timer) { | |
this.timer = moment().hours(0).minutes(this.startFrom || 0).seconds(0); | |
} | |
this.isRunning = true; | |
this.startFrom ? this.createCountdown() : this.createTimer(); | |
}, | |
/** | |
* The `stopCount` stop the running timer or countdown | |
* | |
* @method stopCount | |
*/ | |
stopCount: function() { | |
this.isRunning = false; | |
}, | |
/** | |
* The `resetCount` reset che counter | |
* | |
* @method resetCount | |
*/ | |
resetCount: function() { | |
this.isRunning = false; | |
this.time = this.startFrom ? '00' + this.startFrom + '00' : '000000'; | |
this.timer = null; | |
}, | |
created: function() { | |
this.resetCount(); | |
}, | |
ready: function() { | |
switch(this.displayMode) { | |
case 'timer': | |
if(this.auto === true) { | |
this.startCount(); | |
} | |
break; | |
case 'countdown': | |
if(this.auto === true) { | |
this.createCountdown(); | |
} | |
break; | |
default: | |
this.createClock(); | |
} | |
if(this.startFrom) { | |
this.time = '00' + this.startFrom + '00'; | |
} | |
} | |
}); | |
</script> | |
</polymer-element> | |
<!--http://granze.github.io/flip-clock/components/flip-clock/demo.html--> |
Forked from Addy Osmani's Pen Polymer CodePen starter.
A Pen by Captain Anonymous on CodePen.
function change() { | |
var s = document.querySelector('select'); | |
document.querySelector('core-animated-pages').transitions = document.querySelector('select').options[s.selectedIndex].value; | |
} | |
function stuff(page) { | |
var p = document.querySelector('core-animated-pages'); | |
p.selected = page; | |
} |
body { | |
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; | |
margin:0; | |
} | |
core-animated-pages { | |
position: absolute; | |
top: 50px; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
font-size: 72px; | |
overflow: hidden; | |
} | |
section > div { | |
height: 100%; | |
color: white; | |
} | |
/*tabs*/ | |
paper-tabs, core-toolbar { | |
background-color: #00bcd4; | |
color: #fff; | |
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2); | |
} | |
core-toolbar paper-tabs { | |
box-shadow: none; | |
} | |
paper-tabs[noink][nobar] paper-tab.core-selected { | |
color: #ffff8d; | |
} | |
paper-tabs.transparent-teal { | |
background-color: transparent; | |
color: #00bcd4; | |
box-shadow: none; | |
} | |
paper-tabs.transparent-teal::shadow #selectionBar { | |
background-color: #00bcd4; | |
} | |
paper-tabs.transparent-teal paper-tab::shadow #ink { | |
color: #00bcd4; | |
} | |
paper-button { | |
margin: 1em; | |
width: 10em; | |
} |