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

languages/en.lang

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

languages/fr.lang

@@ -30,9 +30,9 @@ map_linz			= LINZ (Nouvelle-Zélande)
 map_usgs			= USGS (États-Unis)
 map_natgeo			= National Geographic (États-Unis)
 
-pic					= Photo
+image				= Photo
-pics				= Photos
+images				= Photos
-pic_taken			= prise le $0
+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
 

masks/project.html

@@ -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();
+		flushHash(['post', 'message']);
-		self.setHash(asHash.page, [asHash.items[0]]);
 	}
 }
 
@@ -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($('<img>', {'src': asData.thumb_path, title: oSpot.lang((asData.subtype == 'video')?'click_watch':'click_zoom')}))
-		.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')));
+		.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>

script/lightbox.js

@@ -236,7 +236,7 @@
     //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);
@@ -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
       });
     }
@@ -371,11 +372,13 @@
     	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);
 
@@ -609,7 +612,7 @@
 
     //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
 
@@ -752,6 +755,7 @@
 
         if($hasVideoNav) $lbContainer.removeClass('lb-video-nav');
     }
+    flushHash();
     //ADDED-END
 
     $(window).off('resize', this.sizeOverlay);

style/_fa.scss

@@ -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); }

style/_mask_project.scss

@@ -292,6 +292,11 @@ $legend-color: $post-color;
 			}
 
 			#poster {
+				display: inline-block;
+
+				.post-item {
+					margin-bottom: 0;
+
 					textarea#post {
 						margin-bottom: 1em;
 						width: calc(100% - 2em);
@@ -306,6 +311,7 @@ $legend-color: $post-color;
 						margin-bottom: 0.5em;
 					}
 				}
+			}
 
 			.body-box {
 				position:relative;
@@ -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);
 							}
 						}

style/_simplebar.scss

@@ -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;
+  left: 0;
-  width: 7px;
+  right: 0;
   min-height: 10px;
 }
 
@@ -142,8 +141,8 @@
   content: '';
   background: black;
   border-radius: 7px;
-  left: 0;
+  left: 2px;
-  right: 0;
+  right: 2px;
   opacity: 0;
   transition: opacity 0.2s linear;
 }