adds a handler for model and value attributes

docs/samples/gestures/gestures.hsp

@@ -1,4 +1,4 @@
-require('hsp/gestures/index');
+require('hsp/gestures/index').register();
 
 {template gestures(msgList)}
     <div class="touchboard" style="height:200px; background: #27AAFC;text-align:center;"

gruntfile.js

@@ -265,7 +265,7 @@ module.exports = function (grunt) {
         }
       },
       gestures: {
-        files: [{dest: 'dist/hashspace-browserify-gestures.js', src: ['hsp/rt.js']}],
+        files: [{dest: 'dist/hashspace-browserify-gestures.js', src: ['hsp/gestures/index.js']}],
         options: {
           aliasMappings: [
             {

hsp/gestures/doubleTap.js

@@ -159,4 +159,6 @@ var DoubleTap = klass({
 
 });
 
-hsp.registerCustomAttributes(["ondoubletap", "ondoubletapstart", "ondoubletapcancel"], DoubleTap);
+module.exports.register = function() {
+    hsp.registerCustomAttributes(["ondoubletap", "ondoubletapstart", "ondoubletapcancel"], DoubleTap);
+};

hsp/gestures/drag.js

@@ -113,4 +113,6 @@ var Drag = klass({
 
 });
 
-hsp.registerCustomAttributes(["ondrag", "ondragstart", "ondragmove", "ondragcancel"], Drag);
+module.exports.register = function() {
+    hsp.registerCustomAttributes(["ondrag", "ondragstart", "ondragmove", "ondragcancel"], Drag);
+};

hsp/gestures/index.js

@@ -1,7 +1,17 @@
-require("./doubleTap");
-require("./drag");
-require("./longPress");
-require("./pinch");
-require("./singleTap");
-require("./swipe");
-require("./tap");
+var doubleTap = require("./doubleTap");
+var drag = require("./drag");
+var longPress = require("./longPress");
+var pinch = require("./pinch");
+var singleTap = require("./singleTap");
+var swipe = require("./swipe");
+var tap = require("./tap");
+
+module.exports.register = function() {
+    doubleTap.register();
+    drag.register();
+    longPress.register();
+    pinch.register();
+    singleTap.register();
+    swipe.register();
+    tap.register();
+};

hsp/gestures/longPress.js

@@ -127,4 +127,6 @@ var LongPress = klass({
 
 });
 
-hsp.registerCustomAttributes(["onlongpress", "onlongpressstart", "onlongpresscancel"], LongPress);
+module.exports.register = function() {
+    hsp.registerCustomAttributes(["onlongpress", "onlongpressstart", "onlongpresscancel"], LongPress);
+};

hsp/gestures/pinch.js

@@ -180,4 +180,6 @@ var Pinch = klass({
 
 });
 
-hsp.registerCustomAttributes(["onpinch", "onpinchstart", "onpinchmove", "onpinchcancel"], Pinch);
+module.exports.register = function() {
+    hsp.registerCustomAttributes(["onpinch", "onpinchstart", "onpinchmove", "onpinchcancel"], Pinch);
+};

hsp/gestures/singleTap.js

@@ -156,4 +156,6 @@ var SingleTap = klass({
 
 });
 
-hsp.registerCustomAttributes(["onsingletap", "onsingletapstart", "onsingletapcancel"], SingleTap);
+module.exports.register = function() {
+    hsp.registerCustomAttributes(["onsingletap", "onsingletapstart", "onsingletapcancel"], SingleTap);
+};

hsp/gestures/swipe.js

@@ -156,4 +156,6 @@ var Swipe = klass({
 
 });
 
-hsp.registerCustomAttributes(["onswipe", "onswipestart", "onswipemove", "onswipecancel"], Swipe);
+module.exports.register = function() {
+    hsp.registerCustomAttributes(["onswipe", "onswipestart", "onswipemove", "onswipecancel"], Swipe);
+};

hsp/gestures/tap.js

@@ -93,4 +93,6 @@ var Tap = klass({
 
 });
 
-hsp.registerCustomAttributes(["ontap", "ontapstart", "ontapcancel"], Tap);
+module.exports.register = function() {
+    hsp.registerCustomAttributes(["ontap", "ontapstart", "ontapcancel"], Tap);
+};

hsp/rt.js

@@ -208,12 +208,15 @@ var customAttributesRegistry = [];
  * @param {Object} handler the attribute handler function, which can implement:
  *  - $constructor(nodeInstance, callback): used to create the handler instance.
  *  - setValue(name, value): called each time the attribute value changed, including when the initial value is set.
- *  - $dispose(): used to dispose the handler instance.
+ *  - afterRefreshAttributes(): called at the end of the attributes'refresh process, i.e. once all attributes have their new value.
+ *  - handleEvent(event): called when an event for which the custom attribute registered for is fired.
+ *  - $dispose(): used to dispose the handler instance. 
  *  It is instanciated on each element node with one of the custom attributes.
  *  WARNING: when $constructor is executed, the node instance tree is not fully built, so links with other nodes (parent, children, siblinngs) must be done in setValue.
  * @param {Integer} priority the priority of the handler, default value is 0, the higher the more priority (i.e. higher executed first).
+ * @param {Array} tags the list of tags on which the handler will apply, undefined means all.
  */
-exports.registerCustomAttributes = function (names, handler, priority) {
+exports.registerCustomAttributes = function (names, handler, priority, tags) {
     var customAttributes = names;
     if (names.constructor !== Array) {
         customAttributes = [names];
@@ -223,7 +226,8 @@ exports.registerCustomAttributes = function (names, handler, priority) {
         var entry = {
             names: customAttributes,
             handler: handler,
-            priority: prio
+            priority: prio,
+            tags: tags
         };
         customAttributesRegistry.push(entry);
     }
@@ -233,16 +237,16 @@ function _handlerSorter(a, b) {
     return b.priority - a.priority;
 }
 /**
- * Returns the list of custom attributes.
+ * Returns the list of custom attributes for an element of type tag.
  * @param {String} name the name of the attribute
+ * @param {String} tag the element's tag
  * @return {Array} the list
- * 
  */
-exports.getCustomAttributes = function(name) {
+exports.getCustomAttributeHandlers = function(name, tag) {
     var results = [];
     for (var i = 0; i < customAttributesRegistry.length; i++) {
         var entry = customAttributesRegistry[i];
-        if (entry.names.indexOf(name) > -1) {
+        if (entry.names.indexOf(name) > -1 && (typeof entry.tags === "undefined" || entry.tags.indexOf(tag) > -1)) {
             results.push(entry);
         }
     }

hsp/rt/$root.js

@@ -114,7 +114,6 @@ var $RootNode = klass({
         }
         this.childNodes = ch;
         this.argNames = argnames;
-        this.afterNodeCreation();
     },
 
     $dispose : function () {
@@ -618,7 +617,6 @@ var $CptNode = klass({
             this.adirty = false;
         }
         TNode.refresh.call(this);
-        this.afterNodeCreation();
     },
 
     /**

hsp/rt/attributes/modelvalue.js

@@ -0,0 +1,61 @@
+var klass = require("../../klass");
+
+var ModelValueHandler = klass({
+    $constructor : function (nodeInstance) {
+        this.nodeInstance = nodeInstance;
+        this.node = nodeInstance.node;
+        this._lastValues = {};
+        // note: when the input event is properly implemented we don't need to listen to keyup
+        // but IE8 and IE9 don't implement it completely - thus the need for keyup
+        this._inputEvents = ["click", "focus", "input", "keyup"];
+        nodeInstance.registerEventListeners(this._inputEvents);
+    },
+
+    setValue: function (name, value) {
+        if (name === "value") {
+            // value attribute must be changed directly as the node attribute is only used for the default value
+            if (this.node.type === "radio") {
+                this.node.value = value;
+            }
+        }
+        this._lastValues[name] = value;
+    },
+
+    afterRefreshAttributes: function() {
+        var lastValue = typeof this._lastValues["model"] === "undefined"? this._lastValues["value"]: this._lastValues["model"];
+        var lastValueAsString = '' + lastValue;
+        if (this.node.type === "radio") {
+            var currentValueAsString = '' + this.node.value;
+            this.node.checked = (lastValueAsString === currentValueAsString);
+        } else if (this.node.type === "checkbox") {
+            var currentValueAsString = '' + this.node.checked;
+            if (lastValueAsString !== currentValueAsString) {
+                this.node.checked = !this.node.checked;
+            }
+        } else if (lastValueAsString != this.node.value) {
+            //only update if value is changing
+            this.node.value = lastValue;
+        }
+    },
+
+    handleEvent : function (evt) {
+        if (this._inputEvents.indexOf(evt.type) > -1) {
+            // push the field value to the data model
+            var value = this.node.value;
+            var type = this.node.type;
+            if (type === "checkbox") {
+                value = this.node.checked;
+            }
+            var isSet = this.nodeInstance.setAttributeValueInDataModel("model", value);
+            if (!isSet) {
+                this.nodeInstance.setAttributeValueInDataModel("value", value);
+            }
+        }
+    },
+
+    $dispose: function() {
+        this._inputEvents.length = 0;
+    }
+});
+
+module.exports = ModelValueHandler;