diff --git a/assets/css/settings.css b/assets/css/settings.css new file mode 100644 index 0000000..8a8714d --- /dev/null +++ b/assets/css/settings.css @@ -0,0 +1,306 @@ +/** + * Anything Shortcodes — Admin Styles + * Provides layout and visuals for the plugin settings page. + * + * Table of Contents: + * 1. Base / Global + * 2. Header + * 3. Tabs + * 4. Sidebar / Card / Links + * 5. Main / Form + * 6. Mobile FAB & Sheet + * 7. Responsive (≤782px) + * + * @since NEXT + */ + +/* ====================================== + 1. Base / Global + ====================================== */ +#wpcontent { padding-left: 0; } + +.anys-settings-grid { + display: grid; + grid-template-columns: 1fr 300px; + gap: 24px; + align-items: start; + margin-top: 20px; + padding-inline: 2rem; +} + +/* ====================================== + 2. Header + ====================================== */ +.anys-page-header { + display: flex; + justify-content: space-between; + align-items: center; + background: #fff; + padding: 1rem 2rem; +} + +.anys-title { + margin: 0; + font-size: 24px; + font-weight: 600; +} + +.anys-pro-cta { + background: #DAFFD9; + border: 1px solid transparent; + color: #1D2327; + font-weight: 500; + padding: 16px; + border-radius: 3px; + text-decoration: none; + font-size: 13px; + transition: all .2s ease; +} + +.anys-pro-cta:hover { + background: #d8f3e3d6; + color: #1D2327; + border-color: #b8e0c3; +} + +/* ====================================== + 3. Tabs + ====================================== */ +.anys-tabs { + padding-inline: 2rem; + padding-top: 0; + background: #fff; + border-block: 1px solid #e5e5e5; +} + +.anys-tabs .anys-tab { + background: transparent; + border: none; + box-shadow: none; + margin-right: 18px; + padding: 10px 0; + color: #7E7E7F; + border-bottom: 3px solid transparent; + transition: border-color .2s ease, color .2s ease; +} + +.anys-tabs .anys-tab:hover { + color: #0a0a0a; + border-bottom-color: #0a0a0a; +} + +.anys-tabs .anys-tab.nav-tab-active { + background: transparent; + border: none; + border-bottom: 3px solid #1d2327; + color: #1d2327; + font-weight: 600; +} + +.anys-tabs .anys-tab:focus { + outline: none; + box-shadow: none; +} + +/* ====================================== + 4. Sidebar / Card / Links + ====================================== */ +.anys-sidebar { + background: #fff; + border: 1px solid #e0e0e0; + border-radius: 6px; + align-self: start; +} + +.anys-card { + border-top: 2px solid #f0f0f0; + padding: 1rem; +} + +.anys-sidebar h3 { + margin: 0; + font-size: 14px; + font-weight: 600; + padding: .8rem 1rem; +} + +.anys-links { list-style: none; margin: 0; padding: 0; } +.anys-links li { margin: 8px 0; } + +.anys-links a { + color: #000; + text-decoration: none; + font-size: 13px; +} + +.anys-links a:hover { font-weight: 600; } +.anys-links a:focus { outline: none; box-shadow: none; } + +/* ====================================== + 5. Main / Form + ====================================== */ +.anys-main { border-radius: 6px; } + +.form-table th { + width: 200px; + padding: 12px 10px; + vertical-align: top; +} + +.form-table td { padding: 12px 10px; } + +.form-table input[type="text"], +.form-table input[type="number"], +.form-table select, +.form-table textarea { + width: 100%; + max-width: 100%; + border: 1px solid #ccc; + border-radius: 3px; + padding: 6px 8px; + font-size: 13px; + background: #fff; + box-sizing: border-box; +} + +.form-table .description { + color: #666; + font-size: 12px; + margin-top: 4px; +} + +input[type="checkbox"], +input[type="radio"] { vertical-align: middle; } + +.anys-field-group { + display: flex; + flex-direction: column; + gap: 16px; + padding: 12px 0; + border-bottom: 1px solid #f1f1f1; +} + +.anys-field-group:last-child { border-bottom: 0; } + +.anys-field-label { + font-weight: 500; + font-size: 13px; + line-height: 16px; + color: #000; +} + +.anys-field-label label { font-weight: 600; } + +.anys-field-control { + flex: 1 1 auto; + min-width: 0; +} + +.anys-field-control .regular-text, +.anys-field-control input[type="text"], +.anys-field-control input[type="number"], +.anys-field-control select, +.anys-field-control textarea { + width: 100%; + max-width: 640px; + box-sizing: border-box; + padding: 2px 8px; +} + +.anys-field-control .description { + color: #666; + font-size: 12px; +} + +/* ====================================== + 6. Mobile FAB & Sheet + ====================================== */ +.anys-fab { + position: fixed; + right: 16px; + bottom: 16px; + width: 56px; + height: 56px; + border-radius: 50%; + border: none; + background: #2271b1; + color: #fff; + box-shadow: 0 6px 16px rgba(0,0,0,.2); + cursor: pointer; + display: none; + z-index: 1000; +} + +.anys-fab span { + font-size: 24px; + line-height: 28px; + margin-top: -2px; +} + +.anys-mobile-sheet[hidden] { display: none; } + +.anys-mobile-sheet { + position: fixed; + inset: 0; + z-index: 999; + display: none; +} + +.anys-mobile-sheet.is-open { display: block; } + +.anys-mobile-sheet__backdrop { + position: absolute; + inset: 0; +} + +.anys-mobile-sheet__content { + position: absolute; + right: 12px; + bottom: 76px; + min-width: 260px; + max-width: 90vw; + background: #fff; + border-radius: 12px; + box-shadow: 0 10px 24px rgba(0,0,0,.25); + padding: 12px 14px 14px; + z-index: 50; +} + +.anys-mobile-sheet__content h3 { margin-top: 0; } + +.anys-mobile-sheet__close { + position: absolute; + top: 8px; + right: 8px; + border: none; + background: transparent; + font-size: 18px; + cursor: pointer; +} + +/* ====================================== + 7. Responsive (≤ 782px) + ====================================== */ +@media (max-width: 782px) { + .anys-settings-grid { grid-template-columns: 1fr; } + .anys-sidebar { display: none; } + .anys-main { order: 2; } + .anys-sidebar { order: 1; } + + .anys-page-header { + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + + .anys-field-group { gap: 8px; } + .anys-field-label { padding-top: 0; } + + #wpcontent { padding-left: 0 !important; } + + .anys-fab { + display: inline-flex; + align-items: center; + justify-content: center; + } +} diff --git a/assets/js/admin-mobile-sidebar.js b/assets/js/admin-mobile-sidebar.js new file mode 100644 index 0000000..7c640b1 --- /dev/null +++ b/assets/js/admin-mobile-sidebar.js @@ -0,0 +1,38 @@ +(function(){ + // Elements + var fab = document.querySelector('.anys-fab'); + var sheet = document.getElementById('anys-mobile-menu'); + var closeBtn = sheet ? sheet.querySelector('.anys-mobile-sheet__close') : null; + var backdrop = sheet ? sheet.querySelector('.anys-mobile-sheet__backdrop') : null; + + if(!fab || !sheet) return; + + // Open/close helpers + function openSheet(){ + sheet.hidden = false; + sheet.classList.add('is-open'); + fab.setAttribute('aria-expanded', 'true'); + // Focus first link for accessibility + var firstLink = sheet.querySelector('a,button,[tabindex]:not([tabindex="-1"])'); + if(firstLink) firstLink.focus(); + } + function closeSheet(){ + sheet.classList.remove('is-open'); + fab.setAttribute('aria-expanded', 'false'); + // Use a microtask so CSS can apply before hiding + setTimeout(function(){ sheet.hidden = true; }, 0); + } + + // Toggle + fab.addEventListener('click', function(){ + var expanded = fab.getAttribute('aria-expanded') === 'true'; + if(expanded) { closeSheet(); } else { openSheet(); } + }); + + // Close handlers + if(closeBtn) closeBtn.addEventListener('click', closeSheet); + if(backdrop) backdrop.addEventListener('click', closeSheet); + document.addEventListener('keydown', function(e){ + if(e.key === 'Escape') closeSheet(); + }); +})(); diff --git a/includes/modules/settings-page/settings-page.php b/includes/modules/settings-page/settings-page.php index 83c0d38..797d9d3 100644 --- a/includes/modules/settings-page/settings-page.php +++ b/includes/modules/settings-page/settings-page.php @@ -1,186 +1,230 @@ %s', - esc_html__( 'Adjust plugin functions.', 'anys' ) - ); - } - - /** - * Renders the Whitelisted Functions textarea field. - * - * @since 1.1.0 - */ - public function whitelisted_functions_callback() { - $options = get_option( 'anys_settings' ); - $whitelisted_functions = isset( $options['anys_whitelisted_functions'] ) && is_array( $options['anys_whitelisted_functions'] ) - ? $options['anys_whitelisted_functions'] - : []; - - // Gets the default whitelisted functions list as an array. - $default_whitelisted_functions = anys_get_default_whitelisted_functions(); - - // Converts array to a comma-separated string for display. - $default_whitelisted_functions_list = implode( ', ', $default_whitelisted_functions ); - ?> - -

- -

- -
-

-
- -
-
- ' . esc_html__( 'Settings', 'anys' ) . ''; - - return $links; - } + use Singleton; + + /** + * Option name for saving settings. + * + * @var string + */ + private $option_name = 'anys'; + + /** + * Slug for the settings page. + * + * @var string + */ + private $page_slug = 'anys-settings'; + + /** + * Supported tabs. + * + * @var array + */ + private $tabs = []; + + /** + * Adds WordPress admin hooks. + * + * @return void + */ + protected function add_hooks() { + add_action( 'admin_menu', [ $this, 'register_menu_page' ] ); + add_action( 'admin_init', [ $this, 'handle_save' ] ); + add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_admin_assets' ] ); + + $this->tabs = [ + 'general' => __( 'General', 'anys' ), + 'integrations' => __( 'Integrations', 'anys' ), + 'functions' => __( 'Functions', 'anys' ), + 'views' => __( 'Views', 'anys' ), + ]; + } + + /** + * Adds the settings page under WP Admin → Settings. + * + * @return void + */ + public function register_menu_page() { + add_options_page( + __( 'Anything Shortcodes', 'anys' ), + __( 'Anything Shortcodes', 'anys' ), + 'manage_options', + $this->page_slug, + [ $this, 'render_page' ] + ); + } + + /** + * Handles saving settings via POST form. + * + * @return void + */ + public function handle_save() { + if ( ! is_admin() || ! current_user_can( 'manage_options' ) ) { + return; + } + + if ( + isset( $_POST['anys'], $_POST['_anys_nonce'] ) && + wp_verify_nonce( sanitize_text_field( wp_unslash( $_POST['_anys_nonce'] ) ), 'anys_save_settings' ) + ) { + $incoming = is_array( $_POST['anys'] ?? null ) ? wp_unslash( $_POST['anys'] ) : []; + $existing = get_option( $this->option_name, [] ); + + if ( ! is_array( $existing ) ) { + $existing = []; + } + + $merged = self::merge_and_sanitize_settings( $existing, $incoming ); + update_option( $this->option_name, $merged ); + + wp_safe_redirect( + add_query_arg( + [ + 'page' => $this->page_slug, + 'tab' => $this->current_tab_slug(), + 'updated' => 'true', + ], + admin_url( 'options-general.php' ) + ) + ); + exit; + } + } + + /** + * Renders the settings page and active tab. + * + * @return void + */ + public function render_page() { + if ( ! current_user_can( 'manage_options' ) ) { + return; + } + + $active_tab = $this->current_tab_slug(); + + echo '
'; + + echo '
'; + echo '

' . esc_html__( 'Anything Shortcodes', 'anys' ) . '

'; + echo '' + . esc_html__( 'Unlock Extra Features with Anything Shortcodes PRO', 'anys' ) . + ''; + echo '
'; + + // Tabs + echo '

'; + foreach ( $this->tabs as $slug => $label ) { + $url = add_query_arg( + [ 'page' => $this->page_slug, 'tab' => 'anys-' . $slug ], + admin_url( 'options-general.php' ) + ); + $active = $slug === $active_tab ? ' nav-tab-active' : ''; + echo '' . esc_html( $label ) . ''; + } + echo '

'; + + $view_file = $this->view_path( $active_tab ); + if ( file_exists( $view_file ) ) { + $options = get_option( $this->option_name, [] ); + $form_nonce = wp_create_nonce( 'anys_save_settings' ); + include $view_file; + } else { + echo '

' . esc_html__( 'The requested settings tab could not be found.', 'anys' ) . '

'; + } + + echo '
'; + } + + /** + * Returns current active tab slug. + * + * @return string + */ + private function current_tab_slug(): string { + $requested = isset( $_GET['tab'] ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : ''; + + if ( $requested && 0 === strpos( $requested, 'anys-' ) ) { + $requested = substr( $requested, 5 ); + } + + return array_key_exists( $requested, $this->tabs ) ? $requested : 'general'; + } + + /** + * Returns the path to the view file of the tab. + * + * @param string $tab Tab slug. + * @return string + */ + private function view_path( string $tab ): string { + return __DIR__ . '/views/' . $tab . '.php'; + } + + /** + * Enqueues admin CSS and JS for settings page. + * + * @param string $hook Current admin page hook. + * @return void + */ + public function enqueue_admin_assets( $hook ) { + if ( 'settings_page_' . $this->page_slug !== $hook ) { + return; + } + + wp_enqueue_style( 'anys-admin-settings', ANYS_CSS_URL . 'settings.css', [], 'NEXT' ); + wp_enqueue_script( 'anys-admin-mobile-sidebar', ANYS_JS_URL . 'admin-mobile-sidebar.js', [], '1.0.0', true ); + } + + /** + * Merges and sanitizes plugin settings recursively. + * + * @param array $existing Existing options. + * @param array $new New submitted options. + * @return array Sanitized merged options. + */ + private static function merge_and_sanitize_settings( array $existing, array $new ): array { + $merged = array_replace_recursive( $existing, $new ); + + if ( isset( $merged['whitelisted_functions'] ) ) { + $list = $merged['whitelisted_functions']; + if ( is_string( $list ) ) { + $list = preg_split( "/\r\n|\r|\n/", $list ); + } + $merged['whitelisted_functions'] = array_values( + array_unique( + array_filter( array_map( 'trim', (array) $list ), 'strlen' ) + ) + ); + } + + array_walk_recursive( + $merged, + function ( &$v ) { + if ( is_string( $v ) ) { + $v = sanitize_text_field( $v ); + } + } + ); + + return $merged; + } } -/** - * Initializes the Settings_Page class. - * - * @since 1.1.0 - */ +// Boot the settings page. Settings_Page::get_instance(); diff --git a/includes/modules/settings-page/views/functions.php b/includes/modules/settings-page/views/functions.php new file mode 100644 index 0000000..ee97426 --- /dev/null +++ b/includes/modules/settings-page/views/functions.php @@ -0,0 +1,51 @@ + +
+
+ +
+ +
+ + +

+ +

+
+
+ +
+
+ +
+
+ +

+ +

+
+
+ +
+
+ +
+
+ +

+ +

+
+
+ +
+
+ +
+
+ +

+ +

+
+
+ +
+
+ +
+
+ esc_html__( 'OAuth', 'anys' ), + 'token' => esc_html__( 'API Token', 'anys' ), + ]; + foreach ( $auth_opts as $val => $label ) : + $field_id = 'anys_integration_auth_method_' . $val; + ?> + + +

+ +

+
+
+ +
+
+ +
+
+ +

+ +

+
+
+ + +
+
+ +
+ + + + +
+
+ + + +
+ + + + + diff --git a/includes/modules/settings-page/views/views.php b/includes/modules/settings-page/views/views.php new file mode 100644 index 0000000..479c867 --- /dev/null +++ b/includes/modules/settings-page/views/views.php @@ -0,0 +1,140 @@ + + + +
+
+ +
+
+ +

+ +

+
+
+ + +
+
+ +
+
+ +

+ +

+
+
+ + +
+
+ +
+
+ esc_html__( 'Plain text', 'anys' ), + 'escaped' => esc_html__( 'Escaped HTML', 'anys' ), + 'raw' => esc_html__( 'Raw (no escaping)', 'anys' ), + ]; + foreach ( $title_modes as $val => $label ) : + $field_id = 'anys_views_title_mode_' . $val; + ?> + + +

+ +

+
+
+ + +
+
+ +
+
+ +

+ +

+
+
+ + +
+
+ +
+
+ +

+ +

+
+
+ +