122 lines
3.3 KiB
JavaScript
122 lines
3.3 KiB
JavaScript
// eslint-disable-next-line no-shadow-restricted-names
|
|
(function (undefined) {
|
|
"use strict";
|
|
|
|
// [module Collapsible]
|
|
//
|
|
// [description]
|
|
// Set of library functions that provide a simple way to add
|
|
// collapsible functionality to elements.
|
|
this.Collapsible = {
|
|
setCollapsibles: setCollapsibles,
|
|
toggleFull: toggleFull,
|
|
toggleHint: toggleHint,
|
|
};
|
|
|
|
// eslint-disable-next-line no-useless-return
|
|
return;
|
|
|
|
// [function setCollapsibles]
|
|
//
|
|
// [description]
|
|
// Scan element's content for generic collapsible containers.
|
|
//
|
|
// [params]
|
|
// el: container
|
|
function setCollapsibles(el) {
|
|
var linkBottom, linkTop, short_custom;
|
|
|
|
linkTop = '<a href="#" class="full full-top">See full output</a>';
|
|
linkBottom = '<a href="#" class="full full-bottom">See full output</a>';
|
|
|
|
// Standard longform + shortfom pattern.
|
|
el.find(".longform").hide();
|
|
el.find(".shortform").append(linkTop, linkBottom); // xss-lint: disable=javascript-jquery-append
|
|
|
|
// Custom longform + shortform text pattern.
|
|
short_custom = el.find(".shortform-custom");
|
|
|
|
// Set up each one individually.
|
|
short_custom.each(function (index, elt) {
|
|
var close_text, open_text;
|
|
|
|
open_text = $(elt).data("open-text");
|
|
close_text = $(elt).data("close-text");
|
|
edx.HtmlUtils.append(
|
|
$(elt),
|
|
edx.HtmlUtils.joinHtml(
|
|
edx.HtmlUtils.HTML("<a href='#' class='full-custom'>"),
|
|
gettext(open_text),
|
|
edx.HtmlUtils.HTML("</a>"),
|
|
),
|
|
);
|
|
|
|
$(elt)
|
|
.find(".full-custom")
|
|
.click(function (event) {
|
|
Collapsible.toggleFull(event, open_text, close_text);
|
|
});
|
|
});
|
|
|
|
// Collapsible pattern.
|
|
el.find(".collapsible header + section").hide();
|
|
|
|
// Set up triggers.
|
|
el.find(".full").click(function (event) {
|
|
Collapsible.toggleFull(event, "See full output", "Hide output");
|
|
});
|
|
el.find(".collapsible header a").click(Collapsible.toggleHint);
|
|
}
|
|
|
|
// [function toggleFull]
|
|
//
|
|
// [description]
|
|
// Toggle the display of full text for a collapsible element.
|
|
//
|
|
// [params]
|
|
// event: jQuery event object associated with the event that
|
|
// triggered this callback function.
|
|
// open_text: text that should be displayed when the collapsible
|
|
// is open.
|
|
// close_text: text that should be displayed when the collapsible
|
|
// is closed.
|
|
function toggleFull(event, open_text, close_text) {
|
|
var $el, new_text, parent;
|
|
|
|
event.preventDefault();
|
|
|
|
parent = $(event.target).parent();
|
|
parent.siblings().slideToggle();
|
|
parent.parent().toggleClass("open");
|
|
|
|
if ($(event.target).text() === open_text) {
|
|
new_text = close_text;
|
|
} else {
|
|
new_text = open_text;
|
|
}
|
|
|
|
if ($(event.target).hasClass("full")) {
|
|
$el = parent.find(".full");
|
|
} else {
|
|
$el = $(event.target);
|
|
}
|
|
|
|
$el.text(new_text);
|
|
}
|
|
|
|
// [function toggleHint]
|
|
//
|
|
// [description]
|
|
// Toggle the collapsible open to show the hint.
|
|
//
|
|
// [params]
|
|
// event: jQuery event object associated with the event that
|
|
// triggered this callback function.
|
|
function toggleHint(event) {
|
|
event.preventDefault();
|
|
|
|
$(event.target).parent().siblings().slideToggle();
|
|
$(event.target).parent().parent().toggleClass("open");
|
|
}
|
|
}).call(this);
|