pageflow 13.0.0.beta7 → 13.0.0.rc1

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

@@ -7,6 +7,7 @@ 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();
 
@@ -71,4 +72,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,62 +12,84 @@ pageflow.mediaPlayer.volumeFading.webAudio = function(player, audioContext) {
 
   var allowedMinValue = 0.000001;
 
-  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') {
+  function tryResumeIfSuspended() {
+    return new $.Deferred(function(deferred) {
       if (audioContext.state === 'suspended') {
-        currentValue = ensureInAllowedRange(value);
-        return;
+        var maybePromise = audioContext.resume();
+
+        if (maybePromise && maybePromise.then) {
+          maybePromise.then(handleDeferred);
+        }
+        else {
+          setTimeout(handleDeferred, 0);
+        }
+      }
+      else {
+        deferred.resolve();
       }
 
-      ensureGainNode();
-
-      cancel();
-      currentValue = ensureInAllowedRange(value);
+      function handleDeferred() {
+        if (audioContext.state === 'suspended') {
+          deferred.reject();
+        }
+        else {
+          deferred.resolve();
+        }
+      }
+    }).promise();
+  }
 
-      return gainNode.gain.setValueAtTime(currentValue,
-                                          audioContext.currentTime);
+  player.volume = function(value) {
+    if (typeof value !== 'undefined') {
+      tryResumeIfSuspended().then(
+        function() {
+          ensureGainNode();
+
+          cancel();
+          currentValue = ensureInAllowedRange(value);
+
+          gainNode.gain.setValueAtTime(currentValue,
+                                       audioContext.currentTime);
+        },
+        function() {
+          currentValue = ensureInAllowedRange(value);
+        }
+      );
     }
 
     return Math.round(currentValue * 100) / 100;
   };
 
   player.fadeVolume = function(value, duration) {
-    if (audioContext.state === 'suspended') {
-      currentValue = ensureInAllowedRange(value);
-      return new $.Deferred().resolve().promise();
-    }
+    return tryResumeIfSuspended().then(
+      function() {
+        ensureGainNode();
 
-    ensureGainNode();
+        cancel();
+        recordFadeStart(duration);
 
-    cancel();
-    recordFadeStart(duration);
-
-    currentValue = ensureInAllowedRange(value);
+        currentValue = ensureInAllowedRange(value);
 
-    gainNode.gain.setValueAtTime(lastStartValue, audioContext.currentTime);
-    gainNode.gain.linearRampToValueAtTime(currentValue,
-                                          audioContext.currentTime + duration / 1000);
+        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();
+        return new $.Deferred(function(deferred) {
+          currentTimeout = setTimeout(resolve, duration);
+          currentDeferred = deferred;
+        }).promise();
+      },
+      function() {
+        currentValue = ensureInAllowedRange(value);
+        return new $.Deferred().resolve().promise();
+      }
+    );
   };
 
   player.one('dispose', cancel);
@@ -119,9 +141,10 @@ 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 + (performedDuration / lastDuration * lastDelta)
+        lastStartValue + performedFraction * lastDelta
       );
     }
     else {

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
@@ -16,7 +16,6 @@
 
 pageflow.Slideshow = function($el, configurations) {
   var transitioning = false,
-      preload = new pageflow.ProgressivePreload(),
       currentPage = $(),
       pages = $(),
       that = this,
@@ -127,7 +126,7 @@ pageflow.Slideshow = function($el, configurations) {
           transition: transition
         });
 
-        preload.start(currentPage);
+        currentPage.page('preload');
         $el.trigger('slideshowchangepage', [options]);
 
         return Math.max(outDuration, inDuration);
@@ -176,16 +175,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) {
@@ -236,7 +236,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) {

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

@@ -7,10 +7,10 @@ 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'));
+    if (nextPage) {
+      result.push(nextPage);
     }
 
     _(page.linkedPages()).each(function(permaId) {
@@ -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
+    )
+  );
+};

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

@@ -1,10 +1,10 @@
 (function($) {
   var creatingMethods = [
-    'reinit', 'reactivate', 'activate', 'activateAsLandingPage', 'prepare', 'linkedPages'
+    'reinit', 'reactivate', 'activate', 'activateAsLandingPage', 'preload', 'prepare', 'linkedPages'
   ];
 
   var ignoredMethods = [
-    'cleanup', 'refreshScroller', 'resize', 'preload', 'deactivate', 'unprepare',
+    'cleanup', 'refreshScroller', 'resize', 'deactivate', 'unprepare',
     'isPageChangeAllowed'
   ];
 

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

@@ -0,0 +1,49 @@
+//= require ./adjacent_pages
+
+pageflow.SuccessorPreparer = pageflow.Object.extend({
+  initialize: function(adjacentPages) {
+    this.adjacentPages = adjacentPages;
+  },
+
+  attach: function(events) {
+    this.listenTo(events, 'page:change', this.schedule);
+  },
+
+  schedule: function(page) {
+    clearTimeout(this.scheduleTimeout);
+
+    var prepare = _.bind(this.prepareSuccessor, this, page);
+    this.scheduleTimeout = setTimeout(prepare, page.prepareNextPageTimeout());
+  },
+
+  prepareSuccessor: function(page) {
+    var preparedPages = _.compact([
+      page,
+      this.adjacentPages.nextPage(page)
+    ]);
+
+    var noLongerPreparedPages = _.difference(this.lastPreparedPages, preparedPages);
+    var newAdjacentPages = _.difference(preparedPages, this.lastPreparedPages);
+
+    _(noLongerPreparedPages).each(function(page) {
+      if (!page.isDestroyed) {
+        page.unprepare();
+      }
+    });
+
+    _(newAdjacentPages).each(function(adjacentPage) {
+      adjacentPage.prepare();
+    });
+
+    this.lastPreparedPages = preparedPages;
+  }
+});
+
+pageflow.SuccessorPreparer.create = function(pages, scrollNavigator) {
+  return new pageflow.SuccessorPreparer(
+    new pageflow.AdjacentPages(
+      pages,
+      scrollNavigator
+    )
+  );
+};

data/app/assets/javascripts/pageflow/ui/views/inputs/text_input_view.js

@@ -4,6 +4,11 @@
  * @param {boolean} [options.required=false]
  *   Display an error if the input is blank.
  *
+ * @param {number} [options.maxLength=255]
+ *   Maximum length of characters for this input.
+ *   To support legacy data which consists of more characters than the specified maxLength,
+ *   the option will only take effect for data which is shorter than the specified maxLength.
+ *
  * @see
  * {@link module:pageflow/ui.pageflow.inputWithPlaceholderText pageflow.inputWithPlaceholderText}
  * for placeholder related further options
@@ -33,12 +38,15 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
   },
 
   onChange: function() {
-    this.validate();
-    this.save();
+    if(this.validate()) {
+      this.save();
+    }
   },
 
   onClose: function() {
-    this.save();
+    if(this.validate()) {
+      this.save();
+    }
   },
 
   save: function() {
@@ -46,15 +54,31 @@ pageflow.TextInputView = Backbone.Marionette.ItemView.extend({
   },
 
   load: function() {
-    this.ui.input.val(this.model.get(this.options.propertyName));
+    var input = this.ui.input;
+    input.val(this.model.get(this.options.propertyName));
+
+    // set mysql varchar length as default for non-legacy data
+    this.options.maxLength = this.options.maxLength || 255;
+    // do not validate legacy data which length exceeds the specified maximum
+    // for new and maxLength-conforming data: add validation
+    this.validateMaxLength = (input.val().length <= this.options.maxLength);
   },
 
   validate: function() {
-    if (this.options.required && !this.ui.input.val()) {
+    var input = this.ui.input;
+    if (this.options.required && !input.val()) {
       this.displayValidationError(I18n.t('pageflow.ui.views.inputs.text_input_view.required_field'));
+      return false;
+    } if (this.validateMaxLength && (input.val().length > this.options.maxLength)) {
+      this.displayValidationError(
+        I18n.t('pageflow.ui.views.inputs.text_input_view.max_characters_exceeded',
+               {max_length: this.options.maxLength})
+      );
+      return false;
     }
     else {
       this.resetValidationError();
+      return true;
     }
   },
 

data/app/assets/javascripts/pageflow/ui/views/mixins/input_view.js

@@ -56,7 +56,7 @@
  * ### Inline Help for Disabled Inputs
  *
  * For each inline help translation key, a separate key with an
- * `"_disbaled"` suffix can be supplied, which provides a help string
+ * `"_disabled"` suffix can be supplied, which provides a help string
  * that shall be displayed when the input is disabled. More specific
  * attribute translation key prefixes take precedence over suffixed
  * keys:

data/app/assets/javascripts/pageflow/widgets/multimedia_alert.js

@@ -23,6 +23,7 @@
 
         widget.element.find('.close').one('click', function() {
           hide();
+          pageflow.backgroundMedia.unmute();
 
           pageflow.events.trigger('button:close_multimedia_alert');
           start();
@@ -42,4 +43,4 @@
       pageflow.nativeScrolling.preventScrollBouncing(this.element);
     }
   });
-}(jQuery));
+}(jQuery));

data/app/assets/stylesheets/pageflow/admin/tabs_view.scss

@@ -3,7 +3,7 @@
   background-color: #f4f4f4;
   @include inset-shadow(0, 1px, 4px, #ddd);
 
-  > .tabs {
+  &-tabs {
     @include gradient(#efefef, #dfe1e2);
     box-shadow: 0 1px 1px rgba(0,0,0,0.10), 0 1px 0 0 rgba(255,255,255, 0.8) inset;
     border: solid 1px #c7c7c7;
@@ -37,7 +37,7 @@
     }
   }
 
-  > .tab_container {
+  &-container {
     @include clearfix;
     @extend .panel_contents;
 
@@ -48,4 +48,4 @@
       display: block;
     }
   }
-}
+}

data/app/assets/stylesheets/pageflow/navigation_mobile.scss

@@ -132,7 +132,7 @@ body {
       height: 34px;
       border-radius: 17px;
       background-color: rgba(53, 53, 53, 0.9);
-      @include box-shadow(0 0 7px #ccc);
+      box-shadow: 0 0 7px #ccc;
       z-index: 1;
     }
   }