[OpenLayers-Commits] r7313 - in sandbox/topp/almanac: . examples lib lib/OpenLayers/Control

commits at openlayers.org commits at openlayers.org
Thu Jun 5 19:58:03 EDT 2008


Author: sbenthall
Date: 2008-06-05 19:58:02 -0400 (Thu, 05 Jun 2008)
New Revision: 7313

Added:
   sandbox/topp/almanac/lib/OpenLayers/Control/Radio.js
Removed:
   sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js
Modified:
   sandbox/topp/almanac/StoryEditGeometry.js
   sandbox/topp/almanac/examples/edit-feature.html
   sandbox/topp/almanac/lib/OpenLayers.js
Log:
switched Panel2 to radio and made it rock harder with fly events

Modified: sandbox/topp/almanac/StoryEditGeometry.js
===================================================================
--- sandbox/topp/almanac/StoryEditGeometry.js	2008-06-05 20:48:04 UTC (rev 7312)
+++ sandbox/topp/almanac/StoryEditGeometry.js	2008-06-05 23:58:02 UTC (rev 7313)
@@ -41,11 +41,17 @@
             "featureadded": this.onFeatureAdded,
             scope: this
         });
+        
+        this.modifyControl.events.on({
+            "activate": this.selectFeature,
+            scope: this
+        })
 
     },
     
     activate: function(){
-        this.modify();
+        OpenLayers.Console.log("SEG activated")
+        this.toggleMode();
     },
     
     destroy: function(){        
@@ -54,6 +60,11 @@
             scope: this
         })
         
+        this.modifyControl.events.un({
+            "activate": this.selectFeature,
+            scope: this
+        })
+        
         this.layer = null;
         this.drawControls = null;
         this.modifyControl = null;
@@ -63,8 +74,10 @@
     },
     
     toggleMode: function(geom) {
+        OpenLayers.Console.log("toggleMode called")
+        
         if(!geom){
-            this.modify();
+            this.modifyControl.activate();
         } else {
             this.modifyControl.deactivate();
         }
@@ -79,15 +92,8 @@
         }
     },
     
-   /**
-    * Method: modify
-    * 
-    * Activate the modify control and select the feature on the layer
-    * (eliminating the need for an extra click)
-    */
-    modify: function(){
-        this.modifyControl.activate();
-        
+    selectFeature: function(){
+        OpenLayers.Console.log(this);
         //this control maintains a maximum of one feature on its layer
         var feature = this.layer.features[0];
         
@@ -97,6 +103,8 @@
     },
     
     onFeatureAdded: function(ev){
+        OpenLayers.Console.log(ev);
+        
         feature = ev.feature;
                                             
         for(var i = 0; i < this.layer.features.length ; i++){

Modified: sandbox/topp/almanac/examples/edit-feature.html
===================================================================
--- sandbox/topp/almanac/examples/edit-feature.html	2008-06-05 20:48:04 UTC (rev 7312)
+++ sandbox/topp/almanac/examples/edit-feature.html	2008-06-05 23:58:02 UTC (rev 7313)
@@ -33,25 +33,23 @@
             var storyEditGeometryControl = new Almanac.Control.StoryEditGeometry(vectors);
             map.addControl(storyEditGeometryControl);
             
-            var panel = new OpenLayers.Control.Panel2(
+            var panel = new OpenLayers.Control.Radio(
                 [
                     {
-                        id: "drawPointToggle",
-                        behavior: function(){
-                            storyEditGeometryControl.toggleMode('point')
-                        }
+                        id: "modifyFeatureTool",
+                        value: 'modify'
                     },
                     {
-                        id: "drawLineToggle",
-                        behavior: function(){
-                            storyEditGeometryControl.toggleMode('line')
-                        }
+                        id: "drawPointTool",
+                        value: 'point'
                     },
                     {
-                        id: "drawPolygonToggle",
-                        behavior: function(){
-                            storyEditGeometryControl.toggleMode('polygon')
-                        }
+                        id: "drawLineTool",
+                        value: 'line'
+                    },
+                    {
+                        id: "drawPolygonTool",
+                        value: 'polygon'
                     }
                 ], {
                     defaultBehavior: function(){
@@ -60,20 +58,30 @@
                 }
             )
             
-            map.addControl(panel);
-            
-            panel.activate();
-            
             var point = new OpenLayers.Geometry.Point(0, 0);
             var pointFeature = new OpenLayers.Feature.Vector(point,null);
             
             vectors.addFeatures([pointFeature]);
+            OpenLayers.Console.log(vectors);
             
-            storyEditGeometryControl.modify();
+            storyEditGeometryControl.activate();
+              
+            map.addControl(panel);
+            panel.activate();
+            panel.setOnclickBehavior('modify', function(){
+                           storyEditGeometryControl.toggleMode()
+                        }, storyEditGeometryControl);
+            panel.setOnclickBehavior('point', function(){
+                            storyEditGeometryControl.toggleMode('point')
+                        }, storyEditGeometryControl);
+            panel.setOnclickBehavior('line', function(){
+                            storyEditGeometryControl.toggleMode('line')
+                        }, storyEditGeometryControl);
+            panel.setOnclickBehavior('polygon', function(){
+                            storyEditGeometryControl.toggleMode('polygon')
+                        }, storyEditGeometryControl);
             
             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
-         
-            
         }
 
         function toggleControl(element) {
@@ -95,14 +103,17 @@
          <div id="controls">
         <ul id="controlToggle">
             <li>
-                <div id="drawPointToggle">draw point</div>
+                <div id="modifyFeatureTool">modify feature</div>
             </li>
             <li>
-                <div id ="drawLineToggle">draw line</div>
+                <div id="drawPointTool">draw point</div>
             </li>
             <li>
-                <div id="drawPolygonToggle">draw polygon</div>
+                <div id ="drawLineTool">draw line</div>
             </li>
+            <li>
+                <div id="drawPolygonTool">draw polygon</div>
+            </li>
         </ul>
     </div>
 	</body>

Deleted: sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js
===================================================================
--- sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js	2008-06-05 20:48:04 UTC (rev 7312)
+++ sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js	2008-06-05 23:58:02 UTC (rev 7313)
@@ -1,91 +0,0 @@
-OpenLayers.Control.Panel2 = OpenLayers.Class(OpenLayers.Control, {
-    
-    unselectedCSSClass : "unselected",
-	selectedCSSClass : "selected",
-    
-    /**
-     * Property: buttons
-     * {Array(~~~~~~~~}
-     */
-    toggles: null,     
-
-    /**
-     * 
-     * Parameters:
-     * toggles - omg!
-     * options - {Object} An optional object whose properties will be used
-     *     to extend the control.
-     */
-    initialize: function(toggles, options) {       
-        OpenLayers.Control.prototype.initialize.apply(this, [options]);
-        this.toggles = toggles;
-        
-        this.defaultBehavior();
-    },
-
-    /**
-     * APIMethod: destroy
-     */
-    destroy: function() {
-        OpenLayers.Control.prototype.destroy.apply(this, arguments);
-        this.buttons = null;
-    },
-
-    /**
-     * APIMethod: activate
-     */
-    activate: function() {
-        OpenLayers.Control.prototype.activate.apply(this, arguments);
-        
-        for(var i = 0; i < this.toggles.length; i++){
-            var toggle = this.toggles[i];
-            
-            var domElt = document.getElementById(toggle.id);
-            
-            if(domElt){
-                domElt.onclick = this.makeOnclick(toggle);
-            }
-        }
-    },
-    
-    /**
-     * APIMethod: deactivate
-     */
-    deactivate: function() {
-        
-    },
-    
-    makeOnclick: function(toggle){
-        var panel = this;
-        
-        return function(){
-            panel.toggleOnclick(toggle);
-        }
-    },
-    
-    toggleOnclick: function(toggle){        
-        for(var i = 0; i < this.toggles.length; i++){
-            var thisToggle = this.toggles[i];
-            
-            var domElt = document.getElementById(thisToggle.id);
-            
-            if(toggle == thisToggle){
-                if(domElt.className == this.unselectedCSSClass){
-                    domElt.className = this.selectedCSSClass;
-                    toggle.behavior();    
-                } else {
-                    domElt.className = this.unselectedCSSClass;
-                    this.defaultBehavior();
-                }
-            } else {
-                domElt.className = this.unselectedCSSClass;
-            }
-        }
-    },
-    
-    defaultBehavior: function(){
-        
-    },
-    
-    CLASS_NAME: "OpenLayers.Control.Panel2"
-});

Copied: sandbox/topp/almanac/lib/OpenLayers/Control/Radio.js (from rev 7310, sandbox/topp/almanac/lib/OpenLayers/Control/Panel2.js)
===================================================================
--- sandbox/topp/almanac/lib/OpenLayers/Control/Radio.js	                        (rev 0)
+++ sandbox/topp/almanac/lib/OpenLayers/Control/Radio.js	2008-06-05 23:58:02 UTC (rev 7313)
@@ -0,0 +1,102 @@
+OpenLayers.Control.Radio = OpenLayers.Class(OpenLayers.Control, {
+    
+    EVENT_TYPES: ["activate", "deactivate", "clicked"],
+    
+	selectedCSSClassName : "selected",
+    
+    /**
+     * Property: radios
+     * {Array(~~~~~~~~}
+     */
+    radios: null,
+
+    /**
+     * 
+     * Parameters:
+     * toggles - omg!
+     * options - {Object} An optional object whose properties will be used
+     *     to extend the control.
+     */
+    initialize: function(radios, options) {       
+        OpenLayers.Control.prototype.initialize.apply(this, [options]);
+        this.radios = radios;
+    },
+
+    /**
+     * APIMethod: destroy
+     */
+    destroy: function() {
+        OpenLayers.Control.prototype.destroy.apply(this, arguments);
+        this.radio = null;
+    },
+
+    /**
+     * APIMethod: activate
+     */
+    activate: function() {
+        OpenLayers.Control.prototype.activate.apply(this, arguments);
+        
+        for(var i = 0; i < this.radios.length; i++){
+            var radio = this.radios[i];
+            
+            var domElt = document.getElementById(radio.id);
+            
+            if(domElt){
+                domElt.onclick = this.makeOnclick(radio);
+            }
+        }
+    },
+    
+    /**
+     * APIMethod: deactivate
+     */
+    deactivate: function() {
+        
+    },
+    
+    makeOnclick: function(radio){
+        var panel = this;
+        
+        return function(){
+            panel.events.triggerEvent("clicked",{value : radio.value})
+            panel.redraw(radio);
+        }
+    },
+    
+    redraw: function(radio){        
+        for(var i = 0; i < this.radios.length; i++){
+            var thisRadio = this.radios[i];
+            
+            var domElt = document.getElementById(thisRadio.id);
+            
+            if(radio == thisRadio){
+                OpenLayers.Element.addClassName(domElt, this.selectedCSSClassName);
+                //toggle.behavior();
+            } else {
+                OpenLayers.Element.removeClassName(domElt, this.selectedCSSClassName);
+            }
+        }
+    },
+    
+    defaultBehavior: function(){
+        
+    },
+    
+    setOnclickBehavior: function(value, behavior, scope){
+        var obj = {
+            "clicked" : function(evt){
+                if(evt.value == value){
+                    behavior(evt); //maybe the argument here should just be the value?
+                }
+            },
+        }
+        
+        if(scope){
+            obj.scope = scope;
+        }
+        
+        this.events.on(obj);
+    },
+    
+    CLASS_NAME: "OpenLayers.Control.Radio"
+});

Modified: sandbox/topp/almanac/lib/OpenLayers.js
===================================================================
--- sandbox/topp/almanac/lib/OpenLayers.js	2008-06-05 20:48:04 UTC (rev 7312)
+++ sandbox/topp/almanac/lib/OpenLayers.js	2008-06-05 23:58:02 UTC (rev 7313)
@@ -161,7 +161,7 @@
             "OpenLayers/Control/DragFeature.js",
             "OpenLayers/Control/ModifyFeature.js",
             "OpenLayers/Control/Panel.js",
-            "OpenLayers/Control/Panel2.js",
+            "OpenLayers/Control/Radio.js",
             "OpenLayers/Control/SelectFeature.js",
             "OpenLayers/Control/NavigationHistory.js",
             "OpenLayers/Control/Geocoder.js",



More information about the Commits mailing list