template.js

var worker = new Worker("worker.js");
worker.postMessage(
        {
            id:1,
            msg:'Hello World'
        }
);
worker.onmessage=function(message){
    var data = message.data;
    document.write(data.msg);
	//worker.terminate();
    
};
worker.onerror=function(error){
    console.log(error.filename,error.lineno,error.message);
}



//Template system
var commonarea = document.getElementById('commonarea');
var input = document.getElementById('input');
var output = document.getElementById('output');
var varArray = [];

input.addEventListener('change',parse,false);

function generatorCases() {
    var propsvalue = extractor();
    output.value = generator(input.value,propsvalue);
}

function parse(e) {
    varArray = []; // story variant fileds ['{{A%12}}', '{{B%10}}',...]
    var template = e.target.value;
    var regex = /{{[a-zA-Z0-9%]*}}/g;
    var m = template.match(regex);    
    m.forEach( function (match){
        varArray.push(match);
    });
    setTimeout(formator,0);
    
}

function formator() {

    if (!document.getElementById('inputcont')) {
        var inputcont = document.createElement('div');
        inputcont.id = 'inputcont';
        commonarea.appendChild(inputcont);

    } else {
        
        var inputcont = document.getElementById('inputcont');
        inputcont.innerHTML='';
    }

    for (var i=0;varArray.length>i;i++) {
        //'{{var1%10}}'.split => [,var1%10,].join('') => 'var1%10'
        var name = varArray[i].split(/{{|}}/g).join('')
        var textarea = document.createElement('textarea');
        var nameandlength = name.split('%');
        textarea.placeholder = name;
        textarea.id = name;
        textarea.cols = nameandlength[1];
        textarea.className += 'propsvalue';
        inputcont.appendChild(textarea);
    }
}

function extractor () {
    /*extract values into array, then rotate; 
    */
    var textareas = document.getElementsByClassName('propsvalue');
    //1,2,..n textareas
    var propsvalue = [];
    var result = [];
    for (var i = 0;textareas.length > i; i++) {
        propsvalue.push(textareas[i].value.split('\n'));

    }
  
    for (var i = 0; propsvalue[0].length > i; i++) {
        
        var temp = [];
        for (var j = 0; propsvalue.length > j; j++) {
            
            temp.push(propsvalue[j][i]);
            
        }
        result.push(temp);
    }

    return result;
}


function generator (templateinit,propsvalue) {
    //this to generate output according to template and value
    var outputs = '';
    //var propsvalue = extractor();
    var result = '';
    for (var k = 0 ; propsvalue.length > k; k ++) {
        var template  = templateinit;
        for (var i = 0; varArray.length > i ; i++) {
            var regx = new RegExp(varArray[i],'g');
            //'{{var1%10}}'.split => [,var1%10,].join('') => 'var1%10'.split('%') => [var1,10]
            var explength = varArray[i].split(/{{|}}/g).join('').split('%')[1];            
            template = template.replace(regx, fixLength(explength, propsvalue[k][i]) || '');
        }
      
        result += template ; 
        if (propsvalue.length > (k + 1)) {
            result += '\n';
        }
        
    }

    //output.value = result;
    return result;
}

function fixLength(len, value) {
    var valuelength = typeof value != 'undefined' ? value.length : 0 ;
    if (len > valuelength ) {
        value +=  (new Array(len - valuelength + 1)).join(' '); 
    } else {
        value = value.slice(0,len);
  
    }
    return value;
}