-
-
-
-
-
-
-
-
+
+
+ {{ 'I18N_TEACH_PAGE_FEATURES_SECTION_TITLE' | translate }}
+
+
+
+
![Illustration of first bullet point]()
+
+ {{ 'I18N_TEACH_BENEFITS_ONE' | translate }}
+
+
+
+
![Illustration of second bullet point]()
+
+ {{ 'I18N_TEACH_BENEFITS_TWO' | translate }}
+
+
+
+
![Illustration of third bullet point]()
+
+ {{ 'I18N_TEACH_BENEFITS_THREE' | translate }}
+
-
-
-
-
-
-
-
-
+
+
+ {{ 'I18N_TEACH_PAGE_ACTION_START_LEARNING' | translate }}
+
+
+
+
+
+
-
-
-
+
diff --git a/core/templates/pages/teach-page/teach-page.component.spec.ts b/core/templates/pages/teach-page/teach-page.component.spec.ts
index fc641b0963ed..472cc43a6389 100644
--- a/core/templates/pages/teach-page/teach-page.component.spec.ts
+++ b/core/templates/pages/teach-page/teach-page.component.spec.ts
@@ -15,7 +15,7 @@
/**
* @fileoverview Unit tests for the teach page.
*/
-import {EventEmitter} from '@angular/core';
+import {EventEmitter, NO_ERRORS_SCHEMA, Renderer2} from '@angular/core';
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
import {I18nLanguageCodeService} from 'services/i18n-language-code.service';
@@ -59,6 +59,10 @@ class MockI18nLanguageCodeService {
return 'en';
}
+ isCurrentLanguageRTL() {
+ return false;
+ }
+
get onI18nLanguageCodeChange() {
return this.codeChangeEventEmiiter;
}
@@ -71,6 +75,9 @@ describe('Teach Page', () => {
let windowDimensionsService: WindowDimensionsService;
let windowRef: MockWindowRef;
let resizeEvent = new Event('resize');
+ let i18nLanguageCodeService: I18nLanguageCodeService;
+ let renderer: Renderer2;
+
beforeEach(async () => {
windowRef = new MockWindowRef();
TestBed.configureTestingModule({
@@ -89,11 +96,13 @@ describe('Teach Page', () => {
useValue: {
isWindowNarrow: () => true,
getResizeEvent: () => of(resizeEvent),
+ getWidth: () => 0,
},
},
SiteAnalyticsService,
UrlInterpolationService,
],
+ schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();
});
beforeEach(angular.mock.module('oppia'));
@@ -106,12 +115,23 @@ describe('Teach Page', () => {
userService = TestBed.get(UserService);
windowDimensionsService = TestBed.get(WindowDimensionsService);
siteAnalyticsService = TestBed.inject(SiteAnalyticsService);
+ i18nLanguageCodeService = TestBed.inject(I18nLanguageCodeService);
});
let component: TeachPageComponent;
beforeEach(() => {
let teachPageComponent = TestBed.createComponent(TeachPageComponent);
component = teachPageComponent.componentInstance;
+ component.creatorsCarouselContainer = {
+ nativeElement: {
+ clientWidth: 500,
+ scrollLeft: 0,
+ scrollWidth: 1000,
+ addEventListener: (event: string, callback: () => void) => {},
+ removeEventListener: (event: string, callback: () => void) => {},
+ },
+ };
+ renderer = teachPageComponent.componentRef.injector.get(Renderer2);
});
it('should successfully instantiate the component from beforeEach block', () => {
@@ -126,7 +146,6 @@ describe('Teach Page', () => {
it('should set component properties when ngOnInit() is called', () => {
component.ngOnInit();
expect(component.displayedTestimonialId).toBe(0);
- expect(component.testimonialCount).toBe(3);
expect(component.classroomUrl).toBe('/learn/math');
spyOn(windowDimensionsService, 'isWindowNarrow').and.callThrough;
expect(windowDimensionsService.isWindowNarrow()).toHaveBeenCalled;
@@ -242,33 +261,255 @@ describe('Teach Page', () => {
).toHaveBeenCalled();
});
- it('should increment and decrement testimonial IDs correctly', () => {
+ it('should direct users to the android page on click', function () {
+ expect(windowRef.nativeWindow.location.href).not.toEqual('/android');
+
+ component.onClickAccessAndroidButton();
+
+ expect(windowRef.nativeWindow.location.href).toEqual('/android');
+ });
+
+ it('should set screen type to mobile when window width is less than or equal to 360', () => {
+ spyOn(windowDimensionsService, 'getWidth').and.returnValue(360);
+ component.setScreenType();
+ expect(component.screenType).toEqual('mobile');
+ });
+
+ it('should set screen type to tablet when window width is between 361 and 768', () => {
+ spyOn(windowDimensionsService, 'getWidth').and.returnValue(765);
+ component.setScreenType();
+ expect(component.screenType).toEqual('tablet');
+ });
+
+ it('should set screen type to desktop when window width is greater than 768', () => {
+ spyOn(windowDimensionsService, 'getWidth').and.returnValue(1280);
+ component.setScreenType();
+ expect(component.screenType).toEqual('desktop');
+ });
+
+ it('should not change arrows disabled status when screen type is desktop', () => {
+ component.screenType = 'desktop';
+ const initialLeftArrowStatus =
+ component.creatorsCarouselLeftArrowIsDisabled;
+ const initialRightArrowStatus =
+ component.creatorsCarouselRightArrowIsDisabled;
+ component.toggleCreatorsCarouselArrowsDisablityStatusMobile();
+ expect(component.creatorsCarouselLeftArrowIsDisabled).toEqual(
+ initialLeftArrowStatus
+ );
+ expect(component.creatorsCarouselRightArrowIsDisabled).toEqual(
+ initialRightArrowStatus
+ );
+ });
+
+ it(
+ 'should Creators Carousel arrows disablity Status correctly, ' +
+ 'when active slide index is 0 & screen is not desktop',
+ () => {
+ component.screenType = 'mobile';
+ component.activeCreatorsSlideIndex = 0;
+ component.toggleCreatorsCarouselArrowsDisablityStatusMobile();
+ expect(component.creatorsCarouselLeftArrowIsDisabled).toBeTrue();
+ expect(component.creatorsCarouselRightArrowIsDisabled).toBeFalse();
+ }
+ );
+
+ it(
+ 'should Creators Carousel arrows disablity Status correctly, ' +
+ 'when active slide index is last & screen is not desktop',
+ () => {
+ component.screenType = 'mobile';
+ component.activeCreatorsSlideIndex =
+ component.creatorsIndicesObject.mobile.length - 1;
+ component.toggleCreatorsCarouselArrowsDisablityStatusMobile();
+ expect(component.creatorsCarouselLeftArrowIsDisabled).toBeFalse();
+ expect(component.creatorsCarouselRightArrowIsDisabled).toBeTrue();
+ }
+ );
+
+ it('should disable left arrow when scroll position is at start and screen is desktop', () => {
+ component.screenType = 'desktop';
+ component.toggleCreatorsCarouselArrowsDisablityStatusDesktop();
+ expect(component.creatorsCarouselLeftArrowIsDisabled).toBeTrue();
+ });
+
+ it('should disable right arrow when scroll position is at end and screen is desktop', () => {
+ component.screenType = 'desktop';
+ component.creatorsCarouselContainer.nativeElement.scrollLeft = 500;
+ component.toggleCreatorsCarouselArrowsDisablityStatusDesktop();
+ expect(component.creatorsCarouselRightArrowIsDisabled).toBeTrue();
+ });
+
+ it('should not change arrows disabled status when screen type is not desktop', () => {
+ component.screenType = 'mobile';
+ const initialLeftArrowStatus =
+ component.creatorsCarouselLeftArrowIsDisabled;
+ const initialRightArrowStatus =
+ component.creatorsCarouselRightArrowIsDisabled;
+ component.toggleCreatorsCarouselArrowsDisablityStatusDesktop();
+ expect(component.creatorsCarouselLeftArrowIsDisabled).toEqual(
+ initialLeftArrowStatus
+ );
+ expect(component.creatorsCarouselRightArrowIsDisabled).toEqual(
+ initialRightArrowStatus
+ );
+ });
+
+ it('should set scrollLeft to 0 for desktop', () => {
component.ngOnInit();
- expect(component.displayedTestimonialId).toBe(0);
- component.incrementDisplayedTestimonialId();
- expect(component.displayedTestimonialId).toBe(1);
- component.incrementDisplayedTestimonialId();
- // Add back after testimonials are complete.
- // component.incrementDisplayedTestimonialId();
- component.incrementDisplayedTestimonialId();
- expect(component.displayedTestimonialId).toBe(0);
+ component.ngAfterViewInit();
+ component.screenType = 'desktop';
+ spyOn(renderer, 'setProperty');
+ component.showPreviousCreators();
+ expect(renderer.setProperty).toHaveBeenCalledWith(
+ jasmine.any(Object),
+ 'scrollLeft',
+ 0
+ );
+ expect(component.toggleCreatorsCarouselArrowsDisablityStatusDesktop)
+ .toHaveBeenCalled;
+ });
- component.decrementDisplayedTestimonialId();
- expect(component.displayedTestimonialId).toBe(2);
- component.decrementDisplayedTestimonialId();
- expect(component.displayedTestimonialId).toBe(1);
+ it('should decrement activeCreatorsSlideIndex when screenType is not desktop and index is not 0', () => {
+ component.ngOnInit();
+ component.ngAfterViewInit();
+ component.screenType = 'mobile';
+ component.activeCreatorsSlideIndex = 1;
+ component.showPreviousCreators();
+ expect(component.activeCreatorsSlideIndex).toBe(0);
+ expect(component.setActiveCreatorsIndices).toHaveBeenCalled;
+ expect(component.toggleCreatorsCarouselArrowsDisablityStatusMobile)
+ .toHaveBeenCalled;
});
- it('should get testimonials correctly', () => {
+ it('should not decrement activeCreatorsSlideIndex when screenType is not desktop and index is 0', () => {
component.ngOnInit();
- expect(component.getTestimonials().length).toBe(component.testimonialCount);
+ component.ngAfterViewInit();
+ component.screenType = 'mobile';
+ component.activeCreatorsSlideIndex = 0;
+ component.showPreviousCreators();
+ expect(component.activeCreatorsSlideIndex).toBe(0);
+ expect(component.setActiveCreatorsIndices).not.toHaveBeenCalled;
+ expect(component.toggleCreatorsCarouselArrowsDisablityStatusMobile).not
+ .toHaveBeenCalled;
});
- it('should direct users to the android page on click', function () {
- expect(windowRef.nativeWindow.location.href).not.toEqual('/android');
+ it('should set scrollLeft to scroll width for desktop for non RTL screen', () => {
+ component.ngOnInit();
+ component.ngAfterViewInit();
+ component.screenType = 'desktop';
+ spyOn(i18nLanguageCodeService, 'isCurrentLanguageRTL').and.returnValue(
+ false
+ );
+ spyOn(renderer, 'setProperty');
+ component.showNextCreators();
+ expect(renderer.setProperty).toHaveBeenCalledWith(
+ jasmine.any(Object),
+ 'scrollLeft',
+ component.creatorsCarouselContainer.nativeElement.scrollWidth
+ );
+ expect(component.toggleCreatorsCarouselArrowsDisablityStatusDesktop)
+ .toHaveBeenCalled;
+ });
- component.onClickAccessAndroidButton();
+ it('should set scrollLeft to (-ve) of scroll width for desktop for RTL screen', () => {
+ component.ngOnInit();
+ component.ngAfterViewInit();
+ component.screenType = 'desktop';
+ spyOn(i18nLanguageCodeService, 'isCurrentLanguageRTL').and.returnValue(
+ true
+ );
+ spyOn(renderer, 'setProperty');
+ component.showNextCreators();
+ expect(renderer.setProperty).toHaveBeenCalledWith(
+ jasmine.any(Object),
+ 'scrollLeft',
+ -component.creatorsCarouselContainer.nativeElement.scrollWidth
+ );
+ expect(component.toggleCreatorsCarouselArrowsDisablityStatusDesktop)
+ .toHaveBeenCalled;
+ });
- expect(windowRef.nativeWindow.location.href).toEqual('/android');
+ it('should increment activeCreatorsSlideIndex when screenType is not desktop and index is less than length', () => {
+ component.ngOnInit();
+ component.ngAfterViewInit();
+ component.screenType = 'mobile';
+ component.activeCreatorsSlideIndex = 0;
+ component.showNextCreators();
+ expect(component.activeCreatorsSlideIndex).toBe(1);
+ expect(component.setActiveCreatorsIndices).toHaveBeenCalled;
+ expect(component.toggleCreatorsCarouselArrowsDisablityStatusMobile)
+ .toHaveBeenCalled;
+ });
+
+ it('should not decrement activeCreatorsSlideIndex when screenType is not desktop and index is 0', () => {
+ component.ngOnInit();
+ component.ngAfterViewInit();
+ component.screenType = 'mobile';
+ const lastIndex = component.creatorsIndicesObject.mobile.length - 1;
+ component.activeCreatorsSlideIndex = lastIndex;
+ component.showNextCreators();
+ expect(component.activeCreatorsSlideIndex).toBe(lastIndex);
+ expect(component.setActiveCreatorsIndices).not.toHaveBeenCalled;
+ expect(component.toggleCreatorsCarouselArrowsDisablityStatusMobile).not
+ .toHaveBeenCalled;
+ });
+
+ it('should set activeCreatorsIndices for mobile screen type', () => {
+ component.screenType = 'tablet';
+ component.activeCreatorsSlideIndex = 0;
+ component.setActiveCreatorsIndices();
+ expect(component.activeCreatorsIndices).toEqual([0, 1, 2]);
+ });
+
+ it('should set activeCreatorsIndices for desktop screen type', () => {
+ component.screenType = 'mobile';
+ component.activeCreatorsSlideIndex = 1;
+ component.setActiveCreatorsIndices();
+ expect(component.activeCreatorsIndices).toEqual([2, 3]);
+ });
+
+ it('should move the correct testimonials carousel to the previous slide', () => {
+ component.testimonialsCarousel = jasmine.createSpyObj('NgbCarousel', [
+ 'prev',
+ ]);
+
+ component.moveTestimonialCarouselToPreviousSlide();
+ expect(component.testimonialsCarousel.prev).toHaveBeenCalled();
+ });
+
+ it('should move the correct testimonials carousel to the next slide', () => {
+ component.testimonialsCarousel = jasmine.createSpyObj('NgbCarousel', [
+ 'next',
+ ]);
+
+ component.moveTestimonialCarouselToNextSlide();
+ expect(component.testimonialsCarousel.next).toHaveBeenCalled();
+ });
+
+ it('should get the correct RTL status if the current language is RTL', () => {
+ spyOn(i18nLanguageCodeService, 'isCurrentLanguageRTL').and.returnValue(
+ true
+ );
+ expect(component.isLanguageRTL()).toBeTrue();
+ });
+
+ it('should get the correct RTL status if the current language is not RTL', () => {
+ spyOn(i18nLanguageCodeService, 'isCurrentLanguageRTL').and.returnValue(
+ false
+ );
+ expect(component.isLanguageRTL()).toBeFalse();
+ });
+
+ it('should unsubscribe on component destruction', () => {
+ component.directiveSubscriptions.add(
+ windowDimensionsService.getResizeEvent().subscribe(() => {
+ component.setScreenType();
+ })
+ );
+
+ component.ngOnDestroy();
+
+ expect(component.directiveSubscriptions.closed).toBe(true);
});
});
diff --git a/core/templates/pages/teach-page/teach-page.component.ts b/core/templates/pages/teach-page/teach-page.component.ts
index 847e16a09d2d..3397f719cffa 100644
--- a/core/templates/pages/teach-page/teach-page.component.ts
+++ b/core/templates/pages/teach-page/teach-page.component.ts
@@ -15,7 +15,15 @@
/**
* @fileoverview Component for the teach page.
*/
-import {Component, OnInit} from '@angular/core';
+import {
+ AfterViewInit,
+ Component,
+ ElementRef,
+ OnDestroy,
+ OnInit,
+ Renderer2,
+ ViewChild,
+} from '@angular/core';
import {downgradeComponent} from '@angular/upgrade/static';
import {AppConstants} from 'app.constants';
@@ -25,50 +33,129 @@ import {SiteAnalyticsService} from 'services/site-analytics.service';
import {WindowDimensionsService} from 'services/contextual/window-dimensions.service';
import {LoaderService} from 'services/loader.service';
import {UserService} from 'services/user.service';
+import {I18nLanguageCodeService} from 'services/i18n-language-code.service';
import {Subscription} from 'rxjs';
+import {NgbCarousel} from '@ng-bootstrap/ng-bootstrap';
+import {AccordionPanelData} from 'pages/about-page/data.model';
+
+import './teach-page.component.css';
export interface Testimonial {
+ personDetails: string;
+ role:
+ | 'I18N_TEACH_PAGE_TESTIMONIAL_ROLE_TEACHER'
+ | 'I18N_TEACH_PAGE_TESTIMONIAL_ROLE_PARENT';
quote: string;
- studentDetails: string;
imageUrl: string;
imageUrlWebp: string;
- borderPresent: boolean;
altText: string;
}
@Component({
selector: 'teach-page',
templateUrl: './teach-page.component.html',
- styleUrls: [],
+ styleUrls: ['./teach-page.component.css'],
})
-export class TeachPageComponent implements OnInit {
+export class TeachPageComponent implements OnInit, OnDestroy, AfterViewInit {
// These properties are initialized using Angular lifecycle hooks
// and we need to do non-null assertion. For more information, see
// https://github.com/oppia/oppia/wiki/Guide-on-defining-types#ts-7-1
+ @ViewChild('creatorsCarouselContainer')
+ creatorsCarouselContainer!: ElementRef;
+ @ViewChild('testimonialsCarousel') testimonialsCarousel!: NgbCarousel;
+ parentsTeachersPdfGuideLink = AppConstants.PARENTS_TEACHERS_PDF_GUIDE_LINK;
+ teacherStoryTaggedBlogsLink = AppConstants.TEACHER_STORY_TAGGED_BLOGS_LINK;
classroomUrlFragment!: string;
classroomUrl!: string;
+ androidUrl = `/${AppConstants.PAGES_REGISTERED_WITH_FRONTEND.ANDROID.ROUTE}`;
displayedTestimonialId!: number;
libraryUrl!: string;
- testimonialCount!: number;
- testimonials: Testimonial[] = [];
+ testimonials: readonly Testimonial[] = [];
isWindowNarrow: boolean = false;
userIsLoggedIn: boolean = false;
directiveSubscriptions = new Subscription();
+ lessonCreationData: AccordionPanelData[] = [
+ {
+ title: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_1_TITLE',
+ text: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_1_TEXT',
+ customPanelClassNames: ['oppia-teach-lesson-panel'],
+ customTitleClassNames: ['oppia-teach-lesson-panel-title'],
+ image: '/teach/skill-tree-image',
+ altText: 'Skill tree image',
+ panelIsCollapsed: true,
+ },
+ {
+ title: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_2_TITLE',
+ text: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_2_TEXT',
+ customPanelClassNames: ['oppia-teach-lesson-panel'],
+ customTitleClassNames: ['oppia-teach-lesson-panel-title'],
+ image: '/teach/skill-table-image',
+ altText: 'Skill table image',
+ panelIsCollapsed: true,
+ },
+ {
+ title: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_3_TITLE',
+ text: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_3_TEXT',
+ customPanelClassNames: ['oppia-teach-lesson-panel'],
+ customTitleClassNames: ['oppia-teach-lesson-panel-title'],
+ panelIsCollapsed: true,
+ },
+ {
+ title: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_4_TITLE',
+ text: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_4_TEXT',
+ customPanelClassNames: ['oppia-teach-lesson-panel'],
+ customTitleClassNames: ['oppia-teach-lesson-panel-title'],
+ panelIsCollapsed: true,
+ },
+ {
+ title: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_5_TITLE',
+ text: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_5_TEXT',
+ customPanelClassNames: ['oppia-teach-lesson-panel'],
+ customTitleClassNames: ['oppia-teach-lesson-panel-title'],
+ panelIsCollapsed: true,
+ },
+ {
+ title: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_6_TITLE',
+ text: 'I18N_TEACH_PAGE_LESSON_CREATION_STEP_6_TEXT',
+ customPanelClassNames: ['oppia-teach-lesson-panel'],
+ customTitleClassNames: ['oppia-teach-lesson-panel-title'],
+ panelIsCollapsed: true,
+ },
+ ];
+ creatorsData = AppConstants.LESSON_CREATORS_DATA_TEACH_PAGE;
+ screenType!: 'desktop' | 'tablet' | 'mobile';
+ creatorsIndicesObject = {
+ desktop: [[0, 1, 2, 3, 4, 5]],
+ tablet: [
+ [0, 1, 2],
+ [3, 4, 5],
+ ],
+ mobile: [
+ [0, 1],
+ [2, 3],
+ [4, 5],
+ ],
+ };
+ activeCreatorsSlideIndex = 0;
+ activeCreatorsIndices!: number[];
+ creatorsCarouselLeftArrowIsDisabled = true;
+ creatorsCarouselRightArrowIsDisabled = false;
constructor(
private siteAnalyticsService: SiteAnalyticsService,
private urlInterpolationService: UrlInterpolationService,
- private windowDimensionService: WindowDimensionsService,
+ private windowDimensionsService: WindowDimensionsService,
private windowRef: WindowRef,
private userService: UserService,
- private loaderService: LoaderService
+ private loaderService: LoaderService,
+ public renderer: Renderer2,
+ private i18nLanguageCodeService: I18nLanguageCodeService
) {}
ngOnInit(): void {
this.displayedTestimonialId = 0;
- // Change count after all testimonials are available.
- this.testimonialCount = 3;
- this.testimonials = this.getTestimonials();
+ this.setScreenType();
+ this.testimonials = AppConstants.TESTIMONIAlS_DATA_TEACHERS;
this.classroomUrl = this.urlInterpolationService.interpolateUrl(
'/learn/
',
{
@@ -81,61 +168,125 @@ export class TeachPageComponent implements OnInit {
this.userIsLoggedIn = userInfo.isLoggedIn();
this.loaderService.hideLoadingScreen();
});
- this.isWindowNarrow = this.windowDimensionService.isWindowNarrow();
+ this.isWindowNarrow = this.windowDimensionsService.isWindowNarrow();
this.directiveSubscriptions.add(
- this.windowDimensionService.getResizeEvent().subscribe(() => {
- this.isWindowNarrow = this.windowDimensionService.isWindowNarrow();
+ this.windowDimensionsService.getResizeEvent().subscribe(() => {
+ this.setScreenType();
+ this.isWindowNarrow = this.windowDimensionsService.isWindowNarrow();
})
);
}
- // TODO(#11657): Extract the testimonials code into a separate component.
- // The 2 functions below are to cycle between values:
- // 0 to (testimonialCount - 1) for displayedTestimonialId.
- incrementDisplayedTestimonialId(): void {
- // This makes sure that incrementing from (testimonialCount - 1)
- // returns 0 instead of testimonialCount,since we want the testimonials
- // to cycle through.
- this.displayedTestimonialId =
- (this.displayedTestimonialId + 1) % this.testimonialCount;
+ ngAfterViewInit(): void {
+ this.creatorsCarouselContainer.nativeElement.addEventListener(
+ 'scroll',
+ this.toggleCreatorsCarouselArrowsDisablityStatusDesktop.bind(this)
+ );
}
- decrementDisplayedTestimonialId(): void {
- // This makes sure that decrementing from 0, returns
- // (testimonialCount - 1) instead of -1, since we want the testimonials
- // to cycle through.
- this.displayedTestimonialId =
- (this.displayedTestimonialId + this.testimonialCount - 1) %
- this.testimonialCount;
+ setScreenType(): void {
+ const width = this.windowDimensionsService.getWidth();
+ if (width < 361) {
+ this.screenType = 'mobile';
+ } else if (width < 769) {
+ this.screenType = 'tablet';
+ } else {
+ this.screenType = 'desktop';
+ }
+ this.setActiveCreatorsIndices();
}
- getTestimonials(): [Testimonial, Testimonial, Testimonial] {
- return [
- {
- quote: 'I18N_TEACH_TESTIMONIAL_1',
- studentDetails: 'I18N_TEACH_STUDENT_DETAILS_1',
- imageUrl: '/teach/riya.jpg',
- imageUrlWebp: '/teach/riya.webp',
- borderPresent: true,
- altText: 'Photo of Riya',
- },
- {
- quote: 'I18N_TEACH_TESTIMONIAL_2',
- studentDetails: 'I18N_TEACH_STUDENT_DETAILS_2',
- imageUrl: '/teach/awad.jpg',
- imageUrlWebp: '/teach/awad.webp',
- borderPresent: true,
- altText: 'Photo of Awad',
- },
- {
- quote: 'I18N_TEACH_TESTIMONIAL_3',
- studentDetails: 'I18N_TEACH_STUDENT_DETAILS_3',
- imageUrl: '/teach/himanshu.jpg',
- imageUrlWebp: '/teach/himanshu.webp',
- borderPresent: true,
- altText: 'Photo of Himanshu',
- },
- ];
+ showPreviousCreators(): void {
+ if (this.screenType === 'desktop') {
+ this.renderer.setProperty(
+ this.creatorsCarouselContainer.nativeElement,
+ 'scrollLeft',
+ 0
+ );
+ this.toggleCreatorsCarouselArrowsDisablityStatusDesktop();
+ } else {
+ if (this.activeCreatorsSlideIndex === 0) {
+ return;
+ }
+ this.activeCreatorsSlideIndex--;
+ this.setActiveCreatorsIndices();
+ this.toggleCreatorsCarouselArrowsDisablityStatusMobile();
+ }
+ }
+
+ showNextCreators(): void {
+ if (this.screenType === 'desktop') {
+ const scrollWidth =
+ this.creatorsCarouselContainer.nativeElement.scrollWidth;
+ if (!this.isLanguageRTL()) {
+ this.renderer.setProperty(
+ this.creatorsCarouselContainer.nativeElement,
+ 'scrollLeft',
+ scrollWidth
+ );
+ } else {
+ this.renderer.setProperty(
+ this.creatorsCarouselContainer.nativeElement,
+ 'scrollLeft',
+ -scrollWidth
+ );
+ }
+ this.toggleCreatorsCarouselArrowsDisablityStatusDesktop();
+ } else {
+ if (
+ this.activeCreatorsSlideIndex ===
+ this.creatorsIndicesObject[this.screenType].length - 1
+ ) {
+ return;
+ }
+ this.activeCreatorsSlideIndex++;
+ this.setActiveCreatorsIndices();
+ this.toggleCreatorsCarouselArrowsDisablityStatusMobile();
+ }
+ }
+
+ setActiveCreatorsIndices(): void {
+ this.activeCreatorsIndices =
+ this.creatorsIndicesObject[this.screenType][
+ this.activeCreatorsSlideIndex
+ ];
+ }
+
+ toggleCreatorsCarouselArrowsDisablityStatusMobile(): void {
+ if (this.screenType === 'desktop') {
+ return;
+ }
+ this.creatorsCarouselLeftArrowIsDisabled =
+ this.activeCreatorsSlideIndex === 0;
+ this.creatorsCarouselRightArrowIsDisabled =
+ this.activeCreatorsSlideIndex ===
+ this.creatorsIndicesObject[this.screenType].length - 1;
+ }
+
+ toggleCreatorsCarouselArrowsDisablityStatusDesktop(): void {
+ if (this.screenType !== 'desktop') {
+ return;
+ }
+ // The bitwise OR operator is used to convert the float to an integer.
+ const scrollLeft =
+ this.creatorsCarouselContainer.nativeElement.scrollLeft | 0;
+ const scrollWidth =
+ this.creatorsCarouselContainer.nativeElement.scrollWidth | 0;
+ const clientWidth =
+ this.creatorsCarouselContainer.nativeElement.clientWidth | 0;
+
+ this.creatorsCarouselLeftArrowIsDisabled = scrollLeft === 0;
+ this.creatorsCarouselRightArrowIsDisabled =
+ Math.abs(scrollLeft) === Math.abs(scrollWidth - clientWidth);
+ // Here, the absolute value is used to accomodate the RTL UI logic.
+ }
+
+ moveTestimonialCarouselToPreviousSlide(): void {
+ this.testimonialsCarousel.prev();
+ }
+
+ moveTestimonialCarouselToNextSlide(): void {
+ this.testimonialsCarousel.next();
}
onClickAccessAndroidButton(): void {
@@ -181,6 +332,18 @@ export class TeachPageComponent implements OnInit {
getStaticImageUrl(imagePath: string): string {
return this.urlInterpolationService.getStaticImageUrl(imagePath);
}
+
+ isLanguageRTL(): boolean {
+ return this.i18nLanguageCodeService.isCurrentLanguageRTL();
+ }
+
+ ngOnDestroy(): void {
+ this.directiveSubscriptions.unsubscribe();
+ this.creatorsCarouselContainer.nativeElement.removeEventListener(
+ 'scroll',
+ this.toggleCreatorsCarouselArrowsDisablityStatusDesktop.bind(this)
+ );
+ }
}
angular
diff --git a/core/templates/pages/teach-page/teach-page.module.ts b/core/templates/pages/teach-page/teach-page.module.ts
index 1aa839b5f4c3..8ef5fa53582f 100644
--- a/core/templates/pages/teach-page/teach-page.module.ts
+++ b/core/templates/pages/teach-page/teach-page.module.ts
@@ -22,9 +22,15 @@ import {SharedComponentsModule} from 'components/shared-component.module';
import {TeachPageRootComponent} from './teach-page-root.component';
import {CommonModule} from '@angular/common';
import {TeachPageRoutingModule} from './teach-page-routing.module';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
- imports: [CommonModule, SharedComponentsModule, TeachPageRoutingModule],
+ imports: [
+ CommonModule,
+ SharedComponentsModule,
+ TeachPageRoutingModule,
+ NgbModule,
+ ],
declarations: [TeachPageComponent, TeachPageRootComponent],
entryComponents: [TeachPageComponent, TeachPageRootComponent],
})
diff --git a/core/tests/puppeteer-acceptance-tests/specs/logged-out-user/click-all-buttons-on-teach-page.spec.ts b/core/tests/puppeteer-acceptance-tests/specs/logged-out-user/click-all-buttons-on-teach-page.spec.ts
index 9eaa81fe8107..ae2926cdeed9 100644
--- a/core/tests/puppeteer-acceptance-tests/specs/logged-out-user/click-all-buttons-on-teach-page.spec.ts
+++ b/core/tests/puppeteer-acceptance-tests/specs/logged-out-user/click-all-buttons-on-teach-page.spec.ts
@@ -42,38 +42,6 @@ describe('Logged-out User in Teach page', function () {
await loggedOutUser.navigateToTeachPage();
}, DEFAULT_SPEC_TIMEOUT_MSECS);
- it(
- 'should open the Math Classroom page when "Browse Our Lessons" button is clicked',
- async function () {
- await loggedOutUser.clickBrowseOurLessonsButtonInTeachPage();
- },
- DEFAULT_SPEC_TIMEOUT_MSECS
- );
-
- it(
- 'should open the Android page when "Access Android App" button is clicked',
- async function () {
- await loggedOutUser.clickAccessAndroidAppButtonInTeachPage();
- },
- DEFAULT_SPEC_TIMEOUT_MSECS
- );
-
- it(
- 'should open the Math Classroom page when "Visit Classroom" button is clicked',
- async function () {
- await loggedOutUser.clickVisitClassroomButtonInTeachPage();
- },
- DEFAULT_SPEC_TIMEOUT_MSECS
- );
-
- it(
- 'should open the Community Library page when "Browse Library" button is clicked',
- async function () {
- await loggedOutUser.clickBrowseLibraryButtonInTeachPage();
- },
- DEFAULT_SPEC_TIMEOUT_MSECS
- );
-
it(
'should open the Math Classroom page when "Explore Lessons" button is clicked',
async function () {
diff --git a/core/tests/puppeteer-acceptance-tests/utilities/user/logged-out-user.ts b/core/tests/puppeteer-acceptance-tests/utilities/user/logged-out-user.ts
index 5aae611e61f7..0051b38e428d 100644
--- a/core/tests/puppeteer-acceptance-tests/utilities/user/logged-out-user.ts
+++ b/core/tests/puppeteer-acceptance-tests/utilities/user/logged-out-user.ts
@@ -21,7 +21,6 @@ import testConstants from '../common/test-constants';
import {showMessage} from '../common/show-message';
const aboutUrl = testConstants.URLs.About;
-const androidUrl = testConstants.URLs.Android;
const blogPostUrlinPartnershipsPage =
testConstants.URLs.BlogPostUrlInPartnershipsPage;
const creatorDashboardCreateModeUrl =
@@ -138,26 +137,8 @@ const mobileSidevbarGetInvolvedMenuDonateButton =
'a.e2e-mobile-test-sidebar-get-involved-menu-donate-button';
const mobileSidebarGetInvolvedMenuContactUsButton =
'a.e2e-mobile-test-sidebar-get-involved-menu-contact-us-button';
-const browseOurLessonsDesktopButtonInTeachPage =
- '.e2e-test-teach-page-browse-our-lessons-desktop-button';
-const browseOurLessonsMobileButtonInTeachPage =
- '.e2e-test-teach-page-browse-our-lessons-mobile-button';
-const accessAndroidAppDesktopButtonInTeachPage =
- '.e2e-test-teach-page-access-android-app-desktop-button';
-const accessAndroidAppMobileButtonInTeachPage =
- '.e2e-test-teach-page-access-android-app-mobile-button';
-const visitClassroomDesktopButtonInTeachPage =
- '.e2e-test-teach-page-visit-classroom-desktop-button';
-const visitClassroomMobileButtonInTeachPage =
- '.e2e-test-teach-page-visit-classroom-mobile-button';
-const exploreLessonsDesktopButtonInTeachPage =
- '.e2e-test-teach-page-explore-lessons-desktop-button';
-const exploreLessonsMobileButtonInTeachPage =
- '.e2e-test-teach-page-explore-lessons-mobile-button';
-const browseLibraryDesktopButtonInTeachPage =
- '.e2e-test-teach-page-browse-library-desktop-button';
-const browseLibraryMobileButtonInTeachPage =
- '.e2e-test-teach-page-browse-library-mobile-button';
+const exploreLessonsButtonInTeachPage =
+ '.e2e-test-teach-page-explore-lessons-button';
const partnerWithUsButtonAtTheTopOfPartnershipsPage =
'.e2e-test-partnerships-page-partner-with-us-button-at-the-top';
const partnerWithUsButtonAtTheBottomOfPartnershipsPage =
@@ -1251,78 +1232,11 @@ export class LoggedOutUser extends BaseUser {
);
}
- /**
- * Function to click the Browse Our Lessons button in the Teach page
- * and check if it opens the Math Classroom page.
- */
- async clickBrowseOurLessonsButtonInTeachPage(): Promise {
- const browseOurLessonsButtonInTeachPage = this.isViewportAtMobileWidth()
- ? browseOurLessonsMobileButtonInTeachPage
- : browseOurLessonsDesktopButtonInTeachPage;
- await this.clickButtonToNavigateToNewPage(
- browseOurLessonsButtonInTeachPage,
- 'Browse Our Lessons button',
- mathClassroomUrl,
- 'Math Classroom'
- );
- }
-
- /**
- * Function to click the Access Android App button in the Teach page
- * and check if it opens the Android page.
- */
- async clickAccessAndroidAppButtonInTeachPage(): Promise {
- const accessAndroidAppButtonInTeachPage = this.isViewportAtMobileWidth()
- ? accessAndroidAppMobileButtonInTeachPage
- : accessAndroidAppDesktopButtonInTeachPage;
- await this.clickButtonToNavigateToNewPage(
- accessAndroidAppButtonInTeachPage,
- 'Access the Android App button',
- androidUrl,
- 'Android'
- );
- }
-
- /**
- * Function to click the Visit Classroom button in the Teach page
- * and check if it opens the Math Classroom page.
- */
- async clickVisitClassroomButtonInTeachPage(): Promise {
- const visitClassroomButtonInTeachPage = this.isViewportAtMobileWidth()
- ? visitClassroomMobileButtonInTeachPage
- : visitClassroomDesktopButtonInTeachPage;
- await this.clickButtonToNavigateToNewPage(
- visitClassroomButtonInTeachPage,
- 'Visit Classroom button',
- mathClassroomUrl,
- 'Math Classroom'
- );
- }
-
- /**
- * Function to click the Browse Library button in the Teach page
- * and check if it opens the Community Library page.
- */
- async clickBrowseLibraryButtonInTeachPage(): Promise {
- const browseLibraryButtonInTeachPage = this.isViewportAtMobileWidth()
- ? browseLibraryMobileButtonInTeachPage
- : browseLibraryDesktopButtonInTeachPage;
- await this.clickButtonToNavigateToNewPage(
- browseLibraryButtonInTeachPage,
- 'Browse Library button',
- communityLibraryUrl,
- 'Community Library'
- );
- }
-
/**
* Function to click the Browse Our Lessons button in the Teach page
* and check if it opens the Math Classroom page.
*/
async clickExploreLessonsButtonInTeachPage(): Promise {
- const exploreLessonsButtonInTeachPage = this.isViewportAtMobileWidth()
- ? exploreLessonsMobileButtonInTeachPage
- : exploreLessonsDesktopButtonInTeachPage;
await this.clickButtonToNavigateToNewPage(
exploreLessonsButtonInTeachPage,
'Explore Lessons button',
diff --git a/core/tests/test-modules-mappings/acceptance/logged-out-user/click-all-buttons-on-teach-page.txt b/core/tests/test-modules-mappings/acceptance/logged-out-user/click-all-buttons-on-teach-page.txt
index 5ab4c7ad2ea1..f8d9c3004f98 100644
--- a/core/tests/test-modules-mappings/acceptance/logged-out-user/click-all-buttons-on-teach-page.txt
+++ b/core/tests/test-modules-mappings/acceptance/logged-out-user/click-all-buttons-on-teach-page.txt
@@ -1,4 +1,2 @@
-core/templates/pages/android-page/android-page.module.ts
core/templates/pages/classroom-page/classroom-page.module.ts
-core/templates/pages/library-page/library-page.module.ts
core/templates/pages/teach-page/teach-page.module.ts