import { addLink } from './storage.js';
import { getDaysKey } from './date.js';
// Popup for the media button
const mediaImg = document.getElementById('media-img');
const submitButton = document.getElementById('media-submit-button');
const url = document.getElementById('media-url');
const mediaDiv = document.getElementById('media-text-area');
/**
* Toggle the display of the HTML element with elementID between displayType and none
* @param {string} elementID - The ID for the HTML element
* @param {string} displayType - The desired display type
*/
function toggle(elementID, displayType) {
const element = document.getElementById(elementID);
if (element.style.display === displayType) {
element.style.display = 'none';
} else {
element.style.display = displayType;
}
}
function youtubeUpload(link) {
const youtubeDiv = document.createElement('div');
youtubeDiv.setAttribute('class', 'media-item');
const youtubeIfr = document.createElement('iframe');
youtubeIfr.setAttribute('src', `https://www.youtube.com/embed/${link.substring(32)}`);
youtubeIfr.style.width = '560';
youtubeIfr.style.height = '315';
youtubeDiv.appendChild(youtubeIfr);
mediaDiv.appendChild(youtubeDiv);
}
function pinterestUpload(link) {
const pinterestDiv = document.createElement('div');
pinterestDiv.setAttribute('class', 'media-item');
const pinterestIfr = document.createElement('iframe');
const pinterestUrl = `https://assets.pinterest.com/ext/embed.html?id=${link.substring(30)}`;
pinterestIfr.setAttribute('src', pinterestUrl.substr(0, pinterestUrl.length - 1));
pinterestIfr.style.width = '236';
pinterestIfr.style.height = '520';
pinterestIfr.setAttribute('scrolling', 'no');
pinterestIfr.setAttribute('frameborder', '0');
pinterestDiv.appendChild(pinterestIfr);
mediaDiv.appendChild(pinterestDiv);
}
function soundcloudUpload(link) {
const soundcloudDiv = document.createElement('div');
soundcloudDiv.setAttribute('class', 'media-item');
const soundcloudIfr = document.createElement('iframe');
soundcloudIfr.setAttribute('src', `https://w.soundcloud.com/player/?url=${link}`);
soundcloudIfr.style.width = '100%';
soundcloudIfr.style.height = '150';
soundcloudIfr.setAttribute('scrolling', 'no');
soundcloudIfr.setAttribute('frameborder', '0');
soundcloudDiv.appendChild(soundcloudIfr);
mediaDiv.appendChild(soundcloudDiv);
}
export { youtubeUpload, pinterestUpload, soundcloudUpload };
mediaImg.addEventListener('click', () => {
toggle('popup-media', 'flex');
});
submitButton.addEventListener('click', () => {
toggle('popup-media', 'flex');
addLink(getDaysKey(window.curDate), url.value);
if (url.value.includes('youtube')) {
youtubeUpload(url.value);
}
if (url.value.includes('pinterest')) {
pinterestUpload(url.value);
}
if (url.value.includes('soundcloud')) {
soundcloudUpload(url.value);
}
document.getElementById('media-uploader').reset();
});