js/organizemode.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

function displayOrganizeModeMessage() {
    if(el('#message-box').classList.contains('visible')) {
        hideMessage();
    } else {
        showMessage("Use ⟱ to move a redirect to the bottom, ⟰ to move to the top, and use the checkboxes to select multiple redirects and move them together.", true)
    }
}

function organizeModeToggle(ev) {
    ev.preventDefault();
    let organizeModes = ['.groupings', '.arrows']
    for (let mode of organizeModes) {
        let organizeModeElms = document.querySelectorAll(mode);
        for (i = 0; i < organizeModeElms.length; ++i) {
            let elm = organizeModeElms[i];
            let isHidden = '';
            if(mode === '.arrows') {
                // targeting parent span for arrows
                elm = elm.parentElement;
            }
            isHidden = elm.classList.contains('hidden');
            isHidden ? elm.classList.remove('hidden') : elm.classList.add('hidden');
        }
    }

    // let buttonText = el('#organize-mode').textContent;
    // buttonText.includes('Show') ? el('#organize-mode').textContent = 'Hide Organize' : el('#organize-mode').textContent = 'Show Organize';

    let buttonClasses = el('#organize-mode').classList;
    console.log('NSC: organizeModeToggle -> buttonClasses', buttonClasses);
    !buttonClasses.contains('active') ? el('#organize-mode').classList.add('active') : el('#organize-mode').classList.remove('active');

    displayOrganizeModeMessage();
}


function setupOrganizeModeToggleEventListener() {
    el('#organize-mode').addEventListener('click', organizeModeToggle);
}

setupOrganizeModeToggleEventListener();