discourse/plugins/discourse-details/assets/javascripts/details.js

59 lines
1.5 KiB
JavaScript

(function(document, $) {
// cf. http://mths.be/details
var hasNativeSupport = (function(doc) {
var fake, el = doc.createElement("details");
// fail-fast
if (!("open" in el)) { return false; }
// figure out a root node
var root = doc.body || (function() {
var de = doc.documentElement;
fake = true;
return de.insertBefore(doc.createElement("body"), de.firstElementChild || de.firstChild);
})();
// setup test element
el.innerHTML = "<summary>a</summary>b";
el.style.display = "block";
// add test element to the root node
root.appendChild(el);
// can we open it?
var diff = el.offsetHeight;
el.open = true;
diff = diff !== el.offsetHeight;
// cleanup
root.removeChild(el);
if (fake) { root.parentNode.removeChild(root); }
// return the result
return diff;
})(document);
function toggleOpen($details) {
$details.toggleClass("open");
}
$.fn.details = function() {
if (hasNativeSupport) { return this; }
return this.each(function() {
var $details = $(this),
$firstSummary = $("summary", $details).first();
$firstSummary.prop("tabIndex", 0);
$firstSummary.on("keydown", function(event) {
if (event.keyCode === 32 /* SPACE */ || event.keyCode === 13 /* ENTER */) {
toggleOpen($details);
return false;
}
});
$firstSummary.on("click", function() {
$firstSummary.focus();
toggleOpen($details);
});
});
};
})(document, jQuery);