Permalink
Browse files

Initial commit

First build. Nothing is really working yet.
  • Loading branch information...
1 parent 1a51e0b commit 7e6109fc9151a293728b61f6f4f8cfa4033aaff4 Jesús committed Aug 10, 2012
Showing with 246 additions and 0 deletions.
  1. +67 −0 web/editor/editor.css
  2. +18 −0 web/editor/editor.html
  3. +161 −0 web/editor/editor.js
View
@@ -0,0 +1,67 @@
+@charset "utf-8";
+/* CSS Document */
+#editor{
+ width:984px;
+ min-height:30px;
+}
+#lines{
+ width:30px;
+ float:left;
+ border:1px solid whitesmoke;
+ background:lightgreen;
+ min-height:20px;
+}
+#code{
+ width:950px;
+ float:right ;
+ border:1px solid whitesmoke;
+ min-height:20px;
+}
+pre{
+ padding:0px;
+ margin:0px;
+ margin-bottom:1px;
+ min-height:16px;
+ line-height:16px;
+}
+.numberLine {
+ text-align: center;
+ color: white;
+ font-weight: bold;
+ text-align:right;
+}
+.extraNumberLine {
+ margin-bottom: 0px;
+}
+
+
+/*Colores de syntaxis*/
+.oneLineComment, .oneLineComment * {
+ color: gray !important;
+ font-style: italic;
+ line-height: 1px;
+}
+.multiLineComment, .multiLineComment * {
+ color: gray !important;
+ font-style: italic;
+ line-height: 1px;
+}
+.doubleQuote{
+ color:blue;
+}
+.singleQuote{
+ color:blue;
+}
+.keyword{
+ color:#393;
+ font-weight: bold;
+ line-height: 1px;
+}
+.number{
+ color:red;
+}
+.function{
+ color:#006;
+ font-weight: bold;
+ line-height: 1px;
+}
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Documento sin título</title>
+<link href="editor.css" rel="stylesheet" type="text/css">
+<script type="text/javascript" src="editor.js"></script>
+</head>
+
+<body onload="loaded()">
+<div id="editor">
+ <div id="lines">
+ </div>
+ <div contentEditable="true" id="code" spellcheck="false">
+ </div>
+</div>
+</body>
+</html>
View
@@ -0,0 +1,161 @@
+// JavaScript Document
+
+function init(){
+ var code = document.getElementById('code').textContent //String con el código
+ code = code.replace(/</g,'&lt;').replace(/>/g,'&gt;') //Remplazamos las etiquetas html
+// code = '<pre class="line" id="line1">'+code+'</pre>' //Añadimos el comienzo y el final
+ /*Sustituimos todos los saltos de línea por <pre>*/
+// b=code.match(/\n/g)
+// if(b!=null){
+// b=b.length+2
+// }
+// for(a=2;a<b;a++){
+// code=code.replace('\n','</pre><pre class="line" id="line'+a+'">')
+// }
+ code = '<pre class="line">'+code+'</pre>' //Probando a eliminar id
+ code = code.replace(/\n/g,'</pre><pre class="line">') //Probando a eliminar id
+ document.getElementById('code').innerHTML = code //Insertamos el código
+
+ /*Añadimos los colores de sintaxis (Javascript)*/
+ parseLines(0,document.getElementById('code').childNodes.length,"javascript",false,false,0)
+ /*Añadimos los números de línea a la izquierda*/
+ var b=document.getElementById('code').childNodes.length+1
+ var c=""
+ var d = 16
+ var lines = document.getElementsByClassName("line")
+ for(a=1;a<b;a++){
+ c+='<pre class="numberLine" id="numberLine'+a+'">'+a+'</pre>'
+ if(parseInt(getComputedStyle(lines[a-1]).height)>d){
+ var e = parseInt(parseInt(getComputedStyle(lines[a-1]).height) / d) - 1
+ for (f=0;f<e;f++){
+ c+= '<pre class="numberLine extraNumberLine" id="extraNumberLine'+a+'"></pre>'
+ }
+ }
+ }
+ document.getElementById('lines').innerHTML=c //Insertamos el código
+}
+
+/*Function que parsea unas lineas*/
+function parseLines(from,to,language,inComment,fromNode,node){
+ /*Añadimos los colores de sintaxis (Javascript)*/
+ var exp;
+ if(language=="javascript"){
+ var exp = [new RegExp("//.*$","gm"),"oneLineComment",new RegExp('"([^\\"\n]|\\.)*"',"g"),"doubleQuote",new RegExp("'([^\\'\n]|\\.)*'","g"),"singleQuote",/\b(break|case|catch|continue|debugger|default|delete|do|else|finally|for|if|instanceof|new|return|switch|this|throw|try|typeof|var|void|while|with)\b/g
+ ,"keyword",/\b[0-9]+\b/g,"number",/\bfunction+\b/g,"function"] //Todas las expresiones RegExp para la sintaxis
+ }
+ var str = document.getElementById('code').childNodes
+ var insideComment = inComment //Variable que guarda si estás dentro de un comentario multilínea o no
+ for(a=from;a<to;a++){
+ var innerHT
+ if(fromNode==false){
+ innerHT = str[a].textContent.replace(/</g,"&lt;").replace(/>/g,"&gt;")
+ }
+ else{
+ innerHT = node.textContent.replace(/</g,"&lt;").replace(/>/g,"&gt;")
+ }
+ for(d=0;d<exp.length;d+=2){
+ var e = innerHT.match(exp[d])
+ var c = 0
+ if(e!=null){
+ for(b=0;b<e.length;b++){
+ var g = innerHT.indexOf(e[b],c)
+ c = g
+ h = innerHT.indexOf("<",g)
+ i = innerHT.indexOf(">",g)
+ if((h<i&&h!=-1)||h==i){
+ innerHT=innerHT.replace(e[b],'<span class="'+exp[d+1]+'">'+e[b]+'</span>')
+ }
+ }
+ }
+ }
+ /*Comprobamos si hay comentarios multilínea*/
+ var place = 0
+ if(insideComment==true){innerHT='<span class="multiLineComment">'+innerHT}
+ while(place!=-1){
+ if(insideComment==false){
+ place = innerHT.indexOf("/*",place)
+ if(place!=-1){
+ innerHT=innerHT.substring(0,place)+innerHT.substring(place).replace("/*",'<span class="multiLineComment">/*')
+ insideComment=true
+ }
+ }
+ if(insideComment==true){
+ place = innerHT.indexOf("*/",place)
+ if(place!=-1){
+ innerHT=innerHT.substring(0,place)+innerHT.substring(place).replace("*/",'*/</span>')
+ insideComment=false
+ }
+ }
+ }
+ if(insideComment==true){innerHT+='</span>'}
+ if(fromNode==false){
+ str[a].innerHTML=innerHT
+ }
+ else{
+ node.innerHTML=innerHT
+ }
+ }
+}
+
+/*Parsea la línea que está siendo editada*/
+function edited(){ //Ejecuta cuando cambia el contentEditable
+ /*Cuenta el número de carácteres hasta el cursor para poder volver a colocarlo más tarde*/
+ var lineNode = window.getSelection().focusNode //lineNode es la línea que se ha modificado
+ var offsetCharts = window.getSelection().anchorOffset
+ while(lineNode.id==undefined||lineNode.className.indexOf("line")==-1){
+ for(f=0;f<lineNode.parentNode.childNodes.length;f++){
+ if(lineNode.parentNode.childNodes[f]==lineNode){
+ break;
+ }
+ else{
+ offsetCharts+=lineNode.parentNode.childNodes[f].textContent.length
+ }
+ }
+ lineNode = lineNode.parentNode
+ }
+
+ /*Hace el syntaxhighlithing de la línea*/
+ lineNumber=lineNode.id.replace("line","")
+ var inComment = false
+ if(lineNode.innerHTML.indexOf('<span class="multiLineComment">')==0){
+ inComment = true
+ }
+ parseLines(0,1,"javascript",inComment,true,lineNode)
+
+ /*Recoloca el cursor*/
+ var actualOffset = 0
+ var actualNode = lineNode
+ var finalOffset;
+ var g=0
+ while(g<=actualNode.childNodes.length){
+ if(g==actualNode.childNodes.length){
+ actualNode=actualNode.lastChild
+ while(actualNode.childNodes.length!=0){
+ actualNode=actualNode.lastChild
+ }
+ finalOffset = actualNode.textContent.length
+ break;
+ }
+ if(actualNode.childNodes[g].textContent.length + actualOffset > offsetCharts){
+ actualNode = actualNode.childNodes[g]
+ g=0
+ if(actualNode.childNodes.length==0){
+ finalOffset = offsetCharts - actualOffset
+ break;
+ }
+ }
+ else{
+ actualOffset+=actualNode.childNodes[g].textContent.length
+ g++
+ }
+ }
+ range = document.createRange();
+ range.setStart(actualNode,finalOffset)
+ var selection = window.getSelection();//get the selection object (allows you to change selection)
+ selection.removeAllRanges();//remove any selections already made
+ selection.addRange(range);//make the range you have just created the visible selection
+}
+
+function loaded(){
+ document.getElementById('code').addEventListener("keyup",edited,false) //Provisional
+}

0 comments on commit 7e6109f

Please sign in to comment.