add webpack config + export chill.js

This commit is contained in:
nobohan
2018-04-18 11:40:28 +02:00
parent ffd2ee6f69
commit 8456045088
3 changed files with 71 additions and 65 deletions

View File

@@ -93,7 +93,7 @@ var chill = function() {
*
* @param{string} form_id An identification string of the form
* @param{string} alert_message The alert message to display
* @param{boolean} check_unsaved_data If true display the alert message only when the form
* @param{boolean} check_unsaved_data If true display the alert message only when the form
* contains some modified fields otherwise always display the alert when leaving
* @return nothing
*/
@@ -123,12 +123,12 @@ var chill = function() {
});
}
/**
* Mark the choices "not specified" as check by default.
*
* This function apply to `custom field choices` when the `required`
/**
* Mark the choices "not specified" as check by default.
*
* This function apply to `custom field choices` when the `required`
* option is false and `expanded` is true (checkboxes or radio buttons).
*
*
* @param{string} choice_name the name of the input
*/
function checkNullValuesInChoices(choice_name) {
@@ -184,21 +184,21 @@ var chill = function() {
* child) of a given form : each parent option has a category, the
* child select only display options that have the same category of the
* parent optionn
*
* The parent must have the class "chill-category-link-parent".
*
*
* The parent must have the class "chill-category-link-parent".
*
* The children must have the class "chill-category-link-child". Each option
* of the parent must have the attribute `data-link-category`, with the value of
* the connected option in parent.
*
*
* Example :
*
*
* ```html
* <select name="country" class="chill-category-link-parent">
* <option value="BE">Belgium</option>
* <option value="FR">France</option>
* </select>
*
*
* <select name="cities">class="chill-category-link-children">
* <option value="paris" data-link-category="FR">Paris</option>
* <option value="toulouse" data-link-category="FR">Toulouse</option>
@@ -207,7 +207,7 @@ var chill = function() {
* <option value="mons" data-link-category="BE">Mons</option>
* </select>
* ```
*
*
* TODO ECRIRE LA DOC METTRE LES TESTS DANS git :
* tester que init est ok :
- quand vide
@@ -224,7 +224,7 @@ var chill = function() {
form.old_category = null;
form.link_parent = $(form).find('.chill-category-link-parent');
form.link_child = $(form).find('.chill-category-link-child');
// check if the parent allow multiple or single results
parent_multiple = $(form).find('.chill-category-link-parent').get(0).multiple;
// if we use select2, parent_multiple will be `undefined`
@@ -233,10 +233,10 @@ var chill = function() {
// we suppose that multiple is false (old behaviour)
parent_multiple = false
}
$(form.link_parent).addClass('select2');
$(form.link_parant).select2({allowClear: true}); // it is weird: when I fix the typo here, the whole stuff does not work anymore...
if (parent_multiple == false) {
form.old_category = null;
@@ -279,9 +279,9 @@ var chill = function() {
}
});
} else {
var i=0,
var i=0,
selected_items = $(form.link_parent).find(':selected');
form.old_categories = [];
for (i=0;i < selected_items.length; i++) {
form.old_categories.push(selected_items[i].value);
@@ -314,13 +314,13 @@ var chill = function() {
});
form.link_parent.change(function() {
var new_categories = [],
var new_categories = [],
selected_items = $(form.link_parent).find(':selected'),
visible;
for (i=0;i < selected_items.length; i++) {
new_categories.push(selected_items[i].value);
}
if(new_categories != form.old_categories) {
$(form.link_child).find('option')
.each(function(i,e) {
@@ -352,16 +352,16 @@ var chill = function() {
form.old_categories = new_categories;
}
});
}
}
});
}
function _displayHideTargetWithCheckbox(checkbox) {
var target = checkbox.dataset.displayTarget,
hideableElements;
hideableElements = document.querySelectorAll('[data-display-show-hide="' + target + '"]');
if (checkbox.checked) {
for (let i=0; i < hideableElements.length; i = i+1) {
hideableElements[i].style.display = "unset";
@@ -371,36 +371,36 @@ var chill = function() {
hideableElements[i].style.display = "none";
}
}
}
/**
* create an interaction between a checkbox and element to show if the
* create an interaction between a checkbox and element to show if the
* checkbox is checked, or hide if the checkbox is not checked.
*
* The checkbox must have the data `data-display-target` with an id,
*
* The checkbox must have the data `data-display-target` with an id,
* and the parts to show/hide must have the data `data-display-show-hide`
* with the same value.
*
* Example :
*
*
* Example :
*
* ```
* <input data-display-target="export_abc" value="1" type="checkbox">
*
*
* <div data-display-show-hide="export_abc">
* <!-- your content here will be hidden / shown according to checked state -->
* </div>
* ```
*
*
* Hint: for forms in symfony, you could use the `id` of the form element,
* accessible through `{{ form.vars.id }}`. This id should be unique.
*
*
*
*
* @returns {undefined}
*/
function listenerDisplayCheckbox() {
var elements = document.querySelectorAll("[data-display-target]");
for (let i=0; i < elements.length; i = i+1) {
elements[i].addEventListener("change", function(e) {
_displayHideTargetWithCheckbox(e.target);
@@ -421,3 +421,5 @@ var chill = function() {
listenerDisplayCheckbox: listenerDisplayCheckbox,
};
} ();
export { chill };