From 2e47d3b2a15a33eba215c20f04c12523a62c3274 Mon Sep 17 00:00:00 2001
From: Kaleb Murphy <perlmonkey2@webgui-svn>
Date: Fri, 16 Jan 2009 00:34:50 +0000
Subject: [PATCH] Updated draggable.js to wrap the YUI

---
 lib/WebGUI/Asset/Wobject/Layout.pm |   4 +
 lib/WebGUI/Asset/Wobject/Survey.pm |   5 +-
 www/extras/draggable.js            | 490 ++++++++++++-----------------
 3 files changed, 211 insertions(+), 288 deletions(-)

diff --git a/lib/WebGUI/Asset/Wobject/Layout.pm b/lib/WebGUI/Asset/Wobject/Layout.pm
index 5af5d4976..fe2b7730d 100644
--- a/lib/WebGUI/Asset/Wobject/Layout.pm
+++ b/lib/WebGUI/Asset/Wobject/Layout.pm
@@ -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">
diff --git a/lib/WebGUI/Asset/Wobject/Survey.pm b/lib/WebGUI/Asset/Wobject/Survey.pm
index cfd9f45ae..3710cffee 100644
--- a/lib/WebGUI/Asset/Wobject/Survey.pm
+++ b/lib/WebGUI/Asset/Wobject/Survey.pm
@@ -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
 
diff --git a/www/extras/draggable.js b/www/extras/draggable.js
index 136c021b3..7ee8d3245 100644
--- a/www/extras/draggable.js
+++ b/www/extras/draggable.js
@@ -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+=",";