Tumblr Dashboard High-Res Photos with Minibuffer Commands

tumblr_dashboard_high-res_photos_with_minibuffer_commands.user.js

// ==UserScript==
// @name           Tumblr Dashboard High-Res Photos with Minibuffer Commands
// @version        0.0.4.26
// @update         2016-10-19
// @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*
// @exclude        http://www.tumblr.com/blog/*/activity
// @exclude        http://www.tumblr.com/blog/*/settings
// @include        https://www.tumblr.com/dashboard*
// @include        https://www.tumblr.com/show/*
// @include        https://www.tumblr.com/likes*
// @include        https://www.tumblr.com/liked/by/*
// @include        https://www.tumblr.com/tagged*
// @include        https://www.tumblr.com/blog*
// @exclude        https://www.tumblr.com/blog/*/activity*
// @exclude        https://www.tumblr.com/blog/*/settings
// @contributer    taizooo https://gist.github.com/taizooo/635884
// @contributer    saitamanodoruji https://gist.github.com/saitamanodoruji/612508
// @grant          GM_openInTab
// @grant          GM_addStyle
// @updateURL      https://gist.github.com/saitamanodoruji/612670/raw/tumblr_dashboard_high-res_photos_with_minibuffer_commands.user.js
// @downloadURL    https://gist.github.com/saitamanodoruji/612670/raw/tumblr_dashboard_high-res_photos_with_minibuffer_commands.user.js
// ==/UserScript==

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

// added features:
//   -make High-Res links on posts
//   -Minibuffer shortcut key 'n' to toggle replaced High-Res
//   -Minibuffer shortcut key 'H' to open High-Res
//   -Minibuffer shortcut key 'u' to toggle overlayed High-Res

(function(){
  const HIGH_RES_BY_DEFAULT     = true
  const LIMIT_REPLACED_HR_SIZE  = true
  const LIMIT_OVERLAYED_HR_SIZE = true
  const SHOW_HIGH_RES_LINK      = true
  const YOSERU                  = true
  const WAIT_CHECK_REPLACE      = 3000  // msec
  const YOSERU_PX               = 12

  var highRes = function(li, makelink, checkReplace) {
    var img = li.querySelector('.image'),
        re = /_540(\.(?:jpg|png|gif))$/
    if (img === null || ((img.width && img.width < 540) && (img.height && img.height < 750))) return
    if (img.src.match(re)) {
      var highResPath = (img.id && /^pano_/.test(img.id)) ?
                        img.src.replace(/\.jpg$/, 'h$&') :
                        img.src.replace(re, '_1280$1')
      img.src = highResPath
    } else {
      var highResPath = img.src
    }
    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 ) + '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 (postMedia.offsetTop == nextElem.offsetTop) {
          // 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))$/, '_540$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 < 540) && (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(/_540(\.(?: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'
      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)
    }
  }

  // MinibufferTumblrHighResOpenCommand
  var boot = function() {
    with (sharedObject.Minibuffer) {
      addShortcutkey({
        key: "H",
        description: 'tumblr.openHighRes',
        command: function() {
          execute('pinned-or-current-node | tumblr.openHighRes')
        }
      })

      addShortcutkey({
        key: "n",
        description: 'tumblr.toggleHighResReplace',
        command: function() {
          execute('pinned-or-current-node | tumblr.toggleHighResReplace')
        }
      })

      addShortcutkey({
        key: 'u',
        description: 'tumblr.toggleHighResOverlay',
        command: function() {
          execute('current-node | tumblr.toggleHighResOverlay')
        }
      })

      addCommand({
        name: "tumblr.openHighRes",
        command: function(stdin){
          stdin.forEach(function(s) {
            GM_openInTab(s.querySelector('.gm-high-res-photo-link').href, true)
          })
        }
      })

      addCommand({
        name: "tumblr.toggleHighResReplace",
        command: function(stdin){
          stdin.forEach(toggleHighResReplace)
        }
      })

      addCommand({
        name: 'tumblr.toggleHighResOverlay',
        command: function(stdin){
          toggleHighResOverlay(stdin[0])
        }
      })

    }
  }

  if (SHOW_HIGH_RES_LINK) {
    GM_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(''))
  } else {
    GM_addStyle('a.gm-high-res-photo-link { display: none; }')
  }

  // yoseru
  if (YOSERU) {
    var container = document.getElementsByClassName('l-container')[0]
    if (container) container.style.marginLeft = '-' + YOSERU_PX + 'px'
  }

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

  if (sharedObject.Minibuffer) {
    boot()
  } else {
    window.addEventListener('GM_MinibufferLoaded', boot, false)
  }
})()