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.
Next revision | Previous revision | ||
lightbox [2016/03/29 13:51] – created 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 ====== | ||
===== Universal Controls ===== | ===== Universal Controls ===== | ||
Line 10: | Line 12: | ||
**data-lightbox-ignore** - all links that appear inside of the lightbox will be bound to the lightbox (like an iframe). This data attribute will cause clicking this link to escape the lightbox and navigate to a new page. | **data-lightbox-ignore** - all links that appear inside of the lightbox will be bound to the lightbox (like an iframe). This data attribute will cause clicking this link to escape the lightbox and navigate to a new page. | ||
+ | |||
+ | **data-lightbox-title** - override the default title of a page (the h2 at the top) with this string. Also works on submit buttons. | ||
===== Link Controls ===== | ===== Link Controls ===== | ||
Line 19: | 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 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). | ||
+ | |||
+ | ===== 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: | ||
+ | |||
+ | ===== Non-forced login ===== | ||
+ | VuFind® refreshes the page after a login to update information and present new fields. The lightbox determines if a login has occureed using the following criteria: | ||
+ | * the request came from a form | ||
+ | * the form's action matches login/ | ||
+ | * the response to the form doesn' | ||
+ | |||
+ | If the above is true and the form action is directly from UserLogin or catalogLogin, | ||
+ | |||
+ | ===== 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). | ||
+ | |||
+ | ===== 204 Status Code ===== | ||
+ | If a form results in a 204 status code (No Content), it will immediately close the lightbox. | ||
- | **data-lightbox-onclose** - Specify | + | ===== 205 Status Code ===== |
+ | If a form results in a 205 status code (Reset Content), it will immediately refresh | ||
+ | ====== 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.txt · Last modified: 2023/06/07 12:19 by demiankatz