File manager - Edit - /home/verseaumee/zenit/components/com_sppagebuilder/addons/image_overlay/site.php
Back
<?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; } }
| ver. 1.4 |
Github
|
.
| PHP 8.5.7 | Generation time: 0 |
proxy
|
phpinfo
|
Settings