@paperbits/styles - npm Package Compare versions

Comparing version 0.1.73 to 0.1.74

contracts/fontContract.ts

@@ -18,3 +18,3 @@ export interface FontVariantContract {
     /**
-     * e.g. "files/abcdef".
+     * A key that is used to identify a font source.
      */
@@ -21,0 +21,0 @@ sourceKey?: string;

package.json

 {
     "name": "@paperbits/styles",
-    "version": "0.1.73",
+    "version": "0.1.74",
     "description": "Paperbits style editors.",
@@ -19,5 +19,7 @@ "author": "Paperbits",
     "dependencies": {
-        "@paperbits/common": "0.1.73",
+        "@paperbits/common": "0.1.74",
         "cropperjs": "^1.4.0",
         "google-maps": "^3.2.1",
+        "jss": "^9.8.7",
+        "jss-preset-default": "^4.5.0",
         "knockout": "^3.5.0-beta",
@@ -27,7 +29,7 @@ "knockout.validation": "^2.0.3",
         "lodash": "^4.17.4",
+        "mime-types": "^2.1.22",
+        "opentype.js": "0.11.0",
         "perfect-scrollbar": "^1.2.0",
-        "xhr2": "^0.1.4",
-        "jss": "^9.8.7",
-        "jss-preset-default": "^4.5.0",
-        "pickr-widget": "^0.3.1"
+        "pickr-widget": "^0.3.1",
+        "xhr2": "^0.1.4"
     },
@@ -34,0 +36,0 @@ "devDependencies": {

plugins/fontStylePlugin.ts

 import { StylePlugin } from "./stylePlugin";
 import { ThemeContract } from "../contracts";
+import { IPermalinkResolver } from "@paperbits/common/permalinks";
 
@@ -7,3 +8,6 @@ export class FontsStylePlugin extends StylePlugin {
 
-    constructor(private readonly themeContract: ThemeContract) {
+    constructor(
+        private readonly permalinkResolver: IPermalinkResolver,
+        private readonly themeContract: ThemeContract
+    ) {
         super();
@@ -15,14 +19,26 @@ }
 
-        Object.keys(this.themeContract.fonts).forEach(fontKey => {
+        for (const fontKey of Object.keys(this.themeContract.fonts)) {
             const fontContract = this.themeContract.fonts[fontKey];
 
-            fontContract.variants.forEach(variant => {
+            for (const variant of fontContract.variants) {
+                let fontVariantUrl;
+
+                if (variant.sourceKey) {
+                    fontVariantUrl = await this.permalinkResolver.getUrlByTargetKey(variant.sourceKey);
+                }
+                else if (variant.file) {
+                    fontVariantUrl = variant.file;
+                }
+                else {
+                    throw new Error("Font variant URL is empty.");
+                }
+
                 fontFaceRules.push({
                     fontFamily: fontContract.family,
-                    src: `url(${variant.file})`,
+                    src: `url(${fontVariantUrl})`,
                     fontStyle: variant.style || "normal",
                     fontWeight: variant.weight || "normal"
                 });
-            });
-        });
+            }
+        }
 
@@ -29,0 +45,0 @@ const result = {

styleCompiler.ts

@@ -40,3 +40,3 @@ import * as Utils from "@paperbits/common/utils";
         private readonly styleService: StyleService,
-        private readonly mediaPermalinkResolver: IPermalinkResolver,
+        private readonly mediaPermalinkResolver: IPermalinkResolver
     ) {
@@ -79,3 +79,3 @@ this.plugins = {};
 
-        const fontsPlugin = new FontsStylePlugin(themeContract);
+        const fontsPlugin = new FontsStylePlugin(this.mediaPermalinkResolver, themeContract);
         const fontsRules = await fontsPlugin.contractToJss();
@@ -246,3 +246,3 @@ Utils.assign(allStyles, fontsRules);
 
-        const fontsPlugin = new FontsStylePlugin(themeContract);
+        const fontsPlugin = new FontsStylePlugin(this.mediaPermalinkResolver, themeContract);
         const fontsRules = await fontsPlugin.contractToJss();
@@ -249,0 +249,0 @@

styleGuide/styleGuide.ts

@@ -62,3 +62,3 @@ import * as ko from "knockout";
         const view: IView = {
-            heading: "Google fonts",
+            heading: "Fonts",
             component: {
@@ -65,0 +65,0 @@ name: "google-fonts",

styleService.ts

@@ -176,2 +176,3 @@ import * as Utils from "@paperbits/common/utils";
     }
+
 }

workshops/colors/colorSelector.ts

@@ -60,6 +60,2 @@ import * as ko from "knockout";
     }
-
-    public addColor(): void {
-        debugger;
-    }
 }

workshops/googleFonts/googleFonts.ts

@@ -0,5 +1,10 @@
+import { FontParser } from "./../fonts/fontParser";
 import * as ko from "knockout";
 import * as Utils from "@paperbits/common/utils";
+import * as Objects from "@paperbits/common";
+import * as mime from "mime-types";
 import template from "./googleFonts.html";
 import { HttpClient, HttpMethod } from "@paperbits/common/http";
+import { IMediaService } from "@paperbits/common/media";
+import { IViewManager } from "@paperbits/common/ui";
 import { Component, Param, Event, OnMounted } from "@paperbits/common/ko/decorators";
@@ -43,9 +48,6 @@ import { StyleService } from "../../styleService";
         private readonly styleService: StyleService,
-        private readonly httpClient: HttpClient
+        private readonly httpClient: HttpClient,
+        private readonly viewManager: IViewManager,
+        private readonly mediaService: IMediaService
     ) {
-        this.loadGoogleFonts = this.loadGoogleFonts.bind(this);
-        this.loadNextPage = this.loadNextPage.bind(this);
-        this.selectFont = this.selectFont.bind(this);
-        this.searchFonts = this.searchFonts.bind(this);
-
         this.searchPattern = ko.observable("");
@@ -108,2 +110,41 @@ this.fonts = ko.observableArray<GoogleFont>();
     }
-}
+
+    public async uploadFont(): Promise<void> {
+        const files = await this.viewManager.openUploadDialog();
+
+        // this.working(true);
+
+        const styles = await this.styleService.getStyles();
+
+        const file = files[0];
+
+        const content = await Utils.readFileAsByteArray(file);
+        const fontContract = await FontParser.parse(content);
+
+        const identifier = Utils.guid();
+        const contentType = mime.lookup(file.name);
+        const fontVariant = fontContract.variants[0];
+
+        // fontVariant.file = file.name;
+
+        const uploadPromise = this.mediaService.createMedia(file.name, content, contentType);
+
+        this.viewManager.notifyProgress(uploadPromise, "Styles", `Uploading ${file.name}...`);
+
+        const media = await uploadPromise;
+        fontVariant.sourceKey = media.key;
+
+        Objects.setValueAt(fontContract.key, styles, fontContract);
+
+        this.styleService.updateStyles(styles);
+
+        if (this.selectedFont) {
+            this.selectedFont(fontContract);
+        }
+
+        if (this.onSelect) {
+            this.onSelect(fontContract);
+        }
+    }
+    // this.working(false);
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

151964

increased by2.48%

Number of package files

88

increased by1.15%

Lines of code

2796

increased by2.87%

Worsened metrics

Dependency count

14

increased by16.67%

Dependency changes

• + Addedmime-types@^2.1.22

• + Addedopentype.js@0.11.0

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

• + Addedmime-db@1.52.0(transitive)

• + Addedmime-types@2.1.35(transitive)

• + Addedopentype.js@0.11.0(transitive)

• + Addedstring.prototype.codepointat@0.2.1(transitive)

• + Addedtiny-inflate@1.0.3(transitive)

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

• Updated@paperbits/common@0.1.74