pageflow 13.0.0.beta6 → 13.0.0.beta7

data/app/assets/javascripts/pageflow/editor/views/file_stage_item_view.js

@@ -16,6 +16,13 @@ pageflow.FileStageItemView = Backbone.Marionette.ItemView.extend({
   onRender: function() {
     this.update();
     this.$el.addClass(this.model.get('name'));
+
+    if (this.options.standAlone) {
+      this.$el.addClass('stand_alone');
+    }
+    else {
+      this.$el.addClass('indented');
+    }
   },
 
   update: function() {

data/app/assets/javascripts/pageflow/editor/views/help_image_view.js

@@ -0,0 +1,9 @@
+pageflow.HelpImageView = Backbone.Marionette.View.extend({
+  tagName: 'img',
+  className: 'help_image',
+
+  render: function() {
+    this.$el.attr('src', pageflow.editorAssetUrls.help[this.options.imageName]);
+    return this;
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/info_box_view.js

@@ -2,7 +2,7 @@ pageflow.InfoBoxView = Backbone.Marionette.View.extend({
   className: 'info_box',
 
   render: function() {
-    this.$el.text(this.options.text);
+    this.$el.html(this.options.text);
     return this;
   }
 });

data/app/assets/javascripts/pageflow/editor/views/inputs/file_processing_state_display_view.js

@@ -0,0 +1,60 @@
+pageflow.FileProcessingStateDisplayView = Backbone.Marionette.View.extend({
+  className: 'file_processing_state_display',
+
+  mixins: [pageflow.inputView],
+
+  initialize: function() {
+    if (typeof this.options.collection === 'string') {
+      this.options.collection = pageflow.entry.getFileCollection(
+        pageflow.editor.fileTypes.findByCollectionName(this.options.collection)
+      );
+    }
+
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this._update);
+  },
+
+  render: function() {
+    this._update();
+    return this;
+  },
+
+  _update: function() {
+    if (this.fileStagesView) {
+      this.stopListening(this.file.unfinishedStages);
+
+      this.fileStagesView.close();
+      this.fileStagesView = null;
+    }
+
+    this.file = this._getFile();
+
+    if (this.file) {
+      this.listenTo(this.file.unfinishedStages, 'add remove', this._updateClassNames);
+
+      this.fileStagesView = new pageflow.CollectionView({
+        tagName: 'ul',
+        collection: this.file.unfinishedStages,
+        itemViewConstructor: pageflow.FileStageItemView,
+        itemViewOptions: {
+          standAlone: true
+        }
+      });
+
+      this.appendSubview(this.fileStagesView);
+    }
+
+    this._updateClassNames();
+  },
+
+  _updateClassNames: function() {
+    this.$el.toggleClass('file_processing_state_display-empty', !this._hasItems());
+  },
+
+  _hasItems: function() {
+    return this.file && this.file.unfinishedStages.length;
+  },
+
+  _getFile: function() {
+    return this.model.getReference(this.options.propertyName, this.options.collection);
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/sidebar_footer_view.js

@@ -0,0 +1,12 @@
+pageflow.SidebarFooterView = Backbone.Marionette.View.extend({
+  className: 'sidebar_footer',
+
+  render: function() {
+    if (pageflow.features.isEnabled('editor_emulation_mode')) {
+      this.appendSubview(new pageflow.EmulationModeButtonView({model: this.model}));
+    }
+
+    this.appendSubview(new pageflow.HelpButtonView());
+    return this;
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/widget_types/phone_horizontal_slideshow_mode.js

@@ -0,0 +1,14 @@
+pageflow.editor.widgetTypes.register('phone_horizontal_slideshow_mode', {
+  configurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('phone_horizontal_slideshow_mode', function() {
+        this.view(pageflow.InfoBoxView, {
+          text: I18n.t('pageflow.editor.phone_horizontal_slideshow_mode.widget_type_info_box_text')
+        });
+        this.view(pageflow.HelpImageView, {
+          imageName: 'phone_horizontal_slideshow_mode'
+        });
+      });
+    }
+  })
+});

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

@@ -3,6 +3,10 @@ pageflow.EntryData = pageflow.Object.extend({
     throw 'Not implemented';
   },
 
+  getFile: function(collectionName, id) {
+    throw 'Not implemented';
+  },
+
   getPageConfiguration: function(permaId) {
     throw 'Not implemented';
   },

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

@@ -1,5 +1,6 @@
 //= require_self
-//= require ./media_player/catch_play_promise
+
+//= require ./media_player/handle_failed_play
 //= require ./media_player/volume_fading
 //= require ./media_player/volume_binding
 //= require ./media_player/load_waiting
@@ -8,7 +9,10 @@
 
 pageflow.mediaPlayer = {
   enhance: function(player, options) {
-    pageflow.mediaPlayer.catchPlayerPromise(player);
+    pageflow.mediaPlayer.handleFailedPlay(player, _.extend({
+      hasAutoplaySupport: pageflow.browser.has('autoplay support')
+    }, options));
+
     pageflow.mediaPlayer.asyncPlay(player);
 
     if (options.hooks) {
@@ -24,4 +28,4 @@ pageflow.mediaPlayer = {
       pageflow.mediaPlayer.loadWaiting(player);
     }
   }
-};
+};

data/app/assets/javascripts/pageflow/media_player/handle_failed_play.js

@@ -0,0 +1,34 @@
+pageflow.mediaPlayer.handleFailedPlay = function(player, options) {
+  var originalPlay = player.play;
+
+  player.play = function(/* arguments */) {
+    var result = originalPlay.apply(player, arguments);
+
+    if (result && typeof result.catch !== 'undefined') {
+      return result.catch(function(e) {
+        if (e.name === 'NotAllowedError' && options.hasAutoplaySupport) {
+          if (options.fallbackToMutedAutoplay) {
+            player.muted(true);
+
+            return originalPlay.apply(player, arguments).then(
+              function() {
+                player.trigger('playmuted');
+              },
+              function() {
+                player.trigger('playfailed');
+              }
+            );
+          }
+          else {
+            player.trigger('playfailed');
+          }
+        }
+        else {
+          pageflow.log('Caught play exception for video.');
+        }
+      });
+    }
+
+    return result;
+  };
+};

data/app/assets/javascripts/pageflow/media_player/volume_fading/web_audio.js

@@ -12,10 +12,31 @@ pageflow.mediaPlayer.volumeFading.webAudio = function(player, audioContext) {
 
   var allowedMinValue = 0.000001;
 
-  player.volume = function(value) {
-    ensureGainNode();
+  var originalPlay = player.play;
+
+  if (audioContext.state === 'suspended') {
+    pageflow.events.on('background_media:unmute', function() {
+      audioContext.resume();
+    });
+
+    audioContext.addEventListener('statechange', function() {
+      player.volume(currentValue);
+    });
+  }
+
+  player.play = function(/* arguments */) {
+    return originalPlay.apply(player, arguments);
+  };
 
+  player.volume = function(value) {
     if (typeof value !== 'undefined') {
+      if (audioContext.state === 'suspended') {
+        currentValue = ensureInAllowedRange(value);
+        return;
+      }
+
+      ensureGainNode();
+
       cancel();
       currentValue = ensureInAllowedRange(value);
 
@@ -27,6 +48,11 @@ pageflow.mediaPlayer.volumeFading.webAudio = function(player, audioContext) {
   };
 
   player.fadeVolume = function(value, duration) {
+    if (audioContext.state === 'suspended') {
+      currentValue = ensureInAllowedRange(value);
+      return new $.Deferred().resolve().promise();
+    }
+
     ensureGainNode();
 
     cancel();
@@ -106,4 +132,4 @@ pageflow.mediaPlayer.volumeFading.webAudio = function(player, audioContext) {
   function ensureInAllowedRange(value) {
     return value < allowedMinValue ? allowedMinValue : value;
   }
-};
+};

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

@@ -1,29 +1,73 @@
-pageflow.pageTransitions = {
-  repository: {},
+pageflow.PageTransitions = pageflow.Object.extend({
+  initialize: function(navigationDirection) {
+    this.repository = {};
+    this.navigationDirection = navigationDirection;
+  },
 
   register: function(name, options) {
     this.repository[name] = options;
   },
 
   get: function(name) {
-    if (!this.repository.hasOwnProperty(name)) {
+    var transition = this.repository[name];
+
+    if (!transition) {
       throw 'Unknown page transition "' + name + '"';
     }
 
-    return this.repository[name];
+    return this.navigationDirection.isHorizontal() ?
+           transition.h :
+           transition.v;
   },
 
   names: function() {
     return _.keys(this.repository);
   }
-};
-
-pageflow.pageTransitions.register('fade', {duration: 1100});
-pageflow.pageTransitions.register('crossfade', {duration: 1100});
-pageflow.pageTransitions.register('fade_to_black', {duration: 2100});
-pageflow.pageTransitions.register('cut', {duration: 1100});
-pageflow.pageTransitions.register('scroll', {duration: 1100});
-pageflow.pageTransitions.register('scroll_right', {duration: 1100});
-pageflow.pageTransitions.register('scroll_left', {duration: 1100});
-pageflow.pageTransitions.register('scroll_over_from_right', {duration: 1100});
-pageflow.pageTransitions.register('scroll_over_from_left', {duration: 1100});
+});
+
+pageflow.pageTransitions = new pageflow.PageTransitions(pageflow.navigationDirection);
+
+pageflow.pageTransitions.register('fade', {
+  v: {className: 'fade fade-v', duration: 1100},
+  h: {className: 'fade fade-h', duration: 600}
+});
+
+pageflow.pageTransitions.register('crossfade', {
+  v: {className: 'crossfade', duration: 1100},
+  h: {className: 'crossfade crossfade-fast', duration: 600}
+});
+
+pageflow.pageTransitions.register('fade_to_black', {
+  v: {className: 'fade_to_black', duration: 2100},
+  h: {className: 'fade_to_black', duration: 2100}
+});
+
+pageflow.pageTransitions.register('cut', {
+  v: {className: 'cut', duration: 1100},
+  h: {className: 'cut', duration: 1100}
+});
+
+pageflow.pageTransitions.register('scroll', {
+  v: {className: 'scroll scroll-in scroll-from_bottom', duration: 1100},
+  h: {className: 'scroll scroll-in scroll-from_right scroll-fast', duration: 600}
+});
+
+pageflow.pageTransitions.register('scroll_right', {
+  v: {className: 'scroll scroll-in scroll-from_right', duration: 1100},
+  h: {className: 'scroll scroll-in scroll-from_bottom scroll-fast', duration: 600}
+});
+
+pageflow.pageTransitions.register('scroll_left', {
+  v: {className: 'scroll scroll-in scroll-from_left', duration: 1100},
+  h: {className: 'scroll scroll-in scroll-from_top scroll-fast', duration: 600}
+});
+
+pageflow.pageTransitions.register('scroll_over_from_right', {
+  v: {className: 'scroll scroll-over scroll-from_right', duration: 1100},
+  h: {className: 'scroll scroll-over scroll-from_bottom scroll-fast', duration: 600}
+});
+
+pageflow.pageTransitions.register('scroll_over_from_left', {
+  v: {className: 'scroll scroll-over scroll-from_left', duration: 1100},
+  h: {className: 'scroll scroll-over scroll-from_top scroll-fast', duration: 600}
+});

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

@@ -21,6 +21,10 @@ pageflow.pageType = (function() {
       return [];
     },
 
+    isPageChangeAllowed: function(pageElement, configuarion, options) {
+      return true;
+    },
+
     prepareNextPageTimeout: 200
   };
 
@@ -42,4 +46,4 @@ pageflow.pageType = (function() {
       return new this.repository[name]();
     }
   };
-}());
+}());

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

@@ -2,6 +2,15 @@ pageflow.SeedEntryData = pageflow.EntryData.extend({
   initialize: function(options) {
     this.theme = options.theme;
 
+    this.files = _(_.keys(options.files || {})).reduce(function(memo, collectionName) {
+      memo[collectionName] = _(options.files[collectionName]).reduce(function(result, file) {
+        result[file.id] = file;
+        return result;
+      }, {});
+
+      return memo;
+    }, {});
+
     this.storylineConfigurations = _(options.storylines).reduce(function(memo, storyline) {
       memo[storyline.id] = storyline.configuration;
       return memo;
@@ -43,6 +52,10 @@ pageflow.SeedEntryData = pageflow.EntryData.extend({
     return this.theme[name];
   },
 
+  getFile: function(collectionName, id) {
+    return this.files[collectionName][id];
+  },
+
   getChapterConfiguration: function(id) {
     return this.chapterConfigurations[id] || {};
   },

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

@@ -12,6 +12,7 @@
 //=require ./slideshow/hide_text
 //=require ./slideshow/hide_text_on_swipe
 //=require ./slideshow/dom_order_scroll_navigator
+//=require ./slideshow/navigation_direction
 
 pageflow.Slideshow = function($el, configurations) {
   var transitioning = false,
@@ -44,10 +45,6 @@ pageflow.Slideshow = function($el, configurations) {
     return result;
   }
 
-  function currentPagePermaId() {
-    return parseInt(currentPage.attr('id'), 10);
-  }
-
   this.nextPageExists = function() {
     return this.scrollNavigator.nextPageExists(currentPage, pages);
   };
@@ -73,11 +70,13 @@ pageflow.Slideshow = function($el, configurations) {
   };
 
   this.parentPageExists = function() {
-    return !!pageflow.entryData.getParentPagePermaIdByPagePermaId(currentPagePermaId());
+    return !!pageflow.entryData.getParentPagePermaIdByPagePermaId(this.currentPagePermaId());
   };
 
   this.goToParentPage = function() {
-    this.goToByPermaId(pageflow.entryData.getParentPagePermaIdByPagePermaId(currentPagePermaId()));
+    this.goToByPermaId(pageflow.entryData.getParentPagePermaIdByPagePermaId(
+      this.currentPagePermaId()
+    ));
   };
 
   this.goToById = function(id, options) {
@@ -94,6 +93,18 @@ pageflow.Slideshow = function($el, configurations) {
     options = options || {};
 
     if (page.length && !page.is(currentPage)) {
+      var cancelled = false;
+
+      pageflow.events.trigger('page:changing', {
+        cancel: function() {
+          cancelled = true;
+        }
+      });
+
+      if (cancelled) {
+        return;
+      }
+
       transitionMutex(function() {
         var previousPage = currentPage;
         currentPage = page;
@@ -149,6 +160,10 @@ pageflow.Slideshow = function($el, configurations) {
     return currentPage;
   };
 
+  this.currentPagePermaId = function() {
+    return parseInt(currentPage.attr('id'), 10);
+  };
+
   this.currentPageConfiguration = function() {
     return currentPage.page('getConfiguration');
   };
@@ -191,12 +206,16 @@ pageflow.Slideshow = function($el, configurations) {
     pageflow.events.trigger('resize');
   };
 
-  $el.on('scrollerbumpup', _.bind(function(event) {
-    this.back();
+  $el.on(pageflow.navigationDirection.getEventName('scrollerbumpback'), _.bind(function(event) {
+    if (currentPage.page('isPageChangeAllowed', {type: 'bumpback'})) {
+      this.back();
+    }
   }, this));
 
-  $el.on('scrollerbumpdown', _.bind(function(event) {
-    this.next();
+  $el.on(pageflow.navigationDirection.getEventName('scrollerbumpnext'), _.bind(function(event) {
+    if (currentPage.page('isPageChangeAllowed', {type: 'bumpnext'})) {
+      this.next();
+    }
   }, this));
 
   $el.on('click', 'a.to_top', _.bind(function() {
@@ -238,7 +257,8 @@ pageflow.Slideshow.setup = function(options) {
   pageflow.atmo = pageflow.Atmo.create(
     pageflow.slides,
     pageflow.events,
-    pageflow.audio
+    pageflow.audio,
+    pageflow.backgroundMedia
   );
 
   pageflow.history = pageflow.History.create(