@qooxdoo/framework 7.1.0 → 7.2.1

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

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

package/source/class/qx/ui/splitpane/Pane.js

@@ -156,32 +156,24 @@ qx.Class.define("qx.ui.splitpane.Pane", {
       var splitter = this.getChildControl("splitter");
       var splitterWidth = splitter.getWidth();
       if (!splitterWidth) {
-        splitter.addListenerOnce(
-          "appear",
-          function () {
-            this.__setBlockerPosition();
-          },
-          this
-        );
+        splitter.addListenerOnce("appear", () => {
+          this.__setBlockerPosition();
+        });
       }
 
       // resize listener to remove the blocker in case the splitter
       // is removed.
-      splitter.addListener(
-        "resize",
-        function (e) {
-          var bounds = e.getData();
-          if (
-            this.getChildControl("splitter").isKnobVisible() &&
-            (bounds.height == 0 || bounds.width == 0)
-          ) {
-            this.__blocker.hide();
-          } else {
-            this.__blocker.show();
-          }
-        },
-        this
-      );
+      splitter.addListener("resize", e => {
+        var bounds = e.getData();
+        if (
+          this.getChildControl("splitter").isKnobVisible() &&
+          (bounds.height == 0 || bounds.width == 0)
+        ) {
+          this.__blocker.hide();
+        } else {
+          this.__blocker.show();
+        }
+      });
     },
 
     /**

package/source/class/qx/ui/table/MTableContextMenu.js

@@ -24,77 +24,69 @@ qx.Mixin.define("qx.ui.table.MTableContextMenu", {
     // Add an event listener to handle context menu events.  The actual menu
     // is built by a function registered with a call to
     // setContextMenuHandler(col, handler).
-    this.addListener(
-      "cellContextmenu",
-      function (e) {
-        var contextMenu = this.getContextMenu();
-
-        // Dispose of any previously existing context menu
-        if (contextMenu && !contextMenu.isDisposed()) {
-          // Dispose of the context menu.
-          contextMenu.hide();
-          this.setContextMenu(null);
-          this.getApplicationRoot().remove(contextMenu);
-          contextMenu.dispose();
-          contextMenu = null;
-        }
-
-        // Get the context menu handler for the column on which the context
-        // menu request was issued.
-        var col = e.getColumn();
-        var contextMenuHandler = this.getContextMenuHandler(col);
-
-        // If there's no context menu handler for this column, we have nothing
-        // to do.
-        if (typeof contextMenuHandler !== "function") {
-          return;
-        }
-
-        // Get the context object for the handler function
-        var handlerContext = this.__contextMenuHandlerContext[col];
-
-        // Get the data model
-        var tableModel = this.getTableModel();
-
-        // Create a context menu for this tree.
-        contextMenu = new qx.ui.menu.Menu();
-
-        // Don't display context menus from the context menu
-        contextMenu.addListener("contextmenu", function (e) {
-          e.preventDefault();
-        });
-
-        // This prevents the display of context menu on table header cells
-        contextMenu.addListenerOnce(
-          "disappear",
-          function () {
-            this.setContextMenu(null);
-          },
-          this
-        );
-
-        // Call the context menu handler for this column.
-        var bShowContextMenu = contextMenuHandler.call(
-          handlerContext,
-          col,
-          e.getRow(),
-          this,
-          tableModel,
-          contextMenu
-        );
-
-        // If we were told not to display the context menu...
-        if (!bShowContextMenu) {
-          // ... then we're all done here.
-          contextMenu.dispose();
-          return;
-        }
-
-        // Set the context menu
-        this.setContextMenu(contextMenu);
-      },
-      this
-    );
+    this.addListener("cellContextmenu", e => {
+      var contextMenu = this.getContextMenu();
+
+      // Dispose of any previously existing context menu
+      if (contextMenu && !contextMenu.isDisposed()) {
+        // Dispose of the context menu.
+        contextMenu.hide();
+        this.setContextMenu(null);
+        this.getApplicationRoot().remove(contextMenu);
+        contextMenu.dispose();
+        contextMenu = null;
+      }
+
+      // Get the context menu handler for the column on which the context
+      // menu request was issued.
+      var col = e.getColumn();
+      var contextMenuHandler = this.getContextMenuHandler(col);
+
+      // If there's no context menu handler for this column, we have nothing
+      // to do.
+      if (typeof contextMenuHandler !== "function") {
+        return;
+      }
+
+      // Get the context object for the handler function
+      var handlerContext = this.__contextMenuHandlerContext[col];
+
+      // Get the data model
+      var tableModel = this.getTableModel();
+
+      // Create a context menu for this tree.
+      contextMenu = new qx.ui.menu.Menu();
+
+      // Don't display context menus from the context menu
+      contextMenu.addListener("contextmenu", function (e) {
+        e.preventDefault();
+      });
+
+      // This prevents the display of context menu on table header cells
+      contextMenu.addListenerOnce("disappear", () => {
+        this.setContextMenu(null);
+      });
+
+      // Call the context menu handler for this column.
+      var bShowContextMenu = contextMenuHandler.call(
+        handlerContext,
+        col,
+        e.getRow(),
+        this,
+        tableModel,
+        contextMenu
+      );
+
+      // If we were told not to display the context menu...
+      if (!bShowContextMenu) {
+        // ... then we're all done here.
+        contextMenu.dispose();
+        return;
+      }
+
+      // Set the context menu
+      this.setContextMenu(contextMenu);
+    });
 
     // Provide an array in which context menu handlers will be stored.  The
     // array is indexed by column number.

package/source/class/qx/ui/table/Table.js

@@ -1720,13 +1720,9 @@ qx.Class.define("qx.ui.table.Table", {
       // if the dom element is not available, the table hasn't been rendered
       if (!elem) {
         // postpone the scroll until the table has appeared
-        this.addListenerOnce(
-          "appear",
-          function () {
-            this.scrollCellVisible(col, row);
-          },
-          this
-        );
+        this.addListenerOnce("appear", () => {
+          this.scrollCellVisible(col, row);
+        });
       }
 
       var columnModel = this.getTableColumnModel();

package/source/class/qx/ui/table/model/Abstract.js

@@ -73,7 +73,8 @@ qx.Class.define("qx.ui.table.model.Abstract", {
      * current implementations so only introduce the change from QX v8.
      * Ref: https://github.com/qooxdoo/qooxdoo/pull/10377#discussion_r818697343
      */
-    THROW_ON_MODEL_CHANGE_DURING_EDIT: parseInt(qx.core.Environment.get("qx.version"), 10) >= 8
+    THROW_ON_MODEL_CHANGE_DURING_EDIT:
+      parseInt(qx.core.Environment.get("qx.version"), 10) >= 8
   },
 
   members: {
@@ -320,7 +321,9 @@ qx.Class.define("qx.ui.table.model.Abstract", {
         return;
       }
       if (this.getTable() && this.getTable().isEditing()) {
-        throw new Error("A cell is currently being edited. Commit or cancel the edit before setting the table data");
+        throw new Error(
+          "A cell is currently being edited. Commit or cancel the edit before setting the table data"
+        );
       }
     }
   },