@iamproperty/components 6.0.0 → 6.1.0--beta

package/assets/ts/components/barchart/README.md

@@ -1,37 +0,0 @@
-```
-<iam-chart>
-  <table>
-    <thead>
-      <tr>
-        <th>Issue</th>
-        <th>Democrat</th>
-        <th>Republican</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr><td>Inflation</td><td>45%</td><td>18%</td></tr><tr><td>Abortion</td><td>12%</td><td>43%</td></tr>
-      <tr><td>Gun policy</td><td>8%</td><td>14%</td></tr><tr><td>Immigration</td><td>15%</td><td>5%</td></tr>
-      <tr><td>Crime</td><td>13%</td><td>10%</td></tr>
-    </tbody>
-  </table>
-</iam-chart>
-```
-
-**To do**
-
-- Animation
-- Add more chart types
-- optimise code
-- change key
-- Fill in readme with class and attributes
-- flout
-
-**Note**
-
-
-**Properties**
-
-
-**Class modifiers**
-
-- .chart--no-animate turns of the animation

package/assets/ts/components/card/README.md

@@ -1,39 +0,0 @@
-**Add the below to your initialise script**
-
-```
-import('../node_modules/@iamproperty/components/assets/js/components/card/card.component.min').then(module => { // Might need to update the path
-
-  if (!window.customElements.get(`iam-card`))
-    window.customElements.define(`iam-card`, module.default);
-
-}).catch((err) => {
-  console.log(err.message);
-});
-```
-
-**Add the below HTML code to where you want the component to live.**
-
-```
-<a href="/link-url">
-  <iam-card>Link content</iam-card>
-</a>
-```
-
-**Note**
-
-The card component needs to be wrapped with a link or a button, this is required to give the card any functionality.
-
-**Properties**
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| data-total | Int | - | Optional total number , usually use on the filter card type |
-| data-image | image url | - | Optional image url to create a card header with an image as its background |
-
-**Class modifiers**
-
-- Adding a class of **.card--filter** will implement the filter card design. 
-- Adding a class of **.colour-danger** will add a left hand border with the danger colour (See status card). This works with all of the theme
-- Adding a class of **.border-o** will remove the box-shadow of the card and make some minor sizing adjustments. 
-- Adding a class like **.colour-warning** will update the colour of the left berder for the card. The theme colours will be avialable to use.
-- Adding a class of **.card--flag** will add a card to the top right corner. 

package/assets/ts/dynamic.ts

@@ -1,107 +0,0 @@
-// @ts-nocheck
-// Modules
-import * as helpers from '../js/modules/helpers'
-import extendDialogs from '../js/modules/dialogs'
-import createDataLayer from '../js/modules/data-layer'
-import extendInputs from '../js/modules/inputs';
-import nav from '../js/modules/nav'
-import table from '../js/modules/table'
-import testimonial from '../js/modules/testimonial'
-import carousel from '../js/modules/carousel'
-import form from '../js/modules/form'
-import youtubeVideo from '../js/modules/youtubevideo'
-
-import iamNotification from './components/notification/notification.component'
-
-const components = ['accordion','header','tabs', 'table','card','pagination','filterlist', 'applied-filters', 'nav', 'marketing'];
-const prefix = "iam"
-const options = {
-  rootMargin: '50px',
-  threshold: 0.1
-}
-const componentExt = ".component.min.js";
-
-// Load components - Each component will load once the first of its type has been loaded
-components.forEach((component) => {
-
-  console.log(component)
-  
-  if(document.getElementsByTagName(`${prefix}-${component}`).length === 0)
-    return;
-
-  let callback = (entries:any) => {
-    entries.forEach((entry:any) => {
-      
-      if(entry.intersectionRatio > 0){
-
-        console.log(component)
-        
-        import(`./components/${component}/${component}${componentExt}`).then(module => {
-          if (!window.customElements.get(`${prefix}-${component}`))
-            window.customElements.define(`${prefix}-${component}`, module.default);
-        }).catch((err) => {
-          console.log(err.message);
-        });  
-
-        intObserver.unobserve(entry.target);
-      }
-    });
-  };
-
-  const intObserver = new IntersectionObserver(callback, options);
-  intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
-});
-
-
-// Attach classes to dom elements
-document.addEventListener("DOMContentLoaded", function() {
-
-  createDataLayer();
-  
-  // Global stuff
-  helpers.addBodyClasses(document.body);
-  helpers.addGlobalEvents(document.body);
-  //helpers.checkElements(document.body);
-  extendDialogs(document.body);
-  extendInputs(document.body);
-
-  
-  if (!window.customElements.get(`iam-notification`))
-    window.customElements.define(`iam-notification`, iamNotification);
-
-  // ANav
-  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
-    nav(arrayElement);
-  });
-
-  // Testimonial
-  Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
-    testimonial(arrayElement);
-  });
-  // Carousel
-  Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement) => {
-    carousel(arrayElement);
-  });
-  // Form
-  Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
-    form(arrayElement);
-  });
-  // YouTube videos
-  Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
-
-    console.log(arrayElement)
-
-    new youtubeVideo(arrayElement);
-  });
-
-
-  window.addEventListener('hashchange', function() {
-
-    const hash = location.hash.replace('#','');
-    const label = document.querySelector(`label[for="${hash}"]`);
-
-    if (label instanceof HTMLElement)
-      label.click();
-
-  }, false);
-});

package/assets/ts/flat-components.ts

@@ -1,106 +0,0 @@
-// @ts-nocheck
-// Modules
-import * as helpers from '../js/modules/helpers'
-import extendDialogs from '../js/modules/dialogs'
-import createDataLayer from '../js/modules/data-layer'
-import extendInputs from '../js/modules/inputs';
-import nav from '../js/modules/nav'
-import * as tableModule from './modules/table'
-import testimonial from '../js/modules/testimonial'
-import carousel from '../js/modules/carousel'
-import form from '../js/modules/form'
-import youtubeVideo from '../js/modules/youtubevideo'
-import tabs from '../js/modules/tabs'
-import filterlist from '../js/modules/filterlist'
-import createPaginationButttons from '../js/modules/pagination'
-import setupNotification from '../js/modules/notification'
-
-// Attach classes to dom elements
-document.addEventListener("DOMContentLoaded", function() {
-
-  createDataLayer();
-
-  // Global stuff
-  helpers.addBodyClasses(document.body);
-  helpers.addGlobalEvents(document.body);
-  //helpers.checkElements(document.body);
-  extendDialogs(document.body);
-  extendInputs(document.body);
-
-  // ANav
-  Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
-    nav(arrayElement);
-  });
-
-  // Advanced tables
-  Array.from(document.querySelectorAll('table')).forEach((arrayElement) => {
-
-    tableModule.addTableEventListeners(arrayElement);
-    tableModule.createMobileButton(arrayElement);
-    tableModule.addDataAttributes(arrayElement);
-
-
-    if(arrayElement.closest('.table--cta')){
-
-      const largestWidth = tableModule.getLargestLastColWidth(arrayElement);
-      arrayElement.closest('.table--cta').style.setProperty("--cta-width", `${largestWidth}rem`);
-    }
-  });
-
-  // Testimonial
-  Array.from(document.querySelectorAll('.testimonial')).forEach((arrayElement) => {
-    testimonial(arrayElement);
-  });
-  // Carousel
-  Array.from(document.querySelectorAll('.carousel')).forEach((arrayElement) => {
-    carousel(arrayElement);
-  });
-  // Form
-  Array.from(document.querySelectorAll('form')).forEach((arrayElement) => {
-    form(arrayElement);
-  });
-  // YouTube videos
-  Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
-    new youtubeVideo(arrayElement);
-  });
-  // Tabs
-  Array.from(document.querySelectorAll('.tabs')).forEach((arrayElement) => {
-    tabs(arrayElement);
-  });
-
-  // filterlist
-  Array.from(document.querySelectorAll('.iam-filterlist')).forEach((arrayElement) => {
-    if(arrayElement.hasAttribute('data-input') && document.querySelector(arrayElement.getAttribute('data-input')))
-      filterlist(arrayElement.querySelector('ul'),document.querySelector(arrayElement.getAttribute('data-input')));
-  });
-  
-
-  // notification
-  Array.from(document.querySelectorAll('.iam-notification')).forEach((arrayElement) => {
-    if(arrayElement.hasAttribute('data-type'))
-      setupNotification(arrayElement);
-  });
-  
-  Array.from(document.querySelectorAll('.pagination__wrapper')).forEach((arrayElement) => {
-
-
-    const params = new URLSearchParams(window.location.search);
-    arrayElement.setAttribute('data-page', (params.has('page') ? params.get('page') : 1));
-    arrayElement.setAttribute('data-show', (params.has('show') ? params.get('show') : 15));
-    arrayElement.setAttribute('data-increment', 15);
-    arrayElement.setAttribute('data-pages', Math.ceil(arrayElement.getAttribute('data-total') / arrayElement.getAttribute('data-show')));
-
-    createPaginationButttons(arrayElement,arrayElement);
-  });
-
-
-  window.addEventListener('hashchange', function() {
-
-    const hash = location.hash.replace('#','');
-    const label = document.querySelector(`label[for="${hash}"]`);
-
-    if (label instanceof HTMLElement)
-      label.click();
-
-  }, false);
-});

package/assets/ts/modules/youtubevideo.ts

@@ -1,141 +0,0 @@
-// @ts-nocheck
-/**
- * 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 {
-
-  /** @param {Element} embed dom element */
-  constructor(embed){
-
-    // If the scripts is already loaded then lets just create the embed
-    if(document.body.classList.contains('youtubeLoaded')){
-      embed.addEventListener('click', function(e){
-
-        // 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')) {
-
-            e.preventDefault();
-            createEmbed(target);
-            break;
-          }
-        }
-      }, false);
-    }
-    else {
-      this.loadScripts(embed, this.createEmbed);
-    }
-  }
-
-  /**
-   * Load the YouTube scripts before trying to create the embed
-   * @param {HTMLElement} embed dom element
-   */
-  loadScripts(embed){
-
-    return new Promise((resolve, reject) => {
-
-      const image = new Image();
-      image.onload = function(){
-
-        // This code loads the IFrame Player API code asynchronously.
-        var tag = document.createElement('script');
-        tag.src = "https://www.youtube.com/iframe_api";
-        var firstScriptTag = document.getElementsByTagName('script')[0];
-        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-        document.body.classList.add('youtubeLoaded');
-        resolve(true);
-
-        // script has loaded, you can now use it safely
-        tag.onload = () => {
-          embed.addEventListener('click', function(event){
-            console.log('click')
-            // loop parent nodes from the target to the delegation node
-            
-              if (event && event.target instanceof HTMLElement && event.target.closest('a')) {
-
-                event.preventDefault();
-                createEmbed(event.target.closest('a'));
-              }
-            
-          }, false);
-        }
-
-      };
-      image.onerror = function(){
-        reject(false);
-      };
-      image.src = "https://youtube.com/favicon.ico";
-    });
-
-  }
-
-  /**
-   * Create the YouTube embed after the user has clicked on it.
-   * @param {HTMLElement} embed dom element
-   */
-}
-
-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 randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
-    link_id = randLetter + Date.now();
-    target.setAttribute('id',link_id);
-  }
-
-  // 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
-      }
-    });
-
-  }
-  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) {
-
-      var link = document.getElementById(link_id);
-      link.classList.add('player-ready');
-
-      done = true;
-    }
-  }
-}
-export default youtubeVideo

package/src/foundations/YoutubeVideo/README.md

@@ -1,11 +0,0 @@
-### Usage
-
-```
-<YoutubeVideo video="lROFZaJcVug" ></YoutubeVideo>
-```
-
-### Properties
-
-| Option | Type | Default Value | Description |
-| ------ | ---- | ------------- | ----------- |
-| video | String | property | Video id from youtube |

package/src/foundations/YoutubeVideo/YoutubeVideo.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="youtube-embed ratio ratio-16x9" ref="wrapper">
-      <a :href="`https://www.youtube.com/watch?v=${video}`" target="_blank" title="Investments Video" :data-id="video">
-        <img :src="`https://img.youtube.com/vi/${video}/maxresdefault.jpg`" alt="">
-        <span class="btn btn-secondary">Play Video</span>
-      </a>
-  </div>
-</template>
-<script>
-import youtubeVideo from '../../../assets/ts/modules/youtubevideo'
-
-export default {
-  name: 'YoutubeVideo',
-  props: {
-    video: {
-      type: String,
-      required: true
-    }
-  },
-  mounted(){
-    new youtubeVideo(this.$refs.wrapper);
-  }
-}
-</script>