1jQuery( document ).ready( function () { 2 3/* Hovering a language in the shortlist highlights it in the long list */ 4jQuery( "#langshortlist" ).children().each((i, elt) => { 5 elt.addEventListener('mouseover', event => { 6 let lang = elt.textContent; 7 jQuery( elt ).addClass('active'); 8 jQuery( `#langlonglist li[val=${lang}]` ).addClass('active') 9 .parent().closest('li').addClass('active'); 10 }); 11 elt.addEventListener('mouseout', event => { 12 let lang = elt.textContent; 13 jQuery( elt ).removeClass('active'); 14 jQuery( `#langlonglist li[val=${lang}]` ).removeClass('active') 15 .parent().closest('li').removeClass('active'); 16 }); 17}); 18 19/* Checking the shortlist boxes updates the text form and the longlist */ 20jQuery("#langshortlist input").each((i, elt) => { 21 elt.addEventListener('change', event => { 22 let checkboxes = jQuery( "#langshortlist input" ).toArray(); 23 let text = checkboxes.filter(e => e.checked) 24 .map(e => e.labels[0].textContent) 25 .join(); 26 jQuery( "input[name='langdelete_w']" ) 27 .val(text) 28 .addClass('ani-ld-text-added'); 29 }); 30 elt.addEventListener('change', event => { 31 let lang = event.target.labels[0].textContent; 32 let $elt = jQuery( event.target ); 33 if ($elt.prop("checked")) { 34 jQuery( `#langlonglist li[val=${lang}]` ).addClass('enabled'); 35 $elt.parents("li").first().addClass('enabled'); 36 } else { 37 jQuery( `#langlonglist li[val=${lang}]` ).removeClass('enabled'); 38 $elt.parents("li").first().removeClass('enabled'); 39 } 40 }); 41}); 42// Remove animation class when done 43jQuery( "input[name='langdelete_w']" ).on("animationend", event => { 44 if (event.originalEvent.animationName == 'ld-text-added') { 45 jQuery( event.target ).removeClass('ani-ld-text-added'); 46 } 47}); 48 49/* Changing the text in the form checks the right checkboxes 50 * (and animates them) */ 51jQuery( "input[name='langdelete_w']" ).on('input', event => { 52 let t = jQuery( event.target ).val(); 53 let langs = jQuery( "#langshortlist input[type='checkbox']" ) 54 .map((i, elt) => elt.labels[0].textContent ) 55 .toArray(); 56 let to_check = t.split(','); 57 58 for (let lang of langs) { 59 let $e = jQuery( `input#shortlang-${lang}` ); 60 let will_check = to_check.indexOf(lang) != -1; 61 if ($e.prop("checked") ^ will_check) { 62 $e 63 .prop("checked", will_check) 64 .addClass('ani-ld-text-added'); 65 } 66 } 67}); 68// Remove animation class when done 69jQuery( "#langshortlist input[type='checkbox']" ).on("animationend", event => { 70 if (event.originalEvent.animationName == 'ld-text-added') { 71 jQuery( event.target ).removeClass('ani-ld-text-added'); 72 } 73}); 74 75/* */ 76}); 77