bigpipe-util 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -13,3 +13,29 @@ Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) princip
 
 ### Added
 - Dialogs support.
+
+## v0.1.3 - 2022-04-27
+
+### Added
+- Method to close only current dialog
+
+### Fixed
+- Dialog z-index
+
+## v0.1.4 - 2022-05-06
+
+### Added
+- Async requests counter
+- Support for extra arguments in dialog controller
+
+### Fixed
+- Arguments for non-method require calls
+
+## v0.2.0 - 2022-05-17
+
+### Added
+- Shield to prevent "JSON Hijacking"
+- Invalid node checking for AsyncDOM
+
+### Fixed
+- Backdrop for 2+ opened dialogs

package/README.md

@@ -106,10 +106,6 @@ if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
    rel="dialog">Open Modal</a>
 ```
 
-## Credits
-
-- [Richard Dobroň][link-author]
-
 ## Inspiration
 
 BigPipe is inspired by the concept behind Facebook's BigPipe. For more details

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bigpipe-util",
   "description": "This library currently implements small part of Facebook BigPipe so far, but the advantage is to efficiently insert/replace content and work with the DOM. It is also possible to easily call JavaScript modules from PHP.",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "keywords": [
     "bigpipe",
     "xhr",

package/src/ServerJS.js

@@ -29,8 +29,6 @@ export default class ServerJS {
 
       context[method].apply(context, marker || []);
     } else {
-      marker = method;
-
       if (marker) {
         replaceTransportMarkers(this._relativeTo, marker);
       }

package/src/async/AsyncDOM.js

@@ -15,6 +15,11 @@ export default class AsyncDOM {
         node = (node || document.documentElement).querySelector(selector);
       }
 
+      if (!node) {
+        console.error(`Selector '${selector}' does not match anything!`)
+        continue;
+      }
+
       switch (type) {
         case "eval":
           (new Function(content)).apply(node);

package/src/async/AsyncRequest.js

@@ -1,6 +1,8 @@
 import emptyFunction from "fbjs/lib/emptyFunction";
 import AsyncResponse from "./AsyncResponse";
 
+let requests = 0;
+
 function serialize(obj, prefix) {
   const str = [];
   for(const p in obj) {
@@ -119,6 +121,17 @@ AsyncRequest.prototype.abort = function () {
   }
 };
 
+AsyncRequest.prototype._unshieldResponseText = function (text) {
+  const shield = "for (;;);";
+  const shieldLength = shield.length;
+
+  if (text.length <= shieldLength) {
+    throw new Error("Response too short on async to " + this.getURI());
+  }
+
+  return text.substring(shieldLength);
+};
+
 AsyncRequest.prototype.send = function () {
   const {uri, method} = this;
   let { data } = this;
@@ -138,7 +151,8 @@ AsyncRequest.prototype.send = function () {
     if (this.status >= 200 && this.status < 400) {
       let response;
       try {
-        response = eval("(" + this.responseText + ")");
+        const safeJson = self._unshieldResponseText(this.responseText);
+        response = eval("(" + safeJson + ")");
       } catch (e) {
         throw new Error("Failed to handle response: " + e.message + "\n" + this.responseText);
       }
@@ -152,7 +166,13 @@ AsyncRequest.prototype.send = function () {
   };
 
   request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
-  if (!(this.data instanceof FormData)) {
+
+  requests++;
+
+  if (this.data instanceof FormData) {
+    this.data.append('__req', requests);
+  } else {
+    data.__req = requests;
     data = serialize(data);
 
     if (method === "POST") {

package/src/core/Dialog.js

@@ -1,9 +1,11 @@
 import Modal from "modal-vanilla/lib/modal";
 import DOM from "./DOM";
 
+const DEFAULT_Z_INDEX = 1040;
+
 const stack = [];
 let modalId = 1;
-let zIndex = 1040;
+let zIndex;
 let originalBodyPad = null;
 
 export default class Dialog {
@@ -11,7 +13,15 @@ export default class Dialog {
     stack.forEach((dialog) => dialog.hide())
   }
 
-  render(options) {
+  closeCurrent() {
+    const dialog = stack[stack.length - 1];
+
+    if (dialog) {
+      dialog.hide();
+    }
+  }
+
+  render(options, args) {
     DOM.appendContent(document.body, this._makeDialog(options.content));
 
     modalId++;
@@ -22,12 +32,12 @@ export default class Dialog {
       backdrop: options.backdrop ?? true,
       transition: options.transition ?? 0,
       backdropTransition: options.backdropTransition ?? 0,
-    }, options.controller);
+    }, options.controller, args);
 
     stack.push(_dialog);
   }
 
-  showFromModel(model) {
+  showFromModel(model, args) {
     const _dialog = this._show({
       title: model.title || '',
       content: model.body,
@@ -36,12 +46,12 @@ export default class Dialog {
       backdrop: model.backdrop ?? true,
       transition: model.transition ?? 0,
       backdropTransition: model.backdropTransition ?? 0,
-    }, model.controller);
+    }, model.controller, args);
 
     stack.push(_dialog);
   }
 
-  _show(options, controller) {
+  _show(options, controller, args) {
     if (originalBodyPad === null) {
       originalBodyPad = document.body.style.paddingRight;
     }
@@ -49,13 +59,13 @@ export default class Dialog {
     const _modal = new Modal(options);
 
     if (controller) {
-      (new (window.require(controller))(_modal));
+      (new (window.require(controller))(_modal, ...args));
     }
 
     const self = this;
 
     return _modal.on('shown', function ({el}) {
-      zIndex = 10 * stack.length;
+      zIndex = DEFAULT_Z_INDEX + (10 * stack.length);
       el.style.zIndex = zIndex;
       setTimeout(() => document.querySelector('.modal-backdrop').style.zIndex = zIndex - 1);
     }).on('showBackdrop', this._fixBackdrop).on('hidden', function ({el}) {
@@ -73,15 +83,17 @@ export default class Dialog {
     }).show();
   }
 
-  _fixBackdrop(content) {
+  _fixBackdrop() {
     const backdrops = document.querySelectorAll('.modal-backdrop');
+    let shown = false;
 
     backdrops.forEach((backdrop, index) => {
-      if (index > 0 && index === backdrops.length - 1) {
+      if (shown || index > 0 && index === backdrops.length - 1) {
         backdrop.style.display = 'none';
       } else {
         backdrop.style.zIndex = zIndex - 1;
         backdrop.style.display = '';
+        shown = true;
       }
     });
   }