DefaultTemplate.php
491 lines
| 1 | <?php |
| 2 | |
| 3 | namespace ProfilePress\Core\Themes\DragDrop\UserProfile; |
| 4 | |
| 5 | use ProfilePress\Core\Admin\SettingsPages\DragDropBuilder\DragDropBuilder; |
| 6 | use ProfilePress\Core\Classes\ExtensionManager as EM; |
| 7 | use ProfilePress\Core\Themes\DragDrop\AbstractTheme; |
| 8 | use ProfilePress\Core\Admin\SettingsPages\DragDropBuilder\Fields; |
| 9 | |
| 10 | class DefaultTemplate extends AbstractTheme |
| 11 | { |
| 12 | |
| 13 | public function __construct($form_id, $form_type) |
| 14 | { |
| 15 | parent::__construct($form_id, $form_type); |
| 16 | |
| 17 | add_action('ppress_profile_tab_content_main', [$this, 'profile_content_main']); |
| 18 | add_action('ppress_profile_tab_content_posts', [$this, 'profile_content_posts']); |
| 19 | add_action('ppress_profile_tab_content_comments', [$this, 'profile_content_comments']); |
| 20 | } |
| 21 | |
| 22 | public static function default_field_listing() |
| 23 | { |
| 24 | Fields\Init::init(); |
| 25 | $standard_fields = DragDropBuilder::get_instance()->standard_fields(); |
| 26 | |
| 27 | return [ |
| 28 | $standard_fields['profile-username'], |
| 29 | $standard_fields['profile-email'], |
| 30 | $standard_fields['profile-first-name'], |
| 31 | $standard_fields['profile-last-name'], |
| 32 | $standard_fields['profile-website'], |
| 33 | $standard_fields['profile-bio'], |
| 34 | ]; |
| 35 | } |
| 36 | |
| 37 | public function default_metabox_settings() |
| 38 | { |
| 39 | $data = parent::default_metabox_settings(); |
| 40 | $data['ppress_dpf_max_width'] = '1000px'; |
| 41 | $data['ppress_dpf_area_max_width'] = '600px'; |
| 42 | $data['ppress_dpf_profile_cover_enabled'] = 'true'; |
| 43 | $data['ppress_dpf_profile_show_bio'] = 'true'; |
| 44 | $data['ppress_dpf_profile_cover_ratio'] = '2.7'; |
| 45 | $data['ppress_dpf_profile_header_display_name'] = 'first_last_names'; |
| 46 | $data['ppress_dpf_profile_user_meta'] = []; |
| 47 | $data['ppress_dpf_profile_menu_tabs'] = ['main', 'posts', 'comments']; |
| 48 | |
| 49 | |
| 50 | $data['ppress_dpf_profile_header_name_color'] = '#555555'; |
| 51 | $data['ppress_dpf_profile_body_text_color'] = '#666666'; |
| 52 | $data['ppress_dpf_profile_menu_background_color'] = '#444444'; |
| 53 | $data['ppress_dpf_profile_menu_tab_text_color'] = '#ffffff'; |
| 54 | $data['ppress_dpf_profile_active_menu_tab_bg_color'] = '#007bff'; |
| 55 | |
| 56 | return $data; |
| 57 | } |
| 58 | |
| 59 | public function appearance_settings($settings) |
| 60 | { |
| 61 | $profile_tabs = $this->profile_tabs(); |
| 62 | |
| 63 | $settings[] = [ |
| 64 | 'id' => 'ppress_dpf_max_width', |
| 65 | 'type' => 'text', |
| 66 | 'label' => esc_html__('Profile Maximum Width', 'wp-user-avatar'), |
| 67 | 'description' => esc_html__('The maximum width of the profile template.', 'wp-user-avatar'), |
| 68 | 'priority' => 10 |
| 69 | ]; |
| 70 | |
| 71 | $settings[] = [ |
| 72 | 'id' => 'ppress_dpf_area_max_width', |
| 73 | 'type' => 'text', |
| 74 | 'label' => esc_html__('Profile Area Maximum Width', 'wp-user-avatar'), |
| 75 | 'description' => esc_html__('The maximum width of the profile area inside profile below the header.', 'wp-user-avatar'), |
| 76 | 'priority' => 20 |
| 77 | ]; |
| 78 | |
| 79 | $settings[] = [ |
| 80 | 'id' => 'ppress_dpf_profile_cover_enabled', |
| 81 | 'type' => 'checkbox', |
| 82 | 'label' => esc_html__('Enable Cover Image', 'wp-user-avatar'), |
| 83 | 'priority' => 40 |
| 84 | ]; |
| 85 | |
| 86 | $settings[] = [ |
| 87 | 'id' => 'ppress_dpf_profile_cover_ratio', |
| 88 | 'type' => 'select', |
| 89 | 'label' => esc_html__('Profile Cover Ratio', 'wp-user-avatar'), |
| 90 | 'options' => [ |
| 91 | '1.6' => '1.6:1', |
| 92 | '2.7' => '2.7:1', |
| 93 | '3.2' => '3.2:1', |
| 94 | ], |
| 95 | 'description' => esc_html__('Choose an aspect ratio of the profile cover image.', 'wp-user-avatar'), |
| 96 | 'priority' => 50 |
| 97 | ]; |
| 98 | |
| 99 | $settings[] = [ |
| 100 | 'id' => 'ppress_dpf_profile_header_display_name', |
| 101 | 'type' => 'select', |
| 102 | 'label' => esc_html__('Header Text', 'wp-user-avatar'), |
| 103 | 'options' => [ |
| 104 | 'hide' => esc_html__('Hide', 'wp-user-avatar'), |
| 105 | 'username' => esc_html__('Username', 'wp-user-avatar'), |
| 106 | 'display-name' => esc_html__('Display Name', 'wp-user-avatar'), |
| 107 | 'nickname' => esc_html__('Nickname', 'wp-user-avatar'), |
| 108 | 'first_last_names' => esc_html__('First & Last Name', 'wp-user-avatar'), |
| 109 | 'last_first_names' => esc_html__('Last & First Name', 'wp-user-avatar'), |
| 110 | 'first-name' => esc_html__('First Name Only', 'wp-user-avatar') |
| 111 | ], |
| 112 | 'description' => esc_html__('What to use as display name in profile header. Select "Hide" to hide it from showing.', 'wp-user-avatar'), |
| 113 | 'priority' => 60 |
| 114 | ]; |
| 115 | |
| 116 | if (EM::is_enabled(EM::CUSTOM_FIELDS)) { |
| 117 | |
| 118 | $settings[] = [ |
| 119 | 'id' => 'ppress_dpf_profile_show_social_links', |
| 120 | 'type' => 'checkbox', |
| 121 | 'label' => esc_html__('Show Social Links in Header', 'wp-user-avatar'), |
| 122 | 'priority' => 70 |
| 123 | ]; |
| 124 | } else { |
| 125 | |
| 126 | $upgrade_url = 'https://profilepress.net/pricing/?utm_source=wp_dashboard&utm_medium=upgrade&utm_campaign=default_profile_social_link'; |
| 127 | $settings[] = [ |
| 128 | 'id' => 'ppress_dpf_profile_social_link_upsell', |
| 129 | 'label' => '', |
| 130 | 'type' => 'custom', |
| 131 | 'content' => sprintf( |
| 132 | esc_html__('%sUpgrade to ProfilePress premium%s if you don\'t have the custom field addon to display users social profiles.', 'wp-user-avatar'), |
| 133 | '<a href="' . $upgrade_url . '" target="_blank">', '</a>' |
| 134 | ), |
| 135 | ]; |
| 136 | } |
| 137 | |
| 138 | $settings[] = [ |
| 139 | 'id' => 'ppress_dpf_profile_show_bio', |
| 140 | 'type' => 'checkbox', |
| 141 | 'label' => esc_html__('Show Bio in Header', 'wp-user-avatar'), |
| 142 | 'priority' => 80 |
| 143 | ]; |
| 144 | |
| 145 | $settings[] = [ |
| 146 | 'id' => 'ppress_dpf_profile_user_meta', |
| 147 | 'type' => 'select2', |
| 148 | 'label' => esc_html__('Fields to Show in User Meta', 'wp-user-avatar'), |
| 149 | 'options' => ppress_standard_custom_fields_key_value_pair(true), |
| 150 | 'priority' => 90 |
| 151 | ]; |
| 152 | |
| 153 | $settings[] = [ |
| 154 | 'id' => 'ppress_dpf_profile_menu_tabs', |
| 155 | 'type' => 'select2', |
| 156 | 'label' => esc_html__('Profile Menu Tabs', 'wp-user-avatar'), |
| 157 | 'options' => array_reduce(array_keys($profile_tabs), function ($carry, $item) use ($profile_tabs) { |
| 158 | $carry[$item] = $profile_tabs[$item]['title']; |
| 159 | |
| 160 | return $carry; |
| 161 | }), |
| 162 | 'priority' => 100 |
| 163 | ]; |
| 164 | |
| 165 | return $settings; |
| 166 | } |
| 167 | |
| 168 | public function color_settings($settings) |
| 169 | { |
| 170 | $settings2 = [ |
| 171 | [ |
| 172 | 'id' => 'ppress_dpf_profile_header_name_color', |
| 173 | 'type' => 'color', |
| 174 | 'label' => esc_html__('Header Name', 'wp-user-avatar') |
| 175 | ], |
| 176 | [ |
| 177 | 'id' => 'ppress_dpf_profile_body_text_color', |
| 178 | 'type' => 'color', |
| 179 | 'label' => esc_html__('Body Text', 'wp-user-avatar') |
| 180 | ], |
| 181 | [ |
| 182 | 'id' => 'ppress_dpf_profile_menu_background_color', |
| 183 | 'type' => 'color', |
| 184 | 'label' => esc_html__('Menu Background', 'wp-user-avatar') |
| 185 | ], |
| 186 | [ |
| 187 | 'id' => 'ppress_dpf_profile_menu_tab_text_color', |
| 188 | 'type' => 'color', |
| 189 | 'label' => esc_html__('Menu Tab Text', 'wp-user-avatar') |
| 190 | ], |
| 191 | [ |
| 192 | 'id' => 'ppress_dpf_profile_active_menu_tab_bg_color', |
| 193 | 'type' => 'color', |
| 194 | 'label' => esc_html__('Active Menu Tab Background', 'wp-user-avatar') |
| 195 | ] |
| 196 | ]; |
| 197 | |
| 198 | return array_merge($settings, $settings2); |
| 199 | } |
| 200 | |
| 201 | private function cover_image_structure() |
| 202 | { |
| 203 | $cover_ratio = $this->get_meta('ppress_dpf_profile_cover_ratio'); |
| 204 | if (empty($cover_ratio)) $cover_ratio = '2.7'; |
| 205 | ?> |
| 206 | <div class="ppress-default-profile-cover" data-ratio="<?php echo esc_attr($cover_ratio); ?>"> |
| 207 | <div class="ppress-default-profile-cover-e" data-ratio="<?php echo esc_attr($cover_ratio); ?>"> |
| 208 | <img src="[profile-cover-image-url]"> |
| 209 | </div> |
| 210 | </div> |
| 211 | <?php |
| 212 | } |
| 213 | |
| 214 | private function is_profile_cover_enabled() |
| 215 | { |
| 216 | return $this->get_meta('ppress_dpf_profile_cover_enabled') == 'true'; |
| 217 | } |
| 218 | |
| 219 | private function header_social_links() |
| 220 | { |
| 221 | if ($this->get_meta('ppress_dpf_profile_show_social_links') !== 'true') return; |
| 222 | |
| 223 | $this->social_profile_icons(); |
| 224 | } |
| 225 | |
| 226 | public function profile_tabs() |
| 227 | { |
| 228 | return apply_filters('ppress_profile_tabs', [ |
| 229 | 'main' => [ |
| 230 | 'icon' => 'person', |
| 231 | 'title' => esc_html__('About', 'wp-user-avatar') |
| 232 | ], |
| 233 | 'posts' => [ |
| 234 | 'icon' => 'create', |
| 235 | 'title' => esc_html__('Posts', 'wp-user-avatar') |
| 236 | ], |
| 237 | 'comments' => [ |
| 238 | 'icon' => 'comment', |
| 239 | 'title' => esc_html__('Comments', 'wp-user-avatar') |
| 240 | ] |
| 241 | ]); |
| 242 | } |
| 243 | |
| 244 | private function active_tab() |
| 245 | { |
| 246 | $active = 'main'; |
| 247 | |
| 248 | if ( ! empty($_GET['tab'])) { |
| 249 | |
| 250 | $sanitized_tab = sanitize_text_field($_GET['tab']); |
| 251 | |
| 252 | if (in_array($sanitized_tab, array_keys($this->profile_tabs()))) { |
| 253 | $active = sanitize_text_field($_GET['tab']); |
| 254 | } |
| 255 | } |
| 256 | |
| 257 | return $active; |
| 258 | } |
| 259 | |
| 260 | public function profile_tabs_section() |
| 261 | { |
| 262 | $saved_tabs = array_filter($this->get_meta('ppress_dpf_profile_menu_tabs'), function ($item) { |
| 263 | return ! empty($item); |
| 264 | }); |
| 265 | |
| 266 | if (empty($saved_tabs)) $saved_tabs = ['main', 'posts' . 'comments']; |
| 267 | |
| 268 | $profile_tabs = $this->profile_tabs(); |
| 269 | |
| 270 | if ( ! empty($saved_tabs)) { |
| 271 | |
| 272 | echo '<div class="ppress-dpf-profile-nav">'; |
| 273 | |
| 274 | foreach ($saved_tabs as $tab_id) : |
| 275 | $url = esc_url(add_query_arg('tab', $tab_id)); |
| 276 | ?> |
| 277 | <div class="ppress-dpf-profile-nav-item ppress-dpf-nav-<?= $tab_id ?><?= $this->active_tab() == $tab_id ? ' ppress-dpf-active' : ''; ?>"> |
| 278 | <a href="<?= $url ?>"> |
| 279 | <span class="ppress-material-icons"><?= $profile_tabs[$tab_id]['icon'] ?></span> |
| 280 | <span class="ppress-dpf-nav-title"><?= $profile_tabs[$tab_id]['title'] ?></span> |
| 281 | </a> |
| 282 | </div> |
| 283 | <?php endforeach; |
| 284 | echo '<div class="ppress-dpf-clear"></div>'; |
| 285 | echo '</div>'; |
| 286 | } |
| 287 | } |
| 288 | |
| 289 | public function profile_content_main() |
| 290 | { |
| 291 | $profile_listing = $this->profile_listing() |
| 292 | ->item_wrap_start_tag('<div class="ppress-dpf-profile-body-item">') |
| 293 | ->item_wrap_end_tag('</div>') |
| 294 | ->title_start_tag('<div class="ppress-dpf-item-label">') |
| 295 | ->title_end_tag('</div>') |
| 296 | ->info_start_tag('<div class="ppress-dpf-item-value">') |
| 297 | ->info_end_tag('</div>') |
| 298 | ->forge(); |
| 299 | |
| 300 | $has_field_data = $profile_listing->has_field_data(); |
| 301 | |
| 302 | $profile_listing = $profile_listing->output(); |
| 303 | |
| 304 | if ($has_field_data === false) : ?> |
| 305 | <p class="ppress-dpf-profile-note"> |
| 306 | <span class="ppress-material-icons">sentiment_dissatisfied</span> |
| 307 | <span> |
| 308 | <?= sprintf( |
| 309 | __('Your profile is looking a little empty. Why not <a href="%s">add some information</a>?', 'wp-user-avatar'), |
| 310 | ppress_edit_profile_url() |
| 311 | ); ?> |
| 312 | </span> |
| 313 | </p> |
| 314 | <?php endif; |
| 315 | |
| 316 | if ($has_field_data === true) { ?> |
| 317 | <div class="ppress-dpf-profile-body-items"> |
| 318 | <?php echo $profile_listing; ?> |
| 319 | </div> |
| 320 | <?php |
| 321 | } |
| 322 | } |
| 323 | |
| 324 | public function profile_content_posts() |
| 325 | { |
| 326 | echo '[profile-post-list]'; |
| 327 | if (ppress_settings_by_key('author_slug_to_profile') != 'on') { |
| 328 | printf( |
| 329 | '<div class="ppress-dpf-more-post-wrap"><a href="%s" class="ppress-dpf-more-post-btn">%s</a></div>', |
| 330 | '[profile-author-posts-url]', |
| 331 | esc_html__('See all Posts', 'wp-user-avatar') |
| 332 | ); |
| 333 | } |
| 334 | } |
| 335 | |
| 336 | public function profile_content_comments() |
| 337 | { |
| 338 | echo '[profile-comment-list]'; |
| 339 | } |
| 340 | |
| 341 | public function form_structure() |
| 342 | { |
| 343 | $active_tab = $this->active_tab(); |
| 344 | |
| 345 | $max_width = $this->get_meta('ppress_dpf_max_width'); |
| 346 | $profile_area_max_width = $this->get_meta('ppress_dpf_area_max_width'); |
| 347 | $header_display_name = $this->get_meta('ppress_dpf_profile_header_display_name'); |
| 348 | |
| 349 | /** @see https://stackoverflow.com/a/20373067/2648410 using array_values to reindex array numeric keys */ |
| 350 | $profile_user_meta = array_values( |
| 351 | array_filter( |
| 352 | array_map(function ($meta_key) { |
| 353 | |
| 354 | if (empty($meta_key)) return false; |
| 355 | |
| 356 | $value = $this->get_profile_field($meta_key, true); |
| 357 | |
| 358 | return empty($value) ? false : $value; |
| 359 | |
| 360 | }, $this->get_meta('ppress_dpf_profile_user_meta')) |
| 361 | ) |
| 362 | ); |
| 363 | |
| 364 | $classes = 'ppress-default-profile'; |
| 365 | |
| 366 | if ( ! $this->is_profile_cover_enabled()) { |
| 367 | $classes .= ' ppdf-nocover'; |
| 368 | } |
| 369 | ob_start(); |
| 370 | ?> |
| 371 | [pp-form-wrapper class="<?= $classes ?>" style="max-width:<?= $max_width ?>"] |
| 372 | |
| 373 | <?php if ($this->is_profile_cover_enabled()) $this->cover_image_structure(); ?> |
| 374 | |
| 375 | <div class="ppress-dpf-header"> |
| 376 | <?php if (ppress_is_my_own_profile()) : ?> |
| 377 | <div class="ppress-dpf-headericon"> |
| 378 | <a href="<?= ppress_my_account_url(); ?>" class="ppress-dpf-edit-a hint--bottom" aria-label="<?= esc_html__('Edit your profile') ?>"> |
| 379 | <span class="ppress-material-icons">settings</span> |
| 380 | </a> |
| 381 | </div> |
| 382 | <?php endif; ?> |
| 383 | |
| 384 | <div class="ppress-dpf-profile-photo"> |
| 385 | <img src="[profile-avatar-url]" width="190" height="190"> |
| 386 | </div> |
| 387 | |
| 388 | <div class="ppress-dpf-profile-meta"> |
| 389 | <div class="ppress-dpf-main-meta"> |
| 390 | |
| 391 | <?php if ('hide' !== $header_display_name) : ?> |
| 392 | <div class="ppress-dpf-name"><?= $this->get_profile_field($header_display_name) ?></div> |
| 393 | <?php endif; ?> |
| 394 | |
| 395 | <?php $this->header_social_links(); ?> |
| 396 | </div> |
| 397 | |
| 398 | <?php if (is_array($profile_user_meta) && ! empty($profile_user_meta)) : $count = count($profile_user_meta) - 1; ?> |
| 399 | <div class="ppress-dpf-meta"> |
| 400 | <?php foreach ($profile_user_meta as $index => $meta_data) : ?> |
| 401 | <?= $meta_data ?> |
| 402 | <?php if ($index !== $count): ?> |
| 403 | <span class="b">•</span> |
| 404 | <?php endif; ?> |
| 405 | <?php endforeach; ?> |
| 406 | </div> |
| 407 | <?php endif; ?> |
| 408 | |
| 409 | <?php if ($this->get_meta('ppress_dpf_profile_show_bio') == 'true') : ?> |
| 410 | <div class="ppress-dpf-meta-text"> |
| 411 | [profile-bio] |
| 412 | </div> |
| 413 | <?php endif; ?> |
| 414 | |
| 415 | </div> |
| 416 | |
| 417 | <div class="ppress-dpf-clear"></div> |
| 418 | |
| 419 | </div> |
| 420 | |
| 421 | <?php $this->profile_tabs_section(); ?> |
| 422 | |
| 423 | <div class="ppress-dpf-profile-body ppdf-<?= $active_tab ?>"<?= ! empty($profile_area_max_width) ? ' style="max-width:' . $profile_area_max_width . '"' : '' ?>> |
| 424 | <?php do_action(sprintf('ppress_profile_tab_content_%s', $active_tab)); ?> |
| 425 | </div> |
| 426 | [/pp-form-wrapper] |
| 427 | |
| 428 | <?php |
| 429 | return ob_get_clean(); |
| 430 | } |
| 431 | |
| 432 | public function form_css() |
| 433 | { |
| 434 | $form_id = $this->form_id; |
| 435 | $form_type = $this->form_type; |
| 436 | |
| 437 | $photo_size = 190; |
| 438 | |
| 439 | $meta_padding = ($photo_size + 60) . 'px'; |
| 440 | |
| 441 | $photosize_up = ($photo_size / 2) + 5; |
| 442 | |
| 443 | $profile_photo_style = [ |
| 444 | "width:{$photo_size}px", |
| 445 | "height:{$photo_size}px" |
| 446 | ]; |
| 447 | |
| 448 | if ($this->is_profile_cover_enabled()) { |
| 449 | $profile_photo_style[] = "top:-" . $photosize_up . "px"; |
| 450 | } |
| 451 | |
| 452 | $profile_photo_style = implode(';', $profile_photo_style); |
| 453 | |
| 454 | $header_name_color = $this->get_meta('ppress_dpf_profile_header_name_color'); |
| 455 | $body_text_color = $this->get_meta('ppress_dpf_profile_body_text_color'); |
| 456 | $menu_background_color = $this->get_meta('ppress_dpf_profile_menu_background_color'); |
| 457 | $menu_tab_text_color = $this->get_meta('ppress_dpf_profile_menu_tab_text_color'); |
| 458 | $active_menu_tab_bg_color = $this->get_meta('ppress_dpf_profile_active_menu_tab_bg_color'); |
| 459 | |
| 460 | return <<<CSS |
| 461 | div#pp-$form_type-$form_id.ppress-default-profile .ppress-dpf-profile-photo { |
| 462 | $profile_photo_style |
| 463 | } |
| 464 | |
| 465 | div#pp-$form_type-$form_id.ppress-default-profile { |
| 466 | color: $body_text_color; |
| 467 | } |
| 468 | |
| 469 | div#pp-$form_type-$form_id.ppress-default-profile .ppress-dpf-profile-nav { |
| 470 | background: $menu_background_color; |
| 471 | } |
| 472 | |
| 473 | div#pp-$form_type-$form_id.ppress-default-profile .ppress-dpf-profile-nav-item a { |
| 474 | color: $menu_tab_text_color; |
| 475 | } |
| 476 | |
| 477 | div#pp-$form_type-$form_id.ppress-default-profile .ppress-dpf-name { |
| 478 | color: $header_name_color; |
| 479 | } |
| 480 | |
| 481 | div#pp-$form_type-$form_id.ppress-default-profile .ppress-dpf-profile-meta { |
| 482 | padding-left: $meta_padding; |
| 483 | } |
| 484 | |
| 485 | div#pp-$form_type-$form_id.ppress-default-profile .ppress-dpf-profile-nav-item.ppress-dpf-active a { |
| 486 | background: $active_menu_tab_bg_color; |
| 487 | } |
| 488 | CSS; |
| 489 | |
| 490 | } |
| 491 | } |