@paperbits/core - npm Package Compare versions

Comparing version 0.1.34 to 0.1.35

column/ko/columnEditor.ts

@@ -150,3 +150,3 @@ import * as ko from "knockout";
             default:
-                throw "Unknown viewport";
+                throw new Error("Unknown viewport");
         }
@@ -153,0 +153,0 @@ }

core.module.ts

@@ -0,1 +1,2 @@
+import { PageHost } from "./workshops/page/ko/pageHost";
 import { IInjectorModule, IInjector } from "@paperbits/common/injection";
@@ -82,2 +83,4 @@ import { IViewModelBinder, ModelBinderSelector, WidgetService } from "@paperbits/common/widgets";
 
+        injector.bind("pageHost", PageHost);
+
         injector.bindModule(new KoModule());
@@ -84,0 +87,0 @@ injector.bindModule(new LayoutModule());

grid/ko/gridEditor.ts

@@ -8,3 +8,3 @@ import * as _ from "lodash";
 import { IRouteHandler } from "@paperbits/common/routing";
-
+import * as ko from "knockout";
 export class GridEditor {
@@ -65,9 +65,6 @@ private activeHighlightedElement: HTMLElement;
         let parentModel;
-        let parentBinding;
+        const parentBinding = GridHelper.getParentWidgetBinding(element);
 
-        const parentElement = GridHelper.getParentElementWithModel(element);
-
-        if (parentElement) {
-            parentModel = GridHelper.getModel(parentElement);
-            parentBinding = GridHelper.getWidgetBinding(parentElement);
+        if (parentBinding) {
+            parentModel = parentBinding.model;
         }
@@ -140,3 +137,5 @@
         const elements = this.getUnderlyingElements();
-        const element = elements.find(element => {
+        const roots = GridHelper.getComponentRoots(elements);
+
+        const element = roots.find(element => {
             return GridHelper.getWidgetBinding(element) !== null;
@@ -477,2 +476,4 @@ });
 
+        let current = null;
+
         for (let i = elements.length - 1; i >= 0; i--) {
@@ -482,3 +483,3 @@ const element = elements[i];
 
-            if (!widgetBinding || widgetBinding.readonly) {
+            if (!widgetBinding || widgetBinding.readonly || widgetBinding === current) {
                 continue;
@@ -501,2 +502,4 @@ }
 
+            current = widgetBinding;
+
             const quadrant = Utils.pointerToClientQuadrant(pointerX, pointerY, element);
@@ -503,0 +506,0 @@ const half = quadrant.vertical;

ko/bindingHandlers/bindingHandlers.component.ts

@@ -10,7 +10,23 @@ import * as ko from "knockout";
         const disposeAssociatedComponentViewModel = () => {
-            const currentViewModelDispose = currentViewModel && currentViewModel["dispose"];
+            if (currentViewModel) {
+                const onDestroyedMethodDescriptions = Reflect.getMetadata("ondestroyed", currentViewModel.constructor);
 
-            if (typeof currentViewModelDispose === "function") {
-                currentViewModelDispose.call(currentViewModel);
+                if (onDestroyedMethodDescriptions) {
+                    onDestroyedMethodDescriptions.forEach(methodDescription => {
+                        const methodReference = currentViewModel[methodDescription];
+    
+                        if (methodReference) {
+                            methodReference();
+                        }
+                    });
+                }
+                else {
+                    const currentViewModelDispose = currentViewModel && currentViewModel["dispose"];
+    
+                    if (typeof currentViewModelDispose === "function") {
+                        currentViewModelDispose.call(currentViewModel);
+                    }
+                }
             }
+
             currentViewModel = null;
@@ -31,3 +47,4 @@ // Any in-flight loading operation is no longer relevant, so make sure we ignore its completion
                 componentName = value;
-            } else {
+            }
+            else {
                 componentName = ko.utils.unwrapObservable(value["name"]);
@@ -34,0 +51,0 @@ componentParams = ko.utils.unwrapObservable(value["params"]);

ko/bindingHandlers/bindingHandlers.grid.ts

@@ -21,2 +21,4 @@ import * as ko from "knockout";
 
+        ko.virtualElements.allowedBindings["grid"] = true;
+
         ko.bindingHandlers["layoutsection"] = {
@@ -23,0 +25,0 @@ init(sourceElement: HTMLElement) {

ko/bindingHandlers/bindingHandlers.host.ts

@@ -8,4 +8,3 @@ import * as ko from "knockout";
 export class HostBindingHandler {
-    private readonly layoutViewModel: KnockoutObservable<any>;
-    private hostDocument: HostDocument;
+    private readonly hostComponent: KnockoutObservable<any>;
 
@@ -17,12 +16,6 @@ constructor(
     ) {
-        this.refreshContent = this.refreshContent.bind(this);
-        this.onRouteChange = this.onRouteChange.bind(this);
+        this.hostComponent = ko.observable();
 
-        this.layoutViewModel = ko.observable();
-
         ko.bindingHandlers["host"] = {
             init: (element: HTMLElement, valueAccessor: () => any) => {
-
-                this.routeHandler.addRouteChangeListener(this.onRouteChange);
-
                 const config = valueAccessor();
@@ -84,24 +77,10 @@
                 });
+
+                const hostElement = this.createIFrame();
+                element.appendChild(hostElement);
             },
 
             update: (element: HTMLElement, valueAccessor: any) => {
-                this.layoutViewModel(null);
-
-                if (this.documentViewModel) {
-                    this.documentViewModel.dispose();
-                }
-
                 const config = valueAccessor();
-
-                Array.prototype.slice.call(element.children).forEach(child => {
-                    element.removeChild(child);
-                });
-
-
-                this.hostDocument = config.doc();
-
-                if (this.hostDocument) {
-                    const hostElement = this.createIFrame();
-                    element.appendChild(hostElement);
-                }
+                this.hostComponent(config.host());
             }
@@ -113,3 +92,3 @@ };
         const hostElement = document.createElement("iframe");
-        hostElement.src = this.hostDocument.src;
+        hostElement.src = "/page.html";
         hostElement.classList.add("host");
@@ -149,8 +128,2 @@
 
-        // ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
-        //     hostElement.removeEventListener("load", onLoad, false);
-        //     hostElement.contentDocument.removeEventListener("click", onClick, true);
-        //     hostElement.contentDocument.removeEventListener("mousedown", onPointerDown, true);
-        // });
-
         return hostElement;
@@ -162,11 +135,3 @@ }
     private async setRootElement(bodyElement: HTMLElement): Promise<void> {
-        if (this.hostDocument.getLayoutViewModel) {
-            const layoutViewModel = await this.hostDocument.getLayoutViewModel();
-            this.layoutViewModel(layoutViewModel);
-            ko.applyBindingsToNode(bodyElement, { if: this.layoutViewModel, widget: this.layoutViewModel, grid: {} });
-        }
-        else {
-            const livingStyleGuide = bodyElement.querySelector("living-style-guide");
-            ko.applyBindings({}, livingStyleGuide);
-        }
+        ko.applyBindingsToNode(bodyElement, { component: this.hostComponent });
 
@@ -177,13 +142,2 @@ const styleElement = document.createElement("style");
     }
-
-    private async refreshContent(): Promise<void> {
-        this.layoutViewModel(null);
-
-        const layoutViewModel = await this.hostDocument.getLayoutViewModel();
-        this.layoutViewModel(layoutViewModel);
-    }
-
-    private async onRouteChange(): Promise<void> {
-        await this.refreshContent();
-    }
 }

ko/knockout.loaders.ts

@@ -65,2 +65,14 @@ import * as ko from "knockout";
 
+                        const onDestroyedMethodDescriptions = Reflect.getMetadata("ondestroyed", instance.constructor);
+
+                        if (onDestroyedMethodDescriptions) {
+                            onDestroyedMethodDescriptions.forEach(methodDescription => {
+                                const methodReference = instance[methodDescription];
+
+                                if (methodReference) {
+                                    methodReference();
+                                }
+                            });
+                        }
+
                         return instance;
@@ -67,0 +79,0 @@ };

ko/ui/viewManager.ts

@@ -10,3 +10,3 @@ import * as _ from "lodash";
 import { IEventManager, GlobalEventHandler } from "@paperbits/common/events";
-import { IComponent, IView, IViewManager, ViewManagerMode, IHighlightConfig, IContextualEditor, ISplitterConfig, HostDocument } from "@paperbits/common/ui";
+import { IComponent, IView, IViewManager, ViewManagerMode, IHighlightConfig, IContextualEditor, ISplitterConfig } from "@paperbits/common/ui";
 import { ProgressIndicator } from "../ui";
@@ -49,3 +49,3 @@ import { IRouteHandler } from "@paperbits/common/routing";
 
-    public hostDocument: KnockoutObservable<HostDocument>;
+    public host: KnockoutObservable<IComponent>;
 
@@ -110,4 +110,6 @@ public shutter: KnockoutObservable<boolean>;
         this.viewport = ko.observable<string>("xl");
-        this.hostDocument = ko.observable<HostDocument>();
 
+
+        this.host = ko.observable<IComponent>({ name: "page-host" });
+
         this.shutter = ko.observable<boolean>(true);
@@ -134,6 +136,4 @@ this.dragSession = ko.observable();
 
-    public setDocument(hostDocument: HostDocument): void {
-        const currentHostDocument = this.hostDocument();
-
-        if (currentHostDocument && currentHostDocument.src === hostDocument.src) {
+    public setHost(component: IComponent): void {
+        if (this.host().name === component.name) {
             return;
@@ -145,3 +145,3 @@ }
 
-        this.hostDocument(hostDocument);
+        this.host(component);
     }
@@ -148,0 +148,0 @@

navbar/ko/navbarEditor.ts

@@ -40,3 +40,6 @@ import * as ko from "knockout";
             const media = await this.mediaService.getMediaByKey(this.model.pictureSourceKey);
-            this.logoUrl(`url(${media.downloadUrl})`);
+
+            if (media) {
+                this.logoUrl(`url(${media.downloadUrl})`);
+            }
         }
@@ -43,0 +46,0 @@ }

navbar/navbarModelBinder.ts

@@ -21,5 +21,8 @@ import { NavbarModel } from "./navbarModel";
         const navigationItemContract = await this.navigationService.getNavigationItem(navbarContract.rootKey);
-        const navbarItemModel = await this.navigationItemToNavbarItemModel(navigationItemContract);
 
-        navbarModel.root = navbarItemModel;
+        if (navigationItemContract) {
+            const navbarItemModel = await this.navigationItemToNavbarItemModel(navigationItemContract);
+            navbarModel.root = navbarItemModel;
+        }
+       
         navbarModel.rootKey = navbarContract.rootKey;
@@ -26,0 +29,0 @@ navbarModel.pictureSourceKey = navbarContract.rootKey;

package.json

 {
     "name": "@paperbits/core",
-    "version": "0.1.34",
+    "version": "0.1.35",
     "description": "Paperbits core components.",
@@ -23,4 +23,4 @@ "author": "Paperbits",
     "dependencies": {
-        "@paperbits/common": "0.1.34",
-        "@paperbits/styles": "0.1.34",
+        "@paperbits/common": "0.1.35",
+        "@paperbits/styles": "0.1.35",
         "cropperjs": "^1.4.0",
@@ -27,0 +27,0 @@ "file-saver": "^2.0.0",

picture/pictureModelBinder.ts

@@ -47,3 +47,3 @@ import { PictureModel } from "./pictureModel";
             try {
-                pictureModel.hyperlink = await this.permalinkResolver.getHyperlinkByContentItemKey(pictureContract.targetKey);
+                pictureModel.hyperlink = await this.permalinkResolver.getHyperlinkByTargetKey(pictureContract.targetKey);
             }
@@ -50,0 +50,0 @@ catch (error) {

slider/sliderModelBinder.ts

@@ -50,3 +50,3 @@ import { SliderModel, SlideModel } from "./sliderModel";
                     slideModel.thumbnail.sourceKey = slideContract.thumbnail.sourceKey;
-                    slideModel.thumbnail.sourceUrl = await this.permalinkResolver.getUrlByContentItemKey(slideContract.thumbnail.sourceKey);
+                    slideModel.thumbnail.sourceUrl = await this.permalinkResolver.getUrlByTargetKey(slideContract.thumbnail.sourceKey);
                 }
@@ -53,0 +53,0 @@

table-of-contents/ko/tableOfContentsViewModel.ts

@@ -17,5 +17,8 @@ import * as ko from "knockout";
         this.title = ko.observable<string>();
-        this.nodes = ko.observableArray<NavigationItemModel>();
-        this.isEmpty = ko.pureComputed(() => this.nodes().length === 0);
+        this.nodes = ko.observableArray<NavigationItemModel>([]);
+        this.isEmpty = ko.pureComputed(() => {
+            const nodes = this.nodes();
+            return !nodes || nodes.length === 0;
+        });
     }
 }

textblock/ko/formatting/formattingTools.ts

@@ -9,3 +9,3 @@ import * as ko from "knockout";
 import { HtmlEditorEvents } from "@paperbits/common/editing";
-import { Component } from "@paperbits/common/ko/decorators";
+import { Component, OnDestroyed } from "@paperbits/common/ko/decorators";
 import { FontContract } from "@paperbits/styles/contracts";
@@ -12,0 +12,0 @@ import { IViewManager } from "@paperbits/common/ui";

textblock/ko/hyperlink/hyperlinkEditor.ts

@@ -52,3 +52,3 @@ import * as ko from "knockout";
         if (hyperlink) {
-            hyperlink = await this.permalinkResolver.getHyperlinkByContentItemKey(hyperlink.targetKey);
+            hyperlink = await this.permalinkResolver.getHyperlinkByTargetKey(hyperlink.targetKey);
         }
@@ -55,0 +55,0 @@

textblock/textblockModelBinder.ts

@@ -0,1 +1,2 @@
+import { PermalinkResolver } from "@paperbits/common/permalinks";
 import { IModelBinder, HyperlinkContract } from "@paperbits/common/editing";
@@ -7,35 +8,23 @@ import { Contract } from "@paperbits/common";
 export class TextblockModelBinder implements IModelBinder {
-    private async resolveHyperlinks(leaves: Contract[]): Promise<void> {
-        for (const node of leaves) {
-            // if (node && node.type === "link") {
-            //     const hyperlink: HyperlinkContract = <HyperlinkContract>node;
+    constructor(private readonly permalinkResolver: PermalinkResolver) { }
 
-            //     if (hyperlink.permalinkKey) {
-            //         const permalink = await this.permalinkService.getPermalinkByKey(hyperlink.permalinkKey);
+    private async resolveHyperlinks(nodes: Contract[]): Promise<void> {
+        for (const node of nodes) {
+            if (node && node.type === "hyperlink") {
+                const hyperlink: HyperlinkContract = <HyperlinkContract>node;
 
-            //         if (permalink) {
-            //             hyperlink.href = permalink.uri;
+                if (hyperlink.attrs.contentTypeKey) {
+                    const url = await this.permalinkResolver.getUrlByTargetKey(hyperlink.attrs.contentTypeKey);
 
-            //             if (permalink.parentKey) {
-            //                 const parentPermalink = await this.permalinkService.getPermalinkByKey(permalink.parentKey);
+                    if (url) {
+                        hyperlink.attrs.href = url;
+                    }
+                    else {
+                        console.warn(`Broken permalink: ${hyperlink.attrs.contentTypeKey}.`);
+                    }
+                }
+            }
 
-            //                 if (parentPermalink) {
-            //                     // TODO: Probably we should use separate property of permalink instead of URI, i.e. "hash".
-            //                     hyperlink.href = `${parentPermalink.uri}#${hyperlink.href}`;
-            //                 }
-            //                 else {
-            //                     // TODO: Show permalink is broken somehow
-            //                     console.warn(`Broken parent permalink: ${permalink.parentKey}.`);
-            //                 }
-            //             }
-            //         }
-            //         else {
-            //             // TODO: Show permalink is broken somehow
-            //             console.warn(`Broken permalink: ${hyperlink.permalinkKey}.`);
-            //         }
-            //     }
-            // }
-
-            if (node && node.leaves) {
-                await this.resolveHyperlinks(node.leaves);
+            if (node && node.content) {
+                await this.resolveHyperlinks(node.content);
             }
@@ -46,2 +35,6 @@
             }
+
+            if (node && node.marks) {
+                await this.resolveHyperlinks(node.marks);
+            }
         }
@@ -72,2 +65,5 @@ }
     public async contractToModel(node: Contract): Promise<TextblockModel> {
+        this.convertNode(node);
+
+
         if (node.nodes) {
@@ -77,2 +73,6 @@ await this.resolveHyperlinks(node.nodes);
 
+        if (node.content) {
+            await this.resolveHyperlinks(node.content);
+        }
+
         if (node.leaves) {
@@ -86,4 +86,2 @@ await this.resolveHyperlinks(node.leaves);
 
-        this.convertNode(node);
-
         return new TextblockModel(node.content);
@@ -159,5 +157,5 @@ }
 
-        // if (parentNode["type"] === "link") {
-        //     parentNode["type"] = "hyperlink";
-        // }
+        if (parentNode["type"] === "hyperlink") {
+            parentNode["type"] = "link";
+        }
 
@@ -164,0 +162,0 @@ if (parentNode["type"] === "line-break") {

workshops/blog/ko/blogs.ts

@@ -66,3 +66,3 @@ import * as ko from "knockout";
         this.selectedBlogPost(blogPostItem);
-        this.viewManager.setDocument({ src: "/page.html", getLayoutViewModel: this.layoutViewModelBinder.getLayoutViewModel });
+        this.viewManager.setHost({ name: "page-host" });
         this.viewManager.openViewAsWorkshop("Blog post", "blog-post-details-workshop", {
@@ -69,0 +69,0 @@ blogPostItem: blogPostItem,

workshops/ko/workshops.ts

@@ -71,5 +71,3 @@ import * as ko from "knockout";
     public openStyles(): void {
-        this.viewManager.setDocument({
-            src: "/theme.html"
-        });
+        this.viewManager.setHost({ name: "living-style-guide" });
     }
@@ -76,0 +74,0 @@

workshops/layout/ko/layouts.ts

@@ -56,3 +56,3 @@ import * as ko from "knockout";
         this.selectedLayout(layoutItem);
-
+        this.viewManager.setHost({ name: "page-host" });
         this.viewManager.openViewAsWorkshop("Layout", "layout-details-workshop", {
@@ -59,0 +59,0 @@ layoutItem: layoutItem,

workshops/navigation/ko/navigationDetails.ts

@@ -54,3 +54,3 @@ import * as ko from "knockout";
     private async init(targetKey: string): Promise<void> {
-        const hyperlink = await this.permalinkResolver.getHyperlinkByContentItemKey(targetKey);
+        const hyperlink = await this.permalinkResolver.getHyperlinkByTargetKey(targetKey);
 
@@ -57,0 +57,0 @@ this.hyperlink(hyperlink);

workshops/page/ko/pageDetails.ts

@@ -51,2 +51,3 @@ import template from "./pageDetails.html";
         this.pageItem.permalink(permalink.permalink);
+        this.viewManager.setHost({ name: "page-host" });
         this.routeHandler.navigateTo(permalink.permalink);
@@ -53,0 +54,0 @@ }

workshops/page/ko/pages.ts

@@ -28,4 +28,3 @@ import * as ko from "knockout";
         private readonly routeHandler: IRouteHandler,
-        private readonly viewManager: IViewManager,
-        private readonly layoutViewModelBinder: LayoutViewModelBinder
+        private readonly viewManager: IViewManager
     ) {
@@ -68,3 +67,3 @@ // rebinding...
         this.selectedPage(pageItem);
-        this.viewManager.setDocument({ src: "/page.html", getLayoutViewModel: this.layoutViewModelBinder.getLayoutViewModel });
+       
         this.viewManager.setTitle(null, pageItem.toContract());
@@ -109,2 +108,4 @@ this.viewManager.openViewAsWorkshop("Page", "page-details-workshop", {
     }
-}
+}
+
+

No alert changes

Improved metrics

Total package byte prevSize

633879

increased by0.16%

Number of package files

398

increased by0.25%

Lines of code

11834

increased by0.25%

Dependency changes

• + Added@paperbits/common@0.1.35(transitive)

• + Added@paperbits/styles@0.1.35(transitive)

• - Removed@paperbits/common@0.1.34(transitive)

• - Removed@paperbits/styles@0.1.34(transitive)

• Updated@paperbits/common@0.1.35

• Updated@paperbits/styles@0.1.35