vue-comps-waves/waves.js

svg based waves effect

var GradientStore, Velocity;

Velocity = require("velocity-animate");

GradientStore = require('./gradient-store');

module.exports = {
  mixins: [require("vue-mixins/setCss"), require("vue-mixins/vue"), require("vue-mixins/style"), require("vue-mixins/onceDocument")],
  props: {
    color: {
      type: String,
      "default": "black"
    },
    speed: {
      type: Number,
      "default": 1
    },
    style: {
      "default": function() {
        return [];
      }
    }
  },
  computed: {
    gradUrl: function() {
      if (this.getId == null) {
        return null;
      }
      return "url(#" + this.getId(this.color) + ")";
    }
  },
  data: function() {
    return {
      getId: null,
      gradUrl: null,
      ripples: [],
      debug: "",
      parentEl: null,
      sibling: false,
      mergeStyle: {
        position: 'absolute'
      },
      parentPositioned: false
    };
  },
  methods: {
    show: function(e) {
      var duration, ripple, rippleDiv, rippleEl, size, x, y;
      if (!this.parentPositioned) {
        this.mergeStyle.top = this.parentEl.offsetTop + "px";
        this.mergeStyle.left = this.parentEl.offsetLeft + "px";
        this.mergeStyle.height = this.parentEl.offsetHeight + "px";
        this.mergeStyle.width = this.parentEl.offsetWidth + "px";
      }
      x = e.offsetX;
      y = e.offsetY;
      size = Math.max(this.$el.offsetWidth - x, this.$el.offsetHeight - y, x, y) * 3;
      rippleDiv = this.$els.rippleDiv.cloneNode(true);
      this.setCss(rippleDiv, "top", y + "px");
      this.setCss(rippleDiv, "left", x + "px");
      this.$el.appendChild(rippleDiv);
      duration = size / this.speed / 0.35;
      rippleEl = rippleDiv.firstChild;
      Velocity(rippleEl, {
        opacity: 0.5
      }, {
        duration: duration * 1 / 2,
        queue: false
      });
      Velocity(rippleEl, {
        width: size,
        height: size
      }, {
        duration: duration,
        easing: "easeIn",
        queue: false
      });
      ripple = {
        rippleDiv: rippleDiv,
        duration: duration * 1 / 2,
        released: false,
        timeouted: false
      };
      this.ripples.push(ripple);
      setTimeout(((function(_this) {
        return function() {
          ripple.timeouted = true;
          if (ripple.released) {
            return _this.hide(ripple);
          }
        };
      })(this)), duration * 1 / 2);
      if (this.documentListener == null) {
        this.documentListener = this.onceDocument("mouseup", (function(_this) {
          return function() {
            _this.release();
            _this.documentListener = null;
            return true;
          };
        })(this));
      }
      return ripple;
    },
    hide: function(ripple) {
      return Velocity(ripple.rippleDiv.firstChild, {
        opacity: 0
      }, {
        duration: ripple.duration,
        complete: (function(_this) {
          return function() {
            ripple.rippleDiv.remove();
            return _this.ripples.splice(_this.ripples.indexOf(ripple), 1);
          };
        })(this)
      });
    },
    release: function() {
      var lastRipple;
      lastRipple = this.ripples[this.ripples.length - 1];
      if (lastRipple != null) {
        lastRipple.released = true;
        if (lastRipple.timeouted) {
          return this.hide(lastRipple);
        }
      }
    }
  },
  ready: function() {
    var parentStyle, style;
    this.getId = GradientStore(this.Vue).getId;
    this.parentEl = this.$el.parentElement;
    this.parentEl.addEventListener("mousedown", this.show);
    parentStyle = getComputedStyle(this.parentEl);
    this.parentPositioned = /relative|absolute|fixed/.test(parentStyle.getPropertyValue("position"));
    style = {
      position: 'absolute',
      overflow: 'hidden',
      touchAction: 'auto',
      pointerEvents: "none",
      cursor: parentStyle.getPropertyValue("cursor"),
      zIndex: parentStyle.getPropertyValue("z-index"),
      boxSizing: "border-box",
      top: 0,
      left: 0
    };
    if (!this.parentPositioned) {

    } else {
      style.bottom = 0;
      style.right = 0;
      style.marginTop = "-" + parentStyle.getPropertyValue("border-top-width");
      style.marginBottom = "-" + parentStyle.getPropertyValue("border-bottom-width");
      style.marginLeft = "-" + parentStyle.getPropertyValue("border-left-width");
      style.marginRight = "-" + parentStyle.getPropertyValue("border-right-width");
      if (typeof InstallTrigger !== 'undefined') {
        style.top = Number(parentStyle.getPropertyValue("border-top-width").replace("px", "")) / 2 + "px";
        style.left = Number(parentStyle.getPropertyValue("border-left-width").replace("px", "")) / 2 + "px";
        style.bottom = -Number(parentStyle.getPropertyValue("border-top-width").replace("px", "")) / 2 + "px";
        style.right = -Number(parentStyle.getPropertyValue("border-left-width").replace("px", "")) / 2 + "px";
      }
    }
    return this.mergeStyle = style;
  },
  beforeDestroy: function() {
    var ref;
    return (ref = this.parentEl) != null ? ref.removeEventListener("mousedown", this.show) : void 0;
  }
};

if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div v-bind:style=computedStyle><div style=position:absolute;pointer-events:none;transform:translate(-50%,-50%);border-radius:50%;line-height:0 v-el:ripple-div=v-el:ripple-div><svg xmlns=http://www.w3.org/2000/svg height=10 width=10 style=position:relative;opacity:0;pointer-events:none><rect x=0 y=0 width=100% height=100% v-bind:fill=gradUrl></rect></svg></div></div>"