【用户脚本】增强V2EX浏览体验

README.md

一个油猴脚本

功能：

• 快速预览
• 关闭预览时，平滑滚动回焦点
• 查看相关回复

注意：这是一份fork后经我（Oaker）修改的代码，源代码中通常提供了原作品链接

一份原创的响应式布局样式

使V2EX在较窄窗口宽度下，亦能满足基本的浏览需求

v2ex-fury.user.js

// ==UserScript==
// @name         V2EX-Fury
// @namespace    https://www.v2ex.com/t/196692
// @version      0.2
//   
//   0.2 更新  
//   新增：1. 定时刷新 2. 加载动态图
//   改动：滚动延时由50延长到500
//   
// @description  功能：在帖子列表页预览帖子内容和评论
// @description  原出处 https://www.v2ex.com/t/196692 
// @author       原作者：https://github.com/openorc
// @description  本脚本是由 Oaker（https://github.com/cyio）修改的版本，原作者版本已有较大变化
// @description  1. 修改样式表现，增强阅读体验) 2. 可在Chrome下安装到Tampermonkey使用
// @match        https://gist.github.com/cyio/0574875ac2e1792f8ed5/raw/6d28140d5fbb4f053d2f171aa15350e3a389abd2/v2ex-fury.user.js
// @grant        none
// @run-at document-end
// @include *://*.v2ex.com/*
// @include *://v2ex.com/*
// ==/UserScript==
//定时刷新(5000=5秒)
setInterval("location.reload()", 2400000);

/*
  v2ex.com.js for chrome extension dotjs, have fun, :)
*/
var loading = 'data:image/png;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==';
var map = {};
var isTopicLinkClick = false;
var isTopicSectionSelect = false;

var comment_template = [
'<div id="r_2127958" class="cell">',
  '<table cellpadding="0" cellspacing="0" border="0" width="100%">',
    '<tbody><tr>',
      '<td width="48" valign="top" align="center"><img src="_{{_avatar_normal_}}_" class="avatar" border="0" align="default"></td>',
      '<td width="10" valign="top"></td>',
      '<td width="auto" valign="top" align="left"><div class="fr"><span class="no">_{{_seq_}}_</span></div>',
          '<div class="sep3"></div>',
          '<strong><a href="/member/_{{_username_}}_" class="dark">_{{_username_}}_</a></strong>&nbsp; &nbsp;<span class="fade small">_{{_dt_}}_</span> <span class="small fade"></span>',
          '<div class="sep5"></div>',
          '<div class="reply_content">_{{_content_rendered_}}_</div>',
      '</td>',
    '</tr>',
  '</tbody></table>',
'</div>',
].join('');

function replace(src, map) {
	var rc = src;
	for (var key in map) {
		rc = rc.replace(new RegExp("_{{_" + key + "_}}_", "g"), map[key]);
	}
	return rc;
}

function getTopicId(url) {
	return (/\/t\/(\d+)/i.test(url) ? RegExp.$1 : undefined);
}

function getTS(s) {
	var rc = '';
	if (s < 60) {
		rc = Math.floor(s) + '秒前';
	} else if (s >= 60 && s < 3600) {
		rc = Math.floor(s / 60) + '分钟前';
	} else if (s >= 3600 && s < 3600 * 24) {
		rc = Math.floor(s / 3600) + '小时前';
	} else if (s >= 3600 * 24) {
		rc = Math.floor(s / (3600 * 24)) + '天前';
	}
	return rc;
}

function closeContent(host, tid) {
	map[tid] = {
		status: 0,
		host: host
	};
	host.find('.injection').remove();
	$('html, body').animate({
		scrollTop: host.offset().top
	}, 500);
}

function showContent(host, tid) {
	for (var id in map) {
		if (map[id].status == 1) closeContent(map[id].host, id);
	}

	$('html, body').animate({
		scrollTop: host.offset().top
	}, 500);

	map[tid] = {
		status: 1,
		host: host
	};

    var wrapper = $('<div class="injection" style="margin:20px 5px 20px;background-color: #FCFCF2;box-shadow: 0 0 15px rgba(110, 103, 103, 0.55);-webkit-transition: 1s;transition: 1s;overflow: hidden;"></div>');
	var content = $('<div class="topic_content markdown_body" style="margin: 10px 0;padding: 10px;"><div style="text-align:center;padding:20px"><img src="' + loading + '"/></div></div>');
	var comments = $('<div class="" style="border-top:1px solid #ccc; background-color:#f9f9f9;"></div>');

	wrapper.append(content);
	wrapper.append(comments);
	host.append(wrapper);

	$.get('/api/topics/show.json?id=' + tid, function (data) {
		content.html(data[0].content_rendered);
	});

	$.get('/api/replies/show.json?topic_id=' + tid, function (data) {
		for (var n = 0, len = data.length; n < len; ++n) {
			var kv = {
				content_rendered: data[n].content_rendered,
				username: data[n].member.username,
				avatar_normal: data[n].member.avatar_normal,
				cid: data[n].id,
				uid: data[n].member.id,
				dt: getTS(Date.now() / 1000 - data[n].created),
				seq: n + 1,
			};
			comments.append(replace(comment_template, kv));
			host.find('.imgly').css('max-width', '530px');
		}
	});
}

$('.cell a').click(function (ev) {
	isTopicLinkClick = true;
}); // for fix a click event

$('div.cell.item').select(function (evn) {
	isTopicSectionSelect = true;
}); // for fix a click event

$('div.cell.item').click(function () {
	if (isTopicLinkClick) {
		isTopicLinkClick = false;
		return;
	}
	else if(isTopicSectionSelect) {
		isTopicSectionSelect = false;
		return;
	}	
	var self = $(this);
	var tid = getTopicId(self.find('.item_title a').attr('href'));
	if (map[tid] && map[tid].status == 1) {
		closeContent(self, tid);
	} else {
		showContent(self, tid);
	}
});

v2ex.responsive.user.css

img[src="https://cdn.v2ex.co/site/logo@2x.png?m=1346064962"] {
	border: 1px solid #000000!important;
}

@media (max-width: 930px) {
	#Search {
		display: none;
	}
	.content {
		width: 100%;
	}
	.mle {
		width: 98%!important;
	}
	body {
		min-width: 100px!important;
	}
}

@media (max-width: 630px) {
	.content {
		width: 100%;
	}
	.avatar,
	#Rightbar,
	DIV[class="content"] > DIV > TABLE[width="100%"] > TBODY > TR > TD[width="570"][align="right"]:nth-child(3) > [class="top"] {
		display: none;
	}
	#Main {
		width: auto;
		margin: 0;
	}
	td:nth-child(1) {
		width: 0
	}
}

@media (max-width: 450px) {
	.content {
		width: 100%;
	}
}

.item:hover {
	cursor: pointer;
	background-color: #F5F8FA;
}