Código de JavaScript - Nota Autoadhesiva en javascript

Pos: 19

Val: 91

Ha mantenido su posición en JavaScript (en relación al último mes)

Nota Autoadhesiva en javascript

JavaScript

(8)

Publicado el 17 de Noviembre del 2015 por Alfredo (2 códigos)

3.579 visualizaciones desde el 17 de Noviembre del 2015

Código que permite agregar notas autoadhesivas a tu página de intranet.
Sólo debes tener las librerías requeridas y que tu explorador soporte IndexedDB.

A la izquierda de tu explorador aparece una pequeña pestaña con dos opciones. Un signo de más que agrega automáticamente una nota en tu pantalla y un ojo para ocultar y/o mostrar todas las notas.

Cuando termines de usar la nota solo haz click en la X de la nota y podrás borrar la nota.

2015-08-24-08_52_56-Inicio-STEAM

Requerimientos

Bootstrap
JQuery
JQueryUI
El Explorador debe soportar IndexedDB

Versión 1.0.0
(4)

Publicado el 17 de Noviembre del 2015

gráfica de visualizaciones de la versión: Versión 1.0.0

881 visualizaciones desde el 17 de Noviembre del 2015

Versión inicial

100

101

102

103

104

105

106

107

108

109

110

111

112

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;'>&nbsp;</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'>" + (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]);}});});