AC-论坛悬浮回复框

常用论坛的悬浮回复框,点击固定,再次点击缩回

  1. // ==UserScript==
  2. // @name AC-论坛悬浮回复框
  3. // @description 常用论坛的悬浮回复框,点击固定,再次点击缩回
  4. // @namespace K
  5. // @include *
  6. // @version 2.5
  7. // @note 反馈地址 http://bbs.kafan.cn/thread-2076136-1-1.html
  8. // @note V2.5 依据建议,替换为https的默认图片
  9. // @note V2.4 修复回复框右键导致的设置框弹出,同时修改左右和上下位置调整
  10. // @note V2.3 修复鼠标移开的悬浮框显示问题
  11. // @note V2.2 根据图标和图标位置动态调整悬浮框的宽度
  12. // @note V2.1 新增,鼠标移动到图标上显示悬浮框
  13. // @note V2.0 修改为图标触发效果,支持自定义图标,左键(展开-关闭); 右键(设置界面)
  14. // @icon https://coding.net/u/zb227/p/zbImg/git/raw/master/img0/icon.jpg
  15. // @run-at document-end
  16. // @grant GM_registerMenuCommand
  17. // @grant GM_getValue
  18. // @grant GM_setValue
  19. // ==/UserScript==
  20. var imgAtX = parseInt(GM_getValue("check_mAtX", -10)); //图标距离左边或者右边的距离
  21. var imgAtY = parseInt(GM_getValue("check_mAtY", -40)); //图标距离顶部或底部的距离
  22. var imgWidth = parseInt(GM_getValue("check_mWidth", 50)); //图标宽度
  23. var imgHeight = parseInt(GM_getValue("check_mHeight", 50)); //图标高度
  24. var imgUrl = GM_getValue("check_mUrl", "https://a.ikafan.com/image/smiley/default/14.gif"); // 图标地址
  25. var configForm; // 设置界面
  26. /***可以触发悬浮框关闭的Tag名字***/
  27. var frameNames = new Array(
  28. "div","DIV", "TD", "td", "h", "p", "form"
  29. );
  30. var percentage = parseInt(100*(document.body.clientWidth-2*Math.abs(imgAtX)-2*imgWidth)/document.body.clientWidth);
  31. /***打开设置页面的函数***/
  32. function showConfigFlashRpy () {
  33. configForm = document.createElement("div");
  34. configForm.className = "acConfigSetRpy";
  35. document.body.appendChild(configForm);
  36. configForm.style = "width: 520px; font-size: 14px; position: fixed; color: rgb(0, 0, 0); z-index: 99; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); border: 1px solid rgb(204, 204, 204); background: rgba(255, 255, 255, 0.9) none repeat scroll 0% 0%; border-top-right-radius: 2px; border-bottom-left-radius: 2px; padding: 10px; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto; height: 290px; max-height: 90%; overflow: auto; text-align: center; -moz-user-select: none;";
  37. configForm.appendChild(createTextNode("透明图片请用PNG或者GIF格式, 保存之后刷新页面即可", 1));
  38. configForm.appendChild(createTextNode("图标的地址:"));
  39. var check_mUrl = configForm.appendChild(createInputNode(imgUrl)).firstChild;
  40. configForm.appendChild(createTextNode("图标距两边的距离[左正右负]:"));
  41. var check_mAtX = configForm.appendChild(createInputNode(imgAtX)).firstChild;
  42. configForm.appendChild(createTextNode("图标距上下的距离[上正下负]:"));
  43. var check_mAtY = configForm.appendChild(createInputNode(imgAtY)).firstChild;
  44. configForm.appendChild(createTextNode("图标宽度:"));
  45. var check_mWidth = configForm.appendChild(createInputNode(imgWidth)).firstChild;
  46. configForm.appendChild(createTextNode("图标高度:"));
  47. var check_mHeight = configForm.appendChild(createInputNode(imgHeight)).firstChild;
  48. var check_mSave = configForm.appendChild(createButtonNode("保存"));
  49. var check_mCancel = configForm.appendChild(createButtonNode("取消"));
  50. check_mSave.onclick = function(){
  51. //检查属性是否符合规则
  52. if(check_mUrl.value.indexOf("http") != 0){
  53. alert("地址不规范");
  54. }else if(/^\d+$/.test(check_mAtX) || /^\d+$/.test(check_mAtY) || /^\d+$/.test(check_mWidth) || /^\d+$/.test(check_mHeight)){
  55. alert("请输入整数");
  56. }
  57. //使用保存数据的功能
  58. GM_setValue("check_mUrl", check_mUrl.value);
  59. GM_setValue("check_mAtX", check_mAtX.value);
  60. GM_setValue("check_mAtY", check_mAtY.value);
  61. GM_setValue("check_mWidth", check_mWidth.value);
  62. GM_setValue("check_mHeight", check_mHeight.value);
  63. configForm.remove();
  64. location.reload();
  65. }
  66. check_mCancel.onclick = function(){
  67. configForm.remove();
  68. }
  69. //configForm.innerHTML = "<form action=\"#\" ><center><table><tbody><tr><td>图片地址:</td><td><input value=\"xxx\"></td></tr><tr><td>图片靠左边距离:</td><td><input value=\"10\"></td></tr><tr><td>图片宽度</td><td><input value=\"10\"></td></tr><tr><td>图片高度:</td><td><input value=\"10\"></td></tr> </tbody></table><input value=\"save\" type=\"submit\"><input value=\"cancel\" type=\"button\"></center>";
  70. }
  71. /***设置页面用:新增按钮方法***/
  72. function createButtonNode(text){
  73. var inputDiv = document.createElement("div");
  74. inputDiv.style = "width: 100px; text-align: center; display: inline-block;margin-bottom:10px;margin-right:10px";
  75. var inputBox = document.createElement("input");
  76. inputBox.type = "button";
  77. inputBox.value = text;
  78. inputBox.style = "width: 100px; text-align: center; display: inline-block;";
  79. inputDiv.appendChild(inputBox);
  80. return inputDiv;
  81. }
  82. /***设置页面用:新增输入框方法***/
  83. function createInputNode(text){
  84. var inputDiv = document.createElement("div");
  85. inputDiv.style = "width: 300px; text-align: center; display: inline-block;margin-bottom:20px";
  86. var inputBox = document.createElement("input");
  87. inputBox.value = text;
  88. inputBox.onkeyup = "this.value=this.value.replace(/\D/g,'')";
  89. inputBox.onafterpaste = "this.value=this.value.replace(/\D/g,'')";
  90. inputBox.style = "width: 300px; text-align: left; display: inline-block;";
  91. inputDiv.appendChild(inputBox);
  92. return inputDiv;
  93. }
  94. /***设置页面用:新增文本方法***/
  95. function createTextNode(text, flag){
  96. var inputDiv = document.createElement("div");
  97. inputDiv.style = "width: 200px; text-align: center; display: inline-block; margin-bottom:20px";
  98. if(flag != null) inputDiv.style = "width: 500px; text-align: center; margin-bottom:20px";
  99. var inputBox = document.createElement("div");
  100. inputBox.style = "width: 200px; text-align: left; display: inline-block;";
  101. if(flag != null) inputBox.style = "width: 500px; text-align: center; margin-bottom:20px";
  102. inputBox.innerHTML = text;
  103. inputDiv.appendChild(inputBox);
  104. return inputDiv;
  105. }
  106. GM_registerMenuCommand("设置论坛回复悬浮窗属性", showConfigFlashRpy)
  107. /***判断是否为可关闭的Tag类型***/
  108. function isFrame(node){
  109. for(var index = 0; index < frameNames.length; index++){
  110. if(node.indexOf(frameNames[index]) == 0)
  111. return true;
  112. }
  113. return false;
  114. }
  115. /***右下角图标按钮生成函数***/
  116. function addBtn(nodeName){
  117. var node = document.querySelector(nodeName);
  118. if(node == null) return;
  119. // 隐藏原始回复框
  120. node.style.visibility = "hidden";
  121. // 处理表单,表单提交则点击自身,隐藏回复框
  122. var formNode = document.querySelector(nodeName+" form"); // "#f_pst form"
  123. if(formNode != null)
  124. formNode.setAttribute("onsubmit", formNode.getAttribute("onsubmit")+",this.click()");
  125. // 在父节点中插入按钮节点,并设置按钮style
  126. var fatherNode = node.parentNode;
  127. var insNode = document.createElement("div");
  128. insNode.className = "frep_btn";
  129. var deltaTextY = (imgAtY>=0?"top:":"bottom:")+Math.abs(imgAtY) + "px !important;";
  130. var deltaTextX = (imgAtX>=0?"left:":"right:")+Math.abs(imgAtX) + "px !important;";
  131. console.log(deltaTextX);
  132. insNode.style = "width:"+imgWidth+"px !important;height:"+imgHeight+"px !important;background-image: url('"+imgUrl+"'); background-repeat: no-repeat; background-size: 100% 100%;position: fixed;z-index: 99 !important;border: 1px solid #2B5782 !important;overflow: hidden;transition-duration: 0.2s !important;transition-delay: 0.3s !important;"+deltaTextY+deltaTextX;
  133. insNode.style.after = "content:\"\"; display:block; padding-bottom:20%;";
  134. insNode.setAttribute("expand", "0");
  135. fatherNode.insertBefore(insNode, fatherNode.firstChild);
  136. node.setAttribute("expand", "0");
  137. node.onclick = function expandView(sender){
  138. /***左键为展开和关闭效果; 右键为设置页面-单一页面,禁止多个***/
  139. console.log(sender);
  140. if(sender.button == 0){
  141. //左键展开===关闭
  142. //console.log(sender);
  143. //console.log(sender.target);
  144. //console.log(sender.target.localName);
  145. if(node.getAttribute("expand") == "0"){//未展开--->展开
  146. var posTextX = (imgAtX>=0?"left:":"right:")+(imgWidth+Math.abs(imgAtX)+1) +"px !important;";
  147. node.style = "border:1px solid #2B5782 !important;position:fixed;bottom:-11px !important;z-index:99 !important;bottom:-5px !important;height:auto !important;width:"+percentage+"% !important;overflow:hidden;transition-delay:0.1s !important; background:#fcfcfc;"+posTextX;
  148. console.log("展开");
  149. node.setAttribute("expand", "1");
  150. insNode.setAttribute("expand", "1");
  151. node.style.visibility = "visible";
  152. } else{
  153. if(isFrame(sender.target.localName) == false){
  154. console.log("点击了"+sender.target.localName + ",不是边框类型");
  155. return;
  156. }
  157. console.log("收回");
  158. node.setAttribute("expand", "0");
  159. insNode.setAttribute("expand", "0");
  160. node.style.visibility = "hidden";
  161. }
  162. }else{
  163. //右键设置模式
  164. if(sender.target.className == "frep_btn"){
  165. if(document.querySelector(".acConfigSetRpy")==null){
  166. showConfigFlashRpy();
  167. }else{
  168. configForm.remove();
  169. }
  170. }
  171. }
  172. };
  173. insNode.onmouseover = node.onmouseover = function(){
  174. if(node.getAttribute("expand") == "0") {
  175. var posTextX = (imgAtX>=0?"left:":"right:")+(imgWidth+Math.abs(imgAtX)+1) +"px !important;";
  176. node.style = "border:1px solid #2B5782 !important;position:fixed;bottom:-11px !important;z-index:99 !important;bottom:-5px !important;height:auto !important;width:"+percentage+"% !important;overflow:hidden;transition-delay:0.1s !important; background:#fcfcfc;" + posTextX;
  177. node.style.visibility = "visible";
  178. }
  179. };
  180. insNode.onmouseout = node.onmouseout = function(){
  181. if(node.getAttribute("expand") == "0")
  182. node.style.visibility = "hidden";
  183. };
  184. insNode.onmousedown = node.onclick;
  185. /***在右下角按钮上禁止右键弹出菜单***/
  186. /***右键为设置页面-单一;左键为展开和关闭效果***/
  187. insNode.oncontextmenu = function(){return false;};
  188. }
  189. addBtn("#anchor");
  190. addBtn("#quickpost");
  191. addBtn("#f_pst");
  192. addBtn("#f_post");
  193. addBtn("#fast_post_c");
  194. addBtn("form[action=\"post.php?\"][method=\"post\"] > .t5");