Skip to content

Commit d8f06df

Browse files
adegruchyadegruchy
committed
Updated the element to Polymer 3 with the modulizer
1 parent 13f06c9 commit d8f06df

17 files changed

Lines changed: 1543 additions & 1400 deletions

‎demo/index.html‎

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,52 +7,74 @@
77

88
<title>paper-date-picker Demo</title>
99

10-
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
1111

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">
12+
<script type="module" src="../paper-date-picker.js"></script>
13+
<script type="module" src="../../@polymer/paper-styles/demo-pages.js"></script>
14+
<script type="module" src="../../@polymer/paper-dialog/paper-dialog.js"></script>
15+
<script type="module" src="../../@polymer/paper-button/paper-button.js"></script>
1616

17-
<style is="custom-style" include="paper-date-picker-dialog-style">
17+
<!-- FIXME(polymer-modulizer):
18+
These imperative modules that innerHTML your HTML are
19+
a hacky way to be sure that any mixins in included style
20+
modules are ready before any elements that reference them are
21+
instantiated, otherwise the CSS @apply mixin polyfill won't be
22+
able to expand the underlying CSS custom properties.
23+
See: https://github.com/Polymer/polymer-modulizer/issues/154
24+
-->
25+
<script type="module">
26+
const $_documentContainer = document.createElement('template');
27+
28+
$_documentContainer.innerHTML = `<style is="custom-style" include="paper-date-picker-dialog-style">
1829
section {
1930
margin: 24px;
2031
}
21-
</style>
32+
</style>`;
33+
34+
document.head.appendChild($_documentContainer.content);
35+
</script>
2236
</head>
2337
<body unresolved>
24-
<template is="dom-bind" id="scope">
38+
<script type="module">
39+
const $_documentContainer = document.createElement('template');
40+
41+
$_documentContainer.innerHTML = `<template is="dom-bind" id="scope">
2542
<section>
2643
<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">
44+
<paper-button class="btn" on-tap="showDialog" raised="">Change Date</paper-button>
45+
<paper-dialog id="dialog" class="paper-date-picker-dialog" modal="" on-iron-overlay-closed="dismissDialog">
2946
<paper-date-picker id="picker" date="[[date]]"></paper-date-picker>
3047
<div class="buttons">
31-
<paper-button dialog-dismiss>Cancel</paper-button>
32-
<paper-button dialog-confirm>OK</paper-button>
48+
<paper-button dialog-dismiss="">Cancel</paper-button>
49+
<paper-button dialog-confirm="">OK</paper-button>
3350
</div>
3451
</paper-dialog>
3552
</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>
53+
</template>`;
54+
55+
document.body.appendChild($_documentContainer.content);
56+
</script>
57+
<script type="module">
58+
import '../paper-date-picker.js';
59+
import '@polymer/paper-styles/demo-pages.js';
60+
import '@polymer/paper-dialog/paper-dialog.js';
61+
import '@polymer/paper-button/paper-button.js';
62+
var scope = Polymer.dom(document).querySelector('#scope');
63+
scope.dateFormat = function(date, format) {
64+
return moment(date).format(format);
65+
};
66+
scope.dismissDialog = function(event) {
67+
if (event.detail.confirmed) {
68+
scope.date = scope.$.picker.date;
69+
}
70+
};
71+
scope.showDialog = function() {
72+
this.$.dialog.toggle();
73+
};
74+
document.addEventListener('WebComponentsReady', function() {
75+
scope.date = new Date(2017, 3, 13);
76+
scope.showDialog();
77+
});
78+
</script>
5779
</body>
5880
</html>

‎demo/paper-calendar.html‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77

88
<title>paper-date-picker Demo</title>
99

10-
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
1111

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">
12+
<script type="module" src="../paper-date-picker.js"></script>
13+
<script type="module" src="../../@polymer/paper-styles/demo-pages.js"></script>
14+
<script type="module" src="../../@polymer/paper-dialog/paper-dialog.js"></script>
15+
<script type="module" src="../../@polymer/paper-button/paper-button.js"></script>
1616

1717
<style is="custom-style">
1818
section {
@@ -41,20 +41,22 @@ <h3>{{dateFormat(date, 'LLL')}}</h3>
4141
</div>
4242
</section>
4343
</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>
44+
<script type="module">
45+
import '../paper-date-picker.js';
46+
import '@polymer/paper-styles/demo-pages.js';
47+
import '@polymer/paper-dialog/paper-dialog.js';
48+
import '@polymer/paper-button/paper-button.js';
49+
var scope = Polymer.dom(document).querySelector('#scope');
50+
scope.dateFormat = function(date, format) {
51+
if (!date) {
52+
return 'No date selected';
53+
}
54+
return moment(date).format(format);
55+
};
56+
scope.date = new Date(2017, 3, 13);
57+
scope.track = function() {
58+
this.$.picker.fire('iron-resize');
59+
};
60+
</script>
5961
</body>
6062
</html>

‎demo/paper-year-list.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77

88
<title>paper-year-list Demo</title>
99

10-
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
1111

12-
<link rel="import" href="../paper-year-list.html">
13-
<link rel="import" href="../../paper-styles/demo-pages.html">
12+
<script type="module" src="../paper-year-list.js"></script>
13+
<script type="module" src="../../@polymer/paper-styles/demo-pages.js"></script>
1414

1515
</head>
1616

@@ -26,11 +26,13 @@
2626
<button on-tap="centerSelected">Center selected year</button>
2727
</template>
2828

29-
<script>
30-
var scope = document.getElementById('scope');
31-
scope.centerSelected = function() {
32-
this.$.yearList.centerSelected();
33-
};
34-
</script>
29+
<script type="module">
30+
import '../paper-year-list.js';
31+
import '@polymer/paper-styles/demo-pages.js';
32+
var scope = document.getElementById('scope');
33+
scope.centerSelected = function() {
34+
this.$.yearList.centerSelected();
35+
};
36+
</script>
3537
</body>
3638
</html>

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77

88
<title>paper-date-picker</title>
99

10-
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
11-
<link rel="import" href="../iron-component-page/iron-component-page.html">
10+
<script src="../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
11+
<script type="module" src="../@polymer/iron-component-page/iron-component-page.js"></script>
1212

1313
</head>
1414
<body>

‎package-lock.json‎

Lines changed: 36 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 42 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
{
2-
"name": "paper-date-picker",
3-
"version": "1.2.2",
42
"description": "Provides a responsive date picker based on the material design spec",
5-
"main": "index.html",
3+
"keywords": [
4+
"web-component",
5+
"webcomponents",
6+
"polymer",
7+
"datepicker",
8+
"paper-date-picker"
9+
],
10+
"repository": {
11+
"type": "git",
12+
"url": "git+https://github.com/bendavis78/paper-date-picker.git"
13+
},
14+
"homepage": "https://github.com/bendavis78/paper-date-picker#readme",
15+
"name": "@katapult/paper-date-picker",
16+
"version": "2.0.0",
17+
"main": "index.js",
618
"devDependencies": {
719
"browser-sync": "^2.8.0",
820
"del": "^1.2.0",
@@ -18,26 +30,40 @@
1830
"merge-stream": "^0.1.8",
1931
"portfinder": "^0.4.0",
2032
"vinyl-paths": "^1.0.0",
21-
"web-component-tester": "^3.3.3"
33+
"web-component-tester": "^3.3.3",
34+
"@polymer/iron-component-page": "^4.0.0",
35+
"@polymer/paper-dialog": "^3.0.0",
36+
"@polymer/paper-button": "^3.0.0",
37+
"@webcomponents/webcomponentsjs": "^2.0.0",
38+
"wct-browser-legacy": "^1.0.1"
2239
},
2340
"scripts": {
2441
"test": "echo \"Error: no test specified\" && exit 1"
2542
},
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-
],
3743
"author": "Ben Davis <bendavis78@gmail.com>",
3844
"license": "MIT",
3945
"bugs": {
4046
"url": "https://github.com/bendavis78/paper-date-picker/issues"
4147
},
42-
"homepage": "https://github.com/bendavis78/paper-date-picker#readme"
48+
"resolutions": {
49+
"inherits": "2.0.3",
50+
"samsam": "1.1.3",
51+
"supports-color": "3.1.2",
52+
"type-detect": "1.0.0"
53+
},
54+
"dependencies": {
55+
"@polymer/iron-flex-layout": "^3.0.0",
56+
"@polymer/iron-icon": "^3.0.0",
57+
"@polymer/iron-iconset-svg": "^3.0.0",
58+
"@polymer/iron-list": "^3.0.0",
59+
"@polymer/iron-media-query": "^3.0.0",
60+
"@polymer/iron-resizable-behavior": "^3.0.1",
61+
"@polymer/iron-selector": "^3.0.0",
62+
"@polymer/neon-animation": "^3.0.0",
63+
"@polymer/paper-icon-button": "^3.0.0",
64+
"@polymer/paper-ripple": "^3.0.0",
65+
"@polymer/paper-styles": "^3.0.0",
66+
"@polymer/polymer": "^3.0.0",
67+
"moment": "^2.25.3"
68+
}
4369
}

0 commit comments

Comments
 (0)