first
This commit is contained in:
@ -0,0 +1,891 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Nextend\SmartSlider3\Renderable\Component;
|
||||
|
||||
use Nextend\Framework\Data\Data;
|
||||
use Nextend\Framework\Parser\Color;
|
||||
use Nextend\Framework\ResourceTranslator\ResourceTranslator;
|
||||
use Nextend\Framework\View\Html;
|
||||
use Nextend\SmartSlider3\BackupSlider\ExportSlider;
|
||||
use Nextend\SmartSlider3\BackupSlider\ImportSlider;
|
||||
use Nextend\SmartSlider3\Renderable\AbstractRenderableOwner;
|
||||
use Nextend\SmartSlider3\Renderable\ComponentContainer;
|
||||
use Nextend\SmartSlider3\Renderable\Placement\AbstractPlacement;
|
||||
use Nextend\SmartSlider3\Renderable\Placement\PlacementAbsolute;
|
||||
use Nextend\SmartSlider3\Renderable\Placement\PlacementDefault;
|
||||
use Nextend\SmartSlider3\Renderable\Placement\PlacementNormal;
|
||||
use Nextend\SmartSlider3\Slider\Slide;
|
||||
|
||||
abstract class AbstractComponent {
|
||||
|
||||
public static $isAdmin = false;
|
||||
|
||||
/**
|
||||
* @var Slide
|
||||
*/
|
||||
protected $owner;
|
||||
|
||||
/**
|
||||
* @var Style
|
||||
*/
|
||||
public $style;
|
||||
|
||||
protected $type = '';
|
||||
|
||||
protected $name = '';
|
||||
/**
|
||||
* @var AbstractComponent|bool
|
||||
*/
|
||||
protected $group;
|
||||
|
||||
/**
|
||||
* @var AbstractPlacement
|
||||
*/
|
||||
protected $placement;
|
||||
|
||||
/**
|
||||
* @var ComponentContainer
|
||||
*/
|
||||
protected $container = false;
|
||||
|
||||
protected $fontSizeModifier = 100;
|
||||
|
||||
protected $attributes = array(
|
||||
'class' => 'n2-ss-layer n2-ow',
|
||||
'style' => ''
|
||||
);
|
||||
|
||||
public $data;
|
||||
|
||||
protected $localStyle = array();
|
||||
|
||||
protected $localRawStyles = array();
|
||||
|
||||
protected $hasBackground = false;
|
||||
|
||||
/**
|
||||
* AbstractBuilderComponent constructor.
|
||||
*
|
||||
* @param int $index
|
||||
* @param AbstractRenderableOwner $owner
|
||||
* @param AbstractComponent|bool $group
|
||||
* @param $data
|
||||
*/
|
||||
public function __construct($index, $owner, $group, $data) {
|
||||
$this->owner = $owner;
|
||||
$this->group = $group;
|
||||
|
||||
$this->style = new Style($this);
|
||||
|
||||
$this->data = new Data($data);
|
||||
|
||||
$this->fontSizeModifier = $this->data->get('desktopportraitfontsize', 100);
|
||||
if (!is_numeric($this->fontSizeModifier)) {
|
||||
$this->fontSizeModifier = 100;
|
||||
}
|
||||
|
||||
switch ($this->getPlacement()) {
|
||||
case 'normal':
|
||||
$this->placement = new PlacementNormal($this, $index);
|
||||
break;
|
||||
case 'default':
|
||||
$this->placement = new PlacementDefault($this, $index);
|
||||
break;
|
||||
case 'absolute':
|
||||
default:
|
||||
$this->placement = new PlacementAbsolute($this, $index);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
public function getPlacement() {
|
||||
|
||||
if ($this->data->has('pm')) {
|
||||
return $this->data->get('pm');
|
||||
}
|
||||
|
||||
if ($this->group->getType() == 'slide') {
|
||||
return 'absolute';
|
||||
}
|
||||
|
||||
return 'normal';
|
||||
}
|
||||
|
||||
/**
|
||||
* @return Slide
|
||||
*/
|
||||
public function getOwner() {
|
||||
return $this->owner;
|
||||
}
|
||||
|
||||
public function isRenderAllowed() {
|
||||
$generatorVisible = $this->data->get('generatorvisible', '');
|
||||
if ($this->owner->isComponentVisible($generatorVisible) && !self::$isAdmin) {
|
||||
$filled = $this->owner->fill($generatorVisible);
|
||||
if (empty($filled)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
public abstract function render($isAdmin);
|
||||
|
||||
protected function renderContainer($isAdmin) {
|
||||
|
||||
if ($this->container) {
|
||||
return $this->container->render($isAdmin);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
protected function admin() {
|
||||
|
||||
$this->createProperty('id', '');
|
||||
$this->createProperty('uniqueclass', '');
|
||||
$this->createProperty('zindex', 2);
|
||||
$this->createProperty('class', '');
|
||||
$this->createProperty('name', $this->name);
|
||||
$this->createProperty('namesynced', 1);
|
||||
$this->createProperty('status');
|
||||
$this->createProperty('generatorvisible', '');
|
||||
|
||||
$this->placement->adminAttributes($this->attributes);
|
||||
}
|
||||
|
||||
public function spacingToPxValue($value) {
|
||||
$values = explode('|*|', $value);
|
||||
unset($values[4]);
|
||||
|
||||
return array_map('intval', $values) + array(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
protected function prepareHTML() {
|
||||
$this->attributes['data-sstype'] = $this->type;
|
||||
|
||||
$id = $this->data->get('id', '');
|
||||
if (!empty($id)) {
|
||||
$this->attributes['id'] = $id;
|
||||
}
|
||||
|
||||
$class = $this->data->get('class', '');
|
||||
if (!empty($class)) {
|
||||
$this->attributes['class'] .= ' ' . $this->getOwner()
|
||||
->fill($class);
|
||||
}
|
||||
|
||||
$uniqueClass = $this->data->get('uniqueclass', '');
|
||||
if (!empty($uniqueClass)) {
|
||||
$this->addUniqueClass($uniqueClass . $this->owner->unique);
|
||||
}
|
||||
|
||||
$zIndex = intval($this->data->get('zindex', 2));
|
||||
if ($zIndex != 2) {
|
||||
$this->attributes['style'] .= 'z-index:' . $zIndex . ';';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
protected function addUniqueClass($class) {
|
||||
$this->attributes['class'] .= ' ' . $class;
|
||||
}
|
||||
|
||||
protected function runPlugins() {
|
||||
$this->pluginRotation();
|
||||
$this->pluginShowOn();
|
||||
$this->pluginFontSize();
|
||||
$this->pluginParallax();
|
||||
}
|
||||
|
||||
protected function renderPlugins($html) {
|
||||
|
||||
return $this->pluginCrop($html);
|
||||
}
|
||||
|
||||
private function pluginRotation() {
|
||||
|
||||
$rotation = $this->data->get('rotation', 0);
|
||||
if ($rotation) {
|
||||
$this->createProperty('rotation', 0);
|
||||
$this->attributes['style'] .= 'transform:rotate(' . $rotation . 'deg);';
|
||||
}
|
||||
}
|
||||
|
||||
private function pluginCrop($html) {
|
||||
|
||||
$cropStyle = $this->data->get('crop', 'visible');
|
||||
|
||||
if (self::$isAdmin) {
|
||||
if ($cropStyle == 'auto') {
|
||||
$cropStyle = 'hidden';
|
||||
}
|
||||
} else {
|
||||
if ($cropStyle == 'auto') {
|
||||
$this->attributes['class'] .= ' n2_container_scrollable';
|
||||
}
|
||||
}
|
||||
|
||||
if ($cropStyle == 'mask') {
|
||||
$cropStyle = 'hidden';
|
||||
$html = Html::tag('div', array('class' => 'n2-ss-layer-mask n2-ss-layer-wrapper'), $html);
|
||||
|
||||
$this->attributes['data-animatableselector'] = '.n2-ss-layer-mask';
|
||||
}
|
||||
|
||||
if (!empty($cropStyle) && $cropStyle != 'visible') {
|
||||
$this->attributes['style'] .= 'overflow:' . $cropStyle . ';';
|
||||
}
|
||||
|
||||
if (self::$isAdmin) {
|
||||
$crop = $this->data->get('crop', 'visible');
|
||||
if (empty($crop)) {
|
||||
$crop = 'visible';
|
||||
}
|
||||
$this->attributes['data-crop'] = $crop;
|
||||
}
|
||||
|
||||
return $html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform V1 animations to V2
|
||||
*
|
||||
* @param $data
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
private function pluginAnimationsConvertV1ToV2($data) {
|
||||
if (empty($data)) {
|
||||
return array();
|
||||
}
|
||||
|
||||
if (isset($data['in'])) {
|
||||
if (!isset($data['basic'])) {
|
||||
$data['basic'] = array(
|
||||
'in' => array()
|
||||
);
|
||||
} else if (!isset($data['basic']['in'])) {
|
||||
$data['basic']['in'] = array();
|
||||
}
|
||||
$this->pluginAnimationsConvertV1ToV2RemoveName($data['in']);
|
||||
if (isset($data['in'][0]['delay']) && isset($data['repeatable']) && $data['repeatable'] == 1) {
|
||||
if ($data['in'][0]['delay'] > 0) {
|
||||
$data['startDelay'] = $data['in'][0]['delay'];
|
||||
}
|
||||
unset($data['in'][0]['delay']);
|
||||
}
|
||||
$data['basic']['in']['keyFrames'] = $data['in'];
|
||||
unset($data['in']);
|
||||
}
|
||||
|
||||
if (isset($data['specialZeroIn'])) {
|
||||
if (isset($data['basic']['in'])) {
|
||||
$data['basic']['in']['specialZero'] = $data['specialZeroIn'];
|
||||
}
|
||||
unset($data['specialZeroIn']);
|
||||
}
|
||||
|
||||
if (isset($data['transformOriginIn'])) {
|
||||
if (isset($data['basic']['in'])) {
|
||||
$data['basic']['in']['transformOrigin'] = $data['transformOriginIn'];
|
||||
}
|
||||
unset($data['transformOriginIn']);
|
||||
}
|
||||
|
||||
if (isset($data['loop'])) {
|
||||
if (!isset($data['basic'])) {
|
||||
$data['basic'] = array(
|
||||
'loop' => array()
|
||||
);
|
||||
} else if (!isset($data['basic']['loop'])) {
|
||||
$data['basic']['loop'] = array();
|
||||
}
|
||||
$this->pluginAnimationsConvertV1ToV2RemoveName($data['loop']);
|
||||
$data['basic']['loop']['keyFrames'] = $data['loop'];
|
||||
unset($data['loop']);
|
||||
}
|
||||
|
||||
if (isset($data['repeatCount'])) {
|
||||
if (isset($data['basic']['loop'])) {
|
||||
$data['basic']['loop']['repeatCount'] = $data['repeatCount'];
|
||||
}
|
||||
unset($data['repeatCount']);
|
||||
}
|
||||
|
||||
if (isset($data['repeatStartDelay'])) {
|
||||
if (isset($data['basic']['loop'])) {
|
||||
$data['basic']['loop']['repeatStartDelay'] = $data['repeatStartDelay'];
|
||||
}
|
||||
unset($data['repeatStartDelay']);
|
||||
}
|
||||
|
||||
if (isset($data['transformOriginLoop'])) {
|
||||
if (isset($data['basic']['loop'])) {
|
||||
$data['basic']['loop']['transformOrigin'] = $data['transformOriginLoop'];
|
||||
}
|
||||
unset($data['transformOriginLoop']);
|
||||
}
|
||||
|
||||
if (isset($data['out'])) {
|
||||
if (!isset($data['basic'])) {
|
||||
$data['basic'] = array(
|
||||
'out' => array()
|
||||
);
|
||||
} else if (!isset($data['basic']['out'])) {
|
||||
$data['basic']['out'] = array();
|
||||
}
|
||||
$this->pluginAnimationsConvertV1ToV2RemoveName($data['out']);
|
||||
$data['basic']['out']['keyFrames'] = $data['out'];
|
||||
unset($data['out']);
|
||||
}
|
||||
|
||||
if (isset($data['transformOriginOut'])) {
|
||||
if (isset($data['basic']['out'])) {
|
||||
$data['basic']['out']['transformOrigin'] = $data['transformOriginOut'];
|
||||
}
|
||||
unset($data['transformOriginOut']);
|
||||
}
|
||||
|
||||
if (!isset($data['instantOut']) || $data['instantOut'] == '1') {
|
||||
if (empty($data['outPlayEvent']) && $this->owner->getSlider()->params->get('layer-animation-play-mode') === 'forced') {
|
||||
$data['outPlayEvent'] = 'InstantOut';
|
||||
}
|
||||
}
|
||||
|
||||
if (isset($data['instantOut'])) {
|
||||
unset($data['instantOut']);
|
||||
}
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
private function pluginAnimationsConvertV1ToV2RemoveName(&$keyFrames) {
|
||||
for ($i = 0; $i < count($keyFrames); $i++) {
|
||||
if (isset($keyFrames[$i]['name'])) {
|
||||
unset($keyFrames[$i]['name']);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
private function pluginAnimations() {
|
||||
}
|
||||
|
||||
private static function fixAnimationArray(&$array, $key) {
|
||||
if (isset($array[$key]) && is_array($array[$key])) {
|
||||
for ($i = 0; $i < count($array[$key]); $i++) {
|
||||
$array[$key][$i] = (object)$array[$key][$i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private function pluginAnimationGetEventAttributes() {
|
||||
|
||||
if (!self::$isAdmin) {
|
||||
$elementID = $this->owner->getElementID();
|
||||
|
||||
$click = $this->data->get('click');
|
||||
if (!empty($click)) {
|
||||
$this->attributes['data-click'] = $this->pluginAnimationParseEventCode($click, $elementID);
|
||||
}
|
||||
$mouseenter = $this->data->get('mouseenter');
|
||||
if (!empty($mouseenter)) {
|
||||
$this->attributes['data-mouseenter'] = $this->pluginAnimationParseEventCode($mouseenter, $elementID);
|
||||
}
|
||||
$mouseleave = $this->data->get('mouseleave');
|
||||
if (!empty($mouseleave)) {
|
||||
$this->attributes['data-mouseleave'] = $this->pluginAnimationParseEventCode($mouseleave, $elementID);
|
||||
}
|
||||
$play = $this->data->get('play');
|
||||
if (!empty($play)) {
|
||||
$this->attributes['data-play'] = $this->pluginAnimationParseEventCode($play, $elementID);
|
||||
}
|
||||
$pause = $this->data->get('pause');
|
||||
if (!empty($pause)) {
|
||||
$this->attributes['data-pause'] = $this->pluginAnimationParseEventCode($pause, $elementID);
|
||||
}
|
||||
$stop = $this->data->get('stop');
|
||||
if (!empty($stop)) {
|
||||
$this->attributes['data-stop'] = $this->pluginAnimationParseEventCode($stop, $elementID);
|
||||
}
|
||||
} else {
|
||||
|
||||
$click = $this->data->get('click');
|
||||
if (!empty($click)) {
|
||||
$this->attributes['data-click'] = $click;
|
||||
}
|
||||
$mouseenter = $this->data->get('mouseenter');
|
||||
if (!empty($mouseenter)) {
|
||||
$this->attributes['data-mouseenter'] = $mouseenter;
|
||||
}
|
||||
$mouseleave = $this->data->get('mouseleave');
|
||||
if (!empty($mouseleave)) {
|
||||
$this->attributes['data-mouseleave'] = $mouseleave;
|
||||
}
|
||||
$play = $this->data->get('play');
|
||||
if (!empty($play)) {
|
||||
$this->attributes['data-play'] = $play;
|
||||
}
|
||||
$pause = $this->data->get('pause');
|
||||
if (!empty($pause)) {
|
||||
$this->attributes['data-pause'] = $pause;
|
||||
}
|
||||
$stop = $this->data->get('stop');
|
||||
if (!empty($stop)) {
|
||||
$this->attributes['data-stop'] = $stop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function pluginAnimationParseEventCode($code, $elementId) {
|
||||
if (preg_match('/^[a-zA-Z0-9_\-,]+$/', $code)) {
|
||||
if (is_numeric($code)) {
|
||||
$code = "window['" . $elementId . "'].changeTo(" . ($code - 1) . ");";
|
||||
} else if ($code == 'next') {
|
||||
$code = "window['" . $elementId . "'].next();";
|
||||
} else if ($code == 'previous') {
|
||||
$code = "window['" . $elementId . "'].previous();";
|
||||
} else {
|
||||
$code = "n2ss.trigger(e.currentTarget, '" . $code . "');";
|
||||
}
|
||||
}
|
||||
|
||||
return $code;
|
||||
}
|
||||
|
||||
|
||||
private function pluginShowOn() {
|
||||
|
||||
if (self::$isAdmin) {
|
||||
$this->createDeviceProperty('', 1);
|
||||
}
|
||||
|
||||
$devices = $this->owner->getAvailableDevices();
|
||||
|
||||
foreach ($devices as $device) {
|
||||
if (!$this->isShown($device)) {
|
||||
$this->attributes['data-hide' . $device] = 1;
|
||||
$this->style->addOnly($device, '', 'display:none');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function isShown($device) {
|
||||
|
||||
return intval($this->data->get($device, 1)) === 1;
|
||||
}
|
||||
|
||||
protected function pluginFontSize() {
|
||||
|
||||
if (self::$isAdmin) {
|
||||
$this->createDeviceProperty('fontsize', 100);
|
||||
}
|
||||
|
||||
$devices = $this->owner->getAvailableDevices();
|
||||
$desktopFontSize = $this->data->get('desktopportraitfontsize');
|
||||
foreach ($devices as $device) {
|
||||
$fontSize = $this->data->get($device . 'fontsize');
|
||||
if ($fontSize !== '') {
|
||||
if ($device === 'desktopportrait') {
|
||||
if ($fontSize != 100) {
|
||||
$this->style->add($device, '', '--ssfont-scale:' . $fontSize / 100 . '');
|
||||
}
|
||||
} else if ($fontSize != $desktopFontSize) {
|
||||
$this->style->add($device, '', '--ssfont-scale:' . $fontSize / 100 . '');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function pluginParallax() {
|
||||
|
||||
$parallax = intval($this->data->get('parallax', 0));
|
||||
if (self::$isAdmin) {
|
||||
$this->attributes['data-parallax'] = $parallax;
|
||||
} else if ($parallax >= 1) {
|
||||
/**
|
||||
* FlatSome theme use data-parallax and we are conflicting with it.
|
||||
*
|
||||
* @see SSDEV-2769
|
||||
*/
|
||||
$this->attributes['data-ssparallax'] = $parallax;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public function createProperty($name, $default = null) {
|
||||
$this->attributes['data-' . $name] = $this->data->get($name, $default);
|
||||
}
|
||||
|
||||
public function createColorProperty($name, $allowVariable, $default = null) {
|
||||
$value = $this->data->get($name, $default);
|
||||
|
||||
if (!$allowVariable || ($value !== NULL && substr($value, 0, 1) != '{')) {
|
||||
$l = strlen($value);
|
||||
if (($l != 6 && $l != 8) || !preg_match('/^[0-9A-Fa-f]+$/', $value)) {
|
||||
$value = $default;
|
||||
}
|
||||
}
|
||||
$this->attributes['data-' . $name] = $value;
|
||||
}
|
||||
|
||||
public function createDeviceProperty($name, $default = null) {
|
||||
$device = 'desktopportrait';
|
||||
|
||||
$this->attributes['data-' . $device . $name] = $this->data->get($device . $name, $default);
|
||||
|
||||
$devices = array(
|
||||
'desktoplandscape',
|
||||
'tabletportrait',
|
||||
'tabletlandscape',
|
||||
'mobileportrait',
|
||||
'mobilelandscape'
|
||||
);
|
||||
foreach ($devices as $device) {
|
||||
$this->attributes['data-' . $device . $name] = $this->data->get($device . $name, null);
|
||||
}
|
||||
}
|
||||
|
||||
protected function renderBackground() {
|
||||
|
||||
$backgroundStyle = '';
|
||||
$image = $this->owner->fill($this->data->get('bgimage', ''));
|
||||
if ($image != '') {
|
||||
$x = intval($this->data->get('bgimagex', 50));
|
||||
$y = intval($this->data->get('bgimagey', 50));
|
||||
|
||||
$backgroundStyle .= '--n2bgimage:URL("' . esc_url(ResourceTranslator::toUrl($image)) . '");';
|
||||
$backgroundStyle .= 'background-position:50% 50%,' . $x . '% ' . $y . '%;';
|
||||
$this->hasBackground = true;
|
||||
|
||||
$optimizedData = $this->owner->optimizeImageWebP($image);
|
||||
|
||||
if (isset($optimizedData['normal'])) {
|
||||
$this->owner->addImage($optimizedData['normal']['src']);
|
||||
|
||||
$this->localRawStyles[] = '.n2webp @rule-inner{--n2bgimage: URL(' . $optimizedData['normal']['src'] . ')}';
|
||||
}
|
||||
|
||||
if (isset($optimizedData['medium'])) {
|
||||
$this->owner->addImage($optimizedData['medium']['src']);
|
||||
|
||||
$this->localRawStyles[] = '@media (max-width: ' . $optimizedData['medium']['width'] . 'px) {.n2webp @rule-inner{--n2bgimage: URL(' . $optimizedData['medium']['src'] . ')}}';
|
||||
}
|
||||
|
||||
if (isset($optimizedData['small'])) {
|
||||
$this->owner->addImage($optimizedData['small']['src']);
|
||||
|
||||
$this->localRawStyles[] = '@media (max-width: ' . $optimizedData['small']['width'] . 'px) {.n2webp @rule-inner{--n2bgimage: URL(' . $optimizedData['small']['src'] . ')}}';
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
$color = $this->owner->fill($this->data->get('bgcolor', '00000000'));
|
||||
if (empty($color)) {
|
||||
$color = '00000000';
|
||||
}
|
||||
$gradient = $this->data->get('bgcolorgradient', 'off');
|
||||
$colorEnd = $this->owner->fill($this->data->get('bgcolorgradientend', '00000000'));
|
||||
if (empty($colorEnd)) {
|
||||
$colorEnd = '00000000';
|
||||
}
|
||||
$this->addLocalStyle('normal', 'background', $this->getBackgroundCSS($color, $gradient, $colorEnd, $backgroundStyle) . $backgroundStyle);
|
||||
|
||||
|
||||
$colorHover = $this->owner->fill($this->data->get('bgcolor-hover'));
|
||||
$gradientHover = $this->data->get('bgcolorgradient-hover');
|
||||
$colorEndHover = $this->owner->fill($this->data->get('bgcolorgradientend-hover'));
|
||||
$isHoverDifferent = false;
|
||||
if (!empty($colorHover) && $colorHover != $color) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if (!empty($gradientHover) && $gradientHover != $gradient) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if (!empty($colorEndHover) && $colorEndHover != $colorEnd) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if ($isHoverDifferent) {
|
||||
if (empty($colorHover)) $colorHover = $color;
|
||||
if (empty($gradientHover)) $gradientHover = $gradient;
|
||||
if (empty($colorEndHover)) $colorEndHover = $colorEnd;
|
||||
|
||||
$this->addLocalStyle('hover', 'background', $this->getBackgroundCSS($colorHover, $gradientHover, $colorEndHover, $backgroundStyle, true));
|
||||
}
|
||||
}
|
||||
|
||||
protected function getBackgroundCSS($color, $gradient, $colorend, $backgroundStyle, $isHover = false) {
|
||||
if (Color::hex2alpha($color) != 0 || ($gradient != 'off' && Color::hex2alpha($colorend) != 0) || $isHover) {
|
||||
$this->hasBackground = true;
|
||||
switch ($gradient) {
|
||||
case 'horizontal':
|
||||
return '--n2bggradient:linear-gradient(to right, ' . Color::colorToRGBA($color) . ' 0%,' . Color::colorToRGBA($colorend) . ' 100%);';
|
||||
case 'vertical':
|
||||
return '--n2bggradient:linear-gradient(to bottom, ' . Color::colorToRGBA($color) . ' 0%,' . Color::colorToRGBA($colorend) . ' 100%);';
|
||||
case 'diagonal1':
|
||||
return '--n2bggradient:linear-gradient(45deg, ' . Color::colorToRGBA($color) . ' 0%,' . Color::colorToRGBA($colorend) . ' 100%);';
|
||||
case 'diagonal2':
|
||||
return '--n2bggradient:linear-gradient(135deg, ' . Color::colorToRGBA($color) . ' 0%,' . Color::colorToRGBA($colorend) . ' 100%);';
|
||||
case 'off':
|
||||
default:
|
||||
if (!empty($backgroundStyle)) {
|
||||
return "--n2bggradient:linear-gradient(" . Color::colorToRGBA($color) . ", " . Color::colorToRGBA($color) . ");";
|
||||
} else {
|
||||
return "background-color:" . Color::colorToRGBA($color) . ';';
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @param AbstractRenderableOwner $slide
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function getFilled($slide, &$layer) {
|
||||
if (!empty($layer['uniqueclass'])) {
|
||||
$layer['uniqueclass'] .= $slide->unique;
|
||||
}
|
||||
if (!empty($layer['class'])) {
|
||||
$layer['class'] = $slide->fill($layer['class']);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param ExportSlider $export
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function prepareExport($export, $layer) {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param ImportSlider $import
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function prepareImport($import, &$layer) {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function prepareSample(&$layer) {
|
||||
|
||||
}
|
||||
|
||||
public function getAttribute($key) {
|
||||
if (isset($this->attributes[$key])) {
|
||||
return $this->attributes[$key];
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
public function setAttribute($key, $value) {
|
||||
$this->attributes[$key] = $value;
|
||||
}
|
||||
|
||||
protected function addLocalStyle($group, $name, $style) {
|
||||
if (!empty($style)) {
|
||||
for ($i = 0; $i < count($this->localStyle); $i++) {
|
||||
if ($this->localStyle[$i]['group'] == $group) {
|
||||
$this->localStyle[$i]['css'][$name] = $style;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected function serveLocalStyle() {
|
||||
|
||||
$uniqueClassSelector = $this->getUniqueClassSelector();
|
||||
|
||||
$css = '';
|
||||
for ($i = 0; $i < count($this->localStyle); $i++) {
|
||||
$style = '';
|
||||
foreach ($this->localStyle[$i]['css'] as $_css) {
|
||||
$style .= $_css;
|
||||
}
|
||||
if (!empty($style)) {
|
||||
$css .= '@rule' . $this->localStyle[$i]['selector'] . '{' . $style . '}';
|
||||
}
|
||||
}
|
||||
if (!empty($css)) {
|
||||
$this->getOwner()
|
||||
->addCSS(str_replace('@rule', $uniqueClassSelector, $css));
|
||||
}
|
||||
|
||||
if (!empty($this->localRawStyles)) {
|
||||
foreach ($this->localRawStyles as $localRawStyle) {
|
||||
$this->getOwner()
|
||||
->addCSS(str_replace('@rule', $uniqueClassSelector, $localRawStyle));
|
||||
}
|
||||
}
|
||||
|
||||
foreach ($this->style->styles as $device => $styles) {
|
||||
foreach ($styles as $selector => $stylesData) {
|
||||
$this->getOwner()
|
||||
->addDeviceCSS($device, $uniqueClassSelector . $selector . '{' . implode(';', $stylesData) . '}');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public function getUniqueClassSelector() {
|
||||
|
||||
$uniqueClass = $this->data->get('uniqueclass', '');
|
||||
if (empty($uniqueClass)) {
|
||||
$uniqueClass = self::generateUniqueIdentifier('n-uc-');
|
||||
$this->data->set('uniqueclass', $uniqueClass);
|
||||
}
|
||||
|
||||
$uniqueClass .= $this->owner->unique;
|
||||
|
||||
return 'div#' . $this->owner->getElementID() . ' .' . $uniqueClass;
|
||||
}
|
||||
|
||||
protected static function generateUniqueIdentifier($prefix = 'n', $length = 12) {
|
||||
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
|
||||
$charactersLength = strlen($characters);
|
||||
$randomString = '';
|
||||
for ($i = 0; $i < $length; $i++) {
|
||||
$randomString .= $characters[mt_rand(0, $charactersLength - 1)];
|
||||
}
|
||||
|
||||
return $prefix . $randomString;
|
||||
}
|
||||
|
||||
|
||||
public static function translateUniqueIdentifier($layers, $isAction = true) {
|
||||
$idTranslation = array();
|
||||
|
||||
self::translateUniqueIdentifierID($idTranslation, $layers);
|
||||
|
||||
self::translateUniqueIdentifierParentID($idTranslation, $layers);
|
||||
|
||||
if ($isAction) {
|
||||
self::translateUniqueIdentifierClass($layers);
|
||||
}
|
||||
|
||||
return $layers;
|
||||
}
|
||||
|
||||
private static function translateUniqueIdentifierID(&$idTranslation, &$layers) {
|
||||
if (is_array($layers)) {
|
||||
for ($i = 0; $i < count($layers); $i++) {
|
||||
if (!empty($layers[$i]['id'])) {
|
||||
$newId = self::generateUniqueIdentifier();
|
||||
$idTranslation[$layers[$i]['id']] = $newId;
|
||||
$layers[$i]['id'] = $newId;
|
||||
}
|
||||
if (isset($layers[$i]['type'])) {
|
||||
switch ($layers[$i]['type']) {
|
||||
case 'row':
|
||||
self::translateUniqueIdentifierID($idTranslation, $layers[$i]['cols']);
|
||||
break;
|
||||
case 'col':
|
||||
case 'content':
|
||||
self::translateUniqueIdentifierID($idTranslation, $layers[$i]['layers']);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private static function translateUniqueIdentifierParentID(&$idTranslation, &$layers) {
|
||||
if (is_array($layers)) {
|
||||
for ($i = 0; $i < count($layers); $i++) {
|
||||
if (!empty($layers[$i]['parentid'])) {
|
||||
if (isset($idTranslation[$layers[$i]['parentid']])) {
|
||||
$layers[$i]['parentid'] = $idTranslation[$layers[$i]['parentid']];
|
||||
} else {
|
||||
$layers[$i]['parentid'] = '';
|
||||
}
|
||||
}
|
||||
if (isset($layers[$i]['type'])) {
|
||||
switch ($layers[$i]['type']) {
|
||||
case 'row':
|
||||
self::translateUniqueIdentifierParentID($idTranslation, $layers[$i]['cols']);
|
||||
break;
|
||||
case 'col':
|
||||
case 'content':
|
||||
self::translateUniqueIdentifierParentID($idTranslation, $layers[$i]['layers']);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private static function translateUniqueIdentifierClass(&$layers) {
|
||||
if (is_array($layers)) {
|
||||
for ($i = 0; $i < count($layers); $i++) {
|
||||
if (!empty($layers[$i]['uniqueclass'])) {
|
||||
$layers[$i]['uniqueclass'] = self::generateUniqueIdentifier('n-uc-');
|
||||
}
|
||||
if (isset($layers[$i]['type'])) {
|
||||
switch ($layers[$i]['type']) {
|
||||
case 'row':
|
||||
self::translateUniqueIdentifierClass($layers[$i]['cols']);
|
||||
break;
|
||||
case 'col':
|
||||
case 'content':
|
||||
self::translateUniqueIdentifierClass($layers[$i]['layers']);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @return string
|
||||
*/
|
||||
public function getType() {
|
||||
return $this->type;
|
||||
}
|
||||
|
||||
public static function innerAlignToStyle($innerAlign) {
|
||||
|
||||
if ($innerAlign == 'left') {
|
||||
return 'text-align:left;--ssselfalign:var(--ss-fs);';
|
||||
} else if ($innerAlign == 'center') {
|
||||
return 'text-align:center;--ssselfalign:center;';
|
||||
} else if ($innerAlign == 'right') {
|
||||
return 'text-align:right;--ssselfalign:var(--ss-fe);';
|
||||
} else if ($innerAlign == '') {
|
||||
return '';
|
||||
}
|
||||
|
||||
return 'text-align:inherit;--ssselfalign:inherit;';
|
||||
}
|
||||
|
||||
public static function selfAlignToStyle($innerAlign) {
|
||||
|
||||
if ($innerAlign == 'left') {
|
||||
return 'align-self:var(--ss-fs);';
|
||||
} else if ($innerAlign == 'center') {
|
||||
return 'align-self:center;';
|
||||
} else if ($innerAlign == 'right') {
|
||||
return 'align-self:var(--ss-fe);';
|
||||
} else if ($innerAlign == '') {
|
||||
return '';
|
||||
}
|
||||
|
||||
return 'align-self:var(--ssselfalign);';
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,429 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Nextend\SmartSlider3\Renderable\Component;
|
||||
|
||||
|
||||
use Nextend\Framework\Parser\Color;
|
||||
use Nextend\Framework\Parser\Common;
|
||||
use Nextend\Framework\Parser\Link;
|
||||
use Nextend\Framework\ResourceTranslator\ResourceTranslator;
|
||||
use Nextend\Framework\View\Html;
|
||||
use Nextend\SmartSlider3\Application\Model\ModelSlides;
|
||||
use Nextend\SmartSlider3\BackupSlider\ExportSlider;
|
||||
use Nextend\SmartSlider3\Renderable\AbstractRenderableOwner;
|
||||
use Nextend\SmartSlider3\Renderable\ComponentContainer;
|
||||
|
||||
class ComponentCol extends AbstractComponent {
|
||||
|
||||
protected $type = 'col';
|
||||
|
||||
protected $colAttributes = array(
|
||||
'class' => 'n2-ss-layer-col n2-ss-layer-with-background n2-ss-layer-content',
|
||||
'style' => ''
|
||||
);
|
||||
|
||||
protected $localStyle = array(
|
||||
array(
|
||||
"group" => "normal",
|
||||
"selector" => '-inner',
|
||||
"css" => array()
|
||||
),
|
||||
array(
|
||||
"group" => "hover",
|
||||
"selector" => '-inner:HOVER',
|
||||
"css" => array()
|
||||
),
|
||||
);
|
||||
|
||||
protected $width;
|
||||
|
||||
public function __construct($index, $owner, $group, $data) {
|
||||
parent::__construct($index, $owner, $group, $data);
|
||||
|
||||
$this->container = new ComponentContainer($owner, $this, $data['layers']);
|
||||
$this->data->un_set('layers');
|
||||
|
||||
$this->upgradeData();
|
||||
|
||||
$this->attributes['style'] = '';
|
||||
|
||||
$devices = $this->owner->getAvailableDevices();
|
||||
|
||||
$desktopportraitInnerAlign = $this->data->get('desktopportraitinneralign', 'inherit');
|
||||
$desktopPortraitMaxWidth = intval($this->data->get('desktopportraitmaxwidth'));
|
||||
|
||||
foreach ($devices as $device) {
|
||||
|
||||
if ($this->data->has($device . 'padding')) {
|
||||
$padding = $this->data->get($device . 'padding');
|
||||
if (!empty($padding)) {
|
||||
$paddingValues = $this->spacingToPxValue($padding);
|
||||
|
||||
$this->style->add($device, '-inner', 'padding:' . implode('px ', $paddingValues) . 'px');
|
||||
}
|
||||
}
|
||||
|
||||
if ($this->data->has($device . 'maxwidth')) {
|
||||
$maxWidth = intval($this->data->get($device . 'maxwidth'));
|
||||
if ($maxWidth > 0) {
|
||||
$this->style->add($device, '', 'max-width: ' . $maxWidth . 'px');
|
||||
} else if ($device != 'desktopportrait' && $maxWidth != $desktopPortraitMaxWidth) {
|
||||
$this->style->add($device, '', 'max-width: none');
|
||||
}
|
||||
}
|
||||
|
||||
$innerAlign = $this->data->get($device . 'inneralign', '');
|
||||
|
||||
if ($device == 'desktopportrait') {
|
||||
if ($desktopportraitInnerAlign != 'inherit') {
|
||||
$this->style->add($device, '-inner', AbstractComponent::innerAlignToStyle($innerAlign));
|
||||
}
|
||||
} else if ($desktopportraitInnerAlign != $innerAlign) {
|
||||
$this->style->add($device, '-inner', AbstractComponent::innerAlignToStyle($innerAlign));
|
||||
}
|
||||
|
||||
|
||||
$verticalAlign = $this->data->get($device . 'verticalalign');
|
||||
if (!empty($verticalAlign)) {
|
||||
$this->style->add($device, '-inner', 'justify-content:' . $verticalAlign);
|
||||
}
|
||||
|
||||
|
||||
if ($this->data->has($device . 'order')) {
|
||||
$order = intval($this->data->get($device . 'order'));
|
||||
if ($order > 0) {
|
||||
$this->style->add($device, '', 'order: ' . $order);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$this->renderBackground();
|
||||
|
||||
$borderRadius = intval($this->data->get('borderradius', '0'));
|
||||
$this->addLocalStyle('normal', 'borderradius', $this->getBorderRadiusCSS($borderRadius));
|
||||
|
||||
$borderRadiusHover = intval($this->data->get('borderradius-hover'));
|
||||
if (!empty($borderRadiusHover) && $borderRadiusHover != $borderRadius) {
|
||||
$this->addLocalStyle('hover', 'borderradius', $this->getBorderRadiusCSS($borderRadiusHover));
|
||||
}
|
||||
|
||||
|
||||
$boxShadow = $this->data->get('boxshadow', '0|*|0|*|0|*|0|*|00000080');
|
||||
$this->addLocalStyle('normal', 'boxshadow', $this->getBoxShadowCSS($boxShadow));
|
||||
|
||||
$boxShadowHover = $this->data->get('boxshadow-hover');
|
||||
if (!empty($boxShadowHover) && $boxShadowHover != $boxShadow) {
|
||||
$this->addLocalStyle('hover', 'boxshadow', $this->getBoxShadowCSS($boxShadowHover));
|
||||
}
|
||||
|
||||
|
||||
$borderWidth = $this->data->get('borderwidth', '1|*|1|*|1|*|1');
|
||||
$borderStyle = $this->data->get('borderstyle', 'none');
|
||||
$borderColor = $this->data->get('bordercolor', 'ffffffff');
|
||||
|
||||
if ($borderStyle != 'none') {
|
||||
$this->addLocalStyle('normal', 'border', $this->getBorderCSS($borderWidth, $borderStyle, $borderColor));
|
||||
}
|
||||
|
||||
$borderWidthHover = $this->data->get('borderwidth-hover');
|
||||
$borderStyleHover = $this->data->get('borderstyle-hover');
|
||||
$borderColorHover = $this->data->get('bordercolor-hover');
|
||||
$isHoverDifferent = false;
|
||||
if (!empty($borderWidthHover) || $borderWidthHover != $borderWidth) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if (!empty($borderStyleHover) || $borderStyleHover != $borderStyle) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if (!empty($borderColorHover) || $borderColorHover != $borderColor) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if ($isHoverDifferent) {
|
||||
if (empty($borderWidthHover)) $borderWidthHover = $borderWidth;
|
||||
if (empty($borderStyleHover)) $borderStyleHover = $borderStyle;
|
||||
if (empty($borderColorHover)) $borderColorHover = $borderColor;
|
||||
|
||||
$this->addLocalStyle('hover', 'border', $this->getBorderCSS($borderWidthHover, $borderStyleHover, $borderColorHover));
|
||||
}
|
||||
|
||||
$this->placement->attributes($this->attributes);
|
||||
|
||||
|
||||
$width = explode('/', $this->data->get('colwidth', 1));
|
||||
if (count($width) == 2) {
|
||||
if ($width[0] == 0 || $width[1] == 0) {
|
||||
$width[0] = 1;
|
||||
$width[1] = 2;
|
||||
$this->data->set('colwidth', '1/2');
|
||||
}
|
||||
$width = floor($width[0] / $width[1] * 1000) / 10;
|
||||
} else {
|
||||
$width = 100;
|
||||
}
|
||||
|
||||
$this->width = $width;
|
||||
|
||||
if (!AbstractComponent::$isAdmin) {
|
||||
$this->makeLink();
|
||||
}
|
||||
}
|
||||
|
||||
public function setWidth($device) {
|
||||
$this->style->add($device, '', 'width:' . $this->width . '%');
|
||||
}
|
||||
|
||||
public function setWidthAuto($device) {
|
||||
$this->style->add($device, '', 'width:auto');
|
||||
}
|
||||
|
||||
public function setWrapAfterWidth($device, $width, $gutter) {
|
||||
$this->style->add($device, '', 'width:calc(' . $width . '% - ' . $gutter . 'px)');
|
||||
|
||||
}
|
||||
|
||||
protected function upgradeData() {
|
||||
|
||||
if ($this->data->has('verticalalign')) {
|
||||
/**
|
||||
* Upgrade data to device specific
|
||||
*/
|
||||
$this->data->set('desktopportraitverticalalign', $this->data->get('verticalalign'));
|
||||
$this->data->un_set('verticalalign');
|
||||
}
|
||||
}
|
||||
|
||||
public function getPlacement() {
|
||||
return 'default';
|
||||
}
|
||||
|
||||
private function getBorderRadiusCSS($borderRadius) {
|
||||
if ($borderRadius > 0) {
|
||||
return 'border-radius:' . $borderRadius . 'px;';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
private function getBoxShadowCSS($boxShadow) {
|
||||
$boxShadowArray = explode('|*|', $boxShadow);
|
||||
if (count($boxShadowArray) == 5 && ($boxShadowArray[0] != 0 || $boxShadowArray[1] != 0 || $boxShadowArray[2] != 0 || $boxShadowArray[3] != 0) && Color::hex2alpha($boxShadowArray[4]) != 0) {
|
||||
return 'box-shadow:' . $boxShadowArray[0] . 'px ' . $boxShadowArray[1] . 'px ' . $boxShadowArray[2] . 'px ' . $boxShadowArray[3] . 'px ' . Color::colorToRGBA($boxShadowArray[4]) . ';';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
private function getBorderCSS($width, $style, $color) {
|
||||
if ($style != 'none') {
|
||||
|
||||
$values = explode('|*|', $width);
|
||||
$unit = 'px';
|
||||
$values[4] = '';
|
||||
$css = 'border-width:' . implode($unit . ' ', $values) . ';';
|
||||
|
||||
$css .= 'border-style:' . $style . ';';
|
||||
$css .= 'border-color:' . Color::colorToRGBA($color) . ';';
|
||||
|
||||
return $css;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
private function makeLink() {
|
||||
|
||||
$linkV1 = $this->data->get('link', '');
|
||||
if (!empty($linkV1)) {
|
||||
list($link, $target) = array_pad((array)Common::parse($linkV1), 2, '');
|
||||
$this->data->un_set('link');
|
||||
$this->data->set('href', $link);
|
||||
$this->data->set('href-target', $target);
|
||||
}
|
||||
|
||||
$link = $this->data->get('href');
|
||||
|
||||
if (($link != '#' && !empty($link))) {
|
||||
$target = $this->data->get('href-target');
|
||||
|
||||
$link = Link::parse($this->owner->fill($link), $this->attributes);
|
||||
$this->attributes['data-href'] = $link;
|
||||
$this->attributes['tabindex'] = 0;
|
||||
$this->attributes['role'] = 'button';
|
||||
|
||||
$ariaLabel = $this->data->get('aria-label');
|
||||
if (!empty($ariaLabel)) {
|
||||
$this->attributes['aria-label'] = $this->owner->fill($ariaLabel);
|
||||
}
|
||||
|
||||
if (!isset($this->attributes['onclick']) && !isset($this->attributes['data-n2-lightbox'])) {
|
||||
if (!empty($target) && $target != '_self') {
|
||||
$this->attributes['data-target'] = $target;
|
||||
}
|
||||
$this->attributes['data-n2click'] = "url";
|
||||
}
|
||||
|
||||
$this->attributes['data-force-pointer'] = "";
|
||||
}
|
||||
}
|
||||
|
||||
public function render($isAdmin) {
|
||||
if ($this->isRenderAllowed()) {
|
||||
|
||||
$this->runPlugins();
|
||||
|
||||
$this->serveLocalStyle();
|
||||
if ($isAdmin) {
|
||||
$this->admin();
|
||||
}
|
||||
$this->prepareHTML();
|
||||
|
||||
$html = Html::tag('div', $this->colAttributes, parent::renderContainer($isAdmin));
|
||||
$html = $this->renderPlugins($html);
|
||||
|
||||
return Html::tag('div', $this->attributes, $html);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
protected function addUniqueClass($class) {
|
||||
$this->attributes['class'] .= ' ' . $class;
|
||||
$this->colAttributes['class'] .= ' ' . $class . '-inner';
|
||||
}
|
||||
|
||||
protected function admin() {
|
||||
|
||||
$linkV1 = $this->data->get('link', '');
|
||||
if (!empty($linkV1)) {
|
||||
list($link, $target) = array_pad((array)Common::parse($linkV1), 2, '');
|
||||
$this->data->un_set('link');
|
||||
$this->data->set('href', $link);
|
||||
$this->data->set('href-target', $target);
|
||||
}
|
||||
|
||||
$this->createProperty('href', '');
|
||||
$this->createProperty('href-target', '_self');
|
||||
$this->createProperty('aria-label', '');
|
||||
|
||||
$this->createProperty('colwidth');
|
||||
|
||||
$this->createProperty('bgimage', '');
|
||||
$this->createProperty('bgimagex', 50);
|
||||
$this->createProperty('bgimagey', 50);
|
||||
$this->createColorProperty('bgcolor', true, '00000000');
|
||||
$this->createProperty('bgcolorgradient', 'off');
|
||||
$this->createColorProperty('bgcolorgradientend', true, '00000000');
|
||||
$this->createColorProperty('bgcolor-hover', true);
|
||||
$this->createProperty('bgcolorgradient-hover');
|
||||
$this->createColorProperty('bgcolorgradientend-hover', true);
|
||||
|
||||
$this->createProperty('borderradius', '0');
|
||||
$this->createProperty('borderradius-hover');
|
||||
|
||||
$this->createProperty('boxshadow', '0|*|0|*|0|*|0|*|00000080');
|
||||
$this->createProperty('boxshadow-hover');
|
||||
|
||||
$this->createProperty('borderwidth', '1|*|1|*|1|*|1');
|
||||
$this->createProperty('borderstyle', 'none');
|
||||
$this->createProperty('bordercolor', 'FFFFFFFF');
|
||||
$this->createProperty('borderwidth-hover');
|
||||
$this->createProperty('borderstyle-hover');
|
||||
$this->createProperty('bordercolor-hover');
|
||||
|
||||
$this->createProperty('opened', 1);
|
||||
|
||||
$this->createDeviceProperty('maxwidth', '0');
|
||||
$this->createDeviceProperty('padding', '10|*|10|*|10|*|10');
|
||||
$this->createDeviceProperty('verticalalign', 'flex-start');
|
||||
$this->createDeviceProperty('inneralign', 'inherit');
|
||||
$this->createDeviceProperty('order');
|
||||
|
||||
parent::admin();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param ExportSlider $export
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function prepareExport($export, $layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$export->addImage($layer['bgimage']);
|
||||
}
|
||||
|
||||
$export->prepareLayer($layer['layers']);
|
||||
}
|
||||
|
||||
public static function prepareImport($import, &$layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$layer['bgimage'] = $import->fixImage($layer['bgimage']);
|
||||
}
|
||||
|
||||
$import->prepareLayers($layer['layers']);
|
||||
}
|
||||
|
||||
public static function prepareSample(&$layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$layer['bgimage'] = ResourceTranslator::toUrl($layer['bgimage']);
|
||||
}
|
||||
|
||||
ModelSlides::prepareSample($layer['layers']);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param AbstractRenderableOwner $slide
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function getFilled($slide, &$layer) {
|
||||
AbstractComponent::getFilled($slide, $layer);
|
||||
|
||||
$fields = array(
|
||||
'bgimage',
|
||||
'href'
|
||||
);
|
||||
|
||||
foreach ($fields as $field) {
|
||||
if (!empty($layer[$field])) {
|
||||
$layer[$field] = $slide->fill($layer[$field]);
|
||||
}
|
||||
}
|
||||
|
||||
$slide->fillLayers($layer['layers']);
|
||||
}
|
||||
|
||||
public function getOrder($device) {
|
||||
|
||||
$order = intval($this->data->get($device . 'order'));
|
||||
if ($order > 0) {
|
||||
return $order;
|
||||
}
|
||||
|
||||
return 10;
|
||||
}
|
||||
|
||||
public function getWidth() {
|
||||
|
||||
return $this->width;
|
||||
}
|
||||
|
||||
public static $compareOrderDevice;
|
||||
|
||||
/**
|
||||
* @param ComponentCol $column1
|
||||
* @param ComponentCol $column2
|
||||
*
|
||||
* @return int
|
||||
*/
|
||||
public static function compareOrder($column1, $column2) {
|
||||
|
||||
$order1 = $column1->getOrder(self::$compareOrderDevice);
|
||||
$order2 = $column2->getOrder(self::$compareOrderDevice);
|
||||
|
||||
if ($order1 == $order2) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return ($order1 < $order2) ? -1 : 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,220 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Nextend\SmartSlider3\Renderable\Component;
|
||||
|
||||
|
||||
use Nextend\Framework\ResourceTranslator\ResourceTranslator;
|
||||
use Nextend\Framework\View\Html;
|
||||
use Nextend\SmartSlider3\Application\Model\ModelSlides;
|
||||
use Nextend\SmartSlider3\BackupSlider\ExportSlider;
|
||||
use Nextend\SmartSlider3\Renderable\AbstractRenderableOwner;
|
||||
use Nextend\SmartSlider3\Renderable\ComponentContainer;
|
||||
|
||||
class ComponentContent extends AbstractComponent {
|
||||
|
||||
protected $type = 'content';
|
||||
|
||||
protected $name = 'Content';
|
||||
|
||||
protected $colAttributes = array(
|
||||
'class' => 'n2-ss-section-main-content n2-ss-layer-with-background n2-ss-layer-content n2-ow',
|
||||
'style' => ''
|
||||
);
|
||||
|
||||
protected $localStyle = array(
|
||||
array(
|
||||
"group" => "normal",
|
||||
"selector" => '-inner',
|
||||
"css" => array()
|
||||
),
|
||||
array(
|
||||
"group" => "hover",
|
||||
"selector" => '-inner:HOVER',
|
||||
"css" => array()
|
||||
),
|
||||
);
|
||||
|
||||
public function getPlacement() {
|
||||
return 'default';
|
||||
}
|
||||
|
||||
public function __construct($index, $owner, $group, $data) {
|
||||
parent::__construct($index, $owner, $group, $data);
|
||||
$this->container = new ComponentContainer($owner, $this, $data['layers']);
|
||||
$this->data->un_set('layers');
|
||||
|
||||
$this->upgradeData();
|
||||
|
||||
$this->attributes['style'] = '';
|
||||
|
||||
|
||||
$devices = $this->owner->getAvailableDevices();
|
||||
|
||||
$desktopPortraitSelfAlign = $this->data->get('desktopportraitselfalign', 'inherit');
|
||||
|
||||
$desktopportraitInnerAlign = $this->data->get('desktopportraitinneralign', 'inherit');
|
||||
|
||||
foreach ($devices as $device) {
|
||||
$padding = $this->data->get($device . 'padding');
|
||||
if (!empty($padding)) {
|
||||
$paddingValues = $this->spacingToPxValue($padding);
|
||||
|
||||
$this->style->add($device, '-inner', 'padding:' . implode('px ', $paddingValues) . 'px');
|
||||
}
|
||||
|
||||
$maxWidth = intval($this->data->get($device . 'maxwidth', 0));
|
||||
if ($maxWidth > 0) {
|
||||
$this->style->add($device, '', 'max-width: ' . $maxWidth . 'px');
|
||||
}
|
||||
|
||||
$innerAlign = $this->data->get($device . 'inneralign', '');
|
||||
|
||||
if ($device == 'desktopportrait') {
|
||||
if ($desktopportraitInnerAlign != 'inherit') {
|
||||
$this->style->add($device, '-inner', AbstractComponent::innerAlignToStyle($innerAlign));
|
||||
}
|
||||
} else if ($desktopportraitInnerAlign != $innerAlign) {
|
||||
$this->style->add($device, '-inner', AbstractComponent::innerAlignToStyle($innerAlign));
|
||||
}
|
||||
|
||||
|
||||
$selfAlign = $this->data->get($device . 'selfalign', '');
|
||||
|
||||
if ($device == 'desktopportrait') {
|
||||
if ($desktopPortraitSelfAlign != 'inherit') {
|
||||
$this->style->add($device, '', AbstractComponent::selfAlignToStyle($selfAlign));
|
||||
}
|
||||
} else if ($desktopPortraitSelfAlign != $selfAlign) {
|
||||
$this->style->add($device, '', AbstractComponent::selfAlignToStyle($selfAlign));
|
||||
}
|
||||
|
||||
|
||||
$verticalAlign = $this->data->get($device . 'verticalalign');
|
||||
if (!empty($verticalAlign)) {
|
||||
$this->style->add($device, '-inner', 'justify-content:' . $verticalAlign);
|
||||
}
|
||||
}
|
||||
|
||||
$this->renderBackground();
|
||||
|
||||
$this->placement->attributes($this->attributes);
|
||||
|
||||
}
|
||||
|
||||
protected function upgradeData() {
|
||||
|
||||
if ($this->data->has('verticalalign')) {
|
||||
/**
|
||||
* Upgrade data to device specific
|
||||
*/
|
||||
$this->data->set('desktopportraitverticalalign', $this->data->get('verticalalign'));
|
||||
$this->data->un_set('verticalalign');
|
||||
}
|
||||
}
|
||||
|
||||
public function render($isAdmin) {
|
||||
if ($this->isRenderAllowed()) {
|
||||
if ($isAdmin || $this->hasBackground || count($this->container->getLayers())) {
|
||||
|
||||
$this->runPlugins();
|
||||
|
||||
$this->serveLocalStyle();
|
||||
if ($isAdmin) {
|
||||
$this->admin();
|
||||
}
|
||||
|
||||
$this->prepareHTML();
|
||||
|
||||
$this->attributes['data-hasbackground'] = $this->hasBackground ? '1' : '0';
|
||||
|
||||
$html = Html::tag('div', $this->colAttributes, parent::renderContainer($isAdmin));
|
||||
$html = $this->renderPlugins($html);
|
||||
|
||||
return Html::tag('div', $this->attributes, $html);
|
||||
}
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
protected function addUniqueClass($class) {
|
||||
$this->attributes['class'] .= ' ' . $class;
|
||||
$this->colAttributes['class'] .= ' ' . $class . '-inner';
|
||||
}
|
||||
|
||||
protected function admin() {
|
||||
|
||||
|
||||
$this->createDeviceProperty('verticalalign', 'center');
|
||||
$this->createDeviceProperty('inneralign', 'inherit');
|
||||
$this->createDeviceProperty('selfalign', 'center');
|
||||
$this->createDeviceProperty('maxwidth', '0');
|
||||
$this->createDeviceProperty('padding', '10|*|10|*|10|*|10');
|
||||
|
||||
$this->createProperty('bgimage', '');
|
||||
$this->createProperty('bgimagex', 50);
|
||||
$this->createProperty('bgimagey', 50);
|
||||
|
||||
$this->createColorProperty('bgcolor', true, '00000000');
|
||||
$this->createProperty('bgcolorgradient', 'off');
|
||||
$this->createColorProperty('bgcolorgradientend', true, '00000000');
|
||||
$this->createColorProperty('bgcolor-hover', true);
|
||||
$this->createProperty('bgcolorgradient-hover');
|
||||
$this->createColorProperty('bgcolorgradientend-hover', true);
|
||||
|
||||
$this->createProperty('opened', 1);
|
||||
|
||||
|
||||
$this->createProperty('id', '');
|
||||
$this->createProperty('uniqueclass', '');
|
||||
$this->createProperty('class', '');
|
||||
$this->createProperty('status');
|
||||
$this->createProperty('generatorvisible', '');
|
||||
|
||||
$this->placement->adminAttributes($this->attributes);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param ExportSlider $export
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function prepareExport($export, $layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$export->addImage($layer['bgimage']);
|
||||
}
|
||||
|
||||
$export->prepareLayer($layer['layers']);
|
||||
}
|
||||
|
||||
public static function prepareImport($import, &$layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$layer['bgimage'] = $import->fixImage($layer['bgimage']);
|
||||
}
|
||||
|
||||
$import->prepareLayers($layer['layers']);
|
||||
}
|
||||
|
||||
public static function prepareSample(&$layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$layer['bgimage'] = ResourceTranslator::toUrl($layer['bgimage']);
|
||||
}
|
||||
|
||||
ModelSlides::prepareSample($layer['layers']);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param AbstractRenderableOwner $slide
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function getFilled($slide, &$layer) {
|
||||
AbstractComponent::getFilled($slide, $layer);
|
||||
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$layer['bgimage'] = $slide->fill($layer['bgimage']);
|
||||
}
|
||||
|
||||
$slide->fillLayers($layer['layers']);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,115 @@
|
||||
<?php
|
||||
|
||||
namespace Nextend\SmartSlider3\Renderable\Component;
|
||||
|
||||
use Nextend\Framework\View\Html;
|
||||
use Nextend\SmartSlider3\Renderable\AbstractRenderableOwner;
|
||||
use Nextend\SmartSlider3\Renderable\Item\AbstractItemFrontend;
|
||||
use Nextend\SmartSlider3\Renderable\Item\ItemFactory;
|
||||
|
||||
class ComponentLayer extends AbstractComponent {
|
||||
|
||||
protected $type = 'layer';
|
||||
|
||||
/** @var AbstractItemFrontend */
|
||||
private $item;
|
||||
|
||||
public function __construct($index, $owner, $group, $data) {
|
||||
|
||||
parent::__construct($index, $owner, $group, $data);
|
||||
|
||||
|
||||
$this->attributes['style'] = '';
|
||||
|
||||
$item = $this->data->get('item');
|
||||
if (empty($item)) {
|
||||
$items = $this->data->get('items');
|
||||
$item = $items[0];
|
||||
}
|
||||
|
||||
$this->item = ItemFactory::create($this, $item);
|
||||
|
||||
$this->placement->attributes($this->attributes);
|
||||
}
|
||||
|
||||
public function render($isAdmin) {
|
||||
if ($this->isRenderAllowed()) {
|
||||
|
||||
$this->runPlugins();
|
||||
|
||||
$this->serveLocalStyle();
|
||||
|
||||
$this->prepareHTML();
|
||||
|
||||
if ($isAdmin) {
|
||||
$renderedItem = $this->item->renderAdmin();
|
||||
} else {
|
||||
$renderedItem = $this->item->render();
|
||||
}
|
||||
|
||||
if ($renderedItem === false) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if ($this->item->needHeight()) {
|
||||
$this->attributes['class'] .= ' n2-ss-layer--need-height';
|
||||
}
|
||||
|
||||
if ($this->item->isAuto()) {
|
||||
$this->attributes['class'] .= ' n2-ss-layer--auto';
|
||||
}
|
||||
|
||||
$html = $this->renderPlugins($renderedItem);
|
||||
|
||||
if ($isAdmin) {
|
||||
$this->admin();
|
||||
}
|
||||
|
||||
return Html::tag('div', $this->attributes, $html);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @param AbstractRenderableOwner $slide
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function getFilled($slide, &$layer) {
|
||||
AbstractComponent::getFilled($slide, $layer);
|
||||
|
||||
if (empty($layer['item'])) {
|
||||
$layer['item'] = $layer['items'][0];
|
||||
unset($layer['items']);
|
||||
}
|
||||
ItemFactory::getFilled($slide, $layer['item']);
|
||||
}
|
||||
|
||||
public static function prepareExport($export, $layer) {
|
||||
if (empty($layer['item'])) {
|
||||
$layer['item'] = $layer['items'][0];
|
||||
unset($layer['items']);
|
||||
}
|
||||
|
||||
ItemFactory::prepareExport($export, $layer['item']);
|
||||
|
||||
}
|
||||
|
||||
public static function prepareImport($import, &$layer) {
|
||||
if (empty($layer['item'])) {
|
||||
$layer['item'] = $layer['items'][0];
|
||||
unset($layer['items']);
|
||||
}
|
||||
|
||||
$layer['item'] = ItemFactory::prepareImport($import, $layer['item']);
|
||||
}
|
||||
|
||||
public static function prepareSample(&$layer) {
|
||||
if (empty($layer['item'])) {
|
||||
$layer['item'] = $layer['items'][0];
|
||||
unset($layer['items']);
|
||||
}
|
||||
|
||||
$layer['item'] = ItemFactory::prepareSample($layer['item']);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,445 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Nextend\SmartSlider3\Renderable\Component;
|
||||
|
||||
|
||||
use Nextend\Framework\Parser\Color;
|
||||
use Nextend\Framework\Parser\Common;
|
||||
use Nextend\Framework\Parser\Link;
|
||||
use Nextend\Framework\ResourceTranslator\ResourceTranslator;
|
||||
use Nextend\Framework\View\Html;
|
||||
use Nextend\SmartSlider3\Application\Model\ModelSlides;
|
||||
use Nextend\SmartSlider3\BackupSlider\ExportSlider;
|
||||
use Nextend\SmartSlider3\Renderable\AbstractRenderableOwner;
|
||||
use Nextend\SmartSlider3\Renderable\ComponentContainer;
|
||||
|
||||
class ComponentRow extends AbstractComponent {
|
||||
|
||||
protected $type = 'row';
|
||||
|
||||
protected $rowAttributes = array(
|
||||
'class' => 'n2-ss-layer-row n2-ss-layer-with-background',
|
||||
'style' => ''
|
||||
);
|
||||
|
||||
protected $rowAttributesInner = array(
|
||||
'class' => 'n2-ss-layer-row-inner '
|
||||
);
|
||||
|
||||
protected $localStyle = array(
|
||||
array(
|
||||
"group" => "normal",
|
||||
"selector" => '-inner',
|
||||
"css" => array()
|
||||
),
|
||||
array(
|
||||
"group" => "hover",
|
||||
"selector" => '-inner:HOVER',
|
||||
"css" => array()
|
||||
),
|
||||
);
|
||||
|
||||
protected $html = '';
|
||||
|
||||
public function __construct($index, $owner, $group, $data) {
|
||||
parent::__construct($index, $owner, $group, $data);
|
||||
$this->container = new ComponentContainer($owner, $this, $data['cols']);
|
||||
$this->data->un_set('cols');
|
||||
$this->data->un_set('inneralign');
|
||||
|
||||
$fullWidth = $this->data->get('fullwidth', 1);
|
||||
if ($fullWidth) {
|
||||
$this->attributes['class'] .= ' n2-ss-layer--block';
|
||||
} else {
|
||||
$this->attributes['class'] .= ' n2-ss-layer--auto';
|
||||
}
|
||||
|
||||
$devices = $this->owner->getAvailableDevices();
|
||||
|
||||
$desktopportraitInnerAlign = $this->data->get('desktopportraitinneralign', 'inherit');
|
||||
|
||||
$desktopportraitGutter = $this->getGutter('desktopportrait');
|
||||
if (empty($desktopportraitGutter)) {
|
||||
$desktopportraitGutter = 0;
|
||||
}
|
||||
|
||||
$desktopportraitWrapAfter = $this->data->get('desktopportraitwrapafter', 0);
|
||||
if (empty($desktopportraitWrapAfter)) {
|
||||
$desktopportraitWrapAfter = 0;
|
||||
}
|
||||
|
||||
|
||||
foreach ($devices as $device) {
|
||||
$padding = $this->data->get($device . 'padding');
|
||||
if (!empty($padding)) {
|
||||
$paddingValues = $this->spacingToPxValue($padding);
|
||||
|
||||
$this->style->add($device, '-inner', 'padding:' . implode('px ', $paddingValues) . 'px');
|
||||
}
|
||||
|
||||
|
||||
$innerAlign = $this->data->get($device . 'inneralign', '');
|
||||
|
||||
if ($device == 'desktopportrait') {
|
||||
if ($desktopportraitInnerAlign != 'inherit') {
|
||||
$this->style->add($device, '-inner', AbstractComponent::innerAlignToStyle($innerAlign));
|
||||
}
|
||||
} else if ($desktopportraitInnerAlign != $innerAlign) {
|
||||
$this->style->add($device, '-inner', AbstractComponent::innerAlignToStyle($innerAlign));
|
||||
}
|
||||
|
||||
|
||||
$gutter = $this->getGutter($device);
|
||||
$wrapAfter = $this->data->get($device . 'wrapafter', '');
|
||||
if ($wrapAfter === '') {
|
||||
$wrapAfter = $desktopportraitWrapAfter; // inherit desktop value
|
||||
}
|
||||
|
||||
if ($gutter !== null) {
|
||||
$sideGutter = $gutter / 2;
|
||||
/**
|
||||
* +1 to fix Safari line break
|
||||
*
|
||||
* @see https://bugs.webkit.org/show_bug.cgi?id=225962
|
||||
* @see SSDEV-2980
|
||||
*/
|
||||
$this->style->add($device, '-inner > .n2-ss-layer-row-inner', 'width:calc(100% + ' . ($gutter + 1) . 'px);margin:-' . $sideGutter . 'px');
|
||||
$this->style->add($device, '-inner > .n2-ss-layer-row-inner > .n2-ss-layer[data-sstype="col"]', 'margin:' . $sideGutter . 'px');
|
||||
} else {
|
||||
$gutter = $desktopportraitGutter;
|
||||
}
|
||||
|
||||
|
||||
$columns = $this->getSortedColumns($device);
|
||||
$columnsCount = count($columns);
|
||||
|
||||
if ($wrapAfter > 0 || !$fullWidth) {
|
||||
|
||||
$this->style->add($device, '-inner > .n2-ss-layer-row-inner', 'flex-wrap:wrap;');
|
||||
if ($fullWidth && $wrapAfter <= $columnsCount) {
|
||||
$rows = array_fill(0, ceil($columnsCount / $wrapAfter), 0);
|
||||
for ($i = 0; $i < $columnsCount; $i++) {
|
||||
$rowIndex = floor($i / $wrapAfter);
|
||||
$rows[$rowIndex] += $columns[$i]->getWidth();
|
||||
}
|
||||
|
||||
for ($i = 0; $i < $columnsCount; $i++) {
|
||||
$rowIndex = floor($i / $wrapAfter);
|
||||
$columns[$i]->setWrapAfterWidth($device, floor($columns[$i]->getWidth() / $rows[$rowIndex] * 100), $gutter);
|
||||
}
|
||||
} else {
|
||||
foreach ($columns as $column) {
|
||||
$column->setWidthAuto($device);
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
$this->style->add($device, '-inner > .n2-ss-layer-row-inner', 'flex-wrap:nowrap;');
|
||||
if ($fullWidth) {
|
||||
foreach ($columns as $column) {
|
||||
$column->setWidth($device);
|
||||
}
|
||||
} else {
|
||||
foreach ($columns as $column) {
|
||||
$column->setWidthAuto($device);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$this->renderBackground();
|
||||
|
||||
$this->attributes['class'] .= ' n2-ss-has-self-align';
|
||||
|
||||
$stretch = $this->data->get('stretch', 0);
|
||||
if ($stretch) {
|
||||
$this->attributes['class'] .= ' n2-ss-stretch-layer';
|
||||
}
|
||||
|
||||
$borderWidth = $this->data->get('borderwidth', '1|*|1|*|1|*|1');
|
||||
$borderStyle = $this->data->get('borderstyle', 'none');
|
||||
$borderColor = $this->data->get('bordercolor', 'ffffffff');
|
||||
|
||||
if ($borderStyle != 'none') {
|
||||
$this->addLocalStyle('normal', 'border', $this->getBorderCSS($borderWidth, $borderStyle, $borderColor));
|
||||
}
|
||||
|
||||
$borderWidthHover = $this->data->get('borderwidth-hover');
|
||||
$borderStyleHover = $this->data->get('borderstyle-hover');
|
||||
$borderColorHover = $this->data->get('bordercolor-hover');
|
||||
$isHoverDifferent = false;
|
||||
if (!empty($borderWidthHover) || $borderWidthHover != $borderWidth) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if (!empty($borderStyleHover) || $borderStyleHover != $borderStyle) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if (!empty($borderColorHover) || $borderColorHover != $borderColor) {
|
||||
$isHoverDifferent = true;
|
||||
}
|
||||
if ($isHoverDifferent) {
|
||||
if (empty($borderWidthHover)) $borderWidthHover = $borderWidth;
|
||||
if (empty($borderStyleHover)) $borderStyleHover = $borderStyle;
|
||||
if (empty($borderColorHover)) $borderColorHover = $borderColor;
|
||||
|
||||
$this->addLocalStyle('hover', 'border', $this->getBorderCSS($borderWidthHover, $borderStyleHover, $borderColorHover));
|
||||
}
|
||||
|
||||
$borderRadius = intval($this->data->get('borderradius', 0));
|
||||
$this->addLocalStyle('normal', 'borderradius', $this->getBorderRadiusCSS($borderRadius));
|
||||
|
||||
$borderRadiusHover = intval($this->data->get('borderradius-hover'));
|
||||
if (!empty($borderRadiusHover) && $borderRadiusHover != $borderRadius) {
|
||||
$this->addLocalStyle('hover', 'borderradius', $this->getBorderRadiusCSS($borderRadiusHover));
|
||||
}
|
||||
|
||||
$boxShadow = $this->data->get('boxshadow', '0|*|0|*|0|*|0|*|00000080');
|
||||
$this->addLocalStyle('normal', 'boxshadow', $this->getBoxShadowCSS($boxShadow));
|
||||
|
||||
$boxShadowHover = $this->data->get('boxshadow-hover');
|
||||
if (!empty($boxShadowHover) && $boxShadowHover != $boxShadow) {
|
||||
$this->addLocalStyle('hover', 'boxshadow', $this->getBoxShadowCSS($boxShadowHover));
|
||||
}
|
||||
|
||||
$this->placement->attributes($this->attributes);
|
||||
|
||||
|
||||
if (!AbstractComponent::$isAdmin) {
|
||||
$this->makeLink();
|
||||
}
|
||||
}
|
||||
|
||||
public function getGutter($device) {
|
||||
return $this->data->get($device . 'gutter', null);
|
||||
}
|
||||
|
||||
public function render($isAdmin) {
|
||||
if ($this->isRenderAllowed()) {
|
||||
|
||||
$this->runPlugins();
|
||||
|
||||
$this->serveLocalStyle();
|
||||
if ($isAdmin) {
|
||||
$this->admin();
|
||||
}
|
||||
$this->prepareHTML();
|
||||
|
||||
$html = Html::tag('div', $this->rowAttributes, Html::tag('div', $this->rowAttributesInner, parent::renderContainer($isAdmin)));
|
||||
$html = $this->renderPlugins($html);
|
||||
|
||||
return Html::tag('div', $this->attributes, $html);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @return ComponentCol[]
|
||||
*/
|
||||
protected function getColumns() {
|
||||
$layers = $this->container->getLayers();
|
||||
$columns = array();
|
||||
for ($i = 0; $i < count($layers); $i++) {
|
||||
if ($layers[$i] instanceof ComponentCol) {
|
||||
$columns[] = $layers[$i];
|
||||
}
|
||||
}
|
||||
|
||||
return $columns;
|
||||
}
|
||||
|
||||
protected function getSortedColumns($device) {
|
||||
|
||||
$columns = $this->getColumns();
|
||||
for ($i = count($columns) - 1; $i >= 0; $i--) {
|
||||
if (!$columns[$i]->isShown($device)) {
|
||||
array_splice($columns, $i, 1);
|
||||
}
|
||||
}
|
||||
ComponentCol::$compareOrderDevice = $device;
|
||||
usort($columns, array(
|
||||
ComponentCol::class,
|
||||
'compareOrder'
|
||||
));
|
||||
|
||||
return $columns;
|
||||
}
|
||||
|
||||
protected function addUniqueClass($class) {
|
||||
$this->attributes['class'] .= ' ' . $class;
|
||||
$this->rowAttributes['class'] .= ' ' . $class . '-inner';
|
||||
}
|
||||
|
||||
private function makeLink() {
|
||||
|
||||
$linkV1 = $this->data->get('link', '');
|
||||
if (!empty($linkV1)) {
|
||||
list($link, $target) = array_pad((array)Common::parse($linkV1), 2, '');
|
||||
$this->data->un_set('link');
|
||||
$this->data->set('href', $link);
|
||||
$this->data->set('href-target', $target);
|
||||
}
|
||||
|
||||
$link = $this->data->get('href');
|
||||
|
||||
if (($link != '#' && !empty($link))) {
|
||||
$target = $this->data->get('href-target');
|
||||
|
||||
$link = Link::parse($this->owner->fill($link), $this->attributes);
|
||||
$this->attributes['data-href'] = $link;
|
||||
$this->attributes['tabindex'] = 0;
|
||||
$this->attributes['role'] = 'button';
|
||||
|
||||
$ariaLabel = $this->data->get('aria-label');
|
||||
if (!empty($ariaLabel)) {
|
||||
$this->attributes['aria-label'] = $this->owner->fill($ariaLabel);
|
||||
}
|
||||
|
||||
if (!isset($this->attributes['onclick']) && !isset($this->attributes['data-n2-lightbox'])) {
|
||||
if (!empty($target) && $target != '_self') {
|
||||
$this->attributes['data-target'] = $target;
|
||||
}
|
||||
$this->attributes['data-n2click'] = "url";
|
||||
}
|
||||
|
||||
$this->attributes['data-force-pointer'] = "";
|
||||
}
|
||||
}
|
||||
|
||||
protected function admin() {
|
||||
|
||||
$linkV1 = $this->data->get('link', '');
|
||||
if (!empty($linkV1)) {
|
||||
list($link, $target) = array_pad((array)Common::parse($linkV1), 2, '');
|
||||
$this->data->un_set('link');
|
||||
$this->data->set('href', $link);
|
||||
$this->data->set('href-target', $target);
|
||||
}
|
||||
|
||||
$this->createProperty('href', '');
|
||||
$this->createProperty('href-target', '_self');
|
||||
$this->createProperty('aria-label', '');
|
||||
|
||||
$this->createProperty('bgimage', '');
|
||||
$this->createProperty('bgimagex', 50);
|
||||
$this->createProperty('bgimagey', 50);
|
||||
|
||||
$this->createColorProperty('bgcolor', true, '00000000');
|
||||
$this->createProperty('bgcolorgradient', 'off');
|
||||
$this->createColorProperty('bgcolorgradientend', true, '00000000');
|
||||
$this->createColorProperty('bgcolor-hover', true);
|
||||
$this->createProperty('bgcolorgradient-hover');
|
||||
$this->createColorProperty('bgcolorgradientend-hover', true);
|
||||
|
||||
$this->createProperty('borderwidth', '1|*|1|*|1|*|1');
|
||||
$this->createProperty('borderstyle', 'none');
|
||||
$this->createProperty('bordercolor', 'FFFFFFFF');
|
||||
$this->createProperty('borderwidth-hover');
|
||||
$this->createProperty('borderstyle-hover');
|
||||
$this->createProperty('bordercolor-hover');
|
||||
|
||||
$this->createProperty('borderradius', 0);
|
||||
$this->createProperty('borderradius-hover');
|
||||
|
||||
$this->createProperty('boxshadow', '0|*|0|*|0|*|0|*|00000080');
|
||||
$this->createProperty('boxshadow-hover');
|
||||
|
||||
$this->createProperty('fullwidth', '1');
|
||||
$this->createProperty('stretch', '0');
|
||||
|
||||
$this->createProperty('opened', 1);
|
||||
|
||||
$this->createDeviceProperty('padding', '10|*|10|*|10|*|10');
|
||||
|
||||
$this->createDeviceProperty('gutter', 20);
|
||||
$this->createDeviceProperty('wrapafter', 0);
|
||||
$this->createDeviceProperty('inneralign', 'inherit');
|
||||
|
||||
parent::admin();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param ExportSlider $export
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function prepareExport($export, $layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$export->addImage($layer['bgimage']);
|
||||
}
|
||||
|
||||
$export->prepareLayer($layer['cols']);
|
||||
}
|
||||
|
||||
public static function prepareImport($import, &$layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$layer['bgimage'] = $import->fixImage($layer['bgimage']);
|
||||
}
|
||||
|
||||
$import->prepareLayers($layer['cols']);
|
||||
}
|
||||
|
||||
public static function prepareSample(&$layer) {
|
||||
if (!empty($layer['bgimage'])) {
|
||||
$layer['bgimage'] = ResourceTranslator::toUrl($layer['bgimage']);
|
||||
}
|
||||
|
||||
ModelSlides::prepareSample($layer['cols']);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param AbstractRenderableOwner $slide
|
||||
* @param array $layer
|
||||
*/
|
||||
public static function getFilled($slide, &$layer) {
|
||||
AbstractComponent::getFilled($slide, $layer);
|
||||
|
||||
$fields = array(
|
||||
'bgimage',
|
||||
'href'
|
||||
);
|
||||
|
||||
foreach ($fields as $field) {
|
||||
if (!empty($layer[$field])) {
|
||||
$layer[$field] = $slide->fill($layer[$field]);
|
||||
}
|
||||
}
|
||||
|
||||
$slide->fillLayers($layer['cols']);
|
||||
}
|
||||
|
||||
private function getBorderCSS($width, $style, $color) {
|
||||
if ($style != 'none') {
|
||||
|
||||
$values = explode('|*|', $width);
|
||||
$unit = 'px';
|
||||
$values[4] = '';
|
||||
$css = 'border-width:' . implode($unit . ' ', $values) . ';';
|
||||
|
||||
$css .= 'border-style:' . $style . ';';
|
||||
$css .= 'border-color:' . Color::colorToRGBA($color) . ';';
|
||||
|
||||
return $css;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
private function getBorderRadiusCSS($borderRadius) {
|
||||
if ($borderRadius > 0) {
|
||||
return 'border-radius:' . $borderRadius . 'px;';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
private function getBoxShadowCSS($boxShadow) {
|
||||
$boxShadowArray = explode('|*|', $boxShadow);
|
||||
if (count($boxShadowArray) == 5 && ($boxShadowArray[0] != 0 || $boxShadowArray[1] != 0 || $boxShadowArray[2] != 0 || $boxShadowArray[3] != 0) && Color::hex2alpha($boxShadowArray[4]) != 0) {
|
||||
return 'box-shadow:' . $boxShadowArray[0] . 'px ' . $boxShadowArray[1] . 'px ' . $boxShadowArray[2] . 'px ' . $boxShadowArray[3] . 'px ' . Color::colorToRGBA($boxShadowArray[4]) . ';';
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,151 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Nextend\SmartSlider3\Renderable\Component;
|
||||
|
||||
|
||||
use Nextend\Framework\Parser\Common;
|
||||
use Nextend\Framework\View\Html;
|
||||
use Nextend\SmartSlider3\Renderable\ComponentContainer;
|
||||
use Nextend\SmartSlider3\Slider\Slide;
|
||||
use Nextend\SmartSlider3\Slider\SliderType\SliderTypeFactory;
|
||||
|
||||
class ComponentSlide extends AbstractComponent {
|
||||
|
||||
protected $type = 'slide';
|
||||
|
||||
/**
|
||||
* @var Slide
|
||||
*/
|
||||
protected $owner;
|
||||
|
||||
/**
|
||||
* ComponentSlide constructor.
|
||||
*
|
||||
* @param Slide $owner
|
||||
* @param $data
|
||||
*/
|
||||
public function __construct($owner, $data) {
|
||||
if (!$owner->underEdit) {
|
||||
$data['layers'] = AbstractComponent::translateUniqueIdentifier($data['layers'], false);
|
||||
}
|
||||
|
||||
parent::__construct(0, $owner, false, $data);
|
||||
|
||||
$this->container = new ComponentContainer($owner, $this, $data['layers']);
|
||||
$this->data->un_set('layers');
|
||||
|
||||
$this->container->addContentLayer($owner, $this);
|
||||
|
||||
$this->upgradeData();
|
||||
|
||||
$devices = $this->owner->getAvailableDevices();
|
||||
|
||||
foreach ($devices as $device) {
|
||||
$padding = $this->data->get($device . 'padding');
|
||||
if (!empty($padding)) {
|
||||
$this->style->add($device, '', 'padding:' . implode('px ', explode('|*|', $padding)) . 'px');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected function upgradeData() {
|
||||
|
||||
if ($this->data->get('background-type') == '') {
|
||||
$this->data->set('background-type', 'color');
|
||||
if ($this->data->get('backgroundVideoMp4')) {
|
||||
$this->data->set('background-type', 'video');
|
||||
} else if ($this->data->get('backgroundImage')) {
|
||||
$this->data->set('background-type', 'image');
|
||||
}
|
||||
}
|
||||
|
||||
$linkV1 = $this->data->getIfEmpty('link', '');
|
||||
if (!empty($linkV1)) {
|
||||
list($link, $target) = array_pad((array)Common::parse($linkV1), 2, '');
|
||||
$this->data->un_set('link');
|
||||
$this->data->set('href', $link);
|
||||
$this->data->set('href-target', $target);
|
||||
}
|
||||
}
|
||||
|
||||
public function getPlacement() {
|
||||
return 'default';
|
||||
}
|
||||
|
||||
protected function admin() {
|
||||
/**
|
||||
* Hide on properties
|
||||
*/
|
||||
$this->createDeviceProperty('', 1);
|
||||
|
||||
$this->createProperty('title', '');
|
||||
$this->createProperty('publish_up', '0000-00-00 00:00:00');
|
||||
$this->createProperty('publish_down', '0000-00-00 00:00:00');
|
||||
$this->createProperty('published', 1);
|
||||
$this->createProperty('description', '');
|
||||
$this->createProperty('thumbnail', '');
|
||||
$this->createProperty('thumbnailAlt', '');
|
||||
$this->createProperty('thumbnailType', 'default');
|
||||
|
||||
$this->createProperty('static-slide', 0);
|
||||
$this->createProperty('slide-duration', 0);
|
||||
$this->createProperty('ligthboxImage', '');
|
||||
|
||||
$this->createProperty('record-slides', 0);
|
||||
|
||||
SliderTypeFactory::getType($this->owner->getSlider()->data->get('type'))
|
||||
->createAdmin()
|
||||
->registerSlideAdminProperties($this);
|
||||
|
||||
$this->createProperty('href', '');
|
||||
$this->createProperty('href-target', '');
|
||||
$this->createProperty('aria-label', '');
|
||||
|
||||
|
||||
$this->createProperty('background-type', 'color');
|
||||
|
||||
$this->createProperty('backgroundColor', 'ffffff00');
|
||||
$this->createProperty('backgroundGradient', 'off');
|
||||
$this->createProperty('backgroundColorEnd', 'ffffff00');
|
||||
$this->createProperty('backgroundColorOverlay', 0);
|
||||
|
||||
$this->createProperty('backgroundImage', '');
|
||||
$this->createProperty('backgroundFocusX', 50);
|
||||
$this->createProperty('backgroundFocusY', 50);
|
||||
$this->createProperty('backgroundImageOpacity', 100);
|
||||
$this->createProperty('backgroundImageBlur', 0);
|
||||
$this->createProperty('backgroundAlt', '');
|
||||
$this->createProperty('backgroundTitle', '');
|
||||
$this->createProperty('backgroundMode', 'default');
|
||||
$this->createProperty('backgroundBlurFit', 7);
|
||||
|
||||
|
||||
$this->createProperty('backgroundVideoMp4', '');
|
||||
$this->createProperty('backgroundVideoOpacity', 100);
|
||||
$this->createProperty('backgroundVideoLoop', 1);
|
||||
$this->createProperty('backgroundVideoReset', 1);
|
||||
$this->createProperty('backgroundVideoMode', 'fill');
|
||||
|
||||
$this->createDeviceProperty('padding', '10|*|10|*|10|*|10');
|
||||
}
|
||||
|
||||
public function render($isAdmin) {
|
||||
$this->attributes['data-sstype'] = $this->type;
|
||||
|
||||
$this->placement->attributes($this->attributes);
|
||||
|
||||
$this->serveLocalStyle();
|
||||
|
||||
if ($isAdmin) {
|
||||
$this->admin();
|
||||
}
|
||||
|
||||
$uniqueClass = $this->data->get('uniqueclass', '');
|
||||
if (!empty($uniqueClass)) {
|
||||
$this->addUniqueClass($uniqueClass . $this->owner->unique);
|
||||
}
|
||||
|
||||
return Html::tag('div', $this->attributes, parent::renderContainer($isAdmin));
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
<?php
|
||||
|
||||
|
||||
namespace Nextend\SmartSlider3\Renderable\Component;
|
||||
|
||||
|
||||
class Style {
|
||||
|
||||
public $styles = array(
|
||||
'all' => array(),
|
||||
'desktoplandscape' => array(),
|
||||
'tabletlandscape' => array(),
|
||||
'tabletportrait' => array(),
|
||||
'mobilelandscape' => array(),
|
||||
'mobileportrait' => array(),
|
||||
|
||||
);
|
||||
|
||||
/**
|
||||
* @var AbstractComponent
|
||||
*/
|
||||
protected $component;
|
||||
|
||||
/**
|
||||
* Style constructor.
|
||||
*
|
||||
* @param AbstractComponent $component
|
||||
*/
|
||||
public function __construct($component) {
|
||||
$this->component = $component;
|
||||
}
|
||||
|
||||
public function add($device, $selector, $css) {
|
||||
|
||||
if (!empty($css)) {
|
||||
|
||||
if ($device == 'desktopportrait') {
|
||||
$device = 'all';
|
||||
}
|
||||
|
||||
$this->addOnly($device, $selector, $css);
|
||||
}
|
||||
}
|
||||
|
||||
public function addOnly($device, $selector, $css) {
|
||||
|
||||
if (!empty($css)) {
|
||||
|
||||
if (!isset($this->styles[$device][$selector])) {
|
||||
$this->styles[$device][$selector] = array();
|
||||
}
|
||||
|
||||
$this->styles[$device][$selector][] = $css;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user