UI.php
104 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Helpers for the Settings page. |
| 4 | * |
| 5 | * @package FrontBlocks |
| 6 | * @author Close <info@close.technology> |
| 7 | * @copyright 2025 Close |
| 8 | * @version 1.0.0 |
| 9 | */ |
| 10 | |
| 11 | namespace FrontBlocks\Admin; |
| 12 | |
| 13 | defined( 'ABSPATH' ) || exit; |
| 14 | |
| 15 | /** |
| 16 | * UI class for the Settings page. |
| 17 | */ |
| 18 | class UI { |
| 19 | /** |
| 20 | * Show an info card for an always-active feature (no toggle). |
| 21 | * |
| 22 | * @param string $feature_id The ID of the feature. |
| 23 | * @param string $title The title of the feature. |
| 24 | * @param string $description The description of the feature. |
| 25 | * @return void |
| 26 | */ |
| 27 | public static function show_info_card( $feature_id, $title, $description ) { |
| 28 | $icon = self::get_feature_icon( $feature_id ); |
| 29 | ?> |
| 30 | <div class="frbl-feature-card frbl-feature-active"> |
| 31 | <div class="frbl-feature-content"> |
| 32 | <div class="frbl-feature-icon"> |
| 33 | <?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?> |
| 34 | </div> |
| 35 | <div class="frbl-feature-info"> |
| 36 | <h3 class="frbl-feature-title"> |
| 37 | <?php echo esc_html( $title ); ?> |
| 38 | </h3> |
| 39 | <p class="frbl-feature-description"> |
| 40 | <?php echo esc_html( $description ); ?> |
| 41 | </p> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
| 45 | <?php |
| 46 | } |
| 47 | |
| 48 | /** |
| 49 | * Get the icon for a feature. |
| 50 | * |
| 51 | * @param string $icon_slug The slug of the icon. |
| 52 | * @return string The icon HTML. |
| 53 | */ |
| 54 | public static function get_feature_icon( $icon_slug ) { |
| 55 | // Animations icon. |
| 56 | $animations_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'; |
| 57 | |
| 58 | // Carousel icon. |
| 59 | $carousel_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>'; |
| 60 | |
| 61 | // Gallery icon. |
| 62 | $gallery_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>'; |
| 63 | |
| 64 | // Sticky icon. |
| 65 | $sticky_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>'; |
| 66 | |
| 67 | // Insert post icon. |
| 68 | $insert_post_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>'; |
| 69 | |
| 70 | // Counter icon. |
| 71 | $counter_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/></svg>'; |
| 72 | |
| 73 | // Reading time icon. |
| 74 | $reading_time_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'; |
| 75 | |
| 76 | // Stacked images icon. |
| 77 | $stacked_images_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="7" width="12" height="10" rx="1" transform="rotate(-5 9 12)"/><rect x="6" y="5" width="12" height="10" rx="1" transform="rotate(3 12 10)"/><rect x="9" y="3" width="12" height="10" rx="1"/></svg>'; |
| 78 | |
| 79 | // Product categories icon. |
| 80 | $product_categories_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>'; |
| 81 | |
| 82 | // Headline marquee icon. |
| 83 | $headline_marquee_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12h18M3 12l4-4m-4 4l4 4m14-4l-4-4m4 4l-4 4"/></svg>'; |
| 84 | |
| 85 | // Default icon. |
| 86 | $default_icon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg>'; |
| 87 | |
| 88 | $icons = array( |
| 89 | 'animations' => $animations_icon, |
| 90 | 'carousel' => $carousel_icon, |
| 91 | 'gallery' => $gallery_icon, |
| 92 | 'sticky' => $sticky_icon, |
| 93 | 'insert_post' => $insert_post_icon, |
| 94 | 'counter' => $counter_icon, |
| 95 | 'reading_time' => $reading_time_icon, |
| 96 | 'stacked_images' => $stacked_images_icon, |
| 97 | 'product_categories' => $product_categories_icon, |
| 98 | 'headline_marquee' => $headline_marquee_icon, |
| 99 | ); |
| 100 | |
| 101 | return $icons[ $icon_slug ] ?? $default_icon; |
| 102 | } |
| 103 | } |
| 104 |