From d5bd7fad33e0edbe13124e6e09f96448f151be30 Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Tue, 6 Jun 2023 15:22:18 +0200
Subject: [PATCH] feat: DropDown langSwitch reworked quiqqer/package-bricks#143
---
bin/Controls/LanguageSwitches/DropDown.js | 2 -
.../Controls/LanguageSwitches/DropDown.css | 74 +++++++++----------
.../Controls/LanguageSwitches/DropDown.html | 57 ++++++++------
.../Controls/LanguageSwitches/DropDown.php | 62 +++++++++++-----
4 files changed, 117 insertions(+), 78 deletions(-)
diff --git a/bin/Controls/LanguageSwitches/DropDown.js b/bin/Controls/LanguageSwitches/DropDown.js
index 07f0472..bf1acae 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 4aacc6e..3ddda57 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 c265b46..132f53f 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 926edec..6d90682 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');
}
/**
--
GitLab