From 3d2f4082f6a5eeaa69e258de4cdea2ceab819f5a Mon Sep 17 00:00:00 2001 From: jyhein <124268211+jyhein@users.noreply.github.com> Date: Wed, 23 Oct 2024 19:16:55 +0300 Subject: [PATCH 1/2] Simultaneously Displaying Multilingual Metadata on the Article Landing Page --- pages/catalog/CatalogBookHandler.php | 28 +++ plugins/themes/default/DefaultThemePlugin.php | 24 +++ plugins/themes/default/js/main.js | 194 ++++++++++++++++++ plugins/themes/default/locale/en/locale.po | 9 + .../styles/objects/monograph_full.less | 110 ++++++++++ templates/frontend/components/authors.tpl | 78 +++++-- templates/frontend/objects/monograph_full.tpl | 93 +++++++-- 7 files changed, 501 insertions(+), 35 deletions(-) diff --git a/pages/catalog/CatalogBookHandler.php b/pages/catalog/CatalogBookHandler.php index 6fb7fac0f29..935265025fc 100755 --- a/pages/catalog/CatalogBookHandler.php +++ b/pages/catalog/CatalogBookHandler.php @@ -305,6 +305,12 @@ public function book($args, $request) $templateMgr->addHeader('canonical', ''); } + $templateMgr->assign('pubLocaleData', $this->getMultilingualMetadataOpts( + $publication, + $templateMgr->getTemplateVars('currentLocale'), + $templateMgr->getTemplateVars('activeTheme')->getOption('showMultilingualMetadata') ?: [], + )); + // Display if (!Hook::call('CatalogBookHandler::book', [&$request, &$submission, &$this->publication, &$this->chapter])) { $templateMgr->display('frontend/pages/book.tpl'); @@ -616,4 +622,26 @@ protected function getChaptersFirstPublishedDate(Submission $submission, Chapter return null; } + + /** + * Multilingual publication metadata for template: + * showMultilingualMetadataOpts - Show metadata in other languages: title (+ subtitle), keywords, abstract, etc. + */ + protected function getMultilingualMetadataOpts(Publication $publication, string $currentUILocale, array $showMultilingualMetadataOpts): array + { + $langNames = collect($publication->getLanguageNames()) + ->sortKeys(); + $langs = $langNames->keys(); + return [ + 'opts' => array_flip($showMultilingualMetadataOpts), + 'localeNames' => $langNames, + 'langTags' => $langNames->map(fn ($_, $l) => preg_replace(['/@.+$/', '/_/'], ['', '-'], $l))->toArray() /* remove @ and text after */, + 'localeOrder' => collect($publication->getLocalePrecedence()) + ->intersect($langs) /* remove locales not in publication's languages */ + ->concat($langs) + ->unique() + ->values() + ->toArray(), + ]; + } } diff --git a/plugins/themes/default/DefaultThemePlugin.php b/plugins/themes/default/DefaultThemePlugin.php index 63937bf6d35..b289ce9f07f 100644 --- a/plugins/themes/default/DefaultThemePlugin.php +++ b/plugins/themes/default/DefaultThemePlugin.php @@ -126,6 +126,30 @@ public function init() 'default' => 'none', ]); + $this->addOption('showMultilingualMetadata', 'FieldOptions', [ + 'label' => __('plugins.themes.default.option.metadata.label'), + 'description' => __('plugins.themes.default.option.metadata.description'), + 'options' => [ + [ + 'value' => 'title', + 'label' => __('submission.title'), + ], + [ + 'value' => 'keywords', + 'label' => __('common.keywords'), + ], + [ + 'value' => 'abstract', + 'label' => __('submission.synopsis'), + ], + [ + 'value' => 'author', + 'label' => __('default.groups.name.author'), + ], + ], + 'default' => [], + ]); + // Load primary stylesheet $this->addStyle('stylesheet', 'styles/index.less'); diff --git a/plugins/themes/default/js/main.js b/plugins/themes/default/js/main.js index 3ba07ac5d14..a4539204268 100644 --- a/plugins/themes/default/js/main.js +++ b/plugins/themes/default/js/main.js @@ -100,3 +100,197 @@ }); })(jQuery); + +/** + * Create language buttons to show multilingual metadata + * [data-pkp-locales]: Publication's locales in order + * [data-pkp-switcher-text]: Texts for the switchers to control + * [data-pkp-switcher-target]: Switchers' containers + */ +(() => { + function createButtonSwitcher(textsObj, originalLocaleOrder, metadataFieldName, selectedLocale) { + // Get all locales for the switcher from the texts + const textsElsLocales = textsObj.els.reduce((locales, textEls) => { + textEls.forEach((el) => { + locales[el.getAttribute('data-pkp-locale')] = el.getAttribute('data-pkp-locale-name'); + }); + return locales; + }, {}); + + // Create containers + const spanContainer = document.createElement('span'); + [ + ['class', `switcher-buttons-${metadataFieldName}`], + ].forEach((attr) => spanContainer.setAttribute(...attr)); + + const spanButtons = document.createElement('span'); + const spanButtonsId = `switcher-buttons-${metadataFieldName}`; + [ + ['id', spanButtonsId], + ].forEach((attr) => spanButtons.setAttribute(...attr)); + + // Create, sort to alphabetical order, and append buttons + originalLocaleOrder + .map((elLocale) => { + if (!textsElsLocales[elLocale]) { + return null; + } + if (!selectedLocale.value) { + selectedLocale.value = elLocale; + } + + const isSelectedLocale = elLocale === selectedLocale.value; + const button = document.createElement('button'); + [ + ['data-pkp-locale', elLocale], + ['data-pkp-switcher-button', metadataFieldName], + ['class', `pkpBadge pkpBadge--button collapse-button${isSelectedLocale ? ' selected-button show-button' : ''}`], + ['type', 'button'], + ['aria-controls', isSelectedLocale ? spanButtonsId : textsObj.ids.join(' ')], + ...isSelectedLocale + ? [ + ['aria-expanded', false], + ] + : [], + ].forEach((attr) => button.setAttribute(...attr)); + button.textContent = textsElsLocales[elLocale]; + + return button; + }) + .filter((btn) => btn) + .sort((a, b) => a.getAttribute('data-pkp-locale').localeCompare(b.getAttribute('data-pkp-locale'))) + .forEach((btn) => spanButtons.appendChild(btn)); + + // If only one button, set it disabled + if (spanButtons.children.length === 1) { + spanButtons.children[0].disabled = true; + } + + spanContainer.appendChild(spanButtons); + + return spanContainer; + } + + /** + * Show or hide switcher's target texts + * If selected locale doesn't match any, all texts are hidden + */ + function showText(selectedLocale, textsEls) { + textsEls.forEach((textsEl) => { + textsEl.forEach((textEl) => { + const elLocale = textEl.getAttribute('data-pkp-locale'); + if (elLocale === selectedLocale.value) { + textEl.classList.add('show-text'); + } else { + textEl.classList.remove('show-text'); + } + }); + }); + } + + /** + * Change/update buttons' aria-attributes + */ + function switchButtonAria(btnTarget, buttons) { + let btnTargetOldAriaControls = btnTarget.getAttribute('aria-controls'); + let btnPrevSelectedLangAriaControls = null; + buttons.forEach((btn) => { + // Previously selected langauge button + if (btn.getAttribute('aria-expanded')) { + btnPrevSelectedLangAriaControls = btn.getAttribute('aria-controls'); + btn.removeAttribute('aria-expanded'); + btn.setAttribute('aria-controls', btnTargetOldAriaControls); + } + }); + btnTarget.setAttribute('aria-expanded', true); + btnTarget.setAttribute('aria-controls', btnPrevSelectedLangAriaControls); + } + + function setButtonSwitcher(textsObj, switcherTargetEl, metadataFieldName, originalLocaleOrder) { + // Currently selected language for buttons and texts + const selectedLocale = {value: null}; + const buttonSwitcherEl = createButtonSwitcher(textsObj, originalLocaleOrder, metadataFieldName, selectedLocale); + + // Sync buttons and shown texts + showText(selectedLocale, textsObj.els); + + const buttons = buttonSwitcherEl.querySelectorAll('button'); + + // Add listeners if more than one button + if (buttons.length > 1) { + // Selected language shows/hides other switcher buttons, and otherwise switches language and shows text + buttonSwitcherEl.addEventListener('click', (evt) => { + const btnTarget = evt.target; + if (btnTarget.type === 'button') { + if (btnTarget.getAttribute('data-pkp-locale') === selectedLocale.value) { + buttons.forEach((btn) => { + if (btn.getAttribute('data-pkp-locale') !== selectedLocale.value) { + btn.classList.toggle('show-button'); + } + }); + btnTarget.setAttribute('aria-expanded', true); + } else { + selectedLocale.value = btnTarget.getAttribute('data-pkp-locale'); + switchButtonAria(btnTarget, buttons); + buttons.forEach((btn) => { + if (btn.getAttribute('data-pkp-locale') === selectedLocale.value) { + btn.classList.add('selected-button'); + } else { + btn.classList.remove('selected-button'); + } + }); + showText(selectedLocale, textsObj.els); + } + } + }); + // Hide switcher (except selected language) buttons when it loses focus + buttonSwitcherEl.addEventListener('focusout', (evt) => { + if (!evt.relatedTarget || evt.relatedTarget.getAttribute('data-pkp-switcher-button') !== metadataFieldName) { + buttons.forEach((btn) => { + if (btn.getAttribute('data-pkp-locale') !== selectedLocale.value) { + btn.classList.remove('show-button'); + } else { + btn.setAttribute('aria-expanded', false); + } + }); + } + }); + } + + // Append and show switcher + switcherTargetEl.append(buttonSwitcherEl); + switcherTargetEl.classList.remove('collapse-switcher'); + } + + /** + * Get all multilingual texts and ids for the switchers + */ + function getSwitcherTexts() { + const textsObj = {}; + document.querySelectorAll('[data-pkp-switcher-text]').forEach((textsEl) => { + const key = textsEl.getAttribute('data-pkp-switcher-text'); + if (!textsObj[key]) { + textsObj[key] = {ids: [], els: []}; + } + textsObj[key].ids.push(textsEl.id); + textsObj[key].els.push([...textsEl.querySelectorAll('[data-pkp-locale]')]); + }); + return textsObj; + } + + (() => { + const originalLocaleOrder = document.querySelector('[data-pkp-locales]')?.getAttribute('data-pkp-locales').split(','); + const switcherTargetEls = document.querySelectorAll('[data-pkp-switcher-target]'); + if (!originalLocaleOrder || !switcherTargetEls.length) { + return; + } + const switcherTextsObj = getSwitcherTexts(); + // Get target elements for switchers and create them + switcherTargetEls.forEach((switcherTargetEl) => { + const metadataFieldName = switcherTargetEl.getAttribute('data-pkp-switcher-target'); + if (switcherTextsObj[metadataFieldName]) { + setButtonSwitcher(switcherTextsObj[metadataFieldName], switcherTargetEl, metadataFieldName, originalLocaleOrder); + } + }); + })(); +})(); diff --git a/plugins/themes/default/locale/en/locale.po b/plugins/themes/default/locale/en/locale.po index 92ba3303c69..1df51d2a137 100644 --- a/plugins/themes/default/locale/en/locale.po +++ b/plugins/themes/default/locale/en/locale.po @@ -101,3 +101,12 @@ msgstr "Next slide" msgid "plugins.themes.default.prevSlide" msgstr "Previous slide" + +msgid "plugins.themes.default.option.metadata.label" +msgstr "Show book metadata on the book landing page" + +msgid "plugins.themes.default.option.metadata.description" +msgstr "Select the book metadata to show in other languages." + +msgid "plugins.themes.default.ariaDescription.languageSwitcher" +msgstr "Selects a language to show the metadata in." diff --git a/plugins/themes/default/styles/objects/monograph_full.less b/plugins/themes/default/styles/objects/monograph_full.less index 057bc84e016..b979bbb5c77 100644 --- a/plugins/themes/default/styles/objects/monograph_full.less +++ b/plugins/themes/default/styles/objects/monograph_full.less @@ -236,6 +236,116 @@ } } + .authors .name, + .abstract h2, + .keywords h2 { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 0.5rem; + } + + [data-pkp-switcher-target], + [class^=switcher-buttons], + [class^=switcher-buttons] > span { + display: inline-flex; + } + + [data-pkp-switcher-target=title] { + & + .row { + margin-top: calc(@triple / 2); + } + } + + [data-pkp-locale] p:first-of-type { + margin-top: 0; + } + + [class^=switcher-buttons] { + & > span { + flex-wrap: wrap; + align-content: flex-start; + gap: 0.2rem; + } + } + + .pkpBadge { + display: inline-flex; + padding: 0.25em 1em; + font-size: @font-tiny; + font-weight: @normal; + line-height: 1.5em; + border: 1px solid @bg-border-color-light; + border-radius: 1.2em; + color: @text; + } + + .pkpBadge--button { + background: inherit; + text-decoration: none; + cursor: pointer; + + &:hover { + border-color: @text; + outline: 0; + } + &:disabled, + &:disabled:hover { + color: #fff; + background: @bg-dark; + border-color: @bg-dark; + cursor: not-allowed; + } + } + + .collapse-switcher { + display: none; + } + + .collapse-button { + &:not(.show-button) { + display: none; + } + } + + .collapse-text { + &:not(.show-text) { + display: none; + } + } + + .selected-button { + font-weight: @bold; + } + + .show-button, + .show-text { + display: inline-flex; + animation: fadeIn 0.7s ease-in-out; + + @keyframes fadeIn { + 0% { + display: none; + opacity: 0; + } + + 1% { + display: inline-flex; + opacity: 0; + } + + 100% { + opacity: 1; + } + } + } + + #publication-authors { + & .show-text { + display: inline; + } + } + @media(min-width: @screen-phone) { .entry_details { diff --git a/templates/frontend/components/authors.tpl b/templates/frontend/components/authors.tpl index 51b9dcff8ef..244235d05b0 100644 --- a/templates/frontend/components/authors.tpl +++ b/templates/frontend/components/authors.tpl @@ -29,17 +29,36 @@ {if $authors|@count < 5} {foreach from=$authors item=author}
-
+
{if $identifyAsEditors} {translate key="submission.editorName" editorName=$author->getFullName()|escape} {else} {$author->getFullName()|escape} {/if} + {if isset($pubLocaleData.opts.author)} + + {/if}
- {if $author->getLocalizedAffiliation()} -
- {$author->getLocalizedAffiliation()|escape} -
+ {if $author->getData('affiliation')} + + + {$authorAffiliations=$author->getData('affiliation')} + {$first=true} + {foreach from=$pubLocaleData.localeOrder item=$localeKey} + {if !isset($authorAffiliations[$localeKey])}{continue}{/if} + + {$authorAffiliations[$localeKey]|escape} + + {if !isset($pubLocaleData.opts.author)}{break}{/if} + {$first=false} + {/foreach} + + {/if} {if $author->getOrcid()} @@ -53,24 +72,41 @@ {* Show long author lists on one line *} {else} - {foreach name="authors" from=$authors item=author} - {* strip removes excess white-space which creates gaps between separators *} - {strip} - {if $author->getLocalizedAffiliation()} - {if $identifyAsEditors} - {capture assign="authorName"}{translate key="submission.editorName" editorName=$author->getFullName()|escape}{/capture} + + {$first=true} + {foreach from=$pubLocaleData.localeOrder item=$localeKey} + + {foreach from=$authors item=author} + {* strip removes excess white-space which creates gaps between separators *} + {strip} + {$authorAffiliations=$author->getData('affiliation')} + {if isset($authorAffiliations[$localeKey])} + {if $identifyAsEditors} + {capture assign="authorName"}{translate key="submission.editorName" editorName=$author->getFullName()|escape}{/capture} + {else} + {capture assign="authorName"}{$author->getFullName()|escape}{/capture} + {/if} + {capture assign="authorAffiliation"}{$authorAffiliations[$localeKey]|escape}{/capture} + {translate key="submission.authorWithAffiliation" name=$authorName affiliation=$authorAffiliation} {else} - {capture assign="authorName"}{$author->getFullName()|escape}{/capture} + {$author->getFullName()|escape} {/if} - {capture assign="authorAffiliation"}{$author->getLocalizedAffiliation()|escape}{/capture} - {translate key="submission.authorWithAffiliation" name=$authorName affiliation=$authorAffiliation} - {else} - {$author->getFullName()|escape} - {/if} - {if !$smarty.foreach.authors.last} - {translate key="submission.authorListSeparator"} - {/if} - {/strip} + {if !$author@last} + {translate key="submission.authorListSeparator"} + {/if} + {/strip} + {/foreach} + + {if !isset($pubLocaleData.opts.author)}{break}{/if} + {$first=false} {/foreach} + {if isset($pubLocaleData.opts.author)} + + {/if} + {/if}
diff --git a/templates/frontend/objects/monograph_full.tpl b/templates/frontend/objects/monograph_full.tpl index d7ebb5933b6..cdc34ef2fa7 100644 --- a/templates/frontend/objects/monograph_full.tpl +++ b/templates/frontend/objects/monograph_full.tpl @@ -71,8 +71,12 @@ * @uses $licenseUrl string The URL which provides license information. * @uses $ccLicenseBadge string An HTML string containing a CC license image and * text. Only appears when license URL matches a known CC license. + * @uses $pubLocaleData Array of e.g. publication's locales and metadata field names to show in multiple languages *} -
+
{* Indicate if this is only a preview *} {if $publication->getData('status') !== \PKP\submission\PKPSubmission::STATUS_PUBLISHED} @@ -93,9 +97,30 @@
{/if} -

- {$publication->getLocalizedFullTitle(null, 'html')|strip_unsafe_html} +

+ {$publicationTitles=$publication->getFullTitles('html')} + {$first=true} + {foreach from=$pubLocaleData.localeOrder item=$localeKey} + {if !isset($publicationTitles[$localeKey])}{continue}{/if} + + {$publicationTitles[$localeKey]|strip_unsafe_html} + + {if !isset($pubLocaleData.opts.title)}{break}{/if} + {$first=false} + {/foreach}

+ {if isset($pubLocaleData.opts.title)} + + {/if}
@@ -120,28 +145,68 @@ {/if} {* Keywords *} - {if !empty($publication->getLocalizedData('keywords'))} + {if $publication->getData('keywords')}

{capture assign=translatedKeywords}{translate key="common.keywords"}{/capture} {translate key="semicolon" label=$translatedKeywords} + {if isset($pubLocaleData.opts.keywords)} + + {/if}

- - {foreach name="keywords" from=$publication->getLocalizedData('keywords') item=keyword} - {$keyword|escape}{if !$smarty.foreach.keywords.last}, {/if} + + {$publicationKeywords=$publication->getData('keywords')} + {$first=true} + {foreach from=$pubLocaleData.localeOrder item=$localeKey} + {if !isset($publicationKeywords[$localeKey])}{continue}{/if} + + {foreach from=$publicationKeywords[$localeKey] item="keyword"} + {$keyword|escape}{if !$keyword@last}{translate key="common.commaListSeparator"}{/if} + {/foreach} + + {if !isset($pubLocaleData.opts.keywords)}{break}{/if} + {$first=false} {/foreach} - +
{/if} - {* Abstract *} -
+ {* Abstract submission.synopsis *} +

- {translate key="submission.synopsis"} + {translate key="common.abstract"} + {if isset($pubLocaleData.opts.abstract)} + + {/if}

-
- {$publication->getLocalizedData('abstract')|strip_unsafe_html} -
+ {$publicationAbstracts=$publication->getData('abstract')} + {$first=true} + {foreach from=$pubLocaleData.localeOrder item=$localeKey} + {if !isset($publicationAbstracts[$localeKey])}{continue}{/if} + + {$publicationAbstracts[$localeKey]|strip_unsafe_html} + + {if !isset($pubLocaleData.opts.abstract)}{break}{/if} + {$first=false} + {/foreach}
{* Chapters *} From 9a677e59394d3c62f2875995b2e73d4bd8a80243 Mon Sep 17 00:00:00 2001 From: jyhein <124268211+jyhein@users.noreply.github.com> Date: Wed, 23 Oct 2024 19:17:19 +0300 Subject: [PATCH 2/2] Submodule update ##jyhein/main## --- lib/pkp | 2 +- lib/ui-library | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/pkp b/lib/pkp index f28675c1152..270bb11cc06 160000 --- a/lib/pkp +++ b/lib/pkp @@ -1 +1 @@ -Subproject commit f28675c1152856bf8c289d5f98ae580bfc59829c +Subproject commit 270bb11cc060202ef27a29094e59f2e08c5db8cc diff --git a/lib/ui-library b/lib/ui-library index 5b972e8d678..10589754806 160000 --- a/lib/ui-library +++ b/lib/ui-library @@ -1 +1 @@ -Subproject commit 5b972e8d6788333543426246bea37ba2c907085b +Subproject commit 105897548065472f9aec5c9d6dd1854e7865f688