touch & swipe & callback

[xgqfrms]

touch & swipe & callback

https://codepen.io/xgqfrms/pen/ZdZYQz

css var all in one & html & root & :root

https://www.cnblogs.com/xgqfrms/p/11165136.html

CSS3 & CSS var & :root

https://www.cnblogs.com/xgqfrms/p/11044246.html

[xgqfrms]

https://github.com/xgqfrms/learning/issues/28

[xgqfrms]

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description touchSwipe
 * @augments
 * @example
 * @link
 *
 */

const touchSwipe = (
    dom = ``,
    callbackLeft = () => console.log(`left callback`),
    callbackRight = () => console.log(`right callback`),
    debug = false
) => {
    let log = console.log;
    let div = ``;
    if (dom) {
        div = document.querySelector(dom);
        // div = document.querySelector(`[data-dom="div"]`);
        if (div) {
            div.addEventListener("touchstart", handleTouchStart, false);
            div.addEventListener("touchmove", handleTouchMove, false);
        } else {
            log(`dom can not be found!`);
            return;
        }
    }
    if (debug) {
        log(`touchSwipe init OK!`);
    }
    let xDown = null;
    let yDown = null;
    function getTouches(evt) {
        return evt.touches;
    }
    function handleTouchStart(evt) {
        // first touch point
        const firstTouch = getTouches(evt)[0];
        xDown = firstTouch.clientX;
        yDown = firstTouch.clientY;
    };
    function handleTouchMove(evt) {
        if (!xDown || !yDown) {
            return;
        }
        let xUp = evt.touches[0].clientX;
        let yUp = evt.touches[0].clientY;
        let xDiff = xDown - xUp;
        let yDiff = yDown - yUp;
        if (Math.abs(xDiff) > Math.abs(yDiff)) {
            if (xDiff > 0) {
                log(`left swipe`);
                callbackLeft();
            } else {
                log(`right swipe`);
                callbackRight();
            }
        } else {
            if ( yDiff > 0 ) {
                log(`up swipe`);
                callbackRight();
            } else {
                log(`down swipe`);
                callbackLeft();
            }
        }
        // reset values
        xDown = null;
        yDown = null;
    };
};

export default touchSwipe;

export {
    touchSwipe,
};

[xgqfrms]

touch circle menu

[xgqfrms]

https://www.cnblogs.com/xgqfrms/p/11044246.html

[xgqfrms]

cell-swipe

/**
 * mt-cell-swipe
 * @desc 类似 iOS 滑动 Cell 的效果
 * @module components/cell-swipe
 *
 * @example
 * <mt-cell-swipe
 *   :left=[
 *     {
 *       content: 'text',
 *       style: {color: 'white', backgroundColor: 'red'},
 *       handler(e) => console.log(123)
 *     }
 *   ]
 *   :right=[{ content: 'allowed HTML' }]>
 *   swipe me
 * </mt-cell-swipe>
 */
/* harmony default export */ exports["default"] = {
  name: 'mt-cell-swipe',

  components: { XCell: __WEBPACK_IMPORTED_MODULE_1_mint_ui_packages_cell_index_js__["a" /* default */] },

  directives: { Clickoutside: __WEBPACK_IMPORTED_MODULE_2_mint_ui_src_utils_clickoutside__["a" /* default */] },

  props: {
    to: String,
    left: Array,
    right: Array,
    icon: String,
    title: String,
    label: String,
    isLink: Boolean,
    value: {}
  },

  data: function data() {
    return {
      start: { x: 0, y: 0 }
    };
  },

  mounted: function mounted() {
    this.wrap = this.$refs.cell.$el.querySelector('.mint-cell-wrapper');
    this.leftElm = this.$refs.left;
    this.rightElm = this.$refs.right;
    this.leftWrapElm = this.leftElm.parentNode;
    this.rightWrapElm = this.rightElm.parentNode;
    this.leftWidth = this.leftElm.getBoundingClientRect().width;
    this.rightWidth = this.rightElm.getBoundingClientRect().width;

    this.leftDefaultTransform = this.translate3d(-this.leftWidth - 1);
    this.rightDefaultTransform = this.translate3d(this.rightWidth);

    this.rightWrapElm.style.webkitTransform = this.rightDefaultTransform;
    this.leftWrapElm.style.webkitTransform = this.leftDefaultTransform;
  },

  methods: {
    resetSwipeStatus: function resetSwipeStatus() {
      this.swiping = false;
      this.opened = true;
      this.offsetLeft = 0;
    },

    translate3d: function translate3d(offset) {
      return ("translate3d(" + offset + "px, 0, 0)");
    },

    setAnimations: function setAnimations(val) {
      this.wrap.style.transitionDuration = val;
      this.rightWrapElm.style.transitionDuration = val;
      this.leftWrapElm.style.transitionDuration = val;
    },

    swipeMove: function swipeMove(offset) {
      if ( offset === void 0 ) offset = 0;

      this.wrap.style.webkitTransform = this.translate3d(offset);
      this.rightWrapElm.style.webkitTransform = this.translate3d(this.rightWidth + offset);
      this.leftWrapElm.style.webkitTransform = this.translate3d(-this.leftWidth + offset);
      offset && (this.swiping = true);
    },

    swipeLeaveTransition: function swipeLeaveTransition(direction) {
      var this$1 = this;

      setTimeout(function () {
        this$1.swipeLeave = true;

        // left
        if (direction > 0 && -this$1.offsetLeft > this$1.rightWidth * 0.4) {
          this$1.swipeMove(-this$1.rightWidth);
          this$1.resetSwipeStatus();
          return;
        // right
        } else if (direction < 0 && this$1.offsetLeft > this$1.leftWidth * 0.4) {
          this$1.swipeMove(this$1.leftWidth);
          this$1.resetSwipeStatus();
          return;
        }

        this$1.swipeMove(0);
        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0_mint_ui_src_utils_dom__["c" /* once */])(this$1.wrap, 'webkitTransitionEnd', function (_) {
          this$1.wrap.style.webkitTransform = '';
          this$1.rightWrapElm.style.webkitTransform = this$1.rightDefaultTransform;
          this$1.leftWrapElm.style.webkitTransform = this$1.leftDefaultTransform;
          this$1.swipeLeave = false;
          this$1.swiping = false;
        });
      }, 0);
    },

    startDrag: function startDrag(evt) {
      evt = evt.changedTouches ? evt.changedTouches[0] : evt;
      this.dragging = true;
      this.start.x = evt.pageX;
      this.start.y = evt.pageY;
      this.direction = '';
    },

    onDrag: function onDrag(evt) {
      if (this.opened) {
        if (!this.swiping) {
          this.swipeMove(0);
          this.setAnimations('');
        }
        this.opened = false;
        return;
      }
      if (!this.dragging) return;

      var swiping;
      var e = evt.changedTouches ? evt.changedTouches[0] : evt;
      var offsetTop = e.pageY - this.start.y;
      var offsetLeft = this.offsetLeft = e.pageX - this.start.x;

      var y = Math.abs(offsetTop);
      var x = Math.abs(offsetLeft);

      this.setAnimations('0ms');

      if (this.direction === '') {
        this.direction = x > y ? 'horizonal' : 'vertical';
      }

      if (this.direction === 'horizonal') {
        evt.preventDefault();
        evt.stopPropagation();

        swiping = !(x < 5 || (x >= 5 && y >= x * 1.73));
        if (!swiping) return;

        if ((offsetLeft < 0 && -offsetLeft > this.rightWidth) ||
          (offsetLeft > 0 && offsetLeft > this.leftWidth) ||
          (offsetLeft > 0 && !this.leftWidth) ||
          (offsetLeft < 0 && !this.rightWidth)) {
        } else {
          this.swipeMove(offsetLeft);
        }
      }
    },

    endDrag: function endDrag() {
      this.direction = '';
      this.setAnimations('');
      if (!this.swiping) return;
      this.swipeLeaveTransition(this.offsetLeft > 0 ? -1 : 1);
    }
  }
};

[xgqfrms]

circle menus & solution

https://codepen.io/xgqfrms/pen/qzaKQE

ref

https://github.com/softwaretailoring/wheelnav/issues/82#issuecomment-503198361

[xgqfrms]

app in action