genesis-popover.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="popperjs-import.html">

<dom-module id="genesis-popover">

  <template>

    <style>
      /* shadow DOM styles go here */

      :host {
        --genesis-popover-max-width:300px;
        --genesis-popover-min-height:10px;
        --genesis-popover-margin:10px;
        --genesis-popover-z-index:10000;
      }

      .popper {
        background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
        border-radius: var(--lumo-border-radius);
        box-shadow: 0 0 0 1px var(--lumo-contrast-10pct), var(--lumo-box-shadow-l);
        font-family: var(--lumo-font-family);
        font-size: var(--lumo-font-size-m);
        font-weight: 400;
        line-height: var(--lumo-line-height-s);
        letter-spacing: 0;
        text-transform: none;
        -webkit-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        padding: var(--lumo-space-wide-l);
        max-width: var(--genesis-popover-max-width);
        min-height: var(--genesis-popover-min-height);
        z-index: var(--genesis-popover-z-index);
      }

      .popper[x-placement^="bottom"] {
          margin-top: var(--genesis-popover-margin);
      }

      .popper[x-placement^="top"] {
          margin-bottom: var(--genesis-popover-margin);
      }

      .popper[x-placement^="right"] {
          margin-left: var(--genesis-popover-margin);
      }

      .popper[x-placement^="left"] {
          margin-right: var(--genesis-popover-margin);
      }

      .popper-visible {
        display: flex;
      }

      .popper-hidden {
        display: none;
      }


      .flex-component-mixin {
        @apply --flex-display-mixin;
      }

    </style>

    <!-- shadow DOM goes here -->
    <span id="popoverEmitter" on-click="togglePopper" class="flex-component-mixin">
      <slot></slot>
    </span>

    <div id="popoverContent" class$="[[popperClass]]" >
      <slot name="content"></slot>
    </div>

  </template>

  <script>
    class GenesisPopover extends Polymer.Element {

      static get is() {
        return 'genesis-popover';
      }

      constructor() {
        super();
      }

      ready(){
        super.ready();

        this.popperInstance = new Popper(
                this.$.popoverEmitter,
                this.$.popoverContent,
                {
                  placement: this.placement,
                  positionFixed:true,
                  modifiers: {
                    preventOverflow: {
                      boundariesElement: 'viewport',
                    },
                  },
                }
            );
      }

    _pressedChanged(newValue, oldValue) {
        if(newValue) {
          this.__scheduleUpdatePopperPosition();
          this.__makePopperVisible();
          this.__registerWindowHandlers();
          this.__dispatchPopperOpenedEvent();
        } else {
          this.__makePopperHidden();
          this.__unregisterWindowHandlers();
          if(oldValue) {
            this.__dispatchPopperClosedEvent();
          }
        }
      }

      togglePopper(event) {
        if(!event || !event.target.getAttribute('popover-ignore')){
          this.pressed = !this.pressed;
        }
      }

       __scheduleUpdatePopperPosition(){
          if(this.popperInstance) {
            this.popperInstance.scheduleUpdate();
          }
        }

      __makePopperVisible(){
        this.popperClass="popper popper-visible";
      }

      __makePopperHidden(){
        this.popperClass="popper popper-hidden";
      }

      __dispatchPopperOpenedEvent(){
        this.dispatchEvent(new CustomEvent('popper-opened', { opened: true }));
        }

      __dispatchPopperClosedEvent(){
        this.dispatchEvent(new CustomEvent('popper-closed', { closed: true }));
      }

      __registerWindowHandlers(){
        var that=this;

        if(!this.ignore_auto_close)
        {
          document.addEventListener("click", windowClick, true);
          var that=this;
          function windowClick(event) {
            if(that!==event.target.closest("genesis-popover"))
            {
              that.togglePopper();
            }
          }

          this.windowClickHandler=windowClick;
        }

        document.addEventListener('keydown', windowKeyDown, true);
        function windowKeyDown(event) {
           if(event.key==='Escape') {
            that.togglePopper();
          }
        }

          this.windowKeyDownHandler=windowKeyDown;
      }

      __unregisterWindowHandlers(){
        if(this.windowClickHandler) document.removeEventListener("click", this.windowClickHandler, true);
        if(this.windowKeyDownHandler) document.removeEventListener("keydown", this.windowKeyDownHandler, true);
      }

      static get properties() {
        return {
          pressed: {
            type: Boolean,
            reflectToAttribute: true,
            value: false,
            notify: true,
            observer: '_pressedChanged'
          },
          placement: {
            type: String,
            value: 'bottom',
            reflectToAttribute: true
          },
          popperClass: {
            type: String,
            value: 'popper popper-hidden'
          },
          ignore_auto_close: {
            type: Boolean,
            value: false
          }
        }
      }
    }
    window.customElements.define(GenesisPopover.is, GenesisPopover);
  </script>

</dom-module>