mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-14 00:39:57 +09:00
Complete to write sitemap.js
git-svn-id: http://xe-core.googlecode.com/svn/branches/1.5.0@8730 201d5d3c-b55e-5fd7-737f-ddc643e51545
This commit is contained in:
taggon
parent
8b52300149
commit
31233a32b3
2 changed files with 172 additions and 33 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,153 @@
|
|||
/* NHN (developers@xpressengine.com) */
|
||||
jQuery(function($){
|
||||
|
||||
var
|
||||
dragging = false,
|
||||
$holder = $('<li class="placeholder">');
|
||||
|
||||
$('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('<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 : '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>')
|
||||
.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 = $('<ul class="lined" />');
|
||||
for(var i=1,c=$uls.length; i < c; i++) {
|
||||
$last = $last.append('<li><ul /></li>').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 @@ $('<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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue