fixes #561, adds callback fxn to createImg()

lib/addons/p5.dom.js

@@ -175,21 +175,36 @@
    *
    * @method createImg
    * @param  {String} src src path or url for image
-   * @param  {String} alt alternate text to be used if image does not
-   *                  load
+   * @param  {String} alt alternate text to be used if image does not load
+   * @param  {Function} successCallback callback to be called once image data is loaded
    * @return {Object/p5.Element} pointer to p5.Element holding created
    *                           node
    */
-  p5.prototype.createImg = function(src, alt) {
+  p5.prototype.createImg = function(src, alt, successCallback) {
     var elt = document.createElement('img');
     elt.src = src;
+    var self;
+    var set = function(){
+      self.width = elt.width;
+      self.height = elt.height;
+      if (arguments.length === 3){
+        successCallback();
+      }
+    };
     if (typeof alt !== 'undefined') {
       elt.alt = alt;
     }
-    return addElement(elt, this);
+    if (elt.complete){
+      set();
+    }else{
+      elt.onload = function(){
+        set();
+      }
+    }
+    self = addElement(elt, this);
+    return self;
   };
 
-
   /**
    * Creates an <a></a> element in the DOM for including a hyperlink.
    * Appends to the container node if one is specified, otherwise
@@ -651,11 +666,12 @@
    *
    * Sets the position of the element relative to (0, 0) of the
    * window. Essentially, sets position:absolute and left and top
-   * properties of style.
+   * properties of style. If no arguments given returns the x and y position
+   * of the element in an object.
    *
    * @method position
-   * @param  {Number} x x-position relative to upper left of window
-   * @param  {Number} y y-position relative to upper left of window
+   * @param  {Number} [x] x-position relative to upper left of window
+   * @param  {Number} [y] y-position relative to upper left of window
    * @return {p5.Element}
    * @example
    * <div><code class='norender'>
@@ -667,11 +683,17 @@
    * }
    * </code></div>
    */
-  p5.Element.prototype.position = function(x, y) {
-    this.elt.style.position = 'absolute';
-    this.elt.style.left = x+'px';
-    this.elt.style.top = y+'px';
-    return this;
+  p5.Element.prototype.position = function() {
+    if (arguments.length === 0){
+      return { 'x' : this.elt.offsetLeft , 'y' : this.elt.offsetTop };
+    }else{
+      this.elt.style.position = 'absolute';
+      this.elt.style.left = arguments[0]+'px';
+      this.elt.style.top = arguments[1]+'px';
+      this.x = arguments[0];
+      this.y = arguments[1];
+      return this;
+    }
   };
 
   /**
@@ -706,8 +728,7 @@
       this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
       this.elt.style.transform += style;
       this.elt.parentElement.style.perspective = '1000px';
-    }
-    else if (arguments.length === 4){
+    }else if (arguments.length === 4){
       var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
       style = style.replace(/translate[X-Z]?\(.*\)/g, '');
       this.elt.style.transform = 'translate3d('+arguments[0]+'px,'+arguments[1]+'px,'+arguments[2]+'px)';
@@ -788,6 +809,10 @@
       }
     } else {
       this.elt.style[prop] = val;
+      if (prop === 'width' || prop === 'height' || prop === 'left' || prop === 'top'){
+        var numVal = val.replace(/\D+/g,'');
+        this[prop] = parseInt(numVal);
+      }
     }
     return this;
   };
@@ -877,7 +902,7 @@
    */
   p5.Element.prototype.size = function(w, h) {
     if (arguments.length === 0){
-      return { 'width' : this.elt.offsetWidth , 'height' : this.elt.offsetHeight};
+      return { 'width' : this.elt.offsetWidth , 'height' : this.elt.offsetHeight };
     }else{
       var aW = w;
       var aH = h;
@@ -903,10 +928,12 @@
             this.elt.getContext('2d')[prop] = j[prop];
           }
         } else {
-          this.elt.style.width = aW+'px !important';
-          this.elt.style.height = aH+'px !important';
+          this.elt.style.width = aW+'px';
+          this.elt.style.height = aH+'px';
           this.elt.width = aW;
           this.elt.height = aH;
+          this.width = aW;
+          this.height = aH;
         }
         this.elt.style.overflow = 'hidden';
         this.width = this.elt.offsetWidth;
@@ -1114,4 +1141,4 @@
       p5.prototype.set.call(this, x, y, imgOrCol);
     }
   };
-}));
+}));