Merge pull request #2726 from rabuzarus/1008-item-highlight

Frio: fix auto jump to the item position in /display

view/theme/frio/js/mod_display.js

@@ -0,0 +1,11 @@
+/**
+ * @brief Javascript for the display module
+ */
+
+// Catch the GUID from the URL
+var itemGuid = window.location.pathname.split("/").pop();
+
+$(window).load(function(){
+	// Scroll to the Item by its GUID
+	scrollToItem('item-'+itemGuid);
+});

view/theme/frio/js/theme.js

@@ -542,3 +542,26 @@ String.prototype.rtrim = function() {
 	var trimmed = this.replace(/\s+$/g, '');
 	return trimmed;
 };
+
+// Scroll to a specific item and highlight it
+// Note: jquery.color.js is needed
+function scrollToItem(itemID) {
+	if( typeof itemID === "undefined")
+		return;
+
+	// Define the colors which are used for highlighting
+	var colWhite = {backgroundColor:'#F5F5F5'};
+	var colShiny = {backgroundColor:'#FFF176'};
+
+	// Get the Item Position (we need to substract 100 to match
+	// correct position
+	var itemPos = $('#'+itemID).offset().top - 100;
+
+	// Scroll to the DIV with the ID (GUID)
+	$('html, body').animate({
+		scrollTop: itemPos
+	}, 400, function() {
+		// Highlight post/commenent with ID  (GUID)
+		$('#'+itemID).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
+	});
+}

view/theme/frio/templates/threaded_conversation.tpl

@@ -1,4 +1,5 @@
 <script type="text/javascript" src="view/theme/frio/frameworks/jquery-color/jquery.color.js"></script>
+{{if $mode == display}}<script type="text/javascript" src="view/theme/frio/js/mod_display.js"></script>{{/if}}
 
 {{$live_update}}
 
@@ -23,17 +24,3 @@
 </a>
 <img id="item-delete-selected-rotator" class="like-rotator" src="images/rotator.gif" style="display: none;" />
 {{/if}}
-
-<script>
-    var colWhite = {backgroundColor:'#F5F5F5'};
-    var colShiny = {backgroundColor:'#FFF176'};
-</script>
-
-{{if $mode == display}}
-<script>
-    var id = window.location.pathname.split("/").pop();
-    $(window).scrollTop($('#item-'+id).position().top);
-    $('#item-'+id).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 2000);   
-</script>
-{{/if}}
-