FIX: Google Captcha

.eslintignore

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

.npmrc

@@ -1,2 +1,2 @@
-registry=https://npm.pkg.github.com/a2nt
-registry=https://registry.npmjs.org/
+//npmjs.org=true
+@a2nt:registry=https://npm.pkg.github.com

dist/css/app_cms.css

@@ -0,0 +1 @@
+#Menu-Dynamic-Elements-Admin-TestimonialsAdmin,#Menu-Dynamic-Elements-Promos-Admin-PromosAdmin,#Menu-Dynamic-Elements-Sponsors-Admin-SponsorsAdmin,#Menu-SilverStripe-CampaignAdmin-CampaignAdmin{display:none}#Form_EditForm_MajorActions_Holder,#Form_ItemEditForm_MajorActions_Holder{border:0;flex:1 1;margin-bottom:0;padding-bottom:0}#Form_EditForm_MajorActions_Holder .btn,#Form_ItemEditForm_MajorActions_Holder .btn{white-space:nowrap}#Form_ItemEditForm_RightGroup,#Form_ItemEditForm_RightGroup_Holder{margin-bottom:0;padding-bottom:0}#Form_ItemEditForm_RightGroup{align-items:center;border:0;display:flex;justify-content:center}.grid-field__icon-action.edit-link{opacity:1}.grid-field__table .form-check-input.editable-column-field{margin:0!important}.toolbar--south .btn-primary{color:#fff}.toolbar--south .btn-outline-primary{color:#999}#ActionMenus_MoreOptions .btn-primary{color:#5589a7}body.cms{flex-direction:column;overflow-x:hidden}.fields-compact .form-group{margin-bottom:.25rem;padding-bottom:.5rem}.fields-compact .form-group .form__field-label{font-weight:700}.fields-compact .form-group:after{margin-bottom:.25rem}.fields-compact .form-group:after,.fields-compact .form__divider:after{display:none}.fields-row{margin:0!important;padding:0 0 2em!important;width:100%}.fields-row .form__fieldgroup{display:flex;flex:0 0 100%!important;flex-wrap:wrap;margin:0!important;max-width:100%!important;padding:0!important;width:100%!important}.fields-row .form__fieldgroup>.form-group{flex:1 1 50%;margin:0!important;max-width:50%;padding:0 1rem}.cms table.grid-field__table tbody .col-bulkSelect{position:relative}.notifications-list .alert .btn-close{display:none}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){clip:rect(0,0,0,0)!important;border:0!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}#MetaLightboxApp{position:relative;z-index:99}.sticky-buttons~table.table.grid-field__table{margin-top:1rem}

dist/css/app_editor.css

@@ -0,0 +1 @@
+.table,table{--bs-table-color-type:initial;--bs-table-bg-type:initial;--bs-table-color-state:initial;--bs-table-bg-state:initial;--bs-table-color:var(--bs-emphasis-color);--bs-table-bg:var(--bs-body-bg);--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-emphasis-color);--bs-table-striped-bg:rgba(var(--bs-emphasis-color-rgb),0.05);--bs-table-active-color:var(--bs-emphasis-color);--bs-table-active-bg:rgba(var(--bs-emphasis-color-rgb),0.1);--bs-table-hover-color:var(--bs-emphasis-color);--bs-table-hover-bg:rgba(var(--bs-emphasis-color-rgb),0.075);border-color:var(--bs-table-border-color);margin-bottom:1rem;vertical-align:top;width:100%}.table>:not(caption)>*>*,table>:not(caption)>*>*{background-color:var(--bs-table-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)));color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));padding:.5rem}.table>tbody,table>tbody{vertical-align:inherit}.table>thead,table>thead{vertical-align:bottom}.table-group-divider{border-top:calc(var(--bs-border-width)*2) solid}.caption-top{caption-side:top}.table-sm>:not(caption)>*>*{padding:.25rem}.table-bordered>:not(caption)>*,table>:not(caption)>*{border-width:var(--bs-border-width) 0}.table-bordered>:not(caption)>*>*,table>:not(caption)>*>*{border-width:0 var(--bs-border-width)}.table-borderless>:not(caption)>*>*,table.table-none>:not(caption)>*>*{border-bottom-width:0}.table-borderless>:not(:first-child),table.table-none>:not(:first-child){border-top-width:0}.table-striped-columns>:not(caption)>tr>:nth-child(2n),.table-striped>tbody>tr:nth-of-type(odd)>*,table>tbody>tr:nth-of-type(odd)>*{--bs-table-color-type:var(--bs-table-striped-color);--bs-table-bg-type:var(--bs-table-striped-bg)}.table-active{--bs-table-color-state:var(--bs-table-active-color);--bs-table-bg-state:var(--bs-table-active-bg)}.table-hover>tbody>tr:hover>*{--bs-table-color-state:var(--bs-table-hover-color);--bs-table-bg-state:var(--bs-table-hover-bg)}.table-primary{--bs-table-color:#000;--bs-table-bg:#cfe2ff;--bs-table-border-color:#a6b5cc;--bs-table-striped-bg:#c5d7f2;--bs-table-striped-color:#000;--bs-table-active-bg:#bacbe6;--bs-table-active-color:#000;--bs-table-hover-bg:#bfd1ec;--bs-table-hover-color:#000}.table-primary,.table-secondary{border-color:var(--bs-table-border-color);color:var(--bs-table-color)}.table-secondary{--bs-table-color:#000;--bs-table-bg:#e2e3e5;--bs-table-border-color:#b5b6b7;--bs-table-striped-bg:#d7d8da;--bs-table-striped-color:#000;--bs-table-active-bg:#cbccce;--bs-table-active-color:#000;--bs-table-hover-bg:#d1d2d4;--bs-table-hover-color:#000}.table-success{--bs-table-color:#000;--bs-table-bg:#d1e7dd;--bs-table-border-color:#a7b9b1;--bs-table-striped-bg:#c7dbd2;--bs-table-striped-color:#000;--bs-table-active-bg:#bcd0c7;--bs-table-active-color:#000;--bs-table-hover-bg:#c1d6cc;--bs-table-hover-color:#000}.table-info,.table-success{border-color:var(--bs-table-border-color);color:var(--bs-table-color)}.table-info{--bs-table-color:#000;--bs-table-bg:#cff4fc;--bs-table-border-color:#a6c3ca;--bs-table-striped-bg:#c5e8ef;--bs-table-striped-color:#000;--bs-table-active-bg:#badce3;--bs-table-active-color:#000;--bs-table-hover-bg:#bfe2e9;--bs-table-hover-color:#000}.table-warning{--bs-table-color:#000;--bs-table-bg:#fff3cd;--bs-table-border-color:#ccc2a4;--bs-table-striped-bg:#f2e7c3;--bs-table-striped-color:#000;--bs-table-active-bg:#e6dbb9;--bs-table-active-color:#000;--bs-table-hover-bg:#ece1be;--bs-table-hover-color:#000}.table-danger,.table-warning{border-color:var(--bs-table-border-color);color:var(--bs-table-color)}.table-danger{--bs-table-color:#000;--bs-table-bg:#f8d7da;--bs-table-border-color:#c6acae;--bs-table-striped-bg:#eccccf;--bs-table-striped-color:#000;--bs-table-active-bg:#dfc2c4;--bs-table-active-color:#000;--bs-table-hover-bg:#e5c7ca;--bs-table-hover-color:#000}.table-light{--bs-table-color:#000;--bs-table-bg:#f8f9fa;--bs-table-border-color:#c6c7c8;--bs-table-striped-bg:#ecedee;--bs-table-striped-color:#000;--bs-table-active-bg:#dfe0e1;--bs-table-active-color:#000;--bs-table-hover-bg:#e5e6e7;--bs-table-hover-color:#000}.table-dark,.table-light{border-color:var(--bs-table-border-color);color:var(--bs-table-color)}.table-dark{--bs-table-color:#fff;--bs-table-bg:#212529;--bs-table-border-color:#4d5154;--bs-table-striped-bg:#2c3034;--bs-table-striped-color:#fff;--bs-table-active-bg:#373b3e;--bs-table-active-color:#fff;--bs-table-hover-bg:#323539;--bs-table-hover-color:#fff}.table-responsive{-webkit-overflow-scrolling:touch;overflow-x:auto}@media(max-width:575.98px){.table-responsive-sm{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media(max-width:767.98px){.table-responsive-md{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media(max-width:991.98px){.table-responsive-lg{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media(max-width:1199.98px){.table-responsive-xl{-webkit-overflow-scrolling:touch;overflow-x:auto}}@media(max-width:1399.98px){.table-responsive-xxl{-webkit-overflow-scrolling:touch;overflow-x:auto}}body,html{background:#fff;color:#212529}p{margin-bottom:1em}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{color:inherit}a{color:#0d6efd}.captionImage,.image,.ss-htmleditorfield-file,img{display:block;margin-bottom:1em;margin-top:1em;max-width:100%}@media(min-width:576px){.captionImage,.image,.ss-htmleditorfield-file,img{margin-left:1em;margin-right:1em}}.captionImage.center,.image.center,.ss-htmleditorfield-file.center,img.center{margin-left:auto;margin-right:auto;text-align:center}.captionImage.w-100,.image.w-100,.ss-htmleditorfield-file.w-100,img.w-100{margin-left:0;margin-right:0;text-align:center}.captionImage.left,.captionImage.start,.image.left,.image.start,.ss-htmleditorfield-file.left,.ss-htmleditorfield-file.start,img.left,img.start{clear:left;float:left}@media(min-width:576px){.captionImage.left,.captionImage.start,.image.left,.image.start,.ss-htmleditorfield-file.left,.ss-htmleditorfield-file.start,img.left,img.start{margin:0 1em 1em 0}}.captionImage.leftAlone,.image.leftAlone,.ss-htmleditorfield-file.leftAlone,img.leftAlone{clear:both;float:none;margin-left:0;margin-right:auto}.captionImage.end,.captionImage.right,.image.end,.image.right,.ss-htmleditorfield-file.end,.ss-htmleditorfield-file.right,img.end,img.right{clear:right;float:right}@media(min-width:576px){.captionImage.end,.captionImage.right,.image.end,.image.right,.ss-htmleditorfield-file.end,.ss-htmleditorfield-file.right,img.end,img.right{margin:1em 0 0 1em}}.captionImage.rightAlone,.image.rightAlone,.ss-htmleditorfield-file.rightAlone,img.rightAlone{clear:both;float:none;margin-left:auto;margin-right:0}.captionImage iframe,.image iframe,.ss-htmleditorfield-file iframe,img iframe{max-height:100%!important;width:100%!important}.captionImage img{margin-bottom:1em!important}.captionImage .caption{font-size:.8em}.left,.text-left,.text-start{text-align:left}.center,.text-center{text-align:center}.right,.text-end,.text-right{text-align:right}.text-justify{text-align:justify}table{border-collapse:collapse;max-width:100%;width:100%}table.table-none{border:0;margin-left:-.5em;margin-right:-.5em}table.table-none td,table.table-none th,table.table-none tr{background:none!important;border:0;box-shadow:none!important}ol,ul{padding-left:2em}ol li,ul li{margin:.5em 0;position:relative}ol{padding-left:2em}iframe,img,p,table,td,th,tr{max-width:100%!important}@media(max-width:575px){iframe,img,p,table,td,th,tr{border:0!important;display:block;padding-left:0!important;padding-right:0!important;width:100%!important}img,p,table,td,th,tr{height:auto!important}.d-typography-breakpoint-none{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}thead{display:block;text-align:center}thead>tr{display:flex}tbody{display:block}td{display:flex;flex-direction:column}td[data-label]:before{content:attr(data-label);display:block;font-weight:700;min-width:50%;padding:0 .5em;width:50%}}img{border:1px dashed}.ss-htmleditorfield-file.embed{position:relative}.ss-htmleditorfield-file.embed:before{content:"";display:block;padding-top:75%;position:relative;width:100%}.ss-htmleditorfield-file.embed iframe{bottom:0;left:0;position:absolute;right:0;top:0}img:last-child{margin-bottom:0!important}.table-none tr:last-child>td{padding-bottom:0}

dist/css/app_order.css

@@ -0,0 +1 @@
+h1.title{border-bottom:1px solid #dee2e6;display:block;line-height:1.5em;text-align:right;text-transform:uppercase}.warningMessage{background-color:#fff3cd;border:var(--bs-border-width) solid #ffeeba;border-color:transparent;border-radius:var(--bs-border-radius);color:#856404;margin-bottom:1rem;padding:1rem;position:relative}#Content{margin:auto;padding-left:20px;text-align:left}#Content .emailTitle{font-family:var(--bs-font-sans-serif);font-size:2.5rem;font-weight:400}#Content .PageTitle{color:#212529;font-family:var(--bs-font-sans-serif);font-size:14px;padding:5px}#Content .footer td{padding:10px}#Content .footer td.right{text-align:right}#Content .typography{padding:0 10px}#Content .typography a{font-size:1em;text-decoration:underline}#Content .typography a:hover{text-decoration:none}#Content .typography ul{padding:2px 15px}#Content .typography ul li{padding:2px 5px}#Content .typography p{color:#212529;margin:.75em 0}table#SenderTable .meta,table#SenderTable .sender{width:50%}table#MetaTable{margin-left:auto}table#MetaTable .label{font-weight:700}#ShippingTable td,#ShippingTable th{width:50%}table.infotable{background:#fff;border:1px solid #dee2e6;border-collapse:collapse;margin-top:10px;width:100%}table.infotable td.product.title{color:#0d6efd;font-family:var(--bs-font-sans-serif);font-size:1.75rem;font-weight:400}table.infotable tr td,table.infotable tr th{border:1px solid #dee2e6;color:#212529;padding:5px}table.infotable td{vertical-align:middle}table.infotable tr.summary{font-weight:700}table.infotable td.ordersummary{border-bottom:1px solid #dee2e6;font-size:1em}table.infotable tr th{font-weight:700}table.infotable tr td a{color:#0d6efd;text-decoration:underline}table.infotable tr td a:hover{text-decoration:none}table.infotable .modifierRow,table.infotable .right,table.infotable .threeColHeader{text-align:right}table.infotable .center{text-align:center}table.infotable .left,table.infotable th{text-align:left}

dist/icons/browserconfig.xml

@@ -1,15 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <browserconfig>
-    <msapplication>
-        <tile>
-            <square70x70logo src="mstile-70x70.png"/>
-            <square150x150logo src="mstile-150x150.png"/>
-            <wide310x150logo src="mstile-310x150.png"/>
-            <square310x310logo src="mstile-310x310.png"/>
-            <TileColor>#fff</TileColor>
-
-        </tile>
-
-    </msapplication>
-
-</browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="mstile-70x70.png"/>
+      <square150x150logo src="mstile-150x150.png"/>
+      <wide310x150logo src="mstile-310x150.png"/>
+      <square310x310logo src="mstile-310x310.png"/>
+      <TileColor>#fff</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

dist/icons/manifest.webapp

@@ -1,14 +0,0 @@
-{
-  "version": "4.3.2",
-  "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
-  "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
-  "icons": {
-    "60": "firefox_app_60x60.png",
-    "128": "firefox_app_128x128.png",
-    "512": "firefox_app_512x512.png"
-  },
-  "developer": {
-    "name": "Tony Air",
-    "url": null
-  }
-}

dist/icons/manifest.webmanifest

@@ -13,47 +13,56 @@
     {
       "src": "android-chrome-36x36.png",
       "sizes": "36x36",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "android-chrome-48x48.png",
       "sizes": "48x48",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "android-chrome-72x72.png",
       "sizes": "72x72",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "android-chrome-96x96.png",
       "sizes": "96x96",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "android-chrome-144x144.png",
       "sizes": "144x144",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "android-chrome-192x192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "android-chrome-256x256.png",
       "sizes": "256x256",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "android-chrome-384x384.png",
       "sizes": "384x384",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     },
     {
       "src": "android-chrome-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
     }
   ]
 }

dist/icons/yandex-browser-manifest.json

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

dist/index.html

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

dist/js/app.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*!
+ * Get all of an element's parent elements up the DOM tree
+ * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
+ * @param  {Node}   elem     The element
+ * @param  {String} selector Selector to match against [optional]
+ * @return {Array}           The parent elements
+ */

dist/js/app_sw.js

@@ -1 +1 @@
-!function(){var e={987:function(e){e.exports=function log(e){false}},427: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.3.2","-sw"),n=__webpack_require__(987),r=__webpack_require__(427);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={475:function(e){e.exports=function log(e){false}},329: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("5.3.9","-sw"),n=__webpack_require__(475),r=__webpack_require__(329);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))}))}()}();

dist/records.json

@@ -14,44 +14,44 @@
       },
       "modules": {
         "byIdentifier": {
-          "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/runtime/getUrl.js": 278,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./node_modules/.pnpm/@a2nt+meta-lightbox-js@4.1.2_debug@4.3.2/node_modules/@a2nt/meta-lightbox-js/src/html/meta-lightbox.html": 480,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Accordion.html": 656,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Content.html": 503,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/ElementsList.html": 489,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Map.html": 11,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/First.html": 735,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Footer.html": 663,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Head.html": 599,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Last.html": 940,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Navigation.html": 555,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/Slider.html": 473,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/_components/Alerts.html": 939,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/_components/Flyout.html": 796,
-          "./node_modules/.pnpm/html-loader@2.1.2_webpack@5.52.0/node_modules/html-loader/dist/cjs.js!./src/html/_components/LoadingSpinner.html": 676,
-          "./node_modules/.pnpm/html-webpack-plugin@5.3.2_webpack@5.52.0/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 249,
-          "./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.52.0/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/img/logo.svg": 606,
+          "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/runtime/getUrl.js": 16,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./node_modules/.pnpm/@a2nt+meta-lightbox-js@4.2.8/node_modules/@a2nt/meta-lightbox-js/src/html/meta-lightbox.html": 953,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Accordion.html": 777,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Content.html": 373,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/ElementsList.html": 263,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Map.html": 543,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/First.html": 559,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Footer.html": 770,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Head.html": 942,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Last.html": 960,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Navigation.html": 616,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/Slider.html": 339,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/_components/Alerts.html": 58,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/_components/Flyout.html": 626,
+          "./node_modules/.pnpm/html-loader@4.2.0_webpack@5.89.0/node_modules/html-loader/dist/cjs.js!./src/html/_components/LoadingSpinner.html": 718,
+          "./node_modules/.pnpm/html-webpack-plugin@5.5.3_webpack@5.89.0/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 157,
+          "./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0_webpack@5.89.0/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/img/logo.svg": 22,
           "javascript/esm|data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;": 163
         },
         "usedIds": [
-          11,
+          16,
+          22,
+          58,
+          157,
           163,
-          249,
-          278,
-          473,
-          480,
-          489,
-          503,
-          555,
-          599,
-          606,
-          656,
-          663,
-          676,
-          735,
-          796,
-          939,
-          940
+          263,
+          339,
+          373,
+          543,
+          559,
+          616,
+          626,
+          718,
+          770,
+          777,
+          942,
+          953,
+          960
         ]
       }
     }
@@ -59,106 +59,218 @@
   "chunks": {
     "byName": {
       "app": 143,
+      "app_cms": 498,
+      "app_editor": 831,
       "app_map.api": 615,
+      "app_order": 299,
       "app_sw": 898
     },
     "bySource": {
       "0 app": 143,
+      "0 app_cms": 498,
+      "0 app_editor": 831,
       "0 app_map.api": 615,
+      "0 app_order": 299,
       "0 app_sw": 898
     },
     "usedIds": [
       143,
+      299,
+      498,
       615,
+      831,
       898
     ]
   },
+  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.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@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/api.js": 962,
+          "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/getUrl.js": 687,
+          "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 115,
+          "./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/app.scss": 989,
+          "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=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%28255, 255, 255, 0.25%29%27/%3e%3c/svg%3e": 991,
+          "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 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z%27/%3e%3c/svg%3e": 254,
+          "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 5 6 6 6-6%27/%3e%3c/svg%3e": 770,
+          "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%23dee2e6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e": 711,
+          "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 10 3 3 6-6%27/%3e%3c/svg%3e": 199,
+          "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 30 30%27%3e%3cpath stroke=%27rgba%2833, 37, 41, 0.75%29%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e": 221,
+          "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.73.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": 122
+        },
+        "usedIds": [
+          115,
+          122,
+          144,
+          199,
+          204,
+          221,
+          254,
+          469,
+          486,
+          609,
+          687,
+          711,
+          770,
+          931,
+          956,
+          962,
+          989,
+          991
+        ]
+      }
+    }
+  ],
+  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.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@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/api.js": 962,
+          "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 115,
+          "./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/cms.scss": 341
+        },
+        "usedIds": [
+          115,
+          341,
+          962
+        ]
+      }
+    }
+  ],
+  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.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@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/api.js": 962,
+          "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 115,
+          "./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/editor.scss": 528
+        },
+        "usedIds": [
+          115,
+          528,
+          962
+        ]
+      }
+    }
+  ],
+  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.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@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/api.js": 962,
+          "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 115,
+          "./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/map.api.scss": 337
+        },
+        "usedIds": [
+          115,
+          337,
+          962
+        ]
+      }
+    }
+  ],
+  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.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@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/api.js": 962,
+          "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/runtime/sourceMaps.js": 115,
+          "./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/order.scss": 896
+        },
+        "usedIds": [
+          115,
+          896,
+          962
+        ]
+      }
+    }
+  ],
   "modules": {
     "byIdentifier": {
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/index.js": 617,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/adapters/xhr.js": 990,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/axios.js": 456,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/cancel/Cancel.js": 681,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/cancel/CancelToken.js": 335,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/cancel/isCancel.js": 114,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/Axios.js": 963,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/InterceptorManager.js": 550,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/buildFullPath.js": 215,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/createError.js": 547,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/dispatchRequest.js": 404,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/enhanceError.js": 420,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/mergeConfig.js": 881,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/settle.js": 72,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/core/transformData.js": 647,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/defaults.js": 754,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/bind.js": 691,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/buildURL.js": 359,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/combineURLs.js": 981,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/cookies.js": 894,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/isAbsoluteURL.js": 53,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/isAxiosError.js": 481,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/isURLSameOrigin.js": 763,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/normalizeHeaderName.js": 698,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/parseHeaders.js": 758,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/spread.js": 852,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/helpers/validator.js": 938,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/lib/utils.js": 390,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/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": 525,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/libs/log.js": 987,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/test-build.js|268c1c1e83b1ec0940dacaf584167fe5": 843,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/types/sw.js": 55,
-      "./node_modules/.pnpm/babel-loader@8.2.2_02ab79faf18a98050fd2cd956ffa58f7/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./thirdparty/serviceworker-caches.js": 427,
-      "./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.52.0/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/img/bg.png": 829,
-      "./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.52.0/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/img/logo.svg": 606,
-      "./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.52.0/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/img/photo1.png": 847,
-      "./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.52.0/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/img/photo3.svg": 46,
-      "./node_modules/.pnpm/mini-css-extract-plugin@2.2.2_webpack@5.52.0/node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/.pnpm/css-loader@6.2.0_webpack@5.52.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@4.0.0/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@12.1.0_sass@1.39.0+webpack@5.52.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/types/map.api.scss": 989,
-      "./node_modules/font-awesome|sync|nonrecursive|../../../../../../\\.(otf|eot|svg|ttf|woff|woff2)$/": 761,
-      "./src/img|sync|nonrecursive|../../../../../../\\.(png|jpe?g|svg)$/": 310,
-      "json|./node_modules/.pnpm/axios@0.21.4_debug@4.3.2/node_modules/axios/package.json": 671
+      "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/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": 679,
+      "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|a95075467e0faad8e4dd1e50002c3f08": 570,
+      "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/libs/log.js": 475,
+      "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/main/funcs.js": 802,
+      "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/types/sw.js": 378,
+      "./node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.23.2_webpack@5.89.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./thirdparty/serviceworker-caches.js": 329,
+      "./node_modules/.pnpm/mini-css-extract-plugin@2.7.6_webpack@5.89.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/cms.scss": 118,
+      "./node_modules/.pnpm/mini-css-extract-plugin@2.7.6_webpack@5.89.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/editor.scss": 190,
+      "./node_modules/.pnpm/mini-css-extract-plugin@2.7.6_webpack@5.89.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/map.api.scss": 928,
+      "./node_modules/.pnpm/mini-css-extract-plugin@2.7.6_webpack@5.89.0/node_modules/mini-css-extract-plugin/dist/loader.js??ruleSet[1].rules[1].use[0]!./node_modules/.pnpm/css-loader@6.8.1_webpack@5.89.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/sass-loader@13.3.2_sass@1.69.5_webpack@5.89.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/scss/types/order.scss": 198
     },
     "usedIds": [
-      46,
-      53,
-      55,
-      72,
-      114,
-      215,
-      310,
-      335,
-      359,
-      390,
-      404,
-      420,
-      427,
-      456,
-      481,
-      525,
-      547,
-      550,
-      606,
-      617,
-      647,
-      671,
-      681,
-      691,
-      698,
-      754,
-      758,
-      761,
-      763,
-      829,
-      843,
-      847,
-      852,
-      881,
-      894,
-      938,
-      963,
-      981,
-      987,
-      989,
-      990
+      118,
+      190,
+      198,
+      329,
+      378,
+      475,
+      570,
+      679,
+      802,
+      928
     ]
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
-  "version": "4.3.2",
+  "version": "5.3.9",
   "description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
   "author": "Tony Air <tony@twma.pro>",
   "license": "BSD-2-Clause",
@@ -17,17 +17,17 @@
     "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.serve.js",
     "dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.serve.js",
     "build": "cross-env NODE_ENV=production webpack --progress --stats-all",
-    "lint:fix": "eslint './src/**/*.js' -c eslint.config.json --fix && sass-lint-auto-fix -s -c ./sass-lint.yml './src/**/*.scss'",
+    "lint:fix": "eslint './src/**/*.js' -c eslint.config.json --fix",
     "lint:js": "eslint './src/**/*.js' -c eslint.config.json",
     "lint:scss": "sass-lint ./src/**/*.scss -c sass-lint.yml -v",
     "lint:check": "yarn lint:js && yarn lint:scss",
-    "prebuild": "yarn lint:fix && yarn lint:check && rimraf dist",
+    "prebuild": "yarn lint:fix && rimraf dist",
     "prepare": "yarn build",
     "prunecaches": "rimraf ./node_modules/.cache/",
-    "postinstall": "npm run prunecaches",
-    "postuninstall": "npm run prunecaches",
-    "preinstall": "npx only-allow pnpm",
-    "update": "npx msw init ./src/_graphql"
+    "preinstall": "npx only-allow pnpm"
+  },
+  "resolutions": {
+    "colors": "1.4.0"
   },
   "directories": {
     "assets": {
@@ -49,141 +49,155 @@
     "ie>=11"
   ],
   "dependencies": {
-    "@a2nt/meta-lightbox-js": "^4.1.2",
-    "@angular/common": "^12.2.5",
-    "@angular/core": "^12.2.5",
-    "@apollo/client": "^3.4.10",
-    "@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed",
-    "@popperjs/core": "^2.10.1",
+    "@a2nt/meta-lightbox-js": "^4.2.8",
+    "@angular/common": "^17.0.0",
+    "@angular/core": "^17.0.0",
+    "@apollo/client": "^3.8.7",
+    "@glidejs/glide": "^3.6.0",
+    "@popperjs/core": "^2.11.8",
+    "@turf/clone": "^6.5.0",
+    "@turf/clusters-dbscan": "^6.5.0",
+    "@turf/clusters-kmeans": "^6.5.0",
+    "@turf/distance": "^6.5.0",
+    "@turf/helpers": "^6.5.0",
+    "@turf/invariant": "^6.5.0",
+    "@turf/meta": "^6.5.0",
     "aos": "^2.3.4",
-    "apollo3-cache-persist": "^0.12.1",
-    "axios": "^0.21.4",
-    "balanced-match": "^2.0.0",
-    "bootbox": "^5.5.2",
-    "bootstrap": "^5.1.1",
-    "brace-expansion": "^2.0.1",
+    "apollo3-cache-persist": "^0.14.1",
+    "balanced-match": "^3.0.1",
+    "bootstrap": "^5.3.2",
+    "brace-expansion": "^3.0.0",
+    "choices.js": "^10.2.0",
+    "density-clustering": "^1.3.0",
+    "eslint-scope": "^7.2.2",
+    "fast-deep-equal": "^3.1.3",
     "font-awesome": "^4.7.0",
-    "graphql": "^15.5.3",
+    "graphql": "^16.8.1",
     "hammerjs": "^2.0.8",
-    "inputmask": "^5.0.6",
-    "keyboardjs": "^2.6.4",
+    "inputmask": "^5.0.8",
+    "kdbush": "^4.0.2",
+    "keyboardjs": "^2.7.0",
     "localforage": "^1.10.0",
     "localforage-cordovasqlitedriver": "^1.8.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^2.4.1",
+    "mapbox-gl": "^2.15.0",
     "material-design-color": "^2.3.2",
-    "minimatch": "^3.0.4",
-    "moment": "^2.29.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-easy-swipe": "^0.0.22",
+    "minimatch": "^9.0.3",
+    "moment": "^2.29.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-easy-swipe": "^0.0.23",
     "react-tiny-oembed": "^1.1.0",
-    "redux": "^4.1.1",
-    "rxjs": "^7.3.0",
+    "redaxios": "^0.5.1",
+    "redux": "^4.2.1",
+    "rxjs": "^7.8.1",
     "select2": "^4.0.13",
     "setimmediate": "^1.0.5",
-    "vanillajs-datepicker": "^1.1.4",
+    "skmeans": "^0.11.3",
+    "supercluster": "^8.0.1",
+    "vanillajs-datepicker": "^1.3.4",
     "youtube-embed": "^1.0.0"
   },
   "devDependencies": {
     "@a2nt/image-sprite-webpack-plugin": "^0.2.5",
-    "@babel/core": "^7.15.5",
-    "@babel/eslint-parser": "^7.15.4",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-    "@babel/plugin-syntax-jsx": "^7.14.5",
+    "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-syntax-jsx": "^7.22.5",
     "@babel/plugin-syntax-top-level-await": "^7.14.5",
-    "@babel/plugin-transform-react-jsx": "^7.14.9",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/plugin-transform-typescript": "^7.15.4",
-    "@babel/preset-env": "^7.15.4",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/runtime": "^7.15.4",
-    "@googlemaps/markerclustererplus": "*",
+    "@babel/plugin-transform-react-jsx": "^7.22.15",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/plugin-transform-typescript": "^7.22.15",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/runtime": "^7.23.2",
+    "@googlemaps/markerclusterer": "^2.5.1",
     "@sucrase/webpack-loader": "^2.0.0",
     "@ungap/global-this": "^0.4.4",
-    "@wry/context": "^0.6.1",
-    "@wry/equality": "^0.5.2",
-    "@wry/trie": "^0.3.1",
+    "@wry/context": "^0.7.4",
+    "@wry/equality": "^0.5.7",
+    "@wry/trie": "^0.5.0",
     "animate.css": "^4.1.1",
-    "ansi-html": "^0.0.7",
+    "ansi-html": "^0.0.9",
     "ansi-html-community": "^0.0.8",
-    "ansi-regex": "^6.0.0",
-    "autoprefixer": "^10.3.4",
-    "babel-loader": "^8.2.2",
-    "classnames": "^2.3.1",
-    "copy-webpack-plugin": "^9.0.1",
+    "ansi-regex": "^6.0.1",
+    "autoprefixer": "^10.4.16",
+    "babel-loader": "^9.1.3",
+    "classnames": "^2.3.2",
+    "copy-webpack-plugin": "^11.0.0",
     "croppie": "^2.6.5",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.2.0",
-    "css-minimizer-webpack-plugin": "^3.0.2",
-    "debug": "^4.3.2",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.24.2",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "debug": "^4.3.4",
+    "eslint": "^8.53.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-jquery": "^1.5.1",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react": "^7.33.2",
     "events": "^3.3.0",
     "exif-js": "^2.3.0",
-    "exports-loader": "^3.0.0",
+    "exports-loader": "^4.0.0",
     "fast-json-stable-stringify": "^2.1.0",
     "fast-levenshtein": "^3.0.0",
-    "fastest-levenshtein": "^1.0.12",
-    "favicons": "^6.2.2",
-    "favicons-webpack-plugin": "5.0.2",
+    "fastest-levenshtein": "^1.0.16",
+    "favicons": "^7.1.4",
+    "favicons-webpack-plugin": "6.0.1",
     "file-loader": "^6.2.0",
-    "graphql-tag": "^2.12.5",
+    "graphql-tag": "^2.12.6",
     "hoist-non-react-statics": "^3.3.2",
-    "html-dom-parser": "^1.0.2",
-    "html-entities": "^2.3.2",
-    "html-loader": "^2.1.2",
-    "html-react-parser": "^1.3.0",
-    "html-webpack-plugin": "^5.3.2",
+    "html-dom-parser": "^5.0.4",
+    "html-entities": "^2.4.0",
+    "html-loader": "^4.2.0",
+    "html-react-parser": "^5.0.6",
+    "html-webpack-plugin": "^5.5.3",
     "img-optimize-loader": "^1.0.7",
-    "loglevel": "^1.7.1",
-    "mini-css-extract-plugin": "^2.2.2",
+    "loglevel": "^1.8.1",
+    "mini-css-extract-plugin": "^2.7.6",
     "ms": "^2.1.3",
-    "msw": "^0.35.0",
-    "node-fetch": "^3.0.0",
+    "msw": "^2.0.4",
+    "node-fetch": "^3.3.2",
     "object-assign": "^4.1.1",
-    "optimism": "^0.16.1",
-    "postcss-loader": "^6.1.1",
-    "prop-types": "^15.7.2",
-    "punycode": "^2.1.1",
+    "optimism": "^0.17.5",
+    "postcss-loader": "^7.3.3",
+    "prop-types": "^15.8.1",
+    "punycode": "^2.3.1",
     "querystring": "^0.2.1",
     "raw-loader": "^4.0.2",
-    "react-hot-loader": "^4.13.0",
-    "react-is": "^17.0.2",
+    "react-hot-loader": "^4.13.1",
+    "react-is": "^18.2.0",
     "react-lifecycles-compat": "^3.0.4",
-    "regenerator-runtime": "^0.13.9",
-    "resolve-url-loader": "^4.0.0",
-    "rimraf": "^3.0.2",
+    "regenerator-runtime": "^0.14.0",
+    "resolve-url-loader": "^5.0.0",
+    "rimraf": "^5.0.5",
     "routie": "0.0.1",
-    "sass": "*",
+    "sass": "^1.69.5",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.2",
     "sass-lint-fix": "^1.12.1",
-    "sass-loader": "^12.1.0",
-    "scheduler": "^0.20.2",
+    "sass-loader": "^13.3.2",
+    "scheduler": "^0.23.0",
     "shallowequal": "^1.1.0",
-    "strip-ansi": "^7.0.0",
-    "style-loader": "^3.2.1",
-    "sucrase": "^3.20.1",
-    "svg-url-loader": "^7.1.1",
+    "strip-ansi": "^7.1.0",
+    "style-loader": "^3.3.3",
+    "sucrase": "^3.34.0",
+    "svg-url-loader": "^8.0.0",
     "symbol-observable": "^4.0.0",
-    "terser-webpack-plugin": "^5.2.3",
-    "ts-invariant": "^0.9.1",
-    "tslib": "^2.3.1",
-    "url": "^0.11.0",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-invariant": "^0.10.3",
+    "tslib": "^2.6.2",
+    "url": "^0.11.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.52.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.1.1",
-    "webpack-manifest-plugin": "^4.0.2",
-    "webpack-merge": "^5.8.0",
-    "yarn": "^1.22.11",
-    "zen-observable": "^0.8.15",
+    "webpack": "^5.89.0",
+    "webpack-build-notifications": "^0.3.2",
+    "webpack-bundle-analyzer": "^4.9.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-manifest-plugin": "^5.0.0",
+    "webpack-merge": "^5.10.0",
+    "yarn": "^1.22.19",
+    "zen-observable": "^0.10.0",
     "zen-observable-ts": "^1.1.0"
   },
   "stylelint": {

sass-lint.yml

@@ -1,8 +1,8 @@
 # sass-lint config to match the AirBNB style guide
 files:
-  include: 'src/**/*.scss'
+  include: "app/client/src/**/*.scss"
   ignore:
-    - 'src/thirdparty/*'
+    - "app/client/src/thirdparty/*"
 options:
   formatter: stylish
   merge-default-rules: false
@@ -23,10 +23,10 @@ rules:
   no-misspelled-properties:
     - 1
     - extra-properties:
-        - '-moz-border-radius-topleft'
-        - '-moz-border-radius-topright'
-        - '-moz-border-radius-bottomleft'
-        - '-moz-border-radius-bottomright'
+        - "-moz-border-radius-topleft"
+        - "-moz-border-radius-topright"
+        - "-moz-border-radius-bottomleft"
+        - "-moz-border-radius-bottomright"
   variable-name-format:
     - 1
     - allow-leading-underscore: true
@@ -40,14 +40,12 @@ rules:
   # Things that can be easily fixed are marked as errors
   indentation:
     - 2
-    - size: 2
-  final-newline:
-    - 2
-    - include: true
+    - size: 4
+  final-newline: false
   no-trailing-whitespace: 2
   border-zero:
     - 2
-    - convention: '0'
+    - convention: "0"
   brace-style:
     - 2
     - allow-single-line: true
@@ -56,7 +54,7 @@ rules:
     - filename-extension: false
     - leading-underscore: true
   no-debug: 2
-  no-empty-rulesets: 2
+  no-empty-rulesets: 0
   no-invalid-hex: 2
   no-mergeable-selectors: 2
   # no-qualifying-elements:

src/_graphql/mockServiceWorker.js

@@ -2,22 +2,22 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.35.0).
+ * Mock Service Worker (2.0.4).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
  */
 
-const INTEGRITY_CHECKSUM = 'f0a916b13c8acc2b526a03a6d26df85f'
-const bypassHeaderName = 'x-msw-bypass'
+const INTEGRITY_CHECKSUM = '0877fcdc026242810f5bfde0d7178db4'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
 self.addEventListener('install', function () {
-  return self.skipWaiting()
+  self.skipWaiting()
 })
 
-self.addEventListener('activate', async function (event) {
-  return self.clients.claim()
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
 })
 
 self.addEventListener('message', async function (event) {
@@ -33,7 +33,9 @@ self.addEventListener('message', async function (event) {
     return
   }
 
-  const allClients = await self.clients.matchAll()
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
 
   switch (event.data) {
     case 'KEEPALIVE_REQUEST': {
@@ -83,169 +85,8 @@ self.addEventListener('message', async function (event) {
   }
 })
 
-// Resolve the "master" client for the given event.
-// Client that issues a request doesn't necessarily equal the client
-// that registered the worker. It's with the latter the worker should
-// communicate with during the response resolving phase.
-async function resolveMasterClient(event) {
-  const client = await self.clients.get(event.clientId)
-
-  if (client.frameType === 'top-level') {
-    return client
-  }
-
-  const allClients = await self.clients.matchAll()
-
-  return allClients
-    .filter((client) => {
-      // Get only those clients that are currently visible.
-      return client.visibilityState === 'visible'
-    })
-    .find((client) => {
-      // Find the client ID that's recorded in the
-      // set of clients that have registered the worker.
-      return activeClientIds.has(client.id)
-    })
-}
-
-async function handleRequest(event, requestId) {
-  const client = await resolveMasterClient(event)
-  const response = await getResponse(event, client, requestId)
-
-  // Send back the response clone for the "response:*" life-cycle events.
-  // Ensure MSW is active and ready to handle the message, otherwise
-  // this message will pend indefinitely.
-  if (client && activeClientIds.has(client.id)) {
-    ;(async function () {
-      const clonedResponse = response.clone()
-      sendToClient(client, {
-        type: 'RESPONSE',
-        payload: {
-          requestId,
-          type: clonedResponse.type,
-          ok: clonedResponse.ok,
-          status: clonedResponse.status,
-          statusText: clonedResponse.statusText,
-          body:
-            clonedResponse.body === null ? null : await clonedResponse.text(),
-          headers: serializeHeaders(clonedResponse.headers),
-          redirected: clonedResponse.redirected,
-        },
-      })
-    })()
-  }
-
-  return response
-}
-
-async function getResponse(event, client, requestId) {
-  const { request } = event
-  const requestClone = request.clone()
-  const getOriginalResponse = () => fetch(requestClone)
-
-  // Bypass mocking when the request client is not active.
-  if (!client) {
-    return getOriginalResponse()
-  }
-
-  // Bypass initial page load requests (i.e. static assets).
-  // The absence of the immediate/parent client in the map of the active clients
-  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
-  // and is not ready to handle requests.
-  if (!activeClientIds.has(client.id)) {
-    return await getOriginalResponse()
-  }
-
-  // Bypass requests with the explicit bypass header
-  if (requestClone.headers.get(bypassHeaderName) === 'true') {
-    const cleanRequestHeaders = serializeHeaders(requestClone.headers)
-
-    // Remove the bypass header to comply with the CORS preflight check.
-    delete cleanRequestHeaders[bypassHeaderName]
-
-    const originalRequest = new Request(requestClone, {
-      headers: new Headers(cleanRequestHeaders),
-    })
-
-    return fetch(originalRequest)
-  }
-
-  // Send the request to the client-side MSW.
-  const reqHeaders = serializeHeaders(request.headers)
-  const body = await request.text()
-
-  const clientMessage = await sendToClient(client, {
-    type: 'REQUEST',
-    payload: {
-      id: requestId,
-      url: request.url,
-      method: request.method,
-      headers: reqHeaders,
-      cache: request.cache,
-      mode: request.mode,
-      credentials: request.credentials,
-      destination: request.destination,
-      integrity: request.integrity,
-      redirect: request.redirect,
-      referrer: request.referrer,
-      referrerPolicy: request.referrerPolicy,
-      body,
-      bodyUsed: request.bodyUsed,
-      keepalive: request.keepalive,
-    },
-  })
-
-  switch (clientMessage.type) {
-    case 'MOCK_SUCCESS': {
-      return delayPromise(
-        () => respondWithMock(clientMessage),
-        clientMessage.payload.delay,
-      )
-    }
-
-    case 'MOCK_NOT_FOUND': {
-      return getOriginalResponse()
-    }
-
-    case 'NETWORK_ERROR': {
-      const { name, message } = clientMessage.payload
-      const networkError = new Error(message)
-      networkError.name = name
-
-      // Rejecting a request Promise emulates a network error.
-      throw networkError
-    }
-
-    case 'INTERNAL_ERROR': {
-      const parsedBody = JSON.parse(clientMessage.payload.body)
-
-      console.error(
-        `\
-[MSW] Uncaught exception in the request handler for "%s %s":
-
-${parsedBody.location}
-
-This exception has been gracefully handled as a 500 response, however, it's strongly recommended to resolve this error, as it indicates a mistake in your code. If you wish to mock an error response, please see this guide: https://mswjs.io/docs/recipes/mocking-error-responses\
-`,
-        request.method,
-        request.url,
-      )
-
-      return respondWithMock(clientMessage)
-    }
-  }
-
-  return getOriginalResponse()
-}
-
 self.addEventListener('fetch', function (event) {
   const { request } = event
-  const accept = request.headers.get('accept') || ''
-
-  // Bypass server-sent events.
-  if (accept.includes('text/event-stream')) {
-    return
-  }
 
   // Bypass navigation requests.
   if (request.mode === 'navigate') {
@@ -265,42 +106,154 @@ self.addEventListener('fetch', function (event) {
     return
   }
 
-  const requestId = uuidv4()
-
-  return event.respondWith(
-    handleRequest(event, requestId).catch((error) => {
-      if (error.name === 'NetworkError') {
-        console.warn(
-          '[MSW] Successfully emulated a network error for the "%s %s" request.',
-          request.method,
-          request.url,
-        )
-        return
-      }
-
-      // At this point, any exception indicates an issue with the original request/response.
-      console.error(
-        `\
-[MSW] Caught an exception from the "%s %s" request (%s). This is probably not a problem with Mock Service Worker. There is likely an additional logging output above.`,
-        request.method,
-        request.url,
-        `${error.name}: ${error.message}`,
-      )
-    }),
-  )
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
 })
 
-function serializeHeaders(headers) {
-  const reqHeaders = {}
-  headers.forEach((value, name) => {
-    reqHeaders[name] = reqHeaders[name]
-      ? [].concat(reqHeaders[name]).concat(value)
-      : value
-  })
-  return reqHeaders
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const responseClone = response.clone()
+      // When performing original requests, response body will
+      // always be a ReadableStream, even for 204 responses.
+      // But when creating a new Response instance on the client,
+      // the body for a 204 response must be null.
+      const responseBody = response.status === 204 ? null : responseClone.body
+
+      sendToClient(
+        client,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseBody,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseBody],
+      )
+    })()
+  }
+
+  return response
 }
 
-function sendToClient(client, message) {
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
+
+  function passthrough() {
+    const headers = Object.fromEntries(requestClone.headers.entries())
+
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  const mswIntention = request.headers.get('x-msw-intention')
+  if (['bypass', 'passthrough'].includes(mswIntention)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'MOCK_NOT_FOUND': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message, transferrables = []) {
   return new Promise((resolve, reject) => {
     const channel = new MessageChannel()
 
@@ -312,27 +265,28 @@ function sendToClient(client, message) {
       resolve(event.data)
     }
 
-    client.postMessage(JSON.stringify(message), [channel.port2])
+    client.postMessage(
+      message,
+      [channel.port2].concat(transferrables.filter(Boolean)),
+    )
   })
 }
 
-function delayPromise(cb, duration) {
-  return new Promise((resolve) => {
-    setTimeout(() => resolve(cb()), duration)
-  })
-}
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
 
-function respondWithMock(clientMessage) {
-  return new Response(clientMessage.payload.body, {
-    ...clientMessage.payload,
-    headers: clientMessage.payload.headers,
-  })
-}
+  const mockedResponse = new Response(response.body, response)
 
-function uuidv4() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = (Math.random() * 16) | 0
-    const v = c == 'x' ? r : (r & 0x3) | 0x8
-    return v.toString(16)
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
   })
+
+  return mockedResponse
 }

src/js/_consts.js

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

src/js/_events.js

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

src/js/ajax/apollo/cache.js

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

src/js/ajax/apollo/init.js

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

src/js/ajax/form.js

@@ -0,0 +1,211 @@
+
+import Events from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_events'
+
+const NAME = 'uiAjaxForm'
+const CONTAINER_CLASS = 'form-container'
+
+const submitForm = (e) => {
+  const form = e.currentTarget
+
+  e.preventDefault()
+
+  console.log(`${NAME}: submit`)
+  const data = new FormData(form);
+  const parent = form.parentElement;
+  const btns = form.querySelectorAll('input[type="submit"],button')
+  const id = form.getAttribute('ID')
+
+  btns.forEach((el) => {
+    el.setAttribute('disabled', 'disabled')
+  })
+  data.append('formid', id)
+  data.append('ajax', '1')
+
+
+  clearAlerts(form)
+
+  parent.classList.remove('loaded')
+  parent.classList.add('loading')
+
+  fetch(form.action, {
+    method: form.method,
+    headers: {
+      'x-requested-with': 'XMLHttpRequest',
+      'x-requested-form': id,
+    },
+    body: data,
+  })
+    .then(async (resp) => {
+      if (!resp.ok) {
+        console.error(`${NAME}: BAD RESPONSE`)
+        console.log(resp)
+        return
+      }
+      const body = resp.text().then((html) => {
+        const result = processResponse(html)
+        if (result.json) {
+          return formProcessJson(form, result.data)
+        }
+
+        return replaceForm(form, result.data)
+      })
+    })
+}
+
+const clearAlerts = (form) => {
+  form.querySelectorAll('.field__alert,.form__message').forEach((el) => {
+    el.remove()
+  })
+}
+
+const processResponse = (html) => {
+  try {
+    let json = JSON.parse(html)
+
+    if (json.MainContent) {
+      try {
+        json = JSON.parse(json.MainContent)
+
+        return {
+          json: true,
+          data: json,
+        }
+
+      } catch (e) {
+        return {
+          json: false,
+          data: json.MainContent,
+        }
+      }
+    }
+
+    return {
+      json: true,
+      data: json,
+    }
+  } catch (e) {
+    return {
+      json: false,
+      data: html,
+    }
+  }
+}
+
+
+const isAlertResponse = (msg) => {
+  return msg.indexOf('class="alert') || msg.indexOf('class=\'alert')
+}
+
+const formProcessJson = (form, json) => {
+  const status = json.status === 'good' || 'success' ? 'success' : 'danger'
+
+  if (json.location) {
+    console.log(`${NAME}: Redirect`)
+
+    if (!json.loadAjax && typeof window.app.Router !== 'undefined') {
+      const link = document.createElement('a')
+      link.setAttribute('href', json.location)
+      window.app.Router.linkClick(link, new Event('click'))
+    } else {
+      window.location = json.location
+    }
+
+    return setLoaded(form)
+  }
+
+  if (json.msgs) {
+    const fieldset = form.querySelector('.form__fieldset')
+
+    json.msgs.forEach((i) => {
+      const msg = document.createElement('div')
+      msg.classList.add(...['field__alert'])
+      if (!isAlertResponse(i.message)) {
+        msg.classList.add(...['alert', `alert-${status}`, `alert-${i.messageCast}`, `${i.messageType}`])
+      }
+
+      msg.innerHTML = i.message
+
+
+      const field = form.querySelector(`[name="${i.fieldName}"],[name^="${i.fieldName}["]`)
+
+      if (field) {
+        field.classList.add('error')
+
+        const fieldContainer = field.closest('.form__field')
+        if (fieldContainer) {
+          fieldContainer.classList.add('error')
+          fieldContainer.appendChild(msg)
+          return
+        }
+      }
+
+      form.insertBefore(msg, fieldset)
+    })
+
+    return setLoaded(form)
+  }
+
+  const replacementHTML = !isAlertResponse(json.message)
+    ? `<div class="alert alert-${status}">${json.message}</div>`
+    : json.message
+
+  return replaceForm(form, replacementHTML)
+}
+
+const setLoaded = (form) => {
+  const parent = form.parentElement;
+
+  parent.classList.remove('loading')
+  parent.classList.add('loaded')
+
+  const btns = form.querySelectorAll('input[type="submit"],button')
+  btns.forEach((el) => {
+    el.removeAttribute('disabled', 'disabled')
+  })
+
+  window.dispatchEvent(new Event(`${Events.AJAX}`))
+}
+
+const replaceForm = (form, html) => {
+  const parent = form.parentElement;
+
+  parent.innerHTML = html
+  parent.classList.remove('loading')
+  parent.classList.add('loaded')
+
+  const newForm = parent.querySelector('form')
+  if (newForm) {
+    newForm.addEventListener('submit', submitForm)
+    return setLoaded(newForm)
+  }
+}
+
+const formInit = (form) => {
+  if (form.dataset[`${NAME}Active`]) {
+    console.log(`${NAME}: #${form.id} already activated`)
+    return false
+  }
+
+  // wrap form
+  const parent = form.parentElement;
+  if (!parent.classList.contains(CONTAINER_CLASS)) {
+    const elHtml = document.createElement('div')
+    elHtml.classList.add(CONTAINER_CLASS)
+    elHtml.append(form)
+    parent.append(elHtml)
+  }
+  //
+
+  form.dataset[`${NAME}Active`] = true
+
+  form.addEventListener('submit', submitForm)
+}
+
+const init = () => {
+  console.log(`${NAME}: init`)
+
+  document.querySelectorAll('#MainContent form:not(.legacy),.ajax-form').forEach(formInit)
+}
+
+window.addEventListener(`${Events.LODEDANDREADY}`, init)
+window.addEventListener(`${Events.AJAX}`, init)

src/js/ajax/lazy-images.js

@@ -1,45 +1,55 @@
 // browser tab visibility state detection
 
-import Events from "../_events";
-import Consts from "../_consts";
-import ImageObject from "./models/image";
+import Events from '../_events'
+import ImageObject from './models/image'
 
 export default ((W) => {
-  const NAME = "main.lazy-images";
-  const D = document;
-  const BODY = D.body;
+  const NAME = 'main.lazy-images'
+  const D = document
 
   const loadLazyImages = () => {
-    console.log(`${NAME}: Load lazy images`);
+    console.log(`${NAME}: Load lazy images`)
+    const base = document.querySelector('base')
+    const baseURL = base ? base.getAttribute('href') : '/'
 
-    D.querySelectorAll(`[data-lazy-src]`).forEach((el) => {
-      el.classList.remove("empty");
 
-      const img = new ImageObject();
-    
-      img.load(el.getAttribute("data-lazy-src"),el)
+    D.querySelectorAll('[data-lazy-src]').forEach((el) => {
+      el.classList.remove('empty')
+
+      const img = new ImageObject()
+      let imgURL = el.getAttribute('data-lazy-src')
+      if (!imgURL.startsWith('http://') && !imgURL.startsWith('https://')) {
+        imgURL = baseURL + el.getAttribute('data-lazy-src')
+      }
+
+      // remove double slash
+      imgURL = imgURL.replace(/([^:]\/)\/+/g, "$1")
+
+      img.load(imgURL, el)
         .then((result) => {
-          el.setAttribute("src", result);
+          el.setAttribute('src', result)
         })
         .catch(() => {
-          el.classList.add("empty");
-        });
-    });
-
-    D.querySelectorAll(`[data-lazy-bg]`).forEach((el) => {
-      el.classList.remove("empty");
-      const img = new ImageObject();
-     
-      img.load(el.getAttribute("data-lazy-bg"),el)
-        .then((result) => {
-          el.style.backgroundImage = `url(${result})`;
+          el.classList.add('empty')
         })
-        .catch(() => {
-          el.classList.add("empty");
-        });
-    });
-  };
+    })
 
-  W.addEventListener(`${Events.LODEDANDREADY}`, loadLazyImages);
-  W.addEventListener(`${Events.AJAX}`, loadLazyImages);
-})(window);
+    D.querySelectorAll('[data-lazy-bg]').forEach((el) => {
+      el.classList.remove('empty')
+      const img = new ImageObject()
+
+      img.load(el.getAttribute('data-lazy-bg'), el)
+        .then((result) => {
+          el.style.backgroundImage = `url(${result})`
+        })
+        .catch((e) => {
+          el.classList.add('empty')
+        })
+    })
+  }
+
+  W.addEventListener(`${Events.LODEDANDREADY}`, loadLazyImages)
+  W.addEventListener(`${Events.AJAX}`, () => {
+    setTimeout(loadLazyImages, 250)
+  })
+})(window)

src/js/ajax/links.js

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

src/js/ajax/models/element.jsx

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

src/js/ajax/models/image.js

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

src/js/ajax/models/page.jsx

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

src/js/ajax/online.js

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

src/js/app.js

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

src/js/drivers/google.track.external.links.js

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

src/js/drivers/map.google.font-icons.js

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

src/js/drivers/map.google.js

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

src/js/drivers/map.google.marker.js

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

src/js/drivers/map.mapbox.js

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

src/js/layout/index.js

@@ -1,26 +1,24 @@
-import Events from "../_events";
+import Events from '../_events'
 
-const LayoutUI = ((W) => {
-  const NAME = "_layout";
-  const D = document;
-  const BODY = D.body;
+const LayoutUI = ((window) => {
+  const NAME = '_layout'
 
-  const init_fonts = () => {
-    console.log(`${NAME}: init_fonts`);
+  const initFonts = () => {
+    console.log(`${NAME}: initFonts`)
 
-    const css = D.createElement("link");
-    css.rel = "stylesheet";
-    css.type = "text/css";
-    css.media = "all";
+    const css = document.createElement('link')
+    css.rel = 'stylesheet'
+    css.type = 'text/css'
+    css.media = 'all'
     css.href =
-      "https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap";
-    D.getElementsByTagName("head")[0].appendChild(css);
-  };
+      'https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'
+    document.getElementsByTagName('head')[0].appendChild(css)
+  }
 
-  const init_analytics = () => {
-    console.log(`${NAME}: init_analytics`);
-    /*google analytics */
-    /*(function(i, s, o, g, r, a, m) {
+  const initAnalytics = () => {
+    console.log(`${NAME}: initAnalytics`)
+    /* google analytics */
+    /* (function(i, s, o, g, r, a, m) {
                   i['GoogleAnalyticsObject'] = r;
                   (i[r] =
                     i[r] ||
@@ -40,12 +38,33 @@ const LayoutUI = ((W) => {
                   'ga',
                 );
                 ga('create', 'UA-********-*', 'auto');
-                ga('send', 'pageview');*/
-  };
+                ga('send', 'pageview'); */
+  }
 
-  W.addEventListener(`${Events.LOADED}`, () => {
-    init_fonts();
-    //init_analytics();
-  });
-})(window);
-export default LayoutUI;
+  // set attributes for mobile friendly tables
+  const initMobileTables = () => {
+    document.querySelectorAll('.typography table').forEach((el) => {
+      const header = el.querySelector('thead tr:first-child')
+      if (!header) {
+        return
+      }
+      header.classList.add('d-typography-breakpoint-none')
+
+      header.querySelectorAll('td').forEach((h) => {
+        el.querySelectorAll(`td:eq(${i})`)
+          .forEach((el) => {
+            if (!el.dataset.label) {
+              el.dataset.label = h.innerText
+            }
+          });
+      });
+    });
+  }
+
+  window.addEventListener(`${Events.LOADED}`, () => {
+    initFonts()
+    initAnalytics()
+    initMobileTables()
+  })
+})(window)
+export default LayoutUI

src/js/libs/log.js

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

src/js/main/css-screen-size.js

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

src/js/main/funcs.js

@@ -1,4 +1,4 @@
-const funcs = {};
+const funcs = {}
 
 /*!
  * Get all of an element's parent elements up the DOM tree
@@ -10,26 +10,42 @@ const funcs = {};
 
 funcs.getParents = (elem, selector) => {
   // Setup parents array
-  const parents = [];
-  let el = elem;
+  const parents = []
+  let el = elem
   // Get matching parent elements
   while (el && el !== document) {
     // If using a selector, add matching parents to array
     // Otherwise, add all parents
     if (selector) {
       if (el.matches(selector)) {
-        parents.push(el);
+        parents.push(el)
       }
     } else {
-      parents.push(el);
+      parents.push(el)
     }
 
     // Jump to the next parent node
-    el = el.parentNode;
+    el = el.parentNode
   }
 
-  return parents;
-};
+  return parents
+}
 
-module.exports = funcs;
-module.exports.default = funcs;
+funcs.ucwords = (strInitial) => {
+  let str = strInitial.toLowerCase();
+  const words = str.split(' ');
+  str = '';
+  for (var i = 0; i < words.length; i++) {
+    let word = words[i];
+    word = word.charAt(0).toUpperCase() + word.slice(1);
+    if (i > 0) { str = `${str  } `; }
+    str = str + word;
+  }
+
+  return str
+}
+
+
+window.globalF = funcs
+module.exports = funcs
+module.exports.default = funcs

src/js/main/index.js

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

src/js/main/loading-spinner.js

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

src/js/main/main.js

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

src/js/main/touch.js

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

src/js/main/visibility.js

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

src/js/store/components/index.js

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

src/js/store/components/page-controls.js

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

src/js/store/configure.js

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

src/js/store/connect.js

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

src/js/store/index.js

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

src/js/store/reducers/counter.js

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

src/js/store/reducers/index.js

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

src/js/test-build.js

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

src/js/types/sw.js

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

src/js/ui/captcha.js

@@ -0,0 +1,76 @@
+import Events from '../_events'
+
+const CaptchaUI = ((window) => {
+  const NAME = 'js-captcha'
+
+  const init = () => {
+    console.log(`${NAME}: init`)
+
+    const submitListener = (e) => {
+      console.log(`${NAME}: Validating Captcha ...`)
+      const field = e.currentTarget.querySelectorAll(`.${NAME}, .g-recaptcha`).forEach((el) => {
+        grecaptcha.execute(el.dataset.widgetid)
+      })
+    }
+
+    const attachCaptcha = () => {
+      console.log(`${NAME}: Rendering Captcha ...`)
+
+      const fields = document.querySelectorAll(`.${NAME}, .g-recaptcha`)
+      const grecaptcha = window.grecaptcha
+
+      fields.forEach((el, i) => {
+        if (el.dataset.widgetid || el.innerHTML !== '') {
+          // already initialized
+          return
+        }
+
+        const form = el.closest(form)
+        const widgetid = grecaptcha.render(el, el.dataset)
+        el.dataset.widgetid = widgetid
+
+        if (el.dataset.size === 'invisible' && !el.dataset.callback) {
+          grecaptcha.execute(widgetid)
+          form.addEventListener('submit', submitListener)
+        }
+
+        el.classList.add(`${NAME}-active`)
+        el.dispatchEvent(new Event(`${NAME}-ready`))
+      })
+    }
+
+
+    window.noCaptchaFieldRender = attachCaptcha
+
+    const loadScript = () => {
+      if (document.getElementById('captchaAPI')) {
+        console.log(`${NAME}: Already loading API`)
+        return
+      }
+
+      console.log(`${NAME}: Loading Captcha API ...`)
+
+      const script = document.createElement('script');
+      script.id = 'captchaAPI';
+      script.src = `https://www.google.com/recaptcha/api.js?onload=noCaptchaFieldRender&render=explicit&hl=${document.querySelector('html').getAttribute('lang').substr(0, 2)}`
+      script.async = true
+
+      document.body.append(script)
+    }
+
+    if (document.querySelectorAll('.g-recaptcha').length) {
+      if (typeof window.grecaptcha !== 'undefined') {
+        attachCaptcha()
+      }
+
+      loadScript();
+    } else {
+      console.log(`${NAME}: No Captcha fields.`)
+    }
+  }
+
+  window.addEventListener(`${Events.LODEDANDREADY}`, init)
+  window.addEventListener(`${Events.AJAX}`, init)
+})(window)
+
+export default CaptchaUI

src/js/ui/carousel.js

@@ -1,136 +1,211 @@
-import Events from "../_events";
-import Carousel from "bootstrap/js/src/carousel";
+import Events from '../_events'
+import Consts from '../_consts'
+import Carousel from 'bootstrap/js/src/carousel'
 
 const CarouselUI = ((window) => {
-  const NAME = "js-carousel";
+  const NAME = 'js-carousel'
 
   const init = () => {
-    console.log(`${NAME}: init`);
+    console.log(`${NAME}: init`)
 
     document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
+      const interval = el.dataset.bsInterval ? parseInt(el.dataset.bsInterval) : false;
       const carousel = new Carousel(el, {
-        interval: el.dataset.bsInterval ? parseInt(el.dataset.bsInterval) : false,
-      });
-      el.ui = carousel;
+        interval,
+      })
+      el.ui = carousel
+      let items = el.querySelectorAll('.carousel-item')
+      let numberOfItems = parseInt(items.length)
 
       // create next/prev arrows
       if (el.dataset.bsArrows) {
-        const next = document.createElement("button");
-        next.classList.add("carousel-control-next");
-        next.setAttribute("type", "button");
-        next.setAttribute("aria-label", "Next Slide");
-        next.setAttribute("data-bs-target", el.getAttribute("id"));
-        next.setAttribute("data-bs-slide", "next");
-        next.addEventListener("click", (e) => {
-          carousel.next();
-        });
+        const next = document.createElement('button')
+        next.classList.add('carousel-control-next')
+        next.setAttribute('type', 'button')
+        next.setAttribute('aria-label', 'Next Slide')
+        next.setAttribute('data-bs-target', el.getAttribute('id'))
+        next.setAttribute('data-bs-slide', 'next')
+        next.addEventListener('click', (e) => {
+          carousel.next()
+        })
         next.innerHTML =
-          '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
-        el.appendChild(next);
+          '<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>'
+        el.appendChild(next)
 
-        const prev = document.createElement("button");
-        prev.setAttribute("type", "button");
-        prev.setAttribute("aria-label", "Previous Slide");
-        prev.classList.add("carousel-control-prev");
-        prev.setAttribute("data-bs-target", el.getAttribute("id"));
-        prev.setAttribute("data-bs-slide", "prev");
-        prev.addEventListener("click", (e) => {
-          carousel.prev();
-        });
+        const prev = document.createElement('button')
+        prev.setAttribute('type', 'button')
+        prev.setAttribute('aria-label', 'Previous Slide')
+        prev.classList.add('carousel-control-prev')
+        prev.setAttribute('data-bs-target', el.getAttribute('id'))
+        prev.setAttribute('data-bs-slide', 'prev')
+        prev.addEventListener('click', (e) => {
+          carousel.prev()
+        })
         prev.innerHTML =
-          '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
-        el.appendChild(prev);
+          '<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>'
+        el.appendChild(prev)
       }
 
       if (el.dataset.bsIndicators) {
-        const indicators = document.createElement("div");
-        indicators.classList.add("carousel-indicators");
-        const items = el.querySelectorAll(".carousel-item");
-        let i = 0;
-        while (i < items.length) {
-          const ind = document.createElement("button");
-          ind.setAttribute("type", "button");
-          ind.setAttribute("aria-label", `Slide to #${i + 1}`);
-          if (i == 0) {
-            ind.classList.add("active");
+        const indicators = document.createElement('div')
+        indicators.classList.add('carousel-indicators')
+        let i = 0
+        while (i < numberOfItems) {
+          const ind = document.createElement('button')
+          ind.setAttribute('type', 'button')
+          ind.setAttribute('aria-label', `Slide to #${i + 1}`)
+          if (i === 0) {
+            ind.classList.add('active')
           }
-          ind.setAttribute("data-bs-target", el.getAttribute("id"));
-          ind.setAttribute("data-bs-slide-to", i);
+          ind.setAttribute('data-bs-target', el.getAttribute('id'))
+          ind.setAttribute('data-bs-slide-to', i)
 
-          ind.addEventListener("click", (e) => {
-            const target = e.target;
-            carousel.to(target.getAttribute("data-bs-slide-to"));
-            indicators.querySelectorAll(".active").forEach((ind2) => {
-              ind2.classList.remove("active");
-            });
-            target.classList.add("active");
-          });
+          ind.addEventListener('click', (e) => {
+            const target = e.target
+            carousel.to(target.getAttribute('data-bs-slide-to'))
+            indicators.querySelectorAll('.active').forEach((ind2) => {
+              ind2.classList.remove('active')
+            })
+            target.classList.add('active')
+          })
 
-          indicators.appendChild(ind);
-          i++;
+          indicators.appendChild(ind)
+          i++
         }
 
-        el.appendChild(indicators);
-        el.addEventListener("slide.bs.carousel", (e) => {
-          el.querySelectorAll(".carousel-indicators .active").forEach(
+        el.appendChild(indicators)
+        el.addEventListener('slide.bs.carousel', (e) => {
+          el.querySelectorAll('.carousel-indicators .active').forEach(
             (ind2) => {
-              ind2.classList.remove("active");
+              ind2.classList.remove('active')
             }
-          );
+          )
           el.querySelectorAll(
             `.carousel-indicators [data-bs-slide-to="${e.to}"]`
           ).forEach((ind2) => {
-            ind2.classList.add("active");
-          });
-        });
+            ind2.classList.add('active')
+          })
+        })
       }
 
-      if(el.classList.contains('carousel-multislide')){
-        const calculate = new ResizeObserver((entries) => {
-          const entry = entries[0];
-          const el = entry.target;
-          const rect = entry.contentRect;
+      if (el.classList.contains('carousel-multislide')) {
+        const inner = el.querySelector('.carousel-inner')
 
-          const width = rect.width;
-          const height = rect.height;
-          const numToDisplay = el.dataset['length'];
-          const itemWidth = width / numToDisplay;
-
-          el.dataset['itemWidth'] = itemWidth;
-          el.dataset['numToDisplay'] = numToDisplay;
-
-          const items = el.querySelectorAll('.carousel-item');
-
-          el.querySelector('.carousel-inner').style.width = `${items.length * itemWidth  }px`;
-          items.forEach((el,i) => {
-            el.style.width = `${itemWidth  }px`;
-          });
+        // add next elements by cloning originals
+        items.forEach((el, i) => {
+          const newItem = el.cloneNode(true);
+          newItem.classList.remove('active');
+          inner.appendChild(newItem);
         });
 
-        calculate.observe(el);
+        items = el.querySelectorAll('.carousel-item')
+        numberOfItems = parseInt(items.length)
+
+        // fix animation glitch
+        inner.style.left = '0px'
+
+        const getNumToDisplay = (el) => {
+          const screenSize = window.detectCSSScreenSize()
+          let curNum = parseInt(el.dataset[`length${window.globalF.ucwords(screenSize)}`]);
+          if(!curNum){
+            curNum = parseInt(el.dataset.length);
+          }
+
+          return Math.min(curNum, numberOfItems)
+        }
+
+        const calculate = (entries) => {
+          const entry = entries[0]
+          const el = entry.target
+          const rect = entry.contentRect
+          //const width = rect.width
+          const width = el.querySelector('.carousel-inner-container').clientWidth
+
+          // const height = rect.height
+          const numToDisplay = getNumToDisplay(el)
+          const itemWidth = width / numToDisplay
+
+          el.dataset.itemWidth = itemWidth
+          el.dataset.numToDisplay = numToDisplay
+
+          inner.style.width = `${numberOfItems * itemWidth}px`
+          items.forEach((el, i) => {
+            el.style.width = `${itemWidth}px`
+          })
+
+          if (numberOfItems === numToDisplay) {
+            el.classList.add(`${NAME}-no-slide`)
+            carousel.pause()
+          }
+        };
+
+        const calcResize = new window.ResizeObserver(calculate)
+
+        calcResize.observe(el)
+        const resetPosition = () => {
+          // disable transition
+          inner.style.transition = 'none'
+          inner.classList.add('no-transition')
+          inner.style.left = '0px'
+
+          // enable transition
+          setTimeout(() => {
+            inner.style.transition = ''
+            inner.classList.remove('no-transition')
+
+            inner.querySelectorAll('.carousel-item').forEach((el) => {
+              el.classList.remove('active')
+            })
+
+            inner.querySelector('.carousel-item:first-child').classList.add('active')
+          }, 1000);
+        };
 
         el.addEventListener('slide.bs.carousel', (e) => {
-          const inner = el.querySelector('.carousel-inner');
+          // infinite scroll
+          const numToDisplay = getNumToDisplay(el)
+          console.log(`.${NAME}: ${e.to} ${numberOfItems / 2}`);
+
+          if(numberOfItems - numToDisplay < e.to){
+            e.preventDefault();
+            resetPosition();
+            return;
+          }
+          //
 
           switch (e.direction) {
             case 'left':
-              inner.style.left = `${-(e.to * el.dataset['itemWidth'])  }px`;
-              break;
+              inner.style.left = `${-(e.to * el.dataset.itemWidth)}px`
+              break
             case 'right':
-              inner.style.left = `${-(e.to * el.dataset['itemWidth'])  }px`;
-              break;
+              inner.style.left = `${-(e.to * el.dataset.itemWidth)}px`
+              break
           }
-        });
 
-        el.classList.add(`${NAME}-multislide-active`);
+          if(numberOfItems / 2 === e.to){
+            resetPosition();
+          }
+        })
+
+        el.classList.add(`${NAME}-multislide-active`)
+      } else {
+        if (items.length === 1) {
+          el.classList.add(`${NAME}-no-slide`)
+        }
       }
 
-      el.classList.add(`${NAME}-active`);
-    });
-  };
+      if(interval){
+        el.ui.cycle();
+      }
 
-  window.addEventListener(`${Events.LODEDANDREADY}`, init);
-  window.addEventListener(`${Events.AJAX}`, init);
-})(window);
+      el.dataset.ui = el.ui
+      el.classList.add(`${NAME}-active`)
+      el.dispatchEvent(new Event(`${NAME}-ready`))
+    })
+  }
 
-export default CarouselUI;
+  window.addEventListener(`${Events.LODEDANDREADY}`, init)
+  window.addEventListener(`${Events.AJAX}`, init)
+})(window)
+
+export default CarouselUI

src/js/ui/datepicker.js

@@ -1,14 +1,30 @@
-import Events from '../_events';
-import Datepicker from 'vanillajs-datepicker/Datepicker';
+import Events from '../_events'
+import Datepicker from 'vanillajs-datepicker/Datepicker'
 
 const init = () => {
-  document.querySelectorAll('.js-calendar').forEach((el, i) => {
-    const picker = new Datepicker(el);
-    el.ui = picker;
-  });
-};
+  document.querySelectorAll('input.js-datepicker').forEach((el, i) => {
+    if( el.dataset.ui ){
+      return
+    }
 
-window.addEventListener(`${Events.LODEDANDREADY}`, init);
-window.addEventListener(`${Events.AJAX}`, init);
+    const datesNum = el.dataset.datesNum;
 
-export default Datepicker;
+    const picker = new Datepicker(el,{
+      buttonClass: 'btn',
+      autohide: true,
+      maxNumberOfDates: datesNum ? datesNum : 1,
+    })
+
+    el.addEventListener('changeDate', (e) => {
+      e.currentTarget.dispatchEvent(new Event('change'));
+    })
+
+    el.ui = picker
+    el.dataset.ui = true
+  })
+}
+
+window.addEventListener(`${Events.LODEDANDREADY}`, init)
+window.addEventListener(`${Events.AJAX}`, init)
+
+export default Datepicker

src/js/ui/dropdown.js

@@ -1,4 +1,4 @@
-import Events from "../_events";
+import Events from '../_events'
 
 /*
  * Bootstrap compatible dropdowns without popover library
@@ -8,56 +8,170 @@ import Events from "../_events";
  *
  */
 const DropdownHoverUI = ((window) => {
-  const NAME = "js-dropdown";
+  const NAME = 'js-dropdown'
+  const ACTIVECLS = ['active', 'active-dropdown']
+
+  const HideAll = () => {
+    // hide others
+    document.querySelectorAll('.dropdown-menu').forEach((el, i) => {
+      const next = el.closest('.dropdown')
+      if (next) {
+        next.classList.remove(...ACTIVECLS)
+      }
+
+      el.classList.remove('show')
+    })
+  }
 
   const Toggle = (el) => {
-    el.querySelector('.dropdown-menu').classList.toggle('show');
-  };
+    console.log(`${NAME}: nav toggle`)
+
+    const menu = el.querySelector('.dropdown-menu')
+    const isOpenned = menu.classList.contains('show')
+
+    HideAll()
+
+    if (menu && !isOpenned) {
+      menu.classList.add('show')
+    }
+  }
 
   const Show = (e) => {
-    const el = e.currentTarget;
-    el.querySelector('.dropdown-menu').classList.add('show');
-  };
+    e.stopPropagation()
+    const el = e.currentTarget
+
+    el.classList.add(...ACTIVECLS)
+    const menu = el.querySelector('.dropdown-menu')
+    if (menu) {
+      menu.classList.add('show')
+    }
+  }
 
   const Hide = (e) => {
-    const el = e.currentTarget;
-    el.querySelector('.dropdown-menu').classList.remove('show');
-  };
+    e.stopPropagation()
+    const el = e.currentTarget
+
+    el.classList.remove(...ACTIVECLS)
+    const menu = el.querySelector('.dropdown-menu')
+    if (menu) {
+      menu.classList.remove('show')
+    }
+  }
 
   const init = () => {
-    console.log(`${NAME}: init`);
+    console.log(`${NAME}: init`)
+
+    const clickableEls = document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"],.dropdown-toggle`)
+    const hoverableEls = document.querySelectorAll('[data-bs-toggle="hover"]')
 
     const attachHoverEvents = (el) => {
-      el.addEventListener("mouseover", Show, false);
-      el.addEventListener("mouseout", Hide, false);
+      if (el.classList.contains(`${NAME}-hover-active`)) {
+        return
+      }
 
-      el.classList.add(`${NAME}-active`);
-    };
+      el.addEventListener('mouseover', Show, false)
+      el.addEventListener('mouseleave', Hide, false)
+
+      el.classList.add(`${NAME}-active`)
+      el.classList.add(`${NAME}-hover-active`)
+    }
 
     const attachClickEvents = (el) => {
-      el.addEventListener("click", (e) => {
-        e.preventDefault();
+      if (el.classList.contains(`${NAME}-click-active`)) {
+        return
+      }
 
-        const el = e.currentTarget;
-        const parent = el.closest('.dropdown');
-        Toggle(parent);
-      });
+      el.addEventListener('click', (e) => {
+        e.preventDefault()
 
-      el.classList.add(`${NAME}-active`);
-    };
+        const el = e.currentTarget
+        const parent = el.closest('.dropdown')
+        const href = el.getAttribute('href')
 
-    document.querySelectorAll(`[data-bs-toggle="hover"]`).forEach((el, i) => {
-      const parent = el.closest('.dropdown');
-      attachHoverEvents(parent);
-    });
+        // nav second click
+        if (href && el.dataset.firstClick) {
+          console.log(`${NAME}: nav second click`)
 
-    document.querySelectorAll(`.${NAME},[data-bs-toggle="dropdown"]`).forEach((el, i) => {
-      attachClickEvents(el);
-    });
-  };
+          e.stopImmediatePropagation()
+          if (typeof window.app === 'undefined' || typeof window.app.Router === 'undefined') {
+            window.location.href = href
+            return
+          }
 
-  window.addEventListener(`${Events.LODEDANDREADY}`, init);
-  window.addEventListener(`${Events.AJAX}`, init);
-})(window);
+          window.app.Router.openURL(href)
+        }
 
-export default DropdownHoverUI;
+
+        if (parent) {
+          // big screen click
+          if (href && window.innerWidth > 768 && parent.classList.contains('active-dropdown')) {
+            console.log(`${NAME}: big screen | nav click the dropdown is shown already`)
+
+            e.stopImmediatePropagation()
+            if (typeof window.app === 'undefined' || typeof window.app.Router === 'undefined') {
+              window.location.href = href
+              return
+            }
+
+            window.app.Router.openURL(href)
+          }
+
+          Toggle(parent)
+        }
+
+        el.dataset.firstClick = true
+      })
+
+      el.classList.add(`${NAME}-active`)
+      el.classList.add(`${NAME}-click-active`)
+    }
+
+    // Hide all for outside clicks
+    /* document.addEventListener('click', function (event) {
+      const isClickInside = clickableEls.contains(event.target)
+
+      if (!isClickInside) {
+        HideAll()
+      }
+    }) */
+
+    document.addEventListener('click', (event) => {
+      let breakPath = false
+      const path = event.path || (event.composedPath && event.composedPath())
+
+      if (!path) {
+        console.warn('Browser does not provide event path to hide dropdowns on outside click')
+      }
+
+      path.forEach((el, i) => {
+        if (breakPath) {
+          return
+        }
+
+        if (el === document) {
+          HideAll()
+        }
+
+        if (el.classList && el.classList.contains('dropdown-toggle')) {
+          breakPath = true
+        }
+      })
+    })
+
+    hoverableEls.forEach((el, i) => {
+      const parent = el.closest('.dropdown')
+      if (parent) {
+        attachHoverEvents(parent)
+      }
+    })
+
+    clickableEls.forEach((el, i) => {
+      attachClickEvents(el)
+    })
+  }
+
+  window.addEventListener(`${Events.LODEDANDREADY}`, init)
+  window.addEventListener(`${Events.AJAX}`, init)
+})(window)
+
+export default DropdownHoverUI

src/js/ui/glide.js

@@ -0,0 +1,81 @@
+import '@glidejs/glide/src/assets/sass/glide.core.scss'
+import "../../scss/ui/glide.theme.scss";
+
+import Glide from '@glidejs/glide'
+import Events from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_events'
+const NAME = 'uiGlide'
+
+const init = () => {
+  console.log(`${NAME} init`)
+
+  document.querySelectorAll('.glide').forEach((el) => {
+    if (el.dataset.glide) {
+      return
+    }
+
+    el.dataset.glide = true
+
+    const cfg = el.dataset;
+
+    if (cfg.perView === 1 && cfg.bsIndicators) {
+      const bullets = document.createElement('div');
+      bullets.classList.add('glide__bullets');
+      bullets.dataset.glideEl = "controls[nav]";
+
+      let num = el.querySelectorAll('.glide__slide').length;
+      num--;
+      while (num >= 0) {
+        const btn = document.createElement('button');
+        btn.classList.add('glide__bullet');
+        btn.dataset.glideDir = i;
+        bullets.append(btn);
+        num--;
+      }
+      el.append(bullets);
+    }
+
+    if (cfg.bsArrows) {
+      const btns = document.createElement('div');
+      btns.classList.add('glide__arrows');
+      btns.dataset.glideEl = "controls";
+
+      const prev = document.createElement('button');
+      prev.classList.add('glide__arrow', 'glide__arrow--left');
+      prev.dataset.glideDir = '<';
+      prev.innerText = 'prev';
+      btns.append(prev);
+
+      const next = document.createElement('button');
+      next.classList.add('glide__arrow', 'glide__arrow--right');
+      next.dataset.glideDir = '>';
+      next.innerText = 'next';
+      btns.append(next);
+
+      el.append(btns);
+    }
+
+    const glide = new Glide(el, {
+      startAt: 0,
+      type: 'carousel',
+      perView: cfg.perView,
+      autoplay: cfg.bsInterval,
+      gap: 0,
+      breakpoints: {
+        768: { perView: 1 },
+        992: { perView: parseInt(cfg.perView / 2) },
+      },
+    })
+
+    glide.on('mount.after', () => {
+      el.dispatchEvent(new Event(`${Events.CAROUSEL_READY}`))
+      window.dispatchEvent(new Event(`${Events.CAROUSEL_READY}`))
+    })
+
+    glide.mount();
+  });
+};
+
+window.addEventListener(`${Events.LODEDANDREADY}`, init);
+window.addEventListener(`${Events.AJAX}`, () => {
+  setTimeout(init, 300)
+});

src/js/ui/instagram.feed.js

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

src/js/ui/map.api.js

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

src/js/ui/password.js

@@ -0,0 +1,55 @@
+import Events from '../_events'
+
+const PasswordUI = ((window) => {
+  const NAME = 'js-password'
+
+  const init = () => {
+    console.log(`${NAME}: init`)
+    let timer
+
+    const toggle = (input) => {
+      console.log(`${NAME}: toggle`)
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      show(input)
+    }
+
+    const show = (input) => {
+      input.setAttribute('type', 'text')
+      timer = setTimeout(() => {
+        hide(input)
+      }, 3000)
+    }
+
+    const hide = (input) => {
+      input.setAttribute('type', 'password')
+      if (timer) {
+        clearTimeout(timer);
+      }
+    }
+
+    document.querySelectorAll(`${NAME}-show, .show-password`).forEach((el) => {
+      if (el.classList.contains(`${NAME}-active`)) {
+        return
+      }
+
+      el.addEventListener('click', (e) => {
+        const input = e.currentTarget.closest('.field').querySelector('input')
+        if (!input) {
+          return
+        }
+
+        toggle(input)
+      })
+
+      el.classList.add(`${NAME}-active`)
+    })
+  }
+
+  window.addEventListener(`${Events.LODEDANDREADY}`, init)
+  window.addEventListener(`${Events.AJAX}`, init)
+})(window)
+
+export default PasswordUI

src/js/ui/select.js

@@ -0,0 +1,33 @@
+import Events from '../_events'
+
+import Choices from "choices.js";
+import "choices.js/src/styles/choices.scss";
+
+const SelectUI = ((window) => {
+  const NAME = 'js-select'
+
+  const init = () => {
+    console.log(`${NAME}: init`)
+    document.querySelector('select:not([readonly],.no-select2)')
+
+    document.querySelectorAll(`.${NAME},select:not([readonly],.no-select2)`).forEach((el) => {
+      if(el.classList.contains(`${NAME}-active`)){
+        return
+      }
+
+      const max = el.dataset.maxItemCount;
+      new Choices(el, {
+        allowHTML: true,
+        shouldSort: (el.dataset.shouldSort === 'true'),
+        maxItemCount:  max ? max : -1,
+      });
+
+      el.classList.add(`${NAME}-active`)
+    })
+  }
+
+  window.addEventListener(`${Events.LODEDANDREADY}`, init)
+  window.addEventListener(`${Events.AJAX}`, init)
+})(window)
+
+export default SelectUI

src/js/ui/turnstile.js

@@ -0,0 +1,81 @@
+import Events from '../_events'
+
+const NAME = 'uiTurnstile'
+const SELECTOR = `.${NAME},.js-turnstile,.field.turnstile .cf-turnstile`
+
+const init = () => {
+  console.log(`${NAME}: init`)
+
+  const captchas = document.querySelectorAll(SELECTOR)
+  if (!captchas.length) {
+    console.log(`${NAME}: No Captcha fields.`)
+    return
+  }
+
+  if (
+    !document.querySelector('#captchaAPI')
+    && !document.querySelector('[src^="https://challenges.cloudflare.com/turnstile/v0/api.js"]')
+  ) {
+    loadScript()
+    return
+  }
+
+  // the script may be loading right now
+  if (typeof window.turnstile !== 'undefined') {
+    renderCaptcha()
+  }
+}
+
+const renderCaptcha = () => {
+  console.log(`${NAME}: renderCaptcha`)
+
+  const captchas = document.querySelectorAll(SELECTOR)
+
+  captchas.forEach((el) => {
+    if (el.dataset[NAME] || el.innerHTML.length > 0) {
+
+      if (el.dataset.widgetid) {
+        //turnstile.reset(el.dataset.widgetid)
+      }
+
+      return
+    }
+
+
+    console.log(`${NAME}: renderCaptcha > new field`)
+
+    const widgetid = window.turnstile.render(el, {
+      sitekey: el.dataset.sitekey,
+      callback: function (token) {
+        console.log(`${NAME}: Challenge Success ${token}`);
+      },
+    })
+
+    /*const form = el.closest('form')
+    form.addEventListener('submit', () => {
+      console.log(`${NAME}: submit`)
+      window.turnstile.reset(el.dataset.widgetid)
+    })*/
+
+    el.dataset.widgetid = widgetid
+
+    el.dataset[NAME] = true
+  })
+}
+
+
+window.renderCaptcha = renderCaptcha
+
+const loadScript = () => {
+
+  console.log(`${NAME}: Loading Captcha API ...`)
+  const script = document.createElement('script');
+  script.id = 'captchaAPI';
+  script.src = `https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=renderCaptcha`
+  script.async = true
+
+  document.body.append(script)
+}
+
+window.addEventListener(`${Events.LODEDANDREADY}`, init)
+window.addEventListener(`${Events.AJAX}`, init)

src/js_old/_components/_ui.ajax.js

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

src/js_old/_components/_ui.carousel.js

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

src/js_old/_components/_ui.cookie.js

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

src/js_old/_components/_ui.flyout.js

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

src/js_old/_components/_ui.form.basics.js

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

src/js_old/_components/_ui.form.croppie.js

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

src/js_old/_components/_ui.form.datetime.js

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

src/js_old/_components/_ui.form.fields.js

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

src/js_old/_components/_ui.form.fields.toggle.js

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

src/js_old/_components/_ui.form.jqte.js

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

src/js_old/_components/_ui.form.select2.js

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

src/js_old/_components/_ui.form.stepped.js

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

src/js_old/_components/_ui.form.storage.js

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

src/js_old/_components/_ui.form.validate.field.js

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

src/js_old/_components/_ui.form.validate.js

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

src/js_old/_components/_ui.header-footer.js

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

src/js_old/_components/_ui.hover.js

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

src/js_old/_components/_ui.image-position.js

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

src/js_old/_components/_ui.instagramfeed.js

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

src/js_old/_components/_ui.map.api.js

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

src/js_old/_components/_ui.menu.js

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

src/js_old/_components/_ui.multislider.js

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

src/js_old/_components/_ui.nocaptcha.js

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

src/js_old/_components/_ui.opening-hours.js

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

src/js_old/_components/_ui.search.js

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

src/js_old/_components/_ui.shrink.js

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

src/js_old/_components/_ui.sidebar.js

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

src/js_old/_components/_ui.spinner.js

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

src/js_old/_components/_ui.video.preview.js

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

src/js_old/_components/_ui.visibility.js

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

src/js_old/_components/drivers/_google.track.external.links.js

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

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

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

src/js_old/_components/drivers/_map.google.js

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

src/js_old/_components/drivers/_map.google.marker.js

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

src/js_old/_components/drivers/_map.mapbox.js

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

src/js_old/_components/mapStorage.js

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

src/js_old/_components/routes/index.js

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

src/js_old/_consts.js

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

src/js_old/_events.js

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

src/js_old/_events.router.js

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

src/js_old/_layout.js

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

src/js_old/_main.js

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

src/js_old/app.js

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

src/js_old/lang/_en.js

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

src/js_old/place_it_to_types_folder_PageTypeClassName.js

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

src/js_old/types/SilverShop.Page.CheckoutPageController.js

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

src/js_old/types/Site.Controllers.MapElementController.js

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

src/mocks/browser.js

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

src/mocks/handlers.js

@@ -1,9 +1,9 @@
 // src/mocks/handlers.js
-import { graphql } from "msw";
+import { graphql } from 'msw'
 
 export const handlers = [
   // Handles a "Login" mutation
-  /*graphql.mutation('Login', (req, res, ctx) => {
+  /* graphql.mutation('Login', (req, res, ctx) => {
     const { username } = req.variables;
     sessionStorage.setItem('is-authenticated', username);
     return res(
@@ -13,10 +13,10 @@ export const handlers = [
         },
       }),
     );
-  }),*/
+  }), */
   // Handles a "Pages" query
-  graphql.query("Pages11", (req, res, ctx) => {
-    const apiKey = req.headers.map.apikey;
+  graphql.query('Pages11', (req, res, ctx) => {
+    const apiKey = req.headers.map.apikey
     if (
       !req.headers.map.apikey ||
       req.headers.map.apikey !== `${GRAPHQL_API_KEY}`
@@ -25,11 +25,11 @@ export const handlers = [
       return res(
         ctx.errors([
           {
-            message: "Not authenticated",
-            errorType: "AuthenticationError",
+            message: 'Not authenticated',
+            errorType: 'AuthenticationError',
           },
         ])
-      );
+      )
     }
     // When authenticated, respond with a query payload
     return res(
@@ -38,38 +38,38 @@ export const handlers = [
           edges: [
             {
               node: {
-                ID: "1",
-                Title: "Home-Mocked",
-                ClassName: "Site\\Pages\\HomePage",
-                CSSClass: "Site-Pages-HomePage",
+                ID: '1',
+                Title: 'Home-Mocked',
+                ClassName: 'Site\\Pages\\HomePage',
+                CSSClass: 'Site-Pages-HomePage',
                 Summary:
                   "That's my personal website, I'm full-stack developer mostly specializing on SilverStipe backend projects and share some of my hobbies at this website.",
-                Link: "/en/",
-                URLSegment: "home",
+                Link: '/en/',
+                URLSegment: 'home',
                 Elements: {
                   edges: [
                     {
                       node: {
-                        ID: "3",
-                        Title: "Slider",
+                        ID: '3',
+                        Title: 'Slider',
                         Render:
-                          "<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: {
-                        ID: "7",
-                        Title: "Categories List",
+                        ID: '7',
+                        Title: 'Categories List',
                         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: {
-                        ID: "4",
+                        ID: '4',
                         Title: "Hello, I'm Tony Air",
                         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'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: <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: <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: <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'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: <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: <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: <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 = [
           },
         },
       })
-    );
+    )
   }),
-];
+]

src/mocks/server.js

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

src/scss/_animations.scss

@@ -1,12 +1,11 @@
 // pulse
-
 @keyframes pulse {
   0% {
     transform: scale(1);
   }
 
   50% {
-    transform: scale(0.8);
+    transform: scale(.8);
   }
 
   100% {
@@ -17,16 +16,19 @@
 @keyframes fade {
   0% {
     filter: grayscale(0);
+
     opacity: 1;
   }
 
   50% {
     filter: grayscale(1);
-    opacity: 0.5;
+
+    opacity: .5;
   }
 
   100% {
     filter: grayscale(0);
+
     opacity: 1;
   }
 }
@@ -38,8 +40,23 @@
   }
 
   to {
-    max-height: 500rem;
-    max-height: 200vh;
+    max-height: 100vh;
     overflow: visible;
   }
 }
+
+@keyframes shrink {
+  to {
+    max-height: 0;
+    overflow: hidden;
+  }
+
+  from {
+    max-height: 100vh;
+    overflow: visible;
+  }
+}
+
+.no-transition {
+  transition: none !important;
+}

src/scss/_colors.scss

@@ -14,7 +14,6 @@ $gray-700: map-get($clr-grey-list, "700") !default;
 $gray-800: map-get($clr-grey-list, "800") !default;
 $gray-900: map-get($clr-grey-list, "900") !default;
 $black: $clr-black !default;
-
 $grays: () !default;
 
 // stylelint-disable-next-line scss/dollar-variable-default
@@ -31,7 +30,6 @@ $grays: map-merge(
     "900": $gray-900,
   ), $grays
 ) !default;
-
 $blue: $clr-blue !default;
 $indigo: $clr-indigo !default;
 $purple: $clr-purple !default;
@@ -42,7 +40,6 @@ $yellow: $clr-yellow !default;
 $green: $clr-green !default;
 $teal: $clr-teal !default;
 $cyan: $clr-cyan !default;
-
 $colors: () !default;
 
 // stylelint-disable-next-line scss/dollar-variable-default
@@ -63,7 +60,6 @@ $colors: map-merge(
     "gray-dark": $gray-800,
   ), $colors
 ) !default;
-
 $primary: $blue !default;
 $secondary: $gray-600 !default;
 $success: $green !default;
@@ -72,7 +68,6 @@ $warning: $yellow !default;
 $danger: $red !default;
 $light: $gray-100 !default;
 $dark: $gray-900 !default;
-
 $theme-colors: () !default;
 
 // stylelint-disable-next-line scss/dollar-variable-default
@@ -93,13 +88,10 @@ $theme-colors: map-merge(
 
 //$primary: $dark  !default;
 $bg-alt: $yellow !default;
-
 $body-color: $gray-900 !default;
 $navbar-light-active-color: $blue !default;
-
 $navbar-dark-hover-background: $dark !default;
 $navbar-dark-active-background: $dark !default;
 $navbar-dark-show-color: $blue !default;
 $navbar-dark-show-background: $dark !default;
-
 $dropdown-border-color: $white !default;

src/scss/_mixings.scss

@@ -2,226 +2,246 @@
 
 @import "~bootstrap/scss/mixins";
 
-@mixin hover-disabled() {
-  &:not(.disabled) {
-    &.active,
-    &:active,
-    &:hover,
-    &:focus {
-      @content;
-    }
+/// Remove the unit of a length
+/// @param {Number} $number - Number to remove unit from
+/// @return {Number} - Unitless number
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
   }
+
+  @return $number;
+}
+
+@function rem($pxValue) {
+    @return #{strip-unit($pxValue) / strip-unit($html-font-size)}rem;
+}
+
+/*.component {
+    font-size: rem(14px); // or rem(14)
+}*/
+
+@mixin hover-disabled() {
+    &:not(.disabled) {
+        &.active,
+        &:active,
+        &:hover,
+        &:focus {
+            @content;
+        }
+    }
 }
 
 @mixin pseudo($display: block, $pos: absolute, $content: "") {
-  content: $content;
-  display: $display;
-  position: $pos;
+    position: $pos;
+    display: $display;
+    content: $content;
 }
 
 @mixin responsive-ratio($x, $y, $pseudo: false) {
-  $padding: unquote(math.div($y, $x) * 100 + "%");
+    $padding: unquote(math.div($y, $x) * 100 + "%");
 
-  @if $pseudo {
-    &:before {
-      @include pseudo($pos: relative);
-      padding-top: $padding;
-      width: 100%;
+    @if $pseudo {
+        &:before {
+            width: 100%;
+            padding-top: $padding;
+
+            @include pseudo($pos: relative);
+        }
+    } @else {
+        padding-top: $padding;
     }
-  } @else {
-    padding-top: $padding;
-  }
 }
 
 @mixin input-placeholder {
-  &.placeholder {
-    @content;
-  }
+    &.placeholder {
+        @content;
+    }
 
-  &:-moz-placeholder {
-    @content;
-  }
+    &:-moz-placeholder {
+        @content;
+    }
 
-  &::-moz-placeholder {
-    @content;
-  }
+    &::-moz-placeholder {
+        @content;
+    }
 
-  &:-ms-input-placeholder {
-    @content;
-  }
+    &:-ms-input-placeholder {
+        @content;
+    }
 
-  &::-webkit-input-placeholder {
-    @content;
-  }
+    &::-webkit-input-placeholder {
+        @content;
+    }
 }
 
 @mixin truncate($truncation-boundary) {
-  max-width: $truncation-boundary;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    max-width: $truncation-boundary;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 @mixin fix-bold() {
-  display: inline-flex;
-  flex-direction: column;
+    display: inline-flex;
+    flex-direction: column;
 
-  &:before {
-    content: attr(data-text);
-    content: attr(data-text) / "";
-    font-weight: bold;
-    height: 0;
-    overflow: hidden;
-    pointer-events: none;
-    user-select: none;
-    visibility: hidden;
-  }
+    &:before {
+        font-weight: bold;
+        visibility: hidden;
+        overflow: hidden;
+        height: 0;
+        content: attr(data-text);
+        content: attr(data-text) / "";
+        user-select: none;
+        pointer-events: none;
+    }
 }
 
 @mixin dropdowns-dark() {
-  .navbar-dark {
-    .nav-link {
-      @include hover-focus {
-        background: $navbar-dark-hover-background;
-      }
+    .navbar-dark {
+        .nav-link {
+            @include hover-focus {
+                background: $navbar-dark-hover-background;
+            }
+        }
+
+        .active > .nav-link,
+        .nav-link.active {
+            background: $navbar-dark-active-background;
+        }
+
+        .nav-link.show,
+        .navbar-nav .show > .nav-link {
+            color: $navbar-dark-show-color;
+            background: $navbar-dark-show-background;
+        }
     }
 
-    .active > .nav-link,
-    .nav-link.active {
-      background: $navbar-dark-active-background;
+    .dropdown-menu.bg-dark {
+        border-color: $dark;
+
+        .nav-link {
+            color: $navbar-dark-color;
+
+            @include hover-focus {
+                color: $navbar-dark-hover-color;
+            }
+
+            &.disabled {
+                cursor: default;
+                color: $navbar-dark-disabled-color;
+            }
+        }
+
+        .show > .nav-link,
+        .active > .nav-link,
+        .nav-link.show,
+        .nav-link.active {
+            color: $navbar-dark-active-color;
+        }
+
+        .dropdown-item {
+            @include hover-focus {
+                color: $navbar-dark-hover-color;
+                background: $navbar-dark-hover-background;
+            }
+
+            &.active,
+            &:active {
+                background: $navbar-dark-active-background;
+            }
+
+            .nav-link {
+                background: none;
+            }
+        }
     }
-
-    .nav-link.show,
-    .navbar-nav .show > .nav-link {
-      background: $navbar-dark-show-background;
-      color: $navbar-dark-show-color;
-    }
-  }
-
-  .dropdown-menu.bg-dark {
-    border-color: $dark;
-
-    .nav-link {
-      color: $navbar-dark-color;
-
-      @include hover-focus {
-        color: $navbar-dark-hover-color;
-      }
-
-      &.disabled {
-        color: $navbar-dark-disabled-color;
-        cursor: default;
-      }
-    }
-
-    .show > .nav-link,
-    .active > .nav-link,
-    .nav-link.show,
-    .nav-link.active {
-      color: $navbar-dark-active-color;
-    }
-
-    .dropdown-item {
-      @include hover-focus {
-        background: $navbar-dark-hover-background;
-        color: $navbar-dark-hover-color;
-      }
-
-      &.active,
-      &:active {
-        background: $navbar-dark-active-background;
-      }
-
-      .nav-link {
-        background: none;
-      }
-    }
-  }
 }
 
 @mixin dropdown-hovers() {
-  .dropdown.show {
-    .dropdown {
-      &:hover,
-      &.active,
-      &:focus {
-        .dropdown-menu {
-          display: block;
+    .dropdown.show {
+        .dropdown {
+            &:hover,
+            &.active,
+            &:focus {
+                 > .dropdown-menu {
+                    display: block;
+                }
+            }
         }
-      }
-    }
-  }
-
-  @media only screen and (min-width: map-get($grid-breakpoints, "md")) {
-    .dropdown-hover ul li {
-      position: relative;
     }
 
-    .dropdown-hover ul li {
-      &:hover,
-      &.active,
-      &:focus {
-        > .dropdown-toggle::after {
-          transform: rotate(-90deg);
+    @media only screen and (min-width: map-get($grid-breakpoints, "md")) {
+        .dropdown-hover ul li {
+            position: relative;
         }
 
-        > ul {
-          display: block;
+        .dropdown-hover ul li {
+            &:hover,
+            &.active,
+            &:focus {
+                 > .dropdown-toggle::after {
+                    transform: rotate(-90deg);
+                }
+
+                 > ul {
+                    display: block;
+                }
+            }
         }
-      }
-    }
 
-    .dropdown-hover ul ul {
-      display: none;
-      left: 0;
-      min-width: 250px;
-      position: absolute;
-      top: 100%;
-    }
-
-    .dropdown-hover ul ul li {
-      position: relative;
-    }
-
-    .dropdown-hover ul ul li {
-      &:hover,
-      &.active,
-      &:focus {
-        > ul {
-          display: block;
+        .dropdown-hover ul ul {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            display: none;
+            min-width: 250px;
         }
-      }
-    }
 
-    .dropdown-hover ul ul ul {
-      display: none;
-      left: 100%;
-      min-width: 250px;
-      position: absolute;
-      top: 0;
-    }
-
-    .dropdown-hover ul ul ul li {
-      position: relative;
-    }
-
-    .dropdown-hover ul ul ul li {
-      &:hover,
-      &.active,
-      &:focus {
-        ul {
-          display: block;
+        .dropdown-hover ul ul li {
+            position: relative;
         }
-      }
-    }
 
-    .dropdown-hover ul ul ul ul {
-      display: none;
-      left: -100%;
-      min-width: 250px;
-      position: absolute;
-      top: 0;
-      z-index: 1;
+        .dropdown-hover ul ul li {
+            &:hover,
+            &.active,
+            &:focus {
+                 > ul {
+                    display: block;
+                }
+            }
+        }
+
+        .dropdown-hover ul ul ul {
+            position: absolute;
+            top: 0;
+            left: 100%;
+            display: none;
+            min-width: 250px;
+        }
+
+        .dropdown-hover ul ul ul li {
+            position: relative;
+        }
+
+        .dropdown-hover ul ul ul li {
+            &:hover,
+            &.active,
+            &:focus {
+                ul {
+                    display: block;
+                }
+            }
+        }
+
+        .dropdown-hover ul ul ul ul {
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            left: -100%;
+            display: none;
+            min-width: 250px;
+        }
     }
-  }
 }

src/scss/_variables.scss

@@ -2,6 +2,7 @@
 
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/_variables-dark";
 @import "mixings";
 //@import "_colors";
 
@@ -27,106 +28,90 @@ $container-max-widths: (
   xxxl: 1536px,
   xxxxl: 1836px,
 ) !default;
-
 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-
 $font-family-base: "Roboto", $font-family-sans-serif !default;
+$html-font-size: 14px!default;
+
+$link-decoration: none !default;
+$link-hover-decoration: underline !default;
 
 $spacer: 1rem !default;
 $headings-margin-bottom: $spacer !default;
-
 $enable-rounded: false !default;
 $enable-shadows: true !default;
-
 $enable-gradients: false !default;
-
 $enable-transitions: true !default;
 $enable-reduced-motion: true !default;
-
 $enable-caret: false !default;
-
 $enable-grid-classes: true !default;
 $enable-button-pointers: true !default;
 $enable-rfs: true !default;
-
 $enable-validation-icons: true !default;
 $enable-negative-margins: true !default;
-
 $enable-deprecation-messages: true !default;
-
 $enable-important-utilities: true !default;
 $breadcrumb-divider: quote("/") !default;
 
 // ui framework settings
 $body-gutter-x: $spacer !default;
 $body-gutter-y: $spacer !default;
-
 $body-double-gutter-x: $body-gutter-x * 2 !default;
 $body-double-gutter-y: $body-gutter-y * 2 !default;
-
-$body-gutter-reduced-x: $body-gutter-x * 0.5 !default;
-$body-gutter-reduced-y: $body-gutter-y * 0.5 !default;
-
-$body-gutter-reduced-d-x: $body-gutter-x * 0.25 !default;
-$body-gutter-reduced-d-y: $body-gutter-y * 0.25 !default;
-
+$body-gutter-reduced-x: $body-gutter-x * .5 !default;
+$body-gutter-reduced-y: $body-gutter-y * .5 !default;
+$body-gutter-reduced-d-x: $body-gutter-x * .25 !default;
+$body-gutter-reduced-d-y: $body-gutter-y * .25 !default;
 $form-spacer-x: $spacer !default;
 $form-spacer-y: $spacer !default;
-
 $element-spacer-x: map.get($spacers, 3) !default;
 $element-spacer-y: map.get($spacers, 3) !default;
-
 $element-reduced-spacer-x: map.get($spacers, 2) !default;
 $element-reduced-spacer-y: map.get($spacers, 2) !default;
-
 $element-reduced-d-spacer-x: map.get($spacers, 1) !default;
 $element-reduced-d-spacer-y: map.get($spacers, 1) !default;
-
 $body-bg: #fff !default;
 $body-color: #212529 !default;
 
 // site specific variables
 $extra-large-screen: 2000px !default;
-
 $full-body-min-width: map-get($grid-breakpoints, "lg") !default;
 $typography-breakpoint: map-get($grid-breakpoints, "sm") - 1 !default;
-
 $header-bg: var(--bs-dark) !default;
 $header-color: var(--bs-light) !default;
 $header-link: var(--bs-white) !default;
-
 $main-nav-link-color: var(--bs-white) !default;
 $main-nav-link-bg: none !default;
-
 $main-nav-toggler-size: 2rem !default;
-
 $main-nav-link-hover-bg: none !default;
 $main-nav-link-hover-color: var(--bs-cyan) !default;
-
 $main-nav-dropdown-bg: $header-bg !default;
 $main-nav-dropdown-color: $header-link !default;
 $main-nav-dropdown-hover-bg: var(--bs-black) !default;
 $main-nav-dropdown-hover-color: $main-nav-link-hover-color !default;
-
 $sidebar-nav-link-hover-color: var(--bs-indigo) !default;
-
 $footer-bg: $header-bg !default;
 $footer-color: $header-color !default;
 $footer-link: $header-link !default;
-
 $footer-footer-bg: $main-nav-dropdown-hover-bg !default;
-
 $sliderelement-carousel-slide-max-y: 70vh !default;
 $sliderelement-carousel-slide-bg: $header-bg !default;
 $sliderelement-carousel-slide-ratio-x: 16 !default;
 $sliderelement-carousel-slide-ratio-y: 9 !default;
-
 $carousel-title-color: $white !default;
 $carousel-slide-min-height: 4rem !default;
 $carousel-text-shadow: 1px 1px $black !default;
 $carousel-controls-font-size: 3rem;
 $carousel-controls-zindex: 11 !default;
 $carousel-controls-shadow: 1px 1px $black !default;
-$carousel-controls-hover-bg: transparentize($black, 0.4) !default;
+$carousel-controls-hover-bg: transparentize($black, .4) !default;
 $carousel-slide-img-loading-max-height: 70vh !default;
+$breadcrumb-active-color: $sidebar-nav-link-hover-color;
+
+$navbar-toggler-font-size: 2rem !default;
+$accordion-padding-y: .5rem !default;
+$accordion-padding-x: 1rem !default;
+$accordion-button-focus-box-shadow: none !default;
+$enable-transitions: false !default;
+$breadcrumb-active-color: $body-color !default;
+$navbar-toggler-focus-width: 0.05rem !default;

src/scss/elements/accordion.scss

@@ -2,3 +2,16 @@
   > .element-container > .accordion {
   }
 }
+
+.accordion {
+    &-body {
+        .element {
+            &:first-child {
+                padding-top: 0;
+            }
+            &:last-child {
+                padding-bottom: 0;
+            }
+        }
+    }
+}

src/scss/elements/page.scss

@@ -1,39 +1,20 @@
 // hide default page title cuz elemental object will be used to display titles
 .element__breadcrumbs {
   //margin-bottom: calc(-2 * #{inspect($element-spacer-y)});
-
-  .container {
-  }
-
-  .breadcrumb-link {
-    text-decoration: none;
-
-    &:hover,
-    &:focus,
-    &:active,
-    &.active {
-      color: $sidebar-nav-link-hover-color;
-    }
-  }
-
-  .active {
-    .breadcrumb-link {
-      color: $sidebar-nav-link-hover-color;
-    }
-  }
 }
 
 .page-header-element {
   --bs-gutter-y: 0.75rem;
   display: none;
   //margin-bottom: calc(-1 * #{inspect($element-spacer-y)});
-
-  .page-header {
-    line-height: 1em;
-    margin-bottom: 0;
-  }
 }
 
 .page-header-element:not(.d-block) + .element {
   margin-top: 0;
 }
+
+
+.page-header {
+  line-height: 1em;
+  margin-bottom: 0;
+}

src/scss/layout/forms/basics.scss

@@ -1,3 +1,7 @@
+.form-control.dropdown {
+  @extend .form-select;
+}
+
 .field {
   flex-direction: row;
 
@@ -6,9 +10,14 @@
     display: inline-flex;
     padding-right: $form-spacer-x;
 
-    & + .field__content {
+    &+.field__content {
       padding-left: $form-spacer-x;
     }
+
+    &-right {
+      flex: 1 1 100%;
+      padding: .5em;
+    }
   }
 
   &__content {
@@ -17,6 +26,19 @@
 
   &.CompositeField {
     flex-direction: column;
+
+    &.row {
+      flex-direction: row;
+    }
+  }
+
+  &__alert {
+    &.validation {
+      @extend .alert-danger;
+      width: 100%;
+      margin-top: 1em;
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -29,6 +51,18 @@
   }
 }
 
-.form__fieldset {
-    margin-bottom: -1rem;
+.form {
+  &__field {
+    input.password {
+      @extend .form-control;
+    }
+
+    iframe {
+      width: 100% !important;
+    }
+  }
+}
+
+.form__fieldset {
+  margin-bottom: -1rem;
 }

src/scss/layout/main/alerts.scss

@@ -1,15 +1,15 @@
 #SiteWideAlerts {
-  bottom: 0;
-  position: fixed;
-  right: 0;
-  z-index: 99999;
-
   .btn-close {
     background: none;
   }
 
   .alert {
+    display: flex;
     margin-bottom: 0;
+
+    .alert__container {
+      display: flex;
+    }
   }
 }
 
@@ -19,12 +19,21 @@
 
 .is-online {
   .alert-offline {
-    display: none;
+    display: none !important;
   }
 }
 
 .is-offline {
   .alert-offline {
-    display: flex;
+    display: flex !important;
   }
 }
+
+.alert-bad,
+.alert-error {
+  @extend .alert-danger;
+}
+
+.alert:last-child {
+  margin-bottom: 0;
+}

src/scss/layout/main/base.scss

@@ -4,6 +4,10 @@ body {
   min-height: 100vh;
 }
 
+html {
+  overflow-y: scroll; // prevent content jumps produced by scroll bar
+}
+
 // sticky footer
 body {
   display: flex;
@@ -16,6 +20,7 @@ body {
   --body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)};
   --body-gutter-reduced-d-x: #{inspect($body-gutter-reduced-d-x)};
   --body-gutter-reduced-d-y: #{inspect($body-gutter-reduced-d-y)};
+  overflow-y: hidden; // prevent content jumps produced by scroll bar
 
   .wrapper {
     flex: 1 0 auto;
@@ -29,6 +34,7 @@ body {
 }
 
 @media (min-width: $extra-large-screen) {
+
   html,
   body {
     font-size: 0.9vw !important;
@@ -78,94 +84,45 @@ p {
   }
 }
 
-// exclude bootstrap-table
-[data-toggle="table"] {
-  &:hover,
-  &.active,
-  &:focus {
-    opacity: 1;
-  }
-}
-
-[data-toggle="collapse"] {
-  &[aria-expanded="true"] {
-    .accordion-icon {
-      &:before {
-        content: "\f068";
-      }
-    }
-  }
-}
-
 // transactions
-.transition,
 a,
-a *,
 .a,
-.a *,
 button,
 input,
 optgroup,
 select,
 textarea,
+option,
 .btn,
-.btn *,
-.dropdown,
-.row,
-.alert,
-.alert *,
-.message,
-[data-toggle],
-[data-toggle] * {
+.transition {
   transition: all 0.4s ease;
 }
 
-.a,
 a,
-[data-toggle],
-button,
+.a,
 .btn {
+
   &:hover,
-  &.active,
-  &[aria-expanded="true"] {
-    > .fa,
-    > .far,
-    > .fas,
-    > .fab,
-    > .svg-inline--fa,
-    &.fa,
-    &.far,
-    &.fas,
-    &.fab,
-    &.svg-inline--fa {
+  &.active {
+    opacity: 0.8;
+
+    >.fa,
+    >.svg-inline--fa {
       transform: scale(1.5);
     }
   }
 
-  &:hover,
-  &[aria-expanded="true"] {
-    opacity: 0.8;
-  }
-
   &.disabled {
-    opacity: 0.5;
+    opacity: 0.8;
     cursor: default;
-
-    &:hover,
-    &.active,
-    &[aria-expanded="true"] {
-      > .fa,
-      > .far,
-      > .fas,
-      > .fab,
-      > .svg-inline--fa,
-      &.fa,
-      &.far,
-      &.fas,
-      &.fab,
-      &.svg-inline--fa {
-        transform: rotate(0deg);
-      }
-    }
   }
 }
+
+[data-toggle][aria-expanded="true"] {
+  opacity: 0.8;
+
+  >.fa,
+  >.svg-inline--fa {
+    transform: scale(1.5);
+  }
+}

src/scss/layout/main/main.scss

@@ -65,7 +65,6 @@ button.nav-link {
 
 .dropdown-menu {
   border-radius: 0;
-  overflow: hidden;
   padding: 0;
   transition: none;
   will-change: max-height, display;
@@ -73,7 +72,6 @@ button.nav-link {
   &.show {
     animation: expand 2s;
     animation-fill-mode: both;
-    overflow: visible;
   }
 
   .dropdown-list {

src/scss/layout/main/states/mobile.scss

@@ -7,7 +7,7 @@
   .dropdown-hover {
     &:hover,
     &:focus {
-      .dropdown-menu {
+      > .dropdown-menu {
         display: block;
       }
     }

src/scss/layout/main/states/network.scss

@@ -6,6 +6,27 @@
   animation: fade 0.5s linear infinite;
 }
 
+// slower animation speed for big objects
+.carousel__img,
+.glide__img {
+  &.loading {
+    animation: fade 3s linear infinite;
+  }
+}
+
+.form-container.loading,
+main.loading {
+  animation: shrink 0.5s linear 1;
+  max-height: 0;
+  overflow: hidden;
+}
+
+.form-container.loaded,
+main.loaded {
+  animation: expand 0.5s linear 1;
+  max-height: fit-content;
+}
+
 .graphql-page {
   &.response-404 {
     cursor: not-allowed;

src/scss/libs/bootstrap.scss

@@ -1,6 +1,7 @@
 // Bootstrap
 // Configuration
 @import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
@@ -14,7 +15,6 @@
 @import "~bootstrap/scss/tables";
 @import "~bootstrap/scss/forms";
 @import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
 
 // Optional
 //@import '~bootstrap/scss/images';
@@ -43,8 +43,9 @@
 
 // Utilities
 @import "~bootstrap/scss/utilities/api";
+@import "~bootstrap/scss/transitions";
 
-@import "../ui/carousel";
+//@import "../ui/carousel";
 
 .navbar {
   justify-content: flex-end;

src/scss/libs/silverstripe.scss

@@ -1,57 +1,74 @@
 .message {
-  @extend .alert !optional;
+    @extend .alert !optional;
 
-  &.warning {
-    @extend .alert-warning !optional;
-  }
+    &.warning {
+        @extend .alert-warning !optional;
+    }
 
-  &.error {
-    @extend .alert-danger !optional;
-  }
+    &.error {
+        @extend .alert-danger !optional;
+    }
 }
 
 .embed-responsive-4by3,
 .embed-responsive-16by9 {
-  padding-top: 56.25%;
-  position: relative;
+    position: relative;
+    padding-top: 56.25%;
 
-  iframe {
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
+    iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .embed-responsive-4by3 {
-  padding-top: 75%;
+    padding-top: 75%;
 }
 
 #ForgotPassword {
-  margin: 1rem 0;
-  width: 100%;
+    width: 100%;
+    margin: 1rem 0;
 }
 
+
+
 #BetterNavigator {
-  display: none;
-  margin-top: -41px;
-  top: 50% !important;
+    top: 50% !important;
+    display: none;
+    margin-top: -41px;
 
-  &.open {
-    margin-top: 0;
-    top: 0 !important;
-  }
+    &.open {
+        top: 0 !important;
+        margin-top: 0;
+    }
 
-  a,
-  button,
-  div,
-  i,
-  span {
-    background-size: auto;
-  }
+    a,
+    button,
+    div,
+    i,
+    span {
+        background-size: auto;
+    }
 
-  @media (min-width: map-get($grid-breakpoints, "md")) {
-    display: block;
-  }
+    #BetterNavigatorStatus.Live {
+        background: #277c35;
+
+        .bn-icon-cog {
+            filter: invert(1);
+        }
+    }
+
+    #BetterNavigatorContent {
+        color: #3d4042;
+        span.bn-disabled {
+            color: #303336;
+        }
+    }
+
+    @media (min-width: map-get($grid-breakpoints, "md")) {
+        display: block;
+    }
 }

src/scss/types/cms.scss

@@ -3,120 +3,165 @@
 #Menu-Dynamic-Elements-Sponsors-Admin-SponsorsAdmin,
 #Menu-Dynamic-Elements-Admin-TestimonialsAdmin,
 #Menu-Dynamic-Elements-Promos-Admin-PromosAdmin {
-  display: none;
+    display: none;
 }
 
 // Fix form actions
+#Form_EditForm_MajorActions_Holder,
 #Form_ItemEditForm_MajorActions_Holder {
-  border: 0;
-  margin-bottom: 0;
-  min-width: 30%;
-  padding-bottom: 0;
-}
-
-#Form_EditForm_MajorActions_Holder {
-  border: 0;
-  margin-bottom: 0;
-  min-width: 70%;
-  padding-bottom: 0;
+    flex: 1 1;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border: 0;
+    .btn {
+        white-space: nowrap;
+    }
 }
 
 #Form_ItemEditForm_RightGroup_Holder {
-  border: 0;
-  margin-bottom: 0;
-  min-width: 20%;
-  padding-bottom: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+#Form_ItemEditForm_RightGroup {
+    display: flex;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border: 0;
+
+    align-items: center;
+    justify-content: center;
 }
 
 // make edit icon always shown
 .grid-field__icon-action {
-  &.edit-link {
-    opacity: 1;
-  }
+    &.edit-link {
+        opacity: 1;
+    }
 }
 
+// better items aligment
+.grid-field__col-compact {
+}
+.grid-field__table .form-check-input.editable-column-field {
+    margin: 0!important;
+}
 // correct primary buttons coloring
 .toolbar--south {
-  .btn-primary {
-    color: #fff;
-  }
+    .btn-primary {
+        color: #fff;
+    }
 
-  .btn-outline-primary {
-    color: #999;
-  }
+    .btn-outline-primary {
+        color: #999;
+    }
 }
 
 #ActionMenus_MoreOptions {
-  .btn-primary {
-    color: #5589a7;
-  }
+    .btn-primary {
+        color: #5589a7;
+    }
 }
 
 // correct scrolls
 body.cms {
-  flex-direction: column;
-  overflow-x: hidden;
+    overflow-x: hidden;
+    flex-direction: column;
 }
 
 // short fields margins/paddings
 .fields-compact {
-  .form-group {
-    margin-bottom: 0.25rem;
-    padding-bottom: 0.5rem;
+    .form-group {
+        margin-bottom: .25rem;
+        padding-bottom: .5rem;
 
-    .form__field-label {
-      font-weight: bold;
+        .form__field-label {
+            font-weight: bold;
+        }
+
+        &:after {
+            margin-bottom: .25rem;
+        }
     }
 
-    &:after {
-      margin-bottom: 0.25rem;
+    .form-group:after,
+    .form__divider:after {
+        display: none;
+    }
+
+    /*.mce-edit-area {
+    height: 5em;
+    iframe {
+      height: 5em !important;
     }
   }
-
-  .form-group:after,
-  .form__divider:after {
-    display: none;
-  }
-
-  /*.mce-edit-area {
-		height: 5em;
-		iframe {
-			height: 5em !important;
-		}
-	}
-	.form-control.textarea {
-		height: 13.5em;
-	}*/
+  .form-control.textarea {
+    height: 13.5em;
+  }*/
 }
 
 .fields-row {
-  margin: 0 !important;
-  padding: 0 0 2em !important;
-  width: 100%;
-
-  .form__fieldgroup {
-    display: flex;
-    flex: 0 0 100% !important;
-    flex-wrap: wrap;
+    width: 100%;
     margin: 0 !important;
-    max-width: 100% !important;
-    padding: 0 !important;
-    width: 100% !important;
+    padding: 0 0 2em !important;
 
-    > .form-group {
-      flex: 1 1 50%;
-      margin: 0 !important;
-      max-width: 50%;
-      padding: 0 1rem;
+    .form__fieldgroup {
+        flex: 0 0 100% !important;
+        display: flex;
+        width: 100% !important;
+        max-width: 100% !important;
+        margin: 0 !important;
+        padding: 0 !important;
+
+        flex-wrap: wrap;
+
+         > .form-group {
+            flex: 1 1 50%;
+            max-width: 50%;
+            margin: 0 !important;
+            padding: 0 1rem;
+        }
     }
-  }
 }
 
 // notifications rendering
 .notifications-list {
-  .alert {
-    .btn-close {
-      display: none;
+    .alert {
+        .btn-close {
+            display: none;
+        }
     }
-  }
+}
+
+// fix grid bulk editor
+.cms table.grid-field__table tbody .col-bulkSelect {
+    position: relative;
+}
+
+.notifications-list {
+    .alert {
+        .btn-close {
+            display: none;
+        }
+    }
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+#MetaLightboxApp {
+    position: relative;
+    z-index: 99;
+}
+
+.sticky-buttons ~ table.table.grid-field__table {
+    margin-top: 1rem;
 }

src/scss/types/editor.scss

@@ -1,13 +1,18 @@
 @import "../_variables";
 
 @import "~bootstrap/scss/tables";
-
 $typography-breakpoint: map-get($grid-breakpoints, "sm") - 1 !default;
+$typography-spacer-x: 1em !default;
+$typography-spacer-y: 1em !default;
 
 html,
 body {
-  background: $body-bg;
-  color: $body-color;
+    color: $body-color;
+    background: $body-bg;
+}
+
+p {
+    margin-bottom: $typography-spacer-y;
 }
 
 h1,
@@ -22,153 +27,172 @@ h6,
 .h4,
 .h5,
 .h6 {
-  color: $headings-color;
+    color: $headings-color;
 }
 
 a {
-  color: $link-color;
+    color: $link-color;
 }
 
 img,
 .captionImage,
 .image,
 .ss-htmleditorfield-file {
-  display: block;
-  margin-bottom: $element-reduced-spacer-y;
-  margin-top: $element-reduced-spacer-y;
-  max-width: 100%;
-
-  @media (min-width: $typography-breakpoint + 1) {
-    margin-left: $element-reduced-spacer-x;
-    margin-right: $element-reduced-spacer-x;
-  }
-
-  &.center {
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-  }
-
-  &.w-100 {
-    margin-left: 0;
-    margin-right: 0;
-    text-align: center;
-  }
-
-  &.start,
-  &.left,
-  &.leftAlone {
-    clear: left;
-    float: left;
+    display: block;
+    max-width: 100%;
+    margin-top: $typography-spacer-y;
+    margin-bottom: $typography-spacer-y;
 
     @media (min-width: $typography-breakpoint + 1) {
-      margin: 0 $element-reduced-spacer-x $element-reduced-spacer-y 0;
+        margin-right: $typography-spacer-x;
+        margin-left: $typography-spacer-x;
     }
-  }
 
-  &.end,
-  &.right,
-  &.rightAlone {
-    clear: right;
-    float: right;
-
-    @media (min-width: $typography-breakpoint + 1) {
-      margin: $element-reduced-spacer-y 0 0 $element-reduced-spacer-x;
+    &.center {
+        margin-right: auto;
+        margin-left: auto;
+        text-align: center;
     }
-  }
 
-  iframe {
-    height: 100% !important;
-    width: 100% !important;
-  }
+    &.w-100 {
+        margin-right: 0;
+        margin-left: 0;
+        text-align: center;
+    }
+
+    &.start,
+    &.left {
+        float: left;
+        clear: left;
+
+        @media (min-width: $typography-breakpoint + 1) {
+            margin: 0 $typography-spacer-x $typography-spacer-y 0;
+        }
+    }
+
+
+    &.leftAlone {
+        float: none;
+        clear: both;
+        margin-left: 0;
+        margin-right: auto;
+    }
+
+    &.end,
+    &.right {
+        float: right;
+        clear: right;
+
+        @media (min-width: $typography-breakpoint + 1) {
+            margin: $typography-spacer-y 0 0 $typography-spacer-x;
+        }
+    }
+
+    &.rightAlone {
+        float: none;
+        clear: both;
+        margin-left: auto;
+        margin-right: 0;
+    }
+
+    iframe {
+        width: 100% !important;
+        max-height: 100% !important;
+    }
 }
 
 .captionImage {
-  img {
-    margin-bottom: $element-reduced-spacer-y !important;
-  }
+    img {
+        margin-bottom: $typography-spacer-y !important;
+    }
 
-  .caption {
-    font-size: 0.8rem;
-  }
+    .caption {
+        font-size: .8em;
+    }
 }
 
 .left,
 .text-left,
 .text-start {
-  text-align: left;
+    text-align: left;
 }
 
 .center,
 .text-center {
-  text-align: center;
+    text-align: center;
 }
 
 .right,
 .text-right,
 .text-end {
-  text-align: right;
+    text-align: right;
 }
 
 .text-justify {
-  text-align: justify;
+    text-align: justify;
 }
 
 table {
-  border-collapse: collapse;
-  max-width: 100%;
-  width: 100%;
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
 
-  @extend .table;
-  @extend .table-striped;
-  @extend .table-bordered;
+    @extend .table;
+    @extend .table-striped;
+    @extend .table-bordered;
 
-  &.table-none {
-    @extend .table-borderless;
-    border: 0;
+    &.table-none {
+        margin-right: $typography-spacer-x * -0.5;
+        margin-left: $typography-spacer-x * -0.5;
+        border: 0;
 
-    tr,
-    td,
-    th {
-      background: none !important;
-      border: 0;
-      box-shadow: none !important;
+        @extend .table-borderless;
+
+        tr,
+        td,
+        th {
+            border: 0;
+            background: none !important;
+            box-shadow: none !important;
+        }
     }
-  }
 }
 
 ul,
 ol {
-  padding-left: $spacer;
+    padding-left: $typography-spacer-x * 2;
 
-  li {
-    margin: 0.5em 0;
-    padding-left: 0.5em;
-    position: relative;
-  }
-}
-
-ul {
-  list-style: none;
-
-  li {
-    list-style: none;
-    padding-left: 0;
-
-    &:before {
-      content: "\2022";
-      display: inline-block;
-      font-size: 1em;
-
-      left: -0.75em;
-      margin-right: 0.5em;
-      opacity: 0.5;
-      position: absolute;
-      top: -0.1em;
+    li {
+        position: relative;
+        margin: ($typography-spacer-x * 0.5) 0;
     }
-  }
 }
 
+ol {
+    padding-left: $typography-spacer-x * 2;
+}
+
+/*ul {
+    list-style: none;
+
+    li {
+        margin-left: -.1em;
+        padding-left: 0;
+        list-style: none;
+
+        &:before {
+            position: static;
+            display: inline-block;
+            width: .5em;
+            height: .5em;
+            margin-right: 1em;
+            content: "";
+            border-radius: .5em;
+            background: currentColor;
+        }
+    }
+}*/
+
 table,
 p,
 tr,
@@ -176,15 +200,15 @@ th,
 td,
 img,
 iframe {
-  max-width: 100% !important;
+    max-width: 100% !important;
 
-  @media (max-width: $typography-breakpoint) {
-    border: 0 !important;
-    display: block;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-    width: 100% !important;
-  }
+    @media (max-width: $typography-breakpoint) {
+        display: block;
+        width: 100% !important;
+        padding-right: 0 !important;
+        padding-left: 0 !important;
+        border: 0 !important;
+    }
 }
 
 table,
@@ -193,64 +217,73 @@ tr,
 th,
 td,
 img {
-  @media (max-width: $typography-breakpoint) {
-    height: auto !important;
-  }
+    @media (max-width: $typography-breakpoint) {
+        height: auto !important;
+    }
 }
 
 @media (max-width: $typography-breakpoint) {
-  .d-typography-breakpoint-none {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  thead {
-    display: block;
-    text-align: center;
-
-    > tr {
-      display: flex;
+    .d-typography-breakpoint-none {
+        position: absolute;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        white-space: nowrap;
+        border: 0;
     }
-  }
 
-  tbody {
-    display: block;
-  }
+    thead {
+        display: block;
+        text-align: center;
 
-  td {
-    display: flex;
-    flex-direction: column;
-
-    &:before {
-      content: attr(data-label);
-      display: block;
-      font-weight: bold;
-      min-width: 50%;
-      padding: 0 $spacer * 0.5;
-      width: 50%;
+         > tr {
+            display: flex;
+        }
+    }
+
+    tbody {
+        display: block;
+    }
+
+    td {
+        display: flex;
+        flex-direction: column;
+
+        &[data-label]:before {
+            font-weight: bold;
+            display: block;
+            width: 50%;
+            min-width: 50%;
+            padding: 0 $typography-spacer-x * .5;
+            content: attr(data-label);
+        }
     }
-  }
 }
 
 img {
-  border: 1px dashed;
+    border: 1px dashed;
 }
 
 .ss-htmleditorfield-file.embed {
-  @include responsive-ratio(4,3,true);
-      position: relative;
-      iframe {
+    position: relative;
+
+    @include responsive-ratio(4,3,true);
+    iframe {
+        position: absolute;
+        top: 0;
+        right: 0;
         bottom: 0;
         left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
+    }
+}
+
+img:last-child {
+  margin-bottom: 0!important;
+}
+
+.table-none tr:last-child > td {
+  padding-bottom: 0;
 }

src/scss/ui/carousel.scss

@@ -18,85 +18,125 @@ $carousel-text-shadow: 1px 1px $black !default;
 $carousel-controls-font-size: 3rem;
 $carousel-controls-zindex: 11 !default;
 $carousel-controls-shadow: 1px 1px $black !default;
-$carousel-controls-hover-bg: transparentize($black, 0.4) !default;
+$carousel-controls-hover-bg: transparentize($black, .4) !default;
 $carousel-slide-img-loading-max-height: 25vh !default;
 
 .carousel-slide {
-  align-items: flex-start;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: $carousel-slide-min-height;
+    display: flex;
+    flex-direction: column;
+    min-height: $carousel-slide-min-height;
 
-  > .container {
-    position: relative;
-  }
+    align-items: flex-start;
+    justify-content: center;
 
-  .video {
-    width: 100%;
-
-    iframe {
-      height: auto !important;
-      width: 100% !important;
+     > .container {
+        position: relative;
     }
-  }
 
-  .img {
-    display: block;
-    width: 100%;
-  }
+    .video {
+        width: 100%;
 
-  img.loading {
-    max-height: $carousel-slide-img-loading-max-height;
-  }
+        iframe {
+            width: 100% !important;
+            height: auto !important;
+        }
+    }
+
+    .img {
+        display: block;
+        width: 100%;
+    }
+
+    img.loading {
+        max-height: $carousel-slide-img-loading-max-height;
+    }
 }
 
 .carousel-control-prev,
 .carousel-control-next {
-  font-size: $carousel-controls-font-size;
-  text-shadow: $carousel-controls-shadow;
-  z-index: $carousel-controls-zindex;
+    font-size: $carousel-controls-font-size;
+    z-index: $carousel-controls-zindex;
+    text-shadow: $carousel-controls-shadow;
 
-  &:hover,
-  &:focus {
-    background: $carousel-controls-hover-bg;
-  }
+    &:hover,
+    &:focus {
+        background: $carousel-controls-hover-bg;
+    }
 }
 
 .carousel-indicators li {
-  box-shadow: none;
+    box-shadow: none;
 }
 
 .carousel-title {
-  color: $carousel-title-color;
+    color: $carousel-title-color;
 }
 
 .carousel-title,
 .carousel-content {
-  text-shadow: $carousel-text-shadow;
+    text-shadow: $carousel-text-shadow;
 }
 
 .carousel-caption {
-  bottom: 0;
-  left: auto;
-  right: 0;
-  width: 50%;
+    right: 0;
+    bottom: 0;
+    left: auto;
+    width: 50%;
 }
 
 .slide-link__media {
-  bottom: 0;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
 }
 
 .carousel-multislide {
-  overflow: hidden;
-  .carousel-item {
-    display: block;
-    margin: 0;
-    width: 50%;
-  }
+    overflow: hidden;
+
+    .carousel-item {
+        display: block;
+        width: 50%;
+        margin: 0;
+
+        @media (max-width: (map-get($grid-breakpoints, "md") - 1)) {
+            width: 100%!important;
+        }
+    }
+
+    .carousel-item-next:not(.carousel-item-start),
+    .active.carousel-item-end {
+      transform: none;
+    }
+
+    .carousel-item-prev:not(.carousel-item-end),
+    .active.carousel-item-start {
+      transform: none;
+    }
+
+    .carousel-inner {
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: center;
+        transition: all 1s ease;
+        /*@media (min-width: map-get($grid-breakpoints, "md")) {
+            flex-direction: row;
+        }*/
+    }
+}
+
+.carousel-inner {
+    transition: all .4s ease;
+}
+
+.js-carousel-no-slide {
+    .carousel-control-next,
+    .carousel-control-prev,
+    .carousel-indicators {
+        display: none;
+    }
 }

src/scss/ui/datepicker.scss

@@ -30,3 +30,13 @@ $dp-cell-focus-color: invert($body-color) !default;
 }
 
 @import "node_modules/vanillajs-datepicker/sass/datepicker";
+
+.datepicker {
+  .days {
+    width: 100%;
+  }
+
+  &-grid {
+    width: 100%;
+  }
+}

src/scss/ui/glide.theme.scss

@@ -0,0 +1,114 @@
+@import '@glidejs/glide/src/assets/sass/variables';
+
+$glide-left-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License\) Copyright 2023 Fonticons, Inc. --><path fill="white" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>') !default;
+$glide-right-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="white" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>') !default;
+
+.#{$glide-class} {
+  $this: &;
+
+  $se: $glide-element-separator;
+  $sm: $glide-modifier-separator;
+
+  &#{$se}arrow {
+    position: absolute;
+    display: block;
+    top: 50%;
+    z-index: 2;
+    padding: 9px 12px;
+    background-color: transparent;
+    opacity: 1;
+    cursor: pointer;
+    transition: opacity 150ms ease, border 300ms ease-in-out;
+    transform: translateY(-50%);
+    line-height: 1;
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 50% 50%;
+
+    width: 2em;
+    height: 100%;
+    overflow: hidden;
+    text-indent: 5000px;
+    border: 0;
+
+    &:focus {
+      outline: none;
+    }
+    
+    &:hover {
+      background-color:rgba(0, 0, 0, 0.8);
+    }
+
+    &#{$sm}left {
+      left: 0;
+      background-image: $glide-left-icon;
+    }
+
+    &#{$sm}right {
+      right: 0;
+      background-image: $glide-right-icon;
+    }
+
+    &#{$sm}disabled {
+      opacity: 0.33;
+    }
+  }
+
+  &#{$se}bullets {
+    position: absolute;
+    z-index: 2;
+    bottom: 2em;
+    left: 50%;
+    display: inline-flex;
+    list-style: none;
+    transform: translateX(-50%);
+  }
+
+  &#{$se}bullet {
+    background-color: rgba(255, 255, 255, 0.5);
+    width: 9px;
+    height: 9px;
+    padding: 0;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    transition: all 300ms ease-in-out;
+    cursor: pointer;
+    line-height: 0;
+    box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
+    margin: 0 0.25em;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover,
+    &:focus {
+      border: 2px solid white;
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+
+    &#{$sm}active {
+      background-color: white;
+    }
+  }
+
+  &#{$sm}swipeable {
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+  }
+
+  &#{$sm}dragging {
+    cursor: grabbing;
+    cursor: -moz-grabbing;
+    cursor: -webkit-grabbing;
+  }
+  
+  &__slide {
+    position: relative;
+  }
+
+  video {
+    min-width: 100%;
+  }
+}

webpack.config.common.js

@@ -2,15 +2,14 @@
  * Common Environment
  */
 
-const INDEX_NAME = 'test-build';
+const INDEX_NAME = 'app';
 const YML_PATH = './webpack.yml';
-const CONF_VAR = 'App\\Templates\\WebpackTemplateProvider';
+const CONF_VAR = 'A2nt\\CMSNiceties\\Templates\\WebpackTemplateProvider';
 
 const path = require('path');
 const fs = require('fs');
 const yaml = require('js-yaml');
 const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 /*
  * Load webpack configuration from webpack.yml
@@ -21,18 +20,6 @@ const yml = yaml.load(
 );
 const conf = yml[CONF_VAR];
 
-const UIInfo = require('./package.json');
-const UIVERSION = JSON.stringify(UIInfo.version);
-const UIMetaInfo = require('./node_modules/@a2nt/meta-lightbox-js/package.json');
-const NODE_ENV = process.env.NODE_ENV;
-const COMPRESS = NODE_ENV === 'production' ? true : false;
-
-console.log('NODE_ENV: ' + NODE_ENV);
-console.log('COMPRESS: ' + COMPRESS);
-console.log('WebP images: ' + conf['webp']);
-console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
-console.log('HTTPS: ' + conf['HTTPS']);
-
 let themes = [];
 // add themes
 if (conf.THEMESDIR) {
@@ -134,11 +121,6 @@ const _addAppFiles = (theme) => {
 
 _addAppFiles(conf.APPDIR);
 
-// remove some backend includes
-delete includes['app_editor'];
-delete includes['app_cms'];
-delete includes['app_order'];
-
 // add themes
 themes.forEach((theme) => {
     _addAppFiles(theme);
@@ -163,9 +145,9 @@ module.exports = {
               /*'window.jQuery': require.resolve('jquery'),
               $: require.resolve('jquery'),
               jquery: require.resolve('jquery'),
-              jQuery: require.resolve('jquery'),*/
+              jQuery: require.resolve('jquery'),
               react: require.resolve('react'),
-              'react-dom': require.resolve('react-dom'),
+              'react-dom': require.resolve('react-dom'),*/
             },
             fallback: {
                 path: false,
@@ -175,45 +157,4 @@ module.exports = {
             topLevelAwait: true,
           },
       },
-    plugins: [
-        new webpack.ProvidePlugin({
-            react: 'React',
-            'react-dom': 'ReactDOM',
-            /*$: 'jquery',
-            jQuery: 'jquery',
-            Popper: ['popper.js', 'default'],
-            Util: 'exports-loader?Util!bootstrap/js/dist/util',
-            Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
-            Button: 'exports-loader?Button!bootstrap/js/dist/button',
-            Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
-            Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
-            Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
-            Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
-            Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
-            Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
-            Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
-            Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',*/
-          }),
-        new webpack.DefinePlugin({
-            'process.env': {
-                NODE_ENV: JSON.stringify(NODE_ENV),
-              },
-            UINAME: JSON.stringify(UIInfo.name),
-            UIVERSION: UIVERSION,
-            UIAUTHOR: JSON.stringify(UIInfo.author),
-            UIMetaNAME: JSON.stringify(UIMetaInfo.name),
-            UIMetaVersion: JSON.stringify(UIMetaInfo.version),
-            GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
-            SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
-            BASE_HREF: JSON.stringify(''),
-          }),
-        new webpack.LoaderOptionsPlugin({
-            minimize: COMPRESS,
-            debug: !COMPRESS,
-          }),
-        new MiniCssExtractPlugin({
-            filename: 'css/[name].css',
-            //allChunks: true,
-          }),
-    ],
   };

webpack.config.js

@@ -20,13 +20,57 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 //const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const WebpackBuildNotifications = require('webpack-build-notifications');
+
+const UIInfo = require('./package.json');
+const UINAME = JSON.stringify(UIInfo.name);
+const UIVERSION = JSON.stringify(UIInfo.version);
+const UIMetaInfo = require('./node_modules/@a2nt/meta-lightbox-js/package.json');
+
 const NODE_ENV = conf.NODE_ENV || process.env.NODE_ENV;
 const COMPRESS = NODE_ENV === 'production' ? true : false;
 
 const IP = process.env.IP || conf.HOSTNAME;
 const PORT = process.env.PORT || conf.PORT;
 
-let plugins = common.plugins;
+console.log('NODE_ENV: ' + NODE_ENV);
+console.log('COMPRESS: ' + COMPRESS);
+console.log('WebP images: ' + conf['webp']);
+console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
+
+let plugins = [
+    new webpack.ProvidePlugin({
+        react: 'React',
+        'react-dom': 'ReactDOM',
+        /*$: 'jquery',
+        jQuery: 'jquery',*/
+      }),
+    new webpack.DefinePlugin({
+            NODE_ENV: JSON.stringify(NODE_ENV),
+            UINAME: UINAME,
+            UIVERSION: UIVERSION,
+            UIAUTHOR: JSON.stringify(UIInfo.author),
+            UIMetaNAME: JSON.stringify(UIMetaInfo.name),
+            UIMetaVersion: JSON.stringify(UIMetaInfo.version),
+            GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
+            SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
+            BASE_HREF: JSON.stringify(''),
+          }),
+    new webpack.LoaderOptionsPlugin({
+        minimize: COMPRESS,
+        debug: !COMPRESS,
+      }),
+    new MiniCssExtractPlugin({
+      experimentalUseImportModule: false,
+      filename: 'css/[name].css',
+      //allChunks: true,
+    }),
+    new WebpackBuildNotifications({
+      title: UINAME + ' ' + UIVERSION,
+      logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'),
+      suppressWarning: true,
+    }),
+];
 
 if (COMPRESS) {
   plugins.push(require('autoprefixer'));
@@ -167,7 +211,7 @@ const cfg = merge(common.webpack, {
                         ecma: 8,
                       },
                     compress: {
-                        ecma: 5,
+                        ecma: 6,
                         warnings: false,
                         // Disabled because of an issue with Uglify breaking seemingly valid code:
                         // https://github.com/facebook/create-react-app/issues/2376
@@ -185,7 +229,7 @@ const cfg = merge(common.webpack, {
                         reserved: ['$', 'jQuery', 'jquery'],
                       },
                     output: {
-                        ecma: 5,
+                        ecma: 6,
                         comments: false,
                         // Turned on because emoji and regex is not minified properly using default
                         // https://github.com/facebook/create-react-app/issues/2488
@@ -226,8 +270,8 @@ const cfg = merge(common.webpack, {
       },
 
     output: {
-        publicPath: path.join(conf.APPDIR, conf.DIST),
-        path: path.join(__dirname, conf.APPDIR, conf.DIST),
+        publicPath: path.join(conf.APPDIR, conf.DIST) + '/',
+        path: path.join(__dirname, conf.APPDIR, conf.DIST) + '/',
         filename: path.join('js', '[name].js'),
       },
 
@@ -247,7 +291,7 @@ const cfg = merge(common.webpack, {
                                 '@babel/plugin-proposal-class-properties',
                             ],
                           },
-                    ],
+                    ], //Preset used for env setup
                     plugins: [
                         '@babel/plugin-transform-typescript',
                         '@babel/transform-react-jsx',
@@ -260,36 +304,37 @@ const cfg = merge(common.webpack, {
         {
             test: /\.s?css$/,
             use: [{
-                loader: MiniCssExtractPlugin.loader,
-              },
-            {
-                loader: 'css-loader',
-                options: {
-                    sourceMap: true,
+                    loader: MiniCssExtractPlugin.loader,
+                    options: {
+                        publicPath: '../',
+                      },
                   },
-              },
-            {
-                loader: 'resolve-url-loader',
-              },
-            {
-                loader: 'sass-loader',
-                options: {
-                    sourceMap: true,
+                {
+                  loader: 'css-loader',
+                  options: {
+                      sourceMap: true,
+                    },
+                },
+                {
+                    loader: 'sass-loader',
+                    options: {
+                        sourceMap: true,
+                      },
                   },
-              }, ],
+            ],
           },
         {
-            test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
+            test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
             type: 'asset/resource',
           },
         {
             test: /\.(ttf|otf|eot|woff(2)?)$/,
             type: 'asset/resource',
-          },
-        {
+          }, {
             test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
             type: 'javascript/auto',
-            use: [{
+            use: [
+            {
                 loader: 'img-optimize-loader',
                 options: {
                     name: '[name].[ext]',

webpack.config.serve.js

@@ -19,7 +19,41 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const IP = process.env.IP || conf.HOSTNAME;
 const PORT = process.env.PORT || conf.PORT;
 
-let plugins = common.plugins;
+const UIInfo = require('./package.json');
+const UIVERSION = JSON.stringify(UIInfo.version);
+const UIMetaInfo = require('./node_modules/@a2nt/meta-lightbox-js/package.json');
+
+const NODE_ENV = 'development'; //conf.NODE_ENV || process.env.NODE_ENV;
+const COMPRESS = NODE_ENV === 'production' ? true : false;
+
+console.log('NODE_ENV: ' + NODE_ENV);
+console.log('COMPRESS: ' + COMPRESS);
+console.log('WebP images: ' + conf['webp']);
+console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
+console.log('HTTPS: ' + conf['HTTPS']);
+
+const plugins = [
+    new webpack.ProvidePlugin({
+        react: 'React',
+        'react-dom': 'ReactDOM',
+        /*$: 'jquery',
+          jQuery: 'jquery',*/
+      }),
+    new webpack.DefinePlugin({
+        UINAME: JSON.stringify(UIInfo.name),
+        UIVERSION: UIVERSION,
+        UIAUTHOR: JSON.stringify(UIInfo.author),
+        UIMetaNAME: JSON.stringify(UIMetaInfo.name),
+        UIMetaVersion: JSON.stringify(UIMetaInfo.version),
+        GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
+        SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
+        BASE_HREF: JSON.stringify(
+            `http${conf['HTTPS'] ? 's' : ''}://${IP}:${PORT}`,
+        ),
+      }),
+    //new webpack.HotModuleReplacementPlugin(),
+    new MiniCssExtractPlugin(),
+];
 
 const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
 if (fs.existsSync(indexPath)) {
@@ -28,16 +62,19 @@ if (fs.existsSync(indexPath)) {
           publicPath: '',
           template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
           templateParameters: {
-              NODE_ENV: 'development',
+              NODE_ENV: NODE_ENV,
               GRAPHQL_URL: conf['GRAPHQL_URL'],
               STATIC_URL: conf['STATIC_URL'],
-              REACT_SCRIPTS: '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
+              REACT_SCRIPTS: NODE_ENV === 'production' ?
+                  '<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
             },
         }),
   );
 }
 
 const config = merge(common.webpack, {
+    mode: 'development',
+
     entry: {
       /*hot: [
         'react-hot-loader/patch',
@@ -50,7 +87,9 @@ const config = merge(common.webpack, {
         path: path.join(__dirname),
         filename: '[name].js',
         // necessary for HMR to know where to load the hot update chunks
-        publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${conf.PORT}/`,
+        publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${
+      conf.PORT
+    }/`,
       },
 
     module: {
@@ -69,10 +108,10 @@ const config = merge(common.webpack, {
                                 '@babel/plugin-proposal-class-properties',
                             ],
                           },
-                    ],
+                    ], //Preset used for env setup
                     plugins: [
-                        '@babel/plugin-transform-typescript',
                         '@babel/transform-react-jsx',
+                        '@babel/plugin-transform-typescript',
                     ],
                     cacheDirectory: true,
                     cacheCompression: true,
@@ -82,7 +121,7 @@ const config = merge(common.webpack, {
         {
             test: /\.s?css$/,
             use: [{
-                loader: MiniCssExtractPlugin.loader,
+                loader: 'style-loader', //MiniCssExtractPlugin.loader,
               },
             {
                 loader: 'css-loader',
@@ -90,9 +129,6 @@ const config = merge(common.webpack, {
                     sourceMap: true,
                   },
               },
-            {
-                loader: 'resolve-url-loader',
-              },
             {
                 loader: 'sass-loader',
                 options: {
@@ -107,22 +143,17 @@ const config = merge(common.webpack, {
         {
             test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/,
             type: 'asset/resource',
-          }, {
-            test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
-            type: 'asset/resource',
           }, ],
       },
     plugins: plugins,
 
-    mode: 'development',
-    devtool: 'inline-source-map',
     devServer: {
         host: IP,
         port: PORT,
         historyApiFallback: false,
         static: path.resolve(__dirname, conf['APPDIR'], conf['SRC']),
         https: conf['HTTPS'],
-        hot: false, //true,
+        hot: false,
         //injectClient: conf['injectClient'],
 
         headers: {

webpack.yml

@@ -2,7 +2,7 @@
 # with all configuration variables presented
 # Cuz WebPack compiling script use it to set configuration
 
-App\Templates\WebpackTemplateProvider:
+A2nt\CMSNiceties\Templates\WebpackTemplateProvider:
   APPDIR: ./
   THEMESDIR: themes
   HOSTNAME: 127.0.0.1