IOTBS Manual
Step 4: Configure the JavaScript
The main configuration file is called
iotbs2-key.js by default, but you can call it
anything you want. Within this file we need to
initialise the preferences manager, and then go on to
building the individual switcher controls.
Initialising the preferences manager
The preferences manager reads and writes to cookies, and maintains some global
properties and methods. You'll find it near the top of the script
- a constructor function
called switchManager, which takes two arguments:
//initialise the preferences manager ('canvas-element', 'path-for-load-mode')
var switcher = new switchManager('body', '');
- canvas element
-
In most cases you can just leave this as it is.
But if your pages are in XHTML mode (served as
application/xhtml+xmlor equivalent) then the canvas element is<html>and not<body>. Therefore if you're using a standard body-class switcher then all your custom styles should descend from<html>, otherwise you won't be able to change the canvas background. In such a case, change this value from"body"to"html".However, please note ...
The functionality to use
<html>as the canvas works in all supported browsers using either mime-type, as dohtml.classnamerules in CSS; however it does actually invalidate the DOM on the fly, since<html>is (strangely) not allowed to have aclassname. It won't prevent your pages or style sheets from validating, nor does it cause any actual problems to any user-agent (as far as we know), but it's slightly unfortunate nonetheless. - path for load mode
-
If you leave this value as an empty string then the switcher will be in standard mode - working from its original principle, setting
classnames on<body>or<html>.However if you set any other value, that will enable load mode. The value should be the path to a folder containing all the IOTBS stylesheets, named according to our previously-discussed naming convention.
Building the switcher controls
Finally we can make some switching controls!
These are created with a
constructor function called bodySwitcher,
which takes four arguments:
//create a new switcher control ('container-id', 'label', 'is-native-switcher', '"selected" text')
var screenSwitcher = new bodySwitcher('screen-switcher', 'Screen styles', 'no', '');
- container ID
-
Define the
IDof the switcher's containing element. We made some containers earlier using theIDvalues"screen-switcher"and"print-switcher", so those are the values we'd use here. - label
-
Define the descriptive text that appears before this switching control; it will appear as a label, definition or legend (depending on the interface) that should simply describe the group.
- is native switcher [integrate mode only]
-
If you're using integrate mode, set this value to
"yes"to specify that this is the group you want to integrate with native stylesheet switching. Otherwise leave it as"no". - "selected" text [
The Director's Cut
interface only] -
If you're using
The Director's Cut
you will need to define some meta text to describe the selected state, and" (selected)"would seem appropriate. Whatever you define will appear next to the currently-selected item in each list of options, for example "Normal contrast (selected)". You should always define some meta text, even if you're providing additional styling using the"selected"classname, because it aids comprehension.
Now that the group has initialised,
use the defineClass method to specify
each of the options you want, defining the
class name it relates to, and some label text.
(If you've nominated this group to
integrate with native switching,
you should use the same label text for each
option as you used for the corresponding
<link> element's title):
//add a new class option ('classname', 'label')
screenSwitcher.defineClass('default', 'Normal contrast');
screenSwitcher.defineClass('high', 'High contrast');
screenSwitcher.defineClass('highvisibility', 'High visibility');
A switcher can have any number of options (except none), and you can go on to make as many switchers as you want. The principle is infinitely extensible, with only two restrictions:
-
each default option must have the
classname"default"; -
every other
classname must be unique, even across different media.
Here's another example - a switcher for print, who's container we made earlier:
var printSwitcher = new bodySwitcher('print-switcher', 'Print styles', 'no', '');
printSwitcher.defineClass('default', 'Default');
printSwitcher.defineClass('small-sans', 'Small sans');
printSwitcher.defineClass('large-serif', 'Large serif');
![[php]](/images/php.png "Uses PHP")