Skip to content

Instantly share code, notes, and snippets.

@rblalock
Last active December 15, 2015 09:28
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save rblalock/5238186 to your computer and use it in GitHub Desktop.
Save rblalock/5238186 to your computer and use it in GitHub Desktop.
/**
* Helper for opening / animating sidebar
*/
$.openSidebar = function() {
if(isOpen) {
var animateRight = Ti.UI.createAnimation({
left : 0,
curve : Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration : 200
});
$.wrapper.animate(animateRight);
isOpen = false;
} else {
var animateLeft = Ti.UI.createAnimation({
left : 275,
curve : Ti.UI.ANIMATION_CURVE_EASE_OUT,
duration : 200
});
$.wrapper.animate(animateLeft);
isOpen = true;
}
};
/**
* Touchstart for window
* @param {Object} e
*/
$.touchStart = function(e) {
touchStart = parseInt(e.x);
};
/**
* Touchmove for window
* @param {Object} e
*/
$.touchMove = function(e) {
var globalPoint = e.source.convertPointToView({ x: e.x, y: e.y }, $.window);
if(globalPoint) {
var coordinates = parseInt(globalPoint.x) - touchStart;
if (coordinates > 20 || coordinates < -20) {
e.source.moving = true;
}
if (e.source.moving == true) {
$.wrapper.animate({
left:coordinates,
duration:20
});
$.wrapper.left = coordinates;
}
}
};
/**
* Touchend for window
* @param {Object} e
*/
$.touchEnd = function(e) {
e.source.moving = false;
if ($.wrapper.left > 150) {
$.wrapper.animate({
left:275,
duration:300
});
isOpen = true;
} else {
$.wrapper.animate({
left:0,
duration:300
});
isOpen = false;
}
};
// Handle sidebar toggle
var isOpen = false;
var touchStart;
$.dragMe.addEventListener("click", $.openSidebar);
$.dragMe.addEventListener("swipe", $.openSidebar);
$.dragMe.addEventListener('touchstart', $.touchStart);
$.dragMe.addEventListener('touchmove', $.touchMove);
$.dragMe.addEventListener('touchend', $.touchEnd);
$.window.open();
"#table": {
backgroundColor: "#fff"
},
"#wrapper": {
backgroundColor: "#eee"
},
"#header": {
height: 65,
top: 0,
backgroundColor: "#333"
},
"#dragMe": {
width: 200,
height: 65,
left: 0,
textAlign: "left"
}
<Alloy>
<Window id="window">
<TableView id="table">
<TableViewRow title="Row" />
<TableViewRow title="Row" />
<TableViewRow title="Row" />
<TableViewRow title="Row" />
<TableViewRow title="Row" />
</TableView>
<View id="wrapper">
<View id="header">
<Label id="dragMe">Drag Me</Label>
</View>
</View>
</Window>
</Alloy>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment