OperaExtOptions: A JavaScript repository from joelspadin

OperaExtOptions 1.1

This is a JavaScript library for automating the options pages of Opera
extensions. It does two things. First, it provides a class that uses JSON to 
save arbitrary objects to widget.preferences (or other storage) instead of only 
strings. Second, it links the <input>, <select> and <textarea> elements of your 
options page with storage so that the page is automatically popluated with 
settings, and changes to those settings are saved back to storage.

The only files you need to add to your project are the two script files in the
src/js directory: storage.js and options_page.js. Everything else in the src
directory is an example extension. You may also use the included options page
and stylesheet to make your options page appear like Opera's extensions manager.



To use this library, you should first include storage.js in your extension's 
index.html, then include storage.js and options_page.js in options.html. You 
should then create a SettingStorage object to load and save your settings.
In the example, this is done in default_settings.js, which is also included in 
both index.html and options.html. You can also provide a list of settings and 
their default values so that the library can initialize those settings on the 
first run and so the options page can reset settings to their default values.

Once you have created a SettingStorage object, you should call its init() method
at the beginning of your background script (in index.html). This will find any
uninitialized settings and set them to their default values. This means that any
settings you add in later versions will automatically be initialized.

To set up your options page, first create a SettingStorage object with the same
settings as before, (done in the example by including default_setting.js) then
call OptionsPage.init(), passing the storage object as the only argument. This
will walk through all the <input> and <select> elements on the page, linking 
them to settings with the same name. 

Now you're done. Any setting in your options page that can be represented by an 
<input>, <select> or <textarea> element or radio button group of <input> 
elements will automatically be saved to widget.preferences or your storage 
object of choice.

To retrieve setting values, use the get() method of your SettingStorage object.
You can also manually change settings through this object. See the documentation
for more details.



There are some attributes you can set on elements to change how they behave.
See options.html in the example for example usages.

data-nosave: This element should not be linked to a setting.
data-resets="setting": This element will reset "setting" when clicked.
data-loadfunc="function": The saved value will be passed to a function which can
	transform the value before it is loaded into the element. The function should
	take one argument, the saved value, and return the value to be displayed.
data-savefunc="function": The value displayed in the element will be passed to
	a function which can transform the value before it is saved to storage. The
	function should take one argument, the value displayed in the element, and
	return the value to be saved.

For data-loadfunc and data-savefunc, "function" can be either a function or the 
name of a function in window (global) scope.

   
The build and makedoc scripts in the root directory work with my own Cygwin
setup. They may require some modification to work in a normal Linux environment.
makedoc also requires JSDoc ( http://code.google.com/p/jsdoc-toolkit/ )

For more information:
https://github.com/ChaosinaCan/OperaExtOptions
http://my.opera.com/spadija/



Changelog

May 21, 2012:
	- Added a stylesheet which makes the options page look like Opera's extension
	  manager. This should provide a nice starting point for styling your options
	  page.
	- Reorganized some files.

Feb 26, 2012:
	- Settings can now be accessed as properties of the SettingStorage object.
	  If you give a setting a default value when creating the SettingStorage 
	  object, a property of the same name will be created. For example, if you 
	  have a setting named "foo", you can now use "storage.foo = 4" instead of
	  "storage.set('foo', 4)" and "storage.foo" instead of "storage.get('foo')".

Aug 7, 2011:
	- Added <textarea> support
	- Added support for transform functions
joelspadin/OperaExtOptions
