Source: js/media.js

  1. import { addLink } from './storage.js';
  2. import { getDaysKey } from './date.js';
  3. // Popup for the media button
  4. const mediaImg = document.getElementById('media-img');
  5. const submitButton = document.getElementById('media-submit-button');
  6. const url = document.getElementById('media-url');
  7. const mediaDiv = document.getElementById('media-text-area');
  9. /**
  10.  * Toggle the display of the HTML element with elementID between displayType and none
  11.  * @param {string} elementID - The ID for the HTML element
  12.  * @param {string} displayType - The desired display type
  13.  */
  14. function toggle(elementID, displayType) {
  15.     const element = document.getElementById(elementID);
  16.     if (element.style.display === displayType) {
  17.         element.style.display = 'none';
  18.     } else {
  19.         element.style.display = displayType;
  20.     }
  21. }
  23. function youtubeUpload(link) {
  24.     const youtubeDiv = document.createElement('div');
  25.     youtubeDiv.setAttribute('class', 'media-item');
  26.     const youtubeIfr = document.createElement('iframe');
  27.     youtubeIfr.setAttribute('src', `https://www.youtube.com/embed/${link.substring(32)}`);
  28.     youtubeIfr.style.width = '560';
  29.     youtubeIfr.style.height = '315';
  30.     youtubeDiv.appendChild(youtubeIfr);
  31.     mediaDiv.appendChild(youtubeDiv);
  32. }
  34. function pinterestUpload(link) {
  35.     const pinterestDiv = document.createElement('div');
  36.     pinterestDiv.setAttribute('class', 'media-item');
  37.     const pinterestIfr = document.createElement('iframe');
  38.     const pinterestUrl = `https://assets.pinterest.com/ext/embed.html?id=${link.substring(30)}`;
  39.     pinterestIfr.setAttribute('src', pinterestUrl.substr(0, pinterestUrl.length - 1));
  40.     pinterestIfr.style.width = '236';
  41.     pinterestIfr.style.height = '520';
  42.     pinterestIfr.setAttribute('scrolling', 'no');
  43.     pinterestIfr.setAttribute('frameborder', '0');
  44.     pinterestDiv.appendChild(pinterestIfr);
  45.     mediaDiv.appendChild(pinterestDiv);
  46. }
  48. function soundcloudUpload(link) {
  49.     const soundcloudDiv = document.createElement('div');
  50.     soundcloudDiv.setAttribute('class', 'media-item');
  51.     const soundcloudIfr = document.createElement('iframe');
  52.     soundcloudIfr.setAttribute('src', `https://w.soundcloud.com/player/?url=${link}`);
  53.     soundcloudIfr.style.width = '100%';
  54.     soundcloudIfr.style.height = '150';
  55.     soundcloudIfr.setAttribute('scrolling', 'no');
  56.     soundcloudIfr.setAttribute('frameborder', '0');
  57.     soundcloudDiv.appendChild(soundcloudIfr);
  58.     mediaDiv.appendChild(soundcloudDiv);
  59. }
  61. export { youtubeUpload, pinterestUpload, soundcloudUpload };
  63. mediaImg.addEventListener('click', () => {
  64.     toggle('popup-media', 'flex');
  65. });
  67. submitButton.addEventListener('click', () => {
  68.     toggle('popup-media', 'flex');
  69.     addLink(getDaysKey(window.curDate), url.value);
  70.     if (url.value.includes('youtube')) {
  71.         youtubeUpload(url.value);
  72.     }
  73.     if (url.value.includes('pinterest')) {
  74.         pinterestUpload(url.value);
  75.     }
  76.     if (url.value.includes('soundcloud')) {
  77.         soundcloudUpload(url.value);
  78.     }    
  79.     document.getElementById('media-uploader').reset();
  80. });