@keditor/components/slider/slider.js

A library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Contentful

import { LitElement, html } from "lit-element/lit-element.js";
import get from "lodash/get";
import {getEntryData, getAssetForSlider} from '../helper.js';

export class Slider extends LitElement {

  /**
   * HTMLElement spec
   */
  constructor() {
    super();
    this.id = 'Somebody';
    this.accessToken = 'accessToken';
    this.space = 'space';
    this.environment = 'environment';
    this.image = []
  }

  /**
   * LitElement properties definition
   */
  static get properties() {
    return {
      id: {type: String},
      accessToken: {type: String},
      space: {type: String},
      environment: {type: String},
      entryData: { type: Array },
      image: { type: Array }
    }
  }

  async firstUpdated() {
    const entryData = await getEntryData(this.id, this.accessToken, this.space, this.environment);
    this.image =await getAssetForSlider(get(entryData,"image"), this.accessToken, this.space, this.environment);
  }

  // eslint-disable-next-line class-methods-use-this
  script() {
    
  }

  // eslint-disable-next-line class-methods-use-this
  onLoad() {
    
  }

  /**
   * LitElement equivalent of attributeChangedCallback
   */
  updated() {
    
  }

  /**
   * Popular convention / LitElement
   */
  render() {
    return html `
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          ${this.image.map((item,index) => html`<li data-target="#myCarousel" data-slide-to=${index} class=${index === 0 ? "active": ""}></li>`)}
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
        ${this.image.map((item, index) => 
          html`
          <div class=${index === 0 ? "item active": "item"}>
            <img src=${item} alt="img">
          </div>
          `
        )}
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    `;
  }

  createRenderRoot() {
    /**
     * Render template without shadow DOM. Note that shadow DOM features like
     * encapsulated CSS and slots are unavailable.
     */
      return this;
    }
  
}