@paperbits/core - npm Package Compare versions

Comparing version 0.1.38 to 0.1.39

core.edit.module.ts

@@ -0,1 +1,5 @@
+import { LightboxBindingHandler } from "./ko/bindingHandlers/bindingHandlers.lightbox";
+import { GridBindingHandler } from "./ko/bindingHandlers/bindingHandlers.grid";
+import { DraggablesBindingHandler } from "./ko/bindingHandlers/bindingHandlers.draggables";
+import { CoreModule } from "./core.module";
 import { IInjectorModule, IInjector } from "@paperbits/common/injection";
@@ -26,3 +30,3 @@ import { VideoPlayerEditorModule } from "./video-player/ko/videoPlayerEditor.module";
 import { HostBindingHandler, BalloonBindingHandler, ResizableBindingHandler } from "./ko/bindingHandlers";
-import { IContentDropHandler, IWidgetHandler, MediaHandlers, HtmlEditorProvider } from "@paperbits/common/editing";
+import { MediaHandlers, HtmlEditorProvider } from "@paperbits/common/editing";
 import { IHyperlinkProvider, LityLightbox } from "@paperbits/common/ui";
@@ -39,2 +43,4 @@ import { HyperlinkSelector } from "./workshops/hyperlinks/ko/hyperlinkSelector";
 import { DragManager } from "@paperbits/common/ui/draggables";
+import { SavingHandler } from "@paperbits/common/persistence/savingHandler";
+import { UnhandledErrorHandler } from "@paperbits/common/errors";
 import { PlaceholderViewModel } from "./placeholder/ko/placeholderViewModel";
@@ -51,6 +57,5 @@ import { SearchResultsEditorModule } from "./search-results/ko/searchResultsEditor.module";
     public register(injector: IInjector): void {
+        injector.bindModule(new CoreModule());
+
         injector.bindCollection("dropHandlers");
-        // injector.bindSingleton("settingsProvider", SettingsProvider);
-        // injector.bindSingleton("routeHandler", DefaultRouteHandler); 
-
         injector.bindSingleton("viewManager", ViewManager);
@@ -62,7 +67,7 @@ injector.bind("pageHyperlinkProvider", PageHyperlinkProvider);
         injector.bind("gridEditor", GridEditor);
-
-        injector.bindSingleton("knockoutValidation", KnockoutValidation);
-        injector.bindSingleton("resizableBindingHandler", ResizableBindingHandler);
-        injector.bindSingleton("cropperBindingHandler", CropperBindingHandler);
-        injector.bindSingleton("balloonBindingHandler", BalloonBindingHandler);
+        injector.bindToCollection("autostart", KnockoutValidation);
+        injector.bindToCollection("autostart", ResizableBindingHandler);
+        injector.bindToCollection("autostart", CropperBindingHandler);
+        injector.bindToCollection("autostart", BalloonBindingHandler);
+        injector.bindToCollection("autostart", UnhandledErrorHandler);
         injector.bind("tooltip", Tooltip);
@@ -89,16 +94,11 @@
 
-
         /*** Editors ***/
         injector.bindSingleton("htmlEditorProvider", HtmlEditorProvider);
         injector.bindSingleton("mediaHandler", MediaHandlers);
-
         injector.bind("workshops", Workshops);
         injector.bind("viewportSelector", ViewportSelector);
-        injector.bindSingleton("hostBindingHandler", HostBindingHandler);
         injector.bind("settingsWorkshop", SettingsWorkshop);
-
         injector.bind("hyperlinkSelector", HyperlinkSelector);
         injector.bind("widgetSelector", WidgetSelector);
         injector.bind("urlSelector",  UrlSelector);
-
         injector.bindModule(new TextblockEditorModule());
@@ -128,3 +128,9 @@ injector.bindModule(new PictureEditorModule());
         injector.bindModule(new CardEditorModule());
+        
+        injector.bindToCollection("autostart", HostBindingHandler);
+        injector.bindToCollection("autostart", SavingHandler);
+        injector.bindToCollection("autostart", DraggablesBindingHandler);
+        injector.bindToCollection("autostart", GridBindingHandler);
+        injector.bindToCollection("autostart", LightboxBindingHandler);
     }
 }

core.module.ts

@@ -0,1 +1,3 @@
+import { BackgroundBindingHandler } from "./ko/bindingHandlers/bindingHandlers.background";
+import { WidgetBindingHandler } from "./ko/bindingHandlers/bindingHandlers.widget";
 import { DefaultRouteHandler } from "@paperbits/common/routing";
@@ -44,10 +46,14 @@ import { SettingsProvider } from "@paperbits/common/configuration";
 import { UrlService } from "@paperbits/common/urls";
-import { UnhandledErrorHandler } from "@paperbits/common/errors";
 import { CardModule } from "./card/ko/card.module";
 
+/**
+ * Module registering core components.
+ */
 export class CoreModule implements IInjectorModule {
     public register(injector: IInjector): void {
+        injector.bindCollection("autostart");
         injector.bindCollection("widgetHandlers");
         injector.bindCollection("modelBinders");
         injector.bindCollection("viewModelBinders");
+        
 
@@ -61,3 +67,3 @@ /*** Core ***/
         injector.bindSingleton("localCache", LocalCache);
-        injector.bindSingleton("offlineObjectStorage", OfflineObjectStorage);
+        
         injector.bindSingleton("anchorMiddleware", AnchorMiddleware);
@@ -76,4 +82,2 @@
         injector.bindSingleton("urlService", UrlService);
-        injector.bindSingleton("savingHandler", SavingHandler);
-        injector.bindSingleton("errorHandler", UnhandledErrorHandler);
         injector.bindSingleton("permalinkResolver", PermalinkResolver);
@@ -109,3 +113,6 @@
         injector.bindModule(new CardModule());
+
+        injector.bindToCollection("autostart", WidgetBindingHandler);
+        injector.bindToCollection("autostart", BackgroundBindingHandler);
     }
 }

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 {
@@ -267,3 +267,6 @@ private activeHighlightedElement: HTMLElement;
                 .call(acceptorElement.childNodes)
-                .filter(node => GridHelper.getModel(node) !== null && node !== dragSession.sourceElement);
+                .filter(node =>
+                    node.nodeName !== "#comment" &&
+                    node !== dragSession.sourceElement &&
+                    GridHelper.getModel(node) !== null);
 
@@ -270,0 +273,0 @@ const intersection = _.intersection(childNodes, elements);

index.ts

 export * from "./core.edit.module";
-export * from "./core.module";
-export * from "./staticRouteHandler";
-export * from "./staticSettingsProvider";
+export * from "./core.module";

ko/bindingHandlers/bindingHandlers.content.ts

@@ -1,17 +0,17 @@
-import * as ko from "knockout";
+// import * as ko from "knockout";
 
-export class ContentBindingHandler {
-    constructor() {
-        ko.bindingHandlers["content"] = {
-            update(element: HTMLElement, valueAccessor, allBindings, viewModel, bindingContext): void {
-                let observable = valueAccessor();
+// export class ContentBindingHandler {
+//     constructor() {
+//         ko.bindingHandlers["content"] = {
+//             update(element: HTMLElement, valueAccessor, allBindings, viewModel, bindingContext): void {
+//                 let observable = valueAccessor();
 
-                if (observable() === element.innerHTML)
-                    return;
+//                 if (observable() === element.innerHTML)
+//                     return;
 
-                ko.utils.setHtml(element, observable);
-                ko.applyBindingsToDescendants(bindingContext, element);
-            }
-        };
-    }
-}
+//                 ko.utils.setHtml(element, observable);
+//                 ko.applyBindingsToDescendants(bindingContext, element);
+//             }
+//         };
+//     }
+// }

ko/bindingHandlers/bindingHandlers.surface.ts

@@ -63,4 +63,4 @@ import * as ko from "knockout";
 
-                    Utils.setValue(`${view.component.name}/top`, settings, Math.floor(rect.top));
-                    Utils.setValue(`${view.component.name}/left`, settings, Math.floor(rect.left));
+                    Utils.setValueAt(`${view.component.name}/top`, settings, Math.floor(rect.top));
+                    Utils.setValueAt(`${view.component.name}/left`, settings, Math.floor(rect.left));
 
@@ -89,7 +89,7 @@ localStorage["settings"] = JSON.stringify(settings);
                     if (view.resize.contains("horizontally")) {
-                        Utils.setValue(`${view.component.name}/width`, settings, element.clientWidth);
+                        Utils.setValueAt(`${view.component.name}/width`, settings, element.clientWidth);
                     }
 
                     if (view.resize.contains("vertically")) {
-                        Utils.setValue(`${view.component.name}/height`, settings, element.clientHeight);
+                        Utils.setValueAt(`${view.component.name}/height`, settings, element.clientHeight);
                     }
@@ -96,0 +96,0 @@

ko/bindingHandlers/index.ts

@@ -10,3 +10,3 @@ export * from "./bindingHandlers.align";
 export * from "./bindingHandlers.container";
-export * from "./bindingHandlers.content";
+// export * from "./bindingHandlers.content";
 export * from "./bindingHandlers.draggables";
@@ -13,0 +13,0 @@ export * from "./bindingHandlers.grid";

ko/ko.module.ts

 import * as ko from "knockout";
 import { IInjectorModule, IInjector } from "@paperbits/common/injection";
 import { GridBindingHandler } from "./bindingHandlers/bindingHandlers.grid";
-import { ContentBindingHandler } from "./bindingHandlers/bindingHandlers.content";
 import { LightboxBindingHandler } from "./bindingHandlers/bindingHandlers.lightbox";
@@ -35,11 +34,4 @@ import { DraggablesBindingHandler } from "./bindingHandlers/bindingHandlers.draggables";
         ko.virtualElements.allowedBindings["layoutrow"] = true;
-        ko.virtualElements.allowedBindings["component"] = true;
-
-        injector.bindSingleton("contentBindingHandler", ContentBindingHandler);
-        injector.bindSingleton("lighboxBindingHandler", LightboxBindingHandler);
-        injector.bindSingleton("draggablesBindingHandler", DraggablesBindingHandler);
-        injector.bindSingleton("widgetBindingHandler", WidgetBindingHandler);
-        injector.bindSingleton("backgroundBindingHandler", BackgroundBindingHandler);
-        injector.bindSingleton("gridBindingHandler", GridBindingHandler);
+        ko.virtualElements.allowedBindings["component"] = true;     
     }
 }

package.json

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

textblock/ko/formatting/index.ts

 export * from "./blockStyleSelector";
-export * from "./fontSelector";
 export * from "./formattingTools";

textblock/ko/textblock.module.ts

@@ -12,6 +12,6 @@ import { IInjectorModule, IInjector } from "@paperbits/common/injection";
         injector.bind("textblock", TextblockViewModel);
-        injector.bindSingleton("htmlEditorBindingHandler", HtmlEditorBindingHandler);
         injector.bindToCollection("modelBinders", TextblockModelBinder);
         injector.bindToCollection("viewModelBinders", TextblockViewModelBinder);
+        injector.bindToCollection("autostart", HtmlEditorBindingHandler);
     }
 }

textblock/ko/textblockEditor.module.ts

@@ -5,3 +5,2 @@ import { IInjectorModule, IInjector } from "@paperbits/common/injection";
 import { BlockStyleSelector } from "./formatting/blockStyleSelector";
-import { FontSelector } from "./formatting/fontSelector";
 import { FormattingTools } from "./formatting/formattingTools";
@@ -18,4 +17,3 @@ import { HyperlinkEditor } from "./hyperlink/hyperlinkEditor";
         injector.bind("blockStyleSelector", BlockStyleSelector);
-        // injector.bind("fontSelector", FontSelector);
     }
 }

workshops/cropper/cropper.ts

 import * as ko from "knockout";
 import * as Cropper from "cropperjs";
 import template from "./cropper.html";
-import { Component } from "@paperbits/common/ko/decorators";
+import { Component, Param } from "@paperbits/common/ko/decorators";
 import { IEventManager } from "@paperbits/common/events";
-import { Param } from "@paperbits/common/ko/decorators";
+import { IMediaService } from "@paperbits/common/media";
+import { IViewManager } from "@paperbits/common/ui";
+import { MediaItem } from "../media/ko/mediaItem";
 
@@ -48,5 +50,8 @@ export class CropperBindingHandler {
     @Param()
-    public sourceUrl: KnockoutObservable<string>;
+    public readonly mediaItem: MediaItem;
 
-    constructor() {
+    constructor(
+        private readonly mediaService: IMediaService,
+        private readonly viewManager: IViewManager
+    ) {
         this.setMoveMode = this.setMoveMode.bind(this);
@@ -62,4 +67,2 @@ this.setCropMode = this.setCropMode.bind(this);
         this.clear = this.clear.bind(this);
-
-        this.sourceUrl = ko.observable();
         this.cropperInstance = ko.observable(null);
@@ -120,11 +123,23 @@ }
     public crop(): void {
-        throw new Error("This functionality is not ready yet.");
-
         const cropper = this.cropperInstance();
+        const canvas = <HTMLCanvasElement> cropper.getCroppedCanvas();
+        
+        canvas.toBlob(async (blob) => {
+            const reader = new FileReader();
+            reader.addEventListener("loadend", async () => {
+                const arrayBuffer = <ArrayBuffer> reader.result;
+                await this.updateMediaContent(new Uint8Array(arrayBuffer));
+            });
+            reader.readAsArrayBuffer(blob);
+        });
+    }
 
-        cropper.getCroppedCanvas().toBlob(async (blob) => {
-            // console.log(await Utils.readBlobAsDataUrl(blob));
-
-            // TODO: Save back to media library
+    private async updateMediaContent(content: Uint8Array): Promise<void> {
+        const uploadPromise = this.mediaService.updateMediaContent(this.mediaItem.toMedia(), content);
+        uploadPromise.then(updatedItem => {
+            this.mediaItem.downloadUrl(updatedItem.downloadUrl);
+            const cropper = this.cropperInstance();
+            cropper.replace(updatedItem.downloadUrl);
         });
+        await this.viewManager.addPromiseProgressIndicator(uploadPromise, "Media library", `Updating ${this.mediaItem.fileName()}...`);
     }
@@ -131,0 +146,0 @@

workshops/media/ko/mediaDetails.ts

@@ -77,3 +77,3 @@ import * as ko from "knockout";
                 name: "picture-cropper",
-                params: { sourceUrl: this.mediaItem.downloadUrl() }
+                params: { mediaItem: this.mediaItem }
             },
@@ -80,0 +80,0 @@ resize: "vertically horizontally"

No alert changes

Worsened metrics

Total package byte prevSize

633893

decreased by-0.43%

Number of package files

393

decreased by-1.01%

Lines of code

11812

decreased by-0.66%

Dependency changes

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

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

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

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

• Updated@paperbits/common@0.1.39

• Updated@paperbits/styles@0.1.39