FileFabric

Lightweight, Google Docs-like file list viewer.

Demo

Check out https://plot.ly/plot. You'll have to create an account and save some Plotly files.

Getting Started

Include filefabric.js and filefabric.css. Then create a new file tree like so:

fileViewer = new FileFabric( configObject )

configObject defines the columns and rows of the file. Here's an example:

var configObject = {
    fileJson : fileJson,
    containerDiv : containerDiv,
    columns : [
        {name: 'Name', key: 'data', template: ffTemplate.fileName, onclick: fileNameOnClick, },
        {name: 'Preview', key: 'imgurl', template: ffTemplate.preview },
        {name: 'Sharing', key: 'sharing' },
        {name: 'Shortlink', key: 'shortlink', template: ffTemplate.shortlink },
        {name: 'Created', key: 'created', cellClasses: 'tsrel' },
    ],
    contextMenu : fileItemContextMenu,
    changeFolder : toggleLoadMoreBtn,
}

Possible keys for the configuration object are:

• fileJson JSON array of row objects. More on this later.
• containerDiv DIV container for file list
• columns Array of column objects. Possible column object keys:
  • name Name of file list column
  • key Key in fileJson that matches column to row data
  • template (optional) Template function for column cells **
  • onclick (optional) Function - click event listener for cell text
  • cellClasses (optional) String - class names string to add to all cells in column
• contextMenu (optional) Function - contextMenu (right-click) event listener
• changeFilder (optional) Function - called after folder changes

** Template functions are passed a row object from the fileJSON array and return the HTML for that cell.

Row Data

Row data (the list of files) is encoded in the fileJson array.
This will likely be returned by an AJAX call to a server.
Each row gets on object. For example,

var fileJson = JSON.stringify([
       {
            attr: { id: 'row1', rel: 'folder' }
            data: 'Row 1 Filename',
            imgurl: 'http://imgur.com/111',
            sharing: 'Private',
            shortlink: 'https://bit.ly/111',
            created: 'August 1'
       },
       {
            attr: { id: 'row2', rel: 'spreadsheet' }
            data: 'Row 2 Filename',
            imgurl: 'http://imgur.com/222',
            sharing: 'Shared',
            shortlink: 'https://bit.ly/222',
            created: 'January 3'       
       }
]);

This would create a file viewer with 2 files - 1 for each row. attr is an object HTML attributes to add to the row. The other top level keys correspond to the key fields in the columns object (see above). All file items must have a unique id key in the attr object, everything else is optional.

Public Methods

FileFabric objects ("fileViewer" from the example above) have a number of public methods:

fileViewer.parentRow( el )

Returns the the top-level HTML row element given an HTML element inside the row.

fileViewer.showFolder( folderObject )

Swipes the file viewer to show contents of a new folder. Accpeted keys for folderObj are

• fileJson JSON string of files in folder
• folderId Unique id of folder
• folderName Name of folder

fileViewer.retrieveFolder( fid )

Given a folder id, return the file objects for that folder if the folder has been loaded via showFolder().
If a folder with that id does not exist, return false.
This allows for "lazy-loading" - not loading folder contents from the server until a user opens that folder.

fileViewer.renameCell( fid, key text )

Reset the text contents of a cell

• fid file id of item (row)
• key column id of item
• txt new name for cell

fileViewer.getCheckedItems()

Return all checked file items as an array of DOM elements

fileViewer.moveCheckedItems( parentId )

Given a folder id (parentId), move all checked file items into that folder.

fileViewer.removeCheckedItems()

Remove all checked items

fileViewer.addItems( fileJson, position )

Add rows to the root of the file tree

• fileJson unparsed JSON, array of file objects
• position optional, 'first' to preprend items at beginning of folder

fileViewer.setItemAttributes( id, attributes )

Set HTML attributes fo a row with id id attributes is an object of key-value pairs

fileViewer.redrawOne( newNode )

Redraw a table row given a new node

fileViewer.createOrUpdateOne( node, position )

Given a single node object, create it if it does not exist; update it if it does Only updates the node attrributes, not the row cells. use redrawOne() to redraw cells

• node a single row object
• position where to append node in tree if creating it, either "first" or "last"

fileViewer.getItemsByAttribute( key, val )

Return all loaded rows with attribute 'key' having value 'val'.
For example, fileViewer.getItemsByAttribute( 'class', 'hello' )
returns all rows having class 'hello'

fileViewer.getCurrentFolder()

Returns the id and name of the current folder in view in an object with keys id and name
The root folder has a reserved id, which is "ff-root"

fileViewer.toggleCheckboxes()

Click event listener for a "select all" checkbox
Behavior:
No rows are selected --> select all rows
All rows are selected --> deselect all rows
Some rows are selected --> deselect all rows

fileViewer.selectAllItems( state )

Select or deselect all rows
Set state to true to select all rows; false to deselect rows, defaults to true

License

This software is released under the MIT license