From bd2fd055533cd10ab54fe27f431d8238ad549cf1 Mon Sep 17 00:00:00 2001 From: dimden Date: Tue, 19 Jul 2022 23:01:33 +0300 Subject: [PATCH] handle file drops --- layouts/header/script.js | 4 + layouts/home/script.js | 12 +- layouts/notifications/script.js | 6 + layouts/profile/script.js | 10 ++ layouts/search/script.js | 6 + layouts/tweet/script.js | 9 ++ manifest.json | 2 +- scripts/apis.js | 233 +++++++++++++++++--------------- 8 files changed, 172 insertions(+), 110 deletions(-) diff --git a/layouts/header/script.js b/layouts/header/script.js index 5468249f..648ea845 100644 --- a/layouts/header/script.js +++ b/layouts/header/script.js @@ -649,6 +649,7 @@ setTimeout(() => { `); + const newTweet = modal.getElementsByClassName('navbar-new-tweet-container')[0]; const newTweetText = modal.getElementsByClassName('navbar-new-tweet-text')[0]; const newTweetChar = modal.getElementsByClassName('navbar-new-tweet-char')[0]; const newTweetMedia = modal.getElementsByClassName('navbar-new-tweet-media')[0]; @@ -760,6 +761,9 @@ setTimeout(() => { updateCharCount(e); }); let mediaToUpload = []; + newTweet.addEventListener('drop', e => { + handleDrop(e, mediaToUpload, newTweetMediaDiv); + }); newTweetMedia.addEventListener('click', () => { getMedia(mediaToUpload, newTweetMediaDiv); }); diff --git a/layouts/home/script.js b/layouts/home/script.js index 0a6f8f62..7902a7d9 100644 --- a/layouts/home/script.js +++ b/layouts/home/script.js @@ -389,6 +389,9 @@ async function appendTweet(t, timelineContainer, options = {}) { tweetInteractReply.classList.remove('tweet-interact-reply-clicked'); }); let replyMedia = []; + tweetReply.addEventListener('drop', e => { + handleDrop(e, replyMedia, tweetReplyMedia); + }); tweetReplyUpload.addEventListener('click', () => { getMedia(replyMedia, tweetReplyMedia); }); @@ -564,6 +567,9 @@ async function appendTweet(t, timelineContainer, options = {}) { }) }); let quoteMedia = []; + tweetQuote.addEventListener('drop', e => { + handleDrop(e, quoteMedia, tweetQuoteMedia); + }); tweetQuoteUpload.addEventListener('click', () => { getMedia(quoteMedia, tweetQuoteMedia); }); @@ -1051,8 +1057,10 @@ setTimeout(() => { document.getElementById('new-tweet-text').classList.add('new-tweet-text-focused'); document.getElementById('new-tweet-media-div').classList.add('new-tweet-media-div-focused'); }); - - document.getElementById('new-tweet-media-div').addEventListener('click', async () => { + document.getElementById('new-tweet').addEventListener('drop', e => { + handleDrop(e, mediaToUpload, document.getElementById('new-tweet-media-c')); + }); + document.getElementById('new-tweet-media-div').addEventListener('click', () => { getMedia(mediaToUpload, document.getElementById('new-tweet-media-c')); }); let newTweetUserSearch = document.getElementById("new-tweet-user-search"); diff --git a/layouts/notifications/script.js b/layouts/notifications/script.js index 2745a163..42910403 100644 --- a/layouts/notifications/script.js +++ b/layouts/notifications/script.js @@ -261,6 +261,9 @@ async function appendTweet(t, timelineContainer, options = {}) { tweetInteractReply.classList.remove('tweet-interact-reply-clicked'); }); let replyMedia = []; + tweetReply.addEventListener('drop', e => { + handleDrop(e, replyMedia, tweetReplyMedia); + }); tweetReplyUpload.addEventListener('click', () => { getMedia(replyMedia, tweetReplyMedia); }); @@ -432,6 +435,9 @@ async function appendTweet(t, timelineContainer, options = {}) { }) }); let quoteMedia = []; + tweetQuote.addEventListener('drop', e => { + handleDrop(e, quoteMedia, tweetQuoteMedia); + }); tweetQuoteUpload.addEventListener('click', () => { getMedia(quoteMedia, tweetQuoteMedia); }); diff --git a/layouts/profile/script.js b/layouts/profile/script.js index 3fb99a43..d5686541 100644 --- a/layouts/profile/script.js +++ b/layouts/profile/script.js @@ -443,6 +443,7 @@ function renderProfile() { `); + const newTweet = modal.getElementsByClassName('navbar-new-tweet-container')[0]; const newTweetText = modal.getElementsByClassName('navbar-new-tweet-text')[0]; const newTweetChar = modal.getElementsByClassName('navbar-new-tweet-char')[0]; const newTweetMedia = modal.getElementsByClassName('navbar-new-tweet-media')[0]; @@ -547,6 +548,9 @@ function renderProfile() { updateCharCount(e); }); let mediaToUpload = []; + newTweet.addEventListener('drop', e => { + handleDrop(e, mediaToUpload, newTweetMediaDiv); + }); newTweetMedia.addEventListener('click', () => { getMedia(mediaToUpload, newTweetMediaDiv); }); @@ -1069,6 +1073,9 @@ async function appendTweet(t, timelineContainer, options = {}) { tweetInteractReply.classList.remove('tweet-interact-reply-clicked'); }); let replyMedia = []; + tweetReply.addEventListener('drop', e => { + handleDrop(e, replyMedia, tweetReplyMedia); + }); tweetReplyUpload.addEventListener('click', () => { getMedia(replyMedia, tweetReplyMedia); }); @@ -1244,6 +1251,9 @@ async function appendTweet(t, timelineContainer, options = {}) { }) }); let quoteMedia = []; + tweetQuote.addEventListener('drop', e => { + handleDrop(e, quoteMedia, tweetQuoteMedia); + }); tweetQuoteUpload.addEventListener('click', () => { getMedia(quoteMedia, tweetQuoteMedia); }); diff --git a/layouts/search/script.js b/layouts/search/script.js index 67c0b101..a38fd598 100644 --- a/layouts/search/script.js +++ b/layouts/search/script.js @@ -300,6 +300,9 @@ async function appendTweet(t, timelineContainer, options = {}) { tweetInteractReply.classList.remove('tweet-interact-reply-clicked'); }); let replyMedia = []; + tweetReply.addEventListener('drop', e => { + handleDrop(e, replyMedia, tweetReplyMedia); + }); tweetReplyUpload.addEventListener('click', () => { getMedia(replyMedia, tweetReplyMedia); }); @@ -471,6 +474,9 @@ async function appendTweet(t, timelineContainer, options = {}) { }) }); let quoteMedia = []; + tweetQuote.addEventListener('drop', e => { + handleDrop(e, quoteMedia, tweetQuoteMedia); + }); tweetQuoteUpload.addEventListener('click', () => { getMedia(quoteMedia, tweetQuoteMedia); }); diff --git a/layouts/tweet/script.js b/layouts/tweet/script.js index 8b970772..91411d94 100644 --- a/layouts/tweet/script.js +++ b/layouts/tweet/script.js @@ -339,6 +339,9 @@ async function appendComposeComponent(container, replyTweet) { document.getElementById('new-tweet-media-div').classList.add('new-tweet-media-div-focused'); }); + document.getElementById('new-tweet').addEventListener('drop', e => { + handleDrop(e, mediaToUpload, document.getElementById('new-tweet-media-c')); + }); document.getElementById('new-tweet-media-div').addEventListener('click', async () => { getMedia(mediaToUpload, document.getElementById('new-tweet-media-c')); }); @@ -907,6 +910,9 @@ async function appendTweet(t, timelineContainer, options = {}) { tweetInteractReply.classList.remove('tweet-interact-reply-clicked'); }); let replyMedia = []; + tweetReply.addEventListener('drop', e => { + handleDrop(e, replyMedia, tweetReplyMedia); + }); tweetReplyUpload.addEventListener('click', () => { getMedia(replyMedia, tweetReplyMedia); }); @@ -1135,6 +1141,9 @@ async function appendTweet(t, timelineContainer, options = {}) { }) }); let quoteMedia = []; + tweetQuote.addEventListener('drop', e => { + handleDrop(e, quoteMedia, tweetQuoteMedia); + }); tweetQuoteUpload.addEventListener('click', () => { getMedia(quoteMedia, tweetQuoteMedia); }); diff --git a/manifest.json b/manifest.json index 6da7e7be..e9ba0a65 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Old Twitter Layout (2022)", "description": "A new extension that returns old Twitter's look.", - "version": "1.0.7", + "version": "1.0.8", "manifest_version": 3, "homepage_url": "https://github.com/dimdenGD/OldTwitter", "background": { diff --git a/scripts/apis.js b/scripts/apis.js index d5af9870..b621e921 100644 --- a/scripts/apis.js +++ b/scripts/apis.js @@ -33,122 +33,141 @@ function createModal(html, className) { document.body.appendChild(modal); return modal; } -function getMedia(mediaArray, mediaContainer) { - let input = document.createElement('input'); - input.type = 'file'; - input.multiple = true; - input.accept = 'image/*,video/*,image/gif'; - input.addEventListener('change', async () => { - let files = input.files; - let images = []; - let videos = []; - let gifs = []; - for (let i = 0; i < files.length; i++) { - let file = files[i]; - if (file.type.includes('gif')) { - // max 15 mb - if (file.size > 15000000) { - return alert('GIFs must be less than 15 MB'); - } - gifs.push(file); - } else if (file.type.includes('video')) { - // max 500 mb - if (file.size > 500000000) { - return alert('Videos must be less than 500 MB'); - } - videos.push(file); - } else if (file.type.includes('image')) { - // max 5 mb - if (file.size > 5000000) { - return alert('Images must be less than 5 MB'); - } - images.push(file); - } +function handleFiles(files, mediaArray, mediaContainer) { + let images = []; + let videos = []; + let gifs = []; + for (let i = 0; i < files.length; i++) { + let file = files[i]; + if (file.type.includes('gif')) { + // max 15 mb + if (file.size > 15000000) { + return alert('GIFs must be less than 15 MB'); + } + gifs.push(file); + } else if (file.type.includes('video')) { + // max 500 mb + if (file.size > 500000000) { + return alert('Videos must be less than 500 MB'); + } + videos.push(file); + } else if (file.type.includes('image')) { + // max 5 mb + if (file.size > 5000000) { + return alert('Images must be less than 5 MB'); + } + images.push(file); } - // either up to 4 images or 1 video or 1 gif - if (images.length > 0) { - if (images.length > 4) { - images = images.slice(0, 4); - } - if (videos.length > 0 || gifs.length > 0) { - return alert('You can only upload up to 4 images or 1 video or 1 gif'); - } + } + // either up to 4 images or 1 video or 1 gif + if (images.length > 0) { + if (images.length > 4) { + images = images.slice(0, 4); } - if (videos.length > 0) { - if (images.length > 0 || gifs.length > 0 || videos.length > 1) { - return alert('You can only upload up to 4 images or 1 video or 1 gif'); - } + if (videos.length > 0 || gifs.length > 0) { + return alert('You can only upload up to 4 images or 1 video or 1 gif'); } - if (gifs.length > 0) { - if (images.length > 0 || videos.length > 0 || gifs.length > 1) { - return alert('You can only upload up to 4 images or 1 video or 1 gif'); - } + } + if (videos.length > 0) { + if (images.length > 0 || gifs.length > 0 || videos.length > 1) { + return alert('You can only upload up to 4 images or 1 video or 1 gif'); } - // get base64 data - let media = [...images, ...videos, ...gifs]; - let base64Data = []; - for (let i = 0; i < media.length; i++) { - let file = media[i]; - let reader = new FileReader(); - reader.readAsArrayBuffer(file); - reader.onload = () => { - base64Data.push(reader.result); - if (base64Data.length === media.length) { - mediaContainer.innerHTML = ''; - while (mediaArray.length > 0) { - mediaArray.pop(); - } - base64Data.forEach(data => { - let div = document.createElement('div'); - let img = document.createElement('img'); - div.title = file.name; - div.id = `new-tweet-media-img-${Date.now()}${Math.random()}`.replace('.', '-'); - div.className = "new-tweet-media-img-div"; - img.className = "new-tweet-media-img"; - let progress = document.createElement('span'); - progress.hidden = true; - progress.className = "new-tweet-media-img-progress"; - let remove = document.createElement('span'); - remove.className = "new-tweet-media-img-remove"; - let alt; - if (!file.type.includes('video')) { - alt = document.createElement('span'); - alt.className = "new-tweet-media-img-alt"; - alt.innerText = "ALT"; - alt.addEventListener('click', () => { - mediaObject.alt = prompt('Enter alt text for image'); - }); - } - let dataBase64 = arrayBufferToBase64(data); - let mediaObject = { - div, img, - id: img.id, - data: data, - dataBase64: dataBase64, - type: file.type, - category: file.type.includes('gif') ? 'tweet_gif' : file.type.includes('video') ? 'tweet_video' : 'tweet_image' - }; - mediaArray.push(mediaObject); - img.src = file.type.includes('video') ? 'data:image/png;base64,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' : `data:${file.type};base64,${dataBase64}`; - remove.addEventListener('click', () => { - div.remove(); - for (let i = mediaArray.length - 1; i >= 0; i--) { - let m = mediaArray[i]; - if (m.id === img.id) mediaArray.splice(i, 1); - } + } + if (gifs.length > 0) { + if (images.length > 0 || videos.length > 0 || gifs.length > 1) { + return alert('You can only upload up to 4 images or 1 video or 1 gif'); + } + } + // get base64 data + let media = [...images, ...videos, ...gifs]; + let base64Data = []; + for (let i = 0; i < media.length; i++) { + let file = media[i]; + let reader = new FileReader(); + reader.readAsArrayBuffer(file); + reader.onload = () => { + base64Data.push(reader.result); + if (base64Data.length === media.length) { + mediaContainer.innerHTML = ''; + while (mediaArray.length > 0) { + mediaArray.pop(); + } + base64Data.forEach(data => { + let div = document.createElement('div'); + let img = document.createElement('img'); + div.title = file.name; + div.id = `new-tweet-media-img-${Date.now()}${Math.random()}`.replace('.', '-'); + div.className = "new-tweet-media-img-div"; + img.className = "new-tweet-media-img"; + let progress = document.createElement('span'); + progress.hidden = true; + progress.className = "new-tweet-media-img-progress"; + let remove = document.createElement('span'); + remove.className = "new-tweet-media-img-remove"; + let alt; + if (!file.type.includes('video')) { + alt = document.createElement('span'); + alt.className = "new-tweet-media-img-alt"; + alt.innerText = "ALT"; + alt.addEventListener('click', () => { + mediaObject.alt = prompt('Enter alt text for image'); }); - div.append(img, progress, remove); - if (!file.type.includes('video')) { - img.addEventListener('click', () => { - new Viewer(mediaContainer); - }); - div.append(alt); + } + let dataBase64 = arrayBufferToBase64(data); + let mediaObject = { + div, img, + id: img.id, + data: data, + dataBase64: dataBase64, + type: file.type, + category: file.type.includes('gif') ? 'tweet_gif' : file.type.includes('video') ? 'tweet_video' : 'tweet_image' + }; + mediaArray.push(mediaObject); + img.src = file.type.includes('video') ? 'data:image/png;base64,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' : `data:${file.type};base64,${dataBase64}`; + remove.addEventListener('click', () => { + div.remove(); + for (let i = mediaArray.length - 1; i >= 0; i--) { + let m = mediaArray[i]; + if (m.id === img.id) mediaArray.splice(i, 1); } - mediaContainer.append(div); }); - } + div.append(img, progress, remove); + if (!file.type.includes('video')) { + img.addEventListener('click', () => { + new Viewer(mediaContainer); + }); + div.append(alt); + } + mediaContainer.append(div); + }); } } + } +} +let isURL = (str) => { + try { + new URL(str); + return true; + } catch (_) { + return false; + } +} +function handleDrop(event, mediaArray, mediaContainer) { + let text = event.dataTransfer.getData("Text").trim(); + if(text.length <= 1) { + event.stopPropagation(); + event.preventDefault(); + let files = event.dataTransfer.files; + handleFiles(files, mediaArray, mediaContainer); + } +} +function getMedia(mediaArray, mediaContainer) { + let input = document.createElement('input'); + input.type = 'file'; + input.multiple = true; + input.accept = 'image/png,image/jpeg,image/gif,video/mp4,video/mov'; + input.addEventListener('change', () => { + handleFiles(input.files, mediaArray, mediaContainer); }); input.click(); };