daily pastebin goal
15%
SHARE
TWEET

Untitled

a guest Oct 12th, 2018 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { LitElement, html } from '@polymer/lit-element'
  2. import { classMap } from 'lit-html/directives/classMap'
  3.  
  4. class MyDialog extends LitElement {
  5.  
  6.   constructor () {
  7.     super()
  8.     this.visible = false
  9.   }
  10.  
  11.   static get properties () {
  12.     return {
  13.       visible: {type: Boolean}
  14.     }
  15.   }
  16.  
  17.   render () {
  18.     console.log('Visible:', this.visible)
  19.     return html`
  20. <div class="${classMap({dialog: true, hidden: !this.visible, visible: this.visible})}">
  21.     <h1 class="title ">Title</h1>
  22.     <p class="content">This is a dialog</p>
  23.     <div class="buttons">
  24.       <button class="accept" @click="${() => this.dispatchEvent(new CustomEvent('dialog.accept'))}">Ok</button>
  25.       <button class="cancel" @click="${() => this.dispatchEvent(new CustomEvent('dialog.cancel'))}">Cancel</button>    
  26.     </div>
  27. </div>`
  28.   }
  29. }
  30.  
  31. customElements.define('my-dialog', MyDialog)
  32.  
  33. class MyApp extends LitElement {
  34.   constructor () {
  35.     super()
  36.     this.dialogVisible = false
  37.   }
  38.  
  39.   static get properties () {
  40.     return {
  41.       dialogVisible: {type: Boolean}
  42.     }
  43.   }
  44.  
  45.   render () {
  46.     console.log('Dialog visible:', this.dialogVisible)
  47.     return html`
  48. <div>
  49.     <button @click="${this.toggleDialog.bind(this)}">Toggle dialog</button>
  50.     <my-dialog ?visible="${this.dialogVisible}"
  51.                @dialog.accept="${this.closeDialog.bind(this)}"
  52.                @dialog.cancel="${this.closeDialog.bind(this)}"></my-dialog>
  53. </div>`
  54.   }
  55.  
  56.   toggleDialog (e) {
  57.     this.dialogVisible = !this.dialogVisible
  58.     console.log(this.dialogVisible)
  59.   }
  60.  
  61.   closeDialog (e) {
  62.     console.log(e)
  63.     this.dialogVisible = false
  64.   }
  65. }
  66.  
  67. customElements.define('my-app', MyApp)
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top