Vue - CS3 Renderer

by Ben Clayton

HTML

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

<hr>
<div id="my-app">
  <holo-csv-editor></holo-csv-editor>
</div>
<hr>

<script id="vue-tmpl-csv-editor" type="text/x-template">
	EDITOR
</script>
<script id="vue-tmpl-cell-editor" type="text/x-template">
  <div>XXXXX</div>
</script>

CSS

body {
	    font-size: 0;
}

.text {
	font-size: 24px;
}

JavaScript

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

Vue.component('holo-csv-editor', {
  template: "#vue-tmpl-csv-editor",
  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></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...