Tumblr Dashboard High-Res Photos with Keyboard Shortcuts

tumblr_dashboard_high-res_photos_with_keyboard_shortcuts.user.js

// ==UserScript==
// @id             Tumblr Dashboard High-Res Photos with Keyboard Shortcuts
// @name           Tumblr Dashboard High-Res Photos with Keyboard Shortcuts
// @version        0.0.1.8
// @update         2013-06-10
// @namespace      http://saitamanodoruji.tumblr.com/
// @include        http://www.tumblr.com/dashboard*
// @include        http://www.tumblr.com/show/*
// @include        http://www.tumblr.com/likes/*
// @include        http://www.tumblr.com/liked/by/*
// @include        http://www.tumblr.com/tagged/*
// @include        http://www.tumblr.com/blog/*
// @run-at         document-end
// @contributer    taizooo https://gist.github.com/taizooo/635884
// @contributer    saitamanodoruji https://gist.github.com/saitamanodoruji/4990119
// @updateURL      https://gist.github.com/saitamanodoruji/4990119/raw/tumblr_dashboard_high-res_photos_with_keyboard_shortcuts.user.js
// @downloadURL    https://gist.github.com/saitamanodoruji/4990119/raw/tumblr_dashboard_high-res_photos_with_keyboard_shortcuts.user.js
// ==/UserScript==

// origin: http://userscripts.org/scripts/review/43621 by cxx

// shortcut key 'I' : toggle replaced High-res
// shortcut key 'U' : open High-res
// shortcut key 'u' : toggle overlayed High-res

(function() {
  const HIGH_RES_BY_DEFAULT     = true
  const LIMIT_REPLACED_HR_SIZE  = true  // fit large photo to window size
  const LIMIT_OVERLAYED_HR_SIZE = true
  const SHOW_HIGH_RES_LINK      = false
  const WAIT_CHECK_REPLACE      = 3000  // msec

  var addStyle = function(cssStr) {
    var styleElem = document.createElement('style')
    styleElem.type = 'text/css'
    styleElem.innerHTML = cssStr
    document.querySelector('head').appendChild(styleElem)
  }

  var highRes = function(li, makelink, checkReplace) {
    var img = li.querySelector('.image'),
        re = /_500(\.(?:jpg|png|gif))$/
    if (img === null || !img.src.match(re)
        || ((img.width && img.width < 500) && (img.height && img.height < 750))) return
    var highResPath = (img.id && /^pano_/.test(img.id)) ?
                      img.src.replace(/\.jpg$/, 'h$&') :
                      img.src.replace(re, '_1280$1')
    img.src = highResPath
    img.style.width = img.style.height = 'auto'
    img.className += ' gm-replaced-high-res-photo'
    if (LIMIT_REPLACED_HR_SIZE) {
      var postContent = li.querySelector('.post_content')
      img.style.maxWidth  = ( document.documentElement.clientWidth
                              - postContent.offsetLeft
                              - li.offsetLeft ) + 'px'
      img.style.maxHeight = ( document.documentElement.clientHeight
                              - postContent.offsetTop - 7 ) + 'px'
    } else {
      img.style.maxWidth = img.style.maxHeight = 'none'
    }
    if (makelink) {
      var postNotesInner = li.querySelector('div.post_notes_inner'),
          hrlink = document.createElement('a')
      hrlink.href = highResPath
      hrlink.target = '_blank'
      hrlink.className = 'gm-high-res-photo-link'
      hrlink.innerHTML = '<div>High-Res</div>'
      postNotesInner.appendChild(hrlink)
    }
    if (checkReplace) {
      window.setTimeout(function() {
        var postMedia = li.querySelector('.post_media'),
            nextElem = li.querySelector('.post_body') || li.querySelector('.post_tags') || li.querySelector('.post_footer')
        if (nextElem.offsetTop - postMedia.offsetTop <= 30) {
          // undo replace
          toggleHighResReplace(li)
        }
      }, WAIT_CHECK_REPLACE)
    }
  }

  var toggleHighResReplace = function(node) {
    var hrimg = node.querySelector('.gm-replaced-high-res-photo')
    if (hrimg === null) {
      highRes(node)
    } else {
      hrimg.src = (hrimg.id && /^pano_/.test(hrimg.id)) ?
                  hrimg.src.replace(/h(\.jpg)$/, '$1') :
                  hrimg.src.replace(/_1280(\.(?:jpg|png|gif))$/, '_500$1')
      hrimg.className = hrimg.className.replace(' gm-replaced-high-res-photo', '')
      hrimg.style.width = hrimg.getAttribute('width') + 'px'
      hrimg.style.height = hrimg.getAttribute('height') + 'px'
      if (LIMIT_REPLACED_HR_SIZE) {
        hrimg.style.maxWidth = ''
        hrimg.style.maxHeight = ''
      }
    }
  }

  var toggleHighResOverlay = function(node) {
    var img = node.querySelector('.image'),
        hrdivCurrent = document.body.querySelector('.gm-overlayed-highres-photo')

    if (hrdivCurrent) {
      var hrimgCurrent = hrdivCurrent.querySelector('img')
      if (hrimgCurrent) { var hrimgCurrentSrc = hrimgCurrent.src }
      document.body.removeChild(hrdivCurrent)
    }

    if (img === null
        || ((img.width && img.width < 500) && (img.height && img.height < 750))) return

    var highResPath = (img.id && /^pano_/.test(img.id)) ?
                        img.src.replace(/_(?:5|12)00\.jpg$/, '_500h.jpg') :
                        img.src.replace(/_500(\.(?:jpg|png|gif))$/, '_1280$1')

    if ( !hrimgCurrentSrc || highResPath != hrimgCurrentSrc) {
      var hrimg = document.createElement('img'),
          hrdiv = document.createElement('div')
      hrimg.src = highResPath
      hrimg.style.width = hrimg.style.height = 'auto'
      if (LIMIT_OVERLAYED_HR_SIZE) {
        hrimg.style.maxWidth = document.documentElement.clientWidth + 'px'
        hrimg.style.maxHeight = document.documentElement.clientHeight + 'px'
      }
      hrdiv.className = 'gm-overlayed-highres-photo'
      hrdiv.style.position = 'fixed'
      hrdiv.style.top = '0'
      hrdiv.style.right = '0'
      hrdiv.style.zIndex = '512'
      hrdiv.appendChild(hrimg)
      document.body.appendChild(hrdiv)
    }
  }

  var keydownHandler = function(e) {
    if (e.altKey || e.ctrlKey || e.metaKey) return
    var code = e.charCode || e.keyCode,
        // copied from Tumblr Tornado
        scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
        li = Array.prototype.slice.call(
          document.querySelectorAll('li.post_container:not(#new_post_buttons)')
        ).filter(function(elm) {
          return Math.abs(scrollTop - (elm.offsetTop - 7)) < 8
        })[0]
    if (code == 73 && e.shiftKey) {
      // key I
      toggleHighResReplace(li)
    } else if (code == 85 && e.shiftKey) {
      // key U
      var highResLink = li.querySelector('.gm-high-res-photo-link')
      if (highResLink) window.open(highResLink.href)
    } else if (code == 85 && !e.shiftKey) {
      // key u
      toggleHighResOverlay(li)
    }
  }

  if (SHOW_HIGH_RES_LINK) {
    addStyle([
      'a.gm-high-res-photo-link {',
        'cursor: pointer;',
        'margin-left: 0;',
        'margin-right: 2px;',
        'font-size: 13px;',
        'float: left;',
        'color: #A8B1BA;',
        'text-decoration: none;',
      '}',
      'a.gm-high-res-photo-link:hover {',
        'color: #8D97A2;',
      '}',
      '.post_full .post_notes_label {',
        'margin-right: 15px;',
      '}',
    ].join('\n'))
  } else {
    addStyle('a.gm-high-res-photo-link { display: none; }')
  }

  document.addEventListener('keydown', keydownHandler, false)

  if (HIGH_RES_BY_DEFAULT) {
    Array.prototype.slice.call(
      document.querySelectorAll('li.post_container')
    ).forEach(function(li) { highRes(li, true, true) })
    document.body.addEventListener('DOMNodeInserted',function(evt) {
      if ( /(?:^| )post_container(?:$| )/.test(evt.target.className) ) { highRes(evt.target, true, true) }
    }, false)
  }
})()