Skip to content

Instantly share code, notes, and snippets.

@joshuabaker
Created December 12, 2012 17:16
Show Gist options
  • Save joshuabaker/4269697 to your computer and use it in GitHub Desktop.
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.
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();
@joshuabaker
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment