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 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'] = '<i class="fas fa-map-marker-alt"></i>';
}
if (!config['icon']) {
config['icon'] = '<i class="fas fa-map-marker-alt"></i>';
}
console.log(`${NAME}: init ${Drv.getName()}...`);
ui.drv = Drv;
ui.el = el;
ui.config = config;
console.log(`${NAME}: init ${Drv.getName()}...`);
ui.drv = Drv;
ui.el = el;
ui.config = config;
Drv.init(el, config);
Drv.init(el, config);
el.addEventListener(Events.MAPAPILOADED, () => {
ui.addMarkers()
});
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;

1
src/scss/app.scss
View File

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

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

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

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

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

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

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

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

@ -1,5 +1,2 @@
@import '../../../_variables';
@import '../../../_animations';
@import './mobile';
@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-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";
$map-height: 30rem !default;

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

@ -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;
}
}