pageflow-linkmap-page 1.5.0 → 2.0.0

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/image_data.js

@@ -1,5 +1,5 @@
 pageflow.linkmapPage.ImageData = (function() {
-  function ImageData(width, height) {
+  function ImageData(width, height, image) {
     var canvas = document.createElement('canvas');
 
     this.width = width;
@@ -8,66 +8,36 @@ pageflow.linkmapPage.ImageData = (function() {
     canvas.width = width;
     canvas.height = height;
 
-    this.loadImage = function(image) {
-      image.draw(canvas, {disableImageSmoothing: true});
-    };
+    image.draw(canvas.getContext('2d'), {
+      width: width,
+      disableImageSmoothing: true
+    });
 
     this.draw = function(context, sx, sy, sw, sh, dx, dy, dw, dh) {
       context.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh);
     };
 
-    this.copyColorFrom = function(imageData, color, destinationX, destinationY) {
-      var data = imageData.data;
-      var destinationContext = canvas.getContext('2d');
-
-      for (var i = 0; i < data.length; i += 4) {
-        if (data[i] != color[0] ||
-            data[i + 1] != color[1] ||
-            data[i + 2] != color[2]) {
-
-          data[i + 3] = 0;
-        }
-        else {
-          data[i + 3] = 255;
-        }
-      }
-
-      destinationContext.putImageData(imageData, destinationX, destinationY);
-    };
-
-    this.getBoundingBox = function(box) {
-      return this.get(box.left, box.top, box.width, box.height);
-    };
-
-    this.get = function(left, top, width, height) {
+    this.nonTransparentAt = function(x, y) {
       var context = canvas.getContext('2d');
-      return context.getImageData(left, top, width, height);
-    };
-
-    this.toDataURL = function() {
-      var result = canvas.toDataURL();
-
-      if (!result.match(/^data:image/)) {
-        throw new invalidImageDataUrl();
-      }
+      var pixel = context.getImageData(x, y, 1, 1).data;
 
-      return result;
+      return pixel[3] > 0;
     };
   }
 
-  function invalidImageDataUrl() {
-    var error = new Error('Invalid data url from canvas.');
-    error.i18nKey = 'pageflow.linkmap_page.errors.invalid_image_data';
+  ImageData.empty = {
+    hasColorAt: function() {
+      return false;
+    },
 
-    return error;
-  }
+    colorAt: function() {
+      return null;
+    }
+  };
 
   ImageData.load = function(url) {
     return pageflow.linkmapPage.RemoteImage.load(url).then(function(image) {
-      var imageData = new ImageData(image.width(), image.height());
-      imageData.loadImage(image);
-
-      return imageData;
+      return new ImageData(image.width(), image.height(), image);
     });
   };
 

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/mask.js

@@ -1,37 +1,6 @@
 pageflow.linkmapPage.Mask = function Mask(options) {
-  var sprite = options.sprite;
-  var spriteOffset = options.spriteOffset;
-  var boundingBox = options.boundingBox;
-
-  this.permaId = options.permaId;
-
-  this.areaAttributes = function() {
-    return {
-      mask_perma_id: options.permaId,
-      top: boundingBox.top / options.originalHeight * 100,
-      left: boundingBox.left / options.originalWidth * 100,
-      height: boundingBox.height / options.originalHeight * 100,
-      width: boundingBox.width / options.originalWidth * 100
-    };
-  };
-
-  this.contains = function(fractionX, fractionY) {
-    var x = fractionX * options.originalWidth;
-    var y = fractionY * options.originalHeight;
-
-    var spriteX = x - boundingBox.left;
-    var spriteY = y - boundingBox.top;
-
-    if (spriteX < 0 || spriteX >= boundingBox.width ||
-        spriteY < 0 || spriteY >= boundingBox.height) {
-      return false;
-    }
-
-    return sprite.nonTransparentAt(spriteOffset + spriteX, spriteY);
-  };
-
-  this.draw = function(context, currentWidth) {
-    var scale = currentWidth / options.originalWidth;
-    sprite.draw(context, spriteOffset, boundingBox, scale);
+  this.contains = function(xInPercent, yInPercent) {
+    var component = options.colorMap.componentFromPoint(xInPercent, yInPercent);
+    return !!component && component.permaId == options.colorMapComponentPermaId;
   };
 };

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap/remote_image.js

@@ -8,10 +8,7 @@ pageflow.linkmapPage.RemoteImage = (function() {
       return image.height;
     };
 
-    this.draw = function(canvas, options) {
-      options = options || {};
-      var context = canvas.getContext('2d');
-
+    this.draw = function(context, options) {
       if (options.disableImageSmoothing) {
         context.imageSmoothingEnabled = false;
       }
@@ -19,8 +16,8 @@ pageflow.linkmapPage.RemoteImage = (function() {
       context.drawImage(image,
                         0,
                         0,
-                        canvas.width,
-                        canvas.height);
+                        options.width,
+                        image.height * (options.width / image.width));
     };
   }
 

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap.js

@@ -4,50 +4,53 @@
 
   $.widget('pageflow.linkmap', {
     _create: function() {
-      var widget = this;
-
-      this.lastImageUrls = {};
-      this.imagePromises = {};
+      this.colorMapPromise = $.when(pageflow.linkmapPage.ColorMap.empty);
 
       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);
-
-        if (widget.options.hoverVideoEnabled) {
-          widget.options.hoverVideo.schedulePlay({
-            area: hoverArea,
-            baseImage: widget.options.baseImage()
-          });
+      this._on({
+        'mousemove .hover_area': function(event) {
+          var hoverArea = $(event.currentTarget);
+
+          if (this.options.hoverVideoEnabled) {
+            this.options.hoverVideo.schedulePlay({
+              area: hoverArea,
+              baseImage: this.options.baseImage()
+            });
+          }
+        },
+
+        'mouseleave .hover_area': function() {
+          if (this.options.hoverVideoEnabled) {
+            this.options.hoverVideo.pause();
+          }
+        },
+
+        'click': function(event) {
+          var area = this.areaAt(this.positionFromEvent(event));
+
+          if (area.length && area.hasClass('enabled')) {
+            area.first().trigger($.Event('linkmapareaclick', {originalEvent: event}));
+          }
+          else {
+            this._trigger('backgroundclick');
+          }
+
+          return false;
+        },
+
+        'mousemove': function(event) {
+          this.updateHoverStates(event);
+        },
+
+        'mouseleave': function(event) {
+          this.updateHoverStates(event);
         }
       });
-
-      this.element.on('mouseleave', '.hover_area', function() {
-        if (widget.options.hoverVideoEnabled) {
-          widget.options.hoverVideo.pause();
-        }
-      });
-
-      this.element.on('click', function(event) {
-        var area = widget.areaAt(widget.positionFromEvent(event));
-
-        if (area.length) {
-          area.first().trigger($.Event('linkmapareaclick', {originalEvent: event}));
-        }
-        else {
-          widget._trigger('backgroundclick');
-        }
-
-        return false;
-      });
-
-      this.element.on('mousemove mouseleave', function(event) {
-        widget.updateHoverStates(event);
-      });
     },
 
     areaAt: function(position) {
@@ -63,7 +66,7 @@
         var area = $(this);
         var hovered = area.linkmapAreaContains(position);
 
-        if (area.hasClass('hover') && !hovered) {
+        if (area.hasClass('pointer_inside') && !hovered) {
           area.trigger('linkmaparealeave');
         }
       });
@@ -72,24 +75,30 @@
         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,
@@ -111,32 +120,14 @@
     },
 
     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();
-
-        hoverAreas.linkmapAreaRedraw({
-          target: '.hover_image',
-          image: hoverImage,
-          width: width,
-          height: height,
-          masks: masks
-        });
+      this.resizeToBaseImage(areaBackgroundImages);
 
-        hoverAreas.linkmapAreaRedraw({
-          target: '.visited_image',
-          image: visitedImage,
-          width: width,
-          height: height,
-          masks: masks
+      this.loadColorMap().then(function(colorMap) {
+        hoverAreas.linkmapAreaSetMask({
+          colorMap: colorMap
         });
       });
 
@@ -145,43 +136,38 @@
       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',

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_area_indicators.js

@@ -0,0 +1,75 @@
+(function($) {
+  $.widget('pageflow.linkmapAreaIndicators', {
+    _create: function() {
+      this.touchIndicator = this.element.find('.touch_indicator');
+      this.externalLinkLoadingIndicator = this.element.find('.external_link_loading_indicator');
+    },
+
+    displayForSelectedArea: function(area, event) {
+      if (!area.hasClass('dynamic_marker') &&
+          !area.hasClass('text_only_area')) {
+        this._animateTouchIndicator(event);
+      }
+    },
+
+    displayForClickedArea: function(area, event) {
+      if (!area.hasClass('dynamic_marker') &&
+          area.hasClass('external_site_area') &&
+          area.hasClass('target_self')) {
+        this._displayExternalLinkLoadingIndicator(event);
+      }
+    },
+
+    reset: function() {
+      this.externalLinkLoadingIndicator.hide();
+    },
+
+    _animateTouchIndicator: function(event) {
+      this._updatePosition(this.touchIndicator, event);
+      this._animate(this.touchIndicator);
+    },
+
+    _displayExternalLinkLoadingIndicator: function(event) {
+      this._updatePosition(this.externalLinkLoadingIndicator, event);
+      this.externalLinkLoadingIndicator.show();
+    },
+
+    _animate: function(element) {
+      element.hide();
+
+      setTimeout(function() {
+        element.show();
+      }, 500);
+
+      setTimeout(function() {
+        element.hide();
+      }, 1200);
+    },
+
+    _updatePosition: function(element, event) {
+      if (event) {
+        this._updatePositionByEvent(element, event);
+      }
+      else {
+        this._center(element);
+      }
+    },
+
+    _updatePositionByEvent: function(element, event) {
+      var touch = event.touches ? event.touches[0] : event;
+      var parentClientRect = this.options.pageElement[0].getBoundingClientRect();
+
+      element.css({
+        left: touch.clientX - parentClientRect.left,
+        top: touch.clientY - parentClientRect.top
+      });
+    },
+
+    _center: function(element) {
+      element.css({
+        left: '50%',
+        top: '40%'
+      });
+    }
+  });
+}(jQuery));