Practica 9

FileFunctions.js

function remplazar(){
remplazarUna( document.getElementById("textarea").value, document.getElementById("findWorld").value, document.getElementById("replaceWorld").value);

}


function remplazarUna(text, busca, reemplaza ){
text = text.toString().replace(busca,reemplaza);
//return text;
document.getElementById("textarea").value = text;
}

function remplazarTodo(){
/*var texto = document.getElementById("textarea").value;
var palabraBuscar = document.getElementById("findWorld").value;
var palabraCambiar = document.getElementById("replaceWorld").value;*/

replaceAll( document.getElementById("textarea").value, document.getElementById("findWorld").value, document.getElementById("replaceWorld").value);

}

function replaceAll( text, busca, reemplaza ){
while (text.toString().indexOf(busca) != -1)
text = text.toString().replace(busca,reemplaza);
//return text;
document.getElementById("textarea").value = text;
}

//------------------------------------------------------------------------------

function getCaret(el) { 
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 
    var r = document.selection.createRange(); 
    if (r == null) return 0; 
    var re = el.createTextRange(), 
        rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 
    var add_newlines = 0;
    for (var i=0; i<rc.text.length; i++)
      if (rc.text.substr(i, 2) == '\r\n') {
        add_newlines += 2;
        i++;
      }
    return rc.text.length - add_newlines; 
  }
  return 0; 
};

function heading() {
  var heading_text = document.getElementById('heading-text');
  var heading_size = document.getElementById('heading-size');
  var textarea = document.getElementById('textarea');
  var cursor = getCaret(textarea);
  var text = textarea.value;
  var text = text.substring(0,cursor)+'<H'+heading_size.value+'>'+
             heading_text.value+'</H'+heading_size.value+'>'+
             text.substring(cursor,text.length);
  textarea.value = text;
};

function itemList() {
  var orderText = document.getElementById('item-organize');
  var itemsText = document.getElementById('item-text');
  var textarea = document.getElementById('textarea');
  var cursor = getCaret(textarea);
  var text = textarea.value;
  
  var elements = itemsText.value.split("*");
  var x=1;
  if(orderText.value == 'OL')
  {
	text = text + "<ol>";
	while(x < elements.length)
	{
		text= text+"<li>"+elements[x]+"</li>";
		x++;
	}
	text= text + "</ol>";
	textarea.value = text;
  }
  else
  {
	text = text + "<ul>";
	while(x < elements.length)
	{
		text= text+"<li>"+elements[x]+"</li>";
		x++;
	}
	text= text + "</ul>";
	var regX = /\r\n|\r|\n/g;
	var text2 = text.replace(regX , " ");
	textarea.value = text2;
  }
  
  
};

function newfile() {
  //air.trace("Ejecutando newfile..");
  document.getElementById("textarea").value = '';
};
function openfile() {
  //air.trace("Ejecutando openfile..");
  var file = air.File.documentsDirectory;
  var filters = new Array();
  filters.push(new air.FileFilter("HTML Files","*.html"));
  file.browseForOpen(file,filters);
  file.addEventListener(air.Event.SELECT,function() {
    //air.trace("Cargando archivo..");
    var fileStream = new air.FileStream(); 
    fileStream.open(file, air.FileMode.READ); 
    var content = fileStream.readUTFBytes(fileStream.bytesAvailable);
    document.getElementById("textarea").value = content;
    update();
  });
};
function savefile() {
  //air.trace("Ejecutando openfile..");
  var file = air.File.documentsDirectory;
  var filters = new Array();
  filters.push(new air.FileFilter("HTML Files","*.html"));
  file.browseForSave("Select file");
  file.addEventListener(air.Event.SELECT,function() {
    //air.trace("Guardando archivo..");
    var fileStream = new air.FileStream();
    var textarea =  document.getElementById("textarea");
    fileStream.open(file, air.FileMode.WRITE);
    fileStream.writeMultiByte(textarea.value, "utf-8");
    fileStream.close();
  });
};
function exit() {
  window.nativeWindow.close();
};
function update() {
 var textarea = document.getElementById("textarea");
 var view = document.getElementById("view");
 if ((typeof textarea === "undefined") ||
     (typeof view === "undefined")) return;
 else view.innerHTML = textarea.value;
};
var timer = setInterval("update();", 120);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tiny HTML Editor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
  <style type="text/css">
  body { padding-top: 55px;padding-bottom:0px; }
  #view { height: 500px; overflow: scroll; }
 .modal-backdrop{ background-color:#EEEEEE}
 .modal-backdrop,.modal-backdrop.fade.in {opacity: 0.3;}
 body .modal { width: 40%; left: 10%; top:10%;
	margin: auto auto auto auto; 
 }
 body .modal.fade.in { top: auto; }
</style>
  <script src="AIRAliases.js" type="text/javascript"></script>
  <script src="FileFunctions.js" type="text/javascript"></script>
  <script src="jquery-latest.js" type="text/javascript"></script>
  <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <ul class="nav" role="navigation">
      <li class="dropdown">
        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> File</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li><a tabindex="-1" href="#" onClick="newfile();">
              <i class="icon-file"></i> New</a></li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#" onClick="openfile();">
              <i class="icon-folder-open"></i> Open</a></li>
            <li><a tabindex="-1" href="#" onClick="savefile();">
              <i class="icon-download-alt"></i> Save</a></li>
            <li class="divider"></li>
            <li><a tabindex="-1" href="#" onClick="exit();">
              <i class="icon-remove"></i> Exit</a></li>
        </ul>
       </li>
      <li class="dropdown">
        <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
            <li><a tabindex="-1" href="#myModal2" data-toggle="modal" >
              <i class="icon-file"></i> Replace</a></li>
            <li><a tabindex="-1" href="#myModal" data-toggle="modal" >
              <i class="icon-file"></i> Replace All</a></li>
        </ul>
      	
      </li>
      <li class="dropdown">
  <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> Text</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
    <li><a tabindex="-1" href="#myModal3" data-toggle="modal">
      <i class="icon-tasks"></i> Headings</a>
    </li>
	<li><a tabindex="-1" href="#myModal4" data-toggle="modal">
      <i class="icon-tasks"></i> List</a>
    </li>
  </ul>
</li>
      <li class=""><a href="#">View</a></li>
      <li class=""><a href="#">Search</a></li>
    </ul>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
      <textarea id="textarea" rows="24" class="span12"></textarea>
    </div>
    <div id="view" class="span6 well"></div>
  </div>
</div>

<!--- Seccion del Modal2 --->
<div class="modal hide" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="myModalLabel">Search | Replace</h3>
  </div>
  <div class="modal-body">
    <label>Find: </label> <input type="text" id="findWorld"  value="word here"/>
  
    <label>Replace: </label> <input type="text" id="replaceWorld"  value="word here"/>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" data-dismiss="modal" onClick="remplazar();">Replace</button>
  </div>
</div>



<!--- Seccion del Modal --->
<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="myModalLabel">Search | Replace All</h3>
  </div>
  <div class="modal-body">
    <label>Find: </label> <input type="text" id="findWorld"  value="word here"/>
  
    <label>Replace: </label> <input type="text" id="replaceWorld"  value="word here"/>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" data-dismiss="modal" onClick="remplazarTodo();">Replace All</button>
  </div>
</div>

<!--- Modal 3 ingreso de elemento heading--->

<div id="myModal3" class="modal hide" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" 
            aria-hidden="true">&times;</button>
    <h3>Headings properties</h3>
  </div>
  <div class="modal-body">
    <label class="checkbox inline">Size
    <select id="heading-size">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    </label>
    <label class="checkbox inline">Text
      <textarea id="heading-text" rows="3"></textarea>
    </label>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary" data-dismiss="modal" onclick="heading();">Ok</a>
  </div>
</div>

<!--- Modal 4 ingreso de elemento lista --->

<div id="myModal4" class="modal hide" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" 
            aria-hidden="true">&times;</button>
    <h3>Items List</h3>
  </div>
  <div class="modal-body">
    <label class="checkbox inline">Size
    <select id="item-organize">
      <option>OL</option>
      <option>UL</option>
      
    </select>
    </label>
    <label class="checkbox inline">Items
      <textarea id="item-text" rows="4"></textarea>
    </label>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn btn-primary" data-dismiss="modal" onclick="itemList();">Ok</a>
  </div>
</div>

</body>
</html>