Ti Vídeo Tutoriais: IDE para JavaScript

Atenção onde encontrar ".textarea", "./textarea" e os "BRs" que foram utilizados para facilitar a publicação do código.

<br />
<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 />
 <.textarea id="codigo_inicial"  style="display:none;"><br />
x=0;<br />
Play = function()<br />
{<br />
 document.getElementById("id_elements").style.setProperty("left", x+"px") ;<br />
 x += 1; <br />
 if( x  > 500 ) x  = 0;<br />
} <br />
 <./textarea><br />
</body> <br />
<br />
<script>

//================================================================================
/*
function accept_tab(e)
fonte: http://stackoverflow.com/questions/6140632/how-to-handle-tab-in-textarea
by user: http://stackoverflow.com/users/1456875/alexwells
*/
function accept_tab(e) 
{
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

var target = e.target;
        var value = target.value;

// set textarea value to: text before caret + tab + text after caret
        target.value = value.substring(0, start)
                    + "\t"
                    + value.substring(end);

// put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

// prevent the focus lose
        e.preventDefault();
    }
}

//================================================================================
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 = "130px" ;
 iDiv.style.height = "130px";
 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.padding = "6px 6px 6px 6px";
 iDiv.style.position = "absolute";
 iDiv.style.left = "1000px" ;
 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 = "40";
 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);
}

var requestAnimationFrame = window.requestAnimationFrame || 
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || 
    window.msRequestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;

var myReq=null;
var Play = function(){}
var Movie = function(timestamp)
{ 
 myReq = requestAnimationFrame(Movie); 
 Play();
}

//================================================================================
function create_window_source()
{
 var iDiv = document.createElement("div");
 iDiv.id = "id_codigo"; 
 iDiv.name = "name_codigo"; 
 iDiv.style.margin = "0px 0px 0px 0px";
 iDiv.style.padding = "6px 6px 6px 6px";
 iDiv.style.position = "absolute";
 iDiv.style.left = "200px" ;
 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.id="txt_codigo"
 input.spellcheck=false
 input.scrollTop = input.scrollHeight;
 input.value = document.getElementById("codigo_inicial").value;

input.addEventListener('keydown',accept_tab,false);

var button_stop = document.createElement("button");
 button_stop.innerHTML ="Stop"
 button_stop.onclick = function()
 {
  window.cancelAnimationFrame(myReq);
 }

var button_play = document.createElement("button");
 button_play.innerHTML ="Play"
 
 button_play.onclick = function()
 {
  window.cancelAnimationFrame(myReq); 
  eval(document.getElementById("txt_codigo").value )
  myReq = requestAnimationFrame(Movie);  
 }

input.id = "txt_codigo"; 
 input.width = "100%";
 input.cols = "90";
 input.rows = "20";

var iDiv2 = document.createElement("div");
 iDiv2.id = "id_codigo2"; 
 var text = document.createTextNode("Código"); 
 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); 
 
 makeDraggable(iDiv2, iDiv);
 iDiv.appendChild(button_play);
 iDiv.appendChild(button_stop);
}

//================================================================================
create_window_elements();
create_window_properties();
create_window_source();

showProperties(document.getElementById("id_elements"))

</script>

sábado, 2 de janeiro de 2016

IDE para JavaScript - Estilo Flash II

Nenhum comentário: