https://www.itm.edu/business-school/js/placements.js

1import { createMarquee } from "./marquee.js";
2
3const Placements = [
4    "https://cdn.itm.edu/assets/Mehul_Gupta01_34_11zon_bbd10ea453.jpg",
5    "https://cdn.itm.edu/assets/Monarch_Shukla_37_11zon_8599f73c65.jpg",
6    "https://cdn.itm.edu/assets/harsh_25_11zon_ee432e07ac.jpg",
7    "https://cdn.itm.edu/assets/JEEVAN_DAS_BAGRI_27_11zon_1131e85063.jpg",
8    "https://cdn.itm.edu/assets/Omkar_Malbari_44_11zon_a2ce517b68.jpg",
9    "https://cdn.itm.edu/assets/GHANSHYAM_TIWARI_22_11zon_b75c7cffe8.jpg",
10
11    "https://cdn.itm.edu/assets/Harsh_Gori_24_11zon_78ccecc610.jpg",
12    "https://cdn.itm.edu/assets/Aryan_Shah_10_11zon_fdfa6a8f00.jpg",
13    "https://cdn.itm.edu/assets/Singh_Bharadwaj_Tanuj_59_11zon_abbd3ae058.jpg",
14    "https://cdn.itm.edu/assets/Maanas_Shrivastava_30_11zon_69b447f125.jpg",
15    "https://cdn.itm.edu/assets/Edison_Antony_19_11zon_acc09556d0.jpg",
16    "https://cdn.itm.edu/assets/Preeti_Bhatia_47_11zon_853a00b9c9.jpg",
17    "https://cdn.itm.edu/assets/Muskan_jain_38_11zon_15c182f6cc.jpg",
18    "https://cdn.itm.edu/assets/nandini_41_11zon_24dbade898.jpg",
19    "https://cdn.itm.edu/assets/utsav_64_11zon_0d93a33047.jpg",
20    "https://cdn.itm.edu/assets/Devesh_Pelagade_18_11zon_31023db4fc.jpg",
21    "https://cdn.itm.edu/assets/Bhavya_Paliwal_16_11zon_d8056f047a.jpg",
22    "https://cdn.itm.edu/assets/Naman_Jha_39_11zon_60ac2d08d4.jpg",
23    "https://cdn.itm.edu/assets/darshan_dharamdere_17_11zon_bdb5b19f6d.jpg",
24    "https://cdn.itm.edu/assets/Meraj_Ahmed_35_11zon_974342c665.jpg",
25    "https://cdn.itm.edu/assets/Mahak_Agrawal_31_11zon_9153e15f52.jpg",
26    "https://cdn.itm.edu/assets/Purva_joshi_48_11zon_fd1297ee6b.jpg",
27    "https://cdn.itm.edu/assets/JANHAVI_TELI_26_11zon_47b5452ad7.jpg",
28    "https://cdn.itm.edu/assets/AYUSH_RAJ_14_11zon_f021a93840.jpg",
29    "https://cdn.itm.edu/assets/Kumkum_Parihar_28_11zon_5af4bc1818.jpg",
30    "https://cdn.itm.edu/assets/ASHWIN_DHUMAL_11_11zon_3e96abc6d4.jpg",
31    "https://cdn.itm.edu/assets/Ayush_Kumbhar_13_11zon_5923cf322b.jpg",
32    "https://cdn.itm.edu/assets/lovekush_29_11zon_ec17b05fe9.jpg",
33    "https://cdn.itm.edu/assets/bhairavi_15_11zon_dbc7bb353c.jpg",
34    "https://cdn.itm.edu/assets/MD_Samin_Akbari_32_11zon_c2e15da10c.jpg",
35    "https://cdn.itm.edu/assets/Arya_Shelar_9_11zon_dedb76ebf6.jpg",
36    "https://cdn.itm.edu/assets/Modi_Dev_36_11zon_e51f30d4db.jpg",
37    "https://cdn.itm.edu/assets/paridhi_45_11zon_124d98ce29.jpg",
38    "https://cdn.itm.edu/assets/Nikhil_Sharma_43_11zon_1c68d755e8.jpg",
39    "https://cdn.itm.edu/assets/Gaurav_Dangre_20_11zon_9fdc11d17c.jpg",
40    "https://cdn.itm.edu/assets/vyom_68_11zon_c31067aef1.jpg",
41    "https://cdn.itm.edu/assets/Naman_40_11zon_7e4261e8ec.jpg",
42    "https://cdn.itm.edu/assets/Hardik_Jain_23_11zon_455d2a2db1.jpg",
43    "https://cdn.itm.edu/assets/yash_69_11zon_a306853367.jpg",
44    "https://cdn.itm.edu/assets/AYUSH_KUMAR_12_11zon_691429c64b.jpg",
45    "https://cdn.itm.edu/assets/Nidhi_Jathar_42_11zon_14188e608d.jpg",
46
47]
48const showPlacement = (placement) => {
49    return `
50        <div class="flex w-80 md:w-72 flex-col bg-white rounded-md border shrink-0">
51            <div class="relative w-full aspect-square overflow-hidden rounded-md">
52                <img loading="lazy" src="${placement}"
53                    class="w-full h-full object-cover" alt="${placement}">
54            </div>
55        </div>
56    `
57}
58
59document.addEventListener('DOMContentLoaded', function () {
60
61    function splitIntoParts(arr, parts) {
62        const result = Array.from({ length: parts }, () => []);
63        if (!Array.isArray(arr) || arr.length === 0) return result;
64
65        const base = Math.floor(arr.length / parts);
66        let remainder = arr.length % parts;
67        let index = 0;
68
69        for (let i = 0; i < parts; i++) {
70            const size = base + (remainder > 0 ? 1 : 0);
71            remainder -= 1;
72            result[i] = arr.slice(index, index + size);
73            index += size;
74        }
75
76        return result;
77    }
78
79    const chunks = splitIntoParts(Placements, 2);
80
81    createMarquee("placement-container-1", {
82        children: (chunks[0] || []).map((placement) => showPlacement(placement)),
83        repeat: 4,
84        pauseOnHover: true,
85    })
86    createMarquee("placement-container-2", {
87        children: (chunks[1] || []).map((placement) => showPlacement(placement)),
88        repeat: 4,
89        pauseOnHover: true,
90    })
91
92    // Start marquee animation only when the placements section is visible on screen
93    const marqueeIds = ["placement-container-1", "placement-container-2"];
94
95    function setMarqueeRunning(id, running) {
96        const container = document.getElementById(id);
97        if (!container) return;
98        container.querySelectorAll('.animate-marquee, .animate-marquee-vertical').forEach(node => {
99            node.style.animationPlayState = running ? 'running' : 'paused';
100        });
101    }
102
103    // Pause by default until section is visible
104    marqueeIds.forEach(id => setMarqueeRunning(id, false));
105
106    const section = document.getElementById('placement-container-1') && document.getElementById('placement-container-1').closest('section');
107    if (section) {
108        const io = new IntersectionObserver((entries) => {

109            entries.forEach(entry => {
110                const running = entry.isIntersecting;
111                marqueeIds.forEach(id => setMarqueeRunning(id, running));
112            });
113        }, { threshold: 0.25 });
114
115        io.observe(section);
116    }
117
118    // Pause on hover (safety) and resume based on section visibility
119    marqueeIds.forEach(id => {
120        const el = document.getElementById(id);
121        if (!el) return;
122        el.addEventListener('mouseenter', () => setMarqueeRunning(id, false));
123        el.addEventListener('mouseleave', () => {
124            // resume only if section is visible
125            const sec = el.closest('section');
126            const visible = sec ? (sec.getBoundingClientRect().top < window.innerHeight && sec.getBoundingClientRect().bottom > 0) : true;
127            setMarqueeRunning(id, visible);
128        });
129    });
130})