| Current File : /home/pacjaorg/public_html/kmm/components/com_sppagebuilder/layouts/addon/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\Layout\FileLayout;
use Joomla\CMS\Component\ComponentHelper;
$doc = Factory::getDocument();
$heading_addon_name = 'heading';
//Image lazy load
$config = ComponentHelper::getParams('com_sppagebuilder');
$lazyload = $config->get('lazyloadimg', '0');
$placeholder = $config->get('lazyplaceholder', '');
$lazy_bg_image = '';
$placeholder_bg_image = '';
if (!class_exists('SppbCustomCssParser'))
{
require_once JPATH_ROOT . '/components/com_sppagebuilder/helpers/css-parser.php';
}
$selector_css = new FileLayout('addon.css.selector', JPATH_ROOT . '/components/com_sppagebuilder/layouts');
$addon = $displayData['addon'];
$settings = $addon->settings;
$inlineCSS = '';
$addon_css = '';
$addon_link_css = '';
$addon_link_hover_css = '';
$addon_id = "#sppb-addon-" . $addon->id;
$addon_wrapper_id = "#sppb-addon-wrapper-" . $addon->id;
$cssHelper = new CSSHelper($addon_id);
/** Addon styles. */
$propsMap = [
'global_text_color' => 'color',
'global_border_width' => !empty($settings->global_user_border) ? 'border-width' : null,
'global_border_color' => !empty($settings->global_user_border) ? 'border-color' : null,
'global_boder_style' => !empty($settings->global_user_border) ? 'border-style' : null,
'global_border_radius' => 'border-radius',
'global_padding' => 'padding',
];
$units = ['global_text_color' => false, 'global_border_color' => false, 'global_boder_style' => false, 'global_padding' => false];
$modifier = ['global_padding' => 'spacing'];
$addonStyle = $cssHelper->generateStyle(':self', $settings, $propsMap, $units, $modifier);
/** Addon wrapper styles. */
/** If the addon is not a DIV addon then apply the style to the addon wrapper. */
if (isset($addon->name) && $addon->name !== 'div')
{
$cssHelper->setID($addon_wrapper_id);
}
$propsMap = [
'global_margin' => 'margin',
'global_seclect_position' => !empty($settings->global_custom_position) ? 'position' : null,
'global_addon_position_left' => !empty($settings->global_custom_position) ? 'left' : null,
'global_addon_position_top' => !empty($settings->global_custom_position) ? 'top' : null,
'global_addon_z_index' => !empty($settings->global_custom_position) ? 'z-index' : null,
'global_width' => !empty($settings->use_global_width) ? 'width' : null,
];
$units = [
'global_margin' => false,
'global_seclect_position' => false,
'global_addon_z_index' => false,
'global_width' => '%'
];
$modifier = ['global_margin' => 'spacing'];
$wrapperStyle = $cssHelper->generateStyle(':self', $settings, $propsMap, $units, $modifier);
$cssHelper->setID($addon_id);
if (isset($settings->global_link_color) && $settings->global_link_color)
{
$addon_link_css .= "\tcolor: " . $settings->global_link_color . ";\n";
}
if (isset($settings->global_link_hover_color) && $settings->global_link_hover_color)
{
$addon_link_hover_css .= "\tcolor: " . $settings->global_link_hover_color . ";\n";
}
// Background
$global_background_image = (isset($settings->global_background_image) && $settings->global_background_image) ? $settings->global_background_image : '';
$global_background_image_src = isset($global_background_image->src) ? $global_background_image->src : $global_background_image;
if (!isset($settings->global_background_type) && isset($settings->global_use_background) && $settings->global_use_background)
{
if (isset($settings->global_background_color) && $settings->global_background_color)
{
$addon_css .= "\tbackground-color: " . $settings->global_background_color . ";\n";
}
if ($global_background_image_src)
{
if ($lazyload)
{
if ($placeholder)
{
$placeholder_bg_image .= 'background-image:url(' . $placeholder . ');';
}
if (strpos($global_background_image_src, "http://") !== false || strpos($global_background_image_src, "https://") !== false)
{
$lazy_bg_image .= "\tbackground-image: url(" . $global_background_image_src . ");\n";
}
else
{
$lazy_bg_image .= "\tbackground-image: url(" . Uri::base(true) . '/' . $global_background_image_src . ");\n";
}
}
else
{
if (strpos($global_background_image_src, "http://") !== false || strpos($global_background_image_src, "https://") !== false)
{
$addon_css .= "\tbackground-image: url(" . $global_background_image_src . ");\n";
}
else
{
$addon_css .= "\tbackground-image: url(" . Uri::base(true) . '/' . $global_background_image_src . ");\n";
}
}
if (isset($settings->global_background_repeat) && $settings->global_background_repeat)
{
$addon_css .= "\tbackground-repeat: " . $settings->global_background_repeat . ";\n";
}
if (isset($settings->global_background_size) && $settings->global_background_size)
{
$addon_css .= "\tbackground-size: " . $settings->global_background_size . ";\n";
}
if (isset($settings->global_background_attachment) && $settings->global_background_attachment)
{
$addon_css .= "\tbackground-attachment: " . $settings->global_background_attachment . ";\n";
}
if (isset($settings->global_background_position) && $settings->global_background_position)
{
$addon_css .= "background-position:" . $settings->global_background_position . ";";
}
}
}
elseif (isset($settings->global_background_type))
{
if (($settings->global_background_type == 'color' || $settings->global_background_type == 'image') && isset($settings->global_background_color) && $settings->global_background_color)
{
$addon_css .= "\tbackground-color: " . $settings->global_background_color . ";\n";
}
if ($settings->global_background_type == 'gradient' && isset($settings->global_background_gradient) && is_object($settings->global_background_gradient))
{
$radialPos = (isset($settings->global_background_gradient->radialPos) && !empty($settings->global_background_gradient->radialPos)) ? $settings->global_background_gradient->radialPos : 'center center';
$gradientColor = (isset($settings->global_background_gradient->color) && !empty($settings->global_background_gradient->color)) ? $settings->global_background_gradient->color : '';
$gradientColor2 = (isset($settings->global_background_gradient->color2) && !empty($settings->global_background_gradient->color2)) ? $settings->global_background_gradient->color2 : '';
$gradientDeg = (isset($settings->global_background_gradient->deg) && !empty($settings->global_background_gradient->deg)) ? $settings->global_background_gradient->deg : '0';
$gradientPos = (isset($settings->global_background_gradient->pos) && !empty($settings->global_background_gradient->pos)) ? $settings->global_background_gradient->pos : '0';
$gradientPos2 = (isset($settings->global_background_gradient->pos2) && !empty($settings->global_background_gradient->pos2)) ? $settings->global_background_gradient->pos2 : '100';
if (isset($settings->global_background_gradient->type) && $settings->global_background_gradient->type === 'radial')
{
$addon_css .= "\tbackground-image: radial-gradient(at " . $radialPos . ", " . $gradientColor . " " . $gradientPos . "%, " . $gradientColor2 . " " . $gradientPos2 . "%);\n";
}
else
{
$addon_css .= "\tbackground-image: linear-gradient(" . $gradientDeg . "deg, " . $gradientColor . " " . $gradientPos . "%, " . $gradientColor2 . " " . $gradientPos2 . "%);\n";
}
}
if ($settings->global_background_type == 'image' && $global_background_image_src)
{
if ($lazyload)
{
if ($placeholder)
{
$placeholder_bg_image .= 'background-image:url(' . $placeholder . ');';
}
if (strpos($global_background_image_src, "http://") !== false || strpos($global_background_image_src, "https://") !== false)
{
$lazy_bg_image .= "\tbackground-image: url(" . $global_background_image_src . ");\n";
}
else
{
$lazy_bg_image .= "\tbackground-image: url(" . Uri::base(true) . '/' . $global_background_image_src . ");\n";
}
}
else
{
if (strpos($global_background_image_src, "http://") !== false || strpos($global_background_image_src, "https://") !== false)
{
$addon_css .= "\tbackground-image: url(" . $global_background_image_src . ");\n";
}
else
{
$addon_css .= "\tbackground-image: url(" . Uri::base(true) . '/' . $global_background_image_src . ");\n";
}
}
if (isset($settings->global_background_repeat) && $settings->global_background_repeat)
{
$addon_css .= "\tbackground-repeat: " . $settings->global_background_repeat . ";\n";
}
if (isset($settings->global_background_size) && $settings->global_background_size)
{
$addon_css .= "\tbackground-size: " . $settings->global_background_size . ";\n";
}
if (isset($settings->global_background_attachment) && $settings->global_background_attachment)
{
$addon_css .= "\tbackground-attachment: " . $settings->global_background_attachment . ";\n";
}
if (isset($settings->global_background_position) && $settings->global_background_position)
{
$addon_css .= "background-position:" . $settings->global_background_position . ";";
}
}
}
$settings->global_boxshadow = CSSHelper::parseBoxShadow($settings, 'global_boxshadow');
$boxShadowSelector = isset($addon->name) && ($addon->name === 'button' || $addon->name === 'button_group') ? '.sppb-btn' : ':self';
$boxShadowStyle = $cssHelper->generateStyle($boxShadowSelector, $settings, ['global_boxshadow' => 'box-shadow'], false);
$inlineCSS .= $boxShadowStyle;
if (isset($settings->global_use_overlay) && $settings->global_use_overlay)
{
$addon_css .= "position: relative;\noverflow: hidden;\n";
}
if ($addonStyle)
{
$inlineCSS .= $addonStyle;
}
if ($wrapperStyle)
{
$inlineCSS .= $wrapperStyle;
}
if ($addon_css)
{
$inlineCSS .= $addon_id . " {\n" . $addon_css . "}\n";
$inlineCSS .= $addon_id . " {\n" . $placeholder_bg_image . "}\n";
$inlineCSS .= $addon_id . ".sppb-element-loaded {\n" . $lazy_bg_image . "}\n";
}
if (!isset($settings->global_overlay_type))
{
$settings->global_overlay_type = 'overlay_color';
}
if (isset($settings->global_use_overlay) && $settings->global_use_overlay && isset($settings->global_background_overlay) && $settings->global_background_overlay && $settings->global_overlay_type === 'overlay_color')
{
$inlineCSS .= $addon_id . " .sppb-addon-overlayer { background-color: {$settings->global_background_overlay}; }\n";
}
if (isset($settings->global_use_overlay) && $settings->global_use_overlay)
{
$inlineCSS .= $addon_id . " > .sppb-addon { position: relative; }\n";
}
// Overlay
$global_pattern_overlay = (isset($settings->global_pattern_overlay) && $settings->global_pattern_overlay) ? $settings->global_pattern_overlay : '';
$global_pattern_overlay_src = isset($global_pattern_overlay->src) ? $global_pattern_overlay->src : $global_pattern_overlay;
if (isset($settings->global_background_type))
{
if ($settings->global_background_type == 'image')
{
if (isset($settings->global_gradient_overlay) && $settings->global_overlay_type == 'overlay_gradient')
{
$overlay_radialPos = (isset($settings->global_gradient_overlay->radialPos) && !empty($settings->global_gradient_overlay->radialPos)) ? $settings->global_gradient_overlay->radialPos : 'center center';
$overlay_gradientColor = (isset($settings->global_gradient_overlay->color) && !empty($settings->global_gradient_overlay->color)) ? $settings->global_gradient_overlay->color : '';
$overlay_gradientColor2 = (isset($settings->global_gradient_overlay->color2) && !empty($settings->global_gradient_overlay->color2)) ? $settings->global_gradient_overlay->color2 : '';
$overlay_gradientDeg = (isset($settings->global_gradient_overlay->deg) && !empty($settings->global_gradient_overlay->deg)) ? $settings->global_gradient_overlay->deg : '0';
$overlay_gradientPos = (isset($settings->global_gradient_overlay->pos) && !empty($settings->global_gradient_overlay->pos)) ? $settings->global_gradient_overlay->pos : '0';
$overlay_gradientPos2 = (isset($settings->global_gradient_overlay->pos2) && !empty($settings->global_gradient_overlay->pos2)) ? $settings->global_gradient_overlay->pos2 : '100';
if (isset($settings->global_gradient_overlay->type) && $settings->global_gradient_overlay->type == 'radial')
{
$inlineCSS .= $addon_id . ' .sppb-addon-overlayer {
background: radial-gradient(at ' . $overlay_radialPos . ', ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
}';
}
else
{
$inlineCSS .= $addon_id . ' .sppb-addon-overlayer {
background: linear-gradient(' . $overlay_gradientDeg . 'deg, ' . $overlay_gradientColor . ' ' . $overlay_gradientPos . '%, ' . $overlay_gradientColor2 . ' ' . $overlay_gradientPos2 . '%) transparent;
}';
}
}
if ($global_pattern_overlay_src && $settings->global_overlay_type == 'overlay_pattern')
{
if (strpos($global_pattern_overlay_src, "http://") !== false || strpos($global_pattern_overlay_src, "https://") !== false)
{
$inlineCSS .= $addon_id . ' .sppb-addon-overlayer {
background-image:url(' . $global_pattern_overlay_src . ');
background-attachment: scroll;
}';
if (isset($settings->global_overlay_pattern_color))
{
$inlineCSS .= $addon_id . ' .sppb-addon-overlayer {
background-color:' . $settings->global_overlay_pattern_color . ';
}';
}
}
else
{
$inlineCSS .= $addon_id . ' .sppb-addon-overlayer {
background-image:url(' . Uri::base() . '/' . $global_pattern_overlay_src . ');
background-attachment: scroll;
}';
if (isset($settings->global_overlay_pattern_color))
{
$inlineCSS .= $addon_id . ' .sppb-addon-overlayer {
background-color:' . $settings->global_overlay_pattern_color . ';
}';
}
}
}
}
}
//Blend Mode
if (isset($settings->global_background_type) && $settings->global_background_type)
{
if ($settings->global_background_type === 'image')
{
if (isset($settings->blend_mode) && $settings->blend_mode)
{
$inlineCSS .= $addon_id . ' .sppb-addon-overlayer {
mix-blend-mode:' . $settings->blend_mode . ';
}';
}
}
}
if ($addon_link_css)
{
$inlineCSS .= $addon_id . " a {\n" . $addon_link_css . "}\n";
}
if ($addon_link_hover_css)
{
$inlineCSS .= $addon_id . " a:hover,\n#sppb-addon-" . $addon->id . " a:focus,\n#sppb-addon-" . $addon->id . " a:active {\n" . $addon_link_hover_css . "}\n";
}
$cssHelper->setID($addon_id);
$propsMap = [
'title_margin_top' => 'margin-top',
'title_margin_bottom' => 'margin-bottom',
'title_text_color' => 'color',
];
$units = [
'title_text_color' => false,
];
$titleStyle = $cssHelper->generateStyle('.sppb-addon-title', $settings, $propsMap, $units);
if (!empty($settings->title))
{
$typographyFallbacks = [
'font' => 'font_family',
'size' => 'title_fontsize',
'line_height' => 'title_lineheight',
'letter_spacing' => 'title_letterspace',
'uppercase' => 'title_font_style.uppercase',
'italic' => 'title_font_style.italic',
'underline' => 'title_font_style.underline',
'weight' => 'title_font_style.weight',
];
if($addon->name !== $heading_addon_name) {
$typography = $cssHelper->typography('.sppb-addon-title', $settings, 'title_typography', $typographyFallbacks);
$titleStyle .= "\r\n" . $typography;
}
}
$inlineCSS .= $titleStyle;
// Selector
$inlineCSS .= $selector_css->render(
array(
'options' => $settings,
'addon_id' => $addon_id
)
);
$global_custom_css = (isset($settings->global_custom_css) && !empty($settings->global_custom_css)) ? $settings->global_custom_css : '';
if (class_exists('SppbCustomCssParser') && isset($settings->global_custom_css) && !empty($settings->global_custom_css))
{
if ($addon->name === "popover") {
$trimmedCss = trim($global_custom_css);
// "h3 {...} h3 {...}" -> ["h3 {...", "h3 {...", ""]
$selectorSegments = explode('}', $trimmedCss);
// ["h3 {...", "h3 {...", ""] -> ["h3 {...", "h3 {..."]
$filteredSegments = array_filter($selectorSegments, function($value) {
return $value !== '';
});
// ["h3 {...", "h3 {..."] -> "#sppb-addon-{$addon['id']} h3 {...} #sppb-addon-{$addon['id']} h3 {...}"
$cssWithAddonIdSelectors = array_map(function($prefix) {
$prefix = trim($prefix);
$pattern = "/#addonId\s*>?\s*/";
$cleanedPrefix = preg_replace($pattern, "", $prefix);
return "#addonId-portal {$cleanedPrefix}";
}, $filteredSegments);
$customCss = implode('} ', $cssWithAddonIdSelectors) . '}'; // closing curly brace
$global_custom_css .= ' ' . $customCss;
}
$inlineCSS .= SppbCustomCssParser::getCss($addon->name, $global_custom_css, $addon_id, $addon_wrapper_id);
}
echo $inlineCSS;