☰

Cache Manager for Tieba Ueditor

基於貼吧內建之文字備份系統的管理器

  1. // ==UserScript==
  2. // @name Cache Manager for Tieba Ueditor
  3. // @version 0.7
  4. // @description 基於貼吧內建之文字備份系統的管理器
  5. // @include http://tieba.baidu.com/*
  6. // @author Shyangs
  7. // @grant none
  8. // @require http://cdn.jsdelivr.net/localforage/1.2.0/localforage.min.js
  9. // @icon http://tb.himg.baidu.com/sys/portrait/item/4daf736879616e6773fc03
  10. // @namespace https://github.com/shyangs#cm4tu
  11. // @license GPLv3; http://opensource.org/licenses/gpl-3.0.html
  12. // ==/UserScript==
  13. // localStorage_key: localStorage_value
  14. // draft-66891597-635137-0: 1449481471315|<p><br></p>
  15. // draft-{{user_id}}-{{forum_id}}-{{thread_id}}: {{備份時間，1969年1月1日00:00:00起算的毫秒數}}|{{備份內容}}
  16.  
  17. ;(function(w, $, _, reg){
  18.  
  19.  
  20. if(w.top !== w.self)return;
  21. // Not in a frame
  22.  
  23. var opacity = 0.85;
  24. var opacityImg = 0.4;
  25. var previewTextLength = 36;
  26.  
  27. var bBgImg;
  28. var fOption = function(){
  29. 	var arr = [['', Number.MAX_VALUE+'|<p>(请选择一个备份)</p>']];
  30. 	var str = '';
  31. 	var key;
  32. 	for(key in localStorage){
  33. 		reg.test(key) && arr.push([key, localStorage.getItem(key)]);
  34. 	}
  35. 	arr.sort(function(a, b){
  36. 		return Number(b[1].split('|')[0]) - Number(a[1].split('|')[0]);
  37. 	});
  38. 	arr.forEach(function(item){
  39. 		str += '<option value="'+ item[0] +'">'+
  40. 			_.escape(item[1].split('|')[1].substr(0, previewTextLength+7).slice(3, -4)) +
  41. 			'</option>';
  42. 	});
  43. 	return str;
  44. };
  45. var fCurrentDraftKey = function(){
  46. 	var el = $('#cm4tu-ui-select')[0];
  47. 	return el.getElementsByTagName('option')[el.selectedIndex].value;	
  48. };
  49. var fInsertBackupText = function(selector){
  50. 	var key = fCurrentDraftKey();
  51. 	var sHTML = key?localStorage.getItem(key).split('|')[1]:'';
  52. 	$(selector).html(sHTML);
  53. };
  54. var fUIupdate = function(){
  55. 	$('#cm4tu-ui-select').replaceWith('<select style="width: 100%" id="cm4tu-ui-select">'+fOption()+'</select>');
  56. 	$("#cm4tu-ui-select").change(function(){fInsertBackupText('#cm4tu-ui-textarea');});
  57. 	fInsertBackupText('#cm4tu-ui-textarea');
  58. };
  59. var fMain = function($toolbar){
  60. 	$('<div id="cm4tu-tbbtn" class="edui-btn edui-btn-name-list"><div>▤ 暂存</div></div>')
  61. 		.css({
  62. 			'cursor': 'pointer',
  63. 			'margin': '0 0 0 8px',
  64. 			'color': '#3163B6'})
  65. 		.appendTo($toolbar)
  66. 		.click(function(){
  67. 			var $ui = $('#cm4tu-ui');
  68. 			if($ui.length === 0){
  69. 				$('<div id="cm4tu-ui" '+(bBgImg?'class="cm4tu-ui-bgImg"':'')+'>'+
  70. 				'<div id="cm4tu-ui-title" style="text-align: center; text-decoration: underline;">Cache Manager for Tieba Ueditor<a id="cm4tu-ui-close" href="###" style="background-color: rgba(242, 217, 227, .8); float: right;">ｘ</a></div>'+
  71. 				'<div><select style="width: 100%" id="cm4tu-ui-select">'+fOption()+'</select></div>'+
  72. 				'<div style="padding-top: 10px;"><div style="width: 100%; height: 250px; outline: gray solid thin; overflow:auto;" id="cm4tu-ui-textarea"  contenteditable="false"></div></div>'+
  73. 				'<div id="cm4tu-ui-bottom"><div id="cm4tu-btn-insert" class="div-inline cm4tu-btn">插入</div><div id="cm4tu-btn-delete" class="div-inline cm4tu-btn">删除此笔</div><div id="cm4tu-btn-clear" class="div-inline cm4tu-btn">全部删除</div><div class="div-inline"><input id="cm4tu-checkbox-bgImg" type="checkbox" '+(bBgImg?'checked':'')+'/>背景图片(<a href="http://tieba.baidu.com/f?kw=%E5%A4%8F%E8%AF%AD%E9%81%A5&ie=utf-8">夏語遙</a>)</div><div class="div-inline"><a href="http://tieba.baidu.com/f?kw=firefox">Firefox吧</a><a href="http://firefoxbar.github.io/">项目组</a></div>出品</div>'+
  74. 				'</div>')
  75. 				.css({
  76. 					'z-index': 60006,
  77. 					'cursor': 'move',
  78. 					'bottom': '500px',
  79. 					'left': '10%',
  80. 					'width': '650px',
  81. 					'height': '300px',
  82. 					'padding': '15px 25px 35px 25px',
  83. 					'background': 'rgba(156, 214, 174, '+opacity+')'})
  84. 				.appendTo(document.body)
  85. 				.draggable({
  86. 					// 讓可能有捲軸的#cm4tu-ui-textarea元素不可拖動，使捲軸正常工作
  87. 					start: function(e, ui){
  88. 						if ($(e.originalEvent.target).is('#cm4tu-ui-textarea'))
  89. 						e.preventDefault();
  90. 					}
  91. 				});
  92. 				$('#cm4tu-ui-select').change(function(){fInsertBackupText('#cm4tu-ui-textarea');});
  93. 				$('#cm4tu-checkbox-bgImg').click(function(){
  94. 					localforage.setItem('bBgImg', this.checked, function(value){
  95. 						$('#cm4tu-ui').toggleClass('cm4tu-ui-bgImg');
  96. 						bBgImg = value;
  97. 					});
  98. 				});
  99. 				fInsertBackupText('#cm4tu-ui-textarea');
  100. 				$('#cm4tu-btn-insert').click(function(){
  101. 					fInsertBackupText('#ueditor_replace');
  102. 					$('#cm4tu-ui').hide();
  103. 				});
  104. 				$('#cm4tu-btn-delete').click(function(){
  105. 					if(fCurrentDraftKey()==='')return;
  106. 					localStorage.removeItem(fCurrentDraftKey());
  107. 					fUIupdate();
  108. 				});
  109. 				$('#cm4tu-btn-clear').click(function(){
  110. 					var key;
  111. 					for(key in localStorage){
  112. 						reg.test(key) && localStorage.removeItem(key);
  113. 					}
  114. 					fUIupdate();
  115. 					$('#cm4tu-ui').hide();
  116. 				});
  117. 				$('#cm4tu-ui-close').click(function(){
  118. 					$('#cm4tu-ui').hide();
  119. 					return false;
  120. 				});
  121. 			}else{
  122. 				fUIupdate();
  123. 				$ui.show();
  124. 			}
  125. 		});
  126. };
  127.  
  128.  
  129. $('head').append($('<style>\
  130. #cm4tu-ui *{\
  131. opacity: '+opacity+';\
  132. }\
  133. .cm4tu-ui-bgImg:after{\
  134. background: url(http://imgsrc.baidu.com/forum/pic/item/db8e083df8dcd100995fea6a718b4710b8122f07.jpg);\
  135. opacity: '+opacityImg+';\
  136. width: 700px;\
  137. height: 350px;\
  138. bottom: 0;\
  139. right: 0;\
  140. position: absolute;\
  141. z-index: -1;\
  142. content: "";\
  143. }\
  144. #cm4tu-ui-textarea{\
  145. cursor: not-allowed;\
  146. }\
  147. .cm4tu-btn{\
  148. background: rgb(1, 152, 88);\
  149. cursor: pointer;\
  150. }\
  151. .div-inline{\
  152. margin-left: 15px;\
  153. padding: 2px;\
  154. display: inline;\
  155. }\
  156. #cm4tu-ui a{\
  157. color: blue !important;\
  158. }\
  159. </style>'));
  160.  
  161. localforage.getItem('bBgImg', function(err, value){
  162. 	if(null === value){
  163. 		bBgImg = true;
  164. 		localforage.setItem('bBgImg', bBgImg);
  165. 	}else{
  166. 		bBgImg = value;
  167. 	}
  168. });
  169.  
  170. var observer = new MutationObserver(function(mutations){
  171. 	mutations.forEach(function(mutation){
  172. 		if($('#cm4tu-tbbtn').length !== 0)return;
  173. 		var addedNodes = mutation.addedNodes;
  174. 		var ii = addedNodes.length;
  175. 		while(ii--){
  176. 			var $toolbar = $(addedNodes[ii]).find('.edui-btn-toolbar');
  177. 			if($toolbar.length === 0)continue;
  178. 			observer.disconnect();
  179. 			fMain($toolbar);
  180. 			break;
  181. 		}
  182. 	});
  183. });
  184. observer.observe($('#tb_rich_poster_container')[0], {childList: true, subtree: true});
  185.  
  186. var $toolbar = $('.edui-btn-toolbar');
  187. if($('#cm4tu-tbbtn').length === 0 && $toolbar.length !== 0){
  188. 	fMain($toolbar);
  189. }
  190.  
  191.  
  192. })(window, window.$, window._, /^draft/);