pageflow-linkmap-page 2.1.0 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9825b545e07dcf9337e0f9176ff4c4f56868450ca81e26c66806324b04e3f096
-  data.tar.gz: b576dda5149b50eef40d3cd15db7b32cb4f9e246b1b0378a4972436e23b5a1d7
+  metadata.gz: c1a18f3bb77acbad943c0648729e1d748e0c30fb685cbb700514920313a701be
+  data.tar.gz: e5a641ab8fd520414035553dfc1242bfee4dfb35423c2278c1a25d02fa90f183
 SHA512:
-  metadata.gz: 2f203df90096273faea3c8b16478b33f35662d94ffadcd3cb533674575b15fb2f1cf2100703c15176f76f07e984ea0b96a3de140f52e6a6e67d2983627548f5f
-  data.tar.gz: 7e51966d6484244aa35a1d659f32160d3f2cc069585248418b7a1a7446164936516f25bb7abbe922dcc4e8c07fe7cfd59a0812d55cec3fd31ce8a4d5a3b2f7fe
+  metadata.gz: 2a79656eaf85fa16d48c7e30531d4a1907ca1ca0ecdd62d04984b3740506f3e86b865d7a8da41aca3cad85145b32952e3e450acfccf30dc7feb00742c074cc17
+  data.tar.gz: 8c93f349e4f83c4fe915d5ae12de25f1b39281d48dc46d94bca128a91d7b8fb41f37b43f824d47b30ca7829d6aa6891cc551cf0e883aedd7dcce9df48449fb37

data/CHANGELOG.md

@@ -1,14 +1,22 @@
 # CHANGELOG
 
-### Version 2.1.0
+### Version 2.2.0
 
-2019-01-23
+2019-03-05
 
-[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/2-0-stable...v2.1.0)
+[Compare changes](https://github.com/codevise/pageflow-linkmap-page/compare/2-1-stable...v2.2.0)
 
-- Add compatibility to pageflow_linkmap_page 1.5
-  ([#48](https://github.com/codevise/pageflow-linkmap-page/pull/48))
+- Only show scroll indicators if at least 20% of panorama is hidden
+  ([#52](https://github.com/codevise/pageflow-linkmap-page/pull/52))
+- Improve phone emulation support
+  ([#54](https://github.com/codevise/pageflow-linkmap-page/pull/54))
+- Bug fix: Handle scroller widget margin correctly
+  ([#51](https://github.com/codevise/pageflow-linkmap-page/pull/51))
+- Bug fix: Prevent letter boxes in pan zoom
+  ([#50](https://github.com/codevise/pageflow-linkmap-page/pull/50))
+- Bug fix: Fix hiding linkmap info boxes
+  ([#49](https://github.com/codevise/pageflow-linkmap-page/pull/49))
 
 See
-[2-0-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/2-0-stable/CHANGELOG.md)
+[2-1-stable branch](https://github.com/codevise/pageflow-linkmap-page/blob/2-1-stable/CHANGELOG.md)
 for previous changes.

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

@@ -63,7 +63,9 @@ pageflow.pageType.register('linkmap_page', _.extend({
 
     this.contentAndBackground.linkmapScrollIndicators({
       disabled: this.isPanZoomEnabled(configuration),
-      scroller: this.scroller
+      scroller: this.scroller,
+      viewport: this.content,
+      innerScrollerElement: pageElement.find('.linkmap')
     });
 
     pageElement.find('.hover_video').linkmapHoverVideo({
@@ -254,12 +256,23 @@ pageflow.pageType.register('linkmap_page', _.extend({
 
   resize: function(pageElement, configuration) {
     this.content.linkmapPanorama('refresh');
+    this.contentAndBackground.linkmapScrollIndicators('refresh');
     this.content.linkmapPanZoom('refresh');
     this.linkmapAreas.linkmap('refresh');
     this.mobileInfoBox.linkmapPaginator('refresh');
 
     this.updateNavigationMode(configuration);
     this.content.linkmapLookaround('update', this.getMarginScrollingDisabled(configuration));
+
+    this.phoneEmulationChanged(function() {
+      this.content.linkmapPanorama('update',
+                                   configuration.add_environment,
+                                   configuration.limit_scrolling,
+                                   this.getPanoramaStartScrollPosition(configuration),
+                                   this.phoneEmulation());
+
+      this.content.linkmapPanorama('resetScrollPosition');
+    });
   },
 
   prepare: function(pageElement, configuration) {
@@ -350,7 +363,7 @@ pageflow.pageType.register('linkmap_page', _.extend({
     this.linkmapAreas.linkmap('updateHoverVideoEnabled', configuration.get('background_type') === 'hover_video');
 
     this.afterEmbeddedViewsUpdate(function() {
-      var minScaling = false;
+      var minScaling = this.phoneEmulation();
 
       this.linkmapAreas.linkmap('option',
                                 'colorMapFileId',
@@ -368,7 +381,7 @@ pageflow.pageType.register('linkmap_page', _.extend({
         initialPosition: this.getPanoramaStartScrollPosition(configuration.attributes)
       });
 
-      this.updateScaledOnPhoneFlags(configuration.page,
+      this.updateScaledOnPhoneFlags(configuration,
                                     this.content.linkmapPanorama('instance'));
 
       this.content.linkmapLookaround('update',
@@ -381,8 +394,12 @@ pageflow.pageType.register('linkmap_page', _.extend({
     });
   },
 
-  updateScaledOnPhoneFlags: function(page, panorama) {
+  updateScaledOnPhoneFlags: function(configuration, panorama) {
+    var panZoomOnPhone = configuration.get('mobile_panorama_navigation') === 'pan_zoom';
+    var page = configuration.page;
+
     page.set('scaled_on_portrait_phone',
+             !panZoomOnPhone &&
              panorama.getPanoramaSize({
                pageWidth: 360,
                pageHeight: 640,
@@ -390,6 +407,7 @@ pageflow.pageType.register('linkmap_page', _.extend({
              }).scaled);
 
     page.set('scaled_on_landscape_phone',
+             !panZoomOnPhone &&
              panorama.getPanoramaSize({
                pageWidth: 640,
                pageHeight: 360,
@@ -457,6 +475,16 @@ pageflow.pageType.register('linkmap_page', _.extend({
     return !!$('#entry_preview > .emulation_mode_phone').length;
   },
 
+  phoneEmulationChanged: function(callback) {
+    var phoneEmulation = this.phoneEmulation();
+
+    if (this.lastPhoneEmulation != phoneEmulation) {
+      callback.call(this);
+    }
+
+    this.lastPhoneEmulation = phoneEmulation;
+  },
+
   playVideo: function(configuration) {
     var that = this;
 

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

@@ -201,9 +201,9 @@
       var areaHeight = area.height();
       var areaPosition = area.position();
 
-      var scale = Math.min(2,
+      var scale = Math.max(1, Math.min(2,
                            this.pageWidth / areaWidth,
-                           this.pageHeight / areaHeight);
+                           this.pageHeight / areaHeight));
 
       var result = {
         scale: scale,

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

@@ -114,6 +114,8 @@
       });
 
       var positionOverlay = function(area) {
+        var viewport = that.element;
+
         if (area.is('.editing')) {
           return;
         }
@@ -133,7 +135,7 @@
           }
           else {
             var spaceLeftOfArea = area.offset().left;
-            var spaceRightOfArea = $(pageElement).width() - area.offset().left - area.outerWidth();
+            var spaceRightOfArea = viewport.width() - area.offset().left - area.outerWidth();
 
             if(spaceLeftOfArea < spaceRightOfArea || spaceLeftOfArea < that.overlayBox.outerWidth()) {
               var overlayAlignmentDirection = "right";
@@ -163,8 +165,8 @@
           }
 
           var spaceToBottom = that.panorama.height() - area.position().top;
-          var spaceToViewportBottom = $(pageElement).height() - area.offset().top - area.height() / 2;
-          var spaceToViewportTop = $(pageElement).height() - 50;
+          var spaceToViewportBottom = viewport.height() - area.offset().top - area.height() / 2;
+          var spaceToViewportTop = viewport.height() - 50;
           var minMargin = 40;
 
           if(that.overlayBox.outerHeight() > spaceToBottom) {
@@ -210,8 +212,8 @@
         return;
       }
 
-      var pageElement = this.options.page;
-      var distanceLimit = pageElement.width() > pageElement.height() ? pageElement.height() : pageElement.width();
+      var viewport = this.element;
+      var distanceLimit = viewport.width() > viewport.height() ? viewport.height() : viewport.width();
       var minOpacity = 0.4;
       activeAreas.each(function() {
         var distance = calculateDistance($(this), mX, mY);
@@ -262,7 +264,7 @@
 
     getScrollArea: function(activeAreas) {
       var panorama = this.panorama;
-      var pageElement = this.options.page;
+      var viewport = this.element;
       var startScrollPosition = this.startScrollPosition;
       var scrollArea;
 
@@ -283,10 +285,10 @@
           scrollArea.right = scrollArea.right < el.position().left + el.width() ? el.position().left + el.width() : scrollArea.right;
         });
 
-        scrollArea.top = Math.max(0, scrollArea.top - pageElement.height() * this.scrollHoverMargin);
-        scrollArea.left = Math.max(0, scrollArea.left - pageElement.width() * this.scrollHoverMargin);
-        scrollArea.bottom = Math.min(panorama.height(), scrollArea.bottom + pageElement.height() * this.scrollHoverMargin);
-        scrollArea.right = Math.min(panorama.width(), scrollArea.right + pageElement.width() * this.scrollHoverMargin);
+        scrollArea.top = Math.max(0, scrollArea.top - viewport.height() * this.scrollHoverMargin);
+        scrollArea.left = Math.max(0, scrollArea.left - viewport.width() * this.scrollHoverMargin);
+        scrollArea.bottom = Math.min(panorama.height(), scrollArea.bottom + viewport.height() * this.scrollHoverMargin);
+        scrollArea.right = Math.min(panorama.width(), scrollArea.right + viewport.width() * this.scrollHoverMargin);
       }
       else {
         scrollArea = {
@@ -316,12 +318,13 @@
 
       this.keepingScrollPosition(function() {
         var pageElement = this.options.page;
+        var viewport = this.element;
 
         this.panorama = this.options.panorama();
 
         this.panoramaSize = this.getPanoramaSize({
-          pageWidth: pageElement.width(),
-          pageHeight: pageElement.height(),
+          pageWidth: viewport.width(),
+          pageHeight: viewport.height(),
 
           minScaling: this.minScaling
         });
@@ -340,14 +343,14 @@
         this.innerScrollerElement.width(this.scrollArea.right - this.scrollArea.left);
         this.innerScrollerElement.height(this.scrollArea.bottom - this.scrollArea.top);
 
-        var centerX = Math.max(0, (pageElement.width() - (this.scrollArea.right - this.scrollArea.left)) / 2);
-        var centerY = Math.max(0, (pageElement.height() - (this.scrollArea.bottom - this.scrollArea.top)) / 2);
+        var centerX = Math.max(0, (viewport.width() - (this.scrollArea.right - this.scrollArea.left)) / 2);
+        var centerY = Math.max(0, (viewport.height() - (this.scrollArea.bottom - this.scrollArea.top)) / 2);
 
         var translateX = this.scrollArea.left - centerX;
         var translateY = this.scrollArea.top - centerY;
 
-        var maxTranslateX = this.panoramaSize.width - pageElement.width();
-        var maxTranslateY = this.panoramaSize.height - pageElement.height();
+        var maxTranslateX = this.panoramaSize.width - viewport.width();
+        var maxTranslateY = this.panoramaSize.height - viewport.height();
 
         this.panoramaWrapper.css({
           left: -Math.min(maxTranslateX, Math.max(0, translateX)) +'px',

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

@@ -1,27 +1,44 @@
 (function($) {
+  // Only show scroll indicators if at least 20% of the panorama is
+  // outside of the viewport.
+  var minOverflowFraction = 1.2;
+
+  // Ensure scroll indicators are already hidden when the scroller
+  // decelerates while approaching the max scroll position.
   var margin = 40;
 
   $.widget('pageflow.linkmapScrollIndicators', {
     _create: function() {
-      var element = this.element;
       var scroller = this.options.scroller;
 
       this.arrows = this.element.find('.linkmap-arrow');
 
-      scroller.onScroll(toggle);
-      scroller.onScrollEnd(toggle);
-      toggle();
+      scroller.onScroll(_.bind(this.refresh, this));
+      scroller.onScrollEnd(_.bind(this.refresh, this));
+      this.refresh();
 
       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);
-      }
+    refresh: function() {
+      var element = this.element;
+      var scroller = this.options.scroller;
+      var viewport = this.options.viewport;
+      var innerScrollerElement = this.options.innerScrollerElement;
+
+      var showH = innerScrollerElement.width() / viewport.width() > minOverflowFraction;
+      var showV = innerScrollerElement.height() / viewport.height() > minOverflowFraction;
+
+      element.toggleClass('can_scroll_left',
+                          showH && Math.ceil(scroller.positionX()) < - margin);
+      element.toggleClass('can_scroll_right',
+                          showH && Math.floor(scroller.positionX()) > scroller.maxX() + margin);
+      element.toggleClass('can_scroll_up',
+                          showV && Math.ceil(scroller.positionY()) < - margin);
+      element.toggleClass('can_scroll_down',
+                          showV && Math.floor(scroller.positionY()) > scroller.maxY() + margin);
     },
 
     disable: function() {

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

@@ -3,6 +3,17 @@ module Pageflow
     module AreasHelper
       include BackgroundImageHelper
 
+      def linkmap_content_and_background_css_classes(configuration)
+        hide_overlay_boxes =
+          configuration['mobile_panorama_navigation'] == 'pan_zoom' &&
+          configuration['hide_linkmap_overlay_boxes']
+
+        [
+          'content_and_background linkmap_page unplayed',
+          hide_overlay_boxes ? 'hide_overlay_boxes' : nil
+        ].compact.join(' ')
+      end
+
       def linkmap_areas_div(entry, configuration)
         color_map_file =
           ColorMapFile.find_by_id(configuration['linkmap_color_map_file_id'])
@@ -11,21 +22,12 @@ module Pageflow
         masked_visited_image_file =
           MaskedImageFile.find_by_id(configuration['linkmap_masked_visited_image_id'])
 
-
-        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: {
                  color_map_file_id: configuration['color_map_file_id']
                })

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

@@ -1,4 +1,4 @@
-<%= content_tag(:div, class: css_classes, data: data_attributes) do %>
+<%= content_tag(:div, class: 'linkmap_areas', data: data_attributes) do %>
   <% (configuration['linkmap_areas'].presence || []).each_with_index do |attributes, index| %>
     <%= linkmap_area(entry, attributes, index, configuration['background_type']) do %>
       <%= linkmap_area_background_image_div('visited',

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

@@ -1,5 +1,5 @@
 <div class="blackLayer"></div>
-<div class="content_and_background linkmap_page unplayed">
+<%= content_tag(:div, class: linkmap_content_and_background_css_classes(configuration)) do %>
   <div class="backgroundArea">
     <%= background_image_div(configuration, 'fixed_background_image', class: 'fixed_background') %>
     <div class="scroller">
@@ -97,4 +97,4 @@
       </div>
     </div>
   </div>
-</div>
+<% end %>

data/lib/pageflow/linkmap_page/version.rb

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

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

@@ -3,6 +3,48 @@ require 'spec_helper'
 module Pageflow
   module LinkmapPage
     describe AreasHelper do
+      describe '#linkmap_content_and_background_css_classes' do
+        it 'contains default css classes' do
+          classes = helper.linkmap_content_and_background_css_classes({}).split(' ')
+
+          expect(classes).to include('content_and_background')
+          expect(classes).to include('linkmap_page')
+          expect(classes).to include('unplayed')
+        end
+
+        it 'contains hide_overlay_boxes if option is set and pan zoom is active' do
+          configuration = {
+            'mobile_panorama_navigation' => 'pan_zoom',
+            'hide_linkmap_overlay_boxes'=> true
+          }
+
+          classes = helper.linkmap_content_and_background_css_classes(configuration).split(' ')
+
+          expect(classes).to include('hide_overlay_boxes')
+        end
+
+        it 'does not contain hide_overlay_boxes if option is not set even if pan zoom is active' do
+          configuration = {
+            'mobile_panorama_navigation' => 'pan_zoom',
+            'hide_linkmap_overlay_boxes'=> false
+          }
+
+          classes = helper.linkmap_content_and_background_css_classes(configuration).split(' ')
+
+          expect(classes).not_to include('hide_overlay_boxes')
+        end
+
+        it 'does not contain hide_overlay_boxes if option is set even but pan zoom is not active' do
+          configuration = {
+            'hide_linkmap_overlay_boxes'=> true
+          }
+
+          classes = helper.linkmap_content_and_background_css_classes(configuration).split(' ')
+
+          expect(classes).not_to include('hide_overlay_boxes')
+        end
+      end
+
       describe '#linkmap_area_divs' do
         it 'renders div with attribute name as class' do
           entry = create(:entry)

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-linkmap-page
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.2.0
 platform: ruby
 authors:
 - Codevise Solutions Ltd.
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-23 00:00:00.000000000 Z
+date: 2019-03-05 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.8
+rubygems_version: 2.7.5
 signing_key: 
 specification_version: 4
 summary: Pageflow page type for a page that contains customizable link areas