Lesson 17: We showcase a task manager built with BANano + Jquery
This lesson is more about the logic and functionality than the UX / used libraries.
1. Add a task
2. Update a task
3. Delete a task
4. Move a task up
5. Move a task down
6. Save tasks to LocalStorage
7. Load tasks from LocalStorage
8. Adding buttons inside a list
9. Adding events to items before they get added to UX.
10. Detecting events on button clicks for elements without ids by using BANanoEvent
As we are not using any framework, we have not styled the UX for this.
Get lesson content here,,
https://github.com/Mashiane/BANano4Dummies
What this meant...
Our sub to add the tasks had to be updated to ensure that we have X, E, U and D buttons inside the list. Whenever X,E,U,D is clicked, we needed to trap this and fire the right event.
In creating each BANAnoElement below, we called JQuery and converted the object from Jquery to a BANanoElement. We are doing this because at time of creation, the element is not yet added to the body of the page and it also does not have an identifier.
Code:
Sub addTaskElement(taskName As String)
'delete button segment
Dim delete As BANanoElement = JQuery.createElement($"<button title="Delete" class='delete'>X</button>"$)
delete.On("click", Me, "task_delete")
'edit button segment
Dim edit As BANanoElement = JQuery.createElement($"<button title="Edit" class='edit'>E</button>"$)
edit.On("click", Me, "task_edit")
'move up button
Dim moveUp As BANanoElement = JQuery.createElement($"<button title="Up" class='move-up'>U</button>"$)
moveUp.On("click", Me, "task_up")
'move down button
Dim moveDown As BANanoElement = JQuery.createElement($"<button title="Down" class='move-down'>D</button>"$)
moveDown.On("click", Me, "task_down")
'span to show the item
Dim span As BANanoElement = JQuery.createElement($"<span class='task-name'> ${taskName}</span>"$)
'create an empty list item
Dim task As BANanoElement = JQuery.createElement($"<li class="task"></li>"$)
'join other elements
JQuery.AppendMulti(task, Array(delete, edit, moveUp, moveDown, span))
'add to the list
JQuery.Append("#task-list", BANano.ToObject(task))
End Sub
.AppendMulti, adds all the children to the parent task element using JQuery. We then append everything to the 'task-list' element.
In this case use the .On method to add an event to the button. This is not the only method to do this. We might hav just created a template html for all of this and just assigned events to it later.
The last item in the <li></li> item is the text of the task being added, so in our edit button, we set the mode to 'E', then read the lastSibling in the list and then set the value of the textbox.
Code:
'when a task is being edited
Sub task_edit(e As BANanoEvent)
Mode = "E"
'get the parent node of the button as the button is inside a li
Dim task As BANanoElement = JQuery.ParentNode(e)
'get last child in the list
lastEdit = JQuery.LastChild(task)
Dim text As String = lastEdit.GetText
'edit mode show entry
BANano.GetElement("#new-task-name").SetValue(text)
'focus to text box
JQuery.Focus("#new-task-name")
End Sub
To delete the task, we need to remove the complete <li></li> item, so we need a way to get it and then remove it from the list. Here we use the BANanoEvent and get the 'target' and from the target get the 'parentNode' to be able to get the <li></li> the button is inside of.
Code:
'when a task is being deleted
Sub task_delete(e As BANanoEvent)
Mode = ""
'get the parent node of the button as the button is inside a li
Dim task As BANanoElement = JQuery.ParentNode(e)
'remove the item from the list
JQuery.Remove(task)
SaveTasks
End Sub
The ParentNode sub is NOT JQuery (just saved there) is...
Code:
'get the parent node from the event
Sub ParentNode(e As BANanoEvent) As BANanoElement
'get the target from event
Dim target As BANanoObject = e.OtherField("target")
'get the parentNode from target
Dim parent As BANanoElement = BANano.ToElement(target.GetField("parentNode"))
Return parent
End Sub
Moving the tasks up / down
For that we get the <li></li> that we have selected using ParentNode, then we move that up/down
Code:
'when a task is being moved up
Sub task_up(e As BANanoEvent)
Mode = ""
'get the li the up button sits inside
Dim task As BANanoElement = JQuery.ParentNode(e)
'move the item up
JQuery.MoveUp(task)
SaveTasks
End Sub
'when a task is being moved down
Sub task_down(e As BANanoEvent)
Mode = ""
'get the task the button sits inside of
Dim task As BANanoElement = JQuery.ParentNode(e)
'move item down
JQuery.MoveDown(task)
SaveTasks
End Sub
After we have moved an element, they are saved to LocalStorage.
Let's look at moveup in a simplified way..
Code:
'move an item up
Sub MoveUp(itm As BANanoElement)
'get the previous sibling
Dim prev As BANanoElement = BANano.ToElement(itm.GetField("previousSibling"))
Dim s As BANanoObject = BANano.ToObject(itm)
Dim t As BANanoObject = BANano.ToObject(prev)
JQuery.Selector(s).RunMethod("insertBefore", t)
End Sub
In Summary..
1. We click a button inside a list, this fires an event and returns a BANanoEvent
2. We read this BANanoEvent in task_up, 2.1 we get the target of BANanoEvent and from the target 2.2 we get the parentNode, this gives us the LI item
1. We get the list item from 2.2, (a BANanoElement) and pass this to move up sub
2. The LI is storing the link to the previousSibling, we get that previous LI
3. We then convert the current LI and the previous LI to BANanoObjects and then use JQuery 'insertBefore' method to move these around.
Mind boggling...
