" >
if: root
else: subfolder
" >
">
var DragAndDrop = function() {
//
// Setup Dragula module components
//
var _componentDragula = function() {
if (typeof dragula == 'undefined') {
console.warn('Warning - dragula.min.js is not loaded.');
return;
}
//
// Draggable gallery items
//
let myItems = []; // array of gallery items pre-drag
let myContainer = document.getElementById('draggable'); // container of gallery items
let startPosition, dropPosition;
dragula([myContainer], {
moves: function (el, container, handle) {
return (container.id == 'draggable')? true : false; // disallow dragging of non-draggable items, such as Folders
},
accepts: function (el, target, source, sibling) {
return true; // don't limit any drags
},
invalid: function (el, handle) {
return handle.className === 'btn btn-actions'; // exclude the action button
},
revertOnSpill: false // spilling will put the element back where it was dragged from, if this is true
}).on('drag', function (el, source) {
startPosition = undefined;
dropPosition = undefined;
myItems = Array.from(source.children,(e) => {return e.id;})
startPosition = myItems.indexOf(el.id);
/*console.log( source.children );
console.log( 'Start pos: ' + startPosition );*/
}).on('drop', function (el, target, source, sibling) {
dropPosition = undefined;
myItemsAfterDrop = Array.from(target.children,(e) => {return e.id;})
dropPosition = myItemsAfterDrop.indexOf(el.id);
/*console.log( 'Drop pos: ' + dropPosition );*/
if( dropPosition == undefined || startPosition == undefined ) return;
/*console.log(myItems);
console.log(myItemsAfterDrop);*/
// Arrays of only repositioned items
if( dropPosition > startPosition ){
affectedItemsOldOrder = myItems.slice(startPosition, dropPosition+1);
affectedItemsNewOrder = myItemsAfterDrop.slice(startPosition, dropPosition+1);
}else{
affectedItemsOldOrder = myItems.slice(dropPosition, startPosition+1);
affectedItemsNewOrder = myItemsAfterDrop.slice(dropPosition, startPosition+1);
}
/*console.log( affectedItemsOldOrder );
console.log( affectedItemsNewOrder );*/
// begin db-update
nonce = "";
$.ajax({
dataType: 'html',
url: 'ajax.php?act=reorder_gallery&nonce=' + nonce,
type: 'POST',
data: {
source: affectedItemsOldOrder,
target: affectedItemsNewOrder
},
})
.done(function( data ){
/*console.log('Ajax complete!');
console.log(data);*/
toastr.success("Your changes have been saved", "Success", { // TODO: localize
"positionClass": "toast-bottom-right",
"showDuration": "250",
"hideDuration": "250",
"timeOut": "700",
"extendedTimeOut": "500",
"icon": ''
});
})
.always(function() {
// release breath?
});
}); // on.drop end
}; // _componentDragula function end
//
// Return objects assigned to module
//
return {
init: function() {
_componentDragula();
}
}
}();
// Initialize module
// ------------------------------
document.addEventListener('DOMContentLoaded', function() {
DragAndDrop.init();
});
$( document ).ajaxComplete(function( event, xhr, settings ) {
if(settings.data.indexOf( 'k_updown' ) == 0){
DragAndDrop.init(); // restore draggable after default k_updown event
}
});
/*
- drag and drop disabled, due to missing parameter *** orderby='weight' *** in tag cms:config_list_view!
- cms:config_list_view orderby='weight' order='asc'
*/
console.log("Warning: Drag and drop was disabled, due to missing parameter *** orderby='weight' *** in user tag cms:config_list_view!");
// Spinner
var $loading = $('', {id: 'loader'}).appendTo( 'body' ).hide();
$(document).ajaxStart(function(){$loading.show();}).ajaxStop(function(){$loading.hide();});
/* Spinner CSS */
div#loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #e4e4e4; /* Couch-like */
border-radius: 50%;
width: 120px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
animation: spin 0.5s linear infinite;
transform: translate3d(-50%, -50%, 0);
}
@keyframes spin {
0% { transform: translate3d(-50%, -50%, 0) rotate(0deg); }
100% { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}
#k_overlay { display: none!important;} /* can disable default dark overlay */