Current File : /home/pacjaorg/www/kmm/components/com_sppagebuilder/layouts/column/css.php

<?php

/**
 * @package SP Page Builder
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2023 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */
//no direct access
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\Filesystem\Path;

$options = $displayData['options'];
$custom_class  = (isset($options->class)) ? ' ' . $options->class : '';
$data_attr = '';
$doc = Factory::getDocument();
$device = SpPgaeBuilderBase::$defaultDevice;

$deviceList = array_filter(AddonHelper::$deviceList, function ($size) {
	return $size !== SpPgaeBuilderBase::$defaultDevice;
});

// Image lazy load
$config = ComponentHelper::getParams('com_sppagebuilder');
$lazyload = $config->get('lazyloadimg', '0');
$placeholder = $config->get('lazyplaceholder', '');
$lazy_bg_image = '';
$placeholder_bg_image = '';

// Style
$styleX = '';
$style = '';

$column_styles = '';
$columnSelector = '#column-id-' . $options->dynamicId;
$columnWrapSelector = '#column-wrap-id-' . $options->dynamicId;
$options->boxshadow = CSSHelper::parseBoxShadow($options, 'boxshadow');

$cssHelper = new CSSHelper($columnSelector);
$propMap = [
	'column_height' => 'height',
	'column_min_height' => 'min-height',
	'column_max_height' => 'max-height',
	'padding' => 'padding',
	'border_radius' => 'border-radius',
	'boxshadow' => "box-shadow"
];
$units = ['width' => false, 'boxshadow' => false];
$modifier = ['padding' => 'spacing'];

if (isset($options->use_border) && $options->use_border) {
	$propMap['border_width'] = 'border-width';
	$propMap['border_color'] = 'border-color';
	$propMap['boder_style'] = 'border-style';
	$units['border_color'] = false;
	$units['boder_style'] = false;
}

if (!empty($options->color)) {
	$propMap['color'] = 'color';
	$units['color'] = false;
}

$columnStyle = $cssHelper->generateStyle(':self', $options, $propMap, $units, $modifier);
$column_styles .= $columnStyle;

$cssHelper->setID($columnWrapSelector);
$columnWrapperPropMap = [
	'width' => ['max-width', 'flex-basis'],
	'margin' => 'margin'
];

$columnWrapperUnits = ['width' => false];
$columnWrapperModifiers = ['margin' => 'spacing'];

$columnWrapperStyle = $cssHelper->generateStyle(':self', $options, $columnWrapperPropMap, $columnWrapperUnits, $columnWrapperModifiers);
$column_styles .= $columnWrapperStyle;

$cssHelper->setID($columnSelector);
$borderRadiusStyle = $cssHelper->generateStyle('.sppb-column-overlay', $options, ['border_radius' => 'border-radius']);
$column_styles .= $borderRadiusStyle;

$background_image = (isset($options->background_image) && $options->background_image) ? $options->background_image : '';
$background_image_src = isset($background_image->src) ? $background_image->src : $background_image;
if (isset($options->background_type)) {
	if (($options->background_type == 'image' || $options->background_type == 'color') && isset($options->background) && $options->background) $style .= 'background-color:' . $options->background . ';';

	if ($options->background_type == 'image' && $background_image_src) {
		if ($lazyload) {
			if ($placeholder) {
				$placeholder_bg_image .= 'background-image:url(' . $placeholder . ');';
			}
			if (strpos($background_image_src, "http://") !== false || strpos($background_image_src, "https://") !== false) {
				$lazy_bg_image .= 'background-image:url(' . $background_image_src . ');';
			} else {
				$original_src = Uri::base(true) . '/' . $background_image_src;
				$lazy_bg_image .= 'background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');';
			}
		} else {
			if (strpos($background_image_src, "http://") !== false || strpos($background_image_src, "https://") !== false) {
				$style .= 'background-image:url(' . $background_image_src . ');';
			} else {
				$original_src = Uri::base(true) . '/' . $background_image_src;
				$style .= 'background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');';
			}
		}

		if (isset($options->background_repeat) && $options->background_repeat) $style .= 'background-repeat:' . $options->background_repeat . ';';
		if (isset($options->background_size) && $options->background_size && $options->background_size != 'custom') $style .= 'background-size:' . $options->background_size . ';';
		if (isset($options->background_attachment) && $options->background_attachment) $style .= 'background-attachment:' . $options->background_attachment . ';';
		if (isset($options->background_position) && $options->background_position && $options->background_position != 'custom') $style .= 'background-position:' . $options->background_position . ';';

		if (isset($options->background_size) && $options->background_size === 'custom') {
			if (isset($options->background_size_custom) && \is_object($options->background_size_custom)) {
				$customBackgroundSize = AddonHelper::generateMultiDeviceObject($options, 'background_size_custom', 'background-size', $device, false, ($options->background_size_custom->unit ?? 'px'));
				$styleX .= $customBackgroundSize->$device;
			}
		}
	}

	if (isset($options->background_position) && $options->background_position === 'custom') {
		$customBackgroundPosition = AddonHelper::initDeviceObject();

		foreach ($customBackgroundPosition as $key => $_) {
			if (isset($options->background_position_custom_x->$key) && isset($options->background_position_custom_y->$key)) {
				$xUnit = $options->background_position_custom_x->unit;
				$yUnit = $options->background_position_custom_y->unit;
				$customBackgroundPosition->$key = \is_object($options->background_position_custom_x) && \is_object($options->background_position_custom_y)
					? 'background-position: ' . $options->background_position_custom_x->$key . $xUnit . ' ' . $options->background_position_custom_y->$key . $yUnit . ';'
					: 'background-position: ' . $options->background_position_custom_x . $xUnit . ' ' . $options->background_position_custom_y . $yUnit . ';';
			}
		}

		$styleX .= $customBackgroundPosition->$device;
	}

	if ($options->background_type == 'gradient' && isset($options->background_gradient) && is_object($options->background_gradient)) {
		$radialPos = (isset($options->background_gradient->radialPos) && !empty($options->background_gradient->radialPos)) ? $options->background_gradient->radialPos : 'center center';

		$gradientColor = (isset($options->background_gradient->color) && !empty($options->background_gradient->color)) ? $options->background_gradient->color : '';

		$gradientColor2 = (isset($options->background_gradient->color2) && !empty($options->background_gradient->color2)) ? $options->background_gradient->color2 : '';

		$gradientDeg = (isset($options->background_gradient->deg) && !empty($options->background_gradient->deg)) ? $options->background_gradient->deg : '0';

		$gradientPos = (isset($options->background_gradient->pos) && !empty($options->background_gradient->pos)) ? $options->background_gradient->pos : '0';

		$gradientPos2 = (isset($options->background_gradient->pos2) && !empty($options->background_gradient->pos2)) ? $options->background_gradient->pos2 : '100';

		if (isset($options->background_gradient->type) && $options->background_gradient->type == 'radial') {
			$style .= "\tbackground-image: radial-gradient(at " . $radialPos . ", " . $gradientColor . " " . $gradientPos . "%, " . $gradientColor2 . " " . $gradientPos2 . "%);\n";
		} else {
			$style .= "\tbackground-image: linear-gradient(" . $gradientDeg . "deg, " . $gradientColor . " " . $gradientPos . "%, " . $gradientColor2 . " " . $gradientPos2 . "%);\n";
		}
	}
} else {
	if (isset($options->background) && $options->background) $style .= 'background-color:' . $options->background . ';';

	if ($background_image_src) {

		if ($lazyload) {
			if ($placeholder) {
				$placeholder_bg_image .= 'background-image:url(' . $placeholder . ');';
			}
			if (strpos($background_image_src, "http://") !== false || strpos($background_image_src, "https://") !== false) {
				$lazy_bg_image .= 'background-image:url(' . $background_image_src . ');';
			} else {
				$original_src = Uri::base(true) . '/' . $background_image_src;
				$lazy_bg_image .= 'background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');';
			}
		} else {
			if (strpos($background_image_src, "http://") !== false || strpos($background_image_src, "https://") !== false) {
				$style .= 'background-image:url(' . $background_image_src . ');';
			} else {
				$original_src = Uri::base(true) . '/' . $background_image_src;
				$style .= 'background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');';
			}
		}

		if (isset($options->background_repeat) && $options->background_repeat) $style .= 'background-repeat:' . $options->background_repeat . ';';
		if (isset($options->background_size) && $options->background_size && $options->background_size != 'custom') $style .= 'background-size:' . $options->background_size . ';';
		if (isset($options->background_attachment) && $options->background_attachment) $style .= 'background-attachment:' . $options->background_attachment . ';';
		if (isset($options->background_position) && $options->background_position && $options->background_position != 'custom') $style .= 'background-position:' . $options->background_position . ';';

		if (isset($options->background_size) && $options->background_size == 'custom') {
			if (isset($options->background_size_custom) && is_object($options->background_size_custom)) {
				$customBackgroundSize2 = AddonHelper::generateMultiDeviceObject($options, 'background_size_custom', 'background-size', $device, false, ($options->background_size_custom->unit ?? 'px'));
				$styleX .= $customBackgroundSize2->$device;
			}
		}
	}

	if (isset($options->background_position) && $options->background_position == 'custom') {
		$customBackgroundPosition2 = AddonHelper::initDeviceObject();

		foreach ($customBackgroundPosition2 as $key => $_) {
			if (isset($options->background_position_custom_x->$key) && isset($options->background_position_custom_y->$key)) {
				$xUnit = $options->background_position_custom_x->unit;
				$yUnit = $options->background_position_custom_y->unit;
				$customBackgroundPosition2->$key = \is_object($options->background_position_custom_x) && \is_object($options->background_position_custom_y)
					? 'background-position: ' . $options->background_position_custom_x->$key . $xUnit . ' ' . $options->background_position_custom_y->$key . $yUnit . ';'
					: 'background-position: ' . $options->background_position_custom_x . $xUnit . ' ' . $options->background_position_custom_y . $yUnit . ';';
			}
		}

		$styleX .= $customBackgroundPosition2->$device;
	}
}

$customBackgroundSize = $customBackgroundSize ?? null;
$customBackgroundPosition = $customBackgroundPosition ?? null;
$customBackgroundSize2 = $customBackgroundSize2 ?? null;
$customBackgroundPosition2 = $customBackgroundPosition2 ?? null;

$columnMediaStyle = array_map(function ($size) use (
	$columnSelector,
	$customBackgroundSize,
	$customBackgroundPosition,
	$customBackgroundSize2,
	$customBackgroundPosition2
) {
	$str = '';
	$str .= AddonHelper::mediaQuery($size);
	$str .= $columnSelector . '{';
	$str .= $customBackgroundSize ? $customBackgroundSize->$size : '';
	$str .= $customBackgroundPosition ? $customBackgroundPosition->$size : '';
	$str .= $customBackgroundSize2 ? $customBackgroundSize2->$size : '';
	$str .= $customBackgroundPosition2 ? $customBackgroundPosition2->$size : '';
	$str .= '}';
	$str .= '}';

	return $str;
}, $deviceList);


$columnMediaStyle = implode("\r\n", $columnMediaStyle);

if ($styleX) {
	$column_styles .= $columnSelector . '{' . $styleX . '}';
}

if (!empty($borderRadius->$device)) {
	$column_styles .= '#column-id-' . $options->dynamicId . ' .sppb-column-overlay {' . $borderRadius->$device . '}';
}

if ($columnMediaStyle) {
	$column_styles .= $columnMediaStyle;
}

if ($style) {
	$column_styles .= '#column-id-' . $options->dynamicId . '{' . $style . '}';
	$column_styles .= '#column-id-' . $options->dynamicId . '{' . $placeholder_bg_image . '}';
	$column_styles .= '#column-id-' . $options->dynamicId . '.sppb-element-loaded {' . $lazy_bg_image . '}';
}

//Overlay
$pattern_overlay = (isset($options->pattern_overlay) && $options->pattern_overlay) ? $options->pattern_overlay : '';
$pattern_overlay_src = isset($pattern_overlay->src) ? $pattern_overlay->src : $pattern_overlay;

if (isset($options->background_type)) {
	if ($options->background_type == 'image' && $background_image_src) {
		if (!isset($options->overlay_type)) {
			$options->overlay_type = 'overlay_color';
		}
		if (isset($options->overlay) && $options->overlay && $options->overlay_type === 'overlay_color') {
			$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {background-color: ' . $options->overlay . '}';
		}
		if (isset($options->gradient_overlay) && $options->gradient_overlay && $options->overlay_type == 'overlay_gradient') {
			$overlay_radialPos = (isset($options->gradient_overlay->radialPos) && !empty($options->gradient_overlay->radialPos)) ? $options->gradient_overlay->radialPos : 'center center';
			$overlay_gradientColor = (isset($options->gradient_overlay->color) && !empty($options->gradient_overlay->color)) ? $options->gradient_overlay->color : '';
			$overlay_gradientColor2 = (isset($options->gradient_overlay->color2) && !empty($options->gradient_overlay->color2)) ? $options->gradient_overlay->color2 : '';
			$overlay_gradientDeg = (isset($options->gradient_overlay->deg) && !empty($options->gradient_overlay->deg)) ? $options->gradient_overlay->deg : '0';
			$overlay_gradientPos = (isset($options->gradient_overlay->pos) && !empty($options->gradient_overlay->pos)) ? $options->gradient_overlay->pos : '0';
			$overlay_gradientPos2 = (isset($options->gradient_overlay->pos2) && !empty($options->gradient_overlay->pos2)) ? $options->gradient_overlay->pos2 : '100';

			if (isset($options->gradient_overlay->type) && $options->gradient_overlay->type == 'radial') {
				$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
					background: radial-gradient(at ' . $overlay_radialPos . ', ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
				}';
			} else {
				$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
					background: linear-gradient(' . $overlay_gradientDeg . 'deg, ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
				}';
			}
		}

		if ($pattern_overlay_src && $options->overlay_type == 'overlay_pattern') {

			if (strpos($pattern_overlay_src, "http://") !== false || strpos($pattern_overlay_src, "https://") !== false) {
				$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
					background-image:url(' . $pattern_overlay_src . ');
					background-attachment: scroll;
				}';
				if (isset($options->overlay_pattern_color)) {
					$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
						background-color:' . $options->overlay_pattern_color . ';
					}';
				}
			} else {
				$original_src = Uri::base(true) . '/' . $pattern_overlay_src;
				$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
					background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');
					background-attachment: scroll;
				}';
				if (isset($options->overlay_pattern_color)) {
					$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
						background-color:' . $options->overlay_pattern_color . ';
					}';
				}
			}
		}
	}
} else {
	if (isset($options->background_image) && $options->background_image) {
		if (!isset($options->overlay_type)) {
			$options->overlay_type = 'overlay_color';
		}
		if (isset($options->overlay) && $options->overlay && $options->overlay_type == 'overlay_color') {
			$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {background-color: ' . $options->overlay . '}';
		}
		if (isset($options->gradient_overlay) && $options->gradient_overlay && $options->overlay_type == 'overlay_gradient') {
			$overlay_radialPos = (isset($options->gradient_overlay->radialPos) && !empty($options->gradient_overlay->radialPos)) ? $options->gradient_overlay->radialPos : 'center center';

			$overlay_gradientColor = (isset($options->gradient_overlay->color) && !empty($options->gradient_overlay->color)) ? $options->gradient_overlay->color : '';
			$overlay_gradientColor2 = (isset($options->gradient_overlay->color2) && !empty($options->gradient_overlay->color2)) ? $options->gradient_overlay->color2 : '';
			$overlay_gradientDeg = (isset($options->gradient_overlay->deg) && !empty($options->gradient_overlay->deg)) ? $options->gradient_overlay->deg : '0';
			$overlay_gradientPos = (isset($options->gradient_overlay->pos) && !empty($options->gradient_overlay->pos)) ? $options->gradient_overlay->pos : '0';
			$overlay_gradientPos2 = (isset($options->gradient_overlay->pos2) && !empty($options->gradient_overlay->pos2)) ? $options->gradient_overlay->pos2 : '100';

			if (isset($options->gradient_overlay->type) && $options->gradient_overlay->type == 'radial') {
				$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
					background: radial-gradient(at ' . $overlay_radialPos . ', ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
				}';
			} else {
				$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
					background: linear-gradient(' . $overlay_gradientDeg . 'deg, ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
				}';
			}
		}
		if ($pattern_overlay_src && $options->overlay_type == 'overlay_pattern') {
			if (strpos($pattern_overlay_src, "http://") !== false || strpos($pattern_overlay_src, "https://") !== false) {
				$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
					background-image:url(' . $pattern_overlay_src . ');
					background-attachment: scroll;
				}';
				if (isset($options->overlay_pattern_color)) {
					$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
						background-color:' . $options->overlay_pattern_color . ';
					}';
				}
			} else {
				$original_src = Uri::base(true) . '/' . $pattern_overlay_src;
				$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
					background-image:url(' . SppagebuilderHelperSite::cleanPath($original_src) . ');
					background-attachment: scroll;
				}';
				if (isset($options->overlay_pattern_color)) {
					$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
						background-color:' . $options->overlay_pattern_color . ';
					}';
				}
			}
		}
	}
}

//Blend Mode
if (isset($options->background_type) && $options->background_type) {
	if ($options->background_type == 'image') {
		if (isset($options->blend_mode) && $options->blend_mode) {
			$column_styles .= '#column-id-' . $options->dynamicId . ' > .sppb-column-overlay {
				mix-blend-mode:' . $options->blend_mode . ';
			}';
		}
	}
}

echo $column_styles;