Commit 72eecf0b authored by christianrhansen's avatar christianrhansen

mobile: "move cell"-button position (testing)

parent 0357ca8d
......@@ -127,10 +127,13 @@
cell(:cell="tmpCell")
//------------------------- temporary cell (mobile)
template(v-if="mobileTempCell.show && cachedNewCell")
// template(v-if="mobileTempCell.show && cachedNewCell")
template
//----- cell
.cell-item.cell-item-tmp-mobile.row.justify-center.items-center(:style="mobileTempCellStyle(mobileTempCell)")
.cell-item.cell-item-tmp-mobile.row.justify-center.items-center(
ref="_mobileTempCell",
:style="mobileTempCellStyle(mobileTempCell)")
cell.absolute-top-left.q-ma-sm(:cell="cachedNewCell", :temp="true")
......@@ -140,9 +143,10 @@
q-icon(name="check")
//----- resize handler (top left)
.resize-handler-mobile.top-left.text-dark.fixed.justify-center.row.bg-white.shadow-6(
.resize-handler-mobile.top-left.fixed.text-dark.justify-center.row.bg-white.shadow-6(
v-if="mobileTempCell.onGrid",
v-touch-pan="handleTopLeft", round, flat,
:class="{'pushed': !resizeHandler.topLeft.pushed}",
:style="{left: resizeHandler.topLeft.x - 20 + 'px', top: resizeHandler.topLeft.y - 20 + 'px'}")
// q-icon.self-center.rotate-180(name="signal_cellular_4_bar", size="12px", style="margin-top: 2px;")
q-icon.self-center.rotate-180(name="open_with", size="22px")
......@@ -291,14 +295,26 @@
mobileSelectedCell: undefined,
touch: {position: {top: undefined, left: undefined}},
isMobile: this.$q.platform.is.mobile,
mobileTempCell: {x: 0, y: 0, width: 1, height: 1, show: false, onGrid: false, button: false},
mobileTempCell: {
x: 0,
y: 0,
ox: 0,
oy: 0,
width: 1,
height: 1,
left: 0,
show: false,
onGrid: false,
button: false
},
slide: undefined,
modal: false,
carousel: {visibility: false, icon: 'open_with', slide: 0},
// cursor: {x: undefined, y: undefined},
resizeHandler: {
topLeft: {x: undefined, y: undefined},
bottomRight: {x: undefined, y: undefined}
size: {width: 40, height: 40},
topLeft: {x: undefined, y: undefined, pushed: false, pos: undefined},
bottomRight: {x: undefined, y: undefined, pushed: false, pos: undefined}
}
}
},
......@@ -353,8 +369,28 @@
}
},
async mounted () {
// window.addEventListener(this.scrollTest)
// this.$el.addEventListener('scroll', this.scrollTest, false)
await this.fetchData()
this.resetScrollPosition()
let options = {
rootMargin: '0px',
threshold: [0.2, 0.4, 0.6, 0.8, 1.0]
}
let th = []
for (let i = 0; i <= 1.0; i += 0.01) {
th.push(i)
}
options.threshold = th
let observer = new IntersectionObserver(this.observerCallback, options)
observer.observe(this.$refs._mobileTempCell)
this.observer = observer
},
beforeDestroy () {
this.observer.disconnect()
},
watch: {
slide (val) {
......@@ -397,21 +433,100 @@
}
},
methods: {
// observerCallback (entries, observer) {
observerCallback (entries) {
let entryX = entries[0].boundingClientRect.x
let _resizeHandler = this.resizeHandler
let _resizeHandlerHalf = _resizeHandler.size.width / 2
console.log(this.mobileTempCell.ox)
// ----- left
if (entryX < _resizeHandlerHalf) {
_resizeHandler.topLeft.x = _resizeHandlerHalf
_resizeHandler.topLeft.pos = 'fixed on-left-side'
}
// ----- middle
// if (entryX >= 20 && entryX <= window.innerWidth - 20) this.resizeHandler.topLeft.x = entryX
/*
if (entryX >= _resizeHandlerHalf && entryX <= window.innerWidth - _resizeHandler.size.width) {
_resizeHandler.topLeft.x = this.mobileTempCell.left
_resizeHandler.topLeft.pos = 'absolute'
}
*/
// ----- right
if (entryX > window.innerWidth - _resizeHandler.size.width) {
_resizeHandler.topLeft.x = window.innerWidth - _resizeHandlerHalf
_resizeHandler.topLeft.pos = 'fixed on-right-side'
}
},
scrollTest () {
// console.log(this.$el.scrollLeft)
// console.log(this.mobileTempCell.x, this.mobileTempCell.ox)
// console.log(this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1), this.$el.scrollLeft)
let distanceToLeft = this.$refs._mobileTempCell.getBoundingClientRect().x
// console.log(distanceToLeft)
if (distanceToLeft < 1) this.resizeHandler.topLeft.x = 20
else if (distanceToLeft >= 20 && distanceToLeft <= window.innerWidth - 20) {
// console.log('bla')
this.resizeHandler.topLeft.x = distanceToLeft
}
else if (distanceToLeft > window.innerWidth - 20) this.resizeHandler.topLeft.x = window.innerWidth - 20
/*
if (distanceToLeft >= 20 - this.gridDimensions.full.cell.width) {
this.resizeHandler.topLeft.x = distanceToLeft
}
*/
/*
let scrollPosLeft = this.$el.scrollLeft
let tempCellLeft = this.mobileTempCell.left
if (scrollPosLeft > tempCellLeft) {
// console.log('groesser')
this.resizeHandler.topLeft.x = 20
}
if (scrollPosLeft < tempCellLeft && scrollPosLeft > tempCellLeft - this.gridDimensions.full.cell.width) {
// console.log('ganz sichtbar', tempCellLeft - scrollPosLeft)
this.resizeHandler.topLeft.x = tempCellLeft - scrollPosLeft + 20
}
if (scrollPosLeft < tempCellLeft) {
console.log('kleiner')
this.resizeHandler.topLeft.x = window.innerWidth - 20
}
*/
},
handleTopLeft (obj) {
this.resizeHandler.topLeft = {x: obj.position.left, y: obj.position.top}
this.resizeHandler.topLeft.x = obj.position.left
this.resizeHandler.topLeft.y = obj.position.top
let res = this.getGridPositionForEvent(obj)
if (obj.isFirst) {
this.mobileTempCell.show = true
this.mobileTempCell.button = false
this.resizeHandler.topLeft.pushed = true
}
this.mobileTempCell.x = res.x
this.mobileTempCell.y = res.y
this.mobileTempCell.ox = res.ox
this.mobileTempCell.oy = res.oy
this.mobileTempCell.left = this.gridDimensions.full.cell.width * (res.x - 1)
if (obj.isFinal) {
this.mobileTempCell.onGrid = true
this.mobileTempCell.button = true
this.resizeHandler.topLeft.y = res.y * this.gridDimensions.full.cell.height + 16
this.resizeHandler.topLeft.pushed = false
}
},
testButton (obj) {
......@@ -1166,16 +1281,24 @@
.transition-opacity
transition opacity ease 350ms
handler-width = 40px
.resize-handler-mobile
width 40px
height 40px
width handler-width
height handler-width
border-radius 1000px
&.bottom-right
left calc(100vw - 40px - 8px)
top calc(100vh - 40px - 8px)
left 'calc(100vw - %s - 8px)' % handler-width
top 'calc(100vh - %s - 8px)' % handler-width
&.top-left
left 8px
top 68px
&.pushed
transition top ease 200ms, left ease 200ms
&.on-left-side
left 0
&.on-right-side
left 'calc(100vw - %s)' % handler-width
</style>
<style lang="stylus">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment