forked from nyarly/NinjaScript
-
Notifications
You must be signed in to change notification settings - Fork 1
Standard Behaviors
Judson edited this page Jul 7, 2011
·
24 revisions
There are a number of pre-packaged behaviors available for NinjaScript. These can be used in two general forms:
Ninja.behavior({
"#my_el": Ninja.submitsAsAjax,
"#other": Ninja.submitsAsAjax({busyElement: "#busy"})
})
The first uses all the defaults for the behaviors, the second lets you pass configuration details (in this case the target for a busy overlay.) Notice that in the first form, you’re simply passing a function reference in to Ninja.behavior
, which will be called without arguments to get the behavior.
The behaviors that ship with Ninjascript:
- Ninja.submitsAsAjax()
- The targeted link or form is set up so that it submits via a XMLHTTPRequest object. We expect back a javascript snippet which is eval’d. (yeah, yeah) This is a Metabehavior for submitsAsAjaxForm and submitsAsAjaxLink. In this case, the Metabehavior looks to see if the element under consideration is a link or a form and applies the appropriate behavior.
- Ninja.submitsAsAjaxLink()
- Converts a link to send its GET request via Ajax – we assume that we get Javascript back, which is eval’d. While we’re waiting, we’ll throw up a busy overlay if configured to do so. By default, we don’t use a busy overlay.
- Ninja.submitsAsAjaxForm()
- Converts a form to send its request via Ajax – we assume that we get Javascript back, which is eval’d. We pull the method from the form: either from the method attribute itself, a data-method attribute or a Method input. While we’re waiting, we’ll throw up a busy overlay if configured to do so. By default, we use the form itself as the busy element.
- Ninja.becomesAjaxLink()
- This is a chaining of
submitsAsAjax
andbecomesLink
. Applied to a form (normally without visible inputs), it yanks the form itself out of the DOM, replacing it with an
<a href='#'>...</a>
that will submit the original form via Ajax. - Ninja.becomesLink()
- Applied to a form (normally without visible inputs), it yanks the form itself out of the DOM, replacing it with an
<a href='#'>...</a>
that will submit the original form. The result is that you can use a link to do non-GET requests, but still have it degrade nicely when Javascript isn’t available. Handles image submits as well. - Ninja.decays()
- Tthis element should survive for a little while and then disappear, or else vanish when clicked on.
- Ninja.hasPlaceholder()
- Used on text or password inputs, or textareas, this behavior finds a related element with descriptive text, pulls the related element out of the DOM, and uses it as placeholder text on the element. In HTML5 capable browsers, it merely sets the placeholder attribute, but for older browsers we do some pretty standard trickery to produce the desired result. Under consideration are placeholders for select menus.
- Ninja.triggersOnSelect()
- Applied to a form containing a select input, alters the form such that it will submit when the user selects an entry. Removes the submit button, as well.
Configuration | default | |
---|---|---|
busyElement | Determines how we find the element to overlay with a busy spinner |
undefined – use the resulting link |
actions | JSON Handlers – makes a JSON request instead of script | none – request Javascript and eval the response |
In general, you’ll want to use submitsAsAjax instead, since it’ll behave correctly regardless.
Configuration | default | |
---|---|---|
busyElement | Determines how we find the element to overlay with a busy spinner |
undefined – use the resulting link |
actions | JSON Handlers – makes a JSON request instead of script | none – request Javascript and eval the response |
In general, you’ll want to use submitsAsAjax instead, since it’ll behave correctly regardless.
Configuration | default | |
---|---|---|
busyElement | Determines how we find the element to overlay with a busy spinner |
undefined – use the resulting link |
actions | JSON Handlers – makes a JSON request instead of script | none – request Javascript and eval the response |
Configuration | default | |
---|---|---|
retainedFormAttributes | An array of strings that lists the attributes to copy from the original form into the link. | ["id", "class", "lang", "dir", "title", "rel", "data-.*"] |
busyElement | How to find the element that should be overlayed with a spinner |
undefined – use the resulting link |
Configuration | default | |
---|---|---|
retainedFormAttributes | An array of strings that lists the attributes to copy from the original form into the link. | ["id", "class", "lang", "dir", "title", "rel", "data-.*"] |
Configuration | default | |
---|---|---|
lifetime | How long the element survives before being removed automatically (in millis) | 10000 |
diesFor | The duration of the “die” animation (ms) | 600 |
Configuration | default | |
---|---|---|
textElementSelector | function that returns a selector for the text element associated with this element | returns "*[data-for=" + elem.id + "]"
|
findTextElement | A function used to find the descriptive element for this input | Finds the first element that matches the result of textElementSelector |
findParentForm | A function that finds the parent form of the input | |
retainedInputAttributes | which attributes to copy from a password field to it’s replacement text field | [
"name", "class", "style", "title", "lang", "dir",
"size", "maxlength", "alt", "tabindex", "accesskey",
"data-.*"
] |
Configuration | default | |
---|---|---|
placeholderText | Placeholder to put into the select input | "Select to go" |
placeholderValue | Largely unimportant: the value of the placeholder option | "instructions" |