Fix direct link to post
This commit is contained in:
@@ -125,12 +125,18 @@ export default {
|
||||
this.quit();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
async init() {
|
||||
let bFirstLoad = (typeof this.currProject.codename == 'undefined');
|
||||
this.initProject();
|
||||
if(bFirstLoad) this.initLightbox();
|
||||
this.initFeed();
|
||||
this.initMap();
|
||||
|
||||
await Promise.all([
|
||||
this.initFeed(),
|
||||
this.initMap()
|
||||
]);
|
||||
|
||||
//Direct link: Scroll to post
|
||||
if(this.$parent.hash.items.length == 3) this.findPost({type: this.$parent.hash.items[1], id: this.$parent.hash.items[2]});
|
||||
},
|
||||
quit() {
|
||||
lightbox.end();
|
||||
@@ -176,9 +182,6 @@ export default {
|
||||
await this.getNextFeed();
|
||||
this.$refs.feedSimpleBar.scrollElement.scrollTop = 0;
|
||||
|
||||
//Scroll to post
|
||||
if(this.$parent.hash.items.length == 3) this.findPost({type: this.$parent.hash.items[1], id: this.$parent.hash.items[2]});
|
||||
|
||||
//Start auto-update
|
||||
if(!this.modeHisto) this.setFeedUpdateTimer(this.refreshRate);
|
||||
},
|
||||
@@ -223,104 +226,109 @@ export default {
|
||||
attributionControl: false
|
||||
});
|
||||
|
||||
this.map.once('load', async () => {
|
||||
//Default Basemap
|
||||
this.baseMap = this.baseMaps.filter((asBM) => asBM.default_map)[0].codename;
|
||||
|
||||
//Get track
|
||||
const oTrack = await this.spot.get2('geojson', {id_project: this.currProject.id});
|
||||
this.map.addSource('track', {
|
||||
'type': 'geojson',
|
||||
'data': oTrack
|
||||
});
|
||||
|
||||
//Color mapping
|
||||
let asColorMapping = ['match', ['get', 'type']];
|
||||
for(const sHikeType in this.hikes.colors) {
|
||||
asColorMapping.push(sHikeType);
|
||||
asColorMapping.push(this.hikes.colors[sHikeType]);
|
||||
}
|
||||
asColorMapping.push('black'); //fallback value
|
||||
|
||||
//Track layer
|
||||
this.map.addLayer({
|
||||
'id': 'track',
|
||||
'type': 'line',
|
||||
'source': 'track',
|
||||
'layout': {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round'
|
||||
},
|
||||
'paint': {
|
||||
'line-color': asColorMapping,
|
||||
'line-width': this.hikes.width
|
||||
}
|
||||
});
|
||||
|
||||
//Markers
|
||||
this.map.addImage('markerIcon', (await this.map.loadImage('images/footprint_mapbox.png')).data);
|
||||
this.map.addSource('markers', {
|
||||
type:'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: this.convertMsgToFeatures(this.messages)
|
||||
}
|
||||
});
|
||||
this.map.addLayer({
|
||||
'id': 'markers',
|
||||
'type': 'symbol',
|
||||
'source': 'markers',
|
||||
'layout': {'icon-image': 'markerIcon'}
|
||||
});
|
||||
this.map.on('click', 'markers', (e) => {
|
||||
this.openMarkerPopup(e.features[0]);
|
||||
});
|
||||
|
||||
//Centering map
|
||||
let bOpenFeedPanel = !this.mobile;
|
||||
let oBounds = new LngLatBounds();
|
||||
if(
|
||||
this.currProject.mode == this.spot.consts.modes.blog &&
|
||||
this.messages.length > 0 &&
|
||||
this.$parent.hash.items[2] != 'message'
|
||||
) {
|
||||
//Fit to last message
|
||||
let oLastMsg = this.messages[this.messages.length - 1];
|
||||
oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude));
|
||||
}
|
||||
else {
|
||||
//Fit to track
|
||||
for(const iFeatureId in oTrack.features) {
|
||||
oBounds = oTrack.features[iFeatureId].geometry.coordinates.reduce(
|
||||
(bounds, coord) => {
|
||||
return bounds.extend(coord);
|
||||
},
|
||||
oBounds
|
||||
);
|
||||
}
|
||||
}
|
||||
const iFeedPanelPadding = bOpenFeedPanel?(getOuterWidth(this.$refs.feed)/2):0;
|
||||
await this.map.fitBounds(
|
||||
oBounds,
|
||||
{
|
||||
padding: {
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
left: (20 + iFeedPanelPadding),
|
||||
right: (20 + iFeedPanelPadding)
|
||||
},
|
||||
animate: false,
|
||||
maxZoom: 15
|
||||
}
|
||||
);
|
||||
|
||||
//Toggle only when map is ready, for the tilt effet
|
||||
this.toggleFeedPanel(bOpenFeedPanel);
|
||||
//Force wait for load event
|
||||
await new Promise((resolve) => {
|
||||
if(this.map.loaded()) resolve();
|
||||
else this.map.once('load', resolve);
|
||||
});
|
||||
|
||||
this.map.on('idle', () => { });
|
||||
//Default Basemap
|
||||
this.baseMap = this.baseMaps.filter((asBM) => asBM.default_map)[0].codename;
|
||||
|
||||
//Legend
|
||||
//Get track
|
||||
const oTrack = await this.spot.get2('geojson', {id_project: this.currProject.id});
|
||||
this.map.addSource('track', {
|
||||
'type': 'geojson',
|
||||
'data': oTrack
|
||||
});
|
||||
|
||||
//Color mapping
|
||||
let asColorMapping = ['match', ['get', 'type']];
|
||||
for(const sHikeType in this.hikes.colors) {
|
||||
asColorMapping.push(sHikeType);
|
||||
asColorMapping.push(this.hikes.colors[sHikeType]);
|
||||
}
|
||||
asColorMapping.push('black'); //fallback value
|
||||
|
||||
//Track layer
|
||||
this.map.addLayer({
|
||||
'id': 'track',
|
||||
'type': 'line',
|
||||
'source': 'track',
|
||||
'layout': {
|
||||
'line-join': 'round',
|
||||
'line-cap': 'round'
|
||||
},
|
||||
'paint': {
|
||||
'line-color': asColorMapping,
|
||||
'line-width': this.hikes.width
|
||||
}
|
||||
});
|
||||
|
||||
//Markers
|
||||
this.map.addImage('markerIcon', (await this.map.loadImage('images/footprint_mapbox.png')).data);
|
||||
this.map.addSource('markers', {
|
||||
type:'geojson',
|
||||
data: {
|
||||
type: 'FeatureCollection',
|
||||
features: this.convertMsgToFeatures(this.messages)
|
||||
}
|
||||
});
|
||||
this.map.addLayer({
|
||||
'id': 'markers',
|
||||
'type': 'symbol',
|
||||
'source': 'markers',
|
||||
'layout': {'icon-image': 'markerIcon'}
|
||||
});
|
||||
this.map.on('click', 'markers', (e) => {
|
||||
this.openMarkerPopup(e.features[0]);
|
||||
});
|
||||
|
||||
//Centering map
|
||||
let bOpenFeedPanel = !this.mobile;
|
||||
let oBounds = new LngLatBounds();
|
||||
if(
|
||||
this.currProject.mode == this.spot.consts.modes.blog &&
|
||||
this.messages.length > 0 &&
|
||||
this.$parent.hash.items[2] != 'message'
|
||||
) {
|
||||
//Fit to last message
|
||||
let oLastMsg = this.messages[this.messages.length - 1];
|
||||
oBounds.extend(new LngLat(oLastMsg.longitude, oLastMsg.latitude));
|
||||
}
|
||||
else {
|
||||
//Fit to track
|
||||
for(const iFeatureId in oTrack.features) {
|
||||
oBounds = oTrack.features[iFeatureId].geometry.coordinates.reduce(
|
||||
(bounds, coord) => {
|
||||
return bounds.extend(coord);
|
||||
},
|
||||
oBounds
|
||||
);
|
||||
}
|
||||
}
|
||||
const iFeedPanelPadding = bOpenFeedPanel?(getOuterWidth(this.$refs.feed)/2):0;
|
||||
await this.map.fitBounds(
|
||||
oBounds,
|
||||
{
|
||||
padding: {
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
left: (20 + iFeedPanelPadding),
|
||||
right: (20 + iFeedPanelPadding)
|
||||
},
|
||||
animate: false,
|
||||
maxZoom: 15
|
||||
}
|
||||
);
|
||||
|
||||
//Toggle only when map is ready, for the tilt effet
|
||||
this.toggleFeedPanel(bOpenFeedPanel);
|
||||
|
||||
//Force wait for idle event
|
||||
await new Promise((resolve) => {
|
||||
this.map.once('idle', resolve);
|
||||
});
|
||||
},
|
||||
convertMsgToFeatures(oMsg) {
|
||||
return oMsg.map(oMsg => ({
|
||||
@@ -453,13 +461,14 @@ export default {
|
||||
},
|
||||
panToBetweenPanels(oLngLat, iZoom, fCallback) {
|
||||
const iXOffset = (this.settingsPanelOpen?getOuterWidth(this.$refs.settings):0) - (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0);
|
||||
|
||||
this.map.once('moveend', fCallback);
|
||||
this.map.easeTo({
|
||||
center: oLngLat,
|
||||
zoom: iZoom,
|
||||
offset: [iXOffset / 2, 0],
|
||||
duration: 500
|
||||
});
|
||||
setTimeout(fCallback, 500);
|
||||
},
|
||||
isMarkerVisible(oLngLat){
|
||||
return this.map.getBounds().contains(oLngLat);
|
||||
@@ -561,7 +570,7 @@ export default {
|
||||
- parseFloat(getComputedStyle(this.$refs.feedSimpleBar.$el).paddingTop)
|
||||
);
|
||||
aoRefs[0].executeMainAction();
|
||||
this.spot.flushHash(['post', 'message']);
|
||||
//this.spot.flushHash(['post', 'message']);
|
||||
bFound = true;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user