Rewritten stickTo binding handler into behavior.

Author: azaslonov

src/behaviors/hyperlinkBehavior.ts

@@ -1,17 +1,17 @@
 import * as ko from "knockout";
 import { HyperlinkModel } from "@paperbits/common/permalinks";
-import { HyperlinkBehavior } from "../../behaviors/hyperlinkBehavior";
+import { HyperlinkBehavior } from "@paperbits/common/behaviors/hyperlinkBehavior";
 
 ko.bindingHandlers["hyperlink"] = {
     update(element: HTMLElement, valueAccessor: () => HyperlinkModel): void {
         const hyperlink: HyperlinkModel = valueAccessor();
         const behavior = new HyperlinkBehavior();
 
         if (ko.isObservable(hyperlink)) {
-            hyperlink.subscribe(newValue => behavior.apply(element, newValue));
+            hyperlink.subscribe(newValue => behavior.attach(element, newValue));
         }
 
         const initial = ko.unwrap(hyperlink);
-        behavior.apply(element, initial);
+        behavior.attach(element, initial);
     }
 };

src/ko/bindingHandlers/bindingHandlers.hyperlink.ts

@@ -1,150 +1,17 @@
 import * as ko from "knockout";
-import { ViewManager, ViewManagerMode } from "@paperbits/common/ui";
-import { Events } from "@paperbits/common/events";
+import { ViewManager } from "@paperbits/common/ui";
+import { StickToBehavior, StickToConfig } from "@paperbits/common/behaviors/behavior.stickTo";
 
-export enum StickToPlacement {
-    border = "border",
-    outside = "outside"
-}
-
-export interface StickToConfig {
-    /**
-     * Target element.
-     */
-    target: HTMLElement;
-
-    /**
-     * Element position, e.g. `top`, `bottom`, `left`, `right`, `center`.
-     */
-    position: string;
-
-    /**
-     * border (default), outside
-     */
-    placement: StickToPlacement;
-
-    /**
-     * Horizontal offset from the assigned position.
-     */
-    offsetX: number;
-
-    /**
-     * Vertical offset from the assigned position.
-     */
-    offsetY: number;
-}
 
 export class StickToBindingHandler {
     constructor(viewManager: ViewManager) {
         ko.bindingHandlers["stickTo"] = {
             init(element: HTMLElement, valueAccessor: () => StickToConfig): void {
                 const config = valueAccessor();
-
-                const updatePosition = () => {
-                    if (!config.target) {
-                        return;
-                    }
-
-                    if (viewManager.mode !== ViewManagerMode.selecting && viewManager.mode !== ViewManagerMode.selected) {
-                        return;
-                    }
-
-                    const frameElement = config.target.ownerDocument.defaultView.frameElement;
-
-                    if (!frameElement) {
-                        return;
-                    }
-
-                    const offsetX = config.offsetX || 0;
-                    const offsetY = config.offsetY || 0;
-                    const anchors = config.position.split(" ");
-
-                    const frameRect = frameElement.getBoundingClientRect();
-                    const targetRect = config.target.getBoundingClientRect();
-
-                    const placement = config.placement || StickToPlacement.border;
-                    let coordX: number;
-                    let coordY: number;
-
-                    element.style.right = null;
-                    element.style.left = null;
-
-                    coordX = targetRect.left + Math.floor((targetRect.width) / 2) - Math.floor(element.clientWidth / 2);
-                    coordY = targetRect.top + Math.floor((targetRect.height) / 2) - Math.floor(element.clientHeight / 2);
-
-                    if (anchors.includes("top")) {
-                        coordY = targetRect.top - offsetY;
-
-                        switch (placement) {
-                            case StickToPlacement.border:
-                                coordY = coordY - Math.floor(element.clientHeight / 2);
-                                break;
-
-                            case StickToPlacement.outside:
-                                coordY = coordY - element.clientHeight;
-                                break;
-                        }
-
-                        if (coordY < 0) { // keeping the element within viewport
-                            coordY = 0
-                        }
-                    }
-
-                    if (anchors.includes("bottom")) {
-                        coordY = targetRect.top + offsetY + targetRect.height - element.clientHeight;
-
-                        switch (placement) {
-                            case StickToPlacement.border:
-                                coordY = coordY + Math.floor(element.clientHeight / 2);
-                                break;
-
-                            case StickToPlacement.outside:
-                                coordY = coordY + element.clientHeight;
-                                break;
-                        }
-                    }
-
-                    element.style.top = frameRect.top + coordY + "px";
-
-                    if (anchors.includes("left")) {
-                        element.style.left = frameRect.left + targetRect.left + offsetX + "px";
-                    }
-                    else if (anchors.includes("right")) {
-                        element.style.right = frameRect.right - targetRect.right + offsetX + "px";
-                    }
-                    else {
-                        element.style.left = frameRect.left + coordX + "px";
-                    }
-
-                    if (anchors.includes("parent-left")) {
-                        if (!config.target.parentElement) {
-                            return;
-                        }
-
-                        const targetParentRect = config.target.parentElement.getBoundingClientRect();
-                        element.style.left = targetParentRect.left - Math.floor(element.clientWidth / 2) + "px";
-                    }
-
-                    if (anchors.includes("parent-top")) {
-                        if (!config.target.parentElement) {
-                            return;
-                        }
-
-                        const targetParentRect = config.target.parentElement.getBoundingClientRect();
-                        element.style.top = targetParentRect.top - Math.floor(element.clientHeight / 2) + "px";
-                    }
-                };
-
-                updatePosition();
-
-                const onScroll = async (event: MouseEvent): Promise<void> => {
-                    requestAnimationFrame(updatePosition);
-                };
-
-                window.addEventListener(Events.Scroll, onScroll, true);
+                const handle = StickToBehavior.attach(element, config, viewManager);
 
                 ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
-                    window.removeEventListener(Events.Scroll, onScroll, true);
+                    handle.detach();
                 });
             }
         };