@diracleo/vue-enlargeable-image/dist/vue-enlargeable-image.ssr.js

A Vue component that, when clicked, will enlarge an image from thumbnail to full version using a smooth animation.

'use strict';Object.defineProperty(exports,'__esModule',{value:true});//
//
//
//
var script = {
  name: 'EnlargeableImage',
  props: {
    src: {
      type: String
    },
    src_large: {
      type: String
    },
    animation_duration: {
      type: String,
      default: "700"
    },
    trigger: {
      type: String,
      default: "click"
    }
  },
  data: function data() {
    return {
      state: this.state,
      styles: this.styles
    };
  },
  methods: {
    init: function init() {
      var self = this;
      self.state = "delarged";
      self.delay = 50;
      self.adjust_top = 0;
      self.wait = false;
      var transition_seconds = parseInt(self.$props.animation_duration) / 1000;

      if (transition_seconds == 0) {
        self.delay = 0;
      }

      transition_seconds = transition_seconds.toFixed(2);
      self.transition_value = "width " + transition_seconds + "s, height " + transition_seconds + "s, top " + transition_seconds + "s, left " + transition_seconds + "s, background-color " + transition_seconds + "s";
      self.styles = {
        transition: self.transition_value
      };

      if (self.$props.trigger == "hover") {
        self.styles.pointerEvents = "none";
      }
    },
    enlarge: function enlarge() {
      var self = this;
      var rect = self.$refs.slot.getBoundingClientRect();
      self.styles = {
        position: "fixed",
        left: Math.round(rect.left) + "px",
        top: Math.round(rect.top + self.adjust_top) + "px",
        width: Math.round(rect.right - rect.left) + "px",
        height: Math.round(rect.bottom - rect.top) + "px",
        backgroundImage: "url(" + self.$props.src + ")",
        transition: self.transition_value
      };

      if (self.$props.trigger == "hover") {
        self.styles.pointerEvents = "none";
      }

      self.state = "enlarging";

      if (typeof self.timer != 'undefined') {
        clearTimeout(self.timer);
      }

      self.timer = setTimeout(function () {
        self.$emit('enlarging');
        self.styles = {
          backgroundImage: "url(" + self.$props.src + ")",
          transition: self.transition_value
        };

        if (self.$props.trigger == "hover") {
          self.styles.pointerEvents = "none";
        }

        if (typeof self.timer != 'undefined') {
          clearTimeout(self.timer);
        }

        self.timer = setTimeout(function () {
          self.state = "enlarged";
          self.$emit('enlarged');
        }, self.$props.animation_duration);
      }, self.delay);
    },
    reset: function reset() {
      var self = this;

      if (self.state != "delarging") {
        var rect = self.$refs.slot.getBoundingClientRect();

        if (typeof self.timer != 'undefined') {
          clearTimeout(self.timer);
        }

        self.timer = setTimeout(function () {
          self.state = "delarging";
          self.$emit('delarging');
          self.styles = {
            backgroundImage: "url(" + self.$props.src + ")",
            position: "fixed",
            left: Math.round(rect.left) + "px",
            top: Math.round(rect.top + self.adjust_top) + "px",
            width: Math.round(rect.right - rect.left) + "px",
            height: Math.round(rect.bottom - rect.top) + "px",
            transition: self.transition_value
          };

          if (self.$props.trigger == "hover") {
            self.styles.pointerEvents = "none";
          }

          if (typeof self.timer != 'undefined') {
            clearTimeout(self.timer);
          }

          self.timer = setTimeout(function () {
            self.state = "delarged";
            self.$emit('delarged');
          }, self.$props.animation_duration);
        }, 0);
      } else {
        self.enlarge();
      }
    }
  },
  mounted: function mounted() {
    var self = this;
    self.init();
  }
};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.
    const 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;
    }
    let hook;
    if (moduleIdentifier) {
        // server build
        hook = function (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 (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            const originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            const existing = options.beforeCreate;
            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
    }
    return script;
}function createInjectorSSR(context) {
    if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
        context = __VUE_SSR_CONTEXT__;
    }
    if (!context)
        return () => { };
    if (!('styles' in context)) {
        context._styles = context._styles || {};
        Object.defineProperty(context, 'styles', {
            enumerable: true,
            get: () => context._renderStyles(context._styles)
        });
        context._renderStyles = context._renderStyles || renderStyles;
    }
    return (id, style) => addStyle(id, style, context);
}
function addStyle(id, css, context) {
    const group =  css.media || 'default' ;
    const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
    if (!style.ids.includes(id)) {
        style.media = css.media;
        style.ids.push(id);
        let code = css.source;
        style.css += code + '\n';
    }
}
function renderStyles(styles) {
    let css = '';
    for (const key in styles) {
        const style = styles[key];
        css +=
            '<style data-vue-ssr-id="' +
                Array.from(style.ids).join(' ') +
                '"' +
                (style.media ? ' media="' + style.media + '"' : '') +
                '>' +
                style.css +
                '</style>';
    }
    return css;
}/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    class: {
      'enlargeable-image': true,
      active: _vm.state != 'delarged'
    }
  }, [_vm._ssrNode("<div class=\"slot\" data-v-74c9692d>", "</div>", [_vm._t("default", [_c('img', {
    staticClass: "default",
    attrs: {
      "src": this.$props.src
    }
  })])], 2), _vm._ssrNode(" <div" + _vm._ssrClass("full", _vm.state) + _vm._ssrStyle(null, _vm.styles, null) + " data-v-74c9692d>" + (_vm.state != 'enlarged' ? "<img" + _vm._ssrAttr("src", this.$props.src) + " data-v-74c9692d>" : "<!---->") + " " + (_vm.state == 'enlarged' ? "<img" + _vm._ssrAttr("src", this.$props.src_large) + " data-v-74c9692d>" : "<!---->") + "</div>")], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
  if (!inject) return;
  inject("data-v-74c9692d_0", {
    source: ".enlargeable-image>.slot[data-v-74c9692d]{display:inline-block;max-width:100%;max-height:100%;cursor:zoom-in}.enlargeable-image>.slot>img.default[data-v-74c9692d]{max-width:100%;vertical-align:middle}.enlargeable-image.active>.slot[data-v-74c9692d]{opacity:.3;filter:grayscale(100%)}.enlargeable-image .full[data-v-74c9692d]{cursor:zoom-out;background-color:transparent;align-items:center;justify-content:center;background-position:center center;background-repeat:no-repeat;background-size:contain;display:none}.enlargeable-image .full>img[data-v-74c9692d]{object-fit:contain;width:100%;height:100%}.enlargeable-image .full.enlarging[data-v-74c9692d]{display:flex;position:fixed;left:0;top:0;width:100%;height:100%;background-color:transparent;cursor:zoom-out;z-index:3}.enlargeable-image .full.enlarged[data-v-74c9692d]{display:flex;position:fixed;left:0;top:0;width:100%;height:100%;background-color:transparent;cursor:zoom-out;z-index:2}.enlargeable-image .full.delarging[data-v-74c9692d]{display:flex;position:fixed;left:0;top:0;width:100%;height:100%;background-color:transparent;cursor:zoom-in;z-index:1}",
    map: undefined,
    media: undefined
  });
};
/* scoped */


var __vue_scope_id__ = "data-v-74c9692d";
/* module identifier */

var __vue_module_identifier__ = "data-v-74c9692d";
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, createInjectorSSR, undefined);// Import vue component

var install = function installVueEnlargeableImage(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component('VueEnlargeableImage', __vue_component__);
}; // Create module definition for Vue.use()


var plugin = {
  install: install
}; // To auto-install on non-es builds, when vue is found
// eslint-disable-next-line no-redeclare

/* 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()


__vue_component__.install = install; // Export component by default
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = component;
exports.default=__vue_component__;