FilterWidget fixed drag&drop

This commit is contained in:
Paolo
2018-02-28 14:08:20 +01:00
parent b8e7599888
commit 9a3a33feb0
3 changed files with 125 additions and 29 deletions
@@ -2,6 +2,9 @@
if (! defined('BASEPATH')) exit('No direct script access allowed');
/**
*
*/
class Filters extends VileSci_Controller
{
const SESSION_NAME = 'FILTER';
@@ -13,6 +16,9 @@ class Filters extends VileSci_Controller
const ACTIVE_FILTERS_OPERATION = 'activeFiltersOperation';
const FILTER_NAME = 'filterName';
/**
*
*/
public function __construct()
{
parent::__construct();
@@ -24,6 +30,9 @@ class Filters extends VileSci_Controller
$this->load->model('person/Benutzer_model', 'BenutzerModel');
}
/**
*
*/
public function tableDataset()
{
$json = new stdClass();
@@ -37,6 +46,9 @@ class Filters extends VileSci_Controller
$this->output->set_content_type('application/json')->set_output(json_encode($json));
}
/**
*
*/
public function selectFields()
{
$json = new stdClass();
@@ -50,6 +62,43 @@ class Filters extends VileSci_Controller
$this->output->set_content_type('application/json')->set_output(json_encode($json));
}
/**
*
*/
public function sortSelectedFields()
{
$selectedFieldsLst = $this->input->post('selectedFieldsLst');
$json = new stdClass();
$allSelectedFields = $_SESSION[self::SESSION_NAME]['allSelectedFields'];
$allColumnsAliases = $_SESSION[self::SESSION_NAME]['allColumnsAliases'];
if (isset($selectedFieldsLst) && is_array($selectedFieldsLst))
{
$json->selectedFields = $_SESSION[self::SESSION_NAME]['selectedFields'] = $selectedFieldsLst;
for ($i = 0; $i < count($json->selectedFields); $i++)
{
$pos = array_search($json->selectedFields[$i], $allSelectedFields);
if ($pos !== false)
{
$json->columnsAliases[] = $json->selectedFields[$i];
if ($allColumnsAliases != null && is_array($allColumnsAliases))
{
$json->columnsAliases[] = $allColumnsAliases[$pos];
}
}
}
}
$this->output->set_content_type('application/json')->set_output(json_encode($json));
}
/**
*
*/
public function selectFilters()
{
$json = new stdClass();
@@ -104,6 +153,9 @@ class Filters extends VileSci_Controller
$this->output->set_content_type('application/json')->set_output(json_encode($json));
}
/**
*
*/
public function saveFilter()
{
$this->_saveFilter($this->input->post("customFilterDescription"));
@@ -26,6 +26,7 @@
margin-left: 3px;
margin-right: 3px;
padding: 10px;
top: 10px;
}
.filter-select-field-dnd-span:hover {
@@ -7,49 +7,90 @@
cursor: "move",
opacity: 0.4,
revert: "invalid",
revertDuration: 200
revertDuration: 200,
drag: function(event, ui) {
var padding = 20;
var draggedElement = $(this);
$(".filter-select-field-dnd-span").each(function(i, e) {
if ($(this).attr('id') != draggedElement.attr('id'))
{
$(this).removeClass("selection-after");
$(this).removeClass("selection-before");
var elementCenter = $(this).offset().left + ((padding + $(this).width()) / 2);
if (event.pageX > ($(this).offset().left - (padding / 2))
&& event.pageX < ($(this).offset().left + $(this).width() + (padding / 2)))
{
if (event.pageX > elementCenter)
{
$(this).addClass("selection-after");
$(this).removeClass("selection-before");
}
else if (event.pageX < elementCenter)
{
$(this).addClass("selection-before");
$(this).removeClass("selection-after");
}
}
}
});
}
});
$(".filter-select-field-dnd-span").droppable({
accept: ".filter-select-field-dnd-span",
over: function(event, ui) {
$(this).on("mousemove", function( event ) {
var padding = 20;
var elementCenter = $(this).offset().left + (padding + $(this).width() / 2);
if (event.pageX > elementCenter)
{
$(this).addClass("selection-after");
$(this).removeClass("selection-before");
}
else if (event.pageX < elementCenter)
{
$(this).addClass("selection-before");
$(this).removeClass("selection-after");
}
});
},
out: function(event, ui) {
$(this).off("mousemove");
$(this).removeClass("selection-before");
$(this).removeClass("selection-after");
},
drop: function(event, ui) {
var padding = 20;
var elementCenter = $(this).offset().left + (padding + $(this).width() / 2);
var elementCenter = $(this).offset().left + ((padding + $(this).width()) / 2);
var draggedElement = ui.helper;
if (event.pageX > elementCenter)
{
$(this).insertBefore(ui.draggable);
draggedElement.insertAfter($(this));
}
else if (event.pageX < elementCenter)
{
$(this).insertAfter(ui.draggable);
draggedElement.insertBefore($(this));
}
$(this).off("mousemove");
$(this).removeClass("selection-before");
$(this).removeClass("selection-after");
draggedElement.css({left: '0px', top: '10px'});
var arrayDndId = [];
$(".filter-select-field-dnd-span").each(function(i, e) {
arrayDndId[i] = $(this).attr('id').replace('dnd', '');
});
$.ajax({
url: "<?php echo base_url('index.ci.php/system/Filters/sortSelectedFields'); ?>",
method: "POST",
data: {
selectedFieldsLst: arrayDndId
}
})
.done(function(data, textStatus, jqXHR) {
resetSelectedFields();
renderSelectedFields();
renderTableDataset();
}).fail(function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
});
}
});
}
@@ -137,10 +178,12 @@
var fieldToDisplay = arrayFieldsToDisplay[i];
var fieldName = data.selectedFields[i];
var strHtml = '<span class="filter-select-field-dnd-span">';
var strHtml = '<span id="dnd' + fieldName + '" class="filter-select-field-dnd-span">';
strHtml += '<span>';
strHtml += fieldToDisplay;
strHtml += '<a class="remove-field" fieldToRemove="' + fieldName + '">X</a>';
strHtml += '</span>';
strHtml += '<span><a class="remove-field" fieldToRemove="' + fieldName + '"> X </a></span>';
strHtml += '</span>';
$("#filterSelectFieldsDnd").append(strHtml);
}