@vidal-community/vidal-web-components/vidal-reco-clic/vidal-reco-clic-toc.js

Vidal Web Components

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
let VidalRecoClicToc = class VidalRecoClicToc extends LitElement {
    constructor() {
        super(...arguments);
        this.emitClickOnLink = (idToGo) => console.log(idToGo);
    }
    get recoId() {
        return this._recoId;
    }
    set recoId(recoId) {
        this._recoId = recoId;
        this.fetchTocHtml();
    }
    get recoTocSupplier() {
        return this._recoTocSupplier;
    }
    set recoTocSupplier(recoTocSupplier) {
        this._recoTocSupplier = recoTocSupplier;
        if (!this._tocElement) {
            this.fetchTocHtml();
        }
    }
    render() {
        return html ` <div class="toc">${this._tocElement}</div> `;
    }
    async updated() {
        this.removeMenuBulletsFromTocItemsHtml();
        this.addWrapperToTocTitleHtmlElement();
        this.addSpecificClassesToTocItemHtmlElement();
        this.setTocHtmlPositions();
        this.enableScrollFromTableOfContentToElementListeners();
    }
    addSpecificClassesToTocItemHtmlElement() {
        var _a;
        const tocItems = (_a = this._tocElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.toc-item');
        tocItems === null || tocItems === void 0 ? void 0 : tocItems.forEach((item) => {
            const parentElementClassList = item.parentElement.classList;
            if (!item.querySelector('.toc-subitems') &&
                !parentElementClassList.contains('toc-item') &&
                !parentElementClassList.contains('toc-subitems')) {
                item.classList.add('menu-without-submenus', 'menu');
            }
            else if (item.querySelector('.toc-subitems') &&
                !parentElementClassList.contains('toc-item') &&
                !parentElementClassList.contains('toc-subitems')) {
                item.classList.add('menu-with-submenus', 'menu');
            }
        });
    }
    addWrapperToTocTitleHtmlElement() {
        var _a, _b;
        const tocTitleHtmlElement = (_a = this._tocElement) === null || _a === void 0 ? void 0 : _a.querySelector('.toc-title');
        const tocTitleHtmlWrapper = document.createElement('div');
        tocTitleHtmlWrapper.classList.add('toc-title-wrapper');
        tocTitleHtmlWrapper.append(tocTitleHtmlElement);
        (_b = this._tocElement) === null || _b === void 0 ? void 0 : _b.prepend(tocTitleHtmlWrapper);
    }
    removeMenuBulletsFromTocItemsHtml() {
        var _a;
        const tocItems = (_a = this._tocElement) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.toc-item');
        tocItems === null || tocItems === void 0 ? void 0 : tocItems.forEach((item) => {
            const childNodes = [...item.childNodes];
            childNodes.map((childNode) => {
                const childNodeElement = childNode;
                if (childNodeElement.tagName !== 'DIV' &&
                    childNodeElement.tagName !== 'A') {
                    childNode.textContent = '';
                }
            });
        });
    }
    setTocHtmlPositions() {
        const tocHtmlElement = this._tocElement;
        if (tocHtmlElement) {
            tocHtmlElement.style.top = 15 + 'px';
            tocHtmlElement.style.left = 5 + 'px';
        }
    }
    async fetchTocHtml() {
        if (this.recoTocSupplier && this.recoId) {
            this.recoTocSupplier(`/rest/api/reco/${this.recoId}/toc/html`).then(async (response) => {
                const tocHtml = await response.text();
                this.parseTocElement(tocHtml);
            });
        }
    }
    parseTocElement(tocHtml) {
        const domParser = new DOMParser();
        const tocRecoHtmlContainer = domParser.parseFromString(tocHtml, 'text/html').firstElementChild;
        const tocElement = tocRecoHtmlContainer.querySelector('.toc-reco');
        const tocRecoStyleTag = tocRecoHtmlContainer.querySelector('style');
        tocElement === null || tocElement === void 0 ? void 0 : tocElement.append(tocRecoStyleTag);
        this._tocElement = tocElement;
    }
    toggleTocPanelOnButtonClick() {
        if (this._tocElement) {
            const rootElement = this.renderRoot.querySelector('.toc');
            const style = this._tocElement.style;
            if (style.animation.includes('open')) {
                rootElement.style.animation =
                    'close-table-of-content 500ms ease-in-out';
                style.animation = 'close-table-of-content 500ms ease-in-out';
            }
            else {
                rootElement.style.animation =
                    'open-table-of-content 500ms forwards ease-in-out';
                style.animation = 'open-table-of-content 500ms forwards ease-in-out';
            }
        }
    }
    enableScrollFromTableOfContentToElementListeners() {
        this.renderRoot.querySelectorAll('a').forEach((link) => {
            link.addEventListener('click', (event) => {
                var _a;
                event.preventDefault();
                const splitHref = (_a = link.getAttribute('href')) === null || _a === void 0 ? void 0 : _a.split('#');
                const idToGoTo = splitHref ? splitHref[splitHref.length - 1] : '';
                const vidalRecoClicElement = document === null || document === void 0 ? void 0 : document.querySelector('vidal-reco-clic');
                const decisionTreeElement = vidalRecoClicElement === null || vidalRecoClicElement === void 0 ? void 0 : vidalRecoClicElement.renderRoot.querySelector('vidal-reco-clic-decision-tree');
                const treeElement = decisionTreeElement === null || decisionTreeElement === void 0 ? void 0 : decisionTreeElement.querySelector('#' + idToGoTo);
                if (treeElement) {
                    this.openLeftPanelTabOnTocLinkClick(treeElement, decisionTreeElement);
                }
                this.emitClickOnLink(idToGoTo);
                this.toggleTocPanelOnButtonClick();
            });
        });
    }
    openLeftPanelTabOnTocLinkClick(treeElement, decisionTreeElement) {
        var _a;
        const treeElementId = treeElement.getAttribute('id');
        const treeWrapper = (_a = decisionTreeElement === null || decisionTreeElement === void 0 ? void 0 : decisionTreeElement.querySelector('#' + treeElementId)) === null || _a === void 0 ? void 0 : _a.closest('.arbre');
        const treeWrapperId = treeWrapper === null || treeWrapper === void 0 ? void 0 : treeWrapper.getAttribute('id');
        const correspondingTabElement = decisionTreeElement === null || decisionTreeElement === void 0 ? void 0 : decisionTreeElement.querySelector(`.tab[tree=${treeWrapperId}]`);
        correspondingTabElement === null || correspondingTabElement === void 0 ? void 0 : correspondingTabElement.click();
    }
};
VidalRecoClicToc.styles = css `
    :host {
      position: absolute;
      left: 50%;
      top: 38px;
      max-width: 25%;
      max-height: 100%;
    }

    .toc {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      z-index: 1;
    }

    .toc .toc-reco {
      border-width: 8px 0.1px;
      border-style: solid;
      border-color: rgb(67, 67, 67);
      position: relative;
      background: white;
      padding: 10px;
      border-radius: 10px;
      width: 0px;
      max-height: 100%;
      overflow: hidden;
      opacity: 0;
    }
    @keyframes open-table-of-content {
      0% {
        opacity: 0;
        width: 0%;
      }
      30% {
        opacity: 0;
      }
      100% {
        opacity: 1;
        width: 100%;
      }
    }

    @keyframes close-table-of-content {
      0% {
        opacity: 1;
        width: 100%;
      }
      70% {
        opacity: 0;
      }
      100% {
        width: 0%;
      }
    }

    .toc .toc-title-wrapper {
      padding: 15px 5px;
      text-transform: uppercase;
    }

    .toc .toc-title {
      text-align: left;
      color: inherit;
    }

    .toc .toc-title:before {
      content: '\\27A4';
      margin-right: 5px;
      font-size: 0.7em;
    }

    .toc .toc-item {
      margin: 0;
      border-top: 2px solid grey;
    }

    .toc .toc-item.menu:before {
      content: '\\27A4';
      margin-right: 5px;
      font-size: 0.7em;
    }

    .toc .toc-subitems {
      padding: 5px;
      text-transform: capitalize;
    }

    .toc .toc-subitems > .toc-item {
      border: none;
    }

    .toc-reco > .toc-item > .toc-subitems > .toc-item > a {
      font-weight: bold !important;
    }

    .toc-reco
      > .toc-item
      > .toc-subitems
      > .toc-item
      > .toc-subitems
      > .toc-item:before {
      content: '•';
      margin-right: 5px;
    }

    .toc .menu {
      padding: 15px 5px;
      margin: 0;
      text-transform: uppercase;
    }

    .toc .menu-without-submenus {
      border-top: 2px solid grey;
    }

    .toc .menu-with-submenus {
      border-top: 2px solid grey;
    }

    .toc .menu-with-submenus > .toc-subitems {
      margin-top: 5px;
      border-top: 1px solid grey;
    }

    .toc .menu:hover {
      box-shadow: 0 6px 2px -2px grey;
      border-radius: 4px;
    }
  `;
__decorate([
    state()
], VidalRecoClicToc.prototype, "_tocElement", void 0);
__decorate([
    property({ attribute: 'reco-id', type: Number })
], VidalRecoClicToc.prototype, "recoId", null);
__decorate([
    property()
], VidalRecoClicToc.prototype, "emitClickOnLink", void 0);
__decorate([
    property()
], VidalRecoClicToc.prototype, "recoTocSupplier", null);
VidalRecoClicToc = __decorate([
    customElement('vidal-reco-clic-toc')
], VidalRecoClicToc);
export { VidalRecoClicToc };
//# sourceMappingURL=vidal-reco-clic-toc.js.map