Last active
November 3, 2017 18:38
-
-
Save andrIvash/6104b5b0226acdd0ee5101e1a8425613 to your computer and use it in GitHub Desktop.
N-decl custom element. Plural-rules of the data view.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| made under the impression of the idea - https://github.com/tc39/proposal-intl-plural-rules | |
| Writed by Andriy Ivashchenko | |
| --> | |
| <!DOCTYPE html> | |
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>N-decl custom element</title> | |
| <script> | |
| customElements.define("n-decl", class extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.attachShadow({mode: 'open'}); | |
| } | |
| static get observedAttributes() {return ['value', 'cases']; } | |
| get value() { return +this.getAttribute("value") } | |
| get cases() { return this.getAttribute("cases").trim().split(/\s*,\s*/) } | |
| attributeChangedCallback() { | |
| this.renderElement(); | |
| } | |
| connectedCallback() { | |
| this.renderElement(); | |
| } | |
| renderElement() { | |
| const initial = [2, 0, 1, 1, 1, 2]; | |
| const result = this.cases[ | |
| (this.value % 100 > 4 && this.value % 100 < 20) ? | |
| 2 : initial[(this.value % 10 < 5) ? this.value % 10 : 5] | |
| ]; | |
| this.shadowRoot.innerHTML = ` | |
| <slot>${this.value}</slot> | |
| ${result} | |
| `; | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!-- | |
| just add options and the value. The resulting view changes dynamically as values change | |
| --> | |
| <n-decl cases="фотография,фотографии,фотографий" value="1"></n-decl> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment