https://hanumanchicago.org/wp-content/themes/hunuman-mandir/assets/js/mobile-fixes.js?ver=1.0.3

1/**
2 * Mobile Fixes — Hanuman Mandir
3 * 1. Date field fake placeholder for iPhone Safari
4 * 2. Phone field prefill UX fix
5 * 3. Video playsinline enforcement
6 */
7document.addEventListener('DOMContentLoaded', function () {
8
9    // ── FIX 1: Date field fake placeholder (iPhone Safari) ────────────────────
10    var dateField = document.querySelector('input[name="date-pooja"]');
11    if (dateField) {
12        var tomorrow = new Date();
13        tomorrow.setDate(tomorrow.getDate() + 1);
14        var tomorrowStr = tomorrow.getFullYear() + '-'
15            + String(tomorrow.getMonth() + 1).padStart(2, '0') + '-'
16            + String(tomorrow.getDate()).padStart(2, '0');
17        dateField.setAttribute('min', tomorrowStr);
18
19        var isSafariOrIOS = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
20                         || /iPad|iPhone|iPod/.test(navigator.userAgent);
21
22        if (isSafariOrIOS) {
23            var wrapper = document.createElement('div');
24            wrapper.style.cssText = 'position:relative;display:block;width:100%;';
25            dateField.parentNode.insertBefore(wrapper, dateField);
26            wrapper.appendChild(dateField);
27
28            var lbl = document.createElement('span');
29            lbl.textContent = 'Select Date (mm/dd/yyyy)';
30            lbl.style.cssText = 'position:absolute;top:50%;left:12px;transform:translateY(-50%);color:#999;font-size:15px;pointer-events:none;z-index:2;background:transparent;white-space:nowrap;';
31            wrapper.appendChild(lbl);
32
33            function syncLabel() { lbl.style.display = dateField.value ? 'none' : 'block'; }
34            dateField.addEventListener('change', syncLabel);
35            dateField.addEventListener('input',  syncLabel);
36            syncLabel();
37        }
38
39        dateField.addEventListener('change', function () {
40            if (this.value && this.value < tomorrowStr) { this.value = ''; }
41        });
42    }
43
44    // ── FIX 2: Phone field prefill UX ─────────────────────────────────────────
45    var phoneField = document.querySelector('input[name="tel-phone"]');
46    if (phoneField) {
47        var prefilled = phoneField.value ? phoneField.value.trim() : '';
48        if (prefilled && /^\+?[\d\s\-().]{7,}$/.test(prefilled)) {
49            phoneField.setAttribute('data-prefilled', prefilled);
50            phoneField.value = '';
51            phoneField.addEventListener('focus', function () {
52                if (!this.value && this.getAttribute('data-prefilled')) {
53                    this.value = this.getAttribute('data-prefilled');
54                    this.removeAttribute('data-prefilled');
55                }
56            }, { once: true });
57        }
58    }
59
60    // ── FIX 3: Video — playsinline for iOS ────────────────────────────────────
61    document.querySelectorAll('video').forEach(function (v) {
62        v.setAttribute('playsinline', '');
63        v.setAttribute('webkit-playsinline', '');
64        if (v.hasAttribute('autoplay')) { v.muted = true; }
65    });
66
67});