<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<style>
.contenedorDeNotas
{ position:absolute;
z-index:1;
border:1px solid black;
width:50px;
height:40px;
top:100px;
transition: 0.75s;
left:-30px;
background-color:#FFFFFF;
margin-left:-10px;
padding-left:0px;
border-bottom-right-radius:10px;
border-top-right-radius:10px;
}
.contenedorDeNotas:hover { transition: 0.5s;
left: 5px;
}
.notas
{ width: 250px; height: 150px; padding: 0.5em;
background-color:#EDDA74;
border:1px solid #ADA96E;
position:absolute;
border-top-left-radius:10px;
box-shadow: 10px 10px 5px #888888;
}
.notas textarea
{ font-size:12px;
font-family:Arial;
border-style:none;
resize:none;
background-color: inherit;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
var dbNotas;
$(function () { if ("indexedDB" in window) { var openRequest = indexedDB.open("notasDB", 1); openRequest.onupgradeneeded = function (e)
{ var thisDB = e.target.result;
if (!thisDB.objectStoreNames.contains("notas")) { thisDB.createObjectStore("notas", { keyPath: "id", autoIncrement: true }); }
if (!thisDB.objectStoreNames.contains("preferencias")) { thisDB.createObjectStore("preferencias", { autoIncrement: true }); }
}
openRequest.onsuccess = function (e)
{ dbNotas = e.target.result;
crearContenedorDeNotas();
generarNotas();
}
openRequest.onerror = function (e){console.log("Error");console.dir(e);} }
});
function crearContenedorDeNotas() { var cuadro = document.createElement("div"); cuadro.id = "contenedorDeNotas";
cuadro.className = "contenedorDeNotas";
cuadro.innerHTML = "<div style='float:left;height:100%'><a href='javascript:agregarNota(100,100,1,\"\")' style='padding-left:10px;'><span class='glyphicon glyphicon-plus'/></a><br/><span style='padding-left:10px;padding-top:5px' id='statusNotas'><a href='javascript:ocultarNotas()'><span class='glyphicon glyphicon-eye-close'/></a></span></div><div style='width:5px;background-color:#F5F5F5;height:100%;float:right;padding-right:12px; border-bottom-right-radius:10px;border-top-right-radius:10px;cursor:pointer;'> </div>";
document.body.appendChild(cuadro);
}
function ocultarNotas()
{ $("div.notas").css("display", "none"); document.getElementById("statusNotas").innerHTML = "<a href='javascript:mostrarNotas()'><span class='glyphicon glyphicon-eye-open'/></a>";}
function mostrarNotas() { $("div.notas").css("display", ""); document.getElementById("statusNotas").innerHTML = "<a href='javascript:ocultarNotas()'><span class='glyphicon glyphicon-eye-close'/></a>";}
function actualizarNotas(elemento)
{ var id = elemento.dataset.id;
var request = dbNotas.transaction(["notas"]).objectStore("notas").get(Number(id)); request.onsuccess = function(event)
{ creado = request.result.creado;
var nota = dbNotas.transaction(["notas"], "readwrite");
var offset = $(elemento).parent().offset();
var x = offset.left;
var y = offset.top;
var z = $(elemento).parent().zIndex();
nota.objectStore("notas").put({ contenido: elemento.value,
x: x,
y: y,
z: z,
creado :creado,
id: Number(id)
});
nota.oncomplete = function (event) { }; };
}
function agregarNota(x, y, z, nota) { if (String(document.getElementById("statusNotas").innerHTML).indexOf("mostrarNotas()") == -1) { var transaction = dbNotas.transaction(["notas"], "readwrite");
var store = transaction.objectStore("notas"); var notaobj = { x: x, y: y, z: z, contenido: nota, creado: new Date() }; var request = store.add(notaobj);
request.onerror = function (e) { console.log("Error", e.target.error.name); } request.onsuccess = function (event){generarNotas();} }
else {alert("Favor mostrar las notas antes de agregar una nueva");}}
function eliminarNota(id) { var eliminar = confirm("Esta seguro que desea eliminar esta nota?"); if (eliminar)
{ var t = dbNotas.transaction(["notas"], "readwrite");
var request = t.objectStore("notas").delete(id); t.oncomplete = function (event) {}; generarNotas();
}
}
function generarNotas()
{ $("div.notas").remove(); dbNotas.transaction(["notas"], "readonly").objectStore("notas").openCursor().onsuccess = function (e) { var cursor = e.target.result;
if (cursor)
{ var x = cursor.value["x"];
var y = cursor.value["y"];
var z = cursor.value["z"];
var cuadro = document.createElement("div"); cuadro.id = "NOTA" + cursor.value["id"];
cuadro.className = "notas";
cuadro.innerHTML = "<div style='text-align:right;cursor:move'>" + (new Date(cursor.value["creado"])).toLocaleString() + "<a href='javascript:eliminarNota(" + cursor.value["id"] + ")' style='font-family:arial'><span class='glyphicon glyphicon-remove'/></a></div><textarea style='width:100%;height:90%;' data-id='" + cursor.value["id"] + "' onblur='javascript:actualizarNotas(this);' placeholder='...'>" + cursor.value["contenido"] + "</textarea>"; cuadro.style.top = y + "px";
cuadro.style.left = x + "px";
document.body.appendChild(cuadro);
$(function () {$("#NOTA" + cursor.value["id"]).draggable({stop: function () {actualizarNotas(this.getElementsByTagName("textarea")[0]);}});}); cursor.continue();
}
};
}
</script>
</head>
<body>
</body>
</html>
