@qooxdoo/framework 7.0.0-beta.6 → 7.0.0

package/source/class/qx/ui/decoration/Abstract.js

@@ -22,17 +22,13 @@
  * default insets by implementing the template method
  * (http://en.wikipedia.org/wiki/Template_Method) <code>_getDefaultInsets</code>
  */
-qx.Class.define("qx.ui.decoration.Abstract",
-{
+qx.Class.define("qx.ui.decoration.Abstract", {
   extend: qx.core.Object,
-  implement : [qx.ui.decoration.IDecorator],
+  implement: [qx.ui.decoration.IDecorator],
   type: "abstract",
 
-
-  members :
-  {
-    __insets : null,
-
+  members: {
+    __insets: null,
 
     /**
      * Abstract method. Should return a map containing the default insets of
@@ -47,32 +43,28 @@ qx.Class.define("qx.ui.decoration.Abstract",
      * </pre>
      * @return {Map} Map containing the insets.
      */
-    _getDefaultInsets : function() {
+    _getDefaultInsets() {
       throw new Error("Abstract method called.");
     },
 
-
     /**
      * Abstract method. Should return an boolean value if the decorator is
      * already initialized or not.
      * @return {Boolean} True, if the decorator is initialized.
      */
-    _isInitialized: function() {
+    _isInitialized() {
       throw new Error("Abstract method called.");
     },
 
-
     /**
      * Resets the insets.
      */
-    _resetInsets: function() {
+    _resetInsets() {
       this.__insets = null;
     },
 
-
     // interface implementation
-    getInsets : function()
-    {
+    getInsets() {
       if (!this.__insets) {
         this.__insets = this._getDefaultInsets();
       }
@@ -81,14 +73,13 @@ qx.Class.define("qx.ui.decoration.Abstract",
     }
   },
 
-
   /*
    *****************************************************************************
       DESTRUCTOR
    *****************************************************************************
    */
 
-   destruct : function() {
-     this.__insets = null;
-   }
+  destruct() {
+    this.__insets = null;
+  }
 });

package/source/class/qx/ui/decoration/Decorator.js

@@ -30,12 +30,11 @@
  * </ul>
  */
 qx.Class.define("qx.ui.decoration.Decorator", {
+  extend: qx.ui.decoration.Abstract,
 
-  extend : qx.ui.decoration.Abstract,
+  implement: [qx.ui.decoration.IDecorator],
 
-  implement : [qx.ui.decoration.IDecorator],
-
-  include : [
+  include: [
     qx.ui.decoration.MBackgroundColor,
     qx.ui.decoration.MBorderRadius,
     qx.ui.decoration.MBoxShadow,
@@ -45,33 +44,34 @@ qx.Class.define("qx.ui.decoration.Decorator", {
     qx.ui.decoration.MTransition
   ],
 
-  members :
-  {
-    __initialized : false,
+  members: {
+    __initialized: false,
 
     /**
      * Returns the configured padding minus the border width.
      * @return {Map} Map of top, right, bottom and left padding values
      */
-    getPadding : function()
-    {
+    getPadding() {
       var insets = this.getInset();
       var slices = this._getDefaultInsetsForBorderImage();
 
-      var borderTop = insets.top - (slices.top ? slices.top : this.getWidthTop());
-      var borderRight = insets.right - (slices.right ? slices.right : this.getWidthRight());
-      var borderBottom = insets.bottom - (slices.bottom ? slices.bottom : this.getWidthBottom());
-      var borderLeft = insets.left - (slices.left ? slices.left : this.getWidthLeft());
+      var borderTop =
+        insets.top - (slices.top ? slices.top : this.getWidthTop());
+      var borderRight =
+        insets.right - (slices.right ? slices.right : this.getWidthRight());
+      var borderBottom =
+        insets.bottom - (slices.bottom ? slices.bottom : this.getWidthBottom());
+      var borderLeft =
+        insets.left - (slices.left ? slices.left : this.getWidthLeft());
 
       return {
-        top : insets.top ? borderTop : this.getInnerWidthTop(),
-        right : insets.right ? borderRight : this.getInnerWidthRight(),
-        bottom : insets.bottom ? borderBottom : this.getInnerWidthBottom(),
-        left : insets.left ? borderLeft : this.getInnerWidthLeft()
+        top: insets.top ? borderTop : this.getInnerWidthTop(),
+        right: insets.right ? borderRight : this.getInnerWidthRight(),
+        bottom: insets.bottom ? borderBottom : this.getInnerWidthBottom(),
+        left: insets.left ? borderLeft : this.getInnerWidthLeft()
       };
     },
 
-
     /**
      * Returns the styles of the decorator as a map with property names written
      * in javascript style (e.g. <code>fontWeight</code> instead of <code>font-weight</code>).
@@ -79,8 +79,7 @@ qx.Class.define("qx.ui.decoration.Decorator", {
      * @param css {Boolean?} <code>true</code> if hyphenated CSS names should be returned.
      * @return {Map} style information
      */
-    getStyles : function(css)
-    {
+    getStyles(css) {
       if (css) {
         return this._getStyles();
       }
@@ -88,22 +87,19 @@ qx.Class.define("qx.ui.decoration.Decorator", {
       var jsStyles = {};
       var cssStyles = this._getStyles();
 
-      for (var property in cssStyles)
-      {
+      for (var property in cssStyles) {
         jsStyles[qx.lang.String.camelCase(property)] = cssStyles[property];
       }
 
       return jsStyles;
     },
 
-
     /**
      * Collects all the style information from the decorators.
      *
      * @return {Map} style information
      */
-    _getStyles : function()
-    {
+    _getStyles() {
       var styles = {};
 
       for (var name in this) {
@@ -111,29 +107,29 @@ qx.Class.define("qx.ui.decoration.Decorator", {
           this[name](styles);
         }
       }
-      for(var name in styles)
-      {
-        if(qx.lang.Type.isArray(styles[name])) {
-          styles[name] = styles[name].join(', ');
+      for (var name in styles) {
+        if (qx.lang.Type.isArray(styles[name])) {
+          styles[name] = styles[name].join(", ");
         }
       }
 
-
       this.__initialized = true;
       return styles;
     },
 
-
     // overridden
-    _getDefaultInsets : function() {
+    _getDefaultInsets() {
       var directions = ["top", "right", "bottom", "left"];
       var defaultInsets = {};
 
       for (var name in this) {
-        if (name.indexOf("_getDefaultInsetsFor") == 0 && this[name] instanceof Function) {
+        if (
+          name.indexOf("_getDefaultInsetsFor") == 0 &&
+          this[name] instanceof Function
+        ) {
           var currentInsets = this[name]();
 
-          for (var i=0; i < directions.length; i++) {
+          for (var i = 0; i < directions.length; i++) {
             var direction = directions[i];
             // initialize with the first insets found
             if (defaultInsets[direction] == undefined) {
@@ -152,37 +148,42 @@ qx.Class.define("qx.ui.decoration.Decorator", {
         return defaultInsets;
       }
       // return a fallback which is 0 for all insets
-      return {top: 0, right: 0, bottom: 0, left: 0};
+      return { top: 0, right: 0, bottom: 0, left: 0 };
     },
 
-
     // overridden
-    _isInitialized: function() {
+    _isInitialized() {
       return this.__initialized;
     },
 
     /**
-    * Ensures that every propertyValue specified in propertyNames is an array.
-    * The value arrays are extended and repeated to match in length.
-    * @param propertyNames {Array} Array containing the propertyNames.
-    * @return {Array} Array containing the extended value arrays.
-    */
-    _getExtendedPropertyValueArrays: function(propertyNames) {
+     * Ensures that every propertyValue specified in propertyNames is an array.
+     * The value arrays are extended and repeated to match in length.
+     * @param propertyNames {Array} Array containing the propertyNames.
+     * @return {Array} Array containing the extended value arrays.
+     */
+    _getExtendedPropertyValueArrays(propertyNames) {
       // transform non-array values to an array containing that value
-      var propertyValues = propertyNames.map(function(propName) {
+      var propertyValues = propertyNames.map(function (propName) {
         var value = this.get(propName);
-        if(!qx.lang.Type.isArray(value)) {
+        if (!qx.lang.Type.isArray(value)) {
           value = [value];
         }
         return value;
       }, this);
 
-      // Because it's possible to set multiple values for a property there's 
+      // Because it's possible to set multiple values for a property there's
       // a chance that not all properties have the same number of values set.
       // Extend the value arrays by repeating existing values until all
       // arrays match in length.
-      var items = Math.max.apply(Math, propertyValues.map(function(prop) { return prop.length; }));
-      for(var i = 0; i < propertyValues.length; i++) {
+      var items = Math.max.apply(
+        Math,
+        propertyValues.map(function (prop) {
+          return prop.length;
+        })
+      );
+
+      for (var i = 0; i < propertyValues.length; i++) {
         this.__extendArray(propertyValues[i], items);
       }
 
@@ -190,14 +191,14 @@ qx.Class.define("qx.ui.decoration.Decorator", {
     },
 
     /**
-    * Extends an array up to the given length by repeating the elements already present.
-    * @param array {Array} Incoming array. Has to contain at least one element.
-    * @param to {Integer} Desired length. Must be greater than or equal to the the length of arr.
-    */
-    __extendArray: function(array, to) {
+     * Extends an array up to the given length by repeating the elements already present.
+     * @param array {Array} Incoming array. Has to contain at least one element.
+     * @param to {Integer} Desired length. Must be greater than or equal to the the length of arr.
+     */
+    __extendArray(array, to) {
       var initial = array.length;
-      while(array.length < to) {
-        array.push(array[array.length%initial]);
+      while (array.length < to) {
+        array.push(array[array.length % initial]);
       }
     }
   }

package/source/class/qx/ui/decoration/IDecorator.js

@@ -21,26 +21,20 @@
  * A decorator is responsible for computing a widget's decoration styles.
  *
  */
-qx.Interface.define("qx.ui.decoration.IDecorator",
-{
-  members :
-  {
-
+qx.Interface.define("qx.ui.decoration.IDecorator", {
+  members: {
     /**
      * Returns the decorator's styles.
      *
      * @return {Map} Map of decoration styles
      */
-    getStyles : function() {},
-
-
+    getStyles() {},
 
     /**
      * Returns the configured padding minus the border width.
      * @return {Map} Map of top, right, bottom and left padding values
      */
-    getPadding : function() {},
-
+    getPadding() {},
 
     /**
      * Get the amount of space the decoration needs for its border and padding
@@ -49,6 +43,6 @@ qx.Interface.define("qx.ui.decoration.IDecorator",
      * @return {Map} the desired inset as a map with the keys <code>top</code>,
      *     <code>right</code>, <code>bottom</code>, <code>left</code>.
      */
-    getInsets : function() {}
+    getInsets() {}
   }
 });

package/source/class/qx/ui/decoration/MBackgroundColor.js

@@ -19,28 +19,22 @@
  * Mixin responsible for setting the background color of a widget.
  * This mixin is usually used by {@link qx.ui.decoration.Decorator}.
  */
-qx.Mixin.define("qx.ui.decoration.MBackgroundColor",
-{
-  properties :
-  {
+qx.Mixin.define("qx.ui.decoration.MBackgroundColor", {
+  properties: {
     /** Color of the background */
-    backgroundColor :
-    {
-      check : "Color",
-      nullable : true,
-      apply : "_applyBackgroundColor"
+    backgroundColor: {
+      check: "Color",
+      nullable: true,
+      apply: "_applyBackgroundColor"
     }
   },
 
-
-  members :
-  {
-
+  members: {
     /**
      * Adds the background-color styles to the given map
      * @param styles {Map} CSS style map
      */
-    _styleBackgroundColor : function(styles) {
+    _styleBackgroundColor(styles) {
       var bgcolor = this.getBackgroundColor();
 
       if (bgcolor && qx.core.Environment.get("qx.theme")) {
@@ -52,14 +46,13 @@ qx.Mixin.define("qx.ui.decoration.MBackgroundColor",
       }
     },
 
-
     // property apply
-    _applyBackgroundColor : function()
-    {
-      if (qx.core.Environment.get("qx.debug"))
-      {
+    _applyBackgroundColor() {
+      if (qx.core.Environment.get("qx.debug")) {
         if (this._isInitialized()) {
-          throw new Error("This decorator is already in-use. Modification is not possible anymore!");
+          throw new Error(
+            "This decorator is already in-use. Modification is not possible anymore!"
+          );
         }
       }
     }

package/source/class/qx/ui/decoration/MBackgroundImage.js

@@ -47,26 +47,20 @@
  *   }
  * </pre>
  */
-qx.Mixin.define("qx.ui.decoration.MBackgroundImage",
-{
-  properties :
-  {
+qx.Mixin.define("qx.ui.decoration.MBackgroundImage", {
+  properties: {
     /** The URL of the background image */
-    backgroundImage :
-    {
-      nullable : true,
-      apply : "_applyBackgroundImage"
+    backgroundImage: {
+      nullable: true,
+      apply: "_applyBackgroundImage"
     },
 
-
     /** How the background image should be repeated */
-    backgroundRepeat :
-    {
-      init : "repeat",
-      apply : "_applyBackgroundImage"
+    backgroundRepeat: {
+      init: "repeat",
+      apply: "_applyBackgroundImage"
     },
 
-
     /**
      * Either a string or a number, which defines the horizontal position
      * of the background image.
@@ -75,13 +69,11 @@ qx.Mixin.define("qx.ui.decoration.MBackgroundImage",
      * the value is taken to be a CSS value. For CSS, the values are "center",
      * "left" and "right".
      */
-    backgroundPositionX :
-    {
-      nullable : true,
-      apply : "_applyBackgroundPosition"
+    backgroundPositionX: {
+      nullable: true,
+      apply: "_applyBackgroundPosition"
     },
 
-
     /**
      * Either a string or a number, which defines the vertical position
      * of the background image.
@@ -90,75 +82,70 @@ qx.Mixin.define("qx.ui.decoration.MBackgroundImage",
      * the value is taken to be a CSS value. For CSS, the values are "top",
      * "center" and "bottom".
      */
-    backgroundPositionY :
-    {
-      nullable : true,
-      apply : "_applyBackgroundPosition"
+    backgroundPositionY: {
+      nullable: true,
+      apply: "_applyBackgroundPosition"
     },
 
-
     /**
      * Specifies where the background image is positioned.
      */
-    backgroundOrigin :
-    {
+    backgroundOrigin: {
       nullable: true,
       apply: "_applyBackgroundImage"
     },
 
-
     /**
      * Property group to define the background position
      */
-    backgroundPosition :
-    {
-      group : ["backgroundPositionY", "backgroundPositionX"]
+    backgroundPosition: {
+      group: ["backgroundPositionY", "backgroundPositionX"]
     },
 
-
     /**
      * Whether to order gradients before Image-URL-based background declarations
      * if both qx.ui.decoration.MBackgroundImage and
      * qx.ui.decoration.MLinearBackgroundGradient decorations are used.
      */
-    orderGradientsFront :
-    {
-      check: 'Boolean',
+    orderGradientsFront: {
+      check: "Boolean",
       init: false
     }
   },
 
-
-  members :
-  {
+  members: {
     /**
      * Adds the background-image styles to the given map
      * @param styles {Map} CSS style map
      */
-    _styleBackgroundImage : function(styles)
-    {
-      if(! this.getBackgroundImage()) {
+    _styleBackgroundImage(styles) {
+      if (!this.getBackgroundImage()) {
         return;
       }
 
-      if("background" in styles) {
-        if(!qx.lang.Type.isArray(styles['background'])) {
-          styles['background'] = [styles['background']];
+      if ("background" in styles) {
+        if (!qx.lang.Type.isArray(styles["background"])) {
+          styles["background"] = [styles["background"]];
         }
       } else {
-        styles['background'] = [];
+        styles["background"] = [];
       }
 
-      var backgroundImageProperties = ['backgroundImage', 'backgroundRepeat', 'backgroundPositionY',
-        'backgroundPositionX', 'backgroundOrigin'];
+      var backgroundImageProperties = [
+        "backgroundImage",
+        "backgroundRepeat",
+        "backgroundPositionY",
+        "backgroundPositionX",
+        "backgroundOrigin"
+      ];
 
       (function (images, repeats, tops, lefts, origins) {
-        for(var i=0;i<images.length;i++) {
+        for (var i = 0; i < images.length; i++) {
           var image = images[i];
           var repeat = repeats[i];
           var top = tops[i] || 0;
           var left = lefts[i] || 0;
-          var origin = origins[i] || '';
+          var origin = origins[i] || "";
 
           if (top == null) {
             top = 0;
@@ -177,58 +164,76 @@ qx.Mixin.define("qx.ui.decoration.MBackgroundImage",
           var source = qx.util.ResourceManager.getInstance().toUri(id);
 
           var attrs = {
-            image: 'url(' + source + ')',
+            image: "url(" + source + ")",
             position: left + " " + top,
-            repeat: 'repeat',
+            repeat: "repeat",
             origin: origin
           };
+
           if (repeat === "scale") {
             attrs.size = "100% 100%";
           } else {
             attrs.repeat = repeat;
           }
-          var imageMarkup = [attrs.image, attrs.position + ('size' in attrs ? ' / ' + attrs.size : ''), attrs.repeat, attrs.origin];
-
-          styles["background"][this.getOrderGradientsFront() ? 'push' : 'unshift'](imageMarkup.join(' '));
-
-          if (qx.core.Environment.get("qx.debug") &&
-            source &&  source.endsWith(".png") &&
+          var imageMarkup = [
+            attrs.image,
+            attrs.position + ("size" in attrs ? " / " + attrs.size : ""),
+            attrs.repeat,
+            attrs.origin
+          ];
+
+          styles["background"][
+            this.getOrderGradientsFront() ? "push" : "unshift"
+          ](imageMarkup.join(" "));
+
+          if (
+            qx.core.Environment.get("qx.debug") &&
+            source &&
+            source.endsWith(".png") &&
             (repeat == "scale" || repeat == "no-repeat") &&
             qx.core.Environment.get("engine.name") == "mshtml" &&
-            qx.core.Environment.get("browser.documentmode") < 9)
-          {
-            this.warn("Background PNGs with repeat == 'scale' or repeat == 'no-repeat'" +
-              " are not supported in this client! The image's resource id is '" + id + "'");
+            qx.core.Environment.get("browser.documentmode") < 9
+          ) {
+            this.warn(
+              "Background PNGs with repeat == 'scale' or repeat == 'no-repeat'" +
+                " are not supported in this client! The image's resource id is '" +
+                id +
+                "'"
+            );
           }
         }
-      }).apply(this, this._getExtendedPropertyValueArrays(backgroundImageProperties));
+      }.apply(
+        this,
+        this._getExtendedPropertyValueArrays(backgroundImageProperties)
+      ));
     },
 
-
     // property apply
-    _applyBackgroundImage : function()
-    {
-      if (qx.core.Environment.get("qx.debug"))
-      {
+    _applyBackgroundImage() {
+      if (qx.core.Environment.get("qx.debug")) {
         if (this._isInitialized()) {
-          throw new Error("This decorator is already in-use. Modification is not possible anymore!");
+          throw new Error(
+            "This decorator is already in-use. Modification is not possible anymore!"
+          );
         }
       }
     },
 
-
     // property apply
-    _applyBackgroundPosition : function()
-    {
-      if (qx.core.Environment.get("qx.debug"))
-      {
+    _applyBackgroundPosition() {
+      if (qx.core.Environment.get("qx.debug")) {
         if (this._isInitialized()) {
-          throw new Error("This decorator is already in-use. Modification is not possible anymore!");
+          throw new Error(
+            "This decorator is already in-use. Modification is not possible anymore!"
+          );
         }
-        if (qx.core.Environment.get("engine.name") == "mshtml" &&
-          qx.core.Environment.get("browser.documentmode") < 9)
-        {
-          this.warn("The backgroundPosition property is not supported by this client!");
+        if (
+          qx.core.Environment.get("engine.name") == "mshtml" &&
+          qx.core.Environment.get("browser.documentmode") < 9
+        ) {
+          this.warn(
+            "The backgroundPosition property is not supported by this client!"
+          );
         }
       }
     }