pageflow-linkmap-page 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2ace1b5edf88295b6d1e8d602bdf11cfd4f28800
-  data.tar.gz: f264b4eac26073ef030b801d3cf17e34299030ee
+  metadata.gz: 4b73e3d49c82b5876fce90056bcb4fe58771fc34
+  data.tar.gz: 6d38604747a162226fc45fd9b2b6c1d56c596ea8
 SHA512:
-  metadata.gz: f0b5f204c209625f2621577553bfaf9626ef70d74b93eaabdf8745948a76a5c37c5cec3b18c333a0c6f6bc2743e2c8ad0bcb33d3ed82de46073b36db18a472fe
-  data.tar.gz: e37fc9d1c98a09d9e562beb7324985482c508c985cd736b60553ef68e7ebae30498e8312a9955ca2a26805cdf1669a2bb8b14f506bdf556100fd27e4bfd3a861
+  metadata.gz: 9a18d92640f24a2539bd1d4f4c9742d7549cdc5c86e56cb7087be871816787f28568e6fb291fdcdee800ff4e0e4cfea87e415127540e8e83ffb9609d9caee176
+  data.tar.gz: 84e8646c2e3ca811472f92adc70b6f2df67a3146e71775003aab7b298ce1e38dd95368f0fa9f1239baf41efe244dfc0959825f9561899874802f4e0c5a018be7

data/CHANGELOG.md

@@ -1,34 +1,20 @@
 # CHANGELOG
 
-### Version 1.0.0
+### Version 1.1.0
 
-2017-08-11
+2017-10-09
 
-[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/0-2-stable...v1.0.0)
+[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/1-0-stable...v1.1.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))
+- Fix hover video variant in published entry
+  ([#29](https://github.com/codevise/pageflow-linkmap-page/pull/29))
+- Make mask image url template generation more robust
+  ([#30](https://github.com/codevise/pageflow-linkmap-page/pull/30))
+- Improve mask features of hotspot page
+  ([#28](https://github.com/codevise/pageflow-linkmap-page/pull/28))
+- Ensure pageflow 12 is used in tests
+  ([#27](https://github.com/codevise/pageflow-linkmap-page/pull/27))
 
 See
-[0-2-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/0-2-stable/CHANGELOG.md)
+[1-0-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/1-0-stable/CHANGELOG.md)
 for previous changes.

data/Gemfile

@@ -5,10 +5,5 @@ gemspec
 
 gem 'state_machine', git: 'https://github.com/codevise/state_machine.git'
 
-gem 'pageflow', '0.11.3'
-gem 'pageflow-support', '0.11.3'
-
-gem 'teaspoon', git: 'https://github.com/modeset/teaspoon'
-
-gem "spring-commands-rspec", group: :development
-gem "spring-commands-teaspoon", group: :development
+gem 'spring-commands-rspec', group: :development
+gem 'spring-commands-teaspoon', group: :development

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

@@ -63,8 +63,10 @@
   }
 
   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) {
@@ -78,6 +80,7 @@
             alert(I18n.t(error.i18nKey));
           }
           else {
+            alert(I18n.t('pageflow.linkmap_page.errors.mask_image_failed'));
             throw(error);
           }
         }

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

@@ -10,16 +10,28 @@ pageflow.linkmapPage.StoredMaskSprite = Backbone.Model.extend({
 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()
-      });
+      try {
+        var storedMaskSprite = new pageflow.linkmapPage.StoredMaskSprite({
+          image_file_id: imageFileId,
+          attachment: masks.getSpriteDataUrl()
+        });
 
-      storedMaskSprite.save(null, {
-        success: function() {
-          deferred.resolve(masks.serialize(storedMaskSprite.id));
-        }
-      });
+        storedMaskSprite.save(null, {
+          success: function() {
+            deferred.resolve(masks.serialize(storedMaskSprite.id));
+          },
+
+          error: function() {
+            deferred.reject({
+              message: 'Error saving mask sprite to the server.',
+              i18nKey: 'pageflow.linkmap_page.errors.saving_mask_image_failed'
+            });
+          }
+        });
+      }
+      catch (e) {
+        deferred.reject(e);
+      }
     }, deferred.reject);
   }).promise();
 };

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

@@ -36,7 +36,7 @@
         var area = widget.areaAt(widget.positionFromEvent(event));
 
         if (area.length) {
-          area.first().trigger('linkmapareaclick');
+          area.first().trigger($.Event('linkmapareaclick', {originalEvent: event}));
         }
         else {
           widget._trigger('backgroundclick');
@@ -45,18 +45,6 @@
         return false;
       });
 
-      this.element.on('touchstart', function(event) {
-        var area = widget.areaAt(widget.positionFromEvent(event.originalEvent.touches[0]));
-
-        var areaEvent = jQuery.Event('linkmapareatouchstart');
-
-        area.first().trigger(areaEvent);
-
-        if (areaEvent.isDefaultPrevented()) {
-          event.preventDefault();
-        }
-      });
-
       this.element.on('mousemove mouseleave', function(event) {
         widget.updateHoverStates(event);
       });

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

@@ -6,7 +6,12 @@ $.fn.linkmapAreaRedraw = function(options) {
     var mask = options.masks && options.masks.findByPermaId(area.attr('data-mask-id'));
     area.data('mask', mask || null);
 
-    var canvas = area.find(options.target)[0];
+    var canvas = area.find('canvas').filter(options.target)[0];
+
+    if (!canvas) {
+      return;
+    }
+
     var context = canvas.getContext('2d');
 
     if (options.image) {

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

@@ -63,21 +63,35 @@ pageflow.linkmapPage.ColorMap = (function() {
     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 (data[i + 3] > 0) {
+        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
+              bottom: y + 1,
+              longestStreak: currentStreakLength
             };
 
             components.push(component);
@@ -87,13 +101,18 @@ pageflow.linkmapPage.ColorMap = (function() {
             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);
           }
         }
       }
     }
 
-    if (components.length > 20) {
-      throw tooManyComponentsError();
+    components = _(components).select(function(component) {
+      return component.longestStreak > 7;
+    });
+
+    if (components.length === 0) {
+      throw noComponentsError();
     }
 
     return new ColorMap(width, height, _(components).map(function(component) {
@@ -111,9 +130,30 @@ pageflow.linkmapPage.ColorMap = (function() {
     }));
   };
 
-  function tooManyComponentsError() {
-    var error = new Error('Too many color components.');
-    error.i18nKey = 'pageflow.linkmap_page.color_map.too_many_components';
+  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);
+  }
+
+  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];
+  }
+
+  function noComponentsError() {
+    var error = new Error('No big enough components detected.');
+    error.i18nKey = 'pageflow.linkmap_page.errors.no_big_enough_color_map_components';
 
     return error;
   }

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

@@ -27,6 +27,9 @@ pageflow.linkmapPage.ImageData = (function() {
 
           data[i + 3] = 0;
         }
+        else {
+          data[i + 3] = 255;
+        }
       }
 
       destinationContext.putImageData(imageData, destinationX, destinationY);
@@ -42,10 +45,23 @@ pageflow.linkmapPage.ImageData = (function() {
     };
 
     this.toDataURL = function() {
-      return canvas.toDataURL();
+      var result = canvas.toDataURL();
+
+      if (!result.match(/^data:image/)) {
+        throw new invalidImageDataUrl();
+      }
+
+      return result;
     };
   }
 
+  function invalidImageDataUrl() {
+    var error = new Error('Invalid data url from canvas.');
+    error.i18nKey = 'pageflow.linkmap_page.errors.invalid_image_data';
+
+    return error;
+  }
+
   ImageData.load = function(url) {
     return pageflow.linkmapPage.RemoteImage.load(url).then(function(image) {
       var imageData = new ImageData(image.width(), image.height());

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

@@ -1,38 +1,54 @@
-pageflow.linkmapPage.RemoteImage = function(url, image) {
-  this.width = function() {
-    return image.width;
-  };
+pageflow.linkmapPage.RemoteImage = (function() {
+  function RemoteImage(url, image) {
+    this.width = function() {
+      return image.width;
+    };
 
-  this.height = function() {
-    return image.height;
-  };
+    this.height = function() {
+      return image.height;
+    };
+
+    this.draw = function(canvas, options) {
+      options = options || {};
+      var context = canvas.getContext('2d');
+
+      if (options.disableImageSmoothing) {
+        context.imageSmoothingEnabled = false;
+      }
+
+      context.drawImage(image,
+                        0,
+                        0,
+                        canvas.width,
+                        canvas.height);
+    };
+  }
+
+  RemoteImage.load = function(url) {
+    return new $.Deferred(function(deferred) {
+      var image = new Image();
 
-  this.draw = function(canvas, options) {
-    options = options || {};
-    var context = canvas.getContext('2d');
+      image.onload = onLoad;
+      image.onerror = onError;
+      image.crossOrigin = 'Anonymous';
+      image.src = url;
 
-    if (options.disableImageSmoothing) {
-      context.imageSmoothingEnabled = false;
-    }
+      function onLoad() {
+        deferred.resolve(new pageflow.linkmapPage.RemoteImage(url, image));
+      }
 
-    context.drawImage(image,
-                      0,
-                      0,
-                      canvas.width,
-                      canvas.height);
+      function onError() {
+        deferred.reject(loadError(url));
+      }
+    }).promise();
   };
-};
 
-pageflow.linkmapPage.RemoteImage.load = function(url) {
-  return new $.Deferred(function(deferred) {
-    var image = new Image();
+  return RemoteImage;
 
-    image.onload = onLoad;
-    image.crossOrigin = 'Anonymous';
-    image.src = url;
+  function loadError(url) {
+    var error = new Error('Error while loading ' + url + '.');
+    error.i18nKey = 'pageflow.linkmap_page.errors.loading_remote_image_failed';
 
-    function onLoad() {
-      deferred.resolve(new pageflow.linkmapPage.RemoteImage(url, image));
-    }
-  }).promise();
-};
+    return error;
+  }
+}());

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

@@ -22,6 +22,10 @@
       this.overlayTitle = pageElement.find('.description_overlay .link_title');
       this.overlayDescription = pageElement.find('.description_overlay .link_description');
 
+      this.touchIndicator = pageElement.find('.touch_indicator');
+      this.externalLinkLoadingIndicator = pageElement.find('.external_link_loading_indicator');
+      this.globalIndicators = this.touchIndicator.add(this.externalLinkLoadingIndicator);
+
       this.startScrollPosition = _.clone(this.options.startScrollPosition);
 
       this.currentScrollPosition = null;
@@ -48,6 +52,7 @@
       pageElement.on('click linkmapbackgroundclick', function() {
         that.overlayBox.removeClass('active');
         that.activeAreas.removeClass('hover hover_mobile');
+        that.globalIndicators.hide();
       });
 
       $('body').on('linkmaparealeave', '.hover_area', function() {
@@ -61,8 +66,8 @@
       that.activeAreas.each(function() {
         var area = $(this);
 
-        if (pageflow.browser.has('mobile platform')) {
-          area.on('linkmapareatouchstart', function(e) {
+        area.on('linkmapareaclick', function(event) {
+          if (pageflow.browser.has('mobile platform')) {
             if (area.hasClass('hover_mobile')) {
               that.activeAreas.removeClass('active');
               area.addClass('active');
@@ -72,16 +77,23 @@
               area.addClass('hover hover_mobile');
 
               positionOverlay($(this));
+
+              if (!area.hasClass('dynamic_marker')) {
+                displayTouchIndicator(event.originalEvent);
+              }
+
               return false;
             }
-          });
-        }
-        else {
-          area.on('linkmapareaclick', function(e) {
+          }
+          else {
             that.activeAreas.removeClass('active');
             area.addClass('active');
-          });
-        }
+          }
+
+          if (!area.hasClass('dynamic_marker') && area.hasClass('external_site_area')) {
+            displayExternalLinkLoadingIndicator(event.originalEvent);
+          }
+        });
       });
 
       var positionOverlay = function(area) {
@@ -154,7 +166,35 @@
             that.overlayInnerBox.css('top', '0px');
           }
         }
-      }
+      };
+
+      var displayExternalLinkLoadingIndicator = function(event) {
+        positionGlobalIndicator(that.externalLinkLoadingIndicator, event);
+        that.externalLinkLoadingIndicator.show();
+      };
+
+      var displayTouchIndicator = function(event) {
+        positionGlobalIndicator(that.touchIndicator, event);
+        animateTouchIndicator();
+      };
+
+      var animateTouchIndicator = function() {
+        that.touchIndicator.hide();
+
+        setTimeout(function() {
+          that.touchIndicator.show();
+        }, 500);
+      };
+
+      var positionGlobalIndicator = function(indicator, event) {
+        var parentClientRect = that.panoramaWrapper[0].getBoundingClientRect();
+        var touch = event.touches ? event.touches[0] : event;
+
+        indicator.css({
+          left: touch.clientX - parentClientRect.left,
+          top: touch.clientY - parentClientRect.top
+        });
+      };
 
       this.refresh();
     },

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_panorama/get_panorama_size.js

@@ -1,5 +1,5 @@
 pageflow.linkmapPage.getPanoramaSize = (function() {
-  var MIN_SCALING_SIZE = 80;
+  var MIN_SCALING_SIZE = 30;
   var ENVIRONMENT_MARGIN = 1.2;
 
   return function getPanoramaSize(options) {

data/app/assets/stylesheets/pageflow/linkmap_page.scss

@@ -220,44 +220,46 @@
     }
   }
 
-  .external_site_area {
+  .external_link_loading_indicator,
+  .external_site_area .inline_loading_spinner {
+    position: absolute;
+    height: 100%;
+    width: 50%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
 
-    .inline_loading_spinner {
+    .circle_inner {
       position: absolute;
       height: 100%;
-      width: 50%;
+      width: 100%;
       top: 0;
       left: 0;
       overflow: hidden;
+      @include transform(rotate(0));
 
-      .circle_inner {
+      .circle_innerst {
         position: absolute;
         height: 100%;
-        width: 100%;
+        width: 200%;
         top: 0;
         left: 0;
-        overflow: hidden;
-        @include transform(rotate(0));
-
-        .circle_innerst {
-          position: absolute;
-          height: 100%;
-          width: 200%;
-          top: 0;
-          left: 0;
-          border: 3px solid green;
-          box-sizing: border-box;
-          border-radius: 50%;
-        }
+        box-sizing: border-box;
+        border-radius: 50%;
       }
-
-      @include inline-loading-spinner;
     }
 
-    &.active.target_self {
-      .inline_loading_spinner {
-        display: block;
-      }
-    }
+    @include inline-loading-spinner;
+  }
+
+  .external_site_area.active.target_self.dynamic_marker .inline_loading_spinner {
+    display: block;
+  }
+
+  .external_link_loading_indicator {
+    height: 150px;
+    width: 75px;
+    margin-top: -75px;
+    z-index: 2;
   }
 }

data/app/assets/stylesheets/pageflow/linkmap_page/themes/default.scss

@@ -1,5 +1,25 @@
 @include pageflow-page-type-pictograms("linkmap_page");
 
+@include keyframes(linkmap_touch_indicator_animation) {
+  0% {
+    @include transform(translate(-50%, -50%) scale(1));
+    opacity: 1;
+  }
+
+  25% {
+    @include transform(translate(-50%, -50%) scale(1.3));
+  }
+
+  50% {
+    @include transform(translate(-50%, -50%) scale(1));
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 .linkmap_page {
   $linkmap-icon-font: "FontAwesome" !default;
   $linkmap-icon-line-height: 1.1em !default;
@@ -19,38 +39,46 @@
   $linkmap-audio-progress-color: $linkmap-main-color !default;
   $linkmap-audio-current-time-color: $linkmap-overlay-text-color !default;
 
-  .hover_area.page_area, .hover_area.external_site_area {
-    .linkmap_marker {
-      &:before {
-        content: $linkmap-marker-icon;
-        font-family: $linkmap-icon-font;
-        color: white;
-        font-size: 30px;
-        background-color: rgba(255, 255, 255, 0.3);
-        padding: 10px;
-        border-radius: 50%;
-        width: 35px;
-        height: 35px;
-        @include transform(translate(-50%,-50%));
-        left: 50%;
-        top: 50%;
-        position: absolute;
-        text-align: center;
-        opacity: 0;
-        line-height: $linkmap-icon-line-height;
-        @include transition(0.5s);
-      }
-    }
+  .hover_area.page_area .linkmap_marker:before,
+  .hover_area.external_site_area .linkmap_marker:before,
+  .touch_indicator:before {
+    content: $linkmap-marker-icon;
+    font-family: $linkmap-icon-font;
+    color: white;
+    font-size: 30px;
+    background-color: rgba(255, 255, 255, 0.3);
+    padding: 10px;
+    border-radius: 50%;
+    width: 35px;
+    height: 35px;
+    @include transform(translate(-50%,-50%));
+    left: 50%;
+    top: 50%;
+    position: absolute;
+    text-align: center;
+    opacity: 0;
+    line-height: $linkmap-icon-line-height;
+    @include transition(0.5s);
+  }
 
-    &.hover_mobile {
-      .linkmap_marker {
-        &:before {
-          opacity: 1;
-          background-color: rgba(0,0,0,0.7);
-          color: $linkmap-icon-color;
-        }
-      }
-    }
+  .hover_area.page_area.hover_mobile.dynamic_marker .linkmap_marker:before,
+  .hover_area.external_site_area.hover_mobile.dynamic_marker .linkmap_marker:before,
+  .touch_indicator:before {
+    opacity: 1;
+    background-color: rgba(0,0,0,0.7);
+    color: $linkmap-icon-color;
+  }
+
+  .touch_indicator {
+    display: none;
+    position: absolute;
+    z-index: 2;
+    opacity: 0;
+    @include animation(linkmap_touch_indicator_animation 1s);
+  }
+
+  .external_link_loading_indicator .circle_innerst {
+    border: 4px solid $linkmap-audio-progress-color;
   }
 
   .linkmap_audio_player_controls {

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

@@ -8,7 +8,7 @@ module Pageflow
         visited_image_file = Pageflow::ImageFile.find_by_id(configuration['visited_image_id'])
 
         mask_sprite_url_template = MaskSprite.new(id: 1, attachment_file_name: 'data').attachment.url
-          .gsub(%r'(\d{3}/)+', ':id_partition/')
+          .gsub(%r'/(\d{3}/)+', '/:id_partition/')
 
         render('pageflow/linkmap_page/areas/div',
                entry: entry,

data/app/views/pageflow/linkmap_page/page.html.erb

@@ -37,6 +37,12 @@
               <div class="link_description"></div>
             </div>
           </div>
+          <div class="touch_indicator"></div>
+          <div class="external_link_loading_indicator">
+            <div class="circle_inner">
+              <div class="circle_innerst"></div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

data/config/locales/de.yml

@@ -23,8 +23,6 @@ de:
           text_only: Nur Text
   pageflow:
     linkmap_page:
-      color_map:
-        too_many_components: Das ausgewählte Bild enthält zu viele verschiedene Farbtöne. Es können maximal 20 Bereiche durch das Maskenbild bestimmt werden. Stellen Sie sicher, dass bei der Erstellung des Maskenbildes keine Kantenglättung verwendet wurde, da dies die Zahl der im Bild auftretenden Farbtöne stark erhöhen kann.
       default_page_transition: "(Standard)"
       editor:
         area_types:
@@ -38,11 +36,9 @@ de:
             destroy: Löschen
           embedded:
             area_item:
-              edit: DELETE
               hide_marker: Linkmarkierung deaktivieren
               set_mask: Maske auswählen
               show_marker: Linkmarkierung aktivieren
-              toggle_marker: DELETE
               unset_mask: Frei positionierbar machen
           file_area_item:
             edit: Bearbeiten
@@ -74,6 +70,12 @@ de:
             drag_hint: Wähle einen Bereich für den Hotspot durch Klicken und Ziehen mit der Maus.
             select_mask_hint: Klicke auf einen der farbigen Bereiche des Masken-Bildes, um einen Bereich für den Hotspot auszuwählen.
             select_mask_or_drag_hint: Klicke auf einen der farbigen Bereiche des Masken-Bildes oder wähle einen frei positionierten Bereich durch Klicken und Ziehen mit der Maus.
+      errors:
+        invalid_image_data: Bei der Erkennung der Farbbereiche im Maskenbild ist ein Fehler aufgetreten. Stellen Sie sicher, dass die farbigen Bereiche im Maskenbild begrenzt und alle anderen Teile des Bildes transparent sind.
+        loading_remote_image_failed: Beim Laden des Bildes ist ein Fehler aufgetreten.
+        mask_image_failed: Beim Verarbeiten des Maskenbildes ist ein Fehler aufgetreten.
+        no_big_enough_color_map_components: Es konnten keine Farb-Bereiche erkannt werden. Stellen Sie sicher, dass die Bereiche midestens 7x7 Pixel groß sind.
+        saving_mask_image_failed: Beim Speichern des Maskenbildes ist ein Fehler aufgetreten.
       help_entries:
         page_type:
           menu_item: Hotspots

data/config/locales/en.yml

@@ -23,8 +23,6 @@ en:
           text_only: Text only
   pageflow:
     linkmap_page:
-      color_map:
-        too_many_components: The selected image contains too many different color values. There is a maximal number of 20 areas that can be determined via the mask image. Make sure that anti aliasing was turned off while creating the mask image. Anti aliasing leads to color gradients inside the image which prevent usage as mask image.
       default_page_transition: "(Default)"
       editor:
         area_types:
@@ -38,11 +36,9 @@ en:
             destroy: Delete
           embedded:
             area_item:
-              edit: DELETE
               hide_marker: Hide marker
               set_mask: Select mask
               show_marker: Show marker
-              toggle_marker: DELETE
               unset_mask: Detach from mask
           file_area_item:
             edit: Edit
@@ -74,6 +70,12 @@ en:
             drag_hint: Select the hotspot's dimension by clicking and dragging somewhere inside the panorama.
             select_mask_hint: Click on one of the colored areas of the mask image to determine the hotspots shape and position.
             select_mask_or_drag_hint: Click on one of the colored areas of the mask image or select the hotspot's dimensions by clicking and dragging somewhere inside the panorama.
+      errors:
+        invalid_image_data: There has been an error while identifying color components. Ensure color areas are bounded inside the image and all other parts of the image are transparent.
+        loading_remote_image_failed: Error while loading the image.
+        mask_image_failed: There was an error while processing the mask image.
+        no_big_enough_color_map_components: No color components identified. Ensure each component is at least 7x7 pixels big.
+        saving_mask_image_failed: There has been an error while saving the mask image.
       help_entries:
         page_type:
           menu_item: Hotspots

data/lib/pageflow/linkmap_page/version.rb

@@ -1,5 +1,5 @@
 module Pageflow
   module LinkmapPage
-    VERSION = '1.0.0'.freeze
+    VERSION = '1.1.0'.freeze
   end
 end

data/pageflow-linkmap-page.gemspec

@@ -21,6 +21,7 @@ Gem::Specification.new do |spec|
   spec.add_runtime_dependency 'pageflow', ['>= 0.10', '< 13']
   spec.add_runtime_dependency 'pageflow-external-links', ['>= 0.3', '< 2']
 
+  spec.add_development_dependency 'pageflow-support', '~> 12.0'
   spec.add_development_dependency 'bundler', '~> 1.0'
   spec.add_development_dependency 'rake', '~> 12.0'
   spec.add_development_dependency 'rspec-rails', '~> 3.0'

data/spec/controllers/pageflow/linkmap_page/mask_sprites_controller_spec.rb

@@ -15,7 +15,7 @@ module Pageflow
 
         it 'responds with success for member' do
           user = create(:user)
-          entry = create(:entry, with_member: user)
+          entry = create(:entry, with_editor: user)
           image_file = create(:image_file, used_in: entry.draft)
 
           sign_in(user)
@@ -29,7 +29,7 @@ module Pageflow
 
         it 'includes id of created mask sprite in response' do
           user = create(:user)
-          entry = create(:entry, with_member: user)
+          entry = create(:entry, with_editor: user)
           image_file = create(:image_file, used_in: entry.draft)
 
           sign_in(user)
@@ -45,7 +45,7 @@ module Pageflow
 
         it 'creates mask sprite for image' do
           user = create(:user)
-          entry = create(:entry, with_member: user)
+          entry = create(:entry, with_editor: user)
           image_file = create(:image_file, used_in: entry.draft)
 
           sign_in(user)
@@ -61,7 +61,7 @@ module Pageflow
 
         it 'does not recreate mask sprite if it already exists' do
           user = create(:user)
-          entry = create(:entry, with_member: user)
+          entry = create(:entry, with_editor: user)
           image_file = create(:image_file, used_in: entry.draft)
 
           sign_in(user)

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

@@ -51,6 +51,16 @@ module Pageflow
 
           expect(html).not_to have_selector('a[data-mask-id]')
         end
+
+        it 'renders attribute with url template for mask sprite' do
+          entry = create(:entry)
+          configuration = {}
+
+          html = helper.linkmap_areas_div(entry, configuration)
+
+          url_matcher = 'attachments/:id_partition/original'
+          expect(html).to have_selector("div[data-mask-sprite-url-template*='#{url_matcher}']")
+        end
       end
 
       describe '#linkmap_area' do

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-linkmap-page
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Codevise Solutions Ltd.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-11 00:00:00.000000000 Z
+date: 2017-10-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: pageflow
@@ -50,6 +50,20 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '2'
+- !ruby/object:Gem::Dependency
+  name: pageflow-support
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '12.0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement