Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
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.
base fork: marcuswestin/tags.js
base: b7bba3c067
...
head fork: marcuswestin/tags.js
compare: 440e7794ee
  • 4 commits
  • 3 files changed
  • 0 commit comments
  • 1 contributor
Commits on Dec 19, 2012
@marcuswestin add ability to handle the down and up events, regardless of if it end…
…s up being a drag or a tap
8052046
Commits on Dec 20, 2012
@marcuswestin allow for style.transition to be called with multiple properties, e.g…
…. `transition({ height:100, width:50 })`, where 100 and 50 are the durations in ms
c63f586
@marcuswestin add style.scrollable.x/y a7e950b
@marcuswestin Don't empty the header/footer if the given header and footer function…
…s don't return anything. This allows us to update the header and footer on view change without emptying it first
440e779
Showing with 47 additions and 23 deletions.
  1. +6 −0 draggable.js
  2. +26 −17 scroller.js
  3. +15 −6 style.js
View
6 draggable.js
@@ -15,6 +15,8 @@ var dragEvents = {
function makeDraggable($el, opts) {
opts = tags.options(opts, {
+ down:function(){},
+ up:function(){},
start:function(pos, history) {},
move:function(pos, history) {},
cancel:null,
@@ -39,6 +41,8 @@ function makeDraggable($el, opts) {
.on(dragEvents.end, onEnd)
.on(dragEvents.cancel, onCancel)
+ opts.down.call($el)
+
if (!opts.threshold) {
onStart($e)
}
@@ -101,6 +105,8 @@ function makeDraggable($el, opts) {
isDragging = false
history = null
+
+ opts.up.call($el)
}
})
}
View
43 scroller.js
@@ -1,6 +1,7 @@
var tags = require('./tags')
var viewport = require('./viewport')
var div = tags('div')
+var style = require('./style')
module.exports = scroller
@@ -20,10 +21,12 @@ function scroller(opts) {
var scrollerBase = {
headHeight:0,
- renderHead:function(headHeight, renderHeadContent) {
- this.renderHeadContent = renderHeadContent
+ renderHead:function(headHeight, headFn) {
this.headHeight = headHeight
- return this.$head=$(div('tags-scroller-head', style({ height:headHeight, width:'100%', position:'relative', top:0, zIndex:2 })))
+ this.headFn = headFn
+ return this.$head=$(div('tags-scroller-head', style({
+ height:headHeight, width:'100%', position:'relative', top:0, zIndex:2
+ })))
},
renderBody:function(numViews, renderBodyContent) {
this.renderBodyContent = renderBodyContent
@@ -50,12 +53,15 @@ var scrollerBase = {
))
)
)
- this.push({})
+ var self = this
+ setTimeout(function() { self.push({}) })
return this.body
},
- renderFoot:function(renderFootContent) {
- this.renderFootContent = renderFootContent
- return this.$foot = $(div('tags-scroller-foot'), style({ width:'100%', position:'absolute', bottom:0, zIndex:2 }))
+ renderFoot:function(footFn) {
+ this.footFn = footFn
+ return this.$foot = $(div('tags-scroller-foot'), style({
+ width:'100%', position:'absolute', bottom:0, zIndex:2
+ }))
},
push:function scollerPush(newView, opts) {
opts = tags.options(opts, {
@@ -96,23 +102,26 @@ var scrollerBase = {
if (this.onViewChange) {
this.onViewChange()
}
- if (this.$head) {
- this.$head.empty().append(
- this.renderHeadContent(opts.view, { viewBelow:this.views[opts.index - 1] })
- )
- }
- if (this.$foot) {
- this.$foot.empty().append(
- this.renderFootContent(opts.view, { viewBelow:this.views[opts.index - 1] })
- )
- }
+ this._update(opts, this.$head, this.headFn)
+ this._update(opts, this.$foot, this.footFn)
+
var keepStaleView = (opts.useStaleView && this.views[opts.index])
if (!keepStaleView) {
this.views[opts.index].empty().append(this._renderBodyContent(opts))
}
+
this._scroll(animate)
}
},
+ _update:function(opts, $element, updateFn) {
+ if (!updateFn) { return }
+ var fnResult = updateFn.call($element, opts.view, { viewBelow:this.views[opts.index - 1] })
+ if (fnResult) {
+ // Allow for the header and footer to return content to be displayed.
+ // Alt. they can choose not re-render, but rather update what's already rendered and avoid a flash of no content.
+ $element.empty().append(fnResult)
+ }
+ },
_renderBodyContent:function(opts) {
var renderOpts = { index:opts.index }
var alwaysBounce = (opts.alwaysBounce === null ? this.alwaysBounce : opts.alwaysBounce)
View
21 style.js
@@ -33,14 +33,18 @@ style.disableSelection = style({
})
style.transition = function(properties, duration) {
- return {
- // -webkit-transition-timing-function: 'linear',
- '-webkit-transition-property': properties,
- '-webkit-transition-duration': duration+'ms'
+ if (typeof properties == 'object') {
+ var res = []
+ for (var key in properties) {
+ res.push(key+' '+properties[key]+'ms')
+ }
+ return { '-webkit-transition':res.join(',') }
+ } else {
+ return { '-webkit-transition':properties+' '+duration+'ms' }
}
}
-style.transition.none = function(properties) {
- return style.transition(properties, 0)
+style.transition.none = function() {
+ return { '-webkit-transition':'none' }
}
style.translate = function(x, y, duration) {
@@ -52,3 +56,8 @@ style.translate = function(x, y, duration) {
}
style.translate.y = function(y, duration) { return style.translate(0, y, duration) }
style.translate.x = function(x, duration) { return style.translate(x, 0, duration) }
+
+style.scrollable = {
+ x: { overflowX:'scroll', webkitOverflowScrolling:'touch', overflowY:'hidden' },
+ y: { overflowY:'scroll', webkitOverflowScrolling:'touch', overflowX:'hidden' }
+}

No commit comments for this range

Something went wrong with that request. Please try again.