@keditor/components/hero-media/hero-media.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, getHeroData} from '../helper.js';

export class HeroMedia 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() {
    let heroDataArr = [];
    const entryData = await getEntryData(this.id, this.accessToken, this.space, this.environment);
    const heroDataGet = get(entryData, 'heromediaSlides')
    const heroData = await getHeroData(heroDataGet, this.accessToken, this.space, this.environment)
    if(heroData){
      heroDataArr = heroData.map((items) => {
        const itemData = Object.values(items);
        return({
          image: itemData[0].imageUrl,
          title: itemData[0].title,
          short_title: itemData[0].shortTitle,
          subhead: itemData[0].subhead,
          summary: itemData[0].description.content[0] && itemData[0].description.content[0].content[0].value,
          link_url: itemData[0].linkurl,
          link_text: itemData[0].linkText,
          text_position: itemData[0].textPosition,
          background_color: itemData[0].textBackgroundColor
        })
      })
    }
    this.image = heroDataArr

  }

  render() {
    return html `
        <div id="heromedia" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner" >
          ${this.image.map((item, index) =>
            html`
              <div class=${index === 0 ? "item active": "item"}>
                <div >
                    <div class="photo-panel">
                      <img src=${item.image} width="100%" height="" alt=""/>
                    </div>
                    <div class="photo-overlay ${item.text_position}" style="background-color:${item.background_color};">
                      <div class="photo_title hero_banner_title">
                          <h1>${item.title}</h1>
                      </div>
                      <div class="photo_short_title hero_banner_short_title">
                          <h4>${item.short_title}</h4>
                      </div>
                      <div class="photo_subhead hero_banner_subhead">${item.subhead}</div>
                      <div class="photo_desc hero_banner_text_desc">
                        ${item.summary}
                      </div>
                      ${item.link_url ?
                        html`<div class="photo_btn_wrapper">
                              <a href=${item.link_url} class="button__group btn btn-primary" tabindex="0">${item.link_text}</a>
                            </div>` :
                        html ``
                      }
                    </div>
                </div>
              </div>
              `
            )}
          </div>
          ${this.image.length > 1 ?
          html `<!-- Left and right controls -->
        <a class="left carousel-control" href="#heromedia" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#heromedia" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
          ` : html`` }
        </div>
        <style>

          #heromedia .carousel-control {
            top: 22px;
            width: 5%;
          }

          #heromedia #text-left {
            text-align: left;
          }

          #heromedia #text-center {
            text-align: center;
          }

          #heromedia #text-right {
            text-align: end;
          }
          .photo-overlay {
            position: relative;
            bottom: 0;
            width: 100%;
            padding: 20px 5%;
            color: #FFF;
          }
          @media (min-width: 768px) {
            .photo-overlay {
              position: absolute;
            }
          }

        </style>
    `;
  }

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

}