Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Component Highlights

Owned by Colin Clark
Last updated: Mar 13, 2009 by Daphne OgleVersion comment
4 min read

All Components

  • Well thought out default behaviors allowing you to wire up the component in your environment and be ready to roll
  • Many configurable options to enable a positive user experience in your specific context
  • Easy integration (why?)
  • JavaScript-based reusable "chunks" of user interaction
  • Designed to work well with screen readers, screen magnifiers and low screen resolutions (Do we really want to list out a bunch of assistive technologies?  The list could go on and on.  What I heard from Mike E. is that it's better to think about the need rather than the technology)

Reorderer

 A reusable JavaScript library that enables developers to create accessible drag-and-drop solutions in a variety of contexts

End Users

  • Reorder objects via mouse and keyboard-based drag and drop interactions
  • Easily see where object will be "dropped" at any point during the drag operation

Component Integrators

  •  

Layout Reorderer

The Layout Reorderer provides drag and drop customization of modules in a portal environment. (IS IT ONLY IN A PORTAL ENVIRONMENT?)

End Users

  • Reorder objects via mouse-based drag and drop and keyboard interactions
  • Easily see where object will be "dropped" at any point during the drag operation
  • Visually preview the new layout as object is "dragged" around the screen
  • Discover and understand locked portlets

Component Integrators

  • Quickly wire up "draggable" elements and "droppable" targets with a simple script.
  • Configurable options allow for "locked" content, specifying drag handles, and injecting custom CSS classes.

List Reorderer

The List Reorderer provides reordering of elements in a list through keyboard and mouse-based drag and drop.  As a supplement it can also allow users to number items to set their order in the list.

End Users

  • Reorder items in a list via mouse-based drag and drop and keyboard interactions
  • Easily see where item will be "dropped" at any point during the drag operation
  • Configurable option to include numbering interaction for reordering the list.

Component Integrators

  • Quickly wire up "draggable" elements and "droppable" targets with a simple script.
  • ????

Image Reorderer

The Image Reorderer is a JavaScript-based user interface component that lets users reorder images within a collection. The Image Reorderer provides fully keyboard-accessible and mouse-based manipulation of images on-screen. It is intended to work well with screen magnifiers, low screen resolutions, and linear layouts. The Image Reorderer is based on the Reorderer, reusable JavaScript library that enables developers to create accessible drag-and-drop solutions in a variety of contexts. 

End Users

  • Reorder a collection of thumbnails via mouse-based drag and drop and/or keyboard interactions.
  • Easily see where item will be "dropped" at any point during the drag operation

Component Integrators 

  • Quickly wire up "draggable" elements and "droppable" targets with a simple script.
  •  

Uploader

The Uploader uploads one or multiple files at a time. Users can select desired files from their computer, view them in a queue, add or remove files to and from the queue, and upload them at once.

End Users

  • Allows selecting multiple files in a single OS-specific file dialog
  • Shows the selected files in a queue
  • Allows adding or removing files from the queue
  • Provides complete progress information as the files upload
  • Shows whether the files have been uploaded successfully or not

Component Integrator

  • The user interface is completely customizable in HTML. With the exception being the OS specific file open dialog.

Inline Edit

Inline Edit allows a user to do quick edits to simple text without having to switch modes or screens. All work is done on the same interface which helps the user maintain context.

Simple Text

Simple Text Inline Edit allows a user to do quick edits to simple text without having to switch modes or screens. All work is done on the same interface which helps the user maintain context.

End User

  • Allows users to do a quick edit to simple text within the context of their or work
  • Allow users to undo last action
  • Allow users to redo last action
  • Visual indicators and tool tip to help users discover editable fields

Component Integrator

  •  

Rich Text

Rich Text Inline Edit allows a user to do quick edits to formatted text without having to switch modes or screens. All work is done on the same interface which helps the user maintain context.

End User

  • WYSIWYG style editing within the context of the user's work
  • Consistent display of information being edited from edit to display (what you see is really what you get)
  • Clear feedback that change(s) has been saved
  • Users can undo last edit
  • Users can redo last edit
  • WYSIWYG editor is configurable so users only get edit tools that make sense in their context

Component Integrator

  • Configurable wysiwyg actions
  • ??????

Dropdown

Dropdown Inline Edit allows a user to do quick edits to a constrained field without having to switch modes or screens. All work is done on the same interface which helps the user maintain context.

End User

  • Quick and easy edit from dropdown within the context of user's work
  • Discoverable by users without being a distraction from getting their work done
  • Clear indication of current selection
  • Clear feedback that change(s) has been saved
  • Right sized click target so it doesn't require precise mouse movement
  • On mouseover, visual indication that field is editable via a dropdown

Component Integrator

  •  

Pager

The Pager allows users to break up long lists of items into separate pages. They may decide whether or not they want paging, and how many results are displayed per page.

End User

  • Allow users to change the number of items shown per page
  • Allow users to jump to the first, last, and the "middle" pages easily
  • Allow users to jump to an item or a certain set of records (e.g. students with a last name starting with "G")
  • Be aware of the length of list and do not display widget when there is only one page
  • Show users how many items there are and where they are in the list (i.e. viewing 11 - 20 of 2,356)
  • Remember users' paging settings and save it across visits to the site

Component Integrator

User Interface Options

Transform the presentation of the user interface and content resources so that they are personalized to an individual user's needs.

End User

  • Allows users to specify presentation of content:  easily and efficiently and with enough options to accomodate the spectrum of user preference without overwhelming them with options.
  • Pick from several preset templates designed to address common needs
  • Customize display options
  • Change colors, fonts, text spacing, image display, and more
  • Live preview of preferences as they are chosen
  • Easy return to default settings
  • Easily and efficiently navigable using the mouse, keyboard and screen readers

Component Integrator