About Features Downloads Getting Started Documentation Events Support GitHub

Love VuFind®? Consider becoming a financial supporter. Your support helps build a better VuFind®!

Site Tools


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.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
development:architecture:lightbox [2016/03/29 15:29] – [Universal Controls] crhallbergdevelopment: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 would without Javascript. The general idea is that it emulates a seamless iframe with hooks and methods that allow more control. It uses ''data-'' attributes in the HTML for control.+The new Lightbox (version 3.0, aka the Delightbox) focuses on using the same paths as VuFind® would without Javascript. The general idea is that it emulates a seamless iframe with hooks and methods that allow more control. It uses ''data-'' attributes in the HTML for control. 
 + 
 +====== Controlling the Lightbox ======
  
 ===== Universal Controls ===== ===== Universal Controls =====
Line 21: Line 23:
 ===== Form Controls ===== ===== Form Controls =====
  
-**data-lightbox-onsubmit** - Specify a callback by function name, or include JS to be evaluated and run. Callbacks will be passed the event and all of the parsed form data (includes [[http://api.jquery.com/serialize/|json of form data]] and the button clicked). Returning true or false will pass that value to the form. True will submit the form without the lightbox. Returning false will prevent stop the default lightbox actions, in the case where you want to construct your own handler (see cart.js for examples). Returning anything else (though null is preferred) will allow the lightbox to submit the form and handle the output within itself.+**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://api.jquery.com/serialize/|json of form data]] and the button clicked). Returning true or false will pass that value to the form. True will submit the form without the lightbox. Returning false will prevent stop the default lightbox actions, in the case where you want to construct your own handler (see cart.js for examples). Returning anything else (though null is preferred) will allow the lightbox to submit the form and handle the output within itself
 + 
 +**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="always"** - Run the script when the lightbox displays normal content or a success message. 
 + 
 +====== 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/create account 
 +  * the response to the form doesn't include an error 
 +  
 +If the above is true and the form action is directly from UserLogin or catalogLogin, the page will refresh immediately. Else, the lightbox will automatically refresh after it is closed (allowing the current action to complete). 
 + 
 +===== 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 callback by function nameor include JS to be evaluated and run when the lightbox closes next.+===== 205 Status Code ===== 
 +If 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  | data-lightbox-onclose |
 +| Lightbox.addOpenAction   | $('#modal').on('shown.bs.modal', function() {}); |
 ---- struct data ---- ---- struct data ----
 +properties.Page Owner : 
 ---- ----
  
development/architecture/lightbox.1459265375.txt.gz · Last modified: 2016/03/29 15:29 by crhallberg