pixiv_darami.js

// ==UserScript==
// @name        pixiv_darami.js
// @author      edvakf
// @namespace   http://d.hatena.ne.jp/edvakf/
// @include     http://www.pixiv.net/new_illust.php?darami
// ==/UserScript==

// pixiv の新着イラストをダラダラ見るためのスクリプトです。
// 使い方:
//   このスクリプトをインストールして、http://www.pixiv.net/new_illust.php?darami を開きます。
//   あとは毎分自動的に新着イラストが更新されます。
//   wowo さんの作っている pixiv.js と合わせて使うと高いダラ見効果が得られます。
// ショートカット:
//   j : 下へ
//   k : 上へ
//   u : イラストを消す

(function () {
  // disable pisiv.js's auto scrolling
  document.addEventListener(
    'PixivJSInitialize',
    function() {
      opera.pixiv_js.conf.scroll = 0;
    }, false);

  if (location.href === 'http://www.pixiv.net/new_illust.php?darami') {
    document.documentElement.style.display = 'none';
    opera.addEventListener('BeforeEvent.DOMContentLoaded', function() {
      // re-styling
      addCSS(
        '.darami_list {margin:0; padding:0;}' +
        '.darami_list ul {margin:10px; width: 175px}' +
        '.darami_list li {width:175px; margin:5px; background-color:white; text-align:center}' +
        '.darami_list li.focused {background-color:#FEF5CA; border: #8B7D6B solid 1px}' +
        '.darami_list a {color:black;}' +
        '.darami_list a:hover {background-color:#FEF5CA}' +
        '.darami_list img {display:block; margin:0 auto; padding:2px;}'
      );

      // make viewer
      var div = document.querySelector('.search_a2_result').cloneNode(true);
      div.className = 'darami_list';
      forEach(document.body.children, function(elem) {
        elem.parentNode.removeChild(elem);
      });
      document.body.appendChild(div);
      document.documentElement.style.display = 'block';

      forEach(document.querySelectorAll('.darami_list li'), function(li) {
        var id = li.querySelector('a').href.match(/illust_id=\d+/);
        li.id = id.toString().replace('=', '-');
      });
      window.addEventListener('load', function() {
        if (window.AutoPagerize) AutoPagerize.AutoPagerObject.terminate();
      }, false);

      // auto-fetch newer illusts
      setInterval(fetch, 60000);

      function fetch(page) {
        if (!page) page = 1;
        if (page >= 5) return;
        var url = location.href.replace(/([?&])p=\d+(&)?/, function($0, $1, $2) {return $1 === '?' ? '?' : $2 ? '&' : ''});
        url += url.indexOf('?') >= 0 ? '&' : '?';
        url += 'p=' + page;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onload = function() {
          if (addIllusts(xhr.responseText)) {
            fetch(page + 1);
          };
        };
        xhr.send();
      }

      function addIllusts(html) {
        var html = html.match(/<div class="search_a2_result[\s\S]*?<\/div>/);
        var div = document.createElement('div');
        div.innerHTML = html;
        var fetchNext = true;
        var list = div.getElementsByTagName('li');
        var ul = document.querySelector('.darami_list ul');
        forEach(list, function(li) {
          var id = li.querySelector('a').href.match(/illust_id=\d+/).toString().replace('=', '-');
          if (document.getElementById(id)) {
            fetchNext = false;
            li.parentNode.removeChild(li);
          } else {
            li.id = id;
            ul.appendChild(li);
          }
        });
        return fetchNext;
      }

      // keyboard handling
      var keys = {
        106 : nextIllust, // j
        107 : prevIllust, // k
        117 : removeIllust, // u
      };

      function nextIllust() {
        var cur = document.querySelector('.darami_list li.focused');
        if (!cur) {
          var next = document.querySelector('.darami_list li');
        } else {
          var list = document.querySelectorAll('.darami_list li');
          var i = indexOf(list, cur);
          var next = list[i + 1];
          cur.className = cur.className.replace(/\s*focused\s*/, ' ');
          if (!next) next = cur;
        }
        next.className += ' focused';
        into_viewport(next);
        focus(next.querySelector('a'));
      }

      function prevIllust() {
        var cur = document.querySelector('.darami_list li.focused');
        var list = document.querySelectorAll('.darami_list li');
        if (!cur) {
          var prev = list[list.length - 1];
        } else {
          var i = indexOf(list, cur);
          var prev = list[i - 1];
          cur.className = cur.className.replace(/\s*focused\s*/, ' ');
          if (!prev) prev = cur;
        }
        prev.className += ' focused';
        into_viewport(prev);
        focus(prev.querySelector('a'));
      }

      function removeIllust() {
        var cur = document.querySelector('.darami_list li.focused');
        if (!cur) return;
        var list = document.querySelectorAll('.darami_list li');
        var i = indexOf(list, cur);
        var next = list[i + 1];
        if (!next) next = list[i - 1];
        if (!next) return;
        cur.parentNode.removeChild(cur);
        next.className += ' focused';
        into_viewport(next);
        focus(next.querySelector('a'));
      }

      window.addEventListener('keypress', function(e) {
        if (keys[e.keyCode] && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
          e.preventDefault();
          keys[e.keyCode]();
        }
      }, false);
    }, false);
  }

  function addCSS(css) {
    var style = document.createElement('style');
    style.textContent = css;
    document.getElementsByTagName('head')[0].appendChild(style);
  }

  function forEach(list, fn) {
    Array.prototype.forEach.call(list, fn);
  }

  function indexOf(list, searchElement, fromIndex) {
    return Array.prototype.indexOf.call(list, searchElement, fromIndex);
  }

  function focus(elem) {
    if (!elem.id) elem.id = 'HaH-temp';
    var a = document.createElement('a');
    a.href = '#';
    a.style = 'position:fixed;width:1px;height:1px;top:0;left:0;nav-right:#' + elem.id;
    document.body.appendChild(a);
    a.focus();
    document.moveFocusRight();
    document.body.removeChild(a);
    if (elem.id === 'HaH-temp') elem.id = '';
  }

  // bring an element into viewport (simplified version of http://d.hatena.ne.jp/edvakf/20100202/1265094445)
  function into_viewport(elem) {
    var origin = document.documentElement;
    var outer = {left: 0, right: window.innerWidth, top: 0, bottom: window.innerHeight};
    var inner = elem.getBoundingClientRect();
    var x = origin.scrollLeft;
    var y = origin.scrollTop;

    x += (inner.left + inner.right) / 2 - (outer.left + outer.right) / 2;
    y += (inner.top + inner.bottom) / 2 - (outer.top + outer.bottom) / 2;

    origin.scrollLeft = x; origin.scrollTop = y;
  }
})();