@qooxdoo/framework 7.0.0-beta.1 → 7.0.0-beta.10

package/source/class/qx/ui/mobile/container/Drawer.js

@@ -39,10 +39,8 @@
  *
  *
  */
-qx.Class.define("qx.ui.mobile.container.Drawer",
-{
-  extend : qx.ui.mobile.container.Composite,
-
+qx.Class.define("qx.ui.mobile.container.Drawer", {
+  extend: qx.ui.mobile.container.Composite,
 
   /*
   *****************************************************************************
@@ -56,9 +54,8 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
    * @param layout {qx.ui.mobile.layout.Abstract?null} The layout that should be
    * used for this container.
    */
-  construct : function(parent, layout)
-  {
-    this.base(arguments);
+  construct(parent, layout) {
+    super();
 
     if (layout) {
       this.setLayout(layout);
@@ -82,119 +79,105 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
     this.__parent = this.getLayoutParent();
     this.__parent.addCssClass("drawer-parent");
 
-    this.__parent.addListener("swipe", this._onParentSwipe,this);
-    this.__parent.addListener("pointerdown", this._onParentPointerDown,this);
+    this.__parent.addListener("swipe", this._onParentSwipe, this);
+    this.__parent.addListener("pointerdown", this._onParentPointerDown, this);
 
-    this.__pointerStartPosition = [0,0];
+    this.__pointerStartPosition = [0, 0];
 
     this.forceHide();
   },
 
-
   /*
   *****************************************************************************
      EVENTS
   *****************************************************************************
   */
 
-  events :
-  {
+  events: {
     /**
      * Fired when the drawer changes its size.
      */
-    resize : "qx.event.type.Data"
+    resize: "qx.event.type.Data"
   },
 
-
   /*
   *****************************************************************************
      PROPERTIES
   *****************************************************************************
   */
-  properties : {
+  properties: {
     // overridden
-    defaultCssClass : {
-      refine : true,
-      init : "drawer"
+    defaultCssClass: {
+      refine: true,
+      init: "drawer"
     },
 
-
     /** Property for setting the orientation of the drawer.
      * Allowed values are: <code>left</code>,<code>right</code>,<code>top</code>,<code>bottom</code> */
-    orientation : {
-      check : "String",
-      init : "left",
-      apply : "_applyOrientation"
+    orientation: {
+      check: "String",
+      init: "left",
+      apply: "_applyOrientation"
     },
 
-
     /** The size of the drawer in <code>px</code>. This value is interpreted as width if
-    * orientation is <code>left | right</code>, as height if orientation is
-    * <code>top | bottom</code>. */
-    size : {
-      check : "Integer",
-      init : 300,
-      apply : "_applySize",
-      event : "resize"
+     * orientation is <code>left | right</code>, as height if orientation is
+     * <code>top | bottom</code>. */
+    size: {
+      check: "Integer",
+      init: 300,
+      apply: "_applySize",
+      event: "resize"
     },
 
-
     /** Indicates whether the drawer should hide when the parent area of it is tapped.  */
-    hideOnParentTap : {
-      check : "Boolean",
-      init : true
+    hideOnParentTap: {
+      check: "Boolean",
+      init: true
     },
 
-
     /**
      * Indicates whether the drawer should hide when a back action appear form a key event.
      */
-    hideOnBack :
-    {
-      check : "Boolean",
-      init : true
+    hideOnBack: {
+      check: "Boolean",
+      init: true
     },
 
-
     /** Sets the size of the tapping area, where the drawer reacts on swipes for opening itself. */
-    tapOffset : {
-      check : "Integer",
-      init : 20
+    tapOffset: {
+      check: "Integer",
+      init: 20
     },
 
-
     /** The duration time of the transition between shown/hidden state in ms. */
-    transitionDuration : {
-      check : "Integer",
-      init : 500,
-      apply : "_applyTransitionDuration"
+    transitionDuration: {
+      check: "Integer",
+      init: 500,
+      apply: "_applyTransitionDuration"
     },
 
-
     /** Sets the drawer zIndex position relative to its parent. */
-    positionZ : {
-      check : [ "above", "below"],
-      init : "above",
-      apply : "_applyPositionZ"
+    positionZ: {
+      check: ["above", "below"],
+      init: "above",
+      apply: "_applyPositionZ"
     }
   },
 
-
   /*
   *****************************************************************************
      MEMBERS
   *****************************************************************************
   */
-  members :
-  {
-    __pointerStartPosition : null,
-    __parent : null,
-    __transitionEnabled : null,
-    __inTransition : null,
-
+  members: {
+    __pointerStartPosition: null,
+    __parent: null,
+    __transitionEnabled: null,
+    __inTransition: null,
 
     // property apply
-    _applyOrientation : function(value, old) {
+    _applyOrientation(value, old) {
       this.removeCssClass(old);
       this.addCssClass(value);
 
@@ -202,25 +185,23 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
       this._applySize(this.getSize());
     },
 
-
     // property apply
-    _applyPositionZ : function(value,old) {
+    _applyPositionZ(value, old) {
       this.removeCssClass(old);
       this.addCssClass(value);
 
-      if(this.__parent) {
+      if (this.__parent) {
         this.__parent.setTranslateX(0);
         this.__parent.setTranslateY(0);
       }
     },
 
-
     // property apply
-    _applySize : function(value) {
+    _applySize(value) {
       var height = null;
       var width = null;
 
-      var remSize = (value / 16);
+      var remSize = value / 16;
 
       if (this.getOrientation() == "left" || this.getOrientation() == "right") {
         width = remSize + "rem";
@@ -232,19 +213,16 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
       this._setStyle("width", width);
     },
 
-
     // property apply
-    _applyTransitionDuration : function(value,old) {
+    _applyTransitionDuration(value, old) {
       this.__transitionEnabled = value > 0;
     },
 
-
     /**
      * Shows the drawer.
      */
-    show : function()
-    {
-      if(!this.isHidden() || this.__inTransition === true) {
+    show() {
+      if (!this.isHidden() || this.__inTransition === true) {
         return;
       }
 
@@ -272,29 +250,36 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
 
         var callArguments = arguments;
         var transitionTarget = this._getTransitionTarget().getContentElement();
-        var listenerId = qx.bom.Element.addListener(transitionTarget, "transitionEnd", function(evt) {
-          this.base(callArguments);
-          this._disableTransition();
-          this.__inTransition = false;
-          qx.bom.Element.removeListenerById(transitionTarget, listenerId);
-        }, this);
-
-        setTimeout(function() {
-          this.removeCssClass("hidden");
-        }.bind(this), 0);
+        var listenerId = qx.bom.Element.addListener(
+          transitionTarget,
+          "transitionEnd",
+          function (evt) {
+            super.show();
+            this._disableTransition();
+            this.__inTransition = false;
+            qx.bom.Element.removeListenerById(transitionTarget, listenerId);
+          },
+          this
+        );
+
+        setTimeout(
+          function () {
+            this.removeCssClass("hidden");
+          }.bind(this),
+          0
+        );
       } else {
-        this.base(arguments);
+        super.show();
         this.__inTransition = false;
         this.removeCssClass("hidden");
       }
     },
 
-
     /**
      * Hides the drawer.
      */
-    hide : function() {
-      if(this.isHidden() || this.__inTransition === true) {
+    hide() {
+      if (this.isHidden() || this.__inTransition === true) {
         return;
       }
 
@@ -310,32 +295,39 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
 
         var callArguments = arguments;
         var transitionTarget = this._getTransitionTarget().getContentElement();
-        var listenerId = qx.bom.Element.addListener(transitionTarget, "transitionEnd", function(evt) {
-          this.base(callArguments);
-          this._disableTransition();
-          this.__parent.removeCssClass("blocked");
-          this.__inTransition = false;
-          qx.bom.Element.removeListenerById(transitionTarget, listenerId);
-        }, this);
-
-        setTimeout(function() {
-          this.addCssClass("hidden");
-        }.bind(this), 0);
+        var listenerId = qx.bom.Element.addListener(
+          transitionTarget,
+          "transitionEnd",
+          function (evt) {
+            super.hide();
+            this._disableTransition();
+            this.__parent.removeCssClass("blocked");
+            this.__inTransition = false;
+            qx.bom.Element.removeListenerById(transitionTarget, listenerId);
+          },
+          this
+        );
+
+        setTimeout(
+          function () {
+            this.addCssClass("hidden");
+          }.bind(this),
+          0
+        );
       } else {
-        this.base(arguments);
+        super.hide();
         this.addCssClass("hidden");
         this.__inTransition = false;
         this.__parent.removeCssClass("blocked");
       }
     },
 
-
     /**
      * Strict way to hide this drawer. Removes the blocker from the parent,
      * and hides the drawer without any animation. Should be called when drawer's
      * parent is animated and drawer should hide immediately.
      */
-    forceHide : function() {
+    forceHide() {
       this._disableTransition();
 
       if (this.getPositionZ() == "below") {
@@ -348,34 +340,38 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
       this.addCssClass("hidden");
     },
 
-
     // overridden
-    isHidden : function() {
+    isHidden() {
       return this.hasCssClass("hidden");
     },
 
-
     /**
      * Enables the transition on this drawer.
      */
-    _enableTransition : function() {
-      qx.bom.element.Style.set(this._getTransitionTarget().getContentElement(), "transition", "all "+this.getTransitionDuration()+"ms ease-in-out");
+    _enableTransition() {
+      qx.bom.element.Style.set(
+        this._getTransitionTarget().getContentElement(),
+        "transition",
+        "all " + this.getTransitionDuration() + "ms ease-in-out"
+      );
     },
 
-
-   /**
+    /**
      * Disables the transition on this drawer.
      */
-    _disableTransition : function() {
-      qx.bom.element.Style.set(this._getTransitionTarget().getContentElement(),"transition", null);
+    _disableTransition() {
+      qx.bom.element.Style.set(
+        this._getTransitionTarget().getContentElement(),
+        "transition",
+        null
+      );
     },
 
-
     /**
-    * Returns the target widget which is responsible for the transition handling.
-    * @return {qx.ui.mobile.core.Widget} the transition target widget.
-    */
-    _getTransitionTarget : function() {
+     * Returns the target widget which is responsible for the transition handling.
+     * @return {qx.ui.mobile.core.Widget} the transition target widget.
+     */
+    _getTransitionTarget() {
       if (this.getPositionZ() == "below") {
         return this.__parent;
       } else {
@@ -383,13 +379,12 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
       }
     },
 
-
     /**
      * Toggle the visibility of the drawer.
      * @return {Boolean} the new visibility state.
      */
-    toggleVisibility : function() {
-      if(this.isHidden()) {
+    toggleVisibility() {
+      if (this.isHidden()) {
         this.show();
         return true;
       } else {
@@ -398,39 +393,43 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
       }
     },
 
-
     /**
      * Handles a back event which appears on the application.
      *
      * @param evt {qx.event.type.Data} The back event.
      */
-    _onBack : function(evt)
-    {
+    _onBack(evt) {
       var triggeredByKeyEvent = !!evt.getData();
-      if (triggeredByKeyEvent && !this.isHidden() && this.getHideOnBack())
-      {
+      if (triggeredByKeyEvent && !this.isHidden() && this.getHideOnBack()) {
         evt.preventDefault();
         this.hide();
       }
     },
 
-
     /**
      * Handles a tap on drawers' root.
      * @param evt {qx.module.event.Pointer} Handled pointer event.
      */
-    _onParentPointerDown : function(evt) {
-      this.__pointerStartPosition = [evt.getViewportLeft(),evt.getViewportTop()];
+    _onParentPointerDown(evt) {
+      this.__pointerStartPosition = [
+        evt.getViewportLeft(),
+        evt.getViewportTop()
+      ];
 
       var isShown = !this.hasCssClass("hidden");
-      if(isShown && this.isHideOnParentTap()) {
+      if (isShown && this.isHideOnParentTap()) {
         var location = qx.bom.element.Location.get(this.getContainerElement());
         var orientation = this.getOrientation();
-        if (orientation == "left" && this.__pointerStartPosition[0] > location.right
-        || orientation == "top" && this.__pointerStartPosition[1] > location.bottom
-        || orientation == "bottom" && this.__pointerStartPosition[1] < location.top
-        || orientation == "right" && this.__pointerStartPosition[0] < location.left)
-        {
+        if (
+          (orientation == "left" &&
+            this.__pointerStartPosition[0] > location.right) ||
+          (orientation == "top" &&
+            this.__pointerStartPosition[1] > location.bottom) ||
+          (orientation == "bottom" &&
+            this.__pointerStartPosition[1] < location.top) ||
+          (orientation == "right" &&
+            this.__pointerStartPosition[0] < location.left)
+        ) {
           // First event on overlayed page should be ignored.
           evt.preventDefault();
 
@@ -439,55 +438,59 @@ qx.Class.define("qx.ui.mobile.container.Drawer",
       }
     },
 
-
     /**
      * Handles a swipe on layout parent.
      * @param evt {qx.module.event.Pointer} Handled pointer event.
      */
-    _onParentSwipe : function(evt) {
+    _onParentSwipe(evt) {
       var direction = evt.getDirection();
       var isHidden = this.hasCssClass("hidden");
-      if(isHidden) {
+      if (isHidden) {
         var location = qx.bom.element.Location.get(this.getContainerElement());
 
         if (
-          (direction == "right"
-          && this.getOrientation() == "left"
-          && this.__pointerStartPosition[0] < location.right + this.getTapOffset()
-          && this.__pointerStartPosition[0] > location.right)
-          ||
-          (direction == "left"
-          && this.getOrientation() == "right"
-          && this.__pointerStartPosition[0] > location.left - this.getTapOffset()
-          && this.__pointerStartPosition[0] < location.left)
-          ||
-          (direction == "down"
-          && this.getOrientation() == "top"
-          && this.__pointerStartPosition[1] < this.getTapOffset() + location.bottom
-          && this.__pointerStartPosition[1] > location.bottom)
-          ||
-          (direction == "up"
-          && this.getOrientation() == "bottom"
-          && this.__pointerStartPosition[1] > location.top - this.getTapOffset()
-          && this.__pointerStartPosition[1] < location.top)
-        )
-        {
+          (direction == "right" &&
+            this.getOrientation() == "left" &&
+            this.__pointerStartPosition[0] <
+              location.right + this.getTapOffset() &&
+            this.__pointerStartPosition[0] > location.right) ||
+          (direction == "left" &&
+            this.getOrientation() == "right" &&
+            this.__pointerStartPosition[0] >
+              location.left - this.getTapOffset() &&
+            this.__pointerStartPosition[0] < location.left) ||
+          (direction == "down" &&
+            this.getOrientation() == "top" &&
+            this.__pointerStartPosition[1] <
+              this.getTapOffset() + location.bottom &&
+            this.__pointerStartPosition[1] > location.bottom) ||
+          (direction == "up" &&
+            this.getOrientation() == "bottom" &&
+            this.__pointerStartPosition[1] >
+              location.top - this.getTapOffset() &&
+            this.__pointerStartPosition[1] < location.top)
+        ) {
           this.show();
         }
       }
     }
   },
 
-
-  destruct : function()
-  {
+  destruct() {
     qx.core.Init.getApplication().removeListener("back", this._onBack, this);
 
     this.__parent.removeListener("swipe", this._onParentSwipe, this);
-    this.__parent.removeListener("pointerdown", this._onParentPointerDown, this);
+    this.__parent.removeListener(
+      "pointerdown",
+      this._onParentPointerDown,
+      this
+    );
 
     qx.util.DisposeUtil.destroyContainer(this);
 
-    this.__pointerStartPosition = this.__parent = this.__transitionEnabled = null;
+    this.__pointerStartPosition =
+      this.__parent =
+      this.__transitionEnabled =
+        null;
   }
 });

package/source/class/qx/ui/mobile/container/INavigation.js

@@ -19,31 +19,27 @@
 /**
  * All widgets that are added to the navigation container should implement this interface.
  */
-qx.Interface.define("qx.ui.mobile.container.INavigation",
-{
-  members :
-  {
+qx.Interface.define("qx.ui.mobile.container.INavigation", {
+  members: {
     /**
      * Returns the title widget that is merged into the navigation bar.
      *
      * @return {qx.ui.mobile.navigationbar.Title} The title of the navigation bar
      */
-    getTitleWidget : function() {},
-
+    getTitleWidget() {},
 
     /**
      * Returns the left container that is merged into the navigation bar.
      *
      * @return {qx.ui.mobile.container.Composite} The left container of the navigation bar
      */
-    getLeftContainer : function() {},
-
+    getLeftContainer() {},
 
     /**
      * Returns the right container that is merged into the navigation bar.
      *
      * @return {qx.ui.mobile.container.Composite} The right container of the navigation bar
      */
-    getRightContainer : function() {}
+    getRightContainer() {}
   }
-});
+});

package/source/class/qx/ui/mobile/container/IScrollDelegate.js

@@ -25,15 +25,13 @@
  * listed in the <code>implement</code> key of a class unless all methods are
  * actually implemented.
  */
-qx.Interface.define("qx.ui.mobile.container.IScrollDelegate",
-{
-  members :
-  {
+qx.Interface.define("qx.ui.mobile.container.IScrollDelegate", {
+  members: {
     /**
      * Calculates the scroll offset if container scrolls to a widget/element through <code>scrollToElement()|scrollToWidget()</code>.
      *
      * @return {Array} an array with x,y offset.
      */
-    getScrollOffset: function() {}
+    getScrollOffset() {}
   }
-});
+});