Tumblr Dashboard Showtime

tumblr_dashboard_showtime.user.js

// ==UserScript==
// @name           Tumblr Dashboard Showtime
// @namespace      http://saitamanodoruji.tumblr.com/
// @description    now it's
// @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/dashboard/iframe*
// @exclude        http://www.tumblr.com/blog/*/new/*
// @exclude        http://www.tumblr.com/blog/*/reblog/*
// @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/dashboard/iframe*
// @exclude        https://www.tumblr.com/blog/*/new/*
// @exclude        https://www.tumblr.com/blog/*/reblog/*
// @version        0.0.11.20140815
// @author         saitamanodoruji
// ==/UserScript==

(function(){
  const SHOWTIME_KEY = 'TumblrDashboardShowtime.displayByDefault';

  function $(selectors, context) {
    return Array.prototype.slice.call((context||document).querySelectorAll(selectors), 0);
  }

  // 投稿時刻を取得して avatar の下に div で置く関数
  function init(node) {
    if (node.nodeName !== 'LI' || node.id == 'new_post_buttons') return;
    var anchor_permalink = $('a.post_permalink', node)[0];
    if (!anchor_permalink) return;
    var timestamp = anchor_permalink.title
      .replace(/(?:View post|投稿を確認する) - /, '')
      .replace(/^(\D{3})\S*/, '$1');
    var d = document.createElement('div');
    d.textContent = timestamp;
    d.setAttribute('class', 'gm_tumblr_dashboard_showtime');
    $('div.post_avatar', node)[0].appendChild(d);
  }

  // 投稿時刻の div のための CSS
  GM_addStyle([
    'div.gm_tumblr_dashboard_showtime {',
      'color: rgba(255, 255, 255, 0.5);',
      'text-align: center;',
      'top: 64px;',
      'position: absolute;',
      'width: 64px;',
      'margin-top: 5px;',
    '}',
    '.its_not_showtime div.gm_tumblr_dashboard_showtime {',
      'display: none;',
    '}',
  ].join(''));

  // 投稿時刻の表示を on/off する関数, ol#posts の class を書き換える
  function toggleDisplay() {
    $('#posts')[0].setAttribute('class', $('#posts')[0].getAttribute('class').split(' ').map(function(e) {
      if (e == 'its_not_showtime') return 'its_showtime';
      else if (e == 'its_showtime') return 'its_not_showtime';
    }).join(' '));
  }

  // 投稿時刻を初期状態で表示するかどうかの設定を取得して ol#posts の class 属性値に反映させる
  var olPostsClassValue;
  try {
    olPostsClassValue = $('#posts')[0].getAttribute('class');
    if (olPostsClassValue === null) olPostsClassValue = '';
  } catch(e) {
    olPostsClassValue = '';
  }
  if (GM_getValue(SHOWTIME_KEY, true) === true) {
    $('#posts')[0].setAttribute('class', [olPostsClassValue.replace(/^\s*/, ''), "its_showtime"].join(' '));
  } else if (GM_getValue(SHOWTIME_KEY, true) === false) {
    $('#posts')[0].setAttribute('class', [olPostsClassValue.replace(/^\s*/, ''), "its_not_showtime"].join(' '));
  }

  // 1 ページ目に対する操作を行う
  $('li.post_container').forEach(init);

  // 2 ページ目以降
  document.addEventListener('DOMNodeInserted', function(e) { init(e.target) }, false);

  // userscript command で時刻表示を on/off (ページをロードしたときの最初の表示状態を切り替え)
  GM_registerMenuCommand('Tumblr Dashboard Showtime - default ', function() {
    if (GM_getValue(SHOWTIME_KEY, true) === true) {
      GM_setValue(SHOWTIME_KEY, false);
    } else if (GM_getValue(SHOWTIME_KEY, true) === false) {
      GM_setValue(SHOWTIME_KEY, true);
    }
    alert(SHOWTIME_KEY + ' has just been toggled to ' +
      GM_getValue(SHOWTIME_KEY, true)) + '.';
  }, 's');

  // ショートカットキー Shift + Q で時刻表示を on/off (リロードせずに現在の表示状態を切り替え, 最初の表示状態の設定は変えない)
  // Minibuffer があれば使う
  var boot = function() {
    sharedObject.Minibuffer.addShortcutkey({
      key: "Q",
      description: 'TumblrDashboardShowtime.toggleDisplay',
      command: function() { toggleDisplay() }
    });
    window.removeEventListener('keydown', toggle, true);
  }

  var boot_ = function() {
    window.addEventListener('keydown', toggle, true);
  }

  var toggle = function(evt) {
    if (evt.keyCode == 81 && evt.shiftKey) toggleDisplay();
  }

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

})();