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

feat: Show animation added [FloatedNav]

Übergeordneter a3faa651
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Controls/FloatedNav.js 0 → 100644
+ 169
− 0
Zeige Datei @ b98f329f
/**
* @module package/quiqqer/menu/bin/Controls/FloatedNav
* @author www.pcsg.de (Michael Danielczok)
*
* @require qui/QUI
* @require qui/controls/Control
*/
define('package/quiqqer/menu/bin/Controls/FloatedNav', [
'qui/QUI',
'qui/controls/Control',
URL_OPT_DIR + 'bin/quiqqer-asset/animejs/animejs/lib/anime.min.js',
], function (QUI, QUIControl, anime) {
'use strict';
return new Class({
Extends: QUIControl,
Type : 'package/quiqqer/menu/bin/Controls/FloatedNav',
Binds: [
'$onImport'
],
options: {
pos : 'right', // right, left
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
},
initialize: function (options) {
this.parent(options);
this.addEvents({
onImport: this.$onImport
});
this.$Nav = null;
this.$entries = null;
this.$pos = 'right';
this.$animationType = 'showAll';
this.$animationEasing = 'easeOutExpo';
},
/**
* event: on import
*/
$onImport: function () {
this.$Nav = this.getElm();
if (this.$Nav.get('data-qui-options-animationtype')) {
this.$animationType = this.$Nav.get('data-qui-options-animationtype');
}
if (this.$Nav.get('data-qui-options-animationeasing')) {
this.$animationEasing = this.$getAnimationName(this.$Nav.get('data-qui-options-animationeasing'));
}
// animation type
switch (this.$animationType) {
case 'showAll':
this.$Nav.setStyles({
visibility: 'visible',
right : -this.$Nav.getSize().x - 50
})
this.$show(this.$Nav);
break;
case 'showOneByOne':
this.$entries = this.$Nav.querySelectorAll('.quiqqer-floatedNav-entry');
this.$entries.forEach(($Entry) => {
$Entry.setStyles({
visibility: 'visible',
transform : 'translateX(100px)'
});
})
this.$showOneByOne(this.$entries);
break;
}
},
/**
* Show nav entries one by one
*
* @param entries {HTMLCollection}
*/
$showOneByOne: function (entries) {
anime({
targets : entries,
translateX: 0,
duration : 500,
easing : this.$animationEasing,
delay : anime.stagger(100, {start: 750})
});
},
/**
* Show nav
*
* @param Elm {HTMLElement}
*/
$show: function (Elm) {
anime({
targets : Elm,
right : 0,
delay : 750,
duration: 500,
easing : this.$animationEasing
});
},
/**
* Get correct easing name for animation
* https://easings.net/
*
* @param easingName {string}
* @return {string}
*/
$getAnimationName: function (easingName) {
switch (easingName) {
case 'easeInQuad':
case 'easeInCubic':
case 'easeInQuart':
case 'easeInQuint':
case 'easeInSine':
case 'easeInExpo':
case 'easeInCirc':
case 'easeInBack':
case 'easeOutQuad':
case 'easeOutCubic':
case 'easeOutQuart':
case 'easeOutQuint':
case 'easeOutSine':
case 'easeOutExpo':
case 'easeOutCirc':
case 'easeOutBack':
case 'easeInBounce':
case 'easeInOutQuad':
case 'easeInOutCubic':
case 'easeInOutQuart':
case 'easeInOutQuint':
case 'easeInOutSine':
case 'easeInOutExpo':
case 'easeInOutCirc':
case 'easeInOutBack':
case 'easeInOutBounce':
case 'easeOutBounce':
case 'easeOutInQuad':
case 'easeOutInCubic':
case 'easeOutInQuart':
case 'easeOutInQuint':
case 'easeOutInSine':
case 'easeOutInExpo':
case 'easeOutInCirc':
case 'easeOutInBack':
case 'easeOutInBounce':
return easingName;
default:
return 'easeOutExpo';
}
}
});
});
\ No newline at end of file
src/QUI/Menu/Controls/FloatedNav.css
+ 19
− 7
Zeige Datei @ b98f329f
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
/* control */ /* control */
/***********/ /***********/
.quiqqer-floatedNav { .quiqqer-floatedNav {
background: #fff;
position: fixed; position: fixed;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
...@@ -39,7 +38,7 @@ ...@@ -39,7 +38,7 @@
} }
.quiqqer-floatedNav-entry { .quiqqer-floatedNav-entry {
transition: 0.2s all ease; /*transition: 0.2s all ease;*/
} }
.quiqqer-floatedNav-entry-inner { .quiqqer-floatedNav-entry-inner {
...@@ -94,28 +93,41 @@ ...@@ -94,28 +93,41 @@
filter: brightness(90%); filter: brightness(90%);
} }
/***********/ /***********/
/* Designs */ /* Designs */
/***********/ /***********/
/* Design: Bar with icons */ /* Design: Bar with icons */
.quiqqer-floatedNav__iconsBar { .quiqqer-floatedNav__design-iconsBar {
background: #fff;
border-bottom-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem;
border-top-left-radius: 0.75rem; border-top-left-radius: 0.75rem;
box-shadow: -3px 3px 8px rgb(0 0 0 / 30%); box-shadow: -3px 3px 8px rgb(0 0 0 / 30%);
padding: var(--quiqqer-floatedNav-spacing); padding: var(--quiqqer-floatedNav-spacing);
} }
.quiqqer-floatedNav__iconsBar .quiqqer-floatedNav-entry-inner, .quiqqer-floatedNav__design-iconsBar .quiqqer-floatedNav-entry-inner,
.quiqqer-floatedNav__iconsBar .quiqqer-bricks-languageswitch-flag { .quiqqer-floatedNav__design-iconsBar .quiqqer-bricks-languageswitch-flag {
border-radius: var(--qui-btn-border-radius, 5px); border-radius: var(--qui-btn-border-radius, 5px);
} }
.quiqqer-floatedNav__iconsBar .quiqqer-floatedNav-entry:not(:last-child) .quiqqer-floatedNav-entry-inner { .quiqqer-floatedNav__design-iconsBar .quiqqer-floatedNav-entry:not(:last-child) .quiqqer-floatedNav-entry-inner {
margin-bottom: var(--quiqqer-floatedNav-spacing); margin-bottom: var(--quiqqer-floatedNav-spacing);
} }
/* Design: flat */ /* Design: flat */
.quiqqer-floatedNav__flat .quiqqer-floatedNav-entry:not(:last-child) { .quiqqer-floatedNav__design-flat .quiqqer-floatedNav-entry:not(:last-child) {
margin-bottom: 2px; margin-bottom: 2px;
} }
/*************/
/* Animation */
/*************/
.quiqqer-floatedNav__animation-showAll {
visibility: hidden;
}
.quiqqer-floatedNav__animation-showOneByOne .quiqqer-floatedNav-entry {
visibility: hidden;
}
\ No newline at end of file
src/QUI/Menu/Controls/FloatedNav.html
+ 25
− 26
Zeige Datei @ b98f329f
<nav class="quiqqer-floatedNav {$design} {$size} {$posX}"> {foreach $children as $Child}
{foreach $children as $Child} {assign var=hasUrl value=1}
{assign var=hasUrl value=1} {if !$Child->getUrl()}
{if !$Child->getUrl()} {assign var=hasUrl value=0}
{assign var=hasUrl value=0} {/if}
{/if} {if $Child->getIcon() && $Child->getIcon()|strpos:'image.php' !== 0}
{if $Child->getIcon() && $Child->getIcon()|strpos:'image.php' !== 0} <div class="quiqqer-floatedNav-entry quiqqer-floatedNav-entry__id-{$Child->getIdentifier()} {if !$hasUrl}quiqqer-floatedNav-entry__noUrl{/if}">
<div class="quiqqer-floatedNav-entry quiqqer-floatedNav-entry__id-{$Child->getIdentifier()} {if !$hasUrl}quiqqer-floatedNav-entry__noUrl{/if}"> {if $Child->getUrl()}
{if $Child->getUrl()} <a href="{$Child->getUrl()}"
<a href="{$Child->getUrl()}" class="quiqqer-floatedNav-entry-inner"
class="quiqqer-floatedNav-entry-inner" title="{$Child->getTitleAttribute()|escape:'html'}"
title="{$Child->getTitleAttribute()|escape:'html'}" {if $Child->getTarget()}target="{$Child->getTarget()}"{/if}
{if $Child->getTarget()}target="{$Child->getTarget()}"{/if} >
>
{image src=$Child->getIcon() onlyicon=1}
</a>
{else}
<span class="quiqqer-floatedNav-entry-inner" title="{$Child->getTitleAttribute()|escape:'html'}">
{image src=$Child->getIcon() onlyicon=1} {image src=$Child->getIcon() onlyicon=1}
</span> </a>
{/if} {else}
</div> <span class="quiqqer-floatedNav-entry-inner" title="{$Child->getTitleAttribute()|escape:'html'}">
{/if} {image src=$Child->getIcon() onlyicon=1}
{/foreach} </span>
{if $LangSwitch} {/if}
{$LangSwitch->create()} </div>
{/if} {/if}
</nav> {/foreach}
\ No newline at end of file
{if $LangSwitch}
{$LangSwitch->create()}
{/if}
\ No newline at end of file
src/QUI/Menu/Controls/FloatedNav.php
+ 95
− 12
Zeige Datei @ b98f329f
...@@ -25,11 +25,15 @@ public function __construct($attributes = []) ...@@ -25,11 +25,15 @@ public function __construct($attributes = [])
{ {
// default options // default options
$this->setAttributes([ $this->setAttributes([
'menuId' => false, 'class' => 'quiqqer-floatedNav',
'posX' => 'right', // right, left 'nodeName' => 'nav',
'size' => 'medium', // small, medium, large 'menuId' => false,
'design' => 'iconBar', // iconBar, flat 'posX' => 'right', // right, left
'showLangSwitch' => false 'size' => 'medium', // small, medium, large
'design' => 'iconBar', // iconBar, flat
'animationType' => false, // false, showOneByOne (show entire control), showSingle (show each entry one by one)
'animationEasing' => 'easeOutExpo', // see easing names on https://easings.net/
'showLangSwitch' => false
]); ]);
parent::__construct($attributes); parent::__construct($attributes);
...@@ -46,9 +50,16 @@ public function __construct($attributes = []) ...@@ -46,9 +50,16 @@ public function __construct($attributes = [])
*/ */
public function getBody() public function getBody()
{ {
$Engine = QUI::getTemplateManager()->getEngine(); $Engine = QUI::getTemplateManager()->getEngine();
$IndependentMenu = Independent\Handler::getMenu($this->getAttribute('menuId')); $LangSwitch = null;
$LangSwitch = null;
try {
$IndependentMenu = Independent\Handler::getMenu($this->getAttribute('menuId'));
} catch (QUI\Exception $Exception) {
QUI\System\Log::writeException($Exception);
return '';
}
if (!$IndependentMenu) { if (!$IndependentMenu) {
return ''; return '';
...@@ -66,13 +77,13 @@ public function getBody() ...@@ -66,13 +77,13 @@ public function getBody()
} }
switch ($this->getAttribute('design')) { switch ($this->getAttribute('design')) {
case 'iconBar':
case 'flat': case 'flat':
$design = 'quiqqer-floatedNav__'.$this->getAttribute('design'); $design = 'quiqqer-floatedNav__design-'.$this->getAttribute('design');
break; break;
case 'iconBar':
default: default:
$design = 'quiqqer-floatedNav__iconsBar'; $design = 'quiqqer-floatedNav__design-iconsBar';
} }
switch ($this->getAttribute('posX')) { switch ($this->getAttribute('posX')) {
...@@ -89,13 +100,33 @@ public function getBody() ...@@ -89,13 +100,33 @@ public function getBody()
if ($this->getAttribute('showLangSwitch')) { if ($this->getAttribute('showLangSwitch')) {
try { try {
$LangSwitch = new QUI\Bricks\Controls\LanguageSwitches\Flags([ $LangSwitch = new QUI\Bricks\Controls\LanguageSwitches\Flags([
'showFlags' => 0 'showFlags' => 0,
'class' => 'quiqqer-floatedNav-entry'
]); ]);
} catch (QUI\Exception $Exception) { } catch (QUI\Exception $Exception) {
QUI\System\Log::writeException($Exception); QUI\System\Log::writeException($Exception);
} }
} }
$animation = '';
if ($this->getAttribute('animationType')) {
switch ($this->getAttribute('animationType')) {
case 'showAll':
case 'showOneByOne':
$this->setJavaScriptControlOption('position', 'right');
$this->setJavaScriptControlOption('animationtype', $this->getAttribute('animationType'));
$this->setJavaScriptControlOption('animationeasing', $this->getAnimationEasingName());
$this->setJavaScriptControl('package/quiqqer/menu/bin/Controls/FloatedNav');
$animation = 'quiqqer-floatedNav__animation-'.$this->getAttribute('animationType');
break;
}
}
$this->addCSSClass($size);
$this->addCSSClass($design);
$this->addCSSClass($posX);
$this->addCSSClass($animation);
$children = $IndependentMenu->getChildren(); $children = $IndependentMenu->getChildren();
$Engine->assign([ $Engine->assign([
...@@ -109,4 +140,56 @@ public function getBody() ...@@ -109,4 +140,56 @@ public function getBody()
return $Engine->fetch(dirname(__FILE__).'/FloatedNav.html'); return $Engine->fetch(dirname(__FILE__).'/FloatedNav.html');
} }
/**
* Get correct easing name for animation
* https://easings.net/
*
* @return false|mixed|string
*/
public function getAnimationEasingName()
{
switch ($this->getAttribute('animationEasing')) {
case 'easeInQuad':
case 'easeInCubic':
case 'easeInQuart':
case 'easeInQuint':
case 'easeInSine':
case 'easeInExpo':
case 'easeInCirc':
case 'easeInBack':
case 'easeOutQuad':
case 'easeOutCubic':
case 'easeOutQuart':
case 'easeOutQuint':
case 'easeOutSine':
case 'easeOutExpo':
case 'easeOutCirc':
case 'easeOutBack':
case 'easeInBounce':
case 'easeInOutQuad':
case 'easeInOutCubic':
case 'easeInOutQuart':
case 'easeInOutQuint':
case 'easeInOutSine':
case 'easeInOutExpo':
case 'easeInOutCirc':
case 'easeInOutBack':
case 'easeInOutBounce':
case 'easeOutBounce':
case 'easeOutInQuad':
case 'easeOutInCubic':
case 'easeOutInQuart':
case 'easeOutInQuint':
case 'easeOutInSine':
case 'easeOutInExpo':
case 'easeOutInCirc':
case 'easeOutInBack':
case 'easeOutInBounce':
return $this->getAttribute('animationEasing');
default:
return 'easeOutExpo';
}
}
} }
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