Merge pull request #81 from mwoc/direction

Add support for horizontal navigation

README.md

@@ -14,31 +14,41 @@ If you want to use the built-in keyboard navigation be sure to set `tabindex` so
 
 ## Options
 
-### `data` <observableArray>
+### `data` \<observableArray\>
 
 An observable array that contains all items available to the selection model, as an alternative to the `foreach` and `template: { foreach: ... }` bindings.
 
-### `selection` <observableArray>
+### `selection` \<observableArray\>
 
 An observable array that will reflect the currently selected items from the `foreach` or `template: { foreach: ... }` bindings, or from the `data` option.
 
-### `focused` <observable>
+### `focused` \<observable\>
 
 An observable that contains the currently focused item. This might return `null` if there is no current focus.
 
-### `mode` <string>
+### `mode` \<observable\>
 
-Set to `single` if the selection model should only allow a single selected item. 
+Set to `single` if the selection model should only allow a single selected item.
 
-If set to `multi` users can use `<ctrl>` and `<shift>` to select multiple items using either a mouse or keyboard. 
+If set to `multi` users can use `<ctrl>` and `<shift>` to select multiple items using either a mouse or keyboard.
 
 When set to `toggle` the selection model supports multiple selections, but selections are "sticky". Once selected they can only be deselect by selecting them again. This is useful on, for example, touch devices.
 
 Set to `off` to disable the selection.
 
 Defaults to `multi`.
 
-### `properties` <object>
+The mode will be altered on the fly when the value of the observable changes.
+
+### `direction` \<string\>
+
+Set to `horizontal` to allow navigating with left/right arrow keys, when `mode` is either `single` or `multi`.
+
+When set to `vertical`, the up/down arrow keys are available for navigating.
+
+Defaults to `vertical`.
+
+### `properties` \<object\>
 
 The selection binding will by default look for `selected` and `focused` observable properties on your `foreach` items and set them to true when the item is selected or focused. Using the `properties` option you can override these default property names to something else. For example:
 

examples/index.html

@@ -29,6 +29,13 @@ <h1>Single selection</h1>
             </ul>
         </div>
 
+        <div class="single-horizontal">
+            <h1>Single selection, horizontal</h1>
+            <div data-bind="foreach: items, selection: { selection: selection, mode: 'single', direction: 'horizontal' }" tabindex="-1">
+                <span data-bind="text: text, css: { selected: selected }"></span>
+            </div>
+        </div>
+
         <div class="toggle">
             <h1>Toggle selection</h1>
             <ul data-bind="foreach: items, selection: { selection: selection, mode: 'toggle' }" tabindex="-1">
@@ -62,6 +69,13 @@ <h1>Multiple selections with nested scoping</h1>
             </ul>
         </div>
 
+        <div class="multi-horizontal">
+            <h1>Multiple selections, horizontal</h1>
+            <div data-bind="foreach: items, selection: { selection: selection, focused: focused, direction: 'horizontal' }" tabindex="-1">
+                <span data-bind="text: text, css: { selected: selected, focused: focused }"></span>
+            </div>
+        </div>
+
         <div class="template">
             <h1>Template selection</h1>
             <ul data-bind="template: { foreach: items, name: 'items-template' }, selection: selection" tabindex="-1"></ul>
@@ -86,7 +100,7 @@ <h1>Subset selection (items with even index)</h1>
             <li data-bind="text: text, css: { selected: selected, focused: focused }"></li>
         </script>
 
-        <script src="../vendor/knockout-2.1.0.debug.js"></script>
+        <script src="../vendor/knockout-3.0.0.debug.js"></script>
         <script src="../lib/eventmatcher.js"></script>
         <script src="../lib/knockout.selection.js"></script>
         <script>
@@ -114,6 +128,17 @@ <h1>Subset selection (items with even index)</h1>
 
             ko.applyBindings(singleSelection, window.document.querySelector('.single'));
 
+            /**
+             * Create a simple selection model that only allows
+             * selecting a single item at a time.
+             */
+            var singleHorizontalSelection = {
+                    items: ko.observableArray(createItems(10)),
+                    selection: ko.observableArray()
+                };
+
+            ko.applyBindings(singleHorizontalSelection, window.document.querySelector('.single-horizontal'));
+
             /**
              * Create a toggle selection model that allows selecting
              * multiple items by toggling them.
@@ -146,6 +171,17 @@ <h1>Subset selection (items with even index)</h1>
 
             ko.applyBindings(multiSelection, window.document.querySelector('.multi'));
 
+            /**
+             * Allow multiple selections with a focused item.
+             */
+            var multiHorizontalSelection = {
+                    items: ko.observableArray(createItems(10)),
+                    selection: ko.observableArray(),
+                    focused: ko.observable()
+                };
+
+            ko.applyBindings(multiHorizontalSelection, window.document.querySelector('.multi-horizontal'));
+
             /**
              * Allow multiple selections with a focused item and nested scopes.
              */