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)
+}