Skip to content

Instantly share code, notes, and snippets.

@imdwit

imdwit/content.js Secret

Created Aug 24, 2019
Embed
What would you like to do?
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
You can’t perform that action at this time.