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

Pick project from globe

Browse Source
This commit is contained in:
Franzz
2026-05-13 23:28:36 +02:00
parent c3835f45c5
commit 49f37465bd
9 changed files with 151 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/components/project.vue
View File

@@ -29,12 +29,13 @@ export default {
track: null,
markers: [],
markerProps: {
project: {mainClasses: 'project', iconMain: 'marker', iconSub: 'project'},
image: {mainClasses: 'media', iconMain: 'marker', iconSub: 'image'},
video: {mainClasses: 'media', iconMain: 'marker', iconSub: 'video'},
message: {mainClasses: 'message', iconMain: 'marker', iconSub: 'footprint', iconSubTransform: 'rotate-270'}
},
currProject: {},
modeHisto: false,
currProject: null,
modeHisto: null,
posts: [],
baseMaps: {},
baseMap: null,
@@ -63,8 +64,8 @@ export default {
}
},
'hash.items.0'(newProjectCodename, oldProjectCodename) {
if(newProjectCodename && newProjectCodename != oldProjectCodename) {
this.hash.items = [newProjectCodename];
if(newProjectCodename != oldProjectCodename) {
this.hash.items = newProjectCodename?[newProjectCodename]:[];
this.toggleSettingsPanel(false, 'none');
this.init();
}
@@ -82,9 +83,6 @@ export default {
};
},
inject: ['api', 'lang', 'hash', 'projects', 'user', 'consts', 'isMobile'],
beforeMount() {
if(this.hash.items.length == 0) this.hash.items[0] = this.projects.getDefaultCodeName();
},
mounted() {
this.init();
},
@@ -93,35 +91,47 @@ export default {
},
methods: {
async init() {
this.initProject();
this.initLightbox();
await Promise.all([
this.initFeed(),
this.initMap()
]);
//Direct link post action
if(this.hash.items.length == 3) await this.findPost(this.hash.items[1], this.hash.items[2]);
},
quit() {
this.lightbox.end();
this.$refs.feedSimpleBar.scrollElement.removeEventListener('scroll', this.onFeedScroll);
this.setFeedUpdateTimer(-1);
this.map.remove();
},
initProject() {
this.currProject = this.projects[this.hash.items[0]];
this.modeHisto = (this.currProject.mode == this.consts.modes.histo);
this.feed = {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true};
this.posts = [];
//this.baseMap = null;
this.baseMaps = {};
this.hikes.colors = {
'main': this.getStyleProperty('--track-main'),
'off-track': this.getStyleProperty('--track-off-track'),
'hitchhiking': this.getStyleProperty('--track-hitchhiking')
};
if(!this.hash.items[0] || !this.projects[this.hash.items[0]]) await this.initProjectOverview();
else await this.initProject();
},
quit() {
this.lightbox.end();
this.$refs.feedSimpleBar?.scrollElement.removeEventListener('scroll', this.onFeedScroll);
this.setFeedUpdateTimer(-1);
this.map.remove();
},
async initProjectOverview() {
this.setFeedUpdateTimer(-1);
this.currProject = null;
this.modeHisto = null;
this.feed = {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true};
this.posts = [];
this.baseMaps = this.consts.default_maps;
await this.initMapOverview();
},
async initProject() {
this.setFeedUpdateTimer(-1);
this.currProject = this.projects[this.hash.items[0]];
this.modeHisto = (this.currProject.mode == this.consts.modes.histo);
this.feed = {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true};
this.posts = [];
this.baseMaps = {};
await Promise.all([
this.initFeed(),
this.initMapProject()
]);
//Direct link post action
if(this.hash.items.length == 3) await this.findPost(this.hash.items[1], this.hash.items[2]);
},
initLightbox() {
if(!this.lightbox) {
@@ -149,7 +159,10 @@ export default {
}
},
async initFeed() {
await this.$nextTick();
//Simplebar event
this.$refs.feedSimpleBar?.scrollElement.removeEventListener('scroll', this.onFeedScroll);
this.$refs.feedSimpleBar?.scrollElement.addEventListener('scroll', this.onFeedScroll);
//Mobile Touchscreen Events
@@ -162,12 +175,12 @@ export default {
//Get first posts batch
await this.getNextFeed();
this.$refs.feedSimpleBar.scrollElement.scrollTop = 0;
if(this.$refs.feedSimpleBar) this.$refs.feedSimpleBar.scrollElement.scrollTop = 0;
//Start auto-update
if(!this.modeHisto) this.setFeedUpdateTimer(this.refreshRate);
},
async initMap() {
async initMapProject() {
//Start async calls
[
{
@@ -181,7 +194,51 @@ export default {
this.api.get('geojson', {id_project: this.currProject.id})
]);
//Build Map
await this.initMapBase({
setCamera: () => {
this.map.fitBounds(this.getInitialMapBounds(), {
padding: 20,
animate: false,
maxZoom: 15
});
},
addMarkers: () => {
this.addTrack(this.track);
this.markers.forEach(oMarker => this.addMarker(oMarker));
}
});
},
async initMapOverview() {
await this.initMapBase({
setCamera: () => {
//Center on default project
const oDefaultProject = this.projects.getDefaultProject();
//Adapt zoom to see whole planet
const $Canvas = this.map.getCanvas();
const iTargetRadius = Math.min($Canvas.clientWidth, $Canvas.clientHeight) / 2;
const iWorldSize = iTargetRadius * 2 * Math.PI * Math.cos(oDefaultProject.latitude * Math.PI / 180);
this.map.jumpTo({
center: new LngLat(oDefaultProject.longitude, oDefaultProject.latitude),
zoom: Math.log2(iWorldSize / this.map.transform.tileSize)
});
},
addMarkers: () => {
for(const asProject of Object.values(this.projects)) {
this.addMarker({
subtype: 'project',
longitude: asProject.longitude,
latitude: asProject.latitude,
opacityWhenCovered: 0.3
}, () => {
this.hash.items = [asProject.codename];
});
}
}
});
},
async initMapBase({setCamera, addMarkers}) {
if(this.map) this.map.remove();
this.map = new Map({
container: 'map',
@@ -200,17 +257,11 @@ export default {
},
attributionControl: false
});
this.updateMapPadding();
this.map.fitBounds(this.getInitialMapBounds(), {
padding: 20,
animate: false,
maxZoom: 15
});
setCamera();
this.map.addControl(new ScaleControl({unit: 'metric'}), 'bottom-right');
//Get default basemap
this.baseMap = this.baseMaps.find((asBM) => asBM.default_map)?.codename ?? null;
//Force wait for load event
await new Promise((resolve) => {
if(this.map.loaded()) resolve();
@@ -218,6 +269,7 @@ export default {
});
//Base maps (raster tiles)
this.baseMap = this.baseMaps.find((asBM) => asBM.default_map)?.codename ?? null;
for(const asBaseMap of this.baseMaps) {
this.map.addSource(asBaseMap.codename, {
type: 'raster',
@@ -233,14 +285,8 @@ export default {
maxZoom: asBaseMap.max_zoom
});
}
//Add track
this.addTrack(this.track);
//Add Markers
this.markers.forEach(oMarker => this.addMarker(oMarker));
//Force wait for idle event
addMarkers();
await new Promise((resolve) => {
if(this.map.loaded() && this.map.areTilesLoaded()) resolve();
else this.map.once('idle', resolve);
@@ -300,18 +346,19 @@ export default {
options: this.projects.getTrackInfo(oEvent.features[0], this.track, this.lang),
});
},
addMarker(oMarker) {
addMarker(oMarker, fClickCallback=null) {
const $Marker = document.createElement('div');
createApp(SpotIconStack, this.markerProps[oMarker.subtype]).mount($Marker);
new Marker({element: $Marker, anchor: 'bottom', opacityWhenCovered: 0})
new Marker({element: $Marker, anchor: 'bottom', opacityWhenCovered: oMarker.opacityWhenCovered ?? 0})
.setLngLat([oMarker.longitude, oMarker.latitude])
.addTo(this.map)
.getElement()
.addEventListener('click', (oEvent) => {
oEvent.preventDefault();
oEvent.stopPropagation();
this.openMarkerPopup(oMarker.id, oMarker.type);
if(fClickCallback) fClickCallback(oEvent, oMarker);
else this.openMarkerPopup(oMarker.id, oMarker.type);
});
},
openMarkerPopup(iMarkerId, sMarkerType) {
@@ -574,7 +621,7 @@ export default {
<div id="settings-panel" class="map-panel">
<div class="settings-header">
<div class="logo"><img width="289" height="72" src="images/logo_black.png" alt="Spotty" /></div>
<div id="last_update" v-if="this.currProject.mode == this.consts.modes.blog && lastUpdate.unix_time > 0">
<div id="last_update" v-if="this.currProject && this.currProject.mode == this.consts.modes.blog && lastUpdate.unix_time > 0">
<p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr :title="lastUpdate.formatted_time">{{ lang.get('feed.last_update')+' '+lastUpdate.relative_time }}</abbr></p>
</div>
</div>
@@ -625,18 +672,18 @@ export default {
<div :class="'map-control map-control-icon settings-control map-control-'+(isMobile()?'bottom':'top')" @click="toggleSettingsPanel">
<SpotIcon :icon="settingsPanelOpen?'prev':'menu'" />
</div>
<div v-if="!isMobile()" id="legend" class="map-control settings-control map-control-bottom">
<div v-if="currProject && !isMobile()" id="legend" class="map-control settings-control map-control-bottom">
<div v-for="(color, hikeType) in hikes.colors" class="track">
<span class="line" :style="'background-color:'+color+'; height:'+hikes.width+'px;'"></span>
<span class="desc">{{ lang.get('track.'+hikeType) }}</span>
</div>
</div>
<div id="title" :class="'map-control settings-control map-control-'+(isMobile()?'bottom':'top')">
<div v-if="currProject" id="title" :class="'map-control settings-control map-control-'+(isMobile()?'bottom':'top')">
<span>{{ currProject.name }}</span>
</div>
</div>
<div id="feed" class="map-container map-container-right" ref="feed">
<Simplebar id="feed-panel" class="map-panel" ref="feedSimpleBar">
<Simplebar v-if="currProject" id="feed-panel" class="map-panel" ref="feedSimpleBar">
<div id="feed-header">
<ProjectPost v-if="modeHisto" :options="{type: 'archived', headerless: true}" />
<ProjectPost v-else :options="{type: 'poster', relative_time: lang.get('post.new_message')}" />
@@ -648,7 +695,7 @@ export default {
<ProjectPost :options="{type: 'loading', headerless: true}" />
</div>
</Simplebar>
<div :class="'map-control map-control-icon feed-control map-control-'+(isMobile()?'bottom':'top')" @click="toggleFeedPanel">
<div v-if="currProject" :class="'map-control map-control-icon feed-control map-control-'+(isMobile()?'bottom':'top')" @click="toggleFeedPanel">
<SpotIcon :icon="feedPanelOpen?'next':'post'" />
</div>
</div>

1
src/scripts/projects.js
View File

@@ -13,7 +13,6 @@ export default class Projects {
}
getDefaultProject() {
const sCodeName = this.getDefaultCodeName();
return this[this.getDefaultCodeName()];
}

24
src/styles/_page.project.scss
View File

@@ -6,16 +6,16 @@
@use '@styles/page.project.feed' as feed;
@use '@styles/page.project.settings' as settings;
#projects {
--space: #{color.$space};
--horizon: #{color.$horizon};
--track-main: #{color.$main-track};
--track-off-track: #{color.$off-track};
--track-hitchhiking: #{color.$hitchhiking};
overflow: hidden;
position: absolute;
top: 0;
#projects {
--space: #{color.$space};
--horizon: #{color.$horizon};
--track-main: #{color.$main-track};
--track-off-track: #{color.$off-track};
--track-hitchhiking: #{color.$hitchhiking};
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@@ -56,7 +56,7 @@
filter: drop-shadow(0px 1px 1px color.$over-img-shadow);
}
&.message {
&.message, &.project {
.main {
color: color.$message-flashy;
}
@@ -83,4 +83,4 @@
}
}
}
}
}

4
src/styles/_page.project.settings.scss
View File

@@ -105,6 +105,10 @@
margin-left: var.$text-spacing;
@extend .clickable;
@include common.no-text-overflow();
&:hover {
color: color.$default-hover;
}
}
.download {