ServiceNow - Better Background Scripts

Improve usability of Background Scripts (strongly inspired by SwissNOW)
Verze ze dne 21. 09. 2020. Zobrazit nejnovější verzi.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name         ServiceNow - Better Background Scripts
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Improve usability of Background Scripts (strongly inspired by SwissNOW)
// @author       Ricardo Constantino <[email protected]>
// @match        https://*.service-now.com/sys.scripts.do
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    var forms = document.forms;
    if (forms.length < 1) return;

    let style = document.createElement('style');
    style.textContent = `
#better_bg_output {
  width: 80%;
  float: right;
  margin-left: 8px;
  border: thin solid black;
  margin-bottom: 16px;
  z-index: 10;
}

input[name="runscript"] {
  background-color: #337ab7;
  color: white;
  font-weight: bold;
  font-size: large;
  padding: 8px;
}

#better_bg_output iframe {
  width: 100%;
  height: 480px;
  border: none;
}

#better_bg_output.loading iframe {
  display: none;
}

#better_bg_output h4 {
  margin: 0px;
  font-family: sans-serif;
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 3px;
  background: #e4f1fe;
  border-bottom: solid medium #0066a1;
  color: black;
  font-size: large;
}

form textarea {
  width: 80ch !important;
  display: block;
  height: 85vh;
  -moz-tab-size: 4;
  tab-size: 4;
}

#better_bg_output {
  top: 0.5em;
  position: absolute;
  right: 1em;
  width: calc(100vw - 80ch - 1em);
  height: calc(100vh - 4.5em);
  margin-left: 0;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

#better_bg_output iframe,
#better_bg_iframe {
  height: calc(100vh - 6.4em);
  width: 100%;
}

body > a {
  display: none;
}
hr {
  display: none;
}

#better_bg_loader {
  display: none;
}
.loading #better_bg_loader {
  margin: auto;
  display: block;
  width: 120px;
  height: 120px;
}
#better_bg_loader #loader {
  position: relative;
  width: 170px;
  height: 170px;
  border: 8px solid white;
  border-top: 8px solid #00a84f;
  border-bottom: 8px solid #87cc9c;
  top: -160px;
  left: -35px;
  border-radius: 50%;
  animation: spin 3s linear infinite;

}
#better_bg_loader svg {
  width: 120px;
  height: 133px;
  margin: auto;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body > pre {
  display: none;
}
body {
  overflow: hidden;
}
body form {
  height: calc(100vh - 3em);
  margin: 0;
  padding: 0;
}

body form textarea {
  height: calc(100vh - 7em);
}
iframe {
  display: unset;
}
.loading iframe {
  display: none;
}
`;
    document.head.append(style);

    var divNode = document.createElement("div");
    divNode.id = 'better_bg_output';
    divNode.classList.add('loading');
    divNode.innerHTML = `
<h4>Script output</h4>
<div id='better_bg_loader'>
<svg version="1.1" viewBox="-10 0 100 100" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-67.8 -97.5)">
  <g>
   <path d="m146 98.4c-24.7-4.07-46.5 6.95-57.7 18.8-18.1 19.1-25.5 45.1-17.7 78.4 14-9.78 23.6-39.1 27.1-55.3 3.41-15.8 16.8-42.8 48.3-41.9z" fill="#00a84f"/>
   <path d="m105 141c9.48-34.7 26.4-39.3 43.4-40.8 5.76 29.8-13.7 90.3-74 97.1 24.4-18.6 25.6-46.9 30.5-51.6 5.53-4.93 11.2-5.42 15-6.24 4.05-0.887 17.4-2.3 17.5-4.26 0.0639-2.26-28-0.0393-32.4 5.7z" fill="#87cc9c"/>
  </g>
 </g>
</svg>
<div id='loader'></div>
</div>
<iframe name='better_bg_iframe' id='better_bg_iframe'></iframe>
`;
    if (!document.getElementById('better_bg_output')) {
        document.body.appendChild(divNode);
    }

    let form = document.querySelector('form');
    form.target = "better_bg_iframe";
    form.addEventListener('submit', () => {
        document.querySelector('#better_bg_output').classList.add('loading');
    });

    document.querySelector('textarea').addEventListener('keypress', key => {
        if ((key.ctrlKey || key.metaKey) && key.code == "Enter")
            document.getElementsByName('runscript')[0].click();
    });
    document.querySelector('#better_bg_iframe').addEventListener('load', () => {
        document.querySelector('#better_bg_output').classList.remove('loading');
    });
})();