added inline map theme part

pull/49/head
A1Gard 5 months ago
parent 08a2340965
commit 86d77c031b

@ -61,7 +61,7 @@ document.addEventListener('DOMContentLoaded', function () {
});
}
// Remove event listener if you only want to alert once
this.removeEventListener('scroll', arguments.callee);
// this.removeEventListener('scroll', arguments.callee);
}
});

@ -0,0 +1,9 @@
<section id='InlineMap'>
<div id="mapContainer" @if(getSetting($data->area->name.'_'.$data->part.'_dark')) class="dark-mode" @endif>
</div>
@php($mapData = explode(',',getSetting($data->area->name.'_'.$data->part.'_loc')))
<input type="hidden" id="maplat" value="{{$mapData[0]}}">
<input type="hidden" id="maplng" value="{{$mapData[1]}}">
<input type="hidden" id="mapzoom" value="{{$mapData[2]}}">
</section>

@ -0,0 +1,22 @@
import L from 'leaflet';
var map,marker ;
window.addEventListener('load',function () {
const lat = parseFloat(document.querySelector('#maplat').value);
const lng = parseFloat(document.querySelector('#maplng').value);
const zoom = parseInt(document.querySelector('#mapzoom').value);
map = L.map(document.querySelector('#mapContainer')).setView([lat,lng], zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; openstreetmap',
attributionControl: false,
}).addTo(map);
map.attributionControl.setPrefix('xShop');
if (this.marker) {
map.removeLayer(marker);
}
marker = L.marker({lat: lat, lng: lng}).addTo(map);
});

@ -0,0 +1,10 @@
{
"name": "InlineMap",
"version": "1.0",
"author": "xStack",
"email": "xshop@xstack.ir",
"license": "GPL-3.0-or-later",
"url": "https:\/\/xstack.ir",
"author_url": "https:\/\/4xmen.ir",
"packages": []
}

@ -0,0 +1,41 @@
<?php
namespace Resources\Views\Segments;
use App\Models\Part;
use App\Models\Setting;
class InlineMap
{
public static function onAdd(Part $part = null)
{
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_loc';
$setting->value = '35.83266,50.99155,10';
$setting->size = 12;
$setting->type = 'LOCATION';
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
$setting->title = $part->area->name . ' ' . $part->part. ' location';
$setting->save();
$setting = new Setting();
$setting->section = 'theme';
$setting->key = $part->area->name . '_' . $part->part.'_dark';
$setting->value = 0;
$setting->size = 12;
$setting->type = 'CHECKBOX';
// $setting->data = json_encode(['xmin' => 2, 'xmax' => 90]);
$setting->title = $part->area->name . ' ' . $part->part. ' dark mode';
$setting->save();
}
public static function onRemove(Part $part = null)
{
Setting::where('key',$part->area->name . '_' . $part->part.'_loc')->first()?->delete();
Setting::where('key',$part->area->name . '_' . $part->part.'_dark')->first()?->delete();
}
public static function onMount(Part $part = null)
{
return $part;
}
}

@ -0,0 +1,12 @@
@import 'leaflet/dist/leaflet.css';
#InlineMap {
padding: 0;
margin: 0;
#mapContainer{
height: 400px;
&.dark-mode{
filter: invert(100%) hue-rotate(120deg) brightness(95%) contrast(90%);
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 502 KiB

@ -19,6 +19,8 @@ document.addEventListener('DOMContentLoaded', () => {
autoplayHoverPause: true,
mouseDrag: true,
gutter: 7,
slideBy: 1,
autoplayTimeout: 5000,
responsive:{
560:{
items: 1,
@ -54,6 +56,7 @@ document.addEventListener('DOMContentLoaded', () => {
mouseDrag: true,
gutter: 7,
edgePadding: 60,
slideBy: 1,
// speed:10000,
});
});
@ -74,6 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
mouseDrag: true,
gutter: 7,
edgePadding: 60,
slideBy: 1,
// speed:10000,
});
});

@ -17,6 +17,8 @@ document.addEventListener('DOMContentLoaded', () => {
controls: false,
autoplayHoverPause: true,
mouseDrag: true,
slideBy: 1,
autoplayTimeout: 5000,
// speed:10000,
});
});

@ -1,6 +1,7 @@
.SliderSimple {
// scss
.item{
height: 100vh;
position: relative;
.desc{
position: absolute;
@ -17,5 +18,7 @@
}
img{
width: 100%;
height: 100vh;
object-fit: cover;
}
}

Loading…
Cancel
Save