Luiz Henrique Canet Filho luizcanet
This file contains 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
| /* global HTMLElement, fetch */ | |
| import Router from '../modnes/router/router.js' | |
| export default class ModnesRepositories extends HTMLElement { | |
| async connectedCallback () { | |
| let response | |
| let data = [] | |
| const ROUTES = [ | |
| { | |
| path: '/router/repositories', |
This file contains 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
| /* global HTMLElement */ | |
| import Router from '../modnes/router/router.js' | |
| export default class RouterExampĺe extends HTMLElement { | |
| connectedCallback () { | |
| const ROUTES = [ | |
| { | |
| path: '/router/', | |
| tagName: 'about-modnes', | |
| modules: ['../../about-modnes/index.js'] |
This file contains 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
| <html> | |
| <head> | |
| <title>Router Anchor</title> | |
| <script href="path/to/@modnes/router/anchor/index.js" type="module"></script> | |
| </head> | |
| <body> | |
| <a href="/categories" is="router-anchor">Go To Categories</a> | |
| </body> | |
| </html> |
This file contains 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
| router.addRoute({ | |
| path: '/section/:param1/:param2/*', | |
| tagName: 'section-list' | |
| }) | |
| // When location is /section/book/50/any-string | |
| // and route path is /section/:param1/:param2/* | |
| let params = router.getParams() | |
| // params will be equal { param1: 'book', param2: '50' } |
This file contains 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
| import Router from "path/to/@modnes/router/router.js" | |
| let router = new Router(document.querySelector('main'), [ | |
| { | |
| path: '/posts', // will use this settings when accessing /posts | |
| tagName: 'post-list' // will put <post-list></post-list> inside <main></main> | |
| }, | |
| { | |
| path: '/posts/:id', // will provide the parameter 'id' with value 3 at /posts/3 | |
| tagName: 'post-article', |
luizcanet
/ custom-element.js
Last active
April 29, 2020 21:15
Custom elemen using Data Controller Module
This file contains 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
| /* global HTMLElement */ | |
| import DataController from '../modnes/data-controller/data-controller.js' | |
| export default class CustomElement extends HTMLElement { | |
| constructor () { | |
| super() | |
| this.dataController = new DataController(this) | |
| this.data = { | |
| text: 'Sample Text', | |
| seconds: { |
luizcanet
/ data-controller-bindform.js
Created
April 18, 2020 18:43
Data Controller bindForm() example
This file contains 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
| <form class="person-form"> | |
| <input type="text" name="person.name" /> | |
| <input type="range" name="person.age" /> | |
| <input type="text" name="person.bio" /> | |
| <input type="checkbox" name="person.active" /> | |
| // Values as Array | |
| <input type="checkbox" name="person.roles" value="admin" /> | |
| <input type="checkbox" name="person.roles" value="manager" checked /> | |
| <input type="checkbox" name="person.roles" value="user" checked /> |
luizcanet
/ data-controller-binddom.js
Last active
May 4, 2020 19:50
Data Controller bindDOM() example
This file contains 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
| const MAPPING_SET = [ | |
| { | |
| property: 'id', | |
| elements: document.querySelector('#test'), | |
| attributes: 'id' | |
| }, | |
| { | |
| property: 'date', | |
| elements: document.querySelector('.dates'), | |
| }, |
This file contains 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
| import DataController from "path/to/modnes-data-controller/data-controller.js" | |
| class Host extends EventTarget {} | |
| let host = new Host() | |
| let dataController = new DataController(host) | |
| host.addEventListener('dataUpdated', event => { | |
| console.log(event.detail) | |
| }) |
This file contains 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
| // scripts/basic-example.js | |
| import Carousel from '../node_modules/es-carousel/es-carousel.js' | |
| let basicExample = new Carousel(document.querySelector('.basic-carousel')) | |
| basicExample.enableControls() |
NewerOlder