From 54a46bec3d17ca9a1c6dcee7abd416e4647bca3e Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Mon, 4 Jun 2018 13:24:20 +0200
Subject: [PATCH] added sort option for tables with data-columns
---
javascript/src/DragAndDrop.js | 29 +++++++++++++++-------
mockup/dragAndDrop.html | 45 ++++++++++++++++++++++++++---------
2 files changed, 55 insertions(+), 19 deletions(-)
diff --git a/javascript/src/DragAndDrop.js b/javascript/src/DragAndDrop.js
index 1610ae812..a12851556 100644
--- a/javascript/src/DragAndDrop.js
+++ b/javascript/src/DragAndDrop.js
@@ -36,11 +36,23 @@ var QfqNS = QfqNS || {};
n.DragAndDrop.prototype.buildDropArea = function(position, relatedId, otherPos) {
var that = this;
+ var $dropArea = {};
+
+ if (this.$container.data("columns")) {
+ $dropArea = $("<tr />", {
+ class: "qfqDropTarget"
+ });
+ var $fluff = $("<td />", {
+ class: "qfqDropTarget",
+ colspan: this.$container.data("columns")
+ });
+ $fluff.appendTo($dropArea);
+ } else {
+ $dropArea = $("<div />", {
+ class: "qfqDropTarget"
+ });
+ }
- var $dropArea = $("<div />", {
- class: "qfqDropTarget",
- draggable: true
- });
$dropArea.data("position", position);
$dropArea.data("related", relatedId);
$dropArea.data("other-pos", otherPos);
@@ -59,6 +71,7 @@ var QfqNS = QfqNS || {};
e.originalEvent.preventDefault();
that._moveObjectBefore(e, $dropArea);
});
+
return $dropArea;
};
@@ -147,7 +160,6 @@ var QfqNS = QfqNS || {};
this.$tempObject = {};
}
$("#" + this.draggedId).appendTo($("#" + event.currentTarget.id));
- console.log("drop1");
};
n.DragAndDrop.prototype._buildOrderDropZones = function($object, e) {
@@ -164,6 +176,9 @@ var QfqNS = QfqNS || {};
};
n.DragAndDrop.prototype.removeDropAreas = function() {
+ if (this.$container.data("column")) {
+ this.$container.children(".qfqTempTable").remove();
+ }
this.$container.children(".qfqDropTarget").remove();
};
@@ -221,8 +236,6 @@ var QfqNS = QfqNS || {};
};
n.DragAndDrop.prototype._sendToAPI = function(object) {
- console.log("Api request:" + this.api + "&key=" + this.key);
- console.log(JSON.stringify(object));
var that = this;
$.getJSON(this.api, object, function(data) {
that._successHandler(data);
@@ -242,7 +255,7 @@ var QfqNS = QfqNS || {};
alert.show();
console.error(data.message);
} else {
- console.log(data.message);
+ console.log("status:" + data.status + " message: " + data.message);
}
};
diff --git a/mockup/dragAndDrop.html b/mockup/dragAndDrop.html
index 85782e9df..3df2ba1cd 100644
--- a/mockup/dragAndDrop.html
+++ b/mockup/dragAndDrop.html
@@ -90,6 +90,36 @@
Numbero Siesta
</div>
</div>
+
+ <h2>Table</h2>
+
+ <table class="table table-hover">
+ <tbody class="qfq-dnd-sort"
+ data-dnd-api="typo3conf/ext/qfq/qfq/api/dragAndDrop.php?s=5b15109182850"
+ data-columns="3">
+ <tr id="table-125" data-dnd-id="125">
+ <td>125</td>
+ <td>eins</td>
+ <td>10</td>
+ </tr>
+ <tr id="table-126" data-dnd-id="126">
+ <td>126</td>
+ <td>zwei</td>
+ <td>20</td>
+ </tr>
+ <tr id="table-128" data-dnd-id="128">
+ <td>128</td>
+ <td>vier</td>
+ <td>30</td>
+ </tr>
+ <tr id="table-127" data-dnd-id="127">
+ <td>127</td>
+ <td>drei</td>
+ <td>40</td>
+ </tr>
+ </tbody>
+ </table>
+
<hr>
<h2>Playing with baskets</h2>
<div class="qfq-dnd" style="margin-top: 20px;"
@@ -136,19 +166,12 @@
<script type="text/javascript">
$(function () {
- var qfqPage = new QfqNS.QfqPage({
- tabsId: 'myTabs',
- formId: 'myForm',
- submitTo: 'api/' + $("#submitTo").val(),
- deleteUrl: 'api/' + $("#deleteUrl").val(),
- fileUploadTo: 'api/' + $("#uploadTo").val(),
- fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
- });
- QfqNS.Log.level = 0;
- var dragi = new QfqNS.DragAndDrop($('.qfq-dnd-sort'));
- dragi.makeSortable();
+ $('.qfq-dnd-sort').each(function() {
+ var dndObject = new QfqNS.DragAndDrop($('.qfq-dnd-sort'));
+ dndObject.makeSortable();
+ });
var zoni = new QfqNS.DragAndDrop($('.qfq-dnd'));
zoni.makeBasketCase();
--
GitLab