WebCompDev / COMPONENTS

Browse Code »

Commit 36900d641336f1be745acae8afc8cb5d5f386c94

Authored by Andrea Petta 2016-09-19 17:11:14 +0200

1 parent 38120605

plugin update

Inline Side-by-side

Showing 15 changed files with 1 additions and 1562 deletions

paper-date-picker @ 6d5ade55574

+Subproject commit 6d5ade5557443e4402b9b4ac3588d5984ae1f933

bower_components/paper-date-picker/.gitignore deleted

View file @3812060

1	-.bowerrc
2	-components
3	-bower_components
4	-node_modules
5	-gulpfile.js

bower_components/paper-date-picker/.jshintrc deleted

View file @3812060

1	-{
2	- "node": true,
3	- "browser": true,
4	- "esnext": true,
5	- "bitwise": true,
6	- "camelcase": true,
7	- "curly": true,
8	- "eqeqeq": true,
9	- "immed": true,
10	- "indent": 2,
11	- "latedef": true,
12	- "noarg": true,
13	- "quotmark": "single",
14	- "undef": true,
15	- "unused": true,
16	- "globals": {
17	- "wrap": true,
18	- "unwrap": true,
19	- "HTMLImports": true,
20	- "Polymer": true,
21	- "Platform": true,
22	- "moment": true
23	- }
24	-}
25	-

bower_components/paper-date-picker/LICENSE deleted

View file @3812060

1	-The MIT License (MIT)
2	-
3	-Copyright (c) 2015 Ben Davis <bendavis78@gmail.com>
4	-
5	-Permission is hereby granted, free of charge, to any person obtaining a copy of
6	-this software and associated documentation files (the "Software"), to deal in
7	-the Software without restriction, including without limitation the rights to
8	-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9	-the Software, and to permit persons to whom the Software is furnished to do so,
10	-subject to the following conditions:
11	-
12	-The above copyright notice and this permission notice shall be included in all
13	-copies or substantial portions of the Software.
14	-
15	-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16	-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17	-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18	-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19	-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20	-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bower_components/paper-date-picker/README.md deleted

View file @3812060

1	-paper-date-picker
2	-=================
3	-Material Design date picker, compatible with Polymer 1.0
4	-
5	-Provides a responsive date picker based on the material design spec. This
6	-component aims to be a clone of the date picker introduced in Android Lollipop.
7	-
8	-![wide picker screenshot][wide] ![narrow picker screenshot][narrow]
9	-
10	-See the [component page](http://bendavis78.github.io/paper-date-picker/) for
11	-full documentation.
12	-
13	-## Examples:
14	-
15	-Default picker:
16	-
17	-```html
18	-<paper-date-picker></paper-date-picker>
19	-```
20	-
21	-Setting the initial date to April 20, 2015:
22	-```html
23	-<paper-date-picker date="April 20, 2015"></paper-date-picker>
24	-```
25	-
26	-You may also specify a minimum and/or maximum date allowed in this picker using
27	-the same date notation:
28	-```html
29	-<paper-date-picker min-date="April 1, 2015" max-date="June 30, 2015"></paper-date-picker>
30	-```
31	-
32	-If you include this element as part of `paper-dialog`, use the class
33	-`"paper-date-picker-dialog"` on the dialog element in order to give it proper
34	-styling:
35	-```html
36	-<paper-dialog id="dialog" class="paper-date-picker-dialog" modal
37	- on-iron-overlay-closed="dismissDialog">
38	- <paper-date-picker id="picker" date="[[date]]"></paper-date-picker>
39	- <div class="buttons">
40	- <paper-button dialog-dismiss>Cancel</paper-button>
41	- <paper-button dialog-confirm>OK</paper-button>
42	- </div>
43	-</paper-dialog>
44	-```
45	-
46	-# Reporting Bugs
47	-
48	-When filing a bug report, please provide an example of how to repoduce using
49	-plunker, jsbin, jsfiddle, etc. You can use the following plunker as a starting
50	-point: http://plnkr.co/edit/9c787GHiBzX7zI5x6gsX
51	-
52	----
53	-
54	-If you find this component useful, please show your support by donating to
55	-[Bold Idea](http://boldidea.org). Click the button below!
56	-
57	-[![ideaSpark campaign button][donate]](https://donorbox.org/bold-idea-make-ideaspark-possible-for-dallas-area-students)
58	-
59	-[wide]: http://i.imgur.com/I0SjSWf.png
60	-[narrow]: http://i.imgur.com/SsrLJDo.png
61	-[donate]: http://www.boldidea.org/donate-badge-md-1.png

bower_components/paper-date-picker/bower.json deleted

View file @3812060

1	-{
2	- "name": "paper-date-picker",
3	- "version": "1.1.2",
4	- "authors": [
5	- "Ben Davis <bendavis78@gmail.com>"
6	- ],
7	- "description": "Provides a responsive date picker based on the material design spec",
8	- "keywords": [
9	- "web-component",
10	- "web-components",
11	- "polymer",
12	- "datepicker",
13	- "paper-date-picker"
14	- ],
15	- "main": "paper-date-picker.html",
16	- "license": "MIT",
17	- "homepage": "http://bendavis78.github.io/paper-date-picker/",
18	- "ignore": [
19	- "/.*",
20	- "/tests/"
21	- ],
22	- "dependencies": {
23	- "moment-element": "bendavis78/moment-element#^1.1.0",
24	- "polymer": "Polymer/polymer#^1.1.0",
25	- "iron-icons": "PolymerElements/iron-icons#^1.0.0",
26	- "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
27	- "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
28	- "iron-resizable": "PolymerElements/iron-resizable-behavior#^1.0.0",
29	- "iron-selector": "PolymerElements/iron-selector#^1.0.0",
30	- "neon-animation": "PolymerElements/neon-animation#^1.0.0",
31	- "paper-styles": "PolymerElements/paper-styles#^1.0.0",
32	- "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
33	- "iron-list": "PolymerElements/iron-list#~1.1.7"
34	- },
35	- "devDependencies": {
36	- "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
37	- "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
38	- "paper-button": "PolymerElements/paper-button#^1.0.0",
39	- "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
40	- },
41	- "resolutions": {
42	- "polymer": "^1.0.0",
43	- "webcomponentsjs": "^0.7.2"
44	- }
45	-}

bower_components/paper-date-picker/demo/index.html deleted

View file @3812060

1	-<!doctype html>
2	-<html>
3	-<head>
4	- <meta charset="utf-8">
5	- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6	- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
7	-
8	- <title>paper-date-picker Demo</title>
9	-
10	- <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
11	-
12	- <link rel="import" href="../paper-date-picker.html">
13	- <link rel="import" href="../../paper-styles/demo-pages.html">
14	- <link rel="import" href="../../paper-dialog/paper-dialog.html">
15	- <link rel="import" href="../../paper-button/paper-button.html">
16	-
17	- <style is="custom-style" include="paper-date-picker-dialog-style">
18	- section {
19	- margin: 24px;
20	- }
21	- </style>
22	-</head>
23	-<body unresolved>
24	- <template is="dom-bind" id="scope">
25	- <section>
26	- <h1>{{dateFormat(date, 'LL')}}</h1>
27	- <paper-button class="btn" on-tap="showDialog" raised>Change Date</paper-button>
28	- <paper-dialog id="dialog" class="paper-date-picker-dialog" modal on-iron-overlay-closed="dismissDialog">
29	- <paper-date-picker id="picker" date="[[date]]"></paper-date-picker>
30	- <div class="buttons">
31	- <paper-button dialog-dismiss>Cancel</paper-button>
32	- <paper-button dialog-confirm>OK</paper-button>
33	- </div>
34	- </paper-dialog>
35	- </section>
36	- </template>
37	- <script>
38	- HTMLImports.whenReady(function() {
39	- var scope = Polymer.dom(document).querySelector('#scope');
40	- scope.dateFormat = function(date, format) {
41	- return moment(date).format(format);
42	- };
43	- scope.dismissDialog = function(event) {
44	- if (event.detail.confirmed) {
45	- scope.date = scope.$.picker.date;
46	- }
47	- };
48	- scope.showDialog = function() {
49	- this.$.dialog.toggle();
50	- };
51	- document.addEventListener('WebComponentsReady', function() {
52	- scope.date = new Date(2017, 3, 13);
53	- scope.showDialog();
54	- });
55	- });
56	- </script>
57	-</body>
58	-</html>

bower_components/paper-date-picker/demo/paper-calendar.html deleted

View file @3812060

1	-<!doctype html>
2	-<html>
3	-<head>
4	- <meta charset="utf-8">
5	- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6	- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
7	-
8	- <title>paper-date-picker Demo</title>
9	-
10	- <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
11	-
12	- <link rel="import" href="../paper-date-picker.html">
13	- <link rel="import" href="../../paper-styles/demo-pages.html">
14	- <link rel="import" href="../../paper-dialog/paper-dialog.html">
15	- <link rel="import" href="../../paper-button/paper-button.html">
16	-
17	- <style is="custom-style">
18	- section {
19	- margin: 24px;
20	- }
21	- h3 {
22	- text-align: center;
23	- }
24	- #container {
25	- margin: 0 auto;
26	- height: 300px;
27	- width: 300px;
28	- }
29	- </style>
30	-</head>
31	-<body unresolved>
32	- <template is="dom-bind" id="scope">
33	- <h3>{{dateFormat(date, 'LLL')}}</h3>
34	- <section>
35	- <div id="container">
36	- <paper-calendar id="picker" date="{{date}}"></paper-calendar>
37	- </div>
38	- </section>
39	- </template>
40	- <script>
41	- var scope = Polymer.dom(document).querySelector('#scope');
42	- scope.dateFormat = function(date, format) {
43	- if (!date) {
44	- return 'No date selected';
45	- }
46	- return moment(date).format(format);
47	- };
48	- scope.date = new Date(2017, 3, 13);
49	- </script>
50	-</body>
51	-</html>

bower_components/paper-date-picker/demo/paper-year-list.html deleted

View file @3812060

1	-<!doctype html>
2	-<html>
3	- <head>
4	- <meta charset="utf-8">
5	- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6	- <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
7	-
8	- <title>paper-year-list Demo</title>
9	-
10	- <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
11	-
12	- <link rel="import" href="../paper-year-list.html">
13	- <link rel="import" href="../../paper-styles/demo-pages.html">
14	-
15	- </head>
16	-
17	- <body unresolved>
18	- <style>
19	- paper-year-list {
20	- height: 400px;
21	- width: 200px;
22	- }
23	- </style>
24	- <template is="dom-bind" id="scope">
25	- <paper-year-list id="yearList"></paper-year-list>
26	- <button on-tap="centerSelected">Center selected year</button>
27	- </template>
28	-
29	- <script>
30	- var scope = document.getElementById('scope');
31	- scope.centerSelected = function() {
32	- this.$.yearList.centerSelected();
33	- };
34	- </script>
35	- </body>
36	-</html>

bower_components/paper-date-picker/index.html deleted

View file @3812060

1	-<!doctype html>
2	-<html>
3	-<head>
4	-
5	- <meta charset="utf-8">
6	- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7	-
8	- <title>paper-date-picker</title>
9	-
10	- <script src="../webcomponentsjs/webcomponents-lite.js"></script>
11	- <link rel="import" href="../iron-component-page/iron-component-page.html">
12	-
13	-</head>
14	-<body>
15	-
16	- <iron-component-page></iron-component-page>
17	-
18	-</body>

bower_components/paper-date-picker/package.json deleted

View file @3812060

1	-{
2	- "name": "paper-date-picker",
3	- "version": "1.1.2",
4	- "description": "Provides a responsive date picker based on the material design spec",
5	- "main": "index.html",
6	- "devDependencies": {
7	- "browser-sync": "^2.8.0",
8	- "del": "^1.2.0",
9	- "gulp": "^3.9.0",
10	- "gulp-add": "0.0.2",
11	- "gulp-bower": "0.0.10",
12	- "gulp-bump": "^0.3.1",
13	- "gulp-copy": "0.0.2",
14	- "gulp-filter": "^2.0.2",
15	- "gulp-gh-pages": "^0.5.2",
16	- "gulp-git": "^1.2.4",
17	- "gulp-tag-version": "^1.3.0",
18	- "merge-stream": "^0.1.8",
19	- "portfinder": "^0.4.0",
20	- "vinyl-paths": "^1.0.0",
21	- "web-component-tester": "^3.3.3"
22	- },
23	- "scripts": {
24	- "test": "echo \"Error: no test specified\" && exit 1"
25	- },
26	- "repository": {
27	- "type": "git",
28	- "url": "git+https://github.com/bendavis78/paper-date-picker.git"
29	- },
30	- "keywords": [
31	- "web-component",
32	- "webcomponents",
33	- "polymer",
34	- "datepicker",
35	- "paper-date-picker"
36	- ],
37	- "author": "Ben Davis <bendavis78@gmail.com>",
38	- "license": "MIT",
39	- "bugs": {
40	- "url": "https://github.com/bendavis78/paper-date-picker/issues"
41	- },
42	- "homepage": "https://github.com/bendavis78/paper-date-picker#readme"
43	-}

bower_components/paper-date-picker/paper-calendar.html deleted

View file @3812060

1	-<link rel="import" href="../polymer/polymer.html">
2	-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
3	-<link rel="import" href="../iron-icons/iron-icons.html">
4	-<link rel="import" href="../paper-button/paper-button.html">
5	-<link rel="import" href="../paper-styles/paper-styles.html">
6	-<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
7	-<link rel="import" href="../iron-selector/iron-selector.html">
8	-<link rel="import" href="../moment-element/moment-with-locales-import.html">
9	-
10	-<dom-module id="paper-calendar">
11	- <template>
12	- <style>
13	- :host {
14	- display: block;
15	- box-sizing: border-box;
16	- padding: 12px 0;
17	- position: relative;
18	- width: 100%;
19	- height: 100%;
20	- min-width: 160px;
21	- min-height: 160px;
22	- color: var(--primary-text-color);
23	- -webkit-font-smoothing: antialiased;
24	- -webkit-tap-highlight-color: rgba(0,0,0,0);
25	- --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
26	- --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
27	- @apply(--paper-font-body1);
28	- @apply(--paper-calendar);
29	- overflow: hidden;
30	- -webkit-touch-callout: none;
31	- -webkit-user-select: none;
32	- -khtml-user-select: none;
33	- -moz-user-select: none;
34	- -ms-user-select: none;
35	- user-select: none;
36	-
37	- @apply(--paper-calendar);
38	- }
39	- #calendar {
40	- position: relative;
41	- width: 100%;
42	- height: 100%;
43	- @apply(--layout-horizontal);
44	- }
45	- #months {
46	- height: 100%;
47	- @apply(--layout-horizontal);
48	- }
49	- #months.animating .month-nav {
50	- opacity: 1;
51	- }
52	- #months.animating {
53	- transition-property: transform, opacity;
54	- transition-duration: 300ms;
55	- }
56	- #months.animating.swipe {
57	- transition-timing-function: var(--ease-in-sine);
58	- --webkit-transition-timing-function: var(--ease-in-sine);
59	- }
60	- #months.animating.reset {
61	- transition-timing-function: var(--ease-out-sine);
62	- --webkit-transition-timing-function: var(--ease-out-sine);
63	- }
64	- .month {
65	- flex: 1;
66	- height: 100%;
67	- @apply(--layout-vertical);
68	- @apply(--layout-justified);
69	- }
70	-
71	- .month-row, .month-nav {
72	- height: calc(100%/8);
73	- box-sizing: border-box;
74	- padding: 0 calc(100%/36);
75	- }
76	-
77	- .month-col {
78	- position: relative;
79	- @apply(--layout-vertical);
80	- @apply(--layout-flex);
81	- }
82	-
83	- .month-nav {
84	- position: absolute;
85	- top: 0;
86	- left: 0;
87	- width: 100%;
88	- opacity: 1;
89	- }
90	- .month-nav .col {
91	- position: relative;
92	- @apply(--layout-vertical);
93	- @apply(--layout-center-center);
94	- }
95	- .month-nav .btn .icon {
96	- cursor: pointer;
97	- }
98	- .month-nav .btn .ripple {
99	- position: absolute;
100	- width: 48px;
101	- height: 48px;
102	- top: 50%;
103	- left: 50%;
104	- transform: translate(-50%, -50%);
105	- }
106	- .month-nav .btn.right {
107	- text-align: right;
108	- }
109	- .month-name {
110	- line-height: 24px;
111	- vertical-align: middle;
112	- text-align: center;
113	- font-weight: bold;
114	- @apply(--paper-font-body2);
115	- }
116	- .month-weekdays {
117	- color: var(--secondary-text-color);
118	- }
119	- .month-col .day {
120	- cursor: default;
121	- pointer-events: none;
122	- @apply(--layout-fit);
123	- @apply(--layout-vertical);
124	- @apply(--layout-center-center);
125	- }
126	- .day-item {
127	- flex: 1;
128	- object-fit: contain;
129	- }
130	- .day-item::selection {
131	- background: none;
132	- }
133	- .day-item .selection {
134	- fill: rgba(0,0,0,0);
135	- }
136	- .day-item.selected .selection {
137	- fill: var(--default-primary-color);
138	- }
139	- .day-item.selected + .day {
140	- color: var(--text-primary-color);
141	- }
142	- .day-item:not([disabled]) {
143	- cursor: pointer;
144	- }
145	- .day-item[disabled] + .day {
146	- color: var(--text-disabled-color, #9d9d9d);
147	- }
148	- .day-item.today + .day {
149	- color: var(--default-primary-color);
150	- }
151	- .day-item.selected.today + .day {
152	- color: var(--text-primary-color);
153	- }
154	- </style>
155	- <div id="calendar">
156	- <div id="months" on-track="_onTrack" class$="{{_contentClass}}">
157	- <template is="dom-repeat" items="{{_months}}" as="month">
158	- <div class$="{{_getMonthClass('month', month)}}">
159	- <div class="month-row month-name layout horizontal center-center flex">
160	- <span>{{dateFormat(month.date, 'MMMM YYYY', locale)}}</span>
161	- </div>
162	- <div class="month-row month-weekdays week layout horizontal justified flex">
163	- <template is="dom-repeat" items="{{_weekdays}}">
164	- <div class="month-col layout vertical flex">
165	- <div class="day">{{item.0}}</div>
166	- </div>
167	- </template>
168	- </div>
169	- <template is="dom-repeat" items="{{month.weeks}}" as="row">
170	- <div class="month-row layout horizontal justified flex">
171	- <template is="dom-repeat" items="{{row}}">
172	- <div class="month-col">
173	- <svg version="1.1" viewBox="0 0 100 100"
174	- class$="{{_getDayClass('day-item', item.date, today, date)}}"
175	- disabled$="{{_isDisabled(item.day, item.date, minDate, maxDate)}}"
176	- on-tap="_tapDay" date$="{{item.name}}">
177	- <circle cx="50" cy="50" r="49" class="selection"></circle>
178	- </svg>
179	- <div class="day">{{item.day}}</div>
180	- </div>
181	- </template>
182	- </div>
183	- </template>
184	- </div>
185	- </template>
186	- </div>
187	- <div id="monthNav" class="month-nav layout horizontal center">
188	- <div class="flex col self-stretch">
189	- <div class="btn" on-tap="_prevMonth">
190	- <paper-ripple center class="ripple circle"></paper-ripple>
191	- <iron-icon class="icon flex" icon="chevron-left"></iron-icon>
192	- </div>
193	- </div>
194	- <div class="flex-5"></div>
195	- <div class="flex col self-stretch">
196	- <div class="btn" on-tap="_nextMonth">
197	- <paper-ripple center class="ripple circle"></paper-ripple>
198	- <iron-icon class="icon flex" icon="chevron-right"></iron-icon>
199	- </div>
200	- </div>
201	- </div>
202	- </div>
203	- </template>
204	- <script>
205	- (function() {
206	-
207	- // Ignore movement within this distance (px)
208	- var WIGGLE_THRESHOLD = 4;
209	-
210	- // what constitues a flick (px/ms)
211	- var FLICK_SPEED = 0.5;
212	-
213	- // Factor for "springy" resistence effect when swiping too far.
214	- var RESIST_LENGTH = 40;
215	- var RESIST_FACTOR = 2;
216	-
217	- // Number of months to preload on both sides of the current month
218	- var PRELOAD_MONTHS = 1;
219	-
220	- Polymer({
221	- is: 'paper-calendar',
222	- properties: {
223	- /*
224	- * The selected date
225	- */
226	- date: {
227	- type: Date,
228	- notify: true,
229	- value: function() {
230	- return new Date();
231	- },
232	- observer: '_dateChanged'
233	- },
234	- /**
235	- * The current locale
236	- */
237	- locale: {
238	- type: String,
239	- value: 'en',
240	- notify: true,
241	- observer: '_localeChanged'
242	- },
243	- /**
244	- * The minimum allowed date
245	- */
246	- minDate: {
247	- type: Date,
248	- value: null
249	- },
250	- /**
251	- * The maximum allowed date
252	- */
253	- maxDate: {
254	- type: Date,
255	- value: null
256	- },
257	- /**
258	- * The currently selected month (1-12)
259	- */
260	- currentMonth: {
261	- type: Number
262	- },
263	- /**
264	- * The currently selected year
265	- */
266	- currentYear: {
267	- type: Number
268	- },
269	- _contentClass: String,
270	- _months: Array
271	- },
272	- behaviors: [
273	- Polymer.IronResizableBehavior
274	- ],
275	- observers: [
276	- '_populate(currentYear, currentMonth, minDate, maxDate, locale)',
277	- ],
278	- listeners: {
279	- 'iron-resize': '_resizeHandler',
280	- 'swiped': '_onSwipe'
281	- },
282	- ready: function() {
283	- this._updateToday();
284	- this.currentMonth = this.date.getMonth() + 1;
285	- this.currentYear = this.date.getFullYear();
286	- this._transitionEvent = this.style.WebkitTransition ? 'transitionEnd' : 'webkitTransitionEnd';
287	- },
288	- dateFormat: function(date, format, locale) {
289	- if (!date) {
290	- return '';
291	- }
292	- var value = moment(date);
293	- value.locale(locale \|\| this.locale);
294	- return value.format(format);
295	- },
296	- _localeChanged: function(locale) {
297	- var localeMoment = moment();
298	- localeMoment.locale(locale);
299	- var weekdays = [];
300	- for (var i=0; i<7; i++) {
301	- weekdays.push(localeMoment.weekday(i).format('dd'));
302	- }
303	- this._weekdays = weekdays;
304	- this._firstDayOfWeek = localeMoment.weekday(0).format('d');
305	- },
306	- _populate: function(currentYear, currentMonth, minDate, maxDate) {
307	- var date, month, weeks, day, d, dayInfo, monthData, months = [];
308	-
309	- // Make sure currentYear/currentMonth are in min/max range
310	- if (minDate && new Date(currentYear, currentMonth, 0) < minDate) {
311	- this.currentYear = minDate.getFullYear();
312	- this.currentMonth = minDate.getMonth() + 1;
313	- return;
314	- } else if (maxDate && new Date(currentYear, currentMonth - 1, 1) > maxDate) {
315	- this.currentYear = maxDate.getFullYear();
316	- this.currentMonth = maxDate.getMonth() + 1;
317	- return;
318	- }
319	-
320	- for (var i=-PRELOAD_MONTHS; i<=PRELOAD_MONTHS; i++) {
321	- weeks = [[]];
322	- day = 1;
323	- date = new Date(currentYear, currentMonth - 1 + i, 1);
324	- month = date.getMonth();
325	- monthData = {
326	- year: date.getFullYear(),
327	- month: date.getMonth() + 1,
328	- date: new Date(date)
329	- };
330	-
331	- if (!this._monthWithinValidRange(monthData.year, monthData.month)) {
332	- continue;
333	- }
334	-
335	- // add "padding" days
336	- var firstDay = date.getDay() - this._firstDayOfWeek;
337	- if (firstDay < 0) {
338	- firstDay = 7 + firstDay;
339	- }
340	- for (d=0; d<firstDay; d++) {
341	- weeks[0].push({day: null, date: null});
342	- }
343	-
344	- // add actual days
345	- while (date.getMonth() === month) {
346	- if (weeks[0].length && d % 7 === 0) {
347	- // start new week
348	- weeks.push([]);
349	- }
350	- dayInfo = {
351	- date: new Date(date.getFullYear(), month, day),
352	- name: this.dateFormat(date,'YYYY-MM-DD'),
353	- year: currentYear,
354	- month: month,
355	- day: day,
356	- };
357	- weeks[weeks.length-1].push(dayInfo);
358	- date.setDate(++day);
359	- d++;
360	- }
361	-
362	- // add remaining "padding" days
363	- while (d < 42) {
364	- if (d % 7 === 0) {
365	- weeks.push([]);
366	- }
367	- weeks[weeks.length-1].push({day: null, date: null});
368	- d += 1;
369	- }
370	-
371	- monthData.weeks = weeks;
372	- months.push(monthData);
373	- }
374	- if (!months.length) {
375	- return;
376	- }
377	- this.set('_months', months);
378	- this._positionSlider();
379	- },
380	- _getDayClass: function(cssClass, date) {
381	- if (!date) {
382	- return cssClass;
383	- }
384	- if (date.getTime() === this.today.getTime()) {
385	- cssClass += ' today';
386	- }
387	- if (this.date && this.date.getTime() === date.getTime()) {
388	- cssClass += ' selected';
389	- }
390	- return cssClass;
391	- },
392	- _isDisabled: function(day, date) {
393	- return !day \|\| !this._withinValidRange(date);
394	- },
395	- _getMonthClass: function(name, month) {
396	- return name + ' month-' + month.year + '-' + month.month;
397	- },
398	- _onTrack: function(event) {
399	- var detail = event.detail;
400	- var state = detail.state;
401	- var dx = event.detail.dx;
402	- var dy = event.detail.dy;
403	- var adx = Math.abs(dx);
404	- var ady = Math.abs(dy);
405	- var width = this._containerWidth;
406	-
407	- if (state === 'start') {
408	- this._trackStartTime = (new Date()).getTime();
409	- this._startPos = this._currentPos;
410	- this._moveQueue = [];
411	- }
412	-
413	- var x = this._startPos + dx;
414	- if (state === 'track') {
415	- if (this._moveQueue.length >= 4) {
416	- this._moveQueue.shift();
417	- }
418	- this._moveQueue.push(event);
419	-
420	- // ignore movement within WIGGLE_THRESHOLD
421	- var distance = Math.sqrt((dx * dx) + (dy * dy));
422	- if (!this._gesture && distance > WIGGLE_THRESHOLD) {
423	- this._gesture = adx > ady ? 'pan-x' : 'pan-y';
424	- }
425	-
426	- // only drag during pan-x gesture
427	- if (this._gesture !== 'pan-x') {
428	- return;
429	- }
430	-
431	- this._dragging = true;
432	- var fullWidth = width * this._months.length;
433	-
434	- // If we're dragging outside the bounds, add some resistence
435	- if (x > 0 \|\| x < (-fullWidth + width)) {
436	- if (isNaN(parseInt(this._resistStart))) {
437	- this._resistStart = adx;
438	- }
439	- var rdx = adx - this._resistStart;
440	- var p, d, max = RESIST_LENGTH;
441	- p = rdx > width ? 1 : rdx / width;
442	- d = max * (1 - Math.pow(1 - p, RESIST_FACTOR));
443	- x = (dx < 0 ? -this._scrollWidth + width - d : d);
444	- } else {
445	- this._resistStart = null;
446	- }
447	- this._translateX(x);
448	- }
449	- if (state === 'end') {
450	- this._resistStart = null;
451	- var lastIdx = this._getMonthIdx(this._startPos);
452	- var idx = this._getMonthIdx(this._currentPos);
453	- var speed = this._getFastestMovement(event).v;
454	- var move = idx !== lastIdx \|\| speed > FLICK_SPEED;
455	- if (!this._resistStart && this._gesture === 'pan-x' && move) {
456	- if (speed > FLICK_SPEED) {
457	- // calculate an ideal transition duration based on current speed of swipe
458	- var remainingDistance = width - adx;
459	- var newDuration = remainingDistance / speed;
460	- if (newDuration > 300) {
461	- newDuration = 300;
462	- }
463	- this._transitionDuration = newDuration;
464	- }
465	-
466	- var newX = width * idx * -1;
467	- var direction = (dx < 0) ? 'left' : 'right';
468	-
469	- this._translateX(newX, 'swipe', function() {
470	- this.set('_contentClass', '');
471	- this.transform('translateX(' + this._startPos + 'px)', this.$.months);
472	- this.fire('swiped', {direction: direction});
473	- }.bind(this));
474	- } else {
475	- this._translateX(this._startPos, 'reset');
476	- }
477	- this._gesture = null;
478	- }
479	- },
480	- _getMonthIdx: function(pos) {
481	- // returns the index for the visible month according to the given position
482	- var width = this._containerWidth;
483	- var i = Math.floor((-pos + (width/2)) / width);
484	- return i < 0 ? 0 : i;
485	- },
486	- _translateX: function(x, transition, cb) {
487	- if (isNaN(parseInt(x))) {
488	- throw new Error('Not a number: ' + x);
489	- }
490	- this._currentPos = x;
491	- if (transition) {
492	- if (this._transitionDuration) {
493	- this.$.months.style.transitionDuration = this._transitionDuration + 'ms';
494	- }
495	- this._once(this._transitionEvent, function() {
496	- this.set('_contentClass', '');
497	- this.$.months.style.transitionDuration = '';
498	- this._transitionDuration = null;
499	- this.$.monthNav.style.removeProperty('opacity');
500	- if (cb) {
501	- cb();
502	- }
503	- }.bind(this), this.$.months);
504	- this.set('_contentClass', 'animating ' + transition);
505	- this.$.monthNav.style.removeProperty('opacity');
506	- // Fixes odd bug in chrome where we lose touch-events after changing opacity
507	- this._once('touchstart', function() {});
508	- }
509	- window.requestAnimationFrame(function() {
510	- if (!transition) {
511	- var halfWidth = this._containerWidth / 2;
512	- var dx = Math.abs(this._startPos - x);
513	- var p = (1 - (dx / halfWidth)) * 100;
514	- p = (100 - Math.pow(p, 2)) / 100 / 100;
515	- var opacity = Math.abs(parseFloat(p).toFixed(2));
516	- this.$.monthNav.style.opacity = opacity;
517	- }
518	- this.transform('translateX(' + x + 'px)', this.$.months);
519	- }.bind(this));
520	- },
521	- _getFastestMovement: function(event) {
522	- // detect flick based on fastest segment of movement
523	- var l = this._moveQueue.length;
524	- var dt, tx, ty, tv, x = 0, y = 0, v = 0;
525	- for (var i = 0, m; i < l && (m = this._moveQueue[i]); i++) {
526	- dt = event.timeStamp - m.timeStamp;
527	- tx = (event.detail.x - m.detail.x) / dt;
528	- ty = (event.detail.y - m.detail.y) / dt;
529	- tv = Math.sqrt(tx * tx + ty * ty);
530	- if (tv > v) {
531	- x = tx;
532	- y = ty;
533	- v = tv;
534	- }
535	- }
536	- return {x: x, y: y, v: v};
537	- },
538	- _onSwipe: function(event) {
539	- if (event.detail.direction === 'right') {
540	- this._prevMonth();
541	- } else {
542	- this._nextMonth();
543	- }
544	- },
545	- _once: function(eventName, callback, node) {
546	- node = node \|\| this;
547	- function onceCallback() {
548	- node.removeEventListener(eventName, onceCallback);
549	- callback.apply(null, arguments);
550	- }
551	- node.addEventListener(eventName, onceCallback);
552	- },
553	- _incrMonth: function(i) {
554	- var date = new Date(this.currentYear, this.currentMonth - 1 + i);
555	- var year = date.getFullYear();
556	- var month = date.getMonth() + 1;
557	- if (this._monthWithinValidRange(year, month)) {
558	- this.currentYear = year;
559	- this.currentMonth = month;
560	- }
561	- },
562	- _prevMonth: function() {
563	- this._incrMonth(-1);
564	- },
565	- _nextMonth: function() {
566	- this._incrMonth(1);
567	- },
568	- _dateChanged: function(date, oldValue) {
569	- if (!this._isValidDate(date)) {
570	- console.warn('Invalid date: ' + date);
571	- this.date = date = oldValue;
572	- }
573	- if (!this._withinValidRange(date)) {
574	- console.warn('Date outside of valid range: ' + date);
575	- this.date = date = oldValue;
576	- }
577	- this.currentYear = date.getFullYear();
578	- this.currentMonth = date.getMonth() + 1;
579	- if (oldValue && date.getTime && oldValue.getTime && date.getTime() === oldValue.getTime()) {
580	- return;
581	- }
582	- // clone the date object so as not to have unintended effects on bindings
583	- date = new Date(date.getTime());
584	- date.setHours(0, 0, 0, 0);
585	- this.set('date', date);
586	- },
587	- _tapDay: function(event) {
588	- if (!this._withinValidRange(event.model.item.date)) {
589	- return false;
590	- }
591	- this.date = event.model.item.date;
592	- },
593	- _isValidDate: function(date) {
594	- return date && date.getTime && !isNaN(date.getTime());
595	- },
596	- _withinValidRange: function(date) {
597	- if (this._isValidDate(date)) {
598	- return (!this.minDate \|\| date >= this.minDate) && (!this.maxDate \|\| date <= this.maxDate);
599	- }
600	- return false;
601	- },
602	- _monthWithinValidRange: function(year, month) {
603	- var monthStart = new Date(year, month-1, 1);
604	- var monthEnd = new Date(year, month, 0);
605	- return this._withinValidRange(monthStart) \|\| this._withinValidRange(monthEnd);
606	- },
607	- _positionSlider: function() {
608	- if (!this._months \|\| !this._containerWidth) {
609	- return;
610	- }
611	- this._scrollWidth = (this.$.calendar.offsetWidth * this._months.length);
612	- this.$.months.style.minWidth = this._scrollWidth + 'px';
613	- var i = ((this.currentYear * 12) + this.currentMonth) -
614	- ((this._months[0].year * 12) + this._months[0].month);
615	- this._translateX(-i * this._containerWidth);
616	- },
617	- _resizeHandler: function() {
618	- this._containerWidth = this.$.calendar.offsetWidth;
619	- this._positionSlider();
620	- },
621	- _getDayName: function(date) {
622	- return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
623	- },
624	- _updateToday: function() {
625	- this.today = new Date();
626	- this.today.setHours(0, 0, 0, 0);
627	- },
628	- });
629	- })();
630	- </script>
631	-</dom-module>

bower_components/paper-date-picker/paper-date-picker-dialog-style.html deleted

View file @3812060

1	-<style is="custom-style">
2	-/* mixin definitions */
3	-:root {
4	- --paper-date-picker-dialog: {
5	- margin: 0;
6	- max-height: 520px !important;
7	- };
8	- --paper-date-picker-dialog-picker: {
9	- margin-top: 0 !important;
10	- padding: 0;
11	- };
12	- --paper-date-picker-dialog-calendar: {
13	- padding-bottom: 0;
14	- };
15	- --paper-date-picker-dialog-heading: {
16	- margin-bottom: -56px;
17	- };
18	-}
19	-</style>
20	-
21	-<dom-module id="paper-date-picker-dialog-style">
22	- <template>
23	- <style>
24	- /* Application of mixins to local .paper-date-picker-dialog elements */
25	- .paper-date-picker-dialog {
26	- @apply(--paper-date-picker-dialog);
27	- }
28	- .paper-date-picker-dialog > paper-date-picker {
29	- --paper-calendar: {
30	- @apply(--paper-date-picker-dialog-calendar);
31	- };
32	- @apply(--paper-date-picker-dialog-picker);
33	- }
34	- .paper-date-picker-dialog > paper-date-picker:not([narrow]) {
35	- --paper-date-picker-heading: {
36	- @apply(--paper-date-picker-dialog-heading);
37	- };
38	- }
39	- </style>
40	- </template>
41	-</dom-module>

bower_components/paper-date-picker/paper-date-picker.html deleted

View file @3812060

1	-<link rel="import" href="../polymer/polymer.html">
2	-<link rel="import" href="../iron-media-query/iron-media-query.html">
3	-<link rel="import" href="../neon-animation/neon-animated-pages.html">
4	-<link rel="import" href="../neon-animation/neon-animatable.html">
5	-<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
6	-<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
7	-<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
8	-<link rel="import" href="../iron-selector/iron-selector.html">
9	-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
10	-<link rel="import" href="../paper-styles/paper-styles.html">
11	-<link rel="import" href="../moment-element/moment-with-locales-import.html">
12	-<link rel="import" href="paper-calendar.html">
13	-<link rel="import" href="paper-date-picker-dialog-style.html">
14	-<link rel="import" href="paper-year-list.html">
15	-
16	-<!--
17	-Material Design [Pickers](http://www.google.com/design/spec/components/pickers.html)
18	-
19	-Provides a responsive date picker based on the material design spec.
20	-
21	-## Examples:
22	-
23	-Default picker:
24	-
25	- <paper-date-picker></paper-date-picker>
26	-
27	-Setting the initial date to April 20, 2015:
28	-
29	- <paper-date-picker date="April 20, 2015"></paper-date-picker>
30	-
31	-You may also specify a minimum and/or maximum date allowed in this picker using
32	-the same date notation:
33	-
34	- <paper-date-picker min-date="April 1, 2015" max-date="June 30, 2015"></paper-date-picker>
35	-
36	-If you include this element as part of `paper-dialog`, use the class
37	-`"paper-date-picker-dialog"` on the dialog element in order to give it proper
38	-styling:
39	-
40	- <paper-dialog id="dialog" class="paper-date-picker-dialog" modal
41	- on-iron-overlay-closed="dismissDialog">
42	- <paper-date-picker id="picker" date="[[date]]"></paper-date-picker>
43	- <div class="buttons">
44	- <paper-button dialog-dismiss>Cancel</paper-button>
45	- <paper-button dialog-confirm>OK</paper-button>
46	- </div>
47	- </paper-dialog>
48	-
49	-@element paper-date-picker
50	-@blurb Provides a responsive date picker based on the material design spec.
51	-@homepage http://bendavis78.github.io/paper-date-picker/
52	-@demo demo/index.html
53	--->
54	-
55	-<style is="custom-style" include="paper-date-picker-dialog-style">
56	- /* includes dialog style at document-level for backward compatibility */
57	-</style>
58	-
59	-<dom-module id="paper-date-picker">
60	- <template>
61	- <style>
62	- :host {
63	- -webkit-touch-callout: none;
64	- -webkit-user-select: none;
65	- -khtml-user-select: none;
66	- -moz-user-select: none;
67	- -ms-user-select: none;
68	- user-select: none;
69	- display: inline-block;
70	- color: var(--primary-text-color);
71	- @apply(--paper-font-body1);
72	- @apply(--paper-date-picker);
73	- }
74	-
75	- / Landscape ****************/
76	- #datePicker {
77	- width: 512px;
78	- height: 248px;
79	- @apply(--layout-horizontal);
80	- }
81	- #heading {
82	- width: 168px;
83	- @apply(--paper-date-picker-heading);
84	- }
85	-
86	- / Narrow *******************/
87	- :host([narrow]) #datePicker {
88	- width: 328px;
89	- height: 428px;
90	- @apply(--layout-vertical);
91	- }
92	- :host([narrow]) #heading {
93	- width: auto;
94	- height: 96px;
95	- padding: 16px 24px;
96	- }
97	-
98	- / Heading ******************/
99	- #heading {
100	- padding: 16px;
101	- box-sizing: border-box;
102	- color: var(--text-primary-color);
103	- background: var(--default-primary-color);
104	- @apply(--layout-vertical);
105	- @apply(--layout-around-justfied);
106	- }
107	- #heading .date,
108	- #heading .year {
109	- cursor: pointer;
110	- }
111	- #heading .date {
112	- @apply(--paper-font-display1);
113	- font-weight: bold;
114	- margin-top: 2px;
115	- @apply(--paper-date-picker-heading-date);
116	- }
117	- #heading div.date {
118	- letter-spacing: 0.025em;
119	- }
120	- #heading .date span {
121	- white-space: nowrap;
122	- }
123	- #heading .year {
124	- @apply(--paper-font-body2);
125	- font-size: 16px;
126	- @apply(--paper-date-picker-heading-date);
127	- }
128	- #heading:not(.pg-chooseYear) .year,
129	- #heading.pg-chooseYear .date {
130	- color: var(--light-primary-color);
131	- }
132	-
133	- / Calendar/Year picker ******/
134	- :host([isTouch]) paper-year-list::-webkit-scrollbar {
135	- width: 0 !important;
136	- }
137	- #pages {
138	- flex: 1;
139	- width: auto;
140	- background: var(--default-background-color);
141	- }
142	- #calendar {
143	- --paper-calendar: {
144	- @apply(--paper-date-picker-calendar);
145	- }
146	- }
147	- </style>
148	- <iron-media-query query="{{_getMediaQuery(forceNarrow, responsiveWidth)}}" query-matches="{{_queryMatches}}"></iron-media-query>
149	- <div id="datePicker">
150	- <div id="heading" class$="{{_getHeadingClass('heading-content', _selectedPage)}}">
151	- <div class="year" on-tap="_tapHeadingYear">{{dateFormat(date, 'YYYY', locale)}}</div>
152	- <div class="date" on-tap="_tapHeadingDate">
153	- <template is="dom-repeat" items="{{_splitHeadingDate(date, headingFormat, locale)}}">
154	- <span>{{item}}</span>
155	- </template>
156	- </div>
157	- </div>
158	- <neon-animated-pages id="pages" selected="{{_selectedPage}}" attr-for-selected="id"
159	- entry-animation="fade-in-animation" exit-animation="fade-out-animation">
160	- <neon-animatable id="chooseDate">
161	- <paper-calendar id="calendar" locale="{{locale}}" date="{{date}}"
162	- min-date="{{minDate}}" max-date="{{maxDate}}">
163	- </paper-calendar>
164	- </neon-animatable>
165	- <neon-animatable id="chooseYear">
166	- <paper-year-list id="yearList" date="{{date}}" on-tap="_tapHeadingDate" min="[[_minYear]]" max="[[_maxYear]]"></paper-year-list>
167	- </neon-animatable>
168	- </neon-animated-pages>
169	- </div>
170	- </template>
171	- <script>
172	-
173	- Polymer({
174	- is: 'paper-date-picker',
175	- properties: {
176	- /**
177	- * The selected date (YYYY-MM-DD)
178	- */
179	- date: {
180	- type: Date,
181	- notify: true
182	- },
183	- /**
184	- * Maximum screen width at which the picker uses a vertical layout
185	- */
186	- responsiveWidth: {
187	- type: String,
188	- value: '560px'
189	- },
190	- /**
191	- * The current locale
192	- */
193	- locale: {
194	- type: String,
195	- value: 'en'
196	- },
197	- /**
198	- * The format of the date displayed in the heading.
199	- * See docuemntation for Moment.js for more info.
200	- */
201	- headingFormat: {
202	- type: String,
203	- value: 'ddd, MMM D'
204	- },
205	- /**
206	- * The minimum allowed date
207	- */
208	- minDate: {
209	- type: Date,
210	- value: null
211	- },
212	- /**
213	- * The maximum allowed date
214	- */
215	- maxDate: {
216	- type: Date,
217	- value: null
218	- },
219	- /**
220	- * Force narrow layout
221	- */
222	- forceNarrow: {
223	- type: Boolean,
224	- value: false
225	- },
226	- narrow: {
227	- type: Boolean,
228	- reflectToAttribute: true,
229	- notify: true,
230	- computed: '_computeNarrow(forceNarrow, _queryMatches)'
231	- },
232	- isTouch: {
233	- type: Boolean,
234	- value: false,
235	- readOnly: true,
236	- reflectToAttribute: true
237	- },
238	- _queryMatches: {
239	- type: Boolean,
240	- value: false
241	- },
242	- headingBreak: {
243	- type: String,
244	- value: '[,]'
245	- },
246	- _selectedPage: String,
247	- _maxYear: {
248	- type: Number,
249	- computed: '_getFullYear(maxDate)'
250	- },
251	- _minYear: {
252	- type: Number,
253	- computed: '_getFullYear(minDate)'
254	- }
255	- },
256	- behaviors: [
257	- Polymer.IronResizableBehavior
258	- ],
259	- listeners: {
260	- 'iron-resize': '_resizeHandler'
261	- },
262	- ready: function() {
263	- this.today = this.$.calendar.today;
264	- this.isTouch = 'ontouchstart' in window;
265	- this._selectPage('chooseDate');
266	- },
267	- dateFormat: function() {
268	- return this.$.calendar.dateFormat.apply(this.$.calendar, arguments);
269	- },
270	- _tapHeadingDate: function() {
271	- if (this.$.pages.selected !== 'chooseDate') {
272	- this._selectPage('chooseDate');
273	- }
274	- },
275	- _tapHeadingYear: function() {
276	- if (this.$.pages.selected !== 'chooseYear') {
277	- this._selectPage('chooseYear');
278	- this.$.yearList.centerSelected();
279	- }
280	- },
281	- _selectPage: function(page) {
282	- this.$.pages.selected = page;
283	- },
284	- _getMediaQuery: function(forceNarrow, responsiveWidth) {
285	- return '(max-width: ' + (forceNarrow ? '' : responsiveWidth) + ')';
286	- },
287	- _getHeadingClass: function(pfx, selectedPage) {
288	- return pfx + ' pg-' + selectedPage;
289	- },
290	- _getFullYear: function(date) {
291	- return date ? date.getFullYear() : null;
292	- },
293	- _splitHeadingDate: function(date, format, locale) {
294	- var re = new RegExp(this.headingBreak, 'g');
295	- var text = this.dateFormat(date, format, locale);
296	- var seps = text.match(re);
297	- var value;
298	- if (!seps) {
299	- value = [text];
300	- } else {
301	- value = text.split(re).map(function(s, i) {
302	- return s + (seps[i] \|\| '');
303	- });
304	- }
305	- return value;
306	- },
307	- _computeNarrow: function(queryMatches, forceNarrow) {
308	- return queryMatches \|\| forceNarrow;
309	- },
310	- _resizeHandler: function() {
311	- if (this._resizing) {
312	- return;
313	- }
314	- this._resizing = true;
315	- this.$.calendar.notifyResize();
316	- this._resizing = false;
317	-
318	- this.updateStyles();
319	- }
320	- });
321	- </script>
322	-</dom-module>

bower_components/paper-date-picker/paper-year-list.html deleted

View file @3812060

1	-<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
2	-<link rel="import" href="../iron-list/iron-list.html">
3	-<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
4	-<link rel="import" href="../paper-ripple/paper-ripple.html">
5	-<link rel="import" href="../paper-styles/default-theme.html">
6	-<link rel="import" href="../polymer/polymer.html">
7	-
8	-<dom-module id="paper-year-list">
9	- <template>
10	- <style>
11	- :host {
12	- display: block;
13	- box-sizing: border-box;
14	- height: 100%;
15	- @apply(--paper-font-common-base);
16	- /* for iron-list to fit */
17	- position: relative;
18	- }
19	- .year {
20	- cursor: pointer;
21	- height: var(--paper-year-list-item-height, 44px);
22	- line-height: var(--paper-year-list-item-height, 44px);
23	- text-align: center;
24	- vertical-align: middle;
25	- }
26	- .selected {
27	- color: var(--default-primary-color);
28	- font-size: 24px;
29	- }
30	- iron-list {
31	- @apply(--layout-fit);
32	- }
33	- </style>
34	- <iron-list id="yearList" items="[[_years]]">
35	- <template>
36	- <div class$="year{{_addSelectedClass(selected)}}" on-tap="_tappedYearHandler">
37	- [[item.year]]
38	- </div>
39	- </template>
40	- </iron-list>
41	- </template>
42	- <script>
43	- Polymer({
44	- is: 'paper-year-list',
45	- properties: {
46	- date: {
47	- type: Date,
48	- notify: true,
49	- observer: '_dateChange'
50	- },
51	- /**
52	- * Maximum allowed year.
53	- */
54	- max: {
55	- type: Number,
56	- value: 2100,
57	- observer: '_maxChange'
58	- },
59	- /**
60	- * Minimum allowed year.
61	- */
62	- min: {
63	- type: Number,
64	- value: 1900,
65	- observer: '_minChange'
66	- },
67	- /**
68	- * The selected year, sync with the year of the given date
69	- * or null if year isn't within range.
70	- */
71	- selected: {
72	- type: Number,
73	- notify: true,
74	- observer: '_selectedChange'
75	- },
76	- /**
77	- * The allowed years array.
78	- */
79	- _years: {
80	- type: Array,
81	- computed: '_computeYears(min, max)',
82	- readOnly: true,
83	- value: function() {
84	- return Date.now().getFullYear;
85	- }
86	- }
87	- },
88	- ready: function() {
89	- // hack for iron-list not to scroll to the first visible index on resize
90	- this.$.yearList._resizeHandler = function() {
91	- this.debounce('resize', function() {
92	- this._render();
93	- if (this._itemsRendered && this._physicalItems && this._isVisible) {
94	- this._resetAverage();
95	- this.updateViewportBoundaries();
96	- }
97	- });
98	- }.bind(this.$.yearList);
99	- },
100	- /**
101	- * Scroll in the years list to center the selected year.
102	- */
103	- centerSelected: function() {
104	- if (this.selected != null) {
105	- var selectedYearIdx = this.selected - this.min;
106	- this.$.yearList.scrollToIndex(selectedYearIdx);
107	- // see https://github.com/PolymerElements/iron-list/issues/140
108	- this.$.yearList._render();
109	- this.async(function() {
110	- var selectedPos = selectedYearIdx * this._physicalAverage + 1;
111	- if (selectedPos != this.scrollTop) {
112	- this._update();
113	- this.scrollTop = selectedPos;
114	- this._refresh();
115	- }
116	- if (this.scrollHeight - this.offsetHeight != this.scrollTop) {
117	- this.scrollTop += (this._physicalAverage - this.offsetHeight) / 2;
118	- this._refresh();
119	- }
120	- }.bind(this.$.yearList));
121	- }
122	- },
123	- /**
124	- * Return the selected class if needed.
125	- */
126	- _addSelectedClass(selected) {
127	- if (selected) {
128	- return ' selected';
129	- }
130	- },
131	- /**
132	- * Compute the years array passed to the iron-list.
133	- */
134	- _computeYears: function(min, max) {
135	- if (!(typeof min == 'number') \|\| !(typeof max == 'number')) {
136	- return;
137	- }
138	- var years = [];
139	- for (;min <= max; min++) {
140	- years.push({year: min});
141	- }
142	- return years;
143	- },
144	- /**
145	- * Set 'selected' attribute to the new date's year if it is within range, else set it to null.
146	- */
147	- _dateChange: function(date) {
148	- var newYear = date.getFullYear();
149	- this.selected = this._withinRange(newYear) ? newYear : null;
150	- },
151	- _maxChange: function(max) {
152	- if (!(typeof max == 'number')) {
153	- this.max = 2100;
154	- }
155	- },
156	- _minChange: function(min) {
157	- if (!(typeof min == 'number')) {
158	- this.min = 1900;
159	- }
160	- },
161	- /**
162	- * If selected is null, clear iron-list selection,
163	- * else select it in iron-list and synchronize 'date' attribute.
164	- */
165	- _selectedChange: function(selected) {
166	- if (selected == null) {
167	- this.$.yearList.clearSelection();
168	- return;
169	- }
170	- if (selected != this.date.getFullYear()) {
171	- // set the year using a new Date instance for notifying to work
172	- this.date = new Date(this.date.setFullYear(selected));
173	- }
174	- this._selectYearInList(selected);
175	- },
176	- /**
177	- * Select the given year in the years list.
178	- */
179	- _selectYearInList: function(year) {
180	- var yearIdx = year - this.min;
181	- this.$.yearList.selectItem(yearIdx);
182	- },
183	- /**
184	- * Update 'selected' attribute and select in iron-list
185	- * from a tapped item's event in the years list.
186	- */
187	- _tappedYearHandler: function(e) {
188	- var yearItem = e.model.__data__.item;
189	- var year = yearItem.year;
190	- if (this.selected != year) {
191	- this.$.yearList.selectItem(yearItem);
192	- this.selected = year;
193	- }
194	- },
195	- /**
196	- * Return true if year is between min and max.
197	- */
198	- _withinRange: function(year) {
199	- return !(this.min && year < this.min \|\| this.max && year > this.max );
200	- },
201	- behaviors: [
202	- Polymer.IronResizableBehavior
203	- ]
204	- });
205	- </script>
206	-</dom-module>