@meve/ui/es/image/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import Ripple from '../ripple';
import Lazy from '../lazy';
import Popup from '../popup';
import Button from '../button';
import Space from '../space';
import Icon from '../icon';
import { props } from './props';
import { createNamespace } from '../utils/create';
import { toSizeUnit } from '../utils/elements';







import { nextTick } from '../utils/components';

var _createNamespace = createNamespace('image'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var MIN_SCALE = 0.5;
var SCALE_RATIO = 0.5;
var ROTATE_RATIO = 90;
var ZOOM_ANIMATION_DURATION = 200;
var ImagePlugin = createComponent({
  directives: {
    Ripple: Ripple,
    Lazy: Lazy
  },
  props: props,
  watch: {
    showPreview: function showPreview(newValue) {
      if (newValue) {
        this.resetAll();
      }
    }
  },
  data: function data() {
    return {
      initPreview: false,
      showPreview: false,
      scale: 0.5,
      rotate: 0,
      translateX: 0,
      translateY: 0,
      prevX: 0,
      prevY: 0,
      touching: false,
      transitionDuration: undefined
    };
  },
  methods: {
    handleLoad: function handleLoad(e) {
      var el = e.currentTarget;

      if (this.lazy) {
        el._lazy.state === 'success' && this.$emit('load', e);
        el._lazy.state === 'error' && this.$emit('error', e);
      } else {
        this.$emit('load', e);
      }
    },
    handleError: function handleError(e) {
      !this.lazy && this.$emit('error', e);
    },
    handleClick: function handleClick(e) {
      var _this = this;

      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _this.$emit('click', e);

                if (!_this.previewDisabled) {
                  _context.next = 3;
                  break;
                }

                return _context.abrupt("return");

              case 3:
                if (_this.initPreview) {
                  _context.next = 7;
                  break;
                }

                _this.initPreview = true;
                _context.next = 7;
                return nextTick();

              case 7:
                _this.showPreview = true;

              case 8:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }))();
    },
    resetTranslate: function resetTranslate() {
      this.translateX = 0;
      this.translateY = 0;
    },
    resetAll: function resetAll() {
      this.resetTranslate();
      this.scale = 0.5;
      this.rotate = 0;
      this.enableAnimation();
    },
    enableAnimation: function enableAnimation() {
      var _this2 = this;

      this.transitionDuration = ZOOM_ANIMATION_DURATION;
      setTimeout(function () {
        _this2.transitionDuration = 0;
      }, ZOOM_ANIMATION_DURATION);
    },
    zoomIn: function zoomIn() {
      this.scale += SCALE_RATIO;
      this.enableAnimation();
    },
    zoomOut: function zoomOut() {
      if (this.scale <= MIN_SCALE) {
        return;
      }

      this.scale -= SCALE_RATIO;
      this.enableAnimation();
    },
    rotateLeft: function rotateLeft() {
      this.rotate -= ROTATE_RATIO;
      this.enableAnimation();
    },
    rotateRight: function rotateRight() {
      this.rotate += ROTATE_RATIO;
      this.enableAnimation();
    },
    renderLazyImage: function renderLazyImage() {
      var _this3 = this;

      var h = this.$createElement;
      return h("img", {
        "class": [namespace('__image'), this.previewDisabled ? namespace('--preview-disabled') : null],
        "attrs": {
          "alt": this.alt,
          "lazy-error": this.error,
          "lazy-loading": this.loading
        },
        "directives": [{
          name: "lazy",
          value: this.src
        }],
        "style": {
          objectFit: this.fit
        },
        "on": _extends({}, {
          "load": function load($event) {
            for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
              attrs[_key - 1] = arguments[_key];
            }

            _this3.handleLoad.apply(_this3, [$event].concat(attrs));
          },
          "error": function error($event) {
            for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
              attrs[_key2 - 1] = arguments[_key2];
            }

            _this3.handleError.apply(_this3, [$event].concat(attrs));
          },
          "click": function click($event) {
            for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
              attrs[_key3 - 1] = arguments[_key3];
            }

            _this3.handleClick.apply(_this3, [$event].concat(attrs));
          }
        })
      });
    },
    renderImage: function renderImage() {
      var _this4 = this;

      var h = this.$createElement;
      return h("img", {
        "class": [namespace('__image'), this.previewDisabled ? namespace('--preview-disabled') : null],
        "attrs": {
          "alt": this.alt,
          "src": this.src
        },
        "style": {
          objectFit: this.fit
        },
        "on": _extends({}, {
          "load": function load($event) {
            for (var _len4 = arguments.length, attrs = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
              attrs[_key4 - 1] = arguments[_key4];
            }

            _this4.handleLoad.apply(_this4, [$event].concat(attrs));
          },
          "error": function error($event) {
            for (var _len5 = arguments.length, attrs = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
              attrs[_key5 - 1] = arguments[_key5];
            }

            _this4.handleError.apply(_this4, [$event].concat(attrs));
          },
          "click": function click($event) {
            for (var _len6 = arguments.length, attrs = new Array(_len6 > 1 ? _len6 - 1 : 0), _key6 = 1; _key6 < _len6; _key6++) {
              attrs[_key6 - 1] = arguments[_key6];
            }

            _this4.handleClick.apply(_this4, [$event].concat(attrs));
          }
        })
      });
    },
    closePreview: function closePreview() {
      this.showPreview = false;
    },
    handleTouchstart: function handleTouchstart(event) {
      this.touching = true;
      var touches = event.touches;
      this.prevX = touches[0].clientX;
      this.prevY = touches[0].clientY;
    },
    handleTouchmove: function handleTouchmove(event) {
      if (!this.touching) {
        return;
      }

      var touches = event.touches;
      var _touches$ = touches[0],
          clientX = _touches$.clientX,
          clientY = _touches$.clientY;
      var moveX = clientX - this.prevX;
      var moveY = clientY - this.prevY;
      this.translateX += moveX / this.scale;
      this.translateY += moveY / this.scale;
      this.prevX = clientX;
      this.prevY = clientY;
    },
    handleTouchend: function handleTouchend() {
      this.touching = false;
    },
    renderPreview: function renderPreview() {
      var _this5 = this;

      var h = this.$createElement;
      return h(Popup, {
        "class": namespace('__popup'),
        "attrs": {
          "image-cover": true
        },
        "model": {
          value: _this5.showPreview,
          callback: function callback($$v) {
            _this5.showPreview = $$v;
          }
        }
      }, [h("div", {
        "class": namespace('__preview-container'),
        "style": {
          transform: "scale(" + this.scale + ") translate(" + this.translateX + "px, " + this.translateY + "px)",
          transitionDuration: this.transitionDuration + "ms"
        },
        "on": _extends({}, {
          "touchstart": function touchstart($event) {
            for (var _len7 = arguments.length, attrs = new Array(_len7 > 1 ? _len7 - 1 : 0), _key7 = 1; _key7 < _len7; _key7++) {
              attrs[_key7 - 1] = arguments[_key7];
            }

            _this5.handleTouchstart.apply(_this5, [$event].concat(attrs));
          },
          "touchmove": function touchmove($event) {
            for (var _len8 = arguments.length, attrs = new Array(_len8 > 1 ? _len8 - 1 : 0), _key8 = 1; _key8 < _len8; _key8++) {
              attrs[_key8 - 1] = arguments[_key8];
            }

            _this5.handleTouchmove.apply(_this5, [$event].concat(attrs));
          },
          "touchend": function touchend($event) {
            for (var _len9 = arguments.length, attrs = new Array(_len9 > 1 ? _len9 - 1 : 0), _key9 = 1; _key9 < _len9; _key9++) {
              attrs[_key9 - 1] = arguments[_key9];
            }

            _this5.handleTouchend.apply(_this5, [$event].concat(attrs));
          }
        })
      }, [h("img", {
        "class": namespace('__preview-image'),
        "attrs": {
          "src": this.src,
          "alt": this.alt
        },
        "style": {
          transform: "rotate(" + this.rotate + "deg)",
          transitionDuration: this.transitionDuration + "ms"
        }
      })]), h("div", {
        "class": namespace('__preview-toolbar')
      }, [h(Space, {
        "attrs": {
          "wrap": false
        }
      }, [h(Button, {
        "class": namespace('__reset-all'),
        "attrs": {
          "image-cover": true,
          "type": "primary",
          "round": true
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len10 = arguments.length, attrs = new Array(_len10 > 1 ? _len10 - 1 : 0), _key10 = 1; _key10 < _len10; _key10++) {
              attrs[_key10 - 1] = arguments[_key10];
            }

            _this5.resetAll.apply(_this5, [$event].concat(attrs));
          }
        })
      }, [h(Icon, {
        "attrs": {
          "name": "map-marker-outline"
        }
      })]), h(Button, {
        "class": namespace('__rotate-left'),
        "attrs": {
          "image-cover": true,
          "type": "primary",
          "round": true
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len11 = arguments.length, attrs = new Array(_len11 > 1 ? _len11 - 1 : 0), _key11 = 1; _key11 < _len11; _key11++) {
              attrs[_key11 - 1] = arguments[_key11];
            }

            _this5.rotateLeft.apply(_this5, [$event].concat(attrs));
          }
        })
      }, [h(Icon, {
        "attrs": {
          "name": "rotate-left"
        }
      })]), h(Button, {
        "class": namespace('__rotate-right'),
        "attrs": {
          "image-cover": true,
          "type": "primary",
          "round": true
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len12 = arguments.length, attrs = new Array(_len12 > 1 ? _len12 - 1 : 0), _key12 = 1; _key12 < _len12; _key12++) {
              attrs[_key12 - 1] = arguments[_key12];
            }

            _this5.rotateRight.apply(_this5, [$event].concat(attrs));
          }
        })
      }, [h(Icon, {
        "attrs": {
          "name": "rotate-right"
        }
      })]), h(Button, {
        "class": namespace('__zoom-in'),
        "attrs": {
          "image-cover": true,
          "type": "primary",
          "round": true
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len13 = arguments.length, attrs = new Array(_len13 > 1 ? _len13 - 1 : 0), _key13 = 1; _key13 < _len13; _key13++) {
              attrs[_key13 - 1] = arguments[_key13];
            }

            _this5.zoomIn.apply(_this5, [$event].concat(attrs));
          }
        })
      }, [h(Icon, {
        "attrs": {
          "name": "magnify-plus-outline"
        }
      })]), h(Button, {
        "class": namespace('__zoom-out'),
        "attrs": {
          "image-cover": true,
          "type": "primary",
          "round": true
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len14 = arguments.length, attrs = new Array(_len14 > 1 ? _len14 - 1 : 0), _key14 = 1; _key14 < _len14; _key14++) {
              attrs[_key14 - 1] = arguments[_key14];
            }

            _this5.zoomOut.apply(_this5, [$event].concat(attrs));
          }
        })
      }, [h(Icon, {
        "attrs": {
          "name": "magnify-minus-outline"
        }
      })]), h(Button, {
        "class": namespace('__close-preview'),
        "attrs": {
          "image-cover": true,
          "type": "primary",
          "round": true
        },
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len15 = arguments.length, attrs = new Array(_len15 > 1 ? _len15 - 1 : 0), _key15 = 1; _key15 < _len15; _key15++) {
              attrs[_key15 - 1] = arguments[_key15];
            }

            _this5.closePreview.apply(_this5, [$event].concat(attrs));
          }
        })
      }, [h(Icon, {
        "attrs": {
          "name": "close"
        }
      })])])])]);
    }
  },
  render: function render() {
    var h = arguments[0];
    var width = this.width,
        height = this.height,
        radius = this.radius,
        block = this.block,
        ripple = this.ripple,
        lazy = this.lazy,
        initPreview = this.initPreview,
        previewDisabled = this.previewDisabled;
    return h("div", {
      "class": [namespace(), 'm--box', block ? null : 'm--inline-block'],
      "style": {
        width: toSizeUnit(width),
        height: toSizeUnit(height),
        borderRadius: toSizeUnit(radius)
      }
    }, [h("div", {
      "class": [namespace('__image-container'), 'm--box', block ? null : 'm--inline-block'],
      "style": {
        width: toSizeUnit(width),
        height: toSizeUnit(height),
        borderRadius: toSizeUnit(radius)
      },
      "directives": [{
        name: "ripple",
        value: {
          disabled: !ripple
        }
      }]
    }, [lazy ? this.renderLazyImage() : this.renderImage()]), initPreview && !previewDisabled && this.renderPreview()]);
  }
});
export var _ImageComponent = ImagePlugin;
export default ImagePlugin;