Specimen Tools for websites
Currently the main usage is in mdlFontSpecimen.
However, the main documentation of the available widgets can be found here.
There is a minimal example. You can run it like this:
~$ git clone firstname.lastname@example.org:graphicore/specimenTools.git ~$ cd specimenTools ~/specimenTools$ bower install # now start a http-server to serve from ~/specimenTools # e.g. python3 -m http.server 8000 # visit: http://localhost:8000/examples/simple/index.html
The widgets have some documentation in their js files.
Bootstrapping, Signals and Life Cycle
Have a look at the minimal examples/simple/main.js.
All signaling is done via a single central instance of the PubSub module.
The order of subscription is relevant, it may be important to have some modules subscribe before/after other modules. Currently, subscribing the services FontData and then WebFontProvider first is expected by other modules.
Subscription is usually done in the constructors.
- Initializing the "services". The widget constructors will require them to be injected at their initialization time.
- Initializing the widgets. The document will be searched for the widgets CSS-class and the resulting containers will each be initialized with a new widget instance.
- A callback is subscribed to the
allFontsLoadedchannel, to activate a first font when loading is completed.
- Font loading starts, calling
loadFonts is publishing to the following channels:
prepareFont with arguments:
Directly before the actual file loading is executed. If the file loading
is asynchronous (it is) all
prepareFont signals will be sent before any
loadFont signal is send.
loadFont with arguments:
(opetype.js font instance) font,
When the font file is loaded and opetype.js has parsed it. I.e. All the font data is now available.
allFontsLoaded with arguments:
Won't be published if not all fonts could be loaded. There will be a warning in the console output in this case.
Currently there is only one channel published to during runtime:
activateFont with arguments:
This is published by the
Most of the widgets are subscribed to this signal, including
(that way many FamilyChooser widgets can coexist if needed).
Most of the widgets are configurable via options. At the moment these options
are used to make specimenTools blend into Material Design Lite, see the
extensive configuration done in
Most of the options define the CSS-Classes that are used in the widgets, either as markers, to control aspects of the marked DOM-Element or as CSS-Classes of newly created DOM elements. Some are callbacks/hooks e.g. to activate ui-elements of MDL.
The same widgets can be used with different sets of options, for this the "factory" array in the main function would be configured with different CSS-selection-classes and different options but the same widget constructors.
Regenerate the file
Update the CLDR submodules
$ git submodule update --recursive --remote
Then run this command to recreate the
$ ./build/makeChars2LanguageCoverageTable.js lib/fontData/languageCharSets.json