https://sgs.gov.sa/scripts/custom.js

1let alertbox = document.getElementById("alertBox");
2let alertBtn = document.getElementById("alertBtn");
3let bodyEle = document.querySelector('.body');
4let subHeader = document.querySelector(".sub-header")
5let accessibilitySection = document.querySelector('.accessibility-open');
6let privacyPolicy = document.querySelector('.privacy-policy');
7let accibalityBtn = document.querySelector('.accibality-btn');
8let earthquakeAlert = document.querySelector('.earthquake-alert');
9
10let grayScaleBox = document.querySelector('.grayScale-box');
11let lowSaturationBox = document.querySelector('.lowSaturation-box');
12let highSaturationBox = document.querySelector('.highSaturation-box');
13let enlargeBox = document.querySelector('.enlarge-box');
14let animationStopBox = document.querySelector('.animationStop-box');
15let lineSpacingBox = document.querySelector('.lineSpacing-box');
16let hyberlinkHighlightBox = document.querySelector('.hyberlinkhighlight-box');
17let headerHighlightBox = document.querySelector('.headerHighlight-box');
18let seizureBox = document.querySelector('.seizure-box');
19let visualImpairmentBox = document.querySelector('.visualImpairment-box');
20let intellectualDisabilityBox = document.querySelector('.intellectualDisability-box');
21let mobilityImpairmentBox = document.querySelector('.mobilityImpairment-box');
22let colorBlindnessBox = document.querySelector('.colorBlindness-box');
23let voiceOverBox = document.querySelector('.voiceOver-box');
24
25let accessibilityMainBox = document.getElementById("accessibilityMainBox");
26
27let landingPageHeader = document.querySelector(".landing-page-header");
28
29let contactusHomeBox = document.getElementById("contactus-home-box");
30
31// const section = document.querySelector('.section[data-video-path]');
32let video;
33function initVideoObserver() {
34    const section = document.querySelector('.section[data-video-path]');
35
36    if (!section) {
37        console.warn('Section with data-video-path not found');
38        return;
39    }
40
41    const observer = new MutationObserver(() => {
42        video = section.querySelector('video');
43
44        if (video) {
45            video.play();
46            observer.disconnect();
47        }
48    });
49
50    observer.observe(section, { childList: true, subtree: true });
51}
52initVideoObserver();
53// const observer = new MutationObserver(() => {
54
55//   video = section.querySelector('video');
56//   if (video) {
57//     video.play(); 
58//     observer.disconnect(); 
59//   }
60// });
61
62//  function initObserv(){
63//     observer.observe(section, { childList: true, subtree: true }); 
64
65//  }        
66
67
68
69function grayscale() {
70
71    localStorage.setItem('grayscale', true);
72    bodyEle.classList.add('grayScale');
73    accessibilitySection.classList.add('grayScale');
74    privacyPolicy.classList.add('grayScale');
75    accibalityBtn.classList.add('grayScale');
76    earthquakeAlert.classList.add('grayScale');
77    alertBtn?.classList.add('grayScale');
78    removelowSaturation();
79    removeHighSaturation();
80    grayScaleBox.classList.add('active');
81
82}
83function removegrayscale() {
84    if (localStorage.getItem('grayscale') == "true") {
85        console.log("yes")
86        localStorage.setItem('grayscale', false);
87
88        bodyEle.classList.remove('grayScale');
89        alertBtn?.classList.remove('grayScale');
90        accessibilitySection.classList.remove('grayScale');
91        privacyPolicy.classList.remove('grayScale');
92        accibalityBtn.classList.remove('grayScale');
93        earthquakeAlert.classList.remove('grayScale');
94        grayScaleBox.classList.remove('active');
95    }
96
97}
98function enlarge() {
99    localStorage.setItem('enlarge', true);
100    document.body.classList.add('enlarge');
101    enlargeBox.classList.add('active');
102}
103function headerhighlight() {
104    localStorage.setItem('headerHighlight', true);
105    document.body.classList.add('headerHighlight');
106    headerHighlightBox.classList.add('active');
107}
108function hyberlinkhighlight() {
109    localStorage.setItem('hyberlinkHighlight', true);
110    document.body.classList.add('hyberlinkHighlight');
111    hyberlinkHighlightBox.classList.add('active');
112    console.log(hyberlinkHighlightBox.classList)
113}
114function linespacing() {
115    localStorage.setItem('lineSpacing', true);
116    document.body.classList.add('lineSpacing');
117    lineSpacingBox.classList.add('active');
118}
119function animationstop() {
120    localStorage.setItem('animationStop', true);
121    document.body.classList.add('animationStop');
122    animationStopBox.classList.add('active');
123
124    if (video) {
125        video.pause();
126
127    }
128
129}
130
131function lowSaturation() {
132    lowSaturationBox.classList.add('active');
133    bodyEle.classList.add('lowSaturation');
134    accessibilitySection.classList.add('lowSaturation');
135    privacyPolicy.classList.add('lowSaturation');

136    accibalityBtn.classList.add('lowSaturation');
137    earthquakeAlert.classList.add('lowSaturation');
138    removegrayscale();
139    removeHighSaturation();
140    localStorage.setItem('lowSaturation', true);
141
142}
143function removelowSaturation() {
144    if (localStorage.getItem('lowSaturation') == "true") {
145        localStorage.setItem('lowSaturation', false);
146        bodyEle.classList.remove('lowSaturation');
147        accessibilitySection.classList.remove('lowSaturation');
148        privacyPolicy.classList.remove('lowSaturation');
149        accibalityBtn.classList.remove('lowSaturation');
150        earthquakeAlert.classList.remove('lowSaturation');
151        alertBtn?.classList.remove('lowSaturation');
152        lowSaturationBox.classList.remove('active');
153    }
154
155
156}
157function highSaturation() {
158    highSaturationBox.classList.add('active');
159    bodyEle.classList.add('highSaturation');
160    accessibilitySection.classList.add('highSaturation');
161    privacyPolicy.classList.add('highSaturation');
162    accibalityBtn.classList.add('highSaturation');
163    earthquakeAlert.classList.add('highSaturation');
164    removelowSaturation();
165    removegrayscale();
166    alertBtn?.classList.add('highSaturation');
167    localStorage.setItem('highSaturation', true);
168}
169function removeHighSaturation() {
170    if (localStorage.getItem('highSaturation') == "true") {
171        localStorage.setItem('highSaturation', false);
172
173        privacyPolicy.classList.remove('highSaturation');
174        accibalityBtn.classList.remove('highSaturation');
175        bodyEle.classList.remove('highSaturation');
176        accessibilitySection.classList.remove('highSaturation');
177        alertBtn?.classList.remove('highSaturation');
178        highSaturationBox.classList.remove('active');
179    }
180
181}
182function seizure() {
183    removeAccessability();
184    localStorage.setItem('seizure', true);
185    lowSaturation();
186    animationstop();
187    seizureBox.classList.add('active');
188
189
190}
191function visualImpairment() {
192    removeAccessability();
193    localStorage.setItem('visualImpairment', true);
194    highSaturation();
195    enlarge();
196    visualImpairmentBox.classList.add('active');
197}
198function intellectualDisability() {
199    removeAccessability();
200    localStorage.setItem('intellectualDisability', true);
201    hyberlinkhighlight();
202    headerhighlight();
203    animationstop();
204    intellectualDisabilityBox.classList.add('active');
205}
206function mobilityImpairment() {
207    removeAccessability();
208    localStorage.setItem('mobilityImpairment', true);
209    enlarge();
210    animationstop();
211    mobilityImpairmentBox.classList.add('active');
212}
213function colorBlindness() {
214    removeAccessability();
215    grayscale();
216    colorBlindnessBox.classList.add('active');
217    localStorage.setItem('colorBlindness', true);
218}
219function voiceOver() {
220    voiceOverBox.classList.add('active');
221    document.body.classList.add('voice');
222    localStorage.setItem('voice', true);
223    let utterance = new SpeechSynthesisUtterance("حدد جزء من النص الذي تود سماعه");
224    utterance.lang = "ar-SA"
225    speechSynthesis.speak(utterance);
226    document.addEventListener('mouseup', event => {
227        let selected = window.getSelection()?.toString();
228        if (localStorage.getItem('voice') == 'false') {
229            speechSynthesis.cancel();
230        }
231        utterance = new SpeechSynthesisUtterance(selected);
232        utterance.lang = "ar-SA";
233        speechSynthesis.cancel();
234        speechSynthesis.speak(utterance);
235
236    })
237}
238function removeAccessability() {
239    if (video) {
240        video.play();
241    }
242
243    removegrayscale();
244    removelowSaturation();
245    removeHighSaturation();
246    document.body.classList.remove('enlarge');
247    document.body.classList.remove('headerHighlight');
248    document.body.classList.remove('hyberlinkHighlight')
249    document.body.classList.remove('lineSpacing');
250    document.body.classList.remove('animationStop');
251    document.body.classList.remove('voice');
252    speechSynthesis.cancel();
253    localStorage.setItem('enlarge', false);
254    localStorage.setItem('headerHighlight', false);
255    localStorage.setItem('hyberlinkHighlight', false);
256    localStorage.setItem('seizure', false);
257    localStorage.setItem('visualImpairment', false);
258    localStorage.setItem('intellectualDisability', false);
259    localStorage.setItem('mobilityImpairment', false);
260    localStorage.setItem('highSaturation', false);
261    localStorage.setItem('lowSaturation', false);
262    localStorage.setItem('grayscale', false);
263    localStorage.setItem('lineSpacing', false);
264    localStorage.setItem('animationStop', false);
265    localStorage.setItem('colorBlindness', false);
266    localStorage.setItem('voice', false);
267    removeActive();
268}
269function removeActive() {
270    animationStopBox.classList.remove('active');
271    lineSpacingBox.classList.remove('active');
272    hyberlinkHighlightBox.classList.remove('active');
273    headerHighlightBox.classList.remove('active');
274    enlargeBox.classList.remove('active');
275    seizureBox.classList.remove('active');
276    visualImpairmentBox.classList.remove('active');
277    intellectualDisabilityBox.classList.remove('active');
278    mobilityImpairmentBox.classList.remove('active');
279    colorBlindnessBox.classList.remove('active');
280    voiceOverBox.classList.remove('active');
281}
282function checkAccessibility() {
283    if (localStorage.getItem('enlarge') == 'true') {
284        enlarge();
285    }
286    if (localStorage.getItem('headerHighlight') == 'true') {
287        headerhighlight();
288    }
289    if (localStorage.getItem('seizure') == 'true') {
290        seizure();
291    }
292    if (localStorage.getItem('hyberlinkHighlight') == 'true') {
293        hyberlinkhighlight();
294    }
295
296    if (localStorage.getItem('lineSpacing') == 'true') {
297        linespacing();
298    }
299    if (localStorage.getItem('animationStop') == 'true') {
300        animationstop();
301    }
302    if (localStorage.getItem('visualImpairment') == 'true') {
303        visualImpairment();
304    }
305    if (localStorage.getItem('intellectualDisability') == 'true') {
306        intellectualDisability();
307    }
308    if (localStorage.getItem('mobilityImpairment') == 'true') {
309        mobilityImpairment();
310    }
311    if (localStorage.getItem('colorBlindness') == 'true') {
312        colorBlindness();
313    }
314    if (localStorage.getItem('voice') == 'true') {
315        voiceOver();
316    }
317}
318function checkAccessibilityFilter() {
319    if (localStorage.getItem('highSaturation') == 'true') {
320        highSaturation();
321    }
322    if (localStorage.getItem('lowSaturation') == 'true') {
323        lowSaturation();
324    }
325    if (localStorage.getItem('grayscale') == 'true') {
326        grayscale();
327    }
328}
329
330function openAccessibility() {
331    accessibilityMainBox.style.display = "block";
332}
333function closeAccessibility() {
334    console.log("bye")
335    accessibilityMainBox.style.display = "none";
336}
337window.addEventListener("scroll", () => {
338    if (subHeader != null) {
339        if (window.scrollY > 35) {
340            subHeader.classList.add("scrolled");
341
342        } else {
343            subHeader.classList.remove("scrolled");
344
345        }
346    }
347    if (landingPageHeader != null) {
348        if (window.scrollY > 35) {
349
350            landingPageHeader.classList.remove('appear');
351        } else {
352
353            landingPageHeader.classList.add('appear');
354        }
355    }
356
357});
358document.querySelectorAll('#header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a')
359    .forEach(link => {
360        link.addEventListener('click', e => {
361            e.preventDefault();
362            const li = link.parentElement;
363
364            // Close other open li's
365            document.querySelectorAll('#header li.open').forEach(openLi => {
366                if (openLi !== li) openLi.classList.remove('open');
367            });
368
369            // Toggle clicked li
370            li.classList.toggle('open');
371        });
372    });

373
374window.addEventListener("load", checkCookie);
375window.addEventListener("load", checkAccessibility);
376window.addEventListener("load", checkAccessibilityFilter);
377
378let PrivacyPolicyAlertBox = document.getElementById("PrivacyPolicyAlertBox");
379function checkCookie() {
380    let checking = getCookie("PrivacyPolicyCookie");
381    if (checking !== "") {
382        PrivacyPolicyAlertBox.style.display = "none";
383
384    }
385}
386
387
388function openAlert() {
389    alertBtn.style.display = "none";
390    alertbox.style.display = "block";
391
392}
393function closeAlert() {
394    alertbox.style.display = "none";
395    alertBtn.style.display = "block";
396}
397function AcceptCookie() {
398    document.cookie = "PrivacyPolicyCookie=accept;path=/; max-age=31536000; SameSite=Lax; Secure";
399    PrivacyPolicyAlertBox.style.display = "none";
400}
401function getCookie(cname) {
402    let name = cname + "=";
403    let decodedCookie = decodeURIComponent(document.cookie);
404    let ca = decodedCookie.split(';');
405    for (let i = 0; i < ca.length; i++) {
406        let c = ca[i];
407        while (c.charAt(0) == ' ') {
408            c = c.substring(1);
409        }
410        if (c.indexOf(name) == 0) {
411            return c.substring(name.length, c.length);
412        }
413    }
414    return "";
415}
416function RejectCookie() {
417    PrivacyPolicyAlertBox.style.display = "none";
418
419}
420function openFilter() {
421    if (document.getElementById('filter-box-id').style.display == 'block') {
422        document.getElementById('filter-box-id').style.display = 'none';
423    }
424    else {
425        document.getElementById('filter-box-id').style.display = 'block';
426    }
427
428}
429function closeContactUsHomeBox() {
430    contactusHomeBox.style.display = "none";
431}
432function openContactUsHomeBox() {
433    contactusHomeBox.style.display = "block";
434}
435
436const uploadArea = document.getElementById("uploadArea");
437const fileInput = document.getElementById("fileInput");
438const fileList = document.getElementById("fileList");
439let filesArray = [];
440if(fileInput){
441    uploadArea.addEventListener("click", () => fileInput.click());
442fileInput.addEventListener("change", (e) => {
443  addFiles(e.target.files);
444});
445uploadArea.addEventListener("dragover", (e)=>{
446  e.preventDefault();
447  uploadArea.classList.add("dragover");
448});
449uploadArea.addEventListener("dragleave", ()=>{
450  uploadArea.classList.remove("dragover");
451});
452uploadArea.addEventListener("drop", (e)=>{
453  e.preventDefault();
454  uploadArea.classList.remove("dragover");
455  addFiles(e.dataTransfer.files);
456});
457function addFiles(files){
458  const file = files[0]; // نأخذ ملف واحد فقط
459  if(!file) return;
460  filesArray = [file]; // نستبدل أي ملف سابق
461  renderFiles();
462}
463function renderFiles(){
464  fileList.innerHTML="";
465  filesArray.forEach((file,index)=>{
466      const div=document.createElement("div");
467      div.className="file-item";
468      div.innerHTML=`
469<div class="d-flex align-items-center">
470<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
471<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 19.1666C15.0628 19.1666 19.1668 15.0626 19.1668 9.99998C19.1668 4.93737 15.0628 0.833313 10.0002 0.833313C4.93755 0.833313 0.833496 4.93737 0.833496 9.99998C0.833496 15.0626 4.93755 19.1666 10.0002 19.1666Z" fill="white"/>
472<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0002 19.1666C15.0628 19.1666 19.1668 15.0626 19.1668 9.99998C19.1668 4.93737 15.0628 0.833313 10.0002 0.833313C4.93755 0.833313 0.833496 4.93737 0.833496 9.99998C0.833496 15.0626 4.93755 19.1666 10.0002 19.1666ZM5.87534 9.26775C5.54991 9.59318 5.54991 10.1208 5.87534 10.4463L8.23237 12.8033C8.5578 13.1287 9.08544 13.1287 9.41088 12.8033L14.1249 8.08924C14.4504 7.7638 14.4504 7.23616 14.1249 6.91072C13.7995 6.58529 13.2718 6.58529 12.9464 6.91072L8.82162 11.0355L7.05386 9.26775C6.72842 8.94231 6.20078 8.94231 5.87534 9.26775Z" fill="#067647"/>
473</svg>
474<div class="ps-2">
475${file.name}
476</div>
477</div>
478<button class="remove-file" data-index="${index}">
479<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
480<path d="M18 6L6.00081 17.9992M17.9992 18L6 6.00085" stroke="#4a4a4a" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"></path>
481</svg>
482</button>
483      `;

484      fileList.appendChild(div);
485  });
486    }
487    if (fileList) {
488        fileList.addEventListener("click", (e) => {
489            const removeBtn = e.target.closest(".remove-file");
490            if (!removeBtn) return;
491            const index = removeBtn.dataset.index;
492            filesArray.splice(index, 1);
493            renderFiles();
494        });
495    }
496
497
498
499
500}