first commit
This commit is contained in:
@@ -0,0 +1,257 @@
|
||||
<?php
|
||||
|
||||
class DSM_Text_Badges extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_text_badges';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Text Badges', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Main', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% h1.et_pb_module_header, %%order_class%% h2.et_pb_module_header, %%order_class%% h3.et_pb_module_header, %%order_class%% h4.et_pb_module_header, %%order_class%% h5.et_pb_module_header, %%order_class%% h6.et_pb_module_header',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '18px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h4',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
),
|
||||
'badges' => array(
|
||||
'label' => esc_html__( 'Badges', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-badges',
|
||||
),
|
||||
'text_color' => array(
|
||||
'default' => '#fff',
|
||||
),
|
||||
'hide_font_size' => true,
|
||||
'hide_line_height' => true,
|
||||
'hide_text_align' => true,
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => true,
|
||||
'use_background_layout' => true,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%% .dsm-text-badge',
|
||||
),
|
||||
'options' => array(
|
||||
'background_layout' => array(
|
||||
'default' => 'light',
|
||||
),
|
||||
),
|
||||
),
|
||||
'background' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-text-badges',
|
||||
),
|
||||
'options' => array(
|
||||
'parallax_method' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-text-badges',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
'image' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm-badges',
|
||||
'border_styles' => '%%order_class%% .dsm-badges',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Badge', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'badges',
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-text-badges',
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
$et_accent_color = et_builder_accent_color();
|
||||
return array(
|
||||
'main_text' => array(
|
||||
'label' => esc_html__( 'Main Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => 'Badges',
|
||||
),
|
||||
'badges_text' => array(
|
||||
'label' => esc_html__( 'Badges Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => 'New',
|
||||
),
|
||||
'badges_placement' => array(
|
||||
'label' => esc_html__( 'Badges Placement', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'before' => esc_html__( 'Before', 'dsm-supreme-modules-for-divi' ),
|
||||
'after' => esc_html__( 'After', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'after',
|
||||
'description' => esc_html__( 'Here you can choose the placement of the badges to be before or after the Main Text.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'badges_background_color' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default' => $et_accent_color,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'badges',
|
||||
'description' => esc_html__( 'Here you can define a custom background color for the badge', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'badges_gap' => array(
|
||||
'label' => esc_html__( 'Gap', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'badges',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '7px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '',
|
||||
'allow_empty' => true,
|
||||
'responsive' => true,
|
||||
'description' => esc_html__( 'Here you can define a gap between the text and the badge', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$main_text = $this->props['main_text'];
|
||||
$badges_text = $this->props['badges_text'];
|
||||
$badges_placement = $this->props['badges_placement'];
|
||||
$badges_background_color = $this->props['badges_background_color'];
|
||||
$badges_gap = $this->props['badges_gap'];
|
||||
$badges_gap_tablet = $this->props['badges_gap_tablet'];
|
||||
$badges_gap_phone = $this->props['badges_gap_phone'];
|
||||
$badges_gap_last_edited = $this->props['badges_gap_last_edited'];
|
||||
$background_layout = $this->props['background_layout'];
|
||||
$header_level = $this->props['header_level'];
|
||||
|
||||
if ( '' !== $badges_text ) {
|
||||
$badges_text = sprintf(
|
||||
'<span class="dsm-badges dsm-badges-%2$s">%1$s</span>',
|
||||
$badges_text,
|
||||
esc_attr( $badges_placement )
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $main_text ) {
|
||||
$main_text = sprintf(
|
||||
'<%1$s class="dsm-text-badges et_pb_module_header">%3$s%2$s%4$s</%1$s>',
|
||||
et_pb_process_header_level( $header_level, 'h4' ),
|
||||
$main_text,
|
||||
( 'before' === $badges_placement ? $badges_text : '' ),
|
||||
( 'after' === $badges_placement ? $badges_text : '' )
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $badges_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-badges',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $badges_background_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $badges_gap_tablet || '' !== $badges_gap_phone || '7px' !== $badges_gap ) {
|
||||
$badges_gap_responsive_active = et_pb_get_responsive_status( $badges_gap_last_edited );
|
||||
|
||||
$badges_gap_values = array(
|
||||
'desktop' => $badges_gap,
|
||||
'tablet' => $badges_gap_responsive_active ? $badges_gap_tablet : '',
|
||||
'phone' => $badges_gap_responsive_active ? $badges_gap_phone : '',
|
||||
);
|
||||
if ( 'after' === $badges_placement ) {
|
||||
et_pb_generate_responsive_css( $badges_gap_values, '%%order_class%% .dsm-badges-after', 'margin-left', $render_slug );
|
||||
} else {
|
||||
et_pb_generate_responsive_css( $badges_gap_values, '%%order_class%% .dsm-badges-before', 'margin-right', $render_slug );
|
||||
}
|
||||
}
|
||||
|
||||
$this->add_classname(
|
||||
array(
|
||||
$this->get_text_orientation_classname(),
|
||||
"et_pb_bg_layout_{$background_layout}",
|
||||
)
|
||||
);
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'%1$s',
|
||||
$main_text
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Text_Badges;
|
||||
@@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{display:none;}
|
||||
.st1{display:inline;opacity:0.31;}
|
||||
.st2{display:inline;fill:#6200EE;}
|
||||
.st3{fill:#FFFFFF;}
|
||||
.st4{fill:#03DAC6;}
|
||||
.st5{fill:#FFFFFF;stroke:#221F1F;stroke-width:0.4754;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g id="Layer_1" class="st0">
|
||||
<g class="st1">
|
||||
<path d="M7.77,6.66c-0.79,0-1.44-0.65-1.44-1.44c0-0.8,0.65-1.44,1.44-1.44c0.8,0,1.44,0.65,1.44,1.44
|
||||
C9.21,6.01,8.57,6.66,7.77,6.66z M7.77,4.58c-0.35,0-0.64,0.29-0.64,0.64s0.29,0.64,0.64,0.64s0.64-0.29,0.64-0.64
|
||||
S8.13,4.58,7.77,4.58z"/>
|
||||
<path d="M20.33,19.1c-0.79,0-1.44-0.65-1.44-1.44c0-0.79,0.65-1.44,1.44-1.44c0.8,0,1.44,0.65,1.44,1.44
|
||||
C21.77,18.45,21.13,19.1,20.33,19.1z M20.33,17.02c-0.35,0-0.64,0.29-0.64,0.64c0,0.35,0.29,0.64,0.64,0.64
|
||||
c0.35,0,0.64-0.29,0.64-0.64C20.97,17.3,20.69,17.02,20.33,17.02z"/>
|
||||
<path d="M18.05,23.14l-4.87-4.87l-4.59,4.59V9.45c0-1.59,0.6-2.48,1.1-2.94c0.55-0.51,1.1-0.63,1.16-0.65l0.08-0.01h9.87v0.8
|
||||
c-0.92,0-1.62,0.25-2.08,0.75c-0.75,0.81-0.67,2-0.67,2.01l0,0.03V23.14z M13.17,17.14l4.07,4.07V9.47
|
||||
c-0.01-0.18-0.06-1.58,0.88-2.6c0.07-0.07,0.14-0.14,0.22-0.21h-7.37C10.74,6.73,9.39,7.2,9.39,9.45v11.47L13.17,17.14z"/>
|
||||
<rect x="10.93" y="12.11" width="4.75" height="0.8"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Layer_3" class="st0">
|
||||
<rect x="-789.59" y="-581.63" class="st2" width="1600" height="1200"/>
|
||||
</g>
|
||||
<g id="Layer_2">
|
||||
<g>
|
||||
<path class="st4" d="M7.98,7.49C7.22,7.49,6.6,6.87,6.6,6.1c0-0.76,0.62-1.38,1.38-1.38c0.76,0,1.38,0.62,1.38,1.38
|
||||
C9.36,6.87,8.74,7.49,7.98,7.49z M7.98,5.49c-0.34,0-0.62,0.28-0.62,0.62s0.28,0.62,0.62,0.62c0.34,0,0.62-0.28,0.62-0.62
|
||||
S8.32,5.49,7.98,5.49z"/>
|
||||
<path class="st4" d="M20.02,19.4c-0.76,0-1.38-0.62-1.38-1.38c0-0.76,0.62-1.38,1.38-1.38c0.76,0,1.38,0.62,1.38,1.38
|
||||
C21.4,18.78,20.78,19.4,20.02,19.4z M20.02,17.41c-0.34,0-0.62,0.28-0.62,0.62s0.28,0.62,0.62,0.62s0.62-0.28,0.62-0.62
|
||||
S20.36,17.41,20.02,17.41z"/>
|
||||
<path class="st3" d="M17.83,23.28l-4.67-4.67l-4.4,4.4V10.16c0-1.52,0.57-2.37,1.05-2.82c0.53-0.49,1.05-0.61,1.11-0.62l0.08-0.01
|
||||
h9.46v0.77c-0.88,0-1.55,0.24-1.99,0.72c-0.72,0.77-0.64,1.91-0.64,1.93l0,0.03V23.28z M13.16,17.53l3.9,3.9V10.17
|
||||
c-0.01-0.17-0.05-1.52,0.85-2.49c0.07-0.07,0.13-0.14,0.21-0.2h-7.06C10.83,7.55,9.53,8,9.53,10.16v10.99L13.16,17.53z"/>
|
||||
<rect x="11.01" y="12.71" class="st4" width="4.55" height="0.77"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,947 @@
|
||||
<?php
|
||||
|
||||
class DSM_Before_After_Image extends ET_Builder_Module {
|
||||
protected static $rendering = false;
|
||||
public $slug = 'dsm_before_after_image';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Before/After Image Slider', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
$this->main_css_element = '%%order_class%%.dsm_before_after_image';
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Images', 'dsm-supreme-modules-for-divi' ),
|
||||
'labels' => esc_html__( 'Labels', 'dsm-supreme-modules-for-divi' ),
|
||||
'slider_settings' => esc_html__( 'Settings', 'dsm-supreme-modules-for-divi' ),
|
||||
'link' => esc_html__( 'Link', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'before_image' => esc_html__( 'Before Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'before_label' => esc_html__( 'Before Label', 'dsm-supreme-modules-for-divi' ),
|
||||
'after_label' => esc_html__( 'After Label', 'dsm-supreme-modules-for-divi' ),
|
||||
'overlay' => esc_html__( 'Overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
'handle_slider' => esc_html__( 'Handle Slider', 'dsm-supreme-modules-for-divi' ),
|
||||
'width' => array(
|
||||
'title' => esc_html__( 'Sizing', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 65,
|
||||
),
|
||||
),
|
||||
),
|
||||
'custom_css' => array(
|
||||
'toggles' => array(
|
||||
'animation' => array(
|
||||
'title' => esc_html__( 'Animation', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 90,
|
||||
),
|
||||
'attributes' => array(
|
||||
'title' => esc_html__( 'Attributes', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 95,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'before_label' => array(
|
||||
'label' => esc_html__( 'Before Label', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .dsm-before-after-image-slider-before-label:before",
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '13px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '38px',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'before_label',
|
||||
),
|
||||
'after_label' => array(
|
||||
'label' => esc_html__( 'After Label', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .dsm-before-after-image-slider-after-label:before",
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '13px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '38px',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'after_label',
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'important' => array( 'custom_margin' ),
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => "{$this->main_css_element}",
|
||||
'border_styles' => "{$this->main_css_element}",
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element}",
|
||||
'custom_style' => true,
|
||||
),
|
||||
),
|
||||
),
|
||||
'max_width' => array(
|
||||
'options' => array(
|
||||
'max_width' => array(
|
||||
'depends_show_if' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'text' => false,
|
||||
'button' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'before_src' => array(
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an before image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an before Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Before Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'hide_metadata' => true,
|
||||
'affects' => array(
|
||||
'before_alt',
|
||||
'before_title_text',
|
||||
),
|
||||
'description' => esc_html__( 'Upload your desired before image, or type in the URL to the image you would like to display.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'before_alt' => array(
|
||||
'label' => esc_html__( 'Before Image Alternative Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'depends_show_if' => 'on',
|
||||
'depends_on' => array(
|
||||
'before_src',
|
||||
),
|
||||
'description' => esc_html__( 'This defines the HTML ALT text. A short description of your image can be placed here.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'before_title_text' => array(
|
||||
'label' => esc_html__( 'Before Image Title Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'depends_show_if' => 'on',
|
||||
'depends_on' => array(
|
||||
'before_src',
|
||||
),
|
||||
'description' => esc_html__( 'This defines the HTML Title text.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'after_src' => array(
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an after image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an after Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As After Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'hide_metadata' => true,
|
||||
'affects' => array(
|
||||
'after_alt',
|
||||
'after_title_text',
|
||||
),
|
||||
'description' => esc_html__( 'Upload your desired after image, or type in the URL to the image you would like to display.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'after_alt' => array(
|
||||
'label' => esc_html__( 'After Image Alternative Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'depends_show_if' => 'on',
|
||||
'depends_on' => array(
|
||||
'after_src',
|
||||
),
|
||||
'description' => esc_html__( 'This defines the HTML ALT text. A short description of your image can be placed here.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'after_title_text' => array(
|
||||
'label' => esc_html__( 'After Image Title Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'depends_show_if' => 'on',
|
||||
'depends_on' => array(
|
||||
'after_src',
|
||||
),
|
||||
'description' => esc_html__( 'This defines the HTML Title text.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'before_label_text' => array(
|
||||
'label' => esc_html__( 'Before Label Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'This defines the before label text.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'labels',
|
||||
'default' => 'Before',
|
||||
),
|
||||
'after_label_text' => array(
|
||||
'label' => esc_html__( 'After Label Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'This defines the after label text.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'labels',
|
||||
'default' => 'After',
|
||||
),
|
||||
'default_offset_pct' => array(
|
||||
'label' => esc_html__( 'Default Offset Percentage', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default_on_front' => '0.5',
|
||||
'validate_unit' => false,
|
||||
'unitless' => true,
|
||||
'description' => esc_html__( 'How much of the before image is visible when the page loads.', 'dsm-supreme-modules-for-divi' ),
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '1',
|
||||
'step' => '0.1',
|
||||
),
|
||||
'toggle_slug' => 'slider_settings',
|
||||
),
|
||||
'orientation' => array(
|
||||
'label' => esc_html__( 'Orientation', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'horizontal' => esc_html__( 'Horizontal', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'vertical' => esc_html__( 'Vertical', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'horizontal',
|
||||
'toggle_slug' => 'slider_settings',
|
||||
),
|
||||
'no_overlay' => array(
|
||||
'label' => esc_html__( 'No Overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'off',
|
||||
'affects' => array(
|
||||
'overlay_color',
|
||||
),
|
||||
'toggle_slug' => 'slider_settings',
|
||||
'description' => esc_html__( 'Here you can choose whether or not your to show overlay with before and after.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'move_slider_on_hover' => array(
|
||||
'label' => esc_html__( 'Move Slider on Hover?', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'off',
|
||||
'toggle_slug' => 'slider_settings',
|
||||
'description' => esc_html__( 'Move slider on mouse hover.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'move_with_handle_only' => array(
|
||||
'label' => esc_html__( 'Move Slider with Handle', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'on',
|
||||
'toggle_slug' => 'slider_settings',
|
||||
'description' => esc_html__( 'Allow a user to swipe anywhere on the image to control slider movement.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'click_to_move' => array(
|
||||
'label' => esc_html__( 'Click to Move Slider', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'off',
|
||||
'toggle_slug' => 'slider_settings',
|
||||
'description' => esc_html__( 'Allow a user to click (or tap) anywhere on the image to move the slider to that location.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'before_label_background_color' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default_on_front' => 'rgba(255, 255, 255, 0.2)',
|
||||
'depends_show_if' => 'off',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'before_label',
|
||||
'mobile_options' => true,
|
||||
'description' => esc_html__( 'Here you can define a custom background color for the before label.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'after_label_background_color' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default_on_front' => 'rgba(255, 255, 255, 0.2)',
|
||||
'depends_show_if' => 'off',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'after_label',
|
||||
'mobile_options' => true,
|
||||
'description' => esc_html__( 'Here you can define a custom background color for the after label.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'overlay_color' => array(
|
||||
'label' => esc_html__( 'Overlay Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default_on_front' => 'rgba(0, 0, 0, 0.5)',
|
||||
'depends_show_if' => 'off',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'overlay',
|
||||
'mobile_options' => true,
|
||||
'description' => esc_html__( 'Here you can define a custom color for the overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'handle_border_color' => array(
|
||||
'label' => esc_html__( 'Handle Border Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default_on_front' => '#ffffff',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'handle_slider',
|
||||
'mobile_options' => true,
|
||||
'description' => esc_html__( 'Here you can define a custom border color for the handle slider.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'handle_border_radius' => array(
|
||||
'label' => esc_html__( 'Handle Border Radius', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'handle_slider',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'allowed_units' => array( 'px' ),
|
||||
'default' => '100px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '100px',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
'handle_background_color' => array(
|
||||
'label' => esc_html__( 'Handle Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'handle_slider',
|
||||
'mobile_options' => true,
|
||||
'description' => esc_html__( 'Here you can define a custom background color for the handle slider.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'handle_arrow_color' => array(
|
||||
'label' => esc_html__( 'Arrow Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default_on_front' => '#ffffff',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'handle_slider',
|
||||
'mobile_options' => true,
|
||||
'description' => esc_html__( 'Here you can define a custom arrow color for the handle slider.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$multi_view = et_pb_multi_view_options( $this );
|
||||
$before_src = $this->props['before_src'];
|
||||
$before_alt = $this->props['before_alt'];
|
||||
$before_title_text = $this->props['before_title_text'];
|
||||
$before_label_text = $this->props['before_label_text'];
|
||||
$after_src = $this->props['after_src'];
|
||||
$after_alt = $this->props['after_alt'];
|
||||
$after_title_text = $this->props['after_title_text'];
|
||||
$after_label_text = $this->props['after_label_text'];
|
||||
|
||||
$default_offset_pct = $this->props['default_offset_pct'];
|
||||
$orientation = $this->props['orientation'];
|
||||
$no_overlay = $this->props['no_overlay'];
|
||||
$move_slider_on_hover = $this->props['move_slider_on_hover'];
|
||||
$move_with_handle_only = $this->props['move_with_handle_only'];
|
||||
$click_to_move = $this->props['click_to_move'];
|
||||
$before_label_background_color = $this->props['before_label_background_color'];
|
||||
$before_label_background_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'before_label_background_color' );
|
||||
$before_label_background_color_tablet = isset( $before_label_background_color_values['tablet'] ) ? $before_label_background_color_values['tablet'] : '';
|
||||
$before_label_background_color_phone = isset( $before_label_background_color_values['phone'] ) ? $before_label_background_color_values['phone'] : '';
|
||||
$after_label_background_color = $this->props['after_label_background_color'];
|
||||
$after_label_background_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'after_label_background_color' );
|
||||
$after_label_background_color_tablet = isset( $after_label_background_color_values['tablet'] ) ? $after_label_background_color_values['tablet'] : '';
|
||||
$after_label_background_color_phone = isset( $after_label_background_color_values['phone'] ) ? $after_label_background_color_values['phone'] : '';
|
||||
$handle_border_color = $this->props['handle_border_color'];
|
||||
$handle_border_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'handle_border_color' );
|
||||
$handle_border_color_tablet = isset( $handle_border_color_values['tablet'] ) ? $handle_border_color_values['tablet'] : '';
|
||||
$handle_border_color_phone = isset( $handle_border_color_values['phone'] ) ? $handle_border_color_values['phone'] : '';
|
||||
$handle_border_radius = $this->props['handle_border_radius'];
|
||||
$handle_border_radius_values = et_pb_responsive_options()->get_property_values( $this->props, 'handle_border_radius' );
|
||||
$handle_border_radius_tablet = isset( $handle_border_radius_values['tablet'] ) ? $handle_border_radius_values['tablet'] : '';
|
||||
$handle_border_radius_phone = isset( $handle_border_radius_values['phone'] ) ? $handle_border_radius_values['phone'] : '';
|
||||
$handle_background_color = $this->props['handle_background_color'];
|
||||
$handle_background_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'handle_background_color' );
|
||||
$handle_background_color_tablet = isset( $handle_background_color_values['tablet'] ) ? $handle_background_color_values['tablet'] : '';
|
||||
$handle_background_color_phone = isset( $handle_background_color_values['phone'] ) ? $handle_background_color_values['phone'] : '';
|
||||
$handle_arrow_color = $this->props['handle_arrow_color'];
|
||||
$handle_arrow_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'handle_arrow_color' );
|
||||
$handle_arrow_color_tablet = isset( $handle_arrow_color_values['tablet'] ) ? $handle_arrow_color_values['tablet'] : '';
|
||||
$handle_arrow_color_phone = isset( $handle_arrow_color_values['phone'] ) ? $handle_arrow_color_values['phone'] : '';
|
||||
|
||||
$overlay_color = $this->props['overlay_color'];
|
||||
$overlay_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'overlay_color' );
|
||||
$overlay_color_tablet = isset( $overlay_color_values['tablet'] ) ? $overlay_color_values['tablet'] : '';
|
||||
$overlay_color_phone = isset( $overlay_color_values['phone'] ) ? $overlay_color_values['phone'] : '';
|
||||
|
||||
$animation_style = $this->props['animation_style'];
|
||||
$video_background = $this->video_background();
|
||||
$parallax_image_background = $this->get_parallax_image_background();
|
||||
|
||||
$wrapper_selector = '%%order_class%% .dsm_before_after_image_wrapper';
|
||||
$overlay_selector = '%%order_class%% .dsm-before-after-image-slider-overlay';
|
||||
$overlay_selector_hover = '%%order_class%% .dsm-before-after-image-slider-overlay:hover';
|
||||
$before_label_selector = '%%order_class%% .dsm-before-after-image-slider-before-label:before';
|
||||
$after_label_selector = '%%order_class%% .dsm-before-after-image-slider-after-label:before';
|
||||
$handle_border_selector = '%%order_class%% .dsm-before-after-image-slider-horizontal .dsm-before-after-image-slider-handle:before, %%order_class%% .dsm-before-after-image-slider-horizontal .dsm-before-after-image-slider-handle:after, %%order_class%% .dsm-before-after-image-slider-vertical .dsm-before-after-image-slider-handle:before, %%order_class%% .dsm-before-after-image-slider-vertical .dsm-before-after-image-slider-handle:after';
|
||||
$handle_selector = '%%order_class%% .dsm-before-after-image-slider-handle';
|
||||
$handle_arrow_up_selector = '%%order_class%% .dsm-before-after-image-slider-up-arrow';
|
||||
$handle_arrow_down_selector = '%%order_class%% .dsm-before-after-image-slider-down-arrow';
|
||||
$handle_arrow_left_selector = '%%order_class%% .dsm-before-after-image-slider-left-arrow';
|
||||
$handle_arrow_right_selector = '%%order_class%% .dsm-before-after-image-slider-right-arrow';
|
||||
|
||||
if ( 'off' === $no_overlay ) {
|
||||
// Overlay.
|
||||
$overlay_color_style = sprintf( ' background-color: %1$s;', esc_attr( $overlay_color ) );
|
||||
$overlay_color_tablet_style = '' !== $overlay_color_tablet ? sprintf( ' background-color: %1$s;', esc_attr( $overlay_color_tablet ) ) : '';
|
||||
$overlay_color_phone_style = '' !== $overlay_color_phone ? sprintf( ' background-color: %1$s;', esc_attr( $overlay_color_phone ) ) : '';
|
||||
|
||||
if ( 'rgba(0,0,0,0.5)' !== $overlay_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $overlay_selector_hover,
|
||||
'declaration' => $overlay_color_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $overlay_color_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $overlay_selector_hover,
|
||||
'declaration' => $overlay_color_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $overlay_color_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $overlay_selector_hover,
|
||||
'declaration' => $overlay_color_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Labels.
|
||||
$before_label_background_color_style = sprintf( ' background-color: %1$s;', esc_attr( $before_label_background_color ) );
|
||||
$before_label_background_color_tablet_style = '' !== $before_label_background_color_tablet ? sprintf( ' background-color: %1$s;', esc_attr( $before_label_background_color_tablet ) ) : '';
|
||||
$before_label_background_color_phone_style = '' !== $before_label_background_color_phone ? sprintf( ' background-color: %1$s;', esc_attr( $before_label_background_color_phone ) ) : '';
|
||||
|
||||
if ( 'rgba(255, 255, 255, 0.2)' !== $before_label_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $before_label_selector,
|
||||
'declaration' => $before_label_background_color_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $before_label_background_color_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $before_label_selector,
|
||||
'declaration' => $before_label_background_color_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $before_label_background_color_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $before_label_selector,
|
||||
'declaration' => $before_label_background_color_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$after_label_background_color_style = sprintf( ' background-color: %1$s;', esc_attr( $after_label_background_color ) );
|
||||
$after_label_background_color_tablet_style = '' !== $after_label_background_color_tablet ? sprintf( ' background-color: %1$s;', esc_attr( $after_label_background_color_tablet ) ) : '';
|
||||
$after_label_background_color_phone_style = '' !== $after_label_background_color_phone ? sprintf( ' background-color: %1$s;', esc_attr( $after_label_background_color_phone ) ) : '';
|
||||
|
||||
if ( 'rgba(255, 255, 255, 0.2)' !== $after_label_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $after_label_selector,
|
||||
'declaration' => $after_label_background_color_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $after_label_background_color_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $after_label_selector,
|
||||
'declaration' => $after_label_background_color_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $after_label_background_color_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $after_label_selector,
|
||||
'declaration' => $after_label_background_color_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle Slider.
|
||||
$handle_border_style = sprintf( ' border-color: %1$s;', esc_attr( $handle_border_color ) );
|
||||
$handle_border_tablet_style = '' !== $handle_border_color_tablet ? sprintf( ' border-color: %1$s;', esc_attr( $handle_border_color_tablet ) ) : '';
|
||||
$handle_border_phone_style = '' !== $handle_border_color_phone ? sprintf( ' border-color: %1$s;', esc_attr( $handle_border_color_phone ) ) : '';
|
||||
$handle_border_color_style = sprintf( ' background-color: %1$s;', esc_attr( $handle_border_color ) );
|
||||
$handle_border_color_tablet_style = '' !== $handle_border_color_tablet ? sprintf( ' background-color: %1$s;', esc_attr( $handle_border_color_tablet ) ) : '';
|
||||
$handle_border_color_phone_style = '' !== $handle_border_color_phone ? sprintf( ' background-color: %1$s;', esc_attr( $handle_border_color_phone ) ) : '';
|
||||
|
||||
if ( '#ffffff' !== $handle_border_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_border_style,
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_border_selector,
|
||||
'declaration' => $handle_border_color_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_border_color_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_border_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_border_selector,
|
||||
'declaration' => $handle_border_color_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_border_color_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_border_selector,
|
||||
'declaration' => $handle_border_color_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_border_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
$handle_border_radius_style = sprintf( ' border-radius: %1$s;', esc_attr( $handle_border_radius ) );
|
||||
$handle_border_radius_tablet_style = '' !== $handle_border_radius_tablet ? sprintf( ' border-radius: %1$s;', esc_attr( $handle_border_radius_tablet ) ) : '';
|
||||
$handle_border_radius_phone_style = '' !== $handle_border_radius_phone ? sprintf( ' border-radius: %1$s;', esc_attr( $handle_border_radius_phone ) ) : '';
|
||||
|
||||
if ( '100px' !== $handle_border_radius ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_border_radius_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_border_radius_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_border_radius_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_border_radius_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_border_radius_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Arrows.
|
||||
if ( 'vertical' === $orientation ) {
|
||||
$handle_arrow_up_style = sprintf( ' border-bottom-color: %1$s;', esc_attr( $handle_arrow_color ) );
|
||||
$handle_arrow_up_tablet_style = '' !== $handle_arrow_color_tablet ? sprintf( ' border-bottom-color: %1$s;', esc_attr( $handle_arrow_color_tablet ) ) : '';
|
||||
$handle_arrow_up_phone_style = '' !== $handle_arrow_color_phone ? sprintf( ' border-bottom-color: %1$s;', esc_attr( $handle_arrow_color_phone ) ) : '';
|
||||
$handle_arrow_down_style = sprintf( ' border-top-color: %1$s;', esc_attr( $handle_arrow_color ) );
|
||||
$handle_arrow_down_tablet_style = '' !== $handle_arrow_color_tablet ? sprintf( ' border-top-color: %1$s;', esc_attr( $handle_arrow_color_tablet ) ) : '';
|
||||
$handle_arrow_down_phone_style = '' !== $handle_arrow_color_phone ? sprintf( ' border-top-color: %1$s;', esc_attr( $handle_arrow_color_phone ) ) : '';
|
||||
|
||||
if ( '#ffffff' !== $handle_arrow_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_up_selector,
|
||||
'declaration' => $handle_arrow_up_style,
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_down_selector,
|
||||
'declaration' => $handle_arrow_down_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_arrow_color_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_up_selector,
|
||||
'declaration' => $handle_arrow_up_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_down_selector,
|
||||
'declaration' => $handle_arrow_down_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_arrow_color_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_up_selector,
|
||||
'declaration' => $handle_arrow_up_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_down_selector,
|
||||
'declaration' => $handle_arrow_down_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
$handle_arrow_left_style = sprintf( ' border-right-color: %1$s;', esc_attr( $handle_arrow_color ) );
|
||||
$handle_arrow_left_tablet_style = '' !== $handle_arrow_color_tablet ? sprintf( ' border-right-color: %1$s;', esc_attr( $handle_arrow_color_tablet ) ) : '';
|
||||
$handle_arrow_left_phone_style = '' !== $handle_arrow_color_phone ? sprintf( ' border-right-color: %1$s;', esc_attr( $handle_arrow_color_phone ) ) : '';
|
||||
$handle_arrow_right_style = sprintf( ' border-left-color: %1$s;', esc_attr( $handle_arrow_color ) );
|
||||
$handle_arrow_right_tablet_style = '' !== $handle_arrow_color_tablet ? sprintf( ' border-left-color: %1$s;', esc_attr( $handle_arrow_color_tablet ) ) : '';
|
||||
$handle_arrow_right_phone_style = '' !== $handle_arrow_color_phone ? sprintf( ' border-left-color: %1$s;', esc_attr( $handle_arrow_color_phone ) ) : '';
|
||||
|
||||
if ( '#ffffff' !== $handle_arrow_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_left_selector,
|
||||
'declaration' => $handle_arrow_left_style,
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_right_selector,
|
||||
'declaration' => $handle_arrow_right_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_arrow_color_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_left_selector,
|
||||
'declaration' => $handle_arrow_left_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_right_selector,
|
||||
'declaration' => $handle_arrow_right_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_arrow_color_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_left_selector,
|
||||
'declaration' => $handle_arrow_left_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_arrow_right_selector,
|
||||
'declaration' => $handle_arrow_right_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Handle.
|
||||
$handle_horizontal_border_style = sprintf( ' box-shadow: 0 -3px 0 %1$s, 0px 0px 12px rgba(51, 51, 51, 0.5);', esc_attr( $handle_border_color ) );
|
||||
$handle_horizontal_border_tablet_style = '' !== $handle_border_color_tablet ? sprintf( ' box-shadow: 0 -3px 0 %1$s, 0px 0px 12px rgba(51, 51, 51, 0.5);', esc_attr( $handle_border_color_tablet ) ) : '';
|
||||
$handle_horizontal_border_phone_style = '' !== $handle_border_color_phone ? sprintf( ' box-shadow: 0 -3px 0 %1$s, 0px 0px 12px rgba(51, 51, 51, 0.5);', esc_attr( $handle_border_color_phone ) ) : '';
|
||||
|
||||
if ( '#ffffff' !== $handle_border_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-before-after-image-slider-horizontal .dsm-before-after-image-slider-handle:before, %%order_class%% .dsm-before-after-image-slider-horizontal .dsm-before-after-image-slider-handle:after',
|
||||
'declaration' => $handle_horizontal_border_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_border_color_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-before-after-image-slider-horizontal .dsm-before-after-image-slider-handle:before, %%order_class%% .dsm-before-after-image-slider-horizontal .dsm-before-after-image-slider-handle:after',
|
||||
'declaration' => $handle_horizontal_border_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_border_color_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-before-after-image-slider-horizontal .dsm-before-after-image-slider-handle:before, %%order_class%% .dsm-before-after-image-slider-horizontal .dsm-before-after-image-slider-handle:after',
|
||||
'declaration' => $handle_horizontal_border_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$handle_background_style = sprintf( ' background-color: %1$s;', esc_attr( $handle_background_color ) );
|
||||
$handle_background_tablet_style = '' !== $handle_background_color_tablet ? sprintf( ' background-color: %1$s;', esc_attr( $handle_background_color_tablet ) ) : '';
|
||||
$handle_background_phone_style = '' !== $handle_background_color_phone ? sprintf( ' background-color: %1$s;', esc_attr( $handle_background_color_phone ) ) : '';
|
||||
|
||||
if ( '' !== $handle_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_background_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_background_color_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_background_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $handle_background_color_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $handle_selector,
|
||||
'declaration' => $handle_background_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'Before' !== $before_label_text ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $before_label_selector,
|
||||
'declaration' => sprintf( ' content: "%1$s";', esc_attr( $before_label_text ) ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'After' !== $after_label_text ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $after_label_selector,
|
||||
'declaration' => sprintf( ' content: "%1$s";', esc_attr( $after_label_text ) ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$before_image_html = $multi_view->render_element(
|
||||
array(
|
||||
'tag' => 'img',
|
||||
'attrs' => array(
|
||||
'class' => 'skip-lazy',
|
||||
'src' => '{{before_src}}',
|
||||
'alt' => '{{before_alt}}',
|
||||
'title' => '{{before_title_text}}',
|
||||
),
|
||||
'required' => 'before_src',
|
||||
)
|
||||
);
|
||||
|
||||
$after_image_html = $multi_view->render_element(
|
||||
array(
|
||||
'tag' => 'img',
|
||||
'attrs' => array(
|
||||
'class' => 'skip-lazy',
|
||||
'src' => '{{after_src}}',
|
||||
'alt' => '{{after_alt}}',
|
||||
'title' => '{{after_title_text}}',
|
||||
),
|
||||
'required' => 'after_src',
|
||||
)
|
||||
);
|
||||
|
||||
$output = sprintf(
|
||||
'%1$s%2$s',
|
||||
$before_image_html,
|
||||
$after_image_html
|
||||
);
|
||||
|
||||
$data_attrs[] = array(
|
||||
'offset' => $default_offset_pct,
|
||||
'orientation' => $orientation,
|
||||
'overlay' => 'off' !== $no_overlay ? true : false,
|
||||
'hover' => 'off' !== $move_slider_on_hover ? true : false,
|
||||
'handle' => 'off' !== $move_with_handle_only ? true : false,
|
||||
'click' => 'off' !== $click_to_move ? true : false,
|
||||
);
|
||||
|
||||
wp_enqueue_script( 'dsm-before-after-image' );
|
||||
|
||||
// Module classnames.
|
||||
$class = 'dsm_before_after_image_wrapper';
|
||||
if ( ! in_array( $animation_style, array( '', 'none' ) ) ) {
|
||||
$this->add_classname( 'et-waypoint' );
|
||||
}
|
||||
|
||||
// Render module content.
|
||||
$output = sprintf(
|
||||
'<div%3$s class="%2$s" data-params=%6$s>
|
||||
%5$s
|
||||
%4$s
|
||||
%1$s
|
||||
</div>',
|
||||
$output,
|
||||
esc_attr( $class ),
|
||||
$this->module_id(),
|
||||
$video_background,
|
||||
$parallax_image_background,
|
||||
wp_json_encode( $data_attrs )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Before_After_Image();
|
||||
@@ -0,0 +1,70 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{display:none;}
|
||||
.st1{display:inline;opacity:0.31;}
|
||||
.st2{display:inline;fill:#6200EE;}
|
||||
.st3{fill:#FFFFFF;}
|
||||
.st4{fill:#03DAC6;}
|
||||
.st5{fill:#FFFFFF;stroke:#221F1F;stroke-width:0.4754;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g id="Layer_1" class="st0">
|
||||
<g class="st1">
|
||||
<path d="M22.98,22.05H4.52c-1.53,0-2.77-1.24-2.77-2.77V8.34c0-1.53,1.24-2.77,2.77-2.77h18.46c1.53,0,2.77,1.24,2.77,2.77v10.95
|
||||
C25.75,20.81,24.51,22.05,22.98,22.05z M4.52,6.37c-1.09,0-1.97,0.88-1.97,1.97v10.95c0,1.09,0.88,1.97,1.97,1.97h18.46
|
||||
c1.09,0,1.97-0.88,1.97-1.97V8.34c0-1.09-0.88-1.97-1.97-1.97H4.52z"/>
|
||||
<path d="M18.72,4.68c-0.79,0-1.44-0.65-1.44-1.44c0-0.8,0.65-1.44,1.44-1.44c0.8,0,1.44,0.65,1.44,1.44
|
||||
C20.16,4.03,19.51,4.68,18.72,4.68z M18.72,2.59c-0.35,0-0.64,0.29-0.64,0.64c0,0.35,0.29,0.64,0.64,0.64
|
||||
c0.35,0,0.64-0.29,0.64-0.64C19.36,2.88,19.07,2.59,18.72,2.59z"/>
|
||||
<path d="M4.04,25.8c-0.79,0-1.44-0.65-1.44-1.44s0.65-1.44,1.44-1.44c0.8,0,1.44,0.65,1.44,1.44S4.84,25.8,4.04,25.8z M4.04,23.72
|
||||
c-0.35,0-0.64,0.29-0.64,0.64C3.4,24.71,3.69,25,4.04,25c0.35,0,0.64-0.29,0.64-0.64C4.68,24,4.4,23.72,4.04,23.72z"/>
|
||||
<g>
|
||||
<path d="M12.31,13.41c-0.04,0.13-0.06,0.26-0.06,0.4c0,0.14,0.02,0.27,0.06,0.4H2.15v-0.8H12.31z"/>
|
||||
<path d="M25.35,13.41v0.8H15.19c0.04-0.13,0.06-0.26,0.06-0.4c0-0.14-0.02-0.27-0.06-0.4H25.35z"/>
|
||||
</g>
|
||||
<path d="M13.75,15.71c-1.05,0-1.9-0.85-1.9-1.9c0-1.05,0.85-1.9,1.9-1.9c1.05,0,1.9,0.85,1.9,1.9
|
||||
C15.65,14.86,14.8,15.71,13.75,15.71z M13.75,12.71c-0.61,0-1.1,0.49-1.1,1.1c0,0.61,0.49,1.1,1.1,1.1c0.61,0,1.1-0.49,1.1-1.1
|
||||
C14.85,13.21,14.36,12.71,13.75,12.71z"/>
|
||||
<path d="M11.6,11.78c-0.13,0-0.25-0.05-0.35-0.14c-0.2-0.19-0.2-0.51-0.01-0.7l0.03-0.03l2.13-2.13c0.19-0.19,0.52-0.19,0.71,0
|
||||
l2.14,2.14c0.19,0.2,0.19,0.52-0.01,0.71c-0.2,0.19-0.5,0.19-0.69,0l-1.8-1.8l-1.79,1.79C11.87,11.72,11.75,11.77,11.6,11.78
|
||||
C11.61,11.78,11.61,11.78,11.6,11.78z M11.39,11.07C11.39,11.07,11.39,11.07,11.39,11.07L11.39,11.07z"/>
|
||||
<path d="M13.75,18.87c-0.13,0-0.26-0.05-0.35-0.14l-2.15-2.15c-0.1-0.1-0.15-0.23-0.14-0.36c0-0.13,0.06-0.26,0.15-0.35
|
||||
c0.19-0.19,0.5-0.19,0.69,0l1.8,1.8l1.79-1.79c0.09-0.09,0.21-0.14,0.34-0.15c0.13-0.01,0.26,0.05,0.35,0.14
|
||||
c0.1,0.09,0.15,0.22,0.15,0.35c0,0.13-0.05,0.26-0.14,0.35l-2.15,2.15C14.01,18.82,13.88,18.87,13.75,18.87
|
||||
C13.75,18.87,13.75,18.87,13.75,18.87z M16.11,16.44L16.11,16.44C16.11,16.44,16.11,16.44,16.11,16.44z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Layer_3" class="st0">
|
||||
<rect x="-837.59" y="-745.72" class="st2" width="1600" height="1200"/>
|
||||
</g>
|
||||
<g id="Layer_2">
|
||||
<g>
|
||||
<path class="st3" d="M22.84,21.91H5.16c-1.46,0-2.65-1.19-2.65-2.65V8.77c0-1.46,1.19-2.65,2.65-2.65h17.69
|
||||
c1.46,0,2.65,1.19,2.65,2.65v10.49C25.5,20.72,24.31,21.91,22.84,21.91z M5.16,6.88c-1.04,0-1.89,0.85-1.89,1.89v10.49
|
||||
c0,1.04,0.85,1.89,1.89,1.89h17.69c1.04,0,1.89-0.85,1.89-1.89V8.77c0-1.04-0.85-1.89-1.89-1.89H5.16z"/>
|
||||
<path class="st4" d="M18.76,5.26c-0.76,0-1.38-0.62-1.38-1.38c0-0.76,0.62-1.38,1.38-1.38c0.76,0,1.38,0.62,1.38,1.38
|
||||
C20.14,4.64,19.52,5.26,18.76,5.26z M18.76,3.26c-0.34,0-0.62,0.28-0.62,0.62c0,0.34,0.28,0.62,0.62,0.62
|
||||
c0.34,0,0.62-0.28,0.62-0.62C19.38,3.54,19.1,3.26,18.76,3.26z"/>
|
||||
<path class="st4" d="M4.7,25.5c-0.76,0-1.38-0.62-1.38-1.38c0-0.76,0.62-1.38,1.38-1.38c0.76,0,1.38,0.62,1.38,1.38
|
||||
C6.08,24.88,5.46,25.5,4.7,25.5z M4.7,23.5c-0.34,0-0.62,0.28-0.62,0.62c0,0.34,0.28,0.62,0.62,0.62c0.34,0,0.62-0.28,0.62-0.62
|
||||
C5.31,23.78,5.04,23.5,4.7,23.5z"/>
|
||||
<g>
|
||||
<path class="st3" d="M12.62,13.63c-0.04,0.12-0.05,0.25-0.05,0.38c0,0.13,0.02,0.26,0.05,0.38H2.89v-0.77H12.62z"/>
|
||||
<path class="st3" d="M25.11,13.63v0.77h-9.73c0.04-0.12,0.05-0.25,0.05-0.38c0-0.13-0.02-0.26-0.05-0.38H25.11z"/>
|
||||
</g>
|
||||
<path class="st4" d="M14,15.84c-1,0-1.82-0.82-1.82-1.82c0-1,0.82-1.82,1.82-1.82c1,0,1.82,0.82,1.82,1.82
|
||||
C15.82,15.02,15,15.84,14,15.84z M14,12.96c-0.58,0-1.05,0.47-1.05,1.05c0,0.58,0.47,1.05,1.05,1.05c0.58,0,1.05-0.47,1.05-1.05
|
||||
C15.05,13.43,14.58,12.96,14,12.96z"/>
|
||||
<path class="st4" d="M11.94,12.07c-0.12,0-0.24-0.05-0.33-0.13c-0.19-0.18-0.19-0.48-0.01-0.67l0.03-0.03l2.04-2.04
|
||||
c0.18-0.18,0.5-0.18,0.68,0l2.05,2.05c0.19,0.19,0.18,0.49-0.01,0.68c-0.19,0.18-0.48,0.18-0.66,0L14,10.21l-1.72,1.72
|
||||
C12.2,12.01,12.08,12.06,11.94,12.07C11.95,12.07,11.95,12.07,11.94,12.07z M11.74,11.38C11.74,11.39,11.74,11.39,11.74,11.38
|
||||
L11.74,11.38z"/>
|
||||
<path class="st4" d="M14,18.86c-0.12,0-0.25-0.05-0.33-0.14l-2.06-2.06c-0.09-0.1-0.14-0.22-0.14-0.34c0-0.13,0.05-0.25,0.15-0.33
|
||||
c0.18-0.18,0.48-0.18,0.66,0L14,17.71l1.72-1.72c0.08-0.09,0.2-0.14,0.33-0.14c0.13-0.01,0.25,0.05,0.34,0.13
|
||||
c0.09,0.09,0.14,0.21,0.15,0.33c0,0.13-0.05,0.25-0.13,0.34l-2.06,2.06C14.25,18.81,14.13,18.86,14,18.86
|
||||
C14,18.86,14,18.86,14,18.86z M16.26,16.53L16.26,16.53C16.26,16.53,16.26,16.53,16.26,16.53z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
@@ -0,0 +1,548 @@
|
||||
<?php
|
||||
|
||||
class DSM_Business_Hours extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_business_hours';
|
||||
public $vb_support = 'on';
|
||||
public $child_slug = 'dsm_business_hours_child';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Business Hours', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Business Days & Timings', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'separator' => array(
|
||||
'title' => esc_html__( 'Separator', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 70,
|
||||
),
|
||||
'divider' => array(
|
||||
'title' => esc_html__( 'Divider', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 70,
|
||||
),
|
||||
/*
|
||||
'image' => array(
|
||||
'title' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 69,
|
||||
),*/
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'text' => array(
|
||||
'label' => esc_html__( '', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_business_hours_child',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_header_level' => true,
|
||||
'hide_text_align' => true,
|
||||
'hide_text_shadow' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
),
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Day', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-business-hours-day',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_header_level' => true,
|
||||
'hide_text_align' => true,
|
||||
),
|
||||
'time' => array(
|
||||
'label' => esc_html__( 'Time', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-business-hours-time',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%% .dsm_business_hours_child',
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
/*
|
||||
'image' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => "%%order_class%% .dsm-business-hours-image img",
|
||||
'border_styles' => "%%order_class%% .dsm-business-hours-image img",
|
||||
)
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image',
|
||||
),*/
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
/*
|
||||
'image' => array(
|
||||
'label' => esc_html__( 'Image Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-business-hours-image img',
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),*/
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'content_orientation' => array(
|
||||
'label' => esc_html__( 'Vertical Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'flex-start' => esc_html__( 'Top', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Center', 'dsm-supreme-modules-for-divi' ),
|
||||
'flex-end' => esc_html__( 'Bottom', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'center',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
'description' => esc_html__( 'This setting determines the vertical alignment of your content. Your content can either be align to the top, vertically centered, or aligned to the bottom.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'separator_style' => array(
|
||||
'label' => esc_html__( 'Style', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'none' => esc_html__( 'None', 'dsm-supreme-modules-for-divi' ),
|
||||
'solid' => esc_html__( 'Solid', 'dsm-supreme-modules-for-divi' ),
|
||||
'dotted' => esc_html__( 'Dotted', 'dsm-supreme-modules-for-divi' ),
|
||||
'dashed' => esc_html__( 'Dashed', 'dsm-supreme-modules-for-divi' ),
|
||||
'double' => esc_html__( 'Double', 'dsm-supreme-modules-for-divi' ),
|
||||
'groove' => esc_html__( 'Groove', 'dsm-supreme-modules-for-divi' ),
|
||||
'ridge' => esc_html__( 'Ridge', 'dsm-supreme-modules-for-divi' ),
|
||||
'inset' => esc_html__( 'Inset', 'dsm-supreme-modules-for-divi' ),
|
||||
'outset' => esc_html__( 'Outset', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'none',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'separator',
|
||||
),
|
||||
'separator_weight' => array(
|
||||
'label' => esc_html__( 'Weight', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '2px',
|
||||
'default_on_front' => '2px',
|
||||
'default_unit' => 'px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '10',
|
||||
'step' => '1',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'separator',
|
||||
'show_if_not' => array(
|
||||
'separator_style' => 'none',
|
||||
),
|
||||
),
|
||||
'separator_color' => array(
|
||||
'default' => '#333',
|
||||
'label' => esc_html__( 'Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for your separator.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'separator',
|
||||
'show_if_not' => array(
|
||||
'separator_style' => 'none',
|
||||
),
|
||||
),
|
||||
'separator_gap' => array(
|
||||
'label' => esc_html__( 'Gap Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '10px',
|
||||
'default_on_front' => '10px',
|
||||
'default_unit' => 'px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '40',
|
||||
'step' => '1',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'separator',
|
||||
),
|
||||
'divider_style' => array(
|
||||
'label' => esc_html__( 'Style', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'none' => esc_html__( 'None', 'dsm-supreme-modules-for-divi' ),
|
||||
'solid' => esc_html__( 'Solid', 'dsm-supreme-modules-for-divi' ),
|
||||
'dotted' => esc_html__( 'Dotted', 'dsm-supreme-modules-for-divi' ),
|
||||
'dashed' => esc_html__( 'Dashed', 'dsm-supreme-modules-for-divi' ),
|
||||
'double' => esc_html__( 'Double', 'dsm-supreme-modules-for-divi' ),
|
||||
'groove' => esc_html__( 'Groove', 'dsm-supreme-modules-for-divi' ),
|
||||
'ridge' => esc_html__( 'Ridge', 'dsm-supreme-modules-for-divi' ),
|
||||
'inset' => esc_html__( 'Inset', 'dsm-supreme-modules-for-divi' ),
|
||||
'outset' => esc_html__( 'Outset', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'none',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'divider',
|
||||
),
|
||||
'divider_weight' => array(
|
||||
'label' => esc_html__( 'Weight', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '1px',
|
||||
'default_on_front' => '1px',
|
||||
'default_unit' => 'px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '20',
|
||||
'step' => '1',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'divider',
|
||||
'show_if_not' => array(
|
||||
'divider_style' => 'none',
|
||||
),
|
||||
),
|
||||
'divider_color' => array(
|
||||
'default' => 'rgba(0,0,0,0.12)',
|
||||
'label' => esc_html__( 'Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for your divider.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'divider',
|
||||
'show_if_not' => array(
|
||||
'divider_style' => 'none',
|
||||
),
|
||||
),
|
||||
'item_padding' => array(
|
||||
'label' => esc_html__( 'Item Padding', 'et_builder' ),
|
||||
'type' => 'custom_padding',
|
||||
'mobile_options' => true,
|
||||
'option_category' => 'layout',
|
||||
'description' => esc_html__( 'Adjust padding to specific values, or leave blank to use the default padding.', 'et_builder' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'margin_padding',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
),
|
||||
/*
|
||||
'image_max_width' => array(
|
||||
'label' => esc_html__( 'Image Width', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'depends_show_if' => 'off',
|
||||
'default' => '50%',
|
||||
'default_unit' => '%',
|
||||
'default_on_front'=> '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
'image_spacing' => array(
|
||||
'label' => esc_html__( 'Image Gap Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '25px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front'=> '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),*/
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$separator_style = $this->props['separator_style'];
|
||||
$separator_weight = $this->props['separator_weight'];
|
||||
$separator_color = $this->props['separator_color'];
|
||||
$separator_gap = $this->props['separator_gap'];
|
||||
$divider_style = $this->props['divider_style'];
|
||||
$divider_weight = $this->props['divider_weight'];
|
||||
$divider_color = $this->props['divider_color'];
|
||||
$content_orientation = $this->props['content_orientation'];
|
||||
/*
|
||||
$image_max_width = $this->props['image_max_width'];
|
||||
$image_max_width_tablet = $this->props['image_max_width_tablet'];
|
||||
$image_max_width_phone = $this->props['image_max_width_phone'];
|
||||
$image_max_width_last_edited = $this->props['image_max_width_last_edited'];
|
||||
$image_spacing = $this->props['image_spacing'];
|
||||
$image_spacing_tablet = $this->props['image_spacing_tablet'];
|
||||
$image_spacing_phone = $this->props['image_spacing_phone'];
|
||||
$image_spacing_last_edited = $this->props['image_spacing_last_edited'];
|
||||
*/
|
||||
$item_padding_hover = $this->get_hover_value( 'item_padding' );
|
||||
$item_padding = $this->props['item_padding'];
|
||||
$item_padding_tablet = $this->props['item_padding_tablet'];
|
||||
$item_padding_phone = $this->props['item_padding_phone'];
|
||||
$item_padding_last_edited = $this->props['item_padding_last_edited'];
|
||||
|
||||
/*
|
||||
if ( '' !== $image_max_width_tablet || '' !== $image_max_width_phone || '' !== $image_max_width ) {
|
||||
$image_max_width_responsive_active = et_pb_get_responsive_status( $image_max_width_last_edited );
|
||||
|
||||
$image_max_width_values = array(
|
||||
'desktop' => $image_max_width,
|
||||
'tablet' => $image_max_width_responsive_active ? $image_max_width_tablet : '',
|
||||
'phone' => $image_max_width_responsive_active ? $image_max_width_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $image_max_width_values, '%%order_class%% .dsm-business-hours-image', 'max-width', $render_slug );
|
||||
}
|
||||
|
||||
if ( '' !== $image_spacing_tablet || '' !== $image_spacing_phone || '' !== $image_spacing ) {
|
||||
$image_spacing_responsive_active = et_pb_get_responsive_status( $image_spacing_last_edited );
|
||||
|
||||
$image_spacing_values = array(
|
||||
'desktop' => $image_spacing,
|
||||
'tablet' => $image_spacing_responsive_active ? $image_spacing_tablet : '',
|
||||
'phone' => $image_spacing_responsive_active ? $image_spacing_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $image_spacing_values, '%%order_class%% .dsm-business-hours-image', 'margin-right', $render_slug );
|
||||
}*/
|
||||
|
||||
$this->apply_custom_margin_padding(
|
||||
$render_slug,
|
||||
'item_padding',
|
||||
'padding',
|
||||
'%%order_class%% .dsm_business_hours_item_wrapper'
|
||||
);
|
||||
|
||||
if ( 'none' !== $separator_style ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-business-hours-separator',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-style: %1$s;',
|
||||
esc_attr( $separator_style )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '2px' !== $separator_weight ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-business-hours-separator',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-width: %1$s;',
|
||||
esc_attr( $separator_weight )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $separator_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-business-hours-separator',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-color: %1$s;',
|
||||
esc_html( $separator_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '10px' !== $separator_gap ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-business-hours-separator',
|
||||
'declaration' => sprintf(
|
||||
'margin-left: %1$s; margin-right: %1$s;',
|
||||
esc_attr( $separator_gap )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'none' !== $divider_style ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_business_hours_child:not(:last-child)',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-style: %1$s;',
|
||||
esc_attr( $divider_style )
|
||||
),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_business_hours_child:not(:last-child)',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-width: %1$s;',
|
||||
esc_attr( $divider_weight )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $divider_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_business_hours_child:not(:last-child)',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-color: %1$s;',
|
||||
esc_html( $divider_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'center' !== $content_orientation ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_business_hours_child>div',
|
||||
'declaration' => sprintf(
|
||||
'align-items: %1$s;',
|
||||
esc_attr( $content_orientation )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'%1$s',
|
||||
et_core_sanitized_previously( $this->content )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
/*credits https://github.com/elegantthemes/create-divi-extension/issues/125#issuecomment-445442095*/
|
||||
public function apply_custom_margin_padding( $function_name, $slug, $type, $class, $important = false ) {
|
||||
$slug_value = $this->props[ $slug ];
|
||||
$slug_value_tablet = $this->props[ $slug . '_tablet' ];
|
||||
$slug_value_phone = $this->props[ $slug . '_phone' ];
|
||||
$slug_value_last_edited = $this->props[ $slug . '_last_edited' ];
|
||||
$slug_value_responsive_active = et_pb_get_responsive_status( $slug_value_last_edited );
|
||||
|
||||
if ( isset( $slug_value ) && ! empty( $slug_value ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value, $type, $important ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $slug_value_tablet ) && ! empty( $slug_value_tablet ) && $slug_value_responsive_active ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value_tablet, $type, $important ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $slug_value_phone ) && ! empty( $slug_value_phone ) && $slug_value_responsive_active ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value_phone, $type, $important ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Business_Hours;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m4.88 8.5c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.61 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m23.69 17.77c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38c.01.76-.61 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.61.62.61.62-.28.62-.62-.28-.61-.62-.61z" fill="#03dac6"/><path d="m19.34 22.26h-14.54c-1.03 0-1.88-.84-1.88-1.88v-9.38c0-1.03.84-1.88 1.88-1.88h14.54c1.03 0 1.88.84 1.88 1.88v9.38c0 1.04-.84 1.88-1.88 1.88zm-14.54-12.37c-.61 0-1.11.5-1.11 1.11v9.38c0 .61.5 1.11 1.11 1.11h14.54c.61 0 1.11-.5 1.11-1.11v-9.38c0-.61-.5-1.11-1.11-1.11z" fill="#fff"/><path d="m16.49 9.51h-.77v-1.54c0-.26-.21-.47-.47-.47h-6.36c-.26 0-.47.21-.47.47v1.53h-.77v-1.53c0-.68.55-1.24 1.24-1.24h6.37c.68 0 1.24.55 1.24 1.24v1.54z" fill="#fff"/><path d="m12.07 20.03c-2.39 0-4.34-1.95-4.34-4.34s1.95-4.34 4.34-4.34 4.34 1.95 4.34 4.34-1.95 4.34-4.34 4.34zm0-7.91c-1.97 0-3.57 1.6-3.57 3.57s1.6 3.57 3.57 3.57 3.57-1.6 3.57-3.57-1.6-3.57-3.57-3.57z" fill="#03dac6"/><path d="m14.18 16.77h-3.09v-3.16h.77v2.39h2.32z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,337 @@
|
||||
<?php
|
||||
|
||||
class DSM_Business_Hours_Child extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_business_hours_child';
|
||||
public $vb_support = 'on';
|
||||
public $type = 'child';
|
||||
public $child_title_var = 'title';
|
||||
// If the attribute defined on $this->child_title_var is empty, this attribute will be used instead
|
||||
public $child_title_fallback_var = 'subtitle';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://suprememodules.com/',
|
||||
'author' => 'Supreme Modules',
|
||||
'author_uri' => 'https://suprememodules.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Business Hours Item', 'dsm-supreme-modules-for-divi' );
|
||||
$this->advanced_setting_title_text = esc_html__( 'Business Hours Item', 'dsm-supreme-modules-for-divi' );
|
||||
$this->settings_text = esc_html__( 'Business Hours Item Settings', 'dsm-supreme-modules-for-divi' );
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'link' => esc_html__( 'Link', 'dsm-supreme-modules-for-divi' ),
|
||||
'image' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'icon_settings' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'text' => array(
|
||||
'title' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 49,
|
||||
),
|
||||
'width' => array(
|
||||
'title' => esc_html__( 'Sizing', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 65,
|
||||
),
|
||||
),
|
||||
),
|
||||
'custom_css' => array(
|
||||
'toggles' => array(
|
||||
'attributes' => array(
|
||||
'title' => esc_html__( 'Attributes', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 95,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'text' => array(
|
||||
'label' => esc_html__( '', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-business-hours-header',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_header_level' => true,
|
||||
'hide_text_align' => true,
|
||||
'hide_text_shadow' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
),
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Day', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-business-hours-day',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_header_level' => true,
|
||||
'hide_text_align' => true,
|
||||
),
|
||||
'time' => array(
|
||||
'label' => esc_html__( 'Time', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-business-hours-time',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%% .dsm_business_hours_item_wrapper',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(),
|
||||
/*
|
||||
'image' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => "%%order_class%% .dsm-business-hours-image img",
|
||||
'border_styles' => "%%order_class%% .dsm-business-hours-image img",
|
||||
)
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),*/
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(),
|
||||
/*
|
||||
'image' => array(
|
||||
'label' => esc_html__( 'Image Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-business-hours-image img',
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),*/
|
||||
),
|
||||
'button' => false,
|
||||
/*
|
||||
'filters' => array(
|
||||
'child_filters_target' => array(
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),
|
||||
),
|
||||
'icon_settings' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-business-hours-image img',
|
||||
),
|
||||
),*/
|
||||
'position_fields' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
$et_accent_color = et_builder_accent_color();
|
||||
|
||||
return array(
|
||||
'time' => array(
|
||||
'label' => esc_html__( 'Time', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'The time of the day', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
'default' => '9:00 AM - 6:00 PM',
|
||||
'default_on_front' => '9:00 AM - 6:00 PM',
|
||||
),
|
||||
'title' => array(
|
||||
'label' => esc_html__( 'Day', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'The day', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
'default' => 'Monday',
|
||||
'default_on_front' => 'Monday',
|
||||
),
|
||||
/*
|
||||
'image' => array(
|
||||
'label' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'off',
|
||||
'description' => esc_html__( 'Upload an image to display at the top of your blurb.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'image',
|
||||
),
|
||||
'alt' => array(
|
||||
'label' => esc_html__( 'Image Alt Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Define the HTML ALT text for your image here.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'off',
|
||||
'tab_slug' => 'custom_css',
|
||||
'toggle_slug' => 'attributes',
|
||||
),
|
||||
'image_max_width' => array(
|
||||
'label' => esc_html__( 'Image Width', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'depends_show_if' => 'off',
|
||||
'default' => '50%',
|
||||
'default_unit' => '%',
|
||||
'default_on_front'=> '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
'image_spacing' => array(
|
||||
'label' => esc_html__( 'Image Gap Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '25px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front'=> '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
*/
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$title = $this->props['title'];
|
||||
$time = $this->props['time'];
|
||||
/*
|
||||
$image = $this->props['image'];
|
||||
$alt = $this->props['alt'];
|
||||
$image_spacing = $this->props['image_spacing'];
|
||||
$image_spacing_tablet = $this->props['image_spacing_tablet'];
|
||||
$image_spacing_phone = $this->props['image_spacing_phone'];
|
||||
$image_spacing_last_edited = $this->props['image_spacing_last_edited'];
|
||||
$image_max_width = $this->props['image_max_width'];
|
||||
$image_max_width_tablet = $this->props['image_max_width_tablet'];
|
||||
$image_max_width_phone = $this->props['image_max_width_phone'];
|
||||
$image_max_width_last_edited = $this->props['image_max_width_last_edited'];*/
|
||||
|
||||
/*
|
||||
if ( '' !== $image_max_width_tablet || '' !== $image_max_width_phone || '' !== $image_max_width ) {
|
||||
$image_max_width_responsive_active = et_pb_get_responsive_status( $image_max_width_last_edited );
|
||||
|
||||
$image_max_width_values = array(
|
||||
'desktop' => $image_max_width,
|
||||
'tablet' => $image_max_width_responsive_active ? $image_max_width_tablet : '',
|
||||
'phone' => $image_max_width_responsive_active ? $image_max_width_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $image_max_width_values, '%%order_class%% .dsm-business-hours-image', 'max-width', $render_slug );
|
||||
}*/
|
||||
|
||||
if ( '' !== $title ) {
|
||||
$title = sprintf( '<div class="dsm-business-hours-day">%1$s</div>', $title );
|
||||
}
|
||||
|
||||
if ( '' !== $time ) {
|
||||
$time = sprintf( '<div class="dsm-business-hours-time">%1$s</div>', $time );
|
||||
}
|
||||
|
||||
/*
|
||||
$image = ( '' !== trim( $image ) ) ? sprintf(
|
||||
'<img src="%1$s" alt="%2$s" />',
|
||||
esc_url( $image ),
|
||||
esc_attr( $alt )
|
||||
//esc_attr( " et_pb_animation_{$animation}" )
|
||||
) : '';
|
||||
|
||||
// Images: Add CSS Filters and Mix Blend Mode rules (if set)
|
||||
$generate_css_image_filters = '';
|
||||
if ( $image && array_key_exists( 'icon_settings', $this->advanced_fields ) && array_key_exists( 'css', $this->advanced_fields['icon_settings'] ) ) {
|
||||
$generate_css_image_filters = $this->generate_css_filters(
|
||||
$render_slug,
|
||||
'child_',
|
||||
self::$data_utils->array_get( $this->advanced_fields['icon_settings']['css'], 'main', '%%order_class%%' )
|
||||
);
|
||||
}
|
||||
|
||||
$image = $image ? sprintf(
|
||||
'<div class="dsm-business-hours-image%2$s">%1$s</div>',
|
||||
$image,
|
||||
esc_attr( $generate_css_image_filters )
|
||||
) : '';*/
|
||||
|
||||
$video_background = $this->video_background();
|
||||
$parallax_image_background = $this->get_parallax_image_background();
|
||||
|
||||
// Render module content
|
||||
return sprintf(
|
||||
'%5$s
|
||||
%4$s
|
||||
<div class="dsm_business_hours_item_wrapper%3$s">
|
||||
<div class="dsm-business-hours-header">
|
||||
%1$s
|
||||
<div class="dsm-business-hours-separator"></div>
|
||||
%2$s
|
||||
</div>
|
||||
</div>',
|
||||
$title,
|
||||
$time,
|
||||
$this->get_text_orientation_classname(),
|
||||
$video_background,
|
||||
$parallax_image_background
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Business_Hours_Child;
|
||||
@@ -0,0 +1,565 @@
|
||||
<?php
|
||||
|
||||
class DSM_Button extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_button';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Button', 'dsm-supreme-modules-for-divi' );
|
||||
$this->plural = esc_html__( 'Supreme Buttons', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
|
||||
$this->custom_css_fields = array(
|
||||
'main_element' => array(
|
||||
'label' => esc_html__( 'Main Element', 'dsm-supreme-modules-for-divi' ),
|
||||
'no_space_before_selector' => true,
|
||||
),
|
||||
);
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'links' => esc_html__( 'Links', 'dsm-supreme-modules-for-divi' ),
|
||||
'separator' => esc_html__( 'Separator', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'alignment' => esc_html__( 'Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'text' => array(
|
||||
'title' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 49,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'separator_text' => array(
|
||||
'label' => esc_html__( 'Separator', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-button-separator-text',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => false,
|
||||
),
|
||||
'button' => array(
|
||||
'button_one' => array(
|
||||
'label' => esc_html__( 'Button One', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .et_pb_button_one.et_pb_button",
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .et_pb_button_one',
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
),
|
||||
'button_two' => array(
|
||||
'label' => esc_html__( 'Button Two', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .et_pb_button_two.et_pb_button",
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .et_pb_button_two',
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'important' => 'all',
|
||||
),
|
||||
'custom_margin' => array(
|
||||
'default' => '|||20px|false|false',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'padding' => '%%order_class%%, %%order_class%%:hover',
|
||||
'margin' => '%%order_class%%.dsm_button',
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => true,
|
||||
'options' => array(
|
||||
'background_layout' => array(
|
||||
'default_on_front' => 'light',
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
),
|
||||
),
|
||||
'text_shadow' => array(
|
||||
'default' => false,
|
||||
),
|
||||
'background' => false,
|
||||
'max_width' => false,
|
||||
'link_options' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'button_one_text' => array(
|
||||
'label' => esc_html__( 'Button #1 Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Enter the text for the Button.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'button_one_url' => array(
|
||||
'label' => esc_html__( 'Button #1 URL', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Enter the URL for the Button.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'links',
|
||||
),
|
||||
'button_one_url_new_window' => array(
|
||||
'label' => esc_html__( 'Url Opens', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'In The Same Window', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'In The New Tab', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'links',
|
||||
'description' => esc_html__( 'Here you can choose whether or not your link opens in a new window', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
'show_if_not' => array(
|
||||
'button_one_image_popup' => 'on',
|
||||
'button_one_video_popup' => 'on',
|
||||
),
|
||||
),
|
||||
'button_one_image_popup' => array(
|
||||
'label' => esc_html__( 'Open as Image Lightbox', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'links',
|
||||
'description' => esc_html__( 'Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, url options below will be ignored.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
'show_if_not' => array(
|
||||
'button_one_video_popup' => 'on',
|
||||
),
|
||||
),
|
||||
'button_one_image_src' => array(
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'hide_metadata' => true,
|
||||
'description' => esc_html__( 'Upload your desired image for Button One Image Lightbox, or type in the URL to the image you would like to display.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'links',
|
||||
'show_if' => array(
|
||||
'button_one_image_popup' => 'on',
|
||||
),
|
||||
),
|
||||
'button_one_video_popup' => array(
|
||||
'label' => esc_html__( 'Open as Video Lightbox', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'links',
|
||||
'description' => esc_html__( 'Put the Video link on the Button #1 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
'show_if_not' => array(
|
||||
'button_one_image_popup' => 'on',
|
||||
),
|
||||
),
|
||||
'button_two_text' => array(
|
||||
'label' => esc_html__( 'Button #1 Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Enter the text for the Button.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'button_two_url' => array(
|
||||
'label' => esc_html__( 'Button #1 URL', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Enter the URL for the Button.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'links',
|
||||
),
|
||||
'button_two_url_new_window' => array(
|
||||
'label' => esc_html__( 'Url Opens', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'In The Same Window', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'In The New Tab', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'links',
|
||||
'description' => esc_html__( 'Here you can choose whether or not your link opens in a new window', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
'show_if_not' => array(
|
||||
'button_two_image_popup' => 'on',
|
||||
'button_two_video_popup' => 'on',
|
||||
),
|
||||
),
|
||||
'button_two_image_popup' => array(
|
||||
'label' => esc_html__( 'Open as Image Lightbox', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'links',
|
||||
'description' => esc_html__( 'Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, url options below will be ignored.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
'show_if_not' => array(
|
||||
'button_two_video_popup' => 'on',
|
||||
),
|
||||
),
|
||||
'button_two_image_src' => array(
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'hide_metadata' => true,
|
||||
'description' => esc_html__( 'Upload your desired image for Button One Image Lightbox, or type in the URL to the image you would like to display.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'links',
|
||||
'show_if' => array(
|
||||
'button_two_image_popup' => 'on',
|
||||
),
|
||||
),
|
||||
'button_two_video_popup' => array(
|
||||
'label' => esc_html__( 'Open as Video Lightbox', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'links',
|
||||
'description' => esc_html__( 'Put the Video link on the Button #2 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
'show_if_not' => array(
|
||||
'button_two_image_popup' => 'on',
|
||||
),
|
||||
),
|
||||
'button_alignment' => array(
|
||||
'label' => esc_html__( 'Button Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text_align',
|
||||
'option_category' => 'configuration',
|
||||
'options' => et_builder_get_text_orientation_options( array( 'justified' ) ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'alignment',
|
||||
'description' => esc_html__( 'Here you can define the alignment of Button', 'dsm-supreme-modules-for-divi' ),
|
||||
'mobile_options' => true,
|
||||
),
|
||||
'separator_text' => array(
|
||||
'label' => esc_html__( 'Separator Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Input your desired seprator text, or leave blank for no separator text in between the both buttons.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'separator',
|
||||
),
|
||||
'fullwidth_separator_text_on_mobile' => array(
|
||||
'label' => esc_html__( 'Make Separator Text Fullwidth On Mobile', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'separator',
|
||||
'description' => esc_html__( 'This will make the Separator Text as fullwidth instead of inline-block.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
'show_if' => array(
|
||||
'remove_separator_text_on_mobile' => 'off',
|
||||
),
|
||||
),
|
||||
'remove_separator_text_on_mobile' => array(
|
||||
'label' => esc_html__( 'Remove Separator Text On Mobile', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'separator',
|
||||
'description' => esc_html__( 'This will remove Separator Text on mobile devices.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
),
|
||||
'separator_gap' => array(
|
||||
'label' => esc_html__( 'Separator Gap', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'mobile_options' => true,
|
||||
'toggle_slug' => 'width',
|
||||
'default_unit' => 'px',
|
||||
'default' => '10px',
|
||||
'responsive' => true,
|
||||
),
|
||||
'button_one_hover_animation' => array(
|
||||
'label' => esc_html__( 'Button Hover #1 Animation', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'dsm-none' => esc_html__( 'None', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-grow' => esc_html__( 'Grow', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-shrink' => esc_html__( 'Shrink', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-pulse' => esc_html__( 'Pulse', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-pulse-grow' => esc_html__( 'Pulse Grow', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-pulse-shrink' => esc_html__( 'Pulse Grow', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-push' => esc_html__( 'Push', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-pop' => esc_html__( 'Pop', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-bounce-in' => esc_html__( 'Bounce In', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-bounce-out' => esc_html__( 'Bounce Out', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-rotate' => esc_html__( 'Rotate', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'animation',
|
||||
'default_on_front' => 'dsm-none',
|
||||
),
|
||||
'button_two_hover_animation' => array(
|
||||
'label' => esc_html__( 'Button Hover #2 Animation', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'dsm-none' => esc_html__( 'None', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-grow' => esc_html__( 'Grow', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-shrink' => esc_html__( 'Shrink', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-pulse' => esc_html__( 'Pulse', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-pulse-grow' => esc_html__( 'Pulse Grow', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-pulse-shrink' => esc_html__( 'Pulse Grow', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-push' => esc_html__( 'Push', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-pop' => esc_html__( 'Pop', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-bounce-in' => esc_html__( 'Bounce In', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-bounce-out' => esc_html__( 'Bounce Out', 'dsm-supreme-modules-for-divi' ),
|
||||
'dsm-rotate' => esc_html__( 'Rotate', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'animation',
|
||||
'default_on_front' => 'dsm-none',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get button alignment.
|
||||
*
|
||||
* @since 3.23 Add responsive support by adding device parameter.
|
||||
*
|
||||
* @param string $device Current device name.
|
||||
* @return string Alignment value, rtl or not.
|
||||
*/
|
||||
public function get_button_alignment( $device = 'desktop' ) {
|
||||
$suffix = 'desktop' !== $device ? "_{$device}" : '';
|
||||
$text_orientation = isset( $this->props[ "button_alignment{$suffix}" ] ) ? $this->props[ "button_alignment{$suffix}" ] : '';
|
||||
|
||||
return et_pb_get_alignment( $text_orientation );
|
||||
}
|
||||
|
||||
function render( $attrs, $content = null, $render_slug ) {
|
||||
$button_one_text = $this->props['button_one_text'];
|
||||
$button_one_url = $this->props['button_one_url'];
|
||||
$button_one_video_popup = $this->props['button_one_video_popup'];
|
||||
$button_one_image_popup = $this->props['button_one_image_popup'];
|
||||
$button_one_image_src = $this->props['button_one_image_src'];
|
||||
$button_one_rel = $this->props['button_one_rel'];
|
||||
$button_two_text = $this->props['button_two_text'];
|
||||
$button_two_url = $this->props['button_two_url'];
|
||||
$button_two_video_popup = $this->props['button_two_video_popup'];
|
||||
$button_two_image_popup = $this->props['button_two_image_popup'];
|
||||
$button_two_image_src = $this->props['button_two_image_src'];
|
||||
$button_two_rel = $this->props['button_two_rel'];
|
||||
$background_layout = $this->props['background_layout'];
|
||||
$background_layout_hover = et_pb_hover_options()->get_value( 'background_layout', $this->props, 'light' );
|
||||
$background_layout_hover_enabled = et_pb_hover_options()->is_enabled( 'background_layout', $this->props );
|
||||
$background_layout_values = et_pb_responsive_options()->get_property_values( $this->props, 'background_layout' );
|
||||
$background_layout_tablet = isset( $background_layout_values['tablet'] ) ? $background_layout_values['tablet'] : '';
|
||||
$background_layout_phone = isset( $background_layout_values['phone'] ) ? $background_layout_values['phone'] : '';
|
||||
$button_one_url_new_window = $this->props['button_one_url_new_window'];
|
||||
$button_two_url_new_window = $this->props['button_two_url_new_window'];
|
||||
$custom_icon_1 = $this->props['button_one_icon'];
|
||||
$button_custom_1 = $this->props['custom_button_one'];
|
||||
$custom_icon_2 = $this->props['button_two_icon'];
|
||||
$button_custom_2 = $this->props['custom_button_two'];
|
||||
$button_alignment = $this->get_button_alignment();
|
||||
$is_button_aligment_responsive = et_pb_responsive_options()->is_responsive_enabled( $this->props, 'button_alignment' );
|
||||
$button_alignment_tablet = $is_button_aligment_responsive ? $this->get_button_alignment( 'tablet' ) : '';
|
||||
$button_alignment_phone = $is_button_aligment_responsive ? $this->get_button_alignment( 'phone' ) : '';
|
||||
$separator_text = $this->props['separator_text'];
|
||||
$separator_gap = $this->props['separator_gap'];
|
||||
$separator_gap_tablet = $this->props['separator_gap_tablet'];
|
||||
$separator_gap_phone = $this->props['separator_gap_phone'];
|
||||
$separator_gap_last_edited = $this->props['separator_gap_last_edited'];
|
||||
$button_one_hover_animation = $this->props['button_one_hover_animation'];
|
||||
$button_two_hover_animation = $this->props['button_two_hover_animation'];
|
||||
$fullwidth_separator_text_on_mobile = $this->props['fullwidth_separator_text_on_mobile'];
|
||||
$remove_separator_text_on_mobile = $this->props['remove_separator_text_on_mobile'];
|
||||
|
||||
// Button Alignment.
|
||||
$button_alignments = array();
|
||||
if ( ! empty( $button_alignment ) ) {
|
||||
array_push( $button_alignments, sprintf( 'et_pb_button_alignment_%1$s', esc_attr( $button_alignment ) ) );
|
||||
}
|
||||
|
||||
if ( ! empty( $button_alignment_tablet ) ) {
|
||||
array_push( $button_alignments, sprintf( 'et_pb_button_alignment_tablet_%1$s', esc_attr( $button_alignment_tablet ) ) );
|
||||
}
|
||||
|
||||
if ( ! empty( $button_alignment_phone ) ) {
|
||||
array_push( $button_alignments, sprintf( 'et_pb_button_alignment_phone_%1$s', esc_attr( $button_alignment_phone ) ) );
|
||||
}
|
||||
|
||||
$button_alignment_classes = join( ' ', $button_alignments );
|
||||
|
||||
$separator_gap_responsive_active = et_pb_get_responsive_status( $separator_gap_last_edited );
|
||||
|
||||
$separator_gap_values = array(
|
||||
'desktop' => $separator_gap,
|
||||
'tablet' => $separator_gap_responsive_active ? $separator_gap_tablet : '',
|
||||
'phone' => $separator_gap_responsive_active ? $separator_gap_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $separator_gap_values, '%%order_class%% .dsm-button-separator-text', 'margin-left', $render_slug );
|
||||
et_pb_generate_responsive_css( $separator_gap_values, '%%order_class%% .dsm-button-separator-text', 'margin-right', $render_slug );
|
||||
|
||||
$add_class = '';
|
||||
$add_class .= " et_pb_bg_layout_{$background_layout}";
|
||||
if ( ! empty( $background_layout_tablet ) ) {
|
||||
$add_class .= " et_pb_bg_layout_{$background_layout_tablet}_tablet";
|
||||
}
|
||||
if ( ! empty( $background_layout_phone ) ) {
|
||||
$add_class .= " et_pb_bg_layout_{$background_layout_phone}_phone";
|
||||
}
|
||||
|
||||
$button_output = '';
|
||||
|
||||
if ( '' !== $button_one_text ) {
|
||||
$button_output .= sprintf(
|
||||
'<a class="et_pb_button et_pb_button_one%5$s%8$s%9$s%10$s %7$s" %6$s href="%1$s"%3$s%4$s>%2$s</a>',
|
||||
'off' !== $button_one_image_popup ? esc_url( $button_one_image_src ) : esc_url( $button_one_url ),
|
||||
esc_html( $button_one_text ),
|
||||
( 'on' === $button_one_url_new_window ? ' target="_blank"' : '' ),
|
||||
'' !== $custom_icon_1 && 'on' === $button_custom_1 ? sprintf(
|
||||
' data-icon="%1$s"',
|
||||
esc_attr( et_pb_process_font_icon( $custom_icon_1 ) )
|
||||
) : '',
|
||||
'' !== $custom_icon_1 && 'on' === $button_custom_1 ? ' et_pb_custom_button_icon' : '',
|
||||
$this->get_rel_attributes( $button_one_rel ),
|
||||
esc_attr( $button_one_hover_animation ),
|
||||
'off' !== $button_one_video_popup ? ' dsm-video-lightbox' : '',
|
||||
'off' !== $button_one_image_popup ? ' dsm-image-lightbox' : '',
|
||||
$add_class
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $separator_text ) {
|
||||
$button_output .= '<span class="dsm-button-separator-text">' . $separator_text . '</span>';
|
||||
}
|
||||
|
||||
if ( '' !== $button_two_text ) {
|
||||
$button_output .= sprintf(
|
||||
'<a class="et_pb_button et_pb_button_two%5$s%8$s%9$s%10$s %7$s" %6$s href="%1$s"%3$s%4$s>%2$s</a>',
|
||||
'off' !== $button_two_image_popup ? esc_url( $button_two_image_src ) : esc_url( $button_two_url ),
|
||||
esc_html( $button_two_text ),
|
||||
( 'on' === $button_two_url_new_window ? ' target="_blank"' : '' ),
|
||||
'' !== $custom_icon_2 && 'on' === $button_custom_2 ? sprintf(
|
||||
' data-icon="%1$s"',
|
||||
esc_attr( et_pb_process_font_icon( $custom_icon_2 ) )
|
||||
) : '',
|
||||
'' !== $custom_icon_2 && 'on' === $button_custom_2 ? ' et_pb_custom_button_icon' : '',
|
||||
$this->get_rel_attributes( $button_two_rel ),
|
||||
esc_attr( $button_two_hover_animation ),
|
||||
'off' !== $button_two_video_popup ? ' dsm-video-lightbox' : '',
|
||||
'off' !== $button_two_image_popup ? ' dsm-image-lightbox' : '',
|
||||
$add_class
|
||||
);
|
||||
}
|
||||
|
||||
$data_background_layout = '';
|
||||
$data_background_layout_hover = '';
|
||||
if ( $background_layout_hover_enabled ) {
|
||||
$data_background_layout = sprintf(
|
||||
' data-background-layout="%1$s"',
|
||||
esc_attr( $background_layout )
|
||||
);
|
||||
$data_background_layout_hover = sprintf(
|
||||
' data-background-layout-hover="%1$s"',
|
||||
esc_attr( $background_layout_hover )
|
||||
);
|
||||
}
|
||||
|
||||
$this->add_classname( "et_pb_bg_layout_{$background_layout}" );
|
||||
if ( ! empty( $background_layout_tablet ) ) {
|
||||
$this->add_classname( "et_pb_bg_layout_{$background_layout_tablet}_tablet" );
|
||||
}
|
||||
if ( ! empty( $background_layout_phone ) ) {
|
||||
$this->add_classname( "et_pb_bg_layout_{$background_layout_phone}_phone" );
|
||||
}
|
||||
|
||||
if ( 'on' === $button_one_image_popup || 'on' === $button_two_image_popup ) {
|
||||
if ( ! wp_script_is( 'magnific-popup', 'enqueued' ) ) {
|
||||
wp_enqueue_script( 'magnific-popup' );
|
||||
}
|
||||
}
|
||||
|
||||
if ( 'on' === $button_one_video_popup || 'on' === $button_two_video_popup ) {
|
||||
if ( ! wp_script_is( 'magnific-popup', 'enqueued' ) ) {
|
||||
wp_enqueue_script( 'magnific-popup' );
|
||||
}
|
||||
}
|
||||
|
||||
$output = sprintf(
|
||||
'<div class="et_pb_button_module_wrapper dsm_button_%3$s_wrapper %2$s%4$s%5$s%8$s"%6$s%7$s>
|
||||
%1$s
|
||||
</div>',
|
||||
$button_output,
|
||||
esc_attr( $button_alignment_classes ),
|
||||
$this->render_count(),
|
||||
( 'off' !== $remove_separator_text_on_mobile ? ' dsm-button-separator-remove' : '' ),
|
||||
( 'off' !== $fullwidth_separator_text_on_mobile ? ' dsm-button-separator-fullwidth' : '' ),
|
||||
et_core_esc_previously( $data_background_layout ),
|
||||
et_core_esc_previously( $data_background_layout_hover ),
|
||||
( '' !== $separator_text ? ' dsm-button-seperator' : '' )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Button();
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m5.97 21.2c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m18.78 11.42c-1.27 0-2.31-1.04-2.31-2.31s1.04-2.31 2.31-2.31 2.31 1.04 2.31 2.31-1.03 2.31-2.31 2.31zm0-3.85c-.85 0-1.54.69-1.54 1.54s.69 1.54 1.54 1.54 1.54-.69 1.54-1.54c.01-.85-.68-1.54-1.54-1.54z" fill="#03dac6"/><path d="m21.79 17.3h-14.58c-.89 0-1.62-.73-1.62-1.62v-1.41c0-.89.73-1.62 1.62-1.62h14.59c.89 0 1.62.73 1.62 1.62v1.41c-.01.9-.73 1.62-1.63 1.62zm-14.58-3.87c-.47 0-.85.38-.85.85v1.41c0 .47.38.85.85.85h14.59c.47 0 .85-.38.85-.85v-1.41c0-.47-.38-.85-.85-.85z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 787 B |
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m24.79 23.93h-17.93c-1.48 0-2.68-1.2-2.68-2.68v-10.63c0-1.48 1.2-2.68 2.68-2.68h17.92c1.48 0 2.68 1.2 2.68 2.68v10.63c.01 1.48-1.19 2.68-2.67 2.68zm-17.93-15.23c-1.06 0-1.92.86-1.92 1.92v10.63c0 1.06.86 1.92 1.92 1.92h17.92c1.06 0 1.92-.86 1.92-1.92v-10.63c0-1.06-.86-1.92-1.92-1.92z" fill="#fff"/><path d="m7.84 11.17h6.41v1.53h-6.41z" fill="#03dac6"/><g fill="#fff"><path d="m17.41 11.17h6.41v1.53h-6.41z"/><path d="m7.84 16.9c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62c-.01-.34-.28-.62-.62-.62z"/><path d="m7.84 21.14c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62c-.01-.34-.28-.62-.62-.62z"/></g><path d="m21.42 6.83c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62c-.01-.34-.28-.62-.62-.62z" fill="#03dac6"/><path d="m1.91 20.14c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62c0-.35-.28-.62-.62-.62z" fill="#03dac6"/><path d="m10.56 15.13h14.06v.77h-14.06z" fill="#fff"/><path d="m10.56 19.38h14.06v.77h-14.06z" fill="#03dac6"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,110 @@
|
||||
<?php
|
||||
$is_multiple = null;
|
||||
if( !empty( $field['config']['multi_upload'] ) ){
|
||||
$is_multiple .= ' multiple="multiple"';
|
||||
}
|
||||
|
||||
|
||||
$uniqu_code = Caldera_Forms_Field_Util::generate_file_field_unique_id($field,$form);
|
||||
|
||||
|
||||
$required_check = '';
|
||||
if( $field_required !== null ){
|
||||
$required_check = 'required="required"';
|
||||
$field_required = null;
|
||||
$is_multiple .= ' data-required="true"';
|
||||
|
||||
}
|
||||
if( empty( $field['config']['multi_upload_text'] ) ){
|
||||
$field['config']['multi_upload_text'] = __( 'Add File', 'caldera-forms' );
|
||||
if( !empty( $field['config']['multi_upload'] ) ){
|
||||
$field['config']['multi_upload_text'] = __( 'Add Files', 'caldera-forms' );
|
||||
}
|
||||
}
|
||||
|
||||
//Set allowed types
|
||||
$accept_tag = array();
|
||||
if( !empty( $field['config']['allowed'] ) ){
|
||||
$allowed = array_map('trim', explode(',', trim( $field['config']['allowed'] ) ) );
|
||||
$field['config']['allowed'] = array();
|
||||
foreach( $allowed as $ext ){
|
||||
$ext = trim( $ext, '.' );
|
||||
$file_type = wp_check_filetype( 'tmp.'. $ext );
|
||||
$field['config']['allowed'][] = $file_type['type'];
|
||||
$field['config']['allowed'][] = $file_type['ext'];
|
||||
$accept_tag[] = '.' . $ext;
|
||||
}
|
||||
}else{
|
||||
$allowed = get_allowed_mime_types();
|
||||
$field['config']['allowed'] = array();
|
||||
foreach( $allowed as $ext=>$mime ){
|
||||
$field['config']['allowed'][] = $mime;
|
||||
$accept_tag[] = '.' . str_replace('|', ',.', $ext );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//Fix allowed types
|
||||
// @see https://github.com/CalderaWP/Caldera-Forms/issues/2471
|
||||
if ( ! empty( $field['config']['allowed'] )) {
|
||||
if (in_array('audio/mpeg', $field['config']['allowed'])) {
|
||||
$field['config']['allowed'][] = 'audio/mp3';
|
||||
}
|
||||
$field['config']['allowed'] = array_unique($field['config']['allowed']);
|
||||
}
|
||||
|
||||
if (! empty( $accept_tag)) {
|
||||
$accept_tag = array_unique($accept_tag);
|
||||
}
|
||||
|
||||
$accept_tag = 'accept="' . esc_attr( implode(',', $accept_tag) ) . '"';
|
||||
|
||||
$field['config']['max_size'] = wp_max_upload_size();
|
||||
|
||||
$field['config']['notices'] = array(
|
||||
'file_exceeds_size_limit' => esc_html__( 'File exceeds the maximum upload size for this site.', 'caldera-forms' ),
|
||||
'zero_byte_file' => esc_html__( 'This file is empty. Please try another.', 'caldera-forms' ),
|
||||
'invalid_filetype' => esc_html__( 'This file type is not allowed. Please try another.', 'caldera-forms' ),
|
||||
);
|
||||
|
||||
?><?php echo $wrapper_before; ?>
|
||||
<?php echo $field_label; ?>
|
||||
<?php echo $field_before; ?>
|
||||
<div
|
||||
id="<?php echo esc_attr($field_id); ?>_file_list"
|
||||
data-id="<?php echo esc_attr($field_id); ?>"
|
||||
data-field="<?php echo esc_attr($field_base_id); ?>"
|
||||
class="cf-multi-uploader-list"
|
||||
></div>
|
||||
|
||||
<button
|
||||
id="<?php echo esc_attr($field_id); ?>_trigger"
|
||||
type="button"
|
||||
class="btn btn-block cf-uploader-trigger dsm-cf-advanced-button et_pb_button"
|
||||
data-parent="<?php echo esc_attr($field_id); ?>"
|
||||
><?php echo esc_html($field['config']['multi_upload_text']); ?></button>
|
||||
|
||||
<input
|
||||
style="display:none;" <?php echo $accept_tag; ?>
|
||||
class="cf-multi-uploader"
|
||||
data-config="<?php echo esc_attr(json_encode($field['config'])); ?>"
|
||||
data-controlid="<?php echo esc_attr($uniqu_code); ?>" <?php echo $field_placeholder; ?> <?php echo $is_multiple; ?>
|
||||
type="file"
|
||||
data-field="<?php echo esc_attr($field_base_id); ?>"
|
||||
id="<?php echo esc_attr($field_id); ?>"
|
||||
name="<?php echo esc_attr($field_name); ?>" <?php echo $field_required; ?>>
|
||||
<input
|
||||
style="display:none;"
|
||||
type="text"
|
||||
id="<?php echo esc_attr($field_id); ?>_validator"
|
||||
data-field="<?php echo esc_attr($field_base_id); ?>"
|
||||
data-parsley-file-type="true" <?php echo $required_check;
|
||||
if ($required_check) : echo 'data-required="true"'; endif; ?> >
|
||||
<input
|
||||
type="hidden"
|
||||
name="<?php echo esc_attr($field_name); ?>"
|
||||
value="<?php echo esc_attr($uniqu_code); ?>"
|
||||
>
|
||||
<?php echo $field_caption; ?>
|
||||
<?php echo $field_after; ?>
|
||||
<?php echo $wrapper_after; ?>
|
||||
@@ -0,0 +1,82 @@
|
||||
<?php
|
||||
|
||||
$btnType = $field['config']['type'];
|
||||
$btn_action = null;
|
||||
|
||||
$attrs = array(
|
||||
'class' => $field[ 'config' ][ 'class' ],
|
||||
'type' => $btnType,
|
||||
'name' => $field_name,
|
||||
'id' => $field_id,
|
||||
'value' => $field[ 'label' ],
|
||||
'data-field' => $field_base_id,
|
||||
);
|
||||
|
||||
|
||||
|
||||
if($field['config']['type'] == 'next' || $field['config']['type'] == 'prev'){
|
||||
$btnType = 'button';
|
||||
$attrs[ 'data-page' ] = $field['config']['type'];
|
||||
$field[ 'config' ][ 'class' ] = $field[ 'config' ][ 'class' ] . ' cf-page-btn cf-page-btn-' . $field[ 'config' ][ 'type' ];
|
||||
}elseif( 'button' == $field['config']['type' ] ){
|
||||
$btnType = 'button';
|
||||
if( !empty( $field['config']['target'] ) ){
|
||||
$field['config']['class'] .= ' cf-form-trigger';
|
||||
$attrs[ 'data-target' ] = esc_attr( $field['config']['target'] );
|
||||
}
|
||||
|
||||
}elseif( 'reset' == $field['config']['type'] ){
|
||||
$btnType = 'reset';
|
||||
}else{
|
||||
$btnType = 'submit';
|
||||
}
|
||||
|
||||
if ( ! empty( $field[ 'config' ][ 'class' ] ) ) {
|
||||
//add css
|
||||
$attrs[ 'class' ] = $field[ 'config' ][ 'class' ] . ' et_pb_button dsm-cf-submit-button';
|
||||
}
|
||||
|
||||
$attrs[ 'type' ] = $btnType;
|
||||
//get btn value
|
||||
$dsm_btn_value = $attrs[ 'value' ];
|
||||
|
||||
$attr_string_button = caldera_forms_field_attributes( $attrs, $field, $form );
|
||||
|
||||
$attrs = array(
|
||||
'class' => 'button_trigger_' . Caldera_Forms_Render_Util::get_current_form_count(),
|
||||
'type' => 'hidden',
|
||||
'name' => $field_name,
|
||||
'id' => $field_id . '_btn',
|
||||
'value' => $field_value,
|
||||
'data-field' => $field_base_id,
|
||||
);
|
||||
$attr_string_hidden_field = caldera_forms_implode_field_attributes( caldera_forms_escape_field_attributes_array( $attrs ) );
|
||||
|
||||
?>
|
||||
<?php echo $wrapper_before; ?>
|
||||
<?php if ( ! empty( $field[ 'config' ][ 'label_space' ] ) ) { ?>
|
||||
<label class="control-label"> </label>
|
||||
<?php } ?>
|
||||
|
||||
<?php /* echo $field_before; */ ?>
|
||||
<div class="et_pb_button_module_wrapper">
|
||||
<button <?php echo $attr_string_button . ' ' . $field_structure[ 'aria' ]; ?>><?php echo $dsm_btn_value; ?></button>
|
||||
</div>
|
||||
<?php /* echo $field_after; */ ?>
|
||||
<?php echo $wrapper_after; ?>
|
||||
<input <?php echo $attr_string_hidden_field; ?> />
|
||||
<?php
|
||||
ob_start();
|
||||
?>
|
||||
<script>
|
||||
window.addEventListener("load", function(){
|
||||
|
||||
jQuery(document).on('click dblclick', '#<?php echo $field_id; ?>', function( e ){
|
||||
jQuery('#<?php echo $field_id; ?>_btn').val( e.type ).trigger('change');
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
$script_template = ob_get_clean();
|
||||
Caldera_Forms_Render_Util::add_inline_data( $script_template, $form );
|
||||
@@ -0,0 +1,58 @@
|
||||
<?php echo $wrapper_before; ?>
|
||||
<?php echo $field_label; ?>
|
||||
<?php echo $field_before; ?>
|
||||
<?php
|
||||
|
||||
$req_class = '';
|
||||
$parsley_req = '';
|
||||
if( !empty( $field['required'] ) ){
|
||||
$req_class = ' option-required';
|
||||
$parsley_req = 'data-parsley-required="true" data-parsley-group="' . esc_attr( $field_id ) . '" data-parsley-multiple="' . esc_attr( $field_id ). '"';
|
||||
}
|
||||
|
||||
$field_value = Caldera_Forms_Field_Util::find_select_field_value( $field, $field_value );
|
||||
|
||||
|
||||
if ( ! empty( $field[ 'config' ][ 'option' ] ) ) {
|
||||
|
||||
|
||||
foreach($field['config']['option'] as $option_key=>$option){
|
||||
if(!isset($option['value'])){
|
||||
$option['value'] = $option['label'];
|
||||
}
|
||||
if( ! empty( $option['disabled'] ) ) {
|
||||
$disabled[$option_key] = true;
|
||||
}
|
||||
?>
|
||||
<?php if(empty($field['config']['inline'])){ ?>
|
||||
<div class="checkbox">
|
||||
<?php } ?>
|
||||
|
||||
<label data-label class="dsm-checkbox<?php if (!empty($field['config']['inline'])) { ?> checkbox-inline<?php } ?>"
|
||||
for="<?php echo esc_attr($field_id . '_' . $option_key); ?>"
|
||||
>
|
||||
<input
|
||||
<?php echo $parsley_req; ?>
|
||||
type="checkbox"
|
||||
data-label="<?php echo esc_attr($option['label']); ?>"
|
||||
data-field="<?php echo esc_attr($field_base_id); ?>"
|
||||
id="<?php echo esc_attr(Caldera_Forms_Field_Util::opt_id_attr($field_id, $option_key)); ?>"
|
||||
class="<?php echo $field_id . $req_class; ?>"
|
||||
name="<?php echo esc_attr($field_name); ?>[<?php echo esc_attr($option_key); ?>]"
|
||||
value="<?php echo esc_attr($option['value']); ?>"
|
||||
<?php if (Caldera_Forms_Field_Util::is_checked_option($option['value'], (array)$field_value)){ ?>checked="checked"<?php } ?>
|
||||
data-type="checkbox"
|
||||
data-checkbox-field="<?php echo esc_attr($field_id); ?>"
|
||||
<?php if ( isset( $disabled[$option_key] ) && $disabled[$option_key] === true ) { ?>disabled<?php } ?>
|
||||
data-calc-value="<?php echo esc_attr(Caldera_Forms_Field_Util::get_option_calculation_value($option, $field, $form)); ?>"
|
||||
>
|
||||
<span class="dsm-cf-checkbox"></span><?php echo $option['label']; ?></label>
|
||||
<?php if(empty($field['config']['inline'])){ ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<?php
|
||||
}
|
||||
} ?>
|
||||
<?php echo $field_caption; ?>
|
||||
<?php echo $field_after; ?>
|
||||
<?php echo $wrapper_after; ?>
|
||||
@@ -0,0 +1,69 @@
|
||||
<?php
|
||||
echo $wrapper_before;
|
||||
if ( isset( $field[ 'slug' ] ) && isset( $_GET[ $field[ 'slug' ] ] ) ) {
|
||||
$field_value = Caldera_Forms_Sanitize::sanitize( $_GET[ $field[ 'slug' ] ] );
|
||||
}
|
||||
|
||||
$attrs = array(
|
||||
'name' => $field_name,
|
||||
'value' => $field_value,
|
||||
'data-field' => $field_base_id,
|
||||
//add class
|
||||
'class' => $field_class . ' et_pb_contact_select input',
|
||||
'id' => $field_id,
|
||||
);
|
||||
$attr_string = caldera_forms_field_attributes( $attrs, $field, $form );
|
||||
|
||||
?>
|
||||
<?php echo $field_label; ?>
|
||||
<?php echo $field_before; ?>
|
||||
<div class="dsm-caldera-forms-select">
|
||||
<select <?php echo $attr_string . ' ' . $field_required . ' ' . $field_structure['aria']; ?> >
|
||||
<?php
|
||||
|
||||
$field_value = Caldera_Forms_Field_Util::find_select_field_value( $field, $field_value );
|
||||
$showed_empty = false;
|
||||
if( ! empty( $field['config']['placeholder'] ) ){
|
||||
$showed_empty = true;
|
||||
$sel = '';
|
||||
if( empty( $field_value ) ){
|
||||
$sel = 'selected';
|
||||
}
|
||||
$placeholder = Caldera_Forms::do_magic_tags( $field['config']['placeholder'] );
|
||||
|
||||
echo '<option value="" disabled ' . $sel . '>' . $placeholder . '</option>';
|
||||
}
|
||||
|
||||
if ( ! empty( $field[ 'config' ][ 'option' ] ) ) {
|
||||
if ( ( empty( $field_value ) && ! $showed_empty ) && 0 !== $field_value ) {
|
||||
echo "<option value=\"\"></option>\r\n";
|
||||
}
|
||||
|
||||
|
||||
foreach ( $field[ 'config' ][ 'option' ] as $option_key => $option ) {
|
||||
if ( ! isset( $option[ 'value' ] ) ) {
|
||||
$option[ 'value' ] = $option[ 'label' ];
|
||||
}
|
||||
if ( ! empty( $option['disabled'] ) ) {
|
||||
$disabled[$option_key] = true;
|
||||
}
|
||||
|
||||
?>
|
||||
<option value="<?php echo esc_attr( $option[ 'value' ] ); ?>" <?php if ( $field_value == $option[ 'value' ] ){ ?>selected="selected"<?php } ?> data-calc-value="<?php echo esc_attr( Caldera_Forms_Field_Util::get_option_calculation_value( $option, $field, $form ) ); ?>" <?php if ( isset( $disabled[$option_key] ) && $disabled[$option_key] === true ) { ?>disabled<?php } ?>>
|
||||
<?php echo esc_html( $option[ 'label' ] ); ?>
|
||||
</option>
|
||||
<?php
|
||||
}
|
||||
}else{
|
||||
if( ! $showed_empty ) {
|
||||
echo "<option value=\"\"></option>\r\n";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
</select>
|
||||
</div>
|
||||
<?php echo $field_caption; ?>
|
||||
<?php echo $field_after; ?>
|
||||
<?php echo $wrapper_after; ?>
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
$html_template = '';
|
||||
// magics!
|
||||
$syncer = Caldera_Forms_Sync_Factory::get_object( $form, $field, Caldera_Forms_Field_Util::get_base_id( $field, null, $form )
|
||||
);
|
||||
$sync = $syncer->can_sync();
|
||||
$forbidden_tags = array( 'form', 'iframe', 'script' );
|
||||
|
||||
if( $sync ){
|
||||
$default = $syncer->get_default();
|
||||
echo '<div id="'. esc_attr( $syncer->content_id() ) . '" data-field="' . esc_attr( $field_id ) . '" class="dsm-cf-html ' . esc_attr( $field['config']['custom_class'] ) . '"></div>';
|
||||
|
||||
// create template block
|
||||
ob_start();
|
||||
echo '<script type="text/html" id="'. esc_attr( $syncer->template_id() ) . '">';
|
||||
echo do_shortcode( Caldera_Forms::do_magic_tags( wpautop( $syncer->get_default() ) ) );
|
||||
echo '</script>';
|
||||
|
||||
$script_template = ob_get_clean();
|
||||
Caldera_Forms_Render_Util::add_inline_data( $script_template, $form );
|
||||
|
||||
}else{
|
||||
$html_template = $field[ 'config' ][ 'default' ];
|
||||
$content = do_shortcode( Caldera_Forms::do_magic_tags( wpautop( $html_template ) ) );
|
||||
echo '<div class="dsm-cf-html ' . esc_attr( $field['config']['custom_class'] ) . '">' . $content . '</div>';
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<?php echo $wrapper_before; ?>
|
||||
<?php echo $field_label; ?>
|
||||
<?php echo $field_before; ?>
|
||||
<?php
|
||||
|
||||
$req_class = '';
|
||||
if( !empty( $field['required'] ) ){
|
||||
$req_class = ' option-required';
|
||||
}
|
||||
|
||||
|
||||
$field_value = Caldera_Forms_Field_Util::find_select_field_value( $field, $field_value );
|
||||
|
||||
|
||||
if(empty($field['config']['option'])){
|
||||
?>
|
||||
|
||||
<input type="radio" id="<?php echo esc_attr( $field_id ); ?>" data-field="<?php echo esc_attr( $field_base_id ); ?>" class="field-config<?php echo $req_class; ?>" name="<?php echo esc_attr( $field_name ); ?>" value="1" <?php if(!empty($field_value)){ ?>checked="checked"<?php } ?> data-radio-field="<?php echo esc_attr( $field_id ); ?> data-type="radio" data-calc-value="<?php echo esc_attr( Caldera_Forms_Field_Util::get_option_calculation_value( $option, $field, $form ) ); ?>" />
|
||||
|
||||
<?php }else{
|
||||
foreach($field['config']['option'] as $option_key=>$option){
|
||||
$checked = false;
|
||||
$disabled = false;
|
||||
if( $field_value === $option['value'] ) {
|
||||
$checked = true;
|
||||
}
|
||||
|
||||
if(!isset($option['value'])){
|
||||
$option['value'] = $option['label'];
|
||||
}
|
||||
|
||||
if( ! empty( $option['disabled' ] ) ){
|
||||
$disabled = true;
|
||||
}
|
||||
|
||||
?>
|
||||
<?php if(empty($field['config']['inline'])){ ?>
|
||||
<div class="radio">
|
||||
<?php } ?>
|
||||
<label class="dsm-radio<?php if(!empty($field['config']['inline'])){ ?> radio-inline<?php } ?>" data-label="<?php echo esc_attr( $option['label'] ); ?>" for="<?php echo esc_attr( $field_id . '_' . $option_key ); ?>"><input type="radio" id="<?php echo esc_attr( Caldera_Forms_Field_Util::opt_id_attr( $field_id, $option_key ) ); ?>" data-field="<?php echo esc_attr( $field_base_id ); ?>" class="<?php echo esc_attr( $field_id . $req_class ); ?>" name="<?php echo esc_attr( $field_name ); ?>" value="<?php echo esc_attr( $option['value'] ); ?>" <?php if( $checked ){ ?>checked="checked"<?php } ?> <?php if( $disabled ){ ?>disabled<?php } ?> <?php echo $field_required; ?> data-radio-field="<?php echo esc_attr( $field_id ); ?>" data-type="radio" data-calc-value="<?php echo esc_attr( Caldera_Forms_Field_Util::get_option_calculation_value( $option, $field, $form ) ); ?>" />
|
||||
<span class="dsm-cf-radio"></span><?php echo $option['label']; ?></label>
|
||||
<?php if(empty($field['config']['inline'])){ ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<?php
|
||||
}
|
||||
} ?>
|
||||
<?php echo $field_caption; ?>
|
||||
<?php echo $field_after; ?>
|
||||
<?php echo $wrapper_after; ?>
|
||||
@@ -0,0 +1,609 @@
|
||||
<?php
|
||||
|
||||
class DSM_ContactForm7 extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_contact_form_7';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Contact Form 7', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Contact Form 7', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'cf7_labels' => esc_html__( 'Labels', 'dsm-supreme-modules-for-divi' ),
|
||||
'cf7_field' => esc_html__( 'Input, Textarea & Select', 'dsm-supreme-modules-for-divi' ),
|
||||
'cf7_placeholder' => esc_html__( 'Placeholder', 'dsm-supreme-modules-for-divi' ),
|
||||
'cf7_radio_checkbox' => esc_html__( 'Radio & Checkbox', 'dsm-supreme-modules-for-divi' ),
|
||||
'cf7_file' => esc_html__( 'File', 'dsm-supreme-modules-for-divi' ),
|
||||
'cf7_error' => esc_html__( 'Error Messages', 'dsm-supreme-modules-for-divi' ),
|
||||
'cf7_validation_errors' => esc_html__( 'Validation Error', 'dsm-supreme-modules-for-divi' ),
|
||||
'cf7_validation_success' => esc_html__( 'Validation Success', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'text' => false,
|
||||
'fonts' => array(
|
||||
'labels' => array(
|
||||
'label' => esc_html__( 'Labels', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7-form label',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_labels',
|
||||
),
|
||||
'input_textarea_select' => array(
|
||||
'label' => esc_html__( 'Input, Textarea & Select', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-text, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-tel, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-url, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-quiz, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-number, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-textarea, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-select, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-date',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_field',
|
||||
),
|
||||
'placeholder' => array(
|
||||
'label' => esc_html__( 'Placeholder', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7-form-control.wpcf7-text::placeholder, %%order_class%% .wpcf7-form-control.wpcf7-textarea::placeholder',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_placeholder',
|
||||
),
|
||||
'radio_checkbox' => array(
|
||||
'label' => esc_html__( 'Radio & Checkbox', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7-list-item-label',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_radio_checkbox',
|
||||
),
|
||||
'file' => array(
|
||||
'label' => esc_html__( 'File', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7-form-control.wpcf7-file',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '11px',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_line_height' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_file',
|
||||
),
|
||||
'error_msg' => array(
|
||||
'label' => esc_html__( 'Error Messages', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7-not-valid-tip',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_error',
|
||||
),
|
||||
'error_validation' => array(
|
||||
'label' => esc_html__( 'Validation Error', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7 form.invalid .wpcf7-response-output, %%order_class%% .wpcf7 form.unaccepted .wpcf7-response-output',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_validation_errors',
|
||||
),
|
||||
'success_validation' => array(
|
||||
'label' => esc_html__( 'Validation Success', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7 form.sent .wpcf7-response-output',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_validation_success',
|
||||
),
|
||||
),
|
||||
'background' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
'options' => array(
|
||||
'parallax_method' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'max_width' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(),
|
||||
'image' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-text, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-tel, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-url, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-quiz, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-number, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-textarea, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-select, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-date',
|
||||
'border_styles' => '%%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-text, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-tel, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-url, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-quiz, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-number, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-textarea, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-select, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-date',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Field', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_field',
|
||||
'depends_show_if' => 'off',
|
||||
),
|
||||
'error_msg' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .wpcf7-not-valid-tip',
|
||||
'border_styles' => '%%order_class%% .wpcf7-not-valid-tip',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Validation Errors', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_error',
|
||||
'depends_show_if' => 'off',
|
||||
),
|
||||
'error_validation' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .wpcf7 form.invalid .wpcf7-response-output, %%order_class%% .wpcf7 form.unaccepted .wpcf7-response-output, %%order_class%% .wpcf7 form .wpcf7-response-output.wpcf7-validation-errors',
|
||||
'border_styles' => '%%order_class%% .wpcf7 form.invalid .wpcf7-response-output, %%order_class%% .wpcf7 form.unaccepted .wpcf7-response-output, %%order_class%% .wpcf7 form .wpcf7-response-output.wpcf7-validation-errors',
|
||||
),
|
||||
),
|
||||
'defaults' => array(
|
||||
'border_styles' => array(
|
||||
'width' => '2px',
|
||||
'color' => '#ffb900',
|
||||
'style' => 'solid',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Validation Errors', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_validation_errors',
|
||||
'depends_show_if' => 'off',
|
||||
),
|
||||
'validation_success' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .wpcf7 form.sent .wpcf7-response-output, %%order_class%% .wpcf7 form .wpcf7-response-output.wpcf7-mail-sent-ok',
|
||||
'border_styles' => '%%order_class%% .wpcf7 form.sent .wpcf7-response-output, %%order_class%% .wpcf7 form .wpcf7-response-output.wpcf7-mail-sent-ok',
|
||||
),
|
||||
),
|
||||
'defaults' => array(
|
||||
'border_styles' => array(
|
||||
'width' => '2px',
|
||||
'color' => '#46b450',
|
||||
'style' => 'solid',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Validation Success', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_validation_success',
|
||||
'depends_show_if' => 'off',
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(),
|
||||
'input_field' => array(
|
||||
'label' => esc_html__( 'Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_field',
|
||||
'depends_show_if' => 'off',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-text, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-quiz, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-number, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-textarea, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-select, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-date',
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),
|
||||
),
|
||||
'filters' => false,
|
||||
'button' => array(
|
||||
'button_one' => array(
|
||||
'label' => esc_html__( 'Button', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7-form-control.wpcf7-submit',
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7-form-control.wpcf7-submit',
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .wpcf7-form-control.wpcf7-submit',
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
/*
|
||||
'cf7_notice' => array(
|
||||
'type' => 'warning',
|
||||
'value' => true,
|
||||
'display_if' => true,
|
||||
'message' => esc_html__( 'Note: Contact Form 7 will not function in the Divi Visual Builder at all, just like the Divi Contact Form module. It will only work on the frontend as usual. The purpose is to style and design your Contact Form 7 with the Divi Visual Builder without having to code. So go ahead and load your Contact Form 7 Library from the select list below to get started.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
*/
|
||||
'cf7_library' => array(
|
||||
'label' => esc_html__( 'Contact Form 7', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => dsm_get_contact_form_7(),
|
||||
),
|
||||
'show_validation' => array(
|
||||
'label' => esc_html__( 'Show Error & Validation Messages', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'basic_option',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'off',
|
||||
'description' => esc_html__( 'This will show the error and validation messages on the Visual Builder for styling purposes.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'label_bottom_spacing' => array(
|
||||
'label' => esc_html__( 'Bottom Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_labels',
|
||||
'default_unit' => 'px',
|
||||
),
|
||||
'button_alignment' => array(
|
||||
'label' => esc_html__( 'Button Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text_align',
|
||||
'option_category' => 'configuration',
|
||||
'options' => et_builder_get_text_orientation_options( array( 'justified' ) ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'button_one',
|
||||
'description' => esc_html__( 'Here you can define the alignment of Button. Wrap (<p>) element to the button in your contact form button.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'input_background_color' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'option_category' => 'button',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_field',
|
||||
),
|
||||
'file_padding' => array(
|
||||
'label' => esc_html__( 'Padding', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'custom_padding',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_file',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '',
|
||||
'responsive' => true,
|
||||
),
|
||||
'file_background_color' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'option_category' => 'button',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_file',
|
||||
),
|
||||
'error_msg_background_color' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'option_category' => 'button',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_error',
|
||||
),
|
||||
'validation_error_background_color' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'option_category' => 'button',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_validation_errors',
|
||||
),
|
||||
'validation_success_background_color' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'option_category' => 'button',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'cf7_validation_success',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_button_alignment() {
|
||||
$text_orientation = isset( $this->props['button_alignment'] ) ? $this->props['button_alignment'] : '';
|
||||
|
||||
return et_pb_get_alignment( $text_orientation );
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$cf7_library = $this->props['cf7_library'];
|
||||
$show_validation = $this->props['show_validation'];
|
||||
$label_bottom_spacing = $this->props['label_bottom_spacing'];
|
||||
$input_background_color = $this->props['input_background_color'];
|
||||
$file_background_color = $this->props['file_background_color'];
|
||||
$error_msg_background_color = $this->props['error_msg_background_color'];
|
||||
$validation_error_background_color = $this->props['validation_error_background_color'];
|
||||
$validation_success_background_color = $this->props['validation_success_background_color'];
|
||||
$file_padding = $this->props['file_padding'];
|
||||
$file_padding_tablet = $this->props['file_padding_tablet'];
|
||||
$file_padding_phone = $this->props['file_padding_phone'];
|
||||
$file_padding_last_edited = $this->props['file_padding_last_edited'];
|
||||
$custom_icon_1 = $this->props['button_one_icon'];
|
||||
$button_custom_1 = $this->props['custom_button_one'];
|
||||
$button_alignment = $this->get_button_alignment();
|
||||
|
||||
if ( '' !== $input_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-text, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-tel, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-url, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-quiz, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-number, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-textarea, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-select, %%order_class%%.dsm_contact_form_7 .wpcf7-form-control.wpcf7-date',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $input_background_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $file_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .wpcf7-form-control.wpcf7-file',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $file_background_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $error_msg_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .wpcf7-not-valid-tip',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $error_msg_background_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $validation_error_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .wpcf7 form.invalid .wpcf7-response-output, %%order_class%% .wpcf7 form.unaccepted .wpcf7-response-output',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $validation_error_background_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $validation_success_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .wpcf7 form.sent .wpcf7-response-output',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $validation_success_background_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $label_bottom_spacing ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% label',
|
||||
'declaration' => sprintf(
|
||||
'margin-bottom: %1$s;',
|
||||
esc_attr( $label_bottom_spacing )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'left' !== $button_alignment ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .wpcf7-form p:nth-last-of-type(1)',
|
||||
'declaration' => sprintf(
|
||||
'text-align: %1$s;',
|
||||
esc_attr( $button_alignment )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$this->apply_custom_margin_padding(
|
||||
$render_slug,
|
||||
'file_padding',
|
||||
'padding',
|
||||
'%%order_class%% .wpcf7-form-control.wpcf7-file'
|
||||
);
|
||||
|
||||
wp_enqueue_script( 'dsm-contact-form-7' );
|
||||
|
||||
$output = sprintf(
|
||||
'<div class="%2$s"%3$s>
|
||||
%1$s
|
||||
</div>',
|
||||
do_shortcode( '[contact-form-7 id="' . $cf7_library . '"]' ),
|
||||
'' !== $custom_icon_1 ? 'dsm_contact_form_7_btn_icon' : '',
|
||||
'' !== $custom_icon_1 ? sprintf(
|
||||
' data-dsm-btn-icon="%1$s"',
|
||||
esc_attr( et_pb_process_font_icon( $custom_icon_1 ) )
|
||||
) : ''
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
public function apply_custom_margin_padding( $function_name, $slug, $type, $class, $important = false ) {
|
||||
$slug_value = $this->props[ $slug ];
|
||||
$slug_value_tablet = $this->props[ $slug . '_tablet' ];
|
||||
$slug_value_phone = $this->props[ $slug . '_phone' ];
|
||||
$slug_value_last_edited = $this->props[ $slug . '_last_edited' ];
|
||||
$slug_value_responsive_active = et_pb_get_responsive_status( $slug_value_last_edited );
|
||||
|
||||
if ( isset( $slug_value ) && ! empty( $slug_value ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value, $type, $important ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $slug_value_tablet ) && ! empty( $slug_value_tablet ) && $slug_value_responsive_active ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value_tablet, $type, $important ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $slug_value_phone ) && ! empty( $slug_value_phone ) && $slug_value_responsive_active ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value_phone, $type, $important ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
if ( et_builder_is_hover_enabled( $slug, $this->props ) ) {
|
||||
if ( isset( $this->props[ $slug . '__hover' ] ) ) {
|
||||
$hover = $this->props[ $slug . '__hover' ];
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( $class ),
|
||||
'declaration' => et_builder_get_element_style_css( $hover, $type, $important ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_ContactForm7();
|
||||
|
||||
function dsm_get_contact_form_7() {
|
||||
$args = array(
|
||||
'post_type' => 'wpcf7_contact_form',
|
||||
'posts_per_page' => - 1,
|
||||
);
|
||||
|
||||
$dsm_cf7_library_list = array(
|
||||
'0' => esc_html__( '-- Select Contact Form 7 --', 'dsm-supreme-modules-for-divi' ),
|
||||
);
|
||||
|
||||
if ( $categories = get_posts( $args ) ) {
|
||||
foreach ( $categories as $category ) {
|
||||
(int) $dsm_cf7_library_list[ $category->ID ] = $category->post_title;
|
||||
}
|
||||
} else {
|
||||
(int) $dsm_cf7_library_list['0'] = esc_html__( 'No Contact From 7 form found', 'dsm-supreme-modules-for-divi' );
|
||||
}
|
||||
|
||||
return $dsm_cf7_library_list;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m2.81 22.2c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.61 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m22.42 3.33c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m22.53 27.43h-14.22c-1.12 0-2.04-.92-2.04-2.04v-18.21c0-1.13.92-2.04 2.04-2.04h14.22c1.12 0 2.04.92 2.04 2.04v18.21c0 1.13-.92 2.04-2.04 2.04zm-14.22-21.52c-.7 0-1.27.57-1.27 1.27v18.21c0 .7.57 1.27 1.27 1.27h14.22c.7 0 1.27-.57 1.27-1.27v-18.21c0-.7-.57-1.27-1.27-1.27z" fill="#fff"/><path d="m10.9 7.41h9.04v.77h-9.04z" fill="#03dac6"/><path d="m10.9 9.34h6.48v.51h-6.48z" fill="#fff"/><path d="m10.9 11.14h9.04v.51h-9.04z" fill="#fff"/><path d="m10.9 14.31h9.04v.77h-9.04z" fill="#03dac6"/><path d="m10.9 16.24h6.48v.51h-6.48z" fill="#fff"/><path d="m10.9 18.04h9.04v.51h-9.04z" fill="#fff"/><path d="m10.9 20.89h9.04v.77h-9.04z" fill="#03dac6"/><g fill="#fff"><path d="m10.9 22.82h6.48v.51h-6.48z"/><path d="m10.9 24.62h9.04v.51h-9.04z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,129 @@
|
||||
<?php
|
||||
|
||||
class DSM_EmbedGoogleMap extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_embed_google_map';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Embed Google Map', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Embed Google Map', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => false,
|
||||
'button' => false,
|
||||
'text' => false,
|
||||
'background' => false,
|
||||
'height' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% iframe',
|
||||
),
|
||||
'options' => array(
|
||||
'height' => array(
|
||||
'default' => '320px',
|
||||
'default_tablet' => '320px',
|
||||
'default_phone' => '320px',
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'google_maps_script_notice' => array(
|
||||
'type' => 'warning',
|
||||
'value' => true,
|
||||
'display_if' => true,
|
||||
'message' => esc_html__( 'Google Embed Map API is not required. However, if you encounter any issues with the Embed Google Map, please consider using Google Embed Map API for stability in the future.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'google_api_key' => array(
|
||||
'label' => esc_html__( 'Google API Key', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'attributes' => 'readonly',
|
||||
'additional_button' => sprintf(
|
||||
' <a href="%2$s" target="_blank" class="et_pb_update_google_key button" data-empty_text="%3$s">%1$s</a>',
|
||||
esc_html__( 'Change API Key', 'dsm-supreme-modules-for-divi' ),
|
||||
esc_url( et_pb_get_options_page_link() ),
|
||||
esc_attr__( 'Add Your API Key', 'dsm-supreme-modules-for-divi' )
|
||||
),
|
||||
'additional_button_type' => 'change_google_api_key',
|
||||
'class' => array( 'et_pb_google_api_key', 'et-pb-helper-field' ),
|
||||
'description' => sprintf(
|
||||
'The module uses the Google Maps API and requires a valid Google API Key to function. Before using the map module, please make sure you have added your API key inside the Divi Theme Options panel. Learn more about how to create your Google API Key <a href="%1$s" target="_blank">here</a>.',
|
||||
esc_url( 'http://www.elegantthemes.com/gallery/divi/documentation/map/#gmaps-api-key' )
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'address' => array(
|
||||
'label' => esc_html__( 'Address', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Enter the address for the embed Google Map.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => '1233 Howard St Apt 3A San Francisco, CA 94103-2775',
|
||||
'toggle_slug' => 'main_content',
|
||||
'dynamic_content' => 'text',
|
||||
),
|
||||
'zoom' => array(
|
||||
'label' => esc_html__( 'Zoom', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_unit' => '',
|
||||
'default' => '10',
|
||||
'unitless' => true,
|
||||
'allow_empty' => false,
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '22',
|
||||
'step' => '1',
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
function render( $attrs, $content = null, $render_slug ) {
|
||||
$address = $this->props['address'];
|
||||
$zoom = $this->props['zoom'];
|
||||
|
||||
if ( et_pb_get_google_api_key() ) {
|
||||
$output = sprintf(
|
||||
'<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/embed/v1/place?key=%5$s&q=%1$s&zoom=%2$s&language=%4$s" aria-label="%3$s"></iframe>',
|
||||
rawurlencode( $address ),
|
||||
absint( $zoom ),
|
||||
esc_attr( $address ),
|
||||
esc_attr( get_locale() ),
|
||||
esc_attr( et_pb_get_google_api_key() )
|
||||
);
|
||||
} else {
|
||||
$output = sprintf(
|
||||
'<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=%1$s&t=m&z=%2$s&output=embed&iwloc=near&hl=%4$s" aria-label="%3$s"></iframe>',
|
||||
rawurlencode( $address ),
|
||||
absint( $zoom ),
|
||||
esc_attr( $address ),
|
||||
esc_attr( get_locale() )
|
||||
);
|
||||
}
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_EmbedGoogleMap();
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m5.3 19.14c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m14 9.84c-1.45 0-2.64 1.18-2.64 2.64 0 .44.11.87.32 1.25l2.18 3.94c.03.05.08.09.14.09s.12-.03.14-.09l2.18-3.94c.21-.38.32-.82.32-1.25 0-1.46-1.19-2.64-2.64-2.64zm0 3.96c-.73 0-1.32-.59-1.32-1.32s.59-1.32 1.32-1.32 1.32.59 1.32 1.32-.59 1.32-1.32 1.32z" fill="#fff"/><g fill="#03dac6"><path d="m10.28 18.06-6.36-3.75v-1.71l6.36-3.75v2.46l-3.85 2.14 3.85 2.14zm-5.6-4.18 4.83 2.84v-.67l-4.23-2.35v-.48l4.23-2.35v-.67l-4.83 2.84z"/><path d="m17.72 18.06v-2.46l3.85-2.14-3.85-2.14v-2.46l6.36 3.75v1.71zm.77-2.01v.67l4.83-2.84v-.83l-4.83-2.84v.67l4.23 2.35v.48z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 861 B |
@@ -0,0 +1,222 @@
|
||||
<?php
|
||||
|
||||
class DSM_TwitterEmbeddedTimeline extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_embed_twitter_timeline';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Embed Twitter Timeline ', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Twitter Timeline Settings', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'text' => false,
|
||||
'fonts' => false,
|
||||
'background' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
'options' => array(
|
||||
'parallax_method' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'max_width' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'twitter_username' => array(
|
||||
'label' => esc_html__( 'Twitter Username', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => 'TwitterDev',
|
||||
'description' => esc_html__( 'Enter the Twitter Username without the hashtag @', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'limit_tweet' => array(
|
||||
'label' => esc_html__( 'Limit Tweets', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Limiting the number of Tweets displayed.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
),
|
||||
'tweet_number' => array(
|
||||
'label' => esc_html__( 'Number of Tweets', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'toggle_slug' => 'main_content',
|
||||
'validate_unit' => false,
|
||||
'unitless' => true,
|
||||
'default' => '3',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '20',
|
||||
'step' => '1',
|
||||
),
|
||||
'show_if' => array(
|
||||
'limit_tweet' => 'on',
|
||||
),
|
||||
),
|
||||
'theme' => array(
|
||||
'label' => esc_html__( 'Theme', 'et_builder' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'light' => esc_html__( 'Light', 'et_builder' ),
|
||||
'dark' => esc_html__( 'Dark', 'et_builder' ),
|
||||
),
|
||||
'default_on_front' => 'Dark',
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Here you can choose whether the Twitter Widget will appear in light or dark theme.', 'et_builder' ),
|
||||
),
|
||||
/*
|
||||
'link_color' => array(
|
||||
'label' => esc_html__( 'Link Color', 'et_builder' ),
|
||||
'type' => 'color',
|
||||
'custom_color' => true,
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => '#1b95e0',
|
||||
),
|
||||
*/
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Show Header', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Hides the timeline header. Implementing sites must add their own Twitter attribution, link to the source timeline, and comply with other Twitter display requirements.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'on',
|
||||
),
|
||||
'footer' => array(
|
||||
'label' => esc_html__( 'Show Footer', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Hides the timeline footer and Tweet composer link, if included in the timeline widget type.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'on',
|
||||
),
|
||||
'borders' => array(
|
||||
'label' => esc_html__( 'Show Border', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Removes all borders within the widget including borders surrounding the widget area and separating Tweets.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'on',
|
||||
),
|
||||
'scrollbar' => array(
|
||||
'label' => esc_html__( 'Show Scrollbar', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'on',
|
||||
),
|
||||
'remove_background' => array(
|
||||
'label' => esc_html__( "Remove Widget's Background color", 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Removes the widget’s background color.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
),
|
||||
'height' => array(
|
||||
'label' => esc_html__( 'Height', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'default_unit' => '',
|
||||
'default' => '800px',
|
||||
'range_settings' => array(
|
||||
'min' => '200',
|
||||
'max' => '1000',
|
||||
'step' => '1',
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$twitter_username = $this->props['twitter_username'];
|
||||
$limit_tweet = $this->props['limit_tweet'];
|
||||
$tweet_number = floatval( $this->props['tweet_number'] );
|
||||
$theme = $this->props['theme'];
|
||||
$header = $this->props['header'];
|
||||
$footer = $this->props['footer'];
|
||||
$borders = $this->props['borders'];
|
||||
$scrollbar = $this->props['scrollbar'];
|
||||
$height = floatval( $this->props['height'] );
|
||||
//$link_color = $this->props['link_color'];
|
||||
$remove_background = $this->props['remove_background'];
|
||||
|
||||
wp_enqueue_script( 'dsm-twitter-embed' );
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'<div class="dsm-twitter-timeline">
|
||||
<a class="twitter-timeline" data-height="%9$s" data-theme="%8$s" href="https://twitter.com/%1$s" data-chrome="%2$s%3$s%4$s%5$s%6$s"%7$s>Tweets by @%1$s</a>
|
||||
</div>',
|
||||
esc_attr( $twitter_username ),
|
||||
'on' !== $header ? 'noheader' : '',
|
||||
'on' !== $footer ? ' nofooter' : '',
|
||||
'on' !== $borders ? ' noborders' : '',
|
||||
'on' !== $scrollbar ? ' noscrollbar' : '',
|
||||
'off' !== $remove_background ? ' transparent' : '',
|
||||
'off' !== $limit_tweet ? esc_attr( " data-tweet-limit={$tweet_number}" ) : '',
|
||||
esc_attr( $theme ),
|
||||
esc_attr( $height )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
new DSM_TwitterEmbeddedTimeline;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m2.38 19.03c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m25.62 5.12c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m21.4 25.64h-14.22c-1.13 0-2.04-.92-2.04-2.04v-18.21c0-1.13.92-2.04 2.04-2.04h14.22c1.13 0 2.04.92 2.04 2.04v18.21c0 1.13-.92 2.04-2.04 2.04zm-14.22-21.52c-.7 0-1.27.57-1.27 1.27v18.21c0 .7.57 1.27 1.27 1.27h14.22c.7 0 1.27-.57 1.27-1.27v-18.21c0-.7-.57-1.27-1.27-1.27z" fill="#fff"/><path d="m8.01 14.58h12.87v.51h-12.87z" fill="#fff"/><path d="m13.05 7.91c-.03-.03-.08-.04-.12-.02s-.08.03-.12.04c.07-.08.11-.18.15-.28.01-.05-.02-.1-.07-.12-.03-.01-.06 0-.08.01-.15.08-.3.14-.46.18-.33-.31-.83-.35-1.21-.09-.29.2-.45.53-.41.88-.63-.05-1.2-.36-1.59-.86-.03-.02-.06-.03-.09-.03s-.06.02-.08.05c-.13.22-.17.48-.1.72.03.13.09.24.16.35-.03-.02-.06-.04-.09-.06-.04-.04-.1-.03-.14.01-.01.02-.02.04-.02.06.01.35.2.68.51.85-.04 0-.08-.01-.12-.02-.05-.02-.1.01-.12.06-.01.02-.01.05 0 .07.13.3.4.52.73.59-.31.17-.66.25-1.01.21-.05-.01-.09.02-.1.07-.01.04 0 .09.04.11.43.26.92.39 1.42.4.48 0 .95-.14 1.34-.41.76-.5 1.23-1.41 1.17-2.22.16-.12.3-.27.42-.43.02-.04.01-.09-.01-.12z" fill="#fff"/><path d="m13.02 12.7h-4.31c-.7 0-1.26-.57-1.26-1.26v-4.32c0-.7.57-1.26 1.26-1.26h4.31c.7 0 1.26.57 1.26 1.26v4.31c0 .7-.56 1.27-1.26 1.27zm-4.31-6.33c-.41 0-.75.34-.75.75v4.31c0 .41.34.75.75.75h4.31c.41 0 .75-.34.75-.75v-4.31c0-.41-.34-.75-.75-.75z" fill="#03dac6"/><path d="m8.01 17.96h12.87v.51h-12.87z" fill="#03dac6"/><path d="m8.01 21.07h12.87v.51h-12.87z" fill="#fff"/><path d="m8.01 22.88h12.87v.51h-12.87z" fill="#03dac6"/><g fill="#fff"><path d="m15.58 6.41h5.21v.51h-5.21z"/><path d="m15.58 8.39h5.21v.51h-5.21z"/><path d="m15.58 10.24h5.21v.51h-5.21z"/><path d="m15.58 12.15h5.21v.51h-5.21z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1,157 @@
|
||||
<?php
|
||||
|
||||
class DSM_FacebookSimpleComments extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_facebook_comments';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Facebook Comments', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Facebook Comments Settings', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'text' => false,
|
||||
'fonts' => false,
|
||||
'background' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
'options' => array(
|
||||
'parallax_method' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'max_width' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
'filters' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'fb_app_id_notice' => array(
|
||||
'type' => 'warning',
|
||||
'value' => isset( get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] ) && '' !== get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] ? true : false,
|
||||
'display_if' => false,
|
||||
'message' => et_get_safe_localization( sprintf( __( 'The Facebook APP ID is currently empty in the <a href="%s" target="_blank">Divi Supreme Plugin Page</a>. This module might not function properly without the Facebook APP ID.', 'dsm-supreme-modules-for-divi' ), admin_url( 'admin.php?page=divi_supreme_settings#dsm_settings_social_media' ) ) ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'fb_app_id' => array(
|
||||
'label' => esc_html__( 'Facebook APP ID', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'attributes' => 'readonly',
|
||||
'default_on_front' => isset( get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] ) && '' !== get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] ? get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] : '',
|
||||
'description' => et_get_safe_localization( sprintf( __( 'The Facebook module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to <a href="%1$s">Facebook Developer</a> and click on Create New App to get one.', 'dsm-supreme-modules-for-divi' ), esc_url( 'https://developers.facebook.com/apps/' ) ) ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'page_url' => array(
|
||||
'label' => esc_html__( 'Page URL', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Enter the Page URL.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => 'https://www.facebook.com/divisupreme/',
|
||||
),
|
||||
'num_posts' => array(
|
||||
'label' => esc_html__( 'Number of Posts', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'The number of comments to show by default. The minimum value is 1.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => '10',
|
||||
),
|
||||
'color_scheme' => array(
|
||||
'label' => esc_html__( 'Color Scheme', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'light' => esc_html__( 'Light', 'dsm-supreme-modules-for-divi' ),
|
||||
'dark' => esc_html__( 'Dark', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'The color scheme used by the comments plugin. Can be "light" or "dark".', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'light',
|
||||
),
|
||||
'order_by' => array(
|
||||
'label' => esc_html__( 'Order By', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'social' => esc_html__( 'Social', 'dsm-supreme-modules-for-divi' ),
|
||||
'reverse_time' => esc_html__( 'Reverse Time', 'dsm-supreme-modules-for-divi' ),
|
||||
'time' => esc_html__( 'Time', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => sprintf( esc_html__( 'The order to use when displaying comments. Can be "social", "reverse_time", or "time". The different order types are explained <a href="%1$s">in the FAQ</a>' ), 'https://developers.facebook.com/docs/plugins/comments/#faqorder', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'social',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$fb_app_id = $this->props['fb_app_id'];
|
||||
$page_url = $this->props['page_url'];
|
||||
$num_posts = $this->props['num_posts'];
|
||||
$color_scheme = $this->props['color_scheme'];
|
||||
$order_by = $this->props['order_by'];
|
||||
|
||||
wp_enqueue_script( 'dsm-facebook' );
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'<div class="dsm-facebook-comments">
|
||||
<div id="fb-root"></div>
|
||||
<div class="fb-comments" data-href="%1$s" data-colorscheme="%3$s" data-numposts="%2$s" data-order-by="%4$s" width="100%%" data-lazy="true"></div>
|
||||
</div>',
|
||||
esc_url( $page_url ),
|
||||
esc_attr( $num_posts ),
|
||||
esc_attr( $color_scheme ),
|
||||
esc_attr( $order_by )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_FacebookSimpleComments();
|
||||
@@ -0,0 +1 @@
|
||||
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero"><path d="m6.51 22.12c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m11.43 22.25c-.1 0-.21-.02-.31-.05-.35-.13-.58-.46-.58-.83v-3.68h-1.7c-.94 0-1.71-.77-1.71-1.71v-8.51c0-.94.77-1.71 1.71-1.71h12.33c.94 0 1.71.77 1.71 1.71v8.51c0 .94-.77 1.71-1.71 1.71h-5.48l-3.58 4.25c-.18.19-.43.31-.68.31zm-2.59-15.73c-.52 0-.95.42-.95.95v8.51c0 .52.42.95.95.95h2.47v4.44c0 .07.04.1.08.11s.09.02.13-.04l3.8-4.52h5.84c.52 0 .95-.42.95-.95v-8.5c0-.52-.42-.95-.95-.95z" fill="#fff"/><path d="m12.48 14.86c-1.77 0-3.21-1.44-3.21-3.21s1.44-3.21 3.21-3.21 3.21 1.44 3.21 3.21-1.44 3.21-3.21 3.21zm0-5.65c-1.35 0-2.44 1.1-2.44 2.44 0 1.35 1.1 2.44 2.44 2.44 1.35 0 2.44-1.1 2.44-2.44.01-1.34-1.09-2.44-2.44-2.44z" fill="#03dac6"/><path d="m18.66 9.77h-.02l-1.06.5-.2-.97 1.46-.68h1.07v5.53h-1.25z" fill="#fff"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,237 @@
|
||||
<?php
|
||||
|
||||
class DSM_FacebookSimpleFeed extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_facebook_feed';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Facebook Feed', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Facebook Feed Settings', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'text' => false,
|
||||
'fonts' => false,
|
||||
'background' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
'options' => array(
|
||||
'parallax_method' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'max_width' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
'filters' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'fb_app_id_notice' => array(
|
||||
'type' => 'warning',
|
||||
'value' => isset( get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] ) && '' !== get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] ? true : false,
|
||||
'display_if' => false,
|
||||
'message' => et_get_safe_localization( sprintf( __( 'The Facebook APP ID is currently empty in the <a href="%s" target="_blank">Divi Supreme Plugin Page</a>. This module might not function properly without the Facebook APP ID.', 'dsm-supreme-modules-for-divi' ), admin_url( 'admin.php?page=divi_supreme_settings#dsm_settings_social_media' ) ) ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'fb_app_id' => array(
|
||||
'label' => esc_html__( 'Facebook APP ID', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'attributes' => 'readonly',
|
||||
'default_on_front' => isset( get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] ) && '' !== get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] ? get_option( 'dsm_settings_social_media' )['dsm_facebook_app_id'] : '',
|
||||
'description' => et_get_safe_localization( sprintf( __( 'The Facebook module uses the Facebook APP ID and requires a Facebook APP ID to function. Before using all Facebook module, please make sure you have added your Facebook APP ID inside the Divi Supreme Plugin Page. You can go to <a href="%1$s">Facebook Developer</a> and click on Create New App to get one.', 'dsm-supreme-modules-for-divi' ), esc_url( 'https://developers.facebook.com/apps/' ) ) ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'fb_page_url' => array(
|
||||
'label' => esc_html__( 'Facebook Page URL', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Enter the Facebook Page URL.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => 'https://www.facebook.com/divisupreme/',
|
||||
),
|
||||
'fb_tabs' => array(
|
||||
'label' => esc_html__( 'Tabs', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'multiple_checkboxes',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'timeline' => esc_html__( 'Timeline', 'dsm-supreme-modules-for-divi' ),
|
||||
'events' => esc_html__( 'Events', 'dsm-supreme-modules-for-divi' ),
|
||||
'messages' => esc_html__( 'Messages', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'on|off|off',
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Here you can choose to show tabs on your facebook page.', 'dsm-supreme-modules-for-divi' ),
|
||||
|
||||
),
|
||||
'fb_hide_cover' => array(
|
||||
'label' => esc_html__( 'Hide Cover Photo', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'false' => esc_html__( 'Show', 'dsm-supreme-modules-for-divi' ),
|
||||
'true' => esc_html__( 'Hide', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Hide cover photo in the header.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'false',
|
||||
),
|
||||
'fb_small_header' => array(
|
||||
'label' => esc_html__( 'Use Small Header?', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'false' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'true' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Use the small header instead.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'false',
|
||||
),
|
||||
'fb_show_facepile' => array(
|
||||
'label' => esc_html__( 'Show Face Pile', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'false' => esc_html__( 'Hide', 'dsm-supreme-modules-for-divi' ),
|
||||
'true' => esc_html__( 'Show', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Show profile photos when friends like this.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'true',
|
||||
),
|
||||
'fb_width' => array(
|
||||
'label' => esc_html__( 'Width', 'et_builder' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'toggle_slug' => 'main_content',
|
||||
'validate_unit' => true,
|
||||
'default' => '340px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '340px',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '180',
|
||||
'max' => '500',
|
||||
'step' => '1',
|
||||
),
|
||||
'description' => esc_html__( 'The pixel width of the Facebook Feed. Min. is 180 & Max. is 500.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'fb_height' => array(
|
||||
'label' => esc_html__( 'Height', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'default_unit' => 'px',
|
||||
'default' => '500px',
|
||||
'range_settings' => array(
|
||||
'min' => '300',
|
||||
'max' => '600',
|
||||
'step' => '1',
|
||||
),
|
||||
),
|
||||
'fb_alignment' => array(
|
||||
'label' => esc_html__( 'Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text_align',
|
||||
'option_category' => 'configuration',
|
||||
'options' => et_builder_get_text_orientation_options( array( 'justified' ) ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'alignment',
|
||||
'description' => esc_html__( 'Here you can define the alignment of Facebook Feed', 'dsm-supreme-modules-for-divi' ),
|
||||
'default' => 'center',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$fb_app_id = $this->props['fb_app_id'];
|
||||
$fb_page_url = $this->props['fb_page_url'];
|
||||
$fb_hide_cover = $this->props['fb_hide_cover'];
|
||||
$fb_tabs = $this->props['fb_tabs'];
|
||||
$fb_small_header = $this->props['fb_small_header'];
|
||||
$fb_show_facepile = $this->props['fb_show_facepile'];
|
||||
$fb_width = floatval( $this->props['fb_width'] );
|
||||
$fb_height = floatval( $this->props['fb_height'] );
|
||||
$fb_alignment = $this->props['fb_alignment'];
|
||||
|
||||
$this->add_classname(
|
||||
array(
|
||||
"et_pb_text_align_{$fb_alignment}",
|
||||
)
|
||||
);
|
||||
|
||||
if ( ! empty( $fb_tabs ) ) {
|
||||
$value_map = array( 'timeline', 'events', 'messages' );
|
||||
$fb_tabs = $this->process_multiple_checkboxes_field_value( $value_map, $fb_tabs );
|
||||
$fb_tabs = str_replace( '|', ',', $fb_tabs );
|
||||
} else {
|
||||
$fb_tabs = '';
|
||||
}
|
||||
|
||||
wp_enqueue_script( 'dsm-facebook' );
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'<div class="dsm-facebook-feed">
|
||||
<div id="fb-root"></div>
|
||||
<div class="fb-page" data-href="%1$s" data-tabs="%7$s" data-width="%6$s" data-height="%5$s" data-small-header="%4$s" data-adapt-container-width="true" data-hide-cover="%2$s" data-show-facepile="%3$s" data-lazy="true">
|
||||
</div>
|
||||
</div>',
|
||||
esc_url( $fb_page_url ),
|
||||
esc_attr( $fb_hide_cover ),
|
||||
esc_attr( $fb_show_facepile ),
|
||||
esc_attr( $fb_small_header ),
|
||||
esc_attr( $fb_height ),
|
||||
esc_attr( $fb_width ),
|
||||
esc_attr( $fb_tabs )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_FacebookSimpleFeed();
|
||||
@@ -0,0 +1 @@
|
||||
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m13 23.76c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#fff" fill-rule="nonzero"/><path d="m22.76 3.87c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.61 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6" fill-rule="nonzero"/><path d="m20.11 26.89h-14.22c-1.13 0-2.04-.92-2.04-2.04v-18.21c0-1.13.92-2.04 2.04-2.04h14.22c1.13 0 2.04.92 2.04 2.04v18.21c0 1.13-.92 2.04-2.04 2.04zm-14.22-21.52c-.7 0-1.27.57-1.27 1.27v18.21c0 .7.57 1.27 1.27 1.27h14.22c.7 0 1.27-.57 1.27-1.27v-18.21c0-.7-.57-1.27-1.27-1.27z" fill="#fff" fill-rule="nonzero"/><path d="m10.71 7.38h9.04v.77h-9.04z" fill="#03dac6"/><g fill="#fff"><path d="m10.71 9.31h6.48v.51h-6.48z"/><path d="m10.71 11.11h9.04v.51h-9.04z"/><path d="m6.83 12.2v-2.8h-.48v-.83h.48v-.14c0-.44.13-.92.46-1.22.28-.27.68-.36 1-.36.25 0 .45.03.6.07l-.04.87c-.1-.03-.22-.05-.36-.05-.37 0-.53.29-.53.65v.19h.73v.82h-.72v2.8z" fill-rule="nonzero"/></g><path d="m20.14 19.46h-14.27v-5.65h14.27zm-13.51-.77h12.74v-4.12h-12.74z" fill="#03dac6" fill-rule="nonzero"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,208 @@
|
||||
<?php
|
||||
|
||||
class DSM_FlipBox_Perk extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_flipbox';
|
||||
public $vb_support = 'on';
|
||||
public $child_slug = 'dsm_flipbox_child';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Flipbox', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% h1.et_pb_module_header, %%order_class%% h2.et_pb_module_header, %%order_class%% h3.et_pb_module_header, %%order_class%% h4.et_pb_module_header, %%order_class%% h5.et_pb_module_header, %%order_class%% h6.et_pb_module_header',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '18px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h4',
|
||||
),
|
||||
),
|
||||
'content' => array(
|
||||
'label' => esc_html__( 'Body', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-content',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
),
|
||||
'subhead' => array(
|
||||
'label' => esc_html__( 'Subhead', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-subtitle',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%%',
|
||||
),
|
||||
'options' => array(
|
||||
'background_layout' => array(
|
||||
'default' => 'light',
|
||||
),
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm_flipbox_child',
|
||||
'border_styles' => '%%order_class%% .dsm_flipbox_child',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_flipbox_child',
|
||||
),
|
||||
),
|
||||
),
|
||||
'text_shadow' => array(
|
||||
// Don't add text-shadow fields since they already are via font-options.
|
||||
'default' => false,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'flipbox_effect' => array(
|
||||
'label' => esc_html__( 'Flipbox Effect', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 'right',
|
||||
'options' => array(
|
||||
'left' => esc_html__( 'Flip Left', 'dsm-supreme-modules-for-divi' ),
|
||||
'right' => esc_html__( 'Flip Right', 'dsm-supreme-modules-for-divi' ),
|
||||
'up' => esc_html__( 'Flip Up', 'dsm-supreme-modules-for-divi' ),
|
||||
'down' => esc_html__( 'Flip Down', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'animation',
|
||||
),
|
||||
'flipbox_speed' => array(
|
||||
'label' => esc_html__( 'Animation Speed (in s)', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '0.6s',
|
||||
'default_on_front' => '0.6s',
|
||||
'default_unit' => 's',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '10',
|
||||
'step' => '0.1',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'animation',
|
||||
),
|
||||
'flipbox_height' => array(
|
||||
'label' => esc_html__( 'Height', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '200px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '1200',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$flipbox_effect = $this->props['flipbox_effect'];
|
||||
$flipbox_speed = $this->props['flipbox_speed'];
|
||||
$flipbox_height = $this->props['flipbox_height'];
|
||||
$flipbox_height_tablet = $this->props['flipbox_height_tablet'];
|
||||
$flipbox_height_phone = $this->props['flipbox_height_phone'];
|
||||
$flipbox_height_last_edited = $this->props['flipbox_height_last_edited'];
|
||||
|
||||
if ( '' !== $flipbox_height_tablet || '' !== $flipbox_height_phone || '' !== $flipbox_height ) {
|
||||
$flipbox_height_responsive_active = et_pb_get_responsive_status( $flipbox_height_last_edited );
|
||||
|
||||
$flipbox_height_values = array(
|
||||
'desktop' => $flipbox_height,
|
||||
'tablet' => $flipbox_height_responsive_active ? $flipbox_height_tablet : '',
|
||||
'phone' => $flipbox_height_responsive_active ? $flipbox_height_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $flipbox_height_values, '%%order_class%% .dsm-flipbox', 'height', $render_slug );
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_flipbox_child',
|
||||
'declaration' => sprintf(
|
||||
'transition: transform %1$s ease-in-out;',
|
||||
esc_attr( $flipbox_speed )
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
$output = sprintf(
|
||||
'<div class="dsm-flipbox%2$s">%1$s</div>',
|
||||
et_core_sanitized_previously( $this->content ),
|
||||
esc_attr( " dsm-flipbox-effect-${flipbox_effect}" )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_FlipBox_Perk;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m22.04 8c-.65 0-1.18-.53-1.18-1.18s.53-1.18 1.18-1.18 1.18.53 1.18 1.18-.53 1.18-1.18 1.18zm0-1.6c-.23 0-.42.19-.42.42s.19.42.42.42.42-.19.42-.42c-.01-.24-.19-.42-.42-.42z" fill="#03dac6"/><path d="m8.24 21.13c-.65 0-1.18-.53-1.18-1.18s.53-1.18 1.18-1.18 1.18.53 1.18 1.18c.01.65-.52 1.18-1.18 1.18zm0-1.6c-.23 0-.42.19-.42.42s.19.42.42.42.42-.19.42-.42-.19-.42-.42-.42z" fill="#03dac6"/><path d="m22.41 22.37h-6.36l-3.59-5.87.11-.2c.23-.4.74-.75 1.29-.87.46-.1.87-.04 1.17.18.08.06.29.21.85 1.06v-3.89c.02-.55.38-1.56 1.56-1.56.54 0 .85.22 1.02.41.4.44.38 1.04.37 1.18v2.37h2.18c.52 0 .91.15 1.16.44.27.31.26.68.24.8zm-5.93-.77h5.17l.01-5.26s.01-.13-.07-.23c-.09-.1-.29-.16-.57-.16h-2.94v-3.19c.01-.11-.01-.43-.18-.61-.1-.11-.25-.16-.46-.16-.71 0-.78.68-.79.81v6.65l-.71-1.23c-.97-1.68-1.29-1.96-1.35-2-.12-.08-.32-.1-.56-.05-.25.06-.5.19-.66.33z" fill="#fff"/><path d="m11.48 14.92-1 1c-.11.11-.11.29 0 .39.05.05.13.08.2.08s.14-.03.2-.08l1.67-1.66-1.67-1.66c-.11-.11-.28-.11-.39 0s-.11.29 0 .39l.99.99c-4.33-.02-6.13-.93-6.13-2.74 0-1.82 3.7-3.35 8.07-3.35s8.07 1.53 8.07 3.35c0 .15.12.28.28.28.15 0 .28-.12.28-.28 0-2.19-3.79-3.91-8.63-3.91s-8.63 1.72-8.63 3.91c-.01 2.17 1.9 3.27 6.69 3.29z" fill="#03dac6"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,706 @@
|
||||
<?php
|
||||
|
||||
class DSM_FlipBox_Perk_Child extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_flipbox_child';
|
||||
public $vb_support = 'on';
|
||||
public $type = 'child';
|
||||
public $child_title_var = 'title';
|
||||
public $child_title_fallback_var = 'subtitle';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Flipbox Item', 'dsm-supreme-modules-for-divi' );
|
||||
$this->advanced_setting_title_text = esc_html__( 'Flipbox Item', 'dsm-supreme-modules-for-divi' );
|
||||
$this->settings_text = esc_html__( 'Flipbox Item Settings', 'dsm-supreme-modules-for-divi' );
|
||||
$this->main_css_element = '%%order_class%%';
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'link' => esc_html__( 'Link', 'dsm-supreme-modules-for-divi' ),
|
||||
'image' => esc_html__( 'Image & Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'icon_settings' => esc_html__( 'Image & Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'text' => array(
|
||||
'title' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 49,
|
||||
),
|
||||
'width' => array(
|
||||
'title' => esc_html__( 'Sizing', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 65,
|
||||
),
|
||||
),
|
||||
),
|
||||
'custom_css' => array(
|
||||
'toggles' => array(
|
||||
'attributes' => array(
|
||||
'title' => esc_html__( 'Attributes', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 95,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% h1.et_pb_module_header, %%order_class%% h2.et_pb_module_header, %%order_class%% h3.et_pb_module_header, %%order_class%% h4.et_pb_module_header, %%order_class%% h5.et_pb_module_header, %%order_class%% h6.et_pb_module_header',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '18px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h4',
|
||||
),
|
||||
),
|
||||
'content' => array(
|
||||
'label' => esc_html__( 'Body', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-content',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
),
|
||||
'subhead' => array(
|
||||
'label' => esc_html__( 'Subhead', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-subtitle',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_background_layout' => true,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%% .dsm_flipbox_wrapper',
|
||||
),
|
||||
'options' => array(
|
||||
'background_layout' => array(
|
||||
'default_on_front' => 'light',
|
||||
),
|
||||
'text_orientation' => array(
|
||||
'default_on_front' => 'left',
|
||||
),
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(),
|
||||
'image' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm_flipbox_child_image .dsm_flipbox_child_image_wrap',
|
||||
'border_styles' => '%%order_class%% .dsm_flipbox_child_image .dsm_flipbox_child_image_wrap',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'depends_on' => array( 'use_icon' ),
|
||||
'depends_show_if' => 'off',
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(),
|
||||
'image' => array(
|
||||
'label' => esc_html__( 'Image Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'depends_show_if' => 'off',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_flipbox_child_image .dsm_flipbox_child_image_wrap',
|
||||
'show_if_not' => array(
|
||||
'use_icon' => 'on',
|
||||
),
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),
|
||||
),
|
||||
'button' => array(
|
||||
'button' => array(
|
||||
'label' => esc_html__( 'Button', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .et_pb_button",
|
||||
'limited_main' => "{$this->main_css_element} .et_pb_button",
|
||||
'alignment' => "{$this->main_css_element} .et_pb_button_wrapper",
|
||||
),
|
||||
'use_alignment' => true,
|
||||
'box_shadow' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .et_pb_button',
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .et_pb_button_wrapper .et_pb_button",
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'filters' => array(
|
||||
'child_filters_target' => array(
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'depends_show_if' => 'off',
|
||||
),
|
||||
),
|
||||
'icon_settings' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .et_pb_main_blurb_image',
|
||||
),
|
||||
),
|
||||
'position_fields' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
$et_accent_color = et_builder_accent_color();
|
||||
|
||||
$image_icon_placement = array(
|
||||
'top' => esc_html__( 'Top', 'dsm-supreme-modules-for-divi' ),
|
||||
);
|
||||
|
||||
if ( ! is_rtl() ) {
|
||||
$image_icon_placement['left'] = esc_html__( 'Left', 'dsm-supreme-modules-for-divi' );
|
||||
} else {
|
||||
$image_icon_placement['right'] = esc_html__( 'Right', 'dsm-supreme-modules-for-divi' );
|
||||
}
|
||||
|
||||
return array(
|
||||
'title' => array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Text entered here will appear as title.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'subtitle' => array(
|
||||
'label' => esc_html__( 'Sub Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Text entered here will appear as subtitle.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'use_icon' => array(
|
||||
'label' => esc_html__( 'Use Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'basic_option',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'image',
|
||||
'affects' => array(
|
||||
'border_radii_image',
|
||||
'border_styles_image',
|
||||
'box_shadow_style_image',
|
||||
'font_icon',
|
||||
'image_max_width',
|
||||
'use_icon_font_size',
|
||||
'use_circle',
|
||||
'icon_color',
|
||||
'image',
|
||||
'alt',
|
||||
'child_filter_hue_rotate',
|
||||
'child_filter_saturate',
|
||||
'child_filter_brightness',
|
||||
'child_filter_contrast',
|
||||
'child_filter_invert',
|
||||
'child_filter_sepia',
|
||||
'child_filter_opacity',
|
||||
'child_filter_blur',
|
||||
'child_mix_blend_mode',
|
||||
),
|
||||
'description' => esc_html__( 'Here you can choose whether icon set below should be used.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'off',
|
||||
),
|
||||
'font_icon' => array(
|
||||
'label' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select_icon',
|
||||
'option_category' => 'basic_option',
|
||||
'class' => array( 'et-pb-font-icon' ),
|
||||
'toggle_slug' => 'image',
|
||||
'description' => esc_html__( 'Choose an icon to display with your blurb.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'on',
|
||||
),
|
||||
'icon_color' => array(
|
||||
'default' => $et_accent_color,
|
||||
'label' => esc_html__( 'Icon Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for your icon.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),
|
||||
'use_circle' => array(
|
||||
'label' => esc_html__( 'Circle Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'affects' => array(
|
||||
'use_circle_border',
|
||||
'circle_color',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'description' => esc_html__( 'Here you can choose whether icon set above should display within a circle.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'on',
|
||||
'default_on_front' => 'off',
|
||||
),
|
||||
'circle_color' => array(
|
||||
'default' => $et_accent_color,
|
||||
'label' => esc_html__( 'Circle Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for the icon circle.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),
|
||||
'use_circle_border' => array(
|
||||
'label' => esc_html__( 'Show Circle Border', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'affects' => array(
|
||||
'circle_border_color',
|
||||
),
|
||||
'description' => esc_html__( 'Here you can choose whether if the icon circle border should display.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'default_on_front' => 'off',
|
||||
),
|
||||
'circle_border_color' => array(
|
||||
'default' => $et_accent_color,
|
||||
'label' => esc_html__( 'Circle Border Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for the icon circle border.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),
|
||||
'image' => array(
|
||||
'label' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'off',
|
||||
'description' => esc_html__( 'Upload an image to display at the top of your blurb.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'image',
|
||||
),
|
||||
'alt' => array(
|
||||
'label' => esc_html__( 'Image Alt Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Define the HTML ALT text for your image here.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'off',
|
||||
'tab_slug' => 'custom_css',
|
||||
'toggle_slug' => 'attributes',
|
||||
),
|
||||
'icon_placement' => array(
|
||||
'label' => esc_html__( 'Image/Icon Placement', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => $image_icon_placement,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'description' => esc_html__( 'Here you can choose where to place the icon.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default_on_front' => 'top',
|
||||
),
|
||||
'content' => array(
|
||||
'label' => esc_html__( 'Content', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'tiny_mce',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Content entered here will appear inside the module.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'image_max_width' => array(
|
||||
'label' => esc_html__( 'Image Width', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'depends_show_if' => 'off',
|
||||
'default' => '100%',
|
||||
'default_unit' => '%',
|
||||
'default_on_front' => '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '100',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
'use_icon_font_size' => array(
|
||||
'label' => esc_html__( 'Use Icon Font Size', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'font_option',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'affects' => array(
|
||||
'icon_font_size',
|
||||
),
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'default_on_front' => 'off',
|
||||
),
|
||||
'icon_font_size' => array(
|
||||
'label' => esc_html__( 'Icon Font Size', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'font_option',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'default' => '96px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '120',
|
||||
'step' => '1',
|
||||
),
|
||||
'mobile_options' => true,
|
||||
'depends_show_if' => 'on',
|
||||
'responsive' => true,
|
||||
),
|
||||
'button_text' => array(
|
||||
'label' => esc_html__( 'Button Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Input your desired button text, or leave blank for no button.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'button',
|
||||
),
|
||||
'button_url' => array(
|
||||
'label' => esc_html__( 'Button URL', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Input URL for your button.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'button',
|
||||
),
|
||||
'button_url_new_window' => array(
|
||||
'default' => 'off',
|
||||
'default_on_front' => true,
|
||||
'label' => esc_html__( 'Url Opens', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'In The Same Window', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'In The New Tab', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'button',
|
||||
'description' => esc_html__( 'Choose whether your link opens in a new window or not', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'content_orientation' => array(
|
||||
'label' => esc_html__( 'Text Vertical Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'flex-start' => esc_html__( 'Top', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Center', 'dsm-supreme-modules-for-divi' ),
|
||||
'flex-end' => esc_html__( 'Bottom', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'center',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
'description' => esc_html__( 'This setting determines the vertical alignment of your content. Your content can either be align to the top, vertically centered, or aligned to the bottom.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$title = $this->props['title'];
|
||||
$subtitle = $this->props['subtitle'];
|
||||
$button_text = $this->props['button_text'];
|
||||
$image = $this->props['image'];
|
||||
$alt = $this->props['alt'];
|
||||
$icon_placement = $this->props['icon_placement'];
|
||||
$font_icon = $this->props['font_icon'];
|
||||
$use_icon = $this->props['use_icon'];
|
||||
$use_circle = $this->props['use_circle'];
|
||||
$use_circle_border = $this->props['use_circle_border'];
|
||||
$icon_color = $this->props['icon_color'];
|
||||
$circle_color = $this->props['circle_color'];
|
||||
$circle_border_color = $this->props['circle_border_color'];
|
||||
$use_icon_font_size = $this->props['use_icon_font_size'];
|
||||
$icon_font_size = $this->props['icon_font_size'];
|
||||
$icon_font_size_tablet = $this->props['icon_font_size_tablet'];
|
||||
$icon_font_size_phone = $this->props['icon_font_size_phone'];
|
||||
$icon_font_size_last_edited = $this->props['icon_font_size_last_edited'];
|
||||
$image_max_width = $this->props['image_max_width'];
|
||||
$image_max_width_tablet = $this->props['image_max_width_tablet'];
|
||||
$image_max_width_phone = $this->props['image_max_width_phone'];
|
||||
$image_max_width_last_edited = $this->props['image_max_width_last_edited'];
|
||||
$button_url = $this->props['button_url'];
|
||||
$button_url_new_window = $this->props['button_url_new_window'];
|
||||
$button_custom = $this->props['custom_button'];
|
||||
$button_rel = $this->props['button_rel'];
|
||||
$custom_icon = $this->props['button_icon'];
|
||||
$content_orientation = $this->props['content_orientation'];
|
||||
$background_layout = $this->props['background_layout'];
|
||||
$text_orientation = $this->props['text_orientation'];
|
||||
$header_level = $this->props['header_level'];
|
||||
|
||||
// A Fix for empty value for contents line-height value for exisitng flipbox module.
|
||||
if ( isset( $this->props['header_line_height'] ) && '' === $this->props['header_line_height'] ) {
|
||||
if ( '' === $this->props['header_line_height'] ) {
|
||||
$this->props['header_line_height'] = '1em';
|
||||
}
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% h1.et_pb_module_header, %%order_class%% h2.et_pb_module_header, %%order_class%% h3.et_pb_module_header, %%order_class%% h4.et_pb_module_header, %%order_class%% h5.et_pb_module_header, %%order_class%% h6.et_pb_module_header',
|
||||
'declaration' => sprintf(
|
||||
'line-height: %1$s;',
|
||||
esc_attr( $this->props['header_line_height'] )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $this->props['subhead_line_height'] ) && '' === $this->props['subhead_line_height'] ) {
|
||||
if ( '' === $this->props['subhead_line_height'] ) {
|
||||
$this->props['subhead_line_height'] = '1em';
|
||||
}
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-subtitle',
|
||||
'declaration' => sprintf(
|
||||
'line-height: %1$s;',
|
||||
esc_attr( $this->props['subhead_line_height'] )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $this->props['content_line_height'] ) && '' === $this->props['content_line_height'] ) {
|
||||
if ( '' === $this->props['content_line_height'] ) {
|
||||
$this->props['content_line_height'] = '1.7em';
|
||||
}
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-content',
|
||||
'declaration' => sprintf(
|
||||
'line-height: %1$s;',
|
||||
esc_attr( $this->props['content_line_height'] )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$image_pathinfo = pathinfo( $image );
|
||||
$is_image_svg = isset( $image_pathinfo['extension'] ) ? 'svg' === $image_pathinfo['extension'] : false;
|
||||
|
||||
if ( 'off' !== $use_icon_font_size ) {
|
||||
$font_size_responsive_active = et_pb_get_responsive_status( $icon_font_size_last_edited );
|
||||
|
||||
$font_size_values = array(
|
||||
'desktop' => $icon_font_size,
|
||||
'tablet' => $font_size_responsive_active ? $icon_font_size_tablet : '',
|
||||
'phone' => $font_size_responsive_active ? $icon_font_size_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $font_size_values, '%%order_class%% .et-pb-icon', 'font-size', $render_slug );
|
||||
}
|
||||
|
||||
if ( '' !== $image_max_width_tablet || '' !== $image_max_width_phone || '' !== $image_max_width || $is_image_svg ) {
|
||||
$is_size_px = false;
|
||||
|
||||
// If size is given in px, we want to override parent width
|
||||
if (
|
||||
false !== strpos( $image_max_width, 'px' ) ||
|
||||
false !== strpos( $image_max_width_tablet, 'px' ) ||
|
||||
false !== strpos( $image_max_width_phone, 'px' )
|
||||
) {
|
||||
$is_size_px = true;
|
||||
}
|
||||
// SVG image overwrite. SVG image needs its value to be explicit
|
||||
if ( '' === $image_max_width && $is_image_svg ) {
|
||||
$image_max_width = '100%';
|
||||
}
|
||||
|
||||
$image_max_width_selector = $icon_placement === 'top' && $is_image_svg ? '%%order_class%% .dsm_flipbox_child_image' : '%%order_class%% .dsm_flipbox_child_image .dsm_flipbox_child_image_wrap';
|
||||
$image_max_width_property = ( $is_image_svg || $is_size_px ) ? 'width' : 'max-width';
|
||||
|
||||
$image_max_width_responsive_active = et_pb_get_responsive_status( $image_max_width_last_edited );
|
||||
|
||||
$image_max_width_values = array(
|
||||
'desktop' => $image_max_width,
|
||||
'tablet' => $image_max_width_responsive_active ? $image_max_width_tablet : '',
|
||||
'phone' => $image_max_width_responsive_active ? $image_max_width_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $image_max_width_values, $image_max_width_selector, $image_max_width_property, $render_slug );
|
||||
}
|
||||
|
||||
if ( '' !== $title ) {
|
||||
$title = sprintf( '<%1$s class="dsm-title et_pb_module_header">%2$s</%1$s>', et_pb_process_header_level( $header_level, 'h4' ), $title );
|
||||
}
|
||||
|
||||
if ( '' !== $subtitle ) {
|
||||
$subtitle = sprintf( '<span class="dsm-subtitle">%1$s</span>', $subtitle );
|
||||
}
|
||||
|
||||
// Render button
|
||||
$button = $this->render_button(
|
||||
array(
|
||||
'button_classname' => array( 'et_pb_more_button' ),
|
||||
'button_custom' => $button_custom,
|
||||
'button_rel' => $button_rel,
|
||||
'button_text' => $button_text,
|
||||
'button_url' => $button_url,
|
||||
'custom_icon' => $custom_icon,
|
||||
'url_new_window' => $button_url_new_window,
|
||||
'display_button' => '' !== $button_url && '' !== $button_text,
|
||||
)
|
||||
);
|
||||
|
||||
if ( 'center' !== $content_orientation ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%%',
|
||||
'declaration' => sprintf(
|
||||
'align-items: %1$s;',
|
||||
esc_attr( $content_orientation )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'off' === $use_icon ) {
|
||||
$image = ( '' !== trim( $image ) ) ? sprintf(
|
||||
'<img src="%1$s" alt="%2$s" />',
|
||||
esc_url( $image ),
|
||||
esc_attr( $alt )
|
||||
//esc_attr( " et_pb_animation_{$animation}" )
|
||||
) : '';
|
||||
} else {
|
||||
$icon_style = sprintf( 'color: %1$s;', esc_attr( $icon_color ) );
|
||||
|
||||
if ( 'on' === $use_circle ) {
|
||||
$icon_style .= sprintf( ' background-color: %1$s;', esc_attr( $circle_color ) );
|
||||
|
||||
if ( 'on' === $use_circle_border ) {
|
||||
$icon_style .= sprintf( ' border-color: %1$s;', esc_attr( $circle_border_color ) );
|
||||
}
|
||||
}
|
||||
|
||||
$image = ( '' !== $font_icon ) ? sprintf(
|
||||
'<span class="et-pb-icon%2$s%3$s" style="%4$s">%1$s</span>',
|
||||
esc_attr( et_pb_process_font_icon( $font_icon ) ),
|
||||
//esc_attr( " et_pb_animation_{$animation}" ),
|
||||
( 'on' === $use_circle ? ' et-pb-icon-circle' : '' ),
|
||||
( 'on' === $use_circle && 'on' === $use_circle_border ? ' et-pb-icon-circle-border' : '' ),
|
||||
$icon_style
|
||||
) : '';
|
||||
}
|
||||
|
||||
// Images: Add CSS Filters and Mix Blend Mode rules (if set)
|
||||
$generate_css_image_filters = '';
|
||||
if ( $image && array_key_exists( 'icon_settings', $this->advanced_fields ) && array_key_exists( 'css', $this->advanced_fields['icon_settings'] ) ) {
|
||||
$generate_css_image_filters = $this->generate_css_filters(
|
||||
$render_slug,
|
||||
'child_',
|
||||
self::$data_utils->array_get( $this->advanced_fields['icon_settings']['css'], 'main', '%%order_class%%' )
|
||||
);
|
||||
}
|
||||
|
||||
$image = $image ? sprintf( '<span class="dsm_flipbox_child_image_wrap">%1$s</span>', $image ) : '';
|
||||
$image = $image ? sprintf(
|
||||
'<div class="dsm_flipbox_child_image%2$s">%1$s</div>',
|
||||
$image,
|
||||
esc_attr( $generate_css_image_filters )
|
||||
) : '';
|
||||
|
||||
$video_background = $this->video_background();
|
||||
$parallax_image_background = $this->get_parallax_image_background();
|
||||
|
||||
$this->add_classname(
|
||||
array(
|
||||
"et_pb_bg_layout_{$background_layout}",
|
||||
sprintf( ' dsm_flipbox_icon_position_%1$s', esc_attr( $icon_placement ) ),
|
||||
)
|
||||
);
|
||||
|
||||
$output = sprintf(
|
||||
'%8$s
|
||||
%7$s
|
||||
%3$s
|
||||
<div class="dsm_flipbox_wrapper%6$s">
|
||||
%1$s
|
||||
%2$s
|
||||
%4$s
|
||||
%5$s
|
||||
</div>',
|
||||
$title,
|
||||
$subtitle,
|
||||
$image,
|
||||
'' !== $this->content ? sprintf(
|
||||
'<div class="dsm-content">%1$s</div>',
|
||||
et_core_sanitized_previously( $this->content )
|
||||
) : '',
|
||||
$button,
|
||||
$this->get_text_orientation_classname(),
|
||||
$video_background,
|
||||
$parallax_image_background
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_FlipBox_Perk_Child;
|
||||
@@ -0,0 +1,150 @@
|
||||
<?php
|
||||
|
||||
class DSM_GradientText extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_gradient_text';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Gradient Text', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% h1.dsm-gradient-text, %%order_class%% h2.dsm-gradient-text, %%order_class%% h3.dsm-gradient-text, %%order_class%% h4.dsm-gradient-text, %%order_class%% h5.dsm-gradient-text, %%order_class%% h6.dsm-gradient-text',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '30px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h1',
|
||||
),
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => true,
|
||||
'use_background_layout' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%%',
|
||||
),
|
||||
'options' => array(
|
||||
'background_layout' => array(
|
||||
'default' => 'light',
|
||||
),
|
||||
),
|
||||
),
|
||||
'background' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-gradient-text',
|
||||
),
|
||||
'options' => array(
|
||||
'use_background_color' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
'use_background_video' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
'use_background_color_gradient' => array(
|
||||
'default' => 'on',
|
||||
),
|
||||
'background_color_gradient_start' => array(
|
||||
'default' => 'rgba(131,0,233,0.78)',
|
||||
),
|
||||
'background_color_gradient_end' => array(
|
||||
'default' => 'rgba(41,196,169,0.62)',
|
||||
),
|
||||
'parallax_method' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'gradient_text' => array(
|
||||
'label' => esc_html__( 'Gradient Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => 'Supreme Gradient Text',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$gradient_text = $this->props['gradient_text'];
|
||||
$header_level = $this->props['header_level'];
|
||||
|
||||
if ( '' !== $gradient_text ) {
|
||||
$gradient_text = sprintf(
|
||||
'<%1$s class="dsm-gradient-text">%2$s</%1$s>',
|
||||
et_pb_process_header_level( $header_level, 'h1' ),
|
||||
$gradient_text
|
||||
);
|
||||
}
|
||||
|
||||
$this->add_classname(
|
||||
array(
|
||||
$this->get_text_orientation_classname(),
|
||||
)
|
||||
);
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'%1$s',
|
||||
$gradient_text
|
||||
);
|
||||
|
||||
return $output;
|
||||
//return $this->_render_module_wrapper( $output, $render_slug );
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_GradientText;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m17.95 21.31h-7.24v-.77c.49 0 .85-.14 1.11-.41.5-.54.43-1.45.42-1.46v-.03-6.94h-2.32c-.75 0-1.22.37-1.49.68-.15.18-.39.24-.61.15s-.36-.29-.36-.53v-4.43h13.75v4.43c0 .23-.14.44-.36.52s-.46.02-.61-.15c-.27-.31-.74-.68-1.49-.68h-2.32v6.97c0 .01-.07.92.42 1.46.26.28.62.41 1.11.41v.78zm-5.47-.77h3.71c-.59-.74-.55-1.76-.53-1.92v-7.69h3.09c.75 0 1.31.27 1.7.58v-3.17h-12.22v3.17c.39-.31.94-.58 1.7-.58h3.09v7.69c0 .16.05 1.18-.54 1.92z" fill="#fff"/><g fill="#03dac6"><path d="m5.35 6.67c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m7.84 24.09c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m22.65 24.09c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38c.01.76-.61 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,763 @@
|
||||
<?php
|
||||
|
||||
class DSM_Icon_List extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_icon_list';
|
||||
public $vb_support = 'on';
|
||||
public $child_slug = 'dsm_icon_list_child';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Icon List', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Icon Lists', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'icon_settings' => array(
|
||||
'title' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 70,
|
||||
),
|
||||
'list' => array(
|
||||
'title' => esc_html__( 'List Items', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 70,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'text' => array(
|
||||
'label' => esc_html__( '', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_icon_list_items, %%order_class%% .dsm_icon_list_child a .dsm_icon_list_text',
|
||||
'important' => '',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
'hide_header_level' => true,
|
||||
'hide_text_align' => true,
|
||||
'hide_text_shadow' => false,
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%% .dsm_icon_list_child',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
'icon' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_icon',
|
||||
'border_styles' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_icon',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),
|
||||
'list_item' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child',
|
||||
'border_styles' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'List Item', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'list',
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
'icon' => array(
|
||||
'label' => esc_html__( 'icon Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_icon',
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),
|
||||
'list_item' => array(
|
||||
'label' => esc_html__( 'List Item Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'list',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child',
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),
|
||||
),
|
||||
'button' => false,
|
||||
'link_options' => false,
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
$et_accent_color = et_builder_accent_color();
|
||||
return array(
|
||||
'icon_color' => array(
|
||||
'default' => $et_accent_color,
|
||||
'label' => esc_html__( 'Icon Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for your icon.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'hover' => 'tabs',
|
||||
'mobile_options' => true,
|
||||
),
|
||||
'icon_background_color' => array(
|
||||
'label' => esc_html__( 'Icon Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom background color for your icon.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'hover' => 'tabs',
|
||||
'mobile_options' => true,
|
||||
),
|
||||
'icon_padding' => array(
|
||||
'label' => esc_html__( 'Icon Padding', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'Here you can define a custom padding size for the icon.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'font_option',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'default_unit' => 'px',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '30',
|
||||
'step' => '1',
|
||||
),
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
'icon_font_size' => array(
|
||||
'label' => esc_html__( 'Icon Font Size', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'font_option',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'default' => '14px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '120',
|
||||
'step' => '1',
|
||||
),
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
'list_alignment' => array(
|
||||
'label' => esc_html__( 'Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'The List can be placed either above, below or in the center of the module.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'flex-start' => esc_html__( 'Left', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Center', 'dsm-supreme-modules-for-divi' ),
|
||||
'flex-end' => esc_html__( 'Right', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'flex-start',
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'list',
|
||||
),
|
||||
'list_vertical_alignment' => array(
|
||||
'label' => esc_html__( 'Vertical Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'The List can be placed either above, below or in the center of the module.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'flex-start' => esc_html__( 'Top', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Vertically Centered', 'dsm-supreme-modules-for-divi' ),
|
||||
'flex-end' => esc_html__( 'Bottom', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'center',
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'list',
|
||||
),
|
||||
'list_space_between' => array(
|
||||
'label' => esc_html__( 'Space Between', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '0px',
|
||||
'default_on_front' => '0px',
|
||||
'default_unit' => 'px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '100',
|
||||
'step' => '1',
|
||||
),
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'hover' => 'tabs',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'list',
|
||||
),
|
||||
'list_background' => array(
|
||||
'label' => esc_html__( 'Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for your list items.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'list',
|
||||
'hover' => 'tabs',
|
||||
'mobile_options' => true,
|
||||
),
|
||||
'list_padding' => array(
|
||||
'label' => esc_html__( 'Padding', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'custom_padding',
|
||||
'mobile_options' => true,
|
||||
'hover' => 'tabs',
|
||||
'option_category' => 'layout',
|
||||
'description' => esc_html__( 'Adjust padding to specific values, or leave blank to use the default padding.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'list',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
),
|
||||
'text_indent' => array(
|
||||
'label' => esc_html__( 'Text Indent', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'Here you can add padding between the icons and the text.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'font_option',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
'default' => '5px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '5px',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '100',
|
||||
'step' => '1',
|
||||
),
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_transition_fields_css_props() {
|
||||
$fields = parent::get_transition_fields_css_props();
|
||||
$fields['icon_color'] = array(
|
||||
'color' => '%%order_class%% .dsm_icon_list_child .dsm_icon_list_icon',
|
||||
);
|
||||
|
||||
$fields['icon_background_color'] = array(
|
||||
'background-color' => '%%order_class%% .dsm_icon_list_child .dsm_icon_list_icon',
|
||||
);
|
||||
|
||||
$fields['icon_font_size'] = array(
|
||||
'font-size' => '%%order_class%% .dsm_icon_list_child .dsm_icon_list_icon',
|
||||
);
|
||||
|
||||
$fields['icon_padding'] = array(
|
||||
'padding' => '%%order_class%% .dsm_icon_list_child .dsm_icon_list_icon',
|
||||
);
|
||||
|
||||
$fields['text_indent'] = array(
|
||||
'padding-left' => '%%order_class%% .dsm_icon_list_child .dsm_icon_list_text',
|
||||
);
|
||||
|
||||
$fields['list_space_between'] = array(
|
||||
'margin-bottom' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child:not(:last-child)',
|
||||
);
|
||||
|
||||
$fields['list_background'] = array(
|
||||
'background-color' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child',
|
||||
);
|
||||
|
||||
$fields['list_padding'] = array(
|
||||
'padding' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child',
|
||||
);
|
||||
|
||||
return $fields;
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$multi_view = et_pb_multi_view_options( $this );
|
||||
|
||||
$icon_color_hover = $this->get_hover_value( 'icon_color' );
|
||||
$icon_color = $this->props['icon_color'];
|
||||
$icon_color_tablet = $this->props['icon_color_tablet'];
|
||||
$icon_color_phone = $this->props['icon_color_phone'];
|
||||
$icon_color_last_edited = $this->props['icon_color_last_edited'];
|
||||
|
||||
$icon_background_color_hover = $this->get_hover_value( 'icon_background_color' );
|
||||
$icon_background_color = $this->props['icon_background_color'];
|
||||
$icon_background_color_tablet = $this->props['icon_background_color_tablet'];
|
||||
$icon_background_color_phone = $this->props['icon_background_color_phone'];
|
||||
$icon_background_color_last_edited = $this->props['icon_background_color_last_edited'];
|
||||
|
||||
$icon_padding = $this->props['icon_padding'];
|
||||
$icon_padding_hover = $this->get_hover_value( 'icon_padding' );
|
||||
$icon_padding_tablet = $this->props['icon_padding_tablet'];
|
||||
$icon_padding_phone = $this->props['icon_padding_phone'];
|
||||
$icon_padding_last_edited = $this->props['icon_padding_last_edited'];
|
||||
|
||||
$icon_font_size = $this->props['icon_font_size'];
|
||||
$icon_font_size_hover = $this->get_hover_value( 'icon_font_size' );
|
||||
$icon_font_size_tablet = $this->props['icon_font_size_tablet'];
|
||||
$icon_font_size_phone = $this->props['icon_font_size_phone'];
|
||||
$icon_font_size_last_edited = $this->props['icon_font_size_last_edited'];
|
||||
|
||||
$list_space_between_hover = $this->get_hover_value( 'list_space_between' );
|
||||
$list_space_between = $this->props['list_space_between'];
|
||||
$list_space_between_tablet = $this->props['list_space_between_tablet'];
|
||||
$list_space_between_phone = $this->props['list_space_between_phone'];
|
||||
$list_space_between_last_edited = $this->props['list_space_between_last_edited'];
|
||||
|
||||
$list_background_hover = $this->get_hover_value( 'list_background' );
|
||||
$list_background = $this->props['list_background'];
|
||||
$list_background_tablet = $this->props['list_background_tablet'];
|
||||
$list_background_phone = $this->props['list_background_phone'];
|
||||
$list_background_last_edited = $this->props['list_background_last_edited'];
|
||||
|
||||
$list_padding_hover = $this->get_hover_value( 'list_padding' );
|
||||
$list_padding = $this->props['list_padding'];
|
||||
$list_padding_values = et_pb_responsive_options()->get_property_values( $this->props, 'list_padding' );
|
||||
$list_padding_size_tablet = isset( $list_padding_values['tablet'] ) ? $list_padding_values['tablet'] : '';
|
||||
$list_padding_size_phone = isset( $list_padding_values['phone'] ) ? $list_padding_values['phone'] : '';
|
||||
|
||||
$text_indent = $this->props['text_indent'];
|
||||
$text_indent_hover = $this->get_hover_value( 'text_indent' );
|
||||
$text_indent_tablet = $this->props['text_indent_tablet'];
|
||||
$text_indent_phone = $this->props['text_indent_phone'];
|
||||
$text_indent_last_edited = $this->props['text_indent_last_edited'];
|
||||
|
||||
$list_alignment = $this->props['list_alignment'];
|
||||
$list_alignment_tablet = $this->props['list_alignment_tablet'];
|
||||
$list_alignment_phone = $this->props['list_alignment_phone'];
|
||||
$list_alignment_last_edited = $this->props['list_alignment_last_edited'];
|
||||
|
||||
$list_vertical_alignment = $this->props['list_vertical_alignment'];
|
||||
$list_vertical_alignment_tablet = $this->props['list_vertical_alignment_tablet'];
|
||||
$list_vertical_alignment_phone = $this->props['list_vertical_alignment_phone'];
|
||||
$list_vertical_alignment_last_edited = $this->props['list_vertical_alignment_last_edited'];
|
||||
|
||||
$icon_selector = '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child .dsm_icon_list_icon';
|
||||
$text_selector = '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child .dsm_icon_list_icon+.dsm_icon_list_text';
|
||||
|
||||
$font_size_responsive_active = et_pb_get_responsive_status( $icon_font_size_last_edited );
|
||||
|
||||
$font_size_values = array(
|
||||
'desktop' => $icon_font_size,
|
||||
'tablet' => $font_size_responsive_active ? $icon_font_size_tablet : '',
|
||||
'phone' => $font_size_responsive_active ? $icon_font_size_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $font_size_values, $icon_selector, 'font-size', $render_slug );
|
||||
|
||||
if ( '' !== $icon_padding ) {
|
||||
$icon_padding_responsive_active = et_pb_get_responsive_status( $icon_padding_last_edited );
|
||||
|
||||
$icon_padding_values = array(
|
||||
'desktop' => $icon_padding,
|
||||
'tablet' => $icon_padding_responsive_active ? $icon_padding_tablet : '',
|
||||
'phone' => $icon_padding_responsive_active ? $icon_padding_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $icon_padding_values, $icon_selector, 'padding', $render_slug );
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'icon_padding', $this->props ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( $icon_selector ),
|
||||
'declaration' => sprintf(
|
||||
'padding: %1$s;',
|
||||
esc_html( $icon_padding_hover )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$icon_style = sprintf( 'color: %1$s;', esc_attr( $icon_color ) );
|
||||
$icon_tablet_style = '' !== $icon_color_tablet ? sprintf( 'color: %1$s;', esc_attr( $icon_color_tablet ) ) : '';
|
||||
$icon_phone_style = '' !== $icon_color_phone ? sprintf( 'color: %1$s;', esc_attr( $icon_color_phone ) ) : '';
|
||||
$icon_style_hover = '';
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'icon_color', $this->props ) ) {
|
||||
$icon_style_hover = sprintf( 'color: %1$s;', esc_attr( $icon_color_hover ) );
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
if ( '' !== $icon_style_hover ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( $icon_selector ),
|
||||
'declaration' => $icon_style_hover,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$icon_background_style = sprintf( 'background-color: %1$s;', esc_attr( $icon_background_color ) );
|
||||
$icon_background_tablet_style = '' !== $icon_background_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $icon_background_color_tablet ) ) : '';
|
||||
$icon_background_phone_style = '' !== $icon_background_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $icon_background_color_phone ) ) : '';
|
||||
$icon_background_style_hover = '';
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'icon_background_color', $this->props ) ) {
|
||||
$icon_background_style_hover = sprintf( 'background-color: %1$s;', esc_attr( $icon_background_color_hover ) );
|
||||
}
|
||||
|
||||
if ( '' !== $icon_background_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_background_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_background_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_background_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
if ( '' !== $icon_background_style_hover ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( $icon_selector ),
|
||||
'declaration' => $icon_background_style_hover,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '5px' !== $text_indent ) {
|
||||
$text_indent_responsive_active = et_pb_get_responsive_status( $text_indent_last_edited );
|
||||
|
||||
$text_indent_values = array(
|
||||
'desktop' => $text_indent,
|
||||
'tablet' => $text_indent_responsive_active ? $text_indent_tablet : '',
|
||||
'phone' => $text_indent_responsive_active ? $text_indent_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $text_indent_values, $text_selector, 'padding-left', $render_slug );
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'text_indent', $this->props ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( $text_selector ),
|
||||
'declaration' => sprintf(
|
||||
'padding-left: %1$s;',
|
||||
esc_html( $text_indent_hover )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
$list_alignment_style = sprintf( 'justify-content: %1$s;', esc_attr( $list_alignment ) );
|
||||
$list_alignment_tablet_style = '' !== $list_alignment_tablet ? sprintf( 'justify-content: %1$s;', esc_attr( $list_alignment_tablet ) ) : '';
|
||||
$list_alignment_tablet_style = '' !== $list_alignment_phone ? sprintf( 'justify-content: %1$s;', esc_attr( $list_alignment_phone ) ) : '';
|
||||
|
||||
if ( 'flex-start' !== $list_alignment ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child, %%order_class%% .dsm_icon_list_items .dsm_icon_list_child a',
|
||||
'declaration' => $list_alignment_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child, %%order_class%% .dsm_icon_list_items .dsm_icon_list_child a',
|
||||
'declaration' => $list_alignment_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child, %%order_class%% .dsm_icon_list_items .dsm_icon_list_child a',
|
||||
'declaration' => $list_alignment_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
$list_vertical_alignment_style = sprintf( 'align-items: %1$s;', esc_attr( $list_vertical_alignment ) );
|
||||
$list_vertical_alignment_tablet_style = '' !== $list_vertical_alignment_tablet ? sprintf( 'align-items: %1$s;', esc_attr( $list_vertical_alignment_tablet ) ) : '';
|
||||
$list_vertical_alignment_tablet_style = '' !== $list_vertical_alignment_phone ? sprintf( 'align-items: %1$s;', esc_attr( $list_vertical_alignment_phone ) ) : '';
|
||||
|
||||
if ( 'center' !== $list_vertical_alignment ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child, %%order_class%% .dsm_icon_list_items .dsm_icon_list_child a',
|
||||
'declaration' => $list_vertical_alignment_style,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child, %%order_class%% .dsm_icon_list_items .dsm_icon_list_child a',
|
||||
'declaration' => $list_vertical_alignment_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child, %%order_class%% .dsm_icon_list_items .dsm_icon_list_child a',
|
||||
'declaration' => $list_vertical_alignment_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
if ( '' !== $list_space_between ) {
|
||||
$list_space_between_responsive_active = et_pb_get_responsive_status( $list_space_between_last_edited );
|
||||
|
||||
$list_space_between_values = array(
|
||||
'desktop' => $list_space_between,
|
||||
'tablet' => $list_space_between_responsive_active ? $list_space_between_tablet : '',
|
||||
'phone' => $list_space_between_responsive_active ? $list_space_between_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $list_space_between_values, '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child:not(:last-child)', 'margin-bottom', $render_slug );
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'list_space_between', $this->props ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child:not(:last-child)' ),
|
||||
'declaration' => sprintf(
|
||||
'margin-bottom: %1$s;',
|
||||
esc_html( $list_space_between_hover )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if ( '' !== $list_background ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $list_background )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $list_background_tablet ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $list_background_tablet )
|
||||
),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $list_background_phone ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $list_background_phone )
|
||||
),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'list_background', $this->props ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( '%%order_class%% .dsm_icon_list_items .dsm_icon_list_child' ),
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $list_background_hover )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$this->apply_custom_margin_padding(
|
||||
$render_slug,
|
||||
'list_padding',
|
||||
'padding',
|
||||
'%%order_class%% .dsm_icon_list_items .dsm_icon_list_child'
|
||||
);
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'<ul class="dsm_icon_list_items">%1$s</ul>',
|
||||
$this->content
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
/*credits https://github.com/elegantthemes/create-divi-extension/issues/125#issuecomment-445442095*/
|
||||
public function apply_custom_margin_padding( $function_name, $slug, $type, $class, $important = false ) {
|
||||
$slug_value = $this->props[ $slug ];
|
||||
$slug_value_tablet = $this->props[ $slug . '_tablet' ];
|
||||
$slug_value_phone = $this->props[ $slug . '_phone' ];
|
||||
$slug_value_last_edited = $this->props[ $slug . '_last_edited' ];
|
||||
$slug_value_responsive_active = et_pb_get_responsive_status( $slug_value_last_edited );
|
||||
|
||||
if ( isset( $slug_value ) && ! empty( $slug_value ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value, $type, $important ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $slug_value_tablet ) && ! empty( $slug_value_tablet ) && $slug_value_responsive_active ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value_tablet, $type, $important ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $slug_value_phone ) && ! empty( $slug_value_phone ) && $slug_value_responsive_active ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value_phone, $type, $important ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( et_builder_is_hover_enabled( $slug, $this->props ) ) {
|
||||
if ( isset( $this->props[ $slug . '__hover' ] ) ) {
|
||||
$hover = $this->props[ $slug . '__hover' ];
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( $class ),
|
||||
'declaration' => et_builder_get_element_style_css( $hover, $type, $important ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Icon_List;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g fill="#03dac6"><path d="m14.3 4.03c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m24.69 19.51c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m5.22 9.11c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/></g><path d="m6.99 11.02h-3.54c-.84 0-1.52-.68-1.52-1.52v-3.55c0-.84.68-1.52 1.52-1.52h3.54c.84 0 1.52.68 1.52 1.52v3.55c.01.84-.68 1.52-1.52 1.52zm-3.54-5.82c-.42 0-.76.34-.76.76v3.54c0 .42.34.76.76.76h3.54c.42 0 .76-.34.76-.76v-3.55c0-.42-.34-.76-.76-.76h-3.54z" fill="#fff"/><path d="m5.22 16.96c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m6.99 18.88h-3.54c-.84 0-1.52-.68-1.52-1.52v-3.54c0-.84.68-1.52 1.52-1.52h3.54c.84 0 1.52.68 1.52 1.52v3.54c.01.83-.68 1.52-1.52 1.52zm-3.54-5.83c-.42 0-.76.34-.76.76v3.54c0 .42.34.76.76.76h3.54c.42 0 .76-.34.76-.76v-3.54c0-.42-.34-.76-.76-.76z" fill="#fff"/><path d="m5.22 24.82c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><g fill="#fff"><path d="m6.99 26.73h-3.54c-.84 0-1.52-.68-1.52-1.52v-3.54c0-.84.68-1.52 1.52-1.52h3.54c.84 0 1.52.68 1.52 1.52v3.54c.01.84-.68 1.52-1.52 1.52zm-3.54-5.82c-.42 0-.76.34-.76.76v3.54c0 .42.34.76.76.76h3.54c.42 0 .76-.34.76-.76v-3.54c0-.42-.34-.76-.76-.76z"/><path d="m9.89 7.34h11.07v.77h-11.07z"/><path d="m9.89 15.2h11.07v.77h-11.07z"/><path d="m9.89 23.05h11.07v.77h-11.07z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,609 @@
|
||||
<?php
|
||||
|
||||
class DSM_Icon_List_Child extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_icon_list_child';
|
||||
public $vb_support = 'on';
|
||||
public $type = 'child';
|
||||
public $child_title_var = 'title';
|
||||
// If the attribute defined on $this->child_title_var is empty, this attribute will be used instead
|
||||
public $child_title_fallback_var = 'subtitle';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Icon List Item', 'dsm-supreme-modules-for-divi' );
|
||||
$this->advanced_setting_title_text = esc_html__( 'Icon List Item', 'dsm-supreme-modules-for-divi' );
|
||||
$this->settings_text = esc_html__( 'Icon List Settings', 'dsm-supreme-modules-for-divi' );
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Content', 'dsm-supreme-modules-for-divi' ),
|
||||
'link' => esc_html__( 'Link', 'dsm-supreme-modules-for-divi' ),
|
||||
'icon' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'icon_settings' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'text' => array(
|
||||
'title' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 49,
|
||||
),
|
||||
'width' => array(
|
||||
'title' => esc_html__( 'Sizing', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 65,
|
||||
),
|
||||
),
|
||||
),
|
||||
'custom_css' => array(
|
||||
'toggles' => array(
|
||||
'attributes' => array(
|
||||
'title' => esc_html__( 'Attributes', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 95,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'text' => array(
|
||||
'label' => esc_html__( '', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '.dsm_icon_list %%order_class%%.dsm_icon_list_child .dsm_icon_list_text, .dsm_icon_list %%order_class%%.dsm_icon_list_child a .dsm_icon_list_text',
|
||||
'important' => 'all',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1.7em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_header_level' => true,
|
||||
'hide_text_align' => true,
|
||||
'hide_text_shadow' => false,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => '.dsm_icon_list %%order_class%% .dsm_icon_list_child',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(),
|
||||
'icon' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => "%%order_class%% .dsm_icon_list_icon",
|
||||
'border_styles' => "%%order_class%% .dsm_icon_list_icon",
|
||||
)
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(),
|
||||
'icon' => array(
|
||||
'label' => esc_html__( 'icon Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_icon_list_icon',
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'main' => '.dsm_icon_list %%order_class%%',
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
'button' => false,
|
||||
'link_options' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
$et_accent_color = et_builder_accent_color();
|
||||
return array(
|
||||
'text' => array(
|
||||
'label' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'toggle_slug' => 'main_content',
|
||||
'default' => 'Icon List Item',
|
||||
'default_on_front' => 'Icon List Item',
|
||||
),
|
||||
'font_icon' => array(
|
||||
'label' => esc_html__( 'Icon', 'et_builder' ),
|
||||
'type' => 'select_icon',
|
||||
'option_category' => 'basic_option',
|
||||
'class' => array( 'et-pb-font-icon' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( 'Choose an icon to display with your text.', 'et_builder' ),
|
||||
'depends_show_if' => 'on',
|
||||
'hover' => 'tabs',
|
||||
'default' => 'P',
|
||||
'default_on_front' => 'P',
|
||||
),
|
||||
'icon_color' => array(
|
||||
'default' => $et_accent_color,
|
||||
'label' => esc_html__( 'Icon Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for your icon.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'hover' => 'tabs',
|
||||
'mobile_options' => true,
|
||||
),
|
||||
'icon_background_color' => array(
|
||||
'label' => esc_html__( 'Icon Background Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom background color for your icon.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'hover' => 'tabs',
|
||||
'mobile_options' => true,
|
||||
),
|
||||
'icon_padding' => array(
|
||||
'label' => esc_html__( 'Icon Padding', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'Here you can define a custom padding size for the icon.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'font_option',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'default_unit' => 'px',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '30',
|
||||
'step' => '1',
|
||||
),
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
'icon_font_size' => array(
|
||||
'label' => esc_html__( 'Icon Font Size', 'et_builder' ),
|
||||
'description' => esc_html__( 'Control the size of the icon by increasing or decreasing the font size.', 'et_builder' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'font_option',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'default' => '14px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front'=> '',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '120',
|
||||
'step' => '1',
|
||||
),
|
||||
'mobile_options' => true,
|
||||
'depends_show_if' => 'on',
|
||||
'responsive' => true,
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
'url' => array(
|
||||
'label' => esc_html__( 'Link URL', 'et_builder' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'If you would like to make your Icon List a link, input your destination URL here.', 'et_builder' ),
|
||||
'toggle_slug' => 'link_options',
|
||||
),
|
||||
'url_new_window' => array(
|
||||
'label' => esc_html__( 'Title Link Target', 'et_builder' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'In The Same Window', 'et_builder' ),
|
||||
'on' => esc_html__( 'In The New Tab', 'et_builder' ),
|
||||
),
|
||||
'toggle_slug' => 'link_options',
|
||||
'description' => esc_html__( 'Here you can choose whether or not your link opens in a new window', 'et_builder' ),
|
||||
'default_on_front'=> 'off',
|
||||
),
|
||||
'text_indent' => array(
|
||||
'label' => esc_html__( 'Text Indent', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'Here you can add padding between the icons and the text.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'font_option',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
'default' => '5px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front'=> '5px',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '100',
|
||||
'step' => '1',
|
||||
),
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_transition_fields_css_props() {
|
||||
$fields = parent::get_transition_fields_css_props();
|
||||
$fields['icon_color'] = array(
|
||||
'color' => '%%order_class%%.dsm_icon_list_child .dsm_icon_list_icon',
|
||||
);
|
||||
|
||||
$fields['icon_background_color'] = array(
|
||||
'background-color' => '%%order_class%%.dsm_icon_list_child .dsm_icon_list_icon',
|
||||
);
|
||||
|
||||
$fields['icon_font_size'] = array(
|
||||
'font-size' => '%%order_class%%.dsm_icon_list_child .dsm_icon_list_icon',
|
||||
);
|
||||
|
||||
$fields['icon_padding'] = array(
|
||||
'padding' => '%%order_class%% .dsm_icon_list_child .dsm_icon_list_icon',
|
||||
);
|
||||
|
||||
$fields['text_indent'] = array(
|
||||
'padding-left' => '%%order_class%%.dsm_icon_list_child .dsm_icon_list_text',
|
||||
);
|
||||
|
||||
return $fields;
|
||||
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$text = $this->props['text'];
|
||||
$url = $this->props['url'];
|
||||
$url_new_window = $this->props['url_new_window'];
|
||||
|
||||
$multi_view = et_pb_multi_view_options( $this );
|
||||
$font_icon = $this->props['font_icon'];
|
||||
$icon_font_size = $this->props['icon_font_size'];
|
||||
$icon_font_size_hover = $this->get_hover_value( 'icon_font_size' );
|
||||
$icon_font_size_tablet = $this->props['icon_font_size_tablet'];
|
||||
$icon_font_size_phone = $this->props['icon_font_size_phone'];
|
||||
$icon_font_size_last_edited = $this->props['icon_font_size_last_edited'];
|
||||
|
||||
$icon_color_hover = $this->get_hover_value( 'icon_color' );
|
||||
$icon_color = $this->props['icon_color'];
|
||||
$icon_color_tablet = $this->props['icon_color_tablet'];
|
||||
$icon_color_phone = $this->props['icon_color_phone'];
|
||||
$icon_color_last_edited = $this->props['icon_color_last_edited'];
|
||||
|
||||
$icon_background_color_hover = $this->get_hover_value( 'icon_background_color' );
|
||||
$icon_background_color = $this->props['icon_background_color'];
|
||||
$icon_background_color_tablet = $this->props['icon_background_color_tablet'];
|
||||
$icon_background_color_phone = $this->props['icon_background_color_phone'];
|
||||
$icon_background_color_last_edited = $this->props['icon_background_color_last_edited'];
|
||||
|
||||
$icon_padding = $this->props['icon_padding'];
|
||||
$icon_padding_hover = $this->get_hover_value( 'icon_padding' );
|
||||
$icon_padding_values = et_pb_responsive_options()->get_property_values( $this->props, 'icon_padding' );
|
||||
$icon_padding_tablet = isset( $icon_padding_values['tablet'] ) ? $icon_padding_values['tablet'] : '';
|
||||
$icon_padding_phone = isset( $icon_padding_values['phone'] ) ? $icon_padding_values['phone'] : '';
|
||||
$icon_padding_last_edited = $this->props['icon_padding_last_edited'];
|
||||
|
||||
$text_indent = $this->props['text_indent'];
|
||||
$text_indent_hover = $this->get_hover_value( 'text_indent' );
|
||||
$text_indent_tablet = $this->props['text_indent_tablet'];
|
||||
$text_indent_phone = $this->props['text_indent_phone'];
|
||||
$text_indent_last_edited = $this->props['text_indent_last_edited'];
|
||||
|
||||
$icon_selector = '.dsm_icon_list .dsm_icon_list_items %%order_class%%.dsm_icon_list_child .dsm_icon_list_icon';
|
||||
$text_selector = '.dsm_icon_list .dsm_icon_list_items %%order_class%%.dsm_icon_list_child .dsm_icon_list_icon+.dsm_icon_list_text';
|
||||
|
||||
$font_size_responsive_active = et_pb_get_responsive_status( $icon_font_size_last_edited );
|
||||
|
||||
$font_size_values = array(
|
||||
'desktop' => $icon_font_size,
|
||||
'tablet' => $font_size_responsive_active ? $icon_font_size_tablet : '',
|
||||
'phone' => $font_size_responsive_active ? $icon_font_size_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $font_size_values, $icon_selector, 'font-size', $render_slug );
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'icon_font_size', $this->props ) ) {
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $this->add_hover_to_order_class( $icon_selector ),
|
||||
'declaration' => sprintf(
|
||||
'font-size: %1$s;',
|
||||
esc_html( $icon_font_size_hover )
|
||||
),
|
||||
) );
|
||||
}
|
||||
|
||||
if ( '' !== $icon_padding ) {
|
||||
$icon_padding_responsive_active = et_pb_get_responsive_status( $icon_padding_last_edited );
|
||||
|
||||
$icon_padding_values = array(
|
||||
'desktop' => $icon_padding,
|
||||
'tablet' => $icon_padding_responsive_active ? $icon_padding_tablet : '',
|
||||
'phone' => $icon_padding_responsive_active ? $icon_padding_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $icon_padding_values, $icon_selector, 'padding', $render_slug );
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'icon_padding', $this->props ) ) {
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $this->add_hover_to_order_class( $icon_selector ),
|
||||
'declaration' => sprintf(
|
||||
'padding: %1$s;',
|
||||
esc_html( $icon_padding_hover )
|
||||
),
|
||||
) );
|
||||
}
|
||||
}
|
||||
|
||||
$icon_style = sprintf( 'color: %1$s;', esc_attr( $icon_color ) );
|
||||
$icon_tablet_style = '' !== $icon_color_tablet ? sprintf( 'color: %1$s;', esc_attr( $icon_color_tablet ) ) : '';
|
||||
$icon_phone_style = '' !== $icon_color_phone ? sprintf( 'color: %1$s;', esc_attr( $icon_color_phone ) ) : '';
|
||||
$icon_style_hover = '';
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'icon_color', $this->props ) ) {
|
||||
$icon_style_hover = sprintf( 'color: %1$s;', esc_attr( $icon_color_hover ) );
|
||||
}
|
||||
|
||||
if ( $icon_color !== et_builder_accent_color() ) {
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_style,
|
||||
) );
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
) );
|
||||
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
) );
|
||||
|
||||
if ( '' !== $icon_style_hover ) {
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $this->add_hover_to_order_class( $icon_selector ),
|
||||
'declaration' => $icon_style_hover,
|
||||
) );
|
||||
}
|
||||
|
||||
$icon_background_style = sprintf( 'background-color: %1$s;', esc_attr( $icon_background_color ) );
|
||||
$icon_background_tablet_style = '' !== $icon_background_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $icon_background_color_tablet ) ) : '';
|
||||
$icon_background_phone_style = '' !== $icon_background_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $icon_background_color_phone ) ) : '';
|
||||
$icon_background_style_hover = '';
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'icon_background_color', $this->props ) ) {
|
||||
$icon_background_style_hover = sprintf( 'background-color: %1$s;', esc_attr( $icon_background_color_hover ) );
|
||||
}
|
||||
|
||||
if ( '' !== $icon_background_color ) {
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_background_style,
|
||||
) );
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_background_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
) );
|
||||
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $icon_selector,
|
||||
'declaration' => $icon_background_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
) );
|
||||
|
||||
if ( '' !== $icon_background_style_hover ) {
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $this->add_hover_to_order_class( $icon_selector ),
|
||||
'declaration' => $icon_background_style_hover,
|
||||
) );
|
||||
}
|
||||
|
||||
if ( '5px' !== $text_indent ) {
|
||||
$text_indent_responsive_active = et_pb_get_responsive_status( $text_indent_last_edited );
|
||||
|
||||
$text_indent_values = array(
|
||||
'desktop' => $text_indent,
|
||||
'tablet' => $text_indent_responsive_active ? $text_indent_tablet : '',
|
||||
'phone' => $text_indent_responsive_active ? $text_indent_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $text_indent_values, $text_selector, 'padding-left', $render_slug );
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'text_indent', $this->props ) ) {
|
||||
ET_Builder_Element::set_style( $render_slug, array(
|
||||
'selector' => $this->add_hover_to_order_class( $text_selector ),
|
||||
'declaration' => sprintf(
|
||||
'padding-left: %1$s;',
|
||||
esc_html( $text_indent_hover )
|
||||
),
|
||||
) );
|
||||
}
|
||||
}
|
||||
|
||||
$icon = $multi_view->render_element( array(
|
||||
'tag' => 'span',
|
||||
'content' => '{{font_icon}}',
|
||||
'attrs' => array(
|
||||
'class' => 'dsm_icon_list_icon',
|
||||
),
|
||||
) );
|
||||
|
||||
$text = $multi_view->render_element( array(
|
||||
'tag' => 'span',
|
||||
'content' => '{{text}}',
|
||||
'attrs' => array(
|
||||
'class' => 'dsm_icon_list_text',
|
||||
),
|
||||
) );
|
||||
|
||||
$content = '';
|
||||
|
||||
if ('' !== $url) {
|
||||
$content = sprintf(
|
||||
'<a href="%3$s"%4$s>%2$s%1$s</a>',
|
||||
et_core_esc_previously( $text ),
|
||||
$icon,
|
||||
esc_url( $url ),
|
||||
'on' === $url_new_window ? ' target="_blank"' : ''
|
||||
);
|
||||
} else {
|
||||
$content = sprintf(
|
||||
'%2$s%1$s',
|
||||
et_core_esc_previously( $text ),
|
||||
$icon
|
||||
);
|
||||
}
|
||||
|
||||
// Remove automatically added classnames
|
||||
$this->remove_classname( array(
|
||||
'et_pb_module',
|
||||
'et_pb_section_video',
|
||||
'et_pb_preload',
|
||||
'et_pb_section_parallax',
|
||||
) );
|
||||
|
||||
$video_background = $this->video_background();
|
||||
$parallax_image_background = $this->get_parallax_image_background();
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'%1$s',
|
||||
$content
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrap module's rendered output with proper module wrapper. Ensuring module has consistent
|
||||
* wrapper output which compatible with module attribute and background insertion.
|
||||
*
|
||||
* @since 3.1
|
||||
*
|
||||
* @param string $output Module's rendered output
|
||||
* @param string $render_slug Slug of module that is used for rendering output
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
protected function _render_module_wrapper( $output = '', $render_slug = '' ) {
|
||||
$wrapper_settings = $this->get_wrapper_settings( $render_slug );
|
||||
$slug = $render_slug;
|
||||
$outer_wrapper_attrs = $wrapper_settings['attrs'];
|
||||
$inner_wrapper_attrs = $wrapper_settings['inner_attrs'];
|
||||
|
||||
/**
|
||||
* Filters the HTML attributes for the module's outer wrapper. The dynamic portion of the
|
||||
* filter name, '$slug', corresponds to the module's slug.
|
||||
*
|
||||
* @since 3.23 Add support for responsive video background.
|
||||
* @since 3.1
|
||||
*
|
||||
* @param string[] $outer_wrapper_attrs
|
||||
* @param ET_Builder_Element $module_instance
|
||||
*/
|
||||
$outer_wrapper_attrs = apply_filters( "et_builder_module_{$slug}_outer_wrapper_attrs", $outer_wrapper_attrs, $this );
|
||||
|
||||
/**
|
||||
* Filters the HTML attributes for the module's inner wrapper. The dynamic portion of the
|
||||
* filter name, '$slug', corresponds to the module's slug.
|
||||
*
|
||||
* @since 3.1
|
||||
*
|
||||
* @param string[] $inner_wrapper_attrs
|
||||
* @param ET_Builder_Element $module_instance
|
||||
*/
|
||||
$inner_wrapper_attrs = apply_filters( "et_builder_module_{$slug}_inner_wrapper_attrs", $inner_wrapper_attrs, $this );
|
||||
|
||||
return sprintf(
|
||||
'<li%1$s>
|
||||
%2$s
|
||||
%3$s
|
||||
%6$s
|
||||
%7$s
|
||||
%5$s
|
||||
</li>',
|
||||
et_html_attrs( $outer_wrapper_attrs ),
|
||||
$wrapper_settings['parallax_background'],
|
||||
$wrapper_settings['video_background'],
|
||||
et_html_attrs( $inner_wrapper_attrs ),
|
||||
$output,
|
||||
et_()->array_get( $wrapper_settings, 'video_background_tablet', '' ),
|
||||
et_()->array_get( $wrapper_settings, 'video_background_phone', '' )
|
||||
);
|
||||
}
|
||||
/**
|
||||
* Filter multi view value.
|
||||
*
|
||||
* @since 3.27.1
|
||||
*
|
||||
* @see ET_Builder_Module_Helper_MultiViewOptions::filter_value
|
||||
*
|
||||
* @param mixed $raw_value Props raw value.
|
||||
* @param array $args {
|
||||
* Context data.
|
||||
*
|
||||
* @type string $context Context param: content, attrs, visibility, classes.
|
||||
* @type string $name Module options props name.
|
||||
* @type string $mode Current data mode: desktop, hover, tablet, phone.
|
||||
* @type string $attr_key Attribute key for attrs context data. Example: src, class, etc.
|
||||
* @type string $attr_sub_key Attribute sub key that availabe when passing attrs value as array such as styes. Example: padding-top, margin-botton, etc.
|
||||
* }
|
||||
* @param ET_Builder_Module_Helper_MultiViewOptions $multi_view Multiview object instance.
|
||||
*
|
||||
* @return mixed
|
||||
*/
|
||||
public function multi_view_filter_value( $raw_value, $args, $multi_view ) {
|
||||
$name = isset( $args['name'] ) ? $args['name'] : '';
|
||||
$mode = isset( $args['mode'] ) ? $args['mode'] : '';
|
||||
|
||||
if ( $raw_value && 'font_icon' === $name ) {
|
||||
$processed_value = html_entity_decode( et_pb_process_font_icon( $raw_value ) );
|
||||
if ( '%%1%%' === $raw_value ) {
|
||||
$processed_value = "\"";
|
||||
}
|
||||
|
||||
return $processed_value;
|
||||
}
|
||||
|
||||
$fields_need_escape = array(
|
||||
'button_text',
|
||||
);
|
||||
|
||||
if ( $raw_value && in_array( $name, $fields_need_escape, true ) ) {
|
||||
return $this->_esc_attr( $multi_view->get_name_by_mode( $name, $mode ) );
|
||||
}
|
||||
|
||||
return $raw_value;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Icon_List_Child;
|
||||
@@ -0,0 +1,595 @@
|
||||
<?php
|
||||
|
||||
class DSM_ImageAccordion extends ET_Builder_Module {
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->slug = 'dsm_image_accordion';
|
||||
$this->child_slug = 'dsm_image_accordion_child';
|
||||
$this->vb_support = 'on';
|
||||
$this->name = esc_html__( 'Supreme Image Accordion', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
$this->main_css_element = '%%order_class%%';
|
||||
}
|
||||
|
||||
public function get_settings_modal_toggles() {
|
||||
return array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'settings' => esc_html__( 'Accordion Settings', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'overlay' => esc_html__( 'Overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
'ia_icon' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'ia_image' => esc_html__( 'Icon Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'ia_title' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'ia_desc' => esc_html__( 'Description', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
|
||||
$fields = array();
|
||||
|
||||
$fields['image_accordion_type'] = array(
|
||||
'label' => esc_html__( 'Accordion Type', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'default' => 'on_hover',
|
||||
'options' => array(
|
||||
'on_hover' => esc_html__( 'By Hover', 'dsm-supreme-modules-for-divi' ),
|
||||
'on_click' => esc_html__( 'By Click', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'settings',
|
||||
);
|
||||
|
||||
$fields['image_accordion_animation'] = array(
|
||||
'label' => esc_html__( 'Accordion Content Animation', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'default' => 'fade_in',
|
||||
'options' => array(
|
||||
'fade_in' => esc_html__( 'Fade In', 'dsm-supreme-modules-for-divi' ),
|
||||
'zoom_in' => esc_html__( 'Zoom In', 'dsm-supreme-modules-for-divi' ),
|
||||
'push_up' => esc_html__( 'Push Up', 'dsm-supreme-modules-for-divi' ),
|
||||
'push_down' => esc_html__( 'Push Down', 'dsm-supreme-modules-for-divi' ),
|
||||
'push_left' => esc_html__( 'Push Left', 'dsm-supreme-modules-for-divi' ),
|
||||
'push_right' => esc_html__( 'Push Right', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'settings',
|
||||
);
|
||||
|
||||
$fields['image_accordion_animation_sequence'] = array(
|
||||
'label' => esc_html__( 'Use Sequenced Animation', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'default' => 'off',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'settings',
|
||||
);
|
||||
|
||||
$fields['ia_direction'] = array(
|
||||
'label' => esc_html__( 'Accordion Direction', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'default' => 'horizontal',
|
||||
'mobile_options' => true,
|
||||
'options' => array(
|
||||
'horizontal' => esc_html__( 'Horizontal', 'dsm-supreme-modules-for-divi' ),
|
||||
'vertical' => esc_html__( 'Vertical', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'settings',
|
||||
);
|
||||
|
||||
$fields['ia_height'] = array(
|
||||
'label' => esc_html__( 'Accordion Height', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'default' => '380px',
|
||||
'default_unit' => 'px',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '1200',
|
||||
'step' => '10',
|
||||
),
|
||||
'validate_unit' => true,
|
||||
'mobile_options' => true,
|
||||
'toggle_slug' => 'settings',
|
||||
);
|
||||
/*
|
||||
$fields['anim_speed'] = array(
|
||||
'label' => esc_html__( 'Toggle Animation Speed', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'default' => '300ms',
|
||||
'default_unit' => 'ms',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '2000',
|
||||
'step' => '1',
|
||||
),
|
||||
'toggle_slug' => 'settings',
|
||||
);
|
||||
|
||||
$fields['anim_delay'] = array(
|
||||
'label' => esc_html__( 'Toggle Animation Delay', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'default' => '80ms',
|
||||
'default_unit' => 'ms',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '2000',
|
||||
'step' => '1',
|
||||
),
|
||||
'toggle_slug' => 'settings',
|
||||
);*/
|
||||
|
||||
$fields['ia_icon_color'] = array(
|
||||
'label' => esc_html__( 'Icon Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'tab_slug' => 'advanced',
|
||||
'default' => '#fff',
|
||||
'mobile_options' => true,
|
||||
'toggle_slug' => 'ia_icon',
|
||||
);
|
||||
|
||||
$fields['use_ia_icon_font_size'] = array(
|
||||
'label' => esc_html__( 'Use Icon Font Size', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_icon',
|
||||
);
|
||||
|
||||
$fields['ia_icon_font_size'] = array(
|
||||
'label' => esc_html__( 'Icon Font Size', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'default' => '40px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '40px',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'show_if' => array(
|
||||
'use_ia_icon_font_size' => 'on',
|
||||
),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '150',
|
||||
'step' => '1',
|
||||
),
|
||||
'validate_unit' => true,
|
||||
'mobile_options' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_icon',
|
||||
);
|
||||
|
||||
$fields['overlay_color'] = array(
|
||||
'label' => esc_html__( 'Overlay Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'mobile_options' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'overlay',
|
||||
'hover' => 'tabs',
|
||||
);
|
||||
|
||||
return $fields;
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
|
||||
$advanced_fields = array();
|
||||
$advanced_fields['text'] = false;
|
||||
$advanced_fields['text_shadow'] = false;
|
||||
$advanced_fields['fonts'] = false;
|
||||
|
||||
$advanced_fields['fonts']['title'] = array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_image_accordion_title',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
'toggle_slug' => 'ia_title',
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '3',
|
||||
'step' => '0.1',
|
||||
),
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h3',
|
||||
),
|
||||
'important' => 'all',
|
||||
);
|
||||
|
||||
$advanced_fields['fonts']['desc'] = array(
|
||||
'label' => esc_html__( 'Description', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_image_accordion_description',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '3',
|
||||
'step' => '0.1',
|
||||
),
|
||||
),
|
||||
'toggle_slug' => 'ia_desc',
|
||||
);
|
||||
|
||||
$advanced_fields['borders']['default'] = array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
$advanced_fields['box_shadow']['default'] = array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
);
|
||||
|
||||
$advanced_fields['borders']['image'] = array(
|
||||
'label_prefix' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm-accordion-image',
|
||||
'border_styles' => '%%order_class%% .dsm-accordion-image',
|
||||
),
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_image',
|
||||
);
|
||||
|
||||
$advanced_fields['box_shadow']['image'] = array(
|
||||
'label' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-accordion-image',
|
||||
'overlay' => 'inset',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_image',
|
||||
);
|
||||
|
||||
$advanced_fields['button']['button'] = array(
|
||||
'label' => esc_html__( 'Button', 'dsm-supreme-modules-for-divi' ),
|
||||
'use_alignment' => true,
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_ia_button.et_pb_button',
|
||||
'alignment' => '%%order_class%% .dsm_image_accordion_child_content .et_pb_button_wrapper.dsm_image_accordion_button_wrapper',
|
||||
'important' => true,
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_ia_button.et_pb_button',
|
||||
'important' => true,
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_ia_button.et_pb_button',
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
return $advanced_fields;
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
|
||||
$this->apply_css( $render_slug );
|
||||
$this->add_classname(
|
||||
array(
|
||||
"dsm_image_accordion_animation_{$this->props['image_accordion_animation']}",
|
||||
"dsm_image_accordion_animation_sequence_{$this->props['image_accordion_animation_sequence']}",
|
||||
)
|
||||
);
|
||||
wp_enqueue_script( 'dsm-image-accordion' );
|
||||
|
||||
return sprintf(
|
||||
'<div class="dsm_image_accordion_wrapper dsm_image_accordion_trigger_%2$s">
|
||||
%1$s
|
||||
</div>',
|
||||
et_core_sanitized_previously( $this->content ),
|
||||
$this->props['image_accordion_type']
|
||||
);
|
||||
}
|
||||
|
||||
public function apply_css( $render_slug ) {
|
||||
$this->height_css( $render_slug );
|
||||
$ia_direction = $this->props['ia_direction'];
|
||||
$ia_direction_tablet = $this->props['ia_direction_tablet'];
|
||||
$ia_direction_phone = $this->props['ia_direction_phone'];
|
||||
$ia_direction_last_edited = $this->props['ia_direction_last_edited'];
|
||||
|
||||
$ia_direction_responsive_status = et_pb_get_responsive_status( $ia_direction_last_edited );
|
||||
|
||||
if ( 'vertical' === $ia_direction ) :
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => 'flex-direction: column;',
|
||||
)
|
||||
);
|
||||
|
||||
elseif ( 'horizontal' === $ia_direction ) :
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => 'flex-direction: row;',
|
||||
)
|
||||
);
|
||||
|
||||
endif;
|
||||
|
||||
if ( $ia_direction_responsive_status ) {
|
||||
|
||||
if ( 'vertical' === $ia_direction_tablet ) :
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => 'flex-direction: column;',
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
elseif ( 'horizontal' === $ia_direction_tablet ) :
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => 'flex-direction: row;',
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
endif;
|
||||
|
||||
if ( 'vertical' === $ia_direction_phone ) :
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => 'flex-direction: column;',
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
elseif ( 'horizontal' === $ia_direction_phone ) :
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => 'flex-direction: row;',
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
endif;
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child .dsm_image_accordion_child_content, %%order_class%% .dsm_image_accordion_child.dsm_image_accordion_active_item .dsm_image_accordion_child_content',
|
||||
'declaration' => sprintf( 'transition-duration: %1$s;', $this->props['image_accordion_animation_speed'] ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child',
|
||||
'declaration' => sprintf( 'transition-duration: %1$s;', $this->props['anim_speed'] ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child, %%order_class%% .dsm_image_accordion_child.dsm_image_accordion_active_item .dsm_image_accordion_child_content',
|
||||
'declaration' => sprintf( 'transition-delay: %1$s;', $this->props['anim_delay'] ),
|
||||
)
|
||||
);*/
|
||||
|
||||
$use_ia_icon_font_size = $this->props['use_ia_icon_font_size'];
|
||||
|
||||
$ia_icon_color = $this->props['ia_icon_color'];
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "color: {$ia_icon_color};",
|
||||
)
|
||||
);
|
||||
|
||||
$ia_icon_color_last_edited = $this->props['ia_icon_color_last_edited'];
|
||||
$ia_icon_color_responsive_status = et_pb_get_responsive_status( $ia_icon_color_last_edited );
|
||||
|
||||
if ( $ia_icon_color_responsive_status ) {
|
||||
|
||||
$ia_icon_color_tablet = $this->props['ia_icon_color_tablet'];
|
||||
$ia_icon_color_phone = $this->props['ia_icon_color_phone'];
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "color: {$ia_icon_color_tablet};",
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "color: {$ia_icon_color_phone};",
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'on' === $use_ia_icon_font_size ) {
|
||||
$ia_icon_font_size = $this->props['ia_icon_font_size'];
|
||||
$ia_icon_font_size_tablet = $this->props['ia_icon_font_size_tablet'];
|
||||
$ia_icon_font_size_phone = $this->props['ia_icon_font_size_phone'];
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "font-size: {$ia_icon_font_size};",
|
||||
)
|
||||
);
|
||||
|
||||
$ia_icon_font_size_last_edited = $this->props['ia_icon_font_size_last_edited'];
|
||||
$ia_icon_font_size_responsive_status = et_pb_get_responsive_status( $ia_icon_font_size_last_edited );
|
||||
|
||||
if ( $ia_icon_font_size_responsive_status ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "font-size: {$ia_icon_font_size_tablet};",
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "font-size: {$ia_icon_font_size_phone};",
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay.
|
||||
if ( '' !== $this->props['overlay_color'] ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child>div:before',
|
||||
'declaration' => sprintf(
|
||||
'background: %1$s;',
|
||||
$this->props['overlay_color']
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$overlay_color_last_edited = $this->props['overlay_color_last_edited'];
|
||||
$overlay_color_responsive_status = et_pb_get_responsive_status( $overlay_color_last_edited );
|
||||
if ( $overlay_color_responsive_status ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child>div:before',
|
||||
'declaration' => sprintf(
|
||||
'background: %1$s;',
|
||||
$this->props['overlay_color_tablet']
|
||||
),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child>div:before',
|
||||
'declaration' => sprintf(
|
||||
'background: %1$s;',
|
||||
$this->props['overlay_color_phone']
|
||||
),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
if ( isset( $this->props['overlay_color__hover'] ) ) {
|
||||
|
||||
$overlay_color_hover = explode( '|', $this->props['overlay_color__hover'] );
|
||||
|
||||
if ( isset( $overlay_color_hover ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%%:hover .dsm_image_accordion_child>div:before',
|
||||
'declaration' => sprintf(
|
||||
'background: %1$s;',
|
||||
$this->props['overlay_color__hover']
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function height_css( $render_slug ) {
|
||||
$ia_height = $this->props['ia_height'];
|
||||
$ia_height_tablet = $this->props['ia_height_tablet'];
|
||||
$ia_height_phone = $this->props['ia_height_phone'];
|
||||
|
||||
$ia_height_last_edited = $this->props['ia_height_last_edited'];
|
||||
$ia_height_responsive_status = et_pb_get_responsive_status( $ia_height_last_edited );
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => sprintf( 'height: %1$s;', $ia_height ),
|
||||
)
|
||||
);
|
||||
|
||||
if ( $ia_height_responsive_status ) {
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => sprintf( 'height: %1$s;', $ia_height_tablet ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_wrapper',
|
||||
'declaration' => sprintf( 'height: %1$s;', $ia_height_phone ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_ImageAccordion();
|
||||
1
wp-content/plugins/supreme-modules-for-divi/includes/modules/ImageAccordion/frontend.min.js
vendored
Normal file
1
wp-content/plugins/supreme-modules-for-divi/includes/modules/ImageAccordion/frontend.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
jQuery(function(i){i(".dsm_image_accordion").each(function(){let a=i(this),_=a.find(".dsm_image_accordion_wrapper"),e=a.find(".dsm_image_accordion_child");_.hasClass("dsm_image_accordion_trigger_on_hover")&&(e.mouseenter(function(){e.removeClass("dsm_image_accordion_active_item"),i(this).addClass("dsm_image_accordion_active_item")}),e.mouseleave(function(){e.removeClass("dsm_image_accordion_active_item")})),_.hasClass("dsm_image_accordion_trigger_on_click")&&(a.addClass("dsm_image_accordion_click_item"),e.click(function(a){i(this).hasClass("dsm_image_accordion_active_item")||(e.removeClass("dsm_image_accordion_active_item"),i(this).addClass("dsm_image_accordion_active_item"))}))})});
|
||||
@@ -0,0 +1,21 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(0.18774,0,0,0.18774,-0.0795791,-0.0795791)">
|
||||
<g>
|
||||
<path d="M137.77,144.17C137.767,144.17 137.763,144.17 137.76,144.17C133.541,144.17 130.07,140.699 130.07,136.48C130.07,132.261 133.541,128.79 137.76,128.79C141.979,128.79 145.45,132.261 145.45,136.48C145.45,136.483 145.45,136.487 145.45,136.49C145.439,140.699 141.979,144.159 137.77,144.17ZM137.77,133.06C137.767,133.06 137.763,133.06 137.76,133.06C135.878,133.06 134.33,134.608 134.33,136.49C134.33,138.372 135.878,139.92 137.76,139.92C139.642,139.92 141.19,138.372 141.19,136.49C141.19,134.612 139.648,133.065 137.77,133.06Z" style="fill:rgb(3,218,198);fill-rule:nonzero;"/>
|
||||
<path d="M7.73,115.79C7.727,115.79 7.723,115.79 7.72,115.79C5.976,115.79 4.54,114.355 4.54,112.61C4.54,110.866 5.976,109.43 7.72,109.43C9.464,109.43 10.9,110.866 10.9,112.61C10.9,114.351 9.471,115.785 7.73,115.79ZM7.73,111.2C7.727,111.2 7.723,111.2 7.72,111.2C6.941,111.2 6.3,111.841 6.3,112.62C6.3,113.399 6.941,114.04 7.72,114.04C8.499,114.04 9.14,113.399 9.14,112.62C9.14,112.617 9.14,112.613 9.14,112.61C9.135,111.839 8.501,111.205 7.73,111.2Z" style="fill:rgb(3,218,198);fill-rule:nonzero;"/>
|
||||
<path d="M80.63,17.64C77.388,17.64 74.72,14.972 74.72,11.73C74.72,8.488 77.388,5.82 80.63,5.82C83.872,5.82 86.54,8.488 86.54,11.73C86.54,14.972 83.872,17.64 80.63,17.64ZM80.63,9.1C79.187,9.1 78,10.287 78,11.73C78,13.173 79.187,14.36 80.63,14.36C82.073,14.36 83.26,13.173 83.26,11.73C83.26,10.287 82.073,9.1 80.63,9.1Z" style="fill:rgb(3,218,198);fill-rule:nonzero;"/>
|
||||
<rect x="38.12" y="66.57" width="33.33" height="3.9" style="fill:rgb(3,218,198);"/>
|
||||
<rect x="38.12" y="76.28" width="21.59" height="3.9" style="fill:rgb(3,218,198);"/>
|
||||
<rect x="38.12" y="86.94" width="33.33" height="3.9" style="fill:white;"/>
|
||||
<path d="M138.87,21.32L64.87,21.32L64.87,24.82L86.4,24.82L86.4,121.62L23.15,121.62L23.15,24.82L33,24.82L33,21.32L22.58,21.32C20.987,21.357 19.687,22.657 19.65,24.25L19.65,122.19C19.687,123.783 20.987,125.083 22.58,125.12L138.67,125.12C140.263,125.083 141.563,123.783 141.6,122.19L141.6,24.25C141.606,24.177 141.609,24.103 141.609,24.03C141.609,22.543 140.386,21.32 138.899,21.32C138.889,21.32 138.88,21.32 138.87,21.32ZM112.15,121.62L90.09,121.62L90.09,24.82L112.15,24.82L112.15,121.62ZM138.3,121.82L115.65,121.82L115.65,24.82L138.3,24.82L138.3,121.82Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<g>
|
||||
<path d="M48.91,19.74C46.584,19.74 44.67,21.654 44.67,23.98C44.67,26.306 46.584,28.22 48.91,28.22C51.228,28.22 53.139,26.318 53.15,24C53.15,23.993 53.15,23.987 53.15,23.98C53.15,21.654 51.236,19.74 48.91,19.74C48.91,19.74 48.91,19.74 48.91,19.74ZM48.91,26.13C47.731,26.13 46.76,25.159 46.76,23.98C46.76,22.801 47.731,21.83 48.91,21.83C50.09,21.83 51.06,22.801 51.06,23.98C51.06,23.987 51.06,23.993 51.06,24C51.044,25.17 50.08,26.125 48.91,26.13Z" style="fill:rgb(3,218,198);fill-rule:nonzero;"/>
|
||||
<path d="M64.85,22.77L63.85,22.24L63.85,37.17C63.845,40.26 61.3,42.8 58.21,42.8C58.207,42.8 58.203,42.8 58.2,42.8L39.61,42.8C36.529,42.789 34,40.251 34,37.17L34,18.57C34,15.481 36.541,12.94 39.63,12.94L58.2,12.94C58.884,12.944 59.562,13.073 60.2,13.32L61.13,11.44C60.195,11.052 59.192,10.855 58.18,10.86L39.61,10.86C35.379,10.86 31.895,14.339 31.89,18.57L31.89,37.17C31.89,41.405 35.375,44.89 39.61,44.89L58.2,44.89C62.437,44.89 65.925,41.407 65.93,37.17L65.93,22.11L64.85,22.77Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M31.89,22.11L31.89,37.17C31.895,41.407 35.383,44.89 39.62,44.89L58.21,44.89C62.445,44.89 65.93,41.405 65.93,37.17L65.93,18.57C65.925,14.339 62.441,10.86 58.21,10.86L39.62,10.86C38.608,10.855 37.605,11.052 36.67,11.44L37.6,13.32C38.238,13.073 38.916,12.944 39.6,12.94L58.21,12.94C61.299,12.94 63.84,15.481 63.84,18.57L63.84,37.17C63.84,40.259 61.299,42.8 58.21,42.8L39.62,42.8C36.537,42.789 34.005,40.253 34,37.17L34,22.24L33,22.77L31.89,22.11Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M64.85,22.87L63.85,23.49L47.09,33.75L43.63,28.75L34,34.19L31.91,35.38L31.91,37.26C31.904,41.493 35.377,44.984 39.61,45L58.2,45C62.438,44.995 65.925,41.508 65.93,37.27L65.93,22.27L64.85,22.87ZM63.85,37.26C63.845,40.356 61.296,42.9 58.2,42.9L39.61,42.9C36.527,42.884 34,40.343 34,37.26L34,36.59L43,31.48L46.48,36.57L63.84,25.94L63.85,37.26Z" style="fill:rgb(3,218,198);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
@@ -0,0 +1,730 @@
|
||||
<?php
|
||||
|
||||
class DSM_ImageAccordionChild extends ET_Builder_Module {
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Image Accordion Child', 'dsm-supreme-modules-for-divi' );
|
||||
$this->slug = 'dsm_image_accordion_child';
|
||||
$this->vb_support = 'on';
|
||||
$this->type = 'child';
|
||||
$this->child_title_var = 'image_accordion_title';
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'content' => esc_html__( 'Content', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'overlay' => esc_html__( 'Overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
'ia_icon' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'ia_image' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'ia_title' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'ia_desc' => esc_html__( 'Description', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
|
||||
$fields = array();
|
||||
|
||||
$fields['expanded_item'] = array(
|
||||
'label' => esc_html__( 'Make Item Expanded', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'default' => 'off',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['image_accordion_src'] = array(
|
||||
'type' => 'upload',
|
||||
'hide_metadata' => true,
|
||||
'choose_text' => esc_attr__( 'Choose an Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'upload_button_text' => esc_attr__( 'Upload an image', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['use_accordion_icon'] = array(
|
||||
'label' => esc_html__( 'Use Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['image_accordion_icon'] = array(
|
||||
'label' => esc_html__( 'Icon', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select_icon',
|
||||
'class' => array( 'et-pb-font-icon' ),
|
||||
'default' => '1',
|
||||
'show_if' => array(
|
||||
'use_accordion_icon' => 'on',
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['image_accordion_icon_image'] = array(
|
||||
'type' => 'upload',
|
||||
'hide_metadata' => true,
|
||||
'choose_text' => esc_attr__( 'Choose an Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'upload_button_text' => esc_attr__( 'Upload an image', 'dsm-supreme-modules-for-divi' ),
|
||||
'show_if' => array(
|
||||
'use_accordion_icon' => 'off',
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['image_width'] = array(
|
||||
'label' => esc_html__( 'Image Width', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'default' => '100px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '100px',
|
||||
'allowed_units' => array( 'px' ),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '1000',
|
||||
'step' => '10',
|
||||
),
|
||||
'show_if' => array(
|
||||
'use_accordion_icon' => 'off',
|
||||
),
|
||||
'validate_unit' => true,
|
||||
'mobile_options' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_icon',
|
||||
);
|
||||
|
||||
$fields['image_accordion_title'] = array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'toggle_slug' => 'content',
|
||||
'dynamic_content' => 'text',
|
||||
);
|
||||
|
||||
$fields['image_accordion_desc'] = array(
|
||||
'label' => esc_html__( 'Description', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'textarea',
|
||||
'dynamic_content' => 'text',
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['show_ia_button'] = array(
|
||||
'default' => 'off',
|
||||
'label' => esc_html__( 'Show Button', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'options' => array(
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['ia_button_text'] = array(
|
||||
'label' => esc_html__( 'Button Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'show_if' => array(
|
||||
'show_ia_button' => 'on',
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
'dynamic_content' => 'text',
|
||||
);
|
||||
|
||||
$fields['ia_button_link'] = array(
|
||||
'label' => esc_html__( 'Button Link', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'show_if' => array(
|
||||
'show_ia_button' => 'on',
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
'dynamic_content' => 'url',
|
||||
);
|
||||
|
||||
$fields['ia_button_link_target'] = array(
|
||||
'label' => esc_html__( 'Link Target', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'default' => 'same',
|
||||
'options' => array(
|
||||
'same' => esc_html__( 'Same Window', 'dsm-supreme-modules-for-divi' ),
|
||||
'new' => esc_html__( 'New Window', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'show_if' => array(
|
||||
'show_ia_button' => 'on',
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['ia_align_horizontal'] = array(
|
||||
'label' => esc_html__( 'Horizontal Align', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'default' => 'center',
|
||||
'mobile_options' => true,
|
||||
'options' => array(
|
||||
'left' => esc_html__( 'Left', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Center', 'dsm-supreme-modules-for-divi' ),
|
||||
'right' => esc_html__( 'Right', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['ia_align_vertical'] = array(
|
||||
'label' => esc_html__( 'Vertical Align', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'default' => 'center',
|
||||
'mobile_options' => true,
|
||||
'options' => array(
|
||||
'top' => esc_html__( 'Top', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Center', 'dsm-supreme-modules-for-divi' ),
|
||||
'bottom' => esc_html__( 'Bottom', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'content',
|
||||
);
|
||||
|
||||
$fields['ia_icon_color'] = array(
|
||||
'label' => esc_html__( 'Icon Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'tab_slug' => 'advanced',
|
||||
'default' => '#fff',
|
||||
'mobile_options' => true,
|
||||
'show_if' => array(
|
||||
'use_accordion_icon' => 'on',
|
||||
),
|
||||
'toggle_slug' => 'ia_icon',
|
||||
);
|
||||
|
||||
$fields['use_ia_icon_font_size'] = array(
|
||||
'label' => esc_html__( 'Use Icon Font Size', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'show_if' => array(
|
||||
'use_accordion_icon' => 'on',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_icon',
|
||||
);
|
||||
|
||||
$fields['ia_icon_font_size'] = array(
|
||||
'label' => esc_html__( 'Icon Font Size', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'default' => '40px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '40px',
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'show_if' => array(
|
||||
'use_accordion_icon' => 'on',
|
||||
'use_ia_icon_font_size' => 'on',
|
||||
),
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '150',
|
||||
'step' => '1',
|
||||
),
|
||||
'validate_unit' => true,
|
||||
'mobile_options' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_icon',
|
||||
);
|
||||
|
||||
$fields['content_width'] = array(
|
||||
'label' => esc_html__( 'Content Width', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'default' => '100%',
|
||||
'default_unit' => '%',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '100',
|
||||
'step' => '1',
|
||||
),
|
||||
'validate_unit' => true,
|
||||
'mobile_options' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
);
|
||||
|
||||
$fields['overlay_color'] = array(
|
||||
'label' => esc_html__( 'Overlay Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'mobile_options' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'overlay',
|
||||
'hover' => 'tabs',
|
||||
);
|
||||
|
||||
return $fields;
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
|
||||
$advanced_fields = array();
|
||||
$advanced_fields['text'] = false;
|
||||
$advanced_fields['text_shadow'] = false;
|
||||
$advanced_fields['fonts'] = false;
|
||||
|
||||
$advanced_fields['margin_padding'] = array(
|
||||
'css' => array(
|
||||
'margin' => '%%order_class%%',
|
||||
'padding' => '%%order_class%%>div',
|
||||
'important' => 'all',
|
||||
),
|
||||
);
|
||||
|
||||
$advanced_fields['borders']['default'] = array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%.dsm_image_accordion_child',
|
||||
'border_styles' => '%%order_class%%.dsm_image_accordion_child',
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
$advanced_fields['box_shadow']['default'] = array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
);
|
||||
|
||||
$advanced_fields['fonts']['title'] = array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_image_accordion_title',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
'toggle_slug' => 'ia_title',
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '3',
|
||||
'step' => '0.1',
|
||||
),
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h3',
|
||||
),
|
||||
'important' => 'all',
|
||||
);
|
||||
|
||||
$advanced_fields['fonts']['desc'] = array(
|
||||
'label' => esc_html__( 'Description', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_image_accordion_description',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '3',
|
||||
'step' => '0.1',
|
||||
),
|
||||
),
|
||||
'toggle_slug' => 'ia_desc',
|
||||
);
|
||||
|
||||
$advanced_fields['borders']['image'] = array(
|
||||
'label_prefix' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm_image_accordion_img',
|
||||
'border_styles' => '%%order_class%% .dsm_image_accordion_img',
|
||||
),
|
||||
),
|
||||
'depends_on' => array( 'use_accordion_icon' ),
|
||||
'depends_show_if' => 'off',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_image',
|
||||
);
|
||||
|
||||
$advanced_fields['box_shadow']['image'] = array(
|
||||
'label' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_image_accordion_img',
|
||||
'' => 'inset',
|
||||
),
|
||||
'show_if' => array(
|
||||
'use_accordion_icon' => 'off',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'ia_image',
|
||||
);
|
||||
|
||||
$advanced_fields['button']['button'] = array(
|
||||
'label' => esc_html__( 'Button', 'dsm-supreme-modules-for-divi' ),
|
||||
'use_alignment' => true,
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_ia_button.et_pb_button',
|
||||
'alignment' => '%%order_class%% .dsm_image_accordion_child_content .et_pb_button_wrapper.dsm_image_accordion_button_wrapper',
|
||||
'important' => true,
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_ia_button.et_pb_button',
|
||||
'important' => true,
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm_ia_button.et_pb_button',
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
return $advanced_fields;
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
|
||||
$this->apply_css( $render_slug );
|
||||
|
||||
$use_accordion_icon = $this->props['use_accordion_icon'];
|
||||
$image_accordion_icon = et_pb_process_font_icon( $this->props['image_accordion_icon'] );
|
||||
$image_accordion_icon_image = $this->props['image_accordion_icon_image'];
|
||||
|
||||
$image_accordion_icon = '' !== $image_accordion_icon ? sprintf(
|
||||
'<div class="dsm_image_accordion_image_icon_wrapper">
|
||||
<span class="et-pb-icon et-pb-font-icon dsm_image_accordion_icon">
|
||||
%1$s
|
||||
</span>
|
||||
</div>',
|
||||
esc_attr( $image_accordion_icon )
|
||||
) : '';
|
||||
|
||||
$image_accordion_icon_image = '' !== $image_accordion_icon_image ? sprintf(
|
||||
'<div class="dsm_image_accordion_image_icon_wrapper"><img src="%1$s" class="dsm_image_accordion_img"></div>',
|
||||
$image_accordion_icon_image
|
||||
) : '';
|
||||
|
||||
$ia_icon = 'on' === $use_accordion_icon ? $image_accordion_icon : $image_accordion_icon_image;
|
||||
|
||||
$ia_title = $this->_esc_attr( 'image_accordion_title', 'full' );
|
||||
$ia_title_level = $this->props['title_level'] ? $this->props['title_level'] : 'h3';
|
||||
|
||||
$ia_title = '' !== $ia_title ? sprintf(
|
||||
'<%2$s class="dsm_image_accordion_title">%1$s</%2$s>',
|
||||
$ia_title,
|
||||
esc_attr( $ia_title_level )
|
||||
) : '';
|
||||
|
||||
$ia_description = $this->_esc_attr( 'image_accordion_desc', 'full' );
|
||||
$ia_description = '' !== $ia_description ? sprintf(
|
||||
'<div class="dsm_image_accordion_description">%1$s</div>',
|
||||
$ia_description
|
||||
) : '';
|
||||
|
||||
$align_horizontal_tablet = '';
|
||||
$align_horizontal_phone = '';
|
||||
|
||||
$ia_align_horizontal_last_edited = $this->props['ia_align_horizontal_last_edited'];
|
||||
$ia_align_horizontal_responsive_status = et_pb_get_responsive_status( $ia_align_horizontal_last_edited );
|
||||
|
||||
if ( $ia_align_horizontal_responsive_status ) {
|
||||
$align_horizontal_tablet = 'dsm_image_accordion_horizontal_tablet_' . $this->props['ia_align_horizontal_phone'];
|
||||
$align_horizontal_phone = 'dsm_image_accordion_horizontal_phone_' . $this->props['ia_align_horizontal_phone'];
|
||||
}
|
||||
|
||||
$align_vertical_tablet = '';
|
||||
$align_vertical_phone = '';
|
||||
|
||||
$ia_align_vertical_last_edited = $this->props['ia_align_vertical_last_edited'];
|
||||
$ia_align_vertical_responsive_status = et_pb_get_responsive_status( $ia_align_vertical_last_edited );
|
||||
|
||||
if ( $ia_align_vertical_responsive_status ) {
|
||||
$align_vertical_tablet = 'dsm_image_accordion_vertical_tablet_' . $this->props['ia_align_vertical_phone'];
|
||||
$align_vertical_phone = 'dsm_image_accordion_vertical_phone_' . $this->props['ia_align_vertical_phone'];
|
||||
}
|
||||
|
||||
$show_ia_button = $this->props['show_ia_button'];
|
||||
$ia_button_text = $this->props['ia_button_text'];
|
||||
$ia_button_link = $this->props['ia_button_link'];
|
||||
$ia_button_link_target = $this->props['ia_button_link_target'];
|
||||
|
||||
$ia_button_rel = $this->props['button_rel'];
|
||||
$ia_button_icon = $this->props['button_icon'];
|
||||
$ia_button_custom = $this->props['custom_button'];
|
||||
|
||||
$ia_button = $this->render_button(
|
||||
array(
|
||||
'button_classname' => array( 'dsm_ia_button' ),
|
||||
'button_custom' => $ia_button_custom,
|
||||
'button_rel' => $ia_button_rel,
|
||||
'button_text' => $ia_button_text,
|
||||
'button_url' => $ia_button_link,
|
||||
'custom_icon' => $ia_button_icon,
|
||||
'url_new_window' => $ia_button_link_target,
|
||||
'has_wrapper' => false,
|
||||
)
|
||||
);
|
||||
|
||||
$ia_button = 'on' === $show_ia_button ? sprintf(
|
||||
'<div class="et_pb_button_wrapper dsm_image_accordion_button_wrapper">%1$s</div>',
|
||||
$ia_button
|
||||
) : '';
|
||||
|
||||
$this->add_classname(
|
||||
array(
|
||||
"dsm_image_accordion_horizontal_{$this->props['ia_align_horizontal']}",
|
||||
"dsm_image_accordion_vertical_{$this->props['ia_align_vertical']}",
|
||||
'on' === $this->props['expanded_item'] ? 'dsm_image_accordion_active_item' : '',
|
||||
$align_horizontal_tablet,
|
||||
$align_horizontal_phone,
|
||||
$align_vertical_tablet,
|
||||
$align_vertical_phone,
|
||||
)
|
||||
);
|
||||
|
||||
return sprintf(
|
||||
'<div class="dsm_image_accordion_child_content">
|
||||
%1$s
|
||||
%2$s
|
||||
%3$s
|
||||
%4$s
|
||||
</div>',
|
||||
$ia_icon,
|
||||
$ia_title,
|
||||
$ia_description,
|
||||
$ia_button
|
||||
);
|
||||
}
|
||||
|
||||
public function apply_css( $render_slug ) {
|
||||
$this->image_width_css( $render_slug );
|
||||
$this->content_width_css( $render_slug );
|
||||
|
||||
$use_ia_icon_font_size = $this->props['use_ia_icon_font_size'];
|
||||
|
||||
$ia_icon_color = $this->props['ia_icon_color'];
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "color: {$ia_icon_color};",
|
||||
)
|
||||
);
|
||||
|
||||
$ia_icon_color_last_edited = $this->props['ia_icon_color_last_edited'];
|
||||
$ia_icon_color_responsive_status = et_pb_get_responsive_status( $ia_icon_color_last_edited );
|
||||
|
||||
if ( $ia_icon_color_responsive_status ) {
|
||||
|
||||
$ia_icon_color_tablet = $this->props['ia_icon_color_tablet'];
|
||||
$ia_icon_color_phone = $this->props['ia_icon_color_phone'];
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "color: {$ia_icon_color_tablet};",
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "color: {$ia_icon_color_phone};",
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'on' === $use_ia_icon_font_size ) {
|
||||
$ia_icon_font_size = $this->props['ia_icon_font_size'];
|
||||
$ia_icon_font_size_tablet = $this->props['ia_icon_font_size_tablet'];
|
||||
$ia_icon_font_size_phone = $this->props['ia_icon_font_size_phone'];
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "font-size: {$ia_icon_font_size};",
|
||||
)
|
||||
);
|
||||
|
||||
$ia_icon_font_size_last_edited = $this->props['ia_icon_font_size_last_edited'];
|
||||
$ia_icon_font_size_responsive_status = et_pb_get_responsive_status( $ia_icon_font_size_last_edited );
|
||||
|
||||
if ( $ia_icon_font_size_responsive_status ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "font-size: {$ia_icon_font_size_tablet};",
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_icon',
|
||||
'declaration' => "font-size: {$ia_icon_font_size_phone};",
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%%',
|
||||
'declaration' => "background-image: url({$this->props['image_accordion_src']});",
|
||||
)
|
||||
);
|
||||
|
||||
if ( '' !== $this->props['overlay_color'] ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '.dsm_image_accordion %%order_class%%>div:before',
|
||||
'declaration' => sprintf(
|
||||
'background: %1$s;',
|
||||
$this->props['overlay_color']
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$overlay_color_last_edited = $this->props['overlay_color_last_edited'];
|
||||
$overlay_color_responsive_status = et_pb_get_responsive_status( $overlay_color_last_edited );
|
||||
if ( $overlay_color_responsive_status ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '.dsm_image_accordion %%order_class%%>div:before',
|
||||
'declaration' => sprintf(
|
||||
'background: %1$s;',
|
||||
$this->props['overlay_color_tablet']
|
||||
),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '.dsm_image_accordion %%order_class%%>div:before',
|
||||
'declaration' => sprintf(
|
||||
'background: %1$s;',
|
||||
$this->props['overlay_color_phone']
|
||||
),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
if ( isset( $this->props['overlay_color__hover'] ) ) {
|
||||
|
||||
$overlay_color_hover = explode( '|', $this->props['overlay_color__hover'] );
|
||||
|
||||
if ( isset( $overlay_color_hover ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '.dsm_image_accordion %%order_class%%:hover>div:before',
|
||||
'declaration' => sprintf(
|
||||
'background: %1$s;',
|
||||
$this->props['overlay_color__hover']
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private function image_width_css( $render_slug ) {
|
||||
$image_width = $this->props['image_width'];
|
||||
$image_width_tablet = $this->props['image_width_tablet'];
|
||||
$image_width_phone = $this->props['image_width_phone'];
|
||||
|
||||
$image_width_last_edited = $this->props['image_width_last_edited'];
|
||||
$image_width_responsive_status = et_pb_get_responsive_status( $image_width_last_edited );
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_img',
|
||||
'declaration' => sprintf( 'width: %1$s;', $image_width ),
|
||||
)
|
||||
);
|
||||
|
||||
if ( $image_width_responsive_status ) {
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_img',
|
||||
'declaration' => sprintf( 'width: %1$s;', $image_width_tablet ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_img',
|
||||
'declaration' => sprintf( 'width: %1$s;', $image_width_phone ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private function content_width_css( $render_slug ) {
|
||||
$content_width = $this->props['content_width'];
|
||||
$content_width_tablet = $this->props['content_width_tablet'];
|
||||
$content_width_phone = $this->props['content_width_phone'];
|
||||
|
||||
$content_width_last_edited = $this->props['content_width_last_edited'];
|
||||
$content_width_responsive_status = et_pb_get_responsive_status( $content_width_last_edited );
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child_content',
|
||||
'declaration' => sprintf( 'max-width: %1$s;', $content_width ),
|
||||
)
|
||||
);
|
||||
|
||||
if ( $content_width_responsive_status ) {
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child_content',
|
||||
'declaration' => sprintf( 'max-width: %1$s;', $content_width_tablet ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_image_accordion_child_content',
|
||||
'declaration' => sprintf( 'max-width: %1$s;', $content_width_phone ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
new DSM_ImageAccordionChild();
|
||||
@@ -0,0 +1,210 @@
|
||||
<?php
|
||||
|
||||
class DSM_Lottie extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_lottie';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Lottie', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Lottie', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'text' => false,
|
||||
'fonts' => false,
|
||||
'background' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
'options' => array(
|
||||
'parallax_method' => array(
|
||||
'default' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'max_width' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
'filters' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'lottie_url' => array(
|
||||
'label' => esc_html__( 'Lottie JSON File', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'data_type' => 'json',
|
||||
'upload_button_text' => esc_attr__( 'Upload a json file', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose a JSON file', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As JSON for the module', 'dsm-supreme-modules-for-divi' ),
|
||||
'computed_affects' => array(
|
||||
'__lottie',
|
||||
),
|
||||
),
|
||||
'lottie_loop' => array(
|
||||
'label' => esc_html__( 'Loop', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'on',
|
||||
'description' => esc_html__( 'Here you can choose whether or not your Lottie will animate in loop.', 'dsm-supreme-modules-for-divi' ),
|
||||
'computed_affects' => array(
|
||||
'__lottie',
|
||||
),
|
||||
),
|
||||
'lottie_delay' => array(
|
||||
'label' => esc_html__( 'Delay', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default_on_front' => '0ms',
|
||||
'validate_unit' => true,
|
||||
'allowed_units' => array( 'ms' ),
|
||||
'description' => esc_html__( 'Delay the lottie animation (in ms).', 'dsm-supreme-modules-for-divi' ),
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '8000',
|
||||
'step' => '1',
|
||||
),
|
||||
'computed_affects' => array(
|
||||
'__lottie',
|
||||
),
|
||||
),
|
||||
'lottie_direction' => array(
|
||||
'label' => esc_html__( 'Direction', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'1' => esc_html__( 'Normal', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'-1' => esc_html__( 'Reverse', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
),
|
||||
'default_on_front' => '1',
|
||||
'computed_affects' => array(
|
||||
'__lottie',
|
||||
),
|
||||
),
|
||||
'lottie_speed' => array(
|
||||
'label' => esc_html__( 'Speed (More is faster)', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default_on_front' => '1',
|
||||
'validate_unit' => false,
|
||||
'unitless' => true,
|
||||
'description' => esc_html__( 'The speed of the animation.', 'dsm-supreme-modules-for-divi' ),
|
||||
'range_settings' => array(
|
||||
'min' => '0.1',
|
||||
'max' => '2.5',
|
||||
'step' => '0.1',
|
||||
),
|
||||
'computed_affects' => array(
|
||||
'__lottie',
|
||||
),
|
||||
),
|
||||
'lottie_animation_viewport' => array(
|
||||
'label' => esc_html__( 'Animate in Viewport', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'Animation when the element is in viewport.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'default' => '80%',
|
||||
'default_on_front' => '80%',
|
||||
'unitless' => false,
|
||||
'allow_empty' => false,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '100',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => false,
|
||||
'mobile_options' => false,
|
||||
'computed_affects' => array(
|
||||
'__lottie',
|
||||
),
|
||||
),
|
||||
'__lottie' => array(
|
||||
'type' => 'computed',
|
||||
'computed_callback' => array( 'DSM_Lottie', 'getLottie' ),
|
||||
'computed_depends_on' => array(
|
||||
'lottie_url',
|
||||
'lottie_loop',
|
||||
'lottie_delay',
|
||||
'lottie_direction',
|
||||
'lottie_speed',
|
||||
'lottie_animation_viewport',
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$lottie_url = $this->props['lottie_url'];
|
||||
$lottie_loop = $this->props['lottie_loop'];
|
||||
$lottie_delay = $this->props['lottie_delay'];
|
||||
$lottie_direction = $this->props['lottie_direction'];
|
||||
$lottie_speed = $this->props['lottie_speed'];
|
||||
$lottie_animation_viewport = $this->props['lottie_animation_viewport'];
|
||||
|
||||
wp_enqueue_script( 'dsm-lottie' );
|
||||
|
||||
$data_attrs[] = array(
|
||||
'path' => $lottie_url,
|
||||
'loop' => $lottie_loop !== 'off' ? true : false,
|
||||
'delay' => $lottie_delay,
|
||||
'direction' => $lottie_direction,
|
||||
'speed' => $lottie_speed,
|
||||
'viewport' => $lottie_animation_viewport,
|
||||
);
|
||||
|
||||
// Render module content.
|
||||
$output = sprintf(
|
||||
'<div class="dsm_lottie_wrapper" data-params=%1$s>
|
||||
</div>',
|
||||
wp_json_encode( $data_attrs )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Lottie();
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m20.07 21.8h-13.34c-.57 0-1.04-.47-1.04-1.04v-.8c0-.57.47-1.04 1.04-1.04h13.34c.57 0 1.04.47 1.04 1.04v.8c-.01.58-.47 1.04-1.04 1.04zm-13.34-2.11c-.15 0-.27.12-.27.27v.8c0 .15.12.27.27.27h13.34c.15 0 .27-.12.27-.27v-.8c0-.15-.12-.27-.27-.27z" fill="#fff"/><path d="m10.38 17.95c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m20.93 8.96c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62c-.01-.35-.28-.62-.62-.62z" fill="#03dac6"/><g fill="#fff"><path d="m16.05 17.25c-1.51 0-2.74-1.23-2.74-2.74s1.23-2.74 2.74-2.74 2.74 1.23 2.74 2.74c-.01 1.52-1.24 2.74-2.74 2.74zm0-4.7c-1.09 0-1.97.88-1.97 1.97s.88 1.97 1.97 1.97 1.97-.88 1.97-1.97c-.01-1.09-.89-1.97-1.97-1.97z"/><path d="m9.98 12.8c-1.51 0-2.74-1.23-2.74-2.74s1.23-2.74 2.74-2.74 2.74 1.23 2.74 2.74c-.01 1.51-1.24 2.74-2.74 2.74zm0-4.7c-1.09 0-1.97.88-1.97 1.97s.88 1.97 1.97 1.97 1.97-.88 1.97-1.97-.89-1.97-1.97-1.97z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,615 @@
|
||||
<?php
|
||||
|
||||
class DSM_NavMenu extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_menu';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Menu', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Menu', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'layout' => array(
|
||||
'title' => esc_html__( 'Layout', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'priority' => 19,
|
||||
),
|
||||
'header' => array(
|
||||
'title' => esc_html__( 'Title', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'priority' => 25,
|
||||
),
|
||||
'menu_style' => array(
|
||||
'title' => esc_html__( 'Menu', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'priority' => 29,
|
||||
),
|
||||
'submenu_style' => array(
|
||||
'title' => esc_html__( 'Sub Menu', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'priority' => 39,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% h1.dsm-menu-title, %%order_class%% h2.dsm-menu-title, %%order_class%% h3.dsm-menu-title, %%order_class%% h4.dsm-menu-title, %%order_class%% h5.dsm-menu-title, %%order_class%% h6.dsm-menu-title',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '18px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h4',
|
||||
),
|
||||
),
|
||||
'menu' => array(
|
||||
'label' => esc_html__( 'Menu', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% ul.dsm-menu li a',
|
||||
'plugin_main' => '%%order_class%% ul.dsm-menu li a',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
'range_settings' => array(
|
||||
'min' => '12',
|
||||
'max' => '24',
|
||||
'step' => '1',
|
||||
),
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '8',
|
||||
'step' => '1',
|
||||
),
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
'hide_text_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'menu_style',
|
||||
),
|
||||
'sub_menu' => array(
|
||||
'label' => esc_html__( 'Sub Menu', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% ul.dsm-menu .menu-item-has-children .sub-menu li a',
|
||||
'plugin_main' => '%%order_class%% ul.dsm-menu .menu-item-has-children .sub-menu li a',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
'range_settings' => array(
|
||||
'min' => '12',
|
||||
'max' => '24',
|
||||
'step' => '1',
|
||||
),
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '8',
|
||||
'step' => '1',
|
||||
),
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
'hide_text_color' => false,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'submenu_style',
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_background_layout' => true,
|
||||
'options' => array(
|
||||
'text_orientation' => array(
|
||||
'default_on_front' => 'left',
|
||||
),
|
||||
'background_layout' => array(
|
||||
'default_on_front' => 'light',
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
'link_options' => false,
|
||||
'button' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
$et_accent_color = et_builder_accent_color();
|
||||
return array(
|
||||
'title' => array(
|
||||
'label' => esc_html__( 'Menu Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'The title will appear above the menu.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'title_bottom_gap' => array(
|
||||
'label' => esc_html__( 'Bottom Gap', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'mobile_options' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'header',
|
||||
'responsive' => true,
|
||||
'default_unit' => 'px',
|
||||
'default' => '10px',
|
||||
),
|
||||
'menu_id' => array(
|
||||
'label' => esc_html__( 'Menu', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'basic_option',
|
||||
'options' => et_builder_get_nav_menus_options(),
|
||||
'description' => sprintf(
|
||||
'<p class="description">%2$s. <a href="%1$s" target="_blank">%3$s</a>.</p>',
|
||||
esc_url( admin_url( 'nav-menus.php' ) ),
|
||||
esc_html__( 'Select a menu that should be used in the module', 'dsm-supreme-modules-for-divi' ),
|
||||
esc_html__( 'Click here to create new menu', 'dsm-supreme-modules-for-divi' )
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'computed_affects' => array(
|
||||
'__menu',
|
||||
),
|
||||
),
|
||||
'menu_link_text_color' => array(
|
||||
'label' => esc_html__( 'Menu Link Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'menu_style',
|
||||
'hover' => 'tabs',
|
||||
),
|
||||
'menu_space_between' => array(
|
||||
'label' => esc_html__( 'Space Between', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'mobile_options' => true,
|
||||
'responsive' => true,
|
||||
'default_unit' => 'px',
|
||||
'default' => '0px',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'menu_style',
|
||||
),
|
||||
'menu_layout' => array(
|
||||
'label' => esc_html__( 'Menu Layout', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'vertical' => esc_html__( 'Vertical', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'vertical',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'layout',
|
||||
),
|
||||
'list_style_type' => array(
|
||||
'label' => esc_html__( 'List Style Type', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'none' => esc_html__( 'None', 'dsm-supreme-modules-for-divi' ),
|
||||
'disc' => esc_html__( 'Disc', 'dsm-supreme-modules-for-divi' ),
|
||||
'circle' => esc_html__( 'Circle', 'dsm-supreme-modules-for-divi' ),
|
||||
'decimal' => esc_html__( 'Decimal', 'dsm-supreme-modules-for-divi' ),
|
||||
'square' => esc_html__( 'Square', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'disc',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'menu_style',
|
||||
'show_if' => array(
|
||||
'menu_layout' => 'vertical',
|
||||
),
|
||||
),
|
||||
'list_style_color' => array(
|
||||
'label' => esc_html__( 'List Style Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'menu_style',
|
||||
'show_if_not' => array(
|
||||
'list_style_type' => 'none',
|
||||
),
|
||||
'show_if' => array(
|
||||
'menu_layout' => 'vertical',
|
||||
),
|
||||
),
|
||||
'menu_left_space' => array(
|
||||
'label' => esc_html__( 'Left Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'mobile_options' => true,
|
||||
'hover' => 'tabs',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'menu_style',
|
||||
'responsive' => true,
|
||||
'default_unit' => 'px',
|
||||
'default' => '0px',
|
||||
'show_if' => array(
|
||||
'menu_layout' => 'vertical',
|
||||
),
|
||||
),
|
||||
'submenu_left_space' => array(
|
||||
'label' => esc_html__( 'Left Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'mobile_options' => true,
|
||||
'hover' => 'tabs',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'submenu_style',
|
||||
'responsive' => true,
|
||||
'default_unit' => 'px',
|
||||
'default' => '20px',
|
||||
'show_if' => array(
|
||||
'menu_layout' => 'vertical',
|
||||
),
|
||||
),
|
||||
'__menu' => array(
|
||||
'type' => 'computed',
|
||||
'computed_callback' => array( 'DSM_NavMenu', 'get_dsm_navmenu' ),
|
||||
'computed_depends_on' => array(
|
||||
'menu_id',
|
||||
'list_style_type',
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the class with page ID to menu item so it can be easily found by ID in Frontend Builder
|
||||
*
|
||||
* @return menu item object
|
||||
*/
|
||||
static function modify_dsm_menu_item( $menu_item ) {
|
||||
if ( esc_url( home_url( '/' ) ) === $menu_item->url ) {
|
||||
$fw_menu_custom_class = 'et_pb_menu_page_id-home';
|
||||
} else {
|
||||
$fw_menu_custom_class = 'et_pb_menu_page_id-' . $menu_item->object_id;
|
||||
}
|
||||
$menu_item->classes[] = $fw_menu_custom_class;
|
||||
return $menu_item;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get fullwidth menu markup for fullwidth menu module
|
||||
*
|
||||
* @return string of fullwidth menu markup
|
||||
*/
|
||||
static function get_dsm_navmenu( $args = array() ) {
|
||||
$defaults = array(
|
||||
'list_style_type' => '',
|
||||
'menu_layout' => '',
|
||||
'menu_id' => '',
|
||||
);
|
||||
|
||||
// modify the menu item to include the required data
|
||||
add_filter( 'wp_setup_nav_menu_item', array( 'DSM_NavMenu', 'modify_dsm_menu_item' ) );
|
||||
|
||||
$args = wp_parse_args( $args, $defaults );
|
||||
|
||||
$menu = '<div class="dsm-menu-container">';
|
||||
|
||||
$menuClass = 'dsm-menu';
|
||||
|
||||
if ( ! et_is_builder_plugin_active() && 'on' === et_get_option( 'divi_disable_toptier' ) ) {
|
||||
$menuClass .= ' et_disable_top_tier';
|
||||
}
|
||||
$menuClass .= ( '' !== $args['list_style_type'] ? sprintf( ' %s', esc_attr( 'dsm-menu-style-type-' . $args['list_style_type'] ) ) : '' );
|
||||
$menuClass .= ( '' !== $args['menu_layout'] ? sprintf( ' %s', esc_attr( 'dsm-menu-layout-' . $args['menu_layout'] ) ) : '' );
|
||||
|
||||
$primaryNav = '';
|
||||
|
||||
$menu_args = array(
|
||||
'theme_location' => 'primary-menu',
|
||||
'container' => '',
|
||||
'fallback_cb' => '',
|
||||
'menu_class' => $menuClass,
|
||||
'menu_id' => '',
|
||||
'echo' => false,
|
||||
);
|
||||
|
||||
if ( '' !== $args['menu_id'] ) {
|
||||
$menu_args['menu'] = (int) $args['menu_id'];
|
||||
}
|
||||
|
||||
$primaryNav = wp_nav_menu( apply_filters( 'dsm_menu_args', $menu_args ) );
|
||||
|
||||
if ( '' == $primaryNav ) {
|
||||
$menu .= sprintf(
|
||||
'<ul class="%1$s">
|
||||
%2$s',
|
||||
esc_attr( $menuClass ),
|
||||
( ! et_is_builder_plugin_active() && 'on' === et_get_option( 'divi_home_link' )
|
||||
? sprintf(
|
||||
'<li%1$s><a href="%2$s">%3$s</a></li>',
|
||||
( is_home() ? ' class="current_page_item"' : '' ),
|
||||
esc_url( home_url( '/' ) ),
|
||||
esc_html__( 'Home', 'dsm-supreme-modules-for-divi' )
|
||||
)
|
||||
: ''
|
||||
)
|
||||
);
|
||||
|
||||
ob_start();
|
||||
|
||||
// @todo: check if Fullwidth Menu module works fine with no menu selected in settings
|
||||
if ( et_is_builder_plugin_active() ) {
|
||||
wp_page_menu();
|
||||
} else {
|
||||
show_page_menu( $menuClass, false, false );
|
||||
show_categories_menu( $menuClass, false );
|
||||
}
|
||||
|
||||
$menu .= ob_get_contents();
|
||||
|
||||
$menu .= '</ul>';
|
||||
|
||||
ob_end_clean();
|
||||
} else {
|
||||
$menu .= $primaryNav;
|
||||
}
|
||||
|
||||
$menu .= '</div>';
|
||||
|
||||
remove_filter( 'wp_setup_nav_menu_item', array( 'DSM_NavMenu', 'modify_dsm_menu_item' ) );
|
||||
|
||||
return $menu;
|
||||
}
|
||||
|
||||
public function get_transition_fields_css_props() {
|
||||
$fields = parent::get_transition_fields_css_props();
|
||||
|
||||
$fields['title_bottom_gap'] = array(
|
||||
'padding-bottom' => '%%order_class%% .dsm-menu-title',
|
||||
);
|
||||
|
||||
$fields['list_style_color'] = array(
|
||||
'color' => '%%order_class%% ul.dsm-menu li',
|
||||
);
|
||||
|
||||
$fields['menu_link_text_color'] = array(
|
||||
'color' => '%%order_class%% ul.dsm-menu li a',
|
||||
);
|
||||
|
||||
$fields['menu_space_between'] = array(
|
||||
'margin-bottom' => '%%order_class%% .dsm-menu li:not(:last-child)',
|
||||
'margin-top' => '%%order_class%% .dsm-menu .menu-item-has-children .sub-menu>li',
|
||||
);
|
||||
|
||||
$fields['menu_left_space'] = array(
|
||||
'padding-left' => '%%order_class%% ul.dsm-menu',
|
||||
);
|
||||
|
||||
$fields['submenu_left_space'] = array(
|
||||
'padding-left' => '%%order_class%% .dsm-menu .menu-item-has-children .sub-menu',
|
||||
);
|
||||
|
||||
return $fields;
|
||||
|
||||
}
|
||||
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$background_layout = $this->props['background_layout'];
|
||||
$title = $this->props['title'];
|
||||
$title_bottom_gap = $this->props['title_bottom_gap'];
|
||||
$title_bottom_gap_tablet = $this->props['title_bottom_gap_tablet'];
|
||||
$title_bottom_gap_phone = $this->props['title_bottom_gap_phone'];
|
||||
$title_bottom_gap_last_edited = $this->props['title_bottom_gap_last_edited'];
|
||||
$menu_id = $this->props['menu_id'];
|
||||
$menu_layout = $this->props['menu_layout'];
|
||||
$list_style_type = $this->props['list_style_type'];
|
||||
$list_style_color = $this->props['list_style_color'];
|
||||
$menu_link_text_color = $this->props['menu_link_text_color'];
|
||||
$menu_link_text_color_hover = $this->get_hover_value( 'menu_link_text_color' );
|
||||
$menu_space_between = $this->props['menu_space_between'];
|
||||
$menu_space_between_tablet = $this->props['menu_space_between_tablet'];
|
||||
$menu_space_between_phone = $this->props['menu_space_between_phone'];
|
||||
$menu_space_between_last_edited = $this->props['menu_space_between_last_edited'];
|
||||
$menu_left_space_hover = $this->get_hover_value( 'menu_left_space' );
|
||||
$menu_left_space = $this->props['menu_left_space'];
|
||||
$menu_left_space_tablet = $this->props['menu_left_space_tablet'];
|
||||
$menu_left_space_phone = $this->props['menu_left_space_phone'];
|
||||
$menu_left_space_last_edited = $this->props['menu_left_space_last_edited'];
|
||||
$submenu_left_space_hover = $this->get_hover_value( 'submenu_left_space' );
|
||||
$submenu_left_space = $this->props['submenu_left_space'];
|
||||
$submenu_left_space_tablet = $this->props['submenu_left_space_tablet'];
|
||||
$submenu_left_space_phone = $this->props['submenu_left_space_phone'];
|
||||
$submenu_left_space_last_edited = $this->props['submenu_left_space_last_edited'];
|
||||
$header_level = $this->props['header_level'];
|
||||
|
||||
$menu = self::get_dsm_navmenu(
|
||||
array(
|
||||
'menu_id' => $menu_id,
|
||||
'list_style_type' => $list_style_type,
|
||||
'menu_layout' => $menu_layout,
|
||||
)
|
||||
);
|
||||
|
||||
if ( '10px' !== $title_bottom_gap || '' !== $title_bottom_gap_tablet || '' !== $title_bottom_gap_phone ) {
|
||||
$title_bottom_gap_responsive_active = et_pb_get_responsive_status( $title_bottom_gap_last_edited );
|
||||
|
||||
$title_bottom_gap_values = array(
|
||||
'desktop' => $title_bottom_gap,
|
||||
'tablet' => $title_bottom_gap_responsive_active ? $title_bottom_gap_tablet : '',
|
||||
'phone' => $title_bottom_gap_responsive_active ? $title_bottom_gap_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $title_bottom_gap_values, '%%order_class%% .dsm-menu-title', 'padding-bottom', $render_slug );
|
||||
}
|
||||
|
||||
if ( '0px' !== $menu_space_between || '' !== $menu_space_between_tablet || '' !== $menu_space_between_phone ) {
|
||||
$menu_space_between_responsive_active = et_pb_get_responsive_status( $menu_space_between_last_edited );
|
||||
|
||||
$menu_space_between_values = array(
|
||||
'desktop' => $menu_space_between,
|
||||
'tablet' => $menu_space_between_responsive_active ? $menu_space_between_tablet : '',
|
||||
'phone' => $menu_space_between_responsive_active ? $menu_space_between_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $menu_space_between_values, '%%order_class%% .dsm-menu li:not(:last-child)', 'margin-bottom', $render_slug );
|
||||
et_pb_generate_responsive_css( $menu_space_between_values, '%%order_class%% .dsm-menu .menu-item-has-children .sub-menu>li', 'margin-top', $render_slug );
|
||||
|
||||
}
|
||||
|
||||
if ( '' !== $menu_left_space || '' !== $menu_left_space_tablet || '' !== $menu_left_space_phone ) {
|
||||
$menu_left_space_responsive_active = et_pb_get_responsive_status( $menu_left_space_last_edited );
|
||||
|
||||
$menu_left_space_values = array(
|
||||
'desktop' => $menu_left_space,
|
||||
'tablet' => $menu_left_space_responsive_active ? $menu_left_space_tablet : '',
|
||||
'phone' => $menu_left_space_responsive_active ? $menu_left_space_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $menu_left_space_values, '%%order_class%% ul.dsm-menu', 'padding-left', $render_slug );
|
||||
}
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'menu_left_space', $this->props ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( '%%order_class%% ul.dsm-menu' ),
|
||||
'declaration' => sprintf(
|
||||
'padding-left: %1$s;',
|
||||
esc_html( $menu_left_space_hover )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $submenu_left_space || '' !== $submenu_left_space_tablet || '' !== $submenu_left_space_phone ) {
|
||||
$submenu_left_space_responsive_active = et_pb_get_responsive_status( $submenu_left_space_last_edited );
|
||||
|
||||
$submenu_left_space_values = array(
|
||||
'desktop' => $submenu_left_space,
|
||||
'tablet' => $submenu_left_space_responsive_active ? $submenu_left_space_tablet : '',
|
||||
'phone' => $submenu_left_space_responsive_active ? $submenu_left_space_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $submenu_left_space_values, '%%order_class%% .dsm-menu .menu-item-has-children .sub-menu', 'padding-left', $render_slug );
|
||||
}
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'submenu_left_space', $this->props ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( '%%order_class%% .dsm-menu .menu-item-has-children .sub-menu' ),
|
||||
'declaration' => sprintf(
|
||||
'padding-left: %1$s;',
|
||||
esc_html( $submenu_left_space_hover )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $menu_link_text_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% ul.dsm-menu li a',
|
||||
'declaration' => sprintf(
|
||||
'color: %1$s;',
|
||||
esc_html( $menu_link_text_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'menu_link_text_color', $this->props ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% ul.dsm-menu li a:hover',
|
||||
'declaration' => sprintf(
|
||||
'color: %1$s;',
|
||||
esc_html( $menu_link_text_color_hover )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'disc' !== $list_style_type ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '#et-boc %%order_class%% ul.dsm-menu, %%order_class%% ul.dsm-menu, %%order_class%% ul.dsm-menu .sub-menu',
|
||||
'declaration' => sprintf(
|
||||
'list-style-type: %1$s;',
|
||||
esc_attr( $list_style_type )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $list_style_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% ul.dsm-menu li',
|
||||
'declaration' => sprintf(
|
||||
'color: %1$s;',
|
||||
esc_html( $list_style_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $title ) {
|
||||
$title = sprintf(
|
||||
'<%1$s class="dsm-menu-title et_pb_module_header">%2$s</%1$s>',
|
||||
et_pb_process_header_level( $header_level, 'h4' ),
|
||||
$title
|
||||
);
|
||||
}
|
||||
|
||||
$this->add_classname(
|
||||
array(
|
||||
$this->get_text_orientation_classname(),
|
||||
"et_pb_bg_layout_{$background_layout}",
|
||||
)
|
||||
);
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'%2$s%1$s',
|
||||
$menu,
|
||||
$title
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_NavMenu;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g fill="#03dac6"><path d="m21.83 6.55c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m4.04 20.52c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38c.01.76-.61 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m12.03 15.35h-3.44c-1.19 0-2.16-.97-2.16-2.16v-3.44c0-1.19.97-2.16 2.16-2.16h3.45c1.19 0 2.16.97 2.16 2.16v3.45c-.01 1.19-.98 2.15-2.17 2.15zm-3.44-6.99c-.77 0-1.39.63-1.39 1.39v3.45c0 .77.63 1.39 1.39 1.39h3.45c.77 0 1.39-.63 1.39-1.39v-3.45c0-.77-.63-1.39-1.39-1.39z"/></g><path d="m21.18 15.35h-3.45c-1.19 0-2.16-.97-2.16-2.16v-3.44c0-1.19.97-2.16 2.16-2.16h3.45c1.19 0 2.16.97 2.16 2.16v3.45c0 1.19-.97 2.15-2.16 2.15zm-3.45-6.99c-.77 0-1.39.63-1.39 1.39v3.45c0 .77.63 1.39 1.39 1.39h3.45c.77 0 1.39-.63 1.39-1.39v-3.45c0-.77-.63-1.39-1.39-1.39z" fill="#fff"/><path d="m12.03 24.21h-3.44c-1.19 0-2.16-.97-2.16-2.16v-3.45c0-1.19.97-2.16 2.16-2.16h3.45c1.19 0 2.16.97 2.16 2.16v3.45c-.01 1.2-.98 2.16-2.17 2.16zm-3.44-6.99c-.77 0-1.39.63-1.39 1.39v3.45c0 .77.63 1.39 1.39 1.39h3.45c.77 0 1.39-.63 1.39-1.39v-3.45c0-.77-.63-1.39-1.39-1.39z" fill="#fff"/><path d="m19.45 23.96c-2.07 0-3.76-1.69-3.76-3.76s1.69-3.76 3.76-3.76 3.76 1.69 3.76 3.76c0 2.08-1.68 3.76-3.76 3.76zm0-6.74c-1.65 0-2.99 1.34-2.99 2.99s1.34 2.99 2.99 2.99 2.99-1.34 2.99-2.99c.01-1.65-1.34-2.99-2.99-2.99z" fill="#03dac6"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,612 @@
|
||||
<?php
|
||||
|
||||
class DSM_Perspective_Image extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_perspective_image';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Image', 'dsm-supreme-modules-for-divi' );
|
||||
$this->plural = esc_html__( 'Supreme Images', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'link' => esc_html__( 'Link', 'dsm-supreme-modules-for-divi' ),
|
||||
'transform' => esc_html__( 'Transform & Rotation', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'overlay' => esc_html__( 'Overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
'alignment' => esc_html__( 'Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'width' => array(
|
||||
'title' => esc_html__( 'Sizing', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 65,
|
||||
),
|
||||
),
|
||||
),
|
||||
'custom_css' => array(
|
||||
'toggles' => array(
|
||||
'animation' => array(
|
||||
'title' => esc_html__( 'Animation', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 90,
|
||||
),
|
||||
'attributes' => array(
|
||||
'title' => esc_html__( 'Attributes', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 95,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'important' => array( 'custom_margin' ),
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .et_pb_image_wrap',
|
||||
'border_styles' => '%%order_class%% .et_pb_image_wrap',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .et_pb_image_wrap',
|
||||
'custom_style' => true,
|
||||
),
|
||||
),
|
||||
),
|
||||
'max_width' => array(
|
||||
'options' => array(
|
||||
'max_width' => array(
|
||||
'depends_show_if' => 'off',
|
||||
),
|
||||
),
|
||||
),
|
||||
'fonts' => false,
|
||||
'text' => false,
|
||||
'button' => false,
|
||||
'link_options' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'src' => array(
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'hide_metadata' => true,
|
||||
'affects' => array(
|
||||
'alt',
|
||||
'title_text',
|
||||
),
|
||||
'description' => esc_html__( 'Upload your desired image, or type in the URL to the image you would like to display.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'alt' => array(
|
||||
'label' => esc_html__( 'Image Alternative Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'depends_show_if' => 'on',
|
||||
'depends_on' => array(
|
||||
'src',
|
||||
),
|
||||
'description' => esc_html__( 'This defines the HTML ALT text. A short description of your image can be placed here.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'custom_css',
|
||||
'toggle_slug' => 'attributes',
|
||||
),
|
||||
'title_text' => array(
|
||||
'label' => esc_html__( 'Image Title Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'depends_show_if' => 'on',
|
||||
'depends_on' => array(
|
||||
'src',
|
||||
),
|
||||
'description' => esc_html__( 'This defines the HTML Title text.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'custom_css',
|
||||
'toggle_slug' => 'attributes',
|
||||
),
|
||||
'show_in_lightbox' => array(
|
||||
'label' => esc_html__( 'Open in Lightbox', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'off',
|
||||
'affects' => array(
|
||||
'url',
|
||||
'url_new_window',
|
||||
'use_overlay',
|
||||
'show_lightbox_other_img',
|
||||
),
|
||||
'toggle_slug' => 'link',
|
||||
'description' => esc_html__( 'Here you can choose whether or not the image should open in Lightbox. Note: if you select to open the image in Lightbox, url options below will be ignored.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'show_lightbox_other_img' => array(
|
||||
'label' => esc_html__( 'Use Other Lightbox Image', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'off',
|
||||
'affects' => array(
|
||||
'show_lightbox_other_img_src',
|
||||
),
|
||||
'toggle_slug' => 'link',
|
||||
'description' => esc_html__( 'Here you can choose whether you want to have another image should open in Lightbox.', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
),
|
||||
'show_lightbox_other_img_src' => array(
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an Lightbox image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an Lightbox Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Lightbox Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'hide_metadata' => true,
|
||||
'description' => esc_html__( 'Upload your desired image, or type in the URL to the image you would like to display.', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'toggle_slug' => 'link',
|
||||
),
|
||||
'url' => array(
|
||||
'label' => esc_html__( 'Image Link URL', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'depends_show_if' => 'off',
|
||||
'affects' => array(
|
||||
'use_overlay',
|
||||
),
|
||||
'description' => esc_html__( 'If you would like your image to be a link, input your destination URL here. No link will be created if this field is left blank.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'link',
|
||||
//'dynamic_content' => 'url',
|
||||
),
|
||||
'url_new_window' => array(
|
||||
'label' => esc_html__( 'Image Link Target', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'In The Same Window', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'In The New Tab', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'off',
|
||||
'depends_show_if' => 'off',
|
||||
'toggle_slug' => 'link',
|
||||
'description' => esc_html__( 'Here you can choose whether or not your link opens in a new window', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'perspective' => array(
|
||||
'label' => esc_html__( 'Perspective', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'toggle_slug' => 'transform',
|
||||
//'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '1000px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '1000px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '1500',
|
||||
'step' => '1',
|
||||
),
|
||||
//'responsive' => true,
|
||||
),
|
||||
'dsm_rotate_y' => array(
|
||||
'label' => esc_html__( 'Rotate Y', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'toggle_slug' => 'transform',
|
||||
//'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '0deg',
|
||||
'default_unit' => 'deg',
|
||||
'default_on_front' => '0deg',
|
||||
'range_settings' => array(
|
||||
'min' => '-90',
|
||||
'max' => '90',
|
||||
'step' => '1',
|
||||
),
|
||||
'hover' => 'tabs',
|
||||
//'responsive' => true,
|
||||
),
|
||||
'dsm_rotate_x' => array(
|
||||
'label' => esc_html__( 'Rotate X', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'toggle_slug' => 'transform',
|
||||
//'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '0deg',
|
||||
'default_unit' => 'deg',
|
||||
'default_on_front' => '0deg',
|
||||
'range_settings' => array(
|
||||
'min' => '-90',
|
||||
'max' => '90',
|
||||
'step' => '1',
|
||||
),
|
||||
'hover' => 'tabs',
|
||||
//'responsive' => true,
|
||||
),
|
||||
'dsm_rotate_z' => array(
|
||||
'label' => esc_html__( 'Rotate Z', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'toggle_slug' => 'transform',
|
||||
//'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '0deg',
|
||||
'default_unit' => 'deg',
|
||||
'default_on_front' => '0deg',
|
||||
'range_settings' => array(
|
||||
'min' => '-90',
|
||||
'max' => '90',
|
||||
'step' => '1',
|
||||
),
|
||||
'hover' => 'tabs',
|
||||
//'responsive' => true,
|
||||
),
|
||||
'use_overlay' => array(
|
||||
'label' => esc_html__( 'Image Overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'Off', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'On', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'off',
|
||||
'affects' => array(
|
||||
'overlay_icon_color',
|
||||
'hover_overlay_color',
|
||||
'hover_icon',
|
||||
),
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'overlay',
|
||||
'description' => esc_html__( 'If enabled, an overlay color and icon will be displayed when a visitors hovers over the image', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'overlay_icon_color' => array(
|
||||
'label' => esc_html__( 'Overlay Icon Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'overlay',
|
||||
'description' => esc_html__( 'Here you can define a custom color for the overlay icon', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'hover_overlay_color' => array(
|
||||
'label' => esc_html__( 'Hover Overlay Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'overlay',
|
||||
'description' => esc_html__( 'Here you can define a custom color for the overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'hover_icon' => array(
|
||||
'label' => esc_html__( 'Hover Icon Picker', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select_icon',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 'P',
|
||||
'class' => array( 'et-pb-font-icon' ),
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'overlay',
|
||||
'description' => esc_html__( 'Here you can define a custom icon for the overlay', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'align' => array(
|
||||
'label' => esc_html__( 'Image Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text_align',
|
||||
'option_category' => 'layout',
|
||||
'options' => et_builder_get_text_orientation_options( array( 'justified' ) ),
|
||||
'default_on_front' => 'left',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'alignment',
|
||||
'description' => esc_html__( 'Here you can choose the image alignment.', 'dsm-supreme-modules-for-divi' ),
|
||||
'options_icon' => 'module_align',
|
||||
),
|
||||
'force_fullwidth' => array(
|
||||
'label' => esc_html__( 'Force Fullwidth', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'off',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'affects' => array(
|
||||
'max_width',
|
||||
),
|
||||
),
|
||||
'always_center_on_mobile' => array(
|
||||
'label' => esc_html__( 'Always Center Image On Mobile', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default_on_front' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'alignment',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_alignment() {
|
||||
$alignment = isset( $this->props['align'] ) ? $this->props['align'] : '';
|
||||
|
||||
return et_pb_get_alignment( $alignment );
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$src = $this->props['src'];
|
||||
$alt = $this->props['alt'];
|
||||
$title_text = $this->props['title_text'];
|
||||
$url = $this->props['url'];
|
||||
$url_new_window = $this->props['url_new_window'];
|
||||
$show_in_lightbox = $this->props['show_in_lightbox'];
|
||||
$align = $this->get_alignment();
|
||||
$force_fullwidth = $this->props['force_fullwidth'];
|
||||
$always_center_on_mobile = $this->props['always_center_on_mobile'];
|
||||
$overlay_icon_color = $this->props['overlay_icon_color'];
|
||||
$hover_overlay_color = $this->props['hover_overlay_color'];
|
||||
$hover_icon = $this->props['hover_icon'];
|
||||
$use_overlay = $this->props['use_overlay'];
|
||||
$animation_style = $this->props['animation_style'];
|
||||
$show_lightbox_other_img = $this->props['show_lightbox_other_img'];
|
||||
$show_lightbox_other_img_src = $this->props['show_lightbox_other_img_src'];
|
||||
$perspective = $this->props['perspective'];
|
||||
$dsm_rotate_y = $this->props['dsm_rotate_y'];
|
||||
$dsm_rotate_y_hover = $this->get_hover_value( 'dsm_rotate_y' );
|
||||
$dsm_rotate_y__hover_enabled = et_pb_hover_options()->is_enabled( 'dsm_rotate_y', $this->props );
|
||||
$dsm_rotate_x = $this->props['dsm_rotate_x'];
|
||||
$dsm_rotate_x_hover = $this->get_hover_value( 'dsm_rotate_x' );
|
||||
$dsm_rotate_x__hover_enabled = et_pb_hover_options()->is_enabled( 'dsm_rotate_x', $this->props );
|
||||
$dsm_rotate_z = $this->props['dsm_rotate_z'];
|
||||
$dsm_rotate_z_hover = $this->get_hover_value( 'dsm_rotate_z' );
|
||||
$dsm_rotate_z__hover_enabled = et_pb_hover_options()->is_enabled( 'dsm_rotate_z', $this->props );
|
||||
|
||||
$hover_transition_duration = $this->props['hover_transition_duration'];
|
||||
$hover_transition_delay = $this->props['hover_transition_delay'];
|
||||
$hover_transition_speed_curve = $this->props['hover_transition_speed_curve'];
|
||||
|
||||
$video_background = $this->video_background();
|
||||
$parallax_image_background = $this->get_parallax_image_background();
|
||||
|
||||
$wrapper_selector = '%%order_class%% .dsm-perspective-image-wrapper';
|
||||
$image_style_hover = '';
|
||||
|
||||
// Handle svg image behaviour
|
||||
$src_pathinfo = pathinfo( $src );
|
||||
$is_src_svg = isset( $src_pathinfo['extension'] ) ? 'svg' === $src_pathinfo['extension'] : false;
|
||||
|
||||
// overlay can be applied only if image has link or if lightbox enabled
|
||||
$is_overlay_applied = 'on' === $use_overlay && ( 'on' === $show_in_lightbox || ( 'off' === $show_in_lightbox && '' !== $url ) ) ? 'on' : 'off';
|
||||
|
||||
if ( 'on' === $force_fullwidth ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%%',
|
||||
'declaration' => 'max-width: 100% !important;',
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .et_pb_image_wrap, %%order_class%% img',
|
||||
'declaration' => 'width: 100%;',
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( ! $this->_is_field_default( 'align', $align ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%%',
|
||||
'declaration' => sprintf(
|
||||
'text-align: %1$s;',
|
||||
esc_html( $align )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'center' !== $align ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%%',
|
||||
'declaration' => sprintf(
|
||||
'margin-%1$s: 0;',
|
||||
esc_html( $align )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'on' === $is_overlay_applied ) {
|
||||
if ( '' !== $overlay_icon_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .et_overlay:before',
|
||||
'declaration' => sprintf(
|
||||
'color: %1$s !important;',
|
||||
esc_html( $overlay_icon_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $hover_overlay_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .et_overlay',
|
||||
'declaration' => sprintf(
|
||||
'background-color: %1$s;',
|
||||
esc_html( $hover_overlay_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$data_icon = '' !== $hover_icon
|
||||
? sprintf(
|
||||
' data-icon="%1$s"',
|
||||
esc_attr( et_pb_process_font_icon( $hover_icon ) )
|
||||
)
|
||||
: '';
|
||||
|
||||
$overlay_output = sprintf(
|
||||
'<span class="et_overlay%1$s"%2$s></span>',
|
||||
( '' !== $hover_icon ? ' et_pb_inline_icon' : '' ),
|
||||
$data_icon
|
||||
);
|
||||
}
|
||||
|
||||
// Set display block for svg image to avoid disappearing svg image
|
||||
if ( $is_src_svg ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .et_pb_image_wrap',
|
||||
'declaration' => 'display: block;',
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$output = sprintf(
|
||||
'<span class="et_pb_image_wrap"><img src="%1$s" alt="%2$s"%3$s />%4$s</span>',
|
||||
esc_attr( $src ),
|
||||
esc_attr( $alt ),
|
||||
( '' !== $title_text ? sprintf( ' title="%1$s"', esc_attr( $title_text ) ) : '' ),
|
||||
'on' === $is_overlay_applied ? $overlay_output : ''
|
||||
);
|
||||
|
||||
if ( 'on' === $show_in_lightbox ) {
|
||||
$output = sprintf(
|
||||
'<a href="%1$s" class="et_pb_lightbox_image" title="%3$s" data-mfp-src="%4$s">%2$s</a>',
|
||||
esc_attr( $src ),
|
||||
$output,
|
||||
esc_attr( $alt ),
|
||||
'on' === $show_lightbox_other_img && '' !== $show_lightbox_other_img_src ? esc_url( $show_lightbox_other_img_src ) : esc_url( $src )
|
||||
);
|
||||
} elseif ( '' !== $url ) {
|
||||
$output = sprintf(
|
||||
'<a href="%1$s"%3$s>%2$s</a>',
|
||||
esc_url( $url ),
|
||||
$output,
|
||||
( 'on' === $url_new_window ? ' target="_blank"' : '' )
|
||||
);
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-perspective-image-wrapper',
|
||||
'declaration' => sprintf(
|
||||
'transform: perspective(%1$s) rotateX(%2$s) rotateY(%3$s) rotateZ(%4$s);',
|
||||
esc_attr( $perspective ),
|
||||
esc_attr( $dsm_rotate_x ),
|
||||
esc_attr( $dsm_rotate_y ),
|
||||
esc_attr( $dsm_rotate_z )
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
if ( et_builder_is_hover_enabled( 'dsm_rotate_y', $this->props ) || et_builder_is_hover_enabled( 'dsm_rotate_x', $this->props ) || et_builder_is_hover_enabled( 'dsm_rotate_z', $this->props ) ) {
|
||||
$image_style_hover = sprintf(
|
||||
'transform: perspective(%4$s)%1$s%2$s%3$s;',
|
||||
( et_builder_is_hover_enabled( 'dsm_rotate_x', $this->props ) ? esc_attr( " rotateX($dsm_rotate_x_hover)" ) : '' ),
|
||||
( et_builder_is_hover_enabled( 'dsm_rotate_y', $this->props ) ? esc_attr( " rotateY($dsm_rotate_y_hover)" ) : '' ),
|
||||
( et_builder_is_hover_enabled( 'dsm_rotate_z', $this->props ) ? esc_attr( " rotateZ($dsm_rotate_z_hover)" ) : '' ),
|
||||
esc_attr( $perspective )
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $dsm_rotate_y_hover || '' !== $dsm_rotate_x_hover || '' !== $dsm_rotate_z_hover ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( $wrapper_selector ),
|
||||
'declaration' => $image_style_hover,
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-perspective-image-wrapper',
|
||||
'declaration' => sprintf(
|
||||
'transition: transform %1$s %3$s %2$s;',
|
||||
esc_attr( $hover_transition_duration ),
|
||||
esc_attr( $hover_transition_delay ),
|
||||
esc_attr( $hover_transition_speed_curve )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Module classnames
|
||||
|
||||
$class = 'dsm-perspective-image-wrapper';
|
||||
// Module classnames
|
||||
if ( ! in_array( $animation_style, array( '', 'none' ) ) ) {
|
||||
$this->add_classname( 'et-waypoint' );
|
||||
}
|
||||
|
||||
if ( 'on' === $is_overlay_applied ) {
|
||||
$class .= ' et_pb_has_overlay';
|
||||
}
|
||||
|
||||
if ( 'on' === $always_center_on_mobile ) {
|
||||
$class .= ' et_always_center_on_mobile';
|
||||
}
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'<div%3$s class="%2$s">
|
||||
%5$s
|
||||
%4$s
|
||||
%1$s
|
||||
</div>',
|
||||
$output,
|
||||
esc_attr( $class ),
|
||||
$this->module_id(),
|
||||
$video_background,
|
||||
$parallax_image_background
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Perspective_Image;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m5.33 13.86c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m21.24 21.08c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m25.17 6.82c-.2-.33-.56-.51-1.01-.51h-6.46c.2.24.37.5.52.77h5.93c.1 0 .28.02.35.14.06.1.06.31-.09.6l-7.74 14.29c-.32.6-1.09 1.1-1.67 1.1h-11.15c-.1 0-.28-.02-.35-.14-.06-.1-.06-.31.09-.6l5.59-10.33c-.16-.28-.29-.57-.39-.88l-5.88 10.85c-.27.5-.3.99-.08 1.36.2.33.56.51 1.01.51h11.16c.86 0 1.89-.66 2.34-1.5l7.74-14.29c.27-.51.3-1 .09-1.37z" fill="#fff"/><path d="m13.69 15.16c-3.07 0-5.57-2.5-5.57-5.57s2.5-5.57 5.57-5.57 5.57 2.5 5.57 5.57-2.5 5.57-5.57 5.57zm0-10.37c-2.65 0-4.8 2.15-4.8 4.8s2.15 4.8 4.8 4.8 4.8-2.15 4.8-4.8-2.15-4.8-4.8-4.8z" fill="#fff"/><g fill="#03dac6"><path d="m7.65 17.15h10.1v.77h-10.1z"/><path d="m6.33 19.59h10.1v.77h-10.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,397 @@
|
||||
<?php
|
||||
|
||||
class DSM_PriceList extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_pricelist';
|
||||
public $vb_support = 'on';
|
||||
public $child_slug = 'dsm_pricelist_child';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divsupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Price List', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'separator' => array(
|
||||
'title' => esc_html__( 'Separator', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 70,
|
||||
),
|
||||
'image' => array(
|
||||
'title' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 69,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-pricelist-title',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '26px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_header_level' => true,
|
||||
'hide_text_align' => true,
|
||||
),
|
||||
'content' => array(
|
||||
'label' => esc_html__( 'Description', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-pricelist-description',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '14px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
),
|
||||
'price' => array(
|
||||
'label' => esc_html__( 'Price', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-pricelist-price',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '18px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'hide_text_align' => true,
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%% .dsm_pricelist_child',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
'image' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm-pricelist-image img',
|
||||
'border_styles' => '%%order_class%% .dsm-pricelist-image img',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image',
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
'image' => array(
|
||||
'label' => esc_html__( 'Image Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-pricelist-image img',
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'content_orientation' => array(
|
||||
'label' => esc_html__( 'Vertical Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'flex-start' => esc_html__( 'Top', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Center', 'dsm-supreme-modules-for-divi' ),
|
||||
'flex-end' => esc_html__( 'Bottom', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'default' => 'flex-start',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
'description' => esc_html__( 'This setting determines the vertical alignment of your content. Your content can either be align to the top, vertically centered, or aligned to the bottom.', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'item_bottom_gap' => array(
|
||||
'label' => esc_html__( 'Item Bottom Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '25px',
|
||||
'default_on_front' => '25px',
|
||||
'default_unit' => 'px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '60',
|
||||
'step' => '1',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'mobile_options' => true,
|
||||
'allow_empty' => true,
|
||||
'responsive' => true,
|
||||
),
|
||||
'separator_style' => array(
|
||||
'label' => esc_html__( 'Style', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 'dotted',
|
||||
'options' => et_divi_divider_style_choices(),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'separator',
|
||||
),
|
||||
'separator_weight' => array(
|
||||
'label' => esc_html__( 'Weight', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '2px',
|
||||
'default_on_front' => '2px',
|
||||
'default_unit' => 'px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '10',
|
||||
'step' => '1',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'separator',
|
||||
),
|
||||
'separator_color' => array(
|
||||
'default' => '#333',
|
||||
'label' => esc_html__( 'Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'description' => esc_html__( 'Here you can define a custom color for your separator.', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'separator',
|
||||
),
|
||||
'separator_gap' => array(
|
||||
'label' => esc_html__( 'Gap Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '10px',
|
||||
'default_on_front' => '10px',
|
||||
'default_unit' => 'px',
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '40',
|
||||
'step' => '1',
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'separator',
|
||||
),
|
||||
'image_max_width' => array(
|
||||
'label' => esc_html__( 'Image Width', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'depends_show_if' => 'off',
|
||||
'default' => '50%',
|
||||
'default_unit' => '%',
|
||||
'default_on_front' => '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
'image_spacing' => array(
|
||||
'label' => esc_html__( 'Image Gap Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '25px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$separator_style = $this->props['separator_style'];
|
||||
$separator_weight = $this->props['separator_weight'];
|
||||
$separator_color = $this->props['separator_color'];
|
||||
$separator_gap = $this->props['separator_gap'];
|
||||
$item_bottom_gap = $this->props['item_bottom_gap'];
|
||||
$item_bottom_gap_tablet = $this->props['item_bottom_gap_tablet'];
|
||||
$item_bottom_gap_phone = $this->props['item_bottom_gap_phone'];
|
||||
$item_bottom_gap_last_edited = $this->props['item_bottom_gap_last_edited'];
|
||||
$content_orientation = $this->props['content_orientation'];
|
||||
$image_max_width = $this->props['image_max_width'];
|
||||
$image_max_width_tablet = $this->props['image_max_width_tablet'];
|
||||
$image_max_width_phone = $this->props['image_max_width_phone'];
|
||||
$image_max_width_last_edited = $this->props['image_max_width_last_edited'];
|
||||
$image_spacing = $this->props['image_spacing'];
|
||||
$image_spacing_tablet = $this->props['image_spacing_tablet'];
|
||||
$image_spacing_phone = $this->props['image_spacing_phone'];
|
||||
$image_spacing_last_edited = $this->props['image_spacing_last_edited'];
|
||||
|
||||
if ( '25px' !== $item_bottom_gap_tablet || '' !== $item_bottom_gap_phone || '' !== $item_bottom_gap ) {
|
||||
$item_bottom_gap_responsive_active = et_pb_get_responsive_status( $item_bottom_gap_last_edited );
|
||||
|
||||
$item_bottom_gap_values = array(
|
||||
'desktop' => $item_bottom_gap,
|
||||
'tablet' => $item_bottom_gap_responsive_active ? $item_bottom_gap_tablet : '',
|
||||
'phone' => $item_bottom_gap_responsive_active ? $item_bottom_gap_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $item_bottom_gap_values, '%%order_class%% .dsm_pricelist_child:not(:last-child)', 'padding-bottom', $render_slug );
|
||||
}
|
||||
|
||||
if ( '' !== $image_max_width_tablet || '' !== $image_max_width_phone || '' !== $image_max_width ) {
|
||||
$image_max_width_responsive_active = et_pb_get_responsive_status( $image_max_width_last_edited );
|
||||
|
||||
$image_max_width_values = array(
|
||||
'desktop' => $image_max_width,
|
||||
'tablet' => $image_max_width_responsive_active ? $image_max_width_tablet : '',
|
||||
'phone' => $image_max_width_responsive_active ? $image_max_width_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $image_max_width_values, '%%order_class%% .dsm-pricelist-image', 'max-width', $render_slug );
|
||||
}
|
||||
|
||||
if ( '' !== $image_spacing_tablet || '' !== $image_spacing_phone || '' !== $image_spacing ) {
|
||||
$image_spacing_responsive_active = et_pb_get_responsive_status( $image_spacing_last_edited );
|
||||
|
||||
$image_spacing_values = array(
|
||||
'desktop' => $image_spacing,
|
||||
'tablet' => $image_spacing_responsive_active ? $image_spacing_tablet : '',
|
||||
'phone' => $image_spacing_responsive_active ? $image_spacing_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $image_spacing_values, '%%order_class%% .dsm-pricelist-image', 'margin-right', $render_slug );
|
||||
}
|
||||
|
||||
if ( 'dotted' !== $separator_style ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-pricelist-separator',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-style: %1$s;',
|
||||
esc_attr( $separator_style )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '2px' !== $separator_weight ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-pricelist-separator',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-width: %1$s;',
|
||||
esc_attr( $separator_weight )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $separator_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-pricelist-separator',
|
||||
'declaration' => sprintf(
|
||||
'border-bottom-color: %1$s;',
|
||||
esc_html( $separator_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '10px' !== $separator_gap ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-pricelist-separator',
|
||||
'declaration' => sprintf(
|
||||
'margin-left: %1$s; margin-right: %1$s;',
|
||||
esc_attr( $separator_gap )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'flex-start' !== $content_orientation ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_pricelist_child>div',
|
||||
'declaration' => sprintf(
|
||||
'align-items: %1$s;',
|
||||
esc_attr( $content_orientation )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'<div class="dsm_pricelist">%1$s</div>',
|
||||
et_core_sanitized_previously( $this->content )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_PriceList;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m7.8 18.42c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m20.2 9.55c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m17.19 17.17c-.24-.76-.94-1.27-1.74-1.27-.4 0-.73-.33-.73-.73s.33-.73.73-.73.73.33.73.73c0 .3.25.54.54.54s.54-.25.54-.54c0-.8-.52-1.5-1.27-1.74v-.24c0-.3-.25-.54-.54-.54-.3 0-.54.25-.54.54v.24c-.96.3-1.49 1.32-1.19 2.28.24.76.94 1.27 1.74 1.27.4 0 .73.33.73.73s-.33.73-.73.73-.73-.33-.73-.73c0-.3-.25-.54-.54-.54-.3 0-.54.25-.54.54 0 .8.52 1.5 1.27 1.74v.27c0 .3.25.54.54.54.3 0 .54-.25.54-.54v-.27c.96-.3 1.49-1.32 1.19-2.28z" fill="#fff"/><path d="m16.55 7.42c-.06-.05-.12-.09-.18-.13v.99l4.03 3.54v9.86c0 .5-.41.91-.91.91h-8.07c-.5 0-.91-.41-.91-.91v-9.86l4.03-3.54v-.99c-.06.04-.12.08-.18.13l-4.62 4.06v10.21c0 .92.75 1.67 1.67 1.67h8.07c.92 0 1.67-.75 1.67-1.67v-10.22z" fill="#fff"/><path d="m15.46 11.69c-.72 0-1.3-.58-1.3-1.3v-4.44c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3v4.45c-.01.71-.59 1.29-1.3 1.29zm0-6.28c-.29 0-.53.24-.53.53v4.45c0 .29.24.53.53.53s.53-.24.53-.53v-4.44c0-.3-.24-.54-.53-.54z" fill="#03dac6"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,289 @@
|
||||
<?php
|
||||
|
||||
class DSM_PriceList_Child extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_pricelist_child';
|
||||
public $vb_support = 'on';
|
||||
public $type = 'child';
|
||||
public $child_title_var = 'title';
|
||||
// If the attribute defined on $this->child_title_var is empty, this attribute will be used instead
|
||||
public $child_title_fallback_var = 'subtitle';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Price List Item', 'dsm-supreme-modules-for-divi' );
|
||||
$this->advanced_setting_title_text = esc_html__( 'Price List Item', 'dsm-supreme-modules-for-divi' );
|
||||
$this->settings_text = esc_html__( 'Price List Item Settings', 'dsm-supreme-modules-for-divi' );
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'link' => esc_html__( 'Link', 'dsm-supreme-modules-for-divi' ),
|
||||
'image' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'icon_settings' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'text' => array(
|
||||
'title' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 49,
|
||||
),
|
||||
'width' => array(
|
||||
'title' => esc_html__( 'Sizing', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 65,
|
||||
),
|
||||
),
|
||||
),
|
||||
'custom_css' => array(
|
||||
'toggles' => array(
|
||||
'attributes' => array(
|
||||
'title' => esc_html__( 'Attributes', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 95,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => false,
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%% .dsm_pricelist_item_wrapper',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(),
|
||||
'image' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%% .dsm-pricelist-image img',
|
||||
'border_styles' => '%%order_class%% .dsm-pricelist-image img',
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(),
|
||||
'image' => array(
|
||||
'label' => esc_html__( 'Image Box Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-pricelist-image img',
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),
|
||||
),
|
||||
'button' => false,
|
||||
'filters' => array(
|
||||
'child_filters_target' => array(
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
),
|
||||
),
|
||||
'icon_settings' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% .dsm-pricelist-image img',
|
||||
),
|
||||
),
|
||||
'position_fields' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
$et_accent_color = et_builder_accent_color();
|
||||
|
||||
return array(
|
||||
'price' => array(
|
||||
'label' => esc_html__( 'Price', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Add the price of the item', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
'default' => '$8',
|
||||
'default_on_front' => '$8',
|
||||
),
|
||||
'title' => array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Text entered here will appear as title.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => 'The title of the first pricing item.',
|
||||
),
|
||||
'image' => array(
|
||||
'label' => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'upload',
|
||||
'option_category' => 'basic_option',
|
||||
'upload_button_text' => esc_attr__( 'Upload an image', 'dsm-supreme-modules-for-divi' ),
|
||||
'choose_text' => esc_attr__( 'Choose an Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'update_text' => esc_attr__( 'Set As Image', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'off',
|
||||
'description' => esc_html__( 'Upload an image to display at the top of your blurb.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'image',
|
||||
),
|
||||
'alt' => array(
|
||||
'label' => esc_html__( 'Image Alt Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Define the HTML ALT text for your image here.', 'dsm-supreme-modules-for-divi' ),
|
||||
'depends_show_if' => 'off',
|
||||
'tab_slug' => 'custom_css',
|
||||
'toggle_slug' => 'attributes',
|
||||
),
|
||||
'content' => array(
|
||||
'label' => esc_html__( 'Content', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'tiny_mce',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Content entered here will appear inside the module.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'image_max_width' => array(
|
||||
'label' => esc_html__( 'Image Width', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'depends_show_if' => 'off',
|
||||
'default' => '50%',
|
||||
'default_unit' => '%',
|
||||
'default_on_front' => '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
'image_spacing' => array(
|
||||
'label' => esc_html__( 'Image Gap Spacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'icon_settings',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'default' => '25px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '',
|
||||
'allow_empty' => true,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '50',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$title = $this->props['title'];
|
||||
$price = $this->props['price'];
|
||||
$image = $this->props['image'];
|
||||
$alt = $this->props['alt'];
|
||||
$image_spacing = $this->props['image_spacing'];
|
||||
$image_spacing_tablet = $this->props['image_spacing_tablet'];
|
||||
$image_spacing_phone = $this->props['image_spacing_phone'];
|
||||
$image_spacing_last_edited = $this->props['image_spacing_last_edited'];
|
||||
$image_max_width = $this->props['image_max_width'];
|
||||
$image_max_width_tablet = $this->props['image_max_width_tablet'];
|
||||
$image_max_width_phone = $this->props['image_max_width_phone'];
|
||||
$image_max_width_last_edited = $this->props['image_max_width_last_edited'];
|
||||
|
||||
if ( '' !== $image_max_width_tablet || '' !== $image_max_width_phone || '' !== $image_max_width ) {
|
||||
$image_max_width_responsive_active = et_pb_get_responsive_status( $image_max_width_last_edited );
|
||||
|
||||
$image_max_width_values = array(
|
||||
'desktop' => $image_max_width,
|
||||
'tablet' => $image_max_width_responsive_active ? $image_max_width_tablet : '',
|
||||
'phone' => $image_max_width_responsive_active ? $image_max_width_phone : '',
|
||||
);
|
||||
|
||||
et_pb_generate_responsive_css( $image_max_width_values, '%%order_class%% .dsm-pricelist-image', 'max-width', $render_slug );
|
||||
}
|
||||
|
||||
if ( '' !== $title ) {
|
||||
$title = sprintf( '<div class="dsm-pricelist-title et_pb_module_header">%1$s</div>', $title );
|
||||
}
|
||||
|
||||
if ( '' !== $price ) {
|
||||
$price = sprintf( '<div class="dsm-pricelist-price">%1$s</div>', $price );
|
||||
}
|
||||
|
||||
$image = ( '' !== trim( $image ) ) ? sprintf(
|
||||
'<img src="%1$s" alt="%2$s" />',
|
||||
esc_url( $image ),
|
||||
esc_attr( $alt )
|
||||
//esc_attr( " et_pb_animation_{$animation}" )
|
||||
) : '';
|
||||
|
||||
// Images: Add CSS Filters and Mix Blend Mode rules (if set)
|
||||
$generate_css_image_filters = '';
|
||||
if ( $image && array_key_exists( 'icon_settings', $this->advanced_fields ) && array_key_exists( 'css', $this->advanced_fields['icon_settings'] ) ) {
|
||||
$generate_css_image_filters = $this->generate_css_filters(
|
||||
$render_slug,
|
||||
'child_',
|
||||
self::$data_utils->array_get( $this->advanced_fields['icon_settings']['css'], 'main', '%%order_class%%' )
|
||||
);
|
||||
}
|
||||
|
||||
$image = $image ? sprintf(
|
||||
'<div class="dsm-pricelist-image%2$s">%1$s</div>',
|
||||
$image,
|
||||
esc_attr( $generate_css_image_filters )
|
||||
) : '';
|
||||
|
||||
$video_background = $this->video_background();
|
||||
$parallax_image_background = $this->get_parallax_image_background();
|
||||
|
||||
// Render module content
|
||||
return sprintf(
|
||||
'%7$s
|
||||
%6$s
|
||||
%3$s
|
||||
<div class="dsm_pricelist_item_wrapper%5$s">
|
||||
<div class="dsm-pricelist-header">
|
||||
%1$s
|
||||
<div class="dsm-pricelist-separator"></div>
|
||||
%2$s
|
||||
</div>
|
||||
%4$s
|
||||
</div>',
|
||||
$title,
|
||||
$price,
|
||||
$image,
|
||||
'' !== $this->content ? sprintf(
|
||||
'<div class="dsm-pricelist-description">%1$s</div>',
|
||||
et_core_sanitized_previously( $this->content )
|
||||
) : '',
|
||||
$this->get_text_orientation_classname(),
|
||||
$video_background,
|
||||
$parallax_image_background
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_PriceList_Child;
|
||||
@@ -0,0 +1,852 @@
|
||||
<?php
|
||||
|
||||
class DSM_Shapes extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_shapes';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Shapes', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
$this->main_css_element = '%%order_class%%.dsm_shapes';
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Shapes', 'dsm-supreme-modules-for-divi' ),
|
||||
'link' => esc_html__( 'Link', 'dsm-supreme-modules-for-divi' ),
|
||||
'image' => esc_html__( 'Image & Badge', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'shapes_settings' => esc_html__( 'Shapes', 'dsm-supreme-modules-for-divi' ),
|
||||
'text' => array(
|
||||
'title' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 49,
|
||||
),
|
||||
'width' => array(
|
||||
'title' => esc_html__( 'Sizing', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 65,
|
||||
),
|
||||
),
|
||||
),
|
||||
'custom_css' => array(
|
||||
'toggles' => array(
|
||||
'attributes' => array(
|
||||
'title' => esc_html__( 'Attributes', 'dsm-supreme-modules-for-divi' ),
|
||||
'priority' => 95,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'background' => array(
|
||||
'has_background_color_toggle' => true,
|
||||
'use_background_color' => true,
|
||||
'css' => array(
|
||||
"{$this->main_css_element}",
|
||||
),
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'padding' => "{$this->main_css_element}",
|
||||
'margin' => "{$this->main_css_element}",
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(),
|
||||
'shapes' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => "{$this->main_css_element} .dsm_shapes_wrapper",
|
||||
'border_styles' => "{$this->main_css_element} .dsm_shapes_wrapper",
|
||||
),
|
||||
),
|
||||
'label_prefix' => esc_html__( 'Shapes', 'dsm-supreme-modules-for-divi' ),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'shapes_settings',
|
||||
'depends_on' => array( 'use_shape_border' ),
|
||||
'depends_show_if' => 'on',
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element}",
|
||||
),
|
||||
),
|
||||
'shapes' => array(
|
||||
'label' => esc_html__( 'Shapes Shadow', 'dsm-supreme-modules-for-divi' ),
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'shapes_settings',
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .dsm_shapes_wrapper",
|
||||
),
|
||||
'default_on_fronts' => array(
|
||||
'color' => '',
|
||||
'position' => '',
|
||||
),
|
||||
),
|
||||
|
||||
),
|
||||
'fonts' => false,
|
||||
'text' => false,
|
||||
'text_shadow' => false,
|
||||
'button' => false,
|
||||
'width' => false,
|
||||
'height' => false,
|
||||
'max_width' => false,
|
||||
'filters' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
"{$this->main_css_element}",
|
||||
),
|
||||
),
|
||||
/*
|
||||
'child_filters_target' => array(
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'image_settings',
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .dsm_card_image_wrapper",
|
||||
'hover' => "{$this->main_css_element}:hover .dsm_card_image_wrapper",
|
||||
),
|
||||
),*/
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
$et_accent_color = et_builder_accent_color();
|
||||
|
||||
return array(
|
||||
'shapes_type' => array(
|
||||
'default' => 'square',
|
||||
'default_on_front' => 'square',
|
||||
'label' => esc_html__( 'Type', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'configuration',
|
||||
'options' => array(
|
||||
'square' => esc_html__( 'Square', 'dsm-supreme-modules-for-divi' ),
|
||||
'circle' => esc_html__( 'Circle', 'dsm-supreme-modules-for-divi' ),
|
||||
'rectangle' => esc_html__( 'Rectangle', 'dsm-supreme-modules-for-divi' ),
|
||||
'triangle' => esc_html__( 'Triangle', 'dsm-supreme-modules-for-divi' ),
|
||||
'oval' => esc_html__( 'Oval', 'dsm-supreme-modules-for-divi' ),
|
||||
'trapezoid' => esc_html__( 'Trapezoid', 'dsm-supreme-modules-for-divi' ),
|
||||
'parallelogram' => esc_html__( 'Parallelogram', 'dsm-supreme-modules-for-divi' ),
|
||||
'diamond_square' => esc_html__( 'Diamond Square', 'dsm-supreme-modules-for-divi' ),
|
||||
'hexagon' => esc_html__( 'Hexagon', 'dsm-supreme-modules-for-divi' ),
|
||||
'blob_one' => esc_html__( 'Blob #1', 'dsm-supreme-modules-for-divi' ),
|
||||
'blob_two' => esc_html__( 'Blob #2', 'dsm-supreme-modules-for-divi' ),
|
||||
'blob_three' => esc_html__( 'Blob #3', 'dsm-supreme-modules-for-divi' ),
|
||||
'blob_four' => esc_html__( 'Blob #4', 'dsm-supreme-modules-for-divi' ),
|
||||
'blob_five' => esc_html__( 'Blob #5', 'dsm-supreme-modules-for-divi' ),
|
||||
'blob_six' => esc_html__( 'Blob #6', 'dsm-supreme-modules-for-divi' ),
|
||||
'blob_seven' => esc_html__( 'Blob #7', 'dsm-supreme-modules-for-divi' ),
|
||||
'blob_eight' => esc_html__( 'Blob #8', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'toggle_slug' => 'main_content',
|
||||
'description' => esc_html__( '', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'shapes_square_size' => array(
|
||||
'label' => esc_html__( 'Size', 'dsm-supreme-modules-for-divi' ),
|
||||
'description' => esc_html__( 'Adjust size of the Shape.', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'toggle_slug' => 'main_content',
|
||||
'mobile_options' => true,
|
||||
'validate_unit' => true,
|
||||
'allowed_units' => array( '%', 'em', 'rem', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ex', 'vh', 'vw' ),
|
||||
'default' => '80',
|
||||
'default_unit' => '',
|
||||
'default_on_front' => '80',
|
||||
'unitless' => true,
|
||||
'allow_empty' => false,
|
||||
'range_settings' => array(
|
||||
'min' => '0',
|
||||
'max' => '800',
|
||||
'step' => '1',
|
||||
),
|
||||
'responsive' => true,
|
||||
),
|
||||
'shape_color' => array(
|
||||
'label' => esc_html__( 'Shape Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'default' => $et_accent_color,
|
||||
'default_on_front' => $et_accent_color,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'shapes_settings',
|
||||
'description' => esc_html__( 'Here you can define a custom color for the shapes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'use_shape_border' => array(
|
||||
'label' => esc_html__( 'Use Border', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'basic_option',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'shapes_settings',
|
||||
'affects' => array(
|
||||
'border_radii_shapes',
|
||||
'border_styles_shapes',
|
||||
),
|
||||
'show_if_not' => array(
|
||||
'shapes_type' => 'triangle',
|
||||
'shapes_type' => 'hexagon',
|
||||
'shapes_type' => 'trapezoid',
|
||||
),
|
||||
'default' => 'off',
|
||||
'default_on_front' => 'off',
|
||||
),
|
||||
/*
|
||||
'title' => array(
|
||||
'label' => esc_html__( 'Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Text entered here will appear as title.', 'dsm-supreme-modules-for-divi' ),
|
||||
//'default' => 'Your Title Goes Here',
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'subtitle' => array(
|
||||
'label' => esc_html__( 'Sub Title', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Text entered here will appear as subtitle.', 'dsm-supreme-modules-for-divi' ),
|
||||
//'default' => 'Sub Title',
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
|
||||
'content' => array(
|
||||
'label' => esc_html__( 'Content', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'tiny_mce',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'Content entered here will appear inside the module.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
*/
|
||||
);
|
||||
}
|
||||
|
||||
public function get_transition_fields_css_props() {
|
||||
$fields = parent::get_transition_fields_css_props();
|
||||
return $fields;
|
||||
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$multi_view = et_pb_multi_view_options( $this );
|
||||
|
||||
$shapes_type = $this->props['shapes_type'];
|
||||
|
||||
$shapes_square_size = $this->props['shapes_square_size'];
|
||||
$shapes_square_size_values = et_pb_responsive_options()->get_property_values( $this->props, 'shapes_square_size' );
|
||||
$shapes_square_size_tablet = isset( $shapes_square_size_values['tablet'] ) ? $shapes_square_size_values['tablet'] : '';
|
||||
$shapes_square_size_phone = isset( $shapes_square_size_values['phone'] ) ? $shapes_square_size_values['phone'] : '';
|
||||
|
||||
$shape_color = $this->props['shape_color'];
|
||||
$shape_color_values = et_pb_responsive_options()->get_property_values( $this->props, 'shape_color' );
|
||||
$shape_color_tablet = isset( $shape_color_values['tablet'] ) ? $shape_color_values['tablet'] : '';
|
||||
$shape_color_phone = isset( $shape_color_values['phone'] ) ? $shape_color_values['phone'] : '';
|
||||
|
||||
$use_shape_border = $this->props['use_shape_border'];
|
||||
|
||||
$shape_selector = "{$this->main_css_element} .dsm_shapes_wrapper";
|
||||
|
||||
$video_background = $this->video_background();
|
||||
$parallax_image_background = $this->get_parallax_image_background();
|
||||
|
||||
//size
|
||||
$shapes_square_size_parent_style = sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size ) );
|
||||
$shapes_square_size_parent_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ) ) : '';
|
||||
$shapes_square_size_parent_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ) ) : '';
|
||||
|
||||
$shapes_square_size_style = sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size ) );
|
||||
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ) ) : '';
|
||||
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %1$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ) ) : '';
|
||||
|
||||
if ( $shapes_type === 'square' ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} elseif ( $shapes_type === 'circle' ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} elseif ( $shapes_type === 'rectangle' ) {
|
||||
$shapes_square_size_style = sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 2 ) );
|
||||
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 2 ) ) : '';
|
||||
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 2 ) ) : '';
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} elseif ( $shapes_type === 'triangle' ) {
|
||||
$shapes_square_size_style = sprintf( 'width: 0; height: 0; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom-width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 2 ) );
|
||||
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'width: 0; height: 0; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom-width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 2 ) ) : '';
|
||||
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'width: 0; height: 0; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom-width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 2 ) ) : '';
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_parent_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_parent_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_parent_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} elseif ( $shapes_type === 'oval' ) {
|
||||
$shapes_square_size_style = sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 2 ) );
|
||||
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 2 ) ) : '';
|
||||
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 2 ) ) : '';
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} elseif ( $shapes_type === 'trapezoid' ) {
|
||||
$shapes_square_size_style = sprintf( 'width: %1$spx; height: 0px; border-bottom-width: %3$spx; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 5 ), ( esc_html( $shapes_square_size ) / 5 ) * 2 );
|
||||
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'width: %1$spx; height: 0px; border-bottom-width: %3$spx; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 5 ), ( esc_html( $shapes_square_size_tablet ) / 5 ) * 2 ) : '';
|
||||
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'width: %1$spx; height: 0px; border-bottom-width: %3$spx; border-left: %2$spx solid transparent; border-right: %2$spx solid transparent;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 5 ), ( esc_html( $shapes_square_size_phone ) / 5 ) * 2 ) : '';
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
$shapes_square_size_parent_style = sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 5 ) * 2 );
|
||||
$shapes_square_size_parent_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 5 ) * 2 ) : '';
|
||||
$shapes_square_size_parent_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 5 ) * 2 ) : '';
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_parent_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_parent_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_parent_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} elseif ( $shapes_type === 'parallelogram' ) {
|
||||
$shapes_square_size_style = sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 2 ) );
|
||||
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 2 ) ) : '';
|
||||
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 2 ) ) : '';
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} elseif ( $shapes_type === 'diamond_square' ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} elseif ( $shapes_type === 'hexagon' ) {
|
||||
$shapes_square_size_style = sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size ), ( esc_html( $shapes_square_size ) / 1.77 ) );
|
||||
$shapes_square_size_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_tablet ), ( esc_html( $shapes_square_size_tablet ) / 1.77 ) ) : '';
|
||||
$shapes_square_size_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'height: %2$spx; width: %1$spx;', esc_html( $shapes_square_size_phone ), ( esc_html( $shapes_square_size_phone ) / 1.77 ) ) : '';
|
||||
|
||||
$shapes_square_size_before_style = sprintf( 'border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom: %3$spx solid %1$s', esc_attr( $shape_color ), ( esc_html( $shapes_square_size ) / 2 ), ( esc_html( $shapes_square_size ) / 4 ) );
|
||||
$shapes_square_size_before_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom: %3$spx solid %1$s', esc_attr( $shape_color ), ( esc_html( $shapes_square_size_tablet ) / 2 ), ( esc_html( $shapes_square_size_tablet ) / 4 ) ) : '';
|
||||
$shapes_square_size_before_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-bottom: %3$spx solid %1$s', esc_attr( $shape_color ), ( esc_html( $shapes_square_size_phone ) / 2 ), ( esc_html( $shapes_square_size_phone ) / 4 ) ) : '';
|
||||
|
||||
$shapes_square_size_after_style = sprintf( 'border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-top: %3$spx solid %1$s', esc_attr( $shape_color ), ( esc_html( $shapes_square_size ) / 2 ), ( esc_html( $shapes_square_size ) / 4 ) );
|
||||
$shapes_square_size_after_tablet_style = '' !== $shapes_square_size_tablet ? sprintf( 'border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-top: %3$spx solid %1$s', esc_attr( $shape_color ), ( esc_html( $shapes_square_size_tablet ) / 2 ), ( esc_html( $shapes_square_size_tablet ) / 4 ) ) : '';
|
||||
$shapes_square_size_after_phone_style = '' !== $shapes_square_size_phone ? sprintf( 'border-left: %2$spx solid transparent; border-right: %2$spx solid transparent; border-top: %3$spx solid %1$s', esc_attr( $shape_color ), ( esc_html( $shapes_square_size_phone ) / 2 ), ( esc_html( $shapes_square_size_phone ) / 4 ) ) : '';
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => sprintf( 'margin: %1$spx 0;', ( esc_html( $shapes_square_size ) / 4 ) ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => sprintf( 'margin: %1$spx 0;', ( (int) esc_html( $shapes_square_size_tablet ) / 4 ) ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => sprintf( 'margin: %1$spx 0;', ( (int) esc_html( $shapes_square_size_phone ) / 4 ) ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
//before
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_shapes_wrapper:before',
|
||||
'declaration' => $shapes_square_size_before_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_shapes_wrapper:before',
|
||||
'declaration' => $shapes_square_size_before_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_shapes_wrapper:before',
|
||||
'declaration' => $shapes_square_size_before_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
//after
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_shapes_wrapper:after',
|
||||
'declaration' => $shapes_square_size_after_style,
|
||||
)
|
||||
);
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_shapes_wrapper:after',
|
||||
'declaration' => $shapes_square_size_after_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm_shapes_wrapper:after',
|
||||
'declaration' => $shapes_square_size_after_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
} else {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shapes_square_size_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
//color
|
||||
$shape_color_style = '';
|
||||
$shape_color_tablet_style = '';
|
||||
$shape_color_phone_style = '';
|
||||
|
||||
if ( $shapes_type === 'square' ) {
|
||||
$shape_color_style = sprintf( 'background-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} elseif ( $shapes_type === 'circle' ) {
|
||||
$shape_color_style = sprintf( 'background-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} elseif ( $shapes_type === 'rectangle' ) {
|
||||
$shape_color_style = sprintf( 'background-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} elseif ( $shapes_type === 'triangle' ) {
|
||||
$shape_color_style = sprintf( 'border-bottom-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'border-bottom-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'border-bottom-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} elseif ( $shapes_type === 'oval' ) {
|
||||
$shape_color_style = sprintf( 'background-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} elseif ( $shapes_type === 'trapezoid' ) {
|
||||
$shape_color_style = sprintf( 'border-bottom-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'border-bottom-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'border-bottom-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} elseif ( $shapes_type === 'parallelogram' ) {
|
||||
$shape_color_style = sprintf( 'background-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} elseif ( $shapes_type === 'diamond_square' ) {
|
||||
$shape_color_style = sprintf( 'background-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} elseif ( $shapes_type === 'hexagon' ) {
|
||||
$shape_color_style = sprintf( 'background-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
} else {
|
||||
$shape_color_style = sprintf( 'background-color: %1$s;', esc_attr( $shape_color ) );
|
||||
$shape_color_tablet_style = '' !== $shape_color_tablet ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_tablet ) ) : '';
|
||||
$shape_color_phone_style = '' !== $shape_color_phone ? sprintf( 'background-color: %1$s;', esc_attr( $shape_color_phone ) ) : '';
|
||||
}
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shape_color_style,
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shape_color_tablet_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => $shape_selector,
|
||||
'declaration' => $shape_color_phone_style,
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
|
||||
// Remove automatically added classnames
|
||||
$this->remove_classname(
|
||||
array(
|
||||
'et_pb_module',
|
||||
)
|
||||
);
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'%1$s
|
||||
%2$s
|
||||
<div class="dsm_shapes_wrapper dsm_shapes_%3$s">
|
||||
</div>',
|
||||
$video_background,
|
||||
$parallax_image_background,
|
||||
esc_attr( $shapes_type )
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
public function apply_custom_margin_padding( $function_name, $slug, $type, $class, $important = false ) {
|
||||
$slug_value = $this->props[ $slug ];
|
||||
$slug_value_tablet = $this->props[ $slug . '_tablet' ];
|
||||
$slug_value_phone = $this->props[ $slug . '_phone' ];
|
||||
$slug_value_last_edited = $this->props[ $slug . '_last_edited' ];
|
||||
$slug_value_responsive_active = et_pb_get_responsive_status( $slug_value_last_edited );
|
||||
|
||||
if ( isset( $slug_value ) && ! empty( $slug_value ) ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value, $type, $important ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $slug_value_tablet ) && ! empty( $slug_value_tablet ) && $slug_value_responsive_active ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value_tablet, $type, $important ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_980' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( isset( $slug_value_phone ) && ! empty( $slug_value_phone ) && $slug_value_responsive_active ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $class,
|
||||
'declaration' => et_builder_get_element_style_css( $slug_value_phone, $type, $important ),
|
||||
'media_query' => ET_Builder_Element::get_media_query( 'max_width_767' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
if ( et_builder_is_hover_enabled( $slug, $this->props ) ) {
|
||||
if ( isset( $this->props[ $slug . '__hover' ] ) ) {
|
||||
$hover = $this->props[ $slug . '__hover' ];
|
||||
ET_Builder_Element::set_style(
|
||||
$function_name,
|
||||
array(
|
||||
'selector' => $this->add_hover_to_order_class( $class ),
|
||||
'declaration' => et_builder_get_element_style_css( $hover, $type, $important ),
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Shapes;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><g fill="#03dac6"><path d="m8.68 20.28c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62c-.01-.35-.29-.62-.62-.62z"/><path d="m18.52 7.79c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m9.37 15.8c-1.94 0-3.52-1.58-3.52-3.52s1.58-3.52 3.52-3.52 3.52 1.58 3.52 3.52-1.58 3.52-3.52 3.52zm0-6.26c-1.52 0-2.75 1.23-2.75 2.75s1.23 2.75 2.75 2.75 2.75-1.23 2.75-2.75-1.24-2.75-2.75-2.75z"/></g><path d="m20.47 15.92h-3.91c-.92 0-1.67-.75-1.67-1.67v-3.91c0-.92.75-1.67 1.67-1.67h3.91c.92 0 1.67.75 1.67 1.67v3.91c.01.92-.74 1.67-1.67 1.67zm-3.9-6.49c-.5 0-.91.41-.91.91v3.91c0 .5.41.91.91.91h3.91c.5 0 .91-.41.91-.91v-3.91c0-.5-.41-.91-.91-.91z" fill="#fff"/><path d="m17.71 22.98h-7.41c-.25 0-.48-.14-.6-.36s-.11-.49.04-.7l3.71-5.52c.13-.19.34-.3.57-.3s.44.11.57.3l3.71 5.52c.14.21.16.48.04.7-.15.22-.38.36-.63.36zm-7.26-.77h7.11l-3.56-5.29z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,339 @@
|
||||
<?php
|
||||
|
||||
class DSM_Text_Divider extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_text_divider';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Text Divider', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
$this->main_css_element = '%%order_class%%.dsm_text_divider';
|
||||
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'visibility' => esc_html__( 'Visibility', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'color' => esc_html__( 'Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'styles' => esc_html__( 'Styles', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
$style_option_name = sprintf( '%1$s-divider_style', $this->slug );
|
||||
$global_divider_style = ET_Global_Settings::get_value( $style_option_name );
|
||||
|
||||
$this->defaults = array(
|
||||
'divider_style' => $global_divider_style && '' !== $global_divider_style ? $global_divider_style : 'solid',
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Divider', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element} .dsm-text-divider-header, {$this->main_css_element} .dsm-text-divider-header a",
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '22px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h3',
|
||||
),
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => false,
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'important' => array( 'custom_margin' ), // needed to overwrite last module margin-bottom styling
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_background_layout' => true,
|
||||
'use_text_orientation' => false,
|
||||
'css' => array(
|
||||
'text_shadow' => "{$this->main_css_element}",
|
||||
),
|
||||
'options' => array(
|
||||
'background_layout' => array(
|
||||
'default_on_front' => 'light',
|
||||
),
|
||||
),
|
||||
),
|
||||
'button' => false,
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Divider Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'The text of divider will appear in between the divider.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'main_content',
|
||||
'default_on_front' => 'Divider Text',
|
||||
),
|
||||
'text_alignment' => array(
|
||||
'label' => esc_html__( 'Text Alignment', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'left' => esc_html__( 'Left', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Center', 'dsm-supreme-modules-for-divi' ),
|
||||
'right' => esc_html__( 'Right', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'text',
|
||||
'default' => 'center',
|
||||
),
|
||||
'color' => array(
|
||||
'default' => et_builder_accent_color(),
|
||||
'label' => esc_html__( 'Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'tab_slug' => 'advanced',
|
||||
'description' => esc_html__( 'This will adjust the color of the 1px divider line.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'color',
|
||||
),
|
||||
'divider_style' => array(
|
||||
'label' => esc_html__( 'Divider Style', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => et_builder_get_border_styles(),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'styles',
|
||||
'default' => $this->defaults['divider_style'],
|
||||
),
|
||||
'divider_position' => array(
|
||||
'label' => esc_html__( 'Divider Position', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'select',
|
||||
'option_category' => 'layout',
|
||||
'options' => array(
|
||||
'flex-start' => esc_html__( 'Top', 'dsm-supreme-modules-for-divi' ),
|
||||
'center' => esc_html__( 'Vertically Centered', 'dsm-supreme-modules-for-divi' ),
|
||||
'flex-end' => esc_html__( 'Bottom', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'styles',
|
||||
'default' => 'center',
|
||||
),
|
||||
'divider_weight' => array(
|
||||
'label' => esc_html__( 'Divider Weight', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'default_unit' => 'px',
|
||||
'default' => '1px',
|
||||
),
|
||||
'text_gap' => array(
|
||||
'label' => esc_html__( 'Text Gap', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'depends_show_if' => 'on',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'default_unit' => 'px',
|
||||
'default' => '10px',
|
||||
),
|
||||
'height' => array(
|
||||
'label' => esc_html__( 'Height', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'layout',
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'width',
|
||||
'description' => esc_html__( 'Define how much space should be added below the divider.', 'dsm-supreme-modules-for-divi' ),
|
||||
'default' => '23px',
|
||||
'default_unit' => 'px',
|
||||
'default_on_front' => '23px',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_alignment() {
|
||||
$alignment = isset( $this->props['align'] ) ? $this->props['align'] : '';
|
||||
|
||||
return et_pb_get_alignment( $alignment );
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$multi_view = et_pb_multi_view_options( $this );
|
||||
$header = $this->props['header'];
|
||||
$text_alignment = $this->props['text_alignment'];
|
||||
$color = $this->props['color'];
|
||||
$height = $this->props['height'];
|
||||
$divider_style = $this->props['divider_style'];
|
||||
$divider_position = $this->props['divider_position'];
|
||||
$divider_weight = $this->props['divider_weight'];
|
||||
$text_gap = $this->props['text_gap'];
|
||||
$header_level = $this->props['header_level'];
|
||||
$background_layout = $this->props['background_layout'];
|
||||
|
||||
$video_background = $this->video_background();
|
||||
$parallax_image_background = $this->get_parallax_image_background();
|
||||
|
||||
// Module classnames
|
||||
$header = $multi_view->render_element(
|
||||
array(
|
||||
'content' => '{{header}}',
|
||||
)
|
||||
);
|
||||
|
||||
if ( '' !== $header ) {
|
||||
$header = sprintf(
|
||||
'<%1$s class="dsm-text-divider-header et_pb_module_header">%2$s</%1$s>',
|
||||
et_pb_process_header_level( $header_level, 'h3' ),
|
||||
et_core_esc_previously( $header )
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-divider',
|
||||
'declaration' => sprintf(
|
||||
'border-top-color: %1$s;',
|
||||
esc_html( $color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $divider_style ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-divider',
|
||||
'declaration' => sprintf(
|
||||
'border-top-style: %1$s;',
|
||||
esc_attr( $divider_style )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $divider_weight ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-divider',
|
||||
'declaration' => sprintf(
|
||||
'border-top-width: %1$s;',
|
||||
esc_attr( $divider_weight )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '10px' !== $text_gap ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-text-divider-header',
|
||||
'declaration' => sprintf(
|
||||
'margin: 0 %1$s;',
|
||||
esc_attr( $text_gap )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'left' === $text_alignment ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-text-divider-header',
|
||||
'declaration' => sprintf(
|
||||
'margin: 0 %1$s 0 0;',
|
||||
esc_attr( $text_gap )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'right' === $text_alignment ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-text-divider-header',
|
||||
'declaration' => sprintf(
|
||||
'margin: 0 0 0 %1$s;',
|
||||
esc_attr( $text_gap )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( 'center' !== $divider_position ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-text-divider-wrapper',
|
||||
'declaration' => sprintf(
|
||||
'align-items: %1$s;',
|
||||
esc_attr( $divider_position )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $height ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-text-divider-wrapper',
|
||||
'declaration' => sprintf(
|
||||
'height: %1$s;',
|
||||
esc_attr( et_builder_process_range_value( $height ) )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$class = "dsm-text-divider-wrapper dsm-text-divider-align-{$text_alignment} et_pb_bg_layout_{$background_layout}";
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'<div%3$s class="%2$s">
|
||||
%5$s
|
||||
%4$s
|
||||
<div class="dsm-text-divider-before dsm-divider"></div>
|
||||
%1$s
|
||||
<div class="dsm-text-divider-after dsm-divider"></div>
|
||||
</div>',
|
||||
$header,
|
||||
esc_attr( $class ),
|
||||
$this->module_id(),
|
||||
$video_background,
|
||||
$parallax_image_background
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_Text_Divider;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m21.74 7.84c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-1.99c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m4.26 21.93c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38c.01.76-.61 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z" fill="#03dac6"/><path d="m23.08 25.15h-14.22c-1.13 0-2.04-.92-2.04-2.04v-18.21c0-1.13.92-2.04 2.04-2.04h14.22c1.13 0 2.04.92 2.04 2.04v18.2c0 1.13-.92 2.05-2.04 2.05zm-14.22-21.53c-.7 0-1.27.57-1.27 1.27v18.21c0 .7.57 1.27 1.27 1.27h14.22c.7 0 1.27-.57 1.27-1.27v-18.2c0-.7-.57-1.27-1.27-1.27h-14.22z" fill="#fff"/><path d="m9.53 10.01h12.87v.77h-12.87z" fill="#fff"/><path d="m9.53 16.8h12.87v.51h-12.87z" fill="#03dac6"/><g fill="#fff"><path d="m9.53 13.34h.64v.77h-.64z"/><path d="m20.48 14.11h-1.29v-.77h1.29zm-2.58 0h-1.29v-.77h1.29zm-2.57 0h-1.29v-.77h1.29zm-2.58 0h-1.29v-.77h1.29z"/><path d="m21.77 13.34h.64v.77h-.64z"/><path d="m9.53 18.35h12.87v.51h-12.87z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,230 @@
|
||||
<?php
|
||||
|
||||
class DSM_TypingEffect extends ET_Builder_Module {
|
||||
|
||||
public $slug = 'dsm_typing_effect';
|
||||
public $vb_support = 'on';
|
||||
|
||||
protected $module_credits = array(
|
||||
'module_uri' => 'https://divisupreme.com/',
|
||||
'author' => 'Divi Supreme',
|
||||
'author_uri' => 'https://divisupreme.com/',
|
||||
);
|
||||
|
||||
|
||||
public function init() {
|
||||
$this->name = esc_html__( 'Supreme Typing', 'dsm-supreme-modules-for-divi' );
|
||||
$this->icon_path = plugin_dir_path( __FILE__ ) . 'icon.svg';
|
||||
// Toggle settings
|
||||
$this->settings_modal_toggles = array(
|
||||
'general' => array(
|
||||
'toggles' => array(
|
||||
'main_content' => esc_html__( 'Text', 'dsm-supreme-modules-for-divi' ),
|
||||
'typing_option' => esc_html__( 'Typing Options', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
),
|
||||
'advanced' => array(
|
||||
'toggles' => array(
|
||||
'typing_styles' => array(
|
||||
'title' => esc_html__( 'Typing Styles', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'priority' => 56,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_advanced_fields_config() {
|
||||
return array(
|
||||
'fonts' => array(
|
||||
'header' => array(
|
||||
'label' => esc_html__( 'Main', 'dsm-supreme-modules-for-divi' ),
|
||||
'css' => array(
|
||||
'main' => '%%order_class%% h1.et_pb_module_header, %%order_class%% h2.et_pb_module_header, %%order_class%% h3.et_pb_module_header, %%order_class%% h4.et_pb_module_header, %%order_class%% h5.et_pb_module_header, %%order_class%% h6.et_pb_module_header',
|
||||
'text_align' => '%%order_class%%',
|
||||
),
|
||||
'font_size' => array(
|
||||
'default' => '30px',
|
||||
),
|
||||
'line_height' => array(
|
||||
'default' => '1em',
|
||||
),
|
||||
'letter_spacing' => array(
|
||||
'default' => '0px',
|
||||
),
|
||||
'header_level' => array(
|
||||
'default' => 'h1',
|
||||
),
|
||||
),
|
||||
),
|
||||
'text' => array(
|
||||
'use_text_orientation' => false,
|
||||
'use_background_layout' => true,
|
||||
'css' => array(
|
||||
'text_shadow' => '%%order_class%%',
|
||||
),
|
||||
'options' => array(
|
||||
'background_layout' => array(
|
||||
'default' => 'light',
|
||||
),
|
||||
),
|
||||
'toggle_slug' => 'header',
|
||||
),
|
||||
'text_shadow' => array(
|
||||
// Don't add text-shadow fields since they already are via font-options.
|
||||
'default' => false,
|
||||
),
|
||||
'margin_padding' => array(
|
||||
'css' => array(
|
||||
'main' => "{$this->main_css_element}",
|
||||
'important' => 'all',
|
||||
),
|
||||
),
|
||||
'borders' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => array(
|
||||
'border_radii' => '%%order_class%%',
|
||||
'border_styles' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
'box_shadow' => array(
|
||||
'default' => array(
|
||||
'css' => array(
|
||||
'main' => '%%order_class%%',
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function get_fields() {
|
||||
return array(
|
||||
'typing_effect' => array(
|
||||
'label' => esc_html__( 'Typing Effect Text', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'type' => 'text',
|
||||
'option_category' => 'basic_option',
|
||||
'description' => esc_html__( 'The title of your Typing Effect Text. Use "|" as a separator. eg Word One|Text Two|Divi 3', 'dsm-supreme-modules-pro-for-divi' ),
|
||||
'default_on_front' => 'Design Divi sites with|Divi|Supreme',
|
||||
'toggle_slug' => 'main_content',
|
||||
),
|
||||
'typing_loop' => array(
|
||||
'label' => esc_html__( 'Use Loop', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'yes_no_button',
|
||||
'option_category' => 'configuration',
|
||||
'default' => 'on',
|
||||
'default_on_front' => 'on',
|
||||
'options' => array(
|
||||
'off' => esc_html__( 'No', 'dsm-supreme-modules-for-divi' ),
|
||||
'on' => esc_html__( 'Yes', 'dsm-supreme-modules-for-divi' ),
|
||||
),
|
||||
'description' => esc_html__( 'If enabled, typing effect will loop infinite.', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'typing_option',
|
||||
),
|
||||
'typing_speed' => array(
|
||||
'label' => esc_html__( 'Typing Speed (in ms)', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '100ms',
|
||||
'default_on_front' => '100ms',
|
||||
'default_unit' => 'ms',
|
||||
'range_settings' => array(
|
||||
'min' => '10',
|
||||
'max' => '3000',
|
||||
'step' => '1',
|
||||
),
|
||||
'toggle_slug' => 'typing_option',
|
||||
),
|
||||
'typing_backspeed' => array(
|
||||
'label' => esc_html__( 'Typing Backspeed (in ms)', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '50ms',
|
||||
'default_on_front' => '50ms',
|
||||
'default_unit' => 'ms',
|
||||
'range_settings' => array(
|
||||
'min' => '1',
|
||||
'max' => '300',
|
||||
'step' => '1',
|
||||
),
|
||||
'toggle_slug' => 'typing_option',
|
||||
),
|
||||
'typing_backdelay' => array(
|
||||
'label' => esc_html__( 'Back delay (in ms)', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'range',
|
||||
'option_category' => 'configuration',
|
||||
'default' => '700ms',
|
||||
'default_on_front' => '700ms',
|
||||
'range_settings' => array(
|
||||
'min' => '200',
|
||||
'max' => '2000',
|
||||
'step' => '100',
|
||||
),
|
||||
'description' => esc_html__( 'Time before backspacing', 'dsm-supreme-modules-for-divi' ),
|
||||
'toggle_slug' => 'typing_option',
|
||||
),
|
||||
'typing_cursor_color' => array(
|
||||
'label' => esc_html__( 'Cursor Color', 'dsm-supreme-modules-for-divi' ),
|
||||
'type' => 'color-alpha',
|
||||
'custom_color' => true,
|
||||
'tab_slug' => 'advanced',
|
||||
'toggle_slug' => 'typing_styles',
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
public function render( $attrs, $content = null, $render_slug ) {
|
||||
$typing_effect = $this->props['typing_effect'];
|
||||
$typing_loop = $this->props['typing_loop'];
|
||||
$typing_speed = $this->props['typing_speed'];
|
||||
$typing_backspeed = $this->props['typing_backspeed'];
|
||||
$typing_backdelay = $this->props['typing_backdelay'];
|
||||
$typing_cursor_color = $this->props['typing_cursor_color'];
|
||||
$background_layout = $this->props['background_layout'];
|
||||
$header_level = $this->props['header_level'];
|
||||
|
||||
if ( '' !== $typing_effect ) {
|
||||
$typing_effect = sprintf(
|
||||
'<%1$s class="dsm-typing-effect et_pb_module_header"><span class="dsm-typing" data-dsm-typing-strings="%2$s"%3$s%4$s></span></%1$s>',
|
||||
et_pb_process_header_level( $header_level, 'h1' ),
|
||||
htmlspecialchars( $typing_effect, ENT_QUOTES ),
|
||||
esc_attr( " data-dsm-typing-speed={$typing_speed} data-dsm-typing-backspeed={$typing_backspeed} data-dsm-typing-backdelay={$typing_backdelay}" ),
|
||||
( 'off' !== $typing_loop ? esc_attr( ' data-dsm-typing-loop=true' ) : esc_attr( ' data-dsm-typing-loop=false' ) )
|
||||
);
|
||||
}
|
||||
|
||||
if ( '' !== $typing_cursor_color ) {
|
||||
ET_Builder_Element::set_style(
|
||||
$render_slug,
|
||||
array(
|
||||
'selector' => '%%order_class%% .dsm-typing-effect .typed-cursor',
|
||||
'declaration' => sprintf(
|
||||
'color: %1$s;',
|
||||
esc_html( $typing_cursor_color )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
$this->add_classname(
|
||||
array(
|
||||
"et_pb_bg_layout_{$background_layout}",
|
||||
$this->get_text_orientation_classname(),
|
||||
)
|
||||
);
|
||||
|
||||
wp_enqueue_script( 'dsm-typed' );
|
||||
|
||||
// Render module content
|
||||
$output = sprintf(
|
||||
'%1$s',
|
||||
$typing_effect
|
||||
);
|
||||
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
new DSM_TypingEffect;
|
||||
@@ -0,0 +1 @@
|
||||
<svg enable-background="new 0 0 28 28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="m13.25 20.67h-5.83v-.77c.37 0 .65-.1.84-.31.38-.41.32-1.11.32-1.12v-.03-5.51h-1.79c-.57 0-.94.28-1.14.52-.14.16-.37.22-.57.15-.21-.08-.34-.27-.34-.49v-3.64h11.22v3.64c0 .22-.13.41-.34.49s-.43.02-.57-.15c-.21-.24-.57-.52-1.14-.52h-1.79v5.55c0 .01-.05.71.32 1.12.19.21.46.31.84.31v.76zm-4.26-.76h2.7c-.4-.6-.37-1.34-.36-1.47v-6.26h2.56c.55 0 .98.17 1.29.39v-2.33h-9.69v2.33c.32-.22.74-.39 1.29-.39h2.56v6.26c.01.13.04.87-.35 1.47z" fill="#fff"/><g fill="#03dac6"><path d="m6.55 8.01c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m21.89 20.5c-.76 0-1.38-.62-1.38-1.38s.62-1.38 1.38-1.38 1.38.62 1.38 1.38-.62 1.38-1.38 1.38zm0-2c-.34 0-.62.28-.62.62s.28.62.62.62.62-.28.62-.62-.28-.62-.62-.62z"/><path d="m17.26 7.33h.77v15.04h-.77z"/><path d="m13.76 6.95h7.66v.77h-7.66z"/><path d="m13.76 21.99h7.66v.77h-7.66z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
Reference in New Issue
Block a user