diff --git a/modules/admin/tpl/css/admin.css b/modules/admin/tpl/css/admin.css
index d783ee9c1..9fe9f87dc 100644
--- a/modules/admin/tpl/css/admin.css
+++ b/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}
diff --git a/modules/admin/tpl/js/sitemap.js b/modules/admin/tpl/js/sitemap.js
index ea5c6177a..fc28e411e 100644
--- a/modules/admin/tpl/js/sitemap.js
+++ b/modules/admin/tpl/js/sitemap.js
@@ -1,43 +1,153 @@
/* NHN (developers@xpressengine.com) */
jQuery(function($){
+var
+ dragging = false,
+ $holder = $('
');
+
$('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);
+ 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('').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 : '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 = $('').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('');
+ $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('')
.append('')
- .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;
-
- $this = $(this);
- $clone = $this.clone(true).find('.side,input').remove().end();
- $uls = $this.parentsUntil('form.siteMap').filter('ul');
-
- $ghost = $last = $('');
- for(var i=1,c=$uls.length; i < c; i++) {
- $last = $last.append('').find('>ul');
- }
-
- $last.append($clone);
- $ghost
- .css({
- backgroundColor : '#fff',
- position : 'absolute',
- opacity : .5
- });
-
- return false;
- })
.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 @@ $('')
.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);