Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[5.3] Minimize language selector in installation process #44735

Draft
wants to merge 4 commits into
base: 5.3-dev
Choose a base branch
from
Draft

[5.3] Minimize language selector in installation process #44735

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b9d2c44
Convert language select to dialog
bembelimen Jan 6, 2025
4993b01
Add some generic fallbacks to browser language
bembelimen Jan 6, 2025
a79a85b
Translate selected language
bembelimen Jan 6, 2025
241e6b5
Merge branch '5.3-dev' into 5.3/language-install
bembelimen Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions installation/forms/setup.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
label="INSTL_SELECT_LANGUAGE_TITLE"
class="required"
default="en-GB"
labelclass="hidden"
/>
<field
name="site_name"
Expand Down
1 change: 1 addition & 0 deletions installation/language/en-GB/joomla.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ BUILD_MIN_PHP_ERROR_TEXT="Your host needs to use PHP version {{phpversion}} or n
BUILD_MIN_PHP_ERROR_URL_TEXT="Help me resolve this"

; Main Config
INSTL_SELECTED_INSTALL_LANGUAGE="Your current language is: %s"
INSTL_SELECT_INSTALL_LANG="Select Installation Language"
INSTL_SELECT_LANGUAGE_TITLE="Select Language"
INSTL_SETUP_LOGIN_DATA="Setup Login Data"
Expand Down
35 changes: 28 additions & 7 deletions installation/template/js/setup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,14 +164,35 @@ Joomla.checkDbCredentials = function() {
document.getElementById('jform_site_name').focus();
}

// Select language
var languageEl = document.getElementById('jform_language');
// Handle language chooser
const languageForm = document.getElementById('languageForm');

if (languageEl) {
languageEl.addEventListener('change', function(e) {
var form = document.getElementById('languageForm');
Joomla.setlanguage(form)
})
// It's a template(!!!)
const languageTemplate = document.getElementById('languageSelect');

if (languageForm && languageTemplate) {
// Check if we have the language field
const languageEl = languageTemplate.content.getElementById('jform_language');

if (languageEl) {
// We use event bubbling to handle the change event
languageForm.addEventListener('change', function (e) {

if (e.target.id === 'jform_language') {
e.target.closest('dialog').close();

// Set the language
Joomla.setlanguage(languageForm);
}
})

// Show language name
const currentLanguageName = document.getElementById('languageForm-current');

if (currentLanguageName) {
currentLanguageName.innerText = languageEl.options[languageEl.selectedIndex].text;
}
}
}

if (document.getElementById('step1')) {
Expand Down
21 changes: 19 additions & 2 deletions installation/template/scss/template.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -308,8 +308,25 @@ body {
}
}

.languageForm {
padding: 0 0 30px;
#languageForm {
joomla-dialog {
dialog {
&::backdrop {
background-color: rgba(0, 0, 0, .5);
}
}
.joomla-dialog-header {
display: flex;
align-items: center;
margin-bottom: .5rem;
h3 {
margin: 0 .5rem;
}
.buttons-holder {
margin-left: auto;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
margin-left: auto;
margin-inline-start: auto;

This ensures that code works as intended in RTL as well AS LTR.

RTL using margin-left
image

RTL using margin-inline-start
image

};
}
}

.form-select {
width: 100%;
Expand Down
40 changes: 25 additions & 15 deletions installation/tmpl/setup/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,13 @@
HTMLHelper::_('behavior.formvalidator');

/** @var \Joomla\CMS\Installation\View\Setup\HtmlView $this */

$wa = $this->getDocument()->getWebAssetManager();

$wa->useScript('joomla.dialog-autocreate');
?>

<div id="installer-view" data-page-name="setup">
<form action="index.php" method="post" id="languageForm" class="lang-select">
<fieldset class="j-install-step active">
<legend class="j-install-step-header">
<span class="icon-language" aria-hidden="true"></span> <?php echo Text::_('INSTL_SELECT_INSTALL_LANG'); ?>
</legend>
<div class="j-install-step-form">
<div class="mb-3">
<?php echo $this->form->renderField('language'); ?>
</div>
<input type="hidden" name="task" value="language.set">
<input type="hidden" name="format" value="json">
<?php echo HTMLHelper::_('form.token'); ?>
</div>
</fieldset>
</form>
<form action="index.php" method="post" id="adminForm" class="form-validate">
<fieldset id="installStep1" class="j-install-step active">
<legend class="j-install-step-header">
Expand Down Expand Up @@ -134,5 +123,26 @@
<input type="hidden" name="admin_password2" id="jform_admin_password2">
<?php echo HTMLHelper::_('form.token'); ?>
</form>
<form action="index.php" method="post" id="languageForm" class="lang-select">
<div class="d-flex align-items-center">
<span class="fas fa-globe me-1" aria-hidden="true"></span>
<?php
$link = HTMLHelper::_('link', '#languageSelect', '', ['id' => 'languageForm-current', 'data-joomla-dialog' => '###dialogattr###', 'class' => 'btn btn-link ps-1']);

// Dialog needs single quotes for attributes, so use single quotes...
$link = str_replace('"###dialogattr###', '\'{"textHeader": "' . Text::_('INSTL_SELECT_INSTALL_LANG') . '", "iconHeader":"icon-language"}\'', $link);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use propper json_encode and html value encoding.
Because when translation will contain unexpected symbols, then whole code will be broken.

htmlspecialchars(json_encode($data));

Also can do without str_replace:

$link = HTMLHelper::_('link', 
  '#languageSelect', '', 
  [
    'id' => 'languageForm-current', 
    'data-joomla-dialog' => htmlspecialchars(json_encode($data)), 
    'class' => 'btn btn-link ps-1']);


echo Text::sprintf('INSTL_SELECTED_INSTALL_LANGUAGE', $link);
?>
</div>
<template id="languageSelect">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can keep it as regular element (just make it hidden), if you want.
It going to be something like this:

<div hidden>
  <div id="languageSelect">
    <div class="mb-3"><?php echo $this->form->renderField('language'); ?></div>
  </div>
</div>

And set dialog option preferredParent to body for it:

'data-joomla-dialog' => htmlspecialchars(json_encode([
  'textHeader' => Text::_('INSTL_SELECT_INSTALL_LANG'),
  'iconHeader' => 'icon-language',
  'preferredParent' => 'body',
])),

<div class="mb-3">
<?php echo $this->form->renderField('language'); ?>
</div>
</template>
<input type="hidden" name="task" value="language.set">
<input type="hidden" name="format" value="json">
<?php echo HTMLHelper::_('form.token'); ?>
</form>

</div>
5 changes: 5 additions & 0 deletions libraries/src/Language/LanguageHelper.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@ public static function detectLanguage()
$browserLang = substr($browserLang, 0, strcspn($browserLang, ';'));
$primary_browserLang = substr($browserLang, 0, 2);

// Some browser return only "fr" or "de", so let's try to use it like "fr-fr" or "de-de"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

E.g. for English this would not work as there is no en-en.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i did some tests and the only time I could get firefox to return http_accept_header with ONLY the language part and not the region is when the complete version is xx-XX

so de-DE returns as de
but de-AT returns as de-AT

as there is no combination en-EN then firefox would always return the full language eg en-US

in short (and assuming my test is accurate) this code is correct and @richard67 concern while valid will never happen

if (\strlen($browserLang) == 2) {
$browserLang = $browserLang . '-' . $browserLang;
}

foreach ($systemLangs as $systemLang) {
// Take off 3 letters iso code languages as they can't match browsers' languages and default them to en
$Jinstall_lang = $systemLang->lang_code;
Expand Down