Hextomino

ニコニコ動画以外のは書かないのか?

懲りずにニコニコ用ユーザースクリプト。 普段は動画の詳細情報を隠しているけどたまに見たくなって、でもいちいちボタンをクリックするのってめんどくさい、なんて思ったことありませんか?無いですか。そうですか。

とりあえずそんな手間を省いてくれるスクリプトを書いてみました。

NicovideoDescriptionSlider.user.js

毎度ネーミングセンスが感じられないスクリプト名だけど、そこは目をつむってやってください。 Opera9.63とFirefox3.0.5で動作確認。 ニコニコ動画のバージョンはββ。 Operaだとちょっと動きがぎこちない。 Javascript実行速度の差が出ちゃってますね。

スクリプトを有効にすると常に詳細情報が隠れた状態になります。 動画タイトルのあたりにマウスカーソルを持って行くと、詳細情報を表示、タグのあたりに持って行くと隠します。 常に投稿日時を表示するスクリプトと共存可。

今まで書いたスクリプトをまとめました。 こちら。

ソースコードは続きから。

マウスイベントをっキャッチして、タイマーで詳細情報表示部分の高さを変化させてます。 説明の英語が適当なのは仕様です。

// ==UserScript==
// @name        Nicovideo Description Slider
// @version     0.1
// @author      Handle
// @namespace   http://hextomino.net/
// @description Popup video description when hover
// @include     http://www.nicovideo.jp/watch/*
// ==/UserScript==

(function() {
	var abr = document.getElementById('des_1');
	var des = document.getElementById('des_2');
	var tag = document.getElementById('video_tags');
	var timer;
	var speed = 30;
	
	// get default height
	des.style.display = 'block';
	var desHeight = des.offsetHeight;
	abr.style.display = 'block';
	var abrHeight = abr.offsetHeight;
	
	// hide description
	des.style.display = 'none';
	abr.style.display = 'block';
	
	// hide button
		var imgs = des.getElementsByTagName('img');
	for(var i = 0; i < imgs.length; i++) {
		if(imgs[i].getAttribute('src') == 'http://res.nicovideo.jp/img/watch/btn_menu_close.gif') {
			imgs[i].parentNode.style.display = 'none';
			break;
		}
	}
	abr.getElementsByTagName('img')[0].parentNode.style.display = 'none';
	
	des.style.overflow = 'hidden';
	
	// set event
	abr.addEventListener('mouseover', show, true);
	tag.addEventListener('mouseover', hide, true);
	
	// show description
	function show(evt) {
		des.style.height = abrHeight;
		des.style.display = 'block';
		abr.style.display = 'none';
		clearInterval(timer);
		timer = setInterval(inc, 30);
	}
	
	// hide description
	function hide(evt) {
		clearInterval(timer);
		timer = setInterval(dec, 30);
	}
	
	// increase height
	function inc() {
		var now = des.style.height.slice(0, -2);
		if(now > desHeight - speed) {
			des.style.height = desHeight + 'px';
			clearInterval(timer);
		}
		else {
			des.style.height = (Number(now) + speed) + 'px';
		}
	}
	
	// decrease height
	function dec() {
		var now = des.style.height.slice(0, -2);
		if(now < abrHeight + speed) {
			des.style.display = 'none';
			abr.style.display = 'block';
			clearInterval(timer);
		}
		else {
			des.style.height = (Number(now) - speed) + 'px';
		}
	}
})();