From 5922d977392119d15f40963e8a5d7fe9ca368ade Mon Sep 17 00:00:00 2001
From: Jacob Mason <jacoblmason@gmail.com>
Date: Thu, 12 Aug 2010 17:07:15 -0500
Subject: [PATCH] separate js templates from js scripts

---
 .../basic/static/websupport-templates.html    |  97 ++++++++++++++
 sphinx/themes/basic/static/websupport.js      | 123 ++++--------------
 sphinx/websupport/__init__.py                 |   3 +-
 3 files changed, 122 insertions(+), 101 deletions(-)
 create mode 100644 sphinx/themes/basic/static/websupport-templates.html

diff --git a/sphinx/themes/basic/static/websupport-templates.html b/sphinx/themes/basic/static/websupport-templates.html
new file mode 100644
index 000000000..1ea58ab24
--- /dev/null
+++ b/sphinx/themes/basic/static/websupport-templates.html
@@ -0,0 +1,97 @@
+<div id="templates">
+  <div id="reply_template">
+    <Li>
+      <div class="reply_div" id="rd<%id%>">
+	<form id="rf<%id%>">
+	  <textarea name="comment" cols="80"></textarea>
+          <input type="submit" value="add reply" />
+          <input type="hidden" name="parent" value="<%id%>" />
+          <input type="hidden" name="node" value="" />
+	</form>
+      </div>
+    </li>
+  </div>
+
+  <div id="comment_template">
+    <div  id="cd<%id%>" class="spxcdiv">
+      <div class="vote">
+	<div class="arrow">
+	  <a href="#" id="uv<%id%>" class="vote">
+	    <img src="<%upArrow%>" />
+	  </a>
+	  <a href="#" id="uu<%id%>" class="un vote">
+	    <img src="<%upArrowPressed%>" />
+	  </a>
+	</div>
+	<div class="arrow">
+	  <a href="#" id="dv<%id%>" class="vote">
+	    <img src="<%downArrow%>" id="da<%id%>" />
+	  </a>
+	  <a href="#" id="du<%id%>" class="un vote">
+	    <img src="<%downArrowPressed%>" />
+	  </a>
+	</div>
+      </div>
+      <div class="comment_content">
+	<p class="tagline comment">
+	  <span class="user_id"><%username%></span>
+	  <span class="rating"><%pretty_rating%></span>
+	  <span class="delta"><%time.delta%></span>
+	</p>
+	<p class="comment_text comment"><%text%></p>
+	<p class="comment_opts comment">
+	  <a href="#" class="reply hidden" id="rl<%id%>">reply &#9657;</a>
+	  <a href="#" class="close_reply" id="cr<%id%>">reply &#9663;</a>
+	  <a href="#" id="sp<%id%>" class="show_proposal">
+	    proposal &#9657;
+	  </a>
+	  <a href="#" id="hp<%id%>" class="hide_proposal">
+	    proposal &#9663;
+	  </a>
+	  <a href="#" id="dc<%id%>" class="delete_comment hidden">
+	    delete
+	  </a>
+	  <span id="cm<%id%>" class="moderation hidden">
+	    <a href="#" id="ac<%id%>" class="accept_comment">accept</a>
+	    <a href="#" id="rc<%id%>" class="reject_comment">reject</a>
+	  </span>
+	</p>
+	<pre class="proposal" id="pr<%id%>">
+	  <#proposal_diff#>
+	</pre>
+	<ul class="children" id="cl<%id%>"></ul>
+      </div>
+      <div class="clearleft"></div>
+    </div>
+  </div>
+
+  <div id="popup_template">
+    <div class="popup_comment">
+      <a id="comment_close" href="#">x</a>
+      <h1>Comments</h1>
+      <form method="post" id="comment_form" action="/docs/add_comment">
+	<textarea name="comment" cols="80"></textarea>
+	<p class="propose_button">
+	  <a href="#" class="show_propose_change">
+	    Propose a change &#9657;
+	  </a>
+	  <a href="#" class="hide_propose_change">
+	    Propose a change &#9663;
+	  </a>
+	</p>
+	<textarea name="proposal" cols="80" spellcheck="false"></textarea>
+	<input type="submit" value="add comment" id="comment_button" />
+	<input type="hidden" name="node" />
+	<input type="hidden" name="parent" value="" />
+	<p class="sort_options">
+	  Sort by:
+	  <a href="#" class="sort_option" id="rating">top</a>
+	  <a href="#" class="sort_option" id="ascage">newest</a>
+	  <a href="#" class="sort_option" id="age">oldest</a>
+	</p>
+      </form>
+      <h3 id="comment_notification">loading comments... <img src="<%loadingImage%>" alt="" /></h3>
+      <ul id="comment_ul"></ul>
+    </div>
+  </div>
+</div>
diff --git a/sphinx/themes/basic/static/websupport.js b/sphinx/themes/basic/static/websupport.js
index 2e43c7324..1f00ee465 100644
--- a/sphinx/themes/basic/static/websupport.js
+++ b/sphinx/themes/basic/static/websupport.js
@@ -31,11 +31,10 @@
 })(jQuery);
 
 (function($) {
-  var commentListEmpty, popup, comp;
+   var commentListEmpty, popup, comp, commentTemplate, replyTemplate;
 
   function init() {
     initTemplates();
-    initEvents();
     initComparator();
   };
 
@@ -95,12 +94,27 @@
   };
 
   function initTemplates() {
-    // Create our popup div, the same div is recycled each time comments
-    // are displayed.
-    popup = $(renderTemplate(popupTemplate, opts));
-    // Setup autogrow on the textareas
-    popup.find('textarea').autogrow();
-    $('body').append(popup);
+    var templateURL = opts.staticDir + '/_static/websupport-templates.html';
+    $.get(templateURL, function(data) {
+      var templates = $(data);
+      function loadTemplate(id) {
+	var html = templates.find('#' + id).html();
+	html = html.replace(/(&lt;)|(%3C)/g, "<");
+	html = html.replace(/(&gt;)|(%3E)/g, ">");
+        return html;
+      };
+      // Create our popup div, the same div is recycled each time comments
+      // are displayed.
+      // Setup autogrow on the textareas
+      var popupTemplate = loadTemplate('popup_template');
+      popup = $(renderTemplate(popupTemplate, opts));
+      popup.find('textarea').autogrow();
+
+      commentTemplate = loadTemplate('#comment_template');
+      replyTemplate = loadTemplate('#reply_template');
+      $('body').append(popup);
+      initEvents();
+    });
   };
 
   /**
@@ -646,102 +660,11 @@
     downArrow: '/static/_static/down.png',
     upArrowPressed: '/static/_static/up-pressed.png',
     downArrowPressed: '/static/_static/down-pressed.png',
+    staticDir: '/static',
     voting: false,
     moderator: false
   }, COMMENT_OPTIONS);
 
-  var replyTemplate = '    <li>\
-      <div class="reply_div" id="rd<%id%>">\
-	<form id="rf<%id%>">\
-	  <textarea name="comment" cols="80"></textarea>\
-          <input type="submit" value="add reply" />\
-          <input type="hidden" name="parent" value="<%id%>" />\
-          <input type="hidden" name="node" value="" />\
-        </form>\
-      </div>\
-    </li>';
-
-  var commentTemplate = '    <div  id="cd<%id%>" class="spxcdiv">\
-      <div class="vote">\
-	<div class="arrow">\
-	  <a href="#" id="uv<%id%>" class="vote">\
-	    <img src="<%upArrow%>" />\
-	  </a>\
-	  <a href="#" id="uu<%id%>" class="un vote">\
-	    <img src="<%upArrowPressed%>" />\
-	  </a>\
-	</div>\
-      <div class="arrow">\
-	  <a href="#" id="dv<%id%>" class="vote">\
-	    <img src="<%downArrow%>" id="da<%id%>" />\
-	  </a>\
-	  <a href="#" id="du<%id%>" class="un vote">\
-	    <img src="<%downArrowPressed%>" />\
-	  </a>\
-	</div>\
-      </div>\
-      <div class="comment_content">\
-	<p class="tagline comment">\
-	  <span class="user_id"><%username%></span>\
-	  <span class="rating"><%pretty_rating%></span>\
-	  <span class="delta"><%time.delta%></span>\
-	</p>\
-	<p class="comment_text comment"><%text%></p>\
-	<p class="comment_opts comment">\
-	  <a href="#" class="reply hidden" id="rl<%id%>">reply &#9657;</a>\
-	  <a href="#" class="close_reply" id="cr<%id%>">reply &#9663;</a>\
-	  <a href="#" id="sp<%id%>" class="show_proposal">\
-	    proposal &#9657;\
-	  </a>\
-	  <a href="#" id="hp<%id%>" class="hide_proposal">\
-	    proposal &#9663;\
-	  </a>\
-	  <a href="#" id="dc<%id%>" class="delete_comment hidden">\
-	    delete\
-	  </a>\
-	  <span id="cm<%id%>" class="moderation hidden">\
-	    <a href="#" id="ac<%id%>" class="accept_comment">accept</a>\
-	    <a href="#" id="rc<%id%>" class="reject_comment">reject</a>\
-	  </span>\
-	</p>\
-	<pre class="proposal" id="pr<%id%>">\
-<#proposal_diff#>\
-	</pre>\
-	<ul class="children" id="cl<%id%>"></ul>\
-      </div>\
-      <div class="clearleft"></div>\
-    </div>';
-
-   var popupTemplate = '    <div class="popup_comment">\
-      <a id="comment_close" href="#">x</a>\
-      <h1>Comments</h1>\
-      <form method="post" id="comment_form" action="/docs/add_comment">\
-	<textarea name="comment" cols="80"></textarea>\
-	<p class="propose_button">\
-	  <a href="#" class="show_propose_change">\
-	    Propose a change &#9657;\
-	  </a>\
-	  <a href="#" class="hide_propose_change">\
-	    Propose a change &#9663;\
-	  </a>\
-	</p>\
-	<textarea name="proposal" cols="80" spellcheck="false"></textarea>\
-	<input type="submit" value="add comment" id="comment_button" />\
-	<input type="hidden" name="node" />\
-	<input type="hidden" name="parent" value="" />\
-      <p class="sort_options">\
-	Sort by:\
-	<a href="#" class="sort_option" id="rating">top</a>\
-	<a href="#" class="sort_option" id="ascage">newest</a>\
-	<a href="#" class="sort_option" id="age">oldest</a>\
-      </p>\
-      </form>\
-      <h3 id="comment_notification">loading comments... <img src="' +
-      opts.loadingImage + '" alt="" /></h3>\
-      <ul id="comment_ul"></ul>\
-    </div>\
-    <div id="focuser"></div>';
-
   $(document).ready(function() {
     init();
   });
diff --git a/sphinx/websupport/__init__.py b/sphinx/websupport/__init__.py
index cc065b7f7..939428a6c 100644
--- a/sphinx/websupport/__init__.py
+++ b/sphinx/websupport/__init__.py
@@ -376,7 +376,8 @@ class WebSupport(object):
                 ('upArrow', 'up.png'),
                 ('upArrowPressed', 'up-pressed.png'),
                 ('downArrow', 'down.png'),
-                ('downArrowPressed', 'down-pressed.png')
+                ('downArrowPressed', 'down-pressed.png'),
+                ('staticDir', '/' + self.staticdir)
             ]
             for key, value in static_urls:
                 self.base_comment_opts[key] = \