IMPR: standard linting
This commit is contained in:
parent
dd6e19e358
commit
68f430f350
|
|
@ -1 +1,2 @@
|
||||||
/src/thirdparty
|
/src/thirdparty
|
||||||
|
/src/js_old
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"version": "4.6.0",
|
"version": "4.6.1",
|
||||||
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
|
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
|
||||||
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
|
"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
|
||||||
"icons": {
|
"icons": {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"version": "4.6.0",
|
"version": "4.6.1",
|
||||||
"api_version": 1,
|
"api_version": 1,
|
||||||
"layout": {
|
"layout": {
|
||||||
"logo": "yandex-browser-50x50.png",
|
"logo": "yandex-browser-50x50.png",
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1651519353911"/><base href=""/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><script defer="defer" src="js/app_cms.js"></script><script defer="defer" src="js/app_editor.js"></script><script defer="defer" src="js/app_map.api.js"></script><script defer="defer" src="js/app_order.js"></script><link href="css/app.css" rel="stylesheet"/><link href="css/app_cms.css" rel="stylesheet"/><link href="css/app_editor.css" rel="stylesheet"/><link href="css/app_map.api.css" rel="stylesheet"/><link href="css/app_order.css" rel="stylesheet"/></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}#PageLoading .tagline{color:#fff;font-size:1.8rem;font-size:4vh;letter-spacing:.25em}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:first-child{left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:first-child{animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}#PageLoading .tagline{font-size:4vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../img/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
<!doctype html><html lang="en"><head><title>Webpack Bootstrap 4 UI Demo</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="description" content="UI Kit"/><meta name="author" content="Tony Air <tony@twma.pro>"/><meta name="ping" content="/Security/ping"/><meta name="api_url" content="http://127.0.0.1/graphql"/><meta name="api_static_domain" content="http://127.0.0.1"/><meta name="swversion" content="sw-1651603832915"/><base href=""/><script defer="defer" src="js/app.js"></script><script defer="defer" src="js/app_sw.js"></script><script defer="defer" src="js/app_cms.js"></script><script defer="defer" src="js/app_editor.js"></script><script defer="defer" src="js/app_map.api.js"></script><script defer="defer" src="js/app_order.js"></script><link href="css/app.css" rel="stylesheet"/><link href="css/app_cms.css" rel="stylesheet"/><link href="css/app_editor.css" rel="stylesheet"/><link href="css/app_map.api.css" rel="stylesheet"/><link href="css/app_order.css" rel="stylesheet"/></head><body data-default-lng="0" data-default-lat="0"><div class="wrapper"><style>@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(1.35rem,0)}}body,html{font-size:14px;margin:0;padding:0;background:#fff;color:#333;overflow-x:hidden}@media (min-width:2000px){body,html{font-size:.9vw}}#PageLoading{position:fixed;left:0;top:0;margin:0;width:100%!important;height:100%!important;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;z-index:2000;will-change:opacity;background:#212529;color:#212529}#PageLoading .logo{filter:invert(1);margin-left:20px;margin-left:2vw;width:100px;width:12.5vw}#PageLoading .tagline{color:#fff;font-size:1.8rem;font-size:4vh;letter-spacing:.25em}.main-bn{position:fixed;top:0;left:0;width:100%;z-index:99999999;padding:.5rem 1rem;text-align:center;color:#fff;background:red}iframe,img{max-width:100%}.loading-spinner{text-align:center}.lds-ellipsis{display:inline-block;position:relative;width:4.57rem;height:1rem;color:#fff}.lds-ellipsis div{position:absolute;top:.15rem;width:.78rem;height:.78rem;border-radius:50%;background:#888;animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:first-child{left:.42rem;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:.9rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:1.85rem;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:3.21rem;animation:lds-ellipsis3 .6s infinite}@keyframes lds-text{from{font-size:1em}to{font-size:1.5em}}.lds-text{position:absolute;top:50%;left:50%;margin-left:-5rem;margin-top:8rem;font-size:.8rem;letter-spacing:.25em;color:#fff}.lds-text b{font-weight:300;animation:lds-text 5s ease infinite alternate}.lds-text b:first-child{animation-delay:.5s}.lds-text b:nth-child(2){animation-delay:1s}.lds-text b:nth-child(3){animation-delay:1.5s}.lds-text b:nth-child(4){animation-delay:2s}.lds-text b:nth-child(5){animation-delay:2.5s}.lds-text b:nth-child(6){animation-delay:3s}.lds-text b:nth-child(7){animation-delay:3.5s}.lds-text b:nth-child(8){animation-delay:4s}.lds-text b:nth-child(9){animation-delay:4.5s}.lds-text b:nth-child(10){animation-delay:5s}@media (orientation:portrait){#PageLoading .logo{width:50vw}#PageLoading .tagline{font-size:4vw}}</style><div id="PageLoading"><div class="loading-spinner"><img class="logo" src="../img/logo.svg" width="200" alt="UI Kit"/><br/><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div><br/><div class="lds-placeholder">LOADING...</div><div class="lds-text"><b>L</b> <b>O</b> <b>A</b> <b>D</b> <b>I</b> <b>N</b> <b>G</b> <b>.</b> <b>.</b> <b>.</b></div></div></div><div id="SiteWideAlerts" class="offline-message"><div class="alert alert-danger alert-offline alert-dismissible fade show" role="alert"><div class="typography">The Internet connection is missing right now, but you're able to browse previously opened pages offline.</div><button type="button" class="btn btn-danger btn-close" data-bs-dismiss="alert" aria-label="Close"><i class="fas fa-times"></i></button></div><noscript><div class="main-bn alert alert-fixed-top alert-danger" role="alert">Please, enable javascript.</div></noscript><!--[if lt IE 11
|
||||||
]><div class="main-bn alert alert-danger" role="alert">
|
]><div class="main-bn alert alert-danger" role="alert">
|
||||||
<a
|
<a
|
||||||
href="https://www.google.com/chrome/browser/desktop/"
|
href="https://www.google.com/chrome/browser/desktop/"
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
||||||
!function(){var e={570:function(e){e.exports=function log(e){false}},756:function(e){Cache.prototype.add||(Cache.prototype.add=function add(e){return this.addAll([e])}),Cache.prototype.addAll||(Cache.prototype.addAll=function addAll(e){var t=this;function NetworkError(e){this.name="NetworkError",this.code=19,this.message=e}return NetworkError.prototype=Object.create(Error.prototype),Promise.resolve().then((function(){if(arguments.length<1)throw new TypeError;return e=e.map((function(e){return e instanceof Request?e:String(e)})),Promise.all(e.map((function(e){"string"===typeof e&&(e=new Request(e));var t=new URL(e.url).protocol;if("http:"!==t&&"https:"!==t)throw new NetworkError("Invalid scheme");return fetch(e.clone())})))})).then((function(n){return Promise.all(n.map((function(n,r){return t.put(e[r],n)})))})).then((function(){}))}),CacheStorage.prototype.match||(CacheStorage.prototype.match=function match(e,t){var n=this;return this.keys().then((function(r){var o;return r.reduce((function(r,a){return r.then((function(){return o||n.open(a).then((function(n){return n.match(e,t)})).then((function(e){return o=e}))}))}),Promise.resolve())}))}),e.exports=self.caches}},t={};function __webpack_require__(n){var r=t[n];if(void 0!==r)return r.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,__webpack_require__),o.exports}!function(){var e="".concat("@a2nt/ss-bootstrap-ui-webpack-boilerplate-react","-sw"),t="".concat("4.6.0","-sw"),n=__webpack_require__(570),r=__webpack_require__(756);if("string"!==typeof e)throw new Error("Cache Name cannot be empty");self.addEventListener("fetch",(function(t){if("GET"===t.request.method){var o=new URL(t.request.url);if(o.pathname.indexOf("admin")>=0||o.pathname.indexOf("Security")>=0||o.pathname.indexOf("/dev")>=0)n("SW: skip admin ".concat(t.request.url));else{var a=t.request.clone(),c=t.request.clone();t.respondWith(fetch(a).then((function(n){var o=n.clone();return r.open(e).then((function(e){var n=t.request.clone();e.put(n,o)})),n})).catch((function(e){return n("SW: fetch failed"),r.match(c)})))}}})),self.addEventListener("activate",(function(o){n("SW: activated: ".concat(t)),o.waitUntil(r.delete(e))})),self.addEventListener("install",(function(e){n("SW: installing version: ".concat(t))}))}()}();
|
!function(){var e={570:function(e){e.exports=function log(e){false}},756:function(e){Cache.prototype.add||(Cache.prototype.add=function add(e){return this.addAll([e])}),Cache.prototype.addAll||(Cache.prototype.addAll=function addAll(e){var t=this;function NetworkError(e){this.name="NetworkError",this.code=19,this.message=e}return NetworkError.prototype=Object.create(Error.prototype),Promise.resolve().then((function(){if(arguments.length<1)throw new TypeError;return e=e.map((function(e){return e instanceof Request?e:String(e)})),Promise.all(e.map((function(e){"string"===typeof e&&(e=new Request(e));var t=new URL(e.url).protocol;if("http:"!==t&&"https:"!==t)throw new NetworkError("Invalid scheme");return fetch(e.clone())})))})).then((function(n){return Promise.all(n.map((function(n,r){return t.put(e[r],n)})))})).then((function(){}))}),CacheStorage.prototype.match||(CacheStorage.prototype.match=function match(e,t){var n=this;return this.keys().then((function(r){var o;return r.reduce((function(r,a){return r.then((function(){return o||n.open(a).then((function(n){return n.match(e,t)})).then((function(e){return o=e}))}))}),Promise.resolve())}))}),e.exports=self.caches}},t={};function __webpack_require__(n){var r=t[n];if(void 0!==r)return r.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,__webpack_require__),o.exports}!function(){var e="".concat("@a2nt/ss-bootstrap-ui-webpack-boilerplate-react","-sw"),t="".concat("4.6.1","-sw"),n=__webpack_require__(570),r=__webpack_require__(756);if("string"!==typeof e)throw new Error("Cache Name cannot be empty");self.addEventListener("fetch",(function(t){if("GET"===t.request.method){var o=new URL(t.request.url);if(o.pathname.indexOf("admin")>=0||o.pathname.indexOf("Security")>=0||o.pathname.indexOf("/dev")>=0)n("SW: skip admin ".concat(t.request.url));else{var a=t.request.clone(),c=t.request.clone();t.respondWith(fetch(a).then((function(n){var o=n.clone();return r.open(e).then((function(e){var n=t.request.clone();e.put(n,o)})),n})).catch((function(e){return n("SW: fetch failed"),r.match(c)})))}}})),self.addEventListener("activate",(function(o){n("SW: activated: ".concat(t)),o.waitUntil(r.delete(e))})),self.addEventListener("install",(function(e){n("SW: installing version: ".concat(t))}))}()}();
|
||||||
|
|
@ -82,171 +82,6 @@
|
||||||
898
|
898
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/app.scss": [
|
|
||||||
{
|
|
||||||
"chunks": {
|
|
||||||
"byName": {
|
|
||||||
"child": 396
|
|
||||||
},
|
|
||||||
"bySource": {
|
|
||||||
"0 child": 396
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
396
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"modules": {
|
|
||||||
"byIdentifier": {
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/getUrl.js": 671,
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
|
|
||||||
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/app.scss": 895,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%272%27 fill=%27%23fff%27/%3e%3c/svg%3e": 204,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2386b7fe%27/%3e%3c/svg%3e": 609,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e": 469,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%280, 0, 0, 0.25%29%27/%3e%3c/svg%3e": 486,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e": 144,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23000%27%3e%3cpath d=%27M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z%27/%3e%3c/svg%3e": 175,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z%27/%3e%3c/svg%3e": 647,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e": 692,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23343a40%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M2 5l6 6 6-6%27/%3e%3c/svg%3e": 214,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10h8%27/%3e%3c/svg%3e": 931,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10l3 3l6-6%27/%3e%3c/svg%3e": 349,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%280, 0, 0, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e": 217,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27rgba%28255, 255, 255, 0.55%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e": 956,
|
|
||||||
"asset/inline|data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 8 8%27%3e%3cpath fill=%27%23198754%27 d=%27M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z%27/%3e%3c/svg%3e": 819
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
144,
|
|
||||||
175,
|
|
||||||
204,
|
|
||||||
214,
|
|
||||||
217,
|
|
||||||
349,
|
|
||||||
469,
|
|
||||||
486,
|
|
||||||
609,
|
|
||||||
647,
|
|
||||||
656,
|
|
||||||
671,
|
|
||||||
692,
|
|
||||||
744,
|
|
||||||
819,
|
|
||||||
895,
|
|
||||||
931,
|
|
||||||
956
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/cms.scss": [
|
|
||||||
{
|
|
||||||
"chunks": {
|
|
||||||
"byName": {
|
|
||||||
"child": 396
|
|
||||||
},
|
|
||||||
"bySource": {
|
|
||||||
"0 child": 396
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
396
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"modules": {
|
|
||||||
"byIdentifier": {
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
|
|
||||||
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/cms.scss": 970
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
656,
|
|
||||||
744,
|
|
||||||
970
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/editor.scss": [
|
|
||||||
{
|
|
||||||
"chunks": {
|
|
||||||
"byName": {
|
|
||||||
"child": 396
|
|
||||||
},
|
|
||||||
"bySource": {
|
|
||||||
"0 child": 396
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
396
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"modules": {
|
|
||||||
"byIdentifier": {
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
|
|
||||||
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/editor.scss": 203
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
203,
|
|
||||||
656,
|
|
||||||
744
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/map.api.scss": [
|
|
||||||
{
|
|
||||||
"chunks": {
|
|
||||||
"byName": {
|
|
||||||
"child": 396
|
|
||||||
},
|
|
||||||
"bySource": {
|
|
||||||
"0 child": 396
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
396
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"modules": {
|
|
||||||
"byIdentifier": {
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
|
|
||||||
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/map.api.scss": 466
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
466,
|
|
||||||
656,
|
|
||||||
744
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/order.scss": [
|
|
||||||
{
|
|
||||||
"chunks": {
|
|
||||||
"byName": {
|
|
||||||
"child": 396
|
|
||||||
},
|
|
||||||
"bySource": {
|
|
||||||
"0 child": 396
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
396
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"modules": {
|
|
||||||
"byIdentifier": {
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/api.js": 744,
|
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 656,
|
|
||||||
"./node_modules/.pnpm/css-loader@6.7.1_webpack@5.72.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@12.6.0_sass@1.50.0+webpack@5.72.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/order.scss": 263
|
|
||||||
},
|
|
||||||
"usedIds": [
|
|
||||||
263,
|
|
||||||
656,
|
|
||||||
744
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"modules": {
|
"modules": {
|
||||||
"byIdentifier": {
|
"byIdentifier": {
|
||||||
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js": 826,
|
"./node_modules/.pnpm/babel-loader@8.2.5_rb5fcebzp6kx3hqg3ucus54t3m/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js": 826,
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
<title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [2 May 2022 at 21:25]</title>
|
<title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [3 May 2022 at 20:50]</title>
|
||||||
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
|
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script>
|
<script>
|
||||||
window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":406407,"parsedSize":114262,"gzipSize":28180,"groups":[{"label":"node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","statSize":577,"groups":[{"id":826,"label":"index.js","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js","statSize":577,"parsedSize":265,"gzipSize":218}],"parsedSize":265,"gzipSize":218},{"label":"src","path":"./src","statSize":405830,"groups":[{"label":"js","path":"./src/js","statSize":229984,"groups":[{"id":743,"label":"app.js + 47 modules (concatenated)","path":"./src/js/app.js + 47 modules (concatenated)","statSize":229984,"parsedSize":113997,"gzipSize":28038,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/app.js + 47 modules (concatenated)/src/js","statSize":31064,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/app.js","statSize":2369,"parsedSize":1174,"gzipSize":288,"inaccurateSizes":true},{"label":"main","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main","statSize":9770,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/index.js","statSize":85,"parsedSize":42,"gzipSize":10,"inaccurateSizes":true},{"id":null,"label":"visibility.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/visibility.js","statSize":898,"parsedSize":445,"gzipSize":109,"inaccurateSizes":true},{"id":null,"label":"touch.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/touch.js","statSize":1615,"parsedSize":800,"gzipSize":196,"inaccurateSizes":true},{"id":null,"label":"css-screen-size.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/css-screen-size.js","statSize":2650,"parsedSize":1313,"gzipSize":323,"inaccurateSizes":true},{"id":null,"label":"main.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/main.js","statSize":3109,"parsedSize":1541,"gzipSize":379,"inaccurateSizes":true},{"id":null,"label":"loading-spinner.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/loading-spinner.js","statSize":1413,"parsedSize":700,"gzipSize":172,"inaccurateSizes":true}],"parsedSize":4842,"gzipSize":1191,"inaccurateSizes":true},{"label":"ui","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui","statSize":8499,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/carousel.js","statSize":5210,"parsedSize":2582,"gzipSize":635,"inaccurateSizes":true},{"id":null,"label":"dropdown.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/dropdown.js","statSize":2883,"parsedSize":1429,"gzipSize":351,"inaccurateSizes":true},{"id":null,"label":"datepicker.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/datepicker.js","statSize":406,"parsedSize":201,"gzipSize":49,"inaccurateSizes":true}],"parsedSize":4212,"gzipSize":1036,"inaccurateSizes":true},{"label":"ajax","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax","statSize":7166,"groups":[{"id":null,"label":"online.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/online.js","statSize":2662,"parsedSize":1319,"gzipSize":324,"inaccurateSizes":true},{"id":null,"label":"lazy-images.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/lazy-images.js","statSize":1176,"parsedSize":582,"gzipSize":143,"inaccurateSizes":true},{"label":"models","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models","statSize":3328,"groups":[{"id":null,"label":"image.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models/image.js","statSize":3328,"parsedSize":1649,"gzipSize":405,"inaccurateSizes":true}],"parsedSize":1649,"gzipSize":405,"inaccurateSizes":true}],"parsedSize":3551,"gzipSize":873,"inaccurateSizes":true},{"label":"layout","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout","statSize":1591,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout/index.js","statSize":1591,"parsedSize":788,"gzipSize":193,"inaccurateSizes":true}],"parsedSize":788,"gzipSize":193,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_events.js","statSize":1397,"parsedSize":692,"gzipSize":170,"inaccurateSizes":true},{"id":null,"label":"_consts.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_consts.js","statSize":272,"parsedSize":134,"gzipSize":33,"inaccurateSizes":true}],"parsedSize":15397,"gzipSize":3787,"inaccurateSizes":true},{"label":"node_modules/.pnpm","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm","statSize":198920,"groups":[{"label":"@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js","statSize":17421,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/app.js","statSize":815,"parsedSize":403,"gzipSize":99,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/_events.js","statSize":1366,"parsedSize":677,"gzipSize":166,"inaccurateSizes":true},{"id":null,"label":"window.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/window.js","statSize":15240,"parsedSize":7554,"gzipSize":1857,"inaccurateSizes":true}],"parsedSize":8635,"gzipSize":2123,"inaccurateSizes":true},{"label":"bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src","statSize":55299,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/carousel.js","statSize":23486,"parsedSize":11641,"gzipSize":2863,"inaccurateSizes":true},{"label":"dom","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom","statSize":18586,"groups":[{"id":null,"label":"event-handler.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/event-handler.js","statSize":11179,"parsedSize":5541,"gzipSize":1362,"inaccurateSizes":true},{"id":null,"label":"manipulator.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/manipulator.js","statSize":1986,"parsedSize":984,"gzipSize":242,"inaccurateSizes":true},{"id":null,"label":"selector-engine.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/selector-engine.js","statSize":3816,"parsedSize":1891,"gzipSize":465,"inaccurateSizes":true},{"id":null,"label":"data.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/data.js","statSize":1605,"parsedSize":795,"gzipSize":195,"inaccurateSizes":true}],"parsedSize":9212,"gzipSize":2265,"inaccurateSizes":true},{"label":"util","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/util","statSize":9636,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/util/index.js","statSize":9636,"parsedSize":4776,"gzipSize":1174,"inaccurateSizes":true}],"parsedSize":4776,"gzipSize":1174,"inaccurateSizes":true},{"id":null,"label":"base-component.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/base-component.js","statSize":3591,"parsedSize":1779,"gzipSize":437,"inaccurateSizes":true}],"parsedSize":27410,"gzipSize":6741,"inaccurateSizes":true},{"label":"vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js","statSize":123340,"groups":[{"id":null,"label":"Datepicker.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/Datepicker.js","statSize":20644,"parsedSize":10232,"gzipSize":2516,"inaccurateSizes":true},{"label":"lib","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib","statSize":16569,"groups":[{"id":null,"label":"date-format.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/date-format.js","statSize":5595,"parsedSize":2773,"gzipSize":682,"inaccurateSizes":true},{"id":null,"label":"date.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/date.js","statSize":3301,"parsedSize":1636,"gzipSize":402,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/utils.js","statSize":1948,"parsedSize":965,"gzipSize":237,"inaccurateSizes":true},{"id":null,"label":"dom.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/dom.js","statSize":1573,"parsedSize":779,"gzipSize":191,"inaccurateSizes":true},{"id":null,"label":"event.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/event.js","statSize":4152,"parsedSize":2058,"gzipSize":506,"inaccurateSizes":true}],"parsedSize":8212,"gzipSize":2019,"inaccurateSizes":true},{"label":"i18n","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/i18n","statSize":572,"groups":[{"id":null,"label":"base-locales.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/i18n/base-locales.js","statSize":572,"parsedSize":283,"gzipSize":69,"inaccurateSizes":true}],"parsedSize":283,"gzipSize":69,"inaccurateSizes":true},{"label":"options","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options","statSize":10123,"groups":[{"id":null,"label":"defaultOptions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options/defaultOptions.js","statSize":882,"parsedSize":437,"gzipSize":107,"inaccurateSizes":true},{"id":null,"label":"processOptions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options/processOptions.js","statSize":9241,"parsedSize":4580,"gzipSize":1126,"inaccurateSizes":true}],"parsedSize":5017,"gzipSize":1234,"inaccurateSizes":true},{"label":"picker","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker","statSize":65223,"groups":[{"id":null,"label":"Picker.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/Picker.js","statSize":17542,"parsedSize":8695,"gzipSize":2138,"inaccurateSizes":true},{"label":"templates","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates","statSize":1623,"groups":[{"id":null,"label":"pickerTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/pickerTemplate.js","statSize":907,"parsedSize":449,"gzipSize":110,"inaccurateSizes":true},{"id":null,"label":"daysTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/daysTemplate.js","statSize":355,"parsedSize":175,"gzipSize":43,"inaccurateSizes":true},{"id":null,"label":"calendarWeeksTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/calendarWeeksTemplate.js","statSize":361,"parsedSize":178,"gzipSize":44,"inaccurateSizes":true}],"parsedSize":804,"gzipSize":197,"inaccurateSizes":true},{"label":"views","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views","statSize":46058,"groups":[{"id":null,"label":"DaysView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/DaysView.js","statSize":15196,"parsedSize":7532,"gzipSize":1852,"inaccurateSizes":true},{"id":null,"label":"MonthsView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/MonthsView.js","statSize":13383,"parsedSize":6633,"gzipSize":1631,"inaccurateSizes":true},{"id":null,"label":"YearsView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/YearsView.js","statSize":13161,"parsedSize":6523,"gzipSize":1604,"inaccurateSizes":true},{"id":null,"label":"View.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/View.js","statSize":4318,"parsedSize":2140,"gzipSize":526,"inaccurateSizes":true}],"parsedSize":22829,"gzipSize":5615,"inaccurateSizes":true}],"parsedSize":32329,"gzipSize":7951,"inaccurateSizes":true},{"label":"events","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events","statSize":10209,"groups":[{"id":null,"label":"functions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/functions.js","statSize":1627,"parsedSize":806,"gzipSize":198,"inaccurateSizes":true},{"id":null,"label":"inputFieldListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/inputFieldListeners.js","statSize":5648,"parsedSize":2799,"gzipSize":688,"inaccurateSizes":true},{"id":null,"label":"otherListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/otherListeners.js","statSize":844,"parsedSize":418,"gzipSize":102,"inaccurateSizes":true},{"id":null,"label":"pickerListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/pickerListeners.js","statSize":2090,"parsedSize":1035,"gzipSize":254,"inaccurateSizes":true}],"parsedSize":5060,"gzipSize":1244,"inaccurateSizes":true}],"parsedSize":61136,"gzipSize":15036,"inaccurateSizes":true},{"label":"redaxios@0.5.0/node_modules/redaxios/dist","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/redaxios@0.5.0/node_modules/redaxios/dist","statSize":2860,"groups":[{"id":null,"label":"redaxios.module.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/redaxios@0.5.0/node_modules/redaxios/dist/redaxios.module.js","statSize":2860,"parsedSize":1417,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":1417,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":98599,"gzipSize":24250,"inaccurateSizes":true}]}],"parsedSize":113997,"gzipSize":28038},{"label":"scss","path":"./src/scss","statSize":175846,"groups":[{"id":null,"label":"app.scss","path":"./src/scss/app.scss","statSize":175846}],"parsedSize":0,"gzipSize":0}],"parsedSize":113997,"gzipSize":28038}]},{"label":"js/app_sw.js","isAsset":true,"statSize":5513,"parsedSize":2270,"gzipSize":937,"groups":[{"label":"src/js","path":"./src/js","statSize":3225,"groups":[{"label":"libs","path":"./src/js/libs","statSize":164,"groups":[{"id":570,"label":"log.js","path":"./src/js/libs/log.js","statSize":164,"parsedSize":45,"gzipSize":57}],"parsedSize":45,"gzipSize":57},{"label":"types","path":"./src/js/types","statSize":3061,"groups":[{"id":831,"label":"sw.js","path":"./src/js/types/sw.js","statSize":3061,"parsedSize":1118,"gzipSize":549}],"parsedSize":1118,"gzipSize":549}],"parsedSize":1163,"gzipSize":567},{"label":"thirdparty","path":"./thirdparty","statSize":2288,"groups":[{"id":756,"label":"serviceworker-caches.js","path":"./thirdparty/serviceworker-caches.js","statSize":2288,"parsedSize":1107,"gzipSize":486}],"parsedSize":1107,"gzipSize":486}]},{"label":"js/app_cms.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":841,"label":"cms.scss","path":"./src/scss/types/cms.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_editor.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":104,"label":"editor.scss","path":"./src/scss/types/editor.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_map.api.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":191,"label":"map.api.scss","path":"./src/scss/types/map.api.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_order.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":706,"label":"order.scss","path":"./src/scss/types/order.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]}];
|
window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":406411,"parsedSize":114262,"gzipSize":28178,"groups":[{"label":"node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed","statSize":577,"groups":[{"id":826,"label":"index.js","path":"./node_modules/.pnpm/youtube-embed@1.0.0/node_modules/youtube-embed/index.js","statSize":577,"parsedSize":265,"gzipSize":218}],"parsedSize":265,"gzipSize":218},{"label":"src","path":"./src","statSize":405834,"groups":[{"label":"js","path":"./src/js","statSize":229988,"groups":[{"id":743,"label":"app.js + 47 modules (concatenated)","path":"./src/js/app.js + 47 modules (concatenated)","statSize":229988,"parsedSize":113997,"gzipSize":28036,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/app.js + 47 modules (concatenated)/src/js","statSize":31068,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/app.js","statSize":2398,"parsedSize":1188,"gzipSize":292,"inaccurateSizes":true},{"label":"main","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main","statSize":9770,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/index.js","statSize":85,"parsedSize":42,"gzipSize":10,"inaccurateSizes":true},{"id":null,"label":"visibility.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/visibility.js","statSize":898,"parsedSize":445,"gzipSize":109,"inaccurateSizes":true},{"id":null,"label":"touch.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/touch.js","statSize":1615,"parsedSize":800,"gzipSize":196,"inaccurateSizes":true},{"id":null,"label":"css-screen-size.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/css-screen-size.js","statSize":2650,"parsedSize":1313,"gzipSize":323,"inaccurateSizes":true},{"id":null,"label":"main.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/main.js","statSize":3109,"parsedSize":1541,"gzipSize":378,"inaccurateSizes":true},{"id":null,"label":"loading-spinner.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/main/loading-spinner.js","statSize":1413,"parsedSize":700,"gzipSize":172,"inaccurateSizes":true}],"parsedSize":4842,"gzipSize":1190,"inaccurateSizes":true},{"label":"ui","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui","statSize":8466,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/carousel.js","statSize":5195,"parsedSize":2574,"gzipSize":633,"inaccurateSizes":true},{"id":null,"label":"dropdown.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/dropdown.js","statSize":2865,"parsedSize":1420,"gzipSize":349,"inaccurateSizes":true},{"id":null,"label":"datepicker.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ui/datepicker.js","statSize":406,"parsedSize":201,"gzipSize":49,"inaccurateSizes":true}],"parsedSize":4196,"gzipSize":1032,"inaccurateSizes":true},{"label":"ajax","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax","statSize":7167,"groups":[{"id":null,"label":"online.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/online.js","statSize":2662,"parsedSize":1319,"gzipSize":324,"inaccurateSizes":true},{"id":null,"label":"lazy-images.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/lazy-images.js","statSize":1176,"parsedSize":582,"gzipSize":143,"inaccurateSizes":true},{"label":"models","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models","statSize":3329,"groups":[{"id":null,"label":"image.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/ajax/models/image.js","statSize":3329,"parsedSize":1650,"gzipSize":405,"inaccurateSizes":true}],"parsedSize":1650,"gzipSize":405,"inaccurateSizes":true}],"parsedSize":3552,"gzipSize":873,"inaccurateSizes":true},{"label":"layout","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout","statSize":1595,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/layout/index.js","statSize":1595,"parsedSize":790,"gzipSize":194,"inaccurateSizes":true}],"parsedSize":790,"gzipSize":194,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_events.js","statSize":1397,"parsedSize":692,"gzipSize":170,"inaccurateSizes":true},{"id":null,"label":"_consts.js","path":"./src/js/app.js + 47 modules (concatenated)/src/js/_consts.js","statSize":275,"parsedSize":136,"gzipSize":33,"inaccurateSizes":true}],"parsedSize":15399,"gzipSize":3787,"inaccurateSizes":true},{"label":"node_modules/.pnpm","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm","statSize":198920,"groups":[{"label":"@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js","statSize":17421,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/app.js","statSize":815,"parsedSize":403,"gzipSize":99,"inaccurateSizes":true},{"id":null,"label":"_events.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/_events.js","statSize":1366,"parsedSize":677,"gzipSize":166,"inaccurateSizes":true},{"id":null,"label":"window.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.1/node_modules/@a2nt/meta-lightbox-js/src/js/window.js","statSize":15240,"parsedSize":7553,"gzipSize":1857,"inaccurateSizes":true}],"parsedSize":8634,"gzipSize":2123,"inaccurateSizes":true},{"label":"bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src","statSize":55299,"groups":[{"id":null,"label":"carousel.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/carousel.js","statSize":23486,"parsedSize":11641,"gzipSize":2862,"inaccurateSizes":true},{"label":"dom","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom","statSize":18586,"groups":[{"id":null,"label":"event-handler.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/event-handler.js","statSize":11179,"parsedSize":5541,"gzipSize":1362,"inaccurateSizes":true},{"id":null,"label":"manipulator.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/manipulator.js","statSize":1986,"parsedSize":984,"gzipSize":242,"inaccurateSizes":true},{"id":null,"label":"selector-engine.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/selector-engine.js","statSize":3816,"parsedSize":1891,"gzipSize":465,"inaccurateSizes":true},{"id":null,"label":"data.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/dom/data.js","statSize":1605,"parsedSize":795,"gzipSize":195,"inaccurateSizes":true}],"parsedSize":9212,"gzipSize":2265,"inaccurateSizes":true},{"label":"util","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/util","statSize":9636,"groups":[{"id":null,"label":"index.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/util/index.js","statSize":9636,"parsedSize":4776,"gzipSize":1174,"inaccurateSizes":true}],"parsedSize":4776,"gzipSize":1174,"inaccurateSizes":true},{"id":null,"label":"base-component.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/bootstrap@5.1.3_@popperjs+core@2.11.5/node_modules/bootstrap/js/src/base-component.js","statSize":3591,"parsedSize":1779,"gzipSize":437,"inaccurateSizes":true}],"parsedSize":27409,"gzipSize":6741,"inaccurateSizes":true},{"label":"vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js","statSize":123340,"groups":[{"id":null,"label":"Datepicker.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/Datepicker.js","statSize":20644,"parsedSize":10232,"gzipSize":2516,"inaccurateSizes":true},{"label":"lib","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib","statSize":16569,"groups":[{"id":null,"label":"date-format.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/date-format.js","statSize":5595,"parsedSize":2773,"gzipSize":682,"inaccurateSizes":true},{"id":null,"label":"date.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/date.js","statSize":3301,"parsedSize":1636,"gzipSize":402,"inaccurateSizes":true},{"id":null,"label":"utils.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/utils.js","statSize":1948,"parsedSize":965,"gzipSize":237,"inaccurateSizes":true},{"id":null,"label":"dom.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/dom.js","statSize":1573,"parsedSize":779,"gzipSize":191,"inaccurateSizes":true},{"id":null,"label":"event.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/lib/event.js","statSize":4152,"parsedSize":2058,"gzipSize":506,"inaccurateSizes":true}],"parsedSize":8212,"gzipSize":2019,"inaccurateSizes":true},{"label":"i18n","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/i18n","statSize":572,"groups":[{"id":null,"label":"base-locales.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/i18n/base-locales.js","statSize":572,"parsedSize":283,"gzipSize":69,"inaccurateSizes":true}],"parsedSize":283,"gzipSize":69,"inaccurateSizes":true},{"label":"options","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options","statSize":10123,"groups":[{"id":null,"label":"defaultOptions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options/defaultOptions.js","statSize":882,"parsedSize":437,"gzipSize":107,"inaccurateSizes":true},{"id":null,"label":"processOptions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/options/processOptions.js","statSize":9241,"parsedSize":4580,"gzipSize":1126,"inaccurateSizes":true}],"parsedSize":5017,"gzipSize":1234,"inaccurateSizes":true},{"label":"picker","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker","statSize":65223,"groups":[{"id":null,"label":"Picker.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/Picker.js","statSize":17542,"parsedSize":8694,"gzipSize":2138,"inaccurateSizes":true},{"label":"templates","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates","statSize":1623,"groups":[{"id":null,"label":"pickerTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/pickerTemplate.js","statSize":907,"parsedSize":449,"gzipSize":110,"inaccurateSizes":true},{"id":null,"label":"daysTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/daysTemplate.js","statSize":355,"parsedSize":175,"gzipSize":43,"inaccurateSizes":true},{"id":null,"label":"calendarWeeksTemplate.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/templates/calendarWeeksTemplate.js","statSize":361,"parsedSize":178,"gzipSize":44,"inaccurateSizes":true}],"parsedSize":804,"gzipSize":197,"inaccurateSizes":true},{"label":"views","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views","statSize":46058,"groups":[{"id":null,"label":"DaysView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/DaysView.js","statSize":15196,"parsedSize":7532,"gzipSize":1852,"inaccurateSizes":true},{"id":null,"label":"MonthsView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/MonthsView.js","statSize":13383,"parsedSize":6633,"gzipSize":1631,"inaccurateSizes":true},{"id":null,"label":"YearsView.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/YearsView.js","statSize":13161,"parsedSize":6523,"gzipSize":1604,"inaccurateSizes":true},{"id":null,"label":"View.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/picker/views/View.js","statSize":4318,"parsedSize":2140,"gzipSize":526,"inaccurateSizes":true}],"parsedSize":22829,"gzipSize":5614,"inaccurateSizes":true}],"parsedSize":32328,"gzipSize":7950,"inaccurateSizes":true},{"label":"events","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events","statSize":10209,"groups":[{"id":null,"label":"functions.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/functions.js","statSize":1627,"parsedSize":806,"gzipSize":198,"inaccurateSizes":true},{"id":null,"label":"inputFieldListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/inputFieldListeners.js","statSize":5648,"parsedSize":2799,"gzipSize":688,"inaccurateSizes":true},{"id":null,"label":"otherListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/otherListeners.js","statSize":844,"parsedSize":418,"gzipSize":102,"inaccurateSizes":true},{"id":null,"label":"pickerListeners.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/vanillajs-datepicker@1.2.0/node_modules/vanillajs-datepicker/js/events/pickerListeners.js","statSize":2090,"parsedSize":1035,"gzipSize":254,"inaccurateSizes":true}],"parsedSize":5060,"gzipSize":1244,"inaccurateSizes":true}],"parsedSize":61135,"gzipSize":15035,"inaccurateSizes":true},{"label":"redaxios@0.5.0/node_modules/redaxios/dist","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/redaxios@0.5.0/node_modules/redaxios/dist","statSize":2860,"groups":[{"id":null,"label":"redaxios.module.js","path":"./src/js/app.js + 47 modules (concatenated)/node_modules/.pnpm/redaxios@0.5.0/node_modules/redaxios/dist/redaxios.module.js","statSize":2860,"parsedSize":1417,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":1417,"gzipSize":348,"inaccurateSizes":true}],"parsedSize":98597,"gzipSize":24248,"inaccurateSizes":true}]}],"parsedSize":113997,"gzipSize":28036},{"label":"scss","path":"./src/scss","statSize":175846,"groups":[{"id":null,"label":"app.scss","path":"./src/scss/app.scss","statSize":175846}],"parsedSize":0,"gzipSize":0}],"parsedSize":113997,"gzipSize":28036}]},{"label":"js/app_sw.js","isAsset":true,"statSize":5493,"parsedSize":2270,"gzipSize":937,"groups":[{"label":"src/js","path":"./src/js","statSize":3205,"groups":[{"label":"libs","path":"./src/js/libs","statSize":149,"groups":[{"id":570,"label":"log.js","path":"./src/js/libs/log.js","statSize":149,"parsedSize":45,"gzipSize":57}],"parsedSize":45,"gzipSize":57},{"label":"types","path":"./src/js/types","statSize":3056,"groups":[{"id":831,"label":"sw.js","path":"./src/js/types/sw.js","statSize":3056,"parsedSize":1118,"gzipSize":549}],"parsedSize":1118,"gzipSize":549}],"parsedSize":1163,"gzipSize":567},{"label":"thirdparty","path":"./thirdparty","statSize":2288,"groups":[{"id":756,"label":"serviceworker-caches.js","path":"./thirdparty/serviceworker-caches.js","statSize":2288,"parsedSize":1107,"gzipSize":486}],"parsedSize":1107,"gzipSize":486}]},{"label":"js/app_cms.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":841,"label":"cms.scss","path":"./src/scss/types/cms.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_editor.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":104,"label":"editor.scss","path":"./src/scss/types/editor.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_map.api.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":191,"label":"map.api.scss","path":"./src/scss/types/map.api.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_order.js","isAsset":true,"statSize":50,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/scss/types","path":"./src/scss/types","statSize":50,"groups":[{"id":706,"label":"order.scss","path":"./src/scss/types/order.scss","statSize":50}],"parsedSize":0,"gzipSize":0}]}];
|
||||||
window.defaultSizes = "parsed";
|
window.defaultSizes = "parsed";
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,12 @@
|
||||||
* Add your global events here
|
* Add your global events here
|
||||||
*/
|
*/
|
||||||
|
|
||||||
//import MAP_DRIVER from './_components/drivers/_map.google';
|
// import MAP_DRIVER from './_components/drivers/_map.google';
|
||||||
//import MAP_DRIVER from './_components/drivers/_map.mapbox';
|
// import MAP_DRIVER from './_components/drivers/_map.mapbox';
|
||||||
|
|
||||||
const CONSTS = {
|
const CONSTS = {
|
||||||
ENVS: ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"],
|
ENVS: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
|
||||||
//MAP_DRIVER,
|
// MAP_DRIVER,
|
||||||
};
|
}
|
||||||
|
|
||||||
export default CONSTS;
|
export default CONSTS
|
||||||
|
|
|
||||||
|
|
@ -42,4 +42,4 @@ export default {
|
||||||
FORM_STEPPED_FIRST_STEP: 'form-first-step',
|
FORM_STEPPED_FIRST_STEP: 'form-first-step',
|
||||||
FORM_STEPPED_LAST_STEP: 'form-last-step',
|
FORM_STEPPED_LAST_STEP: 'form-last-step',
|
||||||
FORM_FIELDS: 'input,textarea,select',
|
FORM_FIELDS: 'input,textarea,select',
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
import { InMemoryCache } from "@apollo/client";
|
import { InMemoryCache } from '@apollo/client'
|
||||||
|
|
||||||
//import { IonicStorageModule } from '@ionic/storage';
|
// import { IonicStorageModule } from '@ionic/storage';
|
||||||
//import { persistCache, IonicStorageWrapper } from 'apollo3-cache-persist';
|
// import { persistCache, IonicStorageWrapper } from 'apollo3-cache-persist';
|
||||||
import { persistCacheSync, LocalStorageWrapper } from "apollo3-cache-persist";
|
import { persistCacheSync, LocalStorageWrapper } from 'apollo3-cache-persist'
|
||||||
|
|
||||||
const cache = new InMemoryCache();
|
const cache = new InMemoryCache()
|
||||||
|
|
||||||
// await before instantiating ApolloClient, else queries might run before the cache is persisted
|
// await before instantiating ApolloClient, else queries might run before the cache is persisted
|
||||||
//await persistCache({
|
// await persistCache({
|
||||||
persistCacheSync({
|
persistCacheSync({
|
||||||
cache,
|
cache,
|
||||||
storage: new LocalStorageWrapper(window.localStorage),
|
storage: new LocalStorageWrapper(window.localStorage),
|
||||||
key: "web-persist",
|
key: 'web-persist',
|
||||||
maxSize: 1048576, // 1Mb
|
maxSize: 1048576, // 1Mb
|
||||||
//new IonicStorageWrapper(IonicStorageModule),
|
// new IonicStorageWrapper(IonicStorageModule),
|
||||||
});
|
})
|
||||||
|
|
||||||
export { cache };
|
export { cache }
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
import Events from "../../_events";
|
import Events from '../../_events'
|
||||||
|
|
||||||
import { cache } from "./cache";
|
import { cache } from './cache'
|
||||||
import {
|
import {
|
||||||
from,
|
from,
|
||||||
ApolloClient,
|
ApolloClient,
|
||||||
HttpLink,
|
HttpLink,
|
||||||
ApolloLink,
|
ApolloLink,
|
||||||
concat,
|
concat,
|
||||||
} from "@apollo/client";
|
} from '@apollo/client'
|
||||||
|
|
||||||
import { onError } from "@apollo/client/link/error";
|
import { onError } from '@apollo/client/link/error'
|
||||||
const NAME = "appolo";
|
const NAME = 'appolo'
|
||||||
|
|
||||||
const API_META = document.querySelector('meta[name="api_url"]');
|
const API_META = document.querySelector('meta[name="api_url"]')
|
||||||
const API_URL = API_META
|
const API_URL = API_META
|
||||||
? API_META.getAttribute("content")
|
? API_META.getAttribute('content')
|
||||||
: `${window.location.protocol}//${window.location.host}/graphql`;
|
: `${window.location.protocol}//${window.location.host}/graphql`
|
||||||
|
|
||||||
const authMiddleware = new ApolloLink((operation, forward) => {
|
const authMiddleware = new ApolloLink((operation, forward) => {
|
||||||
// add the authorization to the headers
|
// add the authorization to the headers
|
||||||
|
|
@ -23,26 +23,26 @@ const authMiddleware = new ApolloLink((operation, forward) => {
|
||||||
headers: {
|
headers: {
|
||||||
apikey: `${GRAPHQL_API_KEY}`,
|
apikey: `${GRAPHQL_API_KEY}`,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
return forward(operation);
|
return forward(operation)
|
||||||
});
|
})
|
||||||
|
|
||||||
console.info(`%cAPI: ${API_URL}`, "color:green;font-size:10px");
|
console.info(`%cAPI: ${API_URL}`, 'color:green;font-size:10px')
|
||||||
|
|
||||||
const link = from([
|
const link = from([
|
||||||
authMiddleware,
|
authMiddleware,
|
||||||
new ApolloLink((operation, forward) => {
|
new ApolloLink((operation, forward) => {
|
||||||
operation.setContext({
|
operation.setContext({
|
||||||
start: new Date(),
|
start: new Date(),
|
||||||
});
|
})
|
||||||
return forward(operation);
|
return forward(operation)
|
||||||
}),
|
}),
|
||||||
onError(({ operation, response, graphQLErrors, networkError, forward }) => {
|
onError(({ operation, response, graphQLErrors, networkError, forward }) => {
|
||||||
if (operation.operationName === "IgnoreErrorsQuery") {
|
if (operation.operationName === 'IgnoreErrorsQuery') {
|
||||||
console.error(`${NAME}: IgnoreErrorsQuery`);
|
console.error(`${NAME}: IgnoreErrorsQuery`)
|
||||||
response.errors = null;
|
response.errors = null
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (graphQLErrors) {
|
if (graphQLErrors) {
|
||||||
|
|
@ -50,11 +50,11 @@ const link = from([
|
||||||
console.error(
|
console.error(
|
||||||
`${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
|
`${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
|
||||||
)
|
)
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (networkError) {
|
if (networkError) {
|
||||||
/*let msg = '';
|
/* let msg = '';
|
||||||
switch (networkError.statusCode) {
|
switch (networkError.statusCode) {
|
||||||
case 404:
|
case 404:
|
||||||
msg = 'Not Found.';
|
msg = 'Not Found.';
|
||||||
|
|
@ -65,24 +65,24 @@ const link = from([
|
||||||
default:
|
default:
|
||||||
msg = 'Something went wrong.';
|
msg = 'Something went wrong.';
|
||||||
break;
|
break;
|
||||||
}*/
|
} */
|
||||||
console.error(`${NAME}: [Network error] ${networkError.statusCode}`);
|
console.error(`${NAME}: [Network error] ${networkError.statusCode}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
console.error(`${NAME}: [APOLLO_ERROR]`);
|
console.error(`${NAME}: [APOLLO_ERROR]`)
|
||||||
window.dispatchEvent(new Event(Events.APOLLO_ERROR));
|
window.dispatchEvent(new Event(Events.APOLLO_ERROR))
|
||||||
}),
|
}),
|
||||||
new ApolloLink((operation, forward) => {
|
new ApolloLink((operation, forward) => {
|
||||||
return forward(operation).map((data) => {
|
return forward(operation).map((data) => {
|
||||||
// data from a previous link
|
// data from a previous link
|
||||||
const time = new Date() - operation.getContext().start;
|
const time = new Date() - operation.getContext().start
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: operation ${operation.operationName} took ${time} ms to complete`
|
`${NAME}: operation ${operation.operationName} took ${time} ms to complete`
|
||||||
);
|
)
|
||||||
|
|
||||||
window.dispatchEvent(new Event(Events.ONLINE));
|
window.dispatchEvent(new Event(Events.ONLINE))
|
||||||
return data;
|
return data
|
||||||
});
|
})
|
||||||
}),
|
}),
|
||||||
new HttpLink({
|
new HttpLink({
|
||||||
uri: API_URL,
|
uri: API_URL,
|
||||||
|
|
@ -90,10 +90,10 @@ const link = from([
|
||||||
// Use explicit `window.fetch` so tha outgoing requests
|
// Use explicit `window.fetch` so tha outgoing requests
|
||||||
// are captured and deferred until the Service Worker is ready.
|
// are captured and deferred until the Service Worker is ready.
|
||||||
fetch: (...args) => fetch(...args),
|
fetch: (...args) => fetch(...args),
|
||||||
credentials: "same-origin", //'include',
|
credentials: 'same-origin', // 'include',
|
||||||
connectToDevTools: process.env.NODE_ENV === "development" ? true : false,
|
connectToDevTools: process.env.NODE_ENV === 'development',
|
||||||
}),
|
}),
|
||||||
]);
|
])
|
||||||
|
|
||||||
// Isolate Apollo client so it could be reused
|
// Isolate Apollo client so it could be reused
|
||||||
// in both application runtime and tests.
|
// in both application runtime and tests.
|
||||||
|
|
@ -101,6 +101,6 @@ const link = from([
|
||||||
const client = new ApolloClient({
|
const client = new ApolloClient({
|
||||||
cache,
|
cache,
|
||||||
link,
|
link,
|
||||||
});
|
})
|
||||||
|
|
||||||
export { client };
|
export { client }
|
||||||
|
|
|
||||||
|
|
@ -1,45 +1,45 @@
|
||||||
// browser tab visibility state detection
|
// browser tab visibility state detection
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Consts from "../_consts";
|
import Consts from '../_consts'
|
||||||
import ImageObject from "./models/image";
|
import ImageObject from './models/image'
|
||||||
|
|
||||||
export default ((W) => {
|
export default ((W) => {
|
||||||
const NAME = "main.lazy-images";
|
const NAME = 'main.lazy-images'
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = D.body;
|
const BODY = D.body
|
||||||
|
|
||||||
const loadLazyImages = () => {
|
const loadLazyImages = () => {
|
||||||
console.log(`${NAME}: Load lazy images`);
|
console.log(`${NAME}: Load lazy images`)
|
||||||
|
|
||||||
D.querySelectorAll(`[data-lazy-src]`).forEach((el) => {
|
D.querySelectorAll('[data-lazy-src]').forEach((el) => {
|
||||||
el.classList.remove("empty");
|
el.classList.remove('empty')
|
||||||
|
|
||||||
const img = new ImageObject();
|
const img = new ImageObject()
|
||||||
|
|
||||||
img.load(el.getAttribute("data-lazy-src"),el)
|
img.load(el.getAttribute('data-lazy-src'), el)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
el.setAttribute("src", result);
|
el.setAttribute('src', result)
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
el.classList.add("empty");
|
el.classList.add('empty')
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
D.querySelectorAll(`[data-lazy-bg]`).forEach((el) => {
|
D.querySelectorAll('[data-lazy-bg]').forEach((el) => {
|
||||||
el.classList.remove("empty");
|
el.classList.remove('empty')
|
||||||
const img = new ImageObject();
|
const img = new ImageObject()
|
||||||
|
|
||||||
img.load(el.getAttribute("data-lazy-bg"),el)
|
img.load(el.getAttribute('data-lazy-bg'), el)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
el.style.backgroundImage = `url(${result})`;
|
el.style.backgroundImage = `url(${result})`
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
el.classList.add("empty");
|
el.classList.add('empty')
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
W.addEventListener(`${Events.LODEDANDREADY}`, loadLazyImages);
|
W.addEventListener(`${Events.LODEDANDREADY}`, loadLazyImages)
|
||||||
W.addEventListener(`${Events.AJAX}`, loadLazyImages);
|
W.addEventListener(`${Events.AJAX}`, loadLazyImages)
|
||||||
})(window);
|
})(window)
|
||||||
|
|
|
||||||
|
|
@ -1,155 +1,155 @@
|
||||||
// browser tab visibility state detection
|
// browser tab visibility state detection
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Consts from "../_consts";
|
import Consts from '../_consts'
|
||||||
import Page from "./models/page.jsx";
|
import Page from './models/page.jsx'
|
||||||
|
|
||||||
import { getParents } from "../main/funcs";
|
import { getParents } from '../main/funcs'
|
||||||
|
|
||||||
import { Collapse } from "bootstrap";
|
import { Collapse } from 'bootstrap'
|
||||||
|
|
||||||
import SpinnerUI from "../main/loading-spinner";
|
import SpinnerUI from '../main/loading-spinner'
|
||||||
|
|
||||||
const MainUILinks = ((W) => {
|
const MainUILinks = ((W) => {
|
||||||
const NAME = "main.links";
|
const NAME = 'main.links'
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = D.body;
|
const BODY = D.body
|
||||||
|
|
||||||
class MainUILinks {
|
class MainUILinks {
|
||||||
window;
|
window
|
||||||
static init() {
|
static init () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.GraphPage = null;
|
ui.GraphPage = null
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
ui.loaded();
|
ui.loaded()
|
||||||
|
|
||||||
// history state switch
|
// history state switch
|
||||||
W.addEventListener("popstate", (e) => {
|
W.addEventListener('popstate', (e) => {
|
||||||
ui.popState(e);
|
ui.popState(e)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static loaded() {
|
static loaded () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
D.querySelectorAll(".graphql-page").forEach((el, i) => {
|
D.querySelectorAll('.graphql-page').forEach((el, i) => {
|
||||||
const el_id = el.getAttribute("href");
|
const el_id = el.getAttribute('href')
|
||||||
el.setAttribute(`data-${ui.name}-id`, el_id);
|
el.setAttribute(`data-${ui.name}-id`, el_id)
|
||||||
|
|
||||||
el.addEventListener("click", ui.loadClick);
|
el.addEventListener('click', ui.loadClick)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static setActiveLinks(link) {
|
static setActiveLinks (link) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach((el) => {
|
D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach((el) => {
|
||||||
el.classList.add("active");
|
el.classList.add('active')
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static reset() {
|
static reset () {
|
||||||
// reset focus
|
// reset focus
|
||||||
D.activeElement.blur();
|
D.activeElement.blur()
|
||||||
|
|
||||||
// remove active and loading classes
|
// remove active and loading classes
|
||||||
D.querySelectorAll(".graphql-page,.nav-item").forEach((el2) => {
|
D.querySelectorAll('.graphql-page,.nav-item').forEach((el2) => {
|
||||||
el2.classList.remove("active", "loading");
|
el2.classList.remove('active', 'loading')
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static popState(e) {
|
static popState (e) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
SpinnerUI.show();
|
SpinnerUI.show()
|
||||||
|
|
||||||
if (e.state && e.state.page) {
|
if (e.state && e.state.page) {
|
||||||
console.log(`${NAME}: [popstate] load`);
|
console.log(`${NAME}: [popstate] load`)
|
||||||
const state = JSON.parse(e.state.page);
|
const state = JSON.parse(e.state.page)
|
||||||
|
|
||||||
state.current = null;
|
state.current = null
|
||||||
state.popstate = true;
|
state.popstate = true
|
||||||
|
|
||||||
ui.reset();
|
ui.reset()
|
||||||
ui.setActiveLinks(e.state.link);
|
ui.setActiveLinks(e.state.link)
|
||||||
|
|
||||||
if (!ui.GraphPage) {
|
if (!ui.GraphPage) {
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: [popstate] GraphPage is missing. Have to render it first`
|
`${NAME}: [popstate] GraphPage is missing. Have to render it first`
|
||||||
);
|
)
|
||||||
|
|
||||||
ui.GraphPage = ReactDOM.render(
|
ui.GraphPage = ReactDOM.render(
|
||||||
<Page />,
|
<Page />,
|
||||||
document.getElementById("MainContent")
|
document.getElementById('MainContent')
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.GraphPage.setState(state);
|
ui.GraphPage.setState(state)
|
||||||
SpinnerUI.hide();
|
SpinnerUI.hide()
|
||||||
|
|
||||||
window.dispatchEvent(new Event(Events.AJAX));
|
window.dispatchEvent(new Event(Events.AJAX))
|
||||||
} else if (e.state && e.state.landing) {
|
} else if (e.state && e.state.landing) {
|
||||||
console.log(`${NAME}: [popstate] go to landing`);
|
console.log(`${NAME}: [popstate] go to landing`)
|
||||||
W.location.href = e.state.landing;
|
W.location.href = e.state.landing
|
||||||
} else {
|
} else {
|
||||||
console.warn(`${NAME}: [popstate] state is missing`);
|
console.warn(`${NAME}: [popstate] state is missing`)
|
||||||
console.log(e);
|
console.log(e)
|
||||||
SpinnerUI.hide();
|
SpinnerUI.hide()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// link specific event {this} = current event, not MainUILinks
|
// link specific event {this} = current event, not MainUILinks
|
||||||
static loadClick(e) {
|
static loadClick (e) {
|
||||||
console.groupCollapsed(`${NAME}: load on click`);
|
console.groupCollapsed(`${NAME}: load on click`)
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
const ui = MainUILinks;
|
const ui = MainUILinks
|
||||||
const el = e.currentTarget;
|
const el = e.currentTarget
|
||||||
|
|
||||||
SpinnerUI.show();
|
SpinnerUI.show()
|
||||||
|
|
||||||
ui.reset();
|
ui.reset()
|
||||||
el.classList.add("loading");
|
el.classList.add('loading')
|
||||||
el.classList.remove("response-404", "response-500", "response-523");
|
el.classList.remove('response-404', 'response-500', 'response-523')
|
||||||
BODY.classList.add("ajax-loading");
|
BODY.classList.add('ajax-loading')
|
||||||
|
|
||||||
// hide parent mobile nav
|
// hide parent mobile nav
|
||||||
const navs = getParents(el, ".collapse");
|
const navs = getParents(el, '.collapse')
|
||||||
if (navs.length) {
|
if (navs.length) {
|
||||||
navs.forEach((nav) => {
|
navs.forEach((nav) => {
|
||||||
const collapseInst = Collapse.getInstance(nav);
|
const collapseInst = Collapse.getInstance(nav)
|
||||||
if (collapseInst) {
|
if (collapseInst) {
|
||||||
collapseInst.hide();
|
collapseInst.hide()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// hide parent dropdown
|
// hide parent dropdown
|
||||||
/*const dropdowns = getParents(el, '.dropdown-menu');
|
/* const dropdowns = getParents(el, '.dropdown-menu');
|
||||||
if (dropdowns.length) {
|
if (dropdowns.length) {
|
||||||
const DropdownInst = Dropdown.getInstance(dropdowns[0]);
|
const DropdownInst = Dropdown.getInstance(dropdowns[0]);
|
||||||
DropdownInst.hide();
|
DropdownInst.hide();
|
||||||
}*/
|
} */
|
||||||
|
|
||||||
if (!ui.GraphPage) {
|
if (!ui.GraphPage) {
|
||||||
ui.GraphPage = ReactDOM.render(
|
ui.GraphPage = ReactDOM.render(
|
||||||
<Page />,
|
<Page />,
|
||||||
document.getElementById("MainContent")
|
document.getElementById('MainContent')
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const link = el.getAttribute("href") || el.getAttribute("data-href");
|
const link = el.getAttribute('href') || el.getAttribute('data-href')
|
||||||
|
|
||||||
ui.GraphPage.state.current = el;
|
ui.GraphPage.state.current = el
|
||||||
|
|
||||||
ui.GraphPage.load(link)
|
ui.GraphPage.load(link)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
BODY.classList.remove("ajax-loading");
|
BODY.classList.remove('ajax-loading')
|
||||||
el.classList.remove("loading");
|
el.classList.remove('loading')
|
||||||
el.classList.add("active");
|
el.classList.add('active')
|
||||||
|
|
||||||
D.loading_apollo_link = null;
|
D.loading_apollo_link = null
|
||||||
|
|
||||||
if (ui.GraphPage.state.Link) {
|
if (ui.GraphPage.state.Link) {
|
||||||
window.history.pushState(
|
window.history.pushState(
|
||||||
|
|
@ -159,24 +159,24 @@ const MainUILinks = ((W) => {
|
||||||
},
|
},
|
||||||
ui.GraphPage.state.Title,
|
ui.GraphPage.state.Title,
|
||||||
ui.GraphPage.state.Link
|
ui.GraphPage.state.Link
|
||||||
);
|
)
|
||||||
|
|
||||||
ui.setActiveLinks(ui.GraphPage.state.Link);
|
ui.setActiveLinks(ui.GraphPage.state.Link)
|
||||||
}
|
}
|
||||||
|
|
||||||
SpinnerUI.hide();
|
SpinnerUI.hide()
|
||||||
|
|
||||||
window.dispatchEvent(new Event(Events.AJAX));
|
window.dispatchEvent(new Event(Events.AJAX))
|
||||||
console.groupEnd(`${NAME}: load on click`);
|
console.groupEnd(`${NAME}: load on click`)
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.error(`${NAME}: loading error`);
|
console.error(`${NAME}: loading error`)
|
||||||
console.log(e);
|
console.log(e)
|
||||||
|
|
||||||
/*BODY.classList.remove('ajax-loading');
|
/* BODY.classList.remove('ajax-loading');
|
||||||
el.classList.remove('loading');*/
|
el.classList.remove('loading'); */
|
||||||
el.classList.add("error", `response-${e.status}`);
|
el.classList.add('error', `response-${e.status}`)
|
||||||
/*switch (e.status) {
|
/* switch (e.status) {
|
||||||
case 500:
|
case 500:
|
||||||
break;
|
break;
|
||||||
case 404:
|
case 404:
|
||||||
|
|
@ -185,37 +185,37 @@ const MainUILinks = ((W) => {
|
||||||
case 523:
|
case 523:
|
||||||
el.classList.add('unreachable');
|
el.classList.add('unreachable');
|
||||||
break;
|
break;
|
||||||
}*/
|
} */
|
||||||
|
|
||||||
//SpinnerUI.hide();
|
// SpinnerUI.hide();
|
||||||
|
|
||||||
//window.dispatchEvent(new Event(Events.AJAX));
|
// window.dispatchEvent(new Event(Events.AJAX));
|
||||||
console.groupEnd(`${NAME}: load on click`);
|
console.groupEnd(`${NAME}: load on click`)
|
||||||
|
|
||||||
console.log(`${NAME}: reloading page ${link}`);
|
console.log(`${NAME}: reloading page ${link}`)
|
||||||
|
|
||||||
// fallback loading
|
// fallback loading
|
||||||
W.location.href = link;
|
W.location.href = link
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
W.addEventListener(`${Events.LOADED}`, () => {
|
W.addEventListener(`${Events.LOADED}`, () => {
|
||||||
MainUILinks.init();
|
MainUILinks.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
W.addEventListener(`${Events.AJAX}`, () => {
|
W.addEventListener(`${Events.AJAX}`, () => {
|
||||||
MainUILinks.loaded();
|
MainUILinks.loaded()
|
||||||
});
|
})
|
||||||
|
|
||||||
// fallback
|
// fallback
|
||||||
/*W.addEventListener(`${Events.APOLLO_ERROR}`, (e) => {
|
/* W.addEventListener(`${Events.APOLLO_ERROR}`, (e) => {
|
||||||
console.error(`${NAME}: [APOLLO_ERROR] loading failure, reloading the page`);
|
console.error(`${NAME}: [APOLLO_ERROR] loading failure, reloading the page`);
|
||||||
//W.dispatchEvent(new Event(Events.OFFLINE));
|
//W.dispatchEvent(new Event(Events.OFFLINE));
|
||||||
if (D.loading_apollo_link) {
|
if (D.loading_apollo_link) {
|
||||||
W.location.href = D.loading_apollo_link;
|
W.location.href = D.loading_apollo_link;
|
||||||
}
|
}
|
||||||
});*/
|
}); */
|
||||||
})(window);
|
})(window)
|
||||||
|
|
||||||
export default MainUILinks;
|
export default MainUILinks
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
/*
|
/*
|
||||||
* Lightbox window
|
* Lightbox window
|
||||||
*/
|
*/
|
||||||
import { Component } from "react";
|
import { Component } from 'react'
|
||||||
import Events from "../../events";
|
import Events from '../../events'
|
||||||
|
|
||||||
import { client } from "../apollo/init";
|
import { client } from '../apollo/init'
|
||||||
import { gql } from "@apollo/client";
|
import { gql } from '@apollo/client'
|
||||||
|
|
||||||
class Page extends Component {
|
class Page extends Component {
|
||||||
state = {
|
state = {
|
||||||
|
|
@ -16,48 +16,48 @@ class Page extends Component {
|
||||||
current: null,
|
current: null,
|
||||||
ID: null,
|
ID: null,
|
||||||
URLSegment: null,
|
URLSegment: null,
|
||||||
ClassName: "Page",
|
ClassName: 'Page',
|
||||||
CSSClass: null,
|
CSSClass: null,
|
||||||
Title: null,
|
Title: null,
|
||||||
Summary: null,
|
Summary: null,
|
||||||
Link: null,
|
Link: null,
|
||||||
URL: null,
|
URL: null,
|
||||||
Elements: [],
|
Elements: [],
|
||||||
page: null,
|
page: null
|
||||||
};
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentDidUpdate () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
if (ui.state.Title) {
|
if (ui.state.Title) {
|
||||||
document.title = ui.state.Title;
|
document.title = ui.state.Title
|
||||||
|
|
||||||
if (ui.state.URL) {
|
if (ui.state.URL) {
|
||||||
window.history.pushState(
|
window.history.pushState(
|
||||||
{
|
{
|
||||||
page: JSON.stringify(ui.state),
|
page: JSON.stringify(ui.state)
|
||||||
},
|
},
|
||||||
ui.state.Title,
|
ui.state.Title,
|
||||||
ui.state.URL
|
ui.state.URL
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ui.state.Elements.length) {
|
if (ui.state.Elements.length) {
|
||||||
window.dispatchEvent(new Event(Events.AJAX));
|
window.dispatchEvent(new Event(Events.AJAX))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.name = ui.constructor.name;
|
ui.name = ui.constructor.name
|
||||||
console.log(`${ui.name}: init`);
|
console.log(`${ui.name}: init`)
|
||||||
}
|
}
|
||||||
|
|
||||||
reset = () => {
|
reset = () => {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.setState({
|
ui.setState({
|
||||||
type: [],
|
type: [],
|
||||||
|
|
@ -67,12 +67,12 @@ class Page extends Component {
|
||||||
ID: null,
|
ID: null,
|
||||||
Title: null,
|
Title: null,
|
||||||
URL: null,
|
URL: null,
|
||||||
Elements: [],
|
Elements: []
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
load = (link) => {
|
load = (link) => {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const query = gql(`
|
const query = gql(`
|
||||||
query Pages {
|
query Pages {
|
||||||
readPages(URLSegment: "home", limit: 1, offset: 0) {
|
readPages(URLSegment: "home", limit: 1, offset: 0) {
|
||||||
|
|
@ -112,37 +112,37 @@ class Page extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`);
|
`)
|
||||||
|
|
||||||
ui.reset();
|
ui.reset()
|
||||||
ui.setState({
|
ui.setState({
|
||||||
Title: "Loading ...",
|
Title: 'Loading ...',
|
||||||
loading: true,
|
loading: true
|
||||||
});
|
})
|
||||||
console.log(
|
console.log(
|
||||||
client.readQuery({
|
client.readQuery({
|
||||||
query,
|
query
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
client
|
client
|
||||||
.query({
|
.query({
|
||||||
query: query,
|
query
|
||||||
})
|
})
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
const page = resp.data.readPages.edges[0].node;
|
const page = resp.data.readPages.edges[0].node
|
||||||
|
|
||||||
// write to cache
|
// write to cache
|
||||||
client.writeQuery({
|
client.writeQuery({
|
||||||
query,
|
query,
|
||||||
data: {
|
data: {
|
||||||
resp,
|
resp
|
||||||
},
|
}
|
||||||
});
|
})
|
||||||
console.log(
|
console.log(
|
||||||
client.readQuery({
|
client.readQuery({
|
||||||
query,
|
query
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
|
|
||||||
ui.setState({
|
ui.setState({
|
||||||
ID: page.ID,
|
ID: page.ID,
|
||||||
|
|
@ -154,74 +154,74 @@ class Page extends Component {
|
||||||
Link: page.Link,
|
Link: page.Link,
|
||||||
Elements: page.Elements.edges,
|
Elements: page.Elements.edges,
|
||||||
URL: page.Link || link,
|
URL: page.Link || link,
|
||||||
loading: false,
|
loading: false
|
||||||
});
|
})
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error(error);
|
console.error(error)
|
||||||
|
|
||||||
let msg = "";
|
let msg = ''
|
||||||
|
|
||||||
if (error.response) {
|
if (error.response) {
|
||||||
switch (error.response.status) {
|
switch (error.response.status) {
|
||||||
case 404:
|
case 404:
|
||||||
msg = "Not Found.";
|
msg = 'Not Found.'
|
||||||
break;
|
break
|
||||||
case 500:
|
case 500:
|
||||||
msg = "Server issue, please try again latter.";
|
msg = 'Server issue, please try again latter.'
|
||||||
break;
|
break
|
||||||
default:
|
default:
|
||||||
msg = "Something went wrong.";
|
msg = 'Something went wrong.'
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
} else if (error.request) {
|
} else if (error.request) {
|
||||||
msg = "No response received";
|
msg = 'No response received'
|
||||||
} else {
|
} else {
|
||||||
console.warn("Error", error.message);
|
console.warn('Error', error.message)
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.setState({
|
ui.setState({
|
||||||
error: msg,
|
error: msg
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
getHtml = (html) => {
|
getHtml = (html) => {
|
||||||
const decodeHtmlEntity = (input) => {
|
const decodeHtmlEntity = (input) => {
|
||||||
var doc = new DOMParser().parseFromString(input, "text/html");
|
const doc = new DOMParser().parseFromString(input, 'text/html')
|
||||||
return doc.documentElement.textContent;
|
return doc.documentElement.textContent
|
||||||
};
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
__html: decodeHtmlEntity(html),
|
__html: decodeHtmlEntity(html)
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
render() {
|
render () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const name = ui.name;
|
const name = ui.name
|
||||||
const className = `elemental-area page-${ui.state.CSSClass} url-${ui.state.URLSegment}`;
|
const className = `elemental-area page-${ui.state.CSSClass} url-${ui.state.URLSegment}`
|
||||||
|
|
||||||
const ElementItem = (props) => (
|
const ElementItem = (props) => (
|
||||||
<div dangerouslySetInnerHTML={props.html}></div>
|
<div dangerouslySetInnerHTML={props.html} />
|
||||||
);
|
)
|
||||||
|
|
||||||
let html = "";
|
let html = ''
|
||||||
if (ui.state.Elements.length) {
|
if (ui.state.Elements.length) {
|
||||||
ui.state.Elements.map((el) => {
|
ui.state.Elements.map((el) => {
|
||||||
html += el.node.Render;
|
html += el.node.Render
|
||||||
});
|
})
|
||||||
} else {
|
} else {
|
||||||
html += '<div class="loading">Loading ...</div>';
|
html += '<div class="loading">Loading ...</div>'
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={className}
|
className={className}
|
||||||
dangerouslySetInnerHTML={ui.getHtml(html)}
|
dangerouslySetInnerHTML={ui.getHtml(html)}
|
||||||
></div>
|
/>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Page;
|
export default Page
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,82 @@
|
||||||
import axios from "redaxios";
|
import axios from 'redaxios'
|
||||||
|
|
||||||
const NAME = "ajax.models.image";
|
const NAME = 'ajax.models.image'
|
||||||
|
|
||||||
const API_STATIC = document.querySelector('meta[name="api_static_domain"]');
|
const API_STATIC = document.querySelector('meta[name="api_static_domain"]')
|
||||||
const API_STATIC_URL = API_STATIC
|
const API_STATIC_URL = API_STATIC
|
||||||
? API_STATIC.getAttribute("content")
|
? API_STATIC.getAttribute('content')
|
||||||
: `${window.location.protocol}//${window.location.host}`;
|
: `${window.location.protocol}//${window.location.host}`
|
||||||
|
|
||||||
console.log(`${NAME} [static url]: ${API_STATIC_URL}`);
|
console.log(`${NAME} [static url]: ${API_STATIC_URL}`)
|
||||||
|
|
||||||
class ImageObject {
|
class ImageObject {
|
||||||
constructor() {
|
constructor () {
|
||||||
}
|
}
|
||||||
|
|
||||||
load(url, el) {
|
load (url, el) {
|
||||||
const imageUrl = url.startsWith("http") ? url : API_STATIC_URL + url;
|
const imageUrl = url.startsWith('http') ? url : API_STATIC_URL + url
|
||||||
|
|
||||||
if(el) {
|
if (el) {
|
||||||
el.classList.add("loading");
|
el.classList.add('loading')
|
||||||
el.classList.remove("loading__network-error");
|
el.classList.remove('loading__network-error')
|
||||||
}
|
}
|
||||||
|
|
||||||
// offline response will be served by caching service worker
|
// offline response will be served by caching service worker
|
||||||
const promise = new Promise((resolve, reject) => {
|
const promise = new Promise((resolve, reject) => {
|
||||||
axios
|
axios
|
||||||
.get(imageUrl, {
|
.get(imageUrl, {
|
||||||
responseType: "blob",
|
responseType: 'blob',
|
||||||
})
|
})
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
const reader = new FileReader(); // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader
|
const reader = new FileReader() // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/FileReader
|
||||||
reader.readAsDataURL(response.data);
|
reader.readAsDataURL(response.data)
|
||||||
reader.onload = () => {
|
reader.onload = () => {
|
||||||
const imageDataUrl = reader.result;
|
const imageDataUrl = reader.result
|
||||||
if(el){
|
if (el) {
|
||||||
//el.setAttribute("src", imageDataUrl);
|
// el.setAttribute("src", imageDataUrl);
|
||||||
el.classList.remove("loading");
|
el.classList.remove('loading')
|
||||||
el.classList.add("loading__success");
|
el.classList.add('loading__success')
|
||||||
}
|
}
|
||||||
|
|
||||||
resolve(imageDataUrl);
|
resolve(imageDataUrl)
|
||||||
};
|
}
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
console.warn(e);
|
console.warn(e)
|
||||||
|
|
||||||
if (e.response) {
|
if (e.response) {
|
||||||
switch (e.response.status) {
|
switch (e.response.status) {
|
||||||
case 404:
|
case 404:
|
||||||
msg = "Not Found.";
|
msg = 'Not Found.'
|
||||||
break;
|
break
|
||||||
case 500:
|
case 500:
|
||||||
msg = "Server issue, please try again latter.";
|
msg = 'Server issue, please try again latter.'
|
||||||
break;
|
break
|
||||||
default:
|
default:
|
||||||
msg = "Something went wrong.";
|
msg = 'Something went wrong.'
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
console.error(`${NAME} [${imageUrl}]: ${msg}`);
|
console.error(`${NAME} [${imageUrl}]: ${msg}`)
|
||||||
} else if (e.request) {
|
} else if (e.request) {
|
||||||
msg = "No response received";
|
msg = 'No response received'
|
||||||
console.error(`${NAME} [${imageUrl}]: ${msg}`);
|
console.error(`${NAME} [${imageUrl}]: ${msg}`)
|
||||||
} else {
|
} else {
|
||||||
console.error(`${NAME} [${imageUrl}]: ${e.message}`);
|
console.error(`${NAME} [${imageUrl}]: ${e.message}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
if(el){
|
if (el) {
|
||||||
el.classList.remove("loading");
|
el.classList.remove('loading')
|
||||||
el.classList.add("loading__network-error");
|
el.classList.add('loading__network-error')
|
||||||
el.classList.add("empty");
|
el.classList.add('empty')
|
||||||
}
|
}
|
||||||
|
|
||||||
reject(e);
|
reject(e)
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
return promise;
|
return promise
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ImageObject;
|
export default ImageObject
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,60 @@
|
||||||
/*
|
/*
|
||||||
* page #MainContent area
|
* page #MainContent area
|
||||||
*/
|
*/
|
||||||
import { Component } from "react";
|
import { Component } from 'react'
|
||||||
|
|
||||||
import { useQuery, gql } from "@apollo/client";
|
import { useQuery, gql } from '@apollo/client'
|
||||||
import { client } from "../apollo/init";
|
import { client } from '../apollo/init'
|
||||||
import { cache } from "../apollo/cache";
|
import { cache } from '../apollo/cache'
|
||||||
|
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = document.body;
|
const BODY = document.body
|
||||||
|
|
||||||
class Page extends Component {
|
class Page extends Component {
|
||||||
state = {
|
state = {
|
||||||
type: [],
|
type: [],
|
||||||
shown: false,
|
shown: false,
|
||||||
Title: "Loading ...",
|
Title: 'Loading ...',
|
||||||
loading: true,
|
loading: true,
|
||||||
error: false,
|
error: false,
|
||||||
current: null,
|
current: null,
|
||||||
ID: null,
|
ID: null,
|
||||||
URLSegment: null,
|
URLSegment: null,
|
||||||
ClassName: "Page",
|
ClassName: 'Page',
|
||||||
CSSClass: null,
|
CSSClass: null,
|
||||||
Summary: null,
|
Summary: null,
|
||||||
Link: null,
|
Link: null,
|
||||||
URL: null,
|
URL: null,
|
||||||
HTML: null,
|
HTML: null,
|
||||||
Elements: [],
|
Elements: [],
|
||||||
page: null,
|
page: null
|
||||||
};
|
}
|
||||||
|
|
||||||
componentDidUpdate() {
|
componentDidUpdate () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
if (ui.state.Title) {
|
if (ui.state.Title) {
|
||||||
document.title = ui.state.Title;
|
document.title = ui.state.Title
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.name = ui.constructor.name;
|
ui.name = ui.constructor.name
|
||||||
ui.empty_state = ui.state;
|
ui.empty_state = ui.state
|
||||||
|
|
||||||
console.log(`${ui.name}: init`);
|
console.log(`${ui.name}: init`)
|
||||||
}
|
}
|
||||||
|
|
||||||
isOnline = () => {
|
isOnline = () => {
|
||||||
return BODY.classList.contains("is-online");
|
return BODY.classList.contains('is-online')
|
||||||
};
|
}
|
||||||
|
|
||||||
load = (link) => {
|
load = (link) => {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const query = gql(`query Pages {
|
const query = gql(`query Pages {
|
||||||
|
|
@ -74,89 +74,89 @@ class Page extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}`);
|
}`)
|
||||||
|
|
||||||
if (!ui.isOnline()) {
|
if (!ui.isOnline()) {
|
||||||
const data = client.readQuery({
|
const data = client.readQuery({
|
||||||
query,
|
query
|
||||||
});
|
})
|
||||||
|
|
||||||
if (data && ui.processResponse(data)) {
|
if (data && ui.processResponse(data)) {
|
||||||
console.log(`${ui.name}: Offline cached response`);
|
console.log(`${ui.name}: Offline cached response`)
|
||||||
resolve(data);
|
resolve(data)
|
||||||
} else {
|
} else {
|
||||||
console.log(`${ui.name}: No offline response`);
|
console.log(`${ui.name}: No offline response`)
|
||||||
|
|
||||||
ui.setState(
|
ui.setState(
|
||||||
Object.assign(ui.empty_state, {
|
Object.assign(ui.empty_state, {
|
||||||
Title: "Offline",
|
Title: 'Offline',
|
||||||
CSSClass: "graphql__status-523",
|
CSSClass: 'graphql__status-523',
|
||||||
Summary: "You're Offline. The page is not available now.",
|
Summary: "You're Offline. The page is not available now.",
|
||||||
loading: false,
|
loading: false
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
|
|
||||||
reject({
|
reject({
|
||||||
status: 523,
|
status: 523
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (!ui.state.loading) {
|
if (!ui.state.loading) {
|
||||||
ui.setState(ui.empty_state);
|
ui.setState(ui.empty_state)
|
||||||
}
|
}
|
||||||
|
|
||||||
client
|
client
|
||||||
.query({
|
.query({
|
||||||
query: query,
|
query,
|
||||||
fetchPolicy: ui.isOnline() ? "no-cache" : "cache-first",
|
fetchPolicy: ui.isOnline() ? 'no-cache' : 'cache-first'
|
||||||
})
|
})
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
// write to cache
|
// write to cache
|
||||||
const data = resp.data;
|
const data = resp.data
|
||||||
client.writeQuery({
|
client.writeQuery({
|
||||||
query,
|
query,
|
||||||
data: data,
|
data
|
||||||
});
|
})
|
||||||
|
|
||||||
if (ui.processResponse(data)) {
|
if (ui.processResponse(data)) {
|
||||||
console.log(`${ui.name}: got the server response`);
|
console.log(`${ui.name}: got the server response`)
|
||||||
resolve(data);
|
resolve(data)
|
||||||
} else {
|
} else {
|
||||||
console.log(`${ui.name}: not found`);
|
console.log(`${ui.name}: not found`)
|
||||||
reject({
|
reject({
|
||||||
status: 404,
|
status: 404
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
reject({
|
reject({
|
||||||
status: 500,
|
status: 500,
|
||||||
error: error,
|
error
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
processResponse = (data) => {
|
processResponse = (data) => {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
if (!data.readPages.edges.length) {
|
if (!data.readPages.edges.length) {
|
||||||
console.log(`${ui.name}: not found`);
|
console.log(`${ui.name}: not found`)
|
||||||
|
|
||||||
ui.setState(
|
ui.setState(
|
||||||
Object.assign(ui.empty_state, {
|
Object.assign(ui.empty_state, {
|
||||||
Title: "Not Found",
|
Title: 'Not Found',
|
||||||
CSSClass: "graphql__status-404",
|
CSSClass: 'graphql__status-404',
|
||||||
Summary: "The page is not found.",
|
Summary: 'The page is not found.',
|
||||||
loading: false,
|
loading: false
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
|
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
const page = data.readPages.edges[0].node;
|
const page = data.readPages.edges[0].node
|
||||||
ui.setState({
|
ui.setState({
|
||||||
ID: page.ID,
|
ID: page.ID,
|
||||||
Title: page.Title,
|
Title: page.Title,
|
||||||
|
|
@ -166,59 +166,59 @@ class Page extends Component {
|
||||||
Summary: page.Summary,
|
Summary: page.Summary,
|
||||||
Link: page.Link,
|
Link: page.Link,
|
||||||
HTML: page.HTML,
|
HTML: page.HTML,
|
||||||
Elements: [], //page.Elements.edges,
|
Elements: [], // page.Elements.edges,
|
||||||
loading: false,
|
loading: false
|
||||||
});
|
})
|
||||||
|
|
||||||
return true;
|
return true
|
||||||
};
|
}
|
||||||
|
|
||||||
getHtml = (html) => {
|
getHtml = (html) => {
|
||||||
const decodeHtmlEntity = (input) => {
|
const decodeHtmlEntity = (input) => {
|
||||||
var doc = new DOMParser().parseFromString(input, "text/html");
|
const doc = new DOMParser().parseFromString(input, 'text/html')
|
||||||
return doc.documentElement.textContent;
|
return doc.documentElement.textContent
|
||||||
};
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
__html: decodeHtmlEntity(html),
|
__html: decodeHtmlEntity(html)
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
render() {
|
render () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const name = ui.name;
|
const name = ui.name
|
||||||
const className = `elemental-area graphql__page page-${ui.state.CSSClass} url-${ui.state.URLSegment}`;
|
const className = `elemental-area graphql__page page-${ui.state.CSSClass} url-${ui.state.URLSegment}`
|
||||||
|
|
||||||
const ElementItem = (props) => (
|
const ElementItem = (props) => (
|
||||||
<div dangerouslySetInnerHTML={props.html}></div>
|
<div dangerouslySetInnerHTML={props.html} />
|
||||||
);
|
)
|
||||||
|
|
||||||
let html = "";
|
let html = ''
|
||||||
if (ui.state.HTML) {
|
if (ui.state.HTML) {
|
||||||
console.log(`${ui.name}: HTML only`);
|
console.log(`${ui.name}: HTML only`)
|
||||||
html = ui.state.HTML;
|
html = ui.state.HTML
|
||||||
} else if (ui.state.Elements.length) {
|
} else if (ui.state.Elements.length) {
|
||||||
console.log(`${ui.name}: render`);
|
console.log(`${ui.name}: render`)
|
||||||
ui.state.Elements.map((el) => {
|
ui.state.Elements.map((el) => {
|
||||||
html += el.node.Render;
|
html += el.node.Render
|
||||||
});
|
})
|
||||||
} else if (ui.state.Summary && ui.state.Summary.length) {
|
} else if (ui.state.Summary && ui.state.Summary.length) {
|
||||||
console.log(`${ui.name}: summary only`);
|
console.log(`${ui.name}: summary only`)
|
||||||
html = `<div class="summary">${ui.state.Summary}</div>`;
|
html = `<div class="summary">${ui.state.Summary}</div>`
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ui.state.loading) {
|
if (ui.state.loading) {
|
||||||
const spinner = D.getElementById("PageLoading");
|
const spinner = D.getElementById('PageLoading')
|
||||||
html = `<div class="loading">Loading ...</div>`;
|
html = '<div class="loading">Loading ...</div>'
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={className}
|
className={className}
|
||||||
dangerouslySetInnerHTML={ui.getHtml(html)}
|
dangerouslySetInnerHTML={ui.getHtml(html)}
|
||||||
></div>
|
/>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Page;
|
export default Page
|
||||||
|
|
|
||||||
|
|
@ -1,102 +1,102 @@
|
||||||
// ping online/offline state switch and detection
|
// ping online/offline state switch and detection
|
||||||
import axios from "redaxios";
|
import axios from 'redaxios'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Consts from "../_consts";
|
import Consts from '../_consts'
|
||||||
|
|
||||||
export default ((W) => {
|
export default ((W) => {
|
||||||
const NAME = "main.online";
|
const NAME = 'main.online'
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = D.body;
|
const BODY = D.body
|
||||||
|
|
||||||
let pingInterval;
|
let pingInterval
|
||||||
const PING_META = D.querySelector('meta[name="ping"]');
|
const PING_META = D.querySelector('meta[name="ping"]')
|
||||||
|
|
||||||
let update_online_status_lock = false;
|
let update_online_status_lock = false
|
||||||
const UPDATE_ONLINE_STATUS = (online) => {
|
const UPDATE_ONLINE_STATUS = (online) => {
|
||||||
if (update_online_status_lock) {
|
if (update_online_status_lock) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
update_online_status_lock = true;
|
update_online_status_lock = true
|
||||||
if (online) {
|
if (online) {
|
||||||
if (BODY.classList.contains("is-offline")) {
|
if (BODY.classList.contains('is-offline')) {
|
||||||
console.log(`${NAME}: back Online`);
|
console.log(`${NAME}: back Online`)
|
||||||
W.dispatchEvent(new Event(Events.BACKONLINE));
|
W.dispatchEvent(new Event(Events.BACKONLINE))
|
||||||
} else {
|
} else {
|
||||||
console.log(`${NAME}: Online`);
|
console.log(`${NAME}: Online`)
|
||||||
W.dispatchEvent(new Event(Events.ONLINE));
|
W.dispatchEvent(new Event(Events.ONLINE))
|
||||||
}
|
}
|
||||||
|
|
||||||
BODY.classList.add("is-online");
|
BODY.classList.add('is-online')
|
||||||
BODY.classList.remove("is-offline");
|
BODY.classList.remove('is-offline')
|
||||||
|
|
||||||
if (PING_META && !pingInterval) {
|
if (PING_META && !pingInterval) {
|
||||||
console.log(`${NAME}: SESSION_PING is active`);
|
console.log(`${NAME}: SESSION_PING is active`)
|
||||||
pingInterval = setInterval(SESSION_PING, 300000); // 5 min in ms
|
pingInterval = setInterval(SESSION_PING, 300000) // 5 min in ms
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log(`${NAME}: Offline`);
|
console.log(`${NAME}: Offline`)
|
||||||
|
|
||||||
BODY.classList.add("is-offline");
|
BODY.classList.add('is-offline')
|
||||||
BODY.classList.remove("is-online");
|
BODY.classList.remove('is-online')
|
||||||
|
|
||||||
clearInterval(pingInterval);
|
clearInterval(pingInterval)
|
||||||
pingInterval = null;
|
pingInterval = null
|
||||||
|
|
||||||
W.dispatchEvent(new Event(Events.OFFLINE));
|
W.dispatchEvent(new Event(Events.OFFLINE))
|
||||||
}
|
}
|
||||||
|
|
||||||
update_online_status_lock = false;
|
update_online_status_lock = false
|
||||||
};
|
}
|
||||||
|
|
||||||
// session ping
|
// session ping
|
||||||
let session_ping_lock = false;
|
let session_ping_lock = false
|
||||||
const SESSION_PING = () => {
|
const SESSION_PING = () => {
|
||||||
if (session_ping_lock || BODY.classList.contains("is-offline")) {
|
if (session_ping_lock || BODY.classList.contains('is-offline')) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const PING_URL = PING_META.getAttribute("content");
|
const PING_URL = PING_META.getAttribute('content')
|
||||||
|
|
||||||
console.log(`${NAME}: session ping`);
|
console.log(`${NAME}: session ping`)
|
||||||
session_ping_lock = true;
|
session_ping_lock = true
|
||||||
|
|
||||||
axios
|
axios
|
||||||
.post(PING_URL, {})
|
.post(PING_URL, {})
|
||||||
.then((resp) => {
|
.then((resp) => {
|
||||||
session_ping_lock = false;
|
session_ping_lock = false
|
||||||
UPDATE_ONLINE_STATUS(true);
|
UPDATE_ONLINE_STATUS(true)
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.error(error);
|
console.error(error)
|
||||||
console.warn(`${NAME}: SESSION_PING failed`);
|
console.warn(`${NAME}: SESSION_PING failed`)
|
||||||
|
|
||||||
session_ping_lock = false;
|
session_ping_lock = false
|
||||||
UPDATE_ONLINE_STATUS(false);
|
UPDATE_ONLINE_STATUS(false)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
// current browser online state
|
// current browser online state
|
||||||
|
|
||||||
const navigatorStateUpdate = () => {
|
const navigatorStateUpdate = () => {
|
||||||
if (typeof navigator.onLine !== "undefined") {
|
if (typeof navigator.onLine !== 'undefined') {
|
||||||
if (!navigator.onLine) {
|
if (!navigator.onLine) {
|
||||||
UPDATE_ONLINE_STATUS(false);
|
UPDATE_ONLINE_STATUS(false)
|
||||||
} else {
|
} else {
|
||||||
UPDATE_ONLINE_STATUS(true);
|
UPDATE_ONLINE_STATUS(true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
W.addEventListener(`${Events.OFFLINE}`, () => {
|
W.addEventListener(`${Events.OFFLINE}`, () => {
|
||||||
UPDATE_ONLINE_STATUS(false);
|
UPDATE_ONLINE_STATUS(false)
|
||||||
});
|
})
|
||||||
|
|
||||||
W.addEventListener(`${Events.ONLINE}`, () => {
|
W.addEventListener(`${Events.ONLINE}`, () => {
|
||||||
UPDATE_ONLINE_STATUS(true);
|
UPDATE_ONLINE_STATUS(true)
|
||||||
});
|
})
|
||||||
|
|
||||||
W.addEventListener(`${Events.LOADED}`, navigatorStateUpdate);
|
W.addEventListener(`${Events.LOADED}`, navigatorStateUpdate)
|
||||||
W.addEventListener(`${Events.AJAX}`, navigatorStateUpdate);
|
W.addEventListener(`${Events.AJAX}`, navigatorStateUpdate)
|
||||||
})(window);
|
})(window)
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,44 @@
|
||||||
'use strict';
|
'use strict'
|
||||||
/*
|
/*
|
||||||
* UI Basics
|
* UI Basics
|
||||||
*/
|
*/
|
||||||
//import $ from 'jquery';
|
// import $ from 'jquery';
|
||||||
import '../scss/app.scss';
|
import '../scss/app.scss'
|
||||||
|
|
||||||
import Events from './_events';
|
import Events from './_events'
|
||||||
import './main';
|
import './main'
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Extra functionality
|
* Extra functionality
|
||||||
*/
|
*/
|
||||||
import '@a2nt/meta-lightbox-js/src/js/app';
|
import '@a2nt/meta-lightbox-js/src/js/app'
|
||||||
import './ui/carousel';
|
import './ui/carousel'
|
||||||
import './ui/dropdown';
|
import './ui/dropdown'
|
||||||
import './ui/datepicker';
|
import './ui/datepicker'
|
||||||
//import './ui/ui.instagram.feed';
|
// import './ui/ui.instagram.feed';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* AJAX functionality
|
* AJAX functionality
|
||||||
*/
|
*/
|
||||||
//import './ajax/links';
|
// import './ajax/links';
|
||||||
import './ajax/online';
|
import './ajax/online'
|
||||||
import './ajax/lazy-images';
|
import './ajax/lazy-images'
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Site specific modules
|
* Site specific modules
|
||||||
*/
|
*/
|
||||||
import './layout';
|
import './layout'
|
||||||
|
|
||||||
//import 'hammerjs/hammer';
|
// import 'hammerjs/hammer';
|
||||||
//import 'jquery-hammerjs/jquery.hammer';
|
// import 'jquery-hammerjs/jquery.hammer';
|
||||||
|
|
||||||
// Routie
|
// Routie
|
||||||
//import 'pouchdb/dist/pouchdb';
|
// import 'pouchdb/dist/pouchdb';
|
||||||
//import './components/routes/index';
|
// import './components/routes/index';
|
||||||
|
|
||||||
// conflicts with components/ui.hover.js (shows dropdown on hover)
|
// conflicts with components/ui.hover.js (shows dropdown on hover)
|
||||||
//import 'bootstrap/js/dist/dropdown';
|
// import 'bootstrap/js/dist/dropdown';
|
||||||
/*import './components/ui.hover';
|
/* import './components/ui.hover';
|
||||||
|
|
||||||
import './components/ui.carousel';
|
import './components/ui.carousel';
|
||||||
import './components/ui.menu';
|
import './components/ui.menu';
|
||||||
|
|
@ -47,55 +47,55 @@ import 'bootstrap/js/dist/modal';
|
||||||
import 'bootstrap/js/dist/tooltip';
|
import 'bootstrap/js/dist/tooltip';
|
||||||
import 'bootstrap/js/dist/popover';
|
import 'bootstrap/js/dist/popover';
|
||||||
import 'bootstrap/js/dist/scrollspy';
|
import 'bootstrap/js/dist/scrollspy';
|
||||||
import 'bootstrap/js/dist/tab';*/
|
import 'bootstrap/js/dist/tab'; */
|
||||||
//
|
//
|
||||||
|
|
||||||
// Offcanvas menu
|
// Offcanvas menu
|
||||||
//import 'offcanvas-bootstrap/dist/js/bootstrap.offcanvas';
|
// import 'offcanvas-bootstrap/dist/js/bootstrap.offcanvas';
|
||||||
|
|
||||||
// Uncomment it to enable meta-lightbox zooming on hover
|
// Uncomment it to enable meta-lightbox zooming on hover
|
||||||
//import 'jquery-zoom/jquery.zoom';
|
// import 'jquery-zoom/jquery.zoom';
|
||||||
|
|
||||||
// FlyoutUI
|
// FlyoutUI
|
||||||
//import FlyoutUI from './components/ui.flyout';
|
// import FlyoutUI from './components/ui.flyout';
|
||||||
|
|
||||||
// Sticky sidebar
|
// Sticky sidebar
|
||||||
//import SidebarUI from './components/ui.sidebar';
|
// import SidebarUI from './components/ui.sidebar';
|
||||||
|
|
||||||
// Toggle bootstrap form fields
|
// Toggle bootstrap form fields
|
||||||
//import FormToggleUI from './components/ui.form.fields.toggle';
|
// import FormToggleUI from './components/ui.form.fields.toggle';
|
||||||
|
|
||||||
// Bootstrap Date & Time fields
|
// Bootstrap Date & Time fields
|
||||||
//import FormDatetime from './components/ui.form.datetime';
|
// import FormDatetime from './components/ui.form.datetime';
|
||||||
|
|
||||||
// Stepped forms functionality
|
// Stepped forms functionality
|
||||||
//import FormStepped from './components/ui.form.stepped';
|
// import FormStepped from './components/ui.form.stepped';
|
||||||
|
|
||||||
// Forms validation functionality
|
// Forms validation functionality
|
||||||
//import FormValidate from './components/ui.form.validate';
|
// import FormValidate from './components/ui.form.validate';
|
||||||
|
|
||||||
// Store forms data into localStorage
|
// Store forms data into localStorage
|
||||||
//import FormStorage from './components/ui.form.storage';
|
// import FormStorage from './components/ui.form.storage';
|
||||||
|
|
||||||
// client-side images cropping
|
// client-side images cropping
|
||||||
//import FormCroppie from './components/ui.form.croppie';
|
// import FormCroppie from './components/ui.form.croppie';
|
||||||
|
|
||||||
// Google NoCaptcha fields
|
// Google NoCaptcha fields
|
||||||
//import NoCaptcha from './components/ui.nocaptcha';
|
// import NoCaptcha from './components/ui.nocaptcha';
|
||||||
|
|
||||||
// youtube video preview image
|
// youtube video preview image
|
||||||
//import './components/ui.video.preview';
|
// import './components/ui.video.preview';
|
||||||
|
|
||||||
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
|
// import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
|
||||||
//import Table from 'bootstrap-table/dist/bootstrap-table';
|
// import Table from 'bootstrap-table/dist/bootstrap-table';
|
||||||
|
|
||||||
// Map UI
|
// Map UI
|
||||||
//import MapApi from './components/ui.map.api';
|
// import MapApi from './components/ui.map.api';
|
||||||
|
|
||||||
//import FormSelect2 from './components/ui.form.select2';
|
// import FormSelect2 from './components/ui.form.select2';
|
||||||
|
|
||||||
//import './main';
|
// import './main';
|
||||||
//import './layout';
|
// import './layout';
|
||||||
|
|
||||||
// Google Analytics
|
// Google Analytics
|
||||||
//import './drivers/google.track.external.links';
|
// import './drivers/google.track.external.links';
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,61 @@
|
||||||
function _gaLt(event) {
|
function _gaLt (event) {
|
||||||
if (typeof ga !== "function") {
|
if (typeof ga !== 'function') {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
var el = event.srcElement || event.target;
|
let el = event.srcElement || event.target
|
||||||
|
|
||||||
/* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
|
/* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
|
||||||
while (
|
while (
|
||||||
el &&
|
el &&
|
||||||
(typeof el.tagName == "undefined" ||
|
(typeof el.tagName === 'undefined' ||
|
||||||
el.tagName.toLowerCase() != "a" ||
|
el.tagName.toLowerCase() != 'a' ||
|
||||||
!el.href)
|
!el.href)
|
||||||
) {
|
) {
|
||||||
el = el.parentNode;
|
el = el.parentNode
|
||||||
}
|
}
|
||||||
|
|
||||||
if (el && el.href) {
|
if (el && el.href) {
|
||||||
/* link */
|
/* link */
|
||||||
var link = el.href;
|
const link = el.href
|
||||||
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
|
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
|
||||||
/* external link */
|
/* external link */
|
||||||
/* HitCallback function to either open link in either same or new window */
|
/* HitCallback function to either open link in either same or new window */
|
||||||
var hitBack = function (link, target) {
|
const hitBack = function (link, target) {
|
||||||
target ? window.open(link, target) : (window.location.href = link);
|
target ? window.open(link, target) : (window.location.href = link)
|
||||||
};
|
}
|
||||||
/* Is target set and not _(self|parent|top)? */
|
/* Is target set and not _(self|parent|top)? */
|
||||||
var target =
|
const target =
|
||||||
el.target && !el.target.match(/^_(self|parent|top)$/i)
|
el.target && !el.target.match(/^_(self|parent|top)$/i)
|
||||||
? el.target
|
? el.target
|
||||||
: false;
|
: false
|
||||||
/* send event with callback */
|
/* send event with callback */
|
||||||
ga(
|
ga(
|
||||||
"send",
|
'send',
|
||||||
"event",
|
'event',
|
||||||
"Outgoing Links",
|
'Outgoing Links',
|
||||||
link,
|
link,
|
||||||
document.location.pathname + document.location.search,
|
document.location.pathname + document.location.search,
|
||||||
{ hitCallback: hitBack(link, target) }
|
{ hitCallback: hitBack(link, target) }
|
||||||
);
|
)
|
||||||
|
|
||||||
/* Prevent standard click */
|
/* Prevent standard click */
|
||||||
event.preventDefault ? event.preventDefault() : (event.returnValue = !1);
|
event.preventDefault ? event.preventDefault() : (event.returnValue = !1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Attach the event to all clicks in the document after page has loaded */
|
/* Attach the event to all clicks in the document after page has loaded */
|
||||||
var w = window;
|
const w = window
|
||||||
w.addEventListener
|
w.addEventListener
|
||||||
? w.addEventListener(
|
? w.addEventListener(
|
||||||
"load",
|
'load',
|
||||||
() => {
|
() => {
|
||||||
document.body.addEventListener("click", _gaLt, !1);
|
document.body.addEventListener('click', _gaLt, !1)
|
||||||
},
|
},
|
||||||
!1
|
!1
|
||||||
)
|
)
|
||||||
: w.attachEvent &&
|
: w.attachEvent &&
|
||||||
w.attachEvent("onload", () => {
|
w.attachEvent('onload', () => {
|
||||||
document.body.attachEvent("onclick", _gaLt);
|
document.body.attachEvent('onclick', _gaLt)
|
||||||
});
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,197 +1,196 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
const Obj = {
|
const Obj = {
|
||||||
init: () => {
|
init: () => {
|
||||||
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
|
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
|
||||||
constructor(options) {
|
constructor (options) {
|
||||||
super();
|
super()
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.setMap(options.map);
|
ui.setMap(options.map)
|
||||||
ui.position = options.position;
|
ui.position = options.position
|
||||||
ui.html = options.html
|
ui.html = options.html
|
||||||
? options.html
|
? options.html
|
||||||
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
|
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
|
||||||
ui.divClass = options.divClass;
|
ui.divClass = options.divClass
|
||||||
ui.align = options.align;
|
ui.align = options.align
|
||||||
ui.isDebugMode = options.debug;
|
ui.isDebugMode = options.debug
|
||||||
ui.onClick = options.onClick;
|
ui.onClick = options.onClick
|
||||||
ui.onMouseOver = options.onMouseOver;
|
ui.onMouseOver = options.onMouseOver
|
||||||
|
|
||||||
ui.isBoolean = (arg) => {
|
ui.isBoolean = (arg) => {
|
||||||
if (typeof arg === "boolean") {
|
if (typeof arg === 'boolean') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isNotUndefined = (arg) => {
|
ui.isNotUndefined = (arg) => {
|
||||||
if (typeof arg !== "undefined") {
|
if (typeof arg !== 'undefined') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.hasContent = (arg) => {
|
ui.hasContent = (arg) => {
|
||||||
if (arg.length > 0) {
|
if (arg.length > 0) {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isString = (arg) => {
|
ui.isString = (arg) => {
|
||||||
if (typeof arg === "string") {
|
if (typeof arg === 'string') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isFunction = (arg) => {
|
ui.isFunction = (arg) => {
|
||||||
if (typeof arg === "function") {
|
if (typeof arg === 'function') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
onAdd() {
|
|
||||||
const ui = this;
|
onAdd () {
|
||||||
|
const ui = this
|
||||||
|
|
||||||
// Create div element.
|
// Create div element.
|
||||||
ui.div = document.createElement("div");
|
ui.div = document.createElement('div')
|
||||||
ui.div.style.position = "absolute";
|
ui.div.style.position = 'absolute'
|
||||||
|
|
||||||
// Validate and set custom div class
|
// Validate and set custom div class
|
||||||
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
|
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
|
||||||
ui.div.className = ui.divClass;
|
|
||||||
|
|
||||||
// Validate and set custom HTML
|
// Validate and set custom HTML
|
||||||
if (
|
if (
|
||||||
ui.isNotUndefined(ui.html) &&
|
ui.isNotUndefined(ui.html) &&
|
||||||
ui.hasContent(ui.html) &&
|
ui.hasContent(ui.html) &&
|
||||||
ui.isString(ui.html)
|
ui.isString(ui.html)
|
||||||
)
|
) { ui.div.innerHTML = ui.html }
|
||||||
ui.div.innerHTML = ui.html;
|
|
||||||
|
|
||||||
// If debug mode is enabled custom content will be replaced with debug content
|
// If debug mode is enabled custom content will be replaced with debug content
|
||||||
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
|
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
|
||||||
ui.div.className = "debug-mode";
|
ui.div.className = 'debug-mode'
|
||||||
ui.div.innerHTML =
|
ui.div.innerHTML =
|
||||||
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
|
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
|
||||||
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>';
|
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'
|
||||||
ui.div.setAttribute(
|
ui.div.setAttribute(
|
||||||
"style",
|
'style',
|
||||||
"position: absolute;" +
|
'position: absolute;' +
|
||||||
"border: 5px dashed red;" +
|
'border: 5px dashed red;' +
|
||||||
"height: 150px;" +
|
'height: 150px;' +
|
||||||
"width: 150px;" +
|
'width: 150px;' +
|
||||||
"display: flex;" +
|
'display: flex;' +
|
||||||
"justify-content: center;" +
|
'justify-content: center;' +
|
||||||
"align-items: center;"
|
'align-items: center;'
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add element to clickable layer
|
// Add element to clickable layer
|
||||||
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
|
ui.getPanes().overlayMouseTarget.appendChild(ui.div)
|
||||||
|
|
||||||
// Add listeners to the element.
|
// Add listeners to the element.
|
||||||
google.maps.event.addDomListener(ui.div, "click", (event) => {
|
google.maps.event.addDomListener(ui.div, 'click', (event) => {
|
||||||
google.maps.event.trigger(ui, "click");
|
google.maps.event.trigger(ui, 'click')
|
||||||
if (ui.isFunction(ui.onClick)) ui.onClick();
|
if (ui.isFunction(ui.onClick)) ui.onClick()
|
||||||
event.stopPropagation();
|
event.stopPropagation()
|
||||||
});
|
})
|
||||||
|
|
||||||
google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
|
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
|
||||||
google.maps.event.trigger(ui, "mouseover");
|
google.maps.event.trigger(ui, 'mouseover')
|
||||||
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
|
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
|
||||||
event.stopPropagation();
|
event.stopPropagation()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
draw() {
|
draw () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
// Calculate position of div
|
// Calculate position of div
|
||||||
var positionInPixels = ui
|
const positionInPixels = ui
|
||||||
.getProjection()
|
.getProjection()
|
||||||
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position));
|
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position))
|
||||||
|
|
||||||
// Align HTML overlay relative to original position
|
// Align HTML overlay relative to original position
|
||||||
var divOffset = {
|
const divOffset = {
|
||||||
y: undefined,
|
y: undefined,
|
||||||
x: undefined,
|
x: undefined,
|
||||||
};
|
}
|
||||||
|
|
||||||
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
|
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
|
||||||
case "left top":
|
case 'left top':
|
||||||
divOffset.y = ui.div.offsetHeight;
|
divOffset.y = ui.div.offsetHeight
|
||||||
divOffset.x = ui.div.offsetWidth;
|
divOffset.x = ui.div.offsetWidth
|
||||||
break;
|
break
|
||||||
case "left center":
|
case 'left center':
|
||||||
divOffset.y = ui.div.offsetHeight / 2;
|
divOffset.y = ui.div.offsetHeight / 2
|
||||||
divOffset.x = ui.div.offsetWidth;
|
divOffset.x = ui.div.offsetWidth
|
||||||
break;
|
break
|
||||||
case "left bottom":
|
case 'left bottom':
|
||||||
divOffset.y = 0;
|
divOffset.y = 0
|
||||||
divOffset.x = ui.div.offsetWidth;
|
divOffset.x = ui.div.offsetWidth
|
||||||
break;
|
break
|
||||||
case "center top":
|
case 'center top':
|
||||||
divOffset.y = ui.div.offsetHeight;
|
divOffset.y = ui.div.offsetHeight
|
||||||
divOffset.x = ui.div.offsetWidth / 2;
|
divOffset.x = ui.div.offsetWidth / 2
|
||||||
break;
|
break
|
||||||
case "center center":
|
case 'center center':
|
||||||
divOffset.y = ui.div.offsetHeight / 2;
|
divOffset.y = ui.div.offsetHeight / 2
|
||||||
divOffset.x = ui.div.offsetWidth / 2;
|
divOffset.x = ui.div.offsetWidth / 2
|
||||||
break;
|
break
|
||||||
case "center bottom":
|
case 'center bottom':
|
||||||
divOffset.y = 0;
|
divOffset.y = 0
|
||||||
divOffset.x = ui.div.offsetWidth / 2;
|
divOffset.x = ui.div.offsetWidth / 2
|
||||||
break;
|
break
|
||||||
case "right top":
|
case 'right top':
|
||||||
divOffset.y = ui.div.offsetHeight;
|
divOffset.y = ui.div.offsetHeight
|
||||||
divOffset.x = 0;
|
divOffset.x = 0
|
||||||
break;
|
break
|
||||||
case "right center":
|
case 'right center':
|
||||||
divOffset.y = ui.div.offsetHeight / 2;
|
divOffset.y = ui.div.offsetHeight / 2
|
||||||
divOffset.x = 0;
|
divOffset.x = 0
|
||||||
break;
|
break
|
||||||
case "right bottom":
|
case 'right bottom':
|
||||||
divOffset.y = 0;
|
divOffset.y = 0
|
||||||
divOffset.x = 0;
|
divOffset.x = 0
|
||||||
break;
|
break
|
||||||
default:
|
default:
|
||||||
divOffset.y = ui.div.offsetHeight / 2;
|
divOffset.y = ui.div.offsetHeight / 2
|
||||||
divOffset.x = ui.div.offsetWidth / 2;
|
divOffset.x = ui.div.offsetWidth / 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set position
|
// Set position
|
||||||
ui.div.style.top = `${positionInPixels.y - divOffset.y}px`;
|
ui.div.style.top = `${positionInPixels.y - divOffset.y}px`
|
||||||
ui.div.style.left = `${positionInPixels.x - divOffset.x}px`;
|
ui.div.style.left = `${positionInPixels.x - divOffset.x}px`
|
||||||
}
|
}
|
||||||
|
|
||||||
getPosition() {
|
getPosition () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.position;
|
return ui.position
|
||||||
}
|
}
|
||||||
|
|
||||||
getDiv() {
|
getDiv () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.div;
|
return ui.div
|
||||||
}
|
}
|
||||||
|
|
||||||
setPosition(position, align) {
|
setPosition (position, align) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.position = position;
|
ui.position = position
|
||||||
ui.align = align;
|
ui.align = align
|
||||||
ui.draw();
|
ui.draw()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return GoogleMapsHtmlOverlay;
|
return GoogleMapsHtmlOverlay
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Obj;
|
export default Obj
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,72 @@
|
||||||
'use strict';
|
'use strict'
|
||||||
|
|
||||||
import { MarkerClusterer } from '@googlemaps/markerclusterer';
|
import { MarkerClusterer } from '@googlemaps/markerclusterer'
|
||||||
|
|
||||||
import Events from '../_events';
|
import Events from '../_events'
|
||||||
import MarkerUI from './map.google.marker';
|
import MarkerUI from './map.google.marker'
|
||||||
|
|
||||||
const GoogleMapsDriver = ((window) => {
|
const GoogleMapsDriver = ((window) => {
|
||||||
class GoogleMapsDriver {
|
class GoogleMapsDriver {
|
||||||
getName() {
|
getName () {
|
||||||
return 'GoogleMapsDriver';
|
return 'GoogleMapsDriver'
|
||||||
}
|
}
|
||||||
|
|
||||||
init(el, config = []) {
|
init (el, config = []) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.el = el;
|
ui.el = el
|
||||||
ui.config = config;
|
ui.config = config
|
||||||
ui.markers = [];
|
ui.markers = []
|
||||||
|
|
||||||
window[`init${ui.getName()}`] = () => {
|
window[`init${ui.getName()}`] = () => {
|
||||||
ui.googleApiLoaded();
|
ui.googleApiLoaded()
|
||||||
};
|
}
|
||||||
|
|
||||||
const script = document.createElement('script');
|
const script = document.createElement('script')
|
||||||
script.src = `https://maps.googleapis.com/maps/api/js?key=${
|
script.src = `https://maps.googleapis.com/maps/api/js?key=${
|
||||||
config['key']
|
config.key
|
||||||
}&callback=init${ui.getName()}`;
|
}&callback=init${ui.getName()}`
|
||||||
script.async = true;
|
script.async = true
|
||||||
script.defer = true;
|
script.defer = true
|
||||||
document.head.appendChild(script);
|
document.head.appendChild(script)
|
||||||
}
|
}
|
||||||
|
|
||||||
googleApiLoaded() {
|
googleApiLoaded () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const el = ui.el;
|
const el = ui.el
|
||||||
const config = ui.config;
|
const config = ui.config
|
||||||
const mapDiv = el.querySelector('.mapAPI-map');
|
const mapDiv = el.querySelector('.mapAPI-map')
|
||||||
const zoom =
|
const zoom =
|
||||||
config['mapZoom'] && config['mapZoom'] !== '0'
|
config.mapZoom && config.mapZoom !== '0'
|
||||||
? parseInt(config['mapZoom'])
|
? parseInt(config.mapZoom)
|
||||||
: 10;
|
: 10
|
||||||
const center =
|
const center =
|
||||||
config['center'] && config['center'] !== ','
|
config.center && config.center !== ','
|
||||||
? {
|
? {
|
||||||
lat: config['center'][1],
|
lat: config.center[1],
|
||||||
lng: config['center'][0],
|
lng: config.center[0],
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
lat: 0,
|
lat: 0,
|
||||||
lng: 0,
|
lng: 0,
|
||||||
};
|
}
|
||||||
const style = config['style'] ? config['style'] : null;
|
const style = config.style ? config.style : null
|
||||||
|
|
||||||
console.log(`${ui.getName()}: API is loaded`);
|
console.log(`${ui.getName()}: API is loaded`)
|
||||||
// init fontawesome icons
|
// init fontawesome icons
|
||||||
ui.MarkerUI = MarkerUI.init();
|
ui.MarkerUI = MarkerUI.init()
|
||||||
|
|
||||||
ui.map = new google.maps.Map(mapDiv, {
|
ui.map = new google.maps.Map(mapDiv, {
|
||||||
zoom,
|
zoom,
|
||||||
center,
|
center,
|
||||||
fullscreenControl: true,
|
fullscreenControl: true,
|
||||||
styles: style,
|
styles: style,
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.default_zoom = zoom;
|
ui.default_zoom = zoom
|
||||||
|
|
||||||
mapDiv.classList.add('mapboxgl-map');
|
mapDiv.classList.add('mapboxgl-map')
|
||||||
|
|
||||||
ui.popup = new ui.MarkerUI({
|
ui.popup = new ui.MarkerUI({
|
||||||
map: ui.map,
|
map: ui.map,
|
||||||
|
|
@ -77,10 +77,10 @@ const GoogleMapsDriver = ((window) => {
|
||||||
'<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' +
|
'<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' +
|
||||||
'<div class="html"></div>' +
|
'<div class="html"></div>' +
|
||||||
'</div>',
|
'</div>',
|
||||||
});
|
})
|
||||||
ui.popup.setMap(ui.map);
|
ui.popup.setMap(ui.map)
|
||||||
|
|
||||||
ui.geocoder = new google.maps.Geocoder();
|
ui.geocoder = new google.maps.Geocoder()
|
||||||
|
|
||||||
ui.cluster = new MarkerClusterer(ui.map, null, {
|
ui.cluster = new MarkerClusterer(ui.map, null, {
|
||||||
styles: [
|
styles: [
|
||||||
|
|
@ -90,85 +90,85 @@ const GoogleMapsDriver = ((window) => {
|
||||||
className: 'mapboxgl-cluster',
|
className: 'mapboxgl-cluster',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
})
|
||||||
|
|
||||||
el.dispatchEvent(new Event(Events.MAPAPILOADED));
|
el.dispatchEvent(new Event(Events.MAPAPILOADED))
|
||||||
}
|
}
|
||||||
|
|
||||||
addMarker(crds, config) {
|
addMarker (crds, config) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const pos = {
|
const pos = {
|
||||||
lat: crds[1],
|
lat: crds[1],
|
||||||
lng: crds[0],
|
lng: crds[0],
|
||||||
};
|
}
|
||||||
|
|
||||||
const marker = new ui.MarkerUI({
|
const marker = new ui.MarkerUI({
|
||||||
position: pos,
|
position: pos,
|
||||||
map: ui.map,
|
map: ui.map,
|
||||||
align: ['center', 'top'],
|
align: ['center', 'top'],
|
||||||
html: `<div class="mapboxgl-marker"><div id="Marker${config['id']}" data-id="${config['id']}" class="marker">${config['icon']}</div></div>`,
|
html: `<div class="mapboxgl-marker"><div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div></div>`,
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
const el = document.querySelector(`#Marker${config['id']}`);
|
const el = document.querySelector(`#Marker${config.id}`)
|
||||||
ui.showPopup(pos, config['content']);
|
ui.showPopup(pos, config.content)
|
||||||
|
|
||||||
el.dispatchEvent(new Event(Events.MAPMARKERCLICK));
|
el.dispatchEvent(new Event(Events.MAPMARKERCLICK))
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.markers.push(marker);
|
ui.markers.push(marker)
|
||||||
|
|
||||||
ui.cluster.addMarker(marker);
|
ui.cluster.addMarker(marker)
|
||||||
|
|
||||||
return marker;
|
return marker
|
||||||
}
|
}
|
||||||
|
|
||||||
showPopup(pos, content) {
|
showPopup (pos, content) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const popup = ui.popup.getDiv();
|
const popup = ui.popup.getDiv()
|
||||||
|
|
||||||
if (ui.config['flyToMarker']) {
|
if (ui.config.flyToMarker) {
|
||||||
ui.map.setCenter(pos); // panTo
|
ui.map.setCenter(pos) // panTo
|
||||||
if (!ui.config['noZoom']) {
|
if (!ui.config.noZoom) {
|
||||||
ui.map.setZoom(18);
|
ui.map.setZoom(18)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// keep it hidden to render content
|
// keep it hidden to render content
|
||||||
popup.style.opacity = '0';
|
popup.style.opacity = '0'
|
||||||
popup.classList.remove('d-none');
|
popup.classList.remove('d-none')
|
||||||
|
|
||||||
popup.querySelector('.mapboxgl-popup-content .html').innerHTML = content;
|
popup.querySelector('.mapboxgl-popup-content .html').innerHTML = content
|
||||||
|
|
||||||
popup
|
popup
|
||||||
.querySelector('.mapboxgl-popup-close-button')
|
.querySelector('.mapboxgl-popup-close-button')
|
||||||
.addEventListener('click', (e) => {
|
.addEventListener('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
ui.hidePopup();
|
ui.hidePopup()
|
||||||
});
|
})
|
||||||
|
|
||||||
// set position when content was rendered
|
// set position when content was rendered
|
||||||
ui.popup.setPosition(pos, ['center', 'top']);
|
ui.popup.setPosition(pos, ['center', 'top'])
|
||||||
|
|
||||||
// display popup
|
// display popup
|
||||||
popup.style.opacity = '1';
|
popup.style.opacity = '1'
|
||||||
popup.style['margin-top'] = '-1rem';
|
popup.style['margin-top'] = '-1rem'
|
||||||
}
|
}
|
||||||
|
|
||||||
hidePopup() {
|
hidePopup () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const popup = ui.popup.getDiv();
|
const popup = ui.popup.getDiv()
|
||||||
|
|
||||||
popup.classList.add('d-none');
|
popup.classList.add('d-none')
|
||||||
if (!ui.config['noRestoreBounds'] || ui.config['flyToBounds']) {
|
if (!ui.config.noRestoreBounds || ui.config.flyToBounds) {
|
||||||
ui.restoreBounds();
|
ui.restoreBounds()
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.el.dispatchEvent(new Event(Events.MAPPOPUPCLOSE));
|
ui.el.dispatchEvent(new Event(Events.MAPPOPUPCLOSE))
|
||||||
}
|
}
|
||||||
|
|
||||||
geocode(addr, callback) {
|
geocode (addr, callback) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.geocoder.geocode(
|
ui.geocoder.geocode(
|
||||||
{
|
{
|
||||||
|
|
@ -176,24 +176,24 @@ const GoogleMapsDriver = ((window) => {
|
||||||
},
|
},
|
||||||
(results, status) => {
|
(results, status) => {
|
||||||
if (status === 'OK') {
|
if (status === 'OK') {
|
||||||
//results[0].geometry.location;
|
// results[0].geometry.location;
|
||||||
|
|
||||||
if (typeof callback === 'function') {
|
if (typeof callback === 'function') {
|
||||||
callback(results);
|
callback(results)
|
||||||
}
|
}
|
||||||
|
|
||||||
return results;
|
return results
|
||||||
} else {
|
} else {
|
||||||
console.error(
|
console.error(
|
||||||
`${ui.getName()}: Geocode was not successful for the following reason: ${status}`
|
`${ui.getName()}: Geocode was not successful for the following reason: ${status}`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
reverseGeocode(latLng, callback) {
|
reverseGeocode (latLng, callback) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.geocoder.geocode(
|
ui.geocoder.geocode(
|
||||||
{
|
{
|
||||||
|
|
@ -201,94 +201,94 @@ const GoogleMapsDriver = ((window) => {
|
||||||
},
|
},
|
||||||
(results, status) => {
|
(results, status) => {
|
||||||
if (status === 'OK') {
|
if (status === 'OK') {
|
||||||
//results[0].formatted_address;
|
// results[0].formatted_address;
|
||||||
|
|
||||||
if (typeof callback === 'function') {
|
if (typeof callback === 'function') {
|
||||||
callback(results);
|
callback(results)
|
||||||
}
|
}
|
||||||
|
|
||||||
return results;
|
return results
|
||||||
} else {
|
} else {
|
||||||
console.error(
|
console.error(
|
||||||
`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
|
`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
addGeoJson(config) {
|
addGeoJson (config) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const geojson = JSON.parse(config['geojson']);
|
const geojson = JSON.parse(config.geojson)
|
||||||
const firstMarker = geojson.features[0].geometry.coordinates;
|
const firstMarker = geojson.features[0].geometry.coordinates
|
||||||
//Map.setCenter(firstMarker);
|
// Map.setCenter(firstMarker);
|
||||||
const bounds = new google.maps.LatLngBounds();
|
const bounds = new google.maps.LatLngBounds()
|
||||||
|
|
||||||
// add markers to map
|
// add markers to map
|
||||||
geojson.features.forEach((marker) => {
|
geojson.features.forEach((marker) => {
|
||||||
const id = marker.id;
|
const id = marker.id
|
||||||
const crds = marker.geometry.coordinates;
|
const crds = marker.geometry.coordinates
|
||||||
const content = marker.properties.content;
|
const content = marker.properties.content
|
||||||
|
|
||||||
ui.addMarker(crds, {
|
ui.addMarker(crds, {
|
||||||
id,
|
id,
|
||||||
content,
|
content,
|
||||||
icon: marker.icon,
|
icon: marker.icon,
|
||||||
flyToMarker: config['flyToMarker'],
|
flyToMarker: config.flyToMarker,
|
||||||
});
|
})
|
||||||
|
|
||||||
bounds.extend({
|
bounds.extend({
|
||||||
lat: crds[1],
|
lat: crds[1],
|
||||||
lng: crds[0],
|
lng: crds[0],
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
if (ui.markers.length > 1) {
|
if (ui.markers.length > 1) {
|
||||||
ui.map.fitBounds(bounds, {
|
ui.map.fitBounds(bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
}); //panToBounds
|
}) // panToBounds
|
||||||
} else if (ui.markers[0]) {
|
} else if (ui.markers[0]) {
|
||||||
ui.map.setCenter(ui.markers[0].getPosition());
|
ui.map.setCenter(ui.markers[0].getPosition())
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.default_bounds = bounds;
|
ui.default_bounds = bounds
|
||||||
ui.default_zoom = ui.map.getZoom();
|
ui.default_zoom = ui.map.getZoom()
|
||||||
}
|
}
|
||||||
|
|
||||||
getMap() {
|
getMap () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.map;
|
return ui.map
|
||||||
}
|
}
|
||||||
|
|
||||||
getPopup() {
|
getPopup () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.popup;
|
return ui.popup
|
||||||
}
|
}
|
||||||
|
|
||||||
restoreBounds() {
|
restoreBounds () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
if (ui.default_bounds && ui.markers.length > 1) {
|
if (ui.default_bounds && ui.markers.length > 1) {
|
||||||
ui.map.fitBounds(ui.default_bounds, {
|
ui.map.fitBounds(ui.default_bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
}); //panToBounds
|
}) // panToBounds
|
||||||
} else {
|
} else {
|
||||||
if (ui.markers[0]) {
|
if (ui.markers[0]) {
|
||||||
ui.map.setCenter(ui.markers[0].getPosition());
|
ui.map.setCenter(ui.markers[0].getPosition())
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.restoreZoom();
|
ui.restoreZoom()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
restoreZoom() {
|
restoreZoom () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.map.setZoom(ui.default_zoom);
|
ui.map.setZoom(ui.default_zoom)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return GoogleMapsDriver;
|
return GoogleMapsDriver
|
||||||
})(window);
|
})(window)
|
||||||
|
|
||||||
export default GoogleMapsDriver;
|
export default GoogleMapsDriver
|
||||||
|
|
|
||||||
|
|
@ -1,224 +1,223 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
const Obj = {
|
const Obj = {
|
||||||
init: () => {
|
init: () => {
|
||||||
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
|
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
|
||||||
constructor(options) {
|
constructor (options) {
|
||||||
super();
|
super()
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.ownerMap = options.map;
|
ui.ownerMap = options.map
|
||||||
//ui.setMap(options.map);
|
// ui.setMap(options.map);
|
||||||
ui.position = options.position;
|
ui.position = options.position
|
||||||
ui.html = options.html
|
ui.html = options.html
|
||||||
? options.html
|
? options.html
|
||||||
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
|
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
|
||||||
ui.divClass = options.divClass;
|
ui.divClass = options.divClass
|
||||||
ui.align = options.align;
|
ui.align = options.align
|
||||||
ui.isDebugMode = options.debug;
|
ui.isDebugMode = options.debug
|
||||||
ui.onClick = options.onClick;
|
ui.onClick = options.onClick
|
||||||
ui.onMouseOver = options.onMouseOver;
|
ui.onMouseOver = options.onMouseOver
|
||||||
|
|
||||||
ui.isBoolean = (arg) => {
|
ui.isBoolean = (arg) => {
|
||||||
if (typeof arg === "boolean") {
|
if (typeof arg === 'boolean') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isNotUndefined = (arg) => {
|
ui.isNotUndefined = (arg) => {
|
||||||
if (typeof arg !== "undefined") {
|
if (typeof arg !== 'undefined') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.hasContent = (arg) => {
|
ui.hasContent = (arg) => {
|
||||||
if (arg.length > 0) {
|
if (arg.length > 0) {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isString = (arg) => {
|
ui.isString = (arg) => {
|
||||||
if (typeof arg === "string") {
|
if (typeof arg === 'string') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isFunction = (arg) => {
|
ui.isFunction = (arg) => {
|
||||||
if (typeof arg === "function") {
|
if (typeof arg === 'function') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
onAdd() {
|
|
||||||
const ui = this;
|
onAdd () {
|
||||||
|
const ui = this
|
||||||
|
|
||||||
// Create div element.
|
// Create div element.
|
||||||
ui.div = document.createElement("div");
|
ui.div = document.createElement('div')
|
||||||
ui.div.style.position = "absolute";
|
ui.div.style.position = 'absolute'
|
||||||
|
|
||||||
// Validate and set custom div class
|
// Validate and set custom div class
|
||||||
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
|
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
|
||||||
ui.div.className = ui.divClass;
|
|
||||||
|
|
||||||
// Validate and set custom HTML
|
// Validate and set custom HTML
|
||||||
if (
|
if (
|
||||||
ui.isNotUndefined(ui.html) &&
|
ui.isNotUndefined(ui.html) &&
|
||||||
ui.hasContent(ui.html) &&
|
ui.hasContent(ui.html) &&
|
||||||
ui.isString(ui.html)
|
ui.isString(ui.html)
|
||||||
)
|
) { ui.div.innerHTML = ui.html }
|
||||||
ui.div.innerHTML = ui.html;
|
|
||||||
|
|
||||||
// If debug mode is enabled custom content will be replaced with debug content
|
// If debug mode is enabled custom content will be replaced with debug content
|
||||||
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
|
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
|
||||||
ui.div.className = "debug-mode";
|
ui.div.className = 'debug-mode'
|
||||||
ui.div.innerHTML =
|
ui.div.innerHTML =
|
||||||
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
|
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
|
||||||
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>';
|
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'
|
||||||
ui.div.setAttribute(
|
ui.div.setAttribute(
|
||||||
"style",
|
'style',
|
||||||
"position: absolute;" +
|
'position: absolute;' +
|
||||||
"border: 5px dashed red;" +
|
'border: 5px dashed red;' +
|
||||||
"height: 150px;" +
|
'height: 150px;' +
|
||||||
"width: 150px;" +
|
'width: 150px;' +
|
||||||
"display: flex;" +
|
'display: flex;' +
|
||||||
"justify-content: center;" +
|
'justify-content: center;' +
|
||||||
"align-items: center;"
|
'align-items: center;'
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add element to clickable layer
|
// Add element to clickable layer
|
||||||
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
|
ui.getPanes().overlayMouseTarget.appendChild(ui.div)
|
||||||
|
|
||||||
// Add listeners to the element.
|
// Add listeners to the element.
|
||||||
google.maps.event.addDomListener(ui.div, "click", (event) => {
|
google.maps.event.addDomListener(ui.div, 'click', (event) => {
|
||||||
google.maps.event.trigger(ui, "click");
|
google.maps.event.trigger(ui, 'click')
|
||||||
if (ui.isFunction(ui.onClick)) ui.onClick();
|
if (ui.isFunction(ui.onClick)) ui.onClick()
|
||||||
event.stopPropagation();
|
event.stopPropagation()
|
||||||
});
|
})
|
||||||
|
|
||||||
google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
|
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
|
||||||
google.maps.event.trigger(ui, "mouseover");
|
google.maps.event.trigger(ui, 'mouseover')
|
||||||
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
|
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
|
||||||
event.stopPropagation();
|
event.stopPropagation()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
draw() {
|
draw () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
let div = document.querySelector(".popup");
|
let div = document.querySelector('.popup')
|
||||||
if (!div.length) {
|
if (!div.length) {
|
||||||
div = ui.div;
|
div = ui.div
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate position of div
|
// Calculate position of div
|
||||||
const projection = ui.getProjection();
|
const projection = ui.getProjection()
|
||||||
|
|
||||||
if (!projection) {
|
if (!projection) {
|
||||||
console.log("GoogleMapsHtmlOverlay: current map is missing");
|
console.log('GoogleMapsHtmlOverlay: current map is missing')
|
||||||
return null;
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
const positionInPixels = projection.fromLatLngToDivPixel(
|
const positionInPixels = projection.fromLatLngToDivPixel(
|
||||||
ui.getPosition()
|
ui.getPosition()
|
||||||
);
|
)
|
||||||
|
|
||||||
// Align HTML overlay relative to original position
|
// Align HTML overlay relative to original position
|
||||||
const offset = {
|
const offset = {
|
||||||
y: undefined,
|
y: undefined,
|
||||||
x: undefined,
|
x: undefined,
|
||||||
};
|
}
|
||||||
const divWidth = div.offsetWidth;
|
const divWidth = div.offsetWidth
|
||||||
const divHeight = div.offsetHeight;
|
const divHeight = div.offsetHeight
|
||||||
|
|
||||||
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
|
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
|
||||||
case "left top":
|
case 'left top':
|
||||||
offset.y = divHeight;
|
offset.y = divHeight
|
||||||
offset.x = divWidth;
|
offset.x = divWidth
|
||||||
break;
|
break
|
||||||
case "left center":
|
case 'left center':
|
||||||
offset.y = divHeight / 2;
|
offset.y = divHeight / 2
|
||||||
offset.x = divWidth;
|
offset.x = divWidth
|
||||||
break;
|
break
|
||||||
case "left bottom":
|
case 'left bottom':
|
||||||
offset.y = 0;
|
offset.y = 0
|
||||||
offset.x = divWidth;
|
offset.x = divWidth
|
||||||
break;
|
break
|
||||||
case "center top":
|
case 'center top':
|
||||||
offset.y = divHeight;
|
offset.y = divHeight
|
||||||
offset.x = divWidth / 2;
|
offset.x = divWidth / 2
|
||||||
break;
|
break
|
||||||
case "center center":
|
case 'center center':
|
||||||
offset.y = divHeight / 2;
|
offset.y = divHeight / 2
|
||||||
offset.x = divWidth / 2;
|
offset.x = divWidth / 2
|
||||||
break;
|
break
|
||||||
case "center bottom":
|
case 'center bottom':
|
||||||
offset.y = 0;
|
offset.y = 0
|
||||||
offset.x = divWidth / 2;
|
offset.x = divWidth / 2
|
||||||
break;
|
break
|
||||||
case "right top":
|
case 'right top':
|
||||||
offset.y = divHeight;
|
offset.y = divHeight
|
||||||
offset.x = 0;
|
offset.x = 0
|
||||||
break;
|
break
|
||||||
case "right center":
|
case 'right center':
|
||||||
offset.y = divHeight / 2;
|
offset.y = divHeight / 2
|
||||||
offset.x = 0;
|
offset.x = 0
|
||||||
break;
|
break
|
||||||
case "right bottom":
|
case 'right bottom':
|
||||||
offset.y = 0;
|
offset.y = 0
|
||||||
offset.x = 0;
|
offset.x = 0
|
||||||
break;
|
break
|
||||||
default:
|
default:
|
||||||
offset.y = divHeight / 2;
|
offset.y = divHeight / 2
|
||||||
offset.x = divWidth / 2;
|
offset.x = divWidth / 2
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set position
|
// Set position
|
||||||
ui.div.style.top = `${positionInPixels.y - offset.y}px`;
|
ui.div.style.top = `${positionInPixels.y - offset.y}px`
|
||||||
ui.div.style.left = `${positionInPixels.x - offset.x}px`;
|
ui.div.style.left = `${positionInPixels.x - offset.x}px`
|
||||||
}
|
}
|
||||||
|
|
||||||
getPosition() {
|
getPosition () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return new google.maps.LatLng(ui.position);
|
return new google.maps.LatLng(ui.position)
|
||||||
}
|
}
|
||||||
|
|
||||||
getDiv() {
|
getDiv () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.div;
|
return ui.div
|
||||||
}
|
}
|
||||||
|
|
||||||
setPosition(position, align) {
|
setPosition (position, align) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.position = position;
|
ui.position = position
|
||||||
ui.align = align;
|
ui.align = align
|
||||||
ui.draw();
|
ui.draw()
|
||||||
}
|
}
|
||||||
|
|
||||||
remove() {
|
remove () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.setMap(null);
|
ui.setMap(null)
|
||||||
ui.div.remove();
|
ui.div.remove()
|
||||||
}
|
}
|
||||||
|
|
||||||
// emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus)
|
// emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus)
|
||||||
getDraggable() {
|
getDraggable () {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return GoogleMapsHtmlOverlay;
|
return GoogleMapsHtmlOverlay
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Obj;
|
export default Obj
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,40 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
//import $ from 'jquery';
|
// import $ from 'jquery';
|
||||||
import mapBoxGL from "mapbox-gl";
|
import mapBoxGL from 'mapbox-gl'
|
||||||
|
|
||||||
import Events from "../../_events";
|
import Events from '../../_events'
|
||||||
|
|
||||||
const MapBoxDriver = (($) => {
|
const MapBoxDriver = (($) => {
|
||||||
class MapBoxDriver {
|
class MapBoxDriver {
|
||||||
getName() {
|
getName () {
|
||||||
return "MapBoxDriver";
|
return 'MapBoxDriver'
|
||||||
}
|
}
|
||||||
|
|
||||||
init($el, config = []) {
|
init ($el, config = []) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
mapBoxGL.accessToken = config["key"];
|
mapBoxGL.accessToken = config.key
|
||||||
|
|
||||||
ui.map = new mapBoxGL.Map({
|
ui.map = new mapBoxGL.Map({
|
||||||
container: $el.find(".mapAPI-map")[0],
|
container: $el.find('.mapAPI-map')[0],
|
||||||
center: config["center"] ? config["center"] : [0, 0],
|
center: config.center ? config.center : [0, 0],
|
||||||
//hash: true,
|
// hash: true,
|
||||||
style: config["style"]
|
style: config.style
|
||||||
? config["style"]
|
? config.style
|
||||||
: "mapbox://styles/mapbox/streets-v9",
|
: 'mapbox://styles/mapbox/streets-v9',
|
||||||
localIdeographFontFamily: config["font-family"],
|
localIdeographFontFamily: config['font-family'],
|
||||||
zoom: config["mapZoom"] ? config["mapZoom"] : 10,
|
zoom: config.mapZoom ? config.mapZoom : 10,
|
||||||
attributionControl: false,
|
attributionControl: false,
|
||||||
antialias: true,
|
antialias: true,
|
||||||
accessToken: config["key"],
|
accessToken: config.key,
|
||||||
})
|
})
|
||||||
.addControl(
|
.addControl(
|
||||||
new mapBoxGL.AttributionControl({
|
new mapBoxGL.AttributionControl({
|
||||||
compact: true,
|
compact: true,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.addControl(new mapBoxGL.NavigationControl(), "top-right")
|
.addControl(new mapBoxGL.NavigationControl(), 'top-right')
|
||||||
.addControl(
|
.addControl(
|
||||||
new mapBoxGL.GeolocateControl({
|
new mapBoxGL.GeolocateControl({
|
||||||
positionOptions: {
|
positionOptions: {
|
||||||
|
|
@ -42,58 +42,58 @@ const MapBoxDriver = (($) => {
|
||||||
},
|
},
|
||||||
trackUserLocation: true,
|
trackUserLocation: true,
|
||||||
}),
|
}),
|
||||||
"bottom-right"
|
'bottom-right'
|
||||||
)
|
)
|
||||||
.addControl(
|
.addControl(
|
||||||
new mapBoxGL.ScaleControl({
|
new mapBoxGL.ScaleControl({
|
||||||
maxWidth: 80,
|
maxWidth: 80,
|
||||||
unit: "metric",
|
unit: 'metric',
|
||||||
}),
|
}),
|
||||||
"top-left"
|
'top-left'
|
||||||
)
|
)
|
||||||
.addControl(new mapBoxGL.FullscreenControl());
|
.addControl(new mapBoxGL.FullscreenControl())
|
||||||
|
|
||||||
ui.map.on("load", (e) => {
|
ui.map.on('load', (e) => {
|
||||||
$el.trigger(Events.MAPAPILOADED);
|
$el.trigger(Events.MAPAPILOADED)
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.popup = new mapBoxGL.Popup({
|
ui.popup = new mapBoxGL.Popup({
|
||||||
closeOnClick: false,
|
closeOnClick: false,
|
||||||
className: "popup",
|
className: 'popup',
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
addMarker(crds, config) {
|
addMarker (crds, config) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
// create a DOM el for the marker
|
// create a DOM el for the marker
|
||||||
const $el = $(
|
const $el = $(
|
||||||
`<div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div>`
|
`<div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div>`
|
||||||
);
|
)
|
||||||
|
|
||||||
$el.on("click", (e) => {
|
$el.on('click', (e) => {
|
||||||
ui.popup.setLngLat(crds).setHTML(config["content"]).addTo(ui.map);
|
ui.popup.setLngLat(crds).setHTML(config.content).addTo(ui.map)
|
||||||
|
|
||||||
if (config["flyToMarker"]) {
|
if (config.flyToMarker) {
|
||||||
ui.map.flyTo({
|
ui.map.flyTo({
|
||||||
center: crds,
|
center: crds,
|
||||||
zoom: 17,
|
zoom: 17,
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
$(e.currentTarget).trigger(Events.MAPMARKERCLICK);
|
$(e.currentTarget).trigger(Events.MAPMARKERCLICK)
|
||||||
});
|
})
|
||||||
|
|
||||||
// add marker to map
|
// add marker to map
|
||||||
const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map);
|
const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map)
|
||||||
|
|
||||||
return marker;
|
return marker
|
||||||
}
|
}
|
||||||
|
|
||||||
addGeoJson(config) {
|
addGeoJson (config) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
// Insert the layer beneath any symbol layer.
|
// Insert the layer beneath any symbol layer.
|
||||||
/*if (config['3d']) {
|
/* if (config['3d']) {
|
||||||
const layers = Map.getStyle().layers;
|
const layers = Map.getStyle().layers;
|
||||||
let labelLayerId;
|
let labelLayerId;
|
||||||
for (let i = 0; i < layers.length; i++) {
|
for (let i = 0; i < layers.length; i++) {
|
||||||
|
|
@ -130,55 +130,55 @@ const MapBoxDriver = (($) => {
|
||||||
'fill-extrusion-opacity': .6,
|
'fill-extrusion-opacity': .6,
|
||||||
},
|
},
|
||||||
}, labelLayerId);
|
}, labelLayerId);
|
||||||
}*/
|
} */
|
||||||
|
|
||||||
const firstMarker = config["geojson"].features[0].geometry.coordinates;
|
const firstMarker = config.geojson.features[0].geometry.coordinates
|
||||||
//Map.setCenter(firstMarker);
|
// Map.setCenter(firstMarker);
|
||||||
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker);
|
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker)
|
||||||
|
|
||||||
// add markers to map
|
// add markers to map
|
||||||
config["geojson"].features.forEach((marker) => {
|
config.geojson.features.forEach((marker) => {
|
||||||
const id = marker.id;
|
const id = marker.id
|
||||||
const crds = marker.geometry.coordinates;
|
const crds = marker.geometry.coordinates
|
||||||
const content = marker.properties.content;
|
const content = marker.properties.content
|
||||||
|
|
||||||
ui.addMarker(crds, {
|
ui.addMarker(crds, {
|
||||||
id,
|
id,
|
||||||
content,
|
content,
|
||||||
icon: marker.icon,
|
icon: marker.icon,
|
||||||
flyToMarker: config["flyToMarker"],
|
flyToMarker: config.flyToMarker,
|
||||||
});
|
})
|
||||||
|
|
||||||
bounds.extend(crds);
|
bounds.extend(crds)
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.map.fitBounds(bounds, {
|
ui.map.fitBounds(bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.popup.on("close", (e) => {
|
ui.popup.on('close', (e) => {
|
||||||
if (config["flyToBounds"]) {
|
if (config.flyToBounds) {
|
||||||
ui.map.fitBounds(bounds, {
|
ui.map.fitBounds(bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE);
|
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
getMap() {
|
getMap () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.map;
|
return ui.map
|
||||||
}
|
}
|
||||||
|
|
||||||
getPopup() {
|
getPopup () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.popup;
|
return ui.popup
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return MapBoxDriver;
|
return MapBoxDriver
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default MapBoxDriver;
|
export default MapBoxDriver
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const LayoutUI = ((W) => {
|
const LayoutUI = ((W) => {
|
||||||
const NAME = "_layout";
|
const NAME = '_layout'
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = D.body;
|
const BODY = D.body
|
||||||
|
|
||||||
const init_fonts = () => {
|
const init_fonts = () => {
|
||||||
console.log(`${NAME}: init_fonts`);
|
console.log(`${NAME}: init_fonts`)
|
||||||
|
|
||||||
const css = D.createElement("link");
|
const css = D.createElement('link')
|
||||||
css.rel = "stylesheet";
|
css.rel = 'stylesheet'
|
||||||
css.type = "text/css";
|
css.type = 'text/css'
|
||||||
css.media = "all";
|
css.media = 'all'
|
||||||
css.href =
|
css.href =
|
||||||
"https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap";
|
'https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'
|
||||||
D.getElementsByTagName("head")[0].appendChild(css);
|
D.getElementsByTagName('head')[0].appendChild(css)
|
||||||
};
|
}
|
||||||
|
|
||||||
const init_analytics = () => {
|
const init_analytics = () => {
|
||||||
console.log(`${NAME}: init_analytics`);
|
console.log(`${NAME}: init_analytics`)
|
||||||
/*google analytics */
|
/* google analytics */
|
||||||
/*(function(i, s, o, g, r, a, m) {
|
/* (function(i, s, o, g, r, a, m) {
|
||||||
i['GoogleAnalyticsObject'] = r;
|
i['GoogleAnalyticsObject'] = r;
|
||||||
(i[r] =
|
(i[r] =
|
||||||
i[r] ||
|
i[r] ||
|
||||||
|
|
@ -40,12 +40,12 @@ const LayoutUI = ((W) => {
|
||||||
'ga',
|
'ga',
|
||||||
);
|
);
|
||||||
ga('create', 'UA-********-*', 'auto');
|
ga('create', 'UA-********-*', 'auto');
|
||||||
ga('send', 'pageview');*/
|
ga('send', 'pageview'); */
|
||||||
};
|
}
|
||||||
|
|
||||||
W.addEventListener(`${Events.LOADED}`, () => {
|
W.addEventListener(`${Events.LOADED}`, () => {
|
||||||
init_fonts();
|
init_fonts()
|
||||||
//init_analytics();
|
// init_analytics();
|
||||||
});
|
})
|
||||||
})(window);
|
})(window)
|
||||||
export default LayoutUI;
|
export default LayoutUI
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
var debug = process.env.NODE_ENV === "development" ? true : false;
|
const debug = process.env.NODE_ENV === 'development'
|
||||||
|
|
||||||
const log = (msg) => {
|
const log = (msg) => {
|
||||||
if (debug) {
|
if (debug) {
|
||||||
console.log(msg);
|
console.log(msg)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
module.exports = log;
|
module.exports = log
|
||||||
|
|
|
||||||
|
|
@ -1,54 +1,54 @@
|
||||||
// browser tab visibility state detection
|
// browser tab visibility state detection
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Consts from "../_consts";
|
import Consts from '../_consts'
|
||||||
|
|
||||||
export default ((W) => {
|
export default ((W) => {
|
||||||
const NAME = "_main.css-screen-size";
|
const NAME = '_main.css-screen-size'
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = D.body;
|
const BODY = D.body
|
||||||
|
|
||||||
const detectCSSScreenSize = () => {
|
const detectCSSScreenSize = () => {
|
||||||
const el = D.createElement("div");
|
const el = D.createElement('div')
|
||||||
el.className = "env-test";
|
el.className = 'env-test'
|
||||||
BODY.appendChild(el);
|
BODY.appendChild(el)
|
||||||
|
|
||||||
const envs = [...Consts.ENVS].reverse();
|
const envs = [...Consts.ENVS].reverse()
|
||||||
let curEnv = envs.shift();
|
let curEnv = envs.shift()
|
||||||
BODY.classList.remove(...envs);
|
BODY.classList.remove(...envs)
|
||||||
|
|
||||||
for (let i = 0; i < envs.length; ++i) {
|
for (let i = 0; i < envs.length; ++i) {
|
||||||
const env = envs[i];
|
const env = envs[i]
|
||||||
el.classList.add(`d-${env}-none`);
|
el.classList.add(`d-${env}-none`)
|
||||||
|
|
||||||
if (W.getComputedStyle(el).display === "none") {
|
if (W.getComputedStyle(el).display === 'none') {
|
||||||
curEnv = env;
|
curEnv = env
|
||||||
BODY.classList.add(`${curEnv}`);
|
BODY.classList.add(`${curEnv}`)
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let landscape = true;
|
let landscape = true
|
||||||
if (W.innerWidth > W.innerHeight) {
|
if (W.innerWidth > W.innerHeight) {
|
||||||
BODY.classList.add("landscape");
|
BODY.classList.add('landscape')
|
||||||
BODY.classList.remove("portrait");
|
BODY.classList.remove('portrait')
|
||||||
} else {
|
} else {
|
||||||
landscape = false;
|
landscape = false
|
||||||
|
|
||||||
BODY.classList.add("portrait");
|
BODY.classList.add('portrait')
|
||||||
BODY.classList.remove("landscape");
|
BODY.classList.remove('landscape')
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
|
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
|
||||||
);
|
)
|
||||||
|
|
||||||
BODY.removeChild(el);
|
BODY.removeChild(el)
|
||||||
|
|
||||||
return curEnv;
|
return curEnv
|
||||||
};
|
}
|
||||||
|
|
||||||
W.addEventListener(`${Events.LOADED}`, detectCSSScreenSize);
|
W.addEventListener(`${Events.LOADED}`, detectCSSScreenSize)
|
||||||
|
|
||||||
W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize);
|
W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize)
|
||||||
})(window);
|
})(window)
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
const funcs = {};
|
const funcs = {}
|
||||||
|
|
||||||
/*!
|
/*!
|
||||||
* Get all of an element's parent elements up the DOM tree
|
* Get all of an element's parent elements up the DOM tree
|
||||||
|
|
@ -10,26 +10,26 @@ const funcs = {};
|
||||||
|
|
||||||
funcs.getParents = (elem, selector) => {
|
funcs.getParents = (elem, selector) => {
|
||||||
// Setup parents array
|
// Setup parents array
|
||||||
const parents = [];
|
const parents = []
|
||||||
let el = elem;
|
let el = elem
|
||||||
// Get matching parent elements
|
// Get matching parent elements
|
||||||
while (el && el !== document) {
|
while (el && el !== document) {
|
||||||
// If using a selector, add matching parents to array
|
// If using a selector, add matching parents to array
|
||||||
// Otherwise, add all parents
|
// Otherwise, add all parents
|
||||||
if (selector) {
|
if (selector) {
|
||||||
if (el.matches(selector)) {
|
if (el.matches(selector)) {
|
||||||
parents.push(el);
|
parents.push(el)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
parents.push(el);
|
parents.push(el)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Jump to the next parent node
|
// Jump to the next parent node
|
||||||
el = el.parentNode;
|
el = el.parentNode
|
||||||
}
|
}
|
||||||
|
|
||||||
return parents;
|
return parents
|
||||||
};
|
}
|
||||||
|
|
||||||
module.exports = funcs;
|
module.exports = funcs
|
||||||
module.exports.default = funcs;
|
module.exports.default = funcs
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import Events from '../_events';
|
import Events from '../_events'
|
||||||
import Consts from '../_consts';
|
import Consts from '../_consts'
|
||||||
|
|
||||||
import './visibility';
|
import './visibility'
|
||||||
import './touch';
|
import './touch'
|
||||||
import './css-screen-size';
|
import './css-screen-size'
|
||||||
import './main';
|
import './main'
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,22 @@
|
||||||
// browser tab visibility state detection
|
// browser tab visibility state detection
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const NAME = "_main.loading-spinner";
|
const NAME = '_main.loading-spinner'
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = D.body;
|
const BODY = D.body
|
||||||
const SPINNER = D.getElementById("PageLoading");
|
const SPINNER = D.getElementById('PageLoading')
|
||||||
|
|
||||||
class SpinnerUI {
|
class SpinnerUI {
|
||||||
static show() {
|
static show () {
|
||||||
console.log(`${NAME}: show`);
|
console.log(`${NAME}: show`)
|
||||||
SPINNER.classList.remove("d-none");
|
SPINNER.classList.remove('d-none')
|
||||||
}
|
}
|
||||||
static hide() {
|
|
||||||
console.log(`${NAME}: hide`);
|
static hide () {
|
||||||
SPINNER.classList.add("d-none");
|
console.log(`${NAME}: hide`)
|
||||||
|
SPINNER.classList.add('d-none')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SpinnerUI;
|
export default SpinnerUI
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,44 @@
|
||||||
import Events from '../_events';
|
import Events from '../_events'
|
||||||
import Consts from '../_consts';
|
import Consts from '../_consts'
|
||||||
import SpinnerUI from './loading-spinner';
|
import SpinnerUI from './loading-spinner'
|
||||||
|
|
||||||
const MainUI = ((window) => {
|
const MainUI = ((window) => {
|
||||||
const NAME = '_main';
|
const NAME = '_main'
|
||||||
const BODY = document.body;
|
const BODY = document.body
|
||||||
|
|
||||||
console.info(
|
console.info(
|
||||||
`%cUI Kit ${UINAME} ${UIVERSION}`,
|
`%cUI Kit ${UINAME} ${UIVERSION}`,
|
||||||
'color:yellow;font-size:14px'
|
'color:yellow;font-size:14px'
|
||||||
);
|
)
|
||||||
console.info(
|
console.info(
|
||||||
`%c${UIMetaNAME} ${UIMetaVersion}`,
|
`%c${UIMetaNAME} ${UIMetaVersion}`,
|
||||||
'color:yellow;font-size:12px'
|
'color:yellow;font-size:12px'
|
||||||
);
|
)
|
||||||
console.info(
|
console.info(
|
||||||
`%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`,
|
`%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`,
|
||||||
'color:yellow;font-size:10px'
|
'color:yellow;font-size:10px'
|
||||||
);
|
)
|
||||||
|
|
||||||
console.info(`%cENV: ${process.env.NODE_ENV}`, 'color:green;font-size:10px');
|
console.info(`%cENV: ${process.env.NODE_ENV}`, 'color:green;font-size:10px')
|
||||||
console.groupCollapsed('Events');
|
console.groupCollapsed('Events')
|
||||||
Object.keys(Events).forEach((k) => {
|
Object.keys(Events).forEach((k) => {
|
||||||
console.info(`${k}: ${Events[k]}`);
|
console.info(`${k}: ${Events[k]}`)
|
||||||
});
|
})
|
||||||
console.groupEnd('Events');
|
console.groupEnd('Events')
|
||||||
|
|
||||||
console.groupCollapsed('Consts');
|
console.groupCollapsed('Consts')
|
||||||
Object.keys(Consts).forEach((k) => {
|
Object.keys(Consts).forEach((k) => {
|
||||||
console.info(`${k}: ${Consts[k]}`);
|
console.info(`${k}: ${Consts[k]}`)
|
||||||
});
|
})
|
||||||
console.groupEnd('Events');
|
console.groupEnd('Events')
|
||||||
|
|
||||||
console.groupCollapsed('Init');
|
console.groupCollapsed('Init')
|
||||||
console.time('init');
|
console.time('init')
|
||||||
|
|
||||||
class MainUI {
|
class MainUI {
|
||||||
// first time the website initialization
|
// first time the website initialization
|
||||||
static init() {
|
static init () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
// store landing page state
|
// store landing page state
|
||||||
window.history.replaceState(
|
window.history.replaceState(
|
||||||
|
|
@ -47,46 +47,46 @@ const MainUI = ((window) => {
|
||||||
},
|
},
|
||||||
document.title,
|
document.title,
|
||||||
window.location.href
|
window.location.href
|
||||||
);
|
)
|
||||||
//
|
//
|
||||||
|
|
||||||
ui.loaded();
|
ui.loaded()
|
||||||
}
|
}
|
||||||
|
|
||||||
// init AJAX components
|
// init AJAX components
|
||||||
static loaded() {
|
static loaded () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
console.log(`${NAME}: loaded`);
|
console.log(`${NAME}: loaded`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const documentInit = () => {
|
const documentInit = () => {
|
||||||
MainUI.init();
|
MainUI.init()
|
||||||
|
|
||||||
BODY.classList.add('loaded');
|
BODY.classList.add('loaded')
|
||||||
SpinnerUI.hide();
|
SpinnerUI.hide()
|
||||||
|
|
||||||
console.groupEnd('init');
|
console.groupEnd('init')
|
||||||
console.timeEnd('init');
|
console.timeEnd('init')
|
||||||
|
|
||||||
window.addEventListener(`${Events.LOADED}`, (event) => {
|
window.addEventListener(`${Events.LOADED}`, (event) => {
|
||||||
window.dispatchEvent(new Event(Events.LODEDANDREADY));
|
window.dispatchEvent(new Event(Events.LODEDANDREADY))
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
if (document.readyState === 'loading') { // Loading hasn't finished yet
|
if (document.readyState === 'loading') { // Loading hasn't finished yet
|
||||||
document.addEventListener(`${Events.DOMLOADED}`, documentInit);
|
document.addEventListener(`${Events.DOMLOADED}`, documentInit)
|
||||||
}else {
|
} else {
|
||||||
documentInit();
|
documentInit()
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener(`${Events.AJAX}`, () => {
|
window.addEventListener(`${Events.AJAX}`, () => {
|
||||||
MainUI.loaded();
|
MainUI.loaded()
|
||||||
});
|
})
|
||||||
|
|
||||||
window.MainUI = MainUI;
|
window.MainUI = MainUI
|
||||||
|
|
||||||
return MainUI;
|
return MainUI
|
||||||
})(window);
|
})(window)
|
||||||
|
|
||||||
export default MainUI;
|
export default MainUI
|
||||||
|
|
|
||||||
|
|
@ -1,70 +1,70 @@
|
||||||
// touch/mouse detection
|
// touch/mouse detection
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Consts from "../_consts";
|
import Consts from '../_consts'
|
||||||
|
|
||||||
export default ((W) => {
|
export default ((W) => {
|
||||||
const NAME = "_main.touch";
|
const NAME = '_main.touch'
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = D.body;
|
const BODY = D.body
|
||||||
|
|
||||||
let prev_touch_event_name;
|
let prev_touch_event_name
|
||||||
let touch_timeout;
|
let touch_timeout
|
||||||
const SET_TOUCH_SCREEN = (bool, event_name) => {
|
const SET_TOUCH_SCREEN = (bool, event_name) => {
|
||||||
if (touch_timeout || event_name === prev_touch_event_name) {
|
if (touch_timeout || event_name === prev_touch_event_name) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (bool) {
|
if (bool) {
|
||||||
console.log(`${NAME}: Touch screen enabled`);
|
console.log(`${NAME}: Touch screen enabled`)
|
||||||
|
|
||||||
BODY.classList.add("is-touch");
|
BODY.classList.add('is-touch')
|
||||||
BODY.classList.remove("is-mouse");
|
BODY.classList.remove('is-mouse')
|
||||||
|
|
||||||
W.dispatchEvent(new Event(Events.TOUCHENABLE));
|
W.dispatchEvent(new Event(Events.TOUCHENABLE))
|
||||||
} else {
|
} else {
|
||||||
console.log(`${NAME}: Touch screen disabled`);
|
console.log(`${NAME}: Touch screen disabled`)
|
||||||
|
|
||||||
BODY.classList.add("is-mouse");
|
BODY.classList.add('is-mouse')
|
||||||
BODY.classList.remove("is-touch");
|
BODY.classList.remove('is-touch')
|
||||||
|
|
||||||
W.dispatchEvent(new Event(Events.TOUCHDISABLED));
|
W.dispatchEvent(new Event(Events.TOUCHDISABLED))
|
||||||
}
|
}
|
||||||
|
|
||||||
prev_touch_event_name = event_name;
|
prev_touch_event_name = event_name
|
||||||
// prevent firing touch and mouse events together
|
// prevent firing touch and mouse events together
|
||||||
if (!touch_timeout) {
|
if (!touch_timeout) {
|
||||||
touch_timeout = setTimeout(() => {
|
touch_timeout = setTimeout(() => {
|
||||||
clearTimeout(touch_timeout);
|
clearTimeout(touch_timeout)
|
||||||
touch_timeout = null;
|
touch_timeout = null
|
||||||
}, 500);
|
}, 500)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
SET_TOUCH_SCREEN(
|
SET_TOUCH_SCREEN(
|
||||||
"ontouchstart" in W ||
|
'ontouchstart' in W ||
|
||||||
navigator.MaxTouchPoints > 0 ||
|
navigator.MaxTouchPoints > 0 ||
|
||||||
navigator.msMaxTouchPoints > 0 ||
|
navigator.msMaxTouchPoints > 0 ||
|
||||||
W.matchMedia("(hover: none)").matches,
|
W.matchMedia('(hover: none)').matches,
|
||||||
"init"
|
'init'
|
||||||
);
|
)
|
||||||
|
|
||||||
D.addEventListener("touchend", (e) => {
|
D.addEventListener('touchend', (e) => {
|
||||||
let touch = false;
|
let touch = false
|
||||||
if (e.type !== "click") {
|
if (e.type !== 'click') {
|
||||||
touch = true;
|
touch = true
|
||||||
}
|
}
|
||||||
|
|
||||||
SET_TOUCH_SCREEN(touch, "click-touchend");
|
SET_TOUCH_SCREEN(touch, 'click-touchend')
|
||||||
});
|
})
|
||||||
|
|
||||||
// disable touch on mouse events
|
// disable touch on mouse events
|
||||||
D.addEventListener("click", (e) => {
|
D.addEventListener('click', (e) => {
|
||||||
let touch = false;
|
let touch = false
|
||||||
if (e.type !== "click") {
|
if (e.type !== 'click') {
|
||||||
touch = true;
|
touch = true
|
||||||
}
|
}
|
||||||
|
|
||||||
SET_TOUCH_SCREEN(touch, "click-touchend");
|
SET_TOUCH_SCREEN(touch, 'click-touchend')
|
||||||
});
|
})
|
||||||
})(window);
|
})(window)
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,34 @@
|
||||||
// browser tab visibility state detection
|
// browser tab visibility state detection
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Consts from "../_consts";
|
import Consts from '../_consts'
|
||||||
|
|
||||||
export default ((W) => {
|
export default ((W) => {
|
||||||
const NAME = "_main.visibility";
|
const NAME = '_main.visibility'
|
||||||
const D = document;
|
const D = document
|
||||||
const BODY = D.body;
|
const BODY = D.body
|
||||||
|
|
||||||
// update visibility state
|
// update visibility state
|
||||||
// get browser window visibility preferences
|
// get browser window visibility preferences
|
||||||
// Opera 12.10, Firefox >=18, Chrome >=31, IE11
|
// Opera 12.10, Firefox >=18, Chrome >=31, IE11
|
||||||
const HiddenName = "hidden";
|
const HiddenName = 'hidden'
|
||||||
const VisibilityChangeEvent = "visibilitychange";
|
const VisibilityChangeEvent = 'visibilitychange'
|
||||||
|
|
||||||
D.addEventListener(VisibilityChangeEvent, () => {
|
D.addEventListener(VisibilityChangeEvent, () => {
|
||||||
if (D.visibilityState === HiddenName) {
|
if (D.visibilityState === HiddenName) {
|
||||||
console.log(`${NAME}: Tab: hidden`);
|
console.log(`${NAME}: Tab: hidden`)
|
||||||
|
|
||||||
BODY.classList.add("is-hidden");
|
BODY.classList.add('is-hidden')
|
||||||
BODY.classList.remove("is-focused");
|
BODY.classList.remove('is-focused')
|
||||||
|
|
||||||
W.dispatchEvent(new Event(Events.TABHIDDEN));
|
W.dispatchEvent(new Event(Events.TABHIDDEN))
|
||||||
} else {
|
} else {
|
||||||
console.log(`${NAME}: Tab: focused`);
|
console.log(`${NAME}: Tab: focused`)
|
||||||
|
|
||||||
BODY.classList.add("is-focused");
|
BODY.classList.add('is-focused')
|
||||||
BODY.classList.remove("is-hidden");
|
BODY.classList.remove('is-hidden')
|
||||||
|
|
||||||
W.dispatchEvent(new Event(Events.TABFOCUSED));
|
W.dispatchEvent(new Event(Events.TABFOCUSED))
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
})(window);
|
})(window)
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
import PageControls from "./page-controls";
|
import PageControls from './page-controls'
|
||||||
|
|
||||||
export { PageControls };
|
export { PageControls }
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
export default class PageControls {
|
export default class PageControls {
|
||||||
constructor(store) {
|
constructor (store) {
|
||||||
console.log("page-controls init");
|
console.log('page-controls init')
|
||||||
console.log(store);
|
console.log(store)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { createStore } from "redux";
|
import { createStore } from 'redux'
|
||||||
import reducers from "./reducers";
|
import reducers from './reducers'
|
||||||
|
|
||||||
export default function configure() {
|
export default function configure () {
|
||||||
return createStore(reducers);
|
return createStore(reducers)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
export function getItemList(store) {
|
export function getItemList (store) {
|
||||||
return store.getState().items.all;
|
return store.getState().items.all
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
import configure from "./configure";
|
import configure from './configure'
|
||||||
const store = configure();
|
const store = configure()
|
||||||
|
|
||||||
/*import {
|
/* import {
|
||||||
PageControls
|
PageControls
|
||||||
} from './components'*/
|
} from './components' */
|
||||||
|
|
||||||
//const pageControls = new PageControls(store)
|
// const pageControls = new PageControls(store)
|
||||||
|
|
||||||
store.subscribe(() => console.log(store.getState()));
|
store.subscribe(() => console.log(store.getState()))
|
||||||
store.dispatch({
|
store.dispatch({
|
||||||
type: "counter/incremented",
|
type: 'counter/incremented',
|
||||||
});
|
})
|
||||||
store.dispatch({
|
store.dispatch({
|
||||||
type: "counter/incremented",
|
type: 'counter/incremented',
|
||||||
});
|
})
|
||||||
store.dispatch({
|
store.dispatch({
|
||||||
type: "counter/decremented",
|
type: 'counter/decremented',
|
||||||
});
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
export default function counter(
|
export default function counter (
|
||||||
state = {
|
state = {
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
action
|
action
|
||||||
) {
|
) {
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case "counter/incremented":
|
case 'counter/incremented':
|
||||||
return {
|
return {
|
||||||
value: state.value + 1,
|
value: state.value + 1,
|
||||||
};
|
}
|
||||||
case "counter/decremented":
|
case 'counter/decremented':
|
||||||
return {
|
return {
|
||||||
value: state.value - 1,
|
value: state.value - 1,
|
||||||
};
|
}
|
||||||
default:
|
default:
|
||||||
return state;
|
return state
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { combineReducers } from "redux";
|
import { combineReducers } from 'redux'
|
||||||
|
|
||||||
import counter from "./counter";
|
import counter from './counter'
|
||||||
|
|
||||||
export default combineReducers({
|
export default combineReducers({
|
||||||
counter,
|
counter,
|
||||||
});
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
'use strict';
|
'use strict'
|
||||||
|
|
||||||
import '../scss/test-build.scss';
|
import '../scss/test-build.scss'
|
||||||
import '@a2nt/meta-lightbox-js/src/js/test-build';
|
import '@a2nt/meta-lightbox-js/src/js/test-build'
|
||||||
|
|
||||||
import Events from './_events';
|
import Events from './_events'
|
||||||
import MainUI from './main';
|
import MainUI from './main'
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* AJAX functionality
|
* AJAX functionality
|
||||||
*/
|
*/
|
||||||
//import "./ajax/links";
|
// import "./ajax/links";
|
||||||
import './ajax/online';
|
import './ajax/online'
|
||||||
import './ajax/lazy-images';
|
import './ajax/lazy-images'
|
||||||
|
|
||||||
import './layout';
|
import './layout'
|
||||||
|
|
||||||
import './store';
|
import './store'
|
||||||
|
|
||||||
/*if (process.env.NODEENV === 'development') {
|
/* if (process.env.NODEENV === 'development') {
|
||||||
// mocking service worker
|
// mocking service worker
|
||||||
const regeneratorRuntime = require('regenerator-runtime');
|
const regeneratorRuntime = require('regenerator-runtime');
|
||||||
const {
|
const {
|
||||||
|
|
@ -31,9 +31,9 @@ import './store';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
}*/
|
} */
|
||||||
// caching service worker (set injectClient: false at webpack.config.serve.js)
|
// caching service worker (set injectClient: false at webpack.config.serve.js)
|
||||||
/*if (process.env.NODEENV === 'development') {if ('serviceWorker' in navigator) {
|
/* if (process.env.NODEENV === 'development') {if ('serviceWorker' in navigator) {
|
||||||
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
|
const baseHref = (document.getElementsByTagName('base')[0] || {}).href;
|
||||||
const version = (document.querySelector('meta[name="swversion"]') || {})
|
const version = (document.querySelector('meta[name="swversion"]') || {})
|
||||||
.content;
|
.content;
|
||||||
|
|
@ -44,24 +44,24 @@ import './store';
|
||||||
console.log('SW: Registered');
|
console.log('SW: Registered');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}}*/
|
}} */
|
||||||
|
|
||||||
function importAll(r) {
|
function importAll (r) {
|
||||||
return r.keys().map(r);
|
return r.keys().map(r)
|
||||||
}
|
}
|
||||||
|
|
||||||
const images = importAll(
|
const images = importAll(
|
||||||
require.context('../img/', false, /\.(png|jpe?g|svg)$/)
|
require.context('../img/', false, /\.(png|jpe?g|svg)$/)
|
||||||
);
|
)
|
||||||
const fontAwesome = importAll(
|
const fontAwesome = importAll(
|
||||||
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/)
|
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/)
|
||||||
);
|
)
|
||||||
|
|
||||||
if (module.hot) {
|
if (module.hot) {
|
||||||
module.hot.accept('app.js', () => {
|
module.hot.accept('app.js', () => {
|
||||||
console.log('Accepting the updated printMe module!');
|
console.log('Accepting the updated printMe module!')
|
||||||
});
|
})
|
||||||
module.hot.accept('app.scss', () => {
|
module.hot.accept('app.scss', () => {
|
||||||
console.log('Accepting the updated printMe module!');
|
console.log('Accepting the updated printMe module!')
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,58 +1,58 @@
|
||||||
// caches polyfill because it is not added to native yet!
|
// caches polyfill because it is not added to native yet!
|
||||||
var CACHE_NAME = `${UINAME}-sw`;
|
const CACHE_NAME = `${UINAME}-sw`
|
||||||
var debug = process.env.NODE_ENV === "development" ? true : false;
|
const debug = process.env.NODE_ENV === 'development'
|
||||||
var version = `${UIVERSION}-sw`;
|
const version = `${UIVERSION}-sw`
|
||||||
|
|
||||||
var log = require("../libs/log");
|
const log = require('../libs/log')
|
||||||
var caches = require("../../../thirdparty/serviceworker-caches");
|
const caches = require('../../../thirdparty/serviceworker-caches')
|
||||||
|
|
||||||
if (debug) {
|
if (debug) {
|
||||||
log("SW: debug is on");
|
log('SW: debug is on')
|
||||||
log(`SW: CACHE_NAME: ${CACHE_NAME}`);
|
log(`SW: CACHE_NAME: ${CACHE_NAME}`)
|
||||||
//log(`SW: appDomain: ${appDomain}`);
|
// log(`SW: appDomain: ${appDomain}`);
|
||||||
//log(`SW: lang: ${lang}`);
|
// log(`SW: lang: ${lang}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof CACHE_NAME !== "string") {
|
if (typeof CACHE_NAME !== 'string') {
|
||||||
throw new Error("Cache Name cannot be empty");
|
throw new Error('Cache Name cannot be empty')
|
||||||
}
|
}
|
||||||
|
|
||||||
self.addEventListener("fetch", (event) => {
|
self.addEventListener('fetch', (event) => {
|
||||||
// skip non-get
|
// skip non-get
|
||||||
if (event.request.method !== "GET") {
|
if (event.request.method !== 'GET') {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
//Parse the url
|
// Parse the url
|
||||||
const requestURL = new URL(event.request.url);
|
const requestURL = new URL(event.request.url)
|
||||||
|
|
||||||
//Check for our own urls
|
// Check for our own urls
|
||||||
/*if (requestURL.origin !== location.origin) {
|
/* if (requestURL.origin !== location.origin) {
|
||||||
log('SW: skip external ' + event.request.url);
|
log('SW: skip external ' + event.request.url);
|
||||||
return;
|
return;
|
||||||
}*/
|
} */
|
||||||
|
|
||||||
//Skip admin url's
|
// Skip admin url's
|
||||||
if (
|
if (
|
||||||
requestURL.pathname.indexOf("admin") >= 0 ||
|
requestURL.pathname.indexOf('admin') >= 0 ||
|
||||||
requestURL.pathname.indexOf("Security") >= 0 ||
|
requestURL.pathname.indexOf('Security') >= 0 ||
|
||||||
requestURL.pathname.indexOf("/dev") >= 0
|
requestURL.pathname.indexOf('/dev') >= 0
|
||||||
) {
|
) {
|
||||||
log(`SW: skip admin ${event.request.url}`);
|
log(`SW: skip admin ${event.request.url}`)
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
//Test for images
|
// Test for images
|
||||||
/*if (/\.(jpg|jpeg|png|gif|webp)$/.test(requestURL.pathname)) {
|
/* if (/\.(jpg|jpeg|png|gif|webp)$/.test(requestURL.pathname)) {
|
||||||
log('SW: skip image ' + event.request.url);
|
log('SW: skip image ' + event.request.url);
|
||||||
//For now we skip images but change this later to maybe some caching and/or an offline fallback
|
//For now we skip images but change this later to maybe some caching and/or an offline fallback
|
||||||
return;
|
return;
|
||||||
}*/
|
} */
|
||||||
|
|
||||||
// Clone the request for fetch and cache
|
// Clone the request for fetch and cache
|
||||||
// A request is a stream and can be consumed only once.
|
// A request is a stream and can be consumed only once.
|
||||||
const fetchRequest = event.request.clone(),
|
const fetchRequest = event.request.clone()
|
||||||
cacheRequest = event.request.clone();
|
const cacheRequest = event.request.clone()
|
||||||
|
|
||||||
// Respond with content from fetch or cache
|
// Respond with content from fetch or cache
|
||||||
event.respondWith(
|
event.respondWith(
|
||||||
|
|
@ -64,39 +64,39 @@ self.addEventListener("fetch", (event) => {
|
||||||
// Because we want the browser to consume the response,
|
// Because we want the browser to consume the response,
|
||||||
// as well as cache to consume the response, we need to
|
// as well as cache to consume the response, we need to
|
||||||
// clone it so we have 2 streams
|
// clone it so we have 2 streams
|
||||||
const responseToCache = response.clone();
|
const responseToCache = response.clone()
|
||||||
|
|
||||||
// and update the cache
|
// and update the cache
|
||||||
caches.open(CACHE_NAME).then((cache) => {
|
caches.open(CACHE_NAME).then((cache) => {
|
||||||
// Clone the request again to use it
|
// Clone the request again to use it
|
||||||
// as the key for our cache
|
// as the key for our cache
|
||||||
const cacheSaveRequest = event.request.clone();
|
const cacheSaveRequest = event.request.clone()
|
||||||
cache.put(cacheSaveRequest, responseToCache);
|
cache.put(cacheSaveRequest, responseToCache)
|
||||||
});
|
})
|
||||||
|
|
||||||
// Return the response stream to be consumed by browser
|
// Return the response stream to be consumed by browser
|
||||||
return response;
|
return response
|
||||||
})
|
})
|
||||||
|
|
||||||
// when fetch times out or fails
|
// when fetch times out or fails
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
log("SW: fetch failed");
|
log('SW: fetch failed')
|
||||||
// Return the promise which
|
// Return the promise which
|
||||||
// resolves on a match in cache for the current request
|
// resolves on a match in cache for the current request
|
||||||
// or rejects if no matches are found
|
// or rejects if no matches are found
|
||||||
return caches.match(cacheRequest);
|
return caches.match(cacheRequest)
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
});
|
})
|
||||||
|
|
||||||
// Now we need to clean up resources in the previous versions
|
// Now we need to clean up resources in the previous versions
|
||||||
// of Service Worker scripts
|
// of Service Worker scripts
|
||||||
self.addEventListener("activate", (event) => {
|
self.addEventListener('activate', (event) => {
|
||||||
log(`SW: activated: ${version}`);
|
log(`SW: activated: ${version}`)
|
||||||
// Destroy the cache
|
// Destroy the cache
|
||||||
event.waitUntil(caches.delete(CACHE_NAME));
|
event.waitUntil(caches.delete(CACHE_NAME))
|
||||||
});
|
})
|
||||||
|
|
||||||
self.addEventListener("install", (e) => {
|
self.addEventListener('install', (e) => {
|
||||||
log(`SW: installing version: ${version}`);
|
log(`SW: installing version: ${version}`)
|
||||||
});
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,145 +1,145 @@
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Carousel from "bootstrap/js/src/carousel";
|
import Carousel from 'bootstrap/js/src/carousel'
|
||||||
|
|
||||||
const CarouselUI = ((window) => {
|
const CarouselUI = ((window) => {
|
||||||
const NAME = "js-carousel";
|
const NAME = 'js-carousel'
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
||||||
const carousel = new Carousel(el, {
|
const carousel = new Carousel(el, {
|
||||||
interval: el.dataset.bsInterval ? parseInt(el.dataset.bsInterval) : false,
|
interval: el.dataset.bsInterval ? parseInt(el.dataset.bsInterval) : false,
|
||||||
});
|
})
|
||||||
el.ui = carousel;
|
el.ui = carousel
|
||||||
const items = el.querySelectorAll(".carousel-item");
|
const items = el.querySelectorAll('.carousel-item')
|
||||||
const numberOfItems = parseInt(items.length);
|
const numberOfItems = parseInt(items.length)
|
||||||
|
|
||||||
// create next/prev arrows
|
// create next/prev arrows
|
||||||
if (el.dataset.bsArrows) {
|
if (el.dataset.bsArrows) {
|
||||||
const next = document.createElement("button");
|
const next = document.createElement('button')
|
||||||
next.classList.add("carousel-control-next");
|
next.classList.add('carousel-control-next')
|
||||||
next.setAttribute("type", "button");
|
next.setAttribute('type', 'button')
|
||||||
next.setAttribute("aria-label", "Next Slide");
|
next.setAttribute('aria-label', 'Next Slide')
|
||||||
next.setAttribute("data-bs-target", el.getAttribute("id"));
|
next.setAttribute('data-bs-target', el.getAttribute('id'))
|
||||||
next.setAttribute("data-bs-slide", "next");
|
next.setAttribute('data-bs-slide', 'next')
|
||||||
next.addEventListener("click", (e) => {
|
next.addEventListener('click', (e) => {
|
||||||
carousel.next();
|
carousel.next()
|
||||||
});
|
})
|
||||||
next.innerHTML =
|
next.innerHTML =
|
||||||
'<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
|
'<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>'
|
||||||
el.appendChild(next);
|
el.appendChild(next)
|
||||||
|
|
||||||
const prev = document.createElement("button");
|
const prev = document.createElement('button')
|
||||||
prev.setAttribute("type", "button");
|
prev.setAttribute('type', 'button')
|
||||||
prev.setAttribute("aria-label", "Previous Slide");
|
prev.setAttribute('aria-label', 'Previous Slide')
|
||||||
prev.classList.add("carousel-control-prev");
|
prev.classList.add('carousel-control-prev')
|
||||||
prev.setAttribute("data-bs-target", el.getAttribute("id"));
|
prev.setAttribute('data-bs-target', el.getAttribute('id'))
|
||||||
prev.setAttribute("data-bs-slide", "prev");
|
prev.setAttribute('data-bs-slide', 'prev')
|
||||||
prev.addEventListener("click", (e) => {
|
prev.addEventListener('click', (e) => {
|
||||||
carousel.prev();
|
carousel.prev()
|
||||||
});
|
})
|
||||||
prev.innerHTML =
|
prev.innerHTML =
|
||||||
'<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
|
'<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>'
|
||||||
el.appendChild(prev);
|
el.appendChild(prev)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (el.dataset.bsIndicators) {
|
if (el.dataset.bsIndicators) {
|
||||||
const indicators = document.createElement("div");
|
const indicators = document.createElement('div')
|
||||||
indicators.classList.add("carousel-indicators");
|
indicators.classList.add('carousel-indicators')
|
||||||
let i = 0;
|
let i = 0
|
||||||
while (i < numberOfItems) {
|
while (i < numberOfItems) {
|
||||||
const ind = document.createElement("button");
|
const ind = document.createElement('button')
|
||||||
ind.setAttribute("type", "button");
|
ind.setAttribute('type', 'button')
|
||||||
ind.setAttribute("aria-label", `Slide to #${i + 1}`);
|
ind.setAttribute('aria-label', `Slide to #${i + 1}`)
|
||||||
if (i == 0) {
|
if (i == 0) {
|
||||||
ind.classList.add("active");
|
ind.classList.add('active')
|
||||||
}
|
}
|
||||||
ind.setAttribute("data-bs-target", el.getAttribute("id"));
|
ind.setAttribute('data-bs-target', el.getAttribute('id'))
|
||||||
ind.setAttribute("data-bs-slide-to", i);
|
ind.setAttribute('data-bs-slide-to', i)
|
||||||
|
|
||||||
ind.addEventListener("click", (e) => {
|
ind.addEventListener('click', (e) => {
|
||||||
const target = e.target;
|
const target = e.target
|
||||||
carousel.to(target.getAttribute("data-bs-slide-to"));
|
carousel.to(target.getAttribute('data-bs-slide-to'))
|
||||||
indicators.querySelectorAll(".active").forEach((ind2) => {
|
indicators.querySelectorAll('.active').forEach((ind2) => {
|
||||||
ind2.classList.remove("active");
|
ind2.classList.remove('active')
|
||||||
});
|
})
|
||||||
target.classList.add("active");
|
target.classList.add('active')
|
||||||
});
|
})
|
||||||
|
|
||||||
indicators.appendChild(ind);
|
indicators.appendChild(ind)
|
||||||
i++;
|
i++
|
||||||
}
|
}
|
||||||
|
|
||||||
el.appendChild(indicators);
|
el.appendChild(indicators)
|
||||||
el.addEventListener("slide.bs.carousel", (e) => {
|
el.addEventListener('slide.bs.carousel', (e) => {
|
||||||
el.querySelectorAll(".carousel-indicators .active").forEach(
|
el.querySelectorAll('.carousel-indicators .active').forEach(
|
||||||
(ind2) => {
|
(ind2) => {
|
||||||
ind2.classList.remove("active");
|
ind2.classList.remove('active')
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
el.querySelectorAll(
|
el.querySelectorAll(
|
||||||
`.carousel-indicators [data-bs-slide-to="${e.to}"]`
|
`.carousel-indicators [data-bs-slide-to="${e.to}"]`
|
||||||
).forEach((ind2) => {
|
).forEach((ind2) => {
|
||||||
ind2.classList.add("active");
|
ind2.classList.add('active')
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if(el.classList.contains('carousel-multislide')){
|
if (el.classList.contains('carousel-multislide')) {
|
||||||
const calculate = new ResizeObserver((entries) => {
|
const calculate = new ResizeObserver((entries) => {
|
||||||
const entry = entries[0];
|
const entry = entries[0]
|
||||||
const el = entry.target;
|
const el = entry.target
|
||||||
const rect = entry.contentRect;
|
const rect = entry.contentRect
|
||||||
|
|
||||||
const items = el.querySelectorAll('.carousel-item');
|
const items = el.querySelectorAll('.carousel-item')
|
||||||
const width = rect.width;
|
const width = rect.width
|
||||||
const height = rect.height;
|
const height = rect.height
|
||||||
const numToDisplay = Math.min(parseInt(el.dataset['length']), numberOfItems);
|
const numToDisplay = Math.min(parseInt(el.dataset.length), numberOfItems)
|
||||||
const itemWidth = width / numToDisplay;
|
const itemWidth = width / numToDisplay
|
||||||
|
|
||||||
el.dataset['itemWidth'] = itemWidth;
|
el.dataset.itemWidth = itemWidth
|
||||||
el.dataset['numToDisplay'] = numToDisplay;
|
el.dataset.numToDisplay = numToDisplay
|
||||||
|
|
||||||
el.querySelector('.carousel-inner').style.width = `${numberOfItems * itemWidth }px`;
|
el.querySelector('.carousel-inner').style.width = `${numberOfItems * itemWidth}px`
|
||||||
items.forEach((el,i) => {
|
items.forEach((el, i) => {
|
||||||
el.style.width = `${itemWidth }px`;
|
el.style.width = `${itemWidth}px`
|
||||||
});
|
})
|
||||||
|
|
||||||
if(numberOfItems === numToDisplay) {
|
if (numberOfItems === numToDisplay) {
|
||||||
el.classList.add('js-carousel-no-slide');
|
el.classList.add('js-carousel-no-slide')
|
||||||
carousel.pause();
|
carousel.pause()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
calculate.observe(el);
|
calculate.observe(el)
|
||||||
|
|
||||||
el.addEventListener('slide.bs.carousel', (e) => {
|
el.addEventListener('slide.bs.carousel', (e) => {
|
||||||
const inner = el.querySelector('.carousel-inner');
|
const inner = el.querySelector('.carousel-inner')
|
||||||
|
|
||||||
switch (e.direction) {
|
switch (e.direction) {
|
||||||
case 'left':
|
case 'left':
|
||||||
inner.style.left = `${-(e.to * el.dataset['itemWidth']) }px`;
|
inner.style.left = `${-(e.to * el.dataset.itemWidth)}px`
|
||||||
break;
|
break
|
||||||
case 'right':
|
case 'right':
|
||||||
inner.style.left = `${-(e.to * el.dataset['itemWidth']) }px`;
|
inner.style.left = `${-(e.to * el.dataset.itemWidth)}px`
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
el.classList.add(`${NAME}-multislide-active`);
|
el.classList.add(`${NAME}-multislide-active`)
|
||||||
}else{
|
} else {
|
||||||
if(items.length === 1) {
|
if (items.length === 1) {
|
||||||
el.classList.add('js-carousel-no-slide');
|
el.classList.add('js-carousel-no-slide')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
el.classList.add(`${NAME}-active`);
|
el.classList.add(`${NAME}-active`)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
window.addEventListener(`${Events.LODEDANDREADY}`, init)
|
||||||
window.addEventListener(`${Events.AJAX}`, init);
|
window.addEventListener(`${Events.AJAX}`, init)
|
||||||
})(window);
|
})(window)
|
||||||
|
|
||||||
export default CarouselUI;
|
export default CarouselUI
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
import Events from '../_events';
|
import Events from '../_events'
|
||||||
import Datepicker from 'vanillajs-datepicker/Datepicker';
|
import Datepicker from 'vanillajs-datepicker/Datepicker'
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
document.querySelectorAll('.js-datepicker').forEach((el, i) => {
|
document.querySelectorAll('.js-datepicker').forEach((el, i) => {
|
||||||
const picker = new Datepicker(el);
|
const picker = new Datepicker(el)
|
||||||
el.ui = picker;
|
el.ui = picker
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
window.addEventListener(`${Events.LODEDANDREADY}`, init)
|
||||||
window.addEventListener(`${Events.AJAX}`, init);
|
window.addEventListener(`${Events.AJAX}`, init)
|
||||||
|
|
||||||
export default Datepicker;
|
export default Datepicker
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import Events from '../_events';
|
import Events from '../_events'
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Bootstrap compatible dropdowns without popover library
|
* Bootstrap compatible dropdowns without popover library
|
||||||
|
|
@ -8,101 +8,100 @@ import Events from '../_events';
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
const DropdownHoverUI = ((window) => {
|
const DropdownHoverUI = ((window) => {
|
||||||
const NAME = 'js-dropdown';
|
const NAME = 'js-dropdown'
|
||||||
|
|
||||||
const HideAll = () => {
|
const HideAll = () => {
|
||||||
// hide others
|
// hide others
|
||||||
document.querySelectorAll('.dropdown-menu').forEach((el, i) => {
|
document.querySelectorAll('.dropdown-menu').forEach((el, i) => {
|
||||||
el.classList.remove('show');
|
el.classList.remove('show')
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
const Toggle = (el) => {
|
const Toggle = (el) => {
|
||||||
HideAll();
|
HideAll()
|
||||||
|
|
||||||
el.querySelector('.dropdown-menu').classList.toggle('show');
|
el.querySelector('.dropdown-menu').classList.toggle('show')
|
||||||
};
|
}
|
||||||
|
|
||||||
const Show = (e) => {
|
const Show = (e) => {
|
||||||
const el = e.currentTarget;
|
const el = e.currentTarget
|
||||||
el.querySelector('.dropdown-menu').classList.add('show');
|
el.querySelector('.dropdown-menu').classList.add('show')
|
||||||
};
|
}
|
||||||
|
|
||||||
const Hide = (e) => {
|
const Hide = (e) => {
|
||||||
const el = e.currentTarget;
|
const el = e.currentTarget
|
||||||
el.querySelector('.dropdown-menu').classList.remove('show');
|
el.querySelector('.dropdown-menu').classList.remove('show')
|
||||||
};
|
}
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`);
|
const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`)
|
||||||
const hoverableEls = document.querySelectorAll(`[data-bs-toggle="hover"]`);
|
const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
|
||||||
|
|
||||||
const attachHoverEvents = (el) => {
|
const attachHoverEvents = (el) => {
|
||||||
el.addEventListener('mouseover', Show, false);
|
el.addEventListener('mouseover', Show, false)
|
||||||
el.addEventListener('mouseout', Hide, false);
|
el.addEventListener('mouseout', Hide, false)
|
||||||
|
|
||||||
el.classList.add(`${NAME}-active`);
|
el.classList.add(`${NAME}-active`)
|
||||||
};
|
}
|
||||||
|
|
||||||
const attachClickEvents = (el) => {
|
const attachClickEvents = (el) => {
|
||||||
el.addEventListener('click', (e) => {
|
el.addEventListener('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
const el = e.currentTarget;
|
const el = e.currentTarget
|
||||||
const parent = el.closest('.dropdown');
|
const parent = el.closest('.dropdown')
|
||||||
Toggle(parent);
|
Toggle(parent)
|
||||||
});
|
})
|
||||||
|
|
||||||
el.classList.add(`${NAME}-active`);
|
el.classList.add(`${NAME}-active`)
|
||||||
};
|
}
|
||||||
|
|
||||||
// Hide all for outside clicks
|
// Hide all for outside clicks
|
||||||
/*document.addEventListener('click', function (event) {
|
/* document.addEventListener('click', function (event) {
|
||||||
const isClickInside = clickableEls.contains(event.target);
|
const isClickInside = clickableEls.contains(event.target);
|
||||||
|
|
||||||
if (!isClickInside) {
|
if (!isClickInside) {
|
||||||
HideAll();
|
HideAll();
|
||||||
}
|
}
|
||||||
});*/
|
}); */
|
||||||
|
|
||||||
document.addEventListener('click', (event) => {
|
document.addEventListener('click', (event) => {
|
||||||
let breakPath = false;
|
let breakPath = false
|
||||||
const path = event.path || (event.composedPath && event.composedPath());
|
const path = event.path || (event.composedPath && event.composedPath())
|
||||||
|
|
||||||
if (!path) {
|
if (!path) {
|
||||||
console.warn('Browser does not provide event path to hide dropdowns on outside click');
|
console.warn('Browser does not provide event path to hide dropdowns on outside click')
|
||||||
}
|
}
|
||||||
|
|
||||||
path.forEach((el, i) => {
|
path.forEach((el, i) => {
|
||||||
if (breakPath) {
|
if (breakPath) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (el === document) {
|
if (el === document) {
|
||||||
HideAll();
|
HideAll()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (el.classList && el.classList.contains('dropdown-toggle')) {
|
if (el.classList && el.classList.contains('dropdown-toggle')) {
|
||||||
breakPath = true;
|
breakPath = true
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
hoverableEls.forEach((el, i) => {
|
hoverableEls.forEach((el, i) => {
|
||||||
const parent = el.closest('.dropdown');
|
const parent = el.closest('.dropdown')
|
||||||
attachHoverEvents(parent);
|
attachHoverEvents(parent)
|
||||||
});
|
})
|
||||||
|
|
||||||
clickableEls.forEach((el, i) => {
|
clickableEls.forEach((el, i) => {
|
||||||
attachClickEvents(el);
|
attachClickEvents(el)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
window.addEventListener(`${Events.LODEDANDREADY}`, init)
|
||||||
window.addEventListener(`${Events.AJAX}`, init);
|
window.addEventListener(`${Events.AJAX}`, init)
|
||||||
})(window);
|
})(window)
|
||||||
|
|
||||||
export default DropdownHoverUI;
|
export default DropdownHoverUI
|
||||||
|
|
|
||||||
|
|
@ -3,91 +3,91 @@
|
||||||
// Visitor network maybe temporary banned by Instagram because of too many requests from external websites
|
// Visitor network maybe temporary banned by Instagram because of too many requests from external websites
|
||||||
// so it isn't very stable implementation. You should have something for the fall-back.
|
// so it isn't very stable implementation. You should have something for the fall-back.
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Consts from "../_consts";
|
import Consts from '../_consts'
|
||||||
import InstagramFeed from "@jsanahuja/instagramfeed/src/InstagramFeed";
|
import InstagramFeed from '@jsanahuja/instagramfeed/src/InstagramFeed'
|
||||||
|
|
||||||
export default ((window) => {
|
export default ((window) => {
|
||||||
const NAME = "js-instagramfeed";
|
const NAME = 'js-instagramfeed'
|
||||||
const BODY = document.body;
|
const BODY = document.body
|
||||||
|
|
||||||
const ig_media_preview = (base64data) => {
|
const ig_media_preview = (base64data) => {
|
||||||
const jpegtpl =
|
const jpegtpl =
|
||||||
"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==",
|
'/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA=='
|
||||||
t = atob(base64data),
|
const t = atob(base64data)
|
||||||
p = t.slice(3).split(""),
|
const p = t.slice(3).split('')
|
||||||
o = t
|
const o = t
|
||||||
.substring(0, 3)
|
.substring(0, 3)
|
||||||
.split("")
|
.split('')
|
||||||
.map((e) => {
|
.map((e) => {
|
||||||
return e.charCodeAt(0);
|
return e.charCodeAt(0)
|
||||||
}),
|
})
|
||||||
c = atob(jpegtpl).split("");
|
const c = atob(jpegtpl).split('')
|
||||||
c[162] = String.fromCharCode(o[1]);
|
c[162] = String.fromCharCode(o[1])
|
||||||
c[160] = String.fromCharCode(o[2]);
|
c[160] = String.fromCharCode(o[2])
|
||||||
return base64data
|
return base64data
|
||||||
? `data:image/jpeg;base64,${btoa(c.concat(p).join(""))}`
|
? `data:image/jpeg;base64,${btoa(c.concat(p).join(''))}`
|
||||||
: null;
|
: null
|
||||||
};
|
}
|
||||||
|
|
||||||
const loadFeed = () => {
|
const loadFeed = () => {
|
||||||
console.log(`${NAME}: loading`);
|
console.log(`${NAME}: loading`)
|
||||||
|
|
||||||
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
||||||
const ID = `InstagramFeed${i}`;
|
const ID = `InstagramFeed${i}`
|
||||||
const dataset = el.dataset;
|
const dataset = el.dataset
|
||||||
|
|
||||||
el.classList.add(`${NAME}-loading`);
|
el.classList.add(`${NAME}-loading`)
|
||||||
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`);
|
el.classList.remove(`${NAME}-loaded`, `${NAME}-error`)
|
||||||
|
|
||||||
new InstagramFeed({
|
new InstagramFeed({
|
||||||
username: dataset["username"],
|
username: dataset.username,
|
||||||
tag: dataset["tag"] || null,
|
tag: dataset.tag || null,
|
||||||
display_profile: dataset["display-profile"],
|
display_profile: dataset['display-profile'],
|
||||||
display_biography: dataset["display-biography"],
|
display_biography: dataset['display-biography'],
|
||||||
display_gallery: dataset["display-gallery"],
|
display_gallery: dataset['display-gallery'],
|
||||||
display_captions: dataset["display-captions"],
|
display_captions: dataset['display-captions'],
|
||||||
cache_time: dataset["cache_time"] || 360,
|
cache_time: dataset.cache_time || 360,
|
||||||
items: dataset["items"] || 12,
|
items: dataset.items || 12,
|
||||||
styling: false,
|
styling: false,
|
||||||
lazy_load: true,
|
lazy_load: true,
|
||||||
callback: (data) => {
|
callback: (data) => {
|
||||||
console.log(`${NAME}: data response received`);
|
console.log(`${NAME}: data response received`)
|
||||||
|
|
||||||
const list = document.createElement("div");
|
const list = document.createElement('div')
|
||||||
list.classList.add(`${NAME}-list`, "row");
|
list.classList.add(`${NAME}-list`, 'row')
|
||||||
el.appendChild(list);
|
el.appendChild(list)
|
||||||
|
|
||||||
data["edge_owner_to_timeline_media"]["edges"].forEach((el, i) => {
|
data.edge_owner_to_timeline_media.edges.forEach((el, i) => {
|
||||||
const item = el["node"];
|
const item = el.node
|
||||||
const preview = ig_media_preview(item["media_preview"]);
|
const preview = ig_media_preview(item.media_preview)
|
||||||
|
|
||||||
list.innerHTML +=
|
list.innerHTML +=
|
||||||
`<div class="a col ${NAME}-item"` +
|
`<div class="a col ${NAME}-item"` +
|
||||||
` data-gallery="${NAME}-${ID}" data-href="${item["display_url"]}" data-toggle="lightbox" data-force="image">` +
|
` data-gallery="${NAME}-${ID}" data-href="${item.display_url}" data-toggle="lightbox" data-force="image">` +
|
||||||
`<img id="${NAME}-${ID}-${item["id"]}" src="${item["display_url"]}" alt="${item["accessibility_caption"]}"` +
|
`<img id="${NAME}-${ID}-${item.id}" src="${item.display_url}" alt="${item.accessibility_caption}"` +
|
||||||
`style="background:url(${preview})" />` +
|
`style="background:url(${preview})" />` +
|
||||||
"</div>";
|
'</div>'
|
||||||
});
|
})
|
||||||
|
|
||||||
el.classList.remove(`${NAME}-loading`);
|
el.classList.remove(`${NAME}-loading`)
|
||||||
el.classList.add(`${NAME}-loaded`);
|
el.classList.add(`${NAME}-loaded`)
|
||||||
|
|
||||||
window.dispatchEvent(new Event("MetaWindowindow.initLinks"));
|
window.dispatchEvent(new Event('MetaWindowindow.initLinks'))
|
||||||
window.dispatchEvent(new Event(`${NAME}.loaded`));
|
window.dispatchEvent(new Event(`${NAME}.loaded`))
|
||||||
},
|
},
|
||||||
on_error: (e) => {
|
on_error: (e) => {
|
||||||
console.error(`${NAME}: ${e}`);
|
console.error(`${NAME}: ${e}`)
|
||||||
|
|
||||||
el.classList.remove(`${NAME}-loading`);
|
el.classList.remove(`${NAME}-loading`)
|
||||||
el.classList.add(`${NAME}-error`);
|
el.classList.add(`${NAME}-error`)
|
||||||
|
|
||||||
window.dispatchEvent(new Event(`${NAME}.error`));
|
window.dispatchEvent(new Event(`${NAME}.error`))
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
window.addEventListener(`${Events.LODEDANDREADY}`, loadFeed);
|
window.addEventListener(`${Events.LODEDANDREADY}`, loadFeed)
|
||||||
window.addEventListener(`${Events.AJAX}`, loadFeed);
|
window.addEventListener(`${Events.AJAX}`, loadFeed)
|
||||||
})(window);
|
})(window)
|
||||||
|
|
|
||||||
|
|
@ -1,120 +1,120 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Consts from "js/_consts";
|
import Consts from 'js/_consts'
|
||||||
|
|
||||||
const MapAPI = ((window) => {
|
const MapAPI = ((window) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "js-mapapi";
|
const NAME = 'js-mapapi'
|
||||||
const MAP_DRIVER = Consts["MAP_DRIVER"];
|
const MAP_DRIVER = Consts.MAP_DRIVER
|
||||||
|
|
||||||
class MapAPI {
|
class MapAPI {
|
||||||
// Constructor
|
// Constructor
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const Drv = new MAP_DRIVER();
|
const Drv = new MAP_DRIVER()
|
||||||
const BODY = document.querySelector("body");
|
const BODY = document.querySelector('body')
|
||||||
const config = el.dataset;
|
const config = el.dataset
|
||||||
config["center"] = [
|
config.center = [
|
||||||
config["lng"] ? config["lng"] : BODY.dataset["default-lng"],
|
config.lng ? config.lng : BODY.dataset['default-lng'],
|
||||||
config["lat"] ? config["lat"] : BODY.dataset["default-lat"],
|
config.lat ? config.lat : BODY.dataset['default-lat'],
|
||||||
];
|
]
|
||||||
|
|
||||||
/*config['style'] = config['style'] ?
|
/* config['style'] = config['style'] ?
|
||||||
jQuery.parseJSON(config['style']) :
|
jQuery.parseJSON(config['style']) :
|
||||||
null;
|
null;
|
||||||
|
|
||||||
config['font-family'] = $BODY.css('font-family');*/
|
config['font-family'] = $BODY.css('font-family'); */
|
||||||
|
|
||||||
if (!config["icon"]) {
|
if (!config.icon) {
|
||||||
config["icon"] = '<i class="fas fa-map-marker-alt"></i>';
|
config.icon = '<i class="fas fa-map-marker-alt"></i>'
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`${NAME}: init ${Drv.getName()}...`);
|
console.log(`${NAME}: init ${Drv.getName()}...`)
|
||||||
ui.drv = Drv;
|
ui.drv = Drv
|
||||||
ui.el = el;
|
ui.el = el
|
||||||
ui.config = config;
|
ui.config = config
|
||||||
|
|
||||||
Drv.init(el, config);
|
Drv.init(el, config)
|
||||||
|
|
||||||
el.addEventListener(Events.MAPAPILOADED, () => {
|
el.addEventListener(Events.MAPAPILOADED, () => {
|
||||||
ui.addMarkers();
|
ui.addMarkers()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
getMap() {
|
getMap () {
|
||||||
return ui.map;
|
return ui.map
|
||||||
}
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.el = null;
|
ui.el = null
|
||||||
ui.el.classList.remove(`${NAME}-active`);
|
ui.el.classList.remove(`${NAME}-active`)
|
||||||
}
|
}
|
||||||
|
|
||||||
addMarkers() {
|
addMarkers () {
|
||||||
console.log(`${NAME}: addMarkers`);
|
console.log(`${NAME}: addMarkers`)
|
||||||
const ui = this;
|
const ui = this
|
||||||
const el = ui.el;
|
const el = ui.el
|
||||||
const Drv = ui.drv;
|
const Drv = ui.drv
|
||||||
const config = ui.config;
|
const config = ui.config
|
||||||
|
|
||||||
ui.map = Drv.getMap();
|
ui.map = Drv.getMap()
|
||||||
|
|
||||||
if (config["geojson"]) {
|
if (config.geojson) {
|
||||||
console.log(`${NAME}: setting up geocode data`);
|
console.log(`${NAME}: setting up geocode data`)
|
||||||
Drv.addGeoJson(config);
|
Drv.addGeoJson(config)
|
||||||
} else if (config["address"]) {
|
} else if (config.address) {
|
||||||
console.log(config["address"]);
|
console.log(config.address)
|
||||||
console.log(`${NAME}: setting up address marker`);
|
console.log(`${NAME}: setting up address marker`)
|
||||||
Drv.geocode(config["address"], (results) => {
|
Drv.geocode(config.address, (results) => {
|
||||||
console.log(results);
|
console.log(results)
|
||||||
|
|
||||||
const lat = results[0].geometry.location.lat();
|
const lat = results[0].geometry.location.lat()
|
||||||
const lng = results[0].geometry.location.lng();
|
const lng = results[0].geometry.location.lng()
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
|
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
|
||||||
);
|
)
|
||||||
|
|
||||||
Drv.addMarker([lng, lat], config);
|
Drv.addMarker([lng, lat], config)
|
||||||
ui.map.setCenter({
|
ui.map.setCenter({
|
||||||
lat,
|
lat,
|
||||||
lng,
|
lng,
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
} else if (config["lat"] && config["lng"]) {
|
} else if (config.lat && config.lng) {
|
||||||
const lat = config["lat"];
|
const lat = config.lat
|
||||||
const lng = config["lng"];
|
const lng = config.lng
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
|
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
|
||||||
);
|
)
|
||||||
|
|
||||||
Drv.addMarker([lng, lat], config);
|
Drv.addMarker([lng, lat], config)
|
||||||
}
|
}
|
||||||
|
|
||||||
el.classList.add(`${NAME}-active`);
|
el.classList.add(`${NAME}-active`)
|
||||||
|
|
||||||
el.dispatchEvent(new Event(Events.MAPLOADED));
|
el.dispatchEvent(new Event(Events.MAPLOADED))
|
||||||
console.log(`${NAME}: Map is loaded`);
|
console.log(`${NAME}: Map is loaded`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
||||||
const map = new MapAPI(el);
|
const map = new MapAPI(el)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
window.addEventListener(`${Events.LODEDANDREADY}`, init)
|
||||||
window.addEventListener(`${Events.AJAX}`, init);
|
window.addEventListener(`${Events.AJAX}`, init)
|
||||||
|
|
||||||
return MapAPI;
|
return MapAPI
|
||||||
})(window);
|
})(window)
|
||||||
|
|
||||||
export default MapAPI;
|
export default MapAPI
|
||||||
|
|
|
||||||
|
|
@ -1,59 +1,59 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Spinner from "./_ui.spinner";
|
import Spinner from './_ui.spinner'
|
||||||
|
|
||||||
const AjaxUI = (($) => {
|
const AjaxUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const G = window;
|
const G = window
|
||||||
const D = document;
|
const D = document
|
||||||
const $Html = $("html");
|
const $Html = $('html')
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "jsAjaxUI";
|
const NAME = 'jsAjaxUI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
|
|
||||||
class AjaxUI {
|
class AjaxUI {
|
||||||
// Constructor
|
// Constructor
|
||||||
constructor(element) {
|
constructor (element) {
|
||||||
this._element = element;
|
this._element = element
|
||||||
const $element = $(this._element);
|
const $element = $(this._element)
|
||||||
$element.addClass(`${NAME}-active`);
|
$element.addClass(`${NAME}-active`)
|
||||||
|
|
||||||
$element.bind("click", function (e) {
|
$element.bind('click', function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
const $this = $(this);
|
const $this = $(this)
|
||||||
|
|
||||||
$(".ajax").each(function () {
|
$('.ajax').each(function () {
|
||||||
const $this = $(this);
|
const $this = $(this)
|
||||||
$this.removeClass("active");
|
$this.removeClass('active')
|
||||||
$this.parents(".nav-item").removeClass("active");
|
$this.parents('.nav-item').removeClass('active')
|
||||||
});
|
})
|
||||||
|
|
||||||
$this.addClass("loading");
|
$this.addClass('loading')
|
||||||
|
|
||||||
AjaxUI.load($this.attr("href"), () => {
|
AjaxUI.load($this.attr('href'), () => {
|
||||||
$this.removeClass("loading");
|
$this.removeClass('loading')
|
||||||
$this.parents(".nav-item").addClass("active");
|
$this.parents('.nav-item').addClass('active')
|
||||||
$this.addClass("active");
|
$this.addClass('active')
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
static load(url, callback) {
|
static load (url, callback) {
|
||||||
// show spinner
|
// show spinner
|
||||||
Spinner.show(() => {
|
Spinner.show(() => {
|
||||||
$Body.removeClass("loaded");
|
$Body.removeClass('loaded')
|
||||||
});
|
})
|
||||||
|
|
||||||
// update document location
|
// update document location
|
||||||
G.MainUI.updateLocation(url);
|
G.MainUI.updateLocation(url)
|
||||||
|
|
||||||
const absoluteLocation =
|
const absoluteLocation =
|
||||||
G.URLDetails["base"] + G.URLDetails["relative"].substring(1);
|
G.URLDetails.base + G.URLDetails.relative.substring(1)
|
||||||
if (absoluteLocation !== G.location.href) {
|
if (absoluteLocation !== G.location.href) {
|
||||||
G.history.pushState(
|
G.history.pushState(
|
||||||
{
|
{
|
||||||
|
|
@ -62,257 +62,257 @@ const AjaxUI = (($) => {
|
||||||
},
|
},
|
||||||
document.title,
|
document.title,
|
||||||
absoluteLocation
|
absoluteLocation
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
sync: false,
|
sync: false,
|
||||||
async: true,
|
async: true,
|
||||||
url,
|
url,
|
||||||
dataType: "json",
|
dataType: 'json',
|
||||||
method: "GET",
|
method: 'GET',
|
||||||
cache: false,
|
cache: false,
|
||||||
error(jqXHR) {
|
error (jqXHR) {
|
||||||
console.warn(`${NAME}: AJAX request failure: ${jqXHR.statusText}`);
|
console.warn(`${NAME}: AJAX request failure: ${jqXHR.statusText}`)
|
||||||
G.location.href = url;
|
G.location.href = url
|
||||||
|
|
||||||
// google analytics
|
// google analytics
|
||||||
if (typeof G.ga === "function") {
|
if (typeof G.ga === 'function') {
|
||||||
G.ga("send", "event", "error", "AJAX ERROR", jqXHR.statusText);
|
G.ga('send', 'event', 'error', 'AJAX ERROR', jqXHR.statusText)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
success(data, status, jqXHR) {
|
success (data, status, jqXHR) {
|
||||||
AjaxUI.process(data, jqXHR, callback);
|
AjaxUI.process(data, jqXHR, callback)
|
||||||
|
|
||||||
// google analytics
|
// google analytics
|
||||||
if (typeof G.ga === "function") {
|
if (typeof G.ga === 'function') {
|
||||||
G.ga("set", {
|
G.ga('set', {
|
||||||
page: G.URLDetails["relative"] + G.URLDetails["hash"],
|
page: G.URLDetails.relative + G.URLDetails.hash,
|
||||||
title: jqXHR.getResponseHeader("X-Title"),
|
title: jqXHR.getResponseHeader('X-Title'),
|
||||||
});
|
})
|
||||||
G.ga("send", "pageview");
|
G.ga('send', 'pageview')
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static process(data, jqXHR, callback) {
|
static process (data, jqXHR, callback) {
|
||||||
const css = jqXHR.getResponseHeader("X-Include-CSS").split(",") || [];
|
const css = jqXHR.getResponseHeader('X-Include-CSS').split(',') || []
|
||||||
const js = jqXHR.getResponseHeader("X-Include-JS").split(",") || [];
|
const js = jqXHR.getResponseHeader('X-Include-JS').split(',') || []
|
||||||
|
|
||||||
// Replace HTML regions
|
// Replace HTML regions
|
||||||
if (typeof data.regions === "object") {
|
if (typeof data.regions === 'object') {
|
||||||
for (const key in data.regions) {
|
for (const key in data.regions) {
|
||||||
if (typeof data.regions[key] === "string") {
|
if (typeof data.regions[key] === 'string') {
|
||||||
AjaxUI.replaceRegion(data.regions[key], key);
|
AjaxUI.replaceRegion(data.regions[key], key)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// remove already loaded scripts
|
// remove already loaded scripts
|
||||||
$('link[type="text/css"]').each(function () {
|
$('link[type="text/css"]').each(function () {
|
||||||
const i = css.indexOf($(this).attr("href"));
|
const i = css.indexOf($(this).attr('href'))
|
||||||
if (i > -1) {
|
if (i > -1) {
|
||||||
css.splice(i, 1);
|
css.splice(i, 1)
|
||||||
} else if (!$Body.data("unload-blocked")) {
|
} else if (!$Body.data('unload-blocked')) {
|
||||||
console.log(`${NAME}: Unloading | ${$(this).attr("href")}`);
|
console.log(`${NAME}: Unloading | ${$(this).attr('href')}`)
|
||||||
$(this).remove();
|
$(this).remove()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$('script[type="text/javascript"]').each(function () {
|
$('script[type="text/javascript"]').each(function () {
|
||||||
const i = js.indexOf($(this).attr("src"));
|
const i = js.indexOf($(this).attr('src'))
|
||||||
if (i > -1) {
|
if (i > -1) {
|
||||||
js.splice(i, 1);
|
js.splice(i, 1)
|
||||||
} else if (!$Body.data("unload-blocked")) {
|
} else if (!$Body.data('unload-blocked')) {
|
||||||
console.log(`${NAME}: Unloading | ${$(this).attr("src")}`);
|
console.log(`${NAME}: Unloading | ${$(this).attr('src')}`)
|
||||||
$(this).remove();
|
$(this).remove()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
// preload CSS
|
// preload CSS
|
||||||
this.preload(css).then(() => {
|
this.preload(css).then(() => {
|
||||||
const $head = $("head");
|
const $head = $('head')
|
||||||
css.forEach((el) => {
|
css.forEach((el) => {
|
||||||
$head.append(
|
$head.append(
|
||||||
`<link rel="stylesheet" type="text/css" href="${el}" />`
|
`<link rel="stylesheet" type="text/css" href="${el}" />`
|
||||||
);
|
)
|
||||||
});
|
})
|
||||||
|
|
||||||
// preload JS
|
// preload JS
|
||||||
this.preload(js, "script").then(() => {
|
this.preload(js, 'script').then(() => {
|
||||||
js.forEach((el) => {
|
js.forEach((el) => {
|
||||||
$Body.append(
|
$Body.append(
|
||||||
`<script type="text/javascript" charset="UTF-8" src="${el}"></script>`
|
`<script type="text/javascript" charset="UTF-8" src="${el}"></script>`
|
||||||
);
|
)
|
||||||
});
|
})
|
||||||
|
|
||||||
console.log(`${NAME}: New page is loaded!`);
|
console.log(`${NAME}: New page is loaded!`)
|
||||||
|
|
||||||
// trigger events
|
// trigger events
|
||||||
if (typeof data.events === "object") {
|
if (typeof data.events === 'object') {
|
||||||
for (const eventName in data.events) {
|
for (const eventName in data.events) {
|
||||||
$(D).trigger(eventName, [data.events[eventName]]);
|
$(D).trigger(eventName, [data.events[eventName]])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof callback !== "undefined") {
|
if (typeof callback !== 'undefined') {
|
||||||
callback();
|
callback()
|
||||||
}
|
}
|
||||||
|
|
||||||
$(G).trigger(Events.AJAX);
|
$(G).trigger(Events.AJAX)
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static preload(items, type = "text", cache = true, itemCallback = false) {
|
static preload (items, type = 'text', cache = true, itemCallback = false) {
|
||||||
if (!items.length) {
|
if (!items.length) {
|
||||||
return $.Deferred().resolve().promise();
|
return $.Deferred().resolve().promise()
|
||||||
}
|
}
|
||||||
|
|
||||||
const dfds = [];
|
const dfds = []
|
||||||
items.forEach((url, i) => {
|
items.forEach((url, i) => {
|
||||||
const dfd = $.Deferred();
|
const dfd = $.Deferred()
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
dataType: type,
|
dataType: type,
|
||||||
cache,
|
cache,
|
||||||
url,
|
url,
|
||||||
}).always(() => {
|
}).always(() => {
|
||||||
dfd.resolve();
|
dfd.resolve()
|
||||||
if (itemCallback) {
|
if (itemCallback) {
|
||||||
itemCallback(i, url);
|
itemCallback(i, url)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
dfds.push(dfd);
|
dfds.push(dfd)
|
||||||
});
|
})
|
||||||
|
|
||||||
// return a master promise object which will resolve when all the deferred objects have resolved
|
// return a master promise object which will resolve when all the deferred objects have resolved
|
||||||
return $.when(...dfds);
|
return $.when(...dfds)
|
||||||
}
|
}
|
||||||
|
|
||||||
static replaceRegion(html, key) {
|
static replaceRegion (html, key) {
|
||||||
const $region = $(`[data-ajax-region="${key}"]`);
|
const $region = $(`[data-ajax-region="${key}"]`)
|
||||||
|
|
||||||
if ($region.length) {
|
if ($region.length) {
|
||||||
$region.empty().append(html);
|
$region.empty().append(html)
|
||||||
} else {
|
} else {
|
||||||
console.warn(`${NAME}: Region returned without class or id!`);
|
console.warn(`${NAME}: Region returned without class or id!`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose () {
|
||||||
const $element = $(this._element);
|
const $element = $(this._element)
|
||||||
|
|
||||||
$element.removeClass(`${NAME}-active`);
|
$element.removeClass(`${NAME}-active`)
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY)
|
||||||
this._element = null;
|
this._element = null
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $element = $(this);
|
const $element = $(this)
|
||||||
let data = $element.data(DATA_KEY);
|
let data = $element.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new AjaxUI(this);
|
data = new AjaxUI(this)
|
||||||
$element.data(DATA_KEY, data);
|
$element.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = AjaxUI._jQueryInterface;
|
$.fn[NAME] = AjaxUI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = AjaxUI;
|
$.fn[NAME].Constructor = AjaxUI
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return AjaxUI._jQueryInterface;
|
return AjaxUI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(".ajax").ready(() => {
|
$('.ajax').ready(() => {
|
||||||
$(".ajax").jsAjaxUI();
|
$('.ajax').jsAjaxUI()
|
||||||
});
|
})
|
||||||
|
|
||||||
// AJAX update browser title
|
// AJAX update browser title
|
||||||
$(D).on("layoutRefresh", (e, data) => {
|
$(D).on('layoutRefresh', (e, data) => {
|
||||||
D.title = data.Title;
|
D.title = data.Title
|
||||||
|
|
||||||
$Html.attr("class", "");
|
$Html.attr('class', '')
|
||||||
if (data.ClassName) {
|
if (data.ClassName) {
|
||||||
$Html.addClass(data.ClassName);
|
$Html.addClass(data.ClassName)
|
||||||
}
|
}
|
||||||
//data.Link = (data.Link === '/home/') ? '/' : data.Link;
|
// data.Link = (data.Link === '/home/') ? '/' : data.Link;
|
||||||
});
|
})
|
||||||
|
|
||||||
// Back/Forward functionality
|
// Back/Forward functionality
|
||||||
G.onpopstate = function (event) {
|
G.onpopstate = function (event) {
|
||||||
const $existingLink = $(`a[href^="${D.location}"]`);
|
const $existingLink = $(`a[href^="${D.location}"]`)
|
||||||
|
|
||||||
if (event.state !== null && event.state.ajax) {
|
if (event.state !== null && event.state.ajax) {
|
||||||
console.log(`${NAME}: GOBACK (AJAX state)`);
|
console.log(`${NAME}: GOBACK (AJAX state)`)
|
||||||
AjaxUI.load(event.state.page);
|
AjaxUI.load(event.state.page)
|
||||||
} else if ($existingLink.length && $existingLink.hasClass("ajax")) {
|
} else if ($existingLink.length && $existingLink.hasClass('ajax')) {
|
||||||
console.log(`${NAME}: GOBACK (AJAX link)`);
|
console.log(`${NAME}: GOBACK (AJAX link)`)
|
||||||
$existingLink.trigger("click");
|
$existingLink.trigger('click')
|
||||||
} else if (D.location.href !== G.location.href) {
|
} else if (D.location.href !== G.location.href) {
|
||||||
console.log(`${NAME}: GOBACK (HTTP)`);
|
console.log(`${NAME}: GOBACK (HTTP)`)
|
||||||
G.location.href = D.location;
|
G.location.href = D.location
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
// manage AJAX requests
|
// manage AJAX requests
|
||||||
$.ajaxPrefilter((options, originalOptions, jqXHR) => {
|
$.ajaxPrefilter((options, originalOptions, jqXHR) => {
|
||||||
jqXHR.opts = options;
|
jqXHR.opts = options
|
||||||
$.xhrPool.requests[jqXHR.opts.url] = jqXHR;
|
$.xhrPool.requests[jqXHR.opts.url] = jqXHR
|
||||||
});
|
})
|
||||||
|
|
||||||
$.xhrPool = {
|
$.xhrPool = {
|
||||||
requests: {},
|
requests: {},
|
||||||
paused: false,
|
paused: false,
|
||||||
pauseAll: () => {
|
pauseAll: () => {
|
||||||
$.xhrPool.paused = true;
|
$.xhrPool.paused = true
|
||||||
|
|
||||||
/*for (let url in $.xhrPool.requests) {
|
/* for (let url in $.xhrPool.requests) {
|
||||||
const jqXHR = $.xhrPool.requests[url];
|
const jqXHR = $.xhrPool.requests[url];
|
||||||
jqXHR.abort();
|
jqXHR.abort();
|
||||||
console.log(`${NAME}: AJAX request is paused (${jqXHR.opts.url})`);
|
console.log(`${NAME}: AJAX request is paused (${jqXHR.opts.url})`);
|
||||||
}*/
|
} */
|
||||||
},
|
},
|
||||||
restoreAll: () => {
|
restoreAll: () => {
|
||||||
for (const url in $.xhrPool.requests) {
|
for (const url in $.xhrPool.requests) {
|
||||||
const jqXHR = $.xhrPool.requests[url];
|
const jqXHR = $.xhrPool.requests[url]
|
||||||
$.ajax(jqXHR.opts);
|
$.ajax(jqXHR.opts)
|
||||||
console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`);
|
console.log(`${NAME}: AJAX request is restored (${jqXHR.opts.url})`)
|
||||||
}
|
}
|
||||||
|
|
||||||
$.xhrPool.paused = false;
|
$.xhrPool.paused = false
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|
||||||
$.ajaxSetup({
|
$.ajaxSetup({
|
||||||
beforeSend: (jqXHR) => {}, // and connection to list
|
beforeSend: (jqXHR) => {}, // and connection to list
|
||||||
complete: (jqXHR) => {
|
complete: (jqXHR) => {
|
||||||
if (!$.xhrPool.paused) {
|
if (!$.xhrPool.paused) {
|
||||||
//console.log(`${NAME}: AJAX request is done (${jqXHR.opts.url})`);
|
// console.log(`${NAME}: AJAX request is done (${jqXHR.opts.url})`);
|
||||||
delete $.xhrPool.requests[jqXHR.opts.url];
|
delete $.xhrPool.requests[jqXHR.opts.url]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
// attach events
|
// attach events
|
||||||
$Body.on(`${Events.OFFLINE}`, () => {
|
$Body.on(`${Events.OFFLINE}`, () => {
|
||||||
$.xhrPool.pauseAll();
|
$.xhrPool.pauseAll()
|
||||||
});
|
})
|
||||||
|
|
||||||
$Body.on(`${Events.BACKONLINE}`, () => {
|
$Body.on(`${Events.BACKONLINE}`, () => {
|
||||||
$.xhrPool.restoreAll();
|
$.xhrPool.restoreAll()
|
||||||
});
|
})
|
||||||
|
|
||||||
return AjaxUI;
|
return AjaxUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default AjaxUI;
|
export default AjaxUI
|
||||||
|
|
|
||||||
|
|
@ -1,135 +1,135 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import "hammerjs/hammer";
|
import 'hammerjs/hammer'
|
||||||
import "jquery-hammerjs/jquery.hammer";
|
import 'jquery-hammerjs/jquery.hammer'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const CarouselUI = (($) => {
|
const CarouselUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "CarouselUI";
|
const NAME = 'CarouselUI'
|
||||||
|
|
||||||
class CarouselUI {
|
class CarouselUI {
|
||||||
// Static methods
|
// Static methods
|
||||||
|
|
||||||
static each(callback) {
|
static each (callback) {
|
||||||
$(`js${NAME}, .js-carousel`).each((i, e) => {
|
$(`js${NAME}, .js-carousel`).each((i, e) => {
|
||||||
callback(i, $(e));
|
callback(i, $(e))
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static init() {
|
static init () {
|
||||||
this.dispose();
|
this.dispose()
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
this.each((i, e) => {
|
this.each((i, e) => {
|
||||||
const $e = $(e),
|
const $e = $(e)
|
||||||
id = `Carousel${i}`;
|
const id = `Carousel${i}`
|
||||||
|
|
||||||
$e.attr("id", id);
|
$e.attr('id', id)
|
||||||
$e.data("id", i);
|
$e.data('id', i)
|
||||||
|
|
||||||
const $items = $(e).find(".carousel-item"),
|
const $items = $(e).find('.carousel-item')
|
||||||
count = $items.length;
|
const count = $items.length
|
||||||
if (!count) {
|
if (!count) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// create carousel-controls
|
// create carousel-controls
|
||||||
if ($e.data("indicators")) {
|
if ($e.data('indicators')) {
|
||||||
const $indicators = $('<ol class="carousel-indicators"></ol>');
|
const $indicators = $('<ol class="carousel-indicators"></ol>')
|
||||||
$indicators.append(
|
$indicators.append(
|
||||||
`<li data-target="#${id}" data-slide-to="0" class="active"></li>`
|
`<li data-target="#${id}" data-slide-to="0" class="active"></li>`
|
||||||
);
|
)
|
||||||
for (let i = 1; i < count; i++) {
|
for (let i = 1; i < count; i++) {
|
||||||
$indicators.append(
|
$indicators.append(
|
||||||
`<li data-target="#${id}" data-slide-to="${i}"></li>`
|
`<li data-target="#${id}" data-slide-to="${i}"></li>`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
$e.prepend($indicators);
|
$e.prepend($indicators)
|
||||||
}
|
}
|
||||||
|
|
||||||
// create arrows
|
// create arrows
|
||||||
if ($e.data("arrows")) {
|
if ($e.data('arrows')) {
|
||||||
$e.prepend(
|
$e.prepend(
|
||||||
`<i class="carousel-control-prev" data-target="#${id}" role="button" data-slide="prev"><i class="fas fa-chevron-left" aria-hidden="true"></i><i class="sr-only">Previous</i></i>`
|
`<i class="carousel-control-prev" data-target="#${id}" role="button" data-slide="prev"><i class="fas fa-chevron-left" aria-hidden="true"></i><i class="sr-only">Previous</i></i>`
|
||||||
);
|
)
|
||||||
$e.prepend(
|
$e.prepend(
|
||||||
`<i class="carousel-control-next" data-target="#${id}" role="button" data-slide="next"><i class="fas fa-chevron-right" aria-hidden="true"></i><i class="sr-only">Next</i></i>`
|
`<i class="carousel-control-next" data-target="#${id}" role="button" data-slide="next"><i class="fas fa-chevron-right" aria-hidden="true"></i><i class="sr-only">Next</i></i>`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// init carousel
|
// init carousel
|
||||||
$e.carousel();
|
$e.carousel()
|
||||||
|
|
||||||
const $youtubeSlides = $e.find(
|
const $youtubeSlides = $e.find(
|
||||||
'iframe[src^="https://www.youtube.com/embed/"]'
|
'iframe[src^="https://www.youtube.com/embed/"]'
|
||||||
);
|
)
|
||||||
|
|
||||||
$e.on("slide.bs.carousel", () => {
|
$e.on('slide.bs.carousel', () => {
|
||||||
if ($youtubeSlides.length) {
|
if ($youtubeSlides.length) {
|
||||||
$youtubeSlides.each((i, e) => {
|
$youtubeSlides.each((i, e) => {
|
||||||
const $e = $(e);
|
const $e = $(e)
|
||||||
try {
|
try {
|
||||||
$e.data(
|
$e.data(
|
||||||
"player",
|
'player',
|
||||||
new YT.Player(e, {
|
new YT.Player(e, {
|
||||||
events: {
|
events: {
|
||||||
onReady: () => {
|
onReady: () => {
|
||||||
$e.data("player").pauseVideo();
|
$e.data('player').pauseVideo()
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
|
|
||||||
$e.data("player").pauseVideo();
|
$e.data('player').pauseVideo()
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$e.find(".carousel-control-prev").on("click", (e) => {
|
$e.find('.carousel-control-prev').on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
$e.carousel("prev");
|
$e.carousel('prev')
|
||||||
});
|
})
|
||||||
|
|
||||||
$e.find(".carousel-control-next").on("click", (e) => {
|
$e.find('.carousel-control-next').on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
$e.carousel("next");
|
$e.carousel('next')
|
||||||
});
|
})
|
||||||
|
|
||||||
// init touch swipes
|
// init touch swipes
|
||||||
$e.hammer().bind(Events.SWIPELEFT, (e) => {
|
$e.hammer().bind(Events.SWIPELEFT, (e) => {
|
||||||
$(event.target).carousel("next");
|
$(event.target).carousel('next')
|
||||||
});
|
})
|
||||||
|
|
||||||
$e.hammer().bind(Events.SWIPERIGHT, (e) => {
|
$e.hammer().bind(Events.SWIPERIGHT, (e) => {
|
||||||
$(event.target).carousel("prev");
|
$(event.target).carousel('prev')
|
||||||
});
|
})
|
||||||
|
|
||||||
/*$e.find('.carousel-item').hammer().bind('tap', (event) => {
|
/* $e.find('.carousel-item').hammer().bind('tap', (event) => {
|
||||||
$(event.target).carousel('next');
|
$(event.target).carousel('next');
|
||||||
});*/
|
}); */
|
||||||
|
|
||||||
$e.addClass(`js${NAME}-active`);
|
$e.addClass(`js${NAME}-active`)
|
||||||
$e.trigger(Events.CAROUSEL_READY);
|
$e.trigger(Events.CAROUSEL_READY)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
this.each((i, e) => {
|
this.each((i, e) => {
|
||||||
$(e).carousel("dispose");
|
$(e).carousel('dispose')
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(window).on(`${Events.LODEDANDREADY}`, () => {
|
$(window).on(`${Events.LODEDANDREADY}`, () => {
|
||||||
CarouselUI.init();
|
CarouselUI.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
return CarouselUI;
|
return CarouselUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default CarouselUI;
|
export default CarouselUI
|
||||||
|
|
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
const CookieUI = (($) => {
|
const CookieUI = (($) => {
|
||||||
const D = document;
|
const D = document
|
||||||
const W = window;
|
const W = window
|
||||||
|
|
||||||
class CookieUI {
|
class CookieUI {
|
||||||
static get(name) {
|
static get (name) {
|
||||||
return D.cookie.split("; ").reduce((r, v) => {
|
return D.cookie.split('; ').reduce((r, v) => {
|
||||||
const parts = v.split("=");
|
const parts = v.split('=')
|
||||||
return parts[0] === name ? decodeURIComponent(parts[1]) : r;
|
return parts[0] === name ? decodeURIComponent(parts[1]) : r
|
||||||
}, "");
|
}, '')
|
||||||
}
|
}
|
||||||
|
|
||||||
static set(name, value, days = 7, path = "/") {
|
static set (name, value, days = 7, path = '/') {
|
||||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
const expires = new Date(Date.now() + days * 864e5).toUTCString()
|
||||||
D.cookie = `${name}=${encodeURIComponent(
|
D.cookie = `${name}=${encodeURIComponent(
|
||||||
value
|
value
|
||||||
)}; expires=${expires}; path=${path}`;
|
)}; expires=${expires}; path=${path}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//W.CookieUI = new CookieUI();
|
// W.CookieUI = new CookieUI();
|
||||||
|
|
||||||
return CookieUI;
|
return CookieUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default CookieUI;
|
export default CookieUI
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,69 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import CookieUI from "./_ui.cookie";
|
import CookieUI from './_ui.cookie'
|
||||||
|
|
||||||
const FlyoutUI = (($) => {
|
const FlyoutUI = (($) => {
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "FlyoutUI";
|
const NAME = 'FlyoutUI'
|
||||||
const COOKIE = `${NAME}-hide`;
|
const COOKIE = `${NAME}-hide`
|
||||||
const TIMEOUT = 2000;
|
const TIMEOUT = 2000
|
||||||
|
|
||||||
class FlyoutUI {
|
class FlyoutUI {
|
||||||
static init() {
|
static init () {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.$modal = $(`.flyout-${NAME}`);
|
ui.$modal = $(`.flyout-${NAME}`)
|
||||||
|
|
||||||
if (!ui.$modal.length) {
|
if (!ui.$modal.length) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
const $close = ui.$modal.find(`.flyout-${NAME}__close`);
|
const $close = ui.$modal.find(`.flyout-${NAME}__close`)
|
||||||
ui.$modal.data(NAME, ui);
|
ui.$modal.data(NAME, ui)
|
||||||
|
|
||||||
if ($close.length) {
|
if ($close.length) {
|
||||||
$close.on("click", () => {
|
$close.on('click', () => {
|
||||||
ui.hide();
|
ui.hide()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const hide = CookieUI.get(COOKIE);
|
const hide = CookieUI.get(COOKIE)
|
||||||
|
|
||||||
if (!$close.length || !hide || hide !== "true") {
|
if (!$close.length || !hide || hide !== 'true') {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
ui.show();
|
ui.show()
|
||||||
}, TIMEOUT);
|
}, TIMEOUT)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static show(callback) {
|
static show (callback) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.$modal.addClass(`flyout-${NAME}__active`);
|
ui.$modal.addClass(`flyout-${NAME}__active`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static hide(callback) {
|
static hide (callback) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
CookieUI.set(COOKIE, "true", 1);
|
CookieUI.set(COOKIE, 'true', 1)
|
||||||
ui.$modal.removeClass(`flyout-${NAME}__active`);
|
ui.$modal.removeClass(`flyout-${NAME}__active`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
FlyoutUI.init();
|
FlyoutUI.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
W.FlyoutUI = FlyoutUI;
|
W.FlyoutUI = FlyoutUI
|
||||||
|
|
||||||
return FlyoutUI;
|
return FlyoutUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default FlyoutUI;
|
export default FlyoutUI
|
||||||
|
|
|
||||||
|
|
@ -1,145 +1,145 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import SpinnerUI from "./_ui.spinner";
|
import SpinnerUI from './_ui.spinner'
|
||||||
import FormFieldUI from "./_ui.form.fields";
|
import FormFieldUI from './_ui.form.fields'
|
||||||
|
|
||||||
const FormBasics = (($) => {
|
const FormBasics = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsFormBasics";
|
const NAME = 'jsFormBasics'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const $Html = $("html, body");
|
const $Html = $('html, body')
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
|
|
||||||
class FormBasics {
|
class FormBasics {
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
ui._el = el;
|
ui._el = el
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
$el.data(DATA_KEY, this);
|
$el.data(DATA_KEY, this)
|
||||||
|
|
||||||
//$('[data-inputmask]').inputmask();
|
// $('[data-inputmask]').inputmask();
|
||||||
|
|
||||||
const $fields = $el.find(Events.FORM_FIELDS);
|
const $fields = $el.find(Events.FORM_FIELDS)
|
||||||
// init fields ui
|
// init fields ui
|
||||||
$fields.each((i, el) => {
|
$fields.each((i, el) => {
|
||||||
// skip some fields here
|
// skip some fields here
|
||||||
new FormFieldUI(el);
|
new FormFieldUI(el)
|
||||||
});
|
})
|
||||||
|
|
||||||
$fields.each((e, el) => {
|
$fields.each((e, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
if ($el.hasClass("required") || $el.attr("aria-required")) {
|
if ($el.hasClass('required') || $el.attr('aria-required')) {
|
||||||
$el.closest(".field").addClass("required");
|
$el.closest('.field').addClass('required')
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
const $radioOptions = $el.find('input[type="radio"]');
|
const $radioOptions = $el.find('input[type="radio"]')
|
||||||
$radioOptions.each((e, el) => {
|
$radioOptions.each((e, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
if ($el.is(":checked")) {
|
if ($el.is(':checked')) {
|
||||||
$el.parents(".radio").addClass("checked");
|
$el.parents('.radio').addClass('checked')
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$radioOptions.on("change", (e) => {
|
$radioOptions.on('change', (e) => {
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
const $parent = $el.parents(".radio");
|
const $parent = $el.parents('.radio')
|
||||||
|
|
||||||
$parent.siblings(".radio").each((i, el) => {
|
$parent.siblings('.radio').each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
if (!$el.find("input").is(":checked")) {
|
if (!$el.find('input').is(':checked')) {
|
||||||
$el.removeClass("checked");
|
$el.removeClass('checked')
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
if ($el.is(":checked")) {
|
if ($el.is(':checked')) {
|
||||||
$parent.addClass("checked");
|
$parent.addClass('checked')
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.on("submit", (e) => {
|
$el.on('submit', (e) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (!$el.find(".error").length) {
|
if (!$el.find('.error').length) {
|
||||||
SpinnerUI.show();
|
SpinnerUI.show()
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100)
|
||||||
});
|
})
|
||||||
|
|
||||||
$(".field.password .show-password").on("click", (e) => {
|
$('.field.password .show-password').on('click', (e) => {
|
||||||
console.log(`${NAME}: .field.password .show-password (click)`);
|
console.log(`${NAME}: .field.password .show-password (click)`)
|
||||||
|
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
const $field = $el.siblings("input");
|
const $field = $el.siblings('input')
|
||||||
const $icon = $el.find(".fas");
|
const $icon = $el.find('.fas')
|
||||||
const attr = $field.attr("type");
|
const attr = $field.attr('type')
|
||||||
|
|
||||||
if (attr === "password") {
|
if (attr === 'password') {
|
||||||
$field.attr("type", "text");
|
$field.attr('type', 'text')
|
||||||
$icon.removeClass("fa-eye").addClass("fa-eye-slash");
|
$icon.removeClass('fa-eye').addClass('fa-eye-slash')
|
||||||
} else {
|
} else {
|
||||||
$field.attr("type", "password");
|
$field.attr('type', 'password')
|
||||||
$icon.removeClass("fa-eye-slash").addClass("fa-eye");
|
$icon.removeClass('fa-eye-slash').addClass('fa-eye')
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.addClass(`${NAME}-active`);
|
$el.addClass(`${NAME}-active`)
|
||||||
$el.trigger(Events.FORM_INIT_BASICS);
|
$el.trigger(Events.FORM_INIT_BASICS)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const $el = $(ui._el);
|
const $el = $(ui._el)
|
||||||
$.removeData(ui._el, DATA_KEY);
|
$.removeData(ui._el, DATA_KEY)
|
||||||
ui._el = null;
|
ui._el = null
|
||||||
$el.removeClass(`${NAME}-active`);
|
$el.removeClass(`${NAME}-active`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(() => {
|
return this.each(() => {
|
||||||
// attach functionality to el
|
// attach functionality to el
|
||||||
const $el = $(this);
|
const $el = $(this)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new FormBasics(this);
|
data = new FormBasics(this)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = FormBasics._jQueryInterface;
|
$.fn[NAME] = FormBasics._jQueryInterface
|
||||||
$.fn[NAME].Constructor = FormBasics;
|
$.fn[NAME].Constructor = FormBasics
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return FormBasics._jQueryInterface;
|
return FormBasics._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
$("form").jsFormBasics();
|
$('form').jsFormBasics()
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
init();
|
init()
|
||||||
});
|
})
|
||||||
|
|
||||||
return FormBasics;
|
return FormBasics
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default FormBasics;
|
export default FormBasics
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
'use strict';
|
'use strict'
|
||||||
|
|
||||||
import $ from 'jquery';
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from '../_events';
|
import Events from '../_events'
|
||||||
import SpinnerUI from './_ui.spinner';
|
import SpinnerUI from './_ui.spinner'
|
||||||
|
|
||||||
import 'croppie/croppie.js';
|
import 'croppie/croppie.js'
|
||||||
import 'exif-js/exif.js';
|
import 'exif-js/exif.js'
|
||||||
|
|
||||||
const CroppieUI = (($) => {
|
const CroppieUI = (($) => {
|
||||||
const NAME = 'jsCroppieUI';
|
const NAME = 'jsCroppieUI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
|
|
||||||
const G = window;
|
const G = window
|
||||||
const D = document;
|
const D = document
|
||||||
|
|
||||||
const jqteOptions = {
|
const jqteOptions = {
|
||||||
color: false,
|
color: false,
|
||||||
|
|
@ -24,34 +24,34 @@ const CroppieUI = (($) => {
|
||||||
source: false,
|
source: false,
|
||||||
sub: false,
|
sub: false,
|
||||||
sup: false,
|
sup: false,
|
||||||
};
|
}
|
||||||
|
|
||||||
class CroppieUI {
|
class CroppieUI {
|
||||||
constructor(element) {
|
constructor (element) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = $(element);
|
const $el = $(element)
|
||||||
|
|
||||||
console.log(`${NAME}: init ...`);
|
console.log(`${NAME}: init ...`)
|
||||||
|
|
||||||
ui.$el = $el;
|
ui.$el = $el
|
||||||
$el.data(DATA_KEY, this);
|
$el.data(DATA_KEY, this)
|
||||||
|
|
||||||
ui.input = $el.find('input[type="file"]');
|
ui.input = $el.find('input[type="file"]')
|
||||||
//ui.inputData = $('<input type="hidden" class="base64enc" name="' + ui.input.attr('name') + 'base64" />');
|
// ui.inputData = $('<input type="hidden" class="base64enc" name="' + ui.input.attr('name') + 'base64" />');
|
||||||
|
|
||||||
ui.width = ui.input.data('width');
|
ui.width = ui.input.data('width')
|
||||||
ui.height = ui.input.data('height');
|
ui.height = ui.input.data('height')
|
||||||
|
|
||||||
$el.append(
|
$el.append(
|
||||||
'<div class="cropper-wrap"><div class="cropper-container"></div>' +
|
'<div class="cropper-wrap"><div class="cropper-container"></div>' +
|
||||||
'<a href="#" class="btn-remove" style="display:none"><i class="fas fa-times"></i> Remove</a></div>'
|
'<a href="#" class="btn-remove" style="display:none"><i class="fas fa-times"></i> Remove</a></div>'
|
||||||
);
|
)
|
||||||
//$el.append(ui.inputData);
|
// $el.append(ui.inputData);
|
||||||
|
|
||||||
ui.uploadCropWrap = $el.find('.cropper-wrap');
|
ui.uploadCropWrap = $el.find('.cropper-wrap')
|
||||||
ui.uploadCrop = ui.uploadCropWrap.find('.cropper-container');
|
ui.uploadCrop = ui.uploadCropWrap.find('.cropper-container')
|
||||||
|
|
||||||
const ratio = ui.width / (ui.uploadCrop.width() - 32);
|
const ratio = ui.width / (ui.uploadCrop.width() - 32)
|
||||||
ui.uploadCrop.croppie({
|
ui.uploadCrop.croppie({
|
||||||
enableExif: true,
|
enableExif: true,
|
||||||
enforceBoundary: false,
|
enforceBoundary: false,
|
||||||
|
|
@ -59,70 +59,70 @@ const CroppieUI = (($) => {
|
||||||
width: ui.width / ratio,
|
width: ui.width / ratio,
|
||||||
height: ui.height / ratio,
|
height: ui.height / ratio,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.uploadCrop.hide();
|
ui.uploadCrop.hide()
|
||||||
|
|
||||||
ui.input.on('change', (e) => {
|
ui.input.on('change', (e) => {
|
||||||
this.readFile(e.currentTarget);
|
this.readFile(e.currentTarget)
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.$btnRemove = $el.find('.btn-remove');
|
ui.$btnRemove = $el.find('.btn-remove')
|
||||||
ui.$btnRemove.on('click', (e) => {
|
ui.$btnRemove.on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
ui.uploadCrop.removeClass('ready');
|
ui.uploadCrop.removeClass('ready')
|
||||||
$el.find('.croppie-image').remove();
|
$el.find('.croppie-image').remove()
|
||||||
|
|
||||||
ui.$el.find('input[type="file"]').val('');
|
ui.$el.find('input[type="file"]').val('')
|
||||||
ui.$el.find('input[type="file"]').change();
|
ui.$el.find('input[type="file"]').change()
|
||||||
|
|
||||||
ui.uploadCropWrap.hide();
|
ui.uploadCropWrap.hide()
|
||||||
});
|
})
|
||||||
|
|
||||||
if (ui.$el.find('img.croppie-image').length) {
|
if (ui.$el.find('img.croppie-image').length) {
|
||||||
ui.$btnRemove.show();
|
ui.$btnRemove.show()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
readFile(input) {
|
readFile (input) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
const $form = $el.closest('form');
|
const $form = $el.closest('form')
|
||||||
|
|
||||||
if (input.files && input.files[0]) {
|
if (input.files && input.files[0]) {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader()
|
||||||
|
|
||||||
reader.onload = (e) => {
|
reader.onload = (e) => {
|
||||||
ui.uploadCrop.addClass('ready');
|
ui.uploadCrop.addClass('ready')
|
||||||
ui.uploadCrop.croppie('bind', {
|
ui.uploadCrop.croppie('bind', {
|
||||||
url: e.target.result,
|
url: e.target.result,
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.uploadCrop.show();
|
ui.uploadCrop.show()
|
||||||
ui.uploadCropWrap.show();
|
ui.uploadCropWrap.show()
|
||||||
ui.$btnRemove.show();
|
ui.$btnRemove.show()
|
||||||
};
|
}
|
||||||
|
|
||||||
reader.readAsDataURL(input.files[0]);
|
reader.readAsDataURL(input.files[0])
|
||||||
|
|
||||||
$form.off('submit');
|
$form.off('submit')
|
||||||
$form.on('submit', (e) => {
|
$form.on('submit', (e) => {
|
||||||
console.log(`${NAME}: Processing submission ...`);
|
console.log(`${NAME}: Processing submission ...`)
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
if ($form.data('locked')) {
|
if ($form.data('locked')) {
|
||||||
console.warn(`${NAME}: Form#${$form.attr('id')} is locked.`);
|
console.warn(`${NAME}: Form#${$form.attr('id')} is locked.`)
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
$form.data('locked', true);
|
$form.data('locked', true)
|
||||||
|
|
||||||
SpinnerUI.show();
|
SpinnerUI.show()
|
||||||
|
|
||||||
if (!ui.uploadCrop.hasClass('ready')) {
|
if (!ui.uploadCrop.hasClass('ready')) {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.uploadCrop
|
ui.uploadCrop
|
||||||
|
|
@ -135,17 +135,17 @@ const CroppieUI = (($) => {
|
||||||
format: 'png',
|
format: 'png',
|
||||||
})
|
})
|
||||||
.then((blob) => {
|
.then((blob) => {
|
||||||
const form = e.currentTarget;
|
const form = e.currentTarget
|
||||||
const data = new FormData(form);
|
const data = new FormData(form)
|
||||||
const name = $(input).attr('name');
|
const name = $(input).attr('name')
|
||||||
|
|
||||||
data.delete('BackURL');
|
data.delete('BackURL')
|
||||||
data.delete(name);
|
data.delete(name)
|
||||||
data.append(name, blob, `${name}-image.png`);
|
data.append(name, blob, `${name}-image.png`)
|
||||||
data.append('ajax', '1');
|
data.append('ajax', '1')
|
||||||
|
|
||||||
if ($(form).data('jsFormValidate') && !$(form).data('jsFormValidate').validate()) {
|
if ($(form).data('jsFormValidate') && !$(form).data('jsFormValidate').validate()) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
|
|
@ -155,112 +155,112 @@ const CroppieUI = (($) => {
|
||||||
contentType: false,
|
contentType: false,
|
||||||
type: $(form).attr('method'),
|
type: $(form).attr('method'),
|
||||||
success: function (data) {
|
success: function (data) {
|
||||||
$form.data('locked', false);
|
$form.data('locked', false)
|
||||||
|
|
||||||
let IS_JSON = false;
|
let IS_JSON = false
|
||||||
let json = {};
|
let json = {}
|
||||||
try {
|
try {
|
||||||
IS_JSON = true;
|
IS_JSON = true
|
||||||
json = $.parseJSON(data);
|
json = $.parseJSON(data)
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
IS_JSON = false;
|
IS_JSON = false
|
||||||
}
|
}
|
||||||
|
|
||||||
if (IS_JSON) {
|
if (IS_JSON) {
|
||||||
if (typeof json['status'] !== 'undefined') {
|
if (typeof json.status !== 'undefined') {
|
||||||
if (json['status'] === 'success') {
|
if (json.status === 'success') {
|
||||||
if (MainUI) {
|
if (MainUI) {
|
||||||
MainUI.alert(json['message'], json['status']);
|
MainUI.alert(json.message, json.status)
|
||||||
}else {
|
} else {
|
||||||
window.location.reload();
|
window.location.reload()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof json['link'] !== 'undefined') {
|
if (typeof json.link !== 'undefined') {
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: Finished submission > JSON ... Redirecting to ${json['link']}.`
|
`${NAME}: Finished submission > JSON ... Redirecting to ${json.link}.`
|
||||||
);
|
)
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
G.location = json['link'];
|
G.location = json.link
|
||||||
}, 2000);
|
}, 2000)
|
||||||
} else {
|
} else {
|
||||||
console.warn(
|
console.warn(
|
||||||
`${NAME}: Finished submission > JSON no redirect link.`
|
`${NAME}: Finished submission > JSON no redirect link.`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
} else if (json['status'] === 'error') {
|
} else if (json.status === 'error') {
|
||||||
if (MainUI) {
|
if (MainUI) {
|
||||||
MainUI.alert(json['message'], json['status']);
|
MainUI.alert(json.message, json.status)
|
||||||
}else {
|
} else {
|
||||||
window.location.reload();
|
window.location.reload()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof json['form'] !== 'undefined') {
|
if (typeof json.form !== 'undefined') {
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: Finished submission > JSON. Got new form response.`
|
`${NAME}: Finished submission > JSON. Got new form response.`
|
||||||
);
|
)
|
||||||
|
|
||||||
$(form).replaceWith(json['form']);
|
$(form).replaceWith(json.form)
|
||||||
$(G).trigger(Events.AJAX);
|
$(G).trigger(Events.AJAX)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: Finished submission > DATA response.`
|
`${NAME}: Finished submission > DATA response.`
|
||||||
);
|
)
|
||||||
|
|
||||||
$(form).replaceWith(data);
|
$(form).replaceWith(data)
|
||||||
$(G).trigger(Events.AJAX);
|
$(G).trigger(Events.AJAX)
|
||||||
//G.location.reload(false);
|
// G.location.reload(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
SpinnerUI.hide();
|
SpinnerUI.hide()
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
//ui.inputData.val(data);
|
// ui.inputData.val(data);
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
} else {
|
} else {
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: Sorry - your browser doesn't support the FileReader API.`
|
`${NAME}: Sorry - your browser doesn't support the FileReader API.`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: destroying.`);
|
console.log(`${NAME}: destroying.`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each((i, el) => {
|
return this.each((i, el) => {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new CroppieUI(el);
|
data = new CroppieUI(el)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = CroppieUI._jQueryInterface;
|
$.fn[NAME] = CroppieUI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = CroppieUI;
|
$.fn[NAME].Constructor = CroppieUI
|
||||||
$.fn[NAME].noConflict = () => {
|
$.fn[NAME].noConflict = () => {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return CroppieUI._jQueryInterface;
|
return CroppieUI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
$('.field.croppie').jsCroppieUI();
|
$('.field.croppie').jsCroppieUI()
|
||||||
});
|
})
|
||||||
|
|
||||||
return CroppieUI;
|
return CroppieUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default CroppieUI;
|
export default CroppieUI
|
||||||
|
|
|
||||||
|
|
@ -1,128 +1,128 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.js";
|
import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
|
||||||
import "bootstrap-timepicker/js/bootstrap-timepicker.js";
|
import 'bootstrap-timepicker/js/bootstrap-timepicker.js'
|
||||||
|
|
||||||
const DatetimeUI = (($) => {
|
const DatetimeUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "jsDatetimeUI";
|
const NAME = 'jsDatetimeUI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
|
|
||||||
const datepickerOptions = {
|
const datepickerOptions = {
|
||||||
autoclose: true,
|
autoclose: true,
|
||||||
startDate: 0,
|
startDate: 0,
|
||||||
//todayBtn: true,
|
// todayBtn: true,
|
||||||
todayHighlight: true,
|
todayHighlight: true,
|
||||||
clearBtn: true,
|
clearBtn: true,
|
||||||
};
|
}
|
||||||
|
|
||||||
class DatetimeUI {
|
class DatetimeUI {
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
ui._el = el;
|
ui._el = el
|
||||||
|
|
||||||
// datepicker
|
// datepicker
|
||||||
if ($el.hasClass("date") || $el.attr("type") === "date") {
|
if ($el.hasClass('date') || $el.attr('type') === 'date') {
|
||||||
const defaultDate =
|
const defaultDate =
|
||||||
$el.attr("name").toLowerCase().indexOf("end") !== -1 ? "+4d" : "+3d";
|
$el.attr('name').toLowerCase().indexOf('end') !== -1 ? '+4d' : '+3d'
|
||||||
|
|
||||||
$el.attr("readonly", "true");
|
$el.attr('readonly', 'true')
|
||||||
$el.datepicker(
|
$el.datepicker(
|
||||||
$.extend(
|
$.extend(
|
||||||
datepickerOptions,
|
datepickerOptions,
|
||||||
{
|
{
|
||||||
defaultViewDate: defaultDate,
|
defaultViewDate: defaultDate,
|
||||||
multidate: $el.data("multidate"),
|
multidate: $el.data('multidate'),
|
||||||
},
|
},
|
||||||
$el.data()
|
$el.data()
|
||||||
)
|
)
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// timepicker
|
// timepicker
|
||||||
else if ($el.hasClass("time") || $el.attr("type") === "time") {
|
else if ($el.hasClass('time') || $el.attr('type') === 'time') {
|
||||||
$el.attr("readonly", "true");
|
$el.attr('readonly', 'true')
|
||||||
$el
|
$el
|
||||||
.timepicker(
|
.timepicker(
|
||||||
$.extend(
|
$.extend(
|
||||||
{
|
{
|
||||||
snapToStep: true,
|
snapToStep: true,
|
||||||
icons: {
|
icons: {
|
||||||
up: "fas fa-chevron-up",
|
up: 'fas fa-chevron-up',
|
||||||
down: "fas fa-chevron-down",
|
down: 'fas fa-chevron-down',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
$el.data()
|
$el.data()
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
.on("show.timepicker", (e) => {
|
.on('show.timepicker', (e) => {
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
const $dropdown = $Body.find(".bootstrap-timepicker-widget");
|
const $dropdown = $Body.find('.bootstrap-timepicker-widget')
|
||||||
|
|
||||||
if (!$dropdown.find('[data-action="clear"]').length) {
|
if (!$dropdown.find('[data-action="clear"]').length) {
|
||||||
$dropdown
|
$dropdown
|
||||||
.find("tbody")
|
.find('tbody')
|
||||||
.append(
|
.append(
|
||||||
'<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>'
|
'<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>'
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const $clearBtn = $dropdown.find('[data-action="clear"]');
|
const $clearBtn = $dropdown.find('[data-action="clear"]')
|
||||||
$clearBtn.on("click", (e) => {
|
$clearBtn.on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
$el.timepicker("clear");
|
$el.timepicker('clear')
|
||||||
$el.timepicker("hideWidget");
|
$el.timepicker('hideWidget')
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $el = $(this);
|
const $el = $(this)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new DatetimeUI(this);
|
data = new DatetimeUI(this)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = DatetimeUI._jQueryInterface;
|
$.fn[NAME] = DatetimeUI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = DatetimeUI;
|
$.fn[NAME].Constructor = DatetimeUI
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return DatetimeUI._jQueryInterface;
|
return DatetimeUI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
$(
|
$(
|
||||||
'input.date, input.time,input[type="date"], input[type="time"]'
|
'input.date, input.time,input[type="date"], input[type="time"]'
|
||||||
).jsDatetimeUI();
|
).jsDatetimeUI()
|
||||||
});
|
})
|
||||||
|
|
||||||
return DatetimeUI;
|
return DatetimeUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default DatetimeUI;
|
export default DatetimeUI
|
||||||
|
|
|
||||||
|
|
@ -1,87 +1,87 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const FormFieldUI = (($) => {
|
const FormFieldUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsFormFieldUI";
|
const NAME = 'jsFormFieldUI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const $Html = $("html, body");
|
const $Html = $('html, body')
|
||||||
|
|
||||||
class FormFieldUI {
|
class FormFieldUI {
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.$el = $(el);
|
ui.$el = $(el)
|
||||||
ui.shown = true;
|
ui.shown = true
|
||||||
|
|
||||||
ui.$el.data(DATA_KEY, ui);
|
ui.$el.data(DATA_KEY, ui)
|
||||||
//ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
|
// ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
|
||||||
|
|
||||||
ui.vals = {
|
ui.vals = {
|
||||||
val: ui.$el.val(),
|
val: ui.$el.val(),
|
||||||
checked: ui.$el.is(":checked"),
|
checked: ui.$el.is(':checked'),
|
||||||
};
|
|
||||||
|
|
||||||
// bootstrap collapse integration
|
|
||||||
ui.$el.parents(".optionset").not(".field").removeClass("collapse");
|
|
||||||
ui.$collapse = ui.$el
|
|
||||||
.parents(".field.collapse")
|
|
||||||
.not(".composite")
|
|
||||||
.first();
|
|
||||||
if (ui.$collapse.length) {
|
|
||||||
ui.$el.removeClass("collapse");
|
|
||||||
|
|
||||||
ui.$collapse.on("show.bs.collapse", (e) => {
|
|
||||||
ui.show();
|
|
||||||
});
|
|
||||||
|
|
||||||
ui.$collapse.on("hidden.bs.collapse", (e) => {
|
|
||||||
ui.hide();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.$el.addClass(`${NAME}-active`);
|
// bootstrap collapse integration
|
||||||
|
ui.$el.parents('.optionset').not('.field').removeClass('collapse')
|
||||||
|
ui.$collapse = ui.$el
|
||||||
|
.parents('.field.collapse')
|
||||||
|
.not('.composite')
|
||||||
|
.first()
|
||||||
|
if (ui.$collapse.length) {
|
||||||
|
ui.$el.removeClass('collapse')
|
||||||
|
|
||||||
return ui;
|
ui.$collapse.on('show.bs.collapse', (e) => {
|
||||||
|
ui.show()
|
||||||
|
})
|
||||||
|
|
||||||
|
ui.$collapse.on('hidden.bs.collapse', (e) => {
|
||||||
|
ui.hide()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
ui.$el.addClass(`${NAME}-active`)
|
||||||
|
|
||||||
|
return ui
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
$el.removeClass(`${NAME}-active`);
|
$el.removeClass(`${NAME}-active`)
|
||||||
$.removeData($el[0], DATA_KEY);
|
$.removeData($el[0], DATA_KEY)
|
||||||
}
|
}
|
||||||
|
|
||||||
show() {
|
show () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
ui.restore();
|
ui.restore()
|
||||||
ui.shown = true;
|
ui.shown = true
|
||||||
|
|
||||||
/*if (ui.$collapse.length) {
|
/* if (ui.$collapse.length) {
|
||||||
ui.$collapse.collapse('show');
|
ui.$collapse.collapse('show');
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($el.hasClass('collapse')) {
|
if ($el.hasClass('collapse')) {
|
||||||
$el.collapse('show');
|
$el.collapse('show');
|
||||||
}*/
|
} */
|
||||||
|
|
||||||
$el.trigger(`shown.${NAME}`);
|
$el.trigger(`shown.${NAME}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
hide() {
|
hide () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
ui.wipe();
|
ui.wipe()
|
||||||
ui.shown = false;
|
ui.shown = false
|
||||||
|
|
||||||
/*if (ui.$collapse.length) {
|
/* if (ui.$collapse.length) {
|
||||||
ui.$collapse.collapse('hide');
|
ui.$collapse.collapse('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -89,80 +89,80 @@ const FormFieldUI = (($) => {
|
||||||
$el.collapse('hide');
|
$el.collapse('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
$el.trigger('change');*/
|
$el.trigger('change'); */
|
||||||
$el.trigger(`hidden.${NAME}`);
|
$el.trigger(`hidden.${NAME}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
wipe() {
|
wipe () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
ui.vals = {
|
ui.vals = {
|
||||||
name: $el.attr("name"),
|
name: $el.attr('name'),
|
||||||
val: $el.val(),
|
val: $el.val(),
|
||||||
checked: $el.is(":checked"),
|
checked: $el.is(':checked'),
|
||||||
};
|
}
|
||||||
|
|
||||||
$el.val("");
|
$el.val('')
|
||||||
$el.prop("checked", false);
|
$el.prop('checked', false)
|
||||||
}
|
}
|
||||||
|
|
||||||
restore() {
|
restore () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
const checked = ui.vals["checked"];
|
const checked = ui.vals.checked
|
||||||
|
|
||||||
$el.val(ui.vals["val"]);
|
$el.val(ui.vals.val)
|
||||||
$el.prop("checked", checked);
|
$el.prop('checked', checked)
|
||||||
}
|
}
|
||||||
|
|
||||||
addMessage(msg, type = null, scrollTo = true) {
|
addMessage (msg, type = null, scrollTo = true) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $field = ui.$el.closest(".field");
|
const $field = ui.$el.closest('.field')
|
||||||
|
|
||||||
$field.addClass("has-message");
|
$field.addClass('has-message')
|
||||||
if (msg) {
|
if (msg) {
|
||||||
$field.append(`<div class="message alert ${type}">${msg}</div>`);
|
$field.append(`<div class="message alert ${type}">${msg}</div>`)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (scrollTo) {
|
if (scrollTo) {
|
||||||
const pos = $field.offset().top;
|
const pos = $field.offset().top
|
||||||
$field.focus();
|
$field.focus()
|
||||||
$Html.scrollTop(pos - 100);
|
$Html.scrollTop(pos - 100)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
removeMessages() {
|
removeMessages () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $field = ui.$el.closest(".field");
|
const $field = ui.$el.closest('.field')
|
||||||
|
|
||||||
$field.removeClass("has-message");
|
$field.removeClass('has-message')
|
||||||
$field.find(".message").remove();
|
$field.find('.message').remove()
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to el
|
// attach functionality to el
|
||||||
const $el = $(this);
|
const $el = $(this)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new FormFieldUI(this);
|
data = new FormFieldUI(this)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = FormFieldUI._jQueryInterface;
|
$.fn[NAME] = FormFieldUI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = FormFieldUI;
|
$.fn[NAME].Constructor = FormFieldUI
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return FormFieldUI._jQueryInterface;
|
return FormFieldUI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
return FormFieldUI;
|
return FormFieldUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default FormFieldUI;
|
export default FormFieldUI
|
||||||
|
|
|
||||||
|
|
@ -1,218 +1,216 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
import FormBasics from "./_ui.form.basics";
|
import FormBasics from './_ui.form.basics'
|
||||||
|
|
||||||
const FormToggleUI = (($) => {
|
const FormToggleUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsFormToggleUI";
|
const NAME = 'jsFormToggleUI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const W = window;
|
const W = window
|
||||||
const $Html = $("html, body");
|
const $Html = $('html, body')
|
||||||
const FieldUI = "jsFormFieldUI";
|
const FieldUI = 'jsFormFieldUI'
|
||||||
|
|
||||||
class FormToggleUI {
|
class FormToggleUI {
|
||||||
constructor($el) {
|
constructor ($el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.$el = $el;
|
ui.$el = $el
|
||||||
|
|
||||||
if (!ui.getCondition()) {
|
if (!ui.getCondition()) {
|
||||||
console.warn(`${NAME}: no condition found`);
|
console.warn(`${NAME}: no condition found`)
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.toggle();
|
ui.toggle()
|
||||||
|
|
||||||
ui.$el.on(`change shown.${FieldUI} hidden.${FieldUI}`, (e) => {
|
ui.$el.on(`change shown.${FieldUI} hidden.${FieldUI}`, (e) => {
|
||||||
ui.toggle();
|
ui.toggle()
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.$el.addClass(`${NAME}-active`);
|
ui.$el.addClass(`${NAME}-active`)
|
||||||
ui.$el.data(DATA_KEY, ui);
|
ui.$el.data(DATA_KEY, ui)
|
||||||
|
|
||||||
return ui;
|
return ui
|
||||||
}
|
}
|
||||||
|
|
||||||
getDataEl() {
|
getDataEl () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
return $el.is('[type="radio"],[type="checkbox"]') &&
|
return $el.is('[type="radio"],[type="checkbox"]') &&
|
||||||
$el.parents(".optionset,.checkboxset").length
|
$el.parents('.optionset,.checkboxset').length
|
||||||
? $el.parents(".optionset,.checkboxset")
|
? $el.parents('.optionset,.checkboxset')
|
||||||
: $el;
|
: $el
|
||||||
}
|
}
|
||||||
|
|
||||||
getCondition() {
|
getCondition () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
return ui.getDataEl().data("value-toggle");
|
return ui.getDataEl().data('value-toggle')
|
||||||
}
|
}
|
||||||
|
|
||||||
getCurrentVal() {
|
getCurrentVal () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
if ($el.attr("type") === "checkbox") {
|
if ($el.attr('type') === 'checkbox') {
|
||||||
if ($el.parents(".checkboxset").length && $el.is(":checked")) {
|
if ($el.parents('.checkboxset').length && $el.is(':checked')) {
|
||||||
return $el.val();
|
return $el.val()
|
||||||
}
|
}
|
||||||
|
|
||||||
return $el.is(":checked") ? true : false;
|
return !!$el.is(':checked')
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($el.attr("type") === "radio") {
|
if ($el.attr('type') === 'radio') {
|
||||||
return $Html.find(`[name="${$el.attr("name")}"]:checked`).val();
|
return $Html.find(`[name="${$el.attr('name')}"]:checked`).val()
|
||||||
}
|
}
|
||||||
|
|
||||||
return $el.val();
|
return $el.val()
|
||||||
}
|
}
|
||||||
|
|
||||||
getTrueTarget() {
|
getTrueTarget () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $dataEl = ui.getDataEl();
|
const $dataEl = ui.getDataEl()
|
||||||
|
|
||||||
// compatibility params
|
// compatibility params
|
||||||
const target = $dataEl.data("value-toggle-yes");
|
const target = $dataEl.data('value-toggle-yes')
|
||||||
if (!target || !target.length) {
|
if (!target || !target.length) {
|
||||||
return ui.getElement($dataEl.data("target"));
|
return ui.getElement($dataEl.data('target'))
|
||||||
}
|
}
|
||||||
|
|
||||||
return ui.getElement(target);
|
return ui.getElement(target)
|
||||||
}
|
}
|
||||||
|
|
||||||
getFalseTarget() {
|
getFalseTarget () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $dataEl = ui.getDataEl();
|
const $dataEl = ui.getDataEl()
|
||||||
|
|
||||||
// compatibility params
|
// compatibility params
|
||||||
const target = $dataEl.data("value-toggle-no");
|
const target = $dataEl.data('value-toggle-no')
|
||||||
if (!target || !target.length) {
|
if (!target || !target.length) {
|
||||||
return ui.getElement($dataEl.data("value-toggle-false"));
|
return ui.getElement($dataEl.data('value-toggle-false'))
|
||||||
}
|
}
|
||||||
|
|
||||||
return ui.getElement(target);
|
return ui.getElement(target)
|
||||||
}
|
}
|
||||||
|
|
||||||
getElement(target) {
|
getElement (target) {
|
||||||
return target && target.length && $(target).length ? $(target) : false;
|
return target && target.length && $(target).length ? $(target) : false
|
||||||
}
|
}
|
||||||
|
|
||||||
toggle() {
|
toggle () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
const val = ui.getCurrentVal();
|
const val = ui.getCurrentVal()
|
||||||
const $dataEl = ui.getDataEl();
|
const $dataEl = ui.getDataEl()
|
||||||
|
|
||||||
// conditional toggler
|
// conditional toggler
|
||||||
const condition = ui.getCondition();
|
const condition = ui.getCondition()
|
||||||
if (!condition) {
|
if (!condition) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// yes/no toggler
|
// yes/no toggler
|
||||||
const yesNoVal =
|
const yesNoVal =
|
||||||
(condition === true && val && val !== "" && val !== "0") ||
|
!!((condition === true && val && val !== '' && val !== '0') ||
|
||||||
condition === val
|
condition === val)
|
||||||
? true
|
|
||||||
: false;
|
|
||||||
|
|
||||||
const $yesTarget = ui.getTrueTarget();
|
const $yesTarget = ui.getTrueTarget()
|
||||||
const $noTarget = ui.getFalseTarget();
|
const $noTarget = ui.getFalseTarget()
|
||||||
const elUI = $el.data(FieldUI);
|
const elUI = $el.data(FieldUI)
|
||||||
|
|
||||||
if ((elUI && !elUI.shown) || typeof val === "undefined") {
|
if ((elUI && !elUI.shown) || typeof val === 'undefined') {
|
||||||
ui.toggleElement($yesTarget, false);
|
ui.toggleElement($yesTarget, false)
|
||||||
ui.toggleElement($noTarget, false);
|
ui.toggleElement($noTarget, false)
|
||||||
|
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (yesNoVal) {
|
if (yesNoVal) {
|
||||||
ui.toggleElement($yesTarget, true);
|
ui.toggleElement($yesTarget, true)
|
||||||
ui.toggleElement($noTarget, false);
|
ui.toggleElement($noTarget, false)
|
||||||
} else {
|
} else {
|
||||||
ui.toggleElement($yesTarget, false);
|
ui.toggleElement($yesTarget, false)
|
||||||
ui.toggleElement($noTarget, true);
|
ui.toggleElement($noTarget, true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleElement($el, show) {
|
toggleElement ($el, show) {
|
||||||
if (!$el.length) {
|
if (!$el.length) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
const action = show ? "show" : "hide";
|
const action = show ? 'show' : 'hide'
|
||||||
|
|
||||||
$el.filter("div.collapse").each((i, el) => {
|
$el.filter('div.collapse').each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
$el.collapse(action);
|
$el.collapse(action)
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.trigger(`${action}.${NAME}`);
|
$el.trigger(`${action}.${NAME}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
$el.removeClass(`${NAME}-active`);
|
$el.removeClass(`${NAME}-active`)
|
||||||
$.removeData(this._el, DATA_KEY);
|
$.removeData(this._el, DATA_KEY)
|
||||||
this._el = null;
|
this._el = null
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each((i, el) => {
|
return this.each((i, el) => {
|
||||||
// attach functionality to el
|
// attach functionality to el
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new FormToggleUI($el);
|
data = new FormToggleUI($el)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static validate() {
|
static validate () {
|
||||||
return $(Events.FORM_FIELDS).each((i, el) => {
|
return $(Events.FORM_FIELDS).each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
const name = $el.attr("name");
|
const name = $el.attr('name')
|
||||||
|
|
||||||
if ($(`[name="${name}"]`).length > 1) {
|
if ($(`[name="${name}"]`).length > 1) {
|
||||||
console.warn(
|
console.warn(
|
||||||
`${NAME}: Module malfunction duplicate "${name}" elements found`
|
`${NAME}: Module malfunction duplicate "${name}" elements found`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = FormToggleUI._jQueryInterface;
|
$.fn[NAME] = FormToggleUI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = FormToggleUI;
|
$.fn[NAME].Constructor = FormToggleUI
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return FormToggleUI._jQueryInterface;
|
return FormToggleUI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(W).on(`${Events.LODEDANDREADY}`, () => {
|
$(W).on(`${Events.LODEDANDREADY}`, () => {
|
||||||
//FormToggleUI.validate();
|
// FormToggleUI.validate();
|
||||||
$(Events.FORM_FIELDS).filter("[data-value-toggle]").jsFormToggleUI();
|
$(Events.FORM_FIELDS).filter('[data-value-toggle]').jsFormToggleUI()
|
||||||
|
|
||||||
$("[data-value-toggle]")
|
$('[data-value-toggle]')
|
||||||
.not(Events.FORM_FIELDS)
|
.not(Events.FORM_FIELDS)
|
||||||
.find(Events.FORM_FIELDS)
|
.find(Events.FORM_FIELDS)
|
||||||
.jsFormToggleUI();
|
.jsFormToggleUI()
|
||||||
});
|
})
|
||||||
|
|
||||||
return FormToggleUI;
|
return FormToggleUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default FormToggleUI;
|
export default FormToggleUI
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,84 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import Spinner from "../_components/_ui.spinner";
|
import Spinner from '../_components/_ui.spinner'
|
||||||
import FormValidateField from "./_ui.form.validate.field";
|
import FormValidateField from './_ui.form.validate.field'
|
||||||
|
|
||||||
import "../../thirdparty/jQuery-TE_v.1.4.0/jquery-te-1.4.0.css";
|
import '../../thirdparty/jQuery-TE_v.1.4.0/jquery-te-1.4.0.css'
|
||||||
import "../../thirdparty/jQuery-TE_v.1.4.0/uncompressed/jquery-te-1.4.0.js";
|
import '../../thirdparty/jQuery-TE_v.1.4.0/uncompressed/jquery-te-1.4.0.js'
|
||||||
|
|
||||||
const JqteUI = (($) => {
|
const JqteUI = (($) => {
|
||||||
const NAME = "jsJqteUI";
|
const NAME = 'jsJqteUI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
|
|
||||||
const jqteOptions = {
|
const jqteOptions = {
|
||||||
color: false,
|
color: false,
|
||||||
fsize: false,
|
fsize: false,
|
||||||
funit: "em",
|
funit: 'em',
|
||||||
format: false,
|
format: false,
|
||||||
rule: false,
|
rule: false,
|
||||||
source: false,
|
source: false,
|
||||||
sub: false,
|
sub: false,
|
||||||
sup: false,
|
sup: false,
|
||||||
};
|
}
|
||||||
|
|
||||||
class JqteUI {
|
class JqteUI {
|
||||||
constructor(element) {
|
constructor (element) {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $element = $(element);
|
const $element = $(element)
|
||||||
const validationUI = $element.data("jsFormValidateField");
|
const validationUI = $element.data('jsFormValidateField')
|
||||||
|
|
||||||
ui._element = element;
|
ui._element = element
|
||||||
$element.data(DATA_KEY, this);
|
$element.data(DATA_KEY, this)
|
||||||
$element.jqte(jqteOptions);
|
$element.jqte(jqteOptions)
|
||||||
|
|
||||||
// dynamic error control
|
// dynamic error control
|
||||||
if (validationUI) {
|
if (validationUI) {
|
||||||
$element
|
$element
|
||||||
.parents(".jqte")
|
.parents('.jqte')
|
||||||
.find(".jqte_editor")
|
.find('.jqte_editor')
|
||||||
.on("change", (e) => {
|
.on('change', (e) => {
|
||||||
validationUI.validate();
|
validationUI.validate()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $element = $(this);
|
const $element = $(this)
|
||||||
let data = $element.data(DATA_KEY);
|
let data = $element.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new JqteUI(this);
|
data = new JqteUI(this)
|
||||||
$element.data(DATA_KEY, data);
|
$element.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = JqteUI._jQueryInterface;
|
$.fn[NAME] = JqteUI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = JqteUI;
|
$.fn[NAME].Constructor = JqteUI
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return JqteUI._jQueryInterface;
|
return JqteUI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
$("textarea.jqte-field").jsJqteUI();
|
$('textarea.jqte-field').jsJqteUI()
|
||||||
});
|
})
|
||||||
|
|
||||||
return JqteUI;
|
return JqteUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default JqteUI;
|
export default JqteUI
|
||||||
|
|
|
||||||
|
|
@ -1,97 +1,97 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import select2 from "select2/dist/js/select2.js";
|
import select2 from 'select2/dist/js/select2.js'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const FormSelect2 = (($) => {
|
const FormSelect2 = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsFormSelect2";
|
const NAME = 'jsFormSelect2'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const $Html = $("html, body");
|
const $Html = $('html, body')
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
|
|
||||||
class FormSelect2 {
|
class FormSelect2 {
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
ui._el = el;
|
ui._el = el
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
$el.data(DATA_KEY, this);
|
$el.data(DATA_KEY, this)
|
||||||
|
|
||||||
const $fields = $el.find(Events.FORM_FIELDS);
|
const $fields = $el.find(Events.FORM_FIELDS)
|
||||||
|
|
||||||
const $selectFields = $el
|
const $selectFields = $el
|
||||||
.find("select:not([readonly])")
|
.find('select:not([readonly])')
|
||||||
.not(".no-select2");
|
.not('.no-select2')
|
||||||
|
|
||||||
$selectFields.each((i, el) => {
|
$selectFields.each((i, el) => {
|
||||||
$(el).select2();
|
$(el).select2()
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.addClass(`${NAME}-active`);
|
$el.addClass(`${NAME}-active`)
|
||||||
$el.trigger(Events.FORM_INIT_BASICS);
|
$el.trigger(Events.FORM_INIT_BASICS)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const $el = $(ui._el);
|
const $el = $(ui._el)
|
||||||
|
|
||||||
const $selectFields = $el
|
const $selectFields = $el
|
||||||
.find("select:not([readonly])")
|
.find('select:not([readonly])')
|
||||||
.not(".no-select2");
|
.not('.no-select2')
|
||||||
$selectFields.each((i, el) => {
|
$selectFields.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
if ($el.hasClass("select2-hidden-accessible")) {
|
if ($el.hasClass('select2-hidden-accessible')) {
|
||||||
$el.select2("destroy");
|
$el.select2('destroy')
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$.removeData(ui._el, DATA_KEY);
|
$.removeData(ui._el, DATA_KEY)
|
||||||
ui._el = null;
|
ui._el = null
|
||||||
$el.removeClass(`${NAME}-active`);
|
$el.removeClass(`${NAME}-active`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(() => {
|
return this.each(() => {
|
||||||
// attach functionality to el
|
// attach functionality to el
|
||||||
const $el = $(this);
|
const $el = $(this)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new FormSelect2(this);
|
data = new FormSelect2(this)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = FormSelect2._jQueryInterface;
|
$.fn[NAME] = FormSelect2._jQueryInterface
|
||||||
$.fn[NAME].Constructor = FormSelect2;
|
$.fn[NAME].Constructor = FormSelect2
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return FormSelect2._jQueryInterface;
|
return FormSelect2._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
$("form").jsFormSelect2();
|
$('form').jsFormSelect2()
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
init();
|
init()
|
||||||
});
|
})
|
||||||
|
|
||||||
return FormSelect2;
|
return FormSelect2
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default FormSelect2;
|
export default FormSelect2
|
||||||
|
|
|
||||||
|
|
@ -1,223 +1,223 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import LANG from "../lang/_en";
|
import LANG from '../lang/_en'
|
||||||
import FormValidateField from "./_ui.form.validate.field";
|
import FormValidateField from './_ui.form.validate.field'
|
||||||
|
|
||||||
import "../../scss/_components/_ui.form.stepped.scss";
|
import '../../scss/_components/_ui.form.stepped.scss'
|
||||||
|
|
||||||
const SteppedForm = (($) => {
|
const SteppedForm = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsSteppedForm";
|
const NAME = 'jsSteppedForm'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
|
|
||||||
class SteppedForm {
|
class SteppedForm {
|
||||||
constructor(element) {
|
constructor (element) {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $element = $(element);
|
const $element = $(element)
|
||||||
|
|
||||||
$element.data(DATA_KEY, this);
|
$element.data(DATA_KEY, this)
|
||||||
|
|
||||||
if (!$element.find(".steps-counter").length) {
|
if (!$element.find('.steps-counter').length) {
|
||||||
$element.prepend(LANG["en"][NAME]["STEPCOUNTER"]);
|
$element.prepend(LANG.en[NAME].STEPCOUNTER)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!$element.find(".steps-buttons").length) {
|
if (!$element.find('.steps-buttons').length) {
|
||||||
$element.append(LANG["en"][NAME]["STEPBUTTONS"]);
|
$element.append(LANG.en[NAME].STEPBUTTONS)
|
||||||
}
|
}
|
||||||
|
|
||||||
ui._currentStepCounter = $element.find(".steps-counter .current-step");
|
ui._currentStepCounter = $element.find('.steps-counter .current-step')
|
||||||
ui._totalStepsCounter = $element.find(".steps-counter .total-steps");
|
ui._totalStepsCounter = $element.find('.steps-counter .total-steps')
|
||||||
|
|
||||||
ui._steps = $element.find(".step");
|
ui._steps = $element.find('.step')
|
||||||
ui._steps.each((i, el) => {
|
ui._steps.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
if (!$el.data("step")) {
|
if (!$el.data('step')) {
|
||||||
$el.data("step", i + 1);
|
$el.data('step', i + 1)
|
||||||
$el.attr("data-step", i + 1);
|
$el.attr('data-step', i + 1)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
ui._stepNext = $element.find(".step-next");
|
ui._stepNext = $element.find('.step-next')
|
||||||
|
|
||||||
ui._stepPrev = $element.find(".step-prev");
|
ui._stepPrev = $element.find('.step-prev')
|
||||||
ui._actions = $element.children(".btn-toolbar,.form-actions");
|
ui._actions = $element.children('.btn-toolbar,.form-actions')
|
||||||
|
|
||||||
ui._element = element;
|
ui._element = element
|
||||||
ui._currentStep = 1;
|
ui._currentStep = 1
|
||||||
ui._totalSteps = ui._steps.last().data("step") || ui._steps.length;
|
ui._totalSteps = ui._steps.last().data('step') || ui._steps.length
|
||||||
ui._stepsOrder = [];
|
ui._stepsOrder = []
|
||||||
|
|
||||||
ui._totalStepsCounter.text(ui._totalSteps);
|
ui._totalStepsCounter.text(ui._totalSteps)
|
||||||
|
|
||||||
// check if one of the steps already has an error
|
// check if one of the steps already has an error
|
||||||
const $hasError = ui._steps
|
const $hasError = ui._steps
|
||||||
.find(
|
.find(
|
||||||
".field.error,.field.holder-error,.field.holder-validation,.field.holder-info,.field.holder-warning,.field.holder-good"
|
'.field.error,.field.holder-error,.field.holder-validation,.field.holder-info,.field.holder-warning,.field.holder-good'
|
||||||
)
|
)
|
||||||
.first();
|
.first()
|
||||||
if ($hasError.length) {
|
if ($hasError.length) {
|
||||||
const $modal = $element.parents(".modal");
|
const $modal = $element.parents('.modal')
|
||||||
|
|
||||||
// show modal
|
// show modal
|
||||||
if ($modal.length && typeof $modal.modal !== "undefined") {
|
if ($modal.length && typeof $modal.modal !== 'undefined') {
|
||||||
$modal.modal("show");
|
$modal.modal('show')
|
||||||
}
|
}
|
||||||
|
|
||||||
ui._currentStep =
|
ui._currentStep =
|
||||||
$hasError.parents(".step").data("step") || ui._currentStep;
|
$hasError.parents('.step').data('step') || ui._currentStep
|
||||||
}
|
}
|
||||||
//
|
//
|
||||||
|
|
||||||
ui.step(`.step[data-step="${ui._currentStep}"]`);
|
ui.step(`.step[data-step="${ui._currentStep}"]`)
|
||||||
|
|
||||||
ui._stepNext.on("click", (e) => {
|
ui._stepNext.on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
ui.next();
|
ui.next()
|
||||||
});
|
})
|
||||||
|
|
||||||
ui._stepPrev.on("click", (e) => {
|
ui._stepPrev.on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
ui.prev();
|
ui.prev()
|
||||||
});
|
})
|
||||||
|
|
||||||
$element.find(".step-toggle").on("click", (e) => {
|
$element.find('.step-toggle').on('click', (e) => {
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
ui.step($el.data("target"));
|
ui.step($el.data('target'))
|
||||||
});
|
})
|
||||||
|
|
||||||
$element.addClass(`${NAME}-active`);
|
$element.addClass(`${NAME}-active`)
|
||||||
$element.trigger(Events.FORM_INIT_STEPPED);
|
$element.trigger(Events.FORM_INIT_STEPPED)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $element = $(ui._element);
|
const $element = $(ui._element)
|
||||||
|
|
||||||
$element.removeClass(`${NAME}-active`);
|
$element.removeClass(`${NAME}-active`)
|
||||||
$.removeData(ui._element, DATA_KEY);
|
$.removeData(ui._element, DATA_KEY)
|
||||||
ui._element = null;
|
ui._element = null
|
||||||
}
|
}
|
||||||
|
|
||||||
next() {
|
next () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
if (ui._currentStep >= ui._totalSteps) {
|
if (ui._currentStep >= ui._totalSteps) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.step(`.step[data-step="${ui._currentStep + 1}"]`);
|
ui.step(`.step[data-step="${ui._currentStep + 1}"]`)
|
||||||
}
|
}
|
||||||
|
|
||||||
prev() {
|
prev () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
if (ui._currentStep <= 1) {
|
if (ui._currentStep <= 1) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.step(ui._stepsOrder[ui._currentStep - 1]);
|
ui.step(ui._stepsOrder[ui._currentStep - 1])
|
||||||
}
|
}
|
||||||
|
|
||||||
step(target) {
|
step (target) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $element = $(ui._element);
|
const $element = $(ui._element)
|
||||||
const $target = $element.find(target);
|
const $target = $element.find(target)
|
||||||
const targetStep = parseInt($target.data("step"));
|
const targetStep = parseInt($target.data('step'))
|
||||||
|
|
||||||
// validate current step
|
// validate current step
|
||||||
let valid = true;
|
let valid = true
|
||||||
|
|
||||||
if (targetStep > ui._currentStep) {
|
if (targetStep > ui._currentStep) {
|
||||||
ui.currentStep()
|
ui.currentStep()
|
||||||
.find("input,textarea,select")
|
.find('input,textarea,select')
|
||||||
.each((i, el) => {
|
.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
const fieldUI = $el.data("jsFormValidateField");
|
const fieldUI = $el.data('jsFormValidateField')
|
||||||
|
|
||||||
if (fieldUI && !fieldUI.validate()) {
|
if (fieldUI && !fieldUI.validate()) {
|
||||||
valid = false;
|
valid = false
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!valid) {
|
if (!valid) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
//
|
//
|
||||||
|
|
||||||
if (parseInt($target.data("step")) <= "1") {
|
if (parseInt($target.data('step')) <= '1') {
|
||||||
ui._stepPrev.hide();
|
ui._stepPrev.hide()
|
||||||
$element.trigger(Events.FORM_STEPPED_FIRST_STEP);
|
$element.trigger(Events.FORM_STEPPED_FIRST_STEP)
|
||||||
} else {
|
} else {
|
||||||
ui._stepPrev.show();
|
ui._stepPrev.show()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (parseInt($target.data("step")) >= ui._totalSteps) {
|
if (parseInt($target.data('step')) >= ui._totalSteps) {
|
||||||
ui._stepNext.hide();
|
ui._stepNext.hide()
|
||||||
ui._actions.show();
|
ui._actions.show()
|
||||||
|
|
||||||
$element.trigger(Events.FORM_STEPPED_LAST_STEP);
|
$element.trigger(Events.FORM_STEPPED_LAST_STEP)
|
||||||
} else {
|
} else {
|
||||||
ui._stepNext.show();
|
ui._stepNext.show()
|
||||||
ui._actions.hide();
|
ui._actions.hide()
|
||||||
}
|
}
|
||||||
|
|
||||||
ui._currentStep = targetStep;
|
ui._currentStep = targetStep
|
||||||
ui._stepsOrder[ui._currentStep] = $target;
|
ui._stepsOrder[ui._currentStep] = $target
|
||||||
|
|
||||||
ui._steps.removeClass("active");
|
ui._steps.removeClass('active')
|
||||||
$target.addClass("active");
|
$target.addClass('active')
|
||||||
|
|
||||||
ui._currentStepCounter.text(ui._currentStep);
|
ui._currentStepCounter.text(ui._currentStep)
|
||||||
|
|
||||||
$target.trigger(Events.FORM_STEPPED_NEW_STEP);
|
$target.trigger(Events.FORM_STEPPED_NEW_STEP)
|
||||||
$element.trigger(Events.FORM_STEPPED_NEW_STEP);
|
$element.trigger(Events.FORM_STEPPED_NEW_STEP)
|
||||||
}
|
}
|
||||||
|
|
||||||
currentStep() {
|
currentStep () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $element = $(ui._element);
|
const $element = $(ui._element)
|
||||||
|
|
||||||
return $element.find(".step.active");
|
return $element.find('.step.active')
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $element = $(this);
|
const $element = $(this)
|
||||||
let data = $element.data(DATA_KEY);
|
let data = $element.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new SteppedForm(this);
|
data = new SteppedForm(this)
|
||||||
$element.data(DATA_KEY, data);
|
$element.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = SteppedForm._jQueryInterface;
|
$.fn[NAME] = SteppedForm._jQueryInterface
|
||||||
$.fn[NAME].Constructor = SteppedForm;
|
$.fn[NAME].Constructor = SteppedForm
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return SteppedForm._jQueryInterface;
|
return SteppedForm._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
$(".form-stepped").jsSteppedForm();
|
$('.form-stepped').jsSteppedForm()
|
||||||
});
|
})
|
||||||
|
|
||||||
return SteppedForm;
|
return SteppedForm
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default SteppedForm;
|
export default SteppedForm
|
||||||
|
|
|
||||||
|
|
@ -1,154 +1,154 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const FormStorage = (($) => {
|
const FormStorage = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsFormStorage";
|
const NAME = 'jsFormStorage'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const STORAGE = window.localStorage;
|
const STORAGE = window.localStorage
|
||||||
|
|
||||||
class FormStorage {
|
class FormStorage {
|
||||||
constructor(element) {
|
constructor (element) {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $element = $(element);
|
const $element = $(element)
|
||||||
const $elements = $element.find("input, textarea, select");
|
const $elements = $element.find('input, textarea, select')
|
||||||
|
|
||||||
const setRangeValues = function (el) {
|
const setRangeValues = function (el) {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
$el.siblings(".value").text($el.val());
|
$el.siblings('.value').text($el.val())
|
||||||
};
|
}
|
||||||
|
|
||||||
ui._element = element;
|
ui._element = element
|
||||||
$element.data(DATA_KEY, this);
|
$element.data(DATA_KEY, this)
|
||||||
|
|
||||||
$element.addClass(`${NAME}-active`);
|
$element.addClass(`${NAME}-active`)
|
||||||
|
|
||||||
// restore form data from localStorage
|
// restore form data from localStorage
|
||||||
$elements.each((i, el) => {
|
$elements.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
const id = $el.attr("id");
|
const id = $el.attr('id')
|
||||||
const type = $el.attr("type");
|
const type = $el.attr('type')
|
||||||
const val = STORAGE.getItem(NAME + id);
|
const val = STORAGE.getItem(NAME + id)
|
||||||
|
|
||||||
if (type === "file") {
|
if (type === 'file') {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
if (id && val && type) {
|
if (id && val && type) {
|
||||||
if (type && (type === "checkbox" || type === "radio")) {
|
if (type && (type === 'checkbox' || type === 'radio')) {
|
||||||
$el.prop("checked", val);
|
$el.prop('checked', val)
|
||||||
} else {
|
} else {
|
||||||
$el.val(val);
|
$el.val(val)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$el.trigger(Events.RESTORE_FIELD);
|
$el.trigger(Events.RESTORE_FIELD)
|
||||||
});
|
})
|
||||||
|
|
||||||
// range fields
|
// range fields
|
||||||
$('input[type="range"]').each((i, el) => {
|
$('input[type="range"]').each((i, el) => {
|
||||||
setRangeValues(el);
|
setRangeValues(el)
|
||||||
});
|
})
|
||||||
|
|
||||||
$element.trigger(Events.RESTORE_FIELD);
|
$element.trigger(Events.RESTORE_FIELD)
|
||||||
|
|
||||||
$('input[type="range"]').on("change", (e) => {
|
$('input[type="range"]').on('change', (e) => {
|
||||||
setRangeValues(e.currentTarget);
|
setRangeValues(e.currentTarget)
|
||||||
});
|
})
|
||||||
|
|
||||||
// store form data into localStorage
|
// store form data into localStorage
|
||||||
$elements.on("change", (e) => {
|
$elements.on('change', (e) => {
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
const id = $el.attr("id");
|
const id = $el.attr('id')
|
||||||
const type = $el.attr("type");
|
const type = $el.attr('type')
|
||||||
|
|
||||||
// skip some elements
|
// skip some elements
|
||||||
if ($el.hasClass("no-storage")) {
|
if ($el.hasClass('no-storage')) {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
let val = $el.val();
|
let val = $el.val()
|
||||||
|
|
||||||
if (type && (type === "checkbox" || type === "radio")) {
|
if (type && (type === 'checkbox' || type === 'radio')) {
|
||||||
val = !!$el.is(":checked");
|
val = !!$el.is(':checked')
|
||||||
}
|
}
|
||||||
|
|
||||||
if (id && type && type !== "password") {
|
if (id && type && type !== 'password') {
|
||||||
STORAGE.setItem(NAME + id, val);
|
STORAGE.setItem(NAME + id, val)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$element.on("submit", () => {
|
$element.on('submit', () => {
|
||||||
$element.data(DATA_KEY).clear();
|
$element.data(DATA_KEY).clear()
|
||||||
});
|
})
|
||||||
|
|
||||||
$element
|
$element
|
||||||
.find(".btn-toolbar,.form-actions")
|
.find('.btn-toolbar,.form-actions')
|
||||||
.children('button,[type="submit"],[type="clear"]')
|
.children('button,[type="submit"],[type="clear"]')
|
||||||
.on("click", () => {
|
.on('click', () => {
|
||||||
$element.data(DATA_KEY).clear();
|
$element.data(DATA_KEY).clear()
|
||||||
});
|
})
|
||||||
|
|
||||||
$element.addClass(`${NAME}-active`);
|
$element.addClass(`${NAME}-active`)
|
||||||
$element.trigger(Events.FORM_INIT_STORAGE);
|
$element.trigger(Events.FORM_INIT_STORAGE)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
const $element = $(this._element);
|
const $element = $(this._element)
|
||||||
|
|
||||||
$element.removeClass(`${NAME}-active`);
|
$element.removeClass(`${NAME}-active`)
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY)
|
||||||
this._element = null;
|
this._element = null
|
||||||
}
|
}
|
||||||
|
|
||||||
clear() {
|
clear () {
|
||||||
STORAGE.clear();
|
STORAGE.clear()
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
if (typeof window.localStorage !== "undefined") {
|
if (typeof window.localStorage !== 'undefined') {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $element = $(this);
|
const $element = $(this)
|
||||||
let data = $element.data(DATA_KEY);
|
let data = $element.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new FormStorage(this);
|
data = new FormStorage(this)
|
||||||
$element.data(DATA_KEY, data);
|
$element.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = FormStorage._jQueryInterface;
|
$.fn[NAME] = FormStorage._jQueryInterface
|
||||||
$.fn[NAME].Constructor = FormStorage;
|
$.fn[NAME].Constructor = FormStorage
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return FormStorage._jQueryInterface;
|
return FormStorage._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
$("form").each((i, el) => {
|
$('form').each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
// skip some forms
|
// skip some forms
|
||||||
if ($el.hasClass("no-storage")) {
|
if ($el.hasClass('no-storage')) {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
$el.jsFormStorage();
|
$el.jsFormStorage()
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
return FormStorage;
|
return FormStorage
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default FormStorage;
|
export default FormStorage
|
||||||
|
|
|
||||||
|
|
@ -1,215 +1,215 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const FormValidateField = (($) => {
|
const FormValidateField = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsFormValidateField";
|
const NAME = 'jsFormValidateField'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const FieldUI = "jsFormFieldUI";
|
const FieldUI = 'jsFormFieldUI'
|
||||||
|
|
||||||
class FormValidateField {
|
class FormValidateField {
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
ui.$el = $el;
|
ui.$el = $el
|
||||||
|
|
||||||
ui._actions = $el.parents("form").children(".btn-toolbar,.form-actions");
|
ui._actions = $el.parents('form').children('.btn-toolbar,.form-actions')
|
||||||
$el.data(DATA_KEY, this);
|
$el.data(DATA_KEY, this)
|
||||||
|
|
||||||
// prevent browsers checks (will do it using JS)
|
// prevent browsers checks (will do it using JS)
|
||||||
$el.attr("novalidate", "novalidate");
|
$el.attr('novalidate', 'novalidate')
|
||||||
|
|
||||||
$el.on("change focusout", (e) => {
|
$el.on('change focusout', (e) => {
|
||||||
ui.validate(false);
|
ui.validate(false)
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.addClass(`${NAME}-active`);
|
$el.addClass(`${NAME}-active`)
|
||||||
$el.trigger(Events.FORM_INIT_VALIDATE_FIELD);
|
$el.trigger(Events.FORM_INIT_VALIDATE_FIELD)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
$el.removeClass(`${NAME}-active`);
|
$el.removeClass(`${NAME}-active`)
|
||||||
$.removeData(ui.$el[0], DATA_KEY);
|
$.removeData(ui.$el[0], DATA_KEY)
|
||||||
ui.$el = null;
|
ui.$el = null
|
||||||
}
|
}
|
||||||
|
|
||||||
validate(scrollTo = true) {
|
validate (scrollTo = true) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
const $field = $el.closest(".field");
|
const $field = $el.closest('.field')
|
||||||
const extraChecks = $el.data(`${NAME}-extra`);
|
const extraChecks = $el.data(`${NAME}-extra`)
|
||||||
let valid = true;
|
let valid = true
|
||||||
let msg = null;
|
let msg = null
|
||||||
|
|
||||||
const val = $el.val();
|
const val = $el.val()
|
||||||
|
|
||||||
// browser checks
|
// browser checks
|
||||||
if (!ui.$el[0].checkValidity()) {
|
if (!ui.$el[0].checkValidity()) {
|
||||||
valid = false;
|
valid = false
|
||||||
console.warn(
|
console.warn(
|
||||||
`${NAME}: Browser check validity is failed #${$el.attr("id")}`
|
`${NAME}: Browser check validity is failed #${$el.attr('id')}`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
let unmaskedVal = val;
|
let unmaskedVal = val
|
||||||
if (typeof $el.inputmask === "function") {
|
if (typeof $el.inputmask === 'function') {
|
||||||
unmaskedVal = $el.inputmask("unmaskedvalue");
|
unmaskedVal = $el.inputmask('unmaskedvalue')
|
||||||
}
|
}
|
||||||
|
|
||||||
// required
|
// required
|
||||||
if (
|
if (
|
||||||
$el.hasClass("required") &&
|
$el.hasClass('required') &&
|
||||||
(!unmaskedVal.length ||
|
(!unmaskedVal.length ||
|
||||||
!unmaskedVal.trim().length ||
|
!unmaskedVal.trim().length ||
|
||||||
(ui.isHtml(val) && !$(unmaskedVal).text().length))
|
(ui.isHtml(val) && !$(unmaskedVal).text().length))
|
||||||
) {
|
) {
|
||||||
valid = false;
|
valid = false
|
||||||
console.warn(`${NAME}: Required field is missing #${$el.attr("id")}`);
|
console.warn(`${NAME}: Required field is missing #${$el.attr('id')}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// validate URL
|
// validate URL
|
||||||
if (
|
if (
|
||||||
$el.hasClass("url") &&
|
$el.hasClass('url') &&
|
||||||
unmaskedVal.length &&
|
unmaskedVal.length &&
|
||||||
!ui.valideURL(unmaskedVal)
|
!ui.valideURL(unmaskedVal)
|
||||||
) {
|
) {
|
||||||
valid = false;
|
valid = false
|
||||||
|
|
||||||
msg =
|
msg =
|
||||||
"Invalid URL: URL must start with http:// or https://. For example: https://your-domain.com/bla-bla/?p1=b&p2=a#tag";
|
'Invalid URL: URL must start with http:// or https://. For example: https://your-domain.com/bla-bla/?p1=b&p2=a#tag'
|
||||||
console.warn(`${NAME}: Wrong URL #${$el.attr("id")}`);
|
console.warn(`${NAME}: Wrong URL #${$el.attr('id')}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// maxlength
|
// maxlength
|
||||||
const maxLength = $el.attr("maxlength");
|
const maxLength = $el.attr('maxlength')
|
||||||
if (unmaskedVal.length && maxLength && maxLength.length) {
|
if (unmaskedVal.length && maxLength && maxLength.length) {
|
||||||
if (unmaskedVal.length > maxLength) {
|
if (unmaskedVal.length > maxLength) {
|
||||||
valid = false;
|
valid = false
|
||||||
|
|
||||||
msg = `The value is limited to ${maxLength} chars`;
|
msg = `The value is limited to ${maxLength} chars`
|
||||||
console.warn(`${NAME}: Too long value #${$el.attr("id")}`);
|
console.warn(`${NAME}: Too long value #${$el.attr('id')}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// minlength
|
// minlength
|
||||||
const minLength = $el.attr("minlength");
|
const minLength = $el.attr('minlength')
|
||||||
if (unmaskedVal.length && minLength && minLength.length) {
|
if (unmaskedVal.length && minLength && minLength.length) {
|
||||||
if (unmaskedVal.length < minLength) {
|
if (unmaskedVal.length < minLength) {
|
||||||
valid = false;
|
valid = false
|
||||||
|
|
||||||
msg = `The value should contain more than ${minLength} chars`;
|
msg = `The value should contain more than ${minLength} chars`
|
||||||
console.warn(`${NAME}: Too short value #${$el.attr("id")}`);
|
console.warn(`${NAME}: Too short value #${$el.attr('id')}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.removeError();
|
this.removeError()
|
||||||
|
|
||||||
// extra checks
|
// extra checks
|
||||||
if (extraChecks) {
|
if (extraChecks) {
|
||||||
extraChecks.forEach((check) => {
|
extraChecks.forEach((check) => {
|
||||||
const result = check($el);
|
const result = check($el)
|
||||||
valid = valid && result;
|
valid = valid && result
|
||||||
if (!result) {
|
if (!result) {
|
||||||
console.log(check);
|
console.log(check)
|
||||||
console.warn(`${NAME}: Extra check is failed #${$el.attr("id")}`);
|
console.warn(`${NAME}: Extra check is failed #${$el.attr('id')}`)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (valid) {
|
if (valid) {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setError(scrollTo, msg);
|
this.setError(scrollTo, msg)
|
||||||
|
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
isHtml(str) {
|
isHtml (str) {
|
||||||
const doc = new DOMParser().parseFromString(str, "text/html");
|
const doc = new DOMParser().parseFromString(str, 'text/html')
|
||||||
return Array.from(doc.body.childNodes).some(
|
return Array.from(doc.body.childNodes).some(
|
||||||
(node) => node.nodeType === 1
|
(node) => node.nodeType === 1
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
valideURL(str) {
|
valideURL (str) {
|
||||||
let url;
|
let url
|
||||||
|
|
||||||
try {
|
try {
|
||||||
url = new URL(str);
|
url = new URL(str)
|
||||||
} catch (_) {
|
} catch (_) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
return url.protocol === "http:" || url.protocol === "https:";
|
return url.protocol === 'http:' || url.protocol === 'https:'
|
||||||
}
|
}
|
||||||
|
|
||||||
setError(scrollTo = true, msg = null) {
|
setError (scrollTo = true, msg = null) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const fieldUI = ui.$el.data(FieldUI);
|
const fieldUI = ui.$el.data(FieldUI)
|
||||||
|
|
||||||
const $field = ui.$el.closest(".field");
|
const $field = ui.$el.closest('.field')
|
||||||
|
|
||||||
const bodyScroll = $Body.scrollTop();
|
const bodyScroll = $Body.scrollTop()
|
||||||
const pos = $field[0].getBoundingClientRect().top; //$field.offset().top;
|
const pos = $field[0].getBoundingClientRect().top // $field.offset().top;
|
||||||
|
|
||||||
const rowCorrection = parseInt($field.css("font-size")) * 4;
|
const rowCorrection = parseInt($field.css('font-size')) * 4
|
||||||
ui.removeError();
|
ui.removeError()
|
||||||
|
|
||||||
$field.addClass("error");
|
$field.addClass('error')
|
||||||
if (msg) {
|
if (msg) {
|
||||||
fieldUI.addMessage(msg, "alert-error alert-danger", scrollTo);
|
fieldUI.addMessage(msg, 'alert-error alert-danger', scrollTo)
|
||||||
} else if (pos && scrollTo) {
|
} else if (pos && scrollTo) {
|
||||||
$field.focus();
|
$field.focus()
|
||||||
$Body.scrollTop(bodyScroll + pos - rowCorrection);
|
$Body.scrollTop(bodyScroll + pos - rowCorrection)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
removeError() {
|
removeError () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const fieldUI = ui.$el.data(FieldUI);
|
const fieldUI = ui.$el.data(FieldUI)
|
||||||
|
|
||||||
const $field = ui.$el.closest(".field");
|
const $field = ui.$el.closest('.field')
|
||||||
|
|
||||||
$field.removeClass("error");
|
$field.removeClass('error')
|
||||||
|
|
||||||
$field.removeClass("holder-error");
|
$field.removeClass('holder-error')
|
||||||
$field.removeClass("holder-validation");
|
$field.removeClass('holder-validation')
|
||||||
$field.find(".alert-error").remove();
|
$field.find('.alert-error').remove()
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to el
|
// attach functionality to el
|
||||||
const $el = $(this);
|
const $el = $(this)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new FormValidateField(this);
|
data = new FormValidateField(this)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = FormValidateField._jQueryInterface;
|
$.fn[NAME] = FormValidateField._jQueryInterface
|
||||||
$.fn[NAME].Constructor = FormValidateField;
|
$.fn[NAME].Constructor = FormValidateField
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return FormValidateField._jQueryInterface;
|
return FormValidateField._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
return FormValidateField;
|
return FormValidateField
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default FormValidateField;
|
export default FormValidateField
|
||||||
|
|
|
||||||
|
|
@ -1,141 +1,141 @@
|
||||||
import $ from 'jquery';
|
import $ from 'jquery'
|
||||||
import Events from '../_events';
|
import Events from '../_events'
|
||||||
|
|
||||||
import FormBasics from './_ui.form.basics';
|
import FormBasics from './_ui.form.basics'
|
||||||
import FormValidateField from './_ui.form.validate.field';
|
import FormValidateField from './_ui.form.validate.field'
|
||||||
//import SpinnerUI from "./_ui.spinner";
|
// import SpinnerUI from "./_ui.spinner";
|
||||||
|
|
||||||
const FormValidate = (($) => {
|
const FormValidate = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = 'jsFormValidate';
|
const NAME = 'jsFormValidate'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const $Html = $('html, body');
|
const $Html = $('html, body')
|
||||||
|
|
||||||
class FormValidate {
|
class FormValidate {
|
||||||
constructor(element) {
|
constructor (element) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $element = $(element);
|
const $element = $(element)
|
||||||
const $fields = $element.find('input,textarea,select');
|
const $fields = $element.find('input,textarea,select')
|
||||||
|
|
||||||
ui._element = element;
|
ui._element = element
|
||||||
ui.$element = $element;
|
ui.$element = $element
|
||||||
$element.data(DATA_KEY, this);
|
$element.data(DATA_KEY, this)
|
||||||
|
|
||||||
ui._fields = $fields;
|
ui._fields = $fields
|
||||||
ui._stepped_form = $element.data('jsSteppedForm');
|
ui._stepped_form = $element.data('jsSteppedForm')
|
||||||
|
|
||||||
// prevent browsers checks (will do it using JS)
|
// prevent browsers checks (will do it using JS)
|
||||||
$element.attr('novalidate', 'novalidate');
|
$element.attr('novalidate', 'novalidate')
|
||||||
|
|
||||||
$element.on(Events.FORM_INIT_STEPPED, () => {
|
$element.on(Events.FORM_INIT_STEPPED, () => {
|
||||||
ui._stepped_form = $element.data('jsSteppedForm');
|
ui._stepped_form = $element.data('jsSteppedForm')
|
||||||
});
|
})
|
||||||
|
|
||||||
// init fields validation
|
// init fields validation
|
||||||
$fields.each((i, el) => {
|
$fields.each((i, el) => {
|
||||||
// skip some fields here
|
// skip some fields here
|
||||||
if ($(el).attr('role') === 'combobox') {
|
if ($(el).attr('role') === 'combobox') {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
new FormValidateField(el);
|
new FormValidateField(el)
|
||||||
});
|
})
|
||||||
|
|
||||||
// check form
|
// check form
|
||||||
$element.on('submit', (e) => {
|
$element.on('submit', (e) => {
|
||||||
ui.validate(true, () => {
|
ui.validate(true, () => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
// switch to step
|
// switch to step
|
||||||
if (ui._stepped_form) {
|
if (ui._stepped_form) {
|
||||||
const $el = $element.find('.error').first();
|
const $el = $element.find('.error').first()
|
||||||
|
|
||||||
if ($el.length) {
|
if ($el.length) {
|
||||||
ui._stepped_form.step($el.parents('.step'));
|
ui._stepped_form.step($el.parents('.step'))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$element.trigger(Events.FORM_VALIDATION_FAILED);
|
$element.trigger(Events.FORM_VALIDATION_FAILED)
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
$element.addClass(`${NAME}-active`);
|
$element.addClass(`${NAME}-active`)
|
||||||
$element.trigger(Events.FORM_INIT_VALIDATE);
|
$element.trigger(Events.FORM_INIT_VALIDATE)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
const $element = $(this._element);
|
const $element = $(this._element)
|
||||||
|
|
||||||
$element.removeClass(`${NAME}-active`);
|
$element.removeClass(`${NAME}-active`)
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY)
|
||||||
this._element = null;
|
this._element = null
|
||||||
}
|
}
|
||||||
|
|
||||||
validate(scrollTo = true, badCallback = false) {
|
validate (scrollTo = true, badCallback = false) {
|
||||||
console.log(`${NAME}: checking the form ...`);
|
console.log(`${NAME}: checking the form ...`)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
let valid = true;
|
let valid = true
|
||||||
|
|
||||||
ui._fields.filter(':visible').each((i, el) => {
|
ui._fields.filter(':visible').each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
const fieldUI = $el.data('jsFormValidateField');
|
const fieldUI = $el.data('jsFormValidateField')
|
||||||
|
|
||||||
if (fieldUI && !fieldUI.validate()) {
|
if (fieldUI && !fieldUI.validate()) {
|
||||||
//SpinnerUI.hide();
|
// SpinnerUI.hide();
|
||||||
|
|
||||||
ui.$element.addClass('error');
|
ui.$element.addClass('error')
|
||||||
|
|
||||||
if (badCallback) {
|
if (badCallback) {
|
||||||
badCallback();
|
badCallback()
|
||||||
}
|
}
|
||||||
|
|
||||||
valid = false;
|
valid = false
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
return valid;
|
return valid
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $element = $(this);
|
const $element = $(this)
|
||||||
let data = $element.data(DATA_KEY);
|
let data = $element.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new FormValidate(this);
|
data = new FormValidate(this)
|
||||||
$element.data(DATA_KEY, data);
|
$element.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = FormValidate._jQueryInterface;
|
$.fn[NAME] = FormValidate._jQueryInterface
|
||||||
$.fn[NAME].Constructor = FormValidate;
|
$.fn[NAME].Constructor = FormValidate
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return FormValidate._jQueryInterface;
|
return FormValidate._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
$('form').each((i, el) => {
|
$('form').each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
// skip some forms
|
// skip some forms
|
||||||
if ($el.hasClass('no-validation')) {
|
if ($el.hasClass('no-validation')) {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
$el.jsFormValidate();
|
$el.jsFormValidate()
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
return FormValidate;
|
return FormValidate
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default FormValidate;
|
export default FormValidate
|
||||||
|
|
|
||||||
|
|
@ -1,72 +1,72 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const HeaderUI = (($) => {
|
const HeaderUI = (($) => {
|
||||||
const D = document;
|
const D = document
|
||||||
const W = window;
|
const W = window
|
||||||
const $Body = $("html,body");
|
const $Body = $('html,body')
|
||||||
const NAME = "HeaderUI";
|
const NAME = 'HeaderUI'
|
||||||
const CLASSNAME = `js${NAME}`;
|
const CLASSNAME = `js${NAME}`
|
||||||
|
|
||||||
class HeaderUI {
|
class HeaderUI {
|
||||||
static init() {
|
static init () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
const $header = $(`#Header,.js${NAME}`);
|
const $header = $(`#Header,.js${NAME}`)
|
||||||
const updateHeader = () => {
|
const updateHeader = () => {
|
||||||
const h = $header.height();
|
const h = $header.height()
|
||||||
const s = $Body.scrollTop();
|
const s = $Body.scrollTop()
|
||||||
if (s + 50 > h) {
|
if (s + 50 > h) {
|
||||||
$Body.addClass("shrink");
|
$Body.addClass('shrink')
|
||||||
} else {
|
} else {
|
||||||
$Body.removeClass("shrink");
|
$Body.removeClass('shrink')
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
updateHeader();
|
updateHeader()
|
||||||
|
|
||||||
const updateFooter = (i, el) => {
|
const updateFooter = (i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
const footerHeight = $el.height();
|
const footerHeight = $el.height()
|
||||||
$el.css("height", footerHeight);
|
$el.css('height', footerHeight)
|
||||||
|
|
||||||
$el.css("margin-top", -footerHeight);
|
$el.css('margin-top', -footerHeight)
|
||||||
$el.siblings(".wrapper").css("padding-bottom", footerHeight);
|
$el.siblings('.wrapper').css('padding-bottom', footerHeight)
|
||||||
};
|
}
|
||||||
|
|
||||||
$(".footer,.jsFooterUI").css("height", "auto");
|
$('.footer,.jsFooterUI').css('height', 'auto')
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$(".footer,.jsFooterUI").each(updateFooter);
|
$('.footer,.jsFooterUI').each(updateFooter)
|
||||||
}, 500);
|
}, 500)
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
|
|
||||||
$Body.removeClass("shrink");
|
$Body.removeClass('shrink')
|
||||||
$(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr("css", "");
|
$(`#Header,.js${NAME},.footer,.jsFooterUI,.wrapper`).attr('css', '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
HeaderUI.init();
|
HeaderUI.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
// align event content
|
// align event content
|
||||||
$(W).on(`${Events.RESIZE}`, () => {
|
$(W).on(`${Events.RESIZE}`, () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
HeaderUI.init();
|
HeaderUI.init()
|
||||||
}, 200);
|
}, 200)
|
||||||
});
|
})
|
||||||
|
|
||||||
W.HeaderUI = new HeaderUI();
|
W.HeaderUI = new HeaderUI()
|
||||||
|
|
||||||
return HeaderUI;
|
return HeaderUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default HeaderUI;
|
export default HeaderUI
|
||||||
|
|
|
||||||
|
|
@ -1,200 +1,198 @@
|
||||||
/*
|
/*
|
||||||
* Conflicts with 'bootstrap/js/dist/dropdown'
|
* Conflicts with 'bootstrap/js/dist/dropdown'
|
||||||
*/
|
*/
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import "jquery-hoverintent/jquery.hoverIntent.js";
|
import 'jquery-hoverintent/jquery.hoverIntent.js'
|
||||||
import MainUI from "../_main";
|
import MainUI from '../_main'
|
||||||
|
|
||||||
const HoverUI = (($) => {
|
const HoverUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
const $Html = $("html");
|
const $Html = $('html')
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "jsHoverUI";
|
const NAME = 'jsHoverUI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
|
|
||||||
class HoverUI {
|
class HoverUI {
|
||||||
// Constructor
|
// Constructor
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
if (
|
if (
|
||||||
$el.is(
|
$el.is(
|
||||||
'[target="_blank"],.external,[data-toggle="lightbox"],[data-lightbox-gallery]'
|
'[target="_blank"],.external,[data-toggle="lightbox"],[data-lightbox-gallery]'
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.$el = $el;
|
ui.$el = $el
|
||||||
|
|
||||||
// find parent
|
// find parent
|
||||||
let $parent = $el.parents(".nav-item, .dropdown");
|
let $parent = $el.parents('.nav-item, .dropdown')
|
||||||
$parent = $parent && $parent.length ? $parent.first() : null;
|
$parent = $parent && $parent.length ? $parent.first() : null
|
||||||
//$parent = $parent ? $parent : $el.parent();
|
// $parent = $parent ? $parent : $el.parent();
|
||||||
ui.$parent = $parent;
|
ui.$parent = $parent
|
||||||
|
|
||||||
// find target
|
// find target
|
||||||
let $target = $el.data("target");
|
let $target = $el.data('target')
|
||||||
$target = $target && $target.length ? $target : null;
|
$target = $target && $target.length ? $target : null
|
||||||
$target = $target
|
$target = $target || ($parent
|
||||||
? $target
|
? $parent.find('.dropdown-menu').first()
|
||||||
: $parent
|
: null)
|
||||||
? $parent.find(".dropdown-menu").first()
|
|
||||||
: null;
|
|
||||||
|
|
||||||
if (!$target || !$target.length) {
|
if (!$target || !$target.length) {
|
||||||
console.warn(`${NAME}: Missing target for:`);
|
console.warn(`${NAME}: Missing target for:`)
|
||||||
console.warn($el);
|
console.warn($el)
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.$target = $target;
|
ui.$target = $target
|
||||||
|
|
||||||
const $triger = $parent ? $parent : $el;
|
const $triger = $parent || $el
|
||||||
ui.$triger = $triger;
|
ui.$triger = $triger
|
||||||
|
|
||||||
// integrate with dropdown-toggle
|
// integrate with dropdown-toggle
|
||||||
$('[data-toggle="dropdown"]').on("click touch", (e) => {
|
$('[data-toggle="dropdown"]').on('click touch', (e) => {
|
||||||
console.log(`${NAME}: dropdown click-touch`);
|
console.log(`${NAME}: dropdown click-touch`)
|
||||||
ui.hide();
|
ui.hide()
|
||||||
});
|
})
|
||||||
|
|
||||||
if (!W.isTouch) {
|
if (!W.isTouch) {
|
||||||
$triger.hoverIntent({
|
$triger.hoverIntent({
|
||||||
sensitivity: 10,
|
sensitivity: 10,
|
||||||
interval: 50,
|
interval: 50,
|
||||||
over: () => {
|
over: () => {
|
||||||
ui.show();
|
ui.show()
|
||||||
},
|
},
|
||||||
out: () => {
|
out: () => {
|
||||||
ui.hide();
|
ui.hide()
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
$el.off("click touch");
|
$el.off('click touch')
|
||||||
$el.on("click touch", (e) => {
|
$el.on('click touch', (e) => {
|
||||||
const size = MainUI.detectBootstrapScreenSize();
|
const size = MainUI.detectBootstrapScreenSize()
|
||||||
console.log(`${NAME}: click-touch size: ${size}`);
|
console.log(`${NAME}: click-touch size: ${size}`)
|
||||||
|
|
||||||
if (
|
if (
|
||||||
size === "xs" ||
|
size === 'xs' ||
|
||||||
!$el.data("allow-click") ||
|
!$el.data('allow-click') ||
|
||||||
(W.IsTouchScreen && !$el.data("allow-touch-click"))
|
(W.IsTouchScreen && !$el.data('allow-touch-click'))
|
||||||
) {
|
) {
|
||||||
console.log(`${NAME}: click-touch prevent click`);
|
console.log(`${NAME}: click-touch prevent click`)
|
||||||
e.stopPropagation();
|
e.stopPropagation()
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ui.isShown()) {
|
if (ui.isShown()) {
|
||||||
ui.hide();
|
ui.hide()
|
||||||
} else {
|
} else {
|
||||||
ui.show();
|
ui.show()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.data(NAME, ui);
|
$el.data(NAME, ui)
|
||||||
$triger.addClass(`${NAME}-active`);
|
$triger.addClass(`${NAME}-active`)
|
||||||
}
|
}
|
||||||
|
|
||||||
isShown() {
|
isShown () {
|
||||||
return this.$target.hasClass("show");
|
return this.$target.hasClass('show')
|
||||||
}
|
}
|
||||||
|
|
||||||
show() {
|
show () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.$el
|
ui.$el
|
||||||
.parents(".dropdown")
|
.parents('.dropdown')
|
||||||
.not(".active")
|
.not('.active')
|
||||||
.each((i, el) => {
|
.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
$el.find(".dropdown").removeClass("show");
|
$el.find('.dropdown').removeClass('show')
|
||||||
$el.addClass("show");
|
$el.addClass('show')
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.$target.addClass("show");
|
ui.$target.addClass('show')
|
||||||
}
|
}
|
||||||
|
|
||||||
hide() {
|
hide () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$target;
|
const $el = ui.$target
|
||||||
$el.removeClass("show");
|
$el.removeClass('show')
|
||||||
$el.find(".dropdown-menu").removeClass("show");
|
$el.find('.dropdown-menu').removeClass('show')
|
||||||
$el.parent(".dropdown").removeClass("show");
|
$el.parent('.dropdown').removeClass('show')
|
||||||
}
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
|
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
|
|
||||||
ui.$triger.removeClass(`${NAME}-active`);
|
ui.$triger.removeClass(`${NAME}-active`)
|
||||||
$.removeData($el, DATA_KEY);
|
$.removeData($el, DATA_KEY)
|
||||||
|
|
||||||
ui.$el = null;
|
ui.$el = null
|
||||||
ui.$parent = null;
|
ui.$parent = null
|
||||||
ui.$target = null;
|
ui.$target = null
|
||||||
ui.$triger = null;
|
ui.$triger = null
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to el
|
// attach functionality to el
|
||||||
const $el = $(this);
|
const $el = $(this)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new HoverUI(this);
|
data = new HoverUI(this)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = HoverUI._jQueryInterface;
|
$.fn[NAME] = HoverUI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = HoverUI;
|
$.fn[NAME].Constructor = HoverUI
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return HoverUI._jQueryInterface;
|
return HoverUI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$('[data-toggle="hover"]').ready(() => {
|
$('[data-toggle="hover"]').ready(() => {
|
||||||
$('[data-toggle="hover"]').jsHoverUI();
|
$('[data-toggle="hover"]').jsHoverUI()
|
||||||
});
|
})
|
||||||
|
|
||||||
// rewrite 'bootstrap/js/dist/dropdown'
|
// rewrite 'bootstrap/js/dist/dropdown'
|
||||||
$('[data-toggle="dropdown"]').on("click touch", (e) => {
|
$('[data-toggle="dropdown"]').on('click touch', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
const $parent = $el.parent(".dropdown");
|
const $parent = $el.parent('.dropdown')
|
||||||
|
|
||||||
// hide siblings
|
// hide siblings
|
||||||
$parent.parent().find(".dropdown, .dropdown-menu").removeClass("show");
|
$parent.parent().find('.dropdown, .dropdown-menu').removeClass('show')
|
||||||
|
|
||||||
if ($parent.hasClass("show")) {
|
if ($parent.hasClass('show')) {
|
||||||
$parent.removeClass("show");
|
$parent.removeClass('show')
|
||||||
$parent.find(".dropdown-menu").removeClass("show");
|
$parent.find('.dropdown-menu').removeClass('show')
|
||||||
} else {
|
} else {
|
||||||
$parent.addClass("show");
|
$parent.addClass('show')
|
||||||
$parent.find(".dropdown-menu").addClass("show");
|
$parent.find('.dropdown-menu').addClass('show')
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
return HoverUI;
|
return HoverUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default HoverUI;
|
export default HoverUI
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,44 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const ImagePositionUI = (($) => {
|
const ImagePositionUI = (($) => {
|
||||||
const D = document;
|
const D = document
|
||||||
const W = window;
|
const W = window
|
||||||
const $Body = $("html,body");
|
const $Body = $('html,body')
|
||||||
const NAME = "ImagePositionUI";
|
const NAME = 'ImagePositionUI'
|
||||||
const CLASSNAME = `js${NAME}`;
|
const CLASSNAME = `js${NAME}`
|
||||||
|
|
||||||
class ImagePositionUI {
|
class ImagePositionUI {
|
||||||
static init() {
|
static init () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
if (!$(`.${CLASSNAME}`).length) {
|
if (!$(`.${CLASSNAME}`).length) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
$(`.${CLASSNAME}`).on("click", (e) => {
|
$(`.${CLASSNAME}`).on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
console.log(e);
|
console.log(e)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
ImagePositionUI.init();
|
ImagePositionUI.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
W.ImagePositionUI = new ImagePositionUI();
|
W.ImagePositionUI = new ImagePositionUI()
|
||||||
|
|
||||||
return ImagePositionUI;
|
return ImagePositionUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default ImagePositionUI;
|
export default ImagePositionUI
|
||||||
|
|
|
||||||
|
|
@ -1,113 +1,113 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import "jquery.instagramFeed/jquery.instagramFeed";
|
import 'jquery.instagramFeed/jquery.instagramFeed'
|
||||||
|
|
||||||
const InstagramFeed = (($) => {
|
const InstagramFeed = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsInstagramFeed";
|
const NAME = 'jsInstagramFeed'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
|
|
||||||
class InstagramFeed {
|
class InstagramFeed {
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
|
|
||||||
ui._el = el;
|
ui._el = el
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
$el.data(DATA_KEY, this);
|
$el.data(DATA_KEY, this)
|
||||||
|
|
||||||
const ID = $el.data("username") + $el.data("tag");
|
const ID = $el.data('username') + $el.data('tag')
|
||||||
|
|
||||||
$.instagramFeed({
|
$.instagramFeed({
|
||||||
username: $el.data("username"),
|
username: $el.data('username'),
|
||||||
tag: $el.data("tag") || null,
|
tag: $el.data('tag') || null,
|
||||||
display_profile: $el.data("display-profile"),
|
display_profile: $el.data('display-profile'),
|
||||||
display_biography: $el.data("display-biography"),
|
display_biography: $el.data('display-biography'),
|
||||||
display_gallery: $el.data("display-gallery"),
|
display_gallery: $el.data('display-gallery'),
|
||||||
display_captions: $el.data("display-captions"),
|
display_captions: $el.data('display-captions'),
|
||||||
cache_time: 120,
|
cache_time: 120,
|
||||||
callback: (data) => {
|
callback: (data) => {
|
||||||
console.log(`${NAME}: data response received`);
|
console.log(`${NAME}: data response received`)
|
||||||
|
|
||||||
$el.append(`<div class="${NAME}-list row"></div>`);
|
$el.append(`<div class="${NAME}-list row"></div>`)
|
||||||
const $list = $el.find(`.${NAME}-list`);
|
const $list = $el.find(`.${NAME}-list`)
|
||||||
|
|
||||||
data["edge_owner_to_timeline_media"]["edges"].forEach((el, i) => {
|
data.edge_owner_to_timeline_media.edges.forEach((el, i) => {
|
||||||
const item = el["node"];
|
const item = el.node
|
||||||
const preview = ui.ig_media_preview(item["media_preview"]);
|
const preview = ui.ig_media_preview(item.media_preview)
|
||||||
|
|
||||||
$list.append(
|
$list.append(
|
||||||
`<div class="a col ${NAME}-item"` +
|
`<div class="a col ${NAME}-item"` +
|
||||||
` data-lightbox-gallery="${NAME}-${ID}" data-href="${item["display_url"]}" data-force="image">` +
|
` data-lightbox-gallery="${NAME}-${ID}" data-href="${item.display_url}" data-force="image">` +
|
||||||
`<img id="${NAME}-${ID}-${item["id"]}" src="${item["display_url"]}" alt="${item["accessibility_caption"]}"` +
|
`<img id="${NAME}-${ID}-${item.id}" src="${item.display_url}" alt="${item.accessibility_caption}"` +
|
||||||
`style="background:url(${preview})" />` +
|
`style="background:url(${preview})" />` +
|
||||||
"</div>"
|
'</div>'
|
||||||
);
|
)
|
||||||
});
|
})
|
||||||
|
|
||||||
$(W).trigger("MetaLightboxUI.init");
|
$(W).trigger('MetaLightboxUI.init')
|
||||||
},
|
},
|
||||||
styling: false,
|
styling: false,
|
||||||
items: $el.data("items"),
|
items: $el.data('items'),
|
||||||
lazy_load: true,
|
lazy_load: true,
|
||||||
on_error: (e) => {
|
on_error: (e) => {
|
||||||
console.error(`${NAME}: ${e}`);
|
console.error(`${NAME}: ${e}`)
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.addClass(`${NAME}-active`);
|
$el.addClass(`${NAME}-active`)
|
||||||
}
|
}
|
||||||
|
|
||||||
ig_media_preview(base64data) {
|
ig_media_preview (base64data) {
|
||||||
var jpegtpl =
|
const jpegtpl =
|
||||||
"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==",
|
'/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA=='
|
||||||
t = atob(base64data),
|
const t = atob(base64data)
|
||||||
p = t.slice(3).split(""),
|
const p = t.slice(3).split('')
|
||||||
o = t
|
const o = t
|
||||||
.substring(0, 3)
|
.substring(0, 3)
|
||||||
.split("")
|
.split('')
|
||||||
.map((e) => {
|
.map((e) => {
|
||||||
return e.charCodeAt(0);
|
return e.charCodeAt(0)
|
||||||
}),
|
})
|
||||||
c = atob(jpegtpl).split("");
|
const c = atob(jpegtpl).split('')
|
||||||
c[162] = String.fromCharCode(o[1]);
|
c[162] = String.fromCharCode(o[1])
|
||||||
c[160] = String.fromCharCode(o[2]);
|
c[160] = String.fromCharCode(o[2])
|
||||||
return base64data
|
return base64data
|
||||||
? `data:image/jpeg;base64,${btoa(c.concat(p).join(""))}`
|
? `data:image/jpeg;base64,${btoa(c.concat(p).join(''))}`
|
||||||
: null;
|
: null
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const $el = $(ui._el);
|
const $el = $(ui._el)
|
||||||
$.removeData(ui._el, DATA_KEY);
|
$.removeData(ui._el, DATA_KEY)
|
||||||
ui._el = null;
|
ui._el = null
|
||||||
$el.removeClass(`${NAME}-active`);
|
$el.removeClass(`${NAME}-active`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const init = () => {
|
const init = () => {
|
||||||
$(`.${NAME}`).each((i, el) => {
|
$(`.${NAME}`).each((i, el) => {
|
||||||
new InstagramFeed(el);
|
new InstagramFeed(el)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
init();
|
init()
|
||||||
});
|
})
|
||||||
|
|
||||||
return InstagramFeed;
|
return InstagramFeed
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default InstagramFeed;
|
export default InstagramFeed
|
||||||
|
|
|
||||||
|
|
@ -1,136 +1,136 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
import "../../scss/_components/_ui.map.scss";
|
import '../../scss/_components/_ui.map.scss'
|
||||||
|
|
||||||
import CONSTS from "js/_consts";
|
import CONSTS from 'js/_consts'
|
||||||
|
|
||||||
const MapAPI = (($) => {
|
const MapAPI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsMapAPI";
|
const NAME = 'jsMapAPI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const $BODY = $("body");
|
const $BODY = $('body')
|
||||||
|
|
||||||
const MAP_DRIVER = CONSTS["MAP_DRIVER"];
|
const MAP_DRIVER = CONSTS.MAP_DRIVER
|
||||||
const W = window;
|
const W = window
|
||||||
|
|
||||||
class MapAPI {
|
class MapAPI {
|
||||||
// Constructor
|
// Constructor
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const Drv = new MAP_DRIVER();
|
const Drv = new MAP_DRIVER()
|
||||||
|
|
||||||
ui.$el = $(el);
|
ui.$el = $(el)
|
||||||
|
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
const config = $el.data();
|
const config = $el.data()
|
||||||
|
|
||||||
config["center"] = [
|
config.center = [
|
||||||
config["lng"] ? config["lng"] : $BODY.data("default-lng"),
|
config.lng ? config.lng : $BODY.data('default-lng'),
|
||||||
config["lat"] ? config["lat"] : $BODY.data("default-lat"),
|
config.lat ? config.lat : $BODY.data('default-lat'),
|
||||||
];
|
]
|
||||||
|
|
||||||
config["style"] = config["style"]
|
config.style = config.style
|
||||||
? jQuery.parseJSON(config["style"])
|
? jQuery.parseJSON(config.style)
|
||||||
: null;
|
: null
|
||||||
|
|
||||||
config["font-family"] = $BODY.css("font-family");
|
config['font-family'] = $BODY.css('font-family')
|
||||||
|
|
||||||
if (!config["icon"]) {
|
if (!config.icon) {
|
||||||
config["icon"] = '<i class="fas fa-map-marker-alt"></i>';
|
config.icon = '<i class="fas fa-map-marker-alt"></i>'
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`${NAME}: init ${Drv.getName()}...`);
|
console.log(`${NAME}: init ${Drv.getName()}...`)
|
||||||
Drv.init($el, config);
|
Drv.init($el, config)
|
||||||
ui.drv = Drv;
|
ui.drv = Drv
|
||||||
|
|
||||||
$el.on(Events.MAPAPILOADED, (e) => {
|
$el.on(Events.MAPAPILOADED, (e) => {
|
||||||
ui.map = Drv.getMap();
|
ui.map = Drv.getMap()
|
||||||
|
|
||||||
if (config["geojson"]) {
|
if (config.geojson) {
|
||||||
console.log(`${NAME}: setting up geocode data`);
|
console.log(`${NAME}: setting up geocode data`)
|
||||||
Drv.addGeoJson(config);
|
Drv.addGeoJson(config)
|
||||||
} else if (config["address"]) {
|
} else if (config.address) {
|
||||||
console.log(config["address"]);
|
console.log(config.address)
|
||||||
console.log(`${NAME}: setting up address marker`);
|
console.log(`${NAME}: setting up address marker`)
|
||||||
Drv.geocode(config["address"], (results) => {
|
Drv.geocode(config.address, (results) => {
|
||||||
console.log(results);
|
console.log(results)
|
||||||
|
|
||||||
const lat = results[0].geometry.location.lat();
|
const lat = results[0].geometry.location.lat()
|
||||||
const lng = results[0].geometry.location.lng();
|
const lng = results[0].geometry.location.lng()
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
|
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
|
||||||
);
|
)
|
||||||
|
|
||||||
Drv.addMarker([lng, lat], config);
|
Drv.addMarker([lng, lat], config)
|
||||||
ui.map.setCenter({ lat, lng });
|
ui.map.setCenter({ lat, lng })
|
||||||
});
|
})
|
||||||
} else if (config["lat"] && config["lng"]) {
|
} else if (config.lat && config.lng) {
|
||||||
const lat = config["lat"];
|
const lat = config.lat
|
||||||
const lng = config["lng"];
|
const lng = config.lng
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
|
`${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
|
||||||
);
|
)
|
||||||
|
|
||||||
Drv.addMarker([lng, lat], config);
|
Drv.addMarker([lng, lat], config)
|
||||||
}
|
}
|
||||||
|
|
||||||
$el.data(DATA_KEY, ui);
|
$el.data(DATA_KEY, ui)
|
||||||
$el.addClass(`${NAME}-active`);
|
$el.addClass(`${NAME}-active`)
|
||||||
|
|
||||||
$el.trigger(Events.MAPLOADED);
|
$el.trigger(Events.MAPLOADED)
|
||||||
console.log(`${NAME}: Map is loaded`);
|
console.log(`${NAME}: Map is loaded`)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
getMap() {
|
getMap () {
|
||||||
return ui.map;
|
return ui.map
|
||||||
}
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.$el = null;
|
ui.$el = null
|
||||||
$.removeData(ui.$el[0], DATA_KEY);
|
$.removeData(ui.$el[0], DATA_KEY)
|
||||||
|
|
||||||
ui.$el.removeClass(`${NAME}-active`);
|
ui.$el.removeClass(`${NAME}-active`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
if (typeof W.localStorage !== "undefined") {
|
if (typeof W.localStorage !== 'undefined') {
|
||||||
return this.each(() => {
|
return this.each(() => {
|
||||||
// attach functionality to el
|
// attach functionality to el
|
||||||
const $el = $(this);
|
const $el = $(this)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new MapAPI(this);
|
data = new MapAPI(this)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = MapAPI._jQueryInterface;
|
$.fn[NAME] = MapAPI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = MapAPI;
|
$.fn[NAME].Constructor = MapAPI
|
||||||
$.fn[NAME].noConflict = () => {
|
$.fn[NAME].noConflict = () => {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return MapAPI._jQueryInterface;
|
return MapAPI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
$(".mapAPI-map-container").jsMapAPI();
|
$('.mapAPI-map-container').jsMapAPI()
|
||||||
});
|
})
|
||||||
|
|
||||||
return MapAPI;
|
return MapAPI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default MapAPI;
|
export default MapAPI
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,65 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
const SlidingMenu = (($) => {
|
const SlidingMenu = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsSlidingMenu";
|
const NAME = 'jsSlidingMenu'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
|
|
||||||
class SlidingMenu {
|
class SlidingMenu {
|
||||||
// Constructor
|
// Constructor
|
||||||
constructor(element) {
|
constructor (element) {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
this._element = element;
|
this._element = element
|
||||||
const $element = $(this._element);
|
const $element = $(this._element)
|
||||||
$element.addClass(`${NAME}-active`);
|
$element.addClass(`${NAME}-active`)
|
||||||
|
|
||||||
// esc button
|
// esc button
|
||||||
$(window).on("keyup", (e) => {
|
$(window).on('keyup', (e) => {
|
||||||
if (e.which === 27) {
|
if (e.which === 27) {
|
||||||
$element.find('.is-open[data-toggle="offcanvas"]').click();
|
$element.find('.is-open[data-toggle="offcanvas"]').click()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Public methods
|
// Public methods
|
||||||
dispose() {
|
dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
|
|
||||||
$(this._element).removeClass(`${NAME}-active`);
|
$(this._element).removeClass(`${NAME}-active`)
|
||||||
$.removeData(this._element, DATA_KEY);
|
$.removeData(this._element, DATA_KEY)
|
||||||
this._element = null;
|
this._element = null
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(function () {
|
return this.each(function () {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $element = $(this);
|
const $element = $(this)
|
||||||
let data = $element.data(DATA_KEY);
|
let data = $element.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new SlidingMenu(this);
|
data = new SlidingMenu(this)
|
||||||
$element.data(DATA_KEY, data);
|
$element.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = SlidingMenu._jQueryInterface;
|
$.fn[NAME] = SlidingMenu._jQueryInterface
|
||||||
$.fn[NAME].Constructor = SlidingMenu;
|
$.fn[NAME].Constructor = SlidingMenu
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return SlidingMenu._jQueryInterface;
|
return SlidingMenu._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(`.ui.${NAME}`).ready(() => {
|
$(`.ui.${NAME}`).ready(() => {
|
||||||
$(`.ui.${NAME}`).jsSlidingMenu();
|
$(`.ui.${NAME}`).jsSlidingMenu()
|
||||||
});
|
})
|
||||||
|
|
||||||
return SlidingMenu;
|
return SlidingMenu
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default SlidingMenu;
|
export default SlidingMenu
|
||||||
|
|
|
||||||
|
|
@ -1,168 +1,168 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import MainUI from "../_main";
|
import MainUI from '../_main'
|
||||||
|
|
||||||
import "hammerjs/hammer";
|
import 'hammerjs/hammer'
|
||||||
import "jquery-hammerjs/jquery.hammer";
|
import 'jquery-hammerjs/jquery.hammer'
|
||||||
|
|
||||||
import "../../scss/_components/_ui.multislider.scss";
|
import '../../scss/_components/_ui.multislider.scss'
|
||||||
|
|
||||||
const W = window;
|
const W = window
|
||||||
|
|
||||||
const MultiSlider = (($) => {
|
const MultiSlider = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "jsMultiSlider";
|
const NAME = 'jsMultiSlider'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
const $BODY = $("body");
|
const $BODY = $('body')
|
||||||
|
|
||||||
class MultiSlider {
|
class MultiSlider {
|
||||||
// Constructor
|
// Constructor
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
this.dispose();
|
this.dispose()
|
||||||
|
|
||||||
console.log(`${NAME}: init ...`);
|
console.log(`${NAME}: init ...`)
|
||||||
|
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
ui.$el = $el;
|
ui.$el = $el
|
||||||
ui.sliding = false;
|
ui.sliding = false
|
||||||
|
|
||||||
$el.wrap(`<div class="${NAME}-container"></div>`);
|
$el.wrap(`<div class="${NAME}-container"></div>`)
|
||||||
ui.$elContainer = $el.parent(`.${NAME}-container`);
|
ui.$elContainer = $el.parent(`.${NAME}-container`)
|
||||||
|
|
||||||
$el.wrap(`<div class="${NAME}-slides-container"></div>`);
|
$el.wrap(`<div class="${NAME}-slides-container"></div>`)
|
||||||
ui.$slidesContainer = $el.parent(`.${NAME}-slides-container`);
|
ui.$slidesContainer = $el.parent(`.${NAME}-slides-container`)
|
||||||
|
|
||||||
ui.addControls();
|
ui.addControls()
|
||||||
ui.calculate();
|
ui.calculate()
|
||||||
|
|
||||||
$(W).on("resize", () => {
|
$(W).on('resize', () => {
|
||||||
ui.$elContainer
|
ui.$elContainer
|
||||||
.find(".act-slider-prev,.act-slider-next")
|
.find('.act-slider-prev,.act-slider-next')
|
||||||
.removeClass("disabled");
|
.removeClass('disabled')
|
||||||
ui.calculate();
|
ui.calculate()
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.$elContainer.addClass(`${NAME}-active`);
|
ui.$elContainer.addClass(`${NAME}-active`)
|
||||||
$el.addClass(`${NAME}-active`);
|
$el.addClass(`${NAME}-active`)
|
||||||
}
|
}
|
||||||
|
|
||||||
calculate() {
|
calculate () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.$slides = ui.$el.find(".slide");
|
ui.$slides = ui.$el.find('.slide')
|
||||||
ui.numberOfSlides = ui.$slides.length;
|
ui.numberOfSlides = ui.$slides.length
|
||||||
|
|
||||||
ui.containerWidth = ui.$el.parent().width();
|
ui.containerWidth = ui.$el.parent().width()
|
||||||
ui.maxPos = ui.numberOfSlides - ui.numToDisplay();
|
ui.maxPos = ui.numberOfSlides - ui.numToDisplay()
|
||||||
ui.slideWidth = ui.containerWidth / ui.numToDisplay();
|
ui.slideWidth = ui.containerWidth / ui.numToDisplay()
|
||||||
|
|
||||||
ui.$slides.css("width", `${ui.slideWidth}px`);
|
ui.$slides.css('width', `${ui.slideWidth}px`)
|
||||||
ui.$el.css("width", ui.slideWidth * ui.numberOfSlides);
|
ui.$el.css('width', ui.slideWidth * ui.numberOfSlides)
|
||||||
|
|
||||||
ui.currPos = 0;
|
ui.currPos = 0
|
||||||
ui.slide(0);
|
ui.slide(0)
|
||||||
}
|
}
|
||||||
|
|
||||||
numToDisplay() {
|
numToDisplay () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const size = MainUI.detectBootstrapScreenSize();
|
const size = MainUI.detectBootstrapScreenSize()
|
||||||
|
|
||||||
let num = ui.$el.data(`length-${size}`);
|
let num = ui.$el.data(`length-${size}`)
|
||||||
num = num ? num : ui.$el.data("length");
|
num = num || ui.$el.data('length')
|
||||||
|
|
||||||
console.log(`${NAME}: size ${size} | num ${num}`);
|
console.log(`${NAME}: size ${size} | num ${num}`)
|
||||||
|
|
||||||
return num ? num : 1;
|
return num || 1
|
||||||
}
|
}
|
||||||
|
|
||||||
addControls() {
|
addControls () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const $e = ui.$el;
|
const $e = ui.$el
|
||||||
// actions
|
// actions
|
||||||
ui.$elContainer.append(
|
ui.$elContainer.append(
|
||||||
'<div class="slider-actions">' +
|
'<div class="slider-actions">' +
|
||||||
'<a href="#" class="act act-slider-prev"><i class="fas fa-chevron-left"></i><b class="sr-only">Prev</b></a>' +
|
'<a href="#" class="act act-slider-prev"><i class="fas fa-chevron-left"></i><b class="sr-only">Prev</b></a>' +
|
||||||
'<a href="#" class="act act-slider-next"><i class="fas fa-chevron-right"></i><b class="sr-only">Next</b></a>' +
|
'<a href="#" class="act act-slider-next"><i class="fas fa-chevron-right"></i><b class="sr-only">Next</b></a>' +
|
||||||
"</div>"
|
'</div>'
|
||||||
);
|
)
|
||||||
|
|
||||||
ui.$prevBtn = ui.$elContainer.find(".act-slider-prev");
|
ui.$prevBtn = ui.$elContainer.find('.act-slider-prev')
|
||||||
ui.$nextBtn = ui.$elContainer.find(".act-slider-next");
|
ui.$nextBtn = ui.$elContainer.find('.act-slider-next')
|
||||||
|
|
||||||
ui.$prevBtn.on("click", (e) => {
|
ui.$prevBtn.on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
if ($(e.currentTarget).hasClass("disabled")) {
|
if ($(e.currentTarget).hasClass('disabled')) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.prev();
|
ui.prev()
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.$nextBtn.on("click", (e) => {
|
ui.$nextBtn.on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
if ($(e.currentTarget).hasClass("disabled")) {
|
if ($(e.currentTarget).hasClass('disabled')) {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.next();
|
ui.next()
|
||||||
});
|
})
|
||||||
|
|
||||||
// init touch swipes
|
// init touch swipes
|
||||||
$e.hammer().bind("swipeleft panleft", (e) => {
|
$e.hammer().bind('swipeleft panleft', (e) => {
|
||||||
ui.next();
|
ui.next()
|
||||||
});
|
})
|
||||||
|
|
||||||
$e.hammer().bind("swiperight panright", (e) => {
|
$e.hammer().bind('swiperight panright', (e) => {
|
||||||
ui.prev();
|
ui.prev()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
next() {
|
next () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
if (ui.sliding) {
|
if (ui.sliding) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.currPos++;
|
ui.currPos++
|
||||||
ui.slide(ui.currPos);
|
ui.slide(ui.currPos)
|
||||||
}
|
}
|
||||||
|
|
||||||
prev() {
|
prev () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
if (ui.sliding) {
|
if (ui.sliding) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
ui.currPos--;
|
ui.currPos--
|
||||||
ui.slide(ui.currPos);
|
ui.slide(ui.currPos)
|
||||||
}
|
}
|
||||||
|
|
||||||
slide(pos) {
|
slide (pos) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
if (ui.sliding) {
|
if (ui.sliding) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.sliding = true;
|
ui.sliding = true
|
||||||
if (ui.$nextBtn.length) {
|
if (ui.$nextBtn.length) {
|
||||||
if (pos >= ui.maxPos) {
|
if (pos >= ui.maxPos) {
|
||||||
ui.$nextBtn.addClass("disabled");
|
ui.$nextBtn.addClass('disabled')
|
||||||
} else {
|
} else {
|
||||||
ui.$nextBtn.removeClass("disabled");
|
ui.$nextBtn.removeClass('disabled')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ui.$prevBtn.length) {
|
if (ui.$prevBtn.length) {
|
||||||
if (pos <= 0) {
|
if (pos <= 0) {
|
||||||
ui.$prevBtn.addClass("disabled");
|
ui.$prevBtn.addClass('disabled')
|
||||||
} else {
|
} else {
|
||||||
ui.$prevBtn.removeClass("disabled");
|
ui.$prevBtn.removeClass('disabled')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -170,60 +170,60 @@ const MultiSlider = (($) => {
|
||||||
{
|
{
|
||||||
left: `${-(pos * ui.slideWidth)}px`,
|
left: `${-(pos * ui.slideWidth)}px`,
|
||||||
},
|
},
|
||||||
"slow",
|
'slow',
|
||||||
"swing",
|
'swing',
|
||||||
() => {
|
() => {
|
||||||
ui.sliding = false;
|
ui.sliding = false
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
if (ui.$elContainer) {
|
if (ui.$elContainer) {
|
||||||
ui.$el.parent().find(".slider-actions").remove();
|
ui.$el.parent().find('.slider-actions').remove()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ui.$el) {
|
if (ui.$el) {
|
||||||
ui.$el.hammer().unbind("swipeleft panleft swiperight panright");
|
ui.$el.hammer().unbind('swipeleft panleft swiperight panright')
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`Disposing: ${NAME}`);
|
console.log(`Disposing: ${NAME}`)
|
||||||
|
|
||||||
ui.$el = null;
|
ui.$el = null
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each(() => {
|
return this.each(() => {
|
||||||
// attach functionality to el
|
// attach functionality to el
|
||||||
const $el = $(this);
|
const $el = $(this)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new MultiSlider(this);
|
data = new MultiSlider(this)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = MultiSlider._jQueryInterface;
|
$.fn[NAME] = MultiSlider._jQueryInterface
|
||||||
$.fn[NAME].Constructor = MultiSlider;
|
$.fn[NAME].Constructor = MultiSlider
|
||||||
$.fn[NAME].noConflict = function () {
|
$.fn[NAME].noConflict = function () {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return MultiSlider._jQueryInterface;
|
return MultiSlider._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(W).on(`MultiSlider.init ${Events.LODEDANDREADY}`, () => {
|
$(W).on(`MultiSlider.init ${Events.LODEDANDREADY}`, () => {
|
||||||
$(`.${NAME}`).each((i, el) => {
|
$(`.${NAME}`).each((i, el) => {
|
||||||
$(el).jsMultiSlider();
|
$(el).jsMultiSlider()
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
return MultiSlider;
|
return MultiSlider
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default MultiSlider;
|
export default MultiSlider
|
||||||
|
|
|
||||||
|
|
@ -1,97 +1,97 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../lib/_events";
|
import Events from '../lib/_events'
|
||||||
|
|
||||||
const NoCaptcha = (($) => {
|
const NoCaptcha = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const $window = $(window);
|
const $window = $(window)
|
||||||
const D = document;
|
const D = document
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "jsNoCaptcha";
|
const NAME = 'jsNoCaptcha'
|
||||||
|
|
||||||
class NoCaptcha {
|
class NoCaptcha {
|
||||||
static init() {
|
static init () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
if (
|
if (
|
||||||
$(".g-recaptcha").length &&
|
$('.g-recaptcha').length &&
|
||||||
typeof $window[0].grecaptcha === "undefined"
|
typeof $window[0].grecaptcha === 'undefined'
|
||||||
) {
|
) {
|
||||||
console.log(`${NAME}: Loading Captcha API`);
|
console.log(`${NAME}: Loading Captcha API`)
|
||||||
|
|
||||||
$.getScript(
|
$.getScript(
|
||||||
"https://www.google.com/recaptcha/api.js?render=explicit&hl=en&onload=noCaptchaFieldRender",
|
'https://www.google.com/recaptcha/api.js?render=explicit&hl=en&onload=noCaptchaFieldRender',
|
||||||
() => {
|
() => {
|
||||||
this.renderCaptcha();
|
this.renderCaptcha()
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
} else {
|
} else {
|
||||||
this.renderCaptcha();
|
this.renderCaptcha()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static renderCaptcha() {
|
static renderCaptcha () {
|
||||||
const grecaptcha = $window[0].grecaptcha;
|
const grecaptcha = $window[0].grecaptcha
|
||||||
if (
|
if (
|
||||||
typeof grecaptcha === "undefined" ||
|
typeof grecaptcha === 'undefined' ||
|
||||||
typeof grecaptcha.render === "undefined"
|
typeof grecaptcha.render === 'undefined'
|
||||||
) {
|
) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`${NAME}: Rendering Captcha`);
|
console.log(`${NAME}: Rendering Captcha`)
|
||||||
const $_noCaptchaFields = $(".g-recaptcha");
|
const $_noCaptchaFields = $('.g-recaptcha')
|
||||||
|
|
||||||
if (!$(".g-recaptcha").length) {
|
if (!$('.g-recaptcha').length) {
|
||||||
console.log(`${NAME}: No Captcha fields`);
|
console.log(`${NAME}: No Captcha fields`)
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const submitListener = (e) => {
|
const submitListener = (e) => {
|
||||||
const $field = $(e.currentTarget).find(".g-recaptcha");
|
const $field = $(e.currentTarget).find('.g-recaptcha')
|
||||||
grecaptcha.execute($field.data("widgetid"));
|
grecaptcha.execute($field.data('widgetid'))
|
||||||
};
|
}
|
||||||
|
|
||||||
$_noCaptchaFields.each((i, field) => {
|
$_noCaptchaFields.each((i, field) => {
|
||||||
const $field = $(field);
|
const $field = $(field)
|
||||||
|
|
||||||
if ($field.data("widgetid") || $field.html().length) {
|
if ($field.data('widgetid') || $field.html().length) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const $form = $field.data("form")
|
const $form = $field.data('form')
|
||||||
? $(`#${$field.data("form")}`)
|
? $(`#${$field.data('form')}`)
|
||||||
: $field.parents("form");
|
: $field.parents('form')
|
||||||
|
|
||||||
const widget_id = grecaptcha.render(field, $field.data());
|
const widget_id = grecaptcha.render(field, $field.data())
|
||||||
$field.data("widgetid", widget_id);
|
$field.data('widgetid', widget_id)
|
||||||
|
|
||||||
// For the invisible captcha we need to setup some callback listeners
|
// For the invisible captcha we need to setup some callback listeners
|
||||||
if ($field.data("size") === "invisible" && !$field.data("callback")) {
|
if ($field.data('size') === 'invisible' && !$field.data('callback')) {
|
||||||
grecaptcha.execute(widget_id);
|
grecaptcha.execute(widget_id)
|
||||||
$form.on("submit", submitListener);
|
$form.on('submit', submitListener)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$window.on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$window.on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
NoCaptcha.init();
|
NoCaptcha.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
$window.data(`${NAME}`, NoCaptcha);
|
$window.data(`${NAME}`, NoCaptcha)
|
||||||
$window[0].noCaptchaFieldRender = NoCaptcha.renderCaptcha;
|
$window[0].noCaptchaFieldRender = NoCaptcha.renderCaptcha
|
||||||
|
|
||||||
return NoCaptcha;
|
return NoCaptcha
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default NoCaptcha;
|
export default NoCaptcha
|
||||||
|
|
|
||||||
|
|
@ -1,119 +1,119 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const OpeningHoursUI = (($) => {
|
const OpeningHoursUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const NAME = "OpeningHoursUI";
|
const NAME = 'OpeningHoursUI'
|
||||||
|
|
||||||
class OpeningHoursUI {
|
class OpeningHoursUI {
|
||||||
// Static methods
|
// Static methods
|
||||||
|
|
||||||
static each(callback) {
|
static each (callback) {
|
||||||
$(".js-opening-hours").each((i, e) => {
|
$('.js-opening-hours').each((i, e) => {
|
||||||
callback(i, $(e));
|
callback(i, $(e))
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static init() {
|
static init () {
|
||||||
this.dispose();
|
this.dispose()
|
||||||
|
|
||||||
console.log(`${NAME}: init ...`);
|
console.log(`${NAME}: init ...`)
|
||||||
|
|
||||||
const hours = $.parseJSON($(".oppening-hours-json").html());
|
const hours = $.parseJSON($('.oppening-hours-json').html())
|
||||||
const date = new Date();
|
const date = new Date()
|
||||||
const dateYMD = this.Date_toYMD(date);
|
const dateYMD = this.Date_toYMD(date)
|
||||||
const weekday = [
|
const weekday = [
|
||||||
"Sunday",
|
'Sunday',
|
||||||
"Monday",
|
'Monday',
|
||||||
"Tuesday",
|
'Tuesday',
|
||||||
"Wednesday",
|
'Wednesday',
|
||||||
"Thursday",
|
'Thursday',
|
||||||
"Friday",
|
'Friday',
|
||||||
"Saturday",
|
'Saturday',
|
||||||
];
|
]
|
||||||
const today = weekday[date.getDay()];
|
const today = weekday[date.getDay()]
|
||||||
let html =
|
let html =
|
||||||
'<b class="opening-hours-status opening-hours-status-closed">Closed today</b>';
|
'<b class="opening-hours-status opening-hours-status-closed">Closed today</b>'
|
||||||
|
|
||||||
if (
|
if (
|
||||||
typeof hours["days"] !== "undefined" &&
|
typeof hours.days !== 'undefined' &&
|
||||||
typeof hours["days"][today] !== "undefined" &&
|
typeof hours.days[today] !== 'undefined' &&
|
||||||
hours["days"][today].length
|
hours.days[today].length
|
||||||
) {
|
) {
|
||||||
html = "Open today ";
|
html = 'Open today '
|
||||||
$.each(hours["days"][today], (i, v) => {
|
$.each(hours.days[today], (i, v) => {
|
||||||
if (v["DisplayStart"] || v["DisplayEnd"]) {
|
if (v.DisplayStart || v.DisplayEnd) {
|
||||||
if (
|
if (
|
||||||
(v["DisplayStart"] &&
|
(v.DisplayStart &&
|
||||||
v["DisplayStart"] <= dateYMD &&
|
v.DisplayStart <= dateYMD &&
|
||||||
v["DisplayEnd"] &&
|
v.DisplayEnd &&
|
||||||
v["DisplayEnd"] >= dateYMD) ||
|
v.DisplayEnd >= dateYMD) ||
|
||||||
(v["DisplayStart"] &&
|
(v.DisplayStart &&
|
||||||
v["DisplayStart"] <= dateYMD &&
|
v.DisplayStart <= dateYMD &&
|
||||||
!v["DisplayEnd"]) ||
|
!v.DisplayEnd) ||
|
||||||
(v["DisplayEnd"] &&
|
(v.DisplayEnd &&
|
||||||
v["DisplayEnd"] >= dateYMD &&
|
v.DisplayEnd >= dateYMD &&
|
||||||
!v["DisplayStart"])
|
!v.DisplayStart)
|
||||||
) {
|
) {
|
||||||
html = `Open today from ${v["From"]} to ${v["Till"]}`;
|
html = `Open today from ${v.From} to ${v.Till}`
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
html += ", <br/>";
|
html += ', <br/>'
|
||||||
}
|
}
|
||||||
html += `from ${v["From"]} to ${v["Till"]}`;
|
html += `from ${v.From} to ${v.Till}`
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
html += ' <b class="opening-hours-status"></b>';
|
html += ' <b class="opening-hours-status"></b>'
|
||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
typeof hours["holidays"] !== "undefined" &&
|
typeof hours.holidays !== 'undefined' &&
|
||||||
typeof hours["holidays"][dateYMD] !== "undefined"
|
typeof hours.holidays[dateYMD] !== 'undefined'
|
||||||
) {
|
) {
|
||||||
html = `<b class="opening-hours-status opening-hours-status-closed">Closed today${
|
html = `<b class="opening-hours-status opening-hours-status-closed">Closed today${
|
||||||
hours["holidays"][dateYMD] ? ` for ${hours["holidays"][dateYMD]}` : ""
|
hours.holidays[dateYMD] ? ` for ${hours.holidays[dateYMD]}` : ''
|
||||||
}</b>`;
|
}</b>`
|
||||||
}
|
}
|
||||||
|
|
||||||
this.each((i, e) => {
|
this.each((i, e) => {
|
||||||
const $e = $(e);
|
const $e = $(e)
|
||||||
$e.html(html);
|
$e.html(html)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static Date_toYMD(date) {
|
static Date_toYMD (date) {
|
||||||
var year, month, day;
|
let year, month, day
|
||||||
year = String(date.getFullYear());
|
year = String(date.getFullYear())
|
||||||
month = String(date.getMonth() + 1);
|
month = String(date.getMonth() + 1)
|
||||||
if (month.length == 1) {
|
if (month.length == 1) {
|
||||||
month = `0${month}`;
|
month = `0${month}`
|
||||||
}
|
}
|
||||||
day = String(date.getDate());
|
day = String(date.getDate())
|
||||||
if (day.length == 1) {
|
if (day.length == 1) {
|
||||||
day = `0${day}`;
|
day = `0${day}`
|
||||||
}
|
}
|
||||||
return `${year}-${month}-${day}`;
|
return `${year}-${month}-${day}`
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
this.each((i, e) => {
|
this.each((i, e) => {
|
||||||
$(e).html("");
|
$(e).html('')
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
OpeningHoursUI.init();
|
OpeningHoursUI.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
return OpeningHoursUI;
|
return OpeningHoursUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default OpeningHoursUI;
|
export default OpeningHoursUI
|
||||||
|
|
|
||||||
|
|
@ -1,107 +1,107 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
$(() => {
|
$(() => {
|
||||||
const $searchLat = $('[name="search-lat"]');
|
const $searchLat = $('[name="search-lat"]')
|
||||||
const $searchLng = $('[name="search-lng"]');
|
const $searchLng = $('[name="search-lng"]')
|
||||||
const $nearbyLat = $("#nearby-lat");
|
const $nearbyLat = $('#nearby-lat')
|
||||||
const $nearbyLng = $("#nearby-lng");
|
const $nearbyLng = $('#nearby-lng')
|
||||||
const $radius = $("#distance-radius");
|
const $radius = $('#distance-radius')
|
||||||
const $category = $("#distance-category");
|
const $category = $('#distance-category')
|
||||||
const $newLocation = $('[name="newlocation"]');
|
const $newLocation = $('[name="newlocation"]')
|
||||||
const $setnewlocation = $("#setnewlocation");
|
const $setnewlocation = $('#setnewlocation')
|
||||||
const $newlocationholder = $(".set-newlocation-holder");
|
const $newlocationholder = $('.set-newlocation-holder')
|
||||||
|
|
||||||
const updatePosition = (lat, lng) => {
|
const updatePosition = (lat, lng) => {
|
||||||
$searchLat.val(lat);
|
$searchLat.val(lat)
|
||||||
$searchLng.val(lng);
|
$searchLng.val(lng)
|
||||||
$nearbyLat.val(lat);
|
$nearbyLat.val(lat)
|
||||||
$nearbyLng.val(lng);
|
$nearbyLng.val(lng)
|
||||||
|
|
||||||
$searchLat.change();
|
$searchLat.change()
|
||||||
$nearbyLat.change();
|
$nearbyLat.change()
|
||||||
};
|
}
|
||||||
|
|
||||||
const getGeoPosition = () => {
|
const getGeoPosition = () => {
|
||||||
const newLocation = $newLocation.val();
|
const newLocation = $newLocation.val()
|
||||||
if (!newLocation.length) {
|
if (!newLocation.length) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
$(".search-location .current-val").text(newLocation);
|
$('.search-location .current-val').text(newLocation)
|
||||||
const geoUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${newLocation}&key=AIzaSyC00L0023LPBhzj12uTCL-4EwJ_6zgwcTU&sensor=true`;
|
const geoUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${newLocation}&key=AIzaSyC00L0023LPBhzj12uTCL-4EwJ_6zgwcTU&sensor=true`
|
||||||
|
|
||||||
$.getJSON(geoUrl).done((data) => {
|
$.getJSON(geoUrl).done((data) => {
|
||||||
if (data.status === "OK") {
|
if (data.status === 'OK') {
|
||||||
updatePosition(
|
updatePosition(
|
||||||
data.results[0].geometry.location.lat,
|
data.results[0].geometry.location.lat,
|
||||||
data.results[0].geometry.location.lng
|
data.results[0].geometry.location.lng
|
||||||
);
|
)
|
||||||
//getCategories();
|
// getCategories();
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
const getCurrentPosition = () => {
|
const getCurrentPosition = () => {
|
||||||
$(".search-location .current-val").text("Current Location");
|
$('.search-location .current-val').text('Current Location')
|
||||||
|
|
||||||
navigator.geolocation.getCurrentPosition(
|
navigator.geolocation.getCurrentPosition(
|
||||||
(position) => {
|
(position) => {
|
||||||
updatePosition(position.coords.latitude, position.coords.longitude);
|
updatePosition(position.coords.latitude, position.coords.longitude)
|
||||||
//hideDistancesThatDontMatter();
|
// hideDistancesThatDontMatter();
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
$(".search-location .current-val").text("Unable to get your location");
|
$('.search-location .current-val').text('Unable to get your location')
|
||||||
updatePosition("", "");
|
updatePosition('', '')
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
};
|
|
||||||
|
|
||||||
if ($newLocation.length && $newLocation.val().length) {
|
|
||||||
getGeoPosition();
|
|
||||||
} else {
|
|
||||||
getCurrentPosition();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$("#Form_SearchForm").on("keyup keypress", (e) => {
|
if ($newLocation.length && $newLocation.val().length) {
|
||||||
var keyCode = e.keyCode || e.which;
|
getGeoPosition()
|
||||||
|
} else {
|
||||||
|
getCurrentPosition()
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#Form_SearchForm').on('keyup keypress', (e) => {
|
||||||
|
const keyCode = e.keyCode || e.which
|
||||||
if (keyCode === 13) {
|
if (keyCode === 13) {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$(".get-current-location").on("click", (e) => {
|
$('.get-current-location').on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
getCurrentPosition();
|
getCurrentPosition()
|
||||||
$newlocationholder.toggle();
|
$newlocationholder.toggle()
|
||||||
$newLocation.val("");
|
$newLocation.val('')
|
||||||
});
|
})
|
||||||
|
|
||||||
$setnewlocation.on("click", (e) => {
|
$setnewlocation.on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
$newlocationholder.toggle();
|
$newlocationholder.toggle()
|
||||||
});
|
})
|
||||||
|
|
||||||
$newLocation.blur(() => {
|
$newLocation.blur(() => {
|
||||||
getGeoPosition();
|
getGeoPosition()
|
||||||
});
|
})
|
||||||
|
|
||||||
$(".new-search").on("click", (e) => {
|
$('.new-search').on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
$(".section-search-secondary").animate(
|
$('.section-search-secondary').animate(
|
||||||
{
|
{
|
||||||
"max-height": 300,
|
'max-height': 300,
|
||||||
},
|
},
|
||||||
"slow"
|
'slow'
|
||||||
);
|
)
|
||||||
});
|
})
|
||||||
|
|
||||||
/*$radius.on('change', () => {
|
/* $radius.on('change', () => {
|
||||||
getCategories();
|
getCategories();
|
||||||
});
|
});
|
||||||
function getCategories() {
|
function getCategories() {
|
||||||
|
|
@ -127,39 +127,39 @@ $(() => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}*/
|
} */
|
||||||
|
|
||||||
const $map = $("#Map");
|
const $map = $('#Map')
|
||||||
if (typeof google !== "undefined" && $map.length) {
|
if (typeof google !== 'undefined' && $map.length) {
|
||||||
const $directions = $("#DirectionsPanel"),
|
const $directions = $('#DirectionsPanel')
|
||||||
$fromAddress = $("#FromAddress"),
|
const $fromAddress = $('#FromAddress')
|
||||||
$getDirections = $("#GetDirections"),
|
const $getDirections = $('#GetDirections')
|
||||||
$directionContainer = $("#DirectionContainer"),
|
const $directionContainer = $('#DirectionContainer')
|
||||||
directionsDisplay = new google.maps.DirectionsRenderer(),
|
const directionsDisplay = new google.maps.DirectionsRenderer()
|
||||||
directionsService = new google.maps.DirectionsService(),
|
const directionsService = new google.maps.DirectionsService()
|
||||||
currentPosition = {
|
const currentPosition = {
|
||||||
lat: $map.data("lat"),
|
lat: $map.data('lat'),
|
||||||
lng: $map.data("lng"),
|
lng: $map.data('lng'),
|
||||||
},
|
}
|
||||||
map = new google.maps.Map($map[0], {
|
const map = new google.maps.Map($map[0], {
|
||||||
zoom: 15,
|
zoom: 15,
|
||||||
mapTypeControl: true,
|
mapTypeControl: true,
|
||||||
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
||||||
});
|
})
|
||||||
|
|
||||||
directionsDisplay.setMap(map);
|
directionsDisplay.setMap(map)
|
||||||
directionsDisplay.setPanel($directions[0]);
|
directionsDisplay.setPanel($directions[0])
|
||||||
|
|
||||||
map.setCenter(currentPosition);
|
map.setCenter(currentPosition)
|
||||||
new google.maps.Marker({
|
new google.maps.Marker({
|
||||||
map,
|
map,
|
||||||
position: currentPosition,
|
position: currentPosition,
|
||||||
});
|
})
|
||||||
|
|
||||||
$getDirections.click((e) => {
|
$getDirections.click((e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
|
|
||||||
const fromLocation = $fromAddress.val();
|
const fromLocation = $fromAddress.val()
|
||||||
|
|
||||||
if (fromLocation.length) {
|
if (fromLocation.length) {
|
||||||
directionsService.route(
|
directionsService.route(
|
||||||
|
|
@ -170,13 +170,13 @@ $(() => {
|
||||||
},
|
},
|
||||||
(response, status) => {
|
(response, status) => {
|
||||||
if (status === google.maps.DirectionsStatus.OK) {
|
if (status === google.maps.DirectionsStatus.OK) {
|
||||||
directionsDisplay.setDirections(response);
|
directionsDisplay.setDirections(response)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
|
|
||||||
$directionContainer.slideDown();
|
$directionContainer.slideDown()
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,48 +1,48 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const ShrinkUI = (($) => {
|
const ShrinkUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
const NAME = "ShrinkUI";
|
const NAME = 'ShrinkUI'
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
$(W).on(
|
$(W).on(
|
||||||
`${NAME}.init ${Events.LOADED} ${Events.SCROLL} ${Events.RESIZE}`,
|
`${NAME}.init ${Events.LOADED} ${Events.SCROLL} ${Events.RESIZE}`,
|
||||||
() => {
|
() => {
|
||||||
if ($("#Navigation > .navbar-collapse").hasClass("show")) {
|
if ($('#Navigation > .navbar-collapse').hasClass('show')) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
let h1 = $("#SiteWideMessage").height();
|
let h1 = $('#SiteWideMessage').height()
|
||||||
if (!h1) {
|
if (!h1) {
|
||||||
h1 = 0;
|
h1 = 0
|
||||||
}
|
}
|
||||||
let h2 = $("#SiteWideOffline").height();
|
let h2 = $('#SiteWideOffline').height()
|
||||||
if (!h2) {
|
if (!h2) {
|
||||||
h2 = 0;
|
h2 = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
let h3 = $("#Header").height();
|
let h3 = $('#Header').height()
|
||||||
if (!h3) {
|
if (!h3) {
|
||||||
h3 = 0;
|
h3 = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
const headerHeight = h1 + h2 + h3;
|
const headerHeight = h1 + h2 + h3
|
||||||
|
|
||||||
if ($(D).scrollTop() > headerHeight) {
|
if ($(D).scrollTop() > headerHeight) {
|
||||||
$("body").addClass("shrink");
|
$('body').addClass('shrink')
|
||||||
} else {
|
} else {
|
||||||
$("body").removeClass("shrink");
|
$('body').removeClass('shrink')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
|
|
||||||
return ShrinkUI;
|
return ShrinkUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default ShrinkUI;
|
export default ShrinkUI
|
||||||
|
|
|
||||||
|
|
@ -1,84 +1,84 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
//import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
|
// import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
const SidebarUI = (($) => {
|
const SidebarUI = (($) => {
|
||||||
const D = document;
|
const D = document
|
||||||
const W = window;
|
const W = window
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
const NAME = "SidebarUI";
|
const NAME = 'SidebarUI'
|
||||||
const CLASSNAME = `js${NAME}`;
|
const CLASSNAME = `js${NAME}`
|
||||||
const CONTENTHOLDER = "content-holder";
|
const CONTENTHOLDER = 'content-holder'
|
||||||
const INNERWRAPPER = `${CLASSNAME}__inner`;
|
const INNERWRAPPER = `${CLASSNAME}__inner`
|
||||||
|
|
||||||
class SidebarUI {
|
class SidebarUI {
|
||||||
static init() {
|
static init () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
if (!$(`.${CLASSNAME}`).length) {
|
if (!$(`.${CLASSNAME}`).length) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`${NAME}: init ...`);
|
console.log(`${NAME}: init ...`)
|
||||||
//const fontSize = parseInt($Body.css('font-size'));
|
// const fontSize = parseInt($Body.css('font-size'));
|
||||||
const fontSize = 0;
|
const fontSize = 0
|
||||||
const contentElement = $(`.${CONTENTHOLDER}`)[0];
|
const contentElement = $(`.${CONTENTHOLDER}`)[0]
|
||||||
|
|
||||||
//$(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
|
// $(`.${CLASSNAME}`).wrapInner(`<div class="${INNERWRAPPER}"></div>`);
|
||||||
const $el = $(`.${CLASSNAME}`);
|
const $el = $(`.${CLASSNAME}`)
|
||||||
const $innerWrapper = $(`.${INNERWRAPPER}`);
|
const $innerWrapper = $(`.${INNERWRAPPER}`)
|
||||||
|
|
||||||
/*const sticky = new StickySidebar(`.${CLASSNAME}`, {
|
/* const sticky = new StickySidebar(`.${CLASSNAME}`, {
|
||||||
topSpacing: fontSize,
|
topSpacing: fontSize,
|
||||||
bottomSpacing: fontSize,
|
bottomSpacing: fontSize,
|
||||||
containerSelector: CONTENTHOLDER,
|
containerSelector: CONTENTHOLDER,
|
||||||
innerWrapperSelector: INNERWRAPPER,
|
innerWrapperSelector: INNERWRAPPER,
|
||||||
});*/
|
}); */
|
||||||
|
|
||||||
$el.addClass(`${CLASSNAME}-active`);
|
$el.addClass(`${CLASSNAME}-active`)
|
||||||
|
|
||||||
$Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
|
$Body.on(`${Events.SCROLL} ${Events.RESIZE}`, (e) => {
|
||||||
const contentOffset = parseInt(contentElement.offsetTop) + fontSize;
|
const contentOffset = parseInt(contentElement.offsetTop) + fontSize
|
||||||
const contentOffsetHeight =
|
const contentOffsetHeight =
|
||||||
parseInt(contentElement.offsetHeight) - fontSize;
|
parseInt(contentElement.offsetHeight) - fontSize
|
||||||
const sidebarWidth = $el[0].offsetWidth;
|
const sidebarWidth = $el[0].offsetWidth
|
||||||
|
|
||||||
const scrollPos = parseInt($Body.scrollTop());
|
const scrollPos = parseInt($Body.scrollTop())
|
||||||
|
|
||||||
// normal pos
|
// normal pos
|
||||||
if (contentOffset >= scrollPos) {
|
if (contentOffset >= scrollPos) {
|
||||||
$innerWrapper.attr("style", "");
|
$innerWrapper.attr('style', '')
|
||||||
} else if (
|
} else if (
|
||||||
scrollPos >=
|
scrollPos >=
|
||||||
contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight
|
contentOffset + contentOffsetHeight - $innerWrapper[0].offsetHeight
|
||||||
) {
|
) {
|
||||||
// bottom pos
|
// bottom pos
|
||||||
$innerWrapper.attr("style", `position:absolute;bottom:${fontSize}px`);
|
$innerWrapper.attr('style', `position:absolute;bottom:${fontSize}px`)
|
||||||
} else {
|
} else {
|
||||||
// scrolled pos
|
// scrolled pos
|
||||||
$innerWrapper.attr(
|
$innerWrapper.attr(
|
||||||
"style",
|
'style',
|
||||||
`position:fixed;top:${fontSize}px;width:${sidebarWidth}px`
|
`position:fixed;top:${fontSize}px;width:${sidebarWidth}px`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(W).on(`${NAME}.init ${Events.LODEDANDREADY}`, () => {
|
$(W).on(`${NAME}.init ${Events.LODEDANDREADY}`, () => {
|
||||||
SidebarUI.init();
|
SidebarUI.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
W.SidebarUI = new SidebarUI();
|
W.SidebarUI = new SidebarUI()
|
||||||
|
|
||||||
return SidebarUI;
|
return SidebarUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default SidebarUI;
|
export default SidebarUI
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
const SpinnerUI = (($) => {
|
const SpinnerUI = (($) => {
|
||||||
class SpinnerUI {
|
class SpinnerUI {
|
||||||
static show(callback) {
|
static show (callback) {
|
||||||
$("#PageLoading").show(0, callback);
|
$('#PageLoading').show(0, callback)
|
||||||
}
|
}
|
||||||
|
|
||||||
static hide(callback) {
|
static hide (callback) {
|
||||||
$("#PageLoading").hide("slow", callback);
|
$('#PageLoading').hide('slow', callback)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return SpinnerUI;
|
return SpinnerUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default SpinnerUI;
|
export default SpinnerUI
|
||||||
|
|
|
||||||
|
|
@ -1,120 +1,120 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import MainUI from "../_main";
|
import MainUI from '../_main'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
import SpinnerUI from "./_ui.spinner";
|
import SpinnerUI from './_ui.spinner'
|
||||||
|
|
||||||
const VideoPreviewUI = (($) => {
|
const VideoPreviewUI = (($) => {
|
||||||
const NAME = "jsVideoPreviewUI";
|
const NAME = 'jsVideoPreviewUI'
|
||||||
const DATA_KEY = NAME;
|
const DATA_KEY = NAME
|
||||||
|
|
||||||
const G = window;
|
const G = window
|
||||||
const D = document;
|
const D = document
|
||||||
|
|
||||||
class VideoPreviewUI {
|
class VideoPreviewUI {
|
||||||
constructor(el) {
|
constructor (el) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.$_el = $(el);
|
ui.$_el = $(el)
|
||||||
ui.innerHTML = ui.$_el[0].innerHTML;
|
ui.innerHTML = ui.$_el[0].innerHTML
|
||||||
|
|
||||||
ui.$_el.data(DATA_KEY, this);
|
ui.$_el.data(DATA_KEY, this)
|
||||||
const href = ui.$_el.attr("href") || ui.$_el.data("href");
|
const href = ui.$_el.attr('href') || ui.$_el.data('href')
|
||||||
const YouTubeGetID = (url) => {
|
const YouTubeGetID = (url) => {
|
||||||
const parsedURL = url.split(
|
const parsedURL = url.split(
|
||||||
/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/
|
/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/
|
||||||
);
|
)
|
||||||
console.log(`${NAME}: ${parsedURL}`);
|
console.log(`${NAME}: ${parsedURL}`)
|
||||||
return undefined !== parsedURL[2]
|
return undefined !== parsedURL[2]
|
||||||
? parsedURL[2].split(/[^0-9a-z_-]/i)[0]
|
? parsedURL[2].split(/[^0-9a-z_-]/i)[0]
|
||||||
: parsedURL[0];
|
: parsedURL[0]
|
||||||
};
|
}
|
||||||
|
|
||||||
let video;
|
let video
|
||||||
|
|
||||||
if (
|
if (
|
||||||
(video = href.match(
|
(video = href.match(
|
||||||
/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/
|
/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/
|
||||||
))
|
))
|
||||||
) {
|
) {
|
||||||
let video_id;
|
let video_id
|
||||||
|
|
||||||
if (
|
if (
|
||||||
video[1] === "youtube" ||
|
video[1] === 'youtube' ||
|
||||||
video[1] === "youtube-nocookie" ||
|
video[1] === 'youtube-nocookie' ||
|
||||||
video[1] === "youtu"
|
video[1] === 'youtu'
|
||||||
) {
|
) {
|
||||||
video_id = YouTubeGetID(href);
|
video_id = YouTubeGetID(href)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (video[1] == "vimeo") {
|
if (video[1] == 'vimeo') {
|
||||||
video_id = video[3];
|
video_id = video[3]
|
||||||
ui.$_el.addClass("loading");
|
ui.$_el.addClass('loading')
|
||||||
$.ajax({
|
$.ajax({
|
||||||
type: "GET",
|
type: 'GET',
|
||||||
url: `https://vimeo.com/api/v2/video/${video_id}.json`,
|
url: `https://vimeo.com/api/v2/video/${video_id}.json`,
|
||||||
jsonp: "callback",
|
jsonp: 'callback',
|
||||||
dataType: "jsonp",
|
dataType: 'jsonp',
|
||||||
success: function (data) {
|
success: function (data) {
|
||||||
const thumbnail_src = data[0].thumbnail_large;
|
const thumbnail_src = data[0].thumbnail_large
|
||||||
ui.show(thumbnail_src);
|
ui.show(thumbnail_src)
|
||||||
ui.$_el.removeClass("loading");
|
ui.$_el.removeClass('loading')
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (video_id) {
|
if (video_id) {
|
||||||
ui.show(`//i3.ytimg.com/vi/${video_id}/0.jpg`);
|
ui.show(`//i3.ytimg.com/vi/${video_id}/0.jpg`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
show(src) {
|
show (src) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.$_el[0].innerHTML = "";
|
ui.$_el[0].innerHTML = ''
|
||||||
ui.$_el.append(`<img src="${src}" alt="Video" />`);
|
ui.$_el.append(`<img src="${src}" alt="Video" />`)
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
ui.$_el[0].innerHTML = ui.innerHTML;
|
ui.$_el[0].innerHTML = ui.innerHTML
|
||||||
}
|
}
|
||||||
|
|
||||||
static _jQueryInterface() {
|
static _jQueryInterface () {
|
||||||
return this.each((i, el) => {
|
return this.each((i, el) => {
|
||||||
// attach functionality to element
|
// attach functionality to element
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
let data = $el.data(DATA_KEY);
|
let data = $el.data(DATA_KEY)
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
data = new VideoPreviewUI(el);
|
data = new VideoPreviewUI(el)
|
||||||
$el.data(DATA_KEY, data);
|
$el.data(DATA_KEY, data)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// jQuery interface
|
// jQuery interface
|
||||||
$.fn[NAME] = VideoPreviewUI._jQueryInterface;
|
$.fn[NAME] = VideoPreviewUI._jQueryInterface
|
||||||
$.fn[NAME].Constructor = VideoPreviewUI;
|
$.fn[NAME].Constructor = VideoPreviewUI
|
||||||
$.fn[NAME].noConflict = () => {
|
$.fn[NAME].noConflict = () => {
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||||
return VideoPreviewUI._jQueryInterface;
|
return VideoPreviewUI._jQueryInterface
|
||||||
};
|
}
|
||||||
|
|
||||||
// auto-apply
|
// auto-apply
|
||||||
$(window).on(`${Events.LODEDANDREADY}`, () => {
|
$(window).on(`${Events.LODEDANDREADY}`, () => {
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
$('[data-video-preview="true"]').each((i, el) => {
|
$('[data-video-preview="true"]').each((i, el) => {
|
||||||
$(el).jsVideoPreviewUI();
|
$(el).jsVideoPreviewUI()
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
return VideoPreviewUI;
|
return VideoPreviewUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default VideoPreviewUI;
|
export default VideoPreviewUI
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
const G = window;
|
const G = window
|
||||||
const D = document;
|
const D = document
|
||||||
|
|
||||||
// remove browser default alerts
|
// remove browser default alerts
|
||||||
/*alert = function () {
|
/* alert = function () {
|
||||||
console.log(arguments);
|
console.log(arguments);
|
||||||
console.log(new Error().stack);
|
console.log(new Error().stack);
|
||||||
};*/
|
}; */
|
||||||
|
|
||||||
/*G.addEventListener(G.visibilityChangeEvent, () => {
|
/* G.addEventListener(G.visibilityChangeEvent, () => {
|
||||||
if (currentPage && typeof currentPage !== 'undefined') {
|
if (currentPage && typeof currentPage !== 'undefined') {
|
||||||
if (
|
if (
|
||||||
landingPage !== G.location.href &&
|
landingPage !== G.location.href &&
|
||||||
|
|
@ -23,4 +23,4 @@ const D = document;
|
||||||
G.localStorage.removeItem('current-page');
|
G.localStorage.removeItem('current-page');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});*/
|
}); */
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,61 @@
|
||||||
function _gaLt(event) {
|
function _gaLt (event) {
|
||||||
if (typeof ga !== "function") {
|
if (typeof ga !== 'function') {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
var el = event.srcElement || event.target;
|
let el = event.srcElement || event.target
|
||||||
|
|
||||||
/* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
|
/* Loop up the DOM tree through parent elements if clicked element is not a link (eg: an image inside a link) */
|
||||||
while (
|
while (
|
||||||
el &&
|
el &&
|
||||||
(typeof el.tagName == "undefined" ||
|
(typeof el.tagName === 'undefined' ||
|
||||||
el.tagName.toLowerCase() != "a" ||
|
el.tagName.toLowerCase() != 'a' ||
|
||||||
!el.href)
|
!el.href)
|
||||||
) {
|
) {
|
||||||
el = el.parentNode;
|
el = el.parentNode
|
||||||
}
|
}
|
||||||
|
|
||||||
if (el && el.href) {
|
if (el && el.href) {
|
||||||
/* link */
|
/* link */
|
||||||
var link = el.href;
|
const link = el.href
|
||||||
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
|
if (link.indexOf(location.host) == -1 && !link.match(/^javascript:/i)) {
|
||||||
/* external link */
|
/* external link */
|
||||||
/* HitCallback function to either open link in either same or new window */
|
/* HitCallback function to either open link in either same or new window */
|
||||||
var hitBack = function (link, target) {
|
const hitBack = function (link, target) {
|
||||||
target ? window.open(link, target) : (window.location.href = link);
|
target ? window.open(link, target) : (window.location.href = link)
|
||||||
};
|
}
|
||||||
/* Is target set and not _(self|parent|top)? */
|
/* Is target set and not _(self|parent|top)? */
|
||||||
var target =
|
const target =
|
||||||
el.target && !el.target.match(/^_(self|parent|top)$/i)
|
el.target && !el.target.match(/^_(self|parent|top)$/i)
|
||||||
? el.target
|
? el.target
|
||||||
: false;
|
: false
|
||||||
/* send event with callback */
|
/* send event with callback */
|
||||||
ga(
|
ga(
|
||||||
"send",
|
'send',
|
||||||
"event",
|
'event',
|
||||||
"Outgoing Links",
|
'Outgoing Links',
|
||||||
link,
|
link,
|
||||||
document.location.pathname + document.location.search,
|
document.location.pathname + document.location.search,
|
||||||
{ hitCallback: hitBack(link, target) }
|
{ hitCallback: hitBack(link, target) }
|
||||||
);
|
)
|
||||||
|
|
||||||
/* Prevent standard click */
|
/* Prevent standard click */
|
||||||
event.preventDefault ? event.preventDefault() : (event.returnValue = !1);
|
event.preventDefault ? event.preventDefault() : (event.returnValue = !1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Attach the event to all clicks in the document after page has loaded */
|
/* Attach the event to all clicks in the document after page has loaded */
|
||||||
var w = window;
|
const w = window
|
||||||
w.addEventListener
|
w.addEventListener
|
||||||
? w.addEventListener(
|
? w.addEventListener(
|
||||||
"load",
|
'load',
|
||||||
() => {
|
() => {
|
||||||
document.body.addEventListener("click", _gaLt, !1);
|
document.body.addEventListener('click', _gaLt, !1)
|
||||||
},
|
},
|
||||||
!1
|
!1
|
||||||
)
|
)
|
||||||
: w.attachEvent &&
|
: w.attachEvent &&
|
||||||
w.attachEvent("onload", () => {
|
w.attachEvent('onload', () => {
|
||||||
document.body.attachEvent("onclick", _gaLt);
|
document.body.attachEvent('onclick', _gaLt)
|
||||||
});
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,197 +1,196 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
const Obj = {
|
const Obj = {
|
||||||
init: () => {
|
init: () => {
|
||||||
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
|
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
|
||||||
constructor(options) {
|
constructor (options) {
|
||||||
super();
|
super()
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.setMap(options.map);
|
ui.setMap(options.map)
|
||||||
ui.position = options.position;
|
ui.position = options.position
|
||||||
ui.html = options.html
|
ui.html = options.html
|
||||||
? options.html
|
? options.html
|
||||||
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
|
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
|
||||||
ui.divClass = options.divClass;
|
ui.divClass = options.divClass
|
||||||
ui.align = options.align;
|
ui.align = options.align
|
||||||
ui.isDebugMode = options.debug;
|
ui.isDebugMode = options.debug
|
||||||
ui.onClick = options.onClick;
|
ui.onClick = options.onClick
|
||||||
ui.onMouseOver = options.onMouseOver;
|
ui.onMouseOver = options.onMouseOver
|
||||||
|
|
||||||
ui.isBoolean = (arg) => {
|
ui.isBoolean = (arg) => {
|
||||||
if (typeof arg === "boolean") {
|
if (typeof arg === 'boolean') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isNotUndefined = (arg) => {
|
ui.isNotUndefined = (arg) => {
|
||||||
if (typeof arg !== "undefined") {
|
if (typeof arg !== 'undefined') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.hasContent = (arg) => {
|
ui.hasContent = (arg) => {
|
||||||
if (arg.length > 0) {
|
if (arg.length > 0) {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isString = (arg) => {
|
ui.isString = (arg) => {
|
||||||
if (typeof arg === "string") {
|
if (typeof arg === 'string') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isFunction = (arg) => {
|
ui.isFunction = (arg) => {
|
||||||
if (typeof arg === "function") {
|
if (typeof arg === 'function') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
onAdd() {
|
|
||||||
const ui = this;
|
onAdd () {
|
||||||
|
const ui = this
|
||||||
|
|
||||||
// Create div element.
|
// Create div element.
|
||||||
ui.div = document.createElement("div");
|
ui.div = document.createElement('div')
|
||||||
ui.div.style.position = "absolute";
|
ui.div.style.position = 'absolute'
|
||||||
|
|
||||||
// Validate and set custom div class
|
// Validate and set custom div class
|
||||||
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
|
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
|
||||||
ui.div.className = ui.divClass;
|
|
||||||
|
|
||||||
// Validate and set custom HTML
|
// Validate and set custom HTML
|
||||||
if (
|
if (
|
||||||
ui.isNotUndefined(ui.html) &&
|
ui.isNotUndefined(ui.html) &&
|
||||||
ui.hasContent(ui.html) &&
|
ui.hasContent(ui.html) &&
|
||||||
ui.isString(ui.html)
|
ui.isString(ui.html)
|
||||||
)
|
) { ui.div.innerHTML = ui.html }
|
||||||
ui.div.innerHTML = ui.html;
|
|
||||||
|
|
||||||
// If debug mode is enabled custom content will be replaced with debug content
|
// If debug mode is enabled custom content will be replaced with debug content
|
||||||
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
|
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
|
||||||
ui.div.className = "debug-mode";
|
ui.div.className = 'debug-mode'
|
||||||
ui.div.innerHTML =
|
ui.div.innerHTML =
|
||||||
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
|
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
|
||||||
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>';
|
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'
|
||||||
ui.div.setAttribute(
|
ui.div.setAttribute(
|
||||||
"style",
|
'style',
|
||||||
"position: absolute;" +
|
'position: absolute;' +
|
||||||
"border: 5px dashed red;" +
|
'border: 5px dashed red;' +
|
||||||
"height: 150px;" +
|
'height: 150px;' +
|
||||||
"width: 150px;" +
|
'width: 150px;' +
|
||||||
"display: flex;" +
|
'display: flex;' +
|
||||||
"justify-content: center;" +
|
'justify-content: center;' +
|
||||||
"align-items: center;"
|
'align-items: center;'
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add element to clickable layer
|
// Add element to clickable layer
|
||||||
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
|
ui.getPanes().overlayMouseTarget.appendChild(ui.div)
|
||||||
|
|
||||||
// Add listeners to the element.
|
// Add listeners to the element.
|
||||||
google.maps.event.addDomListener(ui.div, "click", (event) => {
|
google.maps.event.addDomListener(ui.div, 'click', (event) => {
|
||||||
google.maps.event.trigger(ui, "click");
|
google.maps.event.trigger(ui, 'click')
|
||||||
if (ui.isFunction(ui.onClick)) ui.onClick();
|
if (ui.isFunction(ui.onClick)) ui.onClick()
|
||||||
event.stopPropagation();
|
event.stopPropagation()
|
||||||
});
|
})
|
||||||
|
|
||||||
google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
|
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
|
||||||
google.maps.event.trigger(ui, "mouseover");
|
google.maps.event.trigger(ui, 'mouseover')
|
||||||
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
|
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
|
||||||
event.stopPropagation();
|
event.stopPropagation()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
draw() {
|
draw () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
// Calculate position of div
|
// Calculate position of div
|
||||||
var positionInPixels = ui
|
const positionInPixels = ui
|
||||||
.getProjection()
|
.getProjection()
|
||||||
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position));
|
.fromLatLngToDivPixel(new google.maps.LatLng(ui.position))
|
||||||
|
|
||||||
// Align HTML overlay relative to original position
|
// Align HTML overlay relative to original position
|
||||||
var divOffset = {
|
const divOffset = {
|
||||||
y: undefined,
|
y: undefined,
|
||||||
x: undefined,
|
x: undefined,
|
||||||
};
|
}
|
||||||
|
|
||||||
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
|
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
|
||||||
case "left top":
|
case 'left top':
|
||||||
divOffset.y = ui.div.offsetHeight;
|
divOffset.y = ui.div.offsetHeight
|
||||||
divOffset.x = ui.div.offsetWidth;
|
divOffset.x = ui.div.offsetWidth
|
||||||
break;
|
break
|
||||||
case "left center":
|
case 'left center':
|
||||||
divOffset.y = ui.div.offsetHeight / 2;
|
divOffset.y = ui.div.offsetHeight / 2
|
||||||
divOffset.x = ui.div.offsetWidth;
|
divOffset.x = ui.div.offsetWidth
|
||||||
break;
|
break
|
||||||
case "left bottom":
|
case 'left bottom':
|
||||||
divOffset.y = 0;
|
divOffset.y = 0
|
||||||
divOffset.x = ui.div.offsetWidth;
|
divOffset.x = ui.div.offsetWidth
|
||||||
break;
|
break
|
||||||
case "center top":
|
case 'center top':
|
||||||
divOffset.y = ui.div.offsetHeight;
|
divOffset.y = ui.div.offsetHeight
|
||||||
divOffset.x = ui.div.offsetWidth / 2;
|
divOffset.x = ui.div.offsetWidth / 2
|
||||||
break;
|
break
|
||||||
case "center center":
|
case 'center center':
|
||||||
divOffset.y = ui.div.offsetHeight / 2;
|
divOffset.y = ui.div.offsetHeight / 2
|
||||||
divOffset.x = ui.div.offsetWidth / 2;
|
divOffset.x = ui.div.offsetWidth / 2
|
||||||
break;
|
break
|
||||||
case "center bottom":
|
case 'center bottom':
|
||||||
divOffset.y = 0;
|
divOffset.y = 0
|
||||||
divOffset.x = ui.div.offsetWidth / 2;
|
divOffset.x = ui.div.offsetWidth / 2
|
||||||
break;
|
break
|
||||||
case "right top":
|
case 'right top':
|
||||||
divOffset.y = ui.div.offsetHeight;
|
divOffset.y = ui.div.offsetHeight
|
||||||
divOffset.x = 0;
|
divOffset.x = 0
|
||||||
break;
|
break
|
||||||
case "right center":
|
case 'right center':
|
||||||
divOffset.y = ui.div.offsetHeight / 2;
|
divOffset.y = ui.div.offsetHeight / 2
|
||||||
divOffset.x = 0;
|
divOffset.x = 0
|
||||||
break;
|
break
|
||||||
case "right bottom":
|
case 'right bottom':
|
||||||
divOffset.y = 0;
|
divOffset.y = 0
|
||||||
divOffset.x = 0;
|
divOffset.x = 0
|
||||||
break;
|
break
|
||||||
default:
|
default:
|
||||||
divOffset.y = ui.div.offsetHeight / 2;
|
divOffset.y = ui.div.offsetHeight / 2
|
||||||
divOffset.x = ui.div.offsetWidth / 2;
|
divOffset.x = ui.div.offsetWidth / 2
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set position
|
// Set position
|
||||||
ui.div.style.top = `${positionInPixels.y - divOffset.y}px`;
|
ui.div.style.top = `${positionInPixels.y - divOffset.y}px`
|
||||||
ui.div.style.left = `${positionInPixels.x - divOffset.x}px`;
|
ui.div.style.left = `${positionInPixels.x - divOffset.x}px`
|
||||||
}
|
}
|
||||||
|
|
||||||
getPosition() {
|
getPosition () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.position;
|
return ui.position
|
||||||
}
|
}
|
||||||
|
|
||||||
getDiv() {
|
getDiv () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.div;
|
return ui.div
|
||||||
}
|
}
|
||||||
|
|
||||||
setPosition(position, align) {
|
setPosition (position, align) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.position = position;
|
ui.position = position
|
||||||
ui.align = align;
|
ui.align = align
|
||||||
ui.draw();
|
ui.draw()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return GoogleMapsHtmlOverlay;
|
return GoogleMapsHtmlOverlay
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Obj;
|
export default Obj
|
||||||
|
|
|
||||||
|
|
@ -1,294 +1,294 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import MarkerClusterer from "@googlemaps/markerclustererplus";
|
import MarkerClusterer from '@googlemaps/markerclustererplus'
|
||||||
|
|
||||||
import Events from "../../_events";
|
import Events from '../../_events'
|
||||||
import MarkerUI from "./_map.google.marker";
|
import MarkerUI from './_map.google.marker'
|
||||||
|
|
||||||
const GoogleMapsDriver = (($) => {
|
const GoogleMapsDriver = (($) => {
|
||||||
class GoogleMapsDriver {
|
class GoogleMapsDriver {
|
||||||
getName() {
|
getName () {
|
||||||
return "GoogleMapsDriver";
|
return 'GoogleMapsDriver'
|
||||||
}
|
}
|
||||||
|
|
||||||
init($el, config = []) {
|
init ($el, config = []) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const W = window;
|
const W = window
|
||||||
|
|
||||||
ui.$el = $el;
|
ui.$el = $el
|
||||||
ui.config = config;
|
ui.config = config
|
||||||
ui.markers = [];
|
ui.markers = []
|
||||||
|
|
||||||
W[`init${ui.getName()}`] = () => {
|
W[`init${ui.getName()}`] = () => {
|
||||||
ui.googleApiLoaded();
|
ui.googleApiLoaded()
|
||||||
};
|
}
|
||||||
|
|
||||||
$("body").append(
|
$('body').append(
|
||||||
`<script async defer src="https://maps.googleapis.com/maps/api/js?key=${
|
`<script async defer src="https://maps.googleapis.com/maps/api/js?key=${
|
||||||
config["key"]
|
config.key
|
||||||
}&callback=init${ui.getName()}"></script>`
|
}&callback=init${ui.getName()}"></script>`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
googleApiLoaded() {
|
googleApiLoaded () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const $el = ui.$el;
|
const $el = ui.$el
|
||||||
const config = ui.config;
|
const config = ui.config
|
||||||
const $mapDiv = $el.find(".mapAPI-map");
|
const $mapDiv = $el.find('.mapAPI-map')
|
||||||
|
|
||||||
const zoom = config["mapZoom"] ? config["mapZoom"] : 10;
|
const zoom = config.mapZoom ? config.mapZoom : 10
|
||||||
const center = config["center"]
|
const center = config.center
|
||||||
? {
|
? {
|
||||||
lat: config["center"][1],
|
lat: config.center[1],
|
||||||
lng: config["center"][0],
|
lng: config.center[0],
|
||||||
}
|
}
|
||||||
: {
|
: {
|
||||||
lat: 0,
|
lat: 0,
|
||||||
lng: 0,
|
lng: 0,
|
||||||
};
|
}
|
||||||
const style = config["style"] ? config["style"] : null;
|
const style = config.style ? config.style : null
|
||||||
|
|
||||||
console.log(`${ui.getName()}: API is loaded`);
|
console.log(`${ui.getName()}: API is loaded`)
|
||||||
// init fontawesome icons
|
// init fontawesome icons
|
||||||
ui.MarkerUI = MarkerUI.init($);
|
ui.MarkerUI = MarkerUI.init($)
|
||||||
|
|
||||||
ui.map = new google.maps.Map($mapDiv[0], {
|
ui.map = new google.maps.Map($mapDiv[0], {
|
||||||
zoom,
|
zoom,
|
||||||
center,
|
center,
|
||||||
fullscreenControl: true,
|
fullscreenControl: true,
|
||||||
styles: style,
|
styles: style,
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.default_zoom = zoom;
|
ui.default_zoom = zoom
|
||||||
|
|
||||||
$mapDiv.addClass("mapboxgl-map");
|
$mapDiv.addClass('mapboxgl-map')
|
||||||
|
|
||||||
ui.popup = new ui.MarkerUI({
|
ui.popup = new ui.MarkerUI({
|
||||||
map: ui.map,
|
map: ui.map,
|
||||||
align: ["center", "top"],
|
align: ['center', 'top'],
|
||||||
divClass: "mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none",
|
divClass: 'mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none',
|
||||||
html:
|
html:
|
||||||
'<div class="mapboxgl-popup-tip"></div><div class="mapboxgl-popup-content">' +
|
'<div class="mapboxgl-popup-tip"></div><div class="mapboxgl-popup-content">' +
|
||||||
'<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' +
|
'<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' +
|
||||||
'<div class="html"></div>' +
|
'<div class="html"></div>' +
|
||||||
"</div>",
|
'</div>',
|
||||||
});
|
})
|
||||||
ui.popup.setMap(ui.map);
|
ui.popup.setMap(ui.map)
|
||||||
|
|
||||||
ui.geocoder = new google.maps.Geocoder();
|
ui.geocoder = new google.maps.Geocoder()
|
||||||
|
|
||||||
ui.cluster = new MarkerClusterer(ui.map, null, {
|
ui.cluster = new MarkerClusterer(ui.map, null, {
|
||||||
styles: [
|
styles: [
|
||||||
{
|
{
|
||||||
width: 30,
|
width: 30,
|
||||||
height: 30,
|
height: 30,
|
||||||
className: "mapboxgl-cluster",
|
className: 'mapboxgl-cluster',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.trigger(Events.MAPAPILOADED);
|
$el.trigger(Events.MAPAPILOADED)
|
||||||
}
|
}
|
||||||
|
|
||||||
addMarker(crds, config) {
|
addMarker (crds, config) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const pos = {
|
const pos = {
|
||||||
lat: crds[1],
|
lat: crds[1],
|
||||||
lng: crds[0],
|
lng: crds[0],
|
||||||
};
|
}
|
||||||
|
|
||||||
const marker = new ui.MarkerUI({
|
const marker = new ui.MarkerUI({
|
||||||
position: pos,
|
position: pos,
|
||||||
map: ui.map,
|
map: ui.map,
|
||||||
align: ["center", "top"],
|
align: ['center', 'top'],
|
||||||
html: `<div class="mapboxgl-marker"><div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div></div>`,
|
html: `<div class="mapboxgl-marker"><div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div></div>`,
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
const $el = $(`#Marker${config["id"]}`);
|
const $el = $(`#Marker${config.id}`)
|
||||||
ui.showPopup(pos, config["content"]);
|
ui.showPopup(pos, config.content)
|
||||||
|
|
||||||
$el.trigger(Events.MAPMARKERCLICK);
|
$el.trigger(Events.MAPMARKERCLICK)
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.markers.push(marker);
|
ui.markers.push(marker)
|
||||||
|
|
||||||
ui.cluster.addMarker(marker);
|
ui.cluster.addMarker(marker)
|
||||||
|
|
||||||
return marker;
|
return marker
|
||||||
}
|
}
|
||||||
|
|
||||||
showPopup(pos, content) {
|
showPopup (pos, content) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $popup = $(ui.popup.getDiv());
|
const $popup = $(ui.popup.getDiv())
|
||||||
|
|
||||||
if (ui.config["flyToMarker"]) {
|
if (ui.config.flyToMarker) {
|
||||||
ui.map.setCenter(pos); // panTo
|
ui.map.setCenter(pos) // panTo
|
||||||
if (!ui.config["noZoom"]) {
|
if (!ui.config.noZoom) {
|
||||||
ui.map.setZoom(18);
|
ui.map.setZoom(18)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// keep it hidden to render content
|
// keep it hidden to render content
|
||||||
$popup.css({
|
$popup.css({
|
||||||
opacity: "0",
|
opacity: '0',
|
||||||
});
|
})
|
||||||
$popup.removeClass("d-none");
|
$popup.removeClass('d-none')
|
||||||
|
|
||||||
$popup.find(".mapboxgl-popup-content .html").html(content);
|
$popup.find('.mapboxgl-popup-content .html').html(content)
|
||||||
|
|
||||||
$popup.find(".mapboxgl-popup-close-button").on("click", (e) => {
|
$popup.find('.mapboxgl-popup-close-button').on('click', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
ui.hidePopup();
|
ui.hidePopup()
|
||||||
});
|
})
|
||||||
|
|
||||||
// set position when content was rendered
|
// set position when content was rendered
|
||||||
ui.popup.setPosition(pos, ["center", "top"]);
|
ui.popup.setPosition(pos, ['center', 'top'])
|
||||||
|
|
||||||
// display popup
|
// display popup
|
||||||
$popup.css({
|
$popup.css({
|
||||||
"margin-top": "-1rem",
|
'margin-top': '-1rem',
|
||||||
opacity: "1",
|
opacity: '1',
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
hidePopup() {
|
hidePopup () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
const $popup = $(ui.popup.getDiv());
|
const $popup = $(ui.popup.getDiv())
|
||||||
|
|
||||||
$popup.addClass("d-none");
|
$popup.addClass('d-none')
|
||||||
if (!ui.config["noRestoreBounds"] || ui.config["flyToBounds"]) {
|
if (!ui.config.noRestoreBounds || ui.config.flyToBounds) {
|
||||||
ui.restoreBounds();
|
ui.restoreBounds()
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.$el.trigger(Events.MAPPOPUPCLOSE);
|
ui.$el.trigger(Events.MAPPOPUPCLOSE)
|
||||||
}
|
}
|
||||||
|
|
||||||
geocode(addr, callback) {
|
geocode (addr, callback) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.geocoder.geocode(
|
ui.geocoder.geocode(
|
||||||
{
|
{
|
||||||
address: addr,
|
address: addr,
|
||||||
},
|
},
|
||||||
(results, status) => {
|
(results, status) => {
|
||||||
if (status === "OK") {
|
if (status === 'OK') {
|
||||||
//results[0].geometry.location;
|
// results[0].geometry.location;
|
||||||
|
|
||||||
if (typeof callback === "function") {
|
if (typeof callback === 'function') {
|
||||||
callback(results);
|
callback(results)
|
||||||
}
|
}
|
||||||
|
|
||||||
return results;
|
return results
|
||||||
} else {
|
} else {
|
||||||
console.error(
|
console.error(
|
||||||
`${ui.getName()}: Geocode was not successful for the following reason: ${status}`
|
`${ui.getName()}: Geocode was not successful for the following reason: ${status}`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
reverseGeocode(latLng, callback) {
|
reverseGeocode (latLng, callback) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.geocoder.geocode(
|
ui.geocoder.geocode(
|
||||||
{
|
{
|
||||||
location: latlng,
|
location: latlng,
|
||||||
},
|
},
|
||||||
(results, status) => {
|
(results, status) => {
|
||||||
if (status === "OK") {
|
if (status === 'OK') {
|
||||||
//results[0].formatted_address;
|
// results[0].formatted_address;
|
||||||
|
|
||||||
if (typeof callback === "function") {
|
if (typeof callback === 'function') {
|
||||||
callback(results);
|
callback(results)
|
||||||
}
|
}
|
||||||
|
|
||||||
return results;
|
return results
|
||||||
} else {
|
} else {
|
||||||
console.error(
|
console.error(
|
||||||
`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
|
`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
addGeoJson(config) {
|
addGeoJson (config) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
const firstMarker = config["geojson"].features[0].geometry.coordinates;
|
const firstMarker = config.geojson.features[0].geometry.coordinates
|
||||||
//Map.setCenter(firstMarker);
|
// Map.setCenter(firstMarker);
|
||||||
const bounds = new google.maps.LatLngBounds();
|
const bounds = new google.maps.LatLngBounds()
|
||||||
|
|
||||||
// add markers to map
|
// add markers to map
|
||||||
config["geojson"].features.forEach((marker) => {
|
config.geojson.features.forEach((marker) => {
|
||||||
const id = marker.id;
|
const id = marker.id
|
||||||
const crds = marker.geometry.coordinates;
|
const crds = marker.geometry.coordinates
|
||||||
const content = marker.properties.content;
|
const content = marker.properties.content
|
||||||
|
|
||||||
ui.addMarker(crds, {
|
ui.addMarker(crds, {
|
||||||
id,
|
id,
|
||||||
content,
|
content,
|
||||||
icon: marker.icon,
|
icon: marker.icon,
|
||||||
flyToMarker: config["flyToMarker"],
|
flyToMarker: config.flyToMarker,
|
||||||
});
|
})
|
||||||
|
|
||||||
bounds.extend({
|
bounds.extend({
|
||||||
lat: crds[1],
|
lat: crds[1],
|
||||||
lng: crds[0],
|
lng: crds[0],
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
if (ui.markers.length > 1) {
|
if (ui.markers.length > 1) {
|
||||||
ui.map.fitBounds(bounds, {
|
ui.map.fitBounds(bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
}); //panToBounds
|
}) // panToBounds
|
||||||
} else if (ui.markers[0]) {
|
} else if (ui.markers[0]) {
|
||||||
ui.map.setCenter(ui.markers[0].getPosition());
|
ui.map.setCenter(ui.markers[0].getPosition())
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.default_bounds = bounds;
|
ui.default_bounds = bounds
|
||||||
ui.default_zoom = ui.map.getZoom();
|
ui.default_zoom = ui.map.getZoom()
|
||||||
}
|
}
|
||||||
|
|
||||||
getMap() {
|
getMap () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.map;
|
return ui.map
|
||||||
}
|
}
|
||||||
|
|
||||||
getPopup() {
|
getPopup () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.popup;
|
return ui.popup
|
||||||
}
|
}
|
||||||
|
|
||||||
restoreBounds() {
|
restoreBounds () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
if (ui.default_bounds && ui.markers.length > 1) {
|
if (ui.default_bounds && ui.markers.length > 1) {
|
||||||
ui.map.fitBounds(ui.default_bounds, {
|
ui.map.fitBounds(ui.default_bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
}); //panToBounds
|
}) // panToBounds
|
||||||
} else {
|
} else {
|
||||||
if (ui.markers[0]) {
|
if (ui.markers[0]) {
|
||||||
ui.map.setCenter(ui.markers[0].getPosition());
|
ui.map.setCenter(ui.markers[0].getPosition())
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.restoreZoom();
|
ui.restoreZoom()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
restoreZoom() {
|
restoreZoom () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.map.setZoom(ui.default_zoom);
|
ui.map.setZoom(ui.default_zoom)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return GoogleMapsDriver;
|
return GoogleMapsDriver
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default GoogleMapsDriver;
|
export default GoogleMapsDriver
|
||||||
|
|
|
||||||
|
|
@ -1,228 +1,227 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
const Obj = {
|
const Obj = {
|
||||||
init: () => {
|
init: () => {
|
||||||
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
|
class GoogleMapsHtmlOverlay extends google.maps.OverlayView {
|
||||||
constructor(options) {
|
constructor (options) {
|
||||||
super();
|
super()
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
ui.ownerMap = options.map;
|
ui.ownerMap = options.map
|
||||||
//ui.setMap(options.map);
|
// ui.setMap(options.map);
|
||||||
ui.position = options.position;
|
ui.position = options.position
|
||||||
ui.html = options.html
|
ui.html = options.html
|
||||||
? options.html
|
? options.html
|
||||||
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>';
|
: '<div class="mapboxgl-marker"><i class="marker-icon fas fa-map-marker-alt"></i></div>'
|
||||||
ui.divClass = options.divClass;
|
ui.divClass = options.divClass
|
||||||
ui.align = options.align;
|
ui.align = options.align
|
||||||
ui.isDebugMode = options.debug;
|
ui.isDebugMode = options.debug
|
||||||
ui.onClick = options.onClick;
|
ui.onClick = options.onClick
|
||||||
ui.onMouseOver = options.onMouseOver;
|
ui.onMouseOver = options.onMouseOver
|
||||||
|
|
||||||
ui.isBoolean = (arg) => {
|
ui.isBoolean = (arg) => {
|
||||||
if (typeof arg === "boolean") {
|
if (typeof arg === 'boolean') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isNotUndefined = (arg) => {
|
ui.isNotUndefined = (arg) => {
|
||||||
if (typeof arg !== "undefined") {
|
if (typeof arg !== 'undefined') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.hasContent = (arg) => {
|
ui.hasContent = (arg) => {
|
||||||
if (arg.length > 0) {
|
if (arg.length > 0) {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isString = (arg) => {
|
ui.isString = (arg) => {
|
||||||
if (typeof arg === "string") {
|
if (typeof arg === 'string') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
ui.isFunction = (arg) => {
|
ui.isFunction = (arg) => {
|
||||||
if (typeof arg === "function") {
|
if (typeof arg === 'function') {
|
||||||
return true;
|
return true
|
||||||
} else {
|
} else {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
onAdd() {
|
|
||||||
const ui = this;
|
onAdd () {
|
||||||
|
const ui = this
|
||||||
|
|
||||||
// Create div element.
|
// Create div element.
|
||||||
ui.div = document.createElement("div");
|
ui.div = document.createElement('div')
|
||||||
ui.div.style.position = "absolute";
|
ui.div.style.position = 'absolute'
|
||||||
|
|
||||||
// Validate and set custom div class
|
// Validate and set custom div class
|
||||||
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass))
|
if (ui.isNotUndefined(ui.divClass) && ui.hasContent(ui.divClass)) { ui.div.className = ui.divClass }
|
||||||
ui.div.className = ui.divClass;
|
|
||||||
|
|
||||||
// Validate and set custom HTML
|
// Validate and set custom HTML
|
||||||
if (
|
if (
|
||||||
ui.isNotUndefined(ui.html) &&
|
ui.isNotUndefined(ui.html) &&
|
||||||
ui.hasContent(ui.html) &&
|
ui.hasContent(ui.html) &&
|
||||||
ui.isString(ui.html)
|
ui.isString(ui.html)
|
||||||
)
|
) { ui.div.innerHTML = ui.html }
|
||||||
ui.div.innerHTML = ui.html;
|
|
||||||
|
|
||||||
// If debug mode is enabled custom content will be replaced with debug content
|
// If debug mode is enabled custom content will be replaced with debug content
|
||||||
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
|
if (ui.isBoolean(ui.isDebugMode) && ui.isDebugMode) {
|
||||||
ui.div.className = "debug-mode";
|
ui.div.className = 'debug-mode'
|
||||||
ui.div.innerHTML =
|
ui.div.innerHTML =
|
||||||
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
|
'<div style="height: 10px; width: 10px; background: red; border-radius: 100%;"></div>' +
|
||||||
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>';
|
'<div style="position: absolute; top: 5px; padding: 5px; width: 130px; text-align: center; font-size: 18px; text-transform: uppercase; font-weight: bolder; background: red; color: white; font-family: Arial;">Debug mode</div>'
|
||||||
ui.div.setAttribute(
|
ui.div.setAttribute(
|
||||||
"style",
|
'style',
|
||||||
"position: absolute;" +
|
'position: absolute;' +
|
||||||
"border: 5px dashed red;" +
|
'border: 5px dashed red;' +
|
||||||
"height: 150px;" +
|
'height: 150px;' +
|
||||||
"width: 150px;" +
|
'width: 150px;' +
|
||||||
"display: flex;" +
|
'display: flex;' +
|
||||||
"justify-content: center;" +
|
'justify-content: center;' +
|
||||||
"align-items: center;"
|
'align-items: center;'
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add element to clickable layer
|
// Add element to clickable layer
|
||||||
ui.getPanes().overlayMouseTarget.appendChild(ui.div);
|
ui.getPanes().overlayMouseTarget.appendChild(ui.div)
|
||||||
|
|
||||||
// Add listeners to the element.
|
// Add listeners to the element.
|
||||||
google.maps.event.addDomListener(ui.div, "click", (event) => {
|
google.maps.event.addDomListener(ui.div, 'click', (event) => {
|
||||||
google.maps.event.trigger(ui, "click");
|
google.maps.event.trigger(ui, 'click')
|
||||||
if (ui.isFunction(ui.onClick)) ui.onClick();
|
if (ui.isFunction(ui.onClick)) ui.onClick()
|
||||||
event.stopPropagation();
|
event.stopPropagation()
|
||||||
});
|
})
|
||||||
|
|
||||||
google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
|
google.maps.event.addDomListener(ui.div, 'mouseover', (event) => {
|
||||||
google.maps.event.trigger(ui, "mouseover");
|
google.maps.event.trigger(ui, 'mouseover')
|
||||||
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
|
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver()
|
||||||
event.stopPropagation();
|
event.stopPropagation()
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
draw() {
|
draw () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
let $div = $(ui.div).find(
|
let $div = $(ui.div).find(
|
||||||
".mapboxgl-marker,.marker-pin,.mapboxgl-popup,.popup"
|
'.mapboxgl-marker,.marker-pin,.mapboxgl-popup,.popup'
|
||||||
);
|
)
|
||||||
if (!$div.length) {
|
if (!$div.length) {
|
||||||
$div = $(ui.div);
|
$div = $(ui.div)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate position of div
|
// Calculate position of div
|
||||||
const projection = ui.getProjection();
|
const projection = ui.getProjection()
|
||||||
|
|
||||||
if (!projection) {
|
if (!projection) {
|
||||||
console.log("GoogleMapsHtmlOverlay: current map is missing");
|
console.log('GoogleMapsHtmlOverlay: current map is missing')
|
||||||
return null;
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
const positionInPixels = projection.fromLatLngToDivPixel(
|
const positionInPixels = projection.fromLatLngToDivPixel(
|
||||||
ui.getPosition()
|
ui.getPosition()
|
||||||
);
|
)
|
||||||
|
|
||||||
// Align HTML overlay relative to original position
|
// Align HTML overlay relative to original position
|
||||||
const offset = {
|
const offset = {
|
||||||
y: undefined,
|
y: undefined,
|
||||||
x: undefined,
|
x: undefined,
|
||||||
};
|
}
|
||||||
const divWidth = $div.outerWidth();
|
const divWidth = $div.outerWidth()
|
||||||
const divHeight = $div.outerHeight();
|
const divHeight = $div.outerHeight()
|
||||||
|
|
||||||
switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
|
switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
|
||||||
case "left top":
|
case 'left top':
|
||||||
offset.y = divHeight;
|
offset.y = divHeight
|
||||||
offset.x = divWidth;
|
offset.x = divWidth
|
||||||
break;
|
break
|
||||||
case "left center":
|
case 'left center':
|
||||||
offset.y = divHeight / 2;
|
offset.y = divHeight / 2
|
||||||
offset.x = divWidth;
|
offset.x = divWidth
|
||||||
break;
|
break
|
||||||
case "left bottom":
|
case 'left bottom':
|
||||||
offset.y = 0;
|
offset.y = 0
|
||||||
offset.x = divWidth;
|
offset.x = divWidth
|
||||||
break;
|
break
|
||||||
case "center top":
|
case 'center top':
|
||||||
offset.y = divHeight;
|
offset.y = divHeight
|
||||||
offset.x = divWidth / 2;
|
offset.x = divWidth / 2
|
||||||
break;
|
break
|
||||||
case "center center":
|
case 'center center':
|
||||||
offset.y = divHeight / 2;
|
offset.y = divHeight / 2
|
||||||
offset.x = divWidth / 2;
|
offset.x = divWidth / 2
|
||||||
break;
|
break
|
||||||
case "center bottom":
|
case 'center bottom':
|
||||||
offset.y = 0;
|
offset.y = 0
|
||||||
offset.x = divWidth / 2;
|
offset.x = divWidth / 2
|
||||||
break;
|
break
|
||||||
case "right top":
|
case 'right top':
|
||||||
offset.y = divHeight;
|
offset.y = divHeight
|
||||||
offset.x = 0;
|
offset.x = 0
|
||||||
break;
|
break
|
||||||
case "right center":
|
case 'right center':
|
||||||
offset.y = divHeight / 2;
|
offset.y = divHeight / 2
|
||||||
offset.x = 0;
|
offset.x = 0
|
||||||
break;
|
break
|
||||||
case "right bottom":
|
case 'right bottom':
|
||||||
offset.y = 0;
|
offset.y = 0
|
||||||
offset.x = 0;
|
offset.x = 0
|
||||||
break;
|
break
|
||||||
default:
|
default:
|
||||||
offset.y = divHeight / 2;
|
offset.y = divHeight / 2
|
||||||
offset.x = divWidth / 2;
|
offset.x = divWidth / 2
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set position
|
// Set position
|
||||||
ui.div.style.top = `${positionInPixels.y - offset.y}px`;
|
ui.div.style.top = `${positionInPixels.y - offset.y}px`
|
||||||
ui.div.style.left = `${positionInPixels.x - offset.x}px`;
|
ui.div.style.left = `${positionInPixels.x - offset.x}px`
|
||||||
}
|
}
|
||||||
|
|
||||||
getPosition() {
|
getPosition () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return new google.maps.LatLng(ui.position);
|
return new google.maps.LatLng(ui.position)
|
||||||
}
|
}
|
||||||
|
|
||||||
getDiv() {
|
getDiv () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.div;
|
return ui.div
|
||||||
}
|
}
|
||||||
|
|
||||||
setPosition(position, align) {
|
setPosition (position, align) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.position = position;
|
ui.position = position
|
||||||
ui.align = align;
|
ui.align = align
|
||||||
ui.draw();
|
ui.draw()
|
||||||
}
|
}
|
||||||
|
|
||||||
remove() {
|
remove () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.setMap(null);
|
ui.setMap(null)
|
||||||
ui.div.remove();
|
ui.div.remove()
|
||||||
}
|
}
|
||||||
|
|
||||||
// emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus)
|
// emulate google.maps.Marker functionality for compatibility (for example with @googlemaps/markerclustererplus)
|
||||||
getDraggable() {
|
getDraggable () {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return GoogleMapsHtmlOverlay;
|
return GoogleMapsHtmlOverlay
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|
||||||
export default Obj;
|
export default Obj
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,40 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import mapBoxGL from "mapbox-gl";
|
import mapBoxGL from 'mapbox-gl'
|
||||||
|
|
||||||
import Events from "../../_events";
|
import Events from '../../_events'
|
||||||
|
|
||||||
const MapBoxDriver = (($) => {
|
const MapBoxDriver = (($) => {
|
||||||
class MapBoxDriver {
|
class MapBoxDriver {
|
||||||
getName() {
|
getName () {
|
||||||
return "MapBoxDriver";
|
return 'MapBoxDriver'
|
||||||
}
|
}
|
||||||
|
|
||||||
init($el, config = []) {
|
init ($el, config = []) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
mapBoxGL.accessToken = config["key"];
|
mapBoxGL.accessToken = config.key
|
||||||
|
|
||||||
ui.map = new mapBoxGL.Map({
|
ui.map = new mapBoxGL.Map({
|
||||||
container: $el.find(".mapAPI-map")[0],
|
container: $el.find('.mapAPI-map')[0],
|
||||||
center: config["center"] ? config["center"] : [0, 0],
|
center: config.center ? config.center : [0, 0],
|
||||||
//hash: true,
|
// hash: true,
|
||||||
style: config["style"]
|
style: config.style
|
||||||
? config["style"]
|
? config.style
|
||||||
: "mapbox://styles/mapbox/streets-v9",
|
: 'mapbox://styles/mapbox/streets-v9',
|
||||||
localIdeographFontFamily: config["font-family"],
|
localIdeographFontFamily: config['font-family'],
|
||||||
zoom: config["mapZoom"] ? config["mapZoom"] : 10,
|
zoom: config.mapZoom ? config.mapZoom : 10,
|
||||||
attributionControl: false,
|
attributionControl: false,
|
||||||
antialias: true,
|
antialias: true,
|
||||||
accessToken: config["key"],
|
accessToken: config.key,
|
||||||
})
|
})
|
||||||
.addControl(
|
.addControl(
|
||||||
new mapBoxGL.AttributionControl({
|
new mapBoxGL.AttributionControl({
|
||||||
compact: true,
|
compact: true,
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.addControl(new mapBoxGL.NavigationControl(), "top-right")
|
.addControl(new mapBoxGL.NavigationControl(), 'top-right')
|
||||||
.addControl(
|
.addControl(
|
||||||
new mapBoxGL.GeolocateControl({
|
new mapBoxGL.GeolocateControl({
|
||||||
positionOptions: {
|
positionOptions: {
|
||||||
|
|
@ -42,58 +42,58 @@ const MapBoxDriver = (($) => {
|
||||||
},
|
},
|
||||||
trackUserLocation: true,
|
trackUserLocation: true,
|
||||||
}),
|
}),
|
||||||
"bottom-right"
|
'bottom-right'
|
||||||
)
|
)
|
||||||
.addControl(
|
.addControl(
|
||||||
new mapBoxGL.ScaleControl({
|
new mapBoxGL.ScaleControl({
|
||||||
maxWidth: 80,
|
maxWidth: 80,
|
||||||
unit: "metric",
|
unit: 'metric',
|
||||||
}),
|
}),
|
||||||
"top-left"
|
'top-left'
|
||||||
)
|
)
|
||||||
.addControl(new mapBoxGL.FullscreenControl());
|
.addControl(new mapBoxGL.FullscreenControl())
|
||||||
|
|
||||||
ui.map.on("load", (e) => {
|
ui.map.on('load', (e) => {
|
||||||
$el.trigger(Events.MAPAPILOADED);
|
$el.trigger(Events.MAPAPILOADED)
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.popup = new mapBoxGL.Popup({
|
ui.popup = new mapBoxGL.Popup({
|
||||||
closeOnClick: false,
|
closeOnClick: false,
|
||||||
className: "popup",
|
className: 'popup',
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
addMarker(crds, config) {
|
addMarker (crds, config) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
|
|
||||||
// create a DOM el for the marker
|
// create a DOM el for the marker
|
||||||
const $el = $(
|
const $el = $(
|
||||||
`<div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div>`
|
`<div id="Marker${config.id}" data-id="${config.id}" class="marker">${config.icon}</div>`
|
||||||
);
|
)
|
||||||
|
|
||||||
$el.on("click", (e) => {
|
$el.on('click', (e) => {
|
||||||
ui.popup.setLngLat(crds).setHTML(config["content"]).addTo(ui.map);
|
ui.popup.setLngLat(crds).setHTML(config.content).addTo(ui.map)
|
||||||
|
|
||||||
if (config["flyToMarker"]) {
|
if (config.flyToMarker) {
|
||||||
ui.map.flyTo({
|
ui.map.flyTo({
|
||||||
center: crds,
|
center: crds,
|
||||||
zoom: 17,
|
zoom: 17,
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
$(e.currentTarget).trigger(Events.MAPMARKERCLICK);
|
$(e.currentTarget).trigger(Events.MAPMARKERCLICK)
|
||||||
});
|
})
|
||||||
|
|
||||||
// add marker to map
|
// add marker to map
|
||||||
const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map);
|
const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map)
|
||||||
|
|
||||||
return marker;
|
return marker
|
||||||
}
|
}
|
||||||
|
|
||||||
addGeoJson(config) {
|
addGeoJson (config) {
|
||||||
const ui = this;
|
const ui = this
|
||||||
// Insert the layer beneath any symbol layer.
|
// Insert the layer beneath any symbol layer.
|
||||||
/*if (config['3d']) {
|
/* if (config['3d']) {
|
||||||
const layers = Map.getStyle().layers;
|
const layers = Map.getStyle().layers;
|
||||||
let labelLayerId;
|
let labelLayerId;
|
||||||
for (let i = 0; i < layers.length; i++) {
|
for (let i = 0; i < layers.length; i++) {
|
||||||
|
|
@ -130,55 +130,55 @@ const MapBoxDriver = (($) => {
|
||||||
'fill-extrusion-opacity': .6,
|
'fill-extrusion-opacity': .6,
|
||||||
},
|
},
|
||||||
}, labelLayerId);
|
}, labelLayerId);
|
||||||
}*/
|
} */
|
||||||
|
|
||||||
const firstMarker = config["geojson"].features[0].geometry.coordinates;
|
const firstMarker = config.geojson.features[0].geometry.coordinates
|
||||||
//Map.setCenter(firstMarker);
|
// Map.setCenter(firstMarker);
|
||||||
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker);
|
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker)
|
||||||
|
|
||||||
// add markers to map
|
// add markers to map
|
||||||
config["geojson"].features.forEach((marker) => {
|
config.geojson.features.forEach((marker) => {
|
||||||
const id = marker.id;
|
const id = marker.id
|
||||||
const crds = marker.geometry.coordinates;
|
const crds = marker.geometry.coordinates
|
||||||
const content = marker.properties.content;
|
const content = marker.properties.content
|
||||||
|
|
||||||
ui.addMarker(crds, {
|
ui.addMarker(crds, {
|
||||||
id,
|
id,
|
||||||
content,
|
content,
|
||||||
icon: marker.icon,
|
icon: marker.icon,
|
||||||
flyToMarker: config["flyToMarker"],
|
flyToMarker: config.flyToMarker,
|
||||||
});
|
})
|
||||||
|
|
||||||
bounds.extend(crds);
|
bounds.extend(crds)
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.map.fitBounds(bounds, {
|
ui.map.fitBounds(bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
});
|
})
|
||||||
|
|
||||||
ui.popup.on("close", (e) => {
|
ui.popup.on('close', (e) => {
|
||||||
if (config["flyToBounds"]) {
|
if (config.flyToBounds) {
|
||||||
ui.map.fitBounds(bounds, {
|
ui.map.fitBounds(bounds, {
|
||||||
padding: 30,
|
padding: 30,
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE);
|
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
getMap() {
|
getMap () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.map;
|
return ui.map
|
||||||
}
|
}
|
||||||
|
|
||||||
getPopup() {
|
getPopup () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
return ui.popup;
|
return ui.popup
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return MapBoxDriver;
|
return MapBoxDriver
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default MapBoxDriver;
|
export default MapBoxDriver
|
||||||
|
|
|
||||||
|
|
@ -1,178 +1,178 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import mapbox from "mapbox-gl";
|
import mapbox from 'mapbox-gl'
|
||||||
|
|
||||||
window.offlineMaps = {};
|
window.offlineMaps = {}
|
||||||
|
|
||||||
window.offlineMaps.eventManager = {
|
window.offlineMaps.eventManager = {
|
||||||
_events: {},
|
_events: {},
|
||||||
|
|
||||||
on: function (event, action) {
|
on: function (event, action) {
|
||||||
console.log(`event.on: ${event}`);
|
console.log(`event.on: ${event}`)
|
||||||
if (!(event in this._events)) {
|
if (!(event in this._events)) {
|
||||||
this._events[event] = [];
|
this._events[event] = []
|
||||||
}
|
}
|
||||||
this._events[event].push(action);
|
this._events[event].push(action)
|
||||||
return this;
|
return this
|
||||||
},
|
},
|
||||||
|
|
||||||
off: function (event) {
|
off: function (event) {
|
||||||
console.log(`event.off: ${event}`);
|
console.log(`event.off: ${event}`)
|
||||||
delete this._events[event];
|
delete this._events[event]
|
||||||
return this;
|
return this
|
||||||
},
|
},
|
||||||
|
|
||||||
fire: function (event) {
|
fire: function (event) {
|
||||||
console.log(`event.fire: ${event}`);
|
console.log(`event.fire: ${event}`)
|
||||||
var events = this._events;
|
const events = this._events
|
||||||
if (event in events) {
|
if (event in events) {
|
||||||
var actions = events[event];
|
const actions = events[event]
|
||||||
var args = Array.prototype.slice.call(arguments, 1);
|
const args = Array.prototype.slice.call(arguments, 1)
|
||||||
for (var i = 0, l = actions.length; i < l; i++) {
|
for (let i = 0, l = actions.length; i < l; i++) {
|
||||||
var action = actions[i];
|
const action = actions[i]
|
||||||
if (action instanceof Function) {
|
if (action instanceof Function) {
|
||||||
action.apply(null, args);
|
action.apply(null, args)
|
||||||
} else {
|
} else {
|
||||||
this.fire.apply(this, [action].concat(args));
|
this.fire.apply(this, [action].concat(args))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return this;
|
return this
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
(function (window, emr, undefined) {
|
(function (window, emr, undefined) {
|
||||||
var getIndexedDBStorage = function () {
|
const getIndexedDBStorage = function () {
|
||||||
var indexedDB =
|
const indexedDB =
|
||||||
window.indexedDB ||
|
window.indexedDB ||
|
||||||
window.mozIndexedDB ||
|
window.mozIndexedDB ||
|
||||||
window.webkitIndexedDB ||
|
window.webkitIndexedDB ||
|
||||||
window.msIndexedDB;
|
window.msIndexedDB
|
||||||
|
|
||||||
var IndexedDBImpl = function () {
|
const IndexedDBImpl = function () {
|
||||||
var self = this;
|
const self = this
|
||||||
var db = null;
|
let db = null
|
||||||
var request = indexedDB.open("TileStorage");
|
const request = indexedDB.open('TileStorage')
|
||||||
|
|
||||||
request.onsuccess = function () {
|
request.onsuccess = function () {
|
||||||
db = this.result;
|
db = this.result
|
||||||
emr.fire("storageLoaded", self);
|
emr.fire('storageLoaded', self)
|
||||||
};
|
}
|
||||||
|
|
||||||
request.onerror = function (error) {
|
request.onerror = function (error) {
|
||||||
console.log(error);
|
console.log(error)
|
||||||
};
|
}
|
||||||
|
|
||||||
request.onupgradeneeded = function () {
|
request.onupgradeneeded = function () {
|
||||||
var store = this.result.createObjectStore("tile", { keyPath: "key" });
|
const store = this.result.createObjectStore('tile', { keyPath: 'key' })
|
||||||
store.createIndex("key", "key", { unique: true });
|
store.createIndex('key', 'key', { unique: true })
|
||||||
};
|
}
|
||||||
|
|
||||||
this.add = function (key, value) {
|
this.add = function (key, value) {
|
||||||
var transaction = db.transaction(["tile"], "readwrite");
|
const transaction = db.transaction(['tile'], 'readwrite')
|
||||||
var objectStore = transaction.objectStore("tile");
|
const objectStore = transaction.objectStore('tile')
|
||||||
objectStore.put({ key, value });
|
objectStore.put({ key, value })
|
||||||
};
|
}
|
||||||
|
|
||||||
this.delete = function (key) {
|
this.delete = function (key) {
|
||||||
var transaction = db.transaction(["tile"], "readwrite");
|
const transaction = db.transaction(['tile'], 'readwrite')
|
||||||
var objectStore = transaction.objectStore("tile");
|
const objectStore = transaction.objectStore('tile')
|
||||||
objectStore.delete(key);
|
objectStore.delete(key)
|
||||||
};
|
}
|
||||||
|
|
||||||
this.get = function (key, successCallback, errorCallback) {
|
this.get = function (key, successCallback, errorCallback) {
|
||||||
var transaction = db.transaction(["tile"], "readonly");
|
const transaction = db.transaction(['tile'], 'readonly')
|
||||||
var objectStore = transaction.objectStore("tile");
|
const objectStore = transaction.objectStore('tile')
|
||||||
var result = objectStore.get(key);
|
const result = objectStore.get(key)
|
||||||
result.onsuccess = function () {
|
result.onsuccess = function () {
|
||||||
successCallback(this.result ? this.result.value : undefined);
|
successCallback(this.result ? this.result.value : undefined)
|
||||||
};
|
}
|
||||||
result.onerror = errorCallback;
|
result.onerror = errorCallback
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
return indexedDB ? new IndexedDBImpl() : null;
|
return indexedDB ? new IndexedDBImpl() : null
|
||||||
};
|
}
|
||||||
|
|
||||||
var getWebSqlStorage = function () {
|
const getWebSqlStorage = function () {
|
||||||
var openDatabase = window.openDatabase;
|
const openDatabase = window.openDatabase
|
||||||
|
|
||||||
var WebSqlImpl = function () {
|
const WebSqlImpl = function () {
|
||||||
var self = this;
|
const self = this
|
||||||
var db = openDatabase(
|
const db = openDatabase(
|
||||||
"TileStorage",
|
'TileStorage',
|
||||||
"1.0",
|
'1.0',
|
||||||
"Tile Storage",
|
'Tile Storage',
|
||||||
5 * 1024 * 1024
|
5 * 1024 * 1024
|
||||||
);
|
)
|
||||||
db.transaction((tx) => {
|
db.transaction((tx) => {
|
||||||
tx.executeSql(
|
tx.executeSql(
|
||||||
"CREATE TABLE IF NOT EXISTS tile (key TEXT PRIMARY KEY, value TEXT)",
|
'CREATE TABLE IF NOT EXISTS tile (key TEXT PRIMARY KEY, value TEXT)',
|
||||||
[],
|
[],
|
||||||
() => {
|
() => {
|
||||||
emr.fire("storageLoaded", self);
|
emr.fire('storageLoaded', self)
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
});
|
})
|
||||||
|
|
||||||
this.add = function (key, value) {
|
this.add = function (key, value) {
|
||||||
db.transaction((tx) => {
|
db.transaction((tx) => {
|
||||||
tx.executeSql("INSERT INTO tile (key, value) VALUES (?, ?)", [
|
tx.executeSql('INSERT INTO tile (key, value) VALUES (?, ?)', [
|
||||||
key,
|
key,
|
||||||
value,
|
value,
|
||||||
]);
|
])
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
this.delete = function (key) {
|
this.delete = function (key) {
|
||||||
db.transaction((tx) => {
|
db.transaction((tx) => {
|
||||||
tx.executeSql("DELETE FROM tile WHERE key = ?", [key]);
|
tx.executeSql('DELETE FROM tile WHERE key = ?', [key])
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
this.get = function (key, successCallback, errorCallback) {
|
this.get = function (key, successCallback, errorCallback) {
|
||||||
db.transaction((tx) => {
|
db.transaction((tx) => {
|
||||||
tx.executeSql(
|
tx.executeSql(
|
||||||
"SELECT value FROM tile WHERE key = ?",
|
'SELECT value FROM tile WHERE key = ?',
|
||||||
[key],
|
[key],
|
||||||
(tx, result) => {
|
(tx, result) => {
|
||||||
successCallback(
|
successCallback(
|
||||||
result.rows.length ? result.rows.item(0).value : undefined
|
result.rows.length ? result.rows.item(0).value : undefined
|
||||||
);
|
)
|
||||||
},
|
},
|
||||||
errorCallback
|
errorCallback
|
||||||
);
|
)
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
};
|
|
||||||
|
|
||||||
return openDatabase ? new WebSqlImpl() : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
emr.on("storageLoad", () => {
|
|
||||||
var storage = getIndexedDBStorage() || getWebSqlStorage() || null;
|
|
||||||
if (!storage) {
|
|
||||||
emr.fire("storageLoaded", null);
|
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
return openDatabase ? new WebSqlImpl() : null
|
||||||
|
}
|
||||||
|
|
||||||
|
emr.on('storageLoad', () => {
|
||||||
|
const storage = getIndexedDBStorage() || getWebSqlStorage() || null
|
||||||
|
if (!storage) {
|
||||||
|
emr.fire('storageLoaded', null)
|
||||||
|
}
|
||||||
|
})
|
||||||
})(window, window.offlineMaps.eventManager);
|
})(window, window.offlineMaps.eventManager);
|
||||||
|
|
||||||
(function (window, emr, mapbox, MM, undefined) {
|
(function (window, emr, mapbox, MM, undefined) {
|
||||||
var StorageRequestManager = function (storage) {
|
const StorageRequestManager = function (storage) {
|
||||||
MM.RequestManager.apply(this, []);
|
MM.RequestManager.apply(this, [])
|
||||||
this._storage = storage;
|
this._storage = storage
|
||||||
};
|
}
|
||||||
|
|
||||||
StorageRequestManager.prototype._imageToDataUri = function (image) {
|
StorageRequestManager.prototype._imageToDataUri = function (image) {
|
||||||
var canvas = window.document.createElement("canvas");
|
const canvas = window.document.createElement('canvas')
|
||||||
canvas.width = image.width;
|
canvas.width = image.width
|
||||||
canvas.height = image.height;
|
canvas.height = image.height
|
||||||
|
|
||||||
var context = canvas.getContext("2d");
|
const context = canvas.getContext('2d')
|
||||||
context.drawImage(image, 0, 0);
|
context.drawImage(image, 0, 0)
|
||||||
|
|
||||||
return canvas.toDataURL("image/png");
|
return canvas.toDataURL('image/png')
|
||||||
};
|
}
|
||||||
|
|
||||||
StorageRequestManager.prototype._createTileImage = function (
|
StorageRequestManager.prototype._createTileImage = function (
|
||||||
id,
|
id,
|
||||||
|
|
@ -180,140 +180,140 @@ window.offlineMaps.eventManager = {
|
||||||
value,
|
value,
|
||||||
cache
|
cache
|
||||||
) {
|
) {
|
||||||
var img = window.document.createElement("img");
|
const img = window.document.createElement('img')
|
||||||
img.id = id;
|
img.id = id
|
||||||
img.style.position = "absolute";
|
img.style.position = 'absolute'
|
||||||
img.coord = coord;
|
img.coord = coord
|
||||||
this.loadingBay.appendChild(img);
|
this.loadingBay.appendChild(img)
|
||||||
if (cache) {
|
if (cache) {
|
||||||
img.onload = this.getLoadCompleteWithCache();
|
img.onload = this.getLoadCompleteWithCache()
|
||||||
img.crossOrigin = "Anonymous";
|
img.crossOrigin = 'Anonymous'
|
||||||
} else {
|
} else {
|
||||||
img.onload = this.getLoadComplete();
|
img.onload = this.getLoadComplete()
|
||||||
}
|
}
|
||||||
img.onerror = this.getLoadComplete();
|
img.onerror = this.getLoadComplete()
|
||||||
img.src = value;
|
img.src = value
|
||||||
};
|
}
|
||||||
|
|
||||||
StorageRequestManager.prototype._loadTile = function (id, coord, url) {
|
StorageRequestManager.prototype._loadTile = function (id, coord, url) {
|
||||||
var self = this;
|
const self = this
|
||||||
if (this._storage) {
|
if (this._storage) {
|
||||||
this._storage.get(
|
this._storage.get(
|
||||||
id,
|
id,
|
||||||
(value) => {
|
(value) => {
|
||||||
if (value) {
|
if (value) {
|
||||||
self._createTileImage(id, coord, value, false);
|
self._createTileImage(id, coord, value, false)
|
||||||
} else {
|
} else {
|
||||||
self._createTileImage(id, coord, url, true);
|
self._createTileImage(id, coord, url, true)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
() => {
|
() => {
|
||||||
self._createTileImage(id, coord, url, true);
|
self._createTileImage(id, coord, url, true)
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
} else {
|
} else {
|
||||||
self._createTileImage(id, coord, url, false);
|
self._createTileImage(id, coord, url, false)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
StorageRequestManager.prototype.processQueue = function (sortFunc) {
|
StorageRequestManager.prototype.processQueue = function (sortFunc) {
|
||||||
if (sortFunc && this.requestQueue.length > 8) {
|
if (sortFunc && this.requestQueue.length > 8) {
|
||||||
this.requestQueue.sort(sortFunc);
|
this.requestQueue.sort(sortFunc)
|
||||||
}
|
}
|
||||||
while (
|
while (
|
||||||
this.openRequestCount < this.maxOpenRequests &&
|
this.openRequestCount < this.maxOpenRequests &&
|
||||||
this.requestQueue.length > 0
|
this.requestQueue.length > 0
|
||||||
) {
|
) {
|
||||||
var request = this.requestQueue.pop();
|
let request = this.requestQueue.pop()
|
||||||
if (request) {
|
if (request) {
|
||||||
this.openRequestCount++;
|
this.openRequestCount++
|
||||||
this._loadTile(request.id, request.coord, request.url);
|
this._loadTile(request.id, request.coord, request.url)
|
||||||
request = request.id = request.coord = request.url = null;
|
request = request.id = request.coord = request.url = null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
StorageRequestManager.prototype.getLoadCompleteWithCache = function () {
|
StorageRequestManager.prototype.getLoadCompleteWithCache = function () {
|
||||||
if (!this._loadComplete) {
|
if (!this._loadComplete) {
|
||||||
var theManager = this;
|
const theManager = this
|
||||||
this._loadComplete = function (e) {
|
this._loadComplete = function (e) {
|
||||||
//e = e || window.event;
|
// e = e || window.event;
|
||||||
|
|
||||||
var img = e.srcElement || e.target;
|
const img = e.srcElement || e.target
|
||||||
img.onload = img.onerror = null;
|
img.onload = img.onerror = null
|
||||||
|
|
||||||
if (theManager._storage) {
|
if (theManager._storage) {
|
||||||
theManager._storage.add(this.id, theManager._imageToDataUri(this));
|
theManager._storage.add(this.id, theManager._imageToDataUri(this))
|
||||||
}
|
}
|
||||||
|
|
||||||
theManager.loadingBay.removeChild(img);
|
theManager.loadingBay.removeChild(img)
|
||||||
theManager.openRequestCount--;
|
theManager.openRequestCount--
|
||||||
delete theManager.requestsById[img.id];
|
delete theManager.requestsById[img.id]
|
||||||
|
|
||||||
if (
|
if (
|
||||||
e.type === "load" &&
|
e.type === 'load' &&
|
||||||
(img.complete || (img.readyState && img.readyState === "complete"))
|
(img.complete || (img.readyState && img.readyState === 'complete'))
|
||||||
) {
|
) {
|
||||||
theManager.dispatchCallback("requestcomplete", img);
|
theManager.dispatchCallback('requestcomplete', img)
|
||||||
} else {
|
} else {
|
||||||
theManager.dispatchCallback("requesterror", {
|
theManager.dispatchCallback('requesterror', {
|
||||||
element: img,
|
element: img,
|
||||||
url: `${img.src}`,
|
url: `${img.src}`,
|
||||||
});
|
})
|
||||||
img.src = null;
|
img.src = null
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(theManager.getProcessQueue(), 0);
|
setTimeout(theManager.getProcessQueue(), 0)
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
return this._loadComplete;
|
return this._loadComplete
|
||||||
};
|
}
|
||||||
|
|
||||||
MM.extend(StorageRequestManager, MM.RequestManager);
|
MM.extend(StorageRequestManager, MM.RequestManager)
|
||||||
|
|
||||||
var StorageLayer = function (provider, parent, name, storage) {
|
const StorageLayer = function (provider, parent, name, storage) {
|
||||||
this.parent = parent || document.createElement("div");
|
this.parent = parent || document.createElement('div')
|
||||||
this.parent.style.cssText =
|
this.parent.style.cssText =
|
||||||
"position: absolute; top: 0px; left: 0px;" +
|
'position: absolute; top: 0px; left: 0px;' +
|
||||||
"width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0";
|
'width: 100%; height: 100%; margin: 0; padding: 0; z-index: 0'
|
||||||
this.name = name;
|
this.name = name
|
||||||
this.levels = {};
|
this.levels = {}
|
||||||
this.requestManager = new StorageRequestManager(storage);
|
this.requestManager = new StorageRequestManager(storage)
|
||||||
this.requestManager.addCallback("requestcomplete", this.getTileComplete());
|
this.requestManager.addCallback('requestcomplete', this.getTileComplete())
|
||||||
this.requestManager.addCallback("requesterror", this.getTileError());
|
this.requestManager.addCallback('requesterror', this.getTileError())
|
||||||
if (provider) {
|
if (provider) {
|
||||||
this.setProvider(provider);
|
this.setProvider(provider)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
MM.extend(StorageLayer, MM.Layer);
|
MM.extend(StorageLayer, MM.Layer)
|
||||||
|
|
||||||
var StorageTemplatedLayer = function (template, subdomains, name, storage) {
|
const StorageTemplatedLayer = function (template, subdomains, name, storage) {
|
||||||
return new StorageLayer(
|
return new StorageLayer(
|
||||||
new MM.Template(template, subdomains),
|
new MM.Template(template, subdomains),
|
||||||
null,
|
null,
|
||||||
name,
|
name,
|
||||||
storage
|
storage
|
||||||
);
|
)
|
||||||
};
|
}
|
||||||
|
|
||||||
emr.on("mapLoad", (storage) => {
|
emr.on('mapLoad', (storage) => {
|
||||||
var map = mapbox.map("map");
|
const map = mapbox.map('map')
|
||||||
map.addLayer(
|
map.addLayer(
|
||||||
new StorageTemplatedLayer(
|
new StorageTemplatedLayer(
|
||||||
"http://{S}.tile.osm.org/{Z}/{X}/{Y}.png",
|
'http://{S}.tile.osm.org/{Z}/{X}/{Y}.png',
|
||||||
["a", "b", "c"],
|
['a', 'b', 'c'],
|
||||||
undefined,
|
undefined,
|
||||||
storage
|
storage
|
||||||
)
|
)
|
||||||
);
|
)
|
||||||
map.ui.zoomer.add();
|
map.ui.zoomer.add()
|
||||||
map.ui.zoombox.add();
|
map.ui.zoombox.add()
|
||||||
map.centerzoom({ lat: 53.902254, lon: 27.56185 }, 13);
|
map.centerzoom({ lat: 53.902254, lon: 27.56185 }, 13)
|
||||||
});
|
})
|
||||||
})(window, window.offlineMaps.eventManager, mapbox, MM);
|
})(window, window.offlineMaps.eventManager, mapbox, MM);
|
||||||
|
|
||||||
(function (emr) {
|
(function (emr) {
|
||||||
emr.on("storageLoaded", "mapLoad");
|
emr.on('storageLoaded', 'mapLoad')
|
||||||
emr.fire("storageLoad");
|
emr.fire('storageLoad')
|
||||||
})(window.offlineMaps.eventManager);
|
})(window.offlineMaps.eventManager)
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,13 @@
|
||||||
import Events from "../../_events";
|
import Events from '../../_events'
|
||||||
import Routie from "routie";
|
import Routie from 'routie'
|
||||||
|
|
||||||
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
Routie({
|
Routie({
|
||||||
navigation: function () {
|
navigation: function () {
|
||||||
$("#NavbarCollapse").addClass("in");
|
$('#NavbarCollapse').addClass('in')
|
||||||
},
|
},
|
||||||
"carousel:id:num": function (id, num) {
|
'carousel:id:num': function (id, num) {
|
||||||
$(`#Carousel${id}`).carousel(num);
|
$(`#Carousel${id}`).carousel(num)
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,12 @@
|
||||||
* Add your global events here
|
* Add your global events here
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import MAP_DRIVER from "./_components/drivers/_map.google";
|
import MAP_DRIVER from './_components/drivers/_map.google'
|
||||||
//import MAP_DRIVER from './_components/drivers/_map.mapbox';
|
// import MAP_DRIVER from './_components/drivers/_map.mapbox';
|
||||||
|
|
||||||
const CONSTS = {
|
const CONSTS = {
|
||||||
ENVS: ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"],
|
ENVS: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
|
||||||
MAP_DRIVER,
|
MAP_DRIVER,
|
||||||
};
|
}
|
||||||
|
|
||||||
export default CONSTS;
|
export default CONSTS
|
||||||
|
|
|
||||||
|
|
@ -3,41 +3,41 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
AJAX: "ajax-load",
|
AJAX: 'ajax-load',
|
||||||
AJAXMAIN: "ajax-main-load",
|
AJAXMAIN: 'ajax-main-load',
|
||||||
MAININIT: "main-init",
|
MAININIT: 'main-init',
|
||||||
TABHIDDEN: "tab-hidden",
|
TABHIDDEN: 'tab-hidden',
|
||||||
TABFOCUSED: "tab-focused",
|
TABFOCUSED: 'tab-focused',
|
||||||
OFFLINE: "offline",
|
OFFLINE: 'offline',
|
||||||
ONLINE: "online",
|
ONLINE: 'online',
|
||||||
BACKONLINE: "back-online",
|
BACKONLINE: 'back-online',
|
||||||
TOUCHENABLE: "touch-enabled",
|
TOUCHENABLE: 'touch-enabled',
|
||||||
TOUCHDISABLED: "touch-disabled",
|
TOUCHDISABLED: 'touch-disabled',
|
||||||
LOADED: "load",
|
LOADED: 'load',
|
||||||
SWIPELEFT: "swipeleft panleft",
|
SWIPELEFT: 'swipeleft panleft',
|
||||||
SWIPERIGHT: "swiperight panright",
|
SWIPERIGHT: 'swiperight panright',
|
||||||
ALLERTAPPEARED: "alert-appeared",
|
ALLERTAPPEARED: 'alert-appeared',
|
||||||
ALERTREMOVED: "alert-removed",
|
ALERTREMOVED: 'alert-removed',
|
||||||
LODEDANDREADY: "load-ready",
|
LODEDANDREADY: 'load-ready',
|
||||||
LAZYIMAGEREADY: "image-lazy-bg-loaded",
|
LAZYIMAGEREADY: 'image-lazy-bg-loaded',
|
||||||
LAZYIMAGESREADY: "images-lazy-loaded",
|
LAZYIMAGESREADY: 'images-lazy-loaded',
|
||||||
MAPLOADED: "map-loaded",
|
MAPLOADED: 'map-loaded',
|
||||||
MAPAPILOADED: "map-api-loaded",
|
MAPAPILOADED: 'map-api-loaded',
|
||||||
MAPMARKERCLICK: "map-marker-click",
|
MAPMARKERCLICK: 'map-marker-click',
|
||||||
MAPPOPUPCLOSE: "map-popup-close",
|
MAPPOPUPCLOSE: 'map-popup-close',
|
||||||
SCROLL: "scroll",
|
SCROLL: 'scroll',
|
||||||
RESIZE: "resize",
|
RESIZE: 'resize',
|
||||||
CAROUSEL_READY: "bs.carousel.ready",
|
CAROUSEL_READY: 'bs.carousel.ready',
|
||||||
SET_TARGET_UPDATE: "set-target-update",
|
SET_TARGET_UPDATE: 'set-target-update',
|
||||||
RESTORE_FIELD: "restore-field",
|
RESTORE_FIELD: 'restore-field',
|
||||||
FORM_INIT_BASICS: "form-basics",
|
FORM_INIT_BASICS: 'form-basics',
|
||||||
FORM_INIT_STEPPED: "form-init-stepped",
|
FORM_INIT_STEPPED: 'form-init-stepped',
|
||||||
FORM_INIT_VALIDATE: "form-init-validate",
|
FORM_INIT_VALIDATE: 'form-init-validate',
|
||||||
FORM_INIT_VALIDATE_FIELD: "form-init-validate-field",
|
FORM_INIT_VALIDATE_FIELD: 'form-init-validate-field',
|
||||||
FORM_INIT_STORAGE: "form-init-storage",
|
FORM_INIT_STORAGE: 'form-init-storage',
|
||||||
FORM_VALIDATION_FAILED: "form-validation-failed",
|
FORM_VALIDATION_FAILED: 'form-validation-failed',
|
||||||
FORM_STEPPED_NEW_STEP: "form-new-step",
|
FORM_STEPPED_NEW_STEP: 'form-new-step',
|
||||||
FORM_STEPPED_FIRST_STEP: "form-first-step",
|
FORM_STEPPED_FIRST_STEP: 'form-first-step',
|
||||||
FORM_STEPPED_LAST_STEP: "form-last-step",
|
FORM_STEPPED_LAST_STEP: 'form-last-step',
|
||||||
FORM_FIELDS: "input,textarea,select",
|
FORM_FIELDS: 'input,textarea,select',
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,68 +1,68 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Route side-wide events
|
* Route side-wide events
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const EventsUI = (($) => {
|
const EventsUI = (($) => {
|
||||||
const on = $.fn.on;
|
const on = $.fn.on
|
||||||
const off = $.fn.off;
|
const off = $.fn.off
|
||||||
|
|
||||||
// Constants
|
// Constants
|
||||||
const W = window;
|
const W = window
|
||||||
const $W = $(W);
|
const $W = $(W)
|
||||||
const D = document;
|
const D = document
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "EventsUI";
|
const NAME = 'EventsUI'
|
||||||
|
|
||||||
class EventsUI {
|
class EventsUI {
|
||||||
static process(el, args) {
|
static process (el, args) {
|
||||||
let modEl = el;
|
let modEl = el
|
||||||
const eventName = args[0];
|
const eventName = args[0]
|
||||||
const tagName = typeof el !== undefined ? $(el).prop("tagName") : null;
|
const tagName = typeof el !== undefined ? $(el).prop('tagName') : null
|
||||||
|
|
||||||
switch (tagName) {
|
switch (tagName) {
|
||||||
case "HTML":
|
case 'HTML':
|
||||||
case "BODY":
|
case 'BODY':
|
||||||
modEl = $W;
|
modEl = $W
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
return [modEl, args];
|
return [modEl, args]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// rewrite jQuery functions
|
// rewrite jQuery functions
|
||||||
$.fn.on = function () {
|
$.fn.on = function () {
|
||||||
const result = EventsUI.process(this, arguments);
|
const result = EventsUI.process(this, arguments)
|
||||||
return on.apply(...result);
|
return on.apply(...result)
|
||||||
};
|
}
|
||||||
|
|
||||||
$.fn.off = function () {
|
$.fn.off = function () {
|
||||||
const result = EventsUI.process(this, arguments);
|
const result = EventsUI.process(this, arguments)
|
||||||
return off.apply(...result);
|
return off.apply(...result)
|
||||||
};
|
}
|
||||||
|
|
||||||
const scrollTop = $.fn.scrollTop;
|
const scrollTop = $.fn.scrollTop
|
||||||
// rewrite scrollTop
|
// rewrite scrollTop
|
||||||
$.fn.scrollTop = function () {
|
$.fn.scrollTop = function () {
|
||||||
let el = this;
|
let el = this
|
||||||
const args = arguments;
|
const args = arguments
|
||||||
|
|
||||||
const tagName = typeof el !== undefined ? $(el).prop("tagName") : null;
|
const tagName = typeof el !== undefined ? $(el).prop('tagName') : null
|
||||||
|
|
||||||
switch (tagName) {
|
switch (tagName) {
|
||||||
case "HTML":
|
case 'HTML':
|
||||||
case "BODY":
|
case 'BODY':
|
||||||
el = $W;
|
el = $W
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
return scrollTop.apply(el, args);
|
return scrollTop.apply(el, args)
|
||||||
};
|
}
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default EventsUI;
|
export default EventsUI
|
||||||
|
|
|
||||||
|
|
@ -1,61 +1,61 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "./_events";
|
import Events from './_events'
|
||||||
|
|
||||||
const LayoutUI = (($) => {
|
const LayoutUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "LayoutUI";
|
const NAME = 'LayoutUI'
|
||||||
|
|
||||||
const datepickerOptions = {
|
const datepickerOptions = {
|
||||||
autoclose: true,
|
autoclose: true,
|
||||||
startDate: 0,
|
startDate: 0,
|
||||||
//todayBtn: true,
|
// todayBtn: true,
|
||||||
todayHighlight: true,
|
todayHighlight: true,
|
||||||
clearBtn: true,
|
clearBtn: true,
|
||||||
};
|
}
|
||||||
|
|
||||||
class LayoutUI {
|
class LayoutUI {
|
||||||
static init() {
|
static init () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
console.log(`Initializing: ${NAME}`);
|
console.log(`Initializing: ${NAME}`)
|
||||||
// your custom UI
|
// your custom UI
|
||||||
|
|
||||||
// Custom fonts
|
// Custom fonts
|
||||||
$Body.append(
|
$Body.append(
|
||||||
'<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet">'
|
'<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet">'
|
||||||
);
|
)
|
||||||
|
|
||||||
/*google analytics */
|
/* google analytics */
|
||||||
|
|
||||||
/*$.getScript('https://www.google-analytics.com/analytics.js', () => {
|
/* $.getScript('https://www.google-analytics.com/analytics.js', () => {
|
||||||
ga('create', 'UA-********-*', 'auto');
|
ga('create', 'UA-********-*', 'auto');
|
||||||
ga('send', 'pageview');
|
ga('send', 'pageview');
|
||||||
});*/
|
}); */
|
||||||
|
|
||||||
// Fire further js when layout is ready
|
// Fire further js when layout is ready
|
||||||
$(W).trigger(Events.LODEDANDREADY);
|
$(W).trigger(Events.LODEDANDREADY)
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`Destroying: ${NAME}`);
|
console.log(`Destroying: ${NAME}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
LayoutUI.init();
|
LayoutUI.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
W.LayoutUI = LayoutUI;
|
W.LayoutUI = LayoutUI
|
||||||
|
|
||||||
return LayoutUI;
|
return LayoutUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default LayoutUI;
|
export default LayoutUI
|
||||||
|
|
|
||||||
|
|
@ -1,287 +1,287 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
|
|
||||||
import Events from "./_events";
|
import Events from './_events'
|
||||||
import Consts from "./_consts";
|
import Consts from './_consts'
|
||||||
|
|
||||||
import EventsRouter from "./_events.router";
|
import EventsRouter from './_events.router'
|
||||||
import Spinner from "./_components/_ui.spinner";
|
import Spinner from './_components/_ui.spinner'
|
||||||
|
|
||||||
// AJAX functionality
|
// AJAX functionality
|
||||||
import AjaxUI from "./_components/_ui.ajax";
|
import AjaxUI from './_components/_ui.ajax'
|
||||||
|
|
||||||
import FormBasics from "./_components/_ui.form.basics";
|
import FormBasics from './_components/_ui.form.basics'
|
||||||
import HeaderUI from "./_components/_ui.header-footer";
|
import HeaderUI from './_components/_ui.header-footer'
|
||||||
|
|
||||||
import SmoothScroll from "smooth-scroll";
|
import SmoothScroll from 'smooth-scroll'
|
||||||
const smoothScroll = SmoothScroll();
|
const smoothScroll = SmoothScroll()
|
||||||
|
|
||||||
const MainUI = (($) => {
|
const MainUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const W = window;
|
const W = window
|
||||||
const $W = $(W);
|
const $W = $(W)
|
||||||
const D = document;
|
const D = document
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "MainUI";
|
const NAME = 'MainUI'
|
||||||
|
|
||||||
console.clear();
|
console.clear()
|
||||||
|
|
||||||
console.info(
|
console.info(
|
||||||
`%cUI Kit ${UINAME} ${UIVERSION}`,
|
`%cUI Kit ${UINAME} ${UIVERSION}`,
|
||||||
"color:yellow;font-size:14px"
|
'color:yellow;font-size:14px'
|
||||||
);
|
)
|
||||||
console.info(
|
console.info(
|
||||||
`%c${UIMetaNAME} ${UIMetaVersion}`,
|
`%c${UIMetaNAME} ${UIMetaVersion}`,
|
||||||
"color:yellow;font-size:12px"
|
'color:yellow;font-size:12px'
|
||||||
);
|
)
|
||||||
console.info(
|
console.info(
|
||||||
`%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`,
|
`%chttps://github.com/a2nt/webpack-bootstrap-ui-kit by ${UIAUTHOR}`,
|
||||||
"color:yellow;font-size:10px"
|
'color:yellow;font-size:10px'
|
||||||
);
|
)
|
||||||
|
|
||||||
console.groupCollapsed("Events");
|
console.groupCollapsed('Events')
|
||||||
Object.keys(Events).forEach((k) => {
|
Object.keys(Events).forEach((k) => {
|
||||||
console.info(`${k}: ${Events[k]}`);
|
console.info(`${k}: ${Events[k]}`)
|
||||||
});
|
})
|
||||||
console.groupEnd("Events");
|
console.groupEnd('Events')
|
||||||
|
|
||||||
console.groupCollapsed("Consts");
|
console.groupCollapsed('Consts')
|
||||||
Object.keys(Consts).forEach((k) => {
|
Object.keys(Consts).forEach((k) => {
|
||||||
console.info(`${k}: ${Consts[k]}`);
|
console.info(`${k}: ${Consts[k]}`)
|
||||||
});
|
})
|
||||||
console.groupEnd("Events");
|
console.groupEnd('Events')
|
||||||
|
|
||||||
console.groupCollapsed("Init");
|
console.groupCollapsed('Init')
|
||||||
console.time("init");
|
console.time('init')
|
||||||
$W.on(`${Events.LODEDANDREADY}`, () => {
|
$W.on(`${Events.LODEDANDREADY}`, () => {
|
||||||
console.groupEnd("Init");
|
console.groupEnd('Init')
|
||||||
console.timeEnd("init");
|
console.timeEnd('init')
|
||||||
|
|
||||||
console.time("Post-init");
|
console.time('Post-init')
|
||||||
console.groupCollapsed("Post-init");
|
console.groupCollapsed('Post-init')
|
||||||
});
|
})
|
||||||
|
|
||||||
// get browser locale
|
// get browser locale
|
||||||
//const Locale = $('html').attr('lang').substring(0, 2);
|
// const Locale = $('html').attr('lang').substring(0, 2);
|
||||||
|
|
||||||
const $AlertNotify = $("#AlertNotify");
|
const $AlertNotify = $('#AlertNotify')
|
||||||
const $SiteWideMessage = $("#SiteWideMessage");
|
const $SiteWideMessage = $('#SiteWideMessage')
|
||||||
|
|
||||||
// get browser window visibility preferences
|
// get browser window visibility preferences
|
||||||
// Opera 12.10, Firefox >=18, Chrome >=31, IE11
|
// Opera 12.10, Firefox >=18, Chrome >=31, IE11
|
||||||
const HiddenName = "hidden";
|
const HiddenName = 'hidden'
|
||||||
const VisibilityChangeEvent = "visibilitychange";
|
const VisibilityChangeEvent = 'visibilitychange'
|
||||||
|
|
||||||
// update visibility state
|
// update visibility state
|
||||||
D.addEventListener(VisibilityChangeEvent, () => {
|
D.addEventListener(VisibilityChangeEvent, () => {
|
||||||
if (D.visibilityState === HiddenName) {
|
if (D.visibilityState === HiddenName) {
|
||||||
console.log(`${NAME}: Tab: hidden`);
|
console.log(`${NAME}: Tab: hidden`)
|
||||||
$Body.addClass("is-hidden");
|
$Body.addClass('is-hidden')
|
||||||
$Body.trigger(Events.TABHIDDEN);
|
$Body.trigger(Events.TABHIDDEN)
|
||||||
$W.trigger(Events.TABHIDDEN);
|
$W.trigger(Events.TABHIDDEN)
|
||||||
} else {
|
} else {
|
||||||
console.log(`${NAME}: Tab: focused`);
|
console.log(`${NAME}: Tab: focused`)
|
||||||
$Body.removeClass("is-hidden");
|
$Body.removeClass('is-hidden')
|
||||||
$Body.trigger(Events.TABFOCUSED);
|
$Body.trigger(Events.TABFOCUSED)
|
||||||
$W.trigger(Events.TABFOCUSED);
|
$W.trigger(Events.TABFOCUSED)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
// session ping
|
// session ping
|
||||||
let pingInterval;
|
let pingInterval
|
||||||
let pingLock = false;
|
let pingLock = false
|
||||||
const sessionPing = () => {
|
const sessionPing = () => {
|
||||||
if (pingLock || $Body.hasClass("is-offline")) {
|
if (pingLock || $Body.hasClass('is-offline')) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(`${NAME}: session ping`);
|
console.log(`${NAME}: session ping`)
|
||||||
pingLock = true;
|
pingLock = true
|
||||||
$.ajax({
|
$.ajax({
|
||||||
sync: false,
|
sync: false,
|
||||||
async: true,
|
async: true,
|
||||||
cache: false,
|
cache: false,
|
||||||
url: "/Security/ping",
|
url: '/Security/ping',
|
||||||
global: false,
|
global: false,
|
||||||
type: "POST",
|
type: 'POST',
|
||||||
complete: (data, datastatus) => {
|
complete: (data, datastatus) => {
|
||||||
updateOnlineStatus();
|
updateOnlineStatus()
|
||||||
if (datastatus !== "success") {
|
if (datastatus !== 'success') {
|
||||||
console.warn(`${NAME}: ping failed`);
|
console.warn(`${NAME}: ping failed`)
|
||||||
|
|
||||||
clearInterval(pingInterval);
|
clearInterval(pingInterval)
|
||||||
pingInterval = null;
|
pingInterval = null
|
||||||
}
|
}
|
||||||
|
|
||||||
pingLock = false;
|
pingLock = false
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
// update online/offline state
|
// update online/offline state
|
||||||
let statusLock = false;
|
let statusLock = false
|
||||||
const updateOnlineStatus = () => {
|
const updateOnlineStatus = () => {
|
||||||
if (statusLock) {
|
if (statusLock) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
statusLock = true;
|
statusLock = true
|
||||||
|
|
||||||
if (typeof navigator.onLine === "undefined") {
|
if (typeof navigator.onLine === 'undefined') {
|
||||||
return false;
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!navigator.onLine) {
|
if (!navigator.onLine) {
|
||||||
console.log(`${NAME}: Offline`);
|
console.log(`${NAME}: Offline`)
|
||||||
|
|
||||||
clearInterval(pingInterval);
|
clearInterval(pingInterval)
|
||||||
pingInterval = null;
|
pingInterval = null
|
||||||
|
|
||||||
$Body.addClass("is-offline");
|
$Body.addClass('is-offline')
|
||||||
$Body.removeClass("is-online");
|
$Body.removeClass('is-online')
|
||||||
|
|
||||||
$Body.trigger(Events.OFFLINE);
|
$Body.trigger(Events.OFFLINE)
|
||||||
$W.trigger(Events.OFFLINE);
|
$W.trigger(Events.OFFLINE)
|
||||||
|
|
||||||
statusLock = false;
|
statusLock = false
|
||||||
return true;
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!pingInterval) {
|
if (!pingInterval) {
|
||||||
pingInterval = setInterval(sessionPing, 300000); // 5 min in ms
|
pingInterval = setInterval(sessionPing, 300000) // 5 min in ms
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($Body.hasClass("is-offline")) {
|
if ($Body.hasClass('is-offline')) {
|
||||||
sessionPing();
|
sessionPing()
|
||||||
|
|
||||||
console.log(`${NAME}: is back online`);
|
console.log(`${NAME}: is back online`)
|
||||||
$Body.trigger(Events.BACKONLINE);
|
$Body.trigger(Events.BACKONLINE)
|
||||||
} else {
|
} else {
|
||||||
console.log(`${NAME}: Online`);
|
console.log(`${NAME}: Online`)
|
||||||
}
|
}
|
||||||
|
|
||||||
$Body.addClass("is-online");
|
$Body.addClass('is-online')
|
||||||
$Body.removeClass("is-offline");
|
$Body.removeClass('is-offline')
|
||||||
|
|
||||||
$Body.trigger(Events.ONLINE);
|
$Body.trigger(Events.ONLINE)
|
||||||
$W.trigger(Events.ONLINE);
|
$W.trigger(Events.ONLINE)
|
||||||
|
|
||||||
statusLock = false;
|
statusLock = false
|
||||||
return true;
|
return true
|
||||||
};
|
}
|
||||||
|
|
||||||
W.addEventListener(
|
W.addEventListener(
|
||||||
`${Events.OFFLINE}`,
|
`${Events.OFFLINE}`,
|
||||||
() => {
|
() => {
|
||||||
updateOnlineStatus();
|
updateOnlineStatus()
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
)
|
||||||
|
|
||||||
W.addEventListener(
|
W.addEventListener(
|
||||||
`${Events.ONLINE}`,
|
`${Events.ONLINE}`,
|
||||||
() => {
|
() => {
|
||||||
updateOnlineStatus();
|
updateOnlineStatus()
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
)
|
||||||
|
|
||||||
$W.on(`${Events.LOADED} ${Events.AJAX}`, () => {
|
$W.on(`${Events.LOADED} ${Events.AJAX}`, () => {
|
||||||
updateOnlineStatus();
|
updateOnlineStatus()
|
||||||
});
|
})
|
||||||
|
|
||||||
// scrollTo
|
// scrollTo
|
||||||
const ScrollTo = (trigger, selector) => {
|
const ScrollTo = (trigger, selector) => {
|
||||||
smoothScroll.animateScroll(D.querySelector(selector), trigger, {
|
smoothScroll.animateScroll(D.querySelector(selector), trigger, {
|
||||||
speed: 500,
|
speed: 500,
|
||||||
offset: -20,
|
offset: -20,
|
||||||
//easing: 'easeInOutCubic',
|
// easing: 'easeInOutCubic',
|
||||||
// Callback API
|
// Callback API
|
||||||
//before: (anchor, toggle) => {}, // Callback to run before scroll
|
// before: (anchor, toggle) => {}, // Callback to run before scroll
|
||||||
//`after: (anchor, toggle) => {} // Callback to run after scroll
|
// `after: (anchor, toggle) => {} // Callback to run after scroll
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
|
|
||||||
W.URLDetails = {
|
W.URLDetails = {
|
||||||
base: $("base").attr("href"),
|
base: $('base').attr('href'),
|
||||||
relative: "/",
|
relative: '/',
|
||||||
hash: "",
|
hash: '',
|
||||||
};
|
}
|
||||||
|
|
||||||
let eventFired = false;
|
let eventFired = false
|
||||||
const setTouchScreen = (bool) => {
|
const setTouchScreen = (bool) => {
|
||||||
if (W.IsTouchScreen === bool || eventFired) {
|
if (W.IsTouchScreen === bool || eventFired) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
eventFired = true;
|
eventFired = true
|
||||||
|
|
||||||
W.IsTouchScreen = bool;
|
W.IsTouchScreen = bool
|
||||||
$.support.touch = W.IsTouchScreen;
|
$.support.touch = W.IsTouchScreen
|
||||||
|
|
||||||
if (bool) {
|
if (bool) {
|
||||||
console.log(`${NAME}: Touch screen enabled`);
|
console.log(`${NAME}: Touch screen enabled`)
|
||||||
$Body.trigger(Events.TOUCHENABLE);
|
$Body.trigger(Events.TOUCHENABLE)
|
||||||
$W.trigger(Events.TOUCHENABLE);
|
$W.trigger(Events.TOUCHENABLE)
|
||||||
} else {
|
} else {
|
||||||
console.log(`${NAME}: Touch screen disabled`);
|
console.log(`${NAME}: Touch screen disabled`)
|
||||||
$Body.trigger(Events.TOUCHDISABLED);
|
$Body.trigger(Events.TOUCHDISABLED)
|
||||||
$W.trigger(Events.TOUCHDISABLED);
|
$W.trigger(Events.TOUCHDISABLED)
|
||||||
}
|
}
|
||||||
|
|
||||||
// prevent firing touch and mouse events together
|
// prevent firing touch and mouse events together
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
eventFired = false;
|
eventFired = false
|
||||||
}, 200);
|
}, 200)
|
||||||
};
|
}
|
||||||
|
|
||||||
setTouchScreen("ontouchstart" in window || navigator.msMaxTouchPoints > 0);
|
setTouchScreen('ontouchstart' in window || navigator.msMaxTouchPoints > 0)
|
||||||
|
|
||||||
// disable touch on mouse events
|
// disable touch on mouse events
|
||||||
/*D.addEventListener('mousemove', () => {
|
/* D.addEventListener('mousemove', () => {
|
||||||
setTouchScreen(false);
|
setTouchScreen(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
D.addEventListener('mousedown', () => {
|
D.addEventListener('mousedown', () => {
|
||||||
setTouchScreen(false);
|
setTouchScreen(false);
|
||||||
});*/
|
}); */
|
||||||
|
|
||||||
// enable touch screen on touch events
|
// enable touch screen on touch events
|
||||||
D.addEventListener("touchmove", () => {
|
D.addEventListener('touchmove', () => {
|
||||||
setTouchScreen(true);
|
setTouchScreen(true)
|
||||||
});
|
})
|
||||||
D.addEventListener("touchstart", () => {
|
D.addEventListener('touchstart', () => {
|
||||||
setTouchScreen(true);
|
setTouchScreen(true)
|
||||||
});
|
})
|
||||||
|
|
||||||
class MainUI {
|
class MainUI {
|
||||||
// Static methods
|
// Static methods
|
||||||
|
|
||||||
static init() {
|
static init () {
|
||||||
const ui = this;
|
const ui = this
|
||||||
ui.dispose();
|
ui.dispose()
|
||||||
|
|
||||||
console.log(`${NAME}: init`);
|
console.log(`${NAME}: init`)
|
||||||
|
|
||||||
// update location details
|
// update location details
|
||||||
ui.updateLocation();
|
ui.updateLocation()
|
||||||
|
|
||||||
// mark available offline areas
|
// mark available offline areas
|
||||||
if ("caches" in W) {
|
if ('caches' in W) {
|
||||||
$("a.offline").addClass("offline-available");
|
$('a.offline').addClass('offline-available')
|
||||||
}
|
}
|
||||||
|
|
||||||
ui.loadImages();
|
ui.loadImages()
|
||||||
|
|
||||||
// detect bootstrap screen size
|
// detect bootstrap screen size
|
||||||
ui.detectBootstrapScreenSize();
|
ui.detectBootstrapScreenSize()
|
||||||
|
|
||||||
// mark external links
|
// mark external links
|
||||||
$('a.external,a[rel="external"]').attr("target", "_blank");
|
$('a.external,a[rel="external"]').attr('target', '_blank')
|
||||||
|
|
||||||
// show encoded emails
|
// show encoded emails
|
||||||
/*$(D).find('.obm').each(() => {
|
/* $(D).find('.obm').each(() => {
|
||||||
if ($(this).attr('data-val') !== undefined) {
|
if ($(this).attr('data-val') !== undefined) {
|
||||||
const email = $(this).attr('data-val').split('')
|
const email = $(this).attr('data-val').split('')
|
||||||
.reverse()
|
.reverse()
|
||||||
|
|
@ -300,351 +300,351 @@ const MainUI = (($) => {
|
||||||
$(this).attr('href', `mailto:${email}`);
|
$(this).attr('href', `mailto:${email}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});*/
|
}); */
|
||||||
//
|
//
|
||||||
|
|
||||||
// scroll links
|
// scroll links
|
||||||
$(".js-scrollTo").on("click", (e) => {
|
$('.js-scrollTo').on('click', (e) => {
|
||||||
console.log(`${NAME}: .js-scrollTo`);
|
console.log(`${NAME}: .js-scrollTo`)
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault()
|
||||||
const el = e.currentTarget;
|
const el = e.currentTarget
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
|
|
||||||
ScrollTo(el, $el.attr("data-target"));
|
ScrollTo(el, $el.attr('data-target'))
|
||||||
});
|
})
|
||||||
|
|
||||||
// load external fonts
|
// load external fonts
|
||||||
if ($("[data-extfont]").length) {
|
if ($('[data-extfont]').length) {
|
||||||
console.log(`${NAME}: loading external fonts [data-extfont]`);
|
console.log(`${NAME}: loading external fonts [data-extfont]`)
|
||||||
$.getScript(
|
$.getScript(
|
||||||
"//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js",
|
'//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js',
|
||||||
() => {
|
() => {
|
||||||
const fonts = [];
|
const fonts = []
|
||||||
|
|
||||||
$("[data-extfont]").each((i, el) => {
|
$('[data-extfont]').each((i, el) => {
|
||||||
fonts[i] = $(el).attr("data-extfont");
|
fonts[i] = $(el).attr('data-extfont')
|
||||||
});
|
})
|
||||||
|
|
||||||
W.WebFont.load({
|
W.WebFont.load({
|
||||||
google: {
|
google: {
|
||||||
families: fonts,
|
families: fonts,
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// data-set links
|
// data-set links
|
||||||
$("[data-set-target]").on("click", (e) => {
|
$('[data-set-target]').on('click', (e) => {
|
||||||
console.log(`${NAME}: [data-set-target]`);
|
console.log(`${NAME}: [data-set-target]`)
|
||||||
|
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
const $target = $($el.data("set-target"));
|
const $target = $($el.data('set-target'))
|
||||||
|
|
||||||
if (!$target.length) {
|
if (!$target.length) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
$target.each((i, targetEl) => {
|
$target.each((i, targetEl) => {
|
||||||
const $targetEl = $(targetEl);
|
const $targetEl = $(targetEl)
|
||||||
const tag = $targetEl.prop("tagName").toLowerCase();
|
const tag = $targetEl.prop('tagName').toLowerCase()
|
||||||
|
|
||||||
if (tag === "input" || tag === "select") {
|
if (tag === 'input' || tag === 'select') {
|
||||||
$targetEl.val($el.data("set-val"));
|
$targetEl.val($el.data('set-val'))
|
||||||
} else if (!$targetEl.hasClass("field")) {
|
} else if (!$targetEl.hasClass('field')) {
|
||||||
$targetEl.text($el.data("set-val"));
|
$targetEl.text($el.data('set-val'))
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
$el.trigger(Events.SET_TARGET_UPDATE);
|
$el.trigger(Events.SET_TARGET_UPDATE)
|
||||||
$target.closest("form").trigger(Events.SET_TARGET_UPDATE);
|
$target.closest('form').trigger(Events.SET_TARGET_UPDATE)
|
||||||
});
|
})
|
||||||
|
|
||||||
// emulate links
|
// emulate links
|
||||||
$(".a[data-href]").on("click", (e) => {
|
$('.a[data-href]').on('click', (e) => {
|
||||||
console.log(`${NAME}: js link processing .a[data-href]`);
|
console.log(`${NAME}: js link processing .a[data-href]`)
|
||||||
|
|
||||||
const $el = $(e.currentTarget);
|
const $el = $(e.currentTarget)
|
||||||
const href = $el.data("href");
|
const href = $el.data('href')
|
||||||
if (!href.length) {
|
if (!href.length) {
|
||||||
console.warn(`${NAME}: .a[data-href] | Missing data-href`);
|
console.warn(`${NAME}: .a[data-href] | Missing data-href`)
|
||||||
console.warn($el);
|
console.warn($el)
|
||||||
}
|
}
|
||||||
|
|
||||||
W.location.assign(href);
|
W.location.assign(href)
|
||||||
});
|
})
|
||||||
|
|
||||||
// set attributes for mobile friendly tables
|
// set attributes for mobile friendly tables
|
||||||
$(".typography table").each((i, el) => {
|
$('.typography table').each((i, el) => {
|
||||||
const $table = $(el);
|
const $table = $(el)
|
||||||
let $header = $table.find("thead tr:first-child");
|
let $header = $table.find('thead tr:first-child')
|
||||||
if (!$header.length) {
|
if (!$header.length) {
|
||||||
$header = $(el).find("tr:first-child");
|
$header = $(el).find('tr:first-child')
|
||||||
}
|
}
|
||||||
|
|
||||||
$header.addClass("d-typography-breakpoint-none");
|
$header.addClass('d-typography-breakpoint-none')
|
||||||
|
|
||||||
$header.find("td").each((i, h) => {
|
$header.find('td').each((i, h) => {
|
||||||
const $h = $(h);
|
const $h = $(h)
|
||||||
$table
|
$table
|
||||||
.find("tr")
|
.find('tr')
|
||||||
.find(`td:eq(${i})`)
|
.find(`td:eq(${i})`)
|
||||||
.each((i, el) => {
|
.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
if (!$el.attr("data-label")) {
|
if (!$el.attr('data-label')) {
|
||||||
$el.attr("data-label", $h.text());
|
$el.attr('data-label', $h.text())
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
//
|
//
|
||||||
|
|
||||||
// hide spinner
|
// hide spinner
|
||||||
Spinner.hide(() => {
|
Spinner.hide(() => {
|
||||||
$Body.addClass("loaded");
|
$Body.addClass('loaded')
|
||||||
});
|
})
|
||||||
|
|
||||||
// fire page printing
|
// fire page printing
|
||||||
if (W.URLDetails["hash"].indexOf("printpage") > -1) {
|
if (W.URLDetails.hash.indexOf('printpage') > -1) {
|
||||||
W.print();
|
W.print()
|
||||||
}
|
}
|
||||||
|
|
||||||
$Body.data(NAME, ui);
|
$Body.data(NAME, ui)
|
||||||
$W.removeClass("lock-main-init");
|
$W.removeClass('lock-main-init')
|
||||||
}
|
}
|
||||||
|
|
||||||
static detectBootstrapScreenSize() {
|
static detectBootstrapScreenSize () {
|
||||||
const $el = $('<div class="env-test"></div>');
|
const $el = $('<div class="env-test"></div>')
|
||||||
let envs = [...Consts.ENVS];
|
let envs = [...Consts.ENVS]
|
||||||
$Body.append($el);
|
$Body.append($el)
|
||||||
|
|
||||||
let curEnv = envs.shift();
|
let curEnv = envs.shift()
|
||||||
envs = envs.reverse();
|
envs = envs.reverse()
|
||||||
|
|
||||||
for (let i = 0; i < envs.length; ++i) {
|
for (let i = 0; i < envs.length; ++i) {
|
||||||
const env = envs[i];
|
const env = envs[i]
|
||||||
$el.addClass(`d-${env}-none`);
|
$el.addClass(`d-${env}-none`)
|
||||||
if ($el.is(":hidden")) {
|
if ($el.is(':hidden')) {
|
||||||
curEnv = env;
|
curEnv = env
|
||||||
break;
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$el.remove();
|
$el.remove()
|
||||||
$Body.removeClass(envs);
|
$Body.removeClass(envs)
|
||||||
$Body.addClass(curEnv);
|
$Body.addClass(curEnv)
|
||||||
|
|
||||||
let landscape = true;
|
let landscape = true
|
||||||
if ($W.width() > $W.height()) {
|
if ($W.width() > $W.height()) {
|
||||||
$Body.removeClass("portrait");
|
$Body.removeClass('portrait')
|
||||||
$Body.addClass("landscape");
|
$Body.addClass('landscape')
|
||||||
} else {
|
} else {
|
||||||
landscape = false;
|
landscape = false
|
||||||
|
|
||||||
$Body.removeClass("landscape");
|
$Body.removeClass('landscape')
|
||||||
$Body.addClass("portrait");
|
$Body.addClass('portrait')
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
|
`${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
|
||||||
);
|
)
|
||||||
|
|
||||||
return curEnv;
|
return curEnv
|
||||||
}
|
}
|
||||||
|
|
||||||
static updateLocation(url) {
|
static updateLocation (url) {
|
||||||
let location = url || W.location.href;
|
let location = url || W.location.href
|
||||||
location = location.replace(W.URLDetails["base"], "/");
|
location = location.replace(W.URLDetails.base, '/')
|
||||||
const hash = location.indexOf("#");
|
const hash = location.indexOf('#')
|
||||||
|
|
||||||
W.URLDetails.relative = location.split("#")[0];
|
W.URLDetails.relative = location.split('#')[0]
|
||||||
W.URLDetails.hash =
|
W.URLDetails.hash =
|
||||||
hash >= 0 ? location.substr(location.indexOf("#")) : "";
|
hash >= 0 ? location.substr(location.indexOf('#')) : ''
|
||||||
}
|
}
|
||||||
|
|
||||||
// show site-wide alert
|
// show site-wide alert
|
||||||
static alert(msg, cls) {
|
static alert (msg, cls) {
|
||||||
$SiteWideMessage.fadeOut("fast");
|
$SiteWideMessage.fadeOut('fast')
|
||||||
|
|
||||||
$SiteWideMessage.html(
|
$SiteWideMessage.html(
|
||||||
`<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">×</i>${msg}</div></div>`
|
`<div class="page-alert"><div class="alert alert-${cls}"><i class="close" data-dismiss="alert">×</i>${msg}</div></div>`
|
||||||
);
|
)
|
||||||
$SiteWideMessage.find(".page-alert").alert();
|
$SiteWideMessage.find('.page-alert').alert()
|
||||||
|
|
||||||
$SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
|
$SiteWideMessage.find('.close[data-dismiss="alert"]').click(() => {
|
||||||
$SiteWideMessage.fadeOut("slow", () => {
|
$SiteWideMessage.fadeOut('slow', () => {
|
||||||
$SiteWideMessage.find(".page-alert").alert("close");
|
$SiteWideMessage.find('.page-alert').alert('close')
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
$SiteWideMessage.fadeIn("slow");
|
$SiteWideMessage.fadeIn('slow')
|
||||||
|
|
||||||
if ($AlertNotify.length) {
|
if ($AlertNotify.length) {
|
||||||
$AlertNotify[0].play();
|
$AlertNotify[0].play()
|
||||||
}
|
}
|
||||||
|
|
||||||
$W.trigger(`${Events.ALLERTAPPEARED}`);
|
$W.trigger(`${Events.ALLERTAPPEARED}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// hide site-wide alert
|
// hide site-wide alert
|
||||||
static alertHide() {
|
static alertHide () {
|
||||||
if ($SiteWideMessage.length !== 0) {
|
if ($SiteWideMessage.length !== 0) {
|
||||||
$SiteWideMessage.fadeOut("slow", () => {
|
$SiteWideMessage.fadeOut('slow', () => {
|
||||||
$SiteWideMessage.find(".alert").alert("close");
|
$SiteWideMessage.find('.alert').alert('close')
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($AlertNotify.length && typeof $AlertNotify[0].stop !== "undefined") {
|
if ($AlertNotify.length && typeof $AlertNotify[0].stop !== 'undefined') {
|
||||||
$AlertNotify[0].stop();
|
$AlertNotify[0].stop()
|
||||||
}
|
}
|
||||||
|
|
||||||
$W.trigger(`${Events.ALLERTREMOVED}`);
|
$W.trigger(`${Events.ALLERTREMOVED}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
// load all images
|
// load all images
|
||||||
static loadImages() {
|
static loadImages () {
|
||||||
const $imgs = $Body.find("img").not(".loaded");
|
const $imgs = $Body.find('img').not('.loaded')
|
||||||
const $imgUrls = [];
|
const $imgUrls = []
|
||||||
const $imgLazyUrls = [];
|
const $imgLazyUrls = []
|
||||||
|
|
||||||
// collect image details
|
// collect image details
|
||||||
$imgs.each((i, el) => {
|
$imgs.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
const src = $el.attr("src");
|
const src = $el.attr('src')
|
||||||
const lazySrc = $el.data("lazy-src");
|
const lazySrc = $el.data('lazy-src')
|
||||||
|
|
||||||
if ($el.hasClass("loaded")) {
|
if ($el.hasClass('loaded')) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (src && src.length) {
|
if (src && src.length) {
|
||||||
$imgUrls.push(src);
|
$imgUrls.push(src)
|
||||||
}
|
}
|
||||||
if (lazySrc && lazySrc.length) {
|
if (lazySrc && lazySrc.length) {
|
||||||
$imgLazyUrls.push(lazySrc);
|
$imgLazyUrls.push(lazySrc)
|
||||||
$el.addClass("loading");
|
$el.addClass('loading')
|
||||||
|
|
||||||
AjaxUI.preload([lazySrc]).then(() => {
|
AjaxUI.preload([lazySrc]).then(() => {
|
||||||
$el.attr("src", lazySrc);
|
$el.attr('src', lazySrc)
|
||||||
|
|
||||||
$el.on(`${Events.LOADED}`, () => {
|
$el.on(`${Events.LOADED}`, () => {
|
||||||
$el.addClass("loaded");
|
$el.addClass('loaded')
|
||||||
$el.removeClass("loading");
|
$el.removeClass('loading')
|
||||||
|
|
||||||
$el.trigger(`${Events.LAZYIMAGEREADY}`);
|
$el.trigger(`${Events.LAZYIMAGEREADY}`)
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
// load lazy backgrounds
|
// load lazy backgrounds
|
||||||
$Body
|
$Body
|
||||||
.find("[data-lazy-bg]")
|
.find('[data-lazy-bg]')
|
||||||
.not(".loaded")
|
.not('.loaded')
|
||||||
.each((i, el) => {
|
.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
const lazySrc = $el.data("lazy-bg");
|
const lazySrc = $el.data('lazy-bg')
|
||||||
|
|
||||||
if ($el.hasClass("loaded")) {
|
if ($el.hasClass('loaded')) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (lazySrc && lazySrc.length) {
|
if (lazySrc && lazySrc.length) {
|
||||||
$imgLazyUrls.push(lazySrc);
|
$imgLazyUrls.push(lazySrc)
|
||||||
$el.addClass("loading");
|
$el.addClass('loading')
|
||||||
|
|
||||||
AjaxUI.preload([lazySrc]).then(() => {
|
AjaxUI.preload([lazySrc]).then(() => {
|
||||||
$el.css({ "background-image": `url(${lazySrc})` });
|
$el.css({ 'background-image': `url(${lazySrc})` })
|
||||||
|
|
||||||
$el.addClass("loaded");
|
$el.addClass('loaded')
|
||||||
$el.removeClass("loading");
|
$el.removeClass('loading')
|
||||||
|
|
||||||
$el.trigger(`${Events.LAZYIMAGEREADY}`);
|
$el.trigger(`${Events.LAZYIMAGEREADY}`)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
// replace img src
|
// replace img src
|
||||||
$Body
|
$Body
|
||||||
.find("[data-src-replace]")
|
.find('[data-src-replace]')
|
||||||
.not(".loaded")
|
.not('.loaded')
|
||||||
.each((i, el) => {
|
.each((i, el) => {
|
||||||
const $el = $(el);
|
const $el = $(el)
|
||||||
const lazySrc = $el.data("src-replace");
|
const lazySrc = $el.data('src-replace')
|
||||||
|
|
||||||
if ($el.hasClass("loaded")) {
|
if ($el.hasClass('loaded')) {
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if (lazySrc && lazySrc.length) {
|
if (lazySrc && lazySrc.length) {
|
||||||
$el.addClass("loaded");
|
$el.addClass('loaded')
|
||||||
$el.attr("src", lazySrc);
|
$el.attr('src', lazySrc)
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
// load defined images
|
// load defined images
|
||||||
AjaxUI.preload($imgUrls).then(() => {
|
AjaxUI.preload($imgUrls).then(() => {
|
||||||
$W.trigger("images-loaded");
|
$W.trigger('images-loaded')
|
||||||
|
|
||||||
// load lazy images
|
// load lazy images
|
||||||
AjaxUI.preload($imgLazyUrls).then(() => {
|
AjaxUI.preload($imgLazyUrls).then(() => {
|
||||||
console.log(`${NAME}: All images are loaded!`);
|
console.log(`${NAME}: All images are loaded!`)
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$W.trigger(`${Events.LAZYIMAGESREADY}`);
|
$W.trigger(`${Events.LAZYIMAGESREADY}`)
|
||||||
|
|
||||||
console.groupEnd("Post-init");
|
console.groupEnd('Post-init')
|
||||||
console.timeEnd("Post-init");
|
console.timeEnd('Post-init')
|
||||||
}, 100);
|
}, 100)
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`${NAME}: dispose`);
|
console.log(`${NAME}: dispose`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$W.on(
|
$W.on(
|
||||||
`${Events.MAININIT} ${Events.AJAX} ${Events.AJAXMAIN} ${Events.LOADED}`,
|
`${Events.MAININIT} ${Events.AJAX} ${Events.AJAXMAIN} ${Events.LOADED}`,
|
||||||
() => {
|
() => {
|
||||||
if ($W.hasClass("lock-main-init")) {
|
if ($W.hasClass('lock-main-init')) {
|
||||||
console.warn(`${NAME}: locked`);
|
console.warn(`${NAME}: locked`)
|
||||||
return;
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
$W.addClass("lock-main-init");
|
$W.addClass('lock-main-init')
|
||||||
MainUI.init();
|
MainUI.init()
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
|
|
||||||
$W.on(`${Events.RESIZE}`, () => {
|
$W.on(`${Events.RESIZE}`, () => {
|
||||||
MainUI.detectBootstrapScreenSize();
|
MainUI.detectBootstrapScreenSize()
|
||||||
});
|
})
|
||||||
|
|
||||||
$W.on("beforeunload unload", () => {
|
$W.on('beforeunload unload', () => {
|
||||||
Spinner.show(() => {
|
Spinner.show(() => {
|
||||||
$Body.removeClass("loaded");
|
$Body.removeClass('loaded')
|
||||||
});
|
})
|
||||||
});
|
})
|
||||||
|
|
||||||
// hide spinner on target _blank
|
// hide spinner on target _blank
|
||||||
$('[target="_blank"],.external')
|
$('[target="_blank"],.external')
|
||||||
.not('[data-toggle="lightbox"],[data-lightbox-gallery]')
|
.not('[data-toggle="lightbox"],[data-lightbox-gallery]')
|
||||||
.on("click submit touch", (e) => {
|
.on('click submit touch', (e) => {
|
||||||
console.log(`${NAME}: External link`);
|
console.log(`${NAME}: External link`)
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
Spinner.hide(() => {
|
Spinner.hide(() => {
|
||||||
$Body.addClass("loaded");
|
$Body.addClass('loaded')
|
||||||
});
|
})
|
||||||
}, 1000);
|
}, 1000)
|
||||||
});
|
})
|
||||||
|
|
||||||
W.MainUI = MainUI;
|
W.MainUI = MainUI
|
||||||
|
|
||||||
return MainUI;
|
return MainUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default MainUI;
|
export default MainUI
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
//import $ from 'jquery';
|
// import $ from 'jquery';
|
||||||
import "../scss/app.scss";
|
import '../scss/app.scss'
|
||||||
|
|
||||||
import { Dropdown } from "bootstrap";
|
import { Dropdown } from 'bootstrap'
|
||||||
import Page from "./_components/_page.jsx";
|
import Page from './_components/_page.jsx'
|
||||||
|
|
||||||
//import 'hammerjs/hammer';
|
// import 'hammerjs/hammer';
|
||||||
//import 'jquery-hammerjs/jquery.hammer';
|
// import 'jquery-hammerjs/jquery.hammer';
|
||||||
|
|
||||||
// Routie
|
// Routie
|
||||||
//import 'pouchdb/dist/pouchdb';
|
// import 'pouchdb/dist/pouchdb';
|
||||||
//import './_components/routes/index';
|
// import './_components/routes/index';
|
||||||
|
|
||||||
// conflicts with _components/_ui.hover.js (shows dropdown on hover)
|
// conflicts with _components/_ui.hover.js (shows dropdown on hover)
|
||||||
//import 'bootstrap/js/dist/dropdown';
|
// import 'bootstrap/js/dist/dropdown';
|
||||||
/*import './_components/_ui.hover';
|
/* import './_components/_ui.hover';
|
||||||
|
|
||||||
import './_components/_ui.carousel';
|
import './_components/_ui.carousel';
|
||||||
import './_components/_ui.menu';
|
import './_components/_ui.menu';
|
||||||
|
|
@ -24,74 +24,74 @@ import 'bootstrap/js/dist/modal';
|
||||||
import 'bootstrap/js/dist/tooltip';
|
import 'bootstrap/js/dist/tooltip';
|
||||||
import 'bootstrap/js/dist/popover';
|
import 'bootstrap/js/dist/popover';
|
||||||
import 'bootstrap/js/dist/scrollspy';
|
import 'bootstrap/js/dist/scrollspy';
|
||||||
import 'bootstrap/js/dist/tab';*/
|
import 'bootstrap/js/dist/tab'; */
|
||||||
//
|
//
|
||||||
|
|
||||||
// Offcanvas menu
|
// Offcanvas menu
|
||||||
//import 'offcanvas-bootstrap/dist/js/bootstrap.offcanvas';
|
// import 'offcanvas-bootstrap/dist/js/bootstrap.offcanvas';
|
||||||
|
|
||||||
// Uncomment it to enable meta-lightbox zooming on hover
|
// Uncomment it to enable meta-lightbox zooming on hover
|
||||||
//import 'jquery-zoom/jquery.zoom';
|
// import 'jquery-zoom/jquery.zoom';
|
||||||
|
|
||||||
// FlyoutUI
|
// FlyoutUI
|
||||||
//import FlyoutUI from './_components/_ui.flyout';
|
// import FlyoutUI from './_components/_ui.flyout';
|
||||||
|
|
||||||
// Sticky sidebar
|
// Sticky sidebar
|
||||||
//import SidebarUI from './_components/_ui.sidebar';
|
// import SidebarUI from './_components/_ui.sidebar';
|
||||||
|
|
||||||
// Toggle bootstrap form fields
|
// Toggle bootstrap form fields
|
||||||
//import FormToggleUI from './_components/_ui.form.fields.toggle';
|
// import FormToggleUI from './_components/_ui.form.fields.toggle';
|
||||||
|
|
||||||
// Bootstrap Date & Time fields
|
// Bootstrap Date & Time fields
|
||||||
//import FormDatetime from './_components/_ui.form.datetime';
|
// import FormDatetime from './_components/_ui.form.datetime';
|
||||||
|
|
||||||
// Stepped forms functionality
|
// Stepped forms functionality
|
||||||
//import FormStepped from './_components/_ui.form.stepped';
|
// import FormStepped from './_components/_ui.form.stepped';
|
||||||
|
|
||||||
// Forms validation functionality
|
// Forms validation functionality
|
||||||
//import FormValidate from './_components/_ui.form.validate';
|
// import FormValidate from './_components/_ui.form.validate';
|
||||||
|
|
||||||
// Store forms data into localStorage
|
// Store forms data into localStorage
|
||||||
//import FormStorage from './_components/_ui.form.storage';
|
// import FormStorage from './_components/_ui.form.storage';
|
||||||
|
|
||||||
// client-side images cropping
|
// client-side images cropping
|
||||||
//import FormCroppie from './_components/_ui.form.croppie';
|
// import FormCroppie from './_components/_ui.form.croppie';
|
||||||
|
|
||||||
// Google NoCaptcha fields
|
// Google NoCaptcha fields
|
||||||
//import NoCaptcha from './_components/_ui.nocaptcha';
|
// import NoCaptcha from './_components/_ui.nocaptcha';
|
||||||
|
|
||||||
// youtube video preview image
|
// youtube video preview image
|
||||||
//import './_components/_ui.video.preview';
|
// import './_components/_ui.video.preview';
|
||||||
|
|
||||||
// Meta Lightbox
|
// Meta Lightbox
|
||||||
import "@a2nt/meta-lightbox-react/src/js/app";
|
import '@a2nt/meta-lightbox-react/src/js/app'
|
||||||
|
|
||||||
const GraphPage = ReactDOM.render(
|
const GraphPage = ReactDOM.render(
|
||||||
<Page />,
|
<Page />,
|
||||||
document.getElementById("MainContent")
|
document.getElementById('MainContent')
|
||||||
);
|
)
|
||||||
|
|
||||||
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
|
// import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
|
||||||
//import Table from 'bootstrap-table/dist/bootstrap-table';
|
// import Table from 'bootstrap-table/dist/bootstrap-table';
|
||||||
|
|
||||||
// Map UI
|
// Map UI
|
||||||
//import MapApi from './_components/_ui.map.api';
|
// import MapApi from './_components/_ui.map.api';
|
||||||
|
|
||||||
//import FormSelect2 from './_components/_ui.form.select2';
|
// import FormSelect2 from './_components/_ui.form.select2';
|
||||||
|
|
||||||
//import './_main';
|
// import './_main';
|
||||||
//import './_layout';
|
// import './_layout';
|
||||||
|
|
||||||
// Google Analytics
|
// Google Analytics
|
||||||
//import './_components/drivers/_google.track.external.links';
|
// import './_components/drivers/_google.track.external.links';
|
||||||
|
|
||||||
function importAll(r) {
|
function importAll (r) {
|
||||||
return r.keys().map(r);
|
return r.keys().map(r)
|
||||||
}
|
}
|
||||||
|
|
||||||
const images = importAll(
|
const images = importAll(
|
||||||
require.context("../img/", false, /\.(png|jpe?g|svg)$/)
|
require.context('../img/', false, /\.(png|jpe?g|svg)$/)
|
||||||
);
|
)
|
||||||
const fontAwesome = importAll(
|
const fontAwesome = importAll(
|
||||||
require.context("font-awesome", false, /\.(otf|eot|svg|ttf|woff|woff2)$/)
|
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/)
|
||||||
);
|
)
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ export default {
|
||||||
'<div class="steps-buttons">' +
|
'<div class="steps-buttons">' +
|
||||||
'<a href="#" class="step-ctrl step-prev"><i class="fas fa-chevron-left"></i> Prev</a>' +
|
'<a href="#" class="step-ctrl step-prev"><i class="fas fa-chevron-left"></i> Prev</a>' +
|
||||||
' <a href="#" class="step-ctrl step-next">Next <i class="fas fa-chevron-right"></i></a>' +
|
' <a href="#" class="step-ctrl step-next">Next <i class="fas fa-chevron-right"></i></a>' +
|
||||||
"</div>",
|
'</div>',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,51 +13,51 @@
|
||||||
* Take a look to app/templates/Objects/Map.ss for HTML
|
* Take a look to app/templates/Objects/Map.ss for HTML
|
||||||
* Take a look to https://github.com/a2nt/silverstripe-mapboxfield/blob/master/README.md for Data Structure
|
* Take a look to https://github.com/a2nt/silverstripe-mapboxfield/blob/master/README.md for Data Structure
|
||||||
*/
|
*/
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
// your page specific css
|
// your page specific css
|
||||||
import "../scss/_types/PageTypeClassName.scss";
|
import '../scss/_types/PageTypeClassName.scss'
|
||||||
|
|
||||||
import $ from "jquery";
|
import $ from 'jquery'
|
||||||
import Events from "../_events";
|
import Events from '../_events'
|
||||||
|
|
||||||
// Mapbox API
|
// Mapbox API
|
||||||
import "../_components/_ui.map.api";
|
import '../_components/_ui.map.api'
|
||||||
|
|
||||||
const PageTypeUI = (($) => {
|
const PageTypeUI = (($) => {
|
||||||
// Constants
|
// Constants
|
||||||
const W = window;
|
const W = window
|
||||||
const D = document;
|
const D = document
|
||||||
const $Body = $("body");
|
const $Body = $('body')
|
||||||
|
|
||||||
const NAME = "PageTypeUI";
|
const NAME = 'PageTypeUI'
|
||||||
class PageTypeUI {
|
class PageTypeUI {
|
||||||
// Static methods
|
// Static methods
|
||||||
|
|
||||||
static init() {
|
static init () {
|
||||||
this.dispose();
|
this.dispose()
|
||||||
console.log(`Initializing: ${NAME}`);
|
console.log(`Initializing: ${NAME}`)
|
||||||
// custom page specific functionality
|
// custom page specific functionality
|
||||||
}
|
}
|
||||||
|
|
||||||
static initMap() {
|
static initMap () {
|
||||||
// custom map functionality
|
// custom map functionality
|
||||||
}
|
}
|
||||||
|
|
||||||
static dispose() {
|
static dispose () {
|
||||||
console.log(`Destroying: ${NAME}`);
|
console.log(`Destroying: ${NAME}`)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||||
PageTypeUI.init();
|
PageTypeUI.init()
|
||||||
});
|
})
|
||||||
|
|
||||||
$(W).on(Events.MAPLOADED, () => {
|
$(W).on(Events.MAPLOADED, () => {
|
||||||
PageTypeUI.initMap();
|
PageTypeUI.initMap()
|
||||||
});
|
})
|
||||||
|
|
||||||
return PageTypeUI;
|
return PageTypeUI
|
||||||
})($);
|
})($)
|
||||||
|
|
||||||
export default PageTypeUI;
|
export default PageTypeUI
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
/*import $ from 'jquery';
|
/* import $ from 'jquery';
|
||||||
import '../_components/_ui.map.api';
|
import '../_components/_ui.map.api';
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
"use strict";
|
'use strict'
|
||||||
|
|
||||||
/*import $ from 'jquery';
|
/* import $ from 'jquery';
|
||||||
import Events from '../_events';
|
import Events from '../_events';
|
||||||
|
|
||||||
// Mapbox API
|
// Mapbox API
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
// src/mocks/browser.js
|
// src/mocks/browser.js
|
||||||
import { setupWorker } from "msw";
|
import { setupWorker } from 'msw'
|
||||||
import { handlers } from "./handlers";
|
import { handlers } from './handlers'
|
||||||
// This configures a Service Worker with the given request handlers.
|
// This configures a Service Worker with the given request handlers.
|
||||||
export const worker = setupWorker(...handlers);
|
export const worker = setupWorker(...handlers)
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
// src/mocks/handlers.js
|
// src/mocks/handlers.js
|
||||||
import { graphql } from "msw";
|
import { graphql } from 'msw'
|
||||||
|
|
||||||
export const handlers = [
|
export const handlers = [
|
||||||
// Handles a "Login" mutation
|
// Handles a "Login" mutation
|
||||||
/*graphql.mutation('Login', (req, res, ctx) => {
|
/* graphql.mutation('Login', (req, res, ctx) => {
|
||||||
const { username } = req.variables;
|
const { username } = req.variables;
|
||||||
sessionStorage.setItem('is-authenticated', username);
|
sessionStorage.setItem('is-authenticated', username);
|
||||||
return res(
|
return res(
|
||||||
|
|
@ -13,10 +13,10 @@ export const handlers = [
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
}),*/
|
}), */
|
||||||
// Handles a "Pages" query
|
// Handles a "Pages" query
|
||||||
graphql.query("Pages11", (req, res, ctx) => {
|
graphql.query('Pages11', (req, res, ctx) => {
|
||||||
const apiKey = req.headers.map.apikey;
|
const apiKey = req.headers.map.apikey
|
||||||
if (
|
if (
|
||||||
!req.headers.map.apikey ||
|
!req.headers.map.apikey ||
|
||||||
req.headers.map.apikey !== `${GRAPHQL_API_KEY}`
|
req.headers.map.apikey !== `${GRAPHQL_API_KEY}`
|
||||||
|
|
@ -25,11 +25,11 @@ export const handlers = [
|
||||||
return res(
|
return res(
|
||||||
ctx.errors([
|
ctx.errors([
|
||||||
{
|
{
|
||||||
message: "Not authenticated",
|
message: 'Not authenticated',
|
||||||
errorType: "AuthenticationError",
|
errorType: 'AuthenticationError',
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
// When authenticated, respond with a query payload
|
// When authenticated, respond with a query payload
|
||||||
return res(
|
return res(
|
||||||
|
|
@ -38,38 +38,38 @@ export const handlers = [
|
||||||
edges: [
|
edges: [
|
||||||
{
|
{
|
||||||
node: {
|
node: {
|
||||||
ID: "1",
|
ID: '1',
|
||||||
Title: "Home-Mocked",
|
Title: 'Home-Mocked',
|
||||||
ClassName: "Site\\Pages\\HomePage",
|
ClassName: 'Site\\Pages\\HomePage',
|
||||||
CSSClass: "Site-Pages-HomePage",
|
CSSClass: 'Site-Pages-HomePage',
|
||||||
Summary:
|
Summary:
|
||||||
"That's my personal website, I'm full-stack developer mostly specializing on SilverStipe backend projects and share some of my hobbies at this website.",
|
"That's my personal website, I'm full-stack developer mostly specializing on SilverStipe backend projects and share some of my hobbies at this website.",
|
||||||
Link: "/en/",
|
Link: '/en/',
|
||||||
URLSegment: "home",
|
URLSegment: 'home',
|
||||||
Elements: {
|
Elements: {
|
||||||
edges: [
|
edges: [
|
||||||
{
|
{
|
||||||
node: {
|
node: {
|
||||||
ID: "3",
|
ID: '3',
|
||||||
Title: "Slider",
|
Title: 'Slider',
|
||||||
Render:
|
Render:
|
||||||
"<div\nid="e3"\nclass="element site__elements__sliderelement\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t\n\n\n <div id="Carousel3" class="carousel slide js-carousel">\n <div class="carousel-inner">\n \n <div class="carousel-item carousel-item-Video carousel-item-nocontrols active">\n <div class="carousel-slide">\n \n \n <div class="video">\n <iframe width="200" height="113" src="https://www.youtube.com/embed/IF1F_es1SaU?feature=oembed&wmode=transparent&enablejsapi=1&disablekb=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&autoplay=1&mute=1&loop=1&playlist=IF1F_es1SaU" allow="autoplay" allow="autoplay" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>\n </div>\n \n\n\n\n\n </div>\n </div>\n \n </div>\n </div>\n\n\n\t</div>\n</div>\n",
|
'<div\nid="e3"\nclass="element site__elements__sliderelement\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t\n\n\n <div id="Carousel3" class="carousel slide js-carousel">\n <div class="carousel-inner">\n \n <div class="carousel-item carousel-item-Video carousel-item-nocontrols active">\n <div class="carousel-slide">\n \n \n <div class="video">\n <iframe width="200" height="113" src="https://www.youtube.com/embed/IF1F_es1SaU?feature=oembed&wmode=transparent&enablejsapi=1&disablekb=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&autoplay=1&mute=1&loop=1&playlist=IF1F_es1SaU" allow="autoplay" allow="autoplay" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>\n </div>\n \n\n\n\n\n </div>\n </div>\n \n </div>\n </div>\n\n\n\t</div>\n</div>\n',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: {
|
node: {
|
||||||
ID: "7",
|
ID: '7',
|
||||||
Title: "Categories List",
|
Title: 'Categories List',
|
||||||
Render:
|
Render:
|
||||||
"<div\nid="e7"\nclass="element dnadesign__elementallist__model__elementlist\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t\n<div class="list-element__container row" data-listelement-count="3">\n \n \n\t <div\nid="e9"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n <div class="image-element__image height400 width400">\n <img\n src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n data-lazy-src="/assets/Uploads/ElementImage/1609765749853__FillWzQwMCw0MDBd.jpg" class="img-responsive" alt="Aquascaping"\n />\n </div>\n\n\n\n<div class="image-element__caption img-content">\n <h3 class="image-element__title title">Aquascaping</h3>\n\n \n</div>\n\n\n\n <a href="/en/aquascaping/" class="stretched-link">\n <b class="sr-only">Aquascaping</b>\n </a>\n\n\n\t</div>\n</div>\n\n \n\t <div\nid="e10"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n <div class="image-element__image height400 width400">\n <img\n src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n data-lazy-src="/assets/Uploads/ElementImage/1609766816754__FillWzQwMCw0MDBd.jpg" class="img-responsive" alt="Car Projects"\n />\n </div>\n\n\n\n<div class="image-element__caption img-content">\n <h3 class="image-element__title title">Car Projects</h3>\n\n \n</div>\n\n\n\n <a href="/en/car/" class="stretched-link">\n <b class="sr-only">Car Projects</b>\n </a>\n\n\n\t</div>\n</div>\n\n \n\t <div\nid="e12"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n <div class="image-element__image height400 width400">\n <img\n src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n data-lazy-src="/assets/Uploads/ElementImage/Screenshot-from-2021-01-04-20-30-19__FillWzQwMCw0MDBd.png" class="img-responsive" alt="Programming"\n />\n </div>\n\n\n\n<div class="image-element__caption img-content">\n <h3 class="image-element__title title">Programming</h3>\n\n \n</div>\n\n\n\n <a href="/en/development/" class="stretched-link">\n <b class="sr-only">Programming</b>\n </a>\n\n\n\t</div>\n</div>\n\n \n\n\n</div>\n\n\t</div>\n</div>\n",
|
'<div\nid="e7"\nclass="element dnadesign__elementallist__model__elementlist\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t\n<div class="list-element__container row" data-listelement-count="3">\n \n \n\t <div\nid="e9"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n <div class="image-element__image height400 width400">\n <img\n src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n data-lazy-src="/assets/Uploads/ElementImage/1609765749853__FillWzQwMCw0MDBd.jpg" class="img-responsive" alt="Aquascaping"\n />\n </div>\n\n\n\n<div class="image-element__caption img-content">\n <h3 class="image-element__title title">Aquascaping</h3>\n\n \n</div>\n\n\n\n <a href="/en/aquascaping/" class="stretched-link">\n <b class="sr-only">Aquascaping</b>\n </a>\n\n\n\t</div>\n</div>\n\n \n\t <div\nid="e10"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n <div class="image-element__image height400 width400">\n <img\n src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n data-lazy-src="/assets/Uploads/ElementImage/1609766816754__FillWzQwMCw0MDBd.jpg" class="img-responsive" alt="Car Projects"\n />\n </div>\n\n\n\n<div class="image-element__caption img-content">\n <h3 class="image-element__title title">Car Projects</h3>\n\n \n</div>\n\n\n\n <a href="/en/car/" class="stretched-link">\n <b class="sr-only">Car Projects</b>\n </a>\n\n\n\t</div>\n</div>\n\n \n\t <div\nid="e12"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n <div class="image-element__image height400 width400">\n <img\n src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n data-lazy-src="/assets/Uploads/ElementImage/Screenshot-from-2021-01-04-20-30-19__FillWzQwMCw0MDBd.png" class="img-responsive" alt="Programming"\n />\n </div>\n\n\n\n<div class="image-element__caption img-content">\n <h3 class="image-element__title title">Programming</h3>\n\n \n</div>\n\n\n\n <a href="/en/development/" class="stretched-link">\n <b class="sr-only">Programming</b>\n </a>\n\n\n\t</div>\n</div>\n\n \n\n\n</div>\n\n\t</div>\n</div>\n',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
node: {
|
node: {
|
||||||
ID: "4",
|
ID: '4',
|
||||||
Title: "Hello, I'm Tony Air",
|
Title: "Hello, I'm Tony Air",
|
||||||
Render:
|
Render:
|
||||||
"<div\nid="e4"\nclass="element dnadesign__elemental__models__elementcontent\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t<div\nclass="content-element__content"\n>\n \n\t\n <h2 class="content-element__title">Hello, I&#039;m Tony Air</h2>\n \n\n <div class="typography">\n <p>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.<br><br>As for the things I do for work:<br><br>Here's front-end UI kit:&nbsp;<a rel="noopener" href="https://github.com/a2nt/webpack-bootstrap-ui-kit" target="_blank">https://github.com/a2nt/webpack-bootstrap-ui-kit</a><br>Here's SilverStipe quick start template:&nbsp;<a rel="noopener" href="https://github.com/a2nt/silverstripe-webpack" target="_blank">https://github.com/a2nt/silverstripe-webpack</a><br><br>More at my github:&nbsp;<a rel="noopener" href="https://github.com/a2nt" target="_blank">https://github.com/a2nt</a></p>\n </div>\n\n \n</div>\n\n\t</div>\n</div>\n",
|
'<div\nid="e4"\nclass="element dnadesign__elemental__models__elementcontent\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t<div\nclass="content-element__content"\n>\n \n\t\n <h2 class="content-element__title">Hello, I&#039;m Tony Air</h2>\n \n\n <div class="typography">\n <p>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.<br><br>As for the things I do for work:<br><br>Here's front-end UI kit:&nbsp;<a rel="noopener" href="https://github.com/a2nt/webpack-bootstrap-ui-kit" target="_blank">https://github.com/a2nt/webpack-bootstrap-ui-kit</a><br>Here's SilverStipe quick start template:&nbsp;<a rel="noopener" href="https://github.com/a2nt/silverstripe-webpack" target="_blank">https://github.com/a2nt/silverstripe-webpack</a><br><br>More at my github:&nbsp;<a rel="noopener" href="https://github.com/a2nt" target="_blank">https://github.com/a2nt</a></p>\n </div>\n\n \n</div>\n\n\t</div>\n</div>\n',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -89,6 +89,6 @@ export const handlers = [
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
);
|
)
|
||||||
}),
|
}),
|
||||||
];
|
]
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
// src/mocks/server.js
|
// src/mocks/server.js
|
||||||
import { setupServer } from "msw/node";
|
import { setupServer } from 'msw/node'
|
||||||
import { handlers } from "./handlers";
|
import { handlers } from './handlers'
|
||||||
// This configures a request mocking server with the given request handlers.
|
// This configures a request mocking server with the given request handlers.
|
||||||
export const server = setupServer(...handlers);
|
export const server = setupServer(...handlers)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue