Commit a52c7fb3 authored by christianrhansen's avatar christianrhansen

mobile: added dummy "move new cell"-button for testing

parent 09664670
Pipeline #17241 passed with stage
in 1 minute and 22 seconds
......@@ -144,15 +144,22 @@
//----- move handler (top left)
// :style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}")
// :class="[handlerNewCell.move.inViewport ? 'absolute' : 'fixed', {'pushed': !handlerNewCell.move.pushed}]")
.handler-new-cell.move.absolute.text-dark.justify-center.row.bg-white.shadow-6(
v-if="mobileTempCell.onGrid && !handlerNewCell.resize.pushed",
v-touch-pan="handleMoveCell", round, flat,
:style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
:class="{'pushed': !handlerNewCell.move.pushed}")
:class="[{'pushed': !handlerNewCell.move.pushed}]")
//:style="setHandlerStyle()")
// 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")
.handler-new-cell.fixed.text-dark.justify-center.row.bg-white.shadow-6(
v-touch-pan="handleMoveCell",
:class="{'dummyButtonHide': !dummyButton.visibility}",
:style="{left: dummyButton.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
q-icon.self-center.rotate-180(name="open_with", size="22px")
//----- resize handler (bottom right)
.handler-new-cell.resize.absolute.text-dark.justify-center.row.bg-white.shadow-6(
v-if="mobileTempCell.onGrid && !handlerNewCell.move.pushed",
......@@ -316,9 +323,10 @@
// cursor: {x: undefined, y: undefined},
handlerNewCell: {
size: {width: 40, height: 40},
move: {x: 20, y: undefined, pushed: false, pos: undefined},
move: {x: 20, y: undefined, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined},
resize: {x: undefined, y: undefined, pushed: false, pos: undefined}
}
},
dummyButton: {visibility: true, left: 0}
}
},
computed: {
......@@ -387,10 +395,10 @@
}
options.threshold = th
let observer = new IntersectionObserver(this.observerCallback, options)
observer.observe(this.$refs._mobileTempCell)
this.observer = observer
*/
let observer = new IntersectionObserver(this.observerCallback)
observer.observe(this.$refs.move)
this.observer = observer
},
beforeDestroy () {
this.observer.disconnect()
......@@ -459,6 +467,20 @@
},
// observerCallback (entries, observer) {
observerCallback (entries) {
let btn = entries[0]
console.log(btn)
// if (!_tempCell.isIntersecting) {
if (btn.boundingClientRect.x < this.handlerNewCell.size.width) {
console.log('outside')
// this.handlerNewCell.move.inViewport = false
// this.handlerNewCell.move.x = 20
}
else {
console.log('INSIDE')
// this.handlerNewCell.move.inViewport = true
// this.handlerNewCell.move.x = this.gridDimensions.full.cell.width * (this.mobileTempCell.x - 1) + 8 + 20
}
/*
let entryX = entries[0].boundingClientRect.x
let _handlerNewCell = this.handlerNewCell
let _handlerNewCellHalf = _handlerNewCell.size.width / 2
......@@ -481,8 +503,10 @@
if (entryX > window.innerWidth - _handlerNewCell.size.width) {
_handlerNewCell.move.pos = 'fixed on-right-side'
}
*/
},
handleMoveCell (obj) {
this.dummyButton.left = -100
this.handlerNewCell.move.x = obj.position.left
this.handlerNewCell.move.y = obj.position.top
......@@ -1284,6 +1308,9 @@
//************************************************** mobile: new cell
handler-width = 40px
.dummyButtonHide
left -50px
/*opacity 0*/
.handler-new-cell
width handler-width
height handler-width
......
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