Improving forms

There are four scripts that deal with improving HTML forms.

• dragDropBinder.js
• fileFix.js
• labelsInput.js
• superselect.js

dragDropBinder.js

This makes setting up drag and dropping files into the browser simple. It binds an element where the file will be dropped to a file input element. So when a user drops files into the element they are automatically added to the file input.

To bind just call the following method:

bindDropArea(target, file, dropCallback, enterCallback);

The following is an example:

<div id="dropTarget">
    Drop stuff here
</div>
<input type="file" id="fileInput">

var target = document.getElementById("dropTarget");
var file = document.getElementById("fileInput");

bindDropArea(target, file, function(files) {
    console.log("The user added " + files.length + " files.");
}, function () {
    console.log("The user might drop soon...");
});

fileFix.js

Because Bootstrap doesn't style file input fields very well, this script automatically fixes them. You don't need to do anything other than include this script.

labelsInput.js

This is a custom input field where the user can type anything and click "Add" to enter any number of labels. Besides including this script no JavaScript is necessary. To create a label input field, just create a input with type labels. The value is a string containing the comma-separated labels.

<input type="labels" id="labels" name="labels" value="">

superselect.js

For large lists, it is not practical to use the default select element. This builds upon that to add searching/filtering. This is used for the language lists in Ayamel. To turn a select element into a "superselect", do the following after including the script:

$("select").superselect();

To set the value of a superselect, use one of the following methods instead of the JQuery val method.

$("select")[0].setValue("value");
$("select")[0].setValue(["one", "two", "four"]);