diff --git a/bin/Controls/LanguageSwitches/DropDown.js b/bin/Controls/LanguageSwitches/DropDown.js
index 07f0472a8ea6746fd7452b59c2d13321b6e14d6a..bf1acaeca4f7e125fb33a9973c93821f7879e121 100644
--- a/bin/Controls/LanguageSwitches/DropDown.js
+++ b/bin/Controls/LanguageSwitches/DropDown.js
@@ -47,8 +47,6 @@ define('package/quiqqer/bricks/bin/Controls/LanguageSwitches/DropDown', [
}
});
- this.$Elm.addClass('button');
-
this.$Elm.addEvents({
click: function (event) {
event.target.focus();
diff --git a/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.css b/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.css
index 4aacc6eb636c249ab705bffc3477bf551443200f..3ddda57d73d9d384ff67bd3c8c6a30c38c5cb0da 100644
--- a/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.css
+++ b/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.css
@@ -1,64 +1,64 @@
-
+/**********/
+/* button */
+/**********/
.quiqqer-control-languageswitch-dropdown {
cursor: pointer;
- float: left;
position: relative;
- z-index: 1;
+ display: flex;
+ padding-inline: 0.5em;
}
-.quiqqer-control-languageswitch-dropdown-lang {
- float: left;
- padding: 5px 10px;
+.quiqqer-control-languageswitch-dropdown-button.inactive {
+ cursor: default;
}
-.quiqqer-control-languageswitch-dropdown-lang-icon {
- margin-right: 5px;
+.quiqqer-control-languageswitch-dropdown-lang__abbreviation,
+.quiqqer-control-languageswitch-dropdown-dd-lang__abbreviation {
+ text-transform: uppercase;
}
-.quiqqer-control-languageswitch-dropdown__withArrow {
- padding: 0 30px 0 10px;
+.quiqqer-control-languageswitch-dropdown-icon {
+ margin-right: 0.25em;
}
.quiqqer-control-languageswitch-dropdown-arrow {
- position: absolute;
- right: 10px;
- top: 20px;
+ line-height: inherit;
+ margin-left: 0.25em;
}
-/** lang dropdown
- ===================================================== */
-
+/************/
+/* dropdown */
+/************/
.quiqqer-control-languageswitch-dropdown-dd {
background: #fff;
border: 1px solid #DDDDDD;
display: none;
top: 100%;
- left: 0;
position: absolute;
- width: 100%;
+ padding: 1rem;
+ min-width: 10rem;
+ max-width: min(15rem, 240px);
}
-.quiqqer-control-languageswitch-dropdown-dd:after {
- background-color: transparent;
- background-image: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.2), transparent);
- background-image: -webkit-gradient(linear, center top, left bottom, from(rgba(0, 0, 0, 0.2)), to(transparent));
- background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent);
- background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent);
- background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2), transparent);
- background-image: linear-gradient(top, rgba(0, 0, 0, 0.2), transparent);
- bottom: -8px;
- content: "";
- height: 8px;
+.quiqqer-control-languageswitch-dropdown-dd.left {
left: 0;
- position: absolute;
- width: 100%;
+}
+
+.quiqqer-control-languageswitch-dropdown-dd.right {
+ right: 0;
}
.quiqqer-control-languageswitch-dropdown-dd-entry {
- clear: both;
- float: left;
- line-height: 24px;
- padding: 10px;
- text-align: left;
- width: 100%;
+ display: block;
+ color: inherit;
+ padding-block: 0.25em;
+}
+
+.quiqqer-control-languageswitch-dropdown-dd-entry.inactive {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.quiqqer-control-languageswitch-dropdown-dd-icon {
+ margin-right: 1em;
}
diff --git a/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.html b/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.html
index c265b465edad93de62b62b6a1696891c10023109..132f53f4fd18a65a1c2465a3d332453b77b30bc1 100644
--- a/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.html
+++ b/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.html
@@ -4,40 +4,53 @@
{if count($langs) > 1}
<div class="quiqqer-control-languageswitch-dropdown quiqqer-control-languageswitch-dropdown__withArrow">
- <div class="quiqqer-control-languageswitch-dropdown-text">
- {if $this->getAttribute('showFlags')}
- <span class="quiqqer-control-languageswitch-dropdownicon">
- <img src="{$smarty.const.URL_BIN_DIR}16x16/flags/{$siteLang}.png"/>
+ <div class="quiqqer-control-languageswitch-dropdown-button {if !$showDropdown}inactive{/if}">
+ {if $buttonShowFlag}
+ <span class="quiqqer-control-languageswitch-dropdown-icon">
+ <img src="{$smarty.const.URL_BIN_DIR}16x16/flags/{$siteLang}.png" />
</span>
{/if}
- {if $this->getAttribute('showText')}
- <span class="quiqqer-control-languageswitch-dropdown-text">
+ {if $buttonText && $buttonText === 'abbreviation'}
+ <span class="quiqqer-control-languageswitch-dropdown-lang quiqqer-control-languageswitch-dropdown-lang__abbreviation">
{$siteLang}
</span>
+ {elseif $buttonText && $buttonText === 'text'}
+ <span class="quiqqer-control-languageswitch-dropdown-lang quiqqer-control-languageswitch-dropdown-lang__text">
+ {locale group='quiqqer/quiqqer' var='language.'|cat:{$siteLang}}
+ </span>
{/if}
- </div>
- <div class="quiqqer-control-languageswitch-dropdown-arrow fa fa-angle-down"></div>
+ {if $showDropdown && $showArrow}
+ <div class="quiqqer-control-languageswitch-dropdown-arrow fa fa-angle-down"></div>
+ {/if}
+ </div>
- <div class="quiqqer-control-languageswitch-dropdown-dd">
+ {if $showDropdown}
+ <div class="quiqqer-control-languageswitch-dropdown-dd {$dropdownPosition}">
{foreach from=$langs item=lang}
- {if $siteLang != $lang && $Site->existLang($lang)}
- <a class="quiqqer-control-languageswitch-dropdown-dd-entry" href="{url id=$Site->getId( $lang ) lang=$lang}">
- {if $this->getAttribute('showFlags')}
- <span class="quiqqer-control-languageswitch-dropdown-dd-icon">
- <img src="{$path}{$lang}.png"/>
- </span>
- {/if}
+ {strip}
+ {if $Site->existLang($lang)}
+ <a class="quiqqer-control-languageswitch-dropdown-dd-entry {if $siteLang == $lang}inactive{/if}"
+ href="{url id=$Site->getId( $lang ) lang=$lang}">
+ {if $dropdownShowFlag}
+ <img class="quiqqer-control-languageswitch-dropdown-dd-icon" src="{$path}{$lang}.png"/>
+ {/if}
- {if $this->getAttribute('showText')}
- <span class="quiqqer-control-languageswitch-dropdown-dd-text">
- {$lang}
- </span>
+ {if $dropdownText && $dropdownText === 'abbreviation'}
+ <span class="quiqqer-control-languageswitch-dropdown-dd-lang quiqqer-control-languageswitch-dropdown-dd-lang__abbreviation">
+ {$lang}
+ </span>
+ {elseif $dropdownText && $dropdownText === 'text'}
+ <span class="quiqqer-control-languageswitch-dropdown-dd-lang quiqqer-control-languageswitch-dropdown-dd-lang__text">
+ {locale group='quiqqer/quiqqer' var='language.'|cat:{$lang}}
+ </span>
+ {/if}
+ </a>
{/if}
- </a>
- {/if}
+ {/strip}
{/foreach}
</div>
+ {/if}
</div>
{/if}
diff --git a/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.php b/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.php
index 926edecd42155e794693dcbf19f5cf7b62c218b8..6d906826601d900b4ebbc520714206dab9990aba 100644
--- a/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.php
+++ b/src/QUI/Bricks/Controls/LanguageSwitches/DropDown.php
@@ -22,21 +22,27 @@ class DropDown extends QUI\Control
*
* @param array $attributes
*/
- public function __construct($attributes = array())
+ public function __construct($attributes = [])
{
// defaults values
- $this->setAttributes(array(
- 'Site' => false,
- 'showFlags' => true,
- 'showText' => true,
- 'data-qui' => 'package/quiqqer/bricks/bin/Controls/LanguageSwitches/DropDown',
- 'flagFolderPath' => URL_BIN_DIR . '16x16/flags/'
- ));
+ $this->setAttributes([
+ 'Site' => false,
+ // button: the visible part of the language switch.
+ 'buttonShowFlag' => true,
+ 'buttonText' => '', // false: disable text, `abbreviation`: i.e. DE, EN, `text`: i.e. German, English
+ // dropdown: the part that appears when the user clicks on the button
+ 'dropdownShowFlag' => true,
+ 'dropdownText' => 'text', // false: disable text, `abbreviation`: i.e. DE, EN, `text`: i.e. German, English
+ 'dropdownPosition' => 'right', // 'right', 'left'. stick to right or left bottom control corner
+ 'showArrow' => true, // enable arrow down
+ 'data-qui' => 'package/quiqqer/bricks/bin/Controls/LanguageSwitches/DropDown',
+ 'flagFolderPath' => URL_BIN_DIR.'16x16/flags/'
+ ]);
parent::__construct($attributes);
$this->addCSSFile(
- dirname(__FILE__) . '/DropDown.css'
+ dirname(__FILE__).'/DropDown.css'
);
$this->setAttribute('class', 'quiqqer-bricks-languageswitch-dropdown');
@@ -60,21 +66,43 @@ public function getBody()
if (count($Project->getLanguages()) < 2) {
QUI\System\Log::addNotice(
- 'The Project "' . $Project->getName() . '" has only one Language.' .
+ 'The Project "'.$Project->getName().'" has only one Language.'.
'The Control (\QUI\Bricks\Controls\LanguageSwitches) makes here no sense.'
);
return '';
}
- $Engine->assign(array(
- 'Site' => $Site,
- 'Project' => $Project,
- 'langs' => $Project->getLanguages(),
- 'this' => $this
- ));
+ $langs = $Project->getLanguages();
+ $counter = 0;
+ $showDropdown = true;
- return $Engine->fetch(dirname(__FILE__) . '/DropDown.html');
+ foreach ($langs as $lang) {
+ $a = $Site->existLang($lang);
+ if ($a) {
+ $counter++;
+ }
+ }
+
+ if ($counter <= 1) {
+ $showDropdown = false;
+ }
+
+ $Engine->assign([
+ 'Site' => $Site,
+ 'Project' => $Project,
+ 'langs' => $langs,
+ 'buttonShowFlag' => $this->getAttribute('buttonShowFlag'),
+ 'buttonText' => $this->getAttribute('buttonText'),
+ 'dropdownShowFlag' => $this->getAttribute('dropdownShowFlag'),
+ 'dropdownText' => $this->getAttribute('dropdownText'),
+ 'dropdownPosition' => $this->getAttribute('dropdownPosition'),
+ 'showArrow' => $this->getAttribute('showArrow'),
+ 'showDropdown' => $showDropdown,
+ 'this' => $this
+ ]);
+
+ return $Engine->fetch(dirname(__FILE__).'/DropDown.html');
}
/**