Rewritten several binding handlers into behaviors.

Author: azaslonov

src/ko/bindingHandlers/bindingHandlers.align.ts

@@ -1,17 +1,33 @@
 import * as ko from "knockout";
+import { AlignBehavior, AlignBehaviorOptions } from "@paperbits/common/behaviors/behavior.align";
 
 ko.bindingHandlers["alignment"] = {
     init: (arrowElement: HTMLElement, valueAccessor) => {
         const config = ko.unwrap(valueAccessor());
         const alignment = arrowElement.getAttribute("alignment");
 
+        // Attach the behavior for click handling
+        const behaviorOptions: AlignBehaviorOptions = {
+            onAlign: () => {
+                if (config.onChange) {
+                    config.onChange(alignment);
+                }
+            }
+        };
+        const behaviorHandle = AlignBehavior.attach(arrowElement, behaviorOptions);
+
+        // Apply CSS binding for active state
         ko.applyBindingsToNode(arrowElement, {
-            click: () => {
-                config.onChange(alignment);
-            },
             css: {
-                active: ko.pureComputed(() => config.position() === alignment)
+                active: ko.pureComputed(() => config.position && config.position() === alignment)
             }
         }, null);
+
+        // Dispose behavior on element disposal
+        ko.utils.domNodeDisposal.addDisposeCallback(arrowElement, () => {
+            if (behaviorHandle && behaviorHandle.detach) {
+                behaviorHandle.detach();
+            }
+        });
     }
 };

src/ko/bindingHandlers/bindingHandlers.angle.ts

@@ -1,61 +1,28 @@
 import { Events } from "@paperbits/common/events";
 import * as ko from "knockout";
-
-export interface SliderConfig {
-    data?: any;
-    percentage?: number;
-    offset?: number;
-    onChange: (viewModel: any, percentage: number) => void;
-}
+import { AngleBehavior, AngleBehaviorOptions } from "@paperbits/common/behaviors/behavior.angle";
 
 ko.bindingHandlers["angle"] = {
-    init: (element: HTMLElement, valueAccessor: () => any) => {
-        const config = valueAccessor();
-        const angleObservable = config;
-        const rect = element.getBoundingClientRect();
-        const centerX = Math.floor(rect.width / 2);
-        const centerY = Math.floor(rect.height / 2);
-        let tracking = false;
+    init: (element: HTMLElement, valueAccessor: () => ko.Observable<number>) => {
+        const angleObservable = valueAccessor();
 
-        const determineAngle = (x: number, y: number) => {
-            const dx = centerX - x;
-            const dy = centerY - y;
-            let theta = Math.atan2(dy, dx) * 180 / Math.PI;
-            theta += -90;
+        if (!ko.isObservable(angleObservable)) {
+            console.warn("Angle binding handler expects an observable.");
+            return;
+        }
 
-            if (theta < 0) {
-                theta += 360;
+        const behaviorOptions: AngleBehaviorOptions = {
+            onChange: (newAngle: number) => {
+                angleObservable(newAngle);
             }
-
-            angleObservable(Math.floor(theta));
-        };
-
-        const onMouseDown = (event: MouseEvent) => {
-            tracking = true;
-            determineAngle(event.offsetX, event.offsetY);
         };
 
-        const onMouseUp = (event: MouseEvent) => {
-            tracking = false;
-            determineAngle(event.offsetX, event.offsetY);
-        };
-
-        const onMouseMove = (event: MouseEvent) => {
-            if (!tracking) {
-                return;
-            }
-
-            determineAngle(event.offsetX, event.offsetY);
-        };
-
-        element.addEventListener(Events.MouseDown, onMouseDown);
-        element.addEventListener(Events.MouseUp, onMouseUp, true);
-        element.addEventListener(Events.MouseMove, onMouseMove, true);
+        const behaviorHandle = AngleBehavior.attach(element, behaviorOptions);
 
         ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
-            element.removeEventListener(Events.MouseDown, onMouseDown);
-            element.removeEventListener(Events.MouseUp, onMouseUp, true);
-            element.removeEventListener(Events.MouseMove, onMouseMove, true);
+            if (behaviorHandle && behaviorHandle.detach) {
+                behaviorHandle.detach();
+            }
         });
     }
 };

src/ko/bindingHandlers/bindingHandlers.attr2way.ts

@@ -1,30 +1,32 @@
 import * as ko from "knockout";
+import { Attr2wayBehavior, Attr2wayConfig } from "@paperbits/common/behaviors/behavior.attr2way";
 
 ko.bindingHandlers["attr2way"] = {
     init: (element: HTMLElement, valueAccessor: () => any) => {
-        const config = valueAccessor();
-        const attributeNames = Object.keys(config);
-
-        const callback: MutationCallback = (mutations: MutationRecord[], observer: MutationObserver) => {
-            for (const mutation of mutations) {
-                if (mutation.type === "attributes" && attributeNames.includes(mutation.attributeName)) {
-                    const value = element.getAttribute(mutation.attributeName);
-
-                    const observable = config[mutation.attributeName];
+        const originalConfig = valueAccessor();
+        const attributeNames = Object.keys(originalConfig);
+        
+        // The behavior needs a way to update the Knockout observables.
+        // We create a new config that maps attribute names to functions that update the corresponding observable.
+        const behaviorConfig: Attr2wayConfig = {};
 
+        for (const attrName of attributeNames) {
+            const observable = originalConfig[attrName];
+            if (ko.isObservable(observable)) {
+                behaviorConfig[attrName] = (value: string | null) => {
                     if (observable() !== value) {
                         observable(value);
                     }
-                }
+                };
             }
-        };
+        }
 
-        const observer = new MutationObserver(callback);
-
-        observer.observe(element, { attributes: true });
+        const behaviorHandle = Attr2wayBehavior.attach(element, behaviorConfig);
 
         ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
-            observer.disconnect();
+            if (behaviorHandle && behaviorHandle.detach) {
+                behaviorHandle.detach();
+            }
         });
     }
 };

src/ko/bindingHandlers/bindingHandlers.background.ts

@@ -1,77 +1,54 @@
-import { StyleService } from "@paperbits/styles";
-import * as ko from "knockout";
+import * as ko from "knockout";
 import { BackgroundModel } from "@paperbits/common/widgets/background";
+import { BackgroundBehavior, BehaviorHandle } from "@paperbits/common/behaviors/behavior.background";
 
-ko.bindingHandlers["style"] = {
-    update(element: HTMLElement, valueAccessor): void {
-        const value = ko.utils.unwrapObservable(valueAccessor() || {});
-
-        ko.utils.objectForEach(value, function (styleName, styleValue) {
-            styleValue = ko.utils.unwrapObservable(styleValue);
-
-            if (styleValue === null || styleValue === undefined || styleValue === false) {
-                // Empty string removes the value, whereas null/undefined have no effect
-                styleValue = "";
-            }
-
-            element.style.setProperty(styleName, styleValue);
-        });
-    }
-};
+// ko.bindingHandlers["style"] = { ... }; // This global style binding handler remains unchanged.
 
 export class BackgroundBindingHandler {
-    constructor(styleService: StyleService) {
+    constructor() { // StyleService removed as it was not used by this specific binding handler
         ko.bindingHandlers["background"] = {
-            init(element: HTMLElement, valueAccessor: () => BackgroundModel): void {
-                const configuration = valueAccessor();
-                const styleObservable = ko.observable();
-
-                const setBackground = async (backgroundModel: BackgroundModel) => {
-                    if (backgroundModel.sourceUrl) {
-                        styleObservable({
-                            "background-image": `url("${ko.unwrap(backgroundModel.sourceUrl)}")`,
-                            "background-repeat": "no-repeat",
-                            "background-size": "cover",
-                            "background-position": "center",
-                            "background-color": backgroundModel.color
-                        });
+            init(element: HTMLElement, valueAccessor: () => BackgroundModel | ko.Observable<BackgroundModel>): void {
+                const configurationObservableOrModel = valueAccessor();
+                let behaviorHandle: BehaviorHandle | undefined;
+
+                // Helper to unwrap BackgroundModel properties if they are observable
+                // This ensures the Behavior class receives plain data.
+                const getCleanModel = (model?: BackgroundModel): BackgroundModel => {
+                    if (!model) {
+                        return {};
                     }
-                    else if (backgroundModel.color) {
-                        styleObservable({
-                            "background-color": backgroundModel.color
-                        });
+                    const cleanModel: BackgroundModel = {};
+                    if (model.sourceUrl !== undefined) {
+                        cleanModel.sourceUrl = ko.unwrap(model.sourceUrl);
                     }
-                    else {
-                        styleObservable({
-                            "background-image": null,
-                            "background-repeat": null,
-                            "background-size": null,
-                            "background-position": null,
-                            "background-color": null
-                        });
+                    if (model.color !== undefined) {
+                        cleanModel.color = ko.unwrap(model.color);
                     }
+                    // Add other properties from BackgroundModel if they can be observable and are used
+                    return cleanModel;
                 };
 
-                ko.applyBindingsToNode(element, { style: styleObservable }, null);
+                if (ko.isObservable(configurationObservableOrModel)) {
+                    const configurationObservable = configurationObservableOrModel as ko.Observable<BackgroundModel>;
+                    
+                    const initialModel = getCleanModel(ko.unwrap(configurationObservable));
+                    behaviorHandle = BackgroundBehavior.attach(element, initialModel);
 
-                if (ko.isObservable(configuration)) {
-                    configuration.subscribe((newConfiguration) => {
-                        if (!newConfiguration) {
-                            setBackground({});
-                        }
-                        else {
-                            setBackground(ko.unwrap(newConfiguration));
+                    configurationObservable.subscribe((newConfiguration) => {
+                        if (behaviorHandle?.update) {
+                            behaviorHandle.update(getCleanModel(newConfiguration));
                         }
                     });
+                } else {
+                    const model = getCleanModel(configurationObservableOrModel as BackgroundModel);
+                    behaviorHandle = BackgroundBehavior.attach(element, model);
                 }
 
-                let initialConfiguration = ko.unwrap(configuration);
-
-                if (!initialConfiguration) {
-                    initialConfiguration = {};
-                }
-
-                setBackground(initialConfiguration);
+                ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+                    if (behaviorHandle?.dispose) {
+                        behaviorHandle.dispose();
+                    }
+                });
             }
         };
     }

src/ko/bindingHandlers/bindingHandlers.hyperlink.ts

@@ -5,13 +5,24 @@ import { HyperlinkBehavior } from "@paperbits/common/behaviors/behavior.hyperlin
 ko.bindingHandlers["hyperlink"] = {
     update(element: HTMLElement, valueAccessor: () => HyperlinkModel): void {
         const hyperlink: HyperlinkModel = valueAccessor();
-        const behavior = new HyperlinkBehavior();
+        let behaviorHandle: any;
 
         if (ko.isObservable(hyperlink)) {
-            hyperlink.subscribe(newValue => behavior.attach(element, newValue));
+            hyperlink.subscribe(newValue => {
+                if (behaviorHandle && behaviorHandle.detach) {
+                    behaviorHandle.detach();
+                }
+                behaviorHandle = HyperlinkBehavior.attach(element, newValue);
+            });
         }
 
         const initial = ko.unwrap(hyperlink);
-        behavior.attach(element, initial);
+        behaviorHandle = HyperlinkBehavior.attach(element, initial);
+
+        if (behaviorHandle && behaviorHandle.detach) {
+            ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+                behaviorHandle.detach();
+            });
+        }
     }
 };

src/ko/bindingHandlers/bindingHandlers.listbox.ts

@@ -3,10 +3,24 @@ import { ListboxBehavior, ListboxOptions } from "@paperbits/common/behaviors/beh
 
 ko.bindingHandlers["listbox"] = {
     init: (listboxElement: HTMLElement, valueAccessor: () => ListboxOptions) => {
-        const behaviorHandle = ListboxBehavior.attach(listboxElement, valueAccessor());
+        const originalOptions = valueAccessor();
+
+        // Adapt the onSelect callback to maintain the original contract (passing ko.dataFor(element))
+        // while the behavior itself now passes the HTMLElement.
+        const adaptedOptions: ListboxOptions = {
+            onSelect: (selectedElement: HTMLElement) => {
+                if (originalOptions && originalOptions.onSelect) {
+                    originalOptions.onSelect(ko.dataFor(selectedElement));
+                }
+            }
+        };
+
+        const behaviorHandle = ListboxBehavior.attach(listboxElement, adaptedOptions);
 
         ko.utils.domNodeDisposal.addDisposeCallback(listboxElement, (): void => {
-            behaviorHandle.detach();
+            if (behaviorHandle && behaviorHandle.detach) {
+                behaviorHandle.detach();
+            }
         });
     }
 };

src/ko/bindingHandlers/bindingHandlers.markdown.ts

@@ -1,11 +1,24 @@
 import * as ko from "knockout";
-import { MarkdownBehavior } from "@paperbits/common/behaviors/bahavior.markdown";
+import { MarkdownBehavior } from "@paperbits/common/behaviors/behavior.markdown"; // Corrected path
 
 ko.bindingHandlers["markdown"] = {
-    update: async (element: HTMLElement, valueAccessor: () => string): Promise<void> => {
+    update: (element: HTMLElement, valueAccessor: () => string): void => {
         const markdown = ko.unwrap(valueAccessor());
-        const behavior = new MarkdownBehavior();
+        
+        // Clean up any previous behavior instance before attaching a new one
+        const existingHandle = ko.utils.domData.get(element, "markdownBehaviorHandle");
+        if (existingHandle && existingHandle.dispose) {
+            existingHandle.dispose();
+        }
 
-        behavior.attach(element, markdown);
+        const behaviorHandle = MarkdownBehavior.attach(element, markdown);
+        ko.utils.domData.set(element, "markdownBehaviorHandle", behaviorHandle); // Store the handle for potential cleanup
+
+        // Ensure dispose is called when the element is removed
+        ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+            if (behaviorHandle && behaviorHandle.detach) {
+                behaviorHandle.detach();
+            }
+        });
     }
 };