item deletion: use js to delete items. so we don't have to reload the page

css/style.css

@@ -84,6 +84,22 @@ iframe, img {
     line-height: 1.5;
 }
 
+a#item-delete-selected {
+    cursor: pointer;
+    color: white;
+    position: fixed;
+    z-index: 49;
+    right: 20px;
+    top: 100px;
+    opacity: 0.8;
+    font-size: 2.9em;
+    padding: 0 12px 0 12px;
+    border-radius: 10px;
+    background-color: $link_color;
+    line-height: 1.5;
+    display: none;
+}
+
 /*
 * Overwriting and Extend Bootstrap
 */

js/textedit.js

@@ -178,3 +178,18 @@ function qCommentInsert(obj,id) {
 }
 
 function confirmDelete() { return confirm(aStr.delitem); }
+
+function dropItem(url, object) {
+	var confirm = confirmDelete();
+	if(confirm) {
+		$('body').css('cursor', 'wait');
+		$(object).fadeTo('fast', 0.33, function () {
+			$.get(url).done(function() {
+				$(object).remove();
+				$('body').css('cursor', 'auto');
+			});
+		});
+	}
+}
+
+	

js/theme.js

@@ -68,6 +68,21 @@ $(document).ready(function(){
 		if( $("#jot-popup").is(":hidden")) $("#topbar-second > .container > #navbar-button #jotOpen").hide();
 	}
 
+	// show bulk deletion button at network page if checkbox is checked
+	$('input.item-select').change(function(){
+
+		if($(this).is(':checked')) {
+			$("a#item-delete-selected").fadeTo('slow', 1);
+			$("a#item-delete-selected").show();
+		} else {
+			$("a#item-delete-selected").fadeTo('slow', 0, function(){
+				$("a#item-delete-selected").hide();
+			});
+			
+		}
+
+	});
+
 	// add search-headding to the scecond navbar
 	if( $(".search-headding")) {
 		$(".search-headding").appendTo("#topbar-second > .container > #tabmenu");

templates/jot-header.tpl

@@ -204,26 +204,46 @@ function enableOnUser(){
 		**/
 	});
 
-
 	function deleteCheckedItems() {
 		if(confirm('{{$delitems}}')) {
 			var checkedstr = '';
+			var ItemsToDelete = {};
 
 			$("#item-delete-selected").hide();
 			$('#item-delete-selected-rotator').show();
+			$('body').css('cursor', 'wait');
 
 			$('.item-select').each( function() {
 				if($(this).is(':checked')) {
 					if(checkedstr.length != 0) {
 						checkedstr = checkedstr + ',' + $(this).val();
+						var deleteItem = this.closest(".wall-item-container");
+						ItemsToDelete[deleteItem.id] = deleteItem;
 					}
 					else {
 						checkedstr = $(this).val();
 					}
+
+					// Get the corresponding item container
+					var deleteItem = this.closest(".wall-item-container");
+					ItemsToDelete[deleteItem.id] = deleteItem;
 				}
 			});
+
+			// Fade the the the container from the items we want to delete
+			for(var key in  ItemsToDelete) {
+				$(ItemsToDelete[key]).fadeTo('fast', 0.33);
+			};
+
 			$.post('item', { dropitems: checkedstr }, function(data) {
-				window.location.reload();
+			}).done(function() {
+				// Loop through the ItemsToDelete Object and remove
+				// corresponding item div
+				for(var key in  ItemsToDelete) {
+					$(ItemsToDelete[key]).remove();
+				}
+				$('body').css('cursor', 'auto');
+				$('#item-delete-selected-rotator').hide();
 			});
 		}
 	}

templates/search_item.tpl

@@ -19,7 +19,7 @@
 					<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools-{{$item.id}}">
 						{{if $item.edpost}} {{* edit the posting *}}
 						<li role="menuitem">
-							<a href="#" href="{{$item.edpost.0}}" title="{{$item.edpost.1}}" class="navicon delete"><i class="fa fa-pencil"></i> {{$item.edpost.1}}</a>
+							<a href="#" href="{{$item.edpost.0}}" title="{{$item.edpost.1}}" class="navicon pencil"><i class="fa fa-pencil"></i> {{$item.edpost.1}}</a>
 						</li>
 						{{/if}}
 
@@ -45,7 +45,7 @@
 						{{if $item.drop.dropping}}
 						<li role="separator" class="divider"></li>
 						<li role="menuitem">
-							<a href="item/drop/{{$item.id}}" class="navicon delete" onclick="return confirmDelete();" 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>

templates/threaded_conversation.tpl

@@ -16,8 +16,8 @@
 <div id="conversation-end"></div>
 
 {{if $dropping}}
-<a id="item-delete-selected" href="#" onclick="deleteCheckedItems();return false;">
+<a id="item-delete-selected" class="" href="#" title="{{$dropping}}" onclick="deleteCheckedItems();return false;" data-toggle="tooltip">
-	<span class="icon s22 delete text">{{$dropping}}</span>
+	<i class="fa fa-trash" aria-hidden="true"></i>
 </a>
 <img id="item-delete-selected-rotator" class="like-rotator" src="images/rotator.gif" style="display: none;" />
 {{/if}}

templates/wall_thread.tpl

@@ -90,7 +90,7 @@ as the value of $top_child_total (this is done at the end of this file)
 
 					{{if $item.edpost}} {{* edit the posting *}}
 					<li role="menuitem">
-						<a href="#" onclick="editpost('{{$item.edpost.0}}?mode=modal'); return false;" title="{{$item.edpost.1}}" class="navicon delete"><i class="fa fa-pencil"></i> {{$item.edpost.1}}</a>
+						<a href="#" onclick="editpost('{{$item.edpost.0}}?mode=modal'); return false;" title="{{$item.edpost.1}}" class="navicon pencil"><i class="fa fa-pencil"></i> {{$item.edpost.1}}</a>
 					</li>
 					{{/if}}
 
@@ -128,7 +128,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 href="item/drop/{{$item.id}}" class="navicon delete" onclick="return confirmDelete();" 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>