@qooxdoo/framework 7.1.1 → 7.2.0

package/source/class/qx/tool/compiler/targets/meta/Uglify.js

@@ -124,10 +124,18 @@ qx.Class.define("qx.tool.compiler.targets.meta.Uglify", {
         throw new Error("UglifyJS failed to minimise: " + (err.message || err));
       }
       await fs.writeFileAsync(outJsFilename, result.code, { encoding: "utf8" });
-      await fs.writeFileAsync(outJsFilename + ".map", result.map, { encoding: "utf8"  });
+      await fs.writeFileAsync(outJsFilename + ".map", result.map, {
+        encoding: "utf8"
+      });
       if (this._appMeta.getTarget().isSaveUnminified()) {
-        await fs.writeFileAsync(outJsFilename + ".unminified", inSourceCode, { encoding: "utf8" });
-        await fs.writeFileAsync(outJsFilename + ".unminified.map", JSON.stringify(inSourceMap, null, 2), { encoding: "utf8" });
+        await fs.writeFileAsync(outJsFilename + ".unminified", inSourceCode, {
+          encoding: "utf8"
+        });
+        await fs.writeFileAsync(
+          outJsFilename + ".unminified.map",
+          JSON.stringify(inSourceMap, null, 2),
+          { encoding: "utf8" }
+        );
       }
 
       this.fireDataEvent("minifiedApplication", {

package/source/class/qx/tool/utils/Website.js

@@ -25,8 +25,8 @@ const rimraf = require("rimraf");
 const dot = require("dot");
 require("jstransformer-dot");
 const metalsmith = require("metalsmith");
-const layouts = require("metalsmith-layouts");
-const markdown = require("metalsmith-markdown");
+const layouts = require("@metalsmith/layouts");
+const markdown = require("@metalsmith/markdown");
 //const filenames = require("metalsmith-filenames");
 //var permalinks = require("metalsmith-permalinks");
 /**

package/source/class/qx/ui/basic/Label.js

@@ -415,23 +415,19 @@ qx.Class.define("qx.ui.basic.Label", {
 
       if (value != null) {
         value.bind("enabled", this, "enabled");
-        this.__tapListenerId = this.addListener(
-          "tap",
-          function () {
-            // only focus focusable elements [BUG #3555]
-            if (value.isFocusable()) {
-              value.focus.apply(value);
-            }
-            // furthermore toggle if possible [BUG #6881]
-            if (
-              "toggleValue" in value &&
-              typeof value.toggleValue === "function"
-            ) {
-              value.toggleValue();
-            }
-          },
-          this
-        );
+        this.__tapListenerId = this.addListener("tap", () => {
+          // only focus focusable elements [BUG #3555]
+          if (value.isFocusable()) {
+            value.focus.apply(value);
+          }
+          // furthermore toggle if possible [BUG #6881]
+          if (
+            "toggleValue" in value &&
+            typeof value.toggleValue === "function"
+          ) {
+            value.toggleValue();
+          }
+        });
       }
     },
 

package/source/class/qx/ui/core/MPlacement.js

@@ -461,20 +461,16 @@ qx.Mixin.define("qx.ui.core.MPlacement", {
         );
 
         // Remove the listener when the element disappears.
-        this.addListener(
-          "disappear",
-          function () {
-            if (this.__ptwLiveUpdater) {
-              qx.event.Idle.getInstance().removeListener(
-                "interval",
-                this.__ptwLiveUpdater
-              );
-
-              this.__ptwLiveUpdater = null;
-            }
-          },
-          this
-        );
+        this.addListener("disappear", () => {
+          if (this.__ptwLiveUpdater) {
+            qx.event.Idle.getInstance().removeListener(
+              "interval",
+              this.__ptwLiveUpdater
+            );
+
+            this.__ptwLiveUpdater = null;
+          }
+        });
       }
 
       this._place(coords);
@@ -532,13 +528,9 @@ qx.Mixin.define("qx.ui.core.MPlacement", {
       }
 
       if (size == null) {
-        this.addListenerOnce(
-          "appear",
-          function () {
-            this.__getPlacementSize(callback);
-          },
-          this
-        );
+        this.addListenerOnce("appear", () => {
+          this.__getPlacementSize(callback);
+        });
       } else {
         callback.call(this, size);
       }

package/source/class/qx/ui/core/Widget.js

@@ -2109,13 +2109,12 @@ qx.Class.define("qx.ui.core.Widget", {
         var manager = qx.locale.Manager.getInstance();
         this.__toolTipTextListenerId = manager.addListener(
           "changeLocale",
-          function () {
+          () => {
             var toolTipText = this.getToolTipText();
             if (toolTipText && toolTipText.translate) {
               this.setToolTipText(toolTipText.translate());
             }
-          },
-          this
+          }
         );
       }
     },

package/source/class/qx/ui/core/scroll/NativeScrollBar.js

@@ -71,13 +71,9 @@ qx.Class.define("qx.ui.core.scroll.NativeScrollBar", {
     }
 
     // prevent drag & drop on scrolling
-    this.addListener(
-      "track",
-      function (e) {
-        e.stopPropagation();
-      },
-      this
-    );
+    this.addListener("track", e => {
+      e.stopPropagation();
+    });
   },
 
   events: {

package/source/class/qx/ui/core/scroll/ScrollBar.js

@@ -81,13 +81,9 @@ qx.Class.define("qx.ui.core.scroll.ScrollBar", {
     }
 
     // prevent drag & drop on scrolling
-    this.addListener(
-      "track",
-      function (e) {
-        e.stopPropagation();
-      },
-      this
-    );
+    this.addListener("track", e => {
+      e.stopPropagation();
+    });
   },
 
   events: {

package/source/class/qx/ui/embed/Iframe.js

@@ -92,64 +92,54 @@ qx.Class.define("qx.ui.embed.Iframe", {
     this.__blockerElement = this._createBlockerElement();
 
     if (qx.core.Environment.get("ecmascript.mutationobserver")) {
-      this.addListenerOnce(
-        "appear",
-        function () {
-          var element = this.getContentElement().getDomElement();
-
-          // Mutation record check callback
-          var isDOMNodeInserted = function (mutationRecord) {
-            var i;
-            // 'our' iframe was either added...
-            if (mutationRecord.addedNodes) {
-              for (i = mutationRecord.addedNodes.length; i >= 0; --i) {
-                if (mutationRecord.addedNodes[i] == element) {
-                  return true;
-                }
+      this.addListenerOnce("appear", () => {
+        var element = this.getContentElement().getDomElement();
+
+        // Mutation record check callback
+        var isDOMNodeInserted = function (mutationRecord) {
+          var i;
+          // 'our' iframe was either added...
+          if (mutationRecord.addedNodes) {
+            for (i = mutationRecord.addedNodes.length; i >= 0; --i) {
+              if (mutationRecord.addedNodes[i] == element) {
+                return true;
               }
             }
-            // ...or removed
-            if (mutationRecord.removedNodes) {
-              for (i = mutationRecord.removedNodes.length; i >= 0; --i) {
-                if (mutationRecord.removedNodes[i] == element) {
-                  return true;
-                }
+          }
+          // ...or removed
+          if (mutationRecord.removedNodes) {
+            for (i = mutationRecord.removedNodes.length; i >= 0; --i) {
+              if (mutationRecord.removedNodes[i] == element) {
+                return true;
               }
             }
-            return false;
-          };
+          }
+          return false;
+        };
 
-          var observer = new MutationObserver(
-            function (mutationRecords) {
-              if (mutationRecords.some(isDOMNodeInserted)) {
-                this._syncSourceAfterDOMMove();
-              }
-            }.bind(this)
-          );
-
-          // Observe parent element
-          var parent = this.getLayoutParent()
-            .getContentElement()
-            .getDomElement();
-          observer.observe(parent, { childList: true, subtree: true });
-        },
-        this
-      );
+        var observer = new MutationObserver(
+          function (mutationRecords) {
+            if (mutationRecords.some(isDOMNodeInserted)) {
+              this._syncSourceAfterDOMMove();
+            }
+          }.bind(this)
+        );
+
+        // Observe parent element
+        var parent = this.getLayoutParent().getContentElement().getDomElement();
+        observer.observe(parent, { childList: true, subtree: true });
+      });
     }
     // !qx.core.Environment.get("ecmascript.mutationobserver")
     else {
-      this.addListenerOnce(
-        "appear",
-        function () {
-          var element = this.getContentElement().getDomElement();
-          qx.bom.Event.addNativeListener(
-            element,
-            "DOMNodeInserted",
-            this._onDOMNodeInserted
-          );
-        },
-        this
-      );
+      this.addListenerOnce("appear", () => {
+        var element = this.getContentElement().getDomElement();
+        qx.bom.Event.addNativeListener(
+          element,
+          "DOMNodeInserted",
+          this._onDOMNodeInserted
+        );
+      });
 
       this._onDOMNodeInserted = qx.lang.Function.listener(
         this._syncSourceAfterDOMMove,

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

@@ -994,18 +994,14 @@ qx.Class.define("qx.ui.form.AbstractField", {
             /* qx Bug #8870: Firefox 35 will not display a text area's
                placeholder text if the attribute is set before the
                element is added to the DOM. This is fixed in FF 36. */
-            this.addListenerOnce(
-              "appear",
-              function () {
-                this.getContentElement()
-                  .getDomElement()
-                  .removeAttribute("placeholder");
-                this.getContentElement()
-                  .getDomElement()
-                  .setAttribute("placeholder", value);
-              },
-              this
-            );
+            this.addListenerOnce("appear", () => {
+              this.getContentElement()
+                .getDomElement()
+                .removeAttribute("placeholder");
+              this.getContentElement()
+                .getDomElement()
+                .setAttribute("placeholder", value);
+            });
           }
         }
       }

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

@@ -53,21 +53,13 @@ qx.Class.define("qx.ui.form.ComboBox", {
 
     // 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/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
+          }
         );
       }
     },

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: {