trAvis - MANAGER

Edit File: tp_design_tool.php

<?php 
/*
Widget Name: Design Tool
Description: Design Tool
Author: Theplus
Author URI: https://posimyth.com
*/
namespace TheplusAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;

use TheplusAddons\Theplus_Element_Load;
if (!defined('ABSPATH'))
    exit; // Exit if accessed directly

class ThePlus_Design_Tool extends Widget_Base {
		
	public function get_name() {
		return 'tp-design-tool';
	}

public function get_title() {
        return __('Design Tool', 'theplus');
    }

public function get_icon() {
        return 'fa fa-align-justify theplus_backend_icon';
    }

public function get_categories() {
        return array('plus-creatives');
    }

protected function _register_controls() {		
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Design Tool', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
			'design_tool_opt',
			[
				'label' => esc_html__( 'Design Tool Option', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'grid_stystem',
				'options' => [
					'grid_stystem'  => esc_html__( 'Grid System', 'theplus' ),
				],
			]
		);
		$this->add_control(
			'grid_stystem_opt',
			[
				'label' => esc_html__( 'Grid Stystem', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'gs_default',
				'options' => [
					'gs_default'  => esc_html__( 'Default', 'theplus' ),
					'gs_custom'  => esc_html__( 'Custom', 'theplus' ),
				],
				'condition' => [
					'design_tool_opt' => 'grid_stystem',
				],
			]
		);
		$this->add_control(
			'direction',
			[
				'label' => esc_html__( 'Direction', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'ltr',				
				'options' => [
					'ltr'  => esc_html__( 'Left to Right', 'theplus' ),
					'ttb'  => esc_html__( 'Top to Bottom', 'theplus' ),
				],
				'condition' => [
					'design_tool_opt' => 'grid_stystem',
					'grid_stystem_opt' => 'gs_custom',
				],
				'separator' => 'before',
			]
		);
		$this->add_responsive_control(
			'tp_grid_cont_max_width',
			[
				'label' => esc_html__( 'Maximum Width', 'theplus' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range'      => [
				'px' => [
						'min'  => 0,
						'max'  => 5000,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 1140,
				],
				'separator' => 'before',
				'selectors' => [
					'html.elementor-html,html' => '--tp_grid_cont_max_width: {{SIZE}}{{UNIT}};',				                    
				],
				'condition' => [
					'design_tool_opt' => 'grid_stystem',
					'grid_stystem_opt' => 'gs_custom',
				],
				'render_type' => 'ui',
			]
		);
		$this->add_responsive_control(
			'tp_grid_columns',
			[
				'label' => esc_html__( 'Grid System Columns', 'theplus' ),
				'type'      => Controls_Manager::NUMBER,
				'min'       => 1,
				'max'       => 150,
				'step'      => 1,
				'default'   => 12,
				'separator' => 'before',
				'selectors' => [
					'html.elementor-html,html' => '--tp_grid_columns: {{VALUE}};',
				],	
				'condition' => [
					'design_tool_opt' => 'grid_stystem',
					'grid_stystem_opt' => 'gs_custom',
				],
			]
		);
		$this->add_control(
			'tp_grid_color',
			[
				'label' => esc_html__( 'Grid System Columns Background Color', 'theplus' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgba(128, 114, 252, 0.25)',
				'selectors' => [
					'html.elementor-html,html' => '--tp_grid_color: {{VALUE}};',
				],
				'condition' => [
					'design_tool_opt' => 'grid_stystem',
					'grid_stystem_opt' => 'gs_custom',
				],
			]
		);
		$this->add_responsive_control(
			'tp_grid_alley',
			[
				'label' => esc_html__( 'Alley Space', 'theplus' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', '%' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 200,
						'step' => 1,
					],
					'em' => [
						'min'  => 0,
						'max'  => 20,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 30,
				],
				'separator' => 'before',
				'selectors' => [
					'html.elementor-html,html' => '--tp_grid_alley: {{SIZE}}{{UNIT}};',
					],
				'condition' => [
					'design_tool_opt' => 'grid_stystem',
					'grid_stystem_opt' => 'gs_custom',
				],
				'render_type' => 'ui',
			]
		);		
		$this->add_control(
			'tp_grid_alley_color',
			[
				'label' => esc_html__( 'Alley Background Color', 'theplus' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'transparent',
				'selectors' => [
					'html.elementor-html,html' => '--tp_grid_alley_color: {{VALUE}};',
				],
				'condition' => [
					'design_tool_opt' => 'grid_stystem',
					'grid_stystem_opt' => 'gs_custom',
				],
			]
		);
		$this->add_responsive_control(
			'tp_grid_left_right_offset',
			[
				'label' => esc_html__( 'Offset', 'theplus' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', '%' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 1000,
						'step' => 1,
					],
					'em' => [
						'min'  => 0,
						'max'  => 100,
						'step' => 1,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
						'step' => 0.1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 0,
				],
				'separator' => 'before',
				'selectors' => [
					'html.elementor-html,html' => '--tp_grid_left_right_offset: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'design_tool_opt' => 'grid_stystem',
					'grid_stystem_opt' => 'gs_custom',
					'direction' => 'ltr',
				],
				'render_type' => 'ui',
			]
		);
		$this->add_control(
			'tp_grid_front_side',
			[
				'label' => esc_html__( 'Display Grid System on Front', 'theplus' ),
				'type'      => Controls_Manager::SWITCHER,
				'label_on'  => __( 'Show', 'theplus' ),
				'label_off' => __( 'Hide', 'theplus' ),
				'selectors' => [
					'html' => 'content: "";',
				],
				'separator' => 'before',
			]
		);
		$this->end_controls_section();
	}
	
	protected function render() {
	$settings = $this->get_settings_for_display();
	$design_tool_opt=$settings['design_tool_opt'];
	$grid_stystem_opt=$settings['grid_stystem_opt'];
		$design_tool='';
		if(!empty($design_tool_opt) && $design_tool_opt=='grid_stystem'){
			$design_tool .='<style>';
				if(!empty($grid_stystem_opt) && $grid_stystem_opt=='gs_default'){
					$design_tool .=':root{--tp_grid_repeate-columns-width: calc(100% / var(--tp_grid_columns));--tp_grid_column-width: calc((100% / var(--tp_grid_columns)) - var(--tp_grid_alley));--tp_grid_background-width-opt: calc(100% + var(--tp_grid_alley));--tp_grid_background-col-opt: repeating-linear-gradient(to right,var(--tp_grid_color), var(--tp_grid_color) var(--tp_grid_column-width), var(--tp_grid_alley_color) var(--tp_grid_column-width), var(--tp_grid_alley_color) var(--tp_grid_repeate-columns-width));}
					html.elementor-html, html {--tp_grid_cont_max_width: 1140px;--tp_grid_columns: 12;--tp_grid_color: rgba(128, 114, 252, 0.25);--tp_grid_alley: 30px;
					--tp_grid_alley_color: transparent;--tp_grid_left_right_offset:0px;}
					@media (max-width: 1024px){html.elementor-html, html {--tp_grid_columns: 6;--tp_grid_alley:15px;}}
					@media (max-width: 767px){html.elementor-html, html {--tp_grid_columns: 4;--tp_grid_alley:10px;}}
					';
				}else if(!empty($grid_stystem_opt) && $grid_stystem_opt=='gs_custom'){
					$design_tool .=':root {--tp_grid_repeate-columns-width: calc(100% / var(--tp_grid_columns));--tp_grid_column-width: calc((100% / var(--tp_grid_columns)) - var(--tp_grid_alley));--tp_grid_background-width-opt: calc(100% + var(--tp_grid_alley));--tp_grid_background-col-opt: repeating-linear-gradient(';
					$direction ='';
					if(!empty($settings['direction']) && $settings['direction']=='ltr'){
						$direction ='to right,';
					}else if(!empty($settings['direction']) && $settings['direction']=='ttb'){
						$direction ='';
					}
					$design_tool .=$direction . 'var(--tp_grid_color), var(--tp_grid_color) var(--tp_grid_column-width), var(--tp_grid_alley_color) var(--tp_grid_column-width), var(--tp_grid_alley_color) var(--tp_grid_repeate-columns-width) );}';
				}
				if(!empty($settings['tp_grid_front_side']) && $settings['tp_grid_front_side']=='yes'){
					$design_tool .='html.elementor-html::before,html::before {';
				}else{
					$design_tool .='html.elementor-html::before {';
				}
				
				$design_tool .='content: "";position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;margin-right:auto;margin-left:auto;width: calc(100% - (2 * var(--tp_grid_left_right_offset)));max-width: var(--tp_grid_cont_max_width);min-height: 100vh;background-image: var(--tp_grid_background-col-opt);background-size: var(--tp_grid_background-width-opt) 100%;z-index:999;}';
			$design_tool .='</style>';
			
		}
		echo $design_tool;
		
	}
    protected function content_template() {	
    }
}