@qooxdoo/framework 7.0.0-beta.6 → 7.0.0

package/source/class/qx/ui/mobile/form/Input.js

@@ -20,81 +20,76 @@
 /**
  * Abstract class for all input fields.
  */
-qx.Class.define("qx.ui.mobile.form.Input",
-{
-  extend : qx.ui.mobile.core.Widget,
-  include : [
+qx.Class.define("qx.ui.mobile.form.Input", {
+  extend: qx.ui.mobile.core.Widget,
+  include: [
     qx.ui.form.MForm,
     qx.ui.form.MModelProperty,
     qx.ui.mobile.container.MScrollHandling,
     qx.ui.mobile.form.MState
   ],
-  implement : [
-    qx.ui.form.IForm,
-    qx.ui.form.IModel
-  ],
-  type : "abstract",
 
+  implement: [qx.ui.form.IForm, qx.ui.form.IModel],
+
+  type: "abstract",
 
-  construct : function()
-  {
-    this.base(arguments);
+  construct() {
+    super();
     this._setAttribute("type", this._getType());
     this.addCssClass("gap");
 
     this.addListener("focus", this._onSelected, this);
   },
 
-
-  members :
-  {
+  members: {
     // overridden
-    _getTagName : function()
-    {
+    _getTagName() {
       return "input";
     },
 
-
     /**
      * Returns the type of the input field. Override this method in the
      * specialized input class.
      */
-    _getType : function()
-    {
+    _getType() {
       if (qx.core.Environment.get("qx.debug")) {
         throw new Error("Abstract method call");
       }
     },
 
-
     /**
      * Handles the <code>click</code> and <code>focus</code> event on this input widget.
      * @param evt {qx.event.type.Event} <code>click</code> or <code>focus</code> event
      */
-    _onSelected : function(evt) {
-      if (!(evt.getTarget() instanceof qx.ui.mobile.form.TextField) && !(evt.getTarget() instanceof qx.ui.mobile.form.NumberField)) {
+    _onSelected(evt) {
+      if (
+        !(evt.getTarget() instanceof qx.ui.mobile.form.TextField) &&
+        !(evt.getTarget() instanceof qx.ui.mobile.form.NumberField)
+      ) {
         return;
       }
 
       var scrollContainer = this._getParentScrollContainer();
-      if(scrollContainer === null) {
+      if (scrollContainer === null) {
         return;
       }
 
-      setTimeout(function() {
-        scrollContainer.scrollToWidget(this.getLayoutParent(), 0);
-
-        // Refresh caret position after scrolling.
-        this._setStyle("position","relative");
-        qx.bom.AnimationFrame.request(function() {
-          this._setStyle("position",null);
-        }, this);
-      }.bind(this), 300);
+      setTimeout(
+        function () {
+          scrollContainer.scrollToWidget(this.getLayoutParent(), 0);
+
+          // Refresh caret position after scrolling.
+          this._setStyle("position", "relative");
+          qx.bom.AnimationFrame.request(function () {
+            this._setStyle("position", null);
+          }, this);
+        }.bind(this),
+        300
+      );
     }
   },
 
-
-  destruct : function() {
+  destruct() {
     this.removeListener("focus", this._onSelected, this);
   }
 });

package/source/class/qx/ui/mobile/form/Label.js

@@ -42,10 +42,8 @@
  * This example create a widget to display the label.
  *
  */
-qx.Class.define("qx.ui.mobile.form.Label",
-{
-  extend : qx.ui.mobile.core.Widget,
-
+qx.Class.define("qx.ui.mobile.form.Label", {
+  extend: qx.ui.mobile.core.Widget,
 
   /*
   *****************************************************************************
@@ -56,100 +54,88 @@ qx.Class.define("qx.ui.mobile.form.Label",
   /**
    * @param value {String?null} Text or HTML content to display
    */
-  construct : function(value)
-  {
-    this.base(arguments);
+  construct(value) {
+    super();
     if (value) {
       this.setValue(value);
     }
 
     this.addCssClass("gap");
-    this._setLayout(new qx.ui.mobile.layout.HBox().set({
-      "alignY": "middle",
-      "alignX": "left"
-    }));
+    this._setLayout(
+      new qx.ui.mobile.layout.HBox().set({
+        alignY: "middle",
+        alignX: "left"
+      })
+    );
+
     this.initWrap();
 
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().addListener("changeLocale", this._onChangeLocale, this);
+      qx.locale.Manager.getInstance().addListener(
+        "changeLocale",
+        this._onChangeLocale,
+        this
+      );
     }
 
     this.addListener("tap", this._onTap, this);
   },
 
-
-
   /*
   *****************************************************************************
      PROPERTIES
   *****************************************************************************
   */
 
-  properties :
-  {
+  properties: {
     // overridden
-    defaultCssClass :
-    {
-      refine : true,
-      init : "label"
+    defaultCssClass: {
+      refine: true,
+      init: "label"
     },
 
-
     /**
      * Text or HTML content to display
      */
-    value :
-    {
-      nullable : true,
-      init : null,
-      apply : "_applyValue",
-      event : "changeValue"
+    value: {
+      nullable: true,
+      init: null,
+      apply: "_applyValue",
+      event: "changeValue"
     },
 
-
     // overridden
-    anonymous :
-    {
-      refine : true,
-      init : false
+    anonymous: {
+      refine: true,
+      init: false
     },
 
-
     /**
      * Controls whether text wrap is activated or not.
      */
-    wrap :
-    {
-      check : "Boolean",
-      init : true,
-      apply : "_applyWrap"
+    wrap: {
+      check: "Boolean",
+      init: true,
+      apply: "_applyWrap"
     }
   },
 
-
-
-
   /*
   *****************************************************************************
      MEMBERS
   *****************************************************************************
   */
 
-  members :
-  {
-    __forWidget : null,
+  members: {
+    __forWidget: null,
 
-
-     // overridden
-    _getTagName : function()
-    {
+    // overridden
+    _getTagName() {
       return "label";
     },
 
-
     // property apply
-    _applyValue : function(value, old)
-    {
+    _applyValue(value, old) {
       var html = value;
 
       // [BUG #7871] Bugfix for IE 10 for enabling word-wrap within a flexbox layout.
@@ -159,10 +145,8 @@ qx.Class.define("qx.ui.mobile.form.Label",
       this._setHtml(html);
     },
 
-
     // property apply
-    _applyWrap : function(value, old)
-    {
+    _applyWrap(value, old) {
       if (value) {
         this.removeCssClass("no-wrap");
       } else {
@@ -170,18 +154,16 @@ qx.Class.define("qx.ui.mobile.form.Label",
       }
     },
 
-
     /**
-    * Event handler for the <code>changeEnabled</code> event on the target.
-    * @param evt {qx.event.type.Data} the changeEnabled event.
-    */
-    _changeEnabled: function(evt) {
+     * Event handler for the <code>changeEnabled</code> event on the target.
+     * @param evt {qx.event.type.Data} the changeEnabled event.
+     */
+    _changeEnabled(evt) {
       if (evt) {
         this.setEnabled(evt.getData());
       }
     },
 
-
     /**
      * Setter for the "for" attribute of this label.
      * The "for" attribute specifies which form element a label is bound to.
@@ -189,68 +171,83 @@ qx.Class.define("qx.ui.mobile.form.Label",
      * @param elementId {String} The id of the element the label is bound to.
      *
      */
-    setLabelFor: function(elementId) {
+    setLabelFor(elementId) {
       if (this.__forWidget) {
-        this.__forWidget.removeListener("changeEnabled", this._changeEnabled, this);
+        this.__forWidget.removeListener(
+          "changeEnabled",
+          this._changeEnabled,
+          this
+        );
       }
 
       this.__forWidget = qx.ui.mobile.core.Widget.getWidgetById(elementId);
 
       if (this.__forWidget) {
-        this.__forWidget.addListener("changeEnabled", this._changeEnabled, this);
+        this.__forWidget.addListener(
+          "changeEnabled",
+          this._changeEnabled,
+          this
+        );
+
         this.setEnabled(this.__forWidget.getEnabled());
       }
 
       this._setAttribute("for", elementId);
     },
 
-
     /**
      * Handler for <code>tap</code> event on the Label. This event will be delegated to target widget.
      * @param evt {qx.event.type.Pointer} The tap event.
      */
-    _onTap: function(evt) {
+    _onTap(evt) {
       if (this.__forWidget && qx.core.Environment.get("event.dispatchevent")) {
         var target = this.__forWidget.getContentElement();
-        qx.event.Registration.fireEvent(
+        qx.event.Registration.fireEvent(target, "tap", qx.event.type.Tap, [
+          evt.getNativeEvent(),
           target,
-          "tap",
-          qx.event.type.Tap, [evt.getNativeEvent(), target, null, true, true]
-        );
+          null,
+          true,
+          true
+        ]);
       }
     },
 
-
     /**
      * Locale change event handler
      *
      * @signature function(e)
      * @param e {Event} the change event
      */
-    _onChangeLocale : qx.core.Environment.select("qx.dynlocale",
-    {
-      "true" : function(e)
-      {
+    _onChangeLocale: qx.core.Environment.select("qx.dynlocale", {
+      true(e) {
         var content = this.getValue();
         if (content && content.translate) {
           this.setValue(content.translate());
         }
       },
 
-      "false" : null
+      false: null
     })
   },
 
-
-  destruct : function() {
+  destruct() {
     this.removeListener("tap", this._onTap, this);
 
     if (this.__forWidget) {
-      this.__forWidget.removeListener("changeEnabled", this._changeEnabled, this);
+      this.__forWidget.removeListener(
+        "changeEnabled",
+        this._changeEnabled,
+        this
+      );
+
       this.__forWidget = null;
     }
     if (qx.core.Environment.get("qx.dynlocale")) {
-      qx.locale.Manager.getInstance().removeListener("changeLocale", this._onChangeLocale, this);
+      qx.locale.Manager.getInstance().removeListener(
+        "changeLocale",
+        this._onChangeLocale,
+        this
+      );
     }
   }
 });

package/source/class/qx/ui/mobile/form/MState.js

@@ -3,29 +3,26 @@
  * for form elements to manipulate their state. [usually "valid" and "invalid"]
  *
  */
-qx.Mixin.define("qx.ui.mobile.form.MState",
-{
-
+qx.Mixin.define("qx.ui.mobile.form.MState", {
   /*
   *****************************************************************************
      MEMBERS
   *****************************************************************************
   */
 
-  members :
-  {
-  /**
-   * The states of the element
-   */
-  __states: null,
+  members: {
+    /**
+     * The states of the element
+     */
+    __states: null,
 
-  /**
-   * Adds a state to the element
-   * @param state {String} the state to be added
-   *
-   */
-    addState : function(state) {
-      if(this.__states === null) {
+    /**
+     * Adds a state to the element
+     * @param state {String} the state to be added
+     *
+     */
+    addState(state) {
+      if (this.__states === null) {
         this.__states = {};
       }
       this.__states[state] = true;
@@ -38,8 +35,8 @@ qx.Mixin.define("qx.ui.mobile.form.MState",
      * @return {Boolean} true if the element has the state, false if it doesn't.
      *
      */
-    hasState : function(state) {
-      return this.__states!==null && this.__states[state] ;
+    hasState(state) {
+      return this.__states !== null && this.__states[state];
     },
 
     /**
@@ -47,8 +44,8 @@ qx.Mixin.define("qx.ui.mobile.form.MState",
      * @param state {String} the state to be removed
      *
      */
-    removeState : function(state) {
-      if(this.hasState(state)) {
+    removeState(state) {
+      if (this.hasState(state)) {
         delete this.__states[state];
         this.removeCssClass(state);
       }
@@ -62,19 +59,15 @@ qx.Mixin.define("qx.ui.mobile.form.MState",
      * @param newState {String} the state to get injected in the oldState's place
      *
      */
-    replaceState : function(oldState, newState) {
-      if(this.hasState(oldState))
-      {
+    replaceState(oldState, newState) {
+      if (this.hasState(oldState)) {
         delete this.__states[oldState];
         this.__states[newState] = true;
         this.removeCssClass(oldState);
         this.addCssClass(newState);
-      }
-      else
-      {
+      } else {
         this.addState(newState);
       }
     }
-
   }
 });

package/source/class/qx/ui/mobile/form/MText.js

@@ -22,9 +22,7 @@
  *
  * @require(qx.event.handler.Input)
  */
-qx.Mixin.define("qx.ui.mobile.form.MText",
-{
-
+qx.Mixin.define("qx.ui.mobile.form.MText", {
   /*
   *****************************************************************************
      CONSTRUCTOR
@@ -34,80 +32,64 @@ qx.Mixin.define("qx.ui.mobile.form.MText",
   /**
    * @param value {var?null} The value of the widget.
    */
-  construct : function(value)
-  {
+  construct(value) {
     this.initMaxLength();
     this.initPlaceholder();
     this.initReadOnly();
   },
 
-
   /*
   *****************************************************************************
      PROPERTIES
   *****************************************************************************
   */
 
-  properties :
-  {
-   /**
+  properties: {
+    /**
      * Maximal number of characters that can be entered in the input field.
      */
-    maxLength :
-    {
-      check : "PositiveInteger",
-      nullable : true,
-      init : null,
-      apply : "_applyMaxLength"
+    maxLength: {
+      check: "PositiveInteger",
+      nullable: true,
+      init: null,
+      apply: "_applyMaxLength"
     },
 
-
     /**
      * String value which will be shown as a hint if the field is all of:
      * unset, unfocused and enabled. Set to <code>null</code> to not show a placeholder
      * text.
      */
-    placeholder :
-    {
-      check : "String",
-      nullable : true,
-      init : null,
-      apply : "_applyPlaceholder"
+    placeholder: {
+      check: "String",
+      nullable: true,
+      init: null,
+      apply: "_applyPlaceholder"
     },
 
-
     /** Whether the field is read only */
-    readOnly :
-    {
-      check : "Boolean",
-      nullable : true,
-      init : null,
-      apply : "_applyAttribute"
+    readOnly: {
+      check: "Boolean",
+      nullable: true,
+      init: null,
+      apply: "_applyAttribute"
     }
   },
 
-
-
-
   /*
   *****************************************************************************
      MEMBERS
   *****************************************************************************
   */
 
-
-  members :
-  {
+  members: {
     // property apply
-    _applyMaxLength : function(value, old)
-    {
+    _applyMaxLength(value, old) {
       this._setAttribute("maxlength", value);
     },
 
-
     // property apply
-    _applyPlaceholder : function(value, old)
-    {
+    _applyPlaceholder(value, old) {
       // Android is not able to indent placeholder.
       // Adding a space before the placeholder text, as a fix.
       if (qx.core.Environment.get("os.name") == "android" && value !== null) {
@@ -116,28 +98,26 @@ qx.Mixin.define("qx.ui.mobile.form.MText",
       this._setAttribute("placeholder", value);
     },
 
-
     /**
      * Points the focus of the form to this widget.
      */
-    focus : function() {
-      if(this.isReadOnly() || this.getEnabled() == false) {
+    focus() {
+      if (this.isReadOnly() || this.getEnabled() == false) {
         return;
       }
 
       var targetElement = this.getContainerElement();
-      if(targetElement) {
+      if (targetElement) {
         qx.bom.Element.focus(targetElement);
       }
     },
 
-
     /**
      * Removes the focus from this widget.
      */
-    blur : function() {
+    blur() {
       var targetElement = this.getContainerElement();
-      if(targetElement) {
+      if (targetElement) {
         qx.bom.Element.blur(targetElement);
       }
     }