content.js

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;
      }
    }
  });
})();