Feat: Multiplayer sessions added using CRUD database.
This commit is contained in:
232
static/js/dom.js
Normal file
232
static/js/dom.js
Normal file
@@ -0,0 +1,232 @@
|
||||
|
||||
import Utils from "./lib/utils.js";
|
||||
import Validation from "./lib/validation.js";
|
||||
|
||||
export default class DOM {
|
||||
static setElementAttributesValuesCurrentAndPrevious(element, data) {
|
||||
DOM.setElementAttributeValueCurrent(element, data);
|
||||
DOM.setElementAttributeValuePrevious(element, data);
|
||||
}
|
||||
static setElementAttributeValueCurrent(element, data) {
|
||||
element.setAttribute(attrValueCurrent, data);
|
||||
}
|
||||
static setElementAttributeValuePrevious(element, data) {
|
||||
element.setAttribute(attrValuePrevious, data);
|
||||
}
|
||||
static setElementValuesCurrentAndPrevious(element, data) {
|
||||
DOM.setElementValueCurrent(element, data);
|
||||
DOM.setElementAttributeValuePrevious(element, data);
|
||||
}
|
||||
static setElementValueCurrent(element, data) {
|
||||
DOM.setElementAttributeValueCurrent(element, data);
|
||||
let tagName = element.tagName.toUpperCase();
|
||||
if (element.type === "checkbox") {
|
||||
element.checked = data;
|
||||
}
|
||||
else if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
|
||||
element.value = data;
|
||||
}
|
||||
else {
|
||||
element.textContent = data;
|
||||
}
|
||||
}
|
||||
static setElementValueCurrentIfEmpty(element, data) {
|
||||
if (Validation.isEmpty(DOM.getElementValueCurrent(element))) {
|
||||
DOM.setElementValueCurrent(element, data);
|
||||
}
|
||||
}
|
||||
static getCellFromElement(element) {
|
||||
return element.closest('td');
|
||||
}
|
||||
static getRowFromElement(element, flagRow) {
|
||||
let selector = Validation.isEmpty(flagRow) ? 'tr' : 'tr.' + flagRow;
|
||||
return element.closest(selector);
|
||||
}
|
||||
static getClosestParent(element, parentSelector) {
|
||||
let parent = element.parentElement;
|
||||
while (parent) {
|
||||
if (parent.matches(parentSelector)) {
|
||||
return parent;
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
static convertForm2JSON(elementForm) {
|
||||
let dataForm = {};
|
||||
if (Validation.isEmpty(elementForm)) {
|
||||
return dataForm;
|
||||
}
|
||||
let containersFilter = elementForm.querySelectorAll('.' + flagContainerInput + '.' + flagFilter);
|
||||
let containerFilter, labelFilter, keyFilter, filter;
|
||||
for (let indexFilter = 0; indexFilter < containersFilter.length; indexFilter++) {
|
||||
containerFilter = containersFilter[indexFilter];
|
||||
labelFilter = containerFilter.querySelector('label');
|
||||
keyFilter = labelFilter.getAttribute('for');
|
||||
filter = containerFilter.querySelector(`#${keyFilter}`);
|
||||
dataForm[keyFilter] = DOM.getElementValueCurrent(filter);
|
||||
}
|
||||
return dataForm;
|
||||
}
|
||||
static loadPageBody(contentNew) {
|
||||
let pageBody = document.querySelector(idPageBody);
|
||||
pageBody.innerHTML = contentNew;
|
||||
}
|
||||
static getHashPageCurrent() {
|
||||
const hashPageCurrent = document.body.dataset.page;
|
||||
return hashPageCurrent;
|
||||
}
|
||||
static updateAndCheckIsElementDirty(element) {
|
||||
element.setAttribute(attrValueCurrent, DOM.getElementValueCurrent(element));
|
||||
return DOM.isElementDirty(element);
|
||||
}
|
||||
static isElementDirty(element) {
|
||||
let isDirty = element.getAttribute(attrValuePrevious) != element.getAttribute(attrValueCurrent);
|
||||
DOM.handleDirtyElement(element, isDirty);
|
||||
return isDirty;
|
||||
}
|
||||
static handleDirtyElement(element, isDirty) {
|
||||
DOM.toggleElementHasClassnameFlag(element, isDirty, flagDirty);
|
||||
}
|
||||
static toggleElementHasClassnameFlag(element, elementHasFlag, flag) {
|
||||
let elementAlreadyHasFlag = element.classList.contains(flag);
|
||||
if (elementHasFlag == elementAlreadyHasFlag) return;
|
||||
if (elementHasFlag) {
|
||||
element.classList.add(flag);
|
||||
} else {
|
||||
element.classList.remove(flag);
|
||||
}
|
||||
}
|
||||
static hasDirtyChildrenContainer(container) {
|
||||
if (container == null) return false;
|
||||
return container.querySelector('.' + flagDirty) != null;
|
||||
}
|
||||
static hasDirtyChildrenNotDeletedContainer(container) {
|
||||
if (container == null || container.classList.contains(flagDelete)) return false;
|
||||
return container.querySelector('.' + flagDirty + ':not(.' + flagDelete + ', .' + flagDelete + ' *)') != null;
|
||||
}
|
||||
static getElementValueCurrent(element) {
|
||||
let returnVal = '';
|
||||
|
||||
if (!Validation.isEmpty(element)) {
|
||||
|
||||
let tagName = element.tagName.toUpperCase();
|
||||
if (element.type === "checkbox") {
|
||||
returnVal = element.checked;
|
||||
}
|
||||
/*
|
||||
else if (element.classList.contains(flagIsDatePicker)) {
|
||||
returnVal = getDatePickerDate(element, adjust4DayLightSavings);
|
||||
}
|
||||
*/
|
||||
else if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
|
||||
returnVal = element.value;
|
||||
}
|
||||
else if (element.classList.contains(flagButton) && element.classList.contains(flagActive)) { // tagName === 'BUTTON'
|
||||
returnVal = element.classList.contains(flagDelete);
|
||||
}
|
||||
else if (tagName === 'TD') {
|
||||
returnVal = DOM.getElementAttributeValueCurrent(element);
|
||||
}
|
||||
else if (tagName == 'SVG' && element.classList.contains(flagCheckbox)) {
|
||||
returnVal = (element.classList.contains(flagIsChecked))
|
||||
}
|
||||
else {
|
||||
returnVal = element.textContent;
|
||||
}
|
||||
}
|
||||
|
||||
if (Validation.isEmpty(returnVal)) returnVal = '';
|
||||
|
||||
return returnVal;
|
||||
}
|
||||
static getElementAttributeValueCurrent(element) {
|
||||
// debugger;
|
||||
if (Validation.isEmpty(element)) return null;
|
||||
return element.getAttribute(attrValueCurrent);
|
||||
}
|
||||
static getElementAttributeValuePrevious(element) {
|
||||
if (Validation.isEmpty(element)) return null;
|
||||
return element.getAttribute(attrValuePrevious);
|
||||
}
|
||||
/* base_table.handleChangeElementCellTable
|
||||
static updateAndCheckIsTableElementDirty(element) {
|
||||
let wasDirty = DOM.isElementDirty(element);
|
||||
let row = DOM.getRowFromElement(element);
|
||||
let wasDirtyRow = DOM.hasDirtyChildrenNotDeletedContainer(row);
|
||||
let isDirty = DOM.updateAndCheckIsElementDirty(element);
|
||||
let cell = DOM.getCellFromElement(element);
|
||||
Utils.consoleLogIfNotProductionEnvironment({element, row, cell, isDirty, wasDirty});
|
||||
if (isDirty != wasDirty) {
|
||||
DOM.handleDirtyElement(cell, isDirty);
|
||||
let isDirtyRow = DOM.hasDirtyChildrenNotDeletedContainer(row);
|
||||
Utils.consoleLogIfNotProductionEnvironment({isDirtyRow, wasDirtyRow});
|
||||
if (isDirtyRow != wasDirtyRow) {
|
||||
DOM.handleDirtyElement(row, isDirtyRow);
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
static scrollToElement(parent, element) {
|
||||
// REQUIRED: parent has scroll-bar
|
||||
parent.scrollTop(parent.scrollTop() + (element.offset().top - parent.offset().top));
|
||||
}
|
||||
static isElementInContainer(container, element) {
|
||||
|
||||
if (typeof jQuery === 'function') {
|
||||
if (container instanceof jQuery) container = container[0];
|
||||
if (element instanceof jQuery) element = element[0];
|
||||
}
|
||||
|
||||
var containerBounds = container.getBoundingClientRect();
|
||||
var elementBounds = element.getBoundingClientRect();
|
||||
|
||||
return (
|
||||
containerBounds.top <= elementBounds.top &&
|
||||
containerBounds.left <= elementBounds.left &&
|
||||
((elementBounds.top + elementBounds.height) <= (containerBounds.top + containerBounds.height)) &&
|
||||
((elementBounds.left + elementBounds.width) <= (containerBounds.left + containerBounds.width))
|
||||
);
|
||||
}
|
||||
static alertError(errorType, errorText) {
|
||||
alert(errorType + '\n' + errorText);
|
||||
}
|
||||
static createOptionUnselectedProductVariation() {
|
||||
return {
|
||||
[flagProductVariationType]: {
|
||||
[flagNameAttrOptionText]: [flagName],
|
||||
[flagNameAttrOptionValue]: [attrIdProductVariationType],
|
||||
[flagName]: 'Select Variation Type',
|
||||
[attrIdProductVariationType]: 0,
|
||||
},
|
||||
[flagProductVariation]: {
|
||||
[flagNameAttrOptionText]: [flagName],
|
||||
[flagNameAttrOptionValue]: [attrIdProductVariation],
|
||||
[flagName]: 'Select Variation',
|
||||
[attrIdProductVariation]: 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
static createOption(optionJson) {
|
||||
if (Validation.isEmpty(optionJson)) optionJson = {
|
||||
text: 'Select',
|
||||
value: 0,
|
||||
};
|
||||
let option = document.createElement('option');
|
||||
option.value = optionJson.value;
|
||||
option.textContent = optionJson.text;
|
||||
option.selected = optionJson.selected;
|
||||
return option;
|
||||
}
|
||||
|
||||
static escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
static unescapeHtml(html) {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = html;
|
||||
return div.textContent || div.innerText || '';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user