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

Compare commits

base: tonyair:dd6e19e358b5a7c7ae99c35f9a75aff88d835ee0
Branches Tags
tonyair:master
tonyair:react
tonyair:jquery
tonyair:4.3.2
tonyair:2.6.2
...
compare: tonyair:72bfe00d0cca79bad90af6a6f3c476ec43cfd228
Branches Tags
tonyair:master
tonyair:react
tonyair:jquery
tonyair:4.3.2
tonyair:2.6.2

3 Commits
dd6e19e358 ... 72bfe00d0c

Author SHA1 Message Date
Tony Air
72bfe00d0c IMPR: standard linting 2022-05-03 21:47:47 +02:00
Tony Air
4e1c552201 IMPR: standard linting 2022-05-03 21:44:33 +02:00
Tony Air
68f430f350 IMPR: standard linting 2022-05-03 20:50:57 +02:00
98 changed files with 4826 additions and 4838 deletions
Show Stats Expand all files Collapse all files

3
.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.2",
"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.",
"icons": {

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

@ -1,5 +1,5 @@
{
"version": "4.6.0",
"version": "4.6.2",
"api_version": 1,
"layout": {
"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-1651607091520"/><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">
<a
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.2","-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))}))}()}();

58
dist/records.json vendored
View File

@ -15,7 +15,7 @@
"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/html-loader@3.1.0_webpack@5.72.0/node_modules/html-loader/dist/runtime/getUrl.js": 147,
"./node_modules/.pnpm/html-loader@3.1.0_webpack@5.72.0/node_modules/html-loader/dist/cjs.js!./node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/html/meta-lightbox.html": 918,
"./node_modules/.pnpm/html-loader@3.1.0_webpack@5.72.0/node_modules/html-loader/dist/cjs.js!./node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.3/node_modules/@a2nt/meta-lightbox-js/src/html/meta-lightbox.html": 553,
"./node_modules/.pnpm/html-loader@3.1.0_webpack@5.72.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Accordion.html": 781,
"./node_modules/.pnpm/html-loader@3.1.0_webpack@5.72.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Content.html": 583,
"./node_modules/.pnpm/html-loader@3.1.0_webpack@5.72.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/ElementsList.html": 888,
@ -45,13 +45,13 @@
377,
492,
502,
553,
583,
765,
781,
813,
877,
888,
918
888
]
}
}
@ -82,7 +82,7 @@
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": [
"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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/app.scss": [
{
"chunks": {
"byName": {
@ -100,7 +100,7 @@
"./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,
"./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/app.scss": 251,
"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,
@ -122,6 +122,7 @@
204,
214,
217,
251,
349,
469,
486,
@ -132,14 +133,13 @@
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": [
"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.51.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": {
@ -156,17 +156,17 @@
"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
"./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/cms.scss": 762
},
"usedIds": [
656,
744,
970
762
]
}
}
],
"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": [
"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.51.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": {
@ -183,17 +183,17 @@
"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
"./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/editor.scss": 431
},
"usedIds": [
203,
431,
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": [
"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.51.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": {
@ -210,17 +210,17 @@
"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
"./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/map.api.scss": 171
},
"usedIds": [
466,
171,
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": [
"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.51.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": {
@ -237,10 +237,10 @@
"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
"./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/order.scss": 183
},
"usedIds": [
263,
183,
656,
744
]
@ -250,25 +250,25 @@
"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/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!./src/js/app.js|e224fa34b8353dcd927d253a1b558b16": 743,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|b5c6a8e438aa5da419a472da80053e75": 401,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/libs/log.js": 570,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/types/sw.js": 831,
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./thirdparty/serviceworker-caches.js": 756,
"./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.72.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./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": 841,
"./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.72.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./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": 104,
"./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.72.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./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": 191,
"./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.72.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./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": 706
"./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.72.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/cms.scss": 723,
"./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.72.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/editor.scss": 207,
"./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.72.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/map.api.scss": 636,
"./node_modules/.pnpm/mini-css-extract-plugin@2.6.0_webpack@5.72.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./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.51.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/order.scss": 114
},
"usedIds": [
104,
191,
114,
207,
401,
570,
706,
743,
636,
723,
756,
826,
831,
841
831
]
}
}

4
dist/report.html vendored
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8"/>
<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 21:47]</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" />
<script>
@ -31,7 +31,7 @@
<body>
<div id="app"></div>
<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":406799,"parsedSize":114613,"gzipSize":28251,"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":406222,"groups":[{"label":"js","path":"./src/js","statSize":230376,"groups":[{"id":401,"label":"app.js + 47 modules (concatenated)","path":"./src/js/app.js + 47 modules (concatenated)","statSize":230376,"parsedSize":114348,"gzipSize":28109,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/app.js + 47 modules (concatenated)/src/js","statSize":31138,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/app.js","statSize":2433,"parsedSize":1207,"gzipSize":296,"inaccurateSizes":true},{"label":"main","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main","statSize":9842,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/index.js","statSize":155,"parsedSize":76,"gzipSize":18,"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":1597,"parsedSize":792,"gzipSize":194,"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":1315,"gzipSize":323,"inaccurateSizes":true},{"id":null,"label":"main.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/main.js","statSize":3113,"parsedSize":1545,"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":1429,"parsedSize":709,"gzipSize":174,"inaccurateSizes":true}],"parsedSize":4885,"gzipSize":1200,"inaccurateSizes":true},{"label":"ui","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui","statSize":8469,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/carousel.js","statSize":5198,"parsedSize":2580,"gzipSize":634,"inaccurateSizes":true},{"id":null,"label":"dropdown.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/dropdown.js","statSize":2865,"parsedSize":1422,"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":4203,"gzipSize":1033,"inaccurateSizes":true},{"label":"ajax","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax","statSize":7155,"groups":[{"id":null,"label":"online.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/online.js","statSize":2640,"parsedSize":1310,"gzipSize":322,"inaccurateSizes":true},{"id":null,"label":"lazy-images.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/lazy-images.js","statSize":1155,"parsedSize":573,"gzipSize":140,"inaccurateSizes":true},{"label":"models","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models","statSize":3360,"groups":[{"id":null,"label":"image.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models/image.js","statSize":3360,"parsedSize":1667,"gzipSize":409,"inaccurateSizes":true}],"parsedSize":1667,"gzipSize":409,"inaccurateSizes":true}],"parsedSize":3551,"gzipSize":873,"inaccurateSizes":true},{"label":"layout","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout","statSize":1567,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout/index.js","statSize":1567,"parsedSize":777,"gzipSize":191,"inaccurateSizes":true}],"parsedSize":777,"gzipSize":191,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_events.js","statSize":1397,"parsedSize":693,"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":15455,"gzipSize":3799,"inaccurateSizes":true},{"label":"node_modules/.pnpm","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm","statSize":199238,"groups":[{"label":"@a2nt+meta-lightbox-js@4.2.3/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.3/node_modules/@a2nt/meta-lightbox-js/src/js","statSize":17739,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.3/node_modules/@a2nt/meta-lightbox-js/src/js/app.js","statSize":817,"parsedSize":405,"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.3/node_modules/@a2nt/meta-lightbox-js/src/js/_events.js","statSize":1366,"parsedSize":678,"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.3/node_modules/@a2nt/meta-lightbox-js/src/js/window.js","statSize":15556,"parsedSize":7721,"gzipSize":1898,"inaccurateSizes":true}],"parsedSize":8804,"gzipSize":2164,"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":11657,"gzipSize":2865,"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":5548,"gzipSize":1363,"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":985,"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":1894,"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":796,"gzipSize":195,"inaccurateSizes":true}],"parsedSize":9225,"gzipSize":2267,"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":4782,"gzipSize":1175,"inaccurateSizes":true}],"parsedSize":4782,"gzipSize":1175,"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":1782,"gzipSize":438,"inaccurateSizes":true}],"parsedSize":27447,"gzipSize":6747,"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":10246,"gzipSize":2518,"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":2777,"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":1638,"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":966,"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":780,"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":2060,"gzipSize":506,"inaccurateSizes":true}],"parsedSize":8224,"gzipSize":2021,"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":4586,"gzipSize":1127,"inaccurateSizes":true}],"parsedSize":5024,"gzipSize":1235,"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":8707,"gzipSize":2140,"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":450,"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":176,"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":179,"gzipSize":44,"inaccurateSizes":true}],"parsedSize":805,"gzipSize":198,"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":7542,"gzipSize":1854,"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":6642,"gzipSize":1632,"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":6532,"gzipSize":1605,"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":2143,"gzipSize":526,"inaccurateSizes":true}],"parsedSize":22861,"gzipSize":5619,"inaccurateSizes":true}],"parsedSize":32373,"gzipSize":7958,"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":807,"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":2803,"gzipSize":689,"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":1037,"gzipSize":255,"inaccurateSizes":true}],"parsedSize":5067,"gzipSize":1245,"inaccurateSizes":true}],"parsedSize":61220,"gzipSize":15049,"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":1419,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":1419,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":98892,"gzipSize":24309,"inaccurateSizes":true}]}],"parsedSize":114348,"gzipSize":28109},{"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":114348,"gzipSize":28109}]},{"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":723,"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":207,"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":636,"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":114,"label":"order.scss","path":"./src/scss/types/order.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]}];
window.defaultSizes = "parsed";
</script>
</body>

3
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
"version": "4.6.1",
"version": "4.6.2",
"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.",
"author": "Tony Air <tony@twma.pro>",
"license": "BSD-2-Clause",
@ -68,7 +68,6 @@
"aos": "^2.3.4",
"apollo3-cache-persist": "^0.14.0",
"balanced-match": "^2.0.0",
"bootbox": "^5.5.3",
"bootstrap": "^5.1.3",
"brace-expansion": "^2.0.1",
"density-clustering": "^1.3.0",

12
src/js/_consts.js
View File

@ -2,12 +2,12 @@
* Add your global events here
*/
//import MAP_DRIVER from './_components/drivers/_map.google';
//import MAP_DRIVER from './_components/drivers/_map.mapbox';
// import MAP_DRIVER from './_components/drivers/_map.google';
// import MAP_DRIVER from './_components/drivers/_map.mapbox';
const CONSTS = {
ENVS: ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"],
//MAP_DRIVER,
};
ENVS: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
// 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_LAST_STEP: 'form-last-step',
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 { persistCache, IonicStorageWrapper } from 'apollo3-cache-persist';
import { persistCacheSync, LocalStorageWrapper } from "apollo3-cache-persist";
// import { IonicStorageModule } from '@ionic/storage';
// import { persistCache, IonicStorageWrapper } 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 persistCache({
// await persistCache({
persistCacheSync({
cache,
storage: new LocalStorageWrapper(window.localStorage),
key: "web-persist",
key: 'web-persist',
maxSize: 1048576, // 1Mb
//new IonicStorageWrapper(IonicStorageModule),
});
// new IonicStorageWrapper(IonicStorageModule),
})
export { cache };
export { cache }

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

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

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

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

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

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

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

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

@ -1,82 +1,80 @@
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
? API_STATIC.getAttribute("content")
: `${window.location.protocol}//${window.location.host}`;
? API_STATIC.getAttribute('content')
: `${window.location.protocol}//${window.location.host}`
console.log(`${NAME} [static url]: ${API_STATIC_URL}`);
console.log(`${NAME} [static url]: ${API_STATIC_URL}`)
class ImageObject {
constructor() {
}
load (url, el) {
const imageUrl = url.startsWith('http') ? url : API_STATIC_URL + url
load(url, el) {
const imageUrl = url.startsWith("http") ? url : API_STATIC_URL + url;
if(el) {
el.classList.add("loading");
el.classList.remove("loading__network-error");
if (el) {
el.classList.add('loading')
el.classList.remove('loading__network-error')
}
// offline response will be served by caching service worker
const promise = new Promise((resolve, reject) => {
axios
.get(imageUrl, {
responseType: "blob",
responseType: 'blob',
})
.then((response) => {
const reader = new FileReader(); // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader
reader.readAsDataURL(response.data);
const reader = new window.FileReader() // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader
reader.readAsDataURL(response.data)
reader.onload = () => {
const imageDataUrl = reader.result;
if(el){
//el.setAttribute("src", imageDataUrl);
el.classList.remove("loading");
el.classList.add("loading__success");
const imageDataUrl = reader.result
if (el) {
// el.setAttribute("src", imageDataUrl);
el.classList.remove('loading')
el.classList.add('loading__success')
}
resolve(imageDataUrl);
};
resolve(imageDataUrl)
}
})
.catch((e) => {
console.warn(e);
console.warn(e)
let msg = ''
if (e.response) {
switch (e.response.status) {
case 404:
msg = "Not Found.";
break;
msg = 'Not Found.'
break
case 500:
msg = "Server issue, please try again latter.";
break;
msg = 'Server issue, please try again latter.'
break
default:
msg = "Something went wrong.";
break;
msg = 'Something went wrong.'
break
}
console.error(`${NAME} [${imageUrl}]: ${msg}`);
console.error(`${NAME} [${imageUrl}]: ${msg}`)
} else if (e.request) {
msg = "No response received";
console.error(`${NAME} [${imageUrl}]: ${msg}`);
msg = 'No response received'
console.error(`${NAME} [${imageUrl}]: ${msg}`)
} else {
console.error(`${NAME} [${imageUrl}]: ${e.message}`);
console.error(`${NAME} [${imageUrl}]: ${e.message}`)
}
if(el){
el.classList.remove("loading");
el.classList.add("loading__network-error");
el.classList.add("empty");
if (el) {
el.classList.remove('loading')
el.classList.add('loading__network-error')
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
*/
import { Component } from "react";
import { Component } from 'react'
import { useQuery, gql } from "@apollo/client";
import { client } from "../apollo/init";
import { cache } from "../apollo/cache";
import { useQuery, gql } from '@apollo/client'
import { client } from '../apollo/init'
import { cache } from '../apollo/cache'
const D = document;
const BODY = document.body;
const D = document
const BODY = document.body
class Page extends Component {
state = {
type: [],
shown: false,
Title: "Loading ...",
Title: 'Loading ...',
loading: true,
error: false,
current: null,
ID: null,
URLSegment: null,
ClassName: "Page",
ClassName: 'Page',
CSSClass: null,
Summary: null,
Link: null,
URL: null,
HTML: null,
Elements: [],
page: null,
};
page: null
}
componentDidUpdate() {
const ui = this;
componentDidUpdate () {
const ui = this
if (ui.state.Title) {
document.title = ui.state.Title;
document.title = ui.state.Title
}
}
constructor(props) {
super(props);
constructor (props) {
super(props)
const ui = this;
const ui = this
ui.name = ui.constructor.name;
ui.empty_state = ui.state;
ui.name = ui.constructor.name
ui.empty_state = ui.state
console.log(`${ui.name}: init`);
console.log(`${ui.name}: init`)
}
isOnline = () => {
return BODY.classList.contains("is-online");
};
return BODY.classList.contains('is-online')
}
load = (link) => {
const ui = this;
const ui = this
return new Promise((resolve, reject) => {
const query = gql(`query Pages {
@ -74,89 +74,89 @@ class Page extends Component {
}
}
}
}`);
}`)
if (!ui.isOnline()) {
const data = client.readQuery({
query,
});
query
})
if (data && ui.processResponse(data)) {
console.log(`${ui.name}: Offline cached response`);
resolve(data);
console.log(`${ui.name}: Offline cached response`)
resolve(data)
} else {
console.log(`${ui.name}: No offline response`);
console.log(`${ui.name}: No offline response`)
ui.setState(
Object.assign(ui.empty_state, {
Title: "Offline",
CSSClass: "graphql__status-523",
Title: 'Offline',
CSSClass: 'graphql__status-523',
Summary: "You're Offline. The page is not available now.",
loading: false,
loading: false
})
);
)
reject({
status: 523,
});
status: 523
})
}
} else {
if (!ui.state.loading) {
ui.setState(ui.empty_state);
ui.setState(ui.empty_state)
}
client
.query({
query: query,
fetchPolicy: ui.isOnline() ? "no-cache" : "cache-first",
query,
fetchPolicy: ui.isOnline() ? 'no-cache' : 'cache-first'
})
.then((resp) => {
// write to cache
const data = resp.data;
const data = resp.data
client.writeQuery({
query,
data: data,
});
data
})
if (ui.processResponse(data)) {
console.log(`${ui.name}: got the server response`);
resolve(data);
console.log(`${ui.name}: got the server response`)
resolve(data)
} else {
console.log(`${ui.name}: not found`);
console.log(`${ui.name}: not found`)
reject({
status: 404,
});
status: 404
})
}
})
.catch((error) => {
reject({
status: 500,
error: error,
});
});
error
})
})
}
});
};
})
}
processResponse = (data) => {
const ui = this;
const ui = this
if (!data.readPages.edges.length) {
console.log(`${ui.name}: not found`);
console.log(`${ui.name}: not found`)
ui.setState(
Object.assign(ui.empty_state, {
Title: "Not Found",
CSSClass: "graphql__status-404",
Summary: "The page is not found.",
loading: false,
Title: 'Not Found',
CSSClass: 'graphql__status-404',
Summary: 'The page is not found.',
loading: false
})
);
)
return false;
return false
}
const page = data.readPages.edges[0].node;
const page = data.readPages.edges[0].node
ui.setState({
ID: page.ID,
Title: page.Title,
@ -166,59 +166,59 @@ class Page extends Component {
Summary: page.Summary,
Link: page.Link,
HTML: page.HTML,
Elements: [], //page.Elements.edges,
loading: false,
});
Elements: [], // page.Elements.edges,
loading: false
})
return true;
};
return true
}
getHtml = (html) => {
const decodeHtmlEntity = (input) => {
var doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
};
const doc = new DOMParser().parseFromString(input, 'text/html')
return doc.documentElement.textContent
}
return {
__html: decodeHtmlEntity(html),
};
};
__html: decodeHtmlEntity(html)
}
}
render() {
const ui = this;
const name = ui.name;
const className = `elemental-area graphql__page page-${ui.state.CSSClass} url-${ui.state.URLSegment}`;
render () {
const ui = this
const name = ui.name
const className = `elemental-area graphql__page page-${ui.state.CSSClass} url-${ui.state.URLSegment}`
const ElementItem = (props) => (
<div dangerouslySetInnerHTML={props.html}></div>
);
<div dangerouslySetInnerHTML={props.html} />
)
let html = "";
let html = ''
if (ui.state.HTML) {
console.log(`${ui.name}: HTML only`);
html = ui.state.HTML;
console.log(`${ui.name}: HTML only`)
html = ui.state.HTML
} else if (ui.state.Elements.length) {
console.log(`${ui.name}: render`);
console.log(`${ui.name}: render`)
ui.state.Elements.map((el) => {
html += el.node.Render;
});
html += el.node.Render
})
} else if (ui.state.Summary && ui.state.Summary.length) {
console.log(`${ui.name}: summary only`);
html = `<div class="summary">${ui.state.Summary}</div>`;
console.log(`${ui.name}: summary only`)
html = `<div class="summary">${ui.state.Summary}</div>`
}
if (ui.state.loading) {
const spinner = D.getElementById("PageLoading");
html = `<div class="loading">Loading ...</div>`;
const spinner = D.getElementById('PageLoading')
html = '<div class="loading">Loading ...</div>'
}
return (
<div
className={className}
dangerouslySetInnerHTML={ui.getHtml(html)}
></div>
);
/>
)
}
}
export default Page;
export default Page

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

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

80
src/js/app.js
View File

@ -1,44 +1,44 @@
'use strict';
'use strict'
/*
* UI Basics
*/
//import $ from 'jquery';
import '../scss/app.scss';
// import $ from 'jquery';
import '../scss/app.scss'
import Events from './_events';
import './main';
// import Events from './_events'
import './main'
/*
* Extra functionality
*/
import '@a2nt/meta-lightbox-js/src/js/app';
import './ui/carousel';
import './ui/dropdown';
import './ui/datepicker';
//import './ui/ui.instagram.feed';
import '@a2nt/meta-lightbox-js/src/js/app'
import './ui/carousel'
import './ui/dropdown'
import './ui/datepicker'
// import './ui/ui.instagram.feed';
/*
* AJAX functionality
*/
//import './ajax/links';
import './ajax/online';
import './ajax/lazy-images';
// import './ajax/links';
import './ajax/online'
import './ajax/lazy-images'
/*
* Site specific modules
*/
import './layout';
import './layout'
//import 'hammerjs/hammer';
//import 'jquery-hammerjs/jquery.hammer';
// import 'hammerjs/hammer';
// import 'jquery-hammerjs/jquery.hammer';
// Routie
//import 'pouchdb/dist/pouchdb';
//import './components/routes/index';
// import 'pouchdb/dist/pouchdb';
// import './components/routes/index';
// conflicts with components/ui.hover.js (shows dropdown on hover)
//import 'bootstrap/js/dist/dropdown';
/*import './components/ui.hover';
// import 'bootstrap/js/dist/dropdown';
/* import './components/ui.hover';
import './components/ui.carousel';
import './components/ui.menu';
@ -47,55 +47,55 @@ import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/scrollspy';
import 'bootstrap/js/dist/tab';*/
import 'bootstrap/js/dist/tab'; */
//
// 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
//import 'jquery-zoom/jquery.zoom';
// import 'jquery-zoom/jquery.zoom';
// FlyoutUI
//import FlyoutUI from './components/ui.flyout';
// import FlyoutUI from './components/ui.flyout';
// Sticky sidebar
//import SidebarUI from './components/ui.sidebar';
// import SidebarUI from './components/ui.sidebar';
// Toggle bootstrap form fields
//import FormToggleUI from './components/ui.form.fields.toggle';
// import FormToggleUI from './components/ui.form.fields.toggle';
// Bootstrap Date & Time fields
//import FormDatetime from './components/ui.form.datetime';
// import FormDatetime from './components/ui.form.datetime';
// Stepped forms functionality
//import FormStepped from './components/ui.form.stepped';
// import FormStepped from './components/ui.form.stepped';
// Forms validation functionality
//import FormValidate from './components/ui.form.validate';
// import FormValidate from './components/ui.form.validate';
// Store forms data into localStorage
//import FormStorage from './components/ui.form.storage';
// import FormStorage from './components/ui.form.storage';
// client-side images cropping
//import FormCroppie from './components/ui.form.croppie';
// import FormCroppie from './components/ui.form.croppie';
// Google NoCaptcha fields
//import NoCaptcha from './components/ui.nocaptcha';
// import NoCaptcha from './components/ui.nocaptcha';
// youtube video preview image
//import './components/ui.video.preview';
// import './components/ui.video.preview';
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
//import Table from 'bootstrap-table/dist/bootstrap-table';
// import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
// import Table from 'bootstrap-table/dist/bootstrap-table';
// 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 './layout';
// import './main';
// import './layout';
// 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) {
if (typeof ga !== "function") {
return;
function _gaLt (event) {
if (typeof ga !== 'function') {
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) */
while (
el &&
(typeof el.tagName == "undefined" ||
el.tagName.toLowerCase() != "a" ||
(typeof el.tagName === 'undefined' ||
el.tagName.toLowerCase() != 'a' ||
!el.href)
) {
el = el.parentNode;
el = el.parentNode
}
if (el && el.href) {
/* link */
var link = el.href;
const link = el.href
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
/* external link */
/* HitCallback function to either open link in either same or new window */
var hitBack = function (link, target) {
target ? window.open(link, target) : (window.location.href = link);
};
const hitBack = function (link, target) {
target ? window.open(link, target) : (window.location.href = link)
}
/* Is target set and not _(self|parent|top)? */
var target =
const target =
el.target && !el.target.match(/^_(self|parent|top)$/i)
? el.target
: false;
: false
/* send event with callback */
ga(
"send",
"event",
"Outgoing Links",
'send',
'event',
'Outgoing Links',
link,
document.location.pathname + document.location.search,
{ hitCallback: hitBack(link, target) }
);
)
/* 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 */
var w = window;
const w = window
w.addEventListener
? w.addEventListener(
"load",
'load',
() => {
document.body.addEventListener("click", _gaLt, !1);
document.body.addEventListener('click', _gaLt, !1)
},
!1
)
: w.attachEvent &&
w.attachEvent("onload", () => {
document.body.attachEvent("onclick", _gaLt);
});
w.attachEvent('onload', () => {
document.body.attachEvent('onclick', _gaLt)
})

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

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

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

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

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

@ -1,224 +1,224 @@
"use strict";
'use strict'
const google = window.google
const Obj = {
init: () => {
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
constructor(options) {
super();
const ui = this;
constructor (options) {
super()
const ui = this
ui.ownerMap = options.map;
//ui.setMap(options.map);
ui.position = options.position;
ui.ownerMap = options.map
// ui.setMap(options.map);
ui.position = options.position
ui.html = options.html
? options.html
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
ui.divClass = options.divClass;
ui.align = options.align;
ui.isDebugMode = options.debug;
ui.onClick = options.onClick;
ui.onMouseOver = options.onMouseOver;
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
ui.divClass = options.divClass
ui.align = options.align
ui.isDebugMode = options.debug
ui.onClick = options.onClick
ui.onMouseOver = options.onMouseOver
ui.isBoolean = (arg) => {
if (typeof arg === "boolean") {
return true;
if (typeof arg === 'boolean') {
return true
} else {
return false;
return false
}
};
}
ui.isNotUndefined = (arg) => {
if (typeof arg !== "undefined") {
return true;
if (typeof arg !== 'undefined') {
return true
} else {
return false;
return false
}
};
}
ui.hasContent = (arg) => {
if (arg.length > 0) {
return true;
return true
} else {
return false;
return false
}
};
}
ui.isString = (arg) => {
if (typeof arg === "string") {
return true;
if (typeof arg === 'string') {
return true
} else {
return false;
return false
}
};
}
ui.isFunction = (arg) => {
if (typeof arg === "function") {
return true;
if (typeof arg === 'function') {
return true
} else {
return false;
return false
}
};
}
}
onAdd() {
const ui = this;
onAdd () {
const ui = this
// Create div element.
ui.div = document.createElement("div");
ui.div.style.position = "absolute";
ui.div = document.createElement('div')
ui.div.style.position = 'absolute'
// Validate and set custom div class
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
ui.div.className = ui.divClass;
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
// Validate and set custom HTML
if (
ui.isNotUndefined(ui.html) &&
ui.hasContent(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 (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
ui.div.className = "debug-mode";
ui.div.className = 'debug-mode'
ui.div.innerHTML =
'<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(
"style",
"position: absolute;" +
"border: 5px dashed red;" +
"height: 150px;" +
"width: 150px;" +
"display: flex;" +
"justify-content: center;" +
"align-items: center;"
);
'style',
'position: absolute;' +
'border: 5px dashed red;' +
'height: 150px;' +
'width: 150px;' +
'display: flex;' +
'justify-content: center;' +
'align-items: center;'
)
}
// Add element to clickable layer
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
ui.getPanes().overlayMouseTarget.appendChild(ui.div)
// Add listeners to the element.
google.maps.event.addDomListener(ui.div, "click", (event) => {
google.maps.event.trigger(ui, "click");
if (ui.isFunction(ui.onClick)) ui.onClick();
event.stopPropagation();
});
google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, 'click')
if (ui.isFunction(ui.onClick)) ui.onClick()
event.stopPropagation()
})
google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
google.maps.event.trigger(ui, "mouseover");
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation();
});
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, 'mouseover')
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
event.stopPropagation()
})
}
draw() {
const ui = this;
draw () {
const ui = this
let div = document.querySelector(".popup");
let div = document.querySelector('.popup')
if (!div.length) {
div = ui.div;
div = ui.div
}
// Calculate position of div
const projection = ui.getProjection();
const projection = ui.getProjection()
if (!projection) {
console.log("GoogleMapsHtmlOverlay: current map is missing");
return null;
console.log('GoogleMapsHtmlOverlay: current map is missing')
return null
}
const positionInPixels = projection.fromLatLngToDivPixel(
ui.getPosition()
);
)
// Align HTML overlay relative to original position
const offset = {
y: undefined,
x: undefined,
};
const divWidth = div.offsetWidth;
const divHeight = div.offsetHeight;
}
const divWidth = div.offsetWidth
const divHeight = div.offsetHeight
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
case "left top":
offset.y = divHeight;
offset.x = divWidth;
break;
case "left center":
offset.y = divHeight / 2;
offset.x = divWidth;
break;
case "left bottom":
offset.y = 0;
offset.x = divWidth;
break;
case "center top":
offset.y = divHeight;
offset.x = divWidth / 2;
break;
case "center center":
offset.y = divHeight / 2;
offset.x = divWidth / 2;
break;
case "center bottom":
offset.y = 0;
offset.x = divWidth / 2;
break;
case "right top":
offset.y = divHeight;
offset.x = 0;
break;
case "right center":
offset.y = divHeight / 2;
offset.x = 0;
break;
case "right bottom":
offset.y = 0;
offset.x = 0;
break;
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
case 'left top':
offset.y = divHeight
offset.x = divWidth
break
case 'left center':
offset.y = divHeight / 2
offset.x = divWidth
break
case 'left bottom':
offset.y = 0
offset.x = divWidth
break
case 'center top':
offset.y = divHeight
offset.x = divWidth / 2
break
case 'center center':
offset.y = divHeight / 2
offset.x = divWidth / 2
break
case 'center bottom':
offset.y = 0
offset.x = divWidth / 2
break
case 'right top':
offset.y = divHeight
offset.x = 0
break
case 'right center':
offset.y = divHeight / 2
offset.x = 0
break
case 'right bottom':
offset.y = 0
offset.x = 0
break
default:
offset.y = divHeight / 2;
offset.x = divWidth / 2;
break;
offset.y = divHeight / 2
offset.x = divWidth / 2
break
}
// Set position
ui.div.style.top = `${positionInPixels.y - offset.y}px`;
ui.div.style.left = `${positionInPixels.x - offset.x}px`;
ui.div.style.top = `${positionInPixels.y - offset.y}px`
ui.div.style.left = `${positionInPixels.x - offset.x}px`
}
getPosition() {
const ui = this;
return new google.maps.LatLng(ui.position);
getPosition () {
const ui = this
return new google.maps.LatLng(ui.position)
}
getDiv() {
const ui = this;
return ui.div;
getDiv () {
const ui = this
return ui.div
}
setPosition(position, align) {
const ui = this;
ui.position = position;
ui.align = align;
ui.draw();
setPosition (position, align) {
const ui = this
ui.position = position
ui.align = align
ui.draw()
}
remove() {
const ui = this;
ui.setMap(null);
ui.div.remove();
remove () {
const ui = this
ui.setMap(null)
ui.div.remove()
}
// emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus)
getDraggable() {
return false;
getDraggable () {
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 mapBoxGL from "mapbox-gl";
// import $ from 'jquery';
import mapBoxGL from 'mapbox-gl'
import Events from "../../_events";
import Events from '../../_events'
const MapBoxDriver = (($) => {
class MapBoxDriver {
getName() {
return "MapBoxDriver";
getName () {
return 'MapBoxDriver'
}
init($el, config = []) {
const ui = this;
init ($el, config = []) {
const ui = this
mapBoxGL.accessToken = config["key"];
mapBoxGL.accessToken = config.key
ui.map = new mapBoxGL.Map({
container: $el.find(".mapAPI-map")[0],
center: config["center"] ? config["center"] : [0, 0],
//hash: true,
style: config["style"]
? config["style"]
: "mapbox://styles/mapbox/streets-v9",
localIdeographFontFamily: config["font-family"],
zoom: config["mapZoom"] ? config["mapZoom"] : 10,
container: $el.find('.mapAPI-map')[0],
center: config.center ? config.center : [0, 0],
// hash: true,
style: config.style
? config.style
: 'mapbox://styles/mapbox/streets-v9',
localIdeographFontFamily: config['font-family'],
zoom: config.mapZoom ? config.mapZoom : 10,
attributionControl: false,
antialias: true,
accessToken: config["key"],
accessToken: config.key,
})
.addControl(
new mapBoxGL.AttributionControl({
compact: true,
})
)
.addControl(new mapBoxGL.NavigationControl(), "top-right")
.addControl(new mapBoxGL.NavigationControl(), 'top-right')
.addControl(
new mapBoxGL.GeolocateControl({
positionOptions: {
@ -42,58 +42,58 @@ const MapBoxDriver = (($) => {
},
trackUserLocation: true,
}),
"bottom-right"
'bottom-right'
)
.addControl(
new mapBoxGL.ScaleControl({
maxWidth: 80,
unit: "metric",
unit: 'metric',
}),
"top-left"
'top-left'
)
.addControl(new mapBoxGL.FullscreenControl());
.addControl(new mapBoxGL.FullscreenControl())
ui.map.on("load", (e) => {
$el.trigger(Events.MAPAPILOADED);
});
ui.map.on('load', (e) => {
$el.trigger(Events.MAPAPILOADED)
})
ui.popup = new mapBoxGL.Popup({
closeOnClick: false,
className: "popup",
});
className: 'popup',
})
}
addMarker(crds, config) {
const ui = this;
addMarker (crds, config) {
const ui = this
// create a DOM el for the marker
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) => {
ui.popup.setLngLat(crds).setHTML(config["content"]).addTo(ui.map);
$el.on('click', (e) => {
ui.popup.setLngLat(crds).setHTML(config.content).addTo(ui.map)
if (config["flyToMarker"]) {
if (config.flyToMarker) {
ui.map.flyTo({
center: crds,
zoom: 17,
});
})
}
$(e.currentTarget).trigger(Events.MAPMARKERCLICK);
});
$(e.currentTarget).trigger(Events.MAPMARKERCLICK)
})
// 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) {
const ui = this;
addGeoJson (config) {
const ui = this
// Insert the layer beneath any symbol layer.
/*if (config['3d']) {
/* if (config['3d']) {
const layers = Map.getStyle().layers;
let labelLayerId;
for (let i = 0; i < layers.length; i++) {
@ -130,55 +130,55 @@ const MapBoxDriver = (($) => {
'fill-extrusion-opacity': .6,
},
}, labelLayerId);
}*/
} */
const firstMarker = config["geojson"].features[0].geometry.coordinates;
//Map.setCenter(firstMarker);
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker);
const firstMarker = config.geojson.features[0].geometry.coordinates
// Map.setCenter(firstMarker);
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker)
// add markers to map
config["geojson"].features.forEach((marker) => {
const id = marker.id;
const crds = marker.geometry.coordinates;
const content = marker.properties.content;
config.geojson.features.forEach((marker) => {
const id = marker.id
const crds = marker.geometry.coordinates
const content = marker.properties.content
ui.addMarker(crds, {
id,
content,
icon: marker.icon,
flyToMarker: config["flyToMarker"],
});
flyToMarker: config.flyToMarker,
})
bounds.extend(crds);
});
bounds.extend(crds)
})
ui.map.fitBounds(bounds, {
padding: 30,
});
})
ui.popup.on("close", (e) => {
if (config["flyToBounds"]) {
ui.popup.on('close', (e) => {
if (config.flyToBounds) {
ui.map.fitBounds(bounds, {
padding: 30,
});
})
}
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE);
});
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE)
})
}
getMap() {
const ui = this;
return ui.map;
getMap () {
const ui = this
return ui.map
}
getPopup() {
const ui = this;
return ui.popup;
getPopup () {
const ui = this
return ui.popup
}
}
return MapBoxDriver;
})($);
return MapBoxDriver
})($)
export default MapBoxDriver;
export default MapBoxDriver

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

@ -1,26 +1,25 @@
import Events from "../_events";
import Events from '../_events'
const LayoutUI = ((W) => {
const NAME = "_layout";
const D = document;
const BODY = D.body;
const NAME = '_layout'
const D = document
const init_fonts = () => {
console.log(`${NAME}: init_fonts`);
const initFonts = () => {
console.log(`${NAME}: initFonts`)
const css = D.createElement("link");
css.rel = "stylesheet";
css.type = "text/css";
css.media = "all";
const css = D.createElement('link')
css.rel = 'stylesheet'
css.type = 'text/css'
css.media = 'all'
css.href =
"https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap";
D.getElementsByTagName("head")[0].appendChild(css);
};
'https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'
D.getElementsByTagName('head')[0].appendChild(css)
}
const init_analytics = () => {
console.log(`${NAME}: init_analytics`);
/*google analytics */
/*(function(i, s, o, g, r, a, m) {
const initAnalytics = () => {
console.log(`${NAME}: initAnalytics`)
/* google analytics */
/* (function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
@ -40,12 +39,12 @@ const LayoutUI = ((W) => {
'ga',
);
ga('create', 'UA-********-*', 'auto');
ga('send', 'pageview');*/
};
ga('send', 'pageview'); */
}
W.addEventListener(`${Events.LOADED}`, () => {
init_fonts();
//init_analytics();
});
})(window);
export default LayoutUI;
initFonts()
initAnalytics()
})
})(window)
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) => {
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
import Events from "../_events";
import Consts from "../_consts";
import Events from '../_events'
import Consts from '../_consts'
export default ((W) => {
const NAME = "_main.css-screen-size";
const D = document;
const BODY = D.body;
const NAME = '_main.css-screen-size'
const D = document
const BODY = D.body
const detectCSSScreenSize = () => {
const el = D.createElement("div");
el.className = "env-test";
BODY.appendChild(el);
const el = D.createElement('div')
el.className = 'env-test'
BODY.appendChild(el)
const envs = [...Consts.ENVS].reverse();
let curEnv = envs.shift();
BODY.classList.remove(...envs);
const envs = [...Consts.ENVS].reverse()
let curEnv = envs.shift()
BODY.classList.remove(...envs)
for (let i = 0; i < envs.length; ++i) {
const env = envs[i];
el.classList.add(`d-${env}-none`);
const env = envs[i]
el.classList.add(`d-${env}-none`)
if (W.getComputedStyle(el).display === "none") {
curEnv = env;
BODY.classList.add(`${curEnv}`);
break;
if (W.getComputedStyle(el).display === 'none') {
curEnv = env
BODY.classList.add(`${curEnv}`)
break
}
}
let landscape = true;
let landscape = true
if (W.innerWidth > W.innerHeight) {
BODY.classList.add("landscape");
BODY.classList.remove("portrait");
BODY.classList.add('landscape')
BODY.classList.remove('portrait')
} else {
landscape = false;
landscape = false
BODY.classList.add("portrait");
BODY.classList.remove("landscape");
BODY.classList.add('portrait')
BODY.classList.remove('landscape')
}
console.log(
`${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);
})(window);
W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize)
})(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
@ -10,26 +10,26 @@ const funcs = {};
funcs.getParents = (elem, selector) => {
// Setup parents array
const parents = [];
let el = elem;
const parents = []
let el = elem
// Get matching parent elements
while (el && el !== document) {
// If using a selector, add matching parents to array
// Otherwise, add all parents
if (selector) {
if (el.matches(selector)) {
parents.push(el);
parents.push(el)
}
} else {
parents.push(el);
parents.push(el)
}
// Jump to the next parent node
el = el.parentNode;
el = el.parentNode
}
return parents;
};
return parents
}
module.exports = funcs;
module.exports.default = funcs;
module.exports = funcs
module.exports.default = funcs

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

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

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

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

88
src/js/main/main.js
View File

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

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

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

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

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

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

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

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

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

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

@ -1,19 +1,19 @@
import configure from "./configure";
const store = configure();
import configure from './configure'
const store = configure()
/*import {
/* import {
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({
type: "counter/incremented",
});
type: 'counter/incremented',
})
store.dispatch({
type: "counter/incremented",
});
type: 'counter/incremented',
})
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 = {
value: 0,
},
action
) {
switch (action.type) {
case "counter/incremented":
case 'counter/incremented':
return {
value: state.value + 1,
};
case "counter/decremented":
}
case 'counter/decremented':
return {
value: state.value - 1,
};
}
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({
counter,
});
})

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

@ -1,23 +1,23 @@
'use strict';
'use strict'
import '../scss/test-build.scss';
import '@a2nt/meta-lightbox-js/src/js/test-build';
import '../scss/test-build.scss'
import '@a2nt/meta-lightbox-js/src/js/test-build'
import Events from './_events';
import MainUI from './main';
import Events from './_events'
import MainUI from './main'
/*
* AJAX functionality
*/
//import "./ajax/links";
import './ajax/online';
import './ajax/lazy-images';
// import "./ajax/links";
import './ajax/online'
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
const regeneratorRuntime = require('regenerator-runtime');
const {
@ -31,9 +31,9 @@ import './store';
},
},
});
}*/
} */
// 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 version = (document.querySelector('meta[name="swversion"]') || {})
.content;
@ -44,24 +44,24 @@ import './store';
console.log('SW: Registered');
});
}
}}*/
}} */
function importAll(r) {
return r.keys().map(r);
function importAll (r) {
return r.keys().map(r)
}
const images = importAll(
require.context('../img/', false, /\.(png|jpe?g|svg)$/)
);
)
const fontAwesome = importAll(
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/)
);
)
if (module.hot) {
module.hot.accept('app.js', () => {
console.log('Accepting the updated printMe module!');
});
console.log('Accepting the updated printMe module!')
})
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!
var CACHE_NAME = `${UINAME}-sw`;
var debug = process.env.NODE_ENV === "development" ? true : false;
var version = `${UIVERSION}-sw`;
const CACHE_NAME = `${UINAME}-sw`
const debug = process.env.NODE_ENV === 'development'
const version = `${UIVERSION}-sw`
var log = require("../libs/log");
var caches = require("../../../thirdparty/serviceworker-caches");
const log = require('../libs/log')
const caches = require('../../../thirdparty/serviceworker-caches')
if (debug) {
log("SW: debug is on");
log(`SW: CACHE_NAME: ${CACHE_NAME}`);
//log(`SW: appDomain: ${appDomain}`);
//log(`SW: lang: ${lang}`);
log('SW: debug is on')
log(`SW: CACHE_NAME: ${CACHE_NAME}`)
// log(`SW: appDomain: ${appDomain}`);
// log(`SW: lang: ${lang}`);
}
if (typeof CACHE_NAME !== "string") {
throw new Error("Cache Name cannot be empty");
if (typeof CACHE_NAME !== 'string') {
throw new Error('Cache Name cannot be empty')
}
self.addEventListener("fetch", (event) => {
self.addEventListener('fetch', (event) => {
// skip non-get
if (event.request.method !== "GET") {
return;
if (event.request.method !== 'GET') {
return
}
//Parse the url
const requestURL = new URL(event.request.url);
// Parse the url
const requestURL = new URL(event.request.url)
//Check for our own urls
/*if (requestURL.origin !== location.origin) {
// Check for our own urls
/* if (requestURL.origin !== location.origin) {
log('SW: skip external ' + event.request.url);
return;
}*/
} */
//Skip admin url's
// Skip admin url's
if (
requestURL.pathname.indexOf("admin") >= 0 ||
requestURL.pathname.indexOf("Security") >= 0 ||
requestURL.pathname.indexOf("/dev") >= 0
requestURL.pathname.indexOf('admin') >= 0 ||
requestURL.pathname.indexOf('Security') >= 0 ||
requestURL.pathname.indexOf('/dev') >= 0
) {
log(`SW: skip admin ${event.request.url}`);
return;
log(`SW: skip admin ${event.request.url}`)
return
}
//Test for images
/*if (/\.(jpg|jpeg|png|gif|webp)$/.test(requestURL.pathname)) {
// Test for images
/* if (/\.(jpg|jpeg|png|gif|webp)$/.test(requestURL.pathname)) {
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
return;
}*/
} */
// Clone the request for fetch and cache
// A request is a stream and can be consumed only once.
const fetchRequest = event.request.clone(),
cacheRequest = event.request.clone();
const fetchRequest = event.request.clone()
const cacheRequest = event.request.clone()
// Respond with content from fetch or cache
event.respondWith(
@ -64,39 +64,39 @@ self.addEventListener("fetch", (event) => {
// Because we want the browser to consume the response,
// as well as cache to consume the response, we need to
// clone it so we have 2 streams
const responseToCache = response.clone();
const responseToCache = response.clone()
// and update the cache
caches.open(CACHE_NAME).then((cache) => {
// Clone the request again to use it
// as the key for our cache
const cacheSaveRequest = event.request.clone();
cache.put(cacheSaveRequest, responseToCache);
});
const cacheSaveRequest = event.request.clone()
cache.put(cacheSaveRequest, responseToCache)
})
// Return the response stream to be consumed by browser
return response;
return response
})
// when fetch times out or fails
.catch((err) => {
log("SW: fetch failed");
log('SW: fetch failed')
// Return the promise which
// resolves on a match in cache for the current request
// 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
// of Service Worker scripts
self.addEventListener("activate", (event) => {
log(`SW: activated: ${version}`);
self.addEventListener('activate', (event) => {
log(`SW: activated: ${version}`)
// Destroy the cache
event.waitUntil(caches.delete(CACHE_NAME));
});
event.waitUntil(caches.delete(CACHE_NAME))
})
self.addEventListener("install", (e) => {
log(`SW: installing version: ${version}`);
});
self.addEventListener('install', (e) => {
log(`SW: installing version: ${version}`)
})

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

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

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

@ -1,14 +1,14 @@
import Events from '../_events';
import Datepicker from 'vanillajs-datepicker/Datepicker';
import Events from '../_events'
import Datepicker from 'vanillajs-datepicker/Datepicker'
const init = () => {
document.querySelectorAll('.js-datepicker').forEach((el, i) => {
const picker = new Datepicker(el);
el.ui = picker;
});
};
const picker = new Datepicker(el)
el.ui = picker
})
}
window.addEventListener(`${Events.LODEDANDREADY}`, init);
window.addEventListener(`${Events.AJAX}`, init);
window.addEventListener(`${Events.LODEDANDREADY}`, 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
@ -8,101 +8,100 @@ import Events from '../_events';
*
*/
const DropdownHoverUI = ((window) => {
const NAME = 'js-dropdown';
const NAME = 'js-dropdown'
const HideAll = () => {
// hide others
document.querySelectorAll('.dropdown-menu').forEach((el, i) => {
el.classList.remove('show');
});
};
el.classList.remove('show')
})
}
const Toggle = (el) => {
HideAll();
HideAll()
el.querySelector('.dropdown-menu').classList.toggle('show');
};
el.querySelector('.dropdown-menu').classList.toggle('show')
}
const Show = (e) => {
const el = e.currentTarget;
el.querySelector('.dropdown-menu').classList.add('show');
};
const el = e.currentTarget
el.querySelector('.dropdown-menu').classList.add('show')
}
const Hide = (e) => {
const el = e.currentTarget;
el.querySelector('.dropdown-menu').classList.remove('show');
};
const el = e.currentTarget
el.querySelector('.dropdown-menu').classList.remove('show')
}
const init = () => {
console.log(`${NAME}: init`);
console.log(`${NAME}: init`)
const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`);
const hoverableEls = document.querySelectorAll(`[data-bs-toggle="hover"]`);
const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`)
const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
const attachHoverEvents = (el) => {
el.addEventListener('mouseover', Show, false);
el.addEventListener('mouseout', Hide, false);
el.addEventListener('mouseover', Show, false)
el.addEventListener('mouseout', Hide, false)
el.classList.add(`${NAME}-active`);
};
el.classList.add(`${NAME}-active`)
}
const attachClickEvents = (el) => {
el.addEventListener('click', (e) => {
e.preventDefault();
e.preventDefault()
const el = e.currentTarget;
const parent = el.closest('.dropdown');
Toggle(parent);
});
const el = e.currentTarget
const parent = el.closest('.dropdown')
Toggle(parent)
})
el.classList.add(`${NAME}-active`);
};
el.classList.add(`${NAME}-active`)
}
// Hide all for outside clicks
/*document.addEventListener('click', function (event) {
/* document.addEventListener('click', function (event) {
const isClickInside = clickableEls.contains(event.target);
if (!isClickInside) {
HideAll();
}
});*/
}); */
document.addEventListener('click', (event) => {
let breakPath = false;
const path = event.path || (event.composedPath && event.composedPath());
let breakPath = false
const path = event.path || (event.composedPath && event.composedPath())
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) => {
if (breakPath) {
return;
return
}
if (el === document) {
HideAll();
HideAll()
}
if (el.classList && el.classList.contains('dropdown-toggle')) {
breakPath = true;
return;
breakPath = true
}
});
});
})
})
hoverableEls.forEach((el, i) => {
const parent = el.closest('.dropdown');
attachHoverEvents(parent);
});
const parent = el.closest('.dropdown')
attachHoverEvents(parent)
})
clickableEls.forEach((el, i) => {
attachClickEvents(el);
});
};
attachClickEvents(el)
})
}
window.addEventListener(`${Events.LODEDANDREADY}`, init);
window.addEventListener(`${Events.AJAX}`, init);
})(window);
window.addEventListener(`${Events.LODEDANDREADY}`, init)
window.addEventListener(`${Events.AJAX}`, init)
})(window)
export default DropdownHoverUI;
export default DropdownHoverUI

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

@ -3,91 +3,89 @@
// 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.
import Events from "../_events";
import Consts from "../_consts";
import InstagramFeed from "@jsanahuja/instagramfeed/src/InstagramFeed";
import Events from '../_events'
import InstagramFeed from '@jsanahuja/instagramfeed/src/InstagramFeed'
export default ((window) => {
const NAME = "js-instagramfeed";
const BODY = document.body;
const NAME = 'js-instagramfeed'
const ig_media_preview = (base64data) => {
const igMediaPreview = (base64data) => {
const jpegtpl =
"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==",
t = atob(base64data),
p = t.slice(3).split(""),
o = t
.substring(0, 3)
.split("")
.map((e) => {
return e.charCodeAt(0);
}),
c = atob(jpegtpl).split("");
c[162] = String.fromCharCode(o[1]);
c[160] = String.fromCharCode(o[2]);
'/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA=='
const t = atob(base64data)
const p = t.slice(3).split('')
const o = t
.substring(0, 3)
.split('')
.map((e) => {
return e.charCodeAt(0)
})
const c = atob(jpegtpl).split('')
c[162] = String.fromCharCode(o[1])
c[160] = String.fromCharCode(o[2])
return base64data
? `data:image/jpeg;base64,${btoa(c.concat(p).join(""))}`
: null;
};
? `data:image/jpeg;base64,${btoa(c.concat(p).join(''))}`
: null
}
const loadFeed = () => {
console.log(`${NAME}: loading`);
console.log(`${NAME}: loading`)
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
const ID = `InstagramFeed${i}`;
const dataset = el.dataset;
const ID = `InstagramFeed${i}`
const dataset = el.dataset
el.classList.add(`${NAME}-loading`);
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`);
el.classList.add(`${NAME}-loading`)
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`)
new InstagramFeed({
username: dataset["username"],
tag: dataset["tag"] || null,
display_profile: dataset["display-profile"],
display_biography: dataset["display-biography"],
display_gallery: dataset["display-gallery"],
display_captions: dataset["display-captions"],
cache_time: dataset["cache_time"] || 360,
items: dataset["items"] || 12,
username: dataset.username,
tag: dataset.tag || null,
display_profile: dataset['display-profile'],
display_biography: dataset['display-biography'],
display_gallery: dataset['display-gallery'],
display_captions: dataset['display-captions'],
cache_time: dataset.cache_time || 360,
items: dataset.items || 12,
styling: false,
lazy_load: true,
callback: (data) => {
console.log(`${NAME}: data response received`);
console.log(`${NAME}: data response received`)
const list = document.createElement("div");
list.classList.add(`${NAME}-list`, "row");
el.appendChild(list);
const list = document.createElement('div')
list.classList.add(`${NAME}-list`, 'row')
el.appendChild(list)
data["edge_owner_to_timeline_media"]["edges"].forEach((el, i) => {
const item = el["node"];
const preview = ig_media_preview(item["media_preview"]);
data.edge_owner_to_timeline_media.edges.forEach((el, i) => {
const item = el.node
const preview = igMediaPreview(item.media_preview)
list.innerHTML +=
`<div class="a col ${NAME}-item"` +
` 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"]}"` +
` 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}"` +
`style="background:url(${preview})" />` +
"</div>";
});
'</div>'
})
el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-loaded`);
el.classList.remove(`${NAME}-loading`)
el.classList.add(`${NAME}-loaded`)
window.dispatchEvent(new Event("MetaWindowindow.initLinks"));
window.dispatchEvent(new Event(`${NAME}.loaded`));
window.dispatchEvent(new Event('MetaWindowindow.initLinks'))
window.dispatchEvent(new Event(`${NAME}.loaded`))
},
on_error: (e) => {
console.error(`${NAME}: ${e}`);
console.error(`${NAME}: ${e}`)
el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-error`);
el.classList.remove(`${NAME}-loading`)
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.AJAX}`, loadFeed);
})(window);
window.addEventListener(`${Events.LODEDANDREADY}`, loadFeed)
window.addEventListener(`${Events.AJAX}`, loadFeed)
})(window)

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

@ -1,120 +1,122 @@
"use strict";
'use strict'
import Events from "../_events";
import Consts from "js/_consts";
import Events from '../_events'
import Consts from 'js/_consts'
const MapAPI = ((window) => {
// Constants
const NAME = "js-mapapi";
const MAP_DRIVER = Consts["MAP_DRIVER"];
const NAME = 'js-mapapi'
const MAP_DRIVER = Consts.MAP_DRIVER
class MapAPI {
// Constructor
constructor(el) {
const ui = this;
const Drv = new MAP_DRIVER();
const BODY = document.querySelector("body");
const config = el.dataset;
config["center"] = [
config["lng"] ? config["lng"] : BODY.dataset["default-lng"],
config["lat"] ? config["lat"] : BODY.dataset["default-lat"],
];
constructor (el) {
const ui = this
const Drv = new MAP_DRIVER()
const BODY = document.querySelector('body')
const config = el.dataset
config.center = [
config.lng ? config.lng : BODY.dataset['default-lng'],
config.lat ? config.lat : BODY.dataset['default-lat'],
]
/*config['style'] = config['style'] ?
/* config['style'] = config['style'] ?
jQuery.parseJSON(config['style']) :
null;
config['font-family'] = $BODY.css('font-family');*/
config['font-family'] = $BODY.css('font-family'); */
if (!config["icon"]) {
config["icon"] = '<i class="fas fa-map-marker-alt"></i>';
if (!config.icon) {
config.icon = '<i class="fas fa-map-marker-alt"></i>'
}
console.log(`${NAME}: init ${Drv.getName()}...`);
ui.drv = Drv;
ui.el = el;
ui.config = config;
console.log(`${NAME}: init ${Drv.getName()}...`)
ui.drv = Drv
ui.el = el
ui.config = config
Drv.init(el, config);
Drv.init(el, config)
el.addEventListener(Events.MAPAPILOADED, () => {
ui.addMarkers();
});
ui.addMarkers()
})
}
// Public methods
getMap() {
return ui.map;
getMap () {
const ui = this
return ui.map
}
dispose() {
const ui = this;
dispose () {
const ui = this
ui.el = null;
ui.el.classList.remove(`${NAME}-active`);
ui.el = null
ui.el.classList.remove(`${NAME}-active`)
}
addMarkers() {
console.log(`${NAME}: addMarkers`);
const ui = this;
const el = ui.el;
const Drv = ui.drv;
const config = ui.config;
addMarkers () {
console.log(`${NAME}: addMarkers`)
const ui = this
const el = ui.el
const Drv = ui.drv
const config = ui.config
ui.map = Drv.getMap();
ui.map = Drv.getMap()
if (config["geojson"]) {
console.log(`${NAME}: setting up geocode data`);
Drv.addGeoJson(config);
} else if (config["address"]) {
console.log(config["address"]);
console.log(`${NAME}: setting up address marker`);
Drv.geocode(config["address"], (results) => {
console.log(results);
if (config.geojson) {
console.log(`${NAME}: setting up geocode data`)
Drv.addGeoJson(config)
} else if (config.address) {
console.log(config.address)
console.log(`${NAME}: setting up address marker`)
Drv.geocode(config.address, (results) => {
console.log(results)
const lat = results[0].geometry.location.lat();
const lng = results[0].geometry.location.lng();
const lat = results[0].geometry.location.lat()
const lng = results[0].geometry.location.lng()
console.log(
`${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,
});
});
} else if (config["lat"] && config["lng"]) {
const lat = config["lat"];
const lng = config["lng"];
})
})
} else if (config.lat && config.lng) {
const lat = config.lat
const lng = config.lng
console.log(
`${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));
console.log(`${NAME}: Map is loaded`);
el.dispatchEvent(new Event(Events.MAPLOADED))
console.log(`${NAME}: Map is loaded`)
}
}
const init = () => {
console.log(`${NAME}: init`);
console.log(`${NAME}: init`)
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
const map = new MapAPI(el);
});
};
new MapAPI(el)
})
}
// auto-apply
window.addEventListener(`${Events.LODEDANDREADY}`, init);
window.addEventListener(`${Events.AJAX}`, init);
window.addEventListener(`${Events.LODEDANDREADY}`, init)
window.addEventListener(`${Events.AJAX}`, init)
return MapAPI;
})(window);
return MapAPI
})(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 Events from "../_events";
import Spinner from "./_ui.spinner";
import $ from 'jquery'
import Events from '../_events'
import Spinner from './_ui.spinner'
const AjaxUI = (($) => {
// Constants
const G = window;
const D = document;
const $Html = $("html");
const $Body = $("body");
const G = window
const D = document
const $Html = $('html')
const $Body = $('body')
const NAME = "jsAjaxUI";
const DATA_KEY = NAME;
const NAME = 'jsAjaxUI'
const DATA_KEY = NAME
class AjaxUI {
// Constructor
constructor(element) {
this._element = element;
const $element = $(this._element);
$element.addClass(`${NAME}-active`);
constructor (element) {
this._element = element
const $element = $(this._element)
$element.addClass(`${NAME}-active`)
$element.bind("click", function (e) {
e.preventDefault();
$element.bind('click', function (e) {
e.preventDefault()
const $this = $(this);
const $this = $(this)
$(".ajax").each(function () {
const $this = $(this);
$this.removeClass("active");
$this.parents(".nav-item").removeClass("active");
});
$('.ajax').each(function () {
const $this = $(this)
$this.removeClass('active')
$this.parents('.nav-item').removeClass('active')
})
$this.addClass("loading");
$this.addClass('loading')
AjaxUI.load($this.attr("href"), () => {
$this.removeClass("loading");
$this.parents(".nav-item").addClass("active");
$this.addClass("active");
});
});
AjaxUI.load($this.attr('href'), () => {
$this.removeClass('loading')
$this.parents('.nav-item').addClass('active')
$this.addClass('active')
})
})
}
// Public methods
static load(url, callback) {
static load (url, callback) {
// show spinner
Spinner.show(() => {
$Body.removeClass("loaded");
});
$Body.removeClass('loaded')
})
// update document location
G.MainUI.updateLocation(url);
G.MainUI.updateLocation(url)
const absoluteLocation =
G.URLDetails["base"] + G.URLDetails["relative"].substring(1);
G.URLDetails.base + G.URLDetails.relative.substring(1)
if (absoluteLocation !== G.location.href) {
G.history.pushState(
{
@ -62,257 +62,257 @@ const AjaxUI = (($) => {
},
document.title,
absoluteLocation
);
)
}
$.ajax({
sync: false,
async: true,
url,
dataType: "json",
method: "GET",
dataType: 'json',
method: 'GET',
cache: false,
error(jqXHR) {
console.warn(`${NAME}: AJAX request failure: ${jqXHR.statusText}`);
G.location.href = url;
error (jqXHR) {
console.warn(`${NAME}: AJAX request failure: ${jqXHR.statusText}`)
G.location.href = url
// google analytics
if (typeof G.ga === "function") {
G.ga("send", "event", "error", "AJAX ERROR", jqXHR.statusText);
if (typeof G.ga === 'function') {
G.ga('send', 'event', 'error', 'AJAX ERROR', jqXHR.statusText)
}
},
success(data, status, jqXHR) {
AjaxUI.process(data, jqXHR, callback);
success (data, status, jqXHR) {
AjaxUI.process(data, jqXHR, callback)
// google analytics
if (typeof G.ga === "function") {
G.ga("set", {
page: G.URLDetails["relative"] + G.URLDetails["hash"],
title: jqXHR.getResponseHeader("X-Title"),
});
G.ga("send", "pageview");
if (typeof G.ga === 'function') {
G.ga('set', {
page: G.URLDetails.relative + G.URLDetails.hash,
title: jqXHR.getResponseHeader('X-Title'),
})
G.ga('send', 'pageview')
}
},
});
})
}
static process(data, jqXHR, callback) {
const css = jqXHR.getResponseHeader("X-Include-CSS").split(",") || [];
const js = jqXHR.getResponseHeader("X-Include-JS").split(",") || [];
static process (data, jqXHR, callback) {
const css = jqXHR.getResponseHeader('X-Include-CSS').split(',') || []
const js = jqXHR.getResponseHeader('X-Include-JS').split(',') || []
// Replace HTML regions
if (typeof data.regions === "object") {
if (typeof data.regions === 'object') {
for (const key in data.regions) {
if (typeof data.regions[key] === "string") {
AjaxUI.replaceRegion(data.regions[key], key);
if (typeof data.regions[key] === 'string') {
AjaxUI.replaceRegion(data.regions[key], key)
}
}
}
// remove already loaded scripts
$('link[type="text/css"]').each(function () {
const i = css.indexOf($(this).attr("href"));
const i = css.indexOf($(this).attr('href'))
if (i > -1) {
css.splice(i, 1);
} else if (!$Body.data("unload-blocked")) {
console.log(`${NAME}: Unloading | ${$(this).attr("href")}`);
$(this).remove();
css.splice(i, 1)
} else if (!$Body.data('unload-blocked')) {
console.log(`${NAME}: Unloading | ${$(this).attr('href')}`)
$(this).remove()
}
});
})
$('script[type="text/javascript"]').each(function () {
const i = js.indexOf($(this).attr("src"));
const i = js.indexOf($(this).attr('src'))
if (i > -1) {
js.splice(i, 1);
} else if (!$Body.data("unload-blocked")) {
console.log(`${NAME}: Unloading | ${$(this).attr("src")}`);
$(this).remove();
js.splice(i, 1)
} else if (!$Body.data('unload-blocked')) {
console.log(`${NAME}: Unloading | ${$(this).attr('src')}`)
$(this).remove()
}
});
})
// preload CSS
this.preload(css).then(() => {
const $head = $("head");
const $head = $('head')
css.forEach((el) => {
$head.append(
`<link rel="stylesheet" type="text/css" href="${el}" />`
);
});
)
})
// preload JS
this.preload(js, "script").then(() => {
this.preload(js, 'script').then(() => {
js.forEach((el) => {
$Body.append(
`<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
if (typeof data.events === "object") {
if (typeof data.events === 'object') {
for (const eventName in data.events) {
$(D).trigger(eventName, [data.events[eventName]]);
$(D).trigger(eventName, [data.events[eventName]])
}
}
if (typeof callback !== "undefined") {
callback();
if (typeof callback !== 'undefined') {
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) {
return $.Deferred().resolve().promise();
return $.Deferred().resolve().promise()
}
const dfds = [];
const dfds = []
items.forEach((url, i) => {
const dfd = $.Deferred();
const dfd = $.Deferred()
$.ajax({
dataType: type,
cache,
url,
}).always(() => {
dfd.resolve();
dfd.resolve()
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 $.when(...dfds);
return $.when(...dfds)
}
static replaceRegion(html, key) {
const $region = $(`[data-ajax-region="${key}"]`);
static replaceRegion (html, key) {
const $region = $(`[data-ajax-region="${key}"]`)
if ($region.length) {
$region.empty().append(html);
$region.empty().append(html)
} else {
console.warn(`${NAME}: Region returned without class or id!`);
console.warn(`${NAME}: Region returned without class or id!`)
}
}
dispose() {
const $element = $(this._element);
dispose () {
const $element = $(this._element)
$element.removeClass(`${NAME}-active`);
$.removeData(this._element, DATA_KEY);
this._element = null;
$element.removeClass(`${NAME}-active`)
$.removeData(this._element, DATA_KEY)
this._element = null
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to element
const $element = $(this);
let data = $element.data(DATA_KEY);
const $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new AjaxUI(this);
$element.data(DATA_KEY, data);
data = new AjaxUI(this)
$element.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = AjaxUI._jQueryInterface;
$.fn[NAME].Constructor = AjaxUI;
$.fn[NAME] = AjaxUI._jQueryInterface
$.fn[NAME].Constructor = AjaxUI
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return AjaxUI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return AjaxUI._jQueryInterface
}
// auto-apply
$(".ajax").ready(() => {
$(".ajax").jsAjaxUI();
});
$('.ajax').ready(() => {
$('.ajax').jsAjaxUI()
})
// AJAX update browser title
$(D).on("layoutRefresh", (e, data) => {
D.title = data.Title;
$(D).on('layoutRefresh', (e, data) => {
D.title = data.Title
$Html.attr("class", "");
$Html.attr('class', '')
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
G.onpopstate = function (event) {
const $existingLink = $(`a[href^="${D.location}"]`);
const $existingLink = $(`a[href^="${D.location}"]`)
if (event.state !== null && event.state.ajax) {
console.log(`${NAME}: GOBACK (AJAX state)`);
AjaxUI.load(event.state.page);
} else if ($existingLink.length && $existingLink.hasClass("ajax")) {
console.log(`${NAME}: GOBACK (AJAX link)`);
$existingLink.trigger("click");
console.log(`${NAME}: GOBACK (AJAX state)`)
AjaxUI.load(event.state.page)
} else if ($existingLink.length && $existingLink.hasClass('ajax')) {
console.log(`${NAME}: GOBACK (AJAX link)`)
$existingLink.trigger('click')
} else if (D.location.href !== G.location.href) {
console.log(`${NAME}: GOBACK (HTTP)`);
G.location.href = D.location;
console.log(`${NAME}: GOBACK (HTTP)`)
G.location.href = D.location
}
};
}
// manage AJAX requests
$.ajaxPrefilter((options, originalOptions, jqXHR) => {
jqXHR.opts = options;
$.xhrPool.requests[jqXHR.opts.url] = jqXHR;
});
jqXHR.opts = options
$.xhrPool.requests[jqXHR.opts.url] = jqXHR
})
$.xhrPool = {
requests: {},
paused: false,
pauseAll: () => {
$.xhrPool.paused = true;
$.xhrPool.paused = true
/*for (let url in $.xhrPool.requests) {
/* for (let url in $.xhrPool.requests) {
const jqXHR = $.xhrPool.requests[url];
jqXHR.abort();
console.log(`${NAME}: AJAX request is paused (${jqXHR.opts.url})`);
}*/
} */
},
restoreAll: () => {
for (const url in $.xhrPool.requests) {
const jqXHR = $.xhrPool.requests[url];
$.ajax(jqXHR.opts);
console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`);
const jqXHR = $.xhrPool.requests[url]
$.ajax(jqXHR.opts)
console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`)
}
$.xhrPool.paused = false;
$.xhrPool.paused = false
},
};
}
$.ajaxSetup({
beforeSend: (jqXHR) => {}, // and connection to list
complete: (jqXHR) => {
if (!$.xhrPool.paused) {
//console.log(`${NAME}: AJAX request is done (${jqXHR.opts.url})`);
delete $.xhrPool.requests[jqXHR.opts.url];
// console.log(`${NAME}: AJAX request is done (${jqXHR.opts.url})`);
delete $.xhrPool.requests[jqXHR.opts.url]
}
},
});
})
// attach events
$Body.on(`${Events.OFFLINE}`, () => {
$.xhrPool.pauseAll();
});
$.xhrPool.pauseAll()
})
$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 "jquery-hammerjs/jquery.hammer";
import 'hammerjs/hammer'
import 'jquery-hammerjs/jquery.hammer'
import Events from "../_events";
import Events from '../_events'
const CarouselUI = (($) => {
// Constants
const NAME = "CarouselUI";
const NAME = 'CarouselUI'
class CarouselUI {
// Static methods
static each(callback) {
static each (callback) {
$(`js${NAME}, .js-carousel`).each((i, e) => {
callback(i, $(e));
});
callback(i, $(e))
})
}
static init() {
this.dispose();
console.log(`${NAME}: init`);
static init () {
this.dispose()
console.log(`${NAME}: init`)
this.each((i, e) => {
const $e = $(e),
id = `Carousel${i}`;
const $e = $(e)
const id = `Carousel${i}`
$e.attr("id", id);
$e.data("id", i);
$e.attr('id', id)
$e.data('id', i)
const $items = $(e).find(".carousel-item"),
count = $items.length;
const $items = $(e).find('.carousel-item')
const count = $items.length
if (!count) {
return;
return
}
// create carousel-controls
if ($e.data("indicators")) {
const $indicators = $('<ol class="carousel-indicators"></ol>');
if ($e.data('indicators')) {
const $indicators = $('<ol class="carousel-indicators"></ol>')
$indicators.append(
`<li data-target="#${id}" data-slide-to="0" class="active"></li>`
);
)
for (let i = 1; i < count; i++) {
$indicators.append(
`<li data-target="#${id}" data-slide-to="${i}"></li>`
);
)
}
$e.prepend($indicators);
$e.prepend($indicators)
}
// create arrows
if ($e.data("arrows")) {
if ($e.data('arrows')) {
$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>`
);
)
$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>`
);
)
}
// init carousel
$e.carousel();
$e.carousel()
const $youtubeSlides = $e.find(
'iframe[src^="https://www.youtube.com/embed/"]'
);
)
$e.on("slide.bs.carousel", () => {
$e.on('slide.bs.carousel', () => {
if ($youtubeSlides.length) {
$youtubeSlides.each((i, e) => {
const $e = $(e);
const $e = $(e)
try {
$e.data(
"player",
'player',
new YT.Player(e, {
events: {
onReady: () => {
$e.data("player").pauseVideo();
$e.data('player').pauseVideo()
},
},
})
);
)
$e.data("player").pauseVideo();
$e.data('player').pauseVideo()
} catch (e) {}
});
})
}
});
})
$e.find(".carousel-control-prev").on("click", (e) => {
e.preventDefault();
$e.carousel("prev");
});
$e.find('.carousel-control-prev').on('click', (e) => {
e.preventDefault()
$e.carousel('prev')
})
$e.find(".carousel-control-next").on("click", (e) => {
e.preventDefault();
$e.carousel("next");
});
$e.find('.carousel-control-next').on('click', (e) => {
e.preventDefault()
$e.carousel('next')
})
// init touch swipes
$e.hammer().bind(Events.SWIPELEFT, (e) => {
$(event.target).carousel("next");
});
$(event.target).carousel('next')
})
$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');
});*/
}); */
$e.addClass(`js${NAME}-active`);
$e.trigger(Events.CAROUSEL_READY);
});
$e.addClass(`js${NAME}-active`)
$e.trigger(Events.CAROUSEL_READY)
})
}
static dispose() {
static dispose () {
this.each((i, e) => {
$(e).carousel("dispose");
});
$(e).carousel('dispose')
})
}
}
$(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 D = document;
const W = window;
const D = document
const W = window
class CookieUI {
static get(name) {
return D.cookie.split("; ").reduce((r, v) => {
const parts = v.split("=");
return parts[0] === name ? decodeURIComponent(parts[1]) : r;
}, "");
static get (name) {
return D.cookie.split('; ').reduce((r, v) => {
const parts = v.split('=')
return parts[0] === name ? decodeURIComponent(parts[1]) : r
}, '')
}
static set(name, value, days = 7, path = "/") {
const expires = new Date(Date.now() + days * 864e5).toUTCString();
static set (name, value, days = 7, path = '/') {
const expires = new Date(Date.now() + days * 864e5).toUTCString()
D.cookie = `${name}=${encodeURIComponent(
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 CookieUI from "./_ui.cookie";
import Events from '../_events'
import CookieUI from './_ui.cookie'
const FlyoutUI = (($) => {
const W = window;
const D = document;
const $Body = $("body");
const W = window
const D = document
const $Body = $('body')
const NAME = "FlyoutUI";
const COOKIE = `${NAME}-hide`;
const TIMEOUT = 2000;
const NAME = 'FlyoutUI'
const COOKIE = `${NAME}-hide`
const TIMEOUT = 2000
class FlyoutUI {
static init() {
console.log(`${NAME}: init`);
const ui = this;
static init () {
console.log(`${NAME}: init`)
const ui = this
ui.$modal = $(`.flyout-${NAME}`);
ui.$modal = $(`.flyout-${NAME}`)
if (!ui.$modal.length) {
return false;
return false
}
const $close = ui.$modal.find(`.flyout-${NAME}__close`);
ui.$modal.data(NAME, ui);
const $close = ui.$modal.find(`.flyout-${NAME}__close`)
ui.$modal.data(NAME, ui)
if ($close.length) {
$close.on("click", () => {
ui.hide();
});
$close.on('click', () => {
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(() => {
ui.show();
}, TIMEOUT);
ui.show()
}, TIMEOUT)
}
}
static show(callback) {
const ui = this;
static show (callback) {
const ui = this
ui.$modal.addClass(`flyout-${NAME}__active`);
ui.$modal.addClass(`flyout-${NAME}__active`)
}
static hide(callback) {
const ui = this;
static hide (callback) {
const ui = this
CookieUI.set(COOKIE, "true", 1);
ui.$modal.removeClass(`flyout-${NAME}__active`);
CookieUI.set(COOKIE, 'true', 1)
ui.$modal.removeClass(`flyout-${NAME}__active`)
}
}
$(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 SpinnerUI from "./_ui.spinner";
import FormFieldUI from "./_ui.form.fields";
import Events from '../_events'
import SpinnerUI from './_ui.spinner'
import FormFieldUI from './_ui.form.fields'
const FormBasics = (($) => {
// Constants
const NAME = "jsFormBasics";
const DATA_KEY = NAME;
const $Html = $("html, body");
const W = window;
const D = document;
const NAME = 'jsFormBasics'
const DATA_KEY = NAME
const $Html = $('html, body')
const W = window
const D = document
class FormBasics {
constructor(el) {
const ui = this;
const $el = $(el);
constructor (el) {
const ui = this
const $el = $(el)
ui._el = el;
ui.dispose();
ui._el = el
ui.dispose()
console.log(`${NAME}: init`);
$el.data(DATA_KEY, this);
console.log(`${NAME}: init`)
$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
$fields.each((i, el) => {
// skip some fields here
new FormFieldUI(el);
});
new FormFieldUI(el)
})
$fields.each((e, el) => {
const $el = $(el);
const $el = $(el)
if ($el.hasClass("required") || $el.attr("aria-required")) {
$el.closest(".field").addClass("required");
if ($el.hasClass('required') || $el.attr('aria-required')) {
$el.closest('.field').addClass('required')
}
});
})
const $radioOptions = $el.find('input[type="radio"]');
const $radioOptions = $el.find('input[type="radio"]')
$radioOptions.each((e, el) => {
const $el = $(el);
const $el = $(el)
if ($el.is(":checked")) {
$el.parents(".radio").addClass("checked");
if ($el.is(':checked')) {
$el.parents('.radio').addClass('checked')
}
});
})
$radioOptions.on("change", (e) => {
const $el = $(e.currentTarget);
const $parent = $el.parents(".radio");
$radioOptions.on('change', (e) => {
const $el = $(e.currentTarget)
const $parent = $el.parents('.radio')
$parent.siblings(".radio").each((i, el) => {
const $el = $(el);
$parent.siblings('.radio').each((i, el) => {
const $el = $(el)
if (!$el.find("input").is(":checked")) {
$el.removeClass("checked");
if (!$el.find('input').is(':checked')) {
$el.removeClass('checked')
}
});
})
if ($el.is(":checked")) {
$parent.addClass("checked");
if ($el.is(':checked')) {
$parent.addClass('checked')
}
});
})
$el.on("submit", (e) => {
$el.on('submit', (e) => {
setTimeout(() => {
if (!$el.find(".error").length) {
SpinnerUI.show();
if (!$el.find('.error').length) {
SpinnerUI.show()
}
}, 100);
});
}, 100)
})
$(".field.password .show-password").on("click", (e) => {
console.log(`${NAME}: .field.password .show-password (click)`);
$('.field.password .show-password').on('click', (e) => {
console.log(`${NAME}: .field.password .show-password (click)`)
const $el = $(e.currentTarget);
const $field = $el.siblings("input");
const $icon = $el.find(".fas");
const attr = $field.attr("type");
const $el = $(e.currentTarget)
const $field = $el.siblings('input')
const $icon = $el.find('.fas')
const attr = $field.attr('type')
if (attr === "password") {
$field.attr("type", "text");
$icon.removeClass("fa-eye").addClass("fa-eye-slash");
if (attr === 'password') {
$field.attr('type', 'text')
$icon.removeClass('fa-eye').addClass('fa-eye-slash')
} else {
$field.attr("type", "password");
$icon.removeClass("fa-eye-slash").addClass("fa-eye");
$field.attr('type', 'password')
$icon.removeClass('fa-eye-slash').addClass('fa-eye')
}
});
})
$el.addClass(`${NAME}-active`);
$el.trigger(Events.FORM_INIT_BASICS);
$el.addClass(`${NAME}-active`)
$el.trigger(Events.FORM_INIT_BASICS)
}
// Public methods
dispose() {
console.log(`${NAME}: dispose`);
const ui = this;
dispose () {
console.log(`${NAME}: dispose`)
const ui = this
const $el = $(ui._el);
$.removeData(ui._el, DATA_KEY);
ui._el = null;
$el.removeClass(`${NAME}-active`);
const $el = $(ui._el)
$.removeData(ui._el, DATA_KEY)
ui._el = null
$el.removeClass(`${NAME}-active`)
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(() => {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
const $el = $(this)
let data = $el.data(DATA_KEY)
if (!data) {
data = new FormBasics(this);
$el.data(DATA_KEY, data);
data = new FormBasics(this)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = FormBasics._jQueryInterface;
$.fn[NAME].Constructor = FormBasics;
$.fn[NAME] = FormBasics._jQueryInterface
$.fn[NAME].Constructor = FormBasics
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormBasics._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return FormBasics._jQueryInterface
}
const init = () => {
$("form").jsFormBasics();
};
$('form').jsFormBasics()
}
// auto-apply
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
init();
});
init()
})
return FormBasics;
})($);
return FormBasics
})($)
export default FormBasics;
export default FormBasics

240
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 SpinnerUI from './_ui.spinner';
import Events from '../_events'
import SpinnerUI from './_ui.spinner'
import 'croppie/croppie.js';
import 'exif-js/exif.js';
import 'croppie/croppie.js'
import 'exif-js/exif.js'
const CroppieUI = (($) => {
const NAME = 'jsCroppieUI';
const DATA_KEY = NAME;
const NAME = 'jsCroppieUI'
const DATA_KEY = NAME
const G = window;
const D = document;
const G = window
const D = document
const jqteOptions = {
color: false,
@ -24,34 +24,34 @@ const CroppieUI = (($) => {
source: false,
sub: false,
sup: false,
};
}
class CroppieUI {
constructor(element) {
const ui = this;
const $el = $(element);
constructor (element) {
const ui = this
const $el = $(element)
console.log(`${NAME}: init ...`);
console.log(`${NAME}: init ...`)
ui.$el = $el;
$el.data(DATA_KEY, this);
ui.$el = $el
$el.data(DATA_KEY, this)
ui.input = $el.find('input[type="file"]');
//ui.inputData = $('<input type="hidden" class="base64enc" name="' + ui.input.attr('name') + 'base64" />');
ui.input = $el.find('input[type="file"]')
// ui.inputData = $('<input type="hidden" class="base64enc" name="' + ui.input.attr('name') + 'base64" />');
ui.width = ui.input.data('width');
ui.height = ui.input.data('height');
ui.width = ui.input.data('width')
ui.height = ui.input.data('height')
$el.append(
'<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>'
);
//$el.append(ui.inputData);
)
// $el.append(ui.inputData);
ui.uploadCropWrap = $el.find('.cropper-wrap');
ui.uploadCrop = ui.uploadCropWrap.find('.cropper-container');
ui.uploadCropWrap = $el.find('.cropper-wrap')
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({
enableExif: true,
enforceBoundary: false,
@ -59,70 +59,70 @@ const CroppieUI = (($) => {
width: ui.width / ratio,
height: ui.height / ratio,
},
});
})
ui.uploadCrop.hide();
ui.uploadCrop.hide()
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) => {
e.preventDefault();
e.preventDefault()
ui.uploadCrop.removeClass('ready');
$el.find('.croppie-image').remove();
ui.uploadCrop.removeClass('ready')
$el.find('.croppie-image').remove()
ui.$el.find('input[type="file"]').val('');
ui.$el.find('input[type="file"]').change();
ui.$el.find('input[type="file"]').val('')
ui.$el.find('input[type="file"]').change()
ui.uploadCropWrap.hide();
});
ui.uploadCropWrap.hide()
})
if (ui.$el.find('img.croppie-image').length) {
ui.$btnRemove.show();
ui.$btnRemove.show()
}
}
readFile(input) {
const ui = this;
const $el = ui.$el;
const $form = $el.closest('form');
readFile (input) {
const ui = this
const $el = ui.$el
const $form = $el.closest('form')
if (input.files && input.files[0]) {
const reader = new FileReader();
const reader = new FileReader()
reader.onload = (e) => {
ui.uploadCrop.addClass('ready');
ui.uploadCrop.addClass('ready')
ui.uploadCrop.croppie('bind', {
url: e.target.result,
});
})
ui.uploadCrop.show();
ui.uploadCropWrap.show();
ui.$btnRemove.show();
};
ui.uploadCrop.show()
ui.uploadCropWrap.show()
ui.$btnRemove.show()
}
reader.readAsDataURL(input.files[0]);
reader.readAsDataURL(input.files[0])
$form.off('submit');
$form.off('submit')
$form.on('submit', (e) => {
console.log(`${NAME}: Processing submission ...`);
console.log(`${NAME}: Processing submission ...`)
e.preventDefault();
e.preventDefault()
if ($form.data('locked')) {
console.warn(`${NAME}: Form#${$form.attr('id')} is locked.`);
return false;
console.warn(`${NAME}: Form#${$form.attr('id')} is locked.`)
return false
}
$form.data('locked', true);
$form.data('locked', true)
SpinnerUI.show();
SpinnerUI.show()
if (!ui.uploadCrop.hasClass('ready')) {
return true;
return true
}
ui.uploadCrop
@ -135,17 +135,17 @@ const CroppieUI = (($) => {
format: 'png',
})
.then((blob) => {
const form = e.currentTarget;
const data = new FormData(form);
const name = $(input).attr('name');
const form = e.currentTarget
const data = new FormData(form)
const name = $(input).attr('name')
data.delete('BackURL');
data.delete(name);
data.append(name, blob, `${name}-image.png`);
data.append('ajax', '1');
data.delete('BackURL')
data.delete(name)
data.append(name, blob, `${name}-image.png`)
data.append('ajax', '1')
if ($(form).data('jsFormValidate') && !$(form).data('jsFormValidate').validate()) {
return false;
return false
}
$.ajax({
@ -155,112 +155,112 @@ const CroppieUI = (($) => {
contentType: false,
type: $(form).attr('method'),
success: function (data) {
$form.data('locked', false);
$form.data('locked', false)
let IS_JSON = false;
let json = {};
let IS_JSON = false
let json = {}
try {
IS_JSON = true;
json = $.parseJSON(data);
IS_JSON = true
json = $.parseJSON(data)
} catch (e) {
IS_JSON = false;
IS_JSON = false
}
if (IS_JSON) {
if (typeof json['status'] !== 'undefined') {
if (json['status'] === 'success') {
if (typeof json.status !== 'undefined') {
if (json.status === 'success') {
if (MainUI) {
MainUI.alert(json['message'], json['status']);
}else {
window.location.reload();
MainUI.alert(json.message, json.status)
} else {
window.location.reload()
}
if (typeof json['link'] !== 'undefined') {
if (typeof json.link !== 'undefined') {
console.log(
`${NAME}: Finished submission > JSON ... Redirecting to ${json['link']}.`
);
`${NAME}: Finished submission > JSON ... Redirecting to ${json.link}.`
)
setTimeout(() => {
G.location = json['link'];
}, 2000);
G.location = json.link
}, 2000)
} else {
console.warn(
`${NAME}: Finished submission > JSON no redirect link.`
);
)
}
} else if (json['status'] === 'error') {
} else if (json.status === 'error') {
if (MainUI) {
MainUI.alert(json['message'], json['status']);
}else {
window.location.reload();
MainUI.alert(json.message, json.status)
} else {
window.location.reload()
}
}
}
if (typeof json['form'] !== 'undefined') {
if (typeof json.form !== 'undefined') {
console.log(
`${NAME}: Finished submission > JSON. Got new form response.`
);
)
$(form).replaceWith(json['form']);
$(G).trigger(Events.AJAX);
$(form).replaceWith(json.form)
$(G).trigger(Events.AJAX)
}
} else {
console.log(
`${NAME}: Finished submission > DATA response.`
);
)
$(form).replaceWith(data);
$(G).trigger(Events.AJAX);
//G.location.reload(false);
$(form).replaceWith(data)
$(G).trigger(Events.AJAX)
// G.location.reload(false);
}
SpinnerUI.hide();
SpinnerUI.hide()
},
});
})
//ui.inputData.val(data);
});
});
// ui.inputData.val(data);
})
})
} else {
console.log(
`${NAME}: Sorry - your browser doesn't support the FileReader API.`
);
)
}
}
static dispose() {
console.log(`${NAME}: destroying.`);
static dispose () {
console.log(`${NAME}: destroying.`)
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each((i, el) => {
// attach functionality to element
const $el = $(el);
let data = $el.data(DATA_KEY);
const $el = $(el)
let data = $el.data(DATA_KEY)
if (!data) {
data = new CroppieUI(el);
$el.data(DATA_KEY, data);
data = new CroppieUI(el)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = CroppieUI._jQueryInterface;
$.fn[NAME].Constructor = CroppieUI;
$.fn[NAME] = CroppieUI._jQueryInterface
$.fn[NAME].Constructor = CroppieUI
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return CroppieUI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return CroppieUI._jQueryInterface
}
// auto-apply
$(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-timepicker/js/bootstrap-timepicker.js";
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
import 'bootstrap-timepicker/js/bootstrap-timepicker.js'
const DatetimeUI = (($) => {
// Constants
const W = window;
const D = document;
const $Body = $("body");
const W = window
const D = document
const $Body = $('body')
const NAME = "jsDatetimeUI";
const DATA_KEY = NAME;
const NAME = 'jsDatetimeUI'
const DATA_KEY = NAME
const datepickerOptions = {
autoclose: true,
startDate: 0,
//todayBtn: true,
// todayBtn: true,
todayHighlight: true,
clearBtn: true,
};
}
class DatetimeUI {
constructor(el) {
console.log(`${NAME}: init`);
constructor (el) {
console.log(`${NAME}: init`)
const ui = this;
const $el = $(el);
const ui = this
const $el = $(el)
ui._el = el;
ui._el = el
// datepicker
if ($el.hasClass("date") || $el.attr("type") === "date") {
if ($el.hasClass('date') || $el.attr('type') === 'date') {
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(
$.extend(
datepickerOptions,
{
defaultViewDate: defaultDate,
multidate: $el.data("multidate"),
multidate: $el.data('multidate'),
},
$el.data()
)
);
)
}
// timepicker
else if ($el.hasClass("time") || $el.attr("type") === "time") {
$el.attr("readonly", "true");
else if ($el.hasClass('time') || $el.attr('type') === 'time') {
$el.attr('readonly', 'true')
$el
.timepicker(
$.extend(
{
snapToStep: true,
icons: {
up: "fas fa-chevron-up",
down: "fas fa-chevron-down",
up: 'fas fa-chevron-up',
down: 'fas fa-chevron-down',
},
},
$el.data()
)
)
.on("show.timepicker", (e) => {
const $el = $(e.currentTarget);
const $dropdown = $Body.find(".bootstrap-timepicker-widget");
.on('show.timepicker', (e) => {
const $el = $(e.currentTarget)
const $dropdown = $Body.find('.bootstrap-timepicker-widget')
if (!$dropdown.find('[data-action="clear"]').length) {
$dropdown
.find("tbody")
.find('tbody')
.append(
'<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>'
);
)
}
const $clearBtn = $dropdown.find('[data-action="clear"]');
$clearBtn.on("click", (e) => {
e.preventDefault();
$el.timepicker("clear");
$el.timepicker("hideWidget");
});
});
const $clearBtn = $dropdown.find('[data-action="clear"]')
$clearBtn.on('click', (e) => {
e.preventDefault()
$el.timepicker('clear')
$el.timepicker('hideWidget')
})
})
}
}
static dispose() {
console.log(`${NAME}: dispose`);
static dispose () {
console.log(`${NAME}: dispose`)
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to element
const $el = $(this);
let data = $el.data(DATA_KEY);
const $el = $(this)
let data = $el.data(DATA_KEY)
if (!data) {
data = new DatetimeUI(this);
$el.data(DATA_KEY, data);
data = new DatetimeUI(this)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = DatetimeUI._jQueryInterface;
$.fn[NAME].Constructor = DatetimeUI;
$.fn[NAME] = DatetimeUI._jQueryInterface
$.fn[NAME].Constructor = DatetimeUI
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return DatetimeUI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return DatetimeUI._jQueryInterface
}
// auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
$(
'input.date, input.time,input[type="date"], input[type="time"]'
).jsDatetimeUI();
});
).jsDatetimeUI()
})
return DatetimeUI;
})($);
return DatetimeUI
})($)
export default DatetimeUI;
export default DatetimeUI

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

@ -1,87 +1,87 @@
"use strict";
'use strict'
import $ from "jquery";
import Events from "../_events";
import $ from 'jquery'
import Events from '../_events'
const FormFieldUI = (($) => {
// Constants
const NAME = "jsFormFieldUI";
const DATA_KEY = NAME;
const $Html = $("html, body");
const NAME = 'jsFormFieldUI'
const DATA_KEY = NAME
const $Html = $('html, body')
class FormFieldUI {
constructor(el) {
const ui = this;
constructor (el) {
const ui = this
ui.$el = $(el);
ui.shown = true;
ui.$el = $(el)
ui.shown = true
ui.$el.data(DATA_KEY, ui);
//ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
ui.$el.data(DATA_KEY, ui)
// ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
ui.vals = {
val: ui.$el.val(),
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();
});
checked: ui.$el.is(':checked'),
}
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
dispose() {
const ui = this;
const $el = ui.$el;
dispose () {
const ui = this
const $el = ui.$el
$el.removeClass(`${NAME}-active`);
$.removeData($el[0], DATA_KEY);
$el.removeClass(`${NAME}-active`)
$.removeData($el[0], DATA_KEY)
}
show() {
const ui = this;
const $el = ui.$el;
show () {
const ui = this
const $el = ui.$el
ui.restore();
ui.shown = true;
ui.restore()
ui.shown = true
/*if (ui.$collapse.length) {
/* if (ui.$collapse.length) {
ui.$collapse.collapse('show');
}
if ($el.hasClass('collapse')) {
$el.collapse('show');
}*/
} */
$el.trigger(`shown.${NAME}`);
$el.trigger(`shown.${NAME}`)
}
hide() {
const ui = this;
const $el = ui.$el;
hide () {
const ui = this
const $el = ui.$el
ui.wipe();
ui.shown = false;
ui.wipe()
ui.shown = false
/*if (ui.$collapse.length) {
/* if (ui.$collapse.length) {
ui.$collapse.collapse('hide');
}
@ -89,80 +89,80 @@ const FormFieldUI = (($) => {
$el.collapse('hide');
}
$el.trigger('change');*/
$el.trigger(`hidden.${NAME}`);
$el.trigger('change'); */
$el.trigger(`hidden.${NAME}`)
}
wipe() {
const ui = this;
const $el = ui.$el;
wipe () {
const ui = this
const $el = ui.$el
ui.vals = {
name: $el.attr("name"),
name: $el.attr('name'),
val: $el.val(),
checked: $el.is(":checked"),
};
checked: $el.is(':checked'),
}
$el.val("");
$el.prop("checked", false);
$el.val('')
$el.prop('checked', false)
}
restore() {
const ui = this;
const $el = ui.$el;
const checked = ui.vals["checked"];
restore () {
const ui = this
const $el = ui.$el
const checked = ui.vals.checked
$el.val(ui.vals["val"]);
$el.prop("checked", checked);
$el.val(ui.vals.val)
$el.prop('checked', checked)
}
addMessage(msg, type = null, scrollTo = true) {
const ui = this;
const $field = ui.$el.closest(".field");
addMessage (msg, type = null, scrollTo = true) {
const ui = this
const $field = ui.$el.closest('.field')
$field.addClass("has-message");
$field.addClass('has-message')
if (msg) {
$field.append(`<div class="message alert ${type}">${msg}</div>`);
$field.append(`<div class="message alert ${type}">${msg}</div>`)
}
if (scrollTo) {
const pos = $field.offset().top;
$field.focus();
$Html.scrollTop(pos - 100);
const pos = $field.offset().top
$field.focus()
$Html.scrollTop(pos - 100)
}
}
removeMessages() {
const ui = this;
const $field = ui.$el.closest(".field");
removeMessages () {
const ui = this
const $field = ui.$el.closest('.field')
$field.removeClass("has-message");
$field.find(".message").remove();
$field.removeClass('has-message')
$field.find('.message').remove()
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
const $el = $(this)
let data = $el.data(DATA_KEY)
if (!data) {
data = new FormFieldUI(this);
$el.data(DATA_KEY, data);
data = new FormFieldUI(this)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = FormFieldUI._jQueryInterface;
$.fn[NAME].Constructor = FormFieldUI;
$.fn[NAME] = FormFieldUI._jQueryInterface
$.fn[NAME].Constructor = FormFieldUI
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormFieldUI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
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 Events from "../_events";
import $ from 'jquery'
import Events from '../_events'
import FormBasics from "./_ui.form.basics";
import FormBasics from './_ui.form.basics'
const FormToggleUI = (($) => {
// Constants
const NAME = "jsFormToggleUI";
const DATA_KEY = NAME;
const W = window;
const $Html = $("html, body");
const FieldUI = "jsFormFieldUI";
const NAME = 'jsFormToggleUI'
const DATA_KEY = NAME
const W = window
const $Html = $('html, body')
const FieldUI = 'jsFormFieldUI'
class FormToggleUI {
constructor($el) {
const ui = this;
ui.$el = $el;
constructor ($el) {
const ui = this
ui.$el = $el
if (!ui.getCondition()) {
console.warn(`${NAME}: no condition found`);
return;
console.warn(`${NAME}: no condition found`)
return
}
ui.toggle();
ui.toggle()
ui.$el.on(`change shown.${FieldUI} hidden.${FieldUI}`, (e) => {
ui.toggle();
});
ui.toggle()
})
ui.$el.addClass(`${NAME}-active`);
ui.$el.data(DATA_KEY, ui);
ui.$el.addClass(`${NAME}-active`)
ui.$el.data(DATA_KEY, ui)
return ui;
return ui
}
getDataEl() {
const ui = this;
const $el = ui.$el;
getDataEl () {
const ui = this
const $el = ui.$el
return $el.is('[type="radio"],[type="checkbox"]') &&
$el.parents(".optionset,.checkboxset").length
? $el.parents(".optionset,.checkboxset")
: $el;
$el.parents('.optionset,.checkboxset').length
? $el.parents('.optionset,.checkboxset')
: $el
}
getCondition() {
const ui = this;
getCondition () {
const ui = this
return ui.getDataEl().data("value-toggle");
return ui.getDataEl().data('value-toggle')
}
getCurrentVal() {
const ui = this;
const $el = ui.$el;
getCurrentVal () {
const ui = this
const $el = ui.$el
if ($el.attr("type") === "checkbox") {
if ($el.parents(".checkboxset").length && $el.is(":checked")) {
return $el.val();
if ($el.attr('type') === 'checkbox') {
if ($el.parents('.checkboxset').length && $el.is(':checked')) {
return $el.val()
}
return $el.is(":checked") ? true : false;
return !!$el.is(':checked')
}
if ($el.attr("type") === "radio") {
return $Html.find(`[name="${$el.attr("name")}"]:checked`).val();
if ($el.attr('type') === 'radio') {
return $Html.find(`[name="${$el.attr('name')}"]:checked`).val()
}
return $el.val();
return $el.val()
}
getTrueTarget() {
const ui = this;
const $dataEl = ui.getDataEl();
getTrueTarget () {
const ui = this
const $dataEl = ui.getDataEl()
// compatibility params
const target = $dataEl.data("value-toggle-yes");
const target = $dataEl.data('value-toggle-yes')
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() {
const ui = this;
const $dataEl = ui.getDataEl();
getFalseTarget () {
const ui = this
const $dataEl = ui.getDataEl()
// compatibility params
const target = $dataEl.data("value-toggle-no");
const target = $dataEl.data('value-toggle-no')
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) {
return target && target.length && $(target).length ? $(target) : false;
getElement (target) {
return target && target.length && $(target).length ? $(target) : false
}
toggle() {
const ui = this;
const $el = ui.$el;
toggle () {
const ui = this
const $el = ui.$el
const val = ui.getCurrentVal();
const $dataEl = ui.getDataEl();
const val = ui.getCurrentVal()
const $dataEl = ui.getDataEl()
// conditional toggler
const condition = ui.getCondition();
const condition = ui.getCondition()
if (!condition) {
return;
return
}
// yes/no toggler
const yesNoVal =
(condition === true && val && val !== "" && val !== "0") ||
condition === val
? true
: false;
!!((condition === true && val && val !== '' && val !== '0') ||
condition === val)
const $yesTarget = ui.getTrueTarget();
const $noTarget = ui.getFalseTarget();
const elUI = $el.data(FieldUI);
const $yesTarget = ui.getTrueTarget()
const $noTarget = ui.getFalseTarget()
const elUI = $el.data(FieldUI)
if ((elUI && !elUI.shown) || typeof val === "undefined") {
ui.toggleElement($yesTarget, false);
ui.toggleElement($noTarget, false);
if ((elUI && !elUI.shown) || typeof val === 'undefined') {
ui.toggleElement($yesTarget, false)
ui.toggleElement($noTarget, false)
return;
return
}
if (yesNoVal) {
ui.toggleElement($yesTarget, true);
ui.toggleElement($noTarget, false);
ui.toggleElement($yesTarget, true)
ui.toggleElement($noTarget, false)
} else {
ui.toggleElement($yesTarget, false);
ui.toggleElement($noTarget, true);
ui.toggleElement($yesTarget, false)
ui.toggleElement($noTarget, true)
}
}
toggleElement($el, show) {
toggleElement ($el, show) {
if (!$el.length) {
return;
return
}
const ui = this;
const action = show ? "show" : "hide";
const ui = this
const action = show ? 'show' : 'hide'
$el.filter("div.collapse").each((i, el) => {
const $el = $(el);
$el.filter('div.collapse').each((i, el) => {
const $el = $(el)
$el.collapse(action);
});
$el.collapse(action)
})
$el.trigger(`${action}.${NAME}`);
$el.trigger(`${action}.${NAME}`)
}
dispose() {
const ui = this;
const $el = ui.$el;
dispose () {
const ui = this
const $el = ui.$el
$el.removeClass(`${NAME}-active`);
$.removeData(this._el, DATA_KEY);
this._el = null;
$el.removeClass(`${NAME}-active`)
$.removeData(this._el, DATA_KEY)
this._el = null
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each((i, el) => {
// attach functionality to el
const $el = $(el);
let data = $el.data(DATA_KEY);
const $el = $(el)
let data = $el.data(DATA_KEY)
if (!data) {
data = new FormToggleUI($el);
$el.data(DATA_KEY, data);
data = new FormToggleUI($el)
$el.data(DATA_KEY, data)
}
});
})
}
static validate() {
static validate () {
return $(Events.FORM_FIELDS).each((i, el) => {
const $el = $(el);
const name = $el.attr("name");
const $el = $(el)
const name = $el.attr('name')
if ($(`[name="${name}"]`).length > 1) {
console.warn(
`${NAME}: Module malfunction duplicate "${name}" elements found`
);
)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = FormToggleUI._jQueryInterface;
$.fn[NAME].Constructor = FormToggleUI;
$.fn[NAME] = FormToggleUI._jQueryInterface
$.fn[NAME].Constructor = FormToggleUI
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormToggleUI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return FormToggleUI._jQueryInterface
}
// auto-apply
$(W).on(`${Events.LODEDANDREADY}`, () => {
//FormToggleUI.validate();
$(Events.FORM_FIELDS).filter("[data-value-toggle]").jsFormToggleUI();
// FormToggleUI.validate();
$(Events.FORM_FIELDS).filter('[data-value-toggle]').jsFormToggleUI()
$("[data-value-toggle]")
$('[data-value-toggle]')
.not(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 Spinner from "../_components/_ui.spinner";
import FormValidateField from "./_ui.form.validate.field";
import Events from '../_events'
import Spinner from '../_components/_ui.spinner'
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/uncompressed/jquery-te-1.4.0.js";
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'
const JqteUI = (($) => {
const NAME = "jsJqteUI";
const DATA_KEY = NAME;
const NAME = 'jsJqteUI'
const DATA_KEY = NAME
const jqteOptions = {
color: false,
fsize: false,
funit: "em",
funit: 'em',
format: false,
rule: false,
source: false,
sub: false,
sup: false,
};
}
class JqteUI {
constructor(element) {
console.log(`${NAME}: init`);
constructor (element) {
console.log(`${NAME}: init`)
const ui = this;
const $element = $(element);
const validationUI = $element.data("jsFormValidateField");
const ui = this
const $element = $(element)
const validationUI = $element.data('jsFormValidateField')
ui._element = element;
$element.data(DATA_KEY, this);
$element.jqte(jqteOptions);
ui._element = element
$element.data(DATA_KEY, this)
$element.jqte(jqteOptions)
// dynamic error control
if (validationUI) {
$element
.parents(".jqte")
.find(".jqte_editor")
.on("change", (e) => {
validationUI.validate();
});
.parents('.jqte')
.find('.jqte_editor')
.on('change', (e) => {
validationUI.validate()
})
}
}
static dispose() {
console.log(`${NAME}: dispose`);
static dispose () {
console.log(`${NAME}: dispose`)
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to element
const $element = $(this);
let data = $element.data(DATA_KEY);
const $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new JqteUI(this);
$element.data(DATA_KEY, data);
data = new JqteUI(this)
$element.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = JqteUI._jQueryInterface;
$.fn[NAME].Constructor = JqteUI;
$.fn[NAME] = JqteUI._jQueryInterface
$.fn[NAME].Constructor = JqteUI
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return JqteUI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return JqteUI._jQueryInterface
}
// auto-apply
$(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 Events from "../_events";
import select2 from 'select2/dist/js/select2.js'
import Events from '../_events'
const FormSelect2 = (($) => {
// Constants
const NAME = "jsFormSelect2";
const DATA_KEY = NAME;
const $Html = $("html, body");
const W = window;
const D = document;
const NAME = 'jsFormSelect2'
const DATA_KEY = NAME
const $Html = $('html, body')
const W = window
const D = document
class FormSelect2 {
constructor(el) {
const ui = this;
const $el = $(el);
constructor (el) {
const ui = this
const $el = $(el)
ui._el = el;
ui.dispose();
ui._el = el
ui.dispose()
console.log(`${NAME}: init`);
$el.data(DATA_KEY, this);
console.log(`${NAME}: init`)
$el.data(DATA_KEY, this)
const $fields = $el.find(Events.FORM_FIELDS);
const $fields = $el.find(Events.FORM_FIELDS)
const $selectFields = $el
.find("select:not([readonly])")
.not(".no-select2");
.find('select:not([readonly])')
.not('.no-select2')
$selectFields.each((i, el) => {
$(el).select2();
});
$(el).select2()
})
$el.addClass(`${NAME}-active`);
$el.trigger(Events.FORM_INIT_BASICS);
$el.addClass(`${NAME}-active`)
$el.trigger(Events.FORM_INIT_BASICS)
}
// Public methods
dispose() {
console.log(`${NAME}: dispose`);
const ui = this;
dispose () {
console.log(`${NAME}: dispose`)
const ui = this
const $el = $(ui._el);
const $el = $(ui._el)
const $selectFields = $el
.find("select:not([readonly])")
.not(".no-select2");
.find('select:not([readonly])')
.not('.no-select2')
$selectFields.each((i, el) => {
const $el = $(el);
if ($el.hasClass("select2-hidden-accessible")) {
$el.select2("destroy");
const $el = $(el)
if ($el.hasClass('select2-hidden-accessible')) {
$el.select2('destroy')
}
});
})
$.removeData(ui._el, DATA_KEY);
ui._el = null;
$el.removeClass(`${NAME}-active`);
$.removeData(ui._el, DATA_KEY)
ui._el = null
$el.removeClass(`${NAME}-active`)
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(() => {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
const $el = $(this)
let data = $el.data(DATA_KEY)
if (!data) {
data = new FormSelect2(this);
$el.data(DATA_KEY, data);
data = new FormSelect2(this)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = FormSelect2._jQueryInterface;
$.fn[NAME].Constructor = FormSelect2;
$.fn[NAME] = FormSelect2._jQueryInterface
$.fn[NAME].Constructor = FormSelect2
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormSelect2._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return FormSelect2._jQueryInterface
}
const init = () => {
$("form").jsFormSelect2();
};
$('form').jsFormSelect2()
}
// auto-apply
$(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 Events from "../_events";
import LANG from "../lang/_en";
import FormValidateField from "./_ui.form.validate.field";
import $ from 'jquery'
import Events from '../_events'
import LANG from '../lang/_en'
import FormValidateField from './_ui.form.validate.field'
import "../../scss/_components/_ui.form.stepped.scss";
import '../../scss/_components/_ui.form.stepped.scss'
const SteppedForm = (($) => {
// Constants
const NAME = "jsSteppedForm";
const DATA_KEY = NAME;
const NAME = 'jsSteppedForm'
const DATA_KEY = NAME
class SteppedForm {
constructor(element) {
console.log(`${NAME}: init`);
constructor (element) {
console.log(`${NAME}: init`)
const ui = this;
const $element = $(element);
const ui = this
const $element = $(element)
$element.data(DATA_KEY, this);
$element.data(DATA_KEY, this)
if (!$element.find(".steps-counter").length) {
$element.prepend(LANG["en"][NAME]["STEPCOUNTER"]);
if (!$element.find('.steps-counter').length) {
$element.prepend(LANG.en[NAME].STEPCOUNTER)
}
if (!$element.find(".steps-buttons").length) {
$element.append(LANG["en"][NAME]["STEPBUTTONS"]);
if (!$element.find('.steps-buttons').length) {
$element.append(LANG.en[NAME].STEPBUTTONS)
}
ui._currentStepCounter = $element.find(".steps-counter .current-step");
ui._totalStepsCounter = $element.find(".steps-counter .total-steps");
ui._currentStepCounter = $element.find('.steps-counter .current-step')
ui._totalStepsCounter = $element.find('.steps-counter .total-steps')
ui._steps = $element.find(".step");
ui._steps = $element.find('.step')
ui._steps.each((i, el) => {
const $el = $(el);
const $el = $(el)
if (!$el.data("step")) {
$el.data("step", i + 1);
$el.attr("data-step", i + 1);
if (!$el.data('step')) {
$el.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._actions = $element.children(".btn-toolbar,.form-actions");
ui._stepPrev = $element.find('.step-prev')
ui._actions = $element.children('.btn-toolbar,.form-actions')
ui._element = element;
ui._currentStep = 1;
ui._totalSteps = ui._steps.last().data("step") || ui._steps.length;
ui._stepsOrder = [];
ui._element = element
ui._currentStep = 1
ui._totalSteps = ui._steps.last().data('step') || ui._steps.length
ui._stepsOrder = []
ui._totalStepsCounter.text(ui._totalSteps);
ui._totalStepsCounter.text(ui._totalSteps)
// check if one of the steps already has an error
const $hasError = ui._steps
.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) {
const $modal = $element.parents(".modal");
const $modal = $element.parents('.modal')
// show modal
if ($modal.length && typeof $modal.modal !== "undefined") {
$modal.modal("show");
if ($modal.length && typeof $modal.modal !== 'undefined') {
$modal.modal('show')
}
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) => {
e.preventDefault();
ui.next();
});
ui._stepNext.on('click', (e) => {
e.preventDefault()
ui.next()
})
ui._stepPrev.on("click", (e) => {
e.preventDefault();
ui.prev();
});
ui._stepPrev.on('click', (e) => {
e.preventDefault()
ui.prev()
})
$element.find(".step-toggle").on("click", (e) => {
const $el = $(e.currentTarget);
$element.find('.step-toggle').on('click', (e) => {
const $el = $(e.currentTarget)
e.preventDefault();
ui.step($el.data("target"));
});
e.preventDefault()
ui.step($el.data('target'))
})
$element.addClass(`${NAME}-active`);
$element.trigger(Events.FORM_INIT_STEPPED);
$element.addClass(`${NAME}-active`)
$element.trigger(Events.FORM_INIT_STEPPED)
}
// Public methods
dispose() {
console.log(`${NAME}: dispose`);
const ui = this;
const $element = $(ui._element);
dispose () {
console.log(`${NAME}: dispose`)
const ui = this
const $element = $(ui._element)
$element.removeClass(`${NAME}-active`);
$.removeData(ui._element, DATA_KEY);
ui._element = null;
$element.removeClass(`${NAME}-active`)
$.removeData(ui._element, DATA_KEY)
ui._element = null
}
next() {
const ui = this;
next () {
const ui = this
if (ui._currentStep >= ui._totalSteps) {
return;
return
}
ui.step(`.step[data-step="${ui._currentStep + 1}"]`);
ui.step(`.step[data-step="${ui._currentStep + 1}"]`)
}
prev() {
const ui = this;
prev () {
const ui = this
if (ui._currentStep <= 1) {
return;
return
}
ui.step(ui._stepsOrder[ui._currentStep - 1]);
ui.step(ui._stepsOrder[ui._currentStep - 1])
}
step(target) {
const ui = this;
const $element = $(ui._element);
const $target = $element.find(target);
const targetStep = parseInt($target.data("step"));
step (target) {
const ui = this
const $element = $(ui._element)
const $target = $element.find(target)
const targetStep = parseInt($target.data('step'))
// validate current step
let valid = true;
let valid = true
if (targetStep > ui._currentStep) {
ui.currentStep()
.find("input,textarea,select")
.find('input,textarea,select')
.each((i, el) => {
const $el = $(el);
const fieldUI = $el.data("jsFormValidateField");
const $el = $(el)
const fieldUI = $el.data('jsFormValidateField')
if (fieldUI && !fieldUI.validate()) {
valid = false;
valid = false
}
});
})
}
if (!valid) {
return false;
return false
}
//
if (parseInt($target.data("step")) <= "1") {
ui._stepPrev.hide();
$element.trigger(Events.FORM_STEPPED_FIRST_STEP);
if (parseInt($target.data('step')) <= '1') {
ui._stepPrev.hide()
$element.trigger(Events.FORM_STEPPED_FIRST_STEP)
} else {
ui._stepPrev.show();
ui._stepPrev.show()
}
if (parseInt($target.data("step")) >= ui._totalSteps) {
ui._stepNext.hide();
ui._actions.show();
if (parseInt($target.data('step')) >= ui._totalSteps) {
ui._stepNext.hide()
ui._actions.show()
$element.trigger(Events.FORM_STEPPED_LAST_STEP);
$element.trigger(Events.FORM_STEPPED_LAST_STEP)
} else {
ui._stepNext.show();
ui._actions.hide();
ui._stepNext.show()
ui._actions.hide()
}
ui._currentStep = targetStep;
ui._stepsOrder[ui._currentStep] = $target;
ui._currentStep = targetStep
ui._stepsOrder[ui._currentStep] = $target
ui._steps.removeClass("active");
$target.addClass("active");
ui._steps.removeClass('active')
$target.addClass('active')
ui._currentStepCounter.text(ui._currentStep);
ui._currentStepCounter.text(ui._currentStep)
$target.trigger(Events.FORM_STEPPED_NEW_STEP);
$element.trigger(Events.FORM_STEPPED_NEW_STEP);
$target.trigger(Events.FORM_STEPPED_NEW_STEP)
$element.trigger(Events.FORM_STEPPED_NEW_STEP)
}
currentStep() {
const ui = this;
const $element = $(ui._element);
currentStep () {
const ui = this
const $element = $(ui._element)
return $element.find(".step.active");
return $element.find('.step.active')
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to element
const $element = $(this);
let data = $element.data(DATA_KEY);
const $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new SteppedForm(this);
$element.data(DATA_KEY, data);
data = new SteppedForm(this)
$element.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = SteppedForm._jQueryInterface;
$.fn[NAME].Constructor = SteppedForm;
$.fn[NAME] = SteppedForm._jQueryInterface
$.fn[NAME].Constructor = SteppedForm
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return SteppedForm._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return SteppedForm._jQueryInterface
}
// auto-apply
$(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 Events from "../_events";
import $ from 'jquery'
import Events from '../_events'
const FormStorage = (($) => {
// Constants
const NAME = "jsFormStorage";
const DATA_KEY = NAME;
const STORAGE = window.localStorage;
const NAME = 'jsFormStorage'
const DATA_KEY = NAME
const STORAGE = window.localStorage
class FormStorage {
constructor(element) {
console.log(`${NAME}: init`);
constructor (element) {
console.log(`${NAME}: init`)
const ui = this;
const $element = $(element);
const $elements = $element.find("input, textarea, select");
const ui = this
const $element = $(element)
const $elements = $element.find('input, textarea, select')
const setRangeValues = function (el) {
const $el = $(el);
$el.siblings(".value").text($el.val());
};
const $el = $(el)
$el.siblings('.value').text($el.val())
}
ui._element = element;
$element.data(DATA_KEY, this);
ui._element = element
$element.data(DATA_KEY, this)
$element.addClass(`${NAME}-active`);
$element.addClass(`${NAME}-active`)
// restore form data from localStorage
$elements.each((i, el) => {
const $el = $(el);
const id = $el.attr("id");
const type = $el.attr("type");
const val = STORAGE.getItem(NAME + id);
const $el = $(el)
const id = $el.attr('id')
const type = $el.attr('type')
const val = STORAGE.getItem(NAME + id)
if (type === "file") {
return true;
if (type === 'file') {
return true
}
if (id && val && type) {
if (type && (type === "checkbox" || type === "radio")) {
$el.prop("checked", val);
if (type && (type === 'checkbox' || type === 'radio')) {
$el.prop('checked', val)
} else {
$el.val(val);
$el.val(val)
}
}
$el.trigger(Events.RESTORE_FIELD);
});
$el.trigger(Events.RESTORE_FIELD)
})
// range fields
$('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) => {
setRangeValues(e.currentTarget);
});
$('input[type="range"]').on('change', (e) => {
setRangeValues(e.currentTarget)
})
// store form data into localStorage
$elements.on("change", (e) => {
const $el = $(e.currentTarget);
const id = $el.attr("id");
const type = $el.attr("type");
$elements.on('change', (e) => {
const $el = $(e.currentTarget)
const id = $el.attr('id')
const type = $el.attr('type')
// skip some elements
if ($el.hasClass("no-storage")) {
return true;
if ($el.hasClass('no-storage')) {
return true
}
let val = $el.val();
let val = $el.val()
if (type && (type === "checkbox" || type === "radio")) {
val = !!$el.is(":checked");
if (type && (type === 'checkbox' || type === 'radio')) {
val = !!$el.is(':checked')
}
if (id && type && type !== "password") {
STORAGE.setItem(NAME + id, val);
if (id && type && type !== 'password') {
STORAGE.setItem(NAME + id, val)
}
});
})
$element.on("submit", () => {
$element.data(DATA_KEY).clear();
});
$element.on('submit', () => {
$element.data(DATA_KEY).clear()
})
$element
.find(".btn-toolbar,.form-actions")
.find('.btn-toolbar,.form-actions')
.children('button,[type="submit"],[type="clear"]')
.on("click", () => {
$element.data(DATA_KEY).clear();
});
.on('click', () => {
$element.data(DATA_KEY).clear()
})
$element.addClass(`${NAME}-active`);
$element.trigger(Events.FORM_INIT_STORAGE);
$element.addClass(`${NAME}-active`)
$element.trigger(Events.FORM_INIT_STORAGE)
}
// Public methods
dispose() {
const $element = $(this._element);
dispose () {
const $element = $(this._element)
$element.removeClass(`${NAME}-active`);
$.removeData(this._element, DATA_KEY);
this._element = null;
$element.removeClass(`${NAME}-active`)
$.removeData(this._element, DATA_KEY)
this._element = null
}
clear() {
STORAGE.clear();
clear () {
STORAGE.clear()
}
static _jQueryInterface() {
if (typeof window.localStorage !== "undefined") {
static _jQueryInterface () {
if (typeof window.localStorage !== 'undefined') {
return this.each(function () {
// attach functionality to element
const $element = $(this);
let data = $element.data(DATA_KEY);
const $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new FormStorage(this);
$element.data(DATA_KEY, data);
data = new FormStorage(this)
$element.data(DATA_KEY, data)
}
});
})
}
}
}
// jQuery interface
$.fn[NAME] = FormStorage._jQueryInterface;
$.fn[NAME].Constructor = FormStorage;
$.fn[NAME] = FormStorage._jQueryInterface
$.fn[NAME].Constructor = FormStorage
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormStorage._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return FormStorage._jQueryInterface
}
// auto-apply
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
$("form").each((i, el) => {
const $el = $(el);
$('form').each((i, el) => {
const $el = $(el)
// skip some forms
if ($el.hasClass("no-storage")) {
return true;
if ($el.hasClass('no-storage')) {
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 Events from "../_events";
import $ from 'jquery'
import Events from '../_events'
const FormValidateField = (($) => {
// Constants
const NAME = "jsFormValidateField";
const DATA_KEY = NAME;
const $Body = $("body");
const NAME = 'jsFormValidateField'
const DATA_KEY = NAME
const $Body = $('body')
const FieldUI = "jsFormFieldUI";
const FieldUI = 'jsFormFieldUI'
class FormValidateField {
constructor(el) {
const ui = this;
const $el = $(el);
constructor (el) {
const ui = this
const $el = $(el)
ui.$el = $el;
ui.$el = $el
ui._actions = $el.parents("form").children(".btn-toolbar,.form-actions");
$el.data(DATA_KEY, this);
ui._actions = $el.parents('form').children('.btn-toolbar,.form-actions')
$el.data(DATA_KEY, this)
// prevent browsers checks (will do it using JS)
$el.attr("novalidate", "novalidate");
$el.attr('novalidate', 'novalidate')
$el.on("change focusout", (e) => {
ui.validate(false);
});
$el.on('change focusout', (e) => {
ui.validate(false)
})
$el.addClass(`${NAME}-active`);
$el.trigger(Events.FORM_INIT_VALIDATE_FIELD);
$el.addClass(`${NAME}-active`)
$el.trigger(Events.FORM_INIT_VALIDATE_FIELD)
}
// Public methods
dispose() {
const $el = ui.$el;
dispose () {
const $el = ui.$el
$el.removeClass(`${NAME}-active`);
$.removeData(ui.$el[0], DATA_KEY);
ui.$el = null;
$el.removeClass(`${NAME}-active`)
$.removeData(ui.$el[0], DATA_KEY)
ui.$el = null
}
validate(scrollTo = true) {
const ui = this;
const $el = ui.$el;
validate (scrollTo = true) {
const ui = this
const $el = ui.$el
const $field = $el.closest(".field");
const extraChecks = $el.data(`${NAME}-extra`);
let valid = true;
let msg = null;
const $field = $el.closest('.field')
const extraChecks = $el.data(`${NAME}-extra`)
let valid = true
let msg = null
const val = $el.val();
const val = $el.val()
// browser checks
if (!ui.$el[0].checkValidity()) {
valid = false;
valid = false
console.warn(
`${NAME}: Browser check validity is failed #${$el.attr("id")}`
);
`${NAME}: Browser check validity is failed #${$el.attr('id')}`
)
}
let unmaskedVal = val;
if (typeof $el.inputmask === "function") {
unmaskedVal = $el.inputmask("unmaskedvalue");
let unmaskedVal = val
if (typeof $el.inputmask === 'function') {
unmaskedVal = $el.inputmask('unmaskedvalue')
}
// required
if (
$el.hasClass("required") &&
$el.hasClass('required') &&
(!unmaskedVal.length ||
!unmaskedVal.trim().length ||
(ui.isHtml(val) && !$(unmaskedVal).text().length))
) {
valid = false;
console.warn(`${NAME}: Required field is missing #${$el.attr("id")}`);
valid = false
console.warn(`${NAME}: Required field is missing #${$el.attr('id')}`)
}
// validate URL
if (
$el.hasClass("url") &&
$el.hasClass('url') &&
unmaskedVal.length &&
!ui.valideURL(unmaskedVal)
) {
valid = false;
valid = false
msg =
"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")}`);
'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')}`)
}
// maxlength
const maxLength = $el.attr("maxlength");
const maxLength = $el.attr('maxlength')
if (unmaskedVal.length && maxLength && maxLength.length) {
if (unmaskedVal.length > maxLength) {
valid = false;
valid = false
msg = `The value is limited to ${maxLength} chars`;
console.warn(`${NAME}: Too long value #${$el.attr("id")}`);
msg = `The value is limited to ${maxLength} chars`
console.warn(`${NAME}: Too long value #${$el.attr('id')}`)
}
}
// minlength
const minLength = $el.attr("minlength");
const minLength = $el.attr('minlength')
if (unmaskedVal.length && minLength && minLength.length) {
if (unmaskedVal.length < minLength) {
valid = false;
valid = false
msg = `The value should contain more than ${minLength} chars`;
console.warn(`${NAME}: Too short value #${$el.attr("id")}`);
msg = `The value should contain more than ${minLength} chars`
console.warn(`${NAME}: Too short value #${$el.attr('id')}`)
}
}
this.removeError();
this.removeError()
// extra checks
if (extraChecks) {
extraChecks.forEach((check) => {
const result = check($el);
valid = valid && result;
const result = check($el)
valid = valid && result
if (!result) {
console.log(check);
console.warn(`${NAME}: Extra check is failed #${$el.attr("id")}`);
console.log(check)
console.warn(`${NAME}: Extra check is failed #${$el.attr('id')}`)
}
});
})
}
if (valid) {
return true;
return true
}
this.setError(scrollTo, msg);
this.setError(scrollTo, msg)
return false;
return false
}
isHtml(str) {
const doc = new DOMParser().parseFromString(str, "text/html");
isHtml (str) {
const doc = new DOMParser().parseFromString(str, 'text/html')
return Array.from(doc.body.childNodes).some(
(node) => node.nodeType === 1
);
)
}
valideURL(str) {
let url;
valideURL (str) {
let url
try {
url = new URL(str);
url = new URL(str)
} catch (_) {
return false;
return false
}
return url.protocol === "http:" || url.protocol === "https:";
return url.protocol === 'http:' || url.protocol === 'https:'
}
setError(scrollTo = true, msg = null) {
const ui = this;
const fieldUI = ui.$el.data(FieldUI);
setError (scrollTo = true, msg = null) {
const ui = this
const fieldUI = ui.$el.data(FieldUI)
const $field = ui.$el.closest(".field");
const $field = ui.$el.closest('.field')
const bodyScroll = $Body.scrollTop();
const pos = $field[0].getBoundingClientRect().top; //$field.offset().top;
const bodyScroll = $Body.scrollTop()
const pos = $field[0].getBoundingClientRect().top // $field.offset().top;
const rowCorrection = parseInt($field.css("font-size")) * 4;
ui.removeError();
const rowCorrection = parseInt($field.css('font-size')) * 4
ui.removeError()
$field.addClass("error");
$field.addClass('error')
if (msg) {
fieldUI.addMessage(msg, "alert-error alert-danger", scrollTo);
fieldUI.addMessage(msg, 'alert-error alert-danger', scrollTo)
} else if (pos && scrollTo) {
$field.focus();
$Body.scrollTop(bodyScroll + pos - rowCorrection);
$field.focus()
$Body.scrollTop(bodyScroll + pos - rowCorrection)
}
}
removeError() {
const ui = this;
const fieldUI = ui.$el.data(FieldUI);
removeError () {
const ui = this
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-validation");
$field.find(".alert-error").remove();
$field.removeClass('holder-error')
$field.removeClass('holder-validation')
$field.find('.alert-error').remove()
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
const $el = $(this)
let data = $el.data(DATA_KEY)
if (!data) {
data = new FormValidateField(this);
$el.data(DATA_KEY, data);
data = new FormValidateField(this)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = FormValidateField._jQueryInterface;
$.fn[NAME].Constructor = FormValidateField;
$.fn[NAME] = FormValidateField._jQueryInterface
$.fn[NAME].Constructor = FormValidateField
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormValidateField._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
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 Events from '../_events';
import $ from 'jquery'
import Events from '../_events'
import FormBasics from './_ui.form.basics';
import FormValidateField from './_ui.form.validate.field';
//import SpinnerUI from "./_ui.spinner";
import FormBasics from './_ui.form.basics'
import FormValidateField from './_ui.form.validate.field'
// import SpinnerUI from "./_ui.spinner";
const FormValidate = (($) => {
// Constants
const NAME = 'jsFormValidate';
const DATA_KEY = NAME;
const $Html = $('html, body');
const NAME = 'jsFormValidate'
const DATA_KEY = NAME
const $Html = $('html, body')
class FormValidate {
constructor(element) {
const ui = this;
const $element = $(element);
const $fields = $element.find('input,textarea,select');
constructor (element) {
const ui = this
const $element = $(element)
const $fields = $element.find('input,textarea,select')
ui._element = element;
ui.$element = $element;
$element.data(DATA_KEY, this);
ui._element = element
ui.$element = $element
$element.data(DATA_KEY, this)
ui._fields = $fields;
ui._stepped_form = $element.data('jsSteppedForm');
ui._fields = $fields
ui._stepped_form = $element.data('jsSteppedForm')
// prevent browsers checks (will do it using JS)
$element.attr('novalidate', 'novalidate');
$element.attr('novalidate', 'novalidate')
$element.on(Events.FORM_INIT_STEPPED, () => {
ui._stepped_form = $element.data('jsSteppedForm');
});
ui._stepped_form = $element.data('jsSteppedForm')
})
// init fields validation
$fields.each((i, el) => {
// skip some fields here
if ($(el).attr('role') === 'combobox') {
return;
return
}
new FormValidateField(el);
});
new FormValidateField(el)
})
// check form
$element.on('submit', (e) => {
ui.validate(true, () => {
e.preventDefault();
e.preventDefault()
// switch to step
if (ui._stepped_form) {
const $el = $element.find('.error').first();
const $el = $element.find('.error').first()
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.trigger(Events.FORM_INIT_VALIDATE);
$element.addClass(`${NAME}-active`)
$element.trigger(Events.FORM_INIT_VALIDATE)
}
// Public methods
dispose() {
const $element = $(this._element);
dispose () {
const $element = $(this._element)
$element.removeClass(`${NAME}-active`);
$.removeData(this._element, DATA_KEY);
this._element = null;
$element.removeClass(`${NAME}-active`)
$.removeData(this._element, DATA_KEY)
this._element = null
}
validate(scrollTo = true, badCallback = false) {
console.log(`${NAME}: checking the form ...`);
validate (scrollTo = true, badCallback = false) {
console.log(`${NAME}: checking the form ...`)
const ui = this;
let valid = true;
const ui = this
let valid = true
ui._fields.filter(':visible').each((i, el) => {
const $el = $(el);
const fieldUI = $el.data('jsFormValidateField');
const $el = $(el)
const fieldUI = $el.data('jsFormValidateField')
if (fieldUI && !fieldUI.validate()) {
//SpinnerUI.hide();
// SpinnerUI.hide();
ui.$element.addClass('error');
ui.$element.addClass('error')
if (badCallback) {
badCallback();
badCallback()
}
valid = false;
return false;
valid = false
return false
}
});
})
return valid;
return valid
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to element
const $element = $(this);
let data = $element.data(DATA_KEY);
const $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new FormValidate(this);
$element.data(DATA_KEY, data);
data = new FormValidate(this)
$element.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = FormValidate._jQueryInterface;
$.fn[NAME].Constructor = FormValidate;
$.fn[NAME] = FormValidate._jQueryInterface
$.fn[NAME].Constructor = FormValidate
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return FormValidate._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return FormValidate._jQueryInterface
}
// auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
$('form').each((i, el) => {
const $el = $(el);
const $el = $(el)
// skip some forms
if ($el.hasClass('no-validation')) {
return true;
return true
}
$el.jsFormValidate();
});
});
$el.jsFormValidate()
})
})
return FormValidate;
})($);
return FormValidate
})($)
export default FormValidate;
export default FormValidate

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

@ -1,72 +1,72 @@
"use strict";
'use strict'
import $ from "jquery";
import Events from "../_events";
import $ from 'jquery'
import Events from '../_events'
const HeaderUI = (($) => {
const D = document;
const W = window;
const $Body = $("html,body");
const NAME = "HeaderUI";
const CLASSNAME = `js${NAME}`;
const D = document
const W = window
const $Body = $('html,body')
const NAME = 'HeaderUI'
const CLASSNAME = `js${NAME}`
class HeaderUI {
static init() {
const ui = this;
ui.dispose();
static init () {
const ui = this
ui.dispose()
console.log(`${NAME}: init`);
console.log(`${NAME}: init`)
const $header = $(`#Header,.js${NAME}`);
const $header = $(`#Header,.js${NAME}`)
const updateHeader = () => {
const h = $header.height();
const s = $Body.scrollTop();
const h = $header.height()
const s = $Body.scrollTop()
if (s + 50 > h) {
$Body.addClass("shrink");
$Body.addClass('shrink')
} else {
$Body.removeClass("shrink");
$Body.removeClass('shrink')
}
};
}
updateHeader();
updateHeader()
const updateFooter = (i, el) => {
const $el = $(el);
const footerHeight = $el.height();
$el.css("height", footerHeight);
const $el = $(el)
const footerHeight = $el.height()
$el.css('height', footerHeight)
$el.css("margin-top", -footerHeight);
$el.siblings(".wrapper").css("padding-bottom", footerHeight);
};
$el.css('margin-top', -footerHeight)
$el.siblings('.wrapper').css('padding-bottom', footerHeight)
}
$(".footer,.jsFooterUI").css("height", "auto");
$('.footer,.jsFooterUI').css('height', 'auto')
setTimeout(() => {
$(".footer,.jsFooterUI").each(updateFooter);
}, 500);
$('.footer,.jsFooterUI').each(updateFooter)
}, 500)
}
static dispose() {
console.log(`${NAME}: dispose`);
static dispose () {
console.log(`${NAME}: dispose`)
$Body.removeClass("shrink");
$(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr("css", "");
$Body.removeClass('shrink')
$(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr('css', '')
}
}
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
HeaderUI.init();
});
HeaderUI.init()
})
// align event content
$(W).on(`${Events.RESIZE}`, () => {
setTimeout(() => {
HeaderUI.init();
}, 200);
});
HeaderUI.init()
}, 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'
*/
"use strict";
'use strict'
import $ from "jquery";
import Events from "../_events";
import "jquery-hoverintent/jquery.hoverIntent.js";
import MainUI from "../_main";
import $ from 'jquery'
import Events from '../_events'
import 'jquery-hoverintent/jquery.hoverIntent.js'
import MainUI from '../_main'
const HoverUI = (($) => {
// Constants
const W = window;
const D = document;
const $Html = $("html");
const $Body = $("body");
const W = window
const D = document
const $Html = $('html')
const $Body = $('body')
const NAME = "jsHoverUI";
const DATA_KEY = NAME;
const NAME = 'jsHoverUI'
const DATA_KEY = NAME
class HoverUI {
// Constructor
constructor(el) {
console.log(`${NAME}: init`);
constructor (el) {
console.log(`${NAME}: init`)
const ui = this;
const $el = $(el);
const ui = this
const $el = $(el)
if (
$el.is(
'[target="_blank"],.external,[data-toggle="lightbox"],[data-lightbox-gallery]'
)
) {
return true;
return true
}
ui.$el = $el;
ui.$el = $el
// find parent
let $parent = $el.parents(".nav-item, .dropdown");
$parent = $parent && $parent.length ? $parent.first() : null;
//$parent = $parent ? $parent : $el.parent();
ui.$parent = $parent;
let $parent = $el.parents('.nav-item, .dropdown')
$parent = $parent && $parent.length ? $parent.first() : null
// $parent = $parent ? $parent : $el.parent();
ui.$parent = $parent
// find target
let $target = $el.data("target");
$target = $target && $target.length ? $target : null;
$target = $target
? $target
: $parent
? $parent.find(".dropdown-menu").first()
: null;
let $target = $el.data('target')
$target = $target && $target.length ? $target : null
$target = $target || ($parent
? $parent.find('.dropdown-menu').first()
: null)
if (!$target || !$target.length) {
console.warn(`${NAME}: Missing target for:`);
console.warn($el);
return;
console.warn(`${NAME}: Missing target for:`)
console.warn($el)
return
}
ui.$target = $target;
ui.$target = $target
const $triger = $parent ? $parent : $el;
ui.$triger = $triger;
const $triger = $parent || $el
ui.$triger = $triger
// integrate with dropdown-toggle
$('[data-toggle="dropdown"]').on("click touch", (e) => {
console.log(`${NAME}: dropdown click-touch`);
ui.hide();
});
$('[data-toggle="dropdown"]').on('click touch', (e) => {
console.log(`${NAME}: dropdown click-touch`)
ui.hide()
})
if (!W.isTouch) {
$triger.hoverIntent({
sensitivity: 10,
interval: 50,
over: () => {
ui.show();
ui.show()
},
out: () => {
ui.hide();
ui.hide()
},
});
})
}
$el.off("click touch");
$el.on("click touch", (e) => {
const size = MainUI.detectBootstrapScreenSize();
console.log(`${NAME}: click-touch size: ${size}`);
$el.off('click touch')
$el.on('click touch', (e) => {
const size = MainUI.detectBootstrapScreenSize()
console.log(`${NAME}: click-touch size: ${size}`)
if (
size === "xs" ||
!$el.data("allow-click") ||
(W.IsTouchScreen && !$el.data("allow-touch-click"))
size === 'xs' ||
!$el.data('allow-click') ||
(W.IsTouchScreen && !$el.data('allow-touch-click'))
) {
console.log(`${NAME}: click-touch prevent click`);
e.stopPropagation();
e.preventDefault();
console.log(`${NAME}: click-touch prevent click`)
e.stopPropagation()
e.preventDefault()
}
if (ui.isShown()) {
ui.hide();
ui.hide()
} else {
ui.show();
ui.show()
}
});
})
$el.data(NAME, ui);
$triger.addClass(`${NAME}-active`);
$el.data(NAME, ui)
$triger.addClass(`${NAME}-active`)
}
isShown() {
return this.$target.hasClass("show");
isShown () {
return this.$target.hasClass('show')
}
show() {
const ui = this;
show () {
const ui = this
ui.$el
.parents(".dropdown")
.not(".active")
.parents('.dropdown')
.not('.active')
.each((i, el) => {
const $el = $(el);
$el.find(".dropdown").removeClass("show");
$el.addClass("show");
});
const $el = $(el)
$el.find('.dropdown').removeClass('show')
$el.addClass('show')
})
ui.$target.addClass("show");
ui.$target.addClass('show')
}
hide() {
const ui = this;
const $el = ui.$target;
$el.removeClass("show");
$el.find(".dropdown-menu").removeClass("show");
$el.parent(".dropdown").removeClass("show");
hide () {
const ui = this
const $el = ui.$target
$el.removeClass('show')
$el.find('.dropdown-menu').removeClass('show')
$el.parent('.dropdown').removeClass('show')
}
dispose() {
const ui = this;
const $el = ui.$el;
dispose () {
const ui = this
const $el = ui.$el
console.log(`${NAME}: dispose`);
console.log(`${NAME}: dispose`)
ui.$triger.removeClass(`${NAME}-active`);
$.removeData($el, DATA_KEY);
ui.$triger.removeClass(`${NAME}-active`)
$.removeData($el, DATA_KEY)
ui.$el = null;
ui.$parent = null;
ui.$target = null;
ui.$triger = null;
ui.$el = null
ui.$parent = null
ui.$target = null
ui.$triger = null
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
const $el = $(this)
let data = $el.data(DATA_KEY)
if (!data) {
data = new HoverUI(this);
$el.data(DATA_KEY, data);
data = new HoverUI(this)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = HoverUI._jQueryInterface;
$.fn[NAME].Constructor = HoverUI;
$.fn[NAME] = HoverUI._jQueryInterface
$.fn[NAME].Constructor = HoverUI
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return HoverUI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return HoverUI._jQueryInterface
}
// auto-apply
$('[data-toggle="hover"]').ready(() => {
$('[data-toggle="hover"]').jsHoverUI();
});
$('[data-toggle="hover"]').jsHoverUI()
})
// rewrite 'bootstrap/js/dist/dropdown'
$('[data-toggle="dropdown"]').on("click touch", (e) => {
e.preventDefault();
$('[data-toggle="dropdown"]').on('click touch', (e) => {
e.preventDefault()
const $el = $(e.currentTarget);
const $parent = $el.parent(".dropdown");
const $el = $(e.currentTarget)
const $parent = $el.parent('.dropdown')
// hide siblings
$parent.parent().find(".dropdown, .dropdown-menu").removeClass("show");
$parent.parent().find('.dropdown, .dropdown-menu').removeClass('show')
if ($parent.hasClass("show")) {
$parent.removeClass("show");
$parent.find(".dropdown-menu").removeClass("show");
if ($parent.hasClass('show')) {
$parent.removeClass('show')
$parent.find('.dropdown-menu').removeClass('show')
} else {
$parent.addClass("show");
$parent.find(".dropdown-menu").addClass("show");
$parent.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 D = document;
const W = window;
const $Body = $("html,body");
const NAME = "ImagePositionUI";
const CLASSNAME = `js${NAME}`;
const D = document
const W = window
const $Body = $('html,body')
const NAME = 'ImagePositionUI'
const CLASSNAME = `js${NAME}`
class ImagePositionUI {
static init() {
const ui = this;
ui.dispose();
static init () {
const ui = this
ui.dispose()
if (!$(`.${CLASSNAME}`).length) {
return;
return
}
console.log(`${NAME}: init`);
$(`.${CLASSNAME}`).on("click", (e) => {
e.preventDefault();
console.log(e);
});
console.log(`${NAME}: init`)
$(`.${CLASSNAME}`).on('click', (e) => {
e.preventDefault()
console.log(e)
})
}
static dispose() {
console.log(`${NAME}: dispose`);
static dispose () {
console.log(`${NAME}: dispose`)
}
}
$(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

138
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 "jquery.instagramFeed/jquery.instagramFeed";
import Events from '../_events'
import 'jquery.instagramFeed/jquery.instagramFeed'
const InstagramFeed = (($) => {
// Constants
const NAME = "jsInstagramFeed";
const DATA_KEY = NAME;
const W = window;
const D = document;
const NAME = 'jsInstagramFeed'
const DATA_KEY = NAME
const W = window
const D = document
class InstagramFeed {
constructor(el) {
const ui = this;
const $el = $(el);
constructor (el) {
const ui = this
const $el = $(el)
ui._el = el;
ui.dispose();
ui._el = el
ui.dispose()
console.log(`${NAME}: init`);
$el.data(DATA_KEY, this);
console.log(`${NAME}: init`)
$el.data(DATA_KEY, this)
const ID = $el.data("username") + $el.data("tag");
const ID = $el.data('username') + $el.data('tag')
$.instagramFeed({
username: $el.data("username"),
tag: $el.data("tag") || null,
display_profile: $el.data("display-profile"),
display_biography: $el.data("display-biography"),
display_gallery: $el.data("display-gallery"),
display_captions: $el.data("display-captions"),
username: $el.data('username'),
tag: $el.data('tag') || null,
display_profile: $el.data('display-profile'),
display_biography: $el.data('display-biography'),
display_gallery: $el.data('display-gallery'),
display_captions: $el.data('display-captions'),
cache_time: 120,
callback: (data) => {
console.log(`${NAME}: data response received`);
console.log(`${NAME}: data response received`)
$el.append(`<div class="${NAME}-list row"></div>`);
const $list = $el.find(`.${NAME}-list`);
$el.append(`<div class="${NAME}-list row"></div>`)
const $list = $el.find(`.${NAME}-list`)
data["edge_owner_to_timeline_media"]["edges"].forEach((el, i) => {
const item = el["node"];
const preview = ui.ig_media_preview(item["media_preview"]);
data.edge_owner_to_timeline_media.edges.forEach((el, i) => {
const item = el.node
const preview = ui.ig_media_preview(item.media_preview)
$list.append(
`<div class="a col ${NAME}-item"` +
` 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"]}"` +
` 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}"` +
`style="background:url(${preview})" />` +
"</div>"
);
});
'</div>'
)
})
$(W).trigger("MetaLightboxUI.init");
$(W).trigger('MetaLightboxUI.init')
},
styling: false,
items: $el.data("items"),
items: $el.data('items'),
lazy_load: true,
on_error: (e) => {
console.error(`${NAME}: ${e}`);
console.error(`${NAME}: ${e}`)
},
});
})
$el.addClass(`${NAME}-active`);
$el.addClass(`${NAME}-active`)
}
ig_media_preview(base64data) {
var jpegtpl =
"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==",
t = atob(base64data),
p = t.slice(3).split(""),
o = t
.substring(0, 3)
.split("")
.map((e) => {
return e.charCodeAt(0);
}),
c = atob(jpegtpl).split("");
c[162] = String.fromCharCode(o[1]);
c[160] = String.fromCharCode(o[2]);
ig_media_preview (base64data) {
const jpegtpl =
'/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA=='
const t = atob(base64data)
const p = t.slice(3).split('')
const o = t
.substring(0, 3)
.split('')
.map((e) => {
return e.charCodeAt(0)
})
const c = atob(jpegtpl).split('')
c[162] = String.fromCharCode(o[1])
c[160] = String.fromCharCode(o[2])
return base64data
? `data:image/jpeg;base64,${btoa(c.concat(p).join(""))}`
: null;
? `data:image/jpeg;base64,${btoa(c.concat(p).join(''))}`
: null
}
// Public methods
dispose() {
console.log(`${NAME}: dispose`);
const ui = this;
dispose () {
console.log(`${NAME}: dispose`)
const ui = this
const $el = $(ui._el);
$.removeData(ui._el, DATA_KEY);
ui._el = null;
$el.removeClass(`${NAME}-active`);
const $el = $(ui._el)
$.removeData(ui._el, DATA_KEY)
ui._el = null
$el.removeClass(`${NAME}-active`)
}
}
const init = () => {
$(`.${NAME}`).each((i, el) => {
new InstagramFeed(el);
});
};
new InstagramFeed(el)
})
}
// auto-apply
$(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 Events from "../_events";
import $ from 'jquery'
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 = (($) => {
// Constants
const NAME = "jsMapAPI";
const DATA_KEY = NAME;
const $BODY = $("body");
const NAME = 'jsMapAPI'
const DATA_KEY = NAME
const $BODY = $('body')
const MAP_DRIVER = CONSTS["MAP_DRIVER"];
const W = window;
const MAP_DRIVER = CONSTS.MAP_DRIVER
const W = window
class MapAPI {
// Constructor
constructor(el) {
const ui = this;
const Drv = new MAP_DRIVER();
constructor (el) {
const ui = this
const Drv = new MAP_DRIVER()
ui.$el = $(el);
ui.$el = $(el)
const $el = ui.$el;
const config = $el.data();
const $el = ui.$el
const config = $el.data()
config["center"] = [
config["lng"] ? config["lng"] : $BODY.data("default-lng"),
config["lat"] ? config["lat"] : $BODY.data("default-lat"),
];
config.center = [
config.lng ? config.lng : $BODY.data('default-lng'),
config.lat ? config.lat : $BODY.data('default-lat'),
]
config["style"] = config["style"]
? jQuery.parseJSON(config["style"])
: null;
config.style = config.style
? jQuery.parseJSON(config.style)
: null
config["font-family"] = $BODY.css("font-family");
config['font-family'] = $BODY.css('font-family')
if (!config["icon"]) {
config["icon"] = '<i class="fas fa-map-marker-alt"></i>';
if (!config.icon) {
config.icon = '<i class="fas fa-map-marker-alt"></i>'
}
console.log(`${NAME}: init ${Drv.getName()}...`);
Drv.init($el, config);
ui.drv = Drv;
console.log(`${NAME}: init ${Drv.getName()}...`)
Drv.init($el, config)
ui.drv = Drv
$el.on(Events.MAPAPILOADED, (e) => {
ui.map = Drv.getMap();
ui.map = Drv.getMap()
if (config["geojson"]) {
console.log(`${NAME}: setting up geocode data`);
Drv.addGeoJson(config);
} else if (config["address"]) {
console.log(config["address"]);
console.log(`${NAME}: setting up address marker`);
Drv.geocode(config["address"], (results) => {
console.log(results);
if (config.geojson) {
console.log(`${NAME}: setting up geocode data`)
Drv.addGeoJson(config)
} else if (config.address) {
console.log(config.address)
console.log(`${NAME}: setting up address marker`)
Drv.geocode(config.address, (results) => {
console.log(results)
const lat = results[0].geometry.location.lat();
const lng = results[0].geometry.location.lng();
const lat = results[0].geometry.location.lat()
const lng = results[0].geometry.location.lng()
console.log(
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
);
)
Drv.addMarker([lng, lat], config);
ui.map.setCenter({ lat, lng });
});
} else if (config["lat"] && config["lng"]) {
const lat = config["lat"];
const lng = config["lng"];
Drv.addMarker([lng, lat], config)
ui.map.setCenter({ lat, lng })
})
} else if (config.lat && config.lng) {
const lat = config.lat
const lng = config.lng
console.log(
`${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.addClass(`${NAME}-active`);
$el.data(DATA_KEY, ui)
$el.addClass(`${NAME}-active`)
$el.trigger(Events.MAPLOADED);
console.log(`${NAME}: Map is loaded`);
});
$el.trigger(Events.MAPLOADED)
console.log(`${NAME}: Map is loaded`)
})
}
// Public methods
getMap() {
return ui.map;
getMap () {
return ui.map
}
dispose() {
const ui = this;
dispose () {
const ui = this
ui.$el = null;
$.removeData(ui.$el[0], DATA_KEY);
ui.$el = null
$.removeData(ui.$el[0], DATA_KEY)
ui.$el.removeClass(`${NAME}-active`);
ui.$el.removeClass(`${NAME}-active`)
}
static _jQueryInterface() {
if (typeof W.localStorage !== "undefined") {
static _jQueryInterface () {
if (typeof W.localStorage !== 'undefined') {
return this.each(() => {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
const $el = $(this)
let data = $el.data(DATA_KEY)
if (!data) {
data = new MapAPI(this);
$el.data(DATA_KEY, data);
data = new MapAPI(this)
$el.data(DATA_KEY, data)
}
});
})
}
}
}
// jQuery interface
$.fn[NAME] = MapAPI._jQueryInterface;
$.fn[NAME].Constructor = MapAPI;
$.fn[NAME] = MapAPI._jQueryInterface
$.fn[NAME].Constructor = MapAPI
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return MapAPI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return MapAPI._jQueryInterface
}
// auto-apply
$(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 = (($) => {
// Constants
const NAME = "jsSlidingMenu";
const DATA_KEY = NAME;
const NAME = 'jsSlidingMenu'
const DATA_KEY = NAME
class SlidingMenu {
// Constructor
constructor(element) {
console.log(`${NAME}: init`);
this._element = element;
const $element = $(this._element);
$element.addClass(`${NAME}-active`);
constructor (element) {
console.log(`${NAME}: init`)
this._element = element
const $element = $(this._element)
$element.addClass(`${NAME}-active`)
// esc button
$(window).on("keyup", (e) => {
$(window).on('keyup', (e) => {
if (e.which === 27) {
$element.find('.is-open[data-toggle="offcanvas"]').click();
$element.find('.is-open[data-toggle="offcanvas"]').click()
}
});
})
}
// Public methods
dispose() {
console.log(`${NAME}: dispose`);
dispose () {
console.log(`${NAME}: dispose`)
$(this._element).removeClass(`${NAME}-active`);
$.removeData(this._element, DATA_KEY);
this._element = null;
$(this._element).removeClass(`${NAME}-active`)
$.removeData(this._element, DATA_KEY)
this._element = null
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each(function () {
// attach functionality to element
const $element = $(this);
let data = $element.data(DATA_KEY);
const $element = $(this)
let data = $element.data(DATA_KEY)
if (!data) {
data = new SlidingMenu(this);
$element.data(DATA_KEY, data);
data = new SlidingMenu(this)
$element.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = SlidingMenu._jQueryInterface;
$.fn[NAME].Constructor = SlidingMenu;
$.fn[NAME] = SlidingMenu._jQueryInterface
$.fn[NAME].Constructor = SlidingMenu
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return SlidingMenu._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return SlidingMenu._jQueryInterface
}
// auto-apply
$(`.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 Events from "../_events";
import MainUI from "../_main";
import $ from 'jquery'
import Events from '../_events'
import MainUI from '../_main'
import "hammerjs/hammer";
import "jquery-hammerjs/jquery.hammer";
import 'hammerjs/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 = (($) => {
// Constants
const NAME = "jsMultiSlider";
const DATA_KEY = NAME;
const $BODY = $("body");
const NAME = 'jsMultiSlider'
const DATA_KEY = NAME
const $BODY = $('body')
class MultiSlider {
// Constructor
constructor(el) {
this.dispose();
constructor (el) {
this.dispose()
console.log(`${NAME}: init ...`);
console.log(`${NAME}: init ...`)
const ui = this;
const $el = $(el);
ui.$el = $el;
ui.sliding = false;
const ui = this
const $el = $(el)
ui.$el = $el
ui.sliding = false
$el.wrap(`<div class="${NAME}-container"></div>`);
ui.$elContainer = $el.parent(`.${NAME}-container`);
$el.wrap(`<div class="${NAME}-container"></div>`)
ui.$elContainer = $el.parent(`.${NAME}-container`)
$el.wrap(`<div class="${NAME}-slides-container"></div>`);
ui.$slidesContainer = $el.parent(`.${NAME}-slides-container`);
$el.wrap(`<div class="${NAME}-slides-container"></div>`)
ui.$slidesContainer = $el.parent(`.${NAME}-slides-container`)
ui.addControls();
ui.calculate();
ui.addControls()
ui.calculate()
$(W).on("resize", () => {
$(W).on('resize', () => {
ui.$elContainer
.find(".act-slider-prev,.act-slider-next")
.removeClass("disabled");
ui.calculate();
});
.find('.act-slider-prev,.act-slider-next')
.removeClass('disabled')
ui.calculate()
})
ui.$elContainer.addClass(`${NAME}-active`);
$el.addClass(`${NAME}-active`);
ui.$elContainer.addClass(`${NAME}-active`)
$el.addClass(`${NAME}-active`)
}
calculate() {
const ui = this;
calculate () {
const ui = this
ui.$slides = ui.$el.find(".slide");
ui.numberOfSlides = ui.$slides.length;
ui.$slides = ui.$el.find('.slide')
ui.numberOfSlides = ui.$slides.length
ui.containerWidth = ui.$el.parent().width();
ui.maxPos = ui.numberOfSlides - ui.numToDisplay();
ui.slideWidth = ui.containerWidth / ui.numToDisplay();
ui.containerWidth = ui.$el.parent().width()
ui.maxPos = ui.numberOfSlides - ui.numToDisplay()
ui.slideWidth = ui.containerWidth / ui.numToDisplay()
ui.$slides.css("width", `${ui.slideWidth}px`);
ui.$el.css("width", ui.slideWidth * ui.numberOfSlides);
ui.$slides.css('width', `${ui.slideWidth}px`)
ui.$el.css('width', ui.slideWidth * ui.numberOfSlides)
ui.currPos = 0;
ui.slide(0);
ui.currPos = 0
ui.slide(0)
}
numToDisplay() {
const ui = this;
numToDisplay () {
const ui = this
const size = MainUI.detectBootstrapScreenSize();
const size = MainUI.detectBootstrapScreenSize()
let num = ui.$el.data(`length-${size}`);
num = num ? num : ui.$el.data("length");
let num = ui.$el.data(`length-${size}`)
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() {
const ui = this;
addControls () {
const ui = this
const $e = ui.$el;
const $e = ui.$el
// actions
ui.$elContainer.append(
'<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-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.$nextBtn = ui.$elContainer.find(".act-slider-next");
ui.$prevBtn = ui.$elContainer.find('.act-slider-prev')
ui.$nextBtn = ui.$elContainer.find('.act-slider-next')
ui.$prevBtn.on("click", (e) => {
e.preventDefault();
ui.$prevBtn.on('click', (e) => {
e.preventDefault()
if ($(e.currentTarget).hasClass("disabled")) {
return false;
if ($(e.currentTarget).hasClass('disabled')) {
return false
}
ui.prev();
});
ui.prev()
})
ui.$nextBtn.on("click", (e) => {
e.preventDefault();
ui.$nextBtn.on('click', (e) => {
e.preventDefault()
if ($(e.currentTarget).hasClass("disabled")) {
return false;
if ($(e.currentTarget).hasClass('disabled')) {
return false
}
ui.next();
});
ui.next()
})
// init touch swipes
$e.hammer().bind("swipeleft panleft", (e) => {
ui.next();
});
$e.hammer().bind('swipeleft panleft', (e) => {
ui.next()
})
$e.hammer().bind("swiperight panright", (e) => {
ui.prev();
});
$e.hammer().bind('swiperight panright', (e) => {
ui.prev()
})
}
next() {
const ui = this;
next () {
const ui = this
if (ui.sliding) {
return;
return
}
ui.currPos++;
ui.slide(ui.currPos);
ui.currPos++
ui.slide(ui.currPos)
}
prev() {
const ui = this;
prev () {
const ui = this
if (ui.sliding) {
return;
return
}
ui.currPos--;
ui.slide(ui.currPos);
ui.currPos--
ui.slide(ui.currPos)
}
slide(pos) {
const ui = this;
slide (pos) {
const ui = this
if (ui.sliding) {
return;
return
}
ui.sliding = true;
ui.sliding = true
if (ui.$nextBtn.length) {
if (pos >= ui.maxPos) {
ui.$nextBtn.addClass("disabled");
ui.$nextBtn.addClass('disabled')
} else {
ui.$nextBtn.removeClass("disabled");
ui.$nextBtn.removeClass('disabled')
}
}
if (ui.$prevBtn.length) {
if (pos <= 0) {
ui.$prevBtn.addClass("disabled");
ui.$prevBtn.addClass('disabled')
} else {
ui.$prevBtn.removeClass("disabled");
ui.$prevBtn.removeClass('disabled')
}
}
@ -170,60 +170,60 @@ const MultiSlider = (($) => {
{
left: `${-(pos * ui.slideWidth)}px`,
},
"slow",
"swing",
'slow',
'swing',
() => {
ui.sliding = false;
ui.sliding = false
}
);
)
}
dispose() {
const ui = this;
dispose () {
const ui = this
if (ui.$elContainer) {
ui.$el.parent().find(".slider-actions").remove();
ui.$el.parent().find('.slider-actions').remove()
}
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(() => {
// attach functionality to el
const $el = $(this);
let data = $el.data(DATA_KEY);
const $el = $(this)
let data = $el.data(DATA_KEY)
if (!data) {
data = new MultiSlider(this);
$el.data(DATA_KEY, data);
data = new MultiSlider(this)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = MultiSlider._jQueryInterface;
$.fn[NAME].Constructor = MultiSlider;
$.fn[NAME] = MultiSlider._jQueryInterface
$.fn[NAME].Constructor = MultiSlider
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return MultiSlider._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return MultiSlider._jQueryInterface
}
// auto-apply
$(W).on(`MultiSlider.init ${Events.LODEDANDREADY}`, () => {
$(`.${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 Events from "../lib/_events";
import $ from 'jquery'
import Events from '../lib/_events'
const NoCaptcha = (($) => {
// Constants
const $window = $(window);
const D = document;
const $Body = $("body");
const $window = $(window)
const D = document
const $Body = $('body')
const NAME = "jsNoCaptcha";
const NAME = 'jsNoCaptcha'
class NoCaptcha {
static init() {
const ui = this;
ui.dispose();
static init () {
const ui = this
ui.dispose()
console.log(`${NAME}: init`);
console.log(`${NAME}: init`)
if (
$(".g-recaptcha").length &&
typeof $window[0].grecaptcha === "undefined"
$('.g-recaptcha').length &&
typeof $window[0].grecaptcha === 'undefined'
) {
console.log(`${NAME}: Loading Captcha API`);
console.log(`${NAME}: Loading Captcha API`)
$.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 {
this.renderCaptcha();
this.renderCaptcha()
}
}
static dispose() {
console.log(`${NAME}: dispose`);
static dispose () {
console.log(`${NAME}: dispose`)
}
static renderCaptcha() {
const grecaptcha = $window[0].grecaptcha;
static renderCaptcha () {
const grecaptcha = $window[0].grecaptcha
if (
typeof grecaptcha === "undefined" ||
typeof grecaptcha.render === "undefined"
typeof grecaptcha === 'undefined' ||
typeof grecaptcha.render === 'undefined'
) {
return;
return
}
console.log(`${NAME}: Rendering Captcha`);
const $_noCaptchaFields = $(".g-recaptcha");
console.log(`${NAME}: Rendering Captcha`)
const $_noCaptchaFields = $('.g-recaptcha')
if (!$(".g-recaptcha").length) {
console.log(`${NAME}: No Captcha fields`);
return;
if (!$('.g-recaptcha').length) {
console.log(`${NAME}: No Captcha fields`)
return
}
const submitListener = (e) => {
const $field = $(e.currentTarget).find(".g-recaptcha");
grecaptcha.execute($field.data("widgetid"));
};
const $field = $(e.currentTarget).find('.g-recaptcha')
grecaptcha.execute($field.data('widgetid'))
}
$_noCaptchaFields.each((i, field) => {
const $field = $(field);
const $field = $(field)
if ($field.data("widgetid") || $field.html().length) {
return;
if ($field.data('widgetid') || $field.html().length) {
return
}
const $form = $field.data("form")
? $(`#${$field.data("form")}`)
: $field.parents("form");
const $form = $field.data('form')
? $(`#${$field.data('form')}`)
: $field.parents('form')
const widget_id = grecaptcha.render(field, $field.data());
$field.data("widgetid", widget_id);
const widget_id = grecaptcha.render(field, $field.data())
$field.data('widgetid', widget_id)
// For the invisible captcha we need to setup some callback listeners
if ($field.data("size") === "invisible" && !$field.data("callback")) {
grecaptcha.execute(widget_id);
$form.on("submit", submitListener);
if ($field.data('size') === 'invisible' && !$field.data('callback')) {
grecaptcha.execute(widget_id)
$form.on('submit', submitListener)
}
});
})
}
}
$window.on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
NoCaptcha.init();
});
NoCaptcha.init()
})
$window.data(`${NAME}`, NoCaptcha);
$window[0].noCaptchaFieldRender = NoCaptcha.renderCaptcha;
$window.data(`${NAME}`, NoCaptcha)
$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 = (($) => {
// Constants
const NAME = "OpeningHoursUI";
const NAME = 'OpeningHoursUI'
class OpeningHoursUI {
// Static methods
static each(callback) {
$(".js-opening-hours").each((i, e) => {
callback(i, $(e));
});
static each (callback) {
$('.js-opening-hours').each((i, e) => {
callback(i, $(e))
})
}
static init() {
this.dispose();
static init () {
this.dispose()
console.log(`${NAME}: init ...`);
console.log(`${NAME}: init ...`)
const hours = $.parseJSON($(".oppening-hours-json").html());
const date = new Date();
const dateYMD = this.Date_toYMD(date);
const hours = $.parseJSON($('.oppening-hours-json').html())
const date = new Date()
const dateYMD = this.Date_toYMD(date)
const weekday = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
const today = weekday[date.getDay()];
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
]
const today = weekday[date.getDay()]
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 (
typeof hours["days"] !== "undefined" &&
typeof hours["days"][today] !== "undefined" &&
hours["days"][today].length
typeof hours.days !== 'undefined' &&
typeof hours.days[today] !== 'undefined' &&
hours.days[today].length
) {
html = "Open today ";
$.each(hours["days"][today], (i, v) => {
if (v["DisplayStart"] || v["DisplayEnd"]) {
html = 'Open today '
$.each(hours.days[today], (i, v) => {
if (v.DisplayStart || v.DisplayEnd) {
if (
(v["DisplayStart"] &&
v["DisplayStart"] <= dateYMD &&
v["DisplayEnd"] &&
v["DisplayEnd"] >= dateYMD) ||
(v["DisplayStart"] &&
v["DisplayStart"] <= dateYMD &&
!v["DisplayEnd"]) ||
(v["DisplayEnd"] &&
v["DisplayEnd"] >= dateYMD &&
!v["DisplayStart"])
(v.DisplayStart &&
v.DisplayStart <= dateYMD &&
v.DisplayEnd &&
v.DisplayEnd >= dateYMD) ||
(v.DisplayStart &&
v.DisplayStart <= dateYMD &&
!v.DisplayEnd) ||
(v.DisplayEnd &&
v.DisplayEnd >= dateYMD &&
!v.DisplayStart)
) {
html = `Open today from ${v["From"]} to ${v["Till"]}`;
return false;
html = `Open today from ${v.From} to ${v.Till}`
return false
}
} else {
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 (
typeof hours["holidays"] !== "undefined" &&
typeof hours["holidays"][dateYMD] !== "undefined"
typeof hours.holidays !== 'undefined' &&
typeof hours.holidays[dateYMD] !== 'undefined'
) {
html = `<b class="opening-hours-status opening-hours-status-closed">Closed today${
hours["holidays"][dateYMD] ? ` for ${hours["holidays"][dateYMD]}` : ""
}</b>`;
hours.holidays[dateYMD] ? ` for ${hours.holidays[dateYMD]}` : ''
}</b>`
}
this.each((i, e) => {
const $e = $(e);
$e.html(html);
});
const $e = $(e)
$e.html(html)
})
}
static Date_toYMD(date) {
var year, month, day;
year = String(date.getFullYear());
month = String(date.getMonth() + 1);
static Date_toYMD (date) {
let year, month, day
year = String(date.getFullYear())
month = String(date.getMonth() + 1)
if (month.length == 1) {
month = `0${month}`;
month = `0${month}`
}
day = String(date.getDate());
day = String(date.getDate())
if (day.length == 1) {
day = `0${day}`;
day = `0${day}`
}
return `${year}-${month}-${day}`;
return `${year}-${month}-${day}`
}
static dispose() {
console.log(`${NAME}: dispose`);
static dispose () {
console.log(`${NAME}: dispose`)
this.each((i, e) => {
$(e).html("");
});
$(e).html('')
})
}
}
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
OpeningHoursUI.init();
});
OpeningHoursUI.init()
})
return OpeningHoursUI;
})($);
return OpeningHoursUI
})($)
export default OpeningHoursUI;
export default OpeningHoursUI

186
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 $searchLng = $('[name="search-lng"]');
const $nearbyLat = $("#nearby-lat");
const $nearbyLng = $("#nearby-lng");
const $radius = $("#distance-radius");
const $category = $("#distance-category");
const $newLocation = $('[name="newlocation"]');
const $setnewlocation = $("#setnewlocation");
const $newlocationholder = $(".set-newlocation-holder");
const $searchLat = $('[name="search-lat"]')
const $searchLng = $('[name="search-lng"]')
const $nearbyLat = $('#nearby-lat')
const $nearbyLng = $('#nearby-lng')
const $radius = $('#distance-radius')
const $category = $('#distance-category')
const $newLocation = $('[name="newlocation"]')
const $setnewlocation = $('#setnewlocation')
const $newlocationholder = $('.set-newlocation-holder')
const updatePosition = (lat, lng) => {
$searchLat.val(lat);
$searchLng.val(lng);
$nearbyLat.val(lat);
$nearbyLng.val(lng);
$searchLat.val(lat)
$searchLng.val(lng)
$nearbyLat.val(lat)
$nearbyLng.val(lng)
$searchLat.change();
$nearbyLat.change();
};
$searchLat.change()
$nearbyLat.change()
}
const getGeoPosition = () => {
const newLocation = $newLocation.val();
const newLocation = $newLocation.val()
if (!newLocation.length) {
return;
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`;
$('.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) => {
if (data.status === "OK") {
if (data.status === 'OK') {
updatePosition(
data.results[0].geometry.location.lat,
data.results[0].geometry.location.lng
);
//getCategories();
)
// getCategories();
}
});
};
})
}
const getCurrentPosition = () => {
$(".search-location .current-val").text("Current Location");
$('.search-location .current-val').text('Current Location')
navigator.geolocation.getCurrentPosition(
(position) => {
updatePosition(position.coords.latitude, position.coords.longitude);
//hideDistancesThatDontMatter();
updatePosition(position.coords.latitude, position.coords.longitude)
// hideDistancesThatDontMatter();
},
() => {
$(".search-location .current-val").text("Unable to get your location");
updatePosition("", "");
$('.search-location .current-val').text('Unable to get your location')
updatePosition('', '')
}
);
};
if ($newLocation.length && $newLocation.val().length) {
getGeoPosition();
} else {
getCurrentPosition();
)
}
$("#Form_SearchForm").on("keyup keypress", (e) => {
var keyCode = e.keyCode || e.which;
if ($newLocation.length && $newLocation.val().length) {
getGeoPosition()
} else {
getCurrentPosition()
}
$('#Form_SearchForm').on('keyup keypress', (e) => {
const keyCode = e.keyCode || e.which
if (keyCode === 13) {
e.preventDefault();
return false;
e.preventDefault()
return false
}
});
})
$(".get-current-location").on("click", (e) => {
e.preventDefault();
$('.get-current-location').on('click', (e) => {
e.preventDefault()
getCurrentPosition();
$newlocationholder.toggle();
$newLocation.val("");
});
getCurrentPosition()
$newlocationholder.toggle()
$newLocation.val('')
})
$setnewlocation.on("click", (e) => {
e.preventDefault();
$setnewlocation.on('click', (e) => {
e.preventDefault()
$newlocationholder.toggle();
});
$newlocationholder.toggle()
})
$newLocation.blur(() => {
getGeoPosition();
});
getGeoPosition()
})
$(".new-search").on("click", (e) => {
e.preventDefault();
$('.new-search').on('click', (e) => {
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();
});
function getCategories() {
@ -127,39 +127,39 @@ $(() => {
}
});
});
}*/
} */
const $map = $("#Map");
if (typeof google !== "undefined" && $map.length) {
const $directions = $("#DirectionsPanel"),
$fromAddress = $("#FromAddress"),
$getDirections = $("#GetDirections"),
$directionContainer = $("#DirectionContainer"),
directionsDisplay = new google.maps.DirectionsRenderer(),
directionsService = new google.maps.DirectionsService(),
currentPosition = {
lat: $map.data("lat"),
lng: $map.data("lng"),
},
map = new google.maps.Map($map[0], {
zoom: 15,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
const $map = $('#Map')
if (typeof google !== 'undefined' && $map.length) {
const $directions = $('#DirectionsPanel')
const $fromAddress = $('#FromAddress')
const $getDirections = $('#GetDirections')
const $directionContainer = $('#DirectionContainer')
const directionsDisplay = new google.maps.DirectionsRenderer()
const directionsService = new google.maps.DirectionsService()
const currentPosition = {
lat: $map.data('lat'),
lng: $map.data('lng'),
}
const map = new google.maps.Map($map[0], {
zoom: 15,
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
})
directionsDisplay.setMap(map);
directionsDisplay.setPanel($directions[0]);
directionsDisplay.setMap(map)
directionsDisplay.setPanel($directions[0])
map.setCenter(currentPosition);
map.setCenter(currentPosition)
new google.maps.Marker({
map,
position: currentPosition,
});
})
$getDirections.click((e) => {
e.preventDefault();
e.preventDefault()
const fromLocation = $fromAddress.val();
const fromLocation = $fromAddress.val()
if (fromLocation.length) {
directionsService.route(
@ -170,13 +170,13 @@ $(() => {
},
(response, status) => {
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 Events from "../_events";
import $ from 'jquery'
import Events from '../_events'
const ShrinkUI = (($) => {
// Constants
const W = window;
const D = document;
const NAME = "ShrinkUI";
const W = window
const D = document
const NAME = 'ShrinkUI'
console.log(`${NAME}: init`);
console.log(`${NAME}: init`)
$(W).on(
`${NAME}.init ${Events.LOADED} ${Events.SCROLL} ${Events.RESIZE}`,
() => {
if ($("#Navigation > .navbar-collapse").hasClass("show")) {
return;
if ($('#Navigation > .navbar-collapse').hasClass('show')) {
return
}
let h1 = $("#SiteWideMessage").height();
let h1 = $('#SiteWideMessage').height()
if (!h1) {
h1 = 0;
h1 = 0
}
let h2 = $("#SiteWideOffline").height();
let h2 = $('#SiteWideOffline').height()
if (!h2) {
h2 = 0;
h2 = 0
}
let h3 = $("#Header").height();
let h3 = $('#Header').height()
if (!h3) {
h3 = 0;
h3 = 0
}
const headerHeight = h1 + h2 + h3;
const headerHeight = h1 + h2 + h3
if ($(D).scrollTop() > headerHeight) {
$("body").addClass("shrink");
$('body').addClass('shrink')
} 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 $ from "jquery";
import Events from "../_events";
// import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
import $ from 'jquery'
import Events from '../_events'
const SidebarUI = (($) => {
const D = document;
const W = window;
const $Body = $("body");
const NAME = "SidebarUI";
const CLASSNAME = `js${NAME}`;
const CONTENTHOLDER = "content-holder";
const INNERWRAPPER = `${CLASSNAME}__inner`;
const D = document
const W = window
const $Body = $('body')
const NAME = 'SidebarUI'
const CLASSNAME = `js${NAME}`
const CONTENTHOLDER = 'content-holder'
const INNERWRAPPER = `${CLASSNAME}__inner`
class SidebarUI {
static init() {
const ui = this;
ui.dispose();
static init () {
const ui = this
ui.dispose()
if (!$(`.${CLASSNAME}`).length) {
return;
return
}
console.log(`${NAME}: init ...`);
//const fontSize = parseInt($Body.css('font-size'));
const fontSize = 0;
const contentElement = $(`.${CONTENTHOLDER}`)[0];
console.log(`${NAME}: init ...`)
// const fontSize = parseInt($Body.css('font-size'));
const fontSize = 0
const contentElement = $(`.${CONTENTHOLDER}`)[0]
//$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
const $el = $(`.${CLASSNAME}`);
const $innerWrapper = $(`.${INNERWRAPPER}`);
// $(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
const $el = $(`.${CLASSNAME}`)
const $innerWrapper = $(`.${INNERWRAPPER}`)
/*const sticky = new StickySidebar(`.${CLASSNAME}`, {
/* const sticky = new StickySidebar(`.${CLASSNAME}`, {
topSpacing: fontSize,
bottomSpacing: fontSize,
containerSelector: CONTENTHOLDER,
innerWrapperSelector: INNERWRAPPER,
});*/
}); */
$el.addClass(`${CLASSNAME}-active`);
$el.addClass(`${CLASSNAME}-active`)
$Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
const contentOffset = parseInt(contentElement.offsetTop) + fontSize;
const contentOffset = parseInt(contentElement.offsetTop) + fontSize
const contentOffsetHeight =
parseInt(contentElement.offsetHeight) - fontSize;
const sidebarWidth = $el[0].offsetWidth;
parseInt(contentElement.offsetHeight) - fontSize
const sidebarWidth = $el[0].offsetWidth
const scrollPos = parseInt($Body.scrollTop());
const scrollPos = parseInt($Body.scrollTop())
// normal pos
if (contentOffset >= scrollPos) {
$innerWrapper.attr("style", "");
$innerWrapper.attr('style', '')
} else if (
scrollPos >=
contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight
) {
// bottom pos
$innerWrapper.attr("style", `position:absolute;bottom:${fontSize}px`);
$innerWrapper.attr('style', `position:absolute;bottom:${fontSize}px`)
} else {
// scrolled pos
$innerWrapper.attr(
"style",
'style',
`position:fixed;top:${fontSize}px;width:${sidebarWidth}px`
);
)
}
});
})
}
static dispose() {
console.log(`${NAME}: dispose`);
static dispose () {
console.log(`${NAME}: dispose`)
}
}
$(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";
import $ from "jquery";
'use strict'
import $ from 'jquery'
const SpinnerUI = (($) => {
class SpinnerUI {
static show(callback) {
$("#PageLoading").show(0, callback);
static show (callback) {
$('#PageLoading').show(0, callback)
}
static hide(callback) {
$("#PageLoading").hide("slow", callback);
static hide (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 Events from "../_events";
import SpinnerUI from "./_ui.spinner";
import MainUI from '../_main'
import Events from '../_events'
import SpinnerUI from './_ui.spinner'
const VideoPreviewUI = (($) => {
const NAME = "jsVideoPreviewUI";
const DATA_KEY = NAME;
const NAME = 'jsVideoPreviewUI'
const DATA_KEY = NAME
const G = window;
const D = document;
const G = window
const D = document
class VideoPreviewUI {
constructor(el) {
const ui = this;
ui.$_el = $(el);
ui.innerHTML = ui.$_el[0].innerHTML;
constructor (el) {
const ui = this
ui.$_el = $(el)
ui.innerHTML = ui.$_el[0].innerHTML
ui.$_el.data(DATA_KEY, this);
const href = ui.$_el.attr("href") || ui.$_el.data("href");
ui.$_el.data(DATA_KEY, this)
const href = ui.$_el.attr('href') || ui.$_el.data('href')
const YouTubeGetID = (url) => {
const parsedURL = url.split(
/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/
);
console.log(`${NAME}: ${parsedURL}`);
)
console.log(`${NAME}: ${parsedURL}`)
return undefined !== parsedURL[2]
? parsedURL[2].split(/[^0-9a-z_-]/i)[0]
: parsedURL[0];
};
: parsedURL[0]
}
let video;
let video
if (
(video = href.match(
/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/
))
) {
let video_id;
let video_id
if (
video[1] === "youtube" ||
video[1] === "youtube-nocookie" ||
video[1] === "youtu"
video[1] === 'youtube' ||
video[1] === 'youtube-nocookie' ||
video[1] === 'youtu'
) {
video_id = YouTubeGetID(href);
video_id = YouTubeGetID(href)
}
if (video[1] == "vimeo") {
video_id = video[3];
ui.$_el.addClass("loading");
if (video[1] == 'vimeo') {
video_id = video[3]
ui.$_el.addClass('loading')
$.ajax({
type: "GET",
type: 'GET',
url: `https://vimeo.com/api/v2/video/${video_id}.json`,
jsonp: "callback",
dataType: "jsonp",
jsonp: 'callback',
dataType: 'jsonp',
success: function (data) {
const thumbnail_src = data[0].thumbnail_large;
ui.show(thumbnail_src);
ui.$_el.removeClass("loading");
const thumbnail_src = data[0].thumbnail_large
ui.show(thumbnail_src)
ui.$_el.removeClass('loading')
},
});
})
return;
return
}
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) {
const ui = this;
ui.$_el[0].innerHTML = "";
ui.$_el.append(`<img src="${src}" alt="Video" />`);
show (src) {
const ui = this
ui.$_el[0].innerHTML = ''
ui.$_el.append(`<img src="${src}" alt="Video" />`)
}
static dispose() {
console.log(`${NAME}: dispose`);
ui.$_el[0].innerHTML = ui.innerHTML;
static dispose () {
console.log(`${NAME}: dispose`)
ui.$_el[0].innerHTML = ui.innerHTML
}
static _jQueryInterface() {
static _jQueryInterface () {
return this.each((i, el) => {
// attach functionality to element
const $el = $(el);
let data = $el.data(DATA_KEY);
const $el = $(el)
let data = $el.data(DATA_KEY)
if (!data) {
data = new VideoPreviewUI(el);
$el.data(DATA_KEY, data);
data = new VideoPreviewUI(el)
$el.data(DATA_KEY, data)
}
});
})
}
}
// jQuery interface
$.fn[NAME] = VideoPreviewUI._jQueryInterface;
$.fn[NAME].Constructor = VideoPreviewUI;
$.fn[NAME] = VideoPreviewUI._jQueryInterface
$.fn[NAME].Constructor = VideoPreviewUI
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return VideoPreviewUI._jQueryInterface;
};
$.fn[NAME] = JQUERY_NO_CONFLICT
return VideoPreviewUI._jQueryInterface
}
// auto-apply
$(window).on(`${Events.LODEDANDREADY}`, () => {
console.log(`${NAME}: init`);
console.log(`${NAME}: init`)
$('[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";
import $ from "jquery";
'use strict'
import $ from 'jquery'
const G = window;
const D = document;
const G = window
const D = document
// remove browser default alerts
/*alert = function () {
/* alert = function () {
console.log(arguments);
console.log(new Error().stack);
};*/
}; */
/*G.addEventListener(G.visibilityChangeEvent, () => {
/* G.addEventListener(G.visibilityChangeEvent, () => {
if (currentPage && typeof currentPage !== 'undefined') {
if (
landingPage !== G.location.href &&
@ -23,4 +23,4 @@ const D = document;
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) {
if (typeof ga !== "function") {
return;
function _gaLt (event) {
if (typeof ga !== 'function') {
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) */
while (
el &&
(typeof el.tagName == "undefined" ||
el.tagName.toLowerCase() != "a" ||
(typeof el.tagName === 'undefined' ||
el.tagName.toLowerCase() != 'a' ||
!el.href)
) {
el = el.parentNode;
el = el.parentNode
}
if (el && el.href) {
/* link */
var link = el.href;
const link = el.href
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
/* external link */
/* HitCallback function to either open link in either same or new window */
var hitBack = function (link, target) {
target ? window.open(link, target) : (window.location.href = link);
};
const hitBack = function (link, target) {
target ? window.open(link, target) : (window.location.href = link)
}
/* Is target set and not _(self|parent|top)? */
var target =
const target =
el.target && !el.target.match(/^_(self|parent|top)$/i)
? el.target
: false;
: false
/* send event with callback */
ga(
"send",
"event",
"Outgoing Links",
'send',
'event',
'Outgoing Links',
link,
document.location.pathname + document.location.search,
{ hitCallback: hitBack(link, target) }
);
)
/* 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 */
var w = window;
const w = window
w.addEventListener
? w.addEventListener(
"load",
'load',
() => {
document.body.addEventListener("click", _gaLt, !1);
document.body.addEventListener('click', _gaLt, !1)
},
!1
)
: w.attachEvent &&
w.attachEvent("onload", () => {
document.body.attachEvent("onclick", _gaLt);
});
w.attachEvent('onload', () => {
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 = {
init: () => {
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
constructor(options) {
super();
const ui = this;
constructor (options) {
super()
const ui = this
ui.setMap(options.map);
ui.position = options.position;
ui.setMap(options.map)
ui.position = options.position
ui.html = options.html
? options.html
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
ui.divClass = options.divClass;
ui.align = options.align;
ui.isDebugMode = options.debug;
ui.onClick = options.onClick;
ui.onMouseOver = options.onMouseOver;
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
ui.divClass = options.divClass
ui.align = options.align
ui.isDebugMode = options.debug
ui.onClick = options.onClick
ui.onMouseOver = options.onMouseOver
ui.isBoolean = (arg) => {
if (typeof arg === "boolean") {
return true;
if (typeof arg === 'boolean') {
return true
} else {
return false;
return false
}
};
}
ui.isNotUndefined = (arg) => {
if (typeof arg !== "undefined") {
return true;
if (typeof arg !== 'undefined') {
return true
} else {
return false;
return false
}
};
}
ui.hasContent = (arg) => {
if (arg.length > 0) {
return true;
return true
} else {
return false;
return false
}
};
}
ui.isString = (arg) => {
if (typeof arg === "string") {
return true;
if (typeof arg === 'string') {
return true
} else {
return false;
return false
}
};
}
ui.isFunction = (arg) => {
if (typeof arg === "function") {
return true;
if (typeof arg === 'function') {
return true
} else {
return false;
return false
}
};
}
}
onAdd() {
const ui = this;
onAdd () {
const ui = this
// Create div element.
ui.div = document.createElement("div");
ui.div.style.position = "absolute";
ui.div = document.createElement('div')
ui.div.style.position = 'absolute'
// Validate and set custom div class
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
ui.div.className = ui.divClass;
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
// Validate and set custom HTML
if (
ui.isNotUndefined(ui.html) &&
ui.hasContent(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 (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
ui.div.className = "debug-mode";
ui.div.className = 'debug-mode'
ui.div.innerHTML =
'<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(
"style",
"position: absolute;" +
"border: 5px dashed red;" +
"height: 150px;" +
"width: 150px;" +
"display: flex;" +
"justify-content: center;" +
"align-items: center;"
);
'style',
'position: absolute;' +
'border: 5px dashed red;' +
'height: 150px;' +
'width: 150px;' +
'display: flex;' +
'justify-content: center;' +
'align-items: center;'
)
}
// Add element to clickable layer
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
ui.getPanes().overlayMouseTarget.appendChild(ui.div)
// Add listeners to the element.
google.maps.event.addDomListener(ui.div, "click", (event) => {
google.maps.event.trigger(ui, "click");
if (ui.isFunction(ui.onClick)) ui.onClick();
event.stopPropagation();
});
google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, 'click')
if (ui.isFunction(ui.onClick)) ui.onClick()
event.stopPropagation()
})
google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
google.maps.event.trigger(ui, "mouseover");
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation();
});
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, 'mouseover')
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
event.stopPropagation()
})
}
draw() {
const ui = this;
draw () {
const ui = this
// Calculate position of div
var positionInPixels = ui
const positionInPixels = ui
.getProjection()
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position));
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position))
// Align HTML overlay relative to original position
var divOffset = {
const divOffset = {
y: undefined,
x: undefined,
};
}
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
case "left top":
divOffset.y = ui.div.offsetHeight;
divOffset.x = ui.div.offsetWidth;
break;
case "left center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth;
break;
case "left bottom":
divOffset.y = 0;
divOffset.x = ui.div.offsetWidth;
break;
case "center top":
divOffset.y = ui.div.offsetHeight;
divOffset.x = ui.div.offsetWidth / 2;
break;
case "center center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth / 2;
break;
case "center bottom":
divOffset.y = 0;
divOffset.x = ui.div.offsetWidth / 2;
break;
case "right top":
divOffset.y = ui.div.offsetHeight;
divOffset.x = 0;
break;
case "right center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = 0;
break;
case "right bottom":
divOffset.y = 0;
divOffset.x = 0;
break;
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
case 'left top':
divOffset.y = ui.div.offsetHeight
divOffset.x = ui.div.offsetWidth
break
case 'left center':
divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth
break
case 'left bottom':
divOffset.y = 0
divOffset.x = ui.div.offsetWidth
break
case 'center top':
divOffset.y = ui.div.offsetHeight
divOffset.x = ui.div.offsetWidth / 2
break
case 'center center':
divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth / 2
break
case 'center bottom':
divOffset.y = 0
divOffset.x = ui.div.offsetWidth / 2
break
case 'right top':
divOffset.y = ui.div.offsetHeight
divOffset.x = 0
break
case 'right center':
divOffset.y = ui.div.offsetHeight / 2
divOffset.x = 0
break
case 'right bottom':
divOffset.y = 0
divOffset.x = 0
break
default:
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth / 2;
divOffset.y = ui.div.offsetHeight / 2
divOffset.x = ui.div.offsetWidth / 2
}
// Set position
ui.div.style.top = `${positionInPixels.y - divOffset.y}px`;
ui.div.style.left = `${positionInPixels.x - divOffset.x}px`;
ui.div.style.top = `${positionInPixels.y - divOffset.y}px`
ui.div.style.left = `${positionInPixels.x - divOffset.x}px`
}
getPosition() {
const ui = this;
return ui.position;
getPosition () {
const ui = this
return ui.position
}
getDiv() {
const ui = this;
return ui.div;
getDiv () {
const ui = this
return ui.div
}
setPosition(position, align) {
const ui = this;
ui.position = position;
ui.align = align;
ui.draw();
setPosition (position, align) {
const ui = this
ui.position = position
ui.align = align
ui.draw()
}
}
return GoogleMapsHtmlOverlay;
return GoogleMapsHtmlOverlay
},
};
}
export default Obj;
export default Obj

266
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 MarkerUI from "./_map.google.marker";
import Events from '../../_events'
import MarkerUI from './_map.google.marker'
const GoogleMapsDriver = (($) => {
class GoogleMapsDriver {
getName() {
return "GoogleMapsDriver";
getName () {
return 'GoogleMapsDriver'
}
init($el, config = []) {
const ui = this;
const W = window;
init ($el, config = []) {
const ui = this
const W = window
ui.$el = $el;
ui.config = config;
ui.markers = [];
ui.$el = $el
ui.config = config
ui.markers = []
W[`init${ui.getName()}`] = () => {
ui.googleApiLoaded();
};
ui.googleApiLoaded()
}
$("body").append(
$('body').append(
`<script async defer src="https://maps.googleapis.com/maps/api/js?key=${
config["key"]
config.key
}&callback=init${ui.getName()}"></script>`
);
)
}
googleApiLoaded() {
const ui = this;
googleApiLoaded () {
const ui = this
const $el = ui.$el;
const config = ui.config;
const $mapDiv = $el.find(".mapAPI-map");
const $el = ui.$el
const config = ui.config
const $mapDiv = $el.find('.mapAPI-map')
const zoom = config["mapZoom"] ? config["mapZoom"] : 10;
const center = config["center"]
const zoom = config.mapZoom ? config.mapZoom : 10
const center = config.center
? {
lat: config["center"][1],
lng: config["center"][0],
lat: config.center[1],
lng: config.center[0],
}
: {
lat: 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
ui.MarkerUI = MarkerUI.init($);
ui.MarkerUI = MarkerUI.init($)
ui.map = new google.maps.Map($mapDiv[0], {
zoom,
center,
fullscreenControl: true,
styles: style,
});
})
ui.default_zoom = zoom;
ui.default_zoom = zoom
$mapDiv.addClass("mapboxgl-map");
$mapDiv.addClass('mapboxgl-map')
ui.popup = new ui.MarkerUI({
map: ui.map,
align: ["center", "top"],
divClass: "mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none",
align: ['center', 'top'],
divClass: 'mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none',
html:
'<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="html"></div>' +
"</div>",
});
ui.popup.setMap(ui.map);
'</div>',
})
ui.popup.setMap(ui.map)
ui.geocoder = new google.maps.Geocoder();
ui.geocoder = new google.maps.Geocoder()
ui.cluster = new MarkerClusterer(ui.map, null, {
styles: [
{
width: 30,
height: 30,
className: "mapboxgl-cluster",
className: 'mapboxgl-cluster',
},
],
});
})
$el.trigger(Events.MAPAPILOADED);
$el.trigger(Events.MAPAPILOADED)
}
addMarker(crds, config) {
const ui = this;
addMarker (crds, config) {
const ui = this
const pos = {
lat: crds[1],
lng: crds[0],
};
}
const marker = new ui.MarkerUI({
position: pos,
map: ui.map,
align: ["center", "top"],
html: `<div class="mapboxgl-marker"><div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div></div>`,
align: ['center', 'top'],
html: `<div class="mapboxgl-marker"><div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div></div>`,
onClick: () => {
const $el = $(`#Marker${config["id"]}`);
ui.showPopup(pos, config["content"]);
const $el = $(`#Marker${config.id}`)
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) {
const ui = this;
const $popup = $(ui.popup.getDiv());
showPopup (pos, content) {
const ui = this
const $popup = $(ui.popup.getDiv())
if (ui.config["flyToMarker"]) {
ui.map.setCenter(pos); // panTo
if (!ui.config["noZoom"]) {
ui.map.setZoom(18);
if (ui.config.flyToMarker) {
ui.map.setCenter(pos) // panTo
if (!ui.config.noZoom) {
ui.map.setZoom(18)
}
}
// keep it hidden to render content
$popup.css({
opacity: "0",
});
$popup.removeClass("d-none");
opacity: '0',
})
$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) => {
e.preventDefault();
ui.hidePopup();
});
$popup.find('.mapboxgl-popup-close-button').on('click', (e) => {
e.preventDefault()
ui.hidePopup()
})
// set position when content was rendered
ui.popup.setPosition(pos, ["center", "top"]);
ui.popup.setPosition(pos, ['center', 'top'])
// display popup
$popup.css({
"margin-top": "-1rem",
opacity: "1",
});
'margin-top': '-1rem',
opacity: '1',
})
}
hidePopup() {
const ui = this;
const $popup = $(ui.popup.getDiv());
hidePopup () {
const ui = this
const $popup = $(ui.popup.getDiv())
$popup.addClass("d-none");
if (!ui.config["noRestoreBounds"] || ui.config["flyToBounds"]) {
ui.restoreBounds();
$popup.addClass('d-none')
if (!ui.config.noRestoreBounds || ui.config.flyToBounds) {
ui.restoreBounds()
}
ui.$el.trigger(Events.MAPPOPUPCLOSE);
ui.$el.trigger(Events.MAPPOPUPCLOSE)
}
geocode(addr, callback) {
const ui = this;
geocode (addr, callback) {
const ui = this
ui.geocoder.geocode(
{
address: addr,
},
(results, status) => {
if (status === "OK") {
//results[0].geometry.location;
if (status === 'OK') {
// results[0].geometry.location;
if (typeof callback === "function") {
callback(results);
if (typeof callback === 'function') {
callback(results)
}
return results;
return results
} else {
console.error(
`${ui.getName()}: Geocode was not successful for the following reason: ${status}`
);
)
}
}
);
)
}
reverseGeocode(latLng, callback) {
const ui = this;
reverseGeocode (latLng, callback) {
const ui = this
ui.geocoder.geocode(
{
location: latlng,
},
(results, status) => {
if (status === "OK") {
//results[0].formatted_address;
if (status === 'OK') {
// results[0].formatted_address;
if (typeof callback === "function") {
callback(results);
if (typeof callback === 'function') {
callback(results)
}
return results;
return results
} else {
console.error(
`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
);
)
}
}
);
)
}
addGeoJson(config) {
const ui = this;
addGeoJson (config) {
const ui = this
const firstMarker = config["geojson"].features[0].geometry.coordinates;
//Map.setCenter(firstMarker);
const bounds = new google.maps.LatLngBounds();
const firstMarker = config.geojson.features[0].geometry.coordinates
// Map.setCenter(firstMarker);
const bounds = new google.maps.LatLngBounds()
// add markers to map
config["geojson"].features.forEach((marker) => {
const id = marker.id;
const crds = marker.geometry.coordinates;
const content = marker.properties.content;
config.geojson.features.forEach((marker) => {
const id = marker.id
const crds = marker.geometry.coordinates
const content = marker.properties.content
ui.addMarker(crds, {
id,
content,
icon: marker.icon,
flyToMarker: config["flyToMarker"],
});
flyToMarker: config.flyToMarker,
})
bounds.extend({
lat: crds[1],
lng: crds[0],
});
});
})
})
if (ui.markers.length > 1) {
ui.map.fitBounds(bounds, {
padding: 30,
}); //panToBounds
}) // panToBounds
} 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_zoom = ui.map.getZoom();
ui.default_bounds = bounds
ui.default_zoom = ui.map.getZoom()
}
getMap() {
const ui = this;
return ui.map;
getMap () {
const ui = this
return ui.map
}
getPopup() {
const ui = this;
return ui.popup;
getPopup () {
const ui = this
return ui.popup
}
restoreBounds() {
const ui = this;
restoreBounds () {
const ui = this
if (ui.default_bounds && ui.markers.length > 1) {
ui.map.fitBounds(ui.default_bounds, {
padding: 30,
}); //panToBounds
}) // panToBounds
} else {
if (ui.markers[0]) {
ui.map.setCenter(ui.markers[0].getPosition());
ui.map.setCenter(ui.markers[0].getPosition())
}
ui.restoreZoom();
ui.restoreZoom()
}
}
restoreZoom() {
const ui = this;
restoreZoom () {
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 = {
init: () => {
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
constructor(options) {
super();
const ui = this;
constructor (options) {
super()
const ui = this
ui.ownerMap = options.map;
//ui.setMap(options.map);
ui.position = options.position;
ui.ownerMap = options.map
// ui.setMap(options.map);
ui.position = options.position
ui.html = options.html
? options.html
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
ui.divClass = options.divClass;
ui.align = options.align;
ui.isDebugMode = options.debug;
ui.onClick = options.onClick;
ui.onMouseOver = options.onMouseOver;
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
ui.divClass = options.divClass
ui.align = options.align
ui.isDebugMode = options.debug
ui.onClick = options.onClick
ui.onMouseOver = options.onMouseOver
ui.isBoolean = (arg) => {
if (typeof arg === "boolean") {
return true;
if (typeof arg === 'boolean') {
return true
} else {
return false;
return false
}
};
}
ui.isNotUndefined = (arg) => {
if (typeof arg !== "undefined") {
return true;
if (typeof arg !== 'undefined') {
return true
} else {
return false;
return false
}
};
}
ui.hasContent = (arg) => {
if (arg.length > 0) {
return true;
return true
} else {
return false;
return false
}
};
}
ui.isString = (arg) => {
if (typeof arg === "string") {
return true;
if (typeof arg === 'string') {
return true
} else {
return false;
return false
}
};
}
ui.isFunction = (arg) => {
if (typeof arg === "function") {
return true;
if (typeof arg === 'function') {
return true
} else {
return false;
return false
}
};
}
}
onAdd() {
const ui = this;
onAdd () {
const ui = this
// Create div element.
ui.div = document.createElement("div");
ui.div.style.position = "absolute";
ui.div = document.createElement('div')
ui.div.style.position = 'absolute'
// Validate and set custom div class
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
ui.div.className = ui.divClass;
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
// Validate and set custom HTML
if (
ui.isNotUndefined(ui.html) &&
ui.hasContent(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 (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
ui.div.className = "debug-mode";
ui.div.className = 'debug-mode'
ui.div.innerHTML =
'<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(
"style",
"position: absolute;" +
"border: 5px dashed red;" +
"height: 150px;" +
"width: 150px;" +
"display: flex;" +
"justify-content: center;" +
"align-items: center;"
);
'style',
'position: absolute;' +
'border: 5px dashed red;' +
'height: 150px;' +
'width: 150px;' +
'display: flex;' +
'justify-content: center;' +
'align-items: center;'
)
}
// Add element to clickable layer
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
ui.getPanes().overlayMouseTarget.appendChild(ui.div)
// Add listeners to the element.
google.maps.event.addDomListener(ui.div, "click", (event) => {
google.maps.event.trigger(ui, "click");
if (ui.isFunction(ui.onClick)) ui.onClick();
event.stopPropagation();
});
google.maps.event.addDomListener(ui.div, 'click', (event) => {
google.maps.event.trigger(ui, 'click')
if (ui.isFunction(ui.onClick)) ui.onClick()
event.stopPropagation()
})
google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
google.maps.event.trigger(ui, "mouseover");
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation();
});
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
google.maps.event.trigger(ui, 'mouseover')
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
event.stopPropagation()
})
}
draw() {
const ui = this;
draw () {
const ui = this
let $div = $(ui.div).find(
".mapboxgl-marker,.marker-pin,.mapboxgl-popup,.popup"
);
'.mapboxgl-marker,.marker-pin,.mapboxgl-popup,.popup'
)
if (!$div.length) {
$div = $(ui.div);
$div = $(ui.div)
}
// Calculate position of div
const projection = ui.getProjection();
const projection = ui.getProjection()
if (!projection) {
console.log("GoogleMapsHtmlOverlay: current map is missing");
return null;
console.log('GoogleMapsHtmlOverlay: current map is missing')
return null
}
const positionInPixels = projection.fromLatLngToDivPixel(
ui.getPosition()
);
)
// Align HTML overlay relative to original position
const offset = {
y: undefined,
x: undefined,
};
const divWidth = $div.outerWidth();
const divHeight = $div.outerHeight();
}
const divWidth = $div.outerWidth()
const divHeight = $div.outerHeight()
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
case "left top":
offset.y = divHeight;
offset.x = divWidth;
break;
case "left center":
offset.y = divHeight / 2;
offset.x = divWidth;
break;
case "left bottom":
offset.y = 0;
offset.x = divWidth;
break;
case "center top":
offset.y = divHeight;
offset.x = divWidth / 2;
break;
case "center center":
offset.y = divHeight / 2;
offset.x = divWidth / 2;
break;
case "center bottom":
offset.y = 0;
offset.x = divWidth / 2;
break;
case "right top":
offset.y = divHeight;
offset.x = 0;
break;
case "right center":
offset.y = divHeight / 2;
offset.x = 0;
break;
case "right bottom":
offset.y = 0;
offset.x = 0;
break;
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
case 'left top':
offset.y = divHeight
offset.x = divWidth
break
case 'left center':
offset.y = divHeight / 2
offset.x = divWidth
break
case 'left bottom':
offset.y = 0
offset.x = divWidth
break
case 'center top':
offset.y = divHeight
offset.x = divWidth / 2
break
case 'center center':
offset.y = divHeight / 2
offset.x = divWidth / 2
break
case 'center bottom':
offset.y = 0
offset.x = divWidth / 2
break
case 'right top':
offset.y = divHeight
offset.x = 0
break
case 'right center':
offset.y = divHeight / 2
offset.x = 0
break
case 'right bottom':
offset.y = 0
offset.x = 0
break
default:
offset.y = divHeight / 2;
offset.x = divWidth / 2;
break;
offset.y = divHeight / 2
offset.x = divWidth / 2
break
}
// Set position
ui.div.style.top = `${positionInPixels.y - offset.y}px`;
ui.div.style.left = `${positionInPixels.x - offset.x}px`;
ui.div.style.top = `${positionInPixels.y - offset.y}px`
ui.div.style.left = `${positionInPixels.x - offset.x}px`
}
getPosition() {
const ui = this;
return new google.maps.LatLng(ui.position);
getPosition () {
const ui = this
return new google.maps.LatLng(ui.position)
}
getDiv() {
const ui = this;
return ui.div;
getDiv () {
const ui = this
return ui.div
}
setPosition(position, align) {
const ui = this;
ui.position = position;
ui.align = align;
ui.draw();
setPosition (position, align) {
const ui = this
ui.position = position
ui.align = align
ui.draw()
}
remove() {
const ui = this;
ui.setMap(null);
ui.div.remove();
remove () {
const ui = this
ui.setMap(null)
ui.div.remove()
}
// emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus)
getDraggable() {
return false;
getDraggable () {
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 mapBoxGL from "mapbox-gl";
import $ from 'jquery'
import mapBoxGL from 'mapbox-gl'
import Events from "../../_events";
import Events from '../../_events'
const MapBoxDriver = (($) => {
class MapBoxDriver {
getName() {
return "MapBoxDriver";
getName () {
return 'MapBoxDriver'
}
init($el, config = []) {
const ui = this;
init ($el, config = []) {
const ui = this
mapBoxGL.accessToken = config["key"];
mapBoxGL.accessToken = config.key
ui.map = new mapBoxGL.Map({
container: $el.find(".mapAPI-map")[0],
center: config["center"] ? config["center"] : [0, 0],
//hash: true,
style: config["style"]
? config["style"]
: "mapbox://styles/mapbox/streets-v9",
localIdeographFontFamily: config["font-family"],
zoom: config["mapZoom"] ? config["mapZoom"] : 10,
container: $el.find('.mapAPI-map')[0],
center: config.center ? config.center : [0, 0],
// hash: true,
style: config.style
? config.style
: 'mapbox://styles/mapbox/streets-v9',
localIdeographFontFamily: config['font-family'],
zoom: config.mapZoom ? config.mapZoom : 10,
attributionControl: false,
antialias: true,
accessToken: config["key"],
accessToken: config.key,
})
.addControl(
new mapBoxGL.AttributionControl({
compact: true,
})
)
.addControl(new mapBoxGL.NavigationControl(), "top-right")
.addControl(new mapBoxGL.NavigationControl(), 'top-right')
.addControl(
new mapBoxGL.GeolocateControl({
positionOptions: {
@ -42,58 +42,58 @@ const MapBoxDriver = (($) => {
},
trackUserLocation: true,
}),
"bottom-right"
'bottom-right'
)
.addControl(
new mapBoxGL.ScaleControl({
maxWidth: 80,
unit: "metric",
unit: 'metric',
}),
"top-left"
'top-left'
)
.addControl(new mapBoxGL.FullscreenControl());
.addControl(new mapBoxGL.FullscreenControl())
ui.map.on("load", (e) => {
$el.trigger(Events.MAPAPILOADED);
});
ui.map.on('load', (e) => {
$el.trigger(Events.MAPAPILOADED)
})
ui.popup = new mapBoxGL.Popup({
closeOnClick: false,
className: "popup",
});
className: 'popup',
})
}
addMarker(crds, config) {
const ui = this;
addMarker (crds, config) {
const ui = this
// create a DOM el for the marker
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) => {
ui.popup.setLngLat(crds).setHTML(config["content"]).addTo(ui.map);
$el.on('click', (e) => {
ui.popup.setLngLat(crds).setHTML(config.content).addTo(ui.map)
if (config["flyToMarker"]) {
if (config.flyToMarker) {
ui.map.flyTo({
center: crds,
zoom: 17,
});
})
}
$(e.currentTarget).trigger(Events.MAPMARKERCLICK);
});
$(e.currentTarget).trigger(Events.MAPMARKERCLICK)
})
// 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) {
const ui = this;
addGeoJson (config) {
const ui = this
// Insert the layer beneath any symbol layer.
/*if (config['3d']) {
/* if (config['3d']) {
const layers = Map.getStyle().layers;
let labelLayerId;
for (let i = 0; i < layers.length; i++) {
@ -130,55 +130,55 @@ const MapBoxDriver = (($) => {
'fill-extrusion-opacity': .6,
},
}, labelLayerId);
}*/
} */
const firstMarker = config["geojson"].features[0].geometry.coordinates;
//Map.setCenter(firstMarker);
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker);
const firstMarker = config.geojson.features[0].geometry.coordinates
// Map.setCenter(firstMarker);
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker)
// add markers to map
config["geojson"].features.forEach((marker) => {
const id = marker.id;
const crds = marker.geometry.coordinates;
const content = marker.properties.content;
config.geojson.features.forEach((marker) => {
const id = marker.id
const crds = marker.geometry.coordinates
const content = marker.properties.content
ui.addMarker(crds, {
id,
content,
icon: marker.icon,
flyToMarker: config["flyToMarker"],
});
flyToMarker: config.flyToMarker,
})
bounds.extend(crds);
});
bounds.extend(crds)
})
ui.map.fitBounds(bounds, {
padding: 30,
});
})
ui.popup.on("close", (e) => {
if (config["flyToBounds"]) {
ui.popup.on('close', (e) => {
if (config.flyToBounds) {
ui.map.fitBounds(bounds, {
padding: 30,
});
})
}
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE);
});
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE)
})
}
getMap() {
const ui = this;
return ui.map;
getMap () {
const ui = this
return ui.map
}
getPopup() {
const ui = this;
return ui.popup;
getPopup () {
const ui = this
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 = {
_events: {},
on: function (event, action) {
console.log(`event.on: ${event}`);
console.log(`event.on: ${event}`)
if (!(event in this._events)) {
this._events[event] = [];
this._events[event] = []
}
this._events[event].push(action);
return this;
this._events[event].push(action)
return this
},
off: function (event) {
console.log(`event.off: ${event}`);
delete this._events[event];
return this;
console.log(`event.off: ${event}`)
delete this._events[event]
return this
},
fire: function (event) {
console.log(`event.fire: ${event}`);
var events = this._events;
console.log(`event.fire: ${event}`)
const events = this._events
if (event in events) {
var actions = events[event];
var args = Array.prototype.slice.call(arguments, 1);
for (var i = 0, l = actions.length; i < l; i++) {
var action = actions[i];
const actions = events[event]
const args = Array.prototype.slice.call(arguments, 1)
for (let i = 0, l = actions.length; i < l; i++) {
const action = actions[i]
if (action instanceof Function) {
action.apply(null, args);
action.apply(null, args)
} else {
this.fire.apply(this, [action].concat(args));
this.fire.apply(this, [action].concat(args))
}
}
}
return this;
return this
},
};
(function (window, emr, undefined) {
var getIndexedDBStorage = function () {
var indexedDB =
const getIndexedDBStorage = function () {
const indexedDB =
window.indexedDB ||
window.mozIndexedDB ||
window.webkitIndexedDB ||
window.msIndexedDB;
window.msIndexedDB
var IndexedDBImpl = function () {
var self = this;
var db = null;
var request = indexedDB.open("TileStorage");
const IndexedDBImpl = function () {
const self = this
let db = null
const request = indexedDB.open('TileStorage')
request.onsuccess = function () {
db = this.result;
emr.fire("storageLoaded", self);
};
db = this.result
emr.fire('storageLoaded', self)
}
request.onerror = function (error) {
console.log(error);
};
console.log(error)
}
request.onupgradeneeded = function () {
var store = this.result.createObjectStore("tile", { keyPath: "key" });
store.createIndex("key", "key", { unique: true });
};
const store = this.result.createObjectStore('tile', { keyPath: 'key' })
store.createIndex('key', 'key', { unique: true })
}
this.add = function (key, value) {
var transaction = db.transaction(["tile"], "readwrite");
var objectStore = transaction.objectStore("tile");
objectStore.put({ key, value });
};
const transaction = db.transaction(['tile'], 'readwrite')
const objectStore = transaction.objectStore('tile')
objectStore.put({ key, value })
}
this.delete = function (key) {
var transaction = db.transaction(["tile"], "readwrite");
var objectStore = transaction.objectStore("tile");
objectStore.delete(key);
};
const transaction = db.transaction(['tile'], 'readwrite')
const objectStore = transaction.objectStore('tile')
objectStore.delete(key)
}
this.get = function (key, successCallback, errorCallback) {
var transaction = db.transaction(["tile"], "readonly");
var objectStore = transaction.objectStore("tile");
var result = objectStore.get(key);
const transaction = db.transaction(['tile'], 'readonly')
const objectStore = transaction.objectStore('tile')
const result = objectStore.get(key)
result.onsuccess = function () {
successCallback(this.result ? this.result.value : undefined);
};
result.onerror = errorCallback;
};
};
successCallback(this.result ? this.result.value : undefined)
}
result.onerror = errorCallback
}
}
return indexedDB ? new IndexedDBImpl() : null;
};
return indexedDB ? new IndexedDBImpl() : null
}
var getWebSqlStorage = function () {
var openDatabase = window.openDatabase;
const getWebSqlStorage = function () {
const openDatabase = window.openDatabase
var WebSqlImpl = function () {
var self = this;
var db = openDatabase(
"TileStorage",
"1.0",
"Tile Storage",
const WebSqlImpl = function () {
const self = this
const db = openDatabase(
'TileStorage',
'1.0',
'Tile Storage',
5 * 1024 * 1024
);
)
db.transaction((tx) => {
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) {
db.transaction((tx) => {
tx.executeSql("INSERT INTO tile (key, value) VALUES (?, ?)", [
tx.executeSql('INSERT INTO tile (key, value) VALUES (?, ?)', [
key,
value,
]);
});
};
])
})
}
this.delete = function (key) {
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) {
db.transaction((tx) => {
tx.executeSql(
"SELECT value FROM tile WHERE key = ?",
'SELECT value FROM tile WHERE key = ?',
[key],
(tx, result) => {
successCallback(
result.rows.length ? result.rows.item(0).value : undefined
);
)
},
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);
(function (window, emr, mapbox, MM, undefined) {
var StorageRequestManager = function (storage) {
MM.RequestManager.apply(this, []);
this._storage = storage;
};
const StorageRequestManager = function (storage) {
MM.RequestManager.apply(this, [])
this._storage = storage
}
StorageRequestManager.prototype._imageToDataUri = function (image) {
var canvas = window.document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const canvas = window.document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
const context = canvas.getContext('2d')
context.drawImage(image, 0, 0)
return canvas.toDataURL("image/png");
};
return canvas.toDataURL('image/png')
}
StorageRequestManager.prototype._createTileImage = function (
id,
@ -180,140 +180,140 @@ window.offlineMaps.eventManager = {
value,
cache
) {
var img = window.document.createElement("img");
img.id = id;
img.style.position = "absolute";
img.coord = coord;
this.loadingBay.appendChild(img);
const img = window.document.createElement('img')
img.id = id
img.style.position = 'absolute'
img.coord = coord
this.loadingBay.appendChild(img)
if (cache) {
img.onload = this.getLoadCompleteWithCache();
img.crossOrigin = "Anonymous";
img.onload = this.getLoadCompleteWithCache()
img.crossOrigin = 'Anonymous'
} 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) {
var self = this;
const self = this
if (this._storage) {
this._storage.get(
id,
(value) => {
if (value) {
self._createTileImage(id, coord, value, false);
self._createTileImage(id, coord, value, false)
} 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 {
self._createTileImage(id, coord, url, false);
self._createTileImage(id, coord, url, false)
}
};
}
StorageRequestManager.prototype.processQueue = function (sortFunc) {
if (sortFunc && this.requestQueue.length > 8) {
this.requestQueue.sort(sortFunc);
this.requestQueue.sort(sortFunc)
}
while (
this.openRequestCount < this.maxOpenRequests &&
this.requestQueue.length > 0
) {
var request = this.requestQueue.pop();
let request = this.requestQueue.pop()
if (request) {
this.openRequestCount++;
this._loadTile(request.id, request.coord, request.url);
request = request.id = request.coord = request.url = null;
this.openRequestCount++
this._loadTile(request.id, request.coord, request.url)
request = request.id = request.coord = request.url = null
}
}
};
}
StorageRequestManager.prototype.getLoadCompleteWithCache = function () {
if (!this._loadComplete) {
var theManager = this;
const theManager = this
this._loadComplete = function (e) {
//e = e || window.event;
// e = e || window.event;
var img = e.srcElement || e.target;
img.onload = img.onerror = null;
const img = e.srcElement || e.target
img.onload = img.onerror = null
if (theManager._storage) {
theManager._storage.add(this.id, theManager._imageToDataUri(this));
theManager._storage.add(this.id, theManager._imageToDataUri(this))
}
theManager.loadingBay.removeChild(img);
theManager.openRequestCount--;
delete theManager.requestsById[img.id];
theManager.loadingBay.removeChild(img)
theManager.openRequestCount--
delete theManager.requestsById[img.id]
if (
e.type === "load" &&
(img.complete || (img.readyState && img.readyState === "complete"))
e.type === 'load' &&
(img.complete || (img.readyState && img.readyState === 'complete'))
) {
theManager.dispatchCallback("requestcomplete", img);
theManager.dispatchCallback('requestcomplete', img)
} else {
theManager.dispatchCallback("requesterror", {
theManager.dispatchCallback('requesterror', {
element: img,
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) {
this.parent = parent || document.createElement("div");
const StorageLayer = function (provider, parent, name, storage) {
this.parent = parent || document.createElement('div')
this.parent.style.cssText =
"position: absolute; top: 0px; left: 0px;" +
"width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0";
this.name = name;
this.levels = {};
this.requestManager = new StorageRequestManager(storage);
this.requestManager.addCallback("requestcomplete", this.getTileComplete());
this.requestManager.addCallback("requesterror", this.getTileError());
'position: absolute; top: 0px; left: 0px;' +
'width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0'
this.name = name
this.levels = {}
this.requestManager = new StorageRequestManager(storage)
this.requestManager.addCallback('requestcomplete', this.getTileComplete())
this.requestManager.addCallback('requesterror', this.getTileError())
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(
new MM.Template(template, subdomains),
null,
name,
storage
);
};
)
}
emr.on("mapLoad", (storage) => {
var map = mapbox.map("map");
emr.on('mapLoad', (storage) => {
const map = mapbox.map('map')
map.addLayer(
new StorageTemplatedLayer(
"http://{S}.tile.osm.org/{Z}/{X}/{Y}.png",
["a", "b", "c"],
'http://{S}.tile.osm.org/{Z}/{X}/{Y}.png',
['a', 'b', 'c'],
undefined,
storage
)
);
map.ui.zoomer.add();
map.ui.zoombox.add();
map.centerzoom({ lat: 53.902254, lon: 27.56185 }, 13);
});
)
map.ui.zoomer.add()
map.ui.zoombox.add()
map.centerzoom({ lat: 53.902254, lon: 27.56185 }, 13)
})
})(window, window.offlineMaps.eventManager, mapbox, MM);
(function (emr) {
emr.on("storageLoaded", "mapLoad");
emr.fire("storageLoad");
})(window.offlineMaps.eventManager);
emr.on('storageLoaded', 'mapLoad')
emr.fire('storageLoad')
})(window.offlineMaps.eventManager)

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

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

10
src/js_old/_consts.js
View File

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

76
src/js_old/_events.js
View File

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

72
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
*/
const EventsUI = (($) => {
const on = $.fn.on;
const off = $.fn.off;
const on = $.fn.on
const off = $.fn.off
// Constants
const W = window;
const $W = $(W);
const D = document;
const $Body = $("body");
const W = window
const $W = $(W)
const D = document
const $Body = $('body')
const NAME = "EventsUI";
const NAME = 'EventsUI'
class EventsUI {
static process(el, args) {
let modEl = el;
const eventName = args[0];
const tagName = typeof el !== undefined ? $(el).prop("tagName") : null;
static process (el, args) {
let modEl = el
const eventName = args[0]
const tagName = typeof el !== undefined ? $(el).prop('tagName') : null
switch (tagName) {
case "HTML":
case "BODY":
modEl = $W;
break;
case 'HTML':
case 'BODY':
modEl = $W
break
}
return [modEl, args];
return [modEl, args]
}
}
// rewrite jQuery functions
$.fn.on = function () {
const result = EventsUI.process(this, arguments);
return on.apply(...result);
};
const result = EventsUI.process(this, arguments)
return on.apply(...result)
}
$.fn.off = function () {
const result = EventsUI.process(this, arguments);
return off.apply(...result);
};
const result = EventsUI.process(this, arguments)
return off.apply(...result)
}
const scrollTop = $.fn.scrollTop;
const scrollTop = $.fn.scrollTop
// rewrite scrollTop
$.fn.scrollTop = function () {
let el = this;
const args = arguments;
let el = this
const args = arguments
const tagName = typeof el !== undefined ? $(el).prop("tagName") : null;
const tagName = typeof el !== undefined ? $(el).prop('tagName') : null
switch (tagName) {
case "HTML":
case "BODY":
el = $W;
break;
case 'HTML':
case 'BODY':
el = $W
break
}
return scrollTop.apply(el, args);
};
})($);
return scrollTop.apply(el, args)
}
})($)
export default EventsUI;
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 = (($) => {
// Constants
const W = window;
const D = document;
const $Body = $("body");
const W = window
const D = document
const $Body = $('body')
const NAME = "LayoutUI";
const NAME = 'LayoutUI'
const datepickerOptions = {
autoclose: true,
startDate: 0,
//todayBtn: true,
// todayBtn: true,
todayHighlight: true,
clearBtn: true,
};
}
class LayoutUI {
static init() {
const ui = this;
ui.dispose();
static init () {
const ui = this
ui.dispose()
console.log(`Initializing: ${NAME}`);
console.log(`Initializing: ${NAME}`)
// your custom UI
// Custom fonts
$Body.append(
'<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('send', 'pageview');
});*/
}); */
// Fire further js when layout is ready
$(W).trigger(Events.LODEDANDREADY);
$(W).trigger(Events.LODEDANDREADY)
}
static dispose() {
console.log(`Destroying: ${NAME}`);
static dispose () {
console.log(`Destroying: ${NAME}`)
}
}
$(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

648
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 Consts from "./_consts";
import Events from './_events'
import Consts from './_consts'
import EventsRouter from "./_events.router";
import Spinner from "./_components/_ui.spinner";
import EventsRouter from './_events.router'
import Spinner from './_components/_ui.spinner'
// AJAX functionality
import AjaxUI from "./_components/_ui.ajax";
import AjaxUI from './_components/_ui.ajax'
import FormBasics from "./_components/_ui.form.basics";
import HeaderUI from "./_components/_ui.header-footer";
import FormBasics from './_components/_ui.form.basics'
import HeaderUI from './_components/_ui.header-footer'
import SmoothScroll from "smooth-scroll";
const smoothScroll = SmoothScroll();
import SmoothScroll from 'smooth-scroll'
const smoothScroll = SmoothScroll()
const MainUI = (($) => {
// Constants
const W = window;
const $W = $(W);
const D = document;
const $Body = $("body");
const W = window
const $W = $(W)
const D = document
const $Body = $('body')
const NAME = "MainUI";
const NAME = 'MainUI'
console.clear();
console.clear()
console.info(
`%cUI Kit ${UINAME} ${UIVERSION}`,
"color:yellow;font-size:14px"
);
'color:yellow;font-size:14px'
)
console.info(
`%c${UIMetaNAME} ${UIMetaVersion}`,
"color:yellow;font-size:12px"
);
'color:yellow;font-size:12px'
)
console.info(
`%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) => {
console.info(`${k}: ${Events[k]}`);
});
console.groupEnd("Events");
console.info(`${k}: ${Events[k]}`)
})
console.groupEnd('Events')
console.groupCollapsed("Consts");
console.groupCollapsed('Consts')
Object.keys(Consts).forEach((k) => {
console.info(`${k}: ${Consts[k]}`);
});
console.groupEnd("Events");
console.info(`${k}: ${Consts[k]}`)
})
console.groupEnd('Events')
console.groupCollapsed("Init");
console.time("init");
console.groupCollapsed('Init')
console.time('init')
$W.on(`${Events.LODEDANDREADY}`, () => {
console.groupEnd("Init");
console.timeEnd("init");
console.groupEnd('Init')
console.timeEnd('init')
console.time("Post-init");
console.groupCollapsed("Post-init");
});
console.time('Post-init')
console.groupCollapsed('Post-init')
})
// get browser locale
//const Locale = $('html').attr('lang').substring(0, 2);
// const Locale = $('html').attr('lang').substring(0, 2);
const $AlertNotify = $("#AlertNotify");
const $SiteWideMessage = $("#SiteWideMessage");
const $AlertNotify = $('#AlertNotify')
const $SiteWideMessage = $('#SiteWideMessage')
// get browser window visibility preferences
// Opera 12.10, Firefox >=18, Chrome >=31, IE11
const HiddenName = "hidden";
const VisibilityChangeEvent = "visibilitychange";
const HiddenName = 'hidden'
const VisibilityChangeEvent = 'visibilitychange'
// update visibility state
D.addEventListener(VisibilityChangeEvent, () => {
if (D.visibilityState === HiddenName) {
console.log(`${NAME}: Tab: hidden`);
$Body.addClass("is-hidden");
$Body.trigger(Events.TABHIDDEN);
$W.trigger(Events.TABHIDDEN);
console.log(`${NAME}: Tab: hidden`)
$Body.addClass('is-hidden')
$Body.trigger(Events.TABHIDDEN)
$W.trigger(Events.TABHIDDEN)
} else {
console.log(`${NAME}: Tab: focused`);
$Body.removeClass("is-hidden");
$Body.trigger(Events.TABFOCUSED);
$W.trigger(Events.TABFOCUSED);
console.log(`${NAME}: Tab: focused`)
$Body.removeClass('is-hidden')
$Body.trigger(Events.TABFOCUSED)
$W.trigger(Events.TABFOCUSED)
}
});
})
// session ping
let pingInterval;
let pingLock = false;
let pingInterval
let pingLock = false
const sessionPing = () => {
if (pingLock || $Body.hasClass("is-offline")) {
return;
if (pingLock || $Body.hasClass('is-offline')) {
return
}
console.log(`${NAME}: session ping`);
pingLock = true;
console.log(`${NAME}: session ping`)
pingLock = true
$.ajax({
sync: false,
async: true,
cache: false,
url: "/Security/ping",
url: '/Security/ping',
global: false,
type: "POST",
type: 'POST',
complete: (data, datastatus) => {
updateOnlineStatus();
if (datastatus !== "success") {
console.warn(`${NAME}: ping failed`);
updateOnlineStatus()
if (datastatus !== 'success') {
console.warn(`${NAME}: ping failed`)
clearInterval(pingInterval);
pingInterval = null;
clearInterval(pingInterval)
pingInterval = null
}
pingLock = false;
pingLock = false
},
});
};
})
}
// update online/offline state
let statusLock = false;
let statusLock = false
const updateOnlineStatus = () => {
if (statusLock) {
return;
return
}
statusLock = true;
statusLock = true
if (typeof navigator.onLine === "undefined") {
return false;
if (typeof navigator.onLine === 'undefined') {
return false
}
if (!navigator.onLine) {
console.log(`${NAME}: Offline`);
console.log(`${NAME}: Offline`)
clearInterval(pingInterval);
pingInterval = null;
clearInterval(pingInterval)
pingInterval = null
$Body.addClass("is-offline");
$Body.removeClass("is-online");
$Body.addClass('is-offline')
$Body.removeClass('is-online')
$Body.trigger(Events.OFFLINE);
$W.trigger(Events.OFFLINE);
$Body.trigger(Events.OFFLINE)
$W.trigger(Events.OFFLINE)
statusLock = false;
return true;
statusLock = false
return true
}
if (!pingInterval) {
pingInterval = setInterval(sessionPing, 300000); // 5 min in ms
pingInterval = setInterval(sessionPing, 300000) // 5 min in ms
}
if ($Body.hasClass("is-offline")) {
sessionPing();
if ($Body.hasClass('is-offline')) {
sessionPing()
console.log(`${NAME}: is back online`);
$Body.trigger(Events.BACKONLINE);
console.log(`${NAME}: is back online`)
$Body.trigger(Events.BACKONLINE)
} else {
console.log(`${NAME}: Online`);
console.log(`${NAME}: Online`)
}
$Body.addClass("is-online");
$Body.removeClass("is-offline");
$Body.addClass('is-online')
$Body.removeClass('is-offline')
$Body.trigger(Events.ONLINE);
$W.trigger(Events.ONLINE);
$Body.trigger(Events.ONLINE)
$W.trigger(Events.ONLINE)
statusLock = false;
return true;
};
statusLock = false
return true
}
W.addEventListener(
`${Events.OFFLINE}`,
() => {
updateOnlineStatus();
updateOnlineStatus()
},
false
);
)
W.addEventListener(
`${Events.ONLINE}`,
() => {
updateOnlineStatus();
updateOnlineStatus()
},
false
);
)
$W.on(`${Events.LOADED} ${Events.AJAX}`, () => {
updateOnlineStatus();
});
updateOnlineStatus()
})
// scrollTo
const ScrollTo = (trigger, selector) => {
smoothScroll.animateScroll(D.querySelector(selector), trigger, {
speed: 500,
offset: -20,
//easing: 'easeInOutCubic',
// easing: 'easeInOutCubic',
// Callback API
//before: (anchor, toggle) => {}, // Callback to run before scroll
//`after: (anchor, toggle) => {} // Callback to run after scroll
});
};
// before: (anchor, toggle) => {}, // Callback to run before scroll
// `after: (anchor, toggle) => {} // Callback to run after scroll
})
}
W.URLDetails = {
base: $("base").attr("href"),
relative: "/",
hash: "",
};
base: $('base').attr('href'),
relative: '/',
hash: '',
}
let eventFired = false;
let eventFired = false
const setTouchScreen = (bool) => {
if (W.IsTouchScreen === bool || eventFired) {
return;
return
}
eventFired = true;
eventFired = true
W.IsTouchScreen = bool;
$.support.touch = W.IsTouchScreen;
W.IsTouchScreen = bool
$.support.touch = W.IsTouchScreen
if (bool) {
console.log(`${NAME}: Touch screen enabled`);
$Body.trigger(Events.TOUCHENABLE);
$W.trigger(Events.TOUCHENABLE);
console.log(`${NAME}: Touch screen enabled`)
$Body.trigger(Events.TOUCHENABLE)
$W.trigger(Events.TOUCHENABLE)
} else {
console.log(`${NAME}: Touch screen disabled`);
$Body.trigger(Events.TOUCHDISABLED);
$W.trigger(Events.TOUCHDISABLED);
console.log(`${NAME}: Touch screen disabled`)
$Body.trigger(Events.TOUCHDISABLED)
$W.trigger(Events.TOUCHDISABLED)
}
// prevent firing touch and mouse events together
setTimeout(() => {
eventFired = false;
}, 200);
};
eventFired = false
}, 200)
}
setTouchScreen("ontouchstart" in window || navigator.msMaxTouchPoints > 0);
setTouchScreen('ontouchstart' in window || navigator.msMaxTouchPoints > 0)
// disable touch on mouse events
/*D.addEventListener('mousemove', () => {
/* D.addEventListener('mousemove', () => {
setTouchScreen(false);
});
D.addEventListener('mousedown', () => {
setTouchScreen(false);
});*/
}); */
// enable touch screen on touch events
D.addEventListener("touchmove", () => {
setTouchScreen(true);
});
D.addEventListener("touchstart", () => {
setTouchScreen(true);
});
D.addEventListener('touchmove', () => {
setTouchScreen(true)
})
D.addEventListener('touchstart', () => {
setTouchScreen(true)
})
class MainUI {
// Static methods
static init() {
const ui = this;
ui.dispose();
static init () {
const ui = this
ui.dispose()
console.log(`${NAME}: init`);
console.log(`${NAME}: init`)
// update location details
ui.updateLocation();
ui.updateLocation()
// mark available offline areas
if ("caches" in W) {
$("a.offline").addClass("offline-available");
if ('caches' in W) {
$('a.offline').addClass('offline-available')
}
ui.loadImages();
ui.loadImages()
// detect bootstrap screen size
ui.detectBootstrapScreenSize();
ui.detectBootstrapScreenSize()
// mark external links
$('a.external,a[rel="external"]').attr("target", "_blank");
$('a.external,a[rel="external"]').attr('target', '_blank')
// show encoded emails
/*$(D).find('.obm').each(() => {
/* $(D).find('.obm').each(() => {
if ($(this).attr('data-val') !== undefined) {
const email = $(this).attr('data-val').split('')
.reverse()
@ -300,351 +300,351 @@ const MainUI = (($) => {
$(this).attr('href', `mailto:${email}`);
}
}
});*/
}); */
//
// scroll links
$(".js-scrollTo").on("click", (e) => {
console.log(`${NAME}: .js-scrollTo`);
$('.js-scrollTo').on('click', (e) => {
console.log(`${NAME}: .js-scrollTo`)
e.preventDefault();
const el = e.currentTarget;
const $el = $(e.currentTarget);
e.preventDefault()
const el = e.currentTarget
const $el = $(e.currentTarget)
ScrollTo(el, $el.attr("data-target"));
});
ScrollTo(el, $el.attr('data-target'))
})
// load external fonts
if ($("[data-extfont]").length) {
console.log(`${NAME}: loading external fonts [data-extfont]`);
if ($('[data-extfont]').length) {
console.log(`${NAME}: loading external fonts [data-extfont]`)
$.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) => {
fonts[i] = $(el).attr("data-extfont");
});
$('[data-extfont]').each((i, el) => {
fonts[i] = $(el).attr('data-extfont')
})
W.WebFont.load({
google: {
families: fonts,
},
});
})
}
);
)
}
// data-set links
$("[data-set-target]").on("click", (e) => {
console.log(`${NAME}: [data-set-target]`);
$('[data-set-target]').on('click', (e) => {
console.log(`${NAME}: [data-set-target]`)
const $el = $(e.currentTarget);
const $target = $($el.data("set-target"));
const $el = $(e.currentTarget)
const $target = $($el.data('set-target'))
if (!$target.length) {
return;
return
}
$target.each((i, targetEl) => {
const $targetEl = $(targetEl);
const tag = $targetEl.prop("tagName").toLowerCase();
const $targetEl = $(targetEl)
const tag = $targetEl.prop('tagName').toLowerCase()
if (tag === "input" || tag === "select") {
$targetEl.val($el.data("set-val"));
} else if (!$targetEl.hasClass("field")) {
$targetEl.text($el.data("set-val"));
if (tag === 'input' || tag === 'select') {
$targetEl.val($el.data('set-val'))
} else if (!$targetEl.hasClass('field')) {
$targetEl.text($el.data('set-val'))
}
});
})
$el.trigger(Events.SET_TARGET_UPDATE);
$target.closest("form").trigger(Events.SET_TARGET_UPDATE);
});
$el.trigger(Events.SET_TARGET_UPDATE)
$target.closest('form').trigger(Events.SET_TARGET_UPDATE)
})
// emulate links
$(".a[data-href]").on("click", (e) => {
console.log(`${NAME}: js link processing .a[data-href]`);
$('.a[data-href]').on('click', (e) => {
console.log(`${NAME}: js link processing .a[data-href]`)
const $el = $(e.currentTarget);
const href = $el.data("href");
const $el = $(e.currentTarget)
const href = $el.data('href')
if (!href.length) {
console.warn(`${NAME}: .a[data-href] | Missing data-href`);
console.warn($el);
console.warn(`${NAME}: .a[data-href] | Missing data-href`)
console.warn($el)
}
W.location.assign(href);
});
W.location.assign(href)
})
// set attributes for mobile friendly tables
$(".typography table").each((i, el) => {
const $table = $(el);
let $header = $table.find("thead tr:first-child");
$('.typography table').each((i, el) => {
const $table = $(el)
let $header = $table.find('thead tr:first-child')
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) => {
const $h = $(h);
$header.find('td').each((i, h) => {
const $h = $(h)
$table
.find("tr")
.find('tr')
.find(`td:eq(${i})`)
.each((i, el) => {
const $el = $(el);
if (!$el.attr("data-label")) {
$el.attr("data-label", $h.text());
const $el = $(el)
if (!$el.attr('data-label')) {
$el.attr('data-label', $h.text())
}
});
});
});
})
})
})
//
// hide spinner
Spinner.hide(() => {
$Body.addClass("loaded");
});
$Body.addClass('loaded')
})
// fire page printing
if (W.URLDetails["hash"].indexOf("printpage") > -1) {
W.print();
if (W.URLDetails.hash.indexOf('printpage') > -1) {
W.print()
}
$Body.data(NAME, ui);
$W.removeClass("lock-main-init");
$Body.data(NAME, ui)
$W.removeClass('lock-main-init')
}
static detectBootstrapScreenSize() {
const $el = $('<div class="env-test"></div>');
let envs = [...Consts.ENVS];
$Body.append($el);
static detectBootstrapScreenSize () {
const $el = $('<div class="env-test"></div>')
let envs = [...Consts.ENVS]
$Body.append($el)
let curEnv = envs.shift();
envs = envs.reverse();
let curEnv = envs.shift()
envs = envs.reverse()
for (let i = 0; i < envs.length; ++i) {
const env = envs[i];
$el.addClass(`d-${env}-none`);
if ($el.is(":hidden")) {
curEnv = env;
break;
const env = envs[i]
$el.addClass(`d-${env}-none`)
if ($el.is(':hidden')) {
curEnv = env
break
}
}
$el.remove();
$Body.removeClass(envs);
$Body.addClass(curEnv);
$el.remove()
$Body.removeClass(envs)
$Body.addClass(curEnv)
let landscape = true;
let landscape = true
if ($W.width() > $W.height()) {
$Body.removeClass("portrait");
$Body.addClass("landscape");
$Body.removeClass('portrait')
$Body.addClass('landscape')
} else {
landscape = false;
landscape = false
$Body.removeClass("landscape");
$Body.addClass("portrait");
$Body.removeClass('landscape')
$Body.addClass('portrait')
}
console.log(
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
);
)
return curEnv;
return curEnv
}
static updateLocation(url) {
let location = url || W.location.href;
location = location.replace(W.URLDetails["base"], "/");
const hash = location.indexOf("#");
static updateLocation (url) {
let location = url || W.location.href
location = location.replace(W.URLDetails.base, '/')
const hash = location.indexOf('#')
W.URLDetails.relative = location.split("#")[0];
W.URLDetails.relative = location.split('#')[0]
W.URLDetails.hash =
hash >= 0 ? location.substr(location.indexOf("#")) : "";
hash >= 0 ? location.substr(location.indexOf('#')) : ''
}
// show site-wide alert
static alert(msg, cls) {
$SiteWideMessage.fadeOut("fast");
static alert (msg, cls) {
$SiteWideMessage.fadeOut('fast')
$SiteWideMessage.html(
`<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.fadeOut("slow", () => {
$SiteWideMessage.find(".page-alert").alert("close");
});
});
$SiteWideMessage.fadeOut('slow', () => {
$SiteWideMessage.find('.page-alert').alert('close')
})
})
$SiteWideMessage.fadeIn("slow");
$SiteWideMessage.fadeIn('slow')
if ($AlertNotify.length) {
$AlertNotify[0].play();
$AlertNotify[0].play()
}
$W.trigger(`${Events.ALLERTAPPEARED}`);
$W.trigger(`${Events.ALLERTAPPEARED}`)
}
// hide site-wide alert
static alertHide() {
static alertHide () {
if ($SiteWideMessage.length !== 0) {
$SiteWideMessage.fadeOut("slow", () => {
$SiteWideMessage.find(".alert").alert("close");
});
$SiteWideMessage.fadeOut('slow', () => {
$SiteWideMessage.find('.alert').alert('close')
})
}
if ($AlertNotify.length && typeof $AlertNotify[0].stop !== "undefined") {
$AlertNotify[0].stop();
if ($AlertNotify.length && typeof $AlertNotify[0].stop !== 'undefined') {
$AlertNotify[0].stop()
}
$W.trigger(`${Events.ALLERTREMOVED}`);
$W.trigger(`${Events.ALLERTREMOVED}`)
}
// load all images
static loadImages() {
const $imgs = $Body.find("img").not(".loaded");
const $imgUrls = [];
const $imgLazyUrls = [];
static loadImages () {
const $imgs = $Body.find('img').not('.loaded')
const $imgUrls = []
const $imgLazyUrls = []
// collect image details
$imgs.each((i, el) => {
const $el = $(el);
const src = $el.attr("src");
const lazySrc = $el.data("lazy-src");
const $el = $(el)
const src = $el.attr('src')
const lazySrc = $el.data('lazy-src')
if ($el.hasClass("loaded")) {
return;
if ($el.hasClass('loaded')) {
return
}
if (src && src.length) {
$imgUrls.push(src);
$imgUrls.push(src)
}
if (lazySrc && lazySrc.length) {
$imgLazyUrls.push(lazySrc);
$el.addClass("loading");
$imgLazyUrls.push(lazySrc)
$el.addClass('loading')
AjaxUI.preload([lazySrc]).then(() => {
$el.attr("src", lazySrc);
$el.attr('src', lazySrc)
$el.on(`${Events.LOADED}`, () => {
$el.addClass("loaded");
$el.removeClass("loading");
$el.addClass('loaded')
$el.removeClass('loading')
$el.trigger(`${Events.LAZYIMAGEREADY}`);
});
});
$el.trigger(`${Events.LAZYIMAGEREADY}`)
})
})
}
});
})
// load lazy backgrounds
$Body
.find("[data-lazy-bg]")
.not(".loaded")
.find('[data-lazy-bg]')
.not('.loaded')
.each((i, el) => {
const $el = $(el);
const lazySrc = $el.data("lazy-bg");
const $el = $(el)
const lazySrc = $el.data('lazy-bg')
if ($el.hasClass("loaded")) {
return;
if ($el.hasClass('loaded')) {
return
}
if (lazySrc && lazySrc.length) {
$imgLazyUrls.push(lazySrc);
$el.addClass("loading");
$imgLazyUrls.push(lazySrc)
$el.addClass('loading')
AjaxUI.preload([lazySrc]).then(() => {
$el.css({ "background-image": `url(${lazySrc})` });
$el.css({ 'background-image': `url(${lazySrc})` })
$el.addClass("loaded");
$el.removeClass("loading");
$el.addClass('loaded')
$el.removeClass('loading')
$el.trigger(`${Events.LAZYIMAGEREADY}`);
});
$el.trigger(`${Events.LAZYIMAGEREADY}`)
})
}
});
})
// replace img src
$Body
.find("[data-src-replace]")
.not(".loaded")
.find('[data-src-replace]')
.not('.loaded')
.each((i, el) => {
const $el = $(el);
const lazySrc = $el.data("src-replace");
const $el = $(el)
const lazySrc = $el.data('src-replace')
if ($el.hasClass("loaded")) {
return;
if ($el.hasClass('loaded')) {
return
}
if (lazySrc && lazySrc.length) {
$el.addClass("loaded");
$el.attr("src", lazySrc);
$el.addClass('loaded')
$el.attr('src', lazySrc)
}
});
})
// load defined images
AjaxUI.preload($imgUrls).then(() => {
$W.trigger("images-loaded");
$W.trigger('images-loaded')
// load lazy images
AjaxUI.preload($imgLazyUrls).then(() => {
console.log(`${NAME}: All images are loaded!`);
console.log(`${NAME}: All images are loaded!`)
setTimeout(() => {
$W.trigger(`${Events.LAZYIMAGESREADY}`);
$W.trigger(`${Events.LAZYIMAGESREADY}`)
console.groupEnd("Post-init");
console.timeEnd("Post-init");
}, 100);
});
});
console.groupEnd('Post-init')
console.timeEnd('Post-init')
}, 100)
})
})
}
static dispose() {
console.log(`${NAME}: dispose`);
static dispose () {
console.log(`${NAME}: dispose`)
}
}
$W.on(
`${Events.MAININIT} ${Events.AJAX} ${Events.AJAXMAIN} ${Events.LOADED}`,
() => {
if ($W.hasClass("lock-main-init")) {
console.warn(`${NAME}: locked`);
return;
if ($W.hasClass('lock-main-init')) {
console.warn(`${NAME}: locked`)
return
}
$W.addClass("lock-main-init");
MainUI.init();
$W.addClass('lock-main-init')
MainUI.init()
}
);
)
$W.on(`${Events.RESIZE}`, () => {
MainUI.detectBootstrapScreenSize();
});
MainUI.detectBootstrapScreenSize()
})
$W.on("beforeunload unload", () => {
$W.on('beforeunload unload', () => {
Spinner.show(() => {
$Body.removeClass("loaded");
});
});
$Body.removeClass('loaded')
})
})
// hide spinner on target _blank
$('[target="_blank"],.external')
.not('[data-toggle="lightbox"],[data-lightbox-gallery]')
.on("click submit touch", (e) => {
console.log(`${NAME}: External link`);
.on('click submit touch', (e) => {
console.log(`${NAME}: External link`)
setTimeout(() => {
Spinner.hide(() => {
$Body.addClass("loaded");
});
}, 1000);
});
$Body.addClass('loaded')
})
}, 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 "../scss/app.scss";
// import $ from 'jquery';
import '../scss/app.scss'
import { Dropdown } from "bootstrap";
import Page from "./_components/_page.jsx";
import { Dropdown } from 'bootstrap'
import Page from './_components/_page.jsx'
//import 'hammerjs/hammer';
//import 'jquery-hammerjs/jquery.hammer';
// import 'hammerjs/hammer';
// import 'jquery-hammerjs/jquery.hammer';
// Routie
//import 'pouchdb/dist/pouchdb';
//import './_components/routes/index';
// import 'pouchdb/dist/pouchdb';
// import './_components/routes/index';
// conflicts with _components/_ui.hover.js (shows dropdown on hover)
//import 'bootstrap/js/dist/dropdown';
/*import './_components/_ui.hover';
// import 'bootstrap/js/dist/dropdown';
/* import './_components/_ui.hover';
import './_components/_ui.carousel';
import './_components/_ui.menu';
@ -24,74 +24,74 @@ import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/scrollspy';
import 'bootstrap/js/dist/tab';*/
import 'bootstrap/js/dist/tab'; */
//
// 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
//import 'jquery-zoom/jquery.zoom';
// import 'jquery-zoom/jquery.zoom';
// FlyoutUI
//import FlyoutUI from './_components/_ui.flyout';
// import FlyoutUI from './_components/_ui.flyout';
// Sticky sidebar
//import SidebarUI from './_components/_ui.sidebar';
// import SidebarUI from './_components/_ui.sidebar';
// Toggle bootstrap form fields
//import FormToggleUI from './_components/_ui.form.fields.toggle';
// import FormToggleUI from './_components/_ui.form.fields.toggle';
// Bootstrap Date & Time fields
//import FormDatetime from './_components/_ui.form.datetime';
// import FormDatetime from './_components/_ui.form.datetime';
// Stepped forms functionality
//import FormStepped from './_components/_ui.form.stepped';
// import FormStepped from './_components/_ui.form.stepped';
// Forms validation functionality
//import FormValidate from './_components/_ui.form.validate';
// import FormValidate from './_components/_ui.form.validate';
// Store forms data into localStorage
//import FormStorage from './_components/_ui.form.storage';
// import FormStorage from './_components/_ui.form.storage';
// client-side images cropping
//import FormCroppie from './_components/_ui.form.croppie';
// import FormCroppie from './_components/_ui.form.croppie';
// Google NoCaptcha fields
//import NoCaptcha from './_components/_ui.nocaptcha';
// import NoCaptcha from './_components/_ui.nocaptcha';
// youtube video preview image
//import './_components/_ui.video.preview';
// import './_components/_ui.video.preview';
// Meta Lightbox
import "@a2nt/meta-lightbox-react/src/js/app";
import '@a2nt/meta-lightbox-react/src/js/app'
const GraphPage = ReactDOM.render(
<Page />,
document.getElementById("MainContent")
);
document.getElementById('MainContent')
)
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
//import Table from 'bootstrap-table/dist/bootstrap-table';
// import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
// import Table from 'bootstrap-table/dist/bootstrap-table';
// 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 './_layout';
// import './_main';
// import './_layout';
// Google Analytics
//import './_components/drivers/_google.track.external.links';
// import './_components/drivers/_google.track.external.links';
function importAll(r) {
return r.keys().map(r);
function importAll (r) {
return r.keys().map(r)
}
const images = importAll(
require.context("../img/", false, /\.(png|jpe?g|svg)$/)
);
require.context('../img/', false, /\.(png|jpe?g|svg)$/)
)
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">' +
'<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>' +
"</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 https://github.com/a2nt/silverstripe-mapboxfield/blob/master/README.md for Data Structure
*/
"use strict";
'use strict'
// your page specific css
import "../scss/_types/PageTypeClassName.scss";
import '../scss/_types/PageTypeClassName.scss'
import $ from "jquery";
import Events from "../_events";
import $ from 'jquery'
import Events from '../_events'
// Mapbox API
import "../_components/_ui.map.api";
import '../_components/_ui.map.api'
const PageTypeUI = (($) => {
// Constants
const W = window;
const D = document;
const $Body = $("body");
const W = window
const D = document
const $Body = $('body')
const NAME = "PageTypeUI";
const NAME = 'PageTypeUI'
class PageTypeUI {
// Static methods
static init() {
this.dispose();
console.log(`Initializing: ${NAME}`);
static init () {
this.dispose()
console.log(`Initializing: ${NAME}`)
// custom page specific functionality
}
static initMap() {
static initMap () {
// custom map functionality
}
static dispose() {
console.log(`Destroying: ${NAME}`);
static dispose () {
console.log(`Destroying: ${NAME}`)
}
}
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
PageTypeUI.init();
});
PageTypeUI.init()
})
$(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';
*/

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';
// Mapbox API

6
src/mocks/browser.js
View File

@ -1,5 +1,5 @@
// src/mocks/browser.js
import { setupWorker } from "msw";
import { handlers } from "./handlers";
import { setupWorker } from 'msw'
import { handlers } from './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
import { graphql } from "msw";
import { graphql } from 'msw'
export const handlers = [
// Handles a "Login" mutation
/*graphql.mutation('Login', (req, res, ctx) => {
/* graphql.mutation('Login', (req, res, ctx) => {
const { username } = req.variables;
sessionStorage.setItem('is-authenticated', username);
return res(
@ -13,10 +13,10 @@ export const handlers = [
},
}),
);
}),*/
}), */
// Handles a "Pages" query
graphql.query("Pages11", (req, res, ctx) => {
const apiKey = req.headers.map.apikey;
graphql.query('Pages11', (req, res, ctx) => {
const apiKey = req.headers.map.apikey
if (
!req.headers.map.apikey ||
req.headers.map.apikey !== `${GRAPHQL_API_KEY}`
@ -25,11 +25,11 @@ export const handlers = [
return res(
ctx.errors([
{
message: "Not authenticated",
errorType: "AuthenticationError",
message: 'Not authenticated',
errorType: 'AuthenticationError',
},
])
);
)
}
// When authenticated, respond with a query payload
return res(
@ -38,38 +38,38 @@ export const handlers = [
edges: [
{
node: {
ID: "1",
Title: "Home-Mocked",
ClassName: "Site\\Pages\\HomePage",
CSSClass: "Site-Pages-HomePage",
ID: '1',
Title: 'Home-Mocked',
ClassName: 'Site\\Pages\\HomePage',
CSSClass: 'Site-Pages-HomePage',
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.",
Link: "/en/",
URLSegment: "home",
Link: '/en/',
URLSegment: 'home',
Elements: {
edges: [
{
node: {
ID: "3",
Title: "Slider",
ID: '3',
Title: 'Slider',
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: {
ID: "7",
Title: "Categories List",
ID: '7',
Title: 'Categories List',
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: {
ID: "4",
ID: '4',
Title: "Hello, I'm Tony Air",
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
import { setupServer } from "msw/node";
import { handlers } from "./handlers";
import { setupServer } from 'msw/node'
import { handlers } from './handlers'
// This configures a request mocking server with the given request handlers.
export const server = setupServer(...handlers);
export const server = setupServer(...handlers)