Add link on feed items

inc/spot.php

@@ -141,6 +141,7 @@ class Spot extends Main
 					'user'						=> $this->oUser->getUserInfo()
 				),
 				'consts' => array(
+					'server'					=> $this->asContext['serv_name'],
 					'geo_server'				=> Settings::GEO_SERVER,
 					'modes'						=> Project::MODES,
 					'default_timezone'			=> Settings::TIMEZONE

languages/en.lang

@@ -42,6 +42,8 @@ media_count			= Media $0 / $1
 media_no_id			= Missing Media ID in request
 media_comment_update= Comment of media "$0" updated
 see_on_google		= See on Google Maps
+copy_to_clipboard   = Copy direct link to clipboard
+link_copied         = Link copied!
 
 city_time			= $0 Time
 

languages/fr.lang

@@ -42,6 +42,8 @@ media_count			= Média $0 sur $1
 media_no_id			= ID du média manquant
 media_comment_update= Commentaire du media "$0" mis-à-jour
 see_on_google		= Voir la position sur Google Maps
+copy_to_clipboard   = Copie le lien dans le presse-papier
+link_copied         = Lien copié !
 
 city_time			= heure de $0
 

masks/project.html

@@ -739,7 +739,7 @@ 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('$Poster').outerHeight(true);
+			self.tmp('simple-bar').getScrollElement().scrollTop = $Post.position().top + parseInt($Post.css('margin-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);});
@@ -758,6 +758,9 @@ function setFeedUpdateTimer(iSeconds, fCallback) {
 
 function getPost(asPost) {
 	asPost.headerless = asPost.headerless || false;
+	var bLink = false;
+	var asHash = oSpot.getHash();
+	var sHash = '#'+[asHash.page, asHash.items[0], asPost.type, asPost.id].join(self.consts.hash_sep);
 
 	var $Post = $('<div>', {'class':'post-item '+asPost.type+(asPost.headerless?' headerless':'')});
 	if(asPost.id) $Post.prop('id', asPost.type+'-'+asPost.id);
@@ -769,6 +772,7 @@ function getPost(asPost) {
 
 	switch(asPost.type) {
 		case 'message':
+			bLink = true;
 			$Body = $('<div>', {'class':'body-box'})
 				.data('id', asPost.id_message)
 				.data('clicked', false)
@@ -811,10 +815,12 @@ function getPost(asPost) {
 				);
 			break;
 		case 'media':
+			bLink = true;
 			$Body = $('<div>', {'class':'body-box'}).append(getMediaLink(asPost, 'post'));
 			if(asPost.comment) $Body.find('a.drill').append($('<span>', {'class':'comment'}).text(asPost.comment));
 			break;
 		case 'post':
+			bLink = true;
 			$Body = $('<div>')
 						.append($('<p>', {'class':'message'}).text(asPost.content))
 						.append($('<p>', {'class':'signature'}).text('-- '+asPost.formatted_name));
@@ -832,11 +838,27 @@ function getPost(asPost) {
 
 	$Post
 		.append($('<div>', {'class':'header'})
-			.append($('<span>', {'class':'index'}).addIcon('fa-'+sType))
+			.append($('<span>', {'class':'index'})
+				.addIcon('fa-'+sType)
+				.append(asPost.displayed_id?' '+oSpot.lang('counter', asPost.displayed_id):'')
+			)
 			.append($('<span>', {'class':'time'}).hoverSwap(sRelTime, sAbsTime+((self.tmp('site_tz_notice')!='')?' ('+self.tmp('site_tz_notice')+')':''))))
 		.append($('<div>', {'class':'body'}).append($Body));
 
-	if(asPost.displayed_id) $Post.find('.index').append(' '+oSpot.lang('counter', asPost.displayed_id));
+	if(bLink) {
+		$Post.find('.index').append($('<a>', {'class':'link', 'href':sHash, 'title':oSpot.lang('copy_to_clipboard')})
+			.data('url', self.consts.server+sHash)
+			.addIcon('fa-link')
+			.click(function(){
+				copyTextToClipboard($(this).data('url'));
+				$(this).parent().append($('<span>', {'class':'link_copied'})
+					.text(oSpot.lang('link_copied'))
+					.delay(5000)
+					.fadeOut(400, function(){$(this).remove();})
+				);
+			})
+		);
+	}
 
 	return $Post;
 }

script/spot.js

@@ -358,3 +358,35 @@ $.prototype.onSwipe = function(fCallBack){
 			fCallBack({x:iDeltaX, y:iDeltaY});
 		});
 };
+
+function copyTextToClipboard(text) {
+	if(!navigator.clipboard) {
+		var textArea = document.createElement('textarea');
+		textArea.value = text;
+
+		// Avoid scrolling to bottom
+		textArea.style.top = '0';
+		textArea.style.left = '0';
+		textArea.style.position = 'fixed';
+
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+
+		try {
+			var successful = document.execCommand('copy');
+			if(!successful) console.error('Fallback: Oops, unable to copy', text);
+		} catch (err) {
+			console.error('Fallback: Oops, unable to copy', err);
+		}
+
+		document.body.removeChild(textArea);
+		return;
+	}
+	navigator.clipboard.writeText(text).then(
+		function() {},
+		function(err) {
+			console.error('Async: Could not copy text: ', err);
+		}
+	);
+}

style/_fa.scss

@@ -76,6 +76,7 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-upload:before { content: fa-content($fa-var-cloud-upload); }
 .#{$fa-css-prefix}-video-shot:before { content: fa-content($fa-var-camcorder); }
 .#{$fa-css-prefix}-image-shot:before { content: fa-content($fa-var-camera-alt); }
+.#{$fa-css-prefix}-link:before { content: fa-content($fa-var-link); }
 
 /* Feed - Poster */
 .#{$fa-css-prefix}-poster:before { content: fa-content($fa-var-comment-edit); }

style/_mask_project.scss

@@ -4,13 +4,15 @@ $panel-width: 30%;
 $panel-width-max: "400px + 3 * #{$block-spacing}";
 
 //Feed colors
-$post-input-bg: #ffffff;				//#d9deff;
+$post-input-bg: 		#ffffff;					//#d9deff;
-$post-color: 	#333;					//#323268;
+$post-color: 			#333;						//#323268;
-$post-bg: 		rgba(255,255,255,.8);	//#B4BDFF;
+$post-color-hover: 		darken($post-color, 10%);
-$message-color:	#326526;
+$post-bg: 				rgba(255,255,255,.8);		//#B4BDFF;
-$message-bg: 	#6DFF58;
+$message-color:			#326526;
-$media-color:	#333; 					//#635C28;
+$message-color-hover:	darken($message-color, 10%);
-$media-bg:		rgba(255,255,255,.8);	//#F3EC9F;
+$message-bg: 			#6DFF58;
+$media-color:			#333; 						//#635C28;
+$media-bg:				rgba(255,255,255,.8);		//#F3EC9F;
 
 //Settings colors
 $title-color: $post-color;
@@ -331,6 +333,13 @@ $legend-color: $post-color;
 					margin-top: $block-spacing;
 				}
 
+				a {
+					color: $post-color;
+					&:hover {
+						color: $post-color-hover;
+					}
+				}
+
 				.message {
 					margin: 0;
 				}
@@ -353,6 +362,10 @@ $legend-color: $post-color;
 
 						&.index {
 							width: 25%;
+
+							.link, .link:visited, .link_copied {
+								margin-left: 0.5em;
+							}
 						}
 
 						&.time {
@@ -389,6 +402,9 @@ $legend-color: $post-color;
 
 					a {
 						color: $message-color;
+						&:hover {
+							color: $message-color-hover;
+						}
 					}
 
 					a.drill {