bigpipe-util 0.2.7 → 0.2.10

package/CHANGELOG.md

@@ -4,10 +4,21 @@ All notable changes to `bigpipe-util` will be documented in this file.
 
 Updates should follow the [Keep a CHANGELOG](http://keepachangelog.com/) principles.
 
+## v0.2.10 - 2025-05-15
+- Added `onAfterLoad.js`, `waitForLoad.js`
+
+### Added
+- Added `timeout` to open dialog with a delay in method `showFromModel`
+
+## v0.2.8 - 2025-05-02
+
+### Added
+- Added `timeout` to open dialog with a delay in method `showFromModel`
+
 ## v0.2.7 - 2025-03-22
 
 ### Added
-- Added `timeout` to open dialog with a delay
+- Added `timeout` to open dialog with a delay in method `render`
 
 ## v0.2.6 - 2025-01-16
 

package/README.md

@@ -3,30 +3,30 @@
 This library currently implements small part of [Facebook BigPipe][blog] 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.
 
 
-## Demo App
+## 👀 Demo App
 Try the app with [live demo](http://bigpipe.xf.cz).
 
-## Full documentation
+## 📕 Full documentation
 https://richarddobron.github.io/bigpipe-php/
 
-## Requirements
+## ℹ️ Requirements
 * PHP 7.1 or higher
 * Webpack
 
-## Installation
+## 📦 Installation
+Follow these steps to install and set up:
 
-These steps are required:
-1. Install composer package:
+### 1. Install composer package:
 ```shell
 $ composer require richarddobron/bigpipe
 ```
 
-2. Install npm package:
+### 2. Install npm package:
 ```shell
 $ npm install bigpipe-util
 ```
 
-3. Add this lines to /path/to/resources/js/app.js:
+### 3. Add the following to /path/to/resources/js/app.js:
 ```javascript
 import Primer from 'bigpipe-util/src/Primer';
 
@@ -39,19 +39,10 @@ window.require = (modulePath) => {
 };
 ```
 
-4. Create file /path/to/resources/js/ServerJS.js
-   - this step is optional, but if you skip it, use this in next step:
-   ```require("bigpipe-util/ServerJS")```
-```javascript
-import ServerJSImpl from 'bigpipe-util/src/ServerJS';
-export default class ServerJS extends ServerJSImpl {
-}
-```
-
-5. Add this lines to page footer:
+### 4. Add these lines to the page footer:
 ```html
 <script>
-    (new (require("ServerJS"))).handle(<?=json_encode(\dobron\BigPipe\BigPipe::jsmods())?>);
+    (new (require("bigpipe-util/ServerJS"))).handle(<?=json_encode(\dobron\BigPipe\BigPipe::jsmods())?>);
 </script>
 ```
 
@@ -85,16 +76,16 @@ if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
 }
 ```
 
-# What all can be Ajaxifed?
+# ⚡️ What all can be Ajaxifed?
 
-## Links
+## 🔗 Links
 ```html
 <a href="#"
    ajaxify="/ajax/remove.php"
    rel="async">Remove Item</a>
 ```
 
-## Forms
+## 📝 Forms
 ```html
 <form action="/submit.php"
       method="POST"
@@ -104,31 +95,30 @@ if (OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE) {
 </form>
 ```
 
-## Dialogs
+## 💬 Dialogs
 ```html
 <a href="#"
    ajaxify="/ajax/modal.php"
    rel="dialog">Open Modal</a>
 ```
 
-## Inspiration
+## 🌟 Inspiration
 
-BigPipe is inspired by the concept behind Facebook's BigPipe. For more details
+BigPipe is inspired by Facebook's BigPipe. For more details
 read their blog post: [Pipelining web pages for high performance][blog].
 
-## Motivation
+## 💡 Motivation
 
 There is a large number of PHP projects for which moving to modern frameworks like Laravel Livewire, React, Vue.js (and many more!) could be very challenging.
 
 The purpose of this library is to rapidly reduce the continuously repetitive code to work with the DOM and improve the communication barrier between PHP and JavaScript.
 
-## Credits
+## 🤝 Contributing
 
-- [Richard Dobroň][link-author]
+We welcome contributions! If you'd like to help improve this project, feel free to open an issue or submit a pull request.
 
-## License
+## 📜 License
 
 The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
 
-[link-author]: https://github.com/richardDobron
 [blog]: https://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919

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

package/src/Primer.js

@@ -111,7 +111,7 @@ export default function Primer() {
             }
           }
         })
-        .setHandler(function (response) {
+        .setHandler(function () {
           eventTarget.classList.remove("async-saving");
 
           activeControls.forEach(function (control) {

package/src/async/AsyncDOM.js

@@ -3,11 +3,7 @@ import DOM from "../core/DOM";
 export default class AsyncDOM {
   invoke(domOps, element) {
     for (let i = 0; i < domOps.length; ++i) {
-      let domOp = domOps[i],
-        type = domOp[0],
-        selector = domOp[1],
-        enableTarget = domOp[2],
-        content = domOp[3];
+      let [type, selector, enableTarget, content] = domOps[i];
 
       let node = enableTarget && element || null;
 

package/src/core/Dialog.js

@@ -8,7 +8,7 @@ let dialogId = 1;
 let zIndex;
 let originalBodyPad = null;
 
-Modal.prototype._handleKeydownEvent = function(event) {
+Modal.prototype._handleKeydownEvent = function (event) {
   if (event.which === 27 && this._options.keyboard) {
     const currentModal = stack[stack.length - 1];
     if (currentModal.el.isEqualNode(this.el)) {
@@ -42,43 +42,40 @@ export default class Dialog {
 
     dialogId++;
 
-    const renderDialog = () => {
-      const dialog = this._show({
-        el: document.getElementById(this.id),
-        animate: options.animate !== null && options.animate !== undefined ? options.animate : false,
-        keyboard: options.keyboard !== null && options.keyboard !== undefined ? options.keyboard : true,
-        backdrop: options.backdrop !== null && options.backdrop !== undefined ? options.backdrop : true,
-        transition: options.transition !== null && options.transition !== undefined ? options.transition : 0,
-        backdropTransition: options.backdropTransition !== null && options.backdropTransition !== undefined ? options.backdropTransition : 0,
-      }, options.controller, args);
-
-      stack.push(dialog);
-
-      return dialog;
-    };
-
-    if (options.timeout && typeof options.timeout === 'number') {
-      return new Promise(resolve => setTimeout(() => resolve(renderDialog()), options.timeout));
-    }
-
-    return renderDialog();
+    return this._maybeWithTimeout(options.timeout, () => this._show({
+      el: document.getElementById(this.id),
+      animate: this._getOption(options, 'animate', false),
+      keyboard: this._getOption(options, 'keyboard', true),
+      backdrop: this._getOption(options, 'backdrop', true),
+      transition: this._getOption(options, 'transition', 0),
+      backdropTransition: this._getOption(options, 'backdropTransition', 0)
+    }, options.controller, args));
   }
 
   showFromModel(model, args) {
-    const dialog = this._show({
+    return this._maybeWithTimeout(model.timeout, () => this._show({
       title: model.title || '',
       content: model.body,
       footer: model.footer || false,
-      animate: model.animate !== null && model.animate !== undefined ? model.animate : false,
-      keyboard: model.keyboard !== null && model.keyboard !== undefined ? model.keyboard : true,
-      backdrop: model.backdrop !== null && model.backdrop !== undefined ? model.backdrop : true,
-      transition: model.transition !== null && model.transition !== undefined ? model.transition : 0,
-      backdropTransition: model.backdropTransition !== null && model.backdropTransition !== undefined ? model.backdropTransition : 0,
-    }, model.controller, args);
+      animate: this._getOption(model, 'animate', false),
+      keyboard: this._getOption(model, 'keyboard', true),
+      backdrop: this._getOption(model, 'backdrop', true),
+      transition: this._getOption(model, 'transition', 0),
+      backdropTransition: this._getOption(model, 'backdropTransition', 0)
+    }, model.controller, args));
+  }
 
-    stack.push(dialog);
+  _maybeWithTimeout(timeout, callback) {
+    if (typeof timeout === 'number') {
+      return new Promise(resolve => setTimeout(() => resolve(callback()), timeout));
+    }
+    return callback();
+  }
 
-    return dialog;
+  _getOption(obj, key, defaultVal) {
+    return obj[key] !== null && obj[key] !== undefined
+      ? obj[key]
+      : defaultVal;
   }
 
   _show(options, controller, args) {
@@ -87,6 +84,7 @@ export default class Dialog {
     }
 
     const _modal = new Modal(options);
+    stack.push(_modal);
 
     if (controller) {
       if (typeof controller === 'string') {
@@ -124,7 +122,7 @@ export default class Dialog {
     let shown = false;
 
     backdrops.forEach((backdrop, index) => {
-      if (shown || index > 0 && index === backdrops.length - 1) {
+      if (shown || (index > 0 && index === backdrops.length - 1)) {
         backdrop.style.display = 'none';
       } else {
         backdrop.style.zIndex = zIndex - 1;
@@ -134,9 +132,10 @@ export default class Dialog {
     });
   }
 
-  _makeDialog(content, dialogClassName) {
+  _makeDialog(content, className = '') {
     this.id = `js_${dialogId.toString(16)}`;
-    return `<div id="${this.id}" class="modal fade ${dialogClassName || ''}" tabindex="-1" role="dialog">
+    return `
+      <div id="${this.id}" class="modal fade ${className}" tabindex="-1" role="dialog">
   ${content}
 </div>`;
   }

package/src/core/onAfterLoad.js

@@ -0,0 +1,13 @@
+import EventListener from 'fbjs/lib/EventListener';
+
+export default function onAfterLoad(callback) {
+  if (document.readyState === 'complete') {
+    setTimeout(callback, 0);
+  } else {
+    const event = EventListener.capture(window, 'load', () => {
+      event.remove();
+
+      callback();
+    });
+  }
+}

package/src/core/waitForLoad.js

@@ -0,0 +1,57 @@
+import onAfterLoad from "./onAfterLoad";
+
+let loadingCounter = 0;
+let originalCursor = '';
+
+export default function waitForLoad(elementOnClicked, event, callback = () => {
+}) {
+  const boundCallback = callback.bind(elementOnClicked, event);
+  const body = document.body;
+
+  if (document.readyState === 'complete') {
+    return boundCallback();
+  }
+
+  const type = (event || window.event).type;
+  loadingCounter++;
+
+  if (loadingCounter === 1) {
+    originalCursor = body.style.cursor;
+    body.style.cursor = 'progress';
+  }
+
+  switch (type) {
+    case 'load':
+    case 'focus':
+      onAfterLoad(boundCallback);
+      return;
+
+    case 'click':
+      elementOnClicked.style.cursor = 'progress';
+
+      onAfterLoad(() => {
+        loadingCounter--;
+
+        if (loadingCounter === 0) {
+          body.style.cursor = originalCursor;
+        }
+
+        elementOnClicked.style.cursor = '';
+
+        const result = boundCallback();
+        const href = elementOnClicked.getAttribute('href');
+
+        if (
+          elementOnClicked.tagName.toLowerCase() === 'a' &&
+          result !== false &&
+          href
+        ) {
+          window.location.href = href;
+        } else {
+          elementOnClicked.click();
+        }
+      });
+  }
+
+  return false;
+}