linkmap.js in pageflow-linkmap-page-2.0.0

- old
+ new

@@ -2,53 +2,56 @@
   var markerMargin = 32;
   var smallSizeBreakpoint = 190;
 
   $.widget('pageflow.linkmap', {
     _create: function() {
-      var widget = this;
+      this.colorMapPromise = $.when(pageflow.linkmapPage.ColorMap.empty);
 
-      this.lastImageUrls = {};
-      this.imagePromises = {};
-
       this.refresh();
 
-      if (widget.options.hoverVideoEnabled) {
-        widget.options.hoverVideo.activate();
+      if (this.options.hoverVideoEnabled) {
+        this.options.hoverVideo.activate();
       }
 
-      this.element.on('mousemove', '.hover_area', function() {
-        var hoverArea = $(this);
+      this._on({
+        'mousemove .hover_area': function(event) {
+          var hoverArea = $(event.currentTarget);
 
-        if (widget.options.hoverVideoEnabled) {
-          widget.options.hoverVideo.schedulePlay({
-            area: hoverArea,
-            baseImage: widget.options.baseImage()
-          });
-        }
-      });
+          if (this.options.hoverVideoEnabled) {
+            this.options.hoverVideo.schedulePlay({
+              area: hoverArea,
+              baseImage: this.options.baseImage()
+            });
+          }
+        },
 
-      this.element.on('mouseleave', '.hover_area', function() {
-        if (widget.options.hoverVideoEnabled) {
-          widget.options.hoverVideo.pause();
-        }
-      });
+        'mouseleave .hover_area': function() {
+          if (this.options.hoverVideoEnabled) {
+            this.options.hoverVideo.pause();
+          }
+        },
 
-      this.element.on('click', function(event) {
-        var area = widget.areaAt(widget.positionFromEvent(event));
+        'click': function(event) {
+          var area = this.areaAt(this.positionFromEvent(event));
 
-        if (area.length) {
-          area.first().trigger($.Event('linkmapareaclick', {originalEvent: event}));
-        }
-        else {
-          widget._trigger('backgroundclick');
-        }
+          if (area.length && area.hasClass('enabled')) {
+            area.first().trigger($.Event('linkmapareaclick', {originalEvent: event}));
+          }
+          else {
+            this._trigger('backgroundclick');
+          }
 
-        return false;
-      });
+          return false;
+        },
 
-      this.element.on('mousemove mouseleave', function(event) {
-        widget.updateHoverStates(event);
+        'mousemove': function(event) {
+          this.updateHoverStates(event);
+        },
+
+        'mouseleave': function(event) {
+          this.updateHoverStates(event);
+        }
       });
     },
 
     areaAt: function(position) {
       return this.element.find('.hover_area').filter(function() {
@@ -61,37 +64,43 @@
 
       this.element.find('.hover_area').each(function() {
         var area = $(this);
         var hovered = area.linkmapAreaContains(position);
 
-        if (area.hasClass('hover') && !hovered) {
+        if (area.hasClass('pointer_inside') && !hovered) {
           area.trigger('linkmaparealeave');
         }
       });
 
       this.element.find('.hover_area').each(function() {
         var area = $(this);
         var hovered = area.linkmapAreaContains(position);
 
-        if (!area.hasClass('hover') && hovered) {
-          area.trigger('linkmapareaenter');
+        if (area.hasClass('enabled')) {
+          if (!area.hasClass('pointer_inside') && hovered) {
+            area.trigger('linkmapareaenter');
+          }
+
+          area.toggleClass('pointer_inside', hovered);
         }
 
         area.css('cursor',
                  hovered &&
                  area.attr('data-target-type') !== 'text_only' ?
                  'pointer' : 'default');
-
-        area.toggleClass('hover', hovered);
       });
     },
 
     positionFromEvent: function(event) {
+      // Older versions of Firefox do not support event.offsetX, which
+      // would be exactly what we need here.
+
       var clientRect = this.element[0].getBoundingClientRect();
+      var scale = this.options.parentScale();
 
-      var left = event.clientX - clientRect.left;
-      var top = event.clientY - clientRect.top;
+      var left = (event.clientX - clientRect.left) / scale;
+      var top = (event.clientY - clientRect.top) / scale;
 
       return {
         leftInPixel: left,
         topInPixel: top,
         leftInPercent: left / this.element.width() * 100,
@@ -109,80 +118,57 @@
 
       this.options.hoverVideoEnabled = value;
     },
 
     refresh: function() {
+      var areaBackgroundImages = this.element.find('.background_image, .linkmap_area_outlines-canvas_wrapper');
       var hoverAreas = this.element.find('.hover_area');
-      var widget = this;
 
-      $.when(
-        this.loadImage('hover'),
-        this.loadImage('visited'),
-        this.loadMasks()
-      ).then(function(hoverImage, visitedImage, masks) {
-        var baseImage = widget.options.baseImage();
-        var width = baseImage.width();
-        var height = baseImage.height();
+      this.resizeToBaseImage(areaBackgroundImages);
 
-        hoverAreas.linkmapAreaRedraw({
-          target: '.hover_image',
-          image: hoverImage,
-          width: width,
-          height: height,
-          masks: masks
+      this.loadColorMap().then(function(colorMap) {
+        hoverAreas.linkmapAreaSetMask({
+          colorMap: colorMap
         });
-
-        hoverAreas.linkmapAreaRedraw({
-          target: '.visited_image',
-          image: visitedImage,
-          width: width,
-          height: height,
-          masks: masks
-        });
       });
 
       hoverAreas.linkmapAreaClip();
       hoverAreas.linkmapAreaFormat();
       hoverAreas.linkmapAreaVisited();
     },
 
-    loadImage: function(name) {
-      var url = this.options[name + 'ImageUrl'];
-
-      if (this.lastImageUrls[name] !== url) {
-        this.lastImageUrls[name] = url;
-        this.imagePromises[name] = url && pageflow.linkmapPage.RemoteImage.load(url);
-      }
-
-      return this.imagePromises[name];
-    },
-
-    loadMasks: function() {
+    loadColorMap: function() {
       var widget = this;
-      var maskImageId = this.options.masksData && this.options.masksData.id;
 
-      if (this.lastMaskImageId !== maskImageId) {
-        this.lastMaskImageId = maskImageId;
+      if (this.lastColorMapFileId !== this.options.colorMapFileId) {
+        this.lastColorMapFileId = this.options.colorMapFileId;
+        this.colorMapPromise = pageflow.linkmapPage.ColorMap.load(this.options.colorMapFileId);
 
-        this.masksPromise = this.options.masksData ?
-          pageflow.linkmapPage.Masks.deserialize(this.options.masksData,
-                                                 this.options.maskSpriteUrlTemplate) :
-          $.when(pageflow.linkmapPage.Masks.empty);
-
-        this.masksPromise.then(function(masks) {
-          widget._trigger('updatemasks', null, {masks: masks});
+        this.colorMapPromise.then(function(colorMap) {
+          widget._trigger('updatecolormap', null, {colorMap: colorMap});
         });
       }
 
-      return this.masksPromise;
+      return this.colorMapPromise;
+    },
+
+    resizeToBaseImage: function(target) {
+      var baseImage = this.options.baseImage();
+
+      target
+        .width(baseImage.width())
+        .height(baseImage.height());
     }
   });
 
   $.fn.linkmapAreaClip = function(optionalPosition) {
     this.each(function() {
       var hoverArea = $(this);
-      var clippedElement = hoverArea.find('.panorama_video, .hover_image, .visited_image');
-      var position = optionalPosition || hoverArea.position();
+      var clippedElement = hoverArea.find('.panorama_video, .background_image, .linkmap_area_outlines-canvas_wrapper');
+      var position = optionalPosition || {
+        left: hoverArea.prop('offsetLeft'),
+        top: hoverArea.prop('offsetTop')
+      };
 
       clippedElement.css({
         left: -position.left + 'px',
         top: -position.top + 'px'
       });
\ No newline at end of file