Today is the last day before GSOC 2013's hard pencil's down date. I have completed my goal for my project which is to create a Drupal module that integrates the Infusion User Interface Options component into Drupal and a Drupal theme which is optimized for this module. The module and the theme can be found on my Github account here and here.
The Infusion UIO module
The module that I wrote is basically an integration of Infusion's UI Options component with Drupal. Infusion is a framework/library which has a number of components, the UI Options being one of them.
The UI Options component presents your site's visitors with controls that allow them to customize the UI. The current UI Options and the one used with this module gives users the following options:
- text size - allows users to adjust the size of the text on the page
- text style - this will change the font being used on the page. It has the following font options: Default, Times New Roman, Comic Sans, Arial and Verdana
- line spacing - allows users to increase the line spacing
- colour and contrast - this option will transform the page into one of several high-contrast themes: black text on white background, white on black, black on yellow, yellow on black
- table of contents - this will add a table of contents to the top of the page. It contains links that let users jump directly to major sections of the current page. .
- links and buttons - has two options for links and buttons on the page:
- underline and bold
- enlarge buttons, menus, text-fields, and other inputs
The UIO itself comes in three different UI's: 'Fat Panel', 'Full Page' and 'Full Page with Preview'. The module allows you to set which one you would like to use on your site by going to the configuration page.
The 'Fat Panel' UIO gives you a panel at the top of the page which slides down when you click on the 'show' button and displays the different options.
In the module's configuration page, you have the following settings which you can configure:
For the 'Fat Panel', you can choose a custom "Show/Hide" text for the button that slides the panel down and up.
For both the 'Full Page' and the 'Full Page with Preview' there's a checkbox that will let you use a block for the link to the UIO page. By default, selecting either of these UIO's will just give you a link at the top of the page, if you'd like to move that link somewhere else you can choose this option and then go to your Admin>Structure>Block page and assign the 'UI Options Link' block to a region on your page. This gives you some control on where you'd like to see that link your page.
The Infusion Theme
The Infusion Theme is a Drupal theme that has been optimized for the Infusion UIO Module. So what exactly does this mean?
In order to ensure that the UI Options transforms your web pages correctly, there is usually some setup involved. You can check out the Infusion's documentation to learn more about this. For the most part, the Infusion UIO module takes care of adding the required elements to your website but there's still some preparation required from you as the site owner/administrator for UI Options to work perfectly. This usually entails modifying your stylesheet. The amount of work involved will depend on your site's design and layout. You may have a website that just works flawlessly with the Infusion UI Optons or you may find that your site does not play very well with Infusion - this all depends on your site's design and layout.
This is where the Infusion theme comes in. The idea behind this theme is for you to have a theme that works with the Infusion UIO module flawlessly, so you don't need to modify your stylesheet or change the layout of your website.
I have tested the module with some of the Drupal themes, mostly the ones that ship with Drupal core just to see some of the issues one may encounter when using the UI Options so I could ensure that those issues do not come up with Infusion theme. So here's some of the issues that the Infusion theme addresses.
Trying the UI Options with the Bartik theme and enlarging the font size to 2x presents some issues with form text fields which seem to overlap into adjacent elements. This does not occur with Infusion Theme.
Also selecting one of the high-contrast themes seem to leave some areas of the Bartik theme unchanged, which is even worse with the Garland theme. All of the high-contrast themes work very well with Infusion theme.
The Infusion UIO theme is based on the Zen Starter theme,specifically the 7.x-5.x version so it inherits all the cool features that the Zen has like responsive layout, html5 support, accessiblity support etc...
What's Next?
Submit the module and the theme to Drupal.org
At the moment you can find the Infusion UIO module and the Infusion theme on my github. For now, I recommend only using it on a testing server. There's a few things that I didn't get around to doing which I will try to do in these coming weeks, one of them was to write a .install file for the module as to ensure that the variables set by the module gets deleted when the module is uninstalled.
As for the theme, I still need to do a lot of testing and tweaking of the design to ensure that everything is ready.
Write a more detailed documentation
I need to write a more detailed documentation for the theme. I would like to make it easy for people using the theme to customize it and probably add it to Drupal's Community Documentation once the theme has been submitted and added to Drupal.org. There's also a few things that I need to add to the modules documentation.
Write the Drupal 8 version
Drupal 8 is coming out soon and I would like to have a Drupal 8 version of both the theme and the module on the day that Drupal 8 is officially released.
