almightree

clear

• almightree
  • What is it?
    • A Javascript plugin for jQuery >= 1.8.0
    • It makes large nested lists (like this one) easier to navigate
      • Yep, it powers this page!
    • Free Software (GPLv2+)
      • You can find the source code on GitHub
  • Features
    • Folding/Unfolding
      • Click on a node to fold or unfold it, if it has children
      • By default, only the first two layers are visible, the rest is folded
    • Real-time search
      • Type in the search bar at the top to filter the tree
      • The search term and the URL’s hash are kept in sync. Observe: #features
        • Consequence: A sane URL will bring up relevant material for a long time
          • Even when new content is added or the structure changes
      • Search is always case-insensitive
      • Special characters
        • /: separates terms, which are searched for one after the other
          • For example, if you want all occurences of “node” in this “Features” section, use #features/node
        • -: any non-alphanumeric stuff
          • This is for nice URLs, like #special-characters or #setup/step-1
      • Also supports regular expressions!
        • For example, you can search for crossword patterns: #c…s…d
        • Or, words with at least 12 characters? #[a-z]{12,}
    • Intelligent choice of the headline
      • The lowest node with more than one visible child will be displayed as the headline
      • It’s parents will be displayed as a breadcrumb navigation (example)
    • Zooming
      • Click the bullet point in front of a node to search for it’s content
        • In most cases, that means “focusing” on its content (a feature called “hoisting” in many outliners)
    • Undo/Redo
      • Searches performed by clicking (zooms, crumb navigation) are undoable by clicking your brower’s “back” button
  • Setup
    • Complete minimal example
      • Source code
      • Result
      • Alternatively, follow the step-by-step instructions below
    • Step 1: Take a nested HTML list, and tag it with a unique id, for example #almightree
      • Of course, you can (and should ;-) generate the lists using Markdown
    • Step 2: Download almightree and extract it somewhere
    • Step 3: Insert the following lines into your HTML:
      • <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        • … if you haven’t included jQuery already
      • <script src="path/to/jquery.almightree.js"></script>
        • … to include the almightree plugin
      • <script>$(function(){ $("#almightree").almightree({search: "#almightree-search"}); });</script>
        • … to activate the plugin on the <ul> with the id #almightree
        • The search option makes the <input> with the specified id interactive
      • <link rel="stylesheet" href="path/to/almightree.css">
        • This is a default set of style rules
        • If you want to make changes, do it in an additional CSS file to keep the default CSS upgradable
    • Step 4: Report bugs and make feature requests! <3
  • History
    • Inspired by https://workflowy.com/
    • Coded in 2012 to power an old version of my homepage
    • Minor rewrite in 2015
    • Properly published in 2016 :)

Comments?

Send a message to @blinry@chaos.social or drop me a mail at mail@blinry.org. Also, you can support me on Patreon or subscribe to my newsletter!