GM_option

support tool for UserConfig.(library)

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

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

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