はてなブックマークの◯◯Usersをスライダーで調節するユーザースクリプト

Slider-Interface-of-Hatena-Bookmark's-Threshold.user.js

// ==UserScript==
// @name           Slider-Interface-of-Hatena-Bookmark's-Threshold
// @namespace      http://d.hatena.ne.jp/Cside
// @include        http://b.hatena.ne.jp/*
// ==/UserScript==

function inputAndCount(mode) {
	var threshold;
	var loc = location.href;

	if (loc.match(/threshold=([0-9]+)/)) {
		threshold = loc.match(/threshold=([0-9]+)/)[1];
	}

	var input = document.createElement('input');

	input.id            = 'threshold';
	input.type          = 'range';
	input.value         = threshold ? threshold: 1;
	input.style.margin  = '0px 10px';
	input.style.display = 'inline-block';

	switch (mode) {
		case 'threshold' :
			input.setAttribute('min', '1');
			input.setAttribute('max', '10');
			input.setAttribute('step', '1');
			break;
		case 'selector' :
			input.setAttribute('min',   '0');
			input.setAttribute('max', '100');
			input.setAttribute('step', '10');
			break;
	}

	var count = document.createElement('span');

	count.id               = 'count';
	count.style.display    = 'inline-block';
	count.verticalAlign    = 'middle';
	count.innerText        = threshold ? threshold + 'users' : '?' + 'users';
	count.style.textAlign  = 'center';
	count.style.fontWeight = 'bold';
	count.style.color      = '#0D3A8C';
	count.style.font       = 'Arialfont: normal normal normal 100%/1.4 Arial, Helvetica, sans-serif';
	count.style.margin     = '0px 10px';

	var div = document.createElement('div');

	switch (mode) {
		case 'threshold' :
			div.style.margin = '5px 5px 15px 15px';
			break;
		case 'selector' :
			div.style.margin = '20px 10px 0px 20px';
			break;
	}

	div.appendChild(input);
	div.appendChild(count);

	return div;
}


(function () {
    var mode = '';
	var thrBotton;

	if ( document.querySelector('ul.threshold') ) {
		mode = 'threshold';
		thrBotton = document.querySelector('ul.threshold')
	} else if ( document.querySelector('ul.selector') ) {
		mode = 'selector';
		thrBotton = document.querySelector('ul.selector');
	}

	if ( mode ) {
		var tmp   = inputAndCount(mode);
		var input = tmp.childNodes[0];
		var count = tmp.childNodes[1];

		thrBotton.parentNode.replaceChild(tmp, thrBotton);

		var countLoc   = document.querySelector('span#count');
		var loadingImg = document.createElement('img');
		loadingImg.src = 'http://b.hatena.ne.jp/images/loading.gif';

		input.onchange = function (ev) {
			count.innerText = input.value + 'users';
		};

		input.onmouseup = function (ev) {
			countLoc.parentNode.insertBefore(loadingImg, countLoc.nextSibling);

			var loc = location.href;
			var nextLoc;

			nextLoc = loc.match(/threshold=([0-9]+)/)
				? loc.replace(/threshold=([0-9]+)/, 'threshold=' + input.value)
				: loc.match(/\?/)
					? loc + '&threshold=' + input.value
					: loc + '?threshold=' + input.value;

			location.href = nextLoc;
		};
	}
})();