// noinspection JSUnresolvedFunction const imagesContext = require.context("./static", true, /\.(png|jpg|jpeg|gif|ico|svg|webp)$/); imagesContext.keys().forEach(imagesContext); /* --- CSS --- */ require("./css/font.scss"); require("./css/normalize.scss"); require("./css/layout.scss"); require("./css/style.scss"); /* --- IMPORTS ---*/ // start the Stimulus application // import './bootstrap'; import {STATIC_ENV} from "./js/statics"; import {IDB_stores} from "./js/idb_stores"; import {Profile, Region, Filter, Node} from "./js/Classes/Worldmap" /* --- VARS --- */ const CLASS_formXml = "sp_form__xhr"; const CLASS_formOnClick = "sp_form__onclick" const CLASS_formOnChange = "sp_form__onchange" const CLASS_inputTypePassword = "sp_input__password"; // const CLASS_inputTypeCheckbox = "sp_radio__type-checkbox"; // const CLASS_inputTypeRadio = "sp_radio__type-radio"; const CLASS_radioContainer = "sp_radio__container"; const CLASS_radioInputWrapper = "sp_radio__input-wrapper"; const CLASS_radioChecked = "sp_radio__checked"; let IDB_database = null; const IDB_databaseName = "genshin-world"; const IDB_databaseVersion = 7; let IDB_hadMigration = false; const EVENT_submit = new Event("submit", { bubbles: true, cancelable: true }); const EVENT_change = new Event("change", { bubbles: true, cancelable: true }); const EVENT_click = new Event("click", { bubbles: true, cancelable: true }); const EVENT_keyup = new Event("keyup", { bubbles: true, cancelable: true }); let GLOBAL_isTouchDevice; let GLOBAL_pinchDistance = 0; let HANDLE_preventClickTimeout = null; let GLOBAL_isMouseDown = false; const GLOBAL_mouseDownCoordinate = {x: 0, y: 0} let GLOBAL_preventClick = false; const GLOBAL_nodeBackup = { grid: null, node: null }; /** @type {Profile|null} */ let GLOBAL_worldmapProfile = null /** @type {Region|null} */ let GLOBAL_region = null; let GLOBAL_worldmapMaxZoomLevel=28; let GLOBAL_worldmapFilter_isInitialized = false; // function log() { if(STATIC_ENV === "dev") { for(const argument of arguments) { console.log(argument); } } } /** * @return {Promise} */ function dom_isLoaded() { return new Promise(async function(domLoaded) { const imgList = /** @type {HTMLImageElement[]} */document.querySelectorAll("img[data-src]"); const imgToLoad = imgList.length; let imgLoaded = 0; if(imgList.length === 0) { domLoaded(true); } else { for(const _htmlImageElement of imgList) { const origin = _htmlImageElement.src; new Promise(function(isImgLoaded) { _htmlImageElement.onload = function() { imgLoaded++ isImgLoaded(true); if(imgLoaded === imgToLoad) { domLoaded(true); } }; _htmlImageElement.onerror = function() { _htmlImageElement.src = origin; imgLoaded++ isImgLoaded(false); if(imgLoaded === imgToLoad) { domLoaded(true); } }; _htmlImageElement.src = _htmlImageElement.dataset.src; _htmlImageElement.removeAttribute("data-src"); }); } } }); } /** * @param {HTMLElement} htmlElement */ function getOffsetFromParent(htmlElement) { const computerStyle = window.getComputedStyle(htmlElement); const cssMatrix = new WebKitCSSMatrix(computerStyle.transform); return { x: htmlElement.offsetLeft + cssMatrix.m41, y: htmlElement.offsetTop + cssMatrix.m42 }; } /** * @param {HTMLElement} htmlElement * @param {HTMLElement|null} parentElement * @return {{x: number, y: number}} */ function getOffsetFrom(htmlElement, parentElement = null) { const htmlElementOffset = { x: 0, y: 0 }; do { const elementOffset = getOffsetFromParent(htmlElement); htmlElementOffset.x += elementOffset.x; htmlElementOffset.y += elementOffset.y; htmlElement = htmlElement.parentElement; } while(parentElement ? htmlElement !== parentElement : htmlElement); return htmlElementOffset; } /** * @param {HTMLElement} htmlElement */ function getOffsetFromDocument(htmlElement) { return getOffsetFrom(htmlElement); } /** * @param {string} str * @return {DocumentFragment} */ function strToHtml(str) { return document.createRange().createContextualFragment(str); } function isJson(str) { try { JSON.parse(str); } catch(e) { return false; } return true; } function removeDiacritics(str) { const defaultDiacriticsRemovalMap = [ { "base": "A", "letters": /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g }, { "base": "AA", "letters": /[\uA732]/g }, { "base": "AE", "letters": /[\u00C6\u01FC\u01E2]/g }, { "base": "AO", "letters": /[\uA734]/g }, { "base": "AU", "letters": /[\uA736]/g }, { "base": "AV", "letters": /[\uA738\uA73A]/g }, { "base": "AY", "letters": /[\uA73C]/g }, { "base": "B", "letters": /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g }, { "base": "C", "letters": /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g }, { "base": "D", "letters": /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g }, { "base": "DZ", "letters": /[\u01F1\u01C4]/g }, { "base": "Dz", "letters": /[\u01F2\u01C5]/g }, { "base": "E", "letters": /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g }, { "base": "F", "letters": /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g }, { "base": "G", "letters": /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g }, { "base": "H", "letters": /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g }, { "base": "I", "letters": /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g }, { "base": "J", "letters": /[\u004A\u24BF\uFF2A\u0134\u0248]/g }, { "base": "K", "letters": /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g }, { "base": "L", "letters": /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g }, { "base": "LJ", "letters": /[\u01C7]/g }, { "base": "Lj", "letters": /[\u01C8]/g }, { "base": "M", "letters": /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g }, { "base": "N", "letters": /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g }, { "base": "NJ", "letters": /[\u01CA]/g }, { "base": "Nj", "letters": /[\u01CB]/g }, { "base": "O", "letters": /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g }, { "base": "OI", "letters": /[\u01A2]/g }, { "base": "OO", "letters": /[\uA74E]/g }, { "base": "OU", "letters": /[\u0222]/g }, { "base": "P", "letters": /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g }, { "base": "Q", "letters": /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g }, { "base": "R", "letters": /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g }, { "base": "S", "letters": /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g }, { "base": "T", "letters": /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g }, { "base": "TZ", "letters": /[\uA728]/g }, { "base": "U", "letters": /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g }, { "base": "V", "letters": /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g }, { "base": "VY", "letters": /[\uA760]/g }, { "base": "W", "letters": /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g }, { "base": "X", "letters": /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g }, { "base": "Y", "letters": /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g }, { "base": "Z", "letters": /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g }, { "base": "a", "letters": /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g }, { "base": "aa", "letters": /[\uA733]/g }, { "base": "ae", "letters": /[\u00E6\u01FD\u01E3]/g }, { "base": "ao", "letters": /[\uA735]/g }, { "base": "au", "letters": /[\uA737]/g }, { "base": "av", "letters": /[\uA739\uA73B]/g }, { "base": "ay", "letters": /[\uA73D]/g }, { "base": "b", "letters": /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g }, { "base": "c", "letters": /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g }, { "base": "d", "letters": /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g }, { "base": "dz", "letters": /[\u01F3\u01C6]/g }, { "base": "e", "letters": /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g }, { "base": "f", "letters": /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g }, { "base": "g", "letters": /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g }, { "base": "h", "letters": /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g }, { "base": "hv", "letters": /[\u0195]/g }, { "base": "i", "letters": /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g }, { "base": "j", "letters": /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g }, { "base": "k", "letters": /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g }, { "base": "l", "letters": /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g }, { "base": "lj", "letters": /[\u01C9]/g }, { "base": "m", "letters": /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g }, { "base": "n", "letters": /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g }, { "base": "nj", "letters": /[\u01CC]/g }, { "base": "o", "letters": /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g }, { "base": "oi", "letters": /[\u01A3]/g }, { "base": "ou", "letters": /[\u0223]/g }, { "base": "oo", "letters": /[\uA74F]/g }, { "base": "p", "letters": /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g }, { "base": "q", "letters": /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g }, { "base": "r", "letters": /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g }, { "base": "s", "letters": /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g }, { "base": "t", "letters": /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g }, { "base": "tz", "letters": /[\uA729]/g }, { "base": "u", "letters": /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g }, { "base": "v", "letters": /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g }, { "base": "vy", "letters": /[\uA761]/g }, { "base": "w", "letters": /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g }, { "base": "x", "letters": /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g }, { "base": "y", "letters": /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g }, { "base": "z", "letters": /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g } ]; for(const map of /** @type {Object[]} */defaultDiacriticsRemovalMap) { str = str.replace(map.letters, map.base); } return str; } /** * @this {HTMLSelectElement} */ function clearFocus() { document.activeElement.blur(); } // function isFileImage(file) { // return file && file['type'].split('/')[0] === 'image'; // } function readImage() { /** @type {HTMLInputElement|null} */ const htmlInputElement=this; if(htmlInputElement.files[0] && htmlInputElement.files[0]['type'].split('/')[0] === 'image') { /** @type {HTMLImageElement|null} */ const htmlImgElement=htmlInputElement.getAttribute('data-file-preview-target') ? document.getElementById(htmlInputElement.getAttribute('data-file-preview-target')) : null; if(htmlImgElement && htmlInputElement.files && htmlInputElement.files[0]) { const reader = new FileReader(); reader.onload = function(progressEvent) { htmlImgElement.src=/** @type {string} */progressEvent.target.result; }; reader.readAsDataURL(htmlInputElement.files[0]); } } } function readPath() { /** @type {HTMLInputElement|null} */ const htmlInputElement=this; /** @type {HTMLInputElement|null} */ const htmlPathElement=htmlInputElement.parentElement?.querySelector("input[name='file-path']"); if(htmlPathElement && htmlInputElement.files && htmlInputElement.files[0]) { const startIndex = (htmlInputElement.value.indexOf('\\') >= 0 ? htmlInputElement.value.lastIndexOf('\\') : htmlInputElement.value.lastIndexOf('/')); let filename = htmlInputElement.value.substring(startIndex); if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) { htmlPathElement.value = filename.substring(1); } } } // // function form_init(container = null) { return new Promise(function(resolve) { const htmlSourceElement = container ? container : document; for(const htmlInputElement of /** @type {HTMLInputElement[]} */htmlSourceElement.querySelectorAll("input[type='file']")) { htmlInputElement.addEventListener("change", clearFocus); htmlInputElement.addEventListener("change", readPath); htmlInputElement.addEventListener("change", readImage); } for(const htmlSelectElement of /** @type {HTMLSelectElement[]} */htmlSourceElement.querySelectorAll("select")) { htmlSelectElement.addEventListener("change", clearFocus); } for(const htmlFormElement of /** @type {HTMLFormElement[]} */htmlSourceElement.querySelectorAll("form")) { htmlFormElement.addEventListener("submit", form_checkValidity); if(htmlFormElement.classList.contains(CLASS_formOnClick)) { htmlFormElement.addEventListener("click", form_dispatchSubmitEvent); } if(htmlFormElement.classList.contains(CLASS_formOnChange)) { htmlFormElement.addEventListener("change", form_dispatchSubmitEvent); } // if(htmlFormElement.classList.contains("form_xml__onkeyup")) { // htmlFormElement.addEventListener("keydown", form_preventManualSubmit); // htmlFormElement.addEventListener("keyup", form_dispatchSubmitEvent); // } } resolve(); }); } // /** // * @param {KeyboardEvent} keyboardEvent // * @this {HTMLFormElement} // */ // function form_preventManualSubmit(keyboardEvent) { // if(keyboardEvent.key === "Enter") { // keyboardEvent.preventDefault(); // return false; // } // } /** * @this {HTMLFormElement} */ function form_dispatchSubmitEvent(event) { if(this instanceof HTMLFormElement) { this.dispatchEvent(EVENT_submit); } else if(arguments.length > 0 && (arguments[0] instanceof HTMLFormElement)) { arguments[0].dispatchEvent(EVENT_submit); } } /** * @param htmlFormElement * @return {Promise} */ function form_trimInputs(htmlFormElement) { return new Promise(function(resolve) { for(const htmlInputElement of /** @type {HTMLInputElement[]|HTMLTextAreaElement[]} */htmlFormElement.querySelectorAll("input[type='text'], input[type='number'], textarea")) { if(!htmlInputElement.classList.contains(CLASS_inputTypePassword)) { htmlInputElement.value = htmlInputElement.value.trim(); } } resolve(true); }); } function form_resetCustomValidity() { this.setCustomValidity(""); } /** * @param {Event} submitEvent * @this {HTMLFormElement} */ async function form_checkValidity(submitEvent) { submitEvent.preventDefault(); clearFocus(); form_setUploadScreen(this); await form_trimInputs(this); if(this.checkValidity()) { for(/** @type {HTMLInputElement} */const _htmlInputElement of this.querySelectorAll(".sp_input__format-screenshot")) { if(await node_formatScreenshot(_htmlInputElement) === false) { _htmlInputElement.setCustomValidity("Could not format file"); _htmlInputElement.addEventListener("change", form_resetCustomValidity); form_setUploadScreen(); this.reportValidity(); return; } } if(this.classList.contains(CLASS_formXml)) { form_ajaxRequest(this); } else { this.submit(); } } else { form_setUploadScreen(); this.reportValidity(); } } function form_setUploadScreen(htmlFormElement) { if(htmlFormElement instanceof HTMLFormElement) { htmlFormElement.classList.add("sp_form__uploading"); } else { document.querySelector("form.sp_form__uploading")?.classList.remove("sp_form__uploading"); } } /** * @param {HTMLFormElement} htmlFormElement */ function form_ajaxRequest(htmlFormElement) { const request = new XMLHttpRequest(); request.responseType = "json"; request.onload = form_ajaxResponse; request.open(htmlFormElement.method, htmlFormElement.action); request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); request.send(new FormData(htmlFormElement)); } /** * @this {XMLHttpRequest} */ async function form_ajaxResponse() { const { /** @type {JSON} */response, /** @type {number} */status } = this; form_setUploadScreen(); if(status === 200) { if(response instanceof Object) { if("::function" in response) { for(const fn of /** @type {Object[]} */response["::function"]) { const { /** @type {string} */name, /** @type {*} */params } = fn; switch(name) { case "messageInfo": messageInfo(params); break; case "redirect": window.location.href = params["url"]; break; case "modal_load": await modal_load(params); break; case "modal_unload": modal_unload(params); break; case "node_loadForm": await node_loadForm(params); break; case "node_validateForm": await node_validateForm(params); break; case "node_removeElement": await node_removeElement(params); break; case "paq_event": if(STATIC_ENV === "prod") { paq_event(params); } break; } } } } } else { // messageInfo({ // status: "error", // message: "Ajax request error" // }); } } /** * @param {HTMLElement|null} container * @return {Promise} */ function radio_initListeners(container = null) { return new Promise(function(resolve) { const nodeList = container ? container.querySelectorAll(`.${CLASS_radioContainer}`) : document.querySelectorAll(`.${CLASS_radioContainer}`); for(const radioContainer of /** @type {HTMLElement[]} */ nodeList) { for(const htmlInputElement of /** @type {HTMLInputElement[]} */ radioContainer.querySelectorAll(`.${CLASS_radioInputWrapper} input`)) { const inputType = htmlInputElement.type; htmlInputElement.closest(`.${CLASS_radioInputWrapper}`)?.classList.add(`sp_radio__type-${inputType}`); } radioContainer.addEventListener("change", radio_changeListener); radioContainer.dispatchEvent(EVENT_change); } resolve(true); }); } /** * @this {HTMLElement} */ function radio_changeListener() { for(const htmlLabelElement of /** @type {HTMLLabelElement[]} */this.querySelectorAll("label")) { if(htmlLabelElement.querySelector("input").checked === true) { htmlLabelElement.classList.add(CLASS_radioChecked); } else { htmlLabelElement.classList.remove(CLASS_radioChecked); } } } // // /** * @param {string} databaseName * @param {number} databaseVersion * @returns {Promise} */ function idb_openDatabase(databaseName, databaseVersion) { return new Promise(function(resolve) { if("indexedDB" in window) { const idbOpenDBRequest = window.indexedDB.open(databaseName, databaseVersion); idbOpenDBRequest.onerror = function() { console.error(new Error("Failed to open database")); resolve(null); }; idbOpenDBRequest.onupgradeneeded = async function(versionChangeEvent) { loader_show("Updating data", "Do not refresh the page !"); IDB_database = versionChangeEvent.target.result; const transaction = versionChangeEvent.target.transaction; const idbStores = IDB_database.objectStoreNames; for(/** @type {Store} */const store of Object.values(IDB_stores)) { await idb_createStore(IDB_database, store); } if([1, 2, 3, 4, 5, 6].includes(versionChangeEvent.oldVersion)) { IDB_hadMigration = true; } if([1, 2, 3, 4].includes(versionChangeEvent.oldVersion)) { window.indexedDB.deleteDatabase(databaseName); } if(versionChangeEvent.oldVersion === 5) { if(idbStores.contains(IDB_stores.ProfileStore.storeName) && idbStores.contains(IDB_stores.NodeStore.storeName)) { const nodeStore = transaction.objectStore(IDB_stores.NodeStore.storeName); const idbDataRequest = nodeStore.getAll(); idbDataRequest.onerror = function() { throw new Error(`[IDB GET ERROR]: ${idbDataRequest.error.name}`); }; idbDataRequest.onsuccess = async function(event) { const nodeStoreData = event.target.result; const idbClearRequest = await nodeStore.clear(); idbClearRequest.onerror = function() { throw new Error(`[IDB GET ERROR]: ${idbClearRequest.error.name}`); }; idbClearRequest.onsuccess = async function() { const profileStore = transaction.objectStore(IDB_stores.ProfileStore.storeName); const idbDataRequest = profileStore.getAll(); idbDataRequest.onerror = function() { throw new Error(`[IDB GET ERROR]: ${idbDataRequest.error.name}`); }; idbDataRequest.onsuccess = async function(event) { const profileStoreData = event.target.result; const idbClearRequest = await profileStore.clear(); idbClearRequest.onerror = function() { throw new Error(`[IDB GET ERROR]: ${idbClearRequest.error.name}`); }; idbClearRequest.onsuccess = async function() { for(const _profile of profileStoreData) { const profile = new Profile(); profile.hydrate(_profile); if(!profile.server || !["cn", "eu", "na"].includes(profile.server)) { profile.server = "eu"; } profile.slug = removeDiacritics(`${profile.name}-${profile.server}`).replace(/(\W|_)+/g, "-").toLowerCase(); await profileStore.put(profile.dehydrate()); for(const _node of nodeStoreData) { if(_profile["slug"] === _node["profile"]) { _node["profile"] = profile.slug; await nodeStore.put(_node); } } } }; }; }; }; } } if([5, 6].includes(versionChangeEvent.oldVersion)) { if(idbStores.contains(IDB_stores.ProfileStore.storeName) && idbStores.contains(IDB_stores.NodeStore.storeName)) { const nodeStore = transaction.objectStore(IDB_stores.NodeStore.storeName); const idbDataRequest = nodeStore.getAll(); idbDataRequest.onerror = function() { throw new Error(`[IDB GET ERROR]: ${idbDataRequest.error.name}`); }; idbDataRequest.onsuccess = async function(event) { const nodeStoreData = event.target.result; const idbClearRequest = await nodeStore.clear(); idbClearRequest.onerror = function() { throw new Error(`[IDB GET ERROR]: ${idbClearRequest.error.name}`); }; idbClearRequest.onsuccess = async function() { const profileStore = transaction.objectStore(IDB_stores.ProfileStore.storeName); const idbDataRequest = profileStore.getAll(); idbDataRequest.onerror = function() { throw new Error(`[IDB GET ERROR]: ${idbDataRequest.error.name}`); }; idbDataRequest.onsuccess = async function(event) { const profileStoreData = await event.target.result; const idbClearRequest = await profileStore.clear(); idbClearRequest.onerror = function() { throw new Error(`[IDB GET ERROR]: ${idbClearRequest.error.name}`); }; idbClearRequest.onsuccess = async function() { for(const _profile of profileStoreData) { const profile = new Profile(); profile.hydrate(_profile); switch(profile.slug) { case "default-eu": profile.slug = "profile-a"; profile.name = "Profile A"; profile.server = "eu"; profile.isActive = true; break; case "default-na": profile.slug = "profile-b"; profile.name = "Profile B"; profile.server = "na"; profile.isActive = false; break; case "default-cn": profile.slug = "profile-c"; profile.name = "Profile C"; profile.server = "cn"; profile.isActive = false; break; } await profileStore.put(profile.dehydrate()); for(const _node of nodeStoreData) { if(_profile["slug"] === _node["profile"]) { _node["profile"] = profile.slug; await nodeStore.put(_node); } } } }; }; }; }; } } if(versionChangeEvent.oldVersion !== 0) { setTimeout(function() { window.location.reload(); }, 5000); } }; idbOpenDBRequest.onsuccess = async function(event) { resolve(event.target.result); }; } else { resolve(null); } }); } /** * @param {IDBDatabase} database * @param {Store} store * @returns {Promise} */ function idb_createStore(database, store) { return new Promise(async function(resolve) { const idbStores = database.objectStoreNames; if(!idbStores.contains(store.storeName)) { const _store = await database.createObjectStore(store.storeName, { keyPath: store.keyPath, autoIncrement: store.autoIncrement }); if(store.indexes.length) { for(const _index of /** @type Index[] */ store.indexes) { _store.createIndex(_index.name, _index.keyPath, _index.options); } } } resolve(true); }); } /** * @param {Store} store * @returns {Promise} */ function idb_deleteStore(store) { return new Promise(function(resolve) { if(IDB_database) { const stores = IDB_database.objectStoreNames; if(stores.contains(store.storeName)) { IDB_database.deleteObjectStore(store.storeName); } } resolve(true); }); } /** * @param {string} type * @param {Store} store * @param {string|array|null} keyPath * @param {Object|null} index * @param {Object|null} data * @returns {Promise} */ function idb_openTransaction(type, store, {keyPath = null, index = null, data = null}) { return new Promise(async function(resolve) { if(IDB_database) { const types = ["get", "getAll", "put", "delete"]; if(types.includes(type)) { let result = null; switch(type) { case "get": case "getAll": result = await idb_getTransaction(store, {keyPath: keyPath, index: index}, type === "getAll"); break; case "put": result = await idb_putTransaction(store, data); break; case "delete": result = await idb_deleteTransaction(store, keyPath); break; } if(result instanceof Error) { console.error(result); resolve(null); } else { resolve(result); } } else { console.error(new Error(`"[IDB GENERAL ERROR] Unknow transaction type"`)); resolve(null); } } else { console.error(new Error("[IDB GENERAL ERROR] IndexedDB not available")); resolve(null); } }); } /** * @param {Store} store * @param {string|array|null} keyPath * @param {Array|null} index * @param {boolean} getAll * @returns {Promise<*>} */ function idb_getTransaction(store, {keyPath = null, index = null}, getAll = false) { return new Promise(function(resolve) { if(IDB_database) { const stores = IDB_database.objectStoreNames; if(stores.contains(store.storeName)) { let idbRequest = null; const objectStore = IDB_database.transaction(store.storeName).objectStore(store.storeName); if(getAll) { if(index !== null && Array.isArray(index)) { idbRequest = objectStore.index(index[0]) .getAll(index[1]); } else { idbRequest = objectStore.getAll(); } } else { if(keyPath !== null) { idbRequest = objectStore.get(keyPath); } else if(index !== null && typeof index === "object") { idbRequest = objectStore.index(index[0]) .get(index[1]); } } if(idbRequest) { idbRequest.onerror = function() { let error = "Unknow error"; switch(idbRequest.error.name) { case "ConstraintError": error = "id already exists"; break; } resolve(new Error(`[IDB GET ERROR]: ${error}`)); }; idbRequest.onsuccess = function() { resolve(idbRequest.result ? idbRequest.result : null); }; } else { resolve(new Error(`[IDB GET ERROR]: Request is null`)); } } else { resolve(new Error("[IDB GET ERROR] Store not found")); } } else { resolve(new Error("[IDB GENERAL ERROR] IndexedDB not available")); } }); } /** * @param {Store} store * @param {Object} data * @return {Promise} */ function idb_putTransaction(store, data) { return new Promise(function(resolve) { if(IDB_database) { const stores = IDB_database.objectStoreNames; if(stores.contains(store.storeName)) { const idbRequest = IDB_database.transaction(store.storeName, "readwrite").objectStore(store.storeName).put(data.__type === "class" ? data.dehydrate() : data); idbRequest.onerror = function() { return resolve(new Error(`[IDB PUT ERROR]: ${idbRequest.error.name}`)); }; idbRequest.onsuccess = async function() { resolve(await idb_getTransaction(store, {keyPath: idbRequest.result})); }; } else { resolve(new Error("[IDB PUT ERROR] Store not found")); } } else { resolve(new Error("[IDB GENERAL ERROR] IndexedDB not available")); } }); } /** * @param {Store} store * @param {string|array} keyPath * @return {Promise} */ function idb_deleteTransaction(store, keyPath) { return new Promise(function(resolve) { if(IDB_database) { const stores = IDB_database.objectStoreNames; if(stores.contains(store.storeName)) { const idbRequest = IDB_database.transaction(store.storeName, "readwrite").objectStore(store.storeName).delete(keyPath); idbRequest.onerror = function() { return resolve(new Error(`[IDB DELETE ERROR]: ${idbRequest.error.name}`)); }; idbRequest.onsuccess = async function() { resolve(idbRequest.result); }; } else { resolve(new Error("[IDB DELETE ERROR] Store not found")); } } else { resolve(new Error("[IDB GENERAL ERROR] IndexedDB not available")); } }); } // // function touchDeviceInit() { return new Promise(function(resolve) { GLOBAL_isTouchDevice = !!document.querySelector("#page-container.sp_app__is-touch-device"); if(GLOBAL_isTouchDevice) { document.querySelector("#nav-menu-btn")?.addEventListener("click", nav_switchState); } resolve(true); }); } function nav_switchState() { if(this.classList.contains("sp_nav__nav-open")) { this.classList.remove("sp_nav__nav-open"); document.querySelector("#header-container .sp_header__nav")?.classList.remove("sp_nav__nav-open"); } else { this.classList.add("sp_nav__nav-open"); document.querySelector("#header-container .sp_header__nav")?.classList.add("sp_nav__nav-open"); } } function messageInfo({type, message, length}) { const toastContainer = document.getElementById("toasts-container"); if(toastContainer) { toastContainer.innerHTML = "" if(!["info", "success", "error"].includes(type)) { type = "info"; } const toast = document.createElement("div"); toast.classList.add("sp_toast", `sp_toast__${type}`); toast.innerText = message; toastContainer.appendChild(toast); toast.classList.add("sp_toast__active"); // const toastze = function(type = "success", message) { // const toastElement = document.createElement("div"); // toastElement.classList.add("toast", `toast--${type}`); // const toastWrap = document.createElement("div"); // toastWrap.classList.add("toast__wrap"); // toastWrap.innerHTML = message; // // toastElement.appendChild(toastWrap); // toastsContainer.appendChild(toastElement); // // const tl = gsap.timeline(); // // tl.to(toastElement, { // autoAlpha: 1, // y: 0, // ease: "power4.out", // duration: .4 // }); // // tl.to(toastElement, { // height: 0, // marginBottom: 0, // autoAlpha: 0, // duration: .5, // delay: 2, // ease: "power4.out", // onComplete: ()=>{ // toastElement.parentElement.removeChild(toastElement); // } // }); // }; } } function contentFilter_init() { return new Promise(function(resolve) { for(const htmlSelectElement of /** @type {HTMLSelectElement[]} */document.querySelectorAll("[id$='content-filter']")) { htmlSelectElement.addEventListener("change", contentFilter_set); htmlSelectElement.dispatchEvent(EVENT_change); } resolve(); }); } /** * @this {HTMLSelectElement} */ function contentFilter_set() { for(const htmlElement of /** @type {HTMLElement[]} */document.querySelectorAll(`[data-content-for='${this.id}']`)) { if(isJson(htmlElement.dataset.filterValues)) { htmlElement.hidden = !JSON.parse(htmlElement.dataset.filterValues).includes(this.value); } else { htmlElement.hidden = htmlElement.dataset.filterValues !== this.value; } } } function loader_show(message, warnMessage) { const loader = document.getElementById("blob-loader"); if(loader) { /** @type {HTMLElement} */ const textElement = loader.querySelector(".sp_loader__text"); if(textElement) { textElement.innerText = message; if(typeof warnMessage !== "undefined") { const warnElement = document.createElement("div"); warnElement.classList.add("sp_loader__warn-text"); warnElement.innerText = warnMessage; textElement.append(warnElement); } } loader.removeAttribute("hidden"); } } function loader_hide() { const loader = document.getElementById("blob-loader"); if(loader) { loader.setAttribute("hidden", ""); } } function panelSwitch_init() { return new Promise(function(resolve) { for(const htmlElement of /** @type {HTMLElement[]} */document.querySelectorAll(".sp_panel__switch")) { htmlElement.addEventListener("click", panelSwitch__handleState); if(!GLOBAL_isTouchDevice) { htmlElement.parentElement.classList.add("sp_panel__open"); } } resolve(true); }); } function panelSwitch__handleState() { const panel=this.parentElement; if(panel.classList.contains("sp_panel__open")) { panel.classList.remove("sp_panel__open"); } else { panel.classList.add("sp_panel__open"); } } function slider__init() { return new Promise(function(resolve) { for(const htmlElement of /** @type {HTMLElement[]} */ document.querySelectorAll(".sp_panel__content-switch")) { htmlElement.addEventListener("click", slider_switchSlide); } resolve(true); }); } /** * @this {HTMLElement} */ function slider_switchSlide() { if(!this.classList.contains("sp_panel__switch-active") && typeof this.dataset.target !== "undefined") { const slide = document.getElementById(this.dataset.target); const slider = slide.parentElement.classList.contains("sp_slider") ? slide.parentElement : null; const switchContainer = this.parentElement?.classList.contains("sp_panel__content-switch-container") ? this.parentElement : null; if(slide && slider && switchContainer) { for(const htmlElement of /** @type {HTMLElement[]} */ switchContainer.querySelectorAll(".sp_panel__content-switch")) { htmlElement.classList.remove("sp_panel__switch-active"); } this.classList.add("sp_panel__switch-active"); for(const htmlElement of /** @type {HTMLElement[]} */ slider.querySelectorAll(".sp_slider__slide")) { htmlElement.classList.remove("sp_slider__slide-open"); } slide.classList.add("sp_slider__slide-open"); } } } /** * @returns {Promise} */ function slug_init() { return new Promise(function(resolve) { for(const htmlInputElement of /** @type {HTMLInputElement[]} */document.querySelectorAll("input[data-slug-target]")) { htmlInputElement.addEventListener("keyup", slug_generate); } resolve(); }); } /** * @this {HTMLInputElement} */ function slug_generate() { const target = this.getAttribute("data-slug-target"); if(target) { /** @type {HTMLInputElement} */ const htmlInputElement = document.querySelector(`input[data-slug-source='${target}']`); if(htmlInputElement) { htmlInputElement.value = removeDiacritics(this.value).replace(/(\W|_)+/g, "-").toLowerCase(); } } } // // /** * @param {MouseEvent} mouseEvent */ function mouseEvent_preventClick(mouseEvent) { if(GLOBAL_preventClick) { mouseEvent.preventDefault(); HANDLE_preventClickTimeout = setTimeout(function() { GLOBAL_preventClick = false; clearTimeout(HANDLE_preventClickTimeout); HANDLE_preventClickTimeout = null; }, 100); } } /** * @param {MouseEvent|TouchEvent} mouseEvent * @this {HTMLElement} */ async function mouseEvent_setMouseDown(mouseEvent) { mouseEvent.stopPropagation(); let {pageX, pageY, type} = mouseEvent; if(GLOBAL_isTouchDevice) { pageX = mouseEvent.changedTouches[0].clientX; pageY = mouseEvent.changedTouches[0].clientY; } GLOBAL_isMouseDown = type === (GLOBAL_isTouchDevice ? "touchstart" : "mousedown"); if(GLOBAL_isMouseDown) { const elementOffset = getOffsetFromDocument(this); GLOBAL_mouseDownCoordinate.x = pageX - elementOffset.x; GLOBAL_mouseDownCoordinate.y = pageY - elementOffset.y; if(this.id === "worldmap-container") { GLOBAL_region.scrollLeft = this.scrollLeft; GLOBAL_region.scrollTop = this.scrollTop; } } else { if(this.id === "worldmap-container") { GLOBAL_region.scrollLeft = ((this.scrollLeft + (this.clientWidth / 2)) * 100 / this.scrollWidth).toFixed(4); GLOBAL_region.scrollTop = ((this.scrollTop + (this.clientHeight / 2)) * 100 / this.scrollHeight).toFixed(4); await idb_openTransaction("put", IDB_stores.RegionStore, { data: GLOBAL_region }); } } } /** * @param {MouseEvent} mouseEvent */ function mouseEvent_stopPropagation(mouseEvent) { mouseEvent.stopPropagation(); } /** * @param {MouseEvent|TouchEvent} mouseEvent * @this {HTMLElement} */ function grid_setScroll(mouseEvent) { if(GLOBAL_isMouseDown) { mouseEvent.preventDefault(); if(GLOBAL_isTouchDevice && mouseEvent.touches.length > 1) { return; } if(HANDLE_preventClickTimeout) { clearTimeout(HANDLE_preventClickTimeout); HANDLE_preventClickTimeout=null; } GLOBAL_preventClick=true; const worldmap = this; let {pageX, pageY}=mouseEvent; const worldmapOffset=getOffsetFromDocument(worldmap); if(GLOBAL_isTouchDevice) { pageX = mouseEvent.changedTouches[0].clientX; pageY = mouseEvent.changedTouches[0].clientY; } const slideX=pageX - worldmapOffset.x - GLOBAL_mouseDownCoordinate.x; const slideY=pageY - worldmapOffset.y - GLOBAL_mouseDownCoordinate.y; worldmap.scrollLeft=Math.min(Math.max(GLOBAL_region.scrollLeft - slideX, 0), worldmap.scrollWidth - worldmap.clientWidth); worldmap.scrollTop=Math.min(Math.max(GLOBAL_region.scrollTop - slideY, 0), worldmap.scrollHeight - worldmap.clientHeight); } } /** * @return {Promise} */ function grid_initZoomController() { return new Promise(function(resolve) { /** @type {HTMLInputElement} */ const htmlRangeElement = document.querySelector("#grid-zoom-controller"); if(htmlRangeElement) { htmlRangeElement.max = GLOBAL_worldmapMaxZoomLevel.toString(); htmlRangeElement.value = GLOBAL_region.zoomLevel.toString(); htmlRangeElement.addEventListener("change", grid_wheelSetZoom); } resolve(true); }); } /** * @param {WheelEvent} wheelEvent * @this {HTMLElement} */ async function grid_wheelSetZoom(wheelEvent) { if(wheelEvent instanceof WheelEvent) { wheelEvent.preventDefault(); } const worldmap = this.id === "worldmap-container" ? this : document.querySelector("#worldmap-container"); /** @type {HTMLInputElement} */ const htmlRangeElement = this.id === "grid-zoom-controller" ? this : document.querySelector("#grid-zoom-controller"); if(worldmap && htmlRangeElement) { node_removeTooltip(); const zoomLevel = Number(Number(document.documentElement.style.getPropertyValue("--grid__zoom")).toFixed(0)); GLOBAL_region.scrollLeft = ((worldmap.scrollLeft + (worldmap.clientWidth / 2)) * 100 / worldmap.scrollWidth).toFixed(4) GLOBAL_region.scrollTop = ((worldmap.scrollTop + (worldmap.clientHeight / 2)) * 100 / worldmap.scrollHeight).toFixed(4) if(wheelEvent instanceof WheelEvent) { GLOBAL_region.zoomLevel = wheelEvent.deltaY < 0 ? (zoomLevel + 2) : (zoomLevel - 2); htmlRangeElement.value = GLOBAL_region.zoomLevel.toString(); } else { GLOBAL_region.zoomLevel = Number(htmlRangeElement.value); } GLOBAL_region.zoomLevel = Math.min(Math.max(GLOBAL_region.zoomLevel, 0), GLOBAL_worldmapMaxZoomLevel); document.documentElement.style.setProperty("--grid__zoom", GLOBAL_region.zoomLevel.toString()); worldmap.scrollLeft = Math.min(Math.max(Math.round((worldmap.scrollWidth * GLOBAL_region.scrollLeft / 100) - (worldmap.clientWidth / 2)), 0), worldmap.scrollWidth - worldmap.clientWidth); worldmap.scrollTop = Math.min(Math.max(Math.round((worldmap.scrollHeight * GLOBAL_region.scrollTop / 100) - (worldmap.clientHeight / 2)), 0), worldmap.scrollHeight - worldmap.clientHeight); await idb_openTransaction("put", IDB_stores.RegionStore, { data: GLOBAL_region }); } } /** * @param {TouchEvent} touchEvent * @this {HTMLElement} */ async function grid_resetPinchDistance(touchEvent) { if(touchEvent.touches.length === 1) { GLOBAL_pinchDistance = undefined; } } /** * @param {TouchEvent} touchEvent * @this {HTMLElement} */ function grid_pinchSetZoon(touchEvent) { if(touchEvent.touches.length === 2) { touchEvent.preventDefault(); /** @type {HTMLInputElement} */ const zoomControllerElement = document.querySelector("#grid-zoom-controller"); if(zoomControllerElement) { const pinchDistance = Math.hypot( touchEvent.touches[0].pageX - touchEvent.touches[1].pageX, touchEvent.touches[0].pageY - touchEvent.touches[1].pageY).toFixed(0); if(typeof GLOBAL_pinchDistance === "undefined") { GLOBAL_pinchDistance = pinchDistance; } if(pinchDistance > (GLOBAL_pinchDistance + 60)) { GLOBAL_pinchDistance+=60; if(zoomControllerElement.value < GLOBAL_worldmapMaxZoomLevel) { zoomControllerElement.value = Math.min(Math.max((Number(zoomControllerElement.value) + Number(zoomControllerElement.step)), 0), GLOBAL_worldmapMaxZoomLevel) .toFixed(0) .toString(); zoomControllerElement.dispatchEvent(EVENT_change); } } else if(pinchDistance < (GLOBAL_pinchDistance - 30)) { GLOBAL_pinchDistance-=30; if(zoomControllerElement.value > 0) { zoomControllerElement.value = Math.min(Math.max((Number(zoomControllerElement.value) - Number(zoomControllerElement.step)), 0), GLOBAL_worldmapMaxZoomLevel) .toFixed(0) .toString(); zoomControllerElement.dispatchEvent(EVENT_change); } } } } } function grid_setWidth() { return new Promise(function(resolve) { const worldmapElement = document.querySelector(".sp_grid__container"); if(worldmapElement?.dataset.regionWidth) { document.documentElement.style.setProperty("--grid__width", worldmapElement.dataset.regionWidth); } if(worldmapElement?.dataset.regionHeight) { document.documentElement.style.setProperty("--grid__height", worldmapElement.dataset.regionHeight); } resolve(true); }); } async function modal_load({htmlString}) { const modalContainer = document.getElementById("modal-container"); const modalSubContainer = modalContainer?.querySelector(".sp_modal__container"); if(modalSubContainer) { modalSubContainer.innerHTML = ""; modalSubContainer.append(strToHtml(htmlString)); await form_init(modalContainer); modalContainer.querySelector(".sp_modal__background")?.addEventListener("click", modal_unload); for(const htmlButtonElement of /** @type {HTMLInputElement[]} */ modalContainer.querySelectorAll(".sp_modal .sp_form-row__button button[type='button']")) { htmlButtonElement.addEventListener("click", modal_unload); } modalContainer.classList.add("sp_modal__open"); } } /** * @param {MouseEvent} mouseEvent */ function modal_unload(mouseEvent) { if(mouseEvent instanceof PointerEvent) { mouseEvent.stopPropagation(); } const modalContainer = document.getElementById("modal-container"); const modalSubContainer = modalContainer?.querySelector(".sp_modal__container"); if(modalSubContainer) { modalContainer.classList.remove("sp_modal__open"); setTimeout(function() { modalSubContainer.innerHTML = ""; }, 300); } } /** * @return {Promise} */ function node_setIndexesAndCoordinaites() { return new Promise(async function(resolve) { const nodesIndexes = {} await node_setCollected(); for(const filterInputElement of /** @type {HTMLInputElement[]} */ document.querySelectorAll("#worldmap-filters .sp_worldmap__filter")) { if(filterInputElement.dataset.index) { nodesIndexes[filterInputElement.value] = filterInputElement.dataset.index; } } // for(const nodeElement of /** @type {HTMLElement[]} */ document.querySelectorAll(".sp_grid__column .sp_node__item")) { for(const nodeElement of /** @type {HTMLElement[]} */ document.querySelectorAll(".sp_grid__cell .sp_node__item")) { if(typeof nodeElement.dataset.filter !== "undefined" && nodeElement.dataset.filter in nodesIndexes) { nodeElement.style.zIndex = nodesIndexes[nodeElement.dataset.filter]; } if(typeof nodeElement.dataset.coordinate !== "undefined" && isJson(nodeElement.dataset.coordinate)) { const {x, y} = JSON.parse(nodeElement.dataset.coordinate); if(x && y) { Object.assign(nodeElement.style, { left: `${x}%`, top: `${y}%` }); nodeElement.removeAttribute("hidden"); } } nodeElement.addEventListener("click", node_loadTooltip); } resolve(true); }); } /** @this {HTMLButtonElement} */ async function node_getAnchorPoint() { const buttonElement = this; const worldmapElement = document.getElementById("worldmap-container"); const nodeElement = buttonElement.dataset.nodeId ? worldmapElement.querySelector(`#${buttonElement.dataset.nodeId}`) : null; if(nodeElement) { let nodeOffset = getOffsetFrom(nodeElement, worldmapElement); nodeOffset.x = Number((nodeOffset.x * 100 / worldmapElement.scrollWidth).toFixed(4)); nodeOffset.y = Number((nodeOffset.y * 100 / worldmapElement.scrollHeight).toFixed(4)); await navigator.clipboard.writeText(JSON.stringify(nodeOffset)); alert("Data copier to clipboard"); } } /** * @return {Promise} */ function node_setCollected() { return new Promise(async function(resolve) { const idb_nodes = await idb_openTransaction("getAll", IDB_stores.NodeStore, {index: ["region", GLOBAL_region.slug]}); if(idb_nodes && Array.isArray(idb_nodes)) { for(const _node of idb_nodes) { if(_node['profile'] === GLOBAL_worldmapProfile.slug && _node["isHidden"]) { document.getElementById(_node["domId"])?.classList.add("sp_node__collected"); } } } resolve(true); }); } /** * @return {Promise} */ function node_resetCollected() { return new Promise(function(resolve) { // for(const nodeElement of /** @type {HTMLElement[]} */ document.querySelectorAll(".sp_grid__column .sp_node__item")) { for(const nodeElement of /** @type {HTMLElement[]} */ document.querySelectorAll(".sp_grid__cell .sp_node__item")) { nodeElement.classList.remove("sp_node__collected"); } resolve(true); }); } /** * @this {HTMLLabelElement} * @param {MouseEvent} mouseEvent */ async function node_loadTooltip(mouseEvent) { if(!GLOBAL_preventClick) { mouseEvent?.stopPropagation(); // this.getBoundingClientRect() const nodeElement = this; /** @type {HTMLElement|null} */ const gridContainer = nodeElement.closest(".sp_grid__container"); const tooltip = /** @type {HTMLElement|null} */ document.getElementById("template_tooltip")?.content.firstElementChild?.cloneNode(true); const title = nodeElement.dataset.filter ? document.querySelector(`#worldmap-filters .sp_worldmap__filter[value='${nodeElement.dataset.filter}']`) ?.parentElement ?.querySelector(".sp_radio__input-label") ?.innerText : null; if(gridContainer && tooltip && title) { node_removeTooltip(); if(document.querySelector("#page-container")?.dataset.device !== "mobile") { const _tooltipPos = getOffsetFrom(nodeElement, gridContainer); _tooltipPos.x += (nodeElement.clientWidth / 2); Object.assign(tooltip.style, { left: `${_tooltipPos.x}px`, top: `${_tooltipPos.y}px` }); } /** @type {HTMLElement|null} */ const _tooltipNodeDisplayButton = tooltip.querySelector(".sp_node__set-display"); if(_tooltipNodeDisplayButton) { if(Number(nodeElement.dataset.canBeHidden) === 1) { _tooltipNodeDisplayButton.dataset.nodeId = nodeElement.id; _tooltipNodeDisplayButton.addEventListener("click", node_setDisplay); if(nodeElement.classList.contains("sp_node__collected")) { _tooltipNodeDisplayButton.dataset.isHidden = "1"; } } else { _tooltipNodeDisplayButton.remove(); } } if(typeof nodeElement.dataset.editUrl !== "undefined") { const _tooltipForm = /** @type {HTMLFormElement|null} */tooltip.querySelector(".sp_node__edit-form"); if(_tooltipForm) { _tooltipForm.action = nodeElement.dataset.editUrl; } } if(typeof nodeElement.dataset.deleteUrl !== "undefined") { const _tooltipDeleteForm = /** @type {HTMLFormElement|null} */tooltip.querySelector(".sp_node_delete-form"); if(_tooltipDeleteForm) { _tooltipDeleteForm.action = nodeElement.dataset.deleteUrl; } } const anchorElement = tooltip.querySelector(".sp_node__calc-anchor"); if(anchorElement) { anchorElement.dataset.nodeId = nodeElement.id; anchorElement.addEventListener("click", node_getAnchorPoint); } const _tooltipTitle = tooltip.querySelector(".sp_tooltip__header span:nth-child(1)"); if(_tooltipTitle) { _tooltipTitle.innerText = title; } const _tooltipTitleExtra = tooltip.querySelector(".sp_tooltip__header span:nth-child(2)"); if(_tooltipTitleExtra) { _tooltipTitleExtra.innerText = `#${nodeElement.id.substring(5)}`; } if(typeof nodeElement.dataset.description !== "undefined" && nodeElement.dataset.description.length > 0) { /** @type {HTMLElement} */ const _tooltipDescription = tooltip.querySelector(".sp_tooltip__body"); if(_tooltipDescription) { _tooltipDescription.innerText = nodeElement.dataset.description; } } if(typeof nodeElement.dataset.screenshots !== "undefined" && isJson(nodeElement.dataset.screenshots)) { /** @type {HTMLElement} */ const tooltipFooter = tooltip.querySelector(".sp_tooltip__footer"); const screenshotContainer = tooltipFooter?.querySelector(".sp_tooltip__screenshot-container"); if(tooltipFooter && screenshotContainer) { const sources = JSON.parse(nodeElement.dataset.screenshots); if(sources.length) { for(const _source of sources) { const htmlImageElement = /** @var {HTMLImageElement} */ document.createElement("img"); htmlImageElement.src = _source; const htmlLinkElement = /** @var {HTMLLinkElement} */ document.createElement("a"); htmlLinkElement.href = _source.replace("/thumbnail", ""); htmlLinkElement.target = "_blank"; htmlLinkElement.classList.add("sp_screenshot__container") htmlLinkElement.append(htmlImageElement); screenshotContainer.append(htmlLinkElement); } tooltipFooter.hidden = false; } } } if(document.querySelector("#page-container")?.dataset.device === "mobile") { const nodeOffset = getOffsetFrom(nodeElement, gridContainer); gridContainer.scrollLeft = Math.min(Math.max(nodeOffset.x + (nodeElement.clientWidth / 2) - (gridContainer.clientWidth / 2), 0), gridContainer.scrollWidth); gridContainer.scrollTop = Math.min(Math.max(nodeOffset.y + (nodeElement.clientHeight * 2) - (gridContainer.clientHeight / 2), 0), gridContainer.scrollHeight); GLOBAL_region.scrollLeft = ((gridContainer.scrollLeft + (gridContainer.clientWidth / 2)) * 100 / gridContainer.scrollWidth).toFixed(4); GLOBAL_region.scrollTop = ((gridContainer.scrollTop + (gridContainer.clientHeight / 2)) * 100 / gridContainer.scrollHeight).toFixed(4); log([GLOBAL_region.scrollLeft, GLOBAL_region.scrollTop]) await idb_openTransaction("put", IDB_stores.RegionStore, { data: GLOBAL_region }); } nodeElement.classList.add("sp_node__highlight"); gridContainer.append(tooltip); await form_init(tooltip); tooltip.addEventListener(GLOBAL_isTouchDevice ? "touchstart" : "mousedown", mouseEvent_stopPropagation); tooltip.addEventListener("click", mouseEvent_stopPropagation); tooltip.addEventListener(GLOBAL_isTouchDevice ? "touchend" : "mouseup", mouseEvent_stopPropagation); tooltip.addEventListener("wheel", mouseEvent_stopPropagation); tooltip.removeAttribute("hidden"); } } } function node_removeTooltip() { if(!GLOBAL_preventClick) { for(const _tooltip of /** @type {HTMLElement[]} */ document.querySelectorAll(".sp_tooltip__wrapper")) { _tooltip.remove(); } for(const _nodeElement of /** @type {HTMLElement[]} */ document.querySelectorAll(".sp_node__highlight")) { _nodeElement.classList.remove("sp_node__highlight"); } } } /** * @param {MouseEvent} mouseEvent * @this {HTMLButtonElement} */ async function node_setDisplay(mouseEvent) { let category = null; /** @type {HTMLLabelElement} */ const nodeElement = document.getElementById(this.dataset.nodeId); if(nodeElement) { if(typeof nodeElement.dataset.filter !== "undefined") { category = document.querySelector(`input.sp_worldmap__filter[value='${nodeElement.dataset.filter}']`) ?.closest(".sp_panel__section") ?.querySelector(".sp_panel__section-title h2") ?.dataset.sectionTitle; } if(nodeElement.classList.contains("sp_node__collected")) { nodeElement.classList.remove("sp_node__collected"); await idb_openTransaction("delete", IDB_stores.NodeStore, { keyPath: [GLOBAL_worldmapProfile.slug, nodeElement.id] }); if(STATIC_ENV === "prod" && category) { paq_event({ type: "trackEvent", name: "Map: Users node tracking", value: `${category.innerText} node uncollected` }); } } else { nodeElement.classList.add("sp_node__collected"); await idb_openTransaction("put", IDB_stores.NodeStore, { data: new Node(GLOBAL_worldmapProfile.slug, nodeElement.id, GLOBAL_region.slug, true) }); if(STATIC_ENV === "prod" && category) { paq_event({ type: "trackEvent", name: "Map: Users node tracking", value: `${category} node collected` }); } } /** @type {HTMLElement} */ const tooltipActionElement = document.querySelector("#worldmap-container .sp_tooltip__wrapper .sp_tooltip__action.sp_node__set-display"); if(tooltipActionElement) { tooltipActionElement.dataset.isHidden = Number(nodeElement.classList.contains("sp_node__collected")).toString(); } const filterInputElement = document.querySelector(`#worldmap-filters .sp_worldmap__filter[value='${nodeElement.dataset.filter}']`); if(filterInputElement) { worldmapFilter_updateCounter(filterInputElement); } primogem_updateCounter(); } } /** * @this {HTMLElement} */ function node_queryNewForm() { if(!GLOBAL_preventClick) { const gridId = this.id.replace("grid-", ""); const htmlButtonElement = /** @type {HTMLButtonElement} */document.querySelector("#worldmap-filters .sp_worldmark__init-new-node.sp_button__active"); if(gridId && typeof parseInt(gridId) == "number" && parseInt(gridId) > 0 && htmlButtonElement && typeof htmlButtonElement.dataset.uri !== "undefined") { const htmlFormElement = document.createElement("form"); htmlFormElement.action = encodeURI(decodeURI(htmlButtonElement.dataset.uri).replace("%gridId%", gridId)); htmlFormElement.method = "post"; form_ajaxRequest(htmlFormElement); } } } async function node_loadForm({gridId, coordinate, htmlString, nodeId}) { const worldmap = document.getElementById("worldmap-container"); const gridElement = document.getElementById(`grid-${gridId}`); const panelElement = document.getElementById("main-right-container"); if(worldmap && gridElement && panelElement) { node_removeTooltip(); panelElement.innerHTML = ""; panelElement.append(strToHtml(htmlString)); panelElement.querySelector("#node-form .sp_form-row__button .sp_button[data-type='cancel']") ?.addEventListener("click", worldmap_disableEditionMode); await radio_initListeners(panelElement); await form_init(panelElement); const trackerElement = document.getElementById("node-form-coordinate-tracker"); if(trackerElement) { if(nodeId) { const nodeElement = document.querySelector(`#node-${nodeId}`); if(nodeElement) { await worldmap_enableEditionMode(false); GLOBAL_nodeBackup.grid = gridElement; GLOBAL_nodeBackup.node = nodeElement.cloneNode(true); nodeElement.remove(); } } else { // for(const gridElement of /** @type {HTMLElement[]} */ worldmap.querySelectorAll(".sp_grid__column")) { for(const gridElement of /** @type {HTMLElement[]} */ worldmap.querySelectorAll(".sp_grid__cell")) { gridElement.removeEventListener("click", node_queryNewForm); } } worldmap.classList.add("sp_worldmap_locked"); gridElement.classList.add("sp_grid__active"); gridElement.querySelector(".sp_grid__node-container")?.append(trackerElement); if(GLOBAL_nodeBackup.node) { Object.assign(trackerElement.style, { left: GLOBAL_nodeBackup.node.style.left, top: GLOBAL_nodeBackup.node.style.top }); } else { Object.assign(trackerElement.style, { left: `${coordinate.x}%`, top: `${coordinate.y}%` }); } await node_initTracker(); trackerElement.removeAttribute("hidden"); panelElement.classList.add("sp_panel__open") } else { await worldmap_disableEditionMode(); messageInfo({ type: "error", message: "Could not find form tracker" }); } } } async function node_validateForm({gridId, htmlString}) { const gridElement = document.getElementById(`grid-${gridId}`); const nodeElement = strToHtml(htmlString).firstElementChild; document.getElementById("node-form-coordinate-tracker")?.remove(); gridElement.querySelector(".sp_grid__node-container")?.append(nodeElement); GLOBAL_nodeBackup.grid = null; GLOBAL_nodeBackup.node = null; await node_setIndexesAndCoordinaites(); if(nodeElement.dataset.filter) { const filterInputElement = document.querySelector(`#worldmap-filters .sp_worldmap__filter[value='${nodeElement.dataset.filter}']`); if(filterInputElement) { filterInputElement.dispatchEvent(EVENT_change); worldmapFilter_updateCounter(filterInputElement); } } await worldmap_disableEditionMode(); primogem_updateCounter(); } async function node_unloadForm() { const panelElement=document.getElementById("main-right-container"); // const gridElement = document.querySelector(".sp_grid__column.sp_grid__active"); const gridElement = document.querySelector(".sp_grid__cell.sp_grid__active"); const trackerElement = document.getElementById("node-form-coordinate-tracker"); if(panelElement) { if(panelElement.classList.contains("sp_panel__open")) { panelElement.classList.remove("sp_panel__open"); } panelElement.innerHTML = ""; } window.removeEventListener("keyup", node_moveTracker); gridElement?.removeEventListener("click", node_moveTracker); trackerElement?.remove(); if(GLOBAL_nodeBackup.grid && GLOBAL_nodeBackup.node) { GLOBAL_nodeBackup.node.hidden = true; GLOBAL_nodeBackup.grid .querySelector(".sp_grid__node-container") ?.append(GLOBAL_nodeBackup.node); if(GLOBAL_nodeBackup.node.dataset.filter) { document.querySelector(`#worldmap-filters .sp_worldmap__filter[value='${GLOBAL_nodeBackup.node.dataset.filter}']`) ?.dispatchEvent(EVENT_change); } GLOBAL_nodeBackup.grid = null; GLOBAL_nodeBackup.node = null; await node_setIndexesAndCoordinaites(); } } function node_removeElement({gridId, nodeId}) { const nodeElement = document.querySelector(`#grid-${gridId} #node-${nodeId}`); if(nodeElement) { let filterInputElement = null; if(nodeElement.dataset.filter) { filterInputElement = document.querySelector(`#worldmap-filters .sp_worldmap__filter[value='${nodeElement.dataset.filter}']`); } document.querySelector(`#grid-${gridId} #node-${nodeId}`)?.remove(); if(filterInputElement) { worldmapFilter_updateCounter(filterInputElement); } } node_removeTooltip(); } function node_initTracker() { return new Promise(function(resolve) { const nodeElement = document.getElementById("node-form-coordinate-tracker"); // const gridElement = document.querySelector(".sp_grid__column.sp_grid__active"); const gridElement = document.querySelector(".sp_grid__cell.sp_grid__active"); if(nodeElement) { nodeElement.addEventListener(GLOBAL_isTouchDevice ? "touchstart" : "mousedown", mouseEvent_setMouseDown); nodeElement.addEventListener(GLOBAL_isTouchDevice ? "touchend" : "mouseup", mouseEvent_setMouseDown); nodeElement.addEventListener(GLOBAL_isTouchDevice ? "touchleave" : "mouseleave", mouseEvent_setMouseDown); nodeElement.addEventListener(GLOBAL_isTouchDevice ? "touchmove" : "mousemove", node_moveTracker); window.addEventListener("keyup", node_moveTracker); nodeElement.addEventListener(GLOBAL_isTouchDevice ? "touchmove" : "mousemove", mouseEvent_stopPropagation); nodeElement.addEventListener("click", mouseEvent_stopPropagation); if(gridElement) { gridElement.addEventListener("click", node_moveTracker); } } resolve(true); }); } /** * @param {MouseEvent|TouchEvent|KeyboardEvent} event * @this {HTMLElement} */ function node_moveTracker(event) { event.preventDefault(); const nodeElement = document.getElementById("node-form-coordinate-tracker"); if(nodeElement) { const newCoordinate = {x: 0, y: 0}; if(event.type === "keyup") { const offsetFromParent = getOffsetFromParent(nodeElement); offsetFromParent.x += (nodeElement.clientWidth / 2); offsetFromParent.y += (nodeElement.clientHeight / 2); switch(event.key) { case "ArrowRight" : offsetFromParent.x += 1; break; case "ArrowLeft" : offsetFromParent.x -= 1; break; case "ArrowDown" : offsetFromParent.y += 1; break; case "ArrowUp" : offsetFromParent.y -= 1; break; } newCoordinate.x = Math.min(Math.max((offsetFromParent.x * 100 / nodeElement.parentElement.clientWidth), 0), 100).toFixed(4); newCoordinate.y = Math.min(Math.max((offsetFromParent.y * 100 / nodeElement.parentElement.clientHeight), 0), 100).toFixed(4); node_assignTrackerCoordinates(nodeElement, newCoordinate); } else if(event.type === "click" && !GLOBAL_preventClick) { newCoordinate.x = (event.offsetX * 100 / nodeElement.parentElement.clientWidth).toFixed(4); newCoordinate.y = (event.offsetY * 100 / nodeElement.parentElement.clientHeight).toFixed(4); node_assignTrackerCoordinates(nodeElement, newCoordinate); } else if(event.type === (GLOBAL_isTouchDevice ? "touchmove" : "mousemove") && GLOBAL_isMouseDown) { if(HANDLE_preventClickTimeout) { clearTimeout(HANDLE_preventClickTimeout); HANDLE_preventClickTimeout = null; } GLOBAL_preventClick = true; const offsetFromDocument = getOffsetFromDocument(nodeElement); const moveX = (GLOBAL_isTouchDevice ? event.changedTouches[0].clientX : event.pageX) - offsetFromDocument.x - GLOBAL_mouseDownCoordinate.x; const moveY = (GLOBAL_isTouchDevice ? event.changedTouches[0].clientY : event.pageY) - offsetFromDocument.y - GLOBAL_mouseDownCoordinate.y; newCoordinate.x = Math.min(Math.max((nodeElement.offsetLeft + moveX) * 100 / nodeElement.parentElement.clientWidth, 0), 100).toFixed(4); newCoordinate.y = Math.min(Math.max((nodeElement.offsetTop + moveY) * 100 / nodeElement.parentElement.clientHeight, 0), 100).toFixed(4); node_assignTrackerCoordinates(nodeElement, newCoordinate); } } } /** * @param {HTMLElement} nodeElement * @param {{x: number, y: number}} coordinates */ function node_assignTrackerCoordinates(nodeElement, coordinates) { const inputPosX = document.getElementById("node_coordX"); const inputPosY = document.getElementById("node_coordY"); const inputCoordinate = document.getElementById("node_coordinate"); if(inputPosX && inputPosY && inputCoordinate) { Object.assign(nodeElement.style, { left: `${coordinates.x}%`, top: `${coordinates.y}%` }); inputPosX.value = coordinates.x; inputPosY.value = coordinates.y; inputCoordinate.value = JSON.stringify(coordinates); } } /** * @param {HTMLInputElement} htmlInputElement * @return {Promise} */ function node_formatScreenshot(htmlInputElement) { return new Promise(function(resolve) { if(htmlInputElement.files[0]) { if(htmlInputElement.files[0]['type'].split('/')[0] === 'image') { let fileName = htmlInputElement?.parentNode?.querySelector("input[name='file-path']")?.value; if(fileName) { /** @type {HTMLCanvasElement} */ const canvas = document.getElementById("transform-canvas"); if(canvas && canvas.getContext) { const canvasContext = canvas.getContext("2d"); const reader = new FileReader(); const img = new Image(); canvasContext.clearRect(0, 0, canvasContext.canvas.width, canvasContext.canvas.height); canvasContext.beginPath(); canvasContext.closePath(); reader.onload = async function(progressEvent){ img.src = /** @type {string} */ progressEvent.target.result; } img.onload = function() { let canvasSX = 0; let canvasSY = 0; let canvasSW = img.naturalWidth; let canvasSH = img.naturalHeight; if(canvasSH > canvasSW) { resolve(false); } else { canvasSX = (canvasSW - (canvasSH * 16 / 9)) / 2; canvasSW = canvasSH * 16 / 9; } canvasContext.drawImage(img, canvasSX, canvasSY, canvasSW, canvasSH, 0, 0, canvas.width, canvas.height); const fileData = atob(canvas.toDataURL("image/jpeg", 1).split(",")[1]); let fileLength = fileData.length; const bitArray = new Uint8Array(fileLength); while(fileLength--) { bitArray[fileLength] = fileData.charCodeAt(fileLength); } const fileList = new DataTransfer(); fileList.items.add(new File([bitArray], `edit_${fileName.replace(/\.png$|\.jpg$/g,'.jpeg')}`, {type: "image/jpeg"})); htmlInputElement.files = fileList.files; htmlInputElement.dispatchEvent(EVENT_change); resolve(true); } reader.readAsDataURL(htmlInputElement.files[0]); } else { resolve(false); } } else { resolve(false) } } else { resolve(false); } } else { resolve(null); } }); } function worldmap_init() { return new Promise(async function(resolve) { await grid_setWidth(); const worldmap = document.getElementById("worldmap-container"); if(worldmap) { IDB_database = await idb_openDatabase(IDB_databaseName, IDB_databaseVersion); await worldmapProfiles_init(); if(GLOBAL_worldmapProfile) { GLOBAL_region = new Region(worldmap.getAttribute("data-region-id"), worldmap.getAttribute("data-region-name")); /** @type {Object} */ const _region = await idb_openTransaction("get", IDB_stores.RegionStore, { keyPath: GLOBAL_region.slug }); if(_region) { GLOBAL_region.hydrate(_region); } else { await idb_openTransaction("put", IDB_stores.RegionStore, { data: GLOBAL_region }); } let anchor = worldmap.dataset.anchor; if(typeof anchor !== "undefined" && isJson(anchor)) { anchor = JSON.parse(anchor); GLOBAL_region.zoomLevel = 8; GLOBAL_region.scrollLeft = anchor.x; GLOBAL_region.scrollTop = anchor.y; await idb_openTransaction("put", IDB_stores.RegionStore, { data: GLOBAL_region }); } document.documentElement?.style.setProperty("--grid__zoom", GLOBAL_region.zoomLevel.toString()); await grid_initZoomController() worldmap.scrollLeft = Math.min(Math.max(Math.round((worldmap.scrollWidth * GLOBAL_region.scrollLeft / 100) - (worldmap.clientWidth / 2)), 0), worldmap.scrollWidth - worldmap.clientWidth); worldmap.scrollTop = Math.min(Math.max(Math.round((worldmap.scrollHeight * GLOBAL_region.scrollTop / 100) - (worldmap.clientHeight / 2)), 0), worldmap.scrollHeight - worldmap.clientHeight); worldmap.addEventListener(GLOBAL_isTouchDevice ? "touchstart" : "mousedown", mouseEvent_setMouseDown); worldmap.addEventListener(GLOBAL_isTouchDevice ? "touchend" : "mouseup", mouseEvent_setMouseDown); worldmap.addEventListener(GLOBAL_isTouchDevice ? "touchleave" : "mouseleave", mouseEvent_setMouseDown); if(GLOBAL_isTouchDevice) { worldmap.addEventListener("touchend", grid_resetPinchDistance); worldmap.addEventListener("touchmove", grid_pinchSetZoon); } else { worldmap.addEventListener("wheel", grid_wheelSetZoom); } worldmap.addEventListener(GLOBAL_isTouchDevice ? "touchmove" : "mousemove", grid_setScroll); worldmap.addEventListener("click", mouseEvent_preventClick); worldmap.addEventListener("click", node_removeTooltip); await node_setIndexesAndCoordinaites(); await worldmapFilter_Init(); } else { loader_show("", "Could not load a profile, please refresh the page"); IDB_hadMigration = true; } } primogem_updateCounter(); resolve(); }); } /** * @this {HTMLButtonElement} */ async function worldmap_handleEditionMode() { const htmlButtonElement=this; if(htmlButtonElement.classList.contains("sp_button__active")) { await worldmap_disableEditionMode(); } else { await worldmap_disableEditionMode(); await worldmap_enableEditionMode(); htmlButtonElement.classList.add("sp_button__active"); } } async function worldmap_enableEditionMode(setEventListener=true) { return new Promise(function(resolve) { const worldmap = document.getElementById("worldmap-container"); if(worldmap) { if(setEventListener) { // for(const gridElement of /** @type {HTMLElement[]} */ worldmap.querySelectorAll(".sp_grid__column")) { for(const gridElement of /** @type {HTMLElement[]} */ worldmap.querySelectorAll(".sp_grid__cell")) { gridElement.addEventListener("click", node_queryNewForm); } } worldmap.classList.add("sp_worldmap__edit"); } resolve(true); }); } function worldmap_disableEditionMode() { return new Promise(async function(resolve) { await node_unloadForm(); for(const _htmlButtonElement of /** @type {HTMLButtonElement[]} */ document.querySelectorAll(".sp_worldmark__init-new-node")) { _htmlButtonElement.classList.remove("sp_button__active"); } const worldmap = document.getElementById("worldmap-container"); if(worldmap) { // for(const _gridElement of /** @type {HTMLElement[]} */ worldmap.querySelectorAll(".sp_grid__column")) { for(const _gridElement of /** @type {HTMLElement[]} */ worldmap.querySelectorAll(".sp_grid__cell")) { _gridElement.classList.remove("sp_grid__active"); _gridElement.removeEventListener("click", node_queryNewForm); } worldmap.classList.remove("sp_worldmap__edit", "sp_worldmap_locked"); } resolve(true); }); } function worldmapFilter_Init() { return new Promise(async function(resolve) { const filters = {}; for(const htmlSpanElement of /** @type {HTMLSpanElement[]} */ document.querySelectorAll("#worldmap-filters .sp_panel__section-title h2 span")) { const section = htmlSpanElement.closest(".sp_panel__section"); const category = section?.querySelector(".sp_panel__section-title h2"); if(category?.dataset.sectionTitle) { const localKey = removeDiacritics(`${category.dataset.sectionTitle}`).replace(/(\W|_)+/g, "").toLowerCase(); if(window.localStorage.getItem(`map.genshin.filter.section.${localKey}.state`) === "closed") { section.classList.add("sp_panel__section-closed"); } } htmlSpanElement.addEventListener("click", worldmapFilter_sectionCollapse); } for(const htmlButtonElement of /** @type {HTMLButtonElement[]} */ document.querySelectorAll("#worldmap-filters .sp_section-filter__switch")) { htmlButtonElement.addEventListener("click", worldmapFilter_switchDisplayAll); } const _filters = await idb_openTransaction("getAll", IDB_stores.FilterStore, { index: ["region", GLOBAL_region.slug] }); if(_filters && Array.isArray(_filters)) { for(const _filter of _filters) { filters[_filter["slug"]] = _filter; } } for(const filterInputElement of /** @type {HTMLInputElement[]} */ document.querySelectorAll("#worldmap-filters .sp_worldmap__filter")) { filterInputElement.checked = filterInputElement.value in filters ? Boolean(filters[filterInputElement.value]["isActive"]) : false; worldmapFilter_updateCounter(filterInputElement); filterInputElement.addEventListener("change", worldmapFilter_switchDisplay); filterInputElement.dispatchEvent(EVENT_change); } for(const htmlElement of /** @type {HTMLElement[]} */ document.querySelectorAll(".sp_worldmark__init-new-node")) { htmlElement.addEventListener("click", worldmap_handleEditionMode); } GLOBAL_worldmapFilter_isInitialized = true; resolve(true); }); } /** @this {HTMLElement} */ function worldmapFilter_sectionCollapse() { const section = this.closest(".sp_filter__section"); if(section) { const sectionTitle = section.querySelector("h2")?.dataset.sectionTitle; let localKey = null if(sectionTitle) { localKey = removeDiacritics(`${sectionTitle}`).replace(/(\W|_)+/g, "").toLowerCase(); } if(section.classList.contains("sp_panel__section-closed")) { if(localKey) { window.localStorage.setItem(`map.genshin.filter.section.${localKey}.state`, "open"); } section.classList.remove("sp_panel__section-closed"); } else { if(localKey) { window.localStorage.setItem(`map.genshin.filter.section.${localKey}.state`, "closed"); } section.classList.add("sp_panel__section-closed"); } } } function worldmapFilter_updateCounter(filterInputElement) { const counterElement = filterInputElement.parentElement?.querySelector(".nodes_count"); if(counterElement) { let counter; let total = 0; let hidden = 0; const nodesList = document.querySelectorAll(`#worldmap-container .sp_node__item[data-filter='${filterInputElement.value}']`); for(const _node of /** @type {HTMLElement[]} */nodesList) { if(typeof _node.dataset.quantity !== "undefined") { total += Number(_node.dataset.quantity); if(_node.classList.contains("sp_node__collected")) { hidden += Number(_node.dataset.quantity); } } } if(Number(filterInputElement.dataset.canBeHidden) !== 1) { hidden = total; } counter = `${hidden}/${total}` counterElement.innerText = counter; } } /** * @this {HTMLInputElement} */ async function worldmapFilter_switchDisplay() { const filterInputElement = this; for(const nodeElement of /** @type {HTMLLabelElement[]} */ document.querySelectorAll(`.sp_node__item[data-filter='${filterInputElement.value}']`)) { if(filterInputElement.checked) { nodeElement.classList.remove("sp_node__hidden"); } else { nodeElement.classList.add("sp_node__hidden"); } } if(GLOBAL_worldmapFilter_isInitialized) { await worldmapFilter_saveDisplay(); } } /** * @this {HTMLButtonElement} */ async function worldmapFilter_switchDisplayAll() { const htmlButtonElement = this; for(const filterInputElement of /** @type {HTMLInputElement[]} */ htmlButtonElement.closest(".sp_filter__section") .querySelectorAll(".sp_worldmap-filter__section .sp_worldmap__filter")) { if(htmlButtonElement.value === "show_all") { filterInputElement.checked = true; } else if(htmlButtonElement.value === "hide_all") { filterInputElement.checked = false; } filterInputElement.dispatchEvent(EVENT_change); } } async function worldmapFilter_saveDisplay() { node_removeTooltip(); if(IDB_database) { for(const filterInputElement of /** @type {HTMLInputElement[]} */ document.querySelectorAll("#worldmap-filters .sp_worldmap__filter")) { await idb_openTransaction("put", IDB_stores.FilterStore, { data: new Filter(GLOBAL_region.slug, filterInputElement.value, filterInputElement.checked) }); } } } function worldmapProfiles_init() { return new Promise(async function(resolve) { if(IDB_database) { const profiles = IDB_database ? await idb_openTransaction("getAll", IDB_stores.ProfileStore, {}) : []; //ToDo check is empty array pass condition if(profiles) { const profilesContainer = document.getElementById("profiles__profiles-container"); const serverContainer = document.getElementById("profiles__servers-container"); if(!profiles.length) { const profile = new Profile("profile-a", "Profile A"); await idb_openTransaction("put", IDB_stores.ProfileStore, { data: profile }); profiles.push(profile.dehydrate()); } if(profilesContainer && serverContainer) { for(const _profile of /** @type {Object[]} */ profiles) { const profile = new Profile(); profile.hydrate(_profile); if(!["cn", "eu", "na"].includes(profile.server)) { profile.server = "eu"; await idb_openTransaction("put", IDB_stores.ProfileStore, { data: profile }); } /** @type {HTMLInputElement|null} */ let profileInputElement = profilesContainer.querySelector(`.sp_radio__input-wrapper input[name='_profile'][value='${profile.slug}']`); if(profileInputElement) { const profileLabelElement = profileInputElement.parentElement.querySelector(".sp_radio__input-label"); if(profileLabelElement) { profileLabelElement.innerText = profile.name; } if(profile.isActive) { profileInputElement.checked = true; profileInputElement.dispatchEvent(EVENT_change); /** @type {HTMLInputElement|null} */ const serverInputElement = serverContainer.querySelector(`.sp_radio__input-wrapper input[value='${profile.server}']`); if(serverInputElement) { serverInputElement.checked = true; serverInputElement.dispatchEvent(EVENT_change); GLOBAL_worldmapProfile = profile; } } } } profilesContainer.addEventListener("change", worldmapProfiles_switchProfile); serverContainer.addEventListener("change", worldmapProfiles_switchServer); } } } else { GLOBAL_worldmapProfile = new Profile("anonymous", "Anonymous"); } resolve(true); }); } async function worldmapProfiles_switchProfile() { const profileInputElement = /** @type {HTMLInputElement} */ document.querySelector("#profiles__profiles-container input[name='_profile']:checked"); if(GLOBAL_worldmapProfile instanceof Profile && profileInputElement) { loader_show("Loading profile", "DO NOT refresh the page !"); const profile = new Profile(); const _profile = /** @type {{ slug: string, name: string, server: string, isActive: boolean }|null} */ await idb_openTransaction("get", IDB_stores.ProfileStore, { keyPath: removeDiacritics(profileInputElement.value).replace(/(\W|_)+/g, "-").toLowerCase() }); if(!_profile) { profile.slug = removeDiacritics(profileInputElement.value).replace(/(\W|_)+/g, "-").toLowerCase(); profile.name = profileInputElement.parentElement.querySelector(".sp_radio__input-label")?.innerText; } else { profile.hydrate(_profile); profile.isActive = true; } GLOBAL_worldmapProfile.isActive = false; const serverContainer = document.getElementById("profiles__servers-container"); const serverInputElement = /** @type{HTMLInputElement} */ serverContainer?.querySelector(`.sp_radio__input-wrapper input[value='${profile.server}']`); if(serverInputElement) { serverContainer.removeEventListener("change", worldmapProfiles_switchServer); serverInputElement.checked = true serverInputElement.dispatchEvent(EVENT_change); serverContainer.addEventListener("change", worldmapProfiles_switchServer); } await idb_openTransaction("put", IDB_stores.ProfileStore, { data: GLOBAL_worldmapProfile }); await idb_openTransaction("put", IDB_stores.ProfileStore, { data: profile }); GLOBAL_worldmapProfile = profile; await node_resetCollected(); await node_setCollected(); primogem_updateCounter(); for(const filterInputElement of /** @type {HTMLInputElement[]} */ document.querySelectorAll("#worldmap-filters .sp_worldmap__filter")) { worldmapFilter_updateCounter(filterInputElement); } loader_hide(); } } async function worldmapProfiles_switchServer() { const serverContainer = document.getElementById("profiles__servers-container"); const serverInputElement = /** @type{HTMLInputElement} */ serverContainer?.querySelector(`.sp_radio__input-wrapper input:checked`); if(serverInputElement) { GLOBAL_worldmapProfile.server = removeDiacritics(serverInputElement.value).replace(/(\W|_)+/g, "-").toLowerCase(); await idb_openTransaction("put", IDB_stores.ProfileStore, { data: GLOBAL_worldmapProfile }); } } function primogem_updateCounter() { const primogemContainer = document.getElementById("primogem-counter-container"); const counterContainer = primogemContainer?.querySelector("#primogem-counter"); if(counterContainer) { let counter = 0; const nodeElement = document.querySelectorAll(".sp_node__item:not(.sp_node__collected)[data-primogem]:not([data-primogem='0'])"); for(const _node of nodeElement) { if(!isNaN(Number(_node.dataset.primogem))) { counter += Number(_node.dataset.primogem); } } counterContainer.innerText = counter.toString(); if(counter === 0) { primogemContainer.classList.add("sp_primogem__complete"); } else { primogemContainer.classList.remove("sp_primogem__complete"); } } } // // function worldmarkForm_init() { return new Promise(function(resolve) { document.getElementById("worldmark_item")?.addEventListener("change", worldmarkForm_prefillInputs); document.getElementById("worldmark_monster")?.addEventListener("change", worldmarkForm_prefillInputs); document.getElementById("worldmark__content-filter")?.addEventListener("change", worldmarkForm_resetForm); resolve(); }); } function worldmarkForm_prefillInputs() { /** @type {HTMLInputElement} */ const nameInput = document.getElementById("worldmark_name"); /** @type {HTMLSelectElement} */ const itemSelect = document.getElementById("worldmark_item"); /** @type {HTMLSelectElement} */ const monsterSelect = document.getElementById("worldmark_monster") if(nameInput) { if(itemSelect && itemSelect.selectedIndex !== 0) { nameInput.value = itemSelect.options[itemSelect.selectedIndex].innerText } if(monsterSelect && monsterSelect.selectedIndex !== 0) { nameInput.value = monsterSelect.options[monsterSelect.selectedIndex].innerText } nameInput.dispatchEvent(EVENT_keyup); } } function worldmarkForm_resetForm() { document.getElementById("form__worldmark")?.reset(); } // /** * @param {string} type * @param {string} name * @param {string} value * @param {string|null} extra */ function paq_event({type, name, value, extra = null}) { window._paq.push([type, name, value, extra]); } window.addEventListener("DOMContentLoaded", async function() { loader_show("Loading data, please wait"); await touchDeviceInit(); await radio_initListeners(); await form_init(); await slug_init(); //BO await contentFilter_init(); await worldmarkForm_init(); //FO await panelSwitch_init(); await slider__init(); await worldmap_init(); await dom_isLoaded(); if(!IDB_hadMigration) { loader_hide(); } // log(IDB_database); }); // common-chest - 2 // exquisite-chest - 5 // challenge - 5 ? // precious-chest - 10 // shrine - 40