bellini/ts_catalog/elements/bellini-content.ts

import {
  DeesElement,
  property,
  state,
  html,
  customElement,
  type TemplateResult,
  cssManager,
  css,
} from '@design.estate/dees-element';

import * as belliniApi from '@bellini/api';

import * as domtools from '@design.estate/dees-domtools';
import { BelliniArticleGrid } from './bellini-articlegrid.js';
import { BellliniArticlebox } from './bellini-articlebox.js';
import { BelliniArticlelist } from './bellini-articlelist.js';

@customElement('bellini-content')
export class BelliniContent extends DeesElement {
  // STATIC
  public static demo = () => html`
    <bellini-content publicationName="central.eu"></bellini-content>
  `;

  // INSTANCE
  @property({ type: Array })
  public articles: belliniApi.IBelliniClientState['articles'] = [];

  @property({ type: Object })
  public selectedArticle: belliniApi.IBelliniClientState['articles'][0] = null;

  @state()
  private showArticle: boolean = false;

  @property()
  public gridStyle: 'grid' | 'list' = 'list';

  @property()
  public publicationName: string;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        background: ${cssManager.bdTheme(
          'var(--background2, #eeeeeb)',
          'var(--background2, #000000)'
        )};
        position: relative;
        color: var(--betanews-color-font);
        padding-bottom: 0px;
        z-index: 1;
      }

      .main .contentsettings {
        user-select: none;
        height: 50px;
        color: ${cssManager.bdTheme('#333', '#fff')};
        border-radius: 3px;
        background: ${cssManager.bdTheme('#fff', '#333')};
        margin-bottom: 15px;
        padding: 5px;
        display: grid;
        grid-template-columns: auto 50px 50px 50px;
        grid-gap: 5px;
      }

      .main a {
        display: inline-block;
        text-decoration: none;
        color: ${cssManager.bdTheme('#333', 'FFF')};
        border-radius: 3px;
        height: 100%;
        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
        text-align: center;
        padding-top: 9px;
        padding-left: 10px;
        padding-right: 10px;
        cursor: pointer;
        font-family: 'Roboto Slab';
      }

      ${cssManager.cssForPhablet(css`
        .main a {
          font-size: 12px;
          padding-top: 12px;
          padding-left: 5px; 
          padding-right: 5px; 
        }
      `)}

      ${cssManager.cssForPhone(css`
        .main a {
          display: none; 
        }
      `)}

      .main .contentsettings span {
        display: block;
        border-radius: 3px;
        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
        text-align: center;
        padding-top: 12px;
        cursor: pointer;
      }

      .main .contentsettings span:hover,
      .main .contentsettings a:hover {
        background: ${cssManager.bdTheme('#CCC', '#111')};
      }

      .pagespacer {
        max-width: var(--lelecv-pagewidth, 1200px);
        position: relative;
        margin: auto;
      }

      ${cssManager.cssForNotebook(css`
        .pagespacer {
          margin: 0px 15px;
        }
      `)}
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="main">
        <div class="pagespacer">
          <div class="contentsettings">

            <div>
              <a href="https://newyork.today">NewYork</a>
              <a href="https://central.eu">Europe</a>
              <a href="https://finance.plus">Finance</a>
              <a href="https://start.plus">Startups</a>
              <a href="https://coffee.link">Coffee And Stories</a>
            </div>
            <span
              @click="${() => {
                
              }}"
              ><dees-icon iconName="search"></dees-icon></span
            >
            <span
              @click="${() => {
                this.setGridStyle('grid');
              }}"
              ><dees-icon iconName="grid_view"></dees-icon></span
            >
            <span
              @click="${() => {
                this.setGridStyle('list');
              }}"
              ><dees-icon iconName="view_list"></dees-icon></span
            >
          </div>
          ${this.showArticle
            ? html`
                <bellini-articlebox .selectedArticle=${this.selectedArticle}></bellini-articlebox>
              `
            : html`
                ${this.gridStyle === 'grid'
                  ? html`<bellini-articlegrid .articles=${this.articles}></bellini-articlegrid>`
                  : html`<bellini-articlelist .articles="${this.articles}"></bellini-articlelist>`}
              `}
        </div>
      </div>
    `;
  }

  public async firstUpdated() {
    const domtoolsInstance = await this.domtoolsPromise;
    domtoolsInstance.router.on('/', async (routeArg) => {
      this.selectedArticle = null;
      domtoolsInstance.websetup.revertToBaseLevel();
    });
    domtoolsInstance.router.on('/article/:id/:title', async (routeArg) => {
      const wantedId = routeArg.params.id;
      this.selectedArticle = this.articles.find((item) => item.belliniId === wantedId);
      if (this.selectedArticle) {
        const taglevel = await domtoolsInstance.websetup.setSubLevel({
          title: `${this.selectedArticle.title} - ${this.publicationName}`,
          description: `${this.selectedArticle.content.substr(0, 100)}`,
        });
        taglevel.addNewsArticleInfo(this.selectedArticle);
      }
    });
    domtoolsInstance.router._handleRouteState();

    // lets handle state
    const belliniApiInstance = new belliniApi.BelliniClient({
      publicationName: this.publicationName,
      smartstatePart: await domtoolsInstance.smartstate.getStatePart<any>('bellini', {}, 'soft'),
    });

    belliniApiInstance.fetchArticles(); // lets don't wait here
    (await domtoolsInstance.smartstate.getStatePart<belliniApi.IBelliniClientState>('bellini'))
      .select((stateArg) => stateArg.articles)
      .subscribe((articlesArg) => {
        this.articles = articlesArg;
        domtoolsInstance.router._handleRouteState();
      });
  }

  public async updated() {
    const domtoolsInstance = await this.domtoolsPromise;
    const belliniArticlebox: BellliniArticlebox =
      this.shadowRoot.querySelector('bellini-articlebox');
    const belliniArticleGrid: BelliniArticleGrid =
      this.shadowRoot.querySelector('bellini-articlegrid');
    const belliniArticleList: BelliniArticlelist =
      this.shadowRoot.querySelector('bellini-articlelist');

    if (this.selectedArticle && (belliniArticleGrid || belliniArticleList)) {
      if (belliniArticleList) await belliniArticleList.show(false);
      if (belliniArticleGrid) await belliniArticleGrid.show(false);
      this.showArticle = true;
    } else if (!this.selectedArticle && belliniArticlebox) {
      await belliniArticlebox.show(false);
      this.showArticle = false;
    } else if (this.selectedArticle && belliniArticlebox) {
      const offset = window.innerWidth > 600 ? -20 : 0;
      domtoolsInstance.scroller.toElement(belliniArticlebox, {
        offset,
      });
      belliniArticlebox.show(true);
    }
    domtoolsInstance.router._handleRouteState();
  }

  setGridStyle(gridStyleArg: 'grid' | 'list') {
    this.gridStyle = gridStyleArg;
  }
}