merge lightbox calls (post / markers)

masks/project.html

@@ -388,18 +388,7 @@ function initSpotMessages(aoMessages, aoTracks) {
 		if(oMsg.medias) {
 			var $Medias = $('<div>', {'class':'medias'});
 			$.each(oMsg.medias, function(iKey, asMedia) {
-				var bVideo = (asMedia.subtype == 'video');
+				$Medias.append(getMediaLink(asMedia, 'marker'));
-				$Medias
-					.append($('<a>', {
-						'class': 'drill',
-						href: asMedia.media_path,
-						'data-lightbox': 'marker-medias',
-						'data-video': (bVideo?'true':'false'),
-						'data-title': oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang(bVideo?'video_taken':'pic_taken', [asMedia.formatted_time+self.tmp('site_tz_notice')]),
-						'data-orientation': asMedia.rotate})
-					.append($('<img>', {'src': asMedia.thumb_path}))
-					.append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')))
-				);
 			});
 			$Tooltip
 				.append($('<p>').addIcon('fa-media fa-fw fa-lg').append(oSpot.lang('pics')))
@@ -509,16 +498,7 @@ function getPost(asPost) {
 				);
 			break;
 		case 'media':
-			var bVideo = (asPost.subtype == 'video');
+			$Body = getMediaLink(asPost, 'post');
-			var sTakenOn = (asPost.taken_on != '0000-00-00 00:00:00')?'<br /><br /><i class="fa fa-'+asPost.subtype+'-shot fa-lg fa-fw push"></i>'+asPost.taken_on_formatted+self.tmp('site_tz_notice'):'';
-			var $Image = $('<img>', {'src': asPost.thumb_path, title: oSpot.lang(bVideo?'click_watch':'click_zoom')});
-			$Body = $('<a>', {
-				'class': 'drill',
-				href: asPost.media_path,
-				'data-video': (bVideo?'true':'false'),
-				'data-lightbox': 'post-medias',
-				'data-title': '<i class="fa fa-upload fa-lg fa-fw push"></i>'+sAbsTime+sTakenOn, 'data-orientation': asPost.rotate
-			}).append($Image).append($('<span>', {'class': 'drill-icon'}).addIcon('fa-drill-'+(bVideo?'video':'picture')));
 			break;
 		case 'post':
 			$Body = $('<div>')
@@ -550,4 +530,32 @@ function getPost(asPost) {
 function getWmtsApiUrl(sMapId, iLat, iLng, iZoom) {
 	return self.consts.geo_server+'/?a=tile&id='+sMapId+'&z='+iZoom+'&x='+iLng+'&y='+iLat;
 }
+
+function getMediaLink(asData, sType) {
+	var bVideo = (asData.subtype == 'video');
+	
+	var $PostedOn = 
+		$('<span>', {'class': 'lb-caption-posted', title: oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang('add_on', asData.formatted_time)})
+			.addIcon('fa-upload fa-lg fa-fw', true)
+			.append(asData.formatted_time);
+	
+	var $TakenOn = (asData.taken_on == '0000-00-00 00:00:00')?'':
+		$('<span>', {'class': 'lb-caption-taken', title: oSpot.lang(bVideo?'video':'pic')+' '+oSpot.lang(bVideo?'video_taken':'pic_taken', asData.formatted_time)})
+			.addIcon('fa-'+asData.subtype+'-shot fa-lg fa-fw', true)
+			.append(asData.taken_on_formatted+self.tmp('site_tz_notice'));
+	
+	var $Link = 
+		$('<a>', {
+			'class': 'drill',
+			'href': asData.media_path,
+			'data-lightbox': sType+'-medias',
+			'data-video': (bVideo?'true':'false'),
+			'data-title': $('<div>').append($PostedOn).append($TakenOn).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')));
+	
+	return $Link;
+}
 </script>

style/_lightbox.scss

@@ -71,6 +71,15 @@
 			.lb-details {
 				float: none;
 				
+				.lb-caption-taken, .lb-caption-posted {
+					cursor: default;
+					display: block;
+				}
+			
+				.lb-caption-taken {
+					margin-top: 1em;
+				}
+				
 				.lb-number {
 					padding: 0;
 					margin-top: 2em;