Nevertheless, I decided to revisit this project several years later with my more advanced JavaScript skills. It was completely rewritten and made more flexible / reusable. I decided to release this version under the MIT license in case anyone finds something useful. The following is an overview of how the code works.

Global Variables

All of the core code is contained in a closure, so as to not leak any variables into the global scope. There are, however, two global variables that are created: UTILS and MOVIEPICKERDATA.

Since the project does not rely on any JavaScript libraries, I decided to separate the basic "utility" functions (cookies, Ajax, animation, etc.) from the core logic of the program, essentially creating a mini JavaScript library. These functions are accessible as properties of the UTILS global variable.

Similarly, the data (selection choices and results) is separated from everything else and is stored in the MOVIEPICKERDATA global variable. This division allows updates to be applied selectively to different parts of the project.

Data

The data is formatted as JSON. Each question is an object with a question property that holds the question text and a choices property which is an array containing the text for each choice. In addition, this object also has a property for each choice. This property name matches the choice text from the choices array.

These properties are also question objects. However, if the choice should produce a result instead of another question, the property should be an object that describes the movie selection with title, studio, year and link properties. Note that an image is displayed from the img directory that matches the title (spaces are replaced with underscores).

Here is an example of a menu with a single question and two choices:

If the Comedy choice resulted in another question, it would look like this:

Data Manipulation

Since the data is exposed through a global variable, it can be manipulated by other scripts on the page. In other words, the questions, choices and results can be changed on the fly. Similarly, you can create "expansion" scripts to build on and expand on the data already available. The only requirement is that this script is executed after the original data script. You may also want to supply an image for any newly created or modified choices.

Here are some examples of expansion scripts:

Summary

This post covered the different parts of the Movie Picker project (main, utils, data), the data structure and data manipulation. Part II will discuss the selection logic and browser differences.

Adding Calculators to a Page

There are now two ways to add calculators to a page. The first and simplest way is to add the class "calc" to any elements on the page that should contain a calculator and then call JSCALC.init():

In versions prior to 1.1a4, the calculator script would automatically create calculators. Now, you must call JSCALC.init() to create them. This has the advantage of more control as to when a calculator is inserted in the page. For example, you may want to have a button on the page that displays a calculator when pressed. This way, a calculator is never created unless it's needed.

The second way to create a calculator involves passing an argument to JSCALC.init(). Let's say you have no control over the HTML or do not wish to modify it. In this case, you can create a calculator inside an existing element simply by specifying the element's id.

Alternatively, an element object can be passed to the init() method. Here is an example using nothing but JavaScript:

Calculator Objects

The JSCALC.init() method returns one or more Calculator objects that can be used to control the calculators displayed on the page. When called with no arguments (or invalid arguments), the init() method will return an array of objects - one for each calculator that was created. If an element id or element object is passed, however, it will return the single Calculator object or false if one could not be created. Other methods of the JSCALC object also return Calculator objects.

Calculator objects have a remove() method which removes the calculator from the page. Using this method, the previous example can be modified to allow removing the calculator as well as creating it.

A similar result can be achieved more easily and efficiently by toggling the CSS display property of the containing element. If you don't have a reference to the calculator's parent/containing element, one can be obtained from the container property of the Calculator object.

Calculator objects also have a press() method which simulates pressing buttons on the calculator. Using the press() method, you can pre-populate the calculator display and memory for the user.

The press method returns the Calculator object on which it was called, so calls to it can be chained together. It also accepts non-numeric button values as strings.

Please see the API documentation for a complete listing of the available properties and methods. A live example and download links are on the JavaScript Calculator project page.

To get complete details and download the latest version, visit the Tab Override page at the WordPress Plugin Directory. You can try out the latest version of the jQuery plugin on the demo page.

The $tab_override Global Object

As soon as the plugin code is executed, a global object named $tab_override is created. This object is an instance of the Tab_Override class. You can use this object to check if the Tab Override plugin is installed and activated. Normally to check for another plugin you would do something like this:

If you just need to check for version 3 or higher, you can do this instead:

An alternative, even better solution, would be to use the plugin hooks.

Using the Plugin Action Hooks

As of version 3.0, two action hooks are provided for use by other plugins. They are tab_override_init and tab_override_add_scripts. They can be used by calling the add_action function just like any other action hooks in WordPress.

The tab_override_init Action Hook

This hook is fired when Tab Override has successfully initialized itself. A simpler way to check for the Tab Override plugin is to use this hook like this:

This has a couple advantages. Primarily, my_plugin_function will only be executed when Tab Override is running. This means only in the admin area and when the plugin is installed and activated. The previous examples would run on every page load and check for the plugin, even on the front-end of the site.

The other notable advantage is that this hook is only fired once the plugin has initialized itself, meaning that all the primary actions and filters have been added. If you plan on modifying or removing any of these actions or filters, it's better to rely on this hook than try to guess another appropriate one or you may end up trying to remove something that hasn't been added yet.

Here is another example that disables the visual editor when Tab Override is activated. Deactivating the Tab Override plugin will automatically re-enable the visual editor.

The tab_override_add_scripts Action Hook

This hook is fired after JavaScript is added to the page. You can use this hook to insert additional scripts that change the way Tab Override works. Here is a simple example that outputs the settings to the console when Tab Override is in use:

display-settings-1.0.js:

Example Plugin

This is an example plugin that removes the Tab Override submenu from the Settings menu. It uses the tab_override_init hook and the $tab_override global object.

Editing the main plugin files is dangerous, as you risk losing your changes whenever the plugin is updated. Using the above methods provides a safer, cleaner way to modify the plugin functionality.

• a new auto indent feature
• translation support
• the addition of tab_override_init and tab_override_add_scripts hooks

In addition, there are enhancements to both security and performance as well as a new uninstall procedure and much improved documentation. Most of the code was refactored into a class. Since some PHP 5 features were utilized, PHP 4 is no longer supported. This version of the plugin also includes support for the upcoming WordPress 3.2 release and the fullscreen editor mode.

Download it and give it a try!

Check out some of my projects or contact me.