Last active
October 10, 2016 17:46
-
-
Save fkleuver/8f8d9550677d0472acb132d75a4afd74 to your computer and use it in GitHub Desktop.
Aurelia TypeScript - Popover
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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.6/bluebird.min.js"></script> | |
| </head> | |
| <body aurelia-app="src/main"> | |
| <script src="https://cdn.rawgit.com/aurelia/aurelia/master/scripts/system.js"></script> | |
| <script src="https://cdn.rawgit.com/aurelia/aurelia/master/scripts/config-typescript.js"></script> | |
| <script src="https://cdn.rawgit.com/aurelia/aurelia/master/scripts/aurelia-core.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
| <template> | |
| <h1>${message}</h1> | |
| <button class="btn btn-block btn-default" popover="title.bind: message; placement: top">Default popover</button> | |
| <button class="btn btn-block btn-default" popover="title.bind: message; template-selector: #popoverTemplate; placement: bottom; html: true">Custom popover</button> | |
| <div id="popoverTemplate"> | |
| <div class="popover" role="tooltip"> | |
| <div class="arrow"></div> | |
| <h3 class="popover-title"></h3> | |
| <div>Some custom html</div> | |
| </div> | |
| </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
| export function configure(aurelia) { | |
| aurelia.use | |
| .basicConfiguration() | |
| .globalResources([ | |
| "src/popover" | |
| ]); | |
| aurelia.start().then(() => aurelia.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 {inject, customAttribute, bindable, DOM} from "aurelia-framework"; | |
| @customAttribute("popover") | |
| @inject(DOM.Element) | |
| export class Popover { | |
| public element: HTMLElement; | |
| constructor(element) { | |
| this.element = element; | |
| } | |
| @bindable({defaultValue: true}) | |
| public animation: boolean; | |
| @bindable({defaultValue: false}) | |
| public container: (string | false); | |
| @bindable({defaultValue: 0}) | |
| public delay: (number | object); | |
| @bindable({defaultValue: false}) | |
| public html: boolean; | |
| @bindable({defaultValue: "right"}) | |
| public placement: (string | Function); | |
| @bindable({defaultValue: false}) | |
| public selector: (string | false); | |
| @bindable({defaultValue: `<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>`}) | |
| public template: string; | |
| @bindable({defaultValue: false}) | |
| public templateSelector: (string | false); | |
| @bindable({defaultValue: ""}) | |
| public title: (string | Function); | |
| @bindable({defaultValue: "click"}) | |
| public trigger: string; | |
| @bindable({defaultValue: { selector: "body", padding: 0 }}) | |
| public viewport: (string | Object | Function); | |
| public attached(): void { | |
| let template; | |
| if (this.templateSelector) { | |
| const templateElement = document.querySelector(this.templateSelector); | |
| template = templateElement.innerHTML; | |
| } else { | |
| template = this.template; | |
| } | |
| $(this.element).popover({ | |
| animation: this.animation, | |
| container: this.container, | |
| delay: this.delay, | |
| html: this.html, | |
| placement: this.placement, | |
| selector: this.selector, | |
| template: template, | |
| title: this.title, | |
| trigger: this.trigger, | |
| viewport: this.viewport | |
| }); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment