pageflow 0.8.2 → 0.9.0

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

@@ -6,7 +6,7 @@ pageflow.pageType.register('background_video', _.extend({
 
   prepare: function(pageElement, configuration) {
 
-    if (!pageflow.features.has('mobile platform')) {
+    if (!pageflow.browser.has('mobile platform')) {
       this.videoPlayer.ensureCreated();
     }
   },
@@ -21,7 +21,7 @@ pageflow.pageType.register('background_video', _.extend({
     this.videoPlayer.ensureCreated();
     this._resizeToCover(pageElement, configuration);
 
-    if (!pageflow.features.has('mobile platform')) {
+    if (!pageflow.browser.has('mobile platform')) {
       this.prebufferingPromise = this.videoPlayer.prebuffer().then(function() {
         that.videoPlayer.volume(0);
         that.videoPlayer.play();
@@ -38,7 +38,7 @@ pageflow.pageType.register('background_video', _.extend({
   activated: function(pageElement, configuration) {
     var that = this;
 
-    if (!pageflow.features.has('mobile platform')) {
+    if (!pageflow.browser.has('mobile platform')) {
       this.prebufferingPromise.then(function() {
         that.fadeSound(that.videoPlayer, pageflow.settings.get('volume'), 1000);
       });
@@ -70,26 +70,26 @@ pageflow.pageType.register('background_video', _.extend({
     this.updateCommonPageCssClasses(pageElement, configuration);
     pageElement.find('.shadow').css({opacity: configuration.get('gradient_opacity') / 100});
 
-    var videoPlayer = this.videoPlayer,
-        x = configuration.getFilePosition('video_file_id', 'x'),
+    var x = configuration.getFilePosition('video_file_id', 'x'),
         y = configuration.getFilePosition('video_file_id', 'y'),
         posterUrl = configuration.getVideoPosterUrl();
 
-    videoPlayer.ensureCreated();
-
-    if (!this.srcDefined) {
-      videoPlayer.ready(function() {
-        videoPlayer.src(configuration.getVideoFileSources('video_file_id'));
-      });
-    }
+    this.updateBackgroundVideoPosters(pageElement, posterUrl, x, y);
 
-    if (!this.srcDefined || configuration.hasChanged('video_file_id')) {
-      this.srcDefined = true;
-      this.videoPlayer.src(configuration.getVideoFileSources('video_file_id'));
+    if (this.videoPlayer.isPresent()) {
+      this._resizeToCover(pageElement, configuration.attributes);
     }
+  },
 
-    this.updateBackgroundVideoPosters(pageElement, posterUrl, x, y);
-    this._resizeToCover(pageElement, configuration.attributes);
+  embeddedEditorViews: function() {
+    return {
+      '.backgroundArea': {
+        view: pageflow.LazyVideoEmbeddedView,
+        options: {
+          propertyName: 'video_file_id'
+        }
+      }
+    };
   },
 
   _initVideoPlayer: function(pageElement, configuration) {
@@ -104,6 +104,7 @@ pageflow.pageType.register('background_video', _.extend({
       width: '100%',
       height: '100%'
     });
+    pageElement.find('.backgroundArea').data('videoPlayer', this.videoPlayer);
 
     this.videoPlayer.ready(function() {
       that._resizeToCover(pageElement, configuration);

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

@@ -3,9 +3,34 @@ pageflow.commonPageCssClasses = {
     pageElement.toggleClass('invert', configuration.get('invert'));
     pageElement.toggleClass('hide_title', configuration.get('hide_title'));
 
-    _.each(pageflow.Page.textPositions, function(position) {
-      pageElement.removeClass('text_position_' + position);
-    });
-    pageElement.addClass('text_position_' + configuration.get('text_position'));
+    toggleModeClass(pageflow.Page.textPositions, 'text_position');
+    toggleModeClass(pageflow.Page.delayedTextFadeIn, 'delayed_text_fade_in');
+    toggleModeClass(pageflow.Page.scrollIndicatorModes, 'scroll_indicator_mode');
+    toggleModeClass(pageflow.Page.scrollIndicatorOrientations, 'scroll_indicator_orientation');
+
+    function toggleModeClass(modes, name) {
+      var value = configuration.get(name);
+
+      _.each(modes, function(mode) {
+        pageElement.removeClass(name + '_' + mode);
+      });
+
+      if (value) {
+        pageElement.addClass(name + '_' + value);
+      }
+    }
+
+    pageElement.toggleClass('no_text_content', !hasContent());
+
+    function hasContent() {
+      var hasTitle = _(['title','subtitle','tagline']).some(function(attribute) {
+        return !!$.trim(configuration.get(attribute));
+      });
+
+      var text = $('<div />').html(configuration.get('text')).text();
+      var hasText = !!$.trim(text);
+
+      return (hasTitle && !configuration.get('hide_title')) || hasText;
+    }
   }
 };

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

@@ -2,7 +2,7 @@ pageflow.pageType.register('video', _.extend({
 
   enhance: function(pageElement, configuration) {
     pageElement.find('.contentText').before(pageElement.find('.page_header'));
-    this._initVideoPlayer(pageElement);
+    this._initVideoPlayer(pageElement, configuration);
   },
 
   preload: function(pageElement, configuration) {
@@ -13,6 +13,10 @@ pageflow.pageType.register('video', _.extend({
     this.videoPlayer.ensureCreated();
   },
 
+  unprepare: function(pageElement, configuration) {
+    this.videoPlayer.scheduleDispose();
+  },
+
   activating: function(pageElement, configuration) {
     var videoPlayer = this.videoPlayer;
 
@@ -24,14 +28,10 @@ pageflow.pageType.register('video', _.extend({
 
     this.videoPlayer.ensureCreated();
 
-    if (pageflow.features.has('mobile platform')) {
+    if (pageflow.browser.has('mobile platform')) {
       this.videoPlayer.showPosterImage();
     }
 
-    this.listenTo(pageflow.settings, "change:volume", function(model, value) {
-      this.fadeSound(this.videoPlayer, value, 10);
-    });
-
     $('body').on('keyup', function(e) {
       if(e.keyCode == 32){
         if(videoPlayer.paused()) {
@@ -49,20 +49,16 @@ pageflow.pageType.register('video', _.extend({
     var videoPlayer = this.videoPlayer;
     var that = this;
 
-    if (pageflow.features.has('mobile platform')) {
+    if (pageflow.browser.has('mobile platform')) {
        videoPlayer.src(videoPlayer.srcFromOptions()); // needed for iOS
     }
     else {
       videoPlayer.prebuffer().done(function() {
         videoPlayer.hidePosterImage();
 
-        if (configuration.autoplay === false) {
-          videoPlayer.volume(pageflow.settings.get('volume'));
-        } else {
+        if (configuration.autoplay !== false) {
           that.fadeInTimeout = setTimeout(function() {
-            videoPlayer.volume(0);
-            videoPlayer.play();
-            that.fadeSound(videoPlayer, pageflow.settings.get('volume'), 1000);
+            videoPlayer.playAndFadeIn(1000);
           }, 1000);
         }
       });
@@ -74,10 +70,13 @@ 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) {
-    if (pageflow.features.has('mobile platform')) {
+    if (pageflow.browser.has('mobile platform')) {
       this.videoPlayer.showPosterImage();
     }
     this.videoPlayer.pause();
@@ -96,29 +95,31 @@ pageflow.pageType.register('video', _.extend({
 
     pageElement.find('.shadow').css({opacity: configuration.get('gradient_opacity') / 100});
 
-    var videoPlayer = this.videoPlayer;
-    videoPlayer.ensureCreated();
-
-    if (!this.srcDefined) {
-      videoPlayer.ready(function() {
-        videoPlayer.src(configuration.getVideoFileSources('video_file_id'));
-      });
-    }
-
-    if (!this.srcDefined || configuration.hasChanged('video_file_id')) {
-      this.srcDefined = true;
-      this.videoPlayer.src(configuration.getVideoFileSources('video_file_id'));
-    }
-
     this.updateVideoPoster(pageElement, configuration.getVideoPosterUrl());
   },
 
-  _initVideoPlayer: function(pageElement) {
+  embeddedEditorViews: function() {
+    return {
+      '.videoWrapper': {
+        view: pageflow.LazyVideoEmbeddedView,
+        options: {
+          propertyName: 'video_file_id'
+        }
+      }
+    };
+  },
+
+  _initVideoPlayer: function(pageElement, configuration) {
+    var that = this;
+
     var videoPlayer = new pageflow.VideoPlayer.Lazy(pageElement.find('[data-template=video]'), {
       bufferUnderrunWaiting: true,
       controls: true,
       customControlsOnMobile: true,
 
+      volumeFading: true,
+      hooks: pageflow.atmo.createMediaPlayerHooks(configuration),
+
       mediaEvents: true,
       context: {
         page: pageElement.page('instance')
@@ -129,6 +130,7 @@ pageflow.pageType.register('video', _.extend({
     });
 
     this.videoPlayer = videoPlayer;
+    pageElement.find('.videoWrapper').data('videoPlayer', videoPlayer);
 
     videoPlayer.ready(function() {
       videoPlayer.showPosterImage();
@@ -142,6 +144,10 @@ pageflow.pageType.register('video', _.extend({
           video =  pageElement.find('video');
 
       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>';
+
+      $(additionalControlsHtml).appendTo(controlBar);
       //pageElement.find('.scroller').after(controls);
 
       controlBar.addClass('vjs-default-skin vjs-player');
@@ -157,6 +163,16 @@ pageflow.pageType.register('video', _.extend({
         }
       });
 
+      controls.find('a, [tabindex]').on({
+        focus: function() {
+          controls.addClass('focussed');
+        },
+
+        blur: function() {
+          controls.removeClass('focussed');
+        }
+      });
+
       videoPlayer.on('bufferunderrun', function() {
         loadingSpinner.addClass('showing-for-underrun');
       });
@@ -165,7 +181,7 @@ pageflow.pageType.register('video', _.extend({
         loadingSpinner.removeClass('showing-for-underrun');
       });
 
-      if (pageflow.features.has('phone platform')) {
+      if (pageflow.browser.has('phone platform')) {
         // alternate poster image handling
         $("<div class='vjs-poster-mobile' style='" +
           poster.attr('style') +
@@ -184,6 +200,8 @@ pageflow.pageType.register('video', _.extend({
           scrollIndicator = $('.entry .scroll_indicator'),
           pageContent = pageElement.find('.scroller, .controls, .shadow');
 
+      pageContent.addClass('lock-showing');
+
       videoPlayer.on("pause", function() {
         pageContent.addClass('lock-showing');
 
@@ -191,20 +209,31 @@ pageflow.pageType.register('video', _.extend({
         clearTimeout(scrollIndicatorTimeout);
       });
 
+      videoPlayer.on('beforeplay', function() {
+        loadingSpinner.addClass('showing-for-underrun');
+      });
+
       videoPlayer.on("play", function() {
         pageContent.removeClass('lock-showing');
 
-        scrollIndicatorTimeout = setTimeout(function() {
-          scrollIndicator.addClass('faded');
-        }, 2000);
+        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.features.has('mobile platform')) {
-          this.showPosterImage();
+        if (pageflow.browser.has('mobile platform')) {
+          videoPlayer.showPosterImage();
+        }
+
+        if (pageElement.hasClass('active') && configuration.auto_change_page_on_ended) {
+          pageflow.slides.next();
         }
       });
 
@@ -212,9 +241,17 @@ pageflow.pageType.register('video', _.extend({
       $('body').on('keydown', autoHideControls);
       pageElement.find('.content').on('touchstart', autoHideControls);
 
+      pageElement.find('.volume-control').volumeSlider({
+        orientation: 'v'
+      });
+
+      pageElement.find('.player_mute').muteButton();
+      pageElement.find('.player_skip').skipPageButton();
+      pageElement.find('.player_fullscreen').fullscreenButton();
+
       function autoHideControls() {
         showControls();
-        if (!pageflow.features.has('phone platform')) {
+        if (!pageflow.browser.has('phone platform')) {
           clearTimeout(timeout);
           timeout = setTimeout(hideControls, 2000);
         }

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

@@ -12,17 +12,20 @@
     },
 
     backgroundImage: function(element) {
-      $(element).parent().addClass('load_images');
+      var that = this;
+      var promises = [];
 
-      if ($(element).length) {
-        var propertyValue = window.getComputedStyle($(element)[0]).getPropertyValue('background-image');
+      $(element).addClass('load_image');
+
+      $(element).each(function() {
+        var propertyValue = window.getComputedStyle(this).getPropertyValue('background-image');
 
         if (propertyValue.match(/^url/)) {
-          return this.image(propertyValue.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, ''));
+          promises.push(that.image(propertyValue.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')));
         }
-      }
+      });
 
-      return $.Deferred().resolve().promise();
+      return $.when.apply(null, promises);
     }
   };
 }());

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

@@ -1,28 +1,32 @@
 pageflow.ready = new $.Deferred(function(readyDeferred) {
   window.onload = function() {
-    pageflow.features.detect().then(function() {
+    pageflow.browser.detectFeatures().then(function() {
       $('body').one('pagepreloaded', function() {
         readyDeferred.resolve();
       });
 
       $('[data-role=slideshow]').each(function() {
-        var configurationsById = _.reduce(pageflow.pages, function(memo, page) {
-          memo[page.id] = page.configuration;
-          return memo;
-        }, {});
+        pageflow.entryData = new pageflow.SeedEntryData(
+          pageflow.seed
+        );
 
-        pageflow.slides = new pageflow.Slideshow($(this), configurationsById);
-
-        $('.header').header({
-          slideshow: pageflow.slides
+        pageflow.Audio.setup({
+          audioFiles: pageflow.audioFiles
         });
-        $('.overview').overview();
-        $('.multimedia_alert').multimediaAlert();
 
-        pageflow.widgetTypes.enhance($('body'));
+        pageflow.Slideshow.setup({
+          element: $(this),
+          pages: pageflow.pages,
+          enabledFeatureNames: pageflow.enabledFeatureNames,
+
+          beforeFirstUpdate: function() {
+            $('.header').header({slideshow: pageflow.slides});
+            $('.overview').overview();
+            $('.multimedia_alert').multimediaAlert();
 
-        pageflow.slides.update();
-        pageflow.history = new pageflow.History(pageflow.slides);
+            pageflow.widgetTypes.enhance($('body'));
+          }
+        });
       });
 
       pageflow.links.setup();

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

@@ -0,0 +1,43 @@
+pageflow.SeedEntryData = pageflow.EntryData.extend({
+  initialize: function(options) {
+    this.theming = options.theming;
+
+    this.chapterConfigurations = options.chapter_configurations;
+
+    this.chapterPagePermaIds = _(options.pages).reduce(function(memo, page) {
+      memo[page.chapter_id] = memo[page.chapter_id] || [];
+      memo[page.chapter_id].push(page.perma_id);
+      return memo;
+    }, {});
+
+    this.chapterIdsByPagePermaIds = _(options.pages).reduce(function(memo, page) {
+      memo[page.perma_id] = page.chapter_id;
+      return memo;
+    }, {});
+
+    this.pageConfigurations = _.reduce(options.pages, function(memo, page) {
+      memo[page.perma_id] = page.configuration;
+      return memo;
+    }, {});
+  },
+
+  getThemingOption: function(name) {
+    return this.theming[name];
+  },
+
+  getChapterConfiguration: function(id) {
+    return this.chapterConfigurations[id] || {};
+  },
+
+  getChapterPagePermaIds: function(id) {
+    return this.chapterPagePermaIds[id];
+  },
+
+  getPageConfiguration: function(permaId) {
+    return this.pageConfigurations[permaId] || {};
+  },
+
+  getChapterIdByPagePermaId: function(permaId) {
+    return this.chapterIdsByPagePermaIds[permaId];
+  }
+});