@qooxdoo/framework 7.0.0 → 7.2.0

package/source/class/qx/ui/form/DateField.js

@@ -67,21 +67,13 @@ qx.Class.define("qx.ui.form.DateField", {
 
     // forward the focusin and focusout events to the textfield. The textfield
     // is not focusable so the events need to be forwarded manually.
-    this.addListener(
-      "focusin",
-      function (e) {
-        textField.fireNonBubblingEvent("focusin", qx.event.type.Focus);
-      },
-      this
-    );
-
-    this.addListener(
-      "focusout",
-      function (e) {
-        textField.fireNonBubblingEvent("focusout", qx.event.type.Focus);
-      },
-      this
-    );
+    this.addListener("focusin", e => {
+      textField.fireNonBubblingEvent("focusin", qx.event.type.Focus);
+    });
+
+    this.addListener("focusout", e => {
+      textField.fireNonBubblingEvent("focusout", qx.event.type.Focus);
+    });
 
     // initializes the DateField with the default format
     this._setDefaultDateFormat();
@@ -225,10 +217,9 @@ qx.Class.define("qx.ui.form.DateField", {
       if (qx.core.Environment.get("qx.dynlocale")) {
         this.__localeListenerId = qx.locale.Manager.getInstance().addListener(
           "changeLocale",
-          function () {
+          () => {
             this._setDefaultDateFormat();
-          },
-          this
+          }
         );
       }
     },
@@ -312,7 +303,10 @@ qx.Class.define("qx.ui.form.DateField", {
      * Hides the date chooser popup.
      */
     close() {
-      this.getChildControl("popup").hide();
+      var popup = this.getChildControl("popup", true);
+      if (popup && popup.isVisible()) {
+        popup.hide();
+      }
     },
 
     /**

package/source/class/qx/ui/form/FileSelectorButton.js

@@ -0,0 +1,157 @@
+/* ************************************************************************
+
+   qooxdoo
+
+   https://qooxdoo.org
+
+   Copyright:
+     2022 OETIKER+PARTNER AG
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+     * Tobias Oetiker (oetiker)
+
+************************************************************************ */
+
+/**
+ * The FileSelectorButton opens a window and lets the user pick one or several
+ * files from the local filesystem. A FileList is returned which allows access
+ * to the content of the selected files from javascript. The file(s) can now be
+ *  processed in javascript, or it/they can be uploaded to a server.
+ * 
+ * *Example*
+ *
+ * Post the content of the file to the server.
+ * 
+ * ```javascript
+ * let button = new qx.ui.form.FileSelectorButton("Select File");
+ * button.addListener('changeFileSelection',function(e){
+ * let fileList = e.getData();
+ *   let form = new FormData();
+ *   form.append('file',fileList[0]);
+ *   let req = new qx.io.request.Xhr("upload",'POST').set({
+ *     requestData: form
+ *   });
+ *   req.addListener('success',(e) => {
+ *     let response = req.getResponse();
+ *   });
+ * });
+ * ```
+ * 
+ * Process the file directly in javascript using the FileReader API.
+ * 
+ * ```javascript
+ * let button = new qx.ui.form.FileSelectorButton("Select File");
+ * button.addListener('changeFileSelection',function(e){
+ *   let fileList = e.getData();
+ *   const reader = new FileReader();
+ *   reader.addEventListener('load', () => {
+ *     let response = reader.result;
+ *     console.log("The first 4 chrs are: " + response);
+ *   });
+ *   const file = fileList[0];
+ *   reader.readAsText(file.slice(0,4));
+ * });
+
+*
+ * [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
+ */
+
+let InputElementIdCounter = 0;
+qx.Class.define("qx.ui.form.FileSelectorButton", {
+  extend: qx.ui.form.Button,
+  events: {
+    /**
+     * The event is fired when the file selection changes.
+     *
+     * The method {@link qx.event.type.Data#getData} returns the
+     * current [fileList](https://developer.mozilla.org/en-US/docs/Web/API/FileList)
+     */
+    changeFileSelection: "qx.event.type.Data"
+  },
+  properties: {
+    /**
+     * What type of files should be offered in the fileselection dialog.
+     * Use a comma separated list of [Unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). If you dont set anything, all files
+     * are allowed.
+     *
+     * *Example*
+     *
+     * `.doc,.docx,application/msword`
+     */
+    accept: {
+      nullable: true,
+      check: "String",
+      apply: "_applyAttribute"
+    },
+    /**
+     * Specify that the camera should be used for getting the "file". The
+     * value defines which camera should be used for capturing images.
+     * `user` indicates the user-facing camera.
+     * `environment` indicates the camera facing away from the user.
+     */
+    capture: {
+      nullable: true,
+      check: ["user", "environment"],
+      apply: "_applyAttribute"
+    },
+    /**
+     * Set to "true" if you want to allow the selection of multiple files.
+     */
+    multiple: {
+      nullable: true,
+      check: "Boolean",
+      apply: "_applyAttribute"
+    },
+    /**
+     * If present, indicates that only directories should be available for
+     * selection.
+     */
+    directoriesOnly: {
+      nullable: true,
+      check: "Boolean",
+      apply: "_applyAttribute"
+    }
+  },
+  members: {
+    __inputObject: null,
+
+    _applyAttribute: function (value, old, attr) {
+      if (attr === "directoriesOnly") {
+        // while the name of the attribute indicates that this only
+        // works for webkit borwsers, this is not the case. These
+        // days the attribute is supported by
+        // [everyone](https://caniuse.com/?search=webkitdirectory).
+        attr = "webkitdirectory";
+      }
+      this.__inputObject.setAttribute(attr, value);
+    },
+
+    _createContentElement: function () {
+      let id = "qxFileSelector_" + InputElementIdCounter++;
+      let input = (this.__inputObject = new qx.html.Input(
+        "file",
+        { display: "none" },
+        { id: id }
+      ));
+      let label = new qx.html.Element("label", {}, { for: id });
+      label.addListenerOnce(
+        "appear",
+        e => {
+          label.add(input);
+        }
+      );
+      input.addListenerOnce("appear", e => {
+        let inputEl = input.getDomElement();
+        inputEl.addEventListener("change", e => {
+          this.fireDataEvent("changeFileSelection", inputEl.files);
+          inputEl.value = "";
+        });
+      });
+      return label;
+    }
+  }
+});

package/source/class/qx/ui/form/Spinner.js

@@ -116,21 +116,13 @@ qx.Class.define("qx.ui.form.Spinner", {
 
     // forward the focusin and focusout events to the textfield. The textfield
     // is not focusable so the events need to be forwarded manually.
-    this.addListener(
-      "focusin",
-      function (e) {
-        textField.fireNonBubblingEvent("focusin", qx.event.type.Focus);
-      },
-      this
-    );
-
-    this.addListener(
-      "focusout",
-      function (e) {
-        textField.fireNonBubblingEvent("focusout", qx.event.type.Focus);
-      },
-      this
-    );
+    this.addListener("focusin", e => {
+      textField.fireNonBubblingEvent("focusin", qx.event.type.Focus);
+    });
+
+    this.addListener("focusout", e => {
+      textField.fireNonBubblingEvent("focusout", qx.event.type.Focus);
+    });
   },
 
   /*

package/source/class/qx/ui/form/TextArea.js

@@ -193,13 +193,9 @@ qx.Class.define("qx.ui.form.TextArea", {
 
           // On init, the clone is not yet present. Try again on appear.
         } else {
-          this.getContentElement().addListenerOnce(
-            "appear",
-            function () {
-              this.__autoSize();
-            },
-            this
-          );
+          this.getContentElement().addListenerOnce("appear", () => {
+            this.__autoSize();
+          });
         }
       }
     },

package/source/class/qx/ui/form/VirtualComboBox.js

@@ -46,22 +46,14 @@ qx.Class.define("qx.ui.form.VirtualComboBox", {
 
     // forward the focusin and focusout events to the textfield. The textfield
     // is not focusable so the events need to be forwarded manually.
-    this.addListener(
-      "focusin",
-      function (e) {
-        textField.fireNonBubblingEvent("focusin", qx.event.type.Focus);
-      },
-      this
-    );
-
-    this.addListener(
-      "focusout",
-      function (e) {
-        textField.fireNonBubblingEvent("focusout", qx.event.type.Focus);
-        this.fireNonBubblingEvent("blur", qx.event.type.Focus);
-      },
-      this
-    );
+    this.addListener("focusin", e => {
+      textField.fireNonBubblingEvent("focusin", qx.event.type.Focus);
+    });
+
+    this.addListener("focusout", e => {
+      textField.fireNonBubblingEvent("focusout", qx.event.type.Focus);
+      this.fireNonBubblingEvent("blur", qx.event.type.Focus);
+    });
   },
 
   properties: {

package/source/class/qx/ui/form/VirtualSelectBox.js

@@ -511,46 +511,30 @@ qx.Class.define("qx.ui.form.VirtualSelectBox", {
       this._add(input);
 
       var dropdown = this.getChildControl("dropdown");
-      dropdown.addListener(
-        "appear",
-        function () {
-          // we must delay so that the focus is only set once the list is ready
-          window.setTimeout(function () {
-            input.focus();
-          }, 0);
-        },
-        this
-      );
+      dropdown.addListener("appear", () => {
+        // we must delay so that the focus is only set once the list is ready
+        window.setTimeout(function () {
+          input.focus();
+        }, 0);
+      });
 
-      dropdown.addListener(
-        "disappear",
-        function () {
-          input.blur();
-          // clear filter
-          var sel = this.getValue();
-          input.resetValue();
-          this.setValue(sel);
-        },
-        this
-      );
+      dropdown.addListener("disappear", () => {
+        input.blur();
+        // clear filter
+        var sel = this.getValue();
+        input.resetValue();
+        this.setValue(sel);
+      });
 
-      input.addListener(
-        "blur",
-        function (e) {
-          this.close();
-        },
-        this
-      );
+      input.addListener("blur", e => {
+        this.close();
+      });
 
-      input.addListener(
-        "changeValue",
-        function (e) {
-          if (this.__filterUpdateRunning === 0) {
-            this.__updateDelegate();
-          }
-        },
-        this
-      );
+      input.addListener("changeValue", e => {
+        if (this.__filterUpdateRunning === 0) {
+          this.__updateDelegate();
+        }
+      });
     },
 
     __getHighlightStyleFromAppearance() {

package/source/class/qx/ui/layout/Canvas.js

@@ -235,7 +235,7 @@ qx.Class.define("qx.ui.layout.Canvas", {
           if (left == null && right == null) {
             switch (child.getAlignX()) {
               case "center":
-                left = (availWidth - size.width) / 2 - marginRight;
+                left = Math.round((availWidth - size.width) / 2 - marginRight);
                 break;
               case "right":
                 right = 0;
@@ -286,7 +286,7 @@ qx.Class.define("qx.ui.layout.Canvas", {
           if (top == null && bottom == null) {
             switch (child.getAlignY()) {
               case "middle":
-                top = (availHeight - size.height) / 2 - marginBottom;
+                top = Math.round((availHeight - size.height) / 2 - marginBottom);
                 break;
               case "bottom":
                 bottom = 0;

package/source/class/qx/ui/mobile/container/MIScroll.js

@@ -165,13 +165,9 @@ qx.Mixin.define("qx.ui.mobile.container.MIScroll", {
         loader.open("GET", path);
         loader.send();
       } else {
-        this.addListenerOnce(
-          "appear",
-          function () {
-            this._setScroll(this.__createScrollInstance());
-          },
-          this
-        );
+        this.addListenerOnce("appear", () => {
+          this._setScroll(this.__createScrollInstance());
+        });
       }
     },
 

package/source/class/qx/ui/progressive/headfoot/Progress.js

@@ -124,45 +124,33 @@ qx.Class.define("qx.ui.progressive.headfoot.Progress", {
 
       // Listen for the "renderStart" event, to save the number of elements on
       // the queue, and to set ourself visible
-      progressive.addListener(
-        "renderStart",
-        function (e) {
-          this.__total = e.getData().initial;
-          this.show();
-        },
-        this
-      );
+      progressive.addListener("renderStart", e => {
+        this.__total = e.getData().initial;
+        this.show();
+      });
 
       // Listen for the "progress" event, to update the progress bar
-      progressive.addListener(
-        "progress",
-        function (e) {
-          var complete = 1.0 - e.getData().remaining / this.__total;
-          var mySize = this.getBounds();
-          if (mySize) {
-            var barWidth = Math.floor(
-              (mySize.width - this.__percentDone.getBounds().width) * complete
-            );
-
-            var percent = Math.floor(complete * 100) + "%";
-
-            if (!isNaN(barWidth)) {
-              this.__progressBar.setMinWidth(barWidth);
-              this.__percentDone.setLabel(percent);
-            }
+      progressive.addListener("progress", e => {
+        var complete = 1.0 - e.getData().remaining / this.__total;
+        var mySize = this.getBounds();
+        if (mySize) {
+          var barWidth = Math.floor(
+            (mySize.width - this.__percentDone.getBounds().width) * complete
+          );
+
+          var percent = Math.floor(complete * 100) + "%";
+
+          if (!isNaN(barWidth)) {
+            this.__progressBar.setMinWidth(barWidth);
+            this.__percentDone.setLabel(percent);
           }
-        },
-        this
-      );
+        }
+      });
 
       // Listen for the "renderEnd" event to make ourself invisible
-      progressive.addListener(
-        "renderEnd",
-        function (e) {
-          this.exclude();
-        },
-        this
-      );
+      progressive.addListener("renderEnd", e => {
+        this.exclude();
+      });
     }
   },
 

package/source/class/qx/ui/progressive/renderer/table/Row.js

@@ -284,7 +284,8 @@ qx.Class.define("qx.ui.progressive.renderer.table.Row", {
           element: element,
           dataIndex: i,
           cellData: data[i],
-          height: height
+          height: height,
+          rowRenderer: this // useful, e.g., for getting default row height
         };
 
         // Render this cell

package/source/class/qx/ui/progressive/renderer/table/cell/Boolean.js

@@ -28,13 +28,13 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Boolean", {
   construct() {
     super();
 
-    this.__resolveImages();
+    this._resolveImages();
 
     // dynamic theme switch
     if (qx.core.Environment.get("qx.dyntheme")) {
       qx.theme.manager.Meta.getInstance().addListener(
         "changeTheme",
-        this.__resolveImages,
+        this._resolveImages,
         this
       );
     }
@@ -53,19 +53,13 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Boolean", {
   },
 
   members: {
-    __iconUrlTrue: null,
-    __iconUrlFalse: null,
-    __numericAllowed: null,
-    __conditions: null,
-    __defaultTextAlign: null,
-    __defaultColor: null,
-    __defaultFontStyle: null,
-    __defaultFontWeight: null,
+    _iconUrlTrue: null,
+    _iconUrlFalse: null,
 
     /**
      * Resolve the boolean images using the alias and resource manager.
      */
-    __resolveImages() {
+    _resolveImages() {
       var aliasManager = qx.util.AliasManager.getInstance();
       var resourceManager = qx.util.ResourceManager.getInstance();
       var boolTrueImg = aliasManager.resolve(
@@ -76,25 +70,29 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Boolean", {
         "decoration/table/boolean-false.png"
       );
 
-      this.__iconUrlTrue = resourceManager.toUri(boolTrueImg);
-      this.__iconUrlFalse = resourceManager.toUri(boolFalseImg);
+      this._iconUrlTrue = resourceManager.toUri(boolTrueImg);
+      this._iconUrlFalse = resourceManager.toUri(boolFalseImg);
     },
 
-    // overridden
-    _identifyImage(cellInfo) {
-      var imageData = {
+    _getDefaultImageData(cellInfo) {
+      return {
         imageWidth: 11,
         imageHeight: 11
       };
+    },
+
+    // overridden
+    _identifyImage(cellInfo) {
+      var imageData = this._getDefaultImageData(cellInfo);
 
       switch (cellInfo.cellData) {
         case true:
-          imageData.url = this.__iconUrlTrue;
+          imageData.url = this._iconUrlTrue;
           imageData.extras = "celldata='1' ";
           break;
 
         case false:
-          imageData.url = this.__iconUrlFalse;
+          imageData.url = this._iconUrlFalse;
           imageData.extras = "celldata='0' ";
           break;
 
@@ -115,7 +113,7 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Boolean", {
 
         if (
           qx.core.Environment.get("css.alphaimageloaderneeded") &&
-          /\.png$/i.test(this.__iconUrlTrue)
+          /\.png$/i.test(this._iconUrlTrue)
         ) {
           imageData.extras +=
             "  this.src='" +
@@ -124,18 +122,18 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Boolean", {
             "  var loader = 'DXImageTransform.Microsoft.AlphaImageLoader'; " +
             "  var filters = this.filters.item(loader); " +
             "  filters.src='" +
-            this.__iconUrlTrue +
+            this._iconUrlTrue +
             "'; " +
             "  filters.sizingMethod = 'scale'; ";
         } else {
-          imageData.extras += "  this.src='" + this.__iconUrlTrue + "'; ";
+          imageData.extras += "  this.src='" + this._iconUrlTrue + "'; ";
         }
 
         imageData.extras += "  node.nodeValue='1'; " + "} " + "else " + "{";
 
         if (
           qx.core.Environment.get("css.alphaimageloaderneeded") &&
-          /\.png$/i.test(this.__iconUrlFalse)
+          /\.png$/i.test(this._iconUrlFalse)
         ) {
           imageData.extras +=
             "  this.src='" +
@@ -144,11 +142,11 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Boolean", {
             "  var loader = 'DXImageTransform.Microsoft.AlphaImageLoader'; " +
             "  var filters = this.filters.item(loader); " +
             "  filters.src='" +
-            this.__iconUrlFalse +
+            this._iconUrlFalse +
             "'; " +
             "  filters.sizingMethod = 'scale'; ";
         } else {
-          imageData.extras += "  this.src='" + this.__iconUrlFalse + "'; ";
+          imageData.extras += "  this.src='" + this._iconUrlFalse + "'; ";
         }
 
         imageData.extras += "  node.nodeValue='0'; " + "}";
@@ -176,13 +174,13 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Boolean", {
   },
 
   destruct() {
-    this.__iconUrlTrue = this.__iconUrlFalse = null;
+    this._iconUrlTrue = this._iconUrlFalse = null;
 
     // remove dynamic theme listener
     if (qx.core.Environment.get("qx.dyntheme")) {
       qx.theme.manager.Meta.getInstance().removeListener(
         "changeTheme",
-        this.__resolveImages,
+        this._resolveImages,
         this
       );
     }

package/source/class/qx/ui/progressive/renderer/table/cell/Icon.js

@@ -21,6 +21,8 @@
 
 /**
  * Abstract Icon cell renderer.
+ *
+ * @asset(qx/static/blank.gif)
  */
 qx.Class.define("qx.ui.progressive.renderer.table.cell.Icon", {
   type: "abstract",
@@ -34,14 +36,14 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Icon", {
     var resourceManager = qx.util.ResourceManager.getInstance();
     var blankImg = aliasManager.resolve("qx/static/blank.gif");
 
-    this.__imageBlank = resourceManager.toUri(blankImg);
+    this._imageBlank = resourceManager.toUri(blankImg);
   },
 
   members: {
     /**
      * A blank image for use as a spacer in place of another image
      */
-    __imageBlank: null,
+    _imageBlank: null,
 
     /**
      * Retrieve the URI for a blank image
@@ -50,7 +52,7 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Icon", {
      *   The URI of the blank image.
      */
     getBlankImage() {
-      return this.__imageBlank;
+      return this._imageBlank;
     },
 
     /**
@@ -118,7 +120,7 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Icon", {
     // overridden
     _getContentHtml(cellInfo) {
       var html = [];
-      var imageData = this.__getImageData(cellInfo);
+      var imageData = this._getImageData(cellInfo);
 
       // Start the image tag
       html.push("<img ");
@@ -130,7 +132,7 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Icon", {
       ) {
         html.push(
           'src="',
-          this.__imageBlank,
+          this._imageBlank,
           '" style="filter:',
           "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",
           imageData.url,
@@ -192,7 +194,7 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Icon", {
      * @return {Map}
      *   See {@link #_identifyImage}
      */
-    __getImageData(cellInfo) {
+    _getImageData(cellInfo) {
       // Query the subclass about image and tooltip
       var imageData = this._identifyImage(cellInfo);
 
@@ -206,7 +208,7 @@ qx.Class.define("qx.ui.progressive.renderer.table.cell.Icon", {
 
       // If subclass gave null as url, replace with url to empty image
       if (imageData.url == null) {
-        imageData.url = this.__imageBlank;
+        imageData.url = this._imageBlank;
       }
 
       return imageData;