勾勾册

作者

迦洛翎

+关注

相关代码

主要代码：collection

已对勾选后数据读取错误的问题进行了修复，请及时更新！—— 2021年10月11日 (一) 16:51

	var collectionList = {}, total = {}, checkWithToc = $(".bwiki-collection-toc").length > 0;

	mw.util.addCSS(`
	.bwiki-collection-checkbox.checkbox-default{
		position:relative;
	}
	.bwiki-collection-checkbox.checkbox-default > div{
		position: absolute;
		display: inline-block;
		cursor:pointer;
		width: 30px;
		height: 30px;
		top: 0;
		left: 0;
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+IDwhLS0gQ3JlYXRlZCB3aXRoIFZlY3Rvcm5hdG9yIGZvciBpT1MgKGh0dHA6Ly92ZWN0b3JuYXRvci5pby8pIC0tPjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm87Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kOyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjEwMCUiIHhtbG5zOnZlY3Rvcm5hdG9yPSJodHRwOi8vdmVjdG9ybmF0b3IuaW8iIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDMwMAkzMDAiPgo8ZGVmcy8+CjxnIGlkPSLlm77lsYIgMSIgdmVjdG9ybmF0b3I6bGF5ZXJOYW1lPSLlm77lsYIgMSI+CjxwYXRoIGQ9Ik0tMC42MTI5NzYrMzAwLjI5MkwyOTkuNzY4LTAuMDg5NTYxN0wtMC42MTI5NzYrMC4zMTg1NjVMLTAuNjEyOTc2KzMwMC4yOTJaIiBvcGFjaXR5PSIxIiBmaWxsPSIjMWVlNTcxIi8+CjxwYXRoIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyMi41MTU4IiBkPSJNMzYuMzA2Nis5My42OTM4TDgwLjczNTkrMTQxLjAxOUwxODAuNjYyKzM0LjUyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIG9wYWNpdHk9IjEiIHN0cm9rZS1saW5lam9pbj0ibWl0ZXIiLz4KPC9nPgo8L3N2Zz4K);
		background-size: cover;
		filter: grayscale(1);
		opacity: 0.5;
	}
	.bwiki-collection.checked .bwiki-collection-checkbox.checkbox-default > div{
		filter: grayscale(0);
		opacity: 1;
	}
	`)

	new mw.Api().get({
		"action": "query",
		"format": "json",
		"meta": "userinfo",
		"formatversion": "2",
		"uiprop": "options",
		// "userId": (document.cookie.match(/DedeUserID=([^;]+)/) || [])[1] || ""
	}).then(function(data){
		console.log(data.query.userinfo.options)
		$(".bwiki-collection").each(function(){
			var $item = $(this);
			var listName = $item.attr("data-collectionlist");
			var name = $item.attr("data-collection");
			if(listName === undefined || listName === "") return true;
			if(collectionList[listName] === undefined) {
				collectionList[listName] = data.query.userinfo.options["userjs-collectionList-" + listName] || "";
				total[listName] = 0;
				list = collectionList[listName] = collectionList[listName].split(",")
				if(list[0] === "") list.splice(0,1)
			}
			if(list.indexOf(name) !== -1) {
				$item.addClass("checked");
				$item.attr("data-paramc", "已获取")
				if(checkWithToc) $(".toctext").each(function(){ if($(this).text() === name) $(this).addClass("checked") })
			} else {
				$item.attr("data-paramc", "未获取")
			}
			total[listName]++;
		})

		$.each(total, function(listName, num) {
			$(".bwiki-collection-totalnum-" + listName).text(num);
			$(".bwiki-collection-checknum-" + listName).text(collectionList[listName].length);
		});

		$(".bwiki-collection-checkbox").append("<div>");

		$("body").on("click", ".bwiki-collection-checkbox div", function(){
			var $item = $(this).parents(".bwiki-collection");
			var listName = $item.attr("data-collectionlist");
			var list = collectionList[listName];
			var name = $item.attr("data-collection");
			if(list.indexOf(name) !== -1) {
				list.splice(list.indexOf(name), 1)
				$item.removeClass("checked");
				$item.attr("data-paramc", "未获取")
				if(checkWithToc) $(".toctext").each(function(){ if($(this).text() === name) $(this).removeClass("checked") })
			} else {
				list.push(name);
				$item.addClass("checked");
				$item.attr("data-paramc", "已获取")
				if(checkWithToc) $(".toctext").each(function(){ if($(this).text() === name) $(this).addClass("checked") })
			}
			$(".bwiki-collection-checknum-" + listName).text(list.length);
			changeUserOptions("userjs-collectionList-" + listName, list.join(","))
		})
	})
	

	function changeUserOptions(key, value) {
		new mw.Api().postWithToken( 'csrf', {
			"action": "options",
			"format": "json",
			"optionname": key,
			"optionvalue": value,
		} );
	}

安装方法

全局安装方式

1，本功能已实装于BWIKI功能补充框架 Bikit 中，如安装过该实验性质框架的WIKI则无需额外安装。

2，将collection方法，复制保存到您WIKI的 mediawiki:common.js页面里，进行全局加载。

随用随加载

1，将collection方法（删除第一行Bikit.libs.collection= function () {和最后一行}，仅保存方法），复制保存到您WIKI的 mediawiki:bikit-collection.js页面里，使用模板:JS加载该页面，写法：{{JS|bikit-collection.js}}，在需要使用的页面加载该页面。

2，也可以使用widget来封装，封装方法暂缺。

必要参数

• .bwiki-collection：勾选对象的class
• data-collectionlist：勾选对象所属数据集 （必须英文或拼音）
• data-collection：勾选对象名称
• .bwiki-collection-checkbox：勾选对象内任一子级可标记为响应对象

使用示例

标题目录勾选形式

查看本WIKI上的示例（建议仔细阅读，包含记录方法和输出方法）：勾勾册/目录形式

查看其他WIKI的示例：天地万象 模板:成就

表格勾选形式

查看本WIKI上的示例：勾勾册/表格勾选形式

查看其他WIKI的示例：野生生物一览

其他形式

查看其他WIKI的示例：收藏品

BUG反馈

MediaWiki:Test222