🏠　
☰

GM_option

support tool for UserConfig.(library)

This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/9507/151184/GM_option.js


Ask a question, post a review, or report the script.
Author
noisys
Version
1.04
Created
2015-04-26
Updated
2016-10-07
Size
26.6 KB
License
http://creativecommons.org/licenses/by-nc-sa/4.0/



Work on Greasemonkey(Not support Scriptish)


---------------------------------　　--------------------------------------------------------------------------------------------------------------------------------------------
script nameGM_option
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
aboutThis script is the library to make a setting screen.
I made this support tool in order to make more easily.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[How to use]Sample code is end of this Script.


If savedata is none....?
first start-up or delete savedata
This script make GM_option window and save default.
next time
This script never make GM_option window without running open-function.


@grant----------------------------------------------
you need to add @grant.
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// @grant GM_registerMenuCommand

GM_setValue and GM_getValue and GM_deleteValue is required.
GM_registerMenuCommand is optional.


start function----------------------------------------------
GM_option.open(String,String,HashArray);

first String is HTML Tag(header ex:style or script or etc...)
second String is HTML Tag(document.body).
third HashArray is optional,it's messages for dialog.

Message List
'save' - when click save button.
'reset' - when click reset button.(discard changes)
'clear' - when click clear button.(delete savedata)
'delete' - when click del button.(delete multiple)


user function--------------------------------------
At first,get user's settings.
GM_option.get();

return hashArray(Associative array).


HTML tag-------------------------------------------
use form inputs.
'name' is save-key.
'value' is save-data.

ex)
HTML tag is...
< input type="text" name="this_is_Key" value="this_is_Data" />

Save Data is...
{"this_is_Key":"this_is_Data"}


multiple text--------------------------------------
'name' is ****_multiple9999.(required)
9999 is number of array.(required)
'value' is default.(optional)
'defArray' is default array.(optional)
< button id="this_is_required"> is addButton.(required)

ex)
HTML tag is...
< input type="text" name="freeName_multiple2" value="data1" /> < input type="text" name="freeName_multiple2" value="data2" /> < button id="addButton">add< /button>

Save Data is...
{"freeName_multiple2":[["data1","data2"],["data3","data4"], and more ]}
"data3" and "data4" are input by user.

ex2)
HTML tag is...
< 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>

Save Data is...
{"freeName_multiple2":[["data1-1","data2-1"],["data1-2","data2-2"],["data1-3","data2-3"],["data1-4","data2-4"],["data1-5","data2-5"], and more ]}
"data1-5" and "data2-5" are input by user.

## caution ##
If elements's 'name' are same, defArray are same array.length.


select-multiple(HTML5)----------------------------
selected is checked.(optional)

ex)
HTML tag is...
< select name="selectName" multiple size=5>
< option name="optionName1" value="data1" >item1< /option>
< option name="optionName2" value="data2" selected>item2< /option>
< option name="optionName3" value="data3" >item3< /option>
< option name="optionName4" value="data4" selected>item4< /option>
< option name="optionName5" value="data5" >item5< /option>

Save Data is...
{"selectName":"{\"data2\":true,\"data4\":true}"}

To use...
var userSettings = GM_option.get();
var selectArray = JSON.parse(userSettings['selectName']);


addEventListener----------------------------------
'GM_option_loaded'

this event is dispatched...
when made GM_option frame (@first start-up)
when loaded User's Settings from GM_getValue (@next time)

ex)
window.addEventListener('GM_option_loaded',userFunction,false);

access GM_option document----------------------------------
GM_option.frame
GM_option.doc

ex)
var frame = GM_option.frame;
var doc = GM_option.doc.head;
var head = GM_option.doc.body;
var form = GM_option.doc.opForm;


other function----------------------------------
after GM_option opened
GM_option.show(); - show GM_option
GM_option.close(); - hide GM_option
GM_option.save(); - save settings & reload
GM_option.reset(); - discard changes
GM_option.clear(); - delete SaveData & reload

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
history10/07/2016 - v1.04 add:multiple設定でreadonly属性の引き継ぎ
04/30/2015 - v1.03 add:sandbox
04/29/2015 - v1.01 add:第二引数(body)に変更があった場合は変更箇所の初期値を保存する。初期値配列の指定方法追加。
04/29/2015 - v1.01 fix:入力欄でENTERキーを押すとaddボタンを押した時と同じ動作をするバグ。第一引数(head)にスクリプトタグを指定しても動作しないバグ修正。resetボタン修正
04/26/2015 - v1.0 release
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------