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

Fix message event in feed

Browse Source
This commit is contained in:
Franzz
2026-01-16 21:46:51 +01:00
parent e7d4c840c2
commit b86d5d2cb1
2 changed files with 98 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/project.vue
View File

@@ -32,8 +32,8 @@ export default {
feedSimpleBar: null,
settingsPanelOpen: false,
markerSize: {width: 32, height: 32},
project: {},
projectCodename: null,
currProject: {},
currProjectCodeName: null,
modeHisto: false,
posts: [],
nlFeedbacks: [],
@@ -45,7 +45,8 @@ export default {
hikes: {
colors:{'main':'#00ff78', 'off-track':'#0000ff', 'hitchhiking':'#FF7814'},
width: 4
}
},
popup: null
};
},
computed: {
@@ -76,8 +77,8 @@ export default {
if(sOldBaseMap) this.map.setLayoutProperty(sOldBaseMap, 'visibility', 'none');
if(sNewBaseMap) this.map.setLayoutProperty(sNewBaseMap, 'visibility', 'visible');
},
projectCodename(sNewCodeName, sOldCodeName) {
//console.log('change in projectCodename: '+sNewCodeName);
currProjectCodeName(sNewCodeName, sOldCodeName) {
//console.log('change in currProjectCodeName: '+sNewCodeName);
//this.toggleSettingsPanel(false);
this.$parent.setHash(this.$parent.hash.page, [sNewCodeName]);
this.init();
@@ -85,7 +86,14 @@ export default {
},
provide() {
return {
project: this.project
map: {
panTo: this.panTo,
openMarkerPopup: this.openMarkerPopup
},
project: {
...this.$data,
toggleFeedPanel: this.toggleFeedPanel
}
};
},
inject: ['spot', 'projects', 'user'],
@@ -102,19 +110,19 @@ export default {
}
});
this.projectCodename = (this.$parent.hash.items.length==0)?this.spot.vars('default_project_codename'):this.$parent.hash.items[0];
this.currProjectCodeName = (this.$parent.hash.items.length==0)?this.spot.vars('default_project_codename'):this.$parent.hash.items[0];
},
methods: {
init() {
let bFirstLoad = (typeof this.project.codename == 'undefined');
let bFirstLoad = (typeof this.currProject.codename == 'undefined');
this.initProject();
if(bFirstLoad) this.initLightbox();
this.initFeed();
this.initMap();
},
initProject() {
this.project = this.projects[this.projectCodename];
this.modeHisto = (this.project.mode == this.spot.consts.modes.histo);
this.currProject = this.projects[this.currProjectCodeName];
this.modeHisto = (this.currProject.mode == this.spot.consts.modes.histo);
this.feed = {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true};
this.posts = [];
//this.baseMap = null;
@@ -153,7 +161,7 @@ export default {
},
async initMap() {
//Get Map Info
const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
const aoMarkers = await this.spot.get2('markers', {id_project: this.currProject.id});
this.baseMap = null;
this.baseMaps = aoMarkers.maps;
this.messages = aoMarkers.messages;
@@ -194,7 +202,7 @@ export default {
this.baseMap = this.baseMaps.filter((asBM) => asBM.default_map)[0].codename;
//Get track
const oTrack = await this.spot.get2('geojson', {id_project: this.project.id});
const oTrack = await this.spot.get2('geojson', {id_project: this.currProject.id});
this.map.addSource('track', {
'type': 'geojson',
'data': oTrack
@@ -237,38 +245,6 @@ export default {
'coordinates': [oMsg.longitude, oMsg.latitude]
}
});
//Tooltip
/*
let $Tooltip = $($('<div>', {'class':'info-window'})
.append($('<h1>')
.addIcon('fa-message fa-lg', true)
.append($('<span>').text(this.spot.lang('post_message')+' '+this.spot.lang('counter', oMsg.displayed_id)))
.append($('<span>', {'class':'message-type'}).text('('+oMsg.type+')'))
)
.append($('<div>', {'class':'separator'}))
.append($('<p>', {'class':'coordinates'})
.addIcon('fa-coords fa-fw fa-lg', true)
.append(this.getGoogleMapsLink(oMsg))
)
.append($('<p>', {'class':'time'})
.addIcon('fa-time fa-fw fa-lg', true)
.append(oMsg.formatted_time+(this.project.mode==this.spot.consts.modes.blog?' ('+oMsg.relative_time+')':''))))[0];
const vTooltip = h(SpotIcon, {icon:'project', 'classes':'fa-fw', text:'hikes'});
//let vTooltip = h(SpotIcon, {icon:'project', 'classes':'fa-fw', text:'hikes'});
oPopup.setDOMContent(vTooltip);
new Marker({
element: $('<div style="width:'+this.markerSize.width+'px;height:'+this.markerSize.height+'px;"><span class="fa-stack"><i class="fa fa-message fa-stack-2x"></i><i class="fa fa-message-in fa-rotate-270 fa-stack-1x"></i></span></div>')[0],
anchor: 'bottom'
})
.setLngLat(new LngLat(oMsg.longitude, oMsg.latitude))
.setPopup(oPopup)
.addTo(this.map)
;
*/
}
this.map.addSource('markers', aoMarkerSource);
const image = await this.map.loadImage('images/footprint_mapbox.png');
@@ -283,38 +259,16 @@ export default {
//'icon-overlap': 'always'
}
});
this.map.on("click", "markers", (e) => {
var oPopup = new Popup({
anchor: 'bottom',
offset: [0, this.markerSize.height * -1],
closeButton: false
})
.setHTML('<div id="popup"></div>')
.setLngLat(e.lngLat)
.addTo(this.map);
let rProp = ref(e.features[0].properties);console.log(rProp);
const vPopup = defineComponent({
extends: ProjectPopup,
setup: () => {
//console.log(rProp.value.medias);
provide('options', rProp.value);
provide('spot', this.spot);
provide('project', this.project);
return {'options': rProp.value, 'medias': JSON.parse(rProp.value.medias || '""'), 'spot':this.spot, 'project':this.project};
}
this.map.on('click', 'markers', (e) => {
this.openMarkerPopup(e.features[0]);
});
nextTick(() => {
createApp(vPopup).mount("#popup");
});
});
//Centering map
let bOpenFeedPanel = !this.mobile;
let oBounds = new LngLatBounds();
if(
this.project.mode == this.spot.consts.modes.blog &&
this.currProject.mode == this.spot.consts.modes.blog &&
this.messages.length > 0 &&
this.$parent.hash.items[2] != 'message'
) {
@@ -352,14 +306,69 @@ export default {
this.toggleFeedPanel(bOpenFeedPanel);
});
this.map.on('idle', () => {
});
this.map.on('idle', () => { });
//Legend
},
openMarkerPopup(oFeature) {
if(this.popup) {
this.popup.unmount();
this.popup = null;
}
//Convert ID Message to feature
if(typeof oFeature == 'number') {
const oMatchingFeatures = this.map.querySourceFeatures('markers', {
filter: ['==', ['get', 'id_message'], oFeature]
});
if(!oMatchingFeatures.length) {
console.warn('Marker not found: ', oFeature);
return;
}
else oFeature = oMatchingFeatures[0];
}
const $Popup = document.createElement('div');
const oPopup = new Popup({
anchor: 'bottom',
offset: [0, this.markerSize.height * -1],
closeButton: false
})
.setDOMContent($Popup)
.setLngLat(oFeature.geometry.coordinates)
.setMaxWidth(300)
.addTo(this.map);
const rProp = ref(oFeature.properties);
const vPopup = defineComponent({
extends: ProjectPopup,
setup: () => {
provide('spot', this.spot);
return {
options: rProp.value,
medias: JSON.parse(rProp.value.medias || '""'),
spot: this.spot,
project: this.currProject
};
}
});
nextTick(() => {
this.popup = createApp(vPopup);
this.popup.mount($Popup);
});
},
panTo(oLngLat, iZoom, fCallback) {
const iXOffset = (this.settingsPanelOpen?getOuterWidth(this.$refs.settings):0) - (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0);
this.map.easeTo({
center: oLngLat,
zoom: iZoom,
offset: [iXOffset / 2, 0],
duration: 500
});
setTimeout(fCallback, 500);
},
getGoogleMapsLink(asInfo) {
return $('<a>', {
@@ -373,7 +382,7 @@ export default {
if(!this.feed.outOfData && !this.feed.loading) {
//Get next chunk
this.feed.loading = true;
let aoData = await this.spot.get2('next_feed', {id_project: this.project.id, id: this.feed.refIdLast});
let aoData = await this.spot.get2('next_feed', {id_project: this.currProject.id, id: this.feed.refIdLast});
let iPostCount = Object.keys(aoData.feed).length;
this.feed.loading = false;
this.feed.firstChunk = false;
@@ -514,10 +523,10 @@ export default {
<h1><SpotIcon :icon="'project'" :classes="'fa-fw'" :text="spot.lang('hikes')" /></h1>
<div class="settings-section-body">
<div class="radio" v-for="project in projects">
<input type="radio" :id="project.id" :value="project.codename" v-model="projectCodename" />
<label :for="project.id">
<span>{{ project.name }}</span>
<a class="download" :href="project.gpxfilepath" :title="spot.lang('track_download')" @click.stop="()=>{}">
<input type="radio" :id="currProject.id" :value="currProject.codename" v-model="currProjectCodeName" />
<label :for="currProject.id">
<span>{{ currProject.name }}</span>
<a class="download" :href="currProject.gpxfilepath" :title="spot.lang('track_download')" @click.stop="()=>{}">
<SpotIcon :icon="'download'" :classes="'push-left'" />
</a>
</label>
@@ -566,7 +575,7 @@ export default {
</div>
</div>
<div id="title" :class="'map-control settings-control map-control-'+(mobile?'bottom':'top')">
<span>{{ project.name }}</span>
<span>{{ currProject.name }}</span>
</div>
</div>
<div id="feed" class="map-container map-container-right" ref="feed">

28
src/components/projectPost.vue
View File

@@ -4,6 +4,7 @@
import projectMediaLink from './projectMediaLink.vue';
import projectMapLink from './projectMapLink.vue';
import projectRelTime from './projectRelTime.vue';
import { LngLat } from 'maplibre-gl';
import autosize from 'autosize';
@@ -48,14 +49,14 @@
return '#'+[asHash.page, asHash.items[0], this.options.type, this.options.id].join(this.spot.consts.hash_sep);
},
modeHisto() {
return (this.project.mode==this.spot.consts.modes.histo);
return (this.project.currProject.mode==this.spot.consts.modes.histo);
},
relTime() {
return this.modeHisto?(this.options.formatted_time || '').substr(0, 10):this.options.relative_time;
},
},
inject: ['spot', 'project', 'user'],
inject: ['spot', 'project', 'user', 'map', 'project'],
methods: {
copyAnchor() {
copyTextToClipboard(this.spot.consts.server+this.spot.hash());
@@ -67,23 +68,12 @@
}, 5000);
},
panMapToMessage() {
//TODO
/*
var $Parent = $(oEvent.currentTarget).parent();
var oMarker = this.spot.tmp(['markers', $Parent.data('id')]);
if(this.isMobile()) {
this.toggleFeedPanel(false, 'panToInstant');
this.spot.tmp('map').setView(oMarker.getLatLng(), 15);
}
else {
var iOffset = (this.isFeedPanelOpen()?1:-1)*this.spot.tmp('$Feed').outerWidth(true)/2 - (this.isSettingsPanelOpen()?1:-1)*this.spot.tmp('$Settings').outerWidth(true)/2;
var iRatio = -1 * iOffset / $('body').outerWidth(true);
this.spot.tmp('map').setOffsetView(iRatio, oMarker.getLatLng(), 15);
}
$Parent.data('clicked', true);
if(!oMarker.isPopupOpen()) oMarker.openPopup();
*/
if(this.spot.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant');
this.map.panTo(
new LngLat(this.options.longitude, this.options.latitude),
15,
() => {this.map.openMarkerPopup(this.options.id_message);}
);
},
openMarkerPopup() {
//TODO