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

Global variable | Usage | Type of | Initial value ------------- | ------------- | -------------| ------------- actualHorizontal | Actual index on horizontal position | Number | 0 actualVertical | Actual index on vertical position | Number | 0 isInNormalCarousel | Current carousel is horizontal or vertical | Boolean | true isInGridCarousel | Current carousel is a grid | Boolean | false actualGridRow | Actual index on grid row | Number | 0 actualGridCell | Actual index on row cell | Number | 0 childrenBetweenUp | Access a diferent carousel on way up | Boolean | false childrenBetweenDown | Access a diferent carousel on way down | Boolean | false childrenBetweenLeft | Access a diferent carousel on way left | Boolean | false childrenBetweenRight | Access a diferent carousel on way right | Boolean | false goBack | Go back key number | Number | 8

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;
  }

2. Use the (keydown) event on html .focusable-element elements for horizontal movement for normal carousels and set the [ngStyle]="move"

• The key down listens to the current key and updates the css
• The keyDown function receives the cardWidth to do the exact movement of the carousel
• 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`;
      }
    }
  }

3. Use the (keydown) event on html .focusable-element elements for horizontal movement for infinite carousels

• 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

• [X] Samsung (2017-2021)
• [X] LG (2017-2021)
• [X] Vizio (series D and V)

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

🔜 Comming Soon

• [ ] React implementation documentation and example

© 2022, Andrea Amaya