diff --git a/contributed/jquery.jeditable.html5.js b/contributed/jquery.jeditable.html5.js new file mode 100644 index 0000000..747305c --- /dev/null +++ b/contributed/jquery.jeditable.html5.js @@ -0,0 +1,136 @@ +/* + * HTML5 and accessibility/WAI-ARIA support for Jeditable. + * + * Copyright (c) 2013 Nick Freear, The Open University. + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/mit-license.php + */ + +/*jslint browser: true, indent: 4 */ + +(function ($) { + + 'use strict'; + + // Keyboard accessibility/WAI-ARIA - allow users to navigate to an editable element using TAB/Shift+TAB. + $.fn.editableAriaShim = function () { + this.attr({ + role: 'button', + tabindex: 0 + //, title: 'Editable' -- See 'tooltip' below. + //, 'aria-label':'' + }); + return this; //<--jquery object - chaining. + }; + + // Keyboard accessibility - use mouse click OR press any key to enable editing. + $.fn.editable.defaults.event = 'click.editable keydown.editable'; + + // Accessibility - there should be a default value for the title/ tooltip. + $.fn.editable.defaults.tooltip = 'Click to edit'; //$.fn.editable.defaults.placeholder + + // Shim - $(sel).checkValidity() + if (! $.fn.checkValidity) { + $.fn.checkValidity = function () { + var inp = this[0]; + return inp && typeof inp.checkValidity==="function" ? inp.checkValidity() : null; + }; + } + + var _supportInType = function (type) { + var i = document.createElement('input'); + i.setAttribute('type', type); + return i.type !== 'text' ? type : 'text'; + }; + + // Type = text : With HTML5 attributes. + $.editable.addInputType('html5_text', { + element: function (settings, original) { + var input = $('').attr({ + // required: settings.required ? 'required' : '', -- See below. + // autofocus -- Not relevant for Jeditable. + // disabled -- Not relevant. + // readonly -- Not relevant. + //autocomplete: settings.autocomplete, -- Todo. + inputmode: settings.inputmode, + list: settings.list, + maxlength: settings.maxlength, + pattern: settings.pattern, + placeholder: settings.html5_placeholder, // Parameter name conflict - add 'html5_'. + title: settings.html5_error_text, + type: 'text' + }); + if (settings.required) { input.attr('required', ''); } // Is this relevant to Jeditable? Probably. + + $(this).append(input); + return input; + } + }); + +// Type = number. +$.editable.addInputType('number', { + element: function (settings, original) { + var input = $('').attr({ + maxlength: settings.maxlength, + //pattern: settings.pattern, -- Does not apply to 'number' (but may be useful if 'number' is not supported). + placeholder: settings.html5_placeholder, + min : settings.min, + max : settings.max, + step: settings.step, + title: settings.html5_error_text, + type: _supportInType('number') + }); + $(this).append(input); + return input; + } +}); + +// Type = range : Not usable. +/*$.editable.addInputType('range', { + element: function (settings, original) { + var input = $('').attr({ + maxlength: settings.maxlength, + pattern: settings.pattern, + placeholder: settings.html5_placeholder, + min : settings.min, + max : settings.max, + step: settings.step, + type: _supportInType('range') + }); + $(this).append(input); + return input; + } +});*/ + +// Type = email +$.editable.addInputType('email', { + element: function (settings, original) { + var input = $('').attr({ + // pattern -- Not useful. + maxlength: settings.maxlength, + placeholder: settings.html5_placeholder, + type: _supportInType('email') + }); + $(this).append(input); + return input; + } +}); + +// Type = url +$.editable.addInputType('url', { + element: function (settings, original) { + var input = $('').attr({ + maxlength: settings.maxlength, + pattern: settings.pattern, + placeholder: settings.html5_placeholder, + title: settings.html5_error_text, + type: _supportInType('url') + }); + $(this).append(input); + return input; + } +}); + + +})(jQuery); diff --git a/html5.html b/html5.html new file mode 100644 index 0000000..a2e973a --- /dev/null +++ b/html5.html @@ -0,0 +1,97 @@ + + +Jeditable HTML5 Input Types Demo + + + + + + + + + + + + + + +
+ +
+ +

You might also want to check default inputs demo.

+ +
+ +

HTML5

+ +

Some useful introductions to HTML5 forms: + Dive into HTML5: Forms and + HTML5: The input element + +

Number type

+

-2.06

+ +

Email type

+ + +

HTML5 text

+

user5

+ + +
+ + + + + + + + + \ No newline at end of file diff --git a/php/config.php b/php/config.php index 0c8ae2f..1b537b0 100644 --- a/php/config.php +++ b/php/config.php @@ -6,6 +6,7 @@ $dbh = new PDO('sqlite:/tmp/editable.sqlite'); } catch(PDOException $e) { print $e->getMessage(); + exit(-1); } /* Create table for storing example data. */ diff --git a/php/echo.php b/php/echo.php index efbc043..f3e867f 100644 --- a/php/echo.php +++ b/php/echo.php @@ -2,7 +2,7 @@ /* Does not save anything. Just echoes back for demonstration purposes. */ -$renderer = isset($_GET['renderer']) ? $_GET['renderer'] : $_POST['renderer']; +$renderer = isset($_GET['renderer']) ? $_GET['renderer'] : (isset($_POST['renderer']) ? $_POST['renderer'] : NULL); if ('textile' == $renderer) { require_once './Textile.php'; $t = new Textile(); diff --git a/tests/echo.php b/tests/echo.php index b5c64b0..7b338a5 100644 --- a/tests/echo.php +++ b/tests/echo.php @@ -2,7 +2,7 @@ /* $Id: echo.php 117 2007-03-02 16:16:08Z tuupola $ */ -$renderer = isset($_GET['renderer']) ? $_GET['renderer'] : $_POST['renderer']; +$renderer = isset($_GET['renderer']) ? $_GET['renderer'] : (isset($_POST['renderer']) ? $_POST['renderer'] : NULL); if ('textile' == $renderer) { require_once './Textile.php'; $t = new Textile(); diff --git a/tests/index.html b/tests/index.html index 4e2cba7..eed7b98 100644 --- a/tests/index.html +++ b/tests/index.html @@ -3,10 +3,13 @@ Jeditable Unit Tests - + + + + - +

Jeditable unit tests

+ +
    @@ -204,5 +280,10 @@

    Select B
    Here be dragons.
    Here be dragons.
    + +
    -2.06
    +
    Joe+TAG1@example
    +
    user5
    + diff --git a/tests/testsuite.css b/tests/testsuite.css index a10c107..4f3613c 100644 --- a/tests/testsuite.css +++ b/tests/testsuite.css @@ -6,7 +6,10 @@ h2 { padding: 10px; background-color: #eee; color: black; margin: 0; font-size: .pass { color: green; } .fail { color: red; } -p.result { margin-left: 1em; } +.editable :valid { border-color: green; } +:focus:invalid { border-color: red; } + +p.result, div[id] { margin-left: 1em; } #banner { height: 2em; border-bottom: 1px solid white; } h2.pass { background-color: green; }