TheCoreDev/sterivein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Taxe Rules : Modification du javascript Drag & Drop pour ordonner les éléments.

Browse Source
This commit is contained in:
macuser
2013-09-27 01:38:26 +02:00
parent be4c6380e7
commit 6840ad362e
1 changed files with 123 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
templates/admin/default/tax-rule-edit.html
View File

@@ -21,10 +21,10 @@
<div class="title title-without-tabs"> <div class="title title-without-tabs">
{intl l="Edit tax rule $TITLE"} {intl l="Edit tax rule $TITLE"}
</div> </div>
<form action="" method="post"> <form action="" method="post">
<div class="form-group"> <div class="form-group">
<label for="" class="label-control">{intl l="Choose a country"} :</label> <label for="" class="label-control">{intl l="Choose a country"} :</label>
<div class="input-group"> <div class="input-group">
@@ -39,14 +39,14 @@
</div> </div>
</form> </form>
<p><strong>{intl l="Countries that have the same tax rule"} :<strong></p> <p><strong>{intl l="Countries that have the same tax rule"} :<strong></p>
<p class="lead"> <p class="lead">
<span class="label label-info">Italy</span> <span class="label label-info">Italy</span>
<span class="label label-info">England</span> <span class="label label-info">England</span>
<span class="label label-info">Japan</span> <span class="label label-info">Japan</span>
</p> </p>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@@ -57,12 +57,12 @@
</p> </p>
</div> --> </div> -->
<div class="panel panel-default place"> <div id="panel" class="panel panel-default place">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">Create a tax rule</h3> <h3 class="panel-title">Create a tax rule</h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="drop-group droppable add-to-group"> <div class="drop-group droppable add-to-group">
<p class="drop-message"> <p class="drop-message">
<span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-plus"></span>
@@ -84,7 +84,7 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="panel panel-default take"> <div id="panel-list" class="panel panel-default take">
<div class="panel-heading"> <div class="panel-heading">
<h3 class="panel-title">List of taxes</h3> <h3 class="panel-title">List of taxes</h3>
</div> </div>
@@ -93,7 +93,7 @@
<div class="draggable">Dapibus ac facilisis in</div> <div class="draggable">Dapibus ac facilisis in</div>
<div class="draggable">Morbi leo risus</div> <div class="draggable">Morbi leo risus</div>
<div class="draggable">Porta ac consectetur ac</div> <div class="draggable">Porta ac consectetur ac</div>
<div class="draggable">Vestibulum at eros</div> <div class="draggable">Vestibulum at eros</div>
</div> </div>
<div class="panel-footer droppable remove-from-group"> <div class="panel-footer droppable remove-from-group">
<p class="drop-message"> <p class="drop-message">
@@ -102,7 +102,7 @@
</p> </p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@@ -114,7 +114,7 @@
{/block} {/block}
{block name="javascript-initialization"} {block name="javascript-initialization"}
{javascripts file='assets/js/bootstrap-select/bootstrap-select.js'} {javascripts file='assets/js/bootstrap-select/bootstrap-select.js'}
<script src="{$asset_url}"></script> <script src="{$asset_url}"></script>
{/javascripts} {/javascripts}
@@ -124,18 +124,22 @@
{/javascripts} {/javascripts}
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
{literal}
<script> <script>
<!--
$(function() { $(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(){ $('#apply-taxes-rules').click(function(){
var taxesRules = [], var taxesRules = [],
index; index;
$('.place .panel-body .drop-group').each(function(i){ $('.drop-group',$group).each(function(i){
var $this = $(this); var $this = $(this);
index = i; index = i;
taxesRules[index] = []; taxesRules[index] = [];
@@ -143,86 +147,126 @@
taxesRules[index][j] = []; taxesRules[index][j] = [];
taxesRules[index][j] = $(this).text(); taxesRules[index][j] = $(this).text();
}); });
}); });
});
$('.place .panel-body').sortable({
axis: "y",
revert: true,
containment: "parent",
items : "> div"
}); });
$(".draggable").draggable({ // Make the list of taxes draggable
cursor: "move", $('.draggable', $list).draggable({
revert: true, cursor: 'move',
containment: "document", helper: 'clone',
//containment: "document",
opacity: 0.5, opacity: 0.5,
start: function(event, ui){ revert: "invalid", // when not dropped, the item will revert back to its initial position
// Initilisation du droppable pour nouveaux groupes zIndex: 10
initDrop(); });
},
stop: function(event, ui) {
var $zone = $('.panel-body').find('.droppable'); // Droppable Options
var zoneLength = $zone.length; var droppableOptions = {
accept: "#panel-list .draggable", // Controls which draggable elements are accepted
if(zoneLength > 1){ hoverClass: 'over',
$zone.each(function(){ drop: function( event, ui ) {
var $this = $(this); var $current_group = $(this),
var draggableLength = $('.draggable', $this).length; $tax = ui.draggable;
// Si une zone est vide on la supprime // Move taxes
if(draggableLength == 0){ $tax.fadeOut(function() {
$this.slideUp(function(){ $(this).remove();
$this.remove(); $tax.appendTo( $current_group ).fadeIn();
});
}
});
}
};
// 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);
// 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);
});
}
} }
}); });
// Initialisation du droppable
initDrop();
// Fonction droppable // let the gallery be droppable as well, accepting items from the trash
function initDrop() { $('.remove-from-group', $list)
$(".droppable").droppable({ .droppable({
hoverClass: "over", accept: "#panel .draggable",
drop: function( event, ui ) { hoverClass: 'over',
var $this = $(this), drop: function( event, ui ) {
$elem = ui.draggable.detach(); var $tax = ui.draggable.clone(); ui.draggable.remove();
// On ajout au groupe existant // Move taxes
if($this.hasClass('add-to-group')){ $tax.fadeOut(function() {
$this.find('.drop-message').after($elem); //$(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(); });
} }
// 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);
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);
}
}
});
}
}); });
// -->
</script> </script>
{/literal}
{/block} {/block}