app.js

/* =========================================================================
   Perfectly Backwards — shared behaviour
   -------------------------------------------------------------------------
   All user-facing strings live in I18N and are keyed by <html lang>. Nothing
   in here injects untranslated copy.
   ========================================================================= */
(function () {
    'use strict';

    var LANG = (document.documentElement.getAttribute('lang') || 'en').slice(0, 2) === 'ar' ? 'ar' : 'en';

    var I18N = {
        en: {
            switchToFixed: 'Fix the direction',
            switchToBroken: 'Break it again',
            switchHintBroken: 'This page is forced right-to-left. Press to read it the way it was designed.',
            switchHintFixed: 'Reading normally. Press to go back to the right-to-left version.',
            announceFixed: 'Direction corrected. The page now reads the way it was designed.',
            announceBroken: 'Direction reversed. The page is now deliberately backwards.',
            knobBroken: 'RTL',
            knobFixed: 'LTR',
            filterAll: 'All',
            filterDone: 'Shipped',
            filterPending: 'Pending',
            noRows: 'No products match this filter.',
            labDefault: 'Deploy v2.1 on 12/03, then ping فريق التشغيل (المناوبة) before 09:00.'
        },
        ar: {
            switchToFixed: 'أصلح الاتجاه',
            switchToBroken: 'أعد كسره',
            switchHintBroken: 'اتجاه الصفحة معكوس الآن. اضغط لإعادتها إلى وضعها الصحيح.',
            switchHintFixed: 'الصفحة تُقرأ بشكل صحيح. اضغط لعكس الاتجاه ورؤية المشكلة.',
            /* Direction-neutral: on this page "fixed" is RTL, on the English
               page it is LTR. Naming a side here would be wrong on one of them. */
            announceFixed: 'تم تصحيح الاتجاه. الصفحة تُقرأ الآن كما صُمِّمت.',
            announceBroken: 'تم عكس الاتجاه. الصفحة الآن معكوسة عن قصد.',
            knobBroken: 'RTL',
            knobFixed: 'LTR',
            filterAll: 'الكل',
            filterDone: 'مدعوم',
            filterPending: 'قيد الانتظار',
            noRows: 'لا توجد منتجات مطابقة لهذا الخيار.',
            labDefault: 'حدّثت الطلب رقم 4821 بتاريخ 12/03، والرجاء مراجعة Ahmed قبل الساعة 09:00.'
        }
    };

    function t(key) {
        return (I18N[LANG] && I18N[LANG][key]) || I18N.en[key] || '';
    }

    var root = document.documentElement;

    /* Keyed per language: choosing "broken" on the English page must never
       sabotage the Arabic edition, which is the reference implementation. */
    var STORAGE_KEY = 'pb:direction-mode:' + LANG;

    /* ---------------------------------------------------------------------
       Direction switch
       ------------------------------------------------------------------- */
    function initDirectionSwitch() {
        var button = document.querySelector('[data-dir-switch]');
        if (!button) { return; }

        var brokenDir = button.getAttribute('data-broken-dir') || 'rtl';
        var fixedDir = button.getAttribute('data-fixed-dir') || 'ltr';
        var label = button.querySelector('[data-dir-label]');
        var knob = button.querySelector('[data-dir-knob]');
        var live = document.getElementById('dir-announcer');

        function apply(mode, announce) {
            var fixed = mode === 'fixed';
            root.setAttribute('data-mode', mode);
            root.setAttribute('dir', fixed ? fixedDir : brokenDir);
            button.setAttribute('aria-pressed', String(fixed));
            button.setAttribute('title', fixed ? t('switchHintFixed') : t('switchHintBroken'));

            if (label) { label.textContent = fixed ? t('switchToBroken') : t('switchToFixed'); }
            if (knob) { knob.textContent = fixed ? t('knobFixed') : t('knobBroken'); }
            if (announce && live) { live.textContent = fixed ? t('announceFixed') : t('announceBroken'); }
        }

        var stored = null;
        try { stored = window.localStorage.getItem(STORAGE_KEY); } catch (err) { stored = null; }

        apply(stored === 'fixed' || stored === 'broken' ? stored : (root.getAttribute('data-mode') || 'broken'), false);

        button.addEventListener('click', function () {
            var next = root.getAttribute('data-mode') === 'fixed' ? 'broken' : 'fixed';
            apply(next, true);
            try { window.localStorage.setItem(STORAGE_KEY, next); } catch (err) { /* private mode */ }
        });
    }

    /* ---------------------------------------------------------------------
       Bidi lab — the same string, rendered naively vs. rendered correctly
       ------------------------------------------------------------------- */
    function initBidiLab() {
        var input = document.querySelector('[data-lab-input]');
        var broken = document.querySelector('[data-lab-broken]');
        var correct = document.querySelector('[data-lab-correct]');
        if (!input || !broken || !correct) { return; }

        if (!input.value.trim()) { input.value = t('labDefault'); }

        function render() {
            var value = input.value;

            /* Naive: the whole string inherits one direction, no isolation.
               This is exactly what a product does when it sets dir on the
               container and stops thinking. */
            broken.textContent = value;

            /* Correct: base direction comes from the content (dir="auto" on
               the container) and each embedded run is isolated, so the Bidi
               algorithm resolves neutrals against the right neighbours. */
            correct.textContent = '';
            splitRuns(value).forEach(function (run) {
                /* Whitespace at a run boundary must sit OUTSIDE the isolate,
                   or it collapses and the two runs weld together. */
                var lead = run.text.match(/^\s*/)[0];
                var trail = run.text.slice(lead.length).match(/\s*$/)[0];
                var core = run.text.slice(lead.length, run.text.length - trail.length);

                if (lead) { correct.appendChild(document.createTextNode(lead)); }

                if (core) {
                    var span = document.createElement('span');
                    span.className = 'sample__run';
                    span.setAttribute('dir', run.dir);
                    span.style.unicodeBidi = 'isolate';
                    span.textContent = core;
                    correct.appendChild(span);
                }

                if (trail) { correct.appendChild(document.createTextNode(trail)); }
            });
        }

        input.addEventListener('input', render);
        render();
    }

    var RTL_CHAR = /[֐-׿؀-ۿ܀-ݏݐ-ݿࢠ-ࣿיִ-﷿ﹰ-]/;
    var LTR_CHAR = /[A-Za-zÀ-ɏ]/;

    function splitRuns(text) {
        var runs = [];
        var current = null;

        for (var i = 0; i < text.length; i += 1) {
            var ch = text[i];
            var dir = RTL_CHAR.test(ch) ? 'rtl' : (LTR_CHAR.test(ch) ? 'ltr' : null);

            if (dir === null) {
                if (current) { current.text += ch; } else { runs.push({ dir: 'auto', text: ch }); }
                continue;
            }

            if (!current || current.dir !== dir) {
                current = { dir: dir, text: ch };
                runs.push(current);
            } else {
                current.text += ch;
            }
        }

        return runs;
    }

    /* ---------------------------------------------------------------------
       Tracker filters
       ------------------------------------------------------------------- */
    function initTracker() {
        var trackers = document.querySelectorAll('[data-tracker]');

        Array.prototype.forEach.call(trackers, function (tracker) {
            var chips = tracker.querySelectorAll('[data-filter]');
            var rows = tracker.querySelectorAll('tbody tr[data-status]');
            if (!chips.length || !rows.length) { return; }

            /* Count once, label the chips from real data. */
            var counts = { all: rows.length, done: 0, pending: 0 };
            Array.prototype.forEach.call(rows, function (row) {
                var status = row.getAttribute('data-status');
                if (counts[status] !== undefined) { counts[status] += 1; }
            });

            Array.prototype.forEach.call(chips, function (chip) {
                var key = chip.getAttribute('data-filter');
                var count = chip.querySelector('[data-filter-count]');
                if (count && counts[key] !== undefined) { count.textContent = String(counts[key]); }

                chip.addEventListener('click', function () {
                    Array.prototype.forEach.call(chips, function (other) {
                        other.setAttribute('aria-pressed', String(other === chip));
                    });

                    var visible = 0;
                    Array.prototype.forEach.call(rows, function (row) {
                        var show = key === 'all' || row.getAttribute('data-status') === key;
                        row.hidden = !show;
                        if (show) { visible += 1; }
                    });

                    var empty = tracker.querySelector('[data-tracker-empty]');
                    if (empty) {
                        empty.hidden = visible > 0;
                        empty.textContent = t('noRows');
                    }
                });
            });
        });
    }

    /* ---------------------------------------------------------------------
       Scroll progress — fills from the reading-start edge
       ------------------------------------------------------------------- */
    function initProgress() {
        var bar = document.querySelector('[data-progress]');
        if (!bar) { return; }

        var ticking = false;

        function update() {
            var max = document.documentElement.scrollHeight - window.innerHeight;
            var ratio = max > 0 ? Math.min(1, Math.max(0, window.scrollY / max)) : 0;
            bar.style.setProperty('--progress', (ratio * 100).toFixed(2) + '%');
            ticking = false;
        }

        window.addEventListener('scroll', function () {
            if (!ticking) {
                ticking = true;
                window.requestAnimationFrame(update);
            }
        }, { passive: true });

        update();
    }

    /* ---------------------------------------------------------------------
       Reveals — enhance content that is already visible by default
       ------------------------------------------------------------------- */
    function initReveals() {
        var targets = document.querySelectorAll('.js-reveal');
        if (!targets.length) { return; }

        var reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
        if (reduced || !('IntersectionObserver' in window)) { return; }

        var observer = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (!entry.isIntersecting) { return; }
                entry.target.setAttribute('data-reveal', 'in');
                observer.unobserve(entry.target);
            });
        }, { rootMargin: '0px 0px -8% 0px', threshold: 0.05 });

        Array.prototype.forEach.call(targets, function (target, index) {
            var rect = target.getBoundingClientRect();

            /* Anything already on screen at load stays visible — never gate
               content behind a transition that may not fire. */
            if (rect.top < window.innerHeight * 0.9) {
                target.setAttribute('data-reveal', 'in');
                return;
            }

            target.setAttribute('data-reveal', 'pending');
            target.style.setProperty('--reveal-delay', (index % 4) * 70 + 'ms');
            observer.observe(target);
        });

        /* Failsafe. A reveal is decoration; the content underneath is the
           point. If the observer never fires — hidden tab, headless render,
           print, a browser we did not anticipate — show everything anyway
           rather than ship a blank section. */
        function revealAll() {
            Array.prototype.forEach.call(targets, function (target) {
                if (target.getAttribute('data-reveal') !== 'in') {
                    target.setAttribute('data-reveal', 'in');
                }
            });
            observer.disconnect();
        }

        window.setTimeout(revealAll, 4000);
        window.addEventListener('beforeprint', revealAll);
    }

    function boot() {
        initDirectionSwitch();
        initBidiLab();
        initTracker();
        initProgress();
        initReveals();
    }

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