Title Dialog

link.txt

javascript:window.fetch('https://gist.githubusercontent.com/omo/647295fa5839d336f09a/raw/780042003a85963fcee30acf4440103e32a673a5/titledialog.js').then(function(r) { r.text().then(function(j) { eval(j); }); }).catch(function(e) { console.log(e); });

titledialog.js

// Bootstrap:
// window.fetch("https://gist.githubusercontent.com/xxx").then(function(r) { r.text().then(function(j) { eval(j); }); }).catch(function(e) { console.log(e); });
(function() {
  function wrapWithDiv(efn, cls) {
    var div = document.createElement("div");
    div.appendChild(efn());
    if (null !== cls)
      div.className = cls;
    return div;
  }
  
  var dialog = document.createElement("dialog");
  dialog.tabIndex = 0;
  
  var ds = dialog.createShadowRoot();
  ds.appendChild(wrapWithDiv(function() {
    var span = document.createElement("span");
    span.textContent = document.title;
    return span;
  }, "title"));
  
  ds.appendChild(wrapWithDiv(function() {
    var a = document.createElement("a");
    a.textContent = document.location.toString();
    a.href = document.location.toString();
    return a;
  }, "link"));
  
  var style = document.createElement("style");
  style.textContent = `
  :host {
    z-index: 100;
    font-size: medium;
  }
  
  * {
    font-family: verdana;
    font-size: medium;
  }
 
  div {
    font-weight: normal;
  }
    
  div.title {
    font-weight: bold;  
  }
  
  a {
    color: blue;
  }
  `;
  ds.appendChild(style);
  
  document.body.insertBefore(dialog, document.body.firstChild);
  dialog.show();
  dialog.focus();
 
  window.getSelection().selectAllChildren(ds);
  window.setTimeout(function() {
    document.body.removeChild(dialog);
  }, 3000);
})();