Skip to content
Snippets Groups Projects
Commit 581afdc9 authored by olivier.brunau's avatar olivier.brunau
Browse files

Issue #3450657 by mably, joachim desarmenien: WCAG compliancy and translation improvements

parent 43cea417
No related branches found
No related tags found
No related merge requests found
......@@ -2,73 +2,86 @@
/**
* @file
* Js for Glossary Content .
* Js for Glossary Content.
*/
(function ($, Drupal, once) {
'use strict';
(($, Drupal, once) => {
Drupal.behaviors.GlossaryContent = {
attach: function (context) {
attach(context) {
const tLoading = Drupal.t('Loading...');
if (context === document) {
$('body').append('<div id="glossary-dialog" class="hidden" title="Term definition"><div id="glossary-dialog-inner"><div class="ajax-progress ajax-progress-throbber"><div class="ajax-throbber">' + Drupal.t('Loading...') + '</div></div></div></div>');
// Allow dialog title translation.
const tTermDefinition = Drupal.t('Term definition');
$('body').append(
`<div id="glossary-dialog" class="hidden" title="${tTermDefinition}"><div id="glossary-dialog-inner"><div class="ajax-progress ajax-progress-throbber"><div class="ajax-throbber">${tLoading}</div></div></div></div>`,
);
}
var $dialog = $(once('glossary-dialog', '#glossary-dialog'));
$(once('glossaryListenner', '.glos-term')).on('click', function (event) {
event.preventDefault();
var termId = $(this).data('gterm');
var termText = $(this).text();
$dialog.dialog({
autoOpen: true,
resizable: false,
modal: true,
close: function () {
$(this).find('#glossary-dialog-inner').html('<div class="ajax-progress ajax-progress-throbber"><div class="ajax-throbber">' + Drupal.t('Loading...') + '</div></div>');
const $dialog = $(once('glossary-dialog', '#glossary-dialog'));
$(once('glossaryListener', '.glos-term')).on(
// WCAG: handle keypress event.
'click keypress',
function onTermActivation(event) {
event.preventDefault();
const termId = $(this).data('gterm');
const termText = $(this).text();
const dialog = $dialog.dialog({
autoOpen: true,
resizable: false,
modal: true,
// Allow default close label translation.
closeText: Drupal.t('Close'),
close() {
$(this)
.find('#glossary-dialog-inner')
.html(
`<div class="ajax-progress ajax-progress-throbber"><div class="ajax-throbber">${tLoading}</div></div>`,
);
},
buttons: [
{
// Allow close button label translation.
text: Drupal.t('Close'),
click(evt) {
evt.preventDefault();
dialog.dialog('close');
},
// WCAG: handle keypress event.
keypress(evt) {
// Needed to avoid the click event being fired next.
evt.preventDefault();
dialog.dialog('close');
},
},
],
});
// Call Ajax here.
const url = Drupal.url(`glossary-get-term-by-id/${termId}`);
$.ajax({
url,
dataType: 'json',
type: 'GET',
success(data) {
const $dialogInner = $dialog.find('#glossary-dialog-inner');
$dialogInner.html('');
if (data.name && data.description) {
$dialogInner.append(`<b>${data.name}</b><br/>`);
$dialogInner.append(data.description);
$dialogInner.removeClass('hidden');
const showEvent = new CustomEvent('glossary_modal_show', {
detail: data,
});
document.dispatchEvent(showEvent);
} else {
// Allow "no results" message translation.
const tNoResultsFound = Drupal.t('No results found for @term', {
'@term': termText,
});
$dialogInner.html(tNoResultsFound);
}
},
});
},
buttons: {
Close: function () {
$(this).dialog('close');
// $(this).dialog('destroy').remove();
$(this).find('#glossary-dialog-inner').html('<div class="ajax-progress ajax-progress-throbber"><div class="ajax-throbber">' + Drupal.t('Loading...') + '</div></div>');
}
}
});
// Call Ajax here.
var url = Drupal.url('glossary-get-term-by-id/' + termId);
$.ajax({
url: url,
dataType: "json",
type: "GET",
success: function (data) {
var $dialogInner = $dialog.find('#glossary-dialog-inner');
$dialogInner.html('');
if (data.name && data.description) {
$dialogInner.append('<b>' + data.name + '</b><br/>');
$dialogInner.append(data.description);
$dialogInner.removeClass('hidden');
var event = new CustomEvent('glossary_modal_show', {detail: data});
document.dispatchEvent(event);
/*
HOOK for Modal if using "hook_term_glossary_alter_result"
use to append custom data to the modal.
document.addEventListener('glossary_modal_show', function (e) {
console.log(e);
//alert(detail.name);
$('#glossary-dialog-inner').once().append('<h2>test</h2>');
}, false);
*/
}
else {
$dialogInner.html('No results found for' + termText);
}
}
});
});
}
);
},
};
})(jQuery, Drupal, once);
......@@ -96,13 +96,13 @@ class TermGlossaryManager {
$offset = strpos($new_value, $match);
$length = strlen($match);
$new_value = substr_replace($new_value, '<span class="glos-term" data-gterm="' . $term_id . '">'.$match.'</span>', $offset, $length);
$new_value = substr_replace($new_value, '<span role="button" tabindex="0" class="glos-term" data-gterm="' . $term_id . '">'.$match.'</span>', $offset, $length);
static::$seen_terms[] = mb_strtolower($match);
break;
}
$new_value = str_replace($match, '<span class="glos-term" data-gterm="' . $term_id . '">'.$match.'</span>', $new_value);
$new_value = str_replace($match, '<span role="button" tabindex="0" class="glos-term" data-gterm="' . $term_id . '">'.$match.'</span>', $new_value);
}
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment