Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
  • 3 commits
  • 6 files changed
  • 0 commit comments
  • 1 contributor
View
112 lib/panel.js
@@ -1,5 +1,5 @@
(function() {
- var $, Gfx, Panel, Stage;
+ var Panel;
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
function ctor() { this.constructor = child; }
@@ -7,125 +7,25 @@
child.prototype = new ctor;
child.__super__ = parent.prototype;
return child;
- }, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
- $ = Spine.$;
- Gfx = require('gfx');
- Stage = require('./stage');
+ };
Panel = (function() {
__extends(Panel, Stage);
- Panel.prototype.title = false;
+ Panel.prototype.tag = 'section';
Panel.prototype.viewport = false;
function Panel() {
var _ref, _ref2;
Panel.__super__.constructor.apply(this, arguments);
this.el.removeClass('stage').addClass('panel');
- this.header.append($('<h2 />'));
- if (this.title) {
- this.setTitle(this.title);
- }
if ((_ref = this.stage) == null) {
this.stage = Stage.globalStage();
}
if ((_ref2 = this.stage) != null) {
_ref2.add(this);
}
+ this.el.animate({
+ translate3d: '100%, 0, 0'
+ }, 0);
}
- Panel.prototype.setTitle = function(title) {
- if (title == null) {
- title = '';
- }
- return this.header.find('h2:first').html(title);
- };
- Panel.prototype.addButton = function(text, callback) {
- var button;
- if (typeof callback === 'string') {
- callback = this[callback];
- }
- button = $('<button />').text(text);
- button.tap(this.proxy(callback));
- this.header.append(button);
- return button;
- };
- Panel.prototype.activate = function(params) {
- var effect;
- if (params == null) {
- params = {};
- }
- effect = params.transition || params.trans;
- if (effect) {
- return this.effects[effect].apply(this);
- } else {
- this.content.add(this.header).show();
- return this.el.addClass('active');
- }
- };
- Panel.prototype.deactivate = function(params) {
- var effect;
- if (params == null) {
- params = {};
- }
- if (!this.isActive()) {
- return;
- }
- effect = params.transition || params.trans;
- if (effect) {
- return this.reverseEffects[effect].apply(this);
- } else {
- return this.el.removeClass('active');
- }
- };
- Panel.prototype.effects = {
- left: function() {
- this.el.addClass('active');
- this.content.gfxSlideIn(this.effectOptions({
- direction: 'left'
- }));
- return this.header.gfxSlideIn(this.effectOptions({
- direction: 'left',
- fade: true,
- distance: 50
- }));
- },
- right: function() {
- this.el.addClass('active');
- this.content.gfxSlideIn(this.effectOptions({
- direction: 'right'
- }));
- return this.header.gfxSlideIn(this.effectOptions({
- direction: 'right',
- fade: true,
- distance: 50
- }));
- }
- };
- Panel.prototype.reverseEffects = {
- left: function() {
- this.content.gfxSlideOut(this.effectOptions({
- direction: 'right'
- }));
- this.header.gfxSlideOut(this.effectOptions({
- direction: 'right',
- fade: true,
- distance: 50
- }));
- return this.content.queueNext(__bind(function() {
- return this.el.removeClass('active');
- }, this));
- },
- right: function() {
- this.content.gfxSlideOut(this.effectOptions({
- direction: 'left'
- }));
- this.header.gfxSlideOut(this.effectOptions({
- direction: 'left',
- fade: true,
- distance: 50
- }));
- return this.content.queueNext(__bind(function() {
- return this.el.removeClass('active');
- }, this));
- }
- };
return Panel;
})();
(typeof module !== "undefined" && module !== null ? module.exports = Panel : void 0) || (this.Panel = Panel);
View
69 lib/scrolling_panel.js
@@ -0,0 +1,69 @@
+(function() {
+ var ScrollingPanel;
+ var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
+ for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
+ function ctor() { this.constructor = child; }
+ ctor.prototype = parent.prototype;
+ child.prototype = new ctor;
+ child.__super__ = parent.prototype;
+ return child;
+ };
+ ScrollingPanel = (function() {
+ __extends(ScrollingPanel, Panel);
+ function ScrollingPanel() {
+ this.scrollTop = __bind(this.scrollTop, this);
+ this.unbindScroller = __bind(this.unbindScroller, this);
+ this.bindScroller = __bind(this.bindScroller, this);
+ this.prepareScrollerElements = __bind(this.prepareScrollerElements, this); ScrollingPanel.__super__.constructor.apply(this, arguments);
+ this.elements['.scroll_inner'] = 'scrollInner';
+ this.elements['.scroll_outer'] = 'scrollOuter';
+ this.elements['.scroll_bar'] = 'scrollBar';
+ this.shouldScroll = true;
+ this.bind('activated', __bind(function() {
+ this.unbindScroller();
+ return this.bindScroller();
+ }, this));
+ this.bind('deactivated', __bind(function() {
+ return this.unbindScroller();
+ }, this));
+ }
+ ScrollingPanel.prototype.renderFragment = function(name, context) {
+ if (context == null) {
+ context = {};
+ }
+ this.html(JST[name](context));
+ this.prepareScrollerElements();
+ return this.trigger('rendered');
+ };
+ ScrollingPanel.prototype.prepareScrollerElements = function() {
+ this.el.find('article').addClass('scroll_outer');
+ this.refreshElements();
+ this.scrollOuter.html("<div class='scroll_inner'>" + (this.scrollOuter.html()) + "</div><div class='scroll_bar'><div class='scroll_bar_pill'></div></div>");
+ this.refreshElements();
+ $(this.el.find('header')[0]).after("<div class='panel_disabler'></div>");
+ return this.refreshElements();
+ };
+ ScrollingPanel.prototype.bindScroller = function() {
+ if (this.shouldScroll && !this.scroller) {
+ this.scroller = new SectionFormScroller(this.scrollOuter, this.scrollInner, this.scrollBar);
+ this.scroller.init();
+ this.release(this.unbindScroller);
+ return $(document).bind('scroll_top', this.scrollTop);
+ }
+ };
+ ScrollingPanel.prototype.unbindScroller = function() {
+ if (this.scroller) {
+ this.scroller.dispose();
+ this.scroller = null;
+ return $(document).unbind('scroll_top');
+ }
+ };
+ ScrollingPanel.prototype.scrollTop = function() {
+ if (this.scroller) {
+ return this.scroller.scrollToTop();
+ }
+ };
+ return ScrollingPanel;
+ })();
+ (typeof module !== "undefined" && module !== null ? module.exports = ScrollingPanel : void 0) || (this.ScrollingPanel = Panel);
+}).call(this);
View
116 lib/stage.js
@@ -1,5 +1,5 @@
(function() {
- var $, Spine, Stage, globalManager;
+ var $, Stage, globalManager;
var __hasProp = Object.prototype.hasOwnProperty, __extends = function(child, parent) {
for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
function ctor() { this.constructor = child; }
@@ -8,7 +8,6 @@
child.__super__ = parent.prototype;
return child;
}, __slice = Array.prototype.slice, __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
- Spine = require('spine');
$ = Spine.$;
globalManager = new Spine.Manager;
Stage = (function() {
@@ -20,8 +19,8 @@
return this.globalManager().controllers[0];
};
Stage.prototype.effectDefaults = {
- duration: 450,
- easing: 'cubic-bezier(.25, .1, .25, 1)'
+ duration: 250,
+ easing: 'ease-in-out'
};
Stage.prototype.effectOptions = function(options) {
if (options == null) {
@@ -30,16 +29,25 @@
return $.extend({}, this.effectDefaults, options);
};
Stage.prototype.viewport = true;
+ Stage.prototype.elements = {
+ 'header': 'header',
+ 'article': 'content',
+ 'footer': 'footer'
+ };
function Stage() {
Stage.__super__.constructor.apply(this, arguments);
this.el.addClass('stage');
- this.header = $('<header />');
- this.content = $('<article />');
- this.footer = $('<footer />');
- if (this.viewport) {
- this.content.addClass('viewport');
+ if (this.global) {
+ this.header = $('<header />');
+ this.content = $('<article />');
+ this.footer = $('<footer />');
+ if (this.viewport) {
+ this.content.addClass('viewport');
+ }
+ this.el.append(this.header);
+ this.el.append(this.content);
+ this.el.append(this.footer);
}
- this.el.append(this.header, this.content, this.footer);
if (this.global) {
globalManager.add(this);
}
@@ -59,9 +67,9 @@
return (_ref = this.content).append.apply(_ref, elements);
};
Stage.prototype.html = function() {
- this.content.html.apply(this.content, arguments);
+ this.el.html.apply(this.el, arguments);
this.refreshElements();
- return this.content;
+ return this.el;
};
Stage.prototype.add = function() {
var panels, _ref;
@@ -102,34 +110,82 @@
};
Stage.prototype.effects = {
left: function() {
+ var animation, opts;
this.el.addClass('active');
- return this.el.gfxSlideIn(this.effectOptions({
- direction: 'left'
- }));
+ this.el.addClass('transitioning');
+ opts = this.effectOptions();
+ animation = __bind(function() {
+ return this.el.animate({
+ translate3d: '100%, 0, 0'
+ }, 0, null, __bind(function() {
+ return this.el.animate({
+ translate3d: '0, 0, 0'
+ }, opts.duration, opts.easing, __bind(function() {
+ this.el.removeClass('transitioning');
+ return this.trigger('activated');
+ }, this));
+ }, this));
+ }, this);
+ return setTimeout(animation, 0);
},
right: function() {
+ var animation, opts;
this.el.addClass('active');
- return this.el.gfxSlideIn(this.effectOptions({
- direction: 'right'
- }));
+ this.el.addClass('transitioning');
+ opts = this.effectOptions();
+ animation = __bind(function() {
+ return this.el.animate({
+ translate3d: '-100%, 0, 0'
+ }, 0, null, __bind(function() {
+ return this.el.animate({
+ translate3d: '0, 0, 0'
+ }, opts.duration, opts.easing, __bind(function() {
+ this.el.removeClass('transitioning');
+ return this.trigger('activated');
+ }, this));
+ }, this));
+ }, this);
+ return setTimeout(animation, 0);
}
};
Stage.prototype.reverseEffects = {
left: function() {
- this.el.gfxSlideOut(this.effectOptions({
- direction: 'right'
- }));
- return this.el.queueNext(__bind(function() {
- return this.el.removeClass('active');
- }, this));
+ var animation, opts;
+ opts = this.effectOptions();
+ this.el.addClass('transitioning');
+ animation = __bind(function() {
+ return this.el.animate({
+ translate3d: '0, 0, 0'
+ }, 0, null, __bind(function() {
+ return this.el.animate({
+ translate3d: '-100%, 0, 0'
+ }, opts.duration, opts.easing, __bind(function() {
+ this.el.removeClass('active');
+ this.el.removeClass('transitioning');
+ return this.trigger('deactivated');
+ }, this));
+ }, this));
+ }, this);
+ return setTimeout(animation, 0);
},
right: function() {
- this.el.gfxSlideOut(this.effectOptions({
- direction: 'left'
- }));
- return this.el.queueNext(__bind(function() {
- return this.el.removeClass('active');
- }, this));
+ var animation, opts;
+ opts = this.effectOptions();
+ this.el.addClass('transitioning');
+ animation = __bind(function() {
+ return this.el.animate({
+ translate3d: '0, 0, 0'
+ }, 0, null, __bind(function() {
+ return this.el.animate({
+ translate3d: '100%, 0, 0'
+ }, opts.duration, opts.easing, __bind(function() {
+ this.el.removeClass('active');
+ this.el.removeClass('transitioning');
+ return this.trigger('deactivated');
+ }, this));
+ }, this));
+ }, this);
+ return setTimeout(animation, 0);
}
};
return Stage;
View
79 lib/touch.js
@@ -1,79 +0,0 @@
-(function() {
- var $, m, parentIfText, swipeDirection, touch, types, _fn, _i, _len;
- $ = require('spine').$;
- $.support.touch = 'ontouchstart' in window;
- touch = {};
- parentIfText = function(node) {
- if ('tagName' in node) {
- return node;
- } else {
- return node.parentNode;
- }
- };
- swipeDirection = function(x1, x2, y1, y2) {
- var xDelta, yDelta;
- xDelta = Math.abs(x1 - x2);
- yDelta = Math.abs(y1 - y2);
- if (xDelta >= yDelta) {
- if (x1 - x2 > 0) {
- return 'Left';
- } else {
- return 'Right';
- }
- } else {
- if (y1 - y2 > 0) {
- return 'Up';
- } else {
- return 'Down';
- }
- }
- };
- $(function() {
- return $('body').bind('touchstart', function(e) {
- var delta, now;
- e = e.originalEvent;
- now = Date.now();
- delta = now - (touch.last || now);
- touch.target = parentIfText(e.touches[0].target);
- touch.x1 = e.touches[0].pageX;
- touch.y1 = e.touches[0].pageY;
- return touch.last = now;
- }).bind('touchmove', function(e) {
- e = e.originalEvent;
- touch.x2 = e.touches[0].pageX;
- return touch.y2 = e.touches[0].pageY;
- }).bind('touchend', function(e) {
- e = e.originalEvent;
- if (touch.x2 > 0 || touch.y2 > 0) {
- (Math.abs(touch.x1 - touch.x2) > 30 || Math.abs(touch.y1 - touch.y2) > 30) && $(touch.target).trigger('swipe') && $(touch.target).trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)));
- return touch.x1 = touch.x2 = touch.y1 = touch.y2 = touch.last = 0;
- } else if ('last' in touch) {
- $(touch.target).trigger('tap');
- return touch = {};
- }
- }).bind('touchcancel', function(e) {
- return touch = {};
- });
- });
- if ($.support.touch) {
- $('body').bind('click', function(e) {
- return e.preventDefault();
- });
- } else {
- $(function() {
- return $('body').bind('click', function(e) {
- return $(e.target).trigger('tap');
- });
- });
- }
- types = ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'tap'];
- _fn = function(m) {
- return $.fn[m] = function(callback) {
- return this.bind(m, callback);
- };
- };
- for (_i = 0, _len = types.length; _i < _len; _i++) {
- m = types[_i];
- _fn(m);
- }
-}).call(this);
View
44 src/panel.coffee
@@ -5,57 +5,13 @@ class Panel extends Stage
constructor: ->
super
- @elements['.scroll_inner'] = 'scrollInner'
- @elements['.scroll_outer'] = 'scrollOuter'
- @elements['.scroll_bar'] = 'scrollBar'
# Register with the global stage
@el.removeClass('stage').addClass('panel')
@stage ?= Stage.globalStage()
@stage?.add(@)
- # Set up the scroller
- @shouldScroll = true
- @bind 'activated', =>
- @unbindScroller()
- @bindScroller()
- @bind 'deactivated', =>
- @unbindScroller()
-
# Make sure we render the panel offscreen
@el.animate({translate3d: '100%, 0, 0'}, 0)
- renderFragment: (name, context = {}) ->
- @html JST[name](context)
- @prepareScrollerElements()
- @trigger 'rendered'
-
- prepareScrollerElements: =>
- # wrap article contents with scroll inner element. also add scroll bar indicator
- @el.find('article').addClass('scroll_outer')
- @refreshElements()
- @scrollOuter.html("<div class='scroll_inner'>#{@scrollOuter.html()}</div><div class='scroll_bar'><div class='scroll_bar_pill'></div></div>")
- @refreshElements()
-
- $(@el.find('header')[0]).after("<div class='panel_disabler'></div>");
- @refreshElements()
-
- bindScroller: =>
- if @shouldScroll && !@scroller
- @scroller = new SectionFormScroller( @scrollOuter, @scrollInner, @scrollBar)
- @scroller.init()
- # Bind to destroy on release - this may be unnecessary since the controller will probably already have been deactivated
- @release(@unbindScroller)
- $(document).bind 'scroll_top', @scrollTop
-
- unbindScroller: =>
- if @scroller
- @scroller.dispose()
- @scroller = null
- $(document).unbind 'scroll_top'
-
- scrollTop: =>
- if @scroller
- @scroller.scrollToTop()
-
(module?.exports = Panel) or @Panel = Panel
View
50 src/scrolling_panel.coffee
@@ -0,0 +1,50 @@
+class ScrollingPanel extends Panel
+
+ constructor: ->
+ super
+ @elements['.scroll_inner'] = 'scrollInner'
+ @elements['.scroll_outer'] = 'scrollOuter'
+ @elements['.scroll_bar'] = 'scrollBar'
+
+ # Set up the scroller
+ @shouldScroll = true
+ @bind 'activated', =>
+ @unbindScroller()
+ @bindScroller()
+ @bind 'deactivated', =>
+ @unbindScroller()
+
+ renderFragment: (name, context = {}) ->
+ @html JST[name](context)
+ @prepareScrollerElements()
+ @trigger 'rendered'
+
+ prepareScrollerElements: =>
+ # wrap article contents with scroll inner element. also add scroll bar indicator
+ @el.find('article').addClass('scroll_outer')
+ @refreshElements()
+ @scrollOuter.html("<div class='scroll_inner'>#{@scrollOuter.html()}</div><div class='scroll_bar'><div class='scroll_bar_pill'></div></div>")
+ @refreshElements()
+
+ $(@el.find('header')[0]).after("<div class='panel_disabler'></div>");
+ @refreshElements()
+
+ bindScroller: =>
+ if @shouldScroll && !@scroller
+ @scroller = new SectionFormScroller( @scrollOuter, @scrollInner, @scrollBar)
+ @scroller.init()
+ # Bind to destroy on release - this may be unnecessary since the controller will probably already have been deactivated
+ @release(@unbindScroller)
+ $(document).bind 'scroll_top', @scrollTop
+
+ unbindScroller: =>
+ if @scroller
+ @scroller.dispose()
+ @scroller = null
+ $(document).unbind 'scroll_top'
+
+ scrollTop: =>
+ if @scroller
+ @scroller.scrollToTop()
+
+(module?.exports = ScrollingPanel) or @ScrollingPanel = Panel

No commit comments for this range

Something went wrong with that request. Please try again.