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

package/source/class/qx/ui/toolbar/Button.js

@@ -19,32 +19,12 @@
 
 /**
  * The normal toolbar button. Like a normal {@link qx.ui.form.Button}
- * but with a style matching the toolbar and without keyboard support.
+ * but with a style matching the toolbar.
  */
 qx.Class.define("qx.ui.toolbar.Button",
 {
   extend : qx.ui.form.Button,
 
-
-
-  /*
-  *****************************************************************************
-     CONSTRUCTOR
-  *****************************************************************************
-  */
-
-  construct : function(label, icon, command)
-  {
-    this.base(arguments, label, icon, command);
-
-    // Toolbar buttons should not support the keyboard events
-    this.removeListener("keydown", this._onKeyDown);
-    this.removeListener("keyup", this._onKeyUp);
-  },
-
-
-
-
   /*
   *****************************************************************************
      PROPERTIES
@@ -64,12 +44,6 @@ qx.Class.define("qx.ui.toolbar.Button",
       refine : true,
       init : "inherit"
     },
-
-    focusable :
-    {
-      refine : true,
-      init : false
-    }
   },
 
   members : {
@@ -84,3 +58,4 @@ qx.Class.define("qx.ui.toolbar.Button",
     }
   }
 });
+

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

@@ -24,27 +24,6 @@ qx.Class.define("qx.ui.toolbar.CheckBox",
 {
   extend : qx.ui.form.ToggleButton,
 
-
-
-
-  /*
-  *****************************************************************************
-     CONSTRUCTOR
-  *****************************************************************************
-  */
-
-  construct : function(label, icon)
-  {
-    this.base(arguments, label, icon);
-
-    // Toolbar buttons should not support the keyboard events
-    this.removeListener("keydown", this._onKeyDown);
-    this.removeListener("keyup", this._onKeyUp);
-  },
-
-
-
-
   /*
   *****************************************************************************
      PROPERTIES
@@ -64,12 +43,6 @@ qx.Class.define("qx.ui.toolbar.CheckBox",
       refine : true,
       init : "inherit"
     },
-
-    focusable :
-    {
-      refine : true,
-      init : false
-    }
   },
 
   members : {

package/source/class/qx/ui/toolbar/RadioButton.js

@@ -29,7 +29,23 @@ qx.Class.define("qx.ui.toolbar.RadioButton",
   include : [qx.ui.form.MModelProperty],
   implement : [qx.ui.form.IModel, qx.ui.form.IRadioItem],
 
+  /*
+  *****************************************************************************
+     CONSTRUCTOR
+  *****************************************************************************
+  */
 
+  construct : function(label, icon)
+  {
+    this.base(arguments, label, icon);
+
+    // ARIA attrs
+    // Important: (Grouped) radio btns should be children of a div with role 'radiogroup'
+    const contentEl = this.getContentElement();
+    contentEl.setAttribute("role", "radio");
+    contentEl.setAttribute("aria-checked", false);
+    contentEl.removeAttribute("aria-pressed");
+  },
 
 
   /*
@@ -51,6 +67,11 @@ qx.Class.define("qx.ui.toolbar.RadioButton",
     {
       this.base(arguments, value, old);
 
+      // ARIA attrs
+      const contentEl = this.getContentElement();
+      contentEl.removeAttribute("aria-pressed");
+      contentEl.setAttribute("aria-checked", Boolean(value));
+
       if (value)
       {
         var grp = this.getGroup();

package/source/class/qx/ui/toolbar/SplitButton.js

@@ -28,26 +28,6 @@ qx.Class.define("qx.ui.toolbar.SplitButton",
 {
   extend : qx.ui.form.SplitButton,
 
-
-
-  /*
-  *****************************************************************************
-     CONSTRUCTOR
-  *****************************************************************************
-  */
-
-  construct : function(label, icon, menu, command)
-  {
-    this.base(arguments, label, icon, menu, command);
-
-    // Toolbar buttons should not support the keyboard events
-    this.removeListener("keydown", this._onKeyDown);
-    this.removeListener("keyup", this._onKeyUp);
-  },
-
-
-
-
   /*
   *****************************************************************************
      PROPERTIES
@@ -62,14 +42,6 @@ qx.Class.define("qx.ui.toolbar.SplitButton",
       refine : true,
       init : "toolbar-splitbutton"
     },
-
-
-    // overridden
-    focusable :
-    {
-      refine : true,
-      init : false
-    }
   },
 
 

package/source/class/qx/ui/toolbar/ToolBar.js

@@ -48,6 +48,9 @@ qx.Class.define("qx.ui.toolbar.ToolBar",
   {
     this.base(arguments);
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "toolbar");
+
     // add needed layout
     this._setLayout(new qx.ui.layout.HBox());
 

package/source/class/qx/util/ColorUtil.js

@@ -943,8 +943,9 @@ qx.Bootstrap.define("qx.util.ColorUtil",
      * @return {String} colour string
      */
     chooseContrastingColor : function(rgb, threshold, dark, light) {
-      if (typeof rgb == "string")
+      if (typeof rgb == "string") {
         rgb = qx.util.ColorUtil.stringToRgb(rgb);
+      }
       var r = rgb[0];
       var g = rgb[1];
       var b = rgb[2];

package/source/class/qx/util/ResourceManager.js

@@ -336,7 +336,10 @@ qx.Class.define("qx.util.ResourceManager",
     /**
      * Returns the correct char code, ignoring scale postfix.
      * 
-     * @param source {String} resource id of the image, e.g. @FontAwesome/heart or @MaterialIcons/home/16
+     * The resource ID can be a ligature name (eg `@FontAwesome/heart` or `@MaterialIcons/home/16`), 
+     * or a hex character code (eg `@FontAwesome/f004` or `@FontAwesome/f004/16`)
+     * 
+     * @param source {String} resource id of the image
      * @returns charCode of the glyph
      */
     fromFontUriToCharCode : function (source)
@@ -347,16 +350,22 @@ qx.Class.define("qx.util.ResourceManager",
         fontSource = sparts[0] + "/" + sparts[1];
       }
       var resource = this.getData(fontSource);
-      var charCode;
+      var charCode = null;
       if (resource) {
         charCode = resource[2];
-      }
-      else {
-        charCode = parseInt(qx.theme.manager.Font.getInstance().resolve(source.match(/@([^/]+)\/(.*)$/)[2]), 16);
-        if (qx.core.Environment.get("qx.debug")) {
-          qx.core.Assert.assertNumber(charCode, "Font source: " + source +" needs either a glyph name or the unicode number in hex");
+
+      } else {
+        let hexString = source.match(/@([^/]+)\/(.*)$/)[2];
+        if (hexString) {
+          charCode = parseInt(hexString, 16);
+          if (isNaN(charCode)) {
+            charCode = null;
+          }
         }
       }
+      if (!charCode) {
+        throw new Error(`Cannot determine charCode from source: ${source}`);
+      }
       return charCode;
     }
   },

package/source/class/qx/util/format/DateFormat.js

@@ -425,6 +425,15 @@ qx.Class.define("qx.util.format.DateFormat",
       return locale;
     },
 
+    /**
+     * Returns the original format string
+     * 
+     * @return {String}
+     */
+    getFormatString() {
+      return this.__format;
+    },
+
     /**
      * Formats a date.
      *

package/source/class/qxWeb.js

@@ -36,6 +36,8 @@
  * @ignore(q)
  *
  * @group (Core)
+ *
+ * @asset(qx/iconfont/MaterialIcons/*)
  */
 qx.Bootstrap.define("qxWeb", {
   extend : qx.type.BaseArray,
@@ -149,8 +151,9 @@ qx.Bootstrap.define("qxWeb", {
     $attachAll : function(clazz, staticsNamespace) {
       // members
       for (var name in clazz.members) {
-        if (name.indexOf("$") !== 0 && name.indexOf("_") !== 0)
-        qxWeb.prototype[name] = clazz.members[name];
+        if (name.indexOf("$") !== 0 && name.indexOf("_") !== 0) {
+          qxWeb.prototype[name] = clazz.members[name];
+        }
       }
 
       // statics
@@ -164,8 +167,9 @@ qx.Bootstrap.define("qxWeb", {
 
       for (var name in clazz.statics) {
         if (name.indexOf("$") !== 0 && name.indexOf("_") !== 0 && name !== "name" && name !== "basename" &&
-            name !== "classname" && name !== "toString" && name !== name.toUpperCase())
-        destination[name] = clazz.statics[name];
+            name !== "classname" && name !== "toString" && name !== name.toUpperCase()) {
+          destination[name] = clazz.statics[name];
+        }
       }
     },
 

package/source/resource/qx/mobile/scss/common/_gradients.scss

@@ -6,6 +6,8 @@
 * If the first value is a color (or "transparent"), the mixin creates a plain colored background with it.
 * If multiple values are passed, the background mixins attempts to create a linear gradient through "linear-gradient" mixin.
 */
+@use "sass:math";
+
 @mixin background($values) {
   @if (length($values) == 1)  {
     background-color: $values;
@@ -97,7 +99,7 @@
       $next: nth($values, $i + 1);
 
       // If no position is passed inside color-stop, it calculates the position in percent.
-      $pos: ($i - 1)*(1/($last - 1));
+      $pos: ($i - 1)*math.div(1, $last - 1);
 
       // Separator between color-stops.
       $separator: "";

package/source/resource/qx/mobile/scss/theme/indigo/_styles.scss

@@ -145,7 +145,7 @@ $menu-item-selected-background:  lighten($highlight-color, 20%), $highlight-colo
 
 $navigationbar-height:  rem(40);
 $navigationbar-background:  $color-2,$color-1;
-$navigationbar-text-size:  $navigationbar-height/2;
+$navigationbar-text-size:  $navigationbar-height*0.5;
 $navigationbar-text-color:  $background-color;
 $navigationbar-padding:  rem(4);
 $navigationbar-font-weight: bold;

package/source/resource/qx/mobile/scss/ui/_carousel.scss

@@ -30,7 +30,7 @@
   transition: transform 2s;
 
   position:absolute;
-  bottom: $carousel-pagination-size/2;
+  bottom: $carousel-pagination-size*0.5;
   height: $carousel-pagination-size;
   line-height: 0;
   width: auto;
@@ -38,7 +38,7 @@
 }
 
 .carousel-pagination-label + .carousel-pagination-label {
-  margin-left: $carousel-pagination-size/2;
+  margin-left: $carousel-pagination-size*0.5;
 }
 
 .carousel-pagination-label {

package/source/resource/qx/mobile/scss/ui/_checkbox.scss

@@ -33,14 +33,14 @@
   position: absolute;
   left:50%;
   top:50%;
-  margin-left: -1*($checkbox-tick-size/2) - ($checkbox-tick-width/2);
-  margin-top: -1*($checkbox-tick-size/2) - ($checkbox-tick-width/2);
+  margin-left: -1*($checkbox-tick-size*0.5) - ($checkbox-tick-width*0.5);
+  margin-top: -1*($checkbox-tick-size*0.5) - ($checkbox-tick-width*0.5);
 
   display:block;
   opacity: 0;
   content:"";
   width: $checkbox-tick-size;
-  height: $checkbox-tick-size/2;
+  height: $checkbox-tick-size*0.5;
   background: transparent;
 
   border: $checkbox-tick-width solid $checkbox-tick-color;

package/source/resource/qx/mobile/scss/ui/_collapsible.scss

@@ -53,7 +53,7 @@
   position: absolute;
   top: 50%;
   right: $collapsible-header-padding;
-  margin-top:-1*($collapsible-arrow-size)/2;
+  margin-top:-1*($collapsible-arrow-size)*0.5;
   display:block;
   content: ""; 
 }
@@ -68,7 +68,7 @@
   position: absolute;
   top: 50%;
   right: $collapsible-header-padding;
-  margin-top:-1*($collapsible-arrow-size)/2;
+  margin-top:-1*($collapsible-arrow-size)*0.5;
   display:block;
   content: ""; 
 }

package/source/resource/qx/mobile/scss/ui/_picker.scss

@@ -109,7 +109,7 @@
     @include transition(all no-ease);
 
     position:relative;
-    top: -($picker-height/2);
+    top: -($picker-height*0.5);
 
     padding-top: $picker-height;
     padding-bottom:  $picker-height;
@@ -131,7 +131,7 @@
     padding-left: rem(5);
     padding-right: rem(5);
     
-    top: -$picker-label-height / 2;
+    top: -$picker-label-height * 0.5;
   }
 
   .picker-container {
@@ -178,11 +178,11 @@
     width:100%;
     z-index:1001;
 
-    top: $picker-height/2;
+    top: $picker-height*0.5;
     left: 0px;
 
     height: $picker-label-height; 
-    margin-top: -($picker-label-height/2) - ($picker-highlight-border-width);
+    margin-top: -($picker-label-height*0.5) - ($picker-highlight-border-width);
 
     border-top:  $picker-highlight-border-width solid $picker-highlight-color;
     border-bottom:  $picker-highlight-border-width solid $picker-highlight-color;

package/source/resource/qx/mobile/scss/ui/_radiobutton.scss

@@ -34,13 +34,13 @@
 
   z-index: 1;
 
-  width: $radiobutton-size/2;
-  height: $radiobutton-size/2;
+  width: $radiobutton-size*0.5;
+  height: $radiobutton-size*0.5;
 
   top: 50%;
   left: 50%;
-  margin-top: -1*$radiobutton-size/4;
-  margin-left: -1*$radiobutton-size/4;
+  margin-top: -1*$radiobutton-size*0.25;
+  margin-left: -1*$radiobutton-size*0.25;
 
   background: $radiobutton-dot-color;
 }

package/source/resource/qx/mobile/scss/ui/_slider.scss

@@ -5,14 +5,14 @@
 .slider {
   @include border-radius($slider-border-radius);
   @include background($slider-background);
-  @include transform(translate3d(0,($slider-knob-height/2),0));
+  @include transform(translate3d(0,($slider-knob-height*0.5),0));
   @include touch-action(none);
 
   overflow: visible;
 
   margin-bottom: $slider-knob-height;
-  margin-left: ($slider-knob-width/2); 
-  margin-right: ($slider-knob-width/2);
+  margin-left: ($slider-knob-width*0.5); 
+  margin-right: ($slider-knob-width*0.5);
 
   border: rem(1) solid $slider-border-color;
 }
@@ -22,8 +22,8 @@
   content: "";
   height: $slider-knob-height;
   position: absolute;
-  top: -($slider-knob-height/2) + ($slider-height/2);
-  left:  -($slider-knob-width/2);
+  top: -($slider-knob-height*0.5) + ($slider-height*0.5);
+  left:  -($slider-knob-width*0.5);
   padding-right:  ($slider-knob-width);
   display: block;
   width: 100%;
@@ -62,8 +62,8 @@
   text-overflow: ellipsis;
   font-weight:normal;
 
-  top: -($slider-knob-height/2) + ($slider-height/2) - rem(1);
-  right: -1*$slider-knob-width/2;
+  top: -($slider-knob-height*0.5) + ($slider-height*0.5) - rem(1);
+  right: -1*$slider-knob-width*0.5;
 }
 
 .slider.percent > div:after {

package/source/resource/qx/scss/_gradients.scss

@@ -6,6 +6,8 @@
 * If the first value is a color (or "transparent"), the mixin creates a plain colored background with it.
 * If multiple values are passed, the background mixins attempts to create a linear gradient through "linear-gradient" mixin.
 */
+@use "sass:math";
+
 @mixin background($values) {
   @if (length($values) == 1)  {
     background-color: $values;
@@ -97,7 +99,7 @@
       $next: nth($values, $i + 1);
 
       // If no position is passed inside color-stop, it calculates the position in percent.
-      $pos: ($i - 1)*(1/($last - 1));
+      $pos: ($i - 1)*math.div(1, $last - 1);
 
       // Separator between color-stops.
       $separator: "";

package/source/resource/qx/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @function rem($value, $factor: 1.0) {
   @if ($value != 0 and $value != auto) {
     @if (unitless($value)) {
@@ -5,10 +7,10 @@
     }
 
     @if (unit($factor) == "%") {
-      $factor: $factor / ($factor * 0 + 1) / 100;
+      $factor: math.div($factor, $factor * 0 + 1) * 0.01;
     }
 
-    $value: $factor*($value/16px) * 1rem;
+    $value: $factor*math.div($value, 16px) * 1rem;
   }
 
   @return $value;

package/source/resource/qx/tool/cli/templates/TypeScriptWriter-base_declaration.txt

@@ -0,0 +1,13 @@
+
+interface IMap { 
+    [key:string] : any; 
+} 
+
+declare class ErrorImpl implements Error {
+    name: string; 
+    message:string 
+}
+
+declare module qx.registry { 
+    function registerMainMethod(fn:(app: qx.application.Standalone)=>void):void;
+}

package/source/resource/qx/tool/cli/templates/loader/loader-browser.tmpl.js

@@ -194,10 +194,16 @@ qx.$$loader = {
         qx.$$loader.applicationHandlerReady = true;
       }
     }
-    if (qx.$$loader.splashscreen)
+    if (qx.Class.$$brokenClassDefinitions) {
+      console.error("**************\n" + 
+        "One or more class definitions did not load properly - please see error messages above for details.\n" + 
+        "It is probable that your application will have unexpected errors.  Please fix the class problems above before continuing.\n" + 
+        "**************");
+    } else if (qx.$$loader.splashscreen) {
       qx.$$loader.splashscreen.loadComplete(done);
-    else
+    } else {
       done();
+    }
   },
 
   /*

package/source/resource/qx/tool/cli/templates/loader/loader-node.tmpl.js

@@ -1,9 +1,11 @@
-(function(){ 
+(function(){
 
   var path = require("path");
-  
-  if (typeof window === "undefined") 
+
+  if (typeof window === "undefined")
     window = this;
+  window.addEventListener = function() {};
+  window.removeEventListener = function() {};
   window.dispatchEvent = function() {};
 
   if (!window.navigator) window.navigator = {};
@@ -14,12 +16,12 @@
   if (!window.navigator.cpuClass) window.navigator.cpuClass = "";
 
   // Node suppresses output to the "real" console when calling console.debug, it's only shown
-  //  in the debugger 
+  //  in the debugger
   console.debug = function() {
     var args = [].slice.apply(arguments);
     console.log.apply(this, args);
   };
-  
+
   var JSDOM = null;
   try {
     JSDOM = require("jsdom").JSDOM;
@@ -36,6 +38,9 @@
   } else {
     window.document = document = {
         readyState: "ready",
+        currentScript: {
+          src: new (require('url').URL)('file:' + __filename).href
+        },
         createEvent: function() {
           return {
             initCustomEvent: function() {}
@@ -55,14 +60,14 @@
   if (!this.qxloadPrefixUrl)
     qxloadPrefixUrl = "";
 
-  if (!window.qx) 
+  if (!window.qx)
     window.qx = {};
-  
+
   if (!qx.$$appRoot) {
     qx.$$appRoot = __dirname + path.sep;
   }
 
-  if (!window.qxvariants) 
+  if (!window.qxvariants)
     qxvariants = {};
 
   qx.$$start = new Date();
@@ -146,7 +151,7 @@
 
         var allScripts = l.decodeUris(l.urisBefore, "resourceUri");
         t.loadScriptList(allScripts);
-    
+
         l.parts[l.boot].forEach(function(pkg) {
           t.loadScriptList(l.decodeUris(l.packages[pkg].uris));
         });
@@ -160,6 +165,7 @@
 
       loadScriptList: function(list) {
         list.forEach(function(uri) {
+          uri = uri.replace(/\?.*$/, '');
           var f = loaderMethod(uri);
           if (typeof f === "function") {
             var s = f.name === ""?path.basename(uri, ".js"):f.name;
@@ -172,8 +178,15 @@
         qx.Bootstrap.executePendingDefers();
         qx.$$loader.delayDefer = false;
         qx.$$loader.scriptLoaded = true;
-        qx.core.BaseInit.ready();
-        qx.$$loader.applicationHandlerReady = true;
+        if (qx.Class.$$brokenClassDefinitions) {
+          console.error("**************");
+          console.error("One or more class definitions did not load properly - please see error messages above for details.");
+          console.error("It is probable that your application will have unexpected errors.  Please fix the class problems above before continuing.");
+          console.error("**************");
+        } else {
+          qx.core.BaseInit.ready();
+          qx.$$loader.applicationHandlerReady = true;
+        }
       },
 
       importPackageData : function(dataMap, callback) {

package/source/resource/qx/tool/cli/templates/loader/loader-rhino.tmpl.js

@@ -156,8 +156,15 @@
         qx.Bootstrap.executePendingDefers();
         qx.$$loader.delayDefer = false;
         qx.$$loader.scriptLoaded = true;
-        qx.core.BaseInit.ready();
-        qx.$$loader.applicationHandlerReady = true;
+        if (qx.Class.$$brokenClassDefinitions) {
+          console.error("**************");
+          console.error("One or more class definitions did not load properly - please see error messages above for details.");
+          console.error("It is probable that your application will have unexpected errors.  Please fix the class problems above before continuing.");
+          console.error("**************");
+        } else {
+          qx.core.BaseInit.ready();
+          qx.$$loader.applicationHandlerReady = true;
+        }
       },
 
       importPackageData : function(dataMap, callback) {

package/source/resource/qx/tool/cli/templates/skeleton/mobile/source/theme/custom/scss/_styles.scss

@@ -145,7 +145,7 @@ $menu-item-selected-background:  lighten($highlight-color, 20%), $highlight-colo
 
 $navigationbar-height:  rem(40);
 $navigationbar-background:  $color-2,$color-1;
-$navigationbar-text-size:  $navigationbar-height/2;
+$navigationbar-text-size:  $navigationbar-height*0.5;
 $navigationbar-text-color:  $background-color;
 $navigationbar-padding:  rem(4);
 $navigationbar-font-weight: bold;