Skip to content
Commits auf Quelle (5)
Leerzeichenänderungen anzeigen
Inline Nebeneinander
.gitlab-ci.yml 0 → 100644
Zeige Datei @ 3c67f6a3
include:
- project: 'quiqqer/stabilization/semantic-release'
file: '/ci-templates/.gitlab-ci.yml'
bin/Logo/Carousel.js 0 → 100644
Zeige Datei @ 3c67f6a3
/**
* Children listing
*
* @module package/quiqqer/slider/bin/controls/Logo/Carousel
*
* @author Dominik Chrzanowski
*/
define('package/quiqqer/slider/bin/Logo/Carousel', [
'qui/QUI',
'qui/controls/Control',
'qui/utils/Functions',
URL_OPT_DIR + 'bin/quiqqer-asset/glidejs-glide/@glidejs/glide/dist/glide.js',
'css!' + URL_OPT_DIR + 'bin/quiqqer-asset/glidejs-glide/@glidejs/glide/dist/css/glide.core.css'
], function (QUI, QUIControl, QUIFunctionUtils, Glide) {
"use strict";
return new Class({
Extends: QUIControl,
Type : 'package/quiqqer/slider/bin/Logo/Carousel',
Binds: [
'$onImport',
'$recalcPerView'
],
options: {
'perview' : 3,
'delay' : 3000,
'hoverpause' : false,
'minslidewidth': 150
},
initialize: function (options) {
this.parent(options);
this.Glide = null;
this.GlideContainer = null;
this.addEvents({
onImport: this.$onImport
});
},
/**
* event : on import
*/
$onImport: function () {
this.GlideContainer = this.getElm().querySelector('.glide');
const options = {
type : 'carousel',
perView : this.getAttribute('perview'),
autoplay : this.getAttribute('delay'),
hoverpause : this.getAttribute('hoverpause'),
gap : 0,
dragThreshold: 5
};
this.Glide = new Glide('.glide', options);
this.Glide.on(['mount.after'], () => {
this.$recalcPerView();
moofx(this.GlideContainer).animate({
opacity: 1
});
});
// use this instead of QUI.addEvent('resize', ...)
// because of glidejs recalculate issue during resizing
this.Glide.on(['resize'], this.$recalcPerView);
this.Glide.mount();
},
/**
* Check the available space and eventually recalculate new perView amount
*/
$recalcPerView: function () {
const space = this.GlideContainer.offsetWidth;
if (space / this.getAttribute('perview') < this.getAttribute('minslidewidth')) {
const newPerView = Math.floor(space / this.getAttribute('minslidewidth'));
this.Glide.update({
perView: newPerView
});
}
}
});
});
bricks.xml
Zeige Datei @ 3c67f6a3
......@@ -146,6 +146,140 @@
</settings>
</brick>
<!-- brick: logo slider carousel -->
<brick control="\QUI\Slider\Controls\Logo\Carousel">
<title>
<locale group="quiqqer/slider" var="bricks.slider.logo.carousel.title" />
</title>
<description>
<locale group="quiqqer/slider" var="bricks.slider.logo.carousel.description" />
</description>
<settings>
<setting name="folderId" class="media-folder">
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.slider.settings.folderId"
/>
</setting>
<setting name="perView" type="number">
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.perView"
/>
<description>
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.perView.desc"
/>
</description>
</setting>
<setting name="minSlideWidth" type="number">
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.minSlideWidth"
/>
<description>
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.minSlideWidth.desc"
/>
</description>
</setting>
<setting name="maxImgHeight" type="number">
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.maxImgHeight"
/>
</setting>
<setting name="delay" type="number">
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.delay"
/>
<description>
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.delay.desc"
/>
</description>
</setting>
<setting name="grayscale" type="checkbox">
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.grayscale"
/>
<description>
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.grayscale.desc"
/>
</description>
</setting>
<setting name="hoverpause" type="checkbox">
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.hoverpause"
/>
<description>
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.hoverpause.desc"
/>
</description>
</setting>
<setting name="logoBackgroundColor" type="color">
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.logoBackgroundColor"
/>
<description>
<locale group="quiqqer/slider"
var="quiqqer.slider.logo.carousel.settings.logoBackgroundColor.desc"
/>
</description>
</setting>
<setting name="order" type="select">
<locale group="quiqqer/bricks" var="brick.control.setting.order"/>
<option value="random">
<locale group="quiqqer/slider" var="quiqqer.slider.logo.carousel.settings.order.random"/>
</option>
<option value="name ASC">
<locale group="quiqqer/system" var="name_asc"/>
</option>
<option value="name DESC">
<locale group="quiqqer/system" var="name_desc"/>
</option>
<option value="title ASC">
<locale group="quiqqer/system" var="title_asc"/>
</option>
<option value="title DESC">
<locale group="quiqqer/system" var="title_desc"/>
</option>
<option value="c_date ASC">
<locale group="quiqqer/system" var="c_date_asc"/>
</option>
<option value="c_date DESC">
<locale group="quiqqer/system" var="c_date_desc"/>
</option>
<option value="e_date ASC">
<locale group="quiqqer/system" var="e_date_asc"/>
</option>
<option value="e_date DESC">
<locale group="quiqqer/system" var="e_date_desc"/>
</option>
<option value="release_from ASC">
<locale group="quiqqer/system" var="release_from_asc"/>
</option>
<option value="release_from DESC">
<locale group="quiqqer/system" var="release_from_desc"/>
</option>
<option value="priority ASC">
<locale group="quiqqer/system" var="priority_asc"/>
</option>
<option value="priority DESC">
<locale group="quiqqer/system" var="priority_desc"/>
</option>
</setting>
</settings>
</brick>
</bricks>
</quiqqer>
locale.xml
Zeige Datei @ 3c67f6a3
......@@ -184,5 +184,76 @@
<de><![CDATA[Animationsgeschwindigkeit]]></de>
<en><![CDATA[Animation speed]]></en>
</locale>
<!-- Carousel slider -->
<locale name="bricks.slider.logo.carousel.title">
<de><![CDATA[Slider: Logo Karussell]]></de>
<en><![CDATA[Slider: Logo Carousel]]></en>
</locale>
<locale name="bricks.slider.logo.carousel.description">
<de><![CDATA[Präsentiert ausgewählte Logos in einem Karussell.]]></de>
<en><![CDATA[Displays logos in a carousel.]]></en>
</locale>
<locale name="quiqqer.slider.logo.slider.settings.folderId">
<de><![CDATA[Media-Ordner]]></de>
<en><![CDATA[Media folder]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.perView">
<de><![CDATA[Anzahl der sichtbaren Logos]]></de>
<en><![CDATA[Number of visible logos]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.perView.desc">
<de><![CDATA[Diese Einstellung legt fest, wie viele sichtbare Logoslider angezeigt werden. Der Standardwert beträgt 5, was bedeutet, dass immer gleichzeitig 5 Logos angezeigt werden.]]></de>
<en><![CDATA[This setting determines the number of visible logo sliders. The default value is 5, meaning that 5 logos are always displayed simultaneously.]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.minSlideWidth">
<de><![CDATA[Minimale Slide Breite]]></de>
<en><![CDATA[Min slide width]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.minSlideWidth.desc">
<de><![CDATA[Minimale Breite eines Slides in Pixeln. Mit dieser Einstellung wird automatisch berechnet, wie viele Logos gleichzeitig angezeigt werden können. Wenn ausreichend Platz vorhanden ist, hat die Einstellung 'Anzahl der sichtbaren Einträge' Vorrang. Bei begrenztem Platz (z. B. auf Tablets oder Mobilgeräten) wird anhand dieser Einstellung automatisch ermittelt, wie viele Logos angezeigt werden können. Der Standardwert beträgt 150 Pixel. Wir empfehlen Werte zwischen 100 und 300 Pixeln.]]></de>
<en><![CDATA[Minimum slide width in pixels. This setting automatically calculates how many logos can be displayed at once. When there is enough available space, the 'Number of Visible Entries' setting takes precedence. In cases of limited space (e.g., tablets or mobile devices), this setting is used to determine the number of logos displayed automatically. The default value is 150 pixels. We recommend values between 100 and 300 pixels.]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.maxImgHeight">
<de><![CDATA[Maximale Bildhöhe (in Pixel)]]></de>
<en><![CDATA[Max image height (in pixels)]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.delay">
<de><![CDATA[Zeit zum nächsten Slide (Verzögerung)]]></de>
<en><![CDATA[Time to start next slide (Delay)]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.delay.desc">
<de><![CDATA[Die Zeit bis zum nächsten Slide wird in Millisekunden angegeben (1 Sekunde entspricht 1000 Millisekunden). Eine Einstellung von 0 bedeutet, dass der Slider nicht automatisch startet. Der Standardwert beträgt 3000 Millisekunden.]]></de>
<en><![CDATA[The time until the next slide is specified in milliseconds (1 second equals 1000 milliseconds). A setting of 0 means the slider does not start automatically. The default value is 3000 milliseconds.]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.grayscale">
<de><![CDATA[Schwarz-Weiß Modus]]></de>
<en><![CDATA[Black and White Mode]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.grayscale.desc">
<de><![CDATA[Die Logos werden in Graustufen dargestellt. Wenn man mit der Maus darüber fährt, kehrt das Logo zu seiner ursprünglichen Farbe zurück.]]></de>
<en><![CDATA[The logos are displayed in grayscale. When you hover over them with the mouse, the logo returns to its original color.]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.hoverpause">
<de><![CDATA[Mit Maus pausieren]]></de>
<en><![CDATA[Mouse hover pause]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.hoverpause.desc">
<de><![CDATA[Diese Einstellung bewirkt, dass der automatische Durchlauf der Logos gestoppt wird, sobald der Mauszeiger über einem Bild schwebt. Dadurch können Benutzer die Logos in Ruhe betrachten, ohne dass sie weiterhin automatisch wechseln.]]></de>
<en><![CDATA[This setting causes the automatic slideshow of logos to pause when the mouse cursor hovers over an image. This allows users to view the logos at their own pace without them continuing to change automatically.]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.logoBackgroundColor">
<de><![CDATA[Logo Hintergrundfarbe]]></de>
<en><![CDATA[Logo background color]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.logoBackgroundColor.desc">
<de><![CDATA[Wenn aktiviert, wird diese Farbe hinter den Logos platziert.]]></de>
<en><![CDATA[When enabled, this color is placed behind the logos.]]></en>
</locale>
<locale name="quiqqer.slider.logo.carousel.settings.order.random">
<de><![CDATA[Zufällig]]></de>
<en><![CDATA[Random]]></en>
</locale>
</groups>
</locales>
\ No newline at end of file
src/QUI/Slider/Controls/Logo/Carousel.css 0 → 100644
Zeige Datei @ 3c67f6a3
.quiqqer-slider-logoCarousel-wrapper {
width: 100%;
background-color: var(--quiqqer-slider-logoCarousel-logoBgColor, transparent);
padding-block: 1rem;
}
.quiqqer-slider-logoCarousel-container {
height: var(--qui--logoCarousel-height);
overflow: hidden;
width: 100%;
opacity: 0;
}
li.quiqqer-slider-logoCarousel-child {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
margin-block: 0;
padding-inline: 1rem;
}
.quiqqer-slider-logoCarousel__image {
max-height: var(--qui--logoCarousel-height);
}
.quiqqer-slider-logoCarousel__image--grayscale {
transition: var(--qui-transition-duration, 0.2s) ease filter;
}
.quiqqer-slider-logoCarousel__image--grayscale:not(:hover) {
filter: grayscale(1) opacity(0.75);
}
\ No newline at end of file
src/QUI/Slider/Controls/Logo/Carousel.html 0 → 100644
Zeige Datei @ 3c67f6a3
{if $this->getAttribute('showTitle') && $this->getAttribute('frontendTitle')}
<header class="control-header">
<h1>{$this->getAttribute('frontendTitle')}</h1>
</header>
{/if}
{if $this->getAttribute('content') != ""}
<div class="control-content">
{$this->getAttribute('content')}
</div>
{/if}
<div class="quiqqer-slider-logoCarousel-wrapper"
{if $logoBackgroundColor}style="--quiqqer-slider-logoCarousel-logoBgColor: {$logoBackgroundColor};"{/if}>
<div class="glide quiqqer-slider-logoCarousel-container" style="opacity: 0;">
<div data-glide-el="track" class="glide__track quiqqer-slider-logoCarousel-container-inner">
<ul class="glide__slides quiqqer-slider-logoCarousel-container-slide">
{strip}
{foreach from=$images item=$Image}
{assign var=src value={image image=$Image onlysrc=true}}
<li class="glide__slide quiqqer-slider-logoCarousel-child">
{image image=$Image data-src="$src" height="$maxImgHeight" class="quiqqer-slider-logoCarousel__image {if $grayscale}quiqqer-slider-logoCarousel__image--grayscale{/if}"}
</li>
{/foreach}
{/strip}
</ul>
</div>
</div>
</div>
src/QUI/Slider/Controls/Logo/Carousel.php 0 → 100644
Zeige Datei @ 3c67f6a3
<?php
/**
* This file contains \QUI\Slider\Controls\Logo\Carousel
*/
namespace QUI\Slider\Controls\Logo;
use QUI;
/**
* Class Carousel
*
* @package QUI\Slider\Controls\Logo\Carousel
*/
class Carousel extends QUI\Control
{
/**
* constructor
*
* @param array $attributes
*/
public function __construct($attributes = [])
{
// default options
$this->setAttributes([
'class' => 'quiqqer-slider-logoCarousel',
'nodeName' => 'section',
'site' => '',
'Project' => false,
'folderId' => false,
'perView' => 3,
'maxImgHeight' => 100,
'delay' => 3000,
'minSlideWidth' => 150,
'logoBackgroundColor' => false,
'order' => false,
'data-qui' => 'package/quiqqer/slider/bin/Logo/Carousel',
'grayscale' => false,
'hoverpause' => false
]);
$this->addCSSFile(
\dirname(__FILE__).'/Carousel.css'
);
parent::__construct($attributes);
}
/**
* (non-PHPdoc)
*
* @see \QUI\Control::create()
*/
public function getBody()
{
$Engine = QUI::getTemplateManager()->getEngine();
$Project = $this->getProject();
$Media = $Project->getMedia();
$folderId = $this->getAttribute('folderId');
$Folder = false;
$maxImageHeight = '200px';
if ($this->getAttribute('maxImgHeight') != '') {
$maxImageHeight = $this->getAttribute('maxImgHeight');
}
$perView = 3;
if ($this->getAttribute('perView') != '') {
$perView = $this->getAttribute('perView');
}
$delay = 2000;
if ($this->getAttribute('delay') != '') {
$delay = $this->getAttribute('delay');
}
$grayscale = false;
if ($this->getAttribute('grayscale') != '') {
$grayscale = $this->getAttribute('grayscale');
}
$hoverpause = false;
if ($this->getAttribute('hoverpause') != '') {
$hoverpause = $this->getAttribute('hoverpause');
}
$minSlideWidth = 150;
if ($this->getAttribute('minSlideWidth') != '') {
$minSlideWidth = $this->getAttribute('minSlideWidth');
}
$this->setJavaScriptControlOption('perview', intval($perView));
$this->setJavaScriptControlOption('delay', intval($delay));
$this->setJavaScriptControlOption('hoverpause', boolval($hoverpause));
$this->setJavaScriptControlOption('minslidewidth', intval($minSlideWidth));
/* @var $Folder \QUI\Projects\Media\Folder */
if (\strpos($folderId, 'image.php') !== false) {
try {
$Folder = QUI\Projects\Media\Utils::getMediaItemByUrl(
$folderId
);
} catch (QUI\Exception $Exception) {
$Folder = false;
}
} elseif ($folderId) {
try {
$Folder = $Media->get((int)$folderId);
} catch (QUI\Exception $Exception) {
$Folder = false;
}
}
switch ($this->getAttribute('order')) {
case 'title DESC':
case 'title ASC':
case 'name DESC':
case 'name ASC':
case 'c_date DESC':
case 'c_date ASC':
case 'e_date DESC':
case 'e_date ASC':
case 'priority DESC':
case 'priority ASC':
$order = $this->getAttribute('order');
break;
default:
$order = 'name DESC';
break;
}
$images = $Folder->getImages([
'order' => $order
]);
if ($this->getAttribute('max') && \count($images) > $this->getAttribute('max')) {
$images = \array_slice($images, 0, $this->getAttribute('max'));
}
$this->setStyles([
'--qui--logoCarousel-height' => $maxImageHeight."px"
]);
$Engine->assign([
'this' => $this,
'images' => $images,
'maxImgHeight' => $maxImageHeight,
'grayscale' => $grayscale,
'logoBackgroundColor' => $this->getAttribute('logoBackgroundColor')
]);
return $Engine->fetch($this->getTemplate());
}
/**
* Return the control template
*
* @return string
*/
protected function getTemplate()
{
return \dirname(__FILE__).'/Carousel.html';
}
}

PCSG & QUIQQER support and DEV System - GitLab