Taxe Rules : Modification du javascript Drag & Drop pour ordonner les éléments.
This commit is contained in:
@@ -57,7 +57,7 @@
|
||||
</p>
|
||||
</div> -->
|
||||
|
||||
<div class="panel panel-default place">
|
||||
<div id="panel" class="panel panel-default place">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Create a tax rule</h3>
|
||||
</div>
|
||||
@@ -84,7 +84,7 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
|
||||
<div class="panel panel-default take">
|
||||
<div id="panel-list" class="panel panel-default take">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">List of taxes</h3>
|
||||
</div>
|
||||
@@ -124,18 +124,22 @@
|
||||
{/javascripts}
|
||||
|
||||
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
|
||||
{literal}
|
||||
<script>
|
||||
<!--
|
||||
$(function() {
|
||||
|
||||
// Création du tableau des règles de taxe
|
||||
// Cache jQuery Objects
|
||||
var $group = $('#panel');
|
||||
var $list = $('#panel-list');
|
||||
|
||||
// Build array of taxes rules
|
||||
$('#apply-taxes-rules').click(function(){
|
||||
var taxesRules = [],
|
||||
index;
|
||||
|
||||
$('.place .panel-body .drop-group').each(function(i){
|
||||
|
||||
$('.drop-group',$group).each(function(i){
|
||||
var $this = $(this);
|
||||
|
||||
index = i;
|
||||
taxesRules[index] = [];
|
||||
|
||||
@@ -143,86 +147,126 @@
|
||||
taxesRules[index][j] = [];
|
||||
taxesRules[index][j] = $(this).text();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$('.place .panel-body').sortable({
|
||||
axis: "y",
|
||||
revert: true,
|
||||
containment: "parent",
|
||||
items : "> div"
|
||||
});
|
||||
|
||||
$(".draggable").draggable({
|
||||
cursor: "move",
|
||||
revert: true,
|
||||
containment: "document",
|
||||
// Make the list of taxes draggable
|
||||
$('.draggable', $list).draggable({
|
||||
cursor: 'move',
|
||||
helper: 'clone',
|
||||
//containment: "document",
|
||||
opacity: 0.5,
|
||||
start: function(event, ui){
|
||||
// Initilisation du droppable pour nouveaux groupes
|
||||
initDrop();
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
|
||||
var $zone = $('.panel-body').find('.droppable');
|
||||
var zoneLength = $zone.length;
|
||||
|
||||
if(zoneLength > 1){
|
||||
$zone.each(function(){
|
||||
var $this = $(this);
|
||||
var draggableLength = $('.draggable', $this).length;
|
||||
|
||||
// Si une zone est vide on la supprime
|
||||
if(draggableLength == 0){
|
||||
$this.slideUp(function(){
|
||||
$this.remove();
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
revert: "invalid", // when not dropped, the item will revert back to its initial position
|
||||
zIndex: 10
|
||||
});
|
||||
|
||||
// Initialisation du droppable
|
||||
initDrop();
|
||||
|
||||
// Fonction droppable
|
||||
function initDrop() {
|
||||
$(".droppable").droppable({
|
||||
hoverClass: "over",
|
||||
// Droppable Options
|
||||
var droppableOptions = {
|
||||
accept: "#panel-list .draggable", // Controls which draggable elements are accepted
|
||||
hoverClass: 'over',
|
||||
drop: function( event, ui ) {
|
||||
var $this = $(this),
|
||||
$elem = ui.draggable.detach();
|
||||
var $current_group = $(this),
|
||||
$tax = ui.draggable;
|
||||
|
||||
// On ajout au groupe existant
|
||||
if($this.hasClass('add-to-group')){
|
||||
$this.find('.drop-message').after($elem);
|
||||
// Move taxes
|
||||
$tax.fadeOut(function() {
|
||||
$(this).remove();
|
||||
$tax.appendTo( $current_group ).fadeIn();
|
||||
|
||||
});
|
||||
}
|
||||
// On crée un nouveau groupe
|
||||
else if($this.hasClass('create-group')){
|
||||
var $dropZone = $this.prev('.panel-body').find('.drop-group:last-child').clone();
|
||||
$dropZone.find('.draggable').remove();
|
||||
};
|
||||
|
||||
var $panelBody = $this.prev('.panel-body');
|
||||
$panelBody.append($dropZone);
|
||||
// let the drop-group be droppable & sortable, accepting the tax items
|
||||
$('.add-to-group', $group)
|
||||
.sortable({ // Sort
|
||||
//axis: 'y',
|
||||
cursor: 'crosshair',
|
||||
items: "div",
|
||||
revert: true,
|
||||
}).droppable(droppableOptions);
|
||||
|
||||
var $newZone = $panelBody.find('.drop-group:last-child');
|
||||
$newZone.find('.drop-message').after($elem);
|
||||
}
|
||||
// On supprime d'un groupe
|
||||
else if($this.hasClass('remove-from-group')){
|
||||
var $panelBody = $this.prev('.panel-body');
|
||||
$panelBody.append($elem);
|
||||
|
||||
// Allow the user to create a new drop-group
|
||||
$('.create-group', $group)
|
||||
.droppable({
|
||||
accept: "#panel-list .draggable", // Controls which draggable elements are accepted
|
||||
hoverClass: 'over',
|
||||
drop: function( event, ui ) {
|
||||
var $tax = ui.draggable;
|
||||
var $create_group;
|
||||
|
||||
// Check if we have already an empty group
|
||||
var $empty_group = $group.find('.drop-group:not(:has(> .draggable))');
|
||||
if($empty_group.size() > 0){ // if yes (Use the first empty group)
|
||||
$create_group = $empty_group.filter(':first');
|
||||
|
||||
// Move taxes
|
||||
$tax.fadeOut(function() {
|
||||
$(this).remove();
|
||||
$tax.appendTo( $create_group ).show();
|
||||
$group.find('.panel-body').append($create_group);
|
||||
});
|
||||
|
||||
}else{ //if no (Create a new group)
|
||||
$create_group = $group.find('.drop-group:last-child').clone();
|
||||
|
||||
// Remove taxes
|
||||
$create_group.find('.draggable').remove();
|
||||
|
||||
// Make the new group droppable
|
||||
$create_group
|
||||
.sortable({ // Sort
|
||||
//axis: 'y',
|
||||
cursor: 'crosshair',
|
||||
items: "div",
|
||||
revert: true,
|
||||
})
|
||||
.droppable(droppableOptions);
|
||||
|
||||
// Move taxes
|
||||
$tax.fadeOut(function() {
|
||||
$(this).remove();
|
||||
$tax.appendTo( $create_group ).show();
|
||||
$group.find('.panel-body').append($create_group);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// let the gallery be droppable as well, accepting items from the trash
|
||||
$('.remove-from-group', $list)
|
||||
.droppable({
|
||||
accept: "#panel .draggable",
|
||||
hoverClass: 'over',
|
||||
drop: function( event, ui ) {
|
||||
var $tax = ui.draggable.clone(); ui.draggable.remove();
|
||||
|
||||
// Move taxes
|
||||
$tax.fadeOut(function() {
|
||||
//$(this).remove();
|
||||
$tax.removeClass('ui-sortable-helper').addClass('ui-draggable').removeAttr('style').draggable({
|
||||
cursor: 'move',
|
||||
helper: 'clone',
|
||||
//containment: "document",
|
||||
opacity: 0.5,
|
||||
revert: "invalid", // when not dropped, the item will revert back to its initial position
|
||||
zIndex: 10
|
||||
}).prependTo( $list.find('.panel-body') ).fadeIn();
|
||||
|
||||
// Check if we have an empty group
|
||||
var $zone = $('.add-to-group', $group);
|
||||
var $empty_zone = $zone.filter(':not(:has(> .draggable))');
|
||||
if($zone.size() > $empty_zone.size()){ // Remove empty group only if we have more than 1 group
|
||||
$empty_zone.slideUp(function(){ $(this).remove(); });
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
// -->
|
||||
</script>
|
||||
{/literal}
|
||||
|
||||
{/block}
|
||||
Reference in New Issue
Block a user