meetletacbfree/javascript/settings_toggles.js

/**
 * Replace Moodle checkboxes with MeetLet pill switches (check / cross).
 */
(function () {
    'use strict';

    function enhanceInput(input) {
        if (!input || input.getAttribute('data-meetlet-switch') === '1') {
            return;
        }
        if (input.type !== 'checkbox') {
            return;
        }
        input.setAttribute('data-meetlet-switch', '1');
        input.classList.add('meetlet-switch__input');

        var compact = input.classList.contains('meetlet-access-check');
        var switchClass = compact ? 'meetlet-switch meetlet-switch--compact' : 'meetlet-switch';

        var track = document.createElement('span');
        track.className = 'meetlet-switch__track';
        track.setAttribute('aria-hidden', 'true');
        var thumb = document.createElement('span');
        thumb.className = 'meetlet-switch__thumb';
        track.appendChild(thumb);

        var parentLabel = input.closest('label');
        if (parentLabel && parentLabel.contains(input)) {
            parentLabel.classList.add('meetlet-switch');
            if (compact) {
                parentLabel.classList.add('meetlet-switch--compact');
            }
            if (input.nextSibling) {
                parentLabel.insertBefore(track, input.nextSibling);
            } else {
                parentLabel.appendChild(track);
            }
            return;
        }

        var wrap = document.createElement('label');
        wrap.className = switchClass;
        if (input.id) {
            wrap.setAttribute('for', input.id);
        }
        input.parentNode.insertBefore(wrap, input);
        wrap.appendChild(input);
        wrap.appendChild(track);
    }

    function run() {
        var adminRoot = document.querySelector('#adminsettings');
        if (adminRoot) {
            adminRoot.querySelectorAll('.form-setting input[type="checkbox"]').forEach(enhanceInput);
        }
        document.querySelectorAll('.meetlet-access-check').forEach(enhanceInput);
        var form = document.getElementById('mform1') || document.querySelector('form.mform');
        if (form) {
            form.querySelectorAll(
                ' input[name="autooffline"], input[name="showzip"], input[name="showmp4"],' +
                ' input[name="showmakeoffline"], input[name="showrecordingstab"], input[name="showcontenttab"],' +
                ' input[name="featureaccess_override"], input[name="default_waitforhost"],' +
                ' input[name="waitforhost"], input[name="https"]'
            ).forEach(enhanceInput);
        }
        bindHourPicker();
    }

    function selectedHours(wrap) {
        var hours = [];
        wrap.querySelectorAll('.meetlet-hourchip.is-on').forEach(function (btn) {
            hours.push(parseInt(btn.getAttribute('data-hour'), 10));
        });
        hours.sort(function (a, b) { return a - b; });
        return hours;
    }

    function applyHours(wrap, list) {
        var set = {};
        (list || []).forEach(function (h) { set[String(h)] = true; });
        wrap.querySelectorAll('.meetlet-hourchip').forEach(function (btn) {
            var on = !!set[btn.getAttribute('data-hour')];
            btn.classList.toggle('is-on', on);
            btn.setAttribute('aria-pressed', on ? 'true' : 'false');
        });
        var input = wrap.querySelector('[data-meetlet-hours-input]');
        if (input) {
            input.value = selectedHours(wrap).join(',');
        }
    }

    function syncHoursEnabled() {
        var sel = document.querySelector('select[name="s_meetletacbfree_agent_dispatch"]')
            || document.getElementById('id_s_meetletacbfree_agent_dispatch');
        var wrap = document.querySelector('[data-meetlet-hours-wrap]');
        if (!wrap) {
            return;
        }
        var item = wrap.closest('.form-item');
        var windowMode = !sel || sel.value === 'window';
        wrap.classList.toggle('is-dimmed', !windowMode);
        if (item) {
            item.classList.toggle('is-dimmed', !windowMode);
        }
    }

    function bindHourPicker() {
        var wrap = document.querySelector('[data-meetlet-hours-wrap]');
        if (!wrap || wrap.getAttribute('data-bound') === '1') {
            return;
        }
        wrap.setAttribute('data-bound', '1');
        wrap.addEventListener('click', function (e) {
            var chip = e.target.closest('.meetlet-hourchip');
            if (chip && wrap.contains(chip)) {
                e.preventDefault();
                chip.classList.toggle('is-on');
                chip.setAttribute('aria-pressed', chip.classList.contains('is-on') ? 'true' : 'false');
                applyHours(wrap, selectedHours(wrap));
                return;
            }
            var preset = e.target.closest('.meetlet-hourpreset');
            if (preset && wrap.contains(preset)) {
                e.preventDefault();
                var raw = preset.getAttribute('data-hours') || '';
                var list = raw === '' ? [] : raw.split(',').map(function (x) { return parseInt(x, 10); });
                applyHours(wrap, list);
            }
        });
        var sel = document.querySelector('select[name="s_meetletacbfree_agent_dispatch"]')
            || document.getElementById('id_s_meetletacbfree_agent_dispatch');
        if (sel) {
            sel.addEventListener('change', syncHoursEnabled);
            if (document.documentElement.getAttribute('dir') === 'rtl') {
                sel.setAttribute('dir', 'rtl');
            }
        }
        syncHoursEnabled();
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', run);
    } else {
        run();
    }
})();