Changeset 7613

Timestamp:

07/30/08 16:02:10 (5 months ago)

Author:

architect

Message:

Updated drag / resize code

Files:

• sandbox/architect/index.php (modified) (1 diff)
• sandbox/architect/scripts/controlConfig.js (modified) (3 diffs)
• sandbox/architect/scripts/dragdrop.js (modified) (7 diffs)
• sandbox/architect/style.css (modified) (2 diffs)

sandbox/architect/index.php

@@ -175 +175 @@
-            <!--Start Map Container-->
-            <div id="mapContainer">
-
-
-
-
-
-
+
-            </div>  
-            <!--End Map Container-->
-            <div id="mapControls">
-
-
-
-
-
-
-
-
-
-
+
-            </div>
-        </div>

sandbox/architect/scripts/controlConfig.js

@@ -198 +198 @@
-    /*Set the the name to "editMode", this allows us to determine if we should clear toolbox2's content or not.  If the name = editMode, then we should clear toolbox2 once the layer delete button has been pressed*/
-    $('layerListItems').set('title', 'editMode');
+    
+    $('draggableDivTitle').innerHTML = "Button <br />" + $('layoutControlConfigTitle').value;
-}
-
@@ -343 +345 @@
-    /*Update the height*/
-    controlToggle.show()
+    
+    /*get rid of the draggable stuff*/
+    //TODO - 
+    saveMapDragBox(ID, valName, isControlNew);
+    emptyMapDrag();
+    emptyMapControls();
-}
-
@@ -377 +385 @@
-        }
-    }   */
-
+
+
-    /*pull values from OpenLayers*/
-    if(isControlNew == true){

sandbox/architect/scripts/dragdrop.js

@@ +1 @@
+/*global div object*/
+var divs = { 
+        "div":[]
+        /*"ID":"",
+        "name":"",
+        "x":"",
+        "y":"",
+        "width":"",
+        "height":""*/};
+
+var divsLength;
-/*global dragLimits*/
-var dragLimitMaxX = 630;
-var dragLimitMaxY = 500;
+
+var dragLimitMinY = 25;
-
-/*global resizeLimits*/
@@ -10 +23 @@
-var resizeableEl;
-
-45
-2
+0
+3
-
-
+
+
+
+
+
+
+
+
+
-    /*If we wanted to confine the limits to a certain width or height, we would just specify the values instead of getting the style. i.e. elWidth = 200
-    get element styles - use mootools to get the style, otherwise we'd have to use something like .offsetWidth - borderWidth which isn't as pretty*/
@@ -39 +60 @@
-            
-            /*set the limit to the variable set above*/
-0
+(dragLimitMinY * -1)
-            
+            /*Update the values in the mapControls div*/
-            $('elementX').value = parseInt(this.element.getStyle('left'));
-
+ + dragLimitMinY
-        },
-        onComplete: function(el){
@@ -49 +71 @@
-    });
-    
-
+
-    /*Make the resizeable div.  In this case, there's a small div in the bottom righthand corner that will resize the entire div*/
-    resizeableEl = $('draggableDivContainer').makeResizable({
@@ -58 +80 @@
-            reSizeLimitMaxX = elWidth - parseInt(this.element.getStyle('left'));
-            reSizeLimitMaxY = elHeight - parseInt(this.element.getStyle('top'));
-
+
+
+
-            $('elementWidth').value = parseInt(this.element.getStyle('width'));
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        },
-        onComplete: function(){
-        }
-    });
-
-
+
-
-function editElementConfig(){
@@ -80 +120 @@
-    
-    var xPos = parseInt($('elementX').value);
-
+ - dragLimitMinY
-    var elWidth = parseInt($('elementWidth').value);
-
+ + dragLimitMinY
-    
-    if(xPos < dragLimitMaxX)
@@ -92 +132 @@
-        draggableEl.element.setStyle('width', elWidth);
-    if(elHeight < reSizeLimitMaxY && elHeight > resizeLimitMinY)
-
-
-
+
-}
+function emptyMapDrag() {
+    $('mapContainer').innerHTML = "";
+}
+function emptyMapControls() {
+    $('mapControls').innerHTML = "";
+}
+function populateMapControls(){
+    $('mapControls').innerHTML =   "<form id='mapControlsForm'>"
+                    +"  X Position:<input id='elementX' type='text' value='0' size='3'>"
+                    +"  Y Position:<input id='elementY'type='text' value='30' size='3'>"
+                    +"  <br />"
+                    +"  Width:<input id='elementWidth' type='text' value='80' size='3'>"
+                    +"  Height:<input id='elementHeight' type='text' value='70' size='3'>"
+                    +"  <br />"
+                    +"  <input id='editElement' onclick='editElementConfig();' type='button' value='Edit' />"
+                    +"  <input id='saveElement' type='button' value='save' />"
+                    +"</form>";
+}
+function saveMapDragBox(ID, theName, isNew){
+/*add the current layer id to the map.layer object*/
+    if(isNew == true){
+        eval("var curControl = {'id':'" + ID + "', 'name':'" + theName + "'};");
+        divs.div.push(curControl); //add the current layer id to map.layers
+    }
+    else
+    {
+        divs.div[ID].name = theName;
+    }
+}

sandbox/architect/style.css

@@ -455 +455 @@
-#draggableDivContainer {
-    background-color:#504B42;
-5
+8
-    left:0px;
-    position:relative;
-    top:0px;    
-5
+10
-}
- 
-#draggableDiv {
-    background:#628D9D;
+    border:1px solid #415E69;
-    cursor:move;
-
-
+
+
+
-    position:absolute;
+    text-align:center;
-    top:0px;
-    width:100%; 
@@ -481 +484 @@
-    width:15px;
-}
-
+
+
+
+
+
+
+
+
+
+
-/*=======================
-|   Colors