☰

Golang Playground ACE editor

Make golang play editor usable. With format and theme support.

当前为 2020-04-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Golang Playground ACE editor
  3. // @namespace    http://masoudd.ir/
  4. // @version      0.5
  5. // @description  Make golang play editor usable. With format and theme support.
  6. // @author       masoud_dot_naservand on google's email
  7. // @match        https://play.golang.org/
  8. // @match        https://play.golang.org/p/*
  9. // @grant        GM_addStyle
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @license      GPL-3.0
  13. // @supportURL   https://codeberg.org/masoudd/Golang_Playground_ACE_editor
  14. // @copyright    2020, masoudd (https://greasyfork.org/en/users/506611-masoudd)
  15. // @copyright    2018, Teeed (https://openuserjs.org/users/Teeed)
  16. // ==/UserScript==
  17.  
  18. /*
  19.     0.5:
  20.         - Devided themes to Bright and Dark groups
  21.         - Changed default theme to solarized_light so it looks like the default go playground theme
  22.  
  23.     0.4:
  24.         - Updated the ace.js from 1.3.3 to 1.4.9
  25.         - Format button now functions
  26.         - Added theme support
  27.  
  28.     0.3:
  29.         Also applies to code posted on playground.
  30.  
  31.     0.2:
  32.         Ctrl + Enter executes script.
  33. */
  34.  
  35. (function() {
  36.     'use strict';
  37.     var themes = {"Bright": ["chrome", "clouds", "crimson_editor", "dawn", "dreamweaver",
  38.                              "eclipse", "github", "iplastic", "solarized_light", "textmate",
  39.                              "tomorrow", "xcode", "kuroir", "katzenmilch", "sqlserver"],
  40.  
  41.                   "Dark"  : ["ambiance", "chaos", "clouds_midnight", "cobalt","dracula",
  42.                              "gob", "gruvbox", "idle_fingers", "kr_theme", "merbivore",
  43.                              "merbivore_soft", "mono_industrial", "monokai", "nord_dark",
  44.                              "pastel_on_dark", "solarized_dark", "terminal", "tomorrow_night",
  45.                              "tomorrow_night_blue", "tomorrow_night_bright",
  46.                              "tomorrow_night_eighties","twilight", "vibrant_ink"],
  47.                  };
  48.     var scrpt = document.createElement('script');
  49.     scrpt.src = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9/ace.min.js'
  50.     scrpt.type = 'text/javascript';
  51.     scrpt.async = true;
  52.     scrpt.onload = function() {
  53.         // need to set basePath because ace.js can't find it in it's own if we are
  54.         // loading it as ace.min.js
  55.         ace.config.set("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9");
  56.         var wrap = document.getElementById("wrap")
  57.  
  58.         var linedTextarea = document.querySelector(".linedtextarea");
  59.         linedTextarea.style.display = 'none'
  60.  
  61.         var codeArea = document.getElementById("code");
  62.         var currentCode = codeArea.value;
  63.  
  64.         var editorDiv = document.createElement('div')
  65.         editorDiv.id = "newNiceEditorDiv"
  66.         editorDiv.style.width = '100%'
  67.         editorDiv.style.height = '100%'
  68.         wrap.appendChild(editorDiv);
  69.  
  70.         var editor = ace.edit("newNiceEditorDiv");
  71.         editor.session.setValue(currentCode);
  72.         editor.session.on('change', function(){
  73.             codeArea.value = editor.session.getValue();
  74.         });
  75.  
  76.         // need to intercept the call to .val on the textArea
  77.         // in ajax callback for format button to update the contents
  78.         // of editor by the formatted code returned
  79.         const originalVal = $.fn.val;
  80.         $.fn.val = function(x) {
  81.             if (this[0].id === 'code' && x) {
  82.                 editor.session.setValue(x);
  83.             }
  84.             return originalVal.apply(this, arguments);
  85.         };
  86.  
  87.         var savedTheme = GM_getValue('theme', false);
  88.         if (!savedTheme) {
  89.             savedTheme = 'solarized_light';
  90.             GM_setValue('theme', savedTheme);
  91.         }
  92.         var themeLabel = document.createElement('label');
  93.         themeLabel.setAttribute('title', 'Theme');
  94.         var select = document.createElement('select');
  95.         select.setAttribute('id', 'themeSelect');
  96.         for (var group in themes) {
  97.             var optGroup = document.createElement('optgroup');
  98.             optGroup.setAttribute('label', group);
  99.             themes[group].forEach(function(theme) {
  100.                 var opt = document.createElement('option');
  101.                 opt.setAttribute('value', theme);
  102.                 if (theme === savedTheme) {
  103.                     opt.setAttribute('selected', 'true');
  104.                 }
  105.                 opt.text = theme.replace(/_/g, ' ');
  106.                 optGroup.appendChild(opt);
  107.             });
  108.             select.appendChild(optGroup);
  109.         }
  110.  
  111.         themeLabel.appendChild(select);
  112.         document.getElementById('controls').appendChild(themeLabel);
  113.         select.addEventListener('change', function(e) {
  114.             editor.setTheme(`ace/theme/${this.value}`);
  115.             GM_setValue('theme', this.value);
  116.         });
  117.         // observe the editorDiv element for class attribute change, to catch
  118.         // when the new themes apply and set the color and background-color
  119.         // for #output
  120.         const observeConf = {
  121.             attributes: true,
  122.             attributeFilter: ['class'],
  123.         };
  124.         // the closure
  125.         const observer = new MutationObserver(function(mlist, obs) {
  126.             var color = '';
  127.             var backgroundColor = '';
  128.             const output = document.getElementById('output');
  129.             return function(mlist, obs) {
  130.                 var cs = getComputedStyle(editorDiv);
  131.                 if (color !== cs.color || backgroundColor !== cs.backgroundColor) {
  132.                     color = cs.color;
  133.                     backgroundColor = cs.backgroundColor;
  134.                     output.setAttribute('style', `color: ${color}; background-color: ${backgroundColor}`);
  135.                 }
  136.             }
  137.         }());
  138.         observer.observe(editorDiv, observeConf);
  139.  
  140.  
  141.  
  142.         editor.setTheme(`ace/theme/${savedTheme}`);
  143.         editor.session.setMode("ace/mode/golang");
  144.  
  145.         editorDiv.style.fontSize='16px';
  146.  
  147.         function doSubmit() {
  148.             document.getElementById('run').click()
  149.         }
  150.  
  151.         window.addEventListener("keypress", function(e) {
  152.             if(e.ctrlKey && e.key == 'Enter') {
  153.                 doSubmit()
  154.             }
  155.         }, false);
  156.  
  157.     }
  158.     document.head.appendChild(scrpt);
  159.  
  160.  
  161.  
  162.     GM_addStyle ( `
  163. #wrap {
  164. padding: 0;
  165. background: none;
  166. }
  167. select {
  168.     height: 30px;
  169.     border: 1px solid #375EAB;
  170.     font-size: 16px;
  171.     font-family: sans-serif;
  172.     background: #375EAB;
  173.     color: white;
  174.     position: static;
  175.     top: 1px;
  176.     border-radius: 5px;
  177.     padding-left: 1em;
  178. }
  179. `);
  180. })();