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

Upgrade maplibre and fix goToPost

Browse Source
This commit is contained in:
Franzz
2024-02-10 23:12:57 +01:00
parent cab899e544
commit 869b084d70
15 changed files with 604 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/project.vue
View File

@@ -2,33 +2,37 @@
import 'maplibre-gl/dist/maplibre-gl.css';
import { Map, NavigationControl, Marker } from 'maplibre-gl';
import lightbox from '../scripts/lightbox.js';
import simplebar from 'simplebar-vue';
import SimpleBar from 'simplebar';
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';
import { registerRuntimeCompiler } from 'vue';
export default {
components: {
SpotIcon,
SpotButton,
ProjectPost
ProjectPost,
simplebar
},
data() {
return {
server: this.spot.consts.server,
feed: {loading:false, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0, firstChunk:true},
feedPanelOpen: false,
feedSimpleBar: null,
settingsPanelOpen: false,
markerSize: {width: 32, height: 32},
simpleBar: null,
project: {},
modeHisto: false,
posts: [],
nlFeedbacks: [],
nlLoading: false,
feed: {loading:true, updatable:true, outOfData:false, refIdFirst:0, refIdLast:0},
user: {name:'', email:''},
maps: {},
map: {},
@@ -58,6 +62,12 @@ export default {
return this.spot.isMobile();
}
},
provide() {
return {
user: this.user,
project: this.project
};
},
inject: ['spot'],
mounted() {
//Set default project
@@ -74,7 +84,15 @@ export default {
methods: {
initEvents() {
this.spot.addPage('project', {
//TODO
onResize() {
//this.spot.tmp('map_offset', -1 * (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0) / getOuterWidth(window));
/* TODO
if(typeof this.spot.tmp('elev') != 'undefined' && this.spot.tmp('elev')._showState) {
this.spot.tmp('elev').resize({width:this.getElevWidth()});
}
*/
}
});
},
initProject() {
@@ -82,7 +100,7 @@ export default {
this.modeHisto = (this.project.mode == this.spot.consts.modes.histo);
},
initLightbox() {
lightbox.option({
Lightbox.option({
alwaysShowNavOnTouchDevices: true,
albumLabel: '<i class="fa fa-fw fa-lg fa-media push"></i> %1 / %2',
fadeDuration: 300,
@@ -98,9 +116,8 @@ export default {
});
},
async initFeed() {
//Simplebar
this.simpleBar = new SimpleBar(this.$refs.feedPanel);
this.simpleBar.getScrollElement().addEventListener('scroll', (oEvent) => {this.onFeedScroll(oEvent);});
//Simplebar event
this.$refs.feedSimpleBar.scrollElement.addEventListener('scroll', (oEvent) => {this.onFeedScroll(oEvent);});
//Mobile Touchscreen Events
//TODO
@@ -108,38 +125,43 @@ export default {
//Add post Event handling
//TODO
await this.updateFeed(true, false);
await this.getNextFeed();
console.log('going to post');
//Scroll to post
if(this.$parent.hash.items.length == 3) this.goToPost({type: this.$parent.hash.items[1], id: this.$parent.hash.items[2]});
if(this.$parent.hash.items.length == 3) this.findPost({type: this.$parent.hash.items[1], id: this.$parent.hash.items[2]});
},
initSettings() {
//Scrollbar
new SimpleBar(this.$refs.settingsPanel);
this.user = this.spot.vars('user');
},
async updateFeed(bFirstChunk, bShowLoading) {
bFirstChunk = bFirstChunk || false;
bShowLoading = bShowLoading || true;
if(!this.feed.outOfData || bFirstChunk) {
async getNextFeed() {
if(!this.feed.outOfData && !this.feed.loading) {
//Get next chunk
if(bShowLoading) this.feed.loading = true;
this.feed.loading = true;
let aoData = await this.spot.get2('next_feed', {id_project: this.project.id, id: this.feed.refIdLast});
let iPostCount = Object.keys(aoData.feed).length;
this.feed.loading = false;
this.feed.firstChunk = false;
//Update pointers
this.feed.outOfData = (iPostCount < this.spot.vars('chunk_size'));
this.feed.outOfData = (iPostCount < this.spot.consts.chunk_size);
if(iPostCount > 0) {
this.feed.refIdLast = aoData.ref_id_last;
if(bFirstChunk) this.feed.refIdFirst = aoData.ref_id_first;
if(this.feed.firstChunk) this.feed.refIdFirst = aoData.ref_id_first;
}
//Add posts
this.posts.push(...aoData.feed);
}
return true;
},
onFeedScroll(oEvent) {
//FIXME remvove jquery dependency
var $Box = $(oEvent.currentTarget);
var $BoxContent = $Box.find('.simplebar-content');
if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) this.getNextFeed();
},
async manageSubs() {
var regexEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
@@ -153,13 +175,6 @@ export default {
.catch((sDesc) => {this.nlFeedbacks.push('error', sDesc);});
}
},
onFeedScroll(oEvent) {
/* TODO
var $Box = $(oEvent.currentTarget);
var $BoxContent = $Box.find('.simplebar-content');
if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) this.updateFeed();
*/
},
async initMap() {
/*
let asSources = {};
@@ -200,7 +215,8 @@ export default {
]
},
center: [-122.45427081556572, 42.17865477384241],
zoom: 5
zoom: 5,
attributionControl: false
});
new Marker()
@@ -211,7 +227,7 @@ export default {
//Raster Tiles
this.map.once('load', async () => {
const aoMarkers = await this.spot.get2('markers', {id_project: this.project.id});
//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;
@@ -240,6 +256,7 @@ export default {
//Legend
},
toggleFeedPanel(bShow, sMapAction) {
@@ -299,18 +316,30 @@ export default {
}
}
},
goToPost(oPost) {
/*
var sElemId = '#'+oPost.type+'-'+oPost.id;
var $Post = this.spot.tmp('$PostList').find(sElemId);
if($Post.length > 0) {
this.spot.tmp('simple-bar').getScrollElement().scrollTop += Math.round(
$Post.offset().top
- parseInt($('#feed-panel').css('padding-top'))
);
async findPost(oPost) {
if(this.goToPost(oPost)) {
//if(oPost.type=='media' || oPost.type=='message') $Post.find('a.drill').click();
}
else console.log('Missing element ID '+sElemId);
*/
else if(!this.feed.outOfData) {
await this.getNextFeed();
this.findPost(oPost);
}
else console.log('Missing element ID "'+oPost.id+'" of type "'+oPost.type+'"');
},
goToPost(oPost) {
//TODO remove jquery deps
let bFound = false;
let aoRefs = this.$refs.posts.filter((post)=>{return post.postId == oPost.type+'-'+oPost.id;});
if(aoRefs.length == 1) {
this.$refs.feedSimpleBar.scrollElement.scrollTop += Math.round(
$(aoRefs[0].$el).offset().top
- parseInt($(this.$refs.feedSimpleBar.$el).css('padding-top'))
);
bFound = true;
this.spot.flushHash(['post', 'message']);
}
return bFound;
}
}
}
@@ -324,13 +353,13 @@ export default {
</div>
<div id="map"></div>
<div id="settings" class="map-container map-container-left" ref="settings">
<div id="settings-panel" class="map-panel" ref="settingsPanel">
<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"><p><span><img src="images/spot-logo-only.svg" alt="" /></span><abbr></abbr></p></div>
</div>
<div class="settings-sections">
<div ref="settingsPanel" id="settings-sections-scrollbox">
<simplebar id="settings-sections-scrollbox">
<div class="settings-section">
<h1><SpotIcon :icon="'project fa-fw'" :text="spot.lang('hikes')" /></h1>
<div id="settings-projects"></div>
@@ -360,7 +389,7 @@ export default {
<SpotButton :text="spot.lang('admin_config')" :icon="'config'" href="#admin" />
<SpotButton :text="spot.lang('admin_upload')" :icon="'upload'" href="#upload" />
</div>
</div>
</simplebar>
</div>
<div class="settings-footer">
<a href="https://git.lutran.fr/franzz/spot" :title="spot.lang('credits_git')" target="_blank" rel="noopener">
@@ -381,18 +410,18 @@ export default {
</div>
</div>
<div id="feed" class="map-container map-container-right" ref="feed">
<div id="feed-panel" class="map-panel" ref="feedPanel">
<simplebar 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: spot.lang('post_new_message')}" />
</div>
<div id="feed-posts">
<ProjectPost v-for="post in posts" :options="post" />
<ProjectPost v-for="post in posts" :options="post" ref="posts" />
</div>
<div id="feed-footer" v-if="feed.loading">
<ProjectPost :options="{type: 'loading', headerless: true}" />
</div>
</div>
</simplebar>
<div :class="'map-control map-control-icon feed-control map-control-'+(mobile?'bottom':'top')" @click="toggleFeedPanel">
<SpotIcon :icon="feedPanelOpen?'next':'post'" />
</div>

38
src/components/projectPost.vue
View File

@@ -20,9 +20,10 @@
},
data() {
return {
time: '',
mouseOverHeader: false,
absTime: this.options.formatted_time,
absTimeLocal: this.options.formatted_time_local,
timeDiff: (this.options.formatted_time && this.options.formatted_time_local != this.options.formatted_time),
anchorVisible: ['message', 'media', 'post'].includes(this.options.type),
anchorTitle: this.spot.lang('copy_to_clipboard'),
anchorIcon: 'link'
@@ -40,23 +41,21 @@
return this.options.subtype || this.options.type;
},
displayedId() {
return this.options.displayed_id?(' '+this.spot.lang('counter', this.options.displayed_id)):'';
return this.options.displayed_id?(this.spot.lang('counter', this.options.displayed_id)):'';
},
hash() {
let asHash = this.spot.getHash();
return '#'+[asHash.page, asHash.items[0], this.options.type, this.options.id].join(this.spot.consts.hash_sep);
},
timeDiff() {
return (this.options.formatted_time && this.options.formatted_time_local != this.options.formatted_time);
},
modeHisto() {
return (this.$parent.project.mode==this.spot.consts.modes.histo);
return (this.project.mode==this.spot.consts.modes.histo);
},
relTime() {
return this.modeHisto?this.options.formatted_time.substr(0, 10):this.options.relative_time;
}
return this.modeHisto?(this.options.formatted_time || '').substr(0, 10):this.options.relative_time;
},
},
inject: ['spot'],
inject: ['spot', 'project', 'user'],
methods: {
copyAnchor() {
copyTextToClipboard(this.spot.consts.server+this.spot.hash());
@@ -105,9 +104,7 @@
},
mounted() {
//Auto-adjust text area height
if(this.options.type == 'poster') {
autosize(this.$refs.post);
}
if(this.options.type == 'poster') autosize(this.$refs.post);
}
}
</script>
@@ -115,11 +112,18 @@
<template>
<div :class="postClass" :id="postId">
<div class="header">
<span class="index">
<div class="index">
<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>
<a v-if="anchorVisible" class="link desktop" @click="copyAnchor" ref="anchor" :href="hash" :title="anchorTitle">
<spotIcon :icon="anchorIcon" />
</a>
</div>
<div class="time" @mouseleave="mouseOverHeader = false" @mouseover="mouseOverHeader = true" :title="timeDiff?spot.lang('local_time', absTimeLocal):''">
<Transition name="fade" mode="out-in">
<span v-if="mouseOverHeader">{{ timeDiff?spot.lang('your_time', absTime):absTime }}</span>
<span v-else>{{ relTime }}</span>
</Transition>
</div>
</div>
<div class="body">
<div v-if="options.type == 'message'" class="body-box" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
@@ -151,7 +155,7 @@
</div>
<p v-else-if="options.type == 'poster'" class="message">
<textarea ref="post" name="post" :placeholder="spot.lang('post_message')" class="autoExpand" rows="1" v-model="$parent.post"></textarea>
<input type="text" name="name" :placeholder="spot.lang('post_name')" v-model="$parent.user.name" />
<input type="text" name="name" :placeholder="spot.lang('post_name')" v-model="user.name" />
<spotButton name="submit" :aria-label="spot.lang('send')" :title="spot.lang('send')" :icon="'send'" />
</p>
<div v-else-if="options.type == 'archived'">

6
src/components/projectRelTime.vue
View File

@@ -11,10 +11,6 @@ export default {
<template>
<span>
{{ localTime.substr(-5) }}
<sup
v-if="iOffset != '0'"
:title="offset+' '+spot.lang('unit_day')+' ('+localTime.substr(0, 5)+')'"
>{{ ' '+offset }}</sup>
<sup v-if="offset != '0'" :title="offset+' '+spot.lang('unit_day')+' ('+localTime.substr(0, 5)+')'">{{ ' '+offset }}</sup>
</span>
</template>