Added help dialog. Fixed bug when clicking Google Places results. Cle…

…ar search text when coordinates are cleared. Support for negative coordinates.

nuget/content/ClientResources/googlemaps/Editor.js

@@ -14,7 +14,7 @@
   */
 
 define([
-    "dojo/_base/connect", // To be able to connect Dojo events
+    "dojo/on", // To connect events
     "dojo/_base/declare", // Used to declare the actual widget
 
     "dojo/aspect", // Used to attach to events in an aspect-oriented way to inject behaviors
@@ -28,13 +28,16 @@ define([
 
     "epi/epi", // For example to use areEqual to compare property values
     "epi/shell/widget/_ValueRequiredMixin", // In order to check if the property is in a readonly state
+    "epi/shell/widget/dialog/LightWeight", // Used to display the help message
 
     "dojo/i18n!./nls/Labels", // Localization files containing translations
 
+    'xstyle/css!./WidgetTemplate.css',
+
     "tedgustaf/googlemaps/Async!https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places" // Use async module to load external asyncronously loaded script for Google Maps
 ],
 function (
-    connect,
+    on,
     declare,
 
     aspect,
@@ -48,6 +51,7 @@ function (
 
     epi,
     _ValueRequiredMixin,
+    LightWeight,
 
     localized
 ) {
@@ -64,7 +68,8 @@ function (
 
         // Event used to notify EPiServer that the property value has changed
         onChange: function (value) {
-
+            console.log('onchange');
+            this.parent.save(value); // HACK Otherwise value won't be saved when Google Places search result item is clicked (instead of using Enter to select it)
         },
 
         // Dojo function invoked before rendering
@@ -102,6 +107,27 @@ function (
                     that.alignMap();
                 });
             });
+
+            // Display help when help icon is clicked
+            on(this.helpIcon, "click", function (e) {
+                e.preventDefault();
+
+                var dialog = new LightWeight({
+                    style: "width: 540px",
+                    closeIconVisible: true,
+                    showButtonContainer: false,
+                    onButtonClose: function() {
+                        dialog.hide();
+                    },
+                    _endDrag: function () {
+                        // HACK Avoid EPiServer bug, "Cannot read property 'userSetTransformId' of null" when close icon is clicked
+                    },
+                    title: that.localized.help.dialogTitle,
+                    content: that.localized.help.dialogHtml
+                });
+
+                dialog.show();
+            });
         },
 
         // Dojo event triggered after 'postCreate', for example when JS resizing needs to be done
@@ -247,6 +273,9 @@ function (
             this.longitudeTextbox.set('value', '', false); // Change value without triggering onChange event as we will explicitly null the property value
             this.latitudeTextbox.set('value', '');
 
+            // Clear search box
+            this.searchTextbox.set("value", '');
+
             // Remove the map marker, if any
             if (this.marker) {
                 this.marker.setMap(null);

nuget/content/ClientResources/googlemaps/WidgetTemplate.css

@@ -0,0 +1,5 @@
+.editor-map-canvas {width: 100%; height: 240px; margin: 2px 0 5px 0}
+.editor-map-search {width: 408px;}
+.editor-map-coordinates {width:100%}
+.editor-map-clear {margin-right: 0}
+.editor-map-help { float: right;width: 32px;height: 32px;display:block}

nuget/content/ClientResources/googlemaps/WidgetTemplate.html

@@ -1,13 +1,15 @@
-<div class="dijitInline">
+<div class="dijitInline google-maps-editor">
 
-    <input type="text" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="searchTextbox" placeholder="${localized.search}" style="width:99.5%" />
+    <input class="editor-map-search" type="text" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="searchTextbox" placeholder="${localized.search}" />
 
-    <div id="map-canvas" data-dojo-attach-point="canvas" style="width: 100%; height: 240px; margin: 2px 0 5px 0"></div>
+    <a title="${localized.help.tooltip}" class="editor-map-help epi-iconHelp epi-icon--medium" href="#" data-dojo-attach-point="helpIcon"></a>
 
-    <div class="dijitInputContainer">
+    <div class="editor-map-canvas" id="map-canvas" data-dojo-attach-point="canvas"></div>
+
+    <div class="dijitInputContainer editor-map-coordinates">
         <input type="text" disabled placeholder="${localized.latitude}" title="${localized.latitude}" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="latitudeTextbox" />
         <input type="text" disabled placeholder="${localized.longitude}" title="${localized.longitude}" data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="longitudeTextbox" />
-        <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="clearButton" data-dojo-attach-event="onClick:clearCoordinates" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCancel', showLabel: false">${localized.clear}</button>
+        <button class="editor-map-clear" data-dojo-type="dijit/form/Button" data-dojo-attach-point="clearButton" data-dojo-attach-event="onClick:clearCoordinates" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCancel', showLabel: false">${localized.clear}</button>
     </div>
 
 </div>

nuget/content/ClientResources/googlemaps/nls/Labels.js

@@ -3,7 +3,17 @@
         latitude: "Latitude",
         longitude: "Longitude",
         search: "Enter a location or right-click the map",
-        clear: "Clear coordinates"
+        clear: "Clear coordinates",
+
+        help: {
+            tooltip: "Click for help",
+            dialogTitle: "How to use the map editor",
+            dialogHtml: "<p><strong>Select a location</strong><br />Right-click anywhere on the map to select a location, or to adjust the pin position.</p>" +
+                        "<p><strong>Search for a location</strong><br />Start typing in the search box and select one of the suggested locations that appear. You can search for addresses, businesses, and locations.</p>" +
+                        "<p><strong>Panning</strong><br />Click and hold the left mouse button and drag across the map.</p>" +
+                        "<p><strong>Zooming</strong><br />Use your mouse wheel to zoom in and out. You can also double-click the map to zoom in.</p>" +
+                        "<p><strong>Clear selection</strong><br />Click the button next to the coordinates to clear the currently selected location.</p>"
+        }
     },
 
     "sv": true // Google Maps editor also supports Swedish

nuget/content/ClientResources/googlemaps/nls/sv/Labels.js

@@ -2,5 +2,15 @@
     latitude: "Latitud",
     longitude: "Longitud",
     search: "Skriv en plats eller högerklicka i kartan",
-    clear: "Rensa koordinater"
+    clear: "Rensa koordinater",
+
+    help: {
+        tooltip: "Klicka för hjälp",
+        dialogTitle: "Så använder du kartan",
+        dialogHtml: "<p><strong>Välja en plats</strong><br />Högerklicka var som helst på kartan för att välja en plats, eller för att justera kartnålens placering.</p>" +
+                    "<p><strong>Söka efter en plats</strong><br />Börja att skriva i sökrutan och välj något av förslagen som visas. Du kan söka på adress, företagsnamn, eller plats.</p>" +
+                    "<p><strong>Panorera</strong><br />Klicka och håll in vänster musknapp och använd sedan musen för att flytta kartan.</p>" +
+                    "<p><strong>Zooma</strong><br />Använd mushjulet för att zooma in och ut. Du kan också dubbelklicka på kartan för att zooma in.</p>" +
+                    "<p><strong>Rensa vald plats</strong><br />Klicka på knappen intill de utskrivna koordinaterna för att rensa aktuell plats.</p>"
+    }
 });