pageflow-linkmap-page 2.0.0 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ce17d17c0e4310badb5085357e5207eed1a85771ebe119b9ebe04171cb38c2e
-  data.tar.gz: da776f95231282a5645ca3b67a3437ec26c8eb00ab7b537de7438344adffe5f5
+  metadata.gz: 9825b545e07dcf9337e0f9176ff4c4f56868450ca81e26c66806324b04e3f096
+  data.tar.gz: b576dda5149b50eef40d3cd15db7b32cb4f9e246b1b0378a4972436e23b5a1d7
 SHA512:
-  metadata.gz: 222ed28a9b10e79cf16e3b1f306c4aa88612e12b923a5570724a3bfbee456ec475a8ec5f08f1a3ee24b757a41d1335ffeaad3a3c1e330e43a9e8120afe4c8d6e
-  data.tar.gz: beca7d5fc98604075efc611f2eb98ca3b67549e89b11b4b350b402b170d1292af2bada093306f95895fbcf7e8eb0c3aa39fb735dbed9e36fe04b29e28466b75e
+  metadata.gz: 2f203df90096273faea3c8b16478b33f35662d94ffadcd3cb533674575b15fb2f1cf2100703c15176f76f07e984ea0b96a3de140f52e6a6e67d2983627548f5f
+  data.tar.gz: 7e51966d6484244aa35a1d659f32160d3f2cc069585248418b7a1a7446164936516f25bb7abbe922dcc4e8c07fe7cfd59a0812d55cec3fd31ce8a4d5a3b2f7fe

data/CHANGELOG.md

@@ -1,39 +1,14 @@
 # CHANGELOG
 
-### Version 2.0.0
+### Version 2.1.0
 
-2018-12-10
+2019-01-23
 
-[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/1-x-stable...v2.0.0)
+[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/2-0-stable...v2.1.0)
 
-##### 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))
+- Add compatibility to pageflow_linkmap_page 1.5
+  ([#48](https://github.com/codevise/pageflow-linkmap-page/pull/48))
 
 See
-[1-x-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/1-x-stable/CHANGELOG.md)
+[2-0-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/2-0-stable/CHANGELOG.md)
 for previous changes.

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

@@ -85,7 +85,8 @@ pageflow.linkmapPage.Area = Backbone.Model.extend({
   unsetMask: function() {
     this.set({
       marker: 'no_marker',
-      mask_perma_id: undefined
+      mask_perma_id: undefined,
+      color_map_component_id: undefined
     });
     this.trigger('change:dimensions');
   },
@@ -119,5 +120,18 @@ pageflow.linkmapPage.Area = Backbone.Model.extend({
 
   remove: function() {
     this.collection.remove(this);
+  },
+
+  get: function(attr) {
+    if (attr === 'color_map_component_id') {
+      var colorMapComponentId = this.attributes['color_map_component_id'];
+      if(colorMapComponentId === undefined) {
+        // also try legacy mask_perma_id as fallback
+        colorMapComponentId = this.attributes['mask_perma_id'];
+      }
+      return colorMapComponentId;
+    } else {
+      return this.attributes[attr];
+    }
   }
 });

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

@@ -77,7 +77,7 @@ pageflow.linkmapPage.EditAreaView = Backbone.Marionette.Layout.extend({
 
     configurationEditor.tab('appearance', function() {
       this.input('marker', pageflow.SelectInputView, {values: pageflow.linkmapPage.markerOptions});
-      this.input('mask_perma_id', pageflow.linkmapPage.AreaMaskInputView, {
+      this.input('color_map_component_id', pageflow.linkmapPage.AreaMaskInputView, {
         visibleBinding: 'marker',
         visible: function(value) {
           return value !== 'dynamic_marker';

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

@@ -209,7 +209,7 @@ pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend(
     var audioFileId = this.model.get('target_id');
     var colorMapComponent = this.getColorMapComponent();
 
-    this.$el.attr('data-mask-perma-id', colorMapComponent ? colorMapComponent.permaId : null);
+    this.$el.attr('data-color-map-component-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'));
@@ -271,7 +271,7 @@ pageflow.linkmapPage.AreaItemEmbeddedView = Backbone.Marionette.ItemView.extend(
 
   getColorMapComponent: function() {
     return this.options.colorMap.componentByPermaId(
-      this.model.get('mask_perma_id')
+      this.model.get('color_map_component_id')
     );
   }
 });

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

@@ -147,7 +147,7 @@ pageflow.linkmapPage.AreaMasksPreviewEmbeddedView = Backbone.Marionette.ItemView
 
   colorMapComponentIsUsed: function(colorMapComponent) {
     return this.options.areas.any(function(area) {
-      return colorMapComponent.permaId === area.get('mask_perma_id');
+      return colorMapComponent.permaId === area.get('color_map_component_id');
     }, this);
   },
 

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

@@ -28,7 +28,7 @@ pageflow.linkmapPage.AreaOutlineEmbeddedView = Backbone.Marionette.ItemView.exte
     var area = this.options.area;
     var canvas = this.ui.canvas[0];
 
-    var colorMapComponent = this.options.colorMap.componentByPermaId(area.get('mask_perma_id'));
+    var colorMapComponent = this.options.colorMap.componentByPermaId(area.get('color_map_component_id'));
 
     if (colorMapComponent) {
       var attributes = colorMapComponent.areaAttributes();
@@ -73,7 +73,7 @@ pageflow.linkmapPage.AreaOutlineEmbeddedView = Backbone.Marionette.ItemView.exte
 
   drawArea: function(context, area) {
     var canvas = context.canvas;
-    var colorMapComponent = this.options.colorMap.componentByPermaId(area.get('mask_perma_id'));
+    var colorMapComponent = this.options.colorMap.componentByPermaId(area.get('color_map_component_id'));
 
     if (colorMapComponent) {
       colorMapComponent.draw(context, canvas.width);

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

@@ -1,7 +1,7 @@
 $.fn.linkmapAreaSetMask = function(options) {
   this.each(function() {
     var area = $(this);
-    var colorMapComponent = options.colorMap.componentByPermaId(area.attr('data-mask-perma-id'));
+    var colorMapComponent = options.colorMap.componentByPermaId(area.attr('data-color-map-component-id'));
 
     if (colorMapComponent) {
       area.data('mask', new pageflow.linkmapPage.Mask({

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

@@ -23,7 +23,7 @@ pageflow.linkmapPage.ColorMap = (function() {
 
     this.areaAttributes = function() {
       return {
-        mask_perma_id: this.permaId,
+        color_map_component_id: this.permaId,
         top: attributes.top / colorMapHeight * 100.0,
         left: attributes.left / colorMapWidth * 100.0,
         height: attributes.height / colorMapHeight * 100.0,

data/app/helpers/pageflow/linkmap_page/areas_helper.rb

@@ -32,14 +32,15 @@ module Pageflow
       end
 
       def linkmap_area_background_image_div(prefix, attributes, configuration, color_map_file)
+        color_map_component_id = attributes['color_map_component_id'] || attributes['mask_perma_id']
         if color_map_file &&
-           attributes['mask_perma_id'].present? &&
-           attributes['mask_perma_id'].split(':').first.to_i == color_map_file.id
+          color_map_component_id.present? &&
+          color_map_component_id.split(':').first.to_i == color_map_file.id
           background_image_div(configuration,
                                "linkmap_masked_#{prefix}_image",
                                class: "#{prefix}_image",
                                file_type: 'pageflow_linkmap_page_masked_image_files',
-                               style_group: attributes['mask_perma_id'].split(':').last)
+                               style_group: color_map_component_id.split(':').last)
         else
           background_image_div(configuration,
                                "#{prefix}_image",
@@ -90,7 +91,8 @@ module Pageflow
         end
 
         def data_attributes
-          mask_perma_id = background_type != 'hover_video' && attributes[:mask_perma_id]
+          color_map_component_id = background_type != 'hover_video' &&
+                                   (attributes[:color_map_component_id] || attributes[:mask_perma_id])
           audio_file_id = attributes[:target_id]
 
           {
@@ -98,7 +100,7 @@ module Pageflow
             target_id: attributes[:target_id],
             audio_file: audio_file_id.present? ? "#{audio_file_id}.area_#{index}" : nil,
             page_transition: attributes[:page_transition],
-            mask_perma_id: mask_perma_id,
+            color_map_component_id: color_map_component_id,
             width: attributes[:width],
             height: attributes[:height]
           }.delete_if { |key, value| value.blank? }

data/config/locales/de.yml

@@ -2,11 +2,11 @@ de:
   activerecord:
     attributes:
       pageflow/linkmap_page/area:
+        color_map_component_id: Maske
         inverted: Invertieren
         link_description: 'Linkbeschreibung: Text'
         link_title: 'Linkbeschreibung: Titel'
         marker: Linkmarkierung
-        mask_perma_id: Maske
         name: Bezeichnung
         page_transition: Seitenwechsel-Animation
         target_id: Ziel
@@ -331,11 +331,11 @@ de:
           areas: Bereiche
       inline_help:
         pageflow/linkmap_page/area:
+          color_map_component_id: Farbiger Bereich im Maskenbild, der die Form des Hotspots bestimmt.
+          color_map_component_id_disabled: Farbiger Bereich im Maskenbild, der die Form des Hotspots bestimmt. Nur verfügbar, wenn ein Masken-Bild im 'Dateien'-Tab der Hotspot-Seite festgelegt wurde und als Panorama-Typ nicht 'Hover Video' ausgewählt wurde.
           inverted: Dunkle Piktogramme für die Verwendung auf hellen Hintergründen anzeigen.
           link_title: Die Beschreibung wird in einem Overlay angezeigt, wenn sich der Cursor über dem Hotspot befindet.
           marker: Wähle die visuelle Darstellung des Hotspots.
-          mask_perma_id: Farbiger Bereich im Maskenbild, der die Form des Hotspots bestimmt.
-          mask_perma_id_disabled: Farbiger Bereich im Maskenbild, der die Form des Hotspots bestimmt. Nur verfügbar, wenn ein Masken-Bild im 'Dateien'-Tab der Hotspot-Seite festgelegt wurde und als Panorama-Typ nicht 'Hover Video' ausgewählt wurde.
           name: Gib hier eine Bezeichnung ein, um später bei in der Verweis-Übersicht direkt zu erkennen, um welchen Verweis es sich handelt. Die Bezeichnung ist für die Leser nicht sichtbar.
           page_transition: Wähle hier den Effekt, der beim Übergang zur Zielseite des Verweises benutzt werden soll.
           target_id: Objekt auf das der Hotspot verlinkt.

data/config/locales/en.yml

@@ -2,11 +2,11 @@ en:
   activerecord:
     attributes:
       pageflow/linkmap_page/area:
+        color_map_component_id: Mask
         inverted: Invert
         link_description: Link decription text
         link_title: Link description title
         marker: Link display
-        mask_perma_id: Mask
         name: Label
         page_transition: Page transition
         target_id: Target
@@ -291,11 +291,11 @@ en:
           areas: Areas
       inline_help:
         pageflow/linkmap_page/area:
+          color_map_component_id: Colored area inside mask image which determines the shape of the hotspot.
+          color_map_component_id_disabled: Colored area inside mask image which determines the shape of the hotspot. Only available if a mask image has been selected on the hotspot page's 'Files' tab and the panorama type is not 'Hover video'.
           inverted: Display dark pictograms to improve visibility on light backgrounds.
           link_title: The description is displayed inside an overlay when the cursor hovers the hotspot.
           marker: 'Choose the hotspot''s visual appearance. '
-          mask_perma_id: Colored area inside mask image which determines the shape of the hotspot.
-          mask_perma_id_disabled: Colored area inside mask image which determines the shape of the hotspot. Only available if a mask image has been selected on the hotspot page's 'Files' tab and the panorama type is not 'Hover video'.
           name: Choose a label to recognize the link within the overview. This label is for your orientation only and will not be displayed to the reader.
           page_transition: Choose the animation, that will be used to transition to the link's target page.
           target_id: Object the hotspot links to.

data/lib/pageflow/linkmap_page/paperclip_processors/color_mask.rb

@@ -41,7 +41,7 @@ module Pageflow
         end
 
         def with_color_map(&block)
-          PaperclipTempfile.for(color_map_attachment, &block)
+          Pageflow::LinkmapPage::PaperclipTempfile.for(color_map_attachment, &block)
         end
 
         def color_map_attachment

data/lib/pageflow/linkmap_page/paperclip_processors/colors.rb

@@ -163,7 +163,7 @@ module Pageflow
         end
 
         def with_progress(steps:)
-          progress = Progress.new(steps: steps) do |percent|
+          progress = Pageflow::LinkmapPage::Progress.new(steps: steps) do |percent|
             if options[:progress_callback]
               attachment.instance.send(options[:progress_callback], percent)
             end

data/lib/pageflow/linkmap_page/version.rb

@@ -1,5 +1,5 @@
 module Pageflow
   module LinkmapPage
-    VERSION = '2.0.0'.freeze
+    VERSION = '2.1.0'.freeze
   end
 end

data/lib/tasks/pageflow_linkmap_page_tasks.rake

@@ -41,7 +41,7 @@ module Pageflow
           color_map_file = color_map_file_for(color_map_image_file, revision)
           page.configuration['linkmap_color_map_file_id'] = color_map_file.id
 
-          hover_image_file = Pageflow::ImageFile.find_by_id(page.configuration['hover_image_id'])
+          hover_image_file = ImageFile.find_by_id(page.configuration['hover_image_id'])
 
           if hover_image_file
             puts "-- Masked image file for hover image file #{hover_image_file.id}"
@@ -100,9 +100,9 @@ module Pageflow
         areas = page.configuration['linkmap_areas'] || []
 
         page.configuration['linkmap_areas'] = areas.map do |area_attributes|
-          old_mask_perma_id = area_attributes['mask_perma_id']
+          mask_perma_id = area_attributes['mask_perma_id']
 
-          if old_mask_perma_id && !area_attributes['old_mask_perma_id']
+          if mask_perma_id && !area_attributes['color_map_component_id']
             sprite_id = page.configuration.fetch('linkmap_masks').fetch('id')
             colors =
               page
@@ -112,11 +112,10 @@ module Pageflow
               .fetch('c')
               .map { |component| component['c'] }
 
-            area_attributes.merge(old_mask_perma_id: old_mask_perma_id,
-                                  mask_perma_id: convert_mask_perma_id(old_mask_perma_id,
-                                                                       colors,
-                                                                       color_map_file,
-                                                                       sprite_id))
+            area_attributes.merge(color_map_component_id: convert_mask_perma_id(mask_perma_id,
+                                                                                colors,
+                                                                                color_map_file,
+                                                                                sprite_id))
           else
             area_attributes
           end

data/spec/helpers/pageflow/linkmap_page/areas_helper_spec.rb

@@ -36,7 +36,7 @@ module Pageflow
           color_map_file = create(:color_map_file)
           masked_image_file = create(:masked_image_file)
           configuration = {
-            'linkmap_areas' => [{'mask_perma_id' => "#{color_map_file.id}:aaa"}],
+            'linkmap_areas' => [{'color_map_component_id' => "#{color_map_file.id}:aaa"}],
             'hover_image_id' => 5,
             'linkmap_color_map_file_id' => color_map_file.id,
             'linkmap_masked_hover_image_id' => masked_image_file.id
@@ -62,13 +62,13 @@ module Pageflow
           expect(html).to have_selector('a div[class~="image_panorama_5"]')
         end
 
-        it 'does not use masked hover image if area mask perma id references other image' do
+        it 'does not use masked hover image if area color map component id references other image' do
           entry = create(:entry)
           masked_image_file = create(:masked_image_file)
           color_map_file = create(:color_map_file)
           other_id = color_map_file.id + 1
           configuration = {
-            'linkmap_areas' => [{'mask_perma_id' => "#{other_id}:aaa"}],
+            'linkmap_areas' => [{'color_map_component_id' => "#{other_id}:aaa"}],
             'hover_image_id' => 5,
             'linkmap_masked_hover_image_id' => masked_image_file.id
           }
@@ -92,7 +92,7 @@ module Pageflow
           color_map_file = create(:color_map_file)
           masked_image_file = create(:masked_image_file)
           configuration = {
-            'linkmap_areas' => [{'mask_perma_id' => "#{color_map_file.id}:aaa"}],
+            'linkmap_areas' => [{'color_map_component_id' => "#{color_map_file.id}:aaa"}],
             'hover_image_id' => 5,
             'linkmap_color_map_file_id' => color_map_file.id,
             'linkmap_masked_visited_image_id' => masked_image_file.id
@@ -104,25 +104,51 @@ module Pageflow
           expect(html).to have_selector("a div[class~='#{image_class}']")
         end
 
-        it 'sets data-mask-perma-id attribute if area has mask_perma_id' do
+        it 'sets data-color-map-component-id attribute if area has color_map_component_id' do
           entry = create(:entry)
-          configuration = {'linkmap_areas' => [{'mask_perma_id' => '1:aaa'}]}
+          configuration = {'linkmap_areas' => [{'color_map_component_id' => '1:aaa'}]}
 
           html = helper.linkmap_areas_div(entry, configuration)
 
-          expect(html).to have_selector('a[data-mask-perma-id="1:aaa"]')
+          expect(html).to have_selector('a[data-color-map-component-id="1:aaa"]')
         end
 
-        it 'does not set data-mask-perma-id attribute if background type is hover_video' do
+        it 'uses color map component id if present, preceding mask perma id' do
           entry = create(:entry)
+          color_map_file_1 = create(:color_map_file)
+          color_map_file_2 = create(:color_map_file)
           configuration = {
-            'linkmap_areas' => [{'mask_perma_id' => '1:aaa'}],
+            'linkmap_areas' => [{'color_map_component_id' => "#{color_map_file_2.id}:aaa",
+                                 'mask_perma_id' => "#{color_map_file_1.id}:aaa"}]
+          }
+
+          html = helper.linkmap_areas_div(entry, configuration)
+
+          expect(html).to have_selector("a[data-color-map-component-id='#{color_map_file_2.id}:aaa']")
+        end
+
+        it 'uses mask perma id as fallback if present and color map component id is blank' do
+          entry = create(:entry)
+          color_map_file = create(:color_map_file)
+          configuration = {
+            'linkmap_areas' => [{'mask_perma_id' => "#{color_map_file.id}:aaa"}]
+          }
+
+          html = helper.linkmap_areas_div(entry, configuration)
+
+          expect(html).to have_selector("a[data-color-map-component-id='#{color_map_file.id}:aaa']")
+        end
+
+        it 'does not set data-color-map-component-id attribute if background type is hover_video' do
+          entry = create(:entry)
+          configuration = {
+            'linkmap_areas' => [{'color_map_component_id' => '1:aaa'}],
             'background_type' => 'hover_video'
           }
 
           html = helper.linkmap_areas_div(entry, configuration)
 
-          expect(html).not_to have_selector('a[data-mask-perma-id]')
+          expect(html).not_to have_selector('a[data-color-map-component-id]')
         end
       end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-linkmap-page
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.0
 platform: ruby
 authors:
 - Codevise Solutions Ltd.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-12-10 00:00:00.000000000 Z
+date: 2019-01-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow
@@ -351,7 +351,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.5
+rubygems_version: 2.7.8
 signing_key: 
 specification_version: 4
 summary: Pageflow page type for a page that contains customizable link areas