Moved JS into its own file.
Dan Brook [Sat, 24 Apr 2010 20:13:19 +0000 (21:13 +0100)]
* Fixed links in _refs.tt2.
* All bits of JS related data live in hidden SPANs now.
* Pulling in jQuery on every page now via the Google CDN.
* The branch list drop down now switches based on the current action.

root/_refs.tt2
root/fragment/ref/history.tt2
root/fragment/ref/tree.tt2
root/fragment/repository/shortlog.tt2
root/repository/search.tt2
root/static/css/core.css
root/static/js/common.js [deleted file]
root/static/js/site.js [new file with mode: 0755]
root/wrapper.tt2

index ec6db82..76625af 100644 (file)
@@ -1,7 +1,7 @@
 <span class='refs'>
  [% FOREACH ref IN refs.${object.sha1} %]
  <span class='[% ref.search('^remotes/') ? 'remote' : 'head' %]'>
-  <a href='[% c.uri_for_action("/repository/shortlog", [Repository, object.sha1]) %]'>[% ref.replace('^(remote|head)s/', '') %]</a>
+  <a href='[% c.uri_for_action("/ref/shortlog", [Repository.name, object.sha1]) %]'>[% ref.replace('^(remote|head)s/', '') %]</a>
  </span>
  [% END %]
 </span>
index 0e5ee10..e20dda7 100755 (executable)
@@ -1,8 +1,7 @@
 [% BLOCK history_table_headfoot %]
 [% SET cell = type == 'head' ? 'th' : 'td' %]
-[%# FIXME: should  c.req.arguments.0 be path instead? %]
 <tr>
-<[% cell %] colspan="2"><a href="#" onclick="compareDiffs('[% Repository.name %]','[% c.req.arguments.0 %]');return false;">Compare</a></[% cell %]>
+<[% cell %] colspan="2"><a href="" class='compare-link'>Compare</a></[% cell %]>
  <[% cell %]>sha1</[% cell %]>
  <[% cell %]>time</[% cell %]>
  <[% cell %]>message</[% cell %]>
  <[% cell %]>actions</[% cell %]>
 </tr>
 [% END %]
-<form name="theform">
+<form id="compare-form">
  <table class='listing'>
    <thead>[% PROCESS history_table_headfoot type = 'head' %]</thead
 
    <tbody>
    [% FOREACH line IN log_lines %]
  <tr [% "class='invert'" IF loop.count % 2 %]>
-       <td><input type="radio" name="sha1_a" value="[% line.sha1 %]" [% "checked" IF loop.count == 2 %] /></td>
-       <td><input type="radio" name="sha1_b" value="[% line.sha1 %]" [% "checked" IF loop.count == 1 %]/></td>
+       <td><input type="radio" name="sha1_a" value="[% line.sha1 %]"[% " checked" IF loop.count == 2 %] /></td>
+       <td><input type="radio" name="sha1_b" value="[% line.sha1 %]"[% " checked" IF loop.count == 1 %]/></td>
      <td class='sha1' title='[% line.sha1 %]'>[% INCLUDE 'inc/chroma_hash.tt2' sha1 = line.sha1.substr(0, 7) %]</td>
      <td class='time-since' title='[% line.authored_time %]'>[% time_since(line.authored_time) %]</td>
     
     </tr>
    [% END %]
   <tr>
-       <td colspan="2"><a href="#" onclick="compareDiffs('[% Repository.name %]');return false;">Compare</a></td>
+       <td colspan="2"><a href="" class='compare-link'>Compare</a></td>
        <td colspan="5"></td>
 </tr>
    </tbody>
   </table>
 </form>
-[%
-  INCLUDE 'inc/log_pager.tt2';
-%]
+
+<span id='compare-path' class='js-data'>[% filename %]</span>
+<span id="diff-uri" class='js-data'>[% c.uri_for_action('/ref/diff_fancy', [Repository.name, 'HEAD']) %]</span> 
+
+[% INCLUDE 'inc/log_pager.tt2' %]
index 4e0965e..0ec6c16 100755 (executable)
@@ -1,18 +1,3 @@
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-<script>
-// Wait for image requests to come back first - $(function() {
-$(window).load(function() {
-  $('#commit-tree .message').each(function() {
-    var cell     = $(this);
-    var filename = cell.parent().find('.file-name').text();
-    $.getJSON('/fragment/Gitalist/[% Commit.sha1 %]/file_commit_info/'+filename, {}, function(commitInfo) {
-      cell.empty();
-      cell.html('<a href="/Gitalist/'+commitInfo.sha1+'/commit">'+commitInfo.comment+'</a> '+commitInfo.age);
-    });
-  });
-});
-</script>
-
 [% BLOCK tree_table_headfoot %]
 [% SET cell = type == 'head' ? 'th' : 'td' %]
   <tr>
@@ -22,7 +7,6 @@ $(window).load(function() {
    <[% cell %]>Message</[% cell %]>
   </tr>
 [% END %]
-
 [%-
        SET counter         = 1;
        
@@ -43,7 +27,7 @@ $(window).load(function() {
        <tr [% "class='invert'" IF counter % 2 %]>
                <td class='file-mode'>[% item.modestr %]</td>
          [%-
-              action_type = item.type == 'tree' ? 'tree' : 'blob';
+              action_type     = item.type == 'tree' ? 'tree' : 'blob';
               action_for_link = item.type == 'tree' ? '/ref/tree' : '/ref/blob';
               blob_or_tree_link = c.uri_for_action(action_for_link, c.req.captures, c.req.args.to_path(item.file))
          -%]
@@ -57,15 +41,12 @@ $(window).load(function() {
          [% END %]
            <a href="[% c.uri_for_action('/ref/history', c.req.captures, c.req.args.to_path(item.file)) %]" title="History (Short log)" class="button shortlog">Short log</a>
                </td>
-          <td class="message">Loading commit info ...</td>
+          <td class="message"><span class='js-data'>[% c.req.args.to_path(item.file) %]</span>Loading commit info ...</td>
        </tr>
                [% counter = counter + 1 %]
        [% END %]
 [% END %]
 
-
-
-
 <table class="listing" id="commit-tree">
 <thead>[% PROCESS tree_table_headfoot type = 'head' %]</thead>
 <tbody>
@@ -73,3 +54,7 @@ $(window).load(function() {
        [% PROCESS output_tree tree_type => tree_files   %]
 </tbody>
 </table>
+
+[%- # We use uri_for instead of uri_for_action as we *want* a /fragment URI in this case %]
+<span id='file_commit_info-uri' class='js-data'>[% c.uri_for('/fragment/' _ Repository.name _ '/' _ Commit.sha1 _ '/file_commit_info') %]</span>
+<span id='commit-uri' class='js-data'>[% c.uri_for_action('/ref/commit', [Repository.name, 'HEAD']) %]</span>
\ No newline at end of file
index bd9f16d..0cde010 100755 (executable)
@@ -1,7 +1,7 @@
 [% BLOCK shortlog_table_headfoot %]
 [% SET cell = type == 'head' ? 'th' : 'td' %]
 <tr>
-       <[% cell %] colspan="2"><a href="#" onclick="compareDiffs('[% Repository.name %]');return false;">Compare</a></[% cell %]>
+       <[% cell %] colspan="2"><a href="" class="compare-link">Compare</a></[% cell %]>
        <[% cell %]>ID (sha1)</[% cell %]>
        <[% cell %]>Last change</[% cell %]>
        <[% cell %]>Message</[% cell %]>
 </tr>
 [% END %]
 
-<form name="theform">
+<form id="compare-form">
 <table class='listing'>
 <thead>[% PROCESS shortlog_table_headfoot type = 'head' %]</thead>
 <tbody>
  [% FOREACH line IN log_lines %]
  <tr [% "class='invert'" IF loop.count % 2 %]>
-       <td><input type="radio" name="sha1_a" value="[% line.sha1 %]" [% "checked" IF loop.count == 2 %] /></td>
-       <td><input type="radio" name="sha1_b" value="[% line.sha1 %]" [% "checked" IF loop.count == 1 %]/></td>
+       <td><input type="radio" name="sha1_a" value="[% line.sha1 %]" [% "checked" IF loop.count == 1 %] /></td>
+       <td><input type="radio" name="sha1_b" value="[% line.sha1 %]" [% "checked" IF loop.count == 2 %]/></td>
        <td class='sha1' title='[% line.sha1 %]'>[% INCLUDE 'inc/chroma_hash.tt2' sha1 = line.sha1.substr(0, 7) %]</td>
        <td class='time-since' title='[% line.authored_time %]'>[% time_since(line.authored_time) %]</td>
        <td>
 </tr>
 [% END %]
 <tr>
-       <td colspan="2"><a href="#" onclick="compareDiffs('[% Repository.name %]');return false;">Compare</a></td>
+       <td colspan="2"><a href="" class="compare-link">Compare</a></td>
        <td colspan="5"></td>
 </tr>
 </tbody>
 </table>
-</form>
+</form
+
+<span id="diff-uri" class="js-data">[% c.uri_for_action('/ref/diff_fancy', [Repository.name, 'HEAD']) %]</span> 
 
 [% INCLUDE 'inc/log_pager.tt2' %]
index f9f670d..901d4d6 100755 (executable)
@@ -1,7 +1,6 @@
 [% BLOCK shortlog_table_headfoot %]
 [% SET cell = type == 'head' ? 'th' : 'td' %]
 <tr>
-       <[% cell %] colspan="2"><a href="#" onclick="compareDiffs('[% Repository.name %]');return false;">Compare</a></[% cell %]>
        <[% cell %]>ID (sha1)</[% cell %]>
        <[% cell %]>Last change</[% cell %]>
        <[% cell %]>Message</[% cell %]>
 </tr>
 [% END %]
 
-<form name="theform">
 <table class='listing'>
 <thead>[% PROCESS shortlog_table_headfoot type = 'head' %]</thead>
 <tbody>
 [% FOREACH result IN results %]
  <tr [% "class='invert'" IF loop.count % 2 %]>
-       <td><input type="radio" name="sha1_a" value="[% result.sha1 %]" [% "checked" IF loop.count == 2 %] /></td>
-       <td><input type="radio" name="sha1_b" value="[% result.sha1 %]" [% "checked" IF loop.count == 1 %]/></td>
        <td class='sha1' title='[% result.sha1 %]'>[% INCLUDE 'inc/chroma_hash.tt2' sha1 = result.sha1.substr(0, 7) %]</td>
        <td class='time-since' title='[% result.authored_time %]'>[% time_since(result.authored_time) %]</td>
        <td>[%
        </td>
 </tr>
 [% END %]
-<tr>
-       <td colspan="2"><a href="#" onclick="compareDiffs('[% Repository.name %]');return false;">Compare</a></td>
-       <td colspan="5"></td>
-</tr>
 </tbody>
-</table>
-</form>
+</table>
\ No newline at end of file
index 5d014dc..41e66a4 100755 (executable)
@@ -14,7 +14,6 @@
        background-color:#f0f0f0;
 }
 
-
 body{
        background:#FAFAFA url([% c.uri_for('/static/i/bg.png') %]) repeat-x left top;
        padding:0;
@@ -537,3 +536,7 @@ div.blob {
 
 /* /blobdiff etc */
 
+/* Hidden spans that contain bits of data to be used by JS */
+.js-data {
+    display: none;
+}
diff --git a/root/static/js/common.js b/root/static/js/common.js
deleted file mode 100755 (executable)
index 1ac5793..0000000
+++ /dev/null
@@ -1,24 +0,0 @@
-// THIS IS NOT USED - it is in the wrapper.tt as js is not parsed by TT (needed for the c.uri_for)
-function compareDiffs(repo, path){
-       var f = document.theform;
-       if(!repo){
-               var repo = "";
-       }
-       if(!path){
-               var path = "";
-       }
-       var sha1,sha2;
-       for(var i=0,len=f.length;i<len;i++){
-               if(f[i].name == "sha1_a"){
-                       if(f[i].checked){
-                               sha1 = f[i].value;
-                       }
-               }
-               if(f[i].name == "sha1_b"){
-                       if(f[i].checked){
-                               sha2 = f[i].value;
-                       }
-               }
-       }
-       document.location.href = [% c.uri_for("/" + repo + "/"+ sha1 + "/diff/" + sha2 + "/" + path) %];
-}
diff --git a/root/static/js/site.js b/root/static/js/site.js
new file mode 100755 (executable)
index 0000000..ba4a990
--- /dev/null
@@ -0,0 +1,82 @@
+function findPos(obj) {
+       var curleft = curtop = 0;
+       if (obj.offsetParent) {
+       do {
+               curleft += obj.offsetLeft;
+               curtop += obj.offsetTop;
+       } 
+       while (obj = obj.offsetParent);
+       return [curleft,curtop];
+       }
+}
+
+function setNavClass(el){
+       var link_el = document.getElementById("actions_nav_link");
+       var offsetAry = findPos(link_el);
+       // set position of list
+       el.style.left = offsetAry[0]+"px";
+       el.style.top = offsetAry[1]+30 +"px";
+       el.className+=" actions_nav_list_over";
+}
+
+// handles hover sub menus in IE
+function startList() {
+       if(!document.getElementById("actions_nav_link"))
+           return;
+       var navList = document.getElementById("actions_nav_list");
+       var navLink = document.getElementById("actions_nav_link");
+       // assign event handlers to each element
+       navLink.onmouseover=function() {
+               setNavClass(navList);
+       };
+       navList.onmouseover=function() {
+               setNavClass(navList);
+       };
+       navList.onmouseout=function() {
+               navList.className=navList.className.replace(" actions_nav_list_over", "");
+       };
+       navLink.onmouseout=function() {
+               navList.className=navList.className.replace(" actions_nav_list_over", "");
+       };
+}
+
+function uriFor(action, sha1) {
+    return jQuery('#' + action + '-uri').text().replace(/\bHEAD\b/, sha1);
+}
+
+function switchBranch() {
+    var branch = jQuery('#branch-list').val();
+    document.location.href = uriFor('current', branch);
+}
+
+function compareDiffs(){
+    var path     = jQuery('#compare-path').text(),
+        baseSha1 = jQuery('#compare-form input[name=sha1_a]:checked').val(),
+        compSha1 = jQuery('#compare-form input[name=sha1_b]:checked').val(),
+        diffUri  = uriFor('diff', baseSha1);
+    document.location.href = diffUri + '/' + compSha1 + (path ? '/' + escape(path) : '');
+    return false;
+}
+
+function loadCommitInfo() {
+  jQuery('#commit-tree .message').each(function() {
+    var cell     = jQuery(this);
+    var filename = unescape( cell.find('.js-data').text() );
+    jQuery.getJSON(uriFor('file_commit_info') + '/' + filename, {}, function(commitInfo) {
+      cell.empty();
+      cell.html('<a href="'+uriFor('commit', commitInfo.sha1)+'">'+commitInfo.comment+'</a> '+commitInfo.age);
+    });
+  });
+}
+
+jQuery(function() {
+    // Provide sub-nav dropdowns (I think).
+    startList();
+
+    // JS up any Compare links
+    jQuery('a.compare-link').click(compareDiffs);
+    // Change the URL when a branch is selected
+    jQuery('#branch-list').change(switchBranch);
+    // Wait for image requests to come back first
+    jQuery(window).load(loadCommitInfo);
+});
index 0842b9f..8426d65 100755 (executable)
    
        <link rel="stylesheet" type="text/css" href="[% c.uri_for('/core.css') %]" />
        <link rel="shortcut icon" href="[% c.uri_for('/static/favicon.ico') %]" />
-       <script type="text/javascript">
-       // FIXME: this should be in an external js file once c.uri_for works in js files
-       function compareDiffs(repo, path){
-               var f = document.theform;
-               if(!repo){
-                       var repo = "";
-               }
-               if(!path){
-                       var path = "";
-               }
-               var sha1,sha2;
-               for(var i=0,len=f.length;i<len;i++){
-                       if(f[i].name == "sha1_a"){
-                               if(f[i].checked){
-                                       sha1 = f[i].value;
-                               }
-                       }
-                       if(f[i].name == "sha1_b"){
-                               if(f[i].checked){
-                                       sha2 = f[i].value;
-                               }
-                       }
-               }
-               document.location.href = "[% c.uri_for("/") %]" + repo + "/"+ sha2 + "/diff/" + sha1 + "/" + path;
-       }
-       // handles hover sub menus in IE
-       startList = function() {
-               if (document.getElementById && document.getElementById("actions_nav_link")) {
-                       var navList = document.getElementById("actions_nav_list");
-                       var navLink = document.getElementById("actions_nav_link");
-                       // assign event handlers to each element
-                       navLink.onmouseover=function() {
-                               setNavClass(navList);
-                       }
-                       navList.onmouseover=function() {
-                               setNavClass(navList);
-                       }
-                       navList.onmouseout=function() {
-                               navList.className=navList.className.replace(" actions_nav_list_over", "");
-                       }
-                       navLink.onmouseout=function() {
-                               navList.className=navList.className.replace(" actions_nav_list_over", "");
-                       }
-               }
-               
-       }
-       function setNavClass(el){
-               var link_el = document.getElementById("actions_nav_link");
-               var offsetAry = findPos(link_el);
-               // set position of list
-               el.style.left = offsetAry[0]+"px";
-               el.style.top = offsetAry[1]+30 +"px";
-               el.className+=" actions_nav_list_over";
-       }
-       
-       function addLoadListener(fn){ 
-               if (typeof window.addEventListener != 'undefined') { 
-                       window.addEventListener('load', fn, false); 
-               }else if (typeof document.addEventListener != 'undefined'){ 
-                       document.addEventListener('load', fn, false); 
-               }else if (typeof window.attachEvent != 'undefined'){ 
-                       window.attachEvent('onload', fn); 
-               }else{ 
-                       var oldfn = window.onload; 
-                       if (typeof window.onload != 'function'){ 
-                               window.onload = fn; 
-                       }else{ 
-                               window.onload = function(){
-                                       oldfn();
-                                       fn();
-                               }; 
-                       }
-               }
-       }
-       function findPos(obj) {
-               var curleft = curtop = 0;
-               if (obj.offsetParent) {
-               do {
-                       curleft += obj.offsetLeft;
-                       curtop += obj.offsetTop;
-               } 
-               while (obj = obj.offsetParent);
-               return [curleft,curtop];
-               }
-       }
-       addLoadListener(startList);
-       </script>
+       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+       <script src="[% c.uri_for('/static/js/site.js') %]"></script>
 </head>
 
 <body>
                                
                                <li id="branch_selector">
                                        Branches 
-                                       <select onchange="document.location.href='[% c.uri_for("/") %][% Repository.name %]/'+this.options[this.selectedIndex].text + '/shortlog';">
+                                       <select id='branch-list'>
                                                <option value="">HEAD</option>
-                                       
-                                       [% FOREACH branch_head IN Repository.heads %]
-                                               <option [% "selected" IF c.req.path.search(branch_head.name) %]>[% branch_head.name %]</option>
+                                       [% FOREACH branch IN Repository.heads %]
+                                               <option value="[% branch.name %]">[% branch.name %]</option>
                                        [% END %]
                                        
                                        </select>
        [% USE Dumper %]
        <pre>
        [% Repository.path %]
-       [%# Dumper.dump(Commit) %]
+       [% Dumper.dump(c.req.args) %]
        </pre>
        
        </div>
 </div>
 
+<span id="current-uri">[%
+      # A bit of smoke and mirrors to get the /repository/shortlog URIs working
+      cur_act = '' _ c.action;
+      cur_uri = cur_act.match("log") || cur_act.match("^ref")
+              ? '/ref/' _ cur_act.replace("^(repository|ref)/", '')
+             : cur_act;
+      # XXX I just want an empty list!
+      IF c.req.args.size > 0;
+          c.uri_for_action(cur_uri, [Repository.name, 'HEAD'], c.req.args);
+      ELSE;
+          c.uri_for_action(cur_uri, [Repository.name, 'HEAD']);
+      END;
+%]</span>
+
 </body>
 </html>
 [%- END -%]