pageflow 0.10.0 → 0.11.0

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

@@ -1,5 +1,6 @@
 pageflow.HighlightedPage = pageflow.Object.extend({
-  initialize: function(entryData) {
+  initialize: function(entryData, options) {
+    this.customNavigationBarMode = options && options.customNavigationBarMode;
     this.entry = entryData;
   },
 
@@ -28,7 +29,12 @@ pageflow.HighlightedPage = pageflow.Object.extend({
   },
 
   getNavigationBarMode: function(storylineId) {
-    return this.entry.getStorylineConfiguration(storylineId).navigation_bar_mode;
+    if (this.customNavigationBarMode) {
+      return this.customNavigationBarMode(storylineId, this.entry);
+    }
+    else {
+      return this.entry.getStorylineConfiguration(storylineId).navigation_bar_mode;
+    }
   },
 
   getChapterPagesUntil: function(pagePermaId) {
@@ -43,6 +49,6 @@ pageflow.HighlightedPage = pageflow.Object.extend({
   }
 });
 
-pageflow.HighlightedPage.create = function() {
-  return new pageflow.HighlightedPage(pageflow.entryData);
+pageflow.HighlightedPage.create = function(options) {
+  return new pageflow.HighlightedPage(pageflow.entryData, options);
 };

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

@@ -1,17 +1,10 @@
 pageflow.links = {
   setup: function() {
-    this.preventFocusRectOnClick();
     this.ensureClickOnEnterKeyPress();
     this.setupContentSkipLinks();
     this.ensureTargetBlankForContentLinks();
   },
 
-  preventFocusRectOnClick: function() {
-    $('body').on('click mousedown', 'a, [tabindex]', function() {
-      $(this).blur();
-    });
-  },
-
   ensureClickOnEnterKeyPress: function() {
     $('body').on('keypress', 'a, [tabindex]', function(e) {
       if (e.which == 13) {

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

@@ -20,6 +20,9 @@ pageflow.pageType.register('audio', _.extend({
     //
 
     this._ensureAudioPlayer(pageElement, configuration);
+    pageElement.find('.audioPage').markWithPlayedStates('reset', {
+      autoplay: configuration.autoplay !== false
+    });
 
     var that = this;
 
@@ -118,5 +121,15 @@ pageflow.pageType.register('audio', _.extend({
 
     pageElement.find('.player_mute').muteButton();
     pageElement.find('.player_skip').skipPageButton();
+
+    pageElement.find('.audioPage')
+      .markWithPlayedStates()
+      .markWithPlayedStates('attach', this.audioPlayer);
+
+    pageElement
+      .hideContentDuringPlayback({
+        scrollIndicator: this.scrollIndicator
+      })
+      .hideContentDuringPlayback('attach', this.audioPlayer);
   }
 }, pageflow.volumeFade, pageflow.infoBox, pageflow.commonPageCssClasses));

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

@@ -9,6 +9,9 @@ pageflow.infoBox = {
     infoBox.find('h3').html(configuration.get('additional_title') || '');
     infoBox.find('p').html(configuration.get('additional_description') || '');
 
-    infoBox.toggleClass('empty', !configuration.get('additional_description') && !configuration.get('additional_title'));
+    infoBox.toggleClass('empty', !configuration.get('additional_description') &&
+      !configuration.get('additional_title'));
+    infoBox.toggleClass('title_empty', !configuration.get('additional_title'));
+    infoBox.toggleClass('description_empty', !configuration.get('additional_description'));
   }
-};
+};

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

@@ -27,6 +27,13 @@ pageflow.pageType.register('video', _.extend({
     //
 
     this.videoPlayer.ensureCreated();
+    pageElement.find('.controls')
+      .autoHidePlayerControls('reset');
+
+    pageElement.find('.videoPage')
+      .markWithPlayedStates('reset', {
+        autoplay: configuration.autoplay !== false
+      });
 
     if (pageflow.browser.has('mobile platform')) {
       this.videoPlayer.showPosterImage();
@@ -49,10 +56,11 @@ pageflow.pageType.register('video', _.extend({
     var videoPlayer = this.videoPlayer;
     var that = this;
 
-    if (pageflow.browser.has('mobile platform')) {
-       videoPlayer.src(videoPlayer.srcFromOptions()); // needed for iOS
+    if (pageflow.browser.has('ios platform')) {
+      videoPlayer.src(videoPlayer.srcFromOptions());
     }
-    else {
+
+    if (!pageflow.browser.has('mobile platform')) {
       videoPlayer.prebuffer().done(function() {
         videoPlayer.hidePosterImage();
 
@@ -70,9 +78,6 @@ pageflow.pageType.register('video', _.extend({
     this.fadeSound(this.videoPlayer, 0, 400);
     this.stopListening();
     $('body').off('keyup');
-
-    $('.entry .scroll_indicator').removeClass('faded');
-    clearTimeout(this.scrollIndicatorTimeout);
   },
 
   deactivated: function(pageElement, configuration) {
@@ -111,7 +116,7 @@ pageflow.pageType.register('video', _.extend({
 
   _initVideoPlayer: function(pageElement, configuration) {
     var that = this;
-
+    var scrollIndicator = this.scrollIndicator;
     var videoPlayer = new pageflow.VideoPlayer.Lazy(pageElement.find('[data-template=video]'), {
       bufferUnderrunWaiting: true,
       controls: true,
@@ -135,20 +140,33 @@ pageflow.pageType.register('video', _.extend({
     videoPlayer.ready(function() {
       videoPlayer.showPosterImage();
 
-      var addInfoBox = pageElement.find('.add_info_box'),
+      var pageContent = pageElement.find('.scroller, .controls, .shadow'),
+          wrapper = pageElement.find('.videoPage'),
           controls = pageElement.find('.controls'),
           controlBar = pageElement.find('.vjs-control-bar'),
           playButton = pageElement.find('.vjs-play-control'),
           loadingSpinner = pageElement.find('.vjs-loading-spinner'),
-          poster = pageElement.find('.vjs-poster'),
-          video =  pageElement.find('video');
+          poster = pageElement.find('.vjs-poster');
 
       controlBar.appendTo(controls);
 
-      var additionalControlsHtml = '<div class="player_skip" tabindex="4"></div><div class="player_fullscreen" tabindex="4"></div><div class="player_volume"><div class="volume-control"><div tabindex="0" class="player_volume_bar player_slider volume-slider"><div class="player_volume_level volume-level"></div><div class="player_volume_handle player_slider_handle volume-handle"></div></div></div><div class="player_mute volume-mute-button" tabindex="4"></div></div>';
+      var additionalControlsHtml =
+        '<div class="player_skip" tabindex="4"></div>' +
+        '<div class="player_fullscreen" tabindex="4"></div>' +
+        '<div class="player_volume">' +
+        '  <div class="volume-control">' +
+        '    <div tabindex="0" class="player_volume_bar player_slider volume-slider">' +
+        '      <div class="player_volume_level volume-level"></div>' +
+        '      <div class="player_volume_handle player_slider_handle volume-handle"></div>' +
+        '    </div>' +
+        '  </div>' +
+        '  <div class="player_mute volume-mute-button" tabindex="4"></div>' +
+        '</div>' +
+        '<div class="control_bar_text">' +
+        controls.data('controlBarText') +
+        '</div>';
 
       $(additionalControlsHtml).appendTo(controlBar);
-      //pageElement.find('.scroller').after(controls);
 
       controlBar.addClass('vjs-default-skin vjs-player');
       playButton.before(loadingSpinner);
@@ -196,38 +214,11 @@ pageflow.pageType.register('video', _.extend({
         });
       }
 
-      var timeout, scrollIndicatorTimeout,
-          scrollIndicator = $('.entry .scroll_indicator'),
-          pageContent = pageElement.find('.scroller, .controls, .shadow');
-
-      pageContent.addClass('lock-showing');
-
-      videoPlayer.on("pause", function() {
-        pageContent.addClass('lock-showing');
-
-        scrollIndicator.removeClass('faded');
-        clearTimeout(scrollIndicatorTimeout);
-      });
-
       videoPlayer.on('beforeplay', function() {
         loadingSpinner.addClass('showing-for-underrun');
       });
 
-      videoPlayer.on("play", function() {
-        pageContent.removeClass('lock-showing');
-
-        if (pageElement.hasClass('active')) {
-          clearTimeout(scrollIndicatorTimeout);
-          scrollIndicatorTimeout = that.scrollIndicatorTimeout = setTimeout(function() {
-            scrollIndicator.addClass('faded');
-          }, 2000);
-        }
-      });
-
       videoPlayer.on("ended", function() {
-        scrollIndicator.removeClass('faded');
-        clearTimeout(scrollIndicatorTimeout);
-
         if (pageflow.browser.has('mobile platform')) {
           videoPlayer.showPosterImage();
         }
@@ -237,9 +228,32 @@ pageflow.pageType.register('video', _.extend({
         }
       });
 
-      pageElement.on('mousemove', autoHideControls);
-      $('body').on('keydown', autoHideControls);
-      pageElement.find('.content').on('touchstart', autoHideControls);
+      pageElement
+        .hideContentDuringPlayback({
+          scrollIndicator: scrollIndicator
+        })
+        .hideContentDuringPlayback('attach', videoPlayer);
+
+      wrapper
+        .markWithPlayedStates({
+          target: wrapper,
+        })
+        .markWithPlayedStates('attach', videoPlayer);
+
+      controls
+        .autoHidePlayerControls({
+          pageElement: pageElement,
+          target: wrapper,
+
+          onShow: function() {
+            pageContent.addClass('fade-in').removeClass('fade-out');
+          },
+
+          onHide: function() {
+            pageContent.addClass('fade-out').removeClass('fade-in');
+          }
+        })
+        .autoHidePlayerControls('attach', videoPlayer);
 
       pageElement.find('.volume-control').volumeSlider({
         orientation: 'v'
@@ -249,23 +263,15 @@ pageflow.pageType.register('video', _.extend({
       pageElement.find('.player_skip').skipPageButton();
       pageElement.find('.player_fullscreen').fullscreenButton();
 
-      function autoHideControls() {
-        showControls();
-        if (!pageflow.browser.has('phone platform')) {
-          clearTimeout(timeout);
-          timeout = setTimeout(hideControls, 2000);
-        }
-      }
-
-      function hideControls() {
-        if (!videoPlayer.paused()) {
-          pageContent.addClass('fade-out').removeClass('fade-in');
-        }
-      }
-
-      function showControls() {
-        pageContent.addClass('fade-in').removeClass('fade-out');
-      }
+      that._ensureAndroidPhoneControlsCanBeDisplayedViaTouch(pageElement);
     });
+  },
+
+  _ensureAndroidPhoneControlsCanBeDisplayedViaTouch: function(pageElement) {
+    if (pageflow.browser.has('phone platform')) {
+      pageElement.find('video').on('touchend', function(event) {
+        event.stopPropagation();
+      });
+    }
   }
 }, pageflow.volumeFade, pageflow.videoHelpers, pageflow.infoBox, pageflow.commonPageCssClasses));

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

@@ -2,8 +2,9 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
   window.onload = function() {
     pageflow.browser.detectFeatures().then(function() {
       var slideshow = $('[data-role=slideshow]');
+      var body = $('body');
 
-      $('body').one('pagepreloaded', function() {
+      body.one('pagepreloaded', function() {
         readyDeferred.resolve();
       });
 
@@ -26,12 +27,13 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
             $('.overview').overview();
             $('.multimedia_alert').multimediaAlert();
 
-            pageflow.widgetTypes.enhance($('body'));
+            pageflow.widgetTypes.enhance(body);
           }
         });
       });
 
       pageflow.links.setup();
+      pageflow.FocusOutline.setup(body);
       pageflow.nativeScrolling.preventScrollingOnEmbed(slideshow);
     });
   };

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

@@ -2,6 +2,7 @@
 //=require ./slideshow/lazy_page_widget
 //=require ./slideshow/page_widget
 //=require ./slideshow/scroller_widget
+//=require ./slideshow/scroll_indicator
 //=require ./slideshow/scroll_indicator_widget
 //=require ./slideshow/hidden_text_indicator_widget
 //=require ./slideshow/progressive_preload

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

@@ -61,7 +61,7 @@
     update: function() {
       var configuration = this.slideshow.currentPageConfiguration();
 
-      if (!this.disabled) {
+      if (!this.disabled && !pageflow.browser.has('mobile platform')) {
         this.multiPlayer.fadeTo(configuration[attributeName]);
       }
     },

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

@@ -10,7 +10,7 @@ pageflow.hideText = (function() {
   }
 
   $(function() {
-    element().on('keydown', function(e) {
+    element().on('keydown', function(event) {
       if(event.keyCode == 27) {
         pageflow.hideText.deactivate();
       }
@@ -43,6 +43,10 @@ pageflow.hideText = (function() {
 
     on: function(event, callback) {
       element().on(prefix(event), callback);
+    },
+
+    off: function(event, callback) {
+      element().off(prefix(event), callback);
     }
   };
 }());

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

@@ -5,6 +5,8 @@
       this.configuration = this.element.data('configuration') || this.options.configuration;
       this.index = this.options.index;
 
+      this._setupNearBoundaryCssClasses();
+
       this.reinit();
     },
 
@@ -35,6 +37,7 @@
 
       this.content.scroller(this.pageType.scrollerOptions || {});
       this.pageType.scroller = this.content.scroller('instance');
+      this.pageType.scrollIndicator = new pageflow.ScrollIndicator(this.element);
 
       this._setupHideTextOnSwipe();
 
@@ -184,6 +187,20 @@
           !this.pageType.noHideTextOnSwipe) {
         this.content.hideTextOnSwipe();
       }
+    },
+
+    _setupNearBoundaryCssClasses: function() {
+      var element = this.element;
+
+      _(['top', 'bottom']).each(function(boundary) {
+        element.on('scrollernear' + boundary, function() {
+          element.addClass('is_near_' + boundary);
+        });
+
+        element.on('scrollernotnear' + boundary, function() {
+          element.removeClass('is_near_' + boundary);
+        });
+      });
     }
   });
 }(jQuery));

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

@@ -0,0 +1,27 @@
+pageflow.ScrollIndicator = pageflow.Object.extend({
+  initialize: function(pageElement) {
+    this.pageElement = pageElement;
+  },
+
+  disable: function() {
+    if (this._isPageActive()) {
+      pageflow.events.trigger('scroll_indicator:disable');
+    }
+  },
+
+  scheduleDisable: function() {
+    if (this._isPageActive()) {
+      pageflow.events.trigger('scroll_indicator:schedule_disable');
+    }
+  },
+
+  enable: function(text) {
+    if (this._isPageActive()) {
+      pageflow.events.trigger('scroll_indicator:enable');
+    }
+  },
+
+  _isPageActive: function() {
+    return this.pageElement.hasClass('active');
+  }
+});

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

@@ -9,15 +9,10 @@
       var parent = this.options.parent,
           direction = this.element.data('direction'),
           boundary = boundaries[direction],
-          that = this;
+          that = this,
+          fadeTimeout;
 
       function update(page) {
-        var invertIndicator = page.data('invertIndicator');
-
-        if (typeof invertIndicator === 'undefined') {
-          invertIndicator = page.hasClass('invert');
-        }
-
         if (page.hasClass('scroll_indicator_mode_non') ||
             (page.hasClass('scroll_indicator_mode_only_next') && direction === 'up') ||
             (page.hasClass('scroll_indicator_mode_only_back') && direction === 'down')) {
@@ -28,21 +23,69 @@
           that.element.show();
         }
 
-        that.element.toggleClass('invert', invertIndicator);
+        that.element.toggleClass('hidden_for_page', hideScrollIndicatorForPage(page));
+
+        that.element.toggleClass('invert', invertIndicator(page));
         that.element.toggleClass('horizontal', page.hasClass('scroll_indicator_orientation_horizontal'));
         that.element.toggleClass('available', targetPageExists());
       }
 
+      function invertIndicator(page) {
+        var result = page.data('invertIndicator');
+
+        if (typeof result === 'undefined') {
+          result = page.hasClass('invert') && !hasSlimPlayerControls(page);
+        }
+
+        return result;
+      }
+
+      function hideScrollIndicatorForPage(page) {
+        return hasSlimPlayerControls(page) ||
+          !pageflow.widgets.areLoaded();
+      }
+
+      function hasSlimPlayerControls(page) {
+        return hasPlayerControls(page) && pageflow.widgets.isPresent('slim_player_controls');
+      }
+
+      function hasPlayerControls(page) {
+        return !!page.find('[data-role="player_controls"]').length;
+      }
+
       function targetPageExists() {
         return direction === 'down' ? parent.nextPageExists() : parent.previousPageExists();
       }
 
       parent.on('pageactivate', function(event) {
         update($(event.target));
+
+        clearTimeout(fadeTimeout);
+        that.element.removeClass('faded');
       });
 
-      pageflow.events.on('page:update', function() {
-        update(parent.currentPage());
+      pageflow.events.on({
+        'page:update': function() {
+          update(parent.currentPage());
+        },
+
+        'scroll_indicator:disable': function() {
+          clearTimeout(fadeTimeout);
+          that.element.addClass('hidden_for_page');
+        },
+
+        'scroll_indicator:schedule_disable': function() {
+          clearTimeout(fadeTimeout);
+
+          fadeTimeout = setTimeout(function() {
+            that.element.addClass('faded');
+          }, 2000);
+        },
+
+        'scroll_indicator:enable': function() {
+          clearTimeout(fadeTimeout);
+          that.element.removeClass('faded hidden_for_page');
+        },
       });
 
       parent.on('scrollerhint' + direction, function() {