css-navigation-library

Navigation library for the lovers of css based on javascript😊

1. Example
2. Usage
3. Angular Implementation
4. Already tested on
5. Comming soon

Examples

Horizontal Carousels

Vertical Carousels

Grid Carousels

Multiple Carousels

Usage

Initialization

1. Add the src files in the project
2. Implement the styles.scss at the root of the app
3. Initialize the main somewhere at the root of the app

   import { init } from "../assets/src/main.js";
   export class AppComponent {
   ...
   constructor() {
    init() // Initialize navigation library
   }
   }

Implementing carousels + focusable elements

‼️ All the focusable elements should have a .focusable-element class wrapped by a .carousel-container class

‼️ All the grid carousels should have a .carousel-container-row class by row and all the rows should be wrapped by a .carousel-container class

Global variables usage

Angular Implementation

1. Use the (focus) event on html .carousel-container elements to set the needed values for the type of carousel

   <div class="carousel-container" (focus)="setCarouselType()"></div>

  /**
   * Navigation - .ts file
   */
  setCarouselType(): void {
    window.isInGridCarousel = true;
    window.isInNormalCarousel = false;
  }

1. Use the (keydown) event on html .focusable-element elements for horizontal movement for normal carousels and set the [ngStyle]="move"
2. The key down listens to the current key and updates the css
3. The keyDown function receives the cardWidth to do the exact movement of the carousel

4. The move attribute gets the movement to the right of the carousel

   <div class="carousel-container">
     <div
       tabindex="0"
       class="focusable-element"
       (keydown)="keyDown($event, cardWidth)"
       [ngStyle]="move"
     >
       <div class="card" [style.backgroundColor]="color">
         <h1>{{color}}</h1>
       </div>
   </div>

   // Navigation
   move = {
     right: '',
   };
   
   keyDown(e: any, cardWidth: number) {
     const cardRealSize = cardWidth;
   
     // Right arrow
     if (e.keyCode === 39) {
       // If not is infinite carousel and user is not on the last card
       if (window.actualHorizontal < this.container.length - 1) {
         window.actualHorizontal += 1;
         // Move the css and focus next card
         this.move.right = `${cardWidth * window.actualHorizontal}vw`;
       }
     }
     // Left arrow
     else if (e.keyCode === 37) {
       // If not is infinite carousel and user is not on the first card
       if (!this.isInfiniteCarousel && window.actualHorizontal > 0) {
         window.actualHorizontal -= 1;
         // Move the css and focus next card
         this.move.right = `${cardWidth * window.actualHorizontal}vw`;
       }
     }
   }

5. Use the (keydown) event on html .focusable-element elements for horizontal movement for infinite carousels
6. The container is the list of elements that are rendered on the carousel

   <div class="carousel-container">
     <div
       tabindex="0"
       class="focusable-element"
       (keydown)="keyDown($event)"
     >
       <div class="card" [style.backgroundColor]="color">
         <h1>{{color}}</h1>
       </div>
   </div>

   keyDown(e: any) {
     // Right arrow
     if (e.keyCode === 39) {
       // Get first element and add it to last position (circular behaviour)
       const firstElement = this.container?.shift();
       this.container?.push(firstElement);
     }
     // Left arrow
     else if (e.keyCode === 37) {
       // Get last element and add it to first position (circular behaviour)
       const lastElement = this.container?.pop();
       this.container?.unshift(lastElement);
     }
   }

‼️ For a more detailed usage go to usage-examples/angular-example

npm install
npm start
Project should be running on http://localhost:4200/ or selected port

✅ Already tested on

• <input checked="" disabled="" type="checkbox"> Samsung (2017-2021)
• <input checked="" disabled="" type="checkbox"> LG (2017-2021)
• <input checked="" disabled="" type="checkbox"> Vizio (series D and V)

👉 Currently used on aha smarttvs platforms https://www.aha.video/

🔜 Comming Soon

• <input disabled="" type="checkbox"> React implementation documentation and example

© 2022, Andrea Amaya