moment-element

├── .gitignore ├── .eslintrc.json ├── test ├── .eslintrc.json ├── index.html └── moment-element.html ├── moment-import.html ├── moment-with-locales-import.html ├── .travis.yml ├── index.html ├── bower.json ├── README.md ├── LICENSE ├── CONTRIBUTING.md ├── demo └── index.html ├── moment-element.html └── analysis.json /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components/ 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "ibmresearch/html", 3 | "globals": { 4 | "moment": false, 5 | "Polymer": false 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /test/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "assert": false, 7 | "fixture": false, 8 | "WCT": false 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /moment-import.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /moment-with-locales-import.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | dist: trusty 3 | sudo: false 4 | node_js: stable 5 | cache: 6 | directories: 7 | - "node_modules" 8 | addons: 9 | firefox: latest 10 | apt: 11 | sources: 12 | - google-chrome 13 | packages: 14 | - google-chrome-stable 15 | install: 16 | - npm install -g polymer-cli 17 | - npm install -g eslint eslint-plugin-html eslint-config-ibmresearch 18 | - polymer install 19 | before_script: 20 | - eslint . --ext js,html --ignore-path .gitignore 21 | script: 22 | - xvfb-run polymer test 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | moment-element 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | moment-element tests 14 | 15 | 16 | 17 | 18 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "moment-element", 3 | "description": "Web Component (with Polymer) wrapper for the moment library", 4 | "authors": [ 5 | "Abdón Rodríguez Davila " 6 | ], 7 | "keywords": [ 8 | "web-component", 9 | "polymer", 10 | "moment", 11 | "date", 12 | "time", 13 | "parse", 14 | "format" 15 | ], 16 | "license": "MIT", 17 | "repository": { 18 | "type": "git", 19 | "url": "git://github.com/abdonrd/moment-element.git" 20 | }, 21 | "main": "moment-element.html", 22 | "dependencies": { 23 | "moment": "~2.18.0", 24 | "polymer": "Polymer/polymer#^2.0.0" 25 | }, 26 | "devDependencies": { 27 | "iron-component-page": "PolymerElements/iron-component-page#^3.0.0", 28 | "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0", 29 | "web-component-tester": "Polymer/web-component-tester#^6.0.0", 30 | "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build status](https://travis-ci.org/abdonrd/moment-element.svg?branch=master)](https://travis-ci.org/abdonrd/moment-element) 2 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/abdonrd/moment-element) 3 | 4 | ## \ 5 | 6 | Web Component (with Polymer) wrapper for the [moment](https://github.com/moment/moment) library. 7 | 8 | Example: 9 | 26 | ```html 27 | [[outputA]] 28 | 29 | 30 |

[[outputB]]

31 | ``` 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Abdón Rodríguez Davila (@abdonrd) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /test/moment-element.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | moment-element test 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 25 | 26 | 27 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # abdonrd elements 2 | 3 | ## Guide for Contributors 4 | 5 | abdonrd elements are built in the open, and Abdón eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: 6 | 7 | ### Filing Issues 8 | 9 | **If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: 10 | 11 | 1. **Who will use the feature?** _“As someone filling out a form…”_ 12 | 2. **When will they use the feature?** _“When I enter an invalid value…”_ 13 | 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ 14 | 15 | **If you are filing an issue to report a bug**, please provide: 16 | 17 | 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: 18 | 19 | ```markdown 20 | The `element-foo` element causes the page to turn pink when clicked. 21 | 22 | ## Expected outcome 23 | 24 | The page stays the same color. 25 | 26 | ## Actual outcome 27 | 28 | The page turns pink. 29 | 30 | ## Steps to reproduce 31 | 32 | 1. Put a `element-foo` element in the page. 33 | 2. Open the page in a web browser. 34 | 3. Click the `element-foo` element. 35 | ``` 36 | 37 | 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output). 38 | 39 | 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. 40 | 41 | ### Submitting Pull Requests 42 | 43 | **Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Abdón and community before diving into a pull request. 44 | 45 | When submitting pull requests, please provide: 46 | 47 | 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: 48 | 49 | ```markdown 50 | (For a single issue) 51 | Fixes #20 52 | 53 | (For multiple issues) 54 | Fixes #32, fixes #40 55 | ``` 56 | 57 | 2. **A succinct description of the design** used to fix any related issues. For example: 58 | 59 | ```markdown 60 | This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `element-foo` is clicked. 61 | ``` 62 | 63 | 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. 64 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | moment-element demo 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 27 | 28 | 29 | 30 |

31 |

Current date and date from string (ISO 8601 and another)

32 | 33 | 42 | 43 | 44 |

Date from string + format

45 | 46 | 55 | 56 | 57 |

Date from now or from custom date

58 | 59 | 67 | 68 | 69 |

Date to now or to custom date

70 | 71 | 79 | 80 | 81 |

Use setInterval to update the output

82 | 83 | 97 | 98 |

99 | 100 | 101 | -------------------------------------------------------------------------------- /moment-element.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 | 33 | 34 | 142 | 143 | -------------------------------------------------------------------------------- /analysis.json: -------------------------------------------------------------------------------- 1 | { 2 | "schema_version": "1.0.0", 3 | "elements": [ 4 | { 5 | "description": "Web Component (with Polymer) wrapper for the [moment](https://github.com/moment/moment) library.\n\nExamples:\n\n [[outputA]]\n\n \n

[[outputB]]

", 6 | "summary": "", 7 | "path": "moment-element.html", 8 | "properties": [ 9 | { 10 | "name": "datetime", 11 | "type": "string", 12 | "description": "The input datetime. If don't set the datetime, the datetime will be now.\nFor consistent results, parsing anything other than ISO 8601 strings\nwith the `inputFormat` property. More information in [moment String](http://momentjs.com/docs/#/parsing/string/).", 13 | "privacy": "public", 14 | "sourceRange": { 15 | "start": { 16 | "line": 43, 17 | "column": 8 18 | }, 19 | "end": { 20 | "line": 48, 21 | "column": 9 22 | } 23 | }, 24 | "metadata": { 25 | "polymer": {} 26 | } 27 | }, 28 | { 29 | "name": "inputFormat", 30 | "type": "string", 31 | "description": "The datetime input format. An string using the\n[moment String + Format](http://momentjs.com/docs/#/parsing/string-format/).", 32 | "privacy": "public", 33 | "sourceRange": { 34 | "start": { 35 | "line": 54, 36 | "column": 8 37 | }, 38 | "end": { 39 | "line": 57, 40 | "column": 9 41 | } 42 | }, 43 | "metadata": { 44 | "polymer": {} 45 | }, 46 | "defaultValue": "\"\"" 47 | }, 48 | { 49 | "name": "outputFormat", 50 | "type": "string", 51 | "description": "The datetime output format. Options are 'now' or datetime using the\n[moment Format](http://momentjs.com/docs/#/displaying/format/).", 52 | "privacy": "public", 53 | "sourceRange": { 54 | "start": { 55 | "line": 63, 56 | "column": 8 57 | }, 58 | "end": { 59 | "line": 66, 60 | "column": 9 61 | } 62 | }, 63 | "metadata": { 64 | "polymer": {} 65 | }, 66 | "defaultValue": "\"\"" 67 | }, 68 | { 69 | "name": "from", 70 | "type": "string", 71 | "description": "Relative time using [moment time from now](http://momentjs.com/docs/#/displaying/fromnow/)\nor [moment Time from datetime](http://momentjs.com/docs/#/displaying/from/).", 72 | "privacy": "public", 73 | "sourceRange": { 74 | "start": { 75 | "line": 72, 76 | "column": 8 77 | }, 78 | "end": { 79 | "line": 75, 80 | "column": 9 81 | } 82 | }, 83 | "metadata": { 84 | "polymer": {} 85 | }, 86 | "defaultValue": "\"\"" 87 | }, 88 | { 89 | "name": "to", 90 | "type": "string", 91 | "description": "Relative time using [moment Time to now](http://momentjs.com/docs/#/displaying/tonow/)\nor [moment Time to datetime](http://momentjs.com/docs/#/displaying/to/).", 92 | "privacy": "public", 93 | "sourceRange": { 94 | "start": { 95 | "line": 81, 96 | "column": 8 97 | }, 98 | "end": { 99 | "line": 84, 100 | "column": 9 101 | } 102 | }, 103 | "metadata": { 104 | "polymer": {} 105 | }, 106 | "defaultValue": "\"\"" 107 | }, 108 | { 109 | "name": "output", 110 | "type": "string", 111 | "description": "The output datetime.", 112 | "privacy": "public", 113 | "sourceRange": { 114 | "start": { 115 | "line": 89, 116 | "column": 8 117 | }, 118 | "end": { 119 | "line": 92, 120 | "column": 9 121 | } 122 | }, 123 | "metadata": { 124 | "polymer": { 125 | "notify": true 126 | } 127 | } 128 | }, 129 | { 130 | "name": "__moment", 131 | "type": "Object", 132 | "description": "Stores the moment object", 133 | "privacy": "private", 134 | "sourceRange": { 135 | "start": { 136 | "line": 98, 137 | "column": 8 138 | }, 139 | "end": { 140 | "line": 101, 141 | "column": 9 142 | } 143 | }, 144 | "metadata": { 145 | "polymer": { 146 | "readOnly": true 147 | } 148 | } 149 | } 150 | ], 151 | "methods": [ 152 | { 153 | "name": "_computeMoment", 154 | "description": "", 155 | "privacy": "protected", 156 | "sourceRange": { 157 | "start": { 158 | "line": 108, 159 | "column": 6 160 | }, 161 | "end": { 162 | "line": 110, 163 | "column": 7 164 | } 165 | }, 166 | "metadata": {}, 167 | "params": [ 168 | { 169 | "name": "datetime" 170 | }, 171 | { 172 | "name": "inputFormat" 173 | } 174 | ] 175 | }, 176 | { 177 | "name": "getMoment", 178 | "description": "", 179 | "privacy": "public", 180 | "sourceRange": { 181 | "start": { 182 | "line": 112, 183 | "column": 6 184 | }, 185 | "end": { 186 | "line": 114, 187 | "column": 7 188 | } 189 | }, 190 | "metadata": {}, 191 | "params": [] 192 | }, 193 | { 194 | "name": "update", 195 | "description": "Recomputes the output.", 196 | "privacy": "public", 197 | "sourceRange": { 198 | "start": { 199 | "line": 119, 200 | "column": 6 201 | }, 202 | "end": { 203 | "line": 123, 204 | "column": 7 205 | } 206 | }, 207 | "metadata": {}, 208 | "params": [] 209 | }, 210 | { 211 | "name": "_computeOutput", 212 | "description": "", 213 | "privacy": "protected", 214 | "sourceRange": { 215 | "start": { 216 | "line": 125, 217 | "column": 6 218 | }, 219 | "end": { 220 | "line": 138, 221 | "column": 7 222 | } 223 | }, 224 | "metadata": {}, 225 | "params": [ 226 | { 227 | "name": "_moment" 228 | }, 229 | { 230 | "name": "outputFormat" 231 | }, 232 | { 233 | "name": "from" 234 | }, 235 | { 236 | "name": "to" 237 | } 238 | ] 239 | } 240 | ], 241 | "staticMethods": [], 242 | "demos": [ 243 | { 244 | "url": "demo/index.html", 245 | "description": "" 246 | } 247 | ], 248 | "metadata": {}, 249 | "sourceRange": { 250 | "start": { 251 | "line": 34, 252 | "column": 12 253 | }, 254 | "end": { 255 | "line": 139, 256 | "column": 5 257 | } 258 | }, 259 | "privacy": "public", 260 | "superclass": "HTMLElement", 261 | "attributes": [ 262 | { 263 | "name": "datetime", 264 | "description": "The input datetime. If don't set the datetime, the datetime will be now.\nFor consistent results, parsing anything other than ISO 8601 strings\nwith the `inputFormat` property. More information in [moment String](http://momentjs.com/docs/#/parsing/string/).", 265 | "sourceRange": { 266 | "start": { 267 | "line": 43, 268 | "column": 8 269 | }, 270 | "end": { 271 | "line": 48, 272 | "column": 9 273 | } 274 | }, 275 | "metadata": {}, 276 | "type": "string" 277 | }, 278 | { 279 | "name": "input-format", 280 | "description": "The datetime input format. An string using the\n[moment String + Format](http://momentjs.com/docs/#/parsing/string-format/).", 281 | "sourceRange": { 282 | "start": { 283 | "line": 54, 284 | "column": 8 285 | }, 286 | "end": { 287 | "line": 57, 288 | "column": 9 289 | } 290 | }, 291 | "metadata": {}, 292 | "type": "string" 293 | }, 294 | { 295 | "name": "output-format", 296 | "description": "The datetime output format. Options are 'now' or datetime using the\n[moment Format](http://momentjs.com/docs/#/displaying/format/).", 297 | "sourceRange": { 298 | "start": { 299 | "line": 63, 300 | "column": 8 301 | }, 302 | "end": { 303 | "line": 66, 304 | "column": 9 305 | } 306 | }, 307 | "metadata": {}, 308 | "type": "string" 309 | }, 310 | { 311 | "name": "from", 312 | "description": "Relative time using [moment time from now](http://momentjs.com/docs/#/displaying/fromnow/)\nor [moment Time from datetime](http://momentjs.com/docs/#/displaying/from/).", 313 | "sourceRange": { 314 | "start": { 315 | "line": 72, 316 | "column": 8 317 | }, 318 | "end": { 319 | "line": 75, 320 | "column": 9 321 | } 322 | }, 323 | "metadata": {}, 324 | "type": "string" 325 | }, 326 | { 327 | "name": "to", 328 | "description": "Relative time using [moment Time to now](http://momentjs.com/docs/#/displaying/tonow/)\nor [moment Time to datetime](http://momentjs.com/docs/#/displaying/to/).", 329 | "sourceRange": { 330 | "start": { 331 | "line": 81, 332 | "column": 8 333 | }, 334 | "end": { 335 | "line": 84, 336 | "column": 9 337 | } 338 | }, 339 | "metadata": {}, 340 | "type": "string" 341 | }, 342 | { 343 | "name": "output", 344 | "description": "The output datetime.", 345 | "sourceRange": { 346 | "start": { 347 | "line": 89, 348 | "column": 8 349 | }, 350 | "end": { 351 | "line": 92, 352 | "column": 9 353 | } 354 | }, 355 | "metadata": {}, 356 | "type": "string" 357 | } 358 | ], 359 | "events": [ 360 | { 361 | "type": "CustomEvent", 362 | "name": "output-changed", 363 | "description": "Fired when the `output` property changes.", 364 | "metadata": {} 365 | } 366 | ], 367 | "styling": { 368 | "cssVariables": [], 369 | "selectors": [] 370 | }, 371 | "slots": [ 372 | { 373 | "description": "", 374 | "name": "", 375 | "range": { 376 | "file": "moment-element.html", 377 | "start": { 378 | "line": 30, 379 | "column": 4 380 | }, 381 | "end": { 382 | "line": 30, 383 | "column": 17 384 | } 385 | } 386 | } 387 | ], 388 | "tagname": "moment-element" 389 | } 390 | ] 391 | } 392 | --------------------------------------------------------------------------------