Skip to content

Instantly share code, notes, and snippets.

@Topener
Created June 6, 2019 10:06
Show Gist options
  • Save Topener/1552661d7a0123d0a3ab3d0b3152f56c to your computer and use it in GitHub Desktop.
Save Topener/1552661d7a0123d0a3ab3d0b3152f56c to your computer and use it in GitHub Desktop.
Titanium bottomsheet simple example
var startMove = 0;
var bottomSheet = Ti.UI.createView({
height: 300,
width: Ti.UI.FILL,
backgroundColor: "red",
bottom: -300,
zIndex: 50
});
var overlay = Ti.UI.createView({
backgroundColor: "#000",
opacity: 0,
height: Ti.UI.FILL,
widdth: Ti.UI.FILL,
zIndex: 30
});
var win = Ti.UI.createWindow({
backgroundColor: "#fff"
});
var button = Ti.UI.createButton({
title: "Open menu",
backgroundColor: "#2A7E42",
height: 40,
width: 100,
color: "#fff"
});
button.addEventListener('click', function(e) {
showSheet();
});
overlay.addEventListener('click', function() {
hideSheet();
})
function showSheet() {
startMove = 0;
win.add(overlay);
overlay.animate({
opacity: 0.4,
duration: 300
});
bottomSheet.animate({
bottom: -100,
duration: 300
})
};
function hideSheet() {
overlay.animate({
opacity: 0,
duration: 300
}, function() {
win.remove(overlay);
});
bottomSheet.animate({
bottom: -300,
duration: 300
});
}
bottomSheet.addEventListener('touchstart', (e) => {
// only allow the top 30 pixels to trigger the move
if (e.y < 30) {
startMove = e.y;
} else {
startMove = 0;
}
})
var position = -100;
bottomSheet.addEventListener('touchmove', (e) => {
if (startMove === 0) return;
var difference = e.y - startMove;
position -= difference;
bottomSheet.bottom = position;
startMove = e.y;
console.log(position);
});
bottomSheet.addEventListener('touchend', (e) => {
if (bottomSheet.bottom > -150) {
bottomSheet.animate({
bottom: -100,
duration: 300
});
} else {
hideSheet();
}
startMove = 0;
position = -100;
})
win.add(button);
win.add(bottomSheet);
win.open();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment