account.php
5 days ago
header.php
5 days ago
preferences.php
5 days ago
reset-password-modal.php
5 days ago
security.php
5 days ago
social-accounts.php
5 days ago
withdraw.php
5 days ago
preferences.php
283 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Tutor dashboard preferences. |
| 4 | * |
| 5 | * @package Tutor\Templates |
| 6 | * @author Themeum <support@themeum.com> |
| 7 | * @link https://www.themeum.com/ |
| 8 | * @since 4.0.0 |
| 9 | */ |
| 10 | |
| 11 | defined( 'ABSPATH' ) || exit; |
| 12 | |
| 13 | use TUTOR\Icon; |
| 14 | use Tutor\Components\SvgIcon; |
| 15 | use TUTOR\UserPreference; |
| 16 | use Tutor\Components\ConfirmationModal; |
| 17 | use Tutor\Components\Constants\Color; |
| 18 | use Tutor\Components\InputField; |
| 19 | use Tutor\Components\Constants\InputType; |
| 20 | use Tutor\Components\Constants\Size; |
| 21 | use Tutor\Helpers\UrlHelper; |
| 22 | use Tutor\Options_V2; |
| 23 | use TUTOR\User; |
| 24 | |
| 25 | $theme_options = UserPreference::get_theme_options(); |
| 26 | $vision_options = UserPreference::get_vision_options(); |
| 27 | $motion_effects_options = UserPreference::get_motion_effects_options(); |
| 28 | $learning_mood_options = UserPreference::get_learning_mood_options(); |
| 29 | $font_scale_options = UserPreference::get_font_scale_options(); |
| 30 | |
| 31 | // Load current user preferences to seed the form. |
| 32 | $user_preferences = UserPreference::get_preferences(); |
| 33 | |
| 34 | // Confirmation modal id for resetting user preferences. |
| 35 | $reset_modal_id = 'tutor-preferences-reset-modal'; |
| 36 | |
| 37 | ?> |
| 38 | |
| 39 | <section class="tutor-preferences-section"> |
| 40 | <form |
| 41 | id="<?php echo esc_attr( $form_id ); ?>" |
| 42 | x-data='tutorForm({ |
| 43 | id: "<?php echo esc_attr( $form_id ); ?>", |
| 44 | mode: "onChange", |
| 45 | shouldFocusError: true, |
| 46 | defaultValues: <?php echo wp_json_encode( $user_preferences ); ?> |
| 47 | })' |
| 48 | x-bind="getFormBindings()" |
| 49 | @submit="handleSubmit((data) => { savePreferencesMutation?.mutate({...data, formId: '<?php echo esc_attr( $form_id ); ?>'}); })($event)" |
| 50 | > |
| 51 | <!-- Course Content Section --> |
| 52 | <div class="tutor-flex tutor-justify-between tutor-mb-4"> |
| 53 | <h5 class="tutor-h5 tutor-font-semibold tutor-my-none"> |
| 54 | <?php esc_html_e( 'Course Content', 'tutor' ); ?> |
| 55 | </h5> |
| 56 | <div class="tutor-preferences-reset-default" @click="TutorCore.modal.showModal('<?php echo esc_js( $reset_modal_id ); ?>')"> |
| 57 | <?php SvgIcon::make()->name( Icon::RELOAD_3 )->color( Color::SUBDUED )->render(); ?> |
| 58 | <span class="tutor-text-small tutor-text-subdued"><?php esc_html_e( 'Reset to Default', 'tutor' ); ?></span> |
| 59 | </div> |
| 60 | </div> |
| 61 | <?php |
| 62 | ConfirmationModal::make() |
| 63 | ->id( $reset_modal_id ) |
| 64 | ->title( __( 'Reset your Preferences?', 'tutor' ) ) |
| 65 | ->message( __( 'This will reset your learning preferences to the default settings. Your progress and account data won’t be affected.', 'tutor' ) ) |
| 66 | ->cancel_text( __( 'Cancel', 'tutor' ) ) |
| 67 | ->confirm_text( __( 'Reset Preferences', 'tutor' ) ) |
| 68 | ->icon( tutor_utils()->get_themed_svg( 'images/illustrations/reset-preference.svg' ), 80, 80, ConfirmationModal::ICON_TYPE_HTML ) |
| 69 | ->confirm_handler( "handleResetPreferences('" . esc_js( $form_id ) . "','" . esc_js( $reset_modal_id ) . "')" ) |
| 70 | ->mutation_state( 'resetPreferencesMutation' ) |
| 71 | ->render(); |
| 72 | ?> |
| 73 | |
| 74 | <div class="tutor-card tutor-card-rounded-2xl tutor-mb-7"> |
| 75 | <div class="tutor-preferences-setting-item"> |
| 76 | <div class="tutor-preferences-setting-content"> |
| 77 | <div class="tutor-preferences-setting-icon"> |
| 78 | <?php SvgIcon::make()->name( Icon::PLAY_LINE )->size( 20 )->render(); ?> |
| 79 | </div> |
| 80 | <div class="tutor-preferences-setting-title"> |
| 81 | <?php esc_html_e( 'Auto-play next lesson', 'tutor' ); ?> |
| 82 | </div> |
| 83 | </div> |
| 84 | <div class="tutor-preferences-setting-action"> |
| 85 | <?php |
| 86 | InputField::make() |
| 87 | ->type( InputType::SWITCH ) |
| 88 | ->size( Size::SM ) |
| 89 | ->name( 'auto_play_next' ) |
| 90 | ->attr( 'x-bind', "register('auto_play_next')" ) |
| 91 | ->render(); |
| 92 | ?> |
| 93 | </div> |
| 94 | </div> |
| 95 | </div> |
| 96 | |
| 97 | <h5 class="tutor-h5 tutor-font-semibold tutor-mb-4"> |
| 98 | <?php esc_html_e( 'Interactive Effects', 'tutor' ); ?> |
| 99 | </h5> |
| 100 | <div class="tutor-card tutor-card-rounded-2xl tutor-mb-7"> |
| 101 | <div class="tutor-preferences-setting-item"> |
| 102 | <div class="tutor-preferences-setting-content"> |
| 103 | <div class="tutor-preferences-setting-icon"> |
| 104 | <?php SvgIcon::make()->name( Icon::ANIMATION )->size( 20 )->render(); ?> |
| 105 | </div> |
| 106 | <div> |
| 107 | <div class="tutor-preferences-setting-title"> |
| 108 | <?php esc_html_e( 'Motion Effects', 'tutor' ); ?> |
| 109 | </div> |
| 110 | <div class="tutor-preferences-setting-subtitle"> |
| 111 | <?php esc_html_e( 'Limit animations and motion effects to reduce visual strain.', 'tutor' ); ?> |
| 112 | </div> |
| 113 | </div> |
| 114 | </div> |
| 115 | <div class="tutor-preferences-setting-action"> |
| 116 | <?php |
| 117 | InputField::make() |
| 118 | ->type( InputType::SELECT ) |
| 119 | ->size( Size::SM ) |
| 120 | ->name( 'motion_effects' ) |
| 121 | ->options( $motion_effects_options ) |
| 122 | ->attr( 'x-bind', "register('motion_effects')" ) |
| 123 | ->attr( 'x-effect', 'TutorCore.preference.applyMotionEffects(watch("motion_effects"))' ) |
| 124 | ->attr( 'style', 'min-width: 140px;' ) |
| 125 | ->render(); |
| 126 | ?> |
| 127 | </div> |
| 128 | </div> |
| 129 | </div> |
| 130 | |
| 131 | <h5 class="tutor-h5 tutor-font-semibold tutor-mb-4"> |
| 132 | <?php esc_html_e( 'Appearance', 'tutor' ); ?> |
| 133 | </h5> |
| 134 | <div class="tutor-card tutor-card-rounded-2xl tutor-mb-7"> |
| 135 | <div class="tutor-preferences-setting-item"> |
| 136 | <div class="tutor-preferences-setting-content"> |
| 137 | <div class="tutor-preferences-setting-icon"> |
| 138 | <?php SvgIcon::make()->name( Icon::LIGHT )->size( 20 )->render(); ?> |
| 139 | </div> |
| 140 | <div class="tutor-preferences-setting-title"> |
| 141 | <?php esc_html_e( 'Theme', 'tutor' ); ?> |
| 142 | </div> |
| 143 | </div> |
| 144 | <div class="tutor-preferences-setting-action"> |
| 145 | <?php |
| 146 | InputField::make() |
| 147 | ->type( InputType::SELECT ) |
| 148 | ->size( Size::SM ) |
| 149 | ->name( 'theme' ) |
| 150 | ->options( $theme_options ) |
| 151 | ->placeholder( __( 'Select theme...', 'tutor' ) ) |
| 152 | ->attr( 'x-bind', "register('theme')" ) |
| 153 | ->attr( 'x-effect', 'TutorCore.preference.applyTheme(watch("theme"))' ) |
| 154 | ->attr( 'style', 'min-width: 140px;' ) |
| 155 | ->render(); |
| 156 | ?> |
| 157 | </div> |
| 158 | </div> |
| 159 | <?php if ( User::is_student_view() ) : ?> |
| 160 | <div class="tutor-preferences-setting-item"> |
| 161 | <div class="tutor-preferences-setting-content"> |
| 162 | <div class="tutor-preferences-setting-icon"> |
| 163 | <?php SvgIcon::make()->name( Icon::INTERFACE )->size( 20 )->render(); ?> |
| 164 | </div> |
| 165 | <div class="tutor-preferences-setting-title"> |
| 166 | <?php esc_html_e( 'Learning Mode', 'tutor' ); ?> |
| 167 | </div> |
| 168 | </div> |
| 169 | <div class="tutor-preferences-setting-action"> |
| 170 | <?php |
| 171 | InputField::make() |
| 172 | ->type( InputType::SELECT ) |
| 173 | ->size( Size::SM ) |
| 174 | ->name( 'learning_mood' ) |
| 175 | ->options( $learning_mood_options ) |
| 176 | ->value( $user_preferences['learning_mood'] ?? Options_V2::LEARNING_MODE_MODERN ) |
| 177 | ->placeholder( __( 'Select mode', 'tutor' ) ) |
| 178 | ->attr( 'x-bind', "register('learning_mood')" ) |
| 179 | ->attr( 'style', 'min-width: 140px;' ) |
| 180 | ->render(); |
| 181 | ?> |
| 182 | </div> |
| 183 | </div> |
| 184 | <?php endif ?> |
| 185 | </div> |
| 186 | |
| 187 | <h5 class="tutor-h5 tutor-font-semibold tutor-mb-4"> |
| 188 | <?php esc_html_e( 'Accessibility', 'tutor' ); ?> |
| 189 | </h5> |
| 190 | <div class="tutor-card tutor-card-rounded-2xl"> |
| 191 | <div class="tutor-preferences-setting-item"> |
| 192 | <div class="tutor-preferences-setting-content"> |
| 193 | <div class="tutor-preferences-setting-icon"> |
| 194 | <?php SvgIcon::make()->name( Icon::FONT )->size( 20 )->render(); ?> |
| 195 | </div> |
| 196 | <div> |
| 197 | <div class="tutor-preferences-setting-title"> |
| 198 | <?php esc_html_e( 'Font Size', 'tutor' ); ?> |
| 199 | </div> |
| 200 | <div class="tutor-preferences-setting-subtitle"> |
| 201 | <?php esc_html_e( 'Adjust the text size for better readability.', 'tutor' ); ?> |
| 202 | </div> |
| 203 | </div> |
| 204 | </div> |
| 205 | <div class="tutor-preferences-setting-action"> |
| 206 | <?php |
| 207 | InputField::make() |
| 208 | ->type( InputType::SELECT ) |
| 209 | ->size( Size::SM ) |
| 210 | ->name( 'font_scale' ) |
| 211 | ->options( $font_scale_options ) |
| 212 | ->placeholder( __( 'Select font size...', 'tutor' ) ) |
| 213 | ->attr( 'x-bind', "register('font_scale')" ) |
| 214 | ->attr( 'x-effect', 'TutorCore.preference.applyFontScale(watch("font_scale"))' ) |
| 215 | ->attr( 'style', 'min-width: 140px;' ) |
| 216 | ->render(); |
| 217 | ?> |
| 218 | </div> |
| 219 | </div> |
| 220 | <div class="tutor-preferences-setting-item"> |
| 221 | <div class="tutor-preferences-setting-content"> |
| 222 | <div class="tutor-preferences-setting-icon"> |
| 223 | <?php SvgIcon::make()->name( Icon::CONTRAST )->size( 20 )->render(); ?> |
| 224 | </div> |
| 225 | <div> |
| 226 | <div class="tutor-preferences-setting-title"> |
| 227 | <?php esc_html_e( 'High Contrast', 'tutor' ); ?> |
| 228 | </div> |
| 229 | <div class="tutor-preferences-setting-subtitle"> |
| 230 | <?php esc_html_e( 'Increase contrast to improve text and element visibility.', 'tutor' ); ?> |
| 231 | </div> |
| 232 | </div> |
| 233 | </div> |
| 234 | <div class="tutor-preferences-setting-action"> |
| 235 | <?php |
| 236 | InputField::make() |
| 237 | ->type( InputType::SWITCH ) |
| 238 | ->size( Size::SM ) |
| 239 | ->name( 'contrast' ) |
| 240 | ->value( 'high' ) |
| 241 | ->checked( isset( $user_preferences['contrast'] ) && 'high' === $user_preferences['contrast'] ) |
| 242 | ->attr( 'x-bind', "register('contrast')" ) |
| 243 | ->attr( 'x-effect', 'TutorCore.preference.applyContrast(watch("contrast") ? "high" : "")' ) |
| 244 | ->render(); |
| 245 | ?> |
| 246 | </div> |
| 247 | </div> |
| 248 | <div class="tutor-preferences-vision-preview"> |
| 249 | <img :src="'<?php echo esc_attr( UrlHelper::asset( 'images/vision/' ) ); ?>' + (watch('vision') ?? 'normal') + '.webp'" /> |
| 250 | </div> |
| 251 | <div class="tutor-preferences-setting-item"> |
| 252 | <div class="tutor-preferences-setting-content"> |
| 253 | <div class="tutor-preferences-setting-icon"> |
| 254 | <?php SvgIcon::make()->name( Icon::VISION )->size( 20 )->render(); ?> |
| 255 | </div> |
| 256 | <div> |
| 257 | <div class="tutor-preferences-setting-title"> |
| 258 | <?php esc_html_e( 'Vision', 'tutor' ); ?> |
| 259 | </div> |
| 260 | <div class="tutor-preferences-setting-subtitle"> |
| 261 | <?php esc_html_e( 'Choose a color filter based on your visual needs.', 'tutor' ); ?> |
| 262 | </div> |
| 263 | </div> |
| 264 | </div> |
| 265 | <div class="tutor-preferences-setting-action"> |
| 266 | <?php |
| 267 | InputField::make() |
| 268 | ->type( InputType::SELECT ) |
| 269 | ->size( Size::SM ) |
| 270 | ->name( 'vision' ) |
| 271 | ->options( $vision_options ) |
| 272 | ->placeholder( __( 'Select vision...', 'tutor' ) ) |
| 273 | ->attr( 'x-bind', "register('vision')" ) |
| 274 | ->attr( 'x-effect', 'TutorCore.preference.applyVision(watch("vision"))' ) |
| 275 | ->attr( 'style', 'min-width: 140px;' ) |
| 276 | ->render(); |
| 277 | ?> |
| 278 | </div> |
| 279 | </div> |
| 280 | </div> |
| 281 | </form> |
| 282 | </section> |
| 283 |