Warning: This page has not been updated in over over a year and may be outdated or deprecated.
development:architecture:lightbox
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
development:architecture:lightbox [2016/03/29 16:01] – crhallberg | development:architecture:lightbox [2023/06/07 12:19] (current) – demiankatz | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== Lightbox ====== | ====== Lightbox ====== | ||
- | The new Lightbox (version 3.0, aka the Delightbox) focuses on using the same paths as VuFind | + | The new Lightbox (version 3.0, aka the Delightbox) focuses on using the same paths as VuFind® |
====== Controlling the Lightbox ====== | ====== Controlling the Lightbox ====== | ||
Line 23: | Line 23: | ||
===== Form Controls ===== | ===== Form Controls ===== | ||
- | **data-lightbox-onsubmit** - Specify a callback | + | **data-lightbox-onsubmit** - Specify a callback to be evaluated and run. Callbacks will be passed the event and all of the parsed form data (includes [[http:// |
- | **data-lightbox-onclose** - Specify a callback | + | **data-lightbox-onclose** - Specify a callback to be evaluated and run when the lightbox closes next. |
+ | :!: Prior to VuFind® 4.0, a callback could be either a function name in the global scope, or a block of Javascript code. VuFind® 4.0 and later, the callback MUST be either a function name in the global scope (e.g. myFunction) or a function name within the global VuFind® object (e.g. VuFind®.myFunction). | ||
- | ===== Built-in Stops ===== | + | ===== Script Controls ===== |
+ | |||
+ | By default lightbox only runs inline scripts, or no scripts at all when it finds a success message and displays only the message (see below for more information). | ||
+ | |||
+ | Starting with VuFind® 9.1 it's possible to use the following attributes with script tags to indicate that they should be run in lightbox: | ||
+ | |||
+ | **data-lightbox-run** - Run the script when the lightbox displays normal content. | ||
+ | |||
+ | **data-lightbox-run=" | ||
+ | |||
+ | ====== Built-in Stops ====== | ||
The Lightbox is programmed to close under the following conditions: | The Lightbox is programmed to close under the following conditions: | ||
- | ==== Non-forced login ==== | + | ===== Non-forced login ===== |
- | VuFind | + | VuFind® |
* the request came from a form | * the request came from a form | ||
* the form's action matches login/ | * the form's action matches login/ | ||
Line 40: | Line 51: | ||
If the above is true and the form action is directly from UserLogin or catalogLogin, | If the above is true and the form action is directly from UserLogin or catalogLogin, | ||
- | ==== A success message is reached ==== | + | ===== A success message is reached |
When an .alert-success message is found, it is isolated in the lightbox, representing the end of a path. The lightbox can only be closed or escaped after this (by default). | When an .alert-success message is found, it is isolated in the lightbox, representing the end of a path. The lightbox can only be closed or escaped after this (by default). | ||
- | ==== 205 Status Code ==== | + | ===== 204 Status Code ===== |
+ | If a form results in a 204 status code (No Content), it will immediately close the lightbox. | ||
+ | |||
+ | ===== 205 Status Code ===== | ||
If a form results in a 205 status code (Reset Content), it will immediately refresh the page. | If a form results in a 205 status code (Reset Content), it will immediately refresh the page. | ||
+ | ====== Transitioning ====== | ||
+ | |||
+ | ^ Old Lightbox ^ New Lightbox ^ | ||
+ | | Lightbox.addFormCallback | data-lightbox-onsubmit | | ||
+ | | Lightbox.addFormHandler | ||
+ | | Lightbox.addCloseAction | ||
+ | | Lightbox.addOpenAction | ||
---- struct data ---- | ---- struct data ---- | ||
+ | properties.Page Owner : | ||
---- | ---- | ||
development/architecture/lightbox.1459267301.txt.gz · Last modified: 2016/03/29 16:01 by crhallberg