diff --git a/r2/r2/lib/js.py b/r2/r2/lib/js.py index 2f5653109..d6fc893c8 100755 --- a/r2/r2/lib/js.py +++ b/r2/r2/lib/js.py @@ -326,23 +326,28 @@ module["html5shiv"] = Module("html5shiv.js", ) -module["reddit"] = LocalizedModule("reddit.js", +module["reddit-init"] = Module("reddit-init.js", "lib/json2.js", "lib/underscore-1.3.3.js", "lib/store.js", + "base.js", + "uibase.js", + "analytics.js", + "jquery.reddit.js", + "reddit.js", + "spotlight.js", +) + +module["reddit"] = LocalizedModule("reddit.js", "lib/jquery.cookie.js", "lib/jquery.url.js", - "jquery.reddit.js", - "base.js", "utils.js", "strings.js", "ui.js", "login.js", - "analytics.js", "flair.js", "interestbar.js", "wiki.js", - "reddit.js", "apps.js", "gold.js", "spotlight.js", diff --git a/r2/r2/lib/pages/pages.py b/r2/r2/lib/pages/pages.py index 8adfa02d0..1638ce269 100755 --- a/r2/r2/lib/pages/pages.py +++ b/r2/r2/lib/pages/pages.py @@ -643,6 +643,10 @@ class RedditMin(Reddit): show_sidebar = False show_firsttext = False + def page_classes(self): + return ('min-body',) + + class LoginFormWide(CachedTemplate): """generates a login form suitable for the 300px rightbox.""" def __init__(self): @@ -2145,6 +2149,8 @@ class FrameToolbar(Wrapped): # run to set scores with current score format (for example) Printable.add_props(user, nonempty) + def page_classes(self): + return ("toolbar",) class NewLink(Templated): diff --git a/r2/r2/public/static/js/ui.js b/r2/r2/public/static/js/ui.js index 5df92cd46..754686f91 100644 --- a/r2/r2/public/static/js/ui.js +++ b/r2/r2/public/static/js/ui.js @@ -1,47 +1,3 @@ -r.ui = {} - -r.ui.Base = function(el) { - this.$el = $(el) -} - -r.ui.collapsibleSideBox = function(id) { - var $el = $('#'+id) - return new r.ui.Collapse($el.find('.title'), $el.find('.content'), id) -} - -r.ui.Collapse = function(el, target, key) { - r.ui.Base.call(this, el) - this.target = target - this.key = 'ui.collapse.' + key - this.isCollapsed = store.get(this.key) == true - this.$el.click($.proxy(this, 'toggle', null, false)) - this.toggle(this.isCollapsed, true) -} -r.ui.Collapse.prototype = { - animDuration: 200, - - toggle: function(collapsed, immediate) { - if (collapsed == null) { - collapsed = !this.isCollapsed - } - - var duration = immediate ? 0 : this.animDuration - if (collapsed) { - $(this.target).slideUp(duration) - } else { - $(this.target).slideDown(duration) - } - - this.isCollapsed = collapsed - store.set(this.key, collapsed) - this.update() - }, - - update: function() { - this.$el.find('.collapse-button').text(this.isCollapsed ? '+' : '-') - } -} - r.ui.Form = function(el) { r.ui.Base.call(this, el) this.$el.submit($.proxy(function(e) { diff --git a/r2/r2/public/static/js/uibase.js b/r2/r2/public/static/js/uibase.js new file mode 100644 index 000000000..3bd25ebc2 --- /dev/null +++ b/r2/r2/public/static/js/uibase.js @@ -0,0 +1,44 @@ +r.ui = {} + +r.ui.Base = function(el) { + this.$el = $(el) +} + +r.ui.collapsibleSideBox = function(id) { + var $el = $('#'+id) + return new r.ui.Collapse($el.find('.title'), $el.find('.content'), id) +} + +r.ui.Collapse = function(el, target, key) { + r.ui.Base.call(this, el) + this.target = target + this.key = 'ui.collapse.' + key + this.isCollapsed = store.get(this.key) == true + this.$el.click($.proxy(this, 'toggle', null, false)) + this.toggle(this.isCollapsed, true) +} +r.ui.Collapse.prototype = { + animDuration: 200, + + toggle: function(collapsed, immediate) { + if (collapsed == null) { + collapsed = !this.isCollapsed + } + + var duration = immediate ? 0 : this.animDuration + if (collapsed) { + $(this.target).slideUp(duration) + } else { + $(this.target).slideDown(duration) + } + + this.isCollapsed = collapsed + store.set(this.key, collapsed) + this.update() + }, + + update: function() { + this.$el.find('.collapse-button').text(this.isCollapsed ? '+' : '-') + } +} + diff --git a/r2/r2/templates/allinfobar.html b/r2/r2/templates/allinfobar.html index eddc7df86..a177e39d5 100644 --- a/r2/r2/templates/allinfobar.html +++ b/r2/r2/templates/allinfobar.html @@ -20,9 +20,9 @@ ## reddit Inc. All Rights Reserved. ############################################################################### -<%namespace file="utils.html" import="plain_link, css_class, _md"/> +<%namespace file="utils.html" import="plain_link, classes, _md"/> -
+

${plain_link(thing.sr.name, thing.sr.path, _sr_path=False, _class="hover")}

diff --git a/r2/r2/templates/base.compact b/r2/r2/templates/base.compact index 606faaf1f..6083efe9c 100644 --- a/r2/r2/templates/base.compact +++ b/r2/r2/templates/base.compact @@ -25,7 +25,7 @@ from r2.lib.template_helpers import static from r2.lib import js %> -<%namespace file="utils.html" import="js_setup, googleanalytics"/> +<%namespace file="utils.html" import="js_setup, googleanalytics, classes"/> ${self.robots()} - ${unsafe(js.use('jquery', 'mobile'))} + ${unsafe(js.use('jquery', 'reddit-init'))} ${js_setup(thing.extra_js_config)} ${googleanalytics('mobile')} - ${self.bodyHTML()} + + ${self.bodyContent()} + ${unsafe(js.use('mobile'))} + -<%def name="bodyHTML()"> - +<%def name="bodyContent()"> <%def name="Title()"> diff --git a/r2/r2/templates/base.html b/r2/r2/templates/base.html index 79db1de22..38127a13a 100644 --- a/r2/r2/templates/base.html +++ b/r2/r2/templates/base.html @@ -26,7 +26,7 @@ from r2.models import Link, Comment, Subreddit from r2.lib import tracking %> -<%namespace file="utils.html" import="js_setup, googleanalytics"/> +<%namespace file="utils.html" import="js_setup, googleanalytics, classes"/> @@ -52,10 +52,13 @@ ${self.head()} - ${self.bodyHTML()} + + ${self.bodyContent()} + ${self.javascript_bottom()} + -<%def name="bodyHTML()"> +<%def name="bodyContent()"> <%def name="Title()"> @@ -99,3 +102,6 @@ ${googleanalytics('web')} <%def name="javascript()"> + +<%def name="javascript_bottom()"> + diff --git a/r2/r2/templates/frametoolbar.html b/r2/r2/templates/frametoolbar.html index 138c5bf7e..29536e334 100644 --- a/r2/r2/templates/frametoolbar.html +++ b/r2/r2/templates/frametoolbar.html @@ -36,8 +36,7 @@ toolbar = new toolbar_p("${panel_size('expanded')}", "${panel_size('collapsed')}"); -<%def name="bodyHTML()"> - +<%def name="bodyContent()">
## everything in here will get rendered off screen for pre-fetching purposes.
@@ -151,7 +150,6 @@
- diff --git a/r2/r2/templates/reddit.compact b/r2/r2/templates/reddit.compact index ee05c3b0e..6aadb297e 100644 --- a/r2/r2/templates/reddit.compact +++ b/r2/r2/templates/reddit.compact @@ -27,31 +27,29 @@ <%namespace file="login.html" import="login_form"/> <%namespace file="utils.html" import="tags"/> -<%def name="bodyHTML()"> - - <%include file="redditheader.compact"/> - %if thing.content: -
- ${thing.content()} +<%def name="bodyContent()"> + <%include file="redditheader.compact"/> + %if thing.content: +
+ ${thing.content()} +
+ %endif + %if not c.user_is_loggedin: + %if thing.enable_login_cover: + %endif - %if not c.user_is_loggedin: - %if thing.enable_login_cover: - - %endif - %endif - %if g.tracker_url and thing.site_tracking and not c.secure: - - %endif - + %endif + %if g.tracker_url and thing.site_tracking and not c.secure: + + %endif diff --git a/r2/r2/templates/reddit.html b/r2/r2/templates/reddit.html index 2e9ae9522..b1e1da3d6 100644 --- a/r2/r2/templates/reddit.html +++ b/r2/r2/templates/reddit.html @@ -32,7 +32,7 @@ <%namespace file="login.html" import="login_panel, login_form"/> <%namespace file="framebuster.html" import="framebuster"/> <%namespace file="less.html" import="less_js"/> -<%namespace file="utils.html" import="tags, css_class"/> +<%namespace file="utils.html" import="tags, classes"/> <%inherit file="base.html"/> <%def name="Title()"> @@ -99,7 +99,7 @@ <%def name="javascript()"> <% from r2.lib import js %> - ${unsafe(js.use('jquery', 'reddit'))} + ${unsafe(js.use('jquery', 'reddit-init'))} % if c.deny_frames: % endif @@ -109,61 +109,64 @@ ${less_js()} +<%def name="javascript_bottom()"> + <% from r2.lib import js %> + ${unsafe(js.use('reddit'))} + + <%def name="javascript_run()"> reddit.cur_site = "${c.site._fullname if hasattr(c.site, '_fullname') else ''}"; -<%def name="bodyHTML()"> - - <%include file="redditheader.html"/> - - %if thing.show_sidebar: -
- ${sidebar(content = thing.rightbox())} -
- %endif +<%def name="bodyContent()"> + <%include file="redditheader.html"/> - <% content = getattr(self, "content", None) or thing.content %> - %if content: - ##
- ##
- -
- ${content()} + %if thing.show_sidebar: +
+ ${sidebar(content = thing.rightbox())} +
+ %endif + + <% content = getattr(self, "content", None) or thing.content %> + %if content: + ##
+ ##
+ +
+ ${content()} +
+ %endif + + %if thing.footer: + + ${thing.footer} + + %if not c.user_is_loggedin and not g.read_only_mode: + %if thing.enable_login_cover: + + %endif + %endif - - %if thing.footer: - - ${thing.footer} - - %if not c.user_is_loggedin and not g.read_only_mode: - %if thing.enable_login_cover: - - %endif - - %endif - %endif - ${framebuster()} -

π Rendered by PID ${g.reddit_pid} on ${g.reddit_host} at ${c.start_time} running ${g.short_version}.

- + %endif + ${framebuster()} +

π Rendered by PID ${g.reddit_pid} on ${g.reddit_host} at ${c.start_time} running ${g.short_version}.

<%def name="sidebar(content=None)"> diff --git a/r2/r2/templates/redditmin.html b/r2/r2/templates/redditmin.html index a1e0d47c2..5dae4e2a6 100644 --- a/r2/r2/templates/redditmin.html +++ b/r2/r2/templates/redditmin.html @@ -22,12 +22,10 @@ <%inherit file="reddit.html"/> -<%def name="bodyHTML()"> - - %if thing.content: -
- ${thing.content()} -
- %endif - +<%def name="bodyContent()"> + %if thing.content: +
+ ${thing.content()} +
+ %endif diff --git a/r2/r2/templates/trycompact.compact b/r2/r2/templates/trycompact.compact index 757ef1b3e..9b50d8382 100644 --- a/r2/r2/templates/trycompact.compact +++ b/r2/r2/templates/trycompact.compact @@ -25,8 +25,7 @@ %> <%inherit file="reddit.compact" /> -<%def name="bodyHTML()"> - +<%def name="bodyContent()"> <%include file="redditheader.compact"/>

@@ -51,5 +50,4 @@ %if g.tracker_url and thing.site_tracking: %endif - diff --git a/r2/r2/templates/utils.html b/r2/r2/templates/utils.html index a22d5f300..fac76d26c 100755 --- a/r2/r2/templates/utils.html +++ b/r2/r2/templates/utils.html @@ -53,7 +53,9 @@ id="${arg}_${thing and thing._fullname or ''}" -<%def name="css_class(thing)">${' '+thing.css_class if hasattr(thing, 'css_class') and thing.css_class else ''} +<%def name="classes(*class_names)"> +class="${" ".join(filter(None, class_names))}" + <%def name="submit_form(onsubmit='', action='', _class='', method='post', _id='', **params)">