Plurk paste

/**
 * 噗浪表符整理器 v0.9.2 (20210204)
 * ＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 * 利用噗浪本身的JS/HTML砌成，以便批量管理表符
 * 僅限於桌面版使用
 *
 * 功能：
 * - 利用噗首或噗內留言中的表符去新增/移動/刪除表符
 * - 顯示表符總數
 * - 刪除群組內的所有表符（清空群組／刪除群組）
 *
 * 備註：
 * 1. 程式沒有加入60/1000的上限檢查（也沒進行測試），表符庫爆掉沒有提示，請自行檢查
 * 2. 成功與錯誤都沒有訊息提示
 * 3. 此script重度依賴噗浪桌面版的JS/HTML，日後噗浪改版可能會無法使用（例如沒有反應）
 */
javascript:(function(){
	
	window.custPlugin = window.custPlugin || {};
	window.custPlugin.emo = {
		getGroupIdByEmo: function(url){
			var hash = this.getHashFromURL(url);
			var allEmos = EmoticonCustom.getEmoticons();
			for (var grpId in allEmos){
				for (var emo of allEmos[grpId]){
					if (hash == emo['hash_id']){
						return grpId;
					}
				}
			}
			return -1;
		},
		
		getEmoByUrl: function(url){
			var hash = this.getHashFromURL(url);
			var allEmos = EmoticonCustom.getEmoticons();
			for (var grpId in allEmos){
				for (var emo of allEmos[grpId]){
				  if (hash == emo['hash_id']){
					  return emo;
				  }
				}
			}
			return null;
		},
		
		isEmoExists: function(url){
			return this.getGroupIdByEmo(url) > 0;
		},
		
		isEmoInGroup: function(url, grpId){
			var resultGroupId = this.getGroupIdByEmo(url);
			return resultGroupId > 0 && resultGroupId == grpId;
		},
		
		getHashFromURL: function(url){
			if (url !== undefined && url.length > 0){
				return url.substring(url.lastIndexOf('/')+1, url.indexOf('_'));
			}
		},
		
		getEmoTotalCount: function(){
			var total = 0;
			for (let grp of EmoticonCustom.getGroups()){
				total += EmoticonCustom.getEmoticons(grp.id).length;
			}
			return total;
		},
		
		refreshEmoticon: function(){
			console.info('Refresh EmoticonCustom...');
			window.EmoticonCustom.load(true);
			window.setTimeout(function () {
				custPlugin.emo.initEmoPanel();
			}, 2000);
		},
		

		addEmo: async function(hashId, groupId, keyword){
			var postResult = await $.post("/Emoticons/add",{form_token:top.SiteState.getToken(), hash_id: hashId, keyword: keyword, group_id: groupId}).promise();
			return postResult;
		},
		
		removeEmo: async function(hashId){
			var postResult = await $.post("/Emoticons/remove",{token:top.SiteState.getToken(), hash_id:hashId}).promise();
			return postResult;
		},
		
		setEmoGroup: async function(hashId, groupId){
			var postResult = await $.post("/EmoticonManager2/setGroup",{token:top.SiteState.getToken(), hash_id:hashId, group_id: groupId}).promise();
			return postResult;
		},
		
		removeGroup: async function(groupId){
			var postResult = await $.post("/EmoticonManager2/revokeGroup",{token:top.SiteState.getToken(), group_id: groupId}).promise();
			return postResult;
		},
		
		batchAddEmo: async function(emosUrl, groupId){
			if (emosUrl.length > 0) {
				for (const url of emosUrl) {
					if (EmoticonCustom.isFull()){
						console.info('Emoticon has reached max limit. Add emoticon is not allowed.');
						break;
					}
					let resp = await this.addEmo(this.getHashFromURL(url), groupId, '');
					console.info(resp.keyword + ' is added.');
				}
				custPlugin.emo.refreshEmoticon();
			}
		},
		
		batchDeleteEmoByIds: async function(emosUrl){
			if (emosUrl.length > 0) {
				for (const url of emosUrl) {
					let resp = await this.removeEmo(this.getHashFromURL(url));
					console.info(this.getEmoByUrl(url).keyword + ' is deleted.');
				}
				custPlugin.emo.refreshEmoticon();
			}
		},

		batchDeleteEmoByGrpId: function(isDelGroup){
			var emoGroupId = this.getSelectedEmoGrpId();
			var _self=this;
			if (emoGroupId !== undefined && emoGroupId > 1){
				$.post("/EmoticonManager/getUserEmoticons",{token:top.SiteState.getToken()}).done(async function(emos){
					if (emos[emoGroupId] !== undefined){
						for (const e of (emos[emoGroupId])) {
							await _self.removeEmo(e.hash_id);
							console.info(e.keyword + ' is deleted.');
						}
					}
					if (isDelGroup){
						await _self.removeGroup(emoGroupId);
						console.info('Group [' + emoGroupId + '] is deleted.');
					}
					custPlugin.emo.refreshEmoticon();
				});
			}
		},
		
		batchSetEmoGroup: async function(emosUrl, groupId){
			if (emosUrl.length > 0) {
				for (const url of emosUrl) {
					let resp = await this.setEmoGroup(this.getHashFromURL(url), groupId);
					console.info(this.getEmoByUrl(url).keyword + ' is moved to group=' + groupId);
				}
				custPlugin.emo.refreshEmoticon();
			}
		},
		
		getSelectedEmoGrpId: function(){
			return $('#emoticon-tabs li.current[emo-group-type="custom"]').attr('emo-group-id');
		},
		
		isCustomEmoGrpSelected: function(){
			var emoGroupId = this.getSelectedCustomEmoGrpId();
			return emoGroupId !== undefined && emoGroupId > 0;
		},
		
		getCounterNode: function(){
			var counterNode = document.querySelector('#emoCounter');
			if (counterNode == undefined){
				var newNode = document.createElement("DIV");
				newNode.id = "emoCounter";
				var postNode = document.querySelector('#emoticon-selector-holder .manager-button');
				postNode.parentNode.insertBefore(newNode, postNode);
				$(newNode).css({
					position : "absolute",
					right: "150px",
					top: "12px",
					lineHeight: "26px"
				});
				counterNode = newNode;
			}
			return counterNode;
		},

		updateCounterNode: function(groupType, groupId){
			var counterNode = this.getCounterNode();
			var html = '';
			if (groupType == 'custom'){
				html = '群組' + groupId + '：' + EmoticonCustom.getEmoticons(groupId).length + '/' + this.getEmoTotalCount();
			}
			else{
				html = this.getEmoTotalCount();
			}
			$(counterNode).html(html);
		},
		
		getBatchDeleteNode: function(){
			var deleteBtnNode = document.querySelector('#emoGrpBatchDelete');
			if (deleteBtnNode == undefined){
				var newNode = document.createElement("DIV");
				newNode.id = "emoGrpBatchDelete";
				var postNode = document.querySelector('#emoticon-selector-holder .manager-button');
				postNode.parentNode.insertBefore(newNode, postNode);
				$(newNode).css({
					position : "absolute",
					right: "90px",
					top: "11px",
					lineHeight: "26px",
					padding: "0 5px",
					background: "#434343",
					color: "#FFF",
					borderRadius: "4px",
					textAlign: "center",
					fontSize: "13px",
					width: "42px",
				});
				$(newNode).html("清空");
				deleteBtnNode = newNode;
			}
			return deleteBtnNode;
		},
		
		getBatchDeleteWithGrpNode: function(){
			var deleteBtnWithGrpNode = document.querySelector('#emoGrpBatchDeleteWithGrp');
			if (deleteBtnWithGrpNode == undefined){
				var newNode = document.createElement("DIV");
				newNode.id = "emoGrpBatchDeleteWithGrp";
				var postNode = document.querySelector('#emoticon-selector-holder .manager-button');
				postNode.parentNode.insertBefore(newNode, postNode);
				$(newNode).css({
					position : "absolute",
					right: "45px",
					top: "11px",
					lineHeight: "26px",
					padding: "0 5px",
					background: "#434343",
					color: "#FFF",
					borderRadius: "4px",
					textAlign: "center",
					fontSize: "13px",
					width: "42px",
				});
				$(newNode).html("刪除");
				deleteBtnWithGrpNode = newNode;
			}
			return deleteBtnWithGrpNode;
		},
		
		updateBatchDeleteNode: function(groupType, groupId){
			var deleteEmoBtn = this.getBatchDeleteNode();
			if (groupType == 'custom'){
				$(deleteEmoBtn).off("click");
				$(deleteEmoBtn).on("click", function() {
					if (confirm('確定刪除選擇群組的所有表符？')){
						custPlugin.emo.batchDeleteEmoByGrpId(false);
					}
				});
				$(deleteEmoBtn).css({
					opacity: '1',
					cursor: "pointer",
				});
			}
			else{
				$(deleteEmoBtn).off("click");
				$(deleteEmoBtn).css({
					opacity:'0.3',
					cursor: "default",
				});
			}
		},
		
		updateBatchDeleteWithGrpNode: function(groupType, groupId){
			var deleteEmoWithGrpBtn = this.getBatchDeleteWithGrpNode();
			if (groupType == 'custom' && groupId > 1){
				$(deleteEmoWithGrpBtn).off("click");
				$(deleteEmoWithGrpBtn).on("click", function() {
					if (confirm('確定刪除選擇群組的所有表符，並刪除群組？')){
						custPlugin.emo.batchDeleteEmoByGrpId(true);
					}
				});
				$(deleteEmoWithGrpBtn).css({
					opacity: '1',
					cursor: "pointer",
				});
			}
			else{
				$(deleteEmoWithGrpBtn).off("click");
				$(deleteEmoWithGrpBtn).css({
					opacity:'0.3',
					cursor: "default",
				});
			}
		},
		
		updateEmoPanel: function(grpType, grpId){
			if (grpType == undefined && grpId == undefined){
				grpType = $('#emoticon-tabs li.current').attr('emo-group-type');
				grpId = $('#emoticon-tabs li.current').attr('emo-group-id');
			}
			this.updateCounterNode(grpType, grpId);
			this.updateBatchDeleteNode(grpType, grpId);
			this.updateBatchDeleteWithGrpNode(grpType, grpId);
		},
		
		initEmoPanel: function(){
			if (document.querySelector('#emoticon-tabs li.current') != undefined){
				$('#emoticon-tabs li[emo-group-type]').on( "click", function() {
					let grpType = $(this).attr('emo-group-type');
					let grpId = $(this).attr('emo-group-id');
					custPlugin.emo.updateEmoPanel(grpType, grpId);
				});
				
				custPlugin.emo.updateEmoPanel();
			}
		},
		
		addEmoPanelToHeader: function(){
			var eleClass = "#permanent-holder .divplurk";
			var ele = document.querySelector(eleClass);
			
			if (ele == undefined){
				eleClass = ".cbox_plurk_holder .divplurk";
				ele = document.querySelector(eleClass);
			}
			
			if (ele == undefined){
				eleClass = ".plurk_box.display";
				ele = document.querySelector(eleClass);
			}
			
			if (ele != undefined && document.querySelector(eleClass + " .emoPanelInHeader") == undefined){
				var containerNode = $( "<span class='emoPanelInHeader'></span>" );
				var addEmoNode = $( "<span class='emoBtn addEmo' title='新增或移動表符'>⭐</span>" );
				var removeEmoNode = $( "<span class='emoBtn removeEmo' title='刪除表符'>❌</span>" );
				var emos = Object.values(document.querySelectorAll(eleClass + ' .text_holder img.emoticon_my'));
				
				addEmoNode.on("click", function(evt) {
					evt.stopPropagation();
					custPlugin.emo.showEmoGroupPopup(this, emos, 'add');
				});
				removeEmoNode.on("click", function(evt) {
					evt.stopPropagation();
					custPlugin.emo.showEmoGroupPopup(this, emos, 'delete');
				});
				
				containerNode.append(addEmoNode);
				containerNode.append(removeEmoNode);
				
				$(eleClass + ' .time').append(containerNode);
				
				$(eleClass + ' .emoPanelInHeader .emoBtn').css({
					padding: "0 2px",
					margin: "0 2px",
					background: "transparent",
					color: "#FFF",
					borderRadius: "4px",
					cursor: "pointer",
					textAlign: "center",
					fontSize: "13px",
					fontWeight: "600",
					display: "inline-block",
					width: "24px",
					opacity: emos.length > 0 ? "1" : "0.3",
				});
				
				$(eleClass + ' .emoPanelInHeader .emoBtn').hover(function() {
					$(this).css("background-color","#b6e2dc");
				}, function(){
					$(this).css("background-color","transparent");
				});
			}
		},
		
		addEmoPanelToComment: function(){
			var node = document.querySelector('#emoPanelInComment');
			if (node == undefined){
				let respManagerEle = document.querySelector('.show-response-manager');
				if (respManagerEle != null){
					var containerNode = $( "<span id='emoPanelInComment'></span>" );
					var addEmoNode = $( "<span class='emoBtn addEmo' title='新增或移動表符'>⭐</span>" );
					var removeEmoNode = $( "<span class='emoBtn removeEmo' title='刪除表符'>❌</span>" );
					var emos = Object.values(document.querySelectorAll('.show-response-manager .text_holder img.emoticon_my'));
					
					addEmoNode.on("click", function() {
						custPlugin.emo.showEmoGroupPopup(this, emos, 'add');
					});
					removeEmoNode.on("click", function() {
						custPlugin.emo.showEmoGroupPopup(this, emos, 'delete');
					});
					
					containerNode.append(addEmoNode);
					containerNode.append(removeEmoNode);
					
					$('.show-response-manager .time').after(containerNode);
					
					$('#emoPanelInComment .emoBtn').css({
						padding: "0 2px",
						margin: "0 2px",
						background: "transparent",
						color: "#FFF",
						borderRadius: "4px",
						cursor: "pointer",
						textAlign: "center",
						fontSize: "13px",
						fontWeight: "600",
						display: "inline-block",
						width: "24px",
						opacity: emos.length > 0 ? "1" : "0.3",
					});
					
					$('#emoPanelInComment .emoBtn').hover(function() {
						$(this).css("background-color","#b6e2dc");
					}, function(){
						$(this).css("background-color","transparent");
					});
				}
			}
		},
		
		showEmoGroupPopup: function(fromEle, emos, usage){
			var ele = $('<div id="custEmoGrpPanel" class="emo-adder"><div class="emo-adder-panel"><div class="emo-groups"><div class="emo-message"></div></div></div></div>');

			if (emos.length == 0) {
				$('div.emo-message', ele).append('未選擇留言／留言沒有表符');
			}
			else{
				var emoUrls = Array.from(new Set(emos.map(e => e.src)));
				
				if (usage == 'add'){
					$('div.emo-message', ele).append('留言內有 ' + emoUrls.length + ' 個表符<br />');
					
					var ul = $('<ul></ul>');
					for (var grp of EmoticonCustom.getGroups()){
						var li = $('<li emo-group-id="' + grp['id'] + '"><img src="' + grp['thumbnail'] + '"/></li>');
						li.on('click', function(evt){
							evt.stopPropagation();
							var groupId = $(this).attr('emo-group-id');
							var toAddEmos = emoUrls.filter(s => !custPlugin.emo.isEmoExists(s));
							var toMoveEmos = emoUrls.filter(s => custPlugin.emo.isEmoExists(s) && !custPlugin.emo.isEmoInGroup(s, groupId));
							console.info(toAddEmos);
							if (toAddEmos.length > 0){
								custPlugin.emo.batchAddEmo(toAddEmos, groupId);
							}
							if (toMoveEmos.length > 0){
								custPlugin.emo.batchSetEmoGroup(toMoveEmos, groupId);
							}
							$('#custEmoGrpPanel').remove();
						});
						ul.append(li);
					}
					$('div .emo-groups', ele).append(ul);
				}
				else if (usage == 'delete'){
					$('div.emo-message', ele).append('確定刪除留言內包含的 ' + emoUrls.length + ' 個表符？');
					
					var toDelEmos = emoUrls.filter(s => custPlugin.emo.isEmoExists(s));
					
					var buttonPanel = $('<div class="buttons" />');
					var delBtn = $('<div class="button small-button pif-delete">刪除</div>');
					delBtn.on('click', function(evt){
						evt.stopPropagation();
						if (toDelEmos.length > 0){
							custPlugin.emo.batchDeleteEmoByIds(toDelEmos);
						}
						$('#custEmoGrpPanel').remove();
					});
					buttonPanel.append(delBtn);
					
					var cancelBtn = $('<div class="add-button button small-button pif-cancel">取消</div>');
					cancelBtn.on('click', function(evt){
						evt.stopPropagation();
						$('#custEmoGrpPanel').remove();
					});
					buttonPanel.append(cancelBtn);
					
					$('div.emo-groups', ele).append(buttonPanel);
				}
			}

			var popView = new PopView({
			  content: ele,
			  exClass: 'pop-tooltip',
			  direction: 'bottom',
			  keep: false,
			  hoverArea: true,
			});
			popView.showFrom(fromEle);
		}
	};
	
	if (!document.querySelector('#emoticon-tabs li.current')){
		EmoticonSelector.toggleFrom();
	}
	new MutationObserver(function (mutations, me) {
		if (document.querySelector('#emoticon-tabs li.current')){
			custPlugin.emo.initEmoPanel();
			me.disconnect();
		}
	}).observe(document, {childList: true, subtree: true });
	
	new MutationObserver(function (mutations, me) {
		if (document.getElementsByClassName('show-response-manager').length > 0){
			custPlugin.emo.addEmoPanelToComment();
		}
		if (!document.getElementById('permanent-holder') || !document.querySelector('#permanent-holder .divplurk .emoPanelInHeader')){
			custPlugin.emo.addEmoPanelToHeader();
		}
	}).observe(document, {childList: true, subtree: true });
	
})()