Your IP : 216.73.216.219
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2025 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\Uri\Uri;
class SppagebuilderAddonBefore_after extends SppagebuilderAddons
{
/**
* The addon frontend render method.
* The returned HTML string will render to the frontend page.
*
* @return string The HTML string.
* @since 5.0.0
*/
public function render()
{
$settings = $this->addon->settings;
$class = (isset($settings->class) && $settings->class) ? $settings->class : '';
$title = (isset($settings->title) && $settings->title) ? $settings->title : '';
$title_position = (isset($settings->title_position) && $settings->title_position) ? $settings->title_position : 'top';
$heading_selector = (isset($settings->heading_selector) && $settings->heading_selector) ? $settings->heading_selector : 'h3';
// before image options
$before_image = (isset($settings->before_image) && $settings->before_image) ? $settings->before_image : '';
$before_image_src = isset($before_image->src) ? $before_image->src : $before_image;
// before_image 2x
$before_image_2x = (isset($settings->before_image_2x) && $settings->before_image_2x) ? $settings->before_image_2x : '';
$before_image_2x_src = isset($before_image_2x->src) ? $before_image_2x->src : $before_image_2x;
$before_image_2x_src = ctype_space($before_image_2x_src) ? "" : $before_image_2x_src;
$before_image_2x_srcset = empty($before_image_2x_src) ? "" : 'srcset="' . $before_image_2x_src . ' 2x"';
$before_image_alt_text = (isset($settings->before_image_alt_text) && $settings->before_image_alt_text) ? $settings->before_image_alt_text : '';
// Lazy image loading
$before_image_placeholder = $before_image_src === '' ? false : $this->get_image_placeholder($before_image_src);
$before_image_dimension = '';
if ($before_image_placeholder) {
$before_image_dimension = $this->get_image_dimension($before_image_src);
$before_image_dimension = !empty($before_image_dimension) ? \implode(' ', $before_image_dimension) : '';
}
if (strpos($before_image_src, "http://") !== false || strpos($before_image_src, "https://") !== false) {
$before_image_src = $before_image_src;
} else {
$original_src = Uri::base(true) . '/' . $before_image_src;
$before_image_src = SppagebuilderHelperSite::cleanPath($original_src);
}
// after image options
$after_image = (isset($settings->after_image) && $settings->after_image) ? $settings->after_image : '';
$after_image_src = isset($after_image->src) ? $after_image->src : $after_image;
// after_image 2x
$after_image_2x = (isset($settings->after_image_2x) && $settings->after_image_2x) ? $settings->after_image_2x : '';
$after_image_2x_src = isset($after_image_2x->src) ? $after_image_2x->src : $after_image_2x;
$after_image_2x_src = ctype_space($after_image_2x_src) ? "" : $after_image_2x_src;
$after_image_2x_srcset = empty($after_image_2x_src) ? "" : 'srcset="' . $after_image_2x_src . ' 2x"';
$after_image_alt_text = (isset($settings->after_image_alt_text) && $settings->after_image_alt_text) ? $settings->after_image_alt_text : '';
// Lazy image loading
$after_image_placeholder = $after_image_src === '' ? false : $this->get_image_placeholder($after_image_src);
$after_image_dimension = '';
if ($after_image_placeholder) {
$after_image_dimension = $this->get_image_dimension($after_image_src);
$after_image_dimension = !empty($after_image_dimension) ? \implode(' ', $after_image_dimension) : '';
}
if (strpos($after_image_src, "http://") !== false || strpos($after_image_src, "https://") !== false) {
$after_image_src = $after_image_src;
} else {
$original_src = Uri::base(true) . '/' . $after_image_src;
$after_image_src = SppagebuilderHelperSite::cleanPath($original_src);
}
// Options
$orientation = (isset($settings->orientation) && $settings->orientation) ? $settings->orientation : 'horizontal';
$title_before = (isset($settings->title_before) && $settings->title_before) ? $settings->title_before : '';
$title_after = (isset($settings->title_after) && $settings->title_after) ? $settings->title_after : '';
$text_horizontal_position = (isset($settings->text_horizontal_position) && $settings->text_horizontal_position) ? $settings->text_horizontal_position : 'center';
$text_vertical_position = (isset($settings->text_vertical_position) && $settings->text_vertical_position) ? $settings->text_vertical_position : 'center';
$icon = (isset($settings->icon) && $settings->icon) ? $settings->icon : 'default';
$text_position = $orientation === 'horizontal' ? $text_horizontal_position : $text_vertical_position;
$separator_orientation_class = $orientation === 'horizontal' ? 'sppb-separator-horizontal' : 'sppb-separator-vertical';
$image_orientation_class = $orientation === 'horizontal' ? 'sppb-before-after-image-horizontal' : 'sppb-before-after-image-vertical';
$arrow_chevron = '<svg fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M743.3 512L598.5 656.8l-36.2-36.2L670.9 512 562.3 403.4l36.2-36.2L743.3 512zM425.5 656.8l36.2-36.2L353.1 512l108.6-108.6-36.2-36.2L280.7 512l144.8 144.8z"/>
</svg>';
$arrow_default = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>';
$icon_content = $icon === 'default' ? $arrow_default : $arrow_chevron;
$output = '';
$output .= '<div class="sppb-addon ' . $class . '">';
$output .= ($title && $title_position != 'bottom') ? '<' . $heading_selector . ' class="sppb-addon-title">' . $title . '</' . $heading_selector . '>' : '';
$output .= '<div class="sppb-before-after-wrapper">
<div class="sppb-before-after-image sppb-image-before ' . $image_orientation_class . '">
<img class="' . ($before_image_placeholder ? ' sppb-element-lazy" data-large="' . $before_image_src . '" loading="lazy" ' . $before_image_dimension . ' ' : '') . '" src="' . ($before_image_placeholder ? $before_image_placeholder : $before_image_src) . '" draggable="false" ' . $before_image_2x_srcset . ' alt=' . $before_image_alt_text . ' />
</div>
<div class="sppb-before-after-image sppb-image-after ' . $image_orientation_class . '">
<img class="' . ($after_image_placeholder ? ' sppb-element-lazy" data-large="' . $after_image_src . '" loading="lazy" ' . $after_image_dimension . ' ' : '') . '" src="' . ($after_image_placeholder ? $after_image_placeholder : $after_image_src) . '" draggable="false" ' . $after_image_2x_srcset . ' alt=' . $after_image_alt_text . ' />
</div>
<div class="sppb-before-after-separator ' . $separator_orientation_class . '">' . $icon_content . '</div>
';
if (!empty($title_before)) {
$output .= '<div class="sppb-before-title ' . $orientation . ' ' . $text_position . '">' . $title_before . '</div>';
}
if (!empty($title_after)) {
$output .= '<div class="sppb-after-title ' . $orientation . ' ' . $text_position . '">' . $title_after . '</div>';
}
$output .= '</div>';
$output .= ($title && $title_position === 'bottom') ? '<' . $heading_selector . ' class="sppb-addon-title" style="display: block;">' . $title . '</' . $heading_selector . '>' : '';
$output .= '</div>';
return $output;
}
/**
* Generate the CSS string for the frontend page.
*
* @return string The CSS string for the page.
* @since 5.0.0
*/
public function css()
{
$settings = $this->addon->settings;
$addon_id = '#sppb-addon-' . $this->addon->id;
$cssHelper = new CSSHelper($addon_id);
$border_radius = (isset($settings->border_radius) && $settings->border_radius) ? $settings->border_radius : 0;
if ($border_radius) {
$border_radius = explode(" ", $settings->border_radius);
}
$css = '';
if (is_array($border_radius) && (count($border_radius) > 2)) {
$css .= $cssHelper->generateStyle(
'.sppb-before-after-wrapper',
$settings,
[
'border_radius' => 'border-radius',
],
[
'border_radius' => false
],
[
'border_radius' => 'spacing'
]
);
} else {
$css .= $cssHelper->generateStyle(
'.sppb-before-after-wrapper',
$settings,
[
'border_radius' => 'border-radius',
]
);
}
$css .= $cssHelper->generateStyle(
'.sppb-before-after-wrapper, img',
$settings,
[
'container_width' => ['width', 'max-width'],
'container_height' => 'height'
]
);
$css .= $cssHelper->typography('.sppb-before-title, .sppb-after-title', $settings, 'typography');
$settings->text_shadow = $cssHelper->parseBoxShadow($settings, 'text_shadow', true);
$textProps = [
'text_margin' => 'margin',
'text_padding' => 'padding',
'text_color' => 'color',
'text_bg_color' => 'background-color',
'text_shadow' => 'text-shadow'
];
$units = ['text_margin' => false, 'text_padding' => false, 'text_color' => false, 'text_bg_color' => false, 'text_shadow' => false];
$modifiers = ['text_margin' => 'spacing', 'text_padding' => 'spacing'];
$transformCss = $cssHelper->generateTransformStyle('.sppb-before-after-wrapper', $settings, 'transform');
$css .= $cssHelper->generateStyle('.sppb-before-title, .sppb-after-title', $settings, $textProps, $units, $modifiers);
$css .= $cssHelper->generateStyle('.sppb-before-after-separator > svg', $settings, ['separator_color' => 'color'], false);
$css .= $cssHelper->generateStyle('.sppb-before-after-separator > svg', $settings, ['icon_size' => ['height', 'width']]);
$css .= $cssHelper->generateStyle('.sppb-image-before.sppb-before-after-image-horizontal', $settings, ['separator_color' => 'border-right-color'], false);
$css .= $cssHelper->generateStyle('.sppb-image-before.sppb-before-after-image-vertical', $settings, ['separator_color' => 'border-bottom-color'], false);
$css .= $transformCss;
return $css;
}
/**
* Load external scripts.
*
* @return array
* @since 5.0.0
*/
public function scripts()
{
return array(Uri::base(true) . '/components/com_sppagebuilder/assets/js/addons/before_after.js');
}
/**
* Generate the lodash template string for the frontend editor.
*
* @return string The lodash template string.
* @since 5.0.0
*/
public static function getTemplate()
{
$lodash = new Lodash('#sppb-addon-{{ data.id }}');
$output = '<style type="text/css">';
$output .= $lodash->unit('margin-top', '.sppb-addon-title', 'data.title_margin_top', 'px');
$output .= $lodash->unit('margin-bottom', '.sppb-addon-title', 'data.title_margin_bottom', 'px');
$output .= $lodash->unit(
'width',
'.sppb-before-after-wrapper, img',
'data.container_width',
'px'
);
$output .= $lodash->unit(
'max-width',
'.sppb-before-after-wrapper, img',
'data.container_width',
'px'
);
$output .= $lodash->unit(
'height',
'.sppb-before-after-wrapper, img',
'data.container_height',
'px'
);
$output .= $lodash->typography('.sppb-before-title, .sppb-after-title', 'data.typography');
$output .= $lodash->spacing('padding', '.sppb-before-title, .sppb-after-title', 'data.text_padding');
$output .= $lodash->spacing('margin', '.sppb-before-title, .sppb-after-title', 'data.text_margin');
$output .= $lodash->textShadow('.sppb-before-title, .sppb-after-title', 'data.text_shadow');
$output .= $lodash->color('background-color', '.sppb-before-title, .sppb-after-title', 'data.text_bg_color');
$output .= $lodash->color('color', '.sppb-before-title, .sppb-after-title', 'data.text_color');
$output .= $lodash->color('color', '.sppb-before-after-separator > svg', 'data.separator_color');
$output .= $lodash->unit('height', '.sppb-before-after-separator > svg', 'data.icon_size', 'px');
$output .= $lodash->unit('width', '.sppb-before-after-separator > svg', 'data.icon_size', 'px');
$output .= $lodash->border('border-right-color', '.sppb-image-before.sppb-before-after-image-horizontal', 'data.separator_color');
$output .= $lodash->border('border-bottom-color', '.sppb-image-before.sppb-before-after-image-vertical', 'data.separator_color');
$output .= '<# if((data.border_radius + "").split(" ").length < 2) { #>';
$output .= $lodash->unit('border-radius', '.sppb-before-after-wrapper', 'data.border_radius', 'px');
$output .= '<# } else { #>';
$output .= '#sppb-addon-{{data.id}} .sppb-before-after-wrapper {
{{window.getSplitRadius(data.border_radius)}}
}';
$output .= '<# } #>';
// title
$typographyFallbacks = [
'font' => 'data.title_font_family',
'size' => 'data.title_fontsize',
'line_height' => 'data.title_lineheight',
'letter_spacing' => 'data.title_letterspace',
'uppercase' => 'data.title_font_style?.uppercase',
'italic' => 'data.title_font_style?.italic',
'underline' => 'data.title_font_style?.underline',
'weight' => 'data.title_font_style?.weight'
];
$output .= $lodash->typography('.sppb-addon-title', 'data.title_typography', $typographyFallbacks);
$output .= $lodash->generateTransformCss('.sppb-before-after-wrapper', 'data.transform');
$output .= '</style>';
$output .= '<#
// before image options
let before_image = (!_.isEmpty(data.before_image) && data.before_image) ? data.before_image : "";
let before_image_src = "";
if (_.isObject(data.before_image)) {
before_image_src = before_image.src || "";
} else {
before_image_src = before_image;
}
let before_image_alt_text = (!_.isEmpty(data.before_image_alt_text) && data.before_image_alt_text) ? data.before_image_alt_text : "";
if (before_image_src.includes("http://") || before_image_src.includes("https://")) {
before_image_src = before_image_src;
} else {
before_image_src = pagebuilder_base + before_image_src;
}
// after image options
let after_image = (!_.isEmpty(data.after_image) && data.after_image) ? data.after_image : "";
let after_image_src = "";
if (_.isObject(data.after_image)) {
after_image_src = after_image.src || "";
} else {
after_image_src = after_image;
}
let after_image_alt_text = (!_.isEmpty(data.after_image_alt_text) && data.after_image_alt_text) ? data.after_image_alt_text : "";
if (after_image_src.includes("http://") !== false || after_image_src.includes("https://") !== false) {
after_image_src = after_image_src;
} else {
after_image_src = pagebuilder_base + after_image_src;
}
// Options
let orientation = (!_.isEmpty(data.orientation) && data.orientation) ? data.orientation : "horizontal";
let title_before = (!_.isEmpty(data.title_before) && data.title_before) ? data.title_before : "";
let title_after = (!_.isEmpty(data.title_after) && data.title_after) ? data.title_after : "";
let text_horizontal_position = (!_.isEmpty(data.text_horizontal_position) && data.text_horizontal_position) ? data.text_horizontal_position : "center";
let text_vertical_position = (!_.isEmpty(data.text_vertical_position) && data.text_vertical_position) ? data.text_vertical_position : "center";
let icon = (!_.isEmpty(data.icon) && data.icon) ? data.icon : "default";
let title_position = (!_.isEmpty(data.title_position) && data.title_position) ? data.title_position : "top";
let heading_selector = (!_.isEmpty(data.heading_selector) && data.heading_selector) ? data.heading_selector : "h3";
let text_position = orientation === "horizontal" ? text_horizontal_position : text_vertical_position;
let separator_orientation_class = orientation === "horizontal" ? "sppb-separator-horizontal" : "sppb-separator-vertical";
let image_orientation_class = orientation === "horizontal" ? "sppb-before-after-image-horizontal" : "sppb-before-after-image-vertical";
#>';
$output .= '<div class="sppb-addon {{ data.class }}">
<# if( !_.isEmpty( data.title ) && title_position != "bottom" ){ #><{{ heading_selector }} class="sppb-addon-title sp-inline-editable-element" data-id={{data.id}} data-fieldName="title" contenteditable="true">{{ data.title }}</{{ heading_selector }}><# } #>
<div class="sppb-before-after-wrapper">
<div class="sppb-before-after-image sppb-image-before {{image_orientation_class}}">
<img src=\'{{before_image_src}}\' draggable="false" alt="{{before_image_alt_text}}" />
</div>
<div class="sppb-before-after-image sppb-image-after {{image_orientation_class}}">
<img src=\'{{after_image_src}}\' draggable="false" alt="{{after_image_alt_text}}" />
</div>
<div class="sppb-before-after-separator {{separator_orientation_class}}">
<# if(icon === "default") { #>
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<# } #>
<# if(icon === "chevron") { #>
<svg fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
<path d="M743.3 512L598.5 656.8l-36.2-36.2L670.9 512 562.3 403.4l36.2-36.2L743.3 512zM425.5 656.8l36.2-36.2L353.1 512l108.6-108.6-36.2-36.2L280.7 512l144.8 144.8z"/>
</svg>
<# } #>
</div>
<# if(!_.isEmpty(title_before)) { #>
<div class="sppb-before-title {{orientation}} {{text_position}}">{{title_before}}</div>
<# } #>
<# if(!_.isEmpty(title_after)) { #>
<div class="sppb-after-title {{orientation}} {{text_position}}">{{title_after}}</div>
<# } #>
</div>
<# if( !_.isEmpty( data.title ) && title_position == "bottom" ){ #><{{ heading_selector }} class="sppb-addon-title" style="display: block;">{{ data.title }}</{{ heading_selector }}><# } #>
</div>';
return $output;
}
}