wip: Create new example built with Tag

examples/tag/LICENSE

@@ -0,0 +1,7 @@
+Public Domain
+
+Author: Tyler Childs
+Email: [email protected]
+Date: January 3rd, 2022
+
+"Tyler Childs <[email protected]>"

examples/tag/README.md

@@ -0,0 +1,17 @@
+# Tag • [Demo](https://thelanding.page/apps/todo) • [TodoMVC](http://todomvc.com)
+
+Tag is a light-weight library currently incubating at Netflix. The main goals are portability through declaration, approachability with a limited volcabulary, and adhereing to web-first principles.
+
+## Support
+
+- [Email](mailto:[email protected])
+
+*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
+
+## Implementation
+
+Uses [Tag](https://thelanding.page/tag)
+
+## Credit
+
+Created by [~tychi](http://tychi.me)

examples/tag/data/initialTodoList.js

@@ -0,0 +1,25 @@
+const initialTodoList = {
+ filter: 'All',
+ items: [
+ {
+ id: 'dishes',
+ completed: false,
+ editing: false,
+ task: 'Dishes'
+ },
+ {
+ id: 'groceries',
+ completed: true,
+ editing: false,
+ task: 'Groceries'
+ },
+ {
+ id: 'bills',
+ completed: false,
+ editing: false,
+ task: 'Bills'
+ }
+ ]
+}
+
+export default initialTodoList

examples/tag/features/clearCompleted.js

@@ -0,0 +1,30 @@
+// a helper function for rendering the clear and complete actions
+export function showClearCompletedAction($) {
+ // grab the items state
+ const { items } = $.get()
+ const button = `
+ <button data-clear-completed class="clear-completed">
+ Clear completed
+ </button>
+ `
+ // true, if there are are COMPLETED items
+ const hasCompleteItems = items.some(x => x.completed)
+
+ return hasCompleteItems ? button : ''
+}
+
+// adds a click event listener for when the clear completed action is performed
+// the items state is then updated to contain only incomplete items
+export function onClearCompletedAction($) {
+ $.on(
+ 'click',
+ '[data-clear-completed]',
+ function clearCompleted() {
+ const { items } = $.get()
+ const onlyIncompleteItems = items.filter(x =>
+ !x.completed
+ )
+ $.set({ items: onlyIncompleteItems })
+ }
+ )
+}

examples/tag/features/counting.js

@@ -0,0 +1,10 @@
+// a render helper for returning the number of tasks remaining
+export function showIncompleteCount($) {
+ const { items } = $.get()
+ const incomplete = items.filter(x => !x.completed)
+ return `
+ <span class="todo-count">
+ ${incomplete.length} remaining
+ </span>
+ `
+}

examples/tag/features/todoList.js

@@ -0,0 +1,83 @@
+const ALL = 'All'
+const ACTIVE = 'Active'
+const COMPLETED = 'Completed'
+
+export function showFilters($) {
+ // get the filter state
+ const { filter } = $.get()
+
+ // a render helper to generate a button from a key
+ const render = (key) => `
+ <li>
+ <a
+ href="#/${key}"
+ data-filter="${key}"
+ ${filter === key ? 'class="selected"' : ''}
+ >
+ ${key}
+ </a>
+ </li>
+ `
+
+ // loop over filter options and return a string of buttons
+ return [ALL, ACTIVE, COMPLETED].map(render).join('')
+}
+
+// returns the list of items corresponding to the current filter
+export function showListItems($) {
+ // grab the filter and items state
+ const { filter, items } = $.get()
+
+ // a callback function that determines if an item matches the current filter
+ const filterItems = (item) => {
+ // create a dictionary of true/false from the item based on filter
+ const lookup = {
+ [ALL]: true,
+ [ACTIVE]: !item.completed,
+ [COMPLETED]: item.completed
+ }
+
+ // use the current filter to know if the item is shown/hidden
+ return lookup[filter]
+ }
+
+ return items
+ .filter(filterItems)
+ .map(item => {
+ // if the item is completed, mark it as done for styling
+ const classList = `class="${
+ item.completed ? 'completed' : ''
+ } ${
+ item.editing ? 'editing' : ''
+ }"`
+
+ const checked = item.completed
+ ? 'checked="true"'
+ : ''
+
+ // for all visible items return a toggle button and a delete button
+ return `
+ <li ${classList}>
+ <div class="view">
+ <input ${checked} data-toggle-id="${item.id}" class="toggle" type="checkbox">
+ <label data-edit-id="${item.id}">${item.task}</label>
+ <button data-delete-id="${item.id}" class="destroy"></button>
+ </div>
+ <input data-change-id="${item.id}" class="edit" type="text" value="${item.task}" />
+ </li>
+ `
+ }).join('') // convert this array to a string
+}
+
+export function onFilterChange($) {
+ // adds a click event listener for when a filter is chosen
+ // the filter state is the updated to contain the new filter
+ $.on(
+ 'click',
+ '[data-filter]',
+ function chooseFilter(event) {
+ const { filter } = event.target.dataset
+ $.set({ filter })
+ }
+ )
+}

examples/tag/features/todoListItems.js

@@ -0,0 +1,195 @@
+const ENTER_KEY = 13
+
+// a render helper for returning a create task form
+export function showNewItemForm(_$) {
+ return `
+ <input data-new-item-input class="new-todo" placeholder="What needs to be done?" autofocus>
+ `
+}
+
+// adds a submit event listener for the form
+export function onNewItemInput($) {
+ function newItemHandler($, event) {
+ const input = event.target
+
+ if (event.which === ENTER_KEY) {
+ // if the input is valid, create a new item and clear the field
+ if(validate(input)) {
+ createNewTodoItem($, input.value.trim())
+ input.value = ''
+ }
+ }
+ }
+
+ $.on(
+ 'keypress',
+ '[data-new-item-input]',
+ function (event) { newItemHandler($, event) }
+ )
+}
+
+// add a keypress event listener for updating an item
+export function onItemEdit($) {
+ function editItemHandler($, event) {
+ const id = event.target.dataset.editId
+ const item = findItemById.call($, id)
+
+ updateItem($, {
+ ...item,
+ editing: true,
+ })
+ }
+
+ $.on(
+ 'dblclick',
+ '[data-edit-id]',
+ (event) => editItemHandler($, event)
+ )
+}
+// add a keypress event listener for updating an item
+export function onItemChange($) {
+ function changeItemHandler($, event) {
+ const id = event.target.dataset.changeId
+ const { value } = event.target
+ const item = findItemById.call($, id)
+
+ updateItem($, {
+ ...item,
+ editing: false,
+ task: value
+ })
+ }
+
+ $.on(
+ 'keypress',
+ '[data-change-id]',
+ (event) => {
+ if (event.which === ENTER_KEY) {
+ changeItemHandler($, event)
+ }
+ }
+ )
+
+ $.on(
+ 'blur',
+ '[data-change-id]',
+ (event) => changeItemHandler($, event)
+ )
+}
+
+// add a click event listener for toggling a task's completeness
+export function onItemToggle($) {
+ function toggleItemHandler($, event) {
+ // get the id of the toggled task and locate the corresponding item in state
+ const id = event.target.dataset.toggleId
+ const item = findItemById.call($, id)
+
+ // calls a helper function to update the items state for this updated item
+ updateItem($, {
+ ...item,
+ completed: !item.completed
+ })
+ }
+
+ $.on(
+ 'click',
+ '[data-toggle-id]',
+ (event) => toggleItemHandler($, event)
+ )
+}
+
+// add a click event listener for removing an item from items state
+export function onItemDelete($) {
+ function deleteItemHandler($, event) {
+ const id = event.target.dataset.deleteId
+ const item = findItemById.call($, id)
+
+ // calls a helper function to delete this item from the items state
+ deleteItem($, item)
+ }
+
+ $.on(
+ 'click',
+ '[data-delete-id]',
+ (event) => deleteItemHandler($, event)
+ )
+}
+
+// a quick check to see if the value is not empty
+function validate({ value }) { return !!value }
+
+// a helper function to locate an item by an id
+function findItemById(id) {
+ const { items } = this.get()
+ return items.find(x => x.id === id)
+}
+
+// a helper function to add an item to the items state
+function createNewTodoItem($, task) {
+ // build a new item, with a random id for collision-free duplicates
+ const item = {
+ task,
+ completed: false,
+ editing: false,
+ id: task + Math.floor((Math.random() * 100) + 1)
+ }
+
+ // a helper function for appending an item into the item state
+ const handler = (state, payload) => {
+ return {
+ ...state,
+ items: [
+ ...state.items,
+ payload
+ ]
+ }
+ }
+
+ // add the new item to the items state
+ $.set(item, handler)
+}
+
+// a helper function to update the items state for an item
+function updateItem($, item) {
+ // a helper function for merging an item with updates in the items state
+ const handler = (state, payload) => {
+ return {
+ ...state,
+ items: [
+ ...state.items.map((item) => {
+ if(item.id !== payload.id) {
+ return item
+ }
+
+ return {
+ ...item,
+ ...payload
+ }
+ })
+ ]
+ }
+ }
+
+ // update the item in the item state
+ $.set(item, handler)
+}
+
+// a helper function to remove an item from the items state
+function deleteItem($, item) {
+ // a helper function for filtering the current item out of the item state
+ const handler = (state, payload) => {
+ return {
+ ...state,
+ items: [
+ ...state.items.filter((item) => {
+ if(item.id !== payload.id) {
+ return item
+ }
+ })
+ ]
+ }
+ }
+
+ // remove the item from the item state
+ $.set(item, handler)
+}