Your IP : 216.73.216.190
Basic/ThumbnailBasic.php 0000644 00000024021 15241763455 0011176 0 ustar 00 <?php
namespace Nextend\SmartSlider3\Widget\Thumbnail\Basic;
use Nextend\Framework\Form\Element\Font;
use Nextend\Framework\Form\Element\OnOff;
use Nextend\Framework\Form\Element\Select;
use Nextend\Framework\Form\Element\Style;
use Nextend\Framework\Form\Element\Text;
use Nextend\Framework\Form\Element\Text\FieldImage;
use Nextend\Framework\Form\Element\Text\Number;
use Nextend\Framework\Form\Fieldset\FieldsetRow;
use Nextend\SmartSlider3\Form\Element\Group\WidgetPosition;
use Nextend\SmartSlider3\Widget\AbstractWidget;
class ThumbnailBasic extends AbstractWidget {
protected $key = 'widget-thumbnail-';
protected $defaults = array(
'widget-thumbnail-position-mode' => 'simple',
'widget-thumbnail-position-area' => 12,
'widget-thumbnail-action' => 'click',
'widget-thumbnail-style-bar' => '{"data":[{"backgroundcolor":"242424ff","padding":"3|*|3|*|3|*|3|*|px","boxshadow":"0|*|0|*|0|*|0|*|000000ff","border":"0|*|solid|*|000000ff","borderradius":"0","extra":""}]}',
'widget-thumbnail-style-slides' => '{"data":[{"backgroundcolor":"00000000","padding":"0|*|0|*|0|*|0|*|px","boxshadow":"0|*|0|*|0|*|0|*|000000ff","border":"0|*|solid|*|ffffff00","borderradius":"0","opacity":"40","extra":"margin: 3px;\ntransition: all 0.4s;"},{"border":"0|*|solid|*|ffffffcc","opacity":"100","extra":""}]}',
'widget-thumbnail-arrow' => 1,
'widget-thumbnail-arrow-image' => '',
'widget-thumbnail-arrow-width' => 26,
'widget-thumbnail-arrow-offset' => 0,
'widget-thumbnail-arrow-prev-alt' => 'previous arrow',
'widget-thumbnail-arrow-next-alt' => 'next arrow',
'widget-thumbnail-title-style' => '{"data":[{"backgroundcolor":"000000ab","padding":"3|*|10|*|3|*|10|*|px","boxshadow":"0|*|0|*|0|*|0|*|000000ff","border":"0|*|solid|*|000000ff","borderradius":"0","extra":"bottom: 0;\nleft: 0;"}]}',
'widget-thumbnail-title' => 0,
'widget-thumbnail-title-font' => '{"data":[{"color":"ffffffff","size":"12||px","tshadow":"0|*|0|*|0|*|000000ab","afont":"Montserrat","lineheight":"1.2","bold":0,"italic":0,"underline":0,"align":"left"},{"color":"fc2828ff","afont":"Raleway,Arial","size":"25||px"},{}]}',
'widget-thumbnail-description' => 0,
'widget-thumbnail-description-font' => '{"data":[{"color":"ffffffff","size":"12||px","tshadow":"0|*|0|*|0|*|000000ab","afont":"Montserrat","lineheight":"1.3","bold":0,"italic":0,"underline":0,"align":"left"},{"color":"fc2828ff","afont":"Raleway,Arial","size":"25||px"},{}]}',
'widget-thumbnail-caption-placement' => 'overlay',
'widget-thumbnail-caption-size' => 100,
'widget-thumbnail-group' => 1,
'widget-thumbnail-orientation' => 'auto',
'widget-thumbnail-size' => '100%',
'widget-thumbnail-show-image' => 1,
'widget-thumbnail-width' => 100,
'widget-thumbnail-height' => 60,
'widget-thumbnail-align-content' => 'start'
);
public function renderFields($container) {
$row1 = new FieldsetRow($container, 'widget-thumbnail-default-row-1');
new WidgetPosition($row1, 'widget-thumbnail-position', n2_('Position'));
new Select($row1, 'widget-thumbnail-action', n2_('Action'), '', array(
'options' => array(
'click' => n2_('Click'),
'mouseenter' => n2_('Hover')
)
));
new Select($row1, 'widget-thumbnail-align-content', n2_('Align thumbnails'), '', array(
'options' => array(
'start' => n2_('Start'),
'center' => n2_('Center'),
'end' => n2_('End'),
'space-between' => n2_('Space between'),
'space-around' => n2_('Space around')
)
));
new Style($row1, 'widget-thumbnail-style-bar', n2_('Bar'), '', array(
'mode' => 'simple',
'style2' => 'sliderwidget-thumbnail-style-slides',
'preview' => 'SmartSliderAdminWidgetThumbnailBasic'
));
new Style($row1, 'widget-thumbnail-style-slides', n2_('Thumbnail'), '', array(
'mode' => 'dot',
'style2' => 'sliderwidget-thumbnail-style-bar',
'preview' => 'SmartSliderAdminWidgetThumbnailBasic'
));
$rowCaption = new FieldsetRow($container, 'widget-thumbnail-default-row-caption');
new Style($rowCaption, 'widget-thumbnail-title-style', n2_('Caption'), '', array(
'mode' => 'simple',
'post' => 'break',
'font' => 'sliderwidget-thumbnail-title-font',
'preview' => 'SmartSliderAdminWidgetThumbnailBasic'
));
new OnOff($rowCaption, 'widget-thumbnail-title', n2_('Title'), '', array(
'relatedFieldsOn' => array(
'sliderwidget-thumbnail-title-font'
)
));
new Font($rowCaption, 'widget-thumbnail-title-font', '', '', array(
'mode' => 'simple',
'style' => 'sliderwidget-thumbnail-title-style',
'preview' => 'SmartSliderAdminWidgetThumbnailBasic'
));
new OnOff($rowCaption, 'widget-thumbnail-description', n2_('Description'), '', array(
'relatedFieldsOn' => array(
'sliderwidget-thumbnail-description-font'
)
));
new Font($rowCaption, 'widget-thumbnail-description-font', '', '', array(
'mode' => 'simple',
'style' => 'sliderwidget-thumbnail-title-style',
'preview' => 'SmartSliderAdminWidgetThumbnailBasic'
));
new Select($rowCaption, 'widget-thumbnail-caption-placement', n2_('Placement'), '', array(
'options' => array(
'before' => n2_('Before'),
'overlay' => n2_('Overlay'),
'after' => n2_('After')
)
));
new Number($rowCaption, 'widget-thumbnail-caption-size', n2_('Size'), '', array(
'wide' => 5,
'unit' => 'px',
'tipLabel' => n2_('Size'),
'tipDescription' => n2_('The height (horizontal orientation) or width (vertical orientation) of the caption container.')
));
$rowArrow = new FieldsetRow($container, 'widget-thumbnail-default-row-arrow');
new OnOff($rowArrow, 'widget-thumbnail-arrow', n2_('Arrow'), 1, array(
'relatedFieldsOn' => array(
'sliderwidget-thumbnail-arrow-image',
'sliderwidget-thumbnail-arrow-width',
'sliderwidget-thumbnail-arrow-offset',
'sliderwidget-thumbnail-arrow-prev-alt',
'sliderwidget-thumbnail-arrow-next-alt'
)
));
new Number($rowArrow, 'widget-thumbnail-arrow-width', n2_('Size'), 26, array(
'wide' => 4,
'unit' => 'px'
));
new Number($rowArrow, 'widget-thumbnail-arrow-offset', n2_('Offset'), 0, array(
'wide' => 4,
'unit' => 'px'
));
new Text($rowArrow, 'widget-thumbnail-arrow-prev-alt', n2_('Previous alt tag'), 'previous arrow', array(
'style' => 'width:100px;'
));
new Text($rowArrow, 'widget-thumbnail-arrow-next-alt', n2_('Next alt tag'), 'next arrow', array(
'style' => 'width:100px;'
));
new FieldImage($rowArrow, 'widget-thumbnail-arrow-image', n2_('Next arrow image'), '', array(
'tipLabel' => n2_('Next arrow image'),
'tipDescription' => n2_('The previous arrow image will be mirrored.'),
'tipLink' => 'https://smartslider.helpscoutdocs.com/article/1857-thumbnails#arrow'
));
$row4 = new FieldsetRow($container, 'widget-thumbnail-default-row-4');
new Number($row4, 'widget-thumbnail-group', n2_('Group by'), '', array(
'unit' => n2_x('thumbnails', 'Unit'),
'wide' => 3,
'tipLabel' => n2_('Group by'),
'tipDescription' => n2_('You can break your thumbnails into rows or columns.')
));
new Select($row4, 'widget-thumbnail-orientation', n2_('Orientation'), '', array(
'options' => array(
'auto' => n2_('Auto'),
'horizontal' => n2_('Horizontal'),
'vertical' => n2_('Vertical')
)
));
new Text($row4, 'widget-thumbnail-size', n2_('Size'), '', array(
'style' => 'width:150px;',
'tipLabel' => n2_('Size'),
'tipDescription' => n2_('The height (horizontal orientation) or width (vertical orientation) of the thumbnail container in px or %.')
));
}
public function prepareExport($export, $params) {
$export->addVisual($params->get($this->key . 'style-bar'));
$export->addVisual($params->get($this->key . 'style-slides'));
$export->addVisual($params->get($this->key . 'title-style'));
$export->addVisual($params->get($this->key . 'title-font'));
$export->addVisual($params->get($this->key . 'description-font'));
}
public function prepareImport($import, $params) {
$params->set($this->key . 'style-bar', $import->fixSection($params->get($this->key . 'style-bar', '')));
$params->set($this->key . 'style-slides', $import->fixSection($params->get($this->key . 'style-slides', '')));
$params->set($this->key . 'title-style', $import->fixSection($params->get($this->key . 'title-style', '')));
$params->set($this->key . 'title-font', $import->fixSection($params->get($this->key . 'title-font', '')));
$params->set($this->key . 'description-font', $import->fixSection($params->get($this->key . 'description-font', '')));
}
} Basic/ThumbnailBasicFrontend.php 0000644 00000033551 15241763456 0012707 0 ustar 00 <?php
namespace Nextend\SmartSlider3\Widget\Thumbnail\Basic;
use Nextend\Framework\Asset\Js\Js;
use Nextend\Framework\FastImageSize\FastImageSize;
use Nextend\Framework\Filesystem\Filesystem;
use Nextend\Framework\Misc\Base64;
use Nextend\Framework\ResourceTranslator\ResourceTranslator;
use Nextend\Framework\View\Html;
use Nextend\SmartSlider3\Widget\AbstractWidgetFrontend;
class ThumbnailBasicFrontend extends AbstractWidgetFrontend {
private static $thumbnailTypes = array(
'videoDark' => '<svg class="n2-thumbnail-dot-type" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="#000" opacity=".6"/><path fill="#FFF" d="M19.8 32c-.124 0-.247-.028-.36-.08-.264-.116-.436-.375-.44-.664V16.744c.005-.29.176-.55.44-.666.273-.126.592-.1.84.07l10.4 7.257c.2.132.32.355.32.595s-.12.463-.32.595l-10.4 7.256c-.14.1-.31.15-.48.15z"/></svg>'
);
public function __construct($sliderWidget, $widget, $params) {
parent::__construct($sliderWidget, $widget, $params);
$this->addToPlacement($this->key . 'position-', array(
$this,
'render'
));
}
public function render($attributes = array()) {
$slider = $this->slider;
$id = $this->slider->elementId;
$params = $this->params;
$showThumbnail = intval($params->get($this->key . 'show-image'));
$showTitle = intval($params->get($this->key . 'title'));
$showDescription = intval($params->get($this->key . 'description'));
if (!$showThumbnail && !$showTitle && !$showDescription) {
// Nothing to show
return '';
}
$parameters = array(
'action' => $params->get($this->key . 'action'),
'minimumThumbnailCount' => max(1, intval($params->get($this->key . 'minimum-thumbnail-count')))
);
$displayAttributes = $this->getDisplayAttributes($params, $this->key);
$barStyle = $slider->addStyle($params->get($this->key . 'style-bar'), 'simple');
$slideStyle = $slider->addStyle($params->get($this->key . 'style-slides'), 'dot');
$width = intval($slider->params->get($this->key . 'width', 100));
$height = intval($slider->params->get($this->key . 'height', 60));
$css = '';
if ($showThumbnail) {
$css .= 'div#' . $this->slider->elementId . ' .n2-thumbnail-dot img{width:' . $width . 'px;height:' . $height . 'px}';
} else {
$css .= 'div#' . $this->slider->elementId . ' .n2-thumbnail-dot{min-width:' . $width . 'px;min-height:' . $height . 'px}';
}
if (!empty($css)) {
$this->slider->addDeviceCSS('all', $css);
}
$tabletWidth = intval($slider->params->get($this->key . 'tablet-width', $width));
$tabletHeight = intval($slider->params->get($this->key . 'tablet-height', $height));
if ($tabletWidth !== $width || $tabletHeight !== $height) {
$css = '';
if ($showThumbnail) {
$css .= 'div#' . $this->slider->elementId . ' .n2-thumbnail-dot img{width:' . $tabletWidth . 'px;height:' . $tabletHeight . 'px}';
} else {
$css .= 'div#' . $this->slider->elementId . ' .n2-thumbnail-dot{min-width:' . $tabletWidth . 'px;min-height:' . $tabletHeight . 'px}';
}
if (!empty($css)) {
$this->slider->addDeviceCSS('tabletportrait', $css);
$this->slider->addDeviceCSS('tabletlandscape', $css);
}
}
$mobileWidth = intval($slider->params->get($this->key . 'mobile-width', $width));
$mobileHeight = intval($slider->params->get($this->key . 'mobile-height', $height));
if ($mobileWidth !== $width || $mobileHeight !== $height) {
$css = '';
if ($showThumbnail) {
$css .= 'div#' . $this->slider->elementId . ' .n2-thumbnail-dot img{width:' . $mobileWidth . 'px;height:' . $mobileHeight . 'px}';
} else {
$css .= 'div#' . $this->slider->elementId . ' .n2-thumbnail-dot{min-width:' . $mobileWidth . 'px;min-height:' . $mobileHeight . 'px}';
}
if (!empty($css)) {
$this->slider->addDeviceCSS('mobileportrait', $css);
$this->slider->addDeviceCSS('mobilelandscape', $css);
}
}
$captionPlacement = $slider->params->get($this->key . 'caption-placement', 'overlay');
if (!$showThumbnail) {
$captionPlacement = 'before';
}
if (!$showTitle && !$showDescription) {
$captionPlacement = 'overlay';
}
$captionSize = intval($slider->params->get($this->key . 'caption-size', 100));
$orientation = $params->get($this->key . 'orientation');
$orientation = $this->getOrientationByPosition($params->get($this->key . 'position-mode'), $params->get($this->key . 'position-area'), $orientation, 'vertical');
$captionExtraStyle = '';
switch ($captionPlacement) {
case 'before':
case 'after':
switch ($orientation) {
case 'vertical':
$captionExtraStyle .= "width: " . $captionSize . "px";
break;
default:
$captionExtraStyle .= "height: " . $captionSize . "px";
}
break;
}
if ($orientation == 'vertical') {
Js::addStaticGroup(self::getAssetsPath() . '/dist/w-thumbnail-vertical.min.js', 'w-thumbnail-vertical');
$slider->features->addInitCallback('new _N2.SmartSliderWidgetThumbnailDefaultVertical(this, ' . json_encode($parameters) . ');');
$slider->sliderType->addJSDependency('SmartSliderWidgetThumbnailDefaultVertical');
} else {
Js::addStaticGroup(self::getAssetsPath() . '/dist/w-thumbnail-horizontal.min.js', 'w-thumbnail-horizontal');
$slider->features->addInitCallback('new _N2.SmartSliderWidgetThumbnailDefaultHorizontal(this, ' . json_encode($parameters) . ');');
$slider->sliderType->addJSDependency('SmartSliderWidgetThumbnailDefaultHorizontal');
}
$group = max(1, intval($params->get($this->key . 'group')));
$style = '';
$size = $params->get($this->key . 'size');
if (is_numeric($size)) {
$size .= '%';
}
if ($orientation == 'horizontal') {
if (substr($size, -1) == '%' || substr($size, -2) == 'px') {
$style .= 'width:' . $size . ';';
if (substr($size, -1) == '%') {
$attributes['data-width-percent'] = substr($size, 0, -1);
}
}
$scrollerStyle = 'grid-template-rows:repeat(' . $group . ', 1fr)';
} else {
if (substr($size, -1) == '%' || substr($size, -2) == 'px') {
$style .= 'height:' . $size . ';';
}
$scrollerStyle = 'grid-template-columns:repeat(' . $group . ', 1fr)';
}
$previous = $next = '';
$nextSizeAttributes = array();
$previousSizeAttributes = array();
$showArrow = intval($slider->params->get($this->key . 'arrow', 1));
if ($showArrow) {
$arrowImagePrevious = $arrowImageNext = ResourceTranslator::toUrl($slider->params->get($this->key . 'arrow-image', ''));
$arrowWidth = intval($slider->params->get($this->key . 'arrow-width', 26));
$commonStyle = '';
if (!empty($arrowWidth)) {
$commonStyle = 'width:' . $arrowWidth . 'px;';
}
$previousStyle = $nextStyle = $commonStyle;
if (empty($arrowImagePrevious)) {
$image = self::getAssetsPath() . '/thumbnail-up-arrow.svg';
FastImageSize::initAttributes($image, $previousSizeAttributes);
$arrowImagePrevious = 'data:image/svg+xml;base64,' . Base64::encode(Filesystem::readFile($image));
if ($orientation === 'horizontal') {
$previousStyle .= 'transform:rotateZ(-90deg);';
}
} else {
FastImageSize::initAttributes(ResourceTranslator::urlToResource($arrowImagePrevious), $previousSizeAttributes);
switch ($orientation) {
case 'vertical':
$previousStyle .= 'transform:rotateY(180deg) rotateX(180deg);';
break;
default:
$previousStyle .= 'transform:rotateZ(180deg);';
}
}
if (empty($arrowImageNext)) {
$image = self::getAssetsPath() . '/thumbnail-down-arrow.svg';
FastImageSize::initAttributes($image, $nextSizeAttributes);
$arrowImageNext = 'data:image/svg+xml;base64,' . Base64::encode(Filesystem::readFile($image));
if ($orientation === 'horizontal') {
$nextStyle .= 'transform:rotateZ(-90deg);';
}
} else {
$nextStyle .= 'transform:none;';
FastImageSize::initAttributes(ResourceTranslator::urlToResource($arrowImageNext), $nextSizeAttributes);
}
$previous = Html::tag('div', array(
'class' => 'nextend-thumbnail-button nextend-thumbnail-previous'
), Html::image($arrowImagePrevious, $slider->params->get($this->key . 'arrow-prev-alt', 'previous arrow'), $previousSizeAttributes + Html::addExcludeLazyLoadAttributes(array(
'style' => $previousStyle,
'loading' => 'lazy'
))));
$next = Html::tag('div', array(
'class' => 'nextend-thumbnail-button nextend-thumbnail-next'
), Html::image($arrowImageNext, $slider->params->get($this->key . 'arrow-next-alt', 'next arrow'), $nextSizeAttributes + Html::addExcludeLazyLoadAttributes(array(
'style' => $nextStyle,
'loading' => 'lazy'
))));
}
$captionStyle = '';
if ($showTitle || $showDescription) {
$captionStyle = $slider->addStyle($params->get($this->key . 'title-style'), 'simple');
}
$titleFont = '';
if ($showTitle) {
$titleFont = $slider->addFont($params->get($this->key . 'title-font'), 'simple');
}
$descriptionFont = '';
if ($showDescription) {
$descriptionFont = $slider->addFont($params->get($this->key . 'description-font'), 'simple');
}
$dots = array();
$slides = $slider->getSlides();
foreach ($slides as $slide) {
$dotHTML = array();
if ($showThumbnail) {
$dotHTML[] = $slide->renderThumbnailImage($width, $height, array(
'alt' => $slide->getThumbnailAltDynamic()
));
$thumbnailType = $slide->getThumbnailType();
if (isset(self::$thumbnailTypes[$thumbnailType])) {
$dotHTML[] = self::$thumbnailTypes[$thumbnailType];
}
}
if ($showTitle || $showDescription) {
$captionHTML = '';
if ($showTitle) {
$title = $slide->getTitle();
if (!empty($title)) {
$captionHTML .= '<div class="' . $titleFont . '">' . $title . '</div>';
}
}
if ($showDescription) {
$description = $slide->getDescription();
if (!empty($description)) {
$captionHTML .= '<div class="' . $descriptionFont . '">' . $description . '</div>';
}
}
if (!empty($captionHTML)) {
$dotHTML[] = Html::tag('div', array(
'class' => $captionStyle . ' n2-ss-caption n2-ow n2-caption-' . $captionPlacement,
'style' => $captionExtraStyle
), $captionHTML);
}
}
$dots[] = Html::tag('div', $slide->showOnAttributes + array(
'class' => 'n2-thumbnail-dot ' . $slideStyle,
'data-slide-public-id' => $slide->getPublicID(),
'role' => 'button',
'aria-label' => $slide->getTitle(),
'tabindex' => '0'
), implode('', $dotHTML));
}
$slider->addLess(self::getAssetsPath() . '/style.n2less', array(
"sliderid" => $slider->elementId
));
return Html::tag('div', Html::mergeAttributes($attributes, $displayAttributes, array(
'class' => 'nextend-thumbnail nextend-thumbnail-default nextend-thumbnail-' . $orientation . ' n2-ow-all',
'data-has-next' => 0,
'data-has-previous' => 0,
'style' => $style
)), Html::tag('div', array(
'class' => 'nextend-thumbnail-inner ' . $barStyle
), Html::tag('div', array(
'class' => 'nextend-thumbnail-scroller n2-align-content-' . $params->get('widget-thumbnail-align-content'),
'style' => $scrollerStyle
), implode('', $dots))) . $previous . $next);
}
protected function translateArea($area) {
if ($area == 5) {
return 'left';
} else if ($area == 8) {
return 'right';
}
return parent::translateArea($area);
}
}