From ee391f3e14dd30a99c95b4d657830384b766075d Mon Sep 17 00:00:00 2001 From: Kevin DeLoach Date: Mon, 12 Dec 2016 12:33:47 -0500 Subject: [PATCH] Integrate map_utils widget into framework core Fixes various UX issues with map_utils plugin by integrating it into the framework core. Changes: * Replace custom dropdown with Bootstrap widget * Merge CSS, templates, and locale files * Simplify map_utils commands Connects #734 Connects #738 --- src/GeositeFramework/Views/Home/Index.cshtml | 45 ++++++- src/GeositeFramework/css/main.css | 11 +- .../measure/style.css => css/measure.css} | 2 +- src/GeositeFramework/js/Map.js | 13 ++ .../js/widgets/map_utils/export/main.js | 10 +- .../map_utils/full_extent/locales/en.json | 4 - .../map_utils/full_extent/locales/es.json | 4 - .../js/widgets/map_utils/full_extent/main.js | 41 ++---- .../js/widgets/map_utils/main.js | 125 ++++-------------- .../widgets/map_utils/measure/AgsMeasure.js | 15 +-- .../widgets/map_utils/measure/locales/en.json | 9 -- .../widgets/map_utils/measure/locales/es.json | 9 -- .../js/widgets/map_utils/measure/main.js | 38 ++---- .../widgets/map_utils/measure/templates.html | 28 ---- .../js/widgets/map_utils/plugin.json | 9 -- .../js/widgets/map_utils/share/main.js | 12 +- .../js/widgets/map_utils/style.css | 46 ------- .../js/widgets/map_utils/templates.html | 14 -- src/GeositeFramework/locales/en.json | 10 +- src/GeositeFramework/locales/es.json | 10 +- 20 files changed, 141 insertions(+), 314 deletions(-) rename src/GeositeFramework/{js/widgets/map_utils/measure/style.css => css/measure.css} (98%) delete mode 100644 src/GeositeFramework/js/widgets/map_utils/full_extent/locales/en.json delete mode 100644 src/GeositeFramework/js/widgets/map_utils/full_extent/locales/es.json delete mode 100644 src/GeositeFramework/js/widgets/map_utils/measure/locales/en.json delete mode 100644 src/GeositeFramework/js/widgets/map_utils/measure/locales/es.json delete mode 100644 src/GeositeFramework/js/widgets/map_utils/measure/templates.html delete mode 100644 src/GeositeFramework/js/widgets/map_utils/plugin.json delete mode 100644 src/GeositeFramework/js/widgets/map_utils/style.css delete mode 100644 src/GeositeFramework/js/widgets/map_utils/templates.html diff --git a/src/GeositeFramework/Views/Home/Index.cshtml b/src/GeositeFramework/Views/Home/Index.cshtml index 91ae38b2..9357e6b4 100644 --- a/src/GeositeFramework/Views/Home/Index.cshtml +++ b/src/GeositeFramework/Views/Home/Index.cshtml @@ -87,6 +87,7 @@ + @@ -199,7 +200,24 @@
-
+
+ +
+
+ + +
+
+ +
+
@@ -520,6 +538,31 @@
+ + + +
diff --git a/src/GeositeFramework/css/main.css b/src/GeositeFramework/css/main.css index cc4e8388..93288045 100644 --- a/src/GeositeFramework/css/main.css +++ b/src/GeositeFramework/css/main.css @@ -1650,7 +1650,7 @@ header .nav-main { left: 20px; z-index: 1; } -.content .map .tools { +.content .map .map-tools { position: absolute; top: 145px; right: 20px; @@ -1691,7 +1691,8 @@ header .nav-main { box-shadow: 0 1px 7px #000; box-shadow: 0 1px 7px rgba(0, 0, 0, .85); } -.content .map .topbar-plugin a.plugin-launcher > div { +.content .map .topbar-plugin .plugin-launcher > div, +.content .map .topbar-plugin .plugin-launcher > button { width: 34px; height: 34px; background-color: white; @@ -1705,14 +1706,16 @@ header .nav-main { box-shadow: 0 0 12px rgba(0, 0, 0, .25); border: 1px solid #999; } -.content .map .topbar-plugin.active a.plugin-launcher > div { +.content .map .topbar-plugin.active .plugin-launcher > div, +.content .map .topbar-plugin.active .plugin-launcher > button { opacity: 1; border: 1px solid #212323; box-shadow: 0 0 15px black inset; background-color: #999; box-shadow: 0 0 15px rgba(0, 0, 0, .5) inset; } -.content .map .topbar-plugin a.plugin-launcher > div:hover { +.content .map .topbar-plugin .plugin-launcher > div:hover, +.content .map .topbar-plugin .plugin-launcher > button:hover { opacity: 1; } .esriSimpleSlider { diff --git a/src/GeositeFramework/js/widgets/map_utils/measure/style.css b/src/GeositeFramework/css/measure.css similarity index 98% rename from src/GeositeFramework/js/widgets/map_utils/measure/style.css rename to src/GeositeFramework/css/measure.css index 59557f04..71e17099 100644 --- a/src/GeositeFramework/js/widgets/map_utils/measure/style.css +++ b/src/GeositeFramework/css/measure.css @@ -18,7 +18,7 @@ } -.content .map .measure { +.content .map .measure { background-image: url(icon.png); } .content .map .active .measure { diff --git a/src/GeositeFramework/js/Map.js b/src/GeositeFramework/js/Map.js index c5354cb8..4fdd058f 100644 --- a/src/GeositeFramework/js/Map.js +++ b/src/GeositeFramework/js/Map.js @@ -3,6 +3,7 @@ require(['use!Geosite', 'framework/Legend', + 'framework/widgets/map_utils/main', 'framework/util/ajax', 'esri/map', 'esri/layers/ArcGISTiledMapServiceLayer', @@ -12,6 +13,7 @@ require(['use!Geosite', ], function(N, Legend, + MapUtils, ajaxUtil, Map, ArcGISTiledMapServiceLayer, @@ -143,6 +145,7 @@ require(['use!Geosite', N.app.syncedMapManager.addMapView(view); initLegend(view, esriMap); + initMapUtils(view, esriMap); // Cache the parent of the infowindow rather than re-select it every time. // Occasionally, the infoWindow dom node as accessed from the underlaying esri.map @@ -314,6 +317,16 @@ require(['use!Geosite', dojo.connect(esriMap, 'resize', redraw); } + function initMapUtils(view, esriMap) { + var el = $('#map-utils-control').get(0); + return new MapUtils({ + el: el, + map: esriMap, + app: N.app, + regionData: N.app.data.region + }); + } + N.views = N.views || {}; N.views.Map = Backbone.View.extend({ $infoWindowParent: null, diff --git a/src/GeositeFramework/js/widgets/map_utils/export/main.js b/src/GeositeFramework/js/widgets/map_utils/export/main.js index 51a0c8c1..387d5962 100644 --- a/src/GeositeFramework/js/widgets/map_utils/export/main.js +++ b/src/GeositeFramework/js/widgets/map_utils/export/main.js @@ -5,16 +5,12 @@ define([ 'use strict'; return declare(null, { - constructor: function(args) { - declare.safeMixin(this, args); + constructor: function(dispatcher) { + this.dispatcher = dispatcher; }, execute: function() { - this.app.dispatcher.trigger('export-map:pane-0'); - }, - - cancel: function() { - // NOOP + this.dispatcher.trigger('export-map:pane-0'); } }); }); diff --git a/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/en.json b/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/en.json deleted file mode 100644 index c61eda72..00000000 --- a/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/en.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "Full Extent": "Full Extent", - "Zoom out to the default map extent": "Zoom out to the default map extent" -} \ No newline at end of file diff --git a/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/es.json b/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/es.json deleted file mode 100644 index 2febca01..00000000 --- a/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/es.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "Full Extent": "Toda su Extensión", - "Zoom out to the default map extent": "Alejar el zoom para el mapa predeterminado medida" -} \ No newline at end of file diff --git a/src/GeositeFramework/js/widgets/map_utils/full_extent/main.js b/src/GeositeFramework/js/widgets/map_utils/full_extent/main.js index 88164673..c6bc1732 100644 --- a/src/GeositeFramework/js/widgets/map_utils/full_extent/main.js +++ b/src/GeositeFramework/js/widgets/map_utils/full_extent/main.js @@ -1,14 +1,4 @@ -require({ - packages: [ - { - name: 'jquery', - location: '//ajax.googleapis.com/ajax/libs/jquery/1.9.0', - main: 'jquery.min' - } - ] -}); - -define([ +define([ 'dojo/_base/declare', 'esri/geometry/Extent', 'esri/SpatialReference' @@ -18,28 +8,21 @@ define([ SpatialReference) { 'use strict'; + var LatLng = new SpatialReference({ wkid: 4326 }); + return declare(null, { - constructor: function(args) { - declare.safeMixin(this, args); + constructor: function(map, extent) { + this.map = map; + this.initialExtent = new Extent( + extent[0], + extent[1], + extent[2], + extent[3], + LatLng); }, execute: function() { - var extent = this.getInitialExtent(); - this.map.setExtent(extent); - }, - - cancel: function() { - // NOOP - }, - - getInitialExtent: function() { - var x = this.app.regionConfig.initialExtent, - srs = new SpatialReference({ wkid: 4326 /*lat-long*/ }); - return new Extent(x[0], x[1], x[2], x[3], srs); - }, - - renderLauncher: function() { - return $('
'); + this.map.setExtent(this.initialExtent); } }); }); diff --git a/src/GeositeFramework/js/widgets/map_utils/main.js b/src/GeositeFramework/js/widgets/map_utils/main.js index 7d7ddc4a..68e11bb1 100644 --- a/src/GeositeFramework/js/widgets/map_utils/main.js +++ b/src/GeositeFramework/js/widgets/map_utils/main.js @@ -1,23 +1,6 @@ -require({ - packages: [ - { - name: 'jquery', - location: '//ajax.googleapis.com/ajax/libs/jquery/1.9.0', - main: 'jquery.min' - }, - { - name: 'underscore', - location: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3', - main: 'underscore-min' - } - ] -}); - -define([ +define([ 'use!Geosite', 'dojo/_base/declare', - 'framework/PluginBase', - 'dojo/text!./templates.html', './measure/main', './full_extent/main', './export/main', @@ -25,112 +8,56 @@ define([ ], function(N, declare, - PluginBase, - templates, MeasureCommand, FullExtentCommand, ExportCommand, ShareCommand) { 'use strict'; - var $templates = $('
').append($($.trim(templates))); - - return declare(PluginBase, { - toolbarName: 'Map Utilities', - fullName: 'Map Utilities', - toolbarType: 'map', - - // Prevent identify from conflicting with "measure" commmand. - allowIdentifyWhenActive: false, - - initialize: function(args) { - declare.safeMixin(this, args); - this.options = args; - }, - - activate: function() { - this.createMenu(); - }, - - deactivate: function() { - this.cancelCommand(); - this.destroyMenu(); - }, - - hibernate: function() { - this.deactivate(); - }, - - getPluginContainer: function() { - var $parent = $('.content .map .map-utils').parents('.topbar-plugin'); - return $parent; - }, - - createMenu: function() { - var $container = this.getPluginContainer(), - html = $templates.find('#template-map-utils-menu').html(); - - this.$menu = $('
') - .on('click', '[data-command]', this.onCommand.bind(this)) - .append(html); - - $container.append(this.$menu); - - if ($.i18n) { - this.$menu.localize(); - } + return Backbone.View.extend({ + events: { + 'click [data-command]': 'onCommand' }, - destroyMenu: function() { - if (this.$menu) { - this.$menu.remove(); - this.$menu = null; - } - }, - - onCommand: function(e) { - var $el = $(e.currentTarget), - command = $el.data('command'); - - this.cancelCommand(); - this.command = this.initializeCommand(command); - - // Commands may return "nothing" to indicate that they execute - // immediately, or a Deferred, to indicate that map_utils should - // remain active until the action is finished executing. - var defer = this.command.execute(); - - if (defer) { - defer.then(this.plugin.turnOff); - this.destroyMenu(); - } else { - this.plugin.turnOff(); - } + initialize: function(options) { + this.map = options.map; + this.app = options.app; + this.regionData = options.regionData; }, initializeCommand: function(command) { + var map = this.map; + var dispatcher = this.app.dispatcher; + var initialExtent = this.regionData.initialExtent; + switch (command) { case 'measure': - return new MeasureCommand(this.options); + return new MeasureCommand(map); case 'zoom': - return new FullExtentCommand(this.options); + return new FullExtentCommand(map, initialExtent); case 'export': - return new ExportCommand(this.options); + return new ExportCommand(dispatcher); case 'share': - return new ShareCommand(this.options); + return new ShareCommand(dispatcher); } + throw new Error('Command not supported'); }, cancelCommand: function() { - if (this.command) { + if (this.command && this.command.cancel) { this.command.cancel(); - this.command = null; } + this.command = null; }, - renderLauncher: function() { - return $templates.find('#template-map-utils-launcher').html(); + onCommand: function(e) { + var $el = $(e.currentTarget), + command = $el.data('command'); + + this.cancelCommand(); + this.command = this.initializeCommand(command); + this.command.execute(); } }); }); diff --git a/src/GeositeFramework/js/widgets/map_utils/measure/AgsMeasure.js b/src/GeositeFramework/js/widgets/map_utils/measure/AgsMeasure.js index 6d53916c..6bde2f56 100644 --- a/src/GeositeFramework/js/widgets/map_utils/measure/AgsMeasure.js +++ b/src/GeositeFramework/js/widgets/map_utils/measure/AgsMeasure.js @@ -1,8 +1,6 @@ define([ "use!Geosite", "jquery", - "use!underscore", - "dojo/Deferred", "esri/geometry/Polyline", "esri/geometry/Polygon", "esri/geometry/geodesicUtils", @@ -20,8 +18,6 @@ define([ ], function(N, $, - _, - Deferred, Polyline, Polygon, geodesicUtils, @@ -139,6 +135,8 @@ define([ _.each(_eventHandles, dojo.disconnect); options.map.enableDoubleClickZoom(); _$tooltip.hide(); + + N.app.enableIdentify(); }, reset = function () { @@ -448,14 +446,7 @@ define([ _eventHandles.click = dojo.connect(options.map, "onClick", handleMapClick); - // Return promise that will never be resolved or rejected. - // The purpose of this is to keep the map_utils plugin - // active after the measure interaction is completed. - // If the deferred is resolved after completing the - // drawing, map_utils would immediately deactivate, - // and erase the measurement that was just drawn. - var defer = new Deferred(); - return defer.promise; + N.app.disableIdentify(); } }; }; diff --git a/src/GeositeFramework/js/widgets/map_utils/measure/locales/en.json b/src/GeositeFramework/js/widgets/map_utils/measure/locales/en.json deleted file mode 100644 index 7024417a..00000000 --- a/src/GeositeFramework/js/widgets/map_utils/measure/locales/en.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "Measure": "Measure", - "Measure distances and area on the map": "Measure distances and area on the map", - "Segment Length": "Segment Length", - "Total Length": "Total Length", - "Area:": "Area:", - "Length:": "Length:", - "Double-click to end a line segment. Single-click the first node to end a polygon.": "Double-click to end a line segment. Single-click the first node to end a polygon." -} \ No newline at end of file diff --git a/src/GeositeFramework/js/widgets/map_utils/measure/locales/es.json b/src/GeositeFramework/js/widgets/map_utils/measure/locales/es.json deleted file mode 100644 index 6a53c633..00000000 --- a/src/GeositeFramework/js/widgets/map_utils/measure/locales/es.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "Measure": "Mediciones", - "Measure distances and area on the map": "Medir distancias y el área en el mapa", - "Segment Length": "Longitud del segmento", - "Total Length": "Longitud total", - "Area:": "Área de:", - "Length:": "Longitud:", - "Double-click to end a line segment. Single-click the first node to end a polygon.": "De doble-clic para terminar la línea. De un clic en el primer nodo para terminar el polígono" -} diff --git a/src/GeositeFramework/js/widgets/map_utils/measure/main.js b/src/GeositeFramework/js/widgets/map_utils/measure/main.js index 9ffa55b3..292cdfe9 100644 --- a/src/GeositeFramework/js/widgets/map_utils/measure/main.js +++ b/src/GeositeFramework/js/widgets/map_utils/measure/main.js @@ -1,48 +1,30 @@ -require({ - packages: [ - { - name: 'jquery', - location: '//ajax.googleapis.com/ajax/libs/jquery/1.9.0', - main: 'jquery.min' - } - ] -}); - -define([ +define([ 'dojo/_base/declare', - './AgsMeasure', - 'dojo/text!./templates.html' + './AgsMeasure' ], function(declare, - AgsMeasure, - templates) { + AgsMeasure) { 'use strict'; - var $templates = $('
').append($($.trim(templates))); + var tooltipTemplate = $('#template-measure-tooltip').html(); + var infoBubbleTemplate = $('#template-measure-infobubble').html(); return declare(null, { - constructor: function(args) { - declare.safeMixin(this, args); + constructor: function(map) { this.agsMeasure = new AgsMeasure({ - map: this.map, - tooltipTemplate: $templates.find('#template-measure-tooltip').html(), - infoBubbleTemplate: $templates.find('#template-measure-infobubble').html() + map: map, + tooltipTemplate: tooltipTemplate, + infoBubbleTemplate: infoBubbleTemplate }); this.agsMeasure.initialize(); }, execute: function() { - return this.agsMeasure.activate(); + this.agsMeasure.activate(); }, cancel: function() { this.agsMeasure.deactivate(); - }, - - hibernate: function() { - this.deactivate(); - if (this._pointLayer) this._pointLayer.clear(); - if (this._lineLayer) this._lineLayer.clear(); } }); }); diff --git a/src/GeositeFramework/js/widgets/map_utils/measure/templates.html b/src/GeositeFramework/js/widgets/map_utils/measure/templates.html deleted file mode 100644 index 85813e36..00000000 --- a/src/GeositeFramework/js/widgets/map_utils/measure/templates.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - diff --git a/src/GeositeFramework/js/widgets/map_utils/plugin.json b/src/GeositeFramework/js/widgets/map_utils/plugin.json deleted file mode 100644 index 1e020e72..00000000 --- a/src/GeositeFramework/js/widgets/map_utils/plugin.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "css": [ - "plugins/map_utils/style.css", - "plugins/map_utils/measure/style.css" - ], - "use": { - "underscore": { "attach": "_" } - } -} diff --git a/src/GeositeFramework/js/widgets/map_utils/share/main.js b/src/GeositeFramework/js/widgets/map_utils/share/main.js index e58a3f55..d67ae82d 100644 --- a/src/GeositeFramework/js/widgets/map_utils/share/main.js +++ b/src/GeositeFramework/js/widgets/map_utils/share/main.js @@ -1,20 +1,16 @@ define([ - 'dojo/_base/declare', + 'dojo/_base/declare' ], function(declare) { 'use strict'; return declare(null, { - constructor: function(args) { - declare.safeMixin(this, args); + constructor: function(dispatcher) { + this.dispatcher = dispatcher; }, execute: function() { - this.app.dispatcher.trigger('save-share'); - }, - - cancel: function() { - // NOOP + this.dispatcher.trigger('save-share'); } }); }); diff --git a/src/GeositeFramework/js/widgets/map_utils/style.css b/src/GeositeFramework/js/widgets/map_utils/style.css deleted file mode 100644 index e382ccb0..00000000 --- a/src/GeositeFramework/js/widgets/map_utils/style.css +++ /dev/null @@ -1,46 +0,0 @@ -.content .map .map-utils { - padding-top: 2px; - text-align: center; - color: #292b42; - font-size: 16pt; -} -.content .map .active .map-utils { - color: #fff; -} - -.content .map .map-utils-menu { - position: absolute; - top: 0; - left: -120px; - background: #e3e3e3; - padding: 4px; - } - .content .map .map-utils-menu ul, - .content .map .map-utils-menu li { - margin: 0; - padding: 0; - list-style: none; - } - .content .map .map-utils-menu li a { - display: inline-block; - padding: 3px 8px; - color: #333; - font-size: 13px; - text-decoration: none; - width: 100%; - } - .content .map .map-utils-menu li a:hover { - background: #ddd; - } - -.content .map .map-utils-menu:after { - position: absolute; - top: 10px; - right: -10px; - width: 0; - height: 0; - border-style: solid; - border-width: 5px 0 5px 10px; - border-color: transparent transparent transparent #e3e3e3; - content: ''; -} diff --git a/src/GeositeFramework/js/widgets/map_utils/templates.html b/src/GeositeFramework/js/widgets/map_utils/templates.html deleted file mode 100644 index 34a5c85f..00000000 --- a/src/GeositeFramework/js/widgets/map_utils/templates.html +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/src/GeositeFramework/locales/en.json b/src/GeositeFramework/locales/en.json index 38ba3033..2b508551 100644 --- a/src/GeositeFramework/locales/en.json +++ b/src/GeositeFramework/locales/en.json @@ -59,5 +59,13 @@ "Next": "Next", "Get Started": "Get Started", "Measure": "Measure", - "Turn off this plugin": "Turn off this plugin" + "Turn off this plugin": "Turn off this plugin", + "Full Extent": "Full Extent", + "Zoom out to the default map extent": "Zoom out to the default map extent", + "Measure distances and area on the map": "Measure distances and area on the map", + "Segment Length": "Segment Length", + "Total Length": "Total Length", + "Area:": "Area:", + "Length:": "Length:", + "Double-click to end a line segment. Single-click the first node to end a polygon.": "Double-click to end a line segment. Single-click the first node to end a polygon." } diff --git a/src/GeositeFramework/locales/es.json b/src/GeositeFramework/locales/es.json index 13d6c2b6..cd225f83 100644 --- a/src/GeositeFramework/locales/es.json +++ b/src/GeositeFramework/locales/es.json @@ -59,5 +59,13 @@ "Next": "Siguiente", "Get Started": "Empezar", "Measure": "Mediciones", - "Turn off this plugin": "Desactivar este plugin" + "Turn off this plugin": "Desactivar este plugin", + "Full Extent": "Toda su Extensión", + "Zoom out to the default map extent": "Alejar el zoom para el mapa predeterminado medida", + "Measure distances and area on the map": "Medir distancias y el área en el mapa", + "Segment Length": "Longitud del segmento", + "Total Length": "Longitud total", + "Area:": "Área de:", + "Length:": "Longitud:", + "Double-click to end a line segment. Single-click the first node to end a polygon.": "De doble-clic para terminar la línea. De un clic en el primer nodo para terminar el polígono" }