From acf252f7f3c0af95b3e90f07d0e4d878e4d0d776 Mon Sep 17 00:00:00 2001
From: Dan McGee <dan@archlinux.org>
Date: Wed, 5 Sep 2012 09:29:38 -0500
Subject: Add some HTML5-ization in JS of various input attributes

On the login page, give focus to the username box when the page loads as
well as turning autocorrection and auto-capitalization off on the
username box.

For the developer profile page, we can add some minor validation and
typing of certain form fields that allow things like iPhone and Android
to customize the presented keyboard to the user, as well as allowing
browsers to do some client-side validation.

Signed-off-by: Dan McGee <dan@archlinux.org>
---
 sitestatic/archweb.js             | 10 ++++++++++
 templates/devel/profile.html      | 14 ++++++++++++++
 templates/registration/login.html | 11 +++++++++++
 3 files changed, 35 insertions(+)

diff --git a/sitestatic/archweb.js b/sitestatic/archweb.js
index 1ddf4ebf..c274a675 100644
--- a/sitestatic/archweb.js
+++ b/sitestatic/archweb.js
@@ -425,3 +425,13 @@ function format_filesize(size, decimals) {
 
     return size.toFixed(decimals) + ' ' + labels[label];
 }
+
+/* HTML5 input type and attribute enhancements */
+function modify_attributes(to_change) {
+    /* jQuery doesn't let us change the 'type' attribute directly due to IE
+       woes, so instead we can clone and replace, setting the type. */
+    $.each(to_change, function(id, attrs) {
+        var obj = $(id);
+        obj.replaceWith(obj.clone().attr(attrs));
+    });
+}
diff --git a/templates/devel/profile.html b/templates/devel/profile.html
index b6580ab8..9806552a 100644
--- a/templates/devel/profile.html
+++ b/templates/devel/profile.html
@@ -1,4 +1,6 @@
 {% extends "base.html" %}
+{% load static from staticfiles %}
+
 {% block title %}Arch Linux - Edit Profile{% endblock %}
 
 {% block content %}
@@ -22,4 +24,16 @@ <h2>Developer Profile</h2>
     </form>
 
 </div>
+
+{% load cdn %}{% jquery %}
+<script type="text/javascript" src="{% static "archweb.js" %}"></script>
+<script type="text/javascript">
+    modify_attributes({
+        '#id_email': {type: 'email'},
+        '#id_alias': {autocorrect: 'off', autocapitalize: 'off'},
+        '#id_public_email': {autocorrect: 'off', autocapitalize: 'off'},
+        '#id_website': {type: 'url'},
+        '#id_yob': {pattern: '[0-9]*'}
+    });
+</script>
 {% endblock %}
diff --git a/templates/registration/login.html b/templates/registration/login.html
index ad1ac1ea..edbb77ea 100644
--- a/templates/registration/login.html
+++ b/templates/registration/login.html
@@ -1,4 +1,6 @@
 {% extends "base.html" %}
+{% load static from staticfiles %}
+
 {% block title %}Arch Linux - Developer Login{% endblock %}
 
 {% block content %}
@@ -19,4 +21,13 @@ <h2>Developer Login</h2>
     </form>
 
 </div>
+
+{% load cdn %}{% jquery %}
+<script type="text/javascript" src="{% static "archweb.js" %}"></script>
+<script type="text/javascript">
+    modify_attributes({
+        '#id_username': {autocorrect: 'off', autocapitalize: 'off'}
+    });
+    $('#id_username').focus();
+</script>
 {% endblock %}
-- 
cgit v1.2.3-54-g00ecf