Block_Obj

BLOCK_OBJ

当前为 2020-08-06 提交的版本,查看 最新版本

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/407543/834560/Block_Obj.js

  1. // ==UserScript==
  2. // @name Block_Obj
  3. // @namespace https://greasyfork.org/zh-CN/users/193133-pana
  4. // @homepage https://www.sailboatweb.com
  5. // @version 2.8.2
  6. // @description BLOCK_OBJ
  7. // @author pana
  8. // @license GNU General Public License v3.0 or later
  9. // ==/UserScript==
  10.  
  11. const BLOCK_STYLE = `
  12. .block_obj_wrap_div {
  13. background-color: #222222;
  14. border-radius: 3px;
  15. border: 1px solid #282A36;
  16. bottom: 6vh;
  17. box-shadow: 0 0 5px #282A36;
  18. color: #D3D3D3;
  19. font-size: 13px;
  20. margin: 0px;
  21. padding: 0px;
  22. position: fixed;
  23. text-align: left;
  24. transition: 0.8s;
  25. width: 520px;
  26. z-index: 99999;
  27. }
  28. .block_obj_show_wrap {
  29. display: block;
  30. right: 0;
  31. }
  32. .block_obj_hidden_wrap {
  33. right: -530px;
  34. }
  35. .block_obj_main_fieldset {
  36. border-radius: 3px;
  37. border: 3px groove #00A1D6;
  38. height: auto;
  39. margin: 8px;
  40. min-width: 300px;
  41. padding: 4px 9px 6px 9px;
  42. width: auto;
  43. }
  44. .block_obj_ul_node {
  45. list-style: none;
  46. padding-left: 0;
  47. margin: 0;
  48. }
  49. .block_obj_checkbox_li {
  50. display: inline-block;
  51. margin-top: 5px;
  52. }
  53. .block_obj_checkbox_input {
  54. clip: rect(0, 0, 0, 0);
  55. position: absolute;
  56. }
  57. .block_obj_checkbox_label {
  58. cursor: pointer;
  59. vertical-align: middle;
  60. }
  61. .block_obj_checkbox_input + label::before {
  62. background-color: silver;
  63. border-radius: 0.1em;
  64. color: #FFF;
  65. content: "\\a0";
  66. display: inline-block;
  67. height: 1em;
  68. line-height: 85%;
  69. margin-right: 0.5em;
  70. text-align: center;
  71. vertical-align: 0.2em;
  72. width: 1em;
  73. }
  74. .block_obj_checkbox_input:checked + label::before {
  75. background-color: #00A1D6;
  76. content: "\\2713";
  77. }
  78. .block_obj_separator_text {
  79. color: #FFB86C;
  80. margin-top: 5px;
  81. }
  82. .block_obj_separator_symbol {
  83. background-color: #303030;
  84. height: 2px;
  85. margin-bottom: 5px;
  86. margin-top: 5px;
  87. min-width: 400px;
  88. }
  89. .block_obj_input_div {
  90. margin-top: 5px;
  91. }
  92. .block_obj_input {
  93. background-color: #C0C0C0;
  94. border: 1px solid #C0C0C0;
  95. color: #000;
  96. font-size: 13px;
  97. min-height: 15px;
  98. margin-left: 5px;
  99. margin-right: 5px;
  100. padding-left: 4px;
  101. }
  102. .block_obj_keyword_input {
  103. width: 150px;
  104. }
  105. .block_obj_input_btn {
  106. background-color: #3da9cc;
  107. border-radius: 3px;
  108. border: 1px solid #73C9E5;
  109. box-shadow: 0 0 4px #73C9E5;
  110. color: #FFF;
  111. cursor: pointer;
  112. display: inline-block;
  113. min-height: 15px;
  114. margin-left: 5px;
  115. text-align: center;
  116. vertical-align: bottom;
  117. white-space: nowrap;
  118. width: 30px;
  119. }
  120. .block_obj_list_div {
  121. margin-top: 5px;
  122. }
  123. .block_obj_list_textarea_div {
  124. border: 1px dotted #00A1D6;
  125. margin-top: 3px;
  126. max-height: 60px;
  127. min-height: 3px;
  128. overflow: auto;
  129. }
  130. .block_obj_list_textarea_div::-webkit-scrollbar {
  131. background-color: #979797;
  132. border-radius: 5px;
  133. width: 10px;
  134. }
  135. .block_obj_list_textarea_div::-webkit-scrollbar-thumb {
  136. background-color: #404040;
  137. border-radius: 5px;
  138. }
  139. .block_obj_button_clicked {
  140. color: #000;
  141. }
  142. .block_obj_child_span {
  143. background-color: #3D3D3D;
  144. border-radius: 5px;
  145. border: 1px solid #3D3D3D;
  146. display: inline-block;
  147. margin: 3px;
  148. padding: 2px;
  149. min-height: 18px;
  150. }
  151. .block_obj_child_text {
  152. border-right: 1px solid #A9181C;
  153. margin-right: 4px;
  154. padding-right: 4px;
  155. }
  156. .block_obj_child_del {
  157. color: #A9181C;
  158. cursor: pointer;
  159. }
  160. .block_obj_list_textarea_expand {
  161. max-height: 720px;
  162. }
  163. .block_obj_li_hide {
  164. display: none;
  165. }
  166. .block_obj_reg_input {
  167. width: 100px;
  168. }
  169. .block_obj_modifier_input {
  170. width: 50px;
  171. }
  172. .block_obj_button {
  173. background-color: #FB7299;
  174. border-radius: 4px;
  175. border: 1px solid #FB7299;
  176. color: #FFF;
  177. cursor: pointer;
  178. margin-top: 5px;
  179. padding: 2px 4px;
  180. position: relative;
  181. min-height: 17px;
  182. }
  183. .block_obj_save_button {
  184. float: right;
  185. margin-right: 5px;
  186. }
  187. .block_obj_cancel_button {
  188. float: left;
  189. margin-left: 5px;
  190. }
  191. .block_obj_expand_box {
  192. bottom: 0px;
  193. height: 6vh;
  194. position: fixed;
  195. right: -6vw;
  196. transition: 0.5s;
  197. width: 12vw;
  198. z-index: 99999;
  199. }
  200. .block_obj_show_expand_box {
  201. right: 0;
  202. width: 6vw;
  203. }
  204. .block_obj_expand_span {
  205. background-color: #00A1D6;
  206. border-radius: 19px;
  207. border: 1px solid #00A1D6;
  208. bottom: 1vh;
  209. color: #FFF;
  210. cursor: pointer;
  211. display: block;
  212. font-size: 13px;
  213. height: 38px;
  214. line-height: 38px;
  215. position: absolute;
  216. right: 1vw;
  217. text-align: center;
  218. width: 38px;
  219. z-index: 99999;
  220. }
  221. .block_obj_expand_span:hover {
  222. box-shadow: 0 0 5px 1px green;
  223. }
  224. .block_obj_move_right {
  225. margin-left: 15px;
  226. }
  227. .block_obj_none {
  228. display: none !important;
  229. }
  230. .block_obj_hidden {
  231. visibility: hidden !important;
  232. }
  233. .block_obj_presentation_div {
  234. display: flex;
  235. position: fixed;
  236. background-color: rgba(0, 0, 0, .5);
  237. top: 0;
  238. bottom: 0;
  239. left: 0;
  240. right: 0;
  241. z-index: 100000;
  242. align-items: center;
  243. justify-content: center;
  244. }
  245. .block_obj_dialog_div {
  246. position: relative;
  247. width: 400px;
  248. background-color: #4e5654;
  249. border: 0 solid #000;
  250. border-radius: 12px;
  251. display: flex;
  252. flex-direction: column;
  253. }
  254. .block_obj_big_bang_top_part {
  255. margin-top: 5px;
  256. margin-bottom: 5px;
  257. }
  258. .block_obj_big_bang_h3 {
  259. font-size: 20px;
  260. color: #fff;
  261. margin-left: 5px;
  262. background-color: #4e5654;
  263. border-color: #4e5654;
  264. }
  265. .block_obj_big_bang_deselect_btn {
  266. float: right;
  267. margin-top: 5px;
  268. margin-right: 5px;
  269. color: #2a2a92;
  270. cursor: pointer;
  271. }
  272. .block_obj_big_bang_middle_part {
  273. margin-top: 5px;
  274. margin-bottom: 5px;
  275. max-height: 500px;
  276. overflow-y: auto;
  277. }
  278. .block_obj_big_bang_text {
  279. background-color: #3e3939;
  280. color: #fff;
  281. padding: 5px;
  282. margin: 4px;
  283. font-size: 16px;
  284. display: inline-block;
  285. border-radius: 99px;
  286. cursor: pointer;
  287. }
  288. .block_obj_big_bang_text_selected {
  289. background-color: #3636b1 !important;
  290. }
  291. .block_obj_big_bang_bottom_part {
  292. margin-top: 5px;
  293. margin-bottom: 5px;
  294. text-align: center;
  295. }
  296. .block_obj_big_bang_add_btn, .block_obj_big_bang_copy_btn {
  297. display: inline-block;
  298. padding: 10px;
  299. color: #fff;
  300. background-color: #325561;
  301. cursor: pointer;
  302. border-radius: 99px;
  303. margin-left: 20px;
  304. margin-right: 20px;
  305. }
  306. .block_obj_big_bang_add_btn:hover, .block_obj_big_bang_copy_btn:hover {
  307. color: #2a2a92;
  308. }
  309. `;
  310. class Block_Obj {
  311. constructor(config_key, reg_key_array = []) {
  312. this.wrapDiv = null;
  313. this.mainFieldset = null;
  314. this.ulNode = null;
  315. this.style = null;
  316. this.saveField = [];
  317. this.onSave = null;
  318. this.onChange = null;
  319. this.field = [];
  320. this.configKey = config_key;
  321. this.regKeyArray = reg_key_array;
  322. this.config = this.readConfig();
  323. }
  324. init(initialization) {
  325. if (! this.id) {
  326. this.id = initialization.id ? 'blockObj_' + initialization.id : 'blockObj_' + Block_Obj.count;
  327. ! initialization.id && Block_Obj.count ++;
  328. }
  329. this.display = initialization.display ? true : false;
  330. if (initialization.events) {
  331. if (typeof(initialization.events['save']) === 'function') {
  332. this.onSave = initialization.events['save'];
  333. }
  334. if (typeof(initialization.events['change']) === 'function') {
  335. this.onChange = initialization.events['change'];
  336. }
  337. }
  338. this.style = document.createElement('style');
  339. this.style.type = 'text/css';
  340. this.style.innerHTML = BLOCK_STYLE;
  341. document.body.appendChild(this.style);
  342. if (initialization.style && typeof(initialization.style) === 'string') {
  343. let external_style = document.createElement('style');
  344. external_style.type = 'text/css';
  345. external_style.innerHTML = initialization.style;
  346. document.body.appendChild(external_style);
  347. }
  348. ! this.wrapDiv && this.createSettingsPanel();
  349. this.field = initialization.field;
  350. this.settingsPanel();
  351. initialization.menu && typeof(GM_registerMenuCommand) === 'function' && GM_registerMenuCommand(initialization.menu, () => this.expandWrap());
  352. typeof(GM_addValueChangeListener) === 'function' && GM_addValueChangeListener(this.configKey, (_name, _old_value, new_value, remote) => {
  353. if (remote) {
  354. this.destroyAndRebuild(new_value);
  355. typeof(this.onChange) === 'function' && this.onChange(this.getConfig());
  356. }
  357. });
  358. let expand_box = document.createElement('div');
  359. expand_box.className = 'block_obj_expand_box';
  360. expand_box.onmouseenter = function() {
  361. this.classList.add('block_obj_show_expand_box');
  362. };
  363. expand_box.onmouseleave = function() {
  364. this.classList.remove('block_obj_show_expand_box');
  365. };
  366. let hover_button = {};
  367. if (initialization.hover_button) {
  368. Object.assign(hover_button, initialization.hover_button);
  369. }
  370. let expand_span = document.createElement('span');
  371. expand_span.id = this.id + '_expandSpan';
  372. expand_span.className = 'block_obj_expand_span';
  373. expand_span.textContent = hover_button.label == null ? '屏蔽' : hover_button.label;
  374. expand_span.title = hover_button.title == null ? '显示/隐藏屏蔽设置' : hover_button.title;
  375. expand_span.addEventListener('click', () => {
  376. this.expandWrap();
  377. if (hover_button.click && typeof(hover_button.click) === 'function') {
  378. hover_button.click(expand_span);
  379. }
  380. });
  381. expand_box.appendChild(expand_span);
  382. document.body.appendChild(expand_box);
  383. }
  384. settingsPanel() {
  385. if (Array.isArray(this.field)) {
  386. this.field.forEach(ele => {
  387. if (! this.wrapDiv.querySelector('#' + this.id + '_' + (ele.id ? ele.id : ''))) {
  388. switch (ele.type.toLowerCase()) {
  389. case 'separator':
  390. case 's':
  391. this.insertSeparator(ele.id, ele.label, ele.title, ele.classname);
  392. break;
  393. case 'br':
  394. case 'b':
  395. this.insertBr(ele.classname);
  396. break;
  397. case 'input':
  398. case 'i':
  399. this.insertInput(ele.list_id, ele.id, false, ele.label, ele.title, ele.placeholder, ele.classname, ele.campare);
  400. break;
  401. case 'reg_input':
  402. case 'ri':
  403. this.insertInput(ele.list_id, ele.id, true, ele.label, ele.title, ele.placeholder, ele.classname, ele.campare, ele.modifier_label, ele.modifier_placeholder);
  404. break;
  405. case 'list':
  406. case 'l':
  407. this.insertList(ele.id, (this.config[ele.id] == null ? ele.default : this.config[ele.id]), ele.label, ele.title, ele.classname);
  408. break;
  409. case 'checkbox':
  410. case 'c':
  411. default:
  412. this.insertCheckbox(ele.id, ele.label, ele.title, (this.config[ele.id] == null ? ele.default : this.config[ele.id]), ele.classname, ele.move_right);
  413. break;
  414. }
  415. }
  416. });
  417. }
  418. let save_button = this.createSpanBtn('block_obj_button block_obj_save_button', '保存并关闭', '保存设置并关闭设置窗口', e => {
  419. this.expandWrap();
  420. this.saveConfig();
  421. });
  422. let only_save_button = this.createSpanBtn('block_obj_button block_obj_save_button', '仅保存', '仅保存设置', e => {
  423. only_save_button.textContent = '已保存';
  424. save_timer && window.clearTimeout(save_timer);
  425. var save_timer = window.setTimeout(() => {
  426. only_save_button.textContent = '仅保存';
  427. }, 1000);
  428. this.saveConfig();
  429. });
  430. let cancel_button = this.createSpanBtn('block_obj_button block_obj_cancel_button', '取消', '关闭设置窗口', e => {
  431. this.expandWrap();
  432. cancel_timer && window.clearTimeout(cancel_timer);
  433. var cancel_timer = window.setTimeout(() => {
  434. this.display = false;
  435. this.destroyAndRebuild();
  436. }, 800);
  437. e.stopPropagation();
  438. });
  439. this.ulNode.appendChild(save_button);
  440. this.ulNode.appendChild(only_save_button);
  441. this.ulNode.appendChild(cancel_button);
  442. document.body.appendChild(this.wrapDiv);
  443. }
  444. getConfig() {
  445. let real_config = {};
  446. Object.assign(real_config, this.config);
  447. this.regKeyArray.forEach(key => {
  448. real_config[key] = this.convertArray(real_config[key]);
  449. });
  450. return real_config;
  451. }
  452. readConfig() {
  453. let config = {};
  454. if (typeof(GM_getValue) === 'function' && this.configKey) {
  455. config = GM_getValue(this.configKey, {});
  456. }
  457. return config;
  458. }
  459. saveConfig() {
  460. this.saveField.forEach(item => {
  461. if (item.type == 'checkbox') {
  462. this.config[item.key] = document.getElementById(this.id + '_' + item.key).checked;
  463. } else if (item.type == 'list') {
  464. this.config[item.key] = this.extractList(this.id + '_' + item.key);
  465. }
  466. });
  467. typeof(GM_setValue) && GM_setValue(this.configKey, this.config);
  468. typeof(this.onSave) === 'function' && this.onSave(this.getConfig());
  469. }
  470. createSettingsPanel() {
  471. this.wrapDiv = document.createElement('div');
  472. this.wrapDiv.id = this.id + '_wrapDiv';
  473. this.wrapDiv.className = 'block_obj_wrap_div ' + (this.display ? 'block_obj_show_wrap' : 'block_obj_hidden_wrap');
  474. this.mainFieldset = document.createElement('fieldset');
  475. this.mainFieldset.id = this.id + '_mainFieldset';
  476. this.mainFieldset.className = 'block_obj_main_fieldset';
  477. this.wrapDiv.appendChild(this.mainFieldset);
  478. this.ulNode = document.createElement('ul');
  479. this.ulNode.id = this.id + '_ulNode';
  480. this.ulNode.className = 'block_obj_ul_node';
  481. this.mainFieldset.appendChild(this.ulNode);
  482. document.body.appendChild(this.wrapDiv);
  483. }
  484. destroyAndRebuild(new_config = null) {
  485. this.config = new_config || this.config;
  486. document.body.removeChild(this.wrapDiv);
  487. this.createSettingsPanel();
  488. this.settingsPanel();
  489. }
  490. expandWrap() {
  491. let panel = document.getElementById(this.id + '_wrapDiv');
  492. if (panel) {
  493. if (panel.classList.contains('block_obj_show_wrap')) {
  494. this.display = false;
  495. panel.classList.remove('block_obj_show_wrap');
  496. panel.classList.add('block_obj_hidden_wrap');
  497. } else {
  498. this.display = true;
  499. panel.classList.remove('block_obj_hidden_wrap');
  500. panel.classList.add('block_obj_show_wrap');
  501. }
  502. }
  503. }
  504. insertCheckbox(id, label = '', title = '', checked = false, classname = null, move_right = false) {
  505. let checkbox_li = document.createElement('li');
  506. checkbox_li.className = 'block_obj_checkbox_li';
  507. classname && checkbox_li.classList.add(classname);
  508. move_right && checkbox_li.classList.add('block_obj_move_right');
  509. let checkbox_input = document.createElement('input');
  510. checkbox_input.type = 'checkbox';
  511. checkbox_input.className = 'block_obj_checkbox_input';
  512. checkbox_input.id = this.id + '_' + id;
  513. checkbox_input.checked = checked ? true : false;
  514. let checkbox_label = document.createElement('label');
  515. checkbox_label.className = 'block_obj_checkbox_label';
  516. checkbox_label.setAttribute('for', this.id + '_' + id);
  517. checkbox_label.textContent = label;
  518. checkbox_label.title = title;
  519. checkbox_li.appendChild(checkbox_input);
  520. checkbox_li.appendChild(checkbox_label);
  521. this.ulNode.appendChild(checkbox_li);
  522. this.saveField.push({
  523. 'key': id,
  524. 'type': 'checkbox'
  525. });
  526. }
  527. insertSeparator(id = null, label = null, title = null, li_classname = null) {
  528. let separator_li = document.createElement('li');
  529. separator_li.className = 'block_obj_separator_li';
  530. li_classname && separator_li.classList.add('block_obj_' + li_classname);
  531. let separator_div = document.createElement('div');
  532. if (id) {
  533. separator_div.id = this.id + '_' + id;
  534. }
  535. if (label) {
  536. separator_div.className = 'block_obj_separator_text';
  537. separator_div.textContent = label;
  538. } else {
  539. separator_div.className = 'block_obj_separator_symbol';
  540. }
  541. separator_div.title = title ? title : '';
  542. separator_li.appendChild(separator_div);
  543. this.ulNode.appendChild(separator_li);
  544. }
  545. insertBr(classname = null) {
  546. let br = document.createElement('br');
  547. br.className = classname ? classname : '';
  548. this.ulNode.appendChild(br);
  549. }
  550. insertInput(list_id, id = null, is_reg = false, label = '', title = '', placeholder = '', li_classname = null, campare = null, modifier_label = '', modifier_placeholder = '') {
  551. let input_li = document.createElement('li');
  552. input_li.className = li_classname ? 'block_obj_' + li_classname : '';
  553. let input_div = document.createElement('div');
  554. input_div.className = 'block_obj_input_div';
  555. let input_span = document.createElement('span');
  556. input_span.className = 'block_obj_input_span';
  557. input_span.textContent = label;
  558. input_div.appendChild(input_span);
  559. let input = document.createElement('input');
  560. if (id) {
  561. input.id = this.id + '_' + id;
  562. }
  563. input.title = title;
  564. input.placeholder = placeholder;
  565. input.type = 'text';
  566. input.className = is_reg ? 'block_obj_input block_obj_reg_input' : 'block_obj_input block_obj_keyword_input';
  567. input_span.appendChild(input);
  568. let modifier_span = document.createElement('span');
  569. modifier_span.textContent = modifier_label;
  570. is_reg && input_div.appendChild(modifier_span);
  571. let modifier_input = document.createElement('input');
  572. if (id) {
  573. modifier_input.id = this.id + '_modifier_' + id;
  574. }
  575. modifier_input.placeholder = modifier_placeholder;
  576. modifier_input.type = 'text';
  577. modifier_input.className = 'block_obj_input block_obj_modifier_input';
  578. modifier_span.appendChild(modifier_input);
  579. let the_list_id = this.id + '_' + list_id;
  580. input.addEventListener('keyup', e => {
  581. if (e.keyCode === 13) {
  582. is_reg ? this.addRegListItem(input, modifier_input, the_list_id) : this.addListItem(input, the_list_id, campare);
  583. }
  584. });
  585. modifier_input.addEventListener('keyup', e => {
  586. e.keyCode === 13 && this.addRegListItem(input, modifier_input, the_list_id);
  587. });
  588. let add_btn = this.createSpanBtn('block_obj_input_btn', '添加', '添加内容到列表中', e => {
  589. if (is_reg ? this.addRegListItem(input, modifier_input, the_list_id) : this.addListItem(input, the_list_id, campare)) {
  590. this.buttonClicked(add_btn, '添加成功', 'block_obj_button_clicked');
  591. }
  592. });
  593. let delete_btn = this.createSpanBtn('block_obj_input_btn', '删除', '从列表中删除符合的项目', e => {
  594. if (is_reg ? this.delRegListItem(input, modifier_input, the_list_id) : this.delListItem(input, the_list_id)) {
  595. this.buttonClicked(delete_btn, '删除成功', 'block_obj_button_clicked');
  596. }
  597. });
  598. let clear_btn = this.createSpanBtn('block_obj_input_btn', '清空', '清空列表', e => {
  599. document.getElementById(the_list_id).innerHTML = '';
  600. this.buttonClicked(clear_btn, '清除成功', 'block_obj_button_clicked');
  601. });
  602. let copy_btn = this.createSpanBtn('block_obj_input_btn', '复制', '复制列表', e => {
  603. if (typeof(GM_setClipboard) === 'function') {
  604. GM_setClipboard(this.extractList(the_list_id).toString(), 'text');
  605. this.buttonClicked(copy_btn, '复制成功', 'block_obj_button_clicked');
  606. } else {
  607. alert('GM_setClipboard is not an interface.');
  608. }
  609. });
  610. let expand_btn = this.createSpanBtn('block_obj_input_btn', '展开', '展开列表', e => {
  611. li_classname && this.toggleList('block_obj_' + li_classname);
  612. if (expand_btn.textContent == '展开') {
  613. expand_btn.textContent = '恢复';
  614. expand_btn.title = '收缩列表';
  615. } else {
  616. expand_btn.textContent = '展开';
  617. expand_btn.title = '展开列表';
  618. }
  619. });
  620. input_div.appendChild(add_btn);
  621. input_div.appendChild(delete_btn);
  622. input_div.appendChild(clear_btn);
  623. input_div.appendChild(copy_btn);
  624. input_div.appendChild(expand_btn);
  625. input_li.appendChild(input_div);
  626. this.ulNode.appendChild(input_li);
  627. }
  628. insertList(id, save_array = [], label = '', title = '', li_classname = '') {
  629. let list_li = document.createElement('li');
  630. list_li.className = li_classname ? 'block_obj_' + li_classname : '';
  631. let list_div = document.createElement('div');
  632. list_div.className = 'block_obj_list_div';
  633. list_div.textContent = label;
  634. list_div.title = title;
  635. let list_textarea_div = document.createElement('div');
  636. list_textarea_div.id = this.id + '_' + id;
  637. list_textarea_div.className = 'block_obj_list_textarea_div';
  638. for (let item of save_array) {
  639. item && list_textarea_div.insertAdjacentElement('afterbegin', this.createListItem(item));
  640. }
  641. list_div.appendChild(list_textarea_div);
  642. list_li.appendChild(list_div);
  643. this.ulNode.appendChild(list_li);
  644. this.saveField.push({
  645. 'key': id,
  646. 'type': 'list'
  647. });
  648. }
  649. addListItem(input, list_id, campare = null) {
  650. let text_value = input.value;
  651. if (text_value) {
  652. let text_arr = this.stringToArray(text_value);
  653. let save_arr = this.extractList(list_id);
  654. text_arr.forEach(item => {
  655. let status = true;
  656. if (typeof(campare) === 'function') {
  657. let temp_status = campare(item);
  658. if (typeof(temp_status) === 'boolean') {
  659. status = temp_status;
  660. }
  661. }
  662. if (status) {
  663. ! save_arr.includes(item) && document.getElementById(list_id).insertAdjacentElement('afterbegin', this.createListItem(item));
  664. }
  665. });
  666. input.value = '';
  667. return true;
  668. }
  669. return false;
  670. }
  671. delListItem(input, list_id) {
  672. let text_value = input.value;
  673. if (text_value) {
  674. let del_status = false;
  675. let text_arr = this.stringToArray(text_value);
  676. let save_arr = this.extractList(list_id);
  677. text_arr.forEach(item => {
  678. if (save_arr.includes(item)) {
  679. let total_child = document.getElementById(list_id).getElementsByClassName('block_obj_child_span');
  680. try {
  681. document.getElementById(list_id).removeChild(total_child[total_child.length - 1 - save_arr.indexOf(item)]);
  682. del_status = true;
  683. } catch(e) {
  684. del_status = false;
  685. console.error('Block_Obj: Error deleting element.');
  686. console.error(e);
  687. }
  688. }
  689. });
  690. if (del_status) {
  691. input.value = '';
  692. return true;
  693. }
  694. }
  695. return false;
  696. }
  697. addRegListItem(reg_input, modifier_input, list_id) {
  698. let reg_value = reg_input.value;
  699. let modifier_value = modifier_input.value;
  700. if (reg_value) {
  701. try {
  702. let reg_obj = new RegExp(reg_value, modifier_value);
  703. let save_arr = this.extractList(list_id);
  704. ! save_arr.includes(reg_obj.toString()) && document.getElementById(list_id).insertAdjacentElement('afterbegin', this.createListItem(reg_obj.toString()));
  705. reg_input.value = '';
  706. modifier_input.value = '';
  707. return true;
  708. } catch(e) {
  709. console.error('Block_Obj: Invalid regular expression.');
  710. console.error(e);
  711. }
  712. }
  713. return false;
  714. }
  715. delRegListItem(reg_input, modifier_input, list_id) {
  716. let reg_value = reg_input.value;
  717. let modifier_value = modifier_input.value;
  718. if (reg_value) {
  719. let del_status = false;
  720. try {
  721. let reg_obj = new RegExp(reg_value, modifier_value);
  722. let save_arr = this.extractList(list_id);
  723. if (save_arr.includes(reg_obj.toString())) {
  724. let total_child = document.getElementById(list_id).getElementsByClassName('block_obj_child_span');
  725. document.getElementById(list_id).removeChild(total_child[total_child.length - 1 - save_arr.indexOf(reg_obj.toString())]);
  726. del_status = true;
  727. }
  728. } catch(e) {
  729. del_status = false;
  730. console.error('Block_Obj: Invalid regular expression or error deleting element.');
  731. console.error(e);
  732. }
  733. if (del_status) {
  734. reg_input.value = '';
  735. modifier_input.value = '';
  736. return true;
  737. }
  738. return false;
  739. }
  740. }
  741. createSpanBtn(classname, label, title, callback) {
  742. let btn_span = this.createBasicBtn('span', label, title, classname);
  743. btn_span.addEventListener('click', e => typeof(callback) === 'function' && callback(e));
  744. return btn_span;
  745. }
  746. createListItem(text_value) {
  747. let child_span = document.createElement('span');
  748. child_span.className = 'block_obj_child_span';
  749. let text_span = document.createElement('span');
  750. text_span.className = 'block_obj_child_text';
  751. text_span.textContent = text_value.length > 9 ? text_value.slice(0, 3) + '...' + text_value.slice(-3) : text_value;
  752. if (text_value.length > 9) {
  753. text_span.title = text_value;
  754. }
  755. let del_span = document.createElement('span');
  756. del_span.textContent = 'X';
  757. del_span.title = '移除';
  758. del_span.className = 'block_obj_child_del';
  759. del_span.addEventListener('click', e => child_span.remove());
  760. child_span.appendChild(text_span);
  761. child_span.appendChild(del_span);
  762. return child_span;
  763. }
  764. createBasicBtn(type, text, title, classname) {
  765. let btn_type = 'span';
  766. if (typeof(type) === 'string') {
  767. switch (type.toLowerCase()) {
  768. case 'div':
  769. case 'd':
  770. btn_type = 'div';
  771. break;
  772. case 'a':
  773. btn_type = 'a';
  774. break;
  775. case 'button':
  776. btn_type = 'button';
  777. break;
  778. case 'input':
  779. btn_type = 'input';
  780. break;
  781. case 'i':
  782. btn_type = 'i';
  783. break;
  784. case 'b':
  785. btn_type = 'b';
  786. break;
  787. case 'span':
  788. case 's':
  789. default:
  790. btn_type = 'span';
  791. break;
  792. }
  793. }
  794. let btn = document.createElement(btn_type);
  795. btn.textContent = text ? text : '';
  796. btn.title = title ? title : '';
  797. btn.className = classname ? classname : '';
  798. return btn;
  799. }
  800. createBlockBtn(value, list_id, classname, type = 'span', text = '', title = '', campare = null) {
  801. let block_btn = this.createBasicBtn(type, text, title, classname);
  802. block_btn.addEventListener('click', e => {
  803. e.stopPropagation();
  804. if (value && list_id) {
  805. let status = true;
  806. if (typeof(campare) === 'function') {
  807. let temp_status = campare(value);
  808. if (typeof(temp_status) === 'boolean') {
  809. status = temp_status;
  810. }
  811. }
  812. if (status) {
  813. let the_list_id = this.id + '_' + list_id;
  814. let save_arr = this.extractList(the_list_id);
  815. ! save_arr.includes(value) && document.getElementById(the_list_id) && document.getElementById(the_list_id).insertAdjacentElement('afterbegin', this.createListItem(value));
  816. }
  817. }
  818. this.saveConfig();
  819. });
  820. return block_btn;
  821. }
  822. createBigBangBtn(value, list_id, classname, type = 'span', text = '', title = '', campare = null) {
  823. let big_bang_btn = this.createBasicBtn(type, text, title, classname);
  824. big_bang_btn.addEventListener('click', e => {
  825. e.stopPropagation();
  826. if (value && list_id) {
  827. let the_list_id = this.id + '_' + list_id;
  828. this.injectionBigBangPanel(value, the_list_id, campare);
  829. }
  830. });
  831. return big_bang_btn;
  832. }
  833. injectionBigBangPanel(value, list_id, campare = null) {
  834. let presentation_div = document.createElement('div');
  835. presentation_div.id = this.id + '_presentationDiv';
  836. presentation_div.className = 'block_obj_presentation_div';
  837. presentation_div.addEventListener('click', function(event) {
  838. if (event.target === this) {
  839. if (presentation_div) {
  840. presentation_div.remove();
  841. }
  842. }
  843. });
  844. let dialog_div = document.createElement('div');
  845. dialog_div.className = 'block_obj_dialog_div';
  846. presentation_div.appendChild(dialog_div);
  847. let top_part = document.createElement('div');
  848. top_part.className = 'block_obj_big_bang_top_part';
  849. let h3 = document.createElement('h3');
  850. h3.className = 'block_obj_big_bang_h3';
  851. h3.textContent = '大爆炸';
  852. top_part.appendChild(h3);
  853. let deselect_btn = this.createSpanBtn('block_obj_big_bang_deselect_btn', '取消选择', '取消全部已选择的内容', e => {
  854. e.stopPropagation();
  855. let select_arr = document.querySelectorAll('.block_obj_big_bang_text_selected');
  856. for (let s of select_arr) {
  857. s.classList.remove('block_obj_big_bang_text_selected');
  858. }
  859. });
  860. top_part.appendChild(deselect_btn);
  861. let value_array = value.replace(/\s| /gi, '').split('');
  862. let middle_part = document.createElement('div');
  863. middle_part.className = 'block_obj_big_bang_middle_part';
  864. let node_array = value_array.map((ele, index) => {
  865. let ele_node = this.createBasicBtn('span', ele, '', 'block_obj_big_bang_text');
  866. ele_node.setAttribute('data-index', index);
  867. ele_node.addEventListener('click', e => {
  868. e.stopPropagation();
  869. ele_node.classList.contains('block_obj_big_bang_text_selected') ? ele_node.classList.remove('block_obj_big_bang_text_selected') : ele_node.classList.add('block_obj_big_bang_text_selected');
  870. });
  871. return ele_node;
  872. });
  873. node_array.forEach(item => {
  874. middle_part.appendChild(item);
  875. });
  876. let bottom_part = document.createElement('div');
  877. bottom_part.className = 'block_obj_big_bang_bottom_part';
  878. let add_btn = this.createSpanBtn('block_obj_big_bang_add_btn', '添加', '添加选择的内容到列表中', e => {
  879. e.stopPropagation();
  880. let text_value = this.getSelectedText('block_obj_big_bang_text_selected');
  881. if (text_value && list_id) {
  882. let text_arr = this.stringToArray(text_value);
  883. let save_arr = this.extractList(list_id);
  884. text_arr.forEach(item => {
  885. let status = true;
  886. if (typeof(campare) === 'function') {
  887. let temp_status = campare(item);
  888. if (typeof(temp_status) === 'boolean') {
  889. status = temp_status;
  890. }
  891. }
  892. if (status) {
  893. ! save_arr.includes(item) && document.getElementById(list_id).insertAdjacentElement('afterbegin', this.createListItem(item));
  894. }
  895. });
  896. this.saveConfig();
  897. presentation_div.remove();
  898. }
  899. });
  900. bottom_part.appendChild(add_btn);
  901. let copy_btn = this.createSpanBtn('block_obj_big_bang_copy_btn', '复制', '复制选择的内容到剪贴板中', e => {
  902. e.stopPropagation();
  903. let text_value = this.getSelectedText('block_obj_big_bang_text_selected');
  904. if (text_value) {
  905. GM_setClipboard(text_value, 'text');
  906. presentation_div.remove();
  907. }
  908. });
  909. bottom_part.appendChild(copy_btn);
  910. dialog_div.appendChild(top_part);
  911. dialog_div.appendChild(middle_part);
  912. dialog_div.appendChild(bottom_part);
  913. document.body.appendChild(presentation_div);
  914. }
  915. getSelectedText(classname) {
  916. let selected_array = document.getElementsByClassName(classname);
  917. let last_index = -1;
  918. let text_value = '';
  919. for (let selected of selected_array) {
  920. let index = selected.getAttribute('data-index') || -1;
  921. if (Number(index) == last_index + 1) {
  922. text_value += selected.textContent;
  923. } else {
  924. text_value = text_value ? text_value + ',' + selected.textContent : selected.textContent;
  925. }
  926. last_index = Number(index);
  927. }
  928. return text_value;
  929. }
  930. buttonClicked(button, click_title, click_class) {
  931. let original_title = button.title;
  932. button.title = click_title;
  933. click_class && button.classList.add(click_class);
  934. timer && window.clearTimeout(timer);
  935. var timer = window.setTimeout(() => {
  936. button.title = original_title;
  937. button.classList.remove(click_class);
  938. }, 1000);
  939. }
  940. extractList(list_id) {
  941. let re_arr = [];
  942. let list_dom = document.getElementById(list_id);
  943. let list_arr = list_dom.getElementsByClassName('block_obj_child_text');
  944. for (let i = list_arr.length - 1; i >= 0; i --) {
  945. list_arr[i].title ? re_arr.push(list_arr[i].title) : re_arr.push(list_arr[i].textContent);
  946. }
  947. return re_arr;
  948. }
  949. stringToArray(text_string) {
  950. let temp_array = text_string.split(',');
  951. let return_array = [];
  952. for (let i = 0, l = temp_array.length; i < l; i ++) {
  953. for (let j = i + 1; j < l; j ++) {
  954. if (temp_array[i] === temp_array[j]) {
  955. ++ i;
  956. j = i;
  957. }
  958. }
  959. return_array.push(temp_array[i]);
  960. }
  961. return return_array;
  962. }
  963. toggleList(li_classname) {
  964. for (let li of this.ulNode.querySelectorAll('li')) {
  965. if (li.classList.contains(li_classname)) {
  966. let list_textarea_div = li.querySelector('.block_obj_list_textarea_div');
  967. if (list_textarea_div) {
  968. list_textarea_div.classList.contains('block_obj_list_textarea_expand') ? list_textarea_div.classList.remove('block_obj_list_textarea_expand') : list_textarea_div.classList.add('block_obj_list_textarea_expand');
  969. }
  970. } else {
  971. li.classList.contains('block_obj_li_hide') ? li.classList.remove('block_obj_li_hide') : li.classList.add('block_obj_li_hide');
  972. }
  973. }
  974. for (let br of this.ulNode.querySelectorAll('br')) {
  975. br.classList.contains('block_obj_li_hide') ? br.classList.remove('block_obj_li_hide') : br.classList.add('block_obj_li_hide');
  976. }
  977. }
  978. convertArray(string_array) {
  979. let re_arr = [];
  980. if (Array.isArray(string_array)) {
  981. for (let i = 0; i < string_array.length; i ++) {
  982. try {
  983. let new_reg = new RegExp(string_array[i].replace(/^\/|\/[a-z]*$/gi, ''), string_array[i].replace(/^\/.*\/[^a-z]*/i, ''));
  984. re_arr.push(new_reg);
  985. } catch(e) {
  986. console.error('Block_Obj: The transformation contains invalid regular expressions.');
  987. console.error(e);
  988. }
  989. }
  990. }
  991. return re_arr;
  992. }
  993. }
  994. Block_Obj.count = 0;
  995. Block_Obj.fn = {
  996. 'hideOperation': (node, hide_status, method = 0) => {
  997. if (node && node instanceof HTMLElement) {
  998. if (hide_status) {
  999. if (method === 0) {
  1000. node.classList.add('block_obj_none');
  1001. } else if (method === 1) {
  1002. node.classList.add('block_obj_hidden');
  1003. } else if (method === 2) {
  1004. node.style.display = 'none';
  1005. } else if (method === 3) {
  1006. node.style.visibility = 'hidden';
  1007. }
  1008. } else {
  1009. if (method === 0) {
  1010. node.classList.remove('block_obj_none');
  1011. } else if (method === 1) {
  1012. node.classList.remove('block_obj_hidden');
  1013. } else if (method === 2) {
  1014. node.style.display = '';
  1015. } else if (method === 3) {
  1016. node.style.visibility = '';
  1017. }
  1018. }
  1019. }
  1020. },
  1021. 'getVersion': () => {
  1022. return '2.8.2';
  1023. }
  1024. };