Class: Element112

Element112

new Element112(_elt, _kind)

A base class DOM wrapper. To see the original DOM element, call the .log() method. This class has a number of private properties and methods that should not be exposed. _elt refers to the DOM object that the class wraps. $_elt is a jQuery object that wraps _elt, and is used as a shorthand. Note that `_this` is an explicit reference to the class's scope at construction. Every chainable method should return _this, and there should be no use of the original `this` within methods. Event handlers must be proxied (using $.proxy(handler, _this)) so references to `this` inside the handler refer to the Element112 instance, not the DOM object (which would be a significant breach).
Parameters:
Name Type Description
_elt HTMLElement A DOM element to wrap.
_kind string Internal string identifier, such as "button", or "dropdown".
Source:

Members

_elementReferenceID :String

Unique identifier applied to individual elements.
Type:
  • String
Source:

_instanceID :String

Unique identifier applied to all elements belonging to the same exercise instance.
Type:
  • String
Source:

Methods

box(optionsopt) → {Object}

A comprehensive box measurement method. Returns and object with fields "left", "top", "width", and "height". By default, the entire box (margin, border, and padding) are included. Pass in options to modify this. (i.e. Options all default to true.) Excluding margin, border, and padding is like calling .width(). Excluding margin and border is like calling .innerWidth(). Excluding just margin is like calling .outerWidth(). Excluding nothing (default) is like calling .outerWidth(true). Note: It does not make sense to include margin without including padding and border. See the CSS box model.
Parameters:
Name Type Attributes Description
options object <optional>
Object with three possible fields: padding, border, and margin.
Source:
Returns:
Object with 4 fields:
  • left
  • top
  • width
  • height
Type
Object
Example
// Include padding and border, but not margin.
var bbox = myElement.box({
    margin  : false,
    padding : true,          // these are
    border  : true,          // optional
});

// bbox is now
{
    left   : 12,
    top    : 44,
    width  : 42,
    height : 32
}

disable() → {Object}

Disable the element. Implemented for:
  • button
Source:
Returns:
Returns the API object.
Type
Object

enable() → {Object}

Enable the element. Implemented for:
  • button
Source:
Returns:
Returns the API object.
Type
Object

height(val) → {Number|Object}

If called without arguments, returns the height of the element as a number (without "px"). If called with arguments, sets the width.
Parameters:
Name Type Description
val Number | String Either a number in pixels or a measurement (like "20px").
Source:
Returns:
Number is returned for get method. Else, regular object returned.
Type
Number | Object

hide(callbackopt) → {Object}

Hides the element. Opacity transitions work.
Parameters:
Name Type Attributes Description
callback function <optional>
Optional callback function.
Source:
Returns:
Type
Object

innerHeight(val) → {Number|Object}

Without arguments, returns the innerHeight of the element (i.e. the height with top and bottom padding, but no margin or border). Given an argument, it sets the innerHeight.
Parameters:
Name Type Description
val Number | String Either a number in pixels or a measurement (like "20px").
Source:
Returns:
Number is returned for get method. Else, regular object returned.
Type
Number | Object

innerWidth(val) → {Number|Object}

Without arguments, returns the innerWidth of the element (i.e. the width with left and right padding, but no margin or border). Given an argument, it sets the innerWidth.
Parameters:
Name Type Description
val Number | String Either a number in pixels or a measurement (like "20px").
Source:
Returns:
Number is returned for get method. Else, regular object returned.
Type
Number | Object

isDisabled() → {Boolean}

Returns the element's disabled state.
Source:
Returns:
Type
Boolean

isVisible() → {Boolean}

Returns the visibility state of the element. If the element has transitions and was recently hidden, this method does not return true until the transition is complete.
Source:
Returns:
Type
Boolean

log()

Logs the DOM element to the console.
Source:

off(event, handleropt) → {Object}

Removes an event handler. Calling .off() with an optional handler name removes the specific handler. Calling .off() with no arguments removes all event handlers from the element.
Parameters:
Name Type Attributes Description
event String A Javascript event type, such as "click" or "keypress".
handler function <optional>
Optionally specifies a handler to remove.
Source:
Returns:
Element112
Type
Object

on(event, handler) → {Object}

Attaches an event handler to the specified event type. The handler can be anonymous or named.
Parameters:
Name Type Description
event String A Javascript event type, such as "click", or "keypress".
handler function The handler function.
Source:
Returns:
Element112
Type
Object
Example
// A named handler
function notify() {
    alert("Hello!");
}
myButton.on("click", notify);

// An anonymous handler
myButton.on("click", function() {
    alert("What's up?");
});

// References itself without using this.hide();
myButton.on("click", function() {
    myButton.hide();
});

outerHeight(val) → {Number|Object}

Returns the outerHeight of the element (i.e. the height with top and bottom padding, border, and optionally margin included.) Pass in `true` to include the margin. If a number or string is passed in, the outerHeight is set.
Parameters:
Name Type Description
val Boolean | Number | String A Boolean value of true includes margin. A Number is interpreted in pixels.
Source:
Returns:
Type
Number | Object

outerWidth(val) → {Number|Object}

Returns the outerWidth of the element (i.e. the width with left and right padding, border, and optionally margin included.) Pass in `true` to include the margin. If a number or string is passed in, the outerWidth is set.
Parameters:
Name Type Description
val Boolean | Number | String A Boolean value of true includes margin. A Number is interpreted in pixels.
Source:
Returns:
Type
Number | Object

position(xopt, yopt) → {undefined|Object}

Repositions the element at (x, y) relative to the top left of the exercise area, with the element anchored top left. If no arguments are provided, it returns an object with fields "x" and "y".
Parameters:
Name Type Attributes Description
x Number <optional>
Pixel x position.
y Number <optional>
Pixel y position.
Source:
Returns:
If no arguments are provided, an object is returned with fields "x" and "y".
Type
undefined | Object

remove() → {undefined}

Removes the element from the DOM tree.
Source:
Returns:
Type
undefined

selectable(boolopt) → {Boolean|Object}

Sets and gets user-selectability state for an element. Calling `.selectable(false)` disables user selection such as copying to the clipboard. If called without arguments, a boolean state indicating selectability is returned.
Parameters:
Name Type Attributes Description
bool Booelan <optional>
False disables selectability.
Source:
Returns:
A boolean state is returned if no arguments are provided.
Type
Boolean | Object

show(callbackopt) → {Object}

Shows the element. Opacity transitions work.
Parameters:
Name Type Attributes Description
callback function <optional>
Optional function that gets called after completion of transitions.
Source:
Returns:
Type
Object

style(optionsopt) → {Object}

Sets custom stylesheet classes. In general, the style class is a hyphen-joined string of the form "type-property-attribute". Some classes, such as transitions, have the more general form "property-attribute".
Parameters:
Name Type Attributes Description
options Object <optional>
An object of style options.
Source:
Returns:
If no arguments are provided, the current object corresponding to the style classes is returned. Else, Element112 is returned.
Type
Object

text(contentopt) → {undefined}

Replaces the current element's label text. If no argument is supplied, the current innerHTML is returned. Current implementation works for the following elements
  • Header
  • Paragraph
  • Button
  • Dropdown
  • Code
Parameters:
Name Type Attributes Description
content string <optional>
The replacement content.
Source:
Returns:
Type
undefined

trigger(event) → {Object}

Trigger all handlers attached to the element's specified event.
Parameters:
Name Type Description
event String A String containing a Javascript event type, such as "click".
Source:
Returns:
Element112.
Type
Object

triggerDropdown(index) → {object}

Triggers a click on a dropdown element at index i.
Parameters:
Name Type Description
index number element index to trigger in the dropdown list (0 indexed)
Source:
Returns:
Type
object

width(val) → {Number|Object}

If called without arguments, returns the width of the element as a number (without "px"). If called with arguments, sets the width.
Parameters:
Name Type Description
val Number | String Either a number in pixels or a measurement (like "20px").
Source:
Returns:
Number is returned for get method. Else, regular object returned.
Type
Number | Object