122 lines
3.7 KiB
JavaScript
122 lines
3.7 KiB
JavaScript
import "../components/Sidebar.js"
|
|
import "../components/AppMenu.js"
|
|
import "../components/AppWindowContainer.js"
|
|
|
|
class Home extends Shadow {
|
|
|
|
dragStartX = null
|
|
sidebarOpen = false
|
|
|
|
render() {
|
|
ZStack(() => {
|
|
|
|
// img("/_/icons/hamburger.svg", "3em")
|
|
// .position("absolute")
|
|
// .zIndex(2)
|
|
// .left(1.5, em)
|
|
// .top(1, em)
|
|
// .onTouch(function (start) {
|
|
// if(start) {
|
|
// this.style.scale = "0.8"
|
|
// } else if(start === false) {
|
|
// this.style.scale = ""
|
|
// $("sidebar-").toggle()
|
|
// }
|
|
// })
|
|
|
|
Sidebar()
|
|
|
|
VStack(() => {
|
|
AppWindowContainer()
|
|
|
|
AppMenu()
|
|
})
|
|
.height(100, pct)
|
|
.minHeight(0)
|
|
})
|
|
.backgroundColor("var(--main)")
|
|
.overflowX("hidden")
|
|
.height(window.visualViewport.height - 20, px)
|
|
.position("fixed")
|
|
.top(20, px)
|
|
.borderLeft("1px solid var(--accent)")
|
|
.onTouch((start, e) => {
|
|
console.log(e)
|
|
if(this.sidebarOpen) {
|
|
this.sidebarOpenDrag(start, e)
|
|
} else {
|
|
this.sidebarClosedDrag(start, e)
|
|
}
|
|
})
|
|
}
|
|
|
|
sidebarOpenDrag(start, e) {
|
|
console.log("sidebaropendrag")
|
|
if(start) {
|
|
let fiveSixths = (window.outerWidth * 5) / 6
|
|
let amount = e.targetTouches[0].clientX
|
|
if(amount < fiveSixths) {
|
|
this.dragStartX = e.touches[0].clientX
|
|
document.addEventListener("touchmove", this.moveSidebar)
|
|
}
|
|
} else {
|
|
if(!this.dragStartX) return;
|
|
|
|
let oneThird = window.outerWidth / 3
|
|
let endX = e.changedTouches[0].clientX
|
|
if(endX < oneThird) {
|
|
this.style.transition = "left .2s"
|
|
this.style.left = `0px`
|
|
this.sidebarOpen = false
|
|
} else {
|
|
this.style.transition = "left .2s"
|
|
this.sidebarOpen = true
|
|
this.style.left = `${oneThird * 2}px`
|
|
}
|
|
|
|
this.style.transition = ""
|
|
this.dragStartX = null
|
|
document.removeEventListener("touchmove", this.moveSidebar)
|
|
}
|
|
}
|
|
|
|
sidebarClosedDrag(start, e) {
|
|
console.log(e)
|
|
if(start) {
|
|
let oneTenth = window.outerWidth / 10
|
|
let amount = e.targetTouches[0].clientX
|
|
if(amount < oneTenth) {
|
|
this.dragStartX = e.touches[0].clientX
|
|
document.addEventListener("touchmove", this.moveSidebar)
|
|
}
|
|
} else {
|
|
if(!this.dragStartX) return;
|
|
|
|
let oneThird = window.outerWidth / 3
|
|
let endX = e.changedTouches[0].clientX
|
|
if(endX > oneThird) {
|
|
this.style.transition = "left .2s"
|
|
this.style.left = `${oneThird * 2}px`
|
|
this.sidebarOpen = true
|
|
} else {
|
|
this.sidebarOpen = false
|
|
this.style.left = "0px"
|
|
}
|
|
|
|
this.style.transition = ""
|
|
this.dragStartX = null
|
|
document.removeEventListener("touchmove", this.moveSidebar)
|
|
}
|
|
}
|
|
|
|
moveSidebar = (e) => {
|
|
let twoThirds = window.outerWidth * .66
|
|
let amount = e.targetTouches[0].clientX
|
|
if(e.targetTouches[0] && amount < twoThirds) {
|
|
console.log("dragtivated: ", amount, twoThirds)
|
|
this.style.left = `${amount}px`
|
|
}
|
|
}
|
|
}
|
|
|
|
register(Home) |