toolbar: Convert inner frame to using iframes.

This commit is contained in:
Max Goodman
2013-09-27 20:33:35 -07:00
parent b547a11d00
commit 54fbe84fe6
5 changed files with 47 additions and 20 deletions

View File

@@ -488,10 +488,6 @@ def choose_width(link, width):
else:
return 110
def panel_size(state):
"the frame.cols of the reddit-toolbar's inner frame"
return '400px, 100%' if state =='expanded' else '0px, 100%x'
# Appends to the list "attrs" a tuple of:
# <priority (higher trumps lower), letter,
# css class, i18n'ed mouseover label, hyperlink (opt)>

View File

@@ -3354,6 +3354,33 @@ button.button[disabled] {
margin: 5px 10px 10px 3px;
}
#inner_toolbar {
#reddit_panel, #reddit_link {
position: absolute;
height: 100%;
border: none;
}
#reddit_panel {
width: 0;
}
#reddit_link {
width: 100%;
}
&.expanded {
#reddit_panel {
width: 400px;
}
#reddit_link {
left: 400px;
right: 0;
}
}
}
.min-body {
height: 100%;
}

View File

@@ -973,11 +973,11 @@ var toolbar_p = function(expanded_size, collapsed_size) {
};
this.show_panel = function() {
parent.inner_toolbar.document.body.cols = expanded_size;
$('body', parent.inner_toolbar.document).addClass('expanded')
};
this.hide_panel = function() {
parent.inner_toolbar.document.body.cols = collapsed_size;
$('body', parent.inner_toolbar.document).removeClass('expanded')
};
this.resize_toolbar = function() {

View File

@@ -21,7 +21,7 @@
###############################################################################
<%!
from r2.lib.template_helpers import static, get_domain, add_sr, panel_size
from r2.lib.template_helpers import static, get_domain, add_sr
from r2.lib.strings import Score
%>
@@ -33,7 +33,7 @@
<%def name="javascript_run()">
${parent.javascript_run()}
reddit.external_frame = true;
toolbar = new toolbar_p("${panel_size('expanded')}", "${panel_size('collapsed')}");
toolbar = new toolbar_p();
</%def>
<%def name="sr_stylesheets()">

View File

@@ -20,19 +20,23 @@
## reddit Inc. All Rights Reserved.
###############################################################################
<%namespace file="less.html" import="less_js, less_stylesheet"/>
<%!
from r2.lib.template_helpers import add_sr, panel_size
from r2.lib.template_helpers import add_sr
%>
<html>
<script type="text/javascript">
if (window == window.top) {
window.location = "${add_sr('/tb/' + thing.link._id36)}"
}
</script>
<frameset cols="${panel_size('expanded' if thing.expanded else 'collapsed')}"
name="inner_toolbar" onload="window.frames[1].focus()">
<frame frameborder="0" src="${add_sr('/toolbar/comments/'+thing.link._id36)}"
name="reddit_panel" />
<frame frameborder="0" src="${thing.link.url}" name="reddit_link" />
</frameset>
<head>
<script type="text/javascript">
if (window == window.top) {
window.location = "${add_sr('/tb/' + thing.link._id36)}"
}
</script>
${less_stylesheet(g.stylesheet)}
${less_js()}
</head>
<body class="${'expanded' if thing.expanded else ''}" id="inner_toolbar" onload="window.frames[1].focus()">
<iframe frameborder="0" src="${add_sr('/toolbar/comments/'+thing.link._id36)}" id="reddit_panel"></iframe>
<iframe frameborder="0" src="${thing.link.url}" id="reddit_link"></iframe>
</body>
</html>