-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/html/Elements/Map.html b/src/html/Elements/Map.html
index e43c6cd..cacd74e 100644
--- a/src/html/Elements/Map.html
+++ b/src/html/Elements/Map.html
@@ -1,59 +1,75 @@
Find Location
-
Use _consts.js to change Google Maps to Mapbox.
+
Use _consts.js to change Google Maps to Mapbox.
-
+ class="mapAPI-map-container"
+ data-map-zoom="12"
+ data-key=""
+ data-map-style="mapbox://styles/mapbox/streets-v9"
+ data-geojson='{"type":"MarkerCollection","features":[{"id":4,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin4\" data-id=\"4\" class=\"location\">\n <div class=\"fn\">Office #1<\/div>\n <div class=\"addr\">17 Lakeside Drive<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8827743,-74.4276612\" target=\"_blank\">Get Directions »<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.4276612,40.8827743]}},{"id":3,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin3\" data-id=\"3\" class=\"location\">\n <div class=\"fn\">Office #2<\/div>\n <div class=\"addr\">Flower Hill Cemetery<\/div>\n \n \n \n <div class=\"d-none\"> N<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.7884708,-74.0249253\" target=\"_blank\">Get Directions »<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-74.0249253,40.7884708]}},{"id":2,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin2\" data-id=\"2\" class=\"location\">\n <div class=\"fn\">Office #3<\/div>\n <div class=\"addr\">555 Phoenix Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/40.8527479,-78.2475576\" target=\"_blank\">Get Directions »<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-78.2475576,40.8527479]}},{"id":1,"type":"Feature","icon":"<i class=\"fas fa-map-marker-alt\"><\/i>","properties":{"content":"<div id=\"MapPin1\" data-id=\"1\" class=\"location\">\n <div class=\"fn\">Office #4<\/div>\n <div class=\"addr\">15 East Hadley Road<\/div>\n \n \n \n <div class=\"d-none\"> U<\/div>\n \n \n \n <div class=\"dir-link\">\n <a href=\"https:\/\/www.google.com\/maps\/dir\/Current+Location\/42.3297023,-72.5552186\" target=\"_blank\">Get Directions »<\/a>\n <\/div>\n<\/div>\n"},"geometry":{"type":"Point","coordinates":[-72.5552186,42.3297023]}}]}'
+ data-fly-to-marker="true"
+ data-fly-to-bounds="false"
+>
+
-
-
-
-
Office #1
-
17 Lakeside Drive
-
U
-
-
-
-
-
-
Office #2
-
Flower Hill Cemetery
-
N
-
-
-
-
-
-
Office #3
-
555 Phoenix Road
-
U
-
-
-
-
-
-
Office #4
-
15 East Hadley Road
-
U
-
-
-
-
-
\ No newline at end of file
+
+
+
+
Office #1
+
17 Lakeside Drive
+
U
+
+
+
+
+
+
Office #2
+
Flower Hill Cemetery
+
N
+
+
+
+
+
+
Office #3
+
555 Phoenix Road
+
U
+
+
+
+
+
+
Office #4
+
15 East Hadley Road
+
U
+
+
+
+
+
diff --git a/src/html/First.html b/src/html/First.html
index f3348a8..f51b093 100644
--- a/src/html/First.html
+++ b/src/html/First.html
@@ -1,2 +1,2 @@
Please, enable javascript.
-
\ No newline at end of file
+
diff --git a/src/html/Footer.html b/src/html/Footer.html
index e5468bd..2214bf3 100644
--- a/src/html/Footer.html
+++ b/src/html/Footer.html
@@ -1,50 +1,38 @@
-
-
-
- Col #1
-
-
- Col #2
-
-
- Col #3
-
-
- Col #4
-
-
-
+
+
+
Col #1
+
Col #2
+
Col #3
+
Col #4
+
+
diff --git a/src/html/Head.html b/src/html/Head.html
index a6f74fb..5308e21 100644
--- a/src/html/Head.html
+++ b/src/html/Head.html
@@ -1,7 +1,7 @@
diff --git a/src/html/Last.html b/src/html/Last.html
index e4bc234..7a027fb 100644
--- a/src/html/Last.html
+++ b/src/html/Last.html
@@ -6,8 +6,8 @@
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/ -->
diff --git a/src/html/Navigation.html b/src/html/Navigation.html
index 9bd5f34..67d94ca 100644
--- a/src/html/Navigation.html
+++ b/src/html/Navigation.html
@@ -1,114 +1,103 @@
-
diff --git a/src/html/Slider.html b/src/html/Slider.html
index 6aab64e..7944d02 100644
--- a/src/html/Slider.html
+++ b/src/html/Slider.html
@@ -1,65 +1,106 @@
-
-
-
-
-
diff --git a/src/html/_components/LoadingSpinner.html b/src/html/_components/LoadingSpinner.html
index 83a721a..4c3a450 100644
--- a/src/html/_components/LoadingSpinner.html
+++ b/src/html/_components/LoadingSpinner.html
@@ -1,213 +1,208 @@
-
-
-
-
-
LOADING...
-
- L
- O
- A
- D
- I
- N
- G
- .
- .
- .
-
-
+
+
+
+
+
LOADING...
+
+ L
+ O
+ A
+ D
+ I
+ N
+ G
+ .
+ .
+ .
+
+
diff --git a/src/index.html b/src/index.html
index 064f2ee..36e22b4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,6 @@
-
-
+
Webpack Bootstrap 4 UI Demo
<%= require('html-loader!./html/Head.html').default %>
@@ -9,93 +8,90 @@
-
+
-
+
- <%= require('html-loader!./html/_components/LoadingSpinner.html').default %>
- <%= require('html-loader!./html/_components/Alerts.html').default %>
- <%=
- require('html-loader!./html/First.html').default %>
- <%=
- require('html-loader!./html/_components/Flyout.html').default %>
-
-
-
-
-
-
-
- <%= require('html-loader!./html/Slider.html').default %>
-
-
-
-
-
-
-
-
- Lightbox Demo
-
- <%=
- require('html-loader!../node_modules/@a2nt/meta-lightbox-js/src/html/meta-lightbox.html').default
- %>
-
-
-
-
-
-
-
- <%=
- require('html-loader!./html/Elements/Content.html').default
- %>
-
-
-
-
-
-
- <%=
- require('html-loader!./html/Elements/ElementsList.html').default
- %>
-
-
-
-
-
-
- <%=
- require('html-loader!./html/Elements/Accordion.html').default
- %>
-
-
-
-
-
-
- <%= require('html-loader!./html/Elements/Map.html').default
- %>
-
-
-
+ <%= require('html-loader!./html/_components/LoadingSpinner.html').default
+ %> <%= require('html-loader!./html/_components/Alerts.html').default %>
+ <%= require('html-loader!./html/First.html').default %> <%=
+ require('html-loader!./html/_components/Flyout.html').default %>
+
+
+
+
+
+
+
+ <%= require('html-loader!./html/Slider.html').default %>
+
+
+
+
+
+
+
+
Lightbox Demo
+ <%=
+ require('html-loader!../node_modules/@a2nt/meta-lightbox-js/src/html/meta-lightbox.html').default
+ %>
+
+
+
+
+
+
+
+ <%= require('html-loader!./html/Elements/Content.html').default %>
+
+
+
+
+
+
+ <%=
+ require('html-loader!./html/Elements/ElementsList.html').default
+ %>
+
+
+
+
+
+
+ <%= require('html-loader!./html/Elements/Accordion.html').default
+ %>
+
+
+
+
+
+
+ <%= require('html-loader!./html/Elements/Map.html').default %>
+
+
+
+
+
- <%= REACT_SCRIPTS %>
- <%= require('html-loader!./html/Last.html').default %>
-
-
+ <%= REACT_SCRIPTS %> <%= require('html-loader!./html/Last.html').default %>
+
diff --git a/src/js/_consts.js b/src/js/_consts.js
index b45faa6..f21671f 100755
--- a/src/js/_consts.js
+++ b/src/js/_consts.js
@@ -6,7 +6,7 @@
//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,
};
diff --git a/src/js/_events.js b/src/js/_events.js
index 7688ad6..cc47432 100755
--- a/src/js/_events.js
+++ b/src/js/_events.js
@@ -3,42 +3,42 @@
*/
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",
+ 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",
};
diff --git a/src/js/ajax/apollo/cache.js b/src/js/ajax/apollo/cache.js
index 29b1068..4bb79cb 100644
--- a/src/js/ajax/apollo/cache.js
+++ b/src/js/ajax/apollo/cache.js
@@ -1,13 +1,8 @@
-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 { persistCacheSync, LocalStorageWrapper } from "apollo3-cache-persist";
const cache = new InMemoryCache();
@@ -16,11 +11,9 @@ const cache = new InMemoryCache();
persistCacheSync({
cache,
storage: new LocalStorageWrapper(window.localStorage),
- key: 'web-persist',
+ key: "web-persist",
maxSize: 1048576, // 1Mb
//new IonicStorageWrapper(IonicStorageModule),
});
-export {
- cache,
-};
+export { cache };
diff --git a/src/js/ajax/apollo/init.js b/src/js/ajax/apollo/init.js
index 496e123..bbf73a4 100644
--- a/src/js/ajax/apollo/init.js
+++ b/src/js/ajax/apollo/init.js
@@ -1,25 +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';
+} 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_URL = API_META ?
- API_META.getAttribute('content') :
- `${window.location.protocol }//${ window.location.host }/graphql`;
+const API_URL = API_META
+ ? API_META.getAttribute("content")
+ : `${window.location.protocol}//${window.location.host}/graphql`;
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
@@ -32,7 +28,7 @@ const authMiddleware = new ApolloLink((operation, forward) => {
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,
@@ -42,28 +38,18 @@ const link = from([
});
return forward(operation);
}),
- onError(({
- operation,
- response,
- graphQLErrors,
- networkError,
- forward,
- }) => {
- if (operation.operationName === 'IgnoreErrorsQuery') {
+ onError(({ operation, response, graphQLErrors, networkError, forward }) => {
+ if (operation.operationName === "IgnoreErrorsQuery") {
console.error(`${NAME}: IgnoreErrorsQuery`);
response.errors = null;
return;
}
if (graphQLErrors) {
- graphQLErrors.forEach(({
- message,
- locations,
- path,
- }) =>
+ graphQLErrors.forEach(({ message, locations, path }) =>
console.error(
- `${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
- ),
+ `${NAME}: [GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+ )
);
}
@@ -91,7 +77,7 @@ const link = from([
// data from a previous link
const time = new Date() - operation.getContext().start;
console.log(
- `${NAME}: operation ${operation.operationName} took ${time} ms to complete`,
+ `${NAME}: operation ${operation.operationName} took ${time} ms to complete`
);
window.dispatchEvent(new Event(Events.ONLINE));
@@ -104,8 +90,8 @@ const link = from([
// 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,
+ credentials: "same-origin", //'include',
+ connectToDevTools: process.env.NODE_ENV === "development" ? true : false,
}),
]);
@@ -117,6 +103,4 @@ const client = new ApolloClient({
link,
});
-export {
- client,
-};
+export { client };
diff --git a/src/js/ajax/lazy-images.js b/src/js/ajax/lazy-images.js
index 1b3b153..bfe7b17 100644
--- a/src/js/ajax/lazy-images.js
+++ b/src/js/ajax/lazy-images.js
@@ -1,19 +1,19 @@
// browser tab visibility state detection
-import Events from '../_events';
-import Consts from '../_consts';
+import Events from "../_events";
+import Consts from "../_consts";
-const axios = require('axios');
+const axios = require("axios");
export default ((W) => {
- const NAME = 'main.lazy-images';
+ const NAME = "main.lazy-images";
const D = document;
const BODY = D.body;
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}`;
+ const API_STATIC_URL = API_STATIC
+ ? API_STATIC.getAttribute("content")
+ : `${window.location.protocol}//${window.location.host}`;
console.log(`${NAME} [static url]: ${API_STATIC_URL}`);
@@ -21,26 +21,26 @@ export default ((W) => {
console.log(`${NAME}: Load lazy images`);
D.querySelectorAll(`[data-lazy-src]`).forEach((el) => {
- el.classList.remove('empty');
- el.classList.add('loading');
- el.classList.remove('loading__network-error');
+ el.classList.remove("empty");
+ el.classList.add("loading");
+ el.classList.remove("loading__network-error");
- const attr = el.getAttribute('data-lazy-src');
- const imageUrl = attr.startsWith('http') ? attr : API_STATIC_URL + attr;
+ const attr = el.getAttribute("data-lazy-src");
+ const imageUrl = attr.startsWith("http") ? attr : API_STATIC_URL + attr;
// offline response will be served by caching service worker
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);
reader.onload = () => {
const imageDataUrl = reader.result;
- el.setAttribute('src', imageDataUrl);
- el.classList.remove('loading');
- el.classList.add('loading__success');
+ el.setAttribute("src", imageDataUrl);
+ el.classList.remove("loading");
+ el.classList.add("loading__success");
};
})
.catch((e) => {
@@ -49,27 +49,27 @@ export default ((W) => {
if (e.response) {
switch (e.response.status) {
case 404:
- msg = 'Not Found.';
+ msg = "Not Found.";
break;
case 500:
- msg = 'Server issue, please try again latter.';
+ msg = "Server issue, please try again latter.";
break;
default:
- msg = 'Something went wrong.';
+ msg = "Something went wrong.";
break;
}
console.error(`${NAME} [${imageUrl}]: ${msg}`);
} else if (e.request) {
- msg = 'No response received';
+ msg = "No response received";
console.error(`${NAME} [${imageUrl}]: ${msg}`);
} else {
console.error(`${NAME} [${imageUrl}]: ${e.message}`);
}
- el.classList.remove('loading');
- el.classList.add('loading__network-error');
- el.classList.add('empty');
+ el.classList.remove("loading");
+ el.classList.add("loading__network-error");
+ el.classList.add("empty");
});
});
};
diff --git a/src/js/ajax/links.js b/src/js/ajax/links.js
index 50e34c3..ddc8ac3 100644
--- a/src/js/ajax/links.js
+++ b/src/js/ajax/links.js
@@ -1,188 +1,182 @@
// browser tab visibility state detection
-import Events from '../_events';
-import Consts from '../_consts';
-import Page from './models/page.jsx';
+import Events from "../_events";
+import Consts from "../_consts";
+import Page from "./models/page.jsx";
-import {
- getParents,
-} from '../main/funcs';
+import { getParents } from "../main/funcs";
-import {
- Collapse,
-} from 'bootstrap';
+import { Collapse } from "bootstrap";
-import SpinnerUI from '../main/loading-spinner';
+import SpinnerUI from "../main/loading-spinner";
const MainUILinks = ((W) => {
- const NAME = 'main.links';
+ const 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);
- });
- }
+ // history state switch
+ 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 el_id = el.getAttribute("href");
+ el.setAttribute(`data-${ui.name}-id`, el_id);
- el.addEventListener('click', ui.loadClick);
- });
- }
+ el.addEventListener("click", ui.loadClick);
+ });
+ }
- static setActiveLinks(link) {
- const ui = this;
- D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach(
- (el) => {
- el.classList.add('active');
- },
+ static setActiveLinks(link) {
+ const ui = this;
+ D.querySelectorAll(`[data-${ui.name}-id="${link}"]`).forEach((el) => {
+ el.classList.add("active");
+ });
+ }
+
+ static reset() {
+ // reset focus
+ D.activeElement.blur();
+
+ // remove active and loading classes
+ D.querySelectorAll(".graphql-page,.nav-item").forEach((el2) => {
+ el2.classList.remove("active", "loading");
+ });
+ }
+
+ static popState(e) {
+ const ui = this;
+
+ SpinnerUI.show();
+
+ if (e.state && e.state.page) {
+ console.log(`${NAME}: [popstate] load`);
+ const state = JSON.parse(e.state.page);
+
+ state.current = null;
+ state.popstate = true;
+
+ 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(
+ ,
+ document.getElementById("MainContent")
);
}
- static reset() {
- // reset focus
- D.activeElement.blur();
+ ui.GraphPage.setState(state);
+ SpinnerUI.hide();
- // remove active and loading classes
- D.querySelectorAll('.graphql-page,.nav-item').forEach((el2) => {
- el2.classList.remove('active', 'loading');
- });
- }
+ 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;
+ } else {
+ console.warn(`${NAME}: [popstate] state is missing`);
+ console.log(e);
+ SpinnerUI.hide();
+ }
+ }
- static popState(e) {
- const ui = this;
+ // link specific event {this} = current event, not MainUILinks
+ static loadClick(e) {
+ console.groupCollapsed(`${NAME}: load on click`);
+ e.preventDefault();
- SpinnerUI.show();
+ const ui = MainUILinks;
+ const el = e.currentTarget;
- if (e.state && e.state.page) {
- console.log(`${NAME}: [popstate] load`);
- const state = JSON.parse(e.state.page);
+ SpinnerUI.show();
- state.current = null;
- state.popstate = true;
+ ui.reset();
+ el.classList.add("loading");
+ el.classList.remove("response-404", "response-500", "response-523");
+ BODY.classList.add("ajax-loading");
- 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(
- ,
- document.getElementById('MainContent'),
- );
- }
-
- ui.GraphPage.setState(state);
- SpinnerUI.hide();
-
- 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;
- } else {
- console.warn(`${NAME}: [popstate] state is missing`);
- console.log(e);
- SpinnerUI.hide();
+ // hide parent mobile nav
+ const navs = getParents(el, ".collapse");
+ if (navs.length) {
+ navs.forEach((nav) => {
+ const collapseInst = Collapse.getInstance(nav);
+ if (collapseInst) {
+ collapseInst.hide();
}
- }
+ });
+ }
- // link specific event {this} = current event, not MainUILinks
- static loadClick(e) {
- console.groupCollapsed(`${NAME}: load on click`);
- e.preventDefault();
-
- const ui = MainUILinks;
- const el = e.currentTarget;
-
- SpinnerUI.show();
-
- 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');
- if (navs.length) {
- navs.forEach((nav) => {
- const collapseInst = Collapse.getInstance(nav);
- if (collapseInst) {
- collapseInst.hide();
- }
- });
- }
-
- // hide parent dropdown
- /*const dropdowns = getParents(el, '.dropdown-menu');
+ // hide parent dropdown
+ /*const dropdowns = getParents(el, '.dropdown-menu');
if (dropdowns.length) {
const DropdownInst = Dropdown.getInstance(dropdowns[0]);
DropdownInst.hide();
}*/
- if (!ui.GraphPage) {
- ui.GraphPage = ReactDOM.render(
- ,
- document.getElementById('MainContent'),
+ if (!ui.GraphPage) {
+ ui.GraphPage = ReactDOM.render(
+ ,
+ document.getElementById("MainContent")
+ );
+ }
+
+ const link = el.getAttribute("href") || el.getAttribute("data-href");
+
+ ui.GraphPage.state.current = el;
+
+ ui.GraphPage.load(link)
+ .then((response) => {
+ BODY.classList.remove("ajax-loading");
+ el.classList.remove("loading");
+ el.classList.add("active");
+
+ D.loading_apollo_link = null;
+
+ if (ui.GraphPage.state.Link) {
+ window.history.pushState(
+ {
+ page: JSON.stringify(ui.GraphPage.state),
+ link: el.getAttribute(`data-${ui.name}-id`),
+ },
+ ui.GraphPage.state.Title,
+ ui.GraphPage.state.Link
);
+
+ ui.setActiveLinks(ui.GraphPage.state.Link);
}
- const link = el.getAttribute('href') || el.getAttribute('data-href');
+ SpinnerUI.hide();
+ window.dispatchEvent(new Event(Events.AJAX));
+ console.groupEnd(`${NAME}: load on click`);
+ })
+ .catch((e) => {
+ console.error(`${NAME}: loading error`);
+ console.log(e);
- ui.GraphPage.state.current = el;
-
- ui.GraphPage.load(link)
- .then((response) => {
- BODY.classList.remove('ajax-loading');
- el.classList.remove('loading');
- el.classList.add('active');
-
- D.loading_apollo_link = null;
-
- if (ui.GraphPage.state.Link) {
- window.history.pushState({
- page: JSON.stringify(ui.GraphPage.state),
- link: el.getAttribute(`data-${ui.name}-id`),
- },
- ui.GraphPage.state.Title,
- ui.GraphPage.state.Link,
- );
-
- ui.setActiveLinks(ui.GraphPage.state.Link)
- }
-
- SpinnerUI.hide();
-
- window.dispatchEvent(new Event(Events.AJAX));
- console.groupEnd(`${NAME}: load on click`);
- })
- .catch((e) => {
- console.error(`${NAME}: loading error`);
- console.log(e);
-
- /*BODY.classList.remove('ajax-loading');
+ /*BODY.classList.remove('ajax-loading');
el.classList.remove('loading');*/
- el.classList.add('error', `response-${e.status}`);
- /*switch (e.status) {
+ el.classList.add("error", `response-${e.status}`);
+ /*switch (e.status) {
case 500:
break;
case 404:
@@ -193,17 +187,17 @@ const MainUILinks = ((W) => {
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;
- });
- }
+ // fallback loading
+ W.location.href = link;
+ });
+ }
}
W.addEventListener(`${Events.LOADED}`, () => {
diff --git a/src/js/ajax/models/element.jsx b/src/js/ajax/models/element.jsx
index 638f006..0faa57e 100644
--- a/src/js/ajax/models/element.jsx
+++ b/src/js/ajax/models/element.jsx
@@ -1,85 +1,79 @@
/*
* 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 = {
- type: [],
- shown: false,
- loading: false,
- error: false,
- current: null,
- ID: null,
- URLSegment: null,
- ClassName: 'Page',
- CSSClass: null,
- Title: null,
- Summary: null,
- Link: null,
- URL: null,
- Elements: [],
- page: null,
- };
+ state = {
+ type: [],
+ shown: false,
+ loading: false,
+ error: false,
+ current: null,
+ ID: null,
+ URLSegment: null,
+ ClassName: "Page",
+ CSSClass: null,
+ Title: null,
+ Summary: null,
+ Link: null,
+ URL: null,
+ Elements: [],
+ page: null,
+ };
- componentDidUpdate() {
- const ui = this;
+ componentDidUpdate() {
+ const ui = this;
- if (ui.state.Title) {
- document.title = ui.state.Title;
+ if (ui.state.Title) {
+ document.title = ui.state.Title;
- if (ui.state.URL) {
- window.history.pushState(
- {
- page: JSON.stringify(ui.state)
- },
- ui.state.Title,
- ui.state.URL,
- );
- }
- }
-
- if (ui.state.Elements.length) {
- window.dispatchEvent(new Event(Events.AJAX));
- }
+ if (ui.state.URL) {
+ window.history.pushState(
+ {
+ page: JSON.stringify(ui.state),
+ },
+ ui.state.Title,
+ ui.state.URL
+ );
+ }
}
- constructor(props) {
- super(props);
-
- const ui = this;
- ui.name = ui.constructor.name;
- console.log(`${ui.name}: init`);
+ if (ui.state.Elements.length) {
+ window.dispatchEvent(new Event(Events.AJAX));
}
+ }
- reset = () => {
- const ui = this;
+ constructor(props) {
+ super(props);
- ui.setState({
- type: [],
- shown: false,
- loading: false,
- error: false,
- ID: null,
- Title: null,
- URL: null,
- Elements: [],
- });
- };
+ const ui = this;
+ ui.name = ui.constructor.name;
+ console.log(`${ui.name}: init`);
+ }
- load = (link) => {
- const ui = this;
- const query = gql(`
+ reset = () => {
+ const ui = this;
+
+ ui.setState({
+ type: [],
+ shown: false,
+ loading: false,
+ error: false,
+ ID: null,
+ Title: null,
+ URL: null,
+ Elements: [],
+ });
+ };
+
+ load = (link) => {
+ const ui = this;
+ const query = gql(`
query Pages {
readPages(URLSegment: "home", limit: 1, offset: 0) {
edges {
@@ -120,110 +114,114 @@ class Page extends Component {
}
`);
- ui.reset();
- ui.setState({
- Title: 'Loading ...',
- loading: true,
+ ui.reset();
+ ui.setState({
+ Title: "Loading ...",
+ loading: true,
+ });
+ console.log(
+ client.readQuery({
+ query,
+ })
+ );
+ client
+ .query({
+ query: query,
+ })
+ .then((resp) => {
+ const page = resp.data.readPages.edges[0].node;
+
+ // write to cache
+ client.writeQuery({
+ query,
+ data: {
+ resp,
+ },
});
- console.log(client.readQuery({
- query
- }));
- client
- .query({
- query: query,
- })
- .then((resp) => {
- const page = resp.data.readPages.edges[0].node;
-
- // write to cache
- client.writeQuery({
- query,
- data: {
- resp
- }
- });
- console.log(client.readQuery({
- query
- }));
-
- ui.setState({
- ID: page.ID,
- Title: page.Title,
- ClassName: page.ClassName,
- URLSegment: page.URLSegment,
- CSSClass: page.CSSClass,
- Summary: page.Summary,
- Link: page.Link,
- Elements: page.Elements.edges,
- URL: page.Link || link,
- loading: false,
- });
- })
- .catch((error) => {
- console.error(error);
-
- let msg = '';
-
- if (error.response) {
- switch (error.response.status) {
- case 404:
- msg = 'Not Found.';
- break;
- case 500:
- msg = 'Server issue, please try again latter.';
- break;
- default:
- msg = 'Something went wrong.';
- break;
- }
- } else if (error.request) {
- msg = 'No response received';
- } else {
- console.warn('Error', error.message);
- }
-
- ui.setState({
- error: msg
- });
- });
- };
-
- getHtml = (html) => {
- const decodeHtmlEntity = (input) => {
- var doc = new DOMParser().parseFromString(input, 'text/html');
- return doc.documentElement.textContent;
- };
-
- return {
- __html: decodeHtmlEntity(html)
- };
- };
-
- render() {
- const ui = this;
- const name = ui.name;
- const className = `elemental-area page-${ui.state.CSSClass} url-${ui.state.URLSegment}`;
-
- const ElementItem = (props) => (
-
+ console.log(
+ client.readQuery({
+ query,
+ })
);
- let html = '';
- if (ui.state.Elements.length) {
- ui.state.Elements.map((el) => {
- html += el.node.Render;
- });
+ ui.setState({
+ ID: page.ID,
+ Title: page.Title,
+ ClassName: page.ClassName,
+ URLSegment: page.URLSegment,
+ CSSClass: page.CSSClass,
+ Summary: page.Summary,
+ Link: page.Link,
+ Elements: page.Elements.edges,
+ URL: page.Link || link,
+ loading: false,
+ });
+ })
+ .catch((error) => {
+ console.error(error);
+
+ let msg = "";
+
+ if (error.response) {
+ switch (error.response.status) {
+ case 404:
+ msg = "Not Found.";
+ break;
+ case 500:
+ msg = "Server issue, please try again latter.";
+ break;
+ default:
+ msg = "Something went wrong.";
+ break;
+ }
+ } else if (error.request) {
+ msg = "No response received";
} else {
- html += 'Loading ...
';
+ console.warn("Error", error.message);
}
- return (
-
- );
+ ui.setState({
+ error: msg,
+ });
+ });
+ };
+
+ getHtml = (html) => {
+ const decodeHtmlEntity = (input) => {
+ var doc = new DOMParser().parseFromString(input, "text/html");
+ return doc.documentElement.textContent;
+ };
+
+ return {
+ __html: decodeHtmlEntity(html),
+ };
+ };
+
+ render() {
+ const ui = this;
+ const name = ui.name;
+ const className = `elemental-area page-${ui.state.CSSClass} url-${ui.state.URLSegment}`;
+
+ const ElementItem = (props) => (
+
+ );
+
+ let html = "";
+ if (ui.state.Elements.length) {
+ ui.state.Elements.map((el) => {
+ html += el.node.Render;
+ });
+ } else {
+ html += 'Loading ...
';
}
+
+ return (
+
+ );
+ }
}
export default Page;
diff --git a/src/js/ajax/models/page.jsx b/src/js/ajax/models/page.jsx
index 3030278..af5c1e8 100644
--- a/src/js/ajax/models/page.jsx
+++ b/src/js/ajax/models/page.jsx
@@ -1,72 +1,63 @@
/*
* 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;
class Page extends Component {
- state = {
- type: [],
- shown: false,
- Title: 'Loading ...',
- loading: true,
- error: false,
- current: null,
- ID: null,
- URLSegment: null,
- ClassName: 'Page',
- CSSClass: null,
- Summary: null,
- Link: null,
- URL: null,
- HTML: null,
- Elements: [],
- page: null,
- };
+ state = {
+ type: [],
+ shown: false,
+ Title: "Loading ...",
+ loading: true,
+ error: false,
+ current: null,
+ ID: null,
+ URLSegment: null,
+ ClassName: "Page",
+ CSSClass: null,
+ Summary: null,
+ Link: null,
+ URL: null,
+ HTML: null,
+ Elements: [],
+ page: null,
+ };
- componentDidUpdate() {
- const ui = this;
+ componentDidUpdate() {
+ const ui = this;
- if (ui.state.Title) {
- document.title = ui.state.Title;
- }
+ if (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');
- };
+ isOnline = () => {
+ return BODY.classList.contains("is-online");
+ };
- load = (link) => {
- const ui = this;
+ load = (link) => {
+ const ui = this;
- return new Promise((resolve, reject) => {
- const query = gql(`query Pages {
+ return new Promise((resolve, reject) => {
+ const query = gql(`query Pages {
readPages(Link: "${link}") {
edges {
node {
@@ -85,149 +76,149 @@ class Page extends Component {
}
}`);
- if (!ui.isOnline()) {
- const data = client.readQuery({
- query
- });
-
- if (data && ui.processResponse(data)) {
- console.log(`${ui.name}: Offline cached response`);
- resolve(data);
- } else {
- console.log(`${ui.name}: No offline response`);
-
- ui.setState(
- Object.assign(ui.empty_state, {
- Title: 'Offline',
- CSSClass: 'graphql__status-523',
- Summary: "You're Offline. The page is not available now.",
- loading: false,
- }),
- );
-
- reject({
- status: 523
- });
- }
- } else {
- if (!ui.state.loading) {
- ui.setState(ui.empty_state);
- }
-
- client
- .query({
- query: query,
- fetchPolicy: ui.isOnline() ? 'no-cache' : 'cache-first',
- })
- .then((resp) => {
- // write to cache
- const data = resp.data;
- client.writeQuery({
- query,
- data: data
- });
-
- if (ui.processResponse(data)) {
- console.log(`${ui.name}: got the server response`);
- resolve(data);
- } else {
- console.log(`${ui.name}: not found`);
- reject({
- status: 404
- });
- }
- })
- .catch((error) => {
- reject({
- status: 500,
- error: error
- });
- });
- }
+ if (!ui.isOnline()) {
+ const data = client.readQuery({
+ query,
});
- };
- processResponse = (data) => {
- const ui = this;
+ if (data && ui.processResponse(data)) {
+ console.log(`${ui.name}: Offline cached response`);
+ resolve(data);
+ } else {
+ console.log(`${ui.name}: No offline response`);
- if (!data.readPages.edges.length) {
- console.log(`${ui.name}: not found`);
+ ui.setState(
+ Object.assign(ui.empty_state, {
+ Title: "Offline",
+ CSSClass: "graphql__status-523",
+ Summary: "You're Offline. The page is not available now.",
+ loading: false,
+ })
+ );
- ui.setState(
- Object.assign(ui.empty_state, {
- Title: 'Not Found',
- CSSClass: 'graphql__status-404',
- Summary: 'The page is not found.',
- loading: false,
- }),
- );
-
- return false;
+ reject({
+ status: 523,
+ });
+ }
+ } else {
+ if (!ui.state.loading) {
+ ui.setState(ui.empty_state);
}
- const page = data.readPages.edges[0].node;
- ui.setState({
- ID: page.ID,
- Title: page.Title,
- ClassName: page.ClassName,
- URLSegment: page.URLSegment,
- CSSClass: page.CSSClass,
- Summary: page.Summary,
- Link: page.Link,
- HTML: page.HTML,
- Elements: [], //page.Elements.edges,
- loading: false,
- });
-
- return true;
- };
-
- getHtml = (html) => {
- const decodeHtmlEntity = (input) => {
- var doc = new DOMParser().parseFromString(input, 'text/html');
- return doc.documentElement.textContent;
- };
-
- return {
- __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}`;
-
- const ElementItem = (props) => (
-
- );
-
- let html = '';
- if (ui.state.HTML) {
- console.log(`${ui.name}: HTML only`);
- html = ui.state.HTML;
- } else if (ui.state.Elements.length) {
- console.log(`${ui.name}: render`);
- ui.state.Elements.map((el) => {
- html += el.node.Render;
+ client
+ .query({
+ query: query,
+ fetchPolicy: ui.isOnline() ? "no-cache" : "cache-first",
+ })
+ .then((resp) => {
+ // write to cache
+ const data = resp.data;
+ client.writeQuery({
+ query,
+ data: data,
});
- } else if (ui.state.Summary && ui.state.Summary.length) {
- console.log(`${ui.name}: summary only`);
- html = `${ui.state.Summary}
`;
- }
- if (ui.state.loading) {
- const spinner = D.getElementById('PageLoading');
- html = `Loading ...
`;
- }
+ if (ui.processResponse(data)) {
+ console.log(`${ui.name}: got the server response`);
+ resolve(data);
+ } else {
+ console.log(`${ui.name}: not found`);
+ reject({
+ status: 404,
+ });
+ }
+ })
+ .catch((error) => {
+ reject({
+ status: 500,
+ error: error,
+ });
+ });
+ }
+ });
+ };
- return (
-
- );
+ processResponse = (data) => {
+ const ui = this;
+
+ if (!data.readPages.edges.length) {
+ 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,
+ })
+ );
+
+ return false;
}
+
+ const page = data.readPages.edges[0].node;
+ ui.setState({
+ ID: page.ID,
+ Title: page.Title,
+ ClassName: page.ClassName,
+ URLSegment: page.URLSegment,
+ CSSClass: page.CSSClass,
+ Summary: page.Summary,
+ Link: page.Link,
+ HTML: page.HTML,
+ Elements: [], //page.Elements.edges,
+ loading: false,
+ });
+
+ return true;
+ };
+
+ getHtml = (html) => {
+ const decodeHtmlEntity = (input) => {
+ var doc = new DOMParser().parseFromString(input, "text/html");
+ return doc.documentElement.textContent;
+ };
+
+ return {
+ __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}`;
+
+ const ElementItem = (props) => (
+
+ );
+
+ let html = "";
+ if (ui.state.HTML) {
+ console.log(`${ui.name}: HTML only`);
+ html = ui.state.HTML;
+ } else if (ui.state.Elements.length) {
+ console.log(`${ui.name}: render`);
+ ui.state.Elements.map((el) => {
+ html += el.node.Render;
+ });
+ } else if (ui.state.Summary && ui.state.Summary.length) {
+ console.log(`${ui.name}: summary only`);
+ html = `${ui.state.Summary}
`;
+ }
+
+ if (ui.state.loading) {
+ const spinner = D.getElementById("PageLoading");
+ html = `Loading ...
`;
+ }
+
+ return (
+
+ );
+ }
}
export default Page;
diff --git a/src/js/ajax/online.js b/src/js/ajax/online.js
index e31f1d4..e274727 100644
--- a/src/js/ajax/online.js
+++ b/src/js/ajax/online.js
@@ -1,12 +1,12 @@
// ping online/offline state switch and detection
-import Events from '../_events';
-import Consts from '../_consts';
+import Events from "../_events";
+import Consts from "../_consts";
-const axios = require('axios');
+const axios = require("axios");
export default ((W) => {
- const NAME = 'main.online';
+ const NAME = "main.online";
const D = document;
const BODY = D.body;
@@ -21,7 +21,7 @@ export default ((W) => {
update_online_status_lock = true;
if (online) {
- if (BODY.classList.contains('is-offline')) {
+ if (BODY.classList.contains("is-offline")) {
console.log(`${NAME}: back Online`);
W.dispatchEvent(new Event(Events.BACKONLINE));
} else {
@@ -29,8 +29,8 @@ export default ((W) => {
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`);
@@ -39,8 +39,8 @@ export default ((W) => {
} else {
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;
@@ -54,11 +54,11 @@ export default ((W) => {
// session ping
let session_ping_lock = false;
const SESSION_PING = () => {
- if (session_ping_lock || BODY.classList.contains('is-offline')) {
+ if (session_ping_lock || 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;
@@ -80,9 +80,8 @@ export default ((W) => {
// current browser online state
-
const navigatorStateUpdate = () => {
- if (typeof navigator.onLine !== 'undefined') {
+ if (typeof navigator.onLine !== "undefined") {
if (!navigator.onLine) {
UPDATE_ONLINE_STATUS(false);
} else {
diff --git a/src/js/app.js b/src/js/app.js
index bfaf7ce..3f99757 100755
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,31 +1,31 @@
-'use strict';
+"use strict";
/*
- * UI Basics
+ * UI Basics
*/
//import $ from 'jquery';
-import '../scss/app.scss';
+import "../scss/app.scss";
-import Events from './_events';
-import MainUI from './main';
+import Events from "./_events";
+import MainUI from "./main";
/*
* Extra functionality
*/
-import '@a2nt/meta-lightbox-js/src/js/app';
-import './ui/carousel';
+import "@a2nt/meta-lightbox-js/src/js/app";
+import "./ui/carousel";
//import './ui/ui.instagram.feed';
/*
* AJAX functionality
*/
//import './ajax/links';
-import './ajax/online';
-import './ajax/lazy-images';
+import "./ajax/online";
+import "./ajax/lazy-images";
/*
* Site specific modules
*/
-import './layout';
+import "./layout";
//import 'hammerjs/hammer';
//import 'jquery-hammerjs/jquery.hammer';
diff --git a/src/js/drivers/google.track.external.links.js b/src/js/drivers/google.track.external.links.js
index 1ba472b..1c7e2e4 100644
--- a/src/js/drivers/google.track.external.links.js
+++ b/src/js/drivers/google.track.external.links.js
@@ -1,5 +1,5 @@
function _gaLt(event) {
- if (typeof ga !== 'function') {
+ if (typeof ga !== "function") {
return;
}
@@ -8,8 +8,8 @@ function _gaLt(event) {
/* 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;
@@ -21,7 +21,7 @@ function _gaLt(event) {
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) {
+ var hitBack = function (link, target) {
target ? window.open(link, target) : (window.location.href = link);
};
/* Is target set and not _(self|parent|top)? */
@@ -31,12 +31,12 @@ function _gaLt(event) {
: 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) },
+ { hitCallback: hitBack(link, target) }
);
/* Prevent standard click */
@@ -49,13 +49,13 @@ function _gaLt(event) {
var w = window;
w.addEventListener
? w.addEventListener(
- 'load',
+ "load",
() => {
- document.body.addEventListener('click', _gaLt, !1);
+ document.body.addEventListener("click", _gaLt, !1);
},
- !1,
+ !1
)
: w.attachEvent &&
- w.attachEvent('onload', () => {
- document.body.attachEvent('onclick', _gaLt);
+ w.attachEvent("onload", () => {
+ document.body.attachEvent("onclick", _gaLt);
});
diff --git a/src/js/drivers/map.google.font-icons.js b/src/js/drivers/map.google.font-icons.js
index ccb5373..db5b52e 100644
--- a/src/js/drivers/map.google.font-icons.js
+++ b/src/js/drivers/map.google.font-icons.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
const Obj = {
init: () => {
@@ -9,11 +9,9 @@ const Obj = {
ui.setMap(options.map);
ui.position = options.position;
- ui.html =
- (options.html ?
- options.html :
- '
'
- );
+ ui.html = options.html
+ ? options.html
+ : '
';
ui.divClass = options.divClass;
ui.align = options.align;
ui.isDebugMode = options.debug;
@@ -21,7 +19,7 @@ const Obj = {
ui.onMouseOver = options.onMouseOver;
ui.isBoolean = (arg) => {
- if (typeof arg === 'boolean') {
+ if (typeof arg === "boolean") {
return true;
} else {
return false;
@@ -29,7 +27,7 @@ const Obj = {
};
ui.isNotUndefined = (arg) => {
- if (typeof arg !== 'undefined') {
+ if (typeof arg !== "undefined") {
return true;
} else {
return false;
@@ -45,7 +43,7 @@ const Obj = {
};
ui.isString = (arg) => {
- if (typeof arg === 'string') {
+ if (typeof arg === "string") {
return true;
} else {
return false;
@@ -53,7 +51,7 @@ const Obj = {
};
ui.isFunction = (arg) => {
- if (typeof arg === 'function') {
+ if (typeof arg === "function") {
return true;
} else {
return false;
@@ -64,8 +62,8 @@ const Obj = {
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))
@@ -81,19 +79,19 @@ const Obj = {
// 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 =
'
' +
'Debug mode
';
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;"
);
}
@@ -101,14 +99,14 @@ const Obj = {
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');
+ 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');
+ google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
+ google.maps.event.trigger(ui, "mouseover");
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation();
});
@@ -118,9 +116,9 @@ const Obj = {
const ui = this;
// Calculate position of div
- var positionInPixels = ui.getProjection().fromLatLngToDivPixel(
- new google.maps.LatLng(ui.position)
- );
+ var positionInPixels = ui
+ .getProjection()
+ .fromLatLngToDivPixel(new google.maps.LatLng(ui.position));
// Align HTML overlay relative to original position
var divOffset = {
@@ -128,40 +126,40 @@ const Obj = {
x: undefined,
};
- switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
- case 'left top':
+ 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':
+ case "left center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth;
break;
- case 'left bottom':
+ case "left bottom":
divOffset.y = 0;
divOffset.x = ui.div.offsetWidth;
break;
- case 'center top':
+ case "center top":
divOffset.y = ui.div.offsetHeight;
divOffset.x = ui.div.offsetWidth / 2;
break;
- case 'center center':
+ case "center center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth / 2;
break;
- case 'center bottom':
+ case "center bottom":
divOffset.y = 0;
divOffset.x = ui.div.offsetWidth / 2;
break;
- case 'right top':
+ case "right top":
divOffset.y = ui.div.offsetHeight;
divOffset.x = 0;
break;
- case 'right center':
+ case "right center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = 0;
break;
- case 'right bottom':
+ case "right bottom":
divOffset.y = 0;
divOffset.x = 0;
break;
@@ -171,8 +169,8 @@ const Obj = {
}
// 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() {
@@ -194,6 +192,6 @@ const Obj = {
}
return GoogleMapsHtmlOverlay;
},
-}
+};
export default Obj;
diff --git a/src/js/drivers/map.google.js b/src/js/drivers/map.google.js
index 262e969..42f8e5f 100644
--- a/src/js/drivers/map.google.js
+++ b/src/js/drivers/map.google.js
@@ -1,14 +1,14 @@
-'use strict';
+"use strict";
-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 = ((window) => {
class GoogleMapsDriver {
getName() {
- return 'GoogleMapsDriver';
+ return "GoogleMapsDriver";
}
init(el, config = []) {
@@ -22,8 +22,10 @@ const GoogleMapsDriver = ((window) => {
ui.googleApiLoaded();
};
- const script = document.createElement('script');
- script.src = `https://maps.googleapis.com/maps/api/js?key=${config['key']}&callback=init${ui.getName()}`;
+ 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);
@@ -34,18 +36,22 @@ const GoogleMapsDriver = ((window) => {
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;
- const center = config['center'] && config['center'] !== ',' ?
- {
- lat: config['center'][1],
- lng: config['center'][0],
- } :
- {
- lat: 0,
- lng: 0,
- };
- const style = config['style'] ? config['style'] : null;
+ const mapDiv = el.querySelector(".mapAPI-map");
+ const zoom =
+ config["mapZoom"] && config["mapZoom"] !== "0"
+ ? parseInt(config["mapZoom"])
+ : 10;
+ const center =
+ config["center"] && config["center"] !== ","
+ ? {
+ 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`);
// init fontawesome icons
@@ -60,27 +66,30 @@ const GoogleMapsDriver = ((window) => {
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',
- html: '',
+ align: ["center", "top"],
+ divClass: "mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none",
+ html:
+ '",
});
ui.popup.setMap(ui.map);
ui.geocoder = new google.maps.Geocoder();
ui.cluster = new MarkerClusterer(ui.map, null, {
- styles: [{
- width: 30,
- height: 30,
- className: 'mapboxgl-cluster',
- }],
+ styles: [
+ {
+ width: 30,
+ height: 30,
+ className: "mapboxgl-cluster",
+ },
+ ],
});
el.dispatchEvent(new Event(Events.MAPAPILOADED));
@@ -97,11 +106,11 @@ const GoogleMapsDriver = ((window) => {
const marker = new ui.MarkerUI({
position: pos,
map: ui.map,
- align: ['center', 'top'],
- html: ``,
+ align: ["center", "top"],
+ html: ``,
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));
},
@@ -118,38 +127,40 @@ const GoogleMapsDriver = ((window) => {
const ui = this;
const popup = ui.popup.getDiv();
- if (ui.config['flyToMarker']) {
+ if (ui.config["flyToMarker"]) {
ui.map.setCenter(pos); // panTo
- if (!ui.config['noZoom']) {
+ 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();
- });
+ popup
+ .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();
- popup.classList.add('d-none');
- if (!ui.config['noRestoreBounds'] || ui.config['flyToBounds']) {
+ popup.classList.add("d-none");
+ if (!ui.config["noRestoreBounds"] || ui.config["flyToBounds"]) {
ui.restoreBounds();
}
@@ -164,20 +175,20 @@ const GoogleMapsDriver = ((window) => {
address: addr,
},
(results, status) => {
- if (status === 'OK') {
+ if (status === "OK") {
//results[0].geometry.location;
- if (typeof callback === 'function') {
+ if (typeof callback === "function") {
callback(results);
}
return results;
} else {
console.error(
- `${ui.getName()}: Geocode was not successful for the following reason: ${status}`,
+ `${ui.getName()}: Geocode was not successful for the following reason: ${status}`
);
}
- },
+ }
);
}
@@ -189,26 +200,26 @@ const GoogleMapsDriver = ((window) => {
location: latlng,
},
(results, status) => {
- if (status === 'OK') {
+ if (status === "OK") {
//results[0].formatted_address;
- if (typeof callback === 'function') {
+ if (typeof callback === "function") {
callback(results);
}
return results;
} else {
console.error(
- `${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`,
+ `${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
);
}
- },
+ }
);
}
addGeoJson(config) {
const ui = this;
- const geojson = JSON.parse(config['geojson']);
+ const geojson = JSON.parse(config["geojson"]);
const firstMarker = geojson.features[0].geometry.coordinates;
//Map.setCenter(firstMarker);
const bounds = new google.maps.LatLngBounds();
@@ -223,7 +234,7 @@ const GoogleMapsDriver = ((window) => {
id,
content,
icon: marker.icon,
- flyToMarker: config['flyToMarker'],
+ flyToMarker: config["flyToMarker"],
});
bounds.extend({
diff --git a/src/js/drivers/map.google.marker.js b/src/js/drivers/map.google.marker.js
index b4fe75a..18acc90 100644
--- a/src/js/drivers/map.google.marker.js
+++ b/src/js/drivers/map.google.marker.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
const Obj = {
init: () => {
@@ -10,9 +10,9 @@ const Obj = {
ui.ownerMap = options.map;
//ui.setMap(options.map);
ui.position = options.position;
- ui.html = options.html ?
- options.html :
- '
';
+ ui.html = options.html
+ ? options.html
+ : '
';
ui.divClass = options.divClass;
ui.align = options.align;
ui.isDebugMode = options.debug;
@@ -20,7 +20,7 @@ const Obj = {
ui.onMouseOver = options.onMouseOver;
ui.isBoolean = (arg) => {
- if (typeof arg === 'boolean') {
+ if (typeof arg === "boolean") {
return true;
} else {
return false;
@@ -28,7 +28,7 @@ const Obj = {
};
ui.isNotUndefined = (arg) => {
- if (typeof arg !== 'undefined') {
+ if (typeof arg !== "undefined") {
return true;
} else {
return false;
@@ -44,7 +44,7 @@ const Obj = {
};
ui.isString = (arg) => {
- if (typeof arg === 'string') {
+ if (typeof arg === "string") {
return true;
} else {
return false;
@@ -52,7 +52,7 @@ const Obj = {
};
ui.isFunction = (arg) => {
- if (typeof arg === 'function') {
+ if (typeof arg === "function") {
return true;
} else {
return false;
@@ -63,8 +63,8 @@ const Obj = {
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))
@@ -73,26 +73,26 @@ const Obj = {
// Validate and set custom HTML
if (
ui.isNotUndefined(ui.html) &&
- ui.hasContent(ui.html) &&
- ui.isString(ui.html)
+ ui.hasContent(ui.html) &&
+ ui.isString(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 =
- '
' +
- 'Debug mode
';
+ '
' +
+ 'Debug mode
';
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;"
);
}
@@ -100,14 +100,14 @@ const Obj = {
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');
+ 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');
+ google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
+ google.maps.event.trigger(ui, "mouseover");
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation();
});
@@ -116,7 +116,7 @@ const Obj = {
draw() {
const ui = this;
- let div = document.querySelector('.popup');
+ let div = document.querySelector(".popup");
if (!div.length) {
div = ui.div;
}
@@ -125,11 +125,13 @@ const Obj = {
const projection = ui.getProjection();
if (!projection) {
- console.log('GoogleMapsHtmlOverlay: current map is missing');
+ console.log("GoogleMapsHtmlOverlay: current map is missing");
return null;
}
- const positionInPixels = projection.fromLatLngToDivPixel(ui.getPosition());
+ const positionInPixels = projection.fromLatLngToDivPixel(
+ ui.getPosition()
+ );
// Align HTML overlay relative to original position
const offset = {
@@ -139,40 +141,40 @@ const Obj = {
const divWidth = div.offsetWidth;
const divHeight = div.offsetHeight;
- switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
- case 'left top':
+ switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
+ case "left top":
offset.y = divHeight;
offset.x = divWidth;
break;
- case 'left center':
+ case "left center":
offset.y = divHeight / 2;
offset.x = divWidth;
break;
- case 'left bottom':
+ case "left bottom":
offset.y = 0;
offset.x = divWidth;
break;
- case 'center top':
+ case "center top":
offset.y = divHeight;
offset.x = divWidth / 2;
break;
- case 'center center':
+ case "center center":
offset.y = divHeight / 2;
offset.x = divWidth / 2;
break;
- case 'center bottom':
+ case "center bottom":
offset.y = 0;
offset.x = divWidth / 2;
break;
- case 'right top':
+ case "right top":
offset.y = divHeight;
offset.x = 0;
break;
- case 'right center':
+ case "right center":
offset.y = divHeight / 2;
offset.x = 0;
break;
- case 'right bottom':
+ case "right bottom":
offset.y = 0;
offset.x = 0;
break;
diff --git a/src/js/drivers/map.mapbox.js b/src/js/drivers/map.mapbox.js
index ae38ce4..872c801 100644
--- a/src/js/drivers/map.mapbox.js
+++ b/src/js/drivers/map.mapbox.js
@@ -1,40 +1,40 @@
-'use strict';
+"use strict";
//import $ from 'jquery';
-import mapBoxGL from 'mapbox-gl';
+import mapBoxGL from "mapbox-gl";
-import Events from '../../_events';
+import Events from "../../_events";
const MapBoxDriver = (($) => {
class MapBoxDriver {
getName() {
- return 'MapBoxDriver';
+ return "MapBoxDriver";
}
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],
+ 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,
+ 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,24 +42,24 @@ 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());
- ui.map.on('load', (e) => {
+ ui.map.on("load", (e) => {
$el.trigger(Events.MAPAPILOADED);
});
ui.popup = new mapBoxGL.Popup({
closeOnClick: false,
- className: 'popup',
+ className: "popup",
});
}
@@ -68,16 +68,13 @@ const MapBoxDriver = (($) => {
// create a DOM el for the marker
const $el = $(
- `${config['icon']}
`,
+ `${config["icon"]}
`
);
- $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,
@@ -135,12 +132,12 @@ const MapBoxDriver = (($) => {
}, labelLayerId);
}*/
- const firstMarker = config['geojson'].features[0].geometry.coordinates;
+ 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) => {
+ config["geojson"].features.forEach((marker) => {
const id = marker.id;
const crds = marker.geometry.coordinates;
const content = marker.properties.content;
@@ -149,7 +146,7 @@ const MapBoxDriver = (($) => {
id,
content,
icon: marker.icon,
- flyToMarker: config['flyToMarker'],
+ flyToMarker: config["flyToMarker"],
});
bounds.extend(crds);
@@ -159,8 +156,8 @@ const MapBoxDriver = (($) => {
padding: 30,
});
- ui.popup.on('close', (e) => {
- if (config['flyToBounds']) {
+ ui.popup.on("close", (e) => {
+ if (config["flyToBounds"]) {
ui.map.fitBounds(bounds, {
padding: 30,
});
diff --git a/src/js/layout/index.js b/src/js/layout/index.js
index 5009814..364d922 100644
--- a/src/js/layout/index.js
+++ b/src/js/layout/index.js
@@ -1,19 +1,20 @@
-import Events from '../_events';
+import Events from "../_events";
const LayoutUI = ((W) => {
- const NAME = '_layout';
+ const NAME = "_layout";
const D = document;
const BODY = D.body;
const init_fonts = () => {
console.log(`${NAME}: init_fonts`);
- const css = D.createElement('link');
- css.rel = 'stylesheet';
- css.type = 'text/css';
- css.media = 'all';
- css.href = 'https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap';
- D.getElementsByTagName('head')[0].appendChild(css);
+ const css = D.createElement("link");
+ css.rel = "stylesheet";
+ css.type = "text/css";
+ css.media = "all";
+ css.href =
+ "https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap";
+ D.getElementsByTagName("head")[0].appendChild(css);
};
const init_analytics = () => {
@@ -40,7 +41,7 @@ const LayoutUI = ((W) => {
);
ga('create', 'UA-********-*', 'auto');
ga('send', 'pageview');*/
- }
+ };
W.addEventListener(`${Events.LOADED}`, () => {
init_fonts();
diff --git a/src/js/libs/log.js b/src/js/libs/log.js
index 5b93f5b..50b8c89 100644
--- a/src/js/libs/log.js
+++ b/src/js/libs/log.js
@@ -1,4 +1,4 @@
-var debug = process.env.NODE_ENV === 'development' ? true : false;
+var debug = process.env.NODE_ENV === "development" ? true : false;
const log = (msg) => {
if (debug) {
diff --git a/src/js/main/css-screen-size.js b/src/js/main/css-screen-size.js
index c1749e3..1d44692 100644
--- a/src/js/main/css-screen-size.js
+++ b/src/js/main/css-screen-size.js
@@ -1,16 +1,16 @@
// 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 NAME = "_main.css-screen-size";
const D = document;
const BODY = D.body;
const detectCSSScreenSize = () => {
- const el = D.createElement('div');
- el.className = 'env-test';
+ const el = D.createElement("div");
+ el.className = "env-test";
BODY.appendChild(el);
const envs = [...Consts.ENVS].reverse();
@@ -21,7 +21,7 @@ export default ((W) => {
const env = envs[i];
el.classList.add(`d-${env}-none`);
- if (W.getComputedStyle(el).display === 'none') {
+ if (W.getComputedStyle(el).display === "none") {
curEnv = env;
BODY.classList.add(`${curEnv}`);
break;
@@ -30,17 +30,17 @@ export default ((W) => {
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;
- 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}`,
+ `${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
);
BODY.removeChild(el);
diff --git a/src/js/main/index.js b/src/js/main/index.js
index 5cb5da2..62fe87e 100644
--- a/src/js/main/index.js
+++ b/src/js/main/index.js
@@ -1,7 +1,7 @@
-import Events from '../_events';
-import Consts from '../_consts';
+import Events from "../_events";
+import Consts from "../_consts";
-import './visibility';
-import './touch';
-import './css-screen-size';
-import './main';
+import "./visibility";
+import "./touch";
+import "./css-screen-size";
+import "./main";
diff --git a/src/js/main/loading-spinner.js b/src/js/main/loading-spinner.js
index 3c7cd20..9dff8a1 100644
--- a/src/js/main/loading-spinner.js
+++ b/src/js/main/loading-spinner.js
@@ -1,20 +1,20 @@
// browser tab visibility state detection
-import Events from '../_events';
+import Events from "../_events";
-const NAME = '_main.loading-spinner';
+const NAME = "_main.loading-spinner";
const D = document;
const BODY = D.body;
-const SPINNER = D.getElementById('PageLoading');
+const SPINNER = D.getElementById("PageLoading");
class SpinnerUI {
static show() {
console.log(`${NAME}: show`);
- SPINNER.classList.remove('d-none');
+ SPINNER.classList.remove("d-none");
}
static hide() {
console.log(`${NAME}: hide`);
- SPINNER.classList.add('d-none');
+ SPINNER.classList.add("d-none");
}
}
diff --git a/src/js/main/main.js b/src/js/main/main.js
index 9f7672a..7affa5a 100644
--- a/src/js/main/main.js
+++ b/src/js/main/main.js
@@ -1,40 +1,40 @@
-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 NAME = "_main";
const D = document;
const BODY = D.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.groupEnd("Events");
- console.groupCollapsed('Consts');
+ console.groupCollapsed("Consts");
Object.keys(Consts).forEach((k) => {
console.info(`${k}: ${Consts[k]}`);
});
- console.groupEnd('Events');
+ console.groupEnd("Events");
- console.groupCollapsed('Init');
- console.time('init');
+ console.groupCollapsed("Init");
+ console.time("init");
class MainUI {
// first time the website initialization
@@ -47,7 +47,7 @@ const MainUI = ((W) => {
landing: W.location.href,
},
D.title,
- W.location.href,
+ W.location.href
);
//
@@ -64,11 +64,11 @@ const MainUI = ((W) => {
W.addEventListener(`${Events.LOADED}`, () => {
MainUI.init();
- BODY.classList.add('loaded');
+ BODY.classList.add("loaded");
SpinnerUI.hide();
- console.groupEnd('init');
- console.timeEnd('init');
+ console.groupEnd("init");
+ console.timeEnd("init");
W.dispatchEvent(new Event(Events.LODEDANDREADY));
});
diff --git a/src/js/main/touch.js b/src/js/main/touch.js
index b28f4c1..596c255 100644
--- a/src/js/main/touch.js
+++ b/src/js/main/touch.js
@@ -1,10 +1,10 @@
// touch/mouse detection
-import Events from '../_events';
-import Consts from '../_consts';
+import Events from "../_events";
+import Consts from "../_consts";
export default ((W) => {
- const NAME = '_main.touch';
+ const NAME = "_main.touch";
const D = document;
const BODY = D.body;
@@ -18,15 +18,15 @@ export default ((W) => {
if (bool) {
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));
} else {
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));
}
@@ -42,29 +42,29 @@ export default ((W) => {
};
SET_TOUCH_SCREEN(
- 'ontouchstart' in W ||
- navigator.MaxTouchPoints > 0 ||
- navigator.msMaxTouchPoints > 0 ||
- W.matchMedia('(hover: none)').matches,
- 'init',
+ "ontouchstart" in W ||
+ navigator.MaxTouchPoints > 0 ||
+ navigator.msMaxTouchPoints > 0 ||
+ W.matchMedia("(hover: none)").matches,
+ "init"
);
- D.addEventListener('touchend', (e) => {
+ D.addEventListener("touchend", (e) => {
let touch = false;
- if (e.type !== 'click') {
+ 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) => {
+ D.addEventListener("click", (e) => {
let touch = false;
- if (e.type !== 'click') {
+ if (e.type !== "click") {
touch = true;
}
- SET_TOUCH_SCREEN(touch, 'click-touchend');
+ SET_TOUCH_SCREEN(touch, "click-touchend");
});
})(window);
diff --git a/src/js/main/visibility.js b/src/js/main/visibility.js
index 8459a35..049ef3f 100644
--- a/src/js/main/visibility.js
+++ b/src/js/main/visibility.js
@@ -1,32 +1,32 @@
// 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 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`);
- 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));
} else {
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));
}
diff --git a/src/js/store/components/index.js b/src/js/store/components/index.js
index 9524b03..419dd53 100644
--- a/src/js/store/components/index.js
+++ b/src/js/store/components/index.js
@@ -1,5 +1,3 @@
-import PageControls from './page-controls';
+import PageControls from "./page-controls";
-export {
- PageControls,
-};
+export { PageControls };
diff --git a/src/js/store/components/page-controls.js b/src/js/store/components/page-controls.js
index fc3ece7..bf0b45d 100644
--- a/src/js/store/components/page-controls.js
+++ b/src/js/store/components/page-controls.js
@@ -1,6 +1,6 @@
export default class PageControls {
constructor(store) {
- console.log('page-controls init');
+ console.log("page-controls init");
console.log(store);
}
}
diff --git a/src/js/store/configure.js b/src/js/store/configure.js
index 0f2b048..0506cc6 100644
--- a/src/js/store/configure.js
+++ b/src/js/store/configure.js
@@ -1,8 +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)
+ return createStore(reducers);
}
diff --git a/src/js/store/connect.js b/src/js/store/connect.js
index a24590e..0000312 100644
--- a/src/js/store/connect.js
+++ b/src/js/store/connect.js
@@ -1,3 +1,3 @@
export function getItemList(store) {
- return store.getState().items.all
+ return store.getState().items.all;
}
diff --git a/src/js/store/index.js b/src/js/store/index.js
index 35293fa..493f3c3 100644
--- a/src/js/store/index.js
+++ b/src/js/store/index.js
@@ -1,4 +1,4 @@
-import configure from './configure'
+import configure from "./configure";
const store = configure();
/*import {
@@ -9,11 +9,11 @@ const store = configure();
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",
+});
diff --git a/src/js/store/reducers/counter.js b/src/js/store/reducers/counter.js
index 2a49cbc..2ac8820 100644
--- a/src/js/store/reducers/counter.js
+++ b/src/js/store/reducers/counter.js
@@ -1,16 +1,19 @@
-export default function counter(state = {
- value: 0,
-}, action) {
+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;
}
}
diff --git a/src/js/store/reducers/index.js b/src/js/store/reducers/index.js
index a6cfd29..65f62c0 100644
--- a/src/js/store/reducers/index.js
+++ b/src/js/store/reducers/index.js
@@ -1,8 +1,6 @@
-import {
- combineReducers,
-} from 'redux'
+import { combineReducers } from "redux";
-import counter from './counter';
+import counter from "./counter";
export default combineReducers({
counter,
diff --git a/src/js/test-build.js b/src/js/test-build.js
index ce32fab..a297fab 100644
--- a/src/js/test-build.js
+++ b/src/js/test-build.js
@@ -1,21 +1,21 @@
-'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') {
// mocking service worker
@@ -46,23 +46,22 @@ import './store';
}
}}*/
-
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)$/)
);
if (module.hot) {
- module.hot.accept('app.js', () => {
- console.log('Accepting the updated printMe module!');
- })
- module.hot.accept('app.scss', () => {
- console.log('Accepting the updated printMe module!');
- })
+ module.hot.accept("app.js", () => {
+ console.log("Accepting the updated printMe module!");
+ });
+ module.hot.accept("app.scss", () => {
+ console.log("Accepting the updated printMe module!");
+ });
}
diff --git a/src/js/types/sw.js b/src/js/types/sw.js
index f758cb8..e33071a 100644
--- a/src/js/types/sw.js
+++ b/src/js/types/sw.js
@@ -1,25 +1,25 @@
// 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 debug = process.env.NODE_ENV === "development" ? true : false;
var version = `${UIVERSION}-sw`;
-var log = require('../libs/log');
-var caches = require('../../../thirdparty/serviceworker-caches');
+var log = require("../libs/log");
+var caches = require("../../../thirdparty/serviceworker-caches");
if (debug) {
- log('SW: debug is on');
+ 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') {
+ if (event.request.method !== "GET") {
return;
}
@@ -34,9 +34,9 @@ self.addEventListener('fetch', (event) => {
//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;
@@ -58,7 +58,7 @@ self.addEventListener('fetch', (event) => {
event.respondWith(
// Try fetch
fetch(fetchRequest)
- // when fetch is successful, we update the cache
+ // when fetch is successful, we update the cache
.then((response) => {
// A response is a stream and can be consumed only once.
// Because we want the browser to consume the response,
@@ -78,25 +78,25 @@ self.addEventListener('fetch', (event) => {
return response;
})
- // when fetch times out or fails
+ // 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);
- }),
+ })
);
});
// Now we need to clean up resources in the previous versions
// of Service Worker scripts
-self.addEventListener('activate', (event) => {
+self.addEventListener("activate", (event) => {
log(`SW: activated: ${version}`);
// Destroy the cache
event.waitUntil(caches.delete(CACHE_NAME));
});
-self.addEventListener('install', (e) => {
+self.addEventListener("install", (e) => {
log(`SW: installing version: ${version}`);
});
diff --git a/src/js/ui/carousel.js b/src/js/ui/carousel.js
index cd93d43..8a6ffe9 100644
--- a/src/js/ui/carousel.js
+++ b/src/js/ui/carousel.js
@@ -1,8 +1,8 @@
-import Events from '../_events';
-import Carousel from 'bootstrap/js/src/carousel';
+import Events from "../_events";
+import Carousel from "bootstrap/js/src/carousel";
const CarouselUI = ((window) => {
- const NAME = 'js-carousel';
+ const NAME = "js-carousel";
const init = () => {
console.log(`${NAME}: init`);
@@ -11,53 +11,55 @@ const CarouselUI = ((window) => {
const carousel = new Carousel(el);
// 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) => {
+ 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 = 'Next ';
+ next.innerHTML =
+ 'Next ';
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) => {
+ 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 = 'Previous ';
+ prev.innerHTML =
+ 'Previous ';
el.appendChild(prev);
}
if (el.dataset.bsIndicators) {
- const indicators = document.createElement('div');
- indicators.classList.add('carousel-indicators');
- const items = el.querySelectorAll('.carousel-item');
+ 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}`);
+ 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.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) => {
+ 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');
+ carousel.to(target.getAttribute("data-bs-slide-to"));
+ indicators.querySelectorAll(".active").forEach((ind2) => {
+ ind2.classList.remove("active");
});
- target.classList.add('active');
+ target.classList.add("active");
});
indicators.appendChild(ind);
@@ -65,15 +67,18 @@ const CarouselUI = ((window) => {
}
el.appendChild(indicators);
- el.addEventListener('slide.bs.carousel', (e) => {
- el.querySelectorAll('.carousel-indicators .active').forEach((ind2) => {
- ind2.classList.remove('active');
- });
- el.querySelectorAll(`.carousel-indicators [data-bs-slide-to="${ e.to }"]`).forEach((ind2) => {
- ind2.classList.add('active');
+ el.addEventListener("slide.bs.carousel", (e) => {
+ el.querySelectorAll(".carousel-indicators .active").forEach(
+ (ind2) => {
+ ind2.classList.remove("active");
+ }
+ );
+ el.querySelectorAll(
+ `.carousel-indicators [data-bs-slide-to="${e.to}"]`
+ ).forEach((ind2) => {
+ ind2.classList.add("active");
});
});
-
}
el.classList.add(`${NAME}-active`);
});
diff --git a/src/js/ui/instagram.feed.js b/src/js/ui/instagram.feed.js
index 5e03df2..3a69322 100644
--- a/src/js/ui/instagram.feed.js
+++ b/src/js/ui/instagram.feed.js
@@ -3,31 +3,31 @@
// 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 Consts from "../_consts";
+import InstagramFeed from "@jsanahuja/instagramfeed/src/InstagramFeed";
export default ((window) => {
- const NAME = 'js-instagramfeed';
+ const NAME = "js-instagramfeed";
const BODY = document.body;
const ig_media_preview = (base64data) => {
const jpegtpl =
- '/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==',
+ "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==",
t = atob(base64data),
- p = t.slice(3).split(''),
+ p = t.slice(3).split(""),
o = t
.substring(0, 3)
- .split('')
+ .split("")
.map((e) => {
return e.charCodeAt(0);
}),
- c = atob(jpegtpl).split('');
+ 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;
+ return base64data
+ ? `data:image/jpeg;base64,${btoa(c.concat(p).join(""))}`
+ : null;
};
const loadFeed = () => {
@@ -41,41 +41,39 @@ export default ((window) => {
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`);
- const list = document.createElement('div');
- list.classList.add(`${NAME}-list`, 'row');
+ 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 = ig_media_preview(item["media_preview"]);
- list.innerHTML +=
- `` +
- `
` +
- '
';
- },
- );
+ list.innerHTML +=
+ `` +
+ `
` +
+ "
";
+ });
el.classList.remove(`${NAME}-loading`);
el.classList.add(`${NAME}-loaded`);
- window.dispatchEvent(new Event('MetaWindowindow.initLinks'));
+ window.dispatchEvent(new Event("MetaWindowindow.initLinks"));
window.dispatchEvent(new Event(`${NAME}.loaded`));
},
on_error: (e) => {
diff --git a/src/js/ui/map.api.js b/src/js/ui/map.api.js
index 1662ec1..a6baa1f 100644
--- a/src/js/ui/map.api.js
+++ b/src/js/ui/map.api.js
@@ -1,23 +1,23 @@
-'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 BODY = document.querySelector("body");
const config = el.dataset;
- config['center'] = [
- config['lng'] ? config['lng'] : BODY.dataset['default-lng'],
- config['lat'] ? config['lat'] : BODY.dataset['default-lat'],
+ config["center"] = [
+ config["lng"] ? config["lng"] : BODY.dataset["default-lng"],
+ config["lat"] ? config["lat"] : BODY.dataset["default-lat"],
];
/*config['style'] = config['style'] ?
@@ -26,8 +26,8 @@ const MapAPI = ((window) => {
config['font-family'] = $BODY.css('font-family');*/
- if (!config['icon']) {
- config['icon'] = ' ';
+ if (!config["icon"]) {
+ config["icon"] = ' ';
}
console.log(`${NAME}: init ${Drv.getName()}...`);
@@ -38,7 +38,7 @@ const MapAPI = ((window) => {
Drv.init(el, config);
el.addEventListener(Events.MAPAPILOADED, () => {
- ui.addMarkers()
+ ui.addMarkers();
});
}
@@ -63,20 +63,20 @@ const MapAPI = ((window) => {
ui.map = Drv.getMap();
- if (config['geojson']) {
+ if (config["geojson"]) {
console.log(`${NAME}: setting up geocode data`);
Drv.addGeoJson(config);
- } else if (config['address']) {
- console.log(config['address']);
+ } else if (config["address"]) {
+ console.log(config["address"]);
console.log(`${NAME}: setting up address marker`);
- Drv.geocode(config['address'], (results) => {
+ Drv.geocode(config["address"], (results) => {
console.log(results);
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}`,
+ `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
);
Drv.addMarker([lng, lat], config);
@@ -85,12 +85,12 @@ const MapAPI = ((window) => {
lng,
});
});
- } else if (config['lat'] && config['lng']) {
- const lat = config['lat'];
- const lng = config['lng'];
+ } else if (config["lat"] && config["lng"]) {
+ const lat = config["lat"];
+ const lng = config["lng"];
console.log(
- `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`,
+ `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
);
Drv.addMarker([lng, lat], config);
@@ -108,7 +108,7 @@ const MapAPI = ((window) => {
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
const map = new MapAPI(el);
});
- }
+ };
// auto-apply
window.addEventListener(`${Events.LODEDANDREADY}`, init);
diff --git a/src/js_old/_components/_ui.ajax.js b/src/js_old/_components/_ui.ajax.js
index a2e7ac6..8fe1d00 100644
--- a/src/js_old/_components/_ui.ajax.js
+++ b/src/js_old/_components/_ui.ajax.js
@@ -1,17 +1,17 @@
-'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 $Html = $("html");
+ const $Body = $("body");
- const NAME = 'jsAjaxUI';
+ const NAME = "jsAjaxUI";
const DATA_KEY = NAME;
class AjaxUI {
@@ -21,23 +21,23 @@ const AjaxUI = (($) => {
const $element = $(this._element);
$element.addClass(`${NAME}-active`);
- $element.bind('click', function (e) {
+ $element.bind("click", function (e) {
e.preventDefault();
const $this = $(this);
- $('.ajax').each(function () {
+ $(".ajax").each(function () {
const $this = $(this);
- $this.removeClass('active');
- $this.parents('.nav-item').removeClass('active');
+ $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");
});
});
}
@@ -46,14 +46,14 @@ const AjaxUI = (($) => {
static load(url, callback) {
// show spinner
Spinner.show(() => {
- $Body.removeClass('loaded');
+ $Body.removeClass("loaded");
});
// update document location
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(
{
@@ -61,7 +61,7 @@ const AjaxUI = (($) => {
page: absoluteLocation,
},
document.title,
- absoluteLocation,
+ absoluteLocation
);
}
@@ -69,41 +69,41 @@ const AjaxUI = (($) => {
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;
// 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);
// google analytics
- if (typeof G.ga === 'function') {
- G.ga('set', {
- page: G.URLDetails['relative'] + G.URLDetails['hash'],
- title: jqXHR.getResponseHeader('X-Title'),
+ if (typeof G.ga === "function") {
+ G.ga("set", {
+ page: G.URLDetails["relative"] + G.URLDetails["hash"],
+ title: jqXHR.getResponseHeader("X-Title"),
});
- G.ga('send', 'pageview');
+ 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(',') || [];
+ 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') {
+ if (typeof data.regions[key] === "string") {
AjaxUI.replaceRegion(data.regions[key], key);
}
}
@@ -111,52 +111,52 @@ const AjaxUI = (($) => {
// 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')}`);
+ } 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')}`);
+ } 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(
- ` `,
+ ` `
);
});
// preload JS
- this.preload(js, 'script').then(() => {
+ this.preload(js, "script").then(() => {
js.forEach((el) => {
$Body.append(
- ``,
+ ``
);
});
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]]);
}
}
- if (typeof callback !== 'undefined') {
+ if (typeof callback !== "undefined") {
callback();
}
@@ -165,7 +165,7 @@ const AjaxUI = (($) => {
});
}
- 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();
}
@@ -233,15 +233,15 @@ const AjaxUI = (($) => {
};
// auto-apply
- $('.ajax').ready(() => {
- $('.ajax').jsAjaxUI();
+ $(".ajax").ready(() => {
+ $(".ajax").jsAjaxUI();
});
// AJAX update browser title
- $(D).on('layoutRefresh', (e, data) => {
+ $(D).on("layoutRefresh", (e, data) => {
D.title = data.Title;
- $Html.attr('class', '');
+ $Html.attr("class", "");
if (data.ClassName) {
$Html.addClass(data.ClassName);
}
@@ -255,9 +255,9 @@ const AjaxUI = (($) => {
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')) {
+ } else if ($existingLink.length && $existingLink.hasClass("ajax")) {
console.log(`${NAME}: GOBACK (AJAX link)`);
- $existingLink.trigger('click');
+ $existingLink.trigger("click");
} else if (D.location.href !== G.location.href) {
console.log(`${NAME}: GOBACK (HTTP)`);
G.location.href = D.location;
diff --git a/src/js_old/_components/_ui.carousel.js b/src/js_old/_components/_ui.carousel.js
index e7c5c65..ae1233e 100644
--- a/src/js_old/_components/_ui.carousel.js
+++ b/src/js_old/_components/_ui.carousel.js
@@ -1,15 +1,15 @@
-'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
@@ -28,36 +28,36 @@ const CarouselUI = (($) => {
const $e = $(e),
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'),
+ const $items = $(e).find(".carousel-item"),
count = $items.length;
if (!count) {
return;
}
// create carousel-controls
- if ($e.data('indicators')) {
+ if ($e.data("indicators")) {
const $indicators = $(' ');
$indicators.append(
- ` `,
+ ` `
);
for (let i = 1; i < count; i++) {
$indicators.append(
- ` `,
+ ` `
);
}
$e.prepend($indicators);
}
// create arrows
- if ($e.data('arrows')) {
+ if ($e.data("arrows")) {
$e.prepend(
- `Previous `,
+ `Previous `
);
$e.prepend(
- `Next `,
+ `Next `
);
}
@@ -65,48 +65,48 @@ const CarouselUI = (($) => {
$e.carousel();
const $youtubeSlides = $e.find(
- 'iframe[src^="https://www.youtube.com/embed/"]',
+ 'iframe[src^="https://www.youtube.com/embed/"]'
);
- $e.on('slide.bs.carousel', () => {
+ $e.on("slide.bs.carousel", () => {
if ($youtubeSlides.length) {
$youtubeSlides.each((i, 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.find(".carousel-control-prev").on("click", (e) => {
e.preventDefault();
- $e.carousel('prev');
+ $e.carousel("prev");
});
- $e.find('.carousel-control-next').on('click', (e) => {
+ $e.find(".carousel-control-next").on("click", (e) => {
e.preventDefault();
- $e.carousel('next');
+ $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) => {
@@ -120,7 +120,7 @@ const CarouselUI = (($) => {
static dispose() {
this.each((i, e) => {
- $(e).carousel('dispose');
+ $(e).carousel("dispose");
});
}
}
diff --git a/src/js_old/_components/_ui.cookie.js b/src/js_old/_components/_ui.cookie.js
index ffb94f2..d013c4f 100644
--- a/src/js_old/_components/_ui.cookie.js
+++ b/src/js_old/_components/_ui.cookie.js
@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
-import $ from 'jquery';
+import $ from "jquery";
const CookieUI = (($) => {
const D = document;
@@ -8,16 +8,16 @@ const CookieUI = (($) => {
class CookieUI {
static get(name) {
- return D.cookie.split('; ').reduce((r, v) => {
- const parts = v.split('=');
+ 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 = '/') {
+ static set(name, value, days = 7, path = "/") {
const expires = new Date(Date.now() + days * 864e5).toUTCString();
D.cookie = `${name}=${encodeURIComponent(
- value,
+ value
)}; expires=${expires}; path=${path}`;
}
}
diff --git a/src/js_old/_components/_ui.flyout.js b/src/js_old/_components/_ui.flyout.js
index ed12f01..9a672ac 100644
--- a/src/js_old/_components/_ui.flyout.js
+++ b/src/js_old/_components/_ui.flyout.js
@@ -1,16 +1,16 @@
-'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 $Body = $("body");
- const NAME = 'FlyoutUI';
+ const NAME = "FlyoutUI";
const COOKIE = `${NAME}-hide`;
const TIMEOUT = 2000;
@@ -29,14 +29,14 @@ const FlyoutUI = (($) => {
ui.$modal.data(NAME, ui);
if ($close.length) {
- $close.on('click', () => {
+ $close.on("click", () => {
ui.hide();
});
}
const hide = CookieUI.get(COOKIE);
- if (!$close.length || !hide || hide !== 'true') {
+ if (!$close.length || !hide || hide !== "true") {
setTimeout(() => {
ui.show();
}, TIMEOUT);
@@ -52,7 +52,7 @@ const FlyoutUI = (($) => {
static hide(callback) {
const ui = this;
- CookieUI.set(COOKIE, 'true', 1);
+ CookieUI.set(COOKIE, "true", 1);
ui.$modal.removeClass(`flyout-${NAME}__active`);
}
}
diff --git a/src/js_old/_components/_ui.form.basics.js b/src/js_old/_components/_ui.form.basics.js
index 9fa54f0..5d3fcaf 100644
--- a/src/js_old/_components/_ui.form.basics.js
+++ b/src/js_old/_components/_ui.form.basics.js
@@ -1,16 +1,16 @@
-'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 NAME = "jsFormBasics";
const DATA_KEY = NAME;
- const $Html = $('html, body');
+ const $Html = $("html, body");
const W = window;
const D = document;
@@ -37,8 +37,8 @@ const FormBasics = (($) => {
$fields.each((e, 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");
}
});
@@ -46,50 +46,50 @@ const FormBasics = (($) => {
$radioOptions.each((e, 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) => {
+ $radioOptions.on("change", (e) => {
const $el = $(e.currentTarget);
- const $parent = $el.parents('.radio');
+ const $parent = $el.parents(".radio");
- $parent.siblings('.radio').each((i, el) => {
+ $parent.siblings(".radio").each((i, el) => {
const $el = $(el);
- 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) {
+ if (!$el.find(".error").length) {
SpinnerUI.show();
}
}, 100);
});
- $('.field.password .show-password').on('click', (e) => {
+ $(".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 $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");
}
});
@@ -131,7 +131,7 @@ const FormBasics = (($) => {
};
const init = () => {
- $('form').jsFormBasics();
+ $("form").jsFormBasics();
};
// auto-apply
diff --git a/src/js_old/_components/_ui.form.croppie.js b/src/js_old/_components/_ui.form.croppie.js
index b8deee2..928c09f 100644
--- a/src/js_old/_components/_ui.form.croppie.js
+++ b/src/js_old/_components/_ui.form.croppie.js
@@ -1,15 +1,15 @@
-'use strict';
+"use strict";
-import $ from 'jquery';
+import $ from "jquery";
-import Events from '../_events';
-import SpinnerUI from './_ui.spinner';
+import Events from "../_events";
+import SpinnerUI from "./_ui.spinner";
-import 'croppie/croppie.js';
-import 'exif-js/exif.js';
+import "croppie/croppie.js";
+import "exif-js/exif.js";
const CroppieUI = (($) => {
- const NAME = 'jsCroppieUI';
+ const NAME = "jsCroppieUI";
const DATA_KEY = NAME;
const G = window;
@@ -18,7 +18,7 @@ const CroppieUI = (($) => {
const jqteOptions = {
color: false,
fsize: false,
- funit: 'em',
+ funit: "em",
format: false,
rule: false,
source: false,
@@ -39,17 +39,17 @@ const CroppieUI = (($) => {
ui.input = $el.find('input[type="file"]');
//ui.inputData = $(' ');
- 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(
'',
+ ' Remove '
);
//$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);
ui.uploadCrop.croppie({
@@ -63,24 +63,24 @@ const CroppieUI = (($) => {
ui.uploadCrop.hide();
- ui.input.on('change', (e) => {
+ ui.input.on("change", (e) => {
this.readFile(e.currentTarget);
});
- ui.$btnRemove = $el.find('.btn-remove');
- ui.$btnRemove.on('click', (e) => {
+ 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"]').val("");
ui.$el.find('input[type="file"]').change();
ui.uploadCropWrap.hide();
});
- if (ui.$el.find('img.croppie-image').length) {
+ if (ui.$el.find("img.croppie-image").length) {
ui.$btnRemove.show();
}
}
@@ -88,14 +88,14 @@ const CroppieUI = (($) => {
readFile(input) {
const ui = this;
const $el = ui.$el;
- const $form = $el.closest('form');
+ const $form = $el.closest("form");
if (input.files && input.files[0]) {
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,
});
@@ -106,56 +106,56 @@ const CroppieUI = (($) => {
reader.readAsDataURL(input.files[0]);
- $form.off('submit');
- $form.on('submit', (e) => {
+ $form.off("submit");
+ $form.on("submit", (e) => {
console.log(`${NAME}: Processing submission ...`);
e.preventDefault();
- if ($form.data('locked')) {
- console.warn(`${NAME}: Form#${$form.attr('id')} is locked.`);
+ 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();
- if (!ui.uploadCrop.hasClass('ready')) {
+ 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 name = $(input).attr("name");
- data.delete('BackURL');
+ data.delete("BackURL");
data.delete(name);
data.append(name, blob, `${name}-image.png`);
- data.append('ajax', '1');
+ data.append("ajax", "1");
- if (!$(form).data('jsFormValidate').validate()) {
+ if (!$(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 = {};
@@ -167,39 +167,39 @@ const CroppieUI = (($) => {
}
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") {
+ MainUI.alert(json["message"], json["status"]);
- 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'];
+ G.location = json["link"];
}, 2000);
} else {
console.warn(
- `${NAME}: Finished submission > JSON no redirect link.`,
+ `${NAME}: Finished submission > JSON no redirect link.`
);
}
- } else if (json['status'] === 'error') {
- MainUI.alert(json['message'], json['status']);
+ } 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.`,
+ `${NAME}: Finished submission > JSON. Got new form response.`
);
- $(form).replaceWith(json['form']);
+ $(form).replaceWith(json["form"]);
$(G).trigger(Events.AJAX);
}
} else {
console.log(
- `${NAME}: Finished submission > DATA response.`,
+ `${NAME}: Finished submission > DATA response.`
);
$(form).replaceWith(data);
@@ -216,7 +216,7 @@ const CroppieUI = (($) => {
});
} else {
console.log(
- `${NAME}: Sorry - your browser doesn't support the FileReader API.`,
+ `${NAME}: Sorry - your browser doesn't support the FileReader API.`
);
}
}
@@ -249,7 +249,7 @@ const CroppieUI = (($) => {
// auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
- $('.field.croppie').jsCroppieUI();
+ $(".field.croppie").jsCroppieUI();
});
return CroppieUI;
diff --git a/src/js_old/_components/_ui.form.datetime.js b/src/js_old/_components/_ui.form.datetime.js
index ae27ddd..d9da190 100644
--- a/src/js_old/_components/_ui.form.datetime.js
+++ b/src/js_old/_components/_ui.form.datetime.js
@@ -1,19 +1,19 @@
-'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 $Body = $("body");
- const NAME = 'jsDatetimeUI';
+ const NAME = "jsDatetimeUI";
const DATA_KEY = NAME;
const datepickerOptions = {
@@ -34,56 +34,56 @@ const DatetimeUI = (($) => {
ui._el = el;
// datepicker
- if ($el.hasClass('date') || $el.attr('type') === 'date') {
+ if ($el.hasClass("date") || $el.attr("type") === "date") {
const defaultDate =
- $el.attr('name').toLowerCase().indexOf('end') !== -1 ? '+4d' : '+3d';
+ $el.attr("name").toLowerCase().indexOf("end") !== -1 ? "+4d" : "+3d";
- $el.attr('readonly', 'true');
+ $el.attr("readonly", "true");
$el.datepicker(
$.extend(
datepickerOptions,
{
defaultViewDate: defaultDate,
- multidate: $el.data('multidate'),
+ multidate: $el.data("multidate"),
},
- $el.data(),
- ),
+ $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(),
- ),
+ $el.data()
+ )
)
- .on('show.timepicker', (e) => {
+ .on("show.timepicker", (e) => {
const $el = $(e.currentTarget);
- const $dropdown = $Body.find('.bootstrap-timepicker-widget');
+ const $dropdown = $Body.find(".bootstrap-timepicker-widget");
if (!$dropdown.find('[data-action="clear"]').length) {
$dropdown
- .find('tbody')
+ .find("tbody")
.append(
- '
Clear ',
+ '
Clear '
);
}
const $clearBtn = $dropdown.find('[data-action="clear"]');
- $clearBtn.on('click', (e) => {
+ $clearBtn.on("click", (e) => {
e.preventDefault();
- $el.timepicker('clear');
- $el.timepicker('hideWidget');
+ $el.timepicker("clear");
+ $el.timepicker("hideWidget");
});
});
}
@@ -118,7 +118,7 @@ const DatetimeUI = (($) => {
// auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
$(
- 'input.date, input.time,input[type="date"], input[type="time"]',
+ 'input.date, input.time,input[type="date"], input[type="time"]'
).jsDatetimeUI();
});
diff --git a/src/js_old/_components/_ui.form.fields.js b/src/js_old/_components/_ui.form.fields.js
index 3bc88ba..aa0ff4b 100644
--- a/src/js_old/_components/_ui.form.fields.js
+++ b/src/js_old/_components/_ui.form.fields.js
@@ -1,13 +1,13 @@
-'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 NAME = "jsFormFieldUI";
const DATA_KEY = NAME;
- const $Html = $('html, body');
+ const $Html = $("html, body");
class FormFieldUI {
constructor(el) {
@@ -21,23 +21,23 @@ const FormFieldUI = (($) => {
ui.vals = {
val: ui.$el.val(),
- checked: ui.$el.is(':checked'),
+ checked: ui.$el.is(":checked"),
};
// bootstrap collapse integration
- ui.$el.parents('.optionset').not('.field').removeClass('collapse');
+ ui.$el.parents(".optionset").not(".field").removeClass("collapse");
ui.$collapse = ui.$el
- .parents('.field.collapse')
- .not('.composite')
+ .parents(".field.collapse")
+ .not(".composite")
.first();
if (ui.$collapse.length) {
- ui.$el.removeClass('collapse');
+ ui.$el.removeClass("collapse");
- ui.$collapse.on('show.bs.collapse', (e) => {
+ ui.$collapse.on("show.bs.collapse", (e) => {
ui.show();
});
- ui.$collapse.on('hidden.bs.collapse', (e) => {
+ ui.$collapse.on("hidden.bs.collapse", (e) => {
ui.hide();
});
}
@@ -98,29 +98,29 @@ const FormFieldUI = (($) => {
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'];
+ 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');
+ const $field = ui.$el.closest(".field");
- $field.addClass('has-message');
+ $field.addClass("has-message");
if (msg) {
$field.append(`
${msg}
`);
}
@@ -134,10 +134,10 @@ const FormFieldUI = (($) => {
removeMessages() {
const ui = this;
- const $field = ui.$el.closest('.field');
+ const $field = ui.$el.closest(".field");
- $field.removeClass('has-message');
- $field.find('.message').remove();
+ $field.removeClass("has-message");
+ $field.find(".message").remove();
}
static _jQueryInterface() {
diff --git a/src/js_old/_components/_ui.form.fields.toggle.js b/src/js_old/_components/_ui.form.fields.toggle.js
index f7e3af5..066e8ca 100644
--- a/src/js_old/_components/_ui.form.fields.toggle.js
+++ b/src/js_old/_components/_ui.form.fields.toggle.js
@@ -1,17 +1,17 @@
-'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 NAME = "jsFormToggleUI";
const DATA_KEY = NAME;
const W = window;
- const $Html = $('html, body');
- const FieldUI = 'jsFormFieldUI';
+ const $Html = $("html, body");
+ const FieldUI = "jsFormFieldUI";
class FormToggleUI {
constructor($el) {
@@ -40,31 +40,31 @@ const FormToggleUI = (($) => {
const $el = ui.$el;
return $el.is('[type="radio"],[type="checkbox"]') &&
- $el.parents('.optionset,.checkboxset').length
- ? $el.parents('.optionset,.checkboxset')
+ $el.parents(".optionset,.checkboxset").length
+ ? $el.parents(".optionset,.checkboxset")
: $el;
}
getCondition() {
const ui = this;
- return ui.getDataEl().data('value-toggle');
+ return ui.getDataEl().data("value-toggle");
}
getCurrentVal() {
const ui = this;
const $el = ui.$el;
- if ($el.attr('type') === 'checkbox') {
- if ($el.parents('.checkboxset').length && $el.is(':checked')) {
+ 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") ? true : false;
}
- 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();
@@ -75,9 +75,9 @@ const FormToggleUI = (($) => {
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);
@@ -88,9 +88,9 @@ const FormToggleUI = (($) => {
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);
@@ -115,7 +115,7 @@ const FormToggleUI = (($) => {
// yes/no toggler
const yesNoVal =
- (condition === true && val && val !== '' && val !== '0') ||
+ (condition === true && val && val !== "" && val !== "0") ||
condition === val
? true
: false;
@@ -124,7 +124,7 @@ const FormToggleUI = (($) => {
const $noTarget = ui.getFalseTarget();
const elUI = $el.data(FieldUI);
- if ((elUI && !elUI.shown) || typeof val === 'undefined') {
+ if ((elUI && !elUI.shown) || typeof val === "undefined") {
ui.toggleElement($yesTarget, false);
ui.toggleElement($noTarget, false);
@@ -146,9 +146,9 @@ const FormToggleUI = (($) => {
}
const ui = this;
- const action = show ? 'show' : 'hide';
+ const action = show ? "show" : "hide";
- $el.filter('div.collapse').each((i, el) => {
+ $el.filter("div.collapse").each((i, el) => {
const $el = $(el);
$el.collapse(action);
@@ -182,11 +182,11 @@ const FormToggleUI = (($) => {
static validate() {
return $(Events.FORM_FIELDS).each((i, el) => {
const $el = $(el);
- const name = $el.attr('name');
+ const name = $el.attr("name");
if ($(`[name="${name}"]`).length > 1) {
console.warn(
- `${NAME}: Module malfunction duplicate "${name}" elements found`,
+ `${NAME}: Module malfunction duplicate "${name}" elements found`
);
}
});
@@ -204,9 +204,9 @@ const FormToggleUI = (($) => {
// auto-apply
$(W).on(`${Events.LODEDANDREADY}`, () => {
//FormToggleUI.validate();
- $(Events.FORM_FIELDS).filter('[data-value-toggle]').jsFormToggleUI();
+ $(Events.FORM_FIELDS).filter("[data-value-toggle]").jsFormToggleUI();
- $('[data-value-toggle]')
+ $("[data-value-toggle]")
.not(Events.FORM_FIELDS)
.find(Events.FORM_FIELDS)
.jsFormToggleUI();
diff --git a/src/js_old/_components/_ui.form.jqte.js b/src/js_old/_components/_ui.form.jqte.js
index 0b93bbf..c867618 100644
--- a/src/js_old/_components/_ui.form.jqte.js
+++ b/src/js_old/_components/_ui.form.jqte.js
@@ -1,22 +1,22 @@
-'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 NAME = "jsJqteUI";
const DATA_KEY = NAME;
const jqteOptions = {
color: false,
fsize: false,
- funit: 'em',
+ funit: "em",
format: false,
rule: false,
source: false,
@@ -30,7 +30,7 @@ const JqteUI = (($) => {
const ui = this;
const $element = $(element);
- const validationUI = $element.data('jsFormValidateField');
+ const validationUI = $element.data("jsFormValidateField");
ui._element = element;
$element.data(DATA_KEY, this);
@@ -39,9 +39,9 @@ const JqteUI = (($) => {
// dynamic error control
if (validationUI) {
$element
- .parents('.jqte')
- .find('.jqte_editor')
- .on('change', (e) => {
+ .parents(".jqte")
+ .find(".jqte_editor")
+ .on("change", (e) => {
validationUI.validate();
});
}
@@ -75,7 +75,7 @@ const JqteUI = (($) => {
// auto-apply
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
- $('textarea.jqte-field').jsJqteUI();
+ $("textarea.jqte-field").jsJqteUI();
});
return JqteUI;
diff --git a/src/js_old/_components/_ui.form.select2.js b/src/js_old/_components/_ui.form.select2.js
index 7817917..98e8119 100644
--- a/src/js_old/_components/_ui.form.select2.js
+++ b/src/js_old/_components/_ui.form.select2.js
@@ -1,15 +1,15 @@
-'use strict';
+"use strict";
-import $ from 'jquery';
+import $ from "jquery";
-import select2 from 'select2/dist/js/select2.js';
-import Events from '../_events';
+import select2 from "select2/dist/js/select2.js";
+import Events from "../_events";
const FormSelect2 = (($) => {
// Constants
- const NAME = 'jsFormSelect2';
+ const NAME = "jsFormSelect2";
const DATA_KEY = NAME;
- const $Html = $('html, body');
+ const $Html = $("html, body");
const W = window;
const D = document;
@@ -27,8 +27,8 @@ const FormSelect2 = (($) => {
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();
@@ -46,12 +46,12 @@ const FormSelect2 = (($) => {
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');
+ if ($el.hasClass("select2-hidden-accessible")) {
+ $el.select2("destroy");
}
});
@@ -83,7 +83,7 @@ const FormSelect2 = (($) => {
};
const init = () => {
- $('form').jsFormSelect2();
+ $("form").jsFormSelect2();
};
// auto-apply
diff --git a/src/js_old/_components/_ui.form.stepped.js b/src/js_old/_components/_ui.form.stepped.js
index bc8cf80..eec5a6e 100644
--- a/src/js_old/_components/_ui.form.stepped.js
+++ b/src/js_old/_components/_ui.form.stepped.js
@@ -1,15 +1,15 @@
-'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 NAME = "jsSteppedForm";
const DATA_KEY = NAME;
class SteppedForm {
@@ -21,35 +21,35 @@ const SteppedForm = (($) => {
$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);
- 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._totalSteps = ui._steps.last().data("step") || ui._steps.length;
ui._stepsOrder = [];
ui._totalStepsCounter.text(ui._totalSteps);
@@ -57,39 +57,39 @@ const SteppedForm = (($) => {
// 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();
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._stepNext.on('click', (e) => {
+ ui._stepNext.on("click", (e) => {
e.preventDefault();
ui.next();
});
- ui._stepPrev.on('click', (e) => {
+ ui._stepPrev.on("click", (e) => {
e.preventDefault();
ui.prev();
});
- $element.find('.step-toggle').on('click', (e) => {
+ $element.find(".step-toggle").on("click", (e) => {
const $el = $(e.currentTarget);
e.preventDefault();
- ui.step($el.data('target'));
+ ui.step($el.data("target"));
});
$element.addClass(`${NAME}-active`);
@@ -131,17 +131,17 @@ const SteppedForm = (($) => {
const ui = this;
const $element = $(ui._element);
const $target = $element.find(target);
- const targetStep = parseInt($target.data('step'));
+ const targetStep = parseInt($target.data("step"));
// validate current step
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 fieldUI = $el.data("jsFormValidateField");
if (fieldUI && !fieldUI.validate()) {
valid = false;
@@ -154,14 +154,14 @@ const SteppedForm = (($) => {
}
//
- if (parseInt($target.data('step')) <= '1') {
+ if (parseInt($target.data("step")) <= "1") {
ui._stepPrev.hide();
$element.trigger(Events.FORM_STEPPED_FIRST_STEP);
} else {
ui._stepPrev.show();
}
- if (parseInt($target.data('step')) >= ui._totalSteps) {
+ if (parseInt($target.data("step")) >= ui._totalSteps) {
ui._stepNext.hide();
ui._actions.show();
@@ -174,8 +174,8 @@ const SteppedForm = (($) => {
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);
@@ -187,7 +187,7 @@ const SteppedForm = (($) => {
const ui = this;
const $element = $(ui._element);
- return $element.find('.step.active');
+ return $element.find(".step.active");
}
static _jQueryInterface() {
@@ -214,7 +214,7 @@ const SteppedForm = (($) => {
// auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
- $('.form-stepped').jsSteppedForm();
+ $(".form-stepped").jsSteppedForm();
});
return SteppedForm;
diff --git a/src/js_old/_components/_ui.form.storage.js b/src/js_old/_components/_ui.form.storage.js
index a7d1289..ffa53f8 100644
--- a/src/js_old/_components/_ui.form.storage.js
+++ b/src/js_old/_components/_ui.form.storage.js
@@ -1,11 +1,11 @@
-'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 NAME = "jsFormStorage";
const DATA_KEY = NAME;
const STORAGE = window.localStorage;
@@ -15,11 +15,11 @@ const FormStorage = (($) => {
const ui = this;
const $element = $(element);
- const $elements = $element.find('input, textarea, select');
+ const $elements = $element.find("input, textarea, select");
const setRangeValues = function (el) {
const $el = $(el);
- $el.siblings('.value').text($el.val());
+ $el.siblings(".value").text($el.val());
};
ui._element = element;
@@ -30,17 +30,17 @@ const FormStorage = (($) => {
// restore form data from localStorage
$elements.each((i, el) => {
const $el = $(el);
- const id = $el.attr('id');
- const type = $el.attr('type');
+ const id = $el.attr("id");
+ const type = $el.attr("type");
const val = STORAGE.getItem(NAME + id);
- if (type === 'file') {
+ 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);
}
@@ -56,40 +56,40 @@ const FormStorage = (($) => {
$element.trigger(Events.RESTORE_FIELD);
- $('input[type="range"]').on('change', (e) => {
+ $('input[type="range"]').on("change", (e) => {
setRangeValues(e.currentTarget);
});
// store form data into localStorage
- $elements.on('change', (e) => {
+ $elements.on("change", (e) => {
const $el = $(e.currentTarget);
- const id = $el.attr('id');
- const type = $el.attr('type');
+ const id = $el.attr("id");
+ const type = $el.attr("type");
// skip some elements
- if ($el.hasClass('no-storage')) {
+ if ($el.hasClass("no-storage")) {
return true;
}
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') {
+ if (id && type && type !== "password") {
STORAGE.setItem(NAME + id, val);
}
});
- $element.on('submit', () => {
+ $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', () => {
+ .on("click", () => {
$element.data(DATA_KEY).clear();
});
@@ -111,7 +111,7 @@ const FormStorage = (($) => {
}
static _jQueryInterface() {
- if (typeof window.localStorage !== 'undefined') {
+ if (typeof window.localStorage !== "undefined") {
return this.each(function () {
// attach functionality to element
const $element = $(this);
@@ -136,11 +136,11 @@ const FormStorage = (($) => {
// auto-apply
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
- $('form').each((i, el) => {
+ $("form").each((i, el) => {
const $el = $(el);
// skip some forms
- if ($el.hasClass('no-storage')) {
+ if ($el.hasClass("no-storage")) {
return true;
}
diff --git a/src/js_old/_components/_ui.form.validate.field.js b/src/js_old/_components/_ui.form.validate.field.js
index 5f85989..0db1c53 100644
--- a/src/js_old/_components/_ui.form.validate.field.js
+++ b/src/js_old/_components/_ui.form.validate.field.js
@@ -1,15 +1,15 @@
-'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 NAME = "jsFormValidateField";
const DATA_KEY = NAME;
- const $Body = $('body');
+ const $Body = $("body");
- const FieldUI = 'jsFormFieldUI';
+ const FieldUI = "jsFormFieldUI";
class FormValidateField {
constructor(el) {
@@ -18,13 +18,13 @@ const FormValidateField = (($) => {
ui.$el = $el;
- ui._actions = $el.parents('form').children('.btn-toolbar,.form-actions');
+ ui._actions = $el.parents("form").children(".btn-toolbar,.form-actions");
$el.data(DATA_KEY, this);
// prevent browsers checks (will do it using JS)
- $el.attr('novalidate', 'novalidate');
+ $el.attr("novalidate", "novalidate");
- $el.on('change focusout', (e) => {
+ $el.on("change focusout", (e) => {
ui.validate(false);
});
@@ -45,7 +45,7 @@ const FormValidateField = (($) => {
const ui = this;
const $el = ui.$el;
- const $field = $el.closest('.field');
+ const $field = $el.closest(".field");
const extraChecks = $el.data(`${NAME}-extra`);
let valid = true;
let msg = null;
@@ -56,58 +56,58 @@ const FormValidateField = (($) => {
if (!ui.$el[0].checkValidity()) {
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');
+ 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')}`);
+ 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;
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;
msg = `The value is limited to ${maxLength} chars`;
- console.warn(`${NAME}: Too long value #${$el.attr('id')}`);
+ console.warn(`${NAME}: Too long value #${$el.attr("id")}`);
}
}
// minlength
- const minLength = $el.attr('minlength');
+ const minLength = $el.attr("minlength");
if (unmaskedVal.length && minLength && minLength.length) {
if (unmaskedVal.length < minLength) {
valid = false;
msg = `The value should contain more than ${minLength} chars`;
- console.warn(`${NAME}: Too short value #${$el.attr('id')}`);
+ console.warn(`${NAME}: Too short value #${$el.attr("id")}`);
}
}
@@ -120,7 +120,7 @@ const FormValidateField = (($) => {
valid = valid && result;
if (!result) {
console.log(check);
- console.warn(`${NAME}: Extra check is failed #${$el.attr('id')}`);
+ console.warn(`${NAME}: Extra check is failed #${$el.attr("id")}`);
}
});
}
@@ -135,9 +135,9 @@ const FormValidateField = (($) => {
}
isHtml(str) {
- const doc = new DOMParser().parseFromString(str, 'text/html');
+ const doc = new DOMParser().parseFromString(str, "text/html");
return Array.from(doc.body.childNodes).some(
- (node) => node.nodeType === 1,
+ (node) => node.nodeType === 1
);
}
@@ -150,24 +150,24 @@ const FormValidateField = (($) => {
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);
- 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 rowCorrection = parseInt($field.css('font-size')) * 4;
+ 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);
@@ -178,13 +178,13 @@ const FormValidateField = (($) => {
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() {
diff --git a/src/js_old/_components/_ui.form.validate.js b/src/js_old/_components/_ui.form.validate.js
index 871a46e..03b6ac0 100644
--- a/src/js_old/_components/_ui.form.validate.js
+++ b/src/js_old/_components/_ui.form.validate.js
@@ -1,40 +1,40 @@
-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 NAME = "jsFormValidate";
const DATA_KEY = NAME;
- const $Html = $('html, body');
+ const $Html = $("html, body");
class FormValidate {
constructor(element) {
const ui = this;
const $element = $(element);
- const $fields = $element.find('input,textarea,select');
+ const $fields = $element.find("input,textarea,select");
ui._element = element;
ui.$element = $element;
$element.data(DATA_KEY, this);
ui._fields = $fields;
- ui._stepped_form = $element.data('jsSteppedForm');
+ 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') {
+ if ($(el).attr("role") === "combobox") {
return;
}
@@ -42,16 +42,16 @@ const FormValidate = (($) => {
});
// check form
- $element.on('submit', (e) => {
+ $element.on("submit", (e) => {
ui.validate(true, () => {
e.preventDefault();
// switch to step
if (ui._stepped_form) {
- const $el = $element.find('.error').first();
+ const $el = $element.find(".error").first();
if ($el.length) {
- ui._stepped_form.step($el.parents('.step'));
+ ui._stepped_form.step($el.parents(".step"));
}
}
@@ -78,14 +78,14 @@ const FormValidate = (($) => {
const ui = this;
let valid = true;
- ui._fields.filter(':visible').each((i, el) => {
+ ui._fields.filter(":visible").each((i, el) => {
const $el = $(el);
- const fieldUI = $el.data('jsFormValidateField');
+ const fieldUI = $el.data("jsFormValidateField");
if (fieldUI && !fieldUI.validate()) {
SpinnerUI.hide();
- ui.$element.addClass('error');
+ ui.$element.addClass("error");
if (badCallback) {
badCallback();
@@ -123,11 +123,11 @@ const FormValidate = (($) => {
// auto-apply
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
- $('form').each((i, el) => {
+ $("form").each((i, el) => {
const $el = $(el);
// skip some forms
- if ($el.hasClass('no-validation')) {
+ if ($el.hasClass("no-validation")) {
return true;
}
diff --git a/src/js_old/_components/_ui.header-footer.js b/src/js_old/_components/_ui.header-footer.js
index 721b150..66f5be8 100644
--- a/src/js_old/_components/_ui.header-footer.js
+++ b/src/js_old/_components/_ui.header-footer.js
@@ -1,13 +1,13 @@
-'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 $Body = $("html,body");
+ const NAME = "HeaderUI";
const CLASSNAME = `js${NAME}`;
class HeaderUI {
@@ -22,9 +22,9 @@ const HeaderUI = (($) => {
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");
}
};
@@ -33,23 +33,23 @@ const HeaderUI = (($) => {
const updateFooter = (i, el) => {
const $el = $(el);
const footerHeight = $el.height();
- $el.css('height', footerHeight);
+ $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);
+ $(".footer,.jsFooterUI").each(updateFooter);
}, 500);
}
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", "");
}
}
diff --git a/src/js_old/_components/_ui.hover.js b/src/js_old/_components/_ui.hover.js
index a1f8539..ac33d7d 100644
--- a/src/js_old/_components/_ui.hover.js
+++ b/src/js_old/_components/_ui.hover.js
@@ -1,21 +1,21 @@
/*
* 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 $Html = $("html");
+ const $Body = $("body");
- const NAME = 'jsHoverUI';
+ const NAME = "jsHoverUI";
const DATA_KEY = NAME;
class HoverUI {
@@ -28,7 +28,7 @@ const HoverUI = (($) => {
if (
$el.is(
- '[target="_blank"],.external,[data-toggle="lightbox"],[data-lightbox-gallery]',
+ '[target="_blank"],.external,[data-toggle="lightbox"],[data-lightbox-gallery]'
)
) {
return true;
@@ -37,18 +37,18 @@ const HoverUI = (($) => {
ui.$el = $el;
// find parent
- let $parent = $el.parents('.nav-item, .dropdown');
+ let $parent = $el.parents(".nav-item, .dropdown");
$parent = $parent && $parent.length ? $parent.first() : null;
//$parent = $parent ? $parent : $el.parent();
ui.$parent = $parent;
// find target
- let $target = $el.data('target');
+ let $target = $el.data("target");
$target = $target && $target.length ? $target : null;
$target = $target
? $target
: $parent
- ? $parent.find('.dropdown-menu').first()
+ ? $parent.find(".dropdown-menu").first()
: null;
if (!$target || !$target.length) {
@@ -63,7 +63,7 @@ const HoverUI = (($) => {
ui.$triger = $triger;
// integrate with dropdown-toggle
- $('[data-toggle="dropdown"]').on('click touch', (e) => {
+ $('[data-toggle="dropdown"]').on("click touch", (e) => {
console.log(`${NAME}: dropdown click-touch`);
ui.hide();
});
@@ -81,15 +81,15 @@ const HoverUI = (($) => {
});
}
- $el.off('click touch');
- $el.on('click touch', (e) => {
+ $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();
@@ -108,29 +108,29 @@ const HoverUI = (($) => {
}
isShown() {
- return this.$target.hasClass('show');
+ return this.$target.hasClass("show");
}
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');
+ $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');
+ $el.removeClass("show");
+ $el.find(".dropdown-menu").removeClass("show");
+ $el.parent(".dropdown").removeClass("show");
}
dispose() {
@@ -176,21 +176,21 @@ const HoverUI = (($) => {
});
// rewrite 'bootstrap/js/dist/dropdown'
- $('[data-toggle="dropdown"]').on('click touch', (e) => {
+ $('[data-toggle="dropdown"]').on("click touch", (e) => {
e.preventDefault();
const $el = $(e.currentTarget);
- const $parent = $el.parent('.dropdown');
+ 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");
}
});
diff --git a/src/js_old/_components/_ui.image-position.js b/src/js_old/_components/_ui.image-position.js
index 4c534b7..781023f 100644
--- a/src/js_old/_components/_ui.image-position.js
+++ b/src/js_old/_components/_ui.image-position.js
@@ -1,14 +1,14 @@
-'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 $Body = $("html,body");
+ const NAME = "ImagePositionUI";
const CLASSNAME = `js${NAME}`;
class ImagePositionUI {
@@ -21,7 +21,7 @@ const ImagePositionUI = (($) => {
}
console.log(`${NAME}: init`);
- $(`.${CLASSNAME}`).on('click', (e) => {
+ $(`.${CLASSNAME}`).on("click", (e) => {
e.preventDefault();
console.log(e);
});
diff --git a/src/js_old/_components/_ui.instagramfeed.js b/src/js_old/_components/_ui.instagramfeed.js
index 7fb49f6..6fb7ae0 100644
--- a/src/js_old/_components/_ui.instagramfeed.js
+++ b/src/js_old/_components/_ui.instagramfeed.js
@@ -1,13 +1,13 @@
-'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 NAME = "jsInstagramFeed";
const DATA_KEY = NAME;
const W = window;
const D = document;
@@ -23,15 +23,15 @@ const InstagramFeed = (($) => {
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`);
@@ -39,27 +39,23 @@ const InstagramFeed = (($) => {
$el.append(`
`);
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(
- `
` +
- `
` +
- '
',
- );
- },
- );
+ $list.append(
+ `
` +
+ `
` +
+ "
"
+ );
+ });
- $(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}`);
@@ -71,20 +67,20 @@ const InstagramFeed = (($) => {
ig_media_preview(base64data) {
var jpegtpl =
- '/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==',
+ "/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsaGikdKUEmJkFCLy8vQkc/Pj4/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0cBHSkpNCY0PygoP0c/NT9HR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR//AABEIABQAKgMBIgACEQEDEQH/xAGiAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgsQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+gEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoLEQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AA==",
t = atob(base64data),
- p = t.slice(3).split(''),
+ p = t.slice(3).split(""),
o = t
.substring(0, 3)
- .split('')
+ .split("")
.map((e) => {
return e.charCodeAt(0);
}),
- c = atob(jpegtpl).split('');
+ 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(''))}`
+ ? `data:image/jpeg;base64,${btoa(c.concat(p).join(""))}`
: null;
}
diff --git a/src/js_old/_components/_ui.map.api.js b/src/js_old/_components/_ui.map.api.js
index d591415..6d2b675 100644
--- a/src/js_old/_components/_ui.map.api.js
+++ b/src/js_old/_components/_ui.map.api.js
@@ -1,19 +1,19 @@
-'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 NAME = "jsMapAPI";
const DATA_KEY = NAME;
- const $BODY = $('body');
+ const $BODY = $("body");
- const MAP_DRIVER = CONSTS['MAP_DRIVER'];
+ const MAP_DRIVER = CONSTS["MAP_DRIVER"];
const W = window;
class MapAPI {
@@ -27,19 +27,19 @@ const MapAPI = (($) => {
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'])
+ 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'] = '
';
+ if (!config["icon"]) {
+ config["icon"] = '
';
}
console.log(`${NAME}: init ${Drv.getName()}...`);
@@ -49,31 +49,31 @@ const MapAPI = (($) => {
$el.on(Events.MAPAPILOADED, (e) => {
ui.map = Drv.getMap();
- if (config['geojson']) {
+ if (config["geojson"]) {
console.log(`${NAME}: setting up geocode data`);
Drv.addGeoJson(config);
- } else if (config['address']) {
- console.log(config['address']);
+ } else if (config["address"]) {
+ console.log(config["address"]);
console.log(`${NAME}: setting up address marker`);
- Drv.geocode(config['address'], (results) => {
+ Drv.geocode(config["address"], (results) => {
console.log(results);
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}`,
+ `${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'];
+ } 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}`,
+ `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`
);
Drv.addMarker([lng, lat], config);
@@ -102,7 +102,7 @@ const MapAPI = (($) => {
}
static _jQueryInterface() {
- if (typeof W.localStorage !== 'undefined') {
+ if (typeof W.localStorage !== "undefined") {
return this.each(() => {
// attach functionality to el
const $el = $(this);
@@ -127,7 +127,7 @@ const MapAPI = (($) => {
// auto-apply
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
- $('.mapAPI-map-container').jsMapAPI();
+ $(".mapAPI-map-container").jsMapAPI();
});
return MapAPI;
diff --git a/src/js_old/_components/_ui.menu.js b/src/js_old/_components/_ui.menu.js
index 77b9907..8bff0df 100644
--- a/src/js_old/_components/_ui.menu.js
+++ b/src/js_old/_components/_ui.menu.js
@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
-import $ from 'jquery';
+import $ from "jquery";
const SlidingMenu = (($) => {
// Constants
- const NAME = 'jsSlidingMenu';
+ const NAME = "jsSlidingMenu";
const DATA_KEY = NAME;
class SlidingMenu {
@@ -16,7 +16,7 @@ const SlidingMenu = (($) => {
$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();
}
diff --git a/src/js_old/_components/_ui.multislider.js b/src/js_old/_components/_ui.multislider.js
index 6277bbc..e3ccb34 100644
--- a/src/js_old/_components/_ui.multislider.js
+++ b/src/js_old/_components/_ui.multislider.js
@@ -1,21 +1,21 @@
-'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 MultiSlider = (($) => {
// Constants
- const NAME = 'jsMultiSlider';
+ const NAME = "jsMultiSlider";
const DATA_KEY = NAME;
- const $BODY = $('body');
+ const $BODY = $("body");
class MultiSlider {
// Constructor
@@ -38,10 +38,10 @@ const MultiSlider = (($) => {
ui.addControls();
ui.calculate();
- $(W).on('resize', () => {
+ $(W).on("resize", () => {
ui.$elContainer
- .find('.act-slider-prev,.act-slider-next')
- .removeClass('disabled');
+ .find(".act-slider-prev,.act-slider-next")
+ .removeClass("disabled");
ui.calculate();
});
@@ -52,15 +52,15 @@ const MultiSlider = (($) => {
calculate() {
const ui = this;
- ui.$slides = ui.$el.find('.slide');
+ 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.$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);
@@ -72,7 +72,7 @@ const MultiSlider = (($) => {
const size = MainUI.detectBootstrapScreenSize();
let num = ui.$el.data(`length-${size}`);
- num = num ? num : ui.$el.data('length');
+ num = num ? num : ui.$el.data("length");
console.log(`${NAME}: size ${size} | num ${num}`);
@@ -88,26 +88,26 @@ const MultiSlider = (($) => {
'
',
+ "
"
);
- 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) => {
+ ui.$prevBtn.on("click", (e) => {
e.preventDefault();
- if ($(e.currentTarget).hasClass('disabled')) {
+ if ($(e.currentTarget).hasClass("disabled")) {
return false;
}
ui.prev();
});
- ui.$nextBtn.on('click', (e) => {
+ ui.$nextBtn.on("click", (e) => {
e.preventDefault();
- if ($(e.currentTarget).hasClass('disabled')) {
+ if ($(e.currentTarget).hasClass("disabled")) {
return false;
}
@@ -115,11 +115,11 @@ const MultiSlider = (($) => {
});
// init touch swipes
- $e.hammer().bind('swipeleft panleft', (e) => {
+ $e.hammer().bind("swipeleft panleft", (e) => {
ui.next();
});
- $e.hammer().bind('swiperight panright', (e) => {
+ $e.hammer().bind("swiperight panright", (e) => {
ui.prev();
});
}
@@ -152,17 +152,17 @@ const MultiSlider = (($) => {
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,11 +170,11 @@ const MultiSlider = (($) => {
{
left: `${-(pos * ui.slideWidth)}px`,
},
- 'slow',
- 'swing',
+ "slow",
+ "swing",
() => {
ui.sliding = false;
- },
+ }
);
}
@@ -182,11 +182,11 @@ const MultiSlider = (($) => {
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}`);
diff --git a/src/js_old/_components/_ui.nocaptcha.js b/src/js_old/_components/_ui.nocaptcha.js
index a63e7eb..2ebc2cc 100644
--- a/src/js_old/_components/_ui.nocaptcha.js
+++ b/src/js_old/_components/_ui.nocaptcha.js
@@ -1,15 +1,15 @@
-'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 $Body = $("body");
- const NAME = 'jsNoCaptcha';
+ const NAME = "jsNoCaptcha";
class NoCaptcha {
static init() {
@@ -18,14 +18,17 @@ const NoCaptcha = (($) => {
console.log(`${NAME}: init`);
- if ($('.g-recaptcha').length && typeof $window[0].grecaptcha === 'undefined') {
+ if (
+ $(".g-recaptcha").length &&
+ typeof $window[0].grecaptcha === "undefined"
+ ) {
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();
- },
+ }
);
} else {
this.renderCaptcha();
@@ -38,41 +41,44 @@ const NoCaptcha = (($) => {
static renderCaptcha() {
const grecaptcha = $window[0].grecaptcha;
- if (typeof grecaptcha === 'undefined' || typeof grecaptcha.render === 'undefined') {
+ if (
+ typeof grecaptcha === "undefined" ||
+ typeof grecaptcha.render === "undefined"
+ ) {
return;
}
console.log(`${NAME}: Rendering Captcha`);
- const $_noCaptchaFields = $('.g-recaptcha');
+ const $_noCaptchaFields = $(".g-recaptcha");
- if (!$('.g-recaptcha').length) {
+ if (!$(".g-recaptcha").length) {
console.log(`${NAME}: No Captcha fields`);
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);
- if ($field.data('widgetid') || $field.html().length) {
+ 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);
+ $field.data("widgetid", widget_id);
// For the invisible captcha we need to setup some callback listeners
- if ($field.data('size') === 'invisible' && !$field.data('callback')) {
+ if ($field.data("size") === "invisible" && !$field.data("callback")) {
grecaptcha.execute(widget_id);
- $form.on('submit', submitListener);
+ $form.on("submit", submitListener);
}
});
}
diff --git a/src/js_old/_components/_ui.opening-hours.js b/src/js_old/_components/_ui.opening-hours.js
index b5a6ef7..7b04d6d 100644
--- a/src/js_old/_components/_ui.opening-hours.js
+++ b/src/js_old/_components/_ui.opening-hours.js
@@ -1,18 +1,18 @@
-'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) => {
+ $(".js-opening-hours").each((i, e) => {
callback(i, $(e));
});
}
@@ -22,50 +22,50 @@ const OpeningHoursUI = (($) => {
console.log(`${NAME}: init ...`);
- const hours = $.parseJSON($('.oppening-hours-json').html());
+ 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',
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
];
const today = weekday[date.getDay()];
let html =
'
Closed today ';
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']}`;
+ html = `Open today from ${v["From"]} to ${v["Till"]}`;
return false;
}
} else {
if (i > 0) {
- html += ',
';
+ html += ",
";
}
- html += `from ${v['From']} to ${v['Till']}`;
+ html += `from ${v["From"]} to ${v["Till"]}`;
}
});
@@ -73,11 +73,11 @@ const OpeningHoursUI = (($) => {
}
if (
- typeof hours['holidays'] !== 'undefined' &&
- typeof hours['holidays'][dateYMD] !== 'undefined'
+ typeof hours["holidays"] !== "undefined" &&
+ typeof hours["holidays"][dateYMD] !== "undefined"
) {
html = `
Closed today${
- hours['holidays'][dateYMD] ? ` for ${hours['holidays'][dateYMD]}` : ''
+ hours["holidays"][dateYMD] ? ` for ${hours["holidays"][dateYMD]}` : ""
} `;
}
@@ -104,7 +104,7 @@ const OpeningHoursUI = (($) => {
static dispose() {
console.log(`${NAME}: dispose`);
this.each((i, e) => {
- $(e).html('');
+ $(e).html("");
});
}
}
diff --git a/src/js_old/_components/_ui.search.js b/src/js_old/_components/_ui.search.js
index 61c5b86..31276a5 100644
--- a/src/js_old/_components/_ui.search.js
+++ b/src/js_old/_components/_ui.search.js
@@ -1,17 +1,17 @@
-'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 $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 $setnewlocation = $("#setnewlocation");
+ const $newlocationholder = $(".set-newlocation-holder");
const updatePosition = (lat, lng) => {
$searchLat.val(lat);
@@ -29,14 +29,14 @@ $(() => {
return;
}
- $('.search-location .current-val').text(newLocation);
+ $(".search-location .current-val").text(newLocation);
const geoUrl = `https://maps.googleapis.com/maps/api/geocode/json?address=${newLocation}&key=AIzaSyC00L0023LPBhzj12uTCL-4EwJ_6zgwcTU&sensor=true`;
$.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,
+ data.results[0].geometry.location.lng
);
//getCategories();
}
@@ -44,7 +44,7 @@ $(() => {
};
const getCurrentPosition = () => {
- $('.search-location .current-val').text('Current Location');
+ $(".search-location .current-val").text("Current Location");
navigator.geolocation.getCurrentPosition(
(position) => {
@@ -52,9 +52,9 @@ $(() => {
//hideDistancesThatDontMatter();
},
() => {
- $('.search-location .current-val').text('Unable to get your location');
- updatePosition('', '');
- },
+ $(".search-location .current-val").text("Unable to get your location");
+ updatePosition("", "");
+ }
);
};
@@ -64,7 +64,7 @@ $(() => {
getCurrentPosition();
}
- $('#Form_SearchForm').on('keyup keypress', (e) => {
+ $("#Form_SearchForm").on("keyup keypress", (e) => {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
@@ -72,15 +72,15 @@ $(() => {
}
});
- $('.get-current-location').on('click', (e) => {
+ $(".get-current-location").on("click", (e) => {
e.preventDefault();
getCurrentPosition();
$newlocationholder.toggle();
- $newLocation.val('');
+ $newLocation.val("");
});
- $setnewlocation.on('click', (e) => {
+ $setnewlocation.on("click", (e) => {
e.preventDefault();
$newlocationholder.toggle();
@@ -90,14 +90,14 @@ $(() => {
getGeoPosition();
});
- $('.new-search').on('click', (e) => {
+ $(".new-search").on("click", (e) => {
e.preventDefault();
- $('.section-search-secondary').animate(
+ $(".section-search-secondary").animate(
{
- 'max-height': 300,
+ "max-height": 300,
},
- 'slow',
+ "slow"
);
});
@@ -129,17 +129,17 @@ $(() => {
});
}*/
- const $map = $('#Map');
- if (typeof google !== 'undefined' && $map.length) {
- const $directions = $('#DirectionsPanel'),
- $fromAddress = $('#FromAddress'),
- $getDirections = $('#GetDirections'),
- $directionContainer = $('#DirectionContainer'),
+ 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'),
+ lat: $map.data("lat"),
+ lng: $map.data("lng"),
},
map = new google.maps.Map($map[0], {
zoom: 15,
@@ -172,7 +172,7 @@ $(() => {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
- },
+ }
);
$directionContainer.slideDown();
diff --git a/src/js_old/_components/_ui.shrink.js b/src/js_old/_components/_ui.shrink.js
index 330c4b5..2ea0ae1 100644
--- a/src/js_old/_components/_ui.shrink.js
+++ b/src/js_old/_components/_ui.shrink.js
@@ -1,43 +1,46 @@
-'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 NAME = "ShrinkUI";
console.log(`${NAME}: init`);
- $(W).on(`${NAME}.init ${Events.LOADED} ${Events.SCROLL} ${Events.RESIZE}`, () => {
- if ($('#Navigation > .navbar-collapse').hasClass('show')) {
- return;
- }
+ $(W).on(
+ `${NAME}.init ${Events.LOADED} ${Events.SCROLL} ${Events.RESIZE}`,
+ () => {
+ if ($("#Navigation > .navbar-collapse").hasClass("show")) {
+ return;
+ }
- let h1 = $('#SiteWideMessage').height();
- if (!h1) {
- h1 = 0;
- }
- let h2 = $('#SiteWideOffline').height();
- if (!h2) {
- h2 = 0;
- }
+ let h1 = $("#SiteWideMessage").height();
+ if (!h1) {
+ h1 = 0;
+ }
+ let h2 = $("#SiteWideOffline").height();
+ if (!h2) {
+ h2 = 0;
+ }
- let h3 = $('#Header').height();
- if (!h3) {
- h3 = 0;
- }
+ let h3 = $("#Header").height();
+ if (!h3) {
+ h3 = 0;
+ }
- const headerHeight = h1 + h2 + h3;
+ const headerHeight = h1 + h2 + h3;
- if ($(D).scrollTop() > headerHeight) {
- $('body').addClass('shrink');
- } else {
- $('body').removeClass('shrink');
+ if ($(D).scrollTop() > headerHeight) {
+ $("body").addClass("shrink");
+ } else {
+ $("body").removeClass("shrink");
+ }
}
- });
+ );
return ShrinkUI;
})($);
diff --git a/src/js_old/_components/_ui.sidebar.js b/src/js_old/_components/_ui.sidebar.js
index d2c8e84..b8309e5 100644
--- a/src/js_old/_components/_ui.sidebar.js
+++ b/src/js_old/_components/_ui.sidebar.js
@@ -1,16 +1,16 @@
-'use strict';
+"use strict";
//import StickySidebar from 'sticky-sidebar/src/sticky-sidebar';
-import $ from 'jquery';
-import Events from '../_events';
+import $ from "jquery";
+import Events from "../_events";
const SidebarUI = (($) => {
const D = document;
const W = window;
- const $Body = $('body');
- const NAME = 'SidebarUI';
+ const $Body = $("body");
+ const NAME = "SidebarUI";
const CLASSNAME = `js${NAME}`;
- const CONTENTHOLDER = 'content-holder';
+ const CONTENTHOLDER = "content-holder";
const INNERWRAPPER = `${CLASSNAME}__inner`;
class SidebarUI {
@@ -50,18 +50,18 @@ const SidebarUI = (($) => {
// 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',
- `position:fixed;top:${fontSize}px;width:${sidebarWidth}px`,
+ "style",
+ `position:fixed;top:${fontSize}px;width:${sidebarWidth}px`
);
}
});
diff --git a/src/js_old/_components/_ui.spinner.js b/src/js_old/_components/_ui.spinner.js
index 1dbfdfd..6bb9dcf 100644
--- a/src/js_old/_components/_ui.spinner.js
+++ b/src/js_old/_components/_ui.spinner.js
@@ -1,14 +1,14 @@
-'use strict';
-import $ from 'jquery';
+"use strict";
+import $ from "jquery";
const SpinnerUI = (($) => {
class SpinnerUI {
static show(callback) {
- $('#PageLoading').show(0, callback);
+ $("#PageLoading").show(0, callback);
}
static hide(callback) {
- $('#PageLoading').hide('slow', callback);
+ $("#PageLoading").hide("slow", callback);
}
}
diff --git a/src/js_old/_components/_ui.video.preview.js b/src/js_old/_components/_ui.video.preview.js
index 6470d9d..2efb647 100644
--- a/src/js_old/_components/_ui.video.preview.js
+++ b/src/js_old/_components/_ui.video.preview.js
@@ -1,13 +1,13 @@
-'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 NAME = "jsVideoPreviewUI";
const DATA_KEY = NAME;
const G = window;
@@ -15,16 +15,15 @@ const VideoPreviewUI = (($) => {
class VideoPreviewUI {
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');
+ 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\/)/,
+ /(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/
);
console.log(`${NAME}: ${parsedURL}`);
return undefined !== parsedURL[2]
@@ -36,31 +35,31 @@ const VideoPreviewUI = (($) => {
if (
(video = href.match(
- /(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/,
+ /(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/
))
) {
let video_id;
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);
}
- if (video[1] == 'vimeo') {
+ if (video[1] == "vimeo") {
video_id = video[3];
- ui.$_el.addClass('loading');
+ 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');
+ ui.$_el.removeClass("loading");
},
});
@@ -75,7 +74,7 @@ const VideoPreviewUI = (($) => {
show(src) {
const ui = this;
- ui.$_el[0].innerHTML = '';
+ ui.$_el[0].innerHTML = "";
ui.$_el.append(`
`);
}
diff --git a/src/js_old/_components/_ui.visibility.js b/src/js_old/_components/_ui.visibility.js
index 87369f6..487e97d 100644
--- a/src/js_old/_components/_ui.visibility.js
+++ b/src/js_old/_components/_ui.visibility.js
@@ -1,5 +1,5 @@
-'use strict';
-import $ from 'jquery';
+"use strict";
+import $ from "jquery";
const G = window;
const D = document;
diff --git a/src/js_old/_components/drivers/_google.track.external.links.js b/src/js_old/_components/drivers/_google.track.external.links.js
index 1ba472b..1c7e2e4 100644
--- a/src/js_old/_components/drivers/_google.track.external.links.js
+++ b/src/js_old/_components/drivers/_google.track.external.links.js
@@ -1,5 +1,5 @@
function _gaLt(event) {
- if (typeof ga !== 'function') {
+ if (typeof ga !== "function") {
return;
}
@@ -8,8 +8,8 @@ function _gaLt(event) {
/* 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;
@@ -21,7 +21,7 @@ function _gaLt(event) {
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) {
+ var hitBack = function (link, target) {
target ? window.open(link, target) : (window.location.href = link);
};
/* Is target set and not _(self|parent|top)? */
@@ -31,12 +31,12 @@ function _gaLt(event) {
: 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) },
+ { hitCallback: hitBack(link, target) }
);
/* Prevent standard click */
@@ -49,13 +49,13 @@ function _gaLt(event) {
var w = window;
w.addEventListener
? w.addEventListener(
- 'load',
+ "load",
() => {
- document.body.addEventListener('click', _gaLt, !1);
+ document.body.addEventListener("click", _gaLt, !1);
},
- !1,
+ !1
)
: w.attachEvent &&
- w.attachEvent('onload', () => {
- document.body.attachEvent('onclick', _gaLt);
+ w.attachEvent("onload", () => {
+ document.body.attachEvent("onclick", _gaLt);
});
diff --git a/src/js_old/_components/drivers/_map.google.font-icons.js b/src/js_old/_components/drivers/_map.google.font-icons.js
index ccb5373..db5b52e 100644
--- a/src/js_old/_components/drivers/_map.google.font-icons.js
+++ b/src/js_old/_components/drivers/_map.google.font-icons.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
const Obj = {
init: () => {
@@ -9,11 +9,9 @@ const Obj = {
ui.setMap(options.map);
ui.position = options.position;
- ui.html =
- (options.html ?
- options.html :
- '
'
- );
+ ui.html = options.html
+ ? options.html
+ : '
';
ui.divClass = options.divClass;
ui.align = options.align;
ui.isDebugMode = options.debug;
@@ -21,7 +19,7 @@ const Obj = {
ui.onMouseOver = options.onMouseOver;
ui.isBoolean = (arg) => {
- if (typeof arg === 'boolean') {
+ if (typeof arg === "boolean") {
return true;
} else {
return false;
@@ -29,7 +27,7 @@ const Obj = {
};
ui.isNotUndefined = (arg) => {
- if (typeof arg !== 'undefined') {
+ if (typeof arg !== "undefined") {
return true;
} else {
return false;
@@ -45,7 +43,7 @@ const Obj = {
};
ui.isString = (arg) => {
- if (typeof arg === 'string') {
+ if (typeof arg === "string") {
return true;
} else {
return false;
@@ -53,7 +51,7 @@ const Obj = {
};
ui.isFunction = (arg) => {
- if (typeof arg === 'function') {
+ if (typeof arg === "function") {
return true;
} else {
return false;
@@ -64,8 +62,8 @@ const Obj = {
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))
@@ -81,19 +79,19 @@ const Obj = {
// 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 =
'
' +
'
Debug mode
';
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;"
);
}
@@ -101,14 +99,14 @@ const Obj = {
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');
+ 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');
+ google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
+ google.maps.event.trigger(ui, "mouseover");
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation();
});
@@ -118,9 +116,9 @@ const Obj = {
const ui = this;
// Calculate position of div
- var positionInPixels = ui.getProjection().fromLatLngToDivPixel(
- new google.maps.LatLng(ui.position)
- );
+ var positionInPixels = ui
+ .getProjection()
+ .fromLatLngToDivPixel(new google.maps.LatLng(ui.position));
// Align HTML overlay relative to original position
var divOffset = {
@@ -128,40 +126,40 @@ const Obj = {
x: undefined,
};
- switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
- case 'left top':
+ 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':
+ case "left center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth;
break;
- case 'left bottom':
+ case "left bottom":
divOffset.y = 0;
divOffset.x = ui.div.offsetWidth;
break;
- case 'center top':
+ case "center top":
divOffset.y = ui.div.offsetHeight;
divOffset.x = ui.div.offsetWidth / 2;
break;
- case 'center center':
+ case "center center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = ui.div.offsetWidth / 2;
break;
- case 'center bottom':
+ case "center bottom":
divOffset.y = 0;
divOffset.x = ui.div.offsetWidth / 2;
break;
- case 'right top':
+ case "right top":
divOffset.y = ui.div.offsetHeight;
divOffset.x = 0;
break;
- case 'right center':
+ case "right center":
divOffset.y = ui.div.offsetHeight / 2;
divOffset.x = 0;
break;
- case 'right bottom':
+ case "right bottom":
divOffset.y = 0;
divOffset.x = 0;
break;
@@ -171,8 +169,8 @@ const Obj = {
}
// 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() {
@@ -194,6 +192,6 @@ const Obj = {
}
return GoogleMapsHtmlOverlay;
},
-}
+};
export default Obj;
diff --git a/src/js_old/_components/drivers/_map.google.js b/src/js_old/_components/drivers/_map.google.js
index 3ac5994..8fdf1a9 100644
--- a/src/js_old/_components/drivers/_map.google.js
+++ b/src/js_old/_components/drivers/_map.google.js
@@ -1,16 +1,16 @@
-'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';
+ return "GoogleMapsDriver";
}
init($el, config = []) {
@@ -25,10 +25,10 @@ const GoogleMapsDriver = (($) => {
ui.googleApiLoaded();
};
- $('body').append(
+ $("body").append(
``,
+ config["key"]
+ }&callback=init${ui.getName()}">`
);
}
@@ -37,19 +37,19 @@ const GoogleMapsDriver = (($) => {
const $el = ui.$el;
const config = ui.config;
- const $mapDiv = $el.find('.mapAPI-map');
+ 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`);
// init fontawesome icons
@@ -64,28 +64,30 @@ const GoogleMapsDriver = (($) => {
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:
'',
+ "
",
});
ui.popup.setMap(ui.map);
ui.geocoder = new google.maps.Geocoder();
ui.cluster = new MarkerClusterer(ui.map, null, {
- styles: [{
- width: 30,
- height: 30,
- className: 'mapboxgl-cluster',
- }],
+ styles: [
+ {
+ width: 30,
+ height: 30,
+ className: "mapboxgl-cluster",
+ },
+ ],
});
$el.trigger(Events.MAPAPILOADED);
@@ -102,11 +104,11 @@ const GoogleMapsDriver = (($) => {
const marker = new ui.MarkerUI({
position: pos,
map: ui.map,
- align: ['center', 'top'],
- html: `
`,
+ align: ["center", "top"],
+ html: `
`,
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);
},
@@ -123,33 +125,33 @@ const GoogleMapsDriver = (($) => {
const ui = this;
const $popup = $(ui.popup.getDiv());
- if (ui.config['flyToMarker']) {
+ if (ui.config["flyToMarker"]) {
ui.map.setCenter(pos); // panTo
- if (!ui.config['noZoom']) {
+ if (!ui.config["noZoom"]) {
ui.map.setZoom(18);
}
}
// keep it hidden to render content
$popup.css({
- opacity: '0',
+ opacity: "0",
});
- $popup.removeClass('d-none');
+ $popup.removeClass("d-none");
- $popup.find('.mapboxgl-popup-content .html').html(content);
+ $popup.find(".mapboxgl-popup-content .html").html(content);
- $popup.find('.mapboxgl-popup-close-button').on('click', (e) => {
+ $popup.find(".mapboxgl-popup-close-button").on("click", (e) => {
e.preventDefault();
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",
});
}
@@ -157,8 +159,8 @@ const GoogleMapsDriver = (($) => {
const ui = this;
const $popup = $(ui.popup.getDiv());
- $popup.addClass('d-none');
- if (!ui.config['noRestoreBounds'] || ui.config['flyToBounds']) {
+ $popup.addClass("d-none");
+ if (!ui.config["noRestoreBounds"] || ui.config["flyToBounds"]) {
ui.restoreBounds();
}
@@ -173,20 +175,20 @@ const GoogleMapsDriver = (($) => {
address: addr,
},
(results, status) => {
- if (status === 'OK') {
+ if (status === "OK") {
//results[0].geometry.location;
- if (typeof callback === 'function') {
+ if (typeof callback === "function") {
callback(results);
}
return results;
} else {
console.error(
- `${ui.getName()}: Geocode was not successful for the following reason: ${status}`,
+ `${ui.getName()}: Geocode was not successful for the following reason: ${status}`
);
}
- },
+ }
);
}
@@ -198,32 +200,32 @@ const GoogleMapsDriver = (($) => {
location: latlng,
},
(results, status) => {
- if (status === 'OK') {
+ if (status === "OK") {
//results[0].formatted_address;
- if (typeof callback === 'function') {
+ if (typeof callback === "function") {
callback(results);
}
return results;
} else {
console.error(
- `${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`,
+ `${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
);
}
- },
+ }
);
}
addGeoJson(config) {
const ui = this;
- const firstMarker = config['geojson'].features[0].geometry.coordinates;
+ 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) => {
+ config["geojson"].features.forEach((marker) => {
const id = marker.id;
const crds = marker.geometry.coordinates;
const content = marker.properties.content;
@@ -232,7 +234,7 @@ const GoogleMapsDriver = (($) => {
id,
content,
icon: marker.icon,
- flyToMarker: config['flyToMarker'],
+ flyToMarker: config["flyToMarker"],
});
bounds.extend({
diff --git a/src/js_old/_components/drivers/_map.google.marker.js b/src/js_old/_components/drivers/_map.google.marker.js
index 7f475e4..38e69a6 100644
--- a/src/js_old/_components/drivers/_map.google.marker.js
+++ b/src/js_old/_components/drivers/_map.google.marker.js
@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
-import $ from 'jquery';
+import $ from "jquery";
const Obj = {
init: () => {
@@ -22,7 +22,7 @@ const Obj = {
ui.onMouseOver = options.onMouseOver;
ui.isBoolean = (arg) => {
- if (typeof arg === 'boolean') {
+ if (typeof arg === "boolean") {
return true;
} else {
return false;
@@ -30,7 +30,7 @@ const Obj = {
};
ui.isNotUndefined = (arg) => {
- if (typeof arg !== 'undefined') {
+ if (typeof arg !== "undefined") {
return true;
} else {
return false;
@@ -46,7 +46,7 @@ const Obj = {
};
ui.isString = (arg) => {
- if (typeof arg === 'string') {
+ if (typeof arg === "string") {
return true;
} else {
return false;
@@ -54,7 +54,7 @@ const Obj = {
};
ui.isFunction = (arg) => {
- if (typeof arg === 'function') {
+ if (typeof arg === "function") {
return true;
} else {
return false;
@@ -65,8 +65,8 @@ const Obj = {
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))
@@ -82,19 +82,19 @@ const Obj = {
// 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 =
'
' +
'
Debug mode
';
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;"
);
}
@@ -102,14 +102,14 @@ const Obj = {
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');
+ 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');
+ google.maps.event.addDomListener(ui.div, "mouseover", (event) => {
+ google.maps.event.trigger(ui, "mouseover");
if (ui.isFunction(ui.onMouseOver)) ui.onMouseOver();
event.stopPropagation();
});
@@ -119,7 +119,7 @@ const Obj = {
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);
@@ -128,12 +128,14 @@ const Obj = {
// Calculate position of div
const projection = ui.getProjection();
- if(!projection) {
- console.log('GoogleMapsHtmlOverlay: current map is missing');
+ if (!projection) {
+ console.log("GoogleMapsHtmlOverlay: current map is missing");
return null;
}
- const positionInPixels = projection.fromLatLngToDivPixel(ui.getPosition());
+ const positionInPixels = projection.fromLatLngToDivPixel(
+ ui.getPosition()
+ );
// Align HTML overlay relative to original position
const offset = {
@@ -143,40 +145,40 @@ const Obj = {
const divWidth = $div.outerWidth();
const divHeight = $div.outerHeight();
- switch (Array.isArray(ui.align) ? ui.align.join(' ') : '') {
- case 'left top':
+ switch (Array.isArray(ui.align) ? ui.align.join(" ") : "") {
+ case "left top":
offset.y = divHeight;
offset.x = divWidth;
break;
- case 'left center':
+ case "left center":
offset.y = divHeight / 2;
offset.x = divWidth;
break;
- case 'left bottom':
+ case "left bottom":
offset.y = 0;
offset.x = divWidth;
break;
- case 'center top':
+ case "center top":
offset.y = divHeight;
offset.x = divWidth / 2;
break;
- case 'center center':
+ case "center center":
offset.y = divHeight / 2;
offset.x = divWidth / 2;
break;
- case 'center bottom':
+ case "center bottom":
offset.y = 0;
offset.x = divWidth / 2;
break;
- case 'right top':
+ case "right top":
offset.y = divHeight;
offset.x = 0;
break;
- case 'right center':
+ case "right center":
offset.y = divHeight / 2;
offset.x = 0;
break;
- case 'right bottom':
+ case "right bottom":
offset.y = 0;
offset.x = 0;
break;
diff --git a/src/js_old/_components/drivers/_map.mapbox.js b/src/js_old/_components/drivers/_map.mapbox.js
index b4a9fe5..f525253 100644
--- a/src/js_old/_components/drivers/_map.mapbox.js
+++ b/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';
+ return "MapBoxDriver";
}
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],
+ 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,
+ 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,24 +42,24 @@ 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());
- ui.map.on('load', (e) => {
+ ui.map.on("load", (e) => {
$el.trigger(Events.MAPAPILOADED);
});
ui.popup = new mapBoxGL.Popup({
closeOnClick: false,
- className: 'popup',
+ className: "popup",
});
}
@@ -68,16 +68,13 @@ const MapBoxDriver = (($) => {
// create a DOM el for the marker
const $el = $(
- `
${config['icon']}
`,
+ `
${config["icon"]}
`
);
- $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,
@@ -135,12 +132,12 @@ const MapBoxDriver = (($) => {
}, labelLayerId);
}*/
- const firstMarker = config['geojson'].features[0].geometry.coordinates;
+ 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) => {
+ config["geojson"].features.forEach((marker) => {
const id = marker.id;
const crds = marker.geometry.coordinates;
const content = marker.properties.content;
@@ -149,7 +146,7 @@ const MapBoxDriver = (($) => {
id,
content,
icon: marker.icon,
- flyToMarker: config['flyToMarker'],
+ flyToMarker: config["flyToMarker"],
});
bounds.extend(crds);
@@ -159,8 +156,8 @@ const MapBoxDriver = (($) => {
padding: 30,
});
- ui.popup.on('close', (e) => {
- if (config['flyToBounds']) {
+ ui.popup.on("close", (e) => {
+ if (config["flyToBounds"]) {
ui.map.fitBounds(bounds, {
padding: 30,
});
diff --git a/src/js_old/_components/mapStorage.js b/src/js_old/_components/mapStorage.js
index 4be7e30..826b246 100644
--- a/src/js_old/_components/mapStorage.js
+++ b/src/js_old/_components/mapStorage.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
import mapbox from "mapbox-gl";
@@ -8,7 +8,7 @@ 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] = [];
}
@@ -17,13 +17,13 @@ window.offlineMaps.eventManager = {
},
off: function (event) {
- console.log(`event.off: ${ event}`);
+ console.log(`event.off: ${event}`);
delete this._events[event];
return this;
},
fire: function (event) {
- console.log(`event.fire: ${ event}`);
+ console.log(`event.fire: ${event}`);
var events = this._events;
if (event in events) {
var actions = events[event];
@@ -43,16 +43,20 @@ window.offlineMaps.eventManager = {
(function (window, emr, undefined) {
var getIndexedDBStorage = function () {
- var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+ var indexedDB =
+ window.indexedDB ||
+ window.mozIndexedDB ||
+ window.webkitIndexedDB ||
+ window.msIndexedDB;
var IndexedDBImpl = function () {
var self = this;
var db = null;
- var request = indexedDB.open('TileStorage');
+ var request = indexedDB.open("TileStorage");
- request.onsuccess = function() {
+ request.onsuccess = function () {
db = this.result;
- emr.fire('storageLoaded', self);
+ emr.fire("storageLoaded", self);
};
request.onerror = function (error) {
@@ -60,25 +64,25 @@ window.offlineMaps.eventManager = {
};
request.onupgradeneeded = function () {
- var store = this.result.createObjectStore('tile', { keyPath: 'key' });
- store.createIndex('key', 'key', { unique: true });
+ var 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');
+ var transaction = db.transaction(["tile"], "readwrite");
+ var objectStore = transaction.objectStore("tile");
objectStore.put({ key, value });
};
this.delete = function (key) {
- var transaction = db.transaction(['tile'], 'readwrite');
- var objectStore = transaction.objectStore('tile');
+ var transaction = db.transaction(["tile"], "readwrite");
+ var 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 transaction = db.transaction(["tile"], "readonly");
+ var objectStore = transaction.objectStore("tile");
var result = objectStore.get(key);
result.onsuccess = function () {
successCallback(this.result ? this.result.value : undefined);
@@ -95,30 +99,49 @@ window.offlineMaps.eventManager = {
var WebSqlImpl = function () {
var self = this;
- var db = openDatabase('TileStorage', '1.0', 'Tile Storage', 5 * 1024 * 1024);
+ var 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)', [], () => {
- emr.fire('storageLoaded', self);
- });
+ tx.executeSql(
+ "CREATE TABLE IF NOT EXISTS tile (key TEXT PRIMARY KEY, value TEXT)",
+ [],
+ () => {
+ emr.fire("storageLoaded", self);
+ }
+ );
});
this.add = function (key, value) {
db.transaction((tx) => {
- tx.executeSql('INSERT INTO tile (key, value) VALUES (?, ?)', [key, value]);
+ 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 = ?', [key], (tx, result) => {
- successCallback(result.rows.length ? result.rows.item(0).value : undefined);
- }, errorCallback);
+ tx.executeSql(
+ "SELECT value FROM tile WHERE key = ?",
+ [key],
+ (tx, result) => {
+ successCallback(
+ result.rows.length ? result.rows.item(0).value : undefined
+ );
+ },
+ errorCallback
+ );
});
};
};
@@ -126,10 +149,10 @@ window.offlineMaps.eventManager = {
return openDatabase ? new WebSqlImpl() : null;
};
- emr.on('storageLoad', () => {
- var storage = getIndexedDBStorage() || getWebSqlStorage() || null;
+ emr.on("storageLoad", () => {
+ var storage = getIndexedDBStorage() || getWebSqlStorage() || null;
if (!storage) {
- emr.fire('storageLoaded', null);
+ emr.fire("storageLoaded", null);
}
});
})(window, window.offlineMaps.eventManager);
@@ -141,25 +164,30 @@ window.offlineMaps.eventManager = {
};
StorageRequestManager.prototype._imageToDataUri = function (image) {
- var canvas = window.document.createElement('canvas');
+ var canvas = window.document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
- var context = canvas.getContext('2d');
+ var context = canvas.getContext("2d");
context.drawImage(image, 0, 0);
- return canvas.toDataURL('image/png');
+ return canvas.toDataURL("image/png");
};
- StorageRequestManager.prototype._createTileImage = function (id, coord, value, cache) {
- var img = window.document.createElement('img');
+ StorageRequestManager.prototype._createTileImage = function (
+ id,
+ coord,
+ value,
+ cache
+ ) {
+ var img = window.document.createElement("img");
img.id = id;
- img.style.position = 'absolute';
+ img.style.position = "absolute";
img.coord = coord;
this.loadingBay.appendChild(img);
if (cache) {
img.onload = this.getLoadCompleteWithCache();
- img.crossOrigin = 'Anonymous';
+ img.crossOrigin = "Anonymous";
} else {
img.onload = this.getLoadComplete();
}
@@ -170,15 +198,19 @@ window.offlineMaps.eventManager = {
StorageRequestManager.prototype._loadTile = function (id, coord, url) {
var self = this;
if (this._storage) {
- this._storage.get(id, (value) => {
- if (value) {
- self._createTileImage(id, coord, value, false);
- } else {
+ this._storage.get(
+ id,
+ (value) => {
+ if (value) {
+ 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);
- });
+ );
} else {
self._createTileImage(id, coord, url, false);
}
@@ -188,7 +220,10 @@ window.offlineMaps.eventManager = {
if (sortFunc && this.requestQueue.length > 8) {
this.requestQueue.sort(sortFunc);
}
- while (this.openRequestCount < this.maxOpenRequests && this.requestQueue.length > 0) {
+ while (
+ this.openRequestCount < this.maxOpenRequests &&
+ this.requestQueue.length > 0
+ ) {
var request = this.requestQueue.pop();
if (request) {
this.openRequestCount++;
@@ -201,7 +236,7 @@ window.offlineMaps.eventManager = {
StorageRequestManager.prototype.getLoadCompleteWithCache = function () {
if (!this._loadComplete) {
var theManager = this;
- this._loadComplete = function(e) {
+ this._loadComplete = function (e) {
//e = e || window.event;
var img = e.srcElement || e.target;
@@ -215,13 +250,15 @@ window.offlineMaps.eventManager = {
theManager.openRequestCount--;
delete theManager.requestsById[img.id];
- if (e.type === 'load' && (img.complete ||
- (img.readyState && img.readyState === 'complete'))) {
- theManager.dispatchCallback('requestcomplete', img);
+ if (
+ e.type === "load" &&
+ (img.complete || (img.readyState && img.readyState === "complete"))
+ ) {
+ theManager.dispatchCallback("requestcomplete", img);
} else {
- theManager.dispatchCallback('requesterror', {
+ theManager.dispatchCallback("requesterror", {
element: img,
- url: (`${ img.src}`),
+ url: `${img.src}`,
});
img.src = null;
}
@@ -234,15 +271,16 @@ window.offlineMaps.eventManager = {
MM.extend(StorageRequestManager, MM.RequestManager);
- var 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';
+ var 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());
+ this.requestManager.addCallback("requestcomplete", this.getTileComplete());
+ this.requestManager.addCallback("requesterror", this.getTileError());
if (provider) {
this.setProvider(provider);
}
@@ -250,21 +288,32 @@ window.offlineMaps.eventManager = {
MM.extend(StorageLayer, MM.Layer);
- var StorageTemplatedLayer = function(template, subdomains, name, storage) {
- return new StorageLayer(new MM.Template(template, subdomains), null, name, storage);
+ var 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');
- map.addLayer(new StorageTemplatedLayer('http://{S}.tile.osm.org/{Z}/{X}/{Y}.png',
- ['a', 'b', 'c'], undefined, storage));
+ emr.on("mapLoad", (storage) => {
+ var map = mapbox.map("map");
+ map.addLayer(
+ new StorageTemplatedLayer(
+ "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.561850 }, 13);
+ 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);
\ No newline at end of file
+ emr.on("storageLoaded", "mapLoad");
+ emr.fire("storageLoad");
+})(window.offlineMaps.eventManager);
diff --git a/src/js_old/_components/routes/index.js b/src/js_old/_components/routes/index.js
index 12fe0dc..bd8d01e 100644
--- a/src/js_old/_components/routes/index.js
+++ b/src/js_old/_components/routes/index.js
@@ -1,13 +1,13 @@
-import Events from '../../_events';
+import Events from "../../_events";
import Routie from "routie";
$(window).on(`${Events.AJAX} ${Events.LOADED}`, () => {
Routie({
- 'navigation': function() {
- $('#NavbarCollapse').addClass('in');
+ navigation: function () {
+ $("#NavbarCollapse").addClass("in");
},
- 'carousel:id:num': function(id, num) {
- $(`#Carousel${ id}`).carousel(num);
+ "carousel:id:num": function (id, num) {
+ $(`#Carousel${id}`).carousel(num);
},
});
-});
\ No newline at end of file
+});
diff --git a/src/js_old/_consts.js b/src/js_old/_consts.js
index 4fa84ab..fecb8cb 100644
--- a/src/js_old/_consts.js
+++ b/src/js_old/_consts.js
@@ -2,11 +2,11 @@
* Add your global events here
*/
-import MAP_DRIVER from './_components/drivers/_map.google';
+import MAP_DRIVER from "./_components/drivers/_map.google";
//import MAP_DRIVER from './_components/drivers/_map.mapbox';
const CONSTS = {
- ENVS: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'],
+ ENVS: ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"],
MAP_DRIVER,
};
diff --git a/src/js_old/_events.js b/src/js_old/_events.js
index 592228c..8d6a10b 100644
--- a/src/js_old/_events.js
+++ b/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",
};
diff --git a/src/js_old/_events.router.js b/src/js_old/_events.router.js
index 6d83451..d04e91d 100644
--- a/src/js_old/_events.router.js
+++ b/src/js_old/_events.router.js
@@ -1,6 +1,6 @@
-'use strict';
+"use strict";
-import $ from 'jquery';
+import $ from "jquery";
/**
* Route side-wide events
@@ -14,19 +14,19 @@ const EventsUI = (($) => {
const W = window;
const $W = $(W);
const D = document;
- const $Body = $('body');
+ 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;
+ const tagName = typeof el !== undefined ? $(el).prop("tagName") : null;
switch (tagName) {
- case 'HTML':
- case 'BODY':
+ case "HTML":
+ case "BODY":
modEl = $W;
break;
}
@@ -52,11 +52,11 @@ const EventsUI = (($) => {
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':
+ case "HTML":
+ case "BODY":
el = $W;
break;
}
diff --git a/src/js_old/_layout.js b/src/js_old/_layout.js
index 23e83a5..e5c15e1 100644
--- a/src/js_old/_layout.js
+++ b/src/js_old/_layout.js
@@ -1,16 +1,16 @@
-'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 $Body = $("body");
- const NAME = 'LayoutUI';
+ const NAME = "LayoutUI";
const datepickerOptions = {
autoclose: true,
@@ -30,7 +30,7 @@ const LayoutUI = (($) => {
// Custom fonts
$Body.append(
- '
',
+ '
'
);
/*google analytics */
@@ -40,7 +40,6 @@ const LayoutUI = (($) => {
ga('send', 'pageview');
});*/
-
// Fire further js when layout is ready
$(W).trigger(Events.LODEDANDREADY);
}
diff --git a/src/js_old/_main.js b/src/js_old/_main.js
index 78a90f2..60cd661 100644
--- a/src/js_old/_main.js
+++ b/src/js_old/_main.js
@@ -1,20 +1,20 @@
-'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';
+import SmoothScroll from "smooth-scroll";
const smoothScroll = SmoothScroll();
const MainUI = (($) => {
@@ -22,68 +22,68 @@ const MainUI = (($) => {
const W = window;
const $W = $(W);
const D = document;
- const $Body = $('body');
+ const $Body = $("body");
- const NAME = 'MainUI';
+ const NAME = "MainUI";
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.groupEnd("Events");
- console.groupCollapsed('Consts');
+ console.groupCollapsed("Consts");
Object.keys(Consts).forEach((k) => {
console.info(`${k}: ${Consts[k]}`);
});
- console.groupEnd('Events');
+ 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 $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.addClass("is-hidden");
$Body.trigger(Events.TABHIDDEN);
$W.trigger(Events.TABHIDDEN);
} else {
console.log(`${NAME}: Tab: focused`);
- $Body.removeClass('is-hidden');
+ $Body.removeClass("is-hidden");
$Body.trigger(Events.TABFOCUSED);
$W.trigger(Events.TABFOCUSED);
}
@@ -93,7 +93,7 @@ const MainUI = (($) => {
let pingInterval;
let pingLock = false;
const sessionPing = () => {
- if (pingLock || $Body.hasClass('is-offline')) {
+ if (pingLock || $Body.hasClass("is-offline")) {
return;
}
@@ -103,12 +103,12 @@ const MainUI = (($) => {
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') {
+ if (datastatus !== "success") {
console.warn(`${NAME}: ping failed`);
clearInterval(pingInterval);
@@ -128,7 +128,7 @@ const MainUI = (($) => {
}
statusLock = true;
- if (typeof navigator.onLine === 'undefined') {
+ if (typeof navigator.onLine === "undefined") {
return false;
}
@@ -138,8 +138,8 @@ const MainUI = (($) => {
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);
@@ -152,7 +152,7 @@ const MainUI = (($) => {
pingInterval = setInterval(sessionPing, 300000); // 5 min in ms
}
- if ($Body.hasClass('is-offline')) {
+ if ($Body.hasClass("is-offline")) {
sessionPing();
console.log(`${NAME}: is back online`);
@@ -161,8 +161,8 @@ const MainUI = (($) => {
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);
@@ -176,7 +176,7 @@ const MainUI = (($) => {
() => {
updateOnlineStatus();
},
- false,
+ false
);
W.addEventListener(
@@ -184,7 +184,7 @@ const MainUI = (($) => {
() => {
updateOnlineStatus();
},
- false,
+ false
);
$W.on(`${Events.LOADED} ${Events.AJAX}`, () => {
@@ -204,9 +204,9 @@ const MainUI = (($) => {
};
W.URLDetails = {
- base: $('base').attr('href'),
- relative: '/',
- hash: '',
+ base: $("base").attr("href"),
+ relative: "/",
+ hash: "",
};
let eventFired = false;
@@ -236,7 +236,7 @@ const MainUI = (($) => {
}, 200);
};
- setTouchScreen('ontouchstart' in window || navigator.msMaxTouchPoints > 0);
+ setTouchScreen("ontouchstart" in window || navigator.msMaxTouchPoints > 0);
// disable touch on mouse events
/*D.addEventListener('mousemove', () => {
@@ -248,10 +248,10 @@ const MainUI = (($) => {
});*/
// enable touch screen on touch events
- D.addEventListener('touchmove', () => {
+ D.addEventListener("touchmove", () => {
setTouchScreen(true);
});
- D.addEventListener('touchstart', () => {
+ D.addEventListener("touchstart", () => {
setTouchScreen(true);
});
@@ -268,8 +268,8 @@ const MainUI = (($) => {
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();
@@ -278,7 +278,7 @@ const MainUI = (($) => {
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(() => {
@@ -304,26 +304,26 @@ const MainUI = (($) => {
//
// scroll links
- $('.js-scrollTo').on('click', (e) => {
+ $(".js-scrollTo").on("click", (e) => {
console.log(`${NAME}: .js-scrollTo`);
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) {
+ 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 = [];
- $('[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({
@@ -331,16 +331,16 @@ const MainUI = (($) => {
families: fonts,
},
});
- },
+ }
);
}
// data-set links
- $('[data-set-target]').on('click', (e) => {
+ $("[data-set-target]").on("click", (e) => {
console.log(`${NAME}: [data-set-target]`);
const $el = $(e.currentTarget);
- const $target = $($el.data('set-target'));
+ const $target = $($el.data("set-target"));
if (!$target.length) {
return;
@@ -348,25 +348,25 @@ const MainUI = (($) => {
$target.each((i, targetEl) => {
const $targetEl = $(targetEl);
- const tag = $targetEl.prop('tagName').toLowerCase();
+ 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);
+ $target.closest("form").trigger(Events.SET_TARGET_UPDATE);
});
// emulate links
- $('.a[data-href]').on('click', (e) => {
+ $(".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 href = $el.data("href");
if (!href.length) {
console.warn(`${NAME}: .a[data-href] | Missing data-href`);
console.warn($el);
@@ -376,24 +376,24 @@ const MainUI = (($) => {
});
// set attributes for mobile friendly tables
- $('.typography table').each((i, el) => {
+ $(".typography table").each((i, el) => {
const $table = $(el);
- let $header = $table.find('thead tr:first-child');
+ 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) => {
+ $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());
+ if (!$el.attr("data-label")) {
+ $el.attr("data-label", $h.text());
}
});
});
@@ -402,16 +402,16 @@ const MainUI = (($) => {
// hide spinner
Spinner.hide(() => {
- $Body.addClass('loaded');
+ $Body.addClass("loaded");
});
// fire page printing
- if (W.URLDetails['hash'].indexOf('printpage') > -1) {
+ if (W.URLDetails["hash"].indexOf("printpage") > -1) {
W.print();
}
$Body.data(NAME, ui);
- $W.removeClass('lock-main-init');
+ $W.removeClass("lock-main-init");
}
static detectBootstrapScreenSize() {
@@ -425,7 +425,7 @@ const MainUI = (($) => {
for (let i = 0; i < envs.length; ++i) {
const env = envs[i];
$el.addClass(`d-${env}-none`);
- if ($el.is(':hidden')) {
+ if ($el.is(":hidden")) {
curEnv = env;
break;
}
@@ -437,17 +437,17 @@ const MainUI = (($) => {
let landscape = true;
if ($W.width() > $W.height()) {
- $Body.removeClass('portrait');
- $Body.addClass('landscape');
+ $Body.removeClass("portrait");
+ $Body.addClass("landscape");
} else {
landscape = false;
- $Body.removeClass('landscape');
- $Body.addClass('portrait');
+ $Body.removeClass("landscape");
+ $Body.addClass("portrait");
}
console.log(
- `${NAME}: screen size detected ${curEnv} | landscape ${landscape}`,
+ `${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
);
return curEnv;
@@ -455,30 +455,30 @@ const MainUI = (($) => {
static updateLocation(url) {
let location = url || W.location.href;
- location = location.replace(W.URLDetails['base'], '/');
- const hash = location.indexOf('#');
+ 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');
+ $SiteWideMessage.fadeOut("fast");
$SiteWideMessage.html(
- `
`,
+ `
`
);
- $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();
@@ -490,12 +490,12 @@ const MainUI = (($) => {
// hide site-wide alert
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') {
+ if ($AlertNotify.length && typeof $AlertNotify[0].stop !== "undefined") {
$AlertNotify[0].stop();
}
@@ -504,17 +504,17 @@ const MainUI = (($) => {
// load all images
static loadImages() {
- const $imgs = $Body.find('img').not('.loaded');
+ 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 src = $el.attr("src");
+ const lazySrc = $el.data("lazy-src");
- if ($el.hasClass('loaded')) {
+ if ($el.hasClass("loaded")) {
return;
}
@@ -523,14 +523,14 @@ const MainUI = (($) => {
}
if (lazySrc && lazySrc.length) {
$imgLazyUrls.push(lazySrc);
- $el.addClass('loading');
+ $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}`);
});
@@ -540,25 +540,25 @@ const MainUI = (($) => {
// 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 lazySrc = $el.data("lazy-bg");
- if ($el.hasClass('loaded')) {
+ if ($el.hasClass("loaded")) {
return;
}
if (lazySrc && lazySrc.length) {
$imgLazyUrls.push(lazySrc);
- $el.addClass('loading');
+ $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}`);
});
@@ -567,25 +567,25 @@ const MainUI = (($) => {
// 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 lazySrc = $el.data("src-replace");
- if ($el.hasClass('loaded')) {
+ 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(() => {
@@ -594,8 +594,8 @@ const MainUI = (($) => {
setTimeout(() => {
$W.trigger(`${Events.LAZYIMAGESREADY}`);
- console.groupEnd('Post-init');
- console.timeEnd('Post-init');
+ console.groupEnd("Post-init");
+ console.timeEnd("Post-init");
}, 100);
});
});
@@ -609,35 +609,35 @@ const MainUI = (($) => {
$W.on(
`${Events.MAININIT} ${Events.AJAX} ${Events.AJAXMAIN} ${Events.LOADED}`,
() => {
- if ($W.hasClass('lock-main-init')) {
+ if ($W.hasClass("lock-main-init")) {
console.warn(`${NAME}: locked`);
return;
}
- $W.addClass('lock-main-init');
+ $W.addClass("lock-main-init");
MainUI.init();
- },
+ }
);
$W.on(`${Events.RESIZE}`, () => {
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) => {
+ .on("click submit touch", (e) => {
console.log(`${NAME}: External link`);
setTimeout(() => {
Spinner.hide(() => {
- $Body.addClass('loaded');
+ $Body.addClass("loaded");
});
}, 1000);
});
diff --git a/src/js_old/app.js b/src/js_old/app.js
index a747712..b23c313 100644
--- a/src/js_old/app.js
+++ b/src/js_old/app.js
@@ -1,10 +1,10 @@
-'use strict';
+"use strict";
//import $ from 'jquery';
-import '../scss/app.scss';
+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';
@@ -64,11 +64,11 @@ import 'bootstrap/js/dist/tab';*/
//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(
,
- document.getElementById('MainContent'),
+ document.getElementById("MainContent")
);
//import Confirmation from 'bootstrap-confirmation2/dist/bootstrap-confirmation';
@@ -90,8 +90,8 @@ function importAll(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)$/)
);
diff --git a/src/js_old/lang/_en.js b/src/js_old/lang/_en.js
index 49afcd7..ceb84a6 100644
--- a/src/js_old/lang/_en.js
+++ b/src/js_old/lang/_en.js
@@ -5,11 +5,13 @@
export default {
en: {
jsSteppedForm: {
- STEPCOUNTER: '
Step of
',
- STEPBUTTONS: '
',
+ STEPCOUNTER:
+ '
Step of
',
+ STEPBUTTONS:
+ '
",
},
},
};
diff --git a/src/js_old/place_it_to_types_folder_PageTypeClassName.js b/src/js_old/place_it_to_types_folder_PageTypeClassName.js
index 0072927..9b8252d 100644
--- a/src/js_old/place_it_to_types_folder_PageTypeClassName.js
+++ b/src/js_old/place_it_to_types_folder_PageTypeClassName.js
@@ -16,21 +16,21 @@
"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 $Body = $("body");
- const NAME = 'PageTypeUI';
+ const NAME = "PageTypeUI";
class PageTypeUI {
// Static methods
@@ -58,7 +58,6 @@ const PageTypeUI = (($) => {
});
return PageTypeUI;
-
})($);
export default PageTypeUI;
diff --git a/src/js_old/types/SilverShop.Page.CheckoutPageController.js b/src/js_old/types/SilverShop.Page.CheckoutPageController.js
index fa5d605..08c310d 100644
--- a/src/js_old/types/SilverShop.Page.CheckoutPageController.js
+++ b/src/js_old/types/SilverShop.Page.CheckoutPageController.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
/*import $ from 'jquery';
import '../_components/_ui.map.api';
diff --git a/src/js_old/types/Site.Controllers.MapElementController.js b/src/js_old/types/Site.Controllers.MapElementController.js
index 6911060..f258d83 100644
--- a/src/js_old/types/Site.Controllers.MapElementController.js
+++ b/src/js_old/types/Site.Controllers.MapElementController.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
/*import $ from 'jquery';
import Events from '../_events';
diff --git a/src/mocks/browser.js b/src/mocks/browser.js
index 16c1b63..be4c02b 100644
--- a/src/mocks/browser.js
+++ b/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);
diff --git a/src/mocks/handlers.js b/src/mocks/handlers.js
index e317f9f..2baecfa 100644
--- a/src/mocks/handlers.js
+++ b/src/mocks/handlers.js
@@ -1,5 +1,5 @@
// src/mocks/handlers.js
-import { graphql } from 'msw';
+import { graphql } from "msw";
export const handlers = [
// Handles a "Login" mutation
@@ -15,7 +15,7 @@ export const handlers = [
);
}),*/
// Handles a "Pages" query
- graphql.query('Pages11', (req, res, ctx) => {
+ graphql.query("Pages11", (req, res, ctx) => {
const apiKey = req.headers.map.apikey;
if (
!req.headers.map.apikey ||
@@ -25,10 +25,10 @@ export const handlers = [
return res(
ctx.errors([
{
- message: 'Not authenticated',
- errorType: 'AuthenticationError',
+ message: "Not authenticated",
+ errorType: "AuthenticationError",
},
- ]),
+ ])
);
}
// When authenticated, respond with a query payload
@@ -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",
},
},
],
@@ -88,7 +88,7 @@ export const handlers = [
totalCount: 1,
},
},
- }),
+ })
);
}),
];
diff --git a/src/mocks/server.js b/src/mocks/server.js
index 76fbb61..2cd878b 100644
--- a/src/mocks/server.js
+++ b/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);
diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss
index a57fe64..818ec25 100755
--- a/src/scss/_colors.scss
+++ b/src/scss/_colors.scss
@@ -29,8 +29,7 @@ $grays: map-merge(
"700": $gray-700,
"800": $gray-800,
"900": $gray-900,
- ),
- $grays
+ ), $grays
) !default;
$blue: $clr-blue !default;
@@ -62,8 +61,7 @@ $colors: map-merge(
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800,
- ),
- $colors
+ ), $colors
) !default;
$primary: $blue !default;
@@ -88,8 +86,7 @@ $theme-colors: map-merge(
"danger": $danger,
"light": $light,
"dark": $dark,
- ),
- $theme-colors
+ ), $theme-colors
) !default;
// UI color variables
diff --git a/src/test-pajax.html b/src/test-pajax.html
index 89adc09..84b995b 100644
--- a/src/test-pajax.html
+++ b/src/test-pajax.html
@@ -1,84 +1,84 @@
Test HTML -content with PAJAX response
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it to
- make a type specimen book. It has survived not only five centuries, but also
- the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing
- Lorem Ipsum passages, and more recently with desktop publishing software
- like Aldus PageMaker including versions of Lorem Ipsum.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type
+ specimen book. It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was popularised in
+ the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+ and more recently with desktop publishing software like Aldus PageMaker
+ including versions of Lorem Ipsum.
https://twitter.com/reactjs/status/964689022747475968
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it to
- make a type specimen book. It has survived not only five centuries, but also
- the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing
- Lorem Ipsum passages, and more recently with desktop publishing software
- like Aldus PageMaker including versions of Lorem Ipsum.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type
+ specimen book. It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was popularised in
+ the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+ and more recently with desktop publishing software like Aldus PageMaker
+ including versions of Lorem Ipsum.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it to
- make a type specimen book. It has survived not only five centuries, but also
- the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing
- Lorem Ipsum passages, and more recently with desktop publishing software
- like Aldus PageMaker including versions of Lorem Ipsum.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type
+ specimen book. It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was popularised in
+ the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+ and more recently with desktop publishing software like Aldus PageMaker
+ including versions of Lorem Ipsum.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it to
- make a type specimen book. It has survived not only five centuries, but also
- the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing
- Lorem Ipsum passages, and more recently with desktop publishing software
- like Aldus PageMaker including versions of Lorem Ipsum.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type
+ specimen book. It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was popularised in
+ the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+ and more recently with desktop publishing software like Aldus PageMaker
+ including versions of Lorem Ipsum.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it to
- make a type specimen book. It has survived not only five centuries, but also
- the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing
- Lorem Ipsum passages, and more recently with desktop publishing software
- like Aldus PageMaker including versions of Lorem Ipsum.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type
+ specimen book. It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was popularised in
+ the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+ and more recently with desktop publishing software like Aldus PageMaker
+ including versions of Lorem Ipsum.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it to
- make a type specimen book. It has survived not only five centuries, but also
- the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing
- Lorem Ipsum passages, and more recently with desktop publishing software
- like Aldus PageMaker including versions of Lorem Ipsum.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type
+ specimen book. It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was popularised in
+ the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+ and more recently with desktop publishing software like Aldus PageMaker
+ including versions of Lorem Ipsum.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it to
- make a type specimen book. It has survived not only five centuries, but also
- the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing
- Lorem Ipsum passages, and more recently with desktop publishing software
- like Aldus PageMaker including versions of Lorem Ipsum.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type
+ specimen book. It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was popularised in
+ the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+ and more recently with desktop publishing software like Aldus PageMaker
+ including versions of Lorem Ipsum.
- Lorem Ipsum is simply dummy text of the printing and typesetting industry.
- Lorem Ipsum has been the industry's standard dummy text ever since the
- 1500s, when an unknown printer took a galley of type and scrambled it to
- make a type specimen book. It has survived not only five centuries, but also
- the leap into electronic typesetting, remaining essentially unchanged. It
- was popularised in the 1960s with the release of Letraset sheets containing
- Lorem Ipsum passages, and more recently with desktop publishing software
- like Aldus PageMaker including versions of Lorem Ipsum.
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+ when an unknown printer took a galley of type and scrambled it to make a type
+ specimen book. It has survived not only five centuries, but also the leap into
+ electronic typesetting, remaining essentially unchanged. It was popularised in
+ the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
+ and more recently with desktop publishing software like Aldus PageMaker
+ including versions of Lorem Ipsum.
diff --git a/src/test.json b/src/test.json
index 0803745..29d94ed 100644
--- a/src/test.json
+++ b/src/test.json
@@ -1,4 +1,4 @@
{
- "Title": "Test Title!",
- "Content": "Test
HTML -content with JSON response"
+ "Title": "Test Title!",
+ "Content": "Test
HTML -content with JSON response"
}