pageflow-linkmap-page 1.5.0 → 2.0.0

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

@@ -3,6 +3,11 @@ pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend(
 
   className: 'hover_area',
 
+  ui: {
+    hoverImage: '.hover_image',
+    visitedImage: '.visited_image'
+  },
+
   events: {
     'linkmapareaclick': function() {
       if (this.$el.is('.editable .hover_area')) {
@@ -58,15 +63,66 @@ pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend(
   },
 
   onRender: function() {
+    this.setupImageViews();
+    this.setupOutlineView();
     this.setupDraggableAndResizable();
     this.setupAudioPlayer();
 
-    this.listenTo(this.options.masks, 'update', this.update);
+    this.listenTo(this.options.colorMap, 'update', this.update);
     this.listenTo(this.options.pageConfiguration, 'change:background_type', this.update);
+    this.listenTo(pageflow.entry, 'change:emulation_mode', this.updateDraggableAndResizable);
 
     this.update();
   },
 
+  setupImageViews: function() {
+    var view = this;
+
+    var backgroundImageClassNamePrefix = function() {
+      var colorMapComponent = view.getColorMapComponent();
+      return colorMapComponent ?
+        'pageflow_linkmap_page_masked_image_file_' + colorMapComponent.color:
+        'image_panorama';
+    };
+
+    var hoverImageView = new pageflow.BackgroundImageEmbeddedView({
+      el: this.ui.hoverImage,
+      model: this.options.pageConfiguration,
+      propertyName: function() {
+        return view.getColorMapComponent() ?
+          'linkmap_masked_hover_image_id' :
+          'hover_image_id';
+      },
+      useInlineStyles: false,
+      backgroundImageClassNamePrefix: backgroundImageClassNamePrefix
+    }).render();
+
+    var visitedImageView = new pageflow.BackgroundImageEmbeddedView({
+      el: this.ui.visitedImage,
+      model: this.options.pageConfiguration,
+      propertyName: function() {
+        return view.getColorMapComponent() ?
+          'linkmap_masked_visited_image_id' :
+          'visited_image_id';
+      },
+      useInlineStyles: false,
+      backgroundImageClassNamePrefix: backgroundImageClassNamePrefix
+    }).render();
+
+    this.listenTo(this.options.colorMap, 'update', function() {
+      hoverImageView.update();
+      visitedImageView.update();
+    });
+  },
+
+  setupOutlineView: function() {
+    this.appendSubview(new pageflow.linkmapPage.AreaOutlineEmbeddedView({
+      model: this.options.pageConfiguration,
+      area: this.model,
+      colorMap: this.options.colorMap
+    }));
+  },
+
   setupDraggableAndResizable: function() {
     var that = this;
     var scroller = this.options.container.$('.scroller');
@@ -125,12 +181,22 @@ pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend(
   },
 
   updateDraggableAndResizable: function() {
-    if (this.model.get('selected') && !this.getMask()) {
+    if (this.model.get('selected') &&
+        !pageflow.entry.has('emulation_mode')) {
+
       this.$el.resizable('enable');
-      this.$el.draggable('enable');
     }
     else {
       this.$el.resizable('disable');
+    }
+
+    if (this.model.get('selected') &&
+        !pageflow.entry.has('emulation_mode') &&
+        !this.getColorMapComponent()) {
+
+      this.$el.draggable('enable');
+    }
+    else {
       this.$el.draggable('disable');
     }
   },
@@ -141,9 +207,9 @@ pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend(
 
   update: function() {
     var audioFileId = this.model.get('target_id');
-    var mask = this.getMask();
+    var colorMapComponent = this.getColorMapComponent();
 
-    this.$el.attr('data-mask-id', mask ? this.model.get('mask_perma_id') : '');
+    this.$el.attr('data-mask-perma-id', colorMapComponent ? colorMapComponent.permaId : null);
     this.$el.attr('data-audio-file', audioFileId ? audioFileId + '.' + this.cid : '');
     this.$el.attr('data-target-type', this.model.get('target_type'));
     this.$el.attr('data-target-id', this.model.get('target_id'));
@@ -152,8 +218,8 @@ pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend(
     this.$el.toggleClass('selected', !!this.model.get('selected'));
     this.$el.toggleClass('highlighted', !!this.model.get('highlighted'));
     this.$el.toggleClass('editing', !!this.model.get('editing'));
-    this.$el.toggleClass('without_mask', !mask);
-    this.$el.toggleClass('with_mask', !!mask);
+    this.$el.toggleClass('without_mask', !colorMapComponent);
+    this.$el.toggleClass('with_mask', !!colorMapComponent);
 
     this.$el.attr('data-width', this.model.get('width'));
     this.$el.attr('data-height', this.model.get('height'));
@@ -203,9 +269,8 @@ pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend(
     element.toggleClass('inverted', !!this.model.get('inverted'));
   },
 
-  getMask: function() {
-    return this.options.pageConfiguration.getLinkmapAreaMask(
-      this.options.masks,
+  getColorMapComponent: function() {
+    return this.options.colorMap.componentByPermaId(
       this.model.get('mask_perma_id')
     );
   }

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

@@ -4,8 +4,9 @@ pageflow.linkmapPage.AreaMasksPreviewEmbeddedView = Backbone.Marionette.ItemView
   className: 'linkmap_area_masks_preview',
 
   ui: {
-    allAreasCanvas: 'canvas.all',
-    currentAreaCanvas: 'canvas.current'
+    canvas: 'canvas',
+    canvasWrapper: '.canvas_wrapper',
+    backgroundImage: '.background_image'
   },
 
   modelEvents: {
@@ -44,14 +45,13 @@ pageflow.linkmapPage.AreaMasksPreviewEmbeddedView = Backbone.Marionette.ItemView
 
     this.update();
     this.updateCursor();
-    this.redrawAllAreas();
     this.redraw();
   },
 
   handleMouseDown: function(event) {
     var view = this;
 
-    if (this.currentMask || this.selection.type === 'mask') {
+    if (this.currentColorMapComponent || this.selection.type === 'colorMapComponent') {
       return;
     }
 
@@ -91,17 +91,21 @@ pageflow.linkmapPage.AreaMasksPreviewEmbeddedView = Backbone.Marionette.ItemView
   },
 
   handleClick: function(event) {
-    var mask = this.maskFromPoint(event);
+    var colorMapComponent = this.colorMapComponentFromPoint(event);
 
-    if (mask) {
-      this.selection.deferred.resolve(mask.areaAttributes());
+    if (colorMapComponent) {
+      this.selection.deferred.resolve(colorMapComponent.areaAttributes());
     }
     else {
       this.selection.deferred.reject();
     }
+
+    event.stopPropagation();
   },
 
   update: function(event) {
+    this.ui.backgroundImage.css('background-image', 'url("' + this.options.colorMap.previewUrl() +'"');
+
     if (this.dragStartOffset) {
       this.drawSelection(this.dragStartOffset.x,
                          this.dragStartOffset.y,
@@ -110,30 +114,30 @@ pageflow.linkmapPage.AreaMasksPreviewEmbeddedView = Backbone.Marionette.ItemView
       return;
     }
 
-    var mask = event && this.maskFromPoint(event);
+    var colorMapComponent = event && this.colorMapComponentFromPoint(event);
 
-    if (this.maskIsUsed(mask)) {
-      mask = null;
+    if (colorMapComponent && this.colorMapComponentIsUsed(colorMapComponent)) {
+      colorMapComponent = null;
     }
 
-    if (this.currentMask !== mask) {
-      this.currentMask = mask;
+    if (this.currentColorMapComponent !== colorMapComponent) {
+      this.currentColorMapComponent = colorMapComponent;
 
       this.updateCursor();
       this.redraw();
     }
   },
 
-  maskFromPoint: function(event) {
-    return this.options.masks.atPoint(event.offsetX / this.$el.width(),
-                                      event.offsetY / this.$el.height());
+  colorMapComponentFromPoint: function(event) {
+    return this.options.colorMap.componentFromPoint(event.offsetX / this.$el.width() * 100,
+                                                    event.offsetY / this.$el.height() * 100);
   },
 
   updateCursor: function() {
-    if (this.currentMask) {
+    if (this.currentColorMapComponent) {
       this.$el.css('cursor', 'pointer');
     }
-    else if (this.selection.type !== 'mask') {
+    else if (this.selection.type !== 'colorMapComponent') {
       this.$el.css('cursor', 'crosshair');
     }
     else {
@@ -141,87 +145,77 @@ pageflow.linkmapPage.AreaMasksPreviewEmbeddedView = Backbone.Marionette.ItemView
     }
   },
 
-  redrawAllAreas: function() {
-    var canvas = this.ui.allAreasCanvas[0];
-
-    canvas.width = this.$el.width();
-    canvas.height = this.$el.height();
-
-    var context = canvas.getContext('2d');
-
-    context.clearRect(0, 0, canvas.width, canvas.height);
-
-    context.globalAlpha = 0.5;
-
-    this.options.masks.each(function(mask) {
-      if (!this.maskIsUsed(mask)) {
-        mask.draw(context, canvas.width);
-      }
-    }, this);
-  },
-
-  maskIsUsed: function(mask) {
+  colorMapComponentIsUsed: function(colorMapComponent) {
     return this.options.areas.any(function(area) {
-      return mask === this.options.masks.findByPermaId(area.get('mask_perma_id'));
+      return colorMapComponent.permaId === area.get('mask_perma_id');
     }, this);
   },
 
   redraw: function() {
-    var canvas = this.ui.currentAreaCanvas[0];
+    if (this.currentColorMapComponent) {
+      var attributes = this.currentColorMapComponent.areaAttributes();
+
+      this.ui.canvasWrapper.css({
+        top: attributes.top + '%',
+        left: attributes.left + '%',
+        width: attributes.width + '%',
+        height: attributes.height + '%',
+      });
 
-    canvas.width = this.$el.width();
-    canvas.height = this.$el.height();
+      this.ui.canvas.css({
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%'
+      }).show();
 
-    var context = canvas.getContext('2d');
+      this.ui.canvas.show();
 
-    context.clearRect(0, 0, canvas.width, canvas.height);
+      var canvas = this.ui.canvas[0];
+
+      canvas.width = this.ui.canvas.width();
+      canvas.height = this.ui.canvas.height();
 
-    if (this.currentMask) {
-      this.currentMask.draw(context, canvas.width);
+      var context = canvas.getContext('2d');
+
+      context.clearRect(0, 0, canvas.width, canvas.height);
+
+      this.currentColorMapComponent.draw(context, canvas.width);
 
       context.globalCompositeOperation = 'source-in';
-      this.usePattern(context);
+      pageflow.linkmapPage.areaPattern.use(context)
       context.globalAlpha = 0.2;
       context.fillRect(0, 0, canvas.width, canvas.height);
     }
+    else {
+      this.ui.canvas.hide();
+    }
   },
 
   drawSelection: function(x, y, width, height) {
-    var canvas = this.ui.currentAreaCanvas[0];
+    var canvas = this.ui.canvas[0];
 
-    canvas.width = this.$el.width();
-    canvas.height = this.$el.height();
+    var wrapperLeft = x + Math.min(0, width);
+    var wrapperTop = y + Math.min(0, height);
+    var wrapperWidth = Math.abs(width);
+    var wrapperHeight = Math.abs(height);
+
+    this.ui.canvasWrapper.css({
+      left: wrapperLeft + 'px',
+      top: wrapperTop + 'px',
+      width: wrapperWidth + 'px',
+      height: wrapperHeight + 'px'
+    }).show();
+
+    pageflow.linkmapPage.areaPattern.applyOffset(canvas,
+                                                 wrapperLeft, wrapperTop,
+                                                 wrapperWidth, wrapperHeight)
 
     var context = canvas.getContext('2d');
 
     context.clearRect(0, 0, canvas.width, canvas.height);
-
-    this.usePattern(context);
+    pageflow.linkmapPage.areaPattern.use(context)
     context.globalAlpha = 0.6;
-    context.fillRect(x, y, width, height);
-  },
-
-  usePattern: function(context) {
-    if (!this.patternSource) {
-      var rectSize = 7;
-
-      var canvas = document.createElement('canvas');
-      this.patternSource = canvas;
-
-      canvas.width = rectSize * 2;
-      canvas.height = rectSize * 2;
-
-      var c = canvas.getContext('2d');
-
-      c.fillStyle = '#000';
-      c.fillRect(0, 0, rectSize, rectSize);
-      c.fillRect(rectSize, rectSize, rectSize, rectSize);
-
-      c.fillStyle = '#fff';
-      c.fillRect(rectSize, 0, rectSize, rectSize);
-      c.fillRect(0, rectSize, rectSize, rectSize);
-    }
-
-    context.fillStyle = context.createPattern(this.patternSource, 'repeat');
+    context.fillRect(0, 0, canvas.width, canvas.height);
   }
-});
+});

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

@@ -1,126 +1,88 @@
-pageflow.linkmapPage.AreaOutlinesEmbeddedView = Backbone.Marionette.ItemView.extend({
+pageflow.linkmapPage.AreaOutlineEmbeddedView = Backbone.Marionette.ItemView.extend({
   template: 'pageflow/linkmap_page/editor/templates/embedded/area_outlines',
 
   className: 'linkmap_area_outlines',
 
   ui: {
-    allAreasCanvas: 'canvas.all',
-    highlightedAreaCanvas: 'canvas.highlighted'
+    canvasWrapper: '.linkmap_area_outlines-canvas_wrapper',
+    canvas: 'canvas',
   },
 
   onRender: function() {
     this.listenTo(this.model, 'change:background_type', this.redraw);
-    this.listenTo(this.options.masks, 'update', this.redrawAll);
-    this.listenTo(this.options.areas, 'change:highlighted', this.redrawHighlighted);
-    this.listenTo(this.options.areas, 'change:dimensions change:editing add remove', this.redraw);
+    this.listenTo(this.options.colorMap, 'update', this.redraw);
+    this.listenTo(this.options.area, 'change:highlighted change:dimensions change:editing', this.redraw);
     this.listenTo(pageflow.app, 'resize', this.redraw);
 
     this.listenTo(this.model.page, 'change:areas_outlined', this.update);
+    this.listenTo(pageflow.entry, 'change:emulation_mode', this.update);
     this.update();
   },
 
-  maskFromPoint: function(event) {
-    return this.options.masks.atPoint(event.offsetX / this.$el.width(),
-                                      event.offsetY / this.$el.height());
-  },
-
   update: function() {
-    this.$el.toggle(!!this.model.page.get('areas_outlined'));
-    this.redrawAll();
+    this.$el.toggle(!!this.model.page.get('areas_outlined') && !pageflow.entry.has('emulation_mode'));
+    this.redraw();
   },
 
   redraw: function() {
-    this.redrawAll();
-    this.redrawHighlighted();
-  },
-
-  redrawAll: function() {
-    var canvas = this.ui.allAreasCanvas[0];
+    var area = this.options.area;
+    var canvas = this.ui.canvas[0];
 
-    canvas.width = this.$el.width();
-    canvas.height = this.$el.height();
+    var colorMapComponent = this.options.colorMap.componentByPermaId(area.get('mask_perma_id'));
 
-    var context = canvas.getContext('2d');
-
-    context.clearRect(0, 0, canvas.width, canvas.height);
+    if (colorMapComponent) {
+      var attributes = colorMapComponent.areaAttributes();
 
-    this.options.areas.each(function(area) {
-      if (!area.get('editing')) {
-        this.drawArea(context, area);
-      }
-    }, this);
+      this.ui.canvas.css({
+        left: this.ui.canvasWrapper.width() * attributes.left / 100,
+        top: this.ui.canvasWrapper.height() * attributes.top / 100
+      });
 
-    if (this.options.areas.length) {
-      context.globalCompositeOperation = 'source-in';
-
-      this.usePattern(context);
-
-      context.globalAlpha = 0.2;
-      context.fillRect(0, 0, canvas.width, canvas.height);
+      canvas.width = this.ui.canvasWrapper.width() * attributes.width / 100;
+      canvas.height = this.ui.canvasWrapper.height() * attributes.height / 100;
     }
-  },
-
-  redrawHighlighted: function() {
-    var canvas = this.ui.highlightedAreaCanvas[0];
+    else {
+      this.ui.canvas.css({
+        left: 0,
+        top: 0
+      });
 
-    canvas.width = this.$el.width();
-    canvas.height = this.$el.height();
+      canvas.width = this.$el.width();
+      canvas.height = this.$el.height();
+    }
 
     var context = canvas.getContext('2d');
-
     context.clearRect(0, 0, canvas.width, canvas.height);
 
-    var highlightedArea = this.options.areas.detect(function(area) {
-      return area.get('highlighted');
-    });
-
-    if (highlightedArea && !highlightedArea.get('editing')) {
-      this.drawArea(context, highlightedArea);
+    if (!area.get('editing')) {
+      this.drawArea(context, area);
 
       context.globalCompositeOperation = 'source-in';
-      this.usePattern(context);
+      pageflow.linkmapPage.areaPattern.use(context);
+
+      if (area.get('highlighted')) {
+        context.globalAlpha = 0.4;
+      }
+      else {
+        context.globalAlpha = 0.2;
+      }
 
-      context.globalAlpha = 0.4;
       context.fillRect(0, 0, canvas.width, canvas.height);
     }
   },
 
   drawArea: function(context, area) {
     var canvas = context.canvas;
-    var mask = this.model.getLinkmapAreaMask(this.options.masks, area.get('mask_perma_id'));
+    var colorMapComponent = this.options.colorMap.componentByPermaId(area.get('mask_perma_id'));
 
-    if (mask) {
-      mask.draw(context, canvas.width);
+    if (colorMapComponent) {
+      colorMapComponent.draw(context, canvas.width);
     }
     else {
-      context.fillRect(area.get('left') * canvas.width / 100,
-                       area.get('top') * canvas.height / 100,
-                       area.get('width') * canvas.width / 100,
-                       area.get('height') * canvas.height / 100);
+      context.fillRect(0,
+                       0,
+                       canvas.width,
+                       canvas.height);
     }
-  },
-
-  usePattern: function(context) {
-    if (!this.patternSource) {
-      var rectSize = 7;
-
-      var canvas = document.createElement('canvas');
-      this.patternSource = canvas;
-
-      canvas.width = rectSize * 2;
-      canvas.height = rectSize * 2;
-
-      var c = canvas.getContext('2d');
-
-      c.fillStyle = '#000';
-      c.fillRect(0, 0, rectSize, rectSize);
-      c.fillRect(rectSize, rectSize, rectSize, rectSize);
-
-      c.fillStyle = '#fff';
-      c.fillRect(rectSize, 0, rectSize, rectSize);
-      c.fillRect(0, rectSize, rectSize, rectSize);
-    }
-
-    context.fillStyle = context.createPattern(this.patternSource, 'repeat');
   }
 });

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

@@ -9,10 +9,10 @@ pageflow.linkmapPage.AreasEmbeddedView = Backbone.Marionette.View.extend({
   render: function() {
     var view = this;
 
-    var masksDelegator = this.masks = new pageflow.linkmapPage.MasksDelegator();
+    var colorMapDelegator = this.colorMap = new pageflow.linkmapPage.ColorMapDelegator();
 
-    this.$el.on('linkmapupdatemasks', function(event, options) {
-      masksDelegator.updateDelegate(options.masks);
+    this.$el.on('linkmapupdatecolormap', function(event, options) {
+      colorMapDelegator.updateDelegate(options.colorMap);
       view.updateClassNames();
     });
 
@@ -24,34 +24,33 @@ pageflow.linkmapPage.AreasEmbeddedView = Backbone.Marionette.View.extend({
         pageConfiguration: this.model,
         page: this.model.page,
         container: this.options.container,
-        masks: masksDelegator
+        colorMap: colorMapDelegator
       }
     }));
 
-    view.appendSubview(new pageflow.linkmapPage.AreaOutlinesEmbeddedView({
-      model: this.model,
-      areas: this.model.linkmapAreas(this.options.propertyName),
-      masks: masksDelegator
-    }));
-
     view.appendSubview(new pageflow.linkmapPage.AreaMasksPreviewEmbeddedView({
       model: this.model,
       areas: this.model.linkmapAreas(this.options.propertyName),
-      masks: masksDelegator
+      colorMap: colorMapDelegator
     }));
 
     this.listenTo(this.model.page, 'change:areas_editable', function() {
       this.updateClassNames();
     });
 
+    this.listenTo(pageflow.entry, 'change:emulation_mode', function() {
+      this.updateClassNames();
+    });
+
     return this;
   },
 
   updateClassNames: function() {
-    var editable = this.model.page.get('areas_editable');
+    var editable = this.model.page.get('areas_editable') && !pageflow.entry.has('emulation_mode');
 
     this.$el.toggleClass('editable', !!editable);
     this.$el.toggleClass('masks_available',
-                         !this.masks.isEmpty() && this.model.get('background_type') !== 'hover_video');
+                         this.colorMap.components().length > 0 &&
+                         this.model.get('background_type') !== 'hover_video');
   }
 });

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

@@ -0,0 +1,61 @@
+pageflow.linkmapPage.MobileInfoBoxEmbeddedView = Backbone.Marionette.View.extend({
+  modelEvents: {
+    'change:mobile_info_box_title change:mobile_info_box_description': 'update'
+  },
+
+  render: function() {
+    var collection = this.model.linkmapAreas();
+    var paginator = this.paginator = this.$el.find('.linkmap-paginator');
+
+    this.setupOverviewPage();
+
+    this.subview(new pageflow.CollectionView({
+      el: this.$el.find('.linkmap-paginator-page_group'),
+      collection: collection,
+      itemViewConstructor: pageflow.linkmapPage.MobileInfoBoxPageItemEmbeddedView,
+      itemViewOptions: {
+        paginator: paginator
+      }
+    }));
+
+    this.listenTo(collection, 'add remove', function() {
+      paginator.linkmapPaginator('update');
+    });
+
+    this.listenTo(collection, 'sort', function() {
+      paginator.linkmapPaginator('update');
+    });
+
+    this.listenTo(collection, 'select', function(area) {
+      paginator.linkmapPaginator('goToPage', collection.indexOf(area) + 1);
+    });
+
+    this.listenTo(collection, 'resetSelection', function(area) {
+      paginator.linkmapPaginator('goToPage', 0);
+    });
+
+    this.update();
+    paginator.linkmapPaginator('update');
+
+    return this;
+  },
+
+  setupOverviewPage: function() {
+    var overviewPage = this.$el.find('.linkmap-mobile_info_box-overview_page');
+
+    this.ui = {
+      title: $('<h3 />').appendTo(overviewPage),
+      description: $('<p />').appendTo(overviewPage)
+    };
+  },
+
+  update: function() {
+    this.ui.title.text(this.model.get('mobile_info_box_title'));
+    this.ui.description.html(this.model.get('mobile_info_box_description'));
+
+    this.ui.title.toggle(!!this.model.get('mobile_info_box_title'));
+    this.ui.description.toggle(!!this.model.get('mobile_info_box_description'));
+
+    this.paginator.linkmapPaginator('updateHeight');
+  }
+});