Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

193 lines (171 sloc) 6.584 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sticky List</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://use.typekit.com/wbf3vsw.js"></script>
<script type="text/javascript">
//Placeholder plugin
(function($){
$.fn.placeholder = function(){
if(!supports_input_placeholder()) {
this.each(function(i) {
if($(this).val() === ''){
$(this).val($(this).attr('placeholder'))
$(this).css({color: '#CCCCCC'})
}
//check whether already the placeholder event is binded
else if($(this).val() === $(this).attr('placeholder'))
return false;
$(this).bind('focusin focusout', function(event) {
if(event.type == 'focusout' && $(this).val() === ''){
$(this).val($(this).attr('placeholder'));
$(this).css({color: '#CCCCCC'})
}
else if($(this).val() === $(this).attr('placeholder')){
$(this).val('');
$(this).css({color: '#000'})
}
});
});
}
}
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
})(jQuery);
var saveList = function(list){
var escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,
meta = { // table of character substitutions
'\b': '\\b',
'\t': '\\t',
'\n': '\\n',
'\f': '\\f',
'\r': '\\r',
'"' : '\\"',
'\\': '\\\\'
};
var str_list = $.map(list, function(i){
escapable.lastIndex = 0;
return escapable.test(i) ?
'"' + i.replace(escapable, function (a) {
var c = meta[a];
return typeof c === 'string' ? c :
'\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4);
}) + '"' :
'"' + i + '"';
});
localStorage.setItem("Sticky:list", (list.length === 0 ? '[]' : '[' + str_list.join(',') + ']'));
};
var loadList = function(){ return $.parseJSON(localStorage.getItem("Sticky:list") || "[]"); }
$(function(){
var list = $.grep(loadList(), function(a){ return a != ""});
//print list items
var printList = function(){
$("ul").html("");
if(list.length > 0) {
$.each(list, function(i){
var cur_item = this;
//parse links
var url_patt = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;
cur_item = cur_item.replace(url_patt, "<a href=''$&>$&</a>");
if(cur_item)
$("ul").append("<li data-item-id='" + i + "'><span style='float:left'>"+ cur_item +"</span><a href='#' class='remove_item item_actions'>✓</a><a href='#' class='move_item item_actions'>↑</a></li>");
});
}
else
$("ul").append("<li><strong>Sticky List Zero!</strong> You might be having a great day! <br/><p>(Or didn't start filling the list yet? Type something below and hit return!)</p></li>");
};
//refresh the items in the list
var refreshList = function(){
list = [];
$("ul li").each(function(i){
list[i] = $(this).children('span').text();
});
};
//add new item
$("form").submit(function(){
list.push($("#new_entry").val());
saveList(list);
$("#new_entry").val("");
printList();
return false;
});
//remove item
$(".remove_item").live("click", function(){
$(this).parent().slideUp(200, function(){
$(this).remove();
refreshList();
printList();
saveList(list);
});
return false
});
//move item up in priority
var moveItem = function(){
$(this).children(".item_actions").hide();
var new_line = "<li data-item-id='"+ $(this).attr('data-item-id') + "'>" + $(this).html() + "</li>";
if($(this).prev().length > 0){
$(this).prev().before(new_line);
}
else{
$(this).parent().append(new_line);
}
$(this).remove();
refreshList();
saveList(list);
};
$(".move_item").live("click", function(){ moveItem.call($(this).parent()); return false });
$("li").live("dblclick", function(){ moveItem.call(this)});
$("li").live("mouseenter", function(){
$(this).children(".item_actions").show();
});
$("li").live("mouseleave", function(){
$(this).children(".item_actions").hide();
});
//after loading
printList();
$("input").val("")
.placeholder();
});
</script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style>
body { background: #E7F8DD; margin:0; padding:0; font-family: Georgia, serif;}
h1, h2 { text-align: center; }
ul { list-style:none; margin:0; padding:0; }
li { margin: 0; padding: 10px 0; border-bottom: 1px #6F806C solid; cursor: pointer; float:left; width: 100%; font-size: 110%;}
li span { padding-left: 10px; }
input { font-size: 110%; margin: 0 auto; width: 100%; min-width: 100px; padding: 5px; font-family: Georgia, serif;}
p { font-size: 75%;}
#wrapper { min-height: 100%; position: relative; margin: 0 auto; max-width: 500px; min-width: 280px; }
#maincontent { overflow: auto; margin-bottom: 120px;}
#footer { background: #807373; width: 100%; margin: 0 auto; padding: 20px 0; height: 90px; position: fixed; bottom:0;}
#footer .content { margin: 0 auto; max-width: 500px; min-width: 280px; }
#footer p { color: #ECE8E8;}
#footer p a, #footer p a:visited { color: #ECE8E8;}
.item_actions { display:none; margin: 0 10px; float: right; height: 16px; width: 16px; text-decoration: none; color: #000; }
.item_actions:visited {color: #000; }
</style>
</head>
<body>
<div id="wrapper">
<div class ="content" id="maincontent">
<h1>Sticky List</h1>
<ul>
</ul>
</div>
</div>
<div id="footer">
<div class="content">
<form>
<input id="new_entry" type="text" value="" placeholder="Add new item to the list"/>
</form>
<p>Tip: You can move up an item by double-clicking on it.</p>
<p>By <a href="http://laktek.com">Lakshan Perera</a></p>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.