[Commits] r975 - in apps/opengeo/geoexplorer/trunk: build lib lib/Ext lib/Ext/grid lib/GeoExplorer lib/GeoExplorer/Full script
commits at geoext.org
commits at geoext.org
Wed Jun 3 20:38:05 CEST 2009
Author: dwins
Date: 2009-06-03 20:38:04 +0200 (Wed, 03 Jun 2009)
New Revision: 975
Added:
apps/opengeo/geoexplorer/trunk/lib/Ext/
apps/opengeo/geoexplorer/trunk/lib/Ext/grid/
apps/opengeo/geoexplorer/trunk/lib/Ext/grid/RowExpander.js
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Embed.js
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full.js
apps/opengeo/geoexplorer/trunk/lib/Viewer.js
Modified:
apps/opengeo/geoexplorer/trunk/build/geoexplorer-all.cfg
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/CapabilitiesGrid.js
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full/Full.js
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/LayerMenuItem.js
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolMenu.js
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolSplitToggle.js
apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolToggle.js
apps/opengeo/geoexplorer/trunk/script/GeoExplorer-debug.js
Log:
Switch to JSAN structure
Modified: apps/opengeo/geoexplorer/trunk/build/geoexplorer-all.cfg
===================================================================
--- apps/opengeo/geoexplorer/trunk/build/geoexplorer-all.cfg 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/build/geoexplorer-all.cfg 2009-06-03 18:38:04 UTC (rev 975)
@@ -77,8 +77,8 @@
GeoExplorer/MapToolMenu.js
GeoExplorer/MapToolSplitToggle.js
GeoExplorer.js
- GeoExplorer/Full/Full.js
- GeoExplorer/Embed/Embed.js
+ GeoExplorer/Full.js
+ GeoExplorer/Embed.js
GeoExplorer/LayerMenuItem.js
GeoExplorer/Wizard.js
GeoExplorer/NewSourceWindow.js
Added: apps/opengeo/geoexplorer/trunk/lib/Ext/grid/RowExpander.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/Ext/grid/RowExpander.js (rev 0)
+++ apps/opengeo/geoexplorer/trunk/lib/Ext/grid/RowExpander.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -0,0 +1,136 @@
+/*
+ * Ext JS Library 2.2.1
+ * Copyright(c) 2006-2009, Ext JS, LLC.
+ * licensing at extjs.com
+ *
+ * http://extjs.com/license
+ */
+
+Ext.grid.RowExpander = function(config){
+ Ext.apply(this, config);
+
+ this.addEvents({
+ beforeexpand : true,
+ expand: true,
+ beforecollapse: true,
+ collapse: true
+ });
+
+ Ext.grid.RowExpander.superclass.constructor.call(this);
+
+ if(this.tpl){
+ if(typeof this.tpl == 'string'){
+ this.tpl = new Ext.Template(this.tpl);
+ }
+ this.tpl.compile();
+ }
+
+ this.state = {};
+ this.bodyContent = {};
+};
+
+Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
+ header: "",
+ width: 20,
+ sortable: false,
+ fixed:true,
+ menuDisabled:true,
+ dataIndex: '',
+ id: 'expander',
+ lazyRender : true,
+ enableCaching: true,
+
+ getRowClass : function(record, rowIndex, p, ds){
+ p.cols = p.cols-1;
+ var content = this.bodyContent[record.id];
+ if(!content && !this.lazyRender){
+ content = this.getBodyContent(record, rowIndex);
+ }
+ if(content){
+ p.body = content;
+ }
+ return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
+ },
+
+ init : function(grid){
+ this.grid = grid;
+
+ var view = grid.getView();
+ view.getRowClass = this.getRowClass.createDelegate(this);
+
+ view.enableRowBody = true;
+
+ grid.on('render', function(){
+ view.mainBody.on('mousedown', this.onMouseDown, this);
+ }, this);
+ },
+
+ getBodyContent : function(record, index){
+ if(!this.enableCaching){
+ return this.tpl.apply(record.data);
+ }
+ var content = this.bodyContent[record.id];
+ if(!content){
+ content = this.tpl.apply(record.data);
+ this.bodyContent[record.id] = content;
+ }
+ return content;
+ },
+
+ onMouseDown : function(e, t){
+ if(t.className == 'x-grid3-row-expander'){
+ e.stopEvent();
+ var row = e.getTarget('.x-grid3-row');
+ this.toggleRow(row);
+ }
+ },
+
+ renderer : function(v, p, record){
+ p.cellAttr = 'rowspan="2"';
+ return '<div class="x-grid3-row-expander"> </div>';
+ },
+
+ beforeExpand : function(record, body, rowIndex){
+ if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
+ if(this.tpl && this.lazyRender){
+ body.innerHTML = this.getBodyContent(record, rowIndex);
+ }
+ return true;
+ }else{
+ return false;
+ }
+ },
+
+ toggleRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
+ },
+
+ expandRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ var record = this.grid.store.getAt(row.rowIndex);
+ var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
+ if(this.beforeExpand(record, body, row.rowIndex)){
+ this.state[record.id] = true;
+ Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
+ this.fireEvent('expand', this, record, body, row.rowIndex);
+ }
+ },
+
+ collapseRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ var record = this.grid.store.getAt(row.rowIndex);
+ var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
+ if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
+ this.state[record.id] = false;
+ Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
+ this.fireEvent('collapse', this, record, body, row.rowIndex);
+ }
+ }
+});
Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/CapabilitiesGrid.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/CapabilitiesGrid.js 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/CapabilitiesGrid.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -20,7 +20,8 @@
* passed-in :class:`GeoExt.MapPanel` from the grid.
*/
-var CapabilitiesGrid = Ext.extend(Ext.grid.GridPanel, {
+Ext.namespace("GeoExplorer");
+GeoExplorer.CapabilitiesGrid = Ext.extend(Ext.grid.GridPanel, {
store: null,
@@ -70,7 +71,7 @@
{header: "Queryable", dataIndex: "queryable"}
]);
- CapabilitiesGrid.superclass.initComponent.call(this);
+ GeoExplorer.CapabilitiesGrid.superclass.initComponent.call(this);
},
/** api: method[addLayers]
Added: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Embed.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Embed.js (rev 0)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Embed.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -0,0 +1,175 @@
+/** api: (define)
+ * module = GeoExplorer
+ * class = Embed
+ * base_link = GeoExplorer
+ */
+Ext.namespace("GeoExplorer");
+
+/** api: constructor
+ * ..class:: GeoExplorer.Embed(config)
+ *
+ * Create a GeoExplorer application suitable for embedding in larger pages.
+ */
+GeoExplorer.Embed = Ext.extend(GeoExplorer, {
+ /**
+ * api: method[createLayout]
+ * Create the various parts that compose the layout.
+ */
+ createLayout: function() {
+
+ // create the map
+ // TODO: check this.initialConfig.map for any map options
+ this.map = new OpenLayers.Map({
+ allOverlays: true,
+ controls: [new OpenLayers.Control.PanPanel(),
+ new OpenLayers.Control.ZoomPanel()]
+ });
+
+ //** Remove this code when OpenLayers #2069 is closed **
+ var onDoubleClick = function(ctrl, evt) {
+ OpenLayers.Event.stop(evt ? evt : window.event);
+ };
+ var controls = this.map.controls[0].controls;
+ for(var i = 0; i < controls.length; i++){
+ OpenLayers.Event.observe(controls[i].panel_div, "dblclick",
+ OpenLayers.Function.bind(onDoubleClick, this.map.controls[0], controls[i]));
+ }
+ //******************************************************
+
+ //TODO: make this more configurable
+ this.map.events.on({
+ "preaddlayer" : function(evt){
+ if(evt.layer.mergeNewParams){
+ var maxExtent = evt.layer.maxExtent;
+ evt.layer.mergeNewParams({
+ transparent: true,
+ format: "image/png",
+ tiled: true,
+ tilesorigin: [maxExtent.left, maxExtent.bottom]
+ });
+ }
+ },
+ scope : this
+ });
+
+
+ // place map in panel
+ var mapConfig = this.initialConfig.map || {};
+ this.mapPanel = new GeoExt.MapPanel({
+ layout: "anchor",
+ border: true,
+ region: "center",
+ map: this.map,
+ // TODO: update the OpenLayers.Map constructor to accept an initial center
+ center: mapConfig.center && new OpenLayers.LonLat(mapConfig.center[0], mapConfig.center[1]),
+ // TODO: update the OpenLayers.Map constructor to accept an initial zoom
+ zoom: mapConfig.zoom,
+ items: [
+ {
+ xtype: "gx_scaleslider",
+ vertical: true,
+ height: 100,
+ plugins: new GeoExt.ScaleSliderTip({
+ template: "<div>Zoom Level: {zoom}</div>"
+ })
+ },
+ this.createMapOverlay()
+ ]
+ });
+
+ // create layer store
+ this.layers = this.mapPanel.layers;
+ this.registerBackgroundListeners();
+
+ var addLayerButton = new Ext.Button({
+ tooltip : "Add Layers",
+ disabled: true,
+ iconCls: "icon-addlayers",
+ handler : this.showCapabilitiesGrid,
+ scope: this
+ });
+ this.on("ready", function() {addLayerButton.enable();});
+
+ var toolbar = new Ext.Toolbar({
+ xtype: "toolbar",
+ region: "north",
+ disabled: true,
+ items: this.createTools()
+ });
+ this.on("ready", function() {toolbar.enable();});
+
+ var viewport = new Ext.Viewport({
+ layout: "fit",
+ hideBorders: true,
+ items: {
+ layout: "border",
+ deferredRender: false,
+ items: [
+ toolbar,
+ this.mapPanel
+ ]
+ }
+ });
+ },
+
+ /**
+ * api: method[createTools]
+ * Create the various parts that compose the layout.
+ */
+ createTools: function() {
+ var tools =
+ GeoExplorer.Embed.superclass.createTools.apply(this, arguments);
+
+ var menu = new Ext.menu.Menu();
+
+ var updateLayerSwitcher = function() {
+ menu.removeAll();
+ menu.getEl().addClass("gx-layer-menu");
+ menu.getEl().applyStyles({
+ width: '',
+ height: ''
+ });
+ menu.addItem(new Ext.menu.TextItem({
+ text: 'Layers'
+ }));
+ this.mapPanel.layers.each(function(x) {
+ if (x.get("layer").displayInLayerSwitcher) {
+ menu.addItem(new GeoExplorer.LayerMenuItem({
+ layerRecord: x
+ }));
+ }
+ });
+ };
+
+ this.mapPanel.layers.on("update", updateLayerSwitcher, this);
+ this.mapPanel.layers.on("remove", updateLayerSwitcher, this);
+ this.mapPanel.layers.on("add", updateLayerSwitcher, this);
+
+ var layerChooser = new Ext.Button({
+ tooltip: 'Layer Switcher',
+ iconCls: 'icon-layer-switcher',
+ menu: menu
+ });
+
+ tools.unshift("-");
+ tools.unshift(layerChooser);
+
+ var aboutButton = new Ext.Button({
+ tooltip: "About this map",
+ iconCls: "icon-about",
+ handler: this.displayAppInfo
+ });
+
+ tools.push("->");
+ tools.push(new Ext.Button({
+ tooltip: "Bookmark",
+ handler: this.bookmark,
+ scope: this,
+ iconCls: "icon-bookmark"
+ }));
+ // tools.push("-");
+ tools.push(aboutButton);
+
+ return tools;
+ }
+});
Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full/Full.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full/Full.js 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full/Full.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -1,326 +0,0 @@
-/**
- * Copyright (c) 2009 The Open Planning Project
- */
-
-/**
- * api: (define)
- * module = GeoExplorer
- * class = GeoExplorer.Full(config)
- * extends = GeoExplorer
- */
-
-/** api: constructor
- * .. class:: GeoExplorer.Full(config)
- *
- * Create a GeoExplorer application intended for full-screen display.
- */
-GeoExplorer.Full = Ext.extend(GeoExplorer, {
- /**
- * api: method[createTools]
- * Create the toolbar configuration for the main view.
- */
- createTools: function() {
- var tools =
- GeoExplorer.Full.superclass.createTools.apply(this, arguments);
-
- var aboutButton = new Ext.Button({
- text: "GeoExplorer",
- iconCls: "icon-geoexplorer",
- handler: this.displayAppInfo
- });
-
- tools.unshift("-");
- tools.unshift(new Ext.Button({
- tooltip: "Bookmark",
- handler: this.bookmark,
- scope: this,
- iconCls: "icon-bookmark"
- }));
- tools.unshift(new Ext.Button({
- tooltip: "Export as blog widget",
- handler: this.showEmbedWizard,
- scope: this,
- iconCls: 'icon-export'
- }));
- tools.unshift("-");
- tools.unshift(aboutButton);
- return tools;
- },
-
- /** private: method[showEmbedWizard]
- *
- * Builds several panels and combines them into a
- * :class:``GeoExplorer.Wizard`` to guide the user through customizing and
- * exporting a map for display embedded in another website.
- *
- * ..seealso:: :method:`GeoExplorer.Full.makeLayerWizardPane`, :method:`GeoExplorer.Full.makeFinalWizardPane`
- */
- showEmbedWizard: function() {
- var config = this.extractConfiguration();
-
- var layerSelection = this.makeLayerWizardPane(config);
- var finalize = this.makeFinalWizardPane(config);
- var wizard = new GeoExplorer.Wizard({
- height: 300,
- width: 400,
- resizable: false,
- modal: true,
- title: "Export Map",
- pages: [{
- title: 'Layers',
- panel: layerSelection
- },{
- title: 'Done!',
- panel: finalize
- }]
- });
- wizard.show();
- },
-
- /** private: method[makeFinalWizardPane]
- *
- * Create the 'okay, done!' page of the export wizard, providing the HTML
- * snippet to use for embedding the map, etc.
- */
- makeFinalWizardPane: function(config) {
- var description = new Ext.Panel({
- cls: 'gx-wizard-description',
- html: '<p> Your map is ready to be published to the web! </p>' +
- '<p> Simply copy the following HTML to embed the map in your website: </p>',
- border: false
- });
-
- var snippetArea = new Ext.form.TextArea({
- height: '100',
- selectOnFocus: true,
- enableKeyEvents: true,
- listeners: {
- keypress: function(area, evt) {
- evt.stopEvent();
- }
- }
- });
-
- var heightField = new Ext.form.NumberField({width: 50, value: 400});
- var widthField = new Ext.form.NumberField({width: 50, value: 600});
-
- var updateSnippet = function() {
- var query = Ext.urlEncode({q: Ext.util.JSON.encode(config)});
-
- // TODO: configurablize!!!1!!!!!111!!!!!!
- var pathname = document.location.pathname.replace(/\/[^\/]*$/, '/embed-debug.html');
- var url =
- document.location.protocol + "//" +
- document.location.hostname +
- pathname + "?" + query;
-
- snippetArea.setValue('<iframe height="' + heightField.getValue() +
- ' " width="' + widthField.getValue() + '" src="' + url +
- '"> </iframe>');
- };
-
- heightField.on("change", updateSnippet);
- widthField.on("change", updateSnippet);
-
- var snippet = new Ext.Panel({
- border: false,
- layout: 'fit',
- cls: 'gx-snippet-area',
- items: [snippetArea]
- });
-
- var adjustments = new Ext.Panel({
- layout: "column",
- items: [
- new Ext.Panel({
- border: false,
- width: 90,
- items: [
- new Ext.form.ComboBox({
- editable: false,
- width: 70,
- store: new Ext.data.SimpleStore({
- fields: ["name", "height", "width"],
- data: [
- ["Mini", 100, 100],
- ["Small", 200, 300],
- ["Large", 400, 600],
- ["Premium", 600, 800]
- ]}),
- triggerAction: 'all',
- displayField: 'name',
- value: "Large",
- mode: 'local',
- listeners: {
- 'select': function(combo, record, index) {
- widthField.setValue(record.get("width"));
- heightField.setValue(record.get("height"));
- updateSnippet();
- }
- }
- })
- ]}),
- {cls: 'gx-field-label', html: "Height", border: false},
- heightField,
- {cls: 'gx-field-label', html: "Width", border: false},
- widthField
- ],
- border: false
- });
-
- return new Ext.Panel({
- cls: 'gx-wizard-pane',
- border: false,
- items: [
- description,
- snippet,
- {cls: 'gx-field-label', html: "Map Size", border: false},
- adjustments],
- listeners: {
- show: updateSnippet
- }
- });
- },
-
- /** api: method[makeLayerWizardPane]
- * Create the layer selection page for the export wizard.
- */
- makeLayerWizardPane: function (config) {
- var datalayers = [];
- var basemaps = [];
-
- for (var i = 0, len = config.map.layers.length; i < len; i++) {
- if (config.map.layers[i].background) {
- basemaps.push(config.map.layers[i]);
- } else {
- datalayers.push(config.map.layers[i]);
- }
- }
-
- var datalayerstore = new Ext.data.JsonStore({
- fields: ['name', {name: 'visibility', type: 'bool'}],
- data: datalayers
- });
-
- var basemapstore = new Ext.data.JsonStore({
- fields: ['name', {name: 'visibility', type: 'bool'}],
- data: basemaps
- });
-
- var titleRenderer = function(value) {
- var record = layerStore.getAt(layerStore.find("name", value));
- return record.get('title') || value;
- };
-
-
- var cbRenderer = function(value) {
- return '<input type="checkbox"' +
- (value ? ' checked="checked"' : '') +
- '></input>';
- };
-
- var datagrid = new Ext.grid.GridPanel({
- store: datalayerstore,
- region: 'center',
- autoScroll: true,
- columns: [
- {
- header: '<img src="theme/img/silk/eye.png"></img>',
- id: 'visibility',
- dataIndex: 'visibility',
- width: 28,
- renderer: cbRenderer
- },{
- header: 'Layer Name',
- id: 'layer',
- dataIndex: 'name',
- renderer: titleRenderer
- }
- ],
- autoExpandColumn:'layer',
- title: "Data Layers",
- listeners: {
- rowclick: function(grid, index, evt) {
- var record = grid.getStore().getAt(index);
- record.set("visibility", !record.get("visibility"));
- }
- }
- });
-
- var radioRenderer = function(value) {
- return '<input type="radio"' +
- (value ? ' checked="checked"' : '') +
- '></input>';
- };
-
- var layerStore = this.mapPanel.layers;
-
- var basegrid = new Ext.grid.GridPanel({
- store: basemapstore,
- region: 'east',
- width: 150,
- resizable: true,
- autoScroll: true,
- columns: [
- {
- header: '<img src="theme/img/silk/star.png"></img>',
- id: 'visibility',
- dataIndex: 'visibility',
- width: 28,
- renderer: radioRenderer
- }, {
- header: 'Layer Name',
- id: 'layer',
- dataIndex: 'name',
- renderer: titleRenderer
- }
- ],
- autoExpandColumn:'layer',
- title: "Base Layers",
- listeners: {
- rowclick: function(grid, index, evt) {
- var record = grid.getStore().getAt(index);
- grid.getStore().each(function(record) {
- record.set("visibility", false);
- });
- record.set("visibility", true);
- }
- }
- });
-
- return new Ext.Panel({
- layout: 'border',
- border: false,
- cls: 'gx-wizard-pane',
- items: [
- {
- region: 'north',
- cls: "gx-wizard-description",
- border: false,
- html:'<p>Choose layers to include in the map:</p>'
- },
- datagrid,
- basegrid
- ],
- listeners: {
- hide: function() {
- for (var i = 0, len = config.map.layers.length;
- i < len;
- i++) {
- var layer = config.map.layers[i];
-
- var record =
- datalayerstore.getAt(datalayerstore.find("name", layer.name));
-
- if (!record) {
- record =
- basemapstore.getAt(basemapstore.find("name", layer.name));
- }
-
- if (record) layer.visibility = record.get("visibility");
- }
- }
- }
- });
- }
-});
Added: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full.js (rev 0)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/Full.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -0,0 +1,326 @@
+/**
+ * Copyright (c) 2009 The Open Planning Project
+ */
+
+/**
+ * api: (define)
+ * module = GeoExplorer
+ * class = GeoExplorer.Full(config)
+ * extends = GeoExplorer
+ */
+
+/** api: constructor
+ * .. class:: GeoExplorer.Full(config)
+ *
+ * Create a GeoExplorer application intended for full-screen display.
+ */
+GeoExplorer.Full = Ext.extend(GeoExplorer, {
+ /**
+ * api: method[createTools]
+ * Create the toolbar configuration for the main view.
+ */
+ createTools: function() {
+ var tools =
+ GeoExplorer.Full.superclass.createTools.apply(this, arguments);
+
+ var aboutButton = new Ext.Button({
+ text: "GeoExplorer",
+ iconCls: "icon-geoexplorer",
+ handler: this.displayAppInfo
+ });
+
+ tools.unshift("-");
+ tools.unshift(new Ext.Button({
+ tooltip: "Bookmark",
+ handler: this.bookmark,
+ scope: this,
+ iconCls: "icon-bookmark"
+ }));
+ tools.unshift(new Ext.Button({
+ tooltip: "Export as blog widget",
+ handler: this.showEmbedWizard,
+ scope: this,
+ iconCls: 'icon-export'
+ }));
+ tools.unshift("-");
+ tools.unshift(aboutButton);
+ return tools;
+ },
+
+ /** private: method[showEmbedWizard]
+ *
+ * Builds several panels and combines them into a
+ * :class:``GeoExplorer.Wizard`` to guide the user through customizing and
+ * exporting a map for display embedded in another website.
+ *
+ * ..seealso:: :method:`GeoExplorer.Full.makeLayerWizardPane`, :method:`GeoExplorer.Full.makeFinalWizardPane`
+ */
+ showEmbedWizard: function() {
+ var config = this.extractConfiguration();
+
+ var layerSelection = this.makeLayerWizardPane(config);
+ var finalize = this.makeFinalWizardPane(config);
+ var wizard = new GeoExplorer.Wizard({
+ height: 300,
+ width: 400,
+ resizable: false,
+ modal: true,
+ title: "Export Map",
+ pages: [{
+ title: 'Layers',
+ panel: layerSelection
+ },{
+ title: 'Done!',
+ panel: finalize
+ }]
+ });
+ wizard.show();
+ },
+
+ /** private: method[makeFinalWizardPane]
+ *
+ * Create the 'okay, done!' page of the export wizard, providing the HTML
+ * snippet to use for embedding the map, etc.
+ */
+ makeFinalWizardPane: function(config) {
+ var description = new Ext.Panel({
+ cls: 'gx-wizard-description',
+ html: '<p> Your map is ready to be published to the web! </p>' +
+ '<p> Simply copy the following HTML to embed the map in your website: </p>',
+ border: false
+ });
+
+ var snippetArea = new Ext.form.TextArea({
+ height: '100',
+ selectOnFocus: true,
+ enableKeyEvents: true,
+ listeners: {
+ keypress: function(area, evt) {
+ evt.stopEvent();
+ }
+ }
+ });
+
+ var heightField = new Ext.form.NumberField({width: 50, value: 400});
+ var widthField = new Ext.form.NumberField({width: 50, value: 600});
+
+ var updateSnippet = function() {
+ var query = Ext.urlEncode({q: Ext.util.JSON.encode(config)});
+
+ // TODO: configurablize!!!1!!!!!111!!!!!!
+ var pathname = document.location.pathname.replace(/\/[^\/]*$/, '/embed-debug.html');
+ var url =
+ document.location.protocol + "//" +
+ document.location.hostname +
+ pathname + "?" + query;
+
+ snippetArea.setValue('<iframe height="' + heightField.getValue() +
+ ' " width="' + widthField.getValue() + '" src="' + url +
+ '"> </iframe>');
+ };
+
+ heightField.on("change", updateSnippet);
+ widthField.on("change", updateSnippet);
+
+ var snippet = new Ext.Panel({
+ border: false,
+ layout: 'fit',
+ cls: 'gx-snippet-area',
+ items: [snippetArea]
+ });
+
+ var adjustments = new Ext.Panel({
+ layout: "column",
+ items: [
+ new Ext.Panel({
+ border: false,
+ width: 90,
+ items: [
+ new Ext.form.ComboBox({
+ editable: false,
+ width: 70,
+ store: new Ext.data.SimpleStore({
+ fields: ["name", "height", "width"],
+ data: [
+ ["Mini", 100, 100],
+ ["Small", 200, 300],
+ ["Large", 400, 600],
+ ["Premium", 600, 800]
+ ]}),
+ triggerAction: 'all',
+ displayField: 'name',
+ value: "Large",
+ mode: 'local',
+ listeners: {
+ 'select': function(combo, record, index) {
+ widthField.setValue(record.get("width"));
+ heightField.setValue(record.get("height"));
+ updateSnippet();
+ }
+ }
+ })
+ ]}),
+ {cls: 'gx-field-label', html: "Height", border: false},
+ heightField,
+ {cls: 'gx-field-label', html: "Width", border: false},
+ widthField
+ ],
+ border: false
+ });
+
+ return new Ext.Panel({
+ cls: 'gx-wizard-pane',
+ border: false,
+ items: [
+ description,
+ snippet,
+ {cls: 'gx-field-label', html: "Map Size", border: false},
+ adjustments],
+ listeners: {
+ show: updateSnippet
+ }
+ });
+ },
+
+ /** api: method[makeLayerWizardPane]
+ * Create the layer selection page for the export wizard.
+ */
+ makeLayerWizardPane: function (config) {
+ var datalayers = [];
+ var basemaps = [];
+
+ for (var i = 0, len = config.map.layers.length; i < len; i++) {
+ if (config.map.layers[i].background) {
+ basemaps.push(config.map.layers[i]);
+ } else {
+ datalayers.push(config.map.layers[i]);
+ }
+ }
+
+ var datalayerstore = new Ext.data.JsonStore({
+ fields: ['name', {name: 'visibility', type: 'bool'}],
+ data: datalayers
+ });
+
+ var basemapstore = new Ext.data.JsonStore({
+ fields: ['name', {name: 'visibility', type: 'bool'}],
+ data: basemaps
+ });
+
+ var titleRenderer = function(value) {
+ var record = layerStore.getAt(layerStore.find("name", value));
+ return record.get('title') || value;
+ };
+
+
+ var cbRenderer = function(value) {
+ return '<input type="checkbox"' +
+ (value ? ' checked="checked"' : '') +
+ '></input>';
+ };
+
+ var datagrid = new Ext.grid.GridPanel({
+ store: datalayerstore,
+ region: 'center',
+ autoScroll: true,
+ columns: [
+ {
+ header: '<img src="theme/img/silk/eye.png"></img>',
+ id: 'visibility',
+ dataIndex: 'visibility',
+ width: 28,
+ renderer: cbRenderer
+ },{
+ header: 'Layer Name',
+ id: 'layer',
+ dataIndex: 'name',
+ renderer: titleRenderer
+ }
+ ],
+ autoExpandColumn:'layer',
+ title: "Data Layers",
+ listeners: {
+ rowclick: function(grid, index, evt) {
+ var record = grid.getStore().getAt(index);
+ record.set("visibility", !record.get("visibility"));
+ }
+ }
+ });
+
+ var radioRenderer = function(value) {
+ return '<input type="radio"' +
+ (value ? ' checked="checked"' : '') +
+ '></input>';
+ };
+
+ var layerStore = this.mapPanel.layers;
+
+ var basegrid = new Ext.grid.GridPanel({
+ store: basemapstore,
+ region: 'east',
+ width: 150,
+ resizable: true,
+ autoScroll: true,
+ columns: [
+ {
+ header: '<img src="theme/img/silk/star.png"></img>',
+ id: 'visibility',
+ dataIndex: 'visibility',
+ width: 28,
+ renderer: radioRenderer
+ }, {
+ header: 'Layer Name',
+ id: 'layer',
+ dataIndex: 'name',
+ renderer: titleRenderer
+ }
+ ],
+ autoExpandColumn:'layer',
+ title: "Base Layers",
+ listeners: {
+ rowclick: function(grid, index, evt) {
+ var record = grid.getStore().getAt(index);
+ grid.getStore().each(function(record) {
+ record.set("visibility", false);
+ });
+ record.set("visibility", true);
+ }
+ }
+ });
+
+ return new Ext.Panel({
+ layout: 'border',
+ border: false,
+ cls: 'gx-wizard-pane',
+ items: [
+ {
+ region: 'north',
+ cls: "gx-wizard-description",
+ border: false,
+ html:'<p>Choose layers to include in the map:</p>'
+ },
+ datagrid,
+ basegrid
+ ],
+ listeners: {
+ hide: function() {
+ for (var i = 0, len = config.map.layers.length;
+ i < len;
+ i++) {
+ var layer = config.map.layers[i];
+
+ var record =
+ datalayerstore.getAt(datalayerstore.find("name", layer.name));
+
+ if (!record) {
+ record =
+ basemapstore.getAt(basemapstore.find("name", layer.name));
+ }
+
+ if (record) layer.visibility = record.get("visibility");
+ }
+ }
+ }
+ });
+ }
+});
Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/LayerMenuItem.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/LayerMenuItem.js 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/LayerMenuItem.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -19,6 +19,7 @@
/** api: config[layer]
* The :class:`GeoExt.data.LayerRecord` to be toggled.
*/
+Ext.namespace("GeoExplorer");
GeoExplorer.LayerMenuItem = function(config) {
config.layout = config.layout || 'column';
Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolMenu.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolMenu.js 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolMenu.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -4,7 +4,7 @@
/**
* api: (define)
- * module = MapToolMenu
+ * module = GeoExplorer
* class = MapToolMenu(config)
* extends = Ext.menu.Menu
*/
@@ -15,12 +15,12 @@
* 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]});
+ * var menu = new GeoExplorer.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: [{
+ * var menu = new GeoExplorer.MapToolMenu({tools: [{
* text: 'Find a distance',
* tool: measure,
* iconCls: 'x-icon-distance-finder'
@@ -37,13 +37,14 @@
*
* Simply create a menu that manipulates OpenLayers map controls.
*
- * In addition to the normal ``[items]`` array, :class:`MapToolMenu` recognizes
+ * In addition to the normal ``[items]`` array, :class:`GeoExplorer.MapToolMenu` recognizes
* a ``[tools]`` array. This can be an array of OpenLayers Control objects, or
* of simple configuration objects analogous to Ext Map entries.
*
* ..seealso:: :class:`Ext.menu.Menu`
*/
-var MapToolMenu = function(options) {
+Ext.namespace("GeoExplorer");
+GeoExplorer.MapToolMenu = function(options) {
options.items = options.items || [];
var disableTools = function() {
@@ -68,7 +69,7 @@
scope: this
}));
}
- MapToolMenu.superclass.constructor.call(this, options);
+ GeoExplorer.MapToolMenu.superclass.constructor.call(this, options);
};
-Ext.extend(MapToolMenu, Ext.menu.Menu);
+Ext.extend(GeoExplorer.MapToolMenu, Ext.menu.Menu);
Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolSplitToggle.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolSplitToggle.js 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolSplitToggle.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -6,7 +6,7 @@
/**
* api: (define)
- * module = MapToolSplitToggle
+ * module = GeoExplorer
* class = MapToolSplitToggle(config)
* extends = Ext.SplitButton
*/
@@ -16,11 +16,11 @@
*
* 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]});
+ * var menu = new GeoExplorer.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({
+ * var menu = new GeoExplorer.MapToolSplitToggle({
* defaultTool: zoomBox,
* tools: [{
* text: 'Find a distance',
@@ -51,9 +51,10 @@
* These may be simple Control objects, or Ext menu specifications with a
* tool parameter containing the control.
*
- * ..seealso:: MapToolMenu
+ * ..seealso:: :class:`GeoExplorer.MapToolMenu`
*/
-var MapToolSplitToggle = function(options) {
+Ext.namespace("GeoExplorer");
+GeoExplorer.MapToolSplitToggle = function(options) {
this.lastActiveTool = options.defaultTool || options.tools[0];
this.tools = options.tools;
@@ -63,12 +64,12 @@
toggleHandler: this.handleEvent,
handler: this.handleEvent,
scope: this,
- menu: new MapToolMenu({tools: options.tools})
+ menu: new GeoExplorer.MapToolMenu({tools: options.tools})
});
options.menu.on("itemclick", this.handleMenu, this);
- MapToolSplitToggle.superclass.constructor.call(this, options);
+ GeoExplorer.MapToolSplitToggle.superclass.constructor.call(this, options);
if (options.toggleGroup) {
this.on("render",
@@ -78,7 +79,7 @@
};
-Ext.extend(MapToolSplitToggle, Ext.SplitButton, {
+Ext.extend(GeoExplorer.MapToolSplitToggle, Ext.SplitButton, {
/**
* api: property[lastActiveTool]
* The most recently selected :class:`OpenLayers.Control`, to be toggled
@@ -139,8 +140,8 @@
* :param: evt: the Ext selection event
*
* Called when an item in the menu is selected. All this does is update
- * :attr:`~MapToolSplitToggle.lastActiveTool`; the menu should be a
- * :class:`MapToolMenu` to handle the control (de)activation.
+ * :attr:`~GeoExplorer.MapToolSplitToggle.lastActiveTool`; the menu should be a
+ * :class:`GeoExplorer.MapToolMenu` to handle the control (de)activation.
*/
handleMenu: function(item, evt) {
for (var i = 0, len = this.tools.length; i < len; i++) {
Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolToggle.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolToggle.js 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer/MapToolToggle.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -8,12 +8,12 @@
* 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});
+ * var btn = new GeoExplorer.MapToolToggle({tool: measure});
*
* This one provides a custom name and icon::
*
* var measure = new OpenLayers.Control.Measure(OpenLayers.Handler.Path);
- * var btn = new MapToolToggle({
+ * var btn = new GeoExplorer.MapToolToggle({
* text: 'Find a distance',
* tool: measure,
* iconCls: 'x-icon-distance-finder'
@@ -35,7 +35,8 @@
*
* .. seealso:: :class:`Ext.Button`
*/
-var MapToolToggle = function(options) {
+Ext.namespace("GeoExplorer");
+GeoExplorer.MapToolToggle = function(options) {
this.mapTool = options.tool;
Ext.applyIf(options, {
text: this.findLabel(),
@@ -44,10 +45,10 @@
handler: this.handleEvent,
scope: this
});
- MapToolToggle.superclass.constructor.call(this, options);
+ GeoExplorer.MapToolToggle.superclass.constructor.call(this, options);
};
-Ext.extend(MapToolToggle, Ext.Button, {
+Ext.extend(GeoExplorer.MapToolToggle, Ext.Button, {
/** api: property[mapTool]
* The OpenLayers Control that this button toggles.
*/
Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -615,7 +615,7 @@
var firstSource = this.layerSources.getAt(0);
- var capGridPanel = new CapabilitiesGrid({
+ var capGridPanel = new GeoExplorer.CapabilitiesGrid({
store: firstSource.data.store,
mapPanel : this.mapPanel,
layout: 'fit',
@@ -949,7 +949,7 @@
scope: this
}),
infoButton,
- new MapToolSplitToggle({
+ new GeoExplorer.MapToolSplitToggle({
tooltip: "Measure",
iconCls: "icon-measure-length",
defaultTool: measureLength,
Added: apps/opengeo/geoexplorer/trunk/lib/Viewer.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/Viewer.js (rev 0)
+++ apps/opengeo/geoexplorer/trunk/lib/Viewer.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2008 The Open Planning Project
+ */
+
+/**
+ * api: (define)
+ * module = GeoExplorer
+ * class = Viewer(config)
+ * extends = Ext.util.Observable
+ */
+
+/** api: constructor
+ * ..class:: Viewer(config)
+ * :param: config - optional application configuration properties
+ *
+ * Create a new Viewer application.
+ */
+var Viewer = Ext.extend(Ext.util.Observable, {
+
+ constructor: function(config) {
+
+ var query = Ext.urlDecode(document.location.search.substr(1));
+ var queryConfig = Ext.util.JSON.decode(query.q);
+
+ this.initialConfig = Ext.apply({}, queryConfig, config);
+ Ext.apply(this, config);
+
+ // add any custom application events
+ this.addEvents(
+ /**
+ * Event: ready
+ * Fires when application is ready for user interaction.
+ */
+ "ready");
+
+ // pass on any proxy config to OpenLayers
+ if(this.proxy) {
+ OpenLayers.ProxyHost = this.proxy;
+ }
+
+ this.load();
+
+ },
+
+ /** api: method[load]
+ * Called to load the application. Implemented by a subclass.
+ */
+ load: Ext.emptyFn,
+
+ /** api: method[dispatch]
+ * :param: functions: :class:`Array(Function)` List of functions to be
+ * called. All functions will be called with two arguments - a callback
+ * to call when the sequence is done and a storage object
+ * :param: complete: :class:`Function` A function that will be called when
+ * all other functions report that they are done. The final callback
+ * will be called with the storage object passed to all other functions.
+ * :param: scope: :class:`Object` Optional object to be set as the scope of
+ * all functions called.
+ *
+ * Allows multiple asynchronous sequences to be called in parallel. A final
+ * callback is called when all other sequences report that they are done.
+ */
+ dispatch: function(functions, complete, scope) {
+ complete = complete || Ext.emptyFn;
+ scope = scope || this;
+ var requests = functions.length;
+ var responses = 0;
+ var storage = {};
+ function respond() {
+ ++responses;
+ if(responses === requests) {
+ complete.call(scope, storage);
+ }
+ }
+ function trigger(index) {
+ window.setTimeout(function() {
+ functions[index].apply(scope, [respond, storage]);
+ });
+ }
+ for(var i=0; i<requests; ++i) {
+ trigger(i);
+ }
+ }
+
+});
Modified: apps/opengeo/geoexplorer/trunk/script/GeoExplorer-debug.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/script/GeoExplorer-debug.js 2009-06-03 18:36:27 UTC (rev 974)
+++ apps/opengeo/geoexplorer/trunk/script/GeoExplorer-debug.js 2009-06-03 18:38:04 UTC (rev 975)
@@ -3,9 +3,9 @@
// Since the applications are located one directory down from
// the base, all these includes must be prefixed by a ../
var jsfiles = new Array(
- "lib/GeoExplorer/Viewer.js",
+ "lib/Viewer.js",
"lib/GeoExplorer.js",
- "lib/GeoExplorer/RowExpander.js",
+ "lib/Ext/grid/RowExpander.js",
"lib/GeoExplorer/MapToolToggle.js",
"lib/GeoExplorer/MapToolSplitToggle.js",
"lib/GeoExplorer/MapToolMenu.js",
@@ -13,8 +13,8 @@
"lib/GeoExplorer/LayerMenuItem.js",
"lib/GeoExplorer/CapabilitiesGrid.js",
"lib/GeoExplorer/GroupContainer.js",
- "lib/GeoExplorer/Full/Full.js",
- "lib/GeoExplorer/Embed/Embed.js",
+ "lib/GeoExplorer/Full.js",
+ "lib/GeoExplorer/Embed.js",
"lib/GeoExplorer/NewSourceWindow.js"
);
More information about the Commits
mailing list