Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add new ko binding `gesture`, with tests.

  • Loading branch information...
commit 184bbfce06d721602392c8037ea483192d3a0044 1 parent 5f8056c
@pbouzakis pbouzakis authored
Showing with 71 additions and 1 deletion.
  1. +27 −1 lib/knockout.js
  2. +44 −0 test/knockout.coffee
View
28 lib/knockout.js
@@ -1,5 +1,7 @@
"use strict";
+/*global MSGesture: false */
+
var collectionChange = Windows.Foundation.Collections.CollectionChange;
var $ = require("jquery-browserify");
var ko = require("knockoutify");
@@ -106,7 +108,7 @@ exports.addBindings = function () {
}
} else {
if (element.hasAttribute("data-win-res")) {
- throw Error("Can not use both `winControlLabel` ko binding handler and `data-win-res` attribute");
+ throw new Error("Can not use both `winControlLabel` ko binding handler and `data-win-res` attribute");
}
element.setAttribute("data-win-res", "{ winControl: { label: '" + label + "' } }");
@@ -114,6 +116,30 @@ exports.addBindings = function () {
}
};
+ ko.bindingHandlers.gesture = {
+ init: function (element, valueAccessor) {
+ var gesture = new MSGesture();
+ var options = valueAccessor();
+ var events = Object.keys(options);
+
+ if (!events.hasOwnProperty("MSPointerDown")) {
+ element.addEventListener("MSPointerDown", function (evt) {
+ gesture.target = gesture.target || element;
+ gesture.addPointer(evt.pointerId);
+ }, false);
+ }
+
+ events.forEach(function (eventName) {
+ element.addEventListener(eventName, function (evt) {
+ if (eventName === "MSPointerDown" && gesture.target === null) {
+ gesture.target = element;
+ }
+ return options[eventName](evt, gesture);
+ }, false);
+ });
+ }
+ };
+
ko.bindingHandlers.component = {
init: function () {
return { controlsDescendantBindings: true };
View
44 test/knockout.coffee
@@ -9,6 +9,9 @@ Windows = Foundation: Collections: CollectionChange:
itemInserted: 1
itemRemoved: 2
itemChanged: 3
+
+gesture = { target: null, addPointer: sinon.stub() }
+MSGesture = -> gesture
{ $, document, ko, koUtils, domify, s } = do ->
@@ -21,6 +24,7 @@ Windows = Foundation: Collections: CollectionChange:
document: window.document
navigator: window.navigator
Windows: Windows
+ MSGesture: MSGesture
s = sinon.stub()
$ = sandboxedModule.require("jquery-browserify", globals: globals)
@@ -344,6 +348,46 @@ describe "Knockout custom bindings", ->
"""
)
+ describe "gesture", ->
+ beforeEach ->
+ @el = $('<div data-bind="gesture: { PointerEventA: handlerA, PointerEventB: handlerB }">Test</div>')[0]
+ @viewModel = handlerA: sinon.stub(), handlerB: sinon.stub()
+ @addEventListenerSpy = sinon.spy(@el, "addEventListener")
+ ko.applyBindings(@viewModel, @el)
+
+ afterEach ->
+ gesture.target = null
+
+ it "should listen to all pointer events configured inside the gesture options", ->
+ @addEventListenerSpy.should.have.been.calledWith("PointerEventA")
+ @addEventListenerSpy.should.have.been.calledWith("PointerEventB")
+
+ describe "when an event for MSPointerDown is not provided", ->
+ beforeEach ->
+ @evt = document.createEvent("MSPointerDown")
+ @evt._type = "MSPointerDown" # Needed for dispatchEvent to call our handlers. Don't ask!
+ @evt.pointerId = "ABC"
+ @el.dispatchEvent(@evt)
+
+ it "should add a listener for MSPointerDown when not provided", ->
+ @addEventListenerSpy.should.have.been.calledWith("MSPointerDown")
+
+ it "should call addPointer on the gesture with the pointer id of the event", ->
+ gesture.addPointer.should.have.been.calledWith("ABC")
+
+ describe "when a gesture event is fired", ->
+ beforeEach ->
+ @evt = document.createEvent("PointerEventA")
+ @evt._type = "PointerEventA" # Same crap as above.
+ @el.dispatchEvent(@evt)
+
+ it "should set the target property off the gesture to the element", ->
+ gesture.target = @el
+
+ it "should invoke handler passing in event and gesture", ->
+ @viewModel.handlerA.should.have.been.calledWith(@evt, gesture)
+
+
describe "voreach", ->
beforeEach ->
@el = $('<div><!-- ko voreach: theVector --><li data-bind="text: $data"></li><!-- /ko --></div>')[0]

2 comments on commit 184bbfc

@jfkhoury

Great like magic

@domenic

This does look to take a lot of pain out of hooking up gestures. Would love to see how it's used...

Please sign in to comment.
Something went wrong with that request. Please try again.