@qooxdoo/framework 7.0.0-beta → 7.0.0-beta.4

package/source/class/qx/event/handler/Video.js

@@ -0,0 +1,111 @@
+/* ************************************************************************
+
+   qooxdoo - the new era of web development
+
+   http://qooxdoo.org
+
+   Copyright:
+     2021 Zenesis Limited, https://www.zenesis.com
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+     * John Spackman (johnspackman, john.spackman@zenesis.com)
+
+************************************************************************ */
+
+/**
+ * Defines the event handlers for Video tags - also Audio because they are identical
+ */
+qx.Class.define("qx.event.handler.Video", {
+  extend : qx.core.Object,
+  implement : qx.event.IEventHandler,
+
+  construct() {
+    this.base(arguments);
+    this.__onNativeListener = qx.lang.Function.listener(this._onNative, this);
+  },
+
+  statics: {
+    /** @type {Integer} Priority of this handler */
+    PRIORITY : qx.event.Registration.PRIORITY_NORMAL,
+
+    /** @type {Map} Supported event types */
+    SUPPORTED_TYPES : {
+      abort: 1,
+      canplay: 1,
+      canplaythrough: 1,
+      durationchange: 1,
+      emptied: 1,
+      ended: 1,
+      error: 1,
+      loadeddata: 1,
+      loadedmetadata: 1,
+      loadstart: 1,
+      pause: 1,
+      play: 1,
+      playing: 1,
+      progress: 1,
+      ratechange: 1,
+      seeked: 1,
+      seeking: 1,
+      stalled: 1,
+      suspend: 1,
+      timeupdate: 1,
+      volumechange: 1,
+      waiting: 1
+    },
+
+    /** @type {Integer} Which target check to use */
+    TARGET_CHECK : qx.event.IEventHandler.TARGET_DOMNODE,
+
+    /** @type {Integer} Whether the method "canHandleEvent" must be called */
+    IGNORE_CAN_HANDLE : false
+  },
+
+  members : {
+    // interface implementation
+    canHandleEvent(target, type) {
+      var lower = target.tagName.toLowerCase();
+
+      if (lower === "video" || lower === "audio") {
+        return true;
+      }
+
+      return false;
+    },
+
+    // interface implementation
+    registerEvent(target, type, capture) {
+      qx.bom.Event.addNativeListener(target, type, this.__onNativeListener);
+    },
+
+    /**
+     * Default event handler for events that do not bubble
+     *
+     * @signature function(domEvent, eventId)
+     * @param domEvent {Event} Native event
+     */
+    _onNative: qx.event.GlobalError.observeMethod(function(domEvent) {
+      let target = qx.bom.Event.getTarget(domEvent);
+ 
+      qx.event.Registration.fireNonBubblingEvent(
+        target, 
+        domEvent.type,
+        qx.event.type.Dom, 
+        [domEvent, target, undefined, undefined, domEvent.cancelable]
+      );
+    }),
+
+    // interface implementation
+    unregisterEvent(target, type) {
+      qx.bom.Event.removeNativeListener(target, type, this.__onNativeListener);
+    }
+  },
+
+  defer(statics) {
+    qx.event.Registration.addHandler(statics);
+  }
+});

package/source/class/qx/html/Element.js

@@ -84,9 +84,9 @@ qx.Class.define("qx.html.Element",
             this._domNode.innerHTML = value;
           }
         },
-        function(writer, value) {
-          if (value) {
-            writer(value);
+        function(writer, property, name) {
+          if (property.value) {
+            writer(property.value);
           }
         });
   },
@@ -590,8 +590,14 @@ qx.Class.define("qx.html.Element",
       var data = this._properties;
       if (data) {
         for (var key in this._properties) {
-          if (this._properties.serialize) {
-            this._properties.serialize.call(this, data[key], key);
+          let property = this._properties[key];
+          if (property.serialize) {
+            writer(" ");
+            property.serialize.call(this, writer, key, property);
+          } else if (property.value !== undefined && property.value !== null) {
+            writer(" ");
+            let value = JSON.stringify(property.value);
+            writer(key, "=", value);
           }
         }
       }
@@ -679,19 +685,22 @@ qx.Class.define("qx.html.Element",
     importQxObjectIds() {
       let thisId = this.getQxObjectId();
       let thisAttributeId = this.getAttribute("data-qx-object-id");
-      if (thisId)
+      if (thisId) {
         this.setAttribute("data-qx-object-id", thisId, true);
-      else if (thisAttributeId)
+      } else if (thisAttributeId) {
         this.setQxObjectId(thisAttributeId);
+      }
 
       const resolveImpl = node => {
-        if (!(node instanceof qx.html.Element))
+        if (!(node instanceof qx.html.Element)) {
           return;
+        }
         let id = node.getQxObjectId();
         let attributeId = node.getAttribute("data-qx-object-id");
         if (id) {
-          if (attributeId && !attributeId.endsWith(id))
+          if (attributeId && !attributeId.endsWith(id)) {
             this.warn(`Attribute ID ${attributeId} is not compatible with the qxObjectId ${id}; the qxObjectId will take prescedence`);
+          }
           node.setAttribute("data-qx-object-id", id, true);
 
         } else if (attributeId) {
@@ -710,11 +719,11 @@ qx.Class.define("qx.html.Element",
             if (segs[0] == thisAttributeId || segs[0] == thisId) {
               // Only two segments, means that the parent is the outer and the last segment 
               //  is the ID of the node being examined
-              if (segs.length == 2)
+              if (segs.length == 2) {
                 parentNode = this;
 
               // Otherwise resolve it further
-              else {
+              } else {
                 // Extract the segments, exclude the first and last, and that leaves us with a relative ID path
                 let subId = qx.lang.Array.clone(segs);
                 subId.shift();
@@ -724,24 +733,28 @@ qx.Class.define("qx.html.Element",
               }
 
             // Not the outer node, then resolve as a global.
-            } else
+            } else {
               parentNode = qx.core.Id.getQxObject(attributeId);
+            }
               
-            if (!parentNode)
+            if (!parentNode) {
               throw new Error(`Cannot resolve object id ancestors, id=${attributeId}`);
+            }
 
             parentNode.addOwnedQxObject(node, segs[segs.length - 1]);
           }
         }
 
         let children = node.getChildren();
-        if (children)
+        if (children) {
           children.forEach(resolveImpl);
+        }
       };
 
       let children = this.getChildren();
-      if (children)
+      if (children) {
         children.forEach(resolveImpl);
+      }
     },
 
 
@@ -769,16 +782,28 @@ qx.Class.define("qx.html.Element",
       if (data) {
         var Attribute = qx.bom.element.Attribute;
         if (fromMarkup) {
-          var str = Attribute.get(elem, "class");
+          var str;
+          let classes = {};
+          str = this.getAttribute("class");
+          (str ? str.split(" ") : []).forEach(name => {
+            if (name.startsWith("qx-")) {
+              classes[name] = true
+            }
+          });
+
+          str = Attribute.get(elem, "class");
           if (!qx.core.Environment.get("qx.headless")) {
             if (str instanceof window.SVGAnimatedString) {
               str = str.baseVal;
             }
           }
-          var segs = str ? str.split(" ") : [];
+          (str ? str.split(" ") : []).forEach(name => classes[name] = true);
+          classes = Object.keys(classes);
+
+          var segs = classes;
           if (segs.length) {
             this.setCssClass(segs[0]);
-            this.setAttribute("class", str);
+            this.setAttribute("class", classes.join(" "));
           } else {
             this.setCssClass(null);
             this.setAttribute("class", null);
@@ -1843,10 +1868,9 @@ qx.Class.define("qx.html.Element",
     addClass : function(name) {
       var classes = this.__breakClasses();
       var primaryClass = (this.getCssClass()||"").toLowerCase();
-      name.split(" ").forEach(function(name) {
+      name.split(" ").forEach(name => {
         var nameLower = name.toLowerCase();
         if (nameLower == primaryClass) {
-          this.warn("Adding CSS Class " + name + " when it is the primary CSS class (consider using .setCssClass instead)");
           this.setCssClass(null);
         }
         
@@ -1866,10 +1890,9 @@ qx.Class.define("qx.html.Element",
     removeClass : function(name) {
       var classes = this.__breakClasses();
       var primaryClass = (this.getCssClass()||"").toLowerCase();
-      name.split(" ").forEach(function(name) {
+      name.split(" ").forEach(name => {
         var nameLower = name.toLowerCase();
         if (nameLower == primaryClass) {
-          this.warn("Removing CSS Class " + name + " when it is the primary CSS class (consider using .setCssClass instead)");
           this.setCssClass(null);
         }
         
@@ -1885,10 +1908,6 @@ qx.Class.define("qx.html.Element",
      * Removes all CSS classed from the current element.
      */
     removeAllClasses : function() {
-      if (this.getCssClass()) {
-        this.warn("Removing all CSS Classes including the primary CSS class \"" + this.getCssClass() + "\" (consider using .setCssClass instead)");
-      }
-      
       this.setCssClass(null);
       this.setAttribute("class", "");
     },
@@ -1900,14 +1919,10 @@ qx.Class.define("qx.html.Element",
     _applyCssClass: function(value, oldValue) {
       var classes = this.__breakClasses();
       if (oldValue) {
-        value.split(" ").forEach(function(name) {
-          delete classes[name.toLowerCase()];
-        });
+        oldValue.split(" ").forEach(name => delete classes[name.toLowerCase()]);
       }
       if (value) {
-        value.split(" ").forEach(function(name) {
-          classes[name.toLowerCase()] = name;
-        });
+        value.split(" ").forEach(name => classes[name.toLowerCase()] = name);
       }
       this.setAttribute("class", this.__combineClasses(classes));
     },

package/source/class/qx/html/Image.js

@@ -31,7 +31,7 @@ qx.Class.define("qx.html.Image",
    */
   construct: function(tagName, styles, attributes) {
     this.base(arguments, tagName, styles, attributes);
-    this.registerProperty("source", null, this._setSourceProperty);
+    this.registerProperty("source", null, this._setSourceProperty, (writer, key, property) => property.value && writer("src=" + JSON.stringify(property.value)));
     this.registerProperty("scale", null, this._setScaleProperty);
   },
 
@@ -93,7 +93,7 @@ qx.Class.define("qx.html.Image",
       // to reset those styles whenever a background-image is updated.
       // This is only necessary if any backgroundImage was set already.
       // See bug #3376 for details
-      var styles = this.getAllStyles();
+      var styles = this.getAllStyles()||{};
 
       if (this.getNodeName() == "div" && this.getStyle("backgroundImage")) {
         styles.backgroundRepeat = null;

package/source/class/qx/html/Node.js

@@ -76,6 +76,23 @@ qx.Class.define("qx.html.Node",
             domNode.$$element === domNode.$$elementObject.toHashCode());
       }
       return domNode.$$elementObject;
+    },
+
+    /**
+     * Converts a DOM node into a qx.html.Node, providing the existing instance if
+     * there is one
+     * 
+     * @param {Node} domNode 
+     * @returns {qx.html.Node}
+     */
+    toVirtualNode(domNode) {
+      if (domNode.$$elementObject) {
+        return domNode.$$elementObject;
+      }
+
+      let html = qx.html.Factory.getInstance().createElement(domNode.nodeName, domNode.attributes);
+      html.useNode(domNode);
+      return html;
     }
 
   },
@@ -105,7 +122,8 @@ qx.Class.define("qx.html.Node",
       init: true,
       nullable: true,
       check: "Boolean",
-      apply: "_applyVisible"
+      apply: "_applyVisible",
+      event: "changeVisible"
     }
   },
 
@@ -276,8 +294,9 @@ qx.Class.define("qx.html.Node",
      */
     useNode: function(domNode) {
       var id = domNode.getAttribute("data-qx-object-id");
-      if (id)
+      if (id) {
         this.setQxObjectId(id);
+      }
       var temporaryQxObjectId = !this.getQxObjectId();
       if (temporaryQxObjectId) {
         this.setQxObjectId(this.classname);
@@ -478,8 +497,9 @@ qx.Class.define("qx.html.Node",
       // Copy Object Id
       if (qx.core.Environment.get("module.objectid")) {
         var id = this.getQxObjectId();
-        if (!id && this._qxObject)
+        if (!id && this._qxObject) {
           id = this._qxObject.getQxObjectId();
+        }
 
         this.setAttribute("data-qx-object-id", id, true);
       }
@@ -793,7 +813,14 @@ qx.Class.define("qx.html.Node",
       if (data)
       {
         // Import listeners
-        qx.event.Registration.getManager(elem).importListeners(elem, data);
+        let domEvents = {};
+        let manager = qx.event.Registration.getManager(elem);
+        for (let id in data) {
+          if (manager.findHandler(elem, data[id].type)) {
+            domEvents[id] = data[id];
+          }
+        }
+        qx.event.Registration.getManager(elem).importListeners(elem, domEvents);
 
         // Cleanup event map
         // Events are directly attached through event manager
@@ -1331,6 +1358,9 @@ qx.Class.define("qx.html.Node",
      * @param name {String} The node name
      */
     setNodeName : function(name) {
+      if (this._domNode && name.toLowerCase() !== this._nodeName.toLowerCase()) {
+        throw new Error("Cannot change the name of the node after the DOM node has been created");
+      }
       this._nodeName = name;
     },
 

package/source/class/qx/lang/Json.js

@@ -209,6 +209,7 @@ qx.Bootstrap.define("qx.lang.Json",
   }
 });
 
+/*eslint curly: "off"*/
 /**
  * @ignore(define.*, exports)
  * @lint ignoreUnused(JSON3)

package/source/class/qx/lang/String.js

@@ -82,6 +82,9 @@ qx.Bootstrap.define("qx.lang.String",
      */
     __hyphenationMap : {},
 
+    /** @type{Map<char, String} character types, key is the character and the vaklue is `upper`, `lower`, or `digit` */
+    __characterTypes: null,
+
     /**
      * Converts a hyphenated string (separated by '-') to camel case.
      *
@@ -146,6 +149,46 @@ qx.Bootstrap.define("qx.lang.String",
     },
 
 
+    /**
+     * Detects whether the string is all upper case
+     * @param {String} str 
+     * @returns {Boolean}
+     */
+    isUpperCase(str) {
+      return qx.lang.String.__characterRx.upper.test(str);
+    },
+
+
+    /**
+     * Detects whether the string is all lower case
+     * @param {String} str 
+     * @returns {Boolean}
+     */
+    isLowerCase(str) {
+      return qx.lang.String.__characterRx.lower.test(str);
+    },
+
+
+    /**
+     * Detects whether the string is all letters
+     * @param {String} str 
+     * @returns {Boolean}
+     */
+    isLetters(str) {
+      return qx.lang.String.__characterRx.letter.test(str);
+    },
+
+
+    /**
+     * Detects whether the string is all digits
+     * @param {String} str 
+     * @returns {Boolean}
+     */
+    isDigits(str) {
+      return qx.lang.String.__characterRx.digit.test(str);
+    },
+
+
     /**
      * Removes all extraneous whitespace from a string and trims it
      *
@@ -396,5 +439,14 @@ qx.Bootstrap.define("qx.lang.String",
     quote : function(str) {
       return '"' + str.replace(/\\/g, "\\\\").replace(/\"/g, "\\\"") + '"';
     }
-  }
+  },
+
+  defer(statics) {
+    statics.__characterRx = {
+      letter: RegExp(/^\p{General_Category=Letter}+$/u),
+      upper: RegExp(/^\p{General_Category=Uppercase_Letter}+$/u),
+      lower: RegExp(/^\p{General_Category=Lowercase_Letter}+$/u),
+      digit: RegExp(/^\p{General_Category=Decimal_Number}+$/u)
+    };
+  },
 });

package/source/class/qx/test/Annotation.js

@@ -135,8 +135,9 @@ qx.Class.define("qx.test.Annotation", {
 
         construct: function(value) {
           this.base(arguments);
-          if (value)
+          if (value) {
             this.setValue(value);
+          }
         },
 
         properties: {

package/source/class/qx/test/Promise.js

@@ -456,8 +456,9 @@ qx.Class.define("qx.test.Promise", {
 	      	var p = new qx.Promise(function(resolve) {
             console.log(name + ": changeAlphaAsync 1 in qx.Promise, value=" + value);
 	      		setTimeout(function() {
-	      			if (str.length)
+	      			if (str.length) {
 	      				str += ",";
+              }
 	      			str += name;
               console.log(name + ": changeAlphaAsync 1 resolving qx.Promise, value=" + value);
 	      			resolve();
@@ -550,9 +551,10 @@ qx.Class.define("qx.test.Promise", {
 
         		return new qx.Promise(function(resolve) {
         			setTimeout(function() {
-        				if (str.length)
+        				if (str.length) {
         					str += ",";
-            		str += obj.getValue() + ":" + data;
+                }
+                str += obj.getValue() + ":" + data;
             		console.log("changeAlpha " + obj.getValue() + " = " + data + " after " + delay);
             		resolve();
         			}, delay);

package/source/class/qx/test/bom/Font.js

@@ -149,6 +149,14 @@ qx.Class.define("qx.test.bom.Font",
       this.assertEquals("red 1px 1px 3px, green -1px -1px 3px, white -1px 1px 3px, white 1px -1px 3px", styles.textShadow, "Wrong style value for 'textShadow' property!");
     },
 
+    testLetterSpacing : function()
+    {
+      this.__font.setLetterSpacing(1);
+
+      var styles = this.__font.getStyles();
+      this.assertEquals("1px", styles.letterSpacing, "Wrong style value for 'letterSpacing' property!");
+    },
+
 
     testColorAtWidget : function()
     {
@@ -181,7 +189,7 @@ qx.Class.define("qx.test.bom.Font",
       var keys = Object.keys(styles);
 
       this.assertMap(styles, "Method 'getStyles' should return a map!");
-      this.assertEquals(8, qx.lang.Object.getLength(styles), "Map should contain 8 key!");
+      this.assertEquals(9, qx.lang.Object.getLength(styles), "Map should contain 9 keys!");
       this.assertNotUndefined(styles.fontFamily, "Key 'fontFamily' has to be present!");
       this.assertNotUndefined(styles.fontStyle, "Key 'fontStyle' has to be present!");
       this.assertNotUndefined(styles.fontWeight, "Key 'fontWeight' has to be present!");
@@ -190,6 +198,7 @@ qx.Class.define("qx.test.bom.Font",
       this.assertNotUndefined(styles.textDecoration, "Key 'textDecoration' has to be present!");
       this.assertNotUndefined(styles.color, "Key 'color' has to be present!");
       this.assertNotUndefined(styles.textShadow, "Key 'textShadow' has to be present!");
+      this.assertNotUndefined(styles.letterSpacing, "Key 'letterSpacing' has to be present!");
     },
 
 

package/source/class/qx/test/core/Property.js

@@ -930,12 +930,14 @@ qx.Class.define("qx.test.core.Property",
         },
         members : {
           __transform : function (value, oldValue) {
-            if (oldValue === undefined)
+            if (oldValue === undefined) {
               return value;
-            if (!value)
+            }
+            if (!value) {
               oldValue.removeAll();
-            else
+            } else {
               oldValue.replace(value)
+            }
             return oldValue;
           }
         }

package/source/class/qx/test/html/Element.js

@@ -195,20 +195,20 @@ qx.Class.define("qx.test.html.Element",
         buffer += args.join("");
       }
       el1.serialize(writer);
-      this.assertEquals("<div id=\"el1\" data-qx-object-id=\"qx.html.Element\">Hello Again World</div>", buffer);
+      this.assertEquals("<div id=\"el1\" data-qx-object-id=\"qx.html.Element\" >Hello Again World</div>", buffer);
       el1.setAttribute("abc", 123);
       el1.setAttribute("def", true);
       el1.setAttribute("checked", true);
       buffer = "";
       el1.serialize(writer);
-      this.assertEquals("<div id=\"el1\" abc=\"123\" def=\"true\" checked=checked data-qx-object-id=\"qx.html.Element\">Hello Again World</div>", buffer);
+      this.assertEquals("<div id=\"el1\" abc=\"123\" def=\"true\" checked=checked data-qx-object-id=\"qx.html.Element\" >Hello Again World</div>", buffer);
       
       var el2 = new qx.html.Element();
       el2.setAttribute("id", "el2");
       el1.addAt(el2, 1);
       buffer = "";
       el1.serialize(writer);
-      this.assertEquals("<div id=\"el1\" abc=\"123\" def=\"true\" checked=checked data-qx-object-id=\"qx.html.Element\">Hello Again<div id=\"el2\"></div> World</div>", buffer);
+      this.assertEquals("<div id=\"el1\" abc=\"123\" def=\"true\" checked=checked data-qx-object-id=\"qx.html.Element\" >Hello Again<div id=\"el2\" ></div> World</div>", buffer);
       
       /*
       el2._setProperty("innerHtml", "<b>Test</b>");

package/source/class/qx/test/lang/String.js

@@ -28,6 +28,34 @@ qx.Class.define("qx.test.lang.String",
     },
 
 
+    testCharacterTypes() {
+      this.assertTrue(qx.lang.String.isUpperCase("A"));
+      this.assertTrue(qx.lang.String.isUpperCase("S"));
+      this.assertTrue(qx.lang.String.isUpperCase("X"));
+      this.assertTrue(qx.lang.String.isLowerCase("b"));
+      this.assertTrue(qx.lang.String.isLowerCase("t"));
+      this.assertTrue(qx.lang.String.isLowerCase("z"));
+      this.assertTrue(qx.lang.String.isDigits("1"));
+      this.assertTrue(qx.lang.String.isDigits("4"));
+      this.assertTrue(qx.lang.String.isDigits("9"));
+      
+      this.assertTrue(!qx.lang.String.isLowerCase("A"));
+      this.assertTrue(!qx.lang.String.isLowerCase("S"));
+      this.assertTrue(!qx.lang.String.isLowerCase("X"));
+      this.assertTrue(!qx.lang.String.isLowerCase("4"));
+      this.assertTrue(!qx.lang.String.isUpperCase("b"));
+      this.assertTrue(!qx.lang.String.isUpperCase("t"));
+      this.assertTrue(!qx.lang.String.isUpperCase("z"));
+      this.assertTrue(!qx.lang.String.isUpperCase("3"));
+      this.assertTrue(!qx.lang.String.isLowerCase("2"));
+      this.assertTrue(!qx.lang.String.isUpperCase("5"));
+      
+      this.assertTrue(qx.lang.String.isLetters("A"));
+      this.assertTrue(qx.lang.String.isLetters("s"));
+      this.assertTrue(!qx.lang.String.isLetters("9"));
+    },
+
+
     testFormat : function()
     {
       this.assertNotUndefined(qx.lang.String.format);

package/source/class/qx/test/type/BaseString.js

@@ -157,6 +157,13 @@ qx.Class.define("qx.test.type.BaseString",
 
       var s = new qx.String("Juhu");
       this.assertEquals("<b>Juhu</b>", s.bold());
+    },
+    
+    testCodePointAt : function()
+    {
+      var s = new qx.type.BaseString("*");
+      this.assertEquals(42, s.codePointAt(0));
     }
+    
   }
 });

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

@@ -99,6 +99,7 @@ qx.Class.define("qx.test.ui.embed.Iframe",
 
       //  This also breaks on MacOS runners on GitHub with webkit
       try {
+        /** @ignore(require) */
         let CI = require("process").env.CI;
         if (CI && qx.core.Environment.get("browser.name") === "webkit") {
           this.skip("Skipping for Webkit for MacOS");