Edit File by line

<?php

[0] Fix | Delete

[1] Fix | Delete

[2] Fix | Delete

namespace Nextend\SmartSlider3\Slider\Feature;

[3] Fix | Delete

[4] Fix | Delete

[5] Fix | Delete

use Nextend\Framework\Image\ImageEdit;

[6] Fix | Delete

use Nextend\Framework\Image\ImageManager;

[7] Fix | Delete

use Nextend\Framework\Parser\Color;

[8] Fix | Delete

use Nextend\Framework\ResourceTranslator\ResourceTranslator;

[9] Fix | Delete

use Nextend\Framework\View\Html;

[10] Fix | Delete

use Nextend\SmartSlider3\Slider\Slide;

[11] Fix | Delete

use Nextend\SmartSlider3\Slider\Slider;

[12] Fix | Delete

[13] Fix | Delete

class SlideBackground {

[14] Fix | Delete

[15] Fix | Delete

/**

[16] Fix | Delete

* @var Slider

[17] Fix | Delete

[18] Fix | Delete

private $slider;

[19] Fix | Delete

[20] Fix | Delete

public function __construct($slider) {

[21] Fix | Delete

[22] Fix | Delete

$this->slider = $slider;

[23] Fix | Delete

}

[24] Fix | Delete

[25] Fix | Delete

public function makeJavaScriptProperties(&$properties) {

[26] Fix | Delete

$enabled = intval($this->slider->params->get('slide-background-parallax', 0));

[27] Fix | Delete

if ($enabled) {

[28] Fix | Delete

$properties['backgroundParallax'] = array(

[29] Fix | Delete

'strength' => intval($this->slider->params->get('slide-background-parallax-strength', 50)) / 100,

[30] Fix | Delete

'tablet' => intval($this->slider->params->get('bg-parallax-tablet', 0)),

[31] Fix | Delete

'mobile' => intval($this->slider->params->get('bg-parallax-mobile', 0))

[32] Fix | Delete

);

[33] Fix | Delete

}

[34] Fix | Delete

}

[35] Fix | Delete

[36] Fix | Delete

/**

[37] Fix | Delete

* @param $slide Slide

[38] Fix | Delete

[39] Fix | Delete

* @return string

[40] Fix | Delete

[41] Fix | Delete

[42] Fix | Delete

public function make($slide) {

[43] Fix | Delete

[44] Fix | Delete

if ($slide->parameters->get('background-type') == '') {

[45] Fix | Delete

$slide->parameters->set('background-type', 'color');

[46] Fix | Delete

if ($slide->parameters->get('backgroundVideoMp4')) {

[47] Fix | Delete

$slide->parameters->set('background-type', 'video');

[48] Fix | Delete

} else if ($slide->parameters->get('backgroundImage')) {

[49] Fix | Delete

$slide->parameters->set('background-type', 'image');

[50] Fix | Delete

}

[51] Fix | Delete

}

[52] Fix | Delete

[53] Fix | Delete

return $this->makeBackground($slide);

[54] Fix | Delete

}

[55] Fix | Delete

[56] Fix | Delete

private function getBackgroundStyle($slide) {

[57] Fix | Delete

[58] Fix | Delete

$attributes = array();

[59] Fix | Delete

[60] Fix | Delete

$style = '';

[61] Fix | Delete

$color = $slide->fill($slide->parameters->get('backgroundColor', ''));

[62] Fix | Delete

if (empty($color)) {

[63] Fix | Delete

$color = 'ffffff00';

[64] Fix | Delete

}

[65] Fix | Delete

if (strlen($color) > 0 && $color[0] == '#') {

[66] Fix | Delete

$color = substr($color, 1);

[67] Fix | Delete

if (strlen($color) == 6) {

[68] Fix | Delete

$color .= 'ff';

[69] Fix | Delete

}

[70] Fix | Delete

}

[71] Fix | Delete

$gradient = $slide->parameters->get('backgroundGradient', 'off');

[72] Fix | Delete

[73] Fix | Delete

if ($gradient != 'off') {

[74] Fix | Delete

$colorEnd = $slide->fill($slide->parameters->get('backgroundColorEnd', 'ffffff00'));

[75] Fix | Delete

if (empty($colorEnd)) {

[76] Fix | Delete

$colorEnd = 'ffffff00';

[77] Fix | Delete

}

[78] Fix | Delete

[79] Fix | Delete

if ($colorEnd[0] == '#') {

[80] Fix | Delete

$colorEnd = substr($colorEnd, 1);

[81] Fix | Delete

if (strlen($colorEnd) == 6) {

[82] Fix | Delete

$colorEnd .= 'ff';

[83] Fix | Delete

}

[84] Fix | Delete

}

[85] Fix | Delete

[86] Fix | Delete

$startColor = Color::colorToRGBA($color);

[87] Fix | Delete

$endColor = Color::colorToRGBA($colorEnd);

[88] Fix | Delete

[89] Fix | Delete

$attributes['data-gradient'] = $gradient;

[90] Fix | Delete

$attributes['data-color-start'] = $startColor;

[91] Fix | Delete

$attributes['data-color-end'] = $endColor;

[92] Fix | Delete

[93] Fix | Delete

switch ($gradient) {

[94] Fix | Delete

case 'horizontal':

[95] Fix | Delete

$style .= 'background:linear-gradient(to right, ' . $startColor . ' 0%,' . $endColor . ' 100%);';

[96] Fix | Delete

break;

[97] Fix | Delete

case 'vertical':

[98] Fix | Delete

$style .= 'background:linear-gradient(to bottom, ' . $startColor . ' 0%,' . $endColor . ' 100%);';

[99] Fix | Delete

break;

[100] Fix | Delete

case 'diagonal1':

[101] Fix | Delete

$style .= 'background:linear-gradient(45deg, ' . $startColor . ' 0%,' . $endColor . ' 100%);';

[102] Fix | Delete

break;

[103] Fix | Delete

case 'diagonal2':

[104] Fix | Delete

$style .= 'background:linear-gradient(135deg, ' . $startColor . ' 0%,' . $endColor . ' 100%);';

[105] Fix | Delete

break;

[106] Fix | Delete

}

[107] Fix | Delete

} else {

[108] Fix | Delete

if (strlen($color) == 8) {

[109] Fix | Delete

[110] Fix | Delete

$colorRGBA = Color::colorToRGBA($color);

[111] Fix | Delete

$style .= "background-color: " . Color::colorToRGBA($color) . ";";

[112] Fix | Delete

[113] Fix | Delete

$attributes['data-color'] = $colorRGBA;

[114] Fix | Delete

[115] Fix | Delete

[116] Fix | Delete

}

[117] Fix | Delete

}

[118] Fix | Delete

[119] Fix | Delete

$attributes['style'] = $style;

[120] Fix | Delete

[121] Fix | Delete

return $attributes;

[122] Fix | Delete

}

[123] Fix | Delete

[124] Fix | Delete

private function makeBackground($slide) {

[125] Fix | Delete

[126] Fix | Delete

$backgroundType = $slide->parameters->get('background-type');

[127] Fix | Delete

[128] Fix | Delete

if (empty($backgroundType)) {

[129] Fix | Delete

$backgroundVideoMp4 = $slide->parameters->get('backgroundVideoMp4', '');

[130] Fix | Delete

$backgroundImage = $slide->parameters->get('backgroundImage', '');

[131] Fix | Delete

if (!empty($backgroundVideoMp4)) {

[132] Fix | Delete

$backgroundType = 'video';

[133] Fix | Delete

} else if (!empty($backgroundImage)) {

[134] Fix | Delete

$backgroundType = 'image';

[135] Fix | Delete

} else {

[136] Fix | Delete

$backgroundType = 'color';

[137] Fix | Delete

}

[138] Fix | Delete

}

[139] Fix | Delete

[140] Fix | Delete

$fillMode = $slide->parameters->get('backgroundMode', 'default');

[141] Fix | Delete

[142] Fix | Delete

if ($fillMode == 'default') {

[143] Fix | Delete

$fillMode = $this->slider->params->get('backgroundMode', 'fill');

[144] Fix | Delete

[145] Fix | Delete

}

[146] Fix | Delete

[147] Fix | Delete

$backgroundElements = array();

[148] Fix | Delete

[149] Fix | Delete

if ($backgroundType == 'color') {

[150] Fix | Delete

$backgroundElements[] = $this->renderColor($slide);

[151] Fix | Delete

[152] Fix | Delete

} else if ($backgroundType == 'video') {

[153] Fix | Delete

[154] Fix | Delete

[155] Fix | Delete

$backgroundElements[] = $this->renderBackgroundVideo($slide);

[156] Fix | Delete

$backgroundElements[] = $this->renderImage($slide, $fillMode);

[157] Fix | Delete

[158] Fix | Delete

$backgroundElements[] = $this->renderColor($slide);

[159] Fix | Delete

[160] Fix | Delete

} else if ($backgroundType == 'image') {

[161] Fix | Delete

[162] Fix | Delete

[163] Fix | Delete

$backgroundElements[] = $this->renderImage($slide, $fillMode);

[164] Fix | Delete

[165] Fix | Delete

$backgroundElements[] = $this->renderColor($slide);

[166] Fix | Delete

}

[167] Fix | Delete

[168] Fix | Delete

$html = implode('', $backgroundElements);

[169] Fix | Delete

[170] Fix | Delete

/* @see https://bugs.chromium.org/p/chromium/issues/detail?id=1181291

[171] Fix | Delete

* if (!$slide->getFrontendFirst()) {

[172] Fix | Delete

* $html = '<template>' . $html . '</template>';

[173] Fix | Delete

* }

[174] Fix | Delete

[175] Fix | Delete

[176] Fix | Delete

return Html::tag('div', array(

[177] Fix | Delete

'class' => "n2-ss-slide-background",

[178] Fix | Delete

'data-public-id' => $slide->publicID,

[179] Fix | Delete

'data-mode' => $fillMode

[180] Fix | Delete

), $html);

[181] Fix | Delete

}

[182] Fix | Delete

[183] Fix | Delete

private function renderColor($slide) {

[184] Fix | Delete

$backgroundAttributes = $this->getBackgroundStyle($slide);

[185] Fix | Delete

[186] Fix | Delete

if (!empty($backgroundAttributes['style'])) {

[187] Fix | Delete

[188] Fix | Delete

$backgroundAttributes['class'] = 'n2-ss-slide-background-color';

[189] Fix | Delete

[190] Fix | Delete

if ($slide->parameters->get('backgroundColorOverlay', 0)) {

[191] Fix | Delete

$backgroundAttributes['data-overlay'] = 1;

[192] Fix | Delete

}

[193] Fix | Delete

[194] Fix | Delete

return Html::tag('div', $backgroundAttributes, '');

[195] Fix | Delete

}

[196] Fix | Delete

[197] Fix | Delete

return '';

[198] Fix | Delete

}

[199] Fix | Delete

[200] Fix | Delete

/**

[201] Fix | Delete

* @param $slide Slide

[202] Fix | Delete

* @param $fillMode

[203] Fix | Delete

[204] Fix | Delete

* @return string

[205] Fix | Delete

[206] Fix | Delete

private function renderImage($slide, $fillMode) {

[207] Fix | Delete

[208] Fix | Delete

$rawBackgroundImage = $slide->parameters->get('backgroundImage', '');

[209] Fix | Delete

[210] Fix | Delete

if (empty($rawBackgroundImage)) {

[211] Fix | Delete

return '';

[212] Fix | Delete

}

[213] Fix | Delete

[214] Fix | Delete

$backgroundImageBlur = max(0, $slide->parameters->get('backgroundImageBlur', 0));

[215] Fix | Delete

[216] Fix | Delete

$focusX = max(0, min(100, $slide->fill($slide->parameters->get('backgroundFocusX', 50))));

[217] Fix | Delete

$focusY = max(0, min(100, $slide->fill($slide->parameters->get('backgroundFocusY', 50))));

[218] Fix | Delete

[219] Fix | Delete

$backgroundImageMobile = '';

[220] Fix | Delete

$backgroundImageTablet = '';

[221] Fix | Delete

$backgroundImageDesktopRetina = '';

[222] Fix | Delete

$backgroundImage = $slide->fill($rawBackgroundImage);

[223] Fix | Delete

[224] Fix | Delete

if (!$slide->hasGenerator()) {

[225] Fix | Delete

$imageData = ImageManager::getImageData($backgroundImage);

[226] Fix | Delete

$backgroundImageDesktopRetina = $imageData['desktop-retina']['image'];

[227] Fix | Delete

$backgroundImageMobile = $imageData['mobile']['image'];

[228] Fix | Delete

$backgroundImageTablet = $imageData['tablet']['image'];

[229] Fix | Delete

}

[230] Fix | Delete

[231] Fix | Delete

$alt = $slide->fill($slide->parameters->get('backgroundAlt', ''));

[232] Fix | Delete

$title = $slide->fill($slide->parameters->get('backgroundTitle', ''));

[233] Fix | Delete

[234] Fix | Delete

[235] Fix | Delete

$opacity = min(100, max(0, $slide->parameters->get('backgroundImageOpacity', 100)));

[236] Fix | Delete

[237] Fix | Delete

$style = array();

[238] Fix | Delete

if ($opacity < 100) {

[239] Fix | Delete

$style[] = 'opacity:' . ($opacity / 100);

[240] Fix | Delete

}

[241] Fix | Delete

[242] Fix | Delete

if ($focusX != '50') {

[243] Fix | Delete

$style[] = '--ss-o-pos-x:' . $focusX . '%';

[244] Fix | Delete

}

[245] Fix | Delete

[246] Fix | Delete

if ($focusY != '50') {

[247] Fix | Delete

$style[] = '--ss-o-pos-y:' . $focusY . '%';

[248] Fix | Delete

}

[249] Fix | Delete

[250] Fix | Delete

$attributes = array(

[251] Fix | Delete

"class" => 'n2-ss-slide-background-image',

[252] Fix | Delete

"data-blur" => $backgroundImageBlur,

[253] Fix | Delete

"data-opacity" => $opacity,

[254] Fix | Delete

"data-x" => $focusX,

[255] Fix | Delete

"data-y" => $focusY,

[256] Fix | Delete

"data-alt" => $alt,

[257] Fix | Delete

"data-title" => $title

[258] Fix | Delete

);

[259] Fix | Delete

[260] Fix | Delete

if (!empty($style)) {

[261] Fix | Delete

$attributes['style'] = implode(';', $style);

[262] Fix | Delete

}

[263] Fix | Delete

[264] Fix | Delete

$sources = array();

[265] Fix | Delete

[266] Fix | Delete

if ($this->slider->isAdmin) {

[267] Fix | Delete

$src = $backgroundImage;

[268] Fix | Delete

[269] Fix | Delete

$attributes['data-hash'] = md5($src);

[270] Fix | Delete

$attributes['data-src-desktop'] = $src;

[271] Fix | Delete

$attributes['data-src-desktop-retina'] = $backgroundImageDesktopRetina;

[272] Fix | Delete

$attributes['data-src-tablet'] = $backgroundImageTablet;

[273] Fix | Delete

$attributes['data-src-mobile'] = $backgroundImageMobile;

[274] Fix | Delete

} else {

[275] Fix | Delete

[276] Fix | Delete

if (empty($backgroundImage)) {

[277] Fix | Delete

/**

[278] Fix | Delete

* @todo Does it really work as expected?

[279] Fix | Delete

[280] Fix | Delete

$src = ImageEdit::base64Transparent();

[281] Fix | Delete

} else {

[282] Fix | Delete

/**

[283] Fix | Delete

* @todo this resize might have a better place

[284] Fix | Delete

[285] Fix | Delete

$src = $backgroundImage;

[286] Fix | Delete

if ($this->slider->params->get('optimize-scale', 0)) {

[287] Fix | Delete

$src = ResourceTranslator::urlToResource($this->slider->features->optimize->optimizeBackground($backgroundImage, $focusX, $focusY));

[288] Fix | Delete

}

[289] Fix | Delete

[290] Fix | Delete

[291] Fix | Delete

$slide->addImage(ResourceTranslator::toUrl($src));

[292] Fix | Delete

}

[293] Fix | Delete

[294] Fix | Delete

$hasDeviceSpecificImage = false;

[295] Fix | Delete

[296] Fix | Delete

$mediaQueries = $this->slider->features->responsive->mediaQueries;

[297] Fix | Delete

[298] Fix | Delete

if (!empty($backgroundImageDesktopRetina)) {

[299] Fix | Delete

[300] Fix | Delete

$hasDeviceSpecificImage = true;

[301] Fix | Delete

[302] Fix | Delete

$backgroundImageDesktopRetina = ResourceTranslator::toUrl($backgroundImageDesktopRetina);

[303] Fix | Delete

[304] Fix | Delete

$mediaQueryMinPixelRatio = ' and (-webkit-min-device-pixel-ratio: 1.5)';

[305] Fix | Delete

[306] Fix | Delete

if (!empty($mediaQueries['desktopportrait'])) {

[307] Fix | Delete

$sources[] = HTML::tag('source', Html::addExcludeLazyLoadAttributes(array(

[308] Fix | Delete

'srcset' => $backgroundImageDesktopRetina,

[309] Fix | Delete

'media' => implode($mediaQueryMinPixelRatio . ',', $mediaQueries['desktopportrait']) . $mediaQueryMinPixelRatio

[310] Fix | Delete

)), false, false);

[311] Fix | Delete

}

[312] Fix | Delete

if (!empty($mediaQueries['desktoplandscape'])) {

[313] Fix | Delete

$sources[] = HTML::tag('source', Html::addExcludeLazyLoadAttributes(array(

[314] Fix | Delete

'srcset' => $backgroundImageDesktopRetina,

[315] Fix | Delete

'media' => implode($mediaQueryMinPixelRatio . ',', $mediaQueries['desktoplandscape']) . $mediaQueryMinPixelRatio

[316] Fix | Delete

)), false, false);

[317] Fix | Delete

}

[318] Fix | Delete

[319] Fix | Delete

}

[320] Fix | Delete

[321] Fix | Delete

if (!empty($backgroundImageMobile)) {

[322] Fix | Delete

[323] Fix | Delete

$hasDeviceSpecificImage = true;

[324] Fix | Delete

[325] Fix | Delete

$backgroundImageMobileUrl = ResourceTranslator::toUrl($backgroundImageMobile);

[326] Fix | Delete

[327] Fix | Delete

if (!empty($mediaQueries['mobileportrait'])) {

[328] Fix | Delete

$sources[] = HTML::tag('source', Html::addExcludeLazyLoadAttributes(array(

[329] Fix | Delete

'srcset' => $backgroundImageMobileUrl,

[330] Fix | Delete

'media' => implode(',', $mediaQueries['mobileportrait'])

[331] Fix | Delete

)), false, false);

[332] Fix | Delete

}

[333] Fix | Delete

if (!empty($mediaQueries['mobilelandscape'])) {

[334] Fix | Delete

$sources[] = HTML::tag('source', Html::addExcludeLazyLoadAttributes(array(

[335] Fix | Delete

'srcset' => $backgroundImageMobileUrl,

[336] Fix | Delete

'media' => implode(',', $mediaQueries['mobilelandscape'])

[337] Fix | Delete

)), false, false);

[338] Fix | Delete

}

[339] Fix | Delete

}

[340] Fix | Delete

[341] Fix | Delete

if (!empty($backgroundImageTablet)) {

[342] Fix | Delete

[343] Fix | Delete

$hasDeviceSpecificImage = true;

[344] Fix | Delete

[345] Fix | Delete

$backgroundImageTabletUrl = ResourceTranslator::toUrl($backgroundImageTablet);

[346] Fix | Delete

[347] Fix | Delete

if (!empty($mediaQueries['tabletportrait'])) {

[348] Fix | Delete

$sources[] = HTML::tag('source', Html::addExcludeLazyLoadAttributes(array(

[349] Fix | Delete

'srcset' => $backgroundImageTabletUrl,

[350] Fix | Delete

'media' => implode(',', $mediaQueries['tabletportrait'])

[351] Fix | Delete

)), false, false);

[352] Fix | Delete

}

[353] Fix | Delete

if (!empty($mediaQueries['tabletlandscape'])) {

[354] Fix | Delete

$sources[] = HTML::tag('source', Html::addExcludeLazyLoadAttributes(array(

[355] Fix | Delete

'srcset' => $backgroundImageTabletUrl,

[356] Fix | Delete

'media' => implode(',', $mediaQueries['tabletlandscape'])

[357] Fix | Delete

)), false, false);

[358] Fix | Delete

}

[359] Fix | Delete

}

[360] Fix | Delete

}

[361] Fix | Delete

[362] Fix | Delete

$imageAttributes = array(

[363] Fix | Delete

'src' => ResourceTranslator::toUrl($src),

[364] Fix | Delete

'alt' => $alt,

[365] Fix | Delete

'title' => $title,

[366] Fix | Delete

'loading' => 'lazy',

[367] Fix | Delete

'style' => ''

[368] Fix | Delete

);

[369] Fix | Delete

[370] Fix | Delete

$imageAttributes = Html::addExcludeLazyLoadAttributes($imageAttributes);

[371] Fix | Delete

[372] Fix | Delete

$sources[] = Html::tag('img', $imageAttributes, '', false);

[373] Fix | Delete

[374] Fix | Delete

$picture = HTML::tag('picture', Html::addExcludeLazyLoadAttributes(), implode('', $sources));

[375] Fix | Delete

[376] Fix | Delete

$originalImage = Html::tag('div', $attributes, $picture);

[377] Fix | Delete

[378] Fix | Delete

if ($fillMode === 'blurfit') {

[379] Fix | Delete

$slideOption = $slide->parameters->get('backgroundMode', 'default');

[380] Fix | Delete

[381] Fix | Delete

if ($slideOption === 'blurfit') {

[382] Fix | Delete

$blurFit = $slide->parameters->get('backgroundBlurFit', 7);

[383] Fix | Delete

} else {

[384] Fix | Delete

$blurFit = $this->slider->params->get('backgroundBlurFit', 7);

[385] Fix | Delete

$attributes['data-blurfitmode'] = 'default';

[386] Fix | Delete

}

[387] Fix | Delete

$picture = HTML::tag('picture', Html::addExcludeLazyLoadAttributes(array(

[388] Fix | Delete

'style' => 'filter:blur(' . $blurFit . 'px)'

[389] Fix | Delete

)), implode('', $sources));

[390] Fix | Delete

$blurFitStyle = array(

[391] Fix | Delete

'margin:-' . ($blurFit * 2) . 'px',

[392] Fix | Delete

'padding:' . ($blurFit * 2) . 'px'

[393] Fix | Delete

);

[394] Fix | Delete

if (!isset($attributes['style'])) {

[395] Fix | Delete

$attributes['style'] = '';

[396] Fix | Delete

}

[397] Fix | Delete

[398] Fix | Delete

$attributes['data-globalblur'] = $this->slider->params->get('backgroundBlurFit', 7);

[399] Fix | Delete

$attributes['data-bgblur'] = $slide->parameters->get('backgroundBlurFit', 7);

[400] Fix | Delete

$attributes['style'] = implode(';', $blurFitStyle);

[401] Fix | Delete

$ret = Html::tag('div', $attributes, $picture) . $originalImage;

[402] Fix | Delete

} else {

[403] Fix | Delete

$ret = $originalImage;

[404] Fix | Delete

}

[405] Fix | Delete

[406] Fix | Delete

return $ret;

[407] Fix | Delete

}

[408] Fix | Delete

[409] Fix | Delete

/**

[410] Fix | Delete

* @param Slide $slide

[411] Fix | Delete

[412] Fix | Delete

* @return string

[413] Fix | Delete

[414] Fix | Delete

private function renderBackgroundVideo($slide) {

[415] Fix | Delete

[416] Fix | Delete

return '';

[417] Fix | Delete

}

[418] Fix | Delete

}

[419] Fix | Delete