0

I want to make a lwc component same as hoverableLink.

enter image description here

This is the "hoverableLink" component code I get from the lwc source files. Unfortunately I can barely understand it.

If I want to understand the whole js code, how it works and how to code something similar, which frame should I learn? Is it JQuery? Or the "component" concept comes from ES6 and this is just simple Js code?

Any suggestion is appreciated.

(function s() {
return(funct(ion() {
    $A.componentService.addModule'markup:/r/force:hoveableLink', 'force/hoverableLink', ['lwc', 'lightning/buttonIcon', '@salesforce/label/InlineEdit.preview', 'lightning/utils', 'lightning/datatableKeyboardMixins'], function(e, o, i, t, s) {
        o=o&&Object.prototype.hasOwnProperty.call(o, "default")?o.default: o, i=i&&Object.prototype.hasOwnProperty.call(i, "default")?i.default:i;

        var n=[function(e, o, i) {
            return[i?":host{display:block}":[e, "{display:block}"].join(""), ".hide-hover-icon", o, "{position:absolute;clip:rect(1px 1px 1px 1px);clip-path:polygon(0 0,0 0,0 0,0 0)}a", o, "{text-decoration:none;display:inline-block;vertical-align:middle}a", o, " span", o, "{border-bottom:var(--lwc-borderWidthThin,1px) dotted;display:inline}.flex-wrap-ie11", o, "{overflow:hidden}"].join("")
        }

        ];

        function l(e, i, t, s) {
            const {
                d: n, h:l, b:h, c:r
            }

            =e, {
                _m0: a, _m1:c, _m2:u, _m3:d, _m4:v, _m5:w, _m6:m, _m7:p, _m8:g, _m9:y
            }

            =s;

            return[i.hasValue?l("div", {
                classMap: {
                    "slds-grid":  !0
                }

                , key:3
            }

            , [l("a", {
                className:i.computedAnchorClass, attrs: {
                    href: i.href, tabindex:"0"
                }

                , key:1, on: {
                    mouseover: a||(s._m0=h(i.handleMouseover)), mouseout:c||(s._m1=h(i.handleMouseout)), mousedown:u||(s._m2=h(i.handleMousedown)), click:d||(s._m3=h(i.handleClick)), dblclick:v||(s._m4=h(i.handleDoubleClick)), focus:w||(s._m5=h(i.handleFocus)), blur:m||(s._m6=h(i.handleBlur))
                }
            }

            , [l("span", {
                key: 0
            }

            , [n(i.text)])]), r("lightning-button-icon", o, {
                className:i.computedPreviewIconClass, props: {
                    iconName: "utility:preview", variant:"bare", alternativeText:i.computedPreviewTitle
                }

                , key:2, on: {
                    click: p||(s._m7=h(i.handlePreviewIconClick)), focus:g||(s._m8=h(i.handlePreviewIconFocus)), blur:y||(s._m9=h(i.handlePreviewIconBlur))
                }
            }

            , [])]):null]
        }

        var h=e.registerTemplate(l);

        l.stylesheets=[], n&&l.stylesheets.push.apply(l.stylesheets, n), l.stylesheetTokens= {
            hostAttribute: "force-hoverableLink_hoverableLink-host", shadowAttribute:"force-hoverableLink_hoverableLink"
        }

        ;

        class r extends(s.baseNavigation(e.LightningElement)) {
            constructor(...e) {
                super(...e), this.href=void 0, this.text="", this.shouldTruncate= !1, this.isFocusing= !1, this._showDelay=300, this._hideDelay=100, this.timeoutId=null, this.isHoverShowing= !1, this.shouldHidePreviewIconOnBlur= !1, this.shouldShowPreviewIconOnFocus= !0
            }

            notifyPanelClose() {
                this.isHoverShowing= !1
            }

            get hideDelay() {
                return this._hideDelay
            }

            get showDelay() {
                return this._showDelay
            }

            set showDelay(e) {
                const o=parseInt(e, 10);
                Number.isInteger(o)&&(this._showDelay=o)
            }

            set hideDelay(e) {
                const o=parseInt(e, 10);
                Number.isInteger(o)&&(this._hideDelay=o)
            }

            get computedPreviewIconClass() {
                return t.classSet("slds-shrink-none").add( {
                    "hide-hover-icon":  !this.isFocusing
                }

                )
            }

            get computedPreviewTitle() {
                return i.replace("{0}", this.text)
            }

            get computedAnchorClass() {
                return t.classSet("flex-wrap-ie11").add( {
                    "slds-truncate": this.shouldTruncate
                }

                )
            }

            get hasValue() {
                return ! !this.text
            }

            handleClick(e) {
                this.hideHoverWithDelay(e, 0)
            }

            handleDoubleClick(e) {
                this.showHoverWithDelay(e, {
                    enableFocusHoverPanelEventHandler:  !0, shouldReturnFocus: !0
                }

                , 0)
            }

            handleMouseover(e) {
                this.showHoverWithDelay(e, {
                    enableFocusHoverPanelEventHandler:  !1, shouldReturnFocus: !1
                }

                , this.showDelay)
            }

            handleMouseout(e) {
                this.hideHoverWithDelay(e, this.hideDelay)
            }

            handleMousedown() {
                this.shouldShowPreviewIconOnFocus= !1
            }

            focus() {
                const e=this.template.querySelector("a");
                e&&e.focus()
            }

            handleFocus() {
                this.shouldShowPreviewIconOnFocus?this.isFocusing= !0: this.shouldShowPreviewIconOnFocus= !0
            }

            handleBlur(e) {
                this.isHoverShowing||this.hideHoverWithDelay(e, 0), this.isFocusing= !1
            }

            handlePreviewIconClick(e) {
                this.showHoverWithDelay(e, {
                    enableFocusHoverPanelEventHandler:  !0, shouldReturnFocus: !0
                }

                , 0), this.shouldHidePreviewIconOnBlur= !1, e.stopPropagation()
            }

            handlePreviewIconBlur() {
                this.shouldHidePreviewIconOnBlur&&(this.isFocusing= !1)
            }

            handlePreviewIconFocus() {
                this.isFocusing= !0, this.shouldHidePreviewIconOnBlur= !0
            }

            showHoverWithDelay(e, o, i) {
                this.cancelUpcomingTimeout(), this.isHoverShowing&&this.hideHover();

                const t=e.target, s=Object.assign( {
                    reference: t
                }

                , o);

                this.timeoutId=setTimeout(()=> {
                    this.showHover(s)
                }

                , i)
            }

            hideHover() {
                const e=new CustomEvent("hidehover", {
                    bubbles:  !0, composed: !0, cancelable: !0
                }

                );
                this.dispatchEvent(e)
            }

            hideHoverWithDelay(e, o) {
                this.cancelUpcomingTimeout(), this.isHoverShowing&&(0===o?this.hideHover():this.timeoutId=setTimeout(()=> {
                    this.hideHover()
                }

                , o))
            }

            showHover(e) {
                const o=new CustomEvent("showhover", {
                    bubbles: !0, composed: !0, cancelable: !0, detail: {
                        hoverPanelConfig: e
                    }
                }

                );
                this.dispatchEvent(o), this.isHoverShowing= !0
            }

            cancelUpcomingTimeout() {
                this.timeoutId&&clearTimeout(this.timeoutId), this.timeoutId=null
            }
        }

        return e.registerDecorators(r, {
            publicProps: {
                href: {
                    config: 0
                }

                , text: {
                    config: 0
                }

                , shouldTruncate: {
                    config: 0
                }

                , hideDelay: {
                    config: 3
                }

                , showDelay: {
                    config: 3
                }
            }

            , publicMethods:["notifyPanelClose", "focus"], track: {
                isFocusing: 1
            }

            , fields:["_showDelay", "_hideDelay", "timeoutId", "isHoverShowing", "shouldHidePreviewIconOnBlur", "shouldShowPreviewIconOnFocus"]
        }

        ), e.registerComponent(r, {
            tmpl: h
        }

        )
    }

    );
}

)})()
2

This is obfuscated JavaScript "LWC compiler" output. LWCs are "compiled" from source that is a combination of JavaScript, CSS and HTML, turning this into obfuscated JavaScript.

There's no point trying to understand it for writing your own code; that's like trying to reverse-engineer C++ from assembler. Instead you should look at the Lightning Design System blueprints and work your way from there.

The popover blueprint seems like a fair starting point for your requirement.

For how to write LWCs, start from the introductory developer documentation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.