☰

GM_option

support tool for UserConfig.(library)

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/9507/151184/GM_option.js 

  1. // ==UserScript==
  2. // @name        GM_option
  3. // @namespace   https://gf.qytechs.cn/ja/scripts/9507
  4. // @homepageURL https://gf.qytechs.cn/ja/scripts/9507
  5. // @license     http://creativecommons.org/licenses/by-nc-sa/4.0/
  6. // @include     http://*
  7. // @include     https://*
  8. // @include     file:*
  9. // @copyright   Noi & Noisys & NoiSystem & NoiProject
  10. // @author      noi
  11. // @description support tool for UserConfig.(library)
  12. // @version     1.04
  13. // @grant       GM_registerMenuCommand
  14. // @grant       GM_setValue
  15. // @grant       GM_getValue
  16. // @grant       GM_deleteValue
  17. // @grant       GM_log
  18. // ==/UserScript==
  19.  
  20. /*************************************************************************
  21. [about]
  22.  
  23. This script is the library to make a setting screen.
  24. I made this support tool in order to make more easily.
  25.  
  26. *************************************************************************
  27. [How to use]
  28.  
  29. Sample code is end of this Script.
  30. Plz test it.
  31.  
  32.  
  33. If savedata is none....?
  34. <first start-up or no savedata or parameter(HTML tag) changed>
  35. This script make GM_option window and save default.
  36. <next time>
  37. This script never make GM_option window without running open-function.
  38.  
  39. <@grant>----------------------------------------------
  40. you need to add @grant.
  41. // @grant       GM_setValue
  42. // @grant       GM_getValue
  43. // @grant       GM_deleteValue
  44. // @grant       GM_registerMenuCommand
  45.  
  46. GM_setValue and GM_getValue and GM_deleteValue is required.
  47. GM_registerMenuCommand is optional.
  48.  
  49.  
  50. <start function>----------------------------------------------
  51. GM_option.open(String,String,HashArray);
  52.  
  53. first String is HTML Tag(header ex: style or script or etc...)
  54. second String is HTML Tag(document.body).
  55. third HashArray is optional,it's messages for dialog.
  56.  
  57. Message List
  58. 'save'   -  when click save button.
  59. 'reset'  -  when click reset button.(discard changes)
  60. 'clear'  -  when click clear button.(delete savedata)
  61. 'delete' -  when click del button.(delete multiple)
  62.  
  63.  
  64. <user function>--------------------------------------
  65. At first,get user's settings.
  66. GM_option.get();
  67.  
  68. return hashArray(Associative array).
  69.  
  70.  
  71. <HTML tag>-------------------------------------------
  72. use form inputs.
  73. 'name' is save-key.
  74. 'value' is save-data.
  75.  
  76. ex)
  77. HTML tag is...
  78. <input type="text" name="this_is_Key" value="this_is_Data" />
  79.  
  80. Save Data is...
  81. {"this_is_Key":"this_is_Data"}
  82.  
  83.  
  84. <multiple text>--------------------------------------
  85. 'name' is ****_multiple9999.(required)
  86. 9999 is number of array.(required)
  87. 'value' is default.(optional)
  88. 'defArray' is default array.(optional)
  89. <button id="this_is_required"> is addButton.(required)
  90.  
  91. ex)
  92. HTML tag is...
  93. <input type="text" name="freeName_multiple2" value="data1" /> <input type="text" name="freeName_multiple2" value="data2" /> <button id="addButton">add</button>
  94.  
  95. Save Data is...
  96. {"freeName_multiple2":[["data1","data2"],["data3","data4"], and more ]}
  97. "data3" and "data4" are input by user.
  98.  
  99. ex2)
  100. HTML tag is...
  101. <input type="text" name="freeName_multiple2" defArray="data1-2,data1-3,data1-4" value="data1-1" /> <input type="text" name="freeName_multiple2" defArray="data2-2,data2-3,data2-4" value="data2-1" /> <button id="addButton">add</button>
  102.  
  103. Save Data is...
  104. {"freeName_multiple2":[["data1-1","data2-1"],["data1-2","data2-2"],["data1-3","data2-3"],["data1-4","data2-4"],["data1-5","data2-5"], and more ]}
  105. "data1-5" and "data2-5" are input by user.
  106.  
  107. ## caution ##
  108. If elements's 'name' are same, defArray are same array.length.
  109.  
  110. <select-multiple(HTML5)>----------------------------
  111. selected is checked.(optional)
  112.  
  113. ex)
  114. HTML tag is...
  115. <select name="selectName" multiple size=5>
  116. <option name="optionName1" value="data1"         >item1</option>
  117. <option name="optionName2" value="data2" selected>item2</option>
  118. <option name="optionName3" value="data3"         >item3</option>
  119. <option name="optionName4" value="data4" selected>item4</option>
  120. <option name="optionName5" value="data5"         >item5</option>
  121.  
  122. Save Data is...
  123. {"selectName":"{\"data2\":true,\"data4\":true}"}
  124.  
  125. To use...
  126. var userSettings = GM_option.get();
  127. var selectArray = JSON.parse(userSettings['selectName']);
  128.  
  129.  
  130. <addEventListener>----------------------------------
  131. 'GM_option_loaded'
  132.  
  133. this event is dispatched...
  134. when made GM_option frame                    (@first start-up)
  135. when loaded User's Settings from GM_getValue (@next time)
  136.  
  137. ex)
  138. window.addEventListener('GM_option_loaded',userFunction,false);
  139.  
  140.  
  141. <access GM_option document>----------------------------------
  142. GM_option.frame
  143. GM_option.doc
  144.  
  145. ex)
  146. var frame = GM_option.frame;
  147. var doc = GM_option.doc.head;
  148. var head = GM_option.doc.body;
  149. var form = GM_option.doc.opForm;
  150.  
  151.  
  152. <other function>----------------------------------
  153. after GM_option opened
  154. GM_option.show();  - show GM_option
  155. GM_option.close(); - hide GM_option
  156. GM_option.save();  - save settings & reload
  157. GM_option.reset(); - discard changes
  158. GM_option.clear(); - delete SaveData & reload
  159.  
  160.  
  161. *************************************************************************
  162. [history]
  163.  
  164. 10/07/2016 - v1.04 add:multiple設定でreadonly属性の引き継ぎ
  165. 04/30/2015 - v1.03 add:sandbox
  166. 04/29/2015 - v1.01 add:第二引数(body)に変更があった場合は変更箇所の初期値を保存する。初期値配列の指定方法追加。
  167. 04/29/2015 - v1.01 fix:入力欄でENTERキーを押すとaddボタンを押した時と同じ動作をするバグ。第一引数(head)にスクリプトタグを指定しても動作しないバグ修正。resetボタン修正
  168. 04/26/2015 - v1.0  release
  169. *************************************************************************/
  170.  
  171. var GM_option = {
  172. 	init: function(){
  173. 		GM_option.defScroll = window.onscroll;	//save default scroll
  174. 		var head = GM_option.head;
  175. 		var htmlText = GM_option.htmlText;
  176.  
  177. 		//iframe
  178. 		var obj = GM_option.frame = window.document.createElement('iframe');
  179. 		obj.id = 'GM_option';
  180. 		obj.srcdoc = '<head>' + GM_option.head + '</head><body style="background:white;">' + GM_option.htmlText + '</body>';
  181. 		obj.setAttribute('style','position:fixed;top:0;left:0;right:0;bottom:0; margin:auto; z-index:999999;width:calc(100% - 40px);height:calc(100% - 60px); max-height:90%; max-width:90%; overflow:auto; visibility:hidden; border:none;');
  182. 		obj.sandbox = "allow-same-origin  allow-scripts";
  183. 		document.body.appendChild(obj);
  184.  
  185. 		obj.addEventListener('load', GM_option.make(head,htmlText) ,false);
  186. 	},
  187. 	open: function(head,htmlText,msgArray){
  188. 		GM_option.get();
  189. 		if(htmlText) GM_option.htmlTextCheck(htmlText);
  190.  
  191. 		var oType = Object.prototype.toString.call(htmlText).slice(8, -1);
  192. 		if(!htmlText && htmlText != 'String' && !htmlText.match(/\<.*?\>/)){
  193. 			alert('second parameter(htmltext) is not correct.');
  194. 			return;
  195. 		} 
  196. 		if(!GM_option.event){
  197. 			GM_option.event = document.createEvent('HTMLEvents');
  198. 		        GM_option.event.initEvent('GM_option_loaded', true, false);
  199.  
  200. 			GM_option.msgArray = msgArray;
  201. 		}
  202.  
  203. 		if(!GM_option.makeFlg && GM_option.saveData){
  204. 			GM_option.makeFlg = true;
  205. 			
  206. 			window.dispatchEvent(GM_option.event);
  207. 			return;
  208. 		}
  209.  
  210. 		GM_option.head = head || '';
  211. 		GM_option.htmlText = htmlText = [
  212. 			'<form name="opForm" action="javascript:void(0);" onSubmit="return false;">',
  213. 			'<table id="opTable" style="padding:20px;height:98%;width:98%;"><tr><td align="center" valign="middle">',
  214. 			htmlText,
  215. 			'<span id="consol">',
  216. 			'<input type="button" id="saveConfig" value="save" title="save option" /> ',
  217. 			'<input type="button" id="resetConfig" value="reset" title="Revert To Last Save" /> ',
  218. 			'<input type="button" id="clearConfig" value="clear" title="clear userSettings" /> ',
  219. 			'<button id="closeConfig" title="close option window">close</button>',
  220. 			'</span>',
  221. 			'</td></tr></table></form>'
  222. 		].join('');
  223.  
  224. 		if(htmlText && (!GM_option.frame || !GM_option.layer)) GM_option.init();
  225. 		GM_option.show();
  226. 	},
  227. 	make: function() { return function(){
  228. 		var head = GM_option.head;
  229. 		var htmlText = GM_option.htmlText;
  230.  
  231. 		this.removeEventListener("load", GM_option.make(head,htmlText) ,false);
  232.  
  233. 		var opDoc = GM_option.doc = this.contentDocument;
  234.  
  235. 		//close
  236. 		var closeButton = opDoc.getElementById('closeConfig');
  237. 		closeButton.addEventListener('click',GM_option.close,false);
  238.  
  239. 		//save
  240. 		var saveButton = opDoc.getElementById('saveConfig');
  241. 		saveButton.addEventListener('click',GM_option.save,false);
  242.  
  243. 		//clear
  244. 		var defaultButton = opDoc.getElementById('clearConfig');
  245. 		defaultButton.addEventListener('click',GM_option.clear,false);
  246.  
  247. 		//reset
  248. 		var resetButton = opDoc.getElementById('resetConfig');
  249. 		resetButton.addEventListener('click',GM_option.reset,false);
  250.  
  251. 		GM_option.load();	//デフォルト読み込み
  252. 		if(!GM_option.saveData || GM_option.htmlChangeFlg) GM_option.save();
  253. 		
  254.  
  255. 		//layer
  256. 		var layer = GM_option.layer = window.document.createElement('div');
  257. 		layer.id = 'opLayer';
  258. 		layer.setAttribute('style','position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:black; z-index:5000; opacity:0.7;');
  259. 		document.body.appendChild(layer);
  260. 		
  261. 		layer.addEventListener('click', GM_option.close,false);
  262.  
  263. 		window.addEventListener('beforeunload', function() {
  264. 			window.removeEventListener("beforeunload", arguments.callee,false);
  265. 			layer.removeEventListener('click', GM_option.close,false);
  266. 			closeButton.removeEventListener('click',GM_option.close,false);
  267. 			saveButton.removeEventListener('click',GM_option.save,false);
  268. 			defaultButton.removeEventListener('click',GM_option.clear,false);
  269. 			resetButton.removeEventListener('click',GM_option.reset,false);
  270.  
  271. 			GM_option.remove();
  272. 		},false);
  273.  
  274. 		if(GM_option.makeFlg) GM_option.show();
  275. 		else{
  276. 			GM_option.load();
  277. 			GM_option.close();
  278. 			
  279. 			window.dispatchEvent(GM_option.event);
  280. 		}
  281. 		GM_option.makeFlg = true;
  282.  
  283. 		opDoc = style = head = htmlText = null;
  284. 	}},
  285. 	show: function(){
  286. 		if(!GM_option.frame || !GM_option.layer) return;
  287. 		GM_option.scrollStop(true);
  288. 		GM_option.frame.style.visibility = 'visible';
  289. 		GM_option.layer.style.visibility = 'visible';
  290. 	},
  291. 	save: function(clickFlg){
  292. 		if(clickFlg){
  293. 			var txt = 'Do you want to save?(ok:reload)';
  294. 			if(GM_option.msgArray) txt = GM_option.msgArray['save'] || txt;
  295. 			if(confirm(txt) == false) return
  296. 		}
  297.  
  298. 		var userData = GM_option.get();
  299. 		var form = GM_option.doc.opForm;
  300. 		var array={};
  301. 		var multiArray = {};
  302. 		for(var i=0,j=form.length;i<j;i++){
  303. 			var obj = form[i];
  304. 			var name =obj.name;
  305. 			if(!name) continue;
  306. 			switch(obj.type){
  307. 				case 'checkbox':
  308. 					if(obj.checked)array[name] = true;
  309. 					else array[name] = false;
  310. 					continue;
  311. 				case 'radio':
  312. 					if(obj.checked)array[name] = obj.value;
  313. 					continue;
  314. 				case 'text':
  315. 					if(!name.match(/_multiple(\d+)$/)){
  316. 						array[name] = obj.value;
  317. 						continue;
  318. 					}else{
  319. 						var num = RegExp.$1;
  320. 						if(!array[name])array[name] = [];
  321. 						var arrayNum = array[name].length - 1;
  322. 						if(arrayNum < 0) arrayNum = 0;
  323.  
  324. 						if(!array[name][arrayNum]) array[name][arrayNum] = [];
  325. 						if(array[name][arrayNum].length < num) array[name][arrayNum].push(obj.value);
  326. 						else{
  327. 							arrayNum++;
  328. 							if(!array[name][arrayNum]) array[name].push([]);
  329. 							array[name][arrayNum].push(obj.value);
  330. 						}
  331.  
  332. 						if(!obj.hasAttribute('defArray') || (userData && userData[name])) continue;
  333.  
  334. 						if(!multiArray[name]) multiArray[name] = [];
  335. 						multiArray[name].push(obj.getAttribute('defArray'));
  336.  
  337. 						continue;
  338. 					}
  339. 					continue;
  340. 				case 'select-one':
  341. 					var opt = obj.getElementsByTagName('option');
  342. 					for(var op=0,opLength=opt.length;op<opLength;op++){
  343. 						var optObj = opt[op];
  344. 						if(optObj.selected){ array[name] = optObj.value; break;}
  345. 					}
  346. 					continue;
  347. 				case 'select-multiple':
  348. 					var opt = obj.getElementsByTagName('option');
  349. 					var tmpArray = {};
  350. 					for(var op=0,opLength=opt.length;op<opLength;op++){
  351. 						var optObj = opt[op];
  352. 						if(optObj.selected) tmpArray[optObj.value] = true;
  353. 					}
  354. 					array[name] = JSON.stringify(tmpArray);
  355. 					continue;
  356. 				default:
  357.  
  358. 					array[name] = obj.value;
  359. 					continue;
  360. 			}
  361. 		}
  362. 		//example) multiArray is {"textTest5_5_multiple3":["aa,22,33,44","bb,44,55,66","cc,88,99,00"]}
  363. 		//want to change "textTest5_5_multiple3" to "textTest5_5_multiple3":[["dataA","Multi test2","Multi testA"],["aa","bb","cc"],["22","44","88"],["33","55","99"],["44","66","00"]]
  364. 		for(var key in multiArray){
  365. 			var num = parseInt(key.replace(/.*_multiple(\d+)$/,"$1"));
  366. 			var multiList = multiArray[key];
  367. 			for(var i=0,j=multiList.length;i<j;i++){
  368. 				var multiData = multiList[i].split(',');
  369. 				for(var x=0,y=multiData.length;x<y;x++){
  370. 					var next = x+1;
  371. 					if(!array[key][next]) array[key][next] = [];
  372. 					array[key][next][i] = multiData[x];
  373. 				}
  374. 			}
  375. 		}
  376.  
  377. 		GM_option.saveData = JSON.stringify(array);
  378.  
  379. 		GM_setValue('opData',GM_option.saveData);
  380. 		if(clickFlg) location.reload();
  381. 	},
  382. 	//discard changes
  383. 	reset: function(){
  384. 		var txt = 'discard changes?';
  385. 		if(GM_option.msgArray) txt = GM_option.msgArray['reset'] || txt;
  386. 		if(confirm(txt) == false) return;
  387.  
  388. 		var dels = GM_option.doc.getElementsByClassName('delSpans');
  389. 		for (var i = dels.length-1; i >= 0; i--) {
  390. 			dels[i].parentNode.removeChild(dels[i]);
  391. 		}
  392. 		GM_option.doc.opForm.reset();
  393. 		GM_option.load();
  394.  
  395. 	},
  396. 	//delete SaveData
  397. 	clear: function(){
  398. 		var txt = 'delete settings?(ok:reload)';
  399. 		if(GM_option.msgArray) txt = GM_option.msgArray['clear'] || txt;
  400. 		if(confirm(txt) == false) return;
  401.  
  402. 		GM_deleteValue('opData');
  403. 		GM_option.close();
  404. 		location.reload();
  405. 	},
  406. 	//delete line for Multiple
  407. 	deleteLine: function(e){
  408. 		var txt = 'delete this line?';
  409. 		if(GM_option.msgArray) txt = GM_option.msgArray['delete'] || txt;
  410. 		if(confirm(txt) == false) return;
  411.  
  412. 		e.target.removeEventListener("click", arguments.callee,false);
  413. 		e.target.parentNode.parentNode.removeChild(e.target.parentNode);
  414. 	},
  415. 	//GM_option.saveData is String,return object Array
  416. 	get: function(){
  417. 		if(GM_option.saveData) return JSON.parse(GM_option.saveData);
  418. 		if(!GM_getValue('opData')) return undefined;
  419.  
  420. 		GM_option.saveData = GM_getValue('opData');
  421. 		return JSON.parse(GM_option.saveData);
  422. 	},
  423. 	//set data
  424. 	load: function(){
  425. 		var userSet = GM_option.get();
  426. 		if(userSet == undefined) return;
  427. 		var form = GM_option.doc.opForm;
  428. 		var lastName = "";
  429. 		var cntMulti = 0;
  430. 		var multipleArray = {};
  431.  
  432. 		for(var i=0,j=form.length;i<j;i++){
  433. 			var obj = form[i];
  434. 			var name = obj.name;
  435. 			var readonly = '';
  436. 			if(obj.getAttribute('readonly') == 'readonly') readonly = 'readonly="readonly"';
  437. 			var userData = userSet[name];
  438. 			if(userData == undefined) continue;
  439. 			switch(obj.type){
  440. 				case 'checkbox':
  441. 					if(userData)obj.setAttribute('checked',true);
  442. 					else obj.removeAttribute('checked');
  443. 					continue;
  444. 				case 'radio':
  445. 					if(obj.value == userData)obj.setAttribute('checked',true);
  446. 					else obj.removeAttribute('checked');
  447. 					continue;
  448. 				case 'textarea':
  449. 					obj.innerHTML = obj.value = userData;
  450. 					continue;
  451. 				case 'text':
  452. 					if(!name.match(/_multiple(\d+)$/)){
  453. 						obj.setAttribute('value',userData);
  454. 						continue;
  455. 					}else{
  456. 						var num = RegExp.$1;
  457. 						if(lastName != name){
  458. 							lastName = name;
  459. 							cntMulti = 0;
  460. 						}
  461.  
  462.  
  463. 						obj.setAttribute('value',userData[Math.floor(cntMulti / num)][cntMulti % num]);
  464.  
  465. 						cntMulti++;
  466.  
  467. 						if(num == cntMulti){
  468. 							var addObj = obj.parentNode.getElementsByTagName('button');
  469. 							if(!addObj[0]){
  470. 								alert('addButton is nothing for multiple select.');
  471. 								GM_option.remove();
  472. 								return;
  473. 							}
  474. 							var id = addObj[0].id;
  475.  
  476. 							GM_option.addMultiple(name,num,id,readonly);
  477. 							j = form.length;
  478. 						}
  479.  
  480.  
  481. 						continue;
  482. 					}
  483. 					continue;
  484. 				case 'select-one':
  485. 					var opt = obj.getElementsByTagName('option');
  486. 					for(var op=0,opLength=opt.length;op<opLength;op++){
  487. 						var optObj = opt[op];
  488. 						if(optObj.value == userData) optObj.setAttribute('selected',true);
  489. 						else optObj.removeAttribute('selected');
  490. 					}
  491. 					continue;
  492. 				case 'select-multiple':
  493. 					var tmpArray = JSON.parse(userData);
  494. 					var opt = obj.getElementsByTagName('option');
  495. 					for(var op=0,opLength=opt.length;op<opLength;op++){
  496. 						var optObj = opt[op];
  497. 						if(tmpArray[optObj.value]) optObj.setAttribute('selected',true);
  498. 						else optObj.removeAttribute('selected');
  499. 					}
  500. 					continue;
  501. 				default:
  502. 					obj.setAttribute('value',userData);
  503. 					continue;
  504. 			}
  505. 		}
  506. 	},
  507. 	close: function(){
  508. 		GM_option.scrollStop(false); 
  509. 		if(!GM_option.frame) return;
  510.  
  511. 		GM_option.frame.style.visibility = 'hidden';
  512. 		if(!GM_option.layer) return;
  513. 		GM_option.layer.style.visibility = 'hidden';
  514. 	},
  515. 	remove: function(){
  516. 		if(GM_option.frame) document.body.removeChild(GM_option.frame);
  517. 		if(GM_option.layer) document.body.removeChild(GM_option.layer);
  518. 		GM_option = null;
  519. 	},
  520. 	scrollStop: function(stopFlg){
  521. 		GM_option.scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  522.  
  523. 		if(stopFlg) window.onscroll = function () { window.scrollTo(0, GM_option.scrollY); };
  524. 		else window.onscroll = GM_option.defScroll;
  525. 	},
  526. 	//make line for Multiple
  527. 	addLine: function(obj,txt,addID){
  528. 		var num = parseInt(obj.getAttribute('num')) || 0;
  529. 		var strID = addID + '_delItem' + num;
  530. 		if(GM_option.doc.getElementById(strID)) return false;
  531. 		obj.parentNode.insertAdjacentHTML('beforeend',txt + '<button id="' + strID + '">del</button></span>');
  532.  
  533. 		//del button
  534. 		var delButton = GM_option.doc.getElementById(strID);
  535. 		delButton.addEventListener('click',GM_option.deleteLine,true);
  536. 		window.addEventListener('beforeunload', function() {
  537. 			window.removeEventListener("beforeunload", arguments.callee,false);
  538. 			delButton.removeEventListener('click',GM_option.deleteLine,true);
  539. 		},false);
  540.  
  541.  
  542. 		obj.setAttribute('num',num + 1);
  543. 		return true;
  544. 	},
  545. 	//Multiple main
  546. 	addMultiple: function(name,num,addID,readonly){
  547. 		var addButton = GM_option.doc.getElementById(addID);
  548. 		var strTxt = '<span class="delSpans"><br>';
  549. 		for(var x=0;x<num;x++){
  550. 			strTxt += '<input type="text" name="' + name + '" ' + readonly + ' /> ';
  551. 		}
  552.  
  553. 		//addEvent
  554. 		if(!addButton.hasAttribute('num')){
  555. 			var addEvent = function(e){
  556. 				GM_option.addLine(e.target,strTxt,addID);
  557. 			};
  558. 			addButton.addEventListener('mouseup',addEvent,false);
  559. 			window.addEventListener('beforeunload', function() {
  560. 				window.removeEventListener("beforeunload", arguments.callee,false);
  561. 				addButton.removeEventListener('click',addEvent,false);
  562. 			},false);
  563. 		}
  564.  
  565. 		//addInput(複数選択肢)
  566. 		var testArray = GM_option.get()[name];
  567. 		addButton.setAttribute('num',1);
  568. 		for(var i=1,j=testArray.length;i<j;i++){
  569. 			if(!GM_option.addLine(addButton,strTxt,addID)) break;
  570. 		}
  571. 	},
  572. 	htmlTextCheck: function(htmlText){
  573. 		var txt = GM_getValue('htmlText');
  574. 		if(!txt || (txt && txt != htmlText)){
  575. 			GM_setValue('htmlText',htmlText);
  576. 			if(!txt) return;
  577. 			GM_option.saveData = null;
  578. 			GM_option.htmlChangeFlg = true;
  579. 		}
  580. 	}
  581. };
  582.  
  583.  
  584.  
  585. //sample code
  586. /*********************************************************************************************************************
  587.  
  588.  
  589. //sample header(ex:style, script etc...)
  590. const strHeader = [
  591. 	'<style id ="cfgCSS" type="text/css">',
  592. 	'#cfgTable{ border: solid #ccc 1px; border-spacing:0; border-radius:6px 6px 0 0; -webkit-border-radius:6px 6px 0 0; box-shadow: 0 1px 1px #ccc; -webkit-box-shadow: 0 1px 1px #ccc; }',
  593. 	'#cfgTable tr:hover{ transition: all 0.1s ease-in-out; background:#fbf8e9; -webkit-transition: all 0.1s ease-in-out; }',
  594. 	'#cfgTable th, #cfgTable td{ border-left: 1px solid #ccc; border-top: 1px solid #ccc; vertical-align: top; white-space: nowrap; padding: 3px; }',
  595. 	'#cfgTable th{ color: #151; background: #E3F6E7;}',
  596. 	'#cfgTitle, #cfgTable th:first-child, #cfgTable td:first-child { border-left: none;}',
  597. 	'#cfgTable tr:first-child th:first-child{ border-top: none; color: #151; border-bottom: 3px solid #036; background: #A0D0A0; padding: 6px; }',
  598. 	'#cfgTable label{ padding:1px 5px 2px 5px; }',
  599. 	'#cfgTable label:hover{ background:#ada; }',
  600. 	'</style>'
  601. ].join('');
  602.  
  603.  
  604. //sample HTML
  605. var strHTML = [
  606. '<table id="cfgTable" align="center">',
  607.  '<thead>',
  608.  '<tr>',
  609.   '<th id="cfgTitle" colspan=2>Config Title</th>',
  610.  '</tr>',
  611.  '<tr>',
  612.   '<th>Settings</th>',
  613.   '<th>Select</th>',
  614.  '</tr>',
  615.  '</thead>',
  616.  '<tbody>',
  617.  '<tr>',
  618.   '<td>',
  619.    'checkbox test',
  620.   '</td>',
  621.   '<td>',
  622.    '<input type="checkbox" id="flg1" name="check1" checked />',
  623.    '<label for="flg1">check1</label>',
  624.    '<input type="checkbox" id="flg2" name="check2" />',
  625.    '<label for="flg2">check2</label>',
  626.    '<input type="checkbox" id="flg3" name="check3" />',
  627.    '<label for="flg3">check3</label>',
  628.   '</td>',
  629.  '</tr>',
  630.  '<tr>',
  631.   '<td>',
  632.    'radiobutton test1',
  633.   '</td>',
  634.   '<td>',
  635.    '<input type="radio" id="firstOn" name="radio1" value=true checked />',
  636.    '<label for="firstOn">on</label>',
  637.    '<input type="radio" id="firstOff" name="radio1" value=false />',
  638.    '<label for="firstOff">off</label>',
  639.   '</td>',
  640.  '</tr>',
  641.  '<tr>',
  642.   '<td>',
  643.    'radiobutton test2',
  644.   '</td>',
  645.   '<td>',
  646.    '<input type="radio" id="secondOn" name="radio2" value="1" />',
  647.    '<label for="secondOn">type1</label>',
  648.    '<input type="radio" id="secondOff" name="radio2" value="2" checked />',
  649.    '<label for="secondOff">type2</label>',
  650.   '</td>',
  651.  '</tr>',
  652.  '<tr>',
  653.   '<td>text(inline) test</td>',
  654.   '<td>',
  655.    '<input type="text" name="textTest1" value="input text" />',
  656.   '</td>',
  657.  '</tr>',
  658.  '<tr>',
  659.   '<td>textarea test</td>',
  660.   '<td>',
  661.    '<textarea name="textarea">textarea test\rthis\ris\rsample\rdata</textarea>',
  662.   '</td>',
  663.  '</tr>',
  664.  '<tr>',
  665.   '<td>text(inline) for Multiple test</td>',
  666.   '<td>',
  667.    '<input type="text" name="textTest3_multiple1" value="test" /> <button id="addItem">add</button>',
  668.   '</td>',
  669.  '</tr>',
  670.  '<tr>',
  671.   '<td>text(inline) for Multiple test1</td>',
  672.   '<td>',
  673.    '<input type="text" name="textTest3_3_multiple1" defArray="BB,CC,DD" value="AA" /> <button id="addItem1">add</button>',
  674.   '</td>',
  675.  '</tr>',
  676.  '<tr>',
  677.   '<td>text(inline) for Multiple test2</td>',
  678.   '<td>',
  679.    '<input type="text" name="textTest4_multiple2" value="data1" /> <input type="text" name="textTest4_multiple2" value="Multi test" /> <button id="addItem2">add</button>',
  680.   '</td>',
  681.  '</tr>',
  682.  '<tr>',
  683.   '<td>text(inline) for Multiple test3</td>',
  684.   '<td>',
  685.    '<input type="text" name="textTest5_multiple3" value="dataA" /> <input type="text" name="textTest5_multiple3" value="Multi test2" /> <input type="text" name="textTest5_multiple3" value="Multi testA" /> <button id="addItem3">add</button>',
  686.   '</td>',
  687.  '</tr>',
  688.  '<tr>',
  689.   '<td>text(inline) for Multiple test4</td>',
  690.   '<td>',
  691.    '<input type="text" name="textTest5_5_multiple3" defArray="aa,22,33,44" value="dataA" readonly="readonly" /> <input type="text" name="textTest5_5_multiple3" defArray="bb,44,55,66" value="Multi test2" readonly="readonly" /> <input type="text" name="textTest5_5_multiple3" defArray="cc,88,99,00" value="Multi testA" readonly="readonly" /> <button id="addItem4">add</button>',
  692.   '</td>',
  693.  '</tr>',
  694.  '<tr>',
  695.   '<td>select option test</td>',
  696.   '<td>',
  697.    '<select name="select">',
  698.     '<option name="nameop1" value="op1">item1</option>',
  699.     '<option name="nameop2" value="op2" selected>item2</option>',
  700.     '<option name="nameop3" value="op3">item3</option>',
  701.    '</select>',
  702.   '</td>',
  703.  '</tr>',
  704.  '<tr>',
  705.   '<td>select option test2</td>',
  706.   '<td>',
  707.    '<select name="select2" size=5>',
  708.     '<option name="nameopA" value="opA">itemA</option>',
  709.     '<option name="nameopB" value="opB" selected>itemB</option>',
  710.     '<option name="nameopC" value="opC">itemC</option>',
  711.     '<option name="nameopD" value="opE">itemE</option>',
  712.     '<option name="nameopE" value="opF">itemF</option>',
  713.    '</select>',
  714.   '</td>',
  715.  '</tr>',
  716.  '<tr>',
  717.   '<td>select option test3 multiple</td>',
  718.   '<td>',
  719.    '<select name="select3" multiple size=5>',
  720.     '<option name="nameopAA" value="opAA">itemAA</option>',
  721.     '<option name="nameopBB" value="opBB" selected>itemBB</option>',
  722.     '<option name="nameopCC" value="opCC">itemCC</option>',
  723.     '<option name="nameopDD" value="opEE" selected>itemEE</option>',
  724.     '<option name="nameopEE" value="opFF">itemFF</option>',
  725.    '</select>',
  726.   '</td>',
  727.  '</tr>',
  728.  '</tbody>',
  729. '</table>',
  730. ].join('');
  731.  
  732.  
  733.  
  734.  
  735. //userFunction(sample)
  736. var userConfig = function(){
  737. 	var options = GM_option.get();	//load userConfig Data(hashArray)
  738.  
  739. 	//example
  740. 	var strTxt = "";
  741. 	var check1 = options['check1'];
  742. 	strTxt += 'check1:' + check1 + '\n';
  743.  
  744. 	var check2 = options['check2'];
  745. 	strTxt += 'check2:' + check2 + '\n';
  746.  
  747. 	var check3 = options['check3'];
  748. 	strTxt += 'check3:' + check3 + '\n';
  749.  
  750. 	var radio1 = options['radio1'];
  751. 	if(radio1 == 'true') strTxt += 'radio1:on\n';
  752. 	else  strTxt += 'radio1:off\n';
  753.  
  754. 	var radio2 = options['radio2'];
  755. 	strTxt += 'radio2:' + radio2 + '\n';
  756.  
  757. 	var textTest1 = options['textTest1'];
  758. 	strTxt += 'textTest1:' + textTest1 + '\n';
  759.  
  760. 	var textarea = options['textarea'];
  761. 	textarea = textarea.split('\n');
  762. 	for(var i=0,j=textarea.length;i<j;i++){
  763. 		strTxt += 'textarea[' + i + ']:' + textarea[i] + '\n';
  764. 	}
  765.  
  766. 	var expand = function(text){
  767. 		var obj = eval(text);
  768. 		for(var i=0,j=obj.length;i<j;i++){
  769. 			var objTemp = obj[i];
  770. 			for(var x=0,y=objTemp.length;x<y;x++){
  771. 				strTxt += text + '[' + i + '][' + x + ']:' + objTemp[x] + '\n';
  772. 			}
  773. 		}
  774. 	};
  775.  
  776. 	var textTest3_multiple1 = options['textTest3_multiple1'];
  777. 	expand('textTest3_multiple1');
  778.  
  779.  
  780. 	var textTest3_3_multiple1 =  options['textTest3_3_multiple1'];
  781. 	expand('textTest3_3_multiple1');
  782.  
  783. 	var textTest4_multiple2 = options['textTest4_multiple2'];
  784. 	expand('textTest4_multiple2');
  785.  
  786.  
  787. 	var textTest5_multiple3 = options['textTest5_multiple3'];
  788. 	expand('textTest5_multiple3');
  789.  
  790. 	var textTest5_5_multiple3 = options['textTest5_5_multiple3'];
  791. 	expand('textTest5_5_multiple3');
  792.  
  793. 	var select = options['select'];
  794. 	strTxt += 'select:' + select + '\n';
  795.  
  796. 	var select2 = options['select2'];
  797. 	strTxt += 'select2:' + select2 + '\n';
  798.  
  799. 	var select3 = JSON.parse(options['select3']);
  800. 	for(var key in select3){
  801. 		strTxt += 'select3:' + key + '\n';
  802. 	}
  803.  
  804. 	alert(strTxt);
  805.  
  806.  
  807. 	//make OpenButton(sample)
  808. 	var openButton = document.createElement('button');
  809. 	openButton.id = 'openButton';
  810. 	openButton.innerHTML = 'click here!(open GM_option)';
  811. 	openButton.style = 'position:fixed;top:0;left:0;right:0;bottom:0;margin:auto; height:100px;';
  812. 	document.body.appendChild(openButton);
  813. 	
  814. 	var openConfig = function(){
  815. 		GM_option.open(strHeader,strHTML);
  816. 	}
  817. 	openButton.addEventListener('click', openConfig,false);
  818.  
  819. 	window.addEventListener('beforeunload', function() {
  820. 		window.removeEventListener("beforeunload", arguments.callee,false);
  821. 		openButton.removeEventListener('click',openConfig,false);
  822. 		userConfig = null;
  823. 	},false);
  824. }
  825.  
  826. //optional messages
  827. var msgArray = {
  828. 	'save':'save?(ok:reload)',
  829. 	'reset':'discard changes?(load savedata)',
  830. 	'clear':'delete your settings?(ok:reload)',
  831. 	'delete':'delete this line?(Don\'t forget to save.)',
  832. };
  833. window.addEventListener('GM_option_loaded',userConfig,false);	//userFunction
  834. GM_option.open(strHeader,strHTML,msgArray);	//load
  835.  
  836. //script menu
  837. GM_registerMenuCommand('Open GM_option',function(){
  838. 	GM_option.open(strHeader,strHTML,msgArray);
  839. });
  840.  
  841.  
  842.  
  843. window.addEventListener('beforeunload', function() {
  844. 	window.removeEventListener("beforeunload", arguments.callee,false);
  845. 	window.removeEventListener('GM_option_loaded',userConfig,false);
  846. },false);
  847.  
  848.  
  849.  
  850. *********************************************************************************************************************/

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址