Update, rebuild, and add a new API endpoint.

2025-11-02 20:25:28 +00:00 · 2024-01-17 20:23:02 +01:00
parent 66b0d9d309
commit 44df07a5f5
52 changed files with 1638 additions and 241 deletions
--- a/resources/assets/v2/libraries/dark-editable/dark-editable.js
+++ b/resources/assets/v2/libraries/dark-editable/dark-editable.js
@@ -0,0 +1,181 @@
+/*
+ * dark-editable.js
+ * Copyright (c) 2024 https://github.com/DarKsandr/dark-editable
+ *
+ * License: MIT
+ *
+ * Copied and slightly edited by James Cole <james@firefly-iii.org>
+ */
+
+import "./dark-editable.css";
+import PopupMode from "./Modes/PopupMode.js";
+import InlineMode from "./Modes/InlineMode.js";
+import BaseType from "./Types/BaseType.js";
+import InputType from "./Types/InputType.js";
+import TextAreaType from "./Types/TextAreaType.js";
+import SelectType from "./Types/SelectType.js";
+import DateType from "./Types/DateType.js";
+import DateTimeType from "./Types/DateTimeType.js";
+
+export default class DarkEditable{
+    modeElement = null;
+    typeElement = null;
+    mode = null;
+    type = null;
+    emptytext = null;
+    viewformat = null;
+    pk = null;
+    name = null;
+
+    constructor(element, options = {}){
+        this.element = element;
+        this.options = options;
+
+        this.init_options();
+        this.typeElement = this.route_type();
+        this.typeElement.initOptions();
+        this.modeElement = this.route_mode();
+        this.modeElement.init();
+        this.init_text();
+        this.init_style();
+        if(this.disabled){
+            this.disable();
+        }
+        this.element.dispatchEvent(new CustomEvent("init"));
+    }
+
+    /* INIT METHODS */
+
+    get_opt(name, default_value){
+        return this[ name ] = this.element.dataset?.[ name ] ?? this.options?.[ name ] ?? default_value;
+    }
+    get_opt_bool(name, default_value){
+        this.get_opt(name, default_value);
+        if(typeof this[ name ] !== "boolean"){
+            if(this[ name ] === "true") {
+                this[ name ] = true;
+            } else if(this[ name ] === "false") {
+                this[ name ] = false;
+            } else {
+                this[ name ] = default_value;
+            }
+        }
+        return this[ name ];
+    }
+
+    init_options(){
+        //priority date elements
+        this.get_opt("value", this.element.innerHTML);
+        this.get_opt("name", this.element.id);
+        this.get_opt("pk", null);
+        this.get_opt("title", "");
+        this.get_opt("type", "text");
+        this.get_opt("emptytext", "Empty");
+        this.get_opt("mode", "popup");
+        this.get_opt("url", null);
+        this.get_opt("ajaxOptions", {});
+        this.ajaxOptions = Object.assign({
+            method: "POST",
+            dataType: "text",
+        }, this.ajaxOptions);
+        this.get_opt_bool("send", true);
+        this.get_opt_bool("disabled", false);
+        this.get_opt_bool("required", false);
+        if(this.options?.success && typeof this.options?.success == "function"){
+            this.success = this.options.success;
+        }
+        if(this.options?.error && typeof this.options?.error == "function"){
+            this.error = this.options.error;
+        }
+    }
+
+    init_text(){
+        const empty_class = "dark-editable-element-empty";
+        this.element.classList.remove(empty_class);
+        if(this.typeElement.initText()){
+            this.element.classList.add(empty_class);
+        }
+    }
+
+    init_style(){
+        this.element.classList.add("dark-editable-element");
+    }
+
+    /* INIT METHODS END */
+    route_mode(){
+        switch (this.mode){
+            default:
+                throw new Error(`Mode ${this.mode} not found!`)
+            case 'popup':
+                return new PopupMode(this);
+            case 'inline':
+                return new InlineMode(this);
+        }
+    }
+
+    route_type(){
+        if(this.type.prototype instanceof BaseType){
+            return new this.type(this);
+        }
+        if(typeof this.type === 'string'){
+            switch(this.type){
+                case "text":
+                case "password":
+                case "email":
+                case "url":
+                case "tel":
+                case "number":
+                case "range":
+                case "time":
+                    return new InputType(this);
+                case "textarea":
+                    return new TextAreaType(this);
+                case "select":
+                    return new SelectType(this);
+                case "date":
+                    return new DateType(this);
+                case "datetime":
+                    return new DateTimeType(this);
+            }
+        }
+        throw new Error(`Undefined type`);
+    }
+
+    /* AJAX */
+
+    async success(response, newValue){
+        return await this.typeElement.successResponse(response, newValue);
+    }
+
+    async error(response, newValue){
+        return await this.typeElement.errorResponse(response, newValue);
+    }
+
+    /* AJAX END */
+
+    /* METHODS */
+
+    enable(){
+        this.disabled = false;
+        this.element.classList.remove("dark-editable-element-disabled");
+        this.modeElement.enable();
+
+    }
+
+    disable(){
+        this.disabled = true;
+        this.element.classList.add("dark-editable-element-disabled");
+        this.modeElement.enable();
+    }
+
+    setValue(value){
+        this.value = value;
+        this.init_text();
+    }
+
+    getValue(){
+        return this.value;
+    }
+
+    /* METHODS END */
+}