pleroma-fe/static/pleroma-mod-loader.js

class PleromaModLoader {
  constructor () {
    this.config = {
      "modDirectory": "/instance/pleroma-mods/",
      "mods": []
    };
    this.loadConfig();
    this.loadedMods = {};
    this.classes = {};
  }

  loadMods () {
    this.config.mods.forEach((mod) => {
      this.loadMod(mod);
    });
  }

  loadMod (modName) {
    return PleromaModLoader.includeScript(
      this.config.modDirectory + "pleroma-mod-" + modName + "/mod.js"
    ).then(() => {
      this.loadedMods[modName] = new this.classes[PleromaModLoader.getClassName(modName)]();
    });
  }

  loadConfig () {
    window.fetch("/instance/pleroma-mod-config.json").then((response) => {
      return response.json();
    }).then((json) => {
      Object.keys(json).forEach((key) => {
        this.config[key] = json[key];
      });
      this.loadMods();
    }).catch((error) => {
      console.error("can't load loader config");
      console.error(error);
    });
  }

  registerClass (className, object) {
    this.classes[className] = object;
  }

  waitUntilReady () {
    const postPanel = document.querySelector(".status-container");
    const loginPanel = document.querySelector(".login-form");
    if (postPanel || loginPanel) {
      Object.keys(this.loadedMods).forEach((modName) => {
        const settings = document.querySelector(".settings-modal div[label]:first-child");
        if (settings) {
          if (!settings.querySelector(".mod-settings")) {
            this.appendModSettings(settings);
          }
        }

        const mod = this.loadedMods[modName];
        if (mod.isEnabled) {
          mod.ready();
        }
      });

      this.createObserver();
    } else {
      console.warn("not ready, trying again in 1s");
      window.setTimeout(() => { this.waitUntilReady(); }, 1000);
    }
  }

  createCheckbox (label, mod) {
    const labelElement = document.createElement("label");
    labelElement.classList.add("checkbox");

    const input = document.createElement("input");
    input.setAttribute("type", "checkbox");
    input.checked = mod.isEnabled;
    input.addEventListener("change", (event) => {
      if (event.target.checked) {
        mod.enable();
      } else {
        mod.disable();
      }
    });
    labelElement.appendChild(input);

    const fakeCheckbox = document.createElement("i");
    fakeCheckbox.classList.add("checkbox-indicator");
    labelElement.appendChild(fakeCheckbox);

    const text = document.createElement("span");
    text.classList.add("label");
    text.innerText = label;
    labelElement.appendChild(text);

    return labelElement;
  }

  appendModSettings (element) {
    const container = document.createElement("div");
    container.classList.add("setting-item");
    container.classList.add("mod-settings");

    const title = document.createElement("h2");
    title.innerText = "Pleroma Mods";
    container.appendChild(title);

    const optionList = document.createElement("ul");
    optionList.classList.add("setting-list");

    Object.keys(this.loadedMods).sort().forEach((modName) => {
      const li = document.createElement("li");

      const enable = this.createCheckbox("enable " + modName, this.loadedMods[modName]);
      li.appendChild(enable);

      const ulConfig = document.createElement("ul");
      ulConfig.classList.add("setting-list");

      Object.keys(this.loadedMods[modName].config).forEach((key) => {
        if (key === "includes" || key === "filter") {
          return;
        }

        this.loadedMods[modName].onSettingInit(key, ulConfig, document.createElement("li"));
      });

      li.appendChild(ulConfig);

      optionList.appendChild(li);
    });

    container.appendChild(optionList);

    element.appendChild(container);
  }

  createObserver () {
    this.containers = {
      main: document.querySelector(".main"),
      notifications: document.querySelector(".notifications"),
      userPanel: document.querySelector(".user-panel"),
      settingsModal: document.querySelector(".settings-modal")
    };

    const observerConfig = {
      subtree: true,
      childList: true
    };

    this.observer = new MutationObserver((mutations, observer) => {
      const modal = document.querySelector(".settings-modal div[label]:first-child");
      if (modal && !modal.querySelector(".mod-settings")) {
        this.appendModSettings(modal);
      }

      Object.values(this.loadedMods).forEach((mod) => {
        if (mod.isEnabled) {
          mutations.forEach((mutation) => {
            mod.mutate(mutation, observer);
          });
        }
      });
    });

    this.observer.observe(this.containers.main, observerConfig);
    if (this.containers.notifications) {
      this.observer.observe(this.containers.notifications, observerConfig);
    }
    if (this.containers.userPanel) {
      this.observer.observe(this.containers.userPanel, observerConfig);
    }
    if (this.containers.settingsModal) {
      this.observer.observe(this.containers.settingsModal, observerConfig);
    }
  }

  static registerMod (mod) {
    window.__pleromaModLoader.registerClass(mod.name, mod);
  }

  static includeScript (src) {
    console.log("include " + src);
    return new Promise((resolve) => {
      const script = document.createElement("script");
      script.setAttribute("src", src);
      script.setAttribute("type", "text/javascript");
      script.onload = () => {
        resolve();
      };
      document.querySelector("body").appendChild(script);
    });
  }

  static includeCss (src) {
    console.log("include " + src);
    return new Promise((resolve) => {
      const link = document.createElement("link");
      link.setAttribute("href", src);
      link.setAttribute("rel", "stylesheet");
      link.setAttribute("type", "text/css");
      link.onload = () => {
        resolve();
      };
      document.querySelector("head").appendChild(link);
    });
  }

  static excludeScript (src) {
    return new Promise((resolve) => {
      const script = document.querySelector("script[src=\"" + src + "\"]");
      if (script) {
        script.remove();
      }
      resolve();
    });
  }

  static excludeCss (src) {
    return new Promise((resolve) => {
      const link = document.querySelector("link[href=\"" + src + "\"]");
      if (link) {
        link.remove();
      }
      resolve();
    });
  }

  static getVueScope (element) {
    if (!element) {
      return null;
    }
    if (element.__vue__) {
      console.warn("old vue version, please update pleroma-fe");
      return element.__vue__;
    }
    if (element._vnode) {
      return element._vnode;
    }
    if (element.__vnode) {
      return element.__vnode;
    }
    if (element.parentNode) {
      return PleromaModLoader.getVueScope(element.parentNode);
    }
    return null;
  }

  static getVueComponent (element) {
    if (!element) {
      return null;
    }
    if (element.__vnode && element.__vnode.component) {
      return element.__vnode.component;
    }
    if (element.__vueParentComponent) {
      return element.__vueParentComponent.ctx;
    }
    if (element.__vueComponent__) {
      return element.__vueComponent__;
    }
    if (element.parentNode) {
      return PleromaModLoader.getVueComponent(element.parentNode);
    }
    return null;
  }

  static getRootVueScope () {
    return PleromaModLoader.getVueScope(document.querySelector("#app"));
  }

  static getToken () {
    return PleromaModLoader.getRootVueScope().appContext.provides.store.getters.getUserToken();
  }

  static getModDir () {
    return window.__pleromaModLoader.config.modDirectory;
  }

  static getClassName (name) {
    let className = "PleromaMod";
    name.split("-").forEach((namePart) => {
      className += namePart.substring(0, 1).toUpperCase();
      className += namePart.substring(1);
    });
    return className;
  }

  static api (method, path, params) {
    return new Promise((resolve, reject) => {
      const token = PleromaModLoader.getToken();
      const xhr = new XMLHttpRequest();
      xhr.responseType = "json";
      xhr.open(method, path);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.setRequestHeader("Authorization", "Bearer " + token);
      xhr.onreadstatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status !== 200) {
            reject(new Error({
              status: xhr.status,
              response: xhr.response,
              xhr: xhr
            }));
          }
        }
      };
      xhr.onload = () => {
        resolve(xhr.response);
      };
      xhr.send(JSON.stringify(params));
    });
  }
}

class PleromaMod { // eslint-disable-line no-unused-vars
  constructor (name) {
    this.name = name;
    this.config = {};
    this.isRunning = false;
  }

  get isEnabled () {
    return localStorage.getItem("pleroma_mod_" + this.name + "_enabled") !== "false" || true;
  }

  getClassName () {
    return PleromaModLoader.getClassName(this.name);
  }

  getModDir () {
    return PleromaModLoader.getModDir() + this.name + "/";
  }

  ready () {
    this.onReady();
    this.run();
  }

  destroy () {
    this.isRunning = false;
    if (this.config.includes) {
      const styles = this.config.includes.css || [];
      const scripts = this.config.includes.js || [];

      Promise.all(styles.map((style) => {
        return this.excludeCss(style);
      }).concat(scripts.map((script) => {
        return this.excludeScript(script);
      }))).then(() => {
        this.onDestroy();
      });

      return;
    }

    this.onDestroy();
  }

  run () {
    if (this.config.includes) {
      const styles = this.config.includes.css || [];
      const scripts = this.config.includes.js || [];

      Promise.all(styles.map((style) => {
        return this.includeCss(style);
      }).concat(scripts.map((script) => {
        return this.includeScript(script);
      })).concat([
        this.loadConfig(),
        this.onCreate()
      ])).then(() => {
        this.isRunning = true;
        this.onRun();
      });

      return;
    }

    this.isRunning = true;
    this.onRun();
  }

  mutate (mutation, observer) {
    if (this.isRunning) {
      this.onMutation(mutation, observer);
    }
  }

  saveConfig () {
    const storedConfig = {};
    Object.keys(this.config).filter((key) => {
      return key !== "includes" && key !== "filter";
    }).forEach((key) => {
      storedConfig[key] = this.config[key];
    });
    localStorage.setItem(this.name + "_config", JSON.stringify(storedConfig));
  }

  mergeConfig (newConfig) {
    Object.keys(newConfig).forEach((key) => {
      this.config[key] = JSON.parse(JSON.stringify(newConfig[key]));
    });
  }

  loadConfig () {
    return new Promise((resolve) => {
      // TODO: use structuredClone when its more supported
      this.defaultConfig = JSON.parse(JSON.stringify(this.config));

      const storedConfig = JSON.parse(localStorage.getItem(this.name + "_config"));

      this.onConfigLoad().then((json) => {
        this.mergeConfig(json);
        if (storedConfig) {
          this.mergeConfig(storedConfig);
        }
        this.saveConfig();
        resolve();
      });
    });
  }

  onReady () {}
  onCreate () {
    return new Promise((resolve) => {
      resolve();
    });
  }
  onDestroy () {}
  onRun () {}
  onMutation (mutation, observer) {}
  onConfigLoad () {
    return new Promise((resolve) => {
      resolve({});
    });
  }
  onSettingInit (key, ul, li) {}

  includeCss (src) {
    return PleromaModLoader.includeCss(PleromaModLoader.getModDir() + this.name + "/" + src);
  }

  includeScript (src) {
    return PleromaModLoader.includeScript(PleromaModLoader.getModDir() + this.name + "/" + src);
  }

  excludeCss (src) {
    return PleromaModLoader.excludeCss(PleromaModLoader.getModDir() + this.name + "/" + src);
  }

  excludeScript (src) {
    return PleromaModLoader.excludeScript(PleromaModLoader.getModDir() + this.name + "/" + src);
  }

  fetchJson (src) {
    console.log("loading " + src);
    return window.fetch(PleromaModLoader.getModDir() + this.name + "/" + src).then((response) => {
      return response.json();
    });
  }

  api (method, path, params) {
    return PleromaModLoader.api(method, path, params);
  }

  enable () {
    this.ready();
    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", true);
  }

  disable () {
    this.destroy();
    localStorage.setItem("pleroma_mod_" + this.name + "_enabled", false);
  }
}

window.__pleromaModLoader = new PleromaModLoader();
window.__pleromaModLoader.waitUntilReady();