MOBILE-2886 scorm: Hide bottom bar when showing as a popup

src/addon/mod/scorm/pages/player/player.ts

@@ -19,6 +19,7 @@ import { CoreSitesProvider } from '@providers/sites';
 import { CoreSyncProvider } from '@providers/sync';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTimeUtilsProvider } from '@providers/utils/time';
+import { CoreIonTabsComponent } from '@components/ion-tabs/ion-tabs';
 import { AddonModScormProvider, AddonModScormAttemptCountResult } from '../../providers/scorm';
 import { AddonModScormHelperProvider } from '../../providers/helper';
 import { AddonModScormSyncProvider } from '../../providers/scorm-sync';
@@ -68,7 +69,7 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
             protected sitesProvider: CoreSitesProvider, protected syncProvider: CoreSyncProvider,
             protected domUtils: CoreDomUtilsProvider, protected timeUtils: CoreTimeUtilsProvider,
             protected scormProvider: AddonModScormProvider, protected scormHelper: AddonModScormHelperProvider,
-            protected scormSyncProvider: AddonModScormSyncProvider) {
+            protected scormSyncProvider: AddonModScormSyncProvider, protected tabs: CoreIonTabsComponent) {
 
         this.scorm = navParams.get('scorm') || {};
         this.mode = navParams.get('mode') || AddonModScormProvider.MODENORMAL;
@@ -92,6 +93,8 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
         this.showToc = this.scormProvider.displayTocInPlayer(this.scorm);
 
         if (this.scorm.popup) {
+            this.tabs.changeVisibility(false);
+
             // If we receive a value <= 100 we need to assume it's a percentage.
             if (this.scorm.width <= 100) {
                 this.scorm.width = this.scorm.width + '%';
@@ -448,5 +451,6 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
 
         // Unblock the SCORM so it can be synced.
         this.syncProvider.unblockOperation(AddonModScormProvider.COMPONENT, this.scorm.id, 'player');
+        this.tabs.changeVisibility(true);
     }
 }

src/components/ion-tabs/core-ion-tabs.html

@@ -1,4 +1,4 @@
-<div class="tabbar" role="tablist" #tabbar>
+<div class="tabbar" role="tablist" #tabbar [hidden]="hidden">
     <a [hidden]="_loaded === false" *ngFor="let t of _tabs" [tab]="t" class="tab-button" role="tab" href="#" (ionSelect)="select(t)"></a>
     <div class="tab-highlight"></div>
     <div *ngIf="_loaded === false" class="core-ion-tabs-loading">

src/components/ion-tabs/ion-tabs.ts

@@ -53,6 +53,7 @@ export class CoreIonTabsComponent extends Tabs implements OnDestroy {
     @ViewChild('originalTabs') originalTabsRef: ElementRef;
 
     _loaded: boolean; // Whether tabs have been loaded.
+    hidden = false; // Whether to show/hide tabs.
 
     /**
      * List of tabs that haven't been initialized yet. This is required because IonTab calls add() on the constructor,
@@ -325,6 +326,22 @@ export class CoreIonTabsComponent extends Tabs implements OnDestroy {
         }
     }
 
+    /**
+     * Change tabs visibility to show/hide them from the view.
+     *
+     * @param {boolean} visible If show or hide the tabs.
+     */
+    changeVisibility(visible: boolean): void {
+        if (this.hidden == visible) {
+            // Change needed.
+            this.hidden = !visible;
+
+            setTimeout(() => {
+                this.viewCtrl.getContent().resize();
+            });
+        }
+    }
+
     /**
      * Component destroyed.
      */