357 lines
13 KiB
JavaScript
357 lines
13 KiB
JavaScript
"use strict";
|
|
|
|
import {BaseComponent} from "../Components/BaseComponent.ecma.js";
|
|
import {FormsComponent} from "../Components/FormsComponent.ecma.js";
|
|
import {DatesComponent} from "../Components/DatesComponent.ecma.js";
|
|
import {SelectsComponent} from "../Components/SelectsComponent.ecma.js";
|
|
import {TablesComponent} from "../Components/TablesComponent.ecma.js";
|
|
import {SessionMiniComponent} from "../Components/SessionMiniComponent.ecma.js";
|
|
import {LicensesComponent} from "../Components/LicensesComponent.ecma.js";
|
|
import {I18NComponent} from "../Components/I18NComponent.ecma.js";
|
|
import { AIChatComponent } from "../Components/AIChatComponent.ecma.js";
|
|
import {Common} from "../Utils/Common.ecma.js";
|
|
import {Check} from "../Utils/Checks.ecma.js";
|
|
import {
|
|
Span, Img, Button, Label, Input, Textarea, Div
|
|
} from "../Utils/HTMLDSL.ecma.js";
|
|
|
|
/**
|
|
* @typedef {import("../Application/AnP.ecma.js").AnP} AnP
|
|
*/
|
|
|
|
/**
|
|
* @class Components
|
|
* @constructor
|
|
* @param {!AnP} anp
|
|
* @return {void}
|
|
* @access public
|
|
* @static
|
|
*/
|
|
export const Components = (function(){
|
|
|
|
/**
|
|
* @callback event_callback
|
|
* @param {!HTMLElement} element
|
|
* @param {!Event} event
|
|
* @return {any|null|void}
|
|
*/
|
|
|
|
/**
|
|
* @constructs Components
|
|
* @param {!AnP} anp
|
|
* @return {void}
|
|
* @access private
|
|
* @static
|
|
*/
|
|
const Components = function(anp){
|
|
|
|
/** @type {Components} */
|
|
const self = this;
|
|
|
|
/** @type {BaseComponent} */
|
|
this.base = new BaseComponent(anp);
|
|
/** @type {FormsComponent} */
|
|
this.forms = new FormsComponent(anp);
|
|
/** @type {DatesComponent} */
|
|
this.dates = new DatesComponent(anp);
|
|
/** @type {SelectsComponent} */
|
|
this.selects = new SelectsComponent(anp);
|
|
/** @type {TablesComponent} */
|
|
this.tables = new TablesComponent(anp);
|
|
/** @type {SessionMiniComponent} */
|
|
this.session_mini = new SessionMiniComponent(anp);
|
|
/** @type {LicensesComponent} */
|
|
this.licenses = new LicensesComponent(anp);
|
|
/** @type {I18NComponent} */
|
|
this.i18n_selector = new I18NComponent(anp);
|
|
/** @type {AIChatComponent} */
|
|
this.aichat = new AIChatComponent(anp);
|
|
|
|
/**
|
|
* @returns {void}
|
|
* @access private
|
|
*/
|
|
const constructor = () => {};
|
|
|
|
/**
|
|
* @param {!(string|Array.<string>)} keys
|
|
* @param {!(Object.<string, any|null>|Array.<any|null>)} inputs
|
|
* @returns {Object.<string, any>}
|
|
* @access public
|
|
*/
|
|
this.set_attributes = (keys, inputs) => Common.get_array(keys).reduce((attributes, key) => {
|
|
|
|
/** @type {any|null} */
|
|
const value = Common.get_value(key, inputs, null);
|
|
|
|
value !== null && (attributes[Common.get_array(key)[0]] = value);
|
|
|
|
return attributes;
|
|
}, {});
|
|
|
|
/**
|
|
*
|
|
* @param {?(Object.<string, any|null>|Array.<any|null>)} [inputs = null]
|
|
* @returns {Array.<any|None>}
|
|
*/
|
|
this.image = (inputs = null) => {
|
|
|
|
/** @type {string|null} */
|
|
const i18n = Common.get_value("i18n", inputs, null),
|
|
/** @type {string|null} */
|
|
alternative = Common.get_value(["alt", "alternative"], inputs, null),
|
|
/** @type {string|null} */
|
|
text = i18n ? anp.i18n.get([alternative, i18n], inputs) : alternative;
|
|
/** @type {Array.<string>|string} */
|
|
let sources = Common.get_value(["src", "source", "sources"], inputs, null);
|
|
|
|
return Span({
|
|
class : "image",
|
|
data_i : 0,
|
|
data_data : Common.base64_encode(Check.is_array(sources) ? sources : sources = [sources])
|
|
}, [
|
|
Img({
|
|
src : sources[0],
|
|
on_load : (item, event) => {
|
|
item.parentNode.querySelector("span").style.backgroundImage = `url(${item.getAttribute("src")})`;
|
|
},
|
|
on_error : (item, event) => {
|
|
|
|
const i = Number(item.parentNode.getAttribute("data_i")) + 1;
|
|
|
|
item.setAttribute("src", Common.json_decode(Common.base64_decode(item.parentNode.getAttribute("data-data")))[i]);
|
|
item.parentNode.setAttribute("data_i", i);
|
|
|
|
},
|
|
...(i18n ? {data_i18n : i18n, data_i18n_without : true, alt : text} : text ? {alt : text} : {})
|
|
}),
|
|
Span()
|
|
]);
|
|
};
|
|
|
|
this.i18n = (i18n, tag = "span", variables = null) => [tag, {
|
|
data_i18n : i18n,
|
|
...(variables ? {data_i18n_variables : Common.data_encode(variables)} : {})
|
|
}, anp.i18n.get(i18n, variables)];
|
|
|
|
this.icon = (icon, tag = "span") => [tag, {data_icon : icon}];
|
|
|
|
this.button = (name, action, inputs = null) => {
|
|
|
|
const text = anp.i18n.get(name, (
|
|
Check.is_bool(inputs) ? {toogled : inputs} :
|
|
Check.is_string(inputs) ? {type : inputs} :
|
|
inputs)),
|
|
has_action = Check.is_function(action),
|
|
type = Check.is_string(action) ? action : Common.get_value("type", inputs, "button"),
|
|
toggled = Common.get_value("toggled", inputs, null);
|
|
|
|
has_action || (action = null);
|
|
|
|
return Button({
|
|
type : type,
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
title : text,
|
|
...(
|
|
toggled !== null ? {
|
|
data_toggled : toggled,
|
|
on_click : (button, event) => {
|
|
button.setAttribute("data_toggled", button.getAttribute("data_toggled") != "true");
|
|
Common.execute(action, (button, event));
|
|
}
|
|
} :
|
|
has_action ? {on_click : action} :
|
|
{}),
|
|
}, [
|
|
self.icon(name),
|
|
self.i18n(name)
|
|
]);
|
|
};
|
|
|
|
this.checkbox = (name, inputs = null) => Label({
|
|
class : "checkbox",
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
title : anp.i18n.get(name),
|
|
}, [
|
|
Input({
|
|
type : "checkbox",
|
|
name : name,
|
|
checked : Common.get_value("checked", inputs, false),
|
|
...self.set_attributes([
|
|
["on_change", "onchange"],
|
|
["id", "identifier"]
|
|
], inputs)
|
|
}),
|
|
self.icon("checkbox"),
|
|
self.i18n(name)
|
|
]);
|
|
|
|
this.radio = (name, inputs = null) => {
|
|
|
|
const set = Common.get_value("set", inputs);
|
|
|
|
return Label({
|
|
class : "radio radio-button",
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
title : anp.i18n.get(name),
|
|
}, [
|
|
Input({
|
|
type : "radio",
|
|
name : set ? set + "[]" : name,
|
|
value : name,
|
|
checked : Common.get_value("checked", inputs, false),
|
|
...self.set_attributes([
|
|
["on_change", "onchange"],
|
|
["id", "identifier"]
|
|
], inputs)
|
|
}),
|
|
self.icon("radio"),
|
|
self.i18n(name)
|
|
]);
|
|
};
|
|
|
|
this.text = (name, inputs = null) => {
|
|
|
|
const text = anp.i18n.get(name),
|
|
minimum_length = Common.get_value("minimum_length", inputs, null),
|
|
maximum_length = Common.get_value("maximum_length", inputs, null);
|
|
|
|
return Span({
|
|
class : "input input-text",
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
title : text
|
|
}, [
|
|
Common.get_value("multiline", inputs, false) ? Textarea({
|
|
name : name,
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
placeholder : text + "...",
|
|
...self.set_attributes([
|
|
["id", "identifier"],
|
|
["maxlength", "maximum_length"],
|
|
"pattern",
|
|
"value"
|
|
], inputs)
|
|
}) : Input({
|
|
type : "text",
|
|
name : name,
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
placeholder : text + "...",
|
|
...self.set_attributes([
|
|
["id", "identifier"],
|
|
["maxlength", "maximum_length"],
|
|
"pattern",
|
|
"value"
|
|
], inputs)
|
|
}),
|
|
Span({class : "minimum", data_minimum : minimum_length}, "" + minimum_length),
|
|
Span({class : "length"}, "" + Common.get_value("value", inputs, "").length),
|
|
Span({class : "maximum", data_maximum : maximum_length}, "" + maximum_length)
|
|
]);
|
|
};
|
|
|
|
this.password = (name, inputs = null) => {
|
|
|
|
const text = anp.i18n.get(name),
|
|
minimum_length = Common.get_value("minimum_length", inputs, 0),
|
|
maximum_length = Common.get_value("maximum_length", inputs, 0);
|
|
|
|
return Span({
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
title : text
|
|
}, [
|
|
Input({
|
|
type : "password",
|
|
name : name,
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
placeholder : text + "...",
|
|
...self.set_attributes([
|
|
["id", "identifier"],
|
|
["maxlength", "maximum_length"],
|
|
"pattern",
|
|
"value"
|
|
], inputs)
|
|
}),
|
|
Span({class : "minimum", data_minimum : minimum_length}, "" + minimum_length),
|
|
Span({class : "length"}, "" + Common.get_value("value", inputs, "").length),
|
|
Span({class : "maximum", data_maximum : maximum_length}, "" + maximum_length)
|
|
]);
|
|
};
|
|
|
|
this.email = (name, inputs = null) => {
|
|
|
|
const text = anp.i18n.get(name);
|
|
|
|
return Span({
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
title : text
|
|
}, [
|
|
Input({
|
|
type : "email",
|
|
name : name,
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
placeholder : text + "...",
|
|
pattern : "[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,}$"
|
|
})
|
|
]);
|
|
};
|
|
|
|
this.number = (name, inputs = null) => {
|
|
|
|
const text = anp.i18n.get(name),
|
|
minimum = Common.get_value("minimum", inputs, 0),
|
|
maximum = Common.get_value("maximum", inputs, 0),
|
|
value = Common.get_value("value", inputs, 0);
|
|
|
|
return Span({
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
title : text
|
|
}, [
|
|
Input({
|
|
type : "number",
|
|
name : name,
|
|
data_i18n : name,
|
|
data_i18n_without : true,
|
|
placeholder : text + "...",
|
|
...self.set_attributes([
|
|
["id", "identifier"],
|
|
["min", "minimum"],
|
|
["max", "maximum"],
|
|
"step",
|
|
"value"
|
|
], inputs)
|
|
}),
|
|
Span({class : "minimum", data_minimum : minimum}, "" + minimum),
|
|
Span({class : "value"}, "" + value),
|
|
Span({class : "maximum", data_maximum : maximum}, "" + maximum)
|
|
]);
|
|
};
|
|
|
|
/**
|
|
* @param {!Array.<Array.<[string, string|event_callback, Object.<string, any|null>|Array.<any|null>]>>} buttons
|
|
* @param {?(Object.<string, any|null>|Array.<any|null>)} [inputs = null]
|
|
* @returns {Array.<any|null>}
|
|
*/
|
|
this.buttons = (buttons, inputs = null) => Div({
|
|
class : ["buttons"].concat(Common.get_array(Common.get_value("class", inputs, []))).join(" ").trim(),
|
|
...Common.get_dictionary(inputs, false, ["class"])
|
|
}, buttons.map(([name, action, inputs]) => (
|
|
self.button(name, action, inputs)
|
|
)));
|
|
|
|
constructor();
|
|
|
|
};
|
|
|
|
return Components;
|
|
})(); |