start_controls_section( 'kng_reading_progress_bar_section_general', [ 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'), ] ); // bar position - top, bottom $this->add_control( 'kng_reading_progress_bar_position', [ 'label' => esc_html__('Position', 'king-addons'), 'type' => Controls_Manager::SELECT, 'options' => [ 'top' => esc_html__('Top', 'king-addons'), 'bottom' => esc_html__('Bottom', 'king-addons'), ], 'default' => 'top', ] ); // height - desktop, mobile $this->add_responsive_control( 'kng_reading_progress_bar_height', [ 'label' => esc_html__('Height (px)', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'step' => 1, 'min' => 1, 'default' => 5, 'selectors' => [ '{{WRAPPER}} .king-addons-reading-progress-bar-container, {{WRAPPER}} .king-addons-reading-progress-bar' => 'height: {{SIZE}}px;', ], ] ); // background - simple, gradient $this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'kng_reading_progress_bar_bg', 'types' => ['classic', 'gradient', 'image'], 'fields_options' => [ 'color' => [ 'default' => '#574ff7', ], 'background' => [ 'default' => 'classic', ], ], 'selector' => '{{WRAPPER}} .king-addons-reading-progress-bar' ] ); // z-index - 999 $this->add_responsive_control( 'kng_reading_progress_bar_z_index', [ 'label' => esc_html__('Z-Index', 'king-addons'), 'type' => Controls_Manager::NUMBER, 'step' => 1, 'default' => 999, 'selectors' => [ '{{WRAPPER}} .king-addons-reading-progress-bar-container' => 'z-index: {{SIZE}};', ], ] ); $this->end_controls_section(); } protected function render(): void { $settings = $this->get_settings(); $this_ID = $this->get_id(); echo '
'; $js = 'document.addEventListener("scroll", function() { let winScroll = document.body.scrollTop || document.documentElement.scrollTop; let height = document.documentElement.scrollHeight - document.documentElement.clientHeight; let scrolled = (winScroll / height) * 100; document.getElementById("king-addons-reading-progress-bar-' . esc_attr($this_ID) . '").style.width = scrolled + "%"; });'; wp_print_inline_script_tag($js); } }