Skip to content

Commit

Permalink
🔀 Merge pull request #129 from motss/lit-element-v1
Browse files Browse the repository at this point in the history
💥 Complete rewrite with [lit-element v2 RC][lit-element-url] and [Material Design 2][material-design-2-url].

_P/S: This creates a discrepancy in the name used. The branch was created before `lit-element` reaches `v1 RC` but now it already at its `v2 RC`._

[lit-element-url]: https://github.com/Polymer/lit-element
[material-design-2-url]: https://material.io/design/
  • Loading branch information
motss authored Jan 30, 2019
2 parents 55a5784 + 4d4984a commit 0e8bcc5
Show file tree
Hide file tree
Showing 50 changed files with 4,424 additions and 3,711 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,4 @@ trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
trim_trailing_whitespace = false
6 changes: 4 additions & 2 deletions .gitattributes
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,17 @@
# checkin and prevent conversion to CRLF when they are checked out
# (this is required in order to prevent newline related issues like,
# for example, after the build script is run)
*.* text eol=lf
.* text eol=lf
*.css text eol=lf
*.html text eol=lf
*.js text eol=lf
*.json text eol=lf
*.scss text eol=lf
*.md text eol=lf
*.scss text eol=lf
*.sh text eol=lf
*.ts text eol=lf
*.tsx text eol=lf
*.txt text eol=lf
*.xml text eol=lf
*.yaml text eol=lf
*.yml text eol=lf
20 changes: 18 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
bower_components*
bower-*.json
# .gitignore 101 - https://www.quora.com/Does-gitignore-file-only-work-on-current-folder

# dot files
.*cache
.build/
.DS_Store
.tmp/
.vscode
*.env

# debug
*.log*

# folders
coverage*/
dist*/
node_modules/

# Do not ignore
5 changes: 5 additions & 0 deletions .npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# User config
package-lock=true
progress=true
quiet=true
update-binary=true
48 changes: 37 additions & 11 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,16 +1,42 @@
language: node_js
sudo: required
before_script:
- npm install -g polymer-cli
- polymer install --variants
node_js: stable
dist: trusty
node_js:
- '8'
- '10'
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
chrome: stable
cache:
directories:
- node_modules
before_install:
- npm i -g npm@latest polymer-cli@latest
install:
- npm ci --quiet
before_script:
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- npm run ts
script:
- xvfb-run polymer test
dist: trusty
- npm run test:ci
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then
npm run test:ci --
-s 'windows 7/internet explorer@11'
-s 'windows 10/microsoftedge@18'
-s 'windows 10/microsoftedge@17'
-s 'windows 10/microsoftedge@13'
-s 'os x 10.11/safari@9'
-s 'macos 10.12/[email protected]'
-s 'macos 10.13/[email protected]'
-s 'macos 10.13/safari@12'
-s 'Linux/chrome@41'
-s 'windows 10/chrome@70'
-s 'windows 10/firefox@62'
-s 'windows 10/firefox@63';
fi

# Should you require setup for TravisCI with Saucelabs?
# Watch https://www.youtube.com/watch?v=afy_EEq_4Go

# Platform configuration: https://wiki.saucelabs.com/display/DOCS/Platform+Configurator#/
5 changes: 0 additions & 5 deletions .yo-rc.json

This file was deleted.

2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
The MIT License (MIT)
Copyright © 2017 Rong Sen Ng <wes_ngrongsen@hotmail.com>
Copyright © 2018 Rong Sen Ng <wes.ngrongsen@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Expand Down
136 changes: 20 additions & 116 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,127 +1,31 @@
[![GitHub version](https://badge.fury.io/gh/motss%2Fapp-datepicker.svg)](http://badge.fury.io/gh/motss%2Fapp-datepicker)
[![Bower version](https://badge.fury.io/bo/app-datepicker.svg)](http://badge.fury.io/bo/app-datepicker)
[![Build Status](https://travis-ci.org/motss/app-datepicker.svg?branch=master)](https://travis-ci.org/motss/app-datepicker)
<div align="center" style="text-align: center;">
<h1 style="border-bottom: none;">app-datepicker</h1>

# app-datepicker (formerly `jv-datepicker`)
![img-app-datepicker](https://cloud.githubusercontent.com/assets/10607759/26274668/48b75cce-3d81-11e7-81aa-b79ab9b90d36.png)
<p>Datepicker element built with lit-element and Material Design 2</p>
</div>

<!-- ![light-themed-app-datepicker-landscape](https://cloud.githubusercontent.com/assets/10607759/10119266/ce6d5b0e-64c3-11e5-843d-1310de755315.png)
![dark-themed-app-datepicker-portrait](https://cloud.githubusercontent.com/assets/10607759/10119265/c9ad900c-64c3-11e5-937e-338a770eebea.png) -->
<!-- ![app-datepicker-landscape](https://cloud.githubusercontent.com/assets/10607759/9871233/c9e33d04-5bc4-11e5-8af9-d93d080d8815.PNG) -->
<!-- ![app-datepicker-portrait](https://cloud.githubusercontent.com/assets/10607759/9871234/cacf33c6-5bc4-11e5-833a-96cbd3dbf440.PNG) -->
<!-- ![dark-themed-app-datepicker](https://cloud.githubusercontent.com/assets/10607759/10106751/1bec71c0-63e9-11e5-93f2-ee197d2ba0f2.png) -->
<hr />

> A different way of `datepicker`-ing on the web.
Stay tuned for more update on imminent release! 🎉

See the [component page](http://motss.github.io/app-datepicker/components/app-datepicker/) for more information.
Meantime, feel free to check the older version out at:

An custom Polymer element built from scratch to provide a datepicker based on Google's Material Design that is more compelling and rich with features.
1. [`2.x` branch][2-x-url] - Built with Material Design and [Polymer 2][polymer-2-url], published at Bower.
2. [`3.x` branch][3-x-url] - Built with Material Design and [Polymer 3][polymer-3-url], published at NPM.

![screen shot 2019-01-30 at 12 49 30](https://user-images.githubusercontent.com/10607759/51959002-857c1100-248d-11e9-8d1a-9abbafdb2385.png)

## Update (v2.11.0)
- **Pleased to announce that `app-datepicker` is now compatible with both Polymer 1.x and Polymer 2.0 stable.**
- **Now Intl polyfill will not load (previously it does) if the browser does not natively support it and it is recommended for users to load the polyfill at the top-level document by some feature detections.**
- `alwaysResetSelectedDateOnDialogClose` - proposed by [#74](https://github.com/motss/app-datepicker/issues/74) to allow datepicker to reset the selected date to today's date once the datepicker closes and the demo has this included as well.
- As of `v2.11`, all dates will no longer include users' local system's timezone offset and all will be default to GMT/ UTC timezone. For more info, please see [#89](https://github.com/motss/app-datepicker/pull/89).

Example:

<app-datepicker></app-datepicker>
<app-datepicker view="horizontal"></app-datepicker>
<app-datepicker theme="dark-theme"></app-datepicker>
<app-datepicker-dialog modal></app-datepicker-dialog>
<app-datepicker-dialog with-backdrop></app-datepicker-dialog>
<app-datepicker-dialog></app-datepicker-dialog>

`app-datepicker` provides a regular datepicker element.
While `app-datepicker-dialog` has a `app-datepicker` being wrapped inside a dialog.


~~## ( Coming soon!) Generating your own boilerplate code of the compounds~~
~~At the end of the demo, there is a section where user can play around with to generate your own boilerplate code with the attributes provided.~~


## Styling
Now with mixins, head over to the [component page](http://motss.github.io/app-datepicker/components/app-datepicker/) for more details.


## Getting Started
1. Install with bower.
`bower install --save app-datepicker`

2. Load the dependencies and the Intl polyfill if needed.

Load [`Intl Polyfill`](https://github.com/andyearnshaw/Intl.js) for unsupported browsers via feature detection,

```js
if (window.Intl) {
var intlPolyfill = document.createElement('script');
intlPolyfill.src = 'path_to_intl_polyfill';
document.head.appendChild(intlPolyfill);
}
```

For `app-datepicker`,

```html
<link rel="import" href="path-to-bower-components/app-datepicker/app-datepicker.html">
```
For `app-datepicker-dialog`,

```html
<link rel="import" href="path-to-bower-components/app-datepicker/app-datepicker-dialog.html">
```

3. Markup with `<app-datepicker></app-datepicker>` or `<app-datepicker-dialog></app-datepicker-dialog>`.

4. Done.

## Browser Support

### `app-datepicker` and `app-datepicker-dialog`:

#### Microsoft Windows x64
| ![Internet Explorer](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/internet-explorer/internet-explorer_48x48.png) | ![Microsoft Edge](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_48x48.png) | ![Mozilla Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox/firefox_48x48.png) ![Mozilla Firefox Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox-developer-edition/firefox-developer-edition_48x48.png) | ![Google Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome/chrome_48x48.png) ![Google Chrome Canary](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/archive/chrome-canary_19-48/chrome-canary_19-48_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera/opera_48x48.png) ![Opera Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera-developer/opera-developer_48x48.png)
| --- | --- | --- | --- | ---
| 11 | 12+ | latest | latest | latest


#### Linux x64
| ![Mozilla Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox/firefox_48x48.png) ![Mozilla Firefox Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox-developer-edition/firefox-developer-edition_48x48.png) | ![Google Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome/chrome_48x48.png) ![Google Chrome Canary](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/archive/chrome-canary_19-48/chrome-canary_19-48_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera/opera_48x48.png) ![Opera Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera-developer/opera-developer_48x48.png)
| --- | --- | ---
| latest | latest | latest


#### Mac OS X
| ![Mozilla Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox/firefox_48x48.png) ![Mozilla Firefox Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox-developer-edition/firefox-developer-edition_48x48.png) | ![Google Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome/chrome_48x48.png) ![Google Chrome Canary](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/archive/chrome-canary_19-48/chrome-canary_19-48_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera/opera_48x48.png) ![Opera Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera-developer/opera-developer_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari/safari_48x48.png) ![Safari Technology Preview](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari-technology-preview/safari-technology-preview_48x48.png)
| --- | --- | --- | ---
| latest | latest | latest | 7+


#### Android 4.4.4 and above

| ![Mozilla Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox/firefox_48x48.png) | ![Google Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome/chrome_48x48.png) ![Google Chrome Dev](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome-dev/chrome-dev_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera/opera_48x48.png) | ![Android WebView](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/android-webview-beta/android-webview-beta_48x48.png)
| --- | --- | --- | ---
| latest | latest | latest | latest

#### iOS 7.1 and above
| ![Mozilla Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox/firefox_48x48.png) | ![Google Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome/chrome_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera/opera_48x48.png) | ![Safari for iOS](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari-ios/safari-ios_48x48.png)
| --- | --- | --- | ---
| latest | latest | latest | 7+

### [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)

ECMAScript Internationalization API for `locale`. For more details please visit [Can I use... Intl?](http://caniuse.com/#search=intl):


| ![Internet Explorer](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/internet-explorer/internet-explorer_48x48.png) | ![Microsoft Edge](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/edge/edge_48x48.png) | ![Mozilla Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox/firefox_48x48.png) ![Mozilla Firefox Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/firefox-developer-edition/firefox-developer-edition_48x48.png) | ![Google Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/chrome/chrome_48x48.png) ![Google Chrome Canary](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/archive/chrome-canary_19-48/chrome-canary_19-48_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera/opera_48x48.png) ![Opera Developer Edition](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/opera-developer/opera-developer_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari/safari_48x48.png) ![Safari Technology Preview](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/35.1.0/safari-technology-preview/safari-technology-preview_48x48.png)
| --- | --- | --- | --- | --- | --- |
| 11 | 12+ | latest | latest | latest | 10+ **
## License

___** [Intl Polyfill for unsupported browsers](https://github.com/andyearnshaw/Intl.js)___
[MIT License](http://motss.mit-license.org/) © Rong Sen Ng

## Throughput
[![Throughput Graph](https://graphs.waffle.io/motss/app-datepicker/throughput.svg)](https://waffle.io/motss/app-datepicker/metrics/throughput)
[2-x-url]: https://github.com/motss/app-datepicker/tree/2.x
[3-x-url]: https://github.com/motss/app-datepicker/tree/3.x
[polymer-2-url]: https://polymer-library.polymer-project.org/2.0/docs/devguide/feature-overview
[polymer-3-url]: https://polymer-library.polymer-project.org/3.0/docs/devguide/feature-overview

## License
[MIT License](http://motss.mit-license.org/) © Rong Sen Ng
[intl-polyfill-url]: https://github.com/andyearnshaw/Intl.js
[web-animations-js-polyfill-url]: https://www.npmjs.com/package/web-animations-js
[polymer-3-browser-support-url]: https://polymer-library.polymer-project.org/3.0/docs/browsers
42 changes: 0 additions & 42 deletions animations/datepicker-slide-from-bottom-animation.html

This file was deleted.

44 changes: 0 additions & 44 deletions animations/datepicker-slide-from-left-animation.html

This file was deleted.

Loading

0 comments on commit 0e8bcc5

Please sign in to comment.