ant-design-vue/lib/_util/wave.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _Event = require('./css-animation/Event');

var _Event2 = _interopRequireDefault(_Event);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

exports['default'] = {
  name: 'Wave',
  props: ['insertExtraNode'],
  mounted: function mounted() {
    var _this = this;

    this.$nextTick(function () {
      _this.instance = _this.bindAnimationEvent(_this.$el);
    });
  },
  beforeDestroy: function beforeDestroy() {
    if (this.instance) {
      this.instance.cancel();
    }
  },

  methods: {
    isNotGrey: function isNotGrey(color) {
      var match = (color || '').match(/rgba?\((\d*), (\d*), (\d*)(, [\.\d]*)?\)/);
      if (match && match[1] && match[2] && match[3]) {
        return !(match[1] === match[2] && match[2] === match[3]);
      }
      return true;
    },
    onClick: function onClick(node, waveColor) {
      if (node.className.indexOf('-leave') >= 0) {
        return;
      }
      this.removeExtraStyleNode();
      var insertExtraNode = this.$props.insertExtraNode;

      this.extraNode = document.createElement('div');
      var extraNode = this.extraNode;
      extraNode.className = 'ant-click-animating-node';
      var attributeName = this.getAttributeName();
      node.removeAttribute(attributeName);
      node.setAttribute(attributeName, 'true');
      // Not white or transparnt or grey
      if (waveColor && waveColor !== '#ffffff' && waveColor !== 'rgb(255, 255, 255)' && this.isNotGrey(waveColor) && !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
      waveColor !== 'transparent') {
        extraNode.style.borderColor = waveColor;
        this.styleForPesudo = document.createElement('style');
        this.styleForPesudo.innerHTML = '[ant-click-animating-without-extra-node]:after { border-color: ' + waveColor + '; }';
        document.body.appendChild(this.styleForPesudo);
      }
      if (insertExtraNode) {
        node.appendChild(extraNode);
      }
      _Event2['default'].addEndEventListener(node, this.onTransitionEnd);
    },
    bindAnimationEvent: function bindAnimationEvent(node) {
      var _this2 = this;

      if (!node || !node.getAttribute || node.getAttribute('disabled') || node.className.indexOf('disabled') >= 0) {
        return;
      }
      var onClick = function onClick(e) {
        // Fix radio button click twice
        if (e.target.tagName === 'INPUT') {
          return;
        }
        _this2.resetEffect(node);
        // Get wave color from target
        var waveColor = getComputedStyle(node).getPropertyValue('border-top-color') || // Firefox Compatible
        getComputedStyle(node).getPropertyValue('border-color') || getComputedStyle(node).getPropertyValue('background-color');
        _this2.clickWaveTimeoutId = window.setTimeout(function () {
          return _this2.onClick(node, waveColor);
        }, 0);
      };
      node.addEventListener('click', onClick, true);
      return {
        cancel: function cancel() {
          node.removeEventListener('click', onClick, true);
        }
      };
    },
    getAttributeName: function getAttributeName() {
      var insertExtraNode = this.$props.insertExtraNode;

      return insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node';
    },
    resetEffect: function resetEffect(node) {
      if (!node || node === this.extraNode) {
        return;
      }
      var insertExtraNode = this.$props.insertExtraNode;

      var attributeName = this.getAttributeName();
      node.removeAttribute(attributeName);
      this.removeExtraStyleNode();
      if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
        node.removeChild(this.extraNode);
      }
      _Event2['default'].removeEndEventListener(node, this.onTransitionEnd);
    },
    onTransitionEnd: function onTransitionEnd(e) {
      if (!e || e.animationName !== 'fadeEffect') {
        return;
      }
      this.resetEffect(e.target);
    },
    removeExtraStyleNode: function removeExtraStyleNode() {
      if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) {
        document.body.removeChild(this.styleForPesudo);
        this.styleForPesudo = null;
      }
    }
  },

  render: function render() {
    return this.$slots['default'] && this.$slots['default'][0];
  }
};
module.exports = exports['default'];