twitter_embed_image_x.user.js

// ==UserScript==
// @name      twitter embed image x
// @namespace http://twitter.com/taizooo/
// @include   http://twitter.com/*
// @include   https://twitter.com/*
// @require   https://gist.github.com/198443.txt
// ==/UserScript==
// ref: twitter embed image https://gist.github.com/635006

var SITEINFO = [
  /*
  {
    site: 'site name',
    url:  'url css selector on twitter',
    img:  'image css selector on photo site',
  },
  */
  /*
  {
    site: 'atnd',
    url:  'a[href^="http://atnd.org/events/"]',
    img:  '.events_show_img img',
  },
  */
  {
    site: 'addonsmozilla',
    url:  'a[href^="https://addons.mozilla.org/"]',
    img:  '.screenshot img',
  },
  {
    site: 'cookpad',
    url:  'a[href^="http://cookpad.com/recipe/"]',
    img:  '#main-photo img',
  },
  {
    site: 'hatenafotolife',
    url:  'a[href^="http://f.hatena.ne.jp/"]',
    img:  'img.foto',
  },
  {
    site: 'amazon',
    url:  'a[href^="http://www.amazon"]',
    img:  'img#prodImage, img.prod_image_selector',
  },
  {
    site: 'amazon',
    url:  'a[href^="http://amzn.to/"]',
    img:  'img#prodImage, img.prod_image_selector',
  },
  {
    site: 'mobypicture',
    url:  'a[href^="http://moby.to/"]',
    img:  'img#main_picture',
  },
  /*
  {
    site: 'instagram',
    url:  'a[href^="http://instagr.am/"]',
    img:  'img.photo',
  },
  */
  {
    site: 'movapic',
    url:  'a[href^="http://movapic.com/"]',
    img:  'img.image',
  },
  {
    site: 'tumblr',
    url:  'a[href^="http://tumblr.com/x"]',
    img:  'img[src*="/photo/1280/"], img[src*="o1_500.jpg"], img[src*="o1_400.jpg"], img[src*="o1_250.jpg"], img[src*="o1_100.jpg"], img[src*="o1_500.png"], img[src*="o1_400.png"], img[src*="o1_250.png"], img[src*="o1_100.png"], img[src*="o1_500.gif"], img[src*="o1_400.gif"], img[src*="o1_250.gif"], img[src*="o1_100.gif"]',
  },
  {
    site: 'tumblr',
    url:  'a[href*="tumblr.com/post/"]',
    img:  'img[src*="/photo/1280/"], img[src*="o1_500.jpg"], img[src*="o1_400.jpg"], img[src*="o1_250.jpg"], img[src*="o1_100.jpg"], img[src*="o1_500.png"], img[src*="o1_400.png"], img[src*="o1_250.png"], img[src*="o1_100.png"], img[src*="o1_500.gif"], img[src*="o1_400.gif"], img[src*="o1_250.gif"], img[src*="o1_100.gif"]',
  },
  {
    site: 'posterous',
    url:  'a[href^="http://post.ly/"]',
    img:  'img#mainImage, .post-content img',
  },
  {
    site: 'wikipedia',
    url:  'a[href*="wikipedia.org/wiki/"]',
    img:  'img.thumbimage, #file img',
  },
  {
    site: 'law_image',
    url:  'a[href$=".jpg"], a[href$=".png"], a[href$=".gif"], a[href$=".JPG"], a[href$=".PNG"], a[href$=".GIF"]',
    img:  '',
  },
  {
    site: 'svg_image',
    url:  'a[href$=".svg"], a[href$=".SVG"]',
    img:  ''
  },
]

var showicon = function(node, classname){
  if (node.querySelector('span.'+classname)) {
    return
  }
  var ei = node.querySelector('.extra-icons')
  var span1 = document.createElement('span')
  span1.className = 'inlinemedia-icons'
  var span2 = document.createElement('span')
  span2.className = 'media '
  span2.className += classname
  span1.appendChild(span2)
  ei.appendChild(span1)
}
function resolvePath(path, base) {
    if (path.match(/^https?:\/\//)) {
        return path
    }
    if (path.match(/^[^\/]/)) {
        return base.replace(/[^/]+$/, '') + path
    }
    else {
        return base.replace(/([^/]+:\/\/[^/]+)\/.*/, '\$1') + path
    }
}
var showimg = function(node, imgsrc, imgurl, classname){
  //if (node.querySelector('a[src^="'+imgurl+'"]')) {
  if (node.querySelector('img[src^="'+imgsrc+'"]')) {
    return
  }
  var div = document.createElement('div')
  div.className = 'embed '
  div.className += classname
  var img = document.createElement('img')
  img.src = imgsrc
  var a = document.createElement('a')
  a.href = imgurl
  a.target = '_blank'
  a.appendChild(img)
  div.appendChild(a)
  node.appendChild(div)
}

var showsvg = function(node, svgsrc, svgurl, classname){
  //if (node.querySelector('a[data^="'+svgurl+'"]')) {
  if (node.querySelector('object[data^="'+svgsrc+'"]')) {
    return
  }
  var div = document.createElement('div')
  div.className = 'embed '
  div.className += classname
  var obj = document.createElement('object')
  obj.data = svgsrc
  var a = document.createElement('a')
  a.href = svgurl
  a.target = '_blank'
  a.appendChild(obj)
  div.appendChild(a)
  node.appendChild(div)
}

// from autopagerize
function resolvePath(path, base) {
  if (path.match(/^https?:\/\//)) {
      return path
  }
  if (path.match(/^[^\/]/)) {
      return base.replace(/[^/]+$/, '') + path
  }
  else {
      return base.replace(/([^/]+:\/\/[^/]+)\/.*/, '\$1') + path
  }
}

document.addEventListener("DOMNodeInserted", function(e) {
  var elm = e.target

  //set icon
  var itms
  if ((itms = elm.querySelectorAll('.stream-item-content'))) {
    SITEINFO.forEach(function(info){
      for (var i = 0; i < itms.length; i++) {
        var itm = itms[i]
        if (itm.querySelector(info.url)) {
          showicon(itm,'photo')
        }
      }
    })
  }

  //view image on details panel
  var tweet
  if ((tweet = elm.querySelector('.details-pane-tweet, .permalink-tweet'))) {
    setTimeout(function(){
      SITEINFO.forEach(function(info){
        var tweetmedia = document.querySelector('.tweet-media')
        if (tweet.querySelectorAll(info.url)) {
          var as = tweet.querySelectorAll(info.url)
          //for jpg, png, gif
          if (info.url.match(/(?:\.jpg|\.png|\.gif)/)) {
            for (var i = 0; i < as.length; i++) {
              showimg(tweetmedia, as[i], as[i], info.site)
            }
          }
          //for svg
          else if (info.url.match(/\.svg/)) {
            for (var i = 0; i < as.length; i++) {
              showsvg(tweetmedia, as[i], as[i], info.site)
            }
          }
          //for photo site
          else {
            for (var i = 0; i < as.length; i++) {
              (function xhr(){
                console.log('req-'+as[i].href)
                var opt = {
                  method: 'GET',
                  url: as[i].href,
                  headers : { },
                  onload: function(res) {
                    var doc = createDocumentFromString(res.responseText)
                    var instsrc = doc.querySelector(info.img).src
                    console.log('instsrc-'+instsrc)
                    if ( instsrc.length == 0)
                      return;
                    var insturl = res.finalUrl
                    console.log('insturl-'+insturl)
                    iinstsrc = resolvePath(instsrc, insturl)
                    console.log('iinstsrc-'+iinstsrc)
                    showimg(tweetmedia, instsrc, insturl, info.site)
                    //showimg(tweetmedia, instsrc, iinsturl, info.site)
                    console.log('show-'+instsrc)
                  }
                }
                setTimeout(function(){
                  GM_xmlhttpRequest(opt)
                },0)
              })()
            }
          }
        }
      })
    },10)
  }

}, false)