mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-12 13:24:25 +00:00
426 lines
17 KiB
JavaScript
426 lines
17 KiB
JavaScript
/* jslint vars: true */
|
|
/*jslint indent: 4 */
|
|
/* global moment, $, window */
|
|
'use strict';
|
|
|
|
var chill = function() {
|
|
|
|
/* intialiase the pikaday module */
|
|
function initPikaday(locale) {
|
|
var i18n_trad = {
|
|
fr: {
|
|
previousMonth : 'Mois précédent',
|
|
nextMonth : 'Mois suivant',
|
|
months : ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
|
|
weekdays : ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
|
|
weekdaysShort : ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam']
|
|
},
|
|
nl: {
|
|
previousMonth : 'Vorig maand',
|
|
nextMonth : 'Volgende maand',
|
|
months : ['Januari','Februari','Maart','April','Mei','Juni','Juli','Augustus','September','Oktober','November','December'],
|
|
weekdays : ['Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag'],
|
|
weekdaysShort : ['Zon','Ma','Di','Wo','Do','Vri','Zat']
|
|
}
|
|
};
|
|
|
|
var pikaday_options = {
|
|
format: 'D-M-YYYY',
|
|
yearRange: [parseInt(moment().format('YYYY')) - 100, parseInt(moment().format('YYYY'))],
|
|
};
|
|
|
|
if(locale in i18n_trad) {
|
|
pikaday_options.i18n = i18n_trad[locale];
|
|
}
|
|
|
|
$('.datepicker').pikaday(
|
|
pikaday_options
|
|
);
|
|
}
|
|
|
|
/* emulate the position:sticky */
|
|
function emulateSticky() {
|
|
var need_emulation = false;
|
|
|
|
$('.sticky-form-buttons').each(function(i,stick_element) {
|
|
if($(stick_element).css('position') !== 'sticky') {
|
|
need_emulation = true;
|
|
stick_element.init_offset_top = $(stick_element).offset().top;
|
|
}
|
|
});
|
|
|
|
function emulate() {
|
|
$('.sticky-form-buttons').each(function(i,stick_element) {
|
|
if (($(window).scrollTop() + $(window).height()) < stick_element.init_offset_top) {
|
|
//sticky at bottom
|
|
$(stick_element).css('position','fixed');
|
|
$(stick_element).css('bottom','0');
|
|
$(stick_element).css('top','');
|
|
$(stick_element).css('width',$(stick_element).parent().outerWidth());
|
|
} else if (stick_element.init_offset_top < $(window).scrollTop()) {
|
|
//sticky at top
|
|
$(stick_element).css('position','fixed');
|
|
$(stick_element).css('top','0');
|
|
$(stick_element).css('bottom','');
|
|
$(stick_element).css('width',$(stick_element).parent().outerWidth());
|
|
} else {
|
|
//no sticky
|
|
$(stick_element).css('position','initial');
|
|
$(stick_element).css('bottom','');
|
|
$(stick_element).css('width','');
|
|
$(stick_element).css('top','');
|
|
}
|
|
});
|
|
}
|
|
|
|
if(need_emulation) {
|
|
$(window).scroll(function() {
|
|
emulate();
|
|
});
|
|
|
|
emulate();
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Display an alert message when the user wants to leave a page containing a given form
|
|
* in a given state.
|
|
*
|
|
* The action of displaying the form be parametrised as :
|
|
* - always display the alert message when leaving
|
|
* - only display the alert message when the form contains some modified fields.
|
|
*
|
|
* @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
|
|
* contains some modified fields otherwise always display the alert when leaving
|
|
* @return nothing
|
|
*/
|
|
function _generalDisplayAlertWhenLeavingForm(form_id, alert_message, check_unsaved_data) {
|
|
var form_submitted = false;
|
|
var unsaved_data = false;
|
|
|
|
$(form_id)
|
|
.submit(function() {
|
|
form_submitted = true;
|
|
})
|
|
.on('reset', function() {
|
|
unsaved_data = false;
|
|
})
|
|
;
|
|
|
|
$.each($(form_id).find(':input'), function(i,e) {
|
|
$(e).change(function() {
|
|
unsaved_data = true;
|
|
});
|
|
});
|
|
|
|
$(window).bind('beforeunload', function(){
|
|
if((!form_submitted) && (unsaved_data || !check_unsaved_data)) {
|
|
return alert_message;
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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) {
|
|
var choices;
|
|
choices = $("input[name='"+choice_name+"']:checked");
|
|
if (choices.size() === 0) {
|
|
$.each($("input[name='"+choice_name+"']"), function (i, e) {
|
|
if (e.value === "") {
|
|
e.checked = true;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Display an alert message when the user wants to leave a page containing a given
|
|
* modified form.
|
|
*
|
|
* @param{string} form_id An identification string of the form
|
|
* @param{string} alert_message The alert message to display
|
|
* @return nothing
|
|
*/
|
|
function displayAlertWhenLeavingModifiedForm(form_id, alert_message) {
|
|
_generalDisplayAlertWhenLeavingForm(form_id, alert_message, true);
|
|
}
|
|
|
|
/**
|
|
* Display an alert message when the user wants to leave a page containing a given
|
|
* form that was not submitted.
|
|
*
|
|
* @param{string} form_id An identification string of the form
|
|
* @param{string} alert_message The alert message to display
|
|
* @return nothing
|
|
*/
|
|
function displayAlertWhenLeavingUnsubmittedForm(form_id, alert_message) {
|
|
_generalDisplayAlertWhenLeavingForm(form_id, alert_message, false);
|
|
}
|
|
|
|
/* Enable the following behavior : when the user change the value
|
|
of an other field, its checkbox is checked.
|
|
*/
|
|
function checkOtherValueOnChange() {
|
|
$('.input-text-other-value').each(function() {
|
|
$(this).change(function() {
|
|
var checkbox = $(this).parent().find('input[type=checkbox][value=_other]')[0];
|
|
$(checkbox).prop('checked', ($(this).val() !== ''));
|
|
});
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Create an interraction between two select element (the parent and the
|
|
* 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 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>
|
|
* <option value="bruxelles" data-link-category="BE">Bruxelles</option>
|
|
* <option value="liege" data-link-category="BE">Liège</option>
|
|
* <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
|
|
- quand choix
|
|
* tester que quand sélection
|
|
- quand vide
|
|
- quand choix
|
|
*/
|
|
function categoryLinkParentChildSelect() {
|
|
var forms_to_link = $('form:has(select.chill-category-link-parent)');
|
|
|
|
forms_to_link.each(function(i,form_selector) {
|
|
var form = $(form_selector), parent_multiple;
|
|
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`
|
|
if (typeof parent_multiple == 'undefined') {
|
|
// currently, I do not know how to check if multiple using select2.
|
|
// 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;
|
|
if($(form.link_parent).select2('data') !== null) {
|
|
form.old_category = ($(form.link_parent).select2('data').element[0].dataset.linkCategory);
|
|
}
|
|
|
|
$(form.link_child).find('option')
|
|
.each(function(i,e) {
|
|
if(
|
|
((!$(e).data('link-category')) || $(e).data('link-category') == form.old_category) &&
|
|
((!$(e).data('link-categories')) || form.old_category in $(e).data('link-categories').split(','))
|
|
) {
|
|
$(e).show();
|
|
// here, we should handle the optgroup
|
|
} else {
|
|
$(e).hide();
|
|
// here, we should handle the optgroup
|
|
}
|
|
});
|
|
|
|
form.link_parent.change(function() {
|
|
var new_category = ($(form.link_parent).select2('data').element[0].dataset.linkCategory);
|
|
if(new_category != form.old_category) {
|
|
$(form.link_child).find('option')
|
|
.each(function(i,e) {
|
|
if(
|
|
((!$(e).data('link-category')) || $(e).data('link-category') == new_category) &&
|
|
((!$(e).data('link-categories')) || new_category in $(e).data('link-categories').split(','))
|
|
) {
|
|
$(e).show();
|
|
// here, we should handle the optgroup
|
|
} else {
|
|
$(e).hide();
|
|
// here, we should handle the opgroup
|
|
}
|
|
});
|
|
$(form.link_child).find('option')[0].selected = true;
|
|
form.old_category = new_category;
|
|
}
|
|
});
|
|
} else {
|
|
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);
|
|
}
|
|
|
|
$(form.link_child).find('option')
|
|
.each(function(i,e) {
|
|
var visible;
|
|
if(form.old_categories.indexOf(e.dataset.linkCategory) != -1) {
|
|
$(e).show();
|
|
if (e.parentNode instanceof HTMLOptGroupElement) {
|
|
$(e.parentNode).show();
|
|
}
|
|
} else {
|
|
$(e).hide();
|
|
if (e.parentNode instanceof HTMLOptGroupElement) {
|
|
// we check if the other options are visible.
|
|
visible = false
|
|
for (var l=0; l < e.parentNode.children.length; l++) {
|
|
if (window.getComputedStyle(e.parentNode.children[l]).getPropertyValue('display') != 'none') {
|
|
visible = true;
|
|
}
|
|
}
|
|
// if any options are visible, we hide the optgroup
|
|
if (visible == false) {
|
|
$(e.parentNode).hide();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
form.link_parent.change(function() {
|
|
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) {
|
|
if(new_categories.indexOf(e.dataset.linkCategory) != -1) {
|
|
$(e).show();
|
|
// if parent is an opgroup, we show it
|
|
if (e.parentNode instanceof HTMLOptGroupElement) {
|
|
$(e.parentNode).show();
|
|
}
|
|
} else {
|
|
$(e).hide();
|
|
// we check if the parent is an optgroup
|
|
if (e.parentNode instanceof HTMLOptGroupElement) {
|
|
// we check if other options are visible
|
|
visible = false
|
|
for (var l=0; l < e.parentNode.children.length; l++) {
|
|
if (window.getComputedStyle(e.parentNode.children[l]).getPropertyValue('display') != 'none') {
|
|
visible = true;
|
|
}
|
|
}
|
|
// if any options are visible, we hide the optgroup
|
|
if (visible == false) {
|
|
$(e.parentNode).hide();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
//$(form.link_child).find('option')[0].selected = true;
|
|
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";
|
|
}
|
|
} else {
|
|
for (let i=0; i < hideableElements.length; i = i+1) {
|
|
hideableElements[i].style.display = "none";
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* 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,
|
|
* and the parts to show/hide must have the data `data-display-show-hide`
|
|
* with the same value.
|
|
*
|
|
* 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);
|
|
});
|
|
// initial display-hide
|
|
_displayHideTargetWithCheckbox(elements[i]);
|
|
}
|
|
}
|
|
|
|
return {
|
|
initPikaday: initPikaday,
|
|
emulateSticky: emulateSticky,
|
|
checkOtherValueOnChange: checkOtherValueOnChange,
|
|
displayAlertWhenLeavingModifiedForm: displayAlertWhenLeavingModifiedForm,
|
|
displayAlertWhenLeavingUnsubmittedForm: displayAlertWhenLeavingUnsubmittedForm,
|
|
checkNullValuesInChoices: checkNullValuesInChoices,
|
|
categoryLinkParentChildSelect: categoryLinkParentChildSelect,
|
|
listenerDisplayCheckbox: listenerDisplayCheckbox,
|
|
};
|
|
} ();
|
|
|
|
export { chill };
|