| Current File : /home/gulsvnnd/public_html/wp-content/plugins/ultimate-elementor/modules/how-to/widgets/how-to.php |
<?php
/**
* UAEL HowTo.
*
* @package UAEL
*/
namespace UltimateElementor\Modules\HowTo\Widgets;
// Elementor Classes.
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Repeater;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Image_Size;
use Elementor\Control_Media;
// UltimateElementor Classes.
use UltimateElementor\Base\Common_Widget;
use UltimateElementor\Classes\UAEL_Helper;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}
/**
* Class HowTo.
*/
class HowTo extends Common_Widget {
/**
* Retrieve HowTo Widget name.
*
* @since 1.23.0
* @access public
*
* @return string Widget name.
*/
public function get_name() {
return parent::get_widget_slug( 'HowTo' );
}
/**
* Retrieve HowTo Widget title.
*
* @since 1.23.0
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return parent::get_widget_title( 'HowTo' );
}
/**
* Retrieve HowTo Widget icon.
*
* @since 1.23.0
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return parent::get_widget_icon( 'HowTo' );
}
/**
* Retrieve Widget Keywords.
*
* @since 1.23.0
* @access public
*
* @return string Widget icon.
*/
public function get_keywords() {
return parent::get_widget_keywords( 'HowTo' );
}
/**
* Register HowTo controls.
*
* @since 1.29.2
* @access protected
*/
protected function register_controls() {
// Content Tab.
$this->register_general_controls();
$this->register_total_time_controls();
$this->register_tools_controls();
$this->register_supply_controls();
$this->register_steps_controls();
// Style Tab.
$this->register_box_style_controls();
$this->register_heading_style_controls();
$this->register_desc_style_controls();
$this->register_image_style_controls();
$this->register_time_cost_style_controls();
$this->register_content_style_controls();
$this->register_steps_content_controls();
$this->register_spacing_controls();
$this->register_helpful_information();
}
/**
* Register HowTo General Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_general_controls() {
$this->start_controls_section(
'section_general',
array(
'label' => __( 'General', 'uael' ),
)
);
$this->add_control(
'title',
array(
'label' => __( 'Heading', 'uael' ),
'type' => Controls_Manager::TEXTAREA,
'rows' => '2',
'default' => __( 'How to configure HowTo Schema in UAE?', 'uael' ),
'dynamic' => array(
'active' => true,
),
)
);
$this->add_control(
'description',
array(
'label' => __( 'Description', 'uael' ),
'type' => Controls_Manager::WYSIWYG,
'rows' => '5',
'default' => __( 'So to get started, you will just need to drag-n-drop the How-to Schema widget in the Elementor editor. The How-to Schema widget can be used on pages which contain a How-to in their title and describe steps to achieve certain requirements.', 'uael' ),
'dynamic' => array(
'active' => true,
),
)
);
$this->add_control(
'image',
array(
'label' => __( 'Image', 'uael' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => array(
'active' => true,
),
'default' => array(
'url' => Utils::get_placeholder_image_src(),
),
)
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
array(
'name' => 'image_size',
'default' => 'thumbnail',
)
);
$this->end_controls_section();
}
/**
* Register HowTo time Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_total_time_controls() {
$this->start_controls_section(
'section_total_time',
array(
'label' => __( 'Time & Cost', 'uael' ),
)
);
$this->add_control(
'show_time',
array(
/* translators: 1: <b> 2: <b> */
'label' => sprintf( __( '%1$sShow Total Time%2$s', 'uael' ), '<b>', '</b>' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'default' => 'yes',
'label_block' => false,
)
);
$this->add_control(
'show_time_note',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %s admin link */
'raw' => sprintf( 'Note: The Total Time field is recommended. If disabled this will show warning in the Schema.', 'uael' ),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
'condition' => array(
'show_time!' => 'yes',
),
)
);
$this->add_control(
'time_text',
array(
'label' => __( 'Text', 'uael' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Total Time Needed:', 'uael' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_time' => 'yes',
),
)
);
$this->add_control(
'total_time_heading',
array(
'label' => __( 'Time', 'uael' ),
'type' => Controls_Manager::HEADING,
'description' => __( 'How much time this process will take', 'uael' ),
'separator' => 'before',
)
);
$this->add_control(
'total_time_years',
array(
'label' => __( 'Years', 'uael' ),
'type' => Controls_Manager::NUMBER,
'default' => '',
'units' => array( 'years' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_time' => 'yes',
),
)
);
$this->add_control(
'total_time_months',
array(
'label' => __( 'Months', 'uael' ),
'type' => Controls_Manager::NUMBER,
'default' => '',
'units' => array( 'months' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_time' => 'yes',
),
)
);
$this->add_control(
'total_time_days',
array(
'label' => __( 'Days', 'uael' ),
'type' => Controls_Manager::NUMBER,
'default' => '',
'units' => array( 'days' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_time' => 'yes',
),
)
);
$this->add_control(
'total_time_hours',
array(
'label' => __( 'Hours', 'uael' ),
'type' => Controls_Manager::NUMBER,
'default' => '',
'units' => array( 'hours' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_time' => 'yes',
),
)
);
$this->add_control(
'time_needed',
array(
'label' => __( 'Time ( Minutes )', 'uael' ),
'type' => Controls_Manager::NUMBER,
'default' => __( '30', 'uael' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_time' => 'yes',
),
)
);
$this->add_control(
'show_cost',
array(
/* translators: 1: <b> 2: </b> */
'label' => sprintf( __( '%1$sShow Estimated Cost%2$s', 'uael' ), '<b>', '</b>' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'default' => 'yes',
'label_block' => false,
'separator' => 'before',
)
);
$this->add_control(
'cost_text',
array(
'label' => __( 'Text', 'uael' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Total Cost:', 'uael' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_cost' => 'yes',
),
)
);
$this->add_control(
'estimated_cost',
array(
'label' => __( 'Cost', 'uael' ),
'type' => Controls_Manager::NUMBER,
'default' => __( '69', 'uael' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_cost' => 'yes',
),
)
);
$this->add_control(
'cost_iso_code',
array(
'label' => __( 'Country ISO Code', 'uael' ),
/* translators: %1$s ISO code link */
'description' => sprintf( __( 'Click %1$s here %2$s to find your country\'s ISO code.', 'uael' ), '<a href="https://en.wikipedia.org/wiki/List_of_circulating_currencies" target="_blank" rel="noopener">', '</a>' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'USD', 'uael' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_cost' => 'yes',
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo Tools Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_tools_controls() {
$this->start_controls_section(
'section_tools',
array(
'label' => __( 'Tools', 'uael' ),
)
);
$this->add_control(
'show_tools',
array(
/* translators: 1: <b> 2: </b> */
'label' => sprintf( __( '%1$sAdd Tools%2$s', 'uael' ), '<b>', '</b>' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'default' => 'yes',
'label_block' => false,
)
);
$this->add_control(
'show_tools_note',
array(
'type' => Controls_Manager::RAW_HTML,
'raw' => sprintf( 'Note: The Tools field is recommended. If disabled this will show warning in the Schema.', 'uael' ),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
'condition' => array(
'show_tools!' => 'yes',
),
)
);
$this->add_control(
'tools_text',
array(
'label' => __( 'Title', 'uael' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Required Tools:', 'uael' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_tools' => 'yes',
),
)
);
$repeater = new Repeater();
$repeater->start_controls_tabs( 'tool_repeater' );
$repeater->add_control(
'tool_item_text',
array(
'label' => __( 'Text', 'uael' ),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'dynamic' => array(
'active' => true,
),
)
);
$repeater->end_controls_tab();
$repeater->end_controls_tabs();
$this->add_control(
'tool',
array(
'label' => __( 'Add Required Tools', 'uael' ),
'type' => Controls_Manager::REPEATER,
'show_label' => true,
'fields' => $repeater->get_controls(),
'title_field' => '{{ tool_item_text }}',
'default' => array(
array(
'tool_item_text' => __( '- A Computer.', 'uael' ),
),
array(
'tool_item_text' => __( '- Internet Connection.', 'uael' ),
),
array(
'tool_item_text' => __( '- Google Structured Data Testing Tool.', 'uael' ),
),
),
'condition' => array(
'show_tools' => 'yes',
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo Supply Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_supply_controls() {
$this->start_controls_section(
'section_supply',
array(
'label' => __( 'Materials', 'uael' ),
)
);
$this->add_control(
'show_supply',
array(
/* translators: 1: <b> 2: </b> */
'label' => sprintf( __( '%1$sAdd Materials%2$s', 'uael' ), '<b>', '</b>' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'default' => 'yes',
'label_block' => false,
)
);
$this->add_control(
'show_supply_note',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %s admin link */
'raw' => sprintf( 'Note: The Materials field is recommended. If disabled this will show warning in the Schema.', 'uael' ),
'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
'condition' => array(
'show_supply!' => 'yes',
),
)
);
$this->add_control(
'supply_text',
array(
'label' => __( 'Title', 'uael' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Things Needed?', 'uael' ),
'dynamic' => array(
'active' => true,
),
'condition' => array(
'show_supply' => 'yes',
),
)
);
$repeater = new Repeater();
$repeater->start_controls_tabs( 'supply_repeater' );
$repeater->add_control(
'supply_item_text',
array(
'label' => __( 'Text', 'uael' ),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'dynamic' => array(
'active' => true,
),
)
);
$repeater->end_controls_tab();
$repeater->end_controls_tabs();
$this->add_control(
'supply',
array(
'label' => __( 'Add Required Materials', 'uael' ),
'type' => Controls_Manager::REPEATER,
'show_label' => true,
'fields' => $repeater->get_controls(),
'title_field' => '{{ supply_item_text }}',
'default' => array(
array(
'supply_item_text' => __( '- A WordPress Website.', 'uael' ),
),
array(
'supply_item_text' => __( '- Elementor Plugin.', 'uael' ),
),
array(
'supply_item_text' => __( '- UAE Plugin.', 'uael' ),
),
),
'condition' => array(
'show_supply' => 'yes',
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo Steps Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_steps_controls() {
$this->start_controls_section(
'section_steps',
array(
'label' => __( 'Steps', 'uael' ),
)
);
$this->add_control(
'steps_text',
array(
'label' => __( 'Title', 'uael' ),
'type' => Controls_Manager::TEXT,
'default' => __( 'Steps to configure the How-to Schema widget:', 'uael' ),
'label_block' => true,
'dynamic' => array(
'active' => true,
),
)
);
$repeater = new Repeater();
$repeater->start_controls_tabs( 'steps_repeater' );
$repeater->add_control(
'steps_item_title',
array(
'label' => __( 'Title', 'uael' ),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'dynamic' => array(
'active' => true,
),
)
);
$repeater->add_control(
'steps_item_desc',
array(
'label' => __( 'Description', 'uael' ),
'type' => Controls_Manager::TEXTAREA,
'dynamic' => array(
'active' => true,
),
)
);
$repeater->add_control(
'steps_item_url',
array(
'label' => __( 'Link', 'uael' ),
'type' => Controls_Manager::URL,
'placeholder' => __( 'https://your-link.com', 'uael' ),
'default' => array(
'url' => '',
),
'dynamic' => array(
'active' => true,
),
)
);
$repeater->add_control(
'steps_item_image',
array(
'label' => __( 'Image', 'uael' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => array(
'active' => true,
),
'default' => array(
'url' => Utils::get_placeholder_image_src(),
),
)
);
$repeater->end_controls_tab();
$repeater->end_controls_tabs();
$this->add_control(
'steps',
array(
'label' => __( 'Add Steps', 'uael' ),
'type' => Controls_Manager::REPEATER,
'show_label' => true,
'fields' => $repeater->get_controls(),
'title_field' => '{{ steps_item_title }}',
'default' => array(
array(
'steps_item_title' => __( 'Step 1 : Enter the HowTo Schema title you want', 'uael' ),
'steps_item_desc' => __( 'Enter the title to your HowTo Schema', 'uael' ),
),
array(
'steps_item_title' => __( 'Step 2 : Enter the HowTo Schema description and add a relevant image', 'uael' ),
'steps_item_desc' => __( 'Enter the HowTo Description with a relevant image to your description.', 'uael' ),
),
array(
'steps_item_title' => __( 'Step 3 : Configure the Advanced settings. ie Total Time, Estimated Cost, Materials, Tools', 'uael' ),
'steps_item_desc' => __( 'Enter Total Time, Estimated Cost, Tools & Materials', 'uael' ),
),
array(
'steps_item_title' => __( 'Step 4 : Enter the Steps for your HowTo Schema ', 'uael' ),
'steps_item_desc' => __( 'Steps for your HowTo Schema instructions. It can be a single step (text, document or video) or an ordered list of steps (itemList) of HowTo Step.', 'uael' ),
),
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo Box style Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_box_style_controls() {
$this->start_controls_section(
'section_box_style',
array(
'label' => __( 'Box', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->add_responsive_control(
'overall_align',
array(
'label' => __( 'Overall Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'fa fa-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-wrapper' => 'text-align: {{VALUE}};',
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo spacing Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_spacing_controls() {
$this->start_controls_section(
'section_spacing',
array(
'label' => __( 'Spacing', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->add_responsive_control(
'heading_spacing',
array(
'label' => __( 'Heading bottom spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-title-text' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'default' => array(
'size' => 20,
),
)
);
$this->add_responsive_control(
'desc_spacing',
array(
'label' => __( 'Description bottom spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-description' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'default' => array(
'size' => 20,
),
)
);
$this->add_responsive_control(
'image_spacing',
array(
'label' => __( 'Image bottom spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-image' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'default' => array(
'size' => 20,
),
)
);
$this->add_responsive_control(
'spacing_between_sections',
array(
'label' => __( 'Spacing between sections', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-supply, {{WRAPPER}} .uael-howto-tools, {{WRAPPER}} .uael-howto-details' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'default' => array(
'size' => 20,
),
)
);
$this->add_control(
'section_spacing_common',
array(
'label' => __( 'Tools & Materials', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => 'show_tools',
'operator' => '==',
'value' => 'yes',
),
array(
'name' => 'show_supply',
'operator' => '==',
'value' => 'yes',
),
),
),
)
);
$this->add_responsive_control(
'title_spacing',
array(
'label' => __( 'Section title bottom spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-heading' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'default' => array(
'size' => 15,
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => 'show_tools',
'operator' => '==',
'value' => 'yes',
),
array(
'name' => 'show_supply',
'operator' => '==',
'value' => 'yes',
),
),
),
)
);
$this->add_responsive_control(
'items_spacing',
array(
'label' => __( 'Spacing between items', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 30,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-content .uael-howto-item:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => 'show_tools',
'operator' => '==',
'value' => 'yes',
),
array(
'name' => 'show_supply',
'operator' => '==',
'value' => 'yes',
),
),
),
)
);
$this->add_control(
'section_spacing_steps',
array(
'label' => __( 'Steps', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
)
);
$this->add_responsive_control(
'step_title_spacing',
array(
'label' => __( 'Title bottom spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-steps-text' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'default' => array(
'size' => 15,
),
)
);
$this->add_responsive_control(
'step_content_title_spacing',
array(
'label' => __( 'Step title bottom spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-steps-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'default' => array(
'size' => 10,
),
)
);
$this->add_responsive_control(
'step_items_spacing',
array(
'label' => __( 'Spacing between steps', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 30,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-steps-wrapper .uael-howto-step-item:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};',
),
'default' => array(
'size' => 20,
),
)
);
$this->add_responsive_control(
'steps_image_spacing',
array(
'label' => __( 'Image spacing', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'max' => 50,
),
'em' => array(
'max' => 5,
'step' => 0.1,
),
),
'size_units' => array( 'px', 'em' ),
'selectors' => array(
'{{WRAPPER}}.uael-howto-image-align-bottom .uael-howto-step-image-wrap' => 'margin-top: {{SIZE}}{{UNIT}};',
'{{WRAPPER}}.uael-howto-image-align-left .uael-howto-step-image-wrap,
.rtl {{WRAPPER}}.uael-howto-image-align-right .uael-howto-step-image-wrap' => 'margin-right: {{SIZE}}{{UNIT}};margin-left:0;',
'{{WRAPPER}}.uael-howto-image-align-right .uael-howto-step-image-wrap,
.rtl {{WRAPPER}}.uael-howto-image-align-left .uael-howto-step-image-wrap' => 'margin-left: {{SIZE}}{{UNIT}};margin-right:0;',
),
'default' => array(
'size' => 20,
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo heading style Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_heading_style_controls() {
$this->start_controls_section(
'section_heading_style',
array(
'label' => __( 'Heading', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->add_control(
'heading_tag',
array(
'label' => __( 'Select Tag', 'uael' ),
'type' => Controls_Manager::SELECT,
'options' => array(
'h1' => __( 'H1', 'uael' ),
'h2' => __( 'H2', 'uael' ),
'h3' => __( 'H3', 'uael' ),
'h4' => __( 'H4', 'uael' ),
'h5' => __( 'H5', 'uael' ),
'h6' => __( 'H6', 'uael' ),
'div' => __( 'div', 'uael' ),
'span' => __( 'span', 'uael' ),
'p' => __( 'p', 'uael' ),
),
'default' => 'h3',
)
);
$this->add_control(
'heading_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_PRIMARY,
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-title-text' => 'color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'heading_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
),
'selector' => '{{WRAPPER}} .uael-howto-title-text',
)
);
$this->add_responsive_control(
'heading_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'fa fa-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-wrapper .uael-howto-title' => 'text-align: {{VALUE}};',
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo description style Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_desc_style_controls() {
$this->start_controls_section(
'section_desc_style',
array(
'label' => __( 'Description', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->add_control(
'desc_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-description' => 'color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'desc_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_TEXT,
),
'selector' => '{{WRAPPER}} .uael-howto-description',
)
);
$this->add_responsive_control(
'desc_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'fa fa-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-wrapper .uael-howto-description' => 'text-align: {{VALUE}};',
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo image style Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_image_style_controls() {
$this->start_controls_section(
'section_image_style',
array(
'label' => __( 'Image', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->add_responsive_control(
'image_width',
array(
'label' => __( 'Width', 'uael' ),
'type' => Controls_Manager::SLIDER,
'size_units' => array( 'px', '%' ),
'range' => array(
'px' => array(
'min' => 0,
'max' => 500,
),
'%' => array(
'min' => 0,
'max' => 100,
),
),
'default' => array(
'size' => 30,
'unit' => '%',
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-image img' => 'width: {{SIZE}}{{UNIT}}; min-width:{{SIZE}}{{UNIT}}',
),
)
);
$this->add_control(
'border_radius',
array(
'label' => __( 'Border Radius', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
)
);
$this->add_responsive_control(
'image_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'fa fa-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-image' => 'text-align: {{VALUE}};',
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo Time & Cost style Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_time_cost_style_controls() {
$this->start_controls_section(
'section_time_cost_style',
array(
'label' => __( 'Time & Cost', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => 'show_cost',
'operator' => '==',
'value' => 'yes',
),
array(
'name' => 'show_time',
'operator' => '==',
'value' => 'yes',
),
),
),
)
);
$this->add_control(
'time_cost_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-time-needed, {{WRAPPER}} .uael-howto-estimated-cost' => 'color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'time_cost_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_TEXT,
),
'selector' => '{{WRAPPER}} .uael-howto-time-needed, {{WRAPPER}} .uael-howto-estimated-cost',
)
);
$this->add_responsive_control(
'time_cost_align',
array(
'label' => __( 'Alignment', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'fa fa-align-left',
),
'center' => array(
'title' => __( 'Center', 'uael' ),
'icon' => 'fa fa-align-center',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'fa fa-align-right',
),
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-wrapper .uael-howto-details' => 'text-align: {{VALUE}};',
),
)
);
$this->end_controls_section();
}
/**
* Register HowTo content style Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_content_style_controls() {
$this->start_controls_section(
'common_content_style',
array(
'label' => __( 'Tools & Materials', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
'conditions' => array(
'relation' => 'or',
'terms' => array(
array(
'name' => 'show_tools',
'operator' => '==',
'value' => 'yes',
),
array(
'name' => 'show_supply',
'operator' => '==',
'value' => 'yes',
),
),
),
)
);
$this->add_control(
'inline_supply_tools',
array(
'label' => __( 'Inline Sections', 'uael' ),
'type' => Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'uael' ),
'label_off' => __( 'No', 'uael' ),
'default' => 'true',
'label_block' => false,
)
);
$this->add_control(
'common_title_heading',
array(
'label' => __( 'Title', 'uael' ),
'type' => Controls_Manager::HEADING,
)
);
$this->add_control(
'common_title_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_SECONDARY,
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-heading' => 'color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'common_title_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
),
'selector' => '{{WRAPPER}} .uael-howto-heading',
)
);
$this->add_control(
'common_content_heading',
array(
'label' => __( 'Content', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
)
);
$this->add_control(
'common_content_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-content' => 'color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'common_content_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_TEXT,
),
'selector' => '{{WRAPPER}} .uael-howto-content',
)
);
$this->end_controls_section();
}
/**
* Register HowTo steps content style Controls.
*
* @since 1.23.0
* @access protected
*/
protected function register_steps_content_controls() {
$this->start_controls_section(
'steps_content_style',
array(
'label' => __( 'Steps', 'uael' ),
'tab' => Controls_Manager::TAB_STYLE,
)
);
$this->add_control(
'steps_title_heading',
array(
'label' => __( 'Section Title', 'uael' ),
'type' => Controls_Manager::HEADING,
)
);
$this->add_control(
'steps_title_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_SECONDARY,
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-steps-text' => 'color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'steps_title_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
),
'selector' => '{{WRAPPER}} .uael-howto-steps-text',
)
);
$this->add_control(
'steps_content_title_heading',
array(
'label' => __( 'Step Title', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
)
);
$this->add_control(
'steps_content_title_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_SECONDARY,
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-steps-title, {{WRAPPER}} .uael-howto-steps-title a' => 'color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'steps_content_title_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
),
'selector' => '{{WRAPPER}} .uael-howto-steps-title, {{WRAPPER}} .uael-howto-steps-title a',
)
);
$this->add_control(
'steps_section_content_heading',
array(
'label' => __( 'Step Description', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
)
);
$this->add_control(
'steps_section_content_color',
array(
'label' => __( 'Color', 'uael' ),
'type' => Controls_Manager::COLOR,
'global' => array(
'default' => Global_Colors::COLOR_TEXT,
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-steps-desc' => 'color: {{VALUE}};',
),
)
);
$this->add_group_control(
Group_Control_Typography::get_type(),
array(
'name' => 'steps_section_content_typography',
'global' => array(
'default' => Global_Typography::TYPOGRAPHY_TEXT,
),
'selector' => '{{WRAPPER}} .uael-howto-steps-desc',
)
);
$this->add_control(
'steps_section_image_heading',
array(
'label' => __( 'Step Image', 'uael' ),
'type' => Controls_Manager::HEADING,
'separator' => 'before',
)
);
$this->add_control(
'step_image_position',
array(
'label' => __( 'Image Position', 'uael' ),
'type' => Controls_Manager::CHOOSE,
'default' => 'right',
'options' => array(
'left' => array(
'title' => __( 'Left', 'uael' ),
'icon' => 'eicon-h-align-left',
),
'bottom' => array(
'title' => __( 'Bottom', 'uael' ),
'icon' => 'eicon-v-align-bottom',
),
'right' => array(
'title' => __( 'Right', 'uael' ),
'icon' => 'eicon-h-align-right',
),
),
'prefix_class' => 'uael-howto-image-align-',
'render_type' => 'template',
'toggle' => false,
)
);
$this->add_responsive_control(
'step_image_width',
array(
'label' => __( 'Width', 'uael' ),
'type' => Controls_Manager::SLIDER,
'range' => array(
'px' => array(
'min' => 0,
'max' => 500,
),
'%' => array(
'min' => 0,
'max' => 100,
),
),
'size_units' => array( 'px', '%' ),
'default' => array(
'size' => 30,
'unit' => '%',
),
'selectors' => array(
'{{WRAPPER}} .uael-howto-step-image-wrap' => 'width: {{SIZE}}{{UNIT}}; min-width:{{SIZE}}{{UNIT}}',
),
)
);
$this->add_control(
'step_image_radius',
array(
'label' => __( 'Border Radius', 'uael' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => array( 'px', '%' ),
'selectors' => array(
'{{WRAPPER}} .uael-howto-step-image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
),
)
);
$this->end_controls_section();
}
/**
* Helpful Information.
*
* @since 1.23.0
* @access protected
*/
protected function register_helpful_information() {
$help_link_1 = UAEL_DOMAIN . 'docs/how-to-schema/?utm_source=uael-pro-dashboard&utm_medium=uael-editor-screen&utm_campaign=uael-pro-plugin';
if ( parent::is_internal_links() ) {
$this->start_controls_section(
'section_helpful_info',
array(
'label' => __( 'Helpful Information', 'uael' ),
)
);
$this->add_control(
'help_doc_1',
array(
'type' => Controls_Manager::RAW_HTML,
/* translators: %1$s doc link */
'raw' => sprintf( __( '%1$s Getting started article » %2$s', 'uael' ), '<a href=' . $help_link_1 . ' target="_blank" rel="noopener">', '</a>' ),
'content_classes' => 'uael-editor-doc',
)
);
$this->end_controls_section();
}
}
/**
* Render HowTo output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.23.0
* @access protected
*/
protected function render() {
global $wp_embed;
$settings = $this->get_settings_for_display();
$supply_container = array();
$supply_container_wrap = array();
$tool_container = array();
$tool_container_wrap = array();
$steps_container = array();
$steps_container_wrap = array();
$empty_items_array = array();
$inline_class = '';
if ( isset( $settings['supply'] ) && is_array( $settings['supply'] ) ) {
foreach ( $settings['supply'] as $supply ) {
$supply_container = array(
'@type' => 'HowToSupply',
'name' => $supply['supply_item_text'],
);
array_push( $supply_container_wrap, $supply_container );
}
}
if ( isset( $settings['tool'] ) && is_array( $settings['tool'] ) ) {
foreach ( $settings['tool'] as $tool ) {
$tool_container = array(
'@type' => 'HowToTool',
'name' => $tool['tool_item_text'],
);
array_push( $tool_container_wrap, $tool_container );
}
}
if ( isset( $settings['steps'] ) && is_array( $settings['steps'] ) ) {
foreach ( $settings['steps'] as $step ) {
$steps_container = array(
'@type' => 'HowToStep',
'url' => ! empty( $step['steps_item_url']['url'] ) ? $step['steps_item_url']['url'] : get_permalink(),
'name' => $step['steps_item_title'],
'text' => $step['steps_item_desc'],
'image' => $step['steps_item_image']['url'],
);
array_push( $steps_container_wrap, $steps_container );
}
}
if ( ! empty( $supply_container ) && is_array( $supply_container ) ) {
$supply = wp_json_encode( $supply_container_wrap );
}
if ( ! empty( $tool_container ) && is_array( $tool_container ) ) {
$tool = wp_json_encode( $tool_container_wrap );
}
if ( ! empty( $steps_container_wrap ) && is_array( $steps_container_wrap ) ) {
$steps = wp_json_encode( $steps_container_wrap );
}
$years = ( '' !== $settings['total_time_years'] ) ? $settings['total_time_years'] : '0';
$months = ( '' !== $settings['total_time_months'] ) ? $settings['total_time_months'] : '0';
$days = ( '' !== $settings['total_time_days'] ) ? $settings['total_time_days'] : '0';
$hours = ( '' !== $settings['total_time_hours'] ) ? $settings['total_time_hours'] : '0';
$minutes = ( '' !== $settings['time_needed'] ) ? $settings['time_needed'] : '0';
$total_time = array(
// translators: %s for time duration.
'year' => ! empty( $years ) ? sprintf( _n( '%s year', '%s years', $years, 'uael' ), number_format_i18n( $years ) ) : '',
// translators: %s for time duration.
'month' => ! empty( $months ) ? sprintf( _n( '%s month', '%s months', $months, 'uael' ), number_format_i18n( $months ) ) : '',
// translators: %s for time duration.
'day' => ! empty( $days ) ? sprintf( _n( '%s day', '%s days', $days, 'uael' ), number_format_i18n( $days ) ) : '',
// translators: %s for time duration.
'hour' => ! empty( $hours ) ? sprintf( _n( '%s hour', '%s hours', $hours, 'uael' ), number_format_i18n( $hours ) ) : '',
// translators: %s for time duration.
'minute' => ! empty( $minutes ) ? sprintf( _n( '%s minute', '%s minutes', $minutes, 'uael' ), number_format_i18n( $minutes ) ) : '',
);
foreach ( $total_time as $time_key => $duration ) {
if ( empty( $duration ) ) {
unset( $total_time[ $time_key ] );
}
}
if ( ! empty( $total_time ) ) {
$time = implode( ', ', $total_time );
$time_text = $time;
}
$y = ( 525600 * $years );
$m = ( 43200 * $months );
$d = ( 1440 * $days );
$h = ( 60 * $hours );
$calculate_total_time = $y + $m + $d + $h + $minutes;
$heading_tag = UAEL_Helper::validate_html_tag( $settings['heading_tag'] )
?>
<div class="uael-howto-wrapper">
<div class="uael-howto-title">
<?php echo '<' . esc_attr( $heading_tag ) . ' class="uael-howto-title-text">' . wp_kses_post( $settings['title'] ) . '</' . esc_attr( $heading_tag ) . '>'; ?>
</div>
<div class="uael-howto-description">
<span class="uael-howto-desc-text"><?php echo wp_kses_post( $settings['description'] ); ?></span>
</div>
<?php if ( ! empty( $settings['image']['url'] ) ) { ?>
<div class="uael-howto-image">
<?php echo wp_kses_post( Group_Control_Image_Size::get_attachment_image_html( $settings ) ); ?>
</div>
<?php } ?>
<?php if ( 'yes' === $settings['show_time'] || 'yes' === $settings['show_cost'] ) { ?>
<div class="uael-howto-details">
<?php if ( 'yes' === $settings['show_time'] ) { ?>
<div class="uael-howto-time-needed"><span><span class="uael-howto-time-title"><?php echo wp_kses_post( $settings['time_text'] ) . ' '; ?></span><?php echo esc_html( $time_text ); ?></span></div>
<?php } ?>
<?php if ( 'yes' === $settings['show_cost'] ) { ?>
<div class="uael-howto-estimated-cost">
<span><span class="uael-howto-cost-title"><?php echo wp_kses_post( $settings['cost_text'] ) . ' '; ?></span><?php echo esc_html( $settings['estimated_cost'] ) . ' ' . esc_html( $settings['cost_iso_code'] ); ?></span>
</div>
<?php } ?>
</div>
<?php } ?>
<?php
if ( 'yes' === $settings['inline_supply_tools'] ) {
$inline_class = 'uael-howto-section-inline';
}
?>
<?php if ( 'yes' === $settings['show_tools'] || 'yes' === $settings['show_supply'] ) { ?>
<div class="uael-howto-supply-tools <?php echo esc_attr( $inline_class ); ?>">
<?php if ( 'yes' === $settings['show_tools'] ) { ?>
<div class="uael-howto-tools">
<h4 class="uael-howto-tool-text uael-howto-heading"><?php echo wp_kses_post( $settings['tools_text'] ); ?></h4>
<div class="uael-howto-tool-wrapper uael-howto-content">
<?php foreach ( $settings['tool'] as $index => $item ) { ?>
<div class="uael-howto-tool-item uael-howto-item uael-tool-<?php echo esc_attr( $index ); ?>">
<span><?php echo wp_kses_post( $item['tool_item_text'] ); ?></span>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<?php if ( 'yes' === $settings['show_supply'] ) { ?>
<div class="uael-howto-supply">
<h4 class="uael-howto-supply-text uael-howto-heading"><?php echo wp_kses_post( $settings['supply_text'] ); ?></h4>
<div class="uael-howto-supply-wrapper uael-howto-content">
<?php foreach ( $settings['supply'] as $index => $item ) { ?>
<div class="uael-howto-supply-item uael-howto-item uael-supply-<?php echo esc_attr( $index ); ?>">
<span><?php echo wp_kses_post( $item['supply_item_text'] ); ?></span>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
<?php } ?>
<div class="uael-howto-steps">
<h4 class="uael-howto-steps-text"><?php echo wp_kses_post( $settings['steps_text'] ); ?></h4>
<div class="uael-howto-steps-wrapper">
<?php foreach ( $settings['steps'] as $index => $item ) { ?>
<?php
$is_image = '';
if ( ! empty( $item['steps_item_image']['url'] ) ) {
$is_image = 'uael-step-has-image';
}
?>
<div class="uael-howto-step-item uael-step-<?php echo esc_attr( $index ) . ' ' . esc_attr( $is_image ); ?>">
<div class="uael-howto-step-item-wrap">
<div class="uael-howto-steps-title">
<?php
if ( ! empty( $item['steps_item_url']['url'] ) ) {
$title = $item['steps_item_title'];
$this->add_link_attributes( 'step_url_' . $index, $item['steps_item_url'] );
$title = sprintf( '<a %1$s>%2$s</a>', $this->get_render_attribute_string( 'step_url_' . $index ), $title );
echo $title; //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
} else {
?>
<span><?php echo wp_kses_post( $item['steps_item_title'] ); ?></span>
<?php } ?>
</div>
<div class="uael-howto-steps-desc"><span><?php echo wp_kses_post( $item['steps_item_desc'] ); ?></span></div>
</div>
<?php if ( ! empty( $item['steps_item_image']['url'] ) ) { ?>
<div class="uael-howto-step-image-wrap">
<img class="uael-howto-step-image" src="<?php echo esc_url( $item['steps_item_image']['url'] ); ?>" alt="<?php echo esc_attr( Control_Media::get_image_alt( $item['steps_item_image'] ) ); ?>" title="<?php echo esc_attr( Control_Media::get_image_title( $item['steps_item_image'] ) ); ?>" />
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<?php // @codingStandardsIgnoreStart. ?>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "HowTo",
"name": "<?php echo ! empty( $settings['title'] ) ? $settings['title'] : ''; ?>",
"description": "<?php echo ! empty( $settings['description'] ) ? esc_html( $settings['description'] ) : ''; ?>",
<?php if ( ! empty( $settings['image']['url'] ) ) { ?>
"image": {
"@type": "ImageObject",
"url": "<?php echo ! empty( $settings['image']['url'] ) ? $settings['image']['url'] : ''; ?>",
"height": "406",
"width": "305"
},
<?php } ?>
<?php if ( ! empty( $settings['estimated_cost'] ) && 'yes' === $settings['show_cost'] ) { ?>
"estimatedCost": {
"@type": "MonetaryAmount",
"currency": "<?php echo ! empty( $settings['cost_iso_code'] ) ? $settings['cost_iso_code'] : ''; ?>",
"value": "<?php echo ! empty( $settings['estimated_cost'] ) ? $settings['estimated_cost'] : ''; ?>"
},
<?php } ?>
<?php if ( ! empty( $settings['supply'][0] ) && 'yes' === $settings['show_supply'] ) { ?>
"supply":
<?php
if ( isset( $supply ) && ! empty( $supply ) ) {
echo $supply;
}
?>
,
<?php } ?>
<?php if ( ! empty( $settings['tool'][0] ) && 'yes' === $settings['show_tools'] ) { ?>
"tool":
<?php
if ( isset( $tool ) && ! empty( $tool ) ) {
echo $tool;
}
?>
,
<?php } ?>
<?php if ( ! empty( $settings['steps'][0] ) ) { ?>
"step":
<?php
if ( isset( $steps ) && ! empty( $steps ) ) {
echo $steps;
}
?>
<?php } ?>
<?php if ( ! empty( $calculate_total_time ) && 'yes' === $settings['show_time'] ) { ?>
, "totalTime":
<?php if ( isset( $calculate_total_time ) ) { ?>
"PT<?php echo $calculate_total_time; ?>M"
<?php } ?>
<?php } ?>
}
</script>
<?php // @codingStandardsIgnoreEnd. ?>
</div>
<?php
}
/**
* Render Image HTML.
*
* @param string $settings settings object instance.
* @since 1.23.0
*/
public function render_image( $settings ) {
$image_id = $settings['image']['id'];
$image_size = $settings['image_size_size'];
$class = '';
if ( 'custom' === $image_size ) {
$image_src = Group_Control_Image_Size::get_attachment_image_src( $image_id, 'image_size', $instance );
} else {
$image_src = wp_get_attachment_image_src( $image_id, $image_size );
$image_src = $image_src[0];
}
if ( '' === $image_id ) {
if ( isset( $item['image']['url'] ) ) {
$image_src = $settings['image']['url'];
$class = 'uael-howto-img';
}
}
return sprintf( '<img class="%s" src="%s" alt="%s" />', $class, $image_src, $settings['title'] );
}
/**
* Render HowTo widget output in the editor.
*
* Written as a Backbone JavaScript template and used to generate the live preview.
*
* @since 1.23.0
* @access protected
*/
protected function content_template() {}
}