pageflow-linkmap-page 1.5.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 292a7ccb48c2c4a81d69edfee98d6567861b6df965ab6ff59d29384da534bcc8
-  data.tar.gz: 168b15ee2a7da3d2803e2d3ffac8625e3f2d154036e94b725efb261452f086b8
+  metadata.gz: 6ce17d17c0e4310badb5085357e5207eed1a85771ebe119b9ebe04171cb38c2e
+  data.tar.gz: da776f95231282a5645ca3b67a3437ec26c8eb00ab7b537de7438344adffe5f5
 SHA512:
-  metadata.gz: e5d6b1ddc936609028ccb8ef0a5c6c3ff0cd08ad122bfc8b9b0d9fb2e503d46c6d41df21c52b2eea16bb6cbad64b285f76ab8bdd0cbac43a5a42edce51cddc9c
-  data.tar.gz: 1699af6c8ab0e2719df1006f5f16e8947ae52860f7a0a7e863fa2e3c4cfa933b9045f28241cc35dfa3642284422ef57729857bbc56cef52a6afae69a0c27550f
+  metadata.gz: 222ed28a9b10e79cf16e3b1f306c4aa88612e12b923a5570724a3bfbee456ec475a8ec5f08f1a3ee24b757a41d1335ffeaad3a3c1e330e43a9e8120afe4c8d6e
+  data.tar.gz: beca7d5fc98604075efc611f2eb98ca3b67549e89b11b4b350b402b170d1292af2bada093306f95895fbcf7e8eb0c3aa39fb735dbed9e36fe04b29e28466b75e

data/CHANGELOG.md

@@ -1,14 +1,39 @@
 # CHANGELOG
 
-### Version 1.5.0
+### Version 2.0.0
 
-2019-01-23
+2018-12-10
 
-[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/1-4-stable...v1.5.0)
+[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/1-x-stable...v2.0.0)
 
-- Add Rake-Task to migrate existing linkmap pages to 2.0-version
-  ([#47](https://github.com/codevise/pageflow-linkmap-page/pull/47))
+##### Breaking Changes
+
+- Requires Pageflow 13.
+  ([#35](https://github.com/codevise/pageflow-linkmap-page/pull/35),
+   [#38](https://github.com/codevise/pageflow-linkmap-page/pull/38))
+
+- Use server side processing for color maps and masked images.
+  ([#42](https://github.com/codevise/pageflow-linkmap-page/pull/42))
+
+  Remove the following line from your `config/routes.rb` file:
+
+        mount Pageflow::LinkmapPage::Engine, at: '/linkmap_page'
+
+  Run the following rake task to trigger server side processing of
+  color maps and masked images:
+
+        bin/rake pageflow_linkmap_page:migrate_to_masked_image_files
+
+  Consider running this task on a separate machine to handle file
+  processing before deploying the update.
+
+##### Features
+
+- Paginated mobile navigation
+  ([#43](https://github.com/codevise/pageflow-linkmap-page/pull/43))
+- Integrate with horizontal slideshow navigation
+  ([#44](https://github.com/codevise/pageflow-linkmap-page/pull/44))
 
 See
-[1-4-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/1-4-stable/CHANGELOG.md)
+[1-x-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/1-x-stable/CHANGELOG.md)
 for previous changes.

data/Gemfile

@@ -3,12 +3,5 @@ source 'https://rubygems.org'
 # Specify your gem's dependencies in chart.gemspec
 gemspec
 
-gem 'state_machine', git: 'https://github.com/codevise/state_machine.git'
-
 gem 'spring-commands-rspec', group: :development
 gem 'spring-commands-teaspoon', group: :development
-
-# Required to make Bundler 1.16.1 find a resolution. Without this line
-# `bundle install` without a `Gemfile.lock` would run for a very long
-# time makin the Travis build time out.
-gem 'railties', '~> 4.2'

data/README.md

@@ -19,11 +19,6 @@ Register the page type inside the configure block in `config/initializers/pagefl
       config.plugin(Pageflow::LinkmapPage.plugin)
     end
 
-Mount the engine:
-
-    # config/routes.rb
-    mount Pageflow::LinkmapPage::Engine, at: '/linkmap_page'
-
 Include javascripts and stylesheets:
 
     # app/assets/javascripts/pageflow/application.js

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

@@ -12,6 +12,10 @@ pageflow.linkmapPage.AreasCollection = Backbone.Collection.extend({
     this.listenTo(this, 'add', this.updateSelectedAttributes);
   },
 
+  comparator: function(area) {
+    return area.get('position');
+  },
+
   canAddLink: function() {
     return true;
   },
@@ -55,6 +59,7 @@ pageflow.linkmapPage.AreasCollection = Backbone.Collection.extend({
   },
 
   resetSelection: function() {
+    this.trigger('resetSelection');
     this.updateSelectedAttributes(null);
   },
 
@@ -62,5 +67,7 @@ pageflow.linkmapPage.AreasCollection = Backbone.Collection.extend({
     this.each(function(area) {
       area.set('selected', area === selectedArea);
     });
-  }
+  },
+
+  saveOrder: function() {}
 });

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

@@ -1,3 +1,19 @@
+pageflow.editor.fileTypes.register('pageflow_linkmap_page_color_map_files', {
+  model: pageflow.linkmapPage.ColorMapFile,
+
+  matchUpload: function(upload) {
+    return false;
+  }
+});
+
+pageflow.editor.fileTypes.register('pageflow_linkmap_page_masked_image_files', {
+  model: pageflow.linkmapPage.MaskedImageFile,
+
+  matchUpload: function(upload) {
+    return false;
+  }
+});
+
 pageflow.editor.pageTypes.register('linkmap_page', {
   configurationEditorView: pageflow.linkmapPage.ConfigurationEditorView,
 
@@ -29,6 +45,10 @@ pageflow.editor.pageTypes.register('linkmap_page', {
       view: pageflow.linkmapPage.AreasEmbeddedView
     },
 
+    '.linkmap-mobile_info_box': {
+      view: pageflow.linkmapPage.MobileInfoBoxEmbeddedView
+    },
+
     '.fixed_background': {
       view: pageflow.BackgroundImageEmbeddedView,
       options: {propertyName: 'fixed_background_image_id'}
@@ -37,7 +57,9 @@ pageflow.editor.pageTypes.register('linkmap_page', {
 
   pageLinks: function(configuration) {
     return configuration.linkmapPageLinks();
-  }
+  },
+
+  supportsPhoneEmulation: true
 });
 
 pageflow.editor.registerPageConfigurationMixin(pageflow.linkmapPage.pageConfigurationMixin);

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

@@ -13,8 +13,10 @@ pageflow.linkmapPage.SideBarController = Backbone.Marionette.Controller.extend({
     }));
   },
 
-  selectAreaPosition: function(pageId) {
-    var returnPath = 'pages/' + pageId + '/areas';
+  selectAreaPosition: function(pageId, areaIndex) {
+    var returnPath = areaIndex === undefined ?
+      'pages/' + pageId + '/areas' :
+      'linkmap_pages/' + pageId + '/areas/' + areaIndex;
 
     if (!pageflow.linkmapPage.currentAreaSelection) {
       pageflow.editor.navigate(returnPath, {trigger: true});
@@ -31,8 +33,25 @@ pageflow.linkmapPage.SideBarController = Backbone.Marionette.Controller.extend({
       selection: pageflow.linkmapPage.currentAreaSelection
     }));
 
-    pageflow.linkmapPage.currentAreaSelection.deferred.always(function() {
-      pageflow.editor.navigate(returnPath, {trigger: true});
-    });
+    var areas = page.configuration.linkmapAreas();
+
+    if (!areaIndex) {
+      areas.once('add', function(area) {
+        pageflow.editor.navigate(area.editPath(), {trigger: true});
+      }, this);
+    }
+
+    pageflow.linkmapPage.currentAreaSelection.deferred
+      .then(
+        function() {
+          if (areaIndex) {
+            pageflow.editor.navigate(returnPath, {trigger: true});
+          }
+        },
+        _.bind(function() {
+          areas.off('add', null, this);
+          pageflow.editor.navigate(returnPath, {trigger: true});
+        }, this)
+      );
   }
 });

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

@@ -70,7 +70,10 @@ pageflow.linkmapPage.Area = Backbone.Model.extend({
 
     return pageflow.linkmapPage.selectArea(
       this.collection.page,
-      {type: 'mask'}
+      {
+        type: 'colorMapComponent',
+        areaIndex: this.collection.indexOf(this)
+      }
     ).then(function(attributes) {
       model.set(_.extend(attributes, {
         marker: 'no_marker'

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

@@ -0,0 +1,16 @@
+pageflow.linkmapPage.ColorMapDelegator = pageflow.Object.extend({
+  initialize: function() {
+    this._colorMap = pageflow.linkmapPage.ColorMap.empty;
+  },
+
+  updateDelegate: function(colorMap) {
+    this._colorMap = colorMap;
+    this.trigger('update');
+  }
+});
+
+_(['components', 'componentFromPoint', 'componentByPermaId', 'previewUrl']).each(function(method) {
+  pageflow.linkmapPage.ColorMapDelegator.prototype[method] = function() {
+    return this._colorMap[method].apply(this._colorMap, arguments);
+  };
+});

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

@@ -0,0 +1,6 @@
+pageflow.linkmapPage.ColorMapFile = pageflow.linkmapPage.ProcessedFile.extend({
+  toJSON: function() {
+    return _.pick(this.attributes,
+                  'source_image_file_id');
+  }
+});

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

@@ -0,0 +1,7 @@
+pageflow.linkmapPage.MaskedImageFile = pageflow.linkmapPage.ProcessedFile.extend({
+  toJSON: function() {
+    return _.pick(this.attributes,
+                  'source_image_file_id',
+                  'color_map_file_id');
+  }
+});

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

@@ -1,15 +1,47 @@
 (function() {
   pageflow.linkmapPage.pageConfigurationMixin = {
-    initialize: function() {
-      this.listenTo(this, 'change:linkmap_color_map_image_id', function(model, imageFileId) {
-        if (imageFileId) {
-          var imageFile = this.getImageFile('linkmap_color_map_image_id');
-          generateMaskSpriteWhenReady(this, imageFile);
-        }
-        else {
-          resetMaskSprite(this);
-        }
-      });
+    initialize: function(options) {
+      this.listenTo(this,
+                    'change:linkmap_color_map_image_id',
+                    function(model, imageFileId) {
+                      if (imageFileId) {
+                        this.setReference('linkmap_color_map_file_id',
+                                          colorMapFiles().findOrCreateBy({
+                                            source_image_file_id: imageFileId
+                                          }));
+                      }
+                      else {
+                        this.unsetReference('linkmap_color_map_file_id');
+                      }
+                    });
+
+      _(['hover_image_id', 'visited_image_id']).each(_.bind(function(attribute) {
+        this.listenTo(
+          this,
+          'change:' + attribute +
+            ' change:linkmap_color_map_file_id' +
+            ' change:linkmap_color_map_file_id:ready',
+          function() {
+            var colorMapFile = colorMapFiles().get(this.get('linkmap_color_map_file_id'));
+            var imageFile = pageflow.imageFiles.get(this.get(attribute));
+
+            if (imageFile && colorMapFile && colorMapFile.isReady()) {
+              this.setReference('linkmap_masked_' + attribute,
+                                maskedImageFiles().findOrCreateBy({
+                                  source_image_file_id: imageFile.id,
+                                  color_map_file_id: colorMapFile.id
+                                }));
+            }
+            else {
+              this.unsetReference('linkmap_masked_' + attribute);
+            }
+          });
+      }, this));
+    },
+
+    linkmapReadyColorMapFileId: function() {
+      var colorMapFile = colorMapFiles().get(this.get('linkmap_color_map_file_id'));
+      return colorMapFile && colorMapFile.isReady() ? colorMapFile.id : null;
     },
 
     linkmapPageLinks: function() {
@@ -34,60 +66,22 @@
           }
         );
 
-        configuration.listenTo(collection, 'add remove change', function() {
+        configuration.listenTo(collection, 'add remove change sort', function() {
           configuration.set('linkmap_areas', collection.map(function(area) {
-            return _.omit(area.attributes, 'highlighted', 'editing', 'selected');
+            return _.omit(area.attributes, 'highlighted', 'editing', 'selected', 'position');
           }));
         });
 
         return collection;
       }
-    },
-
-    getLinkmapAreaMask: function(masks, permaId) {
-      if (this.get('background_type') !== 'hover_video') {
-        return masks.findByPermaId(permaId);
-      }
     }
   };
 
-  function generateMaskSpriteWhenReady(configuration, imageFile) {
-    if (imageFile.isReady()) {
-      generateMaskSprite(configuration, imageFile);
-    }
-    else {
-      imageFile.once('change:state', function() {
-        generateMaskSpriteWhenReady(configuration, imageFile);
-      });
-    }
-  }
-
-  function generateMaskSprite(configuration, imageFile) {
-    // panorama_mask_url is available in Pageflow >= 12.1
-    pageflow.linkmapPage.StoredMaskSprite
-      .findOrCreateForImageFileId(imageFile.id,
-                                  imageFile.get('panorama_mask_url') ||
-                                  imageFile.get('panorama_url'))
-      .then(
-        function(masks) {
-          configuration.set('linkmap_masks', masks);
-        },
-        function(error) {
-          configuration.unset('linkmap_masks');
-          configuration.unset('linkmap_color_map_image_id');
-
-          if (error.i18nKey) {
-            alert(I18n.t(error.i18nKey));
-          }
-          else {
-            alert(I18n.t('pageflow.linkmap_page.errors.mask_image_failed'));
-            throw(error);
-          }
-        }
-      );
+  function maskedImageFiles() {
+    return pageflow.entry.getFileCollection('pageflow_linkmap_page_masked_image_files');
   }
 
-  function resetMaskSprite(configuration) {
-    configuration.unset('linkmap_masks');
+  function colorMapFiles() {
+    return pageflow.entry.getFileCollection('pageflow_linkmap_page_color_map_files');
   }
-}());
+}());

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

@@ -0,0 +1,12 @@
+pageflow.linkmapPage.ProcessedFile = pageflow.UploadedFile.extend({
+  stages: [
+    {
+      name: 'processing',
+      activeStates: ['processing'],
+      finishedStates: ['processed'],
+      failedStates: ['processing_failed']
+    }
+  ],
+
+  readyState: 'processed'
+});

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

@@ -0,0 +1,42 @@
+pageflow.linkmapPage.areaPattern = {
+  applyOffset: function(canvas, left, top, width, height) {
+    var el = $(canvas)
+
+    var deltaX = left % 14;
+    var deltaY = top % 14;
+
+    el.css({
+      left: -deltaX + 'px',
+      top: -deltaY + 'px',
+      width: width + deltaX + 'px',
+      height: height + deltaY + 'px'
+    }).show();
+
+    canvas.width = el.width();
+    canvas.height = el.height();
+  },
+
+  use: 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/routers/side_bar_router.js

@@ -2,6 +2,8 @@ pageflow.linkmapPage.SideBarRouter = Backbone.Marionette.AppRouter.extend({
   appRoutes: {
     'linkmap_pages/:pageId/areas/:index': 'area',
 
-    'linkmap_pages/:pageId/select_area_position': 'selectAreaPosition',
+    'linkmap_pages/:pageId/select_area_position?area=:index': 'selectAreaPosition',
+
+    'linkmap_pages/:pageId/select_area_position': 'selectAreaPosition'
   }
 });

data/app/assets/javascript/pageflow/linkmap_page/editor/templates/embedded/area_item.jst.ejs

@@ -1,5 +1,5 @@
-<canvas class="visited_image" />
-<canvas class="hover_image" />
+<div class="background_image visited_image" data-style-group="panorama"></div>
+<div class="background_image hover_image" data-style-group="panorama"></div>
 <div class="linkmap_marker"></div>
 <span class="area_type_pictogram"></span>
 <div class="linkmap_description">

data/app/assets/javascript/pageflow/linkmap_page/editor/templates/embedded/area_masks_preview.jst.ejs

@@ -1,2 +1,4 @@
-<canvas class="all" />
-<canvas class="current" />
+<div class="background_image" />
+<div class="canvas_wrapper" style="pointer-events: none;">
+  <canvas />
+</div>

data/app/assets/javascript/pageflow/linkmap_page/editor/templates/embedded/area_outlines.jst.ejs

@@ -1,2 +1,3 @@
-<canvas class="all" />
-<canvas class="highlighted" />
+<span class="linkmap_area_outlines-canvas_wrapper">
+  <canvas />
+</span>

data/app/assets/javascript/pageflow/linkmap_page/editor/templates/embedded/mobile_info_box_page_item.jst.ejs

@@ -0,0 +1,2 @@
+<h3></h3>
+<p></p>

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

@@ -12,6 +12,7 @@ pageflow.linkmapPage.AreasListView = Backbone.Marionette.View.extend({
       label: I18n.t('pageflow.linkmap_page.editor.views.areas_list.label'),
       collection: this.model.linkmapAreas(),
       highlight: true,
+      sortable: true,
 
       onEdit: function(model) {
         pageflow.editor.navigate(model.editPath(), {trigger: true});

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

@@ -43,6 +43,14 @@ pageflow.linkmapPage.ConfigurationEditorView = pageflow.ConfigurationEditorView.
         }
       });
 
+      this.input('linkmap_masked_hover_image_id', pageflow.FileProcessingStateDisplayView, {
+        collection: 'pageflow_linkmap_page_masked_image_files',
+        visibleBinding: 'background_type',
+        visible: function(backgroundType) {
+          return _(['image', 'video']).contains(backgroundType);
+        }
+      });
+
       this.input('panorama_video_id', pageflow.FileInputView, {
         attributeTranslationKeyPrefixes: ['pageflow.linkmap_page.page_attributes.hover_video_type'],
         collection: pageflow.videoFiles,
@@ -68,11 +76,23 @@ pageflow.linkmapPage.ConfigurationEditorView = pageflow.ConfigurationEditorView.
         }
       });
 
+      this.input('linkmap_color_map_file_id', pageflow.FileProcessingStateDisplayView, {
+        collection: 'pageflow_linkmap_page_color_map_files',
+        visibleBinding: 'background_type',
+        visible: function(backgroundType) {
+          return _(['image', 'video']).contains(backgroundType);
+        }
+      });
+
       this.input('visited_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
         positioning: false
       });
 
+      this.input('linkmap_masked_visited_image_id', pageflow.FileProcessingStateDisplayView, {
+        collection: 'pageflow_linkmap_page_masked_image_files'
+      });
+
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
         positioning: false
@@ -87,6 +107,32 @@ pageflow.linkmapPage.ConfigurationEditorView = pageflow.ConfigurationEditorView.
       this.view(pageflow.linkmapPage.AreasListView, {
         model: this.model
       });
+
+      this.input('mobile_panorama_navigation', pageflow.SelectInputView, {
+        values: ['free', 'pan_zoom']
+      });
+
+      this.input('mobile_info_box_title', pageflow.TextInputView, {
+        visibleBinding: 'mobile_panorama_navigation',
+        visible: function(navigation) {
+          return navigation === 'pan_zoom';
+        }
+      });
+      this.input('mobile_info_box_description', pageflow.TextAreaInputView, {
+        size: 'short',
+        disableLinks: true,
+        visibleBinding: 'mobile_panorama_navigation',
+        visible: function(navigation) {
+          return navigation === 'pan_zoom';
+        }
+      });
+
+      this.input('hide_linkmap_overlay_boxes', pageflow.CheckBoxInputView, {
+        visibleBinding: 'mobile_panorama_navigation',
+        visible: function(navigation) {
+          return navigation === 'pan_zoom';
+        }
+      });
     });
 
     this.tab('options', function() {

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

@@ -47,11 +47,8 @@ pageflow.linkmapPage.EditAreaView = Backbone.Marionette.Layout.extend({
         visibleBindingValue: 'page'
       });
 
-      this.input('page_transition', pageflow.SelectInputView, {
-        translationKeyPrefix: 'pageflow.page_transitions',
+      this.group('page_transitions', {
         includeBlank: true,
-        blankTranslationKey: 'pageflow.linkmap_page.default_page_transition',
-        values: pageflow.pageTransitions.names(),
         visibleBinding: 'target_type',
         visibleBindingValue: 'page'
       });
@@ -85,7 +82,7 @@ pageflow.linkmapPage.EditAreaView = Backbone.Marionette.Layout.extend({
         visible: function(value) {
           return value !== 'dynamic_marker';
         },
-        disabled: !page.configuration.has('linkmap_masks') ||
+        disabled: !page.configuration.has('linkmap_color_map_file_id') ||
           page.configuration.get('background_type') === 'hover_video'
       });
       this.input('inverted', pageflow.CheckBoxInputView, {
@@ -107,4 +104,4 @@ pageflow.linkmapPage.EditAreaView = Backbone.Marionette.Layout.extend({
   goBack: function() {
     pageflow.editor.navigate('/pages/' + this.options.page.id + '/areas', {trigger: true});
   }
-});
+});