Ti Vídeo Tutoriais: IDE para JavaScript

Combinando os conhecimentos dos típicos:

IDE para JavaScript - Estilo Flash II:
http://tivideotutoriais.blogspot.com.br/2016/01/ide-para-javascript-estilo-flash-ii.html
Colorindo um código fonte em uma DIV editável - javaScript:
http://tivideotutoriais.blogspot.com.br/2016/01/colorindo-um-codigo-fonte-em-uma-div.html
HTMLEDitor em JavaScript:
http://tivideotutoriais.blogspot.com.br/2013/07/htmleditor-em-javascript.html

Temos o resultado:

//================================================================================
       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; i<res.length; i++)
 str = str.replace(new RegExp(res[i], 'gi'), ""+res[i]+"");
 return str;
 }

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

var position;
 press = function (event) 
 {
 position = getCursorPosition (this) 
 if (event.keyCode == 13) 
 {
 event.preventDefault(); 
 this.innerHTML = ""+replaceColor( this.textContent.substring(0, position) + "\n"+ this.textContent.substring( position, this.textContent.length) )+"" 
 setCursorPosition (this, position+1)
 }
 }

up = function (event) 
 {
 position = getCursorPosition (this) 
 document.getElementById("pos").innerHTML = position ;
 if (event.keyCode == 13){}
 else
 {
 this.innerHTML = ""+replaceColor( this.textContent )+"" 
 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)
{ 
 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";
 input.style.fontFamily = "Lucida Console"
 input.style.fontSize = 14;

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 = "20px";
 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("div"); 
 input.id = "txt_codigo"; 
 input.style.whiteSpace = "pre";
 input.style.position = "relative";
 input.style.border = "1px solid #000000"; 
 input.style.left = "0px"; 
 input.style.top = "0px"; 
 input.style.width = "750px"; 
 input.style.height = "350px"; 
 input.style.fontFamily = "Lucida Console"
 input.style.fontSize = 14;
 input.style.resize = "both"; 
 input.style.overflow = "auto";
 input.style.overflow = "auto";
 input.style.backgroundColor="#ffffff"
 input.scrollTop = input.scrollHeight;
 input.spellcheck=false 
 input.contentEditable = true;
 input.onkeypress = press; 
 input.onkeyup = up;
 input.onclick = up;
 input.innerHTML = document.getElementById("codigo_inicial").value ; 
 input.innerHTML = ""+replaceColor( input.textContent )+""
 input.addEventListener('keydown',accept_tab,false);
 //input.value = document.getElementById("codigo_inicial").value;
 //input.cols = "90";
 //input.rows = "20";

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").textContent )
  myReq = requestAnimationFrame(Movie);  
 }

var iDiv2 = document.createElement("div");
 var text = document.createTextNode("Código"); 
 iDiv2.appendChild(text); 
 iDiv.appendChild(iDiv2);

iDiv.appendChild(input); 
 
 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>

domingo, 3 de janeiro de 2016

IDE para JavaScript - Estilo Flash III

Nenhum comentário: