jupiterrr/column-view-component

Web Component for Miller columns (aka. Column View)

<column-view>

A Polymer Web Component for Miller columns (aka. Column View) with keyboard navigation.

Docs & Demo

demo page only

Install

Install the component using Bower:

bower install column-view --save

Usage

1. Import Web Components' polyfill:

   <script src="bower_components/platform/platform.js"></script>

2. Import Custom Element:

   <link rel="import" href="bower_components/column-view/dist/column-view.html">

3. Insert Custom Element

   <column-view ondata="sourceFn"></column-view>

4. Set up your data source

   Example:

   <script type="text/javascript">
     var data = {
       0: {name: "root", childIDs: [1,2]}, // not vissible
       1: {name: "Item 1", childIDs: [3,4,5]},
       2: {name: "Item 2"},
       3: {name: "Item 3"},
       4: {name: "Item 4"},
       5: {name: "Item 5"}
     };
   
     function getChildren(selectedItem) {
       var children = selectedItem.childIDs.map(function(id) {
         var item = data[id];
         return {name: item.name, value: id};
       });
       return children;
     }
   
     function sourceFn(ID, cb) {
       if (!ID) ID = 0;
       var selectedItem = data[ID];
       if (selectedItem.childIDs) {
         cb({items: getChildren(selectedItem)});
       } else {
         cb({dom: document.createTextNode("Preview: " + selectedItem.name)})
       }
     }
   </script>

<column-view>

Attributes

Attribute	Options	Default	Description
ondata	Function(String value, Function callback)	None.	A function to be called for each selected item. This function can either pass child items or an HTML element to the callback function. Callback: callback({dom: <HTMLElement>}) callback({items: [{name: <String>, value: <String, Number>}, ...]})
data	JSON	None.	*work in progress* {"fruits": {"apple": "<b>Apple</b>", "grape": "<b>Grape</b>"}}
path	String	""	Defines the path of items the column-view is initialized with. When the element is ready the ondata method is called with each item ID. Each call results in a new column. IDs are speareated by /. Example: path="1/2/3"

Methods

Method	Parameters	Returns	Description
back()	None.	Nothing.	Deselects last selected item

Properties

Method	Returns	Description
canMoveBack	Boolean	...

Events

Event	Description
change	Fires when selection changes.

<button is="column-view-back">

With is="column-view-back" you can extend a button so that when you click it you move the selection one column to the left.

<button is="column-view-back" for="columnViewID">back</button>
<column-view id="columnViewID"></column-view>

Attributes

Attribute	Options	Default	Description
for	ID	None.	The ID of a column-view

Setup (run it locally)

1. Install dependencies: bower install

• Start development server: polyserve
  (npm install polyserve -g)
• open http://localhost:8080/components/column-view/demo/demo.html

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT License

column-view-component's Issues

Add headers

It would be great if you could provide an API / attributes to add headers to columns

IE support

Does it support IE 9+?

Fixed number of columns

Hello, is there a way to initialize column-view with fixed number of columns? I have six levels of data, and I want to show all levels.

Upgrade to Polymer 1.0

In order to make it easier to use with other Web Components it would be great if you could upgrade to Polymer 1.0