From 84b31396ec34b54e3fde7f48df05082fb301c07b Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 9 Jun 2021 20:34:51 +0200 Subject: [PATCH] feat: more flexible carousels and fix homepage alignment Currently the carousels on the front page don't align with any other elements on the page which looks odd. This seems to be due to a limitation where the item size has to be passed in to the carousel. These changes reimplement the carousel, making it more flexible and allowing it to handle any size of items and any spacing. The new carousel is used on the frontpage to lay out the items in a way that aligns with the rest of the content. --- .../app/pages/homepage/_homepage-theme.scss | 16 -- .../src/app/pages/homepage/homepage.html | 36 ++-- .../src/app/pages/homepage/homepage.scss | 80 ++++++-- .../src/app/shared/carousel/carousel.html | 22 ++- .../src/app/shared/carousel/carousel.scss | 15 +- .../src/app/shared/carousel/carousel.spec.ts | 43 +--- .../src/app/shared/carousel/carousel.ts | 187 +++++++----------- 7 files changed, 181 insertions(+), 218 deletions(-) diff --git a/material.angular.io/src/app/pages/homepage/_homepage-theme.scss b/material.angular.io/src/app/pages/homepage/_homepage-theme.scss index d1ac6e13d821..2657931cc0bb 100644 --- a/material.angular.io/src/app/pages/homepage/_homepage-theme.scss +++ b/material.angular.io/src/app/pages/homepage/_homepage-theme.scss @@ -57,21 +57,5 @@ } outline: none; } - - .docs-featured-components-carousel-item:hover { - img { - transform: scale(1.2); - } - - box-shadow:inset 0 0 0 1.5px mat.get-color-from-palette($foreground, divider); - } - - .docs-featured-components-carousel-item:focus { - img { - transform: scale(1.2); - } - - box-shadow:inset 0 0 0 1.5px mat.get-color-from-palette($foreground, disabled); - } } } diff --git a/material.angular.io/src/app/pages/homepage/homepage.html b/material.angular.io/src/app/pages/homepage/homepage.html index ef0b4654e366..128f69a20513 100644 --- a/material.angular.io/src/app/pages/homepage/homepage.html +++ b/material.angular.io/src/app/pages/homepage/homepage.html @@ -43,9 +43,16 @@

Frictionless

-

Featured components

- - +

Featured components

+ + + View all components + chevron_right + +
+ +
@@ -53,19 +60,21 @@

Featured components

{{(comp[0].toUpperCase() + comp.slice(1)).replace('-', ' ')}} - - - View all components - chevron_right -
-

Guides

- - +

Guides

+ + + View all guides + chevron_right + +
+ + {{guide.name}} @@ -76,11 +85,6 @@

Guides

 - - - View all guides - chevron_right - diff --git a/material.angular.io/src/app/pages/homepage/homepage.scss b/material.angular.io/src/app/pages/homepage/homepage.scss index 323107553c8a..fb6cd7bc5916 100644 --- a/material.angular.io/src/app/pages/homepage/homepage.scss +++ b/material.angular.io/src/app/pages/homepage/homepage.scss @@ -53,6 +53,9 @@ $margin-promotion-sections-small: 15px; display: flex; flex-direction: column; padding: 16px; + width: 75%; + max-width: 1080px; + margin: auto; a { text-decoration: none; @@ -61,7 +64,7 @@ $margin-promotion-sections-small: 15px; h2 { font-size: 25px; font-weight: 400; - margin: 16px 0; + margin: 0 0 16px; padding: 0; } @@ -74,7 +77,7 @@ $margin-promotion-sections-small: 15px; } mat-divider { - width: 75%; + width: 100%; } mat-icon { @@ -82,8 +85,19 @@ $margin-promotion-sections-small: 15px; } } +.carousel-item { + width: 48%; + + & + & { + margin-left: 2%; + } + + @media (min-width: 1020px) { + max-width: 32%; + } +} + .docs-homepage-row { - width: 75%; display: flex; flex-direction: row; margin: $margin-promotion-sections 0; @@ -91,20 +105,32 @@ $margin-promotion-sections-small: 15px; .docs-homepage-carousel-row { margin: $margin-promotion-sections 0; - width: 75%; display: flex; flex-direction: column; + width: 100%; - a.docs-link { - width: 100%; - text-align: right; + h2 { + margin-top: 0; } +} + +.docs-homepage-header { + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; h2 { - margin-top: 0; + margin: 0; } } +.docs-link { + display: inline-flex; + align-items: center; +} + .docs-homepage-guides { .docs-homepage-guides-card-divider { width: 30%; @@ -113,9 +139,18 @@ $margin-promotion-sections-small: 15px; } .docs-homepage-guides-carousel-item { - padding: 15px; display: flex; text-decoration: none; + box-sizing: border-box; + + // We need a slight padding so the box shadow doesn't get cut off by the carousel. + padding: 3px; + + .mat-card { + // Ensures that the cards stretch to the full width of the item. + width: 100%; + min-height: 140px; + } } .docs-homepage-guides-card.mat-card { @@ -131,31 +166,39 @@ $margin-promotion-sections-small: 15px; } } - .docs-homepage-featured-components { .docs-featured-components-carousel-item { - padding: 15px; text-align: center; + box-sizing: border-box; + font-size: 18px; .docs-homepage-img-container { overflow: hidden; - width: 259px; - height: 144px; - margin-bottom: 10px; + margin-bottom: 16px; + max-height: 200px; } img { transition: 0.3s ease-in-out; width: 100%; } + + &:hover, &:focus { + img { + transform: scale(1.1); + } + } } } .docs-homepage-row-column { display: flex; flex-direction: column; - margin: 0 auto; - width: 30%; + width: 32%; + + & + & { + margin-left: 2%; + } } .docs-header-start { @@ -187,6 +230,10 @@ $margin-promotion-sections-small: 15px; .docs-homepage-row-column { width: 100%; + + & + & { + margin-left: 0; + } } } @@ -194,7 +241,6 @@ $margin-promotion-sections-small: 15px; * Rules for when the device is detected to be a small screen. */ @media (max-width: 720px) { - .docs-header-start { margin: $margin-promotion-sections-small 0 0 0; } diff --git a/material.angular.io/src/app/shared/carousel/carousel.html b/material.angular.io/src/app/shared/carousel/carousel.html index b75a21734e4e..c331a1e9847c 100644 --- a/material.angular.io/src/app/shared/carousel/carousel.html +++ b/material.angular.io/src/app/shared/carousel/carousel.html @@ -1,14 +1,16 @@ + +
- -
+ class="docs-carousel-content-wrapper" role="region"> +
-
+ + diff --git a/material.angular.io/src/app/shared/carousel/carousel.scss b/material.angular.io/src/app/shared/carousel/carousel.scss index cfdc975e93a6..2284fa7eaa89 100644 --- a/material.angular.io/src/app/shared/carousel/carousel.scss +++ b/material.angular.io/src/app/shared/carousel/carousel.scss @@ -1,24 +1,21 @@ app-carousel { - display: flex; - align-items: center; - justify-content: center; - margin: 0 40px; + display: block; + position: relative; } .docs-carousel-content { display: flex; flex-direction: row; - overflow: hidden; outline: none; + transition: transform 0.5s ease-in-out; } .docs-carousel-content-wrapper { - position: relative; + overflow: hidden; } [carousel-item] { flex-shrink: 0; - transition: transform 0.5s ease-in-out; } .docs-carousel-nav { @@ -28,9 +25,9 @@ app-carousel { } .docs-carousel-nav-prev { - left: -40px; + left: -50px; } .docs-carousel-nav-next { - right: -40px; + right: -50px; } diff --git a/material.angular.io/src/app/shared/carousel/carousel.spec.ts b/material.angular.io/src/app/shared/carousel/carousel.spec.ts index cf7db1873f85..1bdf9220fe4f 100644 --- a/material.angular.io/src/app/shared/carousel/carousel.spec.ts +++ b/material.angular.io/src/app/shared/carousel/carousel.spec.ts @@ -39,51 +39,17 @@ describe('HorizontalCarousel', () => { component.next(); fixture.detectChanges(); - expect(component.index).toEqual(1); - const navPrevious = fixture.nativeElement.querySelector('.docs-carousel-nav-prev'); expect(navPrevious).toBeDefined(); }); it('should hide next nav arrow after reaching end of items', () => { - expect(component.visibleItems).toBe(4); - component.next(); component.next(); - expect(component.index).toEqual(2); fixture.detectChanges(); const navPrevious = fixture.nativeElement.querySelector('.docs-carousel-nav-next'); expect(navPrevious).toBeNull(); - - // in case of keyboard nav at end of items - component.next(); - expect(component.index).toEqual(2); - }); - - it('should resize carousel when not all content can be displayed', () => { - const carouselWrapper = fixture.nativeElement.querySelector('.docs-carousel-content-wrapper'); - fixture.nativeElement.style.width = '1350px'; - window.dispatchEvent(new Event('resize')); - - fixture.detectChanges(); - - expect(carouselWrapper.clientWidth).toEqual(1250); - expect(component.visibleItems).toEqual(5); - }); - - it('should not resize carousel when all content can be displayed', () => { - fixture.componentInstance.numberOfItems = 2; - fixture.detectChanges(); - - const carouselWrapper = fixture.nativeElement.querySelector('.docs-carousel-content-wrapper'); - fixture.nativeElement.style.width = '1350px'; - window.dispatchEvent(new Event('resize')); - - fixture.detectChanges(); - - expect(carouselWrapper.clientWidth).toEqual(500); - expect(component.visibleItems).toEqual(2); }); }); @@ -91,11 +57,16 @@ describe('HorizontalCarousel', () => { selector: 'test-carousel', template: ` - +
`, - styles: ['.docs-carousel-item-container { display: flex; }'] + styles: [` + .docs-carousel-item-container { + display: flex; + width: 250px; + } + `] }) class CarouselTestComponent { numberOfItems = 6; diff --git a/material.angular.io/src/app/shared/carousel/carousel.ts b/material.angular.io/src/app/shared/carousel/carousel.ts index 448a088ac3fb..48614e985068 100644 --- a/material.angular.io/src/app/shared/carousel/carousel.ts +++ b/material.angular.io/src/app/shared/carousel/carousel.ts @@ -11,6 +11,7 @@ import { ViewEncapsulation, } from '@angular/core'; import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y'; +import {LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes'; @Directive({ @@ -18,11 +19,9 @@ import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y'; }) export class CarouselItem implements FocusableOption { @HostBinding('attr.role') readonly role = 'listitem'; - @HostBinding('style.width.px') width = this.carousel.itemWidth; @HostBinding('tabindex') tabindex = '-1'; - constructor(readonly carousel: Carousel, readonly element: ElementRef) { - } + constructor(readonly element: ElementRef) {} focus(): void { this.element.nativeElement.focus({preventScroll: true}); @@ -37,148 +36,108 @@ export class CarouselItem implements FocusableOption { }) export class Carousel implements AfterContentInit { @Input('aria-label') ariaLabel: string | undefined; - @Input() itemWidth: number | undefined; @ContentChildren(CarouselItem) items!: QueryList; - @ViewChild('contentWrapper') wrapper!: ElementRef; + @ViewChild('list') list!: ElementRef; position = 0; showPrevArrow = false; showNextArrow = true; - visibleItems: number | undefined; - shiftWidth: number | undefined; - itemsArray: CarouselItem[] | undefined; - private focusKeyManager: FocusKeyManager | undefined; - - constructor(private readonly element: ElementRef) {} - - private _index = 0; - - get index(): number { - return this._index; - } - - set index(i: number) { - this._index = i; - let lastVisibleIndex = this.items.length; - if (this.visibleItems) { - lastVisibleIndex -= this.visibleItems; + index = 0; + private _keyManager!: FocusKeyManager; + + onKeydown({keyCode}: KeyboardEvent) { + const manager = this._keyManager; + const previousActiveIndex = manager.activeItemIndex; + + if (keyCode === LEFT_ARROW) { + manager.setPreviousItemActive(); + } else if (keyCode === RIGHT_ARROW) { + manager.setNextItemActive(); + } else if (keyCode === TAB && !manager.activeItem) { + manager.setFirstItemActive(); } - this.showPrevArrow = i > 0; - this.showNextArrow = i < lastVisibleIndex; - } + if (manager.activeItemIndex != null && manager.activeItemIndex !== previousActiveIndex) { + this.index = manager.activeItemIndex; + this._updateItemTabIndices(); - onKeydown(event: KeyboardEvent) { - if (this.focusKeyManager != null) { - switch (event.key) { - case 'Tab': - if (!this.focusKeyManager.activeItem) { - this.focusKeyManager.setFirstItemActive(); - this._updateItemTabIndices(); - } - break; - - case 'ArrowLeft': - if (this.focusKeyManager.activeItemIndex === this.index) { - this.previous(); - } - this.focusKeyManager.setPreviousItemActive(); - this._updateItemTabIndices(); - break; - - case 'ArrowRight': - if (this.focusKeyManager.activeItemIndex === this.index + (this.visibleItems || 0) - 1) { - this.next(); - } - this.focusKeyManager.setNextItemActive(); - this._updateItemTabIndices(); - break; - - default: - break; + if (this._isOutOfView(this.index)) { + this._scrollToActiveItem(); } } } - onResize() { - this._resizeCarousel(); - } - ngAfterContentInit(): void { - this.focusKeyManager = - new FocusKeyManager(this.items) as FocusKeyManager; - // timeout to make sure clientWidth is defined - setTimeout(() => { - this.itemsArray = this.items.toArray(); - this.shiftWidth = this.calculateShiftWidth(this.itemsArray); - this._resizeCarousel(); - }); + this._keyManager = new FocusKeyManager(this.items); } + /** Goes to the next set of items */ next() { - // prevent keyboard navigation from going out of bounds - if (this.showNextArrow) { - this._shiftItems(1); + for (let i = this.index; i < this.items.length; i++) { + if (this._isOutOfView(i)) { + this.index = i; + this._scrollToActiveItem(); + break; + } } } + /** Goes to the previous set of items. */ previous() { - // prevent keyboard navigation from going out of bounds - if (this.showPrevArrow) { - this._shiftItems(-1); + for (let i = this.index; i > -1; i--) { + if (this._isOutOfView(i)) { + this.index = i; + this._scrollToActiveItem(); + break; + } } } - /** - * @param items array of carousel items - * @return width to shift the carousel - */ - calculateShiftWidth(items: CarouselItem[]): number { - return items[0].element.nativeElement.clientWidth; - } - + /** Updates the `tabindex` of each of the items based on their active state. */ private _updateItemTabIndices() { this.items.forEach((item: CarouselItem) => { - if (this.focusKeyManager != null) { - item.tabindex = item === this.focusKeyManager.activeItem ? '0' : '-1'; + if (this._keyManager != null) { + item.tabindex = item === this._keyManager.activeItem ? '0' : '-1'; } }); } - private _shiftItems(shiftIndex: number) { - this.index += shiftIndex; - this.position += shiftIndex * - (this.shiftWidth || this.calculateShiftWidth(this.items.toArray())); - this.items.forEach((item: CarouselItem) => { - item.element.nativeElement.style.transform = `translateX(-${this.position}px)`; - }); - } + /** Scrolls an item into the viewport. */ + private _scrollToActiveItem() { + if (!this._isOutOfView(this.index)) { + return; + } + + const itemsArray = this.items.toArray(); + let targetItemIndex = this.index; - private _resizeCarousel() { - if (this.shiftWidth == null) { - this.shiftWidth = this.calculateShiftWidth(this.items.toArray()); + // Only shift the carousel by one if we're going forwards. This + // looks better compared to moving the carousel by an entire page. + if (this.index > 0 && !this._isOutOfView(this.index - 1)) { + targetItemIndex = itemsArray.findIndex((_, i) => !this._isOutOfView(i)) + 1; } - const newVisibleItems = Math.max(1, Math.min( - Math.floor((this.element.nativeElement.offsetWidth) / this.shiftWidth), - this.items.length)); - if (this.visibleItems !== newVisibleItems) { - if ((this.visibleItems || 0) < newVisibleItems) { - const lastVisibleIndex = this.items.length - (this.visibleItems || 0); - const shiftIndex = this.index - (lastVisibleIndex) + 1; - if (shiftIndex > 0) { - this._shiftItems(-shiftIndex); - } - } else { - if (this.focusKeyManager != null) { - if (this.focusKeyManager.activeItemIndex && this.focusKeyManager.activeItemIndex > - this.index + newVisibleItems - 1) { - this.focusKeyManager.setPreviousItemActive(); - this._updateItemTabIndices(); - } - } + + this.position = itemsArray[targetItemIndex].element.nativeElement.offsetLeft; + this.list.nativeElement.style.transform = `translateX(-${this.position}px)`; + this.showPrevArrow = this.index > 0; + this.showNextArrow = false; + + for (let i = itemsArray.length - 1; i > -1; i--) { + if (this._isOutOfView(i, 'end')) { + this.showNextArrow = true; + break; } - this.visibleItems = newVisibleItems; - this.showNextArrow = this.index < (this.items.length - this.visibleItems); } - this.wrapper.nativeElement.style.width = `${this.visibleItems * this.shiftWidth}px`; + } + + /** Checks whether an item at a specific index is outside of the viewport. */ + private _isOutOfView(index: number, side?: 'start' | 'end') { + const {offsetWidth, offsetLeft} = this.items.toArray()[index].element.nativeElement; + + if ((!side || side === 'start') && offsetLeft - this.position < 0) { + return true; + } + + return (!side || side === 'end') && + (offsetWidth + offsetLeft - this.position) > this.list.nativeElement.clientWidth; } }