tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

FIX: size optimizations

Browse Source
This commit is contained in:
Tony Air 2021-08-09 19:34:13 +02:00
parent 9ca19049c7
commit 159361d5d1
10 changed files with 142 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/js/ui/map.api.js
View File

@ -3,120 +3,118 @@
import Events from '../_events'; import Events from '../_events';
import Consts from 'js/_consts'; import Consts from 'js/_consts';
import '../../scss/ui/map.api.scss';
const MapAPI = ((window) => { const MapAPI = ((window) => {
// Constants // Constants
const NAME = 'js-mapapi'; const NAME = 'js-mapapi';
const MAP_DRIVER = Consts['MAP_DRIVER']; const MAP_DRIVER = Consts['MAP_DRIVER'];
class MapAPI { class MapAPI {
// Constructor // Constructor
constructor(el) { constructor(el) {
const ui = this; const ui = this;
const Drv = new MAP_DRIVER(); const Drv = new MAP_DRIVER();
const BODY = document.querySelector('body'); const BODY = document.querySelector('body');
const config = el.dataset; const config = el.dataset;
config['center'] = [ config['center'] = [
config['lng'] ? config['lng'] : BODY.dataset['default-lng'], config['lng'] ? config['lng'] : BODY.dataset['default-lng'],
config['lat'] ? config['lat'] : BODY.dataset['default-lat'], config['lat'] ? config['lat'] : BODY.dataset['default-lat'],
]; ];
/*config['style'] = config['style'] ? /*config['style'] = config['style'] ?
jQuery.parseJSON(config['style']) : jQuery.parseJSON(config['style']) :
null; null;
config['font-family'] = $BODY.css('font-family');*/ config['font-family'] = $BODY.css('font-family');*/
if (!config['icon']) { if (!config['icon']) {
config['icon'] = '<i class="fas fa-map-marker-alt"></i>'; config['icon'] = '<i class="fas fa-map-marker-alt"></i>';
} }
console.log(`${NAME}: init ${Drv.getName()}...`); console.log(`${NAME}: init ${Drv.getName()}...`);
ui.drv = Drv; ui.drv = Drv;
ui.el = el; ui.el = el;
ui.config = config; ui.config = config;
Drv.init(el, config); Drv.init(el, config);
el.addEventListener(Events.MAPAPILOADED, () => { el.addEventListener(Events.MAPAPILOADED, () => {
ui.addMarkers() ui.addMarkers()
}); });
}
// Public methods
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 const init = () => {
getMap() { console.log(`${NAME}: init`);
return ui.map; document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
} const map = new MapAPI(el);
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`);
} }
}
const init = () => { // auto-apply
console.log(`${NAME}: init`); window.addEventListener(`${Events.LODEDANDREADY}`, init);
document.querySelectorAll(`.${NAME}`).forEach((el, i) => { window.addEventListener(`${Events.AJAX}`, init);
const map = new MapAPI(el);
});
}
// auto-apply return MapAPI;
window.addEventListener(`${Events.LODEDANDREADY}`, init);
window.addEventListener(`${Events.AJAX}`, init);
return MapAPI;
})(window); })(window);
export default MapAPI; export default MapAPI;

1
src/scss/app.scss
View File

@ -5,6 +5,7 @@
// Your custom variables // Your custom variables
@import '_variables'; @import '_variables';
@import '_animations';
@import '~@a2nt/meta-lightbox-js/src/scss/app'; @import '~@a2nt/meta-lightbox-js/src/scss/app';
@import 'libs/bootstrap'; @import 'libs/bootstrap';

2
src/scss/layout/main/alerts.scss
View File

@ -1,5 +1,3 @@
@import '../../_variables';
#SiteWideAlerts { #SiteWideAlerts {
position: fixed; position: fixed;
bottom: 0; bottom: 0;

7
src/scss/layout/main/base.scss
View File

@ -1,10 +1,3 @@
/*
* some basic styles
*/
@import '../../_variables';
@import '../../_animations';
html, html,
body { body {
min-height: 100%; min-height: 100%;

3
src/scss/layout/main/index.scss
View File

@ -1,6 +1,3 @@
@import '../../_variables';
@import '../../_animations';
@import './base'; @import './base';
@import './main'; @import './main';
@import './alerts'; @import './alerts';

3
src/scss/layout/main/states/index.scss
View File

@ -1,5 +1,2 @@
@import '../../../_variables';
@import '../../../_animations';
@import './mobile'; @import './mobile';
@import './network'; @import './network';

2
src/scss/types/map.api.scss Normal file
View File

@ -0,0 +1,2 @@
@import '../_variables';
@import '../ui/map.api';

2
src/scss/ui/lightbox.scss
View File

@ -1,5 +1,3 @@
@import '../_variables';
/*$lightbox-breakpoint: map-get($grid-breakpoints, 'sm') !default; /*$lightbox-breakpoint: map-get($grid-breakpoints, 'sm') !default;
$lightbox-link-hover-color: $link-hover-color !default; $lightbox-link-hover-color: $link-hover-color !default;

3
src/scss/ui/map.api.scss
View File

@ -1,6 +1,3 @@
@import '../_variables';
@import '../_animations';
//@import "~mapbox-gl/src/css/mapbox-gl.css"; //@import "~mapbox-gl/src/css/mapbox-gl.css";
$map-height: 30rem !default; $map-height: 30rem !default;

81
src/scss/ui/multislider.scss
View File

@ -1,55 +1,56 @@
@import '../_variables';
$grid-gutter-element-height: 2rem !default; $grid-gutter-element-height: 2rem !default;
.jsMultiSlider { .jsMultiSlider {
position: relative; position: relative;
display: flex; display: flex;
margin-bottom: $grid-gutter-element-height/2; margin-bottom: $grid-gutter-element-height/2;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 100%; min-width: 100%;
&-active { &-active {
margin-bottom: 0; margin-bottom: 0;
} }
.slide { .slide {
position: relative; position: relative;
padding: 0 0.5rem; padding: 0 0.5rem;
} }
} }
.jsMultiSlider-container { .jsMultiSlider-container {
position: relative; position: relative;
margin-bottom: $grid-gutter-element-height/2; margin-bottom: $grid-gutter-element-height/2;
.slider-actions { .slider-actions {
font-size: 2rem; font-size: 2rem;
.act {
position: absolute; .act {
top: 0; position: absolute;
bottom: 0; top: 0;
left: 0; bottom: 0;
display: flex; left: 0;
align-items: center; display: flex;
justify-content: center; align-items: center;
text-decoration: none; justify-content: center;
&-slider-prev { text-decoration: none;
}
&-slider-next { &-slider-prev {}
left: auto;
right: 0; &-slider-next {
} left: auto;
} right: 0;
} }
}
}
} }
.jsMultiSlider-slides-container { .jsMultiSlider-slides-container {
overflow: hidden; overflow: hidden;
margin: 0 2rem; margin: 0 2rem;
> .slider-nav { >.slider-nav {
position: relative; position: relative;
} }
} }