Last active
December 16, 2016 09:09
-
-
Save Thanood/94945f3ead604a6b86ac2c318b51c4e9 to your computer and use it in GitHub Desktop.
Aurelia-Materialize bridge wait cursor
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="./md-wait-cursor"></require> | |
| <div> | |
| Thanks to @MaximBalaganskiy! | |
| </div> | |
| <p> | |
| <button md-button md-waves="color: light;" md-wait-cursor.bind="loading">wait</button> | |
| <md-input md-wait-cursor.bind="loading" md-label="text field"></md-input> | |
| </p> | |
| <table> | |
| <thead> | |
| <th>H1</th> | |
| <th>H2</th> | |
| </thead> | |
| <tbody> | |
| <tr > | |
| <td>c1</td> | |
| <td>c2</td> | |
| </tr> | |
| <tr md-wait-cursor.bind="loading"> | |
| <td>c3</td> | |
| <td>c4</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <button md-button md-waves="color: light;" click.delegate="toggleLoading()">toggle loading</button> | |
| </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 { | |
| loading = false; | |
| toggleLoading() { | |
| this.loading =!this.loading; | |
| } | |
| } |
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> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body aurelia-app="main"> | |
| <h1>Loading...</h1> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script> | |
| <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-materialize-bundles/0.20.2/config2.js"></script> | |
| <script> | |
| System.import('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
| /******************************************************************************* | |
| * The following two lines enable async/await without using babel's | |
| * "runtime" transformer. Uncomment the lines if you intend to use async/await. | |
| * | |
| * More info here: https://github.com/jdanyow/aurelia-plunker/issues/2 | |
| */ | |
| //import regeneratorRuntime from 'babel-runtime/regenerator'; | |
| //window.regeneratorRuntime = regeneratorRuntime; | |
| /******************************************************************************/ | |
| import 'materialize'; | |
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() ); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
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, TemplatingEngine} from 'aurelia-framework'; | |
| @customAttribute('md-wait-cursor') | |
| @inject(Element, TemplatingEngine) | |
| export class MdWaitCursorCustomAttribute { | |
| constructor(element, templatingEngine) { | |
| this.element = element; | |
| this.templatingEngine = templatingEngine; | |
| } | |
| value = false; | |
| valueChanged(newVal: boolean) { | |
| if (newVal && this.trResizeDelegate) { | |
| this.trResizeDelegate(); | |
| } | |
| } | |
| trResizeDelegate: () => any; | |
| attached() { | |
| switch (this.element.tagName) { | |
| case "MD-INPUT": this.attachedMdInput(); break; | |
| case "BUTTON": this.attachedButton(); break; | |
| case "TR": this.attachedTr(); break; | |
| } | |
| } | |
| attachedMdInput() { | |
| let inputField = this.element.getElementsByClassName("input-field"); | |
| if (!inputField) { | |
| return; | |
| } | |
| let progress: Element = document.createElement("div"); | |
| progress.innerHTML = "<md-progress md-type='circular' md-size='small' show.bind='value' style='position: absolute; left: 100%; transform: translateX(-100%);'></md-progress>"; | |
| progress = progress.children[0]; | |
| inputField[0].insertAdjacentElement("afterbegin", progress); | |
| var view = this.templatingEngine.enhance(progress); | |
| view.bind(this); | |
| view.attached(); | |
| } | |
| attachedButton() { | |
| let progress = document.createElement("div"); | |
| progress.innerHTML = "<div show.bind='value' style='position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; background: white; z-index: 998;'></div><md-progress md-type='circular' md-size='small' show.bind='value' style='position: absolute; left: 50%; transform: translateX(-50%); z-index: 999;'></md-progress>"; | |
| progress.style.position = "relative"; | |
| progress.style.display = "inline-block"; | |
| progress.classList.add("button-wait-cursor-wrapper"); | |
| this.element.insertAdjacentElement("beforebegin", progress); | |
| var view = this.templatingEngine.enhance(progress); | |
| view.bind(this); | |
| view.attached(); | |
| progress.appendChild(this.element); | |
| } | |
| attachedTr() { | |
| let tr = this.element; | |
| let firstTd = this.element.firstElementChild; | |
| let progress = $( | |
| "<div show.bind='value'>" + | |
| "<div style='opacity: 0.7; background: white; width: 100%; height: 100%;'></div>" + | |
| "<md-progress md-type='circular' md-size='small' style='position: absolute; left: 50%; top: 50%; height: 36px; transform: translateX(-50%) translateY(-50%);'></md-progress>" + | |
| "</div>"); | |
| this.trResizeDelegate = () => { | |
| if (!this.value) { | |
| return; | |
| } | |
| let pos = $(tr).position(); | |
| $(progress).css({ | |
| position: "absolute", | |
| top: pos.top, | |
| left: pos.left, | |
| width: $(tr).css('width'), | |
| height: $(tr).css('height') | |
| }); | |
| }; | |
| this.trResizeDelegate(); | |
| var view = this.templatingEngine.enhance(progress[0]); | |
| view.bind(this); | |
| view.attached(); | |
| $(window).resize(this.trResizeDelegate); | |
| progress[0].onclick = (ev) => { ev.cancelBubble = true; }; | |
| firstTd.appendChild(progress[0]); | |
| } | |
| detached() { | |
| if (this.trResizeDelegate) { | |
| $(window).off("resize", this.trResizeDelegate); | |
| this.trResizeDelegate = null; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment