WebCompDev / COMPONENTS

Browse Code »

Commit c6cf210d80e45f7e1bd7190ba0739df7b151a554

Authored by root 2016-09-19 18:06:36 +0200

1 parent e9ec5fd2

new paper-date

Inline Side-by-side

Showing 17 changed files with 1796 additions and 0 deletions

bower_components/paper-date-picker/.gitignore 0 → 100644

View file @c6cf210

	1	+.idea
	2	+.bowerrc
	3	+components
	4	+bower_components
	5	+node_modules
	6	+gulpfile.js
...	...

bower_components/paper-date-picker/.jshintrc 0 → 100644

View file @c6cf210

	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 0 → 100644

View file @c6cf210

	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 0 → 100644

View file @c6cf210

	1	+paper-date-picker
	2	+=================
	3	+
	4	+NOTE: in bower, this package is `polymer-paper-date-picker`
	5	+
	6	+Material Design date picker, compatible with Polymer 1.0
	7	+
	8	+Provides a responsive date picker based on the material design spec. This
	9	+component aims to be a clone of the date picker introduced in Android Lollipop.
	10	+
	11	+![wide picker screenshot][wide] ![narrow picker screenshot][narrow]
	12	+
	13	+See the [component page](http://bendavis78.github.io/paper-date-picker/) for
	14	+full documentation.
	15	+
	16	+## Examples:
	17	+
	18	+Default picker:
	19	+
	20	+```html
	21	+<paper-date-picker></paper-date-picker>
	22	+```
	23	+
	24	+Setting the initial date to April 20, 2015:
	25	+```html
	26	+<paper-date-picker date="April 20, 2015"></paper-date-picker>
	27	+```
	28	+
	29	+You may also specify a minimum and/or maximum date allowed in this picker using
	30	+the same date notation:
	31	+```html
	32	+<paper-date-picker min-date="April 1, 2015" max-date="June 30, 2015"></paper-date-picker>
	33	+```
	34	+
	35	+If you include this element as part of `paper-dialog`, use the class
	36	+`"paper-date-picker-dialog"` on the dialog element in order to give it proper
	37	+styling:
	38	+```html
	39	+<paper-dialog id="dialog" class="paper-date-picker-dialog" modal
	40	+ on-iron-overlay-closed="dismissDialog">
	41	+ <paper-date-picker id="picker" date="[[date]]"></paper-date-picker>
	42	+ <div class="buttons">
	43	+ <paper-button dialog-dismiss>Cancel</paper-button>
	44	+ <paper-button dialog-confirm>OK</paper-button>
	45	+ </div>
	46	+</paper-dialog>
	47	+```
	48	+
	49	+# Reporting Bugs
	50	+
	51	+When filing a bug report, please provide an example of how to repoduce using
	52	+plunker, jsbin, jsfiddle, etc. You can use the following plunker as a starting
	53	+point: http://plnkr.co/edit/9c787GHiBzX7zI5x6gsX
	54	+
	55	+# Contributing
	56	+
	57	+Pull requests are welcome and greatly appreciated. However, in order to speed
	58	+up the review process, pull requests will not be merged if they include
	59	+multiple unrelated changes (eg: "Fix for XYZ and other tweaks"). Also, don't
	60	+include "opinionated" changes that aren't necessary for the feature or bugfix.
	61	+
	62	+When submitting a PR for a bugfix, please reference the issue number in the
	63	+commit message. For example: "Fixes issue #123".
	64	+
	65	+
	66	+---
	67	+
	68	+If you find this component useful, please show your support by donating to
	69	+[Bold Idea](http://boldidea.org). Click the button below!
	70	+
	71	+[![ideaSpark campaign button][donate]](https://donorbox.org/bold-idea-make-ideaspark-possible-for-dallas-area-students)
	72	+
	73	+[wide]: http://i.imgur.com/I0SjSWf.png
	74	+[narrow]: http://i.imgur.com/SsrLJDo.png
	75	+[donate]: http://www.boldidea.org/donate-badge-md-1.png
...	...

bower_components/paper-date-picker/bower.json 0 → 100644

View file @c6cf210

	1	+{
	2	+ "name": "paper-date-picker",
	3	+ "version": "1.2.0",
	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	+ "/test/"
	21	+ ],
	22	+ "dependencies": {
	23	+ "moment-element": "bendavis78/moment-element#^1.1.1",
	24	+ "polymer": "Polymer/polymer#^1.1.0",
	25	+ "iron-icon": "PolymerElements/iron-icon#^1.0.7",
	26	+ "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.9",
	27	+ "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
	28	+ "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
	29	+ "iron-resizable": "PolymerElements/iron-resizable-behavior#^1.0.0",
	30	+ "iron-selector": "PolymerElements/iron-selector#^1.0.0",
	31	+ "neon-animation": "PolymerElements/neon-animation#^1.0.0",
	32	+ "paper-ripple": "PolymerElements/paper-ripple#^1.0.5",
	33	+ "paper-styles": "PolymerElements/paper-styles#^1.0.0",
	34	+ "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
	35	+ "iron-list": "PolymerElements/iron-list#^1.2.8"
	36	+ },
	37	+ "devDependencies": {
	38	+ "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
	39	+ "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
	40	+ "paper-button": "PolymerElements/paper-button#^1.0.0",
	41	+ "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
	42	+ "web-component-tester": "Polymer/web-component-tester#^4.2.2"
	43	+ },
	44	+ "resolutions": {
	45	+ "polymer": "^1.0.0",
	46	+ "webcomponentsjs": "^0.7.2"
	47	+ }
	48	+}
...	...

bower_components/paper-date-picker/demo/index.html 0 → 100644

View file @c6cf210

	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 0 → 100644

View file @c6cf210

	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	+ overflow: hidden;
	29	+ border: 4px solid #eee;
	30	+ padding: 5px;
	31	+ resize: both;
	32	+ }
	33	+ </style>
	34	+</head>
	35	+<body unresolved>
	36	+ <template is="dom-bind" id="scope">
	37	+ <h3>{{dateFormat(date, 'LLL')}}</h3>
	38	+ <section>
	39	+ <div id="container" on-track="track">
	40	+ <paper-calendar id="picker" date="{{date}}"></paper-calendar>
	41	+ </div>
	42	+ </section>
	43	+ </template>
	44	+ <script>
	45	+ HTMLImports.whenReady(function() {
	46	+ var scope = Polymer.dom(document).querySelector('#scope');
	47	+ scope.dateFormat = function(date, format) {
	48	+ if (!date) {
	49	+ return 'No date selected';
	50	+ }
	51	+ return moment(date).format(format);
	52	+ };
	53	+ scope.date = new Date(2017, 3, 13);
	54	+ scope.track = function() {
	55	+ this.$.picker.fire('iron-resize');
	56	+ };
	57	+ });
	58	+ </script>
	59	+</body>
	60	+</html>
...	...

bower_components/paper-date-picker/demo/paper-year-list.html 0 → 100644

View file @c6cf210

	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 0 → 100644

View file @c6cf210

	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 0 → 100644

View file @c6cf210

	1	+{
	2	+ "name": "paper-date-picker",
	3	+ "version": "1.2.0",
	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 0 → 100644

View file @c6cf210

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

bower_components/paper-date-picker/paper-date-picker-dialog-style.html 0 → 100644

View file @c6cf210

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

bower_components/paper-date-picker/paper-date-picker-icons.html 0 → 100644

View file @c6cf210

	1	+<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html">
	2	+
	3	+<iron-iconset-svg size="24" name="date-picker">
	4	+ <svg>
	5	+ <defs>
	6	+ <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></g>
	7	+ <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g>
	8	+ </defs>
	9	+ </svg>
	10	+</iron-iconset-svg>
...	...

bower_components/paper-date-picker/paper-date-picker.html 0 → 100644

View file @c6cf210

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

bower_components/paper-date-picker/paper-year-list.html 0 → 100644

View file @c6cf210

	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	+ this.async(function() {
	108	+ var selectedPos = selectedYearIdx * this._physicalAverage + 1;
	109	+ if (selectedPos !== this.scrollTop) {
	110	+ this._update();
	111	+ this.scrollTop = selectedPos;
	112	+ }
	113	+ if (this.scrollHeight - this.offsetHeight !== this.scrollTop) {
	114	+ this.scrollTop += (this._physicalAverage - this.offsetHeight) / 2;
	115	+ }
	116	+ }.bind(this.$.yearList));
	117	+ }
	118	+ },
	119	+ /**
	120	+ * Return the selected class if needed.
	121	+ */
	122	+ _addSelectedClass: function(selected) {
	123	+ if (selected) {
	124	+ return ' selected';
	125	+ }
	126	+ },
	127	+ /**
	128	+ * Compute the years array passed to the iron-list.
	129	+ */
	130	+ _computeYears: function(min, max) {
	131	+ if (typeof min !== 'number' \|\| typeof max !== 'number') {
	132	+ return;
	133	+ }
	134	+ var years = [];
	135	+ for (;min <= max; min++) {
	136	+ years.push({year: min});
	137	+ }
	138	+ return years;
	139	+ },
	140	+ /**
	141	+ * Set 'selected' attribute to the new date's year if it is within range, else set it to null.
	142	+ */
	143	+ _dateChange: function(date) {
	144	+ var newYear = date.getFullYear();
	145	+ this.selected = this._withinRange(newYear) ? newYear : null;
	146	+ },
	147	+ _maxChange: function(max) {
	148	+ if (typeof max !== 'number') {
	149	+ this.max = 2100;
	150	+ }
	151	+ },
	152	+ _minChange: function(min) {
	153	+ if (typeof min !== 'number') {
	154	+ this.min = 1900;
	155	+ }
	156	+ },
	157	+ /**
	158	+ * If selected is null, clear iron-list selection,
	159	+ * else select it in iron-list and synchronize 'date' attribute.
	160	+ */
	161	+ _selectedChange: function(selected) {
	162	+ if (selected === null) {
	163	+ this.$.yearList.clearSelection();
	164	+ return;
	165	+ }
	166	+ if (selected !== this.date.getFullYear()) {
	167	+ // set the year using a new Date instance for notifying to work
	168	+ this.date = new Date(this.date.setFullYear(selected));
	169	+ }
	170	+ this._selectYearInList(selected);
	171	+ },
	172	+ /**
	173	+ * Select the given year in the years list.
	174	+ */
	175	+ _selectYearInList: function(year) {
	176	+ var yearIdx = year - this.min;
	177	+ this.$.yearList.selectItem(yearIdx);
	178	+ },
	179	+ /**
	180	+ * Update 'selected' attribute and select in iron-list
	181	+ * from a tapped item's event in the years list.
	182	+ */
	183	+ _tappedYearHandler: function(e) {
	184	+ var yearItem = e.model.__data__.item;
	185	+ var year = yearItem.year;
	186	+ if (this.selected !== year) {
	187	+ this.$.yearList.selectItem(yearItem);
	188	+ this.selected = year;
	189	+ }
	190	+ },
	191	+ /**
	192	+ * Return true if year is between min and max.
	193	+ */
	194	+ _withinRange: function(year) {
	195	+ return !(this.min && year < this.min \|\| this.max && year > this.max );
	196	+ },
	197	+ behaviors: [
	198	+ Polymer.IronResizableBehavior
	199	+ ]
	200	+ });
	201	+ </script>
	202	+</dom-module>
...	...

bower_components/paper-date-picker/test/index.html 0 → 100644

View file @c6cf210

	1	+<!DOCTYPE html>
	2	+<!--
	3	+@license
	4	+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
	5	+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
	6	+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
	7	+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
	8	+Code distributed by Google as part of the polymer project is also
	9	+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
	10	+-->
	11	+<html>
	12	+<head>
	13	+ <meta charset="UTF-8">
	14	+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
	15	+ <title>paper-date-picker tests</title>
	16	+ <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
	17	+ <script src="../bower_components/web-component-tester/browser.js"></script>
	18	+</head>
	19	+<body>
	20	+ <script>
	21	+ WCT.loadSuites([
	22	+ 'paper-date-picker.html',
	23	+ 'paper-date-picker.html?dom=shadow'
	24	+ ]);
	25	+ </script>
	26	+</body>
	27	+</html>
...	...

bower_components/paper-date-picker/test/paper-date-picker.html 0 → 100644

View file @c6cf210

	1	+<!doctype html>
	2	+<html>
	3	+
	4	+<head>
	5	+ <meta charset="utf-8">
	6	+ <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
	7	+ <script src="../bower_components/web-component-tester/browser.js"></script>
	8	+ <!-- import the element to test -->
	9	+ <link rel="import" href="../paper-date-picker.html">
	10	+</head>
	11	+
	12	+<body>
	13	+
	14	+ <test-fixture id="max-date-fixture">
	15	+ <template>
	16	+ <paper-date-picker
	17	+ id="picker"
	18	+ date="January 1, 2016"
	19	+ max-date="February 28, 2016">
	20	+ </paper-date-picker>
	21	+ </template>
	22	+ </test-fixture>
	23	+
	24	+ <script>
	25	+
	26	+ describe('paper-date-picker', function() {
	27	+ var element;
	28	+
	29	+ context('with a max-date', function() {
	30	+
	31	+ beforeEach(function() {
	32	+ element = fixture('max-date-fixture');
	33	+ });
	34	+
	35	+ it('should not swipe after the max bound', function(done) {
	36	+
	37	+ // Check initialization
	38	+ expect(element.date).to.be.not.null;
	39	+ expect(element.maxDate).to.be.not.null;
	40	+
	41	+ // Try to swipe after the max bound
	42	+ var calendar = element.$$('paper-calendar');
	43	+ calendar._swipeNextMonth();
	44	+ calendar._swipeNextMonth();
	45	+ calendar._swipeNextMonth();
	46	+ calendar._swipeNextMonth();
	47	+
	48	+ // Check after all animation that the calendar has been transformed
	49	+ // once
	50	+ setTimeout(function() {
	51	+ // When the max bound is reached, the div `months` contains only two
	52	+ // months. So we check that the current position is equal to the
	53	+ // half of the width, else it means the calendar has undergone too
	54	+ // much transformations
	55	+ expect(calendar._currentPos).to.equal(
	56	+ -(calendar.$.months.clientWidth / 2)
	57	+ );
	58	+ done();
	59	+ }, 500);
	60	+ });
	61	+
	62	+ });
	63	+
	64	+ });
	65	+
	66	+ </script>
	67	+</body>
	68	+
	69	+</html>
...	...