mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-07 18:44:08 +00:00
improve doc for show/hide on collection
This commit is contained in:
parent
58f2a9d5e1
commit
8fe774de4f
@ -45,7 +45,7 @@ In this module, the module will listen to all input given in the ``container_fro
|
||||
|
||||
new ShowHide({
|
||||
froms: [from], // the value of from should be an iterable
|
||||
container: [ressources_comment], // the value of container should be an iterable
|
||||
container: [target], // the value of container should be an iterable
|
||||
test: function(froms, event) {
|
||||
// iterate over each element of froms
|
||||
for (let f of froms.values()) {
|
||||
@ -88,7 +88,77 @@ For achieving this, use the `event_name` option.
|
||||
});
|
||||
|
||||
Examples
|
||||
========
|
||||
--------
|
||||
|
||||
.. literalinclude:: js-functions/show_hide.js
|
||||
:language: javascript
|
||||
|
||||
|
||||
Using Show/Hide in collections forms
|
||||
====================================
|
||||
|
||||
Using show / hide in collection forms implies:
|
||||
|
||||
* to launch show/hide manually for each entry when the page is loaded ;
|
||||
* to catch when an entry is added to the form ;
|
||||
|
||||
As the show/hide is started manually and not on page load, we add the option ``load_event: null`` to the options:
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
new ShowHide({
|
||||
load_event: null,
|
||||
froms: [ from ],
|
||||
container: [ container ],
|
||||
test: my_test_function
|
||||
});
|
||||
|
||||
.. note::
|
||||
|
||||
When using ``load_event: null`` inside the options, the value of event will be ``null`` as second argument for the test function.
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
my_test_function(froms, event) {
|
||||
// event will be null on first launch
|
||||
}
|
||||
|
||||
Example usage: here, we would like to catch for element inside a CV form, where the user may add multiple formation entries.
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
import { ShowHide } from 'ShowHide/show_hide.js';
|
||||
|
||||
// we factorize the creation of show hide element in this function.
|
||||
var make_show_hide = function(entry) {
|
||||
let
|
||||
obtained = entry.querySelector('[data-diploma-obtained]'),
|
||||
reconnue = entry.querySelector('[data-diploma-reconnue]')
|
||||
;
|
||||
new ShowHide({
|
||||
load_event: null,
|
||||
froms: [ obtained ],
|
||||
container: [ reconnue ],
|
||||
test: my_test_function
|
||||
});
|
||||
};
|
||||
|
||||
// this code is fired when an entry is added on the page
|
||||
window.addEventListener('collection-add-entry', function(e) {
|
||||
// if the form contains multiple collection, we filter them here:
|
||||
if (e.detail.collection.dataset.collectionName === 'formations') {
|
||||
make_show_hide(e.detail.entry);
|
||||
}
|
||||
});
|
||||
|
||||
// on page load, we create a show/hide
|
||||
window.addEventListener('load', function(_e) {
|
||||
let
|
||||
formations = document.querySelectorAll('[data-formation-entry]')
|
||||
;
|
||||
|
||||
for (let f of formations.values()) {
|
||||
make_show_hide(f);
|
||||
}
|
||||
});
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user