Spade
Mini Shell
| Directory:~$ /home/lmsyaran/public_html/j3/components/com_sppagebuilder/addons/icons_group/ |
| [Home] [System Details] [Kill Me] |
<?php
/**
* @package SP Page Builder
* @author JoomShaper http://www.joomshaper.com
* @copyright Copyright (c) 2010 - 2023 JoomShaper
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
//no direct access
defined('_JEXEC') or die('Restricted access');
class SppagebuilderAddonIcons_group extends SppagebuilderAddons
{
/**
* The addon frontend render method.
* The returned HTML string will render to the frontend page.
*
* @return string The HTML string.
* @since 1.0.0
*/
public function render()
{
$settings = $this->addon->settings;
// Addon Options
$class = (isset($settings->class) && $settings->class) ?
$settings->class : '';
$icon_items = (isset($settings->sp_icons_group_item) &&
$settings->sp_icons_group_item) ? $settings->sp_icons_group_item :
'';
$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 :
'h2';
$title_icon = (isset($settings->title_icon) &&
$settings->title_icon) ? $settings->title_icon : '';
$title_icon_position = (isset($settings->title_icon_position)
&& $settings->title_icon_position) ?
$settings->title_icon_position : 'before';
$output = '';
$output .= '<div class="sppb-addon sppb-addon-icons-group
' . $class . ' ' . ($title_position ?
'icons-group-title-postion-' . $title_position : '') .
'">';
if ($title)
{
$output .= '<' . $heading_selector . '
class="sppb-addon-title">';
if ($title_icon)
{
$icon_arr = array_filter(explode(' ', $title_icon));
if (count($icon_arr) === 1)
{
$title_icon = 'fa ' . $title_icon;
}
}
if ($title_icon && $title_icon_position == 'before')
{
$output .= '<span class="' . $title_icon .
'" aria-hidden="true"></span> ';
}
$output .= $title;
if ($title_icon && $title_icon_position == 'after')
{
$output .= ' <span class="' . $title_icon .
'" aria-hidden="true"></span>';
}
$output .= '</' . $heading_selector . '>';
}
$output .= '<ul
class="sppb-icons-group-list">';
if (is_array($icon_items) && count($icon_items) > 0)
{
foreach ($icon_items as $key => $icon_item)
{
$key++;
$icon_class = (isset($icon_item->icon_class) &&
$icon_item->icon_class !== '') ? ' ' .
$icon_item->icon_class : '';
$title = (isset($icon_item->title) && $icon_item->title)
? $icon_item->title : 'Icon group item';
$icon_id = $this->addon->id . $key;
list($link, $target) = AddonHelper::parseLink($icon_item,
'icon_link', ['url' => 'icon_link',
'new_tab' => 'link_open_new_window']);
$output .= '<li id="icon-' . $icon_id . '"
class="' . $icon_class . '">';
if (!empty($link))
{
$output .= '<a href="' . $link . '"
aria-label="' . strip_tags($title) . '" ' .
$target . '>';
}
if (isset($icon_item->label_position) &&
!empty($icon_item->show_label) && $icon_item->label_position
== 'top')
{
$output .= '<span
class="sppb-icons-label-text">' .
(isset($icon_item->label_text) ? $icon_item->label_text :
'') . '</span>';
}
if (isset($icon_item->icon_name))
{
$icon_arr2 = array_filter(explode(' ',
$icon_item->icon_name));
if (count($icon_arr2) === 1)
{
$icon_item->icon_name = 'fa ' .
$icon_item->icon_name;
}
$output .= '<i class="' . $icon_item->icon_name .
' " aria-hidden="true" title="' . $title .
'"></i>';
}
if (isset($icon_item->label_position) &&
!empty($icon_item->show_label) && $icon_item->label_position
== 'right')
{
$output .= '<span class="sppb-icons-label-text
right"> ' . (isset($icon_item->label_text) ?
$icon_item->label_text : '') . '</span>';
}
if (isset($icon_item->label_position) &&
!empty($icon_item->show_label) && $icon_item->label_position
== 'bottom')
{
$output .= '<span
class="sppb-icons-label-text">' .
(isset($icon_item->label_text) ? $icon_item->label_text :
'') . '</span>';
}
if (!empty($link))
{
$output .= '</a>';
}
$output .= '</li>';
}
}
$output .= '</ul>';
$output .= '</div>';
return $output;
}
/**
* Generate the CSS string for the frontend page.
*
* @return string The CSS string for the page.
* @since 1.0.0
*/
public function css()
{
$addon_id = '#sppb-addon-' . $this->addon->id;
$settings = $this->addon->settings;
$cssHelper = new CSSHelper($addon_id);
$styles = [];
foreach ($settings->sp_icons_group_item as $key => $addon_item)
{
$key++;
$icon_id = $this->addon->id . $key;
$css = '';
$iconStyle = '';
list($link) = AddonHelper::parseLink($addon_item, 'icon_link',
[
'new_tab' => 'link_open_new_window',
'url' => 'icon_link'
]);
if (!empty($link))
{
$iconStyle .= $cssHelper->generateStyle(
".sppb-icons-group-list li#icon-" . $icon_id . "
a",
$addon_item,
[
'height' => 'height',
'padding' => 'padding',
'width' => 'width',
'color' => 'color',
'background' => 'background-color',
'border_color' => 'border-color',
'border_style' => 'border-style',
'border_width' => 'border-width',
'border_radius' => 'border-radius'
],
['color' => false, 'background' => false,
'border_color' => false, 'border_style' =>
false],
['padding' => 'spacing']
);
}
else
{
$iconStyle .= $cssHelper->generateStyle(
".sppb-icons-group-list li#icon-" . $icon_id . "",
$addon_item,
[
'height' => 'height',
'padding' => 'padding',
'width' => 'width',
'color' => 'color',
'background' => 'background-color',
'border_color' => 'border-color',
'border_style' => 'border-style',
'border_width' => 'border-width',
'border_radius' => 'border-radius'
],
['color' => false, 'background' => false,
'border_color' => false, 'border_style' =>
false],
['padding' => 'spacing']
);
}
$itemDisplayStyle = $cssHelper->generateStyle("
.sppb-icons-group-list li#icon-" . $icon_id, $settings,
['item_display' => 'display', 'size' =>
'font-size'], ['item_display' => false]);
$iconHoverStyle =
$cssHelper->generateStyle(".sppb-icons-group-list li#icon-" .
$icon_id . " a:hover", $addon_item, ['hover_color'
=> 'color', 'hover_background' =>
'background', 'hover_border_color' =>
'border-color'], false);
$iconMarginStyle =
$cssHelper->generateStyle(".sppb-icons-group-list li#icon-" .
$icon_id . " a", $settings, ['margin' =>
'margin']);
$fontStyle = $cssHelper->generateStyle(".sppb-icons-group-list
li#icon-" . $icon_id . " a", $settings, ['size'
=> 'font-size']);
$labelStyle = $cssHelper->generateStyle(".sppb-icons-group-list
li#icon-" . $icon_id . " .sppb-icons-label-text",
$addon_item, ['label_margin' => 'margin'], false,
['label_margin' => 'spacing']);
$labelFontStyle = $cssHelper->typography(
".sppb-icons-group-list li#icon-" . $icon_id . "
.sppb-icons-label-text",
$addon_item,
'label_typography',
[
'size' => 'label_size',
'line_height' => 'label_lineheight',
'letter_spacing' => 'label_letterspace',
'uppercase' =>
'label_font_style.uppercase',
'italic' => 'label_font_style.italic',
'underline' =>
'label_font_style.underline',
'weight' => 'label_font_style.weight',
]
);
$css .= $cssHelper->generateStyle(".sppb-icons-group-list
li", $settings, ["margin" => "margin"]);
$css .= $cssHelper->generateStyle(".sppb-icons-group-list",
$settings, ["margin" => "margin: -%s"]);
$css .= $fontStyle;
$css .= $iconStyle;
$css .= $labelStyle;
$css .= $itemDisplayStyle;
$css .= $labelFontStyle;
$css .= $iconHoverStyle;
$css .= $iconMarginStyle;
$styles[$key] = $css;
}
$styles_explode = implode("\n", $styles);
// Alignment style
$settings->icon_alignment = $cssHelper->parseAlignment($settings,
'icon_alignment');
$styles_explode .=
$cssHelper->generateStyle('.sppb-addon-icons-group',
$settings, ['icon_alignment' => 'text-align'],
false);
$titleStyle = $cssHelper->generateStyle('.sppb-addon-title',
$settings, ['title_margin' => 'margin',
'title_text_transform' => 'text-transform',
'title_padding' => 'padding'], false,
['title_margin' => 'spacing',
'title_padding' => 'spacing']);
$styles_explode .= $titleStyle;
return $styles_explode;
}
/**
* Generate the lodash template string for the frontend editor.
*
* @return string The lodash template string.
* @since 1.0.0
*/
public static function getTemplate()
{
$lodash = new Lodash('#sppb-addon-{{data.id}}');
$output = '
<style type="text/css">';
$output .= $lodash->alignment('text-align',
'.sppb-addon-icons-group', 'data.icon_alignment');
$output .= '
<#
_.each (data.sp_icons_group_item, function(addon_item, key) {
key ++;
var icon_id = data.id + key;
#>';
$output .= $lodash->unit('margin',
'.sppb-icons-group-list', 'data.margin',
'px', false, '-');
$output .= $lodash->unit('font-size',
'.sppb-icons-group-list li#icon-{{icon_id}} i',
'data.size', 'px');
$output .= $lodash->unit('margin',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'data.margin', 'px');
$output .= $lodash->unit('display',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'data.item_display');
$output .= $lodash->spacing('margin',
'.sppb-addon-title', 'data.title_margin');
$output .= $lodash->spacing('padding',
'.sppb-addon-title', 'data.title_padding');
// Title
$titleTypographyFallbacks = [
'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', $titleTypographyFallbacks);
$output .= '<#
const {icon_link} = addon_item;
const isUrlObject_title = _.isObject(icon_link) &&
(!!icon_link.url || !!icon_link.menu || !!icon_link.page);
const isUrlString_icon = _.isString(icon_link) && icon_link !==
"";
const isUrlString_title = _.isString(data.title_link) &&
data.title_link !== "";
if(isUrlObject_title || isUrlString_icon || isUrlString_title){
const urlObj = icon_link?.url ? icon_link : window.getSiteUrl(icon_link,
addon_item.link_open_new_window);
const {url, new_tab, nofollow, type, noopener, noreferrer} = urlObj;
const target = new_tab ? "_blank" : "";
let rel = "";
rel += nofollow ? "nofollow": "";
rel += noopener ? " noopener": "";
rel += noreferrer ? " noreferrer": "";
const title_url = (type === "url" && url) || (type ===
"menu" && urlObj.menu) || ( (type === "page"
&& !!urlObj.page) &&
"index.php/component/sppagebuilder/index.php?option=com_sppagebuilder&view=page&id="
+ urlObj.page) || "";
if(title_url) { #>';
$output .= $lodash->color('color',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.color');
$output .= $lodash->color('background-color',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.background');
$output .= $lodash->border('border-color',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.border_color');
$output .= $lodash->border('border-style',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.border_style');
$output .= $lodash->unit('width',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.width', 'px');
$output .= $lodash->unit('height',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.height', 'px');
$output .= $lodash->unit('border-width',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.border_width', 'px');
$output .= $lodash->unit('font-size',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'data.size', 'px');
$output .= $lodash->unit('border-radius',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.border_radius', 'px');
$output .= $lodash->spacing('padding',
'.sppb-icons-group-list li#icon-{{icon_id}} a',
'addon_item.padding');
$output .= $lodash->color('color',
'.sppb-icons-group-list li#icon-{{icon_id}} a:hover',
'addon_item.hover_color');
$output .= $lodash->color('background-color',
'.sppb-icons-group-list li#icon-{{icon_id}} a:hover',
'addon_item.hover_background');
$output .= $lodash->border('border-color',
'.sppb-icons-group-list li#icon-{{icon_id}} a:hover',
'addon_item.hover_border_color');
$output .= '<# }} else {
#>';
$output .= $lodash->color('color',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.color');
$output .= $lodash->color('background-color',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.background');
$output .= $lodash->border('border-color',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.border_color');
$output .= $lodash->border('border-style',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.border_style');
$output .= $lodash->unit('width',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.width', 'px');
$output .= $lodash->unit('height',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.height', 'px');
$output .= $lodash->unit('border-width',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.border_width', 'px');
$output .= $lodash->unit('font-size',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'data.size', 'px');
$output .= $lodash->unit('border-radius',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.border_radius', 'px');
$output .= $lodash->spacing('padding',
'.sppb-icons-group-list li#icon-{{icon_id}}',
'addon_item.padding');
$output .= $lodash->color('color',
'.sppb-icons-group-list li#icon-{{icon_id}}:hover',
'addon_item.hover_color');
$output .= $lodash->color('background-color',
'.sppb-icons-group-list li#icon-{{icon_id}}:hover',
'addon_item.hover_background');
$output .= $lodash->border('border-color',
'.sppb-icons-group-list li#icon-{{icon_id}}:hover',
'addon_item.hover_border_color');
$output .= '<# } #>';
// label
$output .= $lodash->unit('font-size',
'.sppb-icons-group-list li#icon-{{icon_id}}
.sppb-icons-label-text', 'addon_item.label_size',
'px');
$output .= $lodash->unit('line-height',
'.sppb-icons-group-list li#icon-{{icon_id}}
.sppb-icons-label-text', 'addon_item.label_lineheight',
'px');
$output .= $lodash->unit('letter-spacing',
'.sppb-icons-group-list li#icon-{{icon_id}}
.sppb-icons-label-text', 'addon_item.label_letterspace',
'', false);
$output .= $lodash->unit('font-weight',
'.sppb-icons-group-list li#icon-{{icon_id}}
.sppb-icons-label-text',
'addon_item.label_font_style?.weight', '', false);
$output .= $lodash->spacing('margin',
'.sppb-icons-group-list li#icon-{{icon_id}}
.sppb-icons-label-text', 'addon_item.label_margin');
$output .= $lodash->typography('.sppb-icons-group-list
li#icon-{{icon_id}} .sppb-icons-label-text',
'addon_item.label_typography', [
'size' => 'addon_item.label_size',
'line_height' =>
'addon_item.label_lineheight',
'letter_spacing' =>
'addon_item.label_letterspace',
'uppercase' =>
'addon_item.label_font_style?.uppercase',
'italic' =>
'addon_item.label_font_style?.italic',
'underline' =>
'addon_item.label_font_style?.underline',
'weight' =>
'addon_item.label_font_style?.weight',
]);
$output .= ' <# }) #>
</style>
<#
let contentClass = (!_.isEmpty(data.class) &&
data.class) ? data.class : "";
let icon_items = (!_.isEmpty(data.sp_icons_group_item)
&& data.sp_icons_group_item) ? data.sp_icons_group_item :
"";
let alignment = (!_.isEmpty(data.icon_alignment) &&
data.icon_alignment) ? \' \' + data.icon_alignment :
"";
#>
<div class="sppb-addon sppb-addon-icons-group
{{contentClass}} {{(data.title_position ?
"icons-group-title-postion-"+data.title_position :
"")}}">
<#
let heading_selector = data.heading_selector ||
"h2";
if (!_.isEmpty(data.title)) {
#>
<{{ heading_selector }}
class="sppb-addon-title">
<#
let icon_title_arr = (typeof data.title_icon !==
"undefined" && data.title_icon) ?
data.title_icon.split(" ") : "";
let icon_title_name = icon_title_arr.length === 1 ?
"fa "+data.title_icon : data.title_icon;
if(data.title_icon && data.title_icon_position ==
"before"){ #><span class="{{ icon_title_name
}}"></span> <# } #>
<span class="sp-inline-editable-element"
data-id={{data.id}} data-fieldName="title"
contenteditable="true">{{{ data.title }}}</span>
<# if(data.title_icon &&
data.title_icon_position == "after"){ #> <span
class="{{ icon_title_name }}"></span><# } #>
</{{ heading_selector }}>
<# } #>
<ul class="sppb-icons-group-list">
<# _.each (icon_items, function(icon_item, key) {
key ++;
let icon_class = (!_.isEmpty(icon_item.icon_class)
&& icon_item.icon_class !== "") ? icon_item.icon_class :
" ";
let icon_id = data.id + key;
#>
<li id="icon-{{icon_id}}"
class="{{icon_class}}">
<#
const {icon_link} = icon_item;
const isUrlObject_title = _.isObject(icon_link) &&
(!!icon_link.url || !!icon_link.menu || !!icon_link.page);
const isUrlString = _.isString(icon_link) && icon_link !==
"";
const isUrlString_title = _.isString(data.title_link) &&
data.title_link !== "";
if(isUrlObject_title || isUrlString_title || isUrlString){
const urlObj = icon_link?.url ? icon_link :
window.getSiteUrl(icon_link, icon_item.link_open_new_window);
const {url, new_tab, nofollow, noopener, noreferrer, type} = urlObj;
const target = new_tab ? "_blank" :
"";
let rel = "";
rel += nofollow ? "nofollow": "";
rel += noopener ? " noopener": "";
rel += noreferrer ? " noreferrer": "";
const title_url = (type === "url" && url) || (type
=== "menu" && urlObj.menu) || ( (type ===
"page" && !!urlObj.page) &&
"index.php/component/sppagebuilder/index.php?option=com_sppagebuilder&view=page&id="
+ urlObj.page) || "";
#>
<# if(title_url) { #>
<a href=\'{{title_url}}\' target="{{target}}"
rel=\'{{rel}}\'>
<# } #>
<# } #>
<#
if (!_.isEmpty(icon_item.label_position) &&
icon_item.show_label !== 0 && icon_item.label_position ==
"top") {
#>
<span
class="sppb-icons-label-text">{{icon_item.label_text}}</span>
<# }
if (!_.isEmpty(icon_item.icon_name)) {
let icon_arr2 = (typeof icon_item.icon_name !==
"undefined" && icon_item.icon_name) ?
icon_item.icon_name.split(" ") : "";
let icon_name2 = icon_arr2.length === 1 ? "fa
"+icon_item.icon_name : icon_item.icon_name;
#>
<i class="{{icon_name2}}
"></i>
<# }
if (!_.isEmpty(icon_item.label_position) &&
icon_item.show_label !== 0 && icon_item.label_position ==
"right") {
#>
<span class="sppb-icons-label-text
right">{{icon_item.label_text}}</span>
<# }
if (!_.isEmpty(icon_item.label_position) &&
icon_item.show_label !== 0 && icon_item.label_position ==
"bottom") {
#>
<span
class="sppb-icons-label-text">{{icon_item.label_text}}</span>
<# }
if (icon_item.icon_link) {
#>
</a>
<# } #>
</li>
<# }) #>
</ul>
</div>
';
return $output;
}
}