settings-for-wandbox.user.js

// ==UserScript==
// @name         Auto change settings for Wandbox
// @namespace    https://htsign.hateblo.jp
// @version      0.3.3
// @description  save settings for each languages
// @author       htsign
// @include      https://wandbox.org/*
// @downloadURL  https://gist.github.com/htsign/d06bc205c00b843aba52d18ebfb3310d/raw/settings-for-wandbox.user.js
// @updateURL    https://gist.github.com/htsign/d06bc205c00b843aba52d18ebfb3310d/raw/settings-for-wandbox.user.js
// @grant        none
// ==/UserScript==

(() => {
  'use strict';
  const DROPDOWN = document.querySelector('.wandbox-dropdown-area');
  const SETTINGS = document.getElementById('wandbox-editor-settings');

  const SPACES_OR_TAB = SETTINGS.querySelector('.wandbox-spaces-or-tab');
  const TAB_WIDTH = SETTINGS.querySelector('.wandbox-tab-width');
  const SMART_INDENT = SETTINGS.querySelector('.smart-indent');

  const tryOr = (expr, failed) => {
    try {
      return expr();
    }
    catch (e) {
      return failed(e);
    }
  };
  const fire = (ev, elements = []) => elements.forEach(el => el.dispatchEvent(new Event(ev)));

  class Setting {
    constructor(data) {
      const p = new Proxy(data, {
        get(target, prop) {
          const o = (target[prop] = target[prop] ?? {});
          o.tab = o.tab ?? 'spaces-4';
          o.tabWidth = o.tabWidth ?? 'tab-4';
          o.indent = o.indent ?? true;
          o.lastCode = o.lastCode ?? '';
          return o;
        },
        set(target, prop, { tab = 'spaces-4', tabWidth = 'tab-4', indent = true, lastCode = '' }) {
          target[prop] = { tab, tabWidth, indent, lastCode };
        }
      });
      Object.defineProperty(p, 'save', {
        configurable: true,
        writable: true,
        value() {
          localStorage.setItem('lang-setting', JSON.stringify(data));
        }
      });
      return p;
    }

    static get currentLanguage() {
      const active = DROPDOWN.querySelector('.wandbox-dropdown-detail-area .tab-pane.active > legend');
      return active?.textContent ?? '';
    }

    static load() {
      const noop = () => { };
      const data = tryOr(() => JSON.parse(localStorage.getItem('lang-setting')), noop) ?? {};
      return new Setting(data);
    }

    static changeSetting({ tab, tabWidth, indent, lastCode }) {
      SPACES_OR_TAB.value = tab;
      TAB_WIDTH.value = tabWidth;
      SMART_INDENT.checked = indent;
      document.querySelector('.CodeMirror.cm-s-user').CodeMirror.setValue(lastCode);

      fire('change', [SPACES_OR_TAB, TAB_WIDTH, SMART_INDENT]);

      console.log('settings changed:', { tab, tabWidth, indent, lastCode });
    }
  }

  const setting = Setting.load();

  document.addEventListener('DOMContentLoaded', () => {
    Setting.changeSetting(setting[Setting.currentLanguage]);
  });

  const langsRoot = document.querySelector('.wandbox-dropdown-lang-area');
  langsRoot.addEventListener('click', ({ target }) => {
    if (target instanceof HTMLElement && target.matches('a[href^="#language"]')) {
      Setting.changeSetting(setting[target.textContent]);
    }
  }, { capture: true });

  SPACES_OR_TAB.addEventListener('change', ({ target }) => {
    if (document.activeElement !== target) return;
    setting[Setting.currentLanguage].tab = target.value;
    setting.save();
  });
  TAB_WIDTH.addEventListener('change', ({ target }) => {
    if (document.activeElement !== target) return;
    setting[Setting.currentLanguage].tabWidth = target.value;
    setting.save();
  });
  SMART_INDENT.addEventListener('change', ({ target }) => {
    if (document.activeElement !== target) return;
    setting[Setting.currentLanguage].indent = target.checked;
    setting.save();
  });

  document.addEventListener('input', ({ target }) => {
    if (document.activeElement !== target) return;
    let el;
    if (target instanceof Element && (el = target.closest('.CodeMirror.cm-s-user'))) {
      setting[Setting.currentLanguage].lastCode = el.CodeMirror.getValue();
      setting.save();
    }
  });
})();