adds custom attributes

Close #257
ariatemplates · Aug 6, 2014 · 3f266f5 · 3f266f5
1 parent 4e0fa3b
commit 3f266f5
Show file tree

Hide file tree

Showing 28 changed files with 406 additions and 137 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,3 +1,5 @@
+require('hsp/gestures/doubleTap'); require('hsp/gestures/drag'); require('hsp/gestures/longPress'); require('hsp/gestures/pinch'); require('hsp/gestures/singleTap'); require('hsp/gestures/swipe');require('hsp/gestures/tap');
+
 {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
@@ -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,15 +263,29 @@ 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: {
       hsp: {
         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
@@ -1,6 +1,7 @@
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
+var GestureHandler = require("./gesture").GestureHandler;
 
 var DoubleTap = klass({
     $extends : Gesture,
@@ -158,4 +159,4 @@ var DoubleTap = klass({
 
 });
 
-module.exports.DoubleTap = DoubleTap;
+new GestureHandler(["doubletap", "doubletapstart", "doubletapcancel"], DoubleTap);
diff --git a/hsp/gestures/drag.js b/hsp/gestures/drag.js
@@ -1,6 +1,7 @@
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
+var GestureHandler = require("./gesture").GestureHandler;
 
 var Drag = klass({
     $extends : Gesture,
@@ -112,4 +113,4 @@ var Drag = klass({
 
 });
 
-module.exports.Drag = Drag;
+new GestureHandler(["drag", "dragstart", "dragmove", "dragcancel"], Drag);
diff --git a/hsp/gestures/gesture.js b/hsp/gestures/gesture.js
@@ -12,7 +12,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+var hsp = require("../rt");
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 
@@ -25,7 +25,7 @@ var Gesture = klass({
     /**
      * Constructor.
      */
-    $constructor : function (target, evthandler) {
+    $constructor : function (target, callback) {
         /**
          * Reference to the target
          * @type HTMLElement
@@ -34,9 +34,9 @@ var Gesture = klass({
 
         /**
          * Reference to the event handler
-         * @type HTMLElement
+         * @type Function
          */
-        this.evthandler = evthandler;
+        this.callback = callback;
 
         /**
          * Event map uses ./touchEvent for touch event detection.
@@ -331,7 +331,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 +364,58 @@ var Gesture = klass({
     }
 });
 
-module.exports.Gesture = Gesture;
+module.exports.Gesture = Gesture;
+
+var GestureHandler = klass({
+    /**
+     * The contructor.
+     */
+    $constructor : function (list, klass) {
+        this.evtHandlers = [];
+        for (var i = 0; i < list.length; i++) {
+            hsp.registerCustomAttributes(list[i], this);
+        }
+        this._list = list;
+        this._klass = klass;
+    },
+
+    /**
+     * Starts the right gesture for the event.
+     * @param {String} the event name
+     * @param {Object} the attribute value (same as name for events)
+     * @param {HTMLElement} the event target
+     * @param {Function} the callback
+     */
+    handleAttribute : function(evtName, value, target, callback) {
+        var index = this._list.indexOf(evtName);
+        if (index >= 0) {
+            var alreadyInstanciated = false;
+            for (var i = 0, size = this.evtHandlers.length; size > i; i++) {
+                if (this.evtHandlers[i].target == target) {
+                    alreadyInstanciated = true;
+                    break;
+                }
+            }
+            if (!alreadyInstanciated) {
+                this.evtHandlers.push(new this._klass(target, callback));
+            }
+        }
+    },
+
+    /**
+     * Cleans the handlers when the target is disposed.
+     * @param {String} the event name
+     * @param {HTMLElement} the event target
+     */
+    cleanHandlers: function(evtName, target) {
+        for (var i = 0; i < this.evtHandlers.length; i++) {
+            var index = this.evtHandlers.length - i - 1;
+            if (this.evtHandlers[index].target == target) {
+                this.evtHandlers[index].$dispose();
+                this.evtHandlers.splice(index, 1);
+            }
+        }
+    }
+});
+
+module.exports.GestureHandler = GestureHandler;
diff --git a/hsp/gestures/gestures.js b/hsp/gestures/gestures.js
diff --git a/hsp/gestures/index.js b/hsp/gestures/index.js
@@ -0,0 +1,7 @@
+require("./doubleTap");
+require("./drag");
+require("./longPress");
+require("./pinch");
+require("./singleTap");
+require("./swipe");
+require("./tap");
diff --git a/hsp/gestures/longPress.js b/hsp/gestures/longPress.js
@@ -1,6 +1,7 @@
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
+var GestureHandler = require("./gesture").GestureHandler;
 
 var LongPress = klass({
     $extends : Gesture,
@@ -126,4 +127,4 @@ var LongPress = klass({
 
 });
 
-module.exports.LongPress = LongPress;
+new GestureHandler(["longpress", "longpressstart", "longpresscancel"], LongPress);
diff --git a/hsp/gestures/pinch.js b/hsp/gestures/pinch.js
@@ -1,6 +1,7 @@
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
+var GestureHandler = require("./gesture").GestureHandler;
 
 var Pinch = klass({
     $extends : Gesture,
@@ -179,4 +180,4 @@ var Pinch = klass({
 
 });
 
-module.exports.Pinch = Pinch;
+new GestureHandler(["pinch", "pinchstart", "pinchmove", "pinchcancel"], Pinch);
diff --git a/hsp/gestures/singleTap.js b/hsp/gestures/singleTap.js
@@ -1,6 +1,7 @@
 var klass = require("../klass");
 var touchEvent = require("./touchEvent");
 var Gesture = require("./gesture").Gesture;
+var GestureHandler = require("./gesture").GestureHandler;
 
 var SingleTap = klass({
     $extends : Gesture,
@@ -155,4 +156,4 @@ var SingleTap = klass({
 
 });
 
-module.exports.SingleTap = SingleTap;
+new GestureHandler(["singletap", "singletapstart", "singletapcancel"], SingleTap);