Skip to content
Code-Schnipsel Gruppen Projekte
Commit 9911e990 erstellt von Michael Danielczok's avatar Michael Danielczok
Dateien durchsuchen

feat: FloatedNav has mobile toggle button (can be switched on by setting)

Übergeordneter b5b0077b
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Controls/FloatedNav.js
+ 96
− 64
Zeige Datei @ 9911e990
......@@ -21,19 +21,22 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
Binds: [
'$onImport',
'$setMobileBtnStatusToOpen',
'$setMobileBtnStatusToClose',
'$setToggleBtnStatusToOpen',
'$setToggleBtnStatusToClose',
'$toggleNav',
'$resize'
],
options: {
pos : 'right', // right, left
initanimation : false,
animationtype : 'showAll', // showAll (show entire control), showOneByOne (show each entry one by one)
animationeasing : 'easeOutExpo', // see easing names on https://easings.net/
animationduration: 500, // number
showopenbutton : 'mobile' // always / mobile / hide
pos : 'right', // right, left
initanimation : false,
animationtype : 'showAll', // showAll (show entire control), showOneByOne (show each entry one by one)
animationeasing : 'easeOutExpo', // see easing names on https://easings.net/
animationduration : 500, // number
showtogglebutton : 'mobile', // always / mobile / hide
forceverticalcenter: false // if true, container will be centered per JS.
// Pure css way (top: 50%; transform: translateY: (-50%);)
// causes jumping effect on mobile, when url bar disappears
},
initialize: function (options) {
......@@ -43,16 +46,18 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
onImport: this.$onImport
});
this.$Control = null;
this.$Nav = null;
this.$MobileBtn = null;
this.showOpenBtn = 'mobile';
this.isBtnOpen = false;
this.$entries = null;
this.$pos = 'right';
this.$animationType = 'showAll';
this.$animationEasing = 'easeOutExpo';
this.isMobile = QUI.getWindowSize().x < 768;
this.$Control = null;
this.$Nav = null;
this.$ToggleBtn = null;
this.showToggleBtn = 'mobile';
this.isBtnOpen = false;
this.$entries = null;
this.$pos = 'right';
this.$animationType = 'showAll';
this.$animationEasing = 'easeOutExpo';
this.isMobile = QUI.getWindowSize().x < 768;
this.forceVerticalCenter = false;
this.winHeight = window.innerHeight;
QUI.addEvent('resize', this.$resize);
},
......@@ -64,13 +69,13 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
this.$Control = this.getElm();
this.$Nav = this.getElm().querySelector('nav');
this.$entries = this.$Nav.querySelectorAll('.quiqqer-floatedNav-entry');
this.showOpenBtn = this.getAttribute('showopenbutton');
this.showToggleBtn = this.getAttribute('showtogglebutton');
this.$initAnimation = this.getAttribute('initanimation');
this.$animationType = this.getAttribute('animationtype');
this.$animationEasing = this.getAttribute('animationeasing');
if (this.$Control.get('data-qui-options-showopenbutton')) {
this.showOpenBtn = this.$Control.get('data-qui-options-showopenbutton');
if (this.$Control.get('data-qui-options-showtogglebutton')) {
this.showToggleBtn = this.$Control.get('data-qui-options-showtogglebutton');
}
if (this.$Control.get('data-qui-options-initanimation')) {
......@@ -85,7 +90,12 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
this.$animationEasing = this.$getEasingName(this.$Control.get('data-qui-options-animationeasing'));
}
this.$initMobileBtn();
if (this.$Control.get('data-qui-options-forceverticalcenter')) {
this.forceVerticalCenter = true;
this.$centerVertical();
}
this.$initToggleBtn();
if (this.$initAnimation) {
this.$initStartAnimation();
......@@ -94,11 +104,12 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
}
},
$initMobileBtn: function () {
this.$MobileBtn = this.$Control.querySelector('.quiqqer-floatedNav-showMobileBtn');
$initToggleBtn: function () {
this.$ToggleBtn = this.$Control.querySelector('.quiqqer-floatedNav-toggleBtn');
if (this.$MobileBtn) {
this.$MobileBtn.addEventListener('click', this.$toggleNav)
if (this.$ToggleBtn) {
this.$Nav.set('data-qui-open', 0);
this.$ToggleBtn.addEventListener('click', this.$toggleNav)
}
},
......@@ -122,8 +133,8 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
});
})
if (this.$MobileBtn) {
this.$MobileBtn.setStyles({
if (this.$ToggleBtn) {
this.$ToggleBtn.setStyles({
visibility: 'visible',
transform : 'translateX(60px)'
});
......@@ -132,8 +143,8 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
}
if (this.isMobile) {
if (this.$MobileBtn) {
this.$showOneByOne(this.$MobileBtn, 750);
if (this.$ToggleBtn) {
this.$showOneByOne(this.$ToggleBtn, 750);
this.$Nav.set('data-qui-open', 0);
} else {
this.$showOneByOne(this.$entries, 750);
......@@ -149,9 +160,9 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
case 'showOneByOne':
let entries = Array.from(this.$entries);
if (this.$MobileBtn && this.showOpenBtn === 'always') {
this.$setMobileBtnStatusToClose();
entries.unshift(this.$MobileBtn);
if (this.$ToggleBtn && this.showOpenBtn === 'always') {
this.$setToggleBtnStatusToClose();
entries.unshift(this.$ToggleBtn);
}
this.$showOneByOne(entries, 750);
......@@ -162,17 +173,20 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
},
$initWithoutStartAnimation: function () {
if (!this.$MobileBtn) {
return;
if (!this.$ToggleBtn) {
return;
}
if (this.isMobile) {
switch (this.$animationType) {
case 'showAll':
this.$Nav.setStyles({
/*this.$Nav.setStyles({
visibility: 'visible',
right : -this.$Nav.getSize().x - 50
})
})*/
break;
case 'showOneByOne':
......@@ -184,24 +198,26 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
})
this.$Nav.set('data-qui-open', 0);
this.$setMobileBtnStatusToOpen();
this.$setToggleBtnStatusToOpen();
break;
}
} else {
this.$Nav.set('data-qui-open', 1);
this.$setMobileBtnStatusToClose();
this.$setToggleBtnStatusToClose();
}
},
$toggleNav: function () {
if (!this.$MobileBtn) {
if (!this.$ToggleBtn) {
return;
}
if (this.$Nav.get('data-qui-open') === '1') {
this.$Nav.set('data-qui-open', 0);
this.$animateMobileBtnToClose();
this.$animateToggleBtnToClose();
switch (this.$animationType) {
case 'showAll':
......@@ -216,8 +232,9 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
return;
}
this.$Nav.set('data-qui-open', 1);
this.$animateMobileBtnToOpen();
this.$animateToggleBtnToOpen();
switch (this.$animationType) {
case 'showAll':
......@@ -272,12 +289,13 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
* @param delay {number}
*/
$show: function (Elm, delay = 0) {
Elm.style.transform = 'translateX(100px)';
anime({
targets : Elm,
targets : Elm,
translateX: 0,
delay : delay,
duration: 500,
easing : this.$animationEasing
delay : delay,
duration : 500,
easing : this.$animationEasing
});
},
......@@ -289,55 +307,55 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
*/
$hide: function (Elm, delay = 0) {
anime({
targets : Elm,
targets : Elm,
translateX: 100,
delay : delay,
duration: 500,
easing : this.$animationEasing
delay : delay,
duration : 500,
easing : this.$animationEasing
});
},
$setMobileBtnStatusToOpen: function () {
if (!this.$MobileBtn) {
$setToggleBtnStatusToOpen: function () {
if (!this.$ToggleBtn) {
return;
}
this.$MobileBtn.querySelector('.fa').setStyle('transform', 'rotate(0)');
this.$ToggleBtn.querySelector('.fa').setStyle('transform', 'rotate(0)');
},
$setMobileBtnStatusToClose: function () {
if (!this.$MobileBtn) {
$setToggleBtnStatusToClose: function () {
if (!this.$ToggleBtn) {
return;
}
this.$MobileBtn.querySelector('.fa').setStyle('transform', 'rotate(180deg)');
this.$ToggleBtn.querySelector('.fa').setStyle('transform', 'rotate(180deg)');
},
$animateMobileBtnToOpen: function () {
if (!this.$MobileBtn) {
$animateToggleBtnToOpen: function () {
if (!this.$ToggleBtn) {
return;
}
this.isBtnOpen = true;
anime({
targets: this.$MobileBtn.querySelector('.fa'),
targets: this.$ToggleBtn.querySelector('.fa'),
rotate : 180,
})
},
$animateMobileBtnToClose: function () {
if (!this.$MobileBtn) {
$animateToggleBtnToClose: function () {
if (!this.$ToggleBtn) {
return;
}
this.isBtnOpen = false;
anime({
targets : this.$MobileBtn.querySelector('.fa'),
targets : this.$ToggleBtn.querySelector('.fa'),
rotate : 360,
complete: () => {
this.$MobileBtn.querySelector('.fa').setStyle('transform', 'rotate(0)');
this.$ToggleBtn.querySelector('.fa').setStyle('transform', 'rotate(0)');
}
})
},
......@@ -350,7 +368,7 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
}
if (!this.isBtnOpen && this.showOpenBtn === 'mobile') {
this.$showOneByOne(this.$MobileBtn);
this.$showOneByOne(this.$ToggleBtn);
}
return;
......@@ -362,9 +380,23 @@ define('package/quiqqer/menu/bin/Controls/FloatedNav', [
}
if (this.isBtnOpen && this.showOpenBtn === 'mobile') {
this.$hideOneByOne(this.$MobileBtn);
this.$hideOneByOne(this.$ToggleBtn);
}
}
// recalculate vertical position
if (this.forceVerticalCenter && this.winHeight !== window.innerHeight) {
this.winHeight = window.innerHeight;
this.$centerVertical();
}
},
/**
* Calculate vertical position of the control
*/
$centerVertical: function () {
this.$Control.style.top = (window.innerHeight / 2) - (this.$Control.offsetHeight / 2) + 'px';
this.$Control.style.transform = 'initial';
},
/**
......
src/QUI/Menu/Controls/FloatedNav.css
+ 40
− 32
Zeige Datei @ 9911e990
......@@ -2,21 +2,21 @@
/* variables */
/*************/
.quiqqer-floatedNavControl__size-medium {
--quiqqer-floatedNav-spacing: 0.75rem;
--quiqqer-floatedNav-fontSize: 1.75rem;
--quiqqer-floatedNav-size: 3rem;
--quiqqer-floatedNav-spacing: 0.75rem;
}
.quiqqer-floatedNavControl__size-small {
--quiqqer-floatedNav-spacing: 0.5rem;
--quiqqer-floatedNav-fontSize: 1.25rem;
--quiqqer-floatedNav-size: 2rem;
--quiqqer-floatedNav-spacing: 0.5rem;
}
.quiqqer-floatedNavControl__size-large {
--quiqqer-floatedNav-spacing: 1rem;
--quiqqer-floatedNav-fontSize: 2rem;
--quiqqer-floatedNav-size: 3.5rem;
--quiqqer-floatedNav-spacing: 1rem;
}
/***********/
......@@ -29,10 +29,6 @@
z-index: 10;
}
.quiqqer-floatedNav {
/*position: absolute;*/
}
.quiqqer-floatedNavControl__posX-right {
right: 0;
}
......@@ -41,12 +37,18 @@
left: 0;
}
@media screen and (max-width: 767px) {
.quiqqer-floatedNavControl__toggleButton-mobile.quiqqer-floatedNavControl__posX-right .quiqqer-floatedNav {
transform: translateX(100px);
}
}
.quiqqer-floatedNav-entry {
/*transition: 0.2s all ease;*/
}
.quiqqer-floatedNav-entry-inner,
.quiqqer-floatedNav-showMobileBtn {
.quiqqer-floatedNav-toggleBtn {
background: var(--qui-color-main, #333);
border: var(--qui-border-width, 2px) solid var(--qui-color-main, #333);
color: var(--qui-color-main-contrast, #fff);
......@@ -54,28 +56,28 @@
display: block;
font-size: var(--quiqqer-floatedNav-fontSize);
line-height: calc(var(--quiqqer-floatedNav-size) - (2 * var(--qui-border-width, 2px)));
overflow: hidden;
text-align: center;
width: var(--quiqqer-floatedNav-size);
overflow: hidden;
}
/* lang switch */
.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag {
font-size: calc(0.75 * var(--quiqqer-floatedNav-fontSize));
width: var(--quiqqer-floatedNav-size);
display: flex;
flex-direction: column;
overflow: hidden;
float: none;
font-size: calc(0.75 * var(--quiqqer-floatedNav-fontSize));
overflow: hidden;
width: var(--quiqqer-floatedNav-size);
}
.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry {
background: var(--qui-color-main, #333);
color: var(--qui-color-main-contrast, #fff);
font-weight: bold;
line-height: calc(0.5 * var(--quiqqer-floatedNav-size));
padding: 0;
text-align: center;
color: var(--qui-color-main-contrast, #fff);
font-weight: bold;
text-transform: uppercase;
}
......@@ -88,30 +90,31 @@
}
.quiqqer-floatedNav .quiqqer-bricks-languageswitch-flag-entry-text {
line-height: inherit;
display: block;
line-height: inherit;
}
/* hover */
.quiqqer-floatedNav-entry:hover,
.quiqqer-bricks-languageswitch-flag-entry:hover,
.quiqqer-floatedNav-showMobileBtn:hover {
.quiqqer-floatedNav-toggleBtn:hover {
filter: brightness(90%);
}
/* mobile */
.quiqqer-floatedNav-showMobileBtn {
/* Toggle btn */
.quiqqer-floatedNav-toggleBtn {
display: none;
text-align: center;
}
.quiqqer-floatedNav-showMobileBtn .fa {
line-height: inherit;
.quiqqer-floatedNav-toggleBtn .fa {
cursor: pointer;
line-height: inherit;
}
@media screen and (max-width: 767px) {
.quiqqer-floatedNav-showMobileBtn {
.quiqqer-floatedNav-toggleBtn {
display: block;
}
}
......@@ -129,6 +132,19 @@
padding: var(--quiqqer-floatedNav-spacing);
}
.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-toggleBtn {
font-size: calc(var(--quiqqer-floatedNav-fontSize) / 1.5);
line-height: calc((var(--quiqqer-floatedNav-size) - (2 * var(--qui-border-width, 2px))) / 1.5);
margin-bottom: var(--quiqqer-floatedNav-spacing);
width: calc(var(--quiqqer-floatedNav-size) / 1.5);
}
/* nav on the right */
.quiqqer-floatedNavControl__posX-right.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-toggleBtn {
margin-left: auto;
}
.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-toggleBtn,
.quiqqer-floatedNavControl__design-iconsBar .quiqqer-floatedNav-entry-inner,
.quiqqer-floatedNavControl__design-iconsBar .quiqqer-bricks-languageswitch-flag {
border-radius: var(--qui-btn-border-radius, 5px);
......@@ -140,7 +156,7 @@
/* Design: flat */
.quiqqer-floatedNavControl__design-flat .quiqqer-floatedNav-entry:not(:last-child),
.quiqqer-floatedNavControl__design-flat .quiqqer-floatedNav-showMobileBtn {
.quiqqer-floatedNavControl__design-flat .quiqqer-floatedNav-toggleBtn {
margin-bottom: 2px;
}
......@@ -148,7 +164,7 @@
/* Animation */
/*************/
.quiqqer-floatedNavControl__initAnimation .quiqqer-floatedNav__animation-showAll,
.quiqqer-floatedNavControl__initAnimation .quiqqer-floatedNav-showMobileBtn,
.quiqqer-floatedNavControl__initAnimation .quiqqer-floatedNav-toggleBtn,
.quiqqer-floatedNavControl__initAnimation .quiqqer-floatedNav__animation-showOneByOne .quiqqer-floatedNav-entry {
visibility: hidden;
}
......@@ -161,7 +177,7 @@
}
@media screen and (min-width: 798px) {
.quiqqer-floatedNavControl__noInitAnimation .quiqqer-floatedNav-showMobileBtn .fa {
.quiqqer-floatedNavControl__noInitAnimation .quiqqer-floatedNav-toggleBtn .fa {
transform: rotate(180deg);
}
}
......@@ -170,11 +186,3 @@
/* nav init open status */
/************************/
/******************/
/* No open button */
/******************/
.quiqqer-floatedNavControl__noOpenBtn.quiqqer-floatedNavControl__noInitAnimation .quiqqer-floatedNav__animation-showOneByOne .quiqqer-floatedNav-entry {
visibility: initial;
transform: translateX(0);
}
\ No newline at end of file
src/QUI/Menu/Controls/FloatedNav.html
+ 2
− 2
Zeige Datei @ 9911e990
{if $showOpenButton}
<div class="quiqqer-floatedNav-showMobileBtn">
{if $showToggleButton}
<div class="quiqqer-floatedNav-toggleBtn">
<span class="fa fa-angle-double-left"></span>
</div>
{/if}
......
src/QUI/Menu/Controls/FloatedNav.php
+ 27
− 21
Zeige Datei @ 9911e990
......@@ -25,17 +25,18 @@ public function __construct($attributes = [])
{
// default options
$this->setAttributes([
'class' => 'quiqqer-floatedNavControl',
'menuId' => false,
'posX' => 'right', // right, left
'size' => 'medium', // small, medium, large
'design' => 'iconBar', // iconBar, flat
'animationType' => false, // false, showAll (show entire control), showOneByOne (show each entry one by one)
'initAnimation' => false,
'animationEasing' => 'easeOutExpo', // see easing names on https://easings.net/
'class' => 'quiqqer-floatedNavControl',
'menuId' => false,
'posX' => 'right', // right, left
'forceVerticalCenter' => true, // if true, container will be centered per JS. pure css way (top: 50%; transform: translateY: (-50%);) causes jumping effect on mobile, when url bar disappears
'size' => 'medium', // small, medium, large
'design' => 'iconBar', // iconBar, flat
'animationType' => false, // false, showAll (show entire control), showOneByOne (show each entry one by one)
'initAnimation' => false,
'animationEasing' => 'easeOutExpo', // see easing names on https://easings.net/
// 'navInitOpen' => 'always', // always, desktop, never
'showOpenButton' => 'mobile', // always, mobile, hide,
'showLangSwitch' => false,
'showToggleButton' => 'mobile', // always, mobile, hide,
'showLangSwitch' => false,
]);
parent::__construct($attributes);
......@@ -69,19 +70,20 @@ public function getBody()
return '';
}
$showOpenButton = true;
switch ($this->getAttribute('showOpenButton')) {
$showToggleButton = true;
switch ($this->getAttribute('showToggleButton')) {
case 'always':
$this->setJavaScriptControlOption('showopenbutton', 'always');
$this->setJavaScriptControlOption('showtogglebutton', 'always');
$this->addCSSClass('quiqqer-floatedNavControl__toggleButton-always');
break;
case 'mobile':
$this->setJavaScriptControlOption('showopenbutton', 'mobile');
$this->setJavaScriptControlOption('showtogglebutton', 'mobile');
$this->addCSSClass('quiqqer-floatedNavControl__toggleButton-mobile');
break;
case 'hide':
$this->addCSSClass('quiqqer-floatedNavControl__noOpenBtn');
$showOpenButton = false;
$showToggleButton = false;
break;
}
......@@ -149,6 +151,10 @@ public function getBody()
$initAnimation = 'quiqqer-floatedNavControl__initAnimation';
}
if ($this->getAttribute('forceVerticalCenter')) {
$this->setJavaScriptControlOption('forceverticalcenter', 1);
}
$this->addCSSClass($initAnimation);
$this->addCSSClass($size);
......@@ -158,11 +164,11 @@ public function getBody()
$children = $IndependentMenu->getChildren();
$Engine->assign([
'this' => $this,
'children' => $children,
'animation' => $animation,
'LangSwitch' => $LangSwitch,
'showOpenButton' => $showOpenButton
'this' => $this,
'children' => $children,
'animation' => $animation,
'LangSwitch' => $LangSwitch,
'showToggleButton' => $showToggleButton
]);
return $Engine->fetch(dirname(__FILE__).'/FloatedNav.html');
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab