| Current File : /home/pacjaorg/public_html/nsa/components/com_sppagebuilder/addons/image_overlay/site.php |
<?php
/**
* @package SP Page Builder
* @author JoomShaper https://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2021 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct accees
defined ('_JEXEC') or die ('Restricted access');
class SppagebuilderAddonImage_overlay extends SppagebuilderAddons{
public function render() {
$settings = $this->addon->settings;
$class = (isset($settings->class) && $settings->class) ? $settings->class : '';
$title = (isset($settings->title) && $settings->title) ? $settings->title : '';
$title_icon = (isset($settings->title_icon) && $settings->title_icon) ? $settings->title_icon : '';
$title_icon_arr = array_filter(explode(' ', $title_icon));
if (count($title_icon_arr) === 1) {
$title_icon = 'fa ' . $title_icon;
}
$heading_selector = (isset($settings->heading_selector) && $settings->heading_selector) ? $settings->heading_selector : 'h4';
$title_link = (isset($settings->title_link) && $settings->title_link) ? $settings->title_link : '';
$title_link_new_window = (isset($settings->title_link_new_window) && $settings->title_link_new_window) ? $settings->title_link_new_window : 0;
//Subtitle Options
$sub_title = (isset($settings->sub_title) && $settings->sub_title) ? $settings->sub_title : '';
$subtitle_heading_selector = (isset($settings->subtitle_heading_selector) && $settings->subtitle_heading_selector) ? $settings->subtitle_heading_selector : 'div';
$sub_title_icon = (isset($settings->sub_title_icon) && $settings->sub_title_icon) ? $settings->sub_title_icon : '';
$subt_icon_arr = array_filter(explode(' ', $sub_title_icon));
if (count($subt_icon_arr) === 1) {
$sub_title_icon = 'fa ' . $sub_title_icon;
}
//Title subtitle position
$title_subtitle_position = (isset($settings->title_subtitle_position) && $settings->title_subtitle_position) ? $settings->title_subtitle_position : 'top-left';
$show_content_on_hover = (isset($settings->show_content_on_hover) && $settings->show_content_on_hover) ? $settings->show_content_on_hover : '';
//Background Image Options
$image = (isset($settings->image) && $settings->image) ? $settings->image : '';
$image_src = isset($image->src) ? $image->src : $image;
$background_image_animation = (isset($settings->background_image_animation) && $settings->background_image_animation) ? $settings->background_image_animation : '';
$image_link = '';
if(strpos($image_src, "http://") !== false || strpos($image_src, "https://") !== false){
$image_link = $image_src;
} else {
$image_link = JURI::base() . $image_src;
}
$image_in_lightbox = (isset($settings->image_in_lightbox) && $settings->image_in_lightbox) ? $settings->image_in_lightbox : 0;
//Overlay options
$overlay_mode = (isset($settings->overlay_mode) && $settings->overlay_mode) ? $settings->overlay_mode : '';
$overlay_type = (isset($settings->overlay_type) && $settings->overlay_type) ? $settings->overlay_type : '';
//Button options
$btn_class = '';
$btn_class .= (isset($settings->type) && $settings->type) ? ' sppb-btn-' . $settings->type : '';
$btn_class .= (isset($settings->size) && $settings->size) ? ' sppb-btn-' . $settings->size : '';
$btn_class .= (isset($settings->block) && $settings->block) ? ' ' . $settings->block : '';
$btn_class .= (isset($settings->shape) && $settings->shape) ? ' sppb-btn-' . $settings->shape : ' sppb-btn-rounded';
$btn_class .= (isset($settings->appearance) && $settings->appearance) ? ' sppb-btn-' . $settings->appearance : '';
$attribs = (isset($settings->target) && $settings->target) ? ' rel="noopener noreferrer" target="' . $settings->target . '"' : '';
$attribs .= (isset($settings->url) && $settings->url) ? ' href="' . $settings->url . '"' : '';
$attribs .= ' id="btn-' . $this->addon->id . '"';
$text = (isset($settings->text) && $settings->text) ? $settings->text : '';
$icon = (isset($settings->icon) && $settings->icon) ? $settings->icon : '';
$icon_position = (isset($settings->icon_position) && $settings->icon_position) ? $settings->icon_position : 'left';
$icon_arr = array_filter(explode(' ', $icon));
if (count($icon_arr) === 1) {
$icon = 'fa ' . $icon;
}
if ($icon_position == 'left') {
$text = ($icon) ? '<i class="' . $icon . '" aria-hidden="true"></i> ' . $text : $text;
} else {
$text = ($icon) ? $text . ' <i class="' . $icon . '" aria-hidden="true"></i>' : $text;
}
$output = '';
$output .= '<div class="sppb-addon sppb-addon-overlay-image ' . $class . ' image-effect-'.$background_image_animation.' '.($show_content_on_hover ? 'overlay-show-content-on-hover' : '').'">';
$output .= '<div class="sppb-addon-overlay-image-content title-subtitle-'.$title_subtitle_position.'">';
if(($title || $sub_title) && $title_subtitle_position){
$output .= '<div class="overlay-image-title">';
$output .= '<'.$heading_selector.' class="sppb-addon-title">';
if($title_link){
$output .= '<a href="'.$title_link.'"';
if($title_link_new_window){
$output .='target="_blank"';
}
$output .='>';
}
if($title_icon){
$output .= '<i class="' . $title_icon . '" aria-hidden="true"></i>';
}
$output .= $title;
if($title_link){
$output .= '</a>';
}
$output .= '</'.$heading_selector.'>';
if($sub_title){
$output .= '<'.$subtitle_heading_selector.' class="sppb-addon-subtitle">';
if($sub_title_icon){
$output .= '<i class="' . $sub_title_icon . '" aria-hidden="true"></i>';
}
$output .= $sub_title;
$output .= '</'.$subtitle_heading_selector.'>';
}
if($text){
$output .= '<div class="overlay-image-button-wrap">';
$output .= '<a' . $attribs . ' class="sppb-btn ' . $btn_class . '">' . $text . '</a>';
$output .= '</div>';
}
$output .= '</div>';
}
$output .= '<div class="overlay-background-image-wrapper">';
$output .= '<div class="overlay-background-image" style="background-image:url('.$image_link.');"></div>';
if($image_in_lightbox && $title_subtitle_position !== 'center-center' && $image_link){
$output .= '<a class="sppb-magnific-popup sppb-addon-image-overlay-icon" data-popup_type="image" data-mainclass="mfp-no-margins mfp-with-zoom" href="' . $image_link . '">+</a>';
}
$output .= '</div>';
if($overlay_type!='none' || $overlay_mode == 'hover'){
$output .= '<div class="overlay-background-style"></div>';
}
$output .= '</div>';
$output .= '</div>';
return $output;
}
public function scripts() {
return array(JURI::base(true) . '/components/com_sppagebuilder/assets/js/jquery.magnific-popup.min.js');
}
public function stylesheets() {
return array(JURI::base(true) . '/components/com_sppagebuilder/assets/css/magnific-popup.css');
}
public function css() {
$addon_id = '#sppb-addon-' . $this->addon->id;
$settings = $this->addon->settings;
$css = '';
//Get global style to make border-radius work.
$global_border_radius = (isset($settings->global_border_radius) && $settings->global_border_radius) ? $settings->global_border_radius : '';
if($global_border_radius){
$css .= $addon_id.' {';
$css .= 'overflow:hidden;';
$css .= '}';
}
//Title Style
$title_color = (isset($settings->title_text_color) && $settings->title_text_color) ? $settings->title_text_color : '';
$title_margin = (isset($settings->title_margin) && trim($settings->title_margin)) ? $settings->title_margin : '';
//Subtitle Style
$subtitle_style = '';
$subtitle_style .= (isset($settings->sub_title_fontsize) && $settings->sub_title_fontsize) ? 'font-size:'.$settings->sub_title_fontsize.'px;' : '';
$subtitle_style .= (isset($settings->sub_title_text_color) && $settings->sub_title_text_color) ? 'color:'.$settings->sub_title_text_color.';' : '';
$subtitle_style .= (isset($settings->sub_title_letterspace) && $settings->sub_title_letterspace) ? 'letter-spacing:'.$settings->sub_title_letterspace.';' : '';
$subtitle_style .= (isset($settings->sub_title_margin) && trim($settings->sub_title_margin)) ? 'margin:'.$settings->sub_title_margin.';' : '';
$sub_title_font_style = (isset($settings->sub_title_font_style) && $settings->sub_title_font_style) ? $settings->sub_title_font_style : '';
if(isset($sub_title_font_style->underline) && $sub_title_font_style->underline){
$subtitle_style .= 'text-decoration:underline;';
}
if(isset($sub_title_font_style->italic) && $sub_title_font_style->italic){
$subtitle_style .= 'font-style:italic;';
}
if(isset($sub_title_font_style->uppercase) && $sub_title_font_style->uppercase){
$subtitle_style .= 'text-transform:uppercase;';
}
if(isset($sub_title_font_style->weight) && $sub_title_font_style->weight){
$subtitle_style .= 'font-weight:'.$sub_title_font_style->weight.';';
}
//Image
$image_height = (isset($settings->image_height) && $settings->image_height) ? $settings->image_height : 300;
$lightbox_icon_bg = (isset($settings->lightbox_icon_bg) && $settings->lightbox_icon_bg) ? $settings->lightbox_icon_bg : '';
//Overlay options
$overlay_type = (isset($settings->overlay_type) && $settings->overlay_type) ? $settings->overlay_type : '';
$overlay_color = (isset($settings->overlay_color) && $settings->overlay_color) ? $settings->overlay_color : '';
$overlay_gradient = (isset($settings->overlay_gradient) && $settings->overlay_gradient) ? $settings->overlay_gradient : '';
if(!empty($title_color) || !empty($title_margin)){
$css .= $addon_id.' .sppb-addon-title a{';
$css .= 'color:'.$title_color.';';
$css .= '}';
$css .= $addon_id.' .sppb-addon-title {';
$css .= 'margin:'.$title_margin.';';
$css .= '}';
}
if($subtitle_style){
$css .= $addon_id.' .sppb-addon-subtitle {';
$css .= $subtitle_style;
$css .= '}';
}
if($image_height){
$css .= $addon_id . ' .sppb-addon-overlay-image-content {';
$css .= 'height: '.$image_height.'px;';
$css .= '}';
}
if($lightbox_icon_bg){
$css .= $addon_id.' .sppb-addon-image-overlay-icon {';
$css .= 'background: '.$lightbox_icon_bg.';';
$css .= '}';
}
if($overlay_type !== 'none'){
if($overlay_type == 'color'){
$css .= $addon_id . ' .overlay-background-style {';
$css .= 'background: '.$overlay_color.';';
$css .= '}';
} elseif($overlay_type=='gradient'){
$gradient_color1 = (isset($overlay_gradient->color) && $overlay_gradient->color) ? $overlay_gradient->color : 'rgba(127, 0, 255, 0.8)';
$gradient_color2 = (isset($overlay_gradient->color2) && $overlay_gradient->color2) ? $overlay_gradient->color2 : 'rgba(225, 0, 255, 0.7)';
$degree = $overlay_gradient->deg;
$type = $overlay_gradient->type;
$radialPos = (isset($overlay_gradient->radialPos) && $overlay_gradient->radialPos) ? $overlay_gradient->radialPos : 'Center Center';
$radial_angle1 = (isset($overlay_gradient->pos) && $overlay_gradient->pos) ? $overlay_gradient->pos : '0';
$radial_angle2 = (isset($overlay_gradient->pos2) && $overlay_gradient->pos2) ? $overlay_gradient->pos2 : '100';
$css .= $addon_id . ' .overlay-background-style {';
if($type!=='radial'){
$css .= 'background: -webkit-linear-gradient('.$degree.'deg, '.$gradient_color1.' '.$radial_angle1.'%, '.$gradient_color2.' '.$radial_angle2.'%) transparent;';
$css .= 'background: linear-gradient('.$degree.'deg, '.$gradient_color1.' '.$radial_angle1.'%, '.$gradient_color2.' '.$radial_angle2.'%) transparent;';
} else {
$css .= 'background: -webkit-radial-gradient(at '.$radialPos.', '.$gradient_color1.' '.$radial_angle1.'%, '.$gradient_color2.' '.$radial_angle2.'%) transparent;';
$css .= 'background: radial-gradient(at '.$radialPos.', '.$gradient_color1.' '.$radial_angle1.'%, '.$gradient_color2.' '.$radial_angle2.'%) transparent;';
}
$css .= '}';
}
} else {
$css .= $addon_id . ' .overlay-background-style {';
$css .= 'background: transparent;';
$css .= '}';
}
//Overlay Hover
$overlay_hover_type = (isset($settings->overlay_hover_type) && $settings->overlay_hover_type) ? $settings->overlay_hover_type : '';
$overlay_hover_color = (isset($settings->overlay_hover_color) && $settings->overlay_hover_color) ? $settings->overlay_hover_color : '';
$overlay_hover_gradient = (isset($settings->overlay_hover_gradient) && $settings->overlay_hover_gradient) ? $settings->overlay_hover_gradient : '';
if($overlay_hover_type!=='none'){
if($overlay_hover_type=='color'){
$css .= $addon_id . ' .sppb-addon-overlay-image-content:hover .overlay-background-style {';
$css .= 'background: '.$overlay_hover_color.';';
$css .= '}';
} elseif($overlay_hover_type=='gradient') {
$gradient_hover_color1 = (isset($overlay_hover_gradient->color) && $overlay_hover_gradient->color) ? $overlay_hover_gradient->color : 'rgba(127, 0, 255, 0.8)';
$gradient_hover_color2 = (isset($overlay_hover_gradient->color2) && $overlay_hover_gradient->color2) ? $overlay_hover_gradient->color2 : 'rgba(225, 0, 255, 0.7)';
$hover_degree = (isset($overlay_hover_gradient->deg) && $overlay_hover_gradient->deg) ? $overlay_hover_gradient->deg : '';
$hover_type = (isset($overlay_hover_gradient->type) && $overlay_hover_gradient->type) ? $overlay_hover_gradient->type : 'linear';
$hover_radialPos = (isset($overlay_hover_gradient->radialPos) && $overlay_hover_gradient->radialPos) ? $overlay_hover_gradient->radialPos : 'Center Center';
$hover_radial_angle1 = (isset($overlay_hover_gradient->pos) && $overlay_hover_gradient->pos) ? $overlay_hover_gradient->pos : '0';
$hove_radial_angle2 = (isset($overlay_hover_gradient->pos2) && $overlay_hover_gradient->pos2) ? $overlay_hover_gradient->pos2 : '100';
$css .= $addon_id . ' .sppb-addon-overlay-image-content:hover .overlay-background-style {';
$css .= 'opacity:.8;';
$css .= '}';
$css .= $addon_id . ' .overlay-background-style::after {';
if($hover_type!=='radial'){
$css .= 'background: -webkit-linear-gradient('.$hover_degree.'deg, '.$gradient_hover_color1.' '.$hover_radial_angle1.'%, '.$gradient_hover_color2.' '.$hove_radial_angle2.'%) transparent;';
$css .= 'background: linear-gradient('.$hover_degree.'deg, '.$gradient_hover_color1.' '.$hover_radial_angle1.'%, '.$gradient_hover_color2.' '.$hove_radial_angle2.'%) transparent;';
} else {
$css .= 'background: -webkit-radial-gradient(at '.$hover_radialPos.', '.$gradient_hover_color1.' '.$hover_radial_angle1.'%, '.$gradient_hover_color2.' '.$hove_radial_angle2.'%) transparent;';
$css .= 'background: radial-gradient(at '.$hover_radialPos.', '.$gradient_hover_color1.' '.$hover_radial_angle1.'%, '.$gradient_hover_color2.' '.$hove_radial_angle2.'%) transparent;';
}
$css .= '}';
$css .= $addon_id . ' .sppb-addon-overlay-image-content:hover .overlay-background-style::after {';
$css .= 'opacity:1;';
$css .= '}';
}
} else {
$css .= $addon_id . ' .sppb-addon-overlay-image-content:hover .overlay-background-style {';
$css .= 'background: transparent;';
$css .= '}';
}
//Button Margin
$button_margin = (isset($settings->button_margin) && trim($settings->button_margin)) ? $settings->button_margin : '';
$button_margin_sm = ((isset($settings->button_margin_sm)) && trim($settings->button_margin_sm)) ? $settings->button_margin_sm : '';
$button_margin_xs = ((isset($settings->button_margin_xs)) && trim($settings->button_margin_xs)) ? $settings->button_margin_xs : '';
if ($button_margin) {
$css .= $addon_id . ' .overlay-image-button-wrap {';
$css .= 'margin: ' . $button_margin . ';';
$css .= '}';
}
//Content Padding
$content_padding = (isset($settings->content_padding) && trim($settings->content_padding)) ? $settings->content_padding : '';
if ($content_padding) {
$css .= $addon_id . ' .sppb-addon-overlay-image-content {';
$css .= 'padding: ' . $content_padding . ';';
$css .= '}';
}
//Tablet device
$image_height_sm = (isset($settings->image_height_sm) && $settings->image_height_sm) ? $settings->image_height_sm : '';
$title_margin_sm = (isset($settings->title_margin_sm) && $settings->title_margin_sm) ? $settings->title_margin_sm : '';
$subtitle_fontsize_sm = (isset($settings->sub_title_fontsize_sm) && $settings->sub_title_fontsize_sm) ? $settings->sub_title_fontsize_sm : '';
$sub_title_margin_sm = (isset($settings->sub_title_margin_sm) && $settings->sub_title_margin_sm) ? $settings->sub_title_margin_sm : '';
$content_padding_sm = (isset($settings->content_padding_sm) && trim($settings->content_padding_sm)) ? $settings->content_padding_sm : '';
if(!empty($image_height_sm) || !empty($title_margin_sm) || !empty($subtitle_fontsize_sm) || !empty($sub_title_margin_sm) || !empty($button_margin_sm) || !empty($content_padding_sm)){
$css .= '@media (min-width: 768px) and (max-width: 991px) {';
if($image_height_sm) {
$css .= $addon_id . ' .sppb-addon-overlay-image-content {';
$css .= 'height: '.$image_height_sm.'px;';
$css .= '}';
}
if($title_margin_sm) {
$css .= $addon_id.' .sppb-addon-title {';
$css .= 'margin: '.$title_margin_sm.';';
$css .= '}';
}
if($subtitle_fontsize_sm) {
$css .= $addon_id.' .sppb-addon-subtitle {';
$css .= 'font-size:'.$subtitle_fontsize_sm.'px;';
$css .= '}';
}
if($sub_title_margin_sm) {
$css .= $addon_id.' .sppb-addon-subtitle {';
$css .= 'margin:'.$sub_title_margin_sm.';';
$css .= '}';
}
if ($button_margin_sm) {
$css .= $addon_id . ' .overlay-image-button-wrap {';
$css .= 'margin: ' . $button_margin_sm . ';';
$css .= '}';
}
if ($content_padding_sm) {
$css .= $addon_id . ' .sppb-addon-overlay-image-content {';
$css .= 'padding: ' . $content_padding_sm . ';';
$css .= '}';
}
$css .= '}';
}
//Mobile Device
$image_height_xs = (isset($settings->image_height_xs) && $settings->image_height_xs) ? $settings->image_height_xs : '';
$title_margin_xs = (isset($settings->title_margin_xs) && $settings->title_margin_xs) ? $settings->title_margin_xs : '';
$subtitle_fontsize_xs = (isset($settings->sub_title_fontsize_xs) && $settings->sub_title_fontsize_xs) ? $settings->sub_title_fontsize_xs : '';
$sub_title_margin_xs = (isset($settings->sub_title_margin_xs) && $settings->sub_title_margin_xs) ? $settings->sub_title_margin_xs : '';
$content_padding_xs = (isset($settings->content_padding_xs) && trim($settings->content_padding_xs)) ? $settings->content_padding_xs : '';
if(!empty($image_height_xs) || !empty($title_margin_xs) || !empty($subtitle_fontsize_xs) || !empty($sub_title_margin_xs) || !empty($button_margin_xs) || !empty($content_padding_xs)){
$css .= '@media (max-width: 767px) {';
if($image_height_xs) {
$css .= $addon_id . ' .sppb-addon-overlay-image-content {';
$css .= 'height: '.$image_height_xs.'px;';
$css .= '}';
}
if($title_margin_xs) {
$css .= $addon_id.' .sppb-addon-title {';
$css .= 'margin: '.$title_margin_xs.';';
$css .= '}';
}
if($subtitle_fontsize_xs) {
$css .= $addon_id.' .sppb-addon-subtitle {';
$css .= 'font-size:'.$subtitle_fontsize_xs.'px;';
$css .= '}';
}
if($sub_title_margin_xs) {
$css .= $addon_id.' .sppb-addon-subtitle {';
$css .= 'margin:'.$sub_title_margin_xs.';';
$css .= '}';
}
if ($button_margin_xs) {
$css .= $addon_id . ' .overlay-image-button-wrap {';
$css .= 'margin: ' . $button_margin_xs . ';';
$css .= '}';
}
if ($content_padding_xs) {
$css .= $addon_id . ' .sppb-addon-overlay-image-content {';
$css .= 'padding: ' . $content_padding_xs . ';';
$css .= '}';
}
$css .= '}';
}
//Button options
$layout_path = JPATH_ROOT . '/components/com_sppagebuilder/layouts';
$css_path = new JLayoutFile('addon.css.button', $layout_path);
$options = new stdClass;
$options->button_type = (isset($settings->type) && $settings->type) ? $settings->type : '';
$options->button_appearance = (isset($settings->appearance) && $settings->appearance) ? $settings->appearance : '';
$options->button_color = (isset($settings->color) && $settings->color) ? $settings->color : '';
$options->button_color_hover = (isset($settings->color_hover) && $settings->color_hover) ? $settings->color_hover : '';
$options->button_background_color = (isset($settings->background_color) && $settings->background_color) ? $settings->background_color : '';
$options->button_background_color_hover = (isset($settings->background_color_hover) && $settings->background_color_hover) ? $settings->background_color_hover : '';
$options->button_fontstyle = (isset($settings->fontstyle) && $settings->fontstyle) ? $settings->fontstyle : '';
$options->button_font_style = (isset($settings->font_style) && $settings->font_style) ? $settings->font_style : '';
$options->button_padding = (isset($settings->button_padding) && trim($settings->button_padding)) ? $settings->button_padding : '';
$options->button_padding_sm = (isset($settings->button_padding_sm) && trim($settings->button_padding_sm)) ? $settings->button_padding_sm : '';
$options->button_padding_xs = (isset($settings->button_padding_xs) && trim($settings->button_padding_xs)) ? $settings->button_padding_xs : '';
$options->fontsize = (isset($settings->fontsize) && $settings->fontsize) ? $settings->fontsize : '';
$options->fontsize_sm = (isset($settings->fontsize_sm) && $settings->fontsize_sm) ? $settings->fontsize_sm : '';
$options->fontsize_xs = (isset($settings->fontsize_xs) && $settings->fontsize_xs) ? $settings->fontsize_xs : '';
$options->button_letterspace = (isset($settings->letterspace) && $settings->letterspace) ? $settings->letterspace : '';
$options->button_background_gradient = (isset($settings->background_gradient) && $settings->background_gradient) ? $settings->background_gradient : new stdClass();
$options->button_background_gradient_hover = (isset($settings->background_gradient_hover) && $settings->background_gradient_hover) ? $settings->background_gradient_hover : new stdClass();
$css .= $css_path->render(array('addon_id' => $addon_id, 'options' => $options, 'id' => 'btn-' . $this->addon->id));
return $css;
}
public static function getTemplate() {
$output = '
<#
let subtitle_style = "";
subtitle_style += (!_.isEmpty(data.sub_title_text_color) && data.sub_title_text_color) ? \'color:\'+data.sub_title_text_color+\';\' : "";
subtitle_style += (!_.isEmpty(data.sub_title_letterspace) && data.sub_title_letterspace) ? \'letter-spacing:\'+data.sub_title_letterspace+\';\' : "";
let sub_title_font_style = (!_.isEmpty(data.sub_title_font_style) && data.sub_title_font_style) ? data.sub_title_font_style : "";
if(_.isObject(sub_title_font_style)){
if(sub_title_font_style.underline){
subtitle_style += \'text-decoration:underline;\';
}
if(sub_title_font_style.italic){
subtitle_style += \'font-style:italic;\';
}
if(sub_title_font_style.uppercase){
subtitle_style += \'text-transform:uppercase;\';
}
if(sub_title_font_style.weight){
subtitle_style += \'font-weight:\'+sub_title_font_style.weight+\';\';
}
}
let image_height = (!_.isEmpty(data.image_height) && data.image_height) ? data.image_height : 300;
var img = {}
if (typeof data.image !== "undefined" && typeof data.image.src !== "undefined") {
img = data.image
} else {
img = {src: data.image}
}
let image_link = "";
if(img.src?.indexOf("http://") == 0 || img.src?.indexOf("https://") == 0){
image_link = img.src;
} else {
image_link = pagebuilder_base + img.src;
}
let overlay_color = (!_.isEmpty(data.overlay_color) && data.overlay_color) ? data.overlay_color : \'rgba(0, 91, 234, 0.5)\';
var modern_font_style = false;
var classList = "";
classList += " sppb-btn-"+data.type;
classList += " sppb-btn-"+data.size;
classList += " sppb-btn-"+data.shape;
if(!_.isEmpty(data.appearance)){
classList += " sppb-btn-"+data.appearance;
}
classList += " "+data.block;
var button_fontstyle = data.fontstyle || "";
var button_font_style = data.font_style || "";
#>
<style type="text/css">
<# if(image_link){ #>
#sppb-addon-{{ data.id }} .overlay-background-image {
background-image:url("{{image_link}}");
}
<# }
if(data.title_color || data.title_margin){
#>
#sppb-addon-{{ data.id }} .sppb-addon-title a{
color: {{data.title_color}};
}
#sppb-addon-{{ data.id }} .sppb-addon-title {
<# if(_.isObject(data.title_margin)){ #>
margin:{{data.title_margin.md}};
<# } else { #>
margin:{{data.title_margin}};
<# } #>
}
<# }
if(subtitle_style){
#>
#sppb-addon-{{ data.id }} .sppb-addon-subtitle {
<# if(_.isObject(data.sub_title_fontsize)){ #>
font-size:{{data.sub_title_fontsize.md}}px;
<# } else { #>
font-size:{{data.sub_title_fontsize}}px;
<# } #>
<# if(_.isObject(data.sub_title_margin)){ #>
margin:{{data.sub_title_margin.md}};
<# } else { #>
margin:{{data.sub_title_margin}};
<# } #>
{{subtitle_style}}
}
<# }
if(image_height){
#>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content {
<# if(_.isObject(image_height)){ #>
height: {{image_height.md}}px;
<# } else { #>
height: {{image_height}}px;
<# } #>
}
<# }
if(data.lightbox_icon_bg){
#>
#sppb-addon-{{ data.id }} .sppb-addon-image-overlay-icon {
background: {{data.lightbox_icon_bg}};
}
<# } #>
<# if(data.overlay_type !== "none") { #>
<# if(data.overlay_type=="color"){ #>
#sppb-addon-{{ data.id }} .overlay-background-style {
background: {{data.overlay_color}};
}
<# } else if(data.overlay_type=="gradient"){
let gradient_color1 = (_.isObject(data.overlay_gradient) && !_.isEmpty(data.overlay_gradient.color) && data.overlay_gradient.color) ? data.overlay_gradient.color : "rgba(127, 0, 255, 0.8)";
let gradient_color2 = (_.isObject(data.overlay_gradient) && !_.isEmpty(data.overlay_gradient.color2) && data.overlay_gradient.color2) ? data.overlay_gradient.color2 : "rgba(225, 0, 255, 0.7)";
let degree = (_.isObject(data.overlay_gradient) && !_.isEmpty(data.overlay_gradient.deg) && data.overlay_gradient.deg)? data.overlay_gradient.deg : "";
let type = (_.isObject(data.overlay_gradient) && !_.isEmpty(data.overlay_gradient.type) && data.overlay_gradient.type) ? data.overlay_gradient.type : "linear";
let radialPos = (_.isObject(data.overlay_gradient) && !_.isEmpty(data.overlay_gradient.radialPos) && data.overlay_gradient.radialPos) ? data.overlay_gradient.radialPos : "Center Center";
let radial_angle1 = (_.isObject(data.overlay_gradient) && !_.isEmpty(data.overlay_gradient.pos) && data.overlay_gradient.pos) ? data.overlay_gradient.pos : "0";
let radial_angle2 = (_.isObject(data.overlay_gradient) && !_.isEmpty(data.overlay_gradient.pos2) && data.overlay_gradient.pos2) ? data.overlay_gradient.pos2 : "100";
#>
#sppb-addon-{{ data.id }} .overlay-background-style {
<# if(type!=="radial"){ #>
background: -webkit-linear-gradient({{degree}}deg, {{gradient_color1}} {{radial_angle1}}%, {{gradient_color2}} {{radial_angle2}}%) transparent;
background: linear-gradient({{degree}}deg, {{gradient_color1}} {{radial_angle1}}%, {{gradient_color2}} {{radial_angle2}}%) transparent;
<# } else { #>
background: -webkit-radial-gradient(at {{radialPos}}, {{gradient_color1}} {{radial_angle1}}%, {{gradient_color2}} {{radial_angle2}}%) transparent;
background: radial-gradient(at {{radialPos}}, {{gradient_color1}} {{radial_angle1}}%, {{gradient_color2}} {{radial_angle2}}%) transparent;
<# } #>
}
<# } #>
<# } else { #>
#sppb-addon-{{ data.id }} .overlay-background-style {
background: transparent;
}
<# } #>
<#
let overlay_hover_type = (!_.isEmpty(data.overlay_hover_type) && data.overlay_hover_type) ? data.overlay_hover_type : "";
let overlay_hover_color = (!_.isEmpty(data.overlay_hover_color) && data.overlay_hover_color) ? data.overlay_hover_color : "";
let overlay_hover_gradient = (!_.isEmpty(data.overlay_hover_gradient) && data.overlay_hover_gradient) ? data.overlay_hover_gradient : "";
if(overlay_hover_type!=="none"){
if(overlay_hover_type=="color"){
#>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content:hover .overlay-background-style {
background: {{overlay_hover_color}};
}
<# } else if(overlay_hover_type=="gradient") {
let gradient_hover_color1 = (_.isObject(overlay_hover_gradient) && !_.isEmpty(overlay_hover_gradient.color) && overlay_hover_gradient.color) ? overlay_hover_gradient.color : "rgba(127, 0, 255, 0.8)";
let gradient_hover_color2 = (_.isObject(overlay_hover_gradient) && !_.isEmpty(overlay_hover_gradient.color2) && overlay_hover_gradient.color2) ? overlay_hover_gradient.color2 : "rgba(225, 0, 255, 0.7)";
let hover_degree = (_.isObject(overlay_hover_gradient) && !_.isEmpty(overlay_hover_gradient.deg) && overlay_hover_gradient.deg) ? overlay_hover_gradient.deg : "";
let hover_type = (_.isObject(overlay_hover_gradient) && !_.isEmpty(overlay_hover_gradient.type) && overlay_hover_gradient.type) ? overlay_hover_gradient.type : "linear";
let hover_radialPos = (_.isObject(overlay_hover_gradient) && !_.isEmpty(overlay_hover_gradient.radialPos) && overlay_hover_gradient.radialPos) ? overlay_hover_gradient.radialPos : "Center Center";
let hover_radial_angle1 = (_.isObject(overlay_hover_gradient) && !_.isEmpty(overlay_hover_gradient.pos) && overlay_hover_gradient.pos) ? overlay_hover_gradient.pos : "0";
let hove_radial_angle2 = (_.isObject(overlay_hover_gradient) && !_.isEmpty(overlay_hover_gradient.pos2) && overlay_hover_gradient.pos2) ? overlay_hover_gradient.pos2 : "100";
#>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content:hover .overlay-background-style {
opacity:.8;
}
#sppb-addon-{{ data.id }} .overlay-background-style::after {
<# if(hover_type!=="radial"){ #>
background: -webkit-linear-gradient({{hover_degree}}deg, {{gradient_hover_color1}} {{hover_radial_angle1}}%, {{gradient_hover_color2}} {{hove_radial_angle2}}%) transparent;
background: linear-gradient({{hover_degree}}deg, {{gradient_hover_color1}} {{hover_radial_angle1}}%, {{gradient_hover_color2}} {{hove_radial_angle2}}%) transparent;
<# } else { #>
background: -webkit-radial-gradient(at {{hover_radialPos}}, {{gradient_hover_color1}} {{hover_radial_angle1}}%, {{gradient_hover_color2}} {{hove_radial_angle2}}%) transparent);
background: radial-gradient(at {{hover_radialPos}}, {{gradient_hover_color1}} {{hover_radial_angle1}}%, {{gradient_hover_color2}} {{hove_radial_angle2}}%) transparent);
<# } #>
}
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content:hover .overlay-background-style::after {
opacity:1;
}
<# }
} else { #>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content:hover .overlay-background-style {
background: transparent;
}
<# } #>
<# if (!_.isEmpty(data.content_padding)) { #>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content {
<# if(_.isObject(data.content_padding)){ #>
padding:{{data.content_padding.md}};
<# } else { #>
padding:{{data.content_padding}};
<# } #>
}
<# } #>
<# if (data.button_margin) { #>
#sppb-addon-{{ data.id }} .overlay-image-button-wrap {
<# if(_.isObject(data.button_margin)){ #>
margin: {{data.button_margin.md}};
<# } else { #>
margin: {{data.button_margin}};
<# } #>
}
<# }
let image_height_sm = (!_.isEmpty(data.image_height) && data.image_height.sm) ? data.image_height.sm : "";
let title_margin_sm = (!_.isEmpty(data.title_margin) && data.title_margin.sm) ? data.title_margin.sm : ""
let subtitle_fontsize_sm = (!_.isEmpty(data.sub_title_fontsize) && data.sub_title_fontsize.sm) ? data.sub_title_fontsize.sm : "";
let sub_title_margin_sm = (!_.isEmpty(data.sub_title_margin) && data.sub_title_margin.sm) ? data.sub_title_margin.sm : "";
let content_padding_sm = (!_.isEmpty(data.content_padding) && data.content_padding.sm) ? data.content_padding.sm : "";
if(image_height_sm || title_margin_sm || subtitle_fontsize_sm || sub_title_margin_sm || data.button_margin || content_padding_sm){
#>
@media (min-width: 768px) and (max-width: 991px) {
<# if(image_height_sm) { #>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content {
height: {{image_height_sm}}px;
}
<# }
if(title_margin_sm) {
#>
#sppb-addon-{{ data.id }} .sppb-addon-title {
margin: {{title_margin_sm}};
}
<# }
if(subtitle_fontsize_sm) {
#>
#sppb-addon-{{ data.id }} .sppb-addon-subtitle {
font-size:{{subtitle_fontsize_sm}}px;
}
<# }
if(sub_title_margin_sm) {
#>
#sppb-addon-{{ data.id }} .sppb-addon-subtitle {
margin:{{sub_title_margin_sm}};
}
<# }
if(_.isObject(data.button_margin)) {
#>
#sppb-addon-{{ data.id }} .overlay-image-button-wrap {
margin:{{data.button_margin.sm}};
}
<# } #>
<# if (content_padding_sm) { #>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content {
padding:{{content_padding_sm}};
}
<# } #>
}
<# }
let image_height_xs = (!_.isEmpty(data.image_height) && data.image_height.xs) ? data.image_height.xs : "";
let title_margin_xs = (!_.isEmpty(data.title_margin) && data.title_margin.xs) ? data.title_margin.xs : "";
let subtitle_fontsize_xs = (!_.isEmpty(data.sub_title_fontsize) && data.sub_title_fontsize.xs) ? data.sub_title_fontsize.xs : ""
let sub_title_margin_xs = (!_.isEmpty(data.sub_title_margin) && data.sub_title_margin.xs) ? data.sub_title_margin.xs : ""
let content_padding_xs = (!_.isEmpty(data.content_padding) && data.content_padding.xs) ? data.content_padding.xs : "";
if(image_height_xs || title_margin_xs || subtitle_fontsize_xs || data.button_margin || sub_title_margin_xs || content_padding_xs){
#>
@media (max-width: 767px) {
<# if(image_height_xs) { #>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content {
height: {{image_height_xs}}px;
}
<# }
if(title_margin_xs) {
#>
#sppb-addon-{{ data.id }} .sppb-addon-title {
margin: {{title_margin_xs}};
}
<# }
if(subtitle_fontsize_xs) {
#>
#sppb-addon-{{ data.id }} .sppb-addon-subtitle {
font-size:{{subtitle_fontsize_xs}}px;
}
<# }
if(sub_title_margin_xs) {
#>
#sppb-addon-{{ data.id }} .sppb-addon-subtitle {
margin:{{sub_title_margin_xs}};
}
<# }
if(_.isObject(data.button_margin)) {
#>
#sppb-addon-{{ data.id }} .overlay-image-button-wrap {
margin:{{data.button_margin.xs}};
}
<# } #>
<# if (content_padding_xs) { #>
#sppb-addon-{{ data.id }} .sppb-addon-overlay-image-content {
padding:{{content_padding_xs}};
}
<# } #>
}
<# } #>
#sppb-addon-{{ data.id }} #btn-{{ data.id }}.sppb-btn-{{ data.type }}{
letter-spacing: {{ data.letterspace }};
<# if(_.isObject(button_font_style) && button_font_style.underline) { #>
text-decoration: underline;
<# modern_font_style = true #>
<# } #>
<# if(_.isObject(button_font_style) && button_font_style.italic) { #>
font-style: italic;
<# modern_font_style = true #>
<# } #>
<# if(_.isObject(button_font_style) && button_font_style.uppercase) { #>
text-transform: uppercase;
<# modern_font_style = true #>
<# } #>
<# if(_.isObject(button_font_style) && button_font_style.weight) { #>
font-weight: {{ button_font_style.weight }};
<# modern_font_style = true #>
<# } #>
<# if(!modern_font_style) { #>
<# if(_.isArray(button_fontstyle)) { #>
<# if(button_fontstyle.indexOf("underline") !== -1){ #>
text-decoration: underline;
<# } #>
<# if(button_fontstyle.indexOf("uppercase") !== -1){ #>
text-transform: uppercase;
<# } #>
<# if(button_fontstyle.indexOf("italic") !== -1){ #>
font-style: italic;
<# } #>
<# if(button_fontstyle.indexOf("lighter") !== -1){ #>
font-weight: lighter;
<# } else if(button_fontstyle.indexOf("normal") !== -1){#>
font-weight: normal;
<# } else if(button_fontstyle.indexOf("bold") !== -1){#>
font-weight: bold;
<# } else if(button_fontstyle.indexOf("bolder") !== -1){#>
font-weight: bolder;
<# } #>
<# } #>
<# } #>
}
<# if(data.type == "custom"){ #>
#sppb-addon-{{ data.id }} #btn-{{ data.id }}.sppb-btn-custom{
<# if(_.isObject(data.fontsize)){ #>
font-size: {{data.fontsize.md}}px;
<# } else { #>
font-size: {{data.fontsize}}px;
<# } #>
color: {{ data.color }};
<# if(_.isObject(data.button_padding)) { #>
padding: {{ data.button_padding.md }};
<# } else { #>
padding: {{ data.button_padding }}
<# } #>
<# if(data.appearance == "outline"){ #>
border-color: {{ data.background_color }};
background-color: transparent;
<# } else if(data.appearance == "3d"){ #>
border-bottom-color: {{ data.background_color_hover }};
background-color: {{ data.background_color }};
<# } else if(data.appearance == "gradient"){ #>
border: none;
<# if(typeof data.background_gradient.type !== "undefined" && data.background_gradient.type == "radial"){ #>
background-image: radial-gradient(at {{ data.background_gradient.radialPos || "center center"}}, {{ data.background_gradient.color }} {{ data.background_gradient.pos || 0 }}%, {{ data.background_gradient.color2 }} {{ data.background_gradient.pos2 || 100 }}%);
<# } else { #>
background-image: linear-gradient({{ data.background_gradient.deg || 0}}deg, {{ data.background_gradient.color }} {{ data.background_gradient.pos || 0 }}%, {{ data.background_gradient.color2 }} {{ data.background_gradient.pos2 || 100 }}%);
<# } #>
<# } else { #>
background-color: {{ data.background_color }};
<# } #>
}
#sppb-addon-{{ data.id }} #btn-{{ data.id }}.sppb-btn-custom:hover{
color: {{ data.color_hover }};
background-color: {{ data.background_color_hover }};
<# if(data.appearance == "outline"){ #>
border-color: {{ data.background_color_hover }};
<# } else if(data.appearance == "gradient"){ #>
<# if(typeof data.background_gradient_hover.type !== "undefined" && data.background_gradient_hover.type == "radial"){ #>
background-image: radial-gradient(at {{ data.background_gradient_hover.radialPos || "center center"}}, {{ data.background_gradient_hover.color }} {{ data.background_gradient_hover.pos || 0 }}%, {{ data.background_gradient_hover.color2 }} {{ data.background_gradient_hover.pos2 || 100 }}%);
<# } else { #>
background-image: linear-gradient({{ data.background_gradient_hover.deg || 0}}deg, {{ data.background_gradient_hover.color }} {{ data.background_gradient_hover.pos || 0 }}%, {{ data.background_gradient_hover.color2 }} {{ data.background_gradient_hover.pos2 || 100 }}%);
<# } #>
<# } #>
}
@media (min-width: 768px) and (max-width: 991px) {
#sppb-addon-{{ data.id }} #btn-{{ data.id }}.sppb-btn-custom{
<# if(_.isObject(data.fontsize)){ #>
font-size: {{data.fontsize.sm}}px;
<# } #>
<# if(_.isObject(data.button_padding)) { #>
padding: {{ data.button_padding.sm }};
<# } #>
}
}
@media (max-width: 767px) {
#sppb-addon-{{ data.id }} #btn-{{ data.id }}.sppb-btn-custom{
<# if(_.isObject(data.fontsize)){ #>
font-size: {{data.fontsize.xs}}px;
<# } #>
<# if(_.isObject(data.button_padding)) { #>
padding: {{ data.button_padding.xs }};
<# } #>
}
}
<# }
if(data.global_border_radius){
#>
#sppb-addon-{{ data.id }} {
overflow:hidden;
}
<# } #>
</style>
<div class="sppb-addon sppb-addon-overlay-image {{data.class}} image-effect-{{data.background_image_animation}} {{data.show_content_on_hover ? "overlay-show-content-on-hover" : ""}}">
<div class="sppb-addon-overlay-image-content title-subtitle-{{data.title_subtitle_position}}">
<#
if((data.title || data.sub_title) && data.title_subtitle_position){
let title_icon_arr = (typeof data.title_icon !== "undefined" && data.title_icon) ? data.title_icon.split(" ") : "";
let title_icon_name = title_icon_arr.length === 1 ? "fa "+data.title_icon : data.title_icon;
#>
<div class="overlay-image-title">
<{{data.heading_selector}} class="sppb-addon-title">
<# if(data.title_link){ #>
<a href="{{data.title_link}}"
<# if(data.title_link_new_window){ #>
target="_blank"
<# } #>
>
<# } #>
<# if(data.title_icon){
#>
<i class="{{title_icon_name}}"></i>
<# } #>
<span class="sp-inline-editable-element" data-id={{data.id}} data-fieldName="title" contenteditable="true">{{{data.title}}}</span>
<# if(data.title_link){ #>
</a>
<# } #>
</{{data.heading_selector}}>
<{{data.subtitle_heading_selector}} class="sppb-addon-subtitle">
<#
let sub_icon_arr = (typeof data.sub_title_icon !== "undefined" && data.sub_title_icon) ? data.sub_title_icon.split(" ") : "";
let sub_icon_name = sub_icon_arr.length === 1 ? "fa "+data.sub_title_icon : data.sub_title_icon;
if(data.sub_title_icon){
#>
<i class="{{sub_icon_name}}"></i>
<# } #>
<span class="sp-inline-editable-element" data-id={{data.id}} data-fieldName="sub_title" contenteditable="true">{{{data.sub_title}}}</span>
</{{data.subtitle_heading_selector}}>
<# if(data.text){
let icon_arr = (typeof data.icon !== "undefined" && data.icon) ? data.icon.split(" ") : "";
let icon_name = icon_arr.length === 1 ? "fa "+data.icon : data.icon;
#>
<div class="overlay-image-button-wrap">
<a href=\'{{ data.url }}\' id="btn-{{ data.id }}" target="{{ data.target }}" class="sppb-btn {{ classList }}"><# if(data.icon_position == "left" && !_.isEmpty(data.icon)) {
#><i class="{{ icon_name }}"></i><# } #> {{ data.text }}<# if(data.icon_position == "right" && !_.isEmpty(data.icon)) { #> <i class="{{ icon_name }}"></i><# } #></a>
</div>
<# } #>
</div>
<# } #>
<div class="overlay-background-image-wrapper">
<div class="overlay-background-image"></div>
<# if(data.image_in_lightbox && data.title_subtitle_position !== "center-center" && image_link){ #>
<a class="sppb-magnific-popup sppb-addon-image-overlay-icon" data-popup_type="image" data-mainclass="mfp-no-margins mfp-with-zoom" href=\'{{image_link}}\'>+</a>
<# } #>
</div>
<# if(data.overlay_type!="none" || data.overlay_mode == "hover"){ #>
<div class="overlay-background-style"></div>
<# } #>
</div>
</div>
';
return $output;
}
}