WebCompDev / COMPONENTS

Commit 36900d641336f1be745acae8afc8cb5d5f386c94

Authored by Andrea Petta
1 parent 38120605

plugin update

Inline Side-by-side
Showing 15 changed files with 1 additions and 1562 deletions
paper-date-picker @ 6d5ade55574
  1 +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>