Merge pull request #983 from futuremarc/style

more support for style

Author: Lauren McCarthy

lib/addons/p5.dom.js

@@ -895,15 +895,22 @@
   };
 
   /**
-   * Sets the given style (css) property of the element with the given value.
-   * If no value is specified, returns the value of the given property,
-   * or undefined if the property is not.
+   * Sets the given style (css) property (1st arg) of the element with the
+   * given value (2nd arg). If a single argument is given, .style()
+   * returns the value of the given property; however, if the single argument
+   * is given in css syntax ('text-align:center'), .style() sets the css
+   * appropriatly. .style() also handles 2d and 3d css transforms. If
+   * the 1st arg is 'rotate', 'translate', or 'position', the following arguments
+   * accept Numbers as values. ('translate', 10, 100, 50);
    *
    * @method style
    * @param  {String} property   property to be set
-   * @param  {String} [value]    value to assign to property
+   * @param  {String|Number} [value]   value to assign to property
+   * @param  {String|Number} [value]   value to assign to property (rotate/translate)
+   * @param  {String|Number} [value]   value to assign to property (rotate/translate)
+   * @param  {String|Number} [value]   value to assign to property (translate)
    * @return {String|Object/p5.Element} value of property, if no value is specified
-   *                             or p5.Element
+   * or p5.Element
    * @example
    * <div><code class="norender">
    * var myDiv = createDiv("I like pandas.");
@@ -912,19 +919,72 @@
    * </code></div>
    */
   p5.Element.prototype.style = function(prop, val) {
+    var self = this;
+
     if (typeof val === 'undefined') {
-      var attrs = prop.split(';');
-      for (var i=0; i<attrs.length; i++) {
-        var parts = attrs[i].split(':');
-        if (parts[0] && parts[1]) {
-          this.elt.style[parts[0].trim()] = parts[1].trim();
+      if (prop.indexOf(':') === -1) {
+        var styles = window.getComputedStyle(self.elt);
+        var style = styles.getPropertyValue(prop);
+        return style;
+      } else {
+        var attrs = prop.split(';');
+        for (var i = 0; i < attrs.length; i++) {
+          var parts = attrs[i].split(':');
+          if (parts[0] && parts[1]) {
+            this.elt.style[parts[0].trim()] = parts[1].trim();
+          }
         }
       }
     } 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);
+      if (prop === 'rotate'){
+        if (arguments.length === 2) {
+          var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+          style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
+          this.elt.style.transform = 'rotate(' + arguments[0] + 'deg)';
+          this.elt.style.transform += style;
+        } else if (arguments.length === 3) {
+          var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+          style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
+          this.elt.style.transform = 'rotate(' + arguments[0] + 'deg, ' + arguments[1] + 'deg)';
+          this.elt.style.transform += style;
+        } else if (arguments.length === 4) {
+          var style = this.elt.style.transform.replace(/rotate3d\(.*\)/g, '');
+          style = style.replace(/rotate[X-Z]?\(.*\)/g, '');
+          this.elt.style.transform = 'rotateX(' + arguments[0] + 'deg)';
+          this.elt.style.transform += 'rotateY(' + arguments[1] + 'deg)';
+          this.elt.style.transform += 'rotateZ(' + arguments[2] + 'deg)';
+          this.elt.style.transform += style;
+        }
+      } else if (prop === 'translate') {
+        if (arguments.length === 3) {
+          var style = this.elt.style.transform.replace(/translate3d\(.*\)/g, '');
+          style = style.replace(/translate[X-Z]?\(.*\)/g, '');
+          this.elt.style.transform = 'translate(' + arguments[0] + 'px, ' + arguments[1] + 'px)';
+          this.elt.style.transform += style;
+        } 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)';
+          this.elt.style.transform += style;
+          this.elt.parentElement.style.perspective = '1000px';
+        } else if (arguments.length === 5) {
+          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)';
+          this.elt.style.transform += style;
+          this.elt.parentElement.style.perspective = arguments[3] + 'px';
+        }
+      } else if (prop === 'position') {
+        this.elt.style.left = arguments[1] + 'px';
+        this.elt.style.top = arguments[2] + 'px';
+        this.x = arguments[1];
+        this.y = arguments[2];
+      } 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, 10); 
+        }
       }
     }
     return this;