pageflow 0.8.2 → 0.9.0

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

@@ -0,0 +1,49 @@
+(function($) {
+  var creatingMethods = ['reinit', 'reactivate', 'activate', 'activateAsLandingPage', 'prepare', 'linkedPages'];
+  var ignoredMethods = ['cleanup', 'refreshScroller', 'resize', 'preload', 'deactivate', 'unprepare'];
+
+  var prototype = {
+    _create: function() {
+      this.configuration = this.element.data('configuration') || this.options.configuration;
+    },
+
+    _ensureCreated: function() {
+      this.created = true;
+      this.element.nonLazyPage(this.options);
+    },
+
+    _delegateToInner: function(method, args) {
+      return this.element.nonLazyPage.apply(this.element, [method].concat([].slice.call(args)));
+    },
+
+    getConfiguration: function() {
+      return this.configuration;
+    },
+
+    update: function(configuration) {
+      if (this.created) {
+        this._delegateToInner('update', arguments);
+      }
+      else {
+        _.extend(this.configuration, configuration.attributes);
+      }
+    }
+  };
+
+  _(creatingMethods).each(function(method) {
+    prototype[method] = function() {
+      this._ensureCreated();
+      return this._delegateToInner(method, arguments);
+    };
+  });
+
+  _(ignoredMethods).each(function(method) {
+    prototype[method] = function() {
+      if (this.created) {
+        return this._delegateToInner(method, arguments);
+      }
+    };
+  });
+
+  $.widget('pageflow.page', prototype);
+}(jQuery));

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

@@ -1,24 +1,39 @@
 (function($) {
-  $.widget('pageflow.page', {
+  $.widget('pageflow.nonLazyPage', {
+    widgetEventPrefix: 'page',
     _create: function() {
       this.configuration = this.element.data('configuration') || this.options.configuration;
       this.index = this.options.index;
 
-      this.element.addClass(this.configuration.transition || "fade");
-
       this.preloaded = false;
       this.reinit();
     },
 
+    getPermaId: function() {
+      return parseInt(this.element.attr('id'), 10);
+    },
+
+    getConfiguration: function() {
+      return this.configuration;
+    },
+
+    update: function(configuration) {
+      _.extend(this.configuration, configuration.attributes);
+      this.pageType.update(this.element, configuration);
+    },
+
     reinit: function() {
       this.pageType = pageflow.pageType.get(this.element.data('template'));
       this.element.data('pageType', this.pageType);
 
       this.content = this.element.find('.scroller');
-      this.content.scroller();
-      this.content.hideTextOnSwipe();
+      this.content.scroller(this.pageType.scrollerOptions || {});
+      this.pageType.scroller = this.content.scroller('instance');
+
+      this._setupHideTextOnSwipe();
 
       this._triggerPageTypeHook('enhance');
+      this._trigger('enhanced');
     },
 
     reactivate: function() {
@@ -55,18 +70,24 @@
       this._trigger('activate', null, {page: this});
       this._triggerPageTypeHook('activating');
       this._triggerDelayedPageTypeHook('activated');
-
-      this.prepareTimeout = setTimeout(_.bind(this.triggerPrepareNextPage, this), this.prepareNextPageTimeout());
     },
 
     prepare: function() {
       this._triggerPageTypeHook('prepare');
     },
 
+    unprepare: function() {
+      this._triggerPageTypeHook('unprepare');
+    },
+
     prepareNextPageTimeout: function() {
       return this.pageType.prepareNextPageTimeout;
     },
 
+    linkedPages: function() {
+      return this._triggerPageTypeHook('linkedPages');
+    },
+
     preload: function() {
       var page = this;
 
@@ -82,44 +103,56 @@
     activate: function(options) {
       options = options || {};
 
-      this.element
-        .removeClass('animate-out-forwards animate-out-backwards')
-        .addClass('animate-in-' + options.direction);
-
       setTimeout(_.bind(function() {
         this.element.addClass('active');
-      }, this), 5);
+      }, this), 0);
 
-      setTimeout(_.bind(function() {
+      var duration = this.animateTransition('in', options, function() {
         this.content.scroller('enable');
         this.content.scroller('afterAnimationHook');
-        this.element.removeClass('animate-in-forwards animate-in-backwards');
 
         this._triggerDelayedPageTypeHook('activated');
-      }, this), 1100);
+      });
 
       this.content.scroller('resetPosition', {position: options.position});
       this._trigger('activate', null, {page: this});
       this._triggerPageTypeHook('activating');
 
-      this.prepareTimeout = setTimeout(_.bind(this.triggerPrepareNextPage, this), this.prepareNextPageTimeout());
+      return duration;
     },
 
     deactivate: function(options) {
-      this.element
-        .removeClass('active animate-in-forwards animate-in-backwards')
-        .addClass('animate-out-' + options.direction);
+      options = options || {};
 
-      setTimeout(_.bind(function() {
-        this.element.removeClass('animate-out-forwards animate-out-backwards');
+      this.element.removeClass('active');
+
+      var duration = this.animateTransition('out', options, function() {
         this._triggerPageTypeHook('deactivated');
-      }, this), 1100);
+      });
 
       this.content.scroller('disable');
       this._trigger('deactivate');
       this._triggerPageTypeHook('deactivating');
 
-      clearTimeout(this.prepareTimeout);
+      return duration;
+    },
+
+    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;
+
+      this.element
+        .removeClass('animate-' + otherDestination + '-forwards animate-' + otherDestination + '-backwards')
+        .addClass(animateClass);
+
+      setTimeout(_.bind(function() {
+        this.element.removeClass(animateClass);
+        callback.call(this);
+      }, this), duration);
+
+      return duration;
     },
 
     _triggerDelayedPageTypeHook: function(name) {
@@ -137,9 +170,10 @@
       return this.pageType[name](this.element, this.configuration);
     },
 
-    triggerPrepareNextPage: function() {
-      if($(this.element).next(".page").length > 0) {
-        $(this.element).next(".page").page('prepare', {});
+    _setupHideTextOnSwipe: function() {
+      if (pageflow.entryData.getThemingOption('hide_text_on_swipe') &&
+          !this.pageType.noHideTextOnSwipe) {
+        this.content.hideTextOnSwipe();
       }
     }
   });

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

@@ -1,7 +1,7 @@
 pageflow.ProgressivePreload = function() {
   var run = null;
 
-  function Run(page) {
+  function Run(page, maxPreloadedPages) {
     var cancelled = false;
 
     this.cancel = function() {
@@ -9,17 +9,26 @@ pageflow.ProgressivePreload = function() {
     };
 
     this.start = function() {
-      return preload(page);
+      preload(page, 0);
     };
 
-    function preload(page) {
-      return $.when(page.page('preload')).pipe(function() {
+    function preload(page, counter) {
+      $.when(page.page('preload'), tick()).then(function() {
         var nextPage = page.next('.page');
-        if (!cancelled && nextPage.length) {
-          return preload(nextPage);
+        if (!cancelled && nextPage.length && counter < maxPreloadedPages) {
+          preload(nextPage, counter + 1);
         }
       });
     }
+
+    // prevent stack level from becoming to deep
+    function tick() {
+      return new $.Deferred(function(deferred) {
+        setTimeout(function() {
+          deferred.resolve();
+        }, 1);
+      }).promise();
+    }
   }
 
   this.start = function(page) {
@@ -27,7 +36,7 @@ pageflow.ProgressivePreload = function() {
       run.cancel();
     }
 
-    run = new Run(page);
+    run = new Run(page, 10);
     run.start();
   };
 };

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

@@ -1,36 +1,66 @@
 (function($) {
+  var boundaries = {
+    up: 'top',
+    down: 'bottom'
+  };
+
   $.widget('pageflow.scrollIndicator', {
     _create: function() {
       var parent = this.options.parent,
-        that = this;
+          direction = this.element.data('direction'),
+          boundary = boundaries[direction],
+          that = this;
 
-      parent.on('pageactivate', function(event) {
-        var page = $(event.target);
+      function update(page) {
         var invertIndicator = page.data('invertIndicator');
 
         if (typeof invertIndicator === 'undefined') {
           invertIndicator = page.hasClass('invert');
         }
 
+        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('invert', invertIndicator);
+        that.element.toggleClass('horizontal', page.hasClass('scroll_indicator_orientation_horizontal'));
+        that.element.toggleClass('available', targetPageExists());
+      }
+
+      function targetPageExists() {
+        return direction === 'down' ? parent.nextPageExists() : parent.previousPageExists();
+      }
+
+      parent.on('pageactivate', function(event) {
+        update($(event.target));
+      });
+
+      pageflow.events.on('page:update', function() {
+        update(parent.currentPage());
       });
 
-      parent.on('scrollerhintdown', function() {
+      parent.on('scrollerhint' + direction, function() {
         that.element.addClass('animate');
         setTimeout(function() {
           that.element.removeClass('animate');
         }, 500);
       });
 
-      parent.on('scrollernearbottom', function(event) {
+      parent.on('scrollernear' + boundary, function(event) {
         var page = $(event.target).parents('section');
 
         if (page.hasClass('active')) {
-          that.element.toggleClass('visible', parent.nextPageExists());
+          that.element.toggleClass('visible', targetPageExists());
         }
       });
 
-      parent.on('scrollernotnearbottom slideshowchangepage', function() {
+      parent.on('scrollernotnear' + boundary +' slideshowchangepage', function() {
         that.element.removeClass('visible');
       });
 
@@ -43,6 +73,14 @@
         }, 3000);
       });
 
+      this.element.on('click', function() {
+        if (direction === 'down') {
+          parent.next();
+        }
+        else {
+          parent.back();
+        }
+      });
     }
   });
 }(jQuery));

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

@@ -11,24 +11,29 @@
     doubleBumpThreshold: 500,
 
     _create: function() {
-      this.iscroll = new IScroll(this.element[0], {
+      this.iscroll = new IScroll(this.element[0], _.extend({
         mouseWheel: true,
         bounce: false,
         keyBindings: true,
         probeType: 2,
         preventDefault: false
-      });
+      }, _.pick(this.options, 'freeScroll', 'scrollX', 'noMouseWheelScrollX')));
 
       this.iscroll.disable();
 
-      this._initMousewheelBump('up');
-      this._initMousewheelBump('down');
+      if (pageflow.entryData.getThemingOption('page_change_by_scrolling')) {
+        this._initMousewheelBump('up');
+        this._initMousewheelBump('down');
+        this._initDragGestureBump();
+      }
+
       this._initKeyboardBump('up');
       this._initKeyboardBump('down');
-      this._initDragGestureBump();
       this._initNearBottomEvents();
       this._initNearTopEvents();
       this._initMoveEvents();
+
+      this._onScrollEndCallbacks = new $.Callbacks();
     },
 
     enable: function() {
@@ -49,6 +54,25 @@
       }
     },
 
+    scrollBy: function(deltaX, deltaY, time, easing) {
+      this.scrollTo(
+        this.iscroll.x + deltaX,
+        this.iscroll.y + deltaY,
+        time,
+        easing
+      );
+    },
+
+    scrollTo: function(x, y, time, easing) {
+      this.iscroll.scrollTo(
+        Math.max(Math.min(x, 0), this.iscroll.maxScrollX),
+        Math.max(Math.min(y, 0), this.iscroll.maxScrollY),
+        time,
+        easing
+      );
+      this._onScrollEndCallbacks.fire();
+    },
+
     refresh: function() {
       this.iscroll.refresh();
     },
@@ -61,16 +85,29 @@
       this.iscroll.disable();
     },
 
+    positionX: function() {
+      return this.iscroll.x;
+    },
+
     positionY: function() {
       return this.iscroll.y;
     },
 
+    maxX: function() {
+      return this.iscroll.maxScrollX;
+    },
+
+    maxY: function() {
+      return this.iscroll.maxScrollY;
+    },
+
     onScroll: function(callback) {
       this.iscroll.on('scroll', callback);
     },
 
     onScrollEnd: function(callback) {
       this.iscroll.on('scrollEnd', callback);
+      this._onScrollEndCallbacks.add(callback);
     },
 
     _initMoveEvents: function() {

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

@@ -8,6 +8,7 @@
 //= require ./ui/renderer
 //= require ./ui/object
 
+//= require_tree ./ui/utils
 //= require_tree ./ui/views/mixins
 //= require ./ui/views/inputs/select_input_view
 //= require_tree ./ui/views

data/app/assets/javascripts/pageflow/ui/object.js

@@ -1,14 +1,5 @@
-(function() {
-  // Class-y constructor by github.com/opensas
-  // https://github.com/jashkenas/backbone/issues/2601
+// pageflow.Object is now part of pageflow/base.js and no longer needs
+// to be required by Pageflow extensions. Keep this file for backwards
+// compatibility.
 
-  pageflow.Object = function(options) {
-      this.initialize.apply(this, arguments);
-  };
-  _.extend(pageflow.Object.prototype, Backbone.Events, {
-      initialize: function(options) {}
-  });
-
-  // The self-propagating extend function that Backbone classes use.
-  pageflow.Object.extend = Backbone.Model.extend;
-}());
+//= require pageflow/object