From 17bbe7249a3f873fc0d990fdb47fae2c61293a17 Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 11:10:18 +0100
Subject: [PATCH 01/13] Fix knockout reference in examples, correct outdated
 usage hints on top of knockout.selection.js

---
 examples/index.html       | 2 +-
 lib/knockout.selection.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 5c1399a..dd0e297 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -86,7 +86,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>
diff --git a/lib/knockout.selection.js b/lib/knockout.selection.js
index 92d0abd..a36d73e 100644
--- a/lib/knockout.selection.js
+++ b/lib/knockout.selection.js
@@ -2,9 +2,9 @@
 /*
 data-bind="foreach: <observableArray>, selection: <observableArray>"
 
-data-bind="foreach: <observableArray>, selection: { selection: <observableArray>, focused: <observable>, single: true, properties: { selected: 'selected', focused: 'focused'} }"
+data-bind="foreach: <observableArray>, selection: { selection: <observableArray>, focused: <observable>, mode: 'single', properties: { selected: 'selected', focused: 'focused'} }"
 
-data-bind="selection: { data: <observableArray>, selection: <observableArray>, focused: <observable>, single: true, properties: { selected: 'selected', focused: 'focused'} }"
+data-bind="selection: { data: <observableArray>, selection: <observableArray>, focused: <observable>, mode: 'single', properties: { selected: 'selected', focused: 'focused'} }"
 */
 (function (root, factory) {
     if (typeof exports === 'object') {

From e48adeeca883fe0d43428dc53599b1ba29ddf82a Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 11:12:05 +0100
Subject: [PATCH 02/13] Add 'direction' option which should be just a string
 for now

---
 lib/knockout.selection.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/lib/knockout.selection.js b/lib/knockout.selection.js
index a36d73e..cbb2b81 100644
--- a/lib/knockout.selection.js
+++ b/lib/knockout.selection.js
@@ -50,6 +50,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
         this.selection = null;
         this.focused = null;
         this.mode = null;
+        this.direction = null;
         this.anchor = null;
         this.focusedIndex = -1;
 
@@ -432,6 +433,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                 allBindings = allBindingsAccessor(),
                 config = {
                     mode: 'multi',
+                    direction: 'vertical',
                     properties: {
                         selected: 'selected',
                         focused: 'focused'
@@ -458,12 +460,16 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                 } else {
                     selectionModel.mode = ko.observable(bindingValue.mode || config.mode);
                 }
+
+                selectionModel.direction = bindingValue.direction || config.direction;
+
                 ko.utils.extend(config.properties, bindingValue.properties);
             } else {
                 selectionModel.selection = value;
                 selectionModel.focused = ko.observable(null);
                 selectionModel.anchor = ko.observable(null);
                 selectionModel.mode = ko.observable(config.mode);
+                selectionModel.direction = config.direction;
             }
 
             selectionModel.init(config);

From 91b9726d84066340c48791575a7ea55025e4298d Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 11:12:38 +0100
Subject: [PATCH 03/13] Based on direction, toggle keyboard events for
 left/right (horizontal) or up/down (vertical, default) arrow keys

---
 lib/knockout.selection.js | 180 ++++++++++++++++++++++++++------------
 1 file changed, 122 insertions(+), 58 deletions(-)

diff --git a/lib/knockout.selection.js b/lib/knockout.selection.js
index cbb2b81..6d91394 100644
--- a/lib/knockout.selection.js
+++ b/lib/knockout.selection.js
@@ -236,17 +236,31 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.anchor(firstItem);
                 });
 
-                matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
-                    var previousItem = selectionModel.previousItem(item);
-                    selectionModel.selectItem(previousItem);
-                    selectionModel.anchor(previousItem);
-                });
-
-                matchers.register({ type: 'keydown', which: 40 }, function (event, item) {
-                    var nextItem = selectionModel.nextItem(item);
-                    selectionModel.selectItem(nextItem);
-                    selectionModel.anchor(nextItem);
-                });
+                if (selectionModel.direction === 'vertical' || selectionModel.direction === 'both') {
+                    matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
+                        var previousItem = selectionModel.previousItem(item);
+                        selectionModel.selectItem(previousItem);
+                        selectionModel.anchor(previousItem);
+                    });
+
+                    matchers.register({ type: 'keydown', which: 40 }, function (event, item) {
+                        var nextItem = selectionModel.nextItem(item);
+                        selectionModel.selectItem(nextItem);
+                        selectionModel.anchor(nextItem);
+                    });
+                } else if (selectionModel.direction === 'horizontal' || selectionModel.direction === 'both') {
+                    matchers.register({ type: 'keydown', which: 37 }, function (event, item) {
+                        var previousItem = selectionModel.previousItem(item);
+                        selectionModel.selectItem(previousItem);
+                        selectionModel.anchor(previousItem);
+                    });
+
+                    matchers.register({ type: 'keydown', which: 39 }, function (event, item) {
+                        var nextItem = selectionModel.nextItem(item);
+                        selectionModel.selectItem(nextItem);
+                        selectionModel.anchor(nextItem);
+                    });
+                }
 
                 return matchers;
             },
@@ -361,53 +375,103 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.anchor(first);
                 });
 
-                matchers.register(
-                    { type: 'keydown', which: 38, ctrlKey: true, shiftKey: true },
-                    { type: 'keydown', which: 38, metaKey: true, shiftKey: true }, function (event, item) {
-                    selectionModel.appendSelectionFromAnchor(selectionModel.previousItem(item));
-                });
-
-                matchers.register(
-                    { type: 'keydown', which: 38, ctrlKey: true },
-                    { type: 'keydown', which: 38, metaKey: true }, function (event, item) {
-                    var prev = selectionModel.previousItem(item);
-                    selectionModel.focused(prev);
-                    selectionModel.anchor(prev);
-                });
-
-                matchers.register({ type: 'keydown', which: 38, shiftKey: true }, function (event, item) {
-                    selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.previousItem(item));
-                });
-
-                matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
-                    var prev = selectionModel.previousItem(item);
-                    selectionModel.selectItem(prev);
-                    selectionModel.anchor(prev);
-                });
-
-                matchers.register(
-                    { type: 'keydown', which: 40, ctrlKey: true, shiftKey: true },
-                    { type: 'keydown', which: 40, metaKey: true, shiftKey: true }, function (event, item) {
-                    selectionModel.appendSelectionFromAnchor(selectionModel.nextItem(item));
-                });
-
-                matchers.register(
-                    { type: 'keydown', which: 40, ctrlKey: true },
-                    { type: 'keydown', which: 40, metaKey: true }, function (event, item) {
-                    var next = selectionModel.nextItem(item);
-                    selectionModel.focused(next);
-                    selectionModel.anchor(next);
-                });
-
-                matchers.register({ type: 'keydown', which: 40, shiftKey: true }, function (event, item) {
-                    selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.nextItem(item));
-                });
-
-                matchers.register({ type: 'keydown', which: 40 }, function (event, item) {
-                    var next = selectionModel.nextItem(item);
-                    selectionModel.selectItem(next);
-                    selectionModel.anchor(next);
-                });
+                if (selectionModel.direction === 'vertical' || selectionModel.direction === 'both') {
+                    matchers.register(
+                        { type: 'keydown', which: 38, ctrlKey: true, shiftKey: true },
+                        { type: 'keydown', which: 38, metaKey: true, shiftKey: true }, function (event, item) {
+                        selectionModel.appendSelectionFromAnchor(selectionModel.previousItem(item));
+                    });
+
+                    matchers.register(
+                        { type: 'keydown', which: 38, ctrlKey: true },
+                        { type: 'keydown', which: 38, metaKey: true }, function (event, item) {
+                        var prev = selectionModel.previousItem(item);
+                        selectionModel.focused(prev);
+                        selectionModel.anchor(prev);
+                    });
+
+                    matchers.register({ type: 'keydown', which: 38, shiftKey: true }, function (event, item) {
+                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.previousItem(item));
+                    });
+
+                    matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
+                        var prev = selectionModel.previousItem(item);
+                        selectionModel.selectItem(prev);
+                        selectionModel.anchor(prev);
+                    });
+
+                    matchers.register(
+                        { type: 'keydown', which: 40, ctrlKey: true, shiftKey: true },
+                        { type: 'keydown', which: 40, metaKey: true, shiftKey: true }, function (event, item) {
+                        selectionModel.appendSelectionFromAnchor(selectionModel.nextItem(item));
+                    });
+
+                    matchers.register(
+                        { type: 'keydown', which: 40, ctrlKey: true },
+                        { type: 'keydown', which: 40, metaKey: true }, function (event, item) {
+                        var next = selectionModel.nextItem(item);
+                        selectionModel.focused(next);
+                        selectionModel.anchor(next);
+                    });
+
+                    matchers.register({ type: 'keydown', which: 40, shiftKey: true }, function (event, item) {
+                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.nextItem(item));
+                    });
+
+                    matchers.register({ type: 'keydown', which: 40 }, function (event, item) {
+                        var next = selectionModel.nextItem(item);
+                        selectionModel.selectItem(next);
+                        selectionModel.anchor(next);
+                    });
+                } else if (selectionModel.direction === 'horizontal' || selectionModel.direction === 'both') {
+                    matchers.register(
+                        { type: 'keydown', which: 37, ctrlKey: true, shiftKey: true },
+                        { type: 'keydown', which: 37, metaKey: true, shiftKey: true }, function (event, item) {
+                        selectionModel.appendSelectionFromAnchor(selectionModel.previousItem(item));
+                    });
+
+                    matchers.register(
+                        { type: 'keydown', which: 37, ctrlKey: true },
+                        { type: 'keydown', which: 37, metaKey: true }, function (event, item) {
+                        var prev = selectionModel.previousItem(item);
+                        selectionModel.focused(prev);
+                        selectionModel.anchor(prev);
+                    });
+
+                    matchers.register({ type: 'keydown', which: 37, shiftKey: true }, function (event, item) {
+                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.previousItem(item));
+                    });
+
+                    matchers.register({ type: 'keydown', which: 37 }, function (event, item) {
+                        var prev = selectionModel.previousItem(item);
+                        selectionModel.selectItem(prev);
+                        selectionModel.anchor(prev);
+                    });
+
+                    matchers.register(
+                        { type: 'keydown', which: 39, ctrlKey: true, shiftKey: true },
+                        { type: 'keydown', which: 39, metaKey: true, shiftKey: true }, function (event, item) {
+                        selectionModel.appendSelectionFromAnchor(selectionModel.nextItem(item));
+                    });
+
+                    matchers.register(
+                        { type: 'keydown', which: 39, ctrlKey: true },
+                        { type: 'keydown', which: 39, metaKey: true }, function (event, item) {
+                        var next = selectionModel.nextItem(item);
+                        selectionModel.focused(next);
+                        selectionModel.anchor(next);
+                    });
+
+                    matchers.register({ type: 'keydown', which: 39, shiftKey: true }, function (event, item) {
+                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.nextItem(item));
+                    });
+
+                    matchers.register({ type: 'keydown', which: 39 }, function (event, item) {
+                        var next = selectionModel.nextItem(item);
+                        selectionModel.selectItem(next);
+                        selectionModel.anchor(next);
+                    });
+                }
 
                 matchers.register(
                     { type: 'keydown', which: 65, ctrlKey: true },

From 657fb042f3b1a1e0c1735836bb89190277c442cc Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 11:13:45 +0100
Subject: [PATCH 04/13] Add examples for horizontal direction

---
 examples/index.html | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/examples/index.html b/examples/index.html
index dd0e297..8af0ddf 100644
--- a/examples/index.html
+++ b/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>
@@ -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.
              */

From d686bcac230bf11e1b7c4336597227516d23b0cc Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 11:56:50 +0100
Subject: [PATCH 05/13] Add arrowLeft/arrowRight helper methods, spec
 horizontal single-selection mode

---
 test/knockout.selection.spec.js | 71 +++++++++++++++++++++++++++++++++
 test/spec.helper.js             | 12 ++++++
 2 files changed, 83 insertions(+)

diff --git a/test/knockout.selection.spec.js b/test/knockout.selection.spec.js
index 51bdac4..bb77e27 100644
--- a/test/knockout.selection.spec.js
+++ b/test/knockout.selection.spec.js
@@ -321,6 +321,77 @@ describe('Selection', function () {
         });
     });
 
+    describe('in single selection mode, horizontal', function () {
+        beforeEach(function () {
+            element = createTestElement(
+                "foreach: items, selection: { selection: selection, mode: 'single', direction: 'horizontal', focused: focused, anchor: anchor }",
+                'attr: { id: id }, css: { selected: selected }'
+            );
+            ko.applyBindings(model, element);
+        });
+
+        describe('with no selection', function () {
+            it('selects the element after the focused element on right-arrow', function () {
+                model.focusItem(3);
+                arrowRight($('ul', element));
+                expect($('#item4')).to.have.cssClass('selected');
+                expect(element).to.have.selectionCount(1);
+            });
+
+            it('selects the element before the focused element on left-arrow', function () {
+                model.focusItem(3);
+                arrowLeft($('ul', element));
+                expect($('#item2')).to.have.cssClass('selected');
+                expect(element).to.have.selectionCount(1);
+            });
+
+            describe('when first element is focused', function () {
+                beforeEach(function () {
+                    model.focusItem(0);
+                });
+
+                it('selects the focused element on left-arrow', function () {
+                    arrowLeft($('ul', element));
+                    expect($('#item0')).to.have.cssClass('selected');
+                    expect(element).to.have.selectionCount(1);
+                });
+            });
+
+            describe('when last element is focused', function () {
+                beforeEach(function () {
+                    model.focusItem(9);
+                });
+
+                it('selects the focused element on right-arrow', function () {
+                    arrowRight($('ul', element));
+                    expect($('#item9')).to.have.cssClass('selected');
+                    expect(element).to.have.selectionCount(1);
+                });
+            });
+        });
+
+        describe('with one selected item', function () {
+            beforeEach(function () {
+                model.select(7);
+                model.focusItem(7);
+            });
+
+            it('selects next element on right-arrow', function () {
+                arrowRight($('ul', element));
+                expect($('#item7')).to.not.have.cssClass('selected');
+                expect($('#item8')).to.have.cssClass('selected');
+                expect(element).to.have.selectionCount(1);
+            });
+
+            it('selects previous element on left-arrow', function () {
+                arrowLeft($('ul', element));
+                expect($('#item7')).to.not.have.cssClass('selected');
+                expect($('#item6')).to.have.cssClass('selected');
+                expect(element).to.have.selectionCount(1);
+            });
+        });
+    });
+
     describe('in toggle selection mode', function () {
         beforeEach(function () {
             element = createTestElement(
diff --git a/test/spec.helper.js b/test/spec.helper.js
index 4c6779c..1643906 100644
--- a/test/spec.helper.js
+++ b/test/spec.helper.js
@@ -52,12 +52,24 @@ function arrowDown(element, options) {
     keyDown(element, options);
 }
 
+function arrowRight(element, options) {
+    var defaultOptions = { which: 39 };
+    options = $.extend(defaultOptions, options);
+    keyDown(element, options);
+}
+
 function arrowUp(element, options) {
     var defaultOptions = { which: 38 };
     options = $.extend(defaultOptions, options);
     keyDown(element, options);
 }
 
+function arrowLeft(element, options) {
+    var defaultOptions = { which: 37 };
+    options = $.extend(defaultOptions, options);
+    keyDown(element, options);
+}
+
 function space(element, options) {
     var defaultOptions = { which: 32 };
     options = $.extend(defaultOptions, options);

From 2ff8e6f846e42937b5ec2fe50acec3b1179a20a8 Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 12:14:41 +0100
Subject: [PATCH 06/13] Add tests for horizontal multiple selection mode

---
 test/knockout.selection.spec.js | 218 ++++++++++++++++++++++++++++++++
 1 file changed, 218 insertions(+)

diff --git a/test/knockout.selection.spec.js b/test/knockout.selection.spec.js
index bb77e27..9bfafdb 100644
--- a/test/knockout.selection.spec.js
+++ b/test/knockout.selection.spec.js
@@ -1022,6 +1022,224 @@ describe('Selection', function () {
         });
     });
 
+    describe('in multiple selection mode, horizontal', function () {
+        beforeEach(function () {
+            element = createTestElement(
+                'foreach: items, selection: { selection: selection, focused: focused, anchor: anchor, direction: "horizontal" }',
+                'attr: { id: id }, css: { selected: selected, focused: focused }'
+            );
+            ko.applyBindings(model, element);
+        });
+
+        describe('with no selection', function () {
+            it('selects the element after the focused element on right-arrow', function () {
+                model.focusItem(3);
+                arrowRight($('ul', element));
+                expect($('#item4')).to.have.cssClass('selected');
+                expect(element).to.have.selectionCount(1);
+            });
+
+            it('selects the element before the focused element on left-arrow', function () {
+                model.focusItem(3);
+                arrowLeft($('ul', element));
+                expect($('#item2')).to.have.cssClass('selected');
+                expect(element).to.have.selectionCount(1);
+            });
+
+            it('selects and focuses the element after the focused element on shift-right-arrow', function () {
+                model.focusItem(3);
+                model.anchorItem(3);
+                arrowRight($('ul', element), { shiftKey: true });
+                expect($('#item3')).to.have.cssClass('selected');
+                expect($('#item4')).to.have.cssClass('selected');
+                expect(element).to.have.selectionCount(2);
+            });
+
+            it('selects and focuses the element before the focused element on shift-left-arrow', function () {
+                model.focusItem(3);
+                model.anchorItem(3);
+                arrowLeft($('ul', element), { shiftKey: true });
+                expect($('#item3')).to.have.cssClass('selected');
+                expect($('#item2')).to.have.cssClass('selected');
+                expect(element).to.have.selectionCount(2);
+            });
+
+            describe('when first element is focused', function () {
+                beforeEach(function () {
+                    model.focusItem(0);
+                });
+
+                it('selects the focused element on left-arrow', function () {
+                    arrowLeft($('ul', element));
+                    expect($('#item0')).to.have.cssClass('selected');
+                    expect(element).to.have.selectionCount(1);
+                });
+            });
+
+            describe('when last element is focused', function () {
+                beforeEach(function () {
+                    model.focusItem(9);
+                });
+
+                it('selects the focused element on right-arrow', function () {
+                    arrowRight($('ul', element));
+                    expect($('#item9')).to.have.cssClass('selected');
+                    expect(element).to.have.selectionCount(1);
+                });
+            });
+        });
+
+        describe('with selected items', function () {
+            beforeEach(function () {
+                model.select(7, 4, 2);
+                model.focusItem(2);
+                model.anchorItem(2);
+            });
+
+            it('expands the selection downward on shift-right-arrow', function () {
+                arrowRight($('ul', element), { shiftKey: true });
+                expect(element).to.have.selectionCount(2);
+                [2, 3].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('expands the selection further downward on successive shift-right-arrow', function () {
+                arrowRight($('ul', element), { shiftKey: true });
+                arrowRight($('ul', element), { shiftKey: true });
+                expect(element).to.have.selectionCount(3);
+                [2, 3, 4].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('expands the selection upward on shift-left-arrow', function () {
+                arrowLeft($('ul', element), { shiftKey: true });
+                expect(element).to.have.selectionCount(2);
+                [1, 2].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('expands the selection further upward on successive shift-left-arrow', function () {
+                arrowLeft($('ul', element), { shiftKey: true });
+                arrowLeft($('ul', element), { shiftKey: true });
+                expect(element).to.have.selectionCount(3);
+                [0, 1, 2].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('does not move the selection anchor on successive shift-left/right-arrow', function () {
+                arrowRight($('ul', element), { shiftKey: true });
+                arrowRight($('ul', element), { shiftKey: true });
+                arrowLeft($('ul', element), { shiftKey: true });
+                arrowRight($('ul', element), { shiftKey: true });
+                expect(element).to.have.selectionCount(3);
+                [2, 3, 4].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('maintains the selection on ctrl-right-arrow', function () {
+                arrowRight($('ul', element), { ctrlKey: true });
+                expect(element).to.have.selectionCount(3);
+                [2, 4, 7].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('maintains the selection on successive ctrl-right-arrow', function () {
+                arrowRight($('ul', element), { ctrlKey: true });
+                arrowRight($('ul', element), { ctrlKey: true });
+                expect(element).to.have.selectionCount(3);
+                [2, 4, 7].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('moves the selection anchor downwards on ctrl-right-arrow', function () {
+                arrowRight($('ul', element), { ctrlKey: true });
+                arrowRight($('ul', element), { shiftKey: true });
+                expect(element).to.have.selectionCount(2);
+                [3, 4].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('moves the selection anchor further downward on successive ctrl-right-arrow', function () {
+                arrowRight($('ul', element), { ctrlKey: true });
+                arrowRight($('ul', element), { ctrlKey: true });
+                arrowRight($('ul', element), { shiftKey: true });
+                expect(element).to.have.selectionCount(2);
+                [4, 5].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('maintains the selection on ctrl-left-arrow', function () {
+                arrowLeft($('ul', element), { ctrlKey: true });
+                expect(element).to.have.selectionCount(3);
+                [2, 4, 7].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('maintains the selection on successive ctrl-left-arrow', function () {
+                arrowLeft($('ul', element), { ctrlKey: true });
+                arrowLeft($('ul', element), { ctrlKey: true });
+                expect(element).to.have.selectionCount(3);
+                [2, 4, 7].forEach(function (index) {
+                    expect($('#item' + index)).to.have.cssClass('selected');
+                });
+            });
+
+            it('moves the selection anchor upward on ctrl-left-arrow', function () {
+                arrowLeft($('ul', element), { ctrlKey: true });
+
+                expect(model.anchor().id).to.be('item1');
+            });
+
+            it('moves the selection anchor further upward on successive ctrl-left-arrow', function () {
+                arrowLeft($('ul', element), { ctrlKey: true });
+                arrowLeft($('ul', element), { ctrlKey: true });
+                expect(model.anchor().id).to.be('item0');
+            });
+
+            it('moves the selection anchor on successive ctrl-left/right-arrow', function () {
+                arrowRight($('ul', element), { ctrlKey: true });
+                arrowRight($('ul', element), { ctrlKey: true });
+                arrowLeft($('ul', element), { ctrlKey: true });
+                expect(model.anchor().id).to.be('item3');
+            });
+
+            it('maintains selection on successive ctrl-left/right-arrow', function () {
+                arrowDown($('ul', element), { ctrlKey: true });
+                arrowDown($('ul', element), { ctrlKey: true });
+                arrowLeft($('ul', element), { ctrlKey: true });
+
+                [2,4,7].forEach(function (index) {
+                    expect($('#item'+index)).to.have.cssClass('selected');
+                });
+                expect(element).to.have.selectionCount(3);
+            });
+
+            it('removes the selection and selects next element on right-arrow', function () {
+                model.focusItem(3);
+                arrowRight($('ul', element));
+                expect(element).to.have.selectionCount(1);
+                expect($('#item4')).to.have.cssClass('selected');
+            });
+
+            it('removes the selection and selects previous element on left-arrow', function () {
+                model.focusItem(3);
+                arrowLeft($('ul', element));
+                expect(element).to.have.selectionCount(1);
+                expect($('#item2')).to.have.cssClass('selected');
+            });
+        });
+    });
+
     describe('when data is given as a argument', function () {
         var items;
         beforeEach(function () {

From 502d96a2e91390fcaeae6567af2dc89cfb5f7470 Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 14:19:58 +0100
Subject: [PATCH 07/13] Disable direction 'both' as support for that is not
 implemented

---
 lib/knockout.selection.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/knockout.selection.js b/lib/knockout.selection.js
index 6d91394..595a2f8 100644
--- a/lib/knockout.selection.js
+++ b/lib/knockout.selection.js
@@ -236,7 +236,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.anchor(firstItem);
                 });
 
-                if (selectionModel.direction === 'vertical' || selectionModel.direction === 'both') {
+                if (selectionModel.direction === 'vertical') {
                     matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
                         var previousItem = selectionModel.previousItem(item);
                         selectionModel.selectItem(previousItem);
@@ -248,7 +248,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                         selectionModel.selectItem(nextItem);
                         selectionModel.anchor(nextItem);
                     });
-                } else if (selectionModel.direction === 'horizontal' || selectionModel.direction === 'both') {
+                } else if (selectionModel.direction === 'horizontal') {
                     matchers.register({ type: 'keydown', which: 37 }, function (event, item) {
                         var previousItem = selectionModel.previousItem(item);
                         selectionModel.selectItem(previousItem);
@@ -375,7 +375,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.anchor(first);
                 });
 
-                if (selectionModel.direction === 'vertical' || selectionModel.direction === 'both') {
+                if (selectionModel.direction === 'vertical') {
                     matchers.register(
                         { type: 'keydown', which: 38, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 38, metaKey: true, shiftKey: true }, function (event, item) {
@@ -423,7 +423,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                         selectionModel.selectItem(next);
                         selectionModel.anchor(next);
                     });
-                } else if (selectionModel.direction === 'horizontal' || selectionModel.direction === 'both') {
+                } else if (selectionModel.direction === 'horizontal') {
                     matchers.register(
                         { type: 'keydown', which: 37, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 37, metaKey: true, shiftKey: true }, function (event, item) {

From b5e0231b447c5e280cbef298a3dae558a0bbef36 Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 14:48:53 +0100
Subject: [PATCH 08/13] Escape brackets in readme, so they become visible when
 rendered as html

---
 README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index c60c423..f7dd790 100644
--- a/README.md
+++ b/README.md
@@ -14,23 +14,23 @@ 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` \<string\>
 
-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.
 
@@ -38,7 +38,7 @@ Set to `off` to disable the selection.
 
 Defaults to `multi`.
 
-### `properties` <object>
+### `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:
 

From 70cade89e2a19510fd77c4556c4bd42b7496fcff Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 14:49:32 +0100
Subject: [PATCH 09/13] Add info about 'direction' option to readme

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index f7dd790..616a146 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,14 @@ Set to `off` to disable the selection.
 
 Defaults to `multi`.
 
+### `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:

From fd416a8a50abdf9a0d4a5ff27bcdcb5bea5a00b2 Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 23 Jan 2014 14:54:11 +0100
Subject: [PATCH 10/13] Update `mode` description in readme, as it's
 recommended to use an observable so one can take advantage of mode switching

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 616a146..6c32f86 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ An observable array that will reflect the currently selected items from the `for
 
 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.
 
@@ -38,6 +38,8 @@ Set to `off` to disable the selection.
 
 Defaults to `multi`.
 
+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`.

From 142406dd19a2a2c712cef36482299065030112ba Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Wed, 29 Jan 2014 11:14:49 +0100
Subject: [PATCH 11/13] Add SelectionModel.(left|above|right|below)Item -
 left|above wraps previousItem, right|below wraps nextItem. Use these methods
 in single and multi selection mode, so the mode can be extended more easily

---
 lib/knockout.selection.js | 56 +++++++++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/lib/knockout.selection.js b/lib/knockout.selection.js
index 595a2f8..f3f3531 100644
--- a/lib/knockout.selection.js
+++ b/lib/knockout.selection.js
@@ -167,6 +167,22 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
         return this.items()[Math.max(position - 1, 0)];
     };
 
+    SelectionModel.prototype.leftItem = function (item) {
+        return this.previousItem(item);
+    };
+
+    SelectionModel.prototype.aboveItem = function (item) {
+        return this.previousItem(item);
+    };
+
+    SelectionModel.prototype.rightItem = function (item) {
+        return this.nextItem(item);
+    };
+
+    SelectionModel.prototype.belowItem = function (item) {
+        return this.nextItem(item);
+    };
+
     SelectionModel.prototype.isAlreadySelected = function (item) {
         return ko.utils.arrayIndexOf(this.selection(), item) !== -1;
     };
@@ -238,25 +254,25 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
 
                 if (selectionModel.direction === 'vertical') {
                     matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
-                        var previousItem = selectionModel.previousItem(item);
+                        var previousItem = selectionModel.aboveItem(item);
                         selectionModel.selectItem(previousItem);
                         selectionModel.anchor(previousItem);
                     });
 
                     matchers.register({ type: 'keydown', which: 40 }, function (event, item) {
-                        var nextItem = selectionModel.nextItem(item);
+                        var nextItem = selectionModel.belowItem(item);
                         selectionModel.selectItem(nextItem);
                         selectionModel.anchor(nextItem);
                     });
                 } else if (selectionModel.direction === 'horizontal') {
                     matchers.register({ type: 'keydown', which: 37 }, function (event, item) {
-                        var previousItem = selectionModel.previousItem(item);
+                        var previousItem = selectionModel.leftItem(item);
                         selectionModel.selectItem(previousItem);
                         selectionModel.anchor(previousItem);
                     });
 
                     matchers.register({ type: 'keydown', which: 39 }, function (event, item) {
-                        var nextItem = selectionModel.nextItem(item);
+                        var nextItem = selectionModel.rightItem(item);
                         selectionModel.selectItem(nextItem);
                         selectionModel.anchor(nextItem);
                     });
@@ -379,23 +395,23 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     matchers.register(
                         { type: 'keydown', which: 38, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 38, metaKey: true, shiftKey: true }, function (event, item) {
-                        selectionModel.appendSelectionFromAnchor(selectionModel.previousItem(item));
+                        selectionModel.appendSelectionFromAnchor(selectionModel.aboveItem(item));
                     });
 
                     matchers.register(
                         { type: 'keydown', which: 38, ctrlKey: true },
                         { type: 'keydown', which: 38, metaKey: true }, function (event, item) {
-                        var prev = selectionModel.previousItem(item);
+                        var prev = selectionModel.aboveItem(item);
                         selectionModel.focused(prev);
                         selectionModel.anchor(prev);
                     });
 
                     matchers.register({ type: 'keydown', which: 38, shiftKey: true }, function (event, item) {
-                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.previousItem(item));
+                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.aboveItem(item));
                     });
 
                     matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
-                        var prev = selectionModel.previousItem(item);
+                        var prev = selectionModel.aboveItem(item);
                         selectionModel.selectItem(prev);
                         selectionModel.anchor(prev);
                     });
@@ -403,23 +419,23 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     matchers.register(
                         { type: 'keydown', which: 40, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 40, metaKey: true, shiftKey: true }, function (event, item) {
-                        selectionModel.appendSelectionFromAnchor(selectionModel.nextItem(item));
+                        selectionModel.appendSelectionFromAnchor(selectionModel.belowItem(item));
                     });
 
                     matchers.register(
                         { type: 'keydown', which: 40, ctrlKey: true },
                         { type: 'keydown', which: 40, metaKey: true }, function (event, item) {
-                        var next = selectionModel.nextItem(item);
+                        var next = selectionModel.belowItem(item);
                         selectionModel.focused(next);
                         selectionModel.anchor(next);
                     });
 
                     matchers.register({ type: 'keydown', which: 40, shiftKey: true }, function (event, item) {
-                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.nextItem(item));
+                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.belowItem(item));
                     });
 
                     matchers.register({ type: 'keydown', which: 40 }, function (event, item) {
-                        var next = selectionModel.nextItem(item);
+                        var next = selectionModel.belowItem(item);
                         selectionModel.selectItem(next);
                         selectionModel.anchor(next);
                     });
@@ -427,23 +443,23 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     matchers.register(
                         { type: 'keydown', which: 37, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 37, metaKey: true, shiftKey: true }, function (event, item) {
-                        selectionModel.appendSelectionFromAnchor(selectionModel.previousItem(item));
+                        selectionModel.appendSelectionFromAnchor(selectionModel.leftItem(item));
                     });
 
                     matchers.register(
                         { type: 'keydown', which: 37, ctrlKey: true },
                         { type: 'keydown', which: 37, metaKey: true }, function (event, item) {
-                        var prev = selectionModel.previousItem(item);
+                        var prev = selectionModel.leftItem(item);
                         selectionModel.focused(prev);
                         selectionModel.anchor(prev);
                     });
 
                     matchers.register({ type: 'keydown', which: 37, shiftKey: true }, function (event, item) {
-                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.previousItem(item));
+                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.leftItem(item));
                     });
 
                     matchers.register({ type: 'keydown', which: 37 }, function (event, item) {
-                        var prev = selectionModel.previousItem(item);
+                        var prev = selectionModel.leftItem(item);
                         selectionModel.selectItem(prev);
                         selectionModel.anchor(prev);
                     });
@@ -451,23 +467,23 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     matchers.register(
                         { type: 'keydown', which: 39, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 39, metaKey: true, shiftKey: true }, function (event, item) {
-                        selectionModel.appendSelectionFromAnchor(selectionModel.nextItem(item));
+                        selectionModel.appendSelectionFromAnchor(selectionModel.rightItem(item));
                     });
 
                     matchers.register(
                         { type: 'keydown', which: 39, ctrlKey: true },
                         { type: 'keydown', which: 39, metaKey: true }, function (event, item) {
-                        var next = selectionModel.nextItem(item);
+                        var next = selectionModel.rightItem(item);
                         selectionModel.focused(next);
                         selectionModel.anchor(next);
                     });
 
                     matchers.register({ type: 'keydown', which: 39, shiftKey: true }, function (event, item) {
-                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.nextItem(item));
+                        selectionModel.replaceSelectionWithRangeFromAnchor(selectionModel.rightItem(item));
                     });
 
                     matchers.register({ type: 'keydown', which: 39 }, function (event, item) {
-                        var next = selectionModel.nextItem(item);
+                        var next = selectionModel.rightItem(item);
                         selectionModel.selectItem(next);
                         selectionModel.anchor(next);
                     });

From 648d33c62819db835806fb61f1ee0d7ac6d4b656 Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Wed, 29 Jan 2014 11:17:43 +0100
Subject: [PATCH 12/13] Allow 'direction' property to have value 'both' as
 well, which enables keyboard navigation with all four arrows

---
 lib/knockout.selection.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/lib/knockout.selection.js b/lib/knockout.selection.js
index f3f3531..b4a509b 100644
--- a/lib/knockout.selection.js
+++ b/lib/knockout.selection.js
@@ -252,7 +252,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.anchor(firstItem);
                 });
 
-                if (selectionModel.direction === 'vertical') {
+                if (selectionModel.direction === 'vertical' || selectionModel.direction === 'both') {
                     matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
                         var previousItem = selectionModel.aboveItem(item);
                         selectionModel.selectItem(previousItem);
@@ -264,7 +264,9 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                         selectionModel.selectItem(nextItem);
                         selectionModel.anchor(nextItem);
                     });
-                } else if (selectionModel.direction === 'horizontal') {
+                }
+
+                if (selectionModel.direction === 'horizontal' || selectionModel.direction === 'both') {
                     matchers.register({ type: 'keydown', which: 37 }, function (event, item) {
                         var previousItem = selectionModel.leftItem(item);
                         selectionModel.selectItem(previousItem);
@@ -391,7 +393,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.anchor(first);
                 });
 
-                if (selectionModel.direction === 'vertical') {
+                if (selectionModel.direction === 'vertical' || selectionModel.direction === 'both') {
                     matchers.register(
                         { type: 'keydown', which: 38, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 38, metaKey: true, shiftKey: true }, function (event, item) {
@@ -439,7 +441,9 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                         selectionModel.selectItem(next);
                         selectionModel.anchor(next);
                     });
-                } else if (selectionModel.direction === 'horizontal') {
+                }
+
+                if (selectionModel.direction === 'horizontal' || selectionModel.direction === 'both') {
                     matchers.register(
                         { type: 'keydown', which: 37, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 37, metaKey: true, shiftKey: true }, function (event, item) {

From 7e2b2677285f25345f78efbf749c969f3fac8679 Mon Sep 17 00:00:00 2001
From: Maarten Winter <mw@one.com>
Date: Thu, 30 Jan 2014 10:36:56 +0100
Subject: [PATCH 13/13] Make it possible to specify `direction` option as an
 observable, listen to changes too. Put helper methods
 SelectionModel.hasHorizontal and SelectionModel.hasVertical, rather than
 hard-coding expected values in modes

---
 lib/knockout.selection.js | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/lib/knockout.selection.js b/lib/knockout.selection.js
index b4a509b..2ae7981 100644
--- a/lib/knockout.selection.js
+++ b/lib/knockout.selection.js
@@ -139,6 +139,14 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
         }
     };
 
+    SelectionModel.prototype.hasHorizontal = function () {
+        return this.direction.peek() === 'horizontal';
+    };
+
+    SelectionModel.prototype.hasVertical = function () {
+        return this.direction.peek() === 'vertical';
+    };
+
     SelectionModel.prototype.selectAll = function () {
         this.selection(this.items().slice());
     };
@@ -252,7 +260,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.anchor(firstItem);
                 });
 
-                if (selectionModel.direction === 'vertical' || selectionModel.direction === 'both') {
+                if (selectionModel.hasVertical()) {
                     matchers.register({ type: 'keydown', which: 38 }, function (event, item) {
                         var previousItem = selectionModel.aboveItem(item);
                         selectionModel.selectItem(previousItem);
@@ -266,7 +274,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     });
                 }
 
-                if (selectionModel.direction === 'horizontal' || selectionModel.direction === 'both') {
+                if (selectionModel.hasHorizontal()) {
                     matchers.register({ type: 'keydown', which: 37 }, function (event, item) {
                         var previousItem = selectionModel.leftItem(item);
                         selectionModel.selectItem(previousItem);
@@ -393,7 +401,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.anchor(first);
                 });
 
-                if (selectionModel.direction === 'vertical' || selectionModel.direction === 'both') {
+                if (selectionModel.hasVertical()) {
                     matchers.register(
                         { type: 'keydown', which: 38, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 38, metaKey: true, shiftKey: true }, function (event, item) {
@@ -443,7 +451,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     });
                 }
 
-                if (selectionModel.direction === 'horizontal' || selectionModel.direction === 'both') {
+                if (selectionModel.hasHorizontal()) {
                     matchers.register(
                         { type: 'keydown', which: 37, ctrlKey: true, shiftKey: true },
                         { type: 'keydown', which: 37, metaKey: true, shiftKey: true }, function (event, item) {
@@ -545,7 +553,11 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     selectionModel.mode = ko.observable(bindingValue.mode || config.mode);
                 }
 
-                selectionModel.direction = bindingValue.direction || config.direction;
+                if (ko.isObservable(bindingValue.direction)) {
+                    selectionModel.direction = bindingValue.direction;
+                } else {
+                    selectionModel.direction = ko.observable(bindingValue.direction || config.direction);
+                }
 
                 ko.utils.extend(config.properties, bindingValue.properties);
             } else {
@@ -553,7 +565,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                 selectionModel.focused = ko.observable(null);
                 selectionModel.anchor = ko.observable(null);
                 selectionModel.mode = ko.observable(config.mode);
-                selectionModel.direction = config.direction;
+                selectionModel.direction = ko.observable(config.direction);
             }
 
             selectionModel.init(config);
@@ -563,6 +575,10 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                 matchers = ko.bindingHandlers.selection.getMode(selectionModel.mode())(selectionModel);
             });
 
+            var directionSubscription = selectionModel.direction.subscribe(function (direction) {
+                matchers = ko.bindingHandlers.selection.getMode(selectionModel.mode.peek())(selectionModel);
+            });
+
             function matchEventWithItem(e) {
                 var item = selectionModel.findItemData(e.target || e.srcElement);
                 if (!item) {
@@ -596,6 +612,7 @@ data-bind="selection: { data: <observableArray>, selection: <observableArray>, f
                     subscription.dispose();
                 });
                 modeSubscription.dispose();
+                directionSubscription.dispose();
             });
         }
     };