Fixed a small bug adding new lists and refactored list storage into it's own lib.
This commit is contained in:
parent
827c689e9d
commit
32128eb7f4
3 changed files with 123 additions and 74 deletions
|
@ -13,6 +13,7 @@
|
|||
<script type="text/javascript" src="js/libs/fastclick.js"></script>
|
||||
<script type="text/javascript" src="js/libs/appframework.ui.min.js"></script>
|
||||
<script type="text/javascript" src="js/init.js"></script>
|
||||
<script type="text/javascript" src="js/storelists.js" defer></script>
|
||||
<script type="text/javascript" src="js/app.js" defer></script>
|
||||
|
||||
<!--
|
||||
|
@ -32,7 +33,7 @@
|
|||
<div class="pages">
|
||||
<div data-title="ToDo Lists" id="main" class="panel" selected="true">
|
||||
<ul id="list_of_lists" class="list">
|
||||
<li id="add_list_last_elem"><a id="add_list" data-l10n-id="add_list">Add List</a></li>
|
||||
<li id="add_list_last_elem"><a id="add_list" data-l10n-id="add_list"><span class="icon add"></span> Add List</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div data-title="New list" id="new_list" class="panel" selected="false">
|
||||
|
|
95
js/app.js
95
js/app.js
|
@ -5,18 +5,17 @@
|
|||
|
||||
function openList(elementClicked) {
|
||||
var listID = elementClicked.data('listID');
|
||||
var listTitle = localStorage.getItem('ToDoList_list' + listID);
|
||||
var listTitle = getListTitle(listID);
|
||||
$('ul#list_display').find('li').remove();
|
||||
|
||||
var numElements = localStorage.getItem('ToDoList_' + listID + '_element_count');
|
||||
var numElements = getListItemCount(listID);
|
||||
if((numElements) && (numElements > 0)) {
|
||||
var text;
|
||||
for(var count = 0; count < numElements; count++) {
|
||||
text = localStorage.getItem('ToDoList_' + listID + '_element_' + count);
|
||||
text = getItemText(listID, count);
|
||||
if(text) {
|
||||
var checked = localStorage.getItem('ToDoList_' + listID + '_element_' + count + '_checked');
|
||||
var list_display = $('#new_elem_text');
|
||||
if (checked == 'true') {
|
||||
if (isItemChecked(listID, count)) {
|
||||
list_display.before('<li id="element_' + listID + '_' + count +'"><span class="icon check"></span>' + text + '</li>');
|
||||
} else {
|
||||
list_display.before('<li id="element_' + listID + '_' + count +'"><span class="icon minimize"></span>' + text + '</li>');
|
||||
|
@ -30,83 +29,33 @@ function openList(elementClicked) {
|
|||
$.afui.setTitle(listTitle);
|
||||
}
|
||||
|
||||
function addItemToList(listID, text) {
|
||||
var numElements = localStorage.getItem('ToDoList_' + listID + '_element_count');
|
||||
var elementPosition = 0;
|
||||
if((numElements) && (numElements > 0)) {
|
||||
var count = 0;
|
||||
while ((localStorage.getItem('ToDoList_' + listID + '_element_' + count)) && (count < numElements)) {
|
||||
count++;
|
||||
}
|
||||
|
||||
if(count < numElements) {
|
||||
elementPosition = count;
|
||||
} else {
|
||||
elementPosition = numElements;
|
||||
numElements++;
|
||||
}
|
||||
} else {
|
||||
elementPosition = 0;
|
||||
numElements = 1;
|
||||
}
|
||||
|
||||
localStorage.setItem('ToDoList_' + listID + '_element_' + elementPosition, text);
|
||||
localStorage.setItem('ToDoList_' + listID + '_element_' + count + '_checked', 'false');
|
||||
|
||||
localStorage.setItem('ToDoList_' + listID + '_element_count', numElements);
|
||||
function addItemToListClicked(listID, text) {
|
||||
insertItem(listID, text);
|
||||
|
||||
var list_display = $('#new_elem_text');
|
||||
list_display.before('<li id="element_' + listID + '_' + count +'"><span class="icon minimize"></span>' + text + '</li>');
|
||||
}
|
||||
|
||||
function addNewList(newListName) {
|
||||
var lastID = 0;
|
||||
if(localStorage.getItem('ToDoList_LastID')) {
|
||||
lastID = localStorage.getItem('ToDoList_LastID');
|
||||
}
|
||||
|
||||
var emptyID = 0;
|
||||
if(lastID !== 0) {
|
||||
var count = 0;
|
||||
while((localStorage.getItem('ToDoList_list' + count)) && (count < lastID)) {
|
||||
count++;
|
||||
}
|
||||
function addNewListClicked(newListName) {
|
||||
var listID = createList(newListName);
|
||||
|
||||
if(count < lastID) {
|
||||
emptyID = lastID;
|
||||
}
|
||||
}
|
||||
|
||||
if(emptyID !== 0) {
|
||||
localStorage.setItem('ToDoList_list' + lastID, newListName);
|
||||
$('li#add_list_last_elem').before('<li><a id="list_' + lastID + '">' + newListName + '</li>');
|
||||
$('a#list_' + lastID).click(function () { openList(lastID); });
|
||||
lastID++;
|
||||
localStorage.setItem('ToDoList_LastID', lastID);
|
||||
} else {
|
||||
localStorage.setItem('ToDoList_list' + emptyID, newListName);
|
||||
$('li#add_list_last_elem').before('<li><a id="list_' + emptyID + '">' + newListName + '</li>');
|
||||
$('a#list_' + emptyID).click(function () { openList(emptyID); });
|
||||
}
|
||||
$('li#add_list_last_elem').before('<li><a id="list_' + listID + '">' + newListName + '</li>');
|
||||
$('a#list_' + listID).click(function () { openList('a#list_' + listID); });
|
||||
$('a#list_' + count).data('listID', listID);
|
||||
}
|
||||
|
||||
// Loads the lists in the Store element
|
||||
function loadLists() {
|
||||
console.log('Recovering data');
|
||||
var maxLists = localStorage.getItem('ToDoList_LastID');
|
||||
if(maxLists) {
|
||||
console.log('Lists found: ' + maxLists);
|
||||
var listData;
|
||||
for(var count = 0; count < maxLists; count++) {
|
||||
listData = localStorage.getItem('ToDoList_list' + count);
|
||||
if(listData) {
|
||||
console.log('Adding list item ' + count);
|
||||
$('li#add_list_last_elem').before('<li><a id="list_' + count + '">' + listData + '</li>');
|
||||
$('a#list_' + count).click(function () { openList($(this)); });
|
||||
$('a#list_' + count).data('listID', count);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var listData = getAllLists();
|
||||
|
||||
listData.forEach(function(list, count) {
|
||||
console.log('Adding list item ' + count);
|
||||
$('li#add_list_last_elem').before('<li><a id="list_' + list.listID + '">' + list.title + '</li>');
|
||||
$('a#list_' + list.listID).click(function () { openList($(this)); });
|
||||
$('a#list_' + list.listID).data('listID', list.listID);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
|
@ -141,7 +90,7 @@ window.addEventListener('DOMContentLoaded', function() {
|
|||
var newListName = $('#new_list_name_input').val();
|
||||
|
||||
if((newListName.length > 0) && (newListName != '')) {
|
||||
addNewList(newListName);
|
||||
addNewListClicked(newListName);
|
||||
|
||||
$('#new_list_name_input').val('');
|
||||
|
||||
|
@ -154,7 +103,7 @@ window.addEventListener('DOMContentLoaded', function() {
|
|||
|
||||
if((text) && (text.length > 0)) {
|
||||
var listID = $('#add_new_item').data('currentlist');
|
||||
addItemToList(listID, text);
|
||||
addItemToListClicked(listID, text);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
99
js/storelists.js
Normal file
99
js/storelists.js
Normal file
|
@ -0,0 +1,99 @@
|
|||
/* Small library to deal with the localStorage with in a simpler way. I also expect it'll make the
|
||||
code clearer to read and minimize errors */
|
||||
|
||||
// Now time for some constants
|
||||
var PREFIX = "ToDoList_";
|
||||
|
||||
// Now time for some GETs
|
||||
function getListTitle(listID) {
|
||||
return localStorage.getItem(PREFIX + 'list' + listID);
|
||||
}
|
||||
|
||||
function getListItemCount(listID) {
|
||||
return localStorage.getItem(PREFIX + listID + '_element_count');
|
||||
}
|
||||
|
||||
function getAllLists() {
|
||||
var maxLists = localStorage.getItem('ToDoList_LastID');
|
||||
var allLists = [];
|
||||
|
||||
for(var count = 0; count < maxLists; count++) {
|
||||
listTitle = getListTitle(count);
|
||||
if (listTitle) {
|
||||
allLists.push({listID: count, title: listTitle});
|
||||
}
|
||||
}
|
||||
|
||||
return allLists;
|
||||
}
|
||||
|
||||
function getItemText(listID, itemID) {
|
||||
return localStorage.getItem(PREFIX + listID + '_element_' + itemID);
|
||||
}
|
||||
|
||||
function isItemChecked(listID, itemID) {
|
||||
var checked = localStorage.getItem(PREFIX + listID + '_element_' + itemID + '_checked');
|
||||
return checked == 'true';
|
||||
}
|
||||
|
||||
function itemExists(listID, itemID) {
|
||||
if (localStorage.getItem(PREFIX + listID + '_element_' + itemID)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// INSERTs and SETs
|
||||
function createList(text) {
|
||||
var lastID = 0;
|
||||
if(localStorage.getItem('ToDoList_LastID')) {
|
||||
lastID = localStorage.getItem('ToDoList_LastID');
|
||||
}
|
||||
|
||||
var finalID = 0;
|
||||
if(lastID !== 0) {
|
||||
var count = 0;
|
||||
while((localStorage.getItem('ToDoList_list' + count)) && (count < lastID)) {
|
||||
count++;
|
||||
}
|
||||
|
||||
if(count < lastID) {
|
||||
finalID = lastID;
|
||||
} else {
|
||||
finalID = lastID;
|
||||
lastID++;
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem('ToDoList_list' + finalID, newListName);
|
||||
localStorage.setItem('ToDoList_LastID', lastID);
|
||||
|
||||
return finalID;
|
||||
}
|
||||
function insertItem(listID, text) {
|
||||
var numElements = getListItemCount(listID);
|
||||
var elementPosition = 0;
|
||||
|
||||
if((numElements) && (numElements > 0)) {
|
||||
var count = 0;
|
||||
while ((itemExists(listID, count)) && (count < numElements)) {
|
||||
count++;
|
||||
}
|
||||
|
||||
if(count < numElements) {
|
||||
elementPosition = count;
|
||||
} else {
|
||||
elementPosition = numElements;
|
||||
numElements++;
|
||||
}
|
||||
} else {
|
||||
elementPosition = 0;
|
||||
numElements = 1;
|
||||
}
|
||||
|
||||
localStorage.setItem(PREFIX + listID + '_element_' + elementPosition, text);
|
||||
localStorage.setItem(PREFIX + listID + '_element_' + count + '_checked', 'false');
|
||||
|
||||
localStorage.setItem(PREFIX + listID + '_element_count', numElements);
|
||||
}
|
Loading…
Reference in a new issue