VulpesOS/assets/webapps/keyboard.gaiamobile.org/shared/elements/gaia-toast/gaia-toast.js

;;(function(define){define(function(require,exports,module){'use strict';var component=require('gaia-component');module.exports=component.register('gaia-toast',{created:function(){this.setupShadowRoot();this.els={inner:this.shadowRoot.querySelector('.inner'),bread:this.shadowRoot.querySelector('.bread')};this.timeout=this.getAttribute('timeout');},show:function(){this.els.bread.removeEventListener('animationend',this.onAnimateOutEnd);clearTimeout(this.hideTimeout);this.els.inner.classList.add('visible');var reflow=this.els.inner.offsetTop;this.els.bread.classList.remove('animate-out');this.els.bread.classList.add('animate-in');this.hideTimeout=setTimeout(this.hide.bind(this),this.timeout);},hide:function(){var self=this;clearTimeout(this.hideTimeout);this.els.bread.classList.remove('animate-in');this.els.bread.classList.add('animate-out');this.els.bread.removeEventListener('animationend',this.onAnimateOutEnd);this.onAnimateOutEnd=function(){self.els.bread.removeEventListener('animationend',self.onAnimateOutEnd);self.els.bread.classList.remove('animate-out');self.els.inner.classList.remove('visible');};this.els.bread.addEventListener('animationend',this.onAnimateOutEnd);},animateOut:function(){},attrs:{timeout:{get:function(){return this.getAttribute('timeout')||1000;},set:function(value){var current=this.getAttribute('timeout');if(current==value){return;}
else if(!value){this.removeAttribute('timeout');}
else{this.setAttribute('timeout',value);}}}},template:`
    <div class="inner">
      <div class="bread">
        <content></content>
      </div>
    </div>

    <style>

    /** Host
     ---------------------------------------------------------*/

    :host {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      font-style: italic;
      text-align: center;
      z-index: 100;

      color:
        var(--highlight-color);
    }

    /** Inner
      ---------------------------------------------------------*/

    .inner {
      display: none;
      padding: 16px;
    }

    .inner.visible {
      display: block;
    }

    /**
     ---------------------------------------------------------*/

    .bread {
      max-width: 600px;
      margin: 0 auto;
      padding: 16px;
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
      transform: translateY(100%);

      background:
        var(--background-plus,
        white);
    }

    .bread.animate-in {
      animation-name: gaia-toast-enter;
      animation-fill-mode: forwards;
      animation-duration: 300ms;
    }

    .bread.animate-out {
      animation-name: gaia-toast-leave;
      animation-duration: 600ms;
      transform: translateY(0%);
    }

    </style>
  `,globalCss:`
    @keyframes gaia-toast-enter {
      0% {
        transform: translateY(100%);
        opacity: 0;
      }

      40% {
        opacity: 0;
      }

      100% {
        transform: translateY(0%);
        opacity: 1;
      }
    }

    @keyframes gaia-toast-leave {
      0% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }
  `});});})(typeof define=='function'&&define.amd?define:(function(n,w){'use strict';return typeof module=='object'?function(c){c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){return w[n];},m.exports,m);w[n]=m.exports;};})('gaia-toast',this));