{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# IRuby Input\n",
    "\n",
    "The `IRuby::Input` class makes it easier for IRuby users to get input from users. For example:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "name = IRuby.input 'Enter your name'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The following input methods are supported on the `IRuby` module:\n",
    "\n",
    "| method | description |\n",
    "| -------- | -------- |\n",
    "| `input(prompt)`   | Prompts the user for a line of input |\n",
    "| `password(prompt)`   | Prompts the user for a password |\n",
    "| `form(&block)`   | Presents a form to the user |\n",
    "| `popup(title,&block)`   | Displays a form to the user as a popup |"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Forms\n",
    "\n",
    "Forms are groups of inputs to be collected from the user. For example:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  input :username\n",
    "  password :password\n",
    "  button\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The following methods are available to build forms: \n",
    "\n",
    "| method | description |\n",
    "| -------- | -------- |\n",
    "| `input(key=:input)`   | Prompts the user for a line of input |\n",
    "| `textarea(key=:textarea),`   | Adds a textarea to the form |\n",
    "| `password(key=:password)`   | Prompts the user for a password |\n",
    "| `button(key=:done, color: :blue)`   | Adds a submit button to the form |\n",
    "| `cancel(prompt='Cancel')`   | Adds a cancel button to the form |\n",
    "| `text(string)`   | Adds text to the form |\n",
    "| `html(&block)`   | Inserts HTML from the given [erector block](https://github.com/erector/erector)   |\n",
    "| `file(key=:file)`   | Adds a file input to the form |\n",
    "| `date(key=:date)`   | Adds a date picker to the form |\n",
    "| `select(*options)`   | Adds a dropdown select input to the form |\n",
    "| `radio(*options)`   | Adds a radio select input to the form |\n",
    "| `checkbox(*options)`   | Adds checkbox inputs to the form |"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Popups\n",
    " \n",
    "Popups are just forms in a bootstrap modal. They are useful when users **Run All** in a notebook with a lot of inputs. The popups always appear in the same spot, so users don't have to scroll down to find the next input. \n",
    "\n",
    "Popups accept a `title` argument, for example: "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.popup 'Please enter your name' do \n",
    "  input\n",
    "  button\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Submit and cancel\n",
    "\n",
    "The enter key will submit an input or form and the escape key will cancel it. Canceled inputs are returned as `nil`. Inputs are automatically canceled if destroyed. An input can be destroyed by clearing its cell's output. The `cancel` button will cancel a form and all other buttons will submit it. \n",
    "\n",
    "After a form destroyed, the cell's output is cleared. Be careful not to prompt for input in a block that has previous output you would like to keep. Output is cleared to prevent forms from interferring with one another and to ensure that inputs are not inadvertently saved to the notebook. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.popup 'Confirm' do \n",
    "  text 'Are you sure you want to continue?'\n",
    "  cancel 'No'\n",
    "  button 'Yes'\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Custom keys\n",
    "\n",
    "Every widget has an entry in the final results hash. A custom key can be passed as the first parameter to the hash. If no key is provided, the widget name is used as the key. The `cancel` widget has no key; it's first parameter is its label. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do\n",
    "  input :username\n",
    "  password :password\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Custom labels\n",
    "\n",
    "Field labels appear to the left of the field. Button labels appear as the text on the button. `cancel` labels are passed as the first argument. All other widgets' labels are set using the `label` parameter. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  input :name, label: 'Please enter your name'\n",
    "  cancel 'None of your business!'\n",
    "  button :submit, label: 'All done'\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Defaults\n",
    "\n",
    "Most inputs will accept a `default` parameter. If no default is given, the deault is `nil`. Since checkboxes can have multiple values selected, you can pass an array of values. To check everything, pass `true` as the default. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  checkbox :one, 'Fish', 'Cat', 'Dog', default: 'Fish'\n",
    "  checkbox :many, 'Fish', 'Cat', 'Dog', default: ['Cat', 'Dog']\n",
    "  checkbox :all, 'Fish', 'Cat', 'Dog', default: true\n",
    "  button :submit, label: 'All done'\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Dates\n",
    "\n",
    "The `date` widget provides a calendar popup and returns a `Time` object. It's default should also be a `Time` object. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  date :birthday\n",
    "  date :today, default: Time.now\n",
    "  button\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Buttons\n",
    "\n",
    "Buttons do not appear in the final hash unless they are clicked. If clicked, their value is `true`. Here are the various colors a button can be:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  IRuby::Input::Button::COLORS.each_key do |color|\n",
    "    button color, color: color\n",
    "  end\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Textareas\n",
    "\n",
    "Textareas are multiline inputs that are convenient for larger inputs. If you need a line return when typing in a textarea, use shift+enter since enter will submit the form."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  text 'Enter email addresses, one per line (use shift+enter for newlines)'\n",
    "  textarea :emails\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Text and HTML\n",
    "\n",
    "You can insert lines of text or custom html using their respective helpers:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  html { h1 'Choose a Stooge' }\n",
    "  text 'Choose your favorite stooge'\n",
    "  select :stooge, 'Moe', 'Larry', 'Curly'\n",
    "  button\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Dropdowns\n",
    "\n",
    "A `select` is a dropdown of options. Use a `multiple` to allow multiple selections. `multiple` widgets accept an additional `size` parameters that determines the number of rows. The default is 4. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  select :stooge, 'Moe', 'Larry', 'Curly'\n",
    "  select :stooge, 'Moe', 'Larry', 'Curly', default: 'Moe'\n",
    "  multiple :stooges, 'Moe', 'Larry', 'Curly', default: true, size: 3\n",
    "  multiple :stooges, 'Moe', 'Larry', 'Curly', default: ['Moe','Curly']\n",
    "  button\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Radio selects and checkboxes\n",
    "\n",
    "Like selects, radio selects and checkboxes take multiple arguments, each one an option. If the first argument is a symbol, it is used as the key. \n",
    "\n",
    "Note that the `checkbox` widget will always return `nil` or an array. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  radio :children, *(0..12), label: 'How many children do you have?'\n",
    "  checkbox :gender, 'Male', 'Female', 'Intersex', label: 'Select the genders of your children'\n",
    "  button\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Files\n",
    "\n",
    "Since file widgets capture the enter key, you should include a button when creating forms that contain only a file input:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "IRuby.form do \n",
    "  file :avatar, label: 'Choose an Avatar'\n",
    "  button :submit\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "File widgets return a hash with three keys: \n",
    "\n",
    "* `data`: The contents of the file as a string\n",
    "* `content_type`: The type of file, such as `text/plain` or `image/jpeg`\n",
    "* `name`: The name of the uploaded file"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Example\n",
    "\n",
    "Here is an example form that uses every built-in widget. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "result = IRuby.form do \n",
    "  html { h1 'The Everything Form' }\n",
    "  text 'Marvel at the strange and varied inputs!'\n",
    "  date\n",
    "  file\n",
    "  input :username\n",
    "  password\n",
    "  textarea\n",
    "  radio *(1..10)\n",
    "  checkbox 'Fish', 'Cat', 'Dog', label: 'Animals'\n",
    "  select :color, *IRuby::Input::Button::COLORS.keys\n",
    "  cancel                     \n",
    "  button    \n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Writing your own widget\n",
    "\n",
    "Most form methods are `IRuby::Input::Widget` instances. A `Widget` is an [`Erector::Widget`](https://github.com/erector/erector) with some additional helpers. Here is the `cancel` widget:\n",
    "\n",
    "```ruby\n",
    "module IRuby\n",
    "  module Input\n",
    "    class Cancel < Widget\n",
    "      needs :label\n",
    "\n",
    "      builder :cancel do |label='Cancel'|\n",
    "        add_button Cancel.new(label: label)\n",
    "      end\n",
    "\n",
    "      def widget_css\n",
    "        \".iruby-cancel { margin-left: 5px; }\"\n",
    "      end\n",
    "\n",
    "      def widget_js\n",
    "        <<-JS\n",
    "          $('.iruby-cancel').click(function(){\n",
    "            $('#iruby-form').remove();\n",
    "          });\n",
    "        JS\n",
    "      end\n",
    "\n",
    "      def widget_html\n",
    "        button(\n",
    "          @label,\n",
    "          type: 'button', \n",
    "          :'data-dismiss' => 'modal',\n",
    "          class: \"btn btn-danger pull-right iruby-cancel\"\n",
    "        )\n",
    "      end\n",
    "    end\n",
    "  end\n",
    "end\n",
    "```\n",
    "\n",
    "The following methods are available for widgets to use or override: \n",
    "\n",
    "| method | description |\n",
    "| -------- | -------- |\n",
    "| `widget_js`   | Returns the widget's Javascript |\n",
    "| `widget_css`   | Returns the widget's CSS |\n",
    "| `widget_html`   | Returns the widget's   |\n",
    "| `builder(method,&block)`   | Class method to add form building helpers. |\n",
    "\n",
    "The following methods are available in the `builder` block:\n",
    "\n",
    "| method | description |\n",
    "| -------- | -------- |\n",
    "| `add_field(field)` | Adds a widget to the form's field area |\n",
    "| `add_button(button)` | Adds a button to the form's button area |\n",
    "| `process(key,&block)`   | Register a custom processing block for the given key in the results hash |\n",
    "| `unique_key(key)` | Returns a unique key for the given key. Use this to make sure that there are no key collisions in the final results hash. |\n",
    "\n",
    "A canceled form always returns `nil`. Otherwise, the form collects any element with a `data-iruby-key` and non-falsey `data-iruby-value` and passes those to the processor proc registered for the key. See the `File` widget for a more involved example of processing results."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Ruby 2.2.1",
   "language": "ruby",
   "name": "ruby"
  },
  "language_info": {
   "file_extension": ".rb",
   "mimetype": "application/x-ruby",
   "name": "ruby",
   "version": "2.2.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
