Commit 40af9c8b authored by christianrhansen's avatar christianrhansen

using intersection observing handler component instead of directive

parent e4b3d5b5
Pipeline #17459 passed with stage
in 28 seconds
......@@ -145,11 +145,13 @@
//----------------------------------------------------------------------------------------------- move handler
//----- (main)
// v-if="mobileTempCell.onGrid && !handlerNewCell.resize.pushed",
.handler-new-cell.move.absolute.text-dark.justify-center.row.bg-white.shadow-6(
v-intersection-observer,
ref="move",
:data-left="getHandlerPosition('move')",
v-touch-pan="handleMoveCell", round, flat,
// :data-left="getHandlerPosition('move')",
// ref="move",
// .handler-new-cell.move.absolute.text-dark.justify-center.row.bg-white.shadow-6(
cell-handler-mobile.absolute(
@onIntersectionChange="intersectionChanged",
:element="'move'",
v-touch-pan="handleMoveCell",
:style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
:class="[{'pushed': !handlerNewCell.move.pushed}]")
q-icon.self-center.rotate-180(name="open_with", size="22px")
......@@ -165,11 +167,14 @@
//--------------------------------------------------------------------------------------------- resize handler
//----- (main)
// v-if="mobileTempCell.onGrid && !handlerNewCell.move.pushed",
.handler-new-cell.resize.absolute.text-dark.justify-center.row.bg-white.shadow-6(
ref="resize",
v-intersection-observer,
:data-left="getHandlerPosition('resize')",
v-touch-pan="handleResizeCell", round, flat,
// .handler-new-cell.resize.absolute.text-dark.justify-center.row.bg-white.shadow-6(
// v-intersection-observer="resize",
// ref="resize",
// :data-left="getHandlerPosition('resize')",
cell-handler-mobile.absolute(
@onIntersectionChange="intersectionChanged",
:element="'resize'",
v-touch-pan="handleResizeCell",
:style="{left: handlerNewCell.resize.x - 20 + 'px', top: handlerNewCell.resize.y - 20 + 'px'}",
:class="{'pushed': !handlerNewCell.resize.pushed}")
q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
......@@ -267,6 +272,7 @@
import { userHasFeature } from 'mbjs-quasar/src/lib'
import { mapGetters } from 'vuex'
import GridEditorEditingCellsMobile from './/GridEditorEditingCellsMobile'
import CellHandlerMobile from './CellHandlerMobile'
const nullImage = new Image()
nullImage.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
......@@ -274,7 +280,8 @@
export default {
components: {
Cell,
GridEditorEditingCellsMobile
GridEditorEditingCellsMobile,
CellHandlerMobile
},
props: ['gridUuid', 'tabsAreOpen'],
data () {
......@@ -332,7 +339,8 @@
move: {x: 20, y: undefined, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined, dataLeft: undefined},
resize: {x: undefined, y: undefined, pushed: false, pos: undefined}
},
handlerNewCellTemp: {visibility: true, left: 0}
handlerNewCellTemp: {visibility: true, left: 0},
tempHandler: {move: {left: undefined}}
}
},
computed: {
......@@ -345,6 +353,11 @@
scrollPositionCache: 'mosys/getScrollPositionCache',
editMode: 'mosys/getEditMode'
}),
/*
handlerPositionMove (val) {
return val * 100
},
*/
cellContextMenuActions () {
const actions = {
delete: {
......@@ -407,15 +420,20 @@
options.threshold = th
*/
/*
let observer = new IntersectionObserver(this.observerCallback)
observer.observe(this.$refs.move)
// observer.observe(this.$refs._mobileTempCell)
this.observer = observer
*/
},
beforeDestroy () {
this.observer.disconnect()
},
watch: {
handlerPositionMove (val) {
console.log('WATCG', val)
},
slide (val) {
let icon
switch (val) {
......@@ -456,10 +474,26 @@
}
},
methods: {
intersectionChanged (obj) {
// console.log(obj)
// console.log(this.tempHandler.move.left)
if (obj.element === 'move') {
console.log('MOVE')
}
if (obj.element === 'resize') {
console.log('RESIZE')
}
},
/*
getHandlerPosition (val) {
if (val === 'move' && this.$refs.move) console.log('move', this.$refs.move.dataset.left)
if (val === 'resize' && this.$refs.resize) console.log('resize', this.$refs.resize.dataset.left)
if (val === 'resize' && this.$refs.resize) {
// console.log('resize', this.$refs.resize.dataset.left)
console.log('bla', this.$refs.resize)
}
},
*/
/*
// observerCallback (entries, observer) {
observerCallback (entries) {
let target = entries[0]
......@@ -477,6 +511,7 @@
this.handlerNewCellTemp.visibility = false
}
},
*/
handleMoveCell (obj) {
this.handlerNewCellTemp.left = -100
this.handlerNewCell.move.x = obj.position.left
......
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