[Commits] r989 - in apps/opengeo/geoexplorer/branches/0.1.x: . lib theme theme/img/geosilk

commits at geoext.org commits at geoext.org
Thu Jun 4 23:25:33 CEST 2009


Author: tschaub
Date: 2009-06-04 23:25:33 +0200 (Thu, 04 Jun 2009)
New Revision: 989

Added:
   apps/opengeo/geoexplorer/branches/0.1.x/theme/img/geosilk/ruler.png
   apps/opengeo/geoexplorer/branches/0.1.x/theme/img/geosilk/ruler_square.png
Removed:
   apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolMenu.js
   apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolSplitToggle.js
   apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolToggle.js
Modified:
   apps/opengeo/geoexplorer/branches/0.1.x/debug.html
   apps/opengeo/geoexplorer/branches/0.1.x/lib/GeoExplorer.js
   apps/opengeo/geoexplorer/branches/0.1.x/theme/geoexplorer.css
Log:
Replace MapToolMenu and MapToolSplitToggle with GeoExt.Action and Ext.SplitButton.

Modified: apps/opengeo/geoexplorer/branches/0.1.x/debug.html
===================================================================
--- apps/opengeo/geoexplorer/branches/0.1.x/debug.html	2009-06-04 20:41:38 UTC (rev 988)
+++ apps/opengeo/geoexplorer/branches/0.1.x/debug.html	2009-06-04 21:25:33 UTC (rev 989)
@@ -23,13 +23,11 @@
         <!--[if IE]>
         <link rel="stylesheet" type="text/css" href="theme/ie.css"/><![endif]-->
 
-        <script type="text/javascript" src="lib/RowExpander.js"></script> 
-        <script type="text/javascript" src="lib/CapabilitiesGrid.js"></script> 
-        <script type="text/javascript" src="lib/Viewer.js"></script> 
         <script type="text/javascript" src="lib/GeoExplorer.js"></script> 
+        <script type="text/javascript" src="lib/GeoExplorer/util.js"></script> 
         <script type="text/javascript" src="lib/MapToolMenu.js"></script> 
-        <script type="text/javascript" src="lib/MapToolSplitToggle.js"></script> 
-        <script type="text/javascript" src="lib/MassGetFeatureInfo.js"></script> 
+        <script type="text/javascript" src="lib/RowExpander.js"></script> 
+        <script type="text/javascript" src="lib/CapabilitiesGrid.js"></script> 
 
         <script>
             Ext.BLANK_IMAGE_URL = "theme/img/blank.gif";

Modified: apps/opengeo/geoexplorer/branches/0.1.x/lib/GeoExplorer.js
===================================================================
--- apps/opengeo/geoexplorer/branches/0.1.x/lib/GeoExplorer.js	2009-06-04 20:41:38 UTC (rev 988)
+++ apps/opengeo/geoexplorer/branches/0.1.x/lib/GeoExplorer.js	2009-06-04 21:25:33 UTC (rev 989)
@@ -669,18 +669,79 @@
         this.mapPanel.layers.on("add", updateInfo, this);
         this.mapPanel.layers.on("remove", updateInfo, this);
 
-        // create length measure control
-        var measureLength = this.createMeasureTool(
-            OpenLayers.Handler.Path, 'Length'
-        );
-        this.map.addControl(measureLength);
+        // create split button for measure controls
+        // (replacement candidate for MapToolSplitToggle)
+        var activeIndex = 0;
+        var measureSplit = new Ext.SplitButton({
+            iconCls: "icon-measure-length",
+            enableToggle: true,
+            toggleGroup: toolGroup, // Ext doesn't respect this, registered with ButtonToggleMgr below
+            allowDepress: false, // Ext doesn't respect this, handler deals with it
+            handler: function(button, event) {
+                // allowDepress should deal with this first condition
+                if(!button.pressed) {
+                    button.toggle();
+                } else {
+                    button.menu.items.itemAt(activeIndex).setChecked(true);
+                }
+            },
+            listeners: {
+                toggle: function(button, pressed) {
+                    // toggleGroup should handle this
+                    if(!pressed) {
+                        button.menu.items.each(function(i) {
+                            i.setChecked(false);
+                        });
+                    }
+                },
+                render: function(button) {
+                    // toggleGroup should handle this
+                    Ext.ButtonToggleMgr.register(button);
+                }
+            },
+            menu: new Ext.menu.Menu({
+                items: [
+                    new Ext.menu.CheckItem(
+                        new GeoExt.Action({
+                            text: "Length",
+                            iconCls: "icon-measure-length",
+                            map: this.map,
+                            toggleGroup: toolGroup,
+                            group: toolGroup,
+                            allowDepress: false,
+                            map: this.map,
+                            control: this.createMeasureControl(
+                                OpenLayers.Handler.Path, "Length"
+                            )
+                        })
+                    ),
+                    new Ext.menu.CheckItem(
+                        new GeoExt.Action({
+                            text: "Area",
+                            iconCls: "icon-measure-area",
+                            map: this.map,
+                            toggleGroup: toolGroup,
+                            group: toolGroup,
+                            allowDepress: false,
+                            map: this.map,
+                            control: this.createMeasureControl(
+                                OpenLayers.Handler.Polygon, "Area"
+                            )
+                        })
+                    )
+                ]
+            })
+        });
+        measureSplit.menu.items.each(function(item, index) {
+            item.on({checkchange: function(item, checked) {
+                measureSplit.toggle(checked);
+                if(checked) {
+                    activeIndex = index;
+                    measureSplit.setIconClass(item.iconCls);
+                }
+            }});
+        });
         
-        // create area measure control
-        var measureArea = this.createMeasureTool(
-            OpenLayers.Handler.Polygon, 'Area'
-        );
-        this.map.addControl(measureArea);
-
         var tools = [
             new Ext.Button({
                 text: "GeoExplorer",
@@ -712,18 +773,7 @@
                 scope: this
             }),
             infoButton,
-            new MapToolSplitToggle({
-                tooltip: "Measure",
-                iconCls: "icon-measure",
-                defaultTool: measureLength,
-                allowDepress: false,
-                tools: [
-                    {text: 'Length', tool: measureLength, iconCls: null}, 
-                    {text: 'Area', tool: measureArea, iconCls: null}
-                ],
-                enableToggle: true,
-                toggleGroup: toolGroup 
-            }),
+            measureSplit,
             "-",
             new Ext.Button({
                 handler: function(){
@@ -769,7 +819,7 @@
         return tools;
     },
 
-    createMeasureTool: function(handlerType, title) {
+    createMeasureControl: function(handlerType, title) {
         
         var styleMap = new OpenLayers.StyleMap({
             "default": new OpenLayers.Style(null, {

Deleted: apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolMenu.js
===================================================================
--- apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolMenu.js	2009-06-04 20:41:38 UTC (rev 988)
+++ apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolMenu.js	2009-06-04 21:25:33 UTC (rev 989)
@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2008 The Open Planning Project
- */
-
-/**
- * About: Examples
- *
- * This example uses default names and icons for the menu entries.
- * : var measure, select, zoomBox, draw; // OpenLayers Controls
- * > var menu = new MapToolMenu({tools: [measure, select, zoomBox, draw]});
- *
- * This one provides a custom name and icon for one of the entries.
- * : var measure, select, zoomBox, draw; // OpenLayers Controls
- * > var menu = new MapToolMenu({tools: [{
- * >         text: 'Find a distance', 
- * >         tool: measure, 
- * >         iconCls: 'x-icon-distance-finder'
- * >     }, 
- * >     select, 
- * >     zoomBox, 
- * >     draw
- * > ]});
- */
-
-/*
- * Constructor: MapToolMenu
- * Simply create a menu that manipulates OpenLayers map controls 
- *
- * Parameters: 
- * config - {Object} Various options, see {Ext.menu.Menu}
- *
- * In addition to the normal [items] array, MapToolMenu recognizes a [tools] array. 
- * This can be an array of OpenLayers Control objects, or of simple configuration 
- * objects analogous to Ext Map entries.
- */
-var MapToolMenu = function(options) { 
-    options.items = options.items || [];
-
-    var disableTools = function() {
-        for (var i = 0, len = options.tools.length; i < len; i++) {
-            var t = options.tools[i].tool || options.tools[i];
-            t.deactivate();
-        }
-    };
-
-    for (var i = 0, len = options.tools.length; i < len; i++) {
-        var conf = options.tools[i];
-        var t = conf.tool || conf;
-        options.items.push(Ext.applyIf(conf, {
-            text: t.CLASS_NAME,
-            iconCls: t.CLASS_NAME,
-            handler: (function(tool){
-                return function() {
-                    disableTools();
-                    tool.activate();
-                };
-            })(t),
-            scope: this
-        }));
-    }
-    MapToolMenu.superclass.constructor.call(this, options);
-};
-
-Ext.extend(MapToolMenu, Ext.menu.Menu);

Deleted: apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolSplitToggle.js
===================================================================
--- apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolSplitToggle.js	2009-06-04 20:41:38 UTC (rev 988)
+++ apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolSplitToggle.js	2009-06-04 21:25:33 UTC (rev 989)
@@ -1,153 +0,0 @@
-/**
- * Copyright (c) 2008 The Open Planning Project
- * 
- * @requires MapToolMenu.js
- */
-
-/**
- * About: Examples
- *
- * This example uses default names and icons for the button and menu entries.
- * : var measure, select, zoomBox, draw; // OpenLayers Controls
- * : var menu = new MapToolSplitToggle({defaultTool: select, tools: [measure, select, zoomBox, draw]});
- *
- * This one provides a custom name and icon for one of the entries.
- * : var measure, select, zoomBox, draw; // OpenLayers Controls
- * : var menu = new MapToolSplitToggle({
- * >     defaultTool: zoomBox,
- * >     tools: [{
- * >         text: 'Find a distance', 
- * >         tool: measure, 
- * >         iconCls: 'x-icon-distance-finder'
- * >     }, 
- * >     select, 
- * >     zoomBox, 
- * >     draw
- * > ]});
- */
-
-/**
- * Constructor: MapToolSplitToggle
- * Creates an Ext SplitButton suited to switching between multiple related OpenLayers Controls.
- * The MapToolSplitToggle accepts an array of controls, which can be activated from the dropdown menu.
- * The main button simply toggles the most recently used control.
- *
- * Parameters:
- * config - {Object} the configuration options for this split toggle, see {Ext.SplitButton}. 
- *
- * In addition to the options accepted by Ext.SplitButton, the MapToolSplitToggle accepts:
- * defaultTool - {OpenLayers.Control} the control which is to be activated if the button is toggled 
- * before the user selects one from the drop-down menu.
- * tools - {Array} the controls to display in the drop-down menu.  These may be simple Control objects,
- * or Ext menu specifications with a tool parameter containing the control.  (see MapToolMenu)
- */
-var MapToolSplitToggle = function(options) { 
-    this.lastActiveTool = options.defaultTool || options.tools[0];
-    this.tools = options.tools;
-
-    Ext.applyIf(options, {
-        enableToggle: true,
-        iconCls: this.findIconCls(),
-        toggleHandler: this.handleEvent,
-        handler: this.handleEvent,
-        scope: this,
-        menu: new MapToolMenu({tools: options.tools})
-    });
-
-    options.menu.on("itemclick", this.handleMenu, this);
-
-    MapToolSplitToggle.superclass.constructor.call(this, options);
-
-    if (options.toggleGroup) {
-        this.on("render", 
-            function() {Ext.ButtonToggleMgr.register(this);},
-            this
-        );
-    }
-
-};
-
-Ext.extend(MapToolSplitToggle, Ext.SplitButton, {
-    /**
-     * Property: lastActiveTool
-     * The most recently selected OpenLayers Control, to be toggled when the main button is.
-     */
-    lastActiveTool: null,
-
-    /**
-     * Property: tools
-     * {Array} the OpenLayers tools from this component's configuration.
-     */
-    tools: null,
-
-    onClick: function (e) {
-        e.preventDefault();
-        if (!this.disabled) {
-            if (e.getTarget(".x-btn-menu-arrow-wrap")) {
-                if (this.menu 
-                    && !this.menu.isVisible() 
-                    && !this.ignoreNextClick) { 
-                    this.showMenu();
-                }
-                this.fireEvent("arrowclick", this, e);
-                if (this.arrowHandler) {
-                    this.arrowHandler.call(this.scope || this, this, e);
-                }
-            } else {
-                if (this.enableToggle 
-                    && (this.allowDepress !== false 
-                    || !this.pressed)) {
-                    this.toggle();
-                }
-                this.fireEvent("click", this, e);
-                if (this.handler) {
-                    this.handler.call(this.scope || this, this, e);
-                }
-            }
-        }
-    },
-    
-    /**
-     * Method: handleEvent
-     * Called when the main button is toggled, handled the (de)activation of the last active tool.
-     *
-     * Parameters:
-     * item - the component that triggered the event (ie, this SplitButton)
-     */
-    handleEvent: function(item) {
-        if (item.pressed) {
-            this.lastActiveTool.activate();
-        } else { 
-            this.lastActiveTool.deactivate();
-        }
-    }, 
-
-    /**
-     * Method: handleMenu
-     * Called when an item in the menu is selected.  All this does is update lastActiveTool;
-     * the menu should be a {MapToolMenu} to handle the control (de)activation.
-     *
-     * Parameters:
-     * item - the component that triggered the event (ie, the Menu item)
-     * evt  - the Ext selection event
-     */
-    handleMenu: function(item, evt) {
-        for (var i = 0, len = this.tools.length; i < len; i++) {
-            var t = this.tools[i].tool || this.tools[i];
-            if (t.active) {
-               this.lastActiveTool = t;
-               this.toggle(true);
-            }
-        }
-    },
-    
-    /**
-     * Method: findIconCls
-     * Determine the icon class for this split button, based on the {OpenLayers.Control} the
-     * button has been configured with.
-     */
-    findIconCls: function() {
-        return this.lastActiveTool.CLASS_NAME;
-    }
-
-});

Deleted: apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolToggle.js
===================================================================
--- apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolToggle.js	2009-06-04 20:41:38 UTC (rev 988)
+++ apps/opengeo/geoexplorer/branches/0.1.x/lib/MapToolToggle.js	2009-06-04 21:25:33 UTC (rev 989)
@@ -1,83 +0,0 @@
-/**
- * Copyright (c) 2008 The Open Planning Project
- */
-
-/**
- * About: Examples
- *
- * This example uses default names and icons for the button.
- * : var measure = new OpenLayers.Control.Measure(OpenLayers.Handler.Path);
- * : var btn = new MapToolToggle({tool: measure});
- *
- * This one provides a custom name and icon.
- * : var measure = new OpenLayers.Control.Measure(OpenLayers.Handler.Path);
- * : var btn = new MapToolToggle({
- * >         text: 'Find a distance', 
- * >         tool: measure, 
- * >         iconCls: 'x-icon-distance-finder'
- * >     });
- */
-
-/**
- * Constructor: MapToolToggle
- * Creates an Ext Button suited to activating and deactivating an {OpenLayers.Control}.
- * The MapToolToggle accepts a control as part of its configuration.
- *
- * Parameters:
- * config - {Object} the configuration options for this split toggle, see {Ext.Button}. 
- *
- * In addition to the options accepted by Ext.Button, the MapToolToggle accepts:
- * tool - {OpenLayers.Control} the control which is to be manipulated by the button 
- */
-var MapToolToggle = function(options) {
-    this.mapTool = options.tool;
-    Ext.applyIf(options, {
-        text: this.findLabel(),
-        enableToggle: true,
-        iconCls: this.findIconCls(),
-        handler: this.handleEvent,
-        scope: this
-    });
-    MapToolToggle.superclass.constructor.call(this, options);
-};
-
-Ext.extend(MapToolToggle, Ext.Button, {
-    /**
-     * Property: mapTool
-     * The OpenLayers Control that this Action toggles.
-     */
-    mapTool: null,
-
-    /**
-     * Method: handleEvent
-     * Called when the main button is toggled, handled the (de)activation of the last active tool.
-     *
-     * Parameters:
-     * item - the component that triggered the event (ie, this SplitButton)
-     */
-    handleEvent: function(item) {
-        if (item.pressed) {
-            this.mapTool.activate();
-        } else { 
-            this.mapTool.deactivate();
-        }
-    }, 
-    
-    /**
-     * Method: findIconCls
-     * Determine the icon class for this split button, based on the {OpenLayers.Control} the
-     * button has been configured with.
-     */
-    findIconCls: function() {
-        return this.mapTool.CLASS_NAME;
-    },
-
-    /**
-     * Method: findLabel
-     * Determine the text label for this split button, based on the {OpenLayers.Control} the
-     * button has been configured with.
-     */
-    findLabel: function() {
-        return this.mapTool.CLASS_NAME;
-    }
-});

Modified: apps/opengeo/geoexplorer/branches/0.1.x/theme/geoexplorer.css
===================================================================
--- apps/opengeo/geoexplorer/branches/0.1.x/theme/geoexplorer.css	2009-06-04 20:41:38 UTC (rev 988)
+++ apps/opengeo/geoexplorer/branches/0.1.x/theme/geoexplorer.css	2009-06-04 21:25:33 UTC (rev 989)
@@ -43,6 +43,14 @@
     background-image: url(img/geosilk/measure.png);
 }
 
+.icon-measure-length {
+    background-image: url(img/geosilk/ruler.png) !important;
+}
+
+.icon-measure-area {
+   background-image: url(img/geosilk/ruler_square.png) !important;
+}
+
 .x-btn .icon-zoom-in { 
     background-image: url(img/silk/magnifier_zoom_in.png);
 }

Added: apps/opengeo/geoexplorer/branches/0.1.x/theme/img/geosilk/ruler.png
===================================================================
(Binary files differ)


Property changes on: apps/opengeo/geoexplorer/branches/0.1.x/theme/img/geosilk/ruler.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream

Added: apps/opengeo/geoexplorer/branches/0.1.x/theme/img/geosilk/ruler_square.png
===================================================================
(Binary files differ)


Property changes on: apps/opengeo/geoexplorer/branches/0.1.x/theme/img/geosilk/ruler_square.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream



More information about the Commits mailing list