-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathdemo.html
125 lines (109 loc) · 3.04 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>d-calendar Demo</title>
<link rel="import" href="../core-input/core-input.html">
<link rel="import" href="d-calendar.html">
<style>
body {
font-family: RobotoDraft;
-webkit-font-smoothing: antialiased; background: #DDD;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
background: #CFD8DC;
}
d-calendar {
margin: 0px 12px;
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
.swatch-bar {
position: fixed;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-transform: translateY(-50%);
}
.swatch {
width: 36px;
height: 36px;
cursor: pointer;
border-radius: 50%;
margin: 12px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
}
#dateDisplay {
width: 577px;
margin: 40px;
}
#dateDisplay input {
font-family: RobotoDraft;
font-weight: 300;
border: 0;
background: 0;
padding: 0;
margin: 0;
font-size: 40px;
display: block;
width: 100%;
text-align: center;
}
#dateDisplay input:focus {
outline: none;
}
</style>
</head>
<body unresolved fullbleed layout vertical center center-justified>
<template id="sandbox" is="auto-binding">
<div layout horizontal center center-justified>
<d-calendar selectedDate="{{selectedDate}}" date="{{date}}" class="light-theme" on-d-calendar-date-selected="{{dateSelected}}"></d-calendar>
<d-calendar selectedDate="{{selectedDate}}"></d-calendar>
</div>
<div id="dateDisplay">
<input id="dateinput" placeholder="Selected Date" is="core-input" committedValue="{{selectedDate}}"></input>
</div>
<div class="swatch-bar">
<template repeat="{{color in colors}}">
<div class="swatch" on-tap="{{selectColor}}" color="{{color}}" style="background-color: {{color}}"></div>
</template>
</div>
</template>
<script>
window.addEventListener('template-bound', function(){
var sandbox = document.getElementById('sandbox');
sandbox.dateSelected = function(ev, detail, sender){
this.updateDateInputValue();
}
sandbox.updateDateInputValue = function(){
sandbox.$.dateinput.value = PolymerExpressions.prototype.date(this.selectedDate);
}
sandbox.colors = [
'#f44336',
'#E91E63',
'#9C27B0',
'#673AB7',
'#3F51B5',
'#2196F3',
'#03A9F4',
'#00BCD4',
'#4CAF50',
'#CDDC39',
'#FFEB3B',
'#FFC107',
'#FF9800',
'#FF5722',
'#795548',
'#9E9E9E',
'#607D8B'
];
sandbox.selectColor = function(ev, detail, sender){
var selectedColor = sender.getAttribute('color');
sandbox.selectedColor = selectedColor;
CoreStyle.g.dCalendar.accentColor = selectedColor;
}
sandbox.selectedColor = '#2196F3';
sandbox.updateDateInputValue();
})
</script>
</body>
</html>