mftsccs-browser 2.0.17-beta → 2.0.18-beta

package/dist/serviceWorker.bundle.js

@@ -22027,6 +22027,320 @@ class BuilderStatefulWidget extends _StatefulWidget__WEBPACK_IMPORTED_MODULE_0__
 }
 
 
+/***/ }),
+
+/***/ "./src/Widgets/RenderWidgetService.ts":
+/*!********************************************!*\
+  !*** ./src/Widgets/RenderWidgetService.ts ***!
+  \********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   renderLatestWidget: () => (/* binding */ renderLatestWidget),
+/* harmony export */   renderPage: () => (/* binding */ renderPage),
+/* harmony export */   renderWidget: () => (/* binding */ renderWidget)
+/* harmony export */ });
+/* harmony import */ var _app__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../app */ "./src/app.ts");
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+
+function renderPage(pageId, attachNode, props) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const widgets = yield (0,_app__WEBPACK_IMPORTED_MODULE_0__.GetRelation)(pageId, "the_page_body");
+        if ((_a = widgets === null || widgets === void 0 ? void 0 : widgets[0]) === null || _a === void 0 ? void 0 : _a.id)
+            yield renderWidget(widgets[0].id, attachNode, props);
+    });
+}
+function renderLatestWidget(widgetId, attachNode, props) {
+    return __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const widgets = yield (0,_app__WEBPACK_IMPORTED_MODULE_0__.GetRelation)(widgetId, "the_widget_latest");
+        if ((widgets === null || widgets === void 0 ? void 0 : widgets.length) == 0)
+            yield renderWidget(widgetId, attachNode, props);
+        else {
+            const latestWidgetId = (_a = widgets === null || widgets === void 0 ? void 0 : widgets[0]) === null || _a === void 0 ? void 0 : _a.id;
+            if (latestWidgetId)
+                yield renderWidget(latestWidgetId, attachNode, props);
+        }
+    });
+}
+function renderWidget(widgetId, attachNode, props) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const widgetTree = yield getWidgetFromId(widgetId);
+            const appElement = attachNode;
+            // const newWidget = await convertWidgetTreeToWidget(
+            yield convertWidgetTreeToWidget(widgetTree, appElement, undefined, props);
+            // add newWidget css to the page
+            const style = document.createElement("style");
+            style.innerHTML = widgetTree.css;
+            appElement.appendChild(style);
+            // add newWidget js to the page
+            const script = document.createElement("script");
+            script.innerHTML = widgetTree.js;
+            appElement.appendChild(script);
+            // remove class wb-initial-empty from all elements that have it from fspagePreview
+            const wbInitialEmpty = appElement.querySelectorAll(".wb-initial-empty");
+            wbInitialEmpty.forEach((el) => {
+                el.classList.remove("wb-initial-empty");
+            }); // add the css for the class fspage-preview
+            document
+                .querySelectorAll('[onclick="widgetSelected(event)"]')
+                .forEach((element) => {
+                element.removeAttribute("onclick");
+            }); // remove the onclick event from the widget container
+        }
+        catch (error) {
+            console.error("Error Caught Rendering Widget");
+        }
+    });
+}
+/**
+ * This function builds a widget tree. This tree is built fully along with its children
+ * This tree can then be used to build the whole dom for the widget.
+ * This has recursive property so that the recursion can be used to build this tree.
+ * @param widgetId the id of the widget
+ * @returns WidgetTree.
+ */
+function getWidgetFromId(widgetId_1) {
+    return __awaiter(this, arguments, void 0, function* (widgetId, visitedWidgets = [], token = "") {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36;
+        try {
+            const widgetNode = new _app__WEBPACK_IMPORTED_MODULE_0__.WidgetTree();
+            const output = yield getWidgetCodeFromId(widgetId, token);
+            visitedWidgets.push(widgetId);
+            const widgetInfo = (_a = output === null || output === void 0 ? void 0 : output.data) === null || _a === void 0 ? void 0 : _a.the_widget;
+            widgetNode.name = (_d = (_c = (_b = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_name) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.the_name;
+            widgetNode.html = (_g = (_f = (_e = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_html) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.the_html;
+            widgetNode.css = (_k = (_j = (_h = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_css) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.the_css;
+            widgetNode.js = (_o = (_m = (_l = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_js) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.the_js;
+            widgetNode.origin = Number((_r = (_q = (_p = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_origin) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.the_originid);
+            widgetNode.version =
+                (_u = (_t = (_s = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_version) === null || _s === void 0 ? void 0 : _s[0]) === null || _t === void 0 ? void 0 : _t.data) === null || _u === void 0 ? void 0 : _u.the_version;
+            widgetNode.clean = (_x = (_w = (_v = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_clean) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.data) === null || _x === void 0 ? void 0 : _x.the_clean;
+            widgetNode.timestamp =
+                (_0 = (_z = (_y = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_timestamp) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.data) === null || _0 === void 0 ? void 0 : _0.the_timestamp;
+            widgetNode.id = output.id;
+            const widgetTypeValue = (_3 = (_2 = (_1 = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_type) === null || _1 === void 0 ? void 0 : _1[0]) === null || _2 === void 0 ? void 0 : _2.data) === null || _3 === void 0 ? void 0 : _3.the_type;
+            if (widgetTypeValue == "null" || widgetTypeValue == null) {
+                widgetNode.type = "the_element_name";
+            }
+            else {
+                widgetNode.type = widgetTypeValue;
+            }
+            widgetNode.after_render =
+                (_6 = (_5 = (_4 = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_after_render) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.data) === null || _6 === void 0 ? void 0 : _6.the_after_render;
+            widgetNode.before_render =
+                (_9 = (_8 = (_7 = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_before_render) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.data) === null || _9 === void 0 ? void 0 : _9.the_before_render;
+            widgetNode.update = (_12 = (_11 = (_10 = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_update) === null || _10 === void 0 ? void 0 : _10[0]) === null || _11 === void 0 ? void 0 : _11.data) === null || _12 === void 0 ? void 0 : _12.the_update;
+            widgetNode.widgetId = widgetId;
+            widgetNode.mount_child =
+                (_15 = (_14 = (_13 = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_mount_child) === null || _13 === void 0 ? void 0 : _13[0]) === null || _14 === void 0 ? void 0 : _14.data) === null || _15 === void 0 ? void 0 : _15.the_mount_child;
+            const childWidgets = widgetInfo === null || widgetInfo === void 0 ? void 0 : widgetInfo.the_widget_s_child;
+            // if there are children present in the widget then convert the children to widget and put it inside of the tree.
+            if (childWidgets === null || childWidgets === void 0 ? void 0 : childWidgets.length) {
+                for (let i = 0; i < childWidgets.length; i++) {
+                    const childWidgetId = ((_19 = (_18 = (_17 = (_16 = childWidgets[i]) === null || _16 === void 0 ? void 0 : _16.data.the_child_widget) === null || _17 === void 0 ? void 0 : _17.the_child_widget_info) === null || _18 === void 0 ? void 0 : _18[0]) === null || _19 === void 0 ? void 0 : _19.id) ||
+                        ((_24 = (_23 = (_22 = (_21 = (_20 = childWidgets[i]) === null || _20 === void 0 ? void 0 : _20.data.the_child_widget) === null || _21 === void 0 ? void 0 : _21.the_child_widget_parent) === null || _22 === void 0 ? void 0 : _22[0]) === null || _23 === void 0 ? void 0 : _23.data) === null || _24 === void 0 ? void 0 : _24.the_parent);
+                    const childWidget = yield getWidgetFromId(childWidgetId, visitedWidgets, token);
+                    const childWidgetTypeValue = (_30 = (_29 = (_28 = (_27 = (_26 = (_25 = childWidgets[i]) === null || _25 === void 0 ? void 0 : _25.data) === null || _26 === void 0 ? void 0 : _26.the_child_widget) === null || _27 === void 0 ? void 0 : _27.the_child_widget_type) === null || _28 === void 0 ? void 0 : _28[0]) === null || _29 === void 0 ? void 0 : _29.data) === null || _30 === void 0 ? void 0 : _30.the_type;
+                    const childWidgetWrapperId = (_36 = (_35 = (_34 = (_33 = (_32 = (_31 = childWidgets[i]) === null || _31 === void 0 ? void 0 : _31.data) === null || _32 === void 0 ? void 0 : _32.the_child_widget) === null || _33 === void 0 ? void 0 : _33.the_child_widget_wrapper) === null || _34 === void 0 ? void 0 : _34[0]) === null || _35 === void 0 ? void 0 : _35.data) === null || _36 === void 0 ? void 0 : _36.the_wrapper;
+                    if (childWidgetTypeValue == "null" || childWidgetTypeValue == null) {
+                        childWidget.type = "the_element_name";
+                    }
+                    else {
+                        childWidget.type = childWidgetTypeValue;
+                    }
+                    childWidget.wrapper = childWidgetWrapperId;
+                    widgetNode.children.push(childWidget);
+                }
+            }
+            return widgetNode;
+        }
+        catch (ex) {
+            console.error("error", ex);
+            throw ex;
+        }
+    });
+}
+/**
+ *
+ * @param tree Widget tree from getWidgetFromId(widgetId);
+ * @param parentElement this is the dom element on which we want to add our widget
+ * @returns the widgetree with widgets attached inside of it.
+ * Also this will add the tree to the dom.
+ */
+function convertWidgetTreeToWidget(tree_1, parentElement_1) {
+    return __awaiter(this, arguments, void 0, function* (tree, parentElement, isMain = true, props) {
+        var _a, _b;
+        const newWidget = new _app__WEBPACK_IMPORTED_MODULE_0__.BuilderStatefulWidget();
+        newWidget.html = tree.html;
+        newWidget.widgetType = tree.type;
+        newWidget.componentDidMountFunction = tree.before_render;
+        newWidget.addEventFunction = tree.after_render;
+        newWidget.mountChildWidgetsFunction = tree.mount_child;
+        // newWidget.css = newWidget.css ? newWidget.css : "";
+        if (props)
+            newWidget.data = props;
+        parentElement.innerHTML = "";
+        const newParent = parentElement;
+        //let newParent = appendWidgetContainerToParent(parentElement, tree.id, isMain);
+        isMain = false;
+        if (newParent) {
+            yield newWidget.mount(newParent);
+            tree.widget = newWidget;
+            if (tree.children.length > 0) {
+                if (((_a = newWidget.childWidgetElement) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                    for (let i = 0; i < ((_b = tree.children) === null || _b === void 0 ? void 0 : _b.length); i++) {
+                        const child = tree.children[i];
+                        for (let j = 0; j < newWidget.childWidgetElement.length; j++) {
+                            const widgetElement = newWidget.childWidgetElement[j];
+                            if (child.id ===
+                                Number(widgetElement.getAttribute("data-widgetid")) &&
+                                child.wrapper === widgetElement.id) {
+                                const clearedChildWidget = clearDraggedWidget(child);
+                                const childWidget = yield convertWidgetTreeToWidget(clearedChildWidget, widgetElement, isMain);
+                                newWidget.childWidgets.push(childWidget);
+                                newWidget.css =
+                                    newWidget.css +
+                                        `div[data-widgetid="${child.id}"] { ${child.css} }`;
+                                childWidget.dataChange((value) => {
+                                    var _a;
+                                    console.log("This is the data change in child", value);
+                                    const type = (_a = value === null || value === void 0 ? void 0 : value.type) === null || _a === void 0 ? void 0 : _a.characterValue;
+                                    if (type) {
+                                        newWidget.childrenData[type] = value;
+                                    }
+                                    console.log("new child data", newWidget.childrenData);
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        console.log("newWidget ->", newWidget);
+        // Unwrap specific containers
+        yield unwrapContainers(parentElement, ".mftsccs-marking-element");
+        yield unwrapContainers(parentElement, ".widget_container");
+        return newWidget;
+    });
+}
+function getWidgetCodeFromId(widgetId, token) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const searchFirst = new _app__WEBPACK_IMPORTED_MODULE_0__.SearchQuery();
+            searchFirst.composition = widgetId;
+            searchFirst.fullLinkers = [
+                "the_widget",
+                "the_widget_widget",
+                "the_widget_name",
+                "the_widget_html",
+                "the_widget_css",
+                "the_widget_js",
+                "the_widget_timestamp",
+                "the_widget_type",
+                "the_widget_after_render",
+                "the_widget_before_render",
+                "the_widget_update",
+                "the_widget_mount_child",
+                "the_widget_clean",
+                "the_widget_s_child",
+                "the_widget_version",
+                "the_widget_origin",
+            ];
+            searchFirst.inpage = 100;
+            const searchSecond = new _app__WEBPACK_IMPORTED_MODULE_0__.SearchQuery();
+            searchSecond.fullLinkers = [
+                "the_child_widget",
+                "the_child_widget_type",
+                "the_child_widget_parent",
+                "the_child_widget_wrapper",
+                "the_child_widget_info",
+            ];
+            searchSecond.inpage = 100;
+            const queryParams = [searchFirst, searchSecond];
+            const output = yield (0,_app__WEBPACK_IMPORTED_MODULE_0__.SearchLinkMultipleAll)(queryParams, token);
+            console.log("getWidgetCodeFromId output ->", output);
+            return output;
+        }
+        catch (error) {
+            console.error("error", error);
+            throw error;
+        }
+    });
+}
+function clearDraggedWidget(widgetTree) {
+    widgetTree.html = widgetTree.html.replace(/<[^>]*\bclass=["'][^"']*\bwidget_container\b[^"']*["'][^>]*>/g, (match) => {
+        return match.replace(/\bwidget_container\b/g, "").trim();
+    });
+    widgetTree.html = widgetTree.html.replace(/<[^>]*\bdraggable=["'][^"']*\btrue\b[^"']*["'][^>]*>/g, (match) => {
+        return match.replace(/\btrue\b/g, "false").trim();
+    });
+    widgetTree.html = widgetTree.html.replace(/<[^>]*\bclass=["'][^"']*\bhover-element\b[^"']*["'][^>]*>/g, (match) => {
+        return match.replace(/\bhover-element\b/g, "").trim();
+    });
+    widgetTree.html = widgetTree.html.replace(/<[^>]*\bclass=["'][^"']*\bwb-block\b[^"']*["'][^>]*>/g, (match) => {
+        return match.replace(/\bwb-block\b/g, "").trim();
+    });
+    widgetTree.html = widgetTree.html.replace(/<[^>]*onclick="widgetSelected\(event\)"\s*,?\s*ondragover="_dragService\.dragOverWidgetElement\(event\)"\s*,?\s*ondrop="_dragService\.dropWidgetElement\(event\)"\s*,?\s*ondragstart="_dragService\.dragStartWidgetElement\(event\)"\s*,?\s*ondragend="_dragService\.dragEndWidgetElement\(event\)"[^>]*>/g, (match) => {
+        return match
+            .replace(/onclick="widgetSelected\(event\)"/g, 'onclick=""')
+            .replace(/ondragover="_dragService\.dragOverWidgetElement\(event\)"/g, 'ondragover=""')
+            .replace(/ondrop="_dragService\.dropWidgetElement\(event\)"/g, 'ondrop=""')
+            .replace(/ondragstart="_dragService\.dragStartWidgetElement\(event\)"/g, 'ondragstart=""')
+            .replace(/ondragend="_dragService\.dragEndWidgetElement\(event\)"/g, 'ondragend=""')
+            .trim();
+    });
+    widgetTree.html = widgetTree.html.replace(/<[^>]*\bondragstart=["'][^"']*\b_dragService\.onWidgetDragStart\(event\)\b[^"']*["'][^>]*>/g, (match) => {
+        return match
+            .replace(/\b_dragService\.onWidgetDragStart\(event\)\b/g, "")
+            .trim();
+    });
+    return widgetTree;
+}
+function unwrapWidgetContainers(widgetContainerEl, queryParam) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // Select all div elements with the queryParam
+        const widgetContainers = widgetContainerEl.querySelectorAll(queryParam);
+        // Loop through each div and replace it with its inner content
+        widgetContainers.forEach((element) => {
+            // Move all child nodes of the div before the div
+            while (element.firstChild) {
+                element.parentNode.insertBefore(element.firstChild, element);
+            }
+            // Remove the empty div
+            element.remove();
+        });
+        return widgetContainerEl;
+    });
+}
+function unwrapContainers(parentElement, selector) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const elements = parentElement.querySelectorAll(selector);
+        for (const el of elements) {
+            const parent = el.parentElement;
+            if (parent) {
+                while (el.firstChild) {
+                    const unwrappedChild = yield unwrapWidgetContainers(el.firstChild, selector);
+                    parent.insertBefore(unwrappedChild, el);
+                }
+                parent.removeChild(el);
+            }
+        }
+    });
+}
+
+
 /***/ }),
 
 /***/ "./src/Widgets/StatefulWidget.ts":
@@ -23471,6 +23785,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   init: () => (/* binding */ init),
 /* harmony export */   recursiveFetch: () => (/* reexport safe */ _Services_GetComposition__WEBPACK_IMPORTED_MODULE_7__.recursiveFetch),
 /* harmony export */   recursiveFetchNew: () => (/* reexport safe */ _Services_Composition_BuildComposition__WEBPACK_IMPORTED_MODULE_46__.recursiveFetchNew),
+/* harmony export */   renderLatestWidget: () => (/* reexport safe */ _Widgets_RenderWidgetService__WEBPACK_IMPORTED_MODULE_120__.renderLatestWidget),
+/* harmony export */   renderPage: () => (/* reexport safe */ _Widgets_RenderWidgetService__WEBPACK_IMPORTED_MODULE_120__.renderPage),
+/* harmony export */   renderWidget: () => (/* reexport safe */ _Widgets_RenderWidgetService__WEBPACK_IMPORTED_MODULE_120__.renderWidget),
 /* harmony export */   searchLinkMultipleListener: () => (/* reexport safe */ _WrapperFunctions_SearchLinkMultipleAllObservable__WEBPACK_IMPORTED_MODULE_70__.searchLinkMultipleListener),
 /* harmony export */   sendMessage: () => (/* binding */ sendMessage),
 /* harmony export */   serviceWorker: () => (/* binding */ serviceWorker),
@@ -23604,6 +23921,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Widgets_WidgetTree__WEBPACK_IMPORTED_MODULE_117__ = __webpack_require__(/*! ./Widgets/WidgetTree */ "./src/Widgets/WidgetTree.ts");
 /* harmony import */ var _AccessTracker_accessTracker__WEBPACK_IMPORTED_MODULE_118__ = __webpack_require__(/*! ./AccessTracker/accessTracker */ "./src/AccessTracker/accessTracker.ts");
 /* harmony import */ var _Services_CreateConnection_CreateConnectionEntity__WEBPACK_IMPORTED_MODULE_119__ = __webpack_require__(/*! ./Services/CreateConnection/CreateConnectionEntity */ "./src/Services/CreateConnection/CreateConnectionEntity.ts");
+/* harmony import */ var _Widgets_RenderWidgetService__WEBPACK_IMPORTED_MODULE_120__ = __webpack_require__(/*! ./Widgets/RenderWidgetService */ "./src/Widgets/RenderWidgetService.ts");
 var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -23741,6 +24059,7 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
 
 
 
+
 
 
 var serviceWorker;