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

partials/GridEditor.vue

@@ -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">