Last active
July 21, 2017 01:36
-
-
Save AshleyGrant/5b560eac6deff0f1b0896c30a3f12f79 to your computer and use it in GitHub Desktop.
Aurelia Gist
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
| <template> | |
| <require from="./select2"></require> | |
| <h1>${message}</h1> | |
| <div select2></div> | |
| </template> |
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
| export class App { | |
| message = 'Hello World'; | |
| } |
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Aurelia</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js" crossorigin="anonymous"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> | |
| </head> | |
| <body aurelia-app> | |
| <h1>Loading...</h1> | |
| <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script> | |
| <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script> | |
| <script> | |
| require(['aurelia-bootstrapper']); | |
| </script> | |
| </body> | |
| </html> |
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
| <template> | |
| <input ref="myInput" value.bind="name" type="text" /> | |
| </template> |
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
| import {inject, customElement, bindable} from 'aurelia-framework'; | |
| @customElement('my-custom-element') | |
| @inject(Element) | |
| export class MyCustomElement { | |
| @bindable name; | |
| constructor(el) { | |
| this.el = el; | |
| } | |
| attached() { | |
| const attributes = this.el.attributes; | |
| for( const attr of attributes ) { | |
| let {name, value} = attr; | |
| if(name != 'au-target-id') { | |
| const dotLocation = name.indexOf('.'); | |
| if( dotLocation > -1 ) { | |
| name = name.substring(0, dotLocation); | |
| } | |
| if(name !== 'name') { | |
| this.myInput.setAttribute(name,value); | |
| } | |
| } | |
| } | |
| } | |
| } |
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
| import { customAttribute, inject , bindable, bindingMode} from 'aurelia-framework'; | |
| @customAttribute('select2') | |
| @inject(Element) | |
| export class Select2CustomAttribute { | |
| element; | |
| constructor(element) { | |
| this.element = element; | |
| } | |
| attached() { | |
| var self=this; | |
| $(this.element).select2( | |
| { | |
| // closeOnSelect: false, | |
| allowClear: true, | |
| ajax: { | |
| url: "https://api.github.com/search/repositories", | |
| dataType: 'json', | |
| delay: 250, | |
| data: function (params) { | |
| return { | |
| q: params.term, // search term | |
| page: params.page | |
| }; | |
| }, | |
| processResults: function (data, params) { | |
| // parse the results into the format expected by Select2 | |
| // since we are using custom formatting functions we do not need to | |
| // alter the remote JSON data, except to indicate that infinite | |
| // scrolling can be used | |
| params.page = params.page || 1; | |
| return { | |
| results: data.items, | |
| pagination: { | |
| more: (params.page * 30) < data.total_count | |
| } | |
| }; | |
| }, | |
| cache: true | |
| }, | |
| escapeMarkup: function (markup) { return markup; }, | |
| minimumInputLength:0, | |
| templateResult: function( repo ) | |
| { | |
| if (repo.loading) return repo.text; | |
| var markup = "<div class='select2-result-repository clearfix'>" + | |
| "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" + | |
| "<div class='select2-result-repository__meta'>" + | |
| "<div class='select2-result-repository__title'>" + repo.full_name + "</div>"; | |
| if (repo.description) { | |
| markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>"; | |
| } | |
| markup += "<div class='select2-result-repository__statistics'>" + | |
| "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" + | |
| "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" + | |
| "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" + | |
| "</div>" + | |
| "</div></div>"; | |
| return markup; | |
| }, | |
| templateSelection: function (repo) { return repo.full_name || repo.text; } , | |
| } | |
| ).on('change', evt => { | |
| if (!evt.originalEvent) { | |
| try{ | |
| this.element.dispatchEvent(new Event('change')); | |
| }catch(e){ | |
| // IE 11+ | |
| try{ | |
| let evt = document.createEvent('HTMLEvents'); | |
| evt.initEvent('change', false, true); | |
| this.element.dispatchEvent(evt); | |
| }catch(e){ | |
| console.log(e); | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment