





















































Over 50 recipes for making your Moodle system more dynamic and responsive with JavaScript
The Yahoo! UI Library (YUI) offers a range of widgets and utilities to bring modern enhancements to your traditional page elements. In this chapter, we will look at a selection of these enhancements, including features often seen on modern interactive interfaces, such as:
We will once again be using mostly YUI Version 2 widgets and utilities within the YUI Version 3 framework. At the time of writing, few YUI2 widgets have been ported to YUI3. This method allows us the convenience of the improvements afforded by the YUI3 environment combined with the features of the widgets from YUI2.
A common feature of many web forms is the ability to provide suggestions as the user types, based on a list of possible values. In this example, we enhance a standard HTML input text element with this feature.
This technique is useful in situations where we simply wish to offer suggestions to the user that they may or may not choose to select, that is, suggesting existing tags to be applied to a new blog post. They can either select a suggested value that matches one they have started typing, or simply continue typing a new, unused tag.
First, set up a basic Moodle page in the usual way. In this example, we create autocomplete.php with the following content:
<?php
require_once(dirname(__FILE__) . '/../config.php');
$PAGE->set_context(get_context_instance(CONTEXT_SYSTEM));
$PAGE->set_url('/cook/autocomplete.php');
$PAGE->requires->js('/cook/autocomplete.js', true);
?>
<?php
echo $OUTPUT->header();
?>
<div style="width:15em;height:10em;">
<input id="txtInput" type="text">
<div id="txtInput_container"></div>
</div>
<?php
echo $OUTPUT->footer();
?>
Secondly, we need to create our associated JavaScript file, autocomplete.js, with the following code:
YUI().use("yui2-autocomplete", "yui2-datasource", function(Y) {
var YAHOO = Y.YUI2;
var dataSource = new YAHOO.util.LocalDataSource
(
["Alpha","Bravo","Beta","Gamma","Golf"]
);
var autoCompleteText = new YAHOO.widget.AutoComplete("txtInput",
"txtInput_container", dataSource);
});
Our HTML consists of three elements, a parent div element, and the other two elements contained within it: an input text box, and a placeholder div element to use to display the auto-complete suggestions.
Our JavaScript file then defines a DataSource to be used to provide suggestions, and then creates a new AutoComplete widget based on the HTML elements we have already defined.
In this example, we used a LocalDataSource for simplicity, but this may be substituted for any valid DataSource object.
Once we have a DataSource object available, we instantiate a new YUI2 AutoComplete widget, passing the following arguments:
Now when the user starts typing into the text box, any matching auto-complete suggestions are displayed and can be selected, as shown in the following screenshot:
In this example, we will use auto-complete in conjunction with a combo box (drop-down list). This differs from the previous example in one significant way—it includes a drop-down arrow button that allows the user to see the complete list of values without typing first.
This is useful in situations where the user may be unsure of a suitable value. In this case, they can click the drop-down button to see suggestions without having to start guessing as they type. Additionally, this method also supports the same match-as-you-type style auto-complete as that of the previous recipe.
Open the autocomplete.php file from the previous recipe for editing, and add the following HTML below the text box based auto-complete control:
<div style="width:15em;height:10em;">
<input id="txtCombo" type="text" style="vertical-align:top;
position:static;width:11em;"><span id="toggle"></span>
<div id="txtCombo_container"></div>
</div>
Next, open the JavaScript file autocomplete.js, and modify it to match the following code:
YUI().use("yui2-autocomplete", "yui2-datasource", "yui2-element",
"yui2-button", "yui2-yahoo-dom-event", function(Y) {
var YAHOO = Y.YUI2;
var dataSource = new YAHOO.util.LocalDataSource
(
["Alpha","Bravo","Beta","Gamma","Golf"]
);
var autoCompleteText = new YAHOO.widget.AutoComplete("txtInput",
"txtInput_container", dataSource);
var autoCompleteCombo = new YAHOO.widget.AutoComplete("txtCombo",
"txtCombo_container", dataSource, {minQueryLength: 0,
queryDelay: 0});
var toggler = YAHOO.util.Dom.get("toggle");
var tButton = new YAHOO.widget.Button({container:toggler,
label:"↓"});
var toggle = function(e) {
if(autoCompleteCombo.isContainerOpen()) {
autoCompleteCombo.collapseContainer();
}
else {
autoCompleteCombo.getInputEl().focus();
setTimeout(function() {
autoCompleteCombo.sendQuery("");
},0);
}
}
tButton.on("click", toggle);
});
You will notice that the HTML we added in this recipe is very similar to the last, with the exception that we included a span element just after the text box. This is used as a placeholder to insert a YUI2 button control.
This recipe is somewhat more complicated than the previous one, so we included some extra YUI2 modules: element, button, and yahoo-dom-event.
We define the AutoComplete widget in the same way as before, except we need to add two configuration options in an object passed as the fourth argument.
Next, we retrieve a reference to the button placeholder, and instantiate a new Button widget to use as the combo box 'drop-down' button.
Finally, we define a click handler for the button, and register it.
We now see the list of suggestions, which can be displayed by clicking on the drop-down button, as shown in the following screenshot:
The user can type into the box to receive auto-complete suggestions as before, but may now use the combo box style drop-down button instead to see a list of suggestions.
When the user clicks the drop-down button, the click event is fired.
This click event does the following: