Module Update

I have added the .install file to the Infusion UIO module. https://github.com/ramil-g/infusion_uio

The Infusion UIO Module and Infusion Theme for Drupal

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:
  1. underline and bold
  2. 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.

The Infusion Fat Panel UIO

The 'Full Page' and 'Full Page with Preview' are similar and takes you to a separate page that has the controls where you can customize your site's UI, the difference being the 'Full Page with Preview' includes a preview of the changes that you've made.

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.

Week 6

For the sixth week of coding, I worked on the Full Page with Preview version of the UI Options. The Full Page with Preview version requires an iframe where users can preview the changes that they make to the website inside this iframe. I had to figure out a way to convert a Drupal php page into an html file and pass that to the Infusion settings to use inside the iframe. This blog post by Nick Lewis on how to convert a Drupal site to straight HTML was very useful. I've learned of a handy little Drupal function called drupal_http_request() from his blog post which allows you to perform an http request. From there, I just had to save it as an html file using another Drupal function.

There are still some stuff that needs to be resolved with the Fat Panel UI Options namely the custom template that I need to include with the module. I've figured out the best way to provide this and it is by using hook_menu() to register a separate page printing it out and just using drupal_exit() so that it doesn't get rendered with any theme and also the rest of the page like the sidebars and other regions won't be included.

Week 5 Update

Today is Sunday and I wanted to write an update on my GSOC project. This past week was the fifth week of coding and I’ve had to rewrite a lot of the code that I wrote in the beginning when I started my project. The reason for this is that I had to switch to the latest version of the Infusion Fluid library, version 1.5, and the code that I’ve written when I started was for the current stable version 1.4 of the library. A lot of new files has been added to the latest version of the library, most of which are CSS files. There were also some changes to the API so I had to update my code to reflect these changes.  There will probably be more changes since they’re still continuing to work on it and this is one of the challenges of this project since I am working with a version of the Infusion that's still undergoing lots of changes.

Aside from these changes, I also have implemented some new settings to the module. I have added an option for admins to use a block for the link to the the Full Page and Full Page with Preview UIO so that they can have the option of changing where this link appears on their page by going to the Block configuration page.

My next task is to create a custom template file to replace the default template file for the Fat Panel Frame that comes with the library and include it with my module. I need to use my own template file since my module uses a custom build of the Infusion library and the default template file does not link to the proper js and css files.

GSOC Week 3

It's now the third week of coding and last week I've made considerable progress on my module but a lot of work still needs to be done. With the code I've written so far, the module now works with the Fat Panel version of the UI Options. It seems to work on Mac and Windows in IE 10 and 9, Firefox, Chrome, and Safari but for some reason when I tested the module in Ubuntu, it did not work.
 What's next? First I need to figure out what is causing it not to function in Ubuntu. At first I found that the main Infusion.js was not being loaded so I looked at the file permissions and I did find that I had to change some permissions on some of the file in order for it to load. Now that it seems to be properly loading the .js file, I now see some javascript error in the browser's console.
Also, I will need to start working on integrating the other two versions of the UI Options: Full Page and Full Page with Preview. Integrating the Full Page UI Options involves creating a separate page in plain html and integrating that into Drupal. I need to find out the "Drupal Way" of working with static html or if it would be possible to just use a node in Drupal.

The Infusion UI Options module

Last week was the first official week of coding for the GSOC. I've started writing code for the module and have written the module's help page using Drupal's hook_help() function which will probably be modified as I work on the module. I have also started working on the module's config page where the administrator can choose which version of the UIO will be displayed. The three options for this are 'Fat Panel UIO' which is the default, 'Full Page', and 'Full Page with Preview'. I've also added a setting for customizing the text for the "Show/Hide" button of the Fat Panel UIO. So far, the form for this configuration page is working properly and these settings are being saved but that's all they're doing right now.

This week, I plan to work on registering the necessary library files with the Libraries API. The Fluid Infusion Builder lets you download a package that contains all the necessary files including third party libraries that are needed for the Infusion UI Options to work. Three of these third party libraries, jQuery, jQuery UI Core, and jQuery Widgets are already included in the Drupal core. The Infusion package also includes several components and frameworks each contained in their own separate folder within this package, some of which include image files. There's also a directory that contains html files for the different UIO versions (Fat Panel, Full Page...), each of which will have to be conditionally loaded depending on the configuration the administrator has set in the config page. Also some files actually require some modification like changing the links for the script tag to point to the proper .js file. This will need to be done by the user downloading the module.

Best Practices for external libraries for Drupal dictate that users should download them and place them in the sites/all/libraries folder, a folder that is located outside of the module folder. Since the Fluid Infusion Builder downloads a package with all these different frameworks, components and libraries, the challenge here would be to come up with the most optimal way to load the necessary files for each page by using the proper Drupal hooks, figuring out which files should be defined using Libraries API's hook_libraries_info, possibly writing some custom callback functions, while making sure that setup and installation doesn't get too cumbersome for the user.

Google Summer of Code

I will be participating in Google Summer of Code this year. The project that I will be working on is the Drupal Plugins for Infusion Components Project with Inclusive Design Institute. This project aims to integrate Fluid Infusion's User Interface Options into Drupal.

The UI Options improves a site's accessibility by giving users an interface that allow them to control the font size, adjust the contrast and simplify the page's layout among other things.

My project consists of two parts; the first one is writing a module for Drupal that will integrate the Infusion's UIO component into Drupal and the second part will be the creation of a Drupal theme that is optimized for this module.

I'm going to be writing this module for Drupal 7 and I will be utilizing the Libraries API for the external libraries. I also plan to add a configuration page for this module which will give site administrators the option to either have the Fat Panel UI, Full Page UI, or Full Page with Preview UI as the default interface that their users see.

The module can be used with any Drupal theme but for the second part of this project, I will be building a Drupal theme that is optimized for this module. For this, I am planning to use Zen as my base theme because it supports a lot of accessibility features.

I will be writing a lot more about my GSOC project on this blog and I will be using this blog to document my progress.