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

Better handling of # variables + bump simplebar to v5.2.1

Browse Source
This commit is contained in:
Franzz
2020-08-16 10:34:49 +02:00
parent 354f824588
commit 75d64ed911
10 changed files with 117 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
languages/en.lang
View File

@@ -30,9 +30,9 @@ map_linz = LINZ (New Zealand)
map_usgs = USGS (USA)
map_natgeo = National Geographic (USA)
pic = Picture
pics = Pictures
pic_taken = taken on $0
image = Picture
images = Pictures
image_taken = taken on $0
video = Video
video_taken = shot on $0
add_on = added on $0

8
languages/fr.lang
View File

@@ -30,9 +30,9 @@ map_linz = LINZ (Nouvelle-Zélande)
map_usgs = USGS (États-Unis)
map_natgeo = National Geographic (États-Unis)
pic = Photo
pics = Photos
pic_taken = prise le $0
image = Photo
images = Photos
image_taken = prise le $0
video = Vidéo
video_taken = filmée le $0
add_on = ajoutée le $0
@@ -89,7 +89,7 @@ conf_preheader = Merci de rester en contact !
conf_thanks_sub = C'est tout bon !
conf_body_para_1 = C'est gentil de venir voir où j'en suis. Promis, je vous tiendrais au courant de mon avancée.
conf_body_para_2 = En général, j'envoie un message une fois par jour. Lorsque je passe à des endroits sympas, j'en envoie un supplémentaire (ascension de sommets, ce genre de choses). J'utilise une balise GPS pour envoyer le signal, je n'ai donc pas besoin de réseau téléphonique pour que cela fonctionne. Cependant, il peut m'arriver d'appuyer sur le bouton. Donc pas de raison de s'inquiéter si vous ne recevez pas de messages pendant une journée ou deux.
conf_body_para_3 = If I've posted some pictures recently, you should also get them in this email.
conf_body_para_3 = Si j'ai ajouté des photos sur le site récemment, vous devriez aussi les retrouver dans cet email.
conf_body_conclusion= A bientôt sur les chemins !
conf_signature = --François

60
masks/project.html
View File

@@ -140,6 +140,7 @@ function initPage(asHash) {
else {
self.tmp('$Projects', $('#projects'));
self.tmp('$Map', $('#map'));
self.tmp('$Poster', $('#poster'));
self.tmp('$PostList', $('#posts_list'));
self.tmp('$Feed', $('#feed'));
self.tmp('$Settings', $('#settings'));
@@ -233,7 +234,7 @@ function initProject(sProjectCodeName, oFocusPost){
//Show/Hide Poster Panel
var bHistoMode = (self.vars(['project', 'mode']) == self.consts.modes.histo);
$('#poster').toggle(!bHistoMode);
self.tmp('$Poster').toggle(!bHistoMode);
//Feed auto-update
updateFeed(true, false, function(){focusOnPost(oFocusPost);});
@@ -248,14 +249,14 @@ function initPosts() {
formatted_time: '',
relative_time: oSpot.lang('post_new_message')
};
$('#poster').append(getPost(asPoster));
self.tmp('$Poster').append(getPost(asPoster));
//Auto-adjust text area height
autosize($('#post'));
//Add post Event handling
$('#submit').click(function(){
if($('#poster').checkForm())
if(self.tmp('$Poster').checkForm())
{
self.get(
'add_post',
@@ -564,8 +565,11 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
//Centering map
var bWithFeedPanel = (!bNoFeed && !isMobile());
if(self.vars(['project', 'mode'])==self.consts.modes.blog && aoMessages.length > 0)
{
if(
self.vars(['project', 'mode']) == self.consts.modes.blog &&
aoMessages.length > 0 &&
self.getHash()[2] != 'message'
) {
//Zoom on last message
var oLastMsg = aoMessages[aoMessages.length-1];
oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15);
@@ -609,7 +613,7 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
$Medias.append(getMediaLink(asMedia, 'marker'));
});
$Tooltip
.append($('<p>').addIcon('fa-media fa-fw fa-lg').append(oSpot.lang('pics')))
.append($('<p>').addIcon('fa-media fa-fw fa-lg').append(oSpot.lang('images')))
.append($Medias);
}
@@ -735,15 +739,14 @@ function focusOnPost(oFocusPost) {
var $Post = oSpot.tmp('$PostList').find(sElemId);
var bGetToTop = (oSpot.tmp('$PostList').height() - (($Post.length > 0)?$Post.position().top:0) >= $(window).height());
if($Post.length > 0 && (bGetToTop || self.tmp('out-of-data'))) {
self.tmp('simple-bar').getScrollElement().scrollTop = $Post.position().top;
self.tmp('simple-bar').getScrollElement().scrollTop = $Post.position().top + self.tmp('$Poster').outerHeight(true);
if(oFocusPost.type=='media' || oFocusPost.type=='message') $Post.find('a.drill').click();
}
else if(!self.tmp('out-of-data')) updateFeed(false, false, function() {focusOnPost(oFocusPost);});
else console.log('Missing element ID '+sElemId);
//Reset Hash
var asHash = self.getHash();
self.setHash(asHash.page, [asHash.items[0]]);
flushHash(['post', 'message']);
}
}
@@ -768,6 +771,7 @@ function getPost(asPost) {
case 'message':
$Body = $('<div>', {'class':'body-box'})
.data('id', asPost.id_message)
.data('clicked', false)
.append($('<p>').addIcon('fa-coords', true).append(getGoogleMapsLink(asPost)))
.append($('<p>').addIcon('fa-time', true).append(sAbsTime))
.append((self.tmp('site_tz_notice')!='')?$('<p>').addIcon('fa-timezone', true).append(self.tmp('site_tz_notice')):'')
@@ -778,17 +782,19 @@ function getPost(asPost) {
.addIcon('fa-message fa-stack-2x')
)
.click(function(){
var oMarker = oSpot.tmp(['markers', $(this).parent().data('id')]);
var $Parent = $(this).parent();
var oMarker = oSpot.tmp(['markers', $Parent.data('id')]);
if(isMobile()) {
toggleFeedPanel(false, 'panToInstant');
self.tmp('map').setView(oMarker.getLatLng(), 15);
oSpot.tmp('map').setView(oMarker.getLatLng(), 15);
}
else {
var iOffset = (isFeedPanelOpen()?1:-1)*self.tmp('$Feed').outerWidth(true)/2 - (isSettingsPanelOpen()?1:-1)*self.tmp('$Settings').outerWidth(true)/2;
var iRatio = -1 * iOffset / $('body').outerWidth(true);
self.tmp('map').setOffsetView(iRatio, oMarker.getLatLng(), 15);
oSpot.tmp('map').setOffsetView(iRatio, oMarker.getLatLng(), 15);
}
$Parent.data('clicked', true);
if(!oMarker.isPopupOpen()) oMarker.openPopup();
})
)
@@ -799,7 +805,8 @@ function getPost(asPost) {
},
function(){
var oMarker = oSpot.tmp(['markers', $(this).data('id')]);
if(oMarker.isPopupOpen()) oMarker.closePopup();
if(oMarker.isPopupOpen() && !$(this).data('clicked')) oMarker.closePopup();
$(this).data('clicked', false);
}
);
break;
@@ -839,15 +846,13 @@ function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) {
}
function getMediaLink(asData, sType) {
var bVideo = (asData.subtype == 'video');
var $PostedOn =
$('<span>', {'class': 'lb-caption-line', title: oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang('add_on', asData.posted_on_formatted)})
$('<span>', {'class': 'lb-caption-line', title: oSpot.lang(asData.subtype)+' '+oSpot.lang('add_on', asData.posted_on_formatted)})
.addIcon('fa-upload fa-lg fa-fw', true)
.append(asData.posted_on_formatted);
var $TakenOn = (asData.taken_on == '0000-00-00 00:00:00')?'':
$('<span>', {'class': 'lb-caption-line', title: oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang(bVideo?'video_taken':'pic_taken', asData.taken_on_formatted)})
$('<span>', {'class': 'lb-caption-line', title: oSpot.lang(asData.subtype)+' '+oSpot.lang(asData.subtype+'_taken', asData.taken_on_formatted)})
.addIcon('fa-'+asData.subtype+'-shot fa-lg fa-fw', true)
.append(asData.taken_on_formatted);
@@ -862,12 +867,13 @@ function getMediaLink(asData, sType) {
'class': 'drill',
'href': asData.media_path,
'data-lightbox': sType+'-medias',
'data-video': (bVideo?'true':'false'),
'data-type': asData.subtype,
'data-id': asData.id_media,
'data-title': $Title.html(),
'data-orientation': asData.rotate
})
.append($('<img>', {'src': asData.thumb_path, title: oSpot.lang(bVideo?'click_watch':'click_zoom')}))
.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')));
.append($('<img>', {'src': asData.thumb_path, title: oSpot.lang((asData.subtype == 'video')?'click_watch':'click_zoom')}))
.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+asData.subtype));
return $Link;
}
@@ -880,4 +886,18 @@ function getGoogleMapsLink(asInfo) {
rel: 'noreferrer'
}).text(asInfo.lat_dms+' '+asInfo.lon_dms);
}
function updateHash(sType, iId) {
sType = sType || '';
iId = iId || 0;
var asHash = self.getHash();
if(iId) self.setHash(asHash.page, [asHash.items[0], sType, iId]);
}
function flushHash(asTypes) {
asTypes = asTypes || [];
var asHash = self.getHash();
if(asHash.items.length > 1 && (asTypes.length == 0 || asTypes.indexOf(asHash.items[1]) != -1)) self.setHash(asHash.page, [asHash.items[0]]);
}
</script>

4
script/jquery.mods.js
View File

File diff suppressed because one or more lines are too long

74
script/lightbox.js
View File

@@ -123,7 +123,7 @@
this.$container = this.$lightbox.find('.lb-container');
this.$image = this.$lightbox.find('.lb-image');
this.$nav = this.$lightbox.find('.lb-nav');
//ADDED-START
if(self.options.hasVideo) {
this.$video = $('<video class="lb-video" controls autoplay></video>');
@@ -136,7 +136,7 @@
};
}
//ADDED-END
// Store css values for future lookup
this.containerPadding = {
top: parseInt(this.$container.css('padding-top'), 10),
@@ -232,23 +232,23 @@
$window.on('resize', $.proxy(this.sizeOverlay, this));
this.sizeOverlay();
//ADDED-START
this.$nav.mousewheel((e) => {
var asImg = self.album[this.currentImageIndex];
if(!asImg.video) {
if(!asImg.type != 'video') {
asTransform = this.$image.css('transform').replace(/[^0-9\-.,]/g, '').split(',');
var fOldZoom = parseFloat(asTransform[0] || 1);
var fOldTranslateX = parseFloat(asTransform[4] || 0);
var fOldTranslateY = parseFloat(asTransform[5] || 0);
var fOldZoom = parseFloat(asTransform[0] || 1);
var fNewZoom = Math.min(Math.max(fOldZoom + e.deltaY / 10, 1), Math.max(asImg.width/this.$image.width(), asImg.height/this.$image.height()));
var fTransX = fOldTranslateX + (fNewZoom - fOldZoom) * (this.$image.width()/2 - e.offsetX);
var fTransY = fOldTranslateY + (fNewZoom - fOldZoom) * (this.$image.height()/2 - e.offsetY);
var fTransMaxX = (fNewZoom - 1) * this.$image.width() / 2;
var fTransMaxY = (fNewZoom - 1) * this.$image.height() / 2;
fTransX = Math.max(Math.min(fTransX, fTransMaxX), fTransMaxX * -1);
fTransY = Math.max(Math.min(fTransY, fTransMaxY), fTransMaxY * -1);
@@ -269,7 +269,8 @@
title: $link.attr('data-title') || $link.attr('title')
//ADDED-START
, orientation: $link.attr('data-orientation')
, video: (self.options.hasVideo && typeof $link.attr('data-video') !== 'undefined' && $link.attr('data-video') === 'true')
, type: $link.attr('data-type')
, id: $link.attr('data-id')
//ADDED-END
});
}
@@ -311,7 +312,7 @@
left: left + 'px'
})*/.fadeIn(this.options.fadeDuration);
//ADDED-END
// Disable scrolling of the page while open
if (this.options.disableScrolling) {
$('body').addClass('lb-disable-scrolling');
@@ -339,9 +340,9 @@
this.$image.css({'--scale': '1', '--translate-x': '0', '--translate-y': '0'});
self.$lightbox.find('.lb-dataContainer').css({width:'200px', height:'30px'});
//ADDED-END
this.$outerContainer.addClass('animating');
//ADDED-START
var getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
var iWindowWidth = $(window).width();
@@ -349,36 +350,38 @@
var oBorder = (sMediaType=='image')?self.imageBorderWidth:self.videoBorderWidth;
var iMaxMediaWidth = iWindowWidth - self.containerPadding.left - self.containerPadding.right - oBorder.left - oBorder.right;
var iMaxMediaHeight = iWindowHeight - self.containerPadding.top - self.containerPadding.bottom - oBorder.top - oBorder.bottom - self.options.positionFromTop;
var iDataMaxWidth = self.$lightbox.find('.lb-dataContainer').width(), iDataMaxHeight = self.$lightbox.find('.lb-dataContainer').height();
var iImageRatio = iMediaWidth / iMediaHeight;
//Case horizontal
var iHeightH = Math.min(iMaxMediaHeight, iMediaHeight);
var iWidthH = Math.min(iHeightH * iImageRatio, iMaxMediaWidth - iDataMaxWidth);
var iSurfaceH = Math.min(iHeightH, iWidthH / iImageRatio) * iWidthH;
//Case vertical
var iWidthV = Math.min(iMaxMediaWidth, iMediaWidth);
var iHeightV = Math.min(iWidthV / iImageRatio, iMaxMediaHeight - iDataMaxHeight);
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
var iSurfaceV = Math.min(iWidthV, iHeightV * iImageRatio) * iHeightV;
var sDirection = (iSurfaceV > iSurfaceH)?'vertical':'horizontal';
if(sDirection == 'vertical') iMaxMediaHeight -= iDataMaxHeight;
else iMaxMediaWidth -= iDataMaxWidth;
return {maxWidth: iMaxMediaWidth, maxHeight: iMaxMediaHeight, direction: sDirection};
};
updateHash('media', self.album[imageNumber].id);
if(self.options.hasVideo) {
var $lbContainer = this.$lightbox.find('.lb-container');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
if(self.album[imageNumber].video) {
if(self.album[imageNumber].type == 'video') {
this.$video.on('loadedmetadata', function(){
var $This = $(this);
var oMaxSizes = getMaxSizes(this.videoWidth, this.videoHeight, 'video');
maxVideoWidth = oMaxSizes.maxWidth;
maxVideoHeight = oMaxSizes.maxHeight;
@@ -394,7 +397,7 @@
maxVideoWidth = self.options.maxWidth || this.videoWidth || maxVideoWidth;
maxVideoHeight = self.options.maxHeight || this.videoHeight || maxVideoHeight;
}
//Is the current image's width or height is greater than the maxImageWidth or maxImageHeight
//option than we need to size down while maintaining the aspect ratio.
if((this.videoWidth > maxVideoWidth) || (this.videoHeight > maxVideoHeight)) {
@@ -412,14 +415,14 @@
}
$This.width(videoWidth);
$This.height(videoHeight);
self.sizeContainer($This.width(), $This.height(), 'video');
$This.off('loadedmetadata');
});
this.currentImageIndex = imageNumber;
this.$video.attr('src', self.album[imageNumber].link);
if(!$hasVideoNav) $lbContainer.addClass('lb-video-nav');
return;
}
@@ -447,7 +450,7 @@
});
$preloader = $(preloader);
//ADDED-START
if(Math.abs(self.album[imageNumber].orientation) == 90) {
var sWidth = preloader.width;
@@ -473,7 +476,7 @@
maxImageHeight = oMaxSizes.maxHeight;
self.$lightbox.removeClass('vertical horizontal').addClass(oMaxSizes.direction);
//ADDED-END
/*
SVGs that don't have width and height attributes specified are reporting width and height
values of 0 in Firefox 47 and IE11 on Windows. To fix, we set the width and height to the max
@@ -534,7 +537,7 @@
// Stretch overlay to fit the viewport
Lightbox.prototype.sizeOverlay = function(e) {
var self = this;
/*
We use a setTimeout 0 to pause JS execution and let the rendering catch-up.
Why do this? If the `disableScrolling` option is set to true, a class is added to the body
@@ -556,7 +559,7 @@
}
//ADDED-END
};
// Animate the size of the lightbox to fit the image we are showing
// This method also shows the the image.
//ADDED-START
@@ -575,7 +578,7 @@
var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + mediaBorderWidth.left + mediaBorderWidth.right;
var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + mediaBorderWidth.top + mediaBorderWidth.bottom;
//ADDED-END
function postResize() {
//ADDED-START
//self.$lightbox.find('.lb-dataContainer').width(newWidth);
@@ -606,13 +609,13 @@
// Display the image and its details and begin preload neighboring images.
Lightbox.prototype.showImage = function() {
this.$lightbox.find('.lb-loader').stop(true).hide();
//ADDED-START
//this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
if(this.options.hasVideo && this.album[this.currentImageIndex].video) this.$lightbox.find('.lb-video').fadeIn(this.options.imageFadeDuration);
if(this.options.hasVideo && this.album[this.currentImageIndex].type == 'video') this.$lightbox.find('.lb-video').fadeIn(this.options.imageFadeDuration);
else this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration);
//ADDED-END
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
@@ -743,17 +746,18 @@
// Closing time. :-(
Lightbox.prototype.end = function() {
this.disableKeyboardNav();
//ADDED-START
if(this.options.hasVideo) {
var $lbContainer = this.$lightbox.find('.lb-container');
var $hasVideoNav = $lbContainer.hasClass('lb-video-nav');
this.$video.attr('src', '');
if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
}
flushHash();
//ADDED-END
$(window).off('resize', this.sizeOverlay);
this.$nav.off('mousewheel');
this.$lightbox.fadeOut(this.options.fadeDuration);

6
style/_fa.scss
View File

@@ -14,7 +14,7 @@ $fa-css-prefix: fa;
.fa {
@extend .fas;
&.push {
margin-right: 0.5rem;
}
@@ -31,7 +31,7 @@ $fa-css-prefix: fa;
color: #CCC;
background: none;
@extend .fa;
&:hover {
color: white;
}
@@ -71,7 +71,7 @@ $fa-css-prefix: fa;
.#{$fa-css-prefix}-time:before { content: fa-content($fa-var-clock); }
.#{$fa-css-prefix}-coords:before { content: fa-content($fa-var-compass); }
.#{$fa-css-prefix}-drill-video:before { content: fa-content($fa-var-play-circle); }
.#{$fa-css-prefix}-drill-picture:before { content: fa-content($fa-var-search); }
.#{$fa-css-prefix}-drill-image:before { content: fa-content($fa-var-search); }
.#{$fa-css-prefix}-drill-message:before { content: fa-content($fa-var-search-location); }
.#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-cloud-upload); }
.#{$fa-css-prefix}-video-shot:before { content: fa-content($fa-var-camcorder); }

34
style/_mask_project.scss
View File

@@ -292,18 +292,24 @@ $legend-color: $post-color;
}
#poster {
textarea#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
display: inline-block;
input#name {
width: calc(100% - 6em);
}
.post-item {
margin-bottom: 0;
button#submit {
margin-left: 1em;
margin-bottom: 0.5em;
textarea#post {
margin-bottom: 1em;
width: calc(100% - 2em);
}
input#name {
width: calc(100% - 6em);
}
button#submit {
margin-left: 1em;
margin-bottom: 0.5em;
}
}
}
@@ -437,7 +443,7 @@ $legend-color: $post-color;
&.drill {
&:hover {
.drill-icon .fa-drill-picture, .drill-icon .fa-drill-video {
.drill-icon .fa-drill-image, .drill-icon .fa-drill-video {
color: rgba($media-bg, 0.75);
}
.comment {
@@ -448,7 +454,7 @@ $legend-color: $post-color;
.drill-icon {
font-size: 3em;
.fa-drill-picture {
.fa-drill-image {
color: transparent;
}
.fa-drill-video {
@@ -689,7 +695,7 @@ $legend-color: $post-color;
&.drill {
font-size: 2em;
.fa-drill-picture {
.fa-drill-image {
color: transparent;
}
.fa-drill-video {
@@ -697,7 +703,7 @@ $legend-color: $post-color;
}
&:hover {
.fa-drill-video, .fa-drill-picture {
.fa-drill-video, .fa-drill-image {
color: rgba(255, 255, 255, 0.75);
}
}

9
style/_simplebar.scss
View File

@@ -51,7 +51,6 @@
display: block;
height: 100%; /* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
width: auto;
visibility: visible;
max-width: 100%; /* Not required for horizontal scroll to trigger */
max-height: 100%; /* Needed for vertical scroll to trigger */
scrollbar-width: none;
@@ -132,8 +131,8 @@
.simplebar-scrollbar {
position: absolute;
right: 2px;
width: 7px;
left: 0;
right: 0;
min-height: 10px;
}
@@ -142,8 +141,8 @@
content: '';
background: black;
border-radius: 7px;
left: 0;
right: 0;
left: 2px;
right: 2px;
opacity: 0;
transition: opacity 0.2s linear;
}

2
style/spot.css
View File

File diff suppressed because one or more lines are too long

2
style/spot.css.map
View File

File diff suppressed because one or more lines are too long