vue-comps-waves/gradient-store-component.js

svg based waves effect

module.exports = {
  data: function() {
    return {
      colors: {},
      map: {}
    };
  },
  el: function() {
    return document.createElement("div");
  },
  compiled: function() {
    return this.$appendTo('body');
  },
  beforeDestroy: function() {
    return this.$remove();
  },
  methods: {
    getHash: function(str) {
      var chr, hash, i, len;
      hash = 0;
      for (i = 0, len = str.length; i < len; i++) {
        chr = str[i];
        chr = chr.charCodeAt();
        hash = ((hash << 5) - hash) + chr;
        hash |= 0;
      }
      if (hash < 0) {
        hash = -hash;
      }
      return hash;
    },
    getId: function(color) {
      var colorName, hash;
      colorName = color.replace("#", "hash");
      if (this.map[colorName]) {
        return this.map[colorName];
      }
      hash = "h" + this.getHash(color);
      this.$set("colors." + hash, color);
      this.map[colorName] = hash;
      return hash;
    }
  }
};

if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<svg xmlns=http://www.w3.org/2000/svg style=position:absolute;opacity:0;visibility:hidden;pointer-events:none;top:0;width:0;height:0><defs><radialGradient v-bind:id=hash cx=50% cy=50% r=75% v-for=\"(hash,color) in colors\"><stop offset=0% style=stop-opacity:0.2 v-bind:style={stopColor:color}></stop><stop offset=40% style=stop-opacity:0.3 v-bind:style={stopColor:color}></stop><stop offset=50% style=stop-opacity:0.4 v-bind:style={stopColor:color}></stop><stop offset=60% style=stop-opacity:0.5 v-bind:style={stopColor:color}></stop><stop offset=70% style=stop-color:rgb(255,255,255);stop-opacity:0></stop></radialGradient></defs></svg>"