8889841cThumbnailBasicFrontend.php 0000644 00000033047 15051562712 0011655 0 ustar 00 ''
);
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 .= '' . $title . '
';
}
}
if ($showDescription) {
$description = $slide->getDescription();
if (!empty($description)) {
$captionHTML .= '' . $description . '
';
}
}
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);
}
} ThumbnailBasic.php 0000644 00000016205 15051562712 0010152 0 ustar 00 '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-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.')
));
}
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', '')));
}
}