bigpipe-util 0.1.3 → 0.2.1

package/CHANGELOG.md

@@ -21,3 +21,30 @@ Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) princip
 
 ### 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
+
+## v0.2.1 - 2022-06-02
+
+### Added
+- Prevent links from being double-clicked
+- Support for keyboard (close by escape)
+
+### Fixed
+- Closing dialogs with [esc] in the correct order

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.3",
+  "version": "0.2.1",
   "keywords": [
     "bigpipe",
     "xhr",

package/src/Primer.js

@@ -19,6 +19,11 @@ export default function Primer() {
     let relationship = linkNodeOnClicked.rel && linkNodeOnClicked.rel.match(RELATIONSHIP_REGEX);
     relationship = relationship && relationship[0];
 
+    if (linkNodeOnClicked.classList.contains('async-saving')) {
+      event.preventDefault();
+      return;
+    }
+
     switch (relationship) {
       case "async":
       case "async-post":
@@ -26,6 +31,15 @@ export default function Primer() {
 
         (new AsyncRequest(linkNodeOnClicked.getAttribute("ajaxify")))
           .setRelative(linkNodeOnClicked)
+          .setInitialHandler(() => {
+            linkNodeOnClicked.classList.add("async-saving");
+          })
+          .setHandler(() => {
+            linkNodeOnClicked.classList.remove("async-saving");
+          })
+          .setErrorHandler(() => {
+            linkNodeOnClicked.classList.remove("async-saving");
+          })
           .setMethod(relationship === "async-post" ? "POST" : "GET")
           .send();
         break;
@@ -34,6 +48,15 @@ export default function Primer() {
 
         (new AsyncRequest(linkNodeOnClicked.getAttribute("ajaxify")))
           .setRelative(linkNodeOnClicked)
+          .setInitialHandler(() => {
+            linkNodeOnClicked.classList.add("async-saving");
+          })
+          .setHandler(() => {
+            linkNodeOnClicked.classList.remove("async-saving");
+          })
+          .setErrorHandler(() => {
+            linkNodeOnClicked.classList.remove("async-saving");
+          })
           .setMethod("POST")
           .send();
         break;

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

@@ -8,6 +8,16 @@ let modalId = 1;
 let zIndex;
 let originalBodyPad = null;
 
+Modal.prototype._handleKeydownEvent = function(e) {
+  if (e.which === 27 && this._options.keyboard) {
+    const currentModal = stack[stack.length - 1];
+    if (currentModal.el.isEqualNode(this.el)) {
+      this.emit('dismiss', this, e, null);
+      this.hide();
+    }
+  }
+}
+
 export default class Dialog {
   close() {
     stack.forEach((dialog) => dialog.hide())
@@ -21,7 +31,7 @@ export default class Dialog {
     }
   }
 
-  render(options) {
+  render(options, args) {
     DOM.appendContent(document.body, this._makeDialog(options.content));
 
     modalId++;
@@ -29,29 +39,31 @@ export default class Dialog {
     const _dialog = this._show({
       el: document.getElementById(this.id),
       animate: false,
+      keyboard: options.keyboard ?? true,
       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,
       footer: model.footer || false,
       animate: false,
+      keyboard: model.keyboard ?? true,
       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;
     }
@@ -59,7 +71,7 @@ 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;
@@ -83,15 +95,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;
       }
     });
   }