tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: standard linting

Browse Source
This commit is contained in:
Tony Air 2022-05-03 20:50:57 +02:00
parent dd6e19e358
commit 68f430f350
97 changed files with 4748 additions and 4920 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -1 +1,2 @@
/src/thirdparty /src/thirdparty
/src/js_old

2
dist/icons/manifest.webapp vendored
View File

@ -1,5 +1,5 @@
{ {
"version": "4.6.0", "version": "4.6.1",
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react", "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
"icons": { "icons": {

2
dist/icons/yandex-browser-manifest.json vendored
View File

@ -1,5 +1,5 @@
{ {
"version": "4.6.0", "version": "4.6.1",
"api_version": 1, "api_version": 1,
"layout": { "layout": {
"logo": "yandex-browser-50x50.png", "logo": "yandex-browser-50x50.png",

2
dist/index.html vendored
View File

@ -1,4 +1,4 @@
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1651519353911"/><base href=""/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><script defer="defer" src="js/app_cms.js"></script><script defer="defer" src="js/app_editor.js"></script><script defer="defer" src="js/app_map.api.js"></script><script defer="defer" src="js/app_order.js"></script><link href="css/app.css" rel="stylesheet"/><link href="css/app_cms.css" rel="stylesheet"/><link href="css/app_editor.css" rel="stylesheet"/><link href="css/app_map.api.css" rel="stylesheet"/><link href="css/app_order.css" rel="stylesheet"/></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}#PageLoading .tagline{color:#fff;font-size:1.8rem;font-size:4vh;letter-spacing:.25em}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:first-child{left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:first-child{animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}#PageLoading .tagline{font-size:4vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../img/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11 <!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1651603832915"/><base href=""/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><script defer="defer" src="js/app_cms.js"></script><script defer="defer" src="js/app_editor.js"></script><script defer="defer" src="js/app_map.api.js"></script><script defer="defer" src="js/app_order.js"></script><link href="css/app.css" rel="stylesheet"/><link href="css/app_cms.css" rel="stylesheet"/><link href="css/app_editor.css" rel="stylesheet"/><link href="css/app_map.api.css" rel="stylesheet"/><link href="css/app_order.css" rel="stylesheet"/></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}#PageLoading .tagline{color:#fff;font-size:1.8rem;font-size:4vh;letter-spacing:.25em}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:first-child{left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:first-child{animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}#PageLoading .tagline{font-size:4vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../img/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
]><div class="main-bn alert alert-danger" role="alert"> ]><div class="main-bn alert alert-danger" role="alert">
<a <a
href="https://www.google.com/chrome/browser/desktop/" href="https://www.google.com/chrome/browser/desktop/"

2
dist/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/app_sw.js vendored
View File

@ -1 +1 @@
!function(){var e={570:function(e){e.exports=function log(e){false}},756:function(e){Cache.prototype.add||(Cache.prototype.add=function add(e){return this.addAll([e])}),Cache.prototype.addAll||(Cache.prototype.addAll=function addAll(e){var t=this;function NetworkError(e){this.name="NetworkError",this.code=19,this.message=e}return NetworkError.prototype=Object.create(Error.prototype),Promise.resolve().then((function(){if(arguments.length<1)throw new TypeError;return e=e.map((function(e){return e instanceof Request?e:String(e)})),Promise.all(e.map((function(e){"string"===typeof e&&(e=new Request(e));var t=new URL(e.url).protocol;if("http:"!==t&&"https:"!==t)throw new NetworkError("Invalid scheme");return fetch(e.clone())})))})).then((function(n){return Promise.all(n.map((function(n,r){return t.put(e[r],n)})))})).then((function(){}))}),CacheStorage.prototype.match||(CacheStorage.prototype.match=function match(e,t){var n=this;return this.keys().then((function(r){var o;return r.reduce((function(r,a){return r.then((function(){return o||n.open(a).then((function(n){return n.match(e,t)})).then((function(e){return o=e}))}))}),Promise.resolve())}))}),e.exports=self.caches}},t={};function __webpack_require__(n){var r=t[n];if(void 0!==r)return r.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,__webpack_require__),o.exports}!function(){var e="".concat("@a2nt/ss-bootstrap-ui-webpack-boilerplate-react","-sw"),t="".concat("4.6.0","-sw"),n=__webpack_require__(570),r=__webpack_require__(756);if("string"!==typeof e)throw new Error("Cache Name cannot be empty");self.addEventListener("fetch",(function(t){if("GET"===t.request.method){var o=new URL(t.request.url);if(o.pathname.indexOf("admin")>=0||o.pathname.indexOf("Security")>=0||o.pathname.indexOf("/dev")>=0)n("SW: skip admin ".concat(t.request.url));else{var a=t.request.clone(),c=t.request.clone();t.respondWith(fetch(a).then((function(n){var o=n.clone();return r.open(e).then((function(e){var n=t.request.clone();e.put(n,o)})),n})).catch((function(e){return n("SW: fetch failed"),r.match(c)})))}}})),self.addEventListener("activate",(function(o){n("SW: activated: ".concat(t)),o.waitUntil(r.delete(e))})),self.addEventListener("install",(function(e){n("SW: installing version: ".concat(t))}))}()}(); !function(){var e={570:function(e){e.exports=function log(e){false}},756:function(e){Cache.prototype.add||(Cache.prototype.add=function add(e){return this.addAll([e])}),Cache.prototype.addAll||(Cache.prototype.addAll=function addAll(e){var t=this;function NetworkError(e){this.name="NetworkError",this.code=19,this.message=e}return NetworkError.prototype=Object.create(Error.prototype),Promise.resolve().then((function(){if(arguments.length<1)throw new TypeError;return e=e.map((function(e){return e instanceof Request?e:String(e)})),Promise.all(e.map((function(e){"string"===typeof e&&(e=new Request(e));var t=new URL(e.url).protocol;if("http:"!==t&&"https:"!==t)throw new NetworkError("Invalid scheme");return fetch(e.clone())})))})).then((function(n){return Promise.all(n.map((function(n,r){return t.put(e[r],n)})))})).then((function(){}))}),CacheStorage.prototype.match||(CacheStorage.prototype.match=function match(e,t){var n=this;return this.keys().then((function(r){var o;return r.reduce((function(r,a){return r.then((function(){return o||n.open(a).then((function(n){return n.match(e,t)})).then((function(e){return o=e}))}))}),Promise.resolve())}))}),e.exports=self.caches}},t={};function __webpack_require__(n){var r=t[n];if(void 0!==r)return r.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,__webpack_require__),o.exports}!function(){var e="".concat("@a2nt/ss-bootstrap-ui-webpack-boilerplate-react","-sw"),t="".concat("4.6.1","-sw"),n=__webpack_require__(570),r=__webpack_require__(756);if("string"!==typeof e)throw new Error("Cache Name cannot be empty");self.addEventListener("fetch",(function(t){if("GET"===t.request.method){var o=new URL(t.request.url);if(o.pathname.indexOf("admin")>=0||o.pathname.indexOf("Security")>=0||o.pathname.indexOf("/dev")>=0)n("SW: skip admin ".concat(t.request.url));else{var a=t.request.clone(),c=t.request.clone();t.respondWith(fetch(a).then((function(n){var o=n.clone();return r.open(e).then((function(e){var n=t.request.clone();e.put(n,o)})),n})).catch((function(e){return n("SW: fetch failed"),r.match(c)})))}}})),self.addEventListener("activate",(function(o){n("SW: activated: ".concat(t)),o.waitUntil(r.delete(e))})),self.addEventListener("install",(function(e){n("SW: installing version: ".concat(t))}))}()}();

165
dist/records.json vendored
View File

@ -82,171 +82,6 @@
898 898
] ]
}, },
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/app.scss": [
{
"chunks": {
"byName": {
"child": 396
},
"bySource": {
"0 child": 396
},
"usedIds": [
396
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/getUrl.js": 671,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/app.scss": 895,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%272%27 fill=%27%23fff%27/%3e%3c/svg%3e": 204,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2386b7fe%27/%3e%3c/svg%3e": 609,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e": 469,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%280, 0, 0, 0.25%29%27/%3e%3c/svg%3e": 486,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e": 144,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23000%27%3e%3cpath d=%27M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z%27/%3e%3c/svg%3e": 175,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z%27/%3e%3c/svg%3e": 647,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e": 692,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M2 5l6 6 6-6%27/%3e%3c/svg%3e": 214,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10h8%27/%3e%3c/svg%3e": 931,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10l3 3l6-6%27/%3e%3c/svg%3e": 349,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%280, 0, 0, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e": 217,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%28255, 255, 255, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e": 956,
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23198754%27 d=%27M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e": 819
},
"usedIds": [
144,
175,
204,
214,
217,
349,
469,
486,
609,
647,
656,
671,
692,
744,
819,
895,
931,
956
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/cms.scss": [
{
"chunks": {
"byName": {
"child": 396
},
"bySource": {
"0 child": 396
},
"usedIds": [
396
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/cms.scss": 970
},
"usedIds": [
656,
744,
970
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/editor.scss": [
{
"chunks": {
"byName": {
"child": 396
},
"bySource": {
"0 child": 396
},
"usedIds": [
396
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/editor.scss": 203
},
"usedIds": [
203,
656,
744
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/map.api.scss": [
{
"chunks": {
"byName": {
"child": 396
},
"bySource": {
"0 child": 396
},
"usedIds": [
396
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/map.api.scss": 466
},
"usedIds": [
466,
656,
744
]
}
}
],
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/order.scss": [
{
"chunks": {
"byName": {
"child": 396
},
"bySource": {
"0 child": 396
},
"usedIds": [
396
]
},
"modules": {
"byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/order.scss": 263
},
"usedIds": [
263,
656,
744
]
}
}
],
"modules": { "modules": {
"byIdentifier": { "byIdentifier": {
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js": 826, "./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js": 826,

4
dist/report.html vendored
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [2 May 2022 at 21:25]</title> <title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [3 May 2022 at 20:50]</title>
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" /> <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
<script> <script>
@ -31,7 +31,7 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>
window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":406407,"parsedSize":114262,"gzipSize":28180,"groups":[{"label":"node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","statSize":577,"groups":[{"id":826,"label":"index.js","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js","statSize":577,"parsedSize":265,"gzipSize":218}],"parsedSize":265,"gzipSize":218},{"label":"src","path":"./src","statSize":405830,"groups":[{"label":"js","path":"./src/js","statSize":229984,"groups":[{"id":743,"label":"app.js + 47 modules (concatenated)","path":"./src/js/app.js + 47 modules (concatenated)","statSize":229984,"parsedSize":113997,"gzipSize":28038,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/app.js + 47 modules (concatenated)/src/js","statSize":31064,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/app.js","statSize":2369,"parsedSize":1174,"gzipSize":288,"inaccurateSizes":true},{"label":"main","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main","statSize":9770,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/index.js","statSize":85,"parsedSize":42,"gzipSize":10,"inaccurateSizes":true},{"id":null,"label":"visibility.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/visibility.js","statSize":898,"parsedSize":445,"gzipSize":109,"inaccurateSizes":true},{"id":null,"label":"touch.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/touch.js","statSize":1615,"parsedSize":800,"gzipSize":196,"inaccurateSizes":true},{"id":null,"label":"css-screen-size.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/css-screen-size.js","statSize":2650,"parsedSize":1313,"gzipSize":323,"inaccurateSizes":true},{"id":null,"label":"main.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/main.js","statSize":3109,"parsedSize":1541,"gzipSize":379,"inaccurateSizes":true},{"id":null,"label":"loading-spinner.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/loading-spinner.js","statSize":1413,"parsedSize":700,"gzipSize":172,"inaccurateSizes":true}],"parsedSize":4842,"gzipSize":1191,"inaccurateSizes":true},{"label":"ui","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui","statSize":8499,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/carousel.js","statSize":5210,"parsedSize":2582,"gzipSize":635,"inaccurateSizes":true},{"id":null,"label":"dropdown.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/dropdown.js","statSize":2883,"parsedSize":1429,"gzipSize":351,"inaccurateSizes":true},{"id":null,"label":"datepicker.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/datepicker.js","statSize":406,"parsedSize":201,"gzipSize":49,"inaccurateSizes":true}],"parsedSize":4212,"gzipSize":1036,"inaccurateSizes":true},{"label":"ajax","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax","statSize":7166,"groups":[{"id":null,"label":"online.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/online.js","statSize":2662,"parsedSize":1319,"gzipSize":324,"inaccurateSizes":true},{"id":null,"label":"lazy-images.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/lazy-images.js","statSize":1176,"parsedSize":582,"gzipSize":143,"inaccurateSizes":true},{"label":"models","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models","statSize":3328,"groups":[{"id":null,"label":"image.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models/image.js","statSize":3328,"parsedSize":1649,"gzipSize":405,"inaccurateSizes":true}],"parsedSize":1649,"gzipSize":405,"inaccurateSizes":true}],"parsedSize":3551,"gzipSize":873,"inaccurateSizes":true},{"label":"layout","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout","statSize":1591,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout/index.js","statSize":1591,"parsedSize":788,"gzipSize":193,"inaccurateSizes":true}],"parsedSize":788,"gzipSize":193,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_events.js","statSize":1397,"parsedSize":692,"gzipSize":170,"inaccurateSizes":true},{"id":null,"label":"_consts.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_consts.js","statSize":272,"parsedSize":134,"gzipSize":33,"inaccurateSizes":true}],"parsedSize":15397,"gzipSize":3787,"inaccurateSizes":true},{"label":"node_modules/.pnpm","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm","statSize":198920,"groups":[{"label":"@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js","statSize":17421,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/app.js","statSize":815,"parsedSize":403,"gzipSize":99,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/_events.js","statSize":1366,"parsedSize":677,"gzipSize":166,"inaccurateSizes":true},{"id":null,"label":"window.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/window.js","statSize":15240,"parsedSize":7554,"gzipSize":1857,"inaccurateSizes":true}],"parsedSize":8635,"gzipSize":2123,"inaccurateSizes":true},{"label":"bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src","statSize":55299,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/carousel.js","statSize":23486,"parsedSize":11641,"gzipSize":2863,"inaccurateSizes":true},{"label":"dom","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom","statSize":18586,"groups":[{"id":null,"label":"event-handler.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/event-handler.js","statSize":11179,"parsedSize":5541,"gzipSize":1362,"inaccurateSizes":true},{"id":null,"label":"manipulator.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/manipulator.js","statSize":1986,"parsedSize":984,"gzipSize":242,"inaccurateSizes":true},{"id":null,"label":"selector-engine.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/selector-engine.js","statSize":3816,"parsedSize":1891,"gzipSize":465,"inaccurateSizes":true},{"id":null,"label":"data.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/data.js","statSize":1605,"parsedSize":795,"gzipSize":195,"inaccurateSizes":true}],"parsedSize":9212,"gzipSize":2265,"inaccurateSizes":true},{"label":"util","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/util","statSize":9636,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/util/index.js","statSize":9636,"parsedSize":4776,"gzipSize":1174,"inaccurateSizes":true}],"parsedSize":4776,"gzipSize":1174,"inaccurateSizes":true},{"id":null,"label":"base-component.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/base-component.js","statSize":3591,"parsedSize":1779,"gzipSize":437,"inaccurateSizes":true}],"parsedSize":27410,"gzipSize":6741,"inaccurateSizes":true},{"label":"vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js","statSize":123340,"groups":[{"id":null,"label":"Datepicker.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/Datepicker.js","statSize":20644,"parsedSize":10232,"gzipSize":2516,"inaccurateSizes":true},{"label":"lib","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib","statSize":16569,"groups":[{"id":null,"label":"date-format.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/date-format.js","statSize":5595,"parsedSize":2773,"gzipSize":682,"inaccurateSizes":true},{"id":null,"label":"date.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/date.js","statSize":3301,"parsedSize":1636,"gzipSize":402,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/utils.js","statSize":1948,"parsedSize":965,"gzipSize":237,"inaccurateSizes":true},{"id":null,"label":"dom.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/dom.js","statSize":1573,"parsedSize":779,"gzipSize":191,"inaccurateSizes":true},{"id":null,"label":"event.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/event.js","statSize":4152,"parsedSize":2058,"gzipSize":506,"inaccurateSizes":true}],"parsedSize":8212,"gzipSize":2019,"inaccurateSizes":true},{"label":"i18n","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/i18n","statSize":572,"groups":[{"id":null,"label":"base-locales.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/i18n/base-locales.js","statSize":572,"parsedSize":283,"gzipSize":69,"inaccurateSizes":true}],"parsedSize":283,"gzipSize":69,"inaccurateSizes":true},{"label":"options","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options","statSize":10123,"groups":[{"id":null,"label":"defaultOptions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options/defaultOptions.js","statSize":882,"parsedSize":437,"gzipSize":107,"inaccurateSizes":true},{"id":null,"label":"processOptions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options/processOptions.js","statSize":9241,"parsedSize":4580,"gzipSize":1126,"inaccurateSizes":true}],"parsedSize":5017,"gzipSize":1234,"inaccurateSizes":true},{"label":"picker","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker","statSize":65223,"groups":[{"id":null,"label":"Picker.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/Picker.js","statSize":17542,"parsedSize":8695,"gzipSize":2138,"inaccurateSizes":true},{"label":"templates","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates","statSize":1623,"groups":[{"id":null,"label":"pickerTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/pickerTemplate.js","statSize":907,"parsedSize":449,"gzipSize":110,"inaccurateSizes":true},{"id":null,"label":"daysTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/daysTemplate.js","statSize":355,"parsedSize":175,"gzipSize":43,"inaccurateSizes":true},{"id":null,"label":"calendarWeeksTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/calendarWeeksTemplate.js","statSize":361,"parsedSize":178,"gzipSize":44,"inaccurateSizes":true}],"parsedSize":804,"gzipSize":197,"inaccurateSizes":true},{"label":"views","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views","statSize":46058,"groups":[{"id":null,"label":"DaysView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/DaysView.js","statSize":15196,"parsedSize":7532,"gzipSize":1852,"inaccurateSizes":true},{"id":null,"label":"MonthsView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/MonthsView.js","statSize":13383,"parsedSize":6633,"gzipSize":1631,"inaccurateSizes":true},{"id":null,"label":"YearsView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/YearsView.js","statSize":13161,"parsedSize":6523,"gzipSize":1604,"inaccurateSizes":true},{"id":null,"label":"View.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/View.js","statSize":4318,"parsedSize":2140,"gzipSize":526,"inaccurateSizes":true}],"parsedSize":22829,"gzipSize":5615,"inaccurateSizes":true}],"parsedSize":32329,"gzipSize":7951,"inaccurateSizes":true},{"label":"events","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events","statSize":10209,"groups":[{"id":null,"label":"functions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/functions.js","statSize":1627,"parsedSize":806,"gzipSize":198,"inaccurateSizes":true},{"id":null,"label":"inputFieldListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/inputFieldListeners.js","statSize":5648,"parsedSize":2799,"gzipSize":688,"inaccurateSizes":true},{"id":null,"label":"otherListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/otherListeners.js","statSize":844,"parsedSize":418,"gzipSize":102,"inaccurateSizes":true},{"id":null,"label":"pickerListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/pickerListeners.js","statSize":2090,"parsedSize":1035,"gzipSize":254,"inaccurateSizes":true}],"parsedSize":5060,"gzipSize":1244,"inaccurateSizes":true}],"parsedSize":61136,"gzipSize":15036,"inaccurateSizes":true},{"label":"redaxios@0.5.0/node_modules/redaxios/dist","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/redaxios@0.5.0/node_modules/redaxios/dist","statSize":2860,"groups":[{"id":null,"label":"redaxios.module.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/redaxios@0.5.0/node_modules/redaxios/dist/redaxios.module.js","statSize":2860,"parsedSize":1417,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":1417,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":98599,"gzipSize":24250,"inaccurateSizes":true}]}],"parsedSize":113997,"gzipSize":28038},{"label":"scss","path":"./src/scss","statSize":175846,"groups":[{"id":null,"label":"app.scss","path":"./src/scss/app.scss","statSize":175846}],"parsedSize":0,"gzipSize":0}],"parsedSize":113997,"gzipSize":28038}]},{"label":"js/app_sw.js","isAsset":true,"statSize":5513,"parsedSize":2270,"gzipSize":937,"groups":[{"label":"src/js","path":"./src/js","statSize":3225,"groups":[{"label":"libs","path":"./src/js/libs","statSize":164,"groups":[{"id":570,"label":"log.js","path":"./src/js/libs/log.js","statSize":164,"parsedSize":45,"gzipSize":57}],"parsedSize":45,"gzipSize":57},{"label":"types","path":"./src/js/types","statSize":3061,"groups":[{"id":831,"label":"sw.js","path":"./src/js/types/sw.js","statSize":3061,"parsedSize":1118,"gzipSize":549}],"parsedSize":1118,"gzipSize":549}],"parsedSize":1163,"gzipSize":567},{"label":"thirdparty","path":"./thirdparty","statSize":2288,"groups":[{"id":756,"label":"serviceworker-caches.js","path":"./thirdparty/serviceworker-caches.js","statSize":2288,"parsedSize":1107,"gzipSize":486}],"parsedSize":1107,"gzipSize":486}]},{"label":"js/app_cms.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":841,"label":"cms.scss","path":"./src/scss/types/cms.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_editor.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":104,"label":"editor.scss","path":"./src/scss/types/editor.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_map.api.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":191,"label":"map.api.scss","path":"./src/scss/types/map.api.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_order.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":706,"label":"order.scss","path":"./src/scss/types/order.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]}]; window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":406411,"parsedSize":114262,"gzipSize":28178,"groups":[{"label":"node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","statSize":577,"groups":[{"id":826,"label":"index.js","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js","statSize":577,"parsedSize":265,"gzipSize":218}],"parsedSize":265,"gzipSize":218},{"label":"src","path":"./src","statSize":405834,"groups":[{"label":"js","path":"./src/js","statSize":229988,"groups":[{"id":743,"label":"app.js + 47 modules (concatenated)","path":"./src/js/app.js + 47 modules (concatenated)","statSize":229988,"parsedSize":113997,"gzipSize":28036,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/app.js + 47 modules (concatenated)/src/js","statSize":31068,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/app.js","statSize":2398,"parsedSize":1188,"gzipSize":292,"inaccurateSizes":true},{"label":"main","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main","statSize":9770,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/index.js","statSize":85,"parsedSize":42,"gzipSize":10,"inaccurateSizes":true},{"id":null,"label":"visibility.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/visibility.js","statSize":898,"parsedSize":445,"gzipSize":109,"inaccurateSizes":true},{"id":null,"label":"touch.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/touch.js","statSize":1615,"parsedSize":800,"gzipSize":196,"inaccurateSizes":true},{"id":null,"label":"css-screen-size.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/css-screen-size.js","statSize":2650,"parsedSize":1313,"gzipSize":323,"inaccurateSizes":true},{"id":null,"label":"main.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/main.js","statSize":3109,"parsedSize":1541,"gzipSize":378,"inaccurateSizes":true},{"id":null,"label":"loading-spinner.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/loading-spinner.js","statSize":1413,"parsedSize":700,"gzipSize":172,"inaccurateSizes":true}],"parsedSize":4842,"gzipSize":1190,"inaccurateSizes":true},{"label":"ui","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui","statSize":8466,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/carousel.js","statSize":5195,"parsedSize":2574,"gzipSize":633,"inaccurateSizes":true},{"id":null,"label":"dropdown.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/dropdown.js","statSize":2865,"parsedSize":1420,"gzipSize":349,"inaccurateSizes":true},{"id":null,"label":"datepicker.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/datepicker.js","statSize":406,"parsedSize":201,"gzipSize":49,"inaccurateSizes":true}],"parsedSize":4196,"gzipSize":1032,"inaccurateSizes":true},{"label":"ajax","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax","statSize":7167,"groups":[{"id":null,"label":"online.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/online.js","statSize":2662,"parsedSize":1319,"gzipSize":324,"inaccurateSizes":true},{"id":null,"label":"lazy-images.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/lazy-images.js","statSize":1176,"parsedSize":582,"gzipSize":143,"inaccurateSizes":true},{"label":"models","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models","statSize":3329,"groups":[{"id":null,"label":"image.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models/image.js","statSize":3329,"parsedSize":1650,"gzipSize":405,"inaccurateSizes":true}],"parsedSize":1650,"gzipSize":405,"inaccurateSizes":true}],"parsedSize":3552,"gzipSize":873,"inaccurateSizes":true},{"label":"layout","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout","statSize":1595,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout/index.js","statSize":1595,"parsedSize":790,"gzipSize":194,"inaccurateSizes":true}],"parsedSize":790,"gzipSize":194,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_events.js","statSize":1397,"parsedSize":692,"gzipSize":170,"inaccurateSizes":true},{"id":null,"label":"_consts.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_consts.js","statSize":275,"parsedSize":136,"gzipSize":33,"inaccurateSizes":true}],"parsedSize":15399,"gzipSize":3787,"inaccurateSizes":true},{"label":"node_modules/.pnpm","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm","statSize":198920,"groups":[{"label":"@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js","statSize":17421,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/app.js","statSize":815,"parsedSize":403,"gzipSize":99,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/_events.js","statSize":1366,"parsedSize":677,"gzipSize":166,"inaccurateSizes":true},{"id":null,"label":"window.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/window.js","statSize":15240,"parsedSize":7553,"gzipSize":1857,"inaccurateSizes":true}],"parsedSize":8634,"gzipSize":2123,"inaccurateSizes":true},{"label":"bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src","statSize":55299,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/carousel.js","statSize":23486,"parsedSize":11641,"gzipSize":2862,"inaccurateSizes":true},{"label":"dom","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom","statSize":18586,"groups":[{"id":null,"label":"event-handler.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/event-handler.js","statSize":11179,"parsedSize":5541,"gzipSize":1362,"inaccurateSizes":true},{"id":null,"label":"manipulator.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/manipulator.js","statSize":1986,"parsedSize":984,"gzipSize":242,"inaccurateSizes":true},{"id":null,"label":"selector-engine.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/selector-engine.js","statSize":3816,"parsedSize":1891,"gzipSize":465,"inaccurateSizes":true},{"id":null,"label":"data.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/data.js","statSize":1605,"parsedSize":795,"gzipSize":195,"inaccurateSizes":true}],"parsedSize":9212,"gzipSize":2265,"inaccurateSizes":true},{"label":"util","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/util","statSize":9636,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/util/index.js","statSize":9636,"parsedSize":4776,"gzipSize":1174,"inaccurateSizes":true}],"parsedSize":4776,"gzipSize":1174,"inaccurateSizes":true},{"id":null,"label":"base-component.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/base-component.js","statSize":3591,"parsedSize":1779,"gzipSize":437,"inaccurateSizes":true}],"parsedSize":27409,"gzipSize":6741,"inaccurateSizes":true},{"label":"vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js","statSize":123340,"groups":[{"id":null,"label":"Datepicker.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/Datepicker.js","statSize":20644,"parsedSize":10232,"gzipSize":2516,"inaccurateSizes":true},{"label":"lib","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib","statSize":16569,"groups":[{"id":null,"label":"date-format.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/date-format.js","statSize":5595,"parsedSize":2773,"gzipSize":682,"inaccurateSizes":true},{"id":null,"label":"date.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/date.js","statSize":3301,"parsedSize":1636,"gzipSize":402,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/utils.js","statSize":1948,"parsedSize":965,"gzipSize":237,"inaccurateSizes":true},{"id":null,"label":"dom.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/dom.js","statSize":1573,"parsedSize":779,"gzipSize":191,"inaccurateSizes":true},{"id":null,"label":"event.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/event.js","statSize":4152,"parsedSize":2058,"gzipSize":506,"inaccurateSizes":true}],"parsedSize":8212,"gzipSize":2019,"inaccurateSizes":true},{"label":"i18n","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/i18n","statSize":572,"groups":[{"id":null,"label":"base-locales.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/i18n/base-locales.js","statSize":572,"parsedSize":283,"gzipSize":69,"inaccurateSizes":true}],"parsedSize":283,"gzipSize":69,"inaccurateSizes":true},{"label":"options","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options","statSize":10123,"groups":[{"id":null,"label":"defaultOptions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options/defaultOptions.js","statSize":882,"parsedSize":437,"gzipSize":107,"inaccurateSizes":true},{"id":null,"label":"processOptions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options/processOptions.js","statSize":9241,"parsedSize":4580,"gzipSize":1126,"inaccurateSizes":true}],"parsedSize":5017,"gzipSize":1234,"inaccurateSizes":true},{"label":"picker","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker","statSize":65223,"groups":[{"id":null,"label":"Picker.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/Picker.js","statSize":17542,"parsedSize":8694,"gzipSize":2138,"inaccurateSizes":true},{"label":"templates","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates","statSize":1623,"groups":[{"id":null,"label":"pickerTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/pickerTemplate.js","statSize":907,"parsedSize":449,"gzipSize":110,"inaccurateSizes":true},{"id":null,"label":"daysTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/daysTemplate.js","statSize":355,"parsedSize":175,"gzipSize":43,"inaccurateSizes":true},{"id":null,"label":"calendarWeeksTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/calendarWeeksTemplate.js","statSize":361,"parsedSize":178,"gzipSize":44,"inaccurateSizes":true}],"parsedSize":804,"gzipSize":197,"inaccurateSizes":true},{"label":"views","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views","statSize":46058,"groups":[{"id":null,"label":"DaysView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/DaysView.js","statSize":15196,"parsedSize":7532,"gzipSize":1852,"inaccurateSizes":true},{"id":null,"label":"MonthsView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/MonthsView.js","statSize":13383,"parsedSize":6633,"gzipSize":1631,"inaccurateSizes":true},{"id":null,"label":"YearsView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/YearsView.js","statSize":13161,"parsedSize":6523,"gzipSize":1604,"inaccurateSizes":true},{"id":null,"label":"View.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/View.js","statSize":4318,"parsedSize":2140,"gzipSize":526,"inaccurateSizes":true}],"parsedSize":22829,"gzipSize":5614,"inaccurateSizes":true}],"parsedSize":32328,"gzipSize":7950,"inaccurateSizes":true},{"label":"events","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events","statSize":10209,"groups":[{"id":null,"label":"functions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/functions.js","statSize":1627,"parsedSize":806,"gzipSize":198,"inaccurateSizes":true},{"id":null,"label":"inputFieldListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/inputFieldListeners.js","statSize":5648,"parsedSize":2799,"gzipSize":688,"inaccurateSizes":true},{"id":null,"label":"otherListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/otherListeners.js","statSize":844,"parsedSize":418,"gzipSize":102,"inaccurateSizes":true},{"id":null,"label":"pickerListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/pickerListeners.js","statSize":2090,"parsedSize":1035,"gzipSize":254,"inaccurateSizes":true}],"parsedSize":5060,"gzipSize":1244,"inaccurateSizes":true}],"parsedSize":61135,"gzipSize":15035,"inaccurateSizes":true},{"label":"redaxios@0.5.0/node_modules/redaxios/dist","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/redaxios@0.5.0/node_modules/redaxios/dist","statSize":2860,"groups":[{"id":null,"label":"redaxios.module.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/redaxios@0.5.0/node_modules/redaxios/dist/redaxios.module.js","statSize":2860,"parsedSize":1417,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":1417,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":98597,"gzipSize":24248,"inaccurateSizes":true}]}],"parsedSize":113997,"gzipSize":28036},{"label":"scss","path":"./src/scss","statSize":175846,"groups":[{"id":null,"label":"app.scss","path":"./src/scss/app.scss","statSize":175846}],"parsedSize":0,"gzipSize":0}],"parsedSize":113997,"gzipSize":28036}]},{"label":"js/app_sw.js","isAsset":true,"statSize":5493,"parsedSize":2270,"gzipSize":937,"groups":[{"label":"src/js","path":"./src/js","statSize":3205,"groups":[{"label":"libs","path":"./src/js/libs","statSize":149,"groups":[{"id":570,"label":"log.js","path":"./src/js/libs/log.js","statSize":149,"parsedSize":45,"gzipSize":57}],"parsedSize":45,"gzipSize":57},{"label":"types","path":"./src/js/types","statSize":3056,"groups":[{"id":831,"label":"sw.js","path":"./src/js/types/sw.js","statSize":3056,"parsedSize":1118,"gzipSize":549}],"parsedSize":1118,"gzipSize":549}],"parsedSize":1163,"gzipSize":567},{"label":"thirdparty","path":"./thirdparty","statSize":2288,"groups":[{"id":756,"label":"serviceworker-caches.js","path":"./thirdparty/serviceworker-caches.js","statSize":2288,"parsedSize":1107,"gzipSize":486}],"parsedSize":1107,"gzipSize":486}]},{"label":"js/app_cms.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":841,"label":"cms.scss","path":"./src/scss/types/cms.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_editor.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":104,"label":"editor.scss","path":"./src/scss/types/editor.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_map.api.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":191,"label":"map.api.scss","path":"./src/scss/types/map.api.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_order.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":706,"label":"order.scss","path":"./src/scss/types/order.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]}];
window.defaultSizes = "parsed"; window.defaultSizes = "parsed";
</script> </script>
</body> </body>

12
src/js/_consts.js
View File

@ -2,12 +2,12 @@
* Add your global events here * Add your global events here
*/ */
//import MAP_DRIVER from './_components/drivers/_map.google'; // import MAP_DRIVER from './_components/drivers/_map.google';
//import MAP_DRIVER from './_components/drivers/_map.mapbox'; // import MAP_DRIVER from './_components/drivers/_map.mapbox';
const CONSTS = { const CONSTS = {
ENVS: ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], ENVS: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
//MAP_DRIVER, // MAP_DRIVER,
}; }
export default CONSTS; export default CONSTS

2
src/js/_events.js
View File

@ -42,4 +42,4 @@ export default {
FORM_STEPPED_FIRST_STEP: 'form-first-step', FORM_STEPPED_FIRST_STEP: 'form-first-step',
FORM_STEPPED_LAST_STEP: 'form-last-step', FORM_STEPPED_LAST_STEP: 'form-last-step',
FORM_FIELDS: 'input,textarea,select', FORM_FIELDS: 'input,textarea,select',
}; }

20
src/js/ajax/apollo/cache.js
View File

@ -1,19 +1,19 @@
import { InMemoryCache } from "@apollo/client"; import { InMemoryCache } from '@apollo/client'
//import { IonicStorageModule } from '@ionic/storage'; // import { IonicStorageModule } from '@ionic/storage';
//import { persistCache, IonicStorageWrapper } from 'apollo3-cache-persist'; // import { persistCache, IonicStorageWrapper } from 'apollo3-cache-persist';
import { persistCacheSync, LocalStorageWrapper } from "apollo3-cache-persist"; import { persistCacheSync, LocalStorageWrapper } from 'apollo3-cache-persist'
const cache = new InMemoryCache(); const cache = new InMemoryCache()
// await before instantiating ApolloClient, else queries might run before the cache is persisted // await before instantiating ApolloClient, else queries might run before the cache is persisted
//await persistCache({ // await persistCache({
persistCacheSync({ persistCacheSync({
cache, cache,
storage: new LocalStorageWrapper(window.localStorage), storage: new LocalStorageWrapper(window.localStorage),
key: "web-persist", key: 'web-persist',
maxSize: 1048576, // 1Mb maxSize: 1048576, // 1Mb
//new IonicStorageWrapper(IonicStorageModule), // new IonicStorageWrapper(IonicStorageModule),
}); })
export { cache }; export { cache }

68
src/js/ajax/apollo/init.js
View File

@ -1,21 +1,21 @@
import Events from "../../_events"; import Events from '../../_events'
import { cache } from "./cache"; import { cache } from './cache'
import { import {
from, from,
ApolloClient, ApolloClient,
HttpLink, HttpLink,
ApolloLink, ApolloLink,
concat, concat,
} from "@apollo/client"; } from '@apollo/client'
import { onError } from "@apollo/client/link/error"; import { onError } from '@apollo/client/link/error'
const NAME = "appolo"; const NAME = 'appolo'
const API_META = document.querySelector('meta[name="api_url"]'); const API_META = document.querySelector('meta[name="api_url"]')
const API_URL = API_META const API_URL = API_META
? API_META.getAttribute("content") ? API_META.getAttribute('content')
: `${window.location.protocol}//${window.location.host}/graphql`; : `${window.location.protocol}//${window.location.host}/graphql`
const authMiddleware = new ApolloLink((operation, forward) => { const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers // add the authorization to the headers
@ -23,26 +23,26 @@ const authMiddleware = new ApolloLink((operation, forward) => {
headers: { headers: {
apikey: `${GRAPHQL_API_KEY}`, apikey: `${GRAPHQL_API_KEY}`,
}, },
}); })
return forward(operation); return forward(operation)
}); })
console.info(`%cAPI: ${API_URL}`, "color:green;font-size:10px"); console.info(`%cAPI: ${API_URL}`, 'color:green;font-size:10px')
const link = from([ const link = from([
authMiddleware, authMiddleware,
new ApolloLink((operation, forward) => { new ApolloLink((operation, forward) => {
operation.setContext({ operation.setContext({
start: new Date(), start: new Date(),
}); })
return forward(operation); return forward(operation)
}), }),
onError(({ operation, response, graphQLErrors, networkError, forward }) => { onError(({ operation, response, graphQLErrors, networkError, forward }) => {
if (operation.operationName === "IgnoreErrorsQuery") { if (operation.operationName === 'IgnoreErrorsQuery') {
console.error(`${NAME}: IgnoreErrorsQuery`); console.error(`${NAME}: IgnoreErrorsQuery`)
response.errors = null; response.errors = null
return; return
} }
if (graphQLErrors) { if (graphQLErrors) {
@ -50,11 +50,11 @@ const link = from([
console.error( console.error(
`${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` `${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
) )
); )
} }
if (networkError) { if (networkError) {
/*let msg = ''; /* let msg = '';
switch (networkError.statusCode) { switch (networkError.statusCode) {
case 404: case 404:
msg = 'Not Found.'; msg = 'Not Found.';
@ -65,24 +65,24 @@ const link = from([
default: default:
msg = 'Something went wrong.'; msg = 'Something went wrong.';
break; break;
}*/ } */
console.error(`${NAME}: [Network error] ${networkError.statusCode}`); console.error(`${NAME}: [Network error] ${networkError.statusCode}`)
} }
console.error(`${NAME}: [APOLLO_ERROR]`); console.error(`${NAME}: [APOLLO_ERROR]`)
window.dispatchEvent(new Event(Events.APOLLO_ERROR)); window.dispatchEvent(new Event(Events.APOLLO_ERROR))
}), }),
new ApolloLink((operation, forward) => { new ApolloLink((operation, forward) => {
return forward(operation).map((data) => { return forward(operation).map((data) => {
// data from a previous link // data from a previous link
const time = new Date() - operation.getContext().start; const time = new Date() - operation.getContext().start
console.log( console.log(
`${NAME}: operation ${operation.operationName} took ${time} ms to complete` `${NAME}: operation ${operation.operationName} took ${time} ms to complete`
); )
window.dispatchEvent(new Event(Events.ONLINE)); window.dispatchEvent(new Event(Events.ONLINE))
return data; return data
}); })
}), }),
new HttpLink({ new HttpLink({
uri: API_URL, uri: API_URL,
@ -90,10 +90,10 @@ const link = from([
// Use explicit `window.fetch` so tha outgoing requests // Use explicit `window.fetch` so tha outgoing requests
// are captured and deferred until the Service Worker is ready. // are captured and deferred until the Service Worker is ready.
fetch: (...args) => fetch(...args), fetch: (...args) => fetch(...args),
credentials: "same-origin", //'include', credentials: 'same-origin', // 'include',
connectToDevTools: process.env.NODE_ENV === "development" ? true : false, connectToDevTools: process.env.NODE_ENV === 'development',
}), }),
]); ])
// Isolate Apollo client so it could be reused // Isolate Apollo client so it could be reused
// in both application runtime and tests. // in both application runtime and tests.
@ -101,6 +101,6 @@ const link = from([
const client = new ApolloClient({ const client = new ApolloClient({
cache, cache,
link, link,
}); })
export { client }; export { client }

54
src/js/ajax/lazy-images.js
View File

@ -1,45 +1,45 @@
// browser tab visibility state detection // browser tab visibility state detection
import Events from "../_events"; import Events from '../_events'
import Consts from "../_consts"; import Consts from '../_consts'
import ImageObject from "./models/image"; import ImageObject from './models/image'
export default ((W) => { export default ((W) => {
const NAME = "main.lazy-images"; const NAME = 'main.lazy-images'
const D = document; const D = document
const BODY = D.body; const BODY = D.body
const loadLazyImages = () => { const loadLazyImages = () => {
console.log(`${NAME}: Load lazy images`); console.log(`${NAME}: Load lazy images`)
D.querySelectorAll(`[data-lazy-src]`).forEach((el) => { D.querySelectorAll('[data-lazy-src]').forEach((el) => {
el.classList.remove("empty"); el.classList.remove('empty')
const img = new ImageObject(); const img = new ImageObject()
img.load(el.getAttribute("data-lazy-src"),el) img.load(el.getAttribute('data-lazy-src'), el)
.then((result) => { .then((result) => {
el.setAttribute("src", result); el.setAttribute('src', result)
}) })
.catch(() => { .catch(() => {
el.classList.add("empty"); el.classList.add('empty')
}); })
}); })
D.querySelectorAll(`[data-lazy-bg]`).forEach((el) => { D.querySelectorAll('[data-lazy-bg]').forEach((el) => {
el.classList.remove("empty"); el.classList.remove('empty')
const img = new ImageObject(); const img = new ImageObject()
img.load(el.getAttribute("data-lazy-bg"),el) img.load(el.getAttribute('data-lazy-bg'), el)
.then((result) => { .then((result) => {
el.style.backgroundImage = `url(${result})`; el.style.backgroundImage = `url(${result})`
}) })
.catch((e) => { .catch((e) => {
el.classList.add("empty"); el.classList.add('empty')
}); })
}); })
}; }
W.addEventListener(`${Events.LODEDANDREADY}`, loadLazyImages); W.addEventListener(`${Events.LODEDANDREADY}`, loadLazyImages)
W.addEventListener(`${Events.AJAX}`, loadLazyImages); W.addEventListener(`${Events.AJAX}`, loadLazyImages)
})(window); })(window)

208
src/js/ajax/links.js
View File

@ -1,155 +1,155 @@
// browser tab visibility state detection // browser tab visibility state detection
import Events from "../_events"; import Events from '../_events'
import Consts from "../_consts"; import Consts from '../_consts'
import Page from "./models/page.jsx"; import Page from './models/page.jsx'
import { getParents } from "../main/funcs"; import { getParents } from '../main/funcs'
import { Collapse } from "bootstrap"; import { Collapse } from 'bootstrap'
import SpinnerUI from "../main/loading-spinner"; import SpinnerUI from '../main/loading-spinner'
const MainUILinks = ((W) => { const MainUILinks = ((W) => {
const NAME = "main.links"; const NAME = 'main.links'
const D = document; const D = document
const BODY = D.body; const BODY = D.body
class MainUILinks { class MainUILinks {
window; window
static init() { static init () {
const ui = this; const ui = this
ui.GraphPage = null; ui.GraphPage = null
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
ui.loaded(); ui.loaded()
// history state switch // history state switch
W.addEventListener("popstate", (e) => { W.addEventListener('popstate', (e) => {
ui.popState(e); ui.popState(e)
}); })
} }
static loaded() { static loaded () {
const ui = this; const ui = this
D.querySelectorAll(".graphql-page").forEach((el, i) => { D.querySelectorAll('.graphql-page').forEach((el, i) => {
const el_id = el.getAttribute("href"); const el_id = el.getAttribute('href')
el.setAttribute(`data-${ui.name}-id`, el_id); el.setAttribute(`data-${ui.name}-id`, el_id)
el.addEventListener("click", ui.loadClick); el.addEventListener('click', ui.loadClick)
}); })
} }
static setActiveLinks(link) { static setActiveLinks (link) {
const ui = this; const ui = this
D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach((el) => { D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach((el) => {
el.classList.add("active"); el.classList.add('active')
}); })
} }
static reset() { static reset () {
// reset focus // reset focus
D.activeElement.blur(); D.activeElement.blur()
// remove active and loading classes // remove active and loading classes
D.querySelectorAll(".graphql-page,.nav-item").forEach((el2) => { D.querySelectorAll('.graphql-page,.nav-item').forEach((el2) => {
el2.classList.remove("active", "loading"); el2.classList.remove('active', 'loading')
}); })
} }
static popState(e) { static popState (e) {
const ui = this; const ui = this
SpinnerUI.show(); SpinnerUI.show()
if (e.state && e.state.page) { if (e.state && e.state.page) {
console.log(`${NAME}: [popstate] load`); console.log(`${NAME}: [popstate] load`)
const state = JSON.parse(e.state.page); const state = JSON.parse(e.state.page)
state.current = null; state.current = null
state.popstate = true; state.popstate = true
ui.reset(); ui.reset()
ui.setActiveLinks(e.state.link); ui.setActiveLinks(e.state.link)
if (!ui.GraphPage) { if (!ui.GraphPage) {
console.log( console.log(
`${NAME}: [popstate] GraphPage is missing. Have to render it first` `${NAME}: [popstate] GraphPage is missing. Have to render it first`
); )
ui.GraphPage = ReactDOM.render( ui.GraphPage = ReactDOM.render(
<Page />, <Page />,
document.getElementById("MainContent") document.getElementById('MainContent')
); )
} }
ui.GraphPage.setState(state); ui.GraphPage.setState(state)
SpinnerUI.hide(); SpinnerUI.hide()
window.dispatchEvent(new Event(Events.AJAX)); window.dispatchEvent(new Event(Events.AJAX))
} else if (e.state && e.state.landing) { } else if (e.state && e.state.landing) {
console.log(`${NAME}: [popstate] go to landing`); console.log(`${NAME}: [popstate] go to landing`)
W.location.href = e.state.landing; W.location.href = e.state.landing
} else { } else {
console.warn(`${NAME}: [popstate] state is missing`); console.warn(`${NAME}: [popstate] state is missing`)
console.log(e); console.log(e)
SpinnerUI.hide(); SpinnerUI.hide()
} }
} }
// link specific event {this} = current event, not MainUILinks // link specific event {this} = current event, not MainUILinks
static loadClick(e) { static loadClick (e) {
console.groupCollapsed(`${NAME}: load on click`); console.groupCollapsed(`${NAME}: load on click`)
e.preventDefault(); e.preventDefault()
const ui = MainUILinks; const ui = MainUILinks
const el = e.currentTarget; const el = e.currentTarget
SpinnerUI.show(); SpinnerUI.show()
ui.reset(); ui.reset()
el.classList.add("loading"); el.classList.add('loading')
el.classList.remove("response-404", "response-500", "response-523"); el.classList.remove('response-404', 'response-500', 'response-523')
BODY.classList.add("ajax-loading"); BODY.classList.add('ajax-loading')
// hide parent mobile nav // hide parent mobile nav
const navs = getParents(el, ".collapse"); const navs = getParents(el, '.collapse')
if (navs.length) { if (navs.length) {
navs.forEach((nav) => { navs.forEach((nav) => {
const collapseInst = Collapse.getInstance(nav); const collapseInst = Collapse.getInstance(nav)
if (collapseInst) { if (collapseInst) {
collapseInst.hide(); collapseInst.hide()
} }
}); })
} }
// hide parent dropdown // hide parent dropdown
/*const dropdowns = getParents(el, '.dropdown-menu'); /* const dropdowns = getParents(el, '.dropdown-menu');
if (dropdowns.length) { if (dropdowns.length) {
const DropdownInst = Dropdown.getInstance(dropdowns[0]); const DropdownInst = Dropdown.getInstance(dropdowns[0]);
DropdownInst.hide(); DropdownInst.hide();
}*/ } */
if (!ui.GraphPage) { if (!ui.GraphPage) {
ui.GraphPage = ReactDOM.render( ui.GraphPage = ReactDOM.render(
<Page />, <Page />,
document.getElementById("MainContent") document.getElementById('MainContent')
); )
} }
const link = el.getAttribute("href") || el.getAttribute("data-href"); const link = el.getAttribute('href') || el.getAttribute('data-href')
ui.GraphPage.state.current = el; ui.GraphPage.state.current = el
ui.GraphPage.load(link) ui.GraphPage.load(link)
.then((response) => { .then((response) => {
BODY.classList.remove("ajax-loading"); BODY.classList.remove('ajax-loading')
el.classList.remove("loading"); el.classList.remove('loading')
el.classList.add("active"); el.classList.add('active')
D.loading_apollo_link = null; D.loading_apollo_link = null
if (ui.GraphPage.state.Link) { if (ui.GraphPage.state.Link) {
window.history.pushState( window.history.pushState(
@ -159,24 +159,24 @@ const MainUILinks = ((W) => {
}, },
ui.GraphPage.state.Title, ui.GraphPage.state.Title,
ui.GraphPage.state.Link ui.GraphPage.state.Link
); )
ui.setActiveLinks(ui.GraphPage.state.Link); ui.setActiveLinks(ui.GraphPage.state.Link)
} }
SpinnerUI.hide(); SpinnerUI.hide()
window.dispatchEvent(new Event(Events.AJAX)); window.dispatchEvent(new Event(Events.AJAX))
console.groupEnd(`${NAME}: load on click`); console.groupEnd(`${NAME}: load on click`)
}) })
.catch((e) => { .catch((e) => {
console.error(`${NAME}: loading error`); console.error(`${NAME}: loading error`)
console.log(e); console.log(e)
/*BODY.classList.remove('ajax-loading'); /* BODY.classList.remove('ajax-loading');
el.classList.remove('loading');*/ el.classList.remove('loading'); */
el.classList.add("error", `response-${e.status}`); el.classList.add('error', `response-${e.status}`)
/*switch (e.status) { /* switch (e.status) {
case 500: case 500:
break; break;
case 404: case 404:
@ -185,37 +185,37 @@ const MainUILinks = ((W) => {
case 523: case 523:
el.classList.add('unreachable'); el.classList.add('unreachable');
break; break;
}*/ } */
//SpinnerUI.hide(); // SpinnerUI.hide();
//window.dispatchEvent(new Event(Events.AJAX)); // window.dispatchEvent(new Event(Events.AJAX));
console.groupEnd(`${NAME}: load on click`); console.groupEnd(`${NAME}: load on click`)
console.log(`${NAME}: reloading page ${link}`); console.log(`${NAME}: reloading page ${link}`)
// fallback loading // fallback loading
W.location.href = link; W.location.href = link
}); })
} }
} }
W.addEventListener(`${Events.LOADED}`, () => { W.addEventListener(`${Events.LOADED}`, () => {
MainUILinks.init(); MainUILinks.init()
}); })
W.addEventListener(`${Events.AJAX}`, () => { W.addEventListener(`${Events.AJAX}`, () => {
MainUILinks.loaded(); MainUILinks.loaded()
}); })
// fallback // fallback
/*W.addEventListener(`${Events.APOLLO_ERROR}`, (e) => { /* W.addEventListener(`${Events.APOLLO_ERROR}`, (e) => {
console.error(`${NAME}: [APOLLO_ERROR] loading failure, reloading the page`); console.error(`${NAME}: [APOLLO_ERROR] loading failure, reloading the page`);
//W.dispatchEvent(new Event(Events.OFFLINE)); //W.dispatchEvent(new Event(Events.OFFLINE));
if (D.loading_apollo_link) { if (D.loading_apollo_link) {
W.location.href = D.loading_apollo_link; W.location.href = D.loading_apollo_link;
} }
});*/ }); */
})(window); })(window)
export default MainUILinks; export default MainUILinks

144
src/js/ajax/models/element.jsx
View File

@ -1,11 +1,11 @@
/* /*
* Lightbox window * Lightbox window
*/ */
import { Component } from "react"; import { Component } from 'react'
import Events from "../../events"; import Events from '../../events'
import { client } from "../apollo/init"; import { client } from '../apollo/init'
import { gql } from "@apollo/client"; import { gql } from '@apollo/client'
class Page extends Component { class Page extends Component {
state = { state = {
@ -16,48 +16,48 @@ class Page extends Component {
current: null, current: null,
ID: null, ID: null,
URLSegment: null, URLSegment: null,
ClassName: "Page", ClassName: 'Page',
CSSClass: null, CSSClass: null,
Title: null, Title: null,
Summary: null, Summary: null,
Link: null, Link: null,
URL: null, URL: null,
Elements: [], Elements: [],
page: null, page: null
}; }
componentDidUpdate() { componentDidUpdate () {
const ui = this; const ui = this
if (ui.state.Title) { if (ui.state.Title) {
document.title = ui.state.Title; document.title = ui.state.Title
if (ui.state.URL) { if (ui.state.URL) {
window.history.pushState( window.history.pushState(
{ {
page: JSON.stringify(ui.state), page: JSON.stringify(ui.state)
}, },
ui.state.Title, ui.state.Title,
ui.state.URL ui.state.URL
); )
} }
} }
if (ui.state.Elements.length) { if (ui.state.Elements.length) {
window.dispatchEvent(new Event(Events.AJAX)); window.dispatchEvent(new Event(Events.AJAX))
} }
} }
constructor(props) { constructor (props) {
super(props); super(props)
const ui = this; const ui = this
ui.name = ui.constructor.name; ui.name = ui.constructor.name
console.log(`${ui.name}: init`); console.log(`${ui.name}: init`)
} }
reset = () => { reset = () => {
const ui = this; const ui = this
ui.setState({ ui.setState({
type: [], type: [],
@ -67,12 +67,12 @@ class Page extends Component {
ID: null, ID: null,
Title: null, Title: null,
URL: null, URL: null,
Elements: [], Elements: []
}); })
}; }
load = (link) => { load = (link) => {
const ui = this; const ui = this
const query = gql(` const query = gql(`
query Pages { query Pages {
readPages(URLSegment: "home", limit: 1, offset: 0) { readPages(URLSegment: "home", limit: 1, offset: 0) {
@ -112,37 +112,37 @@ class Page extends Component {
} }
} }
} }
`); `)
ui.reset(); ui.reset()
ui.setState({ ui.setState({
Title: "Loading ...", Title: 'Loading ...',
loading: true, loading: true
}); })
console.log( console.log(
client.readQuery({ client.readQuery({
query, query
}) })
); )
client client
.query({ .query({
query: query, query
}) })
.then((resp) => { .then((resp) => {
const page = resp.data.readPages.edges[0].node; const page = resp.data.readPages.edges[0].node
// write to cache // write to cache
client.writeQuery({ client.writeQuery({
query, query,
data: { data: {
resp, resp
}, }
}); })
console.log( console.log(
client.readQuery({ client.readQuery({
query, query
}) })
); )
ui.setState({ ui.setState({
ID: page.ID, ID: page.ID,
@ -154,74 +154,74 @@ class Page extends Component {
Link: page.Link, Link: page.Link,
Elements: page.Elements.edges, Elements: page.Elements.edges,
URL: page.Link || link, URL: page.Link || link,
loading: false, loading: false
}); })
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error)
let msg = ""; let msg = ''
if (error.response) { if (error.response) {
switch (error.response.status) { switch (error.response.status) {
case 404: case 404:
msg = "Not Found."; msg = 'Not Found.'
break; break
case 500: case 500:
msg = "Server issue, please try again latter."; msg = 'Server issue, please try again latter.'
break; break
default: default:
msg = "Something went wrong."; msg = 'Something went wrong.'
break; break
} }
} else if (error.request) { } else if (error.request) {
msg = "No response received"; msg = 'No response received'
} else { } else {
console.warn("Error", error.message); console.warn('Error', error.message)
} }
ui.setState({ ui.setState({
error: msg, error: msg
}); })
}); })
}; }
getHtml = (html) => { getHtml = (html) => {
const decodeHtmlEntity = (input) => { const decodeHtmlEntity = (input) => {
var doc = new DOMParser().parseFromString(input, "text/html"); const doc = new DOMParser().parseFromString(input, 'text/html')
return doc.documentElement.textContent; return doc.documentElement.textContent
}; }
return { return {
__html: decodeHtmlEntity(html), __html: decodeHtmlEntity(html)
}; }
}; }
render() { render () {
const ui = this; const ui = this
const name = ui.name; const name = ui.name
const className = `elemental-area page-${ui.state.CSSClass} url-${ui.state.URLSegment}`; const className = `elemental-area page-${ui.state.CSSClass} url-${ui.state.URLSegment}`
const ElementItem = (props) => ( const ElementItem = (props) => (
<div dangerouslySetInnerHTML={props.html}></div> <div dangerouslySetInnerHTML={props.html} />
); )
let html = ""; let html = ''
if (ui.state.Elements.length) { if (ui.state.Elements.length) {
ui.state.Elements.map((el) => { ui.state.Elements.map((el) => {
html += el.node.Render; html += el.node.Render
}); })
} else { } else {
html += '<div class="loading">Loading ...</div>'; html += '<div class="loading">Loading ...</div>'
} }
return ( return (
<div <div
className={className} className={className}
dangerouslySetInnerHTML={ui.getHtml(html)} dangerouslySetInnerHTML={ui.getHtml(html)}
></div> />
); )
} }
} }
export default Page; export default Page

84
src/js/ajax/models/image.js
View File

@ -1,82 +1,82 @@
import axios from "redaxios"; import axios from 'redaxios'
const NAME = "ajax.models.image"; const NAME = 'ajax.models.image'
const API_STATIC = document.querySelector('meta[name="api_static_domain"]'); const API_STATIC = document.querySelector('meta[name="api_static_domain"]')
const API_STATIC_URL = API_STATIC const API_STATIC_URL = API_STATIC
? API_STATIC.getAttribute("content") ? API_STATIC.getAttribute('content')
: `${window.location.protocol}//${window.location.host}`; : `${window.location.protocol}//${window.location.host}`
console.log(`${NAME} [static url]: ${API_STATIC_URL}`); console.log(`${NAME} [static url]: ${API_STATIC_URL}`)
class ImageObject { class ImageObject {
constructor() { constructor () {
} }
load(url, el) { load (url, el) {
const imageUrl = url.startsWith("http") ? url : API_STATIC_URL + url; const imageUrl = url.startsWith('http') ? url : API_STATIC_URL + url
if(el) { if (el) {
el.classList.add("loading"); el.classList.add('loading')
el.classList.remove("loading__network-error"); el.classList.remove('loading__network-error')
} }
// offline response will be served by caching service worker // offline response will be served by caching service worker
const promise = new Promise((resolve, reject) => { const promise = new Promise((resolve, reject) => {
axios axios
.get(imageUrl, { .get(imageUrl, {
responseType: "blob", responseType: 'blob',
}) })
.then((response) => { .then((response) => {
const reader = new FileReader(); // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader const reader = new FileReader() // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader
reader.readAsDataURL(response.data); reader.readAsDataURL(response.data)
reader.onload = () => { reader.onload = () => {
const imageDataUrl = reader.result; const imageDataUrl = reader.result
if(el){ if (el) {
//el.setAttribute("src", imageDataUrl); // el.setAttribute("src", imageDataUrl);
el.classList.remove("loading"); el.classList.remove('loading')
el.classList.add("loading__success"); el.classList.add('loading__success')
} }
resolve(imageDataUrl); resolve(imageDataUrl)
}; }
}) })
.catch((e) => { .catch((e) => {
console.warn(e); console.warn(e)
if (e.response) { if (e.response) {
switch (e.response.status) { switch (e.response.status) {
case 404: case 404:
msg = "Not Found."; msg = 'Not Found.'
break; break
case 500: case 500:
msg = "Server issue, please try again latter."; msg = 'Server issue, please try again latter.'
break; break
default: default:
msg = "Something went wrong."; msg = 'Something went wrong.'
break; break
} }
console.error(`${NAME} [${imageUrl}]: ${msg}`); console.error(`${NAME} [${imageUrl}]: ${msg}`)
} else if (e.request) { } else if (e.request) {
msg = "No response received"; msg = 'No response received'
console.error(`${NAME} [${imageUrl}]: ${msg}`); console.error(`${NAME} [${imageUrl}]: ${msg}`)
} else { } else {
console.error(`${NAME} [${imageUrl}]: ${e.message}`); console.error(`${NAME} [${imageUrl}]: ${e.message}`)
} }
if(el){ if (el) {
el.classList.remove("loading"); el.classList.remove('loading')
el.classList.add("loading__network-error"); el.classList.add('loading__network-error')
el.classList.add("empty"); el.classList.add('empty')
} }
reject(e); reject(e)
}); })
}); })
return promise; return promise
} }
} }
export default ImageObject; export default ImageObject

178
src/js/ajax/models/page.jsx
View File

@ -1,60 +1,60 @@
/* /*
* page #MainContent area * page #MainContent area
*/ */
import { Component } from "react"; import { Component } from 'react'
import { useQuery, gql } from "@apollo/client"; import { useQuery, gql } from '@apollo/client'
import { client } from "../apollo/init"; import { client } from '../apollo/init'
import { cache } from "../apollo/cache"; import { cache } from '../apollo/cache'
const D = document; const D = document
const BODY = document.body; const BODY = document.body
class Page extends Component { class Page extends Component {
state = { state = {
type: [], type: [],
shown: false, shown: false,
Title: "Loading ...", Title: 'Loading ...',
loading: true, loading: true,
error: false, error: false,
current: null, current: null,
ID: null, ID: null,
URLSegment: null, URLSegment: null,
ClassName: "Page", ClassName: 'Page',
CSSClass: null, CSSClass: null,
Summary: null, Summary: null,
Link: null, Link: null,
URL: null, URL: null,
HTML: null, HTML: null,
Elements: [], Elements: [],
page: null, page: null
}; }
componentDidUpdate() { componentDidUpdate () {
const ui = this; const ui = this
if (ui.state.Title) { if (ui.state.Title) {
document.title = ui.state.Title; document.title = ui.state.Title
} }
} }
constructor(props) { constructor (props) {
super(props); super(props)
const ui = this; const ui = this
ui.name = ui.constructor.name; ui.name = ui.constructor.name
ui.empty_state = ui.state; ui.empty_state = ui.state
console.log(`${ui.name}: init`); console.log(`${ui.name}: init`)
} }
isOnline = () => { isOnline = () => {
return BODY.classList.contains("is-online"); return BODY.classList.contains('is-online')
}; }
load = (link) => { load = (link) => {
const ui = this; const ui = this
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const query = gql(`query Pages { const query = gql(`query Pages {
@ -74,89 +74,89 @@ class Page extends Component {
} }
} }
} }
}`); }`)
if (!ui.isOnline()) { if (!ui.isOnline()) {
const data = client.readQuery({ const data = client.readQuery({
query, query
}); })
if (data && ui.processResponse(data)) { if (data && ui.processResponse(data)) {
console.log(`${ui.name}: Offline cached response`); console.log(`${ui.name}: Offline cached response`)
resolve(data); resolve(data)
} else { } else {
console.log(`${ui.name}: No offline response`); console.log(`${ui.name}: No offline response`)
ui.setState( ui.setState(
Object.assign(ui.empty_state, { Object.assign(ui.empty_state, {
Title: "Offline", Title: 'Offline',
CSSClass: "graphql__status-523", CSSClass: 'graphql__status-523',
Summary: "You're Offline. The page is not available now.", Summary: "You're Offline. The page is not available now.",
loading: false, loading: false
}) })
); )
reject({ reject({
status: 523, status: 523
}); })
} }
} else { } else {
if (!ui.state.loading) { if (!ui.state.loading) {
ui.setState(ui.empty_state); ui.setState(ui.empty_state)
} }
client client
.query({ .query({
query: query, query,
fetchPolicy: ui.isOnline() ? "no-cache" : "cache-first", fetchPolicy: ui.isOnline() ? 'no-cache' : 'cache-first'
}) })
.then((resp) => { .then((resp) => {
// write to cache // write to cache
const data = resp.data; const data = resp.data
client.writeQuery({ client.writeQuery({
query, query,
data: data, data
}); })
if (ui.processResponse(data)) { if (ui.processResponse(data)) {
console.log(`${ui.name}: got the server response`); console.log(`${ui.name}: got the server response`)
resolve(data); resolve(data)
} else { } else {
console.log(`${ui.name}: not found`); console.log(`${ui.name}: not found`)
reject({ reject({
status: 404, status: 404
}); })
} }
}) })
.catch((error) => { .catch((error) => {
reject({ reject({
status: 500, status: 500,
error: error, error
}); })
}); })
}
})
} }
});
};
processResponse = (data) => { processResponse = (data) => {
const ui = this; const ui = this
if (!data.readPages.edges.length) { if (!data.readPages.edges.length) {
console.log(`${ui.name}: not found`); console.log(`${ui.name}: not found`)
ui.setState( ui.setState(
Object.assign(ui.empty_state, { Object.assign(ui.empty_state, {
Title: "Not Found", Title: 'Not Found',
CSSClass: "graphql__status-404", CSSClass: 'graphql__status-404',
Summary: "The page is not found.", Summary: 'The page is not found.',
loading: false, loading: false
}) })
); )
return false; return false
} }
const page = data.readPages.edges[0].node; const page = data.readPages.edges[0].node
ui.setState({ ui.setState({
ID: page.ID, ID: page.ID,
Title: page.Title, Title: page.Title,
@ -166,59 +166,59 @@ class Page extends Component {
Summary: page.Summary, Summary: page.Summary,
Link: page.Link, Link: page.Link,
HTML: page.HTML, HTML: page.HTML,
Elements: [], //page.Elements.edges, Elements: [], // page.Elements.edges,
loading: false, loading: false
}); })
return true; return true
}; }
getHtml = (html) => { getHtml = (html) => {
const decodeHtmlEntity = (input) => { const decodeHtmlEntity = (input) => {
var doc = new DOMParser().parseFromString(input, "text/html"); const doc = new DOMParser().parseFromString(input, 'text/html')
return doc.documentElement.textContent; return doc.documentElement.textContent
}; }
return { return {
__html: decodeHtmlEntity(html), __html: decodeHtmlEntity(html)
}; }
}; }
render() { render () {
const ui = this; const ui = this
const name = ui.name; const name = ui.name
const className = `elemental-area graphql__page page-${ui.state.CSSClass} url-${ui.state.URLSegment}`; const className = `elemental-area graphql__page page-${ui.state.CSSClass} url-${ui.state.URLSegment}`
const ElementItem = (props) => ( const ElementItem = (props) => (
<div dangerouslySetInnerHTML={props.html}></div> <div dangerouslySetInnerHTML={props.html} />
); )
let html = ""; let html = ''
if (ui.state.HTML) { if (ui.state.HTML) {
console.log(`${ui.name}: HTML only`); console.log(`${ui.name}: HTML only`)
html = ui.state.HTML; html = ui.state.HTML
} else if (ui.state.Elements.length) { } else if (ui.state.Elements.length) {
console.log(`${ui.name}: render`); console.log(`${ui.name}: render`)
ui.state.Elements.map((el) => { ui.state.Elements.map((el) => {
html += el.node.Render; html += el.node.Render
}); })
} else if (ui.state.Summary && ui.state.Summary.length) { } else if (ui.state.Summary && ui.state.Summary.length) {
console.log(`${ui.name}: summary only`); console.log(`${ui.name}: summary only`)
html = `<div class="summary">${ui.state.Summary}</div>`; html = `<div class="summary">${ui.state.Summary}</div>`
} }
if (ui.state.loading) { if (ui.state.loading) {
const spinner = D.getElementById("PageLoading"); const spinner = D.getElementById('PageLoading')
html = `<div class="loading">Loading ...</div>`; html = '<div class="loading">Loading ...</div>'
} }
return ( return (
<div <div
className={className} className={className}
dangerouslySetInnerHTML={ui.getHtml(html)} dangerouslySetInnerHTML={ui.getHtml(html)}
></div> />
); )
} }
} }
export default Page; export default Page

106
src/js/ajax/online.js
View File

@ -1,102 +1,102 @@
// ping online/offline state switch and detection // ping online/offline state switch and detection
import axios from "redaxios"; import axios from 'redaxios'
import Events from "../_events"; import Events from '../_events'
import Consts from "../_consts"; import Consts from '../_consts'
export default ((W) => { export default ((W) => {
const NAME = "main.online"; const NAME = 'main.online'
const D = document; const D = document
const BODY = D.body; const BODY = D.body
let pingInterval; let pingInterval
const PING_META = D.querySelector('meta[name="ping"]'); const PING_META = D.querySelector('meta[name="ping"]')
let update_online_status_lock = false; let update_online_status_lock = false
const UPDATE_ONLINE_STATUS = (online) => { const UPDATE_ONLINE_STATUS = (online) => {
if (update_online_status_lock) { if (update_online_status_lock) {
return; return
} }
update_online_status_lock = true; update_online_status_lock = true
if (online) { if (online) {
if (BODY.classList.contains("is-offline")) { if (BODY.classList.contains('is-offline')) {
console.log(`${NAME}: back Online`); console.log(`${NAME}: back Online`)
W.dispatchEvent(new Event(Events.BACKONLINE)); W.dispatchEvent(new Event(Events.BACKONLINE))
} else { } else {
console.log(`${NAME}: Online`); console.log(`${NAME}: Online`)
W.dispatchEvent(new Event(Events.ONLINE)); W.dispatchEvent(new Event(Events.ONLINE))
} }
BODY.classList.add("is-online"); BODY.classList.add('is-online')
BODY.classList.remove("is-offline"); BODY.classList.remove('is-offline')
if (PING_META && !pingInterval) { if (PING_META && !pingInterval) {
console.log(`${NAME}: SESSION_PING is active`); console.log(`${NAME}: SESSION_PING is active`)
pingInterval = setInterval(SESSION_PING, 300000); // 5 min in ms pingInterval = setInterval(SESSION_PING, 300000) // 5 min in ms
} }
} else { } else {
console.log(`${NAME}: Offline`); console.log(`${NAME}: Offline`)
BODY.classList.add("is-offline"); BODY.classList.add('is-offline')
BODY.classList.remove("is-online"); BODY.classList.remove('is-online')
clearInterval(pingInterval); clearInterval(pingInterval)
pingInterval = null; pingInterval = null
W.dispatchEvent(new Event(Events.OFFLINE)); W.dispatchEvent(new Event(Events.OFFLINE))
} }
update_online_status_lock = false; update_online_status_lock = false
}; }
// session ping // session ping
let session_ping_lock = false; let session_ping_lock = false
const SESSION_PING = () => { const SESSION_PING = () => {
if (session_ping_lock || BODY.classList.contains("is-offline")) { if (session_ping_lock || BODY.classList.contains('is-offline')) {
return; return
} }
const PING_URL = PING_META.getAttribute("content"); const PING_URL = PING_META.getAttribute('content')
console.log(`${NAME}: session ping`); console.log(`${NAME}: session ping`)
session_ping_lock = true; session_ping_lock = true
axios axios
.post(PING_URL, {}) .post(PING_URL, {})
.then((resp) => { .then((resp) => {
session_ping_lock = false; session_ping_lock = false
UPDATE_ONLINE_STATUS(true); UPDATE_ONLINE_STATUS(true)
}) })
.catch((error) => { .catch((error) => {
console.error(error); console.error(error)
console.warn(`${NAME}: SESSION_PING failed`); console.warn(`${NAME}: SESSION_PING failed`)
session_ping_lock = false; session_ping_lock = false
UPDATE_ONLINE_STATUS(false); UPDATE_ONLINE_STATUS(false)
}); })
}; }
// current browser online state // current browser online state
const navigatorStateUpdate = () => { const navigatorStateUpdate = () => {
if (typeof navigator.onLine !== "undefined") { if (typeof navigator.onLine !== 'undefined') {
if (!navigator.onLine) { if (!navigator.onLine) {
UPDATE_ONLINE_STATUS(false); UPDATE_ONLINE_STATUS(false)
} else { } else {
UPDATE_ONLINE_STATUS(true); UPDATE_ONLINE_STATUS(true)
}
} }
} }
};
W.addEventListener(`${Events.OFFLINE}`, () => { W.addEventListener(`${Events.OFFLINE}`, () => {
UPDATE_ONLINE_STATUS(false); UPDATE_ONLINE_STATUS(false)
}); })
W.addEventListener(`${Events.ONLINE}`, () => { W.addEventListener(`${Events.ONLINE}`, () => {
UPDATE_ONLINE_STATUS(true); UPDATE_ONLINE_STATUS(true)
}); })
W.addEventListener(`${Events.LOADED}`, navigatorStateUpdate); W.addEventListener(`${Events.LOADED}`, navigatorStateUpdate)
W.addEventListener(`${Events.AJAX}`, navigatorStateUpdate); W.addEventListener(`${Events.AJAX}`, navigatorStateUpdate)
})(window); })(window)

80
src/js/app.js
View File

@ -1,44 +1,44 @@
'use strict'; 'use strict'
/* /*
* UI Basics * UI Basics
*/ */
//import $ from 'jquery'; // import $ from 'jquery';
import '../scss/app.scss'; import '../scss/app.scss'
import Events from './_events'; import Events from './_events'
import './main'; import './main'
/* /*
* Extra functionality * Extra functionality
*/ */
import '@a2nt/meta-lightbox-js/src/js/app'; import '@a2nt/meta-lightbox-js/src/js/app'
import './ui/carousel'; import './ui/carousel'
import './ui/dropdown'; import './ui/dropdown'
import './ui/datepicker'; import './ui/datepicker'
//import './ui/ui.instagram.feed'; // import './ui/ui.instagram.feed';
/* /*
* AJAX functionality * AJAX functionality
*/ */
//import './ajax/links'; // import './ajax/links';
import './ajax/online'; import './ajax/online'
import './ajax/lazy-images'; import './ajax/lazy-images'
/* /*
* Site specific modules * Site specific modules
*/ */
import './layout'; import './layout'
//import 'hammerjs/hammer'; // import 'hammerjs/hammer';
//import 'jquery-hammerjs/jquery.hammer'; // import 'jquery-hammerjs/jquery.hammer';
// Routie // Routie
//import 'pouchdb/dist/pouchdb'; // import 'pouchdb/dist/pouchdb';
//import './components/routes/index'; // import './components/routes/index';
// conflicts with components/ui.hover.js (shows dropdown on hover) // conflicts with components/ui.hover.js (shows dropdown on hover)
//import 'bootstrap/js/dist/dropdown'; // import 'bootstrap/js/dist/dropdown';
/*import './components/ui.hover'; /* import './components/ui.hover';
import './components/ui.carousel'; import './components/ui.carousel';
import './components/ui.menu'; import './components/ui.menu';
@ -47,55 +47,55 @@ import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip'; import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover'; import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/scrollspy'; import 'bootstrap/js/dist/scrollspy';
import 'bootstrap/js/dist/tab';*/ import 'bootstrap/js/dist/tab'; */
// //
// Offcanvas menu // Offcanvas menu
//import 'offcanvas-bootstrap/dist/js/bootstrap.offcanvas'; // import 'offcanvas-bootstrap/dist/js/bootstrap.offcanvas';
// Uncomment it to enable meta-lightbox zooming on hover // Uncomment it to enable meta-lightbox zooming on hover
//import 'jquery-zoom/jquery.zoom'; // import 'jquery-zoom/jquery.zoom';
// FlyoutUI // FlyoutUI
//import FlyoutUI from './components/ui.flyout'; // import FlyoutUI from './components/ui.flyout';
// Sticky sidebar // Sticky sidebar
//import SidebarUI from './components/ui.sidebar'; // import SidebarUI from './components/ui.sidebar';
// Toggle bootstrap form fields // Toggle bootstrap form fields
//import FormToggleUI from './components/ui.form.fields.toggle'; // import FormToggleUI from './components/ui.form.fields.toggle';
// Bootstrap Date & Time fields // Bootstrap Date & Time fields
//import FormDatetime from './components/ui.form.datetime'; // import FormDatetime from './components/ui.form.datetime';
// Stepped forms functionality // Stepped forms functionality
//import FormStepped from './components/ui.form.stepped'; // import FormStepped from './components/ui.form.stepped';
// Forms validation functionality // Forms validation functionality
//import FormValidate from './components/ui.form.validate'; // import FormValidate from './components/ui.form.validate';
// Store forms data into localStorage // Store forms data into localStorage
//import FormStorage from './components/ui.form.storage'; // import FormStorage from './components/ui.form.storage';
// client-side images cropping // client-side images cropping
//import FormCroppie from './components/ui.form.croppie'; // import FormCroppie from './components/ui.form.croppie';
// Google NoCaptcha fields // Google NoCaptcha fields
//import NoCaptcha from './components/ui.nocaptcha'; // import NoCaptcha from './components/ui.nocaptcha';
// youtube video preview image // youtube video preview image
//import './components/ui.video.preview'; // import './components/ui.video.preview';
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation'; // import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
//import Table from 'bootstrap-table/dist/bootstrap-table'; // import Table from 'bootstrap-table/dist/bootstrap-table';
// Map UI // Map UI
//import MapApi from './components/ui.map.api'; // import MapApi from './components/ui.map.api';
//import FormSelect2 from './components/ui.form.select2'; // import FormSelect2 from './components/ui.form.select2';
//import './main'; // import './main';
//import './layout'; // import './layout';
// Google Analytics // Google Analytics
//import './drivers/google.track.external.links'; // import './drivers/google.track.external.links';

48
src/js/drivers/google.track.external.links.js
View File

@ -1,61 +1,61 @@
function _gaLt(event) { function _gaLt (event) {
if (typeof ga !== "function") { if (typeof ga !== 'function') {
return; return
} }
var el = event.srcElement || event.target; let el = event.srcElement || event.target
/* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */ /* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
while ( while (
el && el &&
(typeof el.tagName == "undefined" || (typeof el.tagName === 'undefined' ||
el.tagName.toLowerCase() != "a" || el.tagName.toLowerCase() != 'a' ||
!el.href) !el.href)
) { ) {
el = el.parentNode; el = el.parentNode
} }
if (el && el.href) { if (el && el.href) {
/* link */ /* link */
var link = el.href; const link = el.href
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) { if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
/* external link */ /* external link */
/* HitCallback function to either open link in either same or new window */ /* HitCallback function to either open link in either same or new window */
var hitBack = function (link, target) { const hitBack = function (link, target) {
target ? window.open(link, target) : (window.location.href = link); target ? window.open(link, target) : (window.location.href = link)
}; }
/* Is target set and not _(self|parent|top)? */ /* Is target set and not _(self|parent|top)? */
var target = const target =
el.target && !el.target.match(/^_(self|parent|top)$/i) el.target && !el.target.match(/^_(self|parent|top)$/i)
? el.target ? el.target
: false; : false
/* send event with callback */ /* send event with callback */
ga( ga(
"send", 'send',
"event", 'event',
"Outgoing Links", 'Outgoing Links',
link, link,
document.location.pathname + document.location.search, document.location.pathname + document.location.search,
{ hitCallback: hitBack(link, target) } { hitCallback: hitBack(link, target) }
); )
/* Prevent standard click */ /* Prevent standard click */
event.preventDefault ? event.preventDefault() : (event.returnValue = !1); event.preventDefault ? event.preventDefault() : (event.returnValue = !1)
} }
} }
} }
/* Attach the event to all clicks in the document after page has loaded */ /* Attach the event to all clicks in the document after page has loaded */
var w = window; const w = window
w.addEventListener w.addEventListener
? w.addEventListener( ? w.addEventListener(
"load", 'load',
() => { () => {
document.body.addEventListener("click", _gaLt, !1); document.body.addEventListener('click', _gaLt, !1)
}, },
!1 !1
) )
: w.attachEvent && : w.attachEvent &&
w.attachEvent("onload", () => { w.attachEvent('onload', () => {
document.body.attachEvent("onclick", _gaLt); document.body.attachEvent('onclick', _gaLt)
}); })

243
src/js/drivers/map.google.font-icons.js
View File

@ -1,197 +1,196 @@
"use strict"; 'use strict'
const Obj = { const Obj = {
init: () => { init: () => {
class GoogleMapsHtmlOverlay extends google.maps.OverlayView { class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
constructor(options) { constructor (options) {
super(); super()
const ui = this; const ui = this
ui.setMap(options.map); ui.setMap(options.map)
ui.position = options.position; ui.position = options.position
ui.html = options.html ui.html = options.html
? options.html ? options.html
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'; : '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
ui.divClass = options.divClass; ui.divClass = options.divClass
ui.align = options.align; ui.align = options.align
ui.isDebugMode = options.debug; ui.isDebugMode = options.debug
ui.onClick = options.onClick; ui.onClick = options.onClick
ui.onMouseOver = options.onMouseOver; ui.onMouseOver = options.onMouseOver
ui.isBoolean = (arg) => { ui.isBoolean = (arg) => {
if (typeof arg === "boolean") { if (typeof arg === 'boolean') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isNotUndefined = (arg) => { ui.isNotUndefined = (arg) => {
if (typeof arg !== "undefined") { if (typeof arg !== 'undefined') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.hasContent = (arg) => { ui.hasContent = (arg) => {
if (arg.length > 0) { if (arg.length > 0) {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isString = (arg) => { ui.isString = (arg) => {
if (typeof arg === "string") { if (typeof arg === 'string') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isFunction = (arg) => { ui.isFunction = (arg) => {
if (typeof arg === "function") { if (typeof arg === 'function') {
return true; return true
} else { } else {
return false; return false
} }
};
} }
onAdd() { }
const ui = this;
onAdd () {
const ui = this
// Create div element. // Create div element.
ui.div = document.createElement("div"); ui.div = document.createElement('div')
ui.div.style.position = "absolute"; ui.div.style.position = 'absolute'
// Validate and set custom div class // Validate and set custom div class
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
ui.div.className = ui.divClass;
// Validate and set custom HTML // Validate and set custom HTML
if ( if (
ui.isNotUndefined(ui.html) && ui.isNotUndefined(ui.html) &&
ui.hasContent(ui.html) && ui.hasContent(ui.html) &&
ui.isString(ui.html) ui.isString(ui.html)
) ) { ui.div.innerHTML = ui.html }
ui.div.innerHTML = ui.html;
// If debug mode is enabled custom content will be replaced with debug content // If debug mode is enabled custom content will be replaced with debug content
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) { if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
ui.div.className = "debug-mode"; ui.div.className = 'debug-mode'
ui.div.innerHTML = ui.div.innerHTML =
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' + '<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'; '<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'
ui.div.setAttribute( ui.div.setAttribute(
"style", 'style',
"position: absolute;" + 'position: absolute;' +
"border: 5px dashed red;" + 'border: 5px dashed red;' +
"height: 150px;" + 'height: 150px;' +
"width: 150px;" + 'width: 150px;' +
"display: flex;" + 'display: flex;' +
"justify-content: center;" + 'justify-content: center;' +
"align-items: center;" 'align-items: center;'
); )
} }
// Add element to clickable layer // Add element to clickable layer
ui.getPanes().overlayMouseTarget.appendChild(ui.div); ui.getPanes().overlayMouseTarget.appendChild(ui.div)
// Add listeners to the element. // Add listeners to the element.
google.maps.event.addDomListener(ui.div, "click", (event) => { google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, "click"); google.maps.event.trigger(ui, 'click')
if (ui.isFunction(ui.onClick)) ui.onClick(); if (ui.isFunction(ui.onClick)) ui.onClick()
event.stopPropagation(); event.stopPropagation()
}); })
google.maps.event.addDomListener(ui.div, "mouseover", (event) => { google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, "mouseover"); google.maps.event.trigger(ui, 'mouseover')
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver(); if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
event.stopPropagation(); event.stopPropagation()
}); })
} }
draw() { draw () {
const ui = this; const ui = this
// Calculate position of div // Calculate position of div
var positionInPixels = ui const positionInPixels = ui
.getProjection() .getProjection()
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position)); .fromLatLngToDivPixel(new google.maps.LatLng(ui.position))
// Align HTML overlay relative to original position // Align HTML overlay relative to original position
var divOffset = { const divOffset = {
y: undefined, y: undefined,
x: undefined, x: undefined,
}; }
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") { switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
case "left top": case 'left top':
divOffset.y = ui.div.offsetHeight; divOffset.y = ui.div.offsetHeight
divOffset.x = ui.div.offsetWidth; divOffset.x = ui.div.offsetWidth
break; break
case "left center": case 'left center':
divOffset.y = ui.div.offsetHeight / 2; divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth; divOffset.x = ui.div.offsetWidth
break; break
case "left bottom": case 'left bottom':
divOffset.y = 0; divOffset.y = 0
divOffset.x = ui.div.offsetWidth; divOffset.x = ui.div.offsetWidth
break; break
case "center top": case 'center top':
divOffset.y = ui.div.offsetHeight; divOffset.y = ui.div.offsetHeight
divOffset.x = ui.div.offsetWidth / 2; divOffset.x = ui.div.offsetWidth / 2
break; break
case "center center": case 'center center':
divOffset.y = ui.div.offsetHeight / 2; divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth / 2; divOffset.x = ui.div.offsetWidth / 2
break; break
case "center bottom": case 'center bottom':
divOffset.y = 0; divOffset.y = 0
divOffset.x = ui.div.offsetWidth / 2; divOffset.x = ui.div.offsetWidth / 2
break; break
case "right top": case 'right top':
divOffset.y = ui.div.offsetHeight; divOffset.y = ui.div.offsetHeight
divOffset.x = 0; divOffset.x = 0
break; break
case "right center": case 'right center':
divOffset.y = ui.div.offsetHeight / 2; divOffset.y = ui.div.offsetHeight / 2
divOffset.x = 0; divOffset.x = 0
break; break
case "right bottom": case 'right bottom':
divOffset.y = 0; divOffset.y = 0
divOffset.x = 0; divOffset.x = 0
break; break
default: default:
divOffset.y = ui.div.offsetHeight / 2; divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth / 2; divOffset.x = ui.div.offsetWidth / 2
} }
// Set position // Set position
ui.div.style.top = `${positionInPixels.y - divOffset.y}px`; ui.div.style.top = `${positionInPixels.y - divOffset.y}px`
ui.div.style.left = `${positionInPixels.x - divOffset.x}px`; ui.div.style.left = `${positionInPixels.x - divOffset.x}px`
} }
getPosition() { getPosition () {
const ui = this; const ui = this
return ui.position; return ui.position
} }
getDiv() { getDiv () {
const ui = this; const ui = this
return ui.div; return ui.div
} }
setPosition(position, align) { setPosition (position, align) {
const ui = this; const ui = this
ui.position = position; ui.position = position
ui.align = align; ui.align = align
ui.draw(); ui.draw()
} }
} }
return GoogleMapsHtmlOverlay; return GoogleMapsHtmlOverlay
}, },
}; }
export default Obj; export default Obj

252
src/js/drivers/map.google.js
View File

@ -1,72 +1,72 @@
'use strict'; 'use strict'
import { MarkerClusterer } from '@googlemaps/markerclusterer'; import { MarkerClusterer } from '@googlemaps/markerclusterer'
import Events from '../_events'; import Events from '../_events'
import MarkerUI from './map.google.marker'; import MarkerUI from './map.google.marker'
const GoogleMapsDriver = ((window) => { const GoogleMapsDriver = ((window) => {
class GoogleMapsDriver { class GoogleMapsDriver {
getName() { getName () {
return 'GoogleMapsDriver'; return 'GoogleMapsDriver'
} }
init(el, config = []) { init (el, config = []) {
const ui = this; const ui = this
ui.el = el; ui.el = el
ui.config = config; ui.config = config
ui.markers = []; ui.markers = []
window[`init${ui.getName()}`] = () => { window[`init${ui.getName()}`] = () => {
ui.googleApiLoaded(); ui.googleApiLoaded()
};
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${
config['key']
}&callback=init${ui.getName()}`;
script.async = true;
script.defer = true;
document.head.appendChild(script);
} }
googleApiLoaded() { const script = document.createElement('script')
const ui = this; script.src = `https://maps.googleapis.com/maps/api/js?key=${
config.key
}&callback=init${ui.getName()}`
script.async = true
script.defer = true
document.head.appendChild(script)
}
const el = ui.el; googleApiLoaded () {
const config = ui.config; const ui = this
const mapDiv = el.querySelector('.mapAPI-map');
const el = ui.el
const config = ui.config
const mapDiv = el.querySelector('.mapAPI-map')
const zoom = const zoom =
config['mapZoom'] && config['mapZoom'] !== '0' config.mapZoom && config.mapZoom !== '0'
? parseInt(config['mapZoom']) ? parseInt(config.mapZoom)
: 10; : 10
const center = const center =
config['center'] && config['center'] !== ',' config.center && config.center !== ','
? { ? {
lat: config['center'][1], lat: config.center[1],
lng: config['center'][0], lng: config.center[0],
} }
: { : {
lat: 0, lat: 0,
lng: 0, lng: 0,
}; }
const style = config['style'] ? config['style'] : null; const style = config.style ? config.style : null
console.log(`${ui.getName()}: API is loaded`); console.log(`${ui.getName()}: API is loaded`)
// init fontawesome icons // init fontawesome icons
ui.MarkerUI = MarkerUI.init(); ui.MarkerUI = MarkerUI.init()
ui.map = new google.maps.Map(mapDiv, { ui.map = new google.maps.Map(mapDiv, {
zoom, zoom,
center, center,
fullscreenControl: true, fullscreenControl: true,
styles: style, styles: style,
}); })
ui.default_zoom = zoom; ui.default_zoom = zoom
mapDiv.classList.add('mapboxgl-map'); mapDiv.classList.add('mapboxgl-map')
ui.popup = new ui.MarkerUI({ ui.popup = new ui.MarkerUI({
map: ui.map, map: ui.map,
@ -77,10 +77,10 @@ const GoogleMapsDriver = ((window) => {
'<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' + '<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' +
'<div class="html"></div>' + '<div class="html"></div>' +
'</div>', '</div>',
}); })
ui.popup.setMap(ui.map); ui.popup.setMap(ui.map)
ui.geocoder = new google.maps.Geocoder(); ui.geocoder = new google.maps.Geocoder()
ui.cluster = new MarkerClusterer(ui.map, null, { ui.cluster = new MarkerClusterer(ui.map, null, {
styles: [ styles: [
@ -90,85 +90,85 @@ const GoogleMapsDriver = ((window) => {
className: 'mapboxgl-cluster', className: 'mapboxgl-cluster',
}, },
], ],
}); })
el.dispatchEvent(new Event(Events.MAPAPILOADED)); el.dispatchEvent(new Event(Events.MAPAPILOADED))
} }
addMarker(crds, config) { addMarker (crds, config) {
const ui = this; const ui = this
const pos = { const pos = {
lat: crds[1], lat: crds[1],
lng: crds[0], lng: crds[0],
}; }
const marker = new ui.MarkerUI({ const marker = new ui.MarkerUI({
position: pos, position: pos,
map: ui.map, map: ui.map,
align: ['center', 'top'], align: ['center', 'top'],
html: `<div class="mapboxgl-marker"><div id="Marker${config['id']}" data-id="${config['id']}" class="marker">${config['icon']}</div></div>`, html: `<div class="mapboxgl-marker"><div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div></div>`,
onClick: () => { onClick: () => {
const el = document.querySelector(`#Marker${config['id']}`); const el = document.querySelector(`#Marker${config.id}`)
ui.showPopup(pos, config['content']); ui.showPopup(pos, config.content)
el.dispatchEvent(new Event(Events.MAPMARKERCLICK)); el.dispatchEvent(new Event(Events.MAPMARKERCLICK))
}, },
}); })
ui.markers.push(marker); ui.markers.push(marker)
ui.cluster.addMarker(marker); ui.cluster.addMarker(marker)
return marker; return marker
} }
showPopup(pos, content) { showPopup (pos, content) {
const ui = this; const ui = this
const popup = ui.popup.getDiv(); const popup = ui.popup.getDiv()
if (ui.config['flyToMarker']) { if (ui.config.flyToMarker) {
ui.map.setCenter(pos); // panTo ui.map.setCenter(pos) // panTo
if (!ui.config['noZoom']) { if (!ui.config.noZoom) {
ui.map.setZoom(18); ui.map.setZoom(18)
} }
} }
// keep it hidden to render content // keep it hidden to render content
popup.style.opacity = '0'; popup.style.opacity = '0'
popup.classList.remove('d-none'); popup.classList.remove('d-none')
popup.querySelector('.mapboxgl-popup-content .html').innerHTML = content; popup.querySelector('.mapboxgl-popup-content .html').innerHTML = content
popup popup
.querySelector('.mapboxgl-popup-close-button') .querySelector('.mapboxgl-popup-close-button')
.addEventListener('click', (e) => { .addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault()
ui.hidePopup(); ui.hidePopup()
}); })
// set position when content was rendered // set position when content was rendered
ui.popup.setPosition(pos, ['center', 'top']); ui.popup.setPosition(pos, ['center', 'top'])
// display popup // display popup
popup.style.opacity = '1'; popup.style.opacity = '1'
popup.style['margin-top'] = '-1rem'; popup.style['margin-top'] = '-1rem'
} }
hidePopup() { hidePopup () {
const ui = this; const ui = this
const popup = ui.popup.getDiv(); const popup = ui.popup.getDiv()
popup.classList.add('d-none'); popup.classList.add('d-none')
if (!ui.config['noRestoreBounds'] || ui.config['flyToBounds']) { if (!ui.config.noRestoreBounds || ui.config.flyToBounds) {
ui.restoreBounds(); ui.restoreBounds()
} }
ui.el.dispatchEvent(new Event(Events.MAPPOPUPCLOSE)); ui.el.dispatchEvent(new Event(Events.MAPPOPUPCLOSE))
} }
geocode(addr, callback) { geocode (addr, callback) {
const ui = this; const ui = this
ui.geocoder.geocode( ui.geocoder.geocode(
{ {
@ -176,24 +176,24 @@ const GoogleMapsDriver = ((window) => {
}, },
(results, status) => { (results, status) => {
if (status === 'OK') { if (status === 'OK') {
//results[0].geometry.location; // results[0].geometry.location;
if (typeof callback === 'function') { if (typeof callback === 'function') {
callback(results); callback(results)
} }
return results; return results
} else { } else {
console.error( console.error(
`${ui.getName()}: Geocode was not successful for the following reason: ${status}` `${ui.getName()}: Geocode was not successful for the following reason: ${status}`
); )
} }
} }
); )
} }
reverseGeocode(latLng, callback) { reverseGeocode (latLng, callback) {
const ui = this; const ui = this
ui.geocoder.geocode( ui.geocoder.geocode(
{ {
@ -201,94 +201,94 @@ const GoogleMapsDriver = ((window) => {
}, },
(results, status) => { (results, status) => {
if (status === 'OK') { if (status === 'OK') {
//results[0].formatted_address; // results[0].formatted_address;
if (typeof callback === 'function') { if (typeof callback === 'function') {
callback(results); callback(results)
} }
return results; return results
} else { } else {
console.error( console.error(
`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}` `${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
); )
} }
} }
); )
} }
addGeoJson(config) { addGeoJson (config) {
const ui = this; const ui = this
const geojson = JSON.parse(config['geojson']); const geojson = JSON.parse(config.geojson)
const firstMarker = geojson.features[0].geometry.coordinates; const firstMarker = geojson.features[0].geometry.coordinates
//Map.setCenter(firstMarker); // Map.setCenter(firstMarker);
const bounds = new google.maps.LatLngBounds(); const bounds = new google.maps.LatLngBounds()
// add markers to map // add markers to map
geojson.features.forEach((marker) => { geojson.features.forEach((marker) => {
const id = marker.id; const id = marker.id
const crds = marker.geometry.coordinates; const crds = marker.geometry.coordinates
const content = marker.properties.content; const content = marker.properties.content
ui.addMarker(crds, { ui.addMarker(crds, {
id, id,
content, content,
icon: marker.icon, icon: marker.icon,
flyToMarker: config['flyToMarker'], flyToMarker: config.flyToMarker,
}); })
bounds.extend({ bounds.extend({
lat: crds[1], lat: crds[1],
lng: crds[0], lng: crds[0],
}); })
}); })
if (ui.markers.length > 1) { if (ui.markers.length > 1) {
ui.map.fitBounds(bounds, { ui.map.fitBounds(bounds, {
padding: 30, padding: 30,
}); //panToBounds }) // panToBounds
} else if (ui.markers[0]) { } else if (ui.markers[0]) {
ui.map.setCenter(ui.markers[0].getPosition()); ui.map.setCenter(ui.markers[0].getPosition())
} }
ui.default_bounds = bounds; ui.default_bounds = bounds
ui.default_zoom = ui.map.getZoom(); ui.default_zoom = ui.map.getZoom()
} }
getMap() { getMap () {
const ui = this; const ui = this
return ui.map; return ui.map
} }
getPopup() { getPopup () {
const ui = this; const ui = this
return ui.popup; return ui.popup
} }
restoreBounds() { restoreBounds () {
const ui = this; const ui = this
if (ui.default_bounds && ui.markers.length > 1) { if (ui.default_bounds && ui.markers.length > 1) {
ui.map.fitBounds(ui.default_bounds, { ui.map.fitBounds(ui.default_bounds, {
padding: 30, padding: 30,
}); //panToBounds }) // panToBounds
} else { } else {
if (ui.markers[0]) { if (ui.markers[0]) {
ui.map.setCenter(ui.markers[0].getPosition()); ui.map.setCenter(ui.markers[0].getPosition())
} }
ui.restoreZoom(); ui.restoreZoom()
} }
} }
restoreZoom() { restoreZoom () {
const ui = this; const ui = this
ui.map.setZoom(ui.default_zoom); ui.map.setZoom(ui.default_zoom)
} }
} }
return GoogleMapsDriver; return GoogleMapsDriver
})(window); })(window)
export default GoogleMapsDriver; export default GoogleMapsDriver

269
src/js/drivers/map.google.marker.js
View File

@ -1,224 +1,223 @@
"use strict"; 'use strict'
const Obj = { const Obj = {
init: () => { init: () => {
class GoogleMapsHtmlOverlay extends google.maps.OverlayView { class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
constructor(options) { constructor (options) {
super(); super()
const ui = this; const ui = this
ui.ownerMap = options.map; ui.ownerMap = options.map
//ui.setMap(options.map); // ui.setMap(options.map);
ui.position = options.position; ui.position = options.position
ui.html = options.html ui.html = options.html
? options.html ? options.html
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'; : '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
ui.divClass = options.divClass; ui.divClass = options.divClass
ui.align = options.align; ui.align = options.align
ui.isDebugMode = options.debug; ui.isDebugMode = options.debug
ui.onClick = options.onClick; ui.onClick = options.onClick
ui.onMouseOver = options.onMouseOver; ui.onMouseOver = options.onMouseOver
ui.isBoolean = (arg) => { ui.isBoolean = (arg) => {
if (typeof arg === "boolean") { if (typeof arg === 'boolean') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isNotUndefined = (arg) => { ui.isNotUndefined = (arg) => {
if (typeof arg !== "undefined") { if (typeof arg !== 'undefined') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.hasContent = (arg) => { ui.hasContent = (arg) => {
if (arg.length > 0) { if (arg.length > 0) {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isString = (arg) => { ui.isString = (arg) => {
if (typeof arg === "string") { if (typeof arg === 'string') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isFunction = (arg) => { ui.isFunction = (arg) => {
if (typeof arg === "function") { if (typeof arg === 'function') {
return true; return true
} else { } else {
return false; return false
} }
};
} }
onAdd() { }
const ui = this;
onAdd () {
const ui = this
// Create div element. // Create div element.
ui.div = document.createElement("div"); ui.div = document.createElement('div')
ui.div.style.position = "absolute"; ui.div.style.position = 'absolute'
// Validate and set custom div class // Validate and set custom div class
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
ui.div.className = ui.divClass;
// Validate and set custom HTML // Validate and set custom HTML
if ( if (
ui.isNotUndefined(ui.html) && ui.isNotUndefined(ui.html) &&
ui.hasContent(ui.html) && ui.hasContent(ui.html) &&
ui.isString(ui.html) ui.isString(ui.html)
) ) { ui.div.innerHTML = ui.html }
ui.div.innerHTML = ui.html;
// If debug mode is enabled custom content will be replaced with debug content // If debug mode is enabled custom content will be replaced with debug content
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) { if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
ui.div.className = "debug-mode"; ui.div.className = 'debug-mode'
ui.div.innerHTML = ui.div.innerHTML =
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' + '<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'; '<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'
ui.div.setAttribute( ui.div.setAttribute(
"style", 'style',
"position: absolute;" + 'position: absolute;' +
"border: 5px dashed red;" + 'border: 5px dashed red;' +
"height: 150px;" + 'height: 150px;' +
"width: 150px;" + 'width: 150px;' +
"display: flex;" + 'display: flex;' +
"justify-content: center;" + 'justify-content: center;' +
"align-items: center;" 'align-items: center;'
); )
} }
// Add element to clickable layer // Add element to clickable layer
ui.getPanes().overlayMouseTarget.appendChild(ui.div); ui.getPanes().overlayMouseTarget.appendChild(ui.div)
// Add listeners to the element. // Add listeners to the element.
google.maps.event.addDomListener(ui.div, "click", (event) => { google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, "click"); google.maps.event.trigger(ui, 'click')
if (ui.isFunction(ui.onClick)) ui.onClick(); if (ui.isFunction(ui.onClick)) ui.onClick()
event.stopPropagation(); event.stopPropagation()
}); })
google.maps.event.addDomListener(ui.div, "mouseover", (event) => { google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, "mouseover"); google.maps.event.trigger(ui, 'mouseover')
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver(); if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
event.stopPropagation(); event.stopPropagation()
}); })
} }
draw() { draw () {
const ui = this; const ui = this
let div = document.querySelector(".popup"); let div = document.querySelector('.popup')
if (!div.length) { if (!div.length) {
div = ui.div; div = ui.div
} }
// Calculate position of div // Calculate position of div
const projection = ui.getProjection(); const projection = ui.getProjection()
if (!projection) { if (!projection) {
console.log("GoogleMapsHtmlOverlay: current map is missing"); console.log('GoogleMapsHtmlOverlay: current map is missing')
return null; return null
} }
const positionInPixels = projection.fromLatLngToDivPixel( const positionInPixels = projection.fromLatLngToDivPixel(
ui.getPosition() ui.getPosition()
); )
// Align HTML overlay relative to original position // Align HTML overlay relative to original position
const offset = { const offset = {
y: undefined, y: undefined,
x: undefined, x: undefined,
}; }
const divWidth = div.offsetWidth; const divWidth = div.offsetWidth
const divHeight = div.offsetHeight; const divHeight = div.offsetHeight
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") { switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
case "left top": case 'left top':
offset.y = divHeight; offset.y = divHeight
offset.x = divWidth; offset.x = divWidth
break; break
case "left center": case 'left center':
offset.y = divHeight / 2; offset.y = divHeight / 2
offset.x = divWidth; offset.x = divWidth
break; break
case "left bottom": case 'left bottom':
offset.y = 0; offset.y = 0
offset.x = divWidth; offset.x = divWidth
break; break
case "center top": case 'center top':
offset.y = divHeight; offset.y = divHeight
offset.x = divWidth / 2; offset.x = divWidth / 2
break; break
case "center center": case 'center center':
offset.y = divHeight / 2; offset.y = divHeight / 2
offset.x = divWidth / 2; offset.x = divWidth / 2
break; break
case "center bottom": case 'center bottom':
offset.y = 0; offset.y = 0
offset.x = divWidth / 2; offset.x = divWidth / 2
break; break
case "right top": case 'right top':
offset.y = divHeight; offset.y = divHeight
offset.x = 0; offset.x = 0
break; break
case "right center": case 'right center':
offset.y = divHeight / 2; offset.y = divHeight / 2
offset.x = 0; offset.x = 0
break; break
case "right bottom": case 'right bottom':
offset.y = 0; offset.y = 0
offset.x = 0; offset.x = 0
break; break
default: default:
offset.y = divHeight / 2; offset.y = divHeight / 2
offset.x = divWidth / 2; offset.x = divWidth / 2
break; break
} }
// Set position // Set position
ui.div.style.top = `${positionInPixels.y - offset.y}px`; ui.div.style.top = `${positionInPixels.y - offset.y}px`
ui.div.style.left = `${positionInPixels.x - offset.x}px`; ui.div.style.left = `${positionInPixels.x - offset.x}px`
} }
getPosition() { getPosition () {
const ui = this; const ui = this
return new google.maps.LatLng(ui.position); return new google.maps.LatLng(ui.position)
} }
getDiv() { getDiv () {
const ui = this; const ui = this
return ui.div; return ui.div
} }
setPosition(position, align) { setPosition (position, align) {
const ui = this; const ui = this
ui.position = position; ui.position = position
ui.align = align; ui.align = align
ui.draw(); ui.draw()
} }
remove() { remove () {
const ui = this; const ui = this
ui.setMap(null); ui.setMap(null)
ui.div.remove(); ui.div.remove()
} }
// emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus) // emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus)
getDraggable() { getDraggable () {
return false; return false
} }
} }
return GoogleMapsHtmlOverlay; return GoogleMapsHtmlOverlay
}, },
}; }
export default Obj; export default Obj

140
src/js/drivers/map.mapbox.js
View File

@ -1,40 +1,40 @@
"use strict"; 'use strict'
//import $ from 'jquery'; // import $ from 'jquery';
import mapBoxGL from "mapbox-gl"; import mapBoxGL from 'mapbox-gl'
import Events from "../../_events"; import Events from '../../_events'
const MapBoxDriver = (($) => { const MapBoxDriver = (($) => {
class MapBoxDriver { class MapBoxDriver {
getName() { getName () {
return "MapBoxDriver"; return 'MapBoxDriver'
} }
init($el, config = []) { init ($el, config = []) {
const ui = this; const ui = this
mapBoxGL.accessToken = config["key"]; mapBoxGL.accessToken = config.key
ui.map = new mapBoxGL.Map({ ui.map = new mapBoxGL.Map({
container: $el.find(".mapAPI-map")[0], container: $el.find('.mapAPI-map')[0],
center: config["center"] ? config["center"] : [0, 0], center: config.center ? config.center : [0, 0],
//hash: true, // hash: true,
style: config["style"] style: config.style
? config["style"] ? config.style
: "mapbox://styles/mapbox/streets-v9", : 'mapbox://styles/mapbox/streets-v9',
localIdeographFontFamily: config["font-family"], localIdeographFontFamily: config['font-family'],
zoom: config["mapZoom"] ? config["mapZoom"] : 10, zoom: config.mapZoom ? config.mapZoom : 10,
attributionControl: false, attributionControl: false,
antialias: true, antialias: true,
accessToken: config["key"], accessToken: config.key,
}) })
.addControl( .addControl(
new mapBoxGL.AttributionControl({ new mapBoxGL.AttributionControl({
compact: true, compact: true,
}) })
) )
.addControl(new mapBoxGL.NavigationControl(), "top-right") .addControl(new mapBoxGL.NavigationControl(), 'top-right')
.addControl( .addControl(
new mapBoxGL.GeolocateControl({ new mapBoxGL.GeolocateControl({
positionOptions: { positionOptions: {
@ -42,58 +42,58 @@ const MapBoxDriver = (($) => {
}, },
trackUserLocation: true, trackUserLocation: true,
}), }),
"bottom-right" 'bottom-right'
) )
.addControl( .addControl(
new mapBoxGL.ScaleControl({ new mapBoxGL.ScaleControl({
maxWidth: 80, maxWidth: 80,
unit: "metric", unit: 'metric',
}), }),
"top-left" 'top-left'
) )
.addControl(new mapBoxGL.FullscreenControl()); .addControl(new mapBoxGL.FullscreenControl())
ui.map.on("load", (e) => { ui.map.on('load', (e) => {
$el.trigger(Events.MAPAPILOADED); $el.trigger(Events.MAPAPILOADED)
}); })
ui.popup = new mapBoxGL.Popup({ ui.popup = new mapBoxGL.Popup({
closeOnClick: false, closeOnClick: false,
className: "popup", className: 'popup',
}); })
} }
addMarker(crds, config) { addMarker (crds, config) {
const ui = this; const ui = this
// create a DOM el for the marker // create a DOM el for the marker
const $el = $( const $el = $(
`<div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div>` `<div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div>`
); )
$el.on("click", (e) => { $el.on('click', (e) => {
ui.popup.setLngLat(crds).setHTML(config["content"]).addTo(ui.map); ui.popup.setLngLat(crds).setHTML(config.content).addTo(ui.map)
if (config["flyToMarker"]) { if (config.flyToMarker) {
ui.map.flyTo({ ui.map.flyTo({
center: crds, center: crds,
zoom: 17, zoom: 17,
}); })
} }
$(e.currentTarget).trigger(Events.MAPMARKERCLICK); $(e.currentTarget).trigger(Events.MAPMARKERCLICK)
}); })
// add marker to map // add marker to map
const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map); const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map)
return marker; return marker
} }
addGeoJson(config) { addGeoJson (config) {
const ui = this; const ui = this
// Insert the layer beneath any symbol layer. // Insert the layer beneath any symbol layer.
/*if (config['3d']) { /* if (config['3d']) {
const layers = Map.getStyle().layers; const layers = Map.getStyle().layers;
let labelLayerId; let labelLayerId;
for (let i = 0; i < layers.length; i++) { for (let i = 0; i < layers.length; i++) {
@ -130,55 +130,55 @@ const MapBoxDriver = (($) => {
'fill-extrusion-opacity': .6, 'fill-extrusion-opacity': .6,
}, },
}, labelLayerId); }, labelLayerId);
}*/ } */
const firstMarker = config["geojson"].features[0].geometry.coordinates; const firstMarker = config.geojson.features[0].geometry.coordinates
//Map.setCenter(firstMarker); // Map.setCenter(firstMarker);
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker); const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker)
// add markers to map // add markers to map
config["geojson"].features.forEach((marker) => { config.geojson.features.forEach((marker) => {
const id = marker.id; const id = marker.id
const crds = marker.geometry.coordinates; const crds = marker.geometry.coordinates
const content = marker.properties.content; const content = marker.properties.content
ui.addMarker(crds, { ui.addMarker(crds, {
id, id,
content, content,
icon: marker.icon, icon: marker.icon,
flyToMarker: config["flyToMarker"], flyToMarker: config.flyToMarker,
}); })
bounds.extend(crds); bounds.extend(crds)
}); })
ui.map.fitBounds(bounds, { ui.map.fitBounds(bounds, {
padding: 30, padding: 30,
}); })
ui.popup.on("close", (e) => { ui.popup.on('close', (e) => {
if (config["flyToBounds"]) { if (config.flyToBounds) {
ui.map.fitBounds(bounds, { ui.map.fitBounds(bounds, {
padding: 30, padding: 30,
}); })
} }
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE); $(e.currentTarget).trigger(Events.MAPPOPUPCLOSE)
}); })
} }
getMap() { getMap () {
const ui = this; const ui = this
return ui.map; return ui.map
} }
getPopup() { getPopup () {
const ui = this; const ui = this
return ui.popup; return ui.popup
} }
} }
return MapBoxDriver; return MapBoxDriver
})($); })($)
export default MapBoxDriver; export default MapBoxDriver

44
src/js/layout/index.js
View File

@ -1,26 +1,26 @@
import Events from "../_events"; import Events from '../_events'
const LayoutUI = ((W) => { const LayoutUI = ((W) => {
const NAME = "_layout"; const NAME = '_layout'
const D = document; const D = document
const BODY = D.body; const BODY = D.body
const init_fonts = () => { const init_fonts = () => {
console.log(`${NAME}: init_fonts`); console.log(`${NAME}: init_fonts`)
const css = D.createElement("link"); const css = D.createElement('link')
css.rel = "stylesheet"; css.rel = 'stylesheet'
css.type = "text/css"; css.type = 'text/css'
css.media = "all"; css.media = 'all'
css.href = css.href =
"https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap"; 'https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'
D.getElementsByTagName("head")[0].appendChild(css); D.getElementsByTagName('head')[0].appendChild(css)
}; }
const init_analytics = () => { const init_analytics = () => {
console.log(`${NAME}: init_analytics`); console.log(`${NAME}: init_analytics`)
/*google analytics */ /* google analytics */
/*(function(i, s, o, g, r, a, m) { /* (function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i['GoogleAnalyticsObject'] = r;
(i[r] = (i[r] =
i[r] || i[r] ||
@ -40,12 +40,12 @@ const LayoutUI = ((W) => {
'ga', 'ga',
); );
ga('create', 'UA-********-*', 'auto'); ga('create', 'UA-********-*', 'auto');
ga('send', 'pageview');*/ ga('send', 'pageview'); */
}; }
W.addEventListener(`${Events.LOADED}`, () => { W.addEventListener(`${Events.LOADED}`, () => {
init_fonts(); init_fonts()
//init_analytics(); // init_analytics();
}); })
})(window); })(window)
export default LayoutUI; export default LayoutUI

8
src/js/libs/log.js
View File

@ -1,9 +1,9 @@
var debug = process.env.NODE_ENV === "development" ? true : false; const debug = process.env.NODE_ENV === 'development'
const log = (msg) => { const log = (msg) => {
if (debug) { if (debug) {
console.log(msg); console.log(msg)
} }
}; }
module.exports = log; module.exports = log

60
src/js/main/css-screen-size.js
View File

@ -1,54 +1,54 @@
// browser tab visibility state detection // browser tab visibility state detection
import Events from "../_events"; import Events from '../_events'
import Consts from "../_consts"; import Consts from '../_consts'
export default ((W) => { export default ((W) => {
const NAME = "_main.css-screen-size"; const NAME = '_main.css-screen-size'
const D = document; const D = document
const BODY = D.body; const BODY = D.body
const detectCSSScreenSize = () => { const detectCSSScreenSize = () => {
const el = D.createElement("div"); const el = D.createElement('div')
el.className = "env-test"; el.className = 'env-test'
BODY.appendChild(el); BODY.appendChild(el)
const envs = [...Consts.ENVS].reverse(); const envs = [...Consts.ENVS].reverse()
let curEnv = envs.shift(); let curEnv = envs.shift()
BODY.classList.remove(...envs); BODY.classList.remove(...envs)
for (let i = 0; i < envs.length; ++i) { for (let i = 0; i < envs.length; ++i) {
const env = envs[i]; const env = envs[i]
el.classList.add(`d-${env}-none`); el.classList.add(`d-${env}-none`)
if (W.getComputedStyle(el).display === "none") { if (W.getComputedStyle(el).display === 'none') {
curEnv = env; curEnv = env
BODY.classList.add(`${curEnv}`); BODY.classList.add(`${curEnv}`)
break; break
} }
} }
let landscape = true; let landscape = true
if (W.innerWidth > W.innerHeight) { if (W.innerWidth > W.innerHeight) {
BODY.classList.add("landscape"); BODY.classList.add('landscape')
BODY.classList.remove("portrait"); BODY.classList.remove('portrait')
} else { } else {
landscape = false; landscape = false
BODY.classList.add("portrait"); BODY.classList.add('portrait')
BODY.classList.remove("landscape"); BODY.classList.remove('landscape')
} }
console.log( console.log(
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}` `${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
); )
BODY.removeChild(el); BODY.removeChild(el)
return curEnv; return curEnv
}; }
W.addEventListener(`${Events.LOADED}`, detectCSSScreenSize); W.addEventListener(`${Events.LOADED}`, detectCSSScreenSize)
W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize); W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize)
})(window); })(window)

20
src/js/main/funcs.js
View File

@ -1,4 +1,4 @@
const funcs = {}; const funcs = {}
/*! /*!
* Get all of an element's parent elements up the DOM tree * Get all of an element's parent elements up the DOM tree
@ -10,26 +10,26 @@ const funcs = {};
funcs.getParents = (elem, selector) => { funcs.getParents = (elem, selector) => {
// Setup parents array // Setup parents array
const parents = []; const parents = []
let el = elem; let el = elem
// Get matching parent elements // Get matching parent elements
while (el && el !== document) { while (el && el !== document) {
// If using a selector, add matching parents to array // If using a selector, add matching parents to array
// Otherwise, add all parents // Otherwise, add all parents
if (selector) { if (selector) {
if (el.matches(selector)) { if (el.matches(selector)) {
parents.push(el); parents.push(el)
} }
} else { } else {
parents.push(el); parents.push(el)
} }
// Jump to the next parent node // Jump to the next parent node
el = el.parentNode; el = el.parentNode
} }
return parents; return parents
}; }
module.exports = funcs; module.exports = funcs
module.exports.default = funcs; module.exports.default = funcs

12
src/js/main/index.js
View File

@ -1,7 +1,7 @@
import Events from '../_events'; import Events from '../_events'
import Consts from '../_consts'; import Consts from '../_consts'
import './visibility'; import './visibility'
import './touch'; import './touch'
import './css-screen-size'; import './css-screen-size'
import './main'; import './main'

25
src/js/main/loading-spinner.js
View File

@ -1,21 +1,22 @@
// browser tab visibility state detection // browser tab visibility state detection
import Events from "../_events"; import Events from '../_events'
const NAME = "_main.loading-spinner"; const NAME = '_main.loading-spinner'
const D = document; const D = document
const BODY = D.body; const BODY = D.body
const SPINNER = D.getElementById("PageLoading"); const SPINNER = D.getElementById('PageLoading')
class SpinnerUI { class SpinnerUI {
static show() { static show () {
console.log(`${NAME}: show`); console.log(`${NAME}: show`)
SPINNER.classList.remove("d-none"); SPINNER.classList.remove('d-none')
} }
static hide() {
console.log(`${NAME}: hide`); static hide () {
SPINNER.classList.add("d-none"); console.log(`${NAME}: hide`)
SPINNER.classList.add('d-none')
} }
} }
export default SpinnerUI; export default SpinnerUI

86
src/js/main/main.js
View File

@ -1,44 +1,44 @@
import Events from '../_events'; import Events from '../_events'
import Consts from '../_consts'; import Consts from '../_consts'
import SpinnerUI from './loading-spinner'; import SpinnerUI from './loading-spinner'
const MainUI = ((window) => { const MainUI = ((window) => {
const NAME = '_main'; const NAME = '_main'
const BODY = document.body; const BODY = document.body
console.info( console.info(
`%cUI Kit ${UINAME} ${UIVERSION}`, `%cUI Kit ${UINAME} ${UIVERSION}`,
'color:yellow;font-size:14px' 'color:yellow;font-size:14px'
); )
console.info( console.info(
`%c${UIMetaNAME} ${UIMetaVersion}`, `%c${UIMetaNAME} ${UIMetaVersion}`,
'color:yellow;font-size:12px' 'color:yellow;font-size:12px'
); )
console.info( console.info(
`%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`, `%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`,
'color:yellow;font-size:10px' 'color:yellow;font-size:10px'
); )
console.info(`%cENV: ${process.env.NODE_ENV}`, 'color:green;font-size:10px'); console.info(`%cENV: ${process.env.NODE_ENV}`, 'color:green;font-size:10px')
console.groupCollapsed('Events'); console.groupCollapsed('Events')
Object.keys(Events).forEach((k) => { Object.keys(Events).forEach((k) => {
console.info(`${k}: ${Events[k]}`); console.info(`${k}: ${Events[k]}`)
}); })
console.groupEnd('Events'); console.groupEnd('Events')
console.groupCollapsed('Consts'); console.groupCollapsed('Consts')
Object.keys(Consts).forEach((k) => { Object.keys(Consts).forEach((k) => {
console.info(`${k}: ${Consts[k]}`); console.info(`${k}: ${Consts[k]}`)
}); })
console.groupEnd('Events'); console.groupEnd('Events')
console.groupCollapsed('Init'); console.groupCollapsed('Init')
console.time('init'); console.time('init')
class MainUI { class MainUI {
// first time the website initialization // first time the website initialization
static init() { static init () {
const ui = this; const ui = this
// store landing page state // store landing page state
window.history.replaceState( window.history.replaceState(
@ -47,46 +47,46 @@ const MainUI = ((window) => {
}, },
document.title, document.title,
window.location.href window.location.href
); )
// //
ui.loaded(); ui.loaded()
} }
// init AJAX components // init AJAX components
static loaded() { static loaded () {
const ui = this; const ui = this
console.log(`${NAME}: loaded`); console.log(`${NAME}: loaded`)
} }
} }
const documentInit = () => { const documentInit = () => {
MainUI.init(); MainUI.init()
BODY.classList.add('loaded'); BODY.classList.add('loaded')
SpinnerUI.hide(); SpinnerUI.hide()
console.groupEnd('init'); console.groupEnd('init')
console.timeEnd('init'); console.timeEnd('init')
window.addEventListener(`${Events.LOADED}`, (event) => { window.addEventListener(`${Events.LOADED}`, (event) => {
window.dispatchEvent(new Event(Events.LODEDANDREADY)); window.dispatchEvent(new Event(Events.LODEDANDREADY))
}); })
}; }
if (document.readyState === 'loading') { // Loading hasn't finished yet if (document.readyState === 'loading') { // Loading hasn't finished yet
document.addEventListener(`${Events.DOMLOADED}`, documentInit); document.addEventListener(`${Events.DOMLOADED}`, documentInit)
}else { } else {
documentInit(); documentInit()
} }
window.addEventListener(`${Events.AJAX}`, () => { window.addEventListener(`${Events.AJAX}`, () => {
MainUI.loaded(); MainUI.loaded()
}); })
window.MainUI = MainUI; window.MainUI = MainUI
return MainUI; return MainUI
})(window); })(window)
export default MainUI; export default MainUI

76
src/js/main/touch.js
View File

@ -1,70 +1,70 @@
// touch/mouse detection // touch/mouse detection
import Events from "../_events"; import Events from '../_events'
import Consts from "../_consts"; import Consts from '../_consts'
export default ((W) => { export default ((W) => {
const NAME = "_main.touch"; const NAME = '_main.touch'
const D = document; const D = document
const BODY = D.body; const BODY = D.body
let prev_touch_event_name; let prev_touch_event_name
let touch_timeout; let touch_timeout
const SET_TOUCH_SCREEN = (bool, event_name) => { const SET_TOUCH_SCREEN = (bool, event_name) => {
if (touch_timeout || event_name === prev_touch_event_name) { if (touch_timeout || event_name === prev_touch_event_name) {
return; return
} }
if (bool) { if (bool) {
console.log(`${NAME}: Touch screen enabled`); console.log(`${NAME}: Touch screen enabled`)
BODY.classList.add("is-touch"); BODY.classList.add('is-touch')
BODY.classList.remove("is-mouse"); BODY.classList.remove('is-mouse')
W.dispatchEvent(new Event(Events.TOUCHENABLE)); W.dispatchEvent(new Event(Events.TOUCHENABLE))
} else { } else {
console.log(`${NAME}: Touch screen disabled`); console.log(`${NAME}: Touch screen disabled`)
BODY.classList.add("is-mouse"); BODY.classList.add('is-mouse')
BODY.classList.remove("is-touch"); BODY.classList.remove('is-touch')
W.dispatchEvent(new Event(Events.TOUCHDISABLED)); W.dispatchEvent(new Event(Events.TOUCHDISABLED))
} }
prev_touch_event_name = event_name; prev_touch_event_name = event_name
// prevent firing touch and mouse events together // prevent firing touch and mouse events together
if (!touch_timeout) { if (!touch_timeout) {
touch_timeout = setTimeout(() => { touch_timeout = setTimeout(() => {
clearTimeout(touch_timeout); clearTimeout(touch_timeout)
touch_timeout = null; touch_timeout = null
}, 500); }, 500)
}
} }
};
SET_TOUCH_SCREEN( SET_TOUCH_SCREEN(
"ontouchstart" in W || 'ontouchstart' in W ||
navigator.MaxTouchPoints > 0 || navigator.MaxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ||
W.matchMedia("(hover: none)").matches, W.matchMedia('(hover: none)').matches,
"init" 'init'
); )
D.addEventListener("touchend", (e) => { D.addEventListener('touchend', (e) => {
let touch = false; let touch = false
if (e.type !== "click") { if (e.type !== 'click') {
touch = true; touch = true
} }
SET_TOUCH_SCREEN(touch, "click-touchend"); SET_TOUCH_SCREEN(touch, 'click-touchend')
}); })
// disable touch on mouse events // disable touch on mouse events
D.addEventListener("click", (e) => { D.addEventListener('click', (e) => {
let touch = false; let touch = false
if (e.type !== "click") { if (e.type !== 'click') {
touch = true; touch = true
} }
SET_TOUCH_SCREEN(touch, "click-touchend"); SET_TOUCH_SCREEN(touch, 'click-touchend')
}); })
})(window); })(window)

34
src/js/main/visibility.js
View File

@ -1,34 +1,34 @@
// browser tab visibility state detection // browser tab visibility state detection
import Events from "../_events"; import Events from '../_events'
import Consts from "../_consts"; import Consts from '../_consts'
export default ((W) => { export default ((W) => {
const NAME = "_main.visibility"; const NAME = '_main.visibility'
const D = document; const D = document
const BODY = D.body; const BODY = D.body
// update visibility state // update visibility state
// get browser window visibility preferences // get browser window visibility preferences
// Opera 12.10, Firefox >=18, Chrome >=31, IE11 // Opera 12.10, Firefox >=18, Chrome >=31, IE11
const HiddenName = "hidden"; const HiddenName = 'hidden'
const VisibilityChangeEvent = "visibilitychange"; const VisibilityChangeEvent = 'visibilitychange'
D.addEventListener(VisibilityChangeEvent, () => { D.addEventListener(VisibilityChangeEvent, () => {
if (D.visibilityState === HiddenName) { if (D.visibilityState === HiddenName) {
console.log(`${NAME}: Tab: hidden`); console.log(`${NAME}: Tab: hidden`)
BODY.classList.add("is-hidden"); BODY.classList.add('is-hidden')
BODY.classList.remove("is-focused"); BODY.classList.remove('is-focused')
W.dispatchEvent(new Event(Events.TABHIDDEN)); W.dispatchEvent(new Event(Events.TABHIDDEN))
} else { } else {
console.log(`${NAME}: Tab: focused`); console.log(`${NAME}: Tab: focused`)
BODY.classList.add("is-focused"); BODY.classList.add('is-focused')
BODY.classList.remove("is-hidden"); BODY.classList.remove('is-hidden')
W.dispatchEvent(new Event(Events.TABFOCUSED)); W.dispatchEvent(new Event(Events.TABFOCUSED))
} }
}); })
})(window); })(window)

4
src/js/store/components/index.js
View File

@ -1,3 +1,3 @@
import PageControls from "./page-controls"; import PageControls from './page-controls'
export { PageControls }; export { PageControls }

6
src/js/store/components/page-controls.js
View File

@ -1,6 +1,6 @@
export default class PageControls { export default class PageControls {
constructor(store) { constructor (store) {
console.log("page-controls init"); console.log('page-controls init')
console.log(store); console.log(store)
} }
} }

8
src/js/store/configure.js
View File

@ -1,6 +1,6 @@
import { createStore } from "redux"; import { createStore } from 'redux'
import reducers from "./reducers"; import reducers from './reducers'
export default function configure() { export default function configure () {
return createStore(reducers); return createStore(reducers)
} }

4
src/js/store/connect.js
View File

@ -1,3 +1,3 @@
export function getItemList(store) { export function getItemList (store) {
return store.getState().items.all; return store.getState().items.all
} }

24
src/js/store/index.js
View File

@ -1,19 +1,19 @@
import configure from "./configure"; import configure from './configure'
const store = configure(); const store = configure()
/*import { /* import {
PageControls PageControls
} from './components'*/ } from './components' */
//const pageControls = new PageControls(store) // const pageControls = new PageControls(store)
store.subscribe(() => console.log(store.getState())); store.subscribe(() => console.log(store.getState()))
store.dispatch({ store.dispatch({
type: "counter/incremented", type: 'counter/incremented',
}); })
store.dispatch({ store.dispatch({
type: "counter/incremented", type: 'counter/incremented',
}); })
store.dispatch({ store.dispatch({
type: "counter/decremented", type: 'counter/decremented',
}); })

12
src/js/store/reducers/counter.js
View File

@ -1,19 +1,19 @@
export default function counter( export default function counter (
state = { state = {
value: 0, value: 0,
}, },
action action
) { ) {
switch (action.type) { switch (action.type) {
case "counter/incremented": case 'counter/incremented':
return { return {
value: state.value + 1, value: state.value + 1,
}; }
case "counter/decremented": case 'counter/decremented':
return { return {
value: state.value - 1, value: state.value - 1,
}; }
default: default:
return state; return state
} }
} }

6
src/js/store/reducers/index.js
View File

@ -1,7 +1,7 @@
import { combineReducers } from "redux"; import { combineReducers } from 'redux'
import counter from "./counter"; import counter from './counter'
export default combineReducers({ export default combineReducers({
counter, counter,
}); })

44
src/js/test-build.js
View File

@ -1,23 +1,23 @@
'use strict'; 'use strict'
import '../scss/test-build.scss'; import '../scss/test-build.scss'
import '@a2nt/meta-lightbox-js/src/js/test-build'; import '@a2nt/meta-lightbox-js/src/js/test-build'
import Events from './_events'; import Events from './_events'
import MainUI from './main'; import MainUI from './main'
/* /*
* AJAX functionality * AJAX functionality
*/ */
//import "./ajax/links"; // import "./ajax/links";
import './ajax/online'; import './ajax/online'
import './ajax/lazy-images'; import './ajax/lazy-images'
import './layout'; import './layout'
import './store'; import './store'
/*if (process.env.NODEENV === 'development') { /* if (process.env.NODEENV === 'development') {
// mocking service worker // mocking service worker
const regeneratorRuntime = require('regenerator-runtime'); const regeneratorRuntime = require('regenerator-runtime');
const { const {
@ -31,9 +31,9 @@ import './store';
}, },
}, },
}); });
}*/ } */
// caching service worker (set injectClient: false at webpack.config.serve.js) // caching service worker (set injectClient: false at webpack.config.serve.js)
/*if (process.env.NODEENV === 'development') {if ('serviceWorker' in navigator) { /* if (process.env.NODEENV === 'development') {if ('serviceWorker' in navigator) {
const baseHref = (document.getElementsByTagName('base')[0] || {}).href; const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
const version = (document.querySelector('meta[name="swversion"]') || {}) const version = (document.querySelector('meta[name="swversion"]') || {})
.content; .content;
@ -44,24 +44,24 @@ import './store';
console.log('SW: Registered'); console.log('SW: Registered');
}); });
} }
}}*/ }} */
function importAll(r) { function importAll (r) {
return r.keys().map(r); return r.keys().map(r)
} }
const images = importAll( const images = importAll(
require.context('../img/', false, /\.(png|jpe?g|svg)$/) require.context('../img/', false, /\.(png|jpe?g|svg)$/)
); )
const fontAwesome = importAll( const fontAwesome = importAll(
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/) require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/)
); )
if (module.hot) { if (module.hot) {
module.hot.accept('app.js', () => { module.hot.accept('app.js', () => {
console.log('Accepting the updated printMe module!'); console.log('Accepting the updated printMe module!')
}); })
module.hot.accept('app.scss', () => { module.hot.accept('app.scss', () => {
console.log('Accepting the updated printMe module!'); console.log('Accepting the updated printMe module!')
}); })
} }

92
src/js/types/sw.js
View File

@ -1,58 +1,58 @@
// caches polyfill because it is not added to native yet! // caches polyfill because it is not added to native yet!
var CACHE_NAME = `${UINAME}-sw`; const CACHE_NAME = `${UINAME}-sw`
var debug = process.env.NODE_ENV === "development" ? true : false; const debug = process.env.NODE_ENV === 'development'
var version = `${UIVERSION}-sw`; const version = `${UIVERSION}-sw`
var log = require("../libs/log"); const log = require('../libs/log')
var caches = require("../../../thirdparty/serviceworker-caches"); const caches = require('../../../thirdparty/serviceworker-caches')
if (debug) { if (debug) {
log("SW: debug is on"); log('SW: debug is on')
log(`SW: CACHE_NAME: ${CACHE_NAME}`); log(`SW: CACHE_NAME: ${CACHE_NAME}`)
//log(`SW: appDomain: ${appDomain}`); // log(`SW: appDomain: ${appDomain}`);
//log(`SW: lang: ${lang}`); // log(`SW: lang: ${lang}`);
} }
if (typeof CACHE_NAME !== "string") { if (typeof CACHE_NAME !== 'string') {
throw new Error("Cache Name cannot be empty"); throw new Error('Cache Name cannot be empty')
} }
self.addEventListener("fetch", (event) => { self.addEventListener('fetch', (event) => {
// skip non-get // skip non-get
if (event.request.method !== "GET") { if (event.request.method !== 'GET') {
return; return
} }
//Parse the url // Parse the url
const requestURL = new URL(event.request.url); const requestURL = new URL(event.request.url)
//Check for our own urls // Check for our own urls
/*if (requestURL.origin !== location.origin) { /* if (requestURL.origin !== location.origin) {
log('SW: skip external ' + event.request.url); log('SW: skip external ' + event.request.url);
return; return;
}*/ } */
//Skip admin url's // Skip admin url's
if ( if (
requestURL.pathname.indexOf("admin") >= 0 || requestURL.pathname.indexOf('admin') >= 0 ||
requestURL.pathname.indexOf("Security") >= 0 || requestURL.pathname.indexOf('Security') >= 0 ||
requestURL.pathname.indexOf("/dev") >= 0 requestURL.pathname.indexOf('/dev') >= 0
) { ) {
log(`SW: skip admin ${event.request.url}`); log(`SW: skip admin ${event.request.url}`)
return; return
} }
//Test for images // Test for images
/*if (/\.(jpg|jpeg|png|gif|webp)$/.test(requestURL.pathname)) { /* if (/\.(jpg|jpeg|png|gif|webp)$/.test(requestURL.pathname)) {
log('SW: skip image ' + event.request.url); log('SW: skip image ' + event.request.url);
//For now we skip images but change this later to maybe some caching and/or an offline fallback //For now we skip images but change this later to maybe some caching and/or an offline fallback
return; return;
}*/ } */
// Clone the request for fetch and cache // Clone the request for fetch and cache
// A request is a stream and can be consumed only once. // A request is a stream and can be consumed only once.
const fetchRequest = event.request.clone(), const fetchRequest = event.request.clone()
cacheRequest = event.request.clone(); const cacheRequest = event.request.clone()
// Respond with content from fetch or cache // Respond with content from fetch or cache
event.respondWith( event.respondWith(
@ -64,39 +64,39 @@ self.addEventListener("fetch", (event) => {
// Because we want the browser to consume the response, // Because we want the browser to consume the response,
// as well as cache to consume the response, we need to // as well as cache to consume the response, we need to
// clone it so we have 2 streams // clone it so we have 2 streams
const responseToCache = response.clone(); const responseToCache = response.clone()
// and update the cache // and update the cache
caches.open(CACHE_NAME).then((cache) => { caches.open(CACHE_NAME).then((cache) => {
// Clone the request again to use it // Clone the request again to use it
// as the key for our cache // as the key for our cache
const cacheSaveRequest = event.request.clone(); const cacheSaveRequest = event.request.clone()
cache.put(cacheSaveRequest, responseToCache); cache.put(cacheSaveRequest, responseToCache)
}); })
// Return the response stream to be consumed by browser // Return the response stream to be consumed by browser
return response; return response
}) })
// when fetch times out or fails // when fetch times out or fails
.catch((err) => { .catch((err) => {
log("SW: fetch failed"); log('SW: fetch failed')
// Return the promise which // Return the promise which
// resolves on a match in cache for the current request // resolves on a match in cache for the current request
// or rejects if no matches are found // or rejects if no matches are found
return caches.match(cacheRequest); return caches.match(cacheRequest)
}) })
); )
}); })
// Now we need to clean up resources in the previous versions // Now we need to clean up resources in the previous versions
// of Service Worker scripts // of Service Worker scripts
self.addEventListener("activate", (event) => { self.addEventListener('activate', (event) => {
log(`SW: activated: ${version}`); log(`SW: activated: ${version}`)
// Destroy the cache // Destroy the cache
event.waitUntil(caches.delete(CACHE_NAME)); event.waitUntil(caches.delete(CACHE_NAME))
}); })
self.addEventListener("install", (e) => { self.addEventListener('install', (e) => {
log(`SW: installing version: ${version}`); log(`SW: installing version: ${version}`)
}); })

188
src/js/ui/carousel.js
View File

@ -1,145 +1,145 @@
import Events from "../_events"; import Events from '../_events'
import Carousel from "bootstrap/js/src/carousel"; import Carousel from 'bootstrap/js/src/carousel'
const CarouselUI = ((window) => { const CarouselUI = ((window) => {
const NAME = "js-carousel"; const NAME = 'js-carousel'
const init = () => { const init = () => {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
document.querySelectorAll(`.${NAME}`).forEach((el, i) => { document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
const carousel = new Carousel(el, { const carousel = new Carousel(el, {
interval: el.dataset.bsInterval ? parseInt(el.dataset.bsInterval) : false, interval: el.dataset.bsInterval ? parseInt(el.dataset.bsInterval) : false,
}); })
el.ui = carousel; el.ui = carousel
const items = el.querySelectorAll(".carousel-item"); const items = el.querySelectorAll('.carousel-item')
const numberOfItems = parseInt(items.length); const numberOfItems = parseInt(items.length)
// create next/prev arrows // create next/prev arrows
if (el.dataset.bsArrows) { if (el.dataset.bsArrows) {
const next = document.createElement("button"); const next = document.createElement('button')
next.classList.add("carousel-control-next"); next.classList.add('carousel-control-next')
next.setAttribute("type", "button"); next.setAttribute('type', 'button')
next.setAttribute("aria-label", "Next Slide"); next.setAttribute('aria-label', 'Next Slide')
next.setAttribute("data-bs-target", el.getAttribute("id")); next.setAttribute('data-bs-target', el.getAttribute('id'))
next.setAttribute("data-bs-slide", "next"); next.setAttribute('data-bs-slide', 'next')
next.addEventListener("click", (e) => { next.addEventListener('click', (e) => {
carousel.next(); carousel.next()
}); })
next.innerHTML = next.innerHTML =
'<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>'; '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>'
el.appendChild(next); el.appendChild(next)
const prev = document.createElement("button"); const prev = document.createElement('button')
prev.setAttribute("type", "button"); prev.setAttribute('type', 'button')
prev.setAttribute("aria-label", "Previous Slide"); prev.setAttribute('aria-label', 'Previous Slide')
prev.classList.add("carousel-control-prev"); prev.classList.add('carousel-control-prev')
prev.setAttribute("data-bs-target", el.getAttribute("id")); prev.setAttribute('data-bs-target', el.getAttribute('id'))
prev.setAttribute("data-bs-slide", "prev"); prev.setAttribute('data-bs-slide', 'prev')
prev.addEventListener("click", (e) => { prev.addEventListener('click', (e) => {
carousel.prev(); carousel.prev()
}); })
prev.innerHTML = prev.innerHTML =
'<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>'; '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>'
el.appendChild(prev); el.appendChild(prev)
} }
if (el.dataset.bsIndicators) { if (el.dataset.bsIndicators) {
const indicators = document.createElement("div"); const indicators = document.createElement('div')
indicators.classList.add("carousel-indicators"); indicators.classList.add('carousel-indicators')
let i = 0; let i = 0
while (i < numberOfItems) { while (i < numberOfItems) {
const ind = document.createElement("button"); const ind = document.createElement('button')
ind.setAttribute("type", "button"); ind.setAttribute('type', 'button')
ind.setAttribute("aria-label", `Slide to #${i + 1}`); ind.setAttribute('aria-label', `Slide to #${i + 1}`)
if (i == 0) { if (i == 0) {
ind.classList.add("active"); ind.classList.add('active')
} }
ind.setAttribute("data-bs-target", el.getAttribute("id")); ind.setAttribute('data-bs-target', el.getAttribute('id'))
ind.setAttribute("data-bs-slide-to", i); ind.setAttribute('data-bs-slide-to', i)
ind.addEventListener("click", (e) => { ind.addEventListener('click', (e) => {
const target = e.target; const target = e.target
carousel.to(target.getAttribute("data-bs-slide-to")); carousel.to(target.getAttribute('data-bs-slide-to'))
indicators.querySelectorAll(".active").forEach((ind2) => { indicators.querySelectorAll('.active').forEach((ind2) => {
ind2.classList.remove("active"); ind2.classList.remove('active')
}); })
target.classList.add("active"); target.classList.add('active')
}); })
indicators.appendChild(ind); indicators.appendChild(ind)
i++; i++
} }
el.appendChild(indicators); el.appendChild(indicators)
el.addEventListener("slide.bs.carousel", (e) => { el.addEventListener('slide.bs.carousel', (e) => {
el.querySelectorAll(".carousel-indicators .active").forEach( el.querySelectorAll('.carousel-indicators .active').forEach(
(ind2) => { (ind2) => {
ind2.classList.remove("active"); ind2.classList.remove('active')
} }
); )
el.querySelectorAll( el.querySelectorAll(
`.carousel-indicators [data-bs-slide-to="${e.to}"]` `.carousel-indicators [data-bs-slide-to="${e.to}"]`
).forEach((ind2) => { ).forEach((ind2) => {
ind2.classList.add("active"); ind2.classList.add('active')
}); })
}); })
} }
if(el.classList.contains('carousel-multislide')){ if (el.classList.contains('carousel-multislide')) {
const calculate = new ResizeObserver((entries) => { const calculate = new ResizeObserver((entries) => {
const entry = entries[0]; const entry = entries[0]
const el = entry.target; const el = entry.target
const rect = entry.contentRect; const rect = entry.contentRect
const items = el.querySelectorAll('.carousel-item'); const items = el.querySelectorAll('.carousel-item')
const width = rect.width; const width = rect.width
const height = rect.height; const height = rect.height
const numToDisplay = Math.min(parseInt(el.dataset['length']), numberOfItems); const numToDisplay = Math.min(parseInt(el.dataset.length), numberOfItems)
const itemWidth = width / numToDisplay; const itemWidth = width / numToDisplay
el.dataset['itemWidth'] = itemWidth; el.dataset.itemWidth = itemWidth
el.dataset['numToDisplay'] = numToDisplay; el.dataset.numToDisplay = numToDisplay
el.querySelector('.carousel-inner').style.width = `${numberOfItems * itemWidth }px`; el.querySelector('.carousel-inner').style.width = `${numberOfItems * itemWidth}px`
items.forEach((el,i) => { items.forEach((el, i) => {
el.style.width = `${itemWidth }px`; el.style.width = `${itemWidth}px`
}); })
if(numberOfItems === numToDisplay) { if (numberOfItems === numToDisplay) {
el.classList.add('js-carousel-no-slide'); el.classList.add('js-carousel-no-slide')
carousel.pause(); carousel.pause()
} }
}); })
calculate.observe(el); calculate.observe(el)
el.addEventListener('slide.bs.carousel', (e) => { el.addEventListener('slide.bs.carousel', (e) => {
const inner = el.querySelector('.carousel-inner'); const inner = el.querySelector('.carousel-inner')
switch (e.direction) { switch (e.direction) {
case 'left': case 'left':
inner.style.left = `${-(e.to * el.dataset['itemWidth']) }px`; inner.style.left = `${-(e.to * el.dataset.itemWidth)}px`
break; break
case 'right': case 'right':
inner.style.left = `${-(e.to * el.dataset['itemWidth']) }px`; inner.style.left = `${-(e.to * el.dataset.itemWidth)}px`
break; break
} }
}); })
el.classList.add(`${NAME}-multislide-active`); el.classList.add(`${NAME}-multislide-active`)
}else{ } else {
if(items.length === 1) { if (items.length === 1) {
el.classList.add('js-carousel-no-slide'); el.classList.add('js-carousel-no-slide')
} }
} }
el.classList.add(`${NAME}-active`); el.classList.add(`${NAME}-active`)
}); })
}; }
window.addEventListener(`${Events.LODEDANDREADY}`, init); window.addEventListener(`${Events.LODEDANDREADY}`, init)
window.addEventListener(`${Events.AJAX}`, init); window.addEventListener(`${Events.AJAX}`, init)
})(window); })(window)
export default CarouselUI; export default CarouselUI

18
src/js/ui/datepicker.js
View File

@ -1,14 +1,14 @@
import Events from '../_events'; import Events from '../_events'
import Datepicker from 'vanillajs-datepicker/Datepicker'; import Datepicker from 'vanillajs-datepicker/Datepicker'
const init = () => { const init = () => {
document.querySelectorAll('.js-datepicker').forEach((el, i) => { document.querySelectorAll('.js-datepicker').forEach((el, i) => {
const picker = new Datepicker(el); const picker = new Datepicker(el)
el.ui = picker; el.ui = picker
}); })
}; }
window.addEventListener(`${Events.LODEDANDREADY}`, init); window.addEventListener(`${Events.LODEDANDREADY}`, init)
window.addEventListener(`${Events.AJAX}`, init); window.addEventListener(`${Events.AJAX}`, init)
export default Datepicker; export default Datepicker

97
src/js/ui/dropdown.js
View File

@ -1,4 +1,4 @@
import Events from '../_events'; import Events from '../_events'
/* /*
* Bootstrap compatible dropdowns without popover library * Bootstrap compatible dropdowns without popover library
@ -8,101 +8,100 @@ import Events from '../_events';
* *
*/ */
const DropdownHoverUI = ((window) => { const DropdownHoverUI = ((window) => {
const NAME = 'js-dropdown'; const NAME = 'js-dropdown'
const HideAll = () => { const HideAll = () => {
// hide others // hide others
document.querySelectorAll('.dropdown-menu').forEach((el, i) => { document.querySelectorAll('.dropdown-menu').forEach((el, i) => {
el.classList.remove('show'); el.classList.remove('show')
}); })
}; }
const Toggle = (el) => { const Toggle = (el) => {
HideAll(); HideAll()
el.querySelector('.dropdown-menu').classList.toggle('show'); el.querySelector('.dropdown-menu').classList.toggle('show')
}; }
const Show = (e) => { const Show = (e) => {
const el = e.currentTarget; const el = e.currentTarget
el.querySelector('.dropdown-menu').classList.add('show'); el.querySelector('.dropdown-menu').classList.add('show')
}; }
const Hide = (e) => { const Hide = (e) => {
const el = e.currentTarget; const el = e.currentTarget
el.querySelector('.dropdown-menu').classList.remove('show'); el.querySelector('.dropdown-menu').classList.remove('show')
}; }
const init = () => { const init = () => {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`); const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`)
const hoverableEls = document.querySelectorAll(`[data-bs-toggle="hover"]`); const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
const attachHoverEvents = (el) => { const attachHoverEvents = (el) => {
el.addEventListener('mouseover', Show, false); el.addEventListener('mouseover', Show, false)
el.addEventListener('mouseout', Hide, false); el.addEventListener('mouseout', Hide, false)
el.classList.add(`${NAME}-active`); el.classList.add(`${NAME}-active`)
}; }
const attachClickEvents = (el) => { const attachClickEvents = (el) => {
el.addEventListener('click', (e) => { el.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault()
const el = e.currentTarget; const el = e.currentTarget
const parent = el.closest('.dropdown'); const parent = el.closest('.dropdown')
Toggle(parent); Toggle(parent)
}); })
el.classList.add(`${NAME}-active`); el.classList.add(`${NAME}-active`)
}; }
// Hide all for outside clicks // Hide all for outside clicks
/*document.addEventListener('click', function (event) { /* document.addEventListener('click', function (event) {
const isClickInside = clickableEls.contains(event.target); const isClickInside = clickableEls.contains(event.target);
if (!isClickInside) { if (!isClickInside) {
HideAll(); HideAll();
} }
});*/ }); */
document.addEventListener('click', (event) => { document.addEventListener('click', (event) => {
let breakPath = false; let breakPath = false
const path = event.path || (event.composedPath && event.composedPath()); const path = event.path || (event.composedPath && event.composedPath())
if (!path) { if (!path) {
console.warn('Browser does not provide event path to hide dropdowns on outside click'); console.warn('Browser does not provide event path to hide dropdowns on outside click')
} }
path.forEach((el, i) => { path.forEach((el, i) => {
if (breakPath) { if (breakPath) {
return; return
} }
if (el === document) { if (el === document) {
HideAll(); HideAll()
} }
if (el.classList && el.classList.contains('dropdown-toggle')) { if (el.classList && el.classList.contains('dropdown-toggle')) {
breakPath = true; breakPath = true
return;
} }
}); })
}); })
hoverableEls.forEach((el, i) => { hoverableEls.forEach((el, i) => {
const parent = el.closest('.dropdown'); const parent = el.closest('.dropdown')
attachHoverEvents(parent); attachHoverEvents(parent)
}); })
clickableEls.forEach((el, i) => { clickableEls.forEach((el, i) => {
attachClickEvents(el); attachClickEvents(el)
}); })
}; }
window.addEventListener(`${Events.LODEDANDREADY}`, init); window.addEventListener(`${Events.LODEDANDREADY}`, init)
window.addEventListener(`${Events.AJAX}`, init); window.addEventListener(`${Events.AJAX}`, init)
})(window); })(window)
export default DropdownHoverUI; export default DropdownHoverUI

112
src/js/ui/instagram.feed.js
View File

@ -3,91 +3,91 @@
// Visitor network maybe temporary banned by Instagram because of too many requests from external websites // Visitor network maybe temporary banned by Instagram because of too many requests from external websites
// so it isn't very stable implementation. You should have something for the fall-back. // so it isn't very stable implementation. You should have something for the fall-back.
import Events from "../_events"; import Events from '../_events'
import Consts from "../_consts"; import Consts from '../_consts'
import InstagramFeed from "@jsanahuja/instagramfeed/src/InstagramFeed"; import InstagramFeed from '@jsanahuja/instagramfeed/src/InstagramFeed'
export default ((window) => { export default ((window) => {
const NAME = "js-instagramfeed"; const NAME = 'js-instagramfeed'
const BODY = document.body; const BODY = document.body
const ig_media_preview = (base64data) => { const ig_media_preview = (base64data) => {
const jpegtpl = const jpegtpl =
"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==", '/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA=='
t = atob(base64data), const t = atob(base64data)
p = t.slice(3).split(""), const p = t.slice(3).split('')
o = t const o = t
.substring(0, 3) .substring(0, 3)
.split("") .split('')
.map((e) => { .map((e) => {
return e.charCodeAt(0); return e.charCodeAt(0)
}), })
c = atob(jpegtpl).split(""); const c = atob(jpegtpl).split('')
c[162] = String.fromCharCode(o[1]); c[162] = String.fromCharCode(o[1])
c[160] = String.fromCharCode(o[2]); c[160] = String.fromCharCode(o[2])
return base64data return base64data
? `data:image/jpeg;base64,${btoa(c.concat(p).join(""))}` ? `data:image/jpeg;base64,${btoa(c.concat(p).join(''))}`
: null; : null
}; }
const loadFeed = () => { const loadFeed = () => {
console.log(`${NAME}: loading`); console.log(`${NAME}: loading`)
document.querySelectorAll(`.${NAME}`).forEach((el, i) => { document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
const ID = `InstagramFeed${i}`; const ID = `InstagramFeed${i}`
const dataset = el.dataset; const dataset = el.dataset
el.classList.add(`${NAME}-loading`); el.classList.add(`${NAME}-loading`)
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`); el.classList.remove(`${NAME}-loaded`, `${NAME}-error`)
new InstagramFeed({ new InstagramFeed({
username: dataset["username"], username: dataset.username,
tag: dataset["tag"] || null, tag: dataset.tag || null,
display_profile: dataset["display-profile"], display_profile: dataset['display-profile'],
display_biography: dataset["display-biography"], display_biography: dataset['display-biography'],
display_gallery: dataset["display-gallery"], display_gallery: dataset['display-gallery'],
display_captions: dataset["display-captions"], display_captions: dataset['display-captions'],
cache_time: dataset["cache_time"] || 360, cache_time: dataset.cache_time || 360,
items: dataset["items"] || 12, items: dataset.items || 12,
styling: false, styling: false,
lazy_load: true, lazy_load: true,
callback: (data) => { callback: (data) => {
console.log(`${NAME}: data response received`); console.log(`${NAME}: data response received`)
const list = document.createElement("div"); const list = document.createElement('div')
list.classList.add(`${NAME}-list`, "row"); list.classList.add(`${NAME}-list`, 'row')
el.appendChild(list); el.appendChild(list)
data["edge_owner_to_timeline_media"]["edges"].forEach((el, i) => { data.edge_owner_to_timeline_media.edges.forEach((el, i) => {
const item = el["node"]; const item = el.node
const preview = ig_media_preview(item["media_preview"]); const preview = ig_media_preview(item.media_preview)
list.innerHTML += list.innerHTML +=
`<div class="a col ${NAME}-item"` + `<div class="a col ${NAME}-item"` +
` data-gallery="${NAME}-${ID}" data-href="${item["display_url"]}" data-toggle="lightbox" data-force="image">` + ` data-gallery="${NAME}-${ID}" data-href="${item.display_url}" data-toggle="lightbox" data-force="image">` +
`<img id="${NAME}-${ID}-${item["id"]}" src="${item["display_url"]}" alt="${item["accessibility_caption"]}"` + `<img id="${NAME}-${ID}-${item.id}" src="${item.display_url}" alt="${item.accessibility_caption}"` +
`style="background:url(${preview})" />` + `style="background:url(${preview})" />` +
"</div>"; '</div>'
}); })
el.classList.remove(`${NAME}-loading`); el.classList.remove(`${NAME}-loading`)
el.classList.add(`${NAME}-loaded`); el.classList.add(`${NAME}-loaded`)
window.dispatchEvent(new Event("MetaWindowindow.initLinks")); window.dispatchEvent(new Event('MetaWindowindow.initLinks'))
window.dispatchEvent(new Event(`${NAME}.loaded`)); window.dispatchEvent(new Event(`${NAME}.loaded`))
}, },
on_error: (e) => { on_error: (e) => {
console.error(`${NAME}: ${e}`); console.error(`${NAME}: ${e}`)
el.classList.remove(`${NAME}-loading`); el.classList.remove(`${NAME}-loading`)
el.classList.add(`${NAME}-error`); el.classList.add(`${NAME}-error`)
window.dispatchEvent(new Event(`${NAME}.error`)); window.dispatchEvent(new Event(`${NAME}.error`))
}, },
}); })
}); })
}; }
window.addEventListener(`${Events.LODEDANDREADY}`, loadFeed); window.addEventListener(`${Events.LODEDANDREADY}`, loadFeed)
window.addEventListener(`${Events.AJAX}`, loadFeed); window.addEventListener(`${Events.AJAX}`, loadFeed)
})(window); })(window)

138
src/js/ui/map.api.js
View File

@ -1,120 +1,120 @@
"use strict"; 'use strict'
import Events from "../_events"; import Events from '../_events'
import Consts from "js/_consts"; import Consts from 'js/_consts'
const MapAPI = ((window) => { const MapAPI = ((window) => {
// Constants // Constants
const NAME = "js-mapapi"; const NAME = 'js-mapapi'
const MAP_DRIVER = Consts["MAP_DRIVER"]; const MAP_DRIVER = Consts.MAP_DRIVER
class MapAPI { class MapAPI {
// Constructor // Constructor
constructor(el) { constructor (el) {
const ui = this; const ui = this
const Drv = new MAP_DRIVER(); const Drv = new MAP_DRIVER()
const BODY = document.querySelector("body"); const BODY = document.querySelector('body')
const config = el.dataset; const config = el.dataset
config["center"] = [ config.center = [
config["lng"] ? config["lng"] : BODY.dataset["default-lng"], config.lng ? config.lng : BODY.dataset['default-lng'],
config["lat"] ? config["lat"] : BODY.dataset["default-lat"], config.lat ? config.lat : BODY.dataset['default-lat'],
]; ]
/*config['style'] = config['style'] ? /* config['style'] = config['style'] ?
jQuery.parseJSON(config['style']) : jQuery.parseJSON(config['style']) :
null; null;
config['font-family'] = $BODY.css('font-family');*/ config['font-family'] = $BODY.css('font-family'); */
if (!config["icon"]) { if (!config.icon) {
config["icon"] = '<i class="fas fa-map-marker-alt"></i>'; config.icon = '<i class="fas fa-map-marker-alt"></i>'
} }
console.log(`${NAME}: init ${Drv.getName()}...`); console.log(`${NAME}: init ${Drv.getName()}...`)
ui.drv = Drv; ui.drv = Drv
ui.el = el; ui.el = el
ui.config = config; ui.config = config
Drv.init(el, config); Drv.init(el, config)
el.addEventListener(Events.MAPAPILOADED, () => { el.addEventListener(Events.MAPAPILOADED, () => {
ui.addMarkers(); ui.addMarkers()
}); })
} }
// Public methods // Public methods
getMap() { getMap () {
return ui.map; return ui.map
} }
dispose() { dispose () {
const ui = this; const ui = this
ui.el = null; ui.el = null
ui.el.classList.remove(`${NAME}-active`); ui.el.classList.remove(`${NAME}-active`)
} }
addMarkers() { addMarkers () {
console.log(`${NAME}: addMarkers`); console.log(`${NAME}: addMarkers`)
const ui = this; const ui = this
const el = ui.el; const el = ui.el
const Drv = ui.drv; const Drv = ui.drv
const config = ui.config; const config = ui.config
ui.map = Drv.getMap(); ui.map = Drv.getMap()
if (config["geojson"]) { if (config.geojson) {
console.log(`${NAME}: setting up geocode data`); console.log(`${NAME}: setting up geocode data`)
Drv.addGeoJson(config); Drv.addGeoJson(config)
} else if (config["address"]) { } else if (config.address) {
console.log(config["address"]); console.log(config.address)
console.log(`${NAME}: setting up address marker`); console.log(`${NAME}: setting up address marker`)
Drv.geocode(config["address"], (results) => { Drv.geocode(config.address, (results) => {
console.log(results); console.log(results)
const lat = results[0].geometry.location.lat(); const lat = results[0].geometry.location.lat()
const lng = results[0].geometry.location.lng(); const lng = results[0].geometry.location.lng()
console.log( console.log(
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}` `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
); )
Drv.addMarker([lng, lat], config); Drv.addMarker([lng, lat], config)
ui.map.setCenter({ ui.map.setCenter({
lat, lat,
lng, lng,
}); })
}); })
} else if (config["lat"] && config["lng"]) { } else if (config.lat && config.lng) {
const lat = config["lat"]; const lat = config.lat
const lng = config["lng"]; const lng = config.lng
console.log( console.log(
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}` `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
); )
Drv.addMarker([lng, lat], config); Drv.addMarker([lng, lat], config)
} }
el.classList.add(`${NAME}-active`); el.classList.add(`${NAME}-active`)
el.dispatchEvent(new Event(Events.MAPLOADED)); el.dispatchEvent(new Event(Events.MAPLOADED))
console.log(`${NAME}: Map is loaded`); console.log(`${NAME}: Map is loaded`)
} }
} }
const init = () => { const init = () => {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
document.querySelectorAll(`.${NAME}`).forEach((el, i) => { document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
const map = new MapAPI(el); const map = new MapAPI(el)
}); })
}; }
// auto-apply // auto-apply
window.addEventListener(`${Events.LODEDANDREADY}`, init); window.addEventListener(`${Events.LODEDANDREADY}`, init)
window.addEventListener(`${Events.AJAX}`, init); window.addEventListener(`${Events.AJAX}`, init)
return MapAPI; return MapAPI
})(window); })(window)
export default MapAPI; export default MapAPI

304
src/js_old/_components/_ui.ajax.js
View File

@ -1,59 +1,59 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import Spinner from "./_ui.spinner"; import Spinner from './_ui.spinner'
const AjaxUI = (($) => { const AjaxUI = (($) => {
// Constants // Constants
const G = window; const G = window
const D = document; const D = document
const $Html = $("html"); const $Html = $('html')
const $Body = $("body"); const $Body = $('body')
const NAME = "jsAjaxUI"; const NAME = 'jsAjaxUI'
const DATA_KEY = NAME; const DATA_KEY = NAME
class AjaxUI { class AjaxUI {
// Constructor // Constructor
constructor(element) { constructor (element) {
this._element = element; this._element = element
const $element = $(this._element); const $element = $(this._element)
$element.addClass(`${NAME}-active`); $element.addClass(`${NAME}-active`)
$element.bind("click", function (e) { $element.bind('click', function (e) {
e.preventDefault(); e.preventDefault()
const $this = $(this); const $this = $(this)
$(".ajax").each(function () { $('.ajax').each(function () {
const $this = $(this); const $this = $(this)
$this.removeClass("active"); $this.removeClass('active')
$this.parents(".nav-item").removeClass("active"); $this.parents('.nav-item').removeClass('active')
}); })
$this.addClass("loading"); $this.addClass('loading')
AjaxUI.load($this.attr("href"), () => { AjaxUI.load($this.attr('href'), () => {
$this.removeClass("loading"); $this.removeClass('loading')
$this.parents(".nav-item").addClass("active"); $this.parents('.nav-item').addClass('active')
$this.addClass("active"); $this.addClass('active')
}); })
}); })
} }
// Public methods // Public methods
static load(url, callback) { static load (url, callback) {
// show spinner // show spinner
Spinner.show(() => { Spinner.show(() => {
$Body.removeClass("loaded"); $Body.removeClass('loaded')
}); })
// update document location // update document location
G.MainUI.updateLocation(url); G.MainUI.updateLocation(url)
const absoluteLocation = const absoluteLocation =
G.URLDetails["base"] + G.URLDetails["relative"].substring(1); G.URLDetails.base + G.URLDetails.relative.substring(1)
if (absoluteLocation !== G.location.href) { if (absoluteLocation !== G.location.href) {
G.history.pushState( G.history.pushState(
{ {
@ -62,257 +62,257 @@ const AjaxUI = (($) => {
}, },
document.title, document.title,
absoluteLocation absoluteLocation
); )
} }
$.ajax({ $.ajax({
sync: false, sync: false,
async: true, async: true,
url, url,
dataType: "json", dataType: 'json',
method: "GET", method: 'GET',
cache: false, cache: false,
error(jqXHR) { error (jqXHR) {
console.warn(`${NAME}: AJAX request failure: ${jqXHR.statusText}`); console.warn(`${NAME}: AJAX request failure: ${jqXHR.statusText}`)
G.location.href = url; G.location.href = url
// google analytics // google analytics
if (typeof G.ga === "function") { if (typeof G.ga === 'function') {
G.ga("send", "event", "error", "AJAX ERROR", jqXHR.statusText); G.ga('send', 'event', 'error', 'AJAX ERROR', jqXHR.statusText)
} }
}, },
success(data, status, jqXHR) { success (data, status, jqXHR) {
AjaxUI.process(data, jqXHR, callback); AjaxUI.process(data, jqXHR, callback)
// google analytics // google analytics
if (typeof G.ga === "function") { if (typeof G.ga === 'function') {
G.ga("set", { G.ga('set', {
page: G.URLDetails["relative"] + G.URLDetails["hash"], page: G.URLDetails.relative + G.URLDetails.hash,
title: jqXHR.getResponseHeader("X-Title"), title: jqXHR.getResponseHeader('X-Title'),
}); })
G.ga("send", "pageview"); G.ga('send', 'pageview')
} }
}, },
}); })
} }
static process(data, jqXHR, callback) { static process (data, jqXHR, callback) {
const css = jqXHR.getResponseHeader("X-Include-CSS").split(",") || []; const css = jqXHR.getResponseHeader('X-Include-CSS').split(',') || []
const js = jqXHR.getResponseHeader("X-Include-JS").split(",") || []; const js = jqXHR.getResponseHeader('X-Include-JS').split(',') || []
// Replace HTML regions // Replace HTML regions
if (typeof data.regions === "object") { if (typeof data.regions === 'object') {
for (const key in data.regions) { for (const key in data.regions) {
if (typeof data.regions[key] === "string") { if (typeof data.regions[key] === 'string') {
AjaxUI.replaceRegion(data.regions[key], key); AjaxUI.replaceRegion(data.regions[key], key)
} }
} }
} }
// remove already loaded scripts // remove already loaded scripts
$('link[type="text/css"]').each(function () { $('link[type="text/css"]').each(function () {
const i = css.indexOf($(this).attr("href")); const i = css.indexOf($(this).attr('href'))
if (i > -1) { if (i > -1) {
css.splice(i, 1); css.splice(i, 1)
} else if (!$Body.data("unload-blocked")) { } else if (!$Body.data('unload-blocked')) {
console.log(`${NAME}: Unloading | ${$(this).attr("href")}`); console.log(`${NAME}: Unloading | ${$(this).attr('href')}`)
$(this).remove(); $(this).remove()
} }
}); })
$('script[type="text/javascript"]').each(function () { $('script[type="text/javascript"]').each(function () {
const i = js.indexOf($(this).attr("src")); const i = js.indexOf($(this).attr('src'))
if (i > -1) { if (i > -1) {
js.splice(i, 1); js.splice(i, 1)
} else if (!$Body.data("unload-blocked")) { } else if (!$Body.data('unload-blocked')) {
console.log(`${NAME}: Unloading | ${$(this).attr("src")}`); console.log(`${NAME}: Unloading | ${$(this).attr('src')}`)
$(this).remove(); $(this).remove()
} }
}); })
// preload CSS // preload CSS
this.preload(css).then(() => { this.preload(css).then(() => {
const $head = $("head"); const $head = $('head')
css.forEach((el) => { css.forEach((el) => {
$head.append( $head.append(
`<link rel="stylesheet" type="text/css" href="${el}" />` `<link rel="stylesheet" type="text/css" href="${el}" />`
); )
}); })
// preload JS // preload JS
this.preload(js, "script").then(() => { this.preload(js, 'script').then(() => {
js.forEach((el) => { js.forEach((el) => {
$Body.append( $Body.append(
`<script type="text/javascript" charset="UTF-8" src="${el}"></script>` `<script type="text/javascript" charset="UTF-8" src="${el}"></script>`
); )
}); })
console.log(`${NAME}: New page is loaded!`); console.log(`${NAME}: New page is loaded!`)
// trigger events // trigger events
if (typeof data.events === "object") { if (typeof data.events === 'object') {
for (const eventName in data.events) { for (const eventName in data.events) {
$(D).trigger(eventName, [data.events[eventName]]); $(D).trigger(eventName, [data.events[eventName]])
} }
} }
if (typeof callback !== "undefined") { if (typeof callback !== 'undefined') {
callback(); callback()
} }
$(G).trigger(Events.AJAX); $(G).trigger(Events.AJAX)
}); })
}); })
} }
static preload(items, type = "text", cache = true, itemCallback = false) { static preload (items, type = 'text', cache = true, itemCallback = false) {
if (!items.length) { if (!items.length) {
return $.Deferred().resolve().promise(); return $.Deferred().resolve().promise()
} }
const dfds = []; const dfds = []
items.forEach((url, i) => { items.forEach((url, i) => {
const dfd = $.Deferred(); const dfd = $.Deferred()
$.ajax({ $.ajax({
dataType: type, dataType: type,
cache, cache,
url, url,
}).always(() => { }).always(() => {
dfd.resolve(); dfd.resolve()
if (itemCallback) { if (itemCallback) {
itemCallback(i, url); itemCallback(i, url)
} }
}); })
dfds.push(dfd); dfds.push(dfd)
}); })
// return a master promise object which will resolve when all the deferred objects have resolved // return a master promise object which will resolve when all the deferred objects have resolved
return $.when(...dfds); return $.when(...dfds)
} }
static replaceRegion(html, key) { static replaceRegion (html, key) {
const $region = $(`[data-ajax-region="${key}"]`); const $region = $(`[data-ajax-region="${key}"]`)
if ($region.length) { if ($region.length) {
$region.empty().append(html); $region.empty().append(html)
} else { } else {
console.warn(`${NAME}: Region returned without class or id!`); console.warn(`${NAME}: Region returned without class or id!`)
} }
} }
dispose() { dispose () {
const $element = $(this._element); const $element = $(this._element)
$element.removeClass(`${NAME}-active`); $element.removeClass(`${NAME}-active`)
$.removeData(this._element, DATA_KEY); $.removeData(this._element, DATA_KEY)
this._element = null; this._element = null
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to element // attach functionality to element
const $element = $(this); const $element = $(this)
let data = $element.data(DATA_KEY); let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new AjaxUI(this); data = new AjaxUI(this)
$element.data(DATA_KEY, data); $element.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = AjaxUI._jQueryInterface; $.fn[NAME] = AjaxUI._jQueryInterface
$.fn[NAME].Constructor = AjaxUI; $.fn[NAME].Constructor = AjaxUI
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return AjaxUI._jQueryInterface; return AjaxUI._jQueryInterface
}; }
// auto-apply // auto-apply
$(".ajax").ready(() => { $('.ajax').ready(() => {
$(".ajax").jsAjaxUI(); $('.ajax').jsAjaxUI()
}); })
// AJAX update browser title // AJAX update browser title
$(D).on("layoutRefresh", (e, data) => { $(D).on('layoutRefresh', (e, data) => {
D.title = data.Title; D.title = data.Title
$Html.attr("class", ""); $Html.attr('class', '')
if (data.ClassName) { if (data.ClassName) {
$Html.addClass(data.ClassName); $Html.addClass(data.ClassName)
} }
//data.Link = (data.Link === '/home/') ? '/' : data.Link; // data.Link = (data.Link === '/home/') ? '/' : data.Link;
}); })
// Back/Forward functionality // Back/Forward functionality
G.onpopstate = function (event) { G.onpopstate = function (event) {
const $existingLink = $(`a[href^="${D.location}"]`); const $existingLink = $(`a[href^="${D.location}"]`)
if (event.state !== null && event.state.ajax) { if (event.state !== null && event.state.ajax) {
console.log(`${NAME}: GOBACK (AJAX state)`); console.log(`${NAME}: GOBACK (AJAX state)`)
AjaxUI.load(event.state.page); AjaxUI.load(event.state.page)
} else if ($existingLink.length && $existingLink.hasClass("ajax")) { } else if ($existingLink.length && $existingLink.hasClass('ajax')) {
console.log(`${NAME}: GOBACK (AJAX link)`); console.log(`${NAME}: GOBACK (AJAX link)`)
$existingLink.trigger("click"); $existingLink.trigger('click')
} else if (D.location.href !== G.location.href) { } else if (D.location.href !== G.location.href) {
console.log(`${NAME}: GOBACK (HTTP)`); console.log(`${NAME}: GOBACK (HTTP)`)
G.location.href = D.location; G.location.href = D.location
}
} }
};
// manage AJAX requests // manage AJAX requests
$.ajaxPrefilter((options, originalOptions, jqXHR) => { $.ajaxPrefilter((options, originalOptions, jqXHR) => {
jqXHR.opts = options; jqXHR.opts = options
$.xhrPool.requests[jqXHR.opts.url] = jqXHR; $.xhrPool.requests[jqXHR.opts.url] = jqXHR
}); })
$.xhrPool = { $.xhrPool = {
requests: {}, requests: {},
paused: false, paused: false,
pauseAll: () => { pauseAll: () => {
$.xhrPool.paused = true; $.xhrPool.paused = true
/*for (let url in $.xhrPool.requests) { /* for (let url in $.xhrPool.requests) {
const jqXHR = $.xhrPool.requests[url]; const jqXHR = $.xhrPool.requests[url];
jqXHR.abort(); jqXHR.abort();
console.log(`${NAME}: AJAX request is paused (${jqXHR.opts.url})`); console.log(`${NAME}: AJAX request is paused (${jqXHR.opts.url})`);
}*/ } */
}, },
restoreAll: () => { restoreAll: () => {
for (const url in $.xhrPool.requests) { for (const url in $.xhrPool.requests) {
const jqXHR = $.xhrPool.requests[url]; const jqXHR = $.xhrPool.requests[url]
$.ajax(jqXHR.opts); $.ajax(jqXHR.opts)
console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`); console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`)
} }
$.xhrPool.paused = false; $.xhrPool.paused = false
}, },
}; }
$.ajaxSetup({ $.ajaxSetup({
beforeSend: (jqXHR) => {}, // and connection to list beforeSend: (jqXHR) => {}, // and connection to list
complete: (jqXHR) => { complete: (jqXHR) => {
if (!$.xhrPool.paused) { if (!$.xhrPool.paused) {
//console.log(`${NAME}: AJAX request is done (${jqXHR.opts.url})`); // console.log(`${NAME}: AJAX request is done (${jqXHR.opts.url})`);
delete $.xhrPool.requests[jqXHR.opts.url]; delete $.xhrPool.requests[jqXHR.opts.url]
} }
}, },
}); })
// attach events // attach events
$Body.on(`${Events.OFFLINE}`, () => { $Body.on(`${Events.OFFLINE}`, () => {
$.xhrPool.pauseAll(); $.xhrPool.pauseAll()
}); })
$Body.on(`${Events.BACKONLINE}`, () => { $Body.on(`${Events.BACKONLINE}`, () => {
$.xhrPool.restoreAll(); $.xhrPool.restoreAll()
}); })
return AjaxUI; return AjaxUI
})($); })($)
export default AjaxUI; export default AjaxUI

124
src/js_old/_components/_ui.carousel.js
View File

@ -1,135 +1,135 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import "hammerjs/hammer"; import 'hammerjs/hammer'
import "jquery-hammerjs/jquery.hammer"; import 'jquery-hammerjs/jquery.hammer'
import Events from "../_events"; import Events from '../_events'
const CarouselUI = (($) => { const CarouselUI = (($) => {
// Constants // Constants
const NAME = "CarouselUI"; const NAME = 'CarouselUI'
class CarouselUI { class CarouselUI {
// Static methods // Static methods
static each(callback) { static each (callback) {
$(`js${NAME}, .js-carousel`).each((i, e) => { $(`js${NAME}, .js-carousel`).each((i, e) => {
callback(i, $(e)); callback(i, $(e))
}); })
} }
static init() { static init () {
this.dispose(); this.dispose()
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
this.each((i, e) => { this.each((i, e) => {
const $e = $(e), const $e = $(e)
id = `Carousel${i}`; const id = `Carousel${i}`
$e.attr("id", id); $e.attr('id', id)
$e.data("id", i); $e.data('id', i)
const $items = $(e).find(".carousel-item"), const $items = $(e).find('.carousel-item')
count = $items.length; const count = $items.length
if (!count) { if (!count) {
return; return
} }
// create carousel-controls // create carousel-controls
if ($e.data("indicators")) { if ($e.data('indicators')) {
const $indicators = $('<ol class="carousel-indicators"></ol>'); const $indicators = $('<ol class="carousel-indicators"></ol>')
$indicators.append( $indicators.append(
`<li data-target="#${id}" data-slide-to="0" class="active"></li>` `<li data-target="#${id}" data-slide-to="0" class="active"></li>`
); )
for (let i = 1; i < count; i++) { for (let i = 1; i < count; i++) {
$indicators.append( $indicators.append(
`<li data-target="#${id}" data-slide-to="${i}"></li>` `<li data-target="#${id}" data-slide-to="${i}"></li>`
); )
} }
$e.prepend($indicators); $e.prepend($indicators)
} }
// create arrows // create arrows
if ($e.data("arrows")) { if ($e.data('arrows')) {
$e.prepend( $e.prepend(
`<i class="carousel-control-prev" data-target="#${id}" role="button" data-slide="prev"><i class="fas fa-chevron-left" aria-hidden="true"></i><i class="sr-only">Previous</i></i>` `<i class="carousel-control-prev" data-target="#${id}" role="button" data-slide="prev"><i class="fas fa-chevron-left" aria-hidden="true"></i><i class="sr-only">Previous</i></i>`
); )
$e.prepend( $e.prepend(
`<i class="carousel-control-next" data-target="#${id}" role="button" data-slide="next"><i class="fas fa-chevron-right" aria-hidden="true"></i><i class="sr-only">Next</i></i>` `<i class="carousel-control-next" data-target="#${id}" role="button" data-slide="next"><i class="fas fa-chevron-right" aria-hidden="true"></i><i class="sr-only">Next</i></i>`
); )
} }
// init carousel // init carousel
$e.carousel(); $e.carousel()
const $youtubeSlides = $e.find( const $youtubeSlides = $e.find(
'iframe[src^="https://www.youtube.com/embed/"]' 'iframe[src^="https://www.youtube.com/embed/"]'
); )
$e.on("slide.bs.carousel", () => { $e.on('slide.bs.carousel', () => {
if ($youtubeSlides.length) { if ($youtubeSlides.length) {
$youtubeSlides.each((i, e) => { $youtubeSlides.each((i, e) => {
const $e = $(e); const $e = $(e)
try { try {
$e.data( $e.data(
"player", 'player',
new YT.Player(e, { new YT.Player(e, {
events: { events: {
onReady: () => { onReady: () => {
$e.data("player").pauseVideo(); $e.data('player').pauseVideo()
}, },
}, },
}) })
); )
$e.data("player").pauseVideo(); $e.data('player').pauseVideo()
} catch (e) {} } catch (e) {}
}); })
} }
}); })
$e.find(".carousel-control-prev").on("click", (e) => { $e.find('.carousel-control-prev').on('click', (e) => {
e.preventDefault(); e.preventDefault()
$e.carousel("prev"); $e.carousel('prev')
}); })
$e.find(".carousel-control-next").on("click", (e) => { $e.find('.carousel-control-next').on('click', (e) => {
e.preventDefault(); e.preventDefault()
$e.carousel("next"); $e.carousel('next')
}); })
// init touch swipes // init touch swipes
$e.hammer().bind(Events.SWIPELEFT, (e) => { $e.hammer().bind(Events.SWIPELEFT, (e) => {
$(event.target).carousel("next"); $(event.target).carousel('next')
}); })
$e.hammer().bind(Events.SWIPERIGHT, (e) => { $e.hammer().bind(Events.SWIPERIGHT, (e) => {
$(event.target).carousel("prev"); $(event.target).carousel('prev')
}); })
/*$e.find('.carousel-item').hammer().bind('tap', (event) => { /* $e.find('.carousel-item').hammer().bind('tap', (event) => {
$(event.target).carousel('next'); $(event.target).carousel('next');
});*/ }); */
$e.addClass(`js${NAME}-active`); $e.addClass(`js${NAME}-active`)
$e.trigger(Events.CAROUSEL_READY); $e.trigger(Events.CAROUSEL_READY)
}); })
} }
static dispose() { static dispose () {
this.each((i, e) => { this.each((i, e) => {
$(e).carousel("dispose"); $(e).carousel('dispose')
}); })
} }
} }
$(window).on(`${Events.LODEDANDREADY}`, () => { $(window).on(`${Events.LODEDANDREADY}`, () => {
CarouselUI.init(); CarouselUI.init()
}); })
return CarouselUI; return CarouselUI
})($); })($)
export default CarouselUI; export default CarouselUI

32
src/js_old/_components/_ui.cookie.js
View File

@ -1,30 +1,30 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
const CookieUI = (($) => { const CookieUI = (($) => {
const D = document; const D = document
const W = window; const W = window
class CookieUI { class CookieUI {
static get(name) { static get (name) {
return D.cookie.split("; ").reduce((r, v) => { return D.cookie.split('; ').reduce((r, v) => {
const parts = v.split("="); const parts = v.split('=')
return parts[0] === name ? decodeURIComponent(parts[1]) : r; return parts[0] === name ? decodeURIComponent(parts[1]) : r
}, ""); }, '')
} }
static set(name, value, days = 7, path = "/") { static set (name, value, days = 7, path = '/') {
const expires = new Date(Date.now() + days * 864e5).toUTCString(); const expires = new Date(Date.now() + days * 864e5).toUTCString()
D.cookie = `${name}=${encodeURIComponent( D.cookie = `${name}=${encodeURIComponent(
value value
)}; expires=${expires}; path=${path}`; )}; expires=${expires}; path=${path}`
} }
} }
//W.CookieUI = new CookieUI(); // W.CookieUI = new CookieUI();
return CookieUI; return CookieUI
})($); })($)
export default CookieUI; export default CookieUI

74
src/js_old/_components/_ui.flyout.js
View File

@ -1,69 +1,69 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import CookieUI from "./_ui.cookie"; import CookieUI from './_ui.cookie'
const FlyoutUI = (($) => { const FlyoutUI = (($) => {
const W = window; const W = window
const D = document; const D = document
const $Body = $("body"); const $Body = $('body')
const NAME = "FlyoutUI"; const NAME = 'FlyoutUI'
const COOKIE = `${NAME}-hide`; const COOKIE = `${NAME}-hide`
const TIMEOUT = 2000; const TIMEOUT = 2000
class FlyoutUI { class FlyoutUI {
static init() { static init () {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
const ui = this; const ui = this
ui.$modal = $(`.flyout-${NAME}`); ui.$modal = $(`.flyout-${NAME}`)
if (!ui.$modal.length) { if (!ui.$modal.length) {
return false; return false
} }
const $close = ui.$modal.find(`.flyout-${NAME}__close`); const $close = ui.$modal.find(`.flyout-${NAME}__close`)
ui.$modal.data(NAME, ui); ui.$modal.data(NAME, ui)
if ($close.length) { if ($close.length) {
$close.on("click", () => { $close.on('click', () => {
ui.hide(); ui.hide()
}); })
} }
const hide = CookieUI.get(COOKIE); const hide = CookieUI.get(COOKIE)
if (!$close.length || !hide || hide !== "true") { if (!$close.length || !hide || hide !== 'true') {
setTimeout(() => { setTimeout(() => {
ui.show(); ui.show()
}, TIMEOUT); }, TIMEOUT)
} }
} }
static show(callback) { static show (callback) {
const ui = this; const ui = this
ui.$modal.addClass(`flyout-${NAME}__active`); ui.$modal.addClass(`flyout-${NAME}__active`)
} }
static hide(callback) { static hide (callback) {
const ui = this; const ui = this
CookieUI.set(COOKIE, "true", 1); CookieUI.set(COOKIE, 'true', 1)
ui.$modal.removeClass(`flyout-${NAME}__active`); ui.$modal.removeClass(`flyout-${NAME}__active`)
} }
} }
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
FlyoutUI.init(); FlyoutUI.init()
}); })
W.FlyoutUI = FlyoutUI; W.FlyoutUI = FlyoutUI
return FlyoutUI; return FlyoutUI
})($); })($)
export default FlyoutUI; export default FlyoutUI

170
src/js_old/_components/_ui.form.basics.js
View File

@ -1,145 +1,145 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import SpinnerUI from "./_ui.spinner"; import SpinnerUI from './_ui.spinner'
import FormFieldUI from "./_ui.form.fields"; import FormFieldUI from './_ui.form.fields'
const FormBasics = (($) => { const FormBasics = (($) => {
// Constants // Constants
const NAME = "jsFormBasics"; const NAME = 'jsFormBasics'
const DATA_KEY = NAME; const DATA_KEY = NAME
const $Html = $("html, body"); const $Html = $('html, body')
const W = window; const W = window
const D = document; const D = document
class FormBasics { class FormBasics {
constructor(el) { constructor (el) {
const ui = this; const ui = this
const $el = $(el); const $el = $(el)
ui._el = el; ui._el = el
ui.dispose(); ui.dispose()
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
$el.data(DATA_KEY, this); $el.data(DATA_KEY, this)
//$('[data-inputmask]').inputmask(); // $('[data-inputmask]').inputmask();
const $fields = $el.find(Events.FORM_FIELDS); const $fields = $el.find(Events.FORM_FIELDS)
// init fields ui // init fields ui
$fields.each((i, el) => { $fields.each((i, el) => {
// skip some fields here // skip some fields here
new FormFieldUI(el); new FormFieldUI(el)
}); })
$fields.each((e, el) => { $fields.each((e, el) => {
const $el = $(el); const $el = $(el)
if ($el.hasClass("required") || $el.attr("aria-required")) { if ($el.hasClass('required') || $el.attr('aria-required')) {
$el.closest(".field").addClass("required"); $el.closest('.field').addClass('required')
} }
}); })
const $radioOptions = $el.find('input[type="radio"]'); const $radioOptions = $el.find('input[type="radio"]')
$radioOptions.each((e, el) => { $radioOptions.each((e, el) => {
const $el = $(el); const $el = $(el)
if ($el.is(":checked")) { if ($el.is(':checked')) {
$el.parents(".radio").addClass("checked"); $el.parents('.radio').addClass('checked')
} }
}); })
$radioOptions.on("change", (e) => { $radioOptions.on('change', (e) => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
const $parent = $el.parents(".radio"); const $parent = $el.parents('.radio')
$parent.siblings(".radio").each((i, el) => { $parent.siblings('.radio').each((i, el) => {
const $el = $(el); const $el = $(el)
if (!$el.find("input").is(":checked")) { if (!$el.find('input').is(':checked')) {
$el.removeClass("checked"); $el.removeClass('checked')
} }
}); })
if ($el.is(":checked")) { if ($el.is(':checked')) {
$parent.addClass("checked"); $parent.addClass('checked')
} }
}); })
$el.on("submit", (e) => { $el.on('submit', (e) => {
setTimeout(() => { setTimeout(() => {
if (!$el.find(".error").length) { if (!$el.find('.error').length) {
SpinnerUI.show(); SpinnerUI.show()
} }
}, 100); }, 100)
}); })
$(".field.password .show-password").on("click", (e) => { $('.field.password .show-password').on('click', (e) => {
console.log(`${NAME}: .field.password .show-password (click)`); console.log(`${NAME}: .field.password .show-password (click)`)
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
const $field = $el.siblings("input"); const $field = $el.siblings('input')
const $icon = $el.find(".fas"); const $icon = $el.find('.fas')
const attr = $field.attr("type"); const attr = $field.attr('type')
if (attr === "password") { if (attr === 'password') {
$field.attr("type", "text"); $field.attr('type', 'text')
$icon.removeClass("fa-eye").addClass("fa-eye-slash"); $icon.removeClass('fa-eye').addClass('fa-eye-slash')
} else { } else {
$field.attr("type", "password"); $field.attr('type', 'password')
$icon.removeClass("fa-eye-slash").addClass("fa-eye"); $icon.removeClass('fa-eye-slash').addClass('fa-eye')
} }
}); })
$el.addClass(`${NAME}-active`); $el.addClass(`${NAME}-active`)
$el.trigger(Events.FORM_INIT_BASICS); $el.trigger(Events.FORM_INIT_BASICS)
} }
// Public methods // Public methods
dispose() { dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
const ui = this; const ui = this
const $el = $(ui._el); const $el = $(ui._el)
$.removeData(ui._el, DATA_KEY); $.removeData(ui._el, DATA_KEY)
ui._el = null; ui._el = null
$el.removeClass(`${NAME}-active`); $el.removeClass(`${NAME}-active`)
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(() => { return this.each(() => {
// attach functionality to el // attach functionality to el
const $el = $(this); const $el = $(this)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new FormBasics(this); data = new FormBasics(this)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = FormBasics._jQueryInterface; $.fn[NAME] = FormBasics._jQueryInterface
$.fn[NAME].Constructor = FormBasics; $.fn[NAME].Constructor = FormBasics
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return FormBasics._jQueryInterface; return FormBasics._jQueryInterface
}; }
const init = () => { const init = () => {
$("form").jsFormBasics(); $('form').jsFormBasics()
}; }
// auto-apply // auto-apply
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
init(); init()
}); })
return FormBasics; return FormBasics
})($); })($)
export default FormBasics; export default FormBasics

252
src/js_old/_components/_ui.form.croppie.js
View File

@ -1,19 +1,19 @@
'use strict'; 'use strict'
import $ from 'jquery'; import $ from 'jquery'
import Events from '../_events'; import Events from '../_events'
import SpinnerUI from './_ui.spinner'; import SpinnerUI from './_ui.spinner'
import 'croppie/croppie.js'; import 'croppie/croppie.js'
import 'exif-js/exif.js'; import 'exif-js/exif.js'
const CroppieUI = (($) => { const CroppieUI = (($) => {
const NAME = 'jsCroppieUI'; const NAME = 'jsCroppieUI'
const DATA_KEY = NAME; const DATA_KEY = NAME
const G = window; const G = window
const D = document; const D = document
const jqteOptions = { const jqteOptions = {
color: false, color: false,
@ -24,34 +24,34 @@ const CroppieUI = (($) => {
source: false, source: false,
sub: false, sub: false,
sup: false, sup: false,
}; }
class CroppieUI { class CroppieUI {
constructor(element) { constructor (element) {
const ui = this; const ui = this
const $el = $(element); const $el = $(element)
console.log(`${NAME}: init ...`); console.log(`${NAME}: init ...`)
ui.$el = $el; ui.$el = $el
$el.data(DATA_KEY, this); $el.data(DATA_KEY, this)
ui.input = $el.find('input[type="file"]'); ui.input = $el.find('input[type="file"]')
//ui.inputData = $('<input type="hidden" class="base64enc" name="' + ui.input.attr('name') + 'base64" />'); // ui.inputData = $('<input type="hidden" class="base64enc" name="' + ui.input.attr('name') + 'base64" />');
ui.width = ui.input.data('width'); ui.width = ui.input.data('width')
ui.height = ui.input.data('height'); ui.height = ui.input.data('height')
$el.append( $el.append(
'<div class="cropper-wrap"><div class="cropper-container"></div>' + '<div class="cropper-wrap"><div class="cropper-container"></div>' +
'<a href="#" class="btn-remove" style="display:none"><i class="fas fa-times"></i> Remove</a></div>' '<a href="#" class="btn-remove" style="display:none"><i class="fas fa-times"></i> Remove</a></div>'
); )
//$el.append(ui.inputData); // $el.append(ui.inputData);
ui.uploadCropWrap = $el.find('.cropper-wrap'); ui.uploadCropWrap = $el.find('.cropper-wrap')
ui.uploadCrop = ui.uploadCropWrap.find('.cropper-container'); ui.uploadCrop = ui.uploadCropWrap.find('.cropper-container')
const ratio = ui.width / (ui.uploadCrop.width() - 32); const ratio = ui.width / (ui.uploadCrop.width() - 32)
ui.uploadCrop.croppie({ ui.uploadCrop.croppie({
enableExif: true, enableExif: true,
enforceBoundary: false, enforceBoundary: false,
@ -59,70 +59,70 @@ const CroppieUI = (($) => {
width: ui.width / ratio, width: ui.width / ratio,
height: ui.height / ratio, height: ui.height / ratio,
}, },
}); })
ui.uploadCrop.hide(); ui.uploadCrop.hide()
ui.input.on('change', (e) => { ui.input.on('change', (e) => {
this.readFile(e.currentTarget); this.readFile(e.currentTarget)
}); })
ui.$btnRemove = $el.find('.btn-remove'); ui.$btnRemove = $el.find('.btn-remove')
ui.$btnRemove.on('click', (e) => { ui.$btnRemove.on('click', (e) => {
e.preventDefault(); e.preventDefault()
ui.uploadCrop.removeClass('ready'); ui.uploadCrop.removeClass('ready')
$el.find('.croppie-image').remove(); $el.find('.croppie-image').remove()
ui.$el.find('input[type="file"]').val(''); ui.$el.find('input[type="file"]').val('')
ui.$el.find('input[type="file"]').change(); ui.$el.find('input[type="file"]').change()
ui.uploadCropWrap.hide(); ui.uploadCropWrap.hide()
}); })
if (ui.$el.find('img.croppie-image').length) { if (ui.$el.find('img.croppie-image').length) {
ui.$btnRemove.show(); ui.$btnRemove.show()
} }
} }
readFile(input) { readFile (input) {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
const $form = $el.closest('form'); const $form = $el.closest('form')
if (input.files && input.files[0]) { if (input.files && input.files[0]) {
const reader = new FileReader(); const reader = new FileReader()
reader.onload = (e) => { reader.onload = (e) => {
ui.uploadCrop.addClass('ready'); ui.uploadCrop.addClass('ready')
ui.uploadCrop.croppie('bind', { ui.uploadCrop.croppie('bind', {
url: e.target.result, url: e.target.result,
}); })
ui.uploadCrop.show(); ui.uploadCrop.show()
ui.uploadCropWrap.show(); ui.uploadCropWrap.show()
ui.$btnRemove.show(); ui.$btnRemove.show()
};
reader.readAsDataURL(input.files[0]);
$form.off('submit');
$form.on('submit', (e) => {
console.log(`${NAME}: Processing submission ...`);
e.preventDefault();
if ($form.data('locked')) {
console.warn(`${NAME}: Form#${$form.attr('id')} is locked.`);
return false;
} }
$form.data('locked', true); reader.readAsDataURL(input.files[0])
SpinnerUI.show(); $form.off('submit')
$form.on('submit', (e) => {
console.log(`${NAME}: Processing submission ...`)
e.preventDefault()
if ($form.data('locked')) {
console.warn(`${NAME}: Form#${$form.attr('id')} is locked.`)
return false
}
$form.data('locked', true)
SpinnerUI.show()
if (!ui.uploadCrop.hasClass('ready')) { if (!ui.uploadCrop.hasClass('ready')) {
return true; return true
} }
ui.uploadCrop ui.uploadCrop
@ -135,17 +135,17 @@ const CroppieUI = (($) => {
format: 'png', format: 'png',
}) })
.then((blob) => { .then((blob) => {
const form = e.currentTarget; const form = e.currentTarget
const data = new FormData(form); const data = new FormData(form)
const name = $(input).attr('name'); const name = $(input).attr('name')
data.delete('BackURL'); data.delete('BackURL')
data.delete(name); data.delete(name)
data.append(name, blob, `${name}-image.png`); data.append(name, blob, `${name}-image.png`)
data.append('ajax', '1'); data.append('ajax', '1')
if ($(form).data('jsFormValidate') && !$(form).data('jsFormValidate').validate()) { if ($(form).data('jsFormValidate') && !$(form).data('jsFormValidate').validate()) {
return false; return false
} }
$.ajax({ $.ajax({
@ -155,112 +155,112 @@ const CroppieUI = (($) => {
contentType: false, contentType: false,
type: $(form).attr('method'), type: $(form).attr('method'),
success: function (data) { success: function (data) {
$form.data('locked', false); $form.data('locked', false)
let IS_JSON = false; let IS_JSON = false
let json = {}; let json = {}
try { try {
IS_JSON = true; IS_JSON = true
json = $.parseJSON(data); json = $.parseJSON(data)
} catch (e) { } catch (e) {
IS_JSON = false; IS_JSON = false
} }
if (IS_JSON) { if (IS_JSON) {
if (typeof json['status'] !== 'undefined') { if (typeof json.status !== 'undefined') {
if (json['status'] === 'success') { if (json.status === 'success') {
if (MainUI) { if (MainUI) {
MainUI.alert(json['message'], json['status']); MainUI.alert(json.message, json.status)
}else { } else {
window.location.reload(); window.location.reload()
} }
if (typeof json['link'] !== 'undefined') { if (typeof json.link !== 'undefined') {
console.log( console.log(
`${NAME}: Finished submission > JSON ... Redirecting to ${json['link']}.` `${NAME}: Finished submission > JSON ... Redirecting to ${json.link}.`
); )
setTimeout(() => { setTimeout(() => {
G.location = json['link']; G.location = json.link
}, 2000); }, 2000)
} else { } else {
console.warn( console.warn(
`${NAME}: Finished submission > JSON no redirect link.` `${NAME}: Finished submission > JSON no redirect link.`
); )
} }
} else if (json['status'] === 'error') { } else if (json.status === 'error') {
if (MainUI) { if (MainUI) {
MainUI.alert(json['message'], json['status']); MainUI.alert(json.message, json.status)
}else { } else {
window.location.reload(); window.location.reload()
} }
} }
} }
if (typeof json['form'] !== 'undefined') { if (typeof json.form !== 'undefined') {
console.log( console.log(
`${NAME}: Finished submission > JSON. Got new form response.` `${NAME}: Finished submission > JSON. Got new form response.`
); )
$(form).replaceWith(json['form']); $(form).replaceWith(json.form)
$(G).trigger(Events.AJAX); $(G).trigger(Events.AJAX)
} }
} else { } else {
console.log( console.log(
`${NAME}: Finished submission > DATA response.` `${NAME}: Finished submission > DATA response.`
); )
$(form).replaceWith(data); $(form).replaceWith(data)
$(G).trigger(Events.AJAX); $(G).trigger(Events.AJAX)
//G.location.reload(false); // G.location.reload(false);
} }
SpinnerUI.hide(); SpinnerUI.hide()
}, },
}); })
//ui.inputData.val(data); // ui.inputData.val(data);
}); })
}); })
} else { } else {
console.log( console.log(
`${NAME}: Sorry - your browser doesn't support the FileReader API.` `${NAME}: Sorry - your browser doesn't support the FileReader API.`
); )
} }
} }
static dispose() { static dispose () {
console.log(`${NAME}: destroying.`); console.log(`${NAME}: destroying.`)
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each((i, el) => { return this.each((i, el) => {
// attach functionality to element // attach functionality to element
const $el = $(el); const $el = $(el)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new CroppieUI(el); data = new CroppieUI(el)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = CroppieUI._jQueryInterface; $.fn[NAME] = CroppieUI._jQueryInterface
$.fn[NAME].Constructor = CroppieUI; $.fn[NAME].Constructor = CroppieUI
$.fn[NAME].noConflict = () => { $.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return CroppieUI._jQueryInterface; return CroppieUI._jQueryInterface
}; }
// auto-apply // auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
$('.field.croppie').jsCroppieUI(); $('.field.croppie').jsCroppieUI()
}); })
return CroppieUI; return CroppieUI
})($); })($)
export default CroppieUI; export default CroppieUI

112
src/js_old/_components/_ui.form.datetime.js
View File

@ -1,128 +1,128 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.js"; import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
import "bootstrap-timepicker/js/bootstrap-timepicker.js"; import 'bootstrap-timepicker/js/bootstrap-timepicker.js'
const DatetimeUI = (($) => { const DatetimeUI = (($) => {
// Constants // Constants
const W = window; const W = window
const D = document; const D = document
const $Body = $("body"); const $Body = $('body')
const NAME = "jsDatetimeUI"; const NAME = 'jsDatetimeUI'
const DATA_KEY = NAME; const DATA_KEY = NAME
const datepickerOptions = { const datepickerOptions = {
autoclose: true, autoclose: true,
startDate: 0, startDate: 0,
//todayBtn: true, // todayBtn: true,
todayHighlight: true, todayHighlight: true,
clearBtn: true, clearBtn: true,
}; }
class DatetimeUI { class DatetimeUI {
constructor(el) { constructor (el) {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
const ui = this; const ui = this
const $el = $(el); const $el = $(el)
ui._el = el; ui._el = el
// datepicker // datepicker
if ($el.hasClass("date") || $el.attr("type") === "date") { if ($el.hasClass('date') || $el.attr('type') === 'date') {
const defaultDate = const defaultDate =
$el.attr("name").toLowerCase().indexOf("end") !== -1 ? "+4d" : "+3d"; $el.attr('name').toLowerCase().indexOf('end') !== -1 ? '+4d' : '+3d'
$el.attr("readonly", "true"); $el.attr('readonly', 'true')
$el.datepicker( $el.datepicker(
$.extend( $.extend(
datepickerOptions, datepickerOptions,
{ {
defaultViewDate: defaultDate, defaultViewDate: defaultDate,
multidate: $el.data("multidate"), multidate: $el.data('multidate'),
}, },
$el.data() $el.data()
) )
); )
} }
// timepicker // timepicker
else if ($el.hasClass("time") || $el.attr("type") === "time") { else if ($el.hasClass('time') || $el.attr('type') === 'time') {
$el.attr("readonly", "true"); $el.attr('readonly', 'true')
$el $el
.timepicker( .timepicker(
$.extend( $.extend(
{ {
snapToStep: true, snapToStep: true,
icons: { icons: {
up: "fas fa-chevron-up", up: 'fas fa-chevron-up',
down: "fas fa-chevron-down", down: 'fas fa-chevron-down',
}, },
}, },
$el.data() $el.data()
) )
) )
.on("show.timepicker", (e) => { .on('show.timepicker', (e) => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
const $dropdown = $Body.find(".bootstrap-timepicker-widget"); const $dropdown = $Body.find('.bootstrap-timepicker-widget')
if (!$dropdown.find('[data-action="clear"]').length) { if (!$dropdown.find('[data-action="clear"]').length) {
$dropdown $dropdown
.find("tbody") .find('tbody')
.append( .append(
'<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>' '<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>'
); )
} }
const $clearBtn = $dropdown.find('[data-action="clear"]'); const $clearBtn = $dropdown.find('[data-action="clear"]')
$clearBtn.on("click", (e) => { $clearBtn.on('click', (e) => {
e.preventDefault(); e.preventDefault()
$el.timepicker("clear"); $el.timepicker('clear')
$el.timepicker("hideWidget"); $el.timepicker('hideWidget')
}); })
}); })
} }
} }
static dispose() { static dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to element // attach functionality to element
const $el = $(this); const $el = $(this)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new DatetimeUI(this); data = new DatetimeUI(this)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = DatetimeUI._jQueryInterface; $.fn[NAME] = DatetimeUI._jQueryInterface
$.fn[NAME].Constructor = DatetimeUI; $.fn[NAME].Constructor = DatetimeUI
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return DatetimeUI._jQueryInterface; return DatetimeUI._jQueryInterface
}; }
// auto-apply // auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
$( $(
'input.date, input.time,input[type="date"], input[type="time"]' 'input.date, input.time,input[type="date"], input[type="time"]'
).jsDatetimeUI(); ).jsDatetimeUI()
}); })
return DatetimeUI; return DatetimeUI
})($); })($)
export default DatetimeUI; export default DatetimeUI

194
src/js_old/_components/_ui.form.fields.js
View File

@ -1,87 +1,87 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
const FormFieldUI = (($) => { const FormFieldUI = (($) => {
// Constants // Constants
const NAME = "jsFormFieldUI"; const NAME = 'jsFormFieldUI'
const DATA_KEY = NAME; const DATA_KEY = NAME
const $Html = $("html, body"); const $Html = $('html, body')
class FormFieldUI { class FormFieldUI {
constructor(el) { constructor (el) {
const ui = this; const ui = this
ui.$el = $(el); ui.$el = $(el)
ui.shown = true; ui.shown = true
ui.$el.data(DATA_KEY, ui); ui.$el.data(DATA_KEY, ui)
//ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions'); // ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
ui.vals = { ui.vals = {
val: ui.$el.val(), val: ui.$el.val(),
checked: ui.$el.is(":checked"), checked: ui.$el.is(':checked'),
};
// bootstrap collapse integration
ui.$el.parents(".optionset").not(".field").removeClass("collapse");
ui.$collapse = ui.$el
.parents(".field.collapse")
.not(".composite")
.first();
if (ui.$collapse.length) {
ui.$el.removeClass("collapse");
ui.$collapse.on("show.bs.collapse", (e) => {
ui.show();
});
ui.$collapse.on("hidden.bs.collapse", (e) => {
ui.hide();
});
} }
ui.$el.addClass(`${NAME}-active`); // bootstrap collapse integration
ui.$el.parents('.optionset').not('.field').removeClass('collapse')
ui.$collapse = ui.$el
.parents('.field.collapse')
.not('.composite')
.first()
if (ui.$collapse.length) {
ui.$el.removeClass('collapse')
return ui; ui.$collapse.on('show.bs.collapse', (e) => {
ui.show()
})
ui.$collapse.on('hidden.bs.collapse', (e) => {
ui.hide()
})
}
ui.$el.addClass(`${NAME}-active`)
return ui
} }
// Public methods // Public methods
dispose() { dispose () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
$el.removeClass(`${NAME}-active`); $el.removeClass(`${NAME}-active`)
$.removeData($el[0], DATA_KEY); $.removeData($el[0], DATA_KEY)
} }
show() { show () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
ui.restore(); ui.restore()
ui.shown = true; ui.shown = true
/*if (ui.$collapse.length) { /* if (ui.$collapse.length) {
ui.$collapse.collapse('show'); ui.$collapse.collapse('show');
} }
if ($el.hasClass('collapse')) { if ($el.hasClass('collapse')) {
$el.collapse('show'); $el.collapse('show');
}*/ } */
$el.trigger(`shown.${NAME}`); $el.trigger(`shown.${NAME}`)
} }
hide() { hide () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
ui.wipe(); ui.wipe()
ui.shown = false; ui.shown = false
/*if (ui.$collapse.length) { /* if (ui.$collapse.length) {
ui.$collapse.collapse('hide'); ui.$collapse.collapse('hide');
} }
@ -89,80 +89,80 @@ const FormFieldUI = (($) => {
$el.collapse('hide'); $el.collapse('hide');
} }
$el.trigger('change');*/ $el.trigger('change'); */
$el.trigger(`hidden.${NAME}`); $el.trigger(`hidden.${NAME}`)
} }
wipe() { wipe () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
ui.vals = { ui.vals = {
name: $el.attr("name"), name: $el.attr('name'),
val: $el.val(), val: $el.val(),
checked: $el.is(":checked"), checked: $el.is(':checked'),
};
$el.val("");
$el.prop("checked", false);
} }
restore() { $el.val('')
const ui = this; $el.prop('checked', false)
const $el = ui.$el;
const checked = ui.vals["checked"];
$el.val(ui.vals["val"]);
$el.prop("checked", checked);
} }
addMessage(msg, type = null, scrollTo = true) { restore () {
const ui = this; const ui = this
const $field = ui.$el.closest(".field"); const $el = ui.$el
const checked = ui.vals.checked
$field.addClass("has-message"); $el.val(ui.vals.val)
$el.prop('checked', checked)
}
addMessage (msg, type = null, scrollTo = true) {
const ui = this
const $field = ui.$el.closest('.field')
$field.addClass('has-message')
if (msg) { if (msg) {
$field.append(`<div class="message alert ${type}">${msg}</div>`); $field.append(`<div class="message alert ${type}">${msg}</div>`)
} }
if (scrollTo) { if (scrollTo) {
const pos = $field.offset().top; const pos = $field.offset().top
$field.focus(); $field.focus()
$Html.scrollTop(pos - 100); $Html.scrollTop(pos - 100)
} }
} }
removeMessages() { removeMessages () {
const ui = this; const ui = this
const $field = ui.$el.closest(".field"); const $field = ui.$el.closest('.field')
$field.removeClass("has-message"); $field.removeClass('has-message')
$field.find(".message").remove(); $field.find('.message').remove()
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to el // attach functionality to el
const $el = $(this); const $el = $(this)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new FormFieldUI(this); data = new FormFieldUI(this)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = FormFieldUI._jQueryInterface; $.fn[NAME] = FormFieldUI._jQueryInterface
$.fn[NAME].Constructor = FormFieldUI; $.fn[NAME].Constructor = FormFieldUI
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return FormFieldUI._jQueryInterface; return FormFieldUI._jQueryInterface
}; }
return FormFieldUI; return FormFieldUI
})($); })($)
export default FormFieldUI; export default FormFieldUI

226
src/js_old/_components/_ui.form.fields.toggle.js
View File

@ -1,218 +1,216 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import FormBasics from "./_ui.form.basics"; import FormBasics from './_ui.form.basics'
const FormToggleUI = (($) => { const FormToggleUI = (($) => {
// Constants // Constants
const NAME = "jsFormToggleUI"; const NAME = 'jsFormToggleUI'
const DATA_KEY = NAME; const DATA_KEY = NAME
const W = window; const W = window
const $Html = $("html, body"); const $Html = $('html, body')
const FieldUI = "jsFormFieldUI"; const FieldUI = 'jsFormFieldUI'
class FormToggleUI { class FormToggleUI {
constructor($el) { constructor ($el) {
const ui = this; const ui = this
ui.$el = $el; ui.$el = $el
if (!ui.getCondition()) { if (!ui.getCondition()) {
console.warn(`${NAME}: no condition found`); console.warn(`${NAME}: no condition found`)
return; return
} }
ui.toggle(); ui.toggle()
ui.$el.on(`change shown.${FieldUI} hidden.${FieldUI}`, (e) => { ui.$el.on(`change shown.${FieldUI} hidden.${FieldUI}`, (e) => {
ui.toggle(); ui.toggle()
}); })
ui.$el.addClass(`${NAME}-active`); ui.$el.addClass(`${NAME}-active`)
ui.$el.data(DATA_KEY, ui); ui.$el.data(DATA_KEY, ui)
return ui; return ui
} }
getDataEl() { getDataEl () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
return $el.is('[type="radio"],[type="checkbox"]') && return $el.is('[type="radio"],[type="checkbox"]') &&
$el.parents(".optionset,.checkboxset").length $el.parents('.optionset,.checkboxset').length
? $el.parents(".optionset,.checkboxset") ? $el.parents('.optionset,.checkboxset')
: $el; : $el
} }
getCondition() { getCondition () {
const ui = this; const ui = this
return ui.getDataEl().data("value-toggle"); return ui.getDataEl().data('value-toggle')
} }
getCurrentVal() { getCurrentVal () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
if ($el.attr("type") === "checkbox") { if ($el.attr('type') === 'checkbox') {
if ($el.parents(".checkboxset").length && $el.is(":checked")) { if ($el.parents('.checkboxset').length && $el.is(':checked')) {
return $el.val(); return $el.val()
} }
return $el.is(":checked") ? true : false; return !!$el.is(':checked')
} }
if ($el.attr("type") === "radio") { if ($el.attr('type') === 'radio') {
return $Html.find(`[name="${$el.attr("name")}"]:checked`).val(); return $Html.find(`[name="${$el.attr('name')}"]:checked`).val()
} }
return $el.val(); return $el.val()
} }
getTrueTarget() { getTrueTarget () {
const ui = this; const ui = this
const $dataEl = ui.getDataEl(); const $dataEl = ui.getDataEl()
// compatibility params // compatibility params
const target = $dataEl.data("value-toggle-yes"); const target = $dataEl.data('value-toggle-yes')
if (!target || !target.length) { if (!target || !target.length) {
return ui.getElement($dataEl.data("target")); return ui.getElement($dataEl.data('target'))
} }
return ui.getElement(target); return ui.getElement(target)
} }
getFalseTarget() { getFalseTarget () {
const ui = this; const ui = this
const $dataEl = ui.getDataEl(); const $dataEl = ui.getDataEl()
// compatibility params // compatibility params
const target = $dataEl.data("value-toggle-no"); const target = $dataEl.data('value-toggle-no')
if (!target || !target.length) { if (!target || !target.length) {
return ui.getElement($dataEl.data("value-toggle-false")); return ui.getElement($dataEl.data('value-toggle-false'))
} }
return ui.getElement(target); return ui.getElement(target)
} }
getElement(target) { getElement (target) {
return target && target.length && $(target).length ? $(target) : false; return target && target.length && $(target).length ? $(target) : false
} }
toggle() { toggle () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
const val = ui.getCurrentVal(); const val = ui.getCurrentVal()
const $dataEl = ui.getDataEl(); const $dataEl = ui.getDataEl()
// conditional toggler // conditional toggler
const condition = ui.getCondition(); const condition = ui.getCondition()
if (!condition) { if (!condition) {
return; return
} }
// yes/no toggler // yes/no toggler
const yesNoVal = const yesNoVal =
(condition === true && val && val !== "" && val !== "0") || !!((condition === true && val && val !== '' && val !== '0') ||
condition === val condition === val)
? true
: false;
const $yesTarget = ui.getTrueTarget(); const $yesTarget = ui.getTrueTarget()
const $noTarget = ui.getFalseTarget(); const $noTarget = ui.getFalseTarget()
const elUI = $el.data(FieldUI); const elUI = $el.data(FieldUI)
if ((elUI && !elUI.shown) || typeof val === "undefined") { if ((elUI && !elUI.shown) || typeof val === 'undefined') {
ui.toggleElement($yesTarget, false); ui.toggleElement($yesTarget, false)
ui.toggleElement($noTarget, false); ui.toggleElement($noTarget, false)
return; return
} }
if (yesNoVal) { if (yesNoVal) {
ui.toggleElement($yesTarget, true); ui.toggleElement($yesTarget, true)
ui.toggleElement($noTarget, false); ui.toggleElement($noTarget, false)
} else { } else {
ui.toggleElement($yesTarget, false); ui.toggleElement($yesTarget, false)
ui.toggleElement($noTarget, true); ui.toggleElement($noTarget, true)
} }
} }
toggleElement($el, show) { toggleElement ($el, show) {
if (!$el.length) { if (!$el.length) {
return; return
} }
const ui = this; const ui = this
const action = show ? "show" : "hide"; const action = show ? 'show' : 'hide'
$el.filter("div.collapse").each((i, el) => { $el.filter('div.collapse').each((i, el) => {
const $el = $(el); const $el = $(el)
$el.collapse(action); $el.collapse(action)
}); })
$el.trigger(`${action}.${NAME}`); $el.trigger(`${action}.${NAME}`)
} }
dispose() { dispose () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
$el.removeClass(`${NAME}-active`); $el.removeClass(`${NAME}-active`)
$.removeData(this._el, DATA_KEY); $.removeData(this._el, DATA_KEY)
this._el = null; this._el = null
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each((i, el) => { return this.each((i, el) => {
// attach functionality to el // attach functionality to el
const $el = $(el); const $el = $(el)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new FormToggleUI($el); data = new FormToggleUI($el)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
static validate() { static validate () {
return $(Events.FORM_FIELDS).each((i, el) => { return $(Events.FORM_FIELDS).each((i, el) => {
const $el = $(el); const $el = $(el)
const name = $el.attr("name"); const name = $el.attr('name')
if ($(`[name="${name}"]`).length > 1) { if ($(`[name="${name}"]`).length > 1) {
console.warn( console.warn(
`${NAME}: Module malfunction duplicate "${name}" elements found` `${NAME}: Module malfunction duplicate "${name}" elements found`
); )
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = FormToggleUI._jQueryInterface; $.fn[NAME] = FormToggleUI._jQueryInterface
$.fn[NAME].Constructor = FormToggleUI; $.fn[NAME].Constructor = FormToggleUI
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return FormToggleUI._jQueryInterface; return FormToggleUI._jQueryInterface
}; }
// auto-apply // auto-apply
$(W).on(`${Events.LODEDANDREADY}`, () => { $(W).on(`${Events.LODEDANDREADY}`, () => {
//FormToggleUI.validate(); // FormToggleUI.validate();
$(Events.FORM_FIELDS).filter("[data-value-toggle]").jsFormToggleUI(); $(Events.FORM_FIELDS).filter('[data-value-toggle]').jsFormToggleUI()
$("[data-value-toggle]") $('[data-value-toggle]')
.not(Events.FORM_FIELDS) .not(Events.FORM_FIELDS)
.find(Events.FORM_FIELDS) .find(Events.FORM_FIELDS)
.jsFormToggleUI(); .jsFormToggleUI()
}); })
return FormToggleUI; return FormToggleUI
})($); })($)
export default FormToggleUI; export default FormToggleUI

84
src/js_old/_components/_ui.form.jqte.js
View File

@ -1,84 +1,84 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import Spinner from "../_components/_ui.spinner"; import Spinner from '../_components/_ui.spinner'
import FormValidateField from "./_ui.form.validate.field"; import FormValidateField from './_ui.form.validate.field'
import "../../thirdparty/jQuery-TE_v.1.4.0/jquery-te-1.4.0.css"; import '../../thirdparty/jQuery-TE_v.1.4.0/jquery-te-1.4.0.css'
import "../../thirdparty/jQuery-TE_v.1.4.0/uncompressed/jquery-te-1.4.0.js"; import '../../thirdparty/jQuery-TE_v.1.4.0/uncompressed/jquery-te-1.4.0.js'
const JqteUI = (($) => { const JqteUI = (($) => {
const NAME = "jsJqteUI"; const NAME = 'jsJqteUI'
const DATA_KEY = NAME; const DATA_KEY = NAME
const jqteOptions = { const jqteOptions = {
color: false, color: false,
fsize: false, fsize: false,
funit: "em", funit: 'em',
format: false, format: false,
rule: false, rule: false,
source: false, source: false,
sub: false, sub: false,
sup: false, sup: false,
}; }
class JqteUI { class JqteUI {
constructor(element) { constructor (element) {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
const ui = this; const ui = this
const $element = $(element); const $element = $(element)
const validationUI = $element.data("jsFormValidateField"); const validationUI = $element.data('jsFormValidateField')
ui._element = element; ui._element = element
$element.data(DATA_KEY, this); $element.data(DATA_KEY, this)
$element.jqte(jqteOptions); $element.jqte(jqteOptions)
// dynamic error control // dynamic error control
if (validationUI) { if (validationUI) {
$element $element
.parents(".jqte") .parents('.jqte')
.find(".jqte_editor") .find('.jqte_editor')
.on("change", (e) => { .on('change', (e) => {
validationUI.validate(); validationUI.validate()
}); })
} }
} }
static dispose() { static dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to element // attach functionality to element
const $element = $(this); const $element = $(this)
let data = $element.data(DATA_KEY); let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new JqteUI(this); data = new JqteUI(this)
$element.data(DATA_KEY, data); $element.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = JqteUI._jQueryInterface; $.fn[NAME] = JqteUI._jQueryInterface
$.fn[NAME].Constructor = JqteUI; $.fn[NAME].Constructor = JqteUI
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return JqteUI._jQueryInterface; return JqteUI._jQueryInterface
}; }
// auto-apply // auto-apply
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
$("textarea.jqte-field").jsJqteUI(); $('textarea.jqte-field').jsJqteUI()
}); })
return JqteUI; return JqteUI
})($); })($)
export default JqteUI; export default JqteUI

108
src/js_old/_components/_ui.form.select2.js
View File

@ -1,97 +1,97 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import select2 from "select2/dist/js/select2.js"; import select2 from 'select2/dist/js/select2.js'
import Events from "../_events"; import Events from '../_events'
const FormSelect2 = (($) => { const FormSelect2 = (($) => {
// Constants // Constants
const NAME = "jsFormSelect2"; const NAME = 'jsFormSelect2'
const DATA_KEY = NAME; const DATA_KEY = NAME
const $Html = $("html, body"); const $Html = $('html, body')
const W = window; const W = window
const D = document; const D = document
class FormSelect2 { class FormSelect2 {
constructor(el) { constructor (el) {
const ui = this; const ui = this
const $el = $(el); const $el = $(el)
ui._el = el; ui._el = el
ui.dispose(); ui.dispose()
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
$el.data(DATA_KEY, this); $el.data(DATA_KEY, this)
const $fields = $el.find(Events.FORM_FIELDS); const $fields = $el.find(Events.FORM_FIELDS)
const $selectFields = $el const $selectFields = $el
.find("select:not([readonly])") .find('select:not([readonly])')
.not(".no-select2"); .not('.no-select2')
$selectFields.each((i, el) => { $selectFields.each((i, el) => {
$(el).select2(); $(el).select2()
}); })
$el.addClass(`${NAME}-active`); $el.addClass(`${NAME}-active`)
$el.trigger(Events.FORM_INIT_BASICS); $el.trigger(Events.FORM_INIT_BASICS)
} }
// Public methods // Public methods
dispose() { dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
const ui = this; const ui = this
const $el = $(ui._el); const $el = $(ui._el)
const $selectFields = $el const $selectFields = $el
.find("select:not([readonly])") .find('select:not([readonly])')
.not(".no-select2"); .not('.no-select2')
$selectFields.each((i, el) => { $selectFields.each((i, el) => {
const $el = $(el); const $el = $(el)
if ($el.hasClass("select2-hidden-accessible")) { if ($el.hasClass('select2-hidden-accessible')) {
$el.select2("destroy"); $el.select2('destroy')
} }
}); })
$.removeData(ui._el, DATA_KEY); $.removeData(ui._el, DATA_KEY)
ui._el = null; ui._el = null
$el.removeClass(`${NAME}-active`); $el.removeClass(`${NAME}-active`)
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(() => { return this.each(() => {
// attach functionality to el // attach functionality to el
const $el = $(this); const $el = $(this)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new FormSelect2(this); data = new FormSelect2(this)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = FormSelect2._jQueryInterface; $.fn[NAME] = FormSelect2._jQueryInterface
$.fn[NAME].Constructor = FormSelect2; $.fn[NAME].Constructor = FormSelect2
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return FormSelect2._jQueryInterface; return FormSelect2._jQueryInterface
}; }
const init = () => { const init = () => {
$("form").jsFormSelect2(); $('form').jsFormSelect2()
}; }
// auto-apply // auto-apply
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
init(); init()
}); })
return FormSelect2; return FormSelect2
})($); })($)
export default FormSelect2; export default FormSelect2

238
src/js_old/_components/_ui.form.stepped.js
View File

@ -1,223 +1,223 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import LANG from "../lang/_en"; import LANG from '../lang/_en'
import FormValidateField from "./_ui.form.validate.field"; import FormValidateField from './_ui.form.validate.field'
import "../../scss/_components/_ui.form.stepped.scss"; import '../../scss/_components/_ui.form.stepped.scss'
const SteppedForm = (($) => { const SteppedForm = (($) => {
// Constants // Constants
const NAME = "jsSteppedForm"; const NAME = 'jsSteppedForm'
const DATA_KEY = NAME; const DATA_KEY = NAME
class SteppedForm { class SteppedForm {
constructor(element) { constructor (element) {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
const ui = this; const ui = this
const $element = $(element); const $element = $(element)
$element.data(DATA_KEY, this); $element.data(DATA_KEY, this)
if (!$element.find(".steps-counter").length) { if (!$element.find('.steps-counter').length) {
$element.prepend(LANG["en"][NAME]["STEPCOUNTER"]); $element.prepend(LANG.en[NAME].STEPCOUNTER)
} }
if (!$element.find(".steps-buttons").length) { if (!$element.find('.steps-buttons').length) {
$element.append(LANG["en"][NAME]["STEPBUTTONS"]); $element.append(LANG.en[NAME].STEPBUTTONS)
} }
ui._currentStepCounter = $element.find(".steps-counter .current-step"); ui._currentStepCounter = $element.find('.steps-counter .current-step')
ui._totalStepsCounter = $element.find(".steps-counter .total-steps"); ui._totalStepsCounter = $element.find('.steps-counter .total-steps')
ui._steps = $element.find(".step"); ui._steps = $element.find('.step')
ui._steps.each((i, el) => { ui._steps.each((i, el) => {
const $el = $(el); const $el = $(el)
if (!$el.data("step")) { if (!$el.data('step')) {
$el.data("step", i + 1); $el.data('step', i + 1)
$el.attr("data-step", i + 1); $el.attr('data-step', i + 1)
} }
}); })
ui._stepNext = $element.find(".step-next"); ui._stepNext = $element.find('.step-next')
ui._stepPrev = $element.find(".step-prev"); ui._stepPrev = $element.find('.step-prev')
ui._actions = $element.children(".btn-toolbar,.form-actions"); ui._actions = $element.children('.btn-toolbar,.form-actions')
ui._element = element; ui._element = element
ui._currentStep = 1; ui._currentStep = 1
ui._totalSteps = ui._steps.last().data("step") || ui._steps.length; ui._totalSteps = ui._steps.last().data('step') || ui._steps.length
ui._stepsOrder = []; ui._stepsOrder = []
ui._totalStepsCounter.text(ui._totalSteps); ui._totalStepsCounter.text(ui._totalSteps)
// check if one of the steps already has an error // check if one of the steps already has an error
const $hasError = ui._steps const $hasError = ui._steps
.find( .find(
".field.error,.field.holder-error,.field.holder-validation,.field.holder-info,.field.holder-warning,.field.holder-good" '.field.error,.field.holder-error,.field.holder-validation,.field.holder-info,.field.holder-warning,.field.holder-good'
) )
.first(); .first()
if ($hasError.length) { if ($hasError.length) {
const $modal = $element.parents(".modal"); const $modal = $element.parents('.modal')
// show modal // show modal
if ($modal.length && typeof $modal.modal !== "undefined") { if ($modal.length && typeof $modal.modal !== 'undefined') {
$modal.modal("show"); $modal.modal('show')
} }
ui._currentStep = ui._currentStep =
$hasError.parents(".step").data("step") || ui._currentStep; $hasError.parents('.step').data('step') || ui._currentStep
} }
// //
ui.step(`.step[data-step="${ui._currentStep}"]`); ui.step(`.step[data-step="${ui._currentStep}"]`)
ui._stepNext.on("click", (e) => { ui._stepNext.on('click', (e) => {
e.preventDefault(); e.preventDefault()
ui.next(); ui.next()
}); })
ui._stepPrev.on("click", (e) => { ui._stepPrev.on('click', (e) => {
e.preventDefault(); e.preventDefault()
ui.prev(); ui.prev()
}); })
$element.find(".step-toggle").on("click", (e) => { $element.find('.step-toggle').on('click', (e) => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
e.preventDefault(); e.preventDefault()
ui.step($el.data("target")); ui.step($el.data('target'))
}); })
$element.addClass(`${NAME}-active`); $element.addClass(`${NAME}-active`)
$element.trigger(Events.FORM_INIT_STEPPED); $element.trigger(Events.FORM_INIT_STEPPED)
} }
// Public methods // Public methods
dispose() { dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
const ui = this; const ui = this
const $element = $(ui._element); const $element = $(ui._element)
$element.removeClass(`${NAME}-active`); $element.removeClass(`${NAME}-active`)
$.removeData(ui._element, DATA_KEY); $.removeData(ui._element, DATA_KEY)
ui._element = null; ui._element = null
} }
next() { next () {
const ui = this; const ui = this
if (ui._currentStep >= ui._totalSteps) { if (ui._currentStep >= ui._totalSteps) {
return; return
} }
ui.step(`.step[data-step="${ui._currentStep + 1}"]`); ui.step(`.step[data-step="${ui._currentStep + 1}"]`)
} }
prev() { prev () {
const ui = this; const ui = this
if (ui._currentStep <= 1) { if (ui._currentStep <= 1) {
return; return
} }
ui.step(ui._stepsOrder[ui._currentStep - 1]); ui.step(ui._stepsOrder[ui._currentStep - 1])
} }
step(target) { step (target) {
const ui = this; const ui = this
const $element = $(ui._element); const $element = $(ui._element)
const $target = $element.find(target); const $target = $element.find(target)
const targetStep = parseInt($target.data("step")); const targetStep = parseInt($target.data('step'))
// validate current step // validate current step
let valid = true; let valid = true
if (targetStep > ui._currentStep) { if (targetStep > ui._currentStep) {
ui.currentStep() ui.currentStep()
.find("input,textarea,select") .find('input,textarea,select')
.each((i, el) => { .each((i, el) => {
const $el = $(el); const $el = $(el)
const fieldUI = $el.data("jsFormValidateField"); const fieldUI = $el.data('jsFormValidateField')
if (fieldUI && !fieldUI.validate()) { if (fieldUI && !fieldUI.validate()) {
valid = false; valid = false
} }
}); })
} }
if (!valid) { if (!valid) {
return false; return false
} }
// //
if (parseInt($target.data("step")) <= "1") { if (parseInt($target.data('step')) <= '1') {
ui._stepPrev.hide(); ui._stepPrev.hide()
$element.trigger(Events.FORM_STEPPED_FIRST_STEP); $element.trigger(Events.FORM_STEPPED_FIRST_STEP)
} else { } else {
ui._stepPrev.show(); ui._stepPrev.show()
} }
if (parseInt($target.data("step")) >= ui._totalSteps) { if (parseInt($target.data('step')) >= ui._totalSteps) {
ui._stepNext.hide(); ui._stepNext.hide()
ui._actions.show(); ui._actions.show()
$element.trigger(Events.FORM_STEPPED_LAST_STEP); $element.trigger(Events.FORM_STEPPED_LAST_STEP)
} else { } else {
ui._stepNext.show(); ui._stepNext.show()
ui._actions.hide(); ui._actions.hide()
} }
ui._currentStep = targetStep; ui._currentStep = targetStep
ui._stepsOrder[ui._currentStep] = $target; ui._stepsOrder[ui._currentStep] = $target
ui._steps.removeClass("active"); ui._steps.removeClass('active')
$target.addClass("active"); $target.addClass('active')
ui._currentStepCounter.text(ui._currentStep); ui._currentStepCounter.text(ui._currentStep)
$target.trigger(Events.FORM_STEPPED_NEW_STEP); $target.trigger(Events.FORM_STEPPED_NEW_STEP)
$element.trigger(Events.FORM_STEPPED_NEW_STEP); $element.trigger(Events.FORM_STEPPED_NEW_STEP)
} }
currentStep() { currentStep () {
const ui = this; const ui = this
const $element = $(ui._element); const $element = $(ui._element)
return $element.find(".step.active"); return $element.find('.step.active')
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to element // attach functionality to element
const $element = $(this); const $element = $(this)
let data = $element.data(DATA_KEY); let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new SteppedForm(this); data = new SteppedForm(this)
$element.data(DATA_KEY, data); $element.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = SteppedForm._jQueryInterface; $.fn[NAME] = SteppedForm._jQueryInterface
$.fn[NAME].Constructor = SteppedForm; $.fn[NAME].Constructor = SteppedForm
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return SteppedForm._jQueryInterface; return SteppedForm._jQueryInterface
}; }
// auto-apply // auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
$(".form-stepped").jsSteppedForm(); $('.form-stepped').jsSteppedForm()
}); })
return SteppedForm; return SteppedForm
})($); })($)
export default SteppedForm; export default SteppedForm

168
src/js_old/_components/_ui.form.storage.js
View File

@ -1,154 +1,154 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
const FormStorage = (($) => { const FormStorage = (($) => {
// Constants // Constants
const NAME = "jsFormStorage"; const NAME = 'jsFormStorage'
const DATA_KEY = NAME; const DATA_KEY = NAME
const STORAGE = window.localStorage; const STORAGE = window.localStorage
class FormStorage { class FormStorage {
constructor(element) { constructor (element) {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
const ui = this; const ui = this
const $element = $(element); const $element = $(element)
const $elements = $element.find("input, textarea, select"); const $elements = $element.find('input, textarea, select')
const setRangeValues = function (el) { const setRangeValues = function (el) {
const $el = $(el); const $el = $(el)
$el.siblings(".value").text($el.val()); $el.siblings('.value').text($el.val())
}; }
ui._element = element; ui._element = element
$element.data(DATA_KEY, this); $element.data(DATA_KEY, this)
$element.addClass(`${NAME}-active`); $element.addClass(`${NAME}-active`)
// restore form data from localStorage // restore form data from localStorage
$elements.each((i, el) => { $elements.each((i, el) => {
const $el = $(el); const $el = $(el)
const id = $el.attr("id"); const id = $el.attr('id')
const type = $el.attr("type"); const type = $el.attr('type')
const val = STORAGE.getItem(NAME + id); const val = STORAGE.getItem(NAME + id)
if (type === "file") { if (type === 'file') {
return true; return true
} }
if (id && val && type) { if (id && val && type) {
if (type && (type === "checkbox" || type === "radio")) { if (type && (type === 'checkbox' || type === 'radio')) {
$el.prop("checked", val); $el.prop('checked', val)
} else { } else {
$el.val(val); $el.val(val)
} }
} }
$el.trigger(Events.RESTORE_FIELD); $el.trigger(Events.RESTORE_FIELD)
}); })
// range fields // range fields
$('input[type="range"]').each((i, el) => { $('input[type="range"]').each((i, el) => {
setRangeValues(el); setRangeValues(el)
}); })
$element.trigger(Events.RESTORE_FIELD); $element.trigger(Events.RESTORE_FIELD)
$('input[type="range"]').on("change", (e) => { $('input[type="range"]').on('change', (e) => {
setRangeValues(e.currentTarget); setRangeValues(e.currentTarget)
}); })
// store form data into localStorage // store form data into localStorage
$elements.on("change", (e) => { $elements.on('change', (e) => {
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
const id = $el.attr("id"); const id = $el.attr('id')
const type = $el.attr("type"); const type = $el.attr('type')
// skip some elements // skip some elements
if ($el.hasClass("no-storage")) { if ($el.hasClass('no-storage')) {
return true; return true
} }
let val = $el.val(); let val = $el.val()
if (type && (type === "checkbox" || type === "radio")) { if (type && (type === 'checkbox' || type === 'radio')) {
val = !!$el.is(":checked"); val = !!$el.is(':checked')
} }
if (id && type && type !== "password") { if (id && type && type !== 'password') {
STORAGE.setItem(NAME + id, val); STORAGE.setItem(NAME + id, val)
} }
}); })
$element.on("submit", () => { $element.on('submit', () => {
$element.data(DATA_KEY).clear(); $element.data(DATA_KEY).clear()
}); })
$element $element
.find(".btn-toolbar,.form-actions") .find('.btn-toolbar,.form-actions')
.children('button,[type="submit"],[type="clear"]') .children('button,[type="submit"],[type="clear"]')
.on("click", () => { .on('click', () => {
$element.data(DATA_KEY).clear(); $element.data(DATA_KEY).clear()
}); })
$element.addClass(`${NAME}-active`); $element.addClass(`${NAME}-active`)
$element.trigger(Events.FORM_INIT_STORAGE); $element.trigger(Events.FORM_INIT_STORAGE)
} }
// Public methods // Public methods
dispose() { dispose () {
const $element = $(this._element); const $element = $(this._element)
$element.removeClass(`${NAME}-active`); $element.removeClass(`${NAME}-active`)
$.removeData(this._element, DATA_KEY); $.removeData(this._element, DATA_KEY)
this._element = null; this._element = null
} }
clear() { clear () {
STORAGE.clear(); STORAGE.clear()
} }
static _jQueryInterface() { static _jQueryInterface () {
if (typeof window.localStorage !== "undefined") { if (typeof window.localStorage !== 'undefined') {
return this.each(function () { return this.each(function () {
// attach functionality to element // attach functionality to element
const $element = $(this); const $element = $(this)
let data = $element.data(DATA_KEY); let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new FormStorage(this); data = new FormStorage(this)
$element.data(DATA_KEY, data); $element.data(DATA_KEY, data)
} }
}); })
} }
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = FormStorage._jQueryInterface; $.fn[NAME] = FormStorage._jQueryInterface
$.fn[NAME].Constructor = FormStorage; $.fn[NAME].Constructor = FormStorage
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return FormStorage._jQueryInterface; return FormStorage._jQueryInterface
}; }
// auto-apply // auto-apply
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
$("form").each((i, el) => { $('form').each((i, el) => {
const $el = $(el); const $el = $(el)
// skip some forms // skip some forms
if ($el.hasClass("no-storage")) { if ($el.hasClass('no-storage')) {
return true; return true
} }
$el.jsFormStorage(); $el.jsFormStorage()
}); })
}); })
return FormStorage; return FormStorage
})($); })($)
export default FormStorage; export default FormStorage

208
src/js_old/_components/_ui.form.validate.field.js
View File

@ -1,215 +1,215 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
const FormValidateField = (($) => { const FormValidateField = (($) => {
// Constants // Constants
const NAME = "jsFormValidateField"; const NAME = 'jsFormValidateField'
const DATA_KEY = NAME; const DATA_KEY = NAME
const $Body = $("body"); const $Body = $('body')
const FieldUI = "jsFormFieldUI"; const FieldUI = 'jsFormFieldUI'
class FormValidateField { class FormValidateField {
constructor(el) { constructor (el) {
const ui = this; const ui = this
const $el = $(el); const $el = $(el)
ui.$el = $el; ui.$el = $el
ui._actions = $el.parents("form").children(".btn-toolbar,.form-actions"); ui._actions = $el.parents('form').children('.btn-toolbar,.form-actions')
$el.data(DATA_KEY, this); $el.data(DATA_KEY, this)
// prevent browsers checks (will do it using JS) // prevent browsers checks (will do it using JS)
$el.attr("novalidate", "novalidate"); $el.attr('novalidate', 'novalidate')
$el.on("change focusout", (e) => { $el.on('change focusout', (e) => {
ui.validate(false); ui.validate(false)
}); })
$el.addClass(`${NAME}-active`); $el.addClass(`${NAME}-active`)
$el.trigger(Events.FORM_INIT_VALIDATE_FIELD); $el.trigger(Events.FORM_INIT_VALIDATE_FIELD)
} }
// Public methods // Public methods
dispose() { dispose () {
const $el = ui.$el; const $el = ui.$el
$el.removeClass(`${NAME}-active`); $el.removeClass(`${NAME}-active`)
$.removeData(ui.$el[0], DATA_KEY); $.removeData(ui.$el[0], DATA_KEY)
ui.$el = null; ui.$el = null
} }
validate(scrollTo = true) { validate (scrollTo = true) {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
const $field = $el.closest(".field"); const $field = $el.closest('.field')
const extraChecks = $el.data(`${NAME}-extra`); const extraChecks = $el.data(`${NAME}-extra`)
let valid = true; let valid = true
let msg = null; let msg = null
const val = $el.val(); const val = $el.val()
// browser checks // browser checks
if (!ui.$el[0].checkValidity()) { if (!ui.$el[0].checkValidity()) {
valid = false; valid = false
console.warn( console.warn(
`${NAME}: Browser check validity is failed #${$el.attr("id")}` `${NAME}: Browser check validity is failed #${$el.attr('id')}`
); )
} }
let unmaskedVal = val; let unmaskedVal = val
if (typeof $el.inputmask === "function") { if (typeof $el.inputmask === 'function') {
unmaskedVal = $el.inputmask("unmaskedvalue"); unmaskedVal = $el.inputmask('unmaskedvalue')
} }
// required // required
if ( if (
$el.hasClass("required") && $el.hasClass('required') &&
(!unmaskedVal.length || (!unmaskedVal.length ||
!unmaskedVal.trim().length || !unmaskedVal.trim().length ||
(ui.isHtml(val) && !$(unmaskedVal).text().length)) (ui.isHtml(val) && !$(unmaskedVal).text().length))
) { ) {
valid = false; valid = false
console.warn(`${NAME}: Required field is missing #${$el.attr("id")}`); console.warn(`${NAME}: Required field is missing #${$el.attr('id')}`)
} }
// validate URL // validate URL
if ( if (
$el.hasClass("url") && $el.hasClass('url') &&
unmaskedVal.length && unmaskedVal.length &&
!ui.valideURL(unmaskedVal) !ui.valideURL(unmaskedVal)
) { ) {
valid = false; valid = false
msg = msg =
"Invalid URL: URL must start with http:// or https://. For example: https://your-domain.com/bla-bla/?p1=b&p2=a#tag"; 'Invalid URL: URL must start with http:// or https://. For example: https://your-domain.com/bla-bla/?p1=b&p2=a#tag'
console.warn(`${NAME}: Wrong URL #${$el.attr("id")}`); console.warn(`${NAME}: Wrong URL #${$el.attr('id')}`)
} }
// maxlength // maxlength
const maxLength = $el.attr("maxlength"); const maxLength = $el.attr('maxlength')
if (unmaskedVal.length && maxLength && maxLength.length) { if (unmaskedVal.length && maxLength && maxLength.length) {
if (unmaskedVal.length > maxLength) { if (unmaskedVal.length > maxLength) {
valid = false; valid = false
msg = `The value is limited to ${maxLength} chars`; msg = `The value is limited to ${maxLength} chars`
console.warn(`${NAME}: Too long value #${$el.attr("id")}`); console.warn(`${NAME}: Too long value #${$el.attr('id')}`)
} }
} }
// minlength // minlength
const minLength = $el.attr("minlength"); const minLength = $el.attr('minlength')
if (unmaskedVal.length && minLength && minLength.length) { if (unmaskedVal.length && minLength && minLength.length) {
if (unmaskedVal.length < minLength) { if (unmaskedVal.length < minLength) {
valid = false; valid = false
msg = `The value should contain more than ${minLength} chars`; msg = `The value should contain more than ${minLength} chars`
console.warn(`${NAME}: Too short value #${$el.attr("id")}`); console.warn(`${NAME}: Too short value #${$el.attr('id')}`)
} }
} }
this.removeError(); this.removeError()
// extra checks // extra checks
if (extraChecks) { if (extraChecks) {
extraChecks.forEach((check) => { extraChecks.forEach((check) => {
const result = check($el); const result = check($el)
valid = valid && result; valid = valid && result
if (!result) { if (!result) {
console.log(check); console.log(check)
console.warn(`${NAME}: Extra check is failed #${$el.attr("id")}`); console.warn(`${NAME}: Extra check is failed #${$el.attr('id')}`)
} }
}); })
} }
if (valid) { if (valid) {
return true; return true
} }
this.setError(scrollTo, msg); this.setError(scrollTo, msg)
return false; return false
} }
isHtml(str) { isHtml (str) {
const doc = new DOMParser().parseFromString(str, "text/html"); const doc = new DOMParser().parseFromString(str, 'text/html')
return Array.from(doc.body.childNodes).some( return Array.from(doc.body.childNodes).some(
(node) => node.nodeType === 1 (node) => node.nodeType === 1
); )
} }
valideURL(str) { valideURL (str) {
let url; let url
try { try {
url = new URL(str); url = new URL(str)
} catch (_) { } catch (_) {
return false; return false
} }
return url.protocol === "http:" || url.protocol === "https:"; return url.protocol === 'http:' || url.protocol === 'https:'
} }
setError(scrollTo = true, msg = null) { setError (scrollTo = true, msg = null) {
const ui = this; const ui = this
const fieldUI = ui.$el.data(FieldUI); const fieldUI = ui.$el.data(FieldUI)
const $field = ui.$el.closest(".field"); const $field = ui.$el.closest('.field')
const bodyScroll = $Body.scrollTop(); const bodyScroll = $Body.scrollTop()
const pos = $field[0].getBoundingClientRect().top; //$field.offset().top; const pos = $field[0].getBoundingClientRect().top // $field.offset().top;
const rowCorrection = parseInt($field.css("font-size")) * 4; const rowCorrection = parseInt($field.css('font-size')) * 4
ui.removeError(); ui.removeError()
$field.addClass("error"); $field.addClass('error')
if (msg) { if (msg) {
fieldUI.addMessage(msg, "alert-error alert-danger", scrollTo); fieldUI.addMessage(msg, 'alert-error alert-danger', scrollTo)
} else if (pos && scrollTo) { } else if (pos && scrollTo) {
$field.focus(); $field.focus()
$Body.scrollTop(bodyScroll + pos - rowCorrection); $Body.scrollTop(bodyScroll + pos - rowCorrection)
} }
} }
removeError() { removeError () {
const ui = this; const ui = this
const fieldUI = ui.$el.data(FieldUI); const fieldUI = ui.$el.data(FieldUI)
const $field = ui.$el.closest(".field"); const $field = ui.$el.closest('.field')
$field.removeClass("error"); $field.removeClass('error')
$field.removeClass("holder-error"); $field.removeClass('holder-error')
$field.removeClass("holder-validation"); $field.removeClass('holder-validation')
$field.find(".alert-error").remove(); $field.find('.alert-error').remove()
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to el // attach functionality to el
const $el = $(this); const $el = $(this)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new FormValidateField(this); data = new FormValidateField(this)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = FormValidateField._jQueryInterface; $.fn[NAME] = FormValidateField._jQueryInterface
$.fn[NAME].Constructor = FormValidateField; $.fn[NAME].Constructor = FormValidateField
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return FormValidateField._jQueryInterface; return FormValidateField._jQueryInterface
}; }
return FormValidateField; return FormValidateField
})($); })($)
export default FormValidateField; export default FormValidateField

136
src/js_old/_components/_ui.form.validate.js
View File

@ -1,141 +1,141 @@
import $ from 'jquery'; import $ from 'jquery'
import Events from '../_events'; import Events from '../_events'
import FormBasics from './_ui.form.basics'; import FormBasics from './_ui.form.basics'
import FormValidateField from './_ui.form.validate.field'; import FormValidateField from './_ui.form.validate.field'
//import SpinnerUI from "./_ui.spinner"; // import SpinnerUI from "./_ui.spinner";
const FormValidate = (($) => { const FormValidate = (($) => {
// Constants // Constants
const NAME = 'jsFormValidate'; const NAME = 'jsFormValidate'
const DATA_KEY = NAME; const DATA_KEY = NAME
const $Html = $('html, body'); const $Html = $('html, body')
class FormValidate { class FormValidate {
constructor(element) { constructor (element) {
const ui = this; const ui = this
const $element = $(element); const $element = $(element)
const $fields = $element.find('input,textarea,select'); const $fields = $element.find('input,textarea,select')
ui._element = element; ui._element = element
ui.$element = $element; ui.$element = $element
$element.data(DATA_KEY, this); $element.data(DATA_KEY, this)
ui._fields = $fields; ui._fields = $fields
ui._stepped_form = $element.data('jsSteppedForm'); ui._stepped_form = $element.data('jsSteppedForm')
// prevent browsers checks (will do it using JS) // prevent browsers checks (will do it using JS)
$element.attr('novalidate', 'novalidate'); $element.attr('novalidate', 'novalidate')
$element.on(Events.FORM_INIT_STEPPED, () => { $element.on(Events.FORM_INIT_STEPPED, () => {
ui._stepped_form = $element.data('jsSteppedForm'); ui._stepped_form = $element.data('jsSteppedForm')
}); })
// init fields validation // init fields validation
$fields.each((i, el) => { $fields.each((i, el) => {
// skip some fields here // skip some fields here
if ($(el).attr('role') === 'combobox') { if ($(el).attr('role') === 'combobox') {
return; return
} }
new FormValidateField(el); new FormValidateField(el)
}); })
// check form // check form
$element.on('submit', (e) => { $element.on('submit', (e) => {
ui.validate(true, () => { ui.validate(true, () => {
e.preventDefault(); e.preventDefault()
// switch to step // switch to step
if (ui._stepped_form) { if (ui._stepped_form) {
const $el = $element.find('.error').first(); const $el = $element.find('.error').first()
if ($el.length) { if ($el.length) {
ui._stepped_form.step($el.parents('.step')); ui._stepped_form.step($el.parents('.step'))
} }
} }
$element.trigger(Events.FORM_VALIDATION_FAILED); $element.trigger(Events.FORM_VALIDATION_FAILED)
}); })
}); })
$element.addClass(`${NAME}-active`); $element.addClass(`${NAME}-active`)
$element.trigger(Events.FORM_INIT_VALIDATE); $element.trigger(Events.FORM_INIT_VALIDATE)
} }
// Public methods // Public methods
dispose() { dispose () {
const $element = $(this._element); const $element = $(this._element)
$element.removeClass(`${NAME}-active`); $element.removeClass(`${NAME}-active`)
$.removeData(this._element, DATA_KEY); $.removeData(this._element, DATA_KEY)
this._element = null; this._element = null
} }
validate(scrollTo = true, badCallback = false) { validate (scrollTo = true, badCallback = false) {
console.log(`${NAME}: checking the form ...`); console.log(`${NAME}: checking the form ...`)
const ui = this; const ui = this
let valid = true; let valid = true
ui._fields.filter(':visible').each((i, el) => { ui._fields.filter(':visible').each((i, el) => {
const $el = $(el); const $el = $(el)
const fieldUI = $el.data('jsFormValidateField'); const fieldUI = $el.data('jsFormValidateField')
if (fieldUI && !fieldUI.validate()) { if (fieldUI && !fieldUI.validate()) {
//SpinnerUI.hide(); // SpinnerUI.hide();
ui.$element.addClass('error'); ui.$element.addClass('error')
if (badCallback) { if (badCallback) {
badCallback(); badCallback()
} }
valid = false; valid = false
return false; return false
} }
}); })
return valid; return valid
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to element // attach functionality to element
const $element = $(this); const $element = $(this)
let data = $element.data(DATA_KEY); let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new FormValidate(this); data = new FormValidate(this)
$element.data(DATA_KEY, data); $element.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = FormValidate._jQueryInterface; $.fn[NAME] = FormValidate._jQueryInterface
$.fn[NAME].Constructor = FormValidate; $.fn[NAME].Constructor = FormValidate
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return FormValidate._jQueryInterface; return FormValidate._jQueryInterface
}; }
// auto-apply // auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
$('form').each((i, el) => { $('form').each((i, el) => {
const $el = $(el); const $el = $(el)
// skip some forms // skip some forms
if ($el.hasClass('no-validation')) { if ($el.hasClass('no-validation')) {
return true; return true
} }
$el.jsFormValidate(); $el.jsFormValidate()
}); })
}); })
return FormValidate; return FormValidate
})($); })($)
export default FormValidate; export default FormValidate

86
src/js_old/_components/_ui.header-footer.js
View File

@ -1,72 +1,72 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
const HeaderUI = (($) => { const HeaderUI = (($) => {
const D = document; const D = document
const W = window; const W = window
const $Body = $("html,body"); const $Body = $('html,body')
const NAME = "HeaderUI"; const NAME = 'HeaderUI'
const CLASSNAME = `js${NAME}`; const CLASSNAME = `js${NAME}`
class HeaderUI { class HeaderUI {
static init() { static init () {
const ui = this; const ui = this
ui.dispose(); ui.dispose()
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
const $header = $(`#Header,.js${NAME}`); const $header = $(`#Header,.js${NAME}`)
const updateHeader = () => { const updateHeader = () => {
const h = $header.height(); const h = $header.height()
const s = $Body.scrollTop(); const s = $Body.scrollTop()
if (s + 50 > h) { if (s + 50 > h) {
$Body.addClass("shrink"); $Body.addClass('shrink')
} else { } else {
$Body.removeClass("shrink"); $Body.removeClass('shrink')
}
} }
};
updateHeader(); updateHeader()
const updateFooter = (i, el) => { const updateFooter = (i, el) => {
const $el = $(el); const $el = $(el)
const footerHeight = $el.height(); const footerHeight = $el.height()
$el.css("height", footerHeight); $el.css('height', footerHeight)
$el.css("margin-top", -footerHeight); $el.css('margin-top', -footerHeight)
$el.siblings(".wrapper").css("padding-bottom", footerHeight); $el.siblings('.wrapper').css('padding-bottom', footerHeight)
};
$(".footer,.jsFooterUI").css("height", "auto");
setTimeout(() => {
$(".footer,.jsFooterUI").each(updateFooter);
}, 500);
} }
static dispose() { $('.footer,.jsFooterUI').css('height', 'auto')
console.log(`${NAME}: dispose`); setTimeout(() => {
$('.footer,.jsFooterUI').each(updateFooter)
}, 500)
}
$Body.removeClass("shrink"); static dispose () {
$(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr("css", ""); console.log(`${NAME}: dispose`)
$Body.removeClass('shrink')
$(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr('css', '')
} }
} }
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
HeaderUI.init(); HeaderUI.init()
}); })
// align event content // align event content
$(W).on(`${Events.RESIZE}`, () => { $(W).on(`${Events.RESIZE}`, () => {
setTimeout(() => { setTimeout(() => {
HeaderUI.init(); HeaderUI.init()
}, 200); }, 200)
}); })
W.HeaderUI = new HeaderUI(); W.HeaderUI = new HeaderUI()
return HeaderUI; return HeaderUI
})($); })($)
export default HeaderUI; export default HeaderUI

218
src/js_old/_components/_ui.hover.js
View File

@ -1,200 +1,198 @@
/* /*
* Conflicts with 'bootstrap/js/dist/dropdown' * Conflicts with 'bootstrap/js/dist/dropdown'
*/ */
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import "jquery-hoverintent/jquery.hoverIntent.js"; import 'jquery-hoverintent/jquery.hoverIntent.js'
import MainUI from "../_main"; import MainUI from '../_main'
const HoverUI = (($) => { const HoverUI = (($) => {
// Constants // Constants
const W = window; const W = window
const D = document; const D = document
const $Html = $("html"); const $Html = $('html')
const $Body = $("body"); const $Body = $('body')
const NAME = "jsHoverUI"; const NAME = 'jsHoverUI'
const DATA_KEY = NAME; const DATA_KEY = NAME
class HoverUI { class HoverUI {
// Constructor // Constructor
constructor(el) { constructor (el) {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
const ui = this; const ui = this
const $el = $(el); const $el = $(el)
if ( if (
$el.is( $el.is(
'[target="_blank"],.external,[data-toggle="lightbox"],[data-lightbox-gallery]' '[target="_blank"],.external,[data-toggle="lightbox"],[data-lightbox-gallery]'
) )
) { ) {
return true; return true
} }
ui.$el = $el; ui.$el = $el
// find parent // find parent
let $parent = $el.parents(".nav-item, .dropdown"); let $parent = $el.parents('.nav-item, .dropdown')
$parent = $parent && $parent.length ? $parent.first() : null; $parent = $parent && $parent.length ? $parent.first() : null
//$parent = $parent ? $parent : $el.parent(); // $parent = $parent ? $parent : $el.parent();
ui.$parent = $parent; ui.$parent = $parent
// find target // find target
let $target = $el.data("target"); let $target = $el.data('target')
$target = $target && $target.length ? $target : null; $target = $target && $target.length ? $target : null
$target = $target $target = $target || ($parent
? $target ? $parent.find('.dropdown-menu').first()
: $parent : null)
? $parent.find(".dropdown-menu").first()
: null;
if (!$target || !$target.length) { if (!$target || !$target.length) {
console.warn(`${NAME}: Missing target for:`); console.warn(`${NAME}: Missing target for:`)
console.warn($el); console.warn($el)
return; return
} }
ui.$target = $target; ui.$target = $target
const $triger = $parent ? $parent : $el; const $triger = $parent || $el
ui.$triger = $triger; ui.$triger = $triger
// integrate with dropdown-toggle // integrate with dropdown-toggle
$('[data-toggle="dropdown"]').on("click touch", (e) => { $('[data-toggle="dropdown"]').on('click touch', (e) => {
console.log(`${NAME}: dropdown click-touch`); console.log(`${NAME}: dropdown click-touch`)
ui.hide(); ui.hide()
}); })
if (!W.isTouch) { if (!W.isTouch) {
$triger.hoverIntent({ $triger.hoverIntent({
sensitivity: 10, sensitivity: 10,
interval: 50, interval: 50,
over: () => { over: () => {
ui.show(); ui.show()
}, },
out: () => { out: () => {
ui.hide(); ui.hide()
}, },
}); })
} }
$el.off("click touch"); $el.off('click touch')
$el.on("click touch", (e) => { $el.on('click touch', (e) => {
const size = MainUI.detectBootstrapScreenSize(); const size = MainUI.detectBootstrapScreenSize()
console.log(`${NAME}: click-touch size: ${size}`); console.log(`${NAME}: click-touch size: ${size}`)
if ( if (
size === "xs" || size === 'xs' ||
!$el.data("allow-click") || !$el.data('allow-click') ||
(W.IsTouchScreen && !$el.data("allow-touch-click")) (W.IsTouchScreen && !$el.data('allow-touch-click'))
) { ) {
console.log(`${NAME}: click-touch prevent click`); console.log(`${NAME}: click-touch prevent click`)
e.stopPropagation(); e.stopPropagation()
e.preventDefault(); e.preventDefault()
} }
if (ui.isShown()) { if (ui.isShown()) {
ui.hide(); ui.hide()
} else { } else {
ui.show(); ui.show()
} }
}); })
$el.data(NAME, ui); $el.data(NAME, ui)
$triger.addClass(`${NAME}-active`); $triger.addClass(`${NAME}-active`)
} }
isShown() { isShown () {
return this.$target.hasClass("show"); return this.$target.hasClass('show')
} }
show() { show () {
const ui = this; const ui = this
ui.$el ui.$el
.parents(".dropdown") .parents('.dropdown')
.not(".active") .not('.active')
.each((i, el) => { .each((i, el) => {
const $el = $(el); const $el = $(el)
$el.find(".dropdown").removeClass("show"); $el.find('.dropdown').removeClass('show')
$el.addClass("show"); $el.addClass('show')
}); })
ui.$target.addClass("show"); ui.$target.addClass('show')
} }
hide() { hide () {
const ui = this; const ui = this
const $el = ui.$target; const $el = ui.$target
$el.removeClass("show"); $el.removeClass('show')
$el.find(".dropdown-menu").removeClass("show"); $el.find('.dropdown-menu').removeClass('show')
$el.parent(".dropdown").removeClass("show"); $el.parent('.dropdown').removeClass('show')
} }
dispose() { dispose () {
const ui = this; const ui = this
const $el = ui.$el; const $el = ui.$el
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
ui.$triger.removeClass(`${NAME}-active`); ui.$triger.removeClass(`${NAME}-active`)
$.removeData($el, DATA_KEY); $.removeData($el, DATA_KEY)
ui.$el = null; ui.$el = null
ui.$parent = null; ui.$parent = null
ui.$target = null; ui.$target = null
ui.$triger = null; ui.$triger = null
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to el // attach functionality to el
const $el = $(this); const $el = $(this)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new HoverUI(this); data = new HoverUI(this)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = HoverUI._jQueryInterface; $.fn[NAME] = HoverUI._jQueryInterface
$.fn[NAME].Constructor = HoverUI; $.fn[NAME].Constructor = HoverUI
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return HoverUI._jQueryInterface; return HoverUI._jQueryInterface
}; }
// auto-apply // auto-apply
$('[data-toggle="hover"]').ready(() => { $('[data-toggle="hover"]').ready(() => {
$('[data-toggle="hover"]').jsHoverUI(); $('[data-toggle="hover"]').jsHoverUI()
}); })
// rewrite 'bootstrap/js/dist/dropdown' // rewrite 'bootstrap/js/dist/dropdown'
$('[data-toggle="dropdown"]').on("click touch", (e) => { $('[data-toggle="dropdown"]').on('click touch', (e) => {
e.preventDefault(); e.preventDefault()
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
const $parent = $el.parent(".dropdown"); const $parent = $el.parent('.dropdown')
// hide siblings // hide siblings
$parent.parent().find(".dropdown, .dropdown-menu").removeClass("show"); $parent.parent().find('.dropdown, .dropdown-menu').removeClass('show')
if ($parent.hasClass("show")) { if ($parent.hasClass('show')) {
$parent.removeClass("show"); $parent.removeClass('show')
$parent.find(".dropdown-menu").removeClass("show"); $parent.find('.dropdown-menu').removeClass('show')
} else { } else {
$parent.addClass("show"); $parent.addClass('show')
$parent.find(".dropdown-menu").addClass("show"); $parent.find('.dropdown-menu').addClass('show')
} }
}); })
return HoverUI; return HoverUI
})($); })($)
export default HoverUI; export default HoverUI

50
src/js_old/_components/_ui.image-position.js
View File

@ -1,44 +1,44 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
const ImagePositionUI = (($) => { const ImagePositionUI = (($) => {
const D = document; const D = document
const W = window; const W = window
const $Body = $("html,body"); const $Body = $('html,body')
const NAME = "ImagePositionUI"; const NAME = 'ImagePositionUI'
const CLASSNAME = `js${NAME}`; const CLASSNAME = `js${NAME}`
class ImagePositionUI { class ImagePositionUI {
static init() { static init () {
const ui = this; const ui = this
ui.dispose(); ui.dispose()
if (!$(`.${CLASSNAME}`).length) { if (!$(`.${CLASSNAME}`).length) {
return; return
} }
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
$(`.${CLASSNAME}`).on("click", (e) => { $(`.${CLASSNAME}`).on('click', (e) => {
e.preventDefault(); e.preventDefault()
console.log(e); console.log(e)
}); })
} }
static dispose() { static dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
} }
} }
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
ImagePositionUI.init(); ImagePositionUI.init()
}); })
W.ImagePositionUI = new ImagePositionUI(); W.ImagePositionUI = new ImagePositionUI()
return ImagePositionUI; return ImagePositionUI
})($); })($)
export default ImagePositionUI; export default ImagePositionUI

134
src/js_old/_components/_ui.instagramfeed.js
View File

@ -1,113 +1,113 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import "jquery.instagramFeed/jquery.instagramFeed"; import 'jquery.instagramFeed/jquery.instagramFeed'
const InstagramFeed = (($) => { const InstagramFeed = (($) => {
// Constants // Constants
const NAME = "jsInstagramFeed"; const NAME = 'jsInstagramFeed'
const DATA_KEY = NAME; const DATA_KEY = NAME
const W = window; const W = window
const D = document; const D = document
class InstagramFeed { class InstagramFeed {
constructor(el) { constructor (el) {
const ui = this; const ui = this
const $el = $(el); const $el = $(el)
ui._el = el; ui._el = el
ui.dispose(); ui.dispose()
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
$el.data(DATA_KEY, this); $el.data(DATA_KEY, this)
const ID = $el.data("username") + $el.data("tag"); const ID = $el.data('username') + $el.data('tag')
$.instagramFeed({ $.instagramFeed({
username: $el.data("username"), username: $el.data('username'),
tag: $el.data("tag") || null, tag: $el.data('tag') || null,
display_profile: $el.data("display-profile"), display_profile: $el.data('display-profile'),
display_biography: $el.data("display-biography"), display_biography: $el.data('display-biography'),
display_gallery: $el.data("display-gallery"), display_gallery: $el.data('display-gallery'),
display_captions: $el.data("display-captions"), display_captions: $el.data('display-captions'),
cache_time: 120, cache_time: 120,
callback: (data) => { callback: (data) => {
console.log(`${NAME}: data response received`); console.log(`${NAME}: data response received`)
$el.append(`<div class="${NAME}-list row"></div>`); $el.append(`<div class="${NAME}-list row"></div>`)
const $list = $el.find(`.${NAME}-list`); const $list = $el.find(`.${NAME}-list`)
data["edge_owner_to_timeline_media"]["edges"].forEach((el, i) => { data.edge_owner_to_timeline_media.edges.forEach((el, i) => {
const item = el["node"]; const item = el.node
const preview = ui.ig_media_preview(item["media_preview"]); const preview = ui.ig_media_preview(item.media_preview)
$list.append( $list.append(
`<div class="a col ${NAME}-item"` + `<div class="a col ${NAME}-item"` +
` data-lightbox-gallery="${NAME}-${ID}" data-href="${item["display_url"]}" data-force="image">` + ` data-lightbox-gallery="${NAME}-${ID}" data-href="${item.display_url}" data-force="image">` +
`<img id="${NAME}-${ID}-${item["id"]}" src="${item["display_url"]}" alt="${item["accessibility_caption"]}"` + `<img id="${NAME}-${ID}-${item.id}" src="${item.display_url}" alt="${item.accessibility_caption}"` +
`style="background:url(${preview})" />` + `style="background:url(${preview})" />` +
"</div>" '</div>'
); )
}); })
$(W).trigger("MetaLightboxUI.init"); $(W).trigger('MetaLightboxUI.init')
}, },
styling: false, styling: false,
items: $el.data("items"), items: $el.data('items'),
lazy_load: true, lazy_load: true,
on_error: (e) => { on_error: (e) => {
console.error(`${NAME}: ${e}`); console.error(`${NAME}: ${e}`)
}, },
}); })
$el.addClass(`${NAME}-active`); $el.addClass(`${NAME}-active`)
} }
ig_media_preview(base64data) { ig_media_preview (base64data) {
var jpegtpl = const jpegtpl =
"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==", '/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA=='
t = atob(base64data), const t = atob(base64data)
p = t.slice(3).split(""), const p = t.slice(3).split('')
o = t const o = t
.substring(0, 3) .substring(0, 3)
.split("") .split('')
.map((e) => { .map((e) => {
return e.charCodeAt(0); return e.charCodeAt(0)
}), })
c = atob(jpegtpl).split(""); const c = atob(jpegtpl).split('')
c[162] = String.fromCharCode(o[1]); c[162] = String.fromCharCode(o[1])
c[160] = String.fromCharCode(o[2]); c[160] = String.fromCharCode(o[2])
return base64data return base64data
? `data:image/jpeg;base64,${btoa(c.concat(p).join(""))}` ? `data:image/jpeg;base64,${btoa(c.concat(p).join(''))}`
: null; : null
} }
// Public methods // Public methods
dispose() { dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
const ui = this; const ui = this
const $el = $(ui._el); const $el = $(ui._el)
$.removeData(ui._el, DATA_KEY); $.removeData(ui._el, DATA_KEY)
ui._el = null; ui._el = null
$el.removeClass(`${NAME}-active`); $el.removeClass(`${NAME}-active`)
} }
} }
const init = () => { const init = () => {
$(`.${NAME}`).each((i, el) => { $(`.${NAME}`).each((i, el) => {
new InstagramFeed(el); new InstagramFeed(el)
}); })
}; }
// auto-apply // auto-apply
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
init(); init()
}); })
return InstagramFeed; return InstagramFeed
})($); })($)
export default InstagramFeed; export default InstagramFeed

156
src/js_old/_components/_ui.map.api.js
View File

@ -1,136 +1,136 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import "../../scss/_components/_ui.map.scss"; import '../../scss/_components/_ui.map.scss'
import CONSTS from "js/_consts"; import CONSTS from 'js/_consts'
const MapAPI = (($) => { const MapAPI = (($) => {
// Constants // Constants
const NAME = "jsMapAPI"; const NAME = 'jsMapAPI'
const DATA_KEY = NAME; const DATA_KEY = NAME
const $BODY = $("body"); const $BODY = $('body')
const MAP_DRIVER = CONSTS["MAP_DRIVER"]; const MAP_DRIVER = CONSTS.MAP_DRIVER
const W = window; const W = window
class MapAPI { class MapAPI {
// Constructor // Constructor
constructor(el) { constructor (el) {
const ui = this; const ui = this
const Drv = new MAP_DRIVER(); const Drv = new MAP_DRIVER()
ui.$el = $(el); ui.$el = $(el)
const $el = ui.$el; const $el = ui.$el
const config = $el.data(); const config = $el.data()
config["center"] = [ config.center = [
config["lng"] ? config["lng"] : $BODY.data("default-lng"), config.lng ? config.lng : $BODY.data('default-lng'),
config["lat"] ? config["lat"] : $BODY.data("default-lat"), config.lat ? config.lat : $BODY.data('default-lat'),
]; ]
config["style"] = config["style"] config.style = config.style
? jQuery.parseJSON(config["style"]) ? jQuery.parseJSON(config.style)
: null; : null
config["font-family"] = $BODY.css("font-family"); config['font-family'] = $BODY.css('font-family')
if (!config["icon"]) { if (!config.icon) {
config["icon"] = '<i class="fas fa-map-marker-alt"></i>'; config.icon = '<i class="fas fa-map-marker-alt"></i>'
} }
console.log(`${NAME}: init ${Drv.getName()}...`); console.log(`${NAME}: init ${Drv.getName()}...`)
Drv.init($el, config); Drv.init($el, config)
ui.drv = Drv; ui.drv = Drv
$el.on(Events.MAPAPILOADED, (e) => { $el.on(Events.MAPAPILOADED, (e) => {
ui.map = Drv.getMap(); ui.map = Drv.getMap()
if (config["geojson"]) { if (config.geojson) {
console.log(`${NAME}: setting up geocode data`); console.log(`${NAME}: setting up geocode data`)
Drv.addGeoJson(config); Drv.addGeoJson(config)
} else if (config["address"]) { } else if (config.address) {
console.log(config["address"]); console.log(config.address)
console.log(`${NAME}: setting up address marker`); console.log(`${NAME}: setting up address marker`)
Drv.geocode(config["address"], (results) => { Drv.geocode(config.address, (results) => {
console.log(results); console.log(results)
const lat = results[0].geometry.location.lat(); const lat = results[0].geometry.location.lat()
const lng = results[0].geometry.location.lng(); const lng = results[0].geometry.location.lng()
console.log( console.log(
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}` `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
); )
Drv.addMarker([lng, lat], config); Drv.addMarker([lng, lat], config)
ui.map.setCenter({ lat, lng }); ui.map.setCenter({ lat, lng })
}); })
} else if (config["lat"] && config["lng"]) { } else if (config.lat && config.lng) {
const lat = config["lat"]; const lat = config.lat
const lng = config["lng"]; const lng = config.lng
console.log( console.log(
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}` `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
); )
Drv.addMarker([lng, lat], config); Drv.addMarker([lng, lat], config)
} }
$el.data(DATA_KEY, ui); $el.data(DATA_KEY, ui)
$el.addClass(`${NAME}-active`); $el.addClass(`${NAME}-active`)
$el.trigger(Events.MAPLOADED); $el.trigger(Events.MAPLOADED)
console.log(`${NAME}: Map is loaded`); console.log(`${NAME}: Map is loaded`)
}); })
} }
// Public methods // Public methods
getMap() { getMap () {
return ui.map; return ui.map
} }
dispose() { dispose () {
const ui = this; const ui = this
ui.$el = null; ui.$el = null
$.removeData(ui.$el[0], DATA_KEY); $.removeData(ui.$el[0], DATA_KEY)
ui.$el.removeClass(`${NAME}-active`); ui.$el.removeClass(`${NAME}-active`)
} }
static _jQueryInterface() { static _jQueryInterface () {
if (typeof W.localStorage !== "undefined") { if (typeof W.localStorage !== 'undefined') {
return this.each(() => { return this.each(() => {
// attach functionality to el // attach functionality to el
const $el = $(this); const $el = $(this)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new MapAPI(this); data = new MapAPI(this)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = MapAPI._jQueryInterface; $.fn[NAME] = MapAPI._jQueryInterface
$.fn[NAME].Constructor = MapAPI; $.fn[NAME].Constructor = MapAPI
$.fn[NAME].noConflict = () => { $.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return MapAPI._jQueryInterface; return MapAPI._jQueryInterface
}; }
// auto-apply // auto-apply
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
$(".mapAPI-map-container").jsMapAPI(); $('.mapAPI-map-container').jsMapAPI()
}); })
return MapAPI; return MapAPI
})($); })($)
export default MapAPI; export default MapAPI

66
src/js_old/_components/_ui.menu.js
View File

@ -1,65 +1,65 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
const SlidingMenu = (($) => { const SlidingMenu = (($) => {
// Constants // Constants
const NAME = "jsSlidingMenu"; const NAME = 'jsSlidingMenu'
const DATA_KEY = NAME; const DATA_KEY = NAME
class SlidingMenu { class SlidingMenu {
// Constructor // Constructor
constructor(element) { constructor (element) {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
this._element = element; this._element = element
const $element = $(this._element); const $element = $(this._element)
$element.addClass(`${NAME}-active`); $element.addClass(`${NAME}-active`)
// esc button // esc button
$(window).on("keyup", (e) => { $(window).on('keyup', (e) => {
if (e.which === 27) { if (e.which === 27) {
$element.find('.is-open[data-toggle="offcanvas"]').click(); $element.find('.is-open[data-toggle="offcanvas"]').click()
} }
}); })
} }
// Public methods // Public methods
dispose() { dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
$(this._element).removeClass(`${NAME}-active`); $(this._element).removeClass(`${NAME}-active`)
$.removeData(this._element, DATA_KEY); $.removeData(this._element, DATA_KEY)
this._element = null; this._element = null
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(function () { return this.each(function () {
// attach functionality to element // attach functionality to element
const $element = $(this); const $element = $(this)
let data = $element.data(DATA_KEY); let data = $element.data(DATA_KEY)
if (!data) { if (!data) {
data = new SlidingMenu(this); data = new SlidingMenu(this)
$element.data(DATA_KEY, data); $element.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = SlidingMenu._jQueryInterface; $.fn[NAME] = SlidingMenu._jQueryInterface
$.fn[NAME].Constructor = SlidingMenu; $.fn[NAME].Constructor = SlidingMenu
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return SlidingMenu._jQueryInterface; return SlidingMenu._jQueryInterface
}; }
// auto-apply // auto-apply
$(`.ui.${NAME}`).ready(() => { $(`.ui.${NAME}`).ready(() => {
$(`.ui.${NAME}`).jsSlidingMenu(); $(`.ui.${NAME}`).jsSlidingMenu()
}); })
return SlidingMenu; return SlidingMenu
})($); })($)
export default SlidingMenu; export default SlidingMenu

238
src/js_old/_components/_ui.multislider.js
View File

@ -1,168 +1,168 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
import MainUI from "../_main"; import MainUI from '../_main'
import "hammerjs/hammer"; import 'hammerjs/hammer'
import "jquery-hammerjs/jquery.hammer"; import 'jquery-hammerjs/jquery.hammer'
import "../../scss/_components/_ui.multislider.scss"; import '../../scss/_components/_ui.multislider.scss'
const W = window; const W = window
const MultiSlider = (($) => { const MultiSlider = (($) => {
// Constants // Constants
const NAME = "jsMultiSlider"; const NAME = 'jsMultiSlider'
const DATA_KEY = NAME; const DATA_KEY = NAME
const $BODY = $("body"); const $BODY = $('body')
class MultiSlider { class MultiSlider {
// Constructor // Constructor
constructor(el) { constructor (el) {
this.dispose(); this.dispose()
console.log(`${NAME}: init ...`); console.log(`${NAME}: init ...`)
const ui = this; const ui = this
const $el = $(el); const $el = $(el)
ui.$el = $el; ui.$el = $el
ui.sliding = false; ui.sliding = false
$el.wrap(`<div class="${NAME}-container"></div>`); $el.wrap(`<div class="${NAME}-container"></div>`)
ui.$elContainer = $el.parent(`.${NAME}-container`); ui.$elContainer = $el.parent(`.${NAME}-container`)
$el.wrap(`<div class="${NAME}-slides-container"></div>`); $el.wrap(`<div class="${NAME}-slides-container"></div>`)
ui.$slidesContainer = $el.parent(`.${NAME}-slides-container`); ui.$slidesContainer = $el.parent(`.${NAME}-slides-container`)
ui.addControls(); ui.addControls()
ui.calculate(); ui.calculate()
$(W).on("resize", () => { $(W).on('resize', () => {
ui.$elContainer ui.$elContainer
.find(".act-slider-prev,.act-slider-next") .find('.act-slider-prev,.act-slider-next')
.removeClass("disabled"); .removeClass('disabled')
ui.calculate(); ui.calculate()
}); })
ui.$elContainer.addClass(`${NAME}-active`); ui.$elContainer.addClass(`${NAME}-active`)
$el.addClass(`${NAME}-active`); $el.addClass(`${NAME}-active`)
} }
calculate() { calculate () {
const ui = this; const ui = this
ui.$slides = ui.$el.find(".slide"); ui.$slides = ui.$el.find('.slide')
ui.numberOfSlides = ui.$slides.length; ui.numberOfSlides = ui.$slides.length
ui.containerWidth = ui.$el.parent().width(); ui.containerWidth = ui.$el.parent().width()
ui.maxPos = ui.numberOfSlides - ui.numToDisplay(); ui.maxPos = ui.numberOfSlides - ui.numToDisplay()
ui.slideWidth = ui.containerWidth / ui.numToDisplay(); ui.slideWidth = ui.containerWidth / ui.numToDisplay()
ui.$slides.css("width", `${ui.slideWidth}px`); ui.$slides.css('width', `${ui.slideWidth}px`)
ui.$el.css("width", ui.slideWidth * ui.numberOfSlides); ui.$el.css('width', ui.slideWidth * ui.numberOfSlides)
ui.currPos = 0; ui.currPos = 0
ui.slide(0); ui.slide(0)
} }
numToDisplay() { numToDisplay () {
const ui = this; const ui = this
const size = MainUI.detectBootstrapScreenSize(); const size = MainUI.detectBootstrapScreenSize()
let num = ui.$el.data(`length-${size}`); let num = ui.$el.data(`length-${size}`)
num = num ? num : ui.$el.data("length"); num = num || ui.$el.data('length')
console.log(`${NAME}: size ${size} | num ${num}`); console.log(`${NAME}: size ${size} | num ${num}`)
return num ? num : 1; return num || 1
} }
addControls() { addControls () {
const ui = this; const ui = this
const $e = ui.$el; const $e = ui.$el
// actions // actions
ui.$elContainer.append( ui.$elContainer.append(
'<div class="slider-actions">' + '<div class="slider-actions">' +
'<a href="#" class="act act-slider-prev"><i class="fas fa-chevron-left"></i><b class="sr-only">Prev</b></a>' + '<a href="#" class="act act-slider-prev"><i class="fas fa-chevron-left"></i><b class="sr-only">Prev</b></a>' +
'<a href="#" class="act act-slider-next"><i class="fas fa-chevron-right"></i><b class="sr-only">Next</b></a>' + '<a href="#" class="act act-slider-next"><i class="fas fa-chevron-right"></i><b class="sr-only">Next</b></a>' +
"</div>" '</div>'
); )
ui.$prevBtn = ui.$elContainer.find(".act-slider-prev"); ui.$prevBtn = ui.$elContainer.find('.act-slider-prev')
ui.$nextBtn = ui.$elContainer.find(".act-slider-next"); ui.$nextBtn = ui.$elContainer.find('.act-slider-next')
ui.$prevBtn.on("click", (e) => { ui.$prevBtn.on('click', (e) => {
e.preventDefault(); e.preventDefault()
if ($(e.currentTarget).hasClass("disabled")) { if ($(e.currentTarget).hasClass('disabled')) {
return false; return false
} }
ui.prev(); ui.prev()
}); })
ui.$nextBtn.on("click", (e) => { ui.$nextBtn.on('click', (e) => {
e.preventDefault(); e.preventDefault()
if ($(e.currentTarget).hasClass("disabled")) { if ($(e.currentTarget).hasClass('disabled')) {
return false; return false
} }
ui.next(); ui.next()
}); })
// init touch swipes // init touch swipes
$e.hammer().bind("swipeleft panleft", (e) => { $e.hammer().bind('swipeleft panleft', (e) => {
ui.next(); ui.next()
}); })
$e.hammer().bind("swiperight panright", (e) => { $e.hammer().bind('swiperight panright', (e) => {
ui.prev(); ui.prev()
}); })
} }
next() { next () {
const ui = this; const ui = this
if (ui.sliding) { if (ui.sliding) {
return; return
} }
ui.currPos++; ui.currPos++
ui.slide(ui.currPos); ui.slide(ui.currPos)
} }
prev() { prev () {
const ui = this; const ui = this
if (ui.sliding) { if (ui.sliding) {
return; return
} }
ui.currPos--; ui.currPos--
ui.slide(ui.currPos); ui.slide(ui.currPos)
} }
slide(pos) { slide (pos) {
const ui = this; const ui = this
if (ui.sliding) { if (ui.sliding) {
return; return
} }
ui.sliding = true; ui.sliding = true
if (ui.$nextBtn.length) { if (ui.$nextBtn.length) {
if (pos >= ui.maxPos) { if (pos >= ui.maxPos) {
ui.$nextBtn.addClass("disabled"); ui.$nextBtn.addClass('disabled')
} else { } else {
ui.$nextBtn.removeClass("disabled"); ui.$nextBtn.removeClass('disabled')
} }
} }
if (ui.$prevBtn.length) { if (ui.$prevBtn.length) {
if (pos <= 0) { if (pos <= 0) {
ui.$prevBtn.addClass("disabled"); ui.$prevBtn.addClass('disabled')
} else { } else {
ui.$prevBtn.removeClass("disabled"); ui.$prevBtn.removeClass('disabled')
} }
} }
@ -170,60 +170,60 @@ const MultiSlider = (($) => {
{ {
left: `${-(pos * ui.slideWidth)}px`, left: `${-(pos * ui.slideWidth)}px`,
}, },
"slow", 'slow',
"swing", 'swing',
() => { () => {
ui.sliding = false; ui.sliding = false
} }
); )
} }
dispose() { dispose () {
const ui = this; const ui = this
if (ui.$elContainer) { if (ui.$elContainer) {
ui.$el.parent().find(".slider-actions").remove(); ui.$el.parent().find('.slider-actions').remove()
} }
if (ui.$el) { if (ui.$el) {
ui.$el.hammer().unbind("swipeleft panleft swiperight panright"); ui.$el.hammer().unbind('swipeleft panleft swiperight panright')
} }
console.log(`Disposing: ${NAME}`); console.log(`Disposing: ${NAME}`)
ui.$el = null; ui.$el = null
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each(() => { return this.each(() => {
// attach functionality to el // attach functionality to el
const $el = $(this); const $el = $(this)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new MultiSlider(this); data = new MultiSlider(this)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = MultiSlider._jQueryInterface; $.fn[NAME] = MultiSlider._jQueryInterface
$.fn[NAME].Constructor = MultiSlider; $.fn[NAME].Constructor = MultiSlider
$.fn[NAME].noConflict = function () { $.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return MultiSlider._jQueryInterface; return MultiSlider._jQueryInterface
}; }
// auto-apply // auto-apply
$(W).on(`MultiSlider.init ${Events.LODEDANDREADY}`, () => { $(W).on(`MultiSlider.init ${Events.LODEDANDREADY}`, () => {
$(`.${NAME}`).each((i, el) => { $(`.${NAME}`).each((i, el) => {
$(el).jsMultiSlider(); $(el).jsMultiSlider()
}); })
}); })
return MultiSlider; return MultiSlider
})($); })($)
export default MultiSlider; export default MultiSlider

104
src/js_old/_components/_ui.nocaptcha.js
View File

@ -1,97 +1,97 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../lib/_events"; import Events from '../lib/_events'
const NoCaptcha = (($) => { const NoCaptcha = (($) => {
// Constants // Constants
const $window = $(window); const $window = $(window)
const D = document; const D = document
const $Body = $("body"); const $Body = $('body')
const NAME = "jsNoCaptcha"; const NAME = 'jsNoCaptcha'
class NoCaptcha { class NoCaptcha {
static init() { static init () {
const ui = this; const ui = this
ui.dispose(); ui.dispose()
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
if ( if (
$(".g-recaptcha").length && $('.g-recaptcha').length &&
typeof $window[0].grecaptcha === "undefined" typeof $window[0].grecaptcha === 'undefined'
) { ) {
console.log(`${NAME}: Loading Captcha API`); console.log(`${NAME}: Loading Captcha API`)
$.getScript( $.getScript(
"https://www.google.com/recaptcha/api.js?render=explicit&hl=en&onload=noCaptchaFieldRender", 'https://www.google.com/recaptcha/api.js?render=explicit&hl=en&onload=noCaptchaFieldRender',
() => { () => {
this.renderCaptcha(); this.renderCaptcha()
} }
); )
} else { } else {
this.renderCaptcha(); this.renderCaptcha()
} }
} }
static dispose() { static dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
} }
static renderCaptcha() { static renderCaptcha () {
const grecaptcha = $window[0].grecaptcha; const grecaptcha = $window[0].grecaptcha
if ( if (
typeof grecaptcha === "undefined" || typeof grecaptcha === 'undefined' ||
typeof grecaptcha.render === "undefined" typeof grecaptcha.render === 'undefined'
) { ) {
return; return
} }
console.log(`${NAME}: Rendering Captcha`); console.log(`${NAME}: Rendering Captcha`)
const $_noCaptchaFields = $(".g-recaptcha"); const $_noCaptchaFields = $('.g-recaptcha')
if (!$(".g-recaptcha").length) { if (!$('.g-recaptcha').length) {
console.log(`${NAME}: No Captcha fields`); console.log(`${NAME}: No Captcha fields`)
return; return
} }
const submitListener = (e) => { const submitListener = (e) => {
const $field = $(e.currentTarget).find(".g-recaptcha"); const $field = $(e.currentTarget).find('.g-recaptcha')
grecaptcha.execute($field.data("widgetid")); grecaptcha.execute($field.data('widgetid'))
}; }
$_noCaptchaFields.each((i, field) => { $_noCaptchaFields.each((i, field) => {
const $field = $(field); const $field = $(field)
if ($field.data("widgetid") || $field.html().length) { if ($field.data('widgetid') || $field.html().length) {
return; return
} }
const $form = $field.data("form") const $form = $field.data('form')
? $(`#${$field.data("form")}`) ? $(`#${$field.data('form')}`)
: $field.parents("form"); : $field.parents('form')
const widget_id = grecaptcha.render(field, $field.data()); const widget_id = grecaptcha.render(field, $field.data())
$field.data("widgetid", widget_id); $field.data('widgetid', widget_id)
// For the invisible captcha we need to setup some callback listeners // For the invisible captcha we need to setup some callback listeners
if ($field.data("size") === "invisible" && !$field.data("callback")) { if ($field.data('size') === 'invisible' && !$field.data('callback')) {
grecaptcha.execute(widget_id); grecaptcha.execute(widget_id)
$form.on("submit", submitListener); $form.on('submit', submitListener)
} }
}); })
} }
} }
$window.on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $window.on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
NoCaptcha.init(); NoCaptcha.init()
}); })
$window.data(`${NAME}`, NoCaptcha); $window.data(`${NAME}`, NoCaptcha)
$window[0].noCaptchaFieldRender = NoCaptcha.renderCaptcha; $window[0].noCaptchaFieldRender = NoCaptcha.renderCaptcha
return NoCaptcha; return NoCaptcha
})($); })($)
export default NoCaptcha; export default NoCaptcha

140
src/js_old/_components/_ui.opening-hours.js
View File

@ -1,119 +1,119 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
const OpeningHoursUI = (($) => { const OpeningHoursUI = (($) => {
// Constants // Constants
const NAME = "OpeningHoursUI"; const NAME = 'OpeningHoursUI'
class OpeningHoursUI { class OpeningHoursUI {
// Static methods // Static methods
static each(callback) { static each (callback) {
$(".js-opening-hours").each((i, e) => { $('.js-opening-hours').each((i, e) => {
callback(i, $(e)); callback(i, $(e))
}); })
} }
static init() { static init () {
this.dispose(); this.dispose()
console.log(`${NAME}: init ...`); console.log(`${NAME}: init ...`)
const hours = $.parseJSON($(".oppening-hours-json").html()); const hours = $.parseJSON($('.oppening-hours-json').html())
const date = new Date(); const date = new Date()
const dateYMD = this.Date_toYMD(date); const dateYMD = this.Date_toYMD(date)
const weekday = [ const weekday = [
"Sunday", 'Sunday',
"Monday", 'Monday',
"Tuesday", 'Tuesday',
"Wednesday", 'Wednesday',
"Thursday", 'Thursday',
"Friday", 'Friday',
"Saturday", 'Saturday',
]; ]
const today = weekday[date.getDay()]; const today = weekday[date.getDay()]
let html = let html =
'<b class="opening-hours-status opening-hours-status-closed">Closed today</b>'; '<b class="opening-hours-status opening-hours-status-closed">Closed today</b>'
if ( if (
typeof hours["days"] !== "undefined" && typeof hours.days !== 'undefined' &&
typeof hours["days"][today] !== "undefined" && typeof hours.days[today] !== 'undefined' &&
hours["days"][today].length hours.days[today].length
) { ) {
html = "Open today "; html = 'Open today '
$.each(hours["days"][today], (i, v) => { $.each(hours.days[today], (i, v) => {
if (v["DisplayStart"] || v["DisplayEnd"]) { if (v.DisplayStart || v.DisplayEnd) {
if ( if (
(v["DisplayStart"] && (v.DisplayStart &&
v["DisplayStart"] <= dateYMD && v.DisplayStart <= dateYMD &&
v["DisplayEnd"] && v.DisplayEnd &&
v["DisplayEnd"] >= dateYMD) || v.DisplayEnd >= dateYMD) ||
(v["DisplayStart"] && (v.DisplayStart &&
v["DisplayStart"] <= dateYMD && v.DisplayStart <= dateYMD &&
!v["DisplayEnd"]) || !v.DisplayEnd) ||
(v["DisplayEnd"] && (v.DisplayEnd &&
v["DisplayEnd"] >= dateYMD && v.DisplayEnd >= dateYMD &&
!v["DisplayStart"]) !v.DisplayStart)
) { ) {
html = `Open today from ${v["From"]} to ${v["Till"]}`; html = `Open today from ${v.From} to ${v.Till}`
return false; return false
} }
} else { } else {
if (i > 0) { if (i > 0) {
html += ", <br/>"; html += ', <br/>'
} }
html += `from ${v["From"]} to ${v["Till"]}`; html += `from ${v.From} to ${v.Till}`
} }
}); })
html += ' <b class="opening-hours-status"></b>'; html += ' <b class="opening-hours-status"></b>'
} }
if ( if (
typeof hours["holidays"] !== "undefined" && typeof hours.holidays !== 'undefined' &&
typeof hours["holidays"][dateYMD] !== "undefined" typeof hours.holidays[dateYMD] !== 'undefined'
) { ) {
html = `<b class="opening-hours-status opening-hours-status-closed">Closed today${ html = `<b class="opening-hours-status opening-hours-status-closed">Closed today${
hours["holidays"][dateYMD] ? ` for ${hours["holidays"][dateYMD]}` : "" hours.holidays[dateYMD] ? ` for ${hours.holidays[dateYMD]}` : ''
}</b>`; }</b>`
} }
this.each((i, e) => { this.each((i, e) => {
const $e = $(e); const $e = $(e)
$e.html(html); $e.html(html)
}); })
} }
static Date_toYMD(date) { static Date_toYMD (date) {
var year, month, day; let year, month, day
year = String(date.getFullYear()); year = String(date.getFullYear())
month = String(date.getMonth() + 1); month = String(date.getMonth() + 1)
if (month.length == 1) { if (month.length == 1) {
month = `0${month}`; month = `0${month}`
} }
day = String(date.getDate()); day = String(date.getDate())
if (day.length == 1) { if (day.length == 1) {
day = `0${day}`; day = `0${day}`
} }
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`
} }
static dispose() { static dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
this.each((i, e) => { this.each((i, e) => {
$(e).html(""); $(e).html('')
}); })
} }
} }
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
OpeningHoursUI.init(); OpeningHoursUI.init()
}); })
return OpeningHoursUI; return OpeningHoursUI
})($); })($)
export default OpeningHoursUI; export default OpeningHoursUI

180
src/js_old/_components/_ui.search.js
View File

@ -1,107 +1,107 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
$(() => { $(() => {
const $searchLat = $('[name="search-lat"]'); const $searchLat = $('[name="search-lat"]')
const $searchLng = $('[name="search-lng"]'); const $searchLng = $('[name="search-lng"]')
const $nearbyLat = $("#nearby-lat"); const $nearbyLat = $('#nearby-lat')
const $nearbyLng = $("#nearby-lng"); const $nearbyLng = $('#nearby-lng')
const $radius = $("#distance-radius"); const $radius = $('#distance-radius')
const $category = $("#distance-category"); const $category = $('#distance-category')
const $newLocation = $('[name="newlocation"]'); const $newLocation = $('[name="newlocation"]')
const $setnewlocation = $("#setnewlocation"); const $setnewlocation = $('#setnewlocation')
const $newlocationholder = $(".set-newlocation-holder"); const $newlocationholder = $('.set-newlocation-holder')
const updatePosition = (lat, lng) => { const updatePosition = (lat, lng) => {
$searchLat.val(lat); $searchLat.val(lat)
$searchLng.val(lng); $searchLng.val(lng)
$nearbyLat.val(lat); $nearbyLat.val(lat)
$nearbyLng.val(lng); $nearbyLng.val(lng)
$searchLat.change(); $searchLat.change()
$nearbyLat.change(); $nearbyLat.change()
};
const getGeoPosition = () => {
const newLocation = $newLocation.val();
if (!newLocation.length) {
return;
} }
$(".search-location .current-val").text(newLocation); const getGeoPosition = () => {
const geoUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${newLocation}&key=AIzaSyC00L0023LPBhzj12uTCL-4EwJ_6zgwcTU&sensor=true`; const newLocation = $newLocation.val()
if (!newLocation.length) {
return
}
$('.search-location .current-val').text(newLocation)
const geoUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${newLocation}&key=AIzaSyC00L0023LPBhzj12uTCL-4EwJ_6zgwcTU&sensor=true`
$.getJSON(geoUrl).done((data) => { $.getJSON(geoUrl).done((data) => {
if (data.status === "OK") { if (data.status === 'OK') {
updatePosition( updatePosition(
data.results[0].geometry.location.lat, data.results[0].geometry.location.lat,
data.results[0].geometry.location.lng data.results[0].geometry.location.lng
); )
//getCategories(); // getCategories();
}
})
} }
});
};
const getCurrentPosition = () => { const getCurrentPosition = () => {
$(".search-location .current-val").text("Current Location"); $('.search-location .current-val').text('Current Location')
navigator.geolocation.getCurrentPosition( navigator.geolocation.getCurrentPosition(
(position) => { (position) => {
updatePosition(position.coords.latitude, position.coords.longitude); updatePosition(position.coords.latitude, position.coords.longitude)
//hideDistancesThatDontMatter(); // hideDistancesThatDontMatter();
}, },
() => { () => {
$(".search-location .current-val").text("Unable to get your location"); $('.search-location .current-val').text('Unable to get your location')
updatePosition("", ""); updatePosition('', '')
}
)
} }
);
};
if ($newLocation.length && $newLocation.val().length) { if ($newLocation.length && $newLocation.val().length) {
getGeoPosition(); getGeoPosition()
} else { } else {
getCurrentPosition(); getCurrentPosition()
} }
$("#Form_SearchForm").on("keyup keypress", (e) => { $('#Form_SearchForm').on('keyup keypress', (e) => {
var keyCode = e.keyCode || e.which; const keyCode = e.keyCode || e.which
if (keyCode === 13) { if (keyCode === 13) {
e.preventDefault(); e.preventDefault()
return false; return false
} }
}); })
$(".get-current-location").on("click", (e) => { $('.get-current-location').on('click', (e) => {
e.preventDefault(); e.preventDefault()
getCurrentPosition(); getCurrentPosition()
$newlocationholder.toggle(); $newlocationholder.toggle()
$newLocation.val(""); $newLocation.val('')
}); })
$setnewlocation.on("click", (e) => { $setnewlocation.on('click', (e) => {
e.preventDefault(); e.preventDefault()
$newlocationholder.toggle(); $newlocationholder.toggle()
}); })
$newLocation.blur(() => { $newLocation.blur(() => {
getGeoPosition(); getGeoPosition()
}); })
$(".new-search").on("click", (e) => { $('.new-search').on('click', (e) => {
e.preventDefault(); e.preventDefault()
$(".section-search-secondary").animate( $('.section-search-secondary').animate(
{ {
"max-height": 300, 'max-height': 300,
}, },
"slow" 'slow'
); )
}); })
/*$radius.on('change', () => { /* $radius.on('change', () => {
getCategories(); getCategories();
}); });
function getCategories() { function getCategories() {
@ -127,39 +127,39 @@ $(() => {
} }
}); });
}); });
}*/ } */
const $map = $("#Map"); const $map = $('#Map')
if (typeof google !== "undefined" && $map.length) { if (typeof google !== 'undefined' && $map.length) {
const $directions = $("#DirectionsPanel"), const $directions = $('#DirectionsPanel')
$fromAddress = $("#FromAddress"), const $fromAddress = $('#FromAddress')
$getDirections = $("#GetDirections"), const $getDirections = $('#GetDirections')
$directionContainer = $("#DirectionContainer"), const $directionContainer = $('#DirectionContainer')
directionsDisplay = new google.maps.DirectionsRenderer(), const directionsDisplay = new google.maps.DirectionsRenderer()
directionsService = new google.maps.DirectionsService(), const directionsService = new google.maps.DirectionsService()
currentPosition = { const currentPosition = {
lat: $map.data("lat"), lat: $map.data('lat'),
lng: $map.data("lng"), lng: $map.data('lng'),
}, }
map = new google.maps.Map($map[0], { const map = new google.maps.Map($map[0], {
zoom: 15, zoom: 15,
mapTypeControl: true, mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeId: google.maps.MapTypeId.ROADMAP,
}); })
directionsDisplay.setMap(map); directionsDisplay.setMap(map)
directionsDisplay.setPanel($directions[0]); directionsDisplay.setPanel($directions[0])
map.setCenter(currentPosition); map.setCenter(currentPosition)
new google.maps.Marker({ new google.maps.Marker({
map, map,
position: currentPosition, position: currentPosition,
}); })
$getDirections.click((e) => { $getDirections.click((e) => {
e.preventDefault(); e.preventDefault()
const fromLocation = $fromAddress.val(); const fromLocation = $fromAddress.val()
if (fromLocation.length) { if (fromLocation.length) {
directionsService.route( directionsService.route(
@ -170,13 +170,13 @@ $(() => {
}, },
(response, status) => { (response, status) => {
if (status === google.maps.DirectionsStatus.OK) { if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response); directionsDisplay.setDirections(response)
} }
} }
); )
$directionContainer.slideDown(); $directionContainer.slideDown()
} }
}); })
} }
}); })

44
src/js_old/_components/_ui.shrink.js
View File

@ -1,48 +1,48 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
const ShrinkUI = (($) => { const ShrinkUI = (($) => {
// Constants // Constants
const W = window; const W = window
const D = document; const D = document
const NAME = "ShrinkUI"; const NAME = 'ShrinkUI'
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
$(W).on( $(W).on(
`${NAME}.init ${Events.LOADED} ${Events.SCROLL} ${Events.RESIZE}`, `${NAME}.init ${Events.LOADED} ${Events.SCROLL} ${Events.RESIZE}`,
() => { () => {
if ($("#Navigation > .navbar-collapse").hasClass("show")) { if ($('#Navigation > .navbar-collapse').hasClass('show')) {
return; return
} }
let h1 = $("#SiteWideMessage").height(); let h1 = $('#SiteWideMessage').height()
if (!h1) { if (!h1) {
h1 = 0; h1 = 0
} }
let h2 = $("#SiteWideOffline").height(); let h2 = $('#SiteWideOffline').height()
if (!h2) { if (!h2) {
h2 = 0; h2 = 0
} }
let h3 = $("#Header").height(); let h3 = $('#Header').height()
if (!h3) { if (!h3) {
h3 = 0; h3 = 0
} }
const headerHeight = h1 + h2 + h3; const headerHeight = h1 + h2 + h3
if ($(D).scrollTop() > headerHeight) { if ($(D).scrollTop() > headerHeight) {
$("body").addClass("shrink"); $('body').addClass('shrink')
} else { } else {
$("body").removeClass("shrink"); $('body').removeClass('shrink')
} }
} }
); )
return ShrinkUI; return ShrinkUI
})($); })($)
export default ShrinkUI; export default ShrinkUI

84
src/js_old/_components/_ui.sidebar.js
View File

@ -1,84 +1,84 @@
"use strict"; 'use strict'
//import StickySidebar from 'sticky-sidebar/src/sticky-sidebar'; // import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
const SidebarUI = (($) => { const SidebarUI = (($) => {
const D = document; const D = document
const W = window; const W = window
const $Body = $("body"); const $Body = $('body')
const NAME = "SidebarUI"; const NAME = 'SidebarUI'
const CLASSNAME = `js${NAME}`; const CLASSNAME = `js${NAME}`
const CONTENTHOLDER = "content-holder"; const CONTENTHOLDER = 'content-holder'
const INNERWRAPPER = `${CLASSNAME}__inner`; const INNERWRAPPER = `${CLASSNAME}__inner`
class SidebarUI { class SidebarUI {
static init() { static init () {
const ui = this; const ui = this
ui.dispose(); ui.dispose()
if (!$(`.${CLASSNAME}`).length) { if (!$(`.${CLASSNAME}`).length) {
return; return
} }
console.log(`${NAME}: init ...`); console.log(`${NAME}: init ...`)
//const fontSize = parseInt($Body.css('font-size')); // const fontSize = parseInt($Body.css('font-size'));
const fontSize = 0; const fontSize = 0
const contentElement = $(`.${CONTENTHOLDER}`)[0]; const contentElement = $(`.${CONTENTHOLDER}`)[0]
//$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`); // $(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
const $el = $(`.${CLASSNAME}`); const $el = $(`.${CLASSNAME}`)
const $innerWrapper = $(`.${INNERWRAPPER}`); const $innerWrapper = $(`.${INNERWRAPPER}`)
/*const sticky = new StickySidebar(`.${CLASSNAME}`, { /* const sticky = new StickySidebar(`.${CLASSNAME}`, {
topSpacing: fontSize, topSpacing: fontSize,
bottomSpacing: fontSize, bottomSpacing: fontSize,
containerSelector: CONTENTHOLDER, containerSelector: CONTENTHOLDER,
innerWrapperSelector: INNERWRAPPER, innerWrapperSelector: INNERWRAPPER,
});*/ }); */
$el.addClass(`${CLASSNAME}-active`); $el.addClass(`${CLASSNAME}-active`)
$Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => { $Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
const contentOffset = parseInt(contentElement.offsetTop) + fontSize; const contentOffset = parseInt(contentElement.offsetTop) + fontSize
const contentOffsetHeight = const contentOffsetHeight =
parseInt(contentElement.offsetHeight) - fontSize; parseInt(contentElement.offsetHeight) - fontSize
const sidebarWidth = $el[0].offsetWidth; const sidebarWidth = $el[0].offsetWidth
const scrollPos = parseInt($Body.scrollTop()); const scrollPos = parseInt($Body.scrollTop())
// normal pos // normal pos
if (contentOffset >= scrollPos) { if (contentOffset >= scrollPos) {
$innerWrapper.attr("style", ""); $innerWrapper.attr('style', '')
} else if ( } else if (
scrollPos >= scrollPos >=
contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight
) { ) {
// bottom pos // bottom pos
$innerWrapper.attr("style", `position:absolute;bottom:${fontSize}px`); $innerWrapper.attr('style', `position:absolute;bottom:${fontSize}px`)
} else { } else {
// scrolled pos // scrolled pos
$innerWrapper.attr( $innerWrapper.attr(
"style", 'style',
`position:fixed;top:${fontSize}px;width:${sidebarWidth}px` `position:fixed;top:${fontSize}px;width:${sidebarWidth}px`
); )
} }
}); })
} }
static dispose() { static dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
} }
} }
$(W).on(`${NAME}.init ${Events.LODEDANDREADY}`, () => { $(W).on(`${NAME}.init ${Events.LODEDANDREADY}`, () => {
SidebarUI.init(); SidebarUI.init()
}); })
W.SidebarUI = new SidebarUI(); W.SidebarUI = new SidebarUI()
return SidebarUI; return SidebarUI
})($); })($)
export default SidebarUI; export default SidebarUI

18
src/js_old/_components/_ui.spinner.js
View File

@ -1,18 +1,18 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
const SpinnerUI = (($) => { const SpinnerUI = (($) => {
class SpinnerUI { class SpinnerUI {
static show(callback) { static show (callback) {
$("#PageLoading").show(0, callback); $('#PageLoading').show(0, callback)
} }
static hide(callback) { static hide (callback) {
$("#PageLoading").hide("slow", callback); $('#PageLoading').hide('slow', callback)
} }
} }
return SpinnerUI; return SpinnerUI
})($); })($)
export default SpinnerUI; export default SpinnerUI

124
src/js_old/_components/_ui.video.preview.js
View File

@ -1,120 +1,120 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import MainUI from "../_main"; import MainUI from '../_main'
import Events from "../_events"; import Events from '../_events'
import SpinnerUI from "./_ui.spinner"; import SpinnerUI from './_ui.spinner'
const VideoPreviewUI = (($) => { const VideoPreviewUI = (($) => {
const NAME = "jsVideoPreviewUI"; const NAME = 'jsVideoPreviewUI'
const DATA_KEY = NAME; const DATA_KEY = NAME
const G = window; const G = window
const D = document; const D = document
class VideoPreviewUI { class VideoPreviewUI {
constructor(el) { constructor (el) {
const ui = this; const ui = this
ui.$_el = $(el); ui.$_el = $(el)
ui.innerHTML = ui.$_el[0].innerHTML; ui.innerHTML = ui.$_el[0].innerHTML
ui.$_el.data(DATA_KEY, this); ui.$_el.data(DATA_KEY, this)
const href = ui.$_el.attr("href") || ui.$_el.data("href"); const href = ui.$_el.attr('href') || ui.$_el.data('href')
const YouTubeGetID = (url) => { const YouTubeGetID = (url) => {
const parsedURL = url.split( const parsedURL = url.split(
/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/ /(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/
); )
console.log(`${NAME}: ${parsedURL}`); console.log(`${NAME}: ${parsedURL}`)
return undefined !== parsedURL[2] return undefined !== parsedURL[2]
? parsedURL[2].split(/[^0-9a-z_-]/i)[0] ? parsedURL[2].split(/[^0-9a-z_-]/i)[0]
: parsedURL[0]; : parsedURL[0]
}; }
let video; let video
if ( if (
(video = href.match( (video = href.match(
/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/ /(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/
)) ))
) { ) {
let video_id; let video_id
if ( if (
video[1] === "youtube" || video[1] === 'youtube' ||
video[1] === "youtube-nocookie" || video[1] === 'youtube-nocookie' ||
video[1] === "youtu" video[1] === 'youtu'
) { ) {
video_id = YouTubeGetID(href); video_id = YouTubeGetID(href)
} }
if (video[1] == "vimeo") { if (video[1] == 'vimeo') {
video_id = video[3]; video_id = video[3]
ui.$_el.addClass("loading"); ui.$_el.addClass('loading')
$.ajax({ $.ajax({
type: "GET", type: 'GET',
url: `https://vimeo.com/api/v2/video/${video_id}.json`, url: `https://vimeo.com/api/v2/video/${video_id}.json`,
jsonp: "callback", jsonp: 'callback',
dataType: "jsonp", dataType: 'jsonp',
success: function (data) { success: function (data) {
const thumbnail_src = data[0].thumbnail_large; const thumbnail_src = data[0].thumbnail_large
ui.show(thumbnail_src); ui.show(thumbnail_src)
ui.$_el.removeClass("loading"); ui.$_el.removeClass('loading')
}, },
}); })
return; return
} }
if (video_id) { if (video_id) {
ui.show(`//i3.ytimg.com/vi/${video_id}/0.jpg`); ui.show(`//i3.ytimg.com/vi/${video_id}/0.jpg`)
} }
} }
} }
show(src) { show (src) {
const ui = this; const ui = this
ui.$_el[0].innerHTML = ""; ui.$_el[0].innerHTML = ''
ui.$_el.append(`<img src="${src}" alt="Video" />`); ui.$_el.append(`<img src="${src}" alt="Video" />`)
} }
static dispose() { static dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
ui.$_el[0].innerHTML = ui.innerHTML; ui.$_el[0].innerHTML = ui.innerHTML
} }
static _jQueryInterface() { static _jQueryInterface () {
return this.each((i, el) => { return this.each((i, el) => {
// attach functionality to element // attach functionality to element
const $el = $(el); const $el = $(el)
let data = $el.data(DATA_KEY); let data = $el.data(DATA_KEY)
if (!data) { if (!data) {
data = new VideoPreviewUI(el); data = new VideoPreviewUI(el)
$el.data(DATA_KEY, data); $el.data(DATA_KEY, data)
} }
}); })
} }
} }
// jQuery interface // jQuery interface
$.fn[NAME] = VideoPreviewUI._jQueryInterface; $.fn[NAME] = VideoPreviewUI._jQueryInterface
$.fn[NAME].Constructor = VideoPreviewUI; $.fn[NAME].Constructor = VideoPreviewUI
$.fn[NAME].noConflict = () => { $.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT; $.fn[NAME] = JQUERY_NO_CONFLICT
return VideoPreviewUI._jQueryInterface; return VideoPreviewUI._jQueryInterface
}; }
// auto-apply // auto-apply
$(window).on(`${Events.LODEDANDREADY}`, () => { $(window).on(`${Events.LODEDANDREADY}`, () => {
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
$('[data-video-preview="true"]').each((i, el) => { $('[data-video-preview="true"]').each((i, el) => {
$(el).jsVideoPreviewUI(); $(el).jsVideoPreviewUI()
}); })
}); })
return VideoPreviewUI; return VideoPreviewUI
})($); })($)
export default VideoPreviewUI; export default VideoPreviewUI

16
src/js_old/_components/_ui.visibility.js
View File

@ -1,16 +1,16 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
const G = window; const G = window
const D = document; const D = document
// remove browser default alerts // remove browser default alerts
/*alert = function () { /* alert = function () {
console.log(arguments); console.log(arguments);
console.log(new Error().stack); console.log(new Error().stack);
};*/ }; */
/*G.addEventListener(G.visibilityChangeEvent, () => { /* G.addEventListener(G.visibilityChangeEvent, () => {
if (currentPage && typeof currentPage !== 'undefined') { if (currentPage && typeof currentPage !== 'undefined') {
if ( if (
landingPage !== G.location.href && landingPage !== G.location.href &&
@ -23,4 +23,4 @@ const D = document;
G.localStorage.removeItem('current-page'); G.localStorage.removeItem('current-page');
} }
} }
});*/ }); */

48
src/js_old/_components/drivers/_google.track.external.links.js
View File

@ -1,61 +1,61 @@
function _gaLt(event) { function _gaLt (event) {
if (typeof ga !== "function") { if (typeof ga !== 'function') {
return; return
} }
var el = event.srcElement || event.target; let el = event.srcElement || event.target
/* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */ /* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
while ( while (
el && el &&
(typeof el.tagName == "undefined" || (typeof el.tagName === 'undefined' ||
el.tagName.toLowerCase() != "a" || el.tagName.toLowerCase() != 'a' ||
!el.href) !el.href)
) { ) {
el = el.parentNode; el = el.parentNode
} }
if (el && el.href) { if (el && el.href) {
/* link */ /* link */
var link = el.href; const link = el.href
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) { if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
/* external link */ /* external link */
/* HitCallback function to either open link in either same or new window */ /* HitCallback function to either open link in either same or new window */
var hitBack = function (link, target) { const hitBack = function (link, target) {
target ? window.open(link, target) : (window.location.href = link); target ? window.open(link, target) : (window.location.href = link)
}; }
/* Is target set and not _(self|parent|top)? */ /* Is target set and not _(self|parent|top)? */
var target = const target =
el.target && !el.target.match(/^_(self|parent|top)$/i) el.target && !el.target.match(/^_(self|parent|top)$/i)
? el.target ? el.target
: false; : false
/* send event with callback */ /* send event with callback */
ga( ga(
"send", 'send',
"event", 'event',
"Outgoing Links", 'Outgoing Links',
link, link,
document.location.pathname + document.location.search, document.location.pathname + document.location.search,
{ hitCallback: hitBack(link, target) } { hitCallback: hitBack(link, target) }
); )
/* Prevent standard click */ /* Prevent standard click */
event.preventDefault ? event.preventDefault() : (event.returnValue = !1); event.preventDefault ? event.preventDefault() : (event.returnValue = !1)
} }
} }
} }
/* Attach the event to all clicks in the document after page has loaded */ /* Attach the event to all clicks in the document after page has loaded */
var w = window; const w = window
w.addEventListener w.addEventListener
? w.addEventListener( ? w.addEventListener(
"load", 'load',
() => { () => {
document.body.addEventListener("click", _gaLt, !1); document.body.addEventListener('click', _gaLt, !1)
}, },
!1 !1
) )
: w.attachEvent && : w.attachEvent &&
w.attachEvent("onload", () => { w.attachEvent('onload', () => {
document.body.attachEvent("onclick", _gaLt); document.body.attachEvent('onclick', _gaLt)
}); })

243
src/js_old/_components/drivers/_map.google.font-icons.js
View File

@ -1,197 +1,196 @@
"use strict"; 'use strict'
const Obj = { const Obj = {
init: () => { init: () => {
class GoogleMapsHtmlOverlay extends google.maps.OverlayView { class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
constructor(options) { constructor (options) {
super(); super()
const ui = this; const ui = this
ui.setMap(options.map); ui.setMap(options.map)
ui.position = options.position; ui.position = options.position
ui.html = options.html ui.html = options.html
? options.html ? options.html
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'; : '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
ui.divClass = options.divClass; ui.divClass = options.divClass
ui.align = options.align; ui.align = options.align
ui.isDebugMode = options.debug; ui.isDebugMode = options.debug
ui.onClick = options.onClick; ui.onClick = options.onClick
ui.onMouseOver = options.onMouseOver; ui.onMouseOver = options.onMouseOver
ui.isBoolean = (arg) => { ui.isBoolean = (arg) => {
if (typeof arg === "boolean") { if (typeof arg === 'boolean') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isNotUndefined = (arg) => { ui.isNotUndefined = (arg) => {
if (typeof arg !== "undefined") { if (typeof arg !== 'undefined') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.hasContent = (arg) => { ui.hasContent = (arg) => {
if (arg.length > 0) { if (arg.length > 0) {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isString = (arg) => { ui.isString = (arg) => {
if (typeof arg === "string") { if (typeof arg === 'string') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isFunction = (arg) => { ui.isFunction = (arg) => {
if (typeof arg === "function") { if (typeof arg === 'function') {
return true; return true
} else { } else {
return false; return false
} }
};
} }
onAdd() { }
const ui = this;
onAdd () {
const ui = this
// Create div element. // Create div element.
ui.div = document.createElement("div"); ui.div = document.createElement('div')
ui.div.style.position = "absolute"; ui.div.style.position = 'absolute'
// Validate and set custom div class // Validate and set custom div class
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
ui.div.className = ui.divClass;
// Validate and set custom HTML // Validate and set custom HTML
if ( if (
ui.isNotUndefined(ui.html) && ui.isNotUndefined(ui.html) &&
ui.hasContent(ui.html) && ui.hasContent(ui.html) &&
ui.isString(ui.html) ui.isString(ui.html)
) ) { ui.div.innerHTML = ui.html }
ui.div.innerHTML = ui.html;
// If debug mode is enabled custom content will be replaced with debug content // If debug mode is enabled custom content will be replaced with debug content
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) { if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
ui.div.className = "debug-mode"; ui.div.className = 'debug-mode'
ui.div.innerHTML = ui.div.innerHTML =
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' + '<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'; '<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'
ui.div.setAttribute( ui.div.setAttribute(
"style", 'style',
"position: absolute;" + 'position: absolute;' +
"border: 5px dashed red;" + 'border: 5px dashed red;' +
"height: 150px;" + 'height: 150px;' +
"width: 150px;" + 'width: 150px;' +
"display: flex;" + 'display: flex;' +
"justify-content: center;" + 'justify-content: center;' +
"align-items: center;" 'align-items: center;'
); )
} }
// Add element to clickable layer // Add element to clickable layer
ui.getPanes().overlayMouseTarget.appendChild(ui.div); ui.getPanes().overlayMouseTarget.appendChild(ui.div)
// Add listeners to the element. // Add listeners to the element.
google.maps.event.addDomListener(ui.div, "click", (event) => { google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, "click"); google.maps.event.trigger(ui, 'click')
if (ui.isFunction(ui.onClick)) ui.onClick(); if (ui.isFunction(ui.onClick)) ui.onClick()
event.stopPropagation(); event.stopPropagation()
}); })
google.maps.event.addDomListener(ui.div, "mouseover", (event) => { google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, "mouseover"); google.maps.event.trigger(ui, 'mouseover')
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver(); if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
event.stopPropagation(); event.stopPropagation()
}); })
} }
draw() { draw () {
const ui = this; const ui = this
// Calculate position of div // Calculate position of div
var positionInPixels = ui const positionInPixels = ui
.getProjection() .getProjection()
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position)); .fromLatLngToDivPixel(new google.maps.LatLng(ui.position))
// Align HTML overlay relative to original position // Align HTML overlay relative to original position
var divOffset = { const divOffset = {
y: undefined, y: undefined,
x: undefined, x: undefined,
}; }
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") { switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
case "left top": case 'left top':
divOffset.y = ui.div.offsetHeight; divOffset.y = ui.div.offsetHeight
divOffset.x = ui.div.offsetWidth; divOffset.x = ui.div.offsetWidth
break; break
case "left center": case 'left center':
divOffset.y = ui.div.offsetHeight / 2; divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth; divOffset.x = ui.div.offsetWidth
break; break
case "left bottom": case 'left bottom':
divOffset.y = 0; divOffset.y = 0
divOffset.x = ui.div.offsetWidth; divOffset.x = ui.div.offsetWidth
break; break
case "center top": case 'center top':
divOffset.y = ui.div.offsetHeight; divOffset.y = ui.div.offsetHeight
divOffset.x = ui.div.offsetWidth / 2; divOffset.x = ui.div.offsetWidth / 2
break; break
case "center center": case 'center center':
divOffset.y = ui.div.offsetHeight / 2; divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth / 2; divOffset.x = ui.div.offsetWidth / 2
break; break
case "center bottom": case 'center bottom':
divOffset.y = 0; divOffset.y = 0
divOffset.x = ui.div.offsetWidth / 2; divOffset.x = ui.div.offsetWidth / 2
break; break
case "right top": case 'right top':
divOffset.y = ui.div.offsetHeight; divOffset.y = ui.div.offsetHeight
divOffset.x = 0; divOffset.x = 0
break; break
case "right center": case 'right center':
divOffset.y = ui.div.offsetHeight / 2; divOffset.y = ui.div.offsetHeight / 2
divOffset.x = 0; divOffset.x = 0
break; break
case "right bottom": case 'right bottom':
divOffset.y = 0; divOffset.y = 0
divOffset.x = 0; divOffset.x = 0
break; break
default: default:
divOffset.y = ui.div.offsetHeight / 2; divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth / 2; divOffset.x = ui.div.offsetWidth / 2
} }
// Set position // Set position
ui.div.style.top = `${positionInPixels.y - divOffset.y}px`; ui.div.style.top = `${positionInPixels.y - divOffset.y}px`
ui.div.style.left = `${positionInPixels.x - divOffset.x}px`; ui.div.style.left = `${positionInPixels.x - divOffset.x}px`
} }
getPosition() { getPosition () {
const ui = this; const ui = this
return ui.position; return ui.position
} }
getDiv() { getDiv () {
const ui = this; const ui = this
return ui.div; return ui.div
} }
setPosition(position, align) { setPosition (position, align) {
const ui = this; const ui = this
ui.position = position; ui.position = position
ui.align = align; ui.align = align
ui.draw(); ui.draw()
} }
} }
return GoogleMapsHtmlOverlay; return GoogleMapsHtmlOverlay
}, },
}; }
export default Obj; export default Obj

272
src/js_old/_components/drivers/_map.google.js
View File

@ -1,294 +1,294 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import MarkerClusterer from "@googlemaps/markerclustererplus"; import MarkerClusterer from '@googlemaps/markerclustererplus'
import Events from "../../_events"; import Events from '../../_events'
import MarkerUI from "./_map.google.marker"; import MarkerUI from './_map.google.marker'
const GoogleMapsDriver = (($) => { const GoogleMapsDriver = (($) => {
class GoogleMapsDriver { class GoogleMapsDriver {
getName() { getName () {
return "GoogleMapsDriver"; return 'GoogleMapsDriver'
} }
init($el, config = []) { init ($el, config = []) {
const ui = this; const ui = this
const W = window; const W = window
ui.$el = $el; ui.$el = $el
ui.config = config; ui.config = config
ui.markers = []; ui.markers = []
W[`init${ui.getName()}`] = () => { W[`init${ui.getName()}`] = () => {
ui.googleApiLoaded(); ui.googleApiLoaded()
};
$("body").append(
`<script async defer src="https://maps.googleapis.com/maps/api/js?key=${
config["key"]
}&callback=init${ui.getName()}"></script>`
);
} }
googleApiLoaded() { $('body').append(
const ui = this; `<script async defer src="https://maps.googleapis.com/maps/api/js?key=${
config.key
}&callback=init${ui.getName()}"></script>`
)
}
const $el = ui.$el; googleApiLoaded () {
const config = ui.config; const ui = this
const $mapDiv = $el.find(".mapAPI-map");
const zoom = config["mapZoom"] ? config["mapZoom"] : 10; const $el = ui.$el
const center = config["center"] const config = ui.config
const $mapDiv = $el.find('.mapAPI-map')
const zoom = config.mapZoom ? config.mapZoom : 10
const center = config.center
? { ? {
lat: config["center"][1], lat: config.center[1],
lng: config["center"][0], lng: config.center[0],
} }
: { : {
lat: 0, lat: 0,
lng: 0, lng: 0,
}; }
const style = config["style"] ? config["style"] : null; const style = config.style ? config.style : null
console.log(`${ui.getName()}: API is loaded`); console.log(`${ui.getName()}: API is loaded`)
// init fontawesome icons // init fontawesome icons
ui.MarkerUI = MarkerUI.init($); ui.MarkerUI = MarkerUI.init($)
ui.map = new google.maps.Map($mapDiv[0], { ui.map = new google.maps.Map($mapDiv[0], {
zoom, zoom,
center, center,
fullscreenControl: true, fullscreenControl: true,
styles: style, styles: style,
}); })
ui.default_zoom = zoom; ui.default_zoom = zoom
$mapDiv.addClass("mapboxgl-map"); $mapDiv.addClass('mapboxgl-map')
ui.popup = new ui.MarkerUI({ ui.popup = new ui.MarkerUI({
map: ui.map, map: ui.map,
align: ["center", "top"], align: ['center', 'top'],
divClass: "mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none", divClass: 'mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none',
html: html:
'<div class="mapboxgl-popup-tip"></div><div class="mapboxgl-popup-content">' + '<div class="mapboxgl-popup-tip"></div><div class="mapboxgl-popup-content">' +
'<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' + '<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' +
'<div class="html"></div>' + '<div class="html"></div>' +
"</div>", '</div>',
}); })
ui.popup.setMap(ui.map); ui.popup.setMap(ui.map)
ui.geocoder = new google.maps.Geocoder(); ui.geocoder = new google.maps.Geocoder()
ui.cluster = new MarkerClusterer(ui.map, null, { ui.cluster = new MarkerClusterer(ui.map, null, {
styles: [ styles: [
{ {
width: 30, width: 30,
height: 30, height: 30,
className: "mapboxgl-cluster", className: 'mapboxgl-cluster',
}, },
], ],
}); })
$el.trigger(Events.MAPAPILOADED); $el.trigger(Events.MAPAPILOADED)
} }
addMarker(crds, config) { addMarker (crds, config) {
const ui = this; const ui = this
const pos = { const pos = {
lat: crds[1], lat: crds[1],
lng: crds[0], lng: crds[0],
}; }
const marker = new ui.MarkerUI({ const marker = new ui.MarkerUI({
position: pos, position: pos,
map: ui.map, map: ui.map,
align: ["center", "top"], align: ['center', 'top'],
html: `<div class="mapboxgl-marker"><div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div></div>`, html: `<div class="mapboxgl-marker"><div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div></div>`,
onClick: () => { onClick: () => {
const $el = $(`#Marker${config["id"]}`); const $el = $(`#Marker${config.id}`)
ui.showPopup(pos, config["content"]); ui.showPopup(pos, config.content)
$el.trigger(Events.MAPMARKERCLICK); $el.trigger(Events.MAPMARKERCLICK)
}, },
}); })
ui.markers.push(marker); ui.markers.push(marker)
ui.cluster.addMarker(marker); ui.cluster.addMarker(marker)
return marker; return marker
} }
showPopup(pos, content) { showPopup (pos, content) {
const ui = this; const ui = this
const $popup = $(ui.popup.getDiv()); const $popup = $(ui.popup.getDiv())
if (ui.config["flyToMarker"]) { if (ui.config.flyToMarker) {
ui.map.setCenter(pos); // panTo ui.map.setCenter(pos) // panTo
if (!ui.config["noZoom"]) { if (!ui.config.noZoom) {
ui.map.setZoom(18); ui.map.setZoom(18)
} }
} }
// keep it hidden to render content // keep it hidden to render content
$popup.css({ $popup.css({
opacity: "0", opacity: '0',
}); })
$popup.removeClass("d-none"); $popup.removeClass('d-none')
$popup.find(".mapboxgl-popup-content .html").html(content); $popup.find('.mapboxgl-popup-content .html').html(content)
$popup.find(".mapboxgl-popup-close-button").on("click", (e) => { $popup.find('.mapboxgl-popup-close-button').on('click', (e) => {
e.preventDefault(); e.preventDefault()
ui.hidePopup(); ui.hidePopup()
}); })
// set position when content was rendered // set position when content was rendered
ui.popup.setPosition(pos, ["center", "top"]); ui.popup.setPosition(pos, ['center', 'top'])
// display popup // display popup
$popup.css({ $popup.css({
"margin-top": "-1rem", 'margin-top': '-1rem',
opacity: "1", opacity: '1',
}); })
} }
hidePopup() { hidePopup () {
const ui = this; const ui = this
const $popup = $(ui.popup.getDiv()); const $popup = $(ui.popup.getDiv())
$popup.addClass("d-none"); $popup.addClass('d-none')
if (!ui.config["noRestoreBounds"] || ui.config["flyToBounds"]) { if (!ui.config.noRestoreBounds || ui.config.flyToBounds) {
ui.restoreBounds(); ui.restoreBounds()
} }
ui.$el.trigger(Events.MAPPOPUPCLOSE); ui.$el.trigger(Events.MAPPOPUPCLOSE)
} }
geocode(addr, callback) { geocode (addr, callback) {
const ui = this; const ui = this
ui.geocoder.geocode( ui.geocoder.geocode(
{ {
address: addr, address: addr,
}, },
(results, status) => { (results, status) => {
if (status === "OK") { if (status === 'OK') {
//results[0].geometry.location; // results[0].geometry.location;
if (typeof callback === "function") { if (typeof callback === 'function') {
callback(results); callback(results)
} }
return results; return results
} else { } else {
console.error( console.error(
`${ui.getName()}: Geocode was not successful for the following reason: ${status}` `${ui.getName()}: Geocode was not successful for the following reason: ${status}`
); )
} }
} }
); )
} }
reverseGeocode(latLng, callback) { reverseGeocode (latLng, callback) {
const ui = this; const ui = this
ui.geocoder.geocode( ui.geocoder.geocode(
{ {
location: latlng, location: latlng,
}, },
(results, status) => { (results, status) => {
if (status === "OK") { if (status === 'OK') {
//results[0].formatted_address; // results[0].formatted_address;
if (typeof callback === "function") { if (typeof callback === 'function') {
callback(results); callback(results)
} }
return results; return results
} else { } else {
console.error( console.error(
`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}` `${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
); )
} }
} }
); )
} }
addGeoJson(config) { addGeoJson (config) {
const ui = this; const ui = this
const firstMarker = config["geojson"].features[0].geometry.coordinates; const firstMarker = config.geojson.features[0].geometry.coordinates
//Map.setCenter(firstMarker); // Map.setCenter(firstMarker);
const bounds = new google.maps.LatLngBounds(); const bounds = new google.maps.LatLngBounds()
// add markers to map // add markers to map
config["geojson"].features.forEach((marker) => { config.geojson.features.forEach((marker) => {
const id = marker.id; const id = marker.id
const crds = marker.geometry.coordinates; const crds = marker.geometry.coordinates
const content = marker.properties.content; const content = marker.properties.content
ui.addMarker(crds, { ui.addMarker(crds, {
id, id,
content, content,
icon: marker.icon, icon: marker.icon,
flyToMarker: config["flyToMarker"], flyToMarker: config.flyToMarker,
}); })
bounds.extend({ bounds.extend({
lat: crds[1], lat: crds[1],
lng: crds[0], lng: crds[0],
}); })
}); })
if (ui.markers.length > 1) { if (ui.markers.length > 1) {
ui.map.fitBounds(bounds, { ui.map.fitBounds(bounds, {
padding: 30, padding: 30,
}); //panToBounds }) // panToBounds
} else if (ui.markers[0]) { } else if (ui.markers[0]) {
ui.map.setCenter(ui.markers[0].getPosition()); ui.map.setCenter(ui.markers[0].getPosition())
} }
ui.default_bounds = bounds; ui.default_bounds = bounds
ui.default_zoom = ui.map.getZoom(); ui.default_zoom = ui.map.getZoom()
} }
getMap() { getMap () {
const ui = this; const ui = this
return ui.map; return ui.map
} }
getPopup() { getPopup () {
const ui = this; const ui = this
return ui.popup; return ui.popup
} }
restoreBounds() { restoreBounds () {
const ui = this; const ui = this
if (ui.default_bounds && ui.markers.length > 1) { if (ui.default_bounds && ui.markers.length > 1) {
ui.map.fitBounds(ui.default_bounds, { ui.map.fitBounds(ui.default_bounds, {
padding: 30, padding: 30,
}); //panToBounds }) // panToBounds
} else { } else {
if (ui.markers[0]) { if (ui.markers[0]) {
ui.map.setCenter(ui.markers[0].getPosition()); ui.map.setCenter(ui.markers[0].getPosition())
} }
ui.restoreZoom(); ui.restoreZoom()
} }
} }
restoreZoom() { restoreZoom () {
const ui = this; const ui = this
ui.map.setZoom(ui.default_zoom); ui.map.setZoom(ui.default_zoom)
} }
} }
return GoogleMapsDriver; return GoogleMapsDriver
})($); })($)
export default GoogleMapsDriver; export default GoogleMapsDriver

273
src/js_old/_components/drivers/_map.google.marker.js
View File

@ -1,228 +1,227 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
const Obj = { const Obj = {
init: () => { init: () => {
class GoogleMapsHtmlOverlay extends google.maps.OverlayView { class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
constructor(options) { constructor (options) {
super(); super()
const ui = this; const ui = this
ui.ownerMap = options.map; ui.ownerMap = options.map
//ui.setMap(options.map); // ui.setMap(options.map);
ui.position = options.position; ui.position = options.position
ui.html = options.html ui.html = options.html
? options.html ? options.html
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'; : '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
ui.divClass = options.divClass; ui.divClass = options.divClass
ui.align = options.align; ui.align = options.align
ui.isDebugMode = options.debug; ui.isDebugMode = options.debug
ui.onClick = options.onClick; ui.onClick = options.onClick
ui.onMouseOver = options.onMouseOver; ui.onMouseOver = options.onMouseOver
ui.isBoolean = (arg) => { ui.isBoolean = (arg) => {
if (typeof arg === "boolean") { if (typeof arg === 'boolean') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isNotUndefined = (arg) => { ui.isNotUndefined = (arg) => {
if (typeof arg !== "undefined") { if (typeof arg !== 'undefined') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.hasContent = (arg) => { ui.hasContent = (arg) => {
if (arg.length > 0) { if (arg.length > 0) {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isString = (arg) => { ui.isString = (arg) => {
if (typeof arg === "string") { if (typeof arg === 'string') {
return true; return true
} else { } else {
return false; return false
}
} }
};
ui.isFunction = (arg) => { ui.isFunction = (arg) => {
if (typeof arg === "function") { if (typeof arg === 'function') {
return true; return true
} else { } else {
return false; return false
} }
};
} }
onAdd() { }
const ui = this;
onAdd () {
const ui = this
// Create div element. // Create div element.
ui.div = document.createElement("div"); ui.div = document.createElement('div')
ui.div.style.position = "absolute"; ui.div.style.position = 'absolute'
// Validate and set custom div class // Validate and set custom div class
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
ui.div.className = ui.divClass;
// Validate and set custom HTML // Validate and set custom HTML
if ( if (
ui.isNotUndefined(ui.html) && ui.isNotUndefined(ui.html) &&
ui.hasContent(ui.html) && ui.hasContent(ui.html) &&
ui.isString(ui.html) ui.isString(ui.html)
) ) { ui.div.innerHTML = ui.html }
ui.div.innerHTML = ui.html;
// If debug mode is enabled custom content will be replaced with debug content // If debug mode is enabled custom content will be replaced with debug content
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) { if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
ui.div.className = "debug-mode"; ui.div.className = 'debug-mode'
ui.div.innerHTML = ui.div.innerHTML =
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' + '<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'; '<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'
ui.div.setAttribute( ui.div.setAttribute(
"style", 'style',
"position: absolute;" + 'position: absolute;' +
"border: 5px dashed red;" + 'border: 5px dashed red;' +
"height: 150px;" + 'height: 150px;' +
"width: 150px;" + 'width: 150px;' +
"display: flex;" + 'display: flex;' +
"justify-content: center;" + 'justify-content: center;' +
"align-items: center;" 'align-items: center;'
); )
} }
// Add element to clickable layer // Add element to clickable layer
ui.getPanes().overlayMouseTarget.appendChild(ui.div); ui.getPanes().overlayMouseTarget.appendChild(ui.div)
// Add listeners to the element. // Add listeners to the element.
google.maps.event.addDomListener(ui.div, "click", (event) => { google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, "click"); google.maps.event.trigger(ui, 'click')
if (ui.isFunction(ui.onClick)) ui.onClick(); if (ui.isFunction(ui.onClick)) ui.onClick()
event.stopPropagation(); event.stopPropagation()
}); })
google.maps.event.addDomListener(ui.div, "mouseover", (event) => { google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, "mouseover"); google.maps.event.trigger(ui, 'mouseover')
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver(); if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
event.stopPropagation(); event.stopPropagation()
}); })
} }
draw() { draw () {
const ui = this; const ui = this
let $div = $(ui.div).find( let $div = $(ui.div).find(
".mapboxgl-marker,.marker-pin,.mapboxgl-popup,.popup" '.mapboxgl-marker,.marker-pin,.mapboxgl-popup,.popup'
); )
if (!$div.length) { if (!$div.length) {
$div = $(ui.div); $div = $(ui.div)
} }
// Calculate position of div // Calculate position of div
const projection = ui.getProjection(); const projection = ui.getProjection()
if (!projection) { if (!projection) {
console.log("GoogleMapsHtmlOverlay: current map is missing"); console.log('GoogleMapsHtmlOverlay: current map is missing')
return null; return null
} }
const positionInPixels = projection.fromLatLngToDivPixel( const positionInPixels = projection.fromLatLngToDivPixel(
ui.getPosition() ui.getPosition()
); )
// Align HTML overlay relative to original position // Align HTML overlay relative to original position
const offset = { const offset = {
y: undefined, y: undefined,
x: undefined, x: undefined,
}; }
const divWidth = $div.outerWidth(); const divWidth = $div.outerWidth()
const divHeight = $div.outerHeight(); const divHeight = $div.outerHeight()
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") { switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
case "left top": case 'left top':
offset.y = divHeight; offset.y = divHeight
offset.x = divWidth; offset.x = divWidth
break; break
case "left center": case 'left center':
offset.y = divHeight / 2; offset.y = divHeight / 2
offset.x = divWidth; offset.x = divWidth
break; break
case "left bottom": case 'left bottom':
offset.y = 0; offset.y = 0
offset.x = divWidth; offset.x = divWidth
break; break
case "center top": case 'center top':
offset.y = divHeight; offset.y = divHeight
offset.x = divWidth / 2; offset.x = divWidth / 2
break; break
case "center center": case 'center center':
offset.y = divHeight / 2; offset.y = divHeight / 2
offset.x = divWidth / 2; offset.x = divWidth / 2
break; break
case "center bottom": case 'center bottom':
offset.y = 0; offset.y = 0
offset.x = divWidth / 2; offset.x = divWidth / 2
break; break
case "right top": case 'right top':
offset.y = divHeight; offset.y = divHeight
offset.x = 0; offset.x = 0
break; break
case "right center": case 'right center':
offset.y = divHeight / 2; offset.y = divHeight / 2
offset.x = 0; offset.x = 0
break; break
case "right bottom": case 'right bottom':
offset.y = 0; offset.y = 0
offset.x = 0; offset.x = 0
break; break
default: default:
offset.y = divHeight / 2; offset.y = divHeight / 2
offset.x = divWidth / 2; offset.x = divWidth / 2
break; break
} }
// Set position // Set position
ui.div.style.top = `${positionInPixels.y - offset.y}px`; ui.div.style.top = `${positionInPixels.y - offset.y}px`
ui.div.style.left = `${positionInPixels.x - offset.x}px`; ui.div.style.left = `${positionInPixels.x - offset.x}px`
} }
getPosition() { getPosition () {
const ui = this; const ui = this
return new google.maps.LatLng(ui.position); return new google.maps.LatLng(ui.position)
} }
getDiv() { getDiv () {
const ui = this; const ui = this
return ui.div; return ui.div
} }
setPosition(position, align) { setPosition (position, align) {
const ui = this; const ui = this
ui.position = position; ui.position = position
ui.align = align; ui.align = align
ui.draw(); ui.draw()
} }
remove() { remove () {
const ui = this; const ui = this
ui.setMap(null); ui.setMap(null)
ui.div.remove(); ui.div.remove()
} }
// emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus) // emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus)
getDraggable() { getDraggable () {
return false; return false
} }
} }
return GoogleMapsHtmlOverlay; return GoogleMapsHtmlOverlay
}, },
}; }
export default Obj; export default Obj

140
src/js_old/_components/drivers/_map.mapbox.js
View File

@ -1,40 +1,40 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import mapBoxGL from "mapbox-gl"; import mapBoxGL from 'mapbox-gl'
import Events from "../../_events"; import Events from '../../_events'
const MapBoxDriver = (($) => { const MapBoxDriver = (($) => {
class MapBoxDriver { class MapBoxDriver {
getName() { getName () {
return "MapBoxDriver"; return 'MapBoxDriver'
} }
init($el, config = []) { init ($el, config = []) {
const ui = this; const ui = this
mapBoxGL.accessToken = config["key"]; mapBoxGL.accessToken = config.key
ui.map = new mapBoxGL.Map({ ui.map = new mapBoxGL.Map({
container: $el.find(".mapAPI-map")[0], container: $el.find('.mapAPI-map')[0],
center: config["center"] ? config["center"] : [0, 0], center: config.center ? config.center : [0, 0],
//hash: true, // hash: true,
style: config["style"] style: config.style
? config["style"] ? config.style
: "mapbox://styles/mapbox/streets-v9", : 'mapbox://styles/mapbox/streets-v9',
localIdeographFontFamily: config["font-family"], localIdeographFontFamily: config['font-family'],
zoom: config["mapZoom"] ? config["mapZoom"] : 10, zoom: config.mapZoom ? config.mapZoom : 10,
attributionControl: false, attributionControl: false,
antialias: true, antialias: true,
accessToken: config["key"], accessToken: config.key,
}) })
.addControl( .addControl(
new mapBoxGL.AttributionControl({ new mapBoxGL.AttributionControl({
compact: true, compact: true,
}) })
) )
.addControl(new mapBoxGL.NavigationControl(), "top-right") .addControl(new mapBoxGL.NavigationControl(), 'top-right')
.addControl( .addControl(
new mapBoxGL.GeolocateControl({ new mapBoxGL.GeolocateControl({
positionOptions: { positionOptions: {
@ -42,58 +42,58 @@ const MapBoxDriver = (($) => {
}, },
trackUserLocation: true, trackUserLocation: true,
}), }),
"bottom-right" 'bottom-right'
) )
.addControl( .addControl(
new mapBoxGL.ScaleControl({ new mapBoxGL.ScaleControl({
maxWidth: 80, maxWidth: 80,
unit: "metric", unit: 'metric',
}), }),
"top-left" 'top-left'
) )
.addControl(new mapBoxGL.FullscreenControl()); .addControl(new mapBoxGL.FullscreenControl())
ui.map.on("load", (e) => { ui.map.on('load', (e) => {
$el.trigger(Events.MAPAPILOADED); $el.trigger(Events.MAPAPILOADED)
}); })
ui.popup = new mapBoxGL.Popup({ ui.popup = new mapBoxGL.Popup({
closeOnClick: false, closeOnClick: false,
className: "popup", className: 'popup',
}); })
} }
addMarker(crds, config) { addMarker (crds, config) {
const ui = this; const ui = this
// create a DOM el for the marker // create a DOM el for the marker
const $el = $( const $el = $(
`<div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div>` `<div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div>`
); )
$el.on("click", (e) => { $el.on('click', (e) => {
ui.popup.setLngLat(crds).setHTML(config["content"]).addTo(ui.map); ui.popup.setLngLat(crds).setHTML(config.content).addTo(ui.map)
if (config["flyToMarker"]) { if (config.flyToMarker) {
ui.map.flyTo({ ui.map.flyTo({
center: crds, center: crds,
zoom: 17, zoom: 17,
}); })
} }
$(e.currentTarget).trigger(Events.MAPMARKERCLICK); $(e.currentTarget).trigger(Events.MAPMARKERCLICK)
}); })
// add marker to map // add marker to map
const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map); const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map)
return marker; return marker
} }
addGeoJson(config) { addGeoJson (config) {
const ui = this; const ui = this
// Insert the layer beneath any symbol layer. // Insert the layer beneath any symbol layer.
/*if (config['3d']) { /* if (config['3d']) {
const layers = Map.getStyle().layers; const layers = Map.getStyle().layers;
let labelLayerId; let labelLayerId;
for (let i = 0; i < layers.length; i++) { for (let i = 0; i < layers.length; i++) {
@ -130,55 +130,55 @@ const MapBoxDriver = (($) => {
'fill-extrusion-opacity': .6, 'fill-extrusion-opacity': .6,
}, },
}, labelLayerId); }, labelLayerId);
}*/ } */
const firstMarker = config["geojson"].features[0].geometry.coordinates; const firstMarker = config.geojson.features[0].geometry.coordinates
//Map.setCenter(firstMarker); // Map.setCenter(firstMarker);
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker); const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker)
// add markers to map // add markers to map
config["geojson"].features.forEach((marker) => { config.geojson.features.forEach((marker) => {
const id = marker.id; const id = marker.id
const crds = marker.geometry.coordinates; const crds = marker.geometry.coordinates
const content = marker.properties.content; const content = marker.properties.content
ui.addMarker(crds, { ui.addMarker(crds, {
id, id,
content, content,
icon: marker.icon, icon: marker.icon,
flyToMarker: config["flyToMarker"], flyToMarker: config.flyToMarker,
}); })
bounds.extend(crds); bounds.extend(crds)
}); })
ui.map.fitBounds(bounds, { ui.map.fitBounds(bounds, {
padding: 30, padding: 30,
}); })
ui.popup.on("close", (e) => { ui.popup.on('close', (e) => {
if (config["flyToBounds"]) { if (config.flyToBounds) {
ui.map.fitBounds(bounds, { ui.map.fitBounds(bounds, {
padding: 30, padding: 30,
}); })
} }
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE); $(e.currentTarget).trigger(Events.MAPPOPUPCLOSE)
}); })
} }
getMap() { getMap () {
const ui = this; const ui = this
return ui.map; return ui.map
} }
getPopup() { getPopup () {
const ui = this; const ui = this
return ui.popup; return ui.popup
} }
} }
return MapBoxDriver; return MapBoxDriver
})($); })($)
export default MapBoxDriver; export default MapBoxDriver

336
src/js_old/_components/mapStorage.js
View File

@ -1,178 +1,178 @@
"use strict"; 'use strict'
import mapbox from "mapbox-gl"; import mapbox from 'mapbox-gl'
window.offlineMaps = {}; window.offlineMaps = {}
window.offlineMaps.eventManager = { window.offlineMaps.eventManager = {
_events: {}, _events: {},
on: function (event, action) { on: function (event, action) {
console.log(`event.on: ${event}`); console.log(`event.on: ${event}`)
if (!(event in this._events)) { if (!(event in this._events)) {
this._events[event] = []; this._events[event] = []
} }
this._events[event].push(action); this._events[event].push(action)
return this; return this
}, },
off: function (event) { off: function (event) {
console.log(`event.off: ${event}`); console.log(`event.off: ${event}`)
delete this._events[event]; delete this._events[event]
return this; return this
}, },
fire: function (event) { fire: function (event) {
console.log(`event.fire: ${event}`); console.log(`event.fire: ${event}`)
var events = this._events; const events = this._events
if (event in events) { if (event in events) {
var actions = events[event]; const actions = events[event]
var args = Array.prototype.slice.call(arguments, 1); const args = Array.prototype.slice.call(arguments, 1)
for (var i = 0, l = actions.length; i < l; i++) { for (let i = 0, l = actions.length; i < l; i++) {
var action = actions[i]; const action = actions[i]
if (action instanceof Function) { if (action instanceof Function) {
action.apply(null, args); action.apply(null, args)
} else { } else {
this.fire.apply(this, [action].concat(args)); this.fire.apply(this, [action].concat(args))
} }
} }
} }
return this; return this
}, },
}; };
(function (window, emr, undefined) { (function (window, emr, undefined) {
var getIndexedDBStorage = function () { const getIndexedDBStorage = function () {
var indexedDB = const indexedDB =
window.indexedDB || window.indexedDB ||
window.mozIndexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.webkitIndexedDB ||
window.msIndexedDB; window.msIndexedDB
var IndexedDBImpl = function () { const IndexedDBImpl = function () {
var self = this; const self = this
var db = null; let db = null
var request = indexedDB.open("TileStorage"); const request = indexedDB.open('TileStorage')
request.onsuccess = function () { request.onsuccess = function () {
db = this.result; db = this.result
emr.fire("storageLoaded", self); emr.fire('storageLoaded', self)
}; }
request.onerror = function (error) { request.onerror = function (error) {
console.log(error); console.log(error)
}; }
request.onupgradeneeded = function () { request.onupgradeneeded = function () {
var store = this.result.createObjectStore("tile", { keyPath: "key" }); const store = this.result.createObjectStore('tile', { keyPath: 'key' })
store.createIndex("key", "key", { unique: true }); store.createIndex('key', 'key', { unique: true })
}; }
this.add = function (key, value) { this.add = function (key, value) {
var transaction = db.transaction(["tile"], "readwrite"); const transaction = db.transaction(['tile'], 'readwrite')
var objectStore = transaction.objectStore("tile"); const objectStore = transaction.objectStore('tile')
objectStore.put({ key, value }); objectStore.put({ key, value })
}; }
this.delete = function (key) { this.delete = function (key) {
var transaction = db.transaction(["tile"], "readwrite"); const transaction = db.transaction(['tile'], 'readwrite')
var objectStore = transaction.objectStore("tile"); const objectStore = transaction.objectStore('tile')
objectStore.delete(key); objectStore.delete(key)
}; }
this.get = function (key, successCallback, errorCallback) { this.get = function (key, successCallback, errorCallback) {
var transaction = db.transaction(["tile"], "readonly"); const transaction = db.transaction(['tile'], 'readonly')
var objectStore = transaction.objectStore("tile"); const objectStore = transaction.objectStore('tile')
var result = objectStore.get(key); const result = objectStore.get(key)
result.onsuccess = function () { result.onsuccess = function () {
successCallback(this.result ? this.result.value : undefined); successCallback(this.result ? this.result.value : undefined)
}; }
result.onerror = errorCallback; result.onerror = errorCallback
}; }
}; }
return indexedDB ? new IndexedDBImpl() : null; return indexedDB ? new IndexedDBImpl() : null
}; }
var getWebSqlStorage = function () { const getWebSqlStorage = function () {
var openDatabase = window.openDatabase; const openDatabase = window.openDatabase
var WebSqlImpl = function () { const WebSqlImpl = function () {
var self = this; const self = this
var db = openDatabase( const db = openDatabase(
"TileStorage", 'TileStorage',
"1.0", '1.0',
"Tile Storage", 'Tile Storage',
5 * 1024 * 1024 5 * 1024 * 1024
); )
db.transaction((tx) => { db.transaction((tx) => {
tx.executeSql( tx.executeSql(
"CREATE TABLE IF NOT EXISTS tile (key TEXT PRIMARY KEY, value TEXT)", 'CREATE TABLE IF NOT EXISTS tile (key TEXT PRIMARY KEY, value TEXT)',
[], [],
() => { () => {
emr.fire("storageLoaded", self); emr.fire('storageLoaded', self)
} }
); )
}); })
this.add = function (key, value) { this.add = function (key, value) {
db.transaction((tx) => { db.transaction((tx) => {
tx.executeSql("INSERT INTO tile (key, value) VALUES (?, ?)", [ tx.executeSql('INSERT INTO tile (key, value) VALUES (?, ?)', [
key, key,
value, value,
]); ])
}); })
}; }
this.delete = function (key) { this.delete = function (key) {
db.transaction((tx) => { db.transaction((tx) => {
tx.executeSql("DELETE FROM tile WHERE key = ?", [key]); tx.executeSql('DELETE FROM tile WHERE key = ?', [key])
}); })
}; }
this.get = function (key, successCallback, errorCallback) { this.get = function (key, successCallback, errorCallback) {
db.transaction((tx) => { db.transaction((tx) => {
tx.executeSql( tx.executeSql(
"SELECT value FROM tile WHERE key = ?", 'SELECT value FROM tile WHERE key = ?',
[key], [key],
(tx, result) => { (tx, result) => {
successCallback( successCallback(
result.rows.length ? result.rows.item(0).value : undefined result.rows.length ? result.rows.item(0).value : undefined
); )
}, },
errorCallback errorCallback
); )
}); })
};
};
return openDatabase ? new WebSqlImpl() : null;
};
emr.on("storageLoad", () => {
var storage = getIndexedDBStorage() || getWebSqlStorage() || null;
if (!storage) {
emr.fire("storageLoaded", null);
} }
}); }
return openDatabase ? new WebSqlImpl() : null
}
emr.on('storageLoad', () => {
const storage = getIndexedDBStorage() || getWebSqlStorage() || null
if (!storage) {
emr.fire('storageLoaded', null)
}
})
})(window, window.offlineMaps.eventManager); })(window, window.offlineMaps.eventManager);
(function (window, emr, mapbox, MM, undefined) { (function (window, emr, mapbox, MM, undefined) {
var StorageRequestManager = function (storage) { const StorageRequestManager = function (storage) {
MM.RequestManager.apply(this, []); MM.RequestManager.apply(this, [])
this._storage = storage; this._storage = storage
}; }
StorageRequestManager.prototype._imageToDataUri = function (image) { StorageRequestManager.prototype._imageToDataUri = function (image) {
var canvas = window.document.createElement("canvas"); const canvas = window.document.createElement('canvas')
canvas.width = image.width; canvas.width = image.width
canvas.height = image.height; canvas.height = image.height
var context = canvas.getContext("2d"); const context = canvas.getContext('2d')
context.drawImage(image, 0, 0); context.drawImage(image, 0, 0)
return canvas.toDataURL("image/png"); return canvas.toDataURL('image/png')
}; }
StorageRequestManager.prototype._createTileImage = function ( StorageRequestManager.prototype._createTileImage = function (
id, id,
@ -180,140 +180,140 @@ window.offlineMaps.eventManager = {
value, value,
cache cache
) { ) {
var img = window.document.createElement("img"); const img = window.document.createElement('img')
img.id = id; img.id = id
img.style.position = "absolute"; img.style.position = 'absolute'
img.coord = coord; img.coord = coord
this.loadingBay.appendChild(img); this.loadingBay.appendChild(img)
if (cache) { if (cache) {
img.onload = this.getLoadCompleteWithCache(); img.onload = this.getLoadCompleteWithCache()
img.crossOrigin = "Anonymous"; img.crossOrigin = 'Anonymous'
} else { } else {
img.onload = this.getLoadComplete(); img.onload = this.getLoadComplete()
}
img.onerror = this.getLoadComplete()
img.src = value
} }
img.onerror = this.getLoadComplete();
img.src = value;
};
StorageRequestManager.prototype._loadTile = function (id, coord, url) { StorageRequestManager.prototype._loadTile = function (id, coord, url) {
var self = this; const self = this
if (this._storage) { if (this._storage) {
this._storage.get( this._storage.get(
id, id,
(value) => { (value) => {
if (value) { if (value) {
self._createTileImage(id, coord, value, false); self._createTileImage(id, coord, value, false)
} else { } else {
self._createTileImage(id, coord, url, true); self._createTileImage(id, coord, url, true)
} }
}, },
() => { () => {
self._createTileImage(id, coord, url, true); self._createTileImage(id, coord, url, true)
} }
); )
} else { } else {
self._createTileImage(id, coord, url, false); self._createTileImage(id, coord, url, false)
}
} }
};
StorageRequestManager.prototype.processQueue = function (sortFunc) { StorageRequestManager.prototype.processQueue = function (sortFunc) {
if (sortFunc && this.requestQueue.length > 8) { if (sortFunc && this.requestQueue.length > 8) {
this.requestQueue.sort(sortFunc); this.requestQueue.sort(sortFunc)
} }
while ( while (
this.openRequestCount < this.maxOpenRequests && this.openRequestCount < this.maxOpenRequests &&
this.requestQueue.length > 0 this.requestQueue.length > 0
) { ) {
var request = this.requestQueue.pop(); let request = this.requestQueue.pop()
if (request) { if (request) {
this.openRequestCount++; this.openRequestCount++
this._loadTile(request.id, request.coord, request.url); this._loadTile(request.id, request.coord, request.url)
request = request.id = request.coord = request.url = null; request = request.id = request.coord = request.url = null
}
} }
} }
};
StorageRequestManager.prototype.getLoadCompleteWithCache = function () { StorageRequestManager.prototype.getLoadCompleteWithCache = function () {
if (!this._loadComplete) { if (!this._loadComplete) {
var theManager = this; const theManager = this
this._loadComplete = function (e) { this._loadComplete = function (e) {
//e = e || window.event; // e = e || window.event;
var img = e.srcElement || e.target; const img = e.srcElement || e.target
img.onload = img.onerror = null; img.onload = img.onerror = null
if (theManager._storage) { if (theManager._storage) {
theManager._storage.add(this.id, theManager._imageToDataUri(this)); theManager._storage.add(this.id, theManager._imageToDataUri(this))
} }
theManager.loadingBay.removeChild(img); theManager.loadingBay.removeChild(img)
theManager.openRequestCount--; theManager.openRequestCount--
delete theManager.requestsById[img.id]; delete theManager.requestsById[img.id]
if ( if (
e.type === "load" && e.type === 'load' &&
(img.complete || (img.readyState && img.readyState === "complete")) (img.complete || (img.readyState && img.readyState === 'complete'))
) { ) {
theManager.dispatchCallback("requestcomplete", img); theManager.dispatchCallback('requestcomplete', img)
} else { } else {
theManager.dispatchCallback("requesterror", { theManager.dispatchCallback('requesterror', {
element: img, element: img,
url: `${img.src}`, url: `${img.src}`,
}); })
img.src = null; img.src = null
} }
setTimeout(theManager.getProcessQueue(), 0); setTimeout(theManager.getProcessQueue(), 0)
}; }
}
return this._loadComplete
} }
return this._loadComplete;
};
MM.extend(StorageRequestManager, MM.RequestManager); MM.extend(StorageRequestManager, MM.RequestManager)
var StorageLayer = function (provider, parent, name, storage) { const StorageLayer = function (provider, parent, name, storage) {
this.parent = parent || document.createElement("div"); this.parent = parent || document.createElement('div')
this.parent.style.cssText = this.parent.style.cssText =
"position: absolute; top: 0px; left: 0px;" + 'position: absolute; top: 0px; left: 0px;' +
"width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0"; 'width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0'
this.name = name; this.name = name
this.levels = {}; this.levels = {}
this.requestManager = new StorageRequestManager(storage); this.requestManager = new StorageRequestManager(storage)
this.requestManager.addCallback("requestcomplete", this.getTileComplete()); this.requestManager.addCallback('requestcomplete', this.getTileComplete())
this.requestManager.addCallback("requesterror", this.getTileError()); this.requestManager.addCallback('requesterror', this.getTileError())
if (provider) { if (provider) {
this.setProvider(provider); this.setProvider(provider)
}
} }
};
MM.extend(StorageLayer, MM.Layer); MM.extend(StorageLayer, MM.Layer)
var StorageTemplatedLayer = function (template, subdomains, name, storage) { const StorageTemplatedLayer = function (template, subdomains, name, storage) {
return new StorageLayer( return new StorageLayer(
new MM.Template(template, subdomains), new MM.Template(template, subdomains),
null, null,
name, name,
storage storage
); )
}; }
emr.on("mapLoad", (storage) => { emr.on('mapLoad', (storage) => {
var map = mapbox.map("map"); const map = mapbox.map('map')
map.addLayer( map.addLayer(
new StorageTemplatedLayer( new StorageTemplatedLayer(
"http://{S}.tile.osm.org/{Z}/{X}/{Y}.png", 'http://{S}.tile.osm.org/{Z}/{X}/{Y}.png',
["a", "b", "c"], ['a', 'b', 'c'],
undefined, undefined,
storage storage
) )
); )
map.ui.zoomer.add(); map.ui.zoomer.add()
map.ui.zoombox.add(); map.ui.zoombox.add()
map.centerzoom({ lat: 53.902254, lon: 27.56185 }, 13); map.centerzoom({ lat: 53.902254, lon: 27.56185 }, 13)
}); })
})(window, window.offlineMaps.eventManager, mapbox, MM); })(window, window.offlineMaps.eventManager, mapbox, MM);
(function (emr) { (function (emr) {
emr.on("storageLoaded", "mapLoad"); emr.on('storageLoaded', 'mapLoad')
emr.fire("storageLoad"); emr.fire('storageLoad')
})(window.offlineMaps.eventManager); })(window.offlineMaps.eventManager)

14
src/js_old/_components/routes/index.js
View File

@ -1,13 +1,13 @@
import Events from "../../_events"; import Events from '../../_events'
import Routie from "routie"; import Routie from 'routie'
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
Routie({ Routie({
navigation: function () { navigation: function () {
$("#NavbarCollapse").addClass("in"); $('#NavbarCollapse').addClass('in')
}, },
"carousel:id:num": function (id, num) { 'carousel:id:num': function (id, num) {
$(`#Carousel${id}`).carousel(num); $(`#Carousel${id}`).carousel(num)
}, },
}); })
}); })

10
src/js_old/_consts.js
View File

@ -2,12 +2,12 @@
* Add your global events here * Add your global events here
*/ */
import MAP_DRIVER from "./_components/drivers/_map.google"; import MAP_DRIVER from './_components/drivers/_map.google'
//import MAP_DRIVER from './_components/drivers/_map.mapbox'; // import MAP_DRIVER from './_components/drivers/_map.mapbox';
const CONSTS = { const CONSTS = {
ENVS: ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"], ENVS: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
MAP_DRIVER, MAP_DRIVER,
}; }
export default CONSTS; export default CONSTS

76
src/js_old/_events.js
View File

@ -3,41 +3,41 @@
*/ */
export default { export default {
AJAX: "ajax-load", AJAX: 'ajax-load',
AJAXMAIN: "ajax-main-load", AJAXMAIN: 'ajax-main-load',
MAININIT: "main-init", MAININIT: 'main-init',
TABHIDDEN: "tab-hidden", TABHIDDEN: 'tab-hidden',
TABFOCUSED: "tab-focused", TABFOCUSED: 'tab-focused',
OFFLINE: "offline", OFFLINE: 'offline',
ONLINE: "online", ONLINE: 'online',
BACKONLINE: "back-online", BACKONLINE: 'back-online',
TOUCHENABLE: "touch-enabled", TOUCHENABLE: 'touch-enabled',
TOUCHDISABLED: "touch-disabled", TOUCHDISABLED: 'touch-disabled',
LOADED: "load", LOADED: 'load',
SWIPELEFT: "swipeleft panleft", SWIPELEFT: 'swipeleft panleft',
SWIPERIGHT: "swiperight panright", SWIPERIGHT: 'swiperight panright',
ALLERTAPPEARED: "alert-appeared", ALLERTAPPEARED: 'alert-appeared',
ALERTREMOVED: "alert-removed", ALERTREMOVED: 'alert-removed',
LODEDANDREADY: "load-ready", LODEDANDREADY: 'load-ready',
LAZYIMAGEREADY: "image-lazy-bg-loaded", LAZYIMAGEREADY: 'image-lazy-bg-loaded',
LAZYIMAGESREADY: "images-lazy-loaded", LAZYIMAGESREADY: 'images-lazy-loaded',
MAPLOADED: "map-loaded", MAPLOADED: 'map-loaded',
MAPAPILOADED: "map-api-loaded", MAPAPILOADED: 'map-api-loaded',
MAPMARKERCLICK: "map-marker-click", MAPMARKERCLICK: 'map-marker-click',
MAPPOPUPCLOSE: "map-popup-close", MAPPOPUPCLOSE: 'map-popup-close',
SCROLL: "scroll", SCROLL: 'scroll',
RESIZE: "resize", RESIZE: 'resize',
CAROUSEL_READY: "bs.carousel.ready", CAROUSEL_READY: 'bs.carousel.ready',
SET_TARGET_UPDATE: "set-target-update", SET_TARGET_UPDATE: 'set-target-update',
RESTORE_FIELD: "restore-field", RESTORE_FIELD: 'restore-field',
FORM_INIT_BASICS: "form-basics", FORM_INIT_BASICS: 'form-basics',
FORM_INIT_STEPPED: "form-init-stepped", FORM_INIT_STEPPED: 'form-init-stepped',
FORM_INIT_VALIDATE: "form-init-validate", FORM_INIT_VALIDATE: 'form-init-validate',
FORM_INIT_VALIDATE_FIELD: "form-init-validate-field", FORM_INIT_VALIDATE_FIELD: 'form-init-validate-field',
FORM_INIT_STORAGE: "form-init-storage", FORM_INIT_STORAGE: 'form-init-storage',
FORM_VALIDATION_FAILED: "form-validation-failed", FORM_VALIDATION_FAILED: 'form-validation-failed',
FORM_STEPPED_NEW_STEP: "form-new-step", FORM_STEPPED_NEW_STEP: 'form-new-step',
FORM_STEPPED_FIRST_STEP: "form-first-step", FORM_STEPPED_FIRST_STEP: 'form-first-step',
FORM_STEPPED_LAST_STEP: "form-last-step", FORM_STEPPED_LAST_STEP: 'form-last-step',
FORM_FIELDS: "input,textarea,select", FORM_FIELDS: 'input,textarea,select',
}; }

88
src/js_old/_events.router.js
View File

@ -1,68 +1,68 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
/** /**
* Route side-wide events * Route side-wide events
*/ */
const EventsUI = (($) => { const EventsUI = (($) => {
const on = $.fn.on; const on = $.fn.on
const off = $.fn.off; const off = $.fn.off
// Constants // Constants
const W = window; const W = window
const $W = $(W); const $W = $(W)
const D = document; const D = document
const $Body = $("body"); const $Body = $('body')
const NAME = "EventsUI"; const NAME = 'EventsUI'
class EventsUI { class EventsUI {
static process(el, args) { static process (el, args) {
let modEl = el; let modEl = el
const eventName = args[0]; const eventName = args[0]
const tagName = typeof el !== undefined ? $(el).prop("tagName") : null; const tagName = typeof el !== undefined ? $(el).prop('tagName') : null
switch (tagName) { switch (tagName) {
case "HTML": case 'HTML':
case "BODY": case 'BODY':
modEl = $W; modEl = $W
break; break
} }
return [modEl, args]; return [modEl, args]
} }
} }
// rewrite jQuery functions // rewrite jQuery functions
$.fn.on = function () { $.fn.on = function () {
const result = EventsUI.process(this, arguments); const result = EventsUI.process(this, arguments)
return on.apply(...result); return on.apply(...result)
};
$.fn.off = function () {
const result = EventsUI.process(this, arguments);
return off.apply(...result);
};
const scrollTop = $.fn.scrollTop;
// rewrite scrollTop
$.fn.scrollTop = function () {
let el = this;
const args = arguments;
const tagName = typeof el !== undefined ? $(el).prop("tagName") : null;
switch (tagName) {
case "HTML":
case "BODY":
el = $W;
break;
} }
return scrollTop.apply(el, args); $.fn.off = function () {
}; const result = EventsUI.process(this, arguments)
})($); return off.apply(...result)
}
export default EventsUI; const scrollTop = $.fn.scrollTop
// rewrite scrollTop
$.fn.scrollTop = function () {
let el = this
const args = arguments
const tagName = typeof el !== undefined ? $(el).prop('tagName') : null
switch (tagName) {
case 'HTML':
case 'BODY':
el = $W
break
}
return scrollTop.apply(el, args)
}
})($)
export default EventsUI

52
src/js_old/_layout.js
View File

@ -1,61 +1,61 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "./_events"; import Events from './_events'
const LayoutUI = (($) => { const LayoutUI = (($) => {
// Constants // Constants
const W = window; const W = window
const D = document; const D = document
const $Body = $("body"); const $Body = $('body')
const NAME = "LayoutUI"; const NAME = 'LayoutUI'
const datepickerOptions = { const datepickerOptions = {
autoclose: true, autoclose: true,
startDate: 0, startDate: 0,
//todayBtn: true, // todayBtn: true,
todayHighlight: true, todayHighlight: true,
clearBtn: true, clearBtn: true,
}; }
class LayoutUI { class LayoutUI {
static init() { static init () {
const ui = this; const ui = this
ui.dispose(); ui.dispose()
console.log(`Initializing: ${NAME}`); console.log(`Initializing: ${NAME}`)
// your custom UI // your custom UI
// Custom fonts // Custom fonts
$Body.append( $Body.append(
'<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet">' '<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet">'
); )
/*google analytics */ /* google analytics */
/*$.getScript('https://www.google-analytics.com/analytics.js', () => { /* $.getScript('https://www.google-analytics.com/analytics.js', () => {
ga('create', 'UA-********-*', 'auto'); ga('create', 'UA-********-*', 'auto');
ga('send', 'pageview'); ga('send', 'pageview');
});*/ }); */
// Fire further js when layout is ready // Fire further js when layout is ready
$(W).trigger(Events.LODEDANDREADY); $(W).trigger(Events.LODEDANDREADY)
} }
static dispose() { static dispose () {
console.log(`Destroying: ${NAME}`); console.log(`Destroying: ${NAME}`)
} }
} }
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
LayoutUI.init(); LayoutUI.init()
}); })
W.LayoutUI = LayoutUI; W.LayoutUI = LayoutUI
return LayoutUI; return LayoutUI
})($); })($)
export default LayoutUI; export default LayoutUI

658
src/js_old/_main.js
View File

@ -1,287 +1,287 @@
"use strict"; 'use strict'
import $ from "jquery"; import $ from 'jquery'
import Events from "./_events"; import Events from './_events'
import Consts from "./_consts"; import Consts from './_consts'
import EventsRouter from "./_events.router"; import EventsRouter from './_events.router'
import Spinner from "./_components/_ui.spinner"; import Spinner from './_components/_ui.spinner'
// AJAX functionality // AJAX functionality
import AjaxUI from "./_components/_ui.ajax"; import AjaxUI from './_components/_ui.ajax'
import FormBasics from "./_components/_ui.form.basics"; import FormBasics from './_components/_ui.form.basics'
import HeaderUI from "./_components/_ui.header-footer"; import HeaderUI from './_components/_ui.header-footer'
import SmoothScroll from "smooth-scroll"; import SmoothScroll from 'smooth-scroll'
const smoothScroll = SmoothScroll(); const smoothScroll = SmoothScroll()
const MainUI = (($) => { const MainUI = (($) => {
// Constants // Constants
const W = window; const W = window
const $W = $(W); const $W = $(W)
const D = document; const D = document
const $Body = $("body"); const $Body = $('body')
const NAME = "MainUI"; const NAME = 'MainUI'
console.clear(); console.clear()
console.info( console.info(
`%cUI Kit ${UINAME} ${UIVERSION}`, `%cUI Kit ${UINAME} ${UIVERSION}`,
"color:yellow;font-size:14px" 'color:yellow;font-size:14px'
); )
console.info( console.info(
`%c${UIMetaNAME} ${UIMetaVersion}`, `%c${UIMetaNAME} ${UIMetaVersion}`,
"color:yellow;font-size:12px" 'color:yellow;font-size:12px'
); )
console.info( console.info(
`%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`, `%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`,
"color:yellow;font-size:10px" 'color:yellow;font-size:10px'
); )
console.groupCollapsed("Events"); console.groupCollapsed('Events')
Object.keys(Events).forEach((k) => { Object.keys(Events).forEach((k) => {
console.info(`${k}: ${Events[k]}`); console.info(`${k}: ${Events[k]}`)
}); })
console.groupEnd("Events"); console.groupEnd('Events')
console.groupCollapsed("Consts"); console.groupCollapsed('Consts')
Object.keys(Consts).forEach((k) => { Object.keys(Consts).forEach((k) => {
console.info(`${k}: ${Consts[k]}`); console.info(`${k}: ${Consts[k]}`)
}); })
console.groupEnd("Events"); console.groupEnd('Events')
console.groupCollapsed("Init"); console.groupCollapsed('Init')
console.time("init"); console.time('init')
$W.on(`${Events.LODEDANDREADY}`, () => { $W.on(`${Events.LODEDANDREADY}`, () => {
console.groupEnd("Init"); console.groupEnd('Init')
console.timeEnd("init"); console.timeEnd('init')
console.time("Post-init"); console.time('Post-init')
console.groupCollapsed("Post-init"); console.groupCollapsed('Post-init')
}); })
// get browser locale // get browser locale
//const Locale = $('html').attr('lang').substring(0, 2); // const Locale = $('html').attr('lang').substring(0, 2);
const $AlertNotify = $("#AlertNotify"); const $AlertNotify = $('#AlertNotify')
const $SiteWideMessage = $("#SiteWideMessage"); const $SiteWideMessage = $('#SiteWideMessage')
// get browser window visibility preferences // get browser window visibility preferences
// Opera 12.10, Firefox >=18, Chrome >=31, IE11 // Opera 12.10, Firefox >=18, Chrome >=31, IE11
const HiddenName = "hidden"; const HiddenName = 'hidden'
const VisibilityChangeEvent = "visibilitychange"; const VisibilityChangeEvent = 'visibilitychange'
// update visibility state // update visibility state
D.addEventListener(VisibilityChangeEvent, () => { D.addEventListener(VisibilityChangeEvent, () => {
if (D.visibilityState === HiddenName) { if (D.visibilityState === HiddenName) {
console.log(`${NAME}: Tab: hidden`); console.log(`${NAME}: Tab: hidden`)
$Body.addClass("is-hidden"); $Body.addClass('is-hidden')
$Body.trigger(Events.TABHIDDEN); $Body.trigger(Events.TABHIDDEN)
$W.trigger(Events.TABHIDDEN); $W.trigger(Events.TABHIDDEN)
} else { } else {
console.log(`${NAME}: Tab: focused`); console.log(`${NAME}: Tab: focused`)
$Body.removeClass("is-hidden"); $Body.removeClass('is-hidden')
$Body.trigger(Events.TABFOCUSED); $Body.trigger(Events.TABFOCUSED)
$W.trigger(Events.TABFOCUSED); $W.trigger(Events.TABFOCUSED)
} }
}); })
// session ping // session ping
let pingInterval; let pingInterval
let pingLock = false; let pingLock = false
const sessionPing = () => { const sessionPing = () => {
if (pingLock || $Body.hasClass("is-offline")) { if (pingLock || $Body.hasClass('is-offline')) {
return; return
} }
console.log(`${NAME}: session ping`); console.log(`${NAME}: session ping`)
pingLock = true; pingLock = true
$.ajax({ $.ajax({
sync: false, sync: false,
async: true, async: true,
cache: false, cache: false,
url: "/Security/ping", url: '/Security/ping',
global: false, global: false,
type: "POST", type: 'POST',
complete: (data, datastatus) => { complete: (data, datastatus) => {
updateOnlineStatus(); updateOnlineStatus()
if (datastatus !== "success") { if (datastatus !== 'success') {
console.warn(`${NAME}: ping failed`); console.warn(`${NAME}: ping failed`)
clearInterval(pingInterval); clearInterval(pingInterval)
pingInterval = null; pingInterval = null
} }
pingLock = false; pingLock = false
}, },
}); })
}; }
// update online/offline state // update online/offline state
let statusLock = false; let statusLock = false
const updateOnlineStatus = () => { const updateOnlineStatus = () => {
if (statusLock) { if (statusLock) {
return; return
} }
statusLock = true; statusLock = true
if (typeof navigator.onLine === "undefined") { if (typeof navigator.onLine === 'undefined') {
return false; return false
} }
if (!navigator.onLine) { if (!navigator.onLine) {
console.log(`${NAME}: Offline`); console.log(`${NAME}: Offline`)
clearInterval(pingInterval); clearInterval(pingInterval)
pingInterval = null; pingInterval = null
$Body.addClass("is-offline"); $Body.addClass('is-offline')
$Body.removeClass("is-online"); $Body.removeClass('is-online')
$Body.trigger(Events.OFFLINE); $Body.trigger(Events.OFFLINE)
$W.trigger(Events.OFFLINE); $W.trigger(Events.OFFLINE)
statusLock = false; statusLock = false
return true; return true
} }
if (!pingInterval) { if (!pingInterval) {
pingInterval = setInterval(sessionPing, 300000); // 5 min in ms pingInterval = setInterval(sessionPing, 300000) // 5 min in ms
} }
if ($Body.hasClass("is-offline")) { if ($Body.hasClass('is-offline')) {
sessionPing(); sessionPing()
console.log(`${NAME}: is back online`); console.log(`${NAME}: is back online`)
$Body.trigger(Events.BACKONLINE); $Body.trigger(Events.BACKONLINE)
} else { } else {
console.log(`${NAME}: Online`); console.log(`${NAME}: Online`)
} }
$Body.addClass("is-online"); $Body.addClass('is-online')
$Body.removeClass("is-offline"); $Body.removeClass('is-offline')
$Body.trigger(Events.ONLINE); $Body.trigger(Events.ONLINE)
$W.trigger(Events.ONLINE); $W.trigger(Events.ONLINE)
statusLock = false; statusLock = false
return true; return true
}; }
W.addEventListener( W.addEventListener(
`${Events.OFFLINE}`, `${Events.OFFLINE}`,
() => { () => {
updateOnlineStatus(); updateOnlineStatus()
}, },
false false
); )
W.addEventListener( W.addEventListener(
`${Events.ONLINE}`, `${Events.ONLINE}`,
() => { () => {
updateOnlineStatus(); updateOnlineStatus()
}, },
false false
); )
$W.on(`${Events.LOADED} ${Events.AJAX}`, () => { $W.on(`${Events.LOADED} ${Events.AJAX}`, () => {
updateOnlineStatus(); updateOnlineStatus()
}); })
// scrollTo // scrollTo
const ScrollTo = (trigger, selector) => { const ScrollTo = (trigger, selector) => {
smoothScroll.animateScroll(D.querySelector(selector), trigger, { smoothScroll.animateScroll(D.querySelector(selector), trigger, {
speed: 500, speed: 500,
offset: -20, offset: -20,
//easing: 'easeInOutCubic', // easing: 'easeInOutCubic',
// Callback API // Callback API
//before: (anchor, toggle) => {}, // Callback to run before scroll // before: (anchor, toggle) => {}, // Callback to run before scroll
//`after: (anchor, toggle) => {} // Callback to run after scroll // `after: (anchor, toggle) => {} // Callback to run after scroll
}); })
};
W.URLDetails = {
base: $("base").attr("href"),
relative: "/",
hash: "",
};
let eventFired = false;
const setTouchScreen = (bool) => {
if (W.IsTouchScreen === bool || eventFired) {
return;
} }
eventFired = true; W.URLDetails = {
base: $('base').attr('href'),
relative: '/',
hash: '',
}
W.IsTouchScreen = bool; let eventFired = false
$.support.touch = W.IsTouchScreen; const setTouchScreen = (bool) => {
if (W.IsTouchScreen === bool || eventFired) {
return
}
eventFired = true
W.IsTouchScreen = bool
$.support.touch = W.IsTouchScreen
if (bool) { if (bool) {
console.log(`${NAME}: Touch screen enabled`); console.log(`${NAME}: Touch screen enabled`)
$Body.trigger(Events.TOUCHENABLE); $Body.trigger(Events.TOUCHENABLE)
$W.trigger(Events.TOUCHENABLE); $W.trigger(Events.TOUCHENABLE)
} else { } else {
console.log(`${NAME}: Touch screen disabled`); console.log(`${NAME}: Touch screen disabled`)
$Body.trigger(Events.TOUCHDISABLED); $Body.trigger(Events.TOUCHDISABLED)
$W.trigger(Events.TOUCHDISABLED); $W.trigger(Events.TOUCHDISABLED)
} }
// prevent firing touch and mouse events together // prevent firing touch and mouse events together
setTimeout(() => { setTimeout(() => {
eventFired = false; eventFired = false
}, 200); }, 200)
}; }
setTouchScreen("ontouchstart" in window || navigator.msMaxTouchPoints > 0); setTouchScreen('ontouchstart' in window || navigator.msMaxTouchPoints > 0)
// disable touch on mouse events // disable touch on mouse events
/*D.addEventListener('mousemove', () => { /* D.addEventListener('mousemove', () => {
setTouchScreen(false); setTouchScreen(false);
}); });
D.addEventListener('mousedown', () => { D.addEventListener('mousedown', () => {
setTouchScreen(false); setTouchScreen(false);
});*/ }); */
// enable touch screen on touch events // enable touch screen on touch events
D.addEventListener("touchmove", () => { D.addEventListener('touchmove', () => {
setTouchScreen(true); setTouchScreen(true)
}); })
D.addEventListener("touchstart", () => { D.addEventListener('touchstart', () => {
setTouchScreen(true); setTouchScreen(true)
}); })
class MainUI { class MainUI {
// Static methods // Static methods
static init() { static init () {
const ui = this; const ui = this
ui.dispose(); ui.dispose()
console.log(`${NAME}: init`); console.log(`${NAME}: init`)
// update location details // update location details
ui.updateLocation(); ui.updateLocation()
// mark available offline areas // mark available offline areas
if ("caches" in W) { if ('caches' in W) {
$("a.offline").addClass("offline-available"); $('a.offline').addClass('offline-available')
} }
ui.loadImages(); ui.loadImages()
// detect bootstrap screen size // detect bootstrap screen size
ui.detectBootstrapScreenSize(); ui.detectBootstrapScreenSize()
// mark external links // mark external links
$('a.external,a[rel="external"]').attr("target", "_blank"); $('a.external,a[rel="external"]').attr('target', '_blank')
// show encoded emails // show encoded emails
/*$(D).find('.obm').each(() => { /* $(D).find('.obm').each(() => {
if ($(this).attr('data-val') !== undefined) { if ($(this).attr('data-val') !== undefined) {
const email = $(this).attr('data-val').split('') const email = $(this).attr('data-val').split('')
.reverse() .reverse()
@ -300,351 +300,351 @@ const MainUI = (($) => {
$(this).attr('href', `mailto:${email}`); $(this).attr('href', `mailto:${email}`);
} }
} }
});*/ }); */
// //
// scroll links // scroll links
$(".js-scrollTo").on("click", (e) => { $('.js-scrollTo').on('click', (e) => {
console.log(`${NAME}: .js-scrollTo`); console.log(`${NAME}: .js-scrollTo`)
e.preventDefault(); e.preventDefault()
const el = e.currentTarget; const el = e.currentTarget
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
ScrollTo(el, $el.attr("data-target")); ScrollTo(el, $el.attr('data-target'))
}); })
// load external fonts // load external fonts
if ($("[data-extfont]").length) { if ($('[data-extfont]').length) {
console.log(`${NAME}: loading external fonts [data-extfont]`); console.log(`${NAME}: loading external fonts [data-extfont]`)
$.getScript( $.getScript(
"//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js", '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js',
() => { () => {
const fonts = []; const fonts = []
$("[data-extfont]").each((i, el) => { $('[data-extfont]').each((i, el) => {
fonts[i] = $(el).attr("data-extfont"); fonts[i] = $(el).attr('data-extfont')
}); })
W.WebFont.load({ W.WebFont.load({
google: { google: {
families: fonts, families: fonts,
}, },
}); })
} }
); )
} }
// data-set links // data-set links
$("[data-set-target]").on("click", (e) => { $('[data-set-target]').on('click', (e) => {
console.log(`${NAME}: [data-set-target]`); console.log(`${NAME}: [data-set-target]`)
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
const $target = $($el.data("set-target")); const $target = $($el.data('set-target'))
if (!$target.length) { if (!$target.length) {
return; return
} }
$target.each((i, targetEl) => { $target.each((i, targetEl) => {
const $targetEl = $(targetEl); const $targetEl = $(targetEl)
const tag = $targetEl.prop("tagName").toLowerCase(); const tag = $targetEl.prop('tagName').toLowerCase()
if (tag === "input" || tag === "select") { if (tag === 'input' || tag === 'select') {
$targetEl.val($el.data("set-val")); $targetEl.val($el.data('set-val'))
} else if (!$targetEl.hasClass("field")) { } else if (!$targetEl.hasClass('field')) {
$targetEl.text($el.data("set-val")); $targetEl.text($el.data('set-val'))
} }
}); })
$el.trigger(Events.SET_TARGET_UPDATE); $el.trigger(Events.SET_TARGET_UPDATE)
$target.closest("form").trigger(Events.SET_TARGET_UPDATE); $target.closest('form').trigger(Events.SET_TARGET_UPDATE)
}); })
// emulate links // emulate links
$(".a[data-href]").on("click", (e) => { $('.a[data-href]').on('click', (e) => {
console.log(`${NAME}: js link processing .a[data-href]`); console.log(`${NAME}: js link processing .a[data-href]`)
const $el = $(e.currentTarget); const $el = $(e.currentTarget)
const href = $el.data("href"); const href = $el.data('href')
if (!href.length) { if (!href.length) {
console.warn(`${NAME}: .a[data-href] | Missing data-href`); console.warn(`${NAME}: .a[data-href] | Missing data-href`)
console.warn($el); console.warn($el)
} }
W.location.assign(href); W.location.assign(href)
}); })
// set attributes for mobile friendly tables // set attributes for mobile friendly tables
$(".typography table").each((i, el) => { $('.typography table').each((i, el) => {
const $table = $(el); const $table = $(el)
let $header = $table.find("thead tr:first-child"); let $header = $table.find('thead tr:first-child')
if (!$header.length) { if (!$header.length) {
$header = $(el).find("tr:first-child"); $header = $(el).find('tr:first-child')
} }
$header.addClass("d-typography-breakpoint-none"); $header.addClass('d-typography-breakpoint-none')
$header.find("td").each((i, h) => { $header.find('td').each((i, h) => {
const $h = $(h); const $h = $(h)
$table $table
.find("tr") .find('tr')
.find(`td:eq(${i})`) .find(`td:eq(${i})`)
.each((i, el) => { .each((i, el) => {
const $el = $(el); const $el = $(el)
if (!$el.attr("data-label")) { if (!$el.attr('data-label')) {
$el.attr("data-label", $h.text()); $el.attr('data-label', $h.text())
} }
}); })
}); })
}); })
// //
// hide spinner // hide spinner
Spinner.hide(() => { Spinner.hide(() => {
$Body.addClass("loaded"); $Body.addClass('loaded')
}); })
// fire page printing // fire page printing
if (W.URLDetails["hash"].indexOf("printpage") > -1) { if (W.URLDetails.hash.indexOf('printpage') > -1) {
W.print(); W.print()
} }
$Body.data(NAME, ui); $Body.data(NAME, ui)
$W.removeClass("lock-main-init"); $W.removeClass('lock-main-init')
} }
static detectBootstrapScreenSize() { static detectBootstrapScreenSize () {
const $el = $('<div class="env-test"></div>'); const $el = $('<div class="env-test"></div>')
let envs = [...Consts.ENVS]; let envs = [...Consts.ENVS]
$Body.append($el); $Body.append($el)
let curEnv = envs.shift(); let curEnv = envs.shift()
envs = envs.reverse(); envs = envs.reverse()
for (let i = 0; i < envs.length; ++i) { for (let i = 0; i < envs.length; ++i) {
const env = envs[i]; const env = envs[i]
$el.addClass(`d-${env}-none`); $el.addClass(`d-${env}-none`)
if ($el.is(":hidden")) { if ($el.is(':hidden')) {
curEnv = env; curEnv = env
break; break
} }
} }
$el.remove(); $el.remove()
$Body.removeClass(envs); $Body.removeClass(envs)
$Body.addClass(curEnv); $Body.addClass(curEnv)
let landscape = true; let landscape = true
if ($W.width() > $W.height()) { if ($W.width() > $W.height()) {
$Body.removeClass("portrait"); $Body.removeClass('portrait')
$Body.addClass("landscape"); $Body.addClass('landscape')
} else { } else {
landscape = false; landscape = false
$Body.removeClass("landscape"); $Body.removeClass('landscape')
$Body.addClass("portrait"); $Body.addClass('portrait')
} }
console.log( console.log(
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}` `${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
); )
return curEnv; return curEnv
} }
static updateLocation(url) { static updateLocation (url) {
let location = url || W.location.href; let location = url || W.location.href
location = location.replace(W.URLDetails["base"], "/"); location = location.replace(W.URLDetails.base, '/')
const hash = location.indexOf("#"); const hash = location.indexOf('#')
W.URLDetails.relative = location.split("#")[0]; W.URLDetails.relative = location.split('#')[0]
W.URLDetails.hash = W.URLDetails.hash =
hash >= 0 ? location.substr(location.indexOf("#")) : ""; hash >= 0 ? location.substr(location.indexOf('#')) : ''
} }
// show site-wide alert // show site-wide alert
static alert(msg, cls) { static alert (msg, cls) {
$SiteWideMessage.fadeOut("fast"); $SiteWideMessage.fadeOut('fast')
$SiteWideMessage.html( $SiteWideMessage.html(
`<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">&times;</i>${msg}</div></div>` `<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">&times;</i>${msg}</div></div>`
); )
$SiteWideMessage.find(".page-alert").alert(); $SiteWideMessage.find('.page-alert').alert()
$SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => { $SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
$SiteWideMessage.fadeOut("slow", () => { $SiteWideMessage.fadeOut('slow', () => {
$SiteWideMessage.find(".page-alert").alert("close"); $SiteWideMessage.find('.page-alert').alert('close')
}); })
}); })
$SiteWideMessage.fadeIn("slow"); $SiteWideMessage.fadeIn('slow')
if ($AlertNotify.length) { if ($AlertNotify.length) {
$AlertNotify[0].play(); $AlertNotify[0].play()
} }
$W.trigger(`${Events.ALLERTAPPEARED}`); $W.trigger(`${Events.ALLERTAPPEARED}`)
} }
// hide site-wide alert // hide site-wide alert
static alertHide() { static alertHide () {
if ($SiteWideMessage.length !== 0) { if ($SiteWideMessage.length !== 0) {
$SiteWideMessage.fadeOut("slow", () => { $SiteWideMessage.fadeOut('slow', () => {
$SiteWideMessage.find(".alert").alert("close"); $SiteWideMessage.find('.alert').alert('close')
}); })
} }
if ($AlertNotify.length && typeof $AlertNotify[0].stop !== "undefined") { if ($AlertNotify.length && typeof $AlertNotify[0].stop !== 'undefined') {
$AlertNotify[0].stop(); $AlertNotify[0].stop()
} }
$W.trigger(`${Events.ALLERTREMOVED}`); $W.trigger(`${Events.ALLERTREMOVED}`)
} }
// load all images // load all images
static loadImages() { static loadImages () {
const $imgs = $Body.find("img").not(".loaded"); const $imgs = $Body.find('img').not('.loaded')
const $imgUrls = []; const $imgUrls = []
const $imgLazyUrls = []; const $imgLazyUrls = []
// collect image details // collect image details
$imgs.each((i, el) => { $imgs.each((i, el) => {
const $el = $(el); const $el = $(el)
const src = $el.attr("src"); const src = $el.attr('src')
const lazySrc = $el.data("lazy-src"); const lazySrc = $el.data('lazy-src')
if ($el.hasClass("loaded")) { if ($el.hasClass('loaded')) {
return; return
} }
if (src && src.length) { if (src && src.length) {
$imgUrls.push(src); $imgUrls.push(src)
} }
if (lazySrc && lazySrc.length) { if (lazySrc && lazySrc.length) {
$imgLazyUrls.push(lazySrc); $imgLazyUrls.push(lazySrc)
$el.addClass("loading"); $el.addClass('loading')
AjaxUI.preload([lazySrc]).then(() => { AjaxUI.preload([lazySrc]).then(() => {
$el.attr("src", lazySrc); $el.attr('src', lazySrc)
$el.on(`${Events.LOADED}`, () => { $el.on(`${Events.LOADED}`, () => {
$el.addClass("loaded"); $el.addClass('loaded')
$el.removeClass("loading"); $el.removeClass('loading')
$el.trigger(`${Events.LAZYIMAGEREADY}`); $el.trigger(`${Events.LAZYIMAGEREADY}`)
}); })
}); })
} }
}); })
// load lazy backgrounds // load lazy backgrounds
$Body $Body
.find("[data-lazy-bg]") .find('[data-lazy-bg]')
.not(".loaded") .not('.loaded')
.each((i, el) => { .each((i, el) => {
const $el = $(el); const $el = $(el)
const lazySrc = $el.data("lazy-bg"); const lazySrc = $el.data('lazy-bg')
if ($el.hasClass("loaded")) { if ($el.hasClass('loaded')) {
return; return
} }
if (lazySrc && lazySrc.length) { if (lazySrc && lazySrc.length) {
$imgLazyUrls.push(lazySrc); $imgLazyUrls.push(lazySrc)
$el.addClass("loading"); $el.addClass('loading')
AjaxUI.preload([lazySrc]).then(() => { AjaxUI.preload([lazySrc]).then(() => {
$el.css({ "background-image": `url(${lazySrc})` }); $el.css({ 'background-image': `url(${lazySrc})` })
$el.addClass("loaded"); $el.addClass('loaded')
$el.removeClass("loading"); $el.removeClass('loading')
$el.trigger(`${Events.LAZYIMAGEREADY}`); $el.trigger(`${Events.LAZYIMAGEREADY}`)
}); })
} }
}); })
// replace img src // replace img src
$Body $Body
.find("[data-src-replace]") .find('[data-src-replace]')
.not(".loaded") .not('.loaded')
.each((i, el) => { .each((i, el) => {
const $el = $(el); const $el = $(el)
const lazySrc = $el.data("src-replace"); const lazySrc = $el.data('src-replace')
if ($el.hasClass("loaded")) { if ($el.hasClass('loaded')) {
return; return
} }
if (lazySrc && lazySrc.length) { if (lazySrc && lazySrc.length) {
$el.addClass("loaded"); $el.addClass('loaded')
$el.attr("src", lazySrc); $el.attr('src', lazySrc)
} }
}); })
// load defined images // load defined images
AjaxUI.preload($imgUrls).then(() => { AjaxUI.preload($imgUrls).then(() => {
$W.trigger("images-loaded"); $W.trigger('images-loaded')
// load lazy images // load lazy images
AjaxUI.preload($imgLazyUrls).then(() => { AjaxUI.preload($imgLazyUrls).then(() => {
console.log(`${NAME}: All images are loaded!`); console.log(`${NAME}: All images are loaded!`)
setTimeout(() => { setTimeout(() => {
$W.trigger(`${Events.LAZYIMAGESREADY}`); $W.trigger(`${Events.LAZYIMAGESREADY}`)
console.groupEnd("Post-init"); console.groupEnd('Post-init')
console.timeEnd("Post-init"); console.timeEnd('Post-init')
}, 100); }, 100)
}); })
}); })
} }
static dispose() { static dispose () {
console.log(`${NAME}: dispose`); console.log(`${NAME}: dispose`)
} }
} }
$W.on( $W.on(
`${Events.MAININIT} ${Events.AJAX} ${Events.AJAXMAIN} ${Events.LOADED}`, `${Events.MAININIT} ${Events.AJAX} ${Events.AJAXMAIN} ${Events.LOADED}`,
() => { () => {
if ($W.hasClass("lock-main-init")) { if ($W.hasClass('lock-main-init')) {
console.warn(`${NAME}: locked`); console.warn(`${NAME}: locked`)
return; return
} }
$W.addClass("lock-main-init"); $W.addClass('lock-main-init')
MainUI.init(); MainUI.init()
} }
); )
$W.on(`${Events.RESIZE}`, () => { $W.on(`${Events.RESIZE}`, () => {
MainUI.detectBootstrapScreenSize(); MainUI.detectBootstrapScreenSize()
}); })
$W.on("beforeunload unload", () => { $W.on('beforeunload unload', () => {
Spinner.show(() => { Spinner.show(() => {
$Body.removeClass("loaded"); $Body.removeClass('loaded')
}); })
}); })
// hide spinner on target _blank // hide spinner on target _blank
$('[target="_blank"],.external') $('[target="_blank"],.external')
.not('[data-toggle="lightbox"],[data-lightbox-gallery]') .not('[data-toggle="lightbox"],[data-lightbox-gallery]')
.on("click submit touch", (e) => { .on('click submit touch', (e) => {
console.log(`${NAME}: External link`); console.log(`${NAME}: External link`)
setTimeout(() => { setTimeout(() => {
Spinner.hide(() => { Spinner.hide(() => {
$Body.addClass("loaded"); $Body.addClass('loaded')
}); })
}, 1000); }, 1000)
}); })
W.MainUI = MainUI; W.MainUI = MainUI
return MainUI; return MainUI
})($); })($)
export default MainUI; export default MainUI

80
src/js_old/app.js
View File

@ -1,21 +1,21 @@
"use strict"; 'use strict'
//import $ from 'jquery'; // import $ from 'jquery';
import "../scss/app.scss"; import '../scss/app.scss'
import { Dropdown } from "bootstrap"; import { Dropdown } from 'bootstrap'
import Page from "./_components/_page.jsx"; import Page from './_components/_page.jsx'
//import 'hammerjs/hammer'; // import 'hammerjs/hammer';
//import 'jquery-hammerjs/jquery.hammer'; // import 'jquery-hammerjs/jquery.hammer';
// Routie // Routie
//import 'pouchdb/dist/pouchdb'; // import 'pouchdb/dist/pouchdb';
//import './_components/routes/index'; // import './_components/routes/index';
// conflicts with _components/_ui.hover.js (shows dropdown on hover) // conflicts with _components/_ui.hover.js (shows dropdown on hover)
//import 'bootstrap/js/dist/dropdown'; // import 'bootstrap/js/dist/dropdown';
/*import './_components/_ui.hover'; /* import './_components/_ui.hover';
import './_components/_ui.carousel'; import './_components/_ui.carousel';
import './_components/_ui.menu'; import './_components/_ui.menu';
@ -24,74 +24,74 @@ import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip'; import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover'; import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/scrollspy'; import 'bootstrap/js/dist/scrollspy';
import 'bootstrap/js/dist/tab';*/ import 'bootstrap/js/dist/tab'; */
// //
// Offcanvas menu // Offcanvas menu
//import 'offcanvas-bootstrap/dist/js/bootstrap.offcanvas'; // import 'offcanvas-bootstrap/dist/js/bootstrap.offcanvas';
// Uncomment it to enable meta-lightbox zooming on hover // Uncomment it to enable meta-lightbox zooming on hover
//import 'jquery-zoom/jquery.zoom'; // import 'jquery-zoom/jquery.zoom';
// FlyoutUI // FlyoutUI
//import FlyoutUI from './_components/_ui.flyout'; // import FlyoutUI from './_components/_ui.flyout';
// Sticky sidebar // Sticky sidebar
//import SidebarUI from './_components/_ui.sidebar'; // import SidebarUI from './_components/_ui.sidebar';
// Toggle bootstrap form fields // Toggle bootstrap form fields
//import FormToggleUI from './_components/_ui.form.fields.toggle'; // import FormToggleUI from './_components/_ui.form.fields.toggle';
// Bootstrap Date & Time fields // Bootstrap Date & Time fields
//import FormDatetime from './_components/_ui.form.datetime'; // import FormDatetime from './_components/_ui.form.datetime';
// Stepped forms functionality // Stepped forms functionality
//import FormStepped from './_components/_ui.form.stepped'; // import FormStepped from './_components/_ui.form.stepped';
// Forms validation functionality // Forms validation functionality
//import FormValidate from './_components/_ui.form.validate'; // import FormValidate from './_components/_ui.form.validate';
// Store forms data into localStorage // Store forms data into localStorage
//import FormStorage from './_components/_ui.form.storage'; // import FormStorage from './_components/_ui.form.storage';
// client-side images cropping // client-side images cropping
//import FormCroppie from './_components/_ui.form.croppie'; // import FormCroppie from './_components/_ui.form.croppie';
// Google NoCaptcha fields // Google NoCaptcha fields
//import NoCaptcha from './_components/_ui.nocaptcha'; // import NoCaptcha from './_components/_ui.nocaptcha';
// youtube video preview image // youtube video preview image
//import './_components/_ui.video.preview'; // import './_components/_ui.video.preview';
// Meta Lightbox // Meta Lightbox
import "@a2nt/meta-lightbox-react/src/js/app"; import '@a2nt/meta-lightbox-react/src/js/app'
const GraphPage = ReactDOM.render( const GraphPage = ReactDOM.render(
<Page />, <Page />,
document.getElementById("MainContent") document.getElementById('MainContent')
); )
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation'; // import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
//import Table from 'bootstrap-table/dist/bootstrap-table'; // import Table from 'bootstrap-table/dist/bootstrap-table';
// Map UI // Map UI
//import MapApi from './_components/_ui.map.api'; // import MapApi from './_components/_ui.map.api';
//import FormSelect2 from './_components/_ui.form.select2'; // import FormSelect2 from './_components/_ui.form.select2';
//import './_main'; // import './_main';
//import './_layout'; // import './_layout';
// Google Analytics // Google Analytics
//import './_components/drivers/_google.track.external.links'; // import './_components/drivers/_google.track.external.links';
function importAll(r) { function importAll (r) {
return r.keys().map(r); return r.keys().map(r)
} }
const images = importAll( const images = importAll(
require.context("../img/", false, /\.(png|jpe?g|svg)$/) require.context('../img/', false, /\.(png|jpe?g|svg)$/)
); )
const fontAwesome = importAll( const fontAwesome = importAll(
require.context("font-awesome", false, /\.(otf|eot|svg|ttf|woff|woff2)$/) require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/)
); )

4
src/js_old/lang/_en.js
View File

@ -11,7 +11,7 @@ export default {
'<div class="steps-buttons">' + '<div class="steps-buttons">' +
'<a href="#" class="step-ctrl step-prev"><i class="fas fa-chevron-left"></i> Prev</a>' + '<a href="#" class="step-ctrl step-prev"><i class="fas fa-chevron-left"></i> Prev</a>' +
' <a href="#" class="step-ctrl step-next">Next <i class="fas fa-chevron-right"></i></a>' + ' <a href="#" class="step-ctrl step-next">Next <i class="fas fa-chevron-right"></i></a>' +
"</div>", '</div>',
}, },
}, },
}; }

44
src/js_old/place_it_to_types_folder_PageTypeClassName.js
View File

@ -13,51 +13,51 @@
* Take a look to app/templates/Objects/Map.ss for HTML * Take a look to app/templates/Objects/Map.ss for HTML
* Take a look to https://github.com/a2nt/silverstripe-mapboxfield/blob/master/README.md for Data Structure * Take a look to https://github.com/a2nt/silverstripe-mapboxfield/blob/master/README.md for Data Structure
*/ */
"use strict"; 'use strict'
// your page specific css // your page specific css
import "../scss/_types/PageTypeClassName.scss"; import '../scss/_types/PageTypeClassName.scss'
import $ from "jquery"; import $ from 'jquery'
import Events from "../_events"; import Events from '../_events'
// Mapbox API // Mapbox API
import "../_components/_ui.map.api"; import '../_components/_ui.map.api'
const PageTypeUI = (($) => { const PageTypeUI = (($) => {
// Constants // Constants
const W = window; const W = window
const D = document; const D = document
const $Body = $("body"); const $Body = $('body')
const NAME = "PageTypeUI"; const NAME = 'PageTypeUI'
class PageTypeUI { class PageTypeUI {
// Static methods // Static methods
static init() { static init () {
this.dispose(); this.dispose()
console.log(`Initializing: ${NAME}`); console.log(`Initializing: ${NAME}`)
// custom page specific functionality // custom page specific functionality
} }
static initMap() { static initMap () {
// custom map functionality // custom map functionality
} }
static dispose() { static dispose () {
console.log(`Destroying: ${NAME}`); console.log(`Destroying: ${NAME}`)
} }
} }
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => { $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
PageTypeUI.init(); PageTypeUI.init()
}); })
$(W).on(Events.MAPLOADED, () => { $(W).on(Events.MAPLOADED, () => {
PageTypeUI.initMap(); PageTypeUI.initMap()
}); })
return PageTypeUI; return PageTypeUI
})($); })($)
export default PageTypeUI; export default PageTypeUI

4
src/js_old/types/SilverShop.Page.CheckoutPageController.js
View File

@ -1,5 +1,5 @@
"use strict"; 'use strict'
/*import $ from 'jquery'; /* import $ from 'jquery';
import '../_components/_ui.map.api'; import '../_components/_ui.map.api';
*/ */

4
src/js_old/types/Site.Controllers.MapElementController.js
View File

@ -1,6 +1,6 @@
"use strict"; 'use strict'
/*import $ from 'jquery'; /* import $ from 'jquery';
import Events from '../_events'; import Events from '../_events';
// Mapbox API // Mapbox API

6
src/mocks/browser.js
View File

@ -1,5 +1,5 @@
// src/mocks/browser.js // src/mocks/browser.js
import { setupWorker } from "msw"; import { setupWorker } from 'msw'
import { handlers } from "./handlers"; import { handlers } from './handlers'
// This configures a Service Worker with the given request handlers. // This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers); export const worker = setupWorker(...handlers)

48
src/mocks/handlers.js
View File

@ -1,9 +1,9 @@
// src/mocks/handlers.js // src/mocks/handlers.js
import { graphql } from "msw"; import { graphql } from 'msw'
export const handlers = [ export const handlers = [
// Handles a "Login" mutation // Handles a "Login" mutation
/*graphql.mutation('Login', (req, res, ctx) => { /* graphql.mutation('Login', (req, res, ctx) => {
const { username } = req.variables; const { username } = req.variables;
sessionStorage.setItem('is-authenticated', username); sessionStorage.setItem('is-authenticated', username);
return res( return res(
@ -13,10 +13,10 @@ export const handlers = [
}, },
}), }),
); );
}),*/ }), */
// Handles a "Pages" query // Handles a "Pages" query
graphql.query("Pages11", (req, res, ctx) => { graphql.query('Pages11', (req, res, ctx) => {
const apiKey = req.headers.map.apikey; const apiKey = req.headers.map.apikey
if ( if (
!req.headers.map.apikey || !req.headers.map.apikey ||
req.headers.map.apikey !== `${GRAPHQL_API_KEY}` req.headers.map.apikey !== `${GRAPHQL_API_KEY}`
@ -25,11 +25,11 @@ export const handlers = [
return res( return res(
ctx.errors([ ctx.errors([
{ {
message: "Not authenticated", message: 'Not authenticated',
errorType: "AuthenticationError", errorType: 'AuthenticationError',
}, },
]) ])
); )
} }
// When authenticated, respond with a query payload // When authenticated, respond with a query payload
return res( return res(
@ -38,38 +38,38 @@ export const handlers = [
edges: [ edges: [
{ {
node: { node: {
ID: "1", ID: '1',
Title: "Home-Mocked", Title: 'Home-Mocked',
ClassName: "Site\\Pages\\HomePage", ClassName: 'Site\\Pages\\HomePage',
CSSClass: "Site-Pages-HomePage", CSSClass: 'Site-Pages-HomePage',
Summary: Summary:
"That's my personal website, I'm full-stack developer mostly specializing on SilverStipe backend projects and share some of my hobbies at this website.", "That's my personal website, I'm full-stack developer mostly specializing on SilverStipe backend projects and share some of my hobbies at this website.",
Link: "/en/", Link: '/en/',
URLSegment: "home", URLSegment: 'home',
Elements: { Elements: {
edges: [ edges: [
{ {
node: { node: {
ID: "3", ID: '3',
Title: "Slider", Title: 'Slider',
Render: Render:
"&lt;div\nid=&quot;e3&quot;\nclass=&quot;element site__elements__sliderelement\n\t\n\t&quot;\n&gt;\n\t&lt;div class=&quot;element-container container&quot;&gt;\n\t\t\n\n\n &lt;div id=&quot;Carousel3&quot; class=&quot;carousel slide js-carousel&quot;&gt;\n &lt;div class=&quot;carousel-inner&quot;&gt;\n \n &lt;div class=&quot;carousel-item carousel-item-Video carousel-item-nocontrols active&quot;&gt;\n &lt;div class=&quot;carousel-slide&quot;&gt;\n \n \n &lt;div class=&quot;video&quot;&gt;\n &lt;iframe width=&quot;200&quot; height=&quot;113&quot; src=&quot;https://www.youtube.com/embed/IF1F_es1SaU?feature=oembed&amp;wmode=transparent&amp;enablejsapi=1&amp;disablekb=1&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=IF1F_es1SaU&quot; allow=&quot;autoplay&quot; allow=&quot;autoplay&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;\n &lt;/div&gt;\n \n\n\n\n\n &lt;/div&gt;\n &lt;/div&gt;\n \n &lt;/div&gt;\n &lt;/div&gt;\n\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n", '&lt;div\nid=&quot;e3&quot;\nclass=&quot;element site__elements__sliderelement\n\t\n\t&quot;\n&gt;\n\t&lt;div class=&quot;element-container container&quot;&gt;\n\t\t\n\n\n &lt;div id=&quot;Carousel3&quot; class=&quot;carousel slide js-carousel&quot;&gt;\n &lt;div class=&quot;carousel-inner&quot;&gt;\n \n &lt;div class=&quot;carousel-item carousel-item-Video carousel-item-nocontrols active&quot;&gt;\n &lt;div class=&quot;carousel-slide&quot;&gt;\n \n \n &lt;div class=&quot;video&quot;&gt;\n &lt;iframe width=&quot;200&quot; height=&quot;113&quot; src=&quot;https://www.youtube.com/embed/IF1F_es1SaU?feature=oembed&amp;wmode=transparent&amp;enablejsapi=1&amp;disablekb=1&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=IF1F_es1SaU&quot; allow=&quot;autoplay&quot; allow=&quot;autoplay&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;\n &lt;/div&gt;\n \n\n\n\n\n &lt;/div&gt;\n &lt;/div&gt;\n \n &lt;/div&gt;\n &lt;/div&gt;\n\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n',
}, },
}, },
{ {
node: { node: {
ID: "7", ID: '7',
Title: "Categories List", Title: 'Categories List',
Render: Render:
"&lt;div\nid=&quot;e7&quot;\nclass=&quot;element dnadesign__elementallist__model__elementlist\n\t\n\t&quot;\n&gt;\n\t&lt;div class=&quot;element-container container&quot;&gt;\n\t\t\n&lt;div class=&quot;list-element__container row&quot; data-listelement-count=&quot;3&quot;&gt;\n \n \n\t &lt;div\nid=&quot;e9&quot;\nclass=&quot;element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md&quot;\n&gt;\n\t&lt;div class=&quot;element-container&quot;&gt;\n\t\t\n &lt;div class=&quot;image-element__image height400 width400&quot;&gt;\n &lt;img\n src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;\n data-lazy-src=&quot;/assets/Uploads/ElementImage/1609765749853__FillWzQwMCw0MDBd.jpg&quot; class=&quot;img-responsive&quot; alt=&quot;Aquascaping&quot;\n /&gt;\n &lt;/div&gt;\n\n\n\n&lt;div class=&quot;image-element__caption img-content&quot;&gt;\n &lt;h3 class=&quot;image-element__title title&quot;&gt;Aquascaping&lt;/h3&gt;\n\n \n&lt;/div&gt;\n\n\n\n &lt;a href=&quot;/en/aquascaping/&quot; class=&quot;stretched-link&quot;&gt;\n &lt;b class=&quot;sr-only&quot;&gt;Aquascaping&lt;/b&gt;\n &lt;/a&gt;\n\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n\n \n\t &lt;div\nid=&quot;e10&quot;\nclass=&quot;element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md&quot;\n&gt;\n\t&lt;div class=&quot;element-container&quot;&gt;\n\t\t\n &lt;div class=&quot;image-element__image height400 width400&quot;&gt;\n &lt;img\n src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;\n data-lazy-src=&quot;/assets/Uploads/ElementImage/1609766816754__FillWzQwMCw0MDBd.jpg&quot; class=&quot;img-responsive&quot; alt=&quot;Car Projects&quot;\n /&gt;\n &lt;/div&gt;\n\n\n\n&lt;div class=&quot;image-element__caption img-content&quot;&gt;\n &lt;h3 class=&quot;image-element__title title&quot;&gt;Car Projects&lt;/h3&gt;\n\n \n&lt;/div&gt;\n\n\n\n &lt;a href=&quot;/en/car/&quot; class=&quot;stretched-link&quot;&gt;\n &lt;b class=&quot;sr-only&quot;&gt;Car Projects&lt;/b&gt;\n &lt;/a&gt;\n\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n\n \n\t &lt;div\nid=&quot;e12&quot;\nclass=&quot;element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md&quot;\n&gt;\n\t&lt;div class=&quot;element-container&quot;&gt;\n\t\t\n &lt;div class=&quot;image-element__image height400 width400&quot;&gt;\n &lt;img\n src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;\n data-lazy-src=&quot;/assets/Uploads/ElementImage/Screenshot-from-2021-01-04-20-30-19__FillWzQwMCw0MDBd.png&quot; class=&quot;img-responsive&quot; alt=&quot;Programming&quot;\n /&gt;\n &lt;/div&gt;\n\n\n\n&lt;div class=&quot;image-element__caption img-content&quot;&gt;\n &lt;h3 class=&quot;image-element__title title&quot;&gt;Programming&lt;/h3&gt;\n\n \n&lt;/div&gt;\n\n\n\n &lt;a href=&quot;/en/development/&quot; class=&quot;stretched-link&quot;&gt;\n &lt;b class=&quot;sr-only&quot;&gt;Programming&lt;/b&gt;\n &lt;/a&gt;\n\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n\n \n\n\n&lt;/div&gt;\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n", '&lt;div\nid=&quot;e7&quot;\nclass=&quot;element dnadesign__elementallist__model__elementlist\n\t\n\t&quot;\n&gt;\n\t&lt;div class=&quot;element-container container&quot;&gt;\n\t\t\n&lt;div class=&quot;list-element__container row&quot; data-listelement-count=&quot;3&quot;&gt;\n \n \n\t &lt;div\nid=&quot;e9&quot;\nclass=&quot;element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md&quot;\n&gt;\n\t&lt;div class=&quot;element-container&quot;&gt;\n\t\t\n &lt;div class=&quot;image-element__image height400 width400&quot;&gt;\n &lt;img\n src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;\n data-lazy-src=&quot;/assets/Uploads/ElementImage/1609765749853__FillWzQwMCw0MDBd.jpg&quot; class=&quot;img-responsive&quot; alt=&quot;Aquascaping&quot;\n /&gt;\n &lt;/div&gt;\n\n\n\n&lt;div class=&quot;image-element__caption img-content&quot;&gt;\n &lt;h3 class=&quot;image-element__title title&quot;&gt;Aquascaping&lt;/h3&gt;\n\n \n&lt;/div&gt;\n\n\n\n &lt;a href=&quot;/en/aquascaping/&quot; class=&quot;stretched-link&quot;&gt;\n &lt;b class=&quot;sr-only&quot;&gt;Aquascaping&lt;/b&gt;\n &lt;/a&gt;\n\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n\n \n\t &lt;div\nid=&quot;e10&quot;\nclass=&quot;element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md&quot;\n&gt;\n\t&lt;div class=&quot;element-container&quot;&gt;\n\t\t\n &lt;div class=&quot;image-element__image height400 width400&quot;&gt;\n &lt;img\n src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;\n data-lazy-src=&quot;/assets/Uploads/ElementImage/1609766816754__FillWzQwMCw0MDBd.jpg&quot; class=&quot;img-responsive&quot; alt=&quot;Car Projects&quot;\n /&gt;\n &lt;/div&gt;\n\n\n\n&lt;div class=&quot;image-element__caption img-content&quot;&gt;\n &lt;h3 class=&quot;image-element__title title&quot;&gt;Car Projects&lt;/h3&gt;\n\n \n&lt;/div&gt;\n\n\n\n &lt;a href=&quot;/en/car/&quot; class=&quot;stretched-link&quot;&gt;\n &lt;b class=&quot;sr-only&quot;&gt;Car Projects&lt;/b&gt;\n &lt;/a&gt;\n\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n\n \n\t &lt;div\nid=&quot;e12&quot;\nclass=&quot;element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md&quot;\n&gt;\n\t&lt;div class=&quot;element-container&quot;&gt;\n\t\t\n &lt;div class=&quot;image-element__image height400 width400&quot;&gt;\n &lt;img\n src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot;\n data-lazy-src=&quot;/assets/Uploads/ElementImage/Screenshot-from-2021-01-04-20-30-19__FillWzQwMCw0MDBd.png&quot; class=&quot;img-responsive&quot; alt=&quot;Programming&quot;\n /&gt;\n &lt;/div&gt;\n\n\n\n&lt;div class=&quot;image-element__caption img-content&quot;&gt;\n &lt;h3 class=&quot;image-element__title title&quot;&gt;Programming&lt;/h3&gt;\n\n \n&lt;/div&gt;\n\n\n\n &lt;a href=&quot;/en/development/&quot; class=&quot;stretched-link&quot;&gt;\n &lt;b class=&quot;sr-only&quot;&gt;Programming&lt;/b&gt;\n &lt;/a&gt;\n\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n\n \n\n\n&lt;/div&gt;\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n',
}, },
}, },
{ {
node: { node: {
ID: "4", ID: '4',
Title: "Hello, I'm Tony Air", Title: "Hello, I'm Tony Air",
Render: Render:
"&lt;div\nid=&quot;e4&quot;\nclass=&quot;element dnadesign__elemental__models__elementcontent\n\t\n\t&quot;\n&gt;\n\t&lt;div class=&quot;element-container container&quot;&gt;\n\t\t&lt;div\nclass=&quot;content-element__content&quot;\n&gt;\n \n\t\n &lt;h2 class=&quot;content-element__title&quot;&gt;Hello, I&amp;#039;m Tony Air&lt;/h2&gt;\n \n\n &lt;div class=&quot;typography&quot;&gt;\n &lt;p&gt;That&#039;s my personal website, I&#039;m full-stack developer mostly specializing on SilverStipe backend projects and share some of my hobbies at this website.&lt;br&gt;&lt;br&gt;As for the things I do for work:&lt;br&gt;&lt;br&gt;Here&#039;s front-end UI kit:&amp;nbsp;&lt;a rel=&quot;noopener&quot; href=&quot;https://github.com/a2nt/webpack-bootstrap-ui-kit&quot; target=&quot;_blank&quot;&gt;https://github.com/a2nt/webpack-bootstrap-ui-kit&lt;/a&gt;&lt;br&gt;Here&#039;s SilverStipe quick start template:&amp;nbsp;&lt;a rel=&quot;noopener&quot; href=&quot;https://github.com/a2nt/silverstripe-webpack&quot; target=&quot;_blank&quot;&gt;https://github.com/a2nt/silverstripe-webpack&lt;/a&gt;&lt;br&gt;&lt;br&gt;More at my github:&amp;nbsp;&lt;a rel=&quot;noopener&quot; href=&quot;https://github.com/a2nt&quot; target=&quot;_blank&quot;&gt;https://github.com/a2nt&lt;/a&gt;&lt;/p&gt;\n &lt;/div&gt;\n\n \n&lt;/div&gt;\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n", '&lt;div\nid=&quot;e4&quot;\nclass=&quot;element dnadesign__elemental__models__elementcontent\n\t\n\t&quot;\n&gt;\n\t&lt;div class=&quot;element-container container&quot;&gt;\n\t\t&lt;div\nclass=&quot;content-element__content&quot;\n&gt;\n \n\t\n &lt;h2 class=&quot;content-element__title&quot;&gt;Hello, I&amp;#039;m Tony Air&lt;/h2&gt;\n \n\n &lt;div class=&quot;typography&quot;&gt;\n &lt;p&gt;That&#039;s my personal website, I&#039;m full-stack developer mostly specializing on SilverStipe backend projects and share some of my hobbies at this website.&lt;br&gt;&lt;br&gt;As for the things I do for work:&lt;br&gt;&lt;br&gt;Here&#039;s front-end UI kit:&amp;nbsp;&lt;a rel=&quot;noopener&quot; href=&quot;https://github.com/a2nt/webpack-bootstrap-ui-kit&quot; target=&quot;_blank&quot;&gt;https://github.com/a2nt/webpack-bootstrap-ui-kit&lt;/a&gt;&lt;br&gt;Here&#039;s SilverStipe quick start template:&amp;nbsp;&lt;a rel=&quot;noopener&quot; href=&quot;https://github.com/a2nt/silverstripe-webpack&quot; target=&quot;_blank&quot;&gt;https://github.com/a2nt/silverstripe-webpack&lt;/a&gt;&lt;br&gt;&lt;br&gt;More at my github:&amp;nbsp;&lt;a rel=&quot;noopener&quot; href=&quot;https://github.com/a2nt&quot; target=&quot;_blank&quot;&gt;https://github.com/a2nt&lt;/a&gt;&lt;/p&gt;\n &lt;/div&gt;\n\n \n&lt;/div&gt;\n\n\t&lt;/div&gt;\n&lt;/div&gt;\n',
}, },
}, },
], ],
@ -89,6 +89,6 @@ export const handlers = [
}, },
}, },
}) })
); )
}), }),
]; ]

6
src/mocks/server.js
View File

@ -1,5 +1,5 @@
// src/mocks/server.js // src/mocks/server.js
import { setupServer } from "msw/node"; import { setupServer } from 'msw/node'
import { handlers } from "./handlers"; import { handlers } from './handlers'
// This configures a request mocking server with the given request handlers. // This configures a request mocking server with the given request handlers.
export const server = setupServer(...handlers); export const server = setupServer(...handlers)