Move all "edit.js" functions into Modules
Create new repository to track these
This commit is contained in:
276
src/utils/HtmlElementCreator.mjs
Normal file
276
src/utils/HtmlElementCreator.mjs
Normal file
@@ -0,0 +1,276 @@
|
||||
/*
|
||||
Description: DOM Management and HTML builder
|
||||
Date: 2025//3/6
|
||||
Creator: Clemens Schwaighofer
|
||||
*/
|
||||
|
||||
export {
|
||||
HtmlElementCreator,
|
||||
// deprecated name
|
||||
HtmlElementCreator as DomManagement
|
||||
};
|
||||
import { deepCopyFunction, isObject } from './JavaScriptHelpers.mjs';
|
||||
|
||||
class HtmlElementCreator {
|
||||
/**
|
||||
* reates object for DOM element creation flow
|
||||
* @param {String} tag must set tag (div, span, etc)
|
||||
* @param {String} [id=''] optional set for id, if input, select will be used for name
|
||||
* @param {String} [content=''] text content inside, is skipped if sub elements exist
|
||||
* @param {Array} [css=[]] array for css tags
|
||||
* @param {Object} [options={}] anything else (value, placeholder, OnClick, style)
|
||||
* @return {Object} created element as an object
|
||||
*/
|
||||
cel(tag, id = '', content = '', css = [], options = {})
|
||||
{
|
||||
return {
|
||||
tag: tag,
|
||||
id: id,
|
||||
name: options.name, // override name if set [name gets ignored in tree build anyway]
|
||||
content: content,
|
||||
css: css,
|
||||
options: options,
|
||||
sub: []
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* attach a cel created object to another to create a basic DOM tree
|
||||
* @param {Object} base object where to attach/search
|
||||
* @param {Object} attach the object to be attached
|
||||
* @param {String} [id=''] optional id, if given search in base for this id and attach there
|
||||
* @return {Object} "none", technically there is no return needed as it is global attach
|
||||
*/
|
||||
ael(base, attach, id = '')
|
||||
{
|
||||
if (id) {
|
||||
// base id match already
|
||||
if (base.id == id) {
|
||||
// base.sub.push(Object.assign({}, attach));
|
||||
base.sub.push(deepCopyFunction(attach));
|
||||
} else {
|
||||
// sub check
|
||||
if (isObject(base.sub) && base.sub.length > 0) {
|
||||
for (var i = 0; i < base.sub.length; i ++) {
|
||||
// recursive call to sub element
|
||||
this.ael(base.sub[i], attach, id);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// base.sub.push(Object.assign({}, attach));
|
||||
base.sub.push(deepCopyFunction(attach));
|
||||
}
|
||||
return base;
|
||||
}
|
||||
|
||||
/**
|
||||
* directly attach n elements to one master base element
|
||||
* this type does not support attach with optional id
|
||||
* @param {Object} base object to where we attach the elements
|
||||
* @param {...Object} attach attach 1..n: attach directly to the base element those attachments
|
||||
* @return {Object} "none", technically there is no return needed, global attach
|
||||
*/
|
||||
aelx(base, ...attach)
|
||||
{
|
||||
for (var i = 0; i < attach.length; i ++) {
|
||||
// base.sub.push(Object.assign({}, attach[i]));
|
||||
base.sub.push(deepCopyFunction(attach[i]));
|
||||
}
|
||||
return base;
|
||||
}
|
||||
|
||||
/**
|
||||
* same as aelx, but instead of using objects as parameters
|
||||
* get an array of objects to attach
|
||||
* @param {Object} base object to where we attach the elements
|
||||
* @param {Array} attach array of objects to attach
|
||||
* @return {Object} "none", technically there is no return needed, global attach
|
||||
*/
|
||||
aelxar(base, attach)
|
||||
{
|
||||
for (var i = 0; i < attach.length; i ++) {
|
||||
// base.sub.push(Object.assign({}, attach[i]));
|
||||
base.sub.push(deepCopyFunction(attach[i]));
|
||||
}
|
||||
return base;
|
||||
}
|
||||
|
||||
/**
|
||||
* resets the sub elements of the base element given
|
||||
* @param {Object} base cel created element
|
||||
* @return {Object} returns reset base element
|
||||
*/
|
||||
rel(base)
|
||||
{
|
||||
base.sub = [];
|
||||
return base;
|
||||
}
|
||||
|
||||
/**
|
||||
* searches and removes style from css array
|
||||
* @param {Object} _element element to work one
|
||||
* @param {String} css style sheet to remove (name)
|
||||
* @return {Object} returns full element
|
||||
*/
|
||||
rcssel(_element, css)
|
||||
{
|
||||
var css_index = _element.css.indexOf(css);
|
||||
if (css_index > -1) {
|
||||
_element.css.splice(css_index, 1);
|
||||
}
|
||||
return _element;
|
||||
}
|
||||
|
||||
/**
|
||||
* adds a new style sheet to the element given
|
||||
* @param {Object} _element element to work on
|
||||
* @param {String} css style sheet to add (name)
|
||||
* @return {Object} returns full element
|
||||
*/
|
||||
acssel(_element, css)
|
||||
{
|
||||
var css_index = _element.css.indexOf(css);
|
||||
if (css_index == -1) {
|
||||
_element.css.push(css);
|
||||
}
|
||||
return _element;
|
||||
}
|
||||
|
||||
/**
|
||||
* removes one css and adds another
|
||||
* is a wrapper around rcssel/acssel
|
||||
* @param {Object} _element element to work on
|
||||
* @param {String} rcss style to remove (name)
|
||||
* @param {String} acss style to add (name)
|
||||
* @return {Object} returns full element
|
||||
*/
|
||||
scssel(_element, rcss, acss)
|
||||
{
|
||||
this.rcssel(_element, rcss);
|
||||
this.acssel(_element, acss);
|
||||
}
|
||||
|
||||
/**
|
||||
* parses the object tree created with cel/ael and converts it into an HTML string
|
||||
* that can be inserted into the page
|
||||
* @param {Object} tree object tree with dom element declarations
|
||||
* @return {String} HTML string that can be used as innerHTML
|
||||
*/
|
||||
phfo(tree)
|
||||
{
|
||||
let name_elements = [
|
||||
'button',
|
||||
'fieldset',
|
||||
'form',
|
||||
'iframe',
|
||||
'input',
|
||||
'map',
|
||||
'meta',
|
||||
'object',
|
||||
'output',
|
||||
'param',
|
||||
'select',
|
||||
'textarea',
|
||||
];
|
||||
let skip_options = [
|
||||
'id',
|
||||
'name',
|
||||
'class',
|
||||
];
|
||||
let no_close = [
|
||||
'input',
|
||||
'br',
|
||||
'img',
|
||||
'hr',
|
||||
'area',
|
||||
'col',
|
||||
'keygen',
|
||||
'wbr',
|
||||
'track',
|
||||
'source',
|
||||
'param',
|
||||
'command',
|
||||
// only in header
|
||||
'base',
|
||||
'meta',
|
||||
'link',
|
||||
'embed',
|
||||
];
|
||||
// holds the elements
|
||||
var content = [];
|
||||
// main part line
|
||||
var line = '<' + tree.tag;
|
||||
var i;
|
||||
// first id, if set
|
||||
if (tree.id) {
|
||||
line += ' id="' + tree.id + '"';
|
||||
// if anything input (input, textarea, select then add name too)
|
||||
if (name_elements.includes(tree.tag)) {
|
||||
line += ' name="' + (tree.name ? tree.name : tree.id) + '"';
|
||||
}
|
||||
}
|
||||
// second CSS
|
||||
if (isObject(tree.css) && tree.css.length > 0) {
|
||||
line += ' class="';
|
||||
for (i = 0; i < tree.css.length; i ++) {
|
||||
line += tree.css[i] + ' ';
|
||||
}
|
||||
// strip last space
|
||||
line = line.slice(0, -1);
|
||||
line += '"';
|
||||
}
|
||||
// options is anything key = "data"
|
||||
if (isObject(tree.options)) {
|
||||
// ignores id, name, class as key
|
||||
for (const [key, item] of Object.entries(tree.options)) {
|
||||
if (!skip_options.includes(key)) {
|
||||
line += ' ' + key + '="' + item + '"';
|
||||
}
|
||||
}
|
||||
}
|
||||
// finish open tag
|
||||
line += '>';
|
||||
// push finished line
|
||||
content.push(line);
|
||||
// dive into sub tree to attach sub nodes
|
||||
// NOTES: we can have content (text) AND sub nodes at the same level
|
||||
// CONTENT (TEXT) takes preference over SUB NODE in order
|
||||
if (isObject(tree.sub) && tree.sub.length > 0) {
|
||||
if (tree.content) {
|
||||
content.push(tree.content);
|
||||
}
|
||||
for (i = 0; i < tree.sub.length; i ++) {
|
||||
content.push(this.phfo(tree.sub[i]));
|
||||
}
|
||||
} else if (tree.content) {
|
||||
content.push(tree.content);
|
||||
}
|
||||
// if not input, image or br, then close
|
||||
if (
|
||||
!no_close.includes(tree.tag)
|
||||
) {
|
||||
content.push('</' + tree.tag + '>');
|
||||
}
|
||||
// combine to string
|
||||
return content.join('');
|
||||
}
|
||||
|
||||
/**
|
||||
* Create HTML elements from array list
|
||||
* as a flat element without master object file
|
||||
* Is like tree.sub call
|
||||
* @param {Array} list Array of cel created objects
|
||||
* @return {String} HTML String
|
||||
*/
|
||||
phfa(list)
|
||||
{
|
||||
var content = [];
|
||||
for (var i = 0; i < list.length; i ++) {
|
||||
content.push(this.phfo(list[i]));
|
||||
}
|
||||
return content.join('');
|
||||
}
|
||||
}
|
||||
|
||||
// __EMD__
|
||||
Reference in New Issue
Block a user