separate js templates from js scripts

This commit is contained in:
Jacob Mason 2010-08-12 17:07:15 -05:00
parent 7e8fb7141b
commit 5922d97739
3 changed files with 122 additions and 101 deletions

View File

@ -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>

View File

@ -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() {
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.
popup = $(renderTemplate(popupTemplate, opts));
// 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();
});

View File

@ -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] = \