EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2431 tabs: Fix calculate number of core-tabs

main
Dani Palou 2018-06-22 11:32:58 +02:00
parent 668c36cd43
commit 9dcde15871
10 changed files with 188 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/addon/messages/pages/index/index.ts
View File

@ -18,6 +18,7 @@ import { CoreEventsProvider } from '@providers/events';
import { CoreSitesProvider } from '@providers/sites';
import { AddonMessagesProvider } from '../../providers/messages';
import { CoreSplitViewComponent } from '@components/split-view/split-view';
import { CoreTabsComponent } from '@components/tabs/tabs';
/**
* Page that displays the messages index page.
@ -29,6 +30,7 @@ import { CoreSplitViewComponent } from '@components/split-view/split-view';
})
export class AddonMessagesIndexPage implements OnDestroy {
@ViewChild(CoreSplitViewComponent) splitviewCtrl: CoreSplitViewComponent;
@ViewChild(CoreTabsComponent) tabsComponent: CoreTabsComponent;
protected loadSplitViewObserver: any;
protected siteId: string;
@ -61,6 +63,20 @@ export class AddonMessagesIndexPage implements OnDestroy {
this.splitviewCtrl.push('AddonMessagesDiscussionPage', params);
}
/**
* User entered the page.
*/
ionViewDidEnter(): void {
this.tabsComponent && this.tabsComponent.ionViewDidEnter();
}
/**
* User left the page.
*/
ionViewDidLeave(): void {
this.tabsComponent && this.tabsComponent.ionViewDidLeave();
}
/**
* Page destroyed.
*/

18
src/addon/mod/assign/components/index/index.ts
View File

@ -273,6 +273,24 @@ export class AddonModAssignIndexComponent extends CoreCourseModuleMainActivityCo
});
}
/**
* User entered the page that contains the component.
*/
ionViewDidEnter(): void {
super.ionViewDidEnter();
this.submissionComponent && this.submissionComponent.ionViewDidEnter();
}
/**
* User left the page that contains the component.
*/
ionViewDidLeave(): void {
super.ionViewDidLeave();
this.submissionComponent && this.submissionComponent.ionViewDidLeave();
}
/**
* Compares sync event data with current data to check if refresh content is needed.
*

14
src/addon/mod/assign/components/submission/submission.ts
View File

@ -313,6 +313,20 @@ export class AddonModAssignSubmissionComponent implements OnInit, OnDestroy {
return Promise.resolve(false);
}
/**
* User entered the page that contains the component.
*/
ionViewDidEnter(): void {
this.tabs && this.tabs.ionViewDidEnter();
}
/**
* User left the page that contains the component.
*/
ionViewDidLeave(): void {
this.tabs && this.tabs.ionViewDidLeave();
}
/**
* Invalidate and refresh data.
*

14
src/addon/mod/assign/pages/submission-review/submission-review.ts
View File

@ -76,6 +76,20 @@ export class AddonModAssignSubmissionReviewPage implements OnInit {
return this.submissionComponent.canLeave();
}
/**
* User entered the page.
*/
ionViewDidEnter(): void {
this.submissionComponent && this.submissionComponent.ionViewDidEnter();
}
/**
* User left the page.
*/
ionViewDidLeave(): void {
this.submissionComponent && this.submissionComponent.ionViewDidLeave();
}
/**
* Get the submission.
*

23
src/addon/mod/feedback/components/index/index.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Optional, Injector } from '@angular/core';
import { Component, Input, Optional, Injector, ViewChild } from '@angular/core';
import { Content, NavController } from 'ionic-angular';
import { CoreGroupInfo, CoreGroupsProvider } from '@providers/groups';
import { CoreCourseModuleMainActivityComponent } from '@core/course/classes/main-activity-component';
@ -21,6 +21,7 @@ import { AddonModFeedbackHelperProvider } from '../../providers/helper';
import { AddonModFeedbackOfflineProvider } from '../../providers/offline';
import { AddonModFeedbackSyncProvider } from '../../providers/sync';
import * as moment from 'moment';
import { CoreTabsComponent } from '@components/tabs/tabs';
/**
* Component that displays a feedback index page.
@ -30,6 +31,8 @@ import * as moment from 'moment';
templateUrl: 'addon-mod-feedback-index.html',
})
export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivityComponent {
@ViewChild(CoreTabsComponent) tabsComponent: CoreTabsComponent;
@Input() tab = 'overview';
@Input() group = 0;
@ -348,6 +351,24 @@ export class AddonModFeedbackIndexComponent extends CoreCourseModuleMainActivity
this.navCtrl.push('AddonModFeedbackFormPage', stateParams);
}
/**
* User entered the page that contains the component.
*/
ionViewDidEnter(): void {
super.ionViewDidEnter();
this.tabsComponent && this.tabsComponent.ionViewDidEnter();
}
/**
* User left the page that contains the component.
*/
ionViewDidLeave(): void {
super.ionViewDidLeave();
this.tabsComponent && this.tabsComponent.ionViewDidLeave();
}
/**
* Function to link implemented features.
*

9
src/addon/mod/lesson/components/index/index.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Optional, Injector, Input } from '@angular/core';
import { Component, Optional, Injector, Input, ViewChild } from '@angular/core';
import { Content, NavController } from 'ionic-angular';
import { CoreGroupsProvider, CoreGroupInfo } from '@providers/groups';
import { CoreTimeUtilsProvider } from '@providers/utils/time';
@ -24,6 +24,7 @@ import { AddonModLessonOfflineProvider } from '../../providers/lesson-offline';
import { AddonModLessonSyncProvider } from '../../providers/lesson-sync';
import { AddonModLessonPrefetchHandler } from '../../providers/prefetch-handler';
import { CoreConstants } from '@core/constants';
import { CoreTabsComponent } from '@components/tabs/tabs';
/**
* Component that displays a lesson entry page.
@ -33,6 +34,8 @@ import { CoreConstants } from '@core/constants';
templateUrl: 'addon-mod-lesson-index.html',
})
export class AddonModLessonIndexComponent extends CoreCourseModuleMainActivityComponent {
@ViewChild(CoreTabsComponent) tabsComponent: CoreTabsComponent;
@Input() group: number; // The group to display.
@Input() action: string; // The "action" to display first.
@ -226,6 +229,8 @@ export class AddonModLessonIndexComponent extends CoreCourseModuleMainActivityCo
ionViewDidEnter(): void {
super.ionViewDidEnter();
this.tabsComponent && this.tabsComponent.ionViewDidEnter();
// Update data when we come back from the player since the status could have changed.
if (this.hasPlayed) {
this.hasPlayed = false;
@ -240,6 +245,8 @@ export class AddonModLessonIndexComponent extends CoreCourseModuleMainActivityCo
ionViewDidLeave(): void {
super.ionViewDidLeave();
this.tabsComponent && this.tabsComponent.ionViewDidLeave();
if (this.navCtrl.getActive().component.name == 'AddonModLessonPlayerPage') {
this.hasPlayed = true;
}

4
src/addon/mod/wiki/components/index/index.ts
View File

@ -735,6 +735,8 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
ionViewDidEnter(): void {
super.ionViewDidEnter();
this.tabs && this.tabs.ionViewDidEnter();
if (this.hasEdited) {
this.hasEdited = false;
this.showLoadingAndRefresh(true, false);
@ -747,6 +749,8 @@ export class AddonModWikiIndexComponent extends CoreCourseModuleMainActivityComp
ionViewDidLeave(): void {
super.ionViewDidLeave();
this.tabs && this.tabs.ionViewDidLeave();
if (this.navCtrl.getActive().component.name == 'AddonModWikiEditPage') {
this.hasEdited = true;
}

88
src/components/tabs/tabs.ts
View File

@ -13,11 +13,12 @@
// limitations under the License.
import {
Component, Input, Output, EventEmitter, OnInit, OnChanges, AfterViewInit, ViewChild, ElementRef,
Component, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy, AfterViewInit, ViewChild, ElementRef,
SimpleChange
} from '@angular/core';
import { CoreTabComponent } from './tab';
import { Content, Slides } from 'ionic-angular';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
/**
* This component displays some tabs that usually share data between them.
@ -41,7 +42,7 @@ import { Content, Slides } from 'ionic-angular';
selector: 'core-tabs',
templateUrl: 'core-tabs.html'
})
export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
@Input() selectedIndex = 0; // Index of the tab to select.
@Input() hideUntil = true; // Determine when should the contents be shown.
@Input() parentScrollable = false; // Determine if the scroll should be in the parent content or the tab itself.
@ -66,8 +67,11 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
protected tabBarHeight;
protected tabBarElement: HTMLElement; // Host element.
protected tabsShown = true;
protected resizeFunction;
protected isDestroyed = false;
protected isCurrentView = true;
constructor(element: ElementRef, protected content: Content) {
constructor(element: ElementRef, protected content: Content, protected domUtils: CoreDomUtilsProvider) {
this.tabBarElement = element.nativeElement;
}
@ -83,6 +87,10 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
* View has been initialized.
*/
ngAfterViewInit(): void {
if (this.isDestroyed) {
return;
}
this.afterViewInitTriggered = true;
if (!this.initialized && this.hideUntil) {
@ -90,10 +98,9 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
this.initializeTabs();
}
window.addEventListener('resize', () => {
this.calculateMaxSlides();
this.updateSlides();
});
this.resizeFunction = this.calculateSlides.bind(this);
window.addEventListener('resize', this.resizeFunction);
}
/**
@ -110,6 +117,24 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
}
}
/**
* User entered the page that contains the component.
*/
ionViewDidEnter(): void {
this.isCurrentView = true;
if (this.initialized) {
this.calculateSlides();
}
}
/**
* User left the page that contains the component.
*/
ionViewDidLeave(): void {
this.isCurrentView = false;
}
/**
* Add a new tab if it isn't already in the list of tabs.
*
@ -120,7 +145,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
if (this.getIndex(tab) == -1) {
this.tabs.push(tab);
this.sortTabs();
this.updateSlides();
this.calculateSlides();
if (this.initialized && this.tabs.length > 1 && this.tabBarHeight == 0) {
// Calculate the tabBarHeight again now that there is more than 1 tab and the bar will be seen.
@ -132,6 +157,21 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
}
}
/**
* Calculate slides.
*/
calculateSlides(): void {
if (!this.isCurrentView || !this.tabsShown) {
// Don't calculate if component isn't in current view, the calculations are wrong.
return;
}
setTimeout(() => {
this.calculateMaxSlides();
this.updateSlides();
});
}
/**
* Calculate the tab bar height.
*/
@ -204,9 +244,8 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
}
}
// Check which arrows should be shown
this.calculateMaxSlides();
this.updateSlides();
// Check which arrows should be shown.
this.calculateSlides();
this.initialized = true;
}
@ -247,11 +286,16 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
}
protected calculateMaxSlides(): void {
if (this.slides && this.slides.renderedWidth) {
this.maxSlides = Math.floor(this.slides.renderedWidth / 120);
if (this.slides) {
const width = this.domUtils.getElementWidth(this.slides.getNativeElement()) || this.slides.renderedWidth;
return;
if (width) {
this.maxSlides = Math.floor(width / 120);
return;
}
}
this.maxSlides = 3;
}
@ -290,6 +334,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
} else if (!this.tabsShown && e.target.scrollTop < this.tabBarHeight) {
this.tabBarElement.classList.remove('tabs-hidden');
this.tabsShown = true;
this.calculateSlides();
}
}
@ -302,7 +347,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
const index = this.getIndex(tab);
this.tabs.splice(index, 1);
this.updateSlides();
this.calculateSlides();
}
/**
@ -365,6 +410,17 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
* Function to call when the visibility of a tab has changed.
*/
tabVisibilityChanged(): void {
this.updateSlides();
this.calculateSlides();
}
/**
* Component destroyed.
*/
ngOnDestroy(): void {
this.isDestroyed = true;
if (this.resizeFunction) {
window.removeEventListener('resize', this.resizeFunction);
}
}
}

4
src/core/course/pages/section/section.ts
View File

@ -26,6 +26,7 @@ import { CoreCourseModulePrefetchDelegate } from '../../providers/module-prefetc
import { CoreCourseOptionsDelegate, CoreCourseOptionsHandlerToDisplay } from '../../providers/options-delegate';
import { CoreCourseFormatComponent } from '../../components/format/format';
import { CoreCoursesProvider } from '@core/courses/providers/courses';
import { CoreTabsComponent } from '@components/tabs/tabs';
/**
* Page that displays the list of courses the user is enrolled in.
@ -38,6 +39,7 @@ import { CoreCoursesProvider } from '@core/courses/providers/courses';
export class CoreCourseSectionPage implements OnDestroy {
@ViewChild(Content) content: Content;
@ViewChild(CoreCourseFormatComponent) formatComponent: CoreCourseFormatComponent;
@ViewChild(CoreTabsComponent) tabsComponent: CoreTabsComponent;
title: string;
course: any;
@ -378,6 +380,7 @@ export class CoreCourseSectionPage implements OnDestroy {
*/
ionViewDidEnter(): void {
this.formatComponent && this.formatComponent.ionViewDidEnter();
this.tabsComponent && this.tabsComponent.ionViewDidEnter();
}
/**
@ -385,5 +388,6 @@ export class CoreCourseSectionPage implements OnDestroy {
*/
ionViewDidLeave(): void {
this.formatComponent && this.formatComponent.ionViewDidLeave();
this.tabsComponent && this.tabsComponent.ionViewDidLeave();
}
}

16
src/core/courses/pages/my-overview/my-overview.ts
View File

@ -24,6 +24,7 @@ import { CoreCourseHelperProvider } from '@core/course/providers/helper';
import { CoreCourseOptionsDelegate } from '@core/course/providers/options-delegate';
import { CoreSiteHomeProvider } from '@core/sitehome/providers/sitehome';
import * as moment from 'moment';
import { CoreTabsComponent } from '@components/tabs/tabs';
/**
* Page that displays My Overview.
@ -34,6 +35,7 @@ import * as moment from 'moment';
templateUrl: 'my-overview.html',
})
export class CoreCoursesMyOverviewPage implements OnDestroy {
@ViewChild(CoreTabsComponent) tabsComponent: CoreTabsComponent;
@ViewChild('searchbar') searchbar: Searchbar;
firstSelectedTab: number;
@ -113,6 +115,20 @@ export class CoreCoursesMyOverviewPage implements OnDestroy {
});
}
/**
* User entered the page.
*/
ionViewDidEnter(): void {
this.tabsComponent && this.tabsComponent.ionViewDidEnter();
}
/**
* User left the page.
*/
ionViewDidLeave(): void {
this.tabsComponent && this.tabsComponent.ionViewDidLeave();
}
/**
* Fetch the timeline.
*