@iamproperty/components 6.0.0 → 6.1.0--beta2

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/assets/ts/tests/dialogs.spec.js

@@ -1,50 +0,0 @@
-// @ts-nocheck
-import '@testing-library/jest-dom'
-import { createMultiFormDialog } from "../modules/dialogs";
-
-
-describe('createMultiFormDialog', () => {
-  let dialog;
-
-  beforeEach(() => {
-    // Create a fresh dialog element before each test
-    dialog = document.createElement('dialog');
-    dialog.innerHTML = `
-      <fieldset data-title="fieldset1">
-        <input type="text" >
-      </fieldset>
-      <fieldset data-title="fieldset2">
-        <input type="text" >
-      </fieldset>
-    `;
-  });
-
-  test('it initializes buttons and fieldsets', () => {
-    createMultiFormDialog(dialog);
-
-    expect(dialog.querySelectorAll('.steps').length).toEqual(1);
-  });
-
-  test('it validates fieldsets and updates classes', () => {
-    createMultiFormDialog(dialog);
-
-    // Simulate a button click to trigger validation
-    const button = dialog.querySelector('button[data-title="fieldset1"]');
-    button.click();
-
-    // Add your assertions here to check if validation and class updates are working as expected
-    expect(dialog.querySelectorAll('fieldset[data-title="fieldset1"].active').length).toEqual(1);
-  });
-
-  test('it navigates to the next fieldset', () => {
-    createMultiFormDialog(dialog);
-
-    // Simulate a button click to navigate to the next fieldset
-    const button = dialog.querySelector('button[data-title="fieldset2"]');
-    button.click();
-
-    // Add your assertions here to check if navigation to the next fieldset is working
-    expect(dialog.querySelectorAll('fieldset[data-title="fieldset2"].active').length).toEqual(1);
-  });
-
-});

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>