pageflow-linkmap-page 0.1.0

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

@@ -0,0 +1,26 @@
+pageflow.linkmapPage.AreasEmbeddedView = Backbone.Marionette.View.extend({
+  render: function() {
+    this.subview(new pageflow.CollectionView({
+      el: this.$el,
+      collection: this.model.linkmapAreas(this.options.propertyName),
+      itemViewConstructor: pageflow.linkmapPage.AreaItemEmbeddedView,
+      itemViewOptions: {
+        pageConfiguration: this.model,
+        page: this.model.page,
+        container: this.options.container
+      }
+    }));
+
+    this.listenTo(this.model.page, 'change:areas_editable', function() {
+      this.updateClassName();
+    });
+
+    return this;
+  },
+
+  updateClassName: function() {
+    var editable = this.model.page.get('areas_editable');
+
+    this.$el.toggleClass('editable', !!editable);
+  }
+});

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

@@ -0,0 +1,14 @@
+pageflow.linkmapPage.PanoramaEmbeddedView = Backbone.Marionette.View.extend({
+  render: function() {
+    this.listenTo(this.model.page, 'change:' + this.options.disableMarginScrollingPropertyName, function(model, disabled) {
+      if (disabled) {
+        this.$el.linkmapLookaround('disable');
+      }
+      else {
+        this.$el.linkmapLookaround('enable');
+      }
+    });
+
+    return this;
+  }
+});

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

@@ -0,0 +1,9 @@
+pageflow.features.register('slideshow', 'page_type.linkmap_page', function() {
+  pageflow.linkmapPage.visitedPages = [];
+
+  pageflow.events.on('page:change', function(page) {
+    if (pageflow.linkmapPage.visitedPages.indexOf(page.getPermaId()) < 0) {
+      pageflow.linkmapPage.visitedPages.push(page.getPermaId());
+    }
+  });
+});

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

@@ -0,0 +1,302 @@
+pageflow.pageType.register('linkmap_page', _.extend({
+  scrollerOptions: {
+    freeScroll: true,
+    scrollX: true,
+    noMouseWheelScrollX: true
+  },
+
+  noHideTextOnSwipe: true,
+
+  enhance: function(pageElement, configuration) {
+    this.setupPanoramaBackground(pageElement, configuration);
+    this.setupHoverImages(pageElement, configuration);
+    this.setupVideoPlayer(pageElement);
+
+    this.content = pageElement.find('.scroller');
+    this.panorama = pageElement.find('.panorama');
+
+    this.content.linkmapPanorama({
+      page: pageElement,
+      panorama: function() {
+        return pageElement.find('.panorama.active');
+      },
+      scroller: this.scroller,
+      activeAreasSelector: '.linkmap_areas > *',
+      limitScrolling: configuration.limit_scrolling,
+      addEnvironment: configuration.add_environment,
+      marginScrollingDisabled: configuration.margin_scrolling_disabled,
+      startScrollPosition: this.getPanoramaStartScrollPosition(configuration)
+    });
+
+    this.content.linkmapLookaround({
+      scroller: this.scroller,
+      marginScrollingDisabled: configuration.margin_scrolling_disabled
+    });
+
+    pageElement.find('.linkmap_page').linkmapScrollIndicators({
+      scroller: this.scroller
+    });
+
+    pageElement.find('.hover_video').linkmapHoverVideo({
+      video: pageElement.find('.panorama_video')
+    });
+
+    this.linkmapAreas = pageElement.find('.linkmap_areas');
+    this.linkmapAreas.linkmap({
+      baseImage: function() {
+        return pageElement.find('.panorama.active');
+      },
+
+      hoverVideo: pageElement.find('.hover_video').linkmapHoverVideo('instance'),
+      hoverVideoEnabled: configuration.background_type === 'hover_video'
+    });
+
+    this.setupPageLinkAreas(pageElement);
+    this.setupAudioFileAreas(pageElement, configuration);
+    this.setupTextOnlyAreas(pageElement);
+  },
+
+  getPanoramaStartScrollPosition: function(configuration) {
+    function getRatio(attributeName) {
+      if (attributeName in configuration) {
+        return configuration[attributeName] / 100;
+      }
+      else {
+        return 0.5;
+      }
+    }
+
+    if (configuration.background_type === 'video') {
+      return {
+        x: getRatio('panorama_video_x'),
+        y: getRatio('panorama_video_y')
+      };
+    }
+    else {
+      return {
+        x: getRatio('panorama_image_x'),
+        y: getRatio('panorama_image_y')
+      };
+    }
+  },
+
+  setupPanoramaBackground: function(pageElement, configuration) {
+    pageElement.find('.panorama_image')
+      .toggleClass('active', !this.isBackgroundVideoEnabled(configuration));
+
+    pageElement.find('.panorama_video')
+      .toggleClass('active', this.isBackgroundVideoEnabled(configuration));
+  },
+
+  setupHoverImages: function(pageElement, configuration) {
+    pageElement.find('.hover_image')
+      .toggle(!this.isHoverVideoEnabled(configuration));
+  },
+
+  setupVideoPlayer: function(pageElement) {
+    var wrapper = pageElement.find('.panorama_video');
+    var template = wrapper.find('[data-template=video]');
+
+    wrapper
+      .attr('data-width', template.data('videoWidth'))
+      .attr('data-height', template.data('videoHeight'));
+
+    this.videoPlayer = new pageflow.VideoPlayer.Lazy(template, {
+      volumeFading: true,
+
+      width: '100%',
+      height: '100%'
+    });
+
+    wrapper.data('videoPlayer', this.videoPlayer);
+  },
+
+  setupPageLinkAreas: function(pageElement) {
+    pageElement.on('click', '[data-target-type="page"]', function(e) {
+      var area = $(this);
+
+      pageflow.slides.goToByPermaId(area.data('targetId'), {
+        transition: area.data('pageTransition')
+      });
+      return false;
+    });
+  },
+
+  setupAudioFileAreas: function(pageElement, configuration) {
+    this.multiPlayer = pageflow.audio.createMultiPlayer({
+      playFromBeginning: true,
+      fadeDuration: 1000,
+      hooks: pageflow.atmo.createMediaPlayerHooks(configuration)
+    });
+
+    pageElement.linkmapAudioPlayersController({
+      player: this.multiPlayer
+    });
+
+    pageElement.find('[data-target-type="audio_file"]').linkmapAudioPlayerControls();
+  },
+
+  setupTextOnlyAreas: function(pageElement) {
+    pageElement.on('click', '[data-target-type="text_only"]', function(e) {
+      return false;
+    });
+  },
+
+  resize: function(pageElement, configuration) {
+    this.content.linkmapPanorama('refresh');
+    this.linkmapAreas.linkmap('refresh');
+  },
+
+  prepare: function(pageElement, configuration) {
+    if (this.isVideoEnabled(configuration)) {
+      return this.videoPlayer.ensureCreated();
+    }
+  },
+
+  unprepare: function(pageElement, configuration) {
+    if (this.isVideoEnabled(configuration)) {
+      return this.videoPlayer.scheduleDispose();
+    }
+  },
+
+  linkedPages: function(pageElement, configuration) {
+    return _(configuration.linkmap_areas)
+      .select(function(area) {
+        return area.target_type === 'page';
+      })
+      .map(function(area) {
+        return area.target_id;
+      });
+  },
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  activating: function(pageElement, configuration) {
+    if (this.isVideoEnabled(configuration)) {
+      this.playVideo(configuration);
+    }
+
+    this.content.linkmapPanorama('refresh');
+    this.linkmapAreas.linkmap('refresh');
+
+    this.content.linkmapLookaround('activate');
+    this.content.linkmapPanorama('resetScrollPosition');
+
+    this.content.linkmapPanorama('resetAreaHighlighting');
+  },
+
+  activated: function(pageElement, configuration) {
+    this.content.linkmapPanorama('highlightAreas');
+  },
+
+  deactivating: function(pageElement, configuration) {
+    this.multiPlayer.pause();
+
+    this.content.linkmapLookaround('deactivate');
+  },
+
+  deactivated: function(pageElement, configuration) {
+    if (this.isVideoEnabled(configuration)) {
+      this.pauseVideo(configuration);
+    }
+  },
+
+  update: function(pageElement, configuration) {
+    this.setupDefaultAreaPositions(configuration);
+    this.setupPanoramaBackground(pageElement, configuration.attributes);
+    this.updateCommonPageCssClasses(pageElement, configuration);
+
+    this.linkmapAreas.linkmap('updateHoverVideoEnabled', configuration.get('background_type') === 'hover_video');
+
+    this.afterEmbeddedViewsUpdate(function() {
+      var minScaling = false;
+
+      this.content.linkmapPanorama('update',
+                                   configuration.get('add_environment'),
+                                   configuration.get('limit_scrolling'),
+                                   this.getPanoramaStartScrollPosition(configuration.attributes),
+                                   minScaling);
+
+      this.content.linkmapLookaround('update',
+                                     configuration.get('margin_scrolling_disabled'));
+      this.setupHoverImages(pageElement, configuration.attributes);
+      this.updateVideoPlayState(configuration);
+
+      this.linkmapAreas.linkmap('refresh');
+      this.scroller.refresh();
+    });
+  },
+
+  updateVideoPlayState: function(configuration) {
+    if (configuration.hasChanged('background_type')) {
+      if (this.isVideoEnabled(configuration.attributes)) {
+        this.playVideo(configuration.attributes);
+      }
+      else {
+        this.pauseVideo(configuration.attributes);
+      }
+    }
+  },
+
+  setupDefaultAreaPositions: function(configuration) {
+    if (!this.defaultPositionDefined) {
+      var scroller = this.scroller;
+
+      _.each(['linkmap_page_link_areas', 'linkmap_audio_file_areas'], function(propertyName) {
+        configuration.linkmapAreas(propertyName).setDefaultPosition(function() {
+          return {
+            left: getPercent(scroller.positionX(), scroller.maxX()),
+            top: getPercent(scroller.positionY(), scroller.maxY())
+          };
+        });
+      });
+      this.defaultPositionDefined = true;
+    }
+
+    function getPercent(value, max) {
+      if (max === 0) {
+        return 20;
+      }
+
+      return Math.max(3, Math.min(90, value / max * 100));
+    }
+  },
+
+  afterEmbeddedViewsUpdate: function(fn) {
+    setTimeout(_.bind(fn, this), 10);
+  },
+
+  isVideoEnabled: function(configuration) {
+    return !pageflow.browser.has('mobile platform') &&
+      (configuration.background_type === 'video' || configuration.background_type === 'hover_video');
+  },
+
+  isBackgroundVideoEnabled: function(configuration) {
+    return !pageflow.browser.has('mobile platform') &&
+      configuration.background_type === 'video';
+  },
+
+  isHoverVideoEnabled: function(configuration) {
+    return !pageflow.browser.has('mobile platform') &&
+      configuration.background_type === 'hover_video';
+  },
+
+  playVideo: function(configuration) {
+    var that = this;
+
+    this.videoPlayer.ensureCreated();
+
+    this.prebufferingPromise = this.videoPlayer.prebuffer().then(function() {
+      if (configuration.background_type === 'video') {
+        that.videoPlayer.playAndFadeIn(1000);
+      }
+    });
+  },
+
+  pauseVideo: function(configuration) {
+    this.videoPlayer.fadeOutAndPause(1000);
+    this.videoPlayer.scheduleDispose();
+  }
+}, pageflow.commonPageCssClasses));

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

@@ -0,0 +1,3 @@
+(function(a,b){"function"===typeof define&&define.amd?define(b):"object"===typeof exports?module.exports=b():a.gyro=b()})(this,function(){var a={x:null,y:null,z:null,alpha:null,beta:null,gamma:null},b={x:0,y:0,z:0,alpha:0,beta:0,gamma:0},g=null,e=[],h={frequency:500,calibrate:function(){for(var f in a)b[f]="number"===typeof a[f]?a[f]:0},getOrientation:function(){return a},startTracking:function(b){g=setInterval(function(){b(a)},h.frequency)},stopTracking:function(){clearInterval(g)},hasFeature:function(a){for(var b in e)if(a==
+e[b])return!0;return!1},getFeatures:function(){return e}};window&&window.addEventListener&&function(){function f(d){e.push("MozOrientation");d.target.removeEventListener("MozOrientation",f,!0);d.target.addEventListener("MozOrientation",function(c){a.x=c.x-b.x;a.y=c.y-b.y;a.z=c.z-b.z},!0)}function g(d){e.push("devicemotion");d.target.removeEventListener("devicemotion",g,!0);d.target.addEventListener("devicemotion",function(c){a.x=c.accelerationIncludingGravity.x-b.x;a.y=c.accelerationIncludingGravity.y-
+b.y;a.z=c.accelerationIncludingGravity.z-b.z},!0)}function h(d){e.push("deviceorientation");d.target.removeEventListener("deviceorientation",h,!0);d.target.addEventListener("deviceorientation",function(c){a.alpha=c.alpha-b.alpha;a.beta=c.beta-b.beta;a.gamma=c.gamma-b.gamma},!0)}window.addEventListener("MozOrientation",f,!0);window.addEventListener("devicemotion",g,!0);window.addEventListener("deviceorientation",h,!0)}();return h});

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

@@ -0,0 +1,77 @@
+(function($) {
+  $.widget('pageflow.linkmapHoverVideo', {
+    activate: function() {
+      var video = this.options.video;
+
+      if (!this.hoverVideoParent) {
+        this.hoverVideoParent = video.parent();
+        video.appendTo(this.element);
+      }
+    },
+
+    deactivate: function() {
+      var video = this.options.video;
+
+      if (this.hoverVideoParent) {
+        video.prependTo(this.hoverVideoParent);
+        this.hoverVideoParent = null;
+
+        video.css({
+          left: 'auto',
+          top: 'auto',
+          width: 'auto',
+          height: 'auto'
+        });
+      }
+    },
+
+    schedulePlay: function(options) {
+      if (this.currentArea !== options.area) {
+        clearTimeout(this.playTimeout);
+
+        this.currentArea = options.area;
+        this.playTimeout = setTimeout(_.bind(function() {
+          this.play(options);
+        }, this), 500);
+      }
+    },
+
+    play: function(options) {
+      var video = this.options.video;
+      var position = options.area.position();
+
+      video
+        .width(options.baseImage.width())
+        .height(options.baseImage.height());
+
+      this.element
+        .css({
+          left: position.left + 'px',
+          top: position.top + 'px'
+        })
+        .width(options.area.width())
+        .height(options.area.height());
+
+      this.element.linkmapAreaClip(position);
+
+      var videoPlayer = video.data('videoPlayer');
+      videoPlayer.play();
+
+      this.element.addClass('playing');
+    },
+
+    pause: function() {
+      clearTimeout(this.playTimeout);
+      this.currentArea = null;
+
+      var videoPlayer = this.options.video.data('videoPlayer');
+
+      setTimeout(function() {
+        videoPlayer.currentTime(0);
+        videoPlayer.pause();
+      }, 300);
+
+      this.element.removeClass('playing');
+    }
+  });
+}(jQuery));

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

@@ -0,0 +1,112 @@
+(function($) {
+  var markerMargin = 32;
+  var smallSizeBreakpoint = 190;
+
+  $.widget('pageflow.linkmap', {
+    _create: function() {
+      var widget = this;
+
+      this.refresh();
+
+      if (widget.options.hoverVideoEnabled) {
+        widget.options.hoverVideo.activate();
+      }
+
+      this.element.on('mousemove', '.hover_area', function() {
+        var hoverArea = $(this);
+
+        if (widget.options.hoverVideoEnabled) {
+          widget.options.hoverVideo.schedulePlay({
+            area: hoverArea,
+            baseImage: widget.options.baseImage()
+          });
+        }
+      });
+
+      this.element.on('mouseleave', '.hover_area', function() {
+        if (widget.options.hoverVideoEnabled) {
+          widget.options.hoverVideo.pause();
+        }
+      });
+    },
+
+    updateHoverVideoEnabled: function(value) {
+      if (value) {
+        this.options.hoverVideo.activate();
+      }
+      else {
+        this.options.hoverVideo.deactivate();
+      }
+
+      this.options.hoverVideoEnabled = value;
+    },
+
+    refresh: function() {
+      var hoverAreas = this.element.find('.hover_area'),
+          hoverImages = this.element.find('.background_image');
+
+      this._resizeToBaseImage(hoverImages);
+
+      hoverAreas.linkmapAreaClip();
+      hoverAreas.linkmapAreaFormat();
+      hoverAreas.linkmapAreaVisited();
+    },
+
+    _resizeToBaseImage: function(target) {
+      var baseImage = this.options.baseImage();
+
+      target
+        .width(baseImage.width())
+        .height(baseImage.height());
+    }
+  });
+
+  $.fn.linkmapAreaClip = function(optionalPosition) {
+    this.each(function() {
+      var hoverArea = $(this);
+      var clippedElement = hoverArea.find('.panorama_video, .background_image');
+      var position = optionalPosition || hoverArea.position();
+
+      clippedElement.css({
+        left: -position.left + 'px',
+        top: -position.top + 'px'
+      });
+    });
+  };
+
+  $.fn.linkmapAreaFormat = function() {
+    this.each(function() {
+      var hoverArea = $(this);
+      var linkmapMarker = hoverArea.find('.linkmap_marker');
+
+      hoverArea.toggleClass('portrait', hoverArea.width() <= hoverArea.height());
+      hoverArea.toggleClass('landscape', hoverArea.width() > hoverArea.height());
+      hoverArea.toggleClass('small', hoverArea.width() <= smallSizeBreakpoint ||
+                            hoverArea.height() <= smallSizeBreakpoint);
+
+      if (hoverArea.width() <= hoverArea.height()) {
+        linkmapMarker.css({
+          'width': hoverArea.width() - markerMargin,
+          'height': hoverArea.width() - markerMargin,
+        });
+      }
+      else {
+        linkmapMarker.css({
+          'width': hoverArea.height() - markerMargin,
+          'height': hoverArea.height() - markerMargin,
+        });
+      }
+    });
+  };
+
+  $.fn.linkmapAreaVisited = function() {
+    this.each(function() {
+      var hoverArea = $(this);
+      var visited =
+        hoverArea.data('targetType') === 'page' &&
+        pageflow.linkmapPage.visitedPages.indexOf(hoverArea.data('targetId')) >= 0;
+
+      hoverArea.toggleClass('visited', visited);
+    });
+  };
+}(jQuery));