­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ add_actions(); } public function get_name() { return 'bdt-grid-line'; } public function register_controls($section) { $section->start_controls_section( 'element_pack_grid_line_section', [ 'tab' => Controls_Manager::TAB_SETTINGS, 'label' => BDTEP_CP . esc_html__('Grid Line', 'bdthemes-element-pack'), ] ); $section->add_control( 'ep_grid_line_enable', [ 'label' => esc_html__('Grid Line?', 'bdthemes-element-pack'), 'type' => Controls_Manager::SWITCHER, 'render_type' => 'template', ] ); $section->add_control( 'ep_grid_line_line_color', [ 'label' => esc_html__('Line Color', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'selectors' => [ '{{WRAPPER}}' => '--ep-grid-line-color: {{VALUE}}', ], ] ); $section->add_control( 'ep_grid_line_column_color', [ 'label' => esc_html__('Column Color', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'selectors' => [ '{{WRAPPER}}' => '--ep-grid-line-column-color: {{VALUE}}', ], ] ); $section->add_responsive_control( 'ep_grid_line_columns', [ 'label' => esc_html__('Columns', 'bdthemes-element-pack'), 'type' => Controls_Manager::NUMBER, 'min' => 1, 'max' => 12, 'step' => 1, 'devices' => ['desktop', 'tablet', 'mobile'], 'desktop_default' => 12, 'tablet_default' => 12, 'mobile_default' => 12, 'render_type' => 'none', 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'selectors' => ['{{WRAPPER}}' => '--ep-grid-line-columns: {{VALUE}}'] ] ); $section->add_control( 'ep_grid_line_outline', [ 'label' => esc_html__('Outline', 'bdthemes-element-pack'), 'type' => Controls_Manager::SWITCHER, 'render_type' => 'none', 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'selectors' => ['body::before' => 'outline: var(--ep-grid-line-width, 1px) solid var(--ep-grid-line-color, #eee)'] ] ); $section->add_responsive_control( 'ep_grid_line_max_width', [ 'label' => esc_html__('Max Width', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', '%'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 3800, ], '%' => [ 'min' => 0, 'max' => 100, ], ], 'devices' => ['desktop', 'tablet', 'mobile'], 'render_type' => 'none', 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'selectors' => ['{{WRAPPER}}' => '--ep-grid-line-max-width: {{SIZE}}{{UNIT}}'] ] ); $section->add_responsive_control( 'ep_grid_line_line_width', [ 'label' => esc_html__('Line Width', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'size_units' => ['px', 'em', '%'], 'range' => [ 'px' => [ 'min' => 1, 'max' => 200, ], '%' => [ 'min' => 1, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 1, ], 'render_type' => 'none', 'devices' => ['desktop', 'tablet', 'mobile'], 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'selectors' => ['{{WRAPPER}}' => '--ep-grid-line-width: {{SIZE}}{{UNIT}}'] ] ); $section->add_control( 'ep_grid_line_direction', [ 'label' => esc_html__('Line Direction (deg)', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => -360, 'max' => 360, 'step' => 15, ], ], 'render_type' => 'none', 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'selectors' => [ '{{WRAPPER}}' => '--ep-grid-line-direction: {{SIZE}}deg;', ], ] ); $section->add_control( 'ep_grid_line_z_index', [ 'label' => esc_html__('Z-index', 'bdthemes-element-pack'), 'type' => Controls_Manager::NUMBER, 'min' => 0, 'max' => 9999, 'render_type' => 'none', 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'selectors' => [ '{{WRAPPER}}' => '--ep-grid-line-z-index: {{VALUE}};', ], ] ); // $section->add_control( // 'ep_grid_line_animation', // [ // 'label' => esc_html__('Entrance Animation', 'bdthemes-element-pack'), // 'type' => Controls_Manager::SWITCHER, // 'condition' => [ // 'ep_grid_line_enable' => 'yes' // ], // 'selectors' => [ // 'body:before' => 'animation-name: ep-grid-line-animation-top-to-bottom; animation-duration: 4s;', // ], // ] // ); $section->add_control( 'ep_grid_line_output', [ 'type' => Controls_Manager::HIDDEN, 'default' => '1', 'selectors' => [ 'body' => 'position: relative;', 'body::before' => ' content : ""; position : absolute; top : 0; right : 0; bottom : 0; left : 0; margin-right : auto; margin-left : auto; pointer-events: none; z-index : var(--ep-grid-line-z-index, 0); min-height : 100vh; width : calc(100% - (2 * 0px)); max-width : var(--ep-grid-line-max-width, 100%); background-size : calc(100% + var(--ep-grid-line-width, 1px)) 100%; background-image: repeating-linear-gradient(var(--ep-grid-line-direction, 90deg), var(--ep-grid-line-column-color, transparent), var(--ep-grid-line-column-color, transparent) calc((100% / var(--ep-grid-line-columns, 12)) - var(--ep-grid-line-width, 1px)), var(--ep-grid-line-color, #eee) calc((100% / var(--ep-grid-line-columns, 12)) - var(--ep-grid-line-width, 1px)), var(--ep-grid-line-color, #eee) calc(100% / var(--ep-grid-line-columns, 12)));' ], 'condition' => [ 'ep_grid_line_enable' => 'yes' ] ] ); $section->add_control( 'ep_grid_line_horizontal', [ 'label' => esc_html__('Horizontal Line?', 'bdthemes-element-pack') . BDTEP_PC, 'type' => Controls_Manager::SWITCHER, 'render_type' => 'template', 'condition' => [ 'ep_grid_line_enable' => 'yes' ], 'classes' => BDTEP_IS_PC, ] ); $section->add_control( 'ep_grid_line_horizontal_output', [ 'type' => Controls_Manager::HIDDEN, 'default' => '1', 'selectors' => [ 'body' => 'position: relative;', 'body::after' => ' content : ""; position : absolute; top : 0; right : 0; bottom : 0; left : 0; margin-right : auto; margin-left : auto; pointer-events: none; z-index : var(--ep-grid-line-z-index, 0); min-height : 100vh; width : calc(100% - (2 * 0px)); max-width : var(--ep-grid-line-max-width, 100%); background-size : calc(100% + var(--ep-grid-line-width, 1px)) 100%; background-image: repeating-linear-gradient(0, transparent, transparent calc((100% / var(--ep-grid-line-columns, 12)) - var(--ep-grid-line-width, 1px)), var(--ep-grid-line-color, #eee) calc((100% / var(--ep-grid-line-columns, 12)) - var(--ep-grid-line-width, 1px)), var(--ep-grid-line-color, #eee) calc(100% / var(--ep-grid-line-columns, 12)));' ], 'condition' => [ 'ep_grid_line_enable' => 'yes', 'ep_grid_line_horizontal' => 'yes', ] ] ); $section->end_controls_section(); } protected function add_actions() { add_action('elementor/documents/register_controls', [$this, 'register_controls'], 1, 1); } }