pageflow 13.0.0.beta6 → 13.0.0.beta7

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

@@ -2,14 +2,19 @@
   var attributeName = 'atmo_audio_file_id';
 
   pageflow.Atmo = pageflow.Object.extend({
-    initialize: function(slideshow, events, multiPlayer) {
-      this.slideshow = slideshow;
-      this.multiPlayer = multiPlayer;
+    initialize: function(options) {
+      this.slideshow = options.slideshow;
+      this.multiPlayer = options.multiPlayer;
+      this.backgroundMedia = options.backgroundMedia;
       this.disabled = pageflow.browser.has('mobile platform');
 
-      this.listenTo(events, 'page:change page:update', function() {
+      this.listenTo(options.events, 'page:change page:update background_media:unmute', function() {
         this.update();
       });
+
+      this.listenTo(options.multiPlayer, 'playfailed', function() {
+        options.backgroundMedia.mute();
+      });
     },
 
     disable: function() {
@@ -46,7 +51,7 @@
 
     resume: function() {
       if (this.multiPlayer.paused()) {
-        if (this.disabled) {
+        if (this.disabled || this.backgroundMedia.muted) {
           return new $.Deferred().resolve().promise();
         }
         else {
@@ -62,7 +67,12 @@
       var configuration = this.slideshow.currentPageConfiguration();
 
       if (!this.disabled) {
-        this.multiPlayer.fadeTo(configuration[attributeName]);
+        if (this.backgroundMedia.muted) {
+          this.multiPlayer.fadeOutAndPause();
+        }
+        else {
+          this.multiPlayer.fadeTo(configuration[attributeName]);
+        }
       }
     },
 
@@ -86,11 +96,12 @@
     }
   });
 
-  pageflow.Atmo.create = function(slideshow, events, audio) {
-    return new pageflow.Atmo(
-      slideshow,
-      events,
-      audio.createMultiPlayer({
+  pageflow.Atmo.create = function(slideshow, events, audio, backgroundMedia) {
+    return new pageflow.Atmo({
+      slideshow: slideshow,
+      events: events,
+      backgroundMedia: backgroundMedia,
+      multiPlayer: audio.createMultiPlayer({
         loop: true,
         fadeDuration: 500,
         crossFade: true,
@@ -98,7 +109,7 @@
         rewindOnChange: true,
         pauseInBackground: true
       })
-    );
+    });
   };
 
   pageflow.Atmo.duringPlaybackModes = ['play', 'mute', 'turn_down'];

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

@@ -1,6 +1,12 @@
 (function($) {
-  var creatingMethods = ['reinit', 'reactivate', 'activate', 'activateAsLandingPage', 'prepare', 'linkedPages'];
-  var ignoredMethods = ['cleanup', 'refreshScroller', 'resize', 'preload', 'deactivate', 'unprepare'];
+  var creatingMethods = [
+    'reinit', 'reactivate', 'activate', 'activateAsLandingPage', 'prepare', 'linkedPages'
+  ];
+
+  var ignoredMethods = [
+    'cleanup', 'refreshScroller', 'resize', 'preload', 'deactivate', 'unprepare',
+    'isPageChangeAllowed'
+  ];
 
   var prototype = {
     _create: function() {
@@ -55,4 +61,4 @@
   });
 
   $.widget('pageflow.page', prototype);
-}(jQuery));
+}(jQuery));

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

@@ -0,0 +1,37 @@
+pageflow.navigationDirection = (function() {
+  var eventMapping = {
+    v: {
+      scrollerbumpnext: 'scrollerbumpdown',
+      scrollerbumpback: 'scrollerbumpup',
+      scrollerhintnext: 'scrollerhintdown',
+      scrollerhintback: 'scrollerhintup',
+    },
+    h: {
+      scrollerbumpnext: 'scrollerbumpright',
+      scrollerbumpback: 'scrollerbumpleft',
+      scrollerhintnext: 'scrollerhintright',
+      scrollerhintback: 'scrollerhintleft',
+    }
+  };
+
+  return {
+    isHorizontalOnPhone: function() {
+      return pageflow.widgets.isPresent('phone_horizontal_slideshow_mode');
+    },
+
+    isHorizontal: function() {
+      return this.isHorizontalOnPhone() &&
+             pageflow.browser.has('phone platform');
+    },
+
+    getEventName: function(name) {
+      var result = eventMapping[this.isHorizontal() ? 'h' : 'v'][name];
+
+      if (!result) {
+        throw 'Unknown event name ' + name;
+      }
+
+      return result;
+    }
+  };
+}());

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

@@ -101,6 +101,10 @@
       return this._triggerPageTypeHook('linkedPages');
     },
 
+    isPageChangeAllowed: function(options) {
+      return this._triggerPageTypeHook('isPageChangeAllowed', options);
+    },
+
     preload: function() {
       var page = this;
 
@@ -152,9 +156,10 @@
 
     animateTransition: function(destination, options, callback) {
       var otherDestination = destination === 'in' ? 'out' : 'in';
-      var transition = options.transition || this.configuration.transition || 'fade';
-      var duration = pageflow.pageTransitions.get(transition).duration;
-      var animateClass = transition + ' animate-' + destination + '-' + options.direction;
+      var transition = pageflow.pageTransitions.get(options.transition ||
+                                                    this.configuration.transition ||
+                                                    'fade');
+      var animateClass = transition.className + ' animate-' + destination + '-' + options.direction;
 
       this.element
         .removeClass('animate-' + otherDestination + '-forwards animate-' + otherDestination + '-backwards')
@@ -163,9 +168,9 @@
       setTimeout(_.bind(function() {
         this.element.removeClass(animateClass);
         callback.call(this);
-      }, this), duration);
+      }, this), transition.duration);
 
-      return duration;
+      return transition.duration;
     },
 
     _triggerDelayedPageTypeHook: function(name) {
@@ -185,6 +190,7 @@
 
     _setupHideTextOnSwipe: function() {
       if (pageflow.entryData.getThemingOption('hide_text_on_swipe') &&
+          !pageflow.navigationDirection.isHorizontal() &&
           !this.pageType.noHideTextOnSwipe) {
         this.element.hideTextOnSwipe({
           eventTargetSelector: '.content > .scroller'
@@ -227,4 +233,4 @@
       });
     }
   });
-}(jQuery));
+}(jQuery));

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

@@ -1,7 +1,7 @@
 (function($) {
   var boundaries = {
-    up: 'top',
-    down: 'bottom'
+    back: 'top',
+    next: 'bottom'
   };
 
   $.widget('pageflow.scrollIndicator', {
@@ -13,16 +13,7 @@
           fadeTimeout;
 
       function update(page) {
-        if (page.hasClass('scroll_indicator_mode_non') ||
-            (page.hasClass('scroll_indicator_mode_only_next') && direction === 'up') ||
-            (page.hasClass('scroll_indicator_mode_only_back') && direction === 'down')) {
-
-          that.element.hide();
-        }
-        else {
-          that.element.show();
-        }
-
+        that.element.toggleClass('hidden_by_scoll_indicator_mode', hiddenByMode(page));
         that.element.toggleClass('hidden_for_page', hideScrollIndicatorForPage(page));
 
         that.element.toggleClass('invert', invertIndicator(page));
@@ -30,6 +21,12 @@
         that.element.toggleClass('available', targetPageExists());
       }
 
+      function hiddenByMode(page) {
+        return (page.hasClass('scroll_indicator_mode_non') ||
+                (page.hasClass('scroll_indicator_mode_only_next') && direction === 'back') ||
+                (page.hasClass('scroll_indicator_mode_only_back') && direction === 'next'));
+      }
+
       function invertIndicator(page) {
         var result = page.data('invertIndicator');
 
@@ -54,7 +51,7 @@
       }
 
       function targetPageExists() {
-        return direction === 'down' ? parent.nextPageExists() : parent.previousPageExists();
+        return direction === 'next' ? parent.nextPageExists() : parent.previousPageExists();
       }
 
       parent.on('pageactivate', function(event) {
@@ -88,7 +85,7 @@
         },
       });
 
-      parent.on('scrollerhint' + direction, function() {
+      parent.on(pageflow.navigationDirection.getEventName('scrollerhint' + direction), function() {
         that.element.addClass('animate');
         setTimeout(function() {
           that.element.removeClass('animate');
@@ -117,7 +114,7 @@
       });
 
       this.element.on('click', function() {
-        if (direction === 'down') {
+        if (direction === 'next') {
           parent.next();
         }
         else {
@@ -126,4 +123,4 @@
       });
     }
   });
-}(jQuery));
+}(jQuery));

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

@@ -9,6 +9,7 @@
   $.widget('pageflow.scroller', {
     dragThreshold: 50,
     maxXDelta: 50,
+    maxYDelta: 50,
     doubleBumpThreshold: 500,
 
     _create: function() {
@@ -208,25 +209,34 @@
     },
 
     // Trigger bumpup or bumpdown when the user drags the page from a
-    // boundary position.
+    // boundary position. Trigger bumpleft or bumpright if user drags
+    // horizontally.
     _initDragGestureBump: function() {
       var allowUp = false,
           allowDown = false,
+          allowLeft = false,
+          allowRight = false,
           startX, startY;
 
       this.element.on('touchstart MSPointerDown pointerdown', _.bind(function(event) {
-        var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
+        var point = event.originalEvent.touches ?
+                    event.originalEvent.touches[0] : event.originalEvent;
+
         startX = point.pageX;
         startY = point.pageY;
 
-        if (!isNonTouchPointer(event)) {
+        if (!this._isNonTouchPointer(event)) {
           allowDown = this._atBoundary('down');
           allowUp = this._atBoundary('up');
+          allowLeft = true;
+          allowRight = true;
         }
       }, this));
 
       this.element.on('touchmove MSPointerMove pointermove', _.bind(function(event) {
-        var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
+        var point = event.originalEvent.touches ?
+                    event.originalEvent.touches[0] : event.originalEvent;
+
         var deltaX = point.pageX - startX;
         var deltaY = point.pageY - startY;
 
@@ -234,30 +244,55 @@
           allowDown = allowUp = false;
         }
 
+        if (Math.abs(deltaY) > this.maxYDelta) {
+          allowLeft = allowRight = false;
+        }
+
         if (allowUp && deltaY > this.dragThreshold) {
           this._trigger('bumpup');
-          allowDown = allowUp = false;
+          allowDown = allowUp = allowLeft = allowRight = false;
         }
         else if (allowDown && deltaY < -this.dragThreshold) {
           this._trigger('bumpdown');
-          allowDown = allowUp = false;
+          allowDown = allowUp = allowLeft = allowRight = false;
+        }
+        else if (allowLeft && deltaX > this.dragThreshold) {
+          this._trigger('bumpleft');
+          allowDown = allowUp = allowLeft = allowRight = false;
+        }
+        else if (allowRight && deltaX < -this.dragThreshold) {
+          this._trigger('bumpright');
+          allowDown = allowUp = allowLeft = allowRight =false;
         }
       }, this));
 
       this.element.on('touchend MSPointerUp pointerup', _.bind(function(event) {
-        if (allowUp) {
+        var point = event.originalEvent.touches ?
+                    event.originalEvent.changedTouches[0] : event.originalEvent;
+
+        var deltaX = point.pageX - startX;
+        var deltaY = point.pageY - startY;
+
+        if (allowUp && deltaY > 0) {
           this._trigger('hintup');
         }
-        if (allowDown) {
+        else if (allowDown && deltaY < 0) {
           this._trigger('hintdown');
         }
+
+        if (allowLeft && deltaX > 0) {
+          this._trigger('hintleft');
+        }
+        else if (allowRight && deltaX < 0) {
+          this._trigger('hintright');
+        }
       }, this));
+    },
 
-      function isNonTouchPointer(event) {
-        return event.originalEvent.pointerType &&
-          event.originalEvent.pointerType !== event.originalEvent.MSPOINTER_TYPE_TOUCH &&
-          event.originalEvent.pointerType !== 'touch';
-      }
+    _isNonTouchPointer: function(event) {
+      return event.originalEvent.pointerType &&
+             event.originalEvent.pointerType !== event.originalEvent.MSPOINTER_TYPE_TOUCH &&
+             event.originalEvent.pointerType !== 'touch';
     },
 
     // Checks whether the scroller is at the very top or very bottom.
@@ -273,4 +308,4 @@
       }
     }
   });
-}(jQuery));
+}(jQuery));

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

@@ -87,6 +87,10 @@
  *   An array of prefixes to lookup translations for labels and
  *   inline help texts based on attribute names.
  *
+ * @param {string} [options.additionalInlineHelpText]
+ *   A text that will be appended to the translation based inline
+ *   text.
+ *
  * @param {boolean} [options.disabled]
  *   Render input as disabled.
  *
@@ -190,7 +194,10 @@ pageflow.inputView = {
       keys = pageflow.i18nUtils.translationKeysWithSuffix(keys, 'disabled');
     }
 
-    return pageflow.i18nUtils.findTranslation(keys, {defaultValue: '', html: true});
+    return _.compact([
+      pageflow.i18nUtils.findTranslation(keys, {defaultValue: '', html: true}),
+      this.options.additionalInlineHelpText
+    ]).join(' ');
   },
 
   updateDisabled: function() {
@@ -217,11 +224,11 @@ pageflow.inputView = {
     }
 
     function updateVisible(model, value) {
-      view.$el.toggle(isVisible(value));
+      view.$el.toggleClass('input-hidden_via_binding', !isVisible(value));
     }
 
     function isVisible(value) {
-      if (view.options.visibleBindingValue) {
+      if ('visibleBindingValue' in view.options) {
         return value === view.options.visibleBindingValue;
       }
       else if (typeof view.options.visible === 'function') {

data/app/assets/javascripts/pageflow/video_player/lazy.js

@@ -80,7 +80,7 @@ pageflow.VideoPlayer.Lazy = function(template, options) {
     return videoPlayer && videoPlayer.posterImage.unlockShowing();
   };
 
-  _.each(['play', 'playAndFadeIn', 'pause', 'fadeOutAndPause', 'prebuffer', 'src', 'on', 'load', 'currentTime'], function(method) {
+  _.each(['play', 'playAndFadeIn', 'pause', 'fadeOutAndPause', 'prebuffer', 'src', 'on', 'load', 'currentTime', 'muted'], function(method) {
     that[method] = function(/* args */) {
       var args = arguments;
 

data/app/assets/stylesheets/pageflow/animations/bounce.scss

@@ -8,4 +8,16 @@
   100% {
     @include transform(translateY(0));
   }
-}
+}
+
+@include keyframes(bounce_x) {
+  0% {
+    @include transform(translateX(0));
+  }
+  10% {
+    @include transform(translateX(-30px));
+  }
+  100% {
+    @include transform(translateX(0));
+  }
+}

data/app/assets/stylesheets/pageflow/editor/base.scss

@@ -7,6 +7,7 @@
 @import "./blank_entry";
 @import "./dialogs";
 @import "./colors";
+@import "./entry_preview";
 @import "./background_positioning";
 @import "./page_selection";
 @import "./files_explorer";
@@ -68,6 +69,7 @@
   @import "./file_stages";
   @import "./file_thumbnails";
   @import "./file_settings_dialog";
+  @import "./info_box";
   @import "./text_tracks";
   @import "./static_thumbnails";
   @import "./wysihtml5";
@@ -81,6 +83,9 @@
   @import "./page_links";
   @import "./storyline_picker";
   @import "./loading";
+  @import "./sidebar_footer";
+  @import "./emulation_mode_button";
+  @import "./help_image";
 
   a.publish {
     @include eye-icon;