mirror of
https://github.com/gtbu/Typesetter-5.3-p8.git
synced 2024-11-24 23:29:12 +01:00
198 lines
4.3 KiB
JavaScript
198 lines
4.3 KiB
JavaScript
|
|
||
|
WBd = {
|
||
|
|
||
|
scroll:false,
|
||
|
scrolly:0,
|
||
|
scrollx:0,
|
||
|
scrolle:false,
|
||
|
|
||
|
//DragMouseUP
|
||
|
DMU : function(e){
|
||
|
|
||
|
//this doesn't prevent clicks from happening
|
||
|
//if( WBd.started ){
|
||
|
//e.stopPropagation();
|
||
|
//e.preventDefault();
|
||
|
//}
|
||
|
|
||
|
var a = $('.draggable_droparea > .target');
|
||
|
if( a.length < 1 ){
|
||
|
WBd.clean();
|
||
|
return;
|
||
|
}
|
||
|
var b = a.get(0);
|
||
|
if( !b || (b == WBd.dragEl) ){
|
||
|
WBd.clean();
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
|
||
|
var lnk = $(WBd.dragEl).find('a.dragdroplink').first();
|
||
|
if( lnk.length < 1 ){
|
||
|
WBd.clean();
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
lnk = lnk.clone(true).appendTo('body'); //append to body so the click works
|
||
|
|
||
|
var c = a.find('a.dragdroplink').first().html();
|
||
|
lnk.attr('href',lnk.attr('href').replace('%s',c).replace('%25s',c));
|
||
|
lnk.trigger('click');
|
||
|
|
||
|
WBd.clean();
|
||
|
},
|
||
|
|
||
|
|
||
|
//clean up
|
||
|
clean : function(){
|
||
|
|
||
|
$('.draggable_droparea').removeClass('drag_active'); //important for proper css display of drop down menus
|
||
|
|
||
|
$('.WB_DRAG_BOX').hide();
|
||
|
|
||
|
//remove listeners
|
||
|
$(document).off('mousemove.drag',WBd.DMM).off('mouseup.drag',WBd.DMU);
|
||
|
$('.draggable_droparea > *').off('mouseover.drag').off('mouseout.drag').removeClass('target');
|
||
|
|
||
|
WBd.VARS();
|
||
|
|
||
|
},
|
||
|
|
||
|
VARS : function(){
|
||
|
WBd.dragEl = false;
|
||
|
WBd.started = false;
|
||
|
},
|
||
|
|
||
|
// DragMouseDown
|
||
|
// e event
|
||
|
dMDn : function(e){
|
||
|
var b,c,l;
|
||
|
|
||
|
//don't drag when mousing down on a drop down menu (expandable areas can be children of draggable areas)
|
||
|
if( $(e.target).closest('.expand ul').length > 0 ){
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
$(document).on('mouseup.drag',WBd.DMU);
|
||
|
|
||
|
var a = WBd.dragEl = this; //refers to draggable element in this situation
|
||
|
|
||
|
|
||
|
var margx = (a.offsetWidth/2);
|
||
|
var margy = (a.offsetHeight/2);
|
||
|
|
||
|
|
||
|
//box size and adjust margins to center them around cursor
|
||
|
$('#WB_DRAG_BOX_TOP').height('30px').width(a.offsetWidth).css('marginTop',-(margy+30)).css('marginLeft',-margx);
|
||
|
|
||
|
$('#WB_DRAG_BOX_BOTTOM').width(a.offsetWidth).css('marginTop',margy).css('marginLeft',-margx);
|
||
|
|
||
|
$('#WB_DRAG_BOX_LEFT').height(a.offsetHeight).width(1).css('marginTop',-margy).css('marginLeft',-margx);
|
||
|
|
||
|
$('#WB_DRAG_BOX_RIGHT').height(a.offsetHeight).width(1).css('marginTop',-margy).css('marginLeft',margx);
|
||
|
|
||
|
|
||
|
//position box
|
||
|
$(document).on('mousemove.drag',WBd.DMM);
|
||
|
//WBd.DMM(e);
|
||
|
|
||
|
|
||
|
return false;
|
||
|
},
|
||
|
|
||
|
|
||
|
//DragMouseMove
|
||
|
DMM : function(e){
|
||
|
if( !e ) return; //because of scrolling
|
||
|
|
||
|
if( !WBd.started ){
|
||
|
WBd.started = true;
|
||
|
|
||
|
//setting the target
|
||
|
$('.draggable_droparea > *:not([class~=draggable_nodrop])').on('mouseover.drag',function(){
|
||
|
$(this).addClass('target');
|
||
|
}).on('mouseout.drag',function(){
|
||
|
$(this).removeClass('target');
|
||
|
});
|
||
|
|
||
|
|
||
|
//show drag placeholding box
|
||
|
$('.draggable_droparea').addClass('drag_active');
|
||
|
$('.WB_DRAG_BOX').show();
|
||
|
}
|
||
|
|
||
|
var x,y;
|
||
|
var wn = $(window);
|
||
|
x = (e.clientX + wn.scrollLeft());
|
||
|
y = (e.clientY + wn.scrollTop());
|
||
|
|
||
|
//move box
|
||
|
$('.WB_DRAG_BOX').css({'left':x,'top':y});
|
||
|
|
||
|
|
||
|
//scroll window if needed
|
||
|
x = y = 0;
|
||
|
|
||
|
if(e.clientY < 80 ){
|
||
|
y = -30;
|
||
|
}else if( (e.clientY + 60) > wn.height() ){
|
||
|
y = 30;
|
||
|
}
|
||
|
|
||
|
if( e.clientX < 60 ){
|
||
|
x = -30;
|
||
|
}else if( (e.clientX + 60) > wn.width() ){
|
||
|
x = 30;
|
||
|
}
|
||
|
|
||
|
if( (x === 0) && (y == 0) ){
|
||
|
WBd.SCR();
|
||
|
|
||
|
}else{
|
||
|
|
||
|
WBd.scrollx = x;
|
||
|
WBd.scrolly = y;
|
||
|
WBd.scrolle = e;
|
||
|
|
||
|
if( WBd.scroll === false ){
|
||
|
WBd.scroll = window.setInterval(function(){
|
||
|
|
||
|
//stop in case the drag ended of the screen
|
||
|
if( !WBd.dragEl ){
|
||
|
WBd.SCR();
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
window.scrollBy(WBd.scrollx,WBd.scrolly);
|
||
|
WBd.DMM(WBd.scrolle);
|
||
|
|
||
|
},150);
|
||
|
}
|
||
|
}
|
||
|
return false;
|
||
|
},
|
||
|
|
||
|
|
||
|
//SCROLL RESET
|
||
|
SCR:function(){
|
||
|
if( WBd.scroll ){
|
||
|
window.clearInterval(WBd.scroll);
|
||
|
}
|
||
|
WBd.scroll = WBd.scrolle = false;
|
||
|
}
|
||
|
|
||
|
};
|
||
|
|
||
|
|
||
|
$( function() {
|
||
|
WBd.VARS();
|
||
|
$(document).on('mousedown','.draggable_element',WBd.dMDn);
|
||
|
|
||
|
var a = $('<div style="position:absolute;z-index:10000;cursor:move;display:none;" class="WB_DRAG_BOX"></div>');
|
||
|
|
||
|
a.clone().css('borderBottom','2px dashed #bbb').attr('id','WB_DRAG_BOX_TOP').appendTo('body');
|
||
|
a.clone().css('borderLeft','2px dashed #bbb').attr('id','WB_DRAG_BOX_LEFT').appendTo('body');
|
||
|
a.clone().css('borderTop','2px dashed #bbb').attr('id','WB_DRAG_BOX_BOTTOM').appendTo('body');
|
||
|
a.clone().css('borderRight','2px dashed #bbb').attr('id','WB_DRAG_BOX_RIGHT').appendTo('body');
|
||
|
});
|