first
This commit is contained in:
@ -0,0 +1,13 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Nextend\SmartSlider3\Widget\Autoplay;
|
||||
|
||||
|
||||
use Nextend\SmartSlider3\Widget\AbstractWidget;
|
||||
|
||||
abstract class AbstractWidgetAutoplay extends AbstractWidget {
|
||||
|
||||
protected $key = 'widget-autoplay-';
|
||||
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
<?php
|
||||
|
||||
namespace Nextend\SmartSlider3\Widget\Autoplay\AutoplayImage;
|
||||
|
||||
use Nextend\Framework\Form\Element\Grouping;
|
||||
use Nextend\Framework\Form\Element\OnOff;
|
||||
use Nextend\Framework\Form\Element\Radio\ImageListFromFolder;
|
||||
use Nextend\Framework\Form\Element\Style;
|
||||
use Nextend\Framework\Form\Element\Text\Color;
|
||||
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\Autoplay\AbstractWidgetAutoplay;
|
||||
|
||||
class AutoplayImage extends AbstractWidgetAutoplay {
|
||||
|
||||
protected $defaults = array(
|
||||
'widget-autoplay-desktop-image-width' => 16,
|
||||
'widget-autoplay-tablet-image-width' => 16,
|
||||
'widget-autoplay-mobile-image-width' => 8,
|
||||
'widget-autoplay-play-image' => '',
|
||||
'widget-autoplay-play-color' => 'ffffffcc',
|
||||
'widget-autoplay-play' => '$ss$/plugins/widgetautoplay/image/image/play/small-light.svg',
|
||||
'widget-autoplay-style' => '{"data":[{"backgroundcolor":"000000ab","padding":"10|*|10|*|10|*|10|*|px","boxshadow":"0|*|0|*|0|*|0|*|000000ff","border":"0|*|solid|*|000000ff","borderradius":"3","extra":""},{"backgroundcolor":"000000ab"}]}',
|
||||
'widget-autoplay-position-mode' => 'simple',
|
||||
'widget-autoplay-position-area' => 4,
|
||||
'widget-autoplay-position-offset' => 15,
|
||||
'widget-autoplay-mirror' => 1,
|
||||
'widget-autoplay-pause-image' => '',
|
||||
'widget-autoplay-pause-color' => 'ffffffcc',
|
||||
'widget-autoplay-pause' => '$ss$/plugins/widgetautoplay/image/image/pause/small-light.svg'
|
||||
);
|
||||
|
||||
|
||||
public function renderFields($container) {
|
||||
|
||||
$rowIcon = new FieldsetRow($container, 'widget-autoplay-image-row-icon');
|
||||
|
||||
$fieldPlay = new ImageListFromFolder($rowIcon, 'widget-autoplay-play', n2_('Play'), '', array(
|
||||
'folder' => self::getAssetsPath() . '/play/',
|
||||
'hasDisabled' => false
|
||||
));
|
||||
|
||||
new Color($rowIcon, 'widget-autoplay-play-color', n2_('Color'), '', array(
|
||||
'alpha' => true
|
||||
));
|
||||
|
||||
new Style($rowIcon, 'widget-autoplay-style', n2_('Style'), '', array(
|
||||
'mode' => 'button',
|
||||
'preview' => 'SmartSliderAdminWidgetAutoplayImage'
|
||||
));
|
||||
|
||||
$row2 = new FieldsetRow($container, 'widget-autoplay-image-row-2');
|
||||
|
||||
new Number($row2, 'widget-autoplay-desktop-image-width', n2_('Image width - Desktop'), '', array(
|
||||
'wide' => 4,
|
||||
'unit' => 'px'
|
||||
));
|
||||
|
||||
new Number($row2, 'widget-autoplay-tablet-image-width', n2_('Image width - Tablet'), '', array(
|
||||
'wide' => 4,
|
||||
'unit' => 'px'
|
||||
));
|
||||
|
||||
new Number($row2, 'widget-autoplay-mobile-image-width', n2_('Image width - Mobile'), '', array(
|
||||
'wide' => 4,
|
||||
'unit' => 'px'
|
||||
));
|
||||
|
||||
new WidgetPosition($row2, 'widget-autoplay-position', n2_('Position'));
|
||||
|
||||
}
|
||||
|
||||
public function prepareExport($export, $params) {
|
||||
$export->addImage($params->get($this->key . 'play-image', ''));
|
||||
$export->addImage($params->get($this->key . 'pause-image', ''));
|
||||
|
||||
$export->addVisual($params->get($this->key . 'style'));
|
||||
}
|
||||
|
||||
public function prepareImport($import, $params) {
|
||||
|
||||
$params->set($this->key . 'play-image', $import->fixImage($params->get($this->key . 'play-image', '')));
|
||||
$params->set($this->key . 'pause-image', $import->fixImage($params->get($this->key . 'pause-image', '')));
|
||||
|
||||
$params->set($this->key . 'style', $import->fixSection($params->get($this->key . 'style', '')));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,159 @@
|
||||
<?php
|
||||
|
||||
namespace Nextend\SmartSlider3\Widget\Autoplay\AutoplayImage;
|
||||
|
||||
|
||||
use Nextend\Framework\Asset\Js\Js;
|
||||
use Nextend\Framework\Cast;
|
||||
use Nextend\Framework\FastImageSize\FastImageSize;
|
||||
use Nextend\Framework\Filesystem\Filesystem;
|
||||
use Nextend\Framework\Misc\Base64;
|
||||
use Nextend\Framework\Parser\Color;
|
||||
use Nextend\Framework\ResourceTranslator\ResourceTranslator;
|
||||
use Nextend\Framework\View\Html;
|
||||
use Nextend\SmartSlider3\Widget\AbstractWidgetFrontend;
|
||||
|
||||
class AutoplayImageFrontend extends AbstractWidgetFrontend {
|
||||
|
||||
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;
|
||||
|
||||
if (!$params->get('autoplay', 0)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$sizeAttributes = array();
|
||||
|
||||
$html = '';
|
||||
|
||||
$playImage = $params->get($this->key . 'play-image');
|
||||
$playValue = $params->get($this->key . 'play');
|
||||
$playColor = $params->get($this->key . 'play-color');
|
||||
|
||||
if (empty($playImage)) {
|
||||
|
||||
if ($playValue == -1) {
|
||||
$play = null;
|
||||
} else {
|
||||
$play = ResourceTranslator::pathToResource(self::getAssetsPath() . '/play/' . basename($playValue));
|
||||
}
|
||||
} else {
|
||||
$play = $playImage;
|
||||
}
|
||||
|
||||
if ($params->get($this->key . 'mirror')) {
|
||||
$pauseColor = $playColor;
|
||||
|
||||
if (!empty($playImage)) {
|
||||
$pause = $playImage;
|
||||
} else {
|
||||
$pause = ResourceTranslator::pathToResource(self::getAssetsPath() . '/pause/' . basename($playValue));
|
||||
}
|
||||
} else {
|
||||
$pause = $params->get($this->key . 'pause-image');
|
||||
$pauseColor = $params->get($this->key . 'pause-color');
|
||||
|
||||
if (empty($pause)) {
|
||||
$pauseValue = $params->get($this->key . 'pause');
|
||||
if ($pauseValue == -1) {
|
||||
$pause = null;
|
||||
} else {
|
||||
$pause = ResourceTranslator::pathToResource(self::getAssetsPath() . '/pause/' . basename($pauseValue));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$ext = pathinfo($play, PATHINFO_EXTENSION);
|
||||
if ($ext == 'svg' && ResourceTranslator::isResource($play)) {
|
||||
|
||||
FastImageSize::initAttributes($playColor, $sizeAttributes);
|
||||
|
||||
list($color, $opacity) = Color::colorToSVG($playColor);
|
||||
$play = 'data:image/svg+xml;base64,' . Base64::encode(str_replace(array(
|
||||
'fill="#FFF"',
|
||||
'opacity="1"'
|
||||
), array(
|
||||
'fill="#' . $color . '"',
|
||||
'opacity="' . $opacity . '"'
|
||||
), Filesystem::readFile(ResourceTranslator::toPath($play))));
|
||||
} else {
|
||||
FastImageSize::initAttributes($play, $sizeAttributes);
|
||||
$play = ResourceTranslator::toUrl($play);
|
||||
}
|
||||
|
||||
$ext = pathinfo($pause, PATHINFO_EXTENSION);
|
||||
if ($ext == 'svg' && ResourceTranslator::isResource($pause)) {
|
||||
list($color, $opacity) = Color::colorToSVG($pauseColor);
|
||||
$pause = 'data:image/svg+xml;base64,' . Base64::encode(str_replace(array(
|
||||
'fill="#FFF"',
|
||||
'opacity="1"'
|
||||
), array(
|
||||
'fill="#' . $color . '"',
|
||||
'opacity="' . $opacity . '"'
|
||||
), Filesystem::readFile(ResourceTranslator::toPath($pause))));
|
||||
} else {
|
||||
$pause = ResourceTranslator::toUrl($pause);
|
||||
}
|
||||
|
||||
if ($play && $pause) {
|
||||
|
||||
$desktopWidth = $params->get('widget-autoplay-desktop-image-width');
|
||||
$tabletWidth = $params->get('widget-autoplay-tablet-image-width');
|
||||
$mobileWidth = $params->get('widget-autoplay-mobile-image-width');
|
||||
|
||||
$slider->addDeviceCSS('all', 'div#' . $id . ' .nextend-autoplay img{width: ' . $desktopWidth . 'px}');
|
||||
if ($tabletWidth != $desktopWidth) {
|
||||
$slider->addDeviceCSS('tabletportrait', 'div#' . $id . ' .nextend-autoplay img{width: ' . $tabletWidth . 'px}');
|
||||
$slider->addDeviceCSS('tabletlandscape', 'div#' . $id . ' .nextend-autoplay img{width: ' . $tabletWidth . 'px}');
|
||||
}
|
||||
if ($mobileWidth != $desktopWidth) {
|
||||
$slider->addDeviceCSS('mobileportrait', 'div#' . $id . ' .nextend-autoplay img{width: ' . $mobileWidth . 'px}');
|
||||
$slider->addDeviceCSS('mobilelandscape', 'div#' . $id . ' .nextend-autoplay img{width: ' . $mobileWidth . 'px}');
|
||||
}
|
||||
|
||||
$slider->addLess(self::getAssetsPath() . '/style.n2less', array(
|
||||
"sliderid" => $slider->elementId
|
||||
));
|
||||
|
||||
Js::addStaticGroup(self::getAssetsPath() . '/dist/w-autoplay.min.js', 'w-autoplay');
|
||||
|
||||
|
||||
$displayAttributes = $this->getDisplayAttributes($params, $this->key, 1);
|
||||
|
||||
$styleClass = $slider->addStyle($params->get($this->key . 'style'), 'heading');
|
||||
|
||||
$slider->features->addInitCallback('new _N2.SmartSliderWidgetAutoplayImage(this, ' . Cast::floatToString($params->get($this->key . 'responsive-desktop')) . ', ' . Cast::floatToString($params->get($this->key . 'responsive-tablet')) . ', ' . Cast::floatToString($params->get($this->key . 'responsive-mobile')) . ');');
|
||||
|
||||
$slider->sliderType->addJSDependency('SmartSliderWidgetAutoplayImage');
|
||||
|
||||
$html = Html::tag('div', Html::mergeAttributes($attributes, $displayAttributes, array(
|
||||
'class' => $styleClass . 'nextend-autoplay n2-ow-all nextend-autoplay-image',
|
||||
'role' => 'button',
|
||||
'aria-label' => n2_('Play autoplay'),
|
||||
'data-pause-label' => n2_('Pause autoplay'),
|
||||
'data-play-label' => n2_('Play autoplay'),
|
||||
'tabindex' => '0'
|
||||
)), Html::image($play, 'Play', $sizeAttributes + HTML::addExcludeLazyLoadAttributes(array(
|
||||
'class' => 'nextend-autoplay-play'
|
||||
))) . Html::image($pause, 'Pause', $sizeAttributes + HTML::addExcludeLazyLoadAttributes(array(
|
||||
'class' => 'nextend-autoplay-pause'
|
||||
))));
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user