DC Experiment

The purpose of this experiment is to apply a creative solution to the perceived functionality gap of document central (Vision feature parody theme). Document Central allows a CMS user to specify a folder from the media library and output a document list resembling the file and folder structure in the media library. This includes the ability to show files, as well as files in sub folders within the specified directory.

Example

How does it work?

This one is quite the adventure... so buckle up!

The underlying functionality that makes this possible is a content list RSS feed. The content list iterates over all the media objects in a specific directory (document central) and outputs the items as an object array in JS. [ content list = DocumentCentral, RSS feed url = https://themedev3-pointrussell.opencities.com/feed.rss?listname=documentcentral ] This array provides an item for every document inside the document central folder regardless of nesting.

All the remaining work is done via JS on page load using recursive functions to create a document hierarchy tree based on document paths (mirroring the folder structure) and printing the tree to the DOM for users. There are 3 arrays / objects created to achieve the outcome:

  • The initial array created by the content list and held as a global value
  • A filtered, cleaned, and sorted array which takes the specified path and makes that the root of the object array
  • A deeply nested object which maps the folder structure - this is created by evaluating all paths in the filtered array

The JS currently lives in an embed on this page (view source... wink wink) but should be distributed to the theme plugin JS files for distributed use across an entire website instance. 

Just for funzies... doing a bit of logging (pop that inspector) to showcase the different arrays / objects and check performance with a nifty little console timer.

Usage:

Set the root path to show specific folders (instead of the entire document central directory) - type the path in the WYSIWYG editor - example: "/hr/". Then highlight the path and apply the "Document Central" paragraph style.

The HTML will look like "<p class="document-central-container">/hr/</p>" - the class .document-central-container is the control class the JavaScript is looking - it takes the text in the <p> to set the new root path for the script.

 

What are the limitations?

  • Only one document central instance per page (this can be resolved with some refactoring - out of scope for now)
  • No interface to select folder from the media library (this requires product - part of product concept)
  • Manual typing of root path in WYSIWYG editor (not great UX, opens up potential for errors)

 

What else can we add?

  • Add document icons, folder icons, and file sizes [DONE]
  • Performance improvement [DONE]
    The current experiment calls the underlying RSS feed on each page load - Storing the main document central object array and placing it in session storage will reduce calls to a single initial call, and subsequent calls (other pages with document central calls during the same session) utilize the array from browser storage.
  • Ability to expand and collapse files under folders [DONE]
    In situations where there are a lot of documents and sub folders it may provide a better UX to expose only the root documents on load.
  • Have folders show up after files at all nested levels [DONE]
    The paths are currently being sorted in the filtered array but the evaluation is only happening on alpha characters with no regard for "folder depth" which has yielded unexpected results.

 

miami_internal_html.xlsx(XLSX, 393KB)

small-business.pdf(PDF, 358KB)

 

Back to top