Ti Vídeo Tutoriais: IDE para JavaScript

sábado, 2 de janeiro de 2016

IDE para JavaScript - Estilo Flash?

Ideia para Criar IDE para JavaScript - Estilo Flash

<br />
<script>
//========================================================================================
// Autor: Luiz Augusto S. Prado - 2015
// Site: www.codigorapido.com.br
// javaScript: creador javaScript e css - Estilo Flash - para Firefox
//========================================================================================
</script><br />
<br />
<body style="font-family:Lucida Console;"> <br />
</body> <br />
<br />
<script>
var lasted_touch;
function change_level(el)
{
 if(lasted_touch!=undefined)
 {
  if(parseInt(lasted_touch.style.zIndex) == parseInt(el.style.zIndex) ) lasted_touch.style.zIndex = parseInt(lasted_touch.style.zIndex)+1
  if( parseInt(lasted_touch.style.zIndex)<-10000 || parseInt(lasted_touch.style.zIndex)>10000) lasted_touch.style.zIndex=0
  temp = parseInt(lasted_touch.style.zIndex)
  lasted_touch.style.zIndex = parseInt(el.style.zIndex)
  el.style.zIndex = temp;
 }
 lasted_touch = el
}

/*
makeDraggable
fonte: http://stackoverflow.com/questions/1685326/responding-to-the-onmousemove-event-outside-of-the-browser-window-in-ie
user: http://stackoverflow.com/users/45433/crescent-fresh*/
function makeDraggable(element, parent) 
{
 element.onmousedown = function(event) 
 {
  x = -50;
  y = -10;
  change_level(parent)
  document.onmousemove = function(event) 
  {
   event = event || window.event;
   if(event.clientX+x<0) parent.style.left = 0 + x + 'px';
   else parent.style.left = event.clientX + x + 'px';
   if(event.clientY<0) parent.style.top = 0 +y + 'px';
   else parent.style.top = event.clientY +y+ 'px';
  };
  document.onmouseup = function() 
  {
   document.onmousemove = null;
   if(element.releaseCapture) { element.releaseCapture(); }
  };
  if(element.setCapture) { element.setCapture(); }
 };
 element.unselectable = "on";
 element.onselectstart = function(){return false};
 element.style.userSelect = element.style.MozUserSelect = "none";
}

function showProperties(iDiv)
{ 
 dados="";
 dados +="id = " + iDiv.id + "\n";
 dados += "name = " + iDiv.name + "\n";
 styles = iDiv.style;
 style = window.getComputedStyle(iDiv)
 for(i=0; i<styles.length; i++)
 {
  dados+= styles[i] + " = " +style.getPropertyValue(styles[i]) + "\n";
 }
 document.getElementById("txt_attributes").value=dados;
}

function changeProperties(data)
{
 result = ""; 
 r = data.split("\n");

r[0] = r[0].replace(/^\s+|\s+$/g,'')
 id = r[0].split("="); 
 id[0] = id[0].replace(/^\s+|\s+$/g,'')
 id[1] = id[1].replace(/^\s+|\s+$/g,'')
 lasted_touch.id = id[1]

r[1] = r[1].replace(/^\s+|\s+$/g,'')
 id = r[1].split("="); 
 id[0] = id[0].replace(/^\s+|\s+$/g,'')
 id[1] = id[1].replace(/^\s+|\s+$/g,'')
 lasted_touch.name = id[1]

for(i=2; i<r.length; i++)
 {
  r[i] = r[i].replace(/^\s+|\s+$/g,'')
  var r2 = r[i].split("=");

var att = r2[0].replace(/^\s+|\s+$/g,'') +": "+ r2[1].replace(/^\s+|\s+$/g,'')+";" 
  //alert( att )
  //document.getElementById(lasted_touch.id).setAttribute("style", att );
  if(r2[0].replace(/^\s+|\s+$/g,'')!="")
  document.getElementById(lasted_touch.id).style.setProperty( r2[0].replace(/^\s+|\s+$/g,''), r2[1].replace(/^\s+|\s+$/g,'') );
 } 
}

function create_window_elements()
{
 var iDiv = document.createElement("div");
 iDiv.style.zIndex = "1"
 iDiv.id = "id_elements"; 
 iDiv.name = "name_elements"; 
 iDiv.style.margin = "0px 0px 0px 0px";
 iDiv.style.padding = "10px 10px 10px 10px";
 iDiv.style.position = "absolute";
 iDiv.style.left = "10px" ;
 iDiv.style.top = "10px";
 iDiv.style.width = "430px" ;
 iDiv.style.height = "330px";
 iDiv.style.color = "#000000";
 iDiv.style.backgroundColor = "#dddddd";
 iDiv.style.border = "thin solid #aaaaaa";
 iDiv.style.borderRadius = "15px"
 var text = document.createTextNode(" Arraste"); 
 iDiv.appendChild(text);

document.getElementsByTagName('body')[0].appendChild(iDiv);

iDiv.onclick = function()
 {
  showProperties(this)
 }
 makeDraggable(iDiv, iDiv);
}

function create_window_properties()
{
 var iDiv = document.createElement("div");
 iDiv.id = "id_properties"; 
 iDiv.name = "name_properties"; 
 iDiv.style.margin = "0px 0px 0px 0px";
 iDiv.style.position = "absolute";
 iDiv.style.left = "500px" ;
 iDiv.style.top = "100px";
 iDiv.style.color = "#000000";
 iDiv.style.backgroundColor = "#dddddd";
 iDiv.style.border = "thin solid #aaaaaa";
 iDiv.style.zIndex = "2"

iDiv.style.marginTop = "10px";

document.getElementsByTagName('body')[0].appendChild(iDiv);

var input = document.createElement("textarea"); 
 input.spellcheck=false
 input.scrollTop = input.scrollHeight;
 var button = document.createElement("button");
 button.innerHTML ="Salvar"
 button.onclick = function()
 {
  changeProperties(input.value)
 }

input.id = "txt_attributes"; 
 input.width = "100%";
 input.cols = "80";
 input.rows = "20";

var iDiv2 = document.createElement("div");
 var text = document.createTextNode("Propriedades"); 
 iDiv2.appendChild(text); 
 iDiv.appendChild(iDiv2);

var br = document.createElement('br');
 iDiv2.appendChild(br); 
 iDiv.appendChild(input); 
 var br = document.createElement('br');
 iDiv.appendChild(br); 
 iDiv.appendChild(button);
 
 makeDraggable(iDiv2, iDiv);
}

create_window_elements();
create_window_properties();
</script>

Nenhum comentário:

Postar um comentário