108 lines
3.0 KiB
JavaScript
108 lines
3.0 KiB
JavaScript
/**
|
|
* @file
|
|
* Adds a summary of a details element's contents to its summary element.
|
|
*/
|
|
(($, Drupal) => {
|
|
/**
|
|
* The DetailsSummarizedContent object represents a single details element.
|
|
*
|
|
* @constructor Drupal.DetailsSummarizedContent
|
|
*
|
|
* @param {HTMLElement} node
|
|
* A details element, the summary of which may have supplemental text.
|
|
* The supplemental text summarizes the details element's contents.
|
|
*/
|
|
function DetailsSummarizedContent(node) {
|
|
this.$node = $(node);
|
|
this.setupSummary();
|
|
}
|
|
|
|
$.extend(
|
|
DetailsSummarizedContent,
|
|
/** @lends Drupal.DetailsSummarizedContent */ {
|
|
/**
|
|
* Holds references to instantiated DetailsSummarizedContent objects.
|
|
*
|
|
* @type {Array.<Drupal.DetailsSummarizedContent>}
|
|
*/
|
|
instances: [],
|
|
},
|
|
);
|
|
|
|
$.extend(
|
|
DetailsSummarizedContent.prototype,
|
|
/** @lends Drupal.DetailsSummarizedContent# */ {
|
|
/**
|
|
* Initialize and setup summary events and markup.
|
|
*
|
|
* @fires event:summaryUpdated
|
|
*
|
|
* @listens event:summaryUpdated
|
|
*/
|
|
setupSummary() {
|
|
this.$detailsSummarizedContentWrapper = $(
|
|
Drupal.theme('detailsSummarizedContentWrapper'),
|
|
);
|
|
this.$node
|
|
.on('summaryUpdated', $.proxy(this.onSummaryUpdated, this))
|
|
.trigger('summaryUpdated')
|
|
.find('> summary')
|
|
.append(this.$detailsSummarizedContentWrapper);
|
|
},
|
|
|
|
/**
|
|
* Update summary.
|
|
*/
|
|
onSummaryUpdated() {
|
|
const text = $.trim(this.$node.drupalGetSummary());
|
|
this.$detailsSummarizedContentWrapper.html(
|
|
Drupal.theme('detailsSummarizedContentText', text),
|
|
);
|
|
},
|
|
},
|
|
);
|
|
|
|
/**
|
|
* Adds a summary of a details element's contents to its summary element.
|
|
*
|
|
* @type {Drupal~behavior}
|
|
*
|
|
* @prop {Drupal~behaviorAttach} attach
|
|
* Attaches behavior for the details element.
|
|
*/
|
|
Drupal.behaviors.detailsSummary = {
|
|
attach(context) {
|
|
const $detailsElements = $(context).find('details').once('details');
|
|
|
|
DetailsSummarizedContent.instances =
|
|
DetailsSummarizedContent.instances.concat(
|
|
$detailsElements
|
|
.map((index, details) => new DetailsSummarizedContent(details))
|
|
.get(),
|
|
);
|
|
},
|
|
};
|
|
|
|
Drupal.DetailsSummarizedContent = DetailsSummarizedContent;
|
|
|
|
/**
|
|
* The element containing a wrapper for summarized details content.
|
|
*
|
|
* @return {string}
|
|
* The markup for the element that will contain the summarized content.
|
|
*/
|
|
Drupal.theme.detailsSummarizedContentWrapper = () =>
|
|
`<span class="summary"></span>`;
|
|
|
|
/**
|
|
* Formats the summarized details content text.
|
|
*
|
|
* @param {string|null} [text]
|
|
* (optional) The summarized content text displayed in the summary.
|
|
* @return {string}
|
|
* The formatted summarized content text.
|
|
*/
|
|
Drupal.theme.detailsSummarizedContentText = (text) =>
|
|
text ? ` (${text})` : '';
|
|
})(jQuery, Drupal);
|