added option to make list sortable by dragging....

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/css/experimenting.css

@@ -193,6 +193,19 @@ body {
 .browse-widget .list .item.pinned .pin-unset {
 	display: none;
 }
+
+
+.browse-widget .list .item .sort-handle {
+	display: inline-block;
+	float: right;
+
+	padding-left: 0.2em;
+	padding-right: 0.5em;
+
+	opacity: 0.2;
+}
+
+
 /*
 .browse-widget .list .item.pinned + :not(.pinned) {
     border-top: solid 1px rgba(255, 255, 255, 0.3);

ui (gen4)/features/ui-widgets.js

@@ -447,6 +447,7 @@ var DialogsActions = actions.Actions({
 	get uiElements(){ 
 		return this.actions.filter(this.isUIElement.bind(this)) },
 
+	// XXX this knows about action priority and shortcut marker...
 	// XXX should these be more like .getDoc(..) and support lists of actions???
 	getDocPath: ['- Interface/',
 		function(action, clean, join){
@@ -459,7 +460,9 @@ var DialogsActions = actions.Actions({
 				// remove priority...
 				.map(function(e){
 					return clean ? 
-						e.replace(/^[-+]?[0-9]+:\s*/, '') 
+						e
+							.replace(/^[-+]?[0-9]+:\s*/, '')
+							.replace(/\$(\w)/g, '$1')
 						: e })
 			return join ? path.join('/') : path
 		}],
@@ -743,7 +746,7 @@ var BrowseActionsActions = actions.Actions({
 				'Crop/-80:Uncrop and keep crop image order',
 				'Crop/-81:Uncrop all',
 				'Crop/-82:$Uncrop',
-
+			// ...
 			'-40:Interface',
 			'-50:$Workspace',
 			'-60:System',
@@ -1505,19 +1508,26 @@ var WidgetTestActions = actions.Actions({
 					+'legimus, errem constituam contentiones sed ne, '
 					+'cu has corpora definitionem.'
 
+				var res = []
 				words
 					.split(/\s+/g)
 					.unique()
 					.forEach(function(c){ 
-						make(c) 
+						var e = make(c) 
 							// toggle opacity...
 							.on('open', function(){
 								var e = $(this).find('.text')
 								e.css('opacity', 
 									e.css('opacity') == 0.3 ? '' : 0.3)
 							})
+						res.push(e[0])
 					})
 
+				$(res).parent()
+					.append($('<div>')
+						.sortable()
+						.append($(res)))
+
 				make.done()
 			}, 
 			// make the dialog a cloud...
@@ -1551,7 +1561,10 @@ var WidgetTestActions = actions.Actions({
 				})
 
 				make.Heading('Numbers:')
-				make.EditableList(letters, { list_id: 'letters' })
+				make.EditableList(letters, { 
+					list_id: 'letters', 
+					sortable: 'y',
+				})
 
 				// NOTE: the dialog's .parent is not yet set at this point...
 

ui (gen4)/lib/widget/browse.js

@@ -302,7 +302,7 @@ function(text, options){
 
 	var elem = (options.action ? this.Action : this).call(this, text, options)
 		.on(start_on, function(evt){
-			event.preventDefault()
+			event && event.preventDefault()
 
 			// edit the element...
 			var editable = getEditable()
@@ -375,6 +375,9 @@ function(text, options){
 // 		// if true, disabled items will not get created...
 // 		skipDisabledItems: false,
 //
+// 		// if true, group the items into a <span> element...
+// 		groupList: true,
+//
 // 		// see: make(..) for additional option info.
 // 		...
 // 	}
@@ -422,6 +425,12 @@ function(data, options){
 		res.push(elem[0])
 	})
 
+	options.groupList !== false
+		&& $(res).parent()
+			.append($('<div>')
+				.addClass('item-group')
+				.append($(res)))
+
 	return $(res)
 }
 
@@ -492,6 +501,17 @@ function(data, options){
 // 		// If function will be used as cmp for sorting...
 // 		sort: <bool> || function(a, b){ ... },
 //
+// 		// Make list sortable...
+// 		//
+// 		// This can be:
+// 		//	true	- enable sort (both x and y axis)
+// 		//	'y'		- sort only in y axis
+// 		//	'x'		- sort only in x axis
+// 		//	false	- disable
+// 		//
+// 		// NOTE: this will force .groupList to true.
+// 		sortable: false,
+//
 // 		// This is called when a new value is added via new_item but 
 // 		// list length limit is reached...
 // 		overflow: function(selected){ ... },
@@ -685,11 +705,39 @@ function(list, options){
 		.filter(function(b){ 
 			return ['UP', 'DOWN', 'TO_TOP', 'TO_BOTTOM', 'REMOVE'].indexOf(b) < 0 })
 
+	// if we are sortable then we will need to also be grouped...
+	options.sortable
+		&& (options.groupList = true)
 
 	// make the list...
 	var res = make.List(lst, options)
 		.attr('list-id', id)
 
+	// make sortable...
+	if(options.sortable){
+		// add sort handle...
+		res.find('.button-container')
+			.before($('<span>')
+				.addClass('sort-handle')
+				.html('&#x2630;'))
+		// make the block sortable...
+		res.parent().sortable({
+			handle: '.sort-handle',
+			axis: options.sortable === true ? false : options.sortable,
+			forcePlaceholderSize: true,
+			containment: 'parent',
+			tolerance: 'pointer',
+			update: function(evt, ui){
+				var order = ui.item.parent()
+					.find('.item')
+						.map(function(){ return $(this).find('.text').text() })
+						.toArray()
+				var l = dialog.__list[id]
+				l.splice.apply(l, [0, l.length].concat(order))
+			},
+		})
+	}
+
 	// mark items for removal -- if a list is given by user...
 	to_remove.forEach(function(e){
 		dialog.filter('"'+ e +'"')
@@ -2748,7 +2796,9 @@ var BrowserPrototype = {
 			return this.select(null, filtering)
 
 		} else if(action == 'next' || action == 'prev'){
-			var to = this.select('!', filtering)[action+'All'](pattern).first()
+			var all = this.filter('*')
+			//var to = this.select('!', filtering)[action+'All'](pattern).first()
+			var to = all.eq(all.index(this.select('!', filtering)) + (action == 'next' ? 1 : -1))
 			// range check and overflow...
 			if(to.length == 0){
 				action = action == 'next' ? 'first' : 'last'
@@ -2758,6 +2808,7 @@ var BrowserPrototype = {
 
 		} else if(action == 'down' || action == 'up'){
 			var from = this.select('!', filtering)
+			var all = this.filter('*')
 
 			// special case: nothing selected -> select first/last...
 			if(from.length == 0){
@@ -2769,7 +2820,10 @@ var BrowserPrototype = {
 			t = t.top
 
 			// next lines...
-			var to = from[(action == 'down' ? 'next' : 'prev') +'All'](pattern)
+			//var to = from[(action == 'down' ? 'next' : 'prev') +'All'](pattern)
+			var to = (action == 'down' ?
+					all.slice(all.index(from))
+					: $(all.slice(0, all.index(from)).toArray().reverse()))
 				.filter(function(_, e){ return $(e).offset().top != t })
 
 			// special case: nothing below -> select wrap | last/first...