js/CustomFields.js

  1. /**=====LICENSE STATEMENT START=====
  2.     Translator++ 
  3.     CAT (Computer-Assisted Translation) tools and framework to create quality
  4.     translations and localizations efficiently.
  5.         
  6.     Copyright (C) 2018  Dreamsavior<dreamsavior@gmail.com>
  8.     This program is free software: you can redistribute it and/or modify
  9.     it under the terms of the GNU General Public License as published by
  10.     the Free Software Foundation, either version 3 of the License, or
  11.     (at your option) any later version.
  13.     This program is distributed in the hope that it will be useful,
  14.     but WITHOUT ANY WARRANTY; without even the implied warranty of
  15.     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  16.     GNU General Public License for more details.
  18.     You should have received a copy of the GNU General Public License
  19.     along with this program.  If not, see <https://www.gnu.org/licenses/>.
  20. =====LICENSE STATEMENT END=====*/
  22. // ===========================================================
  23. // Custom field class
  24. // ===========================================================
  25. /**
  26.  * CustomFields class for handling custom form fields.
  27.  * @extends require("www/js/BasicEventHandler.js")
  28.  */
  29. class CustomFields extends require("www/js/BasicEventHandler.js") {
  30.     /**
  31.      * Constructor for CustomFields class.
  32.      * @param {jQuery|Object} $form - jQuery object or object representing form.
  33.      * @param {Object} [options={}] - Options for customization.
  34.      */
  35.     constructor($form, options = {}) {
  36.         super($form);
  39.         // Warns about creation
  40.         console.log("Creating custom fields", arguments);
  42.         // Handling different argument scenarios
  43.         // if (arguments.length == 1 && typeof $form == "object" && $form.constructor.name !== "jQuery") {
  44.         //     options = {
  45.         //         jsonForm: $form
  46.         //     }
  47.         //     $form = $("<form></form>");
  48.         //     $form.submit(false);
  49.         // }
  50. 		if (arguments.length == 1) {
  51. 			options = CustomFields.sanitize(arguments[0]);
  52. 			$form = $("<form class='autogenerateForm'></form>");
  53. 		} else {
  54. 			options = CustomFields.sanitize(options);
  55. 			$form ||= $("<form></form>");
  56. 		}
  58.         /**
  59.          * jQuery form element.
  60.          * @type {jQuery}
  61.          */
  62.         this.$elm = $form;
  63. 		this.$elm.on("submit", (e)=> {
  64. 			e.preventDefault();
  65. 		});
  67. 		this.getElm = function() {
  68. 			return this.$elm;
  69. 		}
  72.         /**
  73.          * Initialize the CustomFields instance.
  74.          */
  75.         this.init = (value) => {
  76. 			this.$elm.empty();
  77. 			if (value) {
  78. 				if (options.jsonForm) {
  79. 					options.jsonForm.value = value;
  80. 				}
  81. 			}
  82.             if (options.jsonForm) this.addJSONForm(options.jsonForm);
  83.             if (options.html) this.addHTML(options.html);
  84.             console.warn("CustomFields rendered", this);
  85.             this.resolveState("ready");
  86.         };
  88.         this.init();
  89.     }
  91.     /**
  92.      * Adds JSON form to the form element.
  93.      * @param {Object} [settings={}] - Settings for the JSON form.
  94.      */
  95.     addJSONForm(settings = {}) {
  96.         console.log("Adding jsonform", settings);
  97.         try {
  98.             this.$elm.jsonForm(settings);
  99.             CustomFields.bindExternalLinks(this.$elm[0]);
  100.         } catch (e) {
  101.             console.warn("Invalid jsonForm options", e);
  102.         }
  103.     }
  105.     /**
  106.      * Gets the JSON form tree.
  107.      * @returns {Object} - JSON form tree data.
  108.      */
  109.     getJsonFormTree() {
  110.         return this.$elm.data("jsonformTree");
  111.     }
  113.     /**
  114.      * Validates the form.
  115.      * @returns {boolean} - Validation result.
  116.      */
  117.     validate() {
  118.         const ft = this.getJsonFormTree();
  119.         if (!ft) return;
  120.         return ft.validate();
  121.     }
  123.     /**
  124.      * Adds HTML content to the form.
  125.      * @param {jQuery} $elm - jQuery object representing HTML content.
  126.      */
  127.     addHTML($elm) {
  128.         this.$elm.append($elm);
  129.     }
  131.     /**
  132.      * Gets values from the form.
  133.      * @returns {Object} - Form field values.
  134.      */
  135.     getValues() {
  136.         let fd = new FormData(this.$elm[0]);
  137.         return Object.fromEntries(fd);
  138.     }
  140.     /**
  141.      * set values from the form.
  142.      * @param {Object} values - Form field values.
  143.      */
  144. 	setValues(values) {
  145. 		if (!values) return;
  146. 		this.init(values);
  147. 	}
  149. 	/**
  150.      * Gets JSONForm's value.
  151.      * @returns {Object} - Form field values.
  152.      */
  153. 	getFormValues() {
  154. 		const jsonForm = this.getJsonFormTree();
  155. 		if (!jsonForm) throw new Error("Not a jsonform");
  156. 		return jsonForm.root.getFormValues()
  157. 	}
  159.     /**
  160.      * Sets value for a field by its name.
  161.      * @param {string} name - Name of the field.
  162.      * @param {any} val - Value to set.
  163.      */
  164.     setValueByName(name, val) {
  165.         console.log("Updating value", name, val, "of", this);
  166.         const $fld = this.$elm.find(`[name="${name}"]`);
  167.         $fld.val(val);
  168.     }
  169. }
  171. /**
  172.  * Sanitizes options for CustomFields class.
  173.  * @param {Object} option - Options object.
  174.  * @returns {Object} - Sanitized options.
  175.  */
  176. CustomFields.sanitize = function(option) {
  177. 	console.log("CustomFields - sanitizing option", option);
  178. 	if (typeof option == "function") {
  179. 		option = option();
  180. 	}
  181.     if (common.isHTMLNode(option)) return {
  182.         html: option
  183.     }
  184.     if (CustomFields.isJsonForm(option)) return {
  185.         jsonForm: option
  186.     }
  187.     return option;
  188. };
  190. /**
  191.  * Checks if the data represents a JSON form.
  192.  * @param {Object|string|function} [data={}] - Data to check.
  193.  * @returns {boolean} - Whether the data represents a JSON form.
  194.  */
  195. CustomFields.isJsonForm = function(data = {}) {
  196.     if (typeof data == "string") {
  197.         if (common.isJSON(data)) data = JSON.parse(data);
  198.     } else if (typeof data == "function") {
  199.         data = data() || {};
  200.     }
  201.     if (!data) return false;
  202.     if (data.constructor.name !== "Object") return false;
  203.     if (!data?.schema && !data?.form) return false;
  204.     return true;
  205. };
  207. CustomFields.bindExternalLinks = function(parentElement) {
  208.     // Select all elements with the 'help-block' class within the parentElement
  209.     var helpBlocks = parentElement.querySelectorAll('.help-block');
  210.   
  211.     // Iterate over each 'help-block' element
  212.     helpBlocks.forEach(function(helpBlock) {
  213.       // Use a regular expression to find URL-like text
  214.       var urlPattern = /https?:\/\/[^\s]+/g;
  215.       var text = helpBlock.textContent;
  216.       var urls = text.match(urlPattern);
  217.   
  218.       // If URLs are found, create clickable elements
  219.       if (urls) {
  220.         urls.forEach(function(url) {
  221.           var link = document.createElement('a');
  222.           link.href = "#";
  223.           link.textContent = url;
  224.           $(link).attr('data-url', url);
  225.           $(link).attr("external", true);
  226.           // Bind the click event to open the URL externally
  228.   
  229.           // Replace the URL text with the clickable link
  230.           helpBlock.innerHTML = helpBlock.innerHTML.replace(url, link.outerHTML);
  232.           $(helpBlock).find("a[external]").on("click", function(e) {
  233.                 e.preventDefault(); // Prevent the default link behavior
  234.                 $(this).addClass("externalRendered");
  236.                 console.log("opening external link", $(this).attr("data-url"));
  237.                 nw.Shell.openExternal($(this).attr("data-url")); // Open the URL in the system's browser
  238.             });
  239.         });
  240.       }
  241.     });
  243.     $(parentElement).find("a[external]").not(".externalRendered").on("click", function(e) {
  244.         $(this).addClass("externalRendered");
  245.         e.preventDefault(); // Prevent the default link behavior
  246.         console.log("opening external link", $(this).attr("href"));
  247.         nw.Shell.openExternal($(this).attr("href")); // Open the URL in the system's browser
  248.     });
  249.     $(parentElement).find("a.externalLink").not(".externalRendered").on("click", function(e) {
  250.         $(this).addClass("externalRendered");
  251.         e.preventDefault(); // Prevent the default link behavior
  252.         console.log("opening external link", $(this).attr("href"));
  253.         nw.Shell.openExternal($(this).attr("href")); // Open the URL in the system's browser
  254.     });
  255. }
  258. CustomFields.loadJSONForm = async function() {
  259.     // load the main jsonform module
  260.     await common.loadDomScript("/www/modules/jsonform/lib/jsonform.js");
  261.     
  262.     // load extended jsonform modules
  263.     await common.loadDomScript("/www/js/jsonform.ext.js");
  264. }
  266. module.exports = CustomFields;