From 6bbc988acebcbc5c810e83ee12e506e6bd45dbae Mon Sep 17 00:00:00 2001
From: Marc Laval <mlaval@amadeus.com>
Date: Tue, 5 Aug 2014 14:16:28 +0200
Subject: [PATCH] adds custom attributes

Close #257
---
 .gitignore                         |   1 +
 build/grunt/docs.js                |   5 +-
 docs/playground/index.md           |   1 +
 docs/samples/gestures/gestures.hsp |   2 +
 gruntfile.js                       |  26 +++-
 hsp/gestures/doubleTap.js          |   3 +-
 hsp/gestures/drag.js               |   3 +-
 hsp/gestures/gesture.js            |  17 ++-
 hsp/gestures/gestures.js           | 105 -------------
 hsp/gestures/index.js              |   7 +
 hsp/gestures/longPress.js          |   3 +-
 hsp/gestures/pinch.js              |   3 +-
 hsp/gestures/singleTap.js          |   3 +-
 hsp/gestures/swipe.js              |   3 +-
 hsp/gestures/tap.js                |   3 +-
 hsp/rt.js                          |  58 ++++++++
 hsp/rt/$root.js                    |   1 +
 hsp/rt/eltnode.js                  | 123 +++++++++++++--
 hsp/rt/tnode.js                    |  12 ++
 test/gestures/doubleTap.spec.hsp   |   1 +
 test/gestures/drag.spec.hsp        |   1 +
 test/gestures/longPress.spec.hsp   |   1 +
 test/gestures/pinch.spec.hsp       |   1 +
 test/gestures/singleTap.spec.hsp   |   1 +
 test/gestures/swipe.spec.hsp       |   1 +
 test/gestures/tap.spec.hsp         |  29 ++++
 test/rt/customAttributes.spec.hsp  | 231 +++++++++++++++++++++++++++++
 test/rt/index.html                 |   1 +
 28 files changed, 507 insertions(+), 139 deletions(-)
 delete mode 100644 hsp/gestures/gestures.js
 create mode 100644 hsp/gestures/index.js
 create mode 100644 test/rt/customAttributes.spec.hsp

diff --git a/.gitignore b/.gitignore
index 2af6f81..db56709 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 /node_modules
 /dist
 /sauce_connect.log
+/npm-debug.log
 /sc.log
 /test-results
 /tmp
diff --git a/build/grunt/docs.js b/build/grunt/docs.js
index 3ab69c0..2da1aa0 100644
--- a/build/grunt/docs.js
+++ b/build/grunt/docs.js
@@ -262,7 +262,8 @@ module.exports = function(grunt) {
         hspRoot         = grunt.config('hspserver.base')+"/hsp",
         emptyJsResponse = function(req, res) { res.set('Content-Type', 'application/x-javascript'); return res.send(""); },
         compilerPath    = '/dist/' + VERSION + '/hashspace-noder-compiler.min.js',
-        runtimePath     = '/dist/' + VERSION + '/hashspace-noder.min.js';
+        runtimePath     = '/dist/' + VERSION + '/hashspace-noder.min.js',
+        gesturesPath    = '/dist/' + VERSION + '/hashspace-noder-gestures.min.js';
 
     grunt.log.subhead('Local website setup');
     grunt.log.writeln('Starting local documentation web server...');
@@ -287,6 +288,8 @@ module.exports = function(grunt) {
     grunt.verbose.ok(compilerPath, 'polyfilled to be empty');
     app.get(runtimePath, emptyJsResponse);
     grunt.verbose.ok(runtimePath, 'polyfilled to be empty');
+    app.get(gesturesPath, emptyJsResponse);
+    grunt.verbose.ok(gesturesPath, 'polyfilled to be empty');
 
     // Proxying /test and /node_modules folders
     app.use('/test', function(req, res, next) {
diff --git a/docs/playground/index.md b/docs/playground/index.md
index ac09d49..d3c6d5b 100644
--- a/docs/playground/index.md
+++ b/docs/playground/index.md
@@ -19,6 +19,7 @@ footerscripts: |
         }
     </script>
     <script src="/dist/<%=version%>/hashspace-noder.min.js" type="text/javascript"></script>
+    <script src="/dist/<%=version%>/hashspace-noder-gestures.min.js" type="text/javascript"></script>
     <script src="/playground/playground-samples-all.js" type="text/javascript"></script>
     <script src="/playground/playground-all.js" type="text/javascript"></script>
     <script type="noder">
diff --git a/docs/samples/gestures/gestures.hsp b/docs/samples/gestures/gestures.hsp
index 128bc7d..2a9f477 100644
--- a/docs/samples/gestures/gestures.hsp
+++ b/docs/samples/gestures/gestures.hsp
@@ -1,3 +1,5 @@
+require('hsp/gestures/index');
+
 {template gestures(msgList)}
     <div class="touchboard" style="height:200px; background: #27AAFC;text-align:center;"
     	ontap="{addMsg(event)}" ontapstart="{addMsg(event)}" ontapcancel="{addMsg(event)}"
diff --git a/gruntfile.js b/gruntfile.js
index c9ba37a..1b3ce4d 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -248,11 +248,6 @@ module.exports = function (grunt) {
               cwd: "hsp/rt",
               src: ['*.js'],
               dest: 'hsp/rt'
-            },
-            {
-              cwd: "hsp/gestures",
-              src: ['*.js'],
-              dest: 'hsp/gestures'
             }
           ]
         }
@@ -268,6 +263,18 @@ module.exports = function (grunt) {
             }
           ]
         }
+      },
+      gestures: {
+        files: [{dest: 'dist/hashspace-browserify-gestures.js', src: ['hsp/rt.js']}],
+        options: {
+          aliasMappings: [
+            {
+              cwd: "hsp/gestures",
+              src: ['*.js'],
+              dest: 'hsp/gestures'
+            }
+          ]
+        }
       }
     },
     uglify: {
@@ -275,8 +282,10 @@ module.exports = function (grunt) {
         files: [
           {dest: 'dist/hashspace-browserify.min.js', src: ['dist/hashspace-browserify.js']},
           {dest: 'dist/hashspace-browserify-compiler.min.js', src: ['dist/hashspace-browserify-compiler.js']},
+          {dest: 'dist/hashspace-browserify-gestures.min.js', src: ['dist/hashspace-browserify-gestures.js']},
           {dest: 'dist/hashspace-noder.min.js', src: ['dist/hashspace-noder.js']},
-          {dest: 'dist/hashspace-noder-compiler.min.js', src: ['dist/hashspace-noder-compiler.js']}
+          {dest: 'dist/hashspace-noder-compiler.min.js', src: ['dist/hashspace-noder-compiler.js']},
+          {dest: 'dist/hashspace-noder-gestures.min.js', src: ['dist/hashspace-noder-gestures.js']}
         ]
       }
     },
@@ -342,10 +351,13 @@ module.exports = function (grunt) {
           },
           packages : [{
             name : "hashspace-noder.js",
-            files : ['hsp/*.js', 'hsp/rt/*.js', 'hsp/gestures/*.js']
+            files : ['hsp/*.js', 'hsp/rt/*.js']
           }, {
             name : "hashspace-noder-compiler.js",
             files : ['hsp/compiler/compile.js','hsp/transpiler/transpile.js']
+          }, {
+            name : "hashspace-noder-gestures.js",
+            files : ['hsp/gestures/*.js']
           }]
         }
       }
diff --git a/hsp/gestures/doubleTap.js b/hsp/gestures/doubleTap.js
index 6483d90..c5f214d 100644
--- a/hsp/gestures/doubleTap.js
+++ b/hsp/gestures/doubleTap.js
@@ -1,3 +1,4 @@
+var hsp = require("../rt");
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
@@ -158,4 +159,4 @@ var DoubleTap = klass({
 
 });
 
-module.exports.DoubleTap = DoubleTap;
\ No newline at end of file
+hsp.registerCustomAttributes(["ondoubletap", "ondoubletapstart", "ondoubletapcancel"], DoubleTap);
diff --git a/hsp/gestures/drag.js b/hsp/gestures/drag.js
index d0b6c42..19f6d07 100644
--- a/hsp/gestures/drag.js
+++ b/hsp/gestures/drag.js
@@ -1,3 +1,4 @@
+var hsp = require("../rt");
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
@@ -112,4 +113,4 @@ var Drag = klass({
 
 });
 
-module.exports.Drag = Drag;
\ No newline at end of file
+hsp.registerCustomAttributes(["ondrag", "ondragstart", "ondragmove", "ondragcancel"], Drag);
diff --git a/hsp/gestures/gesture.js b/hsp/gestures/gesture.js
index f9576b6..b03d10a 100644
--- a/hsp/gestures/gesture.js
+++ b/hsp/gestures/gesture.js
@@ -12,7 +12,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 
@@ -25,18 +24,18 @@ var Gesture = klass({
     /**
      * Constructor.
      */
-    $constructor : function (target, evthandler) {
+    $constructor : function (nodeInstance, callback) {
         /**
          * Reference to the target
          * @type HTMLElement
          */
-        this.target = target;
+        this.target = nodeInstance.node;
 
         /**
          * Reference to the event handler
-         * @type HTMLElement
+         * @type Function
          */
-        this.evthandler = evthandler;
+        this.callback = callback;
 
         /**
          * Event map uses ./touchEvent for touch event detection.
@@ -70,7 +69,9 @@ var Gesture = klass({
     },
 
     $dispose: function() {
-        this._disconnectTouchEvents();
+        if (this.callbackMap) {
+            this._disconnectTouchEvents();
+        }
         this.callbackMap = null;
     },
 
@@ -331,7 +332,7 @@ var Gesture = klass({
         extraData.currentX = position[0].x;
         extraData.currentY = position[0].y;
         fakeEvent.detail = extraData;
-        this.evthandler.handleEvent(fakeEvent);
+        this.callback(fakeEvent);
         event.cancelBubble = fakeEvent.hasStopPropagation;
         event.returnValue = !fakeEvent.hasPreventDefault;
         return event.returnValue;
@@ -364,4 +365,4 @@ var Gesture = klass({
     }
 });
 
-module.exports.Gesture = Gesture;
\ No newline at end of file
+module.exports.Gesture = Gesture;
diff --git a/hsp/gestures/gestures.js b/hsp/gestures/gestures.js
deleted file mode 100644
index 66c754a..0000000
--- a/hsp/gestures/gestures.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * Copyright 2012 Amadeus s.a.s.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var klass = require("../klass");
-var Tap = require("./tap").Tap;
-var LongPress = require("./longPress").LongPress;
-var SingleTap = require("./singleTap").SingleTap;
-var DoubleTap = require("./doubleTap").DoubleTap;
-var Swipe = require("./swipe").Swipe;
-var Drag = require("./drag").Drag;
-var Pinch = require("./pinch").Pinch;
-/**
- * Mapping between the event name and the handling class.
- * @type Object
- */
-var _gestureMap = {
-    tap: {name: "Tap", klass: Tap},
-    tapstart: {name: "Tap", klass: Tap},
-    tapcancel: {name: "Tap", klass: Tap},
-    longpress: {name: "LongPress", klass: LongPress},
-    longpressstart: {name: "LongPress", klass: LongPress},
-    longpresscancel: {name: "LongPress", klass: LongPress},
-    singletap: {name: "SingleTap", klass: SingleTap},
-    singletapstart: {name: "SingleTap", klass: SingleTap},
-    singletapcancel: {name: "SingleTap", klass: SingleTap},
-    doubletap: {name: "DoubleTap", klass: DoubleTap},
-    doubletapstart: {name: "DoubleTap", klass: DoubleTap},
-    doubletapcancel: {name: "DoubleTap", klass: DoubleTap},
-    swipe: {name: "Swipe", klass: Swipe},
-    swipestart: {name: "Swipe", klass: Swipe},
-    swipemove: {name: "Swipe", klass: Swipe},
-    swipecancel: {name: "Swipe", klass: Swipe},
-    drag: {name: "Drag", klass: Drag},
-    dragstart: {name: "Drag", klass: Drag},
-    dragmove: {name: "Drag", klass: Drag},
-    dragcancel: {name: "Drag", klass: Drag},
-    pinch: {name: "Pinch", klass: Pinch},
-    pinchstart: {name: "Pinch", klass: Pinch},
-    pinchmove: {name: "Pinch", klass: Pinch},
-    pinchcancel: {name: "Pinch", klass: Pinch}
-};
-
-/**
- * Utility method to check if an event has to be handled by this gestures module.
- * @param {String} the event name
- * @return {Boolean} the result
- */
-exports.isGesture = function(evtName) {
-    return typeof _gestureMap[evtName] != "undefined";
-};
-
-var Gestures = klass({
-    /**
-     * The contructor.
-     */
-    $constructor : function () {
-        this.evtHandlers = [];
-    },
-
-    /**
-     * Starts the right gesture for the event.
-     * @param {String} the event name
-     * @param {HTMLElement} the event target
-     * @param {Object} the delegating event handler
-     */
-    startGesture : function(evtName, target, evtHandler) {
-        var mapping = _gestureMap[evtName];
-        if (typeof mapping != "undefined") {
-            var alreadyInstanciated = false;
-            for (var i = 0, size = this.evtHandlers.length; size > i; i++) {
-                if (this.evtHandlers[i].name === mapping.name) {
-                    alreadyInstanciated = true;
-                    break;
-                }
-            }
-            if (!alreadyInstanciated) {
-                this.evtHandlers.push({name: mapping.name, instance: new mapping.klass(target, evtHandler)});
-            }
-        }
-    },
-
-    /**
-     * Disposes all created gestures.
-     */
-    $dispose : function () {
-        for (var i = 0, size = this.evtHandlers.length; size > i; i++) {
-            this.evtHandlers[i].instance.$dispose();
-        }
-        this.evtHandlers = null;
-    }
-});
-
-module.exports.Gestures = Gestures;
-
diff --git a/hsp/gestures/index.js b/hsp/gestures/index.js
new file mode 100644
index 0000000..7d0c639
--- /dev/null
+++ b/hsp/gestures/index.js
@@ -0,0 +1,7 @@
+require("./doubleTap");
+require("./drag");
+require("./longPress");
+require("./pinch");
+require("./singleTap");
+require("./swipe");
+require("./tap");
\ No newline at end of file
diff --git a/hsp/gestures/longPress.js b/hsp/gestures/longPress.js
index 55ea908..ffe894e 100644
--- a/hsp/gestures/longPress.js
+++ b/hsp/gestures/longPress.js
@@ -1,3 +1,4 @@
+var hsp = require("../rt");
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
@@ -126,4 +127,4 @@ var LongPress = klass({
 
 });
 
-module.exports.LongPress = LongPress;
\ No newline at end of file
+hsp.registerCustomAttributes(["onlongpress", "onlongpressstart", "onlongpresscancel"], LongPress);
diff --git a/hsp/gestures/pinch.js b/hsp/gestures/pinch.js
index 85f5682..8cb11eb 100644
--- a/hsp/gestures/pinch.js
+++ b/hsp/gestures/pinch.js
@@ -1,3 +1,4 @@
+var hsp = require("../rt");
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
@@ -179,4 +180,4 @@ var Pinch = klass({
 
 });
 
-module.exports.Pinch = Pinch;
\ No newline at end of file
+hsp.registerCustomAttributes(["onpinch", "onpinchstart", "onpinchmove", "onpinchcancel"], Pinch);
diff --git a/hsp/gestures/singleTap.js b/hsp/gestures/singleTap.js
index 8bdddff..ae8d18b 100644
--- a/hsp/gestures/singleTap.js
+++ b/hsp/gestures/singleTap.js
@@ -1,3 +1,4 @@
+var hsp = require("../rt");
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
@@ -155,4 +156,4 @@ var SingleTap = klass({
 
 });
 
-module.exports.SingleTap = SingleTap;
\ No newline at end of file
+hsp.registerCustomAttributes(["onsingletap", "onsingletapstart", "onsingletapcancel"], SingleTap);
diff --git a/hsp/gestures/swipe.js b/hsp/gestures/swipe.js
index 64c4cb5..ae8cab6 100644
--- a/hsp/gestures/swipe.js
+++ b/hsp/gestures/swipe.js
@@ -1,3 +1,4 @@
+var hsp = require("../rt");
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
@@ -155,4 +156,4 @@ var Swipe = klass({
 
 });
 
-module.exports.Swipe = Swipe;
\ No newline at end of file
+hsp.registerCustomAttributes(["onswipe", "onswipestart", "onswipemove", "onswipecancel"], Swipe);
diff --git a/hsp/gestures/tap.js b/hsp/gestures/tap.js
index 9d67e51..f589907 100644
--- a/hsp/gestures/tap.js
+++ b/hsp/gestures/tap.js
@@ -1,3 +1,4 @@
+var hsp = require("../rt");
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
@@ -92,4 +93,4 @@ var Tap = klass({
 
 });
 
-module.exports.Tap = Tap;
\ No newline at end of file
+hsp.registerCustomAttributes(["ontap", "ontapstart", "ontapcancel"], Tap);
diff --git a/hsp/rt.js b/hsp/rt.js
index ea749ab..5bc4dba 100644
--- a/hsp/rt.js
+++ b/hsp/rt.js
@@ -226,3 +226,61 @@ function createShortcut (tagName, tagConstructor) {
         return new tagConstructor(a1, a2, a3, a4, a5, a6);
     };
 }
+
+/**
+ * Global registry for custom attributes
+ */
+
+/**
+ * The registry as an Array, e.g:
+ * [{names: ["ontap", "ontapstart", "ontapcancel"], handler: Tap, priority: 0},
+ *  {names: ["dropdown"], handler: CustomDropDown, priority: -2},
+ *  {names: ["dropdown"], handler: OtherDropDown, priority: 2}]
+ */
+var customAttributesRegistry = [];
+/**
+ * Registers a set of custom attributes with a matching handler.
+ * @param {Array|String} names the name of the attributes.
+ * @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.
+ *  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).
+ */
+exports.registerCustomAttributes = function (names, handler, priority) {
+    var customAttributes = names;
+    if (names.constructor !== Array) {
+        customAttributes = [names];
+    }
+    if (customAttributes && customAttributes.length > 0 && handler) {
+        var prio = priority || 0;
+        var entry = {
+            names: customAttributes,
+            handler: handler,
+            priority: prio
+        };
+        customAttributesRegistry.push(entry);
+    }
+};
+
+function _handlerSorter(a, b) {
+    return b.priority - a.priority;
+}
+/**
+ * Returns the list of custom attributes.
+ * @param {String} name the name of the attribute
+ * @return {Array} the list
+ * 
+ */
+exports.getCustomAttributes = function(name) {
+    var results = [];
+    for (var i = 0; i < customAttributesRegistry.length; i++) {
+        var entry = customAttributesRegistry[i];
+        if (entry.names.indexOf(name) > -1) {
+            results.push(entry);
+        }
+    }
+    return results.sort(_handlerSorter);
+};
diff --git a/hsp/rt/$root.js b/hsp/rt/$root.js
index 5f6595b..a9d1d82 100644
--- a/hsp/rt/$root.js
+++ b/hsp/rt/$root.js
@@ -114,6 +114,7 @@ var $RootNode = klass({
         }
         this.childNodes = ch;
         this.argNames = argnames;
+        this.afterInit();
     },
 
     $dispose : function () {
diff --git a/hsp/rt/eltnode.js b/hsp/rt/eltnode.js
index a37a384..1c1ce71 100644
--- a/hsp/rt/eltnode.js
+++ b/hsp/rt/eltnode.js
@@ -20,7 +20,6 @@ var browser = require("./browser");
 var doc = require("./document");
 var TNode = require("./tnode").TNode;
 var hsp = require("../rt");
-var gestures = require("../gestures/gestures");
 var log = require("./log");
 
 var booleanAttributes = {
@@ -72,7 +71,6 @@ var EltNode = klass({
         if (children && children !== 0) {
             this.children = children;
         }
-        this.gesturesEventHandlers = null;
         this.needSubScope = (needSubScope===1);
         this._lastValue = null;
     },
@@ -94,9 +92,18 @@ var EltNode = klass({
                 }
             }
         }
-        if (this.gesturesEventHandlers) {
-            this.gesturesEventHandlers.$dispose();
-            this.gesturesEventHandlers = null;
+        if (this._customAttributesHandlers) {
+            for (var key in this._customAttributesHandlers) {
+                var customHandlers = this._customAttributesHandlers[key];
+                for (var i = 0; i < customHandlers.length; i++) {
+                    if (customHandlers[i].instance.$dispose) {
+                        customHandlers[i].instance.$dispose();
+                    }
+                    delete customHandlers[i];
+                }
+            }
+            this._customAttributesHandlers = null;
+            this._customAttributesValues = null;
         }
         this._attachEventFn = null;
         TNode.$dispose.call(this);
@@ -109,6 +116,10 @@ var EltNode = klass({
         this.TYPE = this.tag; // for debugging purposes
         var nodeType = null, nodeName = null;
         var nd, docFragment;
+        //Holds the list of custonm attributes handlers instantiated for the current EltNode instance
+        this._customAttributesHandlers = {};
+        //Holds the values of the custonm attributes of the current EltNode instance
+        this._customAttributesValues = {};
 
         if (this.tag === "svg") {
             if (browser.supportsSvg()) {
@@ -153,7 +164,16 @@ var EltNode = klass({
             }
         }
         this.node = nd;
-        this.refreshAttributes();
+        this.refreshAttributes(true);
+        //The eltNode is made adirty if it contains custom attributes. This way they can be refreshed with the full instance tree built.
+        for (var item in this._customAttributesHandlers) {
+            if(this._customAttributesHandlers.hasOwnProperty(item)) {
+                this.adirty = true;
+                break;
+            }
+        }
+
+            
 
         // attach event listener
         var evh = this.evtHandlers, hnd;
@@ -172,11 +192,16 @@ var EltNode = klass({
             if (evh) {
                 for (var i = 0, sz = evh.length; sz > i; i++) {
                     hnd = evh[i];
-                    if (gestures.isGesture(hnd.evtType)) {
-                        if (this.gesturesEventHandlers == null) {
-                            this.gesturesEventHandlers = new gestures.Gestures();
+                    var fullEvtType = "on" + hnd.evtType;
+                    //Adds custom event handlers (e.g. ontap)
+                    var customHandlers = hsp.getCustomAttributes(fullEvtType);
+                    if (customHandlers && customHandlers.length > 0) {
+                        for (var j = 0; j < customHandlers.length; j++) {
+                            var handler = this._createCustomAttributeHandler(fullEvtType, customHandlers[j], this.handleEvent.bind(this));
+                            if (handler.instance.setValue) {
+                                handler.instance.setValue(fullEvtType, fullEvtType);
+                            }
                         }
-                        this.gesturesEventHandlers.startGesture(hnd.evtType, nd, this);
                     } else {
                         evts[hnd.evtType] = true;
                         if (addEL) {
@@ -265,10 +290,62 @@ var EltNode = klass({
         TNode.refresh.call(this);
     },
 
+    /**
+     * After init process.
+     */
+    afterInit : function () {
+        TNode.afterInit.call(this);
+        if (this.adirty) {
+            this.refreshAttributes();
+            this.adirty = false;
+        }
+    },
+
+    /**
+     * Creates a custom attribute handler.
+     * @param {String} name the name of the custom attributes.
+     * @param {Object} customHandler the handler retrieved from the global repository.
+     * @param {Function} callback the callback function passed to the handler instance.
+     * @return {Object} the full handler created.
+     */
+    _createCustomAttributeHandler: function (name, customHandler, callback) {
+        var entry = null;
+        if (typeof this._customAttributesHandlers[name] == "undefined") {
+            this._customAttributesHandlers[name] = [];
+        }
+        //Check if the handler has not yet been instantiated for any of the attributes of the group
+        var alreadyInstantiated = false;
+        for (var i = 0; i < customHandler.names.length; i++) {
+            var nameToCheck = customHandler.names[i];
+            if (this._customAttributesHandlers[nameToCheck]) {
+                for (var k = 0; k < this._customAttributesHandlers[nameToCheck].length; k++) {
+                    if (customHandler.handler == this._customAttributesHandlers[nameToCheck][k].klass) {
+                        entry = this._customAttributesHandlers[nameToCheck][k];
+                        alreadyInstantiated = true;
+                        break;
+                    }
+                }
+            }
+        }
+        //Instantiates the handler and associate it to all attributes of the group
+        if (!alreadyInstantiated) {
+            entry = {klass: customHandler.handler, instance: new customHandler.handler(this, callback), handledOnce: false};
+            for (var l = 0; l < customHandler.names.length; l++) {
+                if (typeof this._customAttributesHandlers[customHandler.names[l]] == "undefined") {
+                    this._customAttributesHandlers[customHandler.names[l]] = [];
+                }
+                this._customAttributesHandlers[customHandler.names[l]].push(entry);
+                this._customAttributesValues[customHandler.names[l]] = null;
+            }
+        }
+        return entry;
+    },
+
     /**
      * Refresh the node attributes (even if adirty is false)
+     * @param {Boolean} isEltCreation a flag indicating if it is the initial attributes refresh
      */
-    refreshAttributes : function () {
+    refreshAttributes : function (isEltCreation) {
         var nd = this.node, atts = this.atts, att, eh = this.eh, vs = this.vscope, nm, modelRefs = null;
         if (atts) {
             for (var i = 0, sz = this.atts.length; sz > i; i++) {
@@ -282,6 +359,30 @@ var EltNode = klass({
                     }
                 }
                 nm = att.name;
+                if (isEltCreation) {
+                    //Adds custom attribute handlers (e.g. dropdown)
+                    var customHandlers = hsp.getCustomAttributes(nm);
+                    if (customHandlers && customHandlers.length > 0) {
+                        for (var j = 0; j < customHandlers.length; j++) {
+                            this._createCustomAttributeHandler(nm, customHandlers[j]);
+                        }
+                    }
+                }
+                else {
+                    //During custom attribute refresh, execute setValue() on the handler only if the value of the attribute has changed.
+                    var customHandlers = this._customAttributesHandlers[nm];
+                    for (var j = 0; customHandlers && j < customHandlers.length; j++) {
+                        var customHandler = customHandlers[j];
+                        var newValue = att.getValue(eh, vs, null);
+                        if (!customHandler.handledOnce || this._customAttributesValues[nm] !== newValue) {
+                            if (customHandler.instance.setValue) {
+                                customHandler.instance.setValue(nm, newValue);
+                            }
+                            this._customAttributesValues[nm] = newValue;
+                            customHandler.handledOnce = true;
+                        }
+                    }
+                }
                 if (nm === "model") {
                     // this is an hashspace extension attribute
                     continue;
diff --git a/hsp/rt/tnode.js b/hsp/rt/tnode.js
index d697d6a..2263adc 100644
--- a/hsp/rt/tnode.js
+++ b/hsp/rt/tnode.js
@@ -223,6 +223,18 @@ var TNode = klass({
         }
     },
 
+    /**
+     * After init process, started at the end of the init() of $root, once the node instance tree is full created.
+     */
+    afterInit : function () {
+        var cn = this.childNodes;
+        if (cn) {
+            for (var i = 0, sz = cn.length; sz > i; i++) {
+                cn[i].afterInit();
+            }
+        }
+    },
+
     /**
      * Abstract function that should be implemented by sub-classes
      */
diff --git a/test/gestures/doubleTap.spec.hsp b/test/gestures/doubleTap.spec.hsp
index a45a85e..3d70427 100644
--- a/test/gestures/doubleTap.spec.hsp
+++ b/test/gestures/doubleTap.spec.hsp
@@ -17,6 +17,7 @@
  * Taken from Aria Templates: https://github.com/ariatemplates/ariatemplates/blob/master/test/aria/touch/gestures/DoubleTap.js
  */
 
+require("hsp/gestures/doubleTap");
 var fireEvent=require("hsp/utils/eventgenerator").fireEvent,
     touchEventMap = require("hsp/gestures/touchEvent").touchEventMap;
 
diff --git a/test/gestures/drag.spec.hsp b/test/gestures/drag.spec.hsp
index b5fd083..14a8f70 100644
--- a/test/gestures/drag.spec.hsp
+++ b/test/gestures/drag.spec.hsp
@@ -17,6 +17,7 @@
  * Taken from Aria Templates: https://github.com/ariatemplates/ariatemplates/blob/master/test/aria/touch/gestures/Drag.js
  */
 
+require("hsp/gestures/drag");
 var fireEvent=require("hsp/utils/eventgenerator").fireEvent,
     touchEventMap = require("hsp/gestures/touchEvent").touchEventMap;
 
diff --git a/test/gestures/longPress.spec.hsp b/test/gestures/longPress.spec.hsp
index 2c2c0fb..06adf53 100644
--- a/test/gestures/longPress.spec.hsp
+++ b/test/gestures/longPress.spec.hsp
@@ -17,6 +17,7 @@
  * Taken from Aria Templates: https://github.com/ariatemplates/ariatemplates/blob/master/test/aria/touch/gestures/LongPress.js
  */
 
+require("hsp/gestures/longPress");
 var fireEvent=require("hsp/utils/eventgenerator").fireEvent,
     touchEventMap = require("hsp/gestures/touchEvent").touchEventMap;
 
diff --git a/test/gestures/pinch.spec.hsp b/test/gestures/pinch.spec.hsp
index 58c189f..9871528 100644
--- a/test/gestures/pinch.spec.hsp
+++ b/test/gestures/pinch.spec.hsp
@@ -17,6 +17,7 @@
  * Taken from Aria Templates: https://github.com/ariatemplates/ariatemplates/blob/master/test/aria/touch/gestures/Pinch.js
  */
 
+require("hsp/gestures/pinch");
 var fireEvent=require("hsp/utils/eventgenerator").fireEvent,
     touchEventMap = require("hsp/gestures/touchEvent").touchEventMap;
 
diff --git a/test/gestures/singleTap.spec.hsp b/test/gestures/singleTap.spec.hsp
index c31f6e5..0a0acf2 100644
--- a/test/gestures/singleTap.spec.hsp
+++ b/test/gestures/singleTap.spec.hsp
@@ -17,6 +17,7 @@
  * Taken from Aria Templates: https://github.com/ariatemplates/ariatemplates/blob/master/test/aria/touch/gestures/SingleTap.js
  */
 
+require("hsp/gestures/singleTap");
 var fireEvent=require("hsp/utils/eventgenerator").fireEvent,
     touchEventMap = require("hsp/gestures/touchEvent").touchEventMap;
 
diff --git a/test/gestures/swipe.spec.hsp b/test/gestures/swipe.spec.hsp
index 5dd0cca..2de2f92 100644
--- a/test/gestures/swipe.spec.hsp
+++ b/test/gestures/swipe.spec.hsp
@@ -17,6 +17,7 @@
  * Taken from Aria Templates: https://github.com/ariatemplates/ariatemplates/blob/master/test/aria/touch/gestures/Swipe.js
  */
 
+require("hsp/gestures/swipe");
 var fireEvent=require("hsp/utils/eventgenerator").fireEvent,
     touchEventMap = require("hsp/gestures/touchEvent").touchEventMap;
 
diff --git a/test/gestures/tap.spec.hsp b/test/gestures/tap.spec.hsp
index 9f1495b..d57572c 100644
--- a/test/gestures/tap.spec.hsp
+++ b/test/gestures/tap.spec.hsp
@@ -17,6 +17,7 @@
  * Taken from Aria Templates: https://github.com/ariatemplates/ariatemplates/blob/master/test/aria/touch/gestures/Tap.js
  */
 
+require("hsp/gestures");
 var fireEvent=require("hsp/utils/eventgenerator").fireEvent,
     touchEventMap = require("hsp/gestures/touchEvent").touchEventMap;
 
@@ -24,6 +25,9 @@ var fireEvent=require("hsp/utils/eventgenerator").fireEvent,
     <div title="test1" ontap="{ctl.handleTap(event)}" ontapstart="{ctl.handleTap(event)}" ontapcancel="{ctl.handleTap(event)}">
         Hello!
     </div>
+    <div title="test2" ontap="{ctl.handleTap(event)}" ontapstart="{ctl.handleTap(event)}" ontapcancel="{ctl.handleTap(event)}">
+        Hello!
+    </div>
 {/template}
 
 describe("Tap gesture", function () {
@@ -123,4 +127,29 @@ describe("Tap gesture", function () {
         n.$dispose();
     });
 
+    it("tests a valid tap on the second element: touchstart, touchmove with distance <= 10, touchend", function () {
+        var expected =  ["tapstart", "tap"];
+        var result = [];
+        var ctl = {
+            handleTap : function (evt) {
+                result.push(evt.type);
+            }
+        };
+        var n = test1(ctl);
+        fireEvent(touchEventMap.touchstart, n.node.childNodes[1], {
+            clientX : 0,
+            clientY : 0
+        });
+        fireEvent(touchEventMap.touchmove, n.node.childNodes[1], {
+            clientX : 5,
+            clientY : 5
+        });
+        fireEvent(touchEventMap.touchend, n.node.childNodes[1], {
+            clientX : 5,
+            clientY : 5
+        });
+        validate(expected, result);
+        n.$dispose();
+    });
+
 });
diff --git a/test/rt/customAttributes.spec.hsp b/test/rt/customAttributes.spec.hsp
new file mode 100644
index 0000000..c576abf
--- /dev/null
+++ b/test/rt/customAttributes.spec.hsp
@@ -0,0 +1,231 @@
+var hsp = require("hsp/rt");
+var klass = klass=require("hsp/klass");
+
+{template test1()}
+    <div style="height: 20px" verybigdiv>
+        <span>Test</span>
+    </div>
+{/template}
+
+{template test2()}
+    <div style="height: 20px" customheightdiv="50">
+        <span>Test</span>
+    </div>
+{/template}
+
+{template test3(ctl)}
+    <div style="height: 20px" customheightdiv="{ctl.myHeight}" class="{'active': ctl.isActive}">
+        <span>Test</span>
+    </div>
+{/template}
+
+{template test4()}
+    <div style="height: 20px" customheightdiv="50" verybigdiv>
+        <span>Test</span>
+    </div>
+{/template}
+
+{template test5()}
+    <div style="height: 20px" verybigchild>
+        <span>Test</span>
+    </div>
+{/template}
+
+{template test6()}
+    <div></div>
+    <div style="height: 20px" verybigsiblings>
+        <span>Test</span>
+    </div>
+    <div></div>
+{/template}
+
+{template test7()}
+    <div>
+        <div>
+            <span>
+                <#test1/>
+            </span>
+        </div>
+    </div>
+{/template}
+
+{template test8()}
+    <div style="height: 20px" customone="50" customtwo>
+        <span>Test</span>
+    </div>
+{/template}
+
+describe("Custom attributes", function () {
+
+    var status = null;
+    var handleAttributeCount = 0;
+    beforeEach(function() {
+        status = "Dirty";
+    });
+
+    var customHandler = klass({
+        $constructor: function(nodeInstance) {
+            this.node = nodeInstance.node;
+        },
+        setValue : function(name, value) {
+            if (name == "verybigdiv") {
+                expect(value).to.equal("verybigdiv");
+                this.node.style.height = "100px";
+            }
+            else if (name == "customheightdiv") {
+                this.node.style.height = value + "px";
+            }
+            handleAttributeCount++;
+        }
+    });
+
+    var customHandler2 = function (nodeInstance, callback) {
+        this.node = nodeInstance.node;
+    };
+    customHandler2.prototype.setValue = function (name, value) {
+        if (name == "verybigdiv") {
+            expect(value).to.equal("verybigdiv");
+            this.node.style.height = "90px";
+        }
+    };
+    customHandler2.prototype.$dispose = function () {
+        status = "Clean";
+    };
+
+    var customHandler3 = klass({
+        $constructor: function(nodeInstance) {
+            this.node = nodeInstance.node;
+        },
+        setValue : function(name, value) {
+            expect(value).to.equal("verybigchild");
+            expect(this.node.childNodes.length).to.equal(1);
+            this.node.firstChild.style.height = "100px";
+        }
+    });
+
+    var customHandler4 = klass({
+        $constructor: function(nodeInstance) {
+            this.node = nodeInstance.node;
+        },
+        setValue : function(name, value) {
+            expect(value).to.equal("verybigsiblings");
+            this.node.nextSibling.style.height = "100px";
+            this.node.previousSibling.style.height = "100px";
+        }
+    });
+
+    var handlerCreationCount = 0;
+    var groupHandler = klass({
+        $constructor: function(nodeInstance) {
+            this.node = nodeInstance.node;
+            handlerCreationCount++;
+        },
+        setValue : function(name, value) {
+            if (name == "customone") {
+                this.node.style.height = value + "px";
+            }
+            if (name == "customtwo") {
+                this.node.style.width = "100px";
+            }
+        }
+    });
+
+    hsp.registerCustomAttributes("verybigdiv", customHandler, 2);
+    hsp.registerCustomAttributes("customheightdiv", customHandler);
+    hsp.registerCustomAttributes("verybigchild", customHandler3);
+    hsp.registerCustomAttributes("verybigsiblings", customHandler4);
+    hsp.registerCustomAttributes(["customone", "customtwo"], groupHandler);
+
+    it("tests a simple custom attribute", function () {
+        var n = test1();
+        expect(n.node.firstChild.style.height).to.equal("100px");
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+
+    it("tests a custom attribute with static value", function () {
+        var n = test2();
+        expect(n.node.firstChild.style.height).to.equal("50px");
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+
+    it("tests a custom attribute with dynamic value", function () {
+        var ctl = {
+            myHeight: 25
+        };
+        var n = test3(ctl);
+        expect(n.node.firstChild.style.height).to.equal("25px");
+        $set(ctl, "myHeight", 90);
+        hsp.refresh();
+        expect(n.node.firstChild.style.height).to.equal("90px");
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+
+    it("tests a custom attribute accessing children", function () {
+        var n = test5();
+        expect(n.node.firstChild.firstChild.style.height).to.equal("100px");
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+
+    it("tests a custom attribute accessing sibblings", function () {
+        var n = test6();
+        expect(n.node.firstChild.style.height).to.equal("100px");
+        expect(n.node.lastChild.style.height).to.equal("100px");
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+
+    it("tests a custom attribute in subtemplate", function () {
+        handleAttributeCount = 0;
+        var n = test7();
+        expect(n.node.querySelector("div[verybigdiv]").style.height).to.equal("100px");
+        expect(handleAttributeCount).to.equal(1);
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+
+    it("tests other attribute changes do not trigger handling", function () {
+        handleAttributeCount = 0;
+        var ctl = {
+            isActive: false,
+            myHeight: 25
+        };
+        var n = test3(ctl);
+        expect(n.node.firstChild.className).to.equal("");
+        expect(handleAttributeCount).to.equal(1);
+        $set(ctl, "isActive", true);
+        hsp.refresh();
+        expect(n.node.firstChild.className).to.equal("active");
+        expect(handleAttributeCount).to.equal(1);
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+
+    it("tests several custom attributes on same node", function () {
+        var n = test4();
+        expect(n.node.firstChild.style.height).to.equal("100px");
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+
+    it("tests a simple custom attribute with several handlers", function () {
+        hsp.registerCustomAttributes("verybigdiv", customHandler2, 1);
+        var n = test1();
+        expect(n.node.firstChild.style.height).to.equal("90px");
+        n.$dispose();
+        expect(status).to.equal("Clean");
+    });
+
+    it("tests a group of attributes", function () {
+        handlerCreationCount = 0;
+        var n = test8();
+        expect(handlerCreationCount).to.equal(1);
+        expect(n.node.firstChild.style.height).to.equal("50px");
+        expect(n.node.firstChild.style.width).to.equal("100px");
+        n.$dispose();
+        expect(status).to.equal("Dirty");
+    });
+});
\ No newline at end of file
diff --git a/test/rt/index.html b/test/rt/index.html
index c21061e..8f49155 100644
--- a/test/rt/index.html
+++ b/test/rt/index.html
@@ -60,6 +60,7 @@
 	require("test/rt/cptintegration.spec.hsp");
 	require("test/rt/cptrefresh.spec.hsp");
 	require("test/rt/cptwrapper.spec.hsp");
+	require("test/rt/customAttributes.spec.hsp");
 	require("test/rt/dynexpressions.spec.hsp");
 	require("test/rt/elt.spec.hsp");
 	require("test/rt/evthandler.spec.hsp");