Différences

Ci-dessous, les différences entre deux révisions de la page.

--- txs:framadate_a17:javascript_et_jquery [2020/02/06 15:02] – ↷ Page déplacée de txs:framadate:javascript_et_jquery à txs:framadate_a17:javascript_et_jquery qduchemi
+++ txs:contrib:framadate_a17:javascript_et_jquery [2020/09/16 11:24] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
+==== 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é====
+<code>
+$(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é	*/
+    });</code>
+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(last_hour,add_button) avec
+    * last_hour est un sélecteur jquery sur le champ horaire à copier et à adapter (de n à n+1)
+    * add_button 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(last_hour,add_button) dans $('#copyhours').on('click', function () {...}) avec une boucle sur les jours pour avoir au moins autant d'horaire que le premier jour :
+<code>	    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);
+	    }</code>
+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)