Fire JS Bin - AwesomeLists

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

Storage.prototype.setObject = function (a, b) {
  this.setItem(a, JSON.stringify(b))
};
Storage.prototype.getObject = function (a) {
  return JSON.parse(this.getItem(a))
};
String.prototype.listify = function () {
  return {
    txt: this.replace(/[#]+[A-Za-z0-9\s-_]+/g, "").trim(),
    tags: this.match(/[#]+[A-Za-z0-9\s-_]+/g)
  }
};
G = function () {
  return localStorage.getObject("lists")
};
S = function (v) {
  return localStorage.setObject("lists", v)
};
H = function (h) {
  if (typeof(h) == "undefined") {
    return document.location.hash
  } else {
    document.location.hash = h
  }
};
D = function (x) {
  if (typeof(x) == "undefined") {
    return true
  } else {
    return false
  }
};
En = function (x) {
  return (x.replace(/\s/g, "_")).replace(/[^A-Za-z0-9_]/g, "")
};
De = function (x) {
  return x.replace(/_/g, " ")
};
R = function (r) {
  this.D = function (a) {
    var b = a.split("/").length;
    if (b == 1 || r == "#/") {
      H("/main");
      this.now = "main"
    };
    if (b == 2 && r !== "#/") {
      this.now = a.split("#/")[1];
      if (typeof(L) !== "undefined") {
        L.LL(this.now)
      }
    };
    if (b > 3) {
      importList = a
    };
    if (typeof(L) !== "undefined") {
      L.loadNav(this.now);
      L.LL(this.now)
    }
  };
  this.D(r)
};
List = function () {
  this.R = new R(H());
  this.create = function (n, i) {
    if (typeof(n) == "undefined") {
      return false
    };
    if (G() == null) {
      x = {}
    } else {
      var x = G();
      if (G()[En(n)] != null) {
        if (typeof(i) !== "undefined") {
          x[En(n)]["items"] = i;
          this.LL(this.now)
        }
      }
    };
    if (typeof(createTitle) == "undefined") {
      createTitle = De(n)
    };
    x[En(n)] = {
      title: createTitle,
      items: [{
        txt: "Your #" + n + " list is empty ! Try creating some items.",
        status: "empty"
      }]
    };
    if (typeof(i) !== "undefined") {
      x[En(n)]["items"] = i;
      if (typeof(this.R.now) == "undefined") {
        this.R.now = En(n)
      };
      this.LL(this.R.now)
    };
    S(x);
    return true
  };
  this.addItem = function (n) {
    if (n.trim().length == 0) {
      return false
    };
    x = [];
    x.push("#" + this.R.now);
    if (n.listify().tags !== null) {
      x = n.listify().tags
    };
    $.each(x, function () {
      var z = En(this.split("#")[1].trim());
      var y = G();
      lastList = z;
      var s = {
        txt: n.listify().txt,
        status: "new"
      };
      if (typeof(y[z]) == "undefined") {
        createTitle = De(z);
        L.create(z, [s])
      } else {
        y[z]["items"].push(s);
        S(y)
      }
    });
    if (lastList == this.R.now) {
      this.LL(this.R.now)
    } else {
      H("#/" + lastList)
    };
    $(".empty").remove();
    L.save();
    $("input").blur();
    return true
  };
  this.save = function () {
    var y = G();
    var a = [];
    $("ul li").not(".empty").each(function () {
      a.push({
        txt: $(this).find("span").html(),
        status: $(this).attr("class")
      })
    });
    y[this.R.now]["items"] = a.reverse();
    S(y);
    this.header()
  };
  this.header = function () {
    $("h1").html(G()[this.R.now]["title"] + " <span>" + $("ul li.done").length + " finished, " + $("ul li.new").length + " to go </span>")
  };
  this.LL = function (l) {
    if (typeof(l) == "undefined") {
      l = this.R.now
    };
    $("ul").html("");
    if (G() == null || G()[l] == null) {
      this.create(l)
    } else {
      $.each(G()[l]["items"], function () {
        if (this.status !== "hidden") {
          $("ul").prepend("<li class='" + this.status + "'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAWCAYAAADafVyIAAACBUlEQVRIx2P4//8/A7Xx1q1bDQMCAo6tX7++kKoGv3nzhmvChAlpzs7OdaWlpY379+9XoJrhd+/elUhOTp5sY2Ozs7+/Pw0mThXDDxw4YAYMkqUuLi4bt2zZ4oQsR7Hha9as8QKC1a6urht37Nhhhy5PkeGzZ8+OcnBw2Orm5rZ++/btdtjUkG34zJkzY0CGe3p6rsXmcoosABnu6Oi4FRQ0O3futMGnlmTDQa4FRSbIAlD4E1JPkuGHDx82CgoKWgw0/H9fX18GMXqINvzBgwdiUVFRs0GGZ2VldX/58oWJqhYUFha2AoPmf0hIyMLr16/LEasPTEyfPj0uMTFxKignHjx40ARd0eTJk5NA6RyUHNEzEkELXr16xVNbW1sBijigIf99fX1Xnj9/Xg2m4MiRI0ag1AJyfUNDQxmpiQLOaGtrK/Dw8PgPwqAwBol9+PCBLT09vR9kcXBw8OJ79+5JkG3B06dPBSIiIuYCXfsfFBwnT57UWbJkSRDI5SALpk2blkBOnsHIQMCi9r+3t/f/zMzM/8BU89/d3f1/bGzsTJBvKLbg+fPnfNHR0bN9fHz+g3wCokGuX7ZsWQC5RQqGQE9PTxYoWPz8/MA+AWUsUB6gmgVnzpzRAhq8GuR6e3v7/11dXTmUlLhYBUH5AWj49rq6ugpQNUh1C5YuXRpASbgjYwCa+rZsme0NRwAAAABJRU5ErkJggg==' alt='checked' /><span>" + this.txt + "</span></li>")
        }
      })
    };
    this.header()
  };
  this.removeList = function (n) {
    var y = G();
    y[n] = undefined;
    S(y)
  };
  this.loadNav = function (x) {
    var a = "";
    $.each(G(), function () {
      a += "<li ";
      if (En(this.title) == x) {
        a += "class='current' "
      }
      a += "><a href='#/" + En(this.title) + "'>#" + this.title + "</a></li>"
    });
    a += "<li class='create'><a href='#'>+</a></li>";
    $("header ol").html(a)
  };
  this.E = function () {
    var b = G()[escape(this.R.now)];
    var c = document.location.href.split("#")[0] + "#/import/" + this.R.now + "_/";
    $.each(b["items"], function () {
      if (this.status != "hidden" && this.txt.length > 1) {
        c += escape(this.txt) + "/" + this.status + "_/"
      }
    });
    $.ajax({
      url: "http://api.bit.ly/v3/shorten?format=json&login=10kapp&apikey=R_46ee33aba140042f2a568efc62b58e81&longUrl=" + escape(c),
      success: function (a) {
        $("ul").before("<p class='sharedInfo'>A short url for your <strong>#" + L.R.now + "</strong> list has been created - <a href='" + a.data.url + "' >" + a.data.url + "</a></p>")
      },
      dataType: "jsonp"
    })
  };
  this.importList = function (a) {
    a = a.split("_/");
    list = a[0].split("#/")[1].split("/")[1];
    a.splice(0, 1);
    var b = [];
    for (i = 0; i <= a.length - 1; i = i + 1) {
      if (a[i].length > 5) {
        var d = a[i].split("/");
        b.push({
          txt: unescape(d[0]),
          status: d[1]
        })
      }
    };
    createTitle = De(list);
    this.R.now = list;
    this.create(list, b);
    H("#/" + En(list))
  };
  if (typeof(importList) !== "undefined") {
    this.importList(importList)
  };
  this.LL(this.R.now);
  this.loadNav(this.R.now)
};
$(document).ready(function () {
  L = new List();
  $('#content input').keypress(function (e) {
    if (e.which == 13) {
      var v = $(this).attr("value");
      $(this).attr("value", "");
      L.addItem(v)
    }
  });
  $(".print").click(function () {
    window.print();
    return false
  });
  $("ul").delegate("li", "dblclick", function () {
    $(this).remove();
    L.save()
  });
  $(".delete").click(function () {
    L.removeList(L.R.now);
    H("");
    return false
  });
  $("ul").delegate("li", "click", function () {
    $(this).toggleClass("new").toggleClass("done");
    L.save()
  });
  $(".share").click(function () {
    L.E();
    return false
  });
  $("header").delegate("input", "keypress", function (e) {
    if (e.which == 13) {
      createTitle = $("header input").attr("value");
      H("#/" + En($("header input").attr("value")))
    }
  }).delegate(".create a", "click", function () {
    $(this).parent().before("<li class='new'><input type='text'/></li>");
    $(".new input").focus();
    return false
  });
  $("input").attr("data-msg", "Add new item").focus(function () {
    if ($(this).attr("value") == "Add new item") {
      $(this).attr("value", "")
    }
  }).blur(function () {
    if ($(this).attr("value").trim().length == 0) {
      $(this).attr("value", $(this).attr("data-msg"))
    }
  });
  window.onhashchange = function () {
    L.R.D(H())
  }
});

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset='utf-8' />
    <title>AwesomeLists - Create and share to-do lists, HTML5 style.</title>
    <script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js'></script>
  </head>
  
  <body>
    <header>
      <ol>
        <li class='current'>
          <a href='#/main' id='list-main'>#main</a>
        </li>
        <li class='create'>
          <a href='#'>+</a>
        </li>
      </ol>
    </header>
    <div id='head'>
      <div class='contents'>
        <h1>main</h1>
        <a class='share btn' href='#'>Share</a>
        <a class='print btn' href='#'>Print</a>
        <a class='delete btn' href='#'>Delete list</a>
      </div>
    </div>
    <div id='content'>
      <div class='add'>
        <input tabindex='1' type='text' value='Add new item' />
      </div>
      <ul>
      </ul>
      <div id='help'>
        <h3>
          Add to multiple lists by #using #tags | Click to mark as done | Double
          click to remove
        </h3>
        <h3>
          Created by
          <a href="http://twitter.com/gvidoglazers/" title="Follow me on twitter">Gvido Glazers</a>
        </h3>
      </div>
    </div>
  </body>

</html>

body { background:#D2C7B4; font:13px Helvetica, Arial, sans-serif }
body, h1, h2, h3, li, ul, ol { font-weight:normal; padding:0; margin:0; list-style-type:none }
a { text-decoration:none; color:#4F4A40; outline:none }
.hidden { display:none }
#content, header ol, #head .contents { min-width:950px; width:80%; margin:0 auto; overflow:hidden; display:inline-block; min-width:950px }
#content, header ol, #head .contents { display:block }
header { background:#B2B175; border-bottom:4px solid #DFD5C3; display:block; padding-top:1.5em }
header li { list-style-type:none; margin:0; padding:0 }
header li.current a { background:#DFD5C3 }
header .create a { font-weight:bold; color:#F5F5F5; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.3) }
header .new input { width:100px; border:1px solid #7f7e57 }
header .new input:focus { outline:none }
header a, header .new { border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; background:#BFBE83; font:1.23em Georgia, "Times New Roman", serif; padding:0.75em 1.22em; margin:0.61em 10px 0 0; float:left }
header a:hover, header .new:hover { background:#a1a06a }
#head { background:#DFD5C3; padding:1.5em; margin-bottom:1.5em }
h1 { font:3em Georgia; display:inline; float:left; overflow:hidden; width:66.302%; margin-right:1.042%; color:#5F5B53 }
h1 span { color:#7F796F; font:.5em Helvetica; border-left:1px solid #BFB6A7; padding-left:.5em; position:relative; top:-.15em }
a.btn, .add { border-radius:2px; -moz-border-radius:5px; -webkit-border-radius:5px }
.btn { float:right; padding:.75em 1.5em; background:#A1A06A; color:#FAFAFA; margin:.75em 0 0 .5em }
.btn:hover { background:#929160 }
.delete { background:none; color:#666 }
.delete:hover { background:none; color:#333 }
.add { background-color:#FFF; display:inline; float:left; overflow:hidden; width:97.869%; margin-right:1.042%; margin-right:0; margin-bottom:1.5em; padding:1em 0.75em; border:1px solid #beb4a3 }
.add input { margin-left:.25em; width:95%; color:#999; font-size:1.5em; border:none }
.add input:focus { outline:none }
ul { clear:both; overflow:hidden; background:rgba(255, 255, 255, 0.98); margin-bottom:1.5em }
ul li { margin:0; padding:1.5em; font-size:1.5em; line-height:3em; padding:0 0 0 20px; cursor:pointer; color:#56524b }
ul li img { margin-right:0.75em; position:relative; top:3px; opacity:0.1 }
ul li:hover { color:#222; background:#FFF }
ul li:hover img { opacity:0.5 }
ul li.empty img { display:none }
ul li.done img { opacity:0.7 }
ul li.done span { text-decoration:dline-through; color:#beb6a6 }
#help { margin-top:1.5em; border-top:3px double #BFB6A7; padding:0.75em }
#help h3 { margin:0.75em; color:#7F796F; text-align:center }
.sharedInfo { display:block; clear:left; margin:1.22em 0; padding:1.22em; font-size:1.23em; background:rgba(255, 255, 255, 0.5) }
.empty { background:#DFD5C3 }
.empty span { color:#6F6E4C }

@media print {
  header, #msg, #help, .add, .btn { display:none }
  .new img { opacity:0 }
  .done img { opacity: 1 }
}

Pop out