Skip to content

GitLab

Source
Select Git revision
...
Target
Select Git revision
 
Commits (8)
Hide whitespace changes
Inline Side-by-side
Showing with 46 additions and 107 deletions
partials/GridEditor.vue
View file @ 2853b20e
......@@ -142,29 +142,33 @@
style="background-color: rgba(0, 0, 0, 0);")
q-icon(name="check")
//----- 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}]")
//----------------------------------------------------------------------------------------------- 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,
:style="{left: handlerNewCell.move.x - 20 + 'px', top: handlerNewCell.move.y - 20 + 'px'}",
: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")
// dummy move handler
.handler-new-cell.dummy.fixed.text-dark.justify-center.row.bg-white.shadow-6(
//----- (temp)
//----- (when main move handler is outside of viewport)
.handler-new-cell.temp.fixed.text-dark.justify-center.row.bg-white.shadow-6(
v-touch-pan="handleMoveCell",
:class="[!dummyButton.visibility ? 'dummyButtonHide': 'dummyButtonShow']",
:style="{left: dummyButton.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
:class="[!handlerNewCellTemp.visibility ? 'temp-hide': 'temp-show']",
:style="{left: handlerNewCellTemp.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
q-icon.self-center.rotate-180(name="open_with", size="22px")
//----- resize handler (bottom right)
//--------------------------------------------------------------------------------------------- resize handler
//----- (main)
// v-if="mobileTempCell.onGrid && !handlerNewCell.move.pushed",
.handler-new-cell.resize.absolute.text-dark.justify-center.row.bg-white.shadow-6(
v-if="mobileTempCell.onGrid && !handlerNewCell.move.pushed",
ref="resize",
v-intersection-observer,
:data-left="getHandlerPosition('resize')",
v-touch-pan="handleResizeCell", round, flat,
:style="{left: handlerNewCell.resize.x - 20 + 'px', top: handlerNewCell.resize.y - 20 + 'px'}",
:class="{'pushed': !handlerNewCell.resize.pushed}")
......@@ -325,10 +329,10 @@
// cursor: {x: undefined, y: undefined},
handlerNewCell: {
size: {width: 40, height: 40},
move: {x: 20, y: undefined, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined},
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}
},
dummyButton: {visibility: true, left: 0}
handlerNewCellTemp: {visibility: true, left: 0}
}
},
computed: {
......@@ -384,6 +388,11 @@
async mounted () {
await this.fetchData()
this.resetScrollPosition()
// this.handlerNewCell.move.dataLeft = this.$refs.move.getAttribute('data-left')
// console.log(this.handlerNewCell.move.dataLeft)
// this.testMove = this.$refs.move.getAttribute('data-left')
/*
let options = {
......@@ -447,104 +456,29 @@
}
},
methods: {
setHandlerStyle () {
let _handlerNewCell = this.handlerNewCell
if (_handlerNewCell.move.pos.includes('absolute')) {
return {
'position': 'absolute',
'left': this.mobileTempCell.left + 'px',
'top': this.handlerNewCell.move.y - 20 + 'px'
}
}
else {
let side
if (_handlerNewCell.move.pos.includes('left')) side = '0px'
else side = 'calc(100vw - 40px)'
return {
'position': 'fixed',
'left': side,
'top': this.handlerNewCell.move.y - 20 + 59 + 'px'
}
}
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)
},
// observerCallback (entries, observer) {
observerCallback (entries) {
let target = entries[0]
let scrollLeft = this.$el.scrollLeft
// console.log(target)
// console.log('scrollLeft', scrollLeft)
// console.log('mobileTempCell distance left', this.mobileTempCell.x * this.gridDimensions.full.cell.width - 1)
// if (target.boundingClientRect.x < this.handlerNewCell.size.width) {
if (!target.isIntersecting) {
console.log('is NOT intersecting')
// console.log('outside')
// this.handlerNewCell.move.inViewport = false
// this.handlerNewCell.move.x = 20
this.dummyButton.visibility = true
/*
console.log('----------------')
console.log('scrollLeft', scrollLeft)
console.log('scrollLeft + window.innerWidth', scrollLeft + window.innerWidth)
console.log('this.mobileTempCell.x', this.mobileTempCell.x * (this.gridDimensions.full.cell.width - 1))
*/
if (scrollLeft < this.handlerNewCell.move.x) {
console.log('-->')
this.dummyButton.left = window.innerWidth - 40
}
if (scrollLeft > this.handlerNewCell.move.x) {
console.log('<--')
this.dummyButton.left = 0
this.handlerNewCellTemp.visibility = true
if (Math.sign(target.boundingClientRect.left) === 1) {
this.handlerNewCellTemp.left = window.innerWidth - 40
}
/*
if (scrollLeft + window.innerWidth < this.mobileTempCell.x * this.gridDimensions.full.cell.width - 1) {
// console.log('--->')
this.dummyButton.left = window.innerWidth - 40
}
if (scrollLeft > this.mobileTempCell.x * this.gridDimensions.full.cell.width) {
// console.log('<---')
this.dummyButton.left = 0
else {
this.handlerNewCellTemp.left = 0
}
*/
}
else {
console.log('is intersecting')
this.dummyButton.visibility = false
this.handlerNewCellTemp.visibility = false
}
/*
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
console.log(this.mobileTempCell.ox)
// ----- left
if (entryX < _handlerNewCellHalf) {
_handlerNewCell.move.pos = 'fixed on-left-side'
}
// ----- middle
// if (entryX >= 20 && entryX <= window.innerWidth - 20) this.handlerNewCell.move.x = entryX
if (entryX >= _handlerNewCellHalf && entryX <= window.innerWidth - _handlerNewCell.size.width) {
_handlerNewCell.move.x = this.mobileTempCell.left
_handlerNewCell.move.pos = 'absolute'
}
// ----- right
if (entryX > window.innerWidth - _handlerNewCell.size.width) {
_handlerNewCell.move.pos = 'fixed on-right-side'
}
*/
},
handleMoveCell (obj) {
this.dummyButton.left = -100
this.handlerNewCellTemp.left = -100
this.handlerNewCell.move.x = obj.position.left
this.handlerNewCell.move.y = obj.position.top
......@@ -1346,14 +1280,6 @@
//************************************************** mobile: new cell
handler-width = 40px
.dummy
transition opacity ease 200ms
opacity 0
.dummyButtonHide
width 0!important
overflow hidden
.dummyButtonShow
opacity 1
.handler-new-cell
width handler-width
height handler-width
......@@ -1368,6 +1294,19 @@
&.on-right-side
left 'calc(100vw - %s)' % handler-width
&.temp
width handler-width
height handler-width
border-radius 1000px
transition opacity ease 200ms
opacity 0
&.temp-hide
width 0!important
overflow hidden
&.temp-show
opacity 1
/*
&.resize
left 'calc(100vw - %s - 8px)' % handler-width
......