Last active
February 28, 2019 09:37
-
-
Save fkleuver/909c7aa984477a465510abe2fd25c8a1 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 (custom attribute)</button> | |
| <button class="btn btn-block btn-default" popover="title.bind: message; template-selector: #popoverTemplate; placement: bottom">Custom popover (custom attribute)</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> | |
| <popover-element title.bind="message" placement="bottom"> | |
| </popover-element> | |
| <popover-element title.bind="message" placement="bottom"> | |
| <button slot="popoverTarget" class="btn btn-block btn-default"> | |
| Custom popover (custom element) | |
| </button> | |
| <div slot="popoverTemplate" class="popover" role="tooltip"> | |
| <div class="arrow"></div> | |
| <h3 class="popover-title"></h3> | |
| <div>Some custom html</div> | |
| <div>Message: ${message}</div> | |
| </div> | |
| </popover-element> | |
| </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", | |
| "src/popover-element" | |
| ]); | |
| 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
| <template> | |
| <div ref="target"> | |
| <slot name="popoverTarget"> | |
| <button class="btn btn-block btn-default">Default popover (custom element)</button> | |
| </slot> | |
| </div> | |
| <div ref="template"> | |
| <slot name="popoverTemplate"> | |
| <div class="popover" role="tooltip"> | |
| <div class="arrow"></div> | |
| <h3 class="popover-title"></h3> | |
| <div class="popover-content"></div> | |
| </div> | |
| </slot> | |
| </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
| import {customElement, bindable} from "aurelia-framework"; | |
| @customElement("popover-element") | |
| export class PopoverElement { | |
| public template: HTMLElement; | |
| public target: HTMLElement; | |
| @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: ""}) | |
| public title: (string | Function); | |
| @bindable({defaultValue: "click"}) | |
| public trigger: string; | |
| @bindable({defaultValue: { selector: "body", padding: 0 }}) | |
| public viewport: (string | Object | Function); | |
| public attached(): void { | |
| $(this.target.firstElementChild).popover({ | |
| animation: this.animation, | |
| container: this.container, | |
| delay: this.delay, | |
| html: this.html, | |
| placement: this.placement, | |
| selector: this.selector, | |
| template: this.template.firstElementChild.outerHTML, | |
| title: this.title, | |
| trigger: this.trigger, | |
| viewport: this.viewport | |
| }); | |
| } | |
| } |
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