From 14ced4d36194ea0723e6ec13e29d5678f32dbaf3 Mon Sep 17 00:00:00 2001 From: jeffatstepup Date: Thu, 1 Dec 2011 09:27:34 +0000 Subject: [PATCH 1/2] Added tel,number,email,url HTML5 Input tag types. --- src/dform.subscribers.js | 1604 ++++++++++++++++++++------------------ 1 file changed, 844 insertions(+), 760 deletions(-) diff --git a/src/dform.subscribers.js b/src/dform.subscribers.js index f097f75..fdbacb4 100644 --- a/src/dform.subscribers.js +++ b/src/dform.subscribers.js @@ -28,11 +28,11 @@ * Example: * (start code) * $("#myform").buildForm({ - * "name" : "textfield", - * "type" : "text", - * "id" : "testid", - * "value" : "Testvalue", - * "caption" : "Label for textfield" + * "name" : "textfield", + * "type" : "text", + * "id" : "testid", + * "value" : "Testvalue", + * "caption" : "Label for textfield" * }); * (end) * @@ -58,763 +58,847 @@ */ (function($) { - function _element(tag, excludes) - { - // Currying :) - return function(ops) { - return $(tag).dformAttr(ops, excludes); - }; - } - - $.dform.addType( - { - /** - * type: Default types and attributes - * - * Default types are handled by the function. - * Its standard behaviour allows you to create any - * HTML tag with standard attributes (attributes are - * any key value pair in the given options, where the - * key is not any of the ). - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An input element with type text - * - * Example: - * Uses the and subscribers to create - * a div with an h2 heading inside. - * - * (start code) - * { - * "type" : "div", - * "id" : "my-div", - * "class" : "ui-widget-content ui-corner-all", - * "style" : "padding: 10px", - * "elements" : - * [ - * { - * "type" : "h2", - * "html" : "A H2 heading in a div with corners" - * } - * ] - * } - * (end) - */ - /** - * type: container - * - * Returns an empty container (div) for general use - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An empty div - * - * Example: - * Uses the style property although you should separate your CSS - * - * (start code) - * { - * "type" : "container", - * "html" : "Text in div" - * } - * (end) - */ - container : _element("
"), - /** - * type: form - * - * Type function that creates a form. If no type is given - * for the root element, a form will be created automatically. - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A form element - * - * Example: - * (start code) - * { - * "type" : "form", - * "action" : "index.php" - * } - * (end) - */ - form : _element('
'), - /** - * type: text - * - * Type function that creates a text input field - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An input element with type text - * - * Example: - * Uses the subscriber to set the textfield value - * - * (start code) - * { - * "name" : "textfield", - * "type" : "text", - * "id" : "my-textfield", - * "value" : "Hello world" - * } - * (end) - */ - text : _element(''), - /** - * type: password - * - * Type function that creates a password input field - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An input element with type password - * - * Example: - * (start code) - * { - * "name" : "password", - * "type" : "password" - * } - * (end) - */ - password : _element(''), - /** - * type: select - * - * Creates a select input element - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An empty select input - * - * Note: - * This type will be handled by the function. - * - * Example: - * Uses the subscriber to add options to the select field - * - * (start code) - * { - * "type" : "select", - * "name" : "testselect", - * "options" : - * { - * "red" : "Color red", - * "blue" : "Color blue" - * } - * } - * (end) - */ - /** - * type: fieldset - * - * Creates an empty fieldset to contain other elements - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An empty fieldset - * - * Note: - * This type will be handled by the function. - * - * Example: - * Uses the subscriber to add a legend and the - * subscriber to add a element in the fieldset. - * - * - * (start code) - * { - * "type" : "fieldset", - * "id" : "my-fieldset", - * "caption" : - * { - * "id" : "fieldset-caption", - * "html" : "Fieldset with elements" - * }, - * "elements" : - * [ - * { - * "type" : "span", - * "html" : "Some text in here" - * } - * ] - * } - * (end) - */ + function _element(tag, excludes) + { + // Currying :) + return function(ops) { + return $(tag).dformAttr(ops, excludes); + }; + } + + $.dform.addType( + { + /** + * type: Default types and attributes + * + * Default types are handled by the function. + * Its standard behaviour allows you to create any + * HTML tag with standard attributes (attributes are + * any key value pair in the given options, where the + * key is not any of the ). + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An input element with type text + * + * Example: + * Uses the and subscribers to create + * a div with an h2 heading inside. + * + * (start code) + * { + * "type" : "div", + * "id" : "my-div", + * "class" : "ui-widget-content ui-corner-all", + * "style" : "padding: 10px", + * "elements" : + * [ + * { + * "type" : "h2", + * "html" : "A H2 heading in a div with corners" + * } + * ] + * } + * (end) + */ + /** + * type: container + * + * Returns an empty container (div) for general use + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An empty div + * + * Example: + * Uses the style property although you should separate your CSS + * + * (start code) + * { + * "type" : "container", + * "html" : "Text in div" + * } + * (end) + */ + container : _element("
"), + /** + * type: form + * + * Type function that creates a form. If no type is given + * for the root element, a form will be created automatically. + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A form element + * + * Example: + * (start code) + * { + * "type" : "form", + * "action" : "index.php" + * } + * (end) + */ + form : _element(''), + /** + * type: text + * + * Type function that creates a text input field + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An input element with type text + * + * Example: + * Uses the subscriber to set the textfield value + * + * (start code) + * { + * "name" : "textfield", + * "type" : "text", + * "id" : "my-textfield", + * "value" : "Hello world" + * } + * (end) + */ + text : _element(''), + /** + * type: password + * + * Type function that creates a password input field + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An input element with type password + * + * Example: + * (start code) + * { + * "name" : "password", + * "type" : "password" + * } + * (end) + */ + password : _element(''), + /** + * type: select + * + * Creates a select input element + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An empty select input + * + * Note: + * This type will be handled by the function. + * + * Example: + * Uses the subscriber to add options to the select field + * + * (start code) + * { + * "type" : "select", + * "name" : "testselect", + * "options" : + * { + * "red" : "Color red", + * "blue" : "Color blue" + * } + * } + * (end) + */ + /** + * type: fieldset + * + * Creates an empty fieldset to contain other elements + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An empty fieldset + * + * Note: + * This type will be handled by the function. + * + * Example: + * Uses the subscriber to add a legend and the + * subscriber to add a element in the fieldset. + * + * + * (start code) + * { + * "type" : "fieldset", + * "id" : "my-fieldset", + * "caption" : + * { + * "id" : "fieldset-caption", + * "html" : "Fieldset with elements" + * }, + * "elements" : + * [ + * { + * "type" : "span", + * "html" : "Some text in here" + * } + * ] + * } + * (end) + */ - /** - * type: textarea - * - * Creates a textarea - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A textarea input element - * - * Note: - * This type will be handled by the function. - * - * Example: - * (start code) - * { - * "type" : "textarea", - * "cols" : 30, - * "rows" : 10 - * } - * (end) - */ + /** + * type: textarea + * + * Creates a textarea + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A textarea input element + * + * Note: + * This type will be handled by the function. + * + * Example: + * (start code) + * { + * "type" : "textarea", + * "cols" : 30, + * "rows" : 10 + * } + * (end) + */ - /** - * type: submit - * - * Creates a form submit button - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A form submit button - * - * Example: - * (start code) - * { - * "type" : "submit", - * "value" : "Send..." - * } - * (end) - */ - submit : _element(''), - /** - * type: reset - * - * Creates a form reset button - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A form reset button - * - * Example: - * (start code) - * { - * "action" : "#", - * "elements" : - * [ - * { - * "type" : "text", - * "name" : "textfield" - * }, - * { - * "type" : "reset", - * "value" : "Reset" - * } - * ] - * } - * (end) - */ - reset : _element(''), - /** - * type: label - * - * Creates an empty label element - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An empty label element - * - * Example: - * Uses the element subscriber to add text to the label - * - * Note: - * This type will be handled by the function. - * - * (start code) - * { - * "type" : "label", - * "html" : "Label content" - * } - * (end) - */ + /** + * type: submit + * + * Creates a form submit button + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A form submit button + * + * Example: + * (start code) + * { + * "type" : "submit", + * "value" : "Send..." + * } + * (end) + */ + submit : _element(''), + /** + * type: reset + * + * Creates a form reset button + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A form reset button + * + * Example: + * (start code) + * { + * "action" : "#", + * "elements" : + * [ + * { + * "type" : "text", + * "name" : "textfield" + * }, + * { + * "type" : "reset", + * "value" : "Reset" + * } + * ] + * } + * (end) + */ + reset : _element(''), + /** + * type: label + * + * Creates an empty label element + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An empty label element + * + * Example: + * Uses the element subscriber to add text to the label + * + * Note: + * This type will be handled by the function. + * + * (start code) + * { + * "type" : "label", + * "html" : "Label content" + * } + * (end) + */ - /** - * type: button - * - * Creates a button element - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A button element - * - * Example: - * Uses the subscriber - * - * Note: - * This type will be handled by the function. - * - * (start code) - * { - * "type" : "button", - * "html" : "Send..." - * } - * (end) - */ - - /** - * type: hidden - * - * Creates a hidden input field - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A hidden input field element - * - * Example: - * This example uses the subscriber to set a value to the - * field. - * - * (start code) - * { - * "type" : "hidden", - * "value" : "hiddenvalue" - * } - * (end) - */ - hidden : _element(''), - /** - * type: radio - * - * Creates a single radio button - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A single radio input element - * - * Example: - * Uses the subscriber to add text to the radiobutton - * - * (start code) - * { - * "type" : "radio", - * "name" : "radioselection", - * "caption" : "Radiobutton" - * } - * (end) - */ - radio : _element(''), - /** - * type: checkbox - * - * Creates a single checkbox - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A single checkbox input element - * - * Example: - * Uses the subscriber to add text to the checkbox - * - * (start code) - * { - * "type" : "checkbox", - * "name" : "checkboxselection", - * "caption" : "Checkbox" - * } - * (end) - */ - checkbox : _element(''), - /** - * type: checkboxes - * - * Returns an empty container for a checkbox list - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An empty div to contain checkbox lists - * - * Example: - * Uses the subscriber to add a list of checkboxes - * - * (start code) - * { - * "type" : "checkboxes", - * "name" : "radioselection", - * "options" : - * { - * "red" : "Color red", - * "blue" : "Color blue" - * } - * } - * (end) - */ - checkboxes : _element("
", ["name"]), - /** - * type: radiobuttons - * - * Returns an empty container for a radiobutton list - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * An empty div to contain radiobutton lists - * - * Example: - * Uses the subscriber to add a list of radiobuttons - * - * (start code) - * { - * "type" : "radiobuttons", - * "name" : "radioselection", - * "options" : - * { - * "red" : "Color red", - * "blue" : "Color blue" - * } - * } - * (end) - */ - radiobuttons : _element("
", ["name"]), - /** - * type: file - * - * Returns a file upload input element - * - * Parameters: - * options - The options this element should be created with - * - * Returns: - * A file upload element - * - * Example: - * (start code) - * { - * "type" : "file", - * "name" : "upload" - * } - * (end) - */ - file : _element('') - }); + /** + * type: button + * + * Creates a button element + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A button element + * + * Example: + * Uses the subscriber + * + * Note: + * This type will be handled by the function. + * + * (start code) + * { + * "type" : "button", + * "html" : "Send..." + * } + * (end) + */ + + /** + * type: hidden + * + * Creates a hidden input field + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A hidden input field element + * + * Example: + * This example uses the subscriber to set a value to the + * field. + * + * (start code) + * { + * "type" : "hidden", + * "value" : "hiddenvalue" + * } + * (end) + */ + hidden : _element(''), + /** + * type: radio + * + * Creates a single radio button + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A single radio input element + * + * Example: + * Uses the subscriber to add text to the radiobutton + * + * (start code) + * { + * "type" : "radio", + * "name" : "radioselection", + * "caption" : "Radiobutton" + * } + * (end) + */ + radio : _element(''), + /** + * type: checkbox + * + * Creates a single checkbox + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A single checkbox input element + * + * Example: + * Uses the subscriber to add text to the checkbox + * + * (start code) + * { + * "type" : "checkbox", + * "name" : "checkboxselection", + * "caption" : "Checkbox" + * } + * (end) + */ + checkbox : _element(''), + /** + * type: checkboxes + * + * Returns an empty container for a checkbox list + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An empty div to contain checkbox lists + * + * Example: + * Uses the subscriber to add a list of checkboxes + * + * (start code) + * { + * "type" : "checkboxes", + * "name" : "radioselection", + * "options" : + * { + * "red" : "Color red", + * "blue" : "Color blue" + * } + * } + * (end) + */ + checkboxes : _element("
", ["name"]), + /** + * type: radiobuttons + * + * Returns an empty container for a radiobutton list + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An empty div to contain radiobutton lists + * + * Example: + * Uses the subscriber to add a list of radiobuttons + * + * (start code) + * { + * "type" : "radiobuttons", + * "name" : "radioselection", + * "options" : + * { + * "red" : "Color red", + * "blue" : "Color blue" + * } + * } + * (end) + */ + radiobuttons : _element("
", ["name"]), + /** + * type: file + * + * Returns a file upload input element + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * A file upload element + * + * Example: + * (start code) + * { + * "type" : "file", + * "name" : "upload" + * } + * (end) + */ + file : _element(''), + /** + * type: number + * + * Defines a field for entering a number (HTML5) + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An input element with type number + * + * Example: + * (start code) + * { + * "type" : "number", + * "name" : "quant", + * "caption" : "quantity", + * } + * (end) + */ + number : _element(''), + /** + * type: url + * + * Defines a field for entering a URL (HTML5) + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An input element with type url + * + * Example: + * (start code) + * { + * "type" : "url", + * "name" : "mywebsite", + * "caption" : "Website URL", + * } + * (end) + */ + url : _element(''), + /** + * type: tel + * + * Defines a field for entering a telephone number (HTML5) + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An input element with type tel + * + * Example: + * (start code) + * { + * "type" : "tel", + * "name" : "phone", + * "caption" : "Contact Phone Number", + * } + * (end) + */ + tel : _element(''), + /** + * type: email + * + * Defines a field for entering an e-mail address (HTML5) + * + * Parameters: + * options - The options this element should be created with + * + * Returns: + * An input element with type email + * + * Example: + * (start code) + * { + * "type" : "email", + * "name" : "contactemail", + * "caption" : "Contact e-mail", + * } + * (end) + */ + email : _element('') + }); - $.dform.subscribe( - { - /** - * subscriber: class - * - * Adds a class to the current element. - * - * Ovverrides the default behaviour which would be replacing the class attribute. - * - * Parameters: - * options - A list of whitespace separated classnames - * type - The type of the *this* element - * - * Example: - * (start code) - * { - * "type" : "text", - * "class" : "ui-corner-all ui-widget" - * } - * (end) - */ - "class" : function(options, type) - { - this.addClass(options); - }, - /** - * subscriber: html - * - * Sets html content of the current element - * - * Parameters: - * options - The html content to set as a string - * type - The type of the *this* element - * - * Example: - * (start code) - * { - * "type" : "span", - * "html" : "Some html content" - * } - * (end) - */ - html : function(options, type) - { - this.html(options); - }, - /** - * subscriber: elements - * - * Recursively appends subelements to the current form element. - * - * Parameters: - * options - Either an object with key value pairs - * where the key is the element name and the value the - * subelement options or an array of objects where each object - * is the options for a subelement - * type - The type of the *this* element - * - * Example: - * (start code) - * { - * "type" : "fieldset", - * "caption" : "Fieldset with elements", - * "elements" : - * [ - * { - * "name" : "textfield", - * "type" : "text", - * "id" : "my-textfield", - * "caption" : "My textfield" - * } - * ] - * } - * (end) - */ - elements : function(options, type) - { - var scoper = $(this); - $.each(options, function(index, nested) - { - var values = nested; - if (typeof (index) == "string") - values["name"] = name; - $(scoper).formElement(values); - }); - }, - /** - * subscriber: value - * - * Sets the value of the current element. - * - * Parameters: - * options - string The value to set - * type - string The type of the *this* element - * - * - * Example: - * (start code) - * { - * "name" : "textfield", - * "type" : "text", - * "value" : "Value in Textfield" - * } - * (end) - */ - value : function(options, type) - { - this.val(options); - }, - /** - * subscriber: options - * - * Adds options to select type elements or radio and checkbox list elements. - * - * Parameters: - * options - A key value pair where the key is the - * option value and the value the options text or the settings for the element. - * type - The type of the *this* element - * - * For types: - * , , + * + * Example: + * (start code) + * { + * "type" : "select", + * "name" : "testselect", + * "options" : + * { + * "option1" : "Option no. 1", + * "option2" : "Option no. 2" + * } + * } + * (end) + * + * Todo: + * Option groups + */ + options : function(options, type) + { + var scoper = $(this); + if (type == "select" || type == "optgroup") // Options for select elements + { + // TODO optgroup + $.each(options, function(value, content) + { + var option = { type : 'option' }; + if (typeof (content) == "string") { + option.value = value; + option.html = content; + } + if (typeof (content) == "object") { + option = $.extend(option, content); + } + $(scoper).formElement(option); + }); + } + else if(type == "checkboxes" || type == "radiobuttons") + { + // Options for checkbox and radiobutton lists + var scoper = this; + $.each(options, function(value, content) { + var boxoptions = ((type == "radiobuttons") ? { "type" : "radio" } : { "type" : "checkbox" }); + if(typeof(content) == "string") + boxoptions["caption"] = content; + else + $.extend(boxoptions, content); + boxoptions["value"] = value; + $(scoper).formElement(boxoptions); + }); + } + }, + /** + * subscriber: caption + * + * Adds caption to elements. + * + * Depending on the element type the following elements will + * be used: + * - A legend for
elements + * - A