client form

Functions

blur

Calls document.activeElement.blur(), removing focus of the current active element. See select(e) for an example.

select(e)

Selects the given element.

Example:

	Dom = require 'dom'
	Ui = require 'ui'
	Form = require 'form'

	Dom.section !->
		Dom.div !->
			el = null
			Dom.input !->
				el = Dom.get()
				el.value "click to delesect me"
				Dom.onTap !->
					Form.blur()
			Ui.button "Click to select the input field", !->
				Form.select(el)

conditions(func)

Define functions to check if a form meets the conditions you want.

Example:

Dom = require 'dom'
Form = require 'form'

el = null
avengers = ["iron man", "captian america", "hulk", "thor", "black widow", "hawkeye"]
Dom.section !->
	Dom.div !->
		Dom.text "Name an Avenger"
		el = Form.input !->
			name: 'anInputField'
			text: 'Name an Avenger'
		Form.condition ->
			return "Content is required" if el.value() == ''
			return "That's Batman" if el.value().toLowerCase() is 'batman'
			return "That's not an Avenger" if el.value().toLowerCase() not in avengers
		Ui.button "Click to validate ", !->
			Form.checkValues()

checkValues()

Runs the set condition functions. See conditions above.

setPageSubmit(cb,alwaysDirty)

Sets a commit action in the top bar. Useful when the entire page is dedicated to a form.

cb takes a callback function which is called when the user uses the commit action. The callback function is given an object containing the value of all names input fields on the page.

dirty takes 0, 1 or 2:

• Dirty 0: Only show the commit and cancel actions when at least one field has content.
• Dirty 1: Always show the commit action, but no cancel action.
• Dirty 2: Always show both the commit and cancel action.

Example:

Dom = require 'dom'
Form = require 'form'
Page = require 'page'

cb = (result) !->
	Modal.show ("You entered: " + result.inputField + ", " + result.inputField2)
	# you should send this info to the server to note it in the database.


Dom.section !->
	Ui.bigButton "Describe cat", !->
		Page.nav !->
			Dom.section !->
				Dom.h2 "Describe cat"
				el = Form.input
					name: "inputField"
					text: "Enter your favorite type of cat."
				el2 = Form.input
					name: "inputField2"
					text: "Enter your favorite color cat."
				Form.setPageSubmit cb, 0

label(content)

Render a small label. Works similar to Dom.content(), as in it can take both a string or an fucntion describing the element further. The content is wrapped in .

Example:

Dom = require 'dom'
Form = require 'form'

Dom.section !->
	Dom.label !->
		Dom.style
			color: "#822"
		Dom.text "Awesome follows:"
	Dom.userText "\nWait for it...\n"
	Dom.label "Kitty!"

makeInput(opts)

Makes an input field. In essence all of the following API's are shortcuts for this. It is recommendable to use input(), text() and check() in favor of defining your own. Use this only when those are not adequate.

opts accepts the following:

• value: sets the value of the input, can be a function
• name: name of the input field
• onChange: function that is called when the value changes. The value is given as argument.
• content: Dom structure for nesting

It returns an array containing two values. The first is a pointer to the internal handleChange(value) function (which triggers onChange and the delta for pageSubmit) The second is the starting value.

input(opts)

Creates a single line input field and returns the wrapped element.

opts accepts the following:

• simple: true to render a smaller, more basic input field
• onSave: true to render clickable box element, which leads the user to a separate prompt.
• text: 'placeholder text' fills the text field with a placeholder text.
• flex: true ensures css 'flex' is set.
• title: 'title text' only works when onSave is set to true. It sets the title on the prompt, and fills the text field is text is not set.

Example:

Dom = require 'dom'
Form = require 'form'
Ui = require 'ui'
Modal = require 'modal'

Dom.section !->
	myForm = Form.input {text: 'Enter your message here.'}
	Ui.button "Send", !->
		Modal.show "send: " + myForm.value()

text(opts)

Works the same as input(opts) described above, only it creates a multi line input field Creates an input text field and returns the wrapped element.

Example:

Dom = require 'dom'
Form = require 'form'
Ui = require 'ui'
Modal = require 'modal'

Dom.section !->
	myForm = Form.text {text: 'Enter your message here.'}
	Ui.button "Send", !->
		Modal.show "send: " + myForm.value()

check(opts)

Creates a checkbox and returns it as a wrapped element. The element has the property checked set to true if it is.

opts accepts the following:

• simple: true to just render a checkbox.
• text: 'description' adds text in front of it.
• text: function() you can also create further Dom elements in front of the checkbox.
• sub: 'text' adds text in front of the checkbox, in smaller, lighter text.

Example:

Dom = require 'dom'
Form = require 'form'
Ui = require 'ui'
Modal = require 'modal'

Dom.section !->
	myCheck = Form.check {text: 'I like pie'}
	Ui.button "Send", !->
		Modal.show "Checked: " + myCheck.prop('checked')

hidden(name, value)

Creates a hidden inputfield (dispaly: none) and returns it as a wrapped element. You can set the name and value property.

Mind you, the use cases for this are slim, but the name and value of the field are send along with the post functions such as checkValues()

Dom = require 'dom'
Form = require 'form'
Ui = require 'ui'
Modal = require 'modal'


Dom.section !->
	myHidden = Form.hidden "Bane", "I was born in the shadows."
	Ui.button "Send", !->
		Modal.show "Value of Hidden: " + myHidden.value()

values()

Returns the names and values of all Form elements on this page as an object.

box(content)

Creates a box element. You can use this to visually group elements together.

Example:

Dom = require 'dom'
Form = require 'form'
Ui = require 'ui'

Dom.section !->
	Form.box !->
		Dom.label ("Cats:")
		Form.check {text: "I like cats", name:"likeCats"}
		Form.check {text: "I don't like cats", name:"noCats"}
	Form.box !->
		Dom.label ("Dogs:")
		Form.check {text: "I like dogs", name:"likeDogs"}
		Form.check {text: "I don't like dogs", name:"noDogs"}
	Ui.button "Commit", !->
		log "Commmit:"
		log Form.values()

sep()

Render a horizontal, 1 pixel high line.

Example:

Dom = require 'dom'
Form = require 'form'

Dom.section !->
	Form.box !->
		Dom.label ("Cats:")
		Form.check {text: "I like cats", name:"likeCats"}
	Form.sep()
	Form.box !->
		Dom.label ("Dogs:")
		Form.check {text: "I like dogs", name:"likeDogs"}

vSep(marginLeft, marginRight)

Render a vertical, 1 pixel wide line. You can provide horizontal margins

Example:

Dom = require 'dom'
Form = require 'form'

Dom.section !->
	Dom.style
		display: "flex"
		justifyContent: "space-between"
	Dom.div !->
		Dom.style
			width: "49%"
		Form.check {text: "I like cats", name:"likeCats"}

	Form.vSep("10px", "10px")

	Dom.div !->
		Dom.style
			width: "49%"
		Form.check {text: "I like dogs", name:"likeDogs"}

smileyToEmoji(text)

Converts ascii smilies like :) to UTF-8 smilies like 😊. You might want to convert text to smilies on every output field where you might except smilies to appear.

Example:

Dom = require 'dom'
Form = require 'form'
Ui = require 'ui'

inT = null
outT = null
Dom.section !->
	inT = Form.input {simple:true, name: "raw"}
	Ui.button "Convert to smiley", !->
		outT.setText Form.smileyToEmoji( inT.value() )
	Dom.userText "No output yet."
	outT = Dom.last()