future androgenously-apparelled pop icon
Overview
Trary is a JavaScript widget that offers a clean, efficient interface for browsing arbitrary sets of data. It is designed to support object fields (attributes) as well as deeply nested data associations. The interface can be customized on a per-item basis with icons, CSS classes, CSS styles, and various JavaScript events.
Details
If you're interested in playing around with Trary or perhaps just checking out the source code:
- Download or view the JavaScript source code and example CSS
- Read this brief-but-thorough tutorial on Trary JSON data interpretation
This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Nifty little icons courtesy of famfamfam.
Notes
The code is currently under heavy development; nevertheless, I'm offering a prototypical version here (hopefully with regular updates) while I work on it. I'd be delighted to receive input from any fellow widget-o-philes out there, especially those who have specific uses in mind. The more accessible and universal (yet still focused) the API can be, the better.
For reference, here are some issues and features that I'm currently persuing:
- Refactoring HTML rendering code. I have refactored the display code, though some optimization may still be warranted. Currently, the widget shell is drawn initially, and then the first time a path is requested, its content is drawn via innerHTML (which has been shown to be drastically faster than procedural DOM manipulation). Thereafter, a reference to the top-level content node is contained in a hash, and can be disconnected/reconnected to the container when necessary.
- Optimal cross-browser CSS approaches. As you can see, I have opted not to use a single table, in order to accomodate different data value sizes as well as natural browser overflow in each column. Unfortunately, overflow varies quite crappily between different browsers (in particular, overflow-x & y is useful in Trary's case, but not supported in the still-widely-used IE6), so I'm looking into other CSS approaches as well as possible JS scrolling solutions. But there are issues of choice, as well: should the header expand when the path gets longer? Would some people want a more 'accomodating' style, while others require a statically-sized version? Perhaps a few CSS templates, or even 'style modes', are in order.
- Full, horizontally-scrollable column depth. Code-wise, it's actually easier to generate "unlimited" columns as opposed to incrementing a few at a time. However, like I mentioned above, overflow issues are preventing this feature from being pretty in each and every browser. Perhaps with a little more time and hackery, I will come up with a satisfactory solution.
- Solid control via an API. Once the display situation has matured, making Trary accessible to users will be my number one priority. Not everyone wants to wade through source code, so advanced customizations should be available and easily understandable.
- Advanced data manipulation Right now Trary is primarily a display tool, but it wouldn't be too difficult to add in methods for various manipulations. Tie that in with some AJAX, and you've got a petite, efficient, quickly-customizable admin utility.
- XML and YAML import and export
- Field(s) display in non-leaf nodes
- True image field displays