Last active
October 14, 2016 10:09
-
-
Save Vallabharayudu/6a6f019fc33ad457c6c73f294725dda8 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> | |
| <h3 style="color:red;">Inside popover select boox change not updating</h3> | |
| <button class="btn btn-block btn-default" popover="title.bind: message; template-selector: #popoverTemplate; placement: bottom">Click here for popover</button> | |
| <div id="popoverTemplate"> | |
| <div class="popover" role="tooltip"> | |
| <div class="arrow"></div> | |
| <h3 class="popover-title"></h3> | |
| <div> | |
| <input type="checkbox" checked.bind="isUninvitedChecked" > | |
| <span>${isUninvitedChecked}</span> | |
| </div> | |
| <div> | |
| <input type="checkbox" checked.bind="isInvitedChecked"> | |
| <span>${isInvitedChecked}</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div styel="margin-top:200px;"> | |
| <h3>below Properties are changing on select box changing </h3> | |
| <div> | |
| <input type="checkbox" id="Uninvited" class="CheckBoxCustom" checked.bind="isUninvitedChecked" > <span>${isUninvitedChecked}</span> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="Invited" class="CheckBoxCustom" checked.bind="isInvitedChecked"> <span>${isInvitedChecked}</span> | |
| </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"; | |
| isUninvitedChecked = false; | |
| isInvitedChecked = false; | |
| getData() | |
| { | |
| var self = this; | |
| alert(self.isUninvitedChecked); | |
| alert(self.isInvitedChecked); | |
| } | |
| } |
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