Andrew Plummer - Design Development Translation

HotText.js

Overview

HotText.js can be dropped into a page (along with its requirements), and be immediately called to create draggable HotText inputs.

Requirements

The MooTools framework 1.2+, both Core and More, with the following packages:

Core: Core Package, Native Package, Class Package, Element Package
More: Drag Package (does not require Drag.Move)

Usage

Getting Started

HotText is designed to be a "drop-in" solution, so working with it is extremely easy. Just link to the MooTools Core & More packages, and the HotText source file. Then, pass a CSS selector for the elements you want to make HotText:

<form action="index.php" method="post"> <fieldset> <div class="hotText"> <span>1</span> <input type="text" name="quantity" value="1" /> </div> </fieldset> </form> <script type="text/javascript" src="/path/to/MooToolsCore.js"></script> <script type="text/javascript" src="/path/to/MooToolsMore.js"></script> <script type="text/javascript" src="/path/to/HotText.js"></script> <script type="text/javascript"> new HotText(".hotText"); </script>

That's it! Your HotText elements are now initialized and ready to use. Try dragging them around and watch the values change. You can also click on the elements and edit the input directly.

Caveats

The elements to be turned into HotText may be of any type, either block-level or inline. However, there are two required elements that must be inside: a span element (to display the value), and either a select or input element.

If you use an input element, it must be of the type text, and the value must be numeric. Numeric data may be formatted – for example a dollar sign in front or unit on the end, but there must be a numeral somewhere inside the data to let HotText know that it can be incremented.

Options

Options are passed in the HotText constructor as the second argument.

Option Accepts Default Description
snapTo
  • Number
75 The number of pixels for each "step". Increase this number if the dragging feels to "sensitive".
autoSubmit
  • Boolean
false This option will submit the form automatically when the value is changed.
autoCheckbox
  • Boolean
false Checks linked checkbox elements when the value is changed. See below for more details.
range
  • Array
[-Infinity, Infinity] An array with the min and max values to limit input to. If you set this option to [1,3], you will only be able to drag to numbers between 1 and 3. Not applicable to select elements.
commas
  • Boolean
true Numeric inputs will have grouped thousands separated by commas. Not applicable to select elements.

Other Features

Auto Checkbox

HotText is designed to be used with – but does not require – degradable HTML. A common goal of web developers is to create pages that do not require advanced features like Javascript to be used properly. This is because there is no way to know what kind of a device people will be viewing your page with, and many mobile devices, such as mobile phones, still do not support Javascript.

The autoCheckbox option is one way that HotText helps to facilitate this. This option is easier to show than it is to explain:

<tr> <td> <input type="checkbox" name="edit[]" value="22" /> </td> <td class="hotText"> <span>445</span> <input type="text" name="quantity22" value="445" /> </td> </tr>

Let's say we are working with an editable table, or in other words a form with a table inside. It's possible that this table has many rows, and probable that it is connected to a database on the server. If we were to click on the "submit" button without Javascript on, all the data would be submitted at the same time. This would require a number of database queries, which would get bulky fast.

However, if we were to add a checkbox to each row, the user could check off which rows they were editing, and we could streamline things a bit.

If we create a form of this type and follow its conventions, we can then turn on the autoCheckbox option, and HotText will automatically turn on these checkboxes when a row has been changed. Essentially, it is looking for a digit in the name attribute of the changed input. This digit is intended to be the primary key of the database. Then, it will search for a checkbox with the name edit[] and this digit as its value. If it finds one, it will know that this checkbox was intended as the "edit" checkbox for that row, and will turn it on.