Changeset 39dc0a6 in OpenWorkouts-current for ow

Timestamp:

Mar 12, 2019, 11:20:44 PM (5 years ago)

Author:

Borja Lopez <borja@…>

Branches:

current

Children:

e52a502

Parents:

3ac70ca

Message:

(#7) Pass in the selector name for the calendar heatmap tooltip container
when building an "instance" of the calendar chart code.

(#7) Fixed a bug in the fade in/out of the heatmap tooltip (tooltip display
were queued so the tooltip keep fading in and out for a while after the
user did stop moving around on the chart)

Location:

ow

Files:

• static/js/ow.js (modified) (3 diffs)
• templates/profile.pt (modified) (2 diffs)

ow/static/js/ow.js

@@ -464 +464 @@
 
     var chart_selector = spec.chart_selector,
+        tooltip_selector = spec.tooltip_selector,
         url = spec.url,
         day_names_list = spec.day_names_list;
@@ -491 +492 @@
 
         // Hide the tooltip
-        $('.js-calendar-heatmap-tooltip').hide()
+        $(tooltip_selector).hide()
 
         var chart = d3.select(chart_selector);
@@ -594 +595 @@
                     d3.select(this).classed('hover', true);
                     var day = find_day(d);
-                    $('.js-ch-tooltip-date').html(titleFormat(new Date(d)));
+                    $(tooltip_selector + '-date').html(titleFormat(new Date(d)));
                     if (day != undefined) {
-                        $('.js-ch-tooltip-workouts').html(day.workouts);
-                        $('.js-ch-tooltip-time').html(day.time_formatted);
-                        $('.js-ch-tooltip-distance').html(day.distance_formatted);
-                        $('.js-ch-tooltip-elevation').html(day.elevation_formatted);
+                        $(tooltip_selector + '-workouts').html(day.workouts);
+                        $(tooltip_selector + '-time').html(day.time_formatted);
+                        $(tooltip_selector + '-distance').html(day.distance_formatted);
+                        $(tooltip_selector + '-elevation').html(day.elevation_formatted);
                     }
                     else {
-                        $('.js-ch-tooltip-workouts').html(' - ');
-                        $('.js-ch-tooltip-time').html(' - ');
-                        $('.js-ch-tooltip-distance').html(' - ');
-                        $('.js-ch-tooltip-elevation').html(' - ');
-                    }
-                    $('.js-calendar-heatmap-tooltip').fadeIn('fast');
+                        $(tooltip_selector + '-workouts').html(' - ');
+                        $(tooltip_selector + '-time').html(' - ');
+                        $(tooltip_selector + '-distance').html(' - ');
+                        $(tooltip_selector + '-elevation').html(' - ');
+                    }
+                    $(tooltip_selector).stop( true, true ).fadeIn('fast');
                 })
                 .on("mouseout", function(d) {
                     d3.select(this).classed('hover', false);
-                    $('.js-calendar-heatmap-tooltip').fadeOut('fast');
+                    $(tooltip_selector).stop( true, true ).fadeOut('fast');
                 })
                 .datum(format);

ow/templates/profile.pt

@@ -53 +53 @@
           <div class="calendar-heatmap js-calendar-heatmap">
           </div>
-          <div class="calendar-heatmap-tooltip js-calendar-heatmap-tooltip">
+          <div class="calendar-heatmap-tooltip js-ch-tooltip">
             <ul class="profile-data">
               <li>
@@ -489 +489 @@
      var heatmap_chart = owjs.calendar_heatmap_chart({
          chart_selector: 'div.js-calendar-heatmap',
+         tooltip_selector: '.js-ch-tooltip',
          url: "${request.resource_url(user, 'month')}",
          // Trick to have all those shortened day names translated