@iamproperty/components 7.6.3--beta1 → 7.6.3--beta3

package/assets/ts/modules/dropdown.ts

@@ -0,0 +1,104 @@
+import Cookies from 'js-cookie';
+
+export const filterList = (component, search): void => {
+
+  Array.from(component.querySelectorAll(`label:not([slot="checked"])`)).forEach((label) => {
+    const checkbox = label.querySelector('input');
+    const searchValue = checkbox.value;
+    const labelText = label.textContent;
+
+    if (
+      searchValue.toLowerCase().includes(search.value.toLowerCase()) ||
+      labelText.toLowerCase().includes(search.value.toLowerCase())
+    ) {
+      label.removeAttribute('slot');
+    } else {
+      label.setAttribute('slot', 'notmatched');
+    }
+  });
+
+}
+
+export const searchAjax = async (component, search, callback): any => {
+
+  const searchterm = search.value
+  const ajaxURL = component.getAttribute('data-url');
+  const firstInput = component.querySelector('input');
+
+  console.log(firstInput);
+
+  const inputType = firstInput.getAttribute('type');
+  const inputName = firstInput.getAttribute('name');
+
+  const searchAjaxURL = `${ajaxURL}?search_query=${encodeURI(searchterm)}`;
+
+  // Setup controller vars if not already set
+  if (!window.controller) window.controller = [];
+
+  // Abort if controller already present for this url
+  if (window.controller[searchAjaxURL]) window.controller[searchAjaxURL].abort();
+
+  // Create a new controller so it can be aborted if new fetch made
+  window.controller[searchAjaxURL] = new AbortController();
+  const { signal } = controller[searchAjaxURL];
+
+  try {
+    await fetch(searchAjaxURL, {
+      signal: signal,
+      method: 'get',
+      credentials: 'same-origin',
+      headers: new Headers({
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+        'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN'),
+      }),
+    })
+      .then((response) => response.json())
+      .then((response) => {
+
+        let items = '';
+
+        for (let i = 0; i < response['data'].length; i++) {
+
+          if(!component.querySelector(`[value="${response['data'][i].value}"]`))
+            items += `<label class="tag"><input type="${inputType}" name="${component.hasAttribute('data-name') ? component.getAttribute('data-name') : inputName}" value="${ response['data'][i].value }"/>${ response['data'][i].title }</label>`;
+        }
+
+        component.insertAdjacentHTML('beforeend', `${items}`);
+        
+        callback(component, search);
+        return response;
+      });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const setTag = (tag):void => {
+
+  const input = tag.querySelector(':checked');
+  const inputName = input?.getAttribute('name');
+
+  tag.setAttribute('slot', 'checked');
+  tag.setAttribute('data-content', tag.textContent);
+
+  let tags = [];
+
+  if(localStorage.getItem('tags-'+inputName) != null)
+    tags = JSON.parse(localStorage.getItem('tags-'+inputName));
+
+
+  if(!tags.includes(tag.textContent)){
+
+    tags.push(tag.textContent);
+    
+    localStorage.setItem('tags-'+inputName,JSON.stringify(tags));
+  }
+
+  let tagIndex = tags.indexOf(tag.textContent) + 1;
+  if(tagIndex > 23)
+    tagIndex = 1;
+
+  tag?.classList.add(`wider-colour-${tagIndex + 1}`);
+}

package/assets/ts/modules/modal.ts

@@ -0,0 +1,44 @@
+export const openModal = (id, modal): void => {
+
+  const dialog = modal.shadowRoot?.querySelector('dialog');
+
+  dialog?.showModal();
+  dialog?.focus();
+
+  const closeEvent = new CustomEvent('modal-opened', {
+    bubbles: true,
+    cancelable: true,
+    detail: { modalId: id },
+  });
+
+  modal.dispatchEvent(closeEvent);
+
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    event: 'openModal',
+    id: id,
+  });
+}
+
+export const closeModal = (id, modal): void => {
+
+  const dialog = modal.shadowRoot?.querySelector('dialog');
+
+  dialog?.close();
+  
+  const closeEvent = new CustomEvent('modal-closed', {
+    bubbles: true,
+    cancelable: true,
+    detail: { modalId: id },
+  });
+
+  modal.dispatchEvent(closeEvent);
+
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    event: 'closeModal',
+    id: id,
+  });
+}
+
+export const closeButtonHtml = `<button class="btn btn-compact btn-secondary fa-xmark-large" data-close>Close</button>`;

package/assets/ts/modules/videos.ts

@@ -125,10 +125,10 @@ export const createYoutTubeVideo = async (target, video_id): void | boolean => {
     window.player = [];
   }
 
-  const link_id = target.getAttribute('id');
+  //const link_id = target.getAttribute('id');
 
-  if (typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == 'function') {
-    window.player[link_id].playVideo();
+  if (typeof window.player[video_id] != 'undefined' && typeof window.player[video_id].pauseVideo == 'function') {
+    window.player[video_id].playVideo();
 
     return false;
   }
@@ -136,7 +136,7 @@ export const createYoutTubeVideo = async (target, video_id): void | boolean => {
   // This function creates an <iframe> (and YouTube player) after the API code downloads.
   //function onYouTubeIframeAPIReady() {
 
-  window.player[link_id] = new YT.Player(link_id, {
+  window.player[video_id] = new YT.Player(video_id, {
     height: '100%',
     width: '100%',
     videoId: video_id,
@@ -165,7 +165,7 @@ export const createYoutTubeVideo = async (target, video_id): void | boolean => {
   let done = false;
   function onPlayerStateChange(event): void {
     if (event.data == YT.PlayerState.PLAYING && !done) {
-      const link = document.getElementById(link_id);
+      const link = document.getElementById(video_id);
       link.classList.add('player-ready');
 
       done = true;