<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