From ee1a6ccb20ee0fda3a96c5ebcbc542b6a29f3e35 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 2 Mar 2012 21:23:30 +0100
Subject: [PATCH] Added JS and CSS for sortable lists

---
 wcfsetup/install/files/acp/style/wcf.css |  41 ++++++++
 wcfsetup/install/files/js/WCF.js         | 122 +++++++++++++++++++++++
 2 files changed, 163 insertions(+)

diff --git a/wcfsetup/install/files/acp/style/wcf.css b/wcfsetup/install/files/acp/style/wcf.css
index 5546e2670b..0764b7d939 100644
--- 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 10e91bf646..ab0d2ddfd3 100644
--- 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.
  */
-- 
2.20.1