diff --git a/src/js/ui/map.api.js b/src/js/ui/map.api.js
index 7973351..7de3767 100644
--- a/src/js/ui/map.api.js
+++ b/src/js/ui/map.api.js
@@ -3,120 +3,118 @@
import Events from '../_events';
import Consts from 'js/_consts';
-import '../../scss/ui/map.api.scss';
-
const MapAPI = ((window) => {
- // Constants
- const NAME = 'js-mapapi';
- const MAP_DRIVER = Consts['MAP_DRIVER'];
+ // Constants
+ const NAME = 'js-mapapi';
+ const MAP_DRIVER = Consts['MAP_DRIVER'];
- class MapAPI {
- // Constructor
- constructor(el) {
- const ui = this;
- const Drv = new MAP_DRIVER();
- const BODY = document.querySelector('body');
- const config = el.dataset;
- config['center'] = [
- config['lng'] ? config['lng'] : BODY.dataset['default-lng'],
- config['lat'] ? config['lat'] : BODY.dataset['default-lat'],
- ];
+ class MapAPI {
+ // Constructor
+ constructor(el) {
+ const ui = this;
+ const Drv = new MAP_DRIVER();
+ const BODY = document.querySelector('body');
+ const config = el.dataset;
+ config['center'] = [
+ config['lng'] ? config['lng'] : BODY.dataset['default-lng'],
+ config['lat'] ? config['lat'] : BODY.dataset['default-lat'],
+ ];
- /*config['style'] = config['style'] ?
- jQuery.parseJSON(config['style']) :
- null;
+ /*config['style'] = config['style'] ?
+ jQuery.parseJSON(config['style']) :
+ null;
- config['font-family'] = $BODY.css('font-family');*/
+ config['font-family'] = $BODY.css('font-family');*/
- if (!config['icon']) {
- config['icon'] = '';
- }
+ if (!config['icon']) {
+ config['icon'] = '';
+ }
- console.log(`${NAME}: init ${Drv.getName()}...`);
- ui.drv = Drv;
- ui.el = el;
- ui.config = config;
+ console.log(`${NAME}: init ${Drv.getName()}...`);
+ ui.drv = Drv;
+ ui.el = el;
+ ui.config = config;
- Drv.init(el, config);
+ Drv.init(el, config);
- el.addEventListener(Events.MAPAPILOADED, () => {
- ui.addMarkers()
- });
+ el.addEventListener(Events.MAPAPILOADED, () => {
+ ui.addMarkers()
+ });
+ }
+
+ // Public methods
+ getMap() {
+ return ui.map;
+ }
+
+ dispose() {
+ const ui = this;
+
+ ui.el = null;
+ ui.el.classList.remove(`${NAME}-active`);
+ }
+
+ addMarkers() {
+ console.log(`${NAME}: addMarkers`);
+ const ui = this;
+ const el = ui.el;
+ const Drv = ui.drv;
+ const config = ui.config;
+
+ ui.map = Drv.getMap();
+
+ if (config['geojson']) {
+ console.log(`${NAME}: setting up geocode data`);
+ Drv.addGeoJson(config);
+ } else if (config['address']) {
+ console.log(config['address']);
+ console.log(`${NAME}: setting up address marker`);
+ Drv.geocode(config['address'], (results) => {
+ console.log(results);
+
+ const lat = results[0].geometry.location.lat();
+ const lng = results[0].geometry.location.lng();
+
+ console.log(
+ `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`,
+ );
+
+ Drv.addMarker([lng, lat], config);
+ ui.map.setCenter({
+ lat,
+ lng,
+ });
+ });
+ } else if (config['lat'] && config['lng']) {
+ const lat = config['lat'];
+ const lng = config['lng'];
+
+ console.log(
+ `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`,
+ );
+
+ Drv.addMarker([lng, lat], config);
+ }
+
+ el.classList.add(`${NAME}-active`);
+
+ el.dispatchEvent(new Event(Events.MAPLOADED));
+ console.log(`${NAME}: Map is loaded`);
+ }
}
- // Public methods
- getMap() {
- return ui.map;
- }
-
- dispose() {
- const ui = this;
-
- ui.el = null;
- ui.el.classList.remove(`${NAME}-active`);
- }
-
- addMarkers() {
- console.log(`${NAME}: addMarkers`);
- const ui = this;
- const el = ui.el;
- const Drv = ui.drv;
- const config = ui.config;
-
- ui.map = Drv.getMap();
-
- if (config['geojson']) {
- console.log(`${NAME}: setting up geocode data`);
- Drv.addGeoJson(config);
- } else if (config['address']) {
- console.log(config['address']);
- console.log(`${NAME}: setting up address marker`);
- Drv.geocode(config['address'], (results) => {
- console.log(results);
-
- const lat = results[0].geometry.location.lat();
- const lng = results[0].geometry.location.lng();
-
- console.log(
- `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`,
- );
-
- Drv.addMarker([lng, lat], config);
- ui.map.setCenter({
- lat,
- lng,
- });
+ const init = () => {
+ console.log(`${NAME}: init`);
+ document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
+ const map = new MapAPI(el);
});
- } else if (config['lat'] && config['lng']) {
- const lat = config['lat'];
- const lng = config['lng'];
-
- console.log(
- `${NAME}: setting up single lat/lng marker lat: ${lat} lng: ${lng}`,
- );
-
- Drv.addMarker([lng, lat], config);
- }
-
- el.classList.add(`${NAME}-active`);
-
- el.dispatchEvent(new Event(Events.MAPLOADED));
- console.log(`${NAME}: Map is loaded`);
}
- }
- const init = () => {
- console.log(`${NAME}: init`);
- document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
- const map = new MapAPI(el);
- });
- }
+ // auto-apply
+ window.addEventListener(`${Events.LODEDANDREADY}`, init);
+ window.addEventListener(`${Events.AJAX}`, init);
- // auto-apply
- window.addEventListener(`${Events.LODEDANDREADY}`, init);
- window.addEventListener(`${Events.AJAX}`, init);
-
- return MapAPI;
+ return MapAPI;
})(window);
export default MapAPI;
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 829fb50..1167d95 100755
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -5,6 +5,7 @@
// Your custom variables
@import '_variables';
+@import '_animations';
@import '~@a2nt/meta-lightbox-js/src/scss/app';
@import 'libs/bootstrap';
diff --git a/src/scss/layout/main/alerts.scss b/src/scss/layout/main/alerts.scss
index 8341110..38eb91f 100644
--- a/src/scss/layout/main/alerts.scss
+++ b/src/scss/layout/main/alerts.scss
@@ -1,5 +1,3 @@
-@import '../../_variables';
-
#SiteWideAlerts {
position: fixed;
bottom: 0;
diff --git a/src/scss/layout/main/base.scss b/src/scss/layout/main/base.scss
index 24ec8e1..ac32dbd 100644
--- a/src/scss/layout/main/base.scss
+++ b/src/scss/layout/main/base.scss
@@ -1,10 +1,3 @@
-/*
- * some basic styles
- */
-
-@import '../../_variables';
-@import '../../_animations';
-
html,
body {
min-height: 100%;
diff --git a/src/scss/layout/main/index.scss b/src/scss/layout/main/index.scss
index 976b77c..0098cde 100644
--- a/src/scss/layout/main/index.scss
+++ b/src/scss/layout/main/index.scss
@@ -1,6 +1,3 @@
-@import '../../_variables';
-@import '../../_animations';
-
@import './base';
@import './main';
@import './alerts';
diff --git a/src/scss/layout/main/states/index.scss b/src/scss/layout/main/states/index.scss
index 282b338..6bb12c0 100644
--- a/src/scss/layout/main/states/index.scss
+++ b/src/scss/layout/main/states/index.scss
@@ -1,5 +1,2 @@
-@import '../../../_variables';
-@import '../../../_animations';
-
@import './mobile';
@import './network';
diff --git a/src/scss/types/map.api.scss b/src/scss/types/map.api.scss
new file mode 100644
index 0000000..78bd5a6
--- /dev/null
+++ b/src/scss/types/map.api.scss
@@ -0,0 +1,2 @@
+@import '../_variables';
+@import '../ui/map.api';
diff --git a/src/scss/ui/lightbox.scss b/src/scss/ui/lightbox.scss
index a5efdad..918e878 100644
--- a/src/scss/ui/lightbox.scss
+++ b/src/scss/ui/lightbox.scss
@@ -1,5 +1,3 @@
-@import '../_variables';
-
/*$lightbox-breakpoint: map-get($grid-breakpoints, 'sm') !default;
$lightbox-link-hover-color: $link-hover-color !default;
diff --git a/src/scss/ui/map.api.scss b/src/scss/ui/map.api.scss
index 72bacf7..3faca33 100644
--- a/src/scss/ui/map.api.scss
+++ b/src/scss/ui/map.api.scss
@@ -1,6 +1,3 @@
-@import '../_variables';
-@import '../_animations';
-
//@import "~mapbox-gl/src/css/mapbox-gl.css";
$map-height: 30rem !default;
diff --git a/src/scss/ui/multislider.scss b/src/scss/ui/multislider.scss
index 493cc41..2ca0a98 100644
--- a/src/scss/ui/multislider.scss
+++ b/src/scss/ui/multislider.scss
@@ -1,55 +1,56 @@
-@import '../_variables';
$grid-gutter-element-height: 2rem !default;
.jsMultiSlider {
- position: relative;
- display: flex;
- margin-bottom: $grid-gutter-element-height/2;
+ position: relative;
+ display: flex;
+ margin-bottom: $grid-gutter-element-height/2;
- align-items: center;
- justify-content: center;
- min-width: 100%;
+ align-items: center;
+ justify-content: center;
+ min-width: 100%;
- &-active {
- margin-bottom: 0;
- }
+ &-active {
+ margin-bottom: 0;
+ }
- .slide {
- position: relative;
- padding: 0 0.5rem;
- }
+ .slide {
+ position: relative;
+ padding: 0 0.5rem;
+ }
}
.jsMultiSlider-container {
- position: relative;
- margin-bottom: $grid-gutter-element-height/2;
+ position: relative;
+ margin-bottom: $grid-gutter-element-height/2;
- .slider-actions {
- font-size: 2rem;
- .act {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- text-decoration: none;
- &-slider-prev {
- }
- &-slider-next {
- left: auto;
- right: 0;
- }
- }
- }
+ .slider-actions {
+ font-size: 2rem;
+
+ .act {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+
+ &-slider-prev {}
+
+ &-slider-next {
+ left: auto;
+ right: 0;
+ }
+ }
+ }
}
.jsMultiSlider-slides-container {
- overflow: hidden;
- margin: 0 2rem;
+ overflow: hidden;
+ margin: 0 2rem;
- > .slider-nav {
- position: relative;
- }
+ >.slider-nav {
+ position: relative;
+ }
}