MatrixView — Advanced Keyboard & Mouse Selection for HTML Lists using JavaScript and Prototype

Like MatrixView? Try CalendarView!

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.
Selection by Mouse & Keyboard
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
A simple example showing how a photo gallery might be enhanced to add keyboard and mouse selection capabilities to allow for context-sensitive actions to be performed on the selected photos.
File Browser
A slightly more advanced example that demonstrates a file browser within a web application.
File Browser w/Drag-Selection 1.1 Preview!
This example is built on the File Browser example above, but includes a preview of the drag-selection support coming in version 1.1. Please note that the drag-selection support is not yet fully complete, this is simply a preview.

Have an iPhone? Use PushDialer to dial your iPhone from your Mac using Push Notifications from Address Book, Mail, Safari and more... From the developer of MatrixView.

Download

MatrixView requires Prototype 1.6 (or later).

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

You may also access the source code at GitHub.

Release History

Version 1.0.3 — March 27th, 2008

Fixed some issues with scoping that could have led to unintended behavior on pages that had other HTML unordered lists that were not being managed by MatrixView.
Fixed an issue with a recent change that went into the Safari 3.1 release that prevented the arrow keys from being detected when they were pressed.

Version 1.0.2 — February 12th, 2008

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

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