https://mof.gov.ae/wp-content/themes/mof-theme/assets/js/ajax-search-v1.js?ver=1.0.0

1// JavaScript file (ajax-search.js)
2jQuery(document).ready(function (jQuery) {
3  // Get the <html> element
4  const htmlElement = document.documentElement;
5  // Get the value of the "lang" attribute
6  const language = htmlElement.getAttribute('lang');
7
8  jQuery('.purge-old-content-btn').on('click', function (e) {
9    e.preventDefault();
10    if (navigator.serviceWorker) {
11      if (navigator.serviceWorker.controller) {
12        navigator.serviceWorker.controller.postMessage({
13          action: 'clearCache',
14        });
15      } else {
16        navigator.serviceWorker.addEventListener('controllerchange', function () {
17          if (navigator.serviceWorker.controller) {
18            navigator.serviceWorker.controller.postMessage({
19              action: 'clearCache',
20            });
21          }
22        });
23      }
24    }
25  });
26
27  jQuery('.services-tab-click').on('click', function (e) {
28    e.preventDefault();
29    jQuery('.services-tabs-wrapper').removeClass('hidden');
30    jQuery('.services-tabs-search-results').addClass('hidden');
31  });
32
33  jQuery('.services-search-input-btn').on('click', function (e) {
34    e.preventDefault();
35    performSearch();
36  });
37
38  jQuery('.services-search-input').on('keypress', function (e) {
39    if (e.which === 13) {
40      // Enter key
41      e.preventDefault();
42      performSearch();
43    }
44  });
45
46  function performSearch() {
47    var searchTerm = jQuery('.services-search-input').val();
48
49    const path = window.location.pathname.replace(/\/+$/, '') + '/'; // normalize: always ends with /
50
51    const isServicesPage = path === '/en/services/' || path === '/ar/services/';
52
53    jQuery.ajax({
54      url: ajaxSearch.ajax_url,
55      type: 'POST',
56      data: {
57        action: 'services_search_pages',
58        search_term: searchTerm,
59        lang: language,
60        page_slug: ajaxSearch.page_slug,
61        isServicesPage: isServicesPage,
62        nonce: ajaxSearch.nonce,
63      },
64      success: function (response) {
65        if (response.success) {
66          var results = response.data;
67          var resultsContainer = jQuery('.services-tabs-search-results-items');
68          resultsContainer.empty();
69
70          results.forEach(function (result) {
71            jQuery('.services-tabs-wrapper').addClass('hidden');
72            jQuery('.services-tabs-search-results').removeClass('hidden');
73            var url = result.url;
74            var start_url = result.start_url || result.url;
75            var title = result.title;
76            var excerpt = result.excerpt;
77            var id = result.id;
78            var is_bookmarked = result.is_bookmarked;
79
80            var action_class = 'favourite-toggle';
81            var bookmarkTooltip = is_bookmarked
82              ? language === 'ar'
83                ? 'إزالة من المفضلة'
84                : 'Remove from favourites'
85              : language === 'ar'
86                ? 'أضف إلى المفضلة'
87                : 'Add to favourites';
88
89            if (isServicesPage) {
90              resultsContainer.append(
91                `<div class="service-listing-item">
92                <div class="flex justify-between listing-item-wrapper">
93                  <div class="max-w-xl 2xl:max-w-3xl service-listing-content">
94                    <h2 class="text-[20px] sm:text-[26px] font-bold pb-2">
95                      <a href="${url}">
96                      ${title}
97                      </a>
98                    </h2>
99                    <p class="mb-0 line-clamp-3">
100                      ${excerpt}
101                    </p>
102                  </div>
103                  <div
104                    class="flex flex-col items-center gap-3 service-listing-btns"
105                  >
106                    <div>
107                     
108                    <a
109                    href="javascript:;"
110                    title="${language === 'ar' ? 'مشاركة' : 'Share'}"
111                    data-modal-target="modal-social-share" 
112                    data-modal-toggle="modal-social-share"
113                    data-postid="${id}" 
114                    class="card-actions text-primary-600 hover:text-primary-500 share-icon-click"
115                    ><svg
116                      xmlns="http://www.w3.org/2000/svg"
117                      width="32"
118                      height="32"
119                      fill="currentColor"

120                      viewBox="0 0 256 256"
121                    >
122                      <rect width="256" height="256" fill="none" />
123                      <line
124                        x1="149.09"
125                        y1="73.3"
126                        x2="90.91"
127                        y2="110.7"
128                        fill="none"
129                        stroke="currentColor"
130                        stroke-linecap="round"
131                        stroke-linejoin="round"
132                        stroke-width="8"
133                      />
134                      <line
135                        x1="90.91"
136                        y1="145.3"
137                        x2="149.09"
138                        y2="182.7"
139                        fill="none"
140                        stroke="currentColor"
141                        stroke-linecap="round"
142                        stroke-linejoin="round"
143                        stroke-width="8"
144                      />
145                      <circle
146                        cx="64"
147                        cy="128"
148                        r="32"
149                        fill="none"
150                        stroke="currentColor"
151                        stroke-linecap="round"
152                        stroke-linejoin="round"
153                        stroke-width="8"
154                      />
155                      <circle
156                        cx="176"
157                        cy="200"
158                        r="32"
159                        fill="none"
160                        stroke="currentColor"
161                        stroke-linecap="round"
162                        stroke-linejoin="round"
163                        stroke-width="8"
164                      />
165                      <circle
166                        cx="176"
167                        cy="56"
168                        r="32"
169                        fill="none"
170                        stroke="currentColor"
171                        stroke-linecap="round"
172                        stroke-linejoin="round"
173                        stroke-width="8"
174                      />
175                    </svg>
176                  </a>
177
178                  <a href="javascript:;"
179                    title="${bookmarkTooltip}"
180                    data-bookmark-id="${result.id}"
181                    class="card-actions text-primary-600 hover:text-primary-500 ${action_class}">
182                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
183                        class="bookmark-filled  ${is_bookmarked ? '' : 'hidden'}  fill-primary-600"

184                        viewBox="0 0 256 256">
185                      <path d="M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Z"></path>
186                    </svg>
187                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
188                        class="bookmark-empty ${is_bookmarked ? 'hidden' : ''}"
189                        fill="currentColor" viewBox="0 0 256 256">
190                      <path d="M184,36H72A12,12,0,0,0,60,48V224a4,4,0,0,0,6.12,3.39L128,188.72l61.89,38.67A4,4,0,0,0,192,228a4.06,4.06,0,0,0,1.94-.5A4,4,0,0,0,196,224V48A12,12,0,0,0,184,36Zm4,180.78-57.89-36.17a4,4,0,0,0-4.24,0L68,216.78V48a4,4,0,0,1,4-4H184a4,4,0,0,1,4,4Z"></path>
191                    </svg>
192                  </a>
193                     
194                    </div>
195                    <a
196                      href="${start_url}"
197                      
198                      class="aegov-link card-action-link hover:text-white"
199                    >
200                      ${language === 'ar' ? 'ابدأ الخدمة' : 'Start service'}
201                      <svg
202                        class="link-icon rtl:-scale-x-100"
203                        aria-hidden="true"
204                        xmlns="http://www.w3.org/2000/svg"

205                        viewBox="0 0 256 256"
206                      >
207                        <rect width="256" height="256" fill="none"></rect>
208                        <line
209                          x1="40"
210                          y1="128"
211                          x2="216"
212                          y2="128"
213                          fill="none"
214                          stroke="currentColor"
215                          stroke-linecap="round"
216                          stroke-linejoin="round"
217                          stroke-width="16"
218                        ></line>
219                        <polyline
220                          points="144 56 216 128 144 200"
221                          fill="none"
222                          stroke="currentColor"
223                          stroke-linecap="round"
224                          stroke-linejoin="round"
225                          stroke-width="16"
226                        ></polyline>
227                      </svg>
228                    </a>
229                  </div>
230                </div>
231              </div>`,
232              );
233            } else {
234              resultsContainer.append(
235                `<div
236              class="aegov-card card-bordered card-glow card-service flex flex-col justify-between"
237            >
238              <h3 class="card-service-title line-clamp-3 min-h-12 sm:min-h-20 mt-5">
239                <a class="card-title-link line-clamp-3 hover:text-white ${
240                  language === 'ar' ? 'service-card-title-ar' : ''
241                }" href="${url}"
242                title="${title}"
243                  >${title}</a
244                >
245              </h3>
246
247              <p>
248              ${excerpt}
249              </p>
250
251              <div class="flex items-center justify-between gap-4">
252                <a
253                  href="${start_url}"
254                
255                  class="aegov-link card-action-link hover:text-white"
256                >
257                 ${language === 'ar' ? 'ابدأ الخدمة' : 'Start service'}
258                  <svg
259                    class="link-icon rtl:-scale-x-100"
260                    aria-hidden="true"
261                    xmlns="http://www.w3.org/2000/svg"

262                    viewBox="0 0 256 256"
263                  >
264                    <rect width="256" height="256" fill="none"></rect>
265                    <line
266                      x1="40"
267                      y1="128"
268                      x2="216"
269                      y2="128"
270                      fill="none"
271                      stroke="currentColor"
272                      stroke-linecap="round"
273                      stroke-linejoin="round"
274                      stroke-width="16"
275                    ></line>
276                    <polyline
277                      points="144 56 216 128 144 200"
278                      fill="none"
279                      stroke="currentColor"
280                      stroke-linecap="round"
281                      stroke-linejoin="round"
282                      stroke-width="16"
283                    ></polyline>
284                  </svg>
285                </a>
286                <div class="flex gap-3">
287                  
288                  <a
289                    href="javascript:;"
290                    title="${language === 'ar' ? 'مشاركة' : 'Share'}"
291                    data-modal-target="modal-social-share" 
292                    data-modal-toggle="modal-social-share"
293                    data-postid="${id}" 
294                    class="card-actions text-primary-600 hover:text-primary-500 share-icon-click"
295                    ><svg
296                      xmlns="http://www.w3.org/2000/svg"
297                      width="32"
298                      height="32"
299                      fill="currentColor"

300                      viewBox="0 0 256 256"
301                    >
302                      <rect width="256" height="256" fill="none" />
303                      <line
304                        x1="149.09"
305                        y1="73.3"
306                        x2="90.91"
307                        y2="110.7"
308                        fill="none"
309                        stroke="currentColor"
310                        stroke-linecap="round"
311                        stroke-linejoin="round"
312                        stroke-width="8"
313                      />
314                      <line
315                        x1="90.91"
316                        y1="145.3"
317                        x2="149.09"
318                        y2="182.7"
319                        fill="none"
320                        stroke="currentColor"
321                        stroke-linecap="round"
322                        stroke-linejoin="round"
323                        stroke-width="8"
324                      />
325                      <circle
326                        cx="64"
327                        cy="128"
328                        r="32"
329                        fill="none"
330                        stroke="currentColor"
331                        stroke-linecap="round"
332                        stroke-linejoin="round"
333                        stroke-width="8"
334                      />
335                      <circle
336                        cx="176"
337                        cy="200"
338                        r="32"
339                        fill="none"
340                        stroke="currentColor"
341                        stroke-linecap="round"
342                        stroke-linejoin="round"
343                        stroke-width="8"
344                      />
345                      <circle
346                        cx="176"
347                        cy="56"
348                        r="32"
349                        fill="none"
350                        stroke="currentColor"
351                        stroke-linecap="round"
352                        stroke-linejoin="round"
353                        stroke-width="8"
354                      />
355                    </svg>
356                  </a>
357
358                  <a href="javascript:;"
359                    title="${bookmarkTooltip}"
360                    data-bookmark-id="${id}"
361                    class="card-actions text-primary-600 hover:text-primary-500 ${action_class}">
362                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
363                        class="bookmark-filled  ${is_bookmarked ? '' : 'hidden'}  fill-primary-600"

364                        viewBox="0 0 256 256">
365                      <path d="M184,32H72A16,16,0,0,0,56,48V224a8,8,0,0,0,12.24,6.78L128,193.43l59.77,37.35A8,8,0,0,0,200,224V48A16,16,0,0,0,184,32Z"></path>
366                    </svg>
367                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"
368                        class="bookmark-empty ${is_bookmarked ? 'hidden' : ''}"
369                        fill="currentColor" viewBox="0 0 256 256">
370                      <path d="M184,36H72A12,12,0,0,0,60,48V224a4,4,0,0,0,6.12,3.39L128,188.72l61.89,38.67A4,4,0,0,0,192,228a4.06,4.06,0,0,0,1.94-.5A4,4,0,0,0,196,224V48A12,12,0,0,0,184,36Zm4,180.78-57.89-36.17a4,4,0,0,0-4.24,0L68,216.78V48a4,4,0,0,1,4-4H184a4,4,0,0,1,4,4Z"></path>
371                    </svg>
372                  </a>
373                </div>
374              </div>
375            </div>`,
376              );
377            }
378          });
379        } else {
380          jQuery('.services-tabs-wrapper').addClass('hidden');
381          jQuery('.services-tabs-search-results').removeClass('hidden');
382          var contentHtml =
383            language === 'ar'
384              ? '<img src="/wp-content/themes/mof-theme/assets/images/no-data-ar.svg" width="150" height="85" alt="لا توجد خدمات لعرضها" />'
385              : '<img src="/wp-content/themes/mof-theme/assets/images/no-data.svg" width="150" height="74" alt="No services to show" />';
386          jQuery('.services-tabs-search-results-items').html(
387            '<div class="mof-loading-row">' + contentHtml + '</div>',
388          );
389        }
390      },
391      error: function () {
392        var contentHtml =
393          language === 'ar'
394            ? '<img src="/wp-content/themes/mof-theme/assets/images/no-data-ar.svg" width="150" height="85" alt="لا توجد خدمات لعرضها" />'
395            : '<img src="/wp-content/themes/mof-theme/assets/images/no-data.svg" width="150" height="74" alt="No services to show" />';
396        jQuery('.services-tabs-search-results-items').html(
397          '<div class="mof-loading-row">' + contentHtml + '</div>',
398        );
399      },
400    });
401  }
402
403  // Listen for clicks on the share icon button
404  //  jQuery(".share-icon-click").on("click", function (e) {
405  //  e.preventDefault();
406  // jQuery(".share-icon-click").on("click", function (e) {
407  //   e.preventDefault();
408  //   // Get the post ID from a data attribute
409  //   var postId = jQuery(this).data("postid");
410  //   socialShareServices(postId);
411  // });
412  jQuery('body').on('click', '.share-icon-click', function (e) {
413    e.preventDefault();
414    //console.log("Share icon clicked within modal");
415    jQuery('#modal-social-share').removeClass('hidden');
416    jQuery('#modal-social-share').addClass('flex');
417    // Get the post ID from a data attribute
418    var postId = jQuery(this).data('postid');
419    socialShareServices(postId);
420  });
421
422  function socialShareServices(postId) {
423    // Send AJAX request to our PHP callback
424    jQuery.ajax({
425      url: ajaxSearch.ajax_url,
426      type: 'POST',
427      data: {
428        action: 'get_social_share_shortcode',
429        post_id: postId,
430        nonce: ajaxSearch.social_share_nonce,
431      },
432      success: function (response) {
433        if (response.success) {
434          // Insert the returned shortcode HTML into the container
435          jQuery('.social-share-shortcode-content').html(response.data);
436          // Re-initialize AddToAny if available
437          if (typeof a2a !== 'undefined' && a2a) {
438            a2a.init_all();
439          }
440        } else {
441          jQuery('.social-share-shortcode-content').html('<p>Something went wrong</p>');
442        }
443      },
444      error: function (xhr, status, error) {
445        jQuery('.social-share-shortcode-content').html('<p>Something went wrong</p>');
446      },
447    });
448  }
449});