MatrixView — JavaScript Library for the Prototype Framework

MatrixView is a JavaScript library that enables web application developers to easily and unobtrusively add rich functionality to standard HTML unordered lists, such as keyboard navigation and mouse selection. It is great for enhancing photo galleries, file browsers, and more! MatrixView is written for use with the Prototype framework.

MatrixView is released under the MIT License.

Features

Unobtrusive Design
MatrixView stays out of your way so you can focus on what's important. Just point it at a standard unordered list and MatrixView takes care of the rest!
Callback Support
Define custom callbacks/handlers for various events within the matrix view, such as opening or removing an object.
Object Selection with Keyboard/Mouse
Handles selection of one or more objects using your keyboard and mouse. Click to select, double-click to open, combine clicks and keyboard navigation to expand selection with shift+click and shift+arrows. Also supports common keyboard shortcuts, such as Ctrl+A to select all objects, enter to open, and backspace/delete for deletion.
Keyboard Navigation
Allows you to navigate the matrix using the arrow keys and other shortcuts on your keyboard.

Examples

Photo Gallery
Demonstrates how the MatrixView might be used in a photo gallery situation.
File Browser
Demonstrates how the MatrixView might be used in a file browser situation.

Download

MatrixView requires Prototype 1.6 (or later).

matrixview-1.0.1.zip — Library, Examples, Documentation
matrixview.js — JavaScript Library

You may also checkout the source code from Subversion at http://code.aspect.net/public/matrixview or browse the source code.

Release History

Version 1.0.2 — Not Released

The deleteHandler now works as expected. Turns out "delete" is a reserved word in JavaScript, so the internal delete function was renamed to destroy. Also added listeners for the standard delete key code as well as Safari's crazy delete key code.

Version 1.0.1 — November 27th, 2007

Fixed an issue with the examples and documentation that prevented Internet Explorer from initializing the MatrixView.
Replaced the images that were being used in the Photo Gallery example, as the ones used previously are no longer covered under a Creative Commons license. This change was also retroactively applied to the 1.0.0 package.

Version 1.0.0 — November 16th, 2007

Initial release

Development Roadmap

The following is a tentative agenda for future development of MatrixView. If you have any feature requests or suggestions, please contact me. Additionally, if you are interested in contributing enhancements to MatrixView, please feel free to submit patches or contact me to request possible repository access.

Version 1.1

Support multiple MatrixView's per page
Improve support for the iPhone (disable selection support, etc)
General cleanups and better code abstraction

Version 2.0 and beyond

Mouse drag-selection

Support MatrixView Development

MatrixView is developed in the author's spare time. If you find it to be useful within your web application, please consider making a small donation to support and encourage future development.

Usage Instructions

Options

MatrixView has a number of options that can be set at the time of initialization.

Option	Description
deselectHandler	Specify a function will be called when any selection is cleared.
deleteHandler	Define a function that will be called upon any captured delete action for any selected items within the view.
openHandler	Specify a function that will be called when an item or a selection of items is opened (e.g. by double-click or pressing Enter).
selectHandler	Specify a function to be called upon the selection of an item within the view.

Setting up a MatrixView

Example


  <html>
    <head>
      ...
      <script type="text/javascript" href="matrixview.js"></script>
      <script type="text/javascript">
        window.onload = function() {

          var matrixView = new MatrixView(
            $('matrixView'),
            {

              selectHandler : function(photos) {
                selectedItems = window.matrixView.selectedItems.size()
                totalItems    = window.matrixView.element.getElementsBySelector('li').size()
                if (totalItems > 1)
                  $('statusBar').update(selectedItems + ' of ' + totalItems + ' Photos')
                else
                  $('statusBar').update(selectedItems + ' of ' + totalItems + ' Photo')
              },

              deselectHandler : function() {
                totalItems = window.matrixView.element.getElementsBySelector('li').size()
                if (totalItems > 1)
                  $('statusBar').update(totalItems + ' Photos')
                else
                  $('statusBar').update(totalItems + ' Photo')
              },

              openHandler : function(element) {
                alert('No openHandler defined.')
              }

            }
          )
        }
      </script>
      ...
    </head>
    <body>
      ...
    </body>
  </html>

MatrixView for Prototype