bigpipe-util 0.1.4 → 0.2.2

package/CHANGELOG.md

@@ -4,23 +4,29 @@ All notable changes to `bigpipe-util` will be documented in this file.
 
 Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) principles.
 
-## v0.1.1 - 2022-03-27
+## v0.2.2 - 2022-08-03
 
-### Added
-- Part of BigPipe implementation for Webpack.
+### Fixed
+- calls for modules without constructor
+- dialog opening when using instant closing
 
-## v0.1.2 - 2022-04-14
+## v0.2.1 - 2022-06-02
 
 ### Added
-- Dialogs support.
+- Prevent links from being double-clicked
+- Support for keyboard (close by escape)
 
-## v0.1.3 - 2022-04-27
+### Fixed
+- Closing dialogs with [esc] in the correct order
+
+## v0.2.0 - 2022-05-17
 
 ### Added
-- Method to close only current dialog
+- Shield to prevent "JSON Hijacking"
+- Invalid node checking for AsyncDOM
 
 ### Fixed
-- Dialog z-index
+- Backdrop for 2+ opened dialogs
 
 ## v0.1.4 - 2022-05-06
 
@@ -30,3 +36,21 @@ Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) princip
 
 ### Fixed
 - Arguments for non-method require calls
+
+## v0.1.3 - 2022-04-27
+
+### Added
+- Method to close only current dialog
+
+### Fixed
+- Dialog z-index
+
+## v0.1.2 - 2022-04-14
+
+### Added
+- Dialogs support.
+
+## v0.1.1 - 2022-03-27
+
+### Added
+- Part of BigPipe implementation for Webpack.

package/README.md

@@ -58,7 +58,7 @@ export default class ServerJS extends ServerJSImpl {
 ```javascript
 import AsyncRequest from 'bigpipe-util/src/AsyncRequest';
 
-const request = AsyncRequest('/ajax/remove.php')
+const request = (new AsyncRequest('/ajax/remove.php'))
   // or .setURI('/ajax/remove.php')
   .setMethod('POST')
   .setData({

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.4",
+  "version": "0.2.2",
   "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

@@ -21,7 +21,8 @@ export default class ServerJS {
         replaceTransportMarkers(this._relativeTo, marker);
       }
 
-      const context = new (window.require(modulePath));
+      const factory = window.require(modulePath);
+      const context = typeof factory === 'function' ? new factory : factory;
 
       if (!context[method]) {
         throw new TypeError(`Module ${modulePath} has no method "${method}"`);

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

@@ -121,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;
@@ -140,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);
       }

package/src/core/Dialog.js

@@ -3,11 +3,21 @@ import DOM from "./DOM";
 
 const DEFAULT_Z_INDEX = 1040;
 
-const stack = [];
+let stack = [];
 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())
@@ -29,6 +39,7 @@ 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,
@@ -43,6 +54,7 @@ export default class Dialog {
       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,
@@ -69,7 +81,9 @@ export default class Dialog {
       el.style.zIndex = zIndex;
       setTimeout(() => document.querySelector('.modal-backdrop').style.zIndex = zIndex - 1);
     }).on('showBackdrop', this._fixBackdrop).on('hidden', function ({el}) {
-      stack.pop();
+      stack = stack.filter((modal) => {
+        return ! modal.el.isEqualNode(el);
+      });
 
       if (stack.length) {
         document.body.classList.add('modal-open');
@@ -83,15 +97,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;
       }
     });
   }