How to use dialog-polyfill - 10 common examples

busy: function (status) {
    var that = this;
    console.log('Change spinner status:', status);
    var dialog = document.getElementById('main-dialog');
    dialogPolyfill.registerDialog(dialog);

    if ( status.enable === true ){
      dialog.showModal();

      // console.log("HELLO");
      // setTimeout(function(){
      //     console.log("THIS IS");
      //     dialog.showModal();
      // }, 5000);
      // console.log("DOG");

    }
    else {
      dialog.close();
    }

nthPixel.moveToNextLargestDiff(false);
});
nthPixel.cyclingView = !isPuppeteer;
nthPixel.details = {
  leftImageSrc: left16x16,
  diffImageSrc: diff16x16,
  rightImageSrc: right16x16,
  leftLabel: 'left16x16',
  rightLabel: 'right16x16',
};

$$('#base64_nthpixel')!.appendChild(nthPixel);

// This element demonstrates how to use multi-zoom-sk in a dialog. It is not meant for use on
// puppeteer.
dialogPolyfill.registerDialog($$('#the_dialog')!);
$$('#in_dialog')!.details = {
  leftImageSrc: digestImagePath('99c58c7002073346ff55f446d47d6311'),
  diffImageSrc:
      digestDiffImagePath('99c58c7002073346ff55f446d47d6311', '6246b773851984c726cb2e1cb13510c2'),
  rightImageSrc: digestImagePath('6246b773851984c726cb2e1cb13510c2'),
  leftLabel: '99c58c700207...',
  rightLabel: 'Closest Positive',
};

$$('#dialog_btn')!.addEventListener('click', () => {
  $$('#the_dialog')!.showModal();
});

$$('#close_btn')!.addEventListener('click', () => {
  $$('#the_dialog')!.close();
});

await saveBlockRules(this.blockRules);
          blockDialog.close();
        })();
      } else {
        blockDialog.close();
      }
    });
    blockDialog.addEventListener('click', event => {
      if (event.target == blockDialog) {
        blockDialog.close();
      }
    });

    const unblockDialog = $('ubUnblockDialog');
// #if BROWSER === 'firefox'
    dialogPolyfill.registerDialog(unblockDialog);
// #endif
    $('ubUnblockForm').addEventListener('submit', event => {
      event.preventDefault();
      const index = Number($('ubUnblockSelect').value);
      if (index == -1) {
        unblockDialog.close();
        return;
      }
      this.blockRules.splice(index, 1);
      this.rejudgeAllEntries();
      (async () => {
        await saveBlockRules(this.blockRules);
        unblockDialog.close();
      })();
    });
    unblockDialog.addEventListener('click', event => {

this.detailTab = this.querySelector('#detailTab');
    this.formula = this.querySelector('#formula');
    this.jsonsource = this.querySelector('#jsonsource');
    this.paramset = this.querySelector('#paramset');
    this.percent = this.querySelector('#percent');
    this.plot = this.querySelector('#plot');
    this.query = this.querySelector('#query');
    this.queryCount = this.querySelector('query-count-sk');
    this.range = this.querySelector('#range');
    this.simpleParamset = this.querySelector('#simple_paramset');
    this.spinner = this.querySelector('#spinner');
    this.summary = this.querySelector('#summary');
    this.traceID = this.querySelector('#trace_id');
    this.csvDownload = this.querySelector('#csv_download');
    this.queryDialog = this.querySelector('#query-dialog');
    dialogPolyfill.registerDialog(this.queryDialog!);
    this.helpDialog = this.querySelector('#help');
    dialogPolyfill.registerDialog(this.helpDialog!);

    // Populate the query element.
    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;

    fetch(`/_/initpage/?tz=${tz}`, {
      method: 'GET',
    })
      .then(jsonOrThrow)
      .then((json) => {
        const now = Math.floor(Date.now() / 1000);
        this.state.begin = now - 60 * 60 * 24;
        this.state.end = now;
        this.range!.state = {
          begin: this.state.begin,

setupBlacklistUpdateDialog(): void {
    const blacklistUpdateDialog = document.createElement('dialog');
    // #if BROWSER === 'firefox'
    dialogPolyfill.registerDialog(blacklistUpdateDialog);
    // #endif
    blacklistUpdateDialog.id = 'ubBlacklistUpdateDialog';
    blacklistUpdateDialog.addEventListener('click', e => {
      if (e.target === blacklistUpdateDialog) {
        blacklistUpdateDialog.close();
      }
    });
    document.body.appendChild(blacklistUpdateDialog);

    const blacklistUpdateHost = document.createElement('div');
    this.blacklistUpdate = new BlacklistUpdate(blacklistUpdateHost, () => {
      blacklistUpdateDialog.close();
    });
    blacklistUpdateDialog.appendChild(blacklistUpdateHost);
  }

export const mountDialog = (dialog) => {
  if (dialog) {
    document.getElementById(dialogID).appendChild(dialog)

    if (typeof HTMLDialogElement === 'function' || !dialog.showModal) {
      // There is some difference between dialog and its polyfill, and it breaks our layout.
      // To avoid this issue, always use polyfill.
      dialogPolyfill.forceRegisterDialog(dialog)
    }

    dialog.showModal()
  }
}

const insert = (vnode: any) => {
      const dialog: any = document.querySelector('dialog');
      dialogPolyfill.registerDialog(dialog);
      if (props.active) {
        dialog.showModal();
      } else {
        const overlay: any = document.querySelector('._dialog_overlay');
        if (overlay != null) {
          console.log('removing dialog overlay');
          overlay.parentNode.removeChild(overlay);
        }
      }
    };

var self = this

  this.achievements = list.map(function (item) {
    var achievement = new Achievement(item.id, item.opts)
    achievement.unlock()
    achievement.on('achievement::unlocked', function (e) {
      update()
    })
    return achievement
  })

  var el = render(this.achievements)
  el.querySelector('.close').addEventListener('click', function () {
    el.close()
  })
  if (!el.showModal) dialogPolyfill.registerDialog(el)
  parentEl.appendChild(el)

  this.el = function () {
    return el
  }

  this.checkAchievements = function () {
    this.achievements.forEach(function (achievement) {
      achievement.unlock()
    })
  }

  function update () {
    var newEl = render(self.achievements)
    yo.update(el, newEl)
    componentHandler.upgradeAllRegistered()

.then(() => {
        this._render();
        this.alertDialog = this.querySelector('#alert-config-dialog');
        this.triageDialog = this.querySelector('#triage-cluster-dialog');
        dialogPolyfill.registerDialog(this.alertDialog!);
        dialogPolyfill.registerDialog(this.triageDialog!);
        this.alertConfig = this.querySelector('alert-config-sk');
        this.runSpinner = this.querySelector('#run-spinner');
        this.stateHasChanged = stateReflector(
          () => (this.state as unknown) as HintableObject,
          (state) => {
            this.state = (state as unknown) as Alert;
            this._render();
          },
        );
      })
      .catch(errorMessage);

open(mapOfIssues: Record): void {
    this.priToSLOIssues = mapOfIssues;
    this._render();
    this.dialog!.showModal();
    dialogPolyfill.registerDialog(this.dialog!);
  }