From 159361d5d1eb9939f84429ccdb53884a7e189b1d Mon Sep 17 00:00:00 2001 From: Tony Air Date: Mon, 9 Aug 2021 19:34:13 +0200 Subject: [PATCH] FIX: size optimizations --- src/js/ui/map.api.js | 198 ++++++++++++------------- src/scss/app.scss | 1 + src/scss/layout/main/alerts.scss | 2 - src/scss/layout/main/base.scss | 7 - src/scss/layout/main/index.scss | 3 - src/scss/layout/main/states/index.scss | 3 - src/scss/types/map.api.scss | 2 + src/scss/ui/lightbox.scss | 2 - src/scss/ui/map.api.scss | 3 - src/scss/ui/multislider.scss | 81 +++++----- 10 files changed, 142 insertions(+), 160 deletions(-) create mode 100644 src/scss/types/map.api.scss 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; + } }