Subscribe to andrewsw's Blog        RSS Feed
-----

Post-It Notes in localStorage

Icon Leave Comment
I started to explore this earlier today, a web page to create post-it notes, and then save, and retrieve, them from localStorage. I was going to entitle this blog "..work in progress" but I actually found that I managed to complete everything that I intended to include. (Note: I use jQuery.)

You can press the plus sign to create a new note, drag them around, and delete a note using the little minus sign. Press S to save all the notes (in localStorage), reloading the page later should retrieve all the saved notes, positioning them as they were last positioned.

I've just noticed that it doesn't work in IE. Sorry, but I don't care about IE when working on my own little projects. Use a proper browser.

Posted Image

It is an interesting, cute, little application that I thought I'd share. There is a lot that could be added of course. Off the top of my head, different colours, maybe tags, different z-order, etc., etc.. Please feel free to add a comment below if you add something interesting to it.

One thing I thought about doing, but forgot about in the process, was adding a picture of a bin and being able to drag and drop a note into the bin, perhaps with a little animation! This would be cute, but doesn't add much.

Enjoy! And please let me know if you have any suggestions about additions or improvements.

<!DOCTYPE html>
<html>
<head>
    <title>Quick Notes</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#sidebar {
    float: left;
    width: 50px;
    font-size: 30px;
    text-align: center;
    color: white;
    background-color: cornflowerblue;
}
#sidebar p {
    margin: 0;
    border-bottom: 1px solid blue;
}
#sidebar p:hover {
    cursor: pointer;
}
main {
    position: relative;
    margin-left: 50px;
    overflow: auto;
    height: 100%;
}
.dragIt {
    font-family: 'Source Code Pro', Consolas, monospace;
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
}
.dragIt.ui-draggable-dragging textarea {
    background: lightgreen;
}
.dragIt p {
    margin: 0;
    padding: 2px;
    font-size: smaller;
    color: white;
    background-color: cornflowerblue;
}
.dragIt p:hover {
    cursor: move ;
}
.dragIt textarea {
    background-color: yellow;
}
#clone {
    display: none;
}
.del {
    position: absolute;
    right: 4px;
    font-weight: bold;
    cursor: pointer;
}
</style>
</head>
<body>
<!-- Drag-and-Drop with jQuery: Your Essential Guide
    http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/ -->
    <div id="sidebar">
        <p class="plus" title="new note">+</p>
        <p class="save" title="save notes">S</p>
    </div>
    <main>
        <div id="clone" class="dragIt"><div class="del" title="delete">-</div><p>Hello</p>
        <textarea cols="20" rows="5"></textarea></div>
    </main>
<script>
// http://stackoverflow.com/questions/1805210/jquery-drag-and-drop-using-live-events/3349395#3349395
// to enable draggable on a cloned element
$.fn.liveDraggable = function (opts) {
    this.on("mouseover", function () {
        if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
        }
    });
    return this;
};
/*$('.dragIt').draggable({
    containment: 'parent',
    cursor: 'move'
});*/
$('.dragIt').liveDraggable({
    containment: 'parent',
    cursor: 'move'
});

$('.plus').on('click', function () {
    var $temp = $('#clone').clone(true, true);    // clone with data and events
    $temp[0].id = '';
    var today = new Date();
    var day = today.getDate();
    var month = today.getMonth() + 1;     //January is 0
    var year = today.getFullYear();
    var hour = today.getHours();
    if (hour < 10) hour = "0" + hour;
    var mins = today.getMinutes();
    if (mins < 10) mins = "0" + mins;
    var today_s = day + '/' + month + '/' + year + ' ' + hour + ':' + mins;
    $('p', $temp).eq(0).text(today_s);
    $temp.css({'display': 'block'});
    $temp.appendTo('main');
    $('textarea', $temp).focus();
});
$('.dragIt').on('click', '.del', function () {
    $(this).parents('.dragIt').eq(0).remove();
});
$('.save').on('click', function () {
    var saving = [];
    $('.dragIt:not(#clone)').each(function (index) {
        var currentNote = {};
        currentNote.date = $('p', this).text();
        currentNote.note = $('textarea', this).val();
        var posn = $(this).position();
        currentNote.otop = posn.top;
        currentNote.oleft = posn.left;
        saving.push(currentNote);
    });
    localStorage.setItem('savedNotes', JSON.stringify(saving));
});
var savedItems = localStorage.getItem('savedNotes');
if (savedItems) {
    savedItems = JSON.parse(savedItems);
    for (var i=0; i < savedItems.length; i++) {
        var $temp = $('#clone').clone(true, true);    // clone with data and events
        $temp[0].id = '';
        $('p', $temp).eq(0).text(savedItems[i].date);
        $('textarea', $temp).val(savedItems[i].note);
        $temp.css({
            'display': 'block', 
            'top': savedItems[i].otop + 'px', 
            'left': savedItems[i].oleft + 'px'
        });
        $temp.appendTo('main');
    }
}
</script>
</body>
</html>

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

December 2019

S M T W T F S
1234567
891011 12 1314
15161718192021
22232425262728
293031    

Tags

    Recent Entries

    Recent Comments

    Search My Blog

    0 user(s) viewing

    0 Guests
    0 member(s)
    0 anonymous member(s)

    Categories