Merge pull request #3232 from Hypolite/issue/#3194-2

frio: Revert guid truncation for scrollToItem() and improve dropItem()

view/theme/frio/js/textedit.js

@@ -162,21 +162,29 @@ function qCommentInsert(obj,id) {
 
 function confirmDelete() { return confirm(aStr.delitem); }
 
-function dropItem(url, object) {
+/**
+ * Hide and removes an item element from the DOM after the deletion url is
+ * successful, restore it else.
+ *
+ * @param {string} url The item removal URL
+ * @param {string} elementId The DOM id of the item element
+ * @returns {undefined}
+ */
+function dropItem(url, elementId) {
 	var confirm = confirmDelete();
 
-	//if the first character of the object is #, remove it because
-	// we use getElementById which don't need the #
-	// getElementByID selects elements even if there are special characters
-	// in the ID (like %) which won't work with jQuery
-	/// @todo ceck if we can solve this in the template
-	object = object.indexOf('#') == 0 ? object.substring(1) : object;
-
 	if (confirm) {
 		$('body').css('cursor', 'wait');
-		$(document.getElementById(object)).fadeTo('fast', 0.33, function () {
-			$.get(url).done(function() {
-				$(document.getElementById(object)).remove();
+
+		var $el = $(document.getElementById(elementId));
+
+		$el.fadeTo('fast', 0.33, function () {
+			$.get(url).then(function() {
+				$el.remove();
+			}).error(function() {
+				// @todo Show related error message
+				$el.show();
+			}).always(function() {
 				$('body').css('cursor', 'auto');
 			});
 		});

view/theme/frio/js/theme.js

@@ -573,31 +573,38 @@ String.prototype.rtrim = function() {
 	return trimmed;
 };
 
-// Scroll to a specific item and highlight it
-// Note: jquery.color.js is needed
-function scrollToItem(itemID) {
-	if( typeof itemID === "undefined")
+/**
+ * Scroll the screen to the item element whose id is provided, then highlights it
+ *
+ * Note: jquery.color.js is required
+ *
+ * @param {string} elementId The item element id
+ * @returns {undefined}
+ */
+function scrollToItem(elementId) {
+	if (typeof elementId === "undefined") {
 		return;
+	}
 
-	var elm = $('#'+itemID);
+	var $el = $(document.getElementById(elementId));
 	// Test if the Item exists
-	if(!elm.length)
+	if (!$el.length) {
 		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 = $(elm).offset().top - 100;
+	// Get the Item Position (we need to substract 100 to match correct position
+	var itemPos = $el.offset().top - 100;
 
 	// Scroll to the DIV with the ID (GUID)
 	$('html, body').animate({
 		scrollTop: itemPos
 	}, 400, function() {
 		// Highlight post/commenent with ID  (GUID)
-		$(elm).animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
+		$el.animate(colWhite, 1000).animate(colShiny).animate(colWhite, 600);
 	});
 }
 

view/theme/frio/templates/search_item.tpl

@@ -7,7 +7,7 @@
 <!-- ./TODO => Unknow block -->
 
 
-<div class="panel">
+<div class="panel" id="item-{{$item.guid}}">
 	<div class="wall-item-container panel-body{{$item.indent}} {{$item.shiny}} {{$item.previewing}}" >
 		<div class="media">
 			{{* Put additional actions in a top-right dropdown menu *}}
@@ -54,7 +54,7 @@
 						{{if $item.drop.dropping}}
 						<li role="separator" class="divider"></li>
 						<li role="menuitem">
-							<a class="navicon delete" onclick="dropItem('item/drop/{{$item.id}}', '#item-{{$item.guid}}'); return false;" title="{{$item.drop.delete}}"><i class="fa fa-trash"></i> {{$item.drop.delete}}</a>
+							<a class="navicon delete" onclick="dropItem('item/drop/{{$item.id}}', 'item-{{$item.guid}}'); return false;" title="{{$item.drop.delete}}"><i class="fa fa-trash"></i> {{$item.drop.delete}}</a>
 						</li>
 						{{/if}}
 					</ul>

view/theme/frio/templates/wall_thread.tpl

@@ -68,9 +68,9 @@ as the value of $top_child_total (this is done at the end of this file)
 
 {{* Use a different div container in dependence max thread-level = 7 *}}
 {{if $item.thread_level<7}}
-<div class="wall-item-container {{$item.indent}} {{$item.shiny}} {{$item.network}} thread_level_{{$item.thread_level}} {{if $item.thread_level==1}}panel-body h-entry{{else}}u-comment h-cite{{/if}}" id="item-{{$item.guid|regex_replace:'/%.*/':''}}"><!-- wall-item-container -->
+<div class="wall-item-container {{$item.indent}} {{$item.shiny}} {{$item.network}} thread_level_{{$item.thread_level}} {{if $item.thread_level==1}}panel-body h-entry{{else}}u-comment h-cite{{/if}}" id="item-{{$item.guid}}"><!-- wall-item-container -->
 {{else}}
-<div class="wall-item-container {{$item.indent}} {{$item.shiny}} {{$item.network}} thread_level_7 u-comment h-cite" id="item-{{$item.guid|regex_replace:'/%.*/':''}}">
+<div class="wall-item-container {{$item.indent}} {{$item.shiny}} {{$item.network}} thread_level_7 u-comment h-cite" id="item-{{$item.guid}}">
  {{/if}}
 	<div class="media">
 		{{* Put addional actions in a top-right dropdown menu *}}
@@ -129,7 +129,7 @@ as the value of $top_child_total (this is done at the end of this file)
 
 					{{if $item.drop.dropping}}
 					<li role="menuitem">
-						<a class="navicon delete" onclick="dropItem('item/drop/{{$item.id}}', '#item-{{$item.guid}}'); return false;" title="{{$item.drop.delete}}"><i class="fa fa-trash"></i> {{$item.drop.delete}}</a>
+						<a class="navicon delete" onclick="dropItem('item/drop/{{$item.id}}', 'item-{{$item.guid}}'); return false;" title="{{$item.drop.delete}}"><i class="fa fa-trash"></i> {{$item.drop.delete}}</a>
 					</li>
 					{{/if}}
 				</ul>