vue-blotter/dist/vue-blotter.ssr.js

A Blotter.js Vue component

'use strict';Object.defineProperty(exports,'__esModule',{value:true});/* global Blotter */
function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; }
var script = {
  name: "VueBlotter",
  props: {
    // Controls
    autoplay: {
      type: Boolean,
      default: true
    },
    checkInViewport: {
      type: Boolean,
      default: true
    },
    // Text
    text: {
      type: String,
      default: "Blotter"
    },
    family: {
      type: String,
      default: "serif"
    },
    size: {
      type: Number,
      default: 120
    },
    fill: {
      type: String,
      default: "#171717"
    },
    textStyle: {
      type: String,
      default: "normal"
    },
    weight: {
      type: Number,
      default: 400
    },
    padding: {
      type: Number,
      default: 0
    },
    paddingTop: {
      type: Number,
      default: 0
    },
    paddingRight: {
      type: Number,
      default: 0
    },
    paddingBottom: {
      type: Number,
      default: 0
    },
    paddingLeft: {
      type: Number,
      default: 0
    },
    // Material
    materialType: {
      type: String,
      required: true,
    },
    uniforms: {
      type: Object,
      default: function () {}
    }
  },
  data: function () { return ({
    blotter: {},
    scope: {},
    intersecting: null
  }); },
  mounted: function mounted() {
    // Instantiate global instance of Blotter class
    this.initBlotter();
    
    if (this.checkInViewport) {
      this.checkIntersection();
    }
  },
  beforeDestroy: function beforeDestroy() {
    // Stop updating the blotter instance if component is destroyed
    this.blotter.stop();
  },
  watch: {
    intersecting: function intersecting(value) {
      if (value) {
        this.scope.play();
      } else {
        this.scope.pause();
      }
    }
  },
  methods: {
    initBlotter: function initBlotter() {
      if (!this.materialType) {
        throw new Error('Material type prop is required. Refer to https://github.com/arapl3y/vue-blotter#configuration-options')
      }

      // Set text values according to props
      var text = this.setBlotterText({
        text: this.text,
        family: this.family,
        size: this.size,
        fill: this.fill,
        textStyle: this.textStyle,
        weight: this.weight,
        padding: this.padding,
        paddingTop: this.paddingTop,
        paddingRight: this.paddingRight,
        paddingBottom: this.paddingBottom,
        paddingLeft: this.paddingLeft
      });

      // Set material according to props
      var material = this.setBlotterMaterial(this.materialType);

      // Check if uniforms object exist and contains properties
      if (this.uniforms && Object.keys(this.uniforms).length !== 0) {
        this.setBlotterUniforms(material, this.uniforms);
      }

      // Init blotter and insert into root DOM node as canvas element
      this.blotter = this.renderBlotter(material, text);

      this.setBlotterScope(this.blotter, text, this.$el);
    },
    setBlotterText: function setBlotterText(ref) {
      var text = ref.text;
      var textStyle = ref.textStyle;
      var rest = objectWithoutProperties( ref, ["text", "textStyle"] );
      var args = rest;

      return new Blotter.Text(text, Object.assign({}, {style: textStyle},
        args));
    },
    setBlotterMaterial: function setBlotterMaterial(type) {
      return new Blotter[type]();
    },
    setBlotterUniforms: function setBlotterUniforms(material, uniforms) {
      for (var key in uniforms) {
        material.uniforms[key].value = uniforms[key];
      }
    },
    renderBlotter: function renderBlotter(material, text) {
      return new Blotter(material, {
        autoplay: this.autoplay,
        texts: text
      });
    },
    setBlotterScope: function setBlotterScope(blotter, text, el) {
      this.scope = blotter.forText(text);
      // Append to slot element
      this.scope.appendTo(el);
    },
    pause: function pause(scope) {
      scope.pause();
    },
    play: function play(scope) {
      scope.play();
    },
    checkIntersection: function checkIntersection() {
      var this$1 = this;

      var observer = new IntersectionObserver(
        function (entries) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              this$1.intersecting = true;
            } else {
              this$1.intersecting = false;
            }
          });
        },
        { threshold: 0.3 }
      );

      observer.observe(this.$el);
    }
  },
  render: function render() {
    return this.$scopedSlots.default({
      blotterScope: this.scope,
      intersecting: this.intersecting
    });
  }
};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
  if (typeof shadowMode !== 'boolean') {
    createInjectorSSR = createInjector;
    createInjector = shadowMode;
    shadowMode = false;
  } // Vue.extend constructor export interop.


  var options = typeof script === 'function' ? script.options : script; // render functions

  if (template && template.render) {
    options.render = template.render;
    options.staticRenderFns = template.staticRenderFns;
    options._compiled = true; // functional template

    if (isFunctionalTemplate) {
      options.functional = true;
    }
  } // scopedId


  if (scopeId) {
    options._scopeId = scopeId;
  }

  var hook;

  if (moduleIdentifier) {
    // server build
    hook = function hook(context) {
      // 2.3 injection
      context = context || // cached call
      this.$vnode && this.$vnode.ssrContext || // stateful
      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
      // 2.2 with runInNewContext: true

      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__;
      } // inject component styles


      if (style) {
        style.call(this, createInjectorSSR(context));
      } // register component module identifier for async chunk inference


      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier);
      }
    }; // used by ssr in case component is cached and beforeCreate
    // never gets called


    options._ssrRegister = hook;
  } else if (style) {
    hook = shadowMode ? function () {
      style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
    } : function (context) {
      style.call(this, createInjector(context));
    };
  }

  if (hook) {
    if (options.functional) {
      // register for functional component in vue file
      var originalRender = options.render;

      options.render = function renderWithStyleInjection(h, context) {
        hook.call(context);
        return originalRender(h, context);
      };
    } else {
      // inject component registration as beforeCreate hook
      var existing = options.beforeCreate;
      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
    }
  }

  return script;
}

var normalizeComponent_1 = normalizeComponent;/* script */
var __vue_script__ = script;

/* template */

  /* style */
  var __vue_inject_styles__ = undefined;
  /* scoped */
  var __vue_scope_id__ = undefined;
  /* module identifier */
  var __vue_module_identifier__ = "data-v-2359dfbf";
  /* functional template */
  var __vue_is_functional_template__ = undefined;
  /* style inject */
  
  /* style inject SSR */
  

  
  var component = normalizeComponent_1(
    {},
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    undefined,
    undefined
  );// Import vue component

// install function executed by Vue.use()
function install(Vue) {
  if (install.installed) { return; }
  install.installed = true;
  Vue.component('VueBlotter', component);
}

// Create module definition for Vue.use()
var plugin = {
  install: install,
};

// To auto-install when vue is found
/* global window global */
var GlobalVue = null;
if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
  GlobalVue = global.Vue;
}
if (GlobalVue) {
  GlobalVue.use(plugin);
}

// Inject install function into component - allows component
// to be registered via Vue.use() as well as Vue.component()
component.install = install;

// It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = component;
exports.default=component;