Beta.2.148.ag

css/src/spbc-settings-media.css

@@ -36,3 +36,12 @@
         display: none;
     }
 }
+@media screen and (max-width: 900px) {
+    .spbc-quicknav--bar_wrapper {
+        position: relative;
+        top: 0;
+    }
+    .spbc-settings-general-wrapper {
+        flex-direction: column-reverse;
+    }
+}

css/src/spbc-settings.css

@@ -1038,3 +1038,66 @@ button#spbc_setting_get_key_auto:disabled {
 	width: 400px;
     height: 150px;
 }
+
+.spbc-settings-general-wrapper {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+}
+
+.spbc-quicknav--bar_wrapper {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: flex-start;
+	height: fit-content;
+	position: sticky;
+	top: 5vh;
+}
+
+.spbc-quicknav--links_wrapper {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	justify-content: center;
+	padding: 3px;
+	border: 1px solid #e5e5e5;
+	margin: 10px;
+}
+
+.spbc-quicknav--link{
+	margin: 3px;
+	width: -webkit-fill-available;
+	width: -moz-available;
+	text-align: left;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+}
+
+#spbc_quicknav--header {
+	color: #026E88;
+	text-align: center;
+	margin: 5px 0;
+}
+
+.spbc_quicknav--save_button {
+	margin: 10px 5px !important;
+	height: 40px;
+}
+
+.spbc_settings--save_button_custom {
+	position: sticky;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+	align-items: baseline;
+	flex-wrap: nowrap;
+	padding: 15px 0;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+

inc/spbc-settings.php

@@ -218,7 +218,7 @@ function spbc_settings__register()
                 'class_prefix' => 'spbc',
                 'ajax'         => true,
                 'js_after'     => 'settings_tab--settings_general.min.js',
-                'after'        => 'submit_button',
+                'after'        => 'spbc_settings_draw_save_button_bottom_block',
                 'sections'     => array(
                     'section_top_banner' => array(
                         'type'   => 'section_banner',
@@ -1310,64 +1310,13 @@ function spbc_settings__draw_elements($elems_to_draw = null, $direct_call = fals
                     echo $elem['html'];
                 }
                 break;
-            // case 'tab_headings':
-                // echo '<div class="spbc_tabs_nav_wrapper">'
-                    //  . $elem['html']
-                    //  . '</div>';
-                // break;
             case 'tab':
                 echo '<div id="spbc_tab-' . $elem_name . '" class="spbc_tab spbc_tab-' . $elem_name . ' ' . (! empty($elem['active']) ? 'spbc_tab--active' : '') . '">';
-
                 if ( ! $elem['ajax'] || ! $direct_call) {
-                    // JS before
-                    if (isset($elem['js_before'])) {
-                        foreach (explode(' ', $elem['js_before']) as $script) {
-                            $src = SPBC_PATH . '/js/spbc-' . $script . '?ver=' . SPBC_VERSION;
-                            $target = 'spbc_tab-' . $elem_name;
-                            echo "<script>
-                                let spbct_js_before = document.createElement('script');
-                                spbct_js_before.setAttribute('src', '$src');
-                                document.getElementById('$target').prepend(spbct_js_before);
-                            </script>"; // JS before tab
-                        }
-                    }
-
-                    // Output
-                    if ( ! empty($elem['callback'])) {
-                        call_user_func($elem['callback']);
+                    if ($elem_name === 'settings_general') {
+                        spbct_settings__the_settings_tab_draw($elem_name, $elem);
                     } else {
-                        spbc_settings__draw_elements($elem['sections'], true);
-                    }
-
-                    // Custom elements on tab
-                    if (isset($elem['after'])) {
-                        if (function_exists($elem['after'])) {
-                            echo '<div style="margin-left: 10px;">';
-                            call_user_func($elem['after']);
-                            echo '</div>';
-                        } else {
-                            echo $elem['after'];
-                        }
-                    }
-
-                    // JS after
-                    if (isset($elem['js_after'])) {
-                        foreach (explode(' ', $elem['js_after']) as $script) {
-                            if ( strpos($script, '.min') === false ) {
-                                $src = SPBC_PATH . '/js/src/spbc-' . $script . '?ver=' . SPBC_VERSION;
-                            } else {
-                                $src = SPBC_PATH . '/js/spbc-' . $script . '?ver=' . SPBC_VERSION;
-                            }
-                            $target = 'spbc_tab-' . $elem_name;
-                            echo "<script>
-                                if (typeof spbct_js_after === 'undefined') {
-                                    let spbct_js_after;
-                                }
-                                spbct_js_after = document.createElement('script')
-                                spbct_js_after.setAttribute('src', '$src');
-                                document.getElementById('$target').append(spbct_js_after);
-                            </script>"; // JS after tab
-                        }
+                        spbc_settings__tab_content_draw($elem_name, $elem);
                     }
                 } else {
                     echo $elem['preloader'];
@@ -1402,6 +1351,143 @@ function spbc_settings__draw_elements($elems_to_draw = null, $direct_call = fals
     }
 }
 
+/**
+ * Draw the content of the settings tab.
+ * @param $elem_name
+ * @param $elem
+ * @return void
+ */
+function spbc_settings__tab_content_draw($elem_name, $elem)
+{
+    // JS before
+    if (isset($elem['js_before'])) {
+        foreach (explode(' ', $elem['js_before']) as $script) {
+            $src = SPBC_PATH . '/js/spbc-' . $script . '?ver=' . SPBC_VERSION;
+            $target = 'spbc_tab-' . $elem_name;
+            echo "<script>
+                                let spbct_js_before = document.createElement('script');
+                                spbct_js_before.setAttribute('src', '$src');
+                                document.getElementById('$target').prepend(spbct_js_before);
+                            </script>"; // JS before tab
+        }
+    }
+
+    // Output
+    if ( ! empty($elem['callback'])) {
+        call_user_func($elem['callback']);
+    } else {
+        spbc_settings__draw_elements($elem['sections'], true);
+    }
+
+    // Custom elements on tab
+    if (isset($elem['after'])) {
+        if (function_exists($elem['after'])) {
+            call_user_func($elem['after']);
+        } else {
+            echo $elem['after'];
+        }
+    }
+
+    // JS after
+    if (isset($elem['js_after'])) {
+        foreach (explode(' ', $elem['js_after']) as $script) {
+            if ( strpos($script, '.min') === false ) {
+                $src = SPBC_PATH . '/js/src/spbc-' . $script . '?ver=' . SPBC_VERSION;
+            } else {
+                $src = SPBC_PATH . '/js/spbc-' . $script . '?ver=' . SPBC_VERSION;
+            }
+            $target = 'spbc_tab-' . $elem_name;
+            echo "<script>
+                                if (typeof spbct_js_after === 'undefined') {
+                                    let spbct_js_after;
+                                }
+                                spbct_js_after = document.createElement('script')
+                                spbct_js_after.setAttribute('src', '$src');
+                                document.getElementById('$target').append(spbct_js_after);
+                            </script>"; // JS after tab
+        }
+    }
+}
+
+/**
+ * Draw the settings tab of the settings itself with quick navigation bar.
+ * @param $elem_name
+ * @param $elem
+ * @return void
+ */
+function spbct_settings__the_settings_tab_draw($elem_name, $elem)
+{
+    // Start output buffering to listen the settings tab echos - we need to do this because spbc_settings__tab_content_draw may call_user_func() with echo.
+    ob_start();
+    spbc_settings__tab_content_draw($elem_name, $elem);
+    $settings_content = ob_get_clean();
+    // End buffer
+
+    $template = '
+    <div id="spbc-settings-general-wrapper" class="spbc-settings-general-wrapper">
+        <div id="spbc-settings-general-wrapper-settings">
+            %s
+        </div>
+        <div id="spbc-quicknav--bar_wrapper" class="spbc-quicknav--bar_wrapper">
+            %s
+        </div>
+    </div>
+    ';
+
+    printf(
+        $template,
+        $settings_content,
+        spbc_settings__get_quick_navbar_html($elem)
+    );
+}
+
+/**
+ * Construct HTML for quick navigation bar for settings tab.
+ * @param array $elem - settings array element
+ * @return string
+ */
+function spbc_settings__get_quick_navbar_html($elem)
+{
+    $nav_link_template = '<a href="#%s" id="spbc-quicknav--link-%s"><span class="spbc_manual_link spbc-quicknav--link"><i class="spbc-icon-left-dir"></i>%s</span></a>';
+    $nav_bar_template = '
+        <div id="spbc-quicknav--links_wrapper" class="spbc-quicknav--links_wrapper">
+        <h4 id="spbc_quicknav--header">%s</h4>
+        %s
+        <input type="submit" name="submit" id="submit" class="spbc_quicknav--save_button button-primary" value="Save Changes">
+        </div>';
+
+    $nav_elements = isset($elem['sections']) && is_array($elem['sections']) ? array_keys($elem['sections']) : array();
+    $nav_links_html = '';
+
+    foreach ($nav_elements as $_index => $nav_element) {
+        //skip banner section from links list
+        if ($nav_element === 'section_top_banner') {
+            continue;
+        }
+        // get title from section or use section name
+        $title = isset($elem['sections'][$nav_element]['title'])
+            ? $elem['sections'][$nav_element]['title']
+            : $nav_element;
+        // get anchor from section or use #
+        $anchor = isset($elem['sections'][$nav_element]['anchor'])
+            ? $elem['sections'][$nav_element]['anchor']
+            : '#';
+        // add a link to navbar
+        $nav_links_html .= sprintf(
+            $nav_link_template,
+            $anchor,
+            $nav_element,
+            $title
+        );
+    }
+
+    return sprintf(
+        $nav_bar_template,
+        __('Settings navigation', 'security-malware-firewall'),
+        $nav_links_html
+    );
+}
+
 /**
  * @param $field
  *
@@ -2350,10 +2436,19 @@ function spbc_field_traffic_control_logs__prepare_data(&$table)
         $time_offset = current_time('timestamp') - time();
 
         foreach ($table->rows as $row) {
+            // obtain IP
             $ip = IP::reduceIPv6($row->ip_entry);
+
+            //construct actions
             $allow_layout = '<a href="#" onclick="return spbcTcAllowIp(\'' . esc_attr($ip) . '\')" class="spbcGreen">' . esc_html__('Allow', 'security-malware-firewall') . '</a>';
             $ban_layout = '<a href="#" onclick="return spbcTcBanIp(\'' . esc_attr($ip) . '\')" class="spbc---red">' . esc_html__('Ban', 'security-malware-firewall') . '</a>';
-            $ip = "<a href='https://cleantalk.org/blacklists/{$row->ip_entry}' target='_blank'>" . esc_html($ip) . '</a>'
+
+            //construct link
+            $uri_link = 'blacklists/' . $row->ip_entry;
+            $ip_link = LinkConstructor::buildCleanTalkLink('settings__firewall_ip_addresses', $uri_link);
+
+            //
+            $ip = "<a href='{$ip_link}' target='_blank'>" . esc_html($ip) . '</a>'
                   . '<br>'
                   . $allow_layout . ' | ' . $ban_layout;
 
@@ -6056,3 +6151,21 @@ function spbc_drop_to_defaults_on_key_clearance(\CleantalkSP\SpbctWP\State $spbc
 
     return $spbc;
 }
+
+/**
+ * Draws custom save button block with navigator backlink button with echo.
+ * @return void *echo
+ */
+function spbc_settings_draw_save_button_bottom_block()
+{
+    $template = '
+        <div name="spbc_settings--save_button_custom" class="spbc_settings--save_button_custom" style="display: none">
+            <input type="submit" class="button button-primary" style="margin: 0 10px;" value="%s">
+            <a href="#spbc-quicknav--bar_wrapper" class="button button-primary" style="margin: 0 10px;">%s</a>
+        </div>';
+    printf(
+        $template,
+        __('Save Changes', 'security-malware-firewall'),
+        __('Back to navigation', 'security-malware-firewall')
+    );
+}