Rewritten hyperlink binding handler into behavior.

Author: azaslonov

src/behaviors/hyperlinkBehavior.ts

@@ -0,0 +1,58 @@
+
+import { HyperlinkModel, HyperlinkTarget } from "@paperbits/common/permalinks";
+import { Attributes, DataAttributes, HyperlinkRels } from "@paperbits/common/html";
+
+export class HyperlinkBehavior {
+    public apply(element: HTMLElement, hyperlink: HyperlinkModel): void {
+        let href = "#";
+        let toggleType = null;
+        let triggerEvent = null;
+        let toggleTarget = null;
+        let isDownloadLink = false;
+        let targetWindow = null;
+        let rels = null;
+
+        if (hyperlink) {
+            switch (hyperlink.target) {
+                case HyperlinkTarget.popup:
+                    href = "javascript:void(0)";
+                    toggleType = "popup";
+                    triggerEvent = hyperlink.triggerEvent;
+                    toggleTarget = `#${hyperlink.targetKey.replace("popups/", "popups")}`;
+                    break;
+
+                case HyperlinkTarget.download:
+                    href = hyperlink.href;
+                    isDownloadLink = true;
+                    break;
+
+                default:
+                    toggleType = element.getAttribute("data-toggle");
+                    href = `${hyperlink.href}${hyperlink.anchor ? "#" + hyperlink.anchor : ""}`;
+                    targetWindow = hyperlink.target;
+
+                    if (hyperlink.targetKey?.startsWith("urls/")) {
+                        rels = [HyperlinkRels.NoOpener, HyperlinkRels.NoReferrer].join(" ");
+                    }
+            }
+        }
+
+        const hyperlinkObj = {
+            [DataAttributes.Toggle]: toggleType,
+            [DataAttributes.TriggerEvent]: triggerEvent,
+            [DataAttributes.Target]: toggleTarget,
+            [Attributes.Href]: href,
+            [Attributes.Target]: targetWindow,
+            [Attributes.Download]: isDownloadLink ? "" : null,
+            [Attributes.Rel]: rels
+        };
+
+        for (const key in hyperlinkObj) {
+            if (hyperlinkObj[key] !== null) {
+                element.setAttribute(key, hyperlinkObj[key]);
+            } else {
+                element.removeAttribute(key);
+            }
+        }
+    }
+}

src/ko/bindingHandlers/bindingHandlers.hyperlink.ts

@@ -1,69 +1,17 @@
 import * as ko from "knockout";
-import { HyperlinkModel, HyperlinkTarget } from "@paperbits/common/permalinks";
-import { Attributes, DataAttributes, HyperlinkRels } from "@paperbits/common/html";
-
+import { HyperlinkModel } from "@paperbits/common/permalinks";
+import { HyperlinkBehavior } from "../../behaviors/hyperlinkBehavior";
 
 ko.bindingHandlers["hyperlink"] = {
     update(element: HTMLElement, valueAccessor: () => HyperlinkModel): void {
         const hyperlink: HyperlinkModel = valueAccessor();
-        const attributesObservable = ko.observable();
-
-        const setElementAttributes = (hyperlink: HyperlinkModel) => {
-            let href = "#";
-            let toggleType = null;
-            let triggerEvent = null;
-            let toggleTarget = null;
-            let isDownloadLink = false;
-            let targetWindow = null;
-            let rels = null;
-
-            if (hyperlink) {
-                switch (hyperlink.target) {
-                    case HyperlinkTarget.popup:
-                        href = "javascript:void(0)";
-                        toggleType = "popup";
-                        triggerEvent = hyperlink.triggerEvent;
-                        toggleTarget = `#${hyperlink.targetKey.replace("popups/", "popups")}`;
-                        break;
-
-                    case HyperlinkTarget.download:
-                        href = hyperlink.href;
-                        isDownloadLink = true;
-                        break;
-
-                    default:
-                        toggleType = element.getAttribute("data-toggle");
-                        href = `${hyperlink.href}${hyperlink.anchor ? "#" + hyperlink.anchor : ""}`;
-                        targetWindow = hyperlink.target;
-
-                        if (hyperlink.targetKey?.startsWith("urls/")) {
-                            rels = [HyperlinkRels.NoOpener, HyperlinkRels.NoReferrer].join(" ");
-                        }
-                }
-            }
-
-            const hyperlinkObj = {
-                [DataAttributes.Toggle]: toggleType,
-                [DataAttributes.TriggerEvent]: triggerEvent,
-                [DataAttributes.Target]: toggleTarget,
-                [Attributes.Href]: href,
-                [Attributes.Target]: targetWindow,
-                [Attributes.Download]: isDownloadLink
-                    ? "" // Leave empty unless file name gets specified.
-                    : null,
-                [Attributes.Rel]: rels
-            };
-
-            attributesObservable(hyperlinkObj);
-        };
+        const behavior = new HyperlinkBehavior();
 
         if (ko.isObservable(hyperlink)) {
-            hyperlink.subscribe(setElementAttributes);
+            hyperlink.subscribe(newValue => behavior.apply(element, newValue));
         }
 
         const initial = ko.unwrap(hyperlink);
-        setElementAttributes(initial);
-
-        ko.applyBindingsToNode(element, { attr: attributesObservable }, null);
+        behavior.apply(element, initial);
     }
 };