https://krisis.eu/plugins/generic/citationStyleLanguage/js/articleCitation.js?v=3.4.0.9

1/**
2 * @file plugins/generic/citationStyleLanguage/js/articleCitation.js
3 *
4 * Copyright (c) 2014-2020 Simon Fraser University
5 * Copyright (c) 2000-2020 John Willinsky
6 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
7 *
8 * @brief Fetch and display an article citation on the article's page
9 *
10 * This script is designed to be compatible with any themes that follow these
11 * steps. First, you need a target element that will display the citation in
12 * the requested format. This should have an id of `citationOutput`:
13 *
14 * <div id="citationOutput"></div>
15 *
16 * You can create a link to retrieve a citation and display it in this div by
17 * assigning the link a `data-load-citation` attribute:
18 *
19 * <a href="{url ...}" data-load-citation="true">View citation in ABNT format</a>
20 *
21 * Downloadable citations should leave the `data-load-citation` attribute out
22 * to allow normal browser download handling.
23 *
24 * To make use of the dropdown display of citation formats, you must include
25 * a button to expand the dropdown with the following attributes:
26 *
27 *	<button aria-controls="cslCitationFormats" aria-expanded="false" data-csl-dropdown="true">
28 *		More Citation Formats
29 *	</button>
30 *
31 * And the dropdown should have the id `cslCitationFormats`:
32 *
33 * <div id="cslCitationFormats" aria-hidden="true">
34 *   // additional citation formats
35 * </div>
36 *
37 * This script requires jQuery. The format you specify should match
38 * a format provided by a CitationFormat plugin.
39 */
40
41document.addEventListener('DOMContentLoaded', () => {
42	// Get the citation elements
43	const citationOutput = document.getElementById('citationOutput');
44	const citationFormatLinks = document.querySelectorAll('[data-load-citation]');
45	const citationFormatBtn = document.querySelector(
46		'[aria-controls="cslCitationFormats"]'
47	);
48	const citationFormatDropdown = document.getElementById('cslCitationFormats');
49
50	// Check if the required elements exist
51	if (!citationOutput || citationFormatLinks.length === 0) {
52		return;
53	}
54
55	// Fetch new citations and update diplayed citation
56	citationFormatLinks.forEach((link) => {
57		link.addEventListener('click', (e) => {
58			const jsonHref = link.dataset.jsonHref;
59
60			if (!jsonHref) {
61				return true;
62			}
63
64			e.preventDefault();
65			citationOutput.classList.remove('fade-in');
66			citationOutput.style.opacity = '0.5';
67
68			fetch(jsonHref)
69				.then((response) => response.json())
70				.then((r) => {
71					citationOutput.innerHTML = r.content;
72					citationOutput.classList.add('fade-in');
73					citationOutput.style.opacity = '1';
74				})
75				.catch(() => {
76					citationOutput.style.opacity = '1';
77				});
78		});
79	});
80
81	// Check if the required elements for the dropdown exist
82	if (!citationFormatBtn || !citationFormatDropdown) {
83		return;
84	}
85
86	// Function to handle dropdown display for more citation formats
87	citationFormatBtn.addEventListener('click', (e) => {
88		e.preventDefault();
89		e.stopPropagation();
90
91		const state = citationFormatBtn.getAttribute('aria-expanded') === 'true';
92
93		citationFormatBtn.setAttribute('aria-expanded', !state);
94		citationFormatDropdown.setAttribute('aria-hidden', state);
95	});
96
97	// Close the dropdown when any link or button inside is clicked
98	citationFormatDropdown.querySelectorAll('a, button').forEach((elem) => {
99		elem.addEventListener('click', () => {
100			citationFormatBtn.setAttribute('aria-expanded', false);
101			citationFormatDropdown.setAttribute('aria-hidden', true);
102		});
103	});
104});