pageflow 12.6.0 → 13.0.0.beta1

data/app/assets/javascripts/pageflow/editor/models/configuration.js

@@ -40,25 +40,25 @@ pageflow.Configuration = Backbone.Model.extend({
   },
 
   getFilePosition: function(attribute, coord) {
-    var propertyName = this.filePositionProperty(attribute, coord);
+    var propertyName = this._filePositionProperty(attribute, coord);
     return this.has(propertyName) ? this.get(propertyName) : 50;
   },
 
   setFilePosition: function(attribute, coord, value) {
-    var propertyName = this.filePositionProperty(attribute, coord);
+    var propertyName = this._filePositionProperty(attribute, coord);
     this.set(propertyName, value);
   },
 
   setFilePositions: function(attribute, x, y) {
     var attributes = {};
 
-    attributes[this.filePositionProperty(attribute, 'x')] = x;
-    attributes[this.filePositionProperty(attribute, 'y')] = y;
+    attributes[this._filePositionProperty(attribute, 'x')] = x;
+    attributes[this._filePositionProperty(attribute, 'y')] = y;
 
     this.set(attributes);
   },
 
-  filePositionProperty: function(attribute, coord) {
+  _filePositionProperty: function(attribute, coord) {
     return attribute.replace(/_id$/, '_' + coord);
   },
 

data/app/assets/javascripts/pageflow/editor/templates/background_positioning_sliders.jst.ejs

@@ -3,12 +3,4 @@
   </div>
   <div class="slider vertical">
   </div>
-  <div class="percent horizontal">
-    <input type="number" min="0" max="100">
-    %
-  </div>
-  <div class="percent vertical">
-    <input type="number" min="0" max="100">
-    %
-  </div>
 </div>

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

@@ -6,10 +6,7 @@ pageflow.BackgroundPositioningSlidersView = Backbone.Marionette.ItemView.extend(
     container: '.container',
 
     sliderHorizontal: '.horizontal.slider',
-    sliderVertical: '.vertical.slider',
-
-    inputHorizontal: '.percent.horizontal input',
-    inputVertical: '.percent.vertical input'
+    sliderVertical: '.vertical.slider'
   },
 
   events: {
@@ -37,10 +34,6 @@ pageflow.BackgroundPositioningSlidersView = Backbone.Marionette.ItemView.extend(
     }
   },
 
-  modelEvents: {
-    change: 'update'
-  },
-
   onRender: function() {
     var view = this;
     var file = this.model.getReference(this.options.propertyName, this.options.filesCollection),
@@ -50,59 +43,52 @@ pageflow.BackgroundPositioningSlidersView = Backbone.Marionette.ItemView.extend(
 
     this.ui.sliderVertical.slider({
       orientation: 'vertical',
+      step: 0.01,
+      value: 100 - this.model.getFilePosition(this.options.propertyName, 'y'),
 
-      change: function(event, ui) {
-        view.save('y', 100 - ui.value);
+      change: function() {
+        view.save();
       },
 
       slide: function(event, ui) {
-        view.save('y', 100 - ui.value);
+        view.save({y: ui.value});
       }
     });
 
     this.ui.sliderHorizontal.slider({
       orientation: 'horizontal',
+      step: 0.01,
+      value: this.model.getFilePosition(this.options.propertyName, 'x'),
 
-      change: function(event, ui) {
-        view.save('x', ui.value);
+      change: function() {
+        view.save();
       },
 
       slide: function(event, ui) {
-        view.save('x', ui.value);
+        view.save({y: ui.value});
       }
     });
-
-    this.ui.inputVertical.on('change', function() {
-      view.save('y', $(this).val());
-    });
-
-    this.ui.inputHorizontal.on('change', function() {
-      view.save('x', $(this).val());
-    });
-
-    this.update();
   },
 
-  update: function() {
-    var x = this.model.getFilePosition(this.options.propertyName, 'x');
-    var y = this.model.getFilePosition(this.options.propertyName, 'y');
-
-    this.ui.sliderVertical.slider('value', 100 - y);
-    this.ui.sliderHorizontal.slider('value', x);
-
-    this.ui.inputVertical.val(y);
-    this.ui.inputHorizontal.val(x);
+  onShow: function() {
   },
 
   saveFromEvent: function(event) {
     var x = event.pageX - this.ui.container.offset().left;
     var y = event.pageY - this.ui.container.offset().top;
 
-    this.save('x', Math.round(x / this.ui.container.width() * 100));
-    this.save('y', Math.round(y / this.ui.container.width() * 100));
+    this.ui.sliderHorizontal.slider('value', x / this.ui.container.width() * 100);
+    this.ui.sliderVertical.slider('value', (1 - y / this.ui.container.height()) * 100);
+    this.save();
   },
 
-  save: function(coord, value) {
-    this.model.setFilePosition(this.options.propertyName, coord, Math.min(100, Math.max(0, value)));
+  save: function(options) {
+    options = options || {};
+
+    var x = x in options ? options.x : this.ui.sliderHorizontal.slider('value');
+    var y = y in options ? options.y : 100 - this.ui.sliderVertical.slider('value');
+
+    this.model.setFilePosition(this.options.propertyName, 'x', x);
+    this.model.setFilePosition(this.options.propertyName, 'y', y);
   }
 });

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

@@ -63,5 +63,5 @@ pageflow.BackgroundPositioningView = Backbone.Marionette.ItemView.extend({
 });
 
 pageflow.BackgroundPositioningView.open = function(options) {
-  pageflow.app.dialogRegion.show(new pageflow.BackgroundPositioningView(options));
-};
+  pageflow.app.dialogRegion.show(new pageflow.BackgroundPositioningView(options).render());
+};

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/video.js

@@ -19,7 +19,7 @@ pageflow.ConfigurationEditorView.register('video', {
       });
       this.input('mobile_poster_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        positioning: true
+        positioning: false
       });
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,

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

@@ -8,15 +8,6 @@ pageflow.EditWidgetView = Backbone.Marionette.ItemView.extend({
     }
   },
 
-  initialize: function() {
-    this.model.set('editing', true);
-  },
-
-  onClose: function() {
-    Backbone.Marionette.ItemView.prototype.onClose.call(this);
-    this.model.set('editing', false);
-  },
-
   onRender: function() {
     var configurationEditor = this.model.widgetType().createConfigurationEditorView({
       model: this.model.configuration,

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

@@ -10,13 +10,3 @@ $.fn.updateTitle = function () {
     this.attr('title', this.data('title'));
   }
 };
-
-$.fn.loadLazyImages = function() {
-  this.find('img[data-src]').each(function() {
-    var img = $(this);
-
-    if (!img.attr('src')) {
-      img.attr('src', img.data('src'));
-    }
-  });
-};

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

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

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

@@ -0,0 +1,23 @@
+/*global Promise*/
+
+// Chrome returns a promise from `play` that is rejected if another
+// operation (like calling `pause` or updating the source) happens
+// before playing started. If the promise rejection is not handled,
+// the operation that caused `play` to abort will fail with an
+// exception. Code following the operation will not be executed. Catch
+// and ignore the promise to prevent this.
+pageflow.mediaPlayer.catchPlayerPromise = function(player) {
+  var originalPlay = player.play;
+
+  player.play = function(/* arguments */) {
+    var result = originalPlay.apply(player, arguments);
+
+    if (result && (typeof Promise !== 'undefined') && (result instanceof Promise)) {
+      result.catch(function() {
+        pageflow.log('Caught pending play exception - continuing');
+      });
+    }
+
+    return result;
+  };
+};

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

@@ -7,7 +7,6 @@ pageflow.mediaPlayer.volumeBinding = function(player, settings, options) {
   var volumeFactor = 'volumeFactor' in options ? options.volumeFactor : 1;
 
   player.play = function() {
-    player.intendToPlay();
     player.volume(player.targetVolume());
     listenToVolumeSetting();
 
@@ -72,4 +71,4 @@ pageflow.mediaPlayer.volumeBinding = function(player, settings, options) {
   function onVolumeChange(model, value) {
     player.fadeVolume(player.targetVolume(), 40);
   }
-};
+};

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

@@ -12,84 +12,36 @@ pageflow.mediaPlayer.volumeFading.webAudio = function(player, audioContext) {
 
   var allowedMinValue = 0.000001;
 
-  if (audioContext.state === 'suspended') {
-    pageflow.events.on('background_media:unmute', function() {
-      player.volume(currentValue);
-    });
-  }
-
-  function tryResumeIfSuspended() {
-    return new $.Deferred(function(deferred) {
-      if (audioContext.state === 'suspended') {
-        var maybePromise = audioContext.resume();
-
-        if (maybePromise && maybePromise.then) {
-          maybePromise.then(handleDeferred);
-        }
-        else {
-          setTimeout(handleDeferred, 0);
-        }
-      }
-      else {
-        deferred.resolve();
-      }
-
-      function handleDeferred() {
-        if (audioContext.state === 'suspended') {
-          deferred.reject();
-        }
-        else {
-          deferred.resolve();
-        }
-      }
-    }).promise();
-  }
-
   player.volume = function(value) {
+    ensureGainNode();
+
     if (typeof value !== 'undefined') {
-      tryResumeIfSuspended().then(
-        function() {
-          ensureGainNode();
-
-          cancel();
-          currentValue = ensureInAllowedRange(value);
-
-          gainNode.gain.setValueAtTime(currentValue,
-                                       audioContext.currentTime);
-        },
-        function() {
-          currentValue = ensureInAllowedRange(value);
-        }
-      );
+      cancel();
+      currentValue = ensureInAllowedRange(value);
+
+      return gainNode.gain.setValueAtTime(currentValue,
+                                          audioContext.currentTime);
     }
 
     return Math.round(currentValue * 100) / 100;
   };
 
   player.fadeVolume = function(value, duration) {
-    return tryResumeIfSuspended().then(
-      function() {
-        ensureGainNode();
-
-        cancel();
-        recordFadeStart(duration);
-
-        currentValue = ensureInAllowedRange(value);
-
-        gainNode.gain.setValueAtTime(lastStartValue, audioContext.currentTime);
-        gainNode.gain.linearRampToValueAtTime(currentValue,
-                                              audioContext.currentTime + duration / 1000);
-
-        return new $.Deferred(function(deferred) {
-          currentTimeout = setTimeout(resolve, duration);
-          currentDeferred = deferred;
-        }).promise();
-      },
-      function() {
-        currentValue = ensureInAllowedRange(value);
-        return new $.Deferred().resolve().promise();
-      }
-    );
+    ensureGainNode();
+
+    cancel();
+    recordFadeStart(duration);
+
+    currentValue = ensureInAllowedRange(value);
+
+    gainNode.gain.setValueAtTime(lastStartValue, audioContext.currentTime);
+    gainNode.gain.linearRampToValueAtTime(currentValue,
+                                          audioContext.currentTime + duration / 1000);
+
+    return new $.Deferred(function(deferred) {
+      currentTimeout = setTimeout(resolve, duration);
+      currentDeferred = deferred;
+    }).promise();
   };
 
   player.one('dispose', cancel);
@@ -141,10 +93,9 @@ pageflow.mediaPlayer.volumeFading.webAudio = function(player, audioContext) {
     if (gainNode.gain.value == 1) {
       var performedDuration = (audioContext.currentTime - lastStartTime) * 1000;
       var lastDelta = currentValue - lastStartValue;
-      var performedFraction = lastDelta > 0 ? performedDuration / lastDuration : 1;
 
       currentValue = ensureInAllowedRange(
-        lastStartValue + performedFraction * lastDelta
+        lastStartValue + (performedDuration / lastDuration * lastDelta)
       );
     }
     else {
@@ -155,4 +106,4 @@ pageflow.mediaPlayer.volumeFading.webAudio = function(player, audioContext) {
   function ensureInAllowedRange(value) {
     return value < allowedMinValue ? allowedMinValue : value;
   }
-};
+};

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

@@ -6,7 +6,6 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
 
       body.one('pagepreloaded', function() {
         readyDeferred.resolve();
-        pageflow.events.trigger('ready');
       });
 
       pageflow.Visited.setup();
@@ -43,4 +42,4 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
       pageflow.nativeScrolling.preventScrollingOnEmbed(slideshow);
     });
   };
-}).promise();
+}).promise();

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

@@ -1,6 +1,6 @@
 pageflow.SeedEntryData = pageflow.EntryData.extend({
   initialize: function(options) {
-    this.theme = options.theme;
+    this.theming = options.theming;
 
     this.storylineConfigurations = _(options.storylines).reduce(function(memo, storyline) {
       memo[storyline.id] = storyline.configuration;
@@ -40,7 +40,7 @@ pageflow.SeedEntryData = pageflow.EntryData.extend({
   },
 
   getThemingOption: function(name) {
-    return this.theme[name];
+    return this.theming[name];
   },
 
   getChapterConfiguration: function(id) {
@@ -70,4 +70,4 @@ pageflow.SeedEntryData = pageflow.EntryData.extend({
   getStorylineIdByChapterId: function(id) {
     return this.storylineIdsByChapterIds[id];
   }
-});
+});

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

@@ -6,8 +6,8 @@
 //=require ./slideshow/scroll_indicator
 //=require ./slideshow/scroll_indicator_widget
 //=require ./slideshow/hidden_text_indicator_widget
-//=require ./slideshow/adjacent_preloader
-//=require ./slideshow/successor_preparer
+//=require ./slideshow/progressive_preload
+//=require ./slideshow/adjacent_preparer
 //=require ./slideshow/swipe_gesture
 //=require ./slideshow/hide_text
 //=require ./slideshow/hide_text_on_swipe
@@ -15,6 +15,7 @@
 
 pageflow.Slideshow = function($el, configurations) {
   var transitioning = false,
+      preload = new pageflow.ProgressivePreload(),
       currentPage = $(),
       pages = $(),
       that = this,
@@ -115,7 +116,7 @@ pageflow.Slideshow = function($el, configurations) {
           transition: transition
         });
 
-        currentPage.page('preload');
+        preload.start(currentPage);
         $el.trigger('slideshowchangepage', [options]);
 
         return Math.max(outDuration, inDuration);
@@ -160,17 +161,16 @@ pageflow.Slideshow = function($el, configurations) {
       currentPageIndex = currentPage.index();
 
       currentPage.page('activateAsLandingPage');
-      currentPage.page('preload');
+      preload.start(currentPage);
     }
   }
 
   function findNewCurrentPage(options) {
     if (!currentPage.length) {
       var permaId = options && options.landingPagePermaId;
-      var landingPage = permaId ? getPageByPermaId(permaId) : $();
 
-      return landingPage.length ?
-        landingPage :
+      return permaId ?
+        getPageByPermaId(permaId) :
         that.scrollNavigator.getLandingPage(pages);
     }
     else if (!currentPage.parent().length) {
@@ -217,14 +217,7 @@ pageflow.Slideshow = function($el, configurations) {
   $el.find('.scroll_indicator').scrollIndicator({parent: this});
 
   this.scrollNavigator = new pageflow.DomOrderScrollNavigator(this, pageflow.entryData);
-
-  pageflow.AdjacentPreloader
-          .create(function() { return pages; }, this.scrollNavigator)
-          .attach(pageflow.events);
-
-  pageflow.SuccessorPreparer
-          .create(function() { return pages; }, this.scrollNavigator)
-          .attach(pageflow.events);
+  this.preparer = pageflow.AdjacentPreparer.create(function() { return pages; }, this.scrollNavigator).attach(pageflow.events);
 };
 
 pageflow.Slideshow.setup = function(options) {
@@ -245,8 +238,7 @@ pageflow.Slideshow.setup = function(options) {
   pageflow.atmo = pageflow.Atmo.create(
     pageflow.slides,
     pageflow.events,
-    pageflow.audio,
-    pageflow.backgroundMedia
+    pageflow.audio
   );
 
   pageflow.history = pageflow.History.create(