import prepareImage from '@/js/utils/prepareImage.ext'; | |
const css = ` | |
/** | |
* Place your custom CSS styles here. | |
**/ | |
body.vertol--authed [src*='vertol.imgix.net'] { | |
outline: 1px solid mediumaquamarine; | |
} | |
body.vertol--authed [src*='vertol.imgix.net']:hover { | |
outline: 2px solid aqua; | |
} | |
.vertol-btns { | |
position: relative; | |
} | |
.vertol-prog { | |
position: absolute; | |
top: 0; | |
right: 0; | |
left: 0; | |
height: 1px; | |
border-top-style: solid; | |
border-top-color: aquamarine; | |
width: 0; | |
margin: 0; | |
padding: 0; | |
transition: width 333ms; | |
} | |
@keyframes pulse { | |
from { | |
box-shadow: 0 0 4px 2px mediumaquamarine; | |
} | |
to { | |
box-shadow: 0 0 4px 8px aqua; | |
} | |
} | |
.vertol-outline:not(.vertol--has-img) { | |
box-shadow: mediumaquamarine 0 0 4px; | |
animation-duration: 1s; | |
animation-name: pulse; | |
animation-iteration-count: infinite; | |
animation-direction: alternate; | |
} | |
`; | |
(function() { | |
var style = document.createElement('style'); | |
style.innerHTML = css; | |
(document.head || document.documentElement).appendChild(style); | |
function dispatch(cmd, cb = () => {}) { | |
chrome.extension.sendMessage(cmd, cb); | |
} | |
const $ = document.querySelector.bind(document); | |
const $$ = selector => Array.from(document.querySelectorAll(selector)); | |
function noop(e) { | |
e.preventDefault(); | |
e.stopPropagation(); | |
} | |
function listenForDrops(el) { | |
el.ondrop = onDrop; | |
el.ondragstart = noop; | |
el.ondragenter = noop; | |
el.ondragexit = noop; | |
el.ondragend = noop; | |
el.ondragover = e => { | |
e.preventDefault(); | |
e.stopPropagation(); | |
e.dataTransfer.dropEffect = 'copy'; | |
}; | |
} | |
const cdn = 'https://vertol.imgix.net/'; | |
function onDrop(e) { | |
e.preventDefault(); | |
e.stopPropagation(); | |
const files = e.dataTransfer.files; | |
prepareImage(files).then(preview => { | |
e.target.classList.add('vertol--has-img'); | |
const src = e.target.dataset.originalVertol || e.target.src; | |
e.target.dataset.originalVertol = src; | |
e.target.dataset.vertolPublicId = | |
e.target.dataset.vertolPublicId || new URL(src).pathname.slice(1); | |
const publicId = e.target.dataset.vertolPublicId; | |
e.target.src = preview.src; | |
e.target.srcset = preview.src; | |
e.target.classList.add('vertol-img'); | |
renderButtons(e.target, publicId); | |
const file = Object.assign(preview, { publicId }); | |
dispatch({ tag: 'addFileToStaging', payload: file }); | |
}); | |
} | |
function addOutlines(el) { | |
el.classList.add('vertol-outline'); | |
} | |
const targets = $$('[src*="imgix.net"]'); | |
targets.forEach(listenForDrops); | |
targets.forEach(addOutlines); | |
function renderButtons(target, publicId) { | |
if ($(`#btns-${publicId}`)) return; | |
const btns = ` | |
<div class="vertol-btns" id="btns-${publicId}"> | |
<span class="vertol-prog" id="prog-${publicId}"></span> | |
<button | |
class="vertol-btn" | |
data-action="undo" | |
data-target="${publicId}">Undo</button> | |
<button | |
class="vertol-btn" | |
data-action="save" | |
data-target="${publicId}">Save Photo</button> | |
</div> | |
`; | |
target.insertAdjacentHTML('afterend', btns); | |
} | |
function actions(action, publicId) { | |
switch (action) { | |
case 'undo': { | |
const $btns = $(`#btns-${publicId}`); | |
$btns.parentElement.removeChild($btns); | |
const $img = $(`[data-vertol-public-id="${publicId}"]`); | |
$img.src = $img.dataset.originalVertol; | |
$img.srcset = $img.dataset.originalVertol; | |
$img.classList.remove('vertol--has-img'); | |
dispatch({ tag: 'unstage', payload: publicId }); | |
break; | |
} | |
case 'save': { | |
return dispatch({ tag: 'upload', payload: publicId }); | |
} | |
} | |
} | |
document.removeEventListener('click', handleBtnClick); | |
document.addEventListener('click', handleBtnClick); | |
function handleBtnClick(e) { | |
if (e.target.classList.contains('vertol-btn')) { | |
const publicId = e.target.dataset.target; | |
const action = e.target.dataset.action; | |
actions(action, publicId); | |
} | |
} | |
var port = chrome.runtime.connect({ name: 'content' }); | |
port.onMessage.addListener(function(cmd) { | |
switch (cmd.tag) { | |
case 'progress': { | |
const { progress, publicId } = cmd.payload; | |
$(`#prog-${publicId}`).style.width = `${progress}%`; | |
break; | |
} | |
case 'uploadComplete': { | |
const publicId = cmd.payload; | |
const $btns = $(`#btns-${publicId}`); | |
$btns.parentElement.removeChild($btns); | |
break; | |
} | |
case 'seedAssets': { | |
const previews = cmd.payload; | |
previews.forEach(function(preview) { | |
const publicId = preview.publicId; | |
const $el = $(`[src*="imgix.net/${publicId}"]`); | |
const src = $el.dataset.originalVertol || $el.src; | |
$el.dataset.originalVertol = src; | |
$el.dataset.vertolPublicId = | |
$el.dataset.vertolPublicId || new URL(src).pathname.slice(1); | |
$el.src = preview.src; | |
$el.srcset = preview.src; | |
$el.classList.add('vertol-img'); | |
renderButtons($el, publicId); | |
}); | |
break; | |
} | |
} | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment