Vue - render any holo component

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>

<div style="border:1px solid red;">
Header
</div>

<div id="cs3-content">

	<holo-newpicture v-bind:properties='{picture:"http://holograph.digital/infxpageedit/img/default.gif"}'></holo-newpicture>

</div>


<hr>










<script id="vue-tmpl-contentwrapper" type="text/x-template">
    <holo-block v-bind:properties="properties.content"></holo-block>
</script>

<script id="vue-tmpl-multicol-frame" type="text/x-template">
  <div>
		<holo-multicol-column v-for="(blk, index) in properties.content" v-bind:colstyle="colstyle[index]" v-bind:properties="blk"></holo-multicol-column>
</div>
</script>


<script id="vue-tmpl-multicol-column" type="text/x-template">
  <div v-bind:style="colstyle">
    <holo-block v-bind:properties="properties.content"></holo-block>
  </div>
</script>

<script id="vue-tmpl-htmlheading" type="text/x-template">
    {{ /* this is a heading */ }}
   	<h1 v-if=" properties.importance == 'h1' " class="text">{{ properties.myedit_html }}</h1>
   	<h2 v-if=" properties.importance == 'h2' " class="text">{{ properties.myedit_html }}</h2>
   	<h3 v-if=" properties.importance == 'h3' " class="text">{{ properties.myedit_html }}</h3>
   	<h4 v-if=" properties.importance == 'h4' " class="text">{{ properties.myedit_html }}</h4>
   	<h5 v-if=" properties.importance == 'h5' " class="text">{{ properties.myedit_html }}</h5>
   	<h6 v-if=" properties.importance == 'h6' " class="text">{{ properties.myedit_html }}</h6>
</script>


<script id="vue-tmpl-htmltext" type="text/x-template">
  <div class="text">
   	{{ properties.myedit_html }}
  </div>
</script>

<script id="vue-tmpl-newpicture" type="text/x-template">
	 <img v-bind:src="properties.picture" v-bind:style="{ width: '100%'}"/>
</script>

CSS

body {
	    font-size: 0;
}

.text {
	font-size: 24px;
}

JavaScript

//---------------------------------------------------------

Vue.component('cs3-article', {
  template: "#vue-tmpl-article",
  props: ['properties'],
  created: function () {
  	//console.log("article properties:",this.properties);
  }
});

//---------------------------------------------------------

Vue.component('holo-block', {
  template: "#vue-tmpl-block",
  props: ['properties'],
  methods: {
		isArray : function () {
    	return (typeof this.properties.length != 'undefined')
    }
  },
  created: function () {
  	//console.log("properties:",this.properties);
  }
});


//---------------------------------------------------------
Vue.component('holo-contentwrapper', {
  template: "#vue-tmpl-contentwrapper",
  props: ['properties'],
  created: function () {
  	//console.log("contentwrapper:",this.properties);
  }
});

//---------------------------------------------------------
Vue.component('holo-multicol-frame', {
  template: "#vue-tmpl-multicol-frame",
  props: ['properties'],
  data: function() {
    return { colstyle: [] }
  },
  methods: {
		calcFormat: function(pc,px){
			var str = "calc(" + Number.parseFloat(pc).toFixed(2) + "%";
			// ensure you have a space either side of operator, or else DOM will not accept the style string property 'width'
			str += px < 0 ? " - " : " + ";
			str += Math.abs(px) + "px)";
			return str;
		}
  },
  created: function () {
  	console.log("multicol frame properties:",this.properties);
    var tcw=0;
    // number of visible columns
    var cols = this.properties.content.length;
		var colgap = parseInt(this.properties.colgap,10);
    var halfgap = colgap / 2;
		var outermargins = parseInt(this.properties.outermargins,10);

		// calculate total grid units
    this.properties.content.forEach(function (col){
        tcw += parseInt(col.colwidth,10);
    });
    var gpc = 100 / tcw;
		
    var tm = tcw * colgap - (outermargins ? 0 : colgap);
    // i=0 for no outermargins. For outermargins push i out of range of left and...