Vue PageEditor v2

by Ben Clayton

HTML

<div id="p">

</div>

CSS

body {
  padding: 20px;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.selected h1,
.selected h2,
.selected h3,
.selected h4,
.selected h5,
.selected h6,
.selected div
{
  background-color: rgba(128,128,255,0.5);
}

TypeScript

globalrawdata={
	type:"MultiColFrame",
  content:[
  	{
    	type:"MultiColItem",
      content:[
      	{
        	type:"Heading",
          text:"Hello",
          importance:"h1"
        },
        {
        	type:"Heading",
          text:"There",
          importance:"h3"
        }
      ]
    },
    {
    	type:"MultiColItem",
      content:[
      	{
        	type:"Heading",
          text:"World"
        },
      	{
        	type:"FormInput",
          text:"initial text"
        }
      ]
    }
  ]
};

abstract class Base {
	idx;
	template = `<div>Block type={{type}}</div>`;
  type = "Base";
  view;
  selected=false;
  
  init(rawdata,idx,vcfg){
  
  	vcfg = vcfg || {};
  	const context = this;
  	this.idx = idx;
    this.data = rawdata;
    this.type = rawdata.type;
    this.applyDefaults(rawdata);
    
    vcfg.methods = vcfg.methods || {};
    vcfg.methods.getContent = function(){
        var html='';
        for(var i=0; i < context.data.content.length; i++){
          html += '<div id="' + (context.idx+'-'+i) + '">('+i+')</div>';
        }
        return html;
    };

		// temp here as super is duff in jsfiddle
    vcfg.methods.is = function(imp){
        return imp == this.data.importance
    };
   	vcfg.methods.select = function(e){
    		//e.cancelBubble=true;
        this.selected = ! this.selected;
    };

    
    vcfg.mounted = function(){
    	// Vue mounted phase, now instanciate new Vue instances on the content items
      context.populate();
    };
		vcfg.el = "#" + idx;   
    vcfg.template = this.template;
    vcfg.data = context;
    
    this.view = new Vue(vcfg);
  
  }
  applyDefaults(rawdata){
  	for (var p in this.defaults){
    	if (typeof rawdata[p] === 'undefined' ){
        Vue.set(rawdata, p, this.defaults[p])
      }
    }
  }
  
  populate(){
    if ( this.data.content ){
      for(var i=0; i < this.data.content.length; i++){
        blockFactory.load(this.data.content[i],this.idx+'-'+i);
      }
    }
  }
}

class Heading...