littlebtc/nicobar.js

## nicobar.js
jetpack.future.import('slideBar');

var html = <>
<html lang="ja">
<head>
  <style type="text/css">
  <![CDATA[
    body {
      background: white;
      font-size: 12px;
      margin: 0;
    }
    h1 {
      margin: 0 0 10px 0;
      padding: 2px;
      background: #999999;
      color: white;
      font-size: 120%;
    }
    .rankitem {
      position: relative;
      display: block;
      border: 1px solid #666666;
      background: #EEEEEE;
      color: #333333;
      text-decoration: none;
      -moz-border-radius: 10px;
      clear: both;
      margin: 5px 5px;
      padding: 5px 5px 5px 35px;
      min-height: 35px;
    }
    .rankitem img {
      width: 47px;
      height: 35px;
      float: left;
      margin-right: 5px;
    }
    .rankitem .video_title {
      font-size: 100%;
    }
    .rankitem .rank {
      position: absolute;
      left: 5px;
      top: 5px;
      font-weight: bold;
      opacity: 0.5;
      font-size: 13px;
    }
    .clear {
      clear: both;
    }
  ]]>
  </style>
  <base target="_blank" /> <!-- Dirty Hack, very dirty -->
</head>
<body>
  <h1>NicoBar</h1>
  <div id="navigation">

  </div>
  <div id="container">
  </div>
</body>
</html>
</>.toXMLString();


var _doc = null;

function loadUI(slider) {
  _doc = slider.contentDocument;
  loadRankingRSS();
}

function loadRankingRSS(url) {
  if (!_doc) { return; }
  $.ajax({
    url: "http://www.nicovideo.jp/ranking/fav/daily/all",
    dataType: "xml",
    data: { "rss": "2.0" },
    beforeSend: function(xhr) {
      /* It is strange, but when it is set, nicovideo will give us HTML :( */
      xhr.setRequestHeader("X-Requested-With", "");
    },
    success: readRankingRSS,
    error: function(xhr, stat, err) { console.log("XHR Error:" + stat); }
  });
}

function readRankingRSS(data, stat, xhr) {
  if (!_doc) { return; }
  /* Document Fragment */
  var fragment = _doc.createDocumentFragment();
  $("item", data).each(function(index) {
    var $node = $(this);
    /* Dirty way to parse the title / rank */
    var orig_title = $node.find("title").text();
    var orig_title_array = orig_title.split('\uFF1A');
    var video_rank = parseInt(orig_title_array[0].match(/[0-9]+/)[0], 10);
    orig_title_array.shift();
    video_title = orig_title_array.join('\uFF1A');
    var url = $node.find("link").text();
    var html_data = $node.find("description").text();
    var $data = $(html_data, _doc);
    thumb_url = $data.find("img").attr("src");
    /* Go! */
    var element = _doc.createElement("a");
    $(element).html('<img><strong class="video_title"></strong><span class="rank"></span>').addClass('rankitem').attr('href', url);
    $("strong", element).text(video_title);
    $("img", element).attr('src', thumb_url);
    $(".rank", element).text(video_rank);
    fragment.appendChild(element);
  });
  $('#container', _doc).append(fragment);
}

jetpack.slideBar.append({
  width: 300,
  icon: 'http://www.nicovideo.jp/favicon.ico',
  html: html,
  onReady: function(slider) { loadUI(slider); }
}
);
	jetpack.future.import('slideBar');

	var html = <>
	<html lang="ja">
	<head>
	<style type="text/css">
	<![CDATA[
	body {
	background: white;
	font-size: 12px;
	margin: 0;
	}
	h1 {
	margin: 0 0 10px 0;
	padding: 2px;
	background: #999999;
	color: white;
	font-size: 120%;
	}
	.rankitem {
	position: relative;
	display: block;
	border: 1px solid #666666;
	background: #EEEEEE;
	color: #333333;
	text-decoration: none;
	-moz-border-radius: 10px;
	clear: both;
	margin: 5px 5px;
	padding: 5px 5px 5px 35px;
	min-height: 35px;
	}
	.rankitem img {
	width: 47px;
	height: 35px;
	float: left;
	margin-right: 5px;
	}
	.rankitem .video_title {
	font-size: 100%;
	}
	.rankitem .rank {
	position: absolute;
	left: 5px;
	top: 5px;
	font-weight: bold;
	opacity: 0.5;
	font-size: 13px;
	}
	.clear {
	clear: both;
	}
	]]>
	</style>
	<base target="_blank" /> <!-- Dirty Hack, very dirty -->
	</head>
	<body>
	<h1>NicoBar</h1>
	<div id="navigation">

	</div>
	<div id="container">
	</div>
	</body>
	</html>
	</>.toXMLString();


	var _doc = null;

	function loadUI(slider) {
	_doc = slider.contentDocument;
	loadRankingRSS();
	}

	function loadRankingRSS(url) {
	if (!_doc) { return; }
	$.ajax({
	url: "http://www.nicovideo.jp/ranking/fav/daily/all",
	dataType: "xml",
	data: { "rss": "2.0" },
	beforeSend: function(xhr) {
	/* It is strange, but when it is set, nicovideo will give us HTML :( */
	xhr.setRequestHeader("X-Requested-With", "");
	},
	success: readRankingRSS,
	error: function(xhr, stat, err) { console.log("XHR Error:" + stat); }
	});
	}

	function readRankingRSS(data, stat, xhr) {
	if (!_doc) { return; }
	/* Document Fragment */
	var fragment = _doc.createDocumentFragment();
	$("item", data).each(function(index) {
	var $node = $(this);
	/* Dirty way to parse the title / rank */
	var orig_title = $node.find("title").text();
	var orig_title_array = orig_title.split('\uFF1A');
	var video_rank = parseInt(orig_title_array[0].match(/[0-9]+/)[0], 10);
	orig_title_array.shift();
	video_title = orig_title_array.join('\uFF1A');
	var url = $node.find("link").text();
	var html_data = $node.find("description").text();
	var $data = $(html_data, _doc);
	thumb_url = $data.find("img").attr("src");
	/* Go! */
	var element = _doc.createElement("a");
	$(element).html('<img><strong class="video_title"></strong><span class="rank"></span>').addClass('rankitem').attr('href', url);
	$("strong", element).text(video_title);
	$("img", element).attr('src', thumb_url);
	$(".rank", element).text(video_rank);
	fragment.appendChild(element);
	});
	$('#container', _doc).append(fragment);
	}

	jetpack.slideBar.append({
	width: 300,
	icon: 'http://www.nicovideo.jp/favicon.ico',
	html: html,
	onReady: function(slider) { loadUI(slider); }
	}
	);