Added JS and CSS for sortable lists

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index 5546e2670be6b06cc69bad7123b6ea89677d1437..0764b7d939a4f2bce7c267b266033dcc851d3c02 100644 (file)
--- a/wcfsetup/install/files/acp/style/wcf.css
+++ b/wcfsetup/install/files/acp/style/wcf.css
@@ -4459,12 +4459,53 @@ button[disabled='disabled'] {
 
 
 
+/* ############## TODO: Sortable lists ############## */
+/* TODO: Everything is working right now and looks pretty much like similar stuff. Adjust the colors, but take care
+        when changing margins/paddings. Keep them relative to each other, otherwise you might encounter a strange
+        behavior (in rare cases) which might lead to a situation where you will be unable to move an item properly. - Alex */
+
+/* This is the placeholder (or ghost) which will be inserted on runtime in order to show the possible insertation point - Alex */
+.wcf-sortablePlaceholder {
+       background-color: rgba(255, 255, 204, 1);
+       border-radius: 5px;
+       border: 1px solid rgba(224, 224, 0, 1);
+       margin: 3px 0;
+       padding: 4px;
+}
+
+.wcf-sortableListContainer {
+       background-color: rgba(252, 253, 254, 1);
+       border-radius: 0;
+       padding: 21px;
+}
+
+.wcf-sortableList {
+       list-style-position: outside;
+       list-style-type: decimal;
+       min-height: 10px; /* Do not touch min-height, removing or changing it would break the whole stuff! - Alex */
+       margin-left: 21px;
+}
+
+.wcf-sortableNode {
+       cursor: move;
+}
 
+.wcf-sortableNodeLabel {
+       border-bottom: 1px solid rgba(216, 231, 245, 1);
+       display: block; /* Do not use anything other than block here, otherwise the sortables go crazy - Alex */
+       padding: 7px 7px 11px 0;
+}
 
+.wcf-sortableButtonContainer {
+       float: right;
+}
 
 /* ############## CSS Experiments (active) ############## */
 
 /* what is that? */
+/* Once we're determing the dimensions of an element (within JS) we move it into body and wrap it into
+   a container with class 'wcfDimensions' in order to calculate the precise dimensions. We could also
+   embed it directly into JS (using style-attribute) but I thought it was better this way. - Alex */
 .wcfDimensions {
        display: inline-block;
 }

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 10e91bf646c61b743a4ae801049ba4600176cb20..ab0d2ddfd31e9b506ff1e520328536283e3cc665 100644 (file)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -4153,6 +4153,128 @@ WCF.Upload = Class.extend({
        }
 });
 
+/**
+ * Namespace for sortables.
+ */
+WCF.Sortable = {};
+
+/**
+ * Sortable implementation for lists.
+ * 
+ * @param      string          containerID
+ * @param      string          className
+ */
+WCF.Sortable.List = function(containerID, className) { this.init(containerID, className); };
+WCF.Sortable.List.prototype = {
+       /**
+        * action class name
+        * @var string
+        */
+       _className: '',
+       
+       /**
+        * container id
+        * @var string
+        */
+       _containerID: '',
+       
+       /**
+        * container object
+        * @var jQuery
+        */
+       _container: null,
+       
+       /**
+        * notification object
+        * @var WCF.System.Notification
+        */
+       _notification: null,
+       
+       /**
+        * proxy object
+        * @var WCF.Action.Proxy
+        */
+       _proxy: null,
+       
+       /**
+        * object structure
+        * @var object
+        */
+       _structure: { },
+       
+       /**
+        * Creates a new sortable list.
+        * 
+        * @param       string          containerID
+        * @param       string          className
+        */
+       init: function(containerID, className) {
+               this._containerID = $.wcfEscapeID(containerID);
+               this._container = $('#' + this._containerID);
+               this._className = className;
+               this._proxy = new WCF.Action.Proxy({
+                       success: $.proxy(this._success, this)
+               });
+               this._structure = { };
+               
+               // init sortable
+               $('#' + this._containerID + ' .wcf-sortableList').sortable({
+                       connectWith: '#' + this._containerID + ' .wcf-sortableList',
+                       items: 'li',
+                       placeholder: 'wcf-sortablePlaceholder',
+                       stop: $.proxy(this._save, this)
+               });
+       },
+       
+       /**
+        * Saves object structure.
+        */
+       _save: function() {
+               // build structure
+               this._container.find('.wcf-sortableList').each($.proxy(function(index, list) {
+                       var $list = $(list);
+                       var $parentID = $list.data('objectID');
+                       
+                       $list.children('li').each($.proxy(function(index, listItem) {
+                               var $objectID = $(listItem).data('objectID');
+                               
+                               if (!this._structure[$parentID]) {
+                                       this._structure[$parentID] = [ ];
+                               }
+                               
+                               this._structure[$parentID].push($objectID);
+                       }, this));
+               }, this));
+               
+               // send request
+               this._proxy.setOption('data', {
+                       actionName: 'updatePosition',
+                       className: this._className,
+                       parameters: {
+                               data: {
+                                       structure: this._structure
+                               }
+                       }
+               });
+               this._proxy.sendRequest();
+       },
+       
+       /**
+        * Shows notification upon success.
+        * 
+        * @param       object          data
+        * @param       string          textStatus
+        * @param       jQuery          jqXHR
+        */
+       _success: function(data, textStatus, jqXHR) {
+               if (this._notification === null) {
+                       this._notification = new WCF.System.Notification('Ihre Änderungen wurden gespeichert.');
+               }
+               
+               this._notification.show();
+       }
+};
+
 /**
  * Provides a toggleable sidebar.
  */