☰

GM_option

support tool for UserConfig.(library)

当前为 2015-04-26 提交的版本，查看 最新版本。

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

  1. // ==UserScript==
  2. // @name        GM_option
  3. // @namespace   https://greasyfork.org/ja/scripts/9507
  4. // @homepageURL https://greasyfork.org/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.00
  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 delete savedata>
  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,Array);
  52.  
  53. first String is HTML Tag(style or script or etc...)
  54. second String is HTML Tag(in document.body).
  55. third Array 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. <button id="this_is_required"> is addButton.(required)
  89.  
  90. ex)
  91. HTML tag is...
  92. <input type="text" name="freeName_multiple2" value="data1" /> <input type="text" name="freeName_multiple2" value="data2" /> <button id="addButton">add</button>
  93.  
  94. Save Data is...
  95. {"freeName_multiple2":[["data1","data2"],["data3","data4"], and more ]}
  96.  
  97.  
  98. <select-multiple(HTML5)>----------------------------
  99. selected is checked.(optional)
  100.  
  101. ex)
  102. HTML tag is...
  103. <select name="selectName" multiple size=5>
  104. <option name="optionName1" value="data1"         >item1</option>
  105. <option name="optionName2" value="data2" selected>item2</option>
  106. <option name="optionName3" value="data3"         >item3</option>
  107. <option name="optionName4" value="data4" selected>item4</option>
  108. <option name="optionName5" value="data5"         >item5</option>
  109.  
  110. Save Data is...
  111. {"selectName":"{\"data2\":true,\"data4\":true}"}
  112.  
  113. To use...
  114. var userSettings = GM_option.get();
  115. var selectArray = JSON.parse(userSettings['selectName']);
  116.  
  117.  
  118. <addEventListener>----------------------------------
  119. 'GM_option_loaded'
  120.  
  121. this event is dispatched...
  122. when made GM_option frame                    (@first start-up)
  123. when loaded User's Settings from GM_getValue (@next time)
  124.  
  125. ex)
  126. window.addEventListener('GM_option_loaded',userFunction,false);
  127.  
  128.  
  129. <access GM_option document>----------------------------------
  130. GM_option.frame
  131. GM_option.doc
  132.  
  133. ex)
  134. var frame = GM_option.frame;
  135. var doc = GM_option.doc.head;
  136. var head = GM_option.doc.body;
  137. var form = GM_option.doc.opForm;
  138.  
  139.  
  140. <other function>----------------------------------
  141. after GM_option opened
  142. GM_option.show();  - show GM_option
  143. GM_option.close(); - hide GM_option
  144. GM_option.save();  - save settings & reload
  145. GM_option.reset(); - discard changes
  146. GM_option.clear(); - delete SaveData & reload
  147.  
  148.  
  149. *************************************************************************
  150. [history]
  151.  
  152. 04/26/2015 - v1.0  release
  153. *************************************************************************/
  154.  
  155. var GM_option = {
  156. 	init: function(){
  157. 		GM_option.defScroll = window.onscroll;	//save default scroll
  158. 		var css = GM_option.css;
  159. 		var htmlText = GM_option.htmlText;
  160.  
  161. 		//iframe
  162. 		var obj = GM_option.frame = window.document.createElement('iframe');
  163. 		obj.id = 'GM_option';
  164. 		obj.src = 'about:blank';
  165. 		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;');
  166. 		document.body.appendChild(obj);
  167.  
  168. 		obj.addEventListener('load', GM_option.make(css,htmlText) ,false);
  169. 	},
  170. 	open: function(css,htmlText,msgArray){
  171. 		GM_option.get();
  172. 		var oType = Object.prototype.toString.call(htmlText).slice(8, -1);
  173. 		if(!htmlText && htmlText != 'String' && !htmlText.match(/\<.*?\>/)){
  174. 			alert('second parameter(htmltext) is not correct.');
  175. 			return;
  176. 		} 
  177. 		if(!GM_option.event){
  178. 			GM_option.event = document.createEvent('HTMLEvents');
  179. 		        GM_option.event.initEvent('GM_option_loaded', true, false);
  180.  
  181. 			GM_option.msgArray = msgArray;
  182. 		}
  183.  
  184. 		if(!GM_option.makeFlg && GM_option.saveData){
  185. 			GM_option.makeFlg = true;
  186. 			window.dispatchEvent(GM_option.event);
  187. 			return;
  188. 		}
  189.  
  190. 		GM_option.css = css || '';
  191. 		GM_option.htmlText = htmlText = [
  192. 			'<form name="opForm" action="javascript:void(0);" onSubmit="return false;">',
  193. 			'<table id="opTable" style="padding:20px;height:98%;width:98%;"><tr><td align="center" valign="middle">',
  194. 			htmlText,
  195. 			'<span id="consol">',
  196. 			'<input type="button" id="saveConfig" value="save" title="save option" /> ',
  197. 			'<input type="reset" id="resetConfig" value="reset" title="Revert To Last Save" /> ',
  198. 			'<input type="button" id="clearConfig" value="clear" title="clear userSettings" /> ',
  199. 			'<button id="closeConfig" title="close option window">close</button>',
  200. 			'</span>',
  201. 			'</td></tr></table></form>'
  202. 		].join('');
  203.  
  204. 		if(htmlText && (!GM_option.frame || !GM_option.layer)) GM_option.init();
  205. 		GM_option.show();
  206. 	},
  207. 	make: function() { return function(){
  208. 		var css = GM_option.css;
  209. 		var htmlText = GM_option.htmlText;
  210.  
  211. 		this.removeEventListener("load", GM_option.make(css,htmlText) ,false);
  212.  
  213. 		var opDoc = GM_option.doc = this.contentDocument;
  214. 		var opBody = opDoc.body;
  215. 		if(css) opDoc.head.innerHTML = css;
  216.  
  217. 		opBody.innerHTML = htmlText;
  218. 		opBody.id = 'opBody';
  219. 		opBody.setAttribute('style','background:white;');
  220.  
  221. 		//close
  222. 		var closeButton = opDoc.getElementById('closeConfig');
  223. 		closeButton.addEventListener('click',GM_option.close,false);
  224.  
  225. 		//save
  226. 		var saveButton = opDoc.getElementById('saveConfig');
  227. 		saveButton.addEventListener('click',GM_option.save,false);
  228.  
  229. 		//clear
  230. 		var defaultButton = opDoc.getElementById('clearConfig');
  231. 		defaultButton.addEventListener('click',GM_option.clear,false);
  232.  
  233. 		//reset
  234. 		var resetButton = opDoc.getElementById('resetConfig');
  235. 		resetButton.addEventListener('click',GM_option.reset,false);
  236.  
  237. 		GM_option.load();	//保存データの上書き
  238. 		if(!GM_option.saveData) GM_option.save();
  239. 		
  240.  
  241. 		//layer
  242. 		var layer = GM_option.layer = window.document.createElement('div');
  243. 		layer.id = 'opLayer';
  244. 		layer.setAttribute('style','position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:black; z-index:5000; opacity:0.7;');
  245. 		document.body.appendChild(layer);
  246. 		
  247. 		layer.addEventListener('click', GM_option.close,false);
  248.  
  249. 		window.addEventListener('beforeunload', function() {
  250. 			window.removeEventListener("beforeunload", arguments.callee,false);
  251. 			layer.removeEventListener('click', GM_option.close,false);
  252. 			closeButton.removeEventListener('click',GM_option.close,false);
  253. 			saveButton.removeEventListener('click',GM_option.save,false);
  254. 			defaultButton.removeEventListener('click',GM_option.clear,false);
  255. 			resetButton.removeEventListener('click',GM_option.reset,false);
  256.  
  257. 			GM_option.remove();
  258. 		},false);
  259.  
  260. 		if(GM_option.makeFlg) GM_option.show();
  261. 		else{
  262. 			GM_option.load();
  263. 			GM_option.close();
  264. 			window.dispatchEvent(GM_option.event);
  265. 		}
  266. 		GM_option.makeFlg = true;
  267.  
  268. 		opBody = style = css = htmlText = null;
  269. 	}},
  270. 	show: function(){
  271. 		if(!GM_option.frame || !GM_option.layer) return;
  272. 		GM_option.scrollStop(true);
  273. 		GM_option.frame.style.visibility = 'visible';
  274. 		GM_option.layer.style.visibility = 'visible';
  275. 	},
  276. 	save: function(clickFlg){
  277. 		if(clickFlg){
  278. 			var txt = 'Do you want to save?(ok:reload)';
  279. 			if(GM_option.msgArray) txt = GM_option.msgArray['save'] || txt;
  280. 			if(confirm(txt) == false) return
  281. 		}
  282.  
  283. 		var form = GM_option.doc.opForm;
  284. 		var array={};
  285. 		for(var i=0,j=form.length;i<j;i++){
  286. 			var obj = form[i];
  287. 			var name =obj.name;
  288. 			if(!name) continue;
  289. 			switch(obj.type){
  290. 				case 'checkbox':
  291. 					if(obj.checked)array[name] = true;
  292. 					else array[name] = false;
  293. 					continue;
  294. 				case 'radio':
  295. 					if(obj.checked)array[name] = obj.value;
  296. 					continue;
  297. 				case 'text':
  298. 					if(!name.match(/_multiple(\d+)$/)){
  299. 						array[name] = obj.value;
  300. 						continue;
  301. 					}else{
  302. 						var num = RegExp.$1;
  303. 						if(!array[name])array[name] = [];
  304. 						var arrayNum = array[name].length - 1;
  305. 						if(arrayNum < 0) arrayNum = 0;
  306.  
  307. 						if(!array[name][arrayNum]) array[name][arrayNum] = [];
  308. 						if(array[name][arrayNum].length < num) array[name][arrayNum].push(obj.value);
  309. 						else{
  310. 							if(!array[name][arrayNum + 1]) array[name].push([]);
  311. 							array[name][arrayNum + 1].push(obj.value);
  312. 						}
  313. 						continue;
  314. 					}
  315. 					continue;
  316. 				case 'select-one':
  317. 					var opt = obj.getElementsByTagName('option');
  318. 					for(var op=0,opLength=opt.length;op<opLength;op++){
  319. 						var optObj = opt[op];
  320. 						if(optObj.selected){ array[name] = optObj.value; break;}
  321. 					}
  322. 					continue;
  323. 				case 'select-multiple':
  324. 					var opt = obj.getElementsByTagName('option');
  325. 					var tmpArray = {};
  326. 					for(var op=0,opLength=opt.length;op<opLength;op++){
  327. 						var optObj = opt[op];
  328. 						if(optObj.selected) tmpArray[optObj.value] = true;
  329. 					}
  330. 					array[name] = JSON.stringify(tmpArray);
  331. 					continue;
  332. 				default:
  333.  
  334. 					array[name] = obj.value;
  335. 					continue;
  336. 			}
  337. 		}
  338. 		GM_option.saveData = JSON.stringify(array);
  339. 		GM_setValue('opData',GM_option.saveData);
  340. 		if(clickFlg) location.reload();
  341. 	},
  342. 	//discard changes
  343. 	reset: function(){
  344. 		var txt = 'discard changes?';
  345. 		if(GM_option.msgArray) txt = GM_option.msgArray['reset'] || txt;
  346. 		if(confirm(txt) == false) return;
  347.  
  348. 		var dels = GM_option.doc.getElementsByClassName('delSpans');
  349. 		for (var i = dels.length-1; i >= 0; i--) {
  350. 			dels[i].parentNode.removeChild(dels[i]);
  351. 		}
  352. 		GM_option.load();
  353. 	},
  354. 	//delete SaveData
  355. 	clear: function(){
  356. 		var txt = 'delete settings?(ok:reload)';
  357. 		if(GM_option.msgArray) txt = GM_option.msgArray['clear'] || txt;
  358. 		if(confirm(txt) == false) return;
  359.  
  360. 		GM_deleteValue('opData');
  361. 		GM_option.close();
  362. 		location.reload();;
  363. 	},
  364. 	//delete line for Multiple
  365. 	deleteLine: function(e){
  366. 		var txt = 'delete this line?';
  367. 		if(GM_option.msgArray) txt = GM_option.msgArray['delete'] || txt;
  368. 		if(confirm(txt) == false) return;
  369.  
  370. 		e.target.removeEventListener("click", arguments.callee,false);
  371. 		e.target.parentNode.parentNode.removeChild(e.target.parentNode);
  372. 	},
  373. 	//GM_option.saveData is String,return object Array
  374. 	get: function(){
  375. 		if(GM_option.saveData) return JSON.parse(GM_option.saveData);
  376. 		if(!GM_getValue('opData')) return undefined;
  377.  
  378. 		GM_option.saveData = GM_getValue('opData');
  379. 		return JSON.parse(GM_option.saveData);
  380. 	},
  381. 	//set data
  382. 	load: function(){
  383. 		var userSet = GM_option.get();
  384. 		if(userSet == undefined) return;
  385. 		var form = GM_option.doc.opForm;
  386. 		var lastNum = 0;
  387. 		var cntMulti = 0;
  388. 		var multipleArray = {};
  389.  
  390.  
  391. 		for(var i=0,j=form.length;i<j;i++){
  392. 			var obj = form[i];
  393. 			var name = obj.name;
  394. 			var userData = userSet[name];
  395. 			if(userData == undefined) continue;
  396. 			switch(obj.type){
  397. 				case 'checkbox':
  398. 					if(userData)obj.setAttribute('checked',true);
  399. 					else obj.removeAttribute('checked');
  400. 					continue;
  401. 				case 'radio':
  402. 					if(obj.value == userData)obj.setAttribute('checked',true);
  403. 					else obj.removeAttribute('checked');
  404. 					continue;
  405. 				case 'textarea':
  406. 					obj.innerHTML = obj.value = userData;
  407. 					continue;
  408. 				case 'text':
  409. 					if(!name.match(/_multiple(\d+)$/)){
  410. 						obj.setAttribute('value',userData);
  411. 						continue;
  412. 					}else{
  413. 						var num = RegExp.$1;
  414. 						if(lastNum != num){
  415. 							lastNum = num;
  416. 							cntMulti = 0;
  417. 						}
  418.  
  419. 						obj.setAttribute('value',userData[Math.floor(cntMulti / num)][cntMulti % num]);
  420.  
  421. 						cntMulti++;
  422.  
  423. 						if(num == cntMulti){
  424. 							var addObj = obj.parentNode.getElementsByTagName('button');
  425. 							if(!addObj[0]){ alert('addButton is nothing for multiple select.'); GM_option.remove(); return;}
  426. 							var id = addObj[0].id;
  427. 							GM_option.addMultiple(name,num,id);
  428. 							j = form.length;
  429. 						}
  430. 						continue;
  431. 					}
  432. 					continue;
  433. 				case 'select-one':
  434. 					var opt = obj.getElementsByTagName('option');
  435. 					for(var op=0,opLength=opt.length;op<opLength;op++){
  436. 						var optObj = opt[op];
  437. 						if(optObj.value == userData) optObj.setAttribute('selected',true);
  438. 						else optObj.removeAttribute('selected');
  439. 					}
  440. 					continue;
  441. 				case 'select-multiple':
  442. 					var tmpArray = JSON.parse(userData);
  443. 					var opt = obj.getElementsByTagName('option');
  444. 					for(var op=0,opLength=opt.length;op<opLength;op++){
  445. 						var optObj = opt[op];
  446. 						if(tmpArray[optObj.value]) optObj.setAttribute('selected',true);
  447. 						else optObj.removeAttribute('selected');
  448. 					}
  449. 					continue;
  450. 				default:
  451. 					obj.setAttribute('value',userData);
  452. 					continue;
  453. 			}
  454. 		}
  455. 	},
  456. 	close: function(){
  457. 		GM_option.scrollStop(false); 
  458. 		if(!GM_option.frame) return;
  459.  
  460. 		GM_option.frame.style.visibility = 'hidden';
  461. 		if(!GM_option.layer) return;
  462. 		GM_option.layer.style.visibility = 'hidden';
  463. 	},
  464. 	remove: function(){
  465. 		if(GM_option.frame) document.body.removeChild(GM_option.frame);
  466. 		if(GM_option.layer) document.body.removeChild(GM_option.layer);
  467. 		GM_option = null;
  468. 	},
  469. 	scrollStop: function(stopFlg){
  470. 		GM_option.scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  471.  
  472. 		if(stopFlg) window.onscroll = function () { window.scrollTo(0, GM_option.scrollY); };
  473. 		else window.onscroll = GM_option.defScroll;
  474. 	},
  475. 	//make line for Multiple
  476. 	addLine: function(obj,txt,addID){
  477. 		var num = parseInt(obj.getAttribute('num')) || 0;
  478. 		var strID = addID + '_delItem' + num;
  479. 		obj.parentNode.insertAdjacentHTML('beforeend',txt + '<button id="' + strID + '">del</button></span>');
  480.  
  481. 		//del button
  482. 		var delButton = GM_option.doc.getElementById(strID);
  483. 		delButton.addEventListener('click',GM_option.deleteLine,false);
  484. 		window.addEventListener('beforeunload', function() {
  485. 			window.removeEventListener("beforeunload", arguments.callee,false);
  486. 			delButton.removeEventListener('click',GM_option.deleteLine,false);
  487. 		},false);
  488.  
  489.  
  490. 		obj.setAttribute('num',num + 1);
  491. 	},
  492. 	//Multiple main
  493. 	addMultiple: function(name,num,addID){
  494. 		var addButton = GM_option.doc.getElementById(addID);
  495. 		var strTxt = '<span class="delSpans"><br>';
  496. 		for(var x=0;x<num;x++){
  497. 			strTxt += '<input type="text" name="' + name + '" /> ';
  498. 		}
  499.  
  500. 		//addEvent
  501. 		if(!addButton.hasAttribute('num')){
  502. 			var addEvent = function(e){
  503. 				GM_option.addLine(e.target,strTxt,addID);
  504. 			};
  505. 			addButton.addEventListener('click',addEvent,false);
  506. 			window.addEventListener('beforeunload', function() {
  507. 				window.removeEventListener("beforeunload", arguments.callee,false);
  508. 				addButton.removeEventListener('click',addEvent,false);
  509. 			},false);
  510. 		}
  511.  
  512. 		//addInput
  513. 		var testArray = GM_option.get()[name];
  514. 		addButton.setAttribute('num',1);
  515. 		for(var i=1,j=testArray.length;i<j;i++){
  516. 			GM_option.addLine(addButton,strTxt,addID);
  517. 		}
  518. 	}
  519. };
  520.  
  521.  
  522.  
  523. //sample code
  524. /*********************************************************************************************************************
  525.  
  526.  
  527. //sample header(ex:style, script etc...)
  528. const strHeader = [
  529. 	'<style id ="cfgCSS" type="text/css">',
  530. 	'#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; }',
  531. 	'#cfgTable tr:hover{ transition: all 0.1s ease-in-out; background:#fbf8e9; -webkit-transition: all 0.1s ease-in-out; }',
  532. 	'#cfgTable th, #cfgTable td{ border-left: 1px solid #ccc; border-top: 1px solid #ccc; vertical-align: top; white-space: nowrap; padding: 3px; }',
  533. 	'#cfgTable th{ color: #151; background: #E3F6E7;}',
  534. 	'#cfgTitle, #cfgTable th:first-child, #cfgTable td:first-child { border-left: none;}',
  535. 	'#cfgTable tr:first-child th:first-child{ border-top: none; color: #151; border-bottom: 3px solid #036; background: #A0D0A0; padding: 6px; }',
  536. 	'#cfgTable label{ padding:1px 5px 2px 5px; }',
  537. 	'#cfgTable label:hover{ background:#ada; }',
  538. 	'</style>'
  539. ].join('');
  540.  
  541.  
  542. //sample HTML
  543. var strHTML = [
  544. '<table id="cfgTable" align="center">',
  545.  '<thead>',
  546.  '<tr>',
  547.   '<th id="cfgTitle" colspan=2>Config Title</th>',
  548.  '</tr>',
  549.  '<tr>',
  550.   '<th>Settings</th>',
  551.   '<th>Select</th>',
  552.  '</tr>',
  553.  '</thead>',
  554.  '<tbody>',
  555.  '<tr>',
  556.   '<td>',
  557.    'checkbox test',
  558.   '</td>',
  559.   '<td>',
  560.    '<input type="checkbox" id="flg1" name="check1" checked />',
  561.    '<label for="flg1">check1</label>',
  562.    '<input type="checkbox" id="flg2" name="check2" />',
  563.    '<label for="flg2">check2</label>',
  564.    '<input type="checkbox" id="flg3" name="check3" />',
  565.    '<label for="flg3">check3</label>',
  566.   '</td>',
  567.  '</tr>',
  568.  '<tr>',
  569.   '<td>',
  570.    'radiobutton test1',
  571.   '</td>',
  572.   '<td>',
  573.    '<input type="radio" id="firstOn" name="radio1" value=true checked />',
  574.    '<label for="firstOn">on</label>',
  575.    '<input type="radio" id="firstOff" name="radio1" value=false />',
  576.    '<label for="firstOff">off</label>',
  577.   '</td>',
  578.  '</tr>',
  579.  '<tr>',
  580.   '<td>',
  581.    'radiobutton test2',
  582.   '</td>',
  583.   '<td>',
  584.    '<input type="radio" id="secondOn" name="radio2" value="1" />',
  585.    '<label for="secondOn">type1</label>',
  586.    '<input type="radio" id="secondOff" name="radio2" value="2" checked />',
  587.    '<label for="secondOff">type2</label>',
  588.   '</td>',
  589.  '</tr>',
  590.  '<tr>',
  591.   '<td>text(inline) test</td>',
  592.   '<td>',
  593.    '<input type="text" name="textTest1" value="input text" />',
  594.   '</td>',
  595.  '</tr>',
  596.  '<tr>',
  597.   '<td>textarea test</td>',
  598.   '<td>',
  599.    '<textarea name="textarea">textarea test\rthis\ris\rsample\rdata</textarea>',
  600.   '</td>',
  601.  '</tr>',
  602.  '<tr>',
  603.   '<td>text(inline) for Multiple test</td>',
  604.   '<td>',
  605.    '<input type="text" name="textTest3_multiple1" value="test" /> <button id="addItem1">add</button>',
  606.   '</td>',
  607.  '</tr>',
  608.  '<tr>',
  609.   '<td>text(inline) for Multiple test2</td>',
  610.   '<td>',
  611.    '<input type="text" name="textTest4_multiple2" value="data1" /> <input type="text" name="textTest4_multiple2" value="Multi test" /> <button id="addItem2">add</button>',
  612.   '</td>',
  613.  '</tr>',
  614.  '<tr>',
  615.   '<td>text(inline) for Multiple test3</td>',
  616.   '<td>',
  617.    '<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>',
  618.   '</td>',
  619.  '</tr>',
  620.  '</tr>',
  621.  '<tr>',
  622.   '<td>select option test</td>',
  623.   '<td>',
  624.    '<select name="select">',
  625.     '<option name="nameop1" value="op1">item1</option>',
  626.     '<option name="nameop2" value="op2" selected>item2</option>',
  627.     '<option name="nameop3" value="op3">item3</option>',
  628.    '</select>',
  629.   '</td>',
  630.  '</tr>',
  631.  '<tr>',
  632.   '<td>select option test2</td>',
  633.   '<td>',
  634.    '<select name="select2" size=5>',
  635.     '<option name="nameopA" value="opA">itemA</option>',
  636.     '<option name="nameopB" value="opB" selected>itemB</option>',
  637.     '<option name="nameopC" value="opC">itemC</option>',
  638.     '<option name="nameopD" value="opE">itemE</option>',
  639.     '<option name="nameopE" value="opF">itemF</option>',
  640.    '</select>',
  641.   '</td>',
  642.  '</tr>',
  643.  '<tr>',
  644.   '<td>select option test3 multiple</td>',
  645.   '<td>',
  646.    '<select name="select3" multiple size=5>',
  647.     '<option name="nameopAA" value="opAA">itemAA</option>',
  648.     '<option name="nameopBB" value="opBB" selected>itemBB</option>',
  649.     '<option name="nameopCC" value="opCC">itemCC</option>',
  650.     '<option name="nameopDD" value="opEE" selected>itemEE</option>',
  651.     '<option name="nameopEE" value="opFF">itemFF</option>',
  652.    '</select>',
  653.   '</td>',
  654.  '</tr>',
  655.  '</tbody>',
  656. '</table>',
  657. ].join('');
  658.  
  659.  
  660.  
  661.  
  662. //userFunction(sample)
  663. var userConfig = function(){
  664. 	var options = GM_option.get();	//load userConfig Data(hashArray)
  665.  
  666. 	//example
  667. 	var strTxt = "";
  668. 	var check1 = options['check1'];
  669. 	strTxt += 'check1:' + check1 + '\n';
  670.  
  671. 	var check2 = options['check2'];
  672. 	strTxt += 'check2:' + check2 + '\n';
  673.  
  674. 	var check3 = options['check3'];
  675. 	strTxt += 'check3:' + check3 + '\n';
  676.  
  677. 	var radio1 = options['radio1'];
  678. 	if(radio1 == 'true') strTxt += 'radio1:on\n';
  679. 	else  strTxt += 'radio1:off\n';
  680.  
  681. 	var radio2 = options['radio2'];
  682. 	strTxt += 'radio2:' + radio2 + '\n';
  683.  
  684. 	var textTest1 = options['textTest1'];
  685. 	strTxt += 'textTest1:' + textTest1 + '\n';
  686.  
  687. 	var textarea = options['textarea'];
  688. 	textarea = textarea.split('\n');
  689. 	for(var i=0,j=textarea.length;i<j;i++){
  690. 		strTxt += 'textarea[' + i + ']:' + textarea[i] + '\n';
  691. 	}
  692.  
  693. 	var expand = function(text){
  694. 		var obj = eval(text);
  695. 		for(var i=0,j=obj.length;i<j;i++){
  696. 			var objTemp = obj[i];
  697. 			for(var x=0,y=objTemp.length;x<y;x++){
  698. 				strTxt += text + '[' + i + '][' + x + ']:' + objTemp[x] + '\n';
  699. 			}
  700. 		}
  701. 	};
  702.  
  703. 	var textTest3_multiple1 = options['textTest3_multiple1'];
  704. 	expand('textTest3_multiple1');
  705.  
  706. 	var textTest4_multiple2 = options['textTest4_multiple2'];
  707. 	expand('textTest4_multiple2');
  708.  
  709.  
  710. 	var textTest5_multiple3 = options['textTest5_multiple3'];
  711. 	expand('textTest5_multiple3');
  712.  
  713. 	var select = options['select'];
  714. 	strTxt += 'select:' + select + '\n';
  715.  
  716. 	var select2 = options['select2'];
  717. 	strTxt += 'select2:' + select2 + '\n';
  718.  
  719. 	var select3 = JSON.parse(options['select3']);
  720. 	for(var key in select3){
  721. 		strTxt += 'select3:' + key + '\n';
  722. 	}
  723.  
  724. 	alert(strTxt);
  725.  
  726.  
  727. 	//make OpenButton(sample)
  728. 	var openButton = document.createElement('button');
  729. 	openButton.id = 'openButton';
  730. 	openButton.innerHTML = 'click here!(open GM_option)';
  731. 	openButton.style = 'position:fixed;top:0;left:0;right:0;bottom:0;margin:auto; height:100px;';
  732. 	document.body.appendChild(openButton);
  733. 	
  734. 	var openConfig = function(){
  735. 		GM_option.open(strHeader,strHTML);
  736. 	}
  737. 	openButton.addEventListener('click', openConfig,false);
  738.  
  739. 	window.addEventListener('beforeunload', function() {
  740. 		window.removeEventListener("beforeunload", arguments.callee,false);
  741. 		openButton.removeEventListener('click',openConfig,false);
  742. 		userConfig = null;
  743. 	},false);
  744. }
  745.  
  746. //optional messages
  747. var msgArray = {
  748. 	'save':'save?(ok:reload)',
  749. 	'reset':'discard changes?(load savedata)',
  750. 	'clear':'delete your settings?(ok:reload)',
  751. 	'delete':'delete this line?(Don\'t forget to save.)',
  752. };
  753. window.addEventListener('GM_option_loaded',userConfig,false);	//userFunction
  754. GM_option.open(strHeader,strHTML,msgArray);	//load
  755.  
  756. //script menu
  757. GM_registerMenuCommand('Open GM_option',function(){
  758. 	GM_option.open(strHeader,strHTML,msgArray);
  759. });
  760.  
  761.  
  762.  
  763. window.addEventListener('beforeunload', function() {
  764. 	window.removeEventListener("beforeunload", arguments.callee,false);
  765. 	window.removeEventListener('GM_option_loaded',userConfig,false);
  766. },false);
  767.  
  768.  
  769.  
  770. *********************************************************************************************************************/