EditProfile
5 years ago
Login
5 years ago
MemberDirectory
4 years ago
PasswordReset
5 years ago
Registration
5 years ago
UserProfile
4 years ago
AbstractBuildScratch.php
5 years ago
AbstractMemberDirectoryTheme.php
5 years ago
AbstractTheme.php
4 years ago
FieldListing.php
5 years ago
MemberDirectoryListing.php
5 years ago
ProfileFieldListing.php
4 years ago
ThemeInterface.php
5 years ago
ThemesRepository.php
5 years ago
index.php
5 years ago
AbstractBuildScratch.php
859 lines
| 1 | <?php |
| 2 | |
| 3 | namespace ProfilePress\Core\Themes\DragDrop; |
| 4 | |
| 5 | use ProfilePress\Core\Admin\SettingsPages\DragDropBuilder\FieldBase; |
| 6 | use ProfilePress\Core\Classes\FormRepository as FR; |
| 7 | |
| 8 | abstract class AbstractBuildScratch extends AbstractTheme |
| 9 | { |
| 10 | public function __construct($form_id, $form_type) |
| 11 | { |
| 12 | parent::__construct($form_id, $form_type); |
| 13 | |
| 14 | add_filter('ppress_form_builder_field_settings', [$this, 'add_field_properties'], 10, 2); |
| 15 | |
| 16 | add_filter('ppress_form_after_field_listing', [$this, 'add_field_icon'], 10, 2); |
| 17 | } |
| 18 | |
| 19 | public function add_field_icon($output, $raw_field_setting) |
| 20 | { |
| 21 | if (isset($raw_field_setting['password_visibility_icon']) && $raw_field_setting['password_visibility_icon'] === true) { |
| 22 | $raw_field_setting['icon'] = 'visibility'; |
| 23 | } |
| 24 | |
| 25 | if (isset($raw_field_setting['icon']) && ! empty($raw_field_setting['icon'])) { |
| 26 | $output .= sprintf('<i class="pp-form-material-icons">%s</i>', $raw_field_setting['icon']); |
| 27 | } |
| 28 | |
| 29 | return $output; |
| 30 | } |
| 31 | |
| 32 | /** |
| 33 | * @param $field |
| 34 | * @param FieldBase $fieldBaseInstance |
| 35 | * |
| 36 | * @return mixed |
| 37 | */ |
| 38 | public function add_field_properties($field, $fieldBaseInstance) |
| 39 | { |
| 40 | $field_type = $fieldBaseInstance->field_type(); |
| 41 | |
| 42 | if ( ! in_array($fieldBaseInstance->field_type(), $this->disallowed_settings_fields())) { |
| 43 | |
| 44 | if (isset($field[FieldBase::GENERAL_TAB])) { |
| 45 | |
| 46 | $column_fields = []; |
| 47 | |
| 48 | if ( ! isset($field[FieldBase::GENERAL_TAB]['label'])) { |
| 49 | $column_fields['label'] = [ |
| 50 | 'label' => esc_html__('Label', 'wp-user-avatar'), |
| 51 | 'field' => FieldBase::INPUT_FIELD, |
| 52 | ]; |
| 53 | } else { |
| 54 | $column_fields['label'] = $field[FieldBase::GENERAL_TAB]['label']; |
| 55 | unset($field[FieldBase::GENERAL_TAB]['label']); |
| 56 | } |
| 57 | |
| 58 | if (isset($field[FieldBase::GENERAL_TAB]['placeholder'])) { |
| 59 | $column_fields['placeholder'] = $field[FieldBase::GENERAL_TAB]['placeholder']; |
| 60 | unset($field[FieldBase::GENERAL_TAB]['placeholder']); |
| 61 | } |
| 62 | |
| 63 | $field[FieldBase::GENERAL_TAB] = array_merge( |
| 64 | [FieldBase::COLUMN_SETTINGS => $column_fields], |
| 65 | $field[FieldBase::GENERAL_TAB] |
| 66 | ); |
| 67 | |
| 68 | $field[FieldBase::GENERAL_TAB]['description'] = [ |
| 69 | 'label' => esc_html__('Description', 'wp-user-avatar'), |
| 70 | 'field' => FieldBase::TEXTAREA_FIELD, |
| 71 | ]; |
| 72 | } |
| 73 | |
| 74 | if (isset($field[FieldBase::STYLE_TAB])) { |
| 75 | |
| 76 | $class_settings = $field[FieldBase::STYLE_TAB]['class']; |
| 77 | |
| 78 | unset($field[FieldBase::STYLE_TAB]['class']); |
| 79 | |
| 80 | $field[FieldBase::STYLE_TAB][FieldBase::COLUMN_SETTINGS] = []; |
| 81 | |
| 82 | $field[FieldBase::STYLE_TAB][FieldBase::COLUMN_SETTINGS]['field_width'] = [ |
| 83 | 'label' => esc_html__('Width', 'wp-user-avatar'), |
| 84 | 'options' => [ |
| 85 | 'full' => esc_html__('Full', 'wp-user-avatar'), |
| 86 | 'half' => esc_html__('Half', 'wp-user-avatar'), |
| 87 | 'third' => esc_html__('One Third', 'wp-user-avatar'), |
| 88 | ], |
| 89 | 'field' => FieldBase::SELECT_FIELD, |
| 90 | ]; |
| 91 | |
| 92 | // the str_replace sorcery/ritual checks if field type does not contains any of the strings https://stackoverflow.com/a/42311760/2648410 |
| 93 | if (str_replace(['-select-role', '-select-dropdown', '-checkbox-list', '-radio-buttons', '-single-checkbox', '-country', '-cpf-agreeable', '-cpf-checkbox', '-cpf-radio', '-cpf-select'], '', $field_type) == $field_type) { |
| 94 | $field[FieldBase::STYLE_TAB][FieldBase::COLUMN_SETTINGS]['icon'] = [ |
| 95 | 'label' => esc_html__('Icon', 'wp-user-avatar'), |
| 96 | 'field' => FieldBase::ICON_PICKER_FIELD, |
| 97 | ]; |
| 98 | } |
| 99 | |
| 100 | // if not password meter and password related field |
| 101 | if (str_replace(['-password-meter'], '', $field_type) == $field_type && str_replace(['-password'], '', $field_type) != $field_type) { |
| 102 | |
| 103 | $field[FieldBase::STYLE_TAB]['password_visibility_icon'] = [ |
| 104 | 'label' => esc_html__('Enable Password Visibility Icon', 'wp-user-avatar'), |
| 105 | 'description' => esc_html__('Check to enable visibility icon which when clicked, hides or shows a password.', 'wp-user-avatar'), |
| 106 | 'type' => 'checkbox', |
| 107 | 'field' => FieldBase::INPUT_FIELD, |
| 108 | ]; |
| 109 | } |
| 110 | |
| 111 | if (str_replace(['-checkbox', '-radio', '-country', '-select'], '', $field_type) == $field_type) { |
| 112 | $field[FieldBase::STYLE_TAB][FieldBase::COLUMN_2_SETTINGS]['label_display'] = [ |
| 113 | 'label' => esc_html__('Label Display', 'wp-user-avatar'), |
| 114 | 'options' => [ |
| 115 | 'above' => esc_html__('Above', 'wp-user-avatar'), |
| 116 | 'inside' => esc_html__('Inside', 'wp-user-avatar') |
| 117 | ], |
| 118 | 'field' => FieldBase::SELECT_FIELD, |
| 119 | ]; |
| 120 | } |
| 121 | |
| 122 | $field[FieldBase::STYLE_TAB][FieldBase::COLUMN_2_SETTINGS]['description_appearance'] = [ |
| 123 | 'label' => esc_html__('Description Appearance', 'wp-user-avatar'), |
| 124 | 'options' => [ |
| 125 | 'standard' => esc_html__('Standard', 'wp-user-avatar'), |
| 126 | 'reveal' => esc_html__('Reveal on Focus', 'wp-user-avatar'), |
| 127 | 'tooltip' => esc_html__('Tooltip', 'wp-user-avatar'), |
| 128 | ], |
| 129 | 'field' => FieldBase::SELECT_FIELD, |
| 130 | ]; |
| 131 | |
| 132 | $field[FieldBase::STYLE_TAB]['class'] = $class_settings; |
| 133 | } |
| 134 | } |
| 135 | |
| 136 | return $field; |
| 137 | } |
| 138 | |
| 139 | public function social_login_buttons() |
| 140 | { |
| 141 | $html = ''; |
| 142 | |
| 143 | if ( ! $this->is_show_social_login()) return $html; |
| 144 | |
| 145 | $active_social_logins = array_filter($this->get_meta('buildscratch_form_social_buttons')); |
| 146 | |
| 147 | foreach ($active_social_logins as $active_social_login) { |
| 148 | $html .= "[pp-social-button type=$active_social_login]"; |
| 149 | } |
| 150 | |
| 151 | return $html; |
| 152 | } |
| 153 | |
| 154 | public function default_metabox_settings() |
| 155 | { |
| 156 | $default_headline = esc_html__('Create an Account', 'wp-user-avatar'); |
| 157 | |
| 158 | switch ($this->form_type) { |
| 159 | case FR::LOGIN_TYPE: |
| 160 | $default_headline = esc_html__('Sign in to Your Account', 'wp-user-avatar'); |
| 161 | break; |
| 162 | case FR::PASSWORD_RESET_TYPE: |
| 163 | $default_headline = esc_html__('Reset Your Password', 'wp-user-avatar'); |
| 164 | break; |
| 165 | case FR::EDIT_PROFILE_TYPE: |
| 166 | $default_headline = esc_html__('Edit Your Profile', 'wp-user-avatar'); |
| 167 | break; |
| 168 | } |
| 169 | |
| 170 | $data = parent::default_metabox_settings(); |
| 171 | $data['buildscratch_form_width'] = '400px'; |
| 172 | $data['buildscratch_form_font_family'] = 'Merriweather'; |
| 173 | $data['buildscratch_remove_form_frame'] = 'false'; |
| 174 | $data['buildscratch_hide_required_asterisk'] = 'false'; |
| 175 | $data['buildscratch_form_bg_color'] = '#ffffff'; |
| 176 | $data['buildscratch_form_social_buttons'] = ['facebook', 'twitter', 'google']; |
| 177 | $data['buildscratch_form_headline'] = $default_headline; |
| 178 | $data['buildscratch_forgot_password_label'] = esc_html__('Lost your password?', 'wp-user-avatar'); |
| 179 | $data['buildscratch_signup_label'] = esc_html__('Register', 'wp-user-avatar'); |
| 180 | $data['buildscratch_login_label'] = esc_html__('Login', 'wp-user-avatar'); |
| 181 | if ($this->form_type == FR::REGISTRATION_TYPE) { |
| 182 | $data['buildscratch_login_label'] = esc_html__("Have an account? Login", 'wp-user-avatar'); |
| 183 | } |
| 184 | |
| 185 | if ($this->form_type == FR::PASSWORD_RESET_TYPE) { |
| 186 | $data['buildscratch_login_label'] = esc_html__("Return to Login", 'wp-user-avatar'); |
| 187 | } |
| 188 | |
| 189 | $data['buildscratch_field_layout'] = 'round'; |
| 190 | $data['buildscratch_label_field_size'] = 'small'; |
| 191 | $data['buildscratch_label_field_icon_alignment'] = 'right'; |
| 192 | $data['buildscratch_field_icon_color'] = '#666666'; |
| 193 | $data['buildscratch_field_border_color'] = '#dbdbdb'; |
| 194 | $data['buildscratch_field_border_focus_color'] = '#999999'; |
| 195 | $data['buildscratch_field_bg_color'] = '#ffffff'; |
| 196 | $data['buildscratch_field_bg_focus_color'] = '#ffffff'; |
| 197 | |
| 198 | $data['buildscratch_label_color'] = '#444444'; |
| 199 | $data['buildscratch_label_font_size'] = '14'; |
| 200 | $data['buildscratch_label_font_weight'] = 'bold'; |
| 201 | $data['buildscratch_description_color'] = '#666666'; |
| 202 | $data['buildscratch_description_alignment'] = 'left'; |
| 203 | $data['buildscratch_field_value_font_size'] = '14'; |
| 204 | $data['buildscratch_field_value_color'] = '#69717a'; |
| 205 | $data['buildscratch_field_placeholder_color'] = '#999999'; |
| 206 | |
| 207 | $data['buildscratch_submit_button_layout'] = 'round'; |
| 208 | $data['buildscratch_submit_button_width'] = 'auto'; |
| 209 | $data['buildscratch_submit_button_font_size'] = '16'; |
| 210 | $data['buildscratch_submit_button_font_weight'] = 'bold'; |
| 211 | $data['buildscratch_submit_button_bg_color'] = '#000000'; |
| 212 | $data['buildscratch_submit_button_text_color'] = '#ffffff'; |
| 213 | $data['buildscratch_submit_button_bg_focus_color'] = '#dbdbdb'; |
| 214 | $data['buildscratch_submit_button_text_focus_color'] = '#000000'; |
| 215 | |
| 216 | return $data; |
| 217 | } |
| 218 | |
| 219 | public function appearance_settings($settings) |
| 220 | { |
| 221 | $settings[] = [ |
| 222 | 'id' => 'buildscratch_form_width', |
| 223 | 'type' => 'text', |
| 224 | 'label' => esc_html__('Width', 'wp-user-avatar'), |
| 225 | 'priority' => 10 |
| 226 | ]; |
| 227 | |
| 228 | $settings[] = [ |
| 229 | 'id' => 'buildscratch_form_bg_color', |
| 230 | 'type' => 'color', |
| 231 | 'label' => esc_html__('Background', 'wp-user-avatar'), |
| 232 | 'priority' => 20 |
| 233 | ]; |
| 234 | |
| 235 | $settings[] = [ |
| 236 | 'id' => 'buildscratch_form_font_family', |
| 237 | 'type' => 'font_family', |
| 238 | 'label' => esc_html__('Font Family', 'wp-user-avatar'), |
| 239 | 'priority' => 30 |
| 240 | ]; |
| 241 | |
| 242 | $settings[] = [ |
| 243 | 'id' => 'buildscratch_form_headline', |
| 244 | 'type' => 'text', |
| 245 | 'label' => esc_html__('Headline', 'wp-user-avatar'), |
| 246 | 'priority' => 35 |
| 247 | ]; |
| 248 | |
| 249 | if (in_array($this->form_type, [FR::LOGIN_TYPE])) { |
| 250 | $settings[] = [ |
| 251 | 'id' => 'buildscratch_forgot_password_label', |
| 252 | 'type' => 'text', |
| 253 | 'label' => esc_html__('Forgot Password Label', 'wp-user-avatar'), |
| 254 | 'priority' => 37 |
| 255 | ]; |
| 256 | } |
| 257 | |
| 258 | |
| 259 | if (in_array($this->form_type, [FR::LOGIN_TYPE])) { |
| 260 | $settings[] = [ |
| 261 | 'id' => 'buildscratch_signup_label', |
| 262 | 'type' => 'text', |
| 263 | 'label' => esc_html__('Sign Up Label', 'wp-user-avatar'), |
| 264 | 'priority' => 39 |
| 265 | ]; |
| 266 | } |
| 267 | |
| 268 | |
| 269 | if (in_array($this->form_type, [FR::REGISTRATION_TYPE, FR::PASSWORD_RESET_TYPE])) { |
| 270 | $settings[] = [ |
| 271 | 'id' => 'buildscratch_login_label', |
| 272 | 'type' => 'text', |
| 273 | 'label' => esc_html__('Login Label', 'wp-user-avatar'), |
| 274 | 'priority' => 39 |
| 275 | ]; |
| 276 | } |
| 277 | |
| 278 | if ($this->is_show_social_login()) { |
| 279 | |
| 280 | $settings[] = [ |
| 281 | 'id' => 'buildscratch_form_social_buttons', |
| 282 | 'type' => 'select2', |
| 283 | 'options' => [ |
| 284 | 'facebook' => esc_html__('Facebook', 'wp-user-avatar'), |
| 285 | 'twitter' => esc_html__('Twitter', 'wp-user-avatar'), |
| 286 | 'google' => esc_html__('Google', 'wp-user-avatar'), |
| 287 | 'linkedin' => esc_html__('LinkedIn', 'wp-user-avatar'), |
| 288 | 'github' => esc_html__('GitHub', 'wp-user-avatar'), |
| 289 | 'vk' => esc_html__('VK.com', 'wp-user-avatar') |
| 290 | ], |
| 291 | 'label' => esc_html__('Social Login Buttons', 'wp-user-avatar'), |
| 292 | 'priority' => 40 |
| 293 | ]; |
| 294 | } |
| 295 | |
| 296 | $settings[] = [ |
| 297 | 'id' => 'buildscratch_remove_form_frame', |
| 298 | 'type' => 'checkbox', |
| 299 | 'label' => esc_html__('Remove Form Frame', 'wp-user-avatar'), |
| 300 | 'checkbox_label' => esc_html__('Check to remove'), |
| 301 | 'priority' => 50 |
| 302 | ]; |
| 303 | |
| 304 | $settings[] = [ |
| 305 | 'id' => 'buildscratch_hide_required_asterisk', |
| 306 | 'type' => 'checkbox', |
| 307 | 'label' => sprintf(esc_html__('Hide Required %s'), '<span style="color:red">*</span>'), |
| 308 | 'checkbox_label' => esc_html__('Check to hide', 'wp-user-avatar'), |
| 309 | 'priority' => 60 |
| 310 | ]; |
| 311 | |
| 312 | return $settings; |
| 313 | } |
| 314 | |
| 315 | public function metabox_settings($settings, $form_type, $DragDropBuilderInstance) |
| 316 | { |
| 317 | $submit_button_settings = $settings['submit_button']; |
| 318 | unset($settings['submit_button']); |
| 319 | |
| 320 | $settings['buildscratch_field_styling'] = [ |
| 321 | 'tab_title' => esc_html__('Field & Styling', 'wp-user-avatar'), |
| 322 | [ |
| 323 | 'id' => 'buildscratch_field_layout', |
| 324 | 'type' => 'tab_radio', |
| 325 | 'options' => [ |
| 326 | 'round' => esc_html__('Round', 'wp-user-avatar'), |
| 327 | 'square' => esc_html__('Square', 'wp-user-avatar'), |
| 328 | 'pill' => esc_html__('Pill', 'wp-user-avatar'), |
| 329 | 'material' => esc_html__('Material', 'wp-user-avatar'), |
| 330 | 'flat' => esc_html__('Flat', 'wp-user-avatar'), |
| 331 | ], |
| 332 | 'tab_description' => $this->field_layout_description(), |
| 333 | 'label' => esc_html__('Layout', 'wp-user-avatar'), |
| 334 | 'priority' => 20 |
| 335 | ], |
| 336 | [ |
| 337 | 'id' => 'buildscratch_label_field_size', |
| 338 | 'type' => 'select', |
| 339 | 'options' => [ |
| 340 | 'small' => esc_html__('Small', 'wp-user-avatar'), |
| 341 | 'medium' => esc_html__('Medium', 'wp-user-avatar'), |
| 342 | 'large' => esc_html__('Large', 'wp-user-avatar'), |
| 343 | ], |
| 344 | 'label' => esc_html__('Field Size', 'wp-user-avatar'), |
| 345 | 'description' => esc_html__('Select the size (in height) of input and textarea form fields.', 'wp-user-avatar') |
| 346 | ], |
| 347 | [ |
| 348 | 'id' => 'buildscratch_field_icon_color', |
| 349 | 'type' => 'color', |
| 350 | 'label' => esc_html__('Icon', 'wp-user-avatar') |
| 351 | ], |
| 352 | [ |
| 353 | 'id' => 'buildscratch_label_field_icon_alignment', |
| 354 | 'type' => 'tab_radio', |
| 355 | 'options' => [ |
| 356 | 'left' => esc_html__('Left', 'wp-user-avatar'), |
| 357 | 'right' => esc_html__('Right', 'wp-user-avatar'), |
| 358 | ], |
| 359 | 'label' => esc_html__('Icon Alignment', 'wp-user-avatar') |
| 360 | ], |
| 361 | [ |
| 362 | 'id' => 'buildscratch_field_border_color', |
| 363 | 'type' => 'color', |
| 364 | 'label' => esc_html__('Border', 'wp-user-avatar') |
| 365 | ], |
| 366 | [ |
| 367 | 'id' => 'buildscratch_field_border_focus_color', |
| 368 | 'type' => 'color', |
| 369 | 'label' => esc_html__('Border on Focus', 'wp-user-avatar') |
| 370 | ], |
| 371 | [ |
| 372 | 'id' => 'buildscratch_field_bg_color', |
| 373 | 'type' => 'color', |
| 374 | 'label' => esc_html__('Background', 'wp-user-avatar') |
| 375 | ], |
| 376 | [ |
| 377 | 'id' => 'buildscratch_field_bg_focus_color', |
| 378 | 'type' => 'color', |
| 379 | 'label' => esc_html__('Background on Focus', 'wp-user-avatar') |
| 380 | ] |
| 381 | ]; |
| 382 | |
| 383 | $settings['buildscratch_labels_text'] = [ |
| 384 | // calling label title here in case in future when there is membership and the heading will have the same styling as label |
| 385 | // and any additional text will have same styling as description. |
| 386 | 'tab_title' => esc_html__('Labels & Text', 'wp-user-avatar'), |
| 387 | [ |
| 388 | 'id' => 'buildscratch_label_color', |
| 389 | 'type' => 'color', |
| 390 | 'label' => esc_html__('Title', 'wp-user-avatar') |
| 391 | ], |
| 392 | [ |
| 393 | 'id' => 'buildscratch_label_font_size', |
| 394 | 'type' => 'number', |
| 395 | 'label' => esc_html__('Title Font Size (px)', 'wp-user-avatar') |
| 396 | ], |
| 397 | [ |
| 398 | 'id' => 'buildscratch_label_font_weight', |
| 399 | 'type' => 'select', |
| 400 | 'options' => [ |
| 401 | 'normal' => esc_html__('Normal', 'wp-user-avatar'), |
| 402 | 'bold' => esc_html__('Bold', 'wp-user-avatar'), |
| 403 | ], |
| 404 | 'label' => esc_html__('Title Font Weight', 'wp-user-avatar') |
| 405 | ], |
| 406 | [ |
| 407 | 'id' => 'buildscratch_description_color', |
| 408 | 'type' => 'color', |
| 409 | 'label' => esc_html__('Description', 'wp-user-avatar') |
| 410 | ], |
| 411 | [ |
| 412 | 'id' => 'buildscratch_description_alignment', |
| 413 | 'type' => 'select', |
| 414 | 'options' => [ |
| 415 | 'left' => esc_html__('Left', 'wp-user-avatar'), |
| 416 | 'center' => esc_html__('Center', 'wp-user-avatar'), |
| 417 | 'right' => esc_html__('Right', 'wp-user-avatar'), |
| 418 | ], |
| 419 | 'label' => esc_html__('Description Alignment', 'wp-user-avatar') |
| 420 | ], |
| 421 | [ |
| 422 | 'id' => 'buildscratch_field_value_font_size', |
| 423 | 'type' => 'number', |
| 424 | 'label' => esc_html__('Value / Text Font Size', 'wp-user-avatar'), |
| 425 | 'description' => esc_html__('Font size in pixel (px) of field values and text on form.') |
| 426 | ], |
| 427 | [ |
| 428 | 'id' => 'buildscratch_field_value_color', |
| 429 | 'type' => 'color', |
| 430 | 'label' => esc_html__('Value / Text', 'wp-user-avatar'), |
| 431 | 'description' => esc_html__('Color of the value of a field and text on the form.') |
| 432 | ], |
| 433 | [ |
| 434 | 'id' => 'buildscratch_field_placeholder_color', |
| 435 | 'type' => 'color', |
| 436 | 'label' => esc_html__('Placeholder', 'wp-user-avatar') |
| 437 | ], |
| 438 | ]; |
| 439 | |
| 440 | $settings['submit_button'] = $submit_button_settings; |
| 441 | |
| 442 | return $settings; |
| 443 | } |
| 444 | |
| 445 | public function field_layout_description() |
| 446 | { |
| 447 | $placeholder = esc_html__('Name', 'wp-user-avatar'); |
| 448 | ob_start(); |
| 449 | ?> |
| 450 | <div class="ppmb-tab"><input type="text" placeholder="<?= $placeholder ?>" class="ppfl ppfl-round" readonly> |
| 451 | </div> |
| 452 | <div class="ppmb-tab"><input type="text" placeholder="<?= $placeholder ?>" class="ppfl ppfl-square" readonly> |
| 453 | </div> |
| 454 | <div class="ppmb-tab"><input type="text" placeholder="<?= $placeholder ?>" class="ppfl ppfl-pill" readonly> |
| 455 | </div> |
| 456 | <div class="ppmb-tab"><input type="text" placeholder="<?= $placeholder ?>" class="ppfl ppfl-material" readonly> |
| 457 | </div> |
| 458 | <div class="ppmb-tab"><input type="text" placeholder="<?= $placeholder ?>" class="ppfl ppfl-flat" readonly> |
| 459 | </div> |
| 460 | <?php |
| 461 | return ob_get_clean(); |
| 462 | } |
| 463 | |
| 464 | public function submit_button_layout_description() |
| 465 | { |
| 466 | $label = esc_html__('Submit', 'wp-user-avatar'); |
| 467 | ob_start(); |
| 468 | ?> |
| 469 | <div class="ppmb-tab"><input type="button" value="<?= $label ?>" class="ppfl ppfl-round" disabled=""></div> |
| 470 | <div class="ppmb-tab"><input type="button" value="<?= $label ?>" class="ppfl ppfl-square" disabled></div> |
| 471 | <div class="ppmb-tab"><input type="button" value="<?= $label ?>" class="ppfl ppfl-pill" disabled></div> |
| 472 | <div class="ppmb-tab"><input type="button" value="<?= $label ?>" class="ppfl ppfl-flat" disabled></div> |
| 473 | <?php |
| 474 | return ob_get_clean(); |
| 475 | } |
| 476 | |
| 477 | public function submit_button_settings($settings) |
| 478 | { |
| 479 | $settings[] = [ |
| 480 | 'id' => 'buildscratch_submit_button_layout', |
| 481 | 'type' => 'tab_radio', |
| 482 | 'options' => [ |
| 483 | 'round' => esc_html__('Round', 'wp-user-avatar'), |
| 484 | 'square' => esc_html__('Square', 'wp-user-avatar'), |
| 485 | 'pill' => esc_html__('Pill', 'wp-user-avatar') |
| 486 | ], |
| 487 | 'tab_description' => $this->submit_button_layout_description(), |
| 488 | 'label' => esc_html__('Layout', 'wp-user-avatar') |
| 489 | ]; |
| 490 | |
| 491 | $settings[] = [ |
| 492 | 'id' => 'buildscratch_submit_button_width', |
| 493 | 'type' => 'select', |
| 494 | 'options' => [ |
| 495 | 'auto' => esc_html__('Auto (Default)', 'wp-user-avatar'), |
| 496 | 'wide' => esc_html__('Wide', 'wp-user-avatar'), |
| 497 | 'full-width' => esc_html__('Full Stretched Width', 'wp-user-avatar') |
| 498 | ], |
| 499 | 'label' => esc_html__('Width', 'wp-user-avatar'), |
| 500 | ]; |
| 501 | |
| 502 | $settings[] = [ |
| 503 | 'id' => 'buildscratch_submit_button_font_size', |
| 504 | 'type' => 'number', |
| 505 | 'label' => esc_html__('Font Size (px)', 'wp-user-avatar') |
| 506 | ]; |
| 507 | |
| 508 | $settings[] = [ |
| 509 | 'id' => 'buildscratch_submit_button_font_weight', |
| 510 | 'type' => 'select', |
| 511 | 'options' => [ |
| 512 | 'normal' => esc_html__('Normal', 'wp-user-avatar'), |
| 513 | 'bold' => esc_html__('Bold', 'wp-user-avatar'), |
| 514 | ], |
| 515 | 'label' => esc_html__('Font Weight', 'wp-user-avatar') |
| 516 | ]; |
| 517 | |
| 518 | $settings[] = [ |
| 519 | 'id' => 'buildscratch_submit_button_bg_color', |
| 520 | 'type' => 'color', |
| 521 | 'label' => esc_html__('Background', 'wp-user-avatar') |
| 522 | ]; |
| 523 | |
| 524 | $settings[] = [ |
| 525 | 'id' => 'buildscratch_submit_button_bg_focus_color', |
| 526 | 'type' => 'color', |
| 527 | 'label' => esc_html__('Background on Focus', 'wp-user-avatar') |
| 528 | ]; |
| 529 | |
| 530 | $settings[] = [ |
| 531 | 'id' => 'buildscratch_submit_button_text_color', |
| 532 | 'type' => 'color', |
| 533 | 'label' => esc_html__('Text', 'wp-user-avatar') |
| 534 | ]; |
| 535 | |
| 536 | $settings[] = [ |
| 537 | 'id' => 'buildscratch_submit_button_text_focus_color', |
| 538 | 'type' => 'color', |
| 539 | 'label' => esc_html__('Text Focused', 'wp-user-avatar') |
| 540 | ]; |
| 541 | |
| 542 | return $settings; |
| 543 | } |
| 544 | |
| 545 | public function form_structure() |
| 546 | { |
| 547 | $headline = ''; |
| 548 | $saved_headline = $this->get_meta('buildscratch_form_headline'); |
| 549 | if ( ! empty($saved_headline)) { |
| 550 | $headline = '<div class="ppbs-headline">' . $saved_headline . '</div>'; |
| 551 | } |
| 552 | |
| 553 | $social_login_buttons = $this->social_login_buttons(); |
| 554 | |
| 555 | $fields = (new FieldListing($this->form_id, $this->form_type, true)) |
| 556 | ->defaults($this->default_fields_settings()) |
| 557 | ->shortcode_field_wrap_start('<div class="pp-form-field-input-textarea-wrap">') |
| 558 | ->shortcode_field_wrap_end('</div>') |
| 559 | ->forge(); |
| 560 | |
| 561 | $button = $this->form_submit_button(); |
| 562 | |
| 563 | $fl = 'ppfl-' . $this->get_meta('buildscratch_field_layout'); |
| 564 | $rf = $this->get_meta('buildscratch_remove_form_frame') == 'true' ? ' ppf-remove-frame' : ''; |
| 565 | $hra = $this->get_meta('buildscratch_hide_required_asterisk') == 'true' ? ' ppf-hide-asterisk' : ''; |
| 566 | |
| 567 | $fs = ' ppfs-' . $this->get_meta('buildscratch_label_field_size'); |
| 568 | $fia = ' ppfia-' . $this->get_meta('buildscratch_label_field_icon_alignment'); |
| 569 | |
| 570 | $sbl = ' ppsbl-' . $this->get_meta('buildscratch_submit_button_layout'); |
| 571 | $sbw = ' ppsbw-' . $this->get_meta('buildscratch_submit_button_width'); |
| 572 | |
| 573 | $form_link = $this->form_links(); |
| 574 | |
| 575 | return <<<HTML |
| 576 | [pp-form-wrapper class="ppBuildScratch {$fl}{$sbl}{$sbw}{$rf}{$hra}{$fs}{$fia}"] |
| 577 | $headline |
| 578 | $social_login_buttons |
| 579 | $fields |
| 580 | <div class="pp-form-submit-button-wrap"> |
| 581 | $button |
| 582 | </div> |
| 583 | [/pp-form-wrapper] |
| 584 | $form_link |
| 585 | HTML; |
| 586 | } |
| 587 | |
| 588 | public function form_links() |
| 589 | { |
| 590 | $forgot_password_link = ppress_password_reset_url(); |
| 591 | $signup_link = ppress_registration_url(); |
| 592 | $login_link = ppress_login_url(); |
| 593 | $forgot_password_label = $this->get_meta('buildscratch_forgot_password_label'); |
| 594 | $signup_label = $this->get_meta('buildscratch_signup_label'); |
| 595 | $login_label = $this->get_meta('buildscratch_login_label'); |
| 596 | |
| 597 | $login_form_link = $password_reset_form_link = $signup_form_link = ''; |
| 598 | |
| 599 | if ( ! empty($forgot_password_label) || ! empty($signup_label)) { |
| 600 | |
| 601 | $login_form_pipe = ! empty($forgot_password_label) && ! empty($signup_label) ? ' | ' : ''; |
| 602 | |
| 603 | $login_form_link = <<<HTML |
| 604 | <div class="ppress-form-bottom-links"> |
| 605 | <a href="$signup_link">$signup_label</a>$login_form_pipe<a href="$forgot_password_link">$forgot_password_label</a> |
| 606 | </div> |
| 607 | HTML; |
| 608 | } |
| 609 | |
| 610 | if ( ! empty($login_label)) { |
| 611 | $signup_form_link = <<<HTML |
| 612 | <div class="ppress-form-bottom-links"> |
| 613 | <a href="$login_link">$login_label</a> |
| 614 | </div> |
| 615 | HTML; |
| 616 | } |
| 617 | |
| 618 | if ( ! empty($login_label)) { |
| 619 | $password_reset_form_link = <<<HTML |
| 620 | <div class="ppress-form-bottom-links"> |
| 621 | <a href="$login_link">$login_label</a> |
| 622 | </div> |
| 623 | HTML; |
| 624 | } |
| 625 | |
| 626 | if ($this->form_type == FR::LOGIN_TYPE) return $login_form_link; |
| 627 | if ($this->form_type == FR::REGISTRATION_TYPE) return $signup_form_link; |
| 628 | if ($this->form_type == FR::PASSWORD_RESET_TYPE) return $password_reset_form_link; |
| 629 | |
| 630 | return ''; |
| 631 | |
| 632 | } |
| 633 | |
| 634 | public function form_css() |
| 635 | { |
| 636 | $form_id = $this->form_id; |
| 637 | $form_type = $this->form_type; |
| 638 | |
| 639 | $width = $this->get_meta('buildscratch_form_width'); |
| 640 | $form_bg_color = $this->get_meta('buildscratch_form_bg_color'); |
| 641 | $form_font_family = $this->get_meta('buildscratch_form_font_family'); |
| 642 | $form_font_family_plus_to_space = str_replace('+', ' ', $form_font_family); |
| 643 | $value_font_size = $this->get_meta('buildscratch_field_value_font_size'); |
| 644 | $field_icon_color = $this->get_meta('buildscratch_field_icon_color'); |
| 645 | $field_border_color = $this->get_meta('buildscratch_field_border_color'); |
| 646 | $field_border_focus_color = $this->get_meta('buildscratch_field_border_focus_color'); |
| 647 | $field_bg_color = $this->get_meta('buildscratch_field_bg_color'); |
| 648 | $field_bg_focus_color = $this->get_meta('buildscratch_field_bg_focus_color'); |
| 649 | $field_value_color = $this->get_meta('buildscratch_field_value_color'); |
| 650 | $field_placeholder_color = $this->get_meta('buildscratch_field_placeholder_color'); |
| 651 | $field_label_color = $this->get_meta('buildscratch_label_color'); |
| 652 | $field_label_font_size = $this->get_meta('buildscratch_label_font_size'); |
| 653 | $field_label_font_weight = $this->get_meta('buildscratch_label_font_weight'); |
| 654 | |
| 655 | $description_color = $this->get_meta('buildscratch_description_color'); |
| 656 | $description_alignment = $this->get_meta('buildscratch_description_alignment'); |
| 657 | |
| 658 | $submit_button_font_size = $this->get_meta('buildscratch_submit_button_font_size'); |
| 659 | $submit_button_font_weight = $this->get_meta('buildscratch_submit_button_font_weight'); |
| 660 | $submit_button_bg_color = $this->get_meta('buildscratch_submit_button_bg_color'); |
| 661 | $submit_button_bg_focus_color = $this->get_meta('buildscratch_submit_button_bg_focus_color'); |
| 662 | $submit_button_text_color = $this->get_meta('buildscratch_submit_button_text_color'); |
| 663 | $submit_button_text_focus_color = $this->get_meta('buildscratch_submit_button_text_focus_color'); |
| 664 | |
| 665 | $status_class = '.profilepress-reg-status'; |
| 666 | switch ($this->form_type) { |
| 667 | case FR::LOGIN_TYPE : |
| 668 | $status_class = '.profilepress-login-status'; |
| 669 | break; |
| 670 | case FR::PASSWORD_RESET_TYPE : |
| 671 | $status_class = '.profilepress-reset-status'; |
| 672 | break; |
| 673 | case FR::EDIT_PROFILE_TYPE : |
| 674 | $status_class = '.profilepress-edit-profile-status'; |
| 675 | break; |
| 676 | } |
| 677 | |
| 678 | return <<<CSS |
| 679 | @import url('https://fonts.googleapis.com/css?family={$form_font_family}:300,400,600,700&display=swap'); |
| 680 | |
| 681 | #pp-$form_type-$form_id-wrap $status_class { |
| 682 | border-radius: 5px; |
| 683 | font-size: 16px; |
| 684 | line-height: 1.471; |
| 685 | padding: 10px; |
| 686 | background-color: #e74c3c; |
| 687 | color: #ffffff; |
| 688 | font-weight: normal; |
| 689 | text-align: center; |
| 690 | vertical-align: middle; |
| 691 | margin: 10px 0; |
| 692 | -webkit-box-sizing: border-box; |
| 693 | -moz-box-sizing: border-box; |
| 694 | box-sizing: border-box; |
| 695 | max-width: 100%; |
| 696 | } |
| 697 | |
| 698 | #pp-$form_type-$form_id-wrap $status_class.success { |
| 699 | background-color: #2ecc71; |
| 700 | color: #ffffff; |
| 701 | } |
| 702 | |
| 703 | #pp-$form_type-$form_id-wrap $status_class a { |
| 704 | color: #fff; |
| 705 | text-decoration: underline; |
| 706 | } |
| 707 | |
| 708 | /* settings CSS */ |
| 709 | #pp-$form_type-$form_id-wrap.pp-form-container { |
| 710 | max-width: $width !important; |
| 711 | width: 100%; |
| 712 | margin: 0 auto; |
| 713 | } |
| 714 | |
| 715 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch { |
| 716 | background: $form_bg_color; |
| 717 | color: $field_value_color; |
| 718 | font-size: {$value_font_size}px; |
| 719 | } |
| 720 | |
| 721 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap .pp-form-field-input-textarea-wrap { |
| 722 | position: relative; |
| 723 | } |
| 724 | |
| 725 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch, |
| 726 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch * { |
| 727 | font-family: '$form_font_family_plus_to_space',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; |
| 728 | } |
| 729 | |
| 730 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap input, |
| 731 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap select, |
| 732 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap textarea { |
| 733 | font-size: {$value_font_size}px; |
| 734 | border-color: $field_border_color; |
| 735 | background: $field_bg_color; |
| 736 | color :$field_value_color; |
| 737 | } |
| 738 | |
| 739 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap .pp-form-material-icons { |
| 740 | color: $field_icon_color; |
| 741 | } |
| 742 | |
| 743 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-checkbox-wrap label, |
| 744 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-radio-wrap label { |
| 745 | font-size: {$value_font_size}px; |
| 746 | color :$field_value_color; |
| 747 | vertical-align: middle; |
| 748 | } |
| 749 | |
| 750 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap input[type=text]:focus, |
| 751 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap select:focus, |
| 752 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap textarea:focus { |
| 753 | outline: 0; |
| 754 | background: $field_bg_focus_color; |
| 755 | border-color: $field_border_focus_color; |
| 756 | box-shadow: 0 0 0 1px $field_border_focus_color; |
| 757 | } |
| 758 | |
| 759 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap ::placeholder{ |
| 760 | color: $field_placeholder_color; |
| 761 | } |
| 762 | |
| 763 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap ::-webkit-input-placeholder{ |
| 764 | color: $field_placeholder_color; |
| 765 | } |
| 766 | |
| 767 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap ::-moz-placeholder{ |
| 768 | color: $field_placeholder_color; |
| 769 | } |
| 770 | |
| 771 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap :-moz-placeholder{ |
| 772 | color: $field_placeholder_color; |
| 773 | } |
| 774 | |
| 775 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap :-ms-input-placeholder{ |
| 776 | color: $field_placeholder_color; |
| 777 | } |
| 778 | |
| 779 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .ppbs-headline, |
| 780 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch h1, |
| 781 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch h2, |
| 782 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch h3, |
| 783 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch { |
| 784 | color: $field_label_color; |
| 785 | } |
| 786 | |
| 787 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-wrap .pp-form-label-wrap .pp-form-label { |
| 788 | color: $field_label_color; |
| 789 | font-size: {$field_label_font_size}px; |
| 790 | font-weight: $field_label_font_weight; |
| 791 | } |
| 792 | |
| 793 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-field-description { |
| 794 | color: $description_color; |
| 795 | text-align: $description_alignment; |
| 796 | } |
| 797 | |
| 798 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-submit-button-wrap input[type="submit"] { |
| 799 | font-size: {$submit_button_font_size}px; |
| 800 | font-weight: $submit_button_font_weight; |
| 801 | background: $submit_button_bg_color; |
| 802 | color: $submit_button_text_color; |
| 803 | } |
| 804 | |
| 805 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-submit-button-wrap input[type="submit"]:hover, |
| 806 | .pp-form-container #pp-$form_type-$form_id.ppBuildScratch .pp-form-submit-button-wrap input[type="submit"]:focus { |
| 807 | background: $submit_button_bg_focus_color; |
| 808 | color: $submit_button_text_focus_color; |
| 809 | } |
| 810 | |
| 811 | .pp-form-container div#pp-$form_type-$form_id.ppBuildScratch a.pp-button-social-login { |
| 812 | margin-right: 6.387%; |
| 813 | } |
| 814 | |
| 815 | .pp-form-container div#pp-$form_type-$form_id.ppBuildScratch a.pp-button-social-login { |
| 816 | display: block; |
| 817 | height: 3em; |
| 818 | line-height: 3em; |
| 819 | text-decoration: none; |
| 820 | margin-bottom: 10px; |
| 821 | } |
| 822 | |
| 823 | .pp-form-container div#pp-$form_type-$form_id.ppBuildScratch a.pp-button-social-login .ppsc { |
| 824 | width: 3em; |
| 825 | height: 3em; |
| 826 | } |
| 827 | |
| 828 | .pp-form-container div#pp-$form_type-$form_id.ppBuildScratch a.pp-button-social-login span.ppsc-text { |
| 829 | margin-left: 50px; |
| 830 | } |
| 831 | |
| 832 | .pp-form-container div#pp-registration-12.ppBuildScratch a.pp-button-social-login:last-of-type { |
| 833 | margin-bottom: 20px; |
| 834 | } |
| 835 | |
| 836 | .pp-form-container .ppress-form-bottom-links { |
| 837 | padding-top: 15px; |
| 838 | padding-bottom: 15px; |
| 839 | text-align: center; |
| 840 | } |
| 841 | |
| 842 | .pp-form-container .ppress-form-bottom-links a { |
| 843 | line-height: 22px; |
| 844 | font-size: 14px; |
| 845 | color: $field_value_color !important; |
| 846 | display: inline-block; |
| 847 | text-decoration: none!important; |
| 848 | font-weight: 400; |
| 849 | text-align: center; |
| 850 | border-bottom: none!important; |
| 851 | } |
| 852 | |
| 853 | .pp-form-container .ppress-form-bottom-links a:hover { |
| 854 | text-decoration: underline!important; |
| 855 | } |
| 856 | CSS; |
| 857 | |
| 858 | } |
| 859 | } |