Block_Obj

BLOCK_OBJ

目前為 2020-07-25 提交的版本,檢視 最新版本

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @require https://update.cn-greasyfork.org/scripts/407543/830427/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.5.3
  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-bottom: 2px;
  81. margin-top: 2px;
  82. }
  83. .block_obj_separator_symbol {
  84. background-color: #303030;
  85. height: 2px;
  86. margin-bottom: 5px;
  87. margin-top: 5px;
  88. min-width: 400px;
  89. }
  90. .block_obj_input_div {
  91. margin-top: 5px;
  92. }
  93. .block_obj_input {
  94. background-color: #C0C0C0;
  95. border: 1px solid #C0C0C0;
  96. color: #000;
  97. font-size: 13px;
  98. min-height: 15px;
  99. margin-left: 5px;
  100. margin-right: 5px;
  101. padding-left: 4px;
  102. }
  103. .block_obj_keyword_input {
  104. width: 150px;
  105. }
  106. .block_obj_input_btn {
  107. background-color: #3da9cc;
  108. border-radius: 3px;
  109. border: 1px solid #73C9E5;
  110. box-shadow: 0 0 4px #73C9E5;
  111. color: #FFF;
  112. cursor: pointer;
  113. display: inline-block;
  114. min-height: 15px;
  115. line-height: normal;
  116. margin-left: 5px;
  117. text-align: center;
  118. vertical-align: bottom;
  119. white-space: nowrap;
  120. width: 30px;
  121. }
  122. .block_obj_list_div {
  123. margin-top: 5px;
  124. }
  125. .block_obj_list_textarea_div {
  126. border: 1px dotted #00A1D6;
  127. margin-top: 3px;
  128. max-height: 60px;
  129. min-height: 3px;
  130. overflow: auto;
  131. }
  132. .block_obj_list_textarea_div::-webkit-scrollbar {
  133. background-color: #979797;
  134. border-radius: 5px;
  135. width: 10px;
  136. }
  137. .block_obj_list_textarea_div::-webkit-scrollbar-thumb {
  138. background-color: #404040;
  139. border-radius: 5px;
  140. }
  141. .block_obj_button_clicked {
  142. color: #000;
  143. }
  144. .block_obj_child_span {
  145. background-color: #3D3D3D;
  146. border-radius: 5px;
  147. border: 1px solid #3D3D3D;
  148. display: inline-block;
  149. margin: 3px;
  150. padding: 2px;
  151. min-height: 18px;
  152. line-height: normal;
  153. }
  154. .block_obj_child_text {
  155. border-right: 1px solid #A9181C;
  156. margin-right: 4px;
  157. padding-right: 4px;
  158. }
  159. .block_obj_child_del {
  160. color: #A9181C;
  161. cursor: pointer;
  162. }
  163. .block_obj_list_textarea_expand {
  164. max-height: 720px;
  165. }
  166. .block_obj_li_hide {
  167. display: none;
  168. }
  169. .block_obj_reg_input {
  170. width: 100px;
  171. }
  172. .block_obj_modifier_input {
  173. width: 50px;
  174. }
  175. .block_obj_button {
  176. background-color: #FB7299;
  177. border-radius: 4px;
  178. border: 1px solid #FB7299;
  179. color: #FFF;
  180. cursor: pointer;
  181. margin-top: 5px;
  182. padding: 2px 4px;
  183. position: relative;
  184. min-height: 17px;
  185. line-height: normal;
  186. }
  187. .block_obj_save_button {
  188. float: right;
  189. margin-right: 5px;
  190. }
  191. .block_obj_cancel_button {
  192. float: left;
  193. margin-left: 5px;
  194. }
  195. .block_obj_expand_box {
  196. bottom: 0px;
  197. height: 6vh;
  198. position: fixed;
  199. right: -6vw;
  200. transition: 0.5s;
  201. width: 12vw;
  202. z-index: 99999;
  203. }
  204. .block_obj_show_expand_box {
  205. right: 0;
  206. width: 6vw;
  207. }
  208. .block_obj_expand_span {
  209. background-color: #00A1D6;
  210. border-radius: 19px;
  211. border: 1px solid #00A1D6;
  212. bottom: 1vh;
  213. color: #FFF;
  214. cursor: pointer;
  215. display: block;
  216. font-size: 13px;
  217. height: 38px;
  218. line-height: 38px;
  219. position: absolute;
  220. right: 1vw;
  221. text-align: center;
  222. width: 38px;
  223. z-index: 99999;
  224. }
  225. .block_obj_expand_span:hover {
  226. box-shadow: 0 0 5px 1px green;
  227. }
  228. .block_obj_move_right {
  229. margin-left: 15px;
  230. }
  231. .block_obj_none {
  232. display: none !important;
  233. }
  234. .block_obj_hidden {
  235. visibility: hidden !important;
  236. }
  237. `;
  238. class Block_Obj {
  239. constructor(config_key, reg_key_array = []) {
  240. this.wrapDiv = null;
  241. this.mainFieldset = null;
  242. this.ulNode = null;
  243. this.style = null;
  244. this.saveField = [];
  245. this.onSave = null;
  246. this.onChange = null;
  247. this.field = [];
  248. this.configKey = config_key;
  249. this.regKeyArray = reg_key_array;
  250. this.config = this.readConfig();
  251. }
  252. init(initialization) {
  253. if (! this.id) {
  254. this.id = initialization.id ? 'blockObj_' + initialization.id : 'blockObj_' + Block_Obj.count;
  255. ! initialization.id && Block_Obj.count ++;
  256. }
  257. this.display = initialization.display ? true : false;
  258. if (initialization.events) {
  259. if (typeof(initialization.events['save']) === 'function') {
  260. this.onSave = initialization.events['save'];
  261. }
  262. if (typeof(initialization.events['change']) === 'function') {
  263. this.onChange = initialization.events['change'];
  264. }
  265. }
  266. this.style = document.createElement('style');
  267. this.style.type = 'text/css';
  268. this.style.innerHTML = BLOCK_STYLE;
  269. document.body.appendChild(this.style);
  270. if (initialization.style && typeof(initialization.style) === 'string') {
  271. let external_style = document.createElement('style');
  272. external_style.type = 'text/css';
  273. external_style.innerHTML = initialization.style;
  274. document.body.appendChild(external_style);
  275. }
  276. ! this.wrapDiv && this.createSettingsPanel();
  277. this.field = initialization.field;
  278. this.settingsPanel();
  279. initialization.menu && typeof(GM_registerMenuCommand) === 'function' && GM_registerMenuCommand(initialization.menu, () => this.expandWrap());
  280. typeof(GM_addValueChangeListener) === 'function' && GM_addValueChangeListener(this.configKey, (_name, _old_value, new_value, remote) => {
  281. if (remote) {
  282. this.destroyAndRebuild(new_value);
  283. typeof(this.onChange) === 'function' && this.onChange(this.getConfig());
  284. }
  285. });
  286. let expand_box = document.createElement('div');
  287. expand_box.className = 'block_obj_expand_box';
  288. expand_box.onmouseenter = function() {
  289. this.classList.add('block_obj_show_expand_box');
  290. };
  291. expand_box.onmouseleave = function() {
  292. this.classList.remove('block_obj_show_expand_box');
  293. };
  294. let expand_span = document.createElement('span');
  295. expand_span.id = this.id + '_expandSpan';
  296. expand_span.className = 'block_obj_expand_span';
  297. expand_span.textContent = '屏蔽';
  298. expand_span.title = '显示屏蔽设置';
  299. expand_span.addEventListener('click', () => this.expandWrap());
  300. expand_box.appendChild(expand_span);
  301. document.body.appendChild(expand_box);
  302. }
  303. settingsPanel() {
  304. if (Array.isArray(this.field)) {
  305. this.field.forEach(ele => {
  306. if (! this.wrapDiv.querySelector('#' + this.id + '_' + (ele.id ? ele.id : ''))) {
  307. switch (ele.type.toLowerCase()) {
  308. case 'separator':
  309. case 's':
  310. this.insertSeparator(ele.id, ele.label, ele.title, ele.classname);
  311. break;
  312. case 'input':
  313. case 'i':
  314. this.insertInput(ele.id, ele.list_id, false, ele.label, ele.title, ele.placeholder, ele.classname, ele.campare);
  315. break;
  316. case 'reg_input':
  317. case 'ri':
  318. this.insertInput(ele.id, ele.list_id, true, ele.label, ele.title, ele.placeholder, ele.classname, ele.campare, ele.modifier_label, ele.modifier_placeholder);
  319. break;
  320. case 'list':
  321. case 'l':
  322. this.insertList(ele.id, (this.config[ele.id] == null ? ele.default : this.config[ele.id]), ele.label, ele.title, ele.classname);
  323. break;
  324. case 'checkbox':
  325. case 'c':
  326. default:
  327. this.insertCheckbox(ele.id, ele.label, ele.title, (this.config[ele.id] == null ? ele.default : this.config[ele.id]), ele.classname, ele.move_right);
  328. break;
  329. }
  330. }
  331. });
  332. }
  333. let save_button = this.createSpanBtn('block_obj_button block_obj_save_button', '保存并关闭', '保存设置并关闭设置窗口', e => {
  334. this.expandWrap();
  335. this.saveConfig();
  336. });
  337. let only_save_button = this.createSpanBtn('block_obj_button block_obj_save_button', '仅保存', '仅保存设置', e => {
  338. only_save_button.textContent = '已保存';
  339. save_timer && window.clearTimeout(save_timer);
  340. var save_timer = window.setTimeout(() => {
  341. only_save_button.textContent = '仅保存';
  342. }, 1000);
  343. this.saveConfig();
  344. });
  345. let cancel_button = this.createSpanBtn('block_obj_button block_obj_cancel_button', '取消', '关闭设置窗口', e => {
  346. this.expandWrap();
  347. cancel_timer && window.clearTimeout(cancel_timer);
  348. var cancel_timer = window.setTimeout(() => {
  349. this.display = false;
  350. this.destroyAndRebuild();
  351. }, 800);
  352. e.stopPropagation();
  353. });
  354. this.ulNode.appendChild(save_button);
  355. this.ulNode.appendChild(only_save_button);
  356. this.ulNode.appendChild(cancel_button);
  357. document.body.appendChild(this.wrapDiv);
  358. }
  359. getConfig() {
  360. let real_config = {};
  361. Object.assign(real_config, this.config);
  362. this.regKeyArray.forEach(key => {
  363. real_config[key] = this.convertArray(real_config[key]);
  364. });
  365. return real_config;
  366. }
  367. readConfig() {
  368. let config = {};
  369. if (typeof(GM_getValue) === 'function' && this.configKey) {
  370. config = GM_getValue(this.configKey, {});
  371. }
  372. return config;
  373. }
  374. saveConfig() {
  375. this.saveField.forEach(item => {
  376. if (item.type == 'checkbox') {
  377. this.config[item.key] = document.getElementById(this.id + '_' + item.key).checked;
  378. } else if (item.type == 'list') {
  379. this.config[item.key] = this.extractList(this.id + '_' + item.key);
  380. }
  381. typeof(GM_setValue) && GM_setValue(this.configKey, this.config);
  382. typeof(this.onSave) === 'function' && this.onSave(this.getConfig());
  383. });
  384. }
  385. createSettingsPanel() {
  386. this.wrapDiv = document.createElement('div');
  387. this.wrapDiv.id = this.id + '_wrapDiv';
  388. this.wrapDiv.className = 'block_obj_wrap_div ' + (this.display ? 'block_obj_show_wrap' : 'block_obj_hidden_wrap');
  389. this.mainFieldset = document.createElement('fieldset');
  390. this.mainFieldset.id = this.id + '_mainFieldset';
  391. this.mainFieldset.className = 'block_obj_main_fieldset';
  392. this.wrapDiv.appendChild(this.mainFieldset);
  393. this.ulNode = document.createElement('ul');
  394. this.ulNode.id = this.id + '_ulNode';
  395. this.ulNode.className = 'block_obj_ul_node';
  396. this.mainFieldset.appendChild(this.ulNode);
  397. document.body.appendChild(this.wrapDiv);
  398. }
  399. destroyAndRebuild(new_config = null) {
  400. this.config = new_config || this.config;
  401. document.body.removeChild(this.wrapDiv);
  402. this.createSettingsPanel();
  403. this.settingsPanel();
  404. }
  405. expandWrap() {
  406. let panel = document.getElementById(this.id + '_wrapDiv');
  407. let button = document.getElementById(this.id + '_expandSpan');
  408. if (panel) {
  409. if (panel.classList.contains('block_obj_show_wrap')) {
  410. this.display = false;
  411. panel.classList.remove('block_obj_show_wrap');
  412. panel.classList.add('block_obj_hidden_wrap');
  413. if (button) {
  414. button.title = '显示屏蔽设置';
  415. }
  416. } else {
  417. this.display = true;
  418. panel.classList.remove('block_obj_hidden_wrap');
  419. panel.classList.add('block_obj_show_wrap');
  420. if (button) {
  421. button.title = '隐藏屏蔽设置';
  422. }
  423. }
  424. }
  425. }
  426. insertCheckbox(id, label = '', title = '', checked = false, classname = null, move_right = false) {
  427. let checkbox_li = document.createElement('li');
  428. checkbox_li.className = 'block_obj_checkbox_li';
  429. classname && checkbox_li.classList.add(classname);
  430. move_right && checkbox_li.classList.add('block_obj_move_right');
  431. let checkbox_input = document.createElement('input');
  432. checkbox_input.type = 'checkbox';
  433. checkbox_input.className = 'block_obj_checkbox_input';
  434. checkbox_input.id = this.id + '_' + id;
  435. checkbox_input.checked = checked ? true : false;
  436. let checkbox_label = document.createElement('label');
  437. checkbox_label.className = 'block_obj_checkbox_label';
  438. checkbox_label.setAttribute('for', this.id + '_' + id);
  439. checkbox_label.textContent = label;
  440. checkbox_label.title = title;
  441. checkbox_li.appendChild(checkbox_input);
  442. checkbox_li.appendChild(checkbox_label);
  443. this.ulNode.appendChild(checkbox_li);
  444. this.saveField.push({
  445. 'key': id,
  446. 'type': 'checkbox'
  447. });
  448. }
  449. insertSeparator(id = null, label = null, title = null, li_classname = null) {
  450. let separator_li = document.createElement('li');
  451. separator_li.className = 'block_obj_separator_li';
  452. li_classname && separator_li.classList.add('block_obj_' + li_classname);
  453. let separator_div = document.createElement('div');
  454. if (id) {
  455. separator_div.id = this.id + '_' + id;
  456. }
  457. if (label) {
  458. separator_div.className = 'block_obj_separator_text';
  459. separator_div.textContent = label;
  460. } else {
  461. separator_div.className = 'block_obj_separator_symbol';
  462. }
  463. separator_div.title = title ? title : '';
  464. separator_li.appendChild(separator_div);
  465. this.ulNode.appendChild(separator_li);
  466. }
  467. insertInput(id, list_id, is_reg = false, label = '', title = '', placeholder = '', li_classname = null, campare = null, modifier_label = '', modifier_placeholder = '') {
  468. let input_li = document.createElement('li');
  469. input_li.className = li_classname ? 'block_obj_' + li_classname : '';
  470. let input_div = document.createElement('div');
  471. input_div.className = 'block_obj_input_div';
  472. let input_span = document.createElement('span');
  473. input_span.className = 'block_obj_input_span';
  474. input_span.textContent = label;
  475. input_div.appendChild(input_span);
  476. let input = document.createElement('input');
  477. input.id = this.id + '_' + id;
  478. input.title = title;
  479. input.placeholder = placeholder;
  480. input.type = 'text';
  481. input.className = is_reg ? 'block_obj_input block_obj_reg_input' : 'block_obj_input block_obj_keyword_input';
  482. input_span.appendChild(input);
  483. let modifier_span = document.createElement('span');
  484. modifier_span.textContent = modifier_label;
  485. is_reg && input_div.appendChild(modifier_span);
  486. let modifier_input = document.createElement('input');
  487. modifier_input.placeholder = modifier_placeholder;
  488. modifier_input.type = 'text';
  489. modifier_input.className = 'block_obj_input block_obj_modifier_input';
  490. modifier_span.appendChild(modifier_input);
  491. list_id = this.id + '_' + list_id;
  492. input.addEventListener('keyup', e => {
  493. if (e.keyCode === 13) {
  494. is_reg ? this.addRegListItem(input, modifier_input, list_id) : this.addListItem(input, list_id, campare);
  495. }
  496. });
  497. modifier_input.addEventListener('keyup', e => {
  498. e.keyCode === 13 && this.addRegListItem(input, modifier_input, list_id);
  499. });
  500. let add_btn = this.createSpanBtn('block_obj_input_btn', '添加', '添加内容到列表中', e => {
  501. if (is_reg ? this.addRegListItem(input, modifier_input, list_id) : this.addListItem(input, list_id, campare))
  502. this.buttonClicked(add_btn, '添加成功', 'block_obj_button_clicked');
  503. });
  504. let delete_btn = this.createSpanBtn('block_obj_input_btn', '删除', '从列表中删除符合的项目', e => {
  505. if (is_reg ? this.delRegListItem(input, modifier_input, list_id) : this.delListItem(input, list_id))
  506. this.buttonClicked(delete_btn, '删除成功', 'block_obj_button_clicked');
  507. });
  508. let clear_btn = this.createSpanBtn('block_obj_input_btn', '清空', '清空列表', e => {
  509. document.getElementById(list_id).innerHTML = '';
  510. this.buttonClicked(clear_btn, '清除成功', 'block_obj_button_clicked');
  511. });
  512. let copy_btn = this.createSpanBtn('block_obj_input_btn', '复制', '复制列表', e => {
  513. if (typeof(GM_setClipboard) == 'function') {
  514. GM_setClipboard(this.extractList(list_id).toString(), 'text');
  515. this.buttonClicked(copy_btn, '复制成功', 'block_obj_button_clicked');
  516. } else {
  517. alert('GM_setClipboard is not an interface.');
  518. }
  519. });
  520. let expand_btn = this.createSpanBtn('block_obj_input_btn', '展开', '展开列表', e => {
  521. li_classname && this.toggleList('block_obj_' + li_classname);
  522. if (expand_btn.textContent == '展开') {
  523. expand_btn.textContent = '恢复';
  524. expand_btn.title = '收缩列表';
  525. } else {
  526. expand_btn.textContent = '展开';
  527. expand_btn.title = '展开列表';
  528. }
  529. });
  530. input_div.appendChild(add_btn);
  531. input_div.appendChild(delete_btn);
  532. input_div.appendChild(clear_btn);
  533. input_div.appendChild(copy_btn);
  534. input_div.appendChild(expand_btn);
  535. input_li.appendChild(input_div);
  536. this.ulNode.appendChild(input_li);
  537. }
  538. insertList(id, save_array = [], label = '', title = '', li_classname = '') {
  539. let list_li = document.createElement('li');
  540. list_li.className = li_classname ? 'block_obj_' + li_classname : '';
  541. let list_div = document.createElement('div');
  542. list_div.className = 'block_obj_list_div';
  543. list_div.textContent = label;
  544. list_div.title = title;
  545. let list_textarea_div = document.createElement('div');
  546. list_textarea_div.id = this.id + '_' + id;
  547. list_textarea_div.className = 'block_obj_list_textarea_div';
  548. for (let item of save_array) {
  549. item && list_textarea_div.insertAdjacentElement('afterbegin', this.createListItem(item));
  550. }
  551. list_div.appendChild(list_textarea_div);
  552. list_li.appendChild(list_div);
  553. this.ulNode.appendChild(list_li);
  554. this.saveField.push({
  555. 'key': id,
  556. 'type': 'list'
  557. });
  558. }
  559. addListItem(input, list_id, campare = null) {
  560. let text_value = input.value;
  561. if (text_value) {
  562. let status = true;
  563. if (typeof(campare) === 'function') {
  564. let temp_status = campare(text_value);
  565. if (typeof(temp_status) === 'boolean') {
  566. status = temp_status;
  567. }
  568. }
  569. if (status) {
  570. let text_arr = this.stringToArray(text_value);
  571. let save_arr = this.extractList(list_id);
  572. text_arr.forEach(item => {
  573. ! save_arr.includes(item) && document.getElementById(list_id).insertAdjacentElement('afterbegin', this.createListItem(item));
  574. });
  575. input.value = '';
  576. return true;
  577. }
  578. }
  579. return false;
  580. }
  581. delListItem(input, list_id) {
  582. let text_value = input.value;
  583. if (text_value) {
  584. let del_status = false;
  585. let text_arr = this.stringToArray(text_value);
  586. let save_arr = this.extractList(list_id);
  587. text_arr.forEach(item => {
  588. if (save_arr.includes(item)) {
  589. let total_child = document.getElementById(list_id).getElementsByClassName('block_obj_child_span');
  590. try {
  591. document.getElementById(list_id).removeChild(total_child[total_child.length - 1 - save_arr.indexOf(item)]);
  592. del_status = true;
  593. } catch(e) {
  594. del_status = false;
  595. console.error('Block_Obj: Error deleting element.');
  596. console.error(e);
  597. }
  598. }
  599. });
  600. if (del_status) {
  601. input.value = '';
  602. return true;
  603. }
  604. }
  605. return false;
  606. }
  607. addRegListItem(reg_input, modifier_input, list_id) {
  608. let reg_value = reg_input.value;
  609. let modifier_value = modifier_input.value;
  610. if (reg_value) {
  611. try {
  612. let reg_obj = new RegExp(reg_value, modifier_value);
  613. let save_arr = this.extractList(list_id);
  614. ! save_arr.includes(reg_obj.toString()) && document.getElementById(list_id).insertAdjacentElement('afterbegin', this.createListItem(reg_obj.toString()));
  615. reg_input.value = '';
  616. modifier_input.value = '';
  617. return true;
  618. } catch(e) {
  619. console.error('Block_Obj: Invalid regular expression.');
  620. console.error(e);
  621. }
  622. }
  623. return false;
  624. }
  625. delRegListItem(reg_input, modifier_input, list_id) {
  626. let reg_value = reg_input.value;
  627. let modifier_value = modifier_input.value;
  628. if (reg_value) {
  629. let del_status = false;
  630. try {
  631. let reg_obj = new RegExp(reg_value, modifier_value);
  632. let save_arr = this.extractList(list_id);
  633. if (save_arr.includes(reg_obj.toString())) {
  634. let total_child = document.getElementById(list_id).getElementsByClassName('block_obj_child_span');
  635. document.getElementById(list_id).removeChild(total_child[total_child.length - 1 - save_arr.indexOf(reg_obj.toString())]);
  636. del_status = true;
  637. }
  638. } catch(e) {
  639. del_status = false;
  640. console.error('Block_Obj: Invalid regular expression or error deleting element.');
  641. console.error(e);
  642. }
  643. if (del_status) {
  644. reg_input.value = '';
  645. modifier_input.value = '';
  646. return true;
  647. }
  648. return false;
  649. }
  650. }
  651. createSpanBtn(classname, label, title, callback) {
  652. let btn_span = document.createElement('span');
  653. btn_span.className = classname;
  654. btn_span.textContent = label;
  655. btn_span.title = title;
  656. btn_span.addEventListener('click', e => typeof(callback) === 'function' && callback(e));
  657. return btn_span;
  658. }
  659. createListItem(text_value) {
  660. let child_span = document.createElement('span');
  661. child_span.className = 'block_obj_child_span';
  662. let text_span = document.createElement('span');
  663. text_span.className = 'block_obj_child_text';
  664. text_span.textContent = text_value.length > 9 ? text_value.slice(0, 3) + '...' + text_value.slice(-3) : text_value;
  665. if (text_value.length > 9) {
  666. text_span.title = text_value;
  667. }
  668. let del_span = document.createElement('span');
  669. del_span.textContent = 'X';
  670. del_span.title = '移除';
  671. del_span.className = 'block_obj_child_del';
  672. del_span.addEventListener('click', e => child_span.remove());
  673. child_span.appendChild(text_span);
  674. child_span.appendChild(del_span);
  675. return child_span;
  676. }
  677. createBlockBtn(value, list_id, classname, type = 'span', text = '', title = '') {
  678. let btn_type = 'span';
  679. if (typeof(type) === 'string') {
  680. switch (type.toLowerCase()) {
  681. case 'div':
  682. case 'd':
  683. btn_type = 'div';
  684. break;
  685. case 'a':
  686. btn_type = 'a';
  687. break;
  688. case 'button':
  689. btn_type = 'button';
  690. break;
  691. case 'input':
  692. btn_type = 'input';
  693. break;
  694. case 'i':
  695. btn_type = 'i';
  696. break;
  697. case 'b':
  698. btn_type = 'b';
  699. break;
  700. case 'span':
  701. case 's':
  702. default:
  703. btn_type = 'span';
  704. break;
  705. }
  706. }
  707. let block_btn = document.createElement(btn_type);
  708. block_btn.textContent = text ? text : '';
  709. block_btn.title = title ? title : '';
  710. block_btn.className = classname ? classname : '';
  711. block_btn.addEventListener('click', e => {
  712. e.stopPropagation();
  713. if (value && list_id) {
  714. list_id = this.id + '_' + list_id;
  715. let save_arr = this.extractList(list_id);
  716. ! save_arr.includes(value) && document.getElementById(list_id) && document.getElementById(list_id).insertAdjacentElement('afterbegin', this.createListItem(value));
  717. }
  718. this.saveConfig();
  719. });
  720. return block_btn;
  721. }
  722. buttonClicked(button, click_title, click_class) {
  723. let original_title = button.title;
  724. button.title = click_title;
  725. click_class && button.classList.add(click_class);
  726. timer && window.clearTimeout(timer);
  727. var timer = window.setTimeout(() => {
  728. button.title = original_title;
  729. button.classList.remove(click_class);
  730. }, 1000);
  731. }
  732. extractList(list_id) {
  733. let re_arr = [];
  734. let list_dom = document.getElementById(list_id);
  735. let list_arr = list_dom.getElementsByClassName('block_obj_child_text');
  736. for (let i = list_arr.length - 1; i >= 0; i --) {
  737. list_arr[i].title ? re_arr.push(list_arr[i].title) : re_arr.push(list_arr[i].textContent);
  738. }
  739. return re_arr;
  740. }
  741. stringToArray(text_string) {
  742. let temp_array = text_string.split(',');
  743. let return_array = [];
  744. for (let i = 0, l = temp_array.length; i < l; i ++) {
  745. for (let j = i + 1; j < l; j ++) {
  746. if (temp_array[i] === temp_array[j]) {
  747. ++ i;
  748. j = i;
  749. }
  750. }
  751. return_array.push(temp_array[i]);
  752. }
  753. return return_array;
  754. }
  755. toggleList(li_classname) {
  756. for (let li of this.ulNode.querySelectorAll('li')) {
  757. if (li.classList.contains(li_classname)) {
  758. let list_textarea_div = li.querySelector('.block_obj_list_textarea_div');
  759. if (list_textarea_div) {
  760. 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');
  761. }
  762. } else {
  763. li.classList.contains('block_obj_li_hide') ? li.classList.remove('block_obj_li_hide') : li.classList.add('block_obj_li_hide');
  764. }
  765. }
  766. }
  767. convertArray(string_array) {
  768. let re_arr = [];
  769. if (Array.isArray(string_array)) {
  770. for (let i in string_array) {
  771. try {
  772. let new_reg = new RegExp(string_array[i].replace(/^\/|\/[a-z]*$/gi, ''), string_array[i].replace(/^\/.*\/[^a-z]*/i, ''));
  773. re_arr.push(new_reg);
  774. } catch(e) {
  775. console.error('Block_Obj: The transformation contains invalid regular expressions.');
  776. console.error(e);
  777. }
  778. }
  779. }
  780. return re_arr;
  781. }
  782. }
  783. Block_Obj.count = 0;
  784. Block_Obj.fn = {
  785. 'hideOperation': (node, hide_status, method) => {
  786. if (node && node instanceof HTMLElement) {
  787. if (hide_status) {
  788. if (method === 0) {
  789. node.classList.add('block_obj_none');
  790. } else if (method === 1) {
  791. node.classList.add('block_obj_hidden');
  792. } else if (method === 2) {
  793. node.style.display = 'none';
  794. } else if (method === 3) {
  795. node.style.visibility = 'hidden';
  796. }
  797. } else {
  798. if (method === 0) {
  799. node.classList.remove('block_obj_none');
  800. } else if (method === 1) {
  801. node.classList.remove('block_obj_hidden');
  802. } else if (method === 2) {
  803. node.style.display = '';
  804. } else if (method === 3) {
  805. node.style.visibility = '';
  806. }
  807. }
  808. }
  809. }
  810. };