@salesforcedevs/arch-components 1.27.21 → 1.27.22

package/src/modules/arch/content/content.ts

@@ -1,169 +0,0 @@
-import { api, LightningElement, track } from 'lwc';
-import { createImageUrl, sendInteractionEvent, InteractionEventTypes } from 'arch/helpers';
-
-const ARCHITECT_BASE_REGEX = /^https?:\/\/([\w-]*\.)?architect/; // matches roughly any subdomain of architect
-
-export default class extends LightningElement {
-    private observer!: MutationObserver;
-    private didSetContent = false;
-
-    @api socialTitle: string | null = null;
-    @api lastUpdated: string | null = null;
-    @api readingTime: string | null = null;
-    @api navHidden: string | null = null;
-    @api imageHash: string | null = null;
-
-    @track private headings: {
-        href: string;
-        id: string;
-        label: string;
-    }[] = [];
-
-    private get showHeadingsNav() {
-        return this.navHidden === null && this.headings.length > 0;
-    }
-
-    private get rootClassName() {
-        return 'root';
-    }
-
-    connectedCallback() {
-        this.observer = new MutationObserver(() => {
-            this.setContent();
-        });
-        this.observer.observe(this.template.host, {
-            characterData: true,
-            childList: true,
-            subtree: true
-        });
-        this.setContent();
-        const that = this;
-        window.addEventListener('hashchange', function locationHashChanged() {
-            const heading: HTMLElement | null = that.template.querySelector(`[id="${window.location.hash.substring(1)}"]`);
-            if (heading) {
-                heading.style.scrollMarginTop = `var(--dx-g-global-header-height)`; // required adjustment for global nav
-                heading.scrollIntoView({
-                    behavior: 'instant', // we can't use smooth here anymore, because the global nav MFE resizes itself and messes up scrolling
-                    block: "start",
-                });
-            }
-        });
-    }
-
-    disconnectedCallback() {
-        this.observer.disconnect();
-    }
-
-    renderedCallback() {
-        if (!this.didSetContent) {
-            this.didSetContent = true;
-            this.setContent();
-            if (window.location.hash) {
-                this.scrollToHash(window.location.hash);
-            }
-        }
-    }
-
-    private onHeadingClick(e: MouseEvent) {
-        const anchor = e.currentTarget as HTMLAnchorElement;
-        this.scrollToHash(anchor.hash);
-    }
-
-    private onContentClick(e: MouseEvent) {
-        const element = e.target as HTMLElement;
-        const targetIsImage =
-            element instanceof HTMLImageElement &&
-            element.parentElement instanceof HTMLAnchorElement;
-
-        if (element instanceof HTMLAnchorElement || targetIsImage) {
-            const anchorEl = targetIsImage ? element.parentElement : element;
-            const url = new URL(
-                anchorEl.href || element.src,
-                window.location.protocol + '//' + window.location.host
-            );
-            const filename = url.pathname.substr(
-                url.pathname.lastIndexOf('/') + 1
-            );
-
-            if (anchorEl.hasAttribute('download') || filename.includes('.')) {
-                const regexImg = new RegExp(/[^\s]+(.*?).(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF|webp)$/);
-                if (regexImg.test(filename)) {
-                    sendInteractionEvent('Image Click', InteractionEventTypes.IMAGE_CLICK, e, element)
-                } else {
-                    sendInteractionEvent('File Download', InteractionEventTypes.FILE_DOWNLOAD, e, anchorEl)
-                }
-            } else if (anchorEl.target) {
-                sendInteractionEvent('Link Click', InteractionEventTypes.CLICK, e, anchorEl);
-            }
-        }
-    }
-
-    private scrollToHash(hash: string) {
-        const heading: HTMLElement | null = this.template.querySelector(`[id="${hash.split('?')[0].substring(1)}"]`);
-        if (heading) {
-            heading.style.scrollMarginTop = `var(--dx-g-global-header-height)`; // required adjustment for global nav
-            heading.scrollIntoView({
-                behavior: "instant",
-                block: "start",
-            });
-        }
-    }
-
-    private setContent() {
-        const main = this.template.querySelector('main');
-        if (main) {
-            main.innerHTML = this.template.host.innerHTML.replace(
-                /(<table>[\s\S]+?<\/table>)/g,
-                `<div class="table">$1</div>`
-            );
-            this.headings = Array.from(main.querySelectorAll('h2,h3')).map(
-                (n) => {
-                    const label = n.innerText.trim();
-                    const id = label.replace(/[^a-zA-Z0-9]/g, '_');
-                    const href = `#${id}`;
-                    const style =
-                        n.tagName === 'H3' ? 'padding-left: 1.25rem' : '';
-                    // Side effects in map ftw
-                    n.id = id;
-                    return { href, id, label, style };
-                }
-            );
-            Array.from(main.querySelectorAll('a')).forEach((el) => {
-                if (
-                    !el.href.startsWith('/') &&
-                    !ARCHITECT_BASE_REGEX.test(el.href) &&
-                    !el.href.startsWith('about:blank#') &&
-                    !el.href.startsWith('http://localhost') &&
-                    !el.href.startsWith('https://sfdc.co') &&
-                    !el.href.startsWith('https://sf-archs.cdn.salesforce-experience.com') &&
-                    !el.href.includes('herokuapp.com')
-                ) {
-                    const doc = el.ownerDocument;
-                    const img = doc.createElement('img');
-                    img.src = 'https://developer.salesforce.com/ns-assets/new_window.svg';
-                    img.style =
-                        'display: inline;height: 1.2rem;margin:0 0 0 5px;';
-                    img.alt = 'Open link in new window';
-                    el.appendChild(img);
-                    el.target = '_blank';
-                    el.rel = 'noopener';
-                }
-            });
-            Array.from(main.querySelectorAll('img')).forEach((el) => {
-                el.src = createImageUrl(el.src, this.imageHash);
-            });
-        }
-    }
-
-    private get showScroll() {
-        return parseInt(this.readingTime, 10) > 4;
-    }
-
-    private onScrollClick() {
-        window.scroll({
-            top: 0,
-            left: 0,
-            behavior: 'smooth'
-        });
-    }
-}