pageflow 0.0.1

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

@@ -0,0 +1,21 @@
+(function($) {
+  $.widget('pageflow.hiddenTextIndicator', {
+    _create: function() {
+      var parent = this.options.parent,
+          that = this;
+
+      parent.on('pageactivate', function(event) {
+        that.element.toggleClass('invert', $(event.target).hasClass('invert'));
+        that.element.toggleClass('hidden', $(event.target).hasClass('hide_content_with_text'));
+      });
+
+      parent.on('hidetextactivate', function(event) {
+        that.element.addClass('visible');
+      });
+
+      parent.on('hidetextdeactivate', function() {
+        that.element.removeClass('visible');
+      });
+    }
+  });
+}(jQuery));

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

@@ -0,0 +1,48 @@
+pageflow.hideText = (function() {
+  function element() {
+    return $('body');
+  }
+
+  function prefix(event) {
+    return _.map(event.split(' '), function(e) {
+      return 'hidetext' + e;
+    }).join(' ');
+  }
+
+  $(function() {
+    element().on('keydown', function(e) {
+      if(event.keyCode == 27) {
+        pageflow.hideText.deactivate();
+      }
+    });
+  });
+
+  return {
+    isActive: function() {
+      return element().hasClass('hideText');
+    },
+
+    toggle: function() {
+      if (this.isActive()) {
+        this.deactivate();
+      }
+      else {
+        this.activate();
+      }
+    },
+
+    activate: function() {
+      element().addClass('hideText');
+      element().trigger('hidetextactivate');
+    },
+
+    deactivate: function() {
+      element().removeClass('hideText');
+      element().trigger('hidetextdeactivate');
+    },
+
+    on: function(event, callback) {
+      element().on(prefix(event), callback);
+    }
+  };
+}());

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

@@ -0,0 +1,25 @@
+(function($) {
+  $.widget('pageflow.hideTextOnSwipe', {
+    _create: function() {
+      this.element.swipeGesture({
+        orientation: 'x'
+      });
+
+      this.element.on('swipegestureleft', function() {
+        pageflow.hideText.activate();
+      });
+
+      this.element.on('touchstart MSPointerDown mousedown', function() {
+        if (pageflow.hideText.isActive()) {
+          pageflow.hideText.deactivate();
+        }
+      });
+
+      this.element.on('scrollermove', function() {
+        if (pageflow.hideText.isActive()) {
+          pageflow.hideText.deactivate();
+        }
+      });
+    }
+  });
+}(jQuery));

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

@@ -0,0 +1,136 @@
+(function($) {
+  $.widget('pageflow.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();
+    },
+
+    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._triggerPageTypeHook('enhance');
+    },
+
+    reactivate: function() {
+      if (this.element.hasClass('active')) {
+        this.content.scroller('enable');
+        this.content.scroller('afterAnimationHook');
+
+        this._triggerPageTypeHook('activating');
+        this._triggerDelayedPageTypeHook('activated');
+      }
+    },
+
+    refreshScroller: function() {
+      this.content.scroller('refresh');
+    },
+
+    resize: function() {
+      this._triggerPageTypeHook('resize');
+    },
+
+    activateAsLandingPage: function() {
+      this.element.addClass('active');
+
+      this.content.scroller('enable');
+      this.content.scroller('afterAnimationHook');
+
+      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');
+    },
+
+    prepareNextPageTimeout: function() {
+      return this.pageType.prepareNextPageTimeout;
+    },
+
+    preload: function() {
+      var page = this;
+
+      if (!this.preloaded) {
+        this.preloaded = true;
+
+        return $.when(this._triggerPageTypeHook('preload')).then(function() {
+          page._trigger('preloaded');
+        });
+      }
+    },
+
+    activate: function(options) {
+      this.element
+        .removeClass('animate-out-forwards animate-out-backwards')
+        .addClass('animate-in-' + options.direction);
+
+      setTimeout(_.bind(function() {
+        this.element.addClass('active');
+      }, this), 5);
+
+      setTimeout(_.bind(function() {
+        this.content.scroller('afterAnimationHook');
+        this.element.removeClass('animate-in-forwards animate-in-backwards');
+
+        this._triggerDelayedPageTypeHook('activated');
+      }, this), 1100);
+
+      this.content.scroller('enable');
+      this._trigger('activate', null, {page: this});
+      this._triggerPageTypeHook('activating');
+
+      this.prepareTimeout = setTimeout(_.bind(this.triggerPrepareNextPage, this), this.prepareNextPageTimeout());
+    },
+
+    deactivate: function(options) {
+      this.element
+        .removeClass('active animate-in-forwards animate-in-backwards')
+        .addClass('animate-out-' + options.direction);
+
+      setTimeout(_.bind(function() {
+        this.element.removeClass('animate-out-forwards animate-out-backwards');
+        this._triggerPageTypeHook('deactivated');
+      }, this), 1100);
+
+      this.content.scroller('disable');
+      this._trigger('deactivate');
+      this._triggerPageTypeHook('deactivating');
+
+      clearTimeout(this.prepareTimeout);
+    },
+
+    _triggerDelayedPageTypeHook: function(name) {
+      var that = this;
+      var handle = pageflow.manualStart.wait(function() {
+        that._triggerPageTypeHook(name);
+      });
+
+      this.element.one('deactivate', function() {
+        handle.cancel();
+      });
+    },
+
+    _triggerPageTypeHook: function(name) {
+      return this.pageType[name](this.element, this.configuration);
+    },
+
+    triggerPrepareNextPage: function() {
+      if($(this.element).next(".page").length > 0) {
+        $(this.element).next(".page").page('prepare', {});
+      }
+    }
+  });
+}(jQuery));

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

@@ -0,0 +1,33 @@
+pageflow.ProgressivePreload = function() {
+  var run = null;
+
+  function Run(page) {
+    var cancelled = false;
+
+    this.cancel = function() {
+      cancelled = true;
+    };
+
+    this.start = function() {
+      return preload(page);
+    };
+
+    function preload(page) {
+      return $.when(page.page('preload')).pipe(function() {
+        var nextPage = page.next('.page');
+        if (!cancelled && nextPage.length) {
+          return preload(nextPage);
+        }
+      });
+    }
+  }
+
+  this.start = function(page) {
+    if (run) {
+      run.cancel();
+    }
+
+    run = new Run(page);
+    run.start();
+  };
+};

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

@@ -0,0 +1,31 @@
+(function($) {
+  $.widget('pageflow.scrollIndicator', {
+    _create: function() {
+      var parent = this.options.parent,
+          that = this;
+
+      parent.on('pageactivate', function(event) {
+        that.element.toggleClass('invert', $(event.target).hasClass('invert'));
+      });
+
+      parent.on('scrollerhintdown', function() {
+        that.element.addClass('animate');
+        setTimeout(function() {
+          that.element.removeClass('animate');
+        }, 500);
+      });
+
+      parent.on('scrollernearbottom', function(event) {
+        var page = $(event.target).parents('section');
+
+        if (page.hasClass('active')) {
+          that.element.toggleClass('visible', parent.nextPageExists());
+        }
+      });
+
+      parent.on('scrollernotnearbottom slideshowchangepage', function() {
+        that.element.removeClass('visible');
+      });
+    }
+  });
+}(jQuery));

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

@@ -0,0 +1,214 @@
+/*global IScroll*/
+(function($) {
+  /**
+   * Wrapper widget around iScroll adding special bump events which
+   * are triggered when scrolling to the very top or very bottom
+   * (called boundary posititon below).
+   */
+  $.widget('pageflow.scroller', {
+    dragThreshold: 50,
+    maxXDelta: 50,
+    doubleBumpThreshold: 500,
+
+    _create: function() {
+      this.iscroll = new IScroll(this.element[0], {
+        mouseWheel: true,
+        bounce: false,
+        keyBindings: true,
+        probeType: 2,
+        preventDefault: false
+      });
+
+      this.iscroll.disable();
+
+      this._initMousewheelBump('up');
+      this._initMousewheelBump('down');
+      this._initKeyboardBump('up');
+      this._initKeyboardBump('down');
+      this._initDragGestureBump();
+      this._initNearBottomEvents();
+      this._initNearTopEvents();
+      this._initMoveEvents();
+    },
+
+    enable: function() {
+      this.iscroll.enable();
+      this.iscroll.refresh();
+      this.iscroll.scrollTo(0, 0, 0);
+    },
+
+    refresh: function() {
+      this.iscroll.refresh();
+    },
+
+    afterAnimationHook: function() {
+      this._triggerNearBottomEvents();
+    },
+
+    disable: function() {
+      this.iscroll.disable();
+    },
+
+    _initMoveEvents: function() {
+      this.iscroll.on('mousewheelup', _.bind(this._triggerMoveEvent, this));
+      this.iscroll.on('mousewheeldown', _.bind(this._triggerMoveEvent, this));
+      this.iscroll.on('afterkeyboard', _.bind(this._triggerMoveEvent, this));
+    },
+
+    _triggerMoveEvent: function() {
+      this._trigger('move');
+    },
+
+    _initNearBottomEvents: function() {
+      this.iscroll.on('scroll', _.bind(this._triggerNearBottomEvents, this));
+      this.iscroll.on('scrollEnd', _.bind(this._triggerNearBottomEvents, this));
+      this.iscroll.on('afterkeyboard', _.bind(this._triggerNearBottomEvents, this));
+    },
+
+    _initNearTopEvents: function() {
+      this.iscroll.on('scroll', _.bind(this._triggerNearTopEvents, this));
+      this.iscroll.on('scrollEnd', _.bind(this._triggerNearTopEvents, this));
+      this.iscroll.on('afterkeyboard', _.bind(this._triggerNearTopEvents, this));
+    },
+
+    _triggerNearBottomEvents: function() {
+      if (this._atBoundary('down', {delta: 50})) {
+        this._trigger('nearbottom');
+      }
+      else {
+        this._trigger('notnearbottom');
+      }
+    },
+
+    _triggerNearTopEvents: function() {
+      if (this._atBoundary('up', {delta: 50})) {
+        this._trigger('neartop');
+      }
+      else {
+        this._trigger('notneartop');
+      }
+    },
+
+    /**
+     * Whenever the a mousewheel event is triggered, we test whether
+     * the scroller is at the very top or at the very bottom. If so,
+     * we trigger a hintdown or hintup event the first time the mouse
+     * wheel turns and a bumpup or bumpdown event when the mouse wheel
+     * is turned to times in a short period of time.
+     */
+    _initMousewheelBump: function(direction) {
+      var firstBump = false;
+
+      this.iscroll.on('mousewheel' + direction, _.bind(function() {
+        if (!this._atBoundary(direction)) {
+          return;
+        }
+
+        if (firstBump) {
+          this._trigger('bump' + direction);
+          firstBump = false;
+
+          clearTimeout(this.waitForSecondBump);
+        }
+        else {
+          this._trigger('hint' + direction);
+          firstBump = true;
+
+          this.waitForSecondBump = setTimeout(function() {
+            firstBump = false;
+          }, this.doubleBumpThreshold);
+        }
+      }, this));
+    },
+
+    /**
+     * Trigger bumpup or bumpdown event when the a up/down key is
+     * pressed while the scroller in boundary position.
+     */
+    _initKeyboardBump: function(direction) {
+      this.iscroll.on('keyboard' + direction, _.bind(function(event) {
+        if (this._atBoundary(direction)) {
+          // Make sure other iScrolls which might be enabled by the
+          // bump event do not process the keyboard event again.
+          event.stopImmediatePropagation();
+          this._trigger('bump' + direction);
+        }
+      }, this));
+
+      this.iscroll.on('keyboardhint' + direction, _.bind(function() {
+        if (this._atBoundary(direction)) {
+          this._trigger('hint' + direction);
+        }
+      }, this));
+    },
+
+    /**
+     * Trigger bumpup or bumpdown when the user drags the page from a
+     * boundary position.
+     */
+    _initDragGestureBump: function() {
+      var allowUp = false,
+          allowDown = false,
+          startX, startY;
+
+      this.element.on('touchstart MSPointerDown', _.bind(function(event) {
+        var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
+        startX = point.pageX;
+        startY = point.pageY;
+
+        if (!isNonTouchPointer(event)) {
+          allowDown = this._atBoundary('down');
+          allowUp = this._atBoundary('up');
+        }
+      }, this));
+
+      this.element.on('touchmove MSPointerMove', _.bind(function(event) {
+        var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
+        var deltaX = point.pageX - startX;
+        var deltaY = point.pageY - startY;
+
+        if (Math.abs(deltaX) > this.maxXDelta) {
+          allowDown = allowUp = false;
+        }
+
+        if (allowUp && deltaY > this.dragThreshold) {
+          this._trigger('bumpup');
+          allowDown = allowUp = false;
+        }
+        else if (allowDown && deltaY < -this.dragThreshold) {
+          this._trigger('bumpdown');
+          allowDown = allowUp = false;
+        }
+      }, this));
+
+      this.element.on('touchend MSPointerUp', _.bind(function(event) {
+        if (allowUp) {
+          this._trigger('hintup');
+        }
+        if (allowDown) {
+          this._trigger('hintdown');
+        }
+      }, this));
+
+      function isNonTouchPointer(event) {
+        return (event.originalEvent.pointerType &&
+                event.originalEvent.pointerType !== event.originalEvent.MSPOINTER_TYPE_TOUCH);
+      }
+    },
+
+    /**
+     * Checks whether the scroller is at the very top or very bottom.
+     */
+    _atBoundary: function(direction, options) {
+      options = options || {};
+      var delta = options.delta || 0;
+
+      if (direction === 'up') {
+        return (this.iscroll.y >= -delta);
+      }
+      else {
+        return (this.iscroll.y <= this.iscroll.maxScrollY + delta);
+      }
+    }
+  });
+}(jQuery));