Cleaning up edit_web.rhtml; extracted all the JavaScript to a static file

app/views/wiki/edit_web.rhtml

@@ -3,73 +3,91 @@
 <form action="../update_web" id="setup" method="post" onSubmit="cleanAddress(); return validateSetup()">
   <h2 style="margin-bottom: 3px">Name and address</h2>
   <div class="help">
-    The name of the web is included in the title on all pages. The address is the base path that all pages within the web live beneath. 
+    The name of the web is included in the title on all pages. 
+    The address is the base path that all pages within the web live beneath. 
     Ex: the address "rails" gives URLs like <i>/rails/show/HomePage</i>.
   </div>
 
   <div class="inputBox, disableAutoComplete">
-    Name: <input type="text" id="name" name="name" value="<%= @web.name %>" onChange="proposeAddress();" /> &nbsp;&nbsp;
+    Name: <input type="text" id="name" name="name" value="<%= @web.name %>" 
-    Address: <input type="text" id="address" name="address" value="<%= @web.address %>" onChange="cleanAddress();" />
+                 onChange="proposeAddress();" /> &nbsp;&nbsp;
+    Address: <input type="text" id="address" name="address" value="<%= @web.address %>" 
+                    onChange="cleanAddress();" />
     <i>(Letters and digits only)</i>
   </div>
 
   <h2 style="margin-bottom: 3px">Specialize</h2>
   <div class="help">
     Turning safe mode on will strip HTML tags and stylesheet options from the content of all pages.
-    Turning on "brackets only" will require all wiki words to be as [[wiki word]] and WikiWord won't work.
+    Turning on "brackets only" will require all wiki words to be as [[wiki word]] and WikiWord 
-    Additions to the stylesheet take precedence over the existing styles. <i>Hint:</i> View source on a page you want to 
+    won't work.
-    style to find ID names on individual tags. <a href="#" onClick="document.getElementById('additionalStyle').style.display='block';return false;">See styles >></a>
+    Additions to the stylesheet take precedence over the existing styles. 
+    <i>Hint:</i> View source on a page you want to style to find ID names on individual tags. 
+    <a href="#" onClick="document.getElementById('additionalStyle').style.display='block';return false;">
+    See styles &gt;&gt;
+    </a>
   </div>
   <div class="inputBox, disableAutoComplete">
     Markup:
     <select name="markup">
-      <%= html_options({ "Textile" => :textile, "Markdown" => :markdown, "RDoc" => :rdoc }, @web.markup) %>
+      <%= html_options({"Textile" => :textile, "Markdown" => :markdown, "RDoc" => :rdoc }, 
+              @web.markup) %>
     </select>
 
     &nbsp;&nbsp;
 
     Color:
     <select name="color">
-      <%= html_options({ "Green" => "008B26", "Purple" => "504685", "Red" => "DA0006", "Orange" => "FA6F00", "Grey" => "8BA2B0" }, @web.color) %>
+      <%= html_options({ "Green" => "008B26", "Purple" => "504685", "Red" => "DA0006", 
+                         "Orange" => "FA6F00", "Grey" => "8BA2B0" }, @web.color) %>
     </select>
     
     &nbsp;&nbsp;
     
     <small>
-      <input type="checkbox" name="safe_mode"<%= " CHECKED" if @web.safe_mode %>> Safe mode
+      <input type="checkbox" name="safe_mode"<%= " CHECKED" if @web.safe_mode %> /> Safe mode
       &nbsp;&nbsp;
-      <input type="checkbox" name="brackets_only"<%= " CHECKED" if @web.brackets_only %>> Brackets only
+      <input type="checkbox" name="brackets_only"<%= " CHECKED" if @web.brackets_only %> /> 
+      Brackets only 
       &nbsp;&nbsp;
-      <input type="checkbox" name="count_pages"<%= " CHECKED" if @web.count_pages %>> Count pages
+      <input type="checkbox" name="count_pages"<%= " CHECKED" if @web.count_pages %> /> Count pages
     </small>
 
-    <textarea id="additionalStyle" style="display: none; margin-top: 10px; margin-bottom: 5px; width: 560px; height: 200px" name="additional_style"><%= @web.additional_style %></textarea>
+    <textarea id="additionalStyle" 
+      style="display: none; margin-top: 10px; margin-bottom: 5px; width: 560px; height: 200px" 
+      name="additional_style"><%= @web.additional_style %>
+    </textarea>
   </div>
 
   <h2 style="margin-bottom: 3px">Password protection for this web (<%= @web.name %>)</h2>
   <div class="help">
-    This is the password that visitors need to view and edit this web. Setting the password to nothing will remove the password protection.
+    This is the password that visitors need to view and edit this web. 
+    Setting the password to nothing will remove the password protection.
   </div>
   <div class="inputBox">
-    Password: <input class="disableAutoComplete" type="password" id="password" name="password" value="<%= @web.password %>"> &nbsp;&nbsp;
+    Password: <input class="disableAutoComplete" type="password" id="password" 
-    Verify: <input class="disableAutoComplete" type="password" id="password_check" value="<%= @web.password %>" name="password_check">
+                     name="password" value="<%= @web.password %>" /> 
+    &nbsp;&nbsp;
+    Verify: <input class="disableAutoComplete" type="password" id="password_check" 
+                          value="<%= @web.password %>" name="password_check" />
   </div>
 
   <h2 style="margin-bottom: 3px">Publish read-only version of this web (<%= @web.name %>)</h2>
   <div class="help">
-    You can turn on a read-only version of this web that's accessible even when the regular web is password protected.
+    You can turn on a read-only version of this web that's accessible even when the regular web 
+    is password protected.
     The published version is accessible through URLs like /wiki/published/HomePage.
   </div>
   <div class="inputBox">
-    <input type="checkbox" name="published"<%= " CHECKED" if @web.published %>> Publish this web
+    <input type="checkbox" name="published"<%= " CHECKED" if @web.published %> /> Publish this web
   </div>
 
 <p align="right">
   <small>
     Enter system password
-    <input type="password" class="disableAutoComplete" id="system_password" name="system_password">
+    <input type="password" class="disableAutoComplete" id="system_password" name="system_password" />
     and
-    <input type="submit" value="Update Web">
+    <input type="submit" value="Update Web" />
     <br/><br/>
     ...or forget changes and <a href="/new_web/">create a new web</a>
   </small>
@@ -81,62 +99,15 @@
 <h1>Other administrative tasks</h1>
 
 <form action="../remove_orphaned_pages" id="remove_orphaned_pages" method="post">
-
+  <p align="right">
-<p align="right">
     <small>
       Clean up by entering system password
-    <input type="password" id="system_password" name="system_password">
+      <input type="password" id="system_password" name="system_password" />
       and
-    <input type="submit" value="Delete Orphan Pages">
+      <input type="submit" value="Delete Orphan Pages" />
     </small>
-</p>
+  </p>
+</form>
 
-<script>
+<script type="text/javascript" src="/javascripts/edit_web.js" />
-function proposeAddress() {
+<script type="text/javascript">overrideAutocomplete()</script>
-  document.getElementById('address').value =
-    document.getElementById('name').value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
-}
-
-function cleanAddress() {
-  document.getElementById('address').value =
-    document.getElementById('address').value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
-}
-
-function validateSetup() {
-  if (document.getElementById('system_password').value == "") {
-    alert("You must enter the system password");
-    return false;
-  }
-
-  if (document.getElementById('name').value == "") {
-    alert("You must pick a name for the web");
-    return false;
-  }
-
-  if (document.getElementById('address').value == "") {
-    alert("You must pick an address for the web");
-    return false;
-  }
-
-  if (document.getElementById('password').value != "" &&
-      document.getElementById('password').value != document.getElementById('password_check').value) {
-    alert("The password and its verification doesn't match");
-    return false;
-  }
-
-  return true;
-}
-
-// overriding auto-complete by form managers
-// code by Chris Holland, lifted from 
-// http://chrisholland.blogspot.com/2004/11/banks-protect-privacy-disable.html
-if (document.getElementsByTagName) {
-  var inputElements = document.getElementsByTagName("input");
-  for (i=0; inputElements[i]; i++) {
-    if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
-      inputElements[i].setAttribute("autocomplete","off");
-    }//if current input element has the disableAutoComplete class set.
-  }//loop thru input elements
-}
-
-</script>

public/javascripts/edit_web.js

@@ -0,0 +1,48 @@
+function proposeAddress() {
+  document.getElementById('address').value =
+    document.getElementById('name').value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+}
+
+function cleanAddress() {
+  document.getElementById('address').value =
+    document.getElementById('address').value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+}
+
+function validateSetup() {
+  if (document.getElementById('system_password').value == "") {
+    alert("You must enter the system password");
+    return false;
+  }
+
+  if (document.getElementById('name').value == "") {
+    alert("You must pick a name for the web");
+    return false;
+  }
+
+  if (document.getElementById('address').value == "") {
+    alert("You must pick an address for the web");
+    return false;
+  }
+
+  if (document.getElementById('password').value != "" &&
+      document.getElementById('password').value != document.getElementById('password_check').value) {
+    alert("The password and its verification doesn't match");
+    return false;
+  }
+
+  return true;
+}
+
+// overriding auto-complete by form managers
+// code by Chris Holland, lifted from 
+// http://chrisholland.blogspot.com/2004/11/banks-protect-privacy-disable.html
+function overrideAutocomplete() {
+  if (document.getElementsByTagName) {
+    var inputElements = document.getElementsByTagName("input");
+    for (i=0; inputElements[i]; i++) {
+      if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
+        inputElements[i].setAttribute("autocomplete","off");
+      }//if current input element has the disableAutoComplete class set.
+    }//loop thru input elements
+  }
+}