JS et JQuery
Vous trouverez tous les fichiers Javascript dans le même dossier sous framadate/js/app
JQuery permet, à l’aide de sélecteurs, de considérer les balises HTML comme des objets, pour pouvoir modifier leurs attributs, générer des balises, affecter une fonction à un événement ou bien faire un traitement particulier sur une liste de balise HTML partageant un trait commun (le type de balise, une classe,…)
exemple de sélecteur : $(“.toto”) désigne tous les éléments ayant la classe “toto”
retrouver plus d’informations sur JQuery sur les sites officiels et les tutoriels
exemple de code modifié
$(document).ready(function () { ... function addHour(last_hour,add_button){ // last_hour : Jquery selector on the last hour of the day selected // add_button : Jquery selector on the linked button //var last_hour = $(this).children('div').children('div:last').prev(); // for and id var di_hj = last_hour.children('.hours').attr('id').split('-'); var di = parseInt(di_hj[0].replace('d', '')); var hj = parseInt(di_hj[1].replace('h', '')); // label, title and placeholder var last_hour_label = last_hour.children('.hours').attr('placeholder'); var hour_text = last_hour_label.substring(0, last_hour_label.indexOf(' ')); // RegEx for multiple replace var re_label = new RegExp(last_hour_label, 'g'); var re_id = new RegExp('"d' + di + '-h' + hj + '"', 'g'); // HTML code of the new hour var new_hour_html = '<div class="col-sm-2">' + last_hour.html().replace(re_label, hour_text + ' ' + (hj + 2)) .replace(re_id, '"d' + di + '-h' + (hj + 1) + '"') .replace(/value="(.*?)"/g, 'value=""') + '</div>'; // After 11 + button is disable if (hj < 99) { last_hour.after(new_hour_html); $('#d' + di + '-h' + (hj + 1)).focus(); add_button.prev('.remove-an-hour').removeClass('disabled'); if (hj == 98) { add_button.addClass('disabled'); } } } $('#copyhours').on('click', function () { var first_day_hours = $selected_days.find('fieldset:eq(0) .hours').map(function () { return $(this).val(); }); $selected_days.find('fieldset:gt(0)').each(function () { while($(this).find('.hours').length<first_day_hours.length){ var last_hour = $(this).children('div').children('div:last').prev(); var add_button = $(this).find('.add-an-hour'); addHour(last_hour,add_button); } for (var i = 0; i < first_day_hours.length; i++) { $(this).find('.hours:eq(' + i + ')').val(first_day_hours[i]); // fill hours } }); }); // Buttons "Add an hour" $(document).on('click', '.add-an-hour', function () { var last_hour = $(this).parent('div').parent('div').prev(); addHour(last_hour,this); /* ancien code commenté */ });
Noter bien que les fonctions sont définies lorsque le document est prêt : cela assure l’existence des balises HTML, donc que les sélecteurs JQuery vont bien marcher.
dans le cadre de l’issue 203,
- j’ai extrait le code de $(document).on(‘click’, '.add-an-hour’, function () {…}) dans une autre fonction addHour(lasthour,addbutton) avec
- lasthour est un sélecteur jquery sur le champ horaire à copier et à adapter (de n à n+1) * addbutton est un sélecteur jquery sur le bouton d’ajout d’horaire du jour (afin de le désactiver si la limite est atteinte)
- j’ai ajouté l’appel de cette fonction dans $(document).on(‘click’, '.add-an-hour’, function () {…}) pour qu’il conserve son fonctionnement
- Enfin j’ai ajouté l’appel fonction addHour(lasthour,addbutton) dans $('#copyhours’).on(‘click’, function () {…}) avec une boucle sur les jours pour avoir au moins autant d’horaire que le premier jour :
while($(this).find('.hours').length<first_day_hours.length){ var last_hour = $(this).children('div').children('div:last').prev(); var add_button = $(this).find('.add-an-hour'); addHour(last_hour,add_button); }
les codes dans les sélecteurs “:eq(0)” (comprendre equal 0) et “:gt(0)” (comprendre greater than 0) désignent respectivement le 1er et les non-premiers (les autres) éléments du sélecteur précédent (ici une balise fieldset)