pageflow-linkmap-page 0.2.0 → 1.0.0

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

@@ -6,6 +6,9 @@
     _create: function() {
       var widget = this;
 
+      this.lastImageUrls = {};
+      this.imagePromises = {};
+
       this.refresh();
 
       if (widget.options.hoverVideoEnabled) {
@@ -28,6 +31,84 @@
           widget.options.hoverVideo.pause();
         }
       });
+
+      this.element.on('click', function(event) {
+        var area = widget.areaAt(widget.positionFromEvent(event));
+
+        if (area.length) {
+          area.first().trigger('linkmapareaclick');
+        }
+        else {
+          widget._trigger('backgroundclick');
+        }
+
+        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);
+      });
+    },
+
+    areaAt: function(position) {
+      return this.element.find('.hover_area').filter(function() {
+        return $(this).linkmapAreaContains(position);
+      }).first();
+    },
+
+    updateHoverStates: function(event) {
+      var position = this.positionFromEvent(event);
+
+      this.element.find('.hover_area').each(function() {
+        var area = $(this);
+        var hovered = area.linkmapAreaContains(position);
+
+        if (area.hasClass('hover') && !hovered) {
+          area.trigger('linkmaparealeave');
+        }
+      });
+
+      this.element.find('.hover_area').each(function() {
+        var area = $(this);
+        var hovered = area.linkmapAreaContains(position);
+
+        if (!area.hasClass('hover') && hovered) {
+          area.trigger('linkmapareaenter');
+        }
+
+        area.css('cursor',
+                 hovered &&
+                 area.attr('data-target-type') !== 'text_only' ?
+                 'pointer' : 'default');
+
+        area.toggleClass('hover', hovered);
+      });
+    },
+
+    positionFromEvent: function(event) {
+      var clientRect = this.element[0].getBoundingClientRect();
+
+      var left = event.clientX - clientRect.left;
+      var top = event.clientY - clientRect.top;
+
+      return {
+        leftInPixel: left,
+        topInPixel: top,
+        leftInPercent: left / this.element.width() * 100,
+        topInPercent: top / this.element.height() * 100
+      };
     },
 
     updateHoverVideoEnabled: function(value) {
@@ -42,29 +123,76 @@
     },
 
     refresh: function() {
-      var hoverAreas = this.element.find('.hover_area'),
-          hoverImages = this.element.find('.background_image');
+      var hoverAreas = this.element.find('.hover_area');
+      var widget = this;
 
-      this._resizeToBaseImage(hoverImages);
+      $.when(
+        this.loadImage('hover'),
+        this.loadImage('visited'),
+        this.loadMasks()
+      ).then(function(hoverImage, visitedImage, masks) {
+        var baseImage = widget.options.baseImage();
+        var width = baseImage.width();
+        var height = baseImage.height();
+
+        hoverAreas.linkmapAreaRedraw({
+          target: '.hover_image',
+          image: hoverImage,
+          width: width,
+          height: height,
+          masks: masks
+        });
+
+        hoverAreas.linkmapAreaRedraw({
+          target: '.visited_image',
+          image: visitedImage,
+          width: width,
+          height: height,
+          masks: masks
+        });
+      });
 
       hoverAreas.linkmapAreaClip();
       hoverAreas.linkmapAreaFormat();
       hoverAreas.linkmapAreaVisited();
     },
 
-    _resizeToBaseImage: function(target) {
-      var baseImage = this.options.baseImage();
+    loadImage: function(name) {
+      var url = this.options[name + 'ImageUrl'];
+
+      if (this.lastImageUrls[name] !== url) {
+        this.lastImageUrls[name] = url;
+        this.imagePromises[name] = url && pageflow.linkmapPage.RemoteImage.load(url);
+      }
+
+      return this.imagePromises[name];
+    },
+
+    loadMasks: function() {
+      var widget = this;
+      var maskImageId = this.options.masksData && this.options.masksData.id;
+
+      if (this.lastMaskImageId !== maskImageId) {
+        this.lastMaskImageId = maskImageId;
+
+        this.masksPromise = this.options.masksData ?
+          pageflow.linkmapPage.Masks.deserialize(this.options.masksData,
+                                                 this.options.maskSpriteUrlTemplate) :
+          $.when(pageflow.linkmapPage.Masks.empty);
+
+        this.masksPromise.then(function(masks) {
+          widget._trigger('updatemasks', null, {masks: masks});
+        });
+      }
 
-      target
-        .width(baseImage.width())
-        .height(baseImage.height());
+      return this.masksPromise;
     }
   });
 
   $.fn.linkmapAreaClip = function(optionalPosition) {
     this.each(function() {
       var hoverArea = $(this);
-      var clippedElement = hoverArea.find('.panorama_video, .background_image');
+      var clippedElement = hoverArea.find('.panorama_video, .hover_image, .visited_image');
       var position = optionalPosition || hoverArea.position();
 
       clippedElement.css({

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

@@ -53,7 +53,7 @@
         e.stopPropagation();
       });
 
-      this.element.on('click', function() {
+      this.element.on('linkmapareaclick', function() {
         if (!widget.element.hasClass('dynamic_marker')) {
           widget._trigger('play', null, {
             audioFileId: widget.element.data('audioFile')

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

@@ -41,16 +41,16 @@
         that.calcAreaOpacity(that.activeAreas, e.pageX, e.pageY);
       });
 
-      pageElement.on('mouseenter', '.hover_area', function() {
+      pageElement.on('linkmapareaenter', '.hover_area', function() {
         positionOverlay($(this));
       });
 
-      pageElement.on('click', function() {
+      pageElement.on('click linkmapbackgroundclick', function() {
         that.overlayBox.removeClass('active');
-        that.activeAreas.removeClass('hover');
+        that.activeAreas.removeClass('hover hover_mobile');
       });
 
-      $('body').on('mouseleave', '.hover_area', function() {
+      $('body').on('linkmaparealeave', '.hover_area', function() {
         that.overlayBox.removeClass('active');
       });
 
@@ -59,23 +59,29 @@
       });
 
       that.activeAreas.each(function() {
-        $(this).on('click touchstart', function(e) {
-          if (pageflow.browser.has('mobile platform')) {
-            if($(this).hasClass('hover')) {
+        var area = $(this);
+
+        if (pageflow.browser.has('mobile platform')) {
+          area.on('linkmapareatouchstart', function(e) {
+            if (area.hasClass('hover_mobile')) {
               that.activeAreas.removeClass('active');
-              $(this).addClass('active');
-              return;
+              area.addClass('active');
             }
-            that.activeAreas.removeClass('hover');
-            $(this).addClass('hover');
-            positionOverlay($(this));
-            return false;
-          }
-          else {
+            else {
+              that.activeAreas.removeClass('hover hover_mobile');
+              area.addClass('hover hover_mobile');
+
+              positionOverlay($(this));
+              return false;
+            }
+          });
+        }
+        else {
+          area.on('linkmapareaclick', function(e) {
             that.activeAreas.removeClass('active');
-            $(this).addClass('active');
-          }
-        })
+            area.addClass('active');
+          });
+        }
       });
 
       var positionOverlay = function(area) {

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

@@ -6,4 +6,4 @@
 
 pageflow.linkmapPage = pageflow.linkmapPage || {};
 
-pageflow.linkmapPage.toggleMarkerOptions = ['no_marker', 'dynamic_marker'];
+pageflow.linkmapPage.markerOptions = ['no_marker', 'dynamic_marker'];

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

@@ -0,0 +1,66 @@
+.action_buttons {
+  display: none;
+}
+
+&.editable {
+  .selected .action_buttons {
+    display: block;
+  }
+
+  .editing .action_buttons {
+    display: none;
+  }
+}
+
+.action_button {
+  @include icon-only-button(white);
+  display: none;
+  position: absolute;
+  z-index: 5;
+  top: 5px;
+  right: 5px;
+  background-color: #fff;
+  border: solid 1px #888;
+  font-weight: normal;
+}
+
+.show_marker {
+  @include fa-eye-icon;
+}
+
+.hide_marker {
+  @include fa-eye-slash-icon;
+}
+
+.set_mask {
+  @include fa-crop-icon;
+  right: 42px;
+}
+
+.unset_mask {
+  @include fa-arrows-alt-icon;
+}
+
+&.masks_available {
+  .set_mask {
+    display: block;
+  }
+}
+
+.with_mask {
+  .unset_mask {
+    display: block;
+  }
+}
+
+.dynamic_marker {
+  .hide_marker {
+    display: block;
+  }
+}
+
+.without_mask {
+  .show_marker {
+    display: block;
+  }
+}

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

@@ -0,0 +1,13 @@
+.linkmap_area_outlines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}

data/app/assets/stylesheets/pageflow/linkmap_page/editor/inputs/area_mask.scss

@@ -0,0 +1,3 @@
+.linkmap_page_area_mask_input_pictogram {
+  @include fa-crop-icon;
+}

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

@@ -0,0 +1,15 @@
+.linkmap_area_masks_preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  pointer-events: all;
+
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}

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

@@ -0,0 +1,9 @@
+.select_area_position_hint {
+  background-color: #fff;
+  padding: 10px;
+
+  button {
+    margin-top: 10px;
+    @include button;
+  }
+}

data/app/assets/stylesheets/pageflow/linkmap_page/{editor.css.scss → editor.scss}

@@ -1,33 +1,14 @@
 .editor {
+  @import "./editor/inputs/area_mask";
   @import "./editor/areas_list";
+  @import "./editor/select_area_position_hint";
 }
 
 .linkmap_areas {
   @import "./editor/resizable";
-
-  .edit {
-    @include icon-only-button(white);
-    @include pencil-icon;
-    position: absolute;
-    display: none;
-    z-index: 2;
-    top: 5px;
-    right: 5px;
-    background-color: #fff;
-    border: solid 1px #888;
-  }
-
-  .toggle_marker {
-    @include icon-only-button(white);
-    @include eye-icon;
-    position: absolute;
-    display: none;
-    z-index: 2;
-    top: 5px;
-    right: 40px;
-    background-color: #fff;
-    border: solid 1px #888;
-  }
+  @import "./editor/action_buttons";
+  @import "./editor/masks_preview";
+  @import "./editor/area_outlines";
 
   .area_type_pictogram {
     @include background-icon-center($color: #fff);
@@ -40,7 +21,7 @@
     height: 25px;
     border-radius: 5px;
     background-color: rgba(0, 0, 0, 0.4);
-    z-index: 2;
+    z-index: 3;
   }
 
   .page_area,
@@ -52,25 +33,37 @@
   }
 
   &.editable {
+    pointer-events: all;
+
+    .click_trap {
+      cursor: default;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 4;
+    }
+
     .hover_area {
+      z-index: 2;
+    }
+
+    .without_mask.selected .click_trap {
       cursor: move;
+    }
 
-      &:hover .edit,
-      &:hover .toggle_marker,
-      &:hover .area_type_pictogram {
+    .hover_area.selected {
+      z-index: 3;
+
+      .area_type_pictogram {
         display: block;
       }
 
-      &.editing .edit,
-      &.editing .toggle_marker,
       &.editing .area_type_pictogram {
         display: none;
       }
 
-      &.editing {
-        z-index: 2;
-      }
-
       &:before,
       &:after {
         content: "";
@@ -79,16 +72,10 @@
         left: 0;
         width: 100%;
         height: 100%;
-        z-index: 1;
+        z-index: 2;
         @include box-sizing(border-box);
       }
 
-      &.highlighted:before,
-      &.editing:before,
-      &:hover:before {
-        background-color: rgba(255, 255, 255, 0.3);
-      }
-
       &:before {
         border: solid 2px #000;
       }

data/app/assets/stylesheets/pageflow/linkmap_page/themes/{default.css.scss → default.scss}

@@ -42,7 +42,7 @@
       }
     }
 
-    &.hover {
+    &.hover_mobile {
       .linkmap_marker {
         &:before {
           opacity: 1;
@@ -112,7 +112,6 @@
         }
       }
 
-      &:hover,
       &.hover,
       &.playing,
       &:focus,
@@ -320,7 +319,7 @@
   }
 
   .hover_area {
-    &:hover, &.hover {
+    &.hover {
       .linkmap_audio_player_controls {
         .play:before {
           background-color: rgba(0,0,0,0.7);

data/app/assets/stylesheets/pageflow/{linkmap_page.css.scss → linkmap_page.scss}

@@ -27,10 +27,6 @@
 
   @include user-select(none);
 
-  .content {
-/*    pointer-events: none; */
-  }
-
   .scroller {
     overflow: hidden;
 
@@ -40,7 +36,6 @@
   }
 
   .linkmap {
-    pointer-events: none;
     position: absolute;
     height: 100%;
     width: 100%;
@@ -113,21 +108,25 @@
     height: 30%;
     width: 20%;
     overflow: hidden;
-    cursor: pointer;
     display: block;
     pointer-events: all;
 
-    .background_image {
+    .hover_image,
+    .visited_image {
+      position: absolute;
+      top: 0;
+      left: 0;
       visibility: hidden;
       opacity: 0;
-      position: absolute;
       @include transition(opacity 0.5s ease, visibility 0.5s ease);
     }
 
-    &:hover,
     &.hover,
-    &.playing, &:focus, &:active {
+    &.playing,
+    &:focus,
+    &.editing {
       .hover_image {
+        z-index: 1;
         opacity: 1;
         visibility: visible;
       }
@@ -146,10 +145,14 @@
       z-index: 1;
     }
 
+    .linkmap_marker {
+      position: absolute;
+      z-index: 2;
+    }
+
     &.dynamic_marker {
       .linkmap_marker {
         background-color: transparent;
-        position: absolute;
         top: 5%;
         left: 5%;
         width: 90%;
@@ -160,10 +163,8 @@
         @include transition(0.15s);
         opacity: 0.1;
         box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
-        z-index: 2;
       }
 
-      &:hover,
       &.hover,
       &.playing,
       &:focus,
@@ -259,8 +260,4 @@
       }
     }
   }
-
-  .text_only_area {
-    cursor: default;
-  }
-}
+}

data/app/controllers/pageflow/linkmap_page/mask_sprites_controller.rb

@@ -0,0 +1,26 @@
+module Pageflow
+  module LinkmapPage
+    class MaskSpritesController < Pageflow::ApplicationController
+      respond_to :json
+
+      before_filter :authenticate_user!
+
+      def create
+        image_file = ImageFile.find(params[:image_file_id])
+        authorize!(:update, image_file)
+
+        mask_sprite = MaskSprite
+          .create_with(permitted_params)
+          .find_or_create_by!(image_file_id: image_file.id)
+
+        respond_with(mask_sprite, location: image_file_mask_sprite_url(image_file, mask_sprite))
+      end
+
+      private
+
+      def permitted_params
+        params.require(:mask_sprite).permit(:attachment)
+      end
+    end
+  end
+end

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

@@ -4,16 +4,29 @@ 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'])
+
+        mask_sprite_url_template = MaskSprite.new(id: 1, attachment_file_name: 'data').attachment.url
+          .gsub(%r'(\d{3}/)+', ':id_partition/')
+
         render('pageflow/linkmap_page/areas/div',
                entry: entry,
-               configuration: configuration)
+               configuration: configuration,
+               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
+               })
       end
 
-      def linkmap_area(entry, attributes, index, &block)
-        Link.new(self, entry, attributes.symbolize_keys, index).render(&block)
+      def linkmap_area(entry, attributes, index, background_type = nil, &block)
+        Link.new(self, entry, attributes.symbolize_keys, index, background_type).render(&block)
       end
 
-      class Link < Struct.new(:template, :entry, :attributes, :index)
+      class Link < Struct.new(:template, :entry, :attributes, :index, :background_type)
         delegate :content_tag, to: :template
 
         def render(&block)
@@ -51,6 +64,7 @@ module Pageflow
         end
 
         def data_attributes
+          mask_id = background_type != 'hover_video' && attributes[:mask_perma_id]
           audio_file_id = attributes[:target_id]
 
           {
@@ -58,6 +72,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,
             width: attributes[:width],
             height: attributes[:height]
           }.delete_if { |key, value| value.blank? }

data/app/models/pageflow/linkmap_page/mask_sprite.rb

@@ -0,0 +1,15 @@
+module Pageflow
+  module LinkmapPage
+    class MaskSprite < ActiveRecord::Base
+      belongs_to :image_file
+
+      has_attached_file :attachment, Pageflow.config.paperclip_s3_default_options
+
+      do_not_validate_attachment_file_type :attachment
+
+      def as_json(*)
+        super(only: [:id])
+      end
+    end
+  end
+end