Created
December 12, 2012 17:16
-
-
Save joshuabaker/4269697 to your computer and use it in GitHub Desktop.
This is about as close as I got to a Path style window based navigation system in Titanium. It works with a few quirks. The UI paradigm was abandoned in favour of something more suitable.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var menuWindow = Titanium.UI.createWindow({ | |
backgroundColor: '#222' | |
}); | |
var feedWindow = Titanium.UI.createWindow({ | |
backgroundColor: '#fff' | |
}); | |
var feedContainer = Titanium.UI.createScrollView({ | |
top: 0, | |
left: 0 | |
}); | |
feedWindow.add(feedContainer); | |
var | |
feedWindowHiddenLeft = Titanium.Platform.displayCaps.platformWidth - 30, | |
feedWindowHidden = false, | |
feedStartLeft, | |
touchStartEvent, | |
touchMoveEvent, | |
touchMoveDelta, | |
duration; | |
feedWindow.addEventListener('touchstart', function(event) { | |
touchStartEvent = touchMoveEvent = event; | |
feedStartLeft = feedWindowHidden ? feedWindowHiddenLeft : 0; | |
// feedContainer.touchEnabled = false; | |
}); | |
feedWindow.addEventListener('touchmove', function(event) { | |
touchMoveDelta = { | |
x: event.globalPoint.x - touchMoveEvent.globalPoint.x, | |
y: event.globalPoint.x - touchMoveEvent.globalPoint.x, | |
}; | |
if (Math.abs(touchStartEvent.globalPoint.x - event.globalPoint.x) > 5) { | |
// Ti.API.info('x ' + (touchStartEvent.globalPoint.x - event.globalPoint.x)); | |
feedWindow.left = Math.max(0, feedStartLeft + (event.globalPoint.x - touchStartEvent.globalPoint.x - 5)); | |
} | |
else if (Math.abs(touchStartEvent.globalPoint.y - event.globalPoint.y) > 5) { | |
// Ti.API.info('y'); | |
} | |
else { | |
// Ti.API.info('-'); | |
} | |
touchMoveEvent = event; | |
}); | |
feedWindow.addEventListener('touchend', function(event) { | |
if (feedWindowHidden || feedStartLeft != feedWindow.left) { | |
var | |
show = function() { | |
feedWindowHidden = false; | |
feedContainer.touchEnabled = true; | |
feedWindow.animate({ | |
left: 0, | |
duration: duration | |
}); | |
}, | |
hide = function() { | |
feedWindowHidden = true; | |
feedContainer.touchEnabled = false; | |
feedWindow.animate({ | |
left: feedWindowHiddenLeft, | |
duration: duration | |
}); | |
}; | |
// Calculate our animation time using the touch move delta | |
duration = Math.max(150, (50 / touchMoveDelta.x) * 12) | |
// Double check our calculation has returned a finite number | |
if ( ! isFinite(duration)) { | |
duration = 150; | |
Ti.API.info('Calculated duration was not finite.'); | |
} | |
if ( ! feedWindowHidden && touchMoveDelta.x >= 10) { | |
// Left-to-right swipe | |
hide(); | |
} | |
else if (feedWindowHidden && touchMoveDelta.x <= -10) { | |
// Right-to-left swipe | |
show(); | |
} | |
else if ( ! feedWindowHidden && feedWindow.left > Titanium.Platform.displayCaps.platformWidth * 0.25) { | |
// Left-to-right drag | |
hide(); | |
} | |
else if (feedWindowHidden && feedWindow.left < Titanium.Platform.displayCaps.platformWidth * 0.75) { | |
// Right-to-left drag | |
show(); | |
} | |
else if (feedWindowHidden && feedWindow.left == feedWindowHiddenLeft) { | |
// Single tap to show | |
show(); | |
} | |
else if (feedWindowHidden) { | |
// Back to hidden | |
hide(); | |
} | |
else { | |
// Back to visible | |
show(); | |
} | |
} | |
}); | |
menuWindow.open(); | |
feedWindow.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thought: Setting the content dimensions to prevent scrolling of content might work. This might also work when nesting scroll views and conditionally watching the touch move deltas.