Ti Vídeo Tutoriais: IDE para javaScript estilo Flash

Continuando IDE para javaScript estilo Flash - Parte IV

<br />
<br />
<br />
<script>
//========================================================================================
// Autor: Luiz Augusto S. Prado - 2015
// Site: www.codigorapido.com.br
// javaScript: creador javaScript e css - Estilo Flash - para Firefox
//========================================================================================
       Selector = function()
        { 
            if (window.getSelection) 
            {
                return window.getSelection();
            }

else if (document.getSelection)
            {
                return document.getSelection();
            }  
        }

createRange = function (cell)
        {
            var rng=null;
            if(cell.createRange) 
            {
                rng=cell.createRange();
            } 
            else if(cell.getRangeAt) 
            {
                rng=cell.getRangeAt(0);
                if(rng.toString()=="") rng=null;
            }
            return rng;
        }

getTextNodesIn = function (node) 
        {  
            var textNodes = [];
            if (node!=undefined && node.nodeType !=undefined && node.nodeType == Node.TEXT_NODE ) 
            {
                textNodes.push(node); 
            }
            else 
            {
                var children = node.childNodes;
                for (var i = 0, len = children.length; i < len; ++i) 
                {
                    textNodes = textNodes.concat( getTextNodesIn(children[i]) );
                }
            }

return textNodes;
        }

getCursorPosition = function (div) 
        { 
            var se = Selector ();  
            var range = se.getRangeAt(0);   
            textNodes = getTextNodesIn(div);
            countChar=0;
            for (var i = 0; i<textNodes.length; i++ ) 
            { 
                if ( range.startContainer==textNodes[i] ) 
                {
                    return countChar+range.startOffset 
                }  
                countChar += textNodes[i].textContent.length
            } 
            return null;
        }

getStartContainer = function (div) 
        {
            var se = Selector ();
            var range = se.getRangeAt(0);   
            textNodes = getTextNodesIn(div); 
            return range.startContainer;
        }

getSelectionPosition = function (div) 
        { 
            var se = Selector ();  
            var range = se.getRangeAt(0);   
            textNodes = getTextNodesIn(div); 
            endCharCount = 0;
            Int=null
            end=null
            for (var i = 0; i<textNodes.length; i++ ) 
            { 
                if ( range.startContainer==textNodes[i] ) 
                {
                    Int = endCharCount+range.startOffset
                }

if ( range.endContainer==textNodes[i] ) 
                {
                    end = endCharCount+range.endOffset
                    break;
                } 
                endCharCount += textNodes[i].textContent.length
            }  
            return [Int, end];
        }

setSelectionPosition = function (div, start, end) 
        {
            range = createRange(document);
            range.selectNodeContents(div);
            var foundStart = false;
            var charCount=0;
            textNodes = getTextNodesIn(div);
            var aa=0
            var bb=0
            for (var i = 0; i<textNodes.length; i++ ) 
            {   
                velhoCount = charCount;
                charCount += textNodes[i].textContent.length 
                if (!foundStart && velhoCount <= start && start <= charCount   ) 
                { 
                    aa = textNodes[i].textContent.length  - (charCount - start );
                    range.setStart(textNodes[i], aa );
                    foundStart = true;
                }

if (foundStart && end <= charCount) 
                { 
                    bb = textNodes[i].textContent.length - (charCount - end) ;
                    range.setEnd(textNodes[i], bb );
                    break;
                }

}
            var sel = Selector();
            sel.removeAllRanges();
            sel.addRange(range);
            div.focus();
        }

setCursorPosition = function (div, position) 
        { 
            range = createRange(document);
            range.selectNodeContents(div);
            var charCount = 0
            var endCharCount;
            textNodes = getTextNodesIn(div);
            for (var i = 0; i<textNodes.length; i++ ) 
            {
                textNode = textNodes[i];
                endCharCount = charCount + textNode.length;
                if (position >= charCount && position <= endCharCount ) 
                {
                    range.setStart(textNode, position - charCount);
                    range.setEnd(textNode, position - charCount);
                    range.collapse(false);
                    break;
                } 
                charCount = endCharCount;
            }
            var sel = Selector();
            sel.removeAllRanges();
            sel.addRange(range);
            div.focus();
        }

function replaceAll(str, find, replace) 
 {
    return str.replace(new RegExp(find, 'g'), replace);
 }

function replaceAllR(str, find) 
 {
  var res = str.match(find);
  for(i=0; res!=null && i<res.length; i++)
    str = str.replace(new RegExp(res[i], 'gi'), "<span style='color:green'>"+res[i]+"</span>");
  return str;
 }

function setStyle(tag, atributo, valor)
 {
     tag.style[atributo] = valor;
 }

var position;
 function press(event) 
 {
                position = getCursorPosition (this) 
  if (event.keyCode == 13) 
  {
                 event.preventDefault();  
  }
 }

function up(event) 
 {
                position = getCursorPosition (this) 
  //document.getElementById("pos").innerHTML = position ;
  if (event.keyCode == 13)
  {
   this.innerHTML = "<span>"+replaceColor( this.textContent.substring(0, position) + "\n"+ this.textContent.substring( position, this.textContent.length) )+"</span>" 
                 setCursorPosition (this, position+1)
  }
  else
  {
   this.innerHTML = "<span>"+replaceColor( this.textContent )+"</span>" 
                 setCursorPosition (this, position)
  }
 }

//================================================================================
/*
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)
{ 
 lasted_touch = 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] + " = " + iDiv.style[styles[i]]+ "\n"; // 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 = document.getElementById(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 visibleProperties() 
{
 var e = document.getElementById("properties_hidden");
 var te = document.getElementById("title_properties");
 if(e.style.display == 'none')
 {
  e.style.display = 'block';
  te.style.display = 'block';
 }
 else
 {
  e.style.display = 'none';
  te.style.display = 'none';
 }
}

function visibleCamadas() 
{
 var e = document.getElementById("camadas_hidden");
 if(e.style.display == 'none')
 {
  e.style.display = 'inline-block';
 }
 else
 {
  e.style.display = 'none';
 }
}

function visibleCenario() 
{
 var table_cenario = document.getElementById("table_cenario");
 var table_codigo  = document.getElementById("table_codigo");

function visibleCodigo() 
{
 var table_cenario = document.getElementById("table_cenario");
 var table_codigo  = document.getElementById("table_codigo");

//================================================================================
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_cenario()
{
 var input = document.createElement("div");
 input.id     = "cenario"; 
  input.style.width    = "100%"; 
 input.style.height   = "100%"; 
 input.style.backgroundColor = "#ffffff";

document.getElementById("div_cenario").appendChild(input);

var button_propriedades = document.createElement("button");
 button_propriedades.innerHTML ="Propriedades do Cenário" 
 button_propriedades.onclick = function()
 {
  document.getElementById("txt_codigo").innerHTML=""    
  document.getElementById("txt_codigo").style.display="none"; 
  document.getElementById("save_source").disabled = true;
  showProperties(document.getElementById("cenario"))
 }
 document.getElementById("btns_cenario").appendChild(button_propriedades);
}

function create_window_properties()
{
 var input = document.createElement("textarea");
 input.id = "txt_attributes"; 
  input.style.width    = "100%"; 
 input.style.height   = "100%"; 
 input.style.fontFamily = "Lucida Console"
 input.style.fontSize = 11;
 input.style.backgroundColor="#ffffff"
 input.spellcheck=false  
 input.contentEditable    = true;
 input.innerHTML      = " " ; 
 document.getElementById("properties").appendChild(input);

var button = document.createElement("button");
 button.innerHTML ="Salvar"
 button.onclick = function()
 {
  changeProperties(document.getElementById("txt_attributes").value)
 }
 document.getElementById("btns_properties").appendChild(button); 
}

function create_window_source()
{
 var input = document.createElement("div");
 input.id = "txt_codigo" 
 input.style.left     = "0px"; 
 input.style.top      = "0px";

input.style.whiteSpace   = "pre";
 input.style.fontFamily = "Lucida Console"
 input.style.fontSize = 14;
 input.style.backgroundColor="#ffffff"
 input.spellcheck=false  
 input.contentEditable    = true;

input.onkeypress      = press; 
 input.onkeyup      = up;
 input.onclick      = up;

input.innerHTML = replaceColor( document.getElementById("codigo_inicial").value ) 
 input.addEventListener('keydown',accept_tab,false);

document.getElementById("codigo").appendChild(input);

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

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

document.getElementById("btns_source").appendChild(button_play);
 document.getElementById("btns_source").appendChild(button_stop);
 */

var button_salvar = document.createElement("button");
 button_salvar.id = "save_source"
 button_salvar.innerHTML ="Salvar" 
        button_salvar.disabled = true;
 button_salvar.onclick = function()
 {
  lasted_touch.saveSource( document.getElementById("txt_codigo").textContent )
 }
 document.getElementById("btns_source").appendChild(button_salvar);
}

function create_frame_title(txt)
{
 //alert(txt)
 var frame  = document.createElement("div");
 frame.style.position = "relative";
 frame.style.backgroundColor = "#ddeeff"
 frame.style.border = "1px solid #aabbcc"

frame.style.borderTopWidth = "0px"
 frame.style.borderRight = "0px"
 frame.style.borderLeft = "0px"

frame.style.width = "250px"; 
 frame.style.height = "20px"; 
 frame.style.float = "left"; 
 frame.innerHTML = "   "+txt+":   "
 return frame;
}

function create_frame(txt)
{
 var frame  = document.createElement("div");
 frame.id=txt
 frame.style.backgroundColor = "#ffffff"
 frame.style.border = "1px solid #aabbcc"
 frame.style.borderTopWidth = "0px"
 frame.style.borderRight = "0px"
 frame.style.position = "relative";
  frame.style.width = "10px"; 
 frame.style.height = "20px"; 
 frame.style.float = "left"; 
 frame.style.opacity = 0.99;
 //frame.style.userSelect = "none"
 frame.style.MozUserSelect = "none";

frame.txtContent = "";

frame.onclick = function()
 { 
  var input = document.getElementById("txt_codigo")
  input.style.display="block"; 
   input.style.width = "100%"; 
  input.style.height = "100%"; 
  input.innerHTML = ""+replaceColor( this.txtContent )+"" 
  document.getElementById("save_source").disabled = false;
  showProperties(this)  
 }

frame.saveSource = function(data)
 {
  this.txtContent = data; 
  if(data != "" )
  {
   this.innerHTML = "●"
  }
  else
  {
   this.innerHTML = ""
  }
 }

return frame;
}

function create_camada(txt)
{
 var camada_layout  = document.createElement("div");
 camada_layout.style.backgroundColor = "#ddeeff"
 camada_layout.style.border = "1px solid #aabbcc"
  camada_layout.style.width = "100%"; 
 camada_layout.style.borderTopWidth = "0px"
 camada_layout.style.borderRight = "0px"
 camada_layout.style.borderLeft = "0px"
 camada_layout.style.display = "inline-block"; 
 camada_layout.style.height = "20px"; 
 camada_layout.id=txt;
 var frame_title = create_frame_title(txt)
 camada_layout.appendChild(frame_title );

camada_layout.createFrames = function(quantidade_frames)
 {
  for(i=0; i<quantidade_frames; i++)
  {
   var frame = create_frame(txt+ "_"+i)
   camada_layout.appendChild(frame);
  }
   camada_layout.style.width = quantidade_frames*11+252; 
 }

return camada_layout;
}

function create_window_camadas()
{
 var input  = document.createElement("div");
 input.id   = "txt_camadas"  
 input.style.display = "inline-block"; 
 input.style.left = "0px"; 
 input.style.top  = "0px"; 
  input.style.width = "100%"; 
 input.style.height = "100%"; 
 input.style.backgroundColor ="#ffffff" 
 input.contentEditable = false; 
 document.getElementById("camadas").appendChild(input);

numero_frames = 100;
 var array_camadas = new Array()
 for(var i=1; i<=2; i++)
 { 
  var camada = create_camada("camada_" + i)
  array_camadas.push("camada_" + i)
  camada.createFrames(numero_frames)
  input.appendChild( camada ); 
  //alert(array_camadas[i-1])
 }
 
 var title = document.createElement("div");
 title.innerHTML = "    Número de Frames:   "
 title.style.float = "left"
 document.getElementById("btns_camadas").appendChild( title );

var txt_fames = document.createElement("input"); 
 txt_fames.value = numero_frames
 document.getElementById("btns_camadas").appendChild(txt_fames);

var button_atualizar = document.createElement("button");
 button_atualizar.innerHTML ="Atualizar"  
 button_atualizar.onclick = function()
 {
  alert(input.childNodes.length)
 }
 document.getElementById("btns_camadas").appendChild(button_atualizar); 
}

//================================================================================
</script>
<body style="margin:1px 1px 1px 1px;">

<.textarea id="codigo_inicial"  style="display:none;">
x=0;
Play = function()
{
 document.getElementById("id_elements").style.setProperty("left", x+"px") ;
 x += 1; 
 if( x  > 500 ) x  = 0;
}
<./textarea>

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
  <td colspan="3" style="background-color:#ddeeff;">   
   botões
  </td>
 </tr>
<tr>
  <td colspan="3" style="background-color:#ddeeff;"  >
   <table width="100%" border="0" cellspacing="1" cellpadding="0" >
<tr><td height="10" style="bottom:0px; background-color:#ddeeff; border:1px solid #aabbcc;">
      Camadas<div onclick="visibleCamadas()" style="width:10px; height:10px; float: right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div></td></tr>
<tr><td id="table_camadas"> 
    <div id="camadas_hidden" style="width:100%; background-color:#ddeeff; margin:0px 0px 0px 0px;" >
     <table  border="0" cellspacing="1" cellpadding="0" style=" width:100%; height:220px;">
<tr>
      <td style="width:100%; height:220px; margin:0px 0px 0px 0px; position:relative; background-color:#ffffff; border:1px solid #aabbcc;" >
      <div id="camadas" style="position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:scroll;" >
 </div></td>
     </tr>
<tr><td ><div id="btns_camadas" display:inline-block; >
</div></td></tr>
</table></div></td></tr>
</table></td>
 </tr>
<tr>
  <td height="100%">
   <table width="100%" height="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
   <td  style="bottom:0px; background-color:#ddeeff;border:1px solid #aabbcc;">  
   <div id="title_elements" style="float:left;">
  Elementos</div><div onclick="visibleElements()" style="width:10px; height:10px; float:right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div></td></tr>
<tr><td height="100%" style="background-color:#ddeeff;padding:2px 2px 0px 0px;">

<td height="100%" width="100%" style="bottom:0px;">
   <table width="100%" height="100%" border="0" cellspacing="1" cellpadding="0">
<tr><td height="10" style="bottom:0px; background-color:#ddeeff; border:1px solid #aabbcc; margin:0px 0px 0px 0px;">
      Cenário<div onclick="visibleCenario()" style="width:10px; height:10px; float: right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div></td></tr>
<tr><td id="table_cenario" style="height:0%; background-color:#ddeeff; padding:0px 2px 0px 0px;"> 
    <div id="cenario_hidden" style="width:100%; height:100%; display:none;  background-color:#ddeeff; margin:0px 0px 0px 0px;" >
     <table  border="0" cellspacing="1" cellpadding="0" style="width:100%; height:100%;">
<tr><td style="margin:0px 0px 0px 0px; position:relative; height:100%; background-color:#ffffff; border:1px solid #aabbcc;" >
     <div id="div_cenario" style="position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:scroll;" >
 </div></td></tr>
<tr><td ><div id="btns_cenario" >
</div></td></tr>
</table></div></td></tr>
<tr><td height="10" style="bottom:0px; background-color:#ddeeff; border:1px solid #aabbcc;">
      Código<div onclick="visibleCodigo()" style="width:10px; height:10px; float: right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div></td></tr>
<tr><td id="table_codigo" style="height:100%; "> 
    <div id="codigo_hidden" style="width:100%; height:100%;  background-color:#ddeeff; margin:0px 0px 0px 0px;" >
     <table  border="0" cellspacing="1" cellpadding="0" style="width:100%; height:100%;">
<tr><td style="margin:0px 0px 0px 0px; position:relative; height:100%; background-color:#ffffff; border:1px solid #aabbcc;" >
     <div id="codigo" style="position:absolute; left:0; top:0; width:100%; height:100%; overflow-y:scroll;" >
 </div></td></tr>
<tr><td ><div id="btns_source" >
</div></td></tr>
</table></div></td></tr>
</table></td>

<td height="100%" style=" bottom:0px; ">
   <table height="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
   <td  style=" bottom:0px; background-color:#ddeeff;border:1px solid #aabbcc;">  
   <div id="title_properties" style="float:left;">
  Propriedades</div><div onclick="visibleProperties()" style="width:10px; height:10px; float:right; color:#ffffff; background-color:#ffaaaa; margin:3px 3px 3px 3px; border:1px solid #000000;">
</div></td></tr>
<tr><td style="height:100%; background-color:#ddeeff; margin:0px 0px 0px 0px;">
    <div id="properties_hidden" style=" height:100%; background-color:#ddeeff; margin:0px 0px 0px 0px; display:block; " >
     <table border="0" cellspacing="1" cellpadding="0" style="width:300px; height:100%; ">
<tr><td style="margin:0px 0px 0px 0px; position:relative; height:100%;  background-color:#ffffff; border:1px solid #aabbcc;" >
     <div id="properties" style="position:absolute; left:0; top:0; width:300px; height:100%; " >
</div></td></tr>
<tr><td ><div id="btns_properties" >
</div></td></tr>
</table></div></td></tr>
</table></td>
 </tr>
</table></body>
<script>
create_window_camadas()
create_window_source()
create_window_properties()
create_window_cenario()
</script><br />
<br />

sexta-feira, 15 de janeiro de 2016

IDE para javaScript estilo Flash - Parte IV

Nenhum comentário: