pageflow-linkmap-page 1.5.0 → 2.0.0

data/app/assets/javascript/pageflow/linkmap_page/editor/views/embedded/mobile_info_box_page_item_embedded_view.js

@@ -0,0 +1,28 @@
+pageflow.linkmapPage.MobileInfoBoxPageItemEmbeddedView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/linkmap_page/editor/templates/embedded/mobile_info_box_page_item',
+
+  className: 'linkmap-paginator-page',
+
+  ui: {
+    title: 'h3',
+    description: 'p'
+  },
+
+  modelEvents: {
+    'change:link_title change:link_description': 'update'
+  },
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    this.ui.title.text(this.model.get('link_title'));
+    this.ui.description.html(this.model.get('link_description'));
+
+    this.ui.title.toggle(!!this.model.get('link_title'));
+    this.ui.description.toggle(!!this.model.get('link_description'));
+
+    this.options.paginator.linkmapPaginator('updateHeight');
+  }
+});

data/app/assets/javascript/pageflow/linkmap_page/editor.js

@@ -1,11 +1,13 @@
 //= require_self
 
+//= require ./editor/models/processed_file
 //= require_tree ./editor/models
 //= require_tree ./editor/collections
 //= require_tree ./editor/routers
 //= require_tree ./editor/controllers
 //= require_tree ./editor/templates
 //= require_tree ./editor/views
+//= require_tree ./editor/patterns
 
 //= require ./editor/config
 
@@ -25,12 +27,18 @@ pageflow.linkmapPage.areaTypesFor = function(pageConfiguration) {
 };
 
 pageflow.linkmapPage.selectArea = function(page, options) {
+  options = options || {};
+
+  pageflow.entry.unset('emulation_mode');
+
   return $.Deferred(function(deferred) {
-    pageflow.linkmapPage.currentAreaSelection = _.extend(options || {}, {
+    pageflow.linkmapPage.currentAreaSelection = _.extend(options, {
       deferred: deferred
     });
 
-    var path = 'linkmap_pages/' + page.id + '/select_area_position';
+    var path = 'linkmap_pages/' + page.id + '/select_area_position' +
+      (options.areaIndex !== undefined ? '?area=' + options.areaIndex : '');
+
     pageflow.editor.navigate(path, {trigger: true});
   }).promise();
 };

data/app/assets/javascript/pageflow/linkmap_page/page_type.js

@@ -8,33 +8,61 @@ pageflow.pageType.register('linkmap_page', _.extend({
   noHideTextOnSwipe: true,
 
   enhance: function(pageElement, configuration) {
+    var that = this;
+
     this.setupPanoramaBackground(pageElement, configuration);
     this.setupHoverImages(pageElement, configuration);
     this.setupVideoPlayer(pageElement);
 
+    this.contentAndBackground = pageElement.find('.linkmap_page');
     this.content = pageElement.find('.scroller');
     this.panorama = pageElement.find('.panorama');
 
+    this.contentAndBackground.linkmapAreaIndicators({
+      pageElement: pageElement
+    });
+
     this.content.linkmapPanorama({
+      disabled: this.isPanZoomEnabled(configuration),
+
       page: pageElement,
       panorama: function() {
         return pageElement.find('.panorama.active');
       },
       scroller: this.scroller,
+      areaIndicators: this.contentAndBackground.linkmapAreaIndicators('instance'),
       activeAreasSelector: '.linkmap_areas > .hover_area',
       limitScrolling: configuration.limit_scrolling,
       minScaling: pageflow.browser.has('mobile platform'),
       addEnvironment: configuration.add_environment,
-      marginScrollingDisabled: configuration.margin_scrolling_disabled,
       startScrollPosition: this.getPanoramaStartScrollPosition(configuration)
     });
 
+    this.content.linkmapPanZoom({
+      disabled: !this.isPanZoomEnabled(configuration),
+
+      page: pageElement,
+      safeAreaWrapper: pageElement.find('.pan_zoom_safe_area_wrapper'),
+      panoramaWrapper: pageElement.find('.panorama_wrapper'),
+      panorama: function() {
+        return pageElement.find('.panorama.active');
+      },
+      areas: function() {
+        return pageElement.find('.hover_area');
+      },
+      scroller: this.scroller,
+      innerScrollerElement: pageElement.find('.linkmap'),
+      areaIndicators: this.contentAndBackground.linkmapAreaIndicators('instance'),
+      initialPosition: this.getPanoramaStartScrollPosition(configuration)
+    });
+
     this.content.linkmapLookaround({
       scroller: this.scroller,
-      marginScrollingDisabled: configuration.margin_scrolling_disabled
+      marginScrollingDisabled: this.getMarginScrollingDisabled(configuration),
     });
 
-    pageElement.find('.linkmap_page').linkmapScrollIndicators({
+    this.contentAndBackground.linkmapScrollIndicators({
+      disabled: this.isPanZoomEnabled(configuration),
       scroller: this.scroller
     });
 
@@ -44,19 +72,70 @@ pageflow.pageType.register('linkmap_page', _.extend({
 
     this.linkmapAreas = pageElement.find('.linkmap_areas');
     this.linkmapAreas.linkmap({
-      hoverImageUrl: this.linkmapAreas.data('hoverImageUrl'),
-      visitedImageUrl: this.linkmapAreas.data('visitedImageUrl'),
-      maskSpriteUrlTemplate: this.linkmapAreas.data('maskSpriteUrlTemplate'),
-      masksData: configuration.linkmap_masks,
+      disabled: this.isPanZoomEnabled(configuration),
+      colorMapFileId: configuration.linkmap_color_map_file_id,
 
       baseImage: function() {
         return pageElement.find('.panorama.active');
       },
 
+      parentScale: function() {
+        return that.content.linkmapPanZoom('getCurrentScale');
+      },
+
       hoverVideo: pageElement.find('.hover_video').linkmapHoverVideo('instance'),
       hoverVideoEnabled: configuration.background_type === 'hover_video'
     });
 
+    var carousel = !pageflow.navigationDirection || !pageflow.navigationDirection.isHorizontal();
+
+    this.mobileInfoBox = pageElement.find('.linkmap-paginator');
+    this.mobileInfoBox.linkmapPaginator({
+      disabled: !this.isPanZoomEnabled(configuration),
+      carousel: carousel,
+
+      scrollerEventListenerTarget: this.content,
+
+      change: function(currentPageIndex, pageCount) {
+        that.content.linkmapPanZoom('setBottomMarginFor', {
+          areaIndex: currentPageIndex - 1,
+          hiddenHeight: that.mobileInfoBox.linkmapPaginator('getCurrentHeight')
+        });
+
+        that.content.linkmapPanZoom('goToAreaByIndex', currentPageIndex - 1);
+
+        if (that.phoneEmulation() ||
+            !pageflow.slides.nextPageExists() ||
+            (carousel && currentPageIndex > 0) ||
+            (!carousel && currentPageIndex < pageCount - 1)) {
+          that.scrollIndicator.disable();
+          that.mobileInfoBox.linkmapPaginator('showDots');
+        }
+        else {
+          that.scrollIndicator.enable();
+          that.mobileInfoBox.linkmapPaginator('hideDots');
+        }
+
+        that.multiPlayer.fadeOutAndPause();
+      },
+
+      changing: function(options) {
+        that.content.linkmapPanZoom('transitionBottomMargin', {
+          from: {
+            areaIndex: options.currentPageIndex - 1,
+            hiddenHeight: options.currentHeight
+          },
+          to: {
+            areaIndex: options.destinationPageIndex - 1,
+            hiddenHeight: options.destinationHeight
+          },
+          progress: options.progress
+        });
+      }
+    });
+
+    pageElement.data('invertIndicator', false);
+
     this.setupPageLinkAreas(pageElement);
     this.setupExternalLinkAreas(pageElement);
     this.setupAudioFileAreas(pageElement, configuration);
@@ -175,7 +254,12 @@ pageflow.pageType.register('linkmap_page', _.extend({
 
   resize: function(pageElement, configuration) {
     this.content.linkmapPanorama('refresh');
+    this.content.linkmapPanZoom('refresh');
     this.linkmapAreas.linkmap('refresh');
+    this.mobileInfoBox.linkmapPaginator('refresh');
+
+    this.updateNavigationMode(configuration);
+    this.content.linkmapLookaround('update', this.getMarginScrollingDisabled(configuration));
   },
 
   prepare: function(pageElement, configuration) {
@@ -200,6 +284,18 @@ pageflow.pageType.register('linkmap_page', _.extend({
       });
   },
 
+  isPageChangeAllowed: function(pageElement, configuration, options) {
+    if (this.isPanZoomEnabled(configuration) &&
+        pageflow.navigationDirection && pageflow.navigationDirection.isHorizontal() &&
+        ((options.type == 'bumpnext' && !this.mobileInfoBox.linkmapPaginator('isOnLastPage')) ||
+         (options.type == 'bumpback' && !this.mobileInfoBox.linkmapPaginator('isOnFirstPage')))) {
+      return false;
+    }
+    else {
+      return true;
+    }
+  },
+
   preload: function(pageElement, configuration) {
     return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
   },
@@ -210,15 +306,22 @@ pageflow.pageType.register('linkmap_page', _.extend({
     }
 
     this.content.linkmapPanorama('refresh');
+    this.content.linkmapPanZoom('refresh');
     this.linkmapAreas.linkmap('refresh');
+    this.mobileInfoBox.linkmapPaginator('refresh');
 
     this.content.linkmapLookaround('activate');
     this.content.linkmapPanorama('resetScrollPosition');
+    this.mobileInfoBox.linkmapPaginator('initScrollPosition');
 
     this.content.linkmapPanorama('resetAreaHighlighting');
   },
 
   activated: function(pageElement, configuration) {
+    if (this.isPanZoomEnabled(configuration)) {
+      this.scrollIndicator.disable();
+    }
+
     this.content.linkmapPanorama('highlightAreas');
   },
 
@@ -229,12 +332,18 @@ pageflow.pageType.register('linkmap_page', _.extend({
   },
 
   deactivated: function(pageElement, configuration) {
+    this.mobileInfoBox.linkmapPaginator('showDots');
+
     if (this.isVideoEnabled(configuration)) {
       this.pauseVideo(configuration);
     }
   },
 
   update: function(pageElement, configuration) {
+    pageElement.find('.linkmap_page').toggleClass('hide_overlay_boxes',
+                                                  configuration.get('mobile_panorama_navigation') === 'pan_zoom' &&
+                                                  !!configuration.get('hide_linkmap_overlay_boxes'));
+
     this.setupPanoramaBackground(pageElement, configuration.attributes);
     this.updateCommonPageCssClasses(pageElement, configuration);
 
@@ -244,18 +353,10 @@ pageflow.pageType.register('linkmap_page', _.extend({
       var minScaling = false;
 
       this.linkmapAreas.linkmap('option',
-                                'hoverImageUrl',
-                                configuration.getImageFileUrl('hover_image_id', {
-                                  styleGroup: 'panorama'
-                                }));
-      this.linkmapAreas.linkmap('option',
-                                'visitedImageUrl',
-                                configuration.getImageFileUrl('visited_image_id', {
-                                  styleGroup: 'panorama'
-                                }));
-      this.linkmapAreas.linkmap('option',
-                                'masksData',
-                                configuration.get('linkmap_masks'));
+                                'colorMapFileId',
+                                configuration.linkmapReadyColorMapFileId());
+
+      this.updateNavigationMode(configuration.attributes);
 
       this.content.linkmapPanorama('update',
                                    configuration.get('add_environment'),
@@ -263,11 +364,15 @@ pageflow.pageType.register('linkmap_page', _.extend({
                                    this.getPanoramaStartScrollPosition(configuration.attributes),
                                    minScaling);
 
+      this.content.linkmapPanZoom('update', {
+        initialPosition: this.getPanoramaStartScrollPosition(configuration.attributes)
+      });
+
       this.updateScaledOnPhoneFlags(configuration.page,
                                     this.content.linkmapPanorama('instance'));
 
       this.content.linkmapLookaround('update',
-                                     configuration.get('margin_scrolling_disabled'));
+                                     this.getMarginScrollingDisabled(configuration.attributes));
       this.setupHoverImages(pageElement, configuration.attributes);
       this.updateVideoPlayState(configuration);
 
@@ -322,6 +427,36 @@ pageflow.pageType.register('linkmap_page', _.extend({
       configuration.background_type === 'hover_video';
   },
 
+  updateNavigationMode: function(configuration) {
+    if (this.isPanZoomEnabled(configuration)) {
+      this.linkmapAreas.linkmap('disable');
+      this.content.linkmapPanorama('disable');
+      this.contentAndBackground.linkmapScrollIndicators('disable');
+      this.content.linkmapPanZoom('enable');
+      this.mobileInfoBox.linkmapPaginator('enable');
+    }
+    else {
+      this.content.linkmapPanZoom('disable');
+      this.mobileInfoBox.linkmapPaginator('disable');
+      this.contentAndBackground.linkmapScrollIndicators('enable');
+      this.content.linkmapPanorama('enable');
+      this.linkmapAreas.linkmap('enable');
+    }
+  },
+
+  isPanZoomEnabled: function(configuration) {
+    return (pageflow.browser.has('phone platform') || this.phoneEmulation()) &&
+      configuration.mobile_panorama_navigation === 'pan_zoom';
+  },
+
+  getMarginScrollingDisabled: function(configuration) {
+    return configuration.margin_scrolling_disabled || this.phoneEmulation();
+  },
+
+  phoneEmulation: function() {
+    return !!$('#entry_preview > .emulation_mode_phone').length;
+  },
+
   playVideo: function(configuration) {
     var that = this;
 

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

@@ -38,7 +38,10 @@
 
     play: function(options) {
       var video = this.options.video;
-      var position = options.area.position();
+      var position = {
+        left: options.area.prop('offsetLeft'),
+        top: options.area.prop('offsetTop')
+      };
 
       video
         .width(options.baseImage.width())

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

@@ -3,16 +3,17 @@ $.fn.linkmapAreaContains = function(position) {
   var mask = area.data('mask');
 
   if (mask) {
-    return mask.contains(position.leftInPercent / 100, position.topInPercent / 100);
+    return mask.contains(position.leftInPercent, position.topInPercent);
   }
   else {
-    var areaPosition = area.position();
+    var areaLeft = parseFloat(area.css('left'));
+    var areaTop = parseFloat(area.css('top'));
     var areaWidth = area.width();
     var areaHeight = area.height();
 
-    return position.leftInPixel >= areaPosition.left &&
-      position.leftInPixel < areaPosition.left + areaWidth &&
-      position.topInPixel >= areaPosition.top &&
-      position.topInPixel < areaPosition.top + areaHeight;
+    return position.leftInPixel >= areaLeft &&
+      position.leftInPixel < areaLeft + areaWidth &&
+      position.topInPixel >= areaTop &&
+      position.topInPixel < areaTop + areaHeight;
   }
 };

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

@@ -0,0 +1,16 @@
+$.fn.linkmapAreaSetMask = function(options) {
+  this.each(function() {
+    var area = $(this);
+    var colorMapComponent = options.colorMap.componentByPermaId(area.attr('data-mask-perma-id'));
+
+    if (colorMapComponent) {
+      area.data('mask', new pageflow.linkmapPage.Mask({
+        colorMapComponentPermaId: colorMapComponent.permaId,
+        colorMap: options.colorMap
+      }));
+    }
+    else {
+      area.data('mask', null);
+    }
+  });
+};

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

@@ -1,162 +1,103 @@
 pageflow.linkmapPage.ColorMap = (function() {
-  function ColorMap(width, height, components) {
-    this.width = width;
-    this.height = height;
-    this.components = components;
-
-    this.sumOfComponentWidths = function() {
-      return _(components).reduce(function(result, component) {
-        return result + component.boundingBox.width;
-      }, 0);
+  function ColorMapComponent(attributes, options) {
+    var colorMapWidth = options.colorMapWidth;
+    var colorMapHeight = options.colorMapHeight;
+    var colorMapSprite = options.colorMapSprite;
+
+    this.color = attributes.color;
+    this.permaId = options.colorMapId + ':' + attributes.color;
+
+    this.draw = function(context, width) {
+      var scale = width / attributes.width;
+
+      colorMapSprite.draw(context,
+                          attributes.sprite_offset,
+                          0,
+                          attributes.width,
+                          attributes.height,
+                          0,
+                          0,
+                          attributes.width * scale,
+                          attributes.height * scale);
     };
 
-    this.maxComponentHeight = function() {
-      return _(components).reduce(function(result, rect) {
-        return Math.max(result, rect.boundingBox.height);
-      }, 0);
-    };
-
-    this.serialize = function() {
+    this.areaAttributes = function() {
       return {
-        w: this.width,
-        h: this.height,
-        c: _(components).map(function(component) {
-          return {
-            c: component.color,
-            l: component.boundingBox.left,
-            t: component.boundingBox.top,
-            w: component.boundingBox.width,
-            h: component.boundingBox.height
-          };
-        })
+        mask_perma_id: this.permaId,
+        top: attributes.top / colorMapHeight * 100.0,
+        left: attributes.left / colorMapWidth * 100.0,
+        height: attributes.height / colorMapHeight * 100.0,
+        width: attributes.width / colorMapWidth * 100.0
       };
     };
-  }
 
-  ColorMap.deserialize = function(data) {
-    return new ColorMap(
-      data.w,
-      data.h,
-      _(data.c).map(function(item) {
-        return {
-          color: item.c,
-          boundingBox: {
-            left: item.l,
-            top: item.t,
-            width: item.w,
-            height: item.h,
-            right: item.l + item.w,
-            bottom: item.t + item.h
-          }
-        };
-      })
-    );
-  };
+    this.contains = function(xInPercent, yInPercent) {
+      var x = xInPercent * colorMapWidth / 100;
+      var y = yInPercent * colorMapHeight / 100;
+
+      return inBoundingBox(x, y) &&
+        colorMapSprite.nonTransparentAt(
+          x - attributes.left + attributes.sprite_offset,
+          y - attributes.top
+        );
+    };
 
-  ColorMap.fromImageData = function(imageData) {
-    var width = imageData.width;
-    var height = imageData.height;
-
-    var data = imageData.get(0, 0, width, height).data;
-    var i, key, component;
-
-    var componentsByKey = {};
-    var components = [];
-
-    var currentStreakKey, currentStreakLength;
-
-    for (var y = 0; y < height; y++) {
-      currentStreakKey = null;
-      currentStreakLength = 0;
-
-      for (var x = 0; x < width; x++) {
-        i = (y * width + x) * 4;
-
-        if (!blackOrTransparent(data, i)) {
-          key = [data[i], data[i + 1], data[i + 2]].join('-');
-          component = componentsByKey[key];
-
-          if (currentStreakKey === key && sameColorAboveAndBelow(data, i, width)) {
-            currentStreakLength += 1;
-          }
-          else {
-            currentStreakKey = key;
-            currentStreakLength = 1;
-          }
-
-          if (!component) {
-            component = componentsByKey[key] = {
-              color: [data[i], data[i + 1], data[i + 2]],
-              left: x,
-              top: y,
-              right: x + 1,
-              bottom: y + 1,
-              longestStreak: currentStreakLength
-            };
-
-            components.push(component);
-          }
-          else {
-            component.left = Math.min(component.left, x);
-            component.top = Math.min(component.top, y);
-            component.right = Math.max(component.right, x + 1);
-            component.bottom = Math.max(component.bottom, y + 1);
-            component.longestStreak = Math.max(component.longestStreak, currentStreakLength);
-          }
-        }
-      }
+    function inBoundingBox(x, y) {
+      return x > attributes.left &&
+        x < attributes.left + attributes.width &&
+        y >= attributes.top &&
+        y < attributes.top + attributes.height;
     }
+  }
 
-    components = _(components).select(function(component) {
-      return component.longestStreak > 7;
-    });
+  function ColorMap(attributes, sprite) {
+    var components = _(attributes.components).map(function(componentAttributes) {
+      return new ColorMapComponent(componentAttributes, {
+        colorMapId: attributes.id,
+        colorMapWidth: attributes.width,
+        colorMapHeight: attributes.height,
+        colorMapSprite: sprite
+      });
+    }, this);
+
+    this.components = function() {
+      return components;
+    };
 
-    if (components.length === 0) {
-      throw noComponentsError();
-    }
+    this.componentFromPoint = function(xInPercent, yInPercent) {
+      return _(components).find(function(component) {
+        return component.contains(xInPercent, yInPercent);
+      });
+    };
 
-    return new ColorMap(width, height, _(components).map(function(component) {
-      return {
-        color: component.color,
-        boundingBox: {
-          left: component.left,
-          top: component.top,
-          right: component.right,
-          bottom: component.bottom,
-          width: component.right - component.left,
-          height: component.bottom - component.top
-        }
-      };
-    }));
-  };
+    this.componentByPermaId = function(permaId) {
+      return _(components).find(function(component) {
+        return component.permaId == permaId;
+      });
+    };
 
-  function blackOrTransparent(data, i) {
-    return (data[i] === 0 && data[i + 1] === 0 && data[i + 2] === 0) ||
-      data[i + 3] === 0;
-  }
-  function sameColorAboveAndBelow(data, i, width) {
-    var above = i - width * 4;
-    var below = i + width * 4;
-
-    return above >= 0 &&
-      below < data.length &&
-      sameColor(data, i, above) &&
-      sameColor(data, i, below);
+    this.previewUrl = function() {
+      return attributes.url;
+    };
   }
 
-  function sameColor(data, i, j) {
-    return data[i] === data[j] &&
-      data[i + 1] === data[j + 1] &&
-      data[i + 2] === data[j + 2] &&
-      data[i + 3] === data[j + 3];
-  }
+  ColorMap.empty = new ColorMap({
+    components: [],
+    width: 0,
+    height: 0
+  });
 
-  function noComponentsError() {
-    var error = new Error('No big enough components detected.');
-    error.i18nKey = 'pageflow.linkmap_page.errors.no_big_enough_color_map_components';
+  ColorMap.load = function(id) {
+    var colorMapFile = pageflow.entryData.getFile('pageflow_linkmap_page_color_map_files', id);
 
-    return error;
-  }
+    if (!colorMapFile) {
+      return $.when(ColorMap.empty);
+    }
+
+    return pageflow.linkmapPage.ImageData.load(colorMapFile.sprite_url).then(function(sprite) {
+      return new ColorMap(colorMapFile, sprite);
+    });
+  };
 
   return ColorMap;
 }());