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