Updated draggable.js to wrap the YUI

This commit is contained in:
Kaleb Murphy 2009-01-16 00:34:50 +00:00
parent 96662a5f59
commit 2e47d3b2a1
3 changed files with 211 additions and 288 deletions

View file

@ -234,7 +234,11 @@ sub prepareView {
if ($vars{showAdmin}) {
# under normal circumstances we don't put HTML stuff in our code, but this will make it much easier
# for end users to work with our templates
$session->style->setScript($session->url->extras("yui/build/yahoo-dom-event/yahoo-dom-event.js"),{ type=>"text/javascript" });
$session->style->setScript($session->url->extras("yui/build/animation/animation-min.js"),{ type=>"text/javascript" });
$session->style->setScript($session->url->extras("yui/build/dragdrop/dragdrop.js"),{ type=>"text/javascript" });
$session->style->setScript($session->url->extras("draggable.js"),{ type=>"text/javascript" });
$session->style->setLink($session->url->extras("draggable.css"),{ type=>"text/css", rel=>"stylesheet", media=>"all" });
$session->style->setRawHeadTags('
<style type="text/css">

View file

@ -519,7 +519,8 @@ sub www_loadSurvey {
"edithtml", $editflag ? $editHtml : '',
"ddhtml", $html, "ids", \@ids, "type", $var->{type}
};
$self->session->http->setMimeType('application/json');
#$self->session->http->setMimeType('application/json');
# $self->session->http->setMimeType('application/json');
return to_json($return);
} ## end sub www_loadSurvey
@ -929,7 +930,7 @@ sub prepareShowSurveyTemplate {
my $out = $self->processTemplate( $section, $self->get("surveyQuestionsId") );
$self->session->http->setMimeType('application/json');
# $self->session->http->setMimeType('application/json');
return to_json( { "type", "displayquestions", "section", $section, "questions", $questions, "html", $out } );
} ## end sub prepareShowSurveyTemplate

View file

@ -5,57 +5,23 @@ var accuracy = 2;
//list of the content item names. Could be searched for, but hard coded for performance
var draggableObjectList=new Array();
var dragableList=new Array();
//Internal Config (Do not Edit)
//browser check
var dom=document.getElementById&&!document.all
var docElement = document.documentElement;
var pageURL = "";
var dragging=false;
var z,x,y
var accuracyCount =0;
var startTD = null;
var endTD = null;
var topelement=dom? "HTML" : "BODY"
var currentDiv = null;
var clipboard = null;
var contra = "";
var pageHeight=0;
var pageWidth=0;
var scrollJump=50;
var blankCount=1;
var draggableListOrigClassNames = []; // make sure that we're preserving the locked-asset class, if present
//checks the key Events for copy and paste operations
//ctrlC ctrlV shiftP shiftY
function dragable_checkKeyEvent(e) {
e=dom? e : event;
var Dom = YAHOO.util.Dom;
var Event = YAHOO.util.Event;
var DDM = YAHOO.util.DragDropMgr;
if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode==37 || e.keyCode==39 || e.keyCode == 66 || e.keyCode == 65){
contra+=e.keyCode;
if (contra.indexOf("38403840373937396665") != -1) {
alert("WebGUI was created by Plain Black Corporation");
contra="";
}
}else {
contra = "";
}
if (currentDiv == null) {
return;
}
if ((e.keyCode == 67 && e.ctrlKey) || (e.keyCode==89 && e.shiftKey)) {
clipboard=currentDiv;
return;
}else if ((e.keyCode == 86 && e.ctrlKey) || (e.keyCode==80 && e.shiftKey)) {
if (clipboard != currentDiv && !dragable_isBlank(clipboard)) {
dragable_moveContent(clipboard,currentDiv);
}
}
}
//goes up the parent tree until class is found. If not found, returns null
function dragable_getObjectByClass(target,clazz) {
@ -69,7 +35,201 @@ function dragable_getObjectByClass(target,clazz) {
}else {
return null;
}
}
YAHOO.webgui = {};
YAHOO.webgui.DDList = function(id, sGroup, config) {
YAHOO.webgui.DDList.superclass.constructor.call(this, id, sGroup, config);
this.logger = this.logger || YAHOO;
var el = this.getDragEl();
Dom.setStyle(el, "opacity", 0.67); // The proxy is slightly transparent
this.goingUp = false;
this.lastY = 0;
};
YAHOO.extend(YAHOO.webgui.DDList, YAHOO.util.DDProxy, {
startDrag: function(x, y) {
this.logger.log(this.id + " startDrag");
// make the proxy look like the source element
var dragEl = this.getDragEl();
var clickEl = this.getEl();
Dom.setStyle(clickEl, "visibility", "hidden");
dragEl.innerHTML = clickEl.innerHTML;
Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
Dom.setStyle(dragEl, "border", "2px solid gray");
},
//Put things back like they were
onDragOut: function(e,id){
var obj = Dom.get(id);
if (dragable_isBlank(obj)) {
document.getElementById(id).className="blank";
}else if (obj.className == 'draggedOverTop' || obj.className == 'draggedOverBottom') {
document.getElementById(id).className="dragable";
}
},
endDrag: function(e) {
var srcEl = this.getEl();
var proxy = this.getDragEl();
// Show the proxy element and animate it to the src element's location
Dom.setStyle(proxy, "visibility", "");
var a = new YAHOO.util.Motion(
proxy, {
points: {
to: Dom.getXY(srcEl)
}
},
0.2,
YAHOO.util.Easing.easeOut
)
var proxyid = proxy.id;
var thisid = this.id;
// Hide the proxy and show the source element when finished with the animation
a.onComplete.subscribe(function() {
Dom.setStyle(proxyid, "visibility", "hidden");
Dom.setStyle(thisid, "visibility", "");
});
a.animate();
},
onDragDrop: function(e, id) {
var position;
if(this.goingUp){
position = "top";
}else{
position = "bottom";
}
var target = this.getEl().parentNode.parentNode;
var destination = Dom.get(id);
if(!dragable_isBlank(destination)){
destination.className = "dragable";
destination = Dom.get(id).parentNode.parentNode;
}
dragable_moveContent(target, destination ,position);
var url = pageURL + dragable_getContentMap();
document.getElementById("dragSubmitter").src = url;
return;
// If there is one drop interaction, the li was dropped either on the list,
// or it was dropped on the current location of the source element.
if (DDM.interactionInfo.drop.length === 1) {
// The position of the cursor at the time of the drop (YAHOO.util.Point)
var pt = DDM.interactionInfo.point;
// The region occupied by the source element at the time of the drop
var region = DDM.interactionInfo.sourceRegion;
// Check to see if we are over the source element's location. We will
// append to the bottom of the list once we are sure it was a drop in
// the negative space (the area of the list without any list items)
if (!region.intersect(pt)) {
var destEl = Dom.get(id);
var destDD = DDM.getDDById(id);
destEl.appendChild(this.getEl());
destDD.isEmpty = false;
DDM.refreshCache();
}
}
},
onDrag: function(e) {
// Keep track of the direction of the drag for use during onDragOver
var y = Event.getPageY(e);
if (y < this.lastY) {
this.goingUp = true;
} else if (y > this.lastY) {
this.goingUp = false;
}
this.lastY = y;
dragable_adjustScrollBars(e);
},
onDragOver: function(e, id) {
var srcEl = this.getEl();
if(srcEl.id == id){return;}
var obj = Dom.get(id);
// We are only concerned with list items, we ignore the dragover
// notifications for the list.
if (dragable_isBlank(obj)) {
document.getElementById(id).className="blankOver";
}else if (this.goingUp) {
document.getElementById(id).className="draggedOverTop";
}else {
document.getElementById(id).className="draggedOverBottom";
}
/* if (destEl.nodeName.toLowerCase() == "li") {
var orig_p = srcEl.parentNode;
var p = destEl.parentNode;
if (this.goingUp) {
p.insertBefore(srcEl, destEl); // insert above
} else {
p.insertBefore(srcEl, destEl.nextSibling); // insert below
}
DDM.refreshCache();
}
*/
}
});
//initialization routine, must be called on load. Sets up event handlers
function dragable_init(url) {
docElement = document.documentElement;
if (document.compatMode == "BackCompat") {
docElement = document.body;
}
pageURL = url;
//window.scroll(10,500);
//set up event handlers
// document.onmouseup=dragable_dragStop;
// document.onkeydown=dragable_checkKeyEvent;
//fill the draggableObject list
obj = document.getElementById("position1");
contentCount=2;
while (obj != null) {
tbody = dragable_getElementChildren(obj);
children = dragable_getElementChildren(tbody[0]);
if (children.length == 0) {
//stick in a blank
var blank_id =dragable_appendBlankRow(tbody[0]);
new YAHOO.util.DDTarget(blank_id);
}else {
for (i = 0; i< children.length;i++) {
draggableObjectList[draggableObjectList.length] = children[i];
new YAHOO.webgui.DDList(document.getElementById(children[i].id + "_div"));
new YAHOO.util.DDTarget(document.getElementById(children[i].id + "_div"));
}
}
obj = document.getElementById("position" + contentCount);
contentCount++;
}
}
//checks to see if the scroll bars need to be adjusted
@ -77,7 +237,6 @@ function dragable_adjustScrollBars(e) {
scrY=0;
scrX=0;
if (e.clientY > docElement.clientHeight-scrollJump) {
if (e.clientY + docElement.scrollTop < pageHeight - (scrollJump + 60)) {
scrY=scrollJump;
@ -100,7 +259,7 @@ function dragable_adjustScrollBars(e) {
scrX=scrollJump;
window.scroll(docElement.scrollLeft + scrX,docElement.scrollTop);
x-=scrX;
}
}
}else if (e.clientX < scrollJump) {
if (docElement.scrollLeft < scrollJump) {
scrX = docElement.scrollLeft;
@ -112,130 +271,6 @@ function dragable_adjustScrollBars(e) {
}
}
//initialization routine, must be called on load. Sets up event handlers
function dragable_init(url) {
docElement = document.documentElement;
if (document.compatMode == "BackCompat") {
docElement = document.body;
}
pageURL = url;
//window.scroll(10,500);
//set up event handlers
document.onmouseup=dragable_dragStop;
document.onkeydown=dragable_checkKeyEvent;
document.onmousemove=dragable_move;
//fill the draggableObject list
obj = document.getElementById("position1");
contentCount=2;
while (obj != null) {
tbody = dragable_getElementChildren(obj);
children = dragable_getElementChildren(tbody[0]);
if (children.length == 0) {
//stick in a blank
dragable_appendBlankRow(tbody[0]);
}else {
for (i = 0; i< children.length;i++) {
draggableObjectList[draggableObjectList.length] = children[i];
dragableList[dragableList.length]=document.getElementById(children[i].id + "_div");
draggableListOrigClassNames[draggableListOrigClassNames.length] = dragableList[dragableList.length - 1].className;
}
}
obj = document.getElementById("position" + contentCount);
contentCount++;
}
for (i=0;i<draggableObjectList.length;i++) {
eval("document.getElementById('" + draggableObjectList[i].id + "').onmousedown=dragable_dragStart");
}
}
//called on mouse move.
function dragable_move(e){
e=dom? e : event;
if (dragging){
if (accuracyCount==accuracy) {
tmp = dragable_spy(dom? e.pageX: (e.clientX + docElement.scrollLeft),dom? e.pageY: (e.clientY + docElement.scrollTop));
if (tmp.length != 0) {
dragable_dragOver(tmp[0],tmp[1]);
}else {
//only occurs if not found
if (endTD != null) {
if (!dragable_isBlank(endTD)) {
document.getElementById(endTD.id + "_div").className="dragable";
}else {
endTD.className="blank";
}
endTDPos=null;
endTD=null;
}
}
accuracyCount=0;
}else {
accuracyCount++;
}
dragable_adjustScrollBars(e);
// alert('x is: '+ (temp1+e.clientX-x));
z.style.left=(temp1+e.clientX-x)+"px";
z.style.top=(temp2+e.clientY-y)+"px";
return false
}else {
tmp = dragable_spy(dom? e.pageX: (e.clientX + docElement.scrollLeft),dom? e.pageY: (e.clientY + docElement.scrollTop));
if (tmp.length == 0) {
currentDiv = null;
}else {
currentDiv = tmp[0];
}
}
}
function dragable_dragStart(e){
e=dom? e : event;
var fObj=dom? e.target : e.srcElement
if (fObj.className.search(/\bdragTrigger\b/) == -1) {
return;
}
fObj = dragable_getObjectByClass(fObj,"dragable");
if (fObj == null) return;
//set the start td
startTD=document.getElementById(fObj.id.substr(0,fObj.id.indexOf("_div")));
fObj.className="dragging";
//set the page height and width in a var since IE changes them when scrolling
pageHeight = docElement.scrollHeight;
pageWidth = docElement.scrollWidth;
dragging=true
z=fObj;
temp1=z.style.left;
temp1=temp1.replace(/px/g,'')+0;
temp1=parseInt(temp1);
temp2=z.style.top;
temp2=temp2.replace(/px/g,'')+0;
temp2=parseInt(temp2);
// alert(temp1,temp2);
x=e.clientX;
y=e.clientY;
return false
}
function dragable_isBlank(td) {
if (td.id.indexOf("blank") != -1) {
return true;
@ -244,126 +279,6 @@ function dragable_isBlank(td) {
}
//returns an array. array[0] holds the tr object, and array[1] holds the position (top or bottom)
function dragable_spy(x, y) {
var returnArray = new Array();
for (i=0;i<draggableObjectList.length;i++) {
td = draggableObjectList[i];
//this is a hack
if (td == null || td == startTD) continue;
var fObj=td;
y1=0;
x1=0
while (fObj!=null && fObj.tagName!=topelement){
y1+=fObj.offsetTop;
x1+=fObj.offsetLeft;
fObj=fObj.offsetParent;
}
if (x >x1 && x < (x1 + td.offsetWidth)) {
if (y> y1 && y< (y1 + (td.offsetHeight/2))) {
returnArray[0] = td;
returnArray[1] = "top";
return returnArray;
}else if (y> y1 && y< (y1 + td.offsetHeight)) {
returnArray[0] = td;
returnArray[1] = "bottom";
return returnArray;
}
}
}
return returnArray;
}
//Called when a content item is dragged over
function dragable_dragOver(obj,position) {
if (endTD == obj && endTDPos == position ) {
return;
}
if(endTD != null && endTD != obj) {
if (dragable_isBlank(endTD)) {
document.getElementById(endTD.id).className="blank";
}else {
document.getElementById(endTD.id + "_div").className="dragable";
}
}
if (dragable_isBlank(obj)) {
divName = td.id;
}else {
divName = td.id + "_div";
}
if (dragable_isBlank(obj)) {
document.getElementById(divName).className="blankOver";
endTDPos=null;
}else if (position == "top") {
endTDPos=position;
document.getElementById(divName).className="draggedOverTop";
}else {
endTDPos=position;
document.getElementById(divName).className="draggedOverBottom";
}
endTD=obj;
}
//called on mouse up, If an element is being dragged, this method does the right thing.
function dragable_dragStop(e) {
dragging=false;
if (z) {
if (endTD !=null && startTD!=null) {
dragable_moveContent(startTD,endTD,endTDPos);
startTD=null;
if (dragable_isBlank(endTD)) {
divName = endTD.id;
}else {
divName=endTD.id + "_div";
document.getElementById(divName).className="dragable";
}
var url = pageURL + dragable_getContentMap();
//window.alert(url);
document.getElementById("dragSubmitter").src = url;
}
for(i=0;i<dragableList.length;i++) {
dragableList[i].style.top=0+"px";
dragableList[i].style.left=0+"px";
dragableList[i].className = draggableListOrigClassNames[i];
// dragableList[i].className="dragable";
}
//this is a ie hack for a render bug
for(i=0;i<draggableObjectList.length;i++) {
if (draggableObjectList[i]) {
draggableObjectList[i].style.top=1+"px";
draggableObjectList[i].style.left=1+"px";
draggableObjectList[i].style.top=0+"px";
draggableObjectList[i].style.left=0+"px";
}
}
}
startTD=null;
if (endTD != null) {
endTD.position = null;
endTD=null;
}
}
//gets the element children of a dom object
function dragable_getElementChildren(obj) {
var myArray= new Array();
@ -387,6 +302,7 @@ function dragable_appendBlankRow(parent) {
blankClone.style.top=0+"px";
blankClone.style.left=0+"px";
blank.className="hidden";
return blankClone.id;
}
@ -396,12 +312,14 @@ function dragable_moveContent(from, to,position) {
if (from!=to && from && to) {
var fromParent = from.parentNode;
fromParent.removeChild(from);
console.log(fromParent);
if (dragable_getElementChildren(fromParent).length == 0) {
dragable_appendBlankRow(fromParent);
var blank_id = dragable_appendBlankRow(fromParent);
new YAHOO.util.DDTarget(blank_id);
}
var toParent = to.parentNode;
console.log(toParent);
var toChildren = dragable_getElementChildren(toParent);
if (toChildren[0].id.indexOf("blank") != -1) {
@ -438,8 +356,8 @@ function dragable_getContentMap() {
//get down to the tr area
children = dragable_getElementChildren(contentArea);
console.log(children);
children=dragable_getElementChildren(children[0]);
for (i=0;i<children.length;i++) {
if (contentMap != "" && (contentMap.lastIndexOf(".") != contentMap.length-1)) {
contentMap+=",";