Changeset 7709

Timestamp:

08/07/08 11:44:42 (3 weeks ago)

Author:

architect

Message:

--

Files:

• sandbox/architect/index.php (modified) (2 diffs)
• sandbox/architect/scripts/controlConfig.js (modified) (1 diff)
• sandbox/architect/scripts/dragdrop.js (modified) (5 diffs)
• sandbox/architect/scripts/layerConfig.js (modified) (1 diff)
• sandbox/architect/scripts/mapConfig.js (modified) (9 diffs)
• sandbox/architect/scripts/panelConfig.js (modified) (1 diff)
• sandbox/architect/style.css (modified) (4 diffs)

sandbox/architect/index.php

@@ -23 +23 @@
-    <script type="text/javascript" src="scripts/panelConfig.js"></script>
-    <script type="text/javascript" src="scripts/controlConfig.js"></script>
+    <script type="text/javascript" src="scripts/saveMap.js"></script>
-
-    <title>OL Architect - Open Layers Map Creation Application</title>
@@ -184 +185 @@
-    
-            </div>
+            <div id="mapFunctions">
+                <div class="padding5px alignRight">
+                    <form action="index.php" method="post">
+                        <input id="saveMapButton" type="button" value="Save and Create Map" />
+                    </form>
+                </div>
+            </div>
-        </div>
-    </div>

sandbox/architect/scripts/controlConfig.js

@@ -71 +71 @@
-        /*If false is returned, then the validation in the function failed*/
-        if($('tb1ControlListDropdown').selectedIndex == 0){
-
+
+
+
+
-            return;
+        }
+        if( $('siteAlerts').getStyle('opacity') > 0 ){
+            $('siteAlerts').fade(0);
-        }
-        //populate toolbox2

sandbox/architect/scripts/dragdrop.js

@@ -57 +57 @@
-    /*Create the HTML*/
-    /*create the draggable box*/
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-                    +"  <div id='draggableDivTitle'>" + theName + "</div>"
-                    +"</div>";
-    }
-
-
-
-
-
+
-    var boxID;
-    var exists = false;
-    var boxStyle = [];
-
+ - only looking for panel here
-    for(var i = 0; i < divs.div.length; i++){
-        if(divs.div[i].pID == pID){
@@ -78 +84 @@
-            exists = true;
-        }
-        /*if(divs.div[i].cID == cID && cID != 'z'){
-            boxID = i;
-            exists = true;
-        }*/
-    }
-    //console.log("pID: " + pID + " | cID:" + cID + " | boxID: " + boxID);
@@ -182 +184 @@
-            }
-        });
+    }//end if panel created
+    if(panelCreated == false){
+        var controlExists = false;
+        $('draggableDivTitle').fade(.2); //fade the panel name
+        var controlBox = new Element('div', {'id':'curControlBox' + cID, 'class':'controlBox'}); //store the controlBox div in a variable
+        $('draggableDivContainer').adopt(controlBox); //add the controlbox to the panel container
+        for(var i = 0; i < divs.div.length; i++){ //see if a control already exists
+            if(divs.div[i].cID == cID && cID != 'z'){
+                boxID = i;
+                controlExists = true
+            }
+        }
+        if(controlExists == true){
+            /*for(var i = 0; i < divs.div.length; i++){ //see if a control already exists
+                if(divs.div[i].cID != 'z'){
+                    var curControlBoxID = 'curControlBox' + i;
+                    $(curControlBoxID).setStyle('left', divs.div[boxID].xPos + "px");
+                    $(curControlBoxID).setStyle('top', divs.div[boxID].yPos + "px");
+                    $(curControlBoxID).setStyle('width', divs.div[boxID].width + "px");
+                    $(curControlBoxID).setStyle('height', divs.div[boxID].height + "px");
+                    $(curControlBoxID).innerHTML = divs.div[boxID].name;    
+                }
+            }*/
+        
+            var curControlBoxID = 'curControlBox' + cID;
+            $(curControlBoxID).setStyle('left', divs.div[boxID].xPos + "px");
+            $(curControlBoxID).setStyle('top', divs.div[boxID].yPos + "px");
+            $(curControlBoxID).setStyle('width', divs.div[boxID].width + "px");
+            $(curControlBoxID).setStyle('height', divs.div[boxID].height + "px");
+            $(curControlBoxID).innerHTML = divs.div[boxID].name;
+        }
+        populateMapControls(controlExists, boxID, true); //create the inputs for the control box
+        
-    }
-};
-
+
+/*=======================
+| editElementConfig()
+|
+| handles the input text boxes that configure the x,y,width, and height of a dragbox
+|
+=========================*/
-function editElementConfig(){
-/*calculate the limits to ensure the draggable box remains within the mapContainer*/
@@ -217 +259 @@
-function emptyMapControls() {
-    $('mapControls').innerHTML = "";
-
-
+
+
+
+
+
+
-    $('mapControls').innerHTML =   "<form id='mapControlsForm'>"
-                    +"  X Position:<input id='elementX' type='text' value='0' size='3'>"
@@ -228 +274 @@
-                    +"  <input id='editElement' onclick='editElementConfig();' type='button' value='Save' />"
-                    +"</form>";
+    $('mapControls').setStyle('border', '1px solid #415e69');
+    
+    var mapFuncPos = $('mapControls').offsetTop + $('mapControls').offsetHeight;
+    $('mapFunctions').setStyle('top', mapFuncPos);
+    
+    if(control == true){ //if a control was created
+        $('elementWidth').value = 26;
+        $('elementHeight').value = 26;
+    }
-    if(exists == true){
-        $('elementX').value = divs.div[boxID].xPos;

sandbox/architect/scripts/layerConfig.js

@@ -16 +16 @@
-        /*If false is returned, then the validation in the function failed*/
-        if ($('tb1LayerListDropdown').selectedIndex == 0){
-
+
+
+
+
-            return;
-        }
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-            return;
-        }
+        
+        /*something went right!*/
+        if( $('siteAlerts').getStyle('opacity') > 0 ){
+            $('siteAlerts').fade(0);
+        }
+        //If a control or panel is in the map area, clear it out
+        emptyMapDrag();
+        emptyMapControls();
-        createBaseLayerConfig();
-        /*When the save button is clicked when the layer is first added, add a list item to the layer list in toolbox1*/

sandbox/architect/scripts/mapConfig.js

@@ -1 +1 @@
-/*When everything is loaded, attach events to elements*/
+var isMapNew = true;
+
-window.addEvent('domready', function() {
-    /*control*/
@@ -5 +7 @@
-        /*When the new control button is clicked, populate toolbox2. */
-        //populate toolbox2
-
+
+
+
+
+
+
+
-        $('saveButton').addEvent('click', function(e) {
-            e.stop();
@@ -24 +32 @@
-| populates configuration options
-=========================*/
-
+isNew
-/*store the toolbox div in tbid (toolboxid)*/
-    var tbid = $('toolBox2Content');
@@ -44 +52 @@
-    /*Populate ToolBox 2's layer options with the layer selected in ToolBox 1's layer list dropdown - call changeLayer and pass in the controlList from toolbox1*/
-        //name, id
-
+, isNew
-}
-
@@ -52 +60 @@
-| populates the map with empty settings
-=========================*/
-
+, isNew
-    $('tb2blcCommon').innerHTML += "Map Name: " + createInputTextBox('layoutMapConfigTitle','title', mName, 30);
-    $('tb2blcCommon').innerHTML += "<br /> Theme " +  createSelectList('layoutMapConfigTheme', 'theme', '', getThemeMenu());
@@ -65 +73 @@
-    $('tb2blcCommon').innerHTML +="<br/>Projection " + createInputTextBox('layoutMapConfigProjection','projection', '', 15);
-    
-Null
+False
-    
-    $('tb2blcCommon').innerHTML += "<br/><br/><strong>Extents</strong><br/><strong>Max Extent</strong><br/> MinX" + createInputTextBox('layoutMapConfigMaxExtenMinX','MaxExtentMinX', '', 2) + " MinY" + createInputTextBox('layoutMapConfigMaxExtentMinY','MaxExtentMinY', '', 2) + "<br/>MaxX" + createInputTextBox('layoutMapConfigMaxExtentMaxX','MaxExtentMaxX', '', 2) + " MaxY" + createInputTextBox('layoutMapConfigMaxExtentMaxY','MaxExtentMaxY', '', 2);
@@ -74 +82 @@
-    $('tb2blcCommon').innerHTML +="<br/><br/>Units " + createSelectList('layoutMapConfigUnits','units', "",  getUnits());
-    
-2
-2
+7
+7
-    $('tb2blcCommon').innerHTML +="<br/>Resolutions " + createInputTextBox('layoutMapConfigResolutions','resolutions', '', 30);
-    
@@ -84 +92 @@
-    
-    $('tb2blcCommon').innerHTML +="<br/><br/>Fall Through " + createSelectList('mapConfigFallthrough', 'fallThrough', '', getTrueMenu());   
+    $('tb2blcCommon').innerHTML +="<br/><br/>Fractional Zoom" + createSelectList('mapConfigFractionalZoom', 'fractionalZoom', '', getTrueMenu());   
+    
+    populateMapValues(isNew);
-}
-
@@ -125 +136 @@
-    /*Highlist the layer in the layer list that was saved*/
-    $('tb1NewMap').highlight('#567D8C', '#9D9483'); 
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

sandbox/architect/scripts/panelConfig.js

@@ -41 +41 @@
-        /*If false is returned, then the validation in the function failed*/
-        if($('tb1NewPanelForm').value == ''){
-
+
+
+
+
-            return;
+        }
+        if( $('siteAlerts').getStyle('opacity') > 0 ){
+            $('siteAlerts').fade(0);
-        }
-        //populate toolbox2

sandbox/architect/style.css

@@ -463 +463 @@
-    #mapControls {
-        background-color:#8C8372;
+        left:370px;
+        margin-top:10px;
+        position:absolute;
+        top:510px;
+        width:630px;
+    }
+    #mapFunctions {
+        background-color:#8C8372;
-        border:1px solid #415e69;
-        left:370px;
@@ -483 +491 @@
-        width:250px;
-    }
+    /*=======================
+    |   Draggable  Boxes
+    =========================*/
+    #draggableDivContainer {
+        background-color:#504B42;
+        height:80px;    
+        left:0px;
+        /*overflow:hidden*/
+        position:relative;
+        top:0px;    
+        width:100px;
+        z-index:1;
+    }
+     
+    #draggableDiv {
+        background:#628D9D;
+        border:1px solid #415E69;
+        cursor:move;
+        height:25px;    
+        left:-2px;
+        position:absolute;
+        text-align:center;
+        top:-25px;
+        width:100%; 
+        z-index:6;
+    }
+
+    #draggableDivResize {
+        background:#efefef url(images/resize.png);
+        bottom:0px;
+        cursor:se-resize;
+        height:15px;
+        position:absolute;
+        right:0px;
+        width:15px;
+        z-index:999;
+    }
+    #draggableDivTitle {
+        background:#567D8C;
+        font-size:.9em;
+        margin:0px auto;
+        left:20%;
+        padding:5px;
+        position:absolute;
+        text-align:center;
+        top:40%;
+        z-index:4;
+    }
+    .controlBox {
+        background-color:#567D8C;
+        font-size:.9em;
+        height:26px;
+        float:left;
+        width:26px;
+    }
-/*=======================
-|   Bottom 
@@ -497 +560 @@
-| 
---------------------------------------------------------------------*/
-/*=======================
-|   Div Classes
-=========================*/
-#draggableDivContainer {
-    background-color:#504B42;
-    height:80px;    
-    left:0px;
-    /*overflow:hidden*/
-    position:relative;
-    top:0px;    
-    width:100px;
-    z-index:1;
-}
- 
-#draggableDiv {
-    background:#628D9D;
-    border:1px solid #415E69;
-    cursor:move;
-    height:25px;    
-    left:-2px;
-    position:absolute;
-    text-align:center;
-    top:-25px;
-    width:100%; 
-    z-index:6;
-}
-
-#draggableDivResize {
-    background:#efefef url(images/resize.png);
-    bottom:0px;
-    cursor:se-resize;
-    height:15px;
-    position:absolute;
-    right:0px;
-    width:15px;
-    z-index:999;
-}
-#draggableDivTitle {
-    background:#567D8C;
-    margin:0px auto;
-    left:20%;
-    padding:5px;
-    position:absolute;
-    text-align:center;
-    top:40%;
-    z-index:4;
-}
-    
-/*=======================
@@ -674 +690 @@
-    padding:5px;    
-}
-.paddingtop5px {
-    padding:5px;
-}
-.padding10px {
-    padding:10px;