diff --git a/src/Spot.vue b/src/Spot.vue
index 069c516..809084a 100644
--- a/src/Spot.vue
+++ b/src/Spot.vue
@@ -12,73 +12,85 @@ const aoRoutes = {
export default {
data() {
return {
- hash: {},
+ hash: {page: '', items: []},
consts: this.spot.consts,
- user: this.spot.vars('user')
+ user: this.spot.vars('user'),
+ routes: aoRoutes
};
},
provide() {
return {
+ hash: this.hash,
projects: this.spot.vars('projects'),
consts: this.consts,
user: this.user
};
},
- inject: ['spot'],
computed: {
- page() {
- this.spot.vars('page', this.hash.page);
- return aoRoutes[this.hash.page];
+ route() {
+ return this.routes[this.hash.page];
+ },
+ hashSnapshot() {
+ return JSON.stringify(this.hash);
}
},
+ inject: ['spot'],
created() {
//User
this.user.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone || this.consts.default_timezone;
+
+ //Set initial page
+ let asInitHash = this.getHash();
+ if(!asInitHash.page) this.hash.page = this.spot.consts.default_page;
+ else this.hash = asInitHash;
},
mounted() {
- window.addEventListener('hashchange', () => {this.onHashChange();});
- var oEvent = new Event('hashchange');
- window.dispatchEvent(oEvent);
+ //Catch browser hash change
+ window.addEventListener('hashchange', this.onHashChange);
},
- methods: {
- _hash(hash, bReboot) {
- bReboot = bReboot || false;
- if(!hash) return window.location.hash.slice(1);
- else window.location.hash = '#'+hash;
+ watch: {
+ hashSnapshot(jNewHash, jOldHash) {
+ const asNewHash = JSON.parse(jNewHash);
+ const asOldHash = JSON.parse(jOldHash);
+ this.spot.vars('page', this.hash.page); //FIXME remove
- if(bReboot) location.reload();
- },
- onHashChange() {
- let asHash = this.getHash();
- if(asHash.hash !='' && asHash.page != '') {
- if(asHash.page == this.hash.page) this.spot.onSamePageMove(asHash);
- this.hash = asHash;
+ //Sync variable -> #hash
+ if(asNewHash != this.getHash()) {
+ this.setHash(asNewHash.page, asNewHash.items);
}
- else if(!this.hash.page) this.setHash(this.spot.consts.default_page);
- },
- getHash() {
- let sHash = this._hash();
- let asHash = sHash.split(this.spot.consts.hash_sep);
- let sPage = asHash.shift() || '';
- return {hash:sHash, page:sPage, items:asHash};
- },
- setHash(sPage, asItems, bReboot) {
- bReboot = bReboot || false;
- sPage = sPage || '';
- asItems = asItems || [];
- if(typeof asItems == 'string') asItems = [asItems];
- if(sPage != '') {
- let sItems = (asItems.length > 0)?this.spot.consts.hash_sep+asItems.join(this.spot.consts.hash_sep):'';
- this._hash(sPage+sItems, bReboot);
+ //Same Page change
+ if(asNewHash != asOldHash && asNewHash.page == asOldHash.page) {
+ this.spot.onSamePageMove(asNewHash, asOldHash);
}
}
+ },
+ methods: {
+ onHashChange() { //Sync #hash -> variable
+ let asHash = this.getHash();
+ if(asHash != this.hash) this.hash = asHash;
+ this.spot.vars('page', this.hash.page); //FIXME remove
+ },
+ getHash() {
+ let sHash = window.location.hash.slice(1);
+ let asHash = sHash.split(this.spot.consts.hash_sep);
+ let sPage = asHash.shift() || '';
+ return {page: sPage, items: asHash};
+ },
+ setHash(sPage = '', asItems = []) {
+ if(typeof asItems == 'string') asItems = [asItems];
+ const sItems = (asItems.length > 0)?(this.spot.consts.hash_sep + asItems.join(this.spot.consts.hash_sep)):'';
+ window.location.hash = '#' + sPage + sItems;
+ }
+ },
+ beforeUnmount() {
+ window.removeEventListener('hashchange', this.onHashChange)
}
}
-
+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/components/project.vue b/src/components/project.vue
index 08885cc..6a7a2fc 100644
--- a/src/components/project.vue
+++ b/src/components/project.vue
@@ -2,15 +2,13 @@
import 'maplibre-gl/dist/maplibre-gl.css';
import { Map, NavigationControl, Marker, LngLatBounds, LngLat, Popup } from 'maplibre-gl';
import { createApp, defineComponent, nextTick, ref, defineCustomElement, provide, inject } from 'vue';
-import simplebar from 'simplebar-vue';
+import Simplebar from 'simplebar-vue';
import autosize from 'autosize';
import mousewheel from 'jquery-mousewheel';
import waitforimages from 'jquery.waitforimages';
import lightbox from '../scripts/lightbox.js';
-//import SimpleBar from 'simplebar';
-
import SpotIcon from './spotIcon.vue';
import SpotButton from './spotButton.vue';
import ProjectPost from './projectPost.vue';
@@ -22,7 +20,7 @@ export default {
SpotButton,
ProjectPost,
ProjectPopup,
- simplebar
+ Simplebar
},
data() {
return {
@@ -35,7 +33,6 @@ export default {
settingsPanelOpen: false,
markerSize: {width: 32, height: 32},
currProject: {},
- currProjectCodeName: null,
modeHisto: false,
posts: [],
nlFeedbacks: [],
@@ -76,14 +73,11 @@ export default {
},
watch: {
baseMap(sNewBaseMap, sOldBaseMap) {
- if(sOldBaseMap) this.map.setLayoutProperty(sOldBaseMap, 'visibility', 'none');
- if(sNewBaseMap) this.map.setLayoutProperty(sNewBaseMap, 'visibility', 'visible');
+ if(this.map.isStyleLoaded()) {
+ if(sOldBaseMap) this.map.setLayoutProperty(sOldBaseMap, 'visibility', 'none');
+ if(sNewBaseMap) this.map.setLayoutProperty(sNewBaseMap, 'visibility', 'visible');
+ }
},
- currProjectCodeName(sNewCodeName, sOldCodeName) {
- //this.toggleSettingsPanel(false);
- if(this.$parent.hash.items.length==0) this.$parent.setHash(this.$parent.hash.page, [sNewCodeName]);
- this.init();
- }
},
provide() {
return {
@@ -96,7 +90,10 @@ export default {
project: this
};
},
- inject: ['spot', 'projects', 'user'],
+ inject: ['spot', 'hash', 'projects', 'user'],
+ beforeMount() {
+ if(this.$parent.hash.items.length == 0) this.$parent.hash.items[0] = this.spot.vars('default_project_codename');
+ },
mounted() {
this.spot.addPage('project', {
onResize: () => {
@@ -108,15 +105,25 @@ export default {
}
*/
},
+ onSamePageMove: (asNewHash, asOldHash) => {
+ //this.toggleSettingsPanel(false);
+ //this.quit();
+
+ //Check for project change
+ if(asNewHash.items[0] != asOldHash.items[0]) {
+ console.log('Project change: '+(asOldHash.items[0])+' ->', asNewHash.items[0]);
+ this.init();
+ }
+ },
onQuitPage: () => {
- this.setFeedUpdateTimer(-1);
+ this.quit();
}
});
- this.currProjectCodeName = (this.$parent.hash.items.length==0)?this.spot.vars('default_project_codename'):this.$parent.hash.items[0];
+ this.init();
},
beforeUnmount() {
- this.setFeedUpdateTimer(-1);
+ this.quit();
},
methods: {
init() {
@@ -126,8 +133,14 @@ export default {
this.initFeed();
this.initMap();
},
+ quit() {
+ lightbox.end();
+ this.$refs.feedSimpleBar.scrollElement.removeEventListener('scroll', (oEvent) => {this.onFeedScroll(oEvent);});
+ this.setFeedUpdateTimer(-1);
+ this.map.remove();
+ },
initProject() {
- this.currProject = this.projects[this.currProjectCodeName];
+ this.currProject = this.projects[this.$parent.hash.items[0]];
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 = [];
@@ -178,7 +191,7 @@ export default {
this.messages = aoMarkers.messages;
this.lastUpdate = aoMarkers.last_update;
- console.log(this.baseMaps);
+ //console.log(this.baseMaps);
//Base maps (raster tiles)
let asSources = {};
@@ -574,12 +587,12 @@ export default {