make tooltip on click instead of hover for watson-developer-cloud#59

personality-insights · May 13, 2016 · 496c08c · 496c08c
1 parent 653f082
commit 496c08c
Showing 1 changed file with 26 additions and 20 deletions.
diff --git a/public/js/demo.js b/public/js/demo.js
@@ -85,7 +85,8 @@ function allReady(thresholds, sampleText) {
       originalText_template = originalTextTemplate.innerHTML,
       sentenceRank_template = sentenceRankTemplate.innerHTML,
       originalTextTooltip_template = originalTextTooltipTemplate.innerHTML,
-      originalTextLegend_template = originalTextLegendTemplate.innerHTML;
+      originalTextLegend_template = originalTextLegendTemplate.innerHTML,
+      lastSentenceID = 0;
 
   /**
    * Callback function for AJAX post to get tone analyzer data
@@ -253,31 +254,36 @@ function allReady(thresholds, sampleText) {
      * interactions
      */
     function bindOriginalTextHoverEvents() {
-      $('.original-text--sentence-container').hover(function(e) {
+      $('.original-text--sentence-container').click(function(e) {
+        e.stopPropagation();
         var id = $(this).data('index');
-        app.currentHoveredOriginalSentence(this);
-        updateOriginalTextTooltip(id);
-        $originalTextTooltipContainer.removeClass('original-text--tooltip-container_hidden');
-        app.isHoveringOriginalText(true);
-        $('.original-text--sentence-container').not('[data-index="'+id+'"]').addClass('original-text--sentence-container_grayed');
-      }, function(e) {
-        $originalTextTooltipContainer.addClass('original-text--tooltip-container_hidden');
-        app.isHoveringOriginalText(false);
-        $('.original-text--sentence-container').removeClass('original-text--sentence-container_grayed');
-      });
-
-      $(document).scroll(function(e) {
-        positionOriginalTextTooltip(e);
+        // if we clicked on same sentence last time, then hide tooltip
+        if (lastSentenceID === id) {
+          $originalTextTooltipContainer.toggleClass('original-text--tooltip-container_hidden');
+        } else {
+          app.currentHoveredOriginalSentence(this);
+          updateOriginalTextTooltip(id);
+          $originalTextTooltipContainer.removeClass('original-text--tooltip-container_hidden');
+          app.isHoveringOriginalText(true);
+          $('.original-text--sentence-container').not('[data-index="'+id+'"]');
+
+          positionOriginalTextTooltip(e);
+        }
+        lastSentenceID = id;
       });
 
-      $originalText.scroll(function(e) {
-        positionOriginalTextTooltip(e);
-        if (app.isHoveringOriginalText())
+      $('body').click(function(e) {
+        if (!$(e.target).hasClass('original-text--sentence-container')) {
           $originalTextTooltipContainer.addClass('original-text--tooltip-container_hidden');
+        }
       });
 
-      $originalText.mousemove(function(e) {
-        positionOriginalTextTooltip(e);
+      $(document).scroll(function(e) {
+        $originalTextTooltipContainer.addClass('original-text--tooltip-container_hidden');
+      });
+      //
+      $('.original-text--texts-container').scroll(function(e) {
+        $originalTextTooltipContainer.addClass('original-text--tooltip-container_hidden');
       });
     }