tor-browser

rendering.mjs (7694B)

---

function generateTemplate(className, variable, selector) {
   if (className[variable] === undefined) {
       className[variable] = document.querySelector(selector).content;
   }
}

class ParameterTemplate extends HTMLElement {
   default = null;

   inputElement = null;

   static baseTemplate;
   constructor(options = {}, className, selector, defaultValue=null, ...args) {
       super();
       generateTemplate(ParameterTemplate, "baseTemplate", "#parameter");
       generateTemplate(className, "template", selector);
       let baseClone = ParameterTemplate.baseTemplate.cloneNode(true);

       let clone = className["template"].cloneNode(true);

       this.initialize(clone, ...args);

       this.inputElement = clone.querySelector("*[data-oninput]");
       if (this.inputElement !== null) {
           this.inputElement.addEventListener("input", this.input.bind(this));
       }

       clone.slot = "parameter";
       baseClone.appendChild(clone);

       const shadowRoot = this.attachShadow({ mode: "open" });
       shadowRoot.appendChild(baseClone);

       if ("defaultValue" in options) {
           this.default = options.defaultValue;
           this.setValue(options.defaultValue);
       } else if (this.default === null) {
           this.default = defaultValue;
       }
   }

   setValue(v) {
       if (this.inputElement !== null) {
           this.inputElement.value = v;
       }
   }

   getEventValue(event) {
       return event.target.value;
   }

   input(event) {
       this.dispatchEvent(new CustomEvent("parameter-input", {
           detail: this.getEventValue(event)
       }));
   }

   initialize(clone) {

   }
}

customElements.define("terminus-param", ParameterTemplate);

class BooleanTemplate extends ParameterTemplate {
   static template;
   constructor(options) {
       super(options, BooleanTemplate, "template#boolean", false);
   }

   getEventValue(event) {
       return event.target.checked;
   }

   setValue(v) {
       this.inputElement.checked = v;
   }
}

customElements.define("terminus-param-boolean", BooleanTemplate);

class NumberTemplate extends ParameterTemplate {
   static template;
   constructor(options) {
       super(options, NumberTemplate, "template#number", 0);
   }

   getEventValue(event) {
       return parseFloat(event.target.value);
   }
}

customElements.define("terminus-param-number", NumberTemplate);

class StringTemplate extends ParameterTemplate {
   static template;
   constructor(options) {
       super(options, StringTemplate, "template#string", "");
   }
}

customElements.define("terminus-param-string", StringTemplate);

class StringArrayTemplate extends ParameterTemplate {
   static template;
   constructor(options) {
       super(options, StringArrayTemplate, "template#string-array", []);
   }

   getEventValue(event) {
       return event.target.value.split(",");
   }
}

customElements.define("terminus-param-string-array", StringArrayTemplate);

class EnumOption extends HTMLElement {
   static template;
   constructor(optionText) {
       super();
       generateTemplate(EnumOption, "template", "template#enum-option");
       let clone = EnumOption.template.cloneNode(true);

       clone.querySelector("slot[name='option-text']").parentElement.innerText = optionText;

       this.append(...clone.children);
   }
}

customElements.define("terminus-enum-option", EnumOption);

class EnumTemplate extends ParameterTemplate {
   static template;

   #enumType;
   constructor(options, enumType) {
       super(options, EnumTemplate, "template#enum", null, enumType);
       this.#enumType = enumType;
   }

   initialize(clone, enumType) {
       let options = clone.querySelector("*[data-options]");

       for (let entry of enumType.getAllEntries()) {

           if (this.default === null) {
               this.default = entry[0];
           }
           options.append(...(new EnumOption(entry[0])).children);
       }
   }

   getEventValue(event) {
       return this.#enumType[event.target.value];
   }
}

customElements.define("terminus-param-enum", EnumTemplate);

class TerminusParams extends HTMLElement {
   #params = [];

   constructor(library, evaluateExternal, params){
       super();

       for (var i = 0; i < params.length; i++) {
           let param = params[i];
           let paramName = document.createElement("span");
           paramName.slot = "param-name";
           paramName.innerText = param.name;

           var newChild;

           switch (param.typeUse) {
               case "string":
                   newChild = new StringTemplate(param);
                   this.#params[i] = "";
                   break;
               case "boolean":
                   newChild = new BooleanTemplate(param);
                   this.#params[i] = false;
                   break;
               case "number":
                   newChild = new NumberTemplate(param);
                   this.#params[i] = 0;
                   break;
               case "Array<string>":
                   newChild = new StringArrayTemplate(param);
                   this.#params[i] = [];
                   break;
               case "enumerator":
                   newChild = new EnumTemplate(param, library[param.type]);
                   this.#params[i] = newChild.default
                   break;
               case "external":
                   let updateParamEvent = (value) => {
                       this.#params[i] = value;
                   };
                   evaluateExternal(param, updateParamEvent);
                   break;
               default:
                   console.error("Unrecognized parameter: ", param);
                   break;
           }

           newChild.addEventListener("parameter-input", this.input.bind(this, i));
           this.#params[i] = newChild.default;

           newChild.appendChild(paramName);
           this.appendChild(newChild);
       }
   }

   input(paramIdx, event) {
       this.#params[paramIdx] = event.detail;
   }

   get paramArray() {
       return this.#params;
   }
}

customElements.define("terminus-params", TerminusParams);

export class TerminusRender extends HTMLElement {
   static template;

   #func = null;
   #parameters;
   #output;
   constructor(library, evaluateExternal, terminus) {
       super();
       generateTemplate(TerminusRender, "template", "template#terminus");
       let clone = TerminusRender.template.cloneNode(true);

       this.id = terminus.funcName;

       this.#func = terminus.func;

       let button = clone.querySelector("*[data-submit]");
       button.addEventListener("click", this.submit.bind(this));

       let funcText = document.createElement("span");
       funcText.slot = "func-name";
       funcText.innerText = terminus.funcName;
       this.appendChild(funcText);

       this.#parameters = new TerminusParams(library, evaluateExternal, terminus.parameters);
       this.#parameters.slot = "parameters";
       this.appendChild(this.#parameters);

       this.#output = document.createElement("span");
       this.#output.slot = "output";

       this.appendChild(this.#output);

       const shadowRoot = this.attachShadow({ mode: "open" });
       shadowRoot.appendChild(clone);
   }

   submit() {
       try {
           this.#output.innerText = this.#func(...this.#parameters.paramArray);
       } catch(e) {
           this.#output.innerText = e;
           throw e;
       }
   }
}

customElements.define("terminus-render", TerminusRender);