luxtools-plugin/js/scratchpads.js

/* global window, document */

(function () {
  'use strict';

  var Luxtools = window.Luxtools || (window.Luxtools = {});

  // ============================================================
  // Scratchpads Module
  // ============================================================
  Luxtools.Scratchpads = (function () {
    function setEditMode(root, isEditing) {
      if (!root || !root.classList) return;

      var view = root.querySelector('.luxtools-scratchpad-view');
      var editor = root.querySelector('.luxtools-scratchpad-editor');

      if (isEditing) {
        root.classList.add('is-editing');
        if (view) view.hidden = true;
        if (editor) editor.hidden = false;
      } else {
        root.classList.remove('is-editing');
        if (view) view.hidden = false;
        if (editor) editor.hidden = true;
      }
    }

    function setStatus(root, msg) {
      var el = root.querySelector('.luxtools-scratchpad-status');
      if (!el) return;
      el.textContent = msg || '';
    }

    function getSectok(root) {
      // Prefer a token embedded with the rendered scratchpad.
      try {
        if (root && root.getAttribute) {
          var t = String(root.getAttribute('data-sectok') || '').trim();
          if (t) return t;
        }
      } catch (e) {}

      // Fall back to DokuWiki's global JSINFO.
      try {
        if (window.JSINFO && window.JSINFO.sectok) return String(window.JSINFO.sectok);
      } catch (e) {}

      // Last resort: find any security token input on the page.
      try {
        var inp = document.querySelector('input[name="sectok"], input[name="securitytoken"]');
        if (inp && inp.value) return String(inp.value);
      } catch (e2) {}

      return '';
    }

    function loadPad(root) {
      var endpoint = (root.getAttribute('data-endpoint') || '').trim();
      var pad = (root.getAttribute('data-pad') || '').trim();
      var pageId = (root.getAttribute('data-pageid') || '').trim();
      if (!endpoint || !pad || !pageId) return Promise.reject(new Error('missing params'));

      var url = endpoint + '?cmd=load&pad=' + encodeURIComponent(pad) + '&id=' + encodeURIComponent(pageId);
      return window.fetch(url, {
        method: 'GET',
        credentials: 'same-origin'
      }).then(function (res) {
        return res.json().catch(function () { return null; }).then(function (body) {
          if (!res.ok || !body || body.ok !== true) {
            var msg = (body && body.error) ? body.error : ('HTTP ' + res.status);
            throw new Error(msg);
          }
          return body.text || '';
        });
      });
    }

    function savePad(root, text) {
      var endpoint = (root.getAttribute('data-endpoint') || '').trim();
      var pad = (root.getAttribute('data-pad') || '').trim();
      var pageId = (root.getAttribute('data-pageid') || '').trim();
      if (!endpoint || !pad || !pageId) return Promise.reject(new Error('missing params'));

      var params = new window.URLSearchParams();
      params.set('cmd', 'save');
      params.set('pad', pad);
      params.set('id', pageId);
      params.set('text', text || '');
      params.set('sectok', getSectok(root));

      return window.fetch(endpoint, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        body: params.toString()
      }).then(function (res) {
        return res.json().catch(function () { return null; }).then(function (body) {
          if (!res.ok || !body || body.ok !== true) {
            var msg = (body && body.error) ? body.error : ('HTTP ' + res.status);
            throw new Error(msg);
          }
          return true;
        });
      });
    }

    function openEditor(root) {
      var editor = root.querySelector('.luxtools-scratchpad-editor');
      var textarea = root.querySelector('textarea.luxtools-scratchpad-text');
      if (!editor || !textarea) return;

      setEditMode(root, true);
      setStatus(root, 'Loading…');
      textarea.disabled = true;

      loadPad(root).then(function (text) {
        textarea.value = text;
        textarea.disabled = false;
        setStatus(root, '');
        textarea.focus();
      }).catch(function (e) {
        textarea.disabled = false;
        setStatus(root, 'Load failed: ' + (e && e.message ? e.message : 'error'));
      });
    }

    function closeEditor(root) {
      var editor = root.querySelector('.luxtools-scratchpad-editor');
      if (!editor) return;

      setEditMode(root, false);
      setStatus(root, '');
    }

    function onClick(e) {
      var t = e.target;
      if (!t) return;

      var edit = t.closest ? t.closest('a.luxtools-scratchpad-edit') : null;
      if (edit) {
        var root = edit.closest('div.luxtools-scratchpad');
        if (!root) return;
        e.preventDefault();
        openEditor(root);
        return;
      }

      var save = t.closest ? t.closest('button.luxtools-scratchpad-save') : null;
      if (save) {
        var rootS = save.closest('div.luxtools-scratchpad');
        if (!rootS) return;
        e.preventDefault();
        var textareaS = rootS.querySelector('textarea.luxtools-scratchpad-text');
        if (!textareaS) return;
        textareaS.disabled = true;
        setStatus(rootS, 'Saving…');
        savePad(rootS, textareaS.value).then(function () {
          setStatus(rootS, 'Saved. Reloading…');
          try { window.location.reload(); } catch (err) {}
        }).catch(function (err) {
          textareaS.disabled = false;
          setStatus(rootS, 'Save failed: ' + (err && err.message ? err.message : 'error'));
        });
        return;
      }

      var cancel = t.closest ? t.closest('button.luxtools-scratchpad-cancel') : null;
      if (cancel) {
        var rootC = cancel.closest('div.luxtools-scratchpad');
        if (!rootC) return;
        e.preventDefault();
        closeEditor(rootC);
      }
    }

    function init() {
      var pads = document.querySelectorAll('div.luxtools-scratchpad[data-luxtools-scratchpad="1"]');
      if (!pads || !pads.length) return;
      document.addEventListener('click', onClick, true);
    }

    return {
      init: init
    };
  })();
})();