nylon-dialog.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../aqa-font/aqa-mitr-font.html">
<dom-module id="nylon-dialog">
  <template>
    <style>
      #contentSlot> ::slotted(:not(slot):not(.nylon-selected)) {
        display: none !important;
      }
      /* :host > ::slotted(:not(slot):not(.nylon-selected)) {
          display: none !important;
          background-color: #3399ff
      }   */

      .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%; 
        /* overflow: auto;  */
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4)
      }

      .modal-content {
        background-color: #fefefe;
        border: 1px solid #fefefe;
        border-radius: 4px;
        margin: 2rem auto 2rem auto;
        width: 500px;
        max-width: 800px;
        overflow-x: auto;
        box-sizing: border-box;
      }

      .modal-header {
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
        border-top-right-radius: 0.3rem;
        border-top-left-radius: 0.3rem;
        position: relative;
      }

      .modal-title {
        font-family: MitrLight;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.5;
        font-size: 1.2rem;
        font-weight: normal;
      }
      /* #contentSlot> ::slotted(.modal-body) {
        position: relative;
        -webkit-box-flex: 1;
        flex: 1 1 auto;
        padding: 1rem;
      }   */
      /* #contentSlot> ::slotted(.modal-footer) {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: end;
        justify-content: flex-end;
        padding: 1rem;
        border-top: 1px solid #e9ecef;
      }  */
      /* The Close Button */

      .close {
        color: #aaaaaa;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        top: 10px;
        right: 15px;
      }

      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }
    </style>
    <div class="modal" id="modal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="close" id="close" on-click="close">&times;</div>
          <h5 class="modal-title">[[label]]</h5>
        </div>
        <div id="contentSlot">
          <slot></slot>
        </div>
      </div>
    </div>

  </template>

  <script>
    /**
     * `nylon-dialog`
     * 
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */

    class NylonDialog extends Polymer.Element {
      static get is() { return 'nylon-dialog'; }
      static get properties() {
        return {
          opened: Boolean,
          path: {
            type: String,
            observer: '_pathChanged',
            value: ''
          },
          label: String,
          width:String
        };
      }

      constructor() {
        super()
        window.Nylon = window.Nylon || {}
        window.Nylon.dialog = {}

        window.Nylon.dialog.open = (path, params) => {
          this.close()
          if (path) {
            this.params = params
            this.path = ''
            this.path = path
            this.open()
          }
        }
        window.Nylon.dialog.close = () => {
          this.close()
        }
      }

      ready() {
        super.ready();
        this.modal = this.$.modal;
        var btnClose = this.$.close;
        if (this.opened) {
          this.modal.style.display = 'block'
        }
      }

      _pathChanged(val, old) {
        if(val=='') return;

        for (let i = 0; i < this.children.length; i++) {
          let element = this.children[i];
          if (val == element.getAttribute('path')) {
            const pass = _ => {
              element._params = this.params
              if (element.nylonDialogActive) {
                // var style = element.shadowRoot.querySelector('style').innerHTML;
                // var newStyle = `
                //      .modal-body {
                //         position: relative;
                //         -webkit-box-flex: 1;
                //         flex: 1 1 auto;
                //         padding: 1rem;
                //     }
                //     .modal-footer {
                //         display: flex;
                //         -webkit-box-align: center;
                //         align-items: center;
                //         -webkit-box-pack: end;
                //         justify-content: flex-end;
                //         padding: 1rem;
                //         border-top: 1px solid #e9ecef;
                //     }
                // `
                // element.shadowRoot.querySelector('style').innerHTML = style + newStyle
                element.nylonDialogActive(this.params)
              }
            }

            if (element.getAttribute('label')) {
              this.label = element.getAttribute('label');
            }
            element.classList.add('nylon-selected');
            this.dispatchEvent(new CustomEvent('nylon-dialog-changed', { detail: { element: element, params: this.params, pass } }));
          }
          else {
            element.classList.remove('nylon-selected')
          }
        }
      }

      close() {
        this.modal.style.display = 'none';
        document.getElementsByTagName('body')[0].style = 'overflow-y: auto';

      }
      open() {
        this.modal.style.display = 'block'
        document.getElementsByTagName('body')[0].style = 'overflow-y: hidden';
      }
    }

    window.customElements.define(NylonDialog.is, NylonDialog);
  </script>
</dom-module>