pageflow-linkmap-page 0.2.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4be69c22ece16a9e318bb3566dc670fd6a1ca230
-  data.tar.gz: a7a90492548b93bbdc273717175616593c2dace0
+  metadata.gz: 2ace1b5edf88295b6d1e8d602bdf11cfd4f28800
+  data.tar.gz: f264b4eac26073ef030b801d3cf17e34299030ee
 SHA512:
-  metadata.gz: 2452e5b8dd93e30d517de81f8172decd7a716e787d45401e17cc037a62e1a5c5fb5351cb2c9c5c37fda452c3b98995fbfc4374e5e85f5cdc651b8bdcaab8dbfa
-  data.tar.gz: 3c2cbf1be66d085a038b1c2c666c6b93a5d27230efa64dcf2e3ef2dc183947fba95a673e424f8c6a9baea2b38f13488c3f4997dd4bcd85ebe4d861c4fe20a96a
+  metadata.gz: f0b5f204c209625f2621577553bfaf9626ef70d74b93eaabdf8745948a76a5c37c5cec3b18c333a0c6f6bc2743e2c8ad0bcb33d3ed82de46073b36db18a472fe
+  data.tar.gz: e37fc9d1c98a09d9e562beb7324985482c508c985cd736b60553ef68e7ebae30498e8312a9955ca2a26805cdf1669a2bb8b14f506bdf556100fd27e4bfd3a861

data/CHANGELOG.md

@@ -1,46 +1,34 @@
 # CHANGELOG
 
-### Version 0.2.0
-
-2017-04-21
-
-[Compare changes](http://github.com/codevise/pageflow-linkmap-page/compare/v0.1.0...v0.2.0)
-
-- Add vertical scroll indicators
-  ([#7](https://github.com/codevise/pageflow-linkmap-page/pull/7))
-- Prevent scrolling via mousemove on mobile platform
-  ([#21](https://github.com/codevise/pageflow-linkmap-page/pull/21))
-- Improve panorama scaling
-  ([#20](https://github.com/codevise/pageflow-linkmap-page/pull/20))
-- Ensure viewport is covered when scroll area restricted
-  ([#19](https://github.com/codevise/pageflow-linkmap-page/pull/19))
-- Disable links in overlay boxes
-  ([#18](https://github.com/codevise/pageflow-linkmap-page/pull/18))
-- Prevent overlays to be displayed behind editor bar
-  ([#8](https://github.com/codevise/pageflow-linkmap-page/pull/8))
-- Use info box title as title for text only areas
-  ([#16](https://github.com/codevise/pageflow-linkmap-page/pull/16))
-- Fix translation typo
-  ([#13](https://github.com/codevise/pageflow-linkmap-page/pull/13))
-
-Internals:
-
-- Fix test suite and run on travis
-  ([#15](https://github.com/codevise/pageflow-linkmap-page/pull/15))
-- Add .erb extension
-  ([#11](https://github.com/codevise/pageflow-linkmap-page/pull/11))
-- Remove unused files
-  ([#17](https://github.com/codevise/pageflow-linkmap-page/pull/17))
-
-Documentation:
-
-- Add instructions to migrate external links migrations
-  ([#3](https://github.com/codevise/pageflow-linkmap-page/pull/3))
-- Explicitly note to enable the feature
-  ([#12](https://github.com/codevise/pageflow-linkmap-page/pull/12))
-
-### Version 0.1.0
-
-2016-06-09
-
-- Initial release
+### Version 1.0.0
+
+2017-08-11
+
+[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/0-2-stable...v1.0.0)
+
+##### Manual Update Step
+
+The plugin now provides additional routes and migrations. Mount the engine:
+
+    # config/routes.rb
+    mount Pageflow::LinkmapPage::Engine, at: '/linkmap_page'
+
+Install and run migrations:
+
+    $ rake pageflow_linkmap_page:install:migrations
+    $ rake db:migrate
+
+##### Features
+
+- Support mask image for non rectangular areas
+  ([#22](https://github.com/codevise/pageflow-linkmap-page/pull/22))
+- Add support for pageflow-external-links 1.x
+  ([#26](https://github.com/codevise/pageflow-linkmap-page/pull/26))
+- Rename the last `css.scss` files
+  ([#25](https://github.com/codevise/pageflow-linkmap-page/pull/25))
+- Require pageflow 12
+  ([#24](https://github.com/codevise/pageflow-linkmap-page/pull/24))
+
+See
+[0-2-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/0-2-stable/CHANGELOG.md)
+for previous changes.

data/README.md

@@ -19,6 +19,11 @@ 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
@@ -27,15 +32,15 @@ Include javascripts and stylesheets:
     # app/assets/javascripts/pageflow/editor.js
     //= require pageflow/linkmap_page/editor
 
-    # app/assets/stylesheets/pageflow/application.css.scss
+    # app/assets/stylesheets/pageflow/application.scss
     @import "pageflow/linkmap_page";
 
-    # app/assets/stylesheets/pageflow/editor.css.scss
+    # app/assets/stylesheets/pageflow/editor.scss
     @import "pageflow/linkmap_page/editor";
 
 Import default theme additions:
 
-    # app/assets/stylesheets/pageflow/themes/default.css.scss
+    # app/assets/stylesheets/pageflow/themes/default.scss
 
     @import "pageflow/linkmap_page/themes/default";
 
@@ -46,6 +51,11 @@ Install dependencies:
 
     bundle install
 
+Install and run migrations:
+
+    $ rake pageflow_linkmap_page:install:migrations
+    $ rake db:migrate
+
 Then follow the installation instructions for the [pageflow-external-links](https://github.com/codevise/pageflow-external-links) gem.
 
 Restart the application server and enable the corresponding page type
@@ -62,5 +72,5 @@ doesn't help, consider
 ## Contributing Locales
 
 Edit the translations directly on the
-[pageflow-internal-links](http://www.localeapp.com/projects/public?search=tf/pageflow-linkmap-page)
+[pageflow-linkmap-page](http://www.localeapp.com/projects/public?search=tf/pageflow-linkmap-page)
 locale project.

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

@@ -7,13 +7,9 @@ pageflow.linkmapPage.AreasCollection = Backbone.Collection.extend({
       left: 10,
       top: 10
     };
-  },
 
-  /**
-   * @param [Object, Function] value
-   */
-  setDefaultPosition: function(value) {
-    this.defaultPosition = value;
+    this.listenTo(this, 'select', this.updateSelectedAttributes);
+    this.listenTo(this, 'add', this.updateSelectedAttributes);
   },
 
   canAddLink: function() {
@@ -48,10 +44,23 @@ pageflow.linkmapPage.AreasCollection = Backbone.Collection.extend({
   },
 
   addWithPosition: function(attributes) {
-    this.add(_.extend(
-      {width: 7, height: 7},
-      _.result(this, 'defaultPosition'),
-      attributes
-    ));
+    var collection = this;
+
+    pageflow.linkmapPage.selectArea(this.page).then(function(positionAttributes) {
+      collection.add(_.extend(
+        positionAttributes,
+        attributes
+      ));
+    });
+  },
+
+  resetSelection: function() {
+    this.updateSelectedAttributes(null);
+  },
+
+  updateSelectedAttributes: function(selectedArea) {
+    this.each(function(area) {
+      area.set('selected', area === selectedArea);
+    });
   }
-});
+});

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

@@ -11,5 +11,28 @@ pageflow.linkmapPage.SideBarController = Backbone.Marionette.Controller.extend({
       page: page,
       areaIndex: areaIndex
     }));
+  },
+
+  selectAreaPosition: function(pageId) {
+    var returnPath = 'pages/' + pageId + '/areas';
+
+    if (!pageflow.linkmapPage.currentAreaSelection) {
+      pageflow.editor.navigate(returnPath, {trigger: true});
+      return;
+    }
+
+    var page = pageflow.pages.get(pageId);
+    page.configuration.trigger('linkmap:select_area_position', {
+      selection: pageflow.linkmapPage.currentAreaSelection
+    });
+
+    this.region.show(new pageflow.linkmapPage.SelectAreaPostionHintView({
+      model: page,
+      selection: pageflow.linkmapPage.currentAreaSelection
+    }));
+
+    pageflow.linkmapPage.currentAreaSelection.deferred.always(function() {
+      pageflow.editor.navigate(returnPath, {trigger: true});
+    });
   }
 });

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

@@ -61,6 +61,42 @@ pageflow.linkmapPage.Area = Backbone.Model.extend({
     return this.get('name');
   },
 
+  select: function() {
+    this.trigger('select', this);
+  },
+
+  selectMask: function() {
+    var model = this;
+
+    return pageflow.linkmapPage.selectArea(
+      this.collection.page,
+      {type: 'mask'}
+    ).then(function(attributes) {
+      model.set(_.extend(attributes, {
+        marker: 'no_marker'
+      }));
+      model.trigger('change:dimensions');
+    });
+  },
+
+  unsetMask: function() {
+    this.set({
+      marker: 'no_marker',
+      mask_perma_id: undefined
+    });
+    this.trigger('change:dimensions');
+  },
+
+  setDimensions: function(left, top, width, height) {
+    this.set({
+      left: left,
+      top: top,
+      width: width,
+      height: height
+    });
+    this.trigger('change:dimensions');
+  },
+
   highlight: function() {
     this.set('highlighted', true);
   },

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

@@ -0,0 +1,16 @@
+pageflow.linkmapPage.MasksDelegator = pageflow.Object.extend({
+  initialize: function() {
+    this._masks = pageflow.linkmapPage.Masks.empty;
+  },
+
+  updateDelegate: function(masks) {
+    this._masks = masks;
+    this.trigger('update');
+  }
+});
+
+_(['findByPermaId', 'atPoint', 'each', 'draw', 'isEmpty']).each(function(method) {
+  pageflow.linkmapPage.MasksDelegator.prototype[method] = function() {
+    return this._masks[method].apply(this._masks, arguments);
+  };
+});

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

@@ -3,6 +3,7 @@ pageflow.linkmapPage.NewAreaFileSelectionHandler = function(options) {
 
   this.call = function(file) {
     page.configuration.linkmapAreas().addAudioFile(file.id);
+    return false;
   };
 
   this.getReferer = function() {

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

@@ -1,33 +1,90 @@
-pageflow.linkmapPage.pageConfigurationMixin = {
-  linkmapPageLinks: function() {
-    this._linkmapPageLinks = this._linkmapPageLinks || new pageflow.linkmapPage.PageLinksCollection({
-      areas: this.linkmapAreas()
-    });
-
-    return this._linkmapPageLinks;
-  },
-
-  linkmapAreas: function() {
-    var configuration = this;
-
-    this._linkmapAreas = this._linkmapAreas || create();
-    return this._linkmapAreas;
-
-    function create() {
-      var collection = new pageflow.linkmapPage.AreasCollection(
-        configuration.get('linkmap_areas'),
-        {
-          page: configuration.page
+(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);
+        }
+      });
+    },
 
-      configuration.listenTo(collection, 'add remove change', function() {
-        configuration.set('linkmap_areas', collection.map(function(area) {
-          return _.omit(area.attributes, 'highlighted');
-        }));
+    linkmapPageLinks: function() {
+      this._linkmapPageLinks = this._linkmapPageLinks || new pageflow.linkmapPage.PageLinksCollection({
+        areas: this.linkmapAreas()
       });
 
-      return collection;
+      return this._linkmapPageLinks;
+    },
+
+    linkmapAreas: function() {
+      var configuration = this;
+
+      this._linkmapAreas = this._linkmapAreas || create();
+      return this._linkmapAreas;
+
+      function create() {
+        var collection = new pageflow.linkmapPage.AreasCollection(
+          configuration.get('linkmap_areas'),
+          {
+            page: configuration.page
+          }
+        );
+
+        configuration.listenTo(collection, 'add remove change', function() {
+          configuration.set('linkmap_areas', collection.map(function(area) {
+            return _.omit(area.attributes, 'highlighted', 'editing', 'selected');
+          }));
+        });
+
+        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) {
+    pageflow.linkmapPage.StoredMaskSprite
+      .findOrCreateForImageFileId(imageFile.id,
+                                  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 {
+            throw(error);
+          }
+        }
+      );
+  }
+
+  function resetMaskSprite(configuration) {
+    configuration.unset('linkmap_masks');
+  }
+}());

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

@@ -0,0 +1,25 @@
+pageflow.linkmapPage.StoredMaskSprite = Backbone.Model.extend({
+  modelName: 'mask_sprite',
+  paramRoot: 'mask_sprite',
+
+  url: function() {
+    return '/linkmap_page/image_files/' + this.get('image_file_id') + '/mask_sprite';
+  }
+});
+
+pageflow.linkmapPage.StoredMaskSprite.findOrCreateForImageFileId = function(imageFileId, imageFileUrl) {
+  return new $.Deferred(function(deferred) {
+    pageflow.linkmapPage.Masks.loadColorMapImage(imageFileUrl).then(function(masks) {
+      var storedMaskSprite = new pageflow.linkmapPage.StoredMaskSprite({
+        image_file_id: imageFileId,
+        attachment: masks.getSpriteDataUrl()
+      });
+
+      storedMaskSprite.save(null, {
+        success: function() {
+          deferred.resolve(masks.serialize(storedMaskSprite.id));
+        }
+      });
+    }, deferred.reject);
+  }).promise();
+};

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

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

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

@@ -1,11 +1,20 @@
-<div class="background_image visited_image" data-style-group="panorama"></div>
-<div class="background_image hover_image" data-style-group="panorama"></div>
+<canvas class="visited_image" />
+<canvas class="hover_image" />
 <div class="linkmap_marker"></div>
 <span class="area_type_pictogram"></span>
 <div class="linkmap_description">
   <div class="link_title"></div>
   <div class="link_description"></div>
 </div>
-<a class="toggle_marker" href="" title="<%= I18n.t('pageflow.linkmap_page.editor.templates.embedded.area_item.toggle_marker') %>">
-<a class="edit" href="" title="<%= I18n.t('pageflow.linkmap_page.editor.templates.embedded.area_item.edit') %>">
-</a>
+
+<div class="click_trap"></div>
+<div class="action_buttons">
+  <a class="action_button show_marker toggle_marker" href="" title="<%= I18n.t('pageflow.linkmap_page.editor.templates.embedded.area_item.show_marker') %>">
+  </a>
+  <a class="action_button hide_marker toggle_marker" href="" title="<%= I18n.t('pageflow.linkmap_page.editor.templates.embedded.area_item.hide_marker') %>">
+  </a>
+  <a class="action_button set_mask" href="" title="<%= I18n.t('pageflow.linkmap_page.editor.templates.embedded.area_item.set_mask') %>">
+  </a>
+  <a class="action_button unset_mask" href="" title="<%= I18n.t('pageflow.linkmap_page.editor.templates.embedded.area_item.unset_mask') %>">
+  </a>
+</div>

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

@@ -0,0 +1,2 @@
+<canvas class="all" />
+<canvas class="current" />

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

@@ -0,0 +1,2 @@
+<canvas class="all" />
+<canvas class="highlighted" />

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

@@ -0,0 +1,4 @@
+<p></p>
+<button class="cancel">
+  <%= I18n.t('pageflow.linkmap_page.editor.templates.select_area_position_hint.cancel') %>
+</button>

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

@@ -2,6 +2,12 @@ pageflow.linkmapPage.AreasListView = Backbone.Marionette.View.extend({
   className: 'linkmap_page_areas_list',
 
   render: function() {
+    this.model.linkmapAreas().resetSelection();
+
+    this.subview(new pageflow.linkmapPage.EditableAreasModeView({
+      model: this.model.page
+    }));
+
     this.appendSubview(new pageflow.ListView({
       label: I18n.t('pageflow.linkmap_page.editor.views.areas_list.label'),
       collection: this.model.linkmapAreas(),

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

@@ -59,6 +59,15 @@ pageflow.linkmapPage.ConfigurationEditorView = pageflow.ConfigurationEditorView.
         visibleBindingValue: 'hover_video'
       });
 
+      this.input('linkmap_color_map_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        positioning: false,
+        visibleBinding: 'background_type',
+        visible: function(backgroundType) {
+          return _(['image', 'video']).contains(backgroundType);
+        }
+      });
+
       this.input('visited_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
         positioning: false
@@ -78,10 +87,6 @@ pageflow.linkmapPage.ConfigurationEditorView = pageflow.ConfigurationEditorView.
       this.view(pageflow.linkmapPage.AreasListView, {
         model: this.model
       });
-
-      this.view(pageflow.linkmapPage.EditableAreasModeView, {
-        model: this.model.page
-      });
     });
 
     this.tab('options', function() {

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

@@ -16,27 +16,23 @@ pageflow.linkmapPage.EditAreaView = Backbone.Marionette.Layout.extend({
   },
 
   onRender: function() {
-    var view = this;
-    var area = this.model;
-    var areaCollection = this.model.collection;
     var configurationEditor = new pageflow.ConfigurationEditorView({
       model: this.model
     });
 
     this.configure(configurationEditor);
-
     this.formContainer.show(configurationEditor);
-    this.model.set('highlighted', true);
-    this.model.collection.page.set('areas_editable', true);
 
-    this.on('close', function() {
-      area.unset('highlighted');
-      areaCollection.page.unset('areas_editable');
-    });
+    this.subview(new pageflow.linkmapPage.EditableAreasModeView({
+      model: this.model.collection.page
+    }));
+
+    this.model.select();
   },
 
   configure: function(configurationEditor) {
     var view = this;
+    var page = this.options.page;
 
     configurationEditor.tab('general', function() {
       this.input('name', pageflow.TextInputView);
@@ -83,7 +79,15 @@ pageflow.linkmapPage.EditAreaView = Backbone.Marionette.Layout.extend({
     });
 
     configurationEditor.tab('appearance', function() {
-      this.input('marker', pageflow.SelectInputView, {values: pageflow.linkmapPage.toggleMarkerOptions});
+      this.input('marker', pageflow.SelectInputView, {values: pageflow.linkmapPage.markerOptions});
+      this.input('mask_perma_id', pageflow.linkmapPage.AreaMaskInputView, {
+        visibleBinding: 'marker',
+        visible: function(value) {
+          return value !== 'dynamic_marker';
+        },
+        disabled: !page.configuration.has('linkmap_masks') ||
+          page.configuration.get('background_type') === 'hover_video'
+      });
       this.input('inverted', pageflow.CheckBoxInputView, {
         visibleBinding: 'target_type',
         visible: function(value) {

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

@@ -1,10 +1,15 @@
 pageflow.linkmapPage.EditableAreasModeView = Backbone.Marionette.View.extend({
   render: function() {
-    this.model.set('areas_editable', true);
+    this.model.set({
+      areas_editable: true,
+      areas_outlined: true
+    });
+
     return this;
   },
 
   onClose: function() {
     this.model.unset('areas_editable');
+    this.model.unset('areas_outlined');
   }
 });