github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-22 11:44:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Support for scrolling to another post in the iframe; more complicated than you'd think!

Browse Source
This commit is contained in:
Robin Ward 2014-01-03 14:45:22 -05:00
parent 2a79ed97ed
commit c762e3c4b1
3 changed files with 62 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/views/embed/comments.html.erb
View File

@ -12,10 +12,10 @@
<%- if @topic_view.posts.present? %>
<%- @topic_view.posts.each do |post| %>
<article class='post<%- if post.trashed? %> deleted<% end %>'>
<article class='post<%- if post.trashed? %> deleted<% end %>' id='post-<%= post.id.to_s %>'>
<%= link_to post.created_at.strftime("%e %b %Y"), post.url, class: 'post-date', target: "_blank" %>
<%- if post.reply_to_post.present? %>
<%= link_to I18n.t('embed.in_reply_to', username: post.reply_to_post.username), post.reply_to_post.url, class: 'in-reply-to', target: "_blank" %>
<%= link_to I18n.t('embed.in_reply_to', username: post.reply_to_post.username), post.reply_to_post.url, 'data-link-to-post' => post.reply_to_post.id.to_s, :class => 'in-reply-to' %>
<%- end %>
<div class='author'>
@ -26,7 +26,11 @@
<%= raw post.cooked %>
<%- if post.reply_count > 0 %>
<%= link_to I18n.t('embed.replies', count: post.reply_count), post.url, class: 'post-replies', target: "_blank" %>
<%- if post.reply_count == 1 %>
<%= link_to I18n.t('embed.replies', count: post.reply_count), post.url, 'data-link-to-post' => post.replies.first.id.to_s, :class => 'post-replies' %>
<% else %>
<%= link_to I18n.t('embed.replies', count: post.reply_count), post.url, class: 'post-replies', target: "_blank" %>
<%- end %>
<%- end %>
</div>

32
app/views/layouts/embed.html.erb
View File

@ -5,12 +5,38 @@
<script>
(function() {
window.onload = function() {
function postUp(msg) {
if (parent) {
// Send a post message with our loaded height
parent.postMessage({type: 'discourse-resize', height: document['body'].offsetHeight}, '<%= request.referer %>');
parent.postMessage(msg, '<%= request.referer %>');
}
}
function clickPostLink(e) {
var postId = e.target.getAttribute('data-link-to-post');
if (postId) {
var postElement = document.getElementById('post-' + postId);
if (postElement) {
var rect = postElement.getBoundingClientRect();
if (rect && rect.top) {
postUp({type: 'discourse-scroll', top: rect.top});
e.preventDefault();
return false;
}
}
}
}
window.onload = function() {
// Send a post message with our loaded height
postUp({type: 'discourse-resize', height: document['body'].offsetHeight});
var postLinks = document.querySelectorAll("a[data-link-to-post]");
for (var i=0; i<postLinks.length; i++) {
postLinks[i].onclick = clickPostLink;
}
};
})();
</script>
</head>

26
public/javascripts/embed.js
View File

@ -11,6 +11,26 @@
iframe.scrolling = "no";
comments.appendChild(iframe);
// Thanks http://amendsoft-javascript.blogspot.ca/2010/04/find-x-and-y-coordinate-of-html-control.html
function findPosY(obj)
{
var top = 0;
if(obj.offsetParent)
{
while(1)
{
top += obj.offsetTop;
if(!obj.offsetParent)
break;
obj = obj.offsetParent;
}
}
else if(obj.y)
{
top += obj.y;
}
return top;
}
function postMessageReceived(e) {
if (!e) { return; }
@ -20,6 +40,12 @@
if (e.data.type === 'discourse-resize' && e.data.height) {
iframe.height = e.data.height + "px";
}
if (e.data.type === 'discourse-scroll' && e.data.top) {
// find iframe offset
var destY = findPosY(iframe) + e.data.top;
window.scrollTo(0, destY);
}
}
}
window.addEventListener('message', postMessageReceived, false);