pageflow 0.10.0 → 0.11.0

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

@@ -52,6 +52,8 @@
       else {
         this.iscroll.scrollTo(0, 0, 0);
       }
+
+      this._triggerBoundaryEvents();
     },
 
     scrollBy: function(deltaX, deltaY, time, easing) {
@@ -78,7 +80,7 @@
     },
 
     afterAnimationHook: function() {
-      this._triggerNearBottomEvents();
+      this._triggerBoundaryEvents();
     },
 
     disable: function() {
@@ -132,6 +134,11 @@
       this.iscroll.on('afterkeyboard', _.bind(this._triggerNearTopEvents, this));
     },
 
+    _triggerBoundaryEvents: function() {
+      this._triggerNearTopEvents();
+      this._triggerNearBottomEvents();
+    },
+
     _triggerNearBottomEvents: function() {
       if (this._atBoundary('down', {delta: 50})) {
         this._trigger('nearbottom');

data/app/assets/javascripts/pageflow/ui/views/inputs/slider_input_view.js

@@ -16,8 +16,8 @@ pageflow.SliderInputView = Backbone.Marionette.ItemView.extend({
   onRender: function() {
     this.ui.widget.slider({
       animate: 'fast',
-      min: 0,
-      max: 100
+      min: 'minValue' in this.options ? this.options.minValue : 0,
+      max: 'maxValue' in this.options ? this.options.maxValue : 100,
     });
 
     this.load();
@@ -25,12 +25,23 @@ pageflow.SliderInputView = Backbone.Marionette.ItemView.extend({
 
   save: function() {
     var value = this.ui.widget.slider('option', 'value');
-    this.ui.value.text(value + '%');
+    var unit = 'unit' in this.options ? this.options.unit : '%';
+
+    this.ui.value.text(value + unit);
 
     this.model.set(this.options.propertyName, value);
   },
 
   load: function() {
-    this.ui.widget.slider('option', 'value', this.model.get(this.options.propertyName));
+    var value;
+
+    if (this.model.has(this.options.propertyName)) {
+      value = this.model.get(this.options.propertyName)
+    }
+    else {
+      value = 'defaultValue' in this.options ? this.options.defaultValue : 0
+    }
+
+    this.ui.widget.slider('option', 'value', value);
   }
 });

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

@@ -0,0 +1,9 @@
+pageflow.widgets = {
+  isPresent: function(name) {
+    return !!$('div.widget_' + name + '_present').length;
+  },
+
+  areLoaded: function() {
+    return !!$('div.widgets_present').length;
+  }
+};

data/app/assets/javascripts/pageflow/widgets/auto_hide_player_controls.js

@@ -0,0 +1,59 @@
+jQuery.widget('pageflow.autoHidePlayerControls', {
+  attach: function(player) {
+    var element = this.element;
+    var options = this.options;
+    var pageElement = this.options.pageElement;
+    var target = this.options.target;
+    var timeout;
+
+    pageElement.on('mousemove', autoHideControls);
+    $('body').on('keydown', autoHideControls);
+    pageElement.find('.content').on('touchstart', autoHideControls);
+
+    player.on('play', function() {
+      autoHideControls();
+    });
+
+    player.on('pause', showControls);
+
+    element.on('mouseenter', function() {
+      target.addClass('is_control_bar_hovered');
+    });
+
+    element.on('mouseleave', function() {
+      target.removeClass('is_control_bar_hovered');
+    });
+
+    function autoHideControls() {
+      showControls();
+      if (!pageflow.browser.has('phone platform')) {
+        clearTimeout(timeout);
+        timeout = setTimeout(hideControls, 2000);
+      }
+    }
+
+    function hideControls() {
+      if (!player.paused()) {
+        target.addClass('is_idle');
+        element.addClass('has_been_faded');
+
+        if (options.onHide) {
+          options.onHide();
+        }
+      }
+    }
+
+    function showControls() {
+      target.removeClass('is_idle');
+
+      if (options.onShow) {
+        options.onShow();
+      }
+    }
+  },
+
+  reset: function(options) {
+    this.element
+      .removeClass('has_been_faded');
+  }
+});

data/app/assets/javascripts/pageflow/widgets/header.js

@@ -4,32 +4,36 @@ jQuery(function($) {
       var slideshow = this.options.slideshow,
           that = this;
 
-    slideshow.on('pageactivate', function(event) {
-        updateClasses($(event.target));
+      slideshow.on('pageactivate', function(event, options) {
+        updateClasses(slideshow.currentPage(), options);
       });
 
       slideshow.on('scrollerneartop', function(event) {
-        that.element.addClass('near_top');
+        var page = $(event.target).parents('section');
+
+        if (page.is(slideshow.currentPage())) {
+          that.element.addClass('near_top');
+        }
       });
 
       slideshow.on('scrollernotneartop', function(event) {
         var page = $(event.target).parents('section');
 
-        if (page.hasClass('active')) {
+        if (page.is(slideshow.currentPage())) {
           that.element.removeClass('near_top');
         }
       });
 
-      if (slideshow.currentPage()) {
-        updateClasses(slideshow.currentPage());
+      if (slideshow.currentPage().length) {
+        updateClasses(slideshow.currentPage(), {});
       }
 
+      this.element.addClass('near_top');
       this.element.find('.header input').placeholder();
 
       function updateClasses(page) {
         that.element.toggleClass('invert', page.hasClass('invert'));
         that.element.toggleClass('first_page', page.index() === 0);
-        that.element.addClass('near_top');
       }
     }
   });

data/app/assets/javascripts/pageflow/widgets/hide_content_during_playback.js

@@ -0,0 +1,68 @@
+jQuery.widget('pageflow.hideContentDuringPlayback', {
+  attach: function(player) {
+    var scrollIndicator = this.options.scrollIndicator;
+    var content = this.element.find('.scroller, .controls, .shadow');
+    var waitingOnUnderrun = false;
+    var widget = this;
+
+    this.scroller = this.element.find('.scroller');
+
+    player.on('bufferunderrun', function() {
+      waitingOnUnderrun = true;
+    });
+
+    player.on('bufferunderruncontinue', function() {
+      waitingOnUnderrun = false;
+    });
+
+    player.on('pause', function() {
+      content.addClass('lock-showing');
+
+      if (!waitingOnUnderrun) {
+        content.addClass('is_paused').removeClass('is_playing');
+        widget._removeDelayedIsPlayingClass();
+
+        scrollIndicator.enable();
+      }
+    });
+
+    player.on('play', function() {
+      content.removeClass('lock-showing is_paused').addClass('is_playing');
+      widget._addDelayedIsPlayingClass();
+
+      if (pageflow.widgets.isPresent('classic_player_controls')) {
+        scrollIndicator.scheduleDisable();
+      }
+      else {
+        scrollIndicator.disable();
+      }
+    });
+
+    player.on('ended', function() {
+      content.addClass('lock-showing');
+      content.addClass('is_paused').removeClass('is_playing');
+
+      widget._removeDelayedIsPlayingClass();
+
+      scrollIndicator.enable();
+    });
+
+    content.addClass('lock-showing is_paused');
+  },
+
+  _addDelayedIsPlayingClass: function() {
+    this.scroller.addClass('is_playing_delayed');
+    clearTimeout(this.delayedPlayingClassTimeout);
+    this.delayedPlayingClassTimeout = null;
+  },
+
+  _removeDelayedIsPlayingClass: function() {
+    var scroller = this.scroller;
+
+    if (!this.delayedPlayingClassTimeout) {
+      this.delayedPlayingClassTimeout = setTimeout(function() {
+        scroller.removeClass('is_playing_delayed');
+      }, 700);
+    }
+  },
+});

data/app/assets/javascripts/pageflow/widgets/loading_spinner.js

@@ -3,6 +3,8 @@
     _create: function() {
       var element = this.element;
 
+      pageflow.nativeScrolling.preventScrollBouncing(element);
+
       setTimeout(function() {
         pageflow.ready.then(function() {
           element.addClass('fade');

data/app/assets/javascripts/pageflow/widgets/mark_with_played_states.js

@@ -0,0 +1,23 @@
+jQuery.widget('pageflow.markWithPlayedStates', {
+  attach: function(player) {
+    var element = this.element;
+
+    player.on('play', function() {
+      element.removeClass('unplayed');
+    });
+
+    player.on('pause', function() {
+      element.addClass('has_played');
+    });
+  },
+
+  reset: function(options) {
+    this.element.toggleClass('unplayed', !this._willAutoplay(options));
+    this.element.removeClass('has_played');
+  },
+
+  _willAutoplay: function(options) {
+    options = options || {};
+    return options.autoplay && !pageflow.browser.has('mobile platform');
+  }
+});

data/app/assets/javascripts/pageflow/widgets/multimedia_alert.js

@@ -38,6 +38,8 @@
           hide();
         });
       }, this);
+
+      pageflow.nativeScrolling.preventScrollBouncing(this.element);
     }
   });
 }(jQuery));

data/app/assets/javascripts/pageflow/widgets/navigation.js

@@ -5,7 +5,6 @@
     _create: function() {
       var element = this.element,
           overlays = element.find('.navigation_site_detail'),
-          hasHomeButton = !!element.find('.navigation_home').length,
           toggleIndicators = function() {};
 
       element.addClass('js').append(overlays);
@@ -13,8 +12,7 @@
       $('a.navigation_top', element).topButton();
 
       $('.navigation_bar_bottom', element)
-        .append($('.navigation_bar_top > li', element).slice(hasHomeButton ? 4 : 3));
-
+        .append($('.navigation_bar_top > li', element).slice(-2));
 
       $('.navigation_volume_box', element).volumeSlider({orientation: 'h'});
       $('.navigation_mute', element).muteButton();
@@ -45,9 +43,9 @@
 
       /* share-button */
       $('.navigation_menu .navigation_menu_box a', element).focus(function() {
-        $(this).parent().parent().addClass('focused');
+        $(this).parents('.navigation_menu').addClass('focused');
       }).blur(function() {
-        $(this).parent().parent().removeClass('focused');
+        $(this).parents('.navigation_menu').removeClass('focused');
       });
 
       var shareBox = $('.navigation_share_box', element),

data/app/assets/javascripts/pageflow/widgets/navigation_mobile.js

@@ -8,6 +8,8 @@
           element = this.element,
           scroller;
 
+      pageflow.nativeScrolling.preventScrollBouncing(element);
+
       $('body').on('touchstart mousedown MSPointerDown pointerdown', function(event) {
         if (element.hasClass('active') && !$(event.target).parents().filter(element).length) {
           element.removeClass('active imprint sharing');

data/app/assets/javascripts/pageflow/widgets/overview.js

@@ -62,7 +62,8 @@ jQuery(function($) {
         });
 
         wrapper.pageNavigationList({
-          scroller: scroller
+          scroller: scroller,
+          scrollToActive: '.ov_chapter'
         });
 
         this.element.find('.scroll_indicator.left').scrollButton({

data/app/assets/javascripts/pageflow/widgets/page_navigation_list.js

@@ -9,8 +9,8 @@
       var links = element.find('a[href]');
 
       var chapterFilter = pageflow.ChapterFilter.create();
-      var highlightedPage = pageflow.HighlightedPage.create();
-      var animation = pageflow.PageNavigationListAnimation.create()
+      var highlightedPage = pageflow.HighlightedPage.create(options.highlightedPage);
+      var animation = pageflow.PageNavigationListAnimation.create();
 
       pageflow.ready.then(function() {
         highlightUnvisitedPages(pageflow.visited.getUnvisitedPages());
@@ -52,7 +52,11 @@
 
           if (active) {
             if (options.scrollToActive) {
-              scroller.scrollToElement(link[0], highlightOptions.animate ? 800 : 0);
+              var target = options.scrollToActive === true ?
+                link :
+                link.parents(options.scrollToActive);
+
+              scroller.scrollToElement(target[0], highlightOptions.animate ? 800 : 0);
             }
           }
         });

data/app/assets/javascripts/pageflow/widgets/player_controls.js

@@ -33,22 +33,24 @@ jQuery.widget('pageflow.playerControls', {
         }
       }
 
-      $(progressHandler).css({left: percent + "%"});
-      $(playProgress).css({width: percent + "%"});
+      var handlerLeft = ((progressHolder.width() - progressHandler.width()) * percent / 100);
+
+      progressHandler.css({left: handlerLeft + 'px'});
+      playProgress.css({width: percent + "%"});
     });
 
     player.on('play', function (position, duration) {
       $(playButton).removeClass('vjs-play');
-      $(playButton).addClass('vjs-pause');
+      $(playButton).addClass('vjs-pause vjs-playing');
     });
 
     player.on('pause', function (position, duration) {
-      $(playButton).removeClass('vjs-pause');
+      $(playButton).removeClass('vjs-pause vjs-playing');
       $(playButton).addClass('vjs-play');
     });
 
     player.on('ended', function (position, duration) {
-      $(playButton).removeClass('vjs-pause');
+      $(playButton).removeClass('vjs-pause vjs-playing');
       $(playButton).addClass('vjs-play');
     });
 
@@ -84,8 +86,7 @@ jQuery.widget('pageflow.playerControls', {
     });
 
     $(progressHolder).on('mousedown touchstart', function(event) {
-      var newProgress = (event.pageX - $(progressHolder).offset().left) / $(progressHolder).width();
-      player.seek(newProgress * player.duration);
+      player.seek(getSeekPosition(event));
 
       $('body').on({
         'mousemove touchmove': onMouseMove,
@@ -93,18 +94,7 @@ jQuery.widget('pageflow.playerControls', {
       });
 
       function onMouseMove(event) {
-        var pageX;
-        if(event.originalEvent.changedTouches || event.originalEvent.touches) {
-          pageX = event.originalEvent.changedTouches[0].pageX || event.originalEvent.touches[0].pageX;
-        } else {
-          pageX = event.pageX;
-        }
-        var newProgress = (pageX - $(progressHolder).offset().left) / $(progressHolder).width();
-
-        if (newProgress > 1) { newProgress = 1; }
-        if (newProgress < 0) { newProgress = 0; }
-
-        player.seek(newProgress * player.duration);
+        player.seek(getSeekPosition(event));
       }
 
       function onMouseUp() {
@@ -113,6 +103,21 @@ jQuery.widget('pageflow.playerControls', {
           'mouseup touchend': onMouseUp
         });
       }
+
+      function getSeekPosition(event) {
+        var position = getPointerPageX(event) - $(progressHolder).offset().left;
+        var fraction = position / $(progressHolder).width();
+
+        return Math.min(Math.max(fraction, 0), 1) * player.duration;
+      }
+
+      function getPointerPageX(event) {
+        if (event.originalEvent.changedTouches) {
+          return event.originalEvent.changedTouches[0].pageX;
+        } else {
+          return event.pageX;
+        }
+      }
     });
   }
 });