pageflow 12.2.0 → 12.3.0

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,4 +3,12 @@
   </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,7 +6,10 @@ pageflow.BackgroundPositioningSlidersView = Backbone.Marionette.ItemView.extend(
     container: '.container',
 
     sliderHorizontal: '.horizontal.slider',
-    sliderVertical: '.vertical.slider'
+    sliderVertical: '.vertical.slider',
+
+    inputHorizontal: '.percent.horizontal input',
+    inputVertical: '.percent.vertical input'
   },
 
   events: {
@@ -34,6 +37,10 @@ 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),
@@ -43,52 +50,59 @@ 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() {
-        view.save();
+      change: function(event, ui) {
+        view.save('y', 100 - ui.value);
       },
 
       slide: function(event, ui) {
-        view.save({y: ui.value});
+        view.save('y', 100 - ui.value);
       }
     });
 
     this.ui.sliderHorizontal.slider({
       orientation: 'horizontal',
-      step: 0.01,
-      value: this.model.getFilePosition(this.options.propertyName, 'x'),
 
-      change: function() {
-        view.save();
+      change: function(event, ui) {
+        view.save('x', ui.value);
       },
 
       slide: function(event, ui) {
-        view.save({y: ui.value});
+        view.save('x', 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();
   },
 
-  onShow: function() {
+  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);
   },
 
   saveFromEvent: function(event) {
     var x = event.pageX - this.ui.container.offset().left;
     var y = event.pageY - this.ui.container.offset().top;
 
-    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();
+    this.save('x', Math.round(x / this.ui.container.width() * 100));
+    this.save('y', Math.round(y / this.ui.container.width() * 100));
   },
 
-  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);
+  save: function(coord, value) {
+    this.model.setFilePosition(this.options.propertyName, coord, Math.min(100, Math.max(0, value)));
   }
 });

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).render());
-};
+  pageflow.app.dialogRegion.show(new pageflow.BackgroundPositioningView(options));
+};

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: false
+        positioning: true
       });
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,

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

@@ -8,6 +8,15 @@ 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/editor/views/info_box_view.js

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

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

@@ -0,0 +1,15 @@
+pageflow.editor.widgetTypes.registerRole('cookie_notice', {
+  isOptional: true
+});
+
+pageflow.editor.widgetTypes.register('cookie_notice_bar', {
+  configurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('cookie_notice_bar', function() {
+        this.view(pageflow.InfoBoxView, {
+          text: I18n.t('pageflow.editor.cookie_notice_bar.widget_type_info_box_text')
+        });
+      });
+    }
+  })
+});

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/seed_entry_data.js

@@ -1,6 +1,6 @@
 pageflow.SeedEntryData = pageflow.EntryData.extend({
   initialize: function(options) {
-    this.theming = options.theming;
+    this.theme = options.theme;
 
     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.theming[name];
+    return this.theme[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/progressive_preload
-//=require ./slideshow/adjacent_preparer
+//=require ./slideshow/adjacent_preloader
+//=require ./slideshow/successor_preparer
 //=require ./slideshow/swipe_gesture
 //=require ./slideshow/hide_text
 //=require ./slideshow/hide_text_on_swipe
@@ -15,7 +15,6 @@
 
 pageflow.Slideshow = function($el, configurations) {
   var transitioning = false,
-      preload = new pageflow.ProgressivePreload(),
       currentPage = $(),
       pages = $(),
       that = this,
@@ -116,7 +115,7 @@ pageflow.Slideshow = function($el, configurations) {
           transition: transition
         });
 
-        preload.start(currentPage);
+        currentPage.page('preload');
         $el.trigger('slideshowchangepage', [options]);
 
         return Math.max(outDuration, inDuration);
@@ -161,16 +160,17 @@ pageflow.Slideshow = function($el, configurations) {
       currentPageIndex = currentPage.index();
 
       currentPage.page('activateAsLandingPage');
-      preload.start(currentPage);
+      currentPage.page('preload');
     }
   }
 
   function findNewCurrentPage(options) {
     if (!currentPage.length) {
       var permaId = options && options.landingPagePermaId;
+      var landingPage = permaId ? getPageByPermaId(permaId) : $();
 
-      return permaId ?
-        getPageByPermaId(permaId) :
+      return landingPage.length ?
+        landingPage :
         that.scrollNavigator.getLandingPage(pages);
     }
     else if (!currentPage.parent().length) {
@@ -217,7 +217,14 @@ pageflow.Slideshow = function($el, configurations) {
   $el.find('.scroll_indicator').scrollIndicator({parent: this});
 
   this.scrollNavigator = new pageflow.DomOrderScrollNavigator(this, pageflow.entryData);
-  this.preparer = pageflow.AdjacentPreparer.create(function() { return pages; }, this.scrollNavigator).attach(pageflow.events);
+
+  pageflow.AdjacentPreloader
+          .create(function() { return pages; }, this.scrollNavigator)
+          .attach(pageflow.events);
+
+  pageflow.SuccessorPreparer
+          .create(function() { return pages; }, this.scrollNavigator)
+          .attach(pageflow.events);
 };
 
 pageflow.Slideshow.setup = function(options) {
@@ -238,7 +245,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(

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

@@ -7,7 +7,7 @@ pageflow.AdjacentPages = pageflow.Object.extend({
   of: function(page) {
     var result = [];
     var pages = this.pages();
-    var nextPage = this.scrollNavigator.getNextPage(page.element, pages);
+    var nextPage = this.nextPage(page);
 
     if (nextPage.length) {
       result.push(nextPage.page('instance'));
@@ -22,5 +22,10 @@ pageflow.AdjacentPages = pageflow.Object.extend({
     }, this);
 
     return result;
+  },
+
+  nextPage: function(page) {
+    var nextPage = this.scrollNavigator.getNextPage(page.element, this.pages());
+    return nextPage.length && nextPage.page('instance');
   }
-});
+});

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

@@ -0,0 +1,26 @@
+//= require ./adjacent_pages
+
+pageflow.AdjacentPreloader = pageflow.Object.extend({
+  initialize: function(adjacentPages) {
+    this.adjacentPages = adjacentPages;
+  },
+
+  attach: function(events) {
+    this.listenTo(events, 'page:change', this.preloadAdjacent);
+  },
+
+  preloadAdjacent: function(page) {
+    _(this.adjacentPages.of(page)).each(function(page) {
+      page.preload();
+    });
+  }
+});
+
+pageflow.AdjacentPreloader.create = function(pages, scrollNavigator) {
+  return new pageflow.AdjacentPreloader(
+    new pageflow.AdjacentPages(
+      pages,
+      scrollNavigator
+    )
+  );
+};