vue-pushpin/pushpin.js

a simple pushpin

module.exports = {
  mixins: [require("vue-mixins/onWindowScroll"), require("vue-mixins/getDocumentHeight"), require("vue-mixins/style")],
  props: {
    style: {
      "default": function() {
        return [];
      }
    },
    top: {
      type: Number,
      "default": 0,
      coerce: Number
    },
    offset: {
      type: Number,
      "default": 0,
      coerce: Number
    },
    bottom: {
      type: Number,
      "default": 0,
      coerce: Number
    }
  },
  data: function() {
    return {
      mergeStyle: {}
    };
  },
  methods: {
    calc: function() {
      var body, docEl, height, scrollTop;
      body = document.body;
      docEl = document.documentElement;
      scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
      if (this.bottom) {
        height = this.getDocumentHeight();
      }
      if (scrollTop + this.offset < this.top) {
        return this.mergeStyle = {
          top: this.top + "px",
          position: "absolute"
        };
      } else if (this.bottom && scrollTop + this.offset > height - this.bottom) {
        return this.mergeStyle = {
          top: height - this.bottom + "px",
          position: "absolute"
        };
      } else if (this.mergeStyle.position !== "fixed") {
        return this.mergeStyle = {
          top: this.offset + "px",
          position: "fixed"
        };
      }
    }
  },
  compiled: function() {
    return this.onWindowScroll(this.calc);
  },
  attached: function() {
    return this.calc();
  }
};

if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "<div v-bind:style=computedStyle><slot></slot></div>"