Added bootstrap tabs JS and tabbified content on settings page using JS

Signed-off-by: Nathan Booth <nath.booth@gmail.com>

public/scripts/3rdparty/bootstrap-tabs.js

@@ -0,0 +1,80 @@
+/* ========================================================
+ * bootstrap-tabs.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#tabs
+ * ========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ======================================================== */
+
+
+!function( $ ){
+
+  "use strict"
+
+  function activate ( element, container ) {
+    container
+      .find('> .active')
+      .removeClass('active')
+      .find('> .dropdown-menu > .active')
+      .removeClass('active')
+
+    element.addClass('active')
+
+    if ( element.parent('.dropdown-menu') ) {
+      element.closest('li.dropdown').addClass('active')
+    }
+  }
+
+  function tab( e ) {
+    var $this = $(this)
+      , $ul = $this.closest('ul:not(.dropdown-menu)')
+      , href = $this.attr('href')
+      , previous
+      , $href
+
+    if ( /^#\w+/.test(href) ) {
+      e.preventDefault()
+
+      if ( $this.parent('li').hasClass('active') ) {
+        return
+      }
+
+      previous = $ul.find('.active a').last()[0]
+      $href = $(href)
+
+      activate($this.parent('li'), $ul)
+      activate($href, $href.parent())
+
+      $this.trigger({
+        type: 'change'
+      , relatedTarget: previous
+      })
+    }
+  }
+
+
+ /* TABS/PILLS PLUGIN DEFINITION
+  * ============================ */
+
+  $.fn.tabs = $.fn.pills = function ( selector ) {
+    return this.each(function () {
+      $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab)
+    })
+  }
+
+  $(document).ready(function () {
+    $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a')
+  })
+
+}( window.jQuery || window.ender );

public/scripts/main.js

@@ -8,6 +8,16 @@ var sb = {
     
     init: function() {
         $('.alert-data').alert();
+    	$('.tabs').tabs()
+    	$("a[rel=popover]")
+                .popover({
+                  offset: 10
+                })
+                .click(function(e) {
+                  e.preventDefault()
+                })
+
+  })
     },
     
     usercp: {
@@ -37,15 +47,3 @@ var sb = {
     }
         
 };
-
-$('document').ready(sb.init);
-
-            $(function () {
-              $("a[rel=popover]")
-                .popover({
-                  offset: 10
-                })
-                .click(function(e) {
-                  e.preventDefault()
-                })
-            })

source/webui/templates/admin.tpl

@@ -1,36 +1,42 @@
 <div class="page-header">
 <h1>Admin Control Panel</h1>
-<ul class="tabs">
+<ul class="tabs" data-tabs="tabs">
-  <li class="active"><a href="#">Admin</a></li>
+  <li class="active"><a href="#Admin">Admin</a></li>
-  <li><a href="#">Services</a></li>
+  <li><a href="#Services">Services</a></li>
-  <li><a href="#">User Management</a></li>
+  <li><a href="#UserManagement">User Management</a></li>
-  <li><a href="#">Settings</a></li>
+  <li><a href="#Settings">Settings</a></li>
 </ul>
 
 </div>
-<h1>Services</h1>
 
-<p>
+<div id="my-tab-content" class="tab-content">
-    Click on a Service to edit its properties, or access any of the sites defined under it.
+            <div class="tab-pane active" id="Admin">
-</p>
+              <p>TODO</p>
+            </div>
             
-{if $services}
+            <div class="tab-pane" id="Services">
+              <h1>Services</h1>
+				<p>Click on a Service to edit its properties, or access any of the sites defined under it.</p>
+
+				{if $services}
     				<dl>
        				 {foreach from=$services item=service}
             			<dt><a href="{$base_uri}admin/service/id/{$service->id}/" title="Edit site {$service->name|escape:html}">{$service->name|escape:html}</a></dt>
            			 <dd>{$service->description|escape:html}</dd>
        				 {/foreach}
     				</dl>
-{else}
+					{else}
    					 You haven't created any services yet. Create some with the button below.
-{/if}
+					{/if}
 
-<form id="admin_addservice" method="post" action="{$base_uri}admin/add-service/">
+				<form id="admin_addservice" method="post" action="{$base_uri}admin/add-service/">
     		<input type="button" class="btn success" name="addservice" value="Add Service" />
-</form>
+			</form>
 
 
-<h1>Users and Permissions</h1>
+            </div>
+            <div class="tab-pane" id="UserManagement">
+              <h1>Users and Permissions</h1>
 
 <p>
     Click on a User to edit its properties.
@@ -46,16 +52,17 @@
     <input type="button" class="btn success" name="adduser" value="Add User" />
 </form>
 
-<h1>Settings<h1>
+            </div>
+            <div class="tab-pane" id="Settings">
+              <h1>Settings<h1>
 
 <p>
     Quick access to important settings. Please use the <a href="{$base_uri}admin/settings/" title="Full settings">full settings</a>
     page to configure more advanced settings.
 </p>
 
-<div class="container">
+
-    <div class="row">
+
-        <div class="span16">
             <form id="admin_quicksettings" method="post" action="{$base_uri}admin/settings/do/">
                 <fieldset>
                     <legend>Quick Settings</legend>
@@ -88,6 +95,10 @@
                     </div>
                 </fieldset>
             </form>
-        </div><!-- /span16 -->   
+            </div>
-    </div><!-- /row -->
+           </div>
-</div><!-- /container -->
+          
+          
+        
+
+

source/webui/templates/index.tpl

@@ -22,6 +22,7 @@
         <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-twipsy.js"></script>
         <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-popover.js"></script>
         <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-dropdown.js"></script>
+        <script type="text/javascript" src="{$base_uri}scripts/3rdparty/bootstrap-tabs.js"></script>
     </head>
     <body>