About and Help

This is a sample ToDo application and demonstration of the new Tree widget for Clibu.

For more information see Unveiling our new Clibu Tree Widget which covers the previous release.

Capabilities include:

  • Multiple tree Ordering to get the best view:
    • Order by Name (the current Clibu view)
    • Order by Date Created (tree displays, year, month, week, day - tree item(s))
    • Order by Date Modified (tree displays, year, month, week, day - tree item(s))
    • Used defined order. Lets you order siblings (items at the same tree level)  however you want.
    • Independant ascending/descending Sort for each view.
  • Tree item hoisting. Enables any tree item to become the root or top-level item in the tree.
  • Extensive Tree Filtering to see only what's of interest:
    • Filter by Icon, Background Color, Checked state, Date Created & Modified.
    • Filters can be set to either Show or Hide matching items.
    • Date filters include: This Week, Last Week, This Month etc.
    • Fuzzy text search.
    • Match on Any or All filters.
    • Enable each filter independantly.
  • Rearrange the tree using drag and drop. (Excluding Date views)
  • Used selectable Tree Icons - displayed to the left of the tree item name.
  • Ability to select the background color for each tree row.
  • Tree item checkboxs - toggle completion status.
  • Optional Tree lines - for easier tree visualization.
  • Expand/Collapse all descendants.
  • Branch Expand/Collapse state persists across sessions. (Excluding Date views)
  • Designed following Web Content Accessibility Guidelines
  • Keyboard accessible: Tab/Shift+Tab, Arrow Keys, Enter & Escape etc.
  • Designed for Smartphones, Tablets and Desktop devices
  • Shortcut keys coming soon.

How to:
New - Inserts a new item at the top level of the tree.
Order - Lets you switch between tree views and change their Sort order.
Hoist - Toggles to show the hoisted view or return to full view.
Filter - Selects from the range of filter capabilities.
To rearrange the tree simply Drag and Drop tree items (Excluding Date views).
To change item text, background color or icon click on tree item icon , etc.
To create a Child item, Hoist a branch or Delete a tree branch click on tree item menu icon
Settings menu:
  • Tree Lines - shows or hides tree lines.
  • Add demo content - Adds a set of items to the tree with random Date values.
  • Empty Tree - Deletes all tree items.
  • Debug - displays information to assist in locating issues. Only available in debug mode.

* All testing has been done using the latest version of Google Chrome on Desktop, Tablet and Smartphone. Please use Chrome for now.

The new Clibu Tree has or is using the following code. Many thanks to the associated developers.
Lit-Element by Google - A simple base class for creating fast, lightweight web components
Scott Lott - nanoSQL - Universal database layer for the client, server & mobile devices
Emotion - CSS-in-JS library designed for high performance style composition
Bence Szabo - Material Design Components in Pure CSS
observer-util - Reactive State Management
Fred Daoud - Meiosis - Awesome State Management for Web Applications
Parcel.js - Blazing fast, zero configuration web application bundler

©Soft As It Gets P/L 2019