franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Rebuild panel navigation

Browse Source
This commit is contained in:
Franzz
2024-02-06 21:22:36 +01:00
parent b6fc305111
commit cab899e544
11 changed files with 800 additions and 713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/components/project.vue
View File

@@ -19,8 +19,8 @@ export default {
data() {
return {
server: this.spot.consts.server,
feedPanelOpen: this.spot.isMobile(),
settingsPanelOpen: true,
feedPanelOpen: false,
settingsPanelOpen: false,
markerSize: {width: 32, height: 32},
simpleBar: null,
project: {},
@@ -29,7 +29,10 @@ export default {
nlFeedbacks: [],
nlLoading: false,
feed: {loading:true, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0},
user: {name:'', email:''}
user: {name:'', email:''},
maps: {},
map: {},
hikeTypes: ['main', 'off-track', 'hitchhiking']
};
},
computed: {
@@ -50,6 +53,9 @@ export default {
},
nlAction() {
return this.subscribed?'unsubscribe':'subscribe';
},
mobile() {
return this.spot.isMobile();
}
},
inject: ['spot'],
@@ -74,8 +80,6 @@ export default {
initProject() {
this.project = this.spot.vars(['projects', this.$parent.hash.items[0]]);
this.modeHisto = (this.project.mode == this.spot.consts.modes.histo);
if(!this.spot.isMobile()) this.toggleFeedPanel(true, 'none');
},
initLightbox() {
lightbox.option({
@@ -156,56 +160,111 @@ export default {
if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) this.updateFeed();
*/
},
initMap() {
const map = new Map({
async initMap() {
/*
let asSources = {};
let asLayers = {};
for (const [sMapId, asMap] of Object.entries(aoMarkers.maps)) {
asSources.push({
type: 'raster',
tiles: [asMap.pattern],
tileSize: asMap.tile_size
});
asLayers.push({
});
}
*/
const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
this.map = new Map({
container: 'map',
style: {
version: 8,
sources: {
MIERUNEMAP: {
satellite: {
type: 'raster',
tiles: ['https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png'],
tileSize: 256,
attribution:
"Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
tiles: [aoMarkers.maps.satellite.pattern],
tileSize: aoMarkers.maps.satellite.tile_size
}
},
layers: [
{
id: 'MIERUNEMAP',
id: 'satellite',
type: 'raster',
source: 'MIERUNEMAP',
source: 'satellite',
minzoom: 0,
maxzoom: 18
}
]
},
center: [139.767, 35.681],
zoom: 11
center: [-122.45427081556572, 42.17865477384241],
zoom: 5
});
new Marker()
.setLngLat([-122.45427081556572, 42.17865477384241])
.addTo(this.map);
this.toggleFeedPanel(!this.mobile);
//Raster Tiles
this.map.once('load', async () => {
const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
this.maps = aoMarkers.maps;
for (const [sMapId, asMap] of Object.entries(this.maps)) {
if(sMapId=='satellite') continue;
this.map.addSource(sMapId, {
type: 'raster',
tiles: [asMap.pattern],
tileSize: asMap.tile_size
});
this.map.addLayer({
id: sMapId,
type: 'raster',
source: sMapId,
'layout': {
'visibility': 'none'
},
minZoom: asMap.min_zoom,
maxZoom: asMap.max_zoom
});
}
});
this.map.on('idle', () => {
});
//Legend
},
toggleFeedPanel(bShow, sMapAction) {
let bOldValue = this.feedPanelOpen;
this.feedPanelOpen = (typeof bShow === 'undefined')?(!this.feedPanelOpen):bShow;
this.feedPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.feedPanelOpen):bShow;
if(bOldValue != this.feedPanelOpen) {
this.spot.onResize();
sMapAction = sMapAction || 'panTo';
/* TODO
switch(sMapAction) {
case 'none':
break;
case 'panTo':
this.spot.tmp('map').panBy(
[(this.isFeedPanelOpen()?1:-1) * this.spot.tmp('$Feed').outerWidth(true) / 2, 0],
{duration: 0.5}
case 'panTo':
this.map.panBy(
[(this.feedPanelOpen?1:-1) * getOuterWidth(this.$refs.feed) / 2, 0],
{duration: 500}
);
break;
case 'panToInstant':
this.spot.tmp('map').panBy([(this.isFeedPanelOpen()?1:-1) * this.spot.tmp('$Feed').outerWidth(true) / 2, 0]);
this.map.panBy([(this.feedPanelOpen?1:-1) * getOuterWidth(this.$refs.feed) / 2, 0]);
break;
case 'fitBounds':
this.spot.tmp('map').fitBounds(
/*
this.map.fitBounds(
this.spot.tmp('track').getBounds(),
{
paddingTopLeft: L.point(5, this.spot.tmp('marker_size').height + 5),
@@ -213,8 +272,31 @@ export default {
}
);
break;
*/
}
}
},
toggleSettingsPanel(bShow, sMapAction) {
let bOldValue = this.settingsPanelOpen;
this.settingsPanelOpen = (typeof bShow === 'object' || typeof bShow === 'undefined')?(!this.settingsPanelOpen):bShow;
if(bOldValue != this.settingsPanelOpen) {
this.spot.onResize();
sMapAction = sMapAction || 'panTo';
switch(sMapAction) {
case 'none':
break;
case 'panTo':
this.map.panBy(
[(this.settingsPanelOpen?-1:1) * getOuterWidth(this.$refs.settings) / 2, 0],
{duration: 500}
);
break;
case 'panToInstant':
this.map.panBy([(this.settingsPanelOpen?-1:1) * getOuterWidth(this.$refs.settings) /2, 0]);
break;
}
*/
}
},
goToPost(oPost) {
@@ -241,8 +323,8 @@ export default {
<div class="loader fa fa-fw fa-map flicker"></div>
</div>
<div id="map"></div>
<div id="settings">
<div id="settings-panel">
<div id="settings" class="map-container map-container-left" ref="settings">
<div id="settings-panel" class="map-panel" ref="settingsPanel">
<div class="settings-header">
<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
<div id="last_update"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
@@ -255,7 +337,12 @@ export default {
</div>
<div class="settings-section">
<h1><SpotIcon :icon="'map fa-fw'" :text="spot.lang('maps')" /></h1>
<div id="layers"></div>
<div id="settings-layers">
<div class="layer" v-for="map in maps">
<input type="radio" :id="map.id_map" :name="map.codename" :value="map.codename" :checked="map.default" />
<label :for="map.codename">{{ this.spot.lang('map_'+map.codename) }}</label>
</div>
</div>
</div>
<div class="settings-section newsletter">
<h1><SpotIcon :icon="'newsletter fa-fw'" :text="spot.lang('newsletter')" /></h1>
@@ -280,9 +367,21 @@ export default {
<SpotIcon :icon="'credits'" :text="spot.lang('credits_project')" />
</a> {{ spot.lang('credits_license') }}</div>
</div>
<div :class="'map-control map-control-icon settings-control map-control-'+(mobile?'bottom':'top')" @click="toggleSettingsPanel">
<SpotIcon :icon="settingsPanelOpen?'prev':'menu'" />
</div>
<div v-if="!mobile" id="legend" class="map-control settings-control map-control-bottom">
<div v-for="hikeType in hikeTypes" class="track">
<span :class="'line '+hikeType"></span>
<span class="desc">{{ spot.lang('track_'+hikeType) }}</span>
</div>
</div>
<div id="title" :class="'map-control settings-control map-control-'+(mobile?'bottom':'top')">
<span>{{ project.name }}</span>
</div>
</div>
<div id="feed">
<div id="feed-panel" ref="feedPanel">
<div id="feed" class="map-container map-container-right" ref="feed">
<div id="feed-panel" class="map-panel" ref="feedPanel">
<div id="feed-header">
<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
<ProjectPost v-else :options="{type: 'poster', relative_time: spot.lang('post_new_message')}" />
@@ -294,6 +393,9 @@ export default {
<ProjectPost :options="{type: 'loading', headerless: true}" />
</div>
</div>
<div :class="'map-control map-control-icon feed-control map-control-'+(mobile?'bottom':'top')" @click="toggleFeedPanel">
<SpotIcon :icon="feedPanelOpen?'next':'post'" />
</div>
</div>
</div>
</template>

2
src/components/projectPost.vue
View File

@@ -116,8 +116,8 @@
<div :class="postClass" :id="postId">
<div class="header">
<span class="index">
<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="hash" :title="anchorTitle"><spotIcon :icon="anchorIcon" /></a>
<spotIcon :icon="subType" :text="displayedId" />
<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="hash" :title="anchorTitle"><spotIcon :icon="anchorIcon" /></a>
</span>
<span class="time" @mouseover="time = relTime" @mouseleave="time = timeDiff?spot.lang('your_time', absTime):absTime">{{ time }}</span>
</div>