@aller/cyclops-frontend-vanilla - npm Package Compare versions

Comparing version 1.4.0-alpha.1 to 1.4.0-alpha.2

lib/components/loginBox.d.ts

 import { ILoginBox } from "../interfaces/loginBox";
-import "../../lib/style/loginBox.css";
+import "../client/loginBox";
 export declare const injectLoginBox: (id: string, textClasses?: ILoginBox | undefined, _domain?: string | undefined) => void;

lib/components/loginBox.js

@@ -1,16 +0,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { cyclopsLoginRelativeURL } from "@aller/cyclops-frontend-api/lib/cyclops/constants";
 import { createElement } from "./stringToHtml";
 import { defaultLoginBox } from "../interfaces/loginBox";
-import "../../lib/style/loginBox.css";
+import { generateLoginBox } from "../generator/generateLoginBox";
+import "../client/loginBox";
+import { updateToDefaults } from "../helper/spreader";
 var domain;
@@ -26,3 +16,3 @@ export var injectLoginBox = function (id, textClasses, _domain) {
     }
-    textClasses = updateToDefaults(textClasses);
+    textClasses = updateToDefaults(defaultLoginBox, textClasses);
     var box = createBox(textClasses);
@@ -32,38 +22,5 @@ _injectElement.insertAdjacentElement("beforeend", box);
 var createBox = function (textClasses) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     var pathname = window.location.pathname;
-    var html = "\n    <div class=\"login-box " + ((_b = (_a = textClasses === null || textClasses === void 0 ? void 0 : textClasses.classes) === null || _a === void 0 ? void 0 : _a.container) !== null && _b !== void 0 ? _b : "") + "\">\n        <h1 class=\"hi-title " + ((_d = (_c = textClasses === null || textClasses === void 0 ? void 0 : textClasses.classes) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : "") + "\">\n            " + ((_e = textClasses === null || textClasses === void 0 ? void 0 : textClasses.texts) === null || _e === void 0 ? void 0 : _e.loginText) + "\n        </h1>\n        <h3 class=\"hi-subtitle " + ((_g = (_f = textClasses === null || textClasses === void 0 ? void 0 : textClasses.classes) === null || _f === void 0 ? void 0 : _f.subtitle) !== null && _g !== void 0 ? _g : "") + "\">\n            " + ((_h = textClasses === null || textClasses === void 0 ? void 0 : textClasses.texts) === null || _h === void 0 ? void 0 : _h.toSeeText) + "\n        </h3>\n        <div>\n            <a href=\"" + cyclopsLoginRelativeURL(pathname, domain) + "\" class=\"login " + ((_k = (_j = textClasses === null || textClasses === void 0 ? void 0 : textClasses.classes) === null || _j === void 0 ? void 0 : _j.loginButton) !== null && _k !== void 0 ? _k : "") + "\">\n                " + ((_l = textClasses === null || textClasses === void 0 ? void 0 : textClasses.texts) === null || _l === void 0 ? void 0 : _l.loginaID) + "\n            </a>\n        </div>\n\n        <p class=\"p-text\">" + ((_m = textClasses === null || textClasses === void 0 ? void 0 : textClasses.texts) === null || _m === void 0 ? void 0 : _m.ifNoPre) + "</p>\n\t\t<p class=\"p-text\">\n\t\t\t<a href=\"" + cyclopsLoginRelativeURL(pathname, domain) + "\" class=\"register-text " + ((_p = (_o = textClasses === null || textClasses === void 0 ? void 0 : textClasses.classes) === null || _o === void 0 ? void 0 : _o.register) !== null && _p !== void 0 ? _p : "") + "\">" + ((_q = textClasses === null || textClasses === void 0 ? void 0 : textClasses.texts) === null || _q === void 0 ? void 0 : _q.registerText) + "</a>\n\t\t\t" + ((_r = textClasses === null || textClasses === void 0 ? void 0 : textClasses.texts) === null || _r === void 0 ? void 0 : _r.itsFree) + "\n\t\t</p>\n    </div>";
+    var html = generateLoginBox(pathname, textClasses, domain);
     return createElement(html);
 };
-var updateToDefaults = function (textClasses) {
-    var _a, _b, _c, _d, _e, _f;
-    if (!textClasses) {
-        textClasses = {
-            texts: __assign({}, defaultLoginBox.texts)
-        };
-        return textClasses;
-    }
-    if (!textClasses.texts) {
-        textClasses = __assign(__assign({}, textClasses), { texts: __assign({}, defaultLoginBox.texts) });
-        return textClasses;
-    }
-    if (!textClasses.texts.toSeeText) {
-        textClasses.texts.toSeeText = (_a = defaultLoginBox === null || defaultLoginBox === void 0 ? void 0 : defaultLoginBox.texts) === null || _a === void 0 ? void 0 : _a.toSeeText;
-    }
-    if (!textClasses.texts.loginText) {
-        textClasses.texts.loginText = (_b = defaultLoginBox === null || defaultLoginBox === void 0 ? void 0 : defaultLoginBox.texts) === null || _b === void 0 ? void 0 : _b.loginText;
-    }
-    if (!textClasses.texts.loginaID) {
-        textClasses.texts.loginaID = (_c = defaultLoginBox === null || defaultLoginBox === void 0 ? void 0 : defaultLoginBox.texts) === null || _c === void 0 ? void 0 : _c.loginaID;
-    }
-    if (!textClasses.texts.ifNoPre) {
-        textClasses.texts.ifNoPre = (_d = defaultLoginBox === null || defaultLoginBox === void 0 ? void 0 : defaultLoginBox.texts) === null || _d === void 0 ? void 0 : _d.ifNoPre;
-    }
-    if (!textClasses.texts.registerText) {
-        textClasses.texts.registerText = (_e = defaultLoginBox === null || defaultLoginBox === void 0 ? void 0 : defaultLoginBox.texts) === null || _e === void 0 ? void 0 : _e.registerText;
-    }
-    if (!textClasses.texts.itsFree) {
-        textClasses.texts.itsFree = (_f = defaultLoginBox === null || defaultLoginBox === void 0 ? void 0 : defaultLoginBox.texts) === null || _f === void 0 ? void 0 : _f.itsFree;
-    }
-    return textClasses;
-};

lib/components/subscriptionBox.d.ts

 import { IPaymentOptions } from "@aller/cyclops-frontend-api/lib/payment/interface";
+import { ISubscriptionBox } from "../interfaces/subscriptionBox";
 import "../../lib/style/subscriptionBox.css";
-import { ISubscriptionBox } from "../interfaces/subscriptionBox";
 export declare const injectSubscriptionBox: (elementId: string, brandId: string, productId: string, dealId: string, _focus: boolean, _brands: any[], _textsClasses?: ISubscriptionBox | undefined, _paymentOptions?: IPaymentOptions | undefined, _domain?: string | null | undefined) => void;

lib/components/subscriptionBox.js

@@ -1,17 +0,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { cyclopsCheckoutRelativeURL } from "@aller/cyclops-frontend-api/lib/cyclops/constants";
 import { createElement } from "./stringToHtml";
+import { defaultSubscriptionBox, } from "../interfaces/subscriptionBox";
 import A11yDialog from "a11y-dialog";
 import "../../lib/style/subscriptionBox.css";
-import { defaultSubscriptionBox, } from "../interfaces/subscriptionBox";
+import { generateSubscriptionBox } from "../generator/generateSubscriptionBox";
+import { generateSubscriptionModal } from "../generator/generateSubscriptionModal";
+import { updateToDefaults } from "../helper/spreader";
 var deal;
@@ -25,32 +16,11 @@ var brand;
 var createBox = function (id) {
-    var _a, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _q, _r, _s, _t;
-    var html = "\n    <div id=\"" + id + "\" class=\"clearfix track-element subscription-box " + (focus ? "focus" : "") + " " + ((_c = (_a = textsAndClasses.classes) === null || _a === void 0 ? void 0 : _a.subscriptionBoxClass) !== null && _c !== void 0 ? _c : "") + "\">\n        <h4 class=\"name " + ((_f = (_e = textsAndClasses.classes) === null || _e === void 0 ? void 0 : _e.dealNameClass) !== null && _f !== void 0 ? _f : "") + "\">" + deal.dealName + "</h4>\n        " + (((_g = textsAndClasses.texts) === null || _g === void 0 ? void 0 : _g.label) ? "<p class='label " +
-        ((_j = (_h = textsAndClasses.classes) === null || _h === void 0 ? void 0 : _h.labelClass) !== null && _j !== void 0 ? _j : "") +
-        "'>" + ((_k = textsAndClasses.texts) === null || _k === void 0 ? void 0 : _k.label) +
-        "</p>"
-        : "") + "\n        <p class=\"cost " + ((_m = (_l = textsAndClasses.classes) === null || _l === void 0 ? void 0 : _l.costClass) !== null && _m !== void 0 ? _m : "") + "\">" + deal.dealDescription + "</p>\n        <p class=\"full-terms " + ((_q = (_o = textsAndClasses.classes) === null || _o === void 0 ? void 0 : _o.fullTermsClass) !== null && _q !== void 0 ? _q : "") + "\">" + deal.fullTermsDescription + "</p>\n        <button data-a11y-dialog-show=\"" + id + "-modal\" class=\"buy-button " + ((_s = (_r = textsAndClasses.classes) === null || _r === void 0 ? void 0 : _r.buyButtonClass) !== null && _s !== void 0 ? _s : "") + "\" tabindex=\"0\">" + ((_t = textsAndClasses.texts) === null || _t === void 0 ? void 0 : _t.buyButtonText) + "</button>\n    </div>";
+    var html = generateSubscriptionBox(id, focus, deal, textsAndClasses);
     return createElement(html);
 };
 var createModal = function (id) {
-    var _a, _c, _e, _f, _g, _h, _j, _k, _l, _m, _o, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
-    var html = "\n    <div id=\"" + id + "\" class=\"dialog " + ((_c = (_a = textsAndClasses.classes) === null || _a === void 0 ? void 0 : _a.dialogClass) !== null && _c !== void 0 ? _c : "") + "\">\n        <div class=\"dialog-overlay\" tabindex=\"-1\" data-a11y-dialog-hide></div>\n        <dialog class=\"dialog-content " + ((_f = (_e = textsAndClasses.classes) === null || _e === void 0 ? void 0 : _e.dialogContentClass) !== null && _f !== void 0 ? _f : "") + "\" aria-labelledby=\"dialog-title\">\n            <button type=\"button\" class=\"dialog-close " + ((_h = (_g = textsAndClasses.classes) === null || _g === void 0 ? void 0 : _g.dialogCloseClass) !== null && _h !== void 0 ? _h : "") + " \" data-a11y-dialog-hide aria-label=\"Lukk vinduet\">&times;</button>\n            <div>\n                <div class=\"you-chose\">" + ((_j = textsAndClasses.texts) === null || _j === void 0 ? void 0 : _j.youChoseText) + "</div>\n                <h3 class=\"product-name " + ((_l = (_k = textsAndClasses.classes) === null || _k === void 0 ? void 0 : _k.dialogProductNameClass) !== null && _l !== void 0 ? _l : "") + "\">" + product.productName + "</h3>   \n                <p class=\"cost " + ((_o = (_m = textsAndClasses.classes) === null || _m === void 0 ? void 0 : _m.dialogCostClass) !== null && _o !== void 0 ? _o : "") + "\">" + deal.dealDescription + "</p>\n                <p deal-name " + ((_r = (_q = textsAndClasses.classes) === null || _q === void 0 ? void 0 : _q.dialogDealNameClass) !== null && _r !== void 0 ? _r : "") + "\">" + deal.dealName + "</p>\n                <p class=\"full-terms " + ((_t = (_s = textsAndClasses.classes) === null || _s === void 0 ? void 0 : _s.dialogFullTermsClass) !== null && _t !== void 0 ? _t : "") + "\">" + deal.fullTermsDescription + "</p>\n                " + (((_u = textsAndClasses.texts) === null || _u === void 0 ? void 0 : _u.subtitleText) ? "<p class='subtitle-text " +
-        ((_w = (_v = textsAndClasses.classes) === null || _v === void 0 ? void 0 : _v.dialogSubtitleTextClass) !== null && _w !== void 0 ? _w : "") +
-        "'>" + ((_x = textsAndClasses.texts) === null || _x === void 0 ? void 0 : _x.subtitleText) +
-        "</p>"
-        : "") + "\n                <a href=\"" + cyclopsCheckoutRelativeURL(product.productId, deal.dealId, window.location.pathname, domain) + "\" class=\"dialog-buy buy-button " + ((_z = (_y = textsAndClasses.classes) === null || _y === void 0 ? void 0 : _y.dialogBuyButtonClass) !== null && _z !== void 0 ? _z : "") + "\">" + ((_0 = textsAndClasses.texts) === null || _0 === void 0 ? void 0 : _0.buyButtonText) + "</a>\n                " + (((_1 = textsAndClasses.texts) === null || _1 === void 0 ? void 0 : _1.bottomText) ? "<p class='bottom-text " +
-        ((_3 = (_2 = textsAndClasses.classes) === null || _2 === void 0 ? void 0 : _2.dialogBottomTextClass) !== null && _3 !== void 0 ? _3 : "") +
-        "'>" + ((_4 = textsAndClasses.texts) === null || _4 === void 0 ? void 0 : _4.bottomText) +
-        "</p>"
-        : "") + "\n            </div>\n        </dialog>\n    </div>";
+    var html = generateSubscriptionModal(id, deal, product, window.location.pathname, textsAndClasses, domain);
     return createElement(html);
 };
-var setTextsAndClasses = function (textsClasses) {
-    textsAndClasses = {
-        texts: __assign({}, defaultSubscriptionBox.texts)
-    };
-    if (!textsClasses) {
-        return;
-    }
-    textsAndClasses.texts = __assign(__assign({}, defaultSubscriptionBox.texts), textsClasses.texts);
-    textsAndClasses.classes = __assign({}, textsClasses.classes);
+var setTextsAndClasses = function (textClasses) {
+    textsAndClasses = updateToDefaults(defaultSubscriptionBox, textClasses);
 };
@@ -57,0 +27,0 @@ export var injectSubscriptionBox = function (elementId, brandId, productId, dealId, _focus, _brands, _textsClasses, _paymentOptions, _domain) {

lib/components/subscriptionBoxWithGetter.d.ts

 import { IPaymentOptions } from "@aller/cyclops-frontend-api/lib/payment/interface";
 import "promise-polyfill";
-import { ISubscriptionBox } from "src/interfaces/subscriptionBox";
+import { ISubscriptionBox } from "../interfaces/subscriptionBox";
 export declare const subscriptionBoxWithGetter: (elementId: string, brandId: string, productId: string, dealId: string, _focus: boolean, _brands?: any[] | undefined, _textsClasses?: ISubscriptionBox | undefined, _paymentOptions?: IPaymentOptions | undefined, _domain?: string | null | undefined) => Promise<void>;

package.json

 {
   "name": "@aller/cyclops-frontend-vanilla",
-  "version": "1.4.0-alpha.1",
+  "version": "1.4.0-alpha.2",
   "description": "Vanilla JS implementation of login-button",
@@ -28,3 +28,3 @@ "author": "kasperrt <[e-mail]>",
   "dependencies": {
-    "@aller/cyclops-frontend-api": "^1.4.0-alpha.1",
+    "@aller/cyclops-frontend-api": "^1.4.0-alpha.2",
     "a11y-dialog": "^5.3.1",
@@ -50,3 +50,3 @@ "promise-polyfill": "^8.1.3"
   },
-  "gitHead": "3906b9a3331299adb938fceb85a0cf888a913bf5"
+  "gitHead": "6d24080493ea01df23446bcb37190bc547c84ca6"
 }

README.md

@@ -11,2 +11,6 @@ # cyclops-frontend-vanilla
   - [`injectSubscriptionBox`](#functions-injectSubscriptionBox)
+  - [`generateSubscriptionBox`](#functions-generateSubscriptionBox)
+  - [`generateSubscriptionModal`](#functions-generateSubscriptionModal)
+  - [`generateLoginBox`](#functions-generateLoginBox)
+  - [`generateDialogScript`](#functions-generateDialogScript)
 - [TODO](#todo)
@@ -183,1 +187,76 @@
 See <a href="#functions-injectSubscriptionBox">injectSubscriptionBox</a> for the rest of the parameters.
+
+<h3 id="functions-generateSubscriptionBox">generateSubscriptionBox</h3>
+
+```ts
+import { generateSubscriptionBox } from "@aller/cyclops-frontend-vanilla/lib/generator/generateSubscriptionBox";
+
+generateSubscriptionBox(
+  id: string,
+  focus: boolean,
+  deal: IProductDeal,
+  textsAndClasses: ISubscriptionBox
+)
+```
+
+Very similar to the injector (and is in fact used by the injector), but instead just returns the HTML for the element as a string. This can be used for serverside "rendering" of the element.
+
+<h3 id="functions-generateSubscriptionModal">generateSubscriptionModal</h3>
+
+```ts
+import { generateSubscriptionModal } from "@aller/cyclops-frontend-vanilla/lib/generator/generateSubscriptionModal";
+
+generateSubscriptionModal(
+  id: string,
+  deal: IProductDeal,
+  product: IProduct,
+  pathname: string,
+  textsAndClasses: ISubscriptionBox,
+  domain?: string
+)
+```
+
+Very similar to the injector (and is in fact used by the injector), but instead just returns the HTML for the element as a string. This can be used for serverside "rendering" of the element. The only difference to this, and the above generator, is that since it is a modal, this should have e.g. `modal` appended to the ID, and the A11yDialog has to be added manually for the modal to actually work.
+
+<h3 id="functions-generateLoginBox">generateLoginBox</h3>
+
+```ts
+import { generateLoginBox } from "@aller/cyclops-frontend-vanilla/lib/generator/generateLoginBox";
+
+generateLoginBox(
+  id: string,
+  deal: IProductDeal,
+  product: IProduct,
+  pathname: string,
+  textsAndClasses: ISubscriptionBox,
+  domain?: string
+)
+```
+
+Very similar to the injector (and is in fact used by the injector), but instead just returns the HTML for the element as a string. This can be used for serverside "rendering" of the element.
+
+<h3 id="functions-generateDialogScript">generateDialogScript</h3>
+
+```ts
+import { generateDialogScript } from "@aller/cyclops-frontend-vanilla/lib/generator/generateDialogScript";
+
+generateDialogScript(id: string)
+```
+
+This is used to add inline script-tags to trigger the A11yDialog clientside on page-rendered. The ID here must be the same that is sent in with <a href="#functions-generateSubscriptionModal">generateSubscriptionModal</a>.
+
+<h3 id="client-loginBox">loginBox</a>
+
+```ts
+import "@aller/cyclops-frontend-vanilla/lib/client/loginBox";
+```
+
+This is used to add the needed CSS for the login-box, if going the server-side rendering way.
+
+<h3 id="client-subscriptionBox">subscriptionBox</a>
+
+```ts
+import "@aller/cyclops-frontend-vanilla/lib/client/subscriptionBox";
+```
+
+This is used to add the needed CSS+A11yDialog script for the subscription-box + modal, if going the server-side rendering way.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48291

increased by9.22%

Number of package files

38

increased by58.33%

Lines of code

754

increased by0.27%

Number of lines in readme file

261

increased by43.41%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@aller/cyclops-frontend-api@^1.4.0-alpha.2