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

package/source/class/qx/ui/mobile/page/Manager.js

@@ -39,10 +39,8 @@
  *
  *
  */
-qx.Class.define("qx.ui.mobile.page.Manager",
-{
-  extend : qx.core.Object,
-
+qx.Class.define("qx.ui.mobile.page.Manager", {
+  extend: qx.core.Object,
 
   /*
   *****************************************************************************
@@ -55,9 +53,8 @@ qx.Class.define("qx.ui.mobile.page.Manager",
    * qx.core.Environment.get("device.type") is called for decision.
    * @param root {qx.ui.mobile.core.Widget?} widget which should be used as root for this manager.
    */
-  construct : function(isTablet, root)
-  {
-    this.base(arguments);
+  construct(isTablet, root) {
+    super();
 
     root = root || qx.core.Init.getApplication().getRoot();
 
@@ -67,8 +64,8 @@ qx.Class.define("qx.ui.mobile.page.Manager",
       // If isTablet is undefined, call environment variable "device.type".
       // When "tablet" or "desktop" type >> do tablet layouting.
       this.__isTablet =
-      qx.core.Environment.get("device.type") == "desktop" ||
-      qx.core.Environment.get("device.type") == "tablet";
+        qx.core.Environment.get("device.type") == "desktop" ||
+        qx.core.Environment.get("device.type") == "tablet";
     }
 
     this.__detailNavigation = this._createDetailNavigation();
@@ -85,16 +82,35 @@ qx.Class.define("qx.ui.mobile.page.Manager",
       this.__masterButton.addListener("tap", this._onMasterButtonTap, this);
 
       this.__hideMasterButton = this._createHideMasterButton();
-      this.__hideMasterButton.addListener("tap", this._onHideMasterButtonTap, this);
-
-      this.__masterNavigation.addListener("update", this._onMasterContainerUpdate, this);
-      this.__detailNavigation.addListener("update", this._onDetailContainerUpdate, this);
+      this.__hideMasterButton.addListener(
+        "tap",
+        this._onHideMasterButtonTap,
+        this
+      );
+
+      this.__masterNavigation.addListener(
+        "update",
+        this._onMasterContainerUpdate,
+        this
+      );
+
+      this.__detailNavigation.addListener(
+        "update",
+        this._onDetailContainerUpdate,
+        this
+      );
+
+      root.add(this.__detailContainer, { flex: 1 });
+      this.__masterContainer.add(this.__masterNavigation, { flex: 1 });
+      this.__detailContainer.add(this.__detailNavigation, { flex: 1 });
+
+      qx.event.Registration.addListener(
+        window,
+        "orientationchange",
+        this._onLayoutChange,
+        this
+      );
 
-      root.add(this.__detailContainer, {flex:1});
-      this.__masterContainer.add(this.__masterNavigation, {flex:1});
-      this.__detailContainer.add(this.__detailNavigation, {flex:1});
-
-      qx.event.Registration.addListener(window, "orientationchange", this._onLayoutChange, this);
       this.__masterContainer.addListener("resize", this._onLayoutChange, this);
 
       // On Tablet Mode, no Animation should be shown by default.
@@ -103,204 +119,200 @@ qx.Class.define("qx.ui.mobile.page.Manager",
 
       this.__masterContainer.forceHide();
 
-      setTimeout(function() {
-        if (qx.bom.Viewport.isLandscape()) {
-          this.__masterContainer.show();
-        }
-      }.bind(this), 300);
+      setTimeout(
+        function () {
+          if (qx.bom.Viewport.isLandscape()) {
+            this.__masterContainer.show();
+          }
+        }.bind(this),
+        300
+      );
     } else {
-      root.add(this.__detailNavigation, {flex:1});
+      root.add(this.__detailNavigation, { flex: 1 });
     }
   },
 
-
-  properties : {
-
+  properties: {
     /**
      * The caption/label of the Master Button and Popup Title.
      */
-    masterTitle : {
-      init : "Master",
-      check : "String",
-      apply : "_applyMasterTitle"
+    masterTitle: {
+      init: "Master",
+      check: "String",
+      apply: "_applyMasterTitle"
     },
 
-
     /**
      * The caption/label of the Hide Master Button.
      */
-    hideMasterButtonCaption : {
-      init : "Hide",
-      check : "String",
-      apply : "_applyHideMasterButtonCaption"
+    hideMasterButtonCaption: {
+      init: "Hide",
+      check: "String",
+      apply: "_applyHideMasterButtonCaption"
     },
 
-
     /**
      * This flag controls whether the MasterContainer can be hidden on Landscape.
      */
-    allowMasterHideOnLandscape : {
-      init : true,
-      check : "Boolean"
+    allowMasterHideOnLandscape: {
+      init: true,
+      check: "Boolean"
     },
 
-
     /**
      *  This flag controls whether the MasterContainer hides on portrait view,
      *  when a Detail Page fires the lifecycle event "start".
      */
-    hideMasterOnDetailStart : {
-      init : true,
-      check : "Boolean"
+    hideMasterOnDetailStart: {
+      init: true,
+      check: "Boolean"
     }
   },
 
-
   /*
   *****************************************************************************
      MEMBERS
   *****************************************************************************
   */
 
-  members :
-  {
-    __isTablet : null,
-    __detailNavigation : null,
-    __masterNavigation : null,
-    __masterButton : null,
-    __hideMasterButton : null,
-    __masterPages : null,
-    __detailPages : null,
-    __masterContainer : null,
-    __detailContainer : null,
-
+  members: {
+    __isTablet: null,
+    __detailNavigation: null,
+    __masterNavigation: null,
+    __masterButton: null,
+    __hideMasterButton: null,
+    __masterPages: null,
+    __detailPages: null,
+    __masterContainer: null,
+    __detailContainer: null,
 
     /**
      * Creates the master container.
      *
      * @return {qx.ui.mobile.container.Composite} The created container
      */
-    _createMasterContainer : function() {
-      var masterContainer = new qx.ui.mobile.container.Drawer(null, new qx.ui.mobile.layout.HBox()).set({
-        hideOnParentTap : false,
-        hideOnBack : false
+    _createMasterContainer() {
+      var masterContainer = new qx.ui.mobile.container.Drawer(
+        null,
+        new qx.ui.mobile.layout.HBox()
+      ).set({
+        hideOnParentTap: false,
+        hideOnBack: false
       });
+
       masterContainer.addCssClass("master-detail-master");
-      masterContainer.addListener("changeVisibility", this._onMasterChangeVisibility, this);
+      masterContainer.addListener(
+        "changeVisibility",
+        this._onMasterChangeVisibility,
+        this
+      );
+
       return masterContainer;
     },
 
-
     /**
      * Creates the detail container.
      *
      * @return {qx.ui.mobile.container.Composite} The created container
      */
-    _createDetailContainer : function() {
-      var detailContainer = new qx.ui.mobile.container.Composite(new qx.ui.mobile.layout.VBox());
+    _createDetailContainer() {
+      var detailContainer = new qx.ui.mobile.container.Composite(
+        new qx.ui.mobile.layout.VBox()
+      );
+
       detailContainer.setDefaultCssClass("master-detail-detail");
       return detailContainer;
     },
 
-
     /**
      * Getter for the Master Container
      * @return {qx.ui.mobile.container.Drawer} The Master Container.
      */
-    getMasterContainer : function() {
+    getMasterContainer() {
       return this.__masterContainer;
     },
 
-
     /**
      * Getter for the Detail Container
      * @return {qx.ui.mobile.container.Composite} The Detail Container.
      */
-    getDetailContainer : function() {
+    getDetailContainer() {
       return this.__detailContainer;
     },
 
-
     /**
      * Returns the button for showing/hiding the masterContainer.
      * @return {qx.ui.mobile.navigationbar.Button}
      */
-    getMasterButton : function() {
+    getMasterButton() {
       return this.__masterButton;
     },
 
-
     /**
      * Returns the masterNavigation.
      * @return {qx.ui.mobile.container.Navigation}
      */
-    getMasterNavigation : function() {
+    getMasterNavigation() {
       return this.__masterNavigation;
     },
 
-
     /**
      * Returns the detailNavigation.
      * @return {qx.ui.mobile.container.Navigation}
      */
-    getDetailNavigation : function() {
+    getDetailNavigation() {
       return this.__detailNavigation;
     },
 
-
-     /**
+    /**
      * Factory method for the master button, which is responsible for showing/hiding masterContainer.
      * @return {qx.ui.mobile.navigationbar.Button}
      */
-    _createMasterButton : function() {
+    _createMasterButton() {
       return new qx.ui.mobile.navigationbar.Button(this.getMasterTitle());
     },
 
-
     /**
      * Factory method for the hide master button, which is responsible for hiding masterContainer on Landscape view.
      * @return {qx.ui.mobile.navigationbar.Button}
      */
-    _createHideMasterButton : function() {
+    _createHideMasterButton() {
       return new qx.ui.mobile.navigationbar.Button("Hide");
     },
 
-
     /**
-    * Factory method for masterNavigation.
-    * @return {qx.ui.mobile.container.Navigation}
-    */
-    _createMasterNavigation : function() {
+     * Factory method for masterNavigation.
+     * @return {qx.ui.mobile.container.Navigation}
+     */
+    _createMasterNavigation() {
       return new qx.ui.mobile.container.Navigation();
     },
 
-
     /**
      * Factory method for detailNavigation.
      * @return {qx.ui.mobile.container.Navigation}
      */
-    _createDetailNavigation : function() {
+    _createDetailNavigation() {
       return new qx.ui.mobile.container.Navigation();
     },
 
-
     /**
      * Adds an array of NavigationPages to masterContainer, if __isTablet is true. Otherwise it will be added to detailContainer.
      * @param pages {qx.ui.mobile.page.NavigationPage[]|qx.ui.mobile.page.NavigationPage} Array of NavigationPages or single NavigationPage.
      */
-    addMaster : function(pages) {
+    addMaster(pages) {
       if (this.__isTablet) {
-        if(pages) {
-          if(!qx.lang.Type.isArray(pages)) {
+        if (pages) {
+          if (!qx.lang.Type.isArray(pages)) {
             pages = [pages];
           }
 
-          for(var i = 0; i < pages.length; i++) {
+          for (var i = 0; i < pages.length; i++) {
             var masterPage = pages[i];
             masterPage.addListener("start", this._onMasterPageStart, this);
           }
 
-          if(this.__masterPages) {
+          if (this.__masterPages) {
             this.__masterPages.concat(pages);
           } else {
             this.__masterPages = pages;
@@ -313,25 +325,24 @@ qx.Class.define("qx.ui.mobile.page.Manager",
       }
     },
 
-
     /**
      * Adds an array of NavigationPage to the detailContainer.
      * @param pages {qx.ui.mobile.page.NavigationPage[]|qx.ui.mobile.page.NavigationPage} Array of NavigationPages or single NavigationPage.
      */
-    addDetail : function(pages) {
+    addDetail(pages) {
       this._add(pages, this.__detailNavigation);
 
-      if(pages && this.__isTablet) {
+      if (pages && this.__isTablet) {
         if (!qx.lang.Type.isArray(pages)) {
           pages = [pages];
         }
 
-        for(var i = 0; i < pages.length; i++) {
+        for (var i = 0; i < pages.length; i++) {
           var detailPage = pages[i];
           detailPage.addListener("start", this._onDetailPageStart, this);
         }
 
-        if(this.__detailPages) {
+        if (this.__detailPages) {
           this.__detailPages.concat(pages);
         } else {
           this.__detailPages = pages;
@@ -339,35 +350,32 @@ qx.Class.define("qx.ui.mobile.page.Manager",
       }
     },
 
-
     /**
      * Called when a detailPage reaches lifecycle state "start".
      * @param evt {qx.event.type.Event} source event.
      */
-    _onDetailPageStart : function(evt) {
-      if(qx.bom.Viewport.isPortrait() && this.isHideMasterOnDetailStart()) {
+    _onDetailPageStart(evt) {
+      if (qx.bom.Viewport.isPortrait() && this.isHideMasterOnDetailStart()) {
         this.__masterContainer.hide();
       }
     },
 
-
     /**
      * Called when a masterPage reaches lifecycle state "start". Then property masterTitle will be update with masterPage's title.
      * @param evt {qx.event.type.Event} source event.
      */
-    _onMasterPageStart : function(evt) {
+    _onMasterPageStart(evt) {
       var masterPage = evt.getTarget();
       var masterPageTitle = masterPage.getTitle();
       this.setMasterTitle(masterPageTitle);
     },
 
-
     /**
      * Adds an array of NavigationPage to the target container.
      * @param pages {qx.ui.mobile.page.NavigationPage[]|qx.ui.mobile.page.NavigationPage} Array of NavigationPages, or NavigationPage.
      * @param target {qx.ui.mobile.container.Navigation} target navigation container.
      */
-    _add : function(pages, target) {
+    _add(pages, target) {
       if (!qx.lang.Type.isArray(pages)) {
         pages = [pages];
       }
@@ -375,12 +383,11 @@ qx.Class.define("qx.ui.mobile.page.Manager",
       for (var i = 0; i < pages.length; i++) {
         var page = pages[i];
 
-        if (qx.core.Environment.get("qx.debug"))
-        {
+        if (qx.core.Environment.get("qx.debug")) {
           this.assertInstance(page, qx.ui.mobile.page.NavigationPage);
         }
 
-        if(this.__isTablet && !page.getShowBackButtonOnTablet()) {
+        if (this.__isTablet && !page.getShowBackButtonOnTablet()) {
           page.setShowBackButton(false);
         }
 
@@ -389,52 +396,47 @@ qx.Class.define("qx.ui.mobile.page.Manager",
       }
     },
 
-
     /**
      * Called when masterContainer is updated.
      * @param evt {qx.event.type.Data} source event.
      */
-    _onMasterContainerUpdate : function(evt) {
+    _onMasterContainerUpdate(evt) {
       var widget = evt.getData();
       widget.getRightContainer().remove(this.__hideMasterButton);
       widget.getRightContainer().add(this.__hideMasterButton);
     },
 
-
     /**
      * Called when detailContainer is updated.
      * @param evt {qx.event.type.Data} source event.
      */
-    _onDetailContainerUpdate : function(evt) {
+    _onDetailContainerUpdate(evt) {
       var widget = evt.getData();
       widget.getLeftContainer().remove(this.__masterButton);
       widget.getLeftContainer().add(this.__masterButton);
     },
 
-
     /**
-    * Called when user taps on masterButton.
-    */
-    _onMasterButtonTap : function() {
+     * Called when user taps on masterButton.
+     */
+    _onMasterButtonTap() {
       this.__masterContainer.show();
     },
 
-
     /**
-    * Called when user taps on hideMasterButton.
-    */
-    _onHideMasterButtonTap : function() {
+     * Called when user taps on hideMasterButton.
+     */
+    _onHideMasterButtonTap() {
       this._removeDetailContainerGap();
       this.__masterContainer.hide();
     },
 
-
     /**
-    * Event handler for <code>changeVisibility</code> event on master container.
-    * @param evt {qx.event.type.Data} the change event.
-    */
-    _onMasterChangeVisibility: function(evt) {
-      var isMasterVisible = ("visible" === evt.getData());
+     * Event handler for <code>changeVisibility</code> event on master container.
+     * @param evt {qx.event.type.Data} the change event.
+     */
+    _onMasterChangeVisibility(evt) {
+      var isMasterVisible = "visible" === evt.getData();
 
       if (qx.bom.Viewport.isLandscape()) {
         if (this.isAllowMasterHideOnLandscape()) {
@@ -457,11 +459,10 @@ qx.Class.define("qx.ui.mobile.page.Manager",
       }
     },
 
-
     /**
-    * Called when layout of masterDetailContainer changes.
-    */
-    _onLayoutChange : function() {
+     * Called when layout of masterDetailContainer changes.
+     */
+    _onLayoutChange() {
       if (this.__isTablet) {
         if (qx.bom.Viewport.isLandscape()) {
           this.__masterContainer.setHideOnParentTap(false);
@@ -479,91 +480,116 @@ qx.Class.define("qx.ui.mobile.page.Manager",
       }
     },
 
-
     /**
-    * Returns the corresponding CSS property key which fits to the drawer's orientation.
-    * @return {String} the CSS property key.
-    */
-    _getGapPropertyKey : function() {
-      return "padding"+ qx.lang.String.capitalize(this.__masterContainer.getOrientation());
+     * Returns the corresponding CSS property key which fits to the drawer's orientation.
+     * @return {String} the CSS property key.
+     */
+    _getGapPropertyKey() {
+      return (
+        "padding" +
+        qx.lang.String.capitalize(this.__masterContainer.getOrientation())
+      );
     },
 
-
     /**
      * Moves detailContainer to the right edge of MasterContainer.
      * Creates spaces for aligning master and detail container aside each other.
      */
-    _createDetailContainerGap : function() {
-      qx.bom.element.Style.set(this.__detailContainer.getContainerElement(), this._getGapPropertyKey(), this.__masterContainer.getSize() / 16 + "rem");
+    _createDetailContainerGap() {
+      qx.bom.element.Style.set(
+        this.__detailContainer.getContainerElement(),
+        this._getGapPropertyKey(),
+        this.__masterContainer.getSize() / 16 + "rem"
+      );
+
       qx.event.Registration.fireEvent(window, "resize");
     },
 
-
     /**
      * Moves detailContainer to the left edge of viewport.
      */
-    _removeDetailContainerGap : function() {
-      qx.bom.element.Style.set(this.__detailContainer.getContainerElement(), this._getGapPropertyKey(), null);
+    _removeDetailContainerGap() {
+      qx.bom.element.Style.set(
+        this.__detailContainer.getContainerElement(),
+        this._getGapPropertyKey(),
+        null
+      );
+
       qx.event.Registration.fireEvent(window, "resize");
     },
 
-
     /**
-    * Called on property changes of hideMasterButtonCaption.
-    * @param value {String} new caption
-    * @param old {String} previous caption
-    */
-    _applyHideMasterButtonCaption : function(value, old) {
-      if(this.__isTablet) {
+     * Called on property changes of hideMasterButtonCaption.
+     * @param value {String} new caption
+     * @param old {String} previous caption
+     */
+    _applyHideMasterButtonCaption(value, old) {
+      if (this.__isTablet) {
         this.__hideMasterButton.setLabel(value);
       }
     },
 
-
     /**
-    * Called on property changes of masterTitle.
-    * @param value {String} new title
-    * @param old {String} previous title
-    */
-    _applyMasterTitle : function(value, old) {
-      if(this.__isTablet) {
+     * Called on property changes of masterTitle.
+     * @param value {String} new title
+     * @param old {String} previous title
+     */
+    _applyMasterTitle(value, old) {
+      if (this.__isTablet) {
         this.__masterButton.setLabel(value);
       }
     }
   },
 
-
   /*
   *****************************************************************************
      DESTRUCTOR
   *****************************************************************************
   */
 
-  destruct : function()
-  {
-    if(this.__masterPages) {
-      for(var i = 0; i < this.__masterPages.length; i++) {
+  destruct() {
+    if (this.__masterPages) {
+      for (var i = 0; i < this.__masterPages.length; i++) {
         var masterPage = this.__masterPages[i];
 
         masterPage.removeListener("start", this._onMasterPageStart, this);
       }
     }
-    if(this.___detailPages) {
-      for(var j = 0; j < this.___detailPages.length; j++) {
+    if (this.___detailPages) {
+      for (var j = 0; j < this.___detailPages.length; j++) {
         var detailPage = this.___detailPages[j];
 
         detailPage.removeListener("start", this._onDetailPageStart, this);
       }
     }
 
-    if(this.__isTablet) {
-      this.__masterContainer.removeListener("changeVisibility", this._onMasterChangeVisibility, this);
-      this.__masterContainer.removeListener("resize", this._onLayoutChange, this);
-      qx.event.Registration.removeListener(window, "orientationchange", this._onLayoutChange, this);
+    if (this.__isTablet) {
+      this.__masterContainer.removeListener(
+        "changeVisibility",
+        this._onMasterChangeVisibility,
+        this
+      );
+
+      this.__masterContainer.removeListener(
+        "resize",
+        this._onLayoutChange,
+        this
+      );
+
+      qx.event.Registration.removeListener(
+        window,
+        "orientationchange",
+        this._onLayoutChange,
+        this
+      );
     }
 
-    this.__masterPages = this.__detailPages =  null;
+    this.__masterPages = this.__detailPages = null;
 
-    this._disposeObjects("__detailNavigation", "__masterNavigation", "__masterButton");
+    this._disposeObjects(
+      "__detailNavigation",
+      "__masterNavigation",
+      "__masterButton"
+    );
   }
 });