Rewritten several binding handlers into behaviors.

Author: azaslonov

src/ko/bindingHandlers/bindingHandlers.collapse.ts

@@ -1,79 +1,17 @@
 import * as ko from "knockout";
-import { Keys, MouseButtons } from "@paperbits/common";
-import { Events } from "@paperbits/common/events";
+import { CollapseBehavior } from "@paperbits/common/behaviors/collapseBehavior";
 
 ko.bindingHandlers["collapse"] = {
     init: (triggerElement: HTMLElement, valueAccessor) => {
         // timeout to let other bindings to bind id for collapsable container
-
-        const expanded: boolean = true;
-
         setTimeout(() => {
             const targetSelector = ko.unwrap(valueAccessor());
-            const targetElement = document.querySelector(targetSelector);
-
-            if (!targetElement) {
-                return;
-            }
-
-            const visibleObservable = ko.observable(expanded);
-
-            if (!triggerElement.hasAttribute("aria-label")) {
-                triggerElement.setAttribute("aria-label", "Toggle section");
-            }
-
-            triggerElement.setAttribute("role", "button");
-            triggerElement.setAttribute("aria-expanded", expanded.toString());
-
-            targetElement.setAttribute("role", "region");
-            targetElement.setAttribute("aria-hidden", (!expanded).toString());
-
-            const toggle = (): void => {
-                const newValue = !visibleObservable();
-                visibleObservable(newValue);
-                triggerElement.setAttribute("aria-expanded", newValue.toString());
-
-                if (!targetElement) {
-                    return;
-                }
-
-                targetElement.setAttribute("aria-hidden", (!newValue).toString());
-            };
-
-            const onPointerDown = (event: MouseEvent): void => {
-                if (event.button !== MouseButtons.Main) {
-                    return;
-                }
-                toggle();
-            };
-
-            const onClick = (event: MouseEvent): void => {
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            };
-
-            const onKeyDown = (event: KeyboardEvent): void => {
-                if (event.key === Keys.Enter || event.key === Keys.Space) {
-                    toggle();
-                }
-            };
-
-            triggerElement.addEventListener(Events.Click, onClick);
-            triggerElement.addEventListener(Events.KeyDown, onKeyDown);
-            triggerElement.addEventListener(Events.MouseDown, onPointerDown);
-
-            ko.applyBindingsToNode(targetElement, {
-                css: { collapsed: ko.pureComputed(() => !visibleObservable()) }
-            }, null);
-
-            ko.applyBindingsToNode(triggerElement, {
-                css: { collapsed: ko.pureComputed(() => !visibleObservable()) }
-            }, null);
+            const behaviorHandle = CollapseBehavior.attach(triggerElement, targetSelector);
 
             ko.utils.domNodeDisposal.addDisposeCallback(triggerElement, () => {
-                triggerElement.removeEventListener(Events.Click, onClick);
-                triggerElement.removeEventListener(Events.KeyDown, onKeyDown);
-                triggerElement.removeEventListener(Events.MouseDown, onPointerDown);
+                if (behaviorHandle && behaviorHandle.detach) {
+                    behaviorHandle.detach();
+                }
             });
         }, 100);
     }

src/ko/bindingHandlers/bindingHandlers.whenInView.ts

@@ -1,22 +1,15 @@
 import * as ko from "knockout";
+import { WhenInViewBehavior } from "@paperbits/common/behaviors/whenInViewBehavior";
 
 ko.bindingHandlers["whenInView"] = {
     init: (element: HTMLElement, valueAccessor) => {
         const callback = valueAccessor();
-
-        const onIntersect = (entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting && callback) {
-                    callback();
-                }
-            });
-        };
-
-        const observer = new IntersectionObserver(onIntersect);
-        observer.observe(element);
+        const behaviorHandle = WhenInViewBehavior.attach(element, callback);
 
         ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
-            observer.disconnect();
+            if (behaviorHandle && behaviorHandle.detach) {
+                behaviorHandle.detach();
+            }
         });
     }
 };