2889 lines
104 KiB
JavaScript
2889 lines
104 KiB
JavaScript
// 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;
|
|
|
|
|
|
//<editor-fold desc="EXTENSIONS">
|
|
function log() {
|
|
if(STATIC_ENV === "dev") {
|
|
for(const argument of arguments) {
|
|
console.log(argument);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @return {Promise<boolean>}
|
|
*/
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
//</editor-fold>
|
|
|
|
//<editor-fold desc="ENHANCEMENTS">
|
|
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<boolean>}
|
|
*/
|
|
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<boolean>}
|
|
*/
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
//</editor-fold>
|
|
|
|
//<editor-fold desc="INDEXEDDB">
|
|
/**
|
|
* @param {string} databaseName
|
|
* @param {number} databaseVersion
|
|
* @returns {Promise<IDBDatabase|null>}
|
|
*/
|
|
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<boolean>}
|
|
*/
|
|
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<boolean>}
|
|
*/
|
|
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<Object|Object[]|null>}
|
|
*/
|
|
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<unknown>}
|
|
*/
|
|
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<unknown>}
|
|
*/
|
|
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"));
|
|
}
|
|
});
|
|
}
|
|
//</editor-fold>
|
|
|
|
//<editor-fold desc="UI">
|
|
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<undefined>}
|
|
*/
|
|
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();
|
|
}
|
|
}
|
|
}
|
|
//</editor-fold>
|
|
|
|
//<editor-fold desc="WORLDMAP">
|
|
/**
|
|
* @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<boolean>}
|
|
*/
|
|
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<boolean>}
|
|
*/
|
|
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<boolean>}
|
|
*/
|
|
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<boolean>}
|
|
*/
|
|
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<boolean|null>}
|
|
*/
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
//</editor-fold>
|
|
|
|
//<editor-fold desc="WORLDMARK">
|
|
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();
|
|
}
|
|
//</editor-fold>
|
|
|
|
/**
|
|
* @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
|