| const UI = { |
| createElement: config => { |
| if (!config) return; |
| const elementType = config.element || "div"; |
| const element = document.createElement(elementType); |
| |
| Object.keys(config).forEach(property => { |
| const value = config[property]; |
| switch (property.toLowerCase()) { |
| case "id": |
| case "src": |
| case "style": |
| case "placeholder": |
| case "title": |
| case "accept": |
| element.setAttribute(property, value); |
| return; |
| case "classname": |
| element.setAttribute("class", value); |
| return; |
| case "colspan": |
| element.setAttribute("colspan", value); |
| return; |
| case "text": |
| element.innerText = value; |
| return; |
| case "value": |
| element.value = value; |
| return; |
| case "html": |
| element.innerHTML = value; |
| return; |
| case "onclick": |
| element.onclick = value.bind(element); |
| return; |
| case "onchange": |
| element.onchange = value.bind(element); |
| return; |
| case "onkeydown": |
| element.onkeydown = value.bind(element); |
| return; |
| case "onkeyup": |
| element.onkeyup = value.bind(element); |
| return; |
| case "type": |
| if (elementType === "input") element.setAttribute("type", value); |
| return; |
| case "children": |
| if (value instanceof Array) { |
| value.forEach(child => { |
| const childElement = |
| child instanceof Element ? child : UI.createElement(child); |
| if (!childElement) return; |
| element.appendChild(childElement); |
| }); |
| } else { |
| const child = value; |
| const childElement = |
| child instanceof Element ? child : UI.createElement(child); |
| if (!childElement) return; |
| element.appendChild(childElement); |
| element.appendChild(childElement); |
| } |
| return; |
| case "disabled": |
| if (value) element.setAttribute("disabled", true); |
| return; |
| case "checked": |
| if (value) element.setAttribute("checked", true); |
| return; |
| case "indeterminate": |
| element.indeterminate = value; |
| return; |
| } |
| }); |
| return element; |
| }, |
| getElement: id => { |
| return document.getElementById(id); |
| }, |
| getRoot: () => { |
| return document.getElementsByTagName("body")[0]; |
| }, |
| scrollPositions: {}, |
| saveScrollPosition: elementId => { |
| let scrollElement = UI.getElement(elementId); |
| if (!scrollElement) return; |
| UI.scrollPositions[elementId] = { |
| scrollLeft: scrollElement.scrollLeft, |
| scrollRight: scrollElement.scrollRight |
| }; |
| }, |
| loadScrollPosition: elementId => { |
| let scrollElement = UI.getElement(elementId); |
| if (!scrollElement) return; |
| if (!UI.scrollPositions[elementId]) return; |
| scrollElement.scrollLeft = UI.scrollPositions[elementId].scrollLeft; |
| scrollElement.scrollRight = UI.scrollPositions[elementId].scrollRight; |
| } |
| }; |