import Vue from 'vue/dist/vue.esm' import VRuntimeTemplate from “v-runtime-template” import matestackEventHub from '../event_hub' import componentMixin from './mixin'
const componentDef = {
mixins: [componentMixin], props: { initialTemplate: String, }, data: function(){ return { cableTemplate: null, cableTemplateDomElement: null, loading: false, event: { data: {} } } }, methods: { append: function(payload){ var html = this.formatPayload(payload) this.cableTemplateDomElement.insertAdjacentHTML( 'beforeend', html.join('') ) this.updateCableTemplate() }, prepend: function(payload){ var html = this.formatPayload(payload) this.cableTemplateDomElement.insertAdjacentHTML( 'afterbegin', html.join('') ) this.updateCableTemplate() }, delete: function(payload){ var ids = this.formatPayload(payload) ids.forEach(id => this.cableTemplateDomElement.querySelector('#' + id).remove() ) this.updateCableTemplate() }, update: function(payload){ const self = this var html = this.formatPayload(payload) html.forEach(function(elem){ var dom_elem = document.createElement('div') dom_elem.innerHTML = elem.replace(/^\s+|\s+$/g, '') var id = dom_elem.firstChild.id var old_elem = self.cableTemplateDomElement.querySelector('#' + id) old_elem.parentNode.replaceChild(dom_elem.firstChild, old_elem) }) this.updateCableTemplate() }, replace: function(payload){ var html = this.formatPayload(payload) this.cableTemplateDomElement.innerHTML = html.join('') this.updateCableTemplate() }, updateCableTemplate: function(){ this.cableTemplate = this.cableTemplateDomElement.outerHTML }, formatPayload: function(payload){ if(!Array.isArray(payload.data)){ return [payload.data] } return payload.data }, }, mounted: function() { const self = this var dom_elem = document.createElement('div') dom_elem.innerHTML = this.initialTemplate this.cableTemplateDomElement = dom_elem.querySelector("#" + this.props["id"]) this.cableTemplate = this.cableTemplateDomElement.outerHTML this.registerEvents(this.props['append_on'], self.append) this.registerEvents(this.props['prepend_on'], self.prepend) this.registerEvents(this.props['delete_on'], self.delete) this.registerEvents(this.props['update_on'], self.update) this.registerEvents(this.props['replace_on'], self.replace) }, beforeDestroy: function() { const self = this this.cableTemplate = null this.removeEvents(this.props['append_on'], self.append) this.removeEvents(this.props['prepend_on'], self.prepend) this.removeEvents(this.props['delete_on'], self.delete) this.removeEvents(this.props['update_on'], self.update) this.removeEvents(this.props['replace_on'], self.replace) }, components: { VRuntimeTemplate: VRuntimeTemplate }
}
let component = Vue.component('matestack-ui-core-cable', componentDef)
export default componentDef