Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit 92f4ac79 authored by Nicolas's avatar Nicolas
Browse files

Widget avec slider quasi OK

parent 3c09315d
No related branches found
No related tags found
No related merge requests found
...@@ -12,10 +12,16 @@ use \Magento\Framework\App\Filesystem\DirectoryList; ...@@ -12,10 +12,16 @@ use \Magento\Framework\App\Filesystem\DirectoryList;
use \Magento\Framework\Image\AdapterFactory as imageAdapterFactory; use \Magento\Framework\Image\AdapterFactory as imageAdapterFactory;
use \NicolasBejean\ImageSliderManager\Model\ImageSlider as ImageSliderModel; use \NicolasBejean\ImageSliderManager\Model\ImageSlider as ImageSliderModel;
use \NicolasBejean\ImageSliderManager\Model\ImageSliderFactory; use \NicolasBejean\ImageSliderManager\Model\ImageSliderFactory;
use NicolasBejean\ImageSliderManager\Model\ImageSliderRepository;
use \NicolasBejean\ImageSliderManager\Model\Template\FilterProvider; use \NicolasBejean\ImageSliderManager\Model\Template\FilterProvider;
use \Magento\Framework\Serialize\Serializer\Json as JsonSerializer; use \Magento\Framework\Serialize\Serializer\Json as JsonSerializer;
use \Magento\Framework\Exception\LocalizedException;
use \Exception; use \Exception;
use NicolasBejean\MediaManager\Model\ImageRepository;
use NicolasBejean\MediaManager\Model\Image as ImageModel;
/** /**
* Class ImageSlider for Widget * Class ImageSlider for Widget
* *
...@@ -104,42 +110,103 @@ class ImageSlider extends Template implements BlockInterface ...@@ -104,42 +110,103 @@ class ImageSlider extends Template implements BlockInterface
private $jsonSerializer; private $jsonSerializer;
/** /**
* @param Context $context * @var ImageRepository
* @param FilterProvider $filterProvider */
* @param ImageSliderFactory $imageSliderFactory private $imageRepository;
* @param ImageAdapterFactory $imageAdapterFactory
* @param JsonSerializer $jsonSerializer /**
* @param array $data * @var ImageSliderRepository
*/ */
private $imageSliderRepository;
/**
* @param Context $context
* @param FilterProvider $filterProvider
* @param ImageSliderRepository $imageSliderRepository
* @param ImageSliderFactory $imageSliderFactory
* @param ImageAdapterFactory $imageAdapterFactory
* @param JsonSerializer $jsonSerializer
* @param ImageRepository $imageRepository
* @param array $data
*/
public function __construct( public function __construct(
Context $context, Context $context,
FilterProvider $filterProvider, FilterProvider $filterProvider,
ImageSliderFactory $imageSliderFactory, ImageSliderRepository $imageSliderRepository,
imageAdapterFactory $imageAdapterFactory, ImageSliderFactory $imageSliderFactory,
JsonSerializer $jsonSerializer, ImageRepository $imageRepository,
array $data = [] ImageAdapterFactory $imageAdapterFactory,
JsonSerializer $jsonSerializer,
array $data = []
) { ) {
$this->filterProvider = $filterProvider; $this->filterProvider = $filterProvider;
$this->imageSliderFactory = $imageSliderFactory;
$this->imageAdapterFactory = $imageAdapterFactory; $this->imageSliderRepository = $imageSliderRepository;
$this->storeManager = $context->getStoreManager(); $this->imageSliderFactory = $imageSliderFactory;
$this->filesystem = $context->getFilesystem();
$this->jsonSerializer = $jsonSerializer; $this->imageRepository = $imageRepository;
$this->imageAdapterFactory = $imageAdapterFactory;
$this->storeManager = $context->getStoreManager();
$this->filesystem = $context->getFilesystem();
$this->jsonSerializer = $jsonSerializer;
parent::__construct($context, $data); parent::__construct($context, $data);
} }
/** /**
* Get Image Slider * @return bool
* * @throws LocalizedException
* @return ImageSliderModel * @throws NoSuchEntityException
*/ */
public function getImageSlider() public function isActive()
{ {
/** @var ImageSliderModel $imageSlider */ /** @var ImageSliderModel $slider */
$imageSlider = $this->imageSliderFactory->create(); $slider = $this->imageSliderRepository->getById($this->getId());
$imageSlider->load($this->getId());
return $imageSlider; return $slider->isActive();
}
/**
* @return array
* @throws LocalizedException
* @throws NoSuchEntityException
*/
public function getSlider()
{
/** @var ImageSliderModel $slider */
$slider = $this->imageSliderRepository->getById($this->getId());
$slider = $this->jsonSerializer->unserialize($slider->getContent())['slider'];
$result = array();
/** @var array $image */
foreach ($slider as $image) {
array_push($result, $this->getImage($image['id']));
}
return $result;
}
/**
* @param $id
* @return array
* @throws NoSuchEntityException
* @throws LocalizedException
*/
private function getImage (int $id)
{
/** @var ImageModel $image */
$image = $this->imageRepository->getById($id);
$result = array();
$result['id'] = $image->getId();
$result['path'] = $image->getPath();
$result['alt'] = $image->getAlt();
$result['is_active'] = $image->isActive();
return $result;
} }
/** /**
...@@ -290,14 +357,6 @@ class ImageSlider extends Template implements BlockInterface ...@@ -290,14 +357,6 @@ class ImageSlider extends Template implements BlockInterface
return $this->getData('databind'); return $this->getData('databind');
} }
/**
* Récupère la valeur pour la mise en arrière-plan de l'image
*/
public function getActiveBackground()
{
return (boolean)$this->jsonSerializer->unserialize(strtolower($this->getData('active_background')));
}
/** /**
* Récupère la valeur pour l'activation du wrapper * Récupère la valeur pour l'activation du wrapper
*/ */
...@@ -378,7 +437,7 @@ class ImageSlider extends Template implements BlockInterface ...@@ -378,7 +437,7 @@ class ImageSlider extends Template implements BlockInterface
if ($isRelativeUrl) { if ($isRelativeUrl) {
$image = ltrim($image, '/media/'); $image = ltrim($image, '/media/');
} else { } else {
$image = 'imageslidermanager/imageslider/' . $image; $image = 'mediamanager/image/' . $image;
} }
} }
} }
......
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="NicolasBejean_ImageSliderManager::css/glide.core.css" />
<css src="NicolasBejean_ImageSliderManager::css/glide.theme.css" />
</head>
</page>
<?php <?php
use \NicolasBejean\ImageSliderManager\Block\Widget\ImageSlider; use \NicolasBejean\ImageSliderManager\Block\Widget\ImageSlider;
use \Magento\Framework\Exception\LocalizedException;
/* @var ImageSlider $block */ try {
$imageSliderBlock = $block->getImageSlider(); /* @var ImageSlider $block */
$imageSliderIdentifier = $imageSliderBlock->getIdentifier(); $active = $block->isActive();
$active = $imageSliderBlock->isActive(); $activeTitle = $block->getActiveTitle();
$activeContent = $block->getActiveContent();
$activeWrapper = $block->getActiveImageWrapper();
$activeLink = $block->getActiveLink();
$activeTitle = $block->getActiveTitle(); $sliderContent = $block->getSlider();
$activeContent = $block->getActiveContent(); } catch (LocalizedException $e) {
$activeBackground = $block->getActiveImageBackground(); $active = false;
$activeWrapper = $block->getActiveImageWrapper(); }
$activeLink = $block->getActiveLink();
$imageName = $block->getName();
$imageSlider = $block->getContent();
?> ?>
<?php if ($active): ?> <?php if ($active): ?>
...@@ -36,25 +36,23 @@ $imageSlider = $block->getContent(); ...@@ -36,25 +36,23 @@ $imageSlider = $block->getContent();
<a href="<?= /* @noEscape */ $block->getLinkHref(); ?>" target="<?= /* @noEscape */ $block->getLinkTarget(); ?>"> <a href="<?= /* @noEscape */ $block->getLinkHref(); ?>" target="<?= /* @noEscape */ $block->getLinkTarget(); ?>">
<?php endif; ?> <?php endif; ?>
<?php if ($activeBackground): ?> <div class="imageslidermanager-imageslider glide hero">
<div <div class="glide__track" data-glide-el="track">
class="imageslidermanager-imageslider <?php if ($block->getCssClasses()): ?><?= /* @noEscape */ $block->getCssClasses(); ?><?php endif; ?>" <ul class="glide__slides">
<?php if ($block->getDataBind()): ?>data-bind="<?= /* @noEscape */ $block->getDataBind(); ?>"<?php endif; ?> <?php foreach ($sliderContent as $image) : ?>
style="background-image: url('<?= /* @noEscape */ $imageSlider; ?>'); <?php if ($block->getExtraCss()): ?><?= /* @noEscape */ $block->getExtraCss(); ?><?php endif; ?>" <li class="glide__slide">
>&nbsp;</div> <img src="<?php echo /* @noEscape */ $block->getResizeImage($image['path']); ?>"
<?php else: ?> alt="<?= /* @noEscape */ $image['alt']; ?>"
<div class="imageslidermanager-imageslider"> />
<img </li>
src="<?= /* @noEscape */ $imageSlider; ?>" <?php endforeach; ?>
<?php if ($block->getCssClasses()): ?>class="<?= /* @noEscape */ $block->getCssClasses(); ?>"<?php endif; ?> </ul>
<?php if ($block->getAlt()): ?>alt="<?= /* @noEscape */ $block->getAlt(); ?>"<?php endif; ?> </div>
<?php if ($block->getExtraCss()): ?>style="<?= /* @noEscape */ $block->getExtraCss(); ?>"<?php endif; ?> <div class="glide__arrows" data-glide-el="controls">
<?php if ($block->getDataBind()): ?>data-bind="<?= /* @noEscape */ $block->getDataBind(); ?>"<?php endif; ?> <button class="glide__arrow glide__arrow--prev" data-glide-dir="<">prev</button>
<?php if ($block->getImageWidth()): ?>width="<?= /* @noEscape */ $block->getImageWidth(); ?>"<?php endif; ?> <button class="glide__arrow glide__arrow--next" data-glide-dir=">">next</button>
<?php if ($block->getImageHeight()): ?>height="<?= /* @noEscape */ $block->getImageHeight(); ?>"<?php endif; ?> </div>
/>
</div> </div>
<?php endif; ?>
<?php if ($activeLink): ?> <?php if ($activeLink): ?>
</a> </a>
...@@ -62,4 +60,11 @@ $imageSlider = $block->getContent(); ...@@ -62,4 +60,11 @@ $imageSlider = $block->getContent();
<?php if ($activeWrapper): ?> <?php if ($activeWrapper): ?>
</div> </div>
<?php endif; ?> <?php endif; ?>
<script>
require(['jquery', 'NicolasBejean_ImageSliderManager/js/glide', 'domReady!'], function($, Glide){
new Glide('.glide').mount();
});
</script>
<?php endif; ?> <?php endif; ?>
\ No newline at end of file
.glide {
position: relative;
width: 100%;
box-sizing: border-box; }
.glide * {
box-sizing: inherit; }
.glide__track {
overflow: hidden; }
.glide__slides {
position: relative;
width: 100%;
list-style: none;
backface-visibility: hidden;
transform-style: preserve-3d;
touch-action: pan-Y;
overflow: hidden;
padding: 0;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
will-change: transform; }
.glide__slides--dragging {
user-select: none; }
.glide__slide {
width: 100%;
height: 100%;
flex-shrink: 0;
white-space: initial;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent; }
.glide__slide a {
user-select: none;
-webkit-user-drag: none;
-moz-user-select: none;
-ms-user-select: none; }
.glide__arrows {
-webkit-touch-callout: none;
user-select: none; }
.glide__bullets {
-webkit-touch-callout: none;
user-select: none; }
.glide--rtl {
direction: rtl; }
.glide__arrow {
position: absolute;
display: block;
top: 50%;
z-index: 2;
color: white;
text-transform: uppercase;
padding: 9px 12px;
background-color: transparent;
border: 2px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
opacity: 1;
cursor: pointer;
transition: opacity 150ms ease, border 300ms ease-in-out;
transform: translateY(-50%);
line-height: 1; }
.glide__arrow:focus {
outline: none; }
.glide__arrow:hover {
border-color: white; }
.glide__arrow--left {
left: 2em; }
.glide__arrow--right {
right: 2em; }
.glide__arrow--disabled {
opacity: 0.33; }
.glide__bullets {
position: absolute;
z-index: 2;
bottom: 2em;
left: 50%;
display: inline-flex;
list-style: none;
transform: translateX(-50%); }
.glide__bullet {
background-color: rgba(255, 255, 255, 0.5);
width: 9px;
height: 9px;
padding: 0;
border-radius: 50%;
border: 2px solid transparent;
transition: all 300ms ease-in-out;
cursor: pointer;
line-height: 0;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
margin: 0 0.25em; }
.glide__bullet:focus {
outline: none; }
.glide__bullet:hover, .glide__bullet:focus {
border: 2px solid white;
background-color: rgba(255, 255, 255, 0.5); }
.glide__bullet--active {
background-color: white; }
.glide--swipeable {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab; }
.glide--dragging {
cursor: grabbing;
cursor: -moz-grabbing;
cursor: -webkit-grabbing; }
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment