Rewritten several binding handlers into behaviors.

Author: azaslonov

src/ko/behaviors/knockoutBehavior.ts

@@ -0,0 +1,27 @@
+import * as ko from "knockout";
+
+export function registerKnockoutBehavior(behaviorName: string, BehaviorClass) {
+    ko.bindingHandlers[behaviorName] = {
+        init: (element, valueAccessor, allBindings, viewModel, context) => {
+            const params = ko.toJSON(valueAccessor());
+             // Ensure params are converted to a plain object if needed
+            const behavior = new BehaviorClass(element, params, context);
+
+            // store instance using Knockout's DOM data utils
+            ko.utils.domData.set(element, behaviorName, behavior);
+
+            ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
+                behavior.dispose();
+                ko.utils.domData.set(element, behaviorName, null);
+            });
+
+            behavior.init();
+        },
+        update: (element, valueAccessor) => {
+            const behavior = ko.utils.domData.get(element, behaviorName);
+            if (behavior.update) {
+                behavior.update(ko.unwrap(valueAccessor()));
+            }
+        }
+    };
+}

src/ko/bindingHandlers/bindingHandlers.gridCell.ts

@@ -1,6 +1,4 @@
 import * as ko from "knockout";
-import { GridCellModel } from "../../grid-cell";
-import { GridCellViewModel } from "../../grid-cell/ko";
 import { GridHelper } from "@paperbits/common/editing";
 
 

src/ko/bindingHandlers/bindingHandlers.hyperlink.ts

@@ -1,11 +1,12 @@
 import * as ko from "knockout";
 import { HyperlinkModel } from "@paperbits/common/permalinks";
 import { HyperlinkBehavior } from "@paperbits/common/behaviors/behavior.hyperlink";
+import { BehaviorHandle } from "@paperbits/common/behaviors";
 
 ko.bindingHandlers["hyperlink"] = {
     update(element: HTMLElement, valueAccessor: () => HyperlinkModel): void {
         const hyperlink: HyperlinkModel = valueAccessor();
-        let behaviorHandle: any;
+        let behaviorHandle: BehaviorHandle;
 
         if (ko.isObservable(hyperlink)) {
             hyperlink.subscribe(newValue => {

src/ko/bindingHandlers/bindingHandlers.markdown.ts

@@ -1,5 +1,5 @@
 import * as ko from "knockout";
-import { MarkdownBehavior } from "@paperbits/common/behaviors/behavior.markdown"; // Corrected path
+import { MarkdownBehavior } from "@paperbits/common/behaviors/behavior.markdown";
 
 ko.bindingHandlers["markdown"] = {
     update: (element: HTMLElement, valueAccessor: () => string): void => {

src/ko/bindingHandlers/bindingHandlers.roleBasedSecured.ts

@@ -1,7 +1,8 @@
 import * as ko from "knockout";
-import { BuiltInRoles, UserService } from "@paperbits/common/user";
+import { UserService } from "@paperbits/common/user";
 import { EventManager } from "@paperbits/common/events";
 import { RoleBasedSecurityModel } from "@paperbits/common/security/roleBasedSecurityModel";
+import { RoleBasedSecuredBehavior, RoleBasedSecuredBehaviorConfig } from "@paperbits/common/behaviors/behavior.roleBasedSecured";
 
 
 export class RoleBasedSecuredBindingHandler {
@@ -10,48 +11,45 @@ export class RoleBasedSecuredBindingHandler {
         private readonly userService: UserService
     ) {
         ko.bindingHandlers["secured"] = {
-            init: (element: HTMLElement, valueAccessor: any) => {
-                const securityModel = ko.unwrap(valueAccessor());
-                const initiallyAssignedRoles = securityModel?.roles;
-                const dataRoleObservable: ko.Observable<string> = ko.observable(initiallyAssignedRoles);
-                const hiddenObservable: ko.Observable<boolean> = ko.observable(false);
-
-                const applyRoles = (securityModel: RoleBasedSecurityModel) => { // has to be synchronous to be applied during publishing
-                    const widgetRoles = securityModel?.roles || [BuiltInRoles.everyone.key];
-
-                    const roles = widgetRoles
-                        && widgetRoles.length === 1
-                        && widgetRoles[0] === BuiltInRoles.everyone.key
-                        ? null
-                        : widgetRoles.join(",");
-
-                    dataRoleObservable(roles);
-                    applyVisibility();
-                };
+            init: (element: HTMLElement, valueAccessor: () => ko.Observable<RoleBasedSecurityModel> | RoleBasedSecurityModel) => {
+                const securityModelObservableOrStatic = valueAccessor();
+                const initialSecurityModel = ko.unwrap(securityModelObservableOrStatic);
 
-                const applyVisibility = async () => { // doesn't have to be synchronous, used in design- and run-time only
-                    const widgetRolesString = dataRoleObservable();
-                    const widgetRoles = !!widgetRolesString ? widgetRolesString.split(",") : [BuiltInRoles.everyone.key];
-                    const userRoles = await this.userService.getUserRoles();
-                    const visibleToUser = userRoles.some(x => widgetRoles.includes(x)) || widgetRoles.includes(BuiltInRoles.everyone.key);
+                const dataRoleObservable: ko.Observable<string | null> = ko.observable(null);
+                const hiddenObservable: ko.Observable<boolean> = ko.observable(false);
 
-                    hiddenObservable(!visibleToUser);
+                const behaviorConfig: RoleBasedSecuredBehaviorConfig = {
+                    initialSecurityModel: initialSecurityModel,
+                    userService: this.userService,
+                    eventManager: this.eventManager,
+                    onUpdate: (roles, isHidden) => {
+                        dataRoleObservable(roles);
+                        hiddenObservable(isHidden);
+                    }
                 };
 
-                this.eventManager.addEventListener("onUserRoleChange", applyVisibility);
+                const behaviorHandle = RoleBasedSecuredBehavior.attach(element, behaviorConfig);
 
                 ko.applyBindingsToNode(element, {
                     attr: { "data-role": dataRoleObservable },
                     css: { hidden: hiddenObservable }
                 }, null);
 
+                let subscription: ko.Subscription | undefined;
+                if (ko.isObservable(securityModelObservableOrStatic)) {
+                    subscription = securityModelObservableOrStatic.subscribe((newModel) => {
+                        behaviorHandle.update && behaviorHandle.update(newModel);
+                    });
+                }
+
                 ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
-                    this.eventManager.removeEventListener("onUserRoleChange", applyVisibility);
+                    if (subscription) {
+                        subscription.dispose();
+                    }
+                    if (behaviorHandle && behaviorHandle.detach) {
+                        behaviorHandle.detach();
+                    }
                 });
-
-                const assignedRolesObsevable: ko.Observable<RoleBasedSecurityModel> = valueAccessor();
-                assignedRolesObsevable.subscribe(applyRoles);
-                applyRoles(securityModel);
             }
         };
     }