Complete to write sitemap.js

git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8730 201d5d3c-b55e-5fd7-737f-ddc643e51545

modules/admin/tpl/css/admin.css

@@ -278,7 +278,7 @@ button.text{border:0;overflow:visible;padding:0;margin:0;color:#33a;background:n
 /* Dashboard */
 .dashboard{position:relative;float:none;width:auto;margin-left:-230px}
 .dashboard .portlet{float:left;width:48%;margin-right:1em}
-.dashboard .portlet:nth-of-type(even){ float:left;width:49%;margin-right:0 }
+.dashboard .portlet:nth-of-type(even){ float:left;width:49%;margin-right:0}
 .dashboard .portlet:nth-of-type(even){ float:right;width:49%;margin-right:0}
 /* Local Navigation */
 .lnb{position:relative;float:left;width:200px;margin:1em 0 1em -230px;line-height:normal;zoom:1;display:inline}
@@ -363,6 +363,9 @@ button.text{border:0;overflow:visible;padding:0;margin:0;color:#33a;background:n
 .siteMap .tgMap{position:absolute; top:12px; right:1em; padding:0 16px 0 0; line-height:16px; background:url(../img/iconArrow.gif) no-repeat right -126px}
 .siteMap.fold .tgMap{background-position:right -158px}
 .siteMap.fold .h2{border-bottom-color:#fff; border-radius:5px}
+.siteMap .placeholder{background:#bbb}
+.siteMap .draggable,
+.siteMap .draggable .moveTo{background-color:#ddd}
 /* Button Area */
 .btnArea{margin:1em 0;text-align:right;zoom:1}
 .btnArea:after{content:"";display:block;clear:both}

modules/admin/tpl/js/sitemap.js

@@ -1,43 +1,153 @@
 /* NHN (developers@xpressengine.com) */
 jQuery(function($){
 
-$('form.siteMap')
+var 
-	.find('li')
+	dragging = false,
-		.prepend('<button type="button" class="moveTo">Move to</button>')
+	$holder  = $('<li class="placeholder">');
-		.append('<span class="vr"></span><span class="hr"></span>')
-		.mouseover(function(){
-			$(this).addClass('active');
-			return false;
-		})
-		.mouseout(function(){
-			$(this).removeClass('active');
-			return false;
-		})
-		.mousedown(function(event){
-			var $this, $clone, $target = $(event.target), $uls, $ghost, $last;
 
-			if($target.is('a,input:text,textarea')) return;
+$('form.siteMap')
+	.delegate('li:not(.placeholder)', {
+		'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);
-			$clone = $this.clone(true).find('.side,input').remove().end();
+			height = $this.height();
-			$uls   = $this.parentsUntil('form.siteMap').filter('ul');
+			width  = $this.width();
+			$uls   = $this.parentsUntil('.siteMap').filter('ul');
+			$ul    = $uls.eq(-1);
 
-			$ghost = $last = $('<ul class="lined" />');
+			$ul.css('position', 'relative');
-			for(var i=1,c=$uls.length; i < c; i++) {
+
-				$last = $last.append('<li><ul /></li>').find('>ul');
+			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();
 			}
 
-			$last.append($clone);
+			// get offsets of all list-item elements
-			$ghost
+			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({
-					backgroundColor : '#fff',
+					position: 'absolute',
-					position : 'absolute',
+					opacity : .6,
-					opacity  : .5
+					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  : '5px',
+					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) { 
+							dropzone = {element:o.item, state:setHolder(o,nTop)};
+							break;
+						}
+					}
+
+					$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>')
+		.append('<span class="vr"></span><span class="hr"></span>')
 		.find('input:text')
+			.focus(function(){
+				var $this = $(this), $label = $this.prev('label'), $par = $this.parent();
+
+				$this.width($par.width() - (parseInt($par.css('text-indent'))||0) - $this.next('.side').width() - 60).css('opacity', '');
+				$label.hide();
+			})
+			.blur(function(){
+				var $this = $(this), $label = $this.prev('label'), val = $this.val();
+
+				$this.width(0).css('opacity', 0);
+				$label.removeClass('no-text').empty().text(val).show();
+				if(!val) $label.addClass('no-text').text('---');
+			})
 			.each(function(i,input){
 				var $this = $(this), id='sitemap-id-'+i;
 
@@ -56,6 +166,32 @@ $('<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) <= 3) {
+		$holder.css({top:info.top-3,height:'5px'});
+		return 'before';
+	} else if(Math.abs(info.bottom-yPos) <= 3) {
+		$holder.css({top:info.bottom-3,height:'5px'});
+		return 'after';
+	} else {
+		$holder.css({top:info.top+3,height:'27px'});
+		return 'prepend';
+	}
+}
+
 /*
 $('.tgMap').click(function(){
 	var t = $(this);