@qooxdoo/framework 7.0.0-beta.1 → 7.0.0-beta.10

package/source/class/qx/ui/menu/ButtonLayout.js

@@ -23,11 +23,8 @@
  *
  * @internal
  */
-qx.Class.define("qx.ui.menu.ButtonLayout",
-{
-  extend : qx.ui.layout.Abstract,
-
-
+qx.Class.define("qx.ui.menu.ButtonLayout", {
+  extend: qx.ui.layout.Abstract,
 
   /*
   *****************************************************************************
@@ -35,29 +32,29 @@ qx.Class.define("qx.ui.menu.ButtonLayout",
   *****************************************************************************
   */
 
-  members :
-  {
+  members: {
     // overridden
-    verifyLayoutProperty : qx.core.Environment.select("qx.debug",
-    {
-      "true" : function(item, name, value) {
-        this.assert(name=="column", "The property '"+name+"' is not supported by the MenuButton layout!");
+    verifyLayoutProperty: qx.core.Environment.select("qx.debug", {
+      true(item, name, value) {
+        this.assert(
+          name == "column",
+          "The property '" +
+            name +
+            "' is not supported by the MenuButton layout!"
+        );
       },
 
-      "false" : null
+      false: null
     }),
 
-
     // overridden
-    renderLayout : function(availWidth, availHeight, padding)
-    {
+    renderLayout(availWidth, availHeight, padding) {
       var children = this._getLayoutChildren();
       var child;
       var column;
 
       var columnChildren = [];
-      for (var i=0, l=children.length; i<l; i++)
-      {
+      for (var i = 0, l = children.length; i < l; i++) {
         child = children[i];
         column = child.getLayoutProperties().column;
         columnChildren[column] = child;
@@ -69,25 +66,45 @@ qx.Class.define("qx.ui.menu.ButtonLayout",
       var spacing = menu.getSpacingX();
 
       // stretch label column
-      var neededWidth = qx.lang.Array.sum(columns) + spacing * (columns.length - 1);
+      var neededWidth =
+        qx.lang.Array.sum(columns) + spacing * (columns.length - 1);
       if (neededWidth < availWidth) {
         columns[1] += availWidth - neededWidth;
       }
 
-
-      var left = padding.left, top = padding.top;
+      var left = padding.left,
+        top = padding.top;
       var Util = qx.ui.layout.Util;
 
-      for (var i=0, l=columns.length; i<l; i++)
-      {
+      for (var i = 0, l = columns.length; i < l; i++) {
         child = columnChildren[i];
 
-        if (child)
-        {
+        if (child) {
           var hint = child.getSizeHint();
-          var childTop = top + Util.computeVerticalAlignOffset(child.getAlignY()||"middle", hint.height, availHeight, 0, 0);
-          var offsetLeft = Util.computeHorizontalAlignOffset(child.getAlignX()||"left", hint.width, columns[i], child.getMarginLeft(), child.getMarginRight());
-          child.renderLayout(left + offsetLeft, childTop, hint.width, hint.height);
+          var childTop =
+            top +
+            Util.computeVerticalAlignOffset(
+              child.getAlignY() || "middle",
+              hint.height,
+              availHeight,
+              0,
+              0
+            );
+
+          var offsetLeft = Util.computeHorizontalAlignOffset(
+            child.getAlignX() || "left",
+            hint.width,
+            columns[i],
+            child.getMarginLeft(),
+            child.getMarginRight()
+          );
+
+          child.renderLayout(
+            left + offsetLeft,
+            childTop,
+            hint.width,
+            hint.height
+          );
         }
 
         if (columns[i] > 0) {
@@ -96,39 +113,34 @@ qx.Class.define("qx.ui.menu.ButtonLayout",
       }
     },
 
-
     /**
      * Get the widget's menu
      *
      * @param widget {qx.ui.core.Widget} the widget to get the menu for
      * @return {qx.ui.menu.Menu} the menu
      */
-    __getMenu : function(widget)
-    {
+    __getMenu(widget) {
       while (!(widget instanceof qx.ui.menu.Menu)) {
         widget = widget.getLayoutParent();
       }
       return widget;
     },
 
-
     // overridden
-    _computeSizeHint : function()
-    {
+    _computeSizeHint() {
       var children = this._getLayoutChildren();
       var neededHeight = 0;
       var neededWidth = 0;
 
-      for (var i=0, l=children.length; i<l; i++)
-      {
+      for (var i = 0, l = children.length; i < l; i++) {
         var hint = children[i].getSizeHint();
         neededWidth += hint.width;
         neededHeight = Math.max(neededHeight, hint.height);
       }
 
       return {
-        width : neededWidth,
-        height : neededHeight
+        width: neededWidth,
+        height: neededHeight
       };
     }
   }

package/source/class/qx/ui/menu/CheckBox.js

@@ -23,12 +23,9 @@
  * a normal {@link qx.ui.form.CheckBox} and shows a check icon when
  * checked; normally shows no icon when not checked (depends on the theme).
  */
-qx.Class.define("qx.ui.menu.CheckBox",
-{
-  extend : qx.ui.menu.AbstractButton,
-  implement : [qx.ui.form.IBooleanForm],
-
-
+qx.Class.define("qx.ui.menu.CheckBox", {
+  extend: qx.ui.menu.AbstractButton,
+  implement: [qx.ui.form.IBooleanForm],
 
   /*
   *****************************************************************************
@@ -40,9 +37,13 @@ qx.Class.define("qx.ui.menu.CheckBox",
    * @param label {String} Initial label
    * @param menu {qx.ui.menu.Menu} Initial sub menu
    */
-  construct : function(label, menu)
-  {
-    this.base(arguments);
+  construct(label, menu) {
+    super();
+
+    // ARIA attrs
+    const contenEl = this.getContentElement();
+    contenEl.setAttribute("role", "checkbox");
+    contenEl.setAttribute("aria-checked", false);
 
     // Initialize with incoming arguments
     if (label != null) {
@@ -61,74 +62,56 @@ qx.Class.define("qx.ui.menu.CheckBox",
     this.addListener("execute", this._onExecute, this);
   },
 
-
-
   /*
   *****************************************************************************
      PROPERTIES
   *****************************************************************************
   */
 
-  properties :
-  {
+  properties: {
     // overridden
-    appearance :
-    {
-      refine : true,
-      init : "menu-checkbox"
+    appearance: {
+      refine: true,
+      init: "menu-checkbox"
     },
 
     /** Whether the button is checked */
-    value :
-    {
-      check : "Boolean",
-      init : false,
-      apply : "_applyValue",
-      event : "changeValue",
-      nullable : true
+    value: {
+      check: "Boolean",
+      init: false,
+      apply: "_applyValue",
+      event: "changeValue",
+      nullable: true
     }
   },
 
-
-
-
-
   /*
   *****************************************************************************
      MEMBERS
   *****************************************************************************
   */
   /* eslint-disable @qooxdoo/qx/no-refs-in-members */
-  members :
-  {
+  members: {
     // overridden (from MExecutable to keep the icon out of the binding)
     /**
      * @lint ignoreReferenceField(_bindableProperties)
      */
-    _bindableProperties :
-    [
-      "enabled",
-      "label",
-      "toolTipText",
-      "value",
-      "menu"
-    ],
+    _bindableProperties: ["enabled", "label", "toolTipText", "value", "menu"],
 
     // property apply
-    _applyValue : function(value, old)
-    {
-      value ?
-        this.addState("checked") :
-        this.removeState("checked");
-    },
+    _applyValue(value, old) {
+      value ? this.addState("checked") : this.removeState("checked");
 
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-checked", Boolean(value));
+    },
 
     /**
      * Handler for the execute event.
      *
      * @param e {qx.event.type.Event} The execute event.
      */
-    _onExecute : function(e) {
+    _onExecute(e) {
       this.toggleValue();
     }
   }

package/source/class/qx/ui/menu/Layout.js

@@ -22,10 +22,8 @@
  *
  * @internal
  */
-qx.Class.define("qx.ui.menu.Layout",
-{
-  extend : qx.ui.layout.VBox,
-
+qx.Class.define("qx.ui.menu.Layout", {
+  extend: qx.ui.layout.VBox,
 
   /*
   *****************************************************************************
@@ -33,14 +31,12 @@ qx.Class.define("qx.ui.menu.Layout",
   *****************************************************************************
   */
 
-  properties :
-  {
+  properties: {
     /** Spacing between each cell on the menu buttons */
-    columnSpacing :
-    {
-      check : "Integer",
-      init : 0,
-      apply : "_applyLayoutChange"
+    columnSpacing: {
+      check: "Integer",
+      init: 0,
+      apply: "_applyLayoutChange"
     },
 
     /**
@@ -48,44 +44,38 @@ qx.Class.define("qx.ui.menu.Layout",
      * when the following cell is empty. Spanning may be disabled
      * through setting this property to <code>null</code>.
      */
-    spanColumn :
-    {
-      check : "Integer",
-      init : 1,
-      nullable : true,
-      apply : "_applyLayoutChange"
+    spanColumn: {
+      check: "Integer",
+      init: 1,
+      nullable: true,
+      apply: "_applyLayoutChange"
     },
 
     /** Default icon column width if no icons are rendered */
-    iconColumnWidth :
-    {
-      check : "Integer",
-      init : 0,
-      themeable : true,
-      apply : "_applyLayoutChange"
+    iconColumnWidth: {
+      check: "Integer",
+      init: 0,
+      themeable: true,
+      apply: "_applyLayoutChange"
     },
 
     /** Default arrow column width if no sub menus are rendered */
-    arrowColumnWidth :
-    {
-      check : "Integer",
-      init : 0,
-      themeable : true,
-      apply : "_applyLayoutChange"
+    arrowColumnWidth: {
+      check: "Integer",
+      init: 0,
+      themeable: true,
+      apply: "_applyLayoutChange"
     }
   },
 
-
-
   /*
   *****************************************************************************
      MEMBERS
   *****************************************************************************
   */
 
-  members :
-  {
-    __columnSizes : null,
+  members: {
+    __columnSizes: null,
 
     /*
     ---------------------------------------------------------------------------
@@ -94,20 +84,18 @@ qx.Class.define("qx.ui.menu.Layout",
     */
 
     // overridden
-    _computeSizeHint : function()
-    {
+    _computeSizeHint() {
       var children = this._getLayoutChildren();
       var child, sizes, spacing;
 
       var spanColumn = this.getSpanColumn();
-      var columnSizes = this.__columnSizes = [0, 0, 0, 0];
+      var columnSizes = (this.__columnSizes = [0, 0, 0, 0]);
       var columnSpacing = this.getColumnSpacing();
       var spanColumnWidth = 0;
       var maxInset = 0;
 
       // Compute column sizes and insets
-      for (var i=0, l=children.length; i<l; i++)
-      {
+      for (var i = 0, l = children.length; i < l; i++) {
         child = children[i];
 
         if (child.isAnonymous()) {
@@ -116,9 +104,12 @@ qx.Class.define("qx.ui.menu.Layout",
 
         sizes = child.getChildrenSizes();
 
-        for (var column=0; column<sizes.length; column++)
-        {
-          if (spanColumn != null && column == spanColumn && sizes[spanColumn+1] == 0) {
+        for (var column = 0; column < sizes.length; column++) {
+          if (
+            spanColumn != null &&
+            column == spanColumn &&
+            sizes[spanColumn + 1] == 0
+          ) {
             spanColumnWidth = Math.max(spanColumnWidth, sizes[column]);
           } else {
             columnSizes[column] = Math.max(columnSizes[column], sizes[column]);
@@ -131,8 +122,13 @@ qx.Class.define("qx.ui.menu.Layout",
 
       // Fix label column width is cases where the maximum button with no shortcut
       // is larger than the maximum button with a shortcut
-      if (spanColumn != null && columnSizes[spanColumn] + columnSpacing + columnSizes[spanColumn+1] < spanColumnWidth) {
-        columnSizes[spanColumn] = spanColumnWidth - columnSizes[spanColumn+1] - columnSpacing;
+      if (
+        spanColumn != null &&
+        columnSizes[spanColumn] + columnSpacing + columnSizes[spanColumn + 1] <
+          spanColumnWidth
+      ) {
+        columnSizes[spanColumn] =
+          spanColumnWidth - columnSizes[spanColumn + 1] - columnSpacing;
       }
 
       // When merging the cells for label and shortcut
@@ -153,18 +149,16 @@ qx.Class.define("qx.ui.menu.Layout",
         columnSizes[3] = this.getArrowColumnWidth();
       }
 
-      var height = this.base(arguments).height;
+      var height = super._computeSizeHint().height;
 
       // Build hint
       return {
         minHeight: height,
-        height : height,
-        width : qx.lang.Array.sum(columnSizes) + maxInset + spacing
+        height: height,
+        width: qx.lang.Array.sum(columnSizes) + maxInset + spacing
       };
     },
 
-
-
     /*
     ---------------------------------------------------------------------------
       CUSTOM ADDONS
@@ -176,7 +170,7 @@ qx.Class.define("qx.ui.menu.Layout",
      *
      * @return {Array} List of all column widths
      */
-    getColumnSizes : function() {
+    getColumnSizes() {
       return this.__columnSizes || null;
     }
   },
@@ -187,7 +181,7 @@ qx.Class.define("qx.ui.menu.Layout",
    *****************************************************************************
    */
 
-  destruct : function() {
+  destruct() {
     this.__columnSizes = null;
   }
 });