Skip to content
This repository was archived by the owner on Nov 25, 2020. It is now read-only.

Merged inputview docs #72

Merged
merged 1 commit into from
Aug 18, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 0 additions & 119 deletions src/components/inputs/docs/inputview.md

This file was deleted.

66 changes: 66 additions & 0 deletions src/components/inputs/inputview.coffee
Original file line number Diff line number Diff line change
@@ -1,8 +1,62 @@
KDView = require './../../core/view.coffee'
KDInputValidator = require './inputvalidator.coffee'

###*
* The base input field view. Similar to the classic `<input type="foo">`
* element, but with additional options such as validation.
*
* ## Usage
*
* ```coffee
* view = new KDInputView
* placeholder: 'Type something here for an inspiring message!'
*
* view.on 'keyup', (e) ->
* if e.keyCode is 13 #13==Enter
* new KDNotificationView
* content: "You said #{e.target.value}!"
*
* appView.addSubView view
* ```
*
* Create a simple text input view, with a placeholder. When the `keyup`
* event is fired, we check what the key is. If the keyCode is `13`
* *(An Enter key)*, we create a notification with the value of the field.
###
module.exports = class KDInputView extends KDView

###*
* Options supports the following keys.
* - **options.type**: The type of this input. All html input types are
* supported. It should be noted that `"textarea"` and `"select"` do not
* create `<input>` elements, but rather they create `<textarea>` and
* `<select>` respectively.
*
* Supports the options `"text"`, `"password"`, `"hidden"`, `"checkbox"`,
* `"range"`, `"textarea"`, and `"select"`.
* - **options.name**: The `name="foo"` attribute of this `<input>` element.
* - **options.label**: The label instance for this input field.
* - **options.defaultValue**: The default value for this instance.
* - **options.placeholder**: The HTML5 placeholder for this input.
* - **options.disabled**: Whether or not this input is disabled. Defaults to
* `false`
* - **options.selectOptions**: If this input is of the type `"select"`, this
* list populates the select options. Defaults to `null`
* - **options.validate**: An object containing validation options, which are
* passed to the KDInputValidator for this input. Note that the validator is
* created internally, you do not need to create it. Defaults to `null`
* - **options.autogrow**: If the input type can grow, such as a `textarea`,
* this will cause the input to grow to the content size, rather than scroll.
* Defaults to `false`
* - **options.bind**: A string of event names, separated by a space. Defaults
* to `" blur change focus"`
* - **options.forceCase**: Force either uppercase, or lowercase for this field
* type. If `null`, case is not enforced. Supports the options: `"uppercase"`,
* `"lowercase"`, `null`
*
* @param {Object} options
* @param {Object} data
###
constructor:(o = {}, data)->

o.type or= "text" # a String of one of input types "text","password","select", etc...
Expand Down Expand Up @@ -146,12 +200,21 @@ module.exports = class KDInputView extends KDView
@$().attr "placeholder",value
@options.placeholder = value

###*
* Disable this input field.
###
makeDisabled:->
@getDomElement().attr "disabled","disabled"

###*
* Enable this input field.
###
makeEnabled:->
@getDomElement().removeAttr "disabled"

###*
* Get the value of this input field.
###
getValue:->
if @getOption("type") is "checkbox"
value = @$().is ':checked'
Expand All @@ -165,6 +228,9 @@ module.exports = class KDInputView extends KDView

return value

###*
* Set the value of this input field.
###
setValue:(value)->
$el = @$()
el = $el[0]
Expand Down