bigpipe-util 0.1.1 → 0.1.4

package/CHANGELOG.md

@@ -8,3 +8,25 @@ Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) princip
 
 ### Added
 - Part of BigPipe implementation for Webpack.
+
+## v0.1.2 - 2022-04-14
+
+### 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

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.1",
+  "version": "0.1.4",
   "keywords": [
     "bigpipe",
     "xhr",
@@ -19,6 +19,7 @@
   "bugs:": "https://github.com/richardDobron/bigpipe-util/issues",
   "license": "MIT",
   "dependencies": {
-    "fbjs": "^3.0.4"
+    "fbjs": "^3.0.4",
+    "modal-vanilla": "^0.9.0"
   }
 }

package/src/Primer.js

@@ -4,7 +4,7 @@ import {byTag} from "./core/Parent";
 export default function Primer() {
   const rootElement = document.documentElement;
 
-  const RELATIONSHIP_REGEX = /async(?:-post)?/;
+  const RELATIONSHIP_REGEX = /async(?:-post)?|dialog/;
 
   rootElement.onclick = function (event) {
     event = event || window.event;
@@ -29,6 +29,14 @@ export default function Primer() {
           .setMethod(relationship === "async-post" ? "POST" : "GET")
           .send();
         break;
+      case "dialog":
+        event.preventDefault();
+
+        (new AsyncRequest(linkNodeOnClicked.getAttribute("ajaxify")))
+          .setRelative(linkNodeOnClicked)
+          .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/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) {
@@ -152,7 +154,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

@@ -0,0 +1,105 @@
+import Modal from "modal-vanilla/lib/modal";
+import DOM from "./DOM";
+
+const DEFAULT_Z_INDEX = 1040;
+
+const stack = [];
+let modalId = 1;
+let zIndex;
+let originalBodyPad = null;
+
+export default class Dialog {
+  close() {
+    stack.forEach((dialog) => dialog.hide())
+  }
+
+  closeCurrent() {
+    const dialog = stack[stack.length - 1];
+
+    if (dialog) {
+      dialog.hide();
+    }
+  }
+
+  render(options, args) {
+    DOM.appendContent(document.body, this._makeDialog(options.content));
+
+    modalId++;
+
+    const _dialog = this._show({
+      el: document.getElementById(this.id),
+      animate: false,
+      backdrop: options.backdrop ?? true,
+      transition: options.transition ?? 0,
+      backdropTransition: options.backdropTransition ?? 0,
+    }, options.controller, args);
+
+    stack.push(_dialog);
+  }
+
+  showFromModel(model, args) {
+    const _dialog = this._show({
+      title: model.title || '',
+      content: model.body,
+      footer: model.footer || false,
+      animate: false,
+      backdrop: model.backdrop ?? true,
+      transition: model.transition ?? 0,
+      backdropTransition: model.backdropTransition ?? 0,
+    }, model.controller, args);
+
+    stack.push(_dialog);
+  }
+
+  _show(options, controller, args) {
+    if (originalBodyPad === null) {
+      originalBodyPad = document.body.style.paddingRight;
+    }
+
+    const _modal = new Modal(options);
+
+    if (controller) {
+      (new (window.require(controller))(_modal, ...args));
+    }
+
+    const self = this;
+
+    return _modal.on('shown', function ({el}) {
+      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}) {
+      stack.pop();
+
+      if (stack.length) {
+        document.body.classList.add('modal-open');
+      }
+
+      document.body.style.paddingRight = originalBodyPad;
+
+      zIndex -= 10;
+      self._fixBackdrop();
+      DOM.remove(el);
+    }).show();
+  }
+
+  _fixBackdrop(content) {
+    const backdrops = document.querySelectorAll('.modal-backdrop');
+
+    backdrops.forEach((backdrop, index) => {
+      if (index > 0 && index === backdrops.length - 1) {
+        backdrop.style.display = 'none';
+      } else {
+        backdrop.style.zIndex = zIndex - 1;
+        backdrop.style.display = '';
+      }
+    });
+  }
+
+  _makeDialog(content) {
+    this.id = `js_${modalId.toString(16)}`;
+    return `<div id="${this.id}" class="modal fade" tabindex="-1" role="dialog">
+  ${content}
+</div>`;
+  }
+}