feat(map-ui): show hovertip warning for no data

if a user hovers over a feature that has yet to download its attributes, show a message in the hovertip to indicate data is still downloading Closes #9974
RAMP-PCAR · May 7, 2015 · 7e4e40a · 7e4e40a
1 parent e4cd0f6
commit 7e4e40a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 35 deletions.
diff --git a/src/js/RAMP/Modules/featureClickHandler.js b/src/js/RAMP/Modules/featureClickHandler.js
@@ -27,13 +27,13 @@
 
 define([
 /* RAMP */
-    "ramp/graphicExtension", "ramp/eventManager",
+    'ramp/graphicExtension', 'ramp/eventManager',
 
 /* Dojo */
-    "dojo/topic", "dojo/dom-construct",
+    'dojo/topic', 'dojo/dom-construct',
 
 /* Utils */
-    "utils/util"],
+    'utils/util'],
 
     function (
     /* RAMP */
@@ -44,7 +44,7 @@ define([
 
     /* Utils */
     UtilMisc) {
-        "use strict";
+        'use strict';
         return {
             /**
             * This function is called whenever the feature on the map is clicked/selected by the user.
@@ -58,16 +58,15 @@ define([
             onFeatureSelect: function (evt) {
                 var selectedGraphic = evt.graphic,
                     fData = GraphicExtension.getFDataForGraphic(selectedGraphic);
-
-                //TODO how best to handle a lack of attribute data for a graphic?
+
                 if (fData) {
                     topic.publish(EventManager.GUI.SUBPANEL_OPEN, {
                         panelName: i18n.t('datagrid.details'),
                         title: GraphicExtension.getFDataTitle(fData),
                         content: GraphicExtension.getFDataTextContent(fData),
-                        target: $("#map-div"),
-                        origin: "rampPopup",
-                        consumeOrigin: "datagrid",
+                        target: $('#map-div'),
+                        origin: 'rampPopup',
+                        consumeOrigin: 'datagrid',
                         guid: UtilMisc.guid(),
                         showChars: 70,
                         doOnOpen: function () {
@@ -99,7 +98,11 @@ define([
                             //topic.publish(EventManager.FeatureHighlighter.HIGHLIGHT_HIDE);
                         }
                     });
-                }
+                } 
+                //if there is no fData, the attribute data has not downloaded yet.  given that we have a warning on a hover, the user will see that message
+                //before they can initiate a click. by not supporting a separate message on no-attrib click, we avoid having to worry about missing datagrid rows
+                //(there will be no rows until the attribs have downloaded), nor worry about detail panels (that have no data).
+                //so, we do nothing. hurrah!
             },
 
             /**
@@ -111,7 +114,7 @@ define([
             */
             onFeatureDeselect: function () {
                 topic.publish(EventManager.GUI.SUBPANEL_CLOSE, {
-                    origin: "rampPopup,datagrid"
+                    origin: 'rampPopup,datagrid'
                 });
             },
 

diff --git a/src/js/RAMP/Modules/maptips.js b/src/js/RAMP/Modules/maptips.js
@@ -1,4 +1,4 @@
-/*global define, $, window, Modernizr, tmpl, RAMP */
+/*global define, $, window, Modernizr, tmpl, RAMP, i18n */
 /*jslint white: true */
 
 /**
@@ -15,13 +15,13 @@
 * NOTE: This module uses global config object. featureLayers->mapTipSettings
 *
 * ####Imports RAMP Modules:
-* {{#crossLink "EventManager"}}{{/crossLink}}  
-* {{#crossLink "TmplHelper"}}{{/crossLink}}  
-* 
+* {{#crossLink "EventManager"}}{{/crossLink}}
+* {{#crossLink "TmplHelper"}}{{/crossLink}}
+*
 * ####Uses RAMP Templates:
 * {{#crossLink "templates/feature_hovertip_template.json"}}{{/crossLink}}
 * {{#crossLink "templates/feature_anchortip_template.json"}}{{/crossLink}}
-* 
+*
 * @class Maptips
 * @static
 * @uses dojo/topic
@@ -32,18 +32,18 @@
 
 define([
 /* Dojo */
-        "dojo/topic",
+        'dojo/topic',
 
 /* Ramp */
-        "ramp/eventManager", "ramp/layerLoader",
+        'ramp/eventManager', 'ramp/layerLoader',
 
 /*tmplHelper */
-        "utils/tmplHelper",
+        'utils/tmplHelper',
 
 /* json hover template file */
-        "dojo/text!./templates/feature_hovertip_template.json",
+        'dojo/text!./templates/feature_hovertip_template.json',
 /* json archor template file*/
-        "dojo/text!./templates/feature_anchortip_template.json"
+        'dojo/text!./templates/feature_anchortip_template.json'
 ],
 
     function (
@@ -55,7 +55,7 @@ define([
     /*tmplHelper */
         TmplHelper, hovertips_template, anchortips_template
     ) {
-        "use strict";
+        'use strict';
 
         var hovertips_template_json = JSON.parse(TmplHelper.stringifyTemplate(hovertips_template)),
             anchortips_template_json = JSON.parse(TmplHelper.stringifyTemplate(anchortips_template)),
@@ -94,7 +94,7 @@ define([
             var offset = 0;
 
             if (highTooltip.handle !== null && highTooltip.node !== null) {
-                offset = parseInt(highTooltip.node.css("left"), 10) + highTooltip.node.width() / 2 - 20;
+                offset = parseInt(highTooltip.node.css('left'), 10) + highTooltip.node.width() / 2 - 20;
             }
 
             return offset;
@@ -167,10 +167,11 @@ define([
                 fData = lData.features[lData.index[graphic.attributes[lData.idField].toString()]];
 
                 datawrapper = TmplHelper.dataBuilder(fData, layerConfig);
-            maptipContent = tmpl(templateKey, datawrapper);
+                maptipContent = tmpl(templateKey, datawrapper);
             } else {
-                //rare case where feature data has not been downloaded or does not exist
-                maptipContent = "";
+                //feature data is still downloading
+                //TODO should this be it's own template?
+                maptipContent = '<div class="map-tip-content">' + i18n.t("maptips.attribsDownloading") + '</div>';
             }
             return maptipContent;
         }
@@ -192,7 +193,7 @@ define([
             }
             target.tooltipster({
                 offsetX: $(target)[0].getBBox().width / 2,
-                content: $(maptipContent),
+                //content: $(maptipContent),
                 interactive: true,
                 arrow: true,
                 updateAnimation: Modernizr.csstransitions, // known bug in tooltipster when browsers not supporting CSS animation don't display tooltips at all
@@ -203,25 +204,28 @@ define([
                 theme: (interactive === true) ? '.tooltipster-noir' : '.tooltipster-shadow'
             });
 
+            //tooltipster fails to refresh content using the above settings object.  a direct call to 'content' seems to fix the issue.
+            target.tooltipster('content', $(maptipContent));
+
             if (!interactive) {
                 target
-                    .tooltipster("offsetX", $(target)[0].getBBox().width / 2) // ?
+                    .tooltipster('offsetX', $(target)[0].getBBox().width / 2) // ?
                     .mouseover();
             } else {
                 // add a close button
                 target
-                        .tooltipster("show")
-                        .tooltipster("content", $(maptipContent).append('<button class="button-none button-close"><span class="wb-invisible">Close</span></button>'));
+                        .tooltipster('show')
+                        .tooltipster('content', $(maptipContent).append('<button class="button-none button-close"><span class="wb-invisible">Close</span></button>'));
 
                 // set a listener to that close button
-                $(target.tooltipster("elementTooltip"))
-                        .find(".button-close")
-                        .on("click", function () {
-                            topic.publish(EventManager.GUI.SUBPANEL_CLOSE, { origin: "all" });
+                $(target.tooltipster('elementTooltip'))
+                        .find('.button-close')
+                        .on('click', function () {
+                            topic.publish(EventManager.GUI.SUBPANEL_CLOSE, { origin: 'all' });
                         });
 
                 // keep pointers to the tooltip parts
-                highTooltip.node = $(target.tooltipster("elementTooltip"));
+                highTooltip.node = $(target.tooltipster('elementTooltip'));
                 highTooltip.handle = target.tooltipster();
                 highTooltip.graphic = graphic;
             }

diff --git a/src/locales/en-CA/translation.json b/src/locales/en-CA/translation.json
@@ -549,6 +549,9 @@
         "loading": "Generating image. Please wait.",
         "title": "Map Export"
     },
+    "maptips": { 
+        "attribsDownloading" : "Attribute data is still downloading"
+    },
     "page": {
         "footer": {
             "dateModifiedTitle": "Date Modified",

diff --git a/src/locales/fr-CA/translation.json b/src/locales/fr-CA/translation.json
@@ -549,6 +549,9 @@
         "loading": "Génération de l’image Veuillez attendre.",
         "title": "Exportation de carte"
     },
+    "maptips": {
+        "attribsDownloading": "[fr] Attribute data is still downloading"
+    },
     "page": {
         "footer": {
             "dateModifiedTitle": "Date de modification",