feat(carousel): add an opportunity to use a keyboard for navigation (#…

…5270) * feat(carousel): add an opportunity to use a keyboard for navigation
valor-software · Jun 24, 2019 · f5ffefa · f5ffefa
1 parent 161f419
commit f5ffefa
Show file tree

Hide file tree

Showing 15 changed files with 295 additions and 58 deletions.
diff --git a/cypress/full/carousel_page_spec.ts b/cypress/full/carousel_page_spec.ts
@@ -118,29 +118,30 @@ describe('Carousel page test suite', () => {
   describe('Pause on hover ', () => {
     const pauseOnHoverSlides = carousel.exampleDemosArr.pauseOnHover;
 
-    it('example contains carousel component with slides, arrows and "Toggle pause on hover" button', () => {
+    it('example contains carousel component with slides, arrows', () => {
       carousel.scrollToMenu('Pause on hover');
       carousel.isCarouselHaveIndicatorsItemsCtrls(pauseOnHoverSlides);
       carousel.isEachSlideHave(pauseOnHoverSlides, ['.item', '.carousel-caption', 'h3']);
-      carousel.isBtnTxtEqual(pauseOnHoverSlides, 'Toggle pause on hover ');
     });
 
-    it('when user click on "Toggle pause on hover" and hover slide - then after 5 sec slide stay opened', () => {
+    it('when user hover slide - then after 5 sec slide stay opened', () => {
       carousel.scrollToMenu('Pause on hover');
-      carousel.clickOnBtn(pauseOnHoverSlides);
       carousel.hoverSlide(pauseOnHoverSlides, 1);
       carousel.isCarouselItemActive(pauseOnHoverSlides, 0);
       cy.tick(6000);
       carousel.isCarouselItemActive(pauseOnHoverSlides, 0);
     });
 
-    it('when user click on "Toggle pause on hover" again, hover slide - then after 5 sec slide changed', () => {
+    it('when user hover slide then move mouse out - then after 5 sec slide changed', () => {
       carousel.scrollToMenu('Pause on hover');
-      carousel.dblClickOnBtn(pauseOnHoverSlides);
       carousel.hoverSlide(pauseOnHoverSlides, 1);
       carousel.isCarouselItemActive(pauseOnHoverSlides, 0);
       cy.tick(6000);
+      carousel.isCarouselItemActive(pauseOnHoverSlides, 0);
+      carousel.mouseLeave(pauseOnHoverSlides);
+      cy.tick(6000);
       carousel.isCarouselItemActive(pauseOnHoverSlides, 1);
+
     });
   });
 

diff --git a/cypress/support/carousel.po.ts b/cypress/support/carousel.po.ts
@@ -16,7 +16,7 @@ export class CarouselPo extends BaseComponent {
     optionalCaptions: 'demo-carousel-captions',
     configuringDefaults: 'demo-carousel-config',
     dynamicSlides: 'demo-carousel-dynamic',
-    pauseOnHover: 'demo-carousel-no-pause',
+    pauseOnHover: 'demo-carousel-pause-on-hover',
     customContent: 'demo-carousel-custom-content',
     disableLooping: 'demo-carousel-disable-looping',
     disableIndicator: 'demo-carousel-disable-indicator',
@@ -73,6 +73,10 @@ export class CarouselPo extends BaseComponent {
     cy.get(`${baseSelector} ${this.carouselClass} div`).eq(slideIndex).trigger('mouseenter');
   }
 
+  mouseLeave(baseSelector: string) {
+    cy.get(`${baseSelector} ${this.carouselClass}`).trigger('mouseleave');
+  }
+
   isCarouselIndicatorDisabled(baseSelector: string, disabled: boolean) {
     cy.get(`${baseSelector} ${this.carouselClass}`)
       .should(disabled ? 'to.not.have.descendants' : 'to.have.descendants', this.indicatorClass)

diff --git a/demo/src/app/components/+carousel/carousel-section.list.ts b/demo/src/app/components/+carousel/carousel-section.list.ts
@@ -2,7 +2,7 @@ import { DemoCarouseBasicComponent } from './demos/basic/basic';
 import { DemoCarouselCaptionsComponent } from './demos/captions/captions';
 import { DemoCarouselConfigComponent } from './demos/config/config';
 import { DemoCarouselDynamicComponent } from './demos/dynamic/dynamic';
-import { DemoCarouselNoPauseComponent } from './demos/no-pause/no-pause';
+import { DemoCarouselPauseOnHoverComponent } from './demos/pause-on-hover/pause-on-hover';
 import { DemoCarouselCustomContentComponent } from './demos/custom-content/custom-content';
 import { DemoCarouselIntervalComponent } from './demos/interval/interval';
 import { DemoCarouselDisableIndicatorComponent } from './demos/disable-indicator/disable-indicator';
@@ -20,6 +20,7 @@ import { ExamplesComponent } from '../../docs/demo-section-components/demo-examp
 import { ApiSectionsComponent } from '../../docs/demo-section-components/demo-api-section/index';
 
 import { NgApiDocComponent, NgApiDocConfigComponent } from '../../docs/api-docs';
+import { DemoCarouselPauseOnFocusComponent } from './demos/pause-on-focus/pause-on-focus';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -69,10 +70,20 @@ export const demoComponentContent: ContentSection[] = [
       {
         title: 'Pause on hover',
         anchor: 'pause-on-hover',
-        description: `<p>Click button to pause on hover.</p>`,
-        component: require('!!raw-loader!./demos/no-pause/no-pause.ts'),
-        html: require('!!raw-loader!./demos/no-pause/no-pause.html'),
-        outlet: DemoCarouselNoPauseComponent
+        description: `<p>If <code>noPause</code> is set to <code>false</code>
+          , carousel autoplay will be stopped when carousel receives hover.</p>`,
+        component: require('!!raw-loader!./demos/pause-on-hover/pause-on-hover.ts'),
+        html: require('!!raw-loader!./demos/pause-on-hover/pause-on-hover.html'),
+        outlet: DemoCarouselPauseOnHoverComponent
+      },
+      {
+        title: 'Pause on focus',
+        anchor: 'pause-on-focus',
+        description: `<p>If <code>pauseOnFocus</code> is set to <code>true</code>
+          , carousel autoplay will be stopped when carousel receives focus.</p>`,
+        component: require('!!raw-loader!./demos/pause-on-focus/pause-on-focus.ts'),
+        html: require('!!raw-loader!./demos/pause-on-focus/pause-on-focus.html'),
+        outlet: DemoCarouselPauseOnFocusComponent
       },
       {
         title: 'Custom content',

diff --git a/demo/src/app/components/+carousel/demos/accessibility/accessibility.html b/demo/src/app/components/+carousel/demos/accessibility/accessibility.html
@@ -1 +1,35 @@
 <p>The <code>alt</code> attribute is meant to help users not miss any content, so make sure your text is helpful to anyone not seeing the image. </p>
+
+<h4>Keyboard interaction</h4>
+<table class="table table-bordered">
+  <tbody>
+  <tr>
+    <td class="col-xs-3">
+      <code>
+        LEFT_ARROW
+      </code>
+    </td>
+    <td class="col-xs-9">
+      Move to a previous slide
+    </td>
+  </tr>
+  <tr>
+    <td class="col-xs-3">
+      <code>
+        RIGHT_ARROW
+      </code>
+    </td>
+    <td class="col-xs-9">
+      Move to a next slide
+    </td>
+  </tr>
+  <tr>
+    <td class="col-xs-3">
+      <code>SPACE</code> or <code>ENTER</code>
+    </td>
+    <td class="col-xs-9">
+      Move to a next slide
+    </td>
+  </tr>
+  </tbody>
+</table>
diff --git a/demo/src/app/components/+carousel/demos/index.ts b/demo/src/app/components/+carousel/demos/index.ts
@@ -2,7 +2,7 @@ import { DemoCarouselDynamicComponent } from './dynamic/dynamic';
 import { DemoCarouseBasicComponent } from './basic/basic';
 import { DemoCarouselCaptionsComponent } from './captions/captions';
 import { DemoCarouselConfigComponent } from './config/config';
-import { DemoCarouselNoPauseComponent } from './no-pause/no-pause';
+import { DemoCarouselPauseOnHoverComponent } from './pause-on-hover/pause-on-hover';
 import { DemoCarouselCustomContentComponent } from './custom-content/custom-content';
 import { DemoCarouselIntervalComponent } from './interval/interval';
 import { DemoCarouselDisableIndicatorComponent } from './disable-indicator/disable-indicator';
@@ -11,24 +11,30 @@ import { DemoCarouselSlideChangedEventComponent } from './slide-changed-event/sl
 import { DemoCarouselMultilistComponent } from './multilist/multilist';
 import { DemoCarouselMultilistSingleOffsetComponent } from './multilist-single-offset/multilist-single-offset';
 import { DemoCarouselMultilistFromIndexComponent } from './multilist-from-index/multilist-from-index';
-import { DemoCarouselMultilistIndicatorsByChunkComponent } from './multilist-indicators-by-chunk/multilist-indicators-by-chunk';
+
+import {
+  DemoCarouselMultilistIndicatorsByChunkComponent
+} from './multilist-indicators-by-chunk/multilist-indicators-by-chunk';
+
 import { DemoAccessibilityComponent } from './accessibility/accessibility';
+import { DemoCarouselPauseOnFocusComponent } from './pause-on-focus/pause-on-focus';
 
 export const DEMO_COMPONENTS = [
-  DemoCarouselDynamicComponent,
+  DemoAccessibilityComponent,
   DemoCarouseBasicComponent,
   DemoCarouselCaptionsComponent,
   DemoCarouselConfigComponent,
-  DemoCarouselNoPauseComponent,
   DemoCarouselConfigComponent,
   DemoCarouselCustomContentComponent,
-  DemoCarouselIntervalComponent,
   DemoCarouselDisableIndicatorComponent,
   DemoCarouselDisableLoopingComponent,
-  DemoCarouselSlideChangedEventComponent,
+  DemoCarouselDynamicComponent,
+  DemoCarouselIntervalComponent,
   DemoCarouselMultilistComponent,
-  DemoCarouselMultilistSingleOffsetComponent,
   DemoCarouselMultilistFromIndexComponent,
   DemoCarouselMultilistIndicatorsByChunkComponent,
-  DemoAccessibilityComponent
+  DemoCarouselMultilistSingleOffsetComponent,
+  DemoCarouselPauseOnFocusComponent,
+  DemoCarouselPauseOnHoverComponent,
+  DemoCarouselSlideChangedEventComponent
 ];
diff --git a/demo/src/app/components/+carousel/demos/no-pause/no-pause.ts b/demo/src/app/components/+carousel/demos/no-pause/no-pause.ts
diff --git a/...ts/+carousel/demos/no-pause/no-pause.html → .../demos/pause-on-focus/pause-on-focus.html b/...ts/+carousel/demos/no-pause/no-pause.html → .../demos/pause-on-focus/pause-on-focus.html
@@ -1,4 +1,4 @@
-<carousel [noPause]="noPause">
+<carousel [pauseOnFocus]="true">
   <slide>
     <img src="assets/images/nature/4.jpg" alt="First slide" style="display: block; width: 100%;">
     <div class="carousel-caption d-none d-md-block">
@@ -21,9 +21,3 @@ <h3>Third slide label</h3>
     </div>
   </slide>
 </carousel>
-<br/>
-<div>
-  <button type="button" class="btn btn-info"
-          (click)="noPause = !noPause">Toggle pause on hover
-  </button>
-</div>
diff --git a/demo/src/app/components/+carousel/demos/pause-on-focus/pause-on-focus.ts b/demo/src/app/components/+carousel/demos/pause-on-focus/pause-on-focus.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-pause-on-focus',
+  templateUrl: './pause-on-focus.html'
+})
+export class DemoCarouselPauseOnFocusComponent {}
diff --git a/demo/src/app/components/+carousel/demos/pause-on-hover/pause-on-hover.html b/demo/src/app/components/+carousel/demos/pause-on-hover/pause-on-hover.html
@@ -0,0 +1,23 @@
+<carousel [noPause]="false">
+  <slide>
+    <img src="assets/images/nature/4.jpg" alt="First slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>First slide label</h3>
+      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+    </div>
+  </slide>
+  <slide>
+    <img src="assets/images/nature/5.jpg" alt="Second slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>Second slide label</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+    </div>
+  </slide>
+  <slide>
+    <img src="assets/images/nature/6.jpg" alt="Third slide" style="display: block; width: 100%;">
+    <div class="carousel-caption d-none d-md-block">
+      <h3>Third slide label</h3>
+      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
+    </div>
+  </slide>
+</carousel>
diff --git a/demo/src/app/components/+carousel/demos/pause-on-hover/pause-on-hover.ts b/demo/src/app/components/+carousel/demos/pause-on-hover/pause-on-hover.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-carousel-pause-on-hover',
+  templateUrl: './pause-on-hover.html'
+})
+export class DemoCarouselPauseOnHoverComponent {}
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts
@@ -263,6 +263,11 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": ""
       },
+      {
+        "name": "pauseOnFocus",
+        "type": "boolean",
+        "description": ""
+      },
       {
         "name": "showIndicators",
         "type": "boolean",
@@ -343,6 +348,41 @@ export const ngdoc: any = {
         ],
         "returnType": "void"
       },
+      {
+        "name": "keydownPress",
+        "description": "<p>Swith slides by enter, space and arrows keys</p>\n",
+        "args": [
+          {
+            "name": "event",
+            "type": "KeyboardEvent"
+          }
+        ],
+        "returnType": "void"
+      },
+      {
+        "name": "onMouseLeave",
+        "description": "<p>Play on mouse leave</p>\n",
+        "args": [],
+        "returnType": "void"
+      },
+      {
+        "name": "onMouseUp",
+        "description": "<p>Play on mouse up</p>\n",
+        "args": [],
+        "returnType": "void"
+      },
+      {
+        "name": "pauseFocusIn",
+        "description": "<p>When slides on focus autoplay is stopped(optional)</p>\n",
+        "args": [],
+        "returnType": "void"
+      },
+      {
+        "name": "pauseFocusOut",
+        "description": "<p>When slides out of focus autoplay is started</p>\n",
+        "args": [],
+        "returnType": "void"
+      },
       {
         "name": "selectSlide",
         "description": "<p>Rolling to specified slide</p>\n",
@@ -440,12 +480,24 @@ export const ngdoc: any = {
     "description": "",
     "methods": [],
     "properties": [
+      {
+        "name": "indicatorsByChunk",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>If <code>true</code> - carousel indicators indicate slides chunks\nworks ONLY if singleSlideOffset = FALSE</p>\n"
+      },
       {
         "name": "interval",
         "defaultValue": "5000",
         "type": "number",
         "description": "<p>Default interval of auto changing of slides</p>\n"
       },
+      {
+        "name": "itemsPerSlide",
+        "defaultValue": "1",
+        "type": "number",
+        "description": "<p>If value more then 1 — carousel works in multilist mode</p>\n"
+      },
       {
         "name": "noPause",
         "defaultValue": "false",
@@ -458,11 +510,23 @@ export const ngdoc: any = {
         "type": "boolean",
         "description": "<p>Is slides can wrap from the last to the first slide</p>\n"
       },
+      {
+        "name": "pauseOnFocus",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>Slides can be paused on focus</p>\n"
+      },
       {
         "name": "showIndicators",
         "defaultValue": "true",
         "type": "boolean",
         "description": "<p>Show carousel-indicators</p>\n"
+      },
+      {
+        "name": "singleSlideOffset",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>If <code>true</code> — carousel shifts by one element. By default carousel shifts by number\nof visible elements (itemsPerSlide field)</p>\n"
       }
     ]
   },