import Vue from 'vue/dist/vue.esm' import axios from 'axios' import VRuntimeTemplate from “v-runtime-template” import matestackEventHub from '../event_hub' import componentMixin from './mixin'
const componentDef = {
mixins: [componentMixin], data: function(){ return { asyncTemplate: null, showing: true, loading: false, hideAfterTimeout: null, event: { data: {} } } }, methods: { show: function(event_data){ const self = this if (this.showing === true){ return } this.showing = true this.event.data = event_data if(this.props["defer"] != undefined){ if(!isNaN(this.props["defer"])){ this.startDefer() } } if(this.props["hide_after"] != undefined){ self.hideAfterTimeout = setTimeout(function () { self.hide() }, parseInt(this.props["hide_after"])); } }, hide: function(){ this.showing = false this.event.data = {} }, startDefer: function(){ const self = this self.loading = true; setTimeout(function () { self.rerender() }, parseInt(this.props["defer"])); }, rerender: function(){ var self = this; self.loading = true; axios({ method: "get", url: location.pathname + location.search, headers: { 'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content') }, params: { "component_key": self.props["component_key"], "component_class": self.props["parent_class"] } }) .then(function(response){ var tmp_dom_element = document.createElement('div'); tmp_dom_element.innerHTML = response['data']; var template = tmp_dom_element.querySelector('#' + self.props["component_key"]).outerHTML; self.loading = false; self.asyncTemplate = template; }) .catch(function(error){ console.log(error) matestackEventHub.$emit('async_rerender_error', { id: self.props["component_key"] }) }) } }, created: function () { const self = this self.registerEvents(this.props['show_on'], self.show) self.registerEvents(this.props['hide_on'], self.hide) self.registerEvents(this.props['rerender_on'], self.rerender) if(this.props["show_on"] != undefined){ this.showing = false } if(this.props["defer"] != undefined){ if(!isNaN(this.props["defer"])){ if (this.props["show_on"] == undefined){ this.startDefer() } } } if(this.props["init_show"] == true){ this.showing = true } }, beforeDestroy: function() { const self = this clearTimeout(self.hideAfterTimeout) self.removeEvents(this.props["show_on"], self.show) self.removeEvents(this.props["hide_on"], self.hide) self.removeEvents(this.props["rerender_on"], self.rerender) }, components: { VRuntimeTemplate: VRuntimeTemplate }
}
let component = Vue.component('matestack-ui-core-async', componentDef)
export default componentDef