diff --git a/language/.en.json b/language/.en.json index c0c45db3..f099e66b 100644 --- a/language/.en.json +++ b/language/.en.json @@ -26,6 +26,9 @@ { "label": "Display as button" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/af.json b/language/af.json index 52e16b06..96368a16 100644 --- a/language/af.json +++ b/language/af.json @@ -26,6 +26,9 @@ { "label": "Vertoon as knoppie" }, + { + "label": "Optional button label" + }, { "label": "Knoppie grote", "options": [ diff --git a/language/ar.json b/language/ar.json index 046e9fd0..52116c11 100644 --- a/language/ar.json +++ b/language/ar.json @@ -26,6 +26,9 @@ { "label": "عرض كزر" }, + { + "label": "Optional button label" + }, { "label": "حجم الزر", "options": [ diff --git a/language/bg.json b/language/bg.json index ccfd34b3..cb67ba97 100644 --- a/language/bg.json +++ b/language/bg.json @@ -26,6 +26,9 @@ { "label": "Показване като бутон" }, + { + "label": "Optional button label" + }, { "label": "Размер на бутона", "options": [ diff --git a/language/bs.json b/language/bs.json index 8c0e2e6f..9392dd92 100644 --- a/language/bs.json +++ b/language/bs.json @@ -26,6 +26,9 @@ { "label": "Prikaži kao dugme" }, + { + "label": "Optional button label" + }, { "label": "Veličina dugmeta", "options": [ diff --git a/language/ca.json b/language/ca.json index 51d98d0a..83b4c52b 100644 --- a/language/ca.json +++ b/language/ca.json @@ -26,6 +26,9 @@ { "label": "Mostra com a botó" }, + { + "label": "Optional button label" + }, { "label": "Mida del botó", "options": [ diff --git a/language/cs.json b/language/cs.json index 0828ff29..858fbeb0 100644 --- a/language/cs.json +++ b/language/cs.json @@ -26,6 +26,9 @@ { "label": "Zobrazit jako tlačítko" }, + { + "label": "Optional button label" + }, { "label": "Velikost tlačítka", "options": [ diff --git a/language/da.json b/language/da.json index 4d02330c..c6b9b378 100644 --- a/language/da.json +++ b/language/da.json @@ -26,6 +26,9 @@ { "label": "Vis som knap" }, + { + "label": "Optional button label" + }, { "label": "Størrelse knap", "options": [ diff --git a/language/de.json b/language/de.json index dcbaf5cc..0c11a030 100644 --- a/language/de.json +++ b/language/de.json @@ -26,6 +26,9 @@ { "label": "Als Button anzeigen" }, + { + "label": "Optional button label" + }, { "label": "Buttongröße", "options": [ diff --git a/language/el.json b/language/el.json index cc40367e..4d92a7a4 100644 --- a/language/el.json +++ b/language/el.json @@ -26,6 +26,9 @@ { "label": "Κουμπί \"εμφάνιση ως\"" }, + { + "label": "Optional button label" + }, { "label": "Μέγεθος κουμπιού", "options": [ diff --git a/language/es-mx.json b/language/es-mx.json index 16c06cc0..33fc346a 100644 --- a/language/es-mx.json +++ b/language/es-mx.json @@ -26,6 +26,9 @@ { "label": "Mostrar como botón" }, + { + "label": "Optional button label" + }, { "label": "Tamaño del botón", "options": [ diff --git a/language/es.json b/language/es.json index 1168ea58..073307a4 100644 --- a/language/es.json +++ b/language/es.json @@ -26,6 +26,9 @@ { "label": "Mostrar como botón" }, + { + "label": "Optional button label" + }, { "label": "Tamaño del botón", "options": [ diff --git a/language/et.json b/language/et.json index 29e0a5e0..ace138ff 100644 --- a/language/et.json +++ b/language/et.json @@ -26,6 +26,9 @@ { "label": "Näita nupuna" }, + { + "label": "Optional button label" + }, { "label": "Nupu suurus", "options": [ diff --git a/language/eu.json b/language/eu.json index a319fb7f..192cc1ff 100644 --- a/language/eu.json +++ b/language/eu.json @@ -26,6 +26,9 @@ { "label": "Bistaratu botoi moduan" }, + { + "label": "Optional button label" + }, { "label": "Botoiaren tamaina", "options": [ diff --git a/language/fa.json b/language/fa.json index 2d71ee24..b9d6de0a 100644 --- a/language/fa.json +++ b/language/fa.json @@ -26,6 +26,9 @@ { "label": "نمایش به عنوان دکمه" }, + { + "label": "Optional button label" + }, { "label": "اندازه دکمه", "options": [ diff --git a/language/fi.json b/language/fi.json index 7bf72f72..f2e39df4 100644 --- a/language/fi.json +++ b/language/fi.json @@ -26,6 +26,9 @@ { "label": "Näytä painikkeena" }, + { + "label": "Optional button label" + }, { "label": "Painikkeen koko", "options": [ diff --git a/language/fr.json b/language/fr.json index 7fcfbb2d..cbfc44d4 100644 --- a/language/fr.json +++ b/language/fr.json @@ -26,6 +26,9 @@ { "label": "Afficher sous forme de bouton" }, + { + "label": "Optional button label" + }, { "label": "La taille de bouton", "options": [ diff --git a/language/gl.json b/language/gl.json index f86db85b..c73548c4 100644 --- a/language/gl.json +++ b/language/gl.json @@ -26,6 +26,9 @@ { "label": "Amosar como botón" }, + { + "label": "Optional button label" + }, { "label": "Tamaño do botón", "options": [ diff --git a/language/he.json b/language/he.json index 00bac105..bbbfbd7e 100644 --- a/language/he.json +++ b/language/he.json @@ -26,6 +26,9 @@ { "label": "מוצג ככפתור" }, + { + "label": "Optional button label" + }, { "label": "גודל כפתור", "options": [ diff --git a/language/id.json b/language/id.json index 44d76f91..0b727bf3 100644 --- a/language/id.json +++ b/language/id.json @@ -26,6 +26,9 @@ { "label": "Tampilkan sebagai tombol" }, + { + "label": "Optional button label" + }, { "label": "Ukuran tombol", "options": [ diff --git a/language/it.json b/language/it.json index 44f75f4e..6c9b5591 100644 --- a/language/it.json +++ b/language/it.json @@ -26,6 +26,9 @@ { "label": "Mostra come pulsante" }, + { + "label": "Optional button label" + }, { "label": "Dimensione del pulsante", "options": [ diff --git a/language/ja.json b/language/ja.json index 20b48578..b24ac736 100644 --- a/language/ja.json +++ b/language/ja.json @@ -26,6 +26,9 @@ { "label": "ボタンとして表示" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/ka.json b/language/ka.json index 0ddac1a8..203c92d7 100644 --- a/language/ka.json +++ b/language/ka.json @@ -26,6 +26,9 @@ { "label": "ღილაკის სახით ჩვენება" }, + { + "label": "Optional button label" + }, { "label": "ღილაკის ზომა", "options": [ diff --git a/language/km.json b/language/km.json index 850bcad1..3e87a56a 100644 --- a/language/km.json +++ b/language/km.json @@ -26,6 +26,9 @@ { "label": "បង្ហាញជាប៊ូតុង" }, + { + "label": "Optional button label" + }, { "label": "ទំហំប៊ូតុង", "options": [ diff --git a/language/ko.json b/language/ko.json index e1defe8d..6ba215a9 100644 --- a/language/ko.json +++ b/language/ko.json @@ -26,6 +26,9 @@ { "label": "버튼 보이기" }, + { + "label": "Optional button label" + }, { "label": "버튼 크기", "options": [ diff --git a/language/lt.json b/language/lt.json index 62aff129..f4b107dc 100644 --- a/language/lt.json +++ b/language/lt.json @@ -26,6 +26,9 @@ { "label": "Rodyti kaip mygtuką" }, + { + "label": "Optional button label" + }, { "label": "Mygtuko dydis", "options": [ diff --git a/language/lv.json b/language/lv.json index 3352329a..21591d70 100644 --- a/language/lv.json +++ b/language/lv.json @@ -26,6 +26,9 @@ { "label": "Parādīt kā pogu" }, + { + "label": "Optional button label" + }, { "label": "Pogas izmērs", "options": [ diff --git a/language/mn.json b/language/mn.json index 4e2a0c57..79ffa946 100644 --- a/language/mn.json +++ b/language/mn.json @@ -26,6 +26,9 @@ { "label": "Товчлуур хэлбэрээр харуулах" }, + { + "label": "Optional button label" + }, { "label": "Товчлуурын хэмжээ", "options": [ diff --git a/language/nb.json b/language/nb.json index 5c764a34..2e083e83 100644 --- a/language/nb.json +++ b/language/nb.json @@ -26,6 +26,9 @@ { "label": "Vis som knapp" }, + { + "label": "Optional button label" + }, { "label": "Knappstørrelse", "options": [ diff --git a/language/nl.json b/language/nl.json index 7197991d..9fd2d9b0 100644 --- a/language/nl.json +++ b/language/nl.json @@ -26,6 +26,9 @@ { "label": "Tonen als knop" }, + { + "label": "Optional button label" + }, { "label": "Knopgrootte", "options": [ diff --git a/language/nn.json b/language/nn.json index 2951b1d5..db0f9502 100644 --- a/language/nn.json +++ b/language/nn.json @@ -26,6 +26,9 @@ { "label": "Vis som knapp" }, + { + "label": "Optional button label" + }, { "label": "Knappstorleik", "options": [ diff --git a/language/pl.json b/language/pl.json index cf292e0c..30b791e1 100644 --- a/language/pl.json +++ b/language/pl.json @@ -26,6 +26,9 @@ { "label": "Wyświetlaj jako przycisk" }, + { + "label": "Optional button label" + }, { "label": "Wielkość przycisku", "options": [ diff --git a/language/pt-br.json b/language/pt-br.json index 190b9708..1eddd17d 100644 --- a/language/pt-br.json +++ b/language/pt-br.json @@ -26,6 +26,9 @@ { "label": "Mostrar como botão" }, + { + "label": "Optional button label" + }, { "label": "Tamanho do botão", "options": [ diff --git a/language/pt.json b/language/pt.json index b018b796..b5a376b6 100644 --- a/language/pt.json +++ b/language/pt.json @@ -26,6 +26,9 @@ { "label": "Mostrar como botão" }, + { + "label": "Optional button label" + }, { "label": "Tamanho do botão", "options": [ diff --git a/language/ru.json b/language/ru.json index 37c1cc34..eb87bcb1 100644 --- a/language/ru.json +++ b/language/ru.json @@ -26,6 +26,9 @@ { "label": "Показать как кнопку" }, + { + "label": "Optional button label" + }, { "label": "Размер кнопки", "options": [ diff --git a/language/sl.json b/language/sl.json index a7651a6d..289a60e9 100644 --- a/language/sl.json +++ b/language/sl.json @@ -26,6 +26,9 @@ { "label": "Prikaži kot gumb" }, + { + "label": "Optional button label" + }, { "label": "Velikost gumba", "options": [ diff --git a/language/sma.json b/language/sma.json index c0c45db3..f099e66b 100644 --- a/language/sma.json +++ b/language/sma.json @@ -26,6 +26,9 @@ { "label": "Display as button" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/sme.json b/language/sme.json index c0c45db3..f099e66b 100644 --- a/language/sme.json +++ b/language/sme.json @@ -26,6 +26,9 @@ { "label": "Display as button" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/smj.json b/language/smj.json index c0c45db3..f099e66b 100644 --- a/language/smj.json +++ b/language/smj.json @@ -26,6 +26,9 @@ { "label": "Display as button" }, + { + "label": "Optional button label" + }, { "label": "Button size", "options": [ diff --git a/language/sr.json b/language/sr.json index d959a109..ae5e592e 100644 --- a/language/sr.json +++ b/language/sr.json @@ -26,6 +26,9 @@ { "label": "Приказ као дугме" }, + { + "label": "Optional button label" + }, { "label": "Величина дугмета", "options": [ diff --git a/language/sv.json b/language/sv.json index b07c1c30..ac88ac8c 100644 --- a/language/sv.json +++ b/language/sv.json @@ -26,6 +26,9 @@ { "label": "Visa som knapp" }, + { + "label": "Optional button label" + }, { "label": "Knappstorlek", "options": [ diff --git a/language/sw.json b/language/sw.json index d8536cf4..9023dad8 100644 --- a/language/sw.json +++ b/language/sw.json @@ -26,6 +26,9 @@ { "label": "Onyesha kama kitufe" }, + { + "label": "Optional button label" + }, { "label": "Ukubwa wa kitufe", "options": [ diff --git a/language/tr.json b/language/tr.json index 3bb027af..eb260f54 100644 --- a/language/tr.json +++ b/language/tr.json @@ -26,6 +26,9 @@ { "label": "Buton olarak göster" }, + { + "label": "Optional button label" + }, { "label": "Buton boyutu", "options": [ diff --git a/language/uk.json b/language/uk.json index ca98ecdc..1c9ff6db 100644 --- a/language/uk.json +++ b/language/uk.json @@ -26,6 +26,9 @@ { "label": "Показати як кнопку" }, + { + "label": "Optional button label" + }, { "label": "Розмір кнопки", "options": [ diff --git a/language/zh-cn.json b/language/zh-cn.json index 96b21903..a3b39eb5 100644 --- a/language/zh-cn.json +++ b/language/zh-cn.json @@ -26,6 +26,9 @@ { "label": "显示为按钮" }, + { + "label": "Optional button label" + }, { "label": "按钮大小", "options": [ diff --git a/language/zh-hans.json b/language/zh-hans.json index 6a90a7cb..4bba120d 100644 --- a/language/zh-hans.json +++ b/language/zh-hans.json @@ -26,6 +26,9 @@ { "label": "以按钮样式显示" }, + { + "label": "Optional button label" + }, { "label": "按钮尺寸", "options": [ diff --git a/language/zh-tw.json b/language/zh-tw.json index e35f1713..04cd14d0 100644 --- a/language/zh-tw.json +++ b/language/zh-tw.json @@ -26,6 +26,9 @@ { "label": "顯示為按鈕" }, + { + "label": "Optional button label" + }, { "label": "按鈕尺寸", "options": [ diff --git a/language/zh.json b/language/zh.json index dbb64b1a..7ff05edb 100644 --- a/language/zh.json +++ b/language/zh.json @@ -26,6 +26,9 @@ { "label": "以按鈕樣式顯示" }, + { + "label": "Optional button label" + }, { "label": "按鈕尺寸", "options": [ diff --git a/semantics.json b/semantics.json index 6d258cac..d1726472 100644 --- a/semantics.json +++ b/semantics.json @@ -128,6 +128,13 @@ "default": false, "optional": true }, + { + "name": "buttonLabel", + "type": "text", + "label": "Optional button label", + "importance": "medium", + "optional": true + }, { "name": "buttonSize", "type": "select", diff --git a/src/scripts/cp.js b/src/scripts/cp.js index e11fa474..80bda700 100644 --- a/src/scripts/cp.js +++ b/src/scripts/cp.js @@ -952,8 +952,29 @@ CoursePresentation.prototype.attachElement = function (element, instance, $slide $elementContainer.toggleClass('h5p-transparent', isTransparent); if (displayAsButton) { - const $button = this.createInteractionButton(element, instance); + const [$button, labelElement] = + this.createInteractionButton(element, instance); + + // Label in logically before button to allow sibling selector in CSS + if (labelElement) { + $elementContainer.get(0).append(labelElement); + } $button.appendTo($elementContainer); + + if (labelElement) { + // Position label left/right depending on available space + window.requestAnimationFrame(() => { + const labelRect = labelElement.getBoundingClientRect(); + const containerOffset = this.$container.get(0).offsetLeft; + + if ( + -containerOffset + labelRect.x + labelRect.width > + this.$container.get(0).offsetWidth + ) { + labelElement.classList.add('left'); + } + }); + } } else { const hasLibrary = element.action && element.action.library; @@ -1081,55 +1102,96 @@ CoursePresentation.prototype.restoreTabIndexes = function () { * * @param {Object} element * @param {Object} instance - * - * @return {jQuery} + * @returns {[jQuery, HTMLElement|undefined]} Button element and label if set. */ -CoursePresentation.prototype.createInteractionButton = function (element, instance) { - let label = element.action.metadata ? element.action.metadata.title : ''; - if (label === '' || label === undefined) { - label = element.action?.params?.contentName || element.action?.params?.title || element.action.library.split(' ')[0].split('.')[1]; - } - const libTypePmz = this.getLibraryTypePmz(element.action.library); +CoursePresentation.prototype.createInteractionButton = + function (element, instance) { + const isButtonLabelSet = typeof element.buttonLabel === 'string' && + element.buttonLabel !== ''; + + const labelText = element.buttonLabel ?? + element.action.metadata?.title ?? + ( + element.action?.params?.contentName || + element.action?.params?.title || + element.action?.library.split(' ')[0].split('.')[1] || + '' + ); + + // Optional label for button + let labelElement; + if (isButtonLabelSet) { + labelElement = document.createElement('div'); + labelElement.classList.add('h5p-element-button-label'); + if (element.buttonSize === 'small') { + labelElement.classList.add('small'); + } - /** - * Returns a function that will set [aria-expanded="false"] on the $btn element - * - * @param {jQuery} $btn - * @return {Function} - */ - const setAriaExpandedFalse = ($btn) => () => $btn.attr('aria-expanded', 'false'); - - const $button = $('
', { - role: 'button', - tabindex: 0, - 'aria-label': label, - 'aria-haspopup': 'dialog', - 'aria-expanded': false, - 'class': `h5p-element-button h5p-element-button-${element.buttonSize} ${libTypePmz}-button` - }); + const labelElementText = document.createElement('div'); + labelElementText.classList.add('h5p-element-button-label-text'); + labelElementText.setAttribute('aria-hidden', true); + labelElementText.innerText = stripHTML(labelText); + labelElement.append(labelElementText); + } - const $buttonElement = $('
'); - instance.attach($buttonElement); + const libTypePmz = this.getLibraryTypePmz(element.action.library); - const parentPosition = libTypePmz === 'h5p-advancedtext' ? { - x: element.x, - y: element.y - } : null; - addClickAndKeyboardListeners($button, () => { - $button.attr('aria-expanded', 'true'); - this.showInteractionPopup(instance, $button, $buttonElement, libTypePmz, setAriaExpandedFalse($button), parentPosition); - }); + // Button + const button = document.createElement('div'); + button.classList.add('h5p-element-button'); + button.classList.add(`h5p-element-button-${element.buttonSize}`); + button.classList.add(`${libTypePmz}-button`); + button.setAttribute('role', 'button'); + button.setAttribute('tabindex', 0); + button.setAttribute('aria-popup', true); + button.setAttribute('aria-expanded', false); + button.setAttribute('aria-label', labelText); - if (element.action !== undefined && element.action.library.substr(0, 20) === 'H5P.InteractiveVideo') { - instance.on('controls', function () { - if (instance.controls.$fullscreen) { - instance.controls.$fullscreen.remove(); - } + const buttonElement = document.createElement('div'); + buttonElement.classList.add('h5p-element-button-element'); + + instance.attach(H5P.jQuery(buttonElement)); + + const parentPosition = libTypePmz === 'h5p-advancedtext' ? + { + x: element.x, + y: element.y + } : + null; + + const handleButtonInteraction = () => { + button.setAttribute('aria-expanded', 'true'); + this.showInteractionPopup( + instance, + H5P.jQuery(button), + H5P.jQuery(buttonElement), + libTypePmz, + () => { + button.setAttribute('aria-expanded', 'false'); + }, + parentPosition + ); + }; + + addClickAndKeyboardListeners(H5P.jQuery(button), () => { + handleButtonInteraction(); }); - } - return $button; -}; + // Allow to show interaction popup on label click, too + labelElement?.addEventListener('click', () => { + handleButtonInteraction(); + }); + + if (element.action?.library.split(' ')[0] === 'H5P.InteractiveVideo') { + instance.on('controls', () => { + if (instance.controls.$fullscreen) { + instance.controls.$fullscreen.remove(); + } + }); + } + + return [H5P.jQuery(button), labelElement]; + }; /** * Shows the interaction popup on button press diff --git a/src/styles/cp.css b/src/styles/cp.css index 7a2525ea..5fb93cd4 100644 --- a/src/styles/cp.css +++ b/src/styles/cp.css @@ -446,12 +446,14 @@ backface-visibility: hidden; } -.h5p-course-presentation .h5p-element-button:hover { +.h5p-course-presentation .h5p-element-button:hover, +.h5p-course-presentation .h5p-element-button-label:hover ~ .h5p-element-button { box-shadow: 0 0.3em 0.25em 0 rgba(0, 0, 0, 0.5); background: #003fdf; } -.h5p-course-presentation .h5p-element-button:focus { +.h5p-course-presentation .h5p-element-button:focus, +.h5p-course-presentation .h5p-element-button-label:focus ~ .h5p-element-button { outline: none; top: -0.167em; left: -0.167em; @@ -473,6 +475,40 @@ font-size: 0.87em; } +.h5p-course-presentation .h5p-element-button-label { + background: rgba(0,0,0,.8); + border-radius: 0 1em 1em 0; + color: #fff; + cursor: pointer; + height: 2.25em; + left: 1.25em; + padding: 0 0.75em 0 1.5em; + position: absolute; + white-space: nowrap; +} + +.h5p-course-presentation .h5p-element-button-label.left { + border-radius: 1em 0 0 1em; + left: auto; + padding: 0 1.5em 0 0.75em; + right: 1.25em; +} + +.h5p-course-presentation .h5p-element-button-label.small { + height: 1.5em; + line-height: 1.5em; +} + +.h5p-course-presentation .h5p-element-button-label.small:not(.left) { + left: 1em; + padding: 0 0.75em 0 1em; +} + +.h5p-course-presentation .h5p-element-button-label.small.left { + padding: 0 1em 0 0.75em; + right: 1em; +} + .h5p-course-presentation .h5p-exportabletextarea-button, .h5p-course-presentation .h5p-blanks-button, .h5p-course-presentation .h5p-multichoice-button,