From 0299d7837c7e14434e59b6a6219976082f09422a Mon Sep 17 00:00:00 2001
From: Doug Bell <doug@plainblack.com>
Date: Tue, 19 Apr 2011 18:13:03 -0500
Subject: [PATCH] start on new layout draggables

---
 lib/WebGUI/Asset/Wobject/Layout.pm            |   2 +
 .../upgrades/7.10.4-8.0.0/default_page.wgpkg  | Bin 0 -> 1282 bytes
 www/extras/admin/admin.js                     |  27 ++
 www/extras/admin/layout.js                    | 353 ++++++++++++++++++
 www/extras/draggable.css                      |  12 +-
 5 files changed, 392 insertions(+), 2 deletions(-)
 create mode 100644 share/upgrades/7.10.4-8.0.0/default_page.wgpkg
 create mode 100644 www/extras/admin/layout.js

diff --git a/lib/WebGUI/Asset/Wobject/Layout.pm b/lib/WebGUI/Asset/Wobject/Layout.pm
index 2d70f6039..27104a286 100644
--- a/lib/WebGUI/Asset/Wobject/Layout.pm
+++ b/lib/WebGUI/Asset/Wobject/Layout.pm
@@ -235,6 +235,8 @@ sub prepareView {
         unshift @{ $vars{"position1_loop"} }, reverse @children;
     }
 
+    # NOTE: This is the old way of doing the Layout drag/drop. The new way is injected by the WebGUI Admin
+    # Interface if certain elements are present in the template
     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
diff --git a/share/upgrades/7.10.4-8.0.0/default_page.wgpkg b/share/upgrades/7.10.4-8.0.0/default_page.wgpkg
new file mode 100644
index 0000000000000000000000000000000000000000..8aad02a3454c03bc90a68149917f31b5c7390fd0
GIT binary patch
literal 1282
zcmV+d1^xOTiwFP!00000|Ls?8Pa`)F&S!pwyPsOAdD(1Unlz0B+zXt5A^|;BrA5xJ
zNqlVVt?f<7o%rt^d%bHX1a#7owjb~ZL}tb_;~CHMcpJ6duU4zo?{;goRx9jx!&)us
z7YkLZRSUyzH|m5@6h<`^hEXr9A=t9}l}m*Mq_!lJX-=Px$M}RNtEcsFNLc!idOdCT
zKhv0OL-#ivnE#{3C&}3h<q95qoz9c}?{%W~M*lm#s9!_>N)>n2|HcayZ^v%F?7<KQ
zQgMN&BtS#-$DcnMQ6_jsgrY=hsWH=*IXxi@l4@CK47D)DQoX&;xKJe7H})(~(@Gr+
zf<bez(z}8vs1!Eraq{*a&$HCTU)u?@sf;wp@<~eNj3jRN9a$~8NKCxIi5Xdbq%7e}
z6RqVGa>aNi>Ery!y%P9{;N%id<vEV;Ad1d(lu~wwW`f-Qavl8D{657io~uSI<qtn!
z2S|_<<Wj9t0*Mg?BDKm0$P{>Nf*DAfW0$~MoEMBR`mSEjpna%FuwM6K@+BkUN)mBg
zoXM*`mXatdK0i><05kg4pKiyco(t3RAR)InPt}bM=d@Iw3$D06{btdrJfcZLn30EW
zONIrWYvGrN>N-pX&oj6T2~~x8+u17u`IVPpl+XpD2~@f`@kl3sv%mt`GaZrpF%&<B
zizzEBWRt%R#@FncjWA+(uG>YEM-KFE6JWb;JZj>?iHS^akt9-5&Ki(J11EFJeq~^w
z3C{VBIa7kC5)`AR-MH>0p%PBHx}+*4TBAm@_SiX4Mm}nS@M#xB#)4)Fk^v)=fUZ_q
zio~f+9khX7E{JDQI)MAt^u%z%tmh`Uew+%JqY0T(hB7Xx&IE<XY%+~2Q&~>yx*~+B
zdTCcyeT%9d+P=ALQ_iz0M0lfr+Qf`abxAyL=6=-OVQJ#ulR^&Nr1FZzd_JcNaBGZm
z_oHq+c<s}dNrx+!^KB33=|{F++Sa<TN$U|tgeBE+s*2ey&~Lwu`ba6k0%}q^1q<D$
zXC?w!WjP2%OKbo)YLv~0pz2Db?*yNpV*wr79BZr;j%Rbw$Pe&P(CRhdHa$Lr@iH4f
zlF9q4<Kb{$BhGMmS<Z4b`3C0?XP8a5(FDLSvFsEWblUP>ap`L^I^_wyr547+s1>z4
zKXp4E_F1U;jgo>U`fk4&GL!b30_@QF2H0tU!jpoo0uR&V9nH?Tg2*w}w|=u|P_EpJ
z_A}mfCGvvOa0VQ_@EOnCy$kxesA@Rqduaop0?I#E?&0w0^7Q0!@u@uFn)3>NUTY(j
zwg$$pe^gD(wqZs$81x5&ZolpEtso1kG4V|a+uIre)B%KBb=S2am!zQLl9){x&%K=S
z<uQB5#k?q&mz~CSnc=vo(}|&N=b5lrtTJV~s%hTyS+b1(2&iD>naO&NYrdIhDpcCe
zG3$Wyh+nGR8{G0$%;GjX+R%9KLy<=e2BBR(o<?ul#v&znd4OsRcf=n>ZrgdoJt}t2
z7p_E(BQ`4Wb-b|Fh%KD(4UFLCMd7J^C1#Ta5qhMnHzNGw&7FA*>p9&3k&Bgt$=V!X
zDvNK1ZBS~kql6^?lfisTtbt0{?nHxbZ_slY0~P`^*`)E=*<r8!_sRZ6@A9DDx;Z`k
s{gYfe;|geOe){X@VeesY#~)s=?q4hLT7lOJ{Kpme2O)QVvj7$V00h5+K>z>%

literal 0
HcmV?d00001

diff --git a/www/extras/admin/admin.js b/www/extras/admin/admin.js
index 2aa28406c..84b4e0d0a 100644
--- a/www/extras/admin/admin.js
+++ b/www/extras/admin/admin.js
@@ -85,6 +85,33 @@ WebGUI.Admin = function(cfg){
                     }
                 }
             );
+
+        // For layout types, create draggable handlers
+        if ( this.currentAssetDef.className == "WebGUI::Asset::Wobject::Layout" ) {
+            YAHOO.util.Get.css( [
+                    getWebguiProperty( 'extrasURL' ) + 'draggable.css'
+                ], 
+                {
+                    win : viewWin
+                }
+            );
+            YAHOO.util.Get.script( [
+                    getWebguiProperty( 'extrasURL' ) + 'yui/build/yahoo-dom-event/yahoo-dom-event.js',
+                    getWebguiProperty( 'extrasURL' ) + 'yui/build/utilities/utilities.js',
+                    getWebguiProperty( 'extrasURL' ) + 'yui/build/element/element-min.js',
+                    getWebguiProperty( 'extrasURL' ) + 'yui/build/animation/animation-min.js',
+                    getWebguiProperty( 'extrasURL' ) + 'yui/build/dragdrop/dragdrop-min.js',
+                    getWebguiProperty( 'extrasURL' ) + 'admin/layout.js'
+                ],
+                {
+                    win : viewWin,
+                    onSuccess : function(data) {
+                        new data.win.WebGUI.Layout(data.win.document.body);
+                    }
+                }
+            );
+        }
+
     }, this );
 
     // Private methods
diff --git a/www/extras/admin/layout.js b/www/extras/admin/layout.js
new file mode 100644
index 000000000..9e64b5555
--- /dev/null
+++ b/www/extras/admin/layout.js
@@ -0,0 +1,353 @@
+
+
+/**
+ * WebGUI.Layout -- Handle drag/drop of assets inside of layouts
+ */
+
+bind = function ( scope, func ) {
+    return function() { func.apply( scope, arguments ) }
+};
+
+if ( typeof WebGUI == "undefined" ) {
+    WebGUI = {};
+}
+/**
+ * Initialize the layout positions and drag/drop inside the given element
+ * cfg is an object of configuration:
+ *      url     = the URL to save the layout to
+ *
+ */
+WebGUI.Layout = function (elem, cfg) {
+    this.elem       = elem;
+    this.cfg        = cfg;
+
+    // Some special vars
+    this.scrollJump = 50;
+
+    // Init layout positions
+    var positions   = this.getPositions();
+    for ( var i = 0; i < positions.length; i++ ) {
+        var pos = positions[i];
+        var children = this.getPositionElements( pos );
+        if ( children.length == 0 ) {
+            // No child nodes, create an empty target
+            this.addBlankTarget(pos);
+        }
+        else {
+            // Check the child nodes for the right IDs to initialize dragdrop
+            for ( var x = 0; x < children.length; x++ ) {
+                var elem = children[x];
+                if ( elem.id.match(/wg-content-asset-(.{22})/) ) {
+                    new WebGUI.LayoutItem( elem, null, null, this );
+                }
+            }
+        }
+    }
+};
+
+/**
+ * Get all the position wrapper elements
+ */
+WebGUI.Layout.prototype.getPositions
+= function () {
+    return YAHOO.util.Dom.getElementsByClassName( 'wg-content-position', '*', this.elem );
+};
+
+/**
+ * Get all the elements inside of a given position
+ */
+WebGUI.Layout.prototype.getPositionElements
+= function ( pos ) {
+    return pos.getElementsByTagName( '*' );
+};
+
+/**
+ * Adjust the scrollbars to keep the content visible
+ */
+WebGUI.Layout.prototype.adjustScroll
+= function (e) {
+    scrY=0;
+    scrX=0;
+
+    // Y scroll
+    if (e.clientY > document.body.clientHeight-this.scrollJump) {
+        if (e.clientY + document.body.scrollTop < pageHeight - (this.scrollJump + 60)) {
+            scrY=this.scrollJump;
+            window.scroll(document.body.scrollLeft,document.body.scrollTop + scrY);
+            y-=scrY;
+        }
+    }else if (e.clientY < this.scrollJump) {
+        if (document.body.scrollTop < this.scrollJump) {
+            scrY = document.body.scrollTop;
+        }else {
+            scrY=this.scrollJump;
+        }
+        window.scroll(document.body.scrollLeft,document.body.scrollTop - scrY);
+        y+=scrY;
+    }
+
+    // X scroll
+    if (e.clientX > document.body.clientWidth-this.scrollJump) {
+        if (e.clientX + document.body.scrollLeft < pageWidth - (this.scrollJump + 60)) {
+            scrX=this.scrollJump;
+            window.scroll(document.body.scrollLeft + scrX,document.body.scrollTop);
+            x-=scrX;
+        } 
+    }else if (e.clientX < this.scrollJump) {
+        if (document.body.scrollLeft < this.scrollJump) {
+            scrX = document.body.scrollLeft;
+        }else {
+            scrX=this.scrollJump;
+        }
+        window.scroll(document.body.scrollLeft - scrX,document.body.scrollTop);
+        x+=scrX;
+    }
+};
+
+/**
+ * Add a blank drag target to an area. Used to provide a position with no children a
+ * a place to make babies
+ */
+WebGUI.Layout.prototype.addBlankTarget
+= function ( el ) {
+    var blank = document.createElement("div");
+    blank.className="blank";
+    blank.id = "blank" + new Date().getTime() + blankCount++;
+    el.appendChild(blank);
+    blank.style.top     = 0+"px";
+    blank.style.left    = 0+"px";
+
+    // Add child for target
+    var empty = document.createElement("div");
+    blank.appendChild( empty );
+    empty.className = "empty";
+
+    return new YAHOO.util.DDTarget(blank);
+};
+
+/**
+ * Move the content
+ */
+WebGUI.Layout.prototype.move
+= function (from,to,position) {
+    if (from!=to && from && to) {
+        var fromParent = from.parentNode;
+        fromParent.removeChild(from);
+
+        // If we've removed the last one, add a blank element
+        if ( this.getPositionElements(fromParent).length == 0) {
+            this.addBlankTarget(fromParent);
+        }
+
+        var toParent = to.parentNode;
+        var toChildren = this.getPositionElements(toParent);
+
+        if ( this.isBlank( toChildren[0] ) ) {
+            toParent.removeChild(toChildren[0]);
+            toParent.appendChild(from);
+        }
+        else if (position == "top") {
+            toParent.insertBefore( from, to );
+        }
+        else {
+            children = this.getPositionElements(toParent);
+            i=0;
+            while (children[i] != to && i < children.length) {
+                i++;
+            }
+
+            if (i == children.length - 1) {
+                toParent.appendChild(from);
+            }
+            else {
+                toParent.insertBefore(from,children[i+1]);
+            }
+        }
+    }
+};
+
+/**
+ * Check if a layout position is blank
+ */
+WebGUI.Layout.prototype.isBlank
+= function ( obj ) {
+    return obj.className.indexOf( "blank" ) == -1;
+};
+
+/**
+ * Save the new layout to the server, using the configured URL
+ */
+WebGUI.Layout.prototype.save
+= function () {
+    // Create the content map
+    contentMap = "";
+    contentCount=1;
+    var contentArea = document.getElementById("position1");
+    while (contentArea) {
+        if ((contentMap != "") || ( contentCount == 2 )) {
+            contentMap+=".";
+        }
+
+        //get down to the tr area
+        children = dragable_getElementChildren(contentArea);
+        children=dragable_getElementChildren(children[0]);
+        for (i=0;i<children.length;i++) {
+            if (contentMap != "" && (contentMap.lastIndexOf(".") != contentMap.length-1)) {
+                contentMap+=",";
+            }
+
+            if ( !this.isBlank( children[i] ) ) {
+                contentMap+=children[i].id.replace(/^wg-content-asset-/,"");
+            }
+        }
+
+        contentCount++;
+        contentArea = document.getElementById("position" + contentCount);
+    }
+
+    // Send it off!
+    YAHOO.util.Connect.asyncRequest( this.cfg.url + '?' + contentMap, {} );
+};
+
+/****************************************************************************
+ * WebGUI.LayoutItem -- a single item in a layout
+ */
+WebGUI.LayoutItem
+= function(elem, sGroup, config, layout) {
+    this.elem   = elem;
+    this.layout = layout;
+
+    WebGUI.LayoutItem.superclass.constructor.call(this, elem, sGroup, config);
+    // Add a dragger control
+    var dragger    = document.createElement( 'div' );
+    dragger.className = "draggable";
+    var dragTrigger = document.createElement( 'div' );
+    dragTrigger.className = "dragTrigger dragTriggerWrap";
+    var icon    = document.createElement( 'img' );
+    icon.src = getWebguiProperty( 'extrasURL' ) + 'icon/arrow_out.png';
+    dragTrigger.appendChild( icon );
+    dragger.appendChild( dragTrigger );
+    elem.insertBefore( dragger, elem.firstChild );
+};
+YAHOO.extend(WebGUI.LayoutItem, YAHOO.util.DDProxy);
+
+/**
+ * Function called when starting a drag
+ */
+WebGUI.LayoutItem.prototype.startDrag
+= function(x, y) {
+    // 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");
+};
+
+
+/**
+ * Function called when stopping a drag outside of a dropzone
+ */
+WebGUI.LayoutItem.prototype.onDragOut
+= function (e, id) {
+    var obj = Dom.get(id);
+    if ( this.layout.isBlank(obj) ) {
+        document.getElementById(id).className="blank";
+    }else if (obj.className == 'draggedOverTop' || obj.className == 'draggedOverBottom') {
+        document.getElementById(id).className="dragable";
+    }
+};
+
+/**
+ * Called when the drag is over, either success or fail
+ */
+WebGUI.LayoutItem.prototype.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();
+};
+
+/**
+ * Called when the item is dropped on a drag target.
+ * Update the item and update the content positions
+ */
+WebGUI.LayoutItem.prototype.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 ( !this.layout.isBlank( destination ) ){
+        destination.className = "dragable";
+        destination = Dom.get(id).parentNode.parentNode;
+    }
+    this.layout.move(target, destination, position);
+    //this.layout.save();
+};
+
+/**
+ * Called periodically while we are dragging an element
+ */
+WebGUI.LayoutItem.prototype.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;
+    this.layout.adjustScroll(e);
+},
+
+/**
+ * Called when a dragging item is over a drag target
+ */
+WebGUI.LayoutItem.prototype.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 ( this.layout.isBlank( obj ) ) {
+        document.getElementById(id).className="blankOver";
+    }else if (this.goingUp) {
+        document.getElementById(id).className="draggedOverTop";
+    }else {
+        document.getElementById(id).className="draggedOverBottom";
+    }
+}
+
diff --git a/www/extras/draggable.css b/www/extras/draggable.css
index 5d5bd846f..c1e5703bc 100644
--- a/www/extras/draggable.css
+++ b/www/extras/draggable.css
@@ -17,7 +17,6 @@ div.dragable:hover {
   color: #888888;
   background-color: #cccccc;
   border: 1px solid #888888;
-  opacity: 0.5;
   text-align: right;
 }
 .dragging{
@@ -57,4 +56,13 @@ div.dragable:hover {
   width: 50px;
   height: 100px;
 }
-
+/* TODO: Make the buttons appear inside the drag toolbar! Maybe JS?
+.wg-content-position > * {
+    position: relative;
+}
+.wg-content-position .wg-admin-toolbar {
+    position: absolute;
+    left: auto;
+    top: 0px;
+}
+*/