Skip to content

Instantly share code, notes, and snippets.

@boy-jer

boy-jer/jquery-html5sticky-note.js

Created April 9, 2012 20:03
Show Gist options
  • Save boy-jer/2346229 to your computer and use it in GitHub Desktop.
Save boy-jer/2346229 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jquery-html5sticky-note.js
<br>
var stickywidth = 200; // width of sticky note (can't be less than 200)<br>
var stickyheight = 200; // height of sticky note (can't be less than 200)<br>
var max_notes = 500; // maximum number of notes one can store<br>
var allowed_tags = '<br /><br><ol></ol><ul></ul><li></li><strong></strong><i></i>';<br>
var html5sticky = {};<br>
var note_index = 0;<br>
// add a note <br>
//we need to modify this to work as repin a note <br.
html5sticky.addNote = function(){<br>
// count total present notes<br>
var tnotes = $('.note_common').length;<br>
if (tnotes === max_notes){<br>
html5sticky.showMessage('#FFE16B', 'black', 'You can not add any more notes, please delete some to add more.');<br>
return false;<br>
}<br>
// unique localstorage identifier for this sticky note<br>
var nindex = ++note_index + 'stickynote';<br>
var dated = html5sticky.getDateTime();<br>
var dateStr = new Date();<br>
// get random color<br>
var bgcolor = html5sticky.getColor();<br>
var stickynote = $('<div class="note_common ' + bgcolor + '" />').appendTo($('#main'));<br>
// add tape to stickynote<br>
html5sticky.addPin(stickynote);<br>
$(stickynote).append($('<h2>' + dated + '</h2>'));<br>
$(stickynote).append($('<p>Text here...</p>'));<br>
// append identifier<br>
$(stickynote).append($('<span id="idf_' + nindex + '" />'));<br>
// set width and height of the sticky note<br>
$('.note_common').css({width: stickywidth + 'px', height:stickyheight + 'px'});<br>
$('.note_common p').css({height:(stickyheight - 60) + 'px', width:(stickywidth + 9) + 'px'});<br>
if (! $("#removenotes").is(':visible')){<br>
$('#removenotes').slideDown('slow');<br>
}<br>
//$(stickynote).find('h2').attr('contentEditable', true);<br>
//$(stickynote).find('p').attr('contentEditable', true);<br>
// add utility buttons<br>
//html5sticky.addUtilityButtons(stickynote);<br>
// scroll to newly added sticky note<br>
$('html, body').animate({<br>
scrollTop:$(stickynote).offset().top<br>
});<br>
// store note info local storage<br>
if (Modernizr.localstorage){<br>
localStorage.setItem(nindex, nindex);<br>
localStorage.setItem(nindex + '|pos', parseInt($(stickynote).offset().left, 10) + '|' + parseInt($(stickynote).offset().top, 10));<br>
localStorage.setItem(nindex + '|text', $(stickynote).find('h2').text() + '|' + $(stickynote).find('p').text());<br>
localStorage.setItem(nindex + '|bgcolor', bgcolor);<br>
localStorage.setItem(nindex + '|dated', dated + '|' + html5sticky.getISODateTime(dateStr));<br>
}<br>
else {<br>
html5sticky.nohtml5();<br>
}<br>
};<br>
// no html5 ?<br>
html5sticky.nohtml5 = function(){<br>
html5sticky.showMessage('#FFE16B', 'black', 'Your browser does not support html5, please upgrade your browser.');<br>
};<br>
// adds utility buttons on note footer<br>
html5sticky.addUtilityButtons = function(el){<br>
$el = $(el);<br>
$el.append('<div align="center" class="icons-footer" />');<br>
$('.icons-footer').append('<img class="left shrink ficon" src="assets/img/shrink.png" alt="" title="shrink/expand">');<br>
$('.icons-footer').append('<img class="left alarm ficon" src="assets/img/alarm.png" alt="" title="set alarm for this sticky note">');<br>
$('.icons-footer').append('<img class="left lock ficon" src="assets/img/lock.png" alt="" title="lock this sticky note">');<br>
$('.icons-footer').append('<img class="left settings ficon" src="assets/img/settings.png" alt="" title="settings for note">');<br>
$('.icons-footer').append('<img class="left email ficon" src="assets/img/email.png" alt="" title="email this sticky note">');<br>
$('.icons-footer').append('<img class="left tweet ficon" src="assets/img/tweet.png" alt="" title="tweet this sticky note">');<br>
$('.icons-footer').append('<img class="left share ficon" src="assets/img/share.png" alt="" title="share this sticky note">');<br>
// set "left" for these icons now<br>
$('.ficon:first').css({marginLeft: '10px', marginRight: '15px'});<br>
$('.ficon').each(function(index){<br>
$(this).css('left', index * (parseInt($(this).width(), 10) + 5));<br>
});<br>
<br>
};<br>
// save note<br>
html5sticky.saveNote = function(el){<br>
if (Modernizr.localstorage){<br>
var identifier = html5sticky.getIdentifier($(el));<br>
var htext = html5sticky.stripTags($(el).closest('.bignote').find('.hedit')[0].value, allowed_tags);<br>
var ptext = html5sticky.stripTags($(el).closest('.bignote').find('.pedit')[0].value, allowed_tags);<br>
ptext = ptext.replace(/\r?\n/g, '<br />');<br>
localStorage.setItem(identifier + '|text', htext + '|' + ptext);<br>
$('[id^=idf_' + identifier + ']').closest('.note_common').find('h2').text(htext);<br>
$('[id^=idf_' + identifier + ']').closest('.note_common').find('p').html(ptext);<br>
html5sticky.showMessage('#9BED87', 'black', 'Sticky Note Saved :)');<br>
}<br>
else {<br>
html5sticky.nohtml5();<br>
}<br>
};<br>
// get note identifier<br>
html5sticky.getIdentifier = function(el){<br>
var identifier = $(el).closest('.bignote').find('[id^=idf_]').attr('id');<br>
if (typeof identifier == 'undefined' || identifier == null){<br>
identifier = $(el).closest('.note_common').find('[id^=idf_]').attr('id');<br>
}<br>
if (typeof identifier != 'undefined'){<br>
identifier = identifier.replace('idf_', '');<br>
return identifier;<br>
}<br>
else{<br>
return false;<br>
}<br>
};<br>
// delete note<br>
html5sticky.deleteNote = function(el){<br>
if (confirm('Are you sure you want to delete this sticky note ?')){<br>
// delete from storage also<br>
if (Modernizr.localstorage){<br>
var identifier = html5sticky.getIdentifier($(el));<br>
localStorage.removeItem(identifier);<br>
localStorage.removeItem(identifier + '|pos');<br>
localStorage.removeItem(identifier + '|text');<br>
localStorage.removeItem(identifier + '|settings');<br>
}<br>
else {<br>
html5sticky.nohtml5();<br>
}<br>
$(el).closest('.note_common').fadeOut('slow', function(){<br>
$(el).closest('.note_common').remove();<br>
<br>
if (! $(".note_common").length > 0){<br>
$('#removenotes').slideUp('slow');<br>
}<br>
});<br>
}<br>
};<br>
// delete all notes<br>
html5sticky.deleteAllNotes = function(){<br>
if (confirm('Are you sure you want to delete ALL sticky note ?')){<br>
$('.note_common').fadeOut('slow', function(){<br>
$('.note_common').remove();<br>
localStorage.clear();<br>
$('#removenotes').slideUp('slow');<br>
});<br>
}<br>
};<br>
// close big note<br>
html5sticky.closeNote = function(el){<br>
$(el).closest('.bignote')[html5sticky.getAnimation(true)]('slow', function(){<br>
$('#overlay').remove();<br>
}); <br>
};<br>
// get current date and time<br>
html5sticky.getDateTime = function(){<br>
var currentTime = new Date();<br>
var month = currentTime.getMonth() + 1;<br>
var day = currentTime.getDate();<br>
var year = currentTime.getFullYear();<br>
var hours = currentTime.getHours();<br>
var minutes = currentTime.getMinutes();<br>
var ampm = '';<br>
var sep = ' ';<br>
var dsep = '/';<br>
var tsep = ':';<br>
if (minutes < 10) minutes = "0" + minutes;<br>
if(hours > 11){<br>
ampm = 'PM';<br>
} else {<br>
ampm = 'AM';<br>
} <br>
return month + dsep + day + dsep + year + sep + hours + tsep + minutes + sep + ampm;<br>
};<br>
// get ISO 8601 date and time<br>
html5sticky.getISODateTime = function(d){<br>
function pad(n){return n < 10 ? '0' + n : n}<br>
return d.getUTCFullYear()+'-'<br>
+ pad(d.getUTCMonth()+1)+'-'<br>
+ pad(d.getUTCDate())+'T'<br>
+ pad(d.getUTCHours())+':'<br>
+ pad(d.getUTCMinutes())+':'<br>
+ pad(d.getUTCSeconds())+'Z'<br>
};<br>
// edit note<br>
html5sticky.editNote = function($clone, el){<br>
var ptext = $clone.find('p').html();<br>
ptext = ptext.replace(/(<br \/>|<br>)/g, '\n');<br>
$clone.find('p').replaceWith('<textarea class="pedit" />');<br>
$clone.find('.pedit')<br>
.val(ptext)<br>
.css('margin-top', '5px')<br>
.addClass('inset')<br>
.width('590px')<br>
.height('280px');<br>
// make content editable<br>
var htext = $clone.find('h2').text();<br>
$clone.find('h2').replaceWith('<input type="text" class="hedit" />');<br>
$('.hedit').addClass('inset').val(html5sticky.stripTags(htext, allowed_tags)).width(250);<br>
// put in Close button<br>
$('<a href="#" class="close_stickynote"><img src="assets/img/deletebig.png" alt="" title="close note"></a>')<br>
.css({<br>
position:'absolute',<br>
top:7,<br>
right:5<br>
})<br>
.appendTo($clone);<br>
// put in Save button<br>
$('<a href="#" class="save_stickynote"><img src="assets/img/savebig.png" alt="" title="save note"></a>')<br>
.css({<br>
position:'absolute',<br>
top:7,<br>
right:60<br>
})<br>
.appendTo($clone);<br>
// put in Tip<br>
$('<span class="tip">Tip: Allowed HTML tags: <code>')<br>
.css({<br>
position:'absolute',<br>
bottom:10,<br>
left:15<br>
})<br>
.appendTo($clone);<br>
var tags = allowed_tags;<br>
tags = tags.replace('<br />', '');<br>
// remove ending tags<br>
tags = tags.match(/<([A-Z][A-Z0-9]*)\b[^>]*>(.*?)/ig);<br>
$('.tip').text($('.tip').text() + tags.join(' '));<br>
};<br>
// get all notes<br>
html5sticky.getNotes = function(){<br>
if (Modernizr.localstorage){<br>
for(var i = 1; i <= max_notes; i++){<br>
if (localStorage.getItem(i + 'stickynote')){<br>
//console.log(i + 'stickynote');<br>
note_index = i;<br>
var stickynote, bgcolor, htext, ptext, pleft, ptop, temp_array;<br>
// get color and rotation level<br>
bgcolor = localStorage.getItem(i + 'stickynote' + '|bgcolor');<br>
// get position info<br>
temp_array = localStorage.getItem(i + 'stickynote' + '|pos').split('|');<br>
pleft = temp_array[0];<br>
ptop = temp_array[1];<br>
// get text info<br>
temp_array = localStorage.getItem(i + 'stickynote' + '|text').split('|');<br>
htext = temp_array[0];<br>
ptext = temp_array[1];<br>
stickynote = $('<div class="note_common ' + bgcolor + '" />').appendTo($('#main'));<br>
// add tape to stickynote<br>
html5sticky.addPin(stickynote);<br>
$(stickynote).append($('<h2>Sticky Note</h2>'));<br>
$(stickynote).append($('<p>Text here...</p>'));<br>
// append identifier<br>
$(stickynote).append($('<span id="idf_' + i + 'stickynote' + '" />'));<br>
//$(stickynote).find('h2').attr('contentEditable', true);<br>
//$(stickynote).find('p').attr('contentEditable', true);<br>
$(stickynote).find('h2').text(html5sticky.stripTags(htext, allowed_tags));<br>
$(stickynote).find('p').html(html5sticky.stripTags(ptext, allowed_tags));<br>
// set width and height of the sticky note<br>
$('.note_common').css({width: stickywidth + 'px', height:stickyheight + 'px'});<br>
$('.note_common p').css({height:(stickyheight - 60) + 'px', width:(stickywidth + 9) + 'px'});<br>
// add utility buttons<br>
//html5sticky.addUtilityButtons(stickynote);<br>
}<br>
}<br>
if (! $('.note_common').length > 0){<br>
$('#removenotes').hide();<br>
}<br>
<br>
}<br>
else {<br>
html5sticky.nohtml5();<br>
}<br>
};<br>
// email note<br>
html5sticky.emailNote = function(){<br>
};<br>
// share note<br>
html5sticky.shareNote = function(){<br>
};<br>
// share note<br>
html5sticky.showMessage = function(bgcolor, color, msg){<br>
if (!$('#smsg').is(':visible'))<br>
{<br>
$('html, body').animate({<br>
scrollTop: 0<br>
}, 500, function(){<br>
if (!$('#smsg').length)<br>
{<br>
$('<div id="smsg">'+msg+'</div>').appendTo($('body')).css({<br>
position:'absolute',<br>
top:0,<br>
left:3,<br>
width:'98%',<br>
height:'30px',<br>
lineHeight:'30px',<br>
background:bgcolor,<br>
color:color,<br>
zIndex:1000,<br>
padding:'10px',<br>
fontWeight:'bold',<br>
textAlign:'center',<br>
opacity:0.9,<br>
margin:'auto',<br>
display:'none'<br>
}).slideDown('show');<br>
<br>
setTimeout(function(){<br>
$('#smsg').animate({'width':'hide'}, function(){<br>
$('#smsg').remove();<br>
});<br>
}, 4000);<br>
}<br>
});<br>
}<br>
};<br>
// get random color<br>
html5sticky.getColor = function(){<br>
var text = "";<br>
var possible = "0123456789";<br>
text += possible.charAt(Math.floor(Math.random() * possible.length));<br>
return 'stickynote' + text;<br>
};<br>
// get random animation string<br>
html5sticky.getAnimation = function(hideAnimation){<br>
var words = new Array();<br>
if (typeof hideAnimation != 'undefined'){<br>
words[1] = "hide";<br>
words[2] = "fadeOut";<br>
words[3] = "slideUp";<br>
}<br>
else {<br>
words[1] = "show";<br>
words[2] = "fadeIn";<br>
words[3] = "slideDown";<br>
}<br>
<br>
// Generate a random number between 1 and 3<br>
var rnd = Math.ceil(Math.random() * 3);<br>
<br>
return words[rnd];<br>
};<br>
// add pin to note<br>
html5sticky.addPin = function(el){<br>
var close = $('<div><a href="#" class="delete_stickynote"><img src="assets/img/delete.png" alt="" title="delete note"></a></div>');<br>
var tag = $('<div align="center"><img src="assets/img/pin.png" alt=""></div>');<br>
$(close).css({<br>
position:'absolute',<br>
top:-15,<br>
right:-15<br>
}).prependTo($(el));<br>
<br>
$(tag).css({<br>
position:'absolute',<br>
zIndex:99,<br>
top:-30,<br>
left:parseInt(stickywidth / 2, 10) - 10<br>
}).prependTo($(el));<br>
};<br>
// enlarge note for editing<br>
html5sticky.enlargeNote = function(el){<br>
$this = $(el);<br>
// get initial position<br>
var posLeft = parseInt($(el).offset().left, 10);<br>
var posTop = parseInt($(el).offset().top, 10);<br>
// create overlay<br>
$('<div id="overlay" />').css({<br>
position:'fixed',<br>
background:'transparent',<br>
background:'rgba(0,0,0,0.5)',<br>
top:'0',<br>
left:'0',<br>
width:'100%',<br>
height:'100%',<br>
zIndex:'100'<br>
}).appendTo($('body'));<br>
$clone = $(el).clone().removeClass('note_common').addClass('bignote').appendTo($('#overlay'));<br>
// remove the pin<br>
$clone.find($('img[src*="pin.png"]').closest('div')).hide();<br>
// change delete button title<br>
$clone.find($('img[src*="delete.png"]').closest('div')).hide();<br>
$($clone).css({<br>
position:'absolute',<br>
zIndex: 500,<br>
cursor:'default',<br>
paddingTop:'5px',<br>
top:posTop,<br>
left:posLeft,<br>
width:'600px',<br>
height:'400px',<br>
top:'50%',<br>
left:'50%',<br>
display:'none',<br>
marginLeft:'-300px',<br>
marginTop:'-200px'<br>
});<br>
$($clone)[html5sticky.getAnimation()](400);<br>
// add date and time info<br>
var dateStr = '', dateAgo = '';<br>
if (Modernizr.localstorage){<br>
var identifier = html5sticky.getIdentifier($(el));<br>
var dateTime = localStorage.getItem(identifier + '|dated');<br>
var timeImg = '<img class="left" align="absmiddle" src="assets/img/time.png">';<br>
dateStr = dateTime.split('|')[0];<br>
dateAgo = prettyDate(dateTime.split('|')[1]);<br>
dateStr = (dateStr.length > 0) ? 'Created on: ' + dateStr : '';<br>
dateAgo = (dateAgo.length > 0) ? ' (' + dateAgo + ')' : '';<br>
timeImg = (dateStr.length > 0) ? timeImg : '';<br>
}<br>
else {<br>
html5sticky.nohtml5();<br>
}<br>
$('<div class="timeago left" />').prependTo($clone);<br>
$('.timeago').css({fontSize: '12px', fontFamily:'tahoma'}).html(timeImg + '&nbsp;&nbsp;' + dateStr + dateAgo);<br>
$('.timeago').after('<div class="clear" />');<br>
// hide the utility buttons<br>
$($clone).find('.icons-footer').hide();<br>
// make content editable<br>
html5sticky.editNote($clone, el);<br>
};<br>
html5sticky.setup = function(){<br>
var fontFamily = $('.note_common p').css('font-family');<br>
// Architects font needs to have lesser line height / spacing for lists<br>
if (typeof fontFamily != 'undefined' && fontFamily.indexOf('Architects') >= 0){<br>
$('.note_common ul').css({lineHeight:'10px', padding:'0px', margin:'0px'});<br>
$('.note_common ol').css({lineHeight:'0px', padding:'0px', margin:'0px'});<br>
}<br>
// sticky notes can't be less than 200x200<br>
if (stickywidth < 200){<br>
stickywidth = 200;<br>
}<br>
if (stickyheight < 200){<br>
stickyheight = 200;<br>
}<br>
};<br>
// http://phpjs.org/functions/strip_tags:535<br>
html5sticky.stripTags = function(input, allowed) {<br>
allowed = (((allowed || "") + "").toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)<br>
var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,<br>
commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;<br>
return input.replace(commentsAndPhpTags, '').replace(tags, function ($0, $1) {<br>
return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';<br>
});<br>
}<br>
// jQuery Play<br>
$(function(){<br>
// initial setup<br>
html5sticky.setup();<br>
// get any saved notes on page load<br>
html5sticky.getNotes();<br>
// add note<br>
$('#addnote').click(function(){<br>
html5sticky.addNote();<br>
return false;<br>
});<br>
// delete all notes<br>
$('#removenotes').click(function(){<br>
html5sticky.deleteAllNotes();<br>
return false;<br>
});<br>
// delete note<br>
$('.delete_stickynote').live('click', function(){<br>
html5sticky.deleteNote($(this));<br>
return false;<br>
});<br>
// close enlarged note<br>
$('.close_stickynote').live('click', function(){<br>
html5sticky.closeNote($(this));<br>
return false;<br>
});<br>
// save the note<br>
$('.save_stickynote').live('click', function(){<br>
html5sticky.saveNote($(this));<br>
return false;<br>
});<br>
// enlarge the note<br>
$(".note_common").live("click", function(event) {<br>
html5sticky.enlargeNote($(this));<br>
});<br>
// allow escape to close big note<br>
$(document).keyup(function(e) {<br>
if (e.keyCode == "27") {<br>
$('#overlay').remove();<br>
$('.bignore').remove();<br>
}<br>
});<br>
});<br>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment