@iamproperty/components 3.4.5 → 3.4.7

package/assets/ts/modules/tabs.ts

@@ -0,0 +1,136 @@
+// @ts-nocheck
+export const createTabsLinks = function(tabsElement: Element) {
+
+  const details = tabsElement.querySelectorAll(':scope > details');
+  let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+  let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
+
+  if(tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
+    tabLinks = tabsElement.shadowRoot.querySelector('.tabs__links');
+
+  if(!tabLinks){
+    tabLinks = document.createElement('div');
+    tabLinks.classList.add('tabs__links');
+
+    tabsElement.prepend(tabLinks);
+  }
+
+  // Create the tab buttons from the summary titles
+  details.forEach((detail, index) => {
+    
+    let summary = detail.querySelector(':scope > summary');
+    summary.classList.add('visually-hidden');
+    
+    let button = document.createElement('button');
+    if(detail.hasAttribute('id')){
+        
+      button = document.createElement('a');
+      button.setAttribute('href',`#${detail.getAttribute('id')}`);
+    }
+
+    if(detail.hasAttribute('open')){
+      button.setAttribute('aria-pressed',true);
+    }
+    
+    button.innerHTML = `${summary.innerText}`;
+    button.classList.add('link');
+    button.setAttribute('data-index',index);
+    button.setAttribute('tabindex','-1');
+
+    tabLinks.appendChild(button);
+  });
+
+}
+
+export const setTabsEventHandlers = function(tabsElement: Element){
+
+  let details = tabsElement.querySelectorAll(':scope > details');
+  let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+  let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+
+  if(tabsElement.shadowRoot)
+    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+
+  // Set the on click for the tab buttons, these will open the details box it matches too
+  buttons.forEach((button) => {
+
+    button.addEventListener("click", (e) => {
+      e.preventDefault();
+      buttons.forEach((buttonLoopItem) => {
+
+        let buttonPressed = buttonLoopItem == button ? true : false;
+        buttonLoopItem.setAttribute('aria-pressed', buttonPressed);
+      });
+      details.forEach((detail, detailsIndex) => {
+        
+        let detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
+
+        if(detailsOpen)
+          detail.setAttribute('open', detailsOpen);
+        else
+          detail.removeAttribute('open')
+      });
+
+      if(button.hasAttribute('href'))
+        history.pushState(undefined, undefined, button.getAttribute('href'));
+      
+      // Data layer Open Event
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "openTab",
+        "tabTitle": button.textContent
+      });
+    });
+
+  });
+  
+  // Make sure we dont loose existing summary functionality
+  summaries.forEach((summary, index) => { 
+
+    // Maintain the focus on the summary element but visually highlight the tab button
+    summary.addEventListener("focus", (e) => {
+
+      buttons.forEach((button) => {
+          
+        button.classList.remove('focus');
+      });
+      buttons[index].classList.add('focus');
+    });
+    summary.addEventListener("click", (e) => {
+
+      e.preventDefault();
+      buttons[index].click();
+    });
+  });
+
+}
+
+export const openFirstTab = function(tabsElement: Element){
+
+  let details = tabsElement.querySelectorAll(':scope > details');
+  let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+
+  if(tabsElement.shadowRoot)
+    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+
+  if(location.hash && tabsElement.querySelector(`.tabs__links [href="${location.hash}"]`)){
+      
+    tabsElement.querySelector(`[href="${location.hash}"]`).setAttribute('open',true);
+    tabsElement.querySelector(`details[id="${location.hash.replace('#','')}"]`).setAttribute('open',true);
+  }
+  else if(!tabsElement.querySelector(`details[open]`)) {
+
+    details[0].setAttribute('open',true);
+    buttons[0].setAttribute('aria-pressed',true);
+  }
+
+}
+
+const tabs = function(tabsElement: Element){
+
+  createTabsLinks(tabsElement);
+  setTabsEventHandlers(tabsElement);
+  openFirstTab(tabsElement);
+}
+
+export default tabs

package/assets/ts/modules/youtubevideo.ts

@@ -2,13 +2,11 @@
 /**
  * Integrate YouTube videos as a way of hosting videos without the overhead and worry surrounding hosting vides. i.e. file sizes, performance and accessibility.
  */
- class youtubeVideo {
+class youtubeVideo {
 
   /** @param {Element} embed dom element */
   constructor(embed){
 
-    let createEmbed = this.createEmbed;
-
     // If the scripts is already loaded then lets just create the embed
     if(document.body.classList.contains('youtubeLoaded')){
       embed.addEventListener('click', function(e){
@@ -16,10 +14,10 @@
         // loop parent nodes from the target to the delegation node
         for (var target = e.target; target && target != this; target = target.parentNode) {
 
-          if (target.matches('a:not([data-modal-youtube]')) {
+          if (target.matches('a')) {
 
             e.preventDefault();
-            createEmbed(embed,target);
+            createEmbed(target);
             break;
           }
         }
@@ -33,9 +31,8 @@
   /**
    * Load the YouTube scripts before trying to create the embed
    * @param {HTMLElement} embed dom element
-   * @param {Function} createEmbed function to create the embed after script loaded.
    */
-  loadScripts(embed, createEmbed){
+  loadScripts(embed){
 
     return new Promise((resolve, reject) => {
 
@@ -52,18 +49,16 @@
 
         // script has loaded, you can now use it safely
         tag.onload = () => {
-
-          embed.addEventListener('click', function(e){
+          embed.addEventListener('click', function(event){
+            console.log('click')
             // loop parent nodes from the target to the delegation node
-            for (var target = e.target; target && target != this; target = target.parentNode) {
+            
+              if (event && event.target instanceof HTMLElement && event.target.closest('a')) {
 
-              if (target.matches('a:not([data-modal-youtube]')) {
-
-                e.preventDefault();
-                createEmbed(embed,target);
-                break;
+                event.preventDefault();
+                createEmbed(event.target.closest('a'));
               }
-            }
+            
           }, false);
         }
 
@@ -80,67 +75,67 @@
    * Create the YouTube embed after the user has clicked on it.
    * @param {HTMLElement} embed dom element
    */
-  createEmbed(embed,target){
+}
 
-    // If there is more than one video lets make sure there is only one playing at a time.
-    if(typeof window.player != "undefined" && typeof window.player.pauseVideo == "function")
-      window.player.pauseVideo();
+export const createEmbed = function(target){
 
+  // If there is more than one video lets make sure there is only one playing at a time.
+  if(typeof window.player != "undefined" && typeof window.player.pauseVideo == "function")
+    window.player.pauseVideo();
 
-    var video_id = target.getAttribute('data-id');
-    var link_id = target.getAttribute('id')
 
-    // create an id to pass t the script if one isn't present
-    if(typeof link_id == 'undefined' || link_id == null){
+  var video_id = target.getAttribute('data-id');
+  var link_id = target.getAttribute('id')
 
-      var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
-      link_id = randLetter + Date.now();
-      target.setAttribute('id',link_id);
-    }
+  // create an id to pass t the script if one isn't present
+  if(typeof link_id == 'undefined' || link_id == null){
 
-    // This function creates an <iframe> (and YouTube player) after the API code downloads.
-    function onYouTubeIframeAPIReady() {
-
-      window.player = new YT.Player(link_id, {
-        height: '100%',
-        width: '100%',
-        videoId: video_id,
-        playerVars: {
-          'modestbranding': 1,
-          'playsinline': 1,
-          'rel': 0,
-          'showinfo': 0
-        },
-        events: {
-          'onReady': onPlayerReady,
-          'onStateChange': onPlayerStateChange
-        }
-      });
+    var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
+    link_id = randLetter + Date.now();
+    target.setAttribute('id',link_id);
+  }
 
-    }
-    onYouTubeIframeAPIReady();
+  // This function creates an <iframe> (and YouTube player) after the API code downloads.
+  function onYouTubeIframeAPIReady() {
+
+    window.player = new YT.Player(link_id, {
+      height: '100%',
+      width: '100%',
+      videoId: video_id,
+      playerVars: {
+        'modestbranding': 1,
+        'playsinline': 1,
+        'rel': 0,
+        'showinfo': 0
+      },
+      events: {
+        'onReady': onPlayerReady,
+        'onStateChange': onPlayerStateChange
+      }
+    });
 
-    // The API will call this function when the video player is ready.
-    function onPlayerReady(event) {
-      // Play the video straight away
-      event.target.playVideo();
+  }
+  onYouTubeIframeAPIReady();
 
-    }
+  // The API will call this function when the video player is ready.
+  function onPlayerReady(event) {
+    // Play the video straight away
+    event.target.playVideo();
 
-    // The API calls this function when the player's state changes.
-    // The function indicates that when playing a video (state=1)
-    var done = false;
-    function onPlayerStateChange(event) {
+  }
 
-      if (event.data == YT.PlayerState.PLAYING && !done) {
+  // The API calls this function when the player's state changes.
+  // The function indicates that when playing a video (state=1)
+  var done = false;
+  function onPlayerStateChange(event) {
 
-        var link = document.getElementById(link_id);
-        link.classList.add('player-ready');
+    if (event.data == YT.PlayerState.PLAYING && !done) {
 
-        done = true;
-      }
+      var link = document.getElementById(link_id);
+      link.classList.add('player-ready');
+
+      done = true;
     }
   }
 }
-
 export default youtubeVideo

package/assets/ts/tests/filterlist.spec.ts

@@ -0,0 +1,29 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import { filterTheList } from "../modules/filterlist";
+
+
+const listHTML = `
+<li class="lead text-primary pb-1">Olivia Anderson</li>
+<li class="lead text-primary pb-1">Ethan Ramirez</li>
+<li class="lead text-primary pb-1">Sophia Patel</li>
+<li class="lead text-primary pb-1">Noah Jenkins</li>
+<li class="lead text-primary pb-1">Ava Thompson</li>
+<li class="lead text-primary pb-1">Lucas Myers</li>
+<li class="lead text-primary pb-1">Mia Carter</li>
+<li class="lead text-primary pb-1">Benjamin Lee</li>
+`;
+
+describe('addDataAttributes', () => {
+
+  let list = document.createElement('ul');
+  list.innerHTML = listHTML;
+
+  filterTheList(list, "Lucas");
+
+  test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
+
+    expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
+    expect(list.querySelector('li:not(.d-none').textContent).toEqual('Lucas Myers');
+  });
+});

package/assets/ts/tests/pagination.spec.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import createPaginationButttons from "../modules/pagination";
+
+describe('createPaginationButttons', () => {
+
+  const pagination = document.createElement('div');
+
+  pagination.setAttribute('data-page',2);
+  pagination.setAttribute('data-pages',5);
+  pagination.setAttribute('data-show',15);
+  pagination.setAttribute('data-total',150);
+  pagination.setAttribute('data-increment',15);
+
+  createPaginationButttons(pagination, pagination);
+
+  test('should populate the pagination with links to each page', () => {
+
+    expect(pagination.querySelectorAll('a.page-link').length).toEqual(6);
+  });
+});

package/assets/ts/tests/table.spec.ts

@@ -0,0 +1,191 @@
+// @ts-nocheck
+import '@testing-library/jest-dom'
+import * as tableModule from "../modules/table";
+import puppeteer from 'puppeteer';
+import "expect-puppeteer";
+
+const basicTable = `<thead>
+  <tr>
+    <th>Heading 1</th>
+    <th>Heading 2</th>
+    <th>Heading 3</th>
+  </tr>
+</thead>
+<tbody
+  <tr>
+    <td>Cell 1</td>
+    <td>Low</td>
+    <td>Cell 3</td>
+  </tr>
+  <tr>
+    <td>Cell 1</td>
+    <td>Low</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+  <tr>
+    <td>Different Cell 1</td>
+    <td>Medium</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+  <tr>
+    <td>Different Cell 1</td>
+    <td>High</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+</tbody>`;
+
+describe('addDataAttributes', () => {
+
+  const table = document.createElement('table');
+    table.innerHTML = basicTable;
+
+  tableModule.addDataAttributes(table);
+
+  test('should add data-label attribute to the table cells', () => {
+
+    expect(table.querySelector('tbody td').getAttribute('data-label')).toEqual('Heading 1');
+    expect(table.querySelector('tbody td:nth-child(2)').getAttribute('data-label')).toEqual('Heading 2');
+  });
+
+  test('should add data-content attribute to the table cells if the content matches a pre-defined list', () => {
+    expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').getAttribute('data-content')).toEqual('Low');
+    expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').getAttribute('data-content')).toEqual('Medium');
+  });
+
+});
+
+/* TODO: This unit test doesn't work as puppeteer seems to have an issue with query selector all
+describe('getLargestLastColWidth', () => {
+
+  test('should return the width of the largest last column content', async() => {
+
+    const browser = await puppeteer.launch({});
+    try {
+        const page = await browser.newPage();
+        await page.exposeFunction("getLargestLastColWidth", tableModule.getLargestLastColWidth);
+        await page.setContent(`<table id="table">${basicTable}</table>`);
+        await page.waitForSelector('#table tr');
+
+        const largestWidth = await page.evaluate(`getLargestLastColWidth(document.querySelector("#table"))`);
+
+        //const links = await page.$$eval('#table', e=>getLargestLastColWidth(e))
+      console.log(await largestWidth)
+
+
+    } catch (e) {
+        console.error(e);
+    } finally {
+        await browser.close();
+    }
+
+    
+  });
+
+});
+*/
+
+describe('createMobileButton', () => {
+
+  const table = document.createElement('table');
+  table.innerHTML = basicTable;
+
+  tableModule.createMobileButton(table);
+
+  test('should add a button to the first cell in a column', () => {
+
+    expect(table.querySelector('tbody td:nth-child(1) button').textContent).toEqual('Cell 1');
+    expect(table.querySelector('tbody td:nth-child(1) span').textContent).toEqual('Cell 1');
+  });
+});
+
+describe('createSearchDataList', () => {
+
+  const table = document.createElement('table');
+  table.innerHTML = basicTable;
+  const form = document.createElement('form');
+  form.innerHTML += `<div><input name="search" id="search" type="text" class="form-control" data-search="Heading 1"></div>`
+  
+  tableModule.addDataAttributes(table);
+  tableModule.createSearchDataList(table, form);
+
+  test('should create a datalist populated by the defined columns in the data-search ', () => {
+
+    expect(form.querySelectorAll('datalist').length).toEqual(1);
+    expect(form.querySelectorAll('datalist option').length).toEqual(2);
+    expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
+    expect(form.querySelector('datalist option:nth-child(2)').value).toEqual('Different Cell 1');
+  });
+
+  test('should set the autocomplete attribute to off', () => {
+
+    expect(form.querySelectorAll('datalist').length).toEqual(1);
+    expect(form.querySelectorAll('datalist option').length).toEqual(2);
+    expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
+    expect(form.querySelector('input').getAttribute('autocomplete')).toEqual('off');
+  });
+
+});
+
+describe('sortTable', () => {
+
+  const table = document.createElement('table');
+  table.innerHTML = basicTable;
+  const form = document.createElement('form');
+  form.innerHTML += `<div><select type="select" name="sort" id="sort" class="form-select" data-sort=""><option value="-1">Sort by</option><option value="high" data-sort="Heading 2" data-order="High,Medium,Low" selected="selected">high to low</option></select></div>`
+  const savedTableBody = table.querySelector('tbody');
+
+  tableModule.addDataAttributes(table);
+  tableModule.sortTable(table, form, savedTableBody);
+
+  test('should sort the table from high to low', () => {
+
+    expect(table.querySelector('tbody tr:nth-child(1) td:nth-child(2)').textContent).toEqual('High');
+    expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').textContent).toEqual('Medium');
+    expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').textContent).toEqual('Low');
+  });
+
+
+});
+
+describe('filterTable', () => {
+
+  const table = document.createElement('table');
+  table.innerHTML = basicTable;
+  const form = document.createElement('form');
+  form.innerHTML += `<div><input type="text" name="filter" id="filter" data-filter="Heading 2" value="High" /></div>`;
+
+  tableModule.addDataAttributes(table);
+  tableModule.filterTable(table, form, document.createElement('div'));
+
+  test('should filter the table to only show high values', () => {
+
+    expect(table.querySelectorAll('tbody tr.filtered--matched').length).toEqual(1);
+  });
+});
+
+describe('populateDataQueries', () => {
+
+  const table = document.createElement('table');
+  table.innerHTML = basicTable;
+  const form = document.createElement('form');
+  form.innerHTML += `<div><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
+
+  tableModule.addDataAttributes(table);
+  tableModule.populateDataQueries(table, form);
+
+  test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
+
+
+    expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');
+    expect(form.querySelector('[data-query="Heading 2 == Low"]').textContent).toEqual('2');
+  });
+});
+
+describe('formatCell', () => {
+
+  test('should format the text correctly', () => {
+
+    expect(tableModule.formatCell('date', '2023-05-15 12:10:45.000000')).toEqual('15 May 23');
+    expect(tableModule.formatCell('capitalise', 'low')).toEqual('Low');
+  });
+});