pageflow-linkmap-page 1.5.0 → 2.0.0

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

@@ -22,10 +22,6 @@
       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;
@@ -33,40 +29,66 @@
       this.refresh();
 
       this.scroller.onScrollEnd(function() {
-        that.updateScrollPosition();
+        if (!that.options.disabled) {
+          that.updateScrollPosition();
+        }
       });
 
-      $(window).on('resize', function () {
-        that.centerToPoint(null, 0);
+      this._on(window, {
+        resize: function () {
+          that.centerToPoint(null, 0);
+        }
       });
 
-      this.element.on('mousemove', function(e) {
-        that.lastMouseMoveEvent = e;
-        that.calcAreaOpacity(that.activeAreas, e.pageX, e.pageY);
+      this._on({
+        mousemove: function(e) {
+          that.lastMouseMoveEvent = e;
+          that.calcAreaOpacity(that.activeAreas, e.pageX, e.pageY);
+        }
       });
 
-      pageElement.on('linkmapareaenter', '.hover_area', function() {
-        positionOverlay($(this));
+      this._on(pageElement, {
+        'linkmapareaenter .hover_area': function(event) {
+          var area = $(event.currentTarget);
+          area.addClass('hover');
+
+          positionOverlay(area);
+        },
+
+        'linkmaparealeave .hover_area': function(event) {
+          var area = $(event.currentTarget);
+          area.removeClass('hover');
+        },
+
+        'click': resetIndicatorsAndOverlays,
+        'linkmapbackgroundclick': resetIndicatorsAndOverlays
       });
 
-      pageElement.on('click linkmapbackgroundclick', function() {
-        that.overlayBox.removeClass('active');
-        that.activeAreas.removeClass('hover hover_mobile');
-        that.globalIndicators.hide();
+      this._on($('body'), {
+        'linkmaparealeave .hover_area': resetOverlays
       });
 
-      $('body').on('linkmaparealeave', '.hover_area', function() {
-        that.overlayBox.removeClass('active');
+      this._on(pageElement, {
+        'dragstart .hover_area': resetOverlays,
+        'resizestart .hover_area': resetOverlays
       });
 
-      pageElement.on('dragstart resizestart', '.hover_area', function() {
+      function resetIndicatorsAndOverlays() {
+        resetOverlays();
+        that.activeAreas.removeClass('hover hover_mobile');
+        that.options.areaIndicators.reset();
+      }
+
+      function resetOverlays() {
         that.overlayBox.removeClass('active');
-      });
+      }
 
       that.activeAreas.each(function() {
         var area = $(this);
 
-        area.on('linkmapareaclick', function(event) {
+        that._on(area, {linkmapareaclick: onAreaClick});
+
+        function onAreaClick(event) {
           if (pageflow.browser.has('mobile platform')) {
             if (area.hasClass('hover_mobile')) {
               that.activeAreas.removeClass('active');
@@ -76,11 +98,8 @@
               that.activeAreas.removeClass('hover hover_mobile');
               area.addClass('hover hover_mobile');
 
-              positionOverlay($(this));
-
-              if (!area.hasClass('dynamic_marker')) {
-                displayTouchIndicator(event.originalEvent);
-              }
+              positionOverlay($(event.currentTarget));
+              this.options.areaIndicators.displayForSelectedArea(area, event.originalEvent);
 
               return false;
             }
@@ -90,12 +109,8 @@
             area.addClass('active');
           }
 
-          if (!area.hasClass('dynamic_marker') &&
-              area.hasClass('external_site_area') &&
-              area.hasClass('target_self')) {
-            displayExternalLinkLoadingIndicator(event.originalEvent);
-          }
-        });
+          this.options.areaIndicators.displayForClickedArea(area, event.originalEvent);
+        }
       });
 
       var positionOverlay = function(area) {
@@ -170,35 +185,24 @@
         }
       };
 
-      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;
+      this.refresh();
+    },
 
-        indicator.css({
-          left: touch.clientX - parentClientRect.left,
-          top: touch.clientY - parentClientRect.top
-        });
-      };
+    _setOptions: function(options) {
+      var changed = (this.options.disabled !== options.disabled);
+      this._super(options);
 
-      this.refresh();
+      if (changed) {
+        if (this.options.disabled) {
+          this.panoramaWrapper.css({
+            left: 0,
+            top: 0
+          });
+        }
+        else {
+          this.refresh();
+        }
+      }
     },
 
     calcAreaOpacity: function(activeAreas, mX, mY) {
@@ -229,6 +233,10 @@
     },
 
     highlightAreas: function() {
+      if (this.options.disabled) {
+        return;
+      }
+
       var element = this.element;
       element.find('.linkmap_marker').addClass('teasing');
 
@@ -242,6 +250,10 @@
     },
 
     resetAreaHighlighting: function() {
+      if (this.options.disabled) {
+        return;
+      }
+
       var element = this.element;
 
       element.find('.linkmap_marker').removeClass('no_transition teasing');
@@ -298,6 +310,10 @@
     },
 
     refresh: function() {
+      if (this.options.disabled) {
+        return;
+      }
+
       this.keepingScrollPosition(function() {
         var pageElement = this.options.page;
 
@@ -340,6 +356,8 @@
 
         this.innerScrollerElement.removeClass('measuring');
         this.scroller.refresh();
+
+        this.activeAreas.addClass('enabled');
       });
     },
 
@@ -365,6 +383,10 @@
     },
 
     resetScrollPosition: function() {
+      if (this.options.disabled) {
+        return;
+      }
+
       this.centerToPoint(this.panoramaToScroller(this.startScrollPosition), 0);
     },
 

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

@@ -6,16 +6,30 @@
       var element = this.element;
       var scroller = this.options.scroller;
 
+      this.arrows = this.element.find('.linkmap-arrow');
+
       scroller.onScroll(toggle);
       scroller.onScrollEnd(toggle);
       toggle();
 
+      if (this.options.disabled) {
+        this.disable();
+      }
+
       function toggle() {
         element.toggleClass('can_scroll_left', Math.ceil(scroller.positionX()) < - margin);
         element.toggleClass('can_scroll_right', Math.floor(scroller.positionX()) > scroller.maxX() + margin);
         element.toggleClass('can_scroll_up', Math.ceil(scroller.positionY()) < - margin);
         element.toggleClass('can_scroll_down', Math.floor(scroller.positionY()) > scroller.maxY() + margin);
       }
+    },
+
+    disable: function() {
+      this.arrows.hide();
+    },
+
+    enable: function() {
+      this.arrows.show();
     }
   });
 }(jQuery));

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

@@ -4,6 +4,7 @@
   left: 0;
   width: 100%;
   height: 100%;
+  z-index: 1;
 
   canvas {
     position: absolute;
@@ -11,3 +12,8 @@
     left: 0;
   }
 }
+
+.with_mask .linkmap_area_outlines-canvas_wrapper {
+  display: block;
+  position: absolute;
+}

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

@@ -7,9 +7,19 @@
   z-index: 4;
   pointer-events: all;
 
+  .background_image,
+  .canvas_wrapper,
   canvas {
     position: absolute;
     top: 0;
     left: 0;
   }
+
+  .background_image {
+    opacity: 0.3;
+  }
+
+  .canvas_wrapper {
+    overflow: hidden;
+  }
 }

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

@@ -0,0 +1,31 @@
+$linkmap-mobile-info-box-background-color: rgba(17, 17, 17, 0.9) !default;
+
+$linkmap-mobile-info-box-text-color: #fff;
+
+.linkmap-mobile_info_box {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 2;
+  pointer-events: none;
+
+  &-inner {
+    background: $linkmap-mobile-info-box-background-color;
+  }
+
+  h3,
+  p {
+    width: auto;
+    margin: 10px 5% 0;
+    color: $linkmap-mobile-info-box-text-color;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
+
+  p {
+    font-size: 16px;
+  }
+}

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

@@ -0,0 +1,53 @@
+$linkmap-paginator-dot-color: rgba(255, 255, 255, 0.4);
+$linkmap-paginator-active-dot-color: #fff;
+
+.linkmap-paginator {
+  &-scroller {
+    margin-bottom: 38px;
+
+    > div {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &-pages {
+    position: absolute;
+    padding-bottom: 40px;
+  }
+
+  &-page_group {
+    float: left;
+  }
+
+  &-page {
+    float: left;
+    box-sizing: border-box;
+    padding-bottom: 5px;
+  }
+
+  &-dots {
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    @include transform(translateX(-50%));
+    @include transition(opacity 0.5s linear);
+    white-space: nowrap;
+
+    &.faded {
+      opacity: 0;
+    }
+  }
+
+  &-dot {
+    border: solid 3px $linkmap-paginator-dot-color;
+    border-radius: 3px;
+    display: inline-block;
+    margin: 0 3px;
+
+    &.active {
+      border-color: $linkmap-paginator-active-dot-color;
+    }
+  }
+}

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

@@ -1,6 +1,5 @@
 .linkmap_page {
   $arrow-margin: 30px;
-  $arrow-margin-with-default-navigation: 95px;
   $arrow-margin-mobile: 10px;
 
   .arrow_left,
@@ -74,6 +73,11 @@
     @include phone {
       right: $arrow-margin-mobile;
     }
+
+    .emulation_mode_phone & {
+      margin-right: 0;
+      right: $arrow-margin-mobile;
+    }
   }
 
   .arrow_up {

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

@@ -21,6 +21,9 @@
 }
 
 .linkmap_page {
+  @import "./default/paginator";
+  @import "./default/mobile_info_box";
+
   $linkmap-icon-font: "FontAwesome" !default;
   $linkmap-icon-line-height: 1.1em !default;
 

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

@@ -27,12 +27,24 @@
 
   @include user-select(none);
 
+  .backgroundArea {
+    background: #000;
+  }
+
+  .content {
+    pointer-events: none;
+  }
+
   .scroller {
     overflow: hidden;
 
     > div {
       min-height: 0;
     }
+
+    .emulation_mode_phone & {
+      margin-right: 0 !important;
+    }
   }
 
   .linkmap {
@@ -52,6 +64,8 @@
 
   .panorama_wrapper {
     position: absolute;
+    @include transition(transform 0.3s ease);
+    @include transform-origin(0 0);
   }
 
   .linkmap_areas {
@@ -62,6 +76,10 @@
     bottom: 0;
   }
 
+  .controls:before {
+    display: none;
+  }
+
   .panorama {
     height: 120%;
     width: auto;
@@ -109,7 +127,11 @@
     width: 20%;
     overflow: hidden;
     display: block;
-    pointer-events: all;
+    pointer-events: none;
+
+    &.enabled {
+      pointer-events: all;
+    }
 
     .hover_image,
     .visited_image {
@@ -183,7 +205,6 @@
     left: 0;
     top: 0;
     z-index: 1;
-    display: block;
     pointer-events: none;
     opacity: 0;
     max-width: 510px;
@@ -197,7 +218,6 @@
     @include transition(opacity 0.15s);
 
     &.active {
-      display: block;
       opacity: 1;
     }
 
@@ -216,6 +236,12 @@
     }
   }
 
+  &.hide_overlay_boxes {
+    .description_overlay {
+      display: none;
+    }
+  }
+
   .external_link_loading_indicator,
   .external_site_area .inline_loading_spinner {
     position: absolute;

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

@@ -4,24 +4,50 @@ module Pageflow
       include BackgroundImageHelper
 
       def linkmap_areas_div(entry, configuration)
-        hover_image_file = Pageflow::ImageFile.find_by_id(configuration['hover_image_id'])
-        visited_image_file = Pageflow::ImageFile.find_by_id(configuration['visited_image_id'])
+        color_map_file =
+          ColorMapFile.find_by_id(configuration['linkmap_color_map_file_id'])
+        masked_hover_image_file =
+          MaskedImageFile.find_by_id(configuration['linkmap_masked_hover_image_id'])
+        masked_visited_image_file =
+          MaskedImageFile.find_by_id(configuration['linkmap_masked_visited_image_id'])
 
-        mask_sprite_url_template = MaskSprite.new(id: 1, attachment_file_name: 'data').attachment.url
-          .gsub(%r'/(\d{3}/)+', '/:id_partition/')
+
+        hide_overlay_boxes =
+          configuration['mobile_panorama_navigation'] == 'pan_zoom' &&
+          configuration['hide_linkmap_overlay_boxes']
 
         render('pageflow/linkmap_page/areas/div',
                entry: entry,
                configuration: configuration,
+               color_map_file: color_map_file,
+               masked_hover_image_file: masked_hover_image_file,
+               masked_visited_image_file: masked_visited_image_file,
+               css_classes: [
+                 'linkmap_areas',
+                 hide_overlay_boxes ? 'hide_overlay_boxes' : nil
+               ].compact.join(' '),
                data_attributes: {
-                 hover_image_url: hover_image_file &&
-                   hover_image_file.attachment.url(:panorama_large),
-                 visited_image_url: visited_image_file &&
-                   visited_image_file.attachment.url(:panorama_large),
-                 mask_sprite_url_template: mask_sprite_url_template
+                 color_map_file_id: configuration['color_map_file_id']
                })
       end
 
+      def linkmap_area_background_image_div(prefix, attributes, configuration, color_map_file)
+        if color_map_file &&
+           attributes['mask_perma_id'].present? &&
+           attributes['mask_perma_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)
+        else
+          background_image_div(configuration,
+                               "#{prefix}_image",
+                               class: "#{prefix}_image",
+                               style_group: :panorama)
+        end
+      end
+
       def linkmap_area(entry, attributes, index, background_type = nil, &block)
         Link.new(self, entry, attributes.symbolize_keys, index, background_type).render(&block)
       end
@@ -64,7 +90,7 @@ module Pageflow
         end
 
         def data_attributes
-          mask_id = background_type != 'hover_video' && attributes[:mask_perma_id]
+          mask_perma_id = background_type != 'hover_video' && attributes[:mask_perma_id]
           audio_file_id = attributes[:target_id]
 
           {
@@ -72,7 +98,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_id: mask_id,
+            mask_perma_id: mask_perma_id,
             width: attributes[:width],
             height: attributes[:height]
           }.delete_if { |key, value| value.blank? }

data/app/jobs/pageflow/linkmap_page/process_source_image_file_job.rb

@@ -1,11 +1,11 @@
 module Pageflow
   module LinkmapPage
-    class ProcessSourceImageFileJob
-      @queue = :resizing
+    class ProcessSourceImageFileJob < ApplicationJob
+      queue_as :resizing
 
-      extend StateMachineJob
+      include StateMachineJob
 
-      def self.perform_with_result(file, _options)
+      def perform_with_result(file, _options)
         file.attachment = file.source_image_file.attachment
         file.save!
         :ok

data/app/views/pageflow/linkmap_page/areas/_div.html.erb

@@ -1,17 +1,23 @@
-<%= content_tag(:div, class: "linkmap_areas", data: data_attributes) do %>
+<%= content_tag(:div, class: css_classes, data: data_attributes) do %>
   <% (configuration['linkmap_areas'].presence || []).each_with_index do |attributes, index| %>
     <%= linkmap_area(entry, attributes, index, configuration['background_type']) do %>
-      <canvas class="visited_image"></canvas>
+      <%= linkmap_area_background_image_div('visited',
+                                            attributes,
+                                            configuration,
+                                            color_map_file) %>
 
       <% if configuration['background_type'] == 'hover_video' &&
             !Pageflow::ImageFile.find_by_id(configuration['hover_image_id']) %>
 
-        <%= background_image_div_with_size(configuration,
-                                           'panorama_video',
-                                           file_type: 'video_file',
-                                           class: 'hover_image') %>
+        <%= background_image_div(configuration,
+                                 'panorama_video',
+                                 file_type: 'video_file',
+                                 class: 'hover_image') %>
       <% else %>
-        <canvas class="hover_image"></canvas>
+        <%= linkmap_area_background_image_div('hover',
+                                              attributes,
+                                              configuration,
+                                              color_map_file) %>
       <% end %>
 
       <div class="linkmap_marker <%= attributes['marker'] %>">

data/app/views/pageflow/linkmap_page/color_map_files/_color_map_file.json.jbuilder

@@ -0,0 +1,18 @@
+json.call(color_map_file, :width, :height, :sprite_url)
+
+json.components do
+  color_map_file.present_colors.inject(0) do |sprite_offset, color|
+    bounding_box = color_map_file.bounding_box_for_color(color)
+
+    json.set!(color) do
+      json.color(color)
+      json.sprite_offset(sprite_offset)
+      json.top(bounding_box[:top])
+      json.left(bounding_box[:left])
+      json.width(bounding_box[:width])
+      json.height(bounding_box[:height])
+    end
+
+    sprite_offset + bounding_box[:width]
+  end
+end

data/app/views/pageflow/linkmap_page/editor/color_map_files/_color_map_file.json.jbuilder

@@ -0,0 +1 @@
+json.call(color_map_file, :source_image_file_id, :processing_progress)

data/app/views/pageflow/linkmap_page/editor/masked_image_files/_masked_image_file.json.jbuilder

@@ -0,0 +1 @@
+json.call(masked_image_file, :source_image_file_id, :color_map_file_id, :processing_progress)