utlis.js

//create html element:
function eHtml(data) {
    data.type ? e = $('<' + data.type + '>') : e = $('<div>');

    if (data.class) {
        e.addClass(data.class);
    }

    if (data.id) {
        e.attr('id', data.id);
    }

    if (data.html) {
        e.html(data.html);
    }

    if (data.text) {
        e.text(data.text);
    }

    if (data.container) {
        e.appendTo(data.container);
    }

    if (data.name) {
        e.attr('name', data.name);
    }

    if (data.value) {
        e.attr('value', data.value);
    }

    if (data.onClick) {
        e.click(() => {
            data.onClick(data.params)
        });
    }

    return e;
}

// apply non selectable item
function applyNonSelectable(data) {
    const item = data.item;
    const array = data.arr;
    if (item) {
        item.css({
            "-moz-user-select": "-moz-none",
            "-khtml-user-select": "none",
            "-webkit-user-select": "none",
            "-o-user-select": "none",
            "user-select": "none"
        })
    }
    if (array) {
        array.forEach(item => {
            item.css({
                "-moz-user-select": "-moz-none",
                "-khtml-user-select": "none",
                "-webkit-user-select": "none",
                "-o-user-select": "none",
                "user-select": "none"
            })
        });
    }
}

// check null undefined:
function isNullUndefinedObj(obj) {
    if (obj == true) {
        return false;
    }
    if (obj == false) {
        return false;
    }

    let result = false;
    if (!obj) {
        result = true;
    } if (obj) {
        if (obj == null) {
            result = true;
        }
    }
    return result;
}

// check string not empty: if text was white space will return str
function isString(text) {
    let result = false;
    switch (text) {
        case undefined:
            result = false;
            break;
        case null:
            result = 'null'
            break;
        case '':
            result = 'empty'
            break;
        default:
            result = 'str'
            break;
    }
    return result;
}

// component class:
class Component {
    constructor() {
        this.items = new Array();

        // create new item:
        this.newItem = (data) => {
            const item = new Item(data);
            this.items.push(item);
        }
        // get item by id: 
        this.getItemById = (id) => {
            const item = this.items.find((i) => {
                return i.id == id;
            })
            return item;
        }
        // get item by name:
        this.getItemByName = (name) => {
            const item = this.items.find((i) => {
                return i.name == name;
            })
            return item;
        }
        // get items by array of id : 
        this.getItemsByIds = (ids) => {
            const requestItems = new Array();
            ids.forEach((id) => {
                const item = this.items.find((i) => {
                    return i.id == id;
                });
                if (item) requestItems.push(item);
            })
            return requestItems;
        }
        // get items by array of names : 
        this.getItemsByNames = (names) => {
            const requestItems = new Array();
            names.forEach((name) => {
                const item = this.items.find((i) => {
                    return i.name == name;
                });
                if (item) requestItems.push(item);
            })
            return requestItems;
        }
        // remove item by id: 
        this.removeItemById = (id) => {
            this.items = this.items.filter((item) => {
                return item.id != id;
            })
        }
        // remove item by name: 
        this.removeItemByName = (name) => {
            this.items = this.items.filter((item) => {
                return item.name != name;
            })
        }
        // create items by array of names and types: 
        this.createItemsByNames = (arr) => {
            arr.forEach((i) => {
                const item = new Item({
                    name: i.name,
                    type: i.type,
                    css: i.css,
                    id: i.id,
                    class: i.class
                });
                this.items.push(item);
            })
        }
        // get container items by names: 
        // parameters: 
        //      data.names : array of items names
        //      data.class : class to apply to container
        this.getContainerNames = (data) => {
            const requestItems = new Array();
            data.names.forEach((name) => {
                const item = this.items.find((i) => {
                    return i.name == name;
                });
                if (item) requestItems.push(item);
            })
            const container = eHtml({ class: data.class });
            requestItems.forEach((item) => {
                container.append(item.getItem());
            })
            return container;
        }
        // get container items by ids: 
        // parameters: 
        //      data.ids : array of items ids
        //      data.class : class to apply to container
        this.getContainerIds = (data) => {
            const requestItems = new Array();
            data.ids.forEach((id) => {
                const item = this.items.find((i) => {
                    return i.id == id;
                });
                if (item) requestItems.push(item);
            })
            const container = eHtml({ class: data.class });
            requestItems.forEach((item) => {
                container.append(item.getItem());
            })
            return container;
        }
    }
}

// item class: 
class Item {
    constructor(data) {
        if (data.type) {
            this.type = data.type
        } else {
            this.type = 'container'
        }
        this.css = data.css;
        this.id = data.id;
        this.name = data.name;
        data.class ? this.class = data.class : this.class = this.name;
        this.data = data;

        this.getItem = () => {
            if (this.type == 'container') {
                const item = eHtml({ class: this.class });
                if (this.data.text) {
                    item.text(this.data.text);
                }
                // id
                if (this.id) {
                    item.attr('id', this.id);
                }
                // apply css: 
                if (this.css) {
                    item.css(this.css)
                }
                return item;
            } else if (this.type == 'link') {
                const item = eHtml({ type: 'a', class: this.class });
                if (this.data.text) {
                    item.text(this.data.text);
                }
                // id
                if (this.id) {
                    item.attr('id', this.id);
                }
                // href:
                if (this.data.href) {
                    item.attr('href', this.data.href)
                }
                // apply css: 
                if (this.css) {
                    item.css(this.css)
                }
                return item;
            } else if (this.type == 'photo') {
                const item = eHtml({ type: 'img', class: this.class });
                item.attr('src', this.data.src);
                // id
                if (this.id) {
                    item.attr('id', this.id);
                }
                // apply css: 
                if (this.css) {
                    item.css(this.css)
                }
                return item;
            } else {
                return eHtml({});
            }
        }
    }
}