var scripts=[ // array of loose code
[ // this is for the dragging
[0,0],
],
[ // array of blocks in first script
[150,40], // location
{tag:'blk'},
{tag:'attr',val:'val'},
{tag:'blk'},
{tag:'txt',val:'text'},
{tag:'cblk',blocks:[ // array of blocks inside c
{tag:'blk'},
{tag:'empc',blocks:[
{tag:'txt',val:'Hi attribute!'},
{tag:'attr',val:'Hello text node!'},
{tag:'attr',val:'bubbles notice me!'},
{tag:'blk'}
]},
{tag:'attr',val:'val'}
]},
{tag:'attr',val:'val'},
{tag:'empc',blocks:[]}
]
],
colors={
txtb:'333333',
text:'BD806A',
frmt:'9B6ABD',
orgn:'6A92BC',
frms:'6ABC88',
mdia:'BC6AA1',
tble:'6AB6BC',
attr:'BDB16A',
othr:'818181',
},
blocks={
blk:{label:'block',color:'mdia',type:'block'},
attr:{label:'attr',color:'attr',type:'attr'},
txt:{label:'',color:'txtb',type:'text'},
cblk:{label:'c block',color:'text',type:'c'},
empc:{label:'empty c',color:'orgn',type:'c'},
PLACEHOLDER:{type:'PLACEHOLDER'},
};
function shadeColor(color,percent) { // http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
var f=parseInt(color,16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
return (0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}
function loadPalette() {
var str='';
for (var block in blocks) {
switch (blocks[block].type) {
case 'block':
str+="
"+blocks[block].label+"
";
break;
case 'attr':
str+="
"+blocks[block].label+"
";
break;
case 'text':
str+="";
break;
case 'c':
str+="
"+blocks[block].label+"
";
break;
}
}
document.querySelector('#palette').innerHTML=str;
}
loadPalette();
function render(script,data) {
var str='',data;
if (data) data+='-'
else data='';
for (var i=0;i";
break;
case 'block':
str+="
"+blocks[script[i].tag].label+"
";
break;
case 'attr':
str+="
"+blocks[script[i].tag].label+"
";
break;
case 'text':
str+="";
break;
case 'c':
str+="
"+blocks[script[i].tag].label+"
";
if (script[i].blocks.length>0) str+=render(script[i].blocks,data+i);
str+="
";
break;
}
}
return str;
}
function renderAll() {
var str='';
for (var i=1;i"+render(scripts[i].slice(1),i)+''
}
document.querySelector('#scripts').innerHTML=str;
}
renderAll();
function fitVal(elm,textarea) {
var textarea;
var clone=document.createElement('span');
clone.className='getTextLength';
clone.innerHTML=elm.value.replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"').replace(/(?:\r\n|\r|\n)/g,' ');
clone.style.font=document.defaultView.getComputedStyle(elm).font;
document.body.appendChild(clone);
elm.style.width=(clone.offsetWidth+5)+'px';
if (textarea) elm.style.height=(clone.offsetHeight)+'px';
document.body.removeChild(clone);
}
function fit(elm) {
var elms=elm.querySelectorAll('.attr input');
for (var i=0;iNumber(x));
if (scriptlevel.length<2) return scripts[scriptlevel[0]];
var tempScript=scripts[scriptlevel[0]][scriptlevel[1]+1];
for (var i=2;iNumber(x)),tempScript=scripts[levels[0]][levels[1]+1];
if (levels.length<2) return scripts[levels[0]];
for (var i=2;iNumber(x));
drag.type=blocks[drag.script[0].tag].type;
if (drag.levels.length>2) drag.siblings=identify(drag.levels.slice(0,-1),'getThis').blocks;
else drag.siblings=scripts[drag.levels[0]].slice(1);
if (drag.type=='attr') {
var i=drag.levels[drag.levels.length-1]+1;
while (i1) console.warn("THERE SHOULD ONLY BE ONE OF YOU.");
for (var i=0;iNumber(x));
if (levels.length>2) identify(levels.slice(0,-1),'getThis').blocks.splice(levels[levels.length-1],1);
else identify(levels.slice(0,-1),'getThis').splice(levels[levels.length-1]+1,1);
}
renderAll();
fit(document);
}
var newarea=document.elementFromPoint(e.clientX,e.clientY);
if (newarea&&newarea.id!='scripts'&&newarea.className!='script'&&!newarea.dataset.tag&&!newarea.parentNode.dataset.tag) {
if (['UL','SPAN','INPUT'].includes(newarea.tagName)) newarea=newarea.parentNode;
if (newarea.className=='PLACEHOLDER') console.warn("SHOULDN'T YOU BE GONE BY NOW?!");
if (drag.type=='attr') {
//
} else {
try {
var newareaLevels=newarea.dataset.script.split('-').map(x=>Number(x)),
newareaScript=identify(newareaLevels,'getThis'),
newareaParent=identify(newareaLevels.slice(0,-1),'getThis');
if (newareaLevels.length>2) newareaParent=newareaParent.blocks;
if (newareaScript.blocks) {
if (!document.querySelector('.PLACEHOLDER')) {
newareaScript.blocks.push({tag:'PLACEHOLDER'});
}
} else {
newareaLevels[newareaLevels.length-1]=newareaLevels[newareaLevels.length-1]+1;
if (newareaLevels.length<=2) newareaLevels[newareaLevels.length-1]++;
var nextBlock=newareaParent[newareaLevels[newareaLevels.length-1]];
while (nextBlock&&blocks[nextBlock.tag].type=='attr') {
newareaLevels[newareaLevels.length-1]++;
nextBlock=newareaParent[newareaLevels[newareaLevels.length-1]];
}
newareaParent.splice(newareaLevels[newareaLevels.length-1],0,{tag:'PLACEHOLDER'});
}
} catch (e) {
console.log(newarea);
console.log(newareaLevels);
console.log(newareaScript);
console.log(newareaParent);
console.log(e);
}
}
}
document.querySelector('#drag').style.display='block';
renderAll();
fit(document);
}
};
document.body.onmouseup=function(e){
if (drag.officiallyDragging) {
if (document.querySelector('.PLACEHOLDER')) {
var all=document.querySelectorAll('.PLACEHOLDER');
for (var i=0;iNumber(x)),blockz;
if (levels.length>2) blockz=identify(levels.slice(0,-1),'getThis').blocks;
else blockz=identify(levels.slice(0,-1),'getThis');
blockz.splice(levels[levels.length-1]+1,1);
for (var j=drag.script.length-1;j>=0;j--) blockz.splice(levels[levels.length-1]+1,0,drag.script[j]);
}
} else {
drag.script.splice(0,0,[e.clientX-drag.offsetMX,e.clientY-drag.offsetMY]);
scripts.push(drag.script);
}
renderAll();
fit(document);
}
if (drag) {
scripts[0]=[[0,0]];
drag={};
document.querySelector('#drag').innerHTML='';
document.querySelector('#drag').style.width='auto';
}
};