discourse/public/javascripts/embed-topics.js
Robin Ward 23367e79ea
FEATURE: Embed topics list on remote sites via Javascript API. (#8008)
This adds support for a `<d-topics-list>` tag you can embed in your site
that will be rendered as a list of discourse topics. Any attributes on
the tag will be passed as filters. For example:

`<d-topics-list discourse-url="URL" category="1234">` will filter to category 1234.

To use this feature, enable the `embed topics list` site setting. Then
on the site you want to embed, include the following javascript:

`<script
src="http://URL/javascripts/embed-topics.js"></script>`

Where `URL` is your discourse forum's URL.

Then include the `<d-topics-list discourse-url="URL">` tag in your HTML document and it will
be replaced with the list of topics.
2019-08-15 13:41:06 -04:00

48 lines
1.3 KiB
JavaScript

(function() {
function postMessageReceived(e) {
if (!e) {
return;
}
if (e.data && e.data.type === "discourse-resize" && e.data.embedId) {
var elem = document.getElementById(e.data.embedId);
if (elem) {
elem.height = e.data.height + "px";
}
}
}
window.addEventListener("message", postMessageReceived, false);
document.addEventListener("DOMContentLoaded", function(event) {
var lists = document.querySelectorAll("d-topics-list");
for (var i = 0; i < lists.length; i++) {
var list = lists[i];
var url = list.getAttribute("discourse-url");
if (!url || url.length === 0) {
console.error("Error, `data-discourse-url` was not found");
continue;
}
var frameId =
"de-" +
Math.random()
.toString(36)
.substr(2, 9);
var params = ["discourse_embed_id=" + frameId];
list.removeAttribute("discourse-url");
for (var j = 0; j < list.attributes.length; j++) {
var attr = list.attributes[j];
params.push(attr.name.replace("-", "_") + "=" + attr.value);
}
var iframe = document.createElement("iframe");
iframe.src = url + "/embed/topics?" + params.join("&");
iframe.id = frameId;
iframe.frameBorder = 0;
iframe.scrolling = "no";
list.appendChild(iframe);
}
});
})();