From 734658d256119647c798acbb9d9900f1daacfd30 Mon Sep 17 00:00:00 2001
From: taggon <gonom9@gmail.com>
Date: Tue, 23 Aug 2011 09:47:58 +0000
Subject: [PATCH] Drag&drop for Admin menu setup page

git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8845 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/admin/tpl/js/menu_setup.js | 177 +++++++++++++++++++++++++++++
 modules/admin/tpl/menu_setup.html  |  10 +-
 2 files changed, 182 insertions(+), 5 deletions(-)

diff --git a/modules/admin/tpl/js/menu_setup.js b/modules/admin/tpl/js/menu_setup.js
index f85ef04ec..5c429f160 100644
--- a/modules/admin/tpl/js/menu_setup.js
+++ b/modules/admin/tpl/js/menu_setup.js
@@ -46,3 +46,180 @@ jQuery(function($){
 	});
 });
 
+// menu - drag and drop
+jQuery(function($){
+
+var 
+	dragging = false,
+	$holder  = $('<li class="placeholder">');
+
+$('div.adminMenu')
+	.delegate('li:not(.placeholder,.parent)', {
+		'mousedown.st' : function(event) {
+			var $this, $uls, $ul, width, height, offset, position, offsets, i, dropzone, wrapper='';
+
+			if($(event.target).is('a,input,label,textarea') || event.which != 1) return;
+
+			dragging = true;
+
+			$this  = $(this);
+			height = $this.height();
+			width  = $this.width();
+			$uls   = $this.parentsUntil('.siteMap').filter('ul');
+			$ul    = $uls.eq(-1);
+
+			$ul.css('position', 'relative');
+
+			position = {x:event.pageX, y:event.pageY};
+			offset   = getOffset(this, $ul.get(0));
+
+			$clone = $this.clone(true).attr('target', true);
+
+			for(i=$uls.length-1; i; i--) {
+				$clone = $clone.wrap('<li><ul /></li>').parent().parent();
+			}
+
+			// get offsets of all list-item elements
+			offsets = [];
+			$ul.find('li').each(function(idx) {
+				if($this[0] === this || $this.has(this).length) return true;
+
+				var o = getOffset(this, $ul.get(0));
+				offsets.push({top:o.top, bottom:o.top+32, $item:$(this)});
+			});
+
+			// Remove unnecessary elements from the clone, set class name and styles.
+			// Append it to the list
+			$clone
+				.find('.side,input').remove().end()
+				.addClass('draggable')
+				.css({
+					position: 'absolute',
+					opacity : .6,
+					width   : width,
+					height  : height,
+					left    : offset.left,
+					top     : offset.top,
+					zIndex  : 100
+				})
+				.appendTo($ul.eq(0));
+
+			// Set a place holder
+			$holder
+				.css({
+					position:'absolute',
+					opacity : .6,
+					width   : width,
+					height  : '10px',
+					left    : offset.left,
+					top     : offset.top,
+					zIndex  :99
+				})
+				.appendTo($ul.eq(0));
+
+			$this.css('opacity', .6);
+
+			$(document)
+				.unbind('mousemove.st mouseup.st')
+				.bind('mousemove.st', function(event) {
+					var diff, nTop, item, i, c, o;
+
+					dropzone = null;
+
+					diff = {x:position.x-event.pageX, y:position.y-event.pageY};
+					nTop = offset.top - diff.y;
+					
+					for(i=0,c=offsets.length; i < c; i++) {
+						o = offsets[i];
+						if(o.top > nTop || o.bottom < nTop) continue;
+
+						dropzone = {element:o.$item};
+						if(o.$item.hasClass('parent')) {
+							dropzone.state = 'prepend';
+							$holder.css('top', o.bottom-5);
+						} else if(o.top > nTop - 12) {
+							dropzone.state = 'before';
+							$holder.css('top', o.top-5);
+						} else {
+							dropzone.state = 'after';
+							$holder.css('top', o.bottom-5);
+						}
+					}
+
+					$clone.css({top:nTop});
+				})
+				.bind('mouseup.st', function(event) {
+					var $dropzone, $li;
+
+					dragging = false;
+
+					$(document).unbind('mousemove.st mouseup.st');
+					$this.css('opacity', '');
+					$clone.remove();
+					$holder.remove();
+
+					// dummy list item for animation
+					$li = $('<li />').height($this.height());
+
+					if(!dropzone) return;
+					$dropzone = $(dropzone.element);
+
+					$this.before($li);
+
+					if(dropzone.state == 'prepend') {
+						if(!$dropzone.find('>ul').length) $dropzone.find('>.side').after('<ul>');
+						$dropzone.find('>ul').prepend($this.hide());
+					} else {
+						$dropzone[dropzone.state]($this.hide());
+					}
+
+					$this.slideDown(100, function(){ $this.removeClass('active') });
+					$li.slideUp(100, function(){ var $par = $li.parent(); $li.remove(); if(!$par.children('li').length) $par.remove()  });
+				});
+
+			return false;
+		},
+		'mouseover.st' : function() {
+			if(!dragging) $(this).addClass('active');
+			return false;
+		},
+		'mouseout.st' : function() {
+			if(!dragging) $(this).removeClass('active');
+			return false;
+		}
+	})
+	.find('li')
+		.prepend('<button type="button" class="moveTo">Move to</button>')
+		.filter('.parent')
+			.find('>button.moveTo').css({'visibility':'hidden','margin-left':'-12px'}).end()
+		.end()
+	.end()
+
+$('<div id="dropzone-marker" />')
+	.css({display:'none',position:'absolute',backgroundColor:'#000',opacity:0.7})
+	.appendTo('body');
+
+function getOffset(elem, offsetParent) {
+	var top = 0, left = 0;
+
+	while(elem && elem != offsetParent) {
+		top  += elem.offsetTop;
+		left += elem.offsetLeft;
+
+		elem = elem.offsetParent;
+	}
+
+	return {top:top, left:left};
+}
+
+function setHolder(info, yPos) {
+	if(Math.abs(info.top-yPos) <= 10) {
+		$holder.css({top:info.top-10,height:'10px'});
+		return 'before';
+	} else if(Math.abs(info.bottom-yPos) <= 10) {
+		$holder.css({top:info.bottom-10,height:'10px'});
+		return 'after';
+	}
+}
+
+});
diff --git a/modules/admin/tpl/menu_setup.html b/modules/admin/tpl/menu_setup.html
index 64c0bc3b5..69daced0a 100644
--- a/modules/admin/tpl/menu_setup.html
+++ b/modules/admin/tpl/menu_setup.html
@@ -1,5 +1,5 @@
 <load target="./js/menu_setup.js" />
-<load target="./js/sitemap.js" />
+
 <div class="content" id="content">
 	<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 		<p>{$XE_VALIDATOR_MESSAGE}</p>
@@ -10,18 +10,18 @@
 	<input type="hidden" name="menu_item_srl" value="" />
 	<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispAdminMenuSetup')}" />
 		<h1 class="h1">Admin Menu Setup</h1>
-		<div class="portlet">
+		<div class="adminMenu portlet">
 			<h2 class="h2"><input value="Admin Menu" disabled /></h2>
 			<ul class="lined">
 				<!--@foreach($gnbUrlList AS $key=>$value)-->
-				<li>
+				<li class="parent">
 					<input type="hidden" value="{$key}" class="_parent_key" />
-					<input value="{$value['text']}" /> <span class="side"> <a href="#editMenu" class="modalAnchor _add">Add</a> | <a href="#delete" class="_parent_delete">Delete</a></span>
+					<span>{$value['text']}</span> <span class="side"><a href="#editMenu" class="modalAnchor _add">Add</a></span>
 					<!--@if(is_array($value['list']) && count($value['list'])>0)-->
 					<ul>
 						<!--@foreach($value['list'] AS $key2=>$value2)-->
 						<input type="hidden" value="{$key2}" class="_child_key" />
-						<li><input value="{$value2['text']}" /> <span class="side"><a href="#delete" class="_child_delete">Delete</a></span></li>
+						<li><span>{$value2['text']}</span><span class="side"><a href="#delete" class="_child_delete">Delete</a></span></li>
 						<!--@end-->
 					</ul>
 					<!--@end-->