@opentiny/vue-renderless 3.1.0-alpha.0

package/image-viewer/index.js

@@ -0,0 +1,469 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager';
+var isFirefox = function isFirefox() {
+  return !!window.navigator.userAgent.match(/firefox/i);
+};
+var mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
+export var rafThrottle = function rafThrottle(fn) {
+  var locked = false;
+  return function () {
+    var _this = this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (locked) {
+      return;
+    }
+    locked = true;
+    window.requestAnimationFrame(function () {
+      fn.apply(_this, args);
+      locked = false;
+    });
+  };
+};
+export var hide = function hide(_ref) {
+  var props = _ref.props,
+    api = _ref.api;
+  return function () {
+    api.deviceSupportUninstall();
+    props.onClose();
+  };
+};
+export var deviceSupportInstall = function deviceSupportInstall(_ref2) {
+  var state = _ref2.state,
+    api = _ref2.api;
+  return function () {
+    state._keyDownHandler = rafThrottle(function (event) {
+      var keyCode = event.keyCode;
+      switch (keyCode) {
+        case KEY_CODE.Escape:
+          api.hide();
+          break;
+        case KEY_CODE.Space:
+          api.toggleMode();
+          break;
+        case KEY_CODE.ArrowLeft:
+          api.prev();
+          break;
+        case KEY_CODE.ArrowUp:
+          api.handleActions('zoomIn');
+          break;
+        case KEY_CODE.ArrowRight:
+          api.next();
+          break;
+        case KEY_CODE.ArrowDown:
+          api.handleActions('zoomOut');
+          break;
+        default:
+          break;
+      }
+    });
+    state._mouseWheelHandler = rafThrottle(function (event) {
+      var delta = event.wheelDelta ? event.wheelDelta : -event.detail;
+      if (delta > 0) {
+        api.handleActions('zoomIn', {
+          zoomRate: 0.015,
+          enableTransition: false
+        });
+      } else {
+        api.handleActions('zoomOut', {
+          zoomRate: 0.015,
+          enableTransition: false
+        });
+      }
+    });
+    on(document, 'keydown', state._keyDownHandler);
+    on(document, mousewheelEventName, state._mouseWheelHandler);
+  };
+};
+export var deviceSupportUninstall = function deviceSupportUninstall(state) {
+  return function () {
+    off(document, 'keydown', state._keyDownHandler);
+    off(document, mousewheelEventName, state._mouseWheelHandler);
+    state._keyDownHandler = null;
+    state._mouseWheelHandler = null;
+  };
+};
+export var handleImgLoad = function handleImgLoad(state) {
+  return function () {
+    return state.loading = false;
+  };
+};
+export var handleImgError = function handleImgError(_ref3) {
+  var state = _ref3.state,
+    t = _ref3.t;
+  return function (event) {
+    state.loading = false;
+    event.target.alt = t('ui.imageViewer.loadErrorAlt');
+  };
+};
+export var handleMouseDown = function handleMouseDown(state) {
+  return function (event) {
+    if (state.loading || event.button !== 0) {
+      return;
+    }
+    var _state$transform = state.transform,
+      offsetX = _state$transform.offsetX,
+      offsetY = _state$transform.offsetY;
+    var startX = event.pageX;
+    var startY = event.pageY;
+    state._dragHandler = rafThrottle(function (event) {
+      state.transform.offsetX = offsetX + event.pageX - startX;
+      state.transform.offsetY = offsetY + event.pageY - startY;
+    });
+    on(document, 'mousemove', state._dragHandler);
+    on(document, 'mouseup', function () {
+      return off(document, 'mousemove', state._dragHandler);
+    });
+    event.preventDefault();
+  };
+};
+export var reset = function reset(state) {
+  return function () {
+    return state.transform = {
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      enableTransition: false
+    };
+  };
+};
+export var toggleMode = function toggleMode(_ref4) {
+  var state = _ref4.state,
+    constants = _ref4.constants,
+    api = _ref4.api;
+  return function () {
+    if (state.loading) {
+      return;
+    }
+    var MODE = constants.MODE;
+    var modeNames = Object.keys(MODE);
+    var modeValues = [];
+    modeNames.forEach(function (key) {
+      modeValues.push(MODE[key]);
+    });
+    var index = -1;
+    modeValues.forEach(function (item, inx) {
+      if (item.name === state.mode.name) {
+        index = inx;
+      }
+    });
+    var nextIndex = (index + 1) % modeNames.length;
+    state.mode = MODE[modeNames[nextIndex]];
+    api.reset();
+  };
+};
+export var prev = function prev(_ref5) {
+  var state = _ref5.state,
+    props = _ref5.props;
+  return function () {
+    if (state.isFirst && !state.infinite) {
+      return;
+    }
+    var len = props.urlList.length;
+    state.index = (state.index - 1 + len) % len;
+  };
+};
+export var next = function next(_ref6) {
+  var state = _ref6.state,
+    props = _ref6.props;
+  return function () {
+    if (state.isLast && !state.infinite) {
+      return;
+    }
+    var len = props.urlList.length;
+    state.index = (state.index + 1) % len;
+  };
+};
+export var handleActions = function handleActions(state) {
+  return function (action) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    if (state.loading) {
+      return;
+    }
+    var _zoomRate$rotateDeg$e = _objectSpread({
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true
+      }, options),
+      zoomRate = _zoomRate$rotateDeg$e.zoomRate,
+      rotateDeg = _zoomRate$rotateDeg$e.rotateDeg,
+      enableTransition = _zoomRate$rotateDeg$e.enableTransition;
+    var transform = state.transform;
+    if (action === 'zoomOut') {
+      if (transform.scale > 0.2) {
+        transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
+      }
+    } else if (action === 'zoomIn') {
+      transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+    } else if (action === 'clocelise') {
+      transform.deg += rotateDeg;
+    } else if (action === 'anticlocelise') {
+      transform.deg -= rotateDeg;
+    }
+    transform.enableTransition = enableTransition;
+  };
+};
+export var computedIsSingle = function computedIsSingle(props) {
+  return function () {
+    return props.urlList.length <= 1;
+  };
+};
+export var computedIsFirst = function computedIsFirst(state) {
+  return function () {
+    return state.index === 0;
+  };
+};
+export var computedIsLast = function computedIsLast(_ref7) {
+  var state = _ref7.state,
+    props = _ref7.props;
+  return function () {
+    return state.index === props.urlList.length - 1;
+  };
+};
+export var computedCurrentImg = function computedCurrentImg(_ref8) {
+  var state = _ref8.state,
+    props = _ref8.props;
+  return function () {
+    return props.urlList[state.index];
+  };
+};
+export var computedImgStyle = function computedImgStyle(_ref9) {
+  var state = _ref9.state,
+    constants = _ref9.constants;
+  return function () {
+    var _state$transform2 = state.transform,
+      offsetX = _state$transform2.offsetX,
+      offsetY = _state$transform2.offsetY,
+      scale = _state$transform2.scale,
+      deg = _state$transform2.deg,
+      enableTransition = _state$transform2.enableTransition;
+    var transition = enableTransition ? 'transform .3s' : '';
+    var style = {
+      transform: "scale(".concat(scale, ") rotate(").concat(deg, "deg)"),
+      transition: transition,
+      'margin-top': "".concat(offsetY, "px"),
+      'margin-left': "".concat(offsetX, "px")
+    };
+    if (JSON.stringify(state.mode) === JSON.stringify(constants.MODE.CONTAIN)) {
+      style.maxWidth = style.maxHeight = '100%';
+    }
+    return style;
+  };
+};
+export var watchVisible = function watchVisible(state) {
+  return function (value) {
+    return state.previewVisible = value;
+  };
+};
+export var handleVisible = function handleVisible(_ref10) {
+  var state = _ref10.state,
+    emit = _ref10.emit,
+    props = _ref10.props;
+  return function () {
+    state.transform.scale = 1;
+    state.transform.deg = 0;
+    setTimeout(function () {
+      if (props.startPosition !== 0) {
+        state.index = (props.startPosition - 1 + state.urlList.length) % state.urlList.length;
+        state.imageTransform = state.index * state.imageItemWidth;
+        state.imageTransformSize = -state.index * state.imageItemWidth;
+      } else {
+        state.index = 0;
+        state.imageTransform = state.index * state.imageItemWidth;
+        state.imageTransformSize = -state.index * state.imageItemWidth;
+      }
+    }, 300);
+    emit('update:preview-visible', false);
+    emit('close', state.index, state.urlList[state.index]);
+  };
+};
+export var getImageWidth = function getImageWidth(_ref11) {
+  var state = _ref11.state,
+    parent = _ref11.parent,
+    props = _ref11.props;
+  return function () {
+    var imageW = 0;
+    var len = state.urlList.length;
+    imageW = parent.$el.querySelector('.tiny-mobile-image-viewer__canvas').offsetWidth;
+    state.imageList = parent.$el.querySelectorAll('.tiny-mobile-image-viewer__item');
+    state.imageItemWidth = imageW;
+    state.iamgeAllWidth = state.urlList.length * imageW;
+    if (props.startPosition !== 0) {
+      state.index = props.startPosition;
+      state.imageTransition = 0;
+      var transformX = state.index * state.imageItemWidth;
+      state.imageTransform = transformX;
+      state.imageTransformSize = -transformX;
+    }
+    if (state.index === 0 && props.deleteButton && state["delete"]) {
+      state.imageTransition = 0;
+      var _transformX = state.index * state.imageItemWidth;
+      state.imageTransform = _transformX;
+      state.imageTransformSize = -_transformX;
+    }
+    setTimeout(function () {
+      state.imageTransition = 300;
+    }, 0);
+    if (props.startPosition === 0) {
+      state.arrowStyle = 'N';
+    }
+    if (props.startPosition === len - 1) {
+      state.arrowStyle = 'Y';
+    }
+  };
+};
+export var swipeLeft = function swipeLeft(_ref12) {
+  var state = _ref12.state,
+    emit = _ref12.emit;
+  return function () {
+    if (state.isLast && !state.infinite) {
+      return;
+    }
+    var len = state.urlList.length;
+    if (state.index >= state.urlList.length - 2) {
+      state.arrowStyle = 'Y';
+    } else {
+      state.arrowStyle = null;
+    }
+    if (state.imageTransform === state.iamgeAllWidth) {
+      state.imageTransformSize = state.imageTransform = 0;
+      state.imageList[0].style.transform = null;
+      return;
+    }
+    if (state.imageTransform == state.iamgeAllWidth - state.imageItemWidth && state.index == state.urlList.length - 1) {
+      return;
+    }
+    state.index = (state.index + 1) % len;
+    var transformX = state.index * state.imageItemWidth;
+    state.imageTransform = transformX;
+    state.imageTransformSize = -transformX;
+    emit('change', state.index, state.urlList[state.index]);
+  };
+};
+export var swipeRight = function swipeRight(_ref13) {
+  var state = _ref13.state,
+    emit = _ref13.emit;
+  return function () {
+    if (state.isFirst && !state.infinite) {
+      return;
+    }
+    var len = state.urlList.length;
+    if (state.index <= 1) {
+      state.arrowStyle = 'N';
+    } else {
+      state.arrowStyle = null;
+    }
+    if (state.imageTransform == 0 && state.index == 0) {
+      return;
+    }
+    state.index = (state.index - 1 + len) % len;
+    var transformX = state.index * state.imageItemWidth;
+    state.imageTransform = transformX;
+    state.imageTransformSize = -transformX;
+    emit('change', state.index, state.urlList[state.index]);
+  };
+};
+export var handleDelete = function handleDelete(_ref14) {
+  var api = _ref14.api,
+    emit = _ref14.emit,
+    state = _ref14.state;
+  return function () {
+    if (state.urlList.length <= 1) {
+      state["delete"] = false;
+      return;
+    }
+    state["delete"] = true;
+    var currenIndex = state.index;
+    var urlList = state.urlList;
+    urlList.splice(currenIndex, 1);
+    state.urlList = urlList;
+    state.index = 0;
+    api.getImageWidth();
+    emit('newImageList', state.urlList, currenIndex);
+  };
+};
+var preventDefault = function preventDefault(event, isStopPropagation) {
+  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    event.preventDefault();
+  }
+  if (isStopPropagation) {
+    event.stopPropagation();
+  }
+};
+export var touchstart = function touchstart(state) {
+  return function (e) {
+    var touches = e.touches;
+    var events = touches[0];
+    var events2 = touches[1];
+    preventDefault(e);
+    state.pageX = events.pageX;
+    state.pageY = events.pageY;
+    state.moveable = true;
+    if (events2) {
+      state.pageX2 = events2.pageX;
+      state.pageY2 = events2.pageY;
+    }
+    state.originScale = state.scale || 1;
+  };
+};
+export var touchmove = function touchmove(state) {
+  return function (event) {
+    if (!state.moveable) {
+      return;
+    }
+    preventDefault(event);
+    var touches = event.touches;
+    var events = touches[0];
+    var events2 = touches[1];
+    if (events2) {
+      if (!state.pageX2) {
+        state.pageX2 = events2.pageX;
+      }
+      if (!state.pageY2) {
+        state.pageY2 = events2.pageY;
+      }
+      var getDistance = function getDistance(start, stop) {
+        return Math.hypot(stop.x - start.x, stop.y - start.y);
+      };
+      var zoom = getDistance({
+        x: events.pageX,
+        y: events.pageY
+      }, {
+        x: events2.pageX,
+        y: events2.pageY
+      }) / getDistance({
+        x: state.pageX,
+        y: state.pageY
+      }, {
+        x: state.pageX2,
+        y: state.pageY2
+      });
+      var newScale = state.originScale * zoom;
+      if (newScale > 3) {
+        newScale = 3;
+      }
+      state.scale = newScale;
+      state.transform.scale = newScale;
+    }
+  };
+};
+export var touchend = function touchend(state) {
+  return function () {
+    state.moveable = false;
+    state.pageX2 = 0;
+    state.pageY2 = 0;
+  };
+};
+export var computeZIndex = function computeZIndex(_ref15) {
+  var constants = _ref15.constants,
+    props = _ref15.props;
+  return function () {
+    return props.zIndex === constants.DEFAULT_POPPER_ZINDEX || props.zIndex < 1 ? PopupManager.nextZIndex() : props.zIndex;
+  };
+};

package/image-viewer/vue.js

@@ -0,0 +1,243 @@
+import { computedIsSingle, watchVisible, computedIsFirst, computedIsLast, computedCurrentImg, computedImgStyle, hide, deviceSupportInstall, deviceSupportUninstall, handleImgLoad, handleImgError, handleMouseDown, reset, toggleMode, prev, next, handleActions, handleVisible, getImageWidth, swipeLeft, swipeRight, handleDelete, touchstart, touchmove, touchend, computeZIndex } from './index';
+export var api = ['state', 'zIndex', 'touchstart', 'touchmove', 'touchend', 'urlList', 'hide', 'prev', 'next', 'handleActions', 'toggleMode', 'handleImgLoad', 'handleImgError', 'handleMouseDown', 'handleVisible', 'swipeLeft', 'swipeRight', 'handleDelete'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    mode = _ref.mode,
+    props = _ref.props,
+    constants = _ref.constants;
+  var state = reactive({
+    index: mode == 'pc' ? 0 : props.startPosition,
+    isShow: false,
+    infinite: true,
+    loading: false,
+    transform: {
+      scale: 1,
+      deg: 0,
+      offsetX: 0,
+      offsetY: 0,
+      objfit: 'contain',
+      enableTransition: false
+    },
+    urlList: props.urlList,
+    mode: constants.MODE.CONTAIN,
+    previewVisible: props.previewVisible,
+    fullScreen: props.imageFullCurrent,
+    hammer: null,
+    imageItemWidth: 0,
+    imageAllWidth: 0,
+    imageTransform: 0,
+    imageTransformSize: 0,
+    imageTransition: 300,
+    imageList: null,
+    arrowStyle: null,
+    "delete": false,
+    isLast: computed(function () {
+      return api.computedIsLast();
+    }),
+    isFirst: computed(function () {
+      return api.computedIsFirst();
+    }),
+    isSingle: computed(function () {
+      return api.computedIsSingle();
+    }),
+    imgStyle: computed(function () {
+      return api.computedImgStyle();
+    }),
+    currentImg: computed(function () {
+      return api.computedCurrentImg();
+    }),
+    zIndex: computed(function () {
+      return api.computeZIndex();
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    props = _ref2.props,
+    parent = _ref2.parent,
+    nextTick = _ref2.nextTick,
+    emit = _ref2.emit,
+    t = _ref2.t,
+    constants = _ref2.constants;
+  Object.assign(api, {
+    state: state,
+    touchstart: touchstart(state),
+    touchmove: touchmove(state),
+    touchend: touchend(state),
+    reset: reset(state),
+    prev: prev({
+      state: state,
+      props: props
+    }),
+    next: next({
+      state: state,
+      props: props
+    }),
+    getImageWidth: getImageWidth({
+      state: state,
+      parent: parent,
+      props: props,
+      nextTick: nextTick
+    }),
+    handleVisible: handleVisible({
+      state: state,
+      emit: emit,
+      props: props
+    }),
+    handleActions: handleActions(state),
+    handleImgLoad: handleImgLoad(state),
+    handleMouseDown: handleMouseDown(state),
+    computedIsFirst: computedIsFirst(state),
+    computedIsSingle: computedIsSingle(props),
+    handleImgError: handleImgError({
+      state: state,
+      t: t
+    }),
+    computedIsLast: computedIsLast({
+      state: state,
+      props: props
+    }),
+    watchVisible: watchVisible(state),
+    deviceSupportUninstall: deviceSupportUninstall(state),
+    computedCurrentImg: computedCurrentImg({
+      state: state,
+      props: props
+    }),
+    computedImgStyle: computedImgStyle({
+      state: state,
+      constants: constants
+    }),
+    computeZIndex: computeZIndex({
+      constants: constants,
+      props: props
+    }),
+    hide: hide({
+      props: props,
+      api: api
+    }),
+    deviceSupportInstall: deviceSupportInstall({
+      state: state,
+      api: api
+    }),
+    toggleMode: toggleMode({
+      state: state,
+      constants: constants,
+      api: api
+    }),
+    swipeRight: swipeRight({
+      api: api,
+      state: state,
+      emit: emit
+    }),
+    swipeLeft: swipeLeft({
+      api: api,
+      state: state,
+      emit: emit
+    }),
+    handleDelete: handleDelete({
+      api: api,
+      state: state,
+      emit: emit
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    state = _ref3.state,
+    api = _ref3.api,
+    props = _ref3.props,
+    nextTick = _ref3.nextTick,
+    vm = _ref3.vm;
+  watch(function () {
+    return state.index;
+  }, function (value) {
+    api.reset();
+    props.onSwitch(value);
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return props.previewVisible;
+  }, function (value) {
+    api.watchVisible(value);
+    if (props.previewVisible) {
+      nextTick(function () {
+        state.urlList = props.urlList;
+        api.getImageWidth();
+      });
+    }
+  }, {
+    immediate: true
+  });
+  watch(function () {
+    return state.currentImg;
+  }, function (value) {
+    nextTick(function () {
+      var index = state.urlList.indexOf(value);
+      var imageIns = vm.$refs["img_".concat(index)];
+      if (Array.isArray(imageIns)) {
+        imageIns = imageIns[0];
+      }
+      if (imageIns) {
+        state.loading = !imageIns.complete;
+      }
+    });
+  }, {
+    immediate: true
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onMounted = _ref4.onMounted,
+    onUpdated = _ref4.onUpdated,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var t = _ref5.t,
+    parent = _ref5.parent,
+    nextTick = _ref5.nextTick,
+    emit = _ref5.emit,
+    constants = _ref5.constants,
+    vm = _ref5.vm,
+    mode = _ref5.mode;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    mode: mode,
+    props: props,
+    constants: constants
+  });
+  initApi({
+    api: api,
+    state: state,
+    props: props,
+    parent: parent,
+    nextTick: nextTick,
+    emit: emit,
+    t: t,
+    constants: constants
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    api: api,
+    props: props,
+    nextTick: nextTick,
+    vm: vm
+  });
+  onMounted(api.deviceSupportInstall);
+  onUpdated(function () {
+    if (props.asyncClose) {
+      setTimeout(function () {
+        state.previewVisible = false;
+        emit('update:preview-visible', false);
+      }, 3000);
+    }
+  });
+  return api;
+};