Raw Source Toggle Dropdown

• Minified Source

nikolay-borzov / JoyReactor Download Button

// ==UserScript==
// @name         JoyReactor Download Button
// @version      1.2.0
// @description  Adds download buttton to images
// @namespace    https://github.com/nikolay-borzov
// @author       nikolay-borzov
// @license      MIT
// @icon         http://joyreactor.cc/favicon.ico
// @homepageURL  https://github.com/nikolay-borzov/user-scripts
// @homepage     https://github.com/nikolay-borzov/user-scripts
// @supportURL   https://github.com/nikolay-borzov/user-scripts/issues
// @match        http://joyreactor.cc/*
// @match        http://joyreactor.com/*
// @noframes
// @run-at       document-end
// @grant        GM_addStyle
// ==/UserScript==

;(function () {
  let addStyle = (css) => {
    addStyle =
      'GM_addStyle' in window
        ? GM_addStyle // eslint-disable-line camelcase
        : (css) => {
            const head = document.querySelectorAll('head')[0]
            const style = document.createElement('style')

            style.innerHTML = css
            head.append(style)

            return style
          }

    return addStyle(css)
  }

  const dom = {
    on(parent, eventName, selector, callback) {
      parent.addEventListener(eventName, function (event) {
        const matchingChild = event.target.closest(selector)

        if (matchingChild) {
          callback(matchingChild)
        }
      })
    },
  }

  const css_248z =
    "@keyframes ripple{0%{opacity:1;transform:scale(0)}20%{opacity:1;transform:scale(25)}to{opacity:0;transform:scale(40)}}.image{display:inline-block;position:relative}.download-link{background:url(\"data:image/svg+xml;charset=utf-8,%3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E\") #333;background-size:contain;border-radius:0 0 7px 7px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;height:35px;opacity:0;overflow:hidden;position:absolute;right:60px;top:10px;transition:all .3s cubic-bezier(.25,.8,.25,1);width:35px}.download-link:hover{box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.download-link:after{background:#ffffff4d;border-radius:100%;content:\"\";height:5px;left:0;opacity:0;position:absolute;top:0;transform:scale(1) translate(-50%);transform-origin:50% 50%;width:100%}.download-link:focus:not(:active):after{animation:ripple 1s ease-out}.image:hover .download-link{opacity:1}"

  addStyle(css_248z)

  const CLASSES = {
    processed: 'js-has-download-button',
  }

  function createDownloadLink(imgContainer) {
    imgContainer.classList.add(CLASSES.processed)

    const gifLink = imgContainer.querySelector('a.video_gif_source')

    if (gifLink) {
      gifLink.setAttribute('download', '')

      return
    }

    let imgURL = ''
    const imgLink = imgContainer.querySelector('a')

    if (imgLink) {
      imgURL = imgLink.href
    } else {
      const img = imgContainer.querySelector('img')

      if (img) {
        imgURL = img.src
      }
    }

    if (!imgURL) {
      return
    }

    const link = document.createElement('a')

    link.classList.add('download-link')
    link.setAttribute('href', imgURL)
    link.setAttribute('download', '')

    imgContainer.append(link)
  }

  dom.on(
    document.body,
    'mouseover',
    `.image:not(.${CLASSES.processed})`,
    createDownloadLink
  )
})()