Added mask.js

5 files changed, 61 insertions, 11 deletions

diff --git a/src/clip.js b/src/clip.js
index 6d820df..ab7bebf 100644
--- a/src/clip.js
+++ b/src/clip.js
@@ -1,12 +1,9 @@
 
-// initialize id sequence
-var clipID = 0;
-
 SVG.Clip = function Clip() {
   this.constructor.call(this, SVG.create('clipPath'));
   
   // set unique id
-  this.id = 'svgjs_clip_' + (clipID++);
+  this.id = 'svgjs_' + (SVG.did++);
   this.attr('id', this.id);
 };
 
diff --git a/src/event.js b/src/event.js
index 4f587d2..32c2be2 100644
--- a/src/event.js
+++ b/src/event.js
@@ -1,5 +1,16 @@
 
-var eventTypes = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove'].forEach(function(e) {
+[ 'click',
+  'dblclick',
+  'mousedown',
+  'mouseup',
+  'mouseover',
+  'mouseout',
+  'mousemove',
+  'touchstart',
+  'touchend',
+  'touchmove',
+  'touchcancel' ].forEach(function(e) {
+  
   // add event to SVG.Elment
   SVG.Element.prototype[e] = function(f) {
     var s = this;
diff --git a/src/gradient.js b/src/gradient.js
index b9007ef..b9533cb 100644
--- a/src/gradient.js
+++ b/src/gradient.js
@@ -1,12 +1,9 @@
 
-// initialize id sequence
-var gradID = 0;
-
 SVG.Gradient = function Gradient(t) {
   this.constructor.call(this, SVG.create(t + 'Gradient'));
   
   // set unique id
-  this.id = 'svgjs_grad_' + (gradID++);
+  this.id = 'svgjs_' + (SVG.did++);
   this.attr('id', this.id);
   
   // store type
diff --git a/src/mask.js b/src/mask.js
new file mode 100644
index 0000000..a9b457e
--- /dev/null
+++ b/src/mask.js
@@ -0,0 +1,42 @@
+
+SVG.Mask = function Mask() {
+  this.constructor.call(this, SVG.create('mask'));
+  
+  // set unique id
+  this.id = 'svgjs_' + (SVG.did++);
+  this.attr('id', this.id);
+};
+
+// inherit from SVG.Element
+SVG.Mask.prototype = new SVG.Element();
+
+// include the container object
+SVG.extend(SVG.Mask, SVG.Container);
+
+// add clipping functionality to element
+SVG.extend(SVG.Element, {
+  
+  // mask element using another element
+  mask: function(b) {
+    var m = this.parent.defs().mask();
+    b(m);
+
+    return this.maskTo(m);
+  },
+
+  // distribute mask to svg element
+  maskTo: function(m) {
+    return this.attr('mask', 'url(#' + m.id + ')');
+  }
+  
+});
+
+// add def-specific functions
+SVG.extend(SVG.Defs, {
+  
+  // create clippath
+  mask: function() {
+    return this.put(new SVG.Mask());
+  }
+  
+});
\ No newline at end of file
diff --git a/src/svg.js b/src/svg.js
index fd5f967..1a4095f 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -1,8 +1,11 @@
 
 this.SVG = {
   // define default namespaces
-  ns:         'http://www.w3.org/2000/svg',
-  xlink:      'http://www.w3.org/1999/xlink',
+  ns:    'http://www.w3.org/2000/svg',
+  xlink: 'http://www.w3.org/1999/xlink',
+  
+  // initialize defs id sequence
+  did:    0,
   
   // method for element creation
   create: function(e) {