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

This commit is contained in:
rabuzarus 2016-05-11 16:04:11 +02:00
parent 1f994aa17a
commit b13eb01d3c
7 changed files with 74 additions and 8 deletions

View file

@ -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
*/

View file

@ -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');
});
});
}
}

View file

@ -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");

View file

@ -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();
});
}
}

View file

@ -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>

View file

@ -16,8 +16,8 @@
<div id="conversation-end"></div>
{{if $dropping}}
<a id="item-delete-selected" href="#" onclick="deleteCheckedItems();return false;">
<span class="icon s22 delete text">{{$dropping}}</span>
<a id="item-delete-selected" class="" href="#" title="{{$dropping}}" onclick="deleteCheckedItems();return false;" data-toggle="tooltip">
<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}}

View file

@ -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>