pageflow 0.5.0 → 0.6.0

data/app/assets/javascripts/pageflow/page_types/background_video.js

@@ -1,7 +1,7 @@
 pageflow.pageType.register('background_video', _.extend({
 
   enhance: function(pageElement, configuration) {
-    this._initVideoPlayer(pageElement);
+    this._initVideoPlayer(pageElement, configuration);
   },
 
   prepare: function(pageElement, configuration) {
@@ -19,6 +19,7 @@ pageflow.pageType.register('background_video', _.extend({
     var that = this;
 
     this.videoPlayer.ensureCreated();
+    this._resizeToCover(pageElement, configuration);
 
     if (!pageflow.features.has('mobile platform')) {
       this.prebufferingPromise = this.videoPlayer.prebuffer().then(function() {
@@ -56,6 +57,10 @@ pageflow.pageType.register('background_video', _.extend({
     this.videoPlayer.scheduleDispose();
   },
 
+  resize: function(pageElement, configuration) {
+    this._resizeToCover(pageElement, configuration);
+  },
+
   update: function(pageElement, configuration) {
     pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
     pageElement.find('h2 .title').text(configuration.get('title') || '');
@@ -65,7 +70,11 @@ pageflow.pageType.register('background_video', _.extend({
     this.updateCommonPageCssClasses(pageElement, configuration);
     pageElement.find('.shadow').css({opacity: configuration.get('gradient_opacity') / 100});
 
-    var videoPlayer = this.videoPlayer;
+    var videoPlayer = this.videoPlayer,
+        x = configuration.getFilePosition('video_file_id', 'x'),
+        y = configuration.getFilePosition('video_file_id', 'y'),
+        posterUrl = configuration.getVideoPosterUrl();
+
     videoPlayer.ensureCreated();
 
     if (!this.srcDefined) {
@@ -79,19 +88,17 @@ pageflow.pageType.register('background_video', _.extend({
       this.videoPlayer.src(configuration.getVideoFileSources('video_file_id'));
     }
 
-    pageElement.find('.background_image').css({
-      backgroundImage: 'url("' + configuration.getVideoPosterUrl() + '")'
-    });
-
-    this.updateVideoPoster(pageElement, configuration.getVideoPosterUrl());
+    this.updateBackgroundVideoPosters(pageElement, posterUrl, x, y);
+    this._resizeToCover(pageElement, configuration.attributes);
   },
 
-  _initVideoPlayer: function(pageElement) {
+  _initVideoPlayer: function(pageElement, configuration) {
+    var that = this;
     var template = pageElement.find('[data-template=video]');
 
-    var min_w = 300; // minimum video width allowed
-    var vid_w_orig = template.attr("data-video-width") || 1280;
-    var vid_h_orig = template.attr("data-video-height") || 720;
+    this.min_w = 300; // minimum video width allowed
+    this.vid_w_orig = template.attr("data-video-width") || 1280;
+    this.vid_h_orig = template.attr("data-video-height") || 720;
 
     this.videoPlayer = new pageflow.VideoPlayer.Lazy(template, {
       width: '100%',
@@ -99,30 +106,31 @@ pageflow.pageType.register('background_video', _.extend({
     });
 
     this.videoPlayer.ready(function() {
-      jQuery(window).on('resize', function () { resizeToCover(); });
-      resizeToCover();
+      that._resizeToCover(pageElement, configuration);
     });
+  },
 
-    function resizeToCover() {
-      var video = pageElement.find('video');
-
-      // use largest scale factor of horizontal/vertical
-      var scale_h = jQuery(window).width() / vid_w_orig;
-      var scale_v = jQuery(window).height() / vid_h_orig;
-      var scale = scale_h > scale_v ? scale_h : scale_v;
-
-      // don't allow scaled width < minimum video width
-      if (scale * vid_w_orig < min_w) {
-        scale = min_w / vid_w_orig;
-      }
-
-      // now scale the video
-      video.width(scale * vid_w_orig).height(scale * vid_h_orig);
-      // and center it
-      video.css({
-        "left": "-" + ((video.width() - jQuery(window).width()) / 2) + "px",
-        "top": "-" + ((video.height() - jQuery(window).height()) / 2) + "px"
-      });
+  _resizeToCover: function(pageElement, configuration) {
+    var x = configuration.hasOwnProperty('video_file_x') ? configuration.video_file_x : 50;
+    var y = configuration.hasOwnProperty('video_file_y') ? configuration.video_file_y : 50;
+    var video = pageElement.find('video');
+
+    // use largest scale factor of horizontal/vertical
+    var scale_h = jQuery(window).width() / this.vid_w_orig;
+    var scale_v = jQuery(window).height() / this.vid_h_orig;
+    var scale = scale_h > scale_v ? scale_h : scale_v;
+
+    // don't allow scaled width < minimum video width
+    if (scale * this.vid_w_orig < this.min_w) {
+      scale = this.min_w / this.vid_w_orig;
     }
+
+    // now scale the video
+    video.width(scale * this.vid_w_orig).height(scale * this.vid_h_orig);
+
+    video.css({
+      "left": "-" + ((video.width() - jQuery(pageElement).width()) * x / 100) + "px",
+      "top": "-" + ((video.height() - jQuery(pageElement).height()) * y / 100) + "px"
+    });
   }
 }, pageflow.volumeFade, pageflow.videoHelpers, pageflow.commonPageCssClasses));

data/app/assets/javascripts/pageflow/page_types/mixins/video_helpers.js

@@ -1,21 +1,12 @@
 pageflow.videoHelpers = {
-  updateVideoTagForHighBandwidth: function(video) {
-    if (pageflow.features.has('high bandwidth') && !pageflow.features.has('mobile platform')) {
-      video.attr('poster', video.attr('data-large-poster'));
-
-      if (pageflow.features.has('rewrite video sources support')) {
-        video.find('source').each(function() {
-          var source = $(this);
-          source.attr('src', source.attr('data-high-src'));
-        });
-      }
-    }
-    else {
-      video.attr('poster', video.attr('data-poster'));
-    }
-  },
-
   updateVideoPoster: function(pageElement, imageUrl) {
     pageElement.find('.vjs-poster').css('background-image', 'url(' + imageUrl + ')');
+  },
+
+  updateBackgroundVideoPosters: function(pageElement, imageUrl, x, y) {
+    pageElement.find('.vjs-poster, .background-image').css({
+      'background-image': 'url(' + imageUrl + ');',
+      'background-position': x + '% ' + y + '%;'
+    });
   }
 };

data/app/assets/javascripts/pageflow/ready.js

@@ -1,5 +1,5 @@
 pageflow.ready = new $.Deferred(function(readyDeferred) {
-  onLoadWithTimeout(function() {
+  window.onload = function() {
     pageflow.features.detect().then(function() {
       $('body').one('pagepreloaded', function() {
         readyDeferred.resolve();
@@ -12,16 +12,18 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
         }, {});
 
         pageflow.slides = new pageflow.Slideshow($(this), configurationsById);
-        pageflow.history = new pageflow.History(pageflow.slides);
-      });
 
-      $('.header').header({
-        slideshow: pageflow.slides
+        $('.header').header({
+          slideshow: pageflow.slides
+        });
+        $('.overview').overview();
+        $('.multimedia_alert').multimediaAlert();
+
+        pageflow.widgetTypes.enhance($('body'));
+
+        pageflow.slides.update();
+        pageflow.history = new pageflow.History(pageflow.slides);
       });
-      $('.navigation').navigation();
-      $('.navigation_mobile').navigationMobile();
-      $('.overview').overview();
-      $('.multimedia_alert').multimediaAlert();
 
       $("body").on('click mousedown', 'a, [tabindex]', function() {
         $(this).blur();
@@ -44,20 +46,5 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
         return false; }
       );
     });
-  });
-
-  function onLoadWithTimeout(callback) {
-    var invoked = false;
-    var invokeOnce = function() {
-      clearTimeout(timeout);
-
-      if (!invoked) {
-        callback();
-        invoked = true;
-      }
-    };
-
-    var timeout = setTimeout(invokeOnce, 10000);
-    window.onload = invokeOnce;
-  }
+  };
 }).promise();

data/app/assets/javascripts/pageflow/slideshow.js

@@ -42,7 +42,7 @@ pageflow.Slideshow = function($el, configurations) {
   };
 
   this.back = function() {
-    this.goTo(currentPage.prev('.page'));
+    this.goTo(currentPage.prev('.page'), {position: 'bottom'});
   };
 
   this.next = function() {
@@ -59,7 +59,9 @@ pageflow.Slideshow = function($el, configurations) {
     }
   };
 
-  this.goTo = function(page) {
+  this.goTo = function(page, options) {
+    options = options || {};
+
     if (page.length && !page.is(currentPage)) {
       transitionMutex(function() {
         var previousPage = currentPage;
@@ -69,7 +71,7 @@ pageflow.Slideshow = function($el, configurations) {
         var direction = currentPageIndex > previousPage.index() ? 'forwards' : 'backwards';
 
         previousPage.page('deactivate', {direction: direction});
-        currentPage.page('activate', {direction: direction});
+        currentPage.page('activate', {direction: direction, position: options.position});
 
         preload.start(currentPage);
         $el.trigger('slideshowchangepage');
@@ -158,6 +160,4 @@ pageflow.Slideshow = function($el, configurations) {
   scrollIndicator.on('click', _.bind(function(event) {
     this.next();
   }, this));
-
-  this.update();
 };

data/app/assets/javascripts/pageflow/slideshow/hide_text_on_swipe.js

@@ -9,7 +9,7 @@
         pageflow.hideText.activate();
       });
 
-      this.element.on('touchstart MSPointerDown mousedown', function() {
+      this.element.on('touchstart MSPointerDown pointerdown mousedown', function() {
         if (pageflow.hideText.isActive()) {
           pageflow.hideText.deactivate();
         }

data/app/assets/javascripts/pageflow/slideshow/page_widget.js

@@ -24,6 +24,7 @@
     reactivate: function() {
       if (this.element.hasClass('active')) {
         this.content.scroller('enable');
+        this.content.scroller('resetPosition');
         this.content.scroller('afterAnimationHook');
 
         this._triggerPageTypeHook('activating');
@@ -31,6 +32,11 @@
       }
     },
 
+    cleanup: function() {
+      this._triggerPageTypeHook('deactivating');
+      this._triggerDelayedPageTypeHook('deactivated');
+    },
+
     refreshScroller: function() {
       this.content.scroller('refresh');
     },
@@ -43,6 +49,7 @@
       this.element.addClass('active');
 
       this.content.scroller('enable');
+      this.content.scroller('resetPosition');
       this.content.scroller('afterAnimationHook');
 
       this._trigger('activate', null, {page: this});
@@ -73,6 +80,8 @@
     },
 
     activate: function(options) {
+      options = options || {};
+
       this.element
         .removeClass('animate-out-forwards animate-out-backwards')
         .addClass('animate-in-' + options.direction);
@@ -82,13 +91,14 @@
       }, this), 5);
 
       setTimeout(_.bind(function() {
+        this.content.scroller('enable');
         this.content.scroller('afterAnimationHook');
         this.element.removeClass('animate-in-forwards animate-in-backwards');
 
         this._triggerDelayedPageTypeHook('activated');
       }, this), 1100);
 
-      this.content.scroller('enable');
+      this.content.scroller('resetPosition', {position: options.position});
       this._trigger('activate', null, {page: this});
       this._triggerPageTypeHook('activating');
 

data/app/assets/javascripts/pageflow/slideshow/scroll_indicator_widget.js

@@ -2,10 +2,17 @@
   $.widget('pageflow.scrollIndicator', {
     _create: function() {
       var parent = this.options.parent,
-          that = this;
+        that = this;
 
       parent.on('pageactivate', function(event) {
-        that.element.toggleClass('invert', $(event.target).hasClass('invert'));
+        var page = $(event.target);
+        var invertIndicator = page.data('invertIndicator');
+
+        if (typeof invertIndicator === 'undefined') {
+          invertIndicator = page.hasClass('invert');
+        }
+
+        that.element.toggleClass('invert', invertIndicator);
       });
 
       parent.on('scrollerhintdown', function() {
@@ -26,6 +33,16 @@
       parent.on('scrollernotnearbottom slideshowchangepage', function() {
         that.element.removeClass('visible');
       });
+
+      $.when(pageflow.ready, pageflow.manualStart).done(function() {
+        setTimeout(function() {
+          that.element.addClass('attract');
+          setTimeout(function() {
+            that.element.removeClass('attract');
+          }, 1500);
+        }, 3000);
+      });
+
     }
   });
 }(jQuery));

data/app/assets/javascripts/pageflow/slideshow/scroller_widget.js

@@ -34,7 +34,19 @@
     enable: function() {
       this.iscroll.enable();
       this.iscroll.refresh();
-      this.iscroll.scrollTo(0, 0, 0);
+    },
+
+    resetPosition: function(options) {
+      options = options || {};
+
+      this.iscroll.refresh();
+
+      if (options.position === 'bottom') {
+        this.iscroll.scrollTo(0, this.iscroll.maxScrollY, 0);
+      }
+      else {
+        this.iscroll.scrollTo(0, 0, 0);
+      }
     },
 
     refresh: function() {
@@ -49,6 +61,18 @@
       this.iscroll.disable();
     },
 
+    positionY: function() {
+      return this.iscroll.y;
+    },
+
+    onScroll: function(callback) {
+      this.iscroll.on('scroll', callback);
+    },
+
+    onScrollEnd: function(callback) {
+      this.iscroll.on('scrollEnd', callback);
+    },
+
     _initMoveEvents: function() {
       this.iscroll.on('mousewheelup', _.bind(this._triggerMoveEvent, this));
       this.iscroll.on('mousewheeldown', _.bind(this._triggerMoveEvent, this));
@@ -151,7 +175,7 @@
           allowDown = false,
           startX, startY;
 
-      this.element.on('touchstart MSPointerDown', _.bind(function(event) {
+      this.element.on('touchstart MSPointerDown pointerdown', _.bind(function(event) {
         var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
         startX = point.pageX;
         startY = point.pageY;
@@ -162,7 +186,7 @@
         }
       }, this));
 
-      this.element.on('touchmove MSPointerMove', _.bind(function(event) {
+      this.element.on('touchmove MSPointerMove pointermove', _.bind(function(event) {
         var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
         var deltaX = point.pageX - startX;
         var deltaY = point.pageY - startY;
@@ -181,7 +205,7 @@
         }
       }, this));
 
-      this.element.on('touchend MSPointerUp', _.bind(function(event) {
+      this.element.on('touchend MSPointerUp pointerup', _.bind(function(event) {
         if (allowUp) {
           this._trigger('hintup');
         }
@@ -191,8 +215,9 @@
       }, this));
 
       function isNonTouchPointer(event) {
-        return (event.originalEvent.pointerType &&
-                event.originalEvent.pointerType !== event.originalEvent.MSPOINTER_TYPE_TOUCH);
+        return event.originalEvent.pointerType &&
+          event.originalEvent.pointerType !== event.originalEvent.MSPOINTER_TYPE_TOUCH &&
+          event.originalEvent.pointerType !== 'touch';
       }
     },
 

data/app/assets/javascripts/pageflow/slideshow/swipe_gesture.js

@@ -11,7 +11,7 @@
         maxDuration: 500
       }, this.options);
 
-      this.element.on('touchstart MSPointerDown', _.bind(function(event) {
+      this.element.on('touchstart MSPointerDown pointerdown', _.bind(function(event) {
         if (isNonTouchPointer(event)) { return; }
         var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
 
@@ -24,7 +24,7 @@
         startTime = new Date().getTime();
       }, this));
 
-      this.element.on('touchmove MSPointerMove', _.bind(function(event) {
+      this.element.on('touchmove MSPointerMove pointermove', _.bind(function(event) {
         if (isNonTouchPointer(event)) { return; }
         var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
 
@@ -32,7 +32,7 @@
         distY = point.pageY - startY;
       }, this));
 
-      this.element.on('touchend MSPointerUp', _.bind(function(event) {
+      this.element.on('touchend MSPointerUp pointerup', _.bind(function(event) {
         if (isNonTouchPointer(event)) { return; }
         var elapsedTime = new Date().getTime() - startTime;
 
@@ -53,8 +53,9 @@
       }, this));
 
       function isNonTouchPointer(event) {
-        return (event.originalEvent.pointerType &&
-                event.originalEvent.pointerType !== event.originalEvent.MSPOINTER_TYPE_TOUCH);
+        return event.originalEvent.pointerType &&
+          event.originalEvent.pointerType !== event.originalEvent.MSPOINTER_TYPE_TOUCH &&
+          event.originalEvent.pointerType !== 'touch';
       }
     }
   });