Changeset 3325824
- Timestamp:
- 07/10/2025 03:53:19 PM (9 months ago)
- Location:
- entries-display-for-wpforms/trunk
- Files:
-
- 8 edited
-
assets/css/admin.css (modified) (2 diffs)
-
assets/css/frontend.css (modified) (5 diffs)
-
assets/js/admin-settings.js (modified) (1 diff)
-
assets/js/admin.js (modified) (1 diff)
-
includes/admin-settings.php (modified) (12 diffs)
-
includes/shortcode.php (modified) (1 diff)
-
readme.txt (modified) (4 diffs)
-
wpforms-entries-display.php (modified) (5 diffs)
Legend:
- Unmodified
- Added
- Removed
-
entries-display-for-wpforms/trunk/assets/css/admin.css
r3264712 r3325824 1 /* Admin styles for WPForms Entries Display */ 1 /* 2 * Admin Styles for Entries Display for WPForms 3 * Version: 0.4 4 */ 5 6 :root { 7 --wpfed-bg-color: #f5f5f7; 8 --wpfed-card-bg: #ffffff; 9 --wpfed-text-color: #1d1d1f; 10 --wpfed-text-secondary: #6e6e73; 11 --wpfed-border-color: #d2d2d7; 12 --wpfed-accent-color: #007aff; 13 --wpfed-accent-color-hover: #0071e3; 14 --wpfed-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 15 --wpfed-border-radius: 12px; 16 --wpfed-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 17 --wpfed-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12); 18 } 19 20 body.settings_page_entries-display-for-wpforms { 21 background-color: var(--wpfed-bg-color); 22 } 23 2 24 .wpfed-admin-wrap { 3 margin: 20px 0 20px 10px; 4 color: #444; 5 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 6 } 7 8 .wpfed-admin-wrap h1 { 9 margin-left: 10px; 10 padding: 15px 0; 11 font-size: 23px; 12 font-weight: 400; 13 line-height: 1.3; 14 color: #23282d; 15 } 16 25 margin: 0; 26 font-family: var(--wpfed-font-family); 27 } 28 29 /* Header */ 30 .wpfed-admin-header { 31 background: var(--wpfed-card-bg); 32 padding: 20px 40px; 33 border-bottom: 1px solid var(--wpfed-border-color); 34 display: flex; 35 justify-content: space-between; 36 align-items: center; 37 margin: -20px -20px 25px -20px; 38 } 39 40 .wpfed-admin-header h1 { 41 font-size: 28px; 42 font-weight: 600; 43 color: var(--wpfed-text-color); 44 margin: 0; 45 } 46 47 /* Main Layout */ 17 48 .wpfed-admin-container { 18 49 display: flex; 19 50 flex-wrap: wrap; 20 margin-top: 20px; 21 gap: 25px; 22 } 23 24 /* Main settings area */ 51 gap: 30px; 52 padding: 0 20px; 53 } 54 25 55 .wpfed-admin-main { 26 56 flex: 1; 27 min-width: 500px; 28 max-width: 80%; 29 background: #fff; 30 border-radius: 8px; 31 box-shadow: 0 2px 8px rgba(0,0,0,0.08); 57 min-width: 550px; 58 background: transparent; 59 border-radius: 0; 60 box-shadow: none; 61 overflow: visible; 62 } 63 64 /* Settings Card */ 65 .wpfed-settings-card { 66 background: var(--wpfed-card-bg); 67 border-radius: var(--wpfed-border-radius); 68 box-shadow: var(--wpfed-shadow); 69 margin-bottom: 30px; 32 70 overflow: hidden; 33 } 34 35 /* Settings sections styling */ 36 .wpfed-settings-section { 37 border-bottom: 1px solid #eee; 38 padding: 0; 39 margin-bottom: 0; 40 } 41 42 .wpfed-settings-section:last-child { 71 transition: box-shadow 0.3s ease; 72 } 73 .wpfed-settings-card:hover { 74 box-shadow: var(--wpfed-shadow-hover); 75 } 76 77 .wpfed-settings-card-header { 78 padding: 20px 25px; 79 border-bottom: 1px solid var(--wpfed-border-color); 80 } 81 82 .wpfed-settings-card-header h2 { 83 font-size: 18px; 84 font-weight: 600; 85 margin: 0; 86 } 87 88 .wpfed-settings-card-header p { 89 font-size: 14px; 90 color: var(--wpfed-text-secondary); 91 margin: 5px 0 0; 92 } 93 94 .wpfed-settings-card-content { 95 padding: 25px; 96 } 97 98 /* Form Table Overhaul */ 99 .form-table { 100 border-collapse: collapse; 101 width: 100%; 102 } 103 .form-table tr { 104 border-bottom: 1px solid var(--wpfed-border-color); 105 } 106 .form-table tr:last-child { 43 107 border-bottom: none; 44 108 } 45 46 .wpfed-settings-section h2 { 47 background: #f8f9fa; 48 padding: 15px 20px; 49 margin: 0; 50 font-size: 16px; 51 font-weight: 600; 52 color: #23282d; 53 border-bottom: 1px solid #eee; 54 cursor: pointer; 55 position: relative; 56 transition: background 0.2s; 57 } 58 59 .wpfed-settings-section h2:hover { 60 background: #f0f0f1; 61 } 62 63 .wpfed-settings-section h2:after { 64 content: "\f140"; 65 font-family: dashicons; 66 position: absolute; 67 right: 20px; 68 color: #72777c; 69 font-size: 20px; 70 } 71 72 .wpfed-settings-section.closed h2:after { 73 content: "\f142"; 74 } 75 76 .wpfed-settings-section-content { 77 padding: 20px; 78 } 79 80 .wpfed-settings-section.closed .wpfed-settings-section-content { 81 display: none; 82 } 83 84 /* Form fields styling */ 85 .form-table { 86 margin-top: 0; 87 } 88 109 .form-table th, 110 .form-table td { 111 padding: 20px 0; 112 vertical-align: top; 113 text-align: left; 114 } 89 115 .form-table th { 90 padding: 20px 10px 20px 0; 91 width: 200px; 92 font-weight: 600; 93 color: #23282d; 94 } 95 96 .form-table td { 97 padding: 20px 10px; 98 vertical-align: top; 99 } 100 101 .form-table .description { 102 font-style: normal; 103 color: #666; 104 margin-top: 5px; 116 width: 220px; 117 font-weight: 500; 118 color: var(--wpfed-text-color); 119 padding-right: 20px; 120 } 121 .form-table p.description { 105 122 font-size: 13px; 106 } 107 108 /* Input fields styling */ 123 color: var(--wpfed-text-secondary); 124 margin-top: 8px; 125 } 126 127 /* Input & Select Styling */ 109 128 .wpfed-admin-wrap input[type="text"], 110 129 .wpfed-admin-wrap input[type="number"], 111 130 .wpfed-admin-wrap select { 112 border: 1px solid #ddd; 113 border-radius: 4px; 114 padding: 6px 8px; 115 box-shadow: inset 0 1px 2px rgba(0,0,0,.07); 116 background-color: #fff; 117 color: #32373c; 118 min-height: 30px; 119 height: auto; 131 width: 100%; 132 max-width: 350px; 133 background-color: #f0f0f0; 134 border: 1px solid transparent; 135 border-radius: 8px; 136 padding: 10px 12px; 137 font-size: 14px; 138 color: var(--wpfed-text-color); 139 transition: border-color 0.2s, box-shadow 0.2s; 140 } 141 .wpfed-admin-wrap .wp-picker-container input[type=text].wp-color-picker { 142 width: 100px; 143 padding-left: 35px; 144 } 145 .wpfed-admin-wrap .wp-picker-container .wp-color-result.button { 146 min-height: 35px; 147 border-radius: 8px; 148 border: 1px solid var(--wpfed-border-color); 149 background: var(--wpfed-card-bg); 150 } 151 .wpfed-admin-wrap .wp-picker-container .wp-color-result.button .wp-color-result-text { 152 display: none; 120 153 } 121 154 … … 123 156 .wpfed-admin-wrap input[type="number"]:focus, 124 157 .wpfed-admin-wrap select:focus { 125 border-color: #2271b1; 126 box-shadow: 0 0 0 1px #2271b1; 127 outline: 2px solid transparent; 128 } 129 130 /* Form field checkboxes */ 158 border-color: var(--wpfed-accent-color); 159 box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3); 160 outline: none; 161 background-color: var(--wpfed-card-bg); 162 } 163 164 /* Toggle Switch for Checkboxes */ 165 .wpfed-toggle-switch { 166 position: relative; 167 display: inline-block; 168 width: 50px; 169 height: 28px; 170 } 171 .wpfed-toggle-switch input { 172 opacity: 0; 173 width: 0; 174 height: 0; 175 } 176 .wpfed-toggle-slider { 177 position: absolute; 178 cursor: pointer; 179 top: 0; 180 left: 0; 181 right: 0; 182 bottom: 0; 183 background-color: #ccc; 184 transition: .4s; 185 border-radius: 28px; 186 } 187 .wpfed-toggle-slider:before { 188 position: absolute; 189 content: ""; 190 height: 22px; 191 width: 22px; 192 left: 3px; 193 bottom: 3px; 194 background-color: white; 195 transition: .4s; 196 border-radius: 50%; 197 } 198 input:checked + .wpfed-toggle-slider { 199 background-color: var(--wpfed-accent-color); 200 } 201 input:checked + .wpfed-toggle-slider:before { 202 transform: translateX(22px); 203 } 204 205 /* Fields Container */ 131 206 #wpfed_display_fields_container { 132 max-height: 2 00px;207 max-height: 220px; 133 208 overflow-y: auto; 134 border: 1px solid #ddd;209 border: 1px solid var(--wpfed-border-color); 135 210 padding: 15px; 136 background: #f9f9f9; 137 margin-bottom: 10px; 138 border-radius: 4px; 139 width: 70%; 140 max-width: 600px; 141 } 142 211 background: var(--wpfed-bg-color); 212 border-radius: 8px; 213 width: 100%; 214 max-width: 450px; 215 } 143 216 #wpfed_display_fields_container label { 144 217 display: block; 145 218 margin-bottom: 10px; 146 padding-bottom: 10px; 147 border-bottom: 1px solid #eee; 148 } 149 219 font-size: 14px; 220 } 150 221 #wpfed_display_fields_container label:last-child { 151 222 margin-bottom: 0; 152 padding-bottom: 0; 153 border-bottom: none; 154 } 155 156 /* Sidebar styling */ 223 } 224 225 /* Sidebar */ 157 226 .wpfed-admin-sidebar { 158 width: 350px; 227 width: 320px; 228 flex-shrink: 0; 229 position: relative; 230 } 231 232 /* Live Preview Widget - Floating Sticky from current position */ 233 .wpfed-preview-widget { 234 position: sticky !important; 235 top: 100px; 236 z-index: 10; 237 background: var(--wpfed-card-bg); 238 padding: 25px; 239 margin-bottom: 30px; 240 border-radius: var(--wpfed-border-radius); 241 box-shadow: var(--wpfed-shadow-hover) !important; 242 transition: box-shadow 0.3s ease; 243 border: 1px solid #6e6e73; 244 } 245 246 .wpfed-preview-widget:hover { 247 box-shadow: 0 8px 20px rgba(0, 122, 255, 0.2) !important; 248 } 249 250 /* Other sidebar widgets */ 251 .wpfed-sidebar-widget:not(.wpfed-preview-widget) { 252 background: var(--wpfed-card-bg); 253 padding: 25px; 254 margin-bottom: 30px; 255 border-radius: var(--wpfed-border-radius); 256 box-shadow: var(--wpfed-shadow); 257 transition: box-shadow 0.3s ease; 258 } 259 .wpfed-sidebar-widget { 260 background: var(--wpfed-card-bg); 261 padding: 25px; 262 margin-bottom: 30px; 263 border-radius: var(--wpfed-border-radius); 264 box-shadow: var(--wpfed-shadow); 265 transition: box-shadow 0.3s ease; 266 } 267 .wpfed-sidebar-widget:hover { 268 box-shadow: var(--wpfed-shadow-hover); 269 } 270 .wpfed-sidebar-widget h2 { 271 margin-top: 0; 159 272 margin-bottom: 20px; 160 } 161 162 .wpfed-shortcode-generator, 163 .wpfed-help-box, 164 .wpfed-preview-box { 165 background: #fff; 166 padding: 20px; 167 margin-bottom: 25px; 168 border-radius: 8px; 169 box-shadow: 0 2px 8px rgba(0,0,0,0.08); 170 } 171 172 .wpfed-shortcode-generator h2, 173 .wpfed-help-box h3, 174 .wpfed-preview-box h3 { 175 margin-top: 0; 176 padding-bottom: 12px; 177 margin-bottom: 15px; 178 border-bottom: 1px solid #eee; 179 font-size: 16px; 180 color: #23282d; 181 } 182 183 .wpfed-shortcode-option { 184 margin-bottom: 15px; 185 } 186 187 .wpfed-shortcode-option label { 188 display: block; 189 margin-bottom: 5px; 273 font-size: 18px; 190 274 font-weight: 600; 191 font-size: 13px; 192 } 193 194 /* Reduce width of input fields in sidebar */ 195 .wpfed-shortcode-option select, 196 .wpfed-shortcode-option input[type="text"], 197 .wpfed-shortcode-option input[type="number"] { 198 width: 100%; 199 max-width: 100%; 200 } 201 202 .wpfed-shortcode-option .description { 203 margin-top: 5px; 204 color: #666; 205 font-style: italic; 206 font-size: 12px; 207 } 208 209 .wpfed-shortcode-preview { 210 margin-top: 20px; 211 padding-top: 15px; 212 border-top: 1px solid #eee; 213 } 214 215 .wpfed-shortcode-result { 216 display: flex; 217 align-items: center; 218 background: #f5f5f5; 219 padding: 10px; 220 border-radius: 4px; 221 border: 1px solid #ddd; 222 } 223 224 .wpfed-shortcode-result code { 225 flex: 1; 226 padding: 5px; 227 background: transparent; 228 overflow-x: auto; 229 white-space: nowrap; 230 font-size: 13px; 231 } 232 233 #wpfed_copy_shortcode { 234 margin-left: 10px; 235 display: flex; 236 align-items: center; 237 background: #2271b1; 238 color: #fff; 239 border-color: #2271b1; 240 } 241 242 #wpfed_copy_shortcode:hover { 243 background: #135e96; 244 border-color: #135e96; 245 } 246 247 #wpfed_copy_shortcode .dashicons { 248 margin-right: 5px; 249 } 250 251 .wpfed-help-box p { 252 margin-bottom: 15px; 253 line-height: 1.5; 254 } 255 256 /* Custom date format styles */ 257 .wpfed-custom-date-format { 258 margin-top: 15px; 259 max-width: 300px; 260 } 261 262 .wpfed-custom-date-format label { 263 display: block; 264 margin-bottom: 5px; 265 } 266 267 .wpfed-custom-date-format input { 268 display: block; 269 margin-bottom: 8px; 270 width: 100%; 271 } 272 273 .wpfed-custom-date-format button { 274 display: block; 275 width: auto; 276 } 277 278 /* Fix for color options layout */ 279 .wpfed-colors-grid { 275 } 276 .wpfed-colors-grid, .wpfed-dimensions-grid { 280 277 display: grid; 281 grid-template-columns: repeat(2, 1fr); 282 gap: 15px; 283 margin-bottom: 15px; 284 } 285 286 .wpfed-color-option { 278 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 279 gap: 20px; 280 align-items: start; 281 } 282 .wpfed-color-option, .wpfed-dimension-option, .wpfed-effect-option { 287 283 display: flex; 288 284 flex-direction: column; 289 margin-bottom: 10px; 290 } 291 292 .wpfed-color-option label { 293 display: block; 285 } 286 .wpfed-color-option label, .wpfed-dimension-option label, .wpfed-effect-option label { 287 font-weight: 500; 294 288 margin-bottom: 8px; 295 font-weight: 600; 296 } 297 298 /* Color picker adjustments */ 299 .wp-picker-container { 300 display: inline-block; 301 margin-top: 5px; 302 vertical-align: middle; 303 } 304 305 .wp-picker-container .wp-color-result.button { 306 height: 30px; 307 min-height: 30px; 308 margin: 0 6px 0 0; 309 vertical-align: middle; 310 } 311 312 .wp-picker-container .wp-picker-input-wrap { 313 display: inline-flex !important; 314 align-items: center; 315 vertical-align: middle; 316 } 317 318 .wp-picker-container .wp-picker-input-wrap label { 319 display: none; /* Скрываем ненужную метку */ 320 } 321 322 .wp-picker-container .wp-picker-input-wrap input[type="text"] { 323 width: 65px; 324 height: 30px; 325 margin-right: 5px; 326 vertical-align: middle; 327 } 328 329 .wp-picker-container .wp-picker-clear { 330 height: 30px; 331 line-height: 28px; 332 vertical-align: middle; 333 margin-top: 0; 334 } 335 336 /* Fix for dimensions and effects layout */ 337 .wpfed-dimensions-grid { 338 display: grid; 339 grid-template-columns: 1fr; 340 gap: 10px; 341 margin-bottom: 15px; 342 } 343 344 .wpfed-dimension-option, 345 .wpfed-effect-option { 346 margin-bottom: 10px; /* Уменьшаем отступ снизу */ 347 } 348 349 .wpfed-dimension-option label, 350 .wpfed-effect-option label { 351 display: block; 289 font-size: 14px; 290 } 291 .wpfed-shortcode-option label { 292 font-weight: 500; 293 font-size: 14px; 352 294 margin-bottom: 8px; 353 font-weight: 600; 354 } 355 356 .wpfed-dimension-option select, 357 .wpfed-effect-option select { 358 width: 100%; 359 max-width: 300px; 360 } 361 362 .wpfed-dimension-option .description, 363 .wpfed-effect-option .description { 364 display: block; 365 margin-top: 8px; 366 color: #666; 367 font-style: italic; 368 margin-top: 4px; /* Уменьшаем отступ сверху для описания */ 369 margin-bottom: 0; /* Убираем отступ снизу для описания */ 370 font-size: 12px; /* Уменьшаем размер шрифта */ 371 } 372 373 /* Submit button styling */ 374 .wpfed-admin-main .submit { 375 padding: 15px 20px; 376 margin-top: 0; 377 background: #f8f9fa; 378 border-top: 1px solid #eee; 379 } 380 381 .wpfed-admin-main .submit .button-primary { 382 background: #2271b1; 383 border-color: #2271b1; 384 color: #fff; 385 text-shadow: none; 386 padding: 5px 15px; 387 height: auto; 388 min-height: 32px; 389 line-height: 2.30769231; 295 } 296 297 /* Shortcode Result */ 298 .wpfed-shortcode-result { 299 background: var(--wpfed-bg-color); 300 border-radius: 8px; 301 padding: 15px; 302 position: relative; 303 } 304 .wpfed-shortcode-result code { 305 font-family: "SF Mono", "Menlo", "Consolas", monospace; 390 306 font-size: 13px; 391 } 392 393 .wpfed-admin-main .submit .button-primary:hover { 394 background: #135e96; 395 border-color: #135e96; 396 } 397 398 /* Live Preview Styles */ 399 .wpfed-preview-section { 400 margin-top: 20px; 401 } 402 307 white-space: pre-wrap; 308 word-break: break-all; 309 color: var(--wpfed-text-secondary); 310 } 311 #wpfed_copy_shortcode { 312 position: absolute; 313 top: 10px; 314 right: 10px; 315 background: var(--wpfed-accent-color); 316 color: white; 317 border: none; 318 border-radius: 6px; 319 padding: 5px 10px; 320 cursor: pointer; 321 transition: background-color 0.2s; 322 } 323 #wpfed_copy_shortcode:hover { 324 background: var(--wpfed-accent-color-hover); 325 } 326 #wpfed_copy_shortcode .dashicons { 327 font-size: 16px; 328 line-height: 1.5; 329 } 330 331 /* Live Preview */ 403 332 .wpfed-live-preview { 404 max-width: 600px; /* Ограничиваем максимальную ширину */ 405 margin: 20px auto; /* Центрируем и добавляем отступы сверху и снизу */ 406 padding: var(--preview-padding, 15px); 407 border-radius: var(--preview-border-radius, 5px); 333 padding: var(--preview-padding, 20px); 334 border-radius: var(--preview-border-radius, 8px); 408 335 background-color: var(--preview-bg-color, #f9f9f9); 409 336 border: 1px solid var(--preview-border-color, #e0e0e0); 410 337 color: var(--preview-text-color, #333333); 411 338 box-shadow: var(--preview-box-shadow, 0 2px 5px rgba(0,0,0,0.1)); 412 } 413 414 .wpfed-preview-container { 415 padding: 20px; 416 background: #f0f0f0; 417 border-radius: 8px; 418 } 419 339 transition: all 0.3s ease; 340 font-size: 14px; 341 } 420 342 .wpfed-preview-entry-header { 421 343 margin-bottom: 15px; 422 344 color: var(--preview-header-color, #444444); 423 345 font-weight: 600; 424 } 425 346 font-size: 13px; 347 opacity: 0.8; 348 } 426 349 .wpfed-preview-field { 427 350 margin-bottom: 10px; 428 padding-bottom: 10px; 429 border-bottom: 1px dotted #eee; 430 } 431 432 .wpfed-preview-field:last-child { 433 margin-bottom: 0; 434 padding-bottom: 0; 435 border-bottom: none; 436 } 437 351 } 438 352 .wpfed-preview-label { 439 353 font-weight: 600; 440 margin-right: 5px; 441 } 442 354 color: var(--preview-header-color, #444444); 355 } 356 357 /* Submit Button */ 358 .wpfed-admin-main .submit { 359 padding: 20px 25px; 360 background: var(--wpfed-card-bg); 361 border-top: 1px solid var(--wpfed-border-color); 362 margin-top: -30px; /* Pull it up to the card */ 363 border-radius: 0 0 var(--wpfed-border-radius) var(--wpfed-border-radius); 364 } 365 .wpfed-admin-main .button-primary { 366 background: var(--wpfed-accent-color); 367 border-color: var(--wpfed-accent-color); 368 padding: 8px 20px; 369 height: auto; 370 font-size: 15px; 371 font-weight: 500; 372 border-radius: 8px; 373 transition: background-color 0.2s, border-color 0.2s; 374 } 375 .wpfed-admin-main .button-primary:hover { 376 background: var(--wpfed-accent-color-hover); 377 border-color: var(--wpfed-accent-color-hover); 378 } 379 380 /* Typography Controls */ 381 .wpfed-typography-controls { 382 display: grid; 383 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 384 gap: 15px; 385 align-items: start; 386 } 387 388 .wpfed-typography-control { 389 display: flex; 390 flex-direction: column; 391 } 392 393 .wpfed-typography-control label { 394 font-weight: 500; 395 margin-bottom: 8px; 396 font-size: 14px; 397 color: var(--wpfed-text-color); 398 } 399 400 .wpfed-typography-control select { 401 width: 100%; 402 max-width: none; 403 background-color: #f0f0f0; 404 border: 1px solid transparent; 405 border-radius: 8px; 406 padding: 8px 10px; 407 font-size: 13px; 408 color: var(--wpfed-text-color); 409 transition: border-color 0.2s, box-shadow 0.2s; 410 } 411 412 .wpfed-typography-control select:focus { 413 border-color: var(--wpfed-accent-color); 414 box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3); 415 outline: none; 416 background-color: var(--wpfed-card-bg); 417 } 418 419 /* Typography preview enhancement */ 420 .wpfed-preview-date { 421 font-size: var(--preview-date-font-size, 13px) !important; 422 font-weight: var(--preview-date-font-weight, 600) !important; 423 font-style: var(--preview-date-font-style, normal) !important; 424 } 425 426 .wpfed-preview-label, 443 427 .wpfed-preview-value { 444 display: inline; 445 } 446 447 /* Responsive adjustments */ 448 @media screen and (max-width: 782px) { 428 font-size: var(--preview-content-font-size, 14px) !important; 429 font-weight: var(--preview-content-font-weight, normal) !important; 430 font-style: var(--preview-content-font-style, normal) !important; 431 } 432 433 /* Color picker improvements */ 434 .wpfed-color-picker { 435 width: 100px !important; 436 max-width: 100px !important; 437 } 438 439 /* Responsive */ 440 @media screen and (max-width: 1200px) { 449 441 .wpfed-admin-container { 450 442 flex-direction: column; 451 443 } 452 453 .wpfed-admin-main { 454 margin-right: 0; 455 margin-bottom: 20px; 444 .wpfed-admin-main, .wpfed-admin-sidebar { 445 width: 100%; 446 max-width: 100%; 456 447 min-width: auto; 457 448 } 458 459 .wpfed-admin-sidebar { 449 } 450 @media screen and (max-width: 782px) { 451 .form-table th, .form-table td { 452 display: block; 460 453 width: 100%; 461 }462 454 padding: 10px 0; 455 } 463 456 .form-table th { 464 width: 100%; 465 display: block; 466 padding-bottom: 0; 467 } 468 469 .form-table td { 470 width: 100%; 471 display: block; 472 padding-top: 5px; 473 padding-bottom: 10px; 474 } 475 476 .wpfed-colors-grid, 477 .wpfed-dimensions-grid { 478 grid-template-columns: 1fr; 479 } 480 } 457 padding-bottom: 5px; 458 } 459 .wpfed-admin-header { 460 padding: 15px 20px; 461 margin-left: -10px; 462 } 463 .wpfed-admin-header h1 { 464 font-size: 22px; 465 } 466 .wpfed-admin-container { 467 padding: 0 10px; 468 } 469 } -
entries-display-for-wpforms/trunk/assets/css/frontend.css
r3264712 r3325824 1 /* Base styles for WPForms Entries Display */ 2 .wpfed-wrapper { 3 width: 100%; 4 max-width: 100%; 5 margin-bottom: 20px; 6 box-sizing: border-box; 7 } 1 /* 2 * Frontend Styles for Entries Display for WPForms 3 * This file uses CSS variables that are dynamically generated in WPFED_Shortcode::generate_custom_css() 4 */ 8 5 9 /* Base styles for WPForms Entries Display */6 /* Base container for the entries display */ 10 7 .wpfed-comments-container { 11 8 width: 100%; … … 15 12 } 16 13 14 /* Individual entry item */ 17 15 .wpfed-comment { 16 background-color: var(--wpfed-bg-color); 17 color: var(--wpfed-text-color); 18 border: 1px solid var(--wpfed-border-color); 19 border-radius: var(--wpfed-border-radius); 20 padding: var(--wpfed-padding); 18 21 margin-bottom: 20px; 22 box-shadow: var(--wpfed-box-shadow); 19 23 overflow: hidden; 20 24 } … … 24 28 } 25 29 26 .wpfed-comment-date { 27 font-size: 0.9em; 30 /* Header section wrapper */ 31 .wpfed-comment-header { 28 32 margin-bottom: 10px; 29 33 } 30 34 35 /* Header section of an entry, containing date */ 36 .wpfed-comment-date { 37 font-size: var(--wpfed-date-font-size, 0.9em); 38 font-weight: var(--wpfed-date-font-weight, bold); 39 font-style: var(--wpfed-date-font-style, normal); 40 color: var(--wpfed-header-color); 41 margin-bottom: 5px; 42 } 43 44 /* Username display as separate field */ 45 .wpfed-username { 46 font-size: var(--wpfed-username-font-size, 0.9em); 47 font-weight: var(--wpfed-username-font-weight, bold); 48 font-style: var(--wpfed-username-font-style, normal); 49 color: var(--wpfed-header-color); 50 margin-bottom: 5px; 51 } 52 53 /* Main content area of an entry with vertical alignment */ 31 54 .wpfed-comment-content { 32 55 overflow: hidden; 56 display: flex; 57 flex-direction: column; 58 min-height: 50px; /* Minimum height for alignment to be visible */ 33 59 } 34 60 61 /* Individual field-value pair */ 35 62 .wpfed-comment-field { 36 63 margin-bottom: 8px; … … 41 68 } 42 69 70 /* Field label (e.g., "Name:") */ 43 71 .wpfed-field-label { 44 font-weight: bold; 72 font-size: var(--wpfed-content-font-size, 1em); 73 font-weight: var(--wpfed-content-font-weight, bold); 74 font-style: var(--wpfed-content-font-style, normal); 75 color: var(--wpfed-header-color); 45 76 } 46 77 78 /* Field value */ 47 79 .wpfed-field-value { 80 font-size: var(--wpfed-content-font-size, 1em); 81 font-weight: var(--wpfed-content-font-weight, normal); 82 font-style: var(--wpfed-content-font-style, normal); 48 83 word-break: break-word; 49 84 } 50 85 86 /* Error messages and "no entries" notice */ 51 87 .wpfed-error, 52 88 .wpfed-no-entries { 53 89 padding: 15px; 54 90 margin-bottom: 20px; 55 border-radius: 4px;91 border-radius: var(--wpfed-border-radius); 56 92 } 57 93 … … 62 98 } 63 99 64 /* Additional styles will be added inline via PHP */ 100 .wpfed-no-entries { 101 background-color: var(--wpfed-bg-color); 102 border: 1px solid var(--wpfed-border-color); 103 text-align: center; 104 } -
entries-display-for-wpforms/trunk/assets/js/admin-settings.js
r3264712 r3325824 1 1 jQuery(document).ready(function($) { 2 $("#wpfed_form_id").on("change", function() { 3 var formId = $(this).val(); 4 if (formId) { 5 $.ajax({ 6 url: wpfed_admin_vars.ajaxurl, 7 type: "POST", 8 data: { 9 action: "wpfed_get_form_fields", 10 form_id: formId, 11 nonce: wpfed_admin_vars.nonce 12 }, 13 success: function(response) { 14 $("#wpfed_display_fields_container").html(response); 15 // Update shortcode generator 16 updateShortcodePreview(); 2 // Function to fetch and display form fields 3 function loadFormFields(formId) { 4 var container = $('#wpfed_display_fields_container'); 5 var selectedFields = container.find('input:checked').map(function() { 6 return this.value; 7 }).get(); 8 9 if (!formId) { 10 container.html('<p>' + wpfed_admin_vars.select_form_text + '</p>'); 11 return; 12 } 13 14 container.html('<p>Loading fields...</p>'); 15 16 $.ajax({ 17 url: wpfed_admin_vars.ajaxurl, 18 type: 'POST', 19 data: { 20 action: 'wpfed_get_form_fields', 21 form_id: formId, 22 nonce: wpfed_admin_vars.nonce 23 }, 24 success: function(response) { 25 container.empty(); 26 if (response.success) { 27 $.each(response.data, function(index, field) { 28 var checked = $.inArray(field.id, selectedFields) !== -1 ? 'checked' : ''; 29 var checkbox = '<label><input type="checkbox" name="wpfed_options[display_fields][]" value="' + field.id + '" ' + checked + ' class="wpfed-field-checkbox"> ' + field.label + ' (ID: ' + field.id + ')</label><br>'; 30 container.append(checkbox); 31 }); 32 } else { 33 container.html('<p>' + response.data + '</p>'); 17 34 } 18 }); 19 } else { 20 $("#wpfed_display_fields_container").html("<p>" + wpfed_admin_vars.select_form_text + "</p>"); 21 // Update shortcode generator 22 updateShortcodePreview(); 23 } 35 }, 36 error: function() { 37 container.html('<p>An error occurred while fetching fields.</p>'); 38 } 39 }); 40 } 41 42 // Initial load of form fields if a form is pre-selected 43 var initialFormId = $('#wpfed_form_id').val(); 44 if (initialFormId) { 45 loadFormFields(initialFormId); 46 } 47 48 // Handle form selection change 49 $('#wpfed_form_id').on('change', function() { 50 loadFormFields($(this).val()); 24 51 }); 25 52 }); -
entries-display-for-wpforms/trunk/assets/js/admin.js
r3264712 r3325824 1 1 jQuery(document).ready(function($) { 2 // Initialize accordion sections for better organization 3 $('.wpfed-settings-section h2').on('click', function() { 4 $(this).parent().toggleClass('closed'); 5 }); 6 7 // Initialize color pickers with a change event to update both shortcode and live preview 2 // Initialize color pickers 8 3 $('.wpfed-color-picker').wpColorPicker({ 9 change: function( ) {10 // Use a timeout to wait for the color change to apply before updating4 change: function(event, ui) { 5 // Use a timeout to ensure the color value is updated before triggering our functions 11 6 setTimeout(function() { 12 updateShortcodePreview();13 7 updateLivePreview(); 14 }, 100); 8 updateShortcodePreview(); // Also update shortcode if styles are params 9 }, 10); 10 }, 11 clear: function() { 12 updateLivePreview(); 13 updateShortcodePreview(); 15 14 } 16 15 }); 17 18 // Update live preview when style settings change 19 $('#wpfed_border_radius, #wpfed_padding, #wpfed_box_shadow, #wpfed_show_date, #wpfed_show_username, #wpfed_hide_field_labels').on('change', function() { 16 17 // --- Live Preview Updater --- 18 function updateLivePreview() { 19 const $preview = $('.wpfed-live-preview'); 20 if (!$preview.length) return; 21 22 // Style settings 23 const styles = { 24 '--preview-bg-color': $('#wpfed_background_color').val() || '#ffffff', 25 '--preview-border-color': $('#wpfed_border_color').val() || '#d2d2d7', 26 '--preview-text-color': $('#wpfed_text_color').val() || '#1d1d1f', 27 '--preview-header-color': $('#wpfed_header_color').val() || '#6e6e73', 28 '--preview-border-radius': $('#wpfed_border_radius').val() || '12px', 29 '--preview-padding': $('#wpfed_padding').val() || '20px', 30 '--preview-box-shadow': $('#wpfed_box_shadow').val() || 'none', 31 // Updated typography settings for all field types 32 '--preview-date-font-size': $('#wpfed_date_font_size').val() || '14px', 33 '--preview-date-font-weight': $('#wpfed_date_font_weight').val() || 'bold', 34 '--preview-date-font-style': $('#wpfed_date_font_style').val() || 'normal', 35 '--preview-username-font-size': $('#wpfed_username_font_size').val() || '14px', 36 '--preview-username-font-weight': $('#wpfed_username_font_weight').val() || 'bold', 37 '--preview-username-font-style': $('#wpfed_username_font_style').val() || 'normal', 38 '--preview-email-font-size': $('#wpfed_email_font_size').val() || '14px', 39 '--preview-email-font-weight': $('#wpfed_email_font_weight').val() || 'normal', 40 '--preview-email-font-style': $('#wpfed_email_font_style').val() || 'normal', 41 '--preview-field-labels-font-size': $('#wpfed_field_labels_font_size').val() || '14px', 42 '--preview-field-labels-font-weight': $('#wpfed_field_labels_font_weight').val() || 'bold', 43 '--preview-field-labels-font-style': $('#wpfed_field_labels_font_style').val() || 'normal', 44 '--preview-comment-font-size': $('#wpfed_comment_font_size').val() || '16px', 45 '--preview-comment-font-weight': $('#wpfed_comment_font_weight').val() || 'normal', 46 '--preview-comment-font-style': $('#wpfed_comment_font_style').val() || 'normal', 47 }; 48 $preview.css(styles); 49 50 // Apply typography to specific preview elements with !important 51 $('.wpfed-preview-date').css({ 52 'font-size': styles['--preview-date-font-size'] + ' !important', 53 'font-weight': styles['--preview-date-font-weight'] + ' !important', 54 'font-style': styles['--preview-date-font-style'] + ' !important' 55 }); 56 57 $('.wpfed-preview-username').css({ 58 'font-size': styles['--preview-username-font-size'] + ' !important', 59 'font-weight': styles['--preview-username-font-weight'] + ' !important', 60 'font-style': styles['--preview-username-font-style'] + ' !important' 61 }); 62 63 $('.wpfed-preview-label').css({ 64 'font-size': styles['--preview-field-labels-font-size'] + ' !important', 65 'font-weight': styles['--preview-field-labels-font-weight'] + ' !important', 66 'font-style': styles['--preview-field-labels-font-style'] + ' !important' 67 }); 68 69 // Apply different styles to different field types in preview 70 $('.wpfed-preview-field.email .wpfed-preview-value').css({ 71 'font-size': styles['--preview-email-font-size'] + ' !important', 72 'font-weight': styles['--preview-email-font-weight'] + ' !important', 73 'font-style': styles['--preview-email-font-style'] + ' !important' 74 }); 75 76 $('.wpfed-preview-field.comment .wpfed-preview-value').css({ 77 'font-size': styles['--preview-comment-font-size'] + ' !important', 78 'font-weight': styles['--preview-comment-font-weight'] + ' !important', 79 'font-style': styles['--preview-comment-font-style'] + ' !important' 80 }); 81 82 $('.wpfed-preview-field.general .wpfed-preview-value').css({ 83 'font-size': styles['--preview-comment-font-size'] + ' !important', 84 'font-weight': styles['--preview-comment-font-weight'] + ' !important', 85 'font-style': styles['--preview-comment-font-style'] + ' !important' 86 }); 87 88 // Display settings (for toggles) 89 $('.wpfed-preview-date').parent().toggle($('input[name="wpfed_options[show_date]"]').is(':checked')); 90 $('.wpfed-preview-username').parent().toggle($('input[name="wpfed_options[show_username]"]').is(':checked')); 91 $('.wpfed-preview-label').toggle(!$('input[name="wpfed_options[hide_field_labels]"]').is(':checked')); 92 } 93 94 // --- Shortcode Generator --- 95 function updateShortcodePreview() { 96 let shortcode = '[wpforms_entries_display'; 97 const params = {}; 98 99 // Collect values from shortcode generator fields 100 $('.wpfed-sc-param').each(function() { 101 const $field = $(this); 102 const attr = $field.attr('id').replace('wpfed_sc_', ''); 103 let value = $field.val(); 104 105 if (value) { 106 params[attr] = value; 107 } 108 }); 109 110 for (const [attr, value] of Object.entries(params)) { 111 shortcode += ` ${attr}="${value}"`; 112 } 113 114 shortcode += ']'; 115 $('#wpfed_shortcode_result').text(shortcode); 116 } 117 118 // --- Event Handlers --- 119 120 // Trigger updates on any setting change 121 $('.wpfed-admin-main input, .wpfed-admin-main select').on('change', function() { 20 122 updateLivePreview(); 21 123 }); 22 23 /** 24 * Update the live preview based on current settings 25 */ 26 function updateLivePreview() { 27 var $preview = $('.wpfed-live-preview'); 28 29 // Get current style settings 30 var bgColor = $('#wpfed_background_color').val() || '#f9f9f9'; 31 var borderColor = $('#wpfed_border_color').val() || '#e0e0e0'; 32 var textColor = $('#wpfed_text_color').val() || '#333333'; 33 var headerColor = $('#wpfed_header_color').val() || '#444444'; 34 var borderRadius = $('#wpfed_border_radius').val() || '5px'; 35 var padding = $('#wpfed_padding').val() || '15px'; 36 var boxShadow = $('#wpfed_box_shadow').val() || '0 2px 5px rgba(0,0,0,0.1)'; 37 38 // Update CSS variables for the preview 39 $preview.css({ 40 '--preview-bg-color': bgColor, 41 '--preview-border-color': borderColor, 42 '--preview-text-color': textColor, 43 '--preview-header-color': headerColor, 44 '--preview-border-radius': borderRadius, 45 '--preview-padding': padding, 46 '--preview-box-shadow': boxShadow 124 125 // Trigger shortcode update on generator field change 126 $('.wpfed-sc-param').on('change keyup', updateShortcodePreview); 127 128 // Copy shortcode to clipboard 129 $('#wpfed_copy_shortcode').on('click', function() { 130 const shortcodeText = $('#wpfed_shortcode_result').text(); 131 const $button = $(this); 132 const originalHtml = $button.html(); 133 134 navigator.clipboard.writeText(shortcodeText).then(() => { 135 $button.html('<span class="dashicons dashicons-yes-alt"></span> Copied'); 136 setTimeout(() => $button.html(originalHtml), 2000); 137 }).catch(() => { 138 $button.html('<span class="dashicons dashicons-dismiss"></span> Failed'); 139 setTimeout(() => $button.html(originalHtml), 2000); 47 140 }); 48 49 // Update display settings 50 var showDate = $('#wpfed_show_date').val() === 'yes'; 51 var showUsername = $('#wpfed_show_username').val() === 'yes'; 52 var hideLabels = $('#wpfed_hide_field_labels').val() === 'yes'; 53 54 // Toggle visibility based on settings 55 $('.wpfed-preview-date').parent().toggle(showDate); 56 $('.wpfed-preview-user').parent().toggle(showUsername); 57 $('.wpfed-preview-label').toggle(!hideLabels); 58 } 59 60 // Function to generate and update the shortcode preview 61 function updateShortcodePreview() { 62 var shortcode = '[wpforms_entries_display'; 63 64 // Check and append attributes to the shortcode based on user selections 65 66 // Show username option 67 var showUsername = $('#wpfed_sc_show_username').val(); 68 if (showUsername) { 69 shortcode += ' show_username="' + showUsername + '"'; 141 }); 142 143 // AJAX to get form fields for the default settings 144 $('#wpfed_form_id').on('change', function() { 145 const formId = $(this).val(); 146 const $container = $('#wpfed_display_fields_container'); 147 148 if (!formId) { 149 $container.html(`<p>${wpfed_admin_vars.select_form_text}</p>`); 150 return; 70 151 } 71 152 72 // Hide field labels option 73 var hideFieldLabels = $('#wpfed_sc_hide_field_labels').val(); 74 if (hideFieldLabels) { 75 shortcode += ' hide_field_labels="' + hideFieldLabels + '"'; 76 } 77 78 // Hide empty fields option 79 var hideEmptyFields = $('#wpfed_sc_hide_empty_fields').val(); 80 if (hideEmptyFields) { 81 shortcode += ' hide_empty_fields="' + hideEmptyFields + '"'; 82 } 83 84 // Form ID 85 var formId = $('#wpfed_sc_form_id').val(); 86 if (formId) { 87 shortcode += ' id="' + formId + '"'; 88 } 89 90 // Fields 91 var fields = $('#wpfed_sc_fields').val(); 92 if (fields) { 93 shortcode += ' fields="' + fields + '"'; 94 } 95 96 // Number of entries 97 var number = $('#wpfed_sc_number').val(); 98 if (number) { 99 shortcode += ' number="' + number + '"'; 100 } 101 102 // User 103 var user = $('#wpfed_sc_user').val(); 104 if (user) { 105 shortcode += ' user="' + user + '"'; 106 } 107 108 // Type 109 var type = $('#wpfed_sc_type').val(); 110 if (type && type !== 'all') { 111 shortcode += ' type="' + type + '"'; 112 } 113 114 // Sort field 115 var sort = $('#wpfed_sc_sort').val(); 116 if (sort) { 117 shortcode += ' sort="' + sort + '"'; 118 } 119 120 // Order of sorting 121 var order = $('#wpfed_sc_order').val(); 122 if (order && order !== 'asc') { 123 shortcode += ' order="' + order + '"'; 124 } 125 126 // Show date 127 var showDate = $('#wpfed_sc_show_date').val(); 128 if (showDate) { 129 shortcode += ' show_date="' + showDate + '"'; 130 } 131 132 // Date format 133 var dateFormat = $('#wpfed_sc_date_format').val(); 134 if (dateFormat) { 135 shortcode += ' date_format="' + dateFormat + '"'; 136 } 137 138 shortcode += ']'; 139 140 // Update the displayed shortcode for user reference 141 $('#wpfed_shortcode_result').text(shortcode); 142 } 143 144 // Automatically update the shortcode when any of the parameters change 145 $('.wpfed-sc-param').on('change keyup', updateShortcodePreview); 146 147 // Initialize the shortcode preview and live preview on page load 148 updateShortcodePreview(); 149 updateLivePreview(); 150 151 // Copy the generated shortcode to clipboard 152 $('#wpfed_copy_shortcode').on('click', function() { 153 var shortcodeText = $('#wpfed_shortcode_result').text(); 154 155 // Use modern clipboard API if available 156 if (navigator.clipboard && window.isSecureContext) { 157 navigator.clipboard.writeText(shortcodeText).then(function() { 158 showCopiedMessage(); 159 }); 160 } else { 161 // Fallback for older browsers 162 var $temp = $('<textarea>'); 163 $('body').append($temp); 164 $temp.val(shortcodeText).select(); 165 166 // Execute the copy command 167 document.execCommand('copy'); 168 169 // Remove the temporary textarea after copying 170 $temp.remove(); 171 172 showCopiedMessage(); 173 } 174 175 function showCopiedMessage() { 176 // Show a success message to the user 177 var $button = $('#wpfed_copy_shortcode'); 178 var originalText = $button.html(); 179 180 $button.html('<span class="dashicons dashicons-yes"></span> Copied!'); 181 182 // Revert the button text back to original after 2 seconds 183 setTimeout(function() { 184 $button.html(originalText); 185 }, 2000); 186 } 187 }); 188 189 // Update the fields available for sorting when a form is selected 190 $('#wpfed_sc_form_id').on('change', function() { 191 var formId = $(this).val(); 192 193 if (formId) { 194 $.ajax({ 195 url: ajaxurl, 196 type: 'POST', 197 data: { 198 action: 'wpfed_get_form_fields', 199 form_id: formId, 200 nonce: $('#wpfed_nonce').val() 201 }, 202 success: function(response) { 203 // Parse response to extract field IDs and labels 204 var fieldsHtml = $(response); 205 var fieldOptions = []; 206 207 fieldsHtml.filter('label').each(function() { 208 var fieldId = $(this).find('input').val(); 209 var fieldLabel = $(this).text().trim(); 210 211 if (fieldId) { 212 fieldOptions.push({ 213 id: fieldId, 214 label: fieldLabel 215 }); 216 } 153 $.ajax({ 154 url: wpfed_admin_vars.ajaxurl, 155 type: 'POST', 156 data: { 157 action: 'wpfed_get_form_fields', 158 nonce: wpfed_admin_vars.nonce, 159 form_id: formId, 160 }, 161 beforeSend: function() { 162 $container.html('<p>Loading fields...</p>'); 163 }, 164 success: function(response) { 165 if (response.success) { 166 let fieldHtml = ''; 167 response.data.forEach(field => { 168 fieldHtml += `<label><input type="checkbox" name="wpfed_options[display_fields][]" value="${field.id}" class="wpfed-field-checkbox"> ${field.label} (ID: ${field.id})</label>`; 217 169 }); 218 219 // Update the sort field dropdown with the retrieved fields 220 var $sortField = $('#wpfed_sc_sort'); 221 $sortField.empty(); 222 $sortField.append('<option value="">No sorting</option>'); 223 224 $.each(fieldOptions, function(index, field) { 225 $sortField.append('<option value="' + field.id + '">' + field.label + '</option>'); 226 }); 170 $container.html(fieldHtml); 171 } else { 172 $container.html(`<p>${response.data}</p>`); 227 173 } 228 }); 229 } 230 }); 231 232 // Handle checkbox selection for fields in main settings to update shortcode 233 $(document).on('change', '.wpfed-field-checkbox', function() { 234 // Collect all selected field IDs 235 var selectedFields = []; 236 $('.wpfed-field-checkbox:checked').each(function() { 237 selectedFields.push($(this).val()); 174 }, 175 error: function() { 176 $container.html('<p>An error occurred.</p>'); 177 } 238 178 }); 239 240 // Update the fields input in the shortcode generator with selected fields241 $('#wpfed_sc_fields').val(selectedFields.join(','));242 updateShortcodePreview();243 179 }); 244 180 245 // Custom date format handling: Apply and add new formats to dropdown 246 $('#wpfed_apply_custom_date').on('click', function() { 247 var customFormat = $('#wpfed_custom_date_format').val(); 248 if (customFormat) { 249 // Check if the custom format already exists in the dropdown 250 var exists = false; 251 $('#wpfed_date_format option').each(function() { 252 if ($(this).val() === customFormat) { 253 exists = true; 254 return false; 255 } 256 }); 257 258 // Add the custom format to the dropdown if it is new 259 if (!exists) { 260 $('#wpfed_date_format').append('<option value="' + customFormat + '">' + customFormat + '</option>'); 261 } 262 263 // Set the selected option to the custom format 264 $('#wpfed_date_format').val(customFormat); 265 266 // Update the live preview 267 updateLivePreview(); 268 } 269 }); 181 // Initial setup on page load 182 updateLivePreview(); 183 updateShortcodePreview(); 270 184 }); -
entries-display-for-wpforms/trunk/includes/admin-settings.php
r3264712 r3325824 18 18 add_action('admin_init', array($this, 'register_settings')); 19 19 add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_scripts')); 20 add_action('wp_ajax_wpfed_get_form_fields', array($this, 'get_form_fields_ajax')); 20 21 } 21 22 … … 62 63 'padding' => '15px', 63 64 'box_shadow' => '0 2px 5px rgba(0,0,0,0.1)', 65 'vertical_alignment' => 'top', 66 'date_font_size' => '14px', 67 'date_font_weight' => 'bold', 68 'date_font_style' => 'normal', 69 'username_font_size' => '14px', 70 'username_font_weight' => 'bold', 71 'username_font_style' => 'normal', 72 'email_font_size' => '14px', 73 'email_font_weight' => 'normal', 74 'email_font_style' => 'normal', 75 'field_labels_font_size' => '14px', 76 'field_labels_font_weight' => 'bold', 77 'field_labels_font_style' => 'normal', 78 'comment_font_size' => '16px', 79 'comment_font_weight' => 'normal', 80 'comment_font_style' => 'normal', 64 81 ) 65 82 ) … … 163 180 ); 164 181 182 /* 183 add_settings_field( 184 'vertical_alignment', 185 __('Vertical Alignment', 'entries-display-for-wpforms'), 186 array($this, 'vertical_alignment_callback'), 187 'wpfed_settings', 188 'wpfed_style_section' 189 ); 190 */ 191 192 // Typography Settings Section 193 add_settings_section( 194 'wpfed_typography_section', 195 __('Typography Settings', 'entries-display-for-wpforms'), 196 array($this, 'typography_section_callback'), 197 'wpfed_settings' 198 ); 199 200 add_settings_field( 201 'date_typography', 202 __('Date Typography', 'entries-display-for-wpforms'), 203 array($this, 'date_typography_callback'), 204 'wpfed_settings', 205 'wpfed_typography_section' 206 ); 207 208 add_settings_field( 209 'username_typography', 210 __('Username Typography', 'entries-display-for-wpforms'), 211 array($this, 'username_typography_callback'), 212 'wpfed_settings', 213 'wpfed_typography_section' 214 ); 215 216 add_settings_field( 217 'email_typography', 218 __('Email Typography', 'entries-display-for-wpforms'), 219 array($this, 'email_typography_callback'), 220 'wpfed_settings', 221 'wpfed_typography_section' 222 ); 223 224 add_settings_field( 225 'field_labels_typography', 226 __('Field Labels Typography', 'entries-display-for-wpforms'), 227 array($this, 'field_labels_typography_callback'), 228 'wpfed_settings', 229 'wpfed_typography_section' 230 ); 231 232 add_settings_field( 233 'comment_typography', 234 __('Comment Typography', 'entries-display-for-wpforms'), 235 array($this, 'comment_typography_callback'), 236 'wpfed_settings', 237 'wpfed_typography_section' 238 ); 239 165 240 // Display Settings Section 166 241 add_settings_section( … … 222 297 223 298 // Sanitize form ID 224 $sanitized_input['form_id'] = absint($input['form_id']);299 $sanitized_input['form_id'] = isset($input['form_id']) ? absint($input['form_id']) : 0; 225 300 226 301 // Sanitize display fields … … 232 307 233 308 // Sanitize entries per page 234 $sanitized_input['entries_per_page'] = absint($input['entries_per_page']);309 $sanitized_input['entries_per_page'] = isset($input['entries_per_page']) ? absint($input['entries_per_page']) : 30; 235 310 if ($sanitized_input['entries_per_page'] < 1) { 236 311 $sanitized_input['entries_per_page'] = 30; 237 312 } 238 313 239 // Sanitize style settings 314 // Sanitize style settings including typography 240 315 $sanitized_input['styles'] = array( 241 'background_color' => sanitize_hex_color($input['styles']['background_color']), 242 'border_color' => sanitize_hex_color($input['styles']['border_color']), 243 'text_color' => sanitize_hex_color($input['styles']['text_color']), 244 'header_color' => sanitize_hex_color($input['styles']['header_color']), 245 'border_radius' => sanitize_text_field($input['styles']['border_radius']), 246 'padding' => sanitize_text_field($input['styles']['padding']), 247 'box_shadow' => sanitize_text_field($input['styles']['box_shadow']), 316 'background_color' => isset($input['styles']['background_color']) ? sanitize_hex_color($input['styles']['background_color']) : '#f9f9f9', 317 'border_color' => isset($input['styles']['border_color']) ? sanitize_hex_color($input['styles']['border_color']) : '#e0e0e0', 318 'text_color' => isset($input['styles']['text_color']) ? sanitize_hex_color($input['styles']['text_color']) : '#333333', 319 'header_color' => isset($input['styles']['header_color']) ? sanitize_hex_color($input['styles']['header_color']) : '#444444', 320 'border_radius' => isset($input['styles']['border_radius']) ? sanitize_text_field($input['styles']['border_radius']) : '5px', 321 'padding' => isset($input['styles']['padding']) ? sanitize_text_field($input['styles']['padding']) : '15px', 322 'box_shadow' => isset($input['styles']['box_shadow']) ? sanitize_text_field($input['styles']['box_shadow']) : '0 2px 5px rgba(0,0,0,0.1)', 323 'vertical_alignment' => isset($input['styles']['vertical_alignment']) ? sanitize_text_field($input['styles']['vertical_alignment']) : 'top', 324 // Updated typography settings 325 'date_font_size' => isset($input['styles']['date_font_size']) ? sanitize_text_field($input['styles']['date_font_size']) : '14px', 326 'date_font_weight' => isset($input['styles']['date_font_weight']) ? sanitize_text_field($input['styles']['date_font_weight']) : 'bold', 327 'date_font_style' => isset($input['styles']['date_font_style']) ? sanitize_text_field($input['styles']['date_font_style']) : 'normal', 328 'username_font_size' => isset($input['styles']['username_font_size']) ? sanitize_text_field($input['styles']['username_font_size']) : '14px', 329 'username_font_weight' => isset($input['styles']['username_font_weight']) ? sanitize_text_field($input['styles']['username_font_weight']) : 'bold', 330 'username_font_style' => isset($input['styles']['username_font_style']) ? sanitize_text_field($input['styles']['username_font_style']) : 'normal', 331 'email_font_size' => isset($input['styles']['email_font_size']) ? sanitize_text_field($input['styles']['email_font_size']) : '14px', 332 'email_font_weight' => isset($input['styles']['email_font_weight']) ? sanitize_text_field($input['styles']['email_font_weight']) : 'normal', 333 'email_font_style' => isset($input['styles']['email_font_style']) ? sanitize_text_field($input['styles']['email_font_style']) : 'normal', 334 'field_labels_font_size' => isset($input['styles']['field_labels_font_size']) ? sanitize_text_field($input['styles']['field_labels_font_size']) : '14px', 335 'field_labels_font_weight' => isset($input['styles']['field_labels_font_weight']) ? sanitize_text_field($input['styles']['field_labels_font_weight']) : 'bold', 336 'field_labels_font_style' => isset($input['styles']['field_labels_font_style']) ? sanitize_text_field($input['styles']['field_labels_font_style']) : 'normal', 337 'comment_font_size' => isset($input['styles']['comment_font_size']) ? sanitize_text_field($input['styles']['comment_font_size']) : '16px', 338 'comment_font_weight' => isset($input['styles']['comment_font_weight']) ? sanitize_text_field($input['styles']['comment_font_weight']) : 'normal', 339 'comment_font_style' => isset($input['styles']['comment_font_style']) ? sanitize_text_field($input['styles']['comment_font_style']) : 'normal', 248 340 ); 249 341 250 342 // Sanitize other settings 251 $sanitized_input['show_date'] = isset($input['show_date']) ? sanitize_text_field($input['show_date']) : 'yes';343 $sanitized_input['show_date'] = isset($input['show_date']) && $input['show_date'] === 'yes' ? 'yes' : 'no'; 252 344 $sanitized_input['date_format'] = sanitize_text_field($input['date_format']); 253 $sanitized_input['show_username'] = isset($input['show_username']) ? sanitize_text_field($input['show_username']): 'no';254 $sanitized_input['hide_field_labels'] = isset($input['hide_field_labels']) ? sanitize_text_field($input['hide_field_labels']): 'no';255 $sanitized_input['hide_empty_fields'] = isset($input['hide_empty_fields']) ? sanitize_text_field($input['hide_empty_fields']): 'no';345 $sanitized_input['show_username'] = isset($input['show_username']) && $input['show_username'] === 'yes' ? 'yes' : 'no'; 346 $sanitized_input['hide_field_labels'] = isset($input['hide_field_labels']) && $input['hide_field_labels'] === 'yes' ? 'yes' : 'no'; 347 $sanitized_input['hide_empty_fields'] = isset($input['hide_empty_fields']) && $input['hide_empty_fields'] === 'yes' ? 'yes' : 'no'; 256 348 257 349 return $sanitized_input; … … 287 379 public function show_date_callback() { 288 380 $options = get_option('wpfed_options'); 289 $show_date = isset($options['show_date']) ? $options['show_date'] : 'yes'; 290 291 echo '<select name="wpfed_options[show_date]" id="wpfed_show_date" class="regular-text">'; 292 echo '<option value="yes" ' . selected($show_date, 'yes', false) . '>' . esc_html__('Yes', 'entries-display-for-wpforms') . '</option>'; 293 echo '<option value="no" ' . selected($show_date, 'no', false) . '>' . esc_html__('No', 'entries-display-for-wpforms') . '</option>'; 294 echo '</select>'; 295 echo '<p class="description">' . esc_html__('Show the date when the entry was submitted.', 'entries-display-for-wpforms') . '</p>'; 381 $value = isset($options['show_date']) ? $options['show_date'] : 'yes'; 382 echo '<label class="wpfed-toggle-switch">'; 383 echo '<input type="checkbox" name="wpfed_options[show_date]" value="yes" ' . checked($value, 'yes', false) . '>'; 384 echo '<span class="wpfed-toggle-slider"></span>'; 385 echo '</label>'; 296 386 } 297 387 … … 320 410 echo '<p class="description">' . esc_html__('Select the format for displaying the entry date.', 'entries-display-for-wpforms') . '</p>'; 321 411 412 /* 322 413 echo '<div class="wpfed-custom-date-format">'; 323 414 echo '<label for="wpfed_custom_date_format">' . esc_html__('Custom Format:', 'entries-display-for-wpforms') . '</label>'; … … 325 416 echo '<button type="button" id="wpfed_apply_custom_date" class="button button-secondary">' . esc_html__('Apply Custom Format', 'entries-display-for-wpforms') . '</button>'; 326 417 echo '</div>'; 418 */ 327 419 } 328 420 … … 347 439 $options = get_option('wpfed_options'); 348 440 $form_id = isset($options['form_id']) ? $options['form_id'] : ''; 349 350 // Retrieve and display available WPForms forms 441 $forms = $this->get_wpforms(); 442 443 echo '<select name="wpfed_options[form_id]" id="wpfed_form_id" class="regular-text">'; 444 echo '<option value="">' . esc_html__('Select a form', 'entries-display-for-wpforms') . '</option>'; 445 446 foreach ($forms as $id => $title) { 447 echo '<option value="' . esc_attr($id) . '" ' . selected($form_id, $id, false) . '>' . esc_html($title) . '</option>'; 448 } 449 450 echo '</select>'; 451 echo '<p class="description">' . esc_html__('Select the default WPForms form to display entries from.', 'entries-display-for-wpforms') . '</p>'; 452 } 453 454 /** 455 * Callback for default fields selection 456 */ 457 public function display_fields_callback() { 458 $options = get_option('wpfed_options'); 459 $form_id = isset($options['form_id']) ? $options['form_id'] : ''; 460 $display_fields = isset($options['display_fields']) ? $options['display_fields'] : array(); 461 462 echo '<div id="wpfed_display_fields_container">'; 463 464 if (!empty($form_id)) { 465 $fields = $this->get_form_fields($form_id); 466 if (!empty($fields)) { 467 foreach ($fields as $field) { 468 $checked = in_array($field['id'], $display_fields) ? 'checked' : ''; 469 echo '<label><input type="checkbox" name="wpfed_options[display_fields][]" value="' . esc_attr($field['id']) . '" ' . esc_attr($checked) . ' class="wpfed-field-checkbox"> ' . esc_html($field['label']) . ' (ID: ' . esc_html($field['id']) . ')</label><br>'; 470 } 471 } else { 472 echo '<p>' . esc_html__('No fields found in this form.', 'entries-display-for-wpforms') . '</p>'; 473 } 474 } else { 475 echo '<p>' . esc_html__('Please select a form first.', 'entries-display-for-wpforms') . '</p>'; 476 } 477 478 echo '</div>'; 479 echo '<p class="description">' . esc_html__('Select which fields to display in the entries view by default.', 'entries-display-for-wpforms') . '</p>'; 480 } 481 482 /** 483 * Callback for entries per page setting 484 */ 485 public function entries_per_page_callback() { 486 $options = get_option('wpfed_options'); 487 $entries_per_page = isset($options['entries_per_page']) ? $options['entries_per_page'] : 30; 488 489 echo '<input type="number" name="wpfed_options[entries_per_page]" id="wpfed_entries_per_page" value="' . esc_attr($entries_per_page) . '" class="small-text" min="1">'; 490 echo '<p class="description">' . esc_html__('Default number of entries to display per page.', 'entries-display-for-wpforms') . '</p>'; 491 } 492 493 /** 494 * Callback for background color setting using a color picker 495 */ 496 public function background_color_callback() { 497 $options = get_option('wpfed_options'); 498 $background_color = isset($options['styles']['background_color']) ? $options['styles']['background_color'] : '#f9f9f9'; 499 500 echo '<input type="text" name="wpfed_options[styles][background_color]" id="wpfed_background_color" value="' . esc_attr($background_color) . '" class="wpfed-color-picker">'; 501 } 502 503 /** 504 * Callback for border color setting using a color picker 505 */ 506 public function border_color_callback() { 507 $options = get_option('wpfed_options'); 508 $border_color = isset($options['styles']['border_color']) ? $options['styles']['border_color'] : '#e0e0e0'; 509 510 echo '<input type="text" name="wpfed_options[styles][border_color]" id="wpfed_border_color" value="' . esc_attr($border_color) . '" class="wpfed-color-picker">'; 511 } 512 513 /** 514 * Callback for text color setting using a color picker 515 */ 516 public function text_color_callback() { 517 $options = get_option('wpfed_options'); 518 $text_color = isset($options['styles']['text_color']) ? $options['styles']['text_color'] : '#333333'; 519 520 echo '<input type="text" name="wpfed_options[styles][text_color]" id="wpfed_text_color" value="' . esc_attr($text_color) . '" class="wpfed-color-picker">'; 521 } 522 523 /** 524 * Callback for header color setting using a color picker 525 */ 526 public function header_color_callback() { 527 $options = get_option('wpfed_options'); 528 $header_color = isset($options['styles']['header_color']) ? $options['styles']['header_color'] : '#444444'; 529 530 echo '<input type="text" name="wpfed_options[styles][header_color]" id="wpfed_header_color" value="' . esc_attr($header_color) . '" class="wpfed-color-picker">'; 531 } 532 533 /** 534 * Callback for border radius setting 535 */ 536 public function border_radius_callback() { 537 $options = get_option('wpfed_options'); 538 $border_radius = isset($options['styles']['border_radius']) ? $options['styles']['border_radius'] : '5px'; 539 540 echo '<select name="wpfed_options[styles][border_radius]" id="wpfed_border_radius" class="regular-text">'; 541 for ($i = 0; $i <= 50; $i += 5) { 542 echo '<option value="' . esc_attr($i . 'px') . '" ' . selected($border_radius, $i . 'px', false) . '>' . esc_html($i . 'px') . '</option>'; 543 } 544 echo '</select>'; 545 echo '<p class="description">' . esc_html__('Select the border radius for comment boxes.', 'entries-display-for-wpforms') . '</p>'; 546 } 547 548 /** 549 * Callback for padding setting 550 */ 551 public function padding_callback() { 552 $options = get_option('wpfed_options'); 553 $padding = isset($options['styles']['padding']) ? $options['styles']['padding'] : '15px'; 554 555 echo '<select name="wpfed_options[styles][padding]" id="wpfed_padding" class="regular-text">'; 556 for ($i = 5; $i <= 50; $i += 5) { 557 echo '<option value="' . esc_attr($i . 'px') . '" ' . selected($padding, $i . 'px', false) . '>' . esc_html($i . 'px') . '</option>'; 558 } 559 echo '</select>'; 560 echo '<p class="description">' . esc_html__('Select the padding for comment boxes.', 'entries-display-for-wpforms') . '</p>'; 561 } 562 563 /** 564 * Callback for the setting to show or hide username 565 */ 566 public function show_username_callback() { 567 $options = get_option('wpfed_options'); 568 $value = isset($options['show_username']) ? $options['show_username'] : 'no'; 569 echo '<label class="wpfed-toggle-switch">'; 570 echo '<input type="checkbox" name="wpfed_options[show_username]" value="yes" ' . checked($value, 'yes', false) . '>'; 571 echo '<span class="wpfed-toggle-slider"></span>'; 572 echo '</label>'; 573 echo '<p class="description">' . esc_html__('Show the username of the user who submitted the entry (if available).', 'entries-display-for-wpforms') . '</p>'; 574 } 575 576 /** 577 * Callback for the setting to hide field labels 578 */ 579 public function hide_field_labels_callback() { 580 $options = get_option('wpfed_options'); 581 $value = isset($options['hide_field_labels']) ? $options['hide_field_labels'] : 'no'; 582 echo '<label class="wpfed-toggle-switch">'; 583 echo '<input type="checkbox" name="wpfed_options[hide_field_labels]" value="yes" ' . checked($value, 'yes', false) . '>'; 584 echo '<span class="wpfed-toggle-slider"></span>'; 585 echo '</label>'; 586 echo '<p class="description">' . esc_html__('Hide field labels in the comment display (e.g., "Single Line Text:").', 'entries-display-for-wpforms') . '</p>'; 587 } 588 589 /** 590 * Callback for the setting to hide empty fields 591 */ 592 public function hide_empty_fields_callback() { 593 $options = get_option('wpfed_options'); 594 $value = isset($options['hide_empty_fields']) ? $options['hide_empty_fields'] : 'no'; 595 echo '<label class="wpfed-toggle-switch">'; 596 echo '<input type="checkbox" name="wpfed_options[hide_empty_fields]" value="yes" ' . checked($value, 'yes', false) . '>'; 597 echo '<span class="wpfed-toggle-slider"></span>'; 598 echo '</label>'; 599 echo '<p class="description">' . esc_html__('Hide fields that have no value.', 'entries-display-for-wpforms') . '</p>'; 600 } 601 602 /** 603 * Callback for vertical alignment setting 604 */ 605 public function vertical_alignment_callback() { 606 $options = get_option('wpfed_options'); 607 $vertical_alignment = isset($options['styles']['vertical_alignment']) ? $options['styles']['vertical_alignment'] : 'top'; 608 609 echo '<select name="wpfed_options[styles][vertical_alignment]" id="wpfed_vertical_alignment" class="regular-text">'; 610 echo '<option value="top" ' . selected($vertical_alignment, 'top', false) . '>' . esc_html__('Top', 'entries-display-for-wpforms') . '</option>'; 611 echo '<option value="middle" ' . selected($vertical_alignment, 'middle', false) . '>' . esc_html__('Middle', 'entries-display-for-wpforms') . '</option>'; 612 echo '<option value="bottom" ' . selected($vertical_alignment, 'bottom', false) . '>' . esc_html__('Bottom', 'entries-display-for-wpforms') . '</option>'; 613 echo '</select>'; 614 echo '<p class="description">' . esc_html__('Select the vertical alignment for the entry content.', 'entries-display-for-wpforms') . '</p>'; 615 } 616 617 /** 618 * Typography section callback description 619 */ 620 public function typography_section_callback() { 621 echo '<p>' . esc_html__('Customize typography settings for different elements. These settings use !important CSS to override theme and page builder styles.', 'entries-display-for-wpforms') . '</p>'; 622 } 623 624 /** 625 * Callback for date typography settings 626 */ 627 public function date_typography_callback() { 628 $options = get_option('wpfed_options'); 629 $date_font_size = isset($options['styles']['date_font_size']) ? $options['styles']['date_font_size'] : '14px'; 630 $date_font_weight = isset($options['styles']['date_font_weight']) ? $options['styles']['date_font_weight'] : 'bold'; 631 $date_font_style = isset($options['styles']['date_font_style']) ? $options['styles']['date_font_style'] : 'normal'; 632 633 echo '<div class="wpfed-typography-controls">'; 634 635 // Font Size 636 echo '<div class="wpfed-typography-control">'; 637 echo '<label for="wpfed_date_font_size">' . esc_html__('Size', 'entries-display-for-wpforms') . '</label>'; 638 echo '<select name="wpfed_options[styles][date_font_size]" id="wpfed_date_font_size">'; 639 $font_sizes = array('10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px'); 640 foreach ($font_sizes as $size) { 641 echo '<option value="' . esc_attr($size) . '" ' . selected($date_font_size, $size, false) . '>' . esc_html($size) . '</option>'; 642 } 643 echo '</select>'; 644 echo '</div>'; 645 646 // Font Weight 647 echo '<div class="wpfed-typography-control">'; 648 echo '<label for="wpfed_date_font_weight">' . esc_html__('Weight', 'entries-display-for-wpforms') . '</label>'; 649 echo '<select name="wpfed_options[styles][date_font_weight]" id="wpfed_date_font_weight">'; 650 $font_weights = array('normal' => 'Normal', 'bold' => 'Bold', '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800', '900' => '900'); 651 foreach ($font_weights as $weight => $label) { 652 echo '<option value="' . esc_attr($weight) . '" ' . selected($date_font_weight, $weight, false) . '>' . esc_html($label) . '</option>'; 653 } 654 echo '</select>'; 655 echo '</div>'; 656 657 // Font Style 658 echo '<div class="wpfed-typography-control">'; 659 echo '<label for="wpfed_date_font_style">' . esc_html__('Style', 'entries-display-for-wpforms') . '</label>'; 660 echo '<select name="wpfed_options[styles][date_font_style]" id="wpfed_date_font_style">'; 661 $font_styles = array('normal' => 'Normal', 'italic' => 'Italic'); 662 foreach ($font_styles as $style => $label) { 663 echo '<option value="' . esc_attr($style) . '" ' . selected($date_font_style, $style, false) . '>' . esc_html($label) . '</option>'; 664 } 665 echo '</select>'; 666 echo '</div>'; 667 668 echo '</div>'; 669 echo '<p class="description">' . esc_html__('Typography settings for entry dates.', 'entries-display-for-wpforms') . '</p>'; 670 } 671 672 /** 673 * Callback for username typography settings 674 */ 675 public function username_typography_callback() { 676 $options = get_option('wpfed_options'); 677 $username_font_size = isset($options['styles']['username_font_size']) ? $options['styles']['username_font_size'] : '14px'; 678 $username_font_weight = isset($options['styles']['username_font_weight']) ? $options['styles']['username_font_weight'] : 'bold'; 679 $username_font_style = isset($options['styles']['username_font_style']) ? $options['styles']['username_font_style'] : 'normal'; 680 681 echo '<div class="wpfed-typography-controls">'; 682 683 // Font Size 684 echo '<div class="wpfed-typography-control">'; 685 echo '<label for="wpfed_username_font_size">' . esc_html__('Size', 'entries-display-for-wpforms') . '</label>'; 686 echo '<select name="wpfed_options[styles][username_font_size]" id="wpfed_username_font_size">'; 687 $font_sizes = array('10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px'); 688 foreach ($font_sizes as $size) { 689 echo '<option value="' . esc_attr($size) . '" ' . selected($username_font_size, $size, false) . '>' . esc_html($size) . '</option>'; 690 } 691 echo '</select>'; 692 echo '</div>'; 693 694 // Font Weight 695 echo '<div class="wpfed-typography-control">'; 696 echo '<label for="wpfed_username_font_weight">' . esc_html__('Weight', 'entries-display-for-wpforms') . '</label>'; 697 echo '<select name="wpfed_options[styles][username_font_weight]" id="wpfed_username_font_weight">'; 698 $font_weights = array('normal' => 'Normal', 'bold' => 'Bold', '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800', '900' => '900'); 699 foreach ($font_weights as $weight => $label) { 700 echo '<option value="' . esc_attr($weight) . '" ' . selected($username_font_weight, $weight, false) . '>' . esc_html($label) . '</option>'; 701 } 702 echo '</select>'; 703 echo '</div>'; 704 705 // Font Style 706 echo '<div class="wpfed-typography-control">'; 707 echo '<label for="wpfed_username_font_style">' . esc_html__('Style', 'entries-display-for-wpforms') . '</label>'; 708 echo '<select name="wpfed_options[styles][username_font_style]" id="wpfed_username_font_style">'; 709 $font_styles = array('normal' => 'Normal', 'italic' => 'Italic'); 710 foreach ($font_styles as $style => $label) { 711 echo '<option value="' . esc_attr($style) . '" ' . selected($username_font_style, $style, false) . '>' . esc_html($label) . '</option>'; 712 } 713 echo '</select>'; 714 echo '</div>'; 715 716 echo '</div>'; 717 echo '<p class="description">' . esc_html__('Typography settings for usernames.', 'entries-display-for-wpforms') . '</p>'; 718 } 719 720 /** 721 * Callback for email typography settings 722 */ 723 public function email_typography_callback() { 724 $options = get_option('wpfed_options'); 725 $email_font_size = isset($options['styles']['email_font_size']) ? $options['styles']['email_font_size'] : '14px'; 726 $email_font_weight = isset($options['styles']['email_font_weight']) ? $options['styles']['email_font_weight'] : 'normal'; 727 $email_font_style = isset($options['styles']['email_font_style']) ? $options['styles']['email_font_style'] : 'normal'; 728 729 echo '<div class="wpfed-typography-controls">'; 730 731 // Font Size 732 echo '<div class="wpfed-typography-control">'; 733 echo '<label for="wpfed_email_font_size">' . esc_html__('Size', 'entries-display-for-wpforms') . '</label>'; 734 echo '<select name="wpfed_options[styles][email_font_size]" id="wpfed_email_font_size">'; 735 $font_sizes = array('10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px'); 736 foreach ($font_sizes as $size) { 737 echo '<option value="' . esc_attr($size) . '" ' . selected($email_font_size, $size, false) . '>' . esc_html($size) . '</option>'; 738 } 739 echo '</select>'; 740 echo '</div>'; 741 742 // Font Weight 743 echo '<div class="wpfed-typography-control">'; 744 echo '<label for="wpfed_email_font_weight">' . esc_html__('Weight', 'entries-display-for-wpforms') . '</label>'; 745 echo '<select name="wpfed_options[styles][email_font_weight]" id="wpfed_email_font_weight">'; 746 $font_weights = array('normal' => 'Normal', 'bold' => 'Bold', '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800', '900' => '900'); 747 foreach ($font_weights as $weight => $label) { 748 echo '<option value="' . esc_attr($weight) . '" ' . selected($email_font_weight, $weight, false) . '>' . esc_html($label) . '</option>'; 749 } 750 echo '</select>'; 751 echo '</div>'; 752 753 // Font Style 754 echo '<div class="wpfed-typography-control">'; 755 echo '<label for="wpfed_email_font_style">' . esc_html__('Style', 'entries-display-for-wpforms') . '</label>'; 756 echo '<select name="wpfed_options[styles][email_font_style]" id="wpfed_email_font_style">'; 757 $font_styles = array('normal' => 'Normal', 'italic' => 'Italic'); 758 foreach ($font_styles as $style => $label) { 759 echo '<option value="' . esc_attr($style) . '" ' . selected($email_font_style, $style, false) . '>' . esc_html($label) . '</option>'; 760 } 761 echo '</select>'; 762 echo '</div>'; 763 764 echo '</div>'; 765 echo '<p class="description">' . esc_html__('Typography settings for email field values.', 'entries-display-for-wpforms') . '</p>'; 766 } 767 768 /** 769 * Callback for field labels typography settings 770 */ 771 public function field_labels_typography_callback() { 772 $options = get_option('wpfed_options'); 773 $field_labels_font_size = isset($options['styles']['field_labels_font_size']) ? $options['styles']['field_labels_font_size'] : '14px'; 774 $field_labels_font_weight = isset($options['styles']['field_labels_font_weight']) ? $options['styles']['field_labels_font_weight'] : 'bold'; 775 $field_labels_font_style = isset($options['styles']['field_labels_font_style']) ? $options['styles']['field_labels_font_style'] : 'normal'; 776 777 echo '<div class="wpfed-typography-controls">'; 778 779 // Font Size 780 echo '<div class="wpfed-typography-control">'; 781 echo '<label for="wpfed_field_labels_font_size">' . esc_html__('Size', 'entries-display-for-wpforms') . '</label>'; 782 echo '<select name="wpfed_options[styles][field_labels_font_size]" id="wpfed_field_labels_font_size">'; 783 $font_sizes = array('10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px'); 784 foreach ($font_sizes as $size) { 785 echo '<option value="' . esc_attr($size) . '" ' . selected($field_labels_font_size, $size, false) . '>' . esc_html($size) . '</option>'; 786 } 787 echo '</select>'; 788 echo '</div>'; 789 790 // Font Weight 791 echo '<div class="wpfed-typography-control">'; 792 echo '<label for="wpfed_field_labels_font_weight">' . esc_html__('Weight', 'entries-display-for-wpforms') . '</label>'; 793 echo '<select name="wpfed_options[styles][field_labels_font_weight]" id="wpfed_field_labels_font_weight">'; 794 $font_weights = array('normal' => 'Normal', 'bold' => 'Bold', '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800', '900' => '900'); 795 foreach ($font_weights as $weight => $label) { 796 echo '<option value="' . esc_attr($weight) . '" ' . selected($field_labels_font_weight, $weight, false) . '>' . esc_html($label) . '</option>'; 797 } 798 echo '</select>'; 799 echo '</div>'; 800 801 // Font Style 802 echo '<div class="wpfed-typography-control">'; 803 echo '<label for="wpfed_field_labels_font_style">' . esc_html__('Style', 'entries-display-for-wpforms') . '</label>'; 804 echo '<select name="wpfed_options[styles][field_labels_font_style]" id="wpfed_field_labels_font_style">'; 805 $font_styles = array('normal' => 'Normal', 'italic' => 'Italic'); 806 foreach ($font_styles as $style => $label) { 807 echo '<option value="' . esc_attr($style) . '" ' . selected($field_labels_font_style, $style, false) . '>' . esc_html($label) . '</option>'; 808 } 809 echo '</select>'; 810 echo '</div>'; 811 812 echo '</div>'; 813 echo '<p class="description">' . esc_html__('Typography settings for all field labels (e.g., "Name:", "Email:").', 'entries-display-for-wpforms') . '</p>'; 814 } 815 816 /** 817 * Callback for comment typography settings 818 */ 819 public function comment_typography_callback() { 820 $options = get_option('wpfed_options'); 821 $comment_font_size = isset($options['styles']['comment_font_size']) ? $options['styles']['comment_font_size'] : '16px'; 822 $comment_font_weight = isset($options['styles']['comment_font_weight']) ? $options['styles']['comment_font_weight'] : 'normal'; 823 $comment_font_style = isset($options['styles']['comment_font_style']) ? $options['styles']['comment_font_style'] : 'normal'; 824 825 echo '<div class="wpfed-typography-controls">'; 826 827 // Font Size 828 echo '<div class="wpfed-typography-control">'; 829 echo '<label for="wpfed_comment_font_size">' . esc_html__('Size', 'entries-display-for-wpforms') . '</label>'; 830 echo '<select name="wpfed_options[styles][comment_font_size]" id="wpfed_comment_font_size">'; 831 $font_sizes = array('10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px'); 832 foreach ($font_sizes as $size) { 833 echo '<option value="' . esc_attr($size) . '" ' . selected($comment_font_size, $size, false) . '>' . esc_html($size) . '</option>'; 834 } 835 echo '</select>'; 836 echo '</div>'; 837 838 // Font Weight 839 echo '<div class="wpfed-typography-control">'; 840 echo '<label for="wpfed_comment_font_weight">' . esc_html__('Weight', 'entries-display-for-wpforms') . '</label>'; 841 echo '<select name="wpfed_options[styles][comment_font_weight]" id="wpfed_comment_font_weight">'; 842 $font_weights = array('normal' => 'Normal', 'bold' => 'Bold', '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800', '900' => '900'); 843 foreach ($font_weights as $weight => $label) { 844 echo '<option value="' . esc_attr($weight) . '" ' . selected($comment_font_weight, $weight, false) . '>' . esc_html($label) . '</option>'; 845 } 846 echo '</select>'; 847 echo '</div>'; 848 849 // Font Style 850 echo '<div class="wpfed-typography-control">'; 851 echo '<label for="wpfed_comment_font_style">' . esc_html__('Style', 'entries-display-for-wpforms') . '</label>'; 852 echo '<select name="wpfed_options[styles][comment_font_style]" id="wpfed_comment_font_style">'; 853 $font_styles = array('normal' => 'Normal', 'italic' => 'Italic'); 854 foreach ($font_styles as $style => $label) { 855 echo '<option value="' . esc_attr($style) . '" ' . selected($comment_font_style, $style, false) . '>' . esc_html($label) . '</option>'; 856 } 857 echo '</select>'; 858 echo '</div>'; 859 860 echo '</div>'; 861 echo '<p class="description">' . esc_html__('Typography settings for comment/message field values.', 'entries-display-for-wpforms') . '</p>'; 862 } 863 864 /** 865 * Display the main settings page in the admin area 866 */ 867 public function display_settings_page() { 868 ?> 869 <div class="wrap wpfed-admin-wrap"> 870 <div class="wpfed-admin-header"> 871 <h1><?php echo esc_html(get_admin_page_title()); ?></h1> 872 </div> 873 874 <div class="wpfed-admin-container"> 875 <div class="wpfed-admin-main"> 876 <form method="post" action="options.php"> 877 <?php settings_fields('wpfed_options_group'); ?> 878 879 <!-- General Settings Card --> 880 <div class="wpfed-settings-card"> 881 <div class="wpfed-settings-card-header"> 882 <h2><?php esc_html_e('General Settings', 'entries-display-for-wpforms'); ?></h2> 883 <p><?php esc_html_e('Configure default settings for displaying WPForms entries.', 'entries-display-for-wpforms'); ?></p> 884 </div> 885 <div class="wpfed-settings-card-content"> 886 <table class="form-table"> 887 <tr> 888 <th scope="row"><?php esc_html_e('Default Form', 'entries-display-for-wpforms'); ?></th> 889 <td><?php $this->form_id_callback(); ?></td> 890 </tr> 891 <tr> 892 <th scope="row"><?php esc_html_e('Default Fields to Display', 'entries-display-for-wpforms'); ?></th> 893 <td><?php $this->display_fields_callback(); ?></td> 894 </tr> 895 <tr> 896 <th scope="row"><?php esc_html_e('Default Entries Per Page', 'entries-display-for-wpforms'); ?></th> 897 <td><?php $this->entries_per_page_callback(); ?></td> 898 </tr> 899 </table> 900 </div> 901 </div> 902 903 <!-- Display Settings Card --> 904 <div class="wpfed-settings-card"> 905 <div class="wpfed-settings-card-header"> 906 <h2><?php esc_html_e('Display Settings', 'entries-display-for-wpforms'); ?></h2> 907 <p><?php esc_html_e('Configure how entries are displayed on your site.', 'entries-display-for-wpforms'); ?></p> 908 </div> 909 <div class="wpfed-settings-card-content"> 910 <table class="form-table"> 911 <tr> 912 <th scope="row"><?php esc_html_e('Show Entry Date', 'entries-display-for-wpforms'); ?></th> 913 <td><?php $this->show_date_callback(); ?></td> 914 </tr> 915 <tr> 916 <th scope="row"><?php esc_html_e('Date Format', 'entries-display-for-wpforms'); ?></th> 917 <td><?php $this->date_format_callback(); ?></td> 918 </tr> 919 <tr> 920 <th scope="row"><?php esc_html_e('Show Username', 'entries-display-for-wpforms'); ?></th> 921 <td><?php $this->show_username_callback(); ?></td> 922 </tr> 923 <tr> 924 <th scope="row"><?php esc_html_e('Hide Field Labels', 'entries-display-for-wpforms'); ?></th> 925 <td><?php $this->hide_field_labels_callback(); ?></td> 926 </tr> 927 <tr> 928 <th scope="row"><?php esc_html_e('Hide Empty Fields', 'entries-display-for-wpforms'); ?></th> 929 <td><?php $this->hide_empty_fields_callback(); ?></td> 930 </tr> 931 </table> 932 </div> 933 </div> 934 935 <!-- Style Settings Card --> 936 <div class="wpfed-settings-card"> 937 <div class="wpfed-settings-card-header"> 938 <h2><?php esc_html_e('Style Settings', 'entries-display-for-wpforms'); ?></h2> 939 <p><?php esc_html_e('Customize the appearance of the entries display.', 'entries-display-for-wpforms'); ?></p> 940 </div> 941 <div class="wpfed-settings-card-content"> 942 <table class="form-table"> 943 <tr> 944 <th scope="row"><?php esc_html_e('Colors', 'entries-display-for-wpforms'); ?></th> 945 <td> 946 <div class="wpfed-colors-grid"> 947 <div class="wpfed-color-option"> 948 <label for="wpfed_background_color"><?php esc_html_e('Background', 'entries-display-for-wpforms'); ?></label> 949 <?php $this->background_color_callback(); ?> 950 </div> 951 <div class="wpfed-color-option"> 952 <label for="wpfed_border_color"><?php esc_html_e('Border', 'entries-display-for-wpforms'); ?></label> 953 <?php $this->border_color_callback(); ?> 954 </div> 955 <div class="wpfed-color-option"> 956 <label for="wpfed_text_color"><?php esc_html_e('Text', 'entries-display-for-wpforms'); ?></label> 957 <?php $this->text_color_callback(); ?> 958 </div> 959 <div class="wpfed-color-option"> 960 <label for="wpfed_header_color"><?php esc_html_e('Header', 'entries-display-for-wpforms'); ?></label> 961 <?php $this->header_color_callback(); ?> 962 </div> 963 </div> 964 </td> 965 </tr> 966 <tr> 967 <th scope="row"><?php esc_html_e('Dimensions & Effects', 'entries-display-for-wpforms'); ?></th> 968 <td> 969 <div class="wpfed-dimensions-grid"> 970 <div class="wpfed-dimension-option"> 971 <label for="wpfed_border_radius"><?php esc_html_e('Border Radius', 'entries-display-for-wpforms'); ?></label> 972 <?php $this->border_radius_callback(); ?> 973 </div> 974 <div class="wpfed-dimension-option"> 975 <label for="wpfed_padding"><?php esc_html_e('Padding', 'entries-display-for-wpforms'); ?></label> 976 <?php $this->padding_callback(); ?> 977 </div> 978 <div class="wpfed-effect-option"> 979 <label for="wpfed_box_shadow"><?php esc_html_e('Box Shadow', 'entries-display-for-wpforms'); ?></label> 980 <?php $this->box_shadow_callback(); ?> 981 </div> 982 </div> 983 </td> 984 </tr> 985 <!-- 986 <tr> 987 <th scope="row"><?php esc_html_e('Vertical Alignment', 'entries-display-for-wpforms'); ?></th> 988 <td><?php $this->vertical_alignment_callback(); ?></td> 989 </tr> 990 --> 991 </table> 992 </div> 993 </div> 994 995 <!-- Typography Settings Card --> 996 <div class="wpfed-settings-card"> 997 <div class="wpfed-settings-card-header"> 998 <h2><?php esc_html_e('Typography Settings', 'entries-display-for-wpforms'); ?></h2> 999 <p><?php esc_html_e('Customize typography settings for different elements. These settings use !important CSS to override theme and page builder styles.', 'entries-display-for-wpforms'); ?></p> 1000 </div> 1001 <div class="wpfed-settings-card-content"> 1002 <table class="form-table"> 1003 <tr> 1004 <th scope="row"><?php esc_html_e('Date Typography', 'entries-display-for-wpforms'); ?></th> 1005 <td><?php $this->date_typography_callback(); ?></td> 1006 </tr> 1007 <tr> 1008 <th scope="row"><?php esc_html_e('Username Typography', 'entries-display-for-wpforms'); ?></th> 1009 <td><?php $this->username_typography_callback(); ?></td> 1010 </tr> 1011 <tr> 1012 <th scope="row"><?php esc_html_e('Email Typography', 'entries-display-for-wpforms'); ?></th> 1013 <td><?php $this->email_typography_callback(); ?></td> 1014 </tr> 1015 <tr> 1016 <th scope="row"><?php esc_html_e('Field Labels Typography', 'entries-display-for-wpforms'); ?></th> 1017 <td><?php $this->field_labels_typography_callback(); ?></td> 1018 </tr> 1019 <tr> 1020 <th scope="row"><?php esc_html_e('Comment Typography', 'entries-display-for-wpforms'); ?></th> 1021 <td><?php $this->comment_typography_callback(); ?></td> 1022 </tr> 1023 </table> 1024 </div> 1025 </div> 1026 1027 <?php submit_button(); ?> 1028 </form> 1029 </div> 1030 1031 <div class="wpfed-admin-sidebar"> 1032 <!-- Shortcode Generator --> 1033 <div class="wpfed-sidebar-widget wpfed-shortcode-generator"> 1034 <h2><?php esc_html_e('Shortcode Generator', 'entries-display-for-wpforms'); ?></h2> 1035 1036 <div class="wpfed-shortcode-builder"> 1037 <div class="wpfed-shortcode-option"> 1038 <label for="wpfed_sc_form_id"><?php esc_html_e('Form', 'entries-display-for-wpforms'); ?></label> 1039 <select id="wpfed_sc_form_id" class="wpfed-sc-param"> 1040 <option value=""><?php esc_html_e('Use default', 'entries-display-for-wpforms'); ?></option> 1041 <?php 1042 // Populate form dropdown 1043 $forms = $this->get_wpforms(); 1044 if (!empty($forms)) { 1045 foreach ($forms as $id => $title) { 1046 echo '<option value="' . esc_attr($id) . '">' . esc_html($title) . '</option>'; 1047 } 1048 } 1049 ?> 1050 </select> 1051 </div> 1052 1053 <div class="wpfed-shortcode-option"> 1054 <label for="wpfed_sc_fields"><?php esc_html_e('Fields (comma-separated IDs)', 'entries-display-for-wpforms'); ?></label> 1055 <input type="text" id="wpfed_sc_fields" class="wpfed-sc-param" placeholder="e.g., 1,3,5"> 1056 </div> 1057 1058 <div class="wpfed-shortcode-option"> 1059 <label for="wpfed_sc_number"><?php esc_html_e('Number of entries', 'entries-display-for-wpforms'); ?></label> 1060 <input type="number" id="wpfed_sc_number" class="wpfed-sc-param" min="1" placeholder="e.g., 10"> 1061 </div> 1062 1063 <div class="wpfed-shortcode-option"> 1064 <label for="wpfed_sc_user"><?php esc_html_e('User', 'entries-display-for-wpforms'); ?></label> 1065 <select id="wpfed_sc_user" class="wpfed-sc-param"> 1066 <option value=""><?php esc_html_e('All users', 'entries-display-for-wpforms'); ?></option> 1067 <option value="current"><?php esc_html_e('Current logged-in user', 'entries-display-for-wpforms'); ?></option> 1068 <?php 1069 // Populate user dropdown with all users 1070 $users = get_users(array('fields' => array('ID', 'display_name'))); 1071 foreach ($users as $user) { 1072 echo '<option value="' . esc_attr($user->ID) . '">' . esc_html($user->display_name) . '</option>'; 1073 } 1074 ?> 1075 </select> 1076 </div> 1077 1078 <div class="wpfed-shortcode-option"> 1079 <label for="wpfed_sc_type"><?php esc_html_e('Entry type', 'entries-display-for-wpforms'); ?></label> 1080 <select id="wpfed_sc_type" class="wpfed-sc-param"> 1081 <option value="all"><?php esc_html_e('All', 'entries-display-for-wpforms'); ?></option> 1082 <option value="unread"><?php esc_html_e('Unread', 'entries-display-for-wpforms'); ?></option> 1083 <option value="read"><?php esc_html_e('Read', 'entries-display-for-wpforms'); ?></option> 1084 <option value="starred"><?php esc_html_e('Starred', 'entries-display-for-wpforms'); ?></option> 1085 </select> 1086 </div> 1087 1088 <div class="wpfed-shortcode-option"> 1089 <label for="wpfed_sc_sort"><?php esc_html_e('Sort by field ID', 'entries-display-for-wpforms'); ?></label> 1090 <input type="text" id="wpfed_sc_sort" class="wpfed-sc-param" placeholder="e.g., 2"> 1091 </div> 1092 1093 <div class="wpfed-shortcode-option"> 1094 <label for="wpfed_sc_order"><?php esc_html_e('Sort order', 'entries-display-for-wpforms'); ?></label> 1095 <select id="wpfed_sc_order" class="wpfed-sc-param"> 1096 <option value="desc"><?php esc_html_e('Descending', 'entries-display-for-wpforms'); ?></option> 1097 <option value="asc"><?php esc_html_e('Ascending', 'entries-display-for-wpforms'); ?></option> 1098 </select> 1099 </div> 1100 </div> 1101 1102 <div class="wpfed-shortcode-preview"> 1103 <h3><?php esc_html_e('Your Shortcode', 'entries-display-for-wpforms'); ?></h3> 1104 <div class="wpfed-shortcode-result"> 1105 <code id="wpfed_shortcode_result">[wpforms_entries_display]</code> 1106 <button type="button" id="wpfed_copy_shortcode" class="button"> 1107 <span class="dashicons dashicons-clipboard"></span> 1108 </button> 1109 </div> 1110 </div> 1111 </div> 1112 1113 <!-- Live Preview Widget --> 1114 <div class="wpfed-sidebar-widget wpfed-preview-widget"> 1115 <h2><?php esc_html_e('Live Preview', 'entries-display-for-wpforms'); ?></h2> 1116 <div class="wpfed-live-preview"> 1117 <div class="wpfed-preview-entry"> 1118 <div class="wpfed-preview-entry-header"> 1119 <span class="wpfed-preview-date"><?php echo date_i18n('F j, Y'); ?></span> 1120 </div> 1121 <div class="wpfed-preview-field"> 1122 <span class="wpfed-preview-label"><?php esc_html_e('Name:', 'entries-display-for-wpforms'); ?></span> 1123 <span class="wpfed-preview-value"><?php esc_html_e('John Appleseed', 'entries-display-for-wpforms'); ?></span> 1124 </div> 1125 <div class="wpfed-preview-field"> 1126 <span class="wpfed-preview-label"><?php esc_html_e('Message:', 'entries-display-for-wpforms'); ?></span> 1127 <span class="wpfed-preview-value"><?php esc_html_e('This is a sample entry.', 'entries-display-for-wpforms'); ?></span> 1128 </div> 1129 </div> 1130 </div> 1131 </div> 1132 </div> 1133 </div> 1134 </div> 1135 <?php 1136 } 1137 1138 /** 1139 * Enqueue admin scripts and styles for settings page 1140 * 1141 * @param string $hook The current admin page hook 1142 */ 1143 public function enqueue_admin_scripts($hook) { 1144 if ('settings_page_entries-display-for-wpforms' !== $hook) { 1145 return; 1146 } 1147 1148 // Enqueue color picker style and script 1149 wp_enqueue_style('wp-color-picker'); 1150 wp_enqueue_script('wp-color-picker'); 1151 1152 // Enqueue custom admin script 1153 wp_enqueue_script( 1154 'wpfed-admin-script', 1155 WPFED_PLUGIN_URL . 'assets/js/admin.js', 1156 array('jquery', 'wp-color-picker'), 1157 WPFED_VERSION, 1158 true 1159 ); 1160 1161 // Properly enqueue script using WordPress API 1162 wp_enqueue_script( 1163 'wpfed-admin-settings', 1164 WPFED_PLUGIN_URL . 'assets/js/admin-settings.js', 1165 array('jquery'), 1166 WPFED_VERSION, 1167 true 1168 ); 1169 1170 // Pass variables to JavaScript 1171 wp_localize_script( 1172 'wpfed-admin-settings', 1173 'wpfed_admin_vars', 1174 array( 1175 'ajaxurl' => admin_url('admin-ajax.php'), 1176 'nonce' => wp_create_nonce('wpfed_get_fields_nonce'), 1177 'select_form_text' => esc_js(__('Please select a form first.', 'entries_display_for_wpforms')) 1178 ) 1179 ); 1180 1181 // Enqueue custom admin stylesheet 1182 wp_enqueue_style( 1183 'wpfed-admin-style', 1184 WPFED_PLUGIN_URL . 'assets/css/admin.css', 1185 array(), 1186 WPFED_VERSION 1187 ); 1188 } 1189 1190 /** 1191 * Helper function to get all WPForms forms 1192 * 1193 * @return array Array of forms with ID and title 1194 */ 1195 private function get_wpforms() { 351 1196 $forms = array(); 352 1197 if (function_exists('wpforms')) { … … 361 1206 } 362 1207 } 363 364 echo '<select name="wpfed_options[form_id]" id="wpfed_form_id" class="regular-text">'; 365 echo '<option value="">' . esc_html__('Select a form', 'entries-display-for-wpforms') . '</option>'; 366 367 foreach ($forms as $id => $title) { 368 echo '<option value="' . esc_attr($id) . '" ' . selected($form_id, $id, false) . '>' . esc_html($title) . '</option>'; 369 } 370 371 echo '</select>'; 372 echo '<p class="description">' . esc_html__('Select the default WPForms form to display entries from.', 'entries-display-for-wpforms') . '</p>'; 373 374 // Properly enqueue script using WordPress API 375 wp_enqueue_script( 376 'wpfed-admin-settings', 377 WPFED_PLUGIN_URL . 'assets/js/admin-settings.js', 378 array('jquery'), 379 WPFED_VERSION, 380 true 381 ); 382 383 // Pass variables to JavaScript 384 wp_localize_script( 385 'wpfed-admin-settings', 386 'wpfed_admin_vars', 387 array( 388 'ajaxurl' => admin_url('admin-ajax.php'), 389 'nonce' => wp_create_nonce('wpfed_get_fields_nonce'), 390 'select_form_text' => esc_js(__('Please select a form first.', 'entries-display-for-wpforms')) 391 ) 392 ); 393 } // <-- Эта закрывающая скобка отсутствовала! 394 395 /** 396 * Callback for default fields selection 397 */ 398 public function display_fields_callback() { 399 $options = get_option('wpfed_options'); 400 $form_id = isset($options['form_id']) ? $options['form_id'] : ''; 401 $display_fields = isset($options['display_fields']) ? $options['display_fields'] : array(); 402 403 echo '<div id="wpfed_display_fields_container">'; 404 405 if (!empty($form_id) && function_exists('wpforms')) { 1208 return $forms; 1209 } 1210 1211 /** 1212 * Helper function to get fields for a specific form 1213 * 1214 * @param int $form_id The ID of the form 1215 * @return array Array of form fields 1216 */ 1217 private function get_form_fields($form_id) { 1218 $fields = array(); 1219 if (function_exists('wpforms')) { 406 1220 $wpforms = wpforms(); 407 1221 if (is_object($wpforms) && method_exists($wpforms->form, 'get')) { … … 411 1225 if (!empty($form_data['fields'])) { 412 1226 foreach ($form_data['fields'] as $field) { 413 // Skip undesirable field types414 1227 $disallowed_types = array('divider', 'html', 'pagebreak', 'captcha'); 415 if (in_array($field['type'], $disallowed_types)) { 416 continue; 1228 if (!in_array($field['type'], $disallowed_types)) { 1229 $fields[] = array( 1230 'id' => $field['id'], 1231 'label' => $field['label'] 1232 ); 417 1233 } 418 419 $checked = in_array($field['id'], $display_fields) ? 'checked' : '';420 echo '<label><input type="checkbox" name="wpfed_options[display_fields][]" value="' . esc_attr($field['id']) . '" ' . esc_attr($checked) . ' class="wpfed-field-checkbox"> ' . esc_html($field['label']) . ' (ID: ' . esc_html($field['id']) . ')</label><br>';421 1234 } 422 } else {423 echo '<p>' . esc_html__('No fields found in this form.', 'entries-display-for-wpforms') . '</p>';424 1235 } 425 } else {426 echo '<p>' . esc_html__('Form not found.', 'entries-display-for-wpforms') . '</p>';427 1236 } 428 } else {429 echo '<p>' . esc_html__('WPForms API is not available.', 'entries-display-for-wpforms') . '</p>';430 1237 } 1238 } 1239 return $fields; 1240 } 1241 1242 /** 1243 * AJAX handler for retrieving form fields for a selected form 1244 */ 1245 public function get_form_fields_ajax() { 1246 // Verify nonce for security 1247 if (!isset($_POST['nonce']) || !wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['nonce'])), 'wpfed_get_fields_nonce')) { 1248 wp_send_json_error('Invalid nonce', 403); 1249 } 1250 1251 // Validate form ID 1252 if (!isset($_POST['form_id']) || empty($_POST['form_id'])) { 1253 wp_send_json_error('Invalid form ID', 400); 1254 } 1255 1256 $form_id = absint($_POST['form_id']); 1257 $fields = $this->get_form_fields($form_id); 1258 1259 if (!empty($fields)) { 1260 wp_send_json_success($fields); 431 1261 } else { 432 echo '<p>' . esc_html__('Please select a form first.', 'entries-display-for-wpforms') . '</p>'; 433 } 434 435 echo '</div>'; 436 echo '<p class="description">' . esc_html__('Select which fields to display in the entries view by default.', 'entries-display-for-wpforms') . '</p>'; 437 } 438 439 /** 440 * Callback for entries per page setting 441 */ 442 public function entries_per_page_callback() { 443 $options = get_option('wpfed_options'); 444 $entries_per_page = isset($options['entries_per_page']) ? $options['entries_per_page'] : 30; 445 446 echo '<input type="number" name="wpfed_options[entries_per_page]" id="wpfed_entries_per_page" value="' . esc_attr($entries_per_page) . '" class="small-text" min="1">'; 447 echo '<p class="description">' . esc_html__('Default number of entries to display per page.', 'entries-display-for-wpforms') . '</p>'; 448 } 449 450 /** 451 * Callback for background color setting using a color picker 452 */ 453 public function background_color_callback() { 454 $options = get_option('wpfed_options'); 455 $background_color = isset($options['styles']['background_color']) ? $options['styles']['background_color'] : '#f9f9f9'; 456 457 echo '<input type="text" name="wpfed_options[styles][background_color]" id="wpfed_background_color" value="' . esc_attr($background_color) . '" class="wpfed-color-picker">'; 458 } 459 460 /** 461 * Callback for border color setting using a color picker 462 */ 463 public function border_color_callback() { 464 $options = get_option('wpfed_options'); 465 $border_color = isset($options['styles']['border_color']) ? $options['styles']['border_color'] : '#e0e0e0'; 466 467 echo '<input type="text" name="wpfed_options[styles][border_color]" id="wpfed_border_color" value="' . esc_attr($border_color) . '" class="wpfed-color-picker">'; 468 } 469 470 /** 471 * Callback for text color setting using a color picker 472 */ 473 public function text_color_callback() { 474 $options = get_option('wpfed_options'); 475 $text_color = isset($options['styles']['text_color']) ? $options['styles']['text_color'] : '#333333'; 476 477 echo '<input type="text" name="wpfed_options[styles][text_color]" id="wpfed_text_color" value="' . esc_attr($text_color) . '" class="wpfed-color-picker">'; 478 } 479 480 /** 481 * Callback for header color setting using a color picker 482 */ 483 public function header_color_callback() { 484 $options = get_option('wpfed_options'); 485 $header_color = isset($options['styles']['header_color']) ? $options['styles']['header_color'] : '#444444'; 486 487 echo '<input type="text" name="wpfed_options[styles][header_color]" id="wpfed_header_color" value="' . esc_attr($header_color) . '" class="wpfed-color-picker">'; 488 } 489 490 /** 491 * Callback for border radius setting 492 */ 493 public function border_radius_callback() { 494 $options = get_option('wpfed_options'); 495 $border_radius = isset($options['styles']['border_radius']) ? $options['styles']['border_radius'] : '5px'; 496 497 echo '<select name="wpfed_options[styles][border_radius]" id="wpfed_border_radius" class="regular-text">'; 498 for ($i = 0; $i <= 50; $i += 5) { 499 echo '<option value="' . esc_attr($i . 'px') . '" ' . selected($border_radius, $i . 'px', false) . '>' . esc_html($i . 'px') . '</option>'; 500 } 501 echo '</select>'; 502 echo '<p class="description">' . esc_html__('Select the border radius for comment boxes.', 'entries-display-for-wpforms') . '</p>'; 503 } 504 505 /** 506 * Callback for padding setting 507 */ 508 public function padding_callback() { 509 $options = get_option('wpfed_options'); 510 $padding = isset($options['styles']['padding']) ? $options['styles']['padding'] : '15px'; 511 512 echo '<select name="wpfed_options[styles][padding]" id="wpfed_padding" class="regular-text">'; 513 for ($i = 5; $i <= 50; $i += 5) { 514 echo '<option value="' . esc_attr($i . 'px') . '" ' . selected($padding, $i . 'px', false) . '>' . esc_html($i . 'px') . '</option>'; 515 } 516 echo '</select>'; 517 echo '<p class="description">' . esc_html__('Select the padding for comment boxes.', 'entries-display-for-wpforms') . '</p>'; 518 } 519 520 /** 521 * Callback for the setting to show or hide username 522 */ 523 public function show_username_callback() { 524 $options = get_option('wpfed_options'); 525 $show_username = isset($options['show_username']) ? $options['show_username'] : 'no'; 526 527 echo '<select name="wpfed_options[show_username]" id="wpfed_show_username" class="regular-text">'; 528 echo '<option value="yes" ' . selected($show_username, 'yes', false) . '>' . esc_html__('Yes', 'entries-display-for-wpforms') . '</option>'; 529 echo '<option value="no" ' . selected($show_username, 'no', false) . '>' . esc_html__('No', 'entries-display-for-wpforms') . '</option>'; 530 echo '</select>'; 531 echo '<p class="description">' . esc_html__('Show the username of the user who submitted the entry (if available).', 'entries-display-for-wpforms') . '</p>'; 532 } 533 534 /** 535 * Callback for the setting to hide field labels 536 */ 537 public function hide_field_labels_callback() { 538 $options = get_option('wpfed_options'); 539 $hide_field_labels = isset($options['hide_field_labels']) ? $options['hide_field_labels'] : 'no'; 540 541 echo '<select name="wpfed_options[hide_field_labels]" id="wpfed_hide_field_labels" class="regular-text">'; 542 echo '<option value="yes" ' . selected($hide_field_labels, 'yes', false) . '>' . esc_html__('Yes', 'entries-display-for-wpforms') . '</option>'; 543 echo '<option value="no" ' . selected($hide_field_labels, 'no', false) . '>' . esc_html__('No', 'entries-display-for-wpforms') . '</option>'; 544 echo '</select>'; 545 echo '<p class="description">' . esc_html__('Hide field labels in the comment display (e.g., "Single Line Text:").', 'entries-display-for-wpforms') . '</p>'; 546 } 547 548 /** 549 * Callback for the setting to hide empty fields 550 */ 551 public function hide_empty_fields_callback() { 552 $options = get_option('wpfed_options'); 553 $hide_empty_fields = isset($options['hide_empty_fields']) ? $options['hide_empty_fields'] : 'no'; 554 555 echo '<select name="wpfed_options[hide_empty_fields]" id="wpfed_hide_empty_fields" class="regular-text">'; 556 echo '<option value="yes" ' . selected($hide_empty_fields, 'yes', false) . '>' . esc_html__('Yes', 'entries-display-for-wpforms') . '</option>'; 557 echo '<option value="no" ' . selected($hide_empty_fields, 'no', false) . '>' . esc_html__('No', 'entries-display-for-wpforms') . '</option>'; 558 echo '</select>'; 559 echo '<p class="description">' . esc_html__('Hide fields that have no value.', 'entries-display-for-wpforms') . '</p>'; 560 } 561 562 /** 563 * Display the main settings page in the admin area 564 */ 565 public function display_settings_page() { 566 ?> 567 <div class="wrap wpfed-admin-wrap"> 568 <h1><?php echo esc_html(get_admin_page_title()); ?></h1> 569 570 <div class="wpfed-admin-container"> 571 <div class="wpfed-admin-main"> 572 <form method="post" action="options.php"> 573 <?php settings_fields('wpfed_options_group'); ?> 574 575 <!-- General Settings Section --> 576 <div class="wpfed-settings-section"> 577 <h2><?php esc_html_e('General Settings', 'entries-display-for-wpforms'); ?></h2> 578 <div class="wpfed-settings-section-content"> 579 <table class="form-table"> 580 <tr> 581 <th scope="row"><?php esc_html_e('Default Form', 'entries-display-for-wpforms'); ?></th> 582 <td><?php $this->form_id_callback(); ?></td> 583 </tr> 584 <tr> 585 <th scope="row"><?php esc_html_e('Default Fields to Display', 'entries-display-for-wpforms'); ?></th> 586 <td><?php $this->display_fields_callback(); ?></td> 587 </tr> 588 <tr> 589 <th scope="row"><?php esc_html_e('Default Entries Per Page', 'entries-display-for-wpforms'); ?></th> 590 <td><?php $this->entries_per_page_callback(); ?></td> 591 </tr> 592 </table> 593 </div> 594 </div> 595 596 <!-- Display Settings Section --> 597 <div class="wpfed-settings-section"> 598 <h2><?php esc_html_e('Display Settings', 'entries-display-for-wpforms'); ?></h2> 599 <div class="wpfed-settings-section-content"> 600 <table class="form-table"> 601 <tr> 602 <th scope="row"><?php esc_html_e('Show Entry Date', 'entries-display-for-wpforms'); ?></th> 603 <td><?php $this->show_date_callback(); ?></td> 604 </tr> 605 <tr> 606 <th scope="row"><?php esc_html_e('Date Format', 'entries-display-for-wpforms'); ?></th> 607 <td><?php $this->date_format_callback(); ?></td> 608 </tr> 609 <tr> 610 <th scope="row"><?php esc_html_e('Show Username', 'entries-display-for-wpforms'); ?></th> 611 <td><?php $this->show_username_callback(); ?></td> 612 </tr> 613 <tr> 614 <th scope="row"><?php esc_html_e('Hide Field Labels', 'entries-display-for-wpforms'); ?></th> 615 <td><?php $this->hide_field_labels_callback(); ?></td> 616 </tr> 617 <tr> 618 <th scope="row"><?php esc_html_e('Hide Empty Fields', 'entries-display-for-wpforms'); ?></th> 619 <td><?php $this->hide_empty_fields_callback(); ?></td> 620 </tr> 621 </table> 622 </div> 623 </div> 624 625 <!-- Style Settings Section --> 626 <div class="wpfed-settings-section"> 627 <h2><?php esc_html_e('Style Settings', 'entries-display-for-wpforms'); ?></h2> 628 <div class="wpfed-settings-section-content"> 629 <table class="form-table"> 630 <tr> 631 <th scope="row"><?php esc_html_e('Colors', 'entries-display-for-wpforms'); ?></th> 632 <td> 633 <div class="wpfed-colors-grid"> 634 <div class="wpfed-color-option"> 635 <label for="wpfed_background_color"><?php esc_html_e('Background', 'entries-display-for-wpforms'); ?></label> 636 <?php $this->background_color_callback(); ?> 637 </div> 638 639 <div class="wpfed-color-option"> 640 <label for="wpfed_border_color"><?php esc_html_e('Border', 'entries-display-for-wpforms'); ?></label> 641 <?php $this->border_color_callback(); ?> 642 </div> 643 644 <div class="wpfed-color-option"> 645 <label for="wpfed_text_color"><?php esc_html_e('Text', 'entries-display-for-wpforms'); ?></label> 646 <?php $this->text_color_callback(); ?> 647 </div> 648 649 <div class="wpfed-color-option"> 650 <label for="wpfed_header_color"><?php esc_html_e('Header', 'entries-display-for-wpforms'); ?></label> 651 <?php $this->header_color_callback(); ?> 652 </div> 653 </div> 654 </td> 655 </tr> 656 <tr> 657 <th scope="row"><?php esc_html_e('Dimensions', 'entries-display-for-wpforms'); ?></th> 658 <td> 659 <div class="wpfed-dimensions-grid"> 660 <div class="wpfed-dimension-option"> 661 <label for="wpfed_border_radius"><?php esc_html_e('Border Radius', 'entries-display-for-wpforms'); ?></label> 662 <?php $this->border_radius_callback(); ?> 663 </div> 664 <div class="wpfed-dimension-option"> 665 <label for="wpfed_padding"><?php esc_html_e('Padding', 'entries-display-for-wpforms'); ?></label> 666 <?php $this->padding_callback(); ?> 667 668 </div> 669 </div> 670 </td> 671 </tr> 672 <tr> 673 <th scope="row"><?php esc_html_e('Effects', 'entries-display-for-wpforms'); ?></th> 674 <td> 675 <div class="wpfed-effect-option"> 676 <label for="wpfed_box_shadow"><?php esc_html_e('Box Shadow', 'entries-display-for-wpforms'); ?></label> 677 <?php $this->box_shadow_callback(); ?> 678 </div> 679 </td> 680 </tr> 681 </table> 682 </div> 683 </div> 684 685 <!-- Live Preview Section --> 686 <div class="wpfed-settings-section wpfed-preview-section"> 687 <h2><?php esc_html_e('Live Preview', 'entries-display-for-wpforms'); ?></h2> 688 <div class="wpfed-settings-section-content"> 689 <div class="wpfed-live-preview"> 690 <div class="wpfed-preview-entry"> 691 <div class="wpfed-preview-entry-header"> 692 <?php esc_html_e('Entry from', 'entries-display-for-wpforms'); ?> 693 <span class="wpfed-preview-date"><?php echo date_i18n('F j, Y g:i a'); ?></span> 694 <?php esc_html_e('by', 'entries-display-for-wpforms'); ?> 695 <span class="wpfed-preview-user"><?php esc_html_e('John Doe', 'entries-display-for-wpforms'); ?></span> 696 </div> 697 698 <div class="wpfed-preview-field"> 699 <span class="wpfed-preview-label"><?php esc_html_e('Name:', 'entries-display-for-wpforms'); ?></span> 700 <span class="wpfed-preview-value"><?php esc_html_e('John Doe', 'entries-display-for-wpforms'); ?></span> 701 </div> 702 703 <div class="wpfed-preview-field"> 704 <span class="wpfed-preview-label"><?php esc_html_e('Email:', 'entries-display-for-wpforms'); ?></span> 705 <span class="wpfed-preview-value"><?php esc_html_e('john.doe@example.com', 'entries-display-for-wpforms'); ?></span> 706 </div> 707 708 <div class="wpfed-preview-field"> 709 <span class="wpfed-preview-label"><?php esc_html_e('Message:', 'entries-display-for-wpforms'); ?></span> 710 <span class="wpfed-preview-value"><?php esc_html_e('This is a sample message that would appear in your entries display.', 'entries-display-for-wpforms'); ?></span> 711 </div> 712 </div> 713 </div> 714 <p class="description"><?php esc_html_e('This is a preview of how your entries will appear on your site based on the current style settings.', 'entries-display-for-wpforms'); ?></p> 715 </div> 716 </div> 717 718 <?php submit_button(); ?> 719 </form> 720 </div> 721 722 <div class="wpfed-admin-sidebar"> 723 <!-- Shortcode Generator --> 724 <div class="wpfed-shortcode-generator"> 725 <h2><?php esc_html_e('Shortcode Generator', 'entries-display-for-wpforms'); ?></h2> 726 727 <div class="wpfed-shortcode-builder"> 728 <div class="wpfed-shortcode-option"> 729 <label for="wpfed_sc_form_id"><?php esc_html_e('Form:', 'entries-display-for-wpforms'); ?></label> 730 <select id="wpfed_sc_form_id" class="wpfed-sc-param"> 731 <option value=""><?php esc_html_e('Use default', 'entries-display-for-wpforms'); ?></option> 732 <?php 733 // Populate form dropdown 734 if (function_exists('wpforms')) { 735 $wpforms = wpforms(); 736 if (is_object($wpforms) && method_exists($wpforms->form, 'get')) { 737 $all_forms = $wpforms->form->get(); 738 if (!empty($all_forms)) { 739 foreach ($all_forms as $form) { 740 echo '<option value="' . esc_attr($form->ID) . '">' . esc_html($form->post_title) . '</option>'; 741 } 742 } 743 } 744 } 745 ?> 746 </select> 747 </div> 748 749 <div class="wpfed-shortcode-option"> 750 <label for="wpfed_sc_fields"><?php esc_html_e('Fields (comma-separated IDs):', 'entries-display-for-wpforms'); ?></label> 751 <input type="text" id="wpfed_sc_fields" class="wpfed-sc-param" placeholder="e.g., 1,3,5"> 752 <p class="description"><?php esc_html_e('Leave empty to use default fields', 'entries-display-for-wpforms'); ?></p> 753 </div> 754 755 <div class="wpfed-shortcode-option"> 756 <label for="wpfed_sc_number"><?php esc_html_e('Number of entries:', 'entries-display-for-wpforms'); ?></label> 757 <input type="number" id="wpfed_sc_number" class="wpfed-sc-param" min="1" placeholder="e.g., 10"> 758 </div> 759 760 <div class="wpfed-shortcode-option"> 761 <label for="wpfed_sc_show_date"><?php esc_html_e('Show Entry Date:', 'entries-display-for-wpforms'); ?></label> 762 <select id="wpfed_sc_show_date" class="wpfed-sc-param"> 763 <option value=""><?php esc_html_e('Use default', 'entries-display-for-wpforms'); ?></option> 764 <option value="yes"><?php esc_html_e('Yes', 'entries-display-for-wpforms'); ?></option> 765 <option value="no"><?php esc_html_e('No', 'entries-display-for-wpforms'); ?></option> 766 </select> 767 </div> 768 769 <div class="wpfed-shortcode-option"> 770 <label for="wpfed_sc_date_format"><?php esc_html_e('Date Format:', 'entries-display-for-wpforms'); ?></label> 771 <select id="wpfed_sc_date_format" class="wpfed-sc-param"> 772 <option value=""><?php esc_html_e('Use default', 'entries-display-for-wpforms'); ?></option> 773 <option value="F j, Y g:i a"><?php echo esc_html(date_i18n('F j, Y g:i a')); ?></option> 774 <option value="Y-m-d H:i:s"><?php echo esc_html(date_i18n('Y-m-d H:i:s')); ?></option> 775 <option value="m/d/Y g:i a"><?php echo esc_html(date_i18n('m/d/Y g:i a')); ?></option> 776 <option value="d/m/Y g:i a"><?php echo esc_html(date_i18n('d/m/Y g:i a')); ?></option> 777 <option value="F j, Y"><?php echo esc_html(date_i18n('F j, Y')); ?></option> 778 </select> 779 </div> 780 781 <div class="wpfed-shortcode-option"> 782 <label for="wpfed_sc_show_username"><?php esc_html_e('Show Username:', 'entries-display-for-wpforms'); ?></label> 783 <select id="wpfed_sc_show_username" class="wpfed-sc-param"> 784 <option value=""><?php esc_html_e('Use default', 'entries-display-for-wpforms'); ?></option> 785 <option value="yes"><?php esc_html_e('Yes', 'entries-display-for-wpforms'); ?></option> 786 <option value="no"><?php esc_html_e('No', 'entries-display-for-wpforms'); ?></option> 787 </select> 788 </div> 789 790 <div class="wpfed-shortcode-option"> 791 <label for="wpfed_sc_hide_field_labels"><?php esc_html_e('Hide Field Labels:', 'entries-display-for-wpforms'); ?></label> 792 <select id="wpfed_sc_hide_field_labels" class="wpfed-sc-param"> 793 <option value=""><?php esc_html_e('Use default', 'entries-display-for-wpforms'); ?></option> 794 <option value="yes"><?php esc_html_e('Yes', 'entries-display-for-wpforms'); ?></option> 795 <option value="no"><?php esc_html_e('No', 'entries-display-for-wpforms'); ?></option> 796 </select> 797 </div> 798 799 <div class="wpfed-shortcode-option"> 800 <label for="wpfed_sc_hide_empty_fields"><?php esc_html_e('Hide Empty Fields:', 'entries-display-for-wpforms'); ?></label> 801 <select id="wpfed_sc_hide_empty_fields" class="wpfed-sc-param"> 802 <option value=""><?php esc_html_e('Use default', 'entries-display-for-wpforms'); ?></option> 803 <option value="yes"><?php esc_html_e('Yes', 'entries-display-for-wpforms'); ?></option> 804 <option value="no"><?php esc_html_e('No', 'entries-display-for-wpforms'); ?></option> 805 </select> 806 </div> 807 808 <div class="wpfed-shortcode-option"> 809 <label for="wpfed_sc_user"><?php esc_html_e('User:', 'entries-display-for-wpforms'); ?></label> 810 <select id="wpfed_sc_user" class="wpfed-sc-param"> 811 <option value=""><?php esc_html_e('All users', 'entries-display-for-wpforms'); ?></option> 812 <option value="current"><?php esc_html_e('Current logged-in user', 'entries-display-for-wpforms'); ?></option> 813 <?php 814 // Populate user dropdown with all users 815 $users = get_users(array('fields' => array('ID', 'display_name'))); 816 foreach ($users as $user) { 817 echo '<option value="' . esc_attr($user->ID) . '">' . esc_html($user->display_name) . ' (ID: ' . esc_html($user->ID) . ')</option>'; 818 } 819 ?> 820 </select> 821 </div> 822 823 <div class="wpfed-shortcode-option"> 824 <label for="wpfed_sc_type"><?php esc_html_e('Entry type:', 'entries-display-for-wpforms'); ?></label> 825 <select id="wpfed_sc_type" class="wpfed-sc-param"> 826 <option value="all"><?php esc_html_e('All entries', 'entries-display-for-wpforms'); ?></option> 827 <option value="unread"><?php esc_html_e('Unread entries', 'entries-display-for-wpforms'); ?></option> 828 <option value="read"><?php esc_html_e('Read entries', 'entries-display-for-wpforms'); ?></option> 829 <option value="starred"><?php esc_html_e('Starred entries', 'entries-display-for-wpforms'); ?></option> 830 </select> 831 </div> 832 833 <div class="wpfed-shortcode-option"> 834 <label for="wpfed_sc_sort"><?php esc_html_e('Sort by field ID:', 'entries-display-for-wpforms'); ?></label> 835 <input type="text" id="wpfed_sc_sort" class="wpfed-sc-param" placeholder="e.g., 2"> 836 </div> 837 838 <div class="wpfed-shortcode-option"> 839 <label for="wpfed_sc_order"><?php esc_html_e('Sort order:', 'entries-display-for-wpforms'); ?></label> 840 <select id="wpfed_sc_order" class="wpfed-sc-param"> 841 <option value="asc"><?php esc_html_e('Ascending (A-Z, 0-9)', 'entries-display-for-wpforms'); ?></option> 842 <option value="desc"><?php esc_html_e('Descending (Z-A, 9-0)', 'entries-display-for-wpforms'); ?></option> 843 </select> 844 </div> 845 </div> 846 847 <div class="wpfed-shortcode-preview"> 848 <h3><?php esc_html_e('Your Shortcode', 'entries-display-for-wpforms'); ?></h3> 849 <div class="wpfed-shortcode-result"> 850 <code id="wpfed_shortcode_result">[wpforms_entries_display]</code> 851 <button type="button" id="wpfed_copy_shortcode" class="button"> 852 <span class="dashicons dashicons-clipboard"></span> <?php esc_html_e('Copy', 'entries-display-for-wpforms'); ?> 853 </button> 854 </div> 855 </div> 856 </div> 857 858 <!-- Help Box --> 859 <div class="wpfed-help-box"> 860 <h3><?php esc_html_e('Need Help?', 'entries-display-for-wpforms'); ?></h3> 861 <p><?php esc_html_e('This plugin allows you to display WPForms entries as styled comments on your website.', 'entries-display-for-wpforms'); ?></p> 862 <p><?php esc_html_e('To use it, simply configure the settings on this page and use the generated shortcode on any page or post.', 'entries-display-for-wpforms'); ?></p> 863 <p><strong><?php esc_html_e('Note:', 'entries-display-for-wpforms'); ?></strong> <?php esc_html_e('This feature requires WPForms Pro with the Entries functionality.', 'entries-display-for-wpforms'); ?></p> 864 </div> 865 </div> 866 </div> 867 </div> 868 <?php 869 } 870 871 /** 872 * Enqueue admin scripts and styles for settings page 873 * 874 * @param string $hook The current admin page hook 875 */ 876 public function enqueue_admin_scripts($hook) { 877 if ('settings_page_entries-display-for-wpforms' !== $hook) { 878 return; 879 } 880 881 // Enqueue color picker style and script 882 wp_enqueue_style('wp-color-picker'); 883 wp_enqueue_script('wp-color-picker'); 884 885 // Enqueue custom admin script 886 wp_enqueue_script( 887 'wpfed-admin-script', 888 WPFED_PLUGIN_URL . 'assets/js/admin.js', 889 array('jquery', 'wp-color-picker'), 890 WPFED_VERSION, 891 true 892 ); 893 894 // Enqueue custom admin stylesheet 895 wp_enqueue_style( 896 'wpfed-admin-style', 897 WPFED_PLUGIN_URL . 'assets/css/admin.css', 898 array(), 899 WPFED_VERSION 900 ); 1262 wp_send_json_error('No fields found for this form.', 404); 1263 } 901 1264 } 902 1265 } … … 904 1267 // Initialize the admin settings class 905 1268 $wpfed_admin_settings = new WPFED_Admin_Settings(); 906 907 /**908 * AJAX handler for retrieving form fields for a selected form909 */910 function wpfed_get_form_fields_ajax() {911 // Verify nonce for security912 if (!isset($_POST['nonce']) || !wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['nonce'])), 'wpfed_get_fields_nonce')) {913 wp_send_json_error('Invalid nonce');914 }915 916 // Validate form ID917 if (!isset($_POST['form_id']) || empty($_POST['form_id'])) {918 wp_send_json_error('Invalid form ID');919 }920 921 $form_id = absint($_POST['form_id']);922 $options = get_option('wpfed_options');923 $display_fields = isset($options['display_fields']) ? $options['display_fields'] : array();924 925 $output = '';926 927 // Retrieve and display form fields928 if (function_exists('wpforms')) {929 $wpforms = wpforms();930 if (is_object($wpforms) && method_exists($wpforms->form, 'get')) {931 $form = $wpforms->form->get($form_id);932 if (!empty($form)) {933 $form_data = wpforms_decode($form->post_content);934 if (!empty($form_data['fields'])) {935 foreach ($form_data['fields'] as $field) {936 // Exclude certain field types937 $disallowed_types = array('divider', 'html', 'pagebreak', 'captcha');938 if (in_array($field['type'], $disallowed_types)) {939 continue;940 }941 942 $checked = in_array($field['id'], $display_fields) ? 'checked' : '';943 $output .= '<label><input type="checkbox" name="wpfed_options[display_fields][]" value="' . esc_attr($field['id']) . '" ' . $checked . ' class="wpfed-field-checkbox"> ' . esc_html($field['label']) . ' (ID: ' . esc_html($field['id']) . ')</label><br>';944 }945 } else {946 $output = '<p>' . esc_html__('No fields found in this form.', 'entries-display-for-wpforms') . '</p>';947 }948 } else {949 $output = '<p>' . esc_html__('Form not found.', 'entries-display-for-wpforms') . '</p>';950 }951 } else {952 $output = '<p>' . esc_html__('WPForms API is not available.', 'entries-display-for-wpforms') . '</p>';953 }954 } else {955 $output = '<p>' . esc_html__('WPForms plugin is not active.', 'entries-display-for-wpforms') . '</p>';956 }957 958 echo wp_kses_post($output);959 wp_die();960 }961 add_action('wp_ajax_wpfed_get_form_fields', 'wpfed_get_form_fields_ajax'); -
entries-display-for-wpforms/trunk/includes/shortcode.php
r3264712 r3325824 6 6 7 7 /** 8 * Register the shortcode during the 'init' action8 * Class to handle the [wpforms_entries_display] shortcode. 9 9 */ 10 function wpfed_register_shortcode() { 11 add_shortcode('wpforms_entries_display', 'wpfed_shortcode_callback'); 12 } 13 add_action('init', 'wpfed_register_shortcode'); 14 15 /** 16 * Shortcode callback function to display form entries 17 * 18 * @param array $atts Shortcode attributes 19 * @return string HTML output for form entries display 20 */ 21 function wpfed_shortcode_callback($atts) { 22 // Ensure WPForms is active 23 if (!function_exists('wpforms')) { 24 return '<p class="wpfed-error">' . esc_html__('Error: WPForms plugin is not active.', 'entries-display-for-wpforms') . '</p>'; 25 } 26 27 // Check availability of WPForms Entries API 28 $wpforms = wpforms(); 29 if (!is_object($wpforms) || !isset($wpforms->entry) || !method_exists($wpforms->entry, 'get_entries')) { 30 return '<p class="wpfed-error">' . esc_html__('Error: WPForms Entries API is not available. Make sure you have WPForms Pro installed.', 'entries-display-for-wpforms') . '</p>'; 31 } 32 33 // Retrieve plugin options 34 $options = get_option('wpfed_options'); 35 36 // Define default attributes for the shortcode 37 $default_atts = array( 38 'id' => isset($options['form_id']) ? $options['form_id'] : '', 39 'fields' => '', 40 'number' => isset($options['entries_per_page']) ? $options['entries_per_page'] : 30, 41 'user' => '', 42 'type' => 'all', // Options: all, unread, read, or starred 43 'sort' => '', 44 'order' => 'asc', 45 'show_date' => isset($options['show_date']) ? $options['show_date'] : 'yes', 46 'date_format' => isset($options['date_format']) ? $options['date_format'] : 'F j, Y g:i a', 47 'show_username' => isset($options['show_username']) ? $options['show_username'] : 'no', 48 'hide_field_labels' => isset($options['hide_field_labels']) ? $options['hide_field_labels'] : 'no', 49 'hide_empty_fields' => isset($options['hide_empty_fields']) ? $options['hide_empty_fields'] : 'no', 50 ); 51 52 // Merge user-supplied attributes with defaults 53 $atts = shortcode_atts($default_atts, $atts); 54 55 // Validate form ID 56 if (empty($atts['id'])) { 57 return '<p class="wpfed-error">' . esc_html__('Error: Form ID is required. Please specify a form ID in the shortcode or in the plugin settings.', 'entries-display-for-wpforms') . '</p>'; 58 } 59 60 // Attempt to retrieve the form 61 $form = $wpforms->form->get(absint($atts['id'])); 62 63 // Verify form existence 64 if (empty($form)) { 65 return '<p class="wpfed-error">' . esc_html__('Error: Form not found. Please check the form ID.', 'entries-display-for-wpforms') . '</p>'; 66 } 67 68 // Extract form data 69 $form_data = !empty($form->post_content) ? wpforms_decode($form->post_content) : ''; 70 if (empty($form_data) || empty($form_data['fields'])) { 71 return '<p class="wpfed-error">' . esc_html__('Error: Form has no fields.', 'entries-display-for-wpforms') . '</p>'; 72 } 73 74 // Determine fields to display 75 $form_field_ids = array(); 76 77 // Use fields from shortcode attributes or plugin options 78 if (!empty($atts['fields'])) { 79 $form_field_ids = explode(',', str_replace(' ', '', $atts['fields'])); 80 } else if (!empty($options['display_fields'])) { 81 $form_field_ids = $options['display_fields']; 82 } 83 84 // Configure form fields for display 85 if (empty($form_field_ids)) { 86 $form_fields = $form_data['fields']; 87 } else { 10 class WPFED_Shortcode { 11 12 private $options; 13 14 /** 15 * Constructor to initialize the shortcode. 16 */ 17 public function __construct() { 18 $this->options = get_option('wpfed_options'); 19 add_shortcode('wpforms_entries_display', array($this, 'shortcode_callback')); 20 } 21 22 /** 23 * Shortcode callback function to display form entries. 24 * 25 * @param array $atts Shortcode attributes. 26 * @return string HTML output for form entries display. 27 */ 28 public function shortcode_callback($atts) { 29 // Ensure WPForms is active and the necessary components are available. 30 if (!function_exists('wpforms') || !property_exists(wpforms(), 'entry') || !method_exists(wpforms()->entry, 'get_entries')) { 31 return $this->get_error_message(esc_html__('WPForms Pro and the Entries API are required.', 'entries-display-for-wpforms')); 32 } 33 34 // Merge user-supplied attributes with defaults. 35 $atts = $this->get_attributes($atts); 36 37 // Validate form ID. 38 if (empty($atts['id'])) { 39 return $this->get_error_message(esc_html__('Form ID is required.', 'entries-display-for-wpforms')); 40 } 41 42 // Retrieve and validate the form. 43 $form = wpforms()->form->get(absint($atts['id'])); 44 if (empty($form)) { 45 return $this->get_error_message(esc_html__('Form not found.', 'entries-display-for-wpforms')); 46 } 47 48 // Decode form data and get fields. 49 $form_data = !empty($form->post_content) ? wpforms_decode($form->post_content) : array(); 50 $form_fields = $this->get_display_fields($atts, $form_data); 51 52 if (empty($form_fields)) { 53 return $this->get_error_message(esc_html__('No fields are selected for display.', 'entries-display-for-wpforms')); 54 } 55 56 // Fetch entries from the database. 57 $entries = $this->get_entries($atts); 58 59 // Display a message if no entries are found. 60 if (empty($entries)) { 61 return '<div class="wpfed-no-entries">' . esc_html__('No entries found.', 'entries-display-for-wpforms') . '</div>'; 62 } 63 64 // Enqueue styles and generate custom CSS. 65 $this->enqueue_styles(); 66 67 // Return the rendered HTML for the entries. 68 return $this->render_entries($entries, $form_fields, $atts, $form_data); 69 } 70 71 /** 72 * Merges shortcode attributes with default values. 73 * 74 * @param array $atts User-provided attributes. 75 * @return array Merged attributes. 76 */ 77 private function get_attributes($atts) { 78 $default_atts = array( 79 'id' => $this->options['form_id'] ?? '', 80 'fields' => '', 81 'number' => $this->options['entries_per_page'] ?? 30, 82 'user' => '', 83 'type' => 'all', 84 'sort' => '', 85 'order' => 'desc', 86 'show_date' => $this->options['show_date'] ?? 'yes', 87 'date_format' => $this->options['date_format'] ?? 'F j, Y g:i a', 88 'show_username' => $this->options['show_username'] ?? 'no', 89 'hide_field_labels' => $this->options['hide_field_labels'] ?? 'no', 90 'hide_empty_fields' => $this->options['hide_empty_fields'] ?? 'no', 91 ); 92 return shortcode_atts($default_atts, $atts, 'wpforms_entries_display'); 93 } 94 95 /** 96 * Determines which form fields to display based on attributes and settings. 97 * 98 * @param array $atts Shortcode attributes. 99 * @param array $form_data Decoded form data. 100 * @return array The fields to display. 101 */ 102 private function get_display_fields($atts, $form_data) { 103 if (empty($form_data['fields'])) { 104 return array(); 105 } 106 107 $all_fields = $form_data['fields']; 108 $field_ids_to_display = array(); 109 110 if (!empty($atts['fields'])) { 111 $field_ids_to_display = array_map('trim', explode(',', $atts['fields'])); 112 } elseif (!empty($this->options['display_fields'])) { 113 $field_ids_to_display = $this->options['display_fields']; 114 } 115 88 116 $form_fields = array(); 89 foreach ($form_field_ids as $field_id) { 90 if (isset($form_data['fields'][$field_id])) { 91 $form_fields[$field_id] = $form_data['fields'][$field_id]; 92 } 93 } 94 } 95 96 // Ensure fields are available for display 97 if (empty($form_fields)) { 98 return '<p class="wpfed-error">' . esc_html__('Error: No fields selected for display.', 'entries-display-for-wpforms') . '</p>'; 99 } 100 101 // Specify field types to exclude 102 $form_fields_disallow = apply_filters('wpfed_disallowed_field_types', array('divider', 'html', 'pagebreak', 'captcha')); 103 104 // Filter out disallowed field types 105 foreach ($form_fields as $field_id => $form_field) { 106 if (in_array($form_field['type'], $form_fields_disallow, true)) { 107 unset($form_fields[$field_id]); 108 } 109 } 110 111 // Set up arguments to retrieve entries 112 $entries_args = array( 113 'form_id' => absint($atts['id']), 114 ); 115 116 // Apply user-specific filters if applicable 117 if (!empty($atts['user'])) { 118 if ($atts['user'] === 'current' && is_user_logged_in()) { 119 $entries_args['user_id'] = get_current_user_id(); 117 if (empty($field_ids_to_display)) { 118 $form_fields = $all_fields; 120 119 } else { 121 $entries_args['user_id'] = absint($atts['user']); 122 } 123 } 124 125 // Define number of entries to retrieve 126 if (!empty($atts['number'])) { 127 $entries_args['number'] = absint($atts['number']); 128 } 129 130 // Apply filters to the entry type 131 if ($atts['type'] === 'unread') { 132 $entries_args['viewed'] = '0'; 133 } elseif ($atts['type'] === 'read') { 134 $entries_args['viewed'] = '1'; 135 } elseif ($atts['type'] === 'starred') { 136 $entries_args['starred'] = '1'; 137 } 138 139 // Securely retrieve entries 140 try { 141 $entries = $wpforms->entry->get_entries($entries_args); 142 $entries = json_decode(json_encode($entries), true); 143 } catch (Exception $e) { 144 return '<p class="wpfed-error">' . esc_html__('Error retrieving entries: ', 'entries-display-for-wpforms') . esc_html($e->getMessage()) . '</p>'; 145 } 146 147 // Display message if no entries are found 148 if (empty($entries)) { 149 return '<p class="wpfed-no-entries">' . esc_html__('No entries found.', 'entries-display-for-wpforms') . '</p>'; 150 } 151 152 // Process entries for display 153 foreach ($entries as $key => $entry) { 154 $entries[$key]['fields'] = json_decode($entry['fields'], true); 155 $entries[$key]['meta'] = json_decode($entry['meta'], true); 156 } 157 158 // Sort entries if a sort parameter is provided 159 if (!empty($atts['sort']) && isset($entries[0]['fields'][$atts['sort']])) { 160 usort($entries, function ($entry1, $entry2) use ($atts) { 161 return strtolower($atts['order']) == 'asc' ? strcmp($entry1['fields'][$atts['sort']]['value'], $entry2['fields'][$atts['sort']]['value']) : strcmp($entry2['fields'][$atts['sort']]['value'], $entry1['fields'][$atts['sort']]['value']); 162 }); 163 } 164 165 // Enqueue styles for frontend display 166 wp_enqueue_style('wpfed-frontend-styles'); 167 168 // Generate custom CSS based on saved style settings 169 $styles = isset($options['styles']) ? $options['styles'] : array(); 170 $custom_css = wpfed_generate_custom_css($styles); 171 wp_add_inline_style('wpfed-frontend-styles', $custom_css); 172 173 // Start output buffering to capture HTML output 174 ob_start(); 175 176 echo '<div class="wpfed-comments-container">'; 177 178 // Output each entry as a comment block 179 foreach ($entries as $entry) { 180 echo '<div class="wpfed-comment">'; 181 182 // Display date/time if enabled, along with username if applicable 183 if ($atts['show_date'] === 'yes' && !empty($entry['date'])) { 184 $date = date_i18n($atts['date_format'], strtotime($entry['date'])); 185 echo '<div class="wpfed-comment-date">'; 186 187 if (isset($options['show_username']) && $options['show_username'] === 'yes' && !empty($entry['user_id'])) { 188 $user = get_userdata($entry['user_id']); 189 if ($user) { 190 echo '<span class="wpfed-username">' . esc_html($user->display_name) . '</span> • '; 120 foreach ($field_ids_to_display as $field_id) { 121 if (isset($all_fields[$field_id])) { 122 $form_fields[$field_id] = $all_fields[$field_id]; 191 123 } 192 124 } 193 194 echo esc_html($date) . '</div>'; 195 } else if (isset($options['show_username']) && $options['show_username'] === 'yes' && !empty($entry['user_id'])) { 196 // Display only username if date is disabled 197 $user = get_userdata($entry['user_id']); 125 } 126 127 // Filter out disallowed field types. 128 $disallowed_types = apply_filters('wpfed_disallowed_field_types', array('divider', 'html', 'pagebreak', 'captcha')); 129 foreach ($form_fields as $field_id => $field) { 130 if (in_array($field['type'], $disallowed_types, true)) { 131 unset($form_fields[$field_id]); 132 } 133 } 134 135 return $form_fields; 136 } 137 138 /** 139 * Fetches entries from the database based on shortcode attributes. 140 * 141 * @param array $atts Shortcode attributes. 142 * @return array The fetched entries. 143 */ 144 private function get_entries($atts) { 145 $args = array( 146 'form_id' => absint($atts['id']), 147 'number' => absint($atts['number']), 148 'orderby' => 'entry_id', // Default sorting 149 'order' => strtoupper($atts['order']), 150 ); 151 152 // User filtering. 153 if (!empty($atts['user'])) { 154 if ($atts['user'] === 'current' && is_user_logged_in()) { 155 $args['user_id'] = get_current_user_id(); 156 } else { 157 $args['user_id'] = absint($atts['user']); 158 } 159 } 160 161 // Entry type filtering. 162 $type_map = array( 163 'unread' => array('viewed', '0'), 164 'read' => array('viewed', '1'), 165 'starred' => array('starred', '1'), 166 ); 167 if (isset($type_map[$atts['type']])) { 168 list($key, $value) = $type_map[$atts['type']]; 169 $args[$key] = $value; 170 } 171 172 // Custom field sorting. 173 if (!empty($atts['sort'])) { 174 $args['orderby'] = 'field_' . absint($atts['sort']); 175 } 176 177 try { 178 return wpforms()->entry->get_entries($args); 179 } catch (Exception $e) { 180 // In a real-world scenario, you might want to log this error. 181 return array(); 182 } 183 } 184 185 /** 186 * Renders the HTML for the entries. 187 * 188 * @param array $entries The entries to render. 189 * @param array $form_fields The form fields to display. 190 * @param array $atts Shortcode attributes. 191 * @param array $form_data Decoded form data. 192 * @return string The rendered HTML. 193 */ 194 private function render_entries($entries, $form_fields, $atts, $form_data) { 195 ob_start(); 196 ?> 197 <div class="wpfed-comments-container"> 198 <?php foreach ($entries as $entry) : 199 $entry_fields = !empty($entry->fields) ? wpforms_decode($entry->fields) : array(); 200 ?> 201 <div class="wpfed-comment"> 202 <?php $this->render_entry_header($entry, $atts); ?> 203 <div class="wpfed-comment-content"> 204 <?php foreach ($form_fields as $form_field) : 205 $field_value = $entry_fields[$form_field['id']]['value'] ?? ''; 206 207 if (empty($field_value) && $atts['hide_empty_fields'] === 'yes') { 208 continue; 209 } 210 211 // Skip username field if it's already shown in header and it's a name field 212 if ($atts['show_username'] === 'yes' && 213 (stripos($form_field['label'], 'name') !== false || 214 stripos($form_field['label'], 'user') !== false) && 215 !empty($entry->user_id)) { 216 continue; 217 } 218 219 $field_value_processed = apply_filters('wpforms_html_field_value', wp_strip_all_tags($field_value), $entry_fields[$form_field['id']], $form_data, 'entry-frontend-table'); 220 221 // Determine field type for styling 222 $field_type_class = $this->get_field_type_class($form_field); 223 ?> 224 <div class="wpfed-comment-field <?php echo esc_attr($field_type_class); ?>"> 225 <?php if ($atts['hide_field_labels'] !== 'yes') : ?> 226 <span class="wpfed-field-label"><?php echo esc_html($form_field['label']); ?>:</span> 227 <?php endif; ?> 228 <span class="wpfed-field-value"><?php echo wp_kses_post($field_value_processed); ?></span> 229 </div> 230 <?php endforeach; ?> 231 </div> 232 </div> 233 <?php endforeach; ?> 234 </div> 235 <?php 236 return ob_get_clean(); 237 } 238 239 /** 240 * Renders the header for a single entry. 241 * 242 * @param object $entry The entry object. 243 * @param array $atts Shortcode attributes. 244 */ 245 private function render_entry_header($entry, $atts) { 246 $show_date = $atts['show_date'] === 'yes'; 247 $show_username = $atts['show_username'] === 'yes' && !empty($entry->user_id); 248 249 if (!$show_date && !$show_username) { 250 return; 251 } 252 253 echo '<div class="wpfed-comment-header">'; 254 255 // Show date if enabled 256 if ($show_date && !empty($entry->date)) { 257 $date_info = date_i18n($atts['date_format'], strtotime($entry->date)); 258 echo '<div class="wpfed-comment-date">' . esc_html($date_info) . '</div>'; 259 } 260 261 // Show WordPress username as separate field if enabled (not form field data) 262 if ($show_username) { 263 $user = get_userdata($entry->user_id); 198 264 if ($user) { 199 echo '<div class="wpfed- comment-date"><span class="wpfed-username">' . esc_html($user->display_name) . '</span></div>';265 echo '<div class="wpfed-username">' . esc_html($user->display_name) . '</div>'; 200 266 } 201 267 } 202 268 203 echo '<div class="wpfed-comment-content">'; 204 205 $entry_fields = $entry['fields']; 206 207 // Loop through and display fields 208 foreach ($form_fields as $form_field) { 209 $field_value = ''; 210 foreach ($entry_fields as $entry_field) { 211 if (absint($entry_field['id']) === absint($form_field['id'])) { 212 $field_value = apply_filters('wpforms_html_field_value', wp_strip_all_tags($entry_field['value']), $entry_field, $form_data, 'entry-frontend-table'); 213 break; 214 } 215 } 216 217 // Skip empty values if configured to hide them 218 if (empty($field_value) && isset($options['hide_empty_fields']) && $options['hide_empty_fields'] === 'yes') { 219 continue; 220 } 221 222 echo '<div class="wpfed-comment-field">'; 223 224 // Conditionally display field labels 225 if (!isset($options['hide_field_labels']) || $options['hide_field_labels'] !== 'yes') { 226 echo '<span class="wpfed-field-label">' . esc_html($form_field['label']) . ':</span> '; 227 } 228 229 echo '<span class="wpfed-field-value">' . wp_kses_post($field_value) . '</span>'; 230 echo '</div>'; 231 } 232 233 echo '</div>'; // .wpfed-comment-content 234 echo '</div>'; // .wpfed-comment 235 } 236 237 echo '</div>'; // .wpfed-comments-container 238 239 // Capture buffered output 240 $output = ob_get_clean(); 241 242 return $output; 269 echo '</div>'; 270 } 271 272 /** 273 * Enqueues frontend styles and generates custom CSS. 274 */ 275 private function enqueue_styles() { 276 wp_enqueue_style('wpfed-frontend-styles'); 277 $custom_css = $this->generate_custom_css(); 278 wp_add_inline_style('wpfed-frontend-styles', $custom_css); 279 } 280 281 /** 282 * Generates custom CSS based on style settings. 283 * 284 * @return string CSS rules to apply. 285 */ 286 private function generate_custom_css() { 287 $styles = $this->options['styles'] ?? array(); 288 $css_vars = array( 289 '--wpfed-bg-color' => $styles['background_color'] ?? '#f9f9f9', 290 '--wpfed-border-color' => $styles['border_color'] ?? '#e0e0e0', 291 '--wpfed-text-color' => $styles['text_color'] ?? '#333333', 292 '--wpfed-header-color' => $styles['header_color'] ?? '#444444', 293 '--wpfed-border-radius' => $styles['border_radius'] ?? '5px', 294 '--wpfed-padding' => $styles['padding'] ?? '15px', 295 '--wpfed-box-shadow' => ($styles['box_shadow'] ?? 'none') === 'none' ? 'none' : ($styles['box_shadow'] ?? '0 2px 5px rgba(0,0,0,0.1)'), 296 '--wpfed-vertical-align' => $styles['vertical_alignment'] ?? 'top', 297 // Updated typography variables for all field types 298 '--wpfed-date-font-size' => $styles['date_font_size'] ?? '14px', 299 '--wpfed-date-font-weight' => $styles['date_font_weight'] ?? 'bold', 300 '--wpfed-date-font-style' => $styles['date_font_style'] ?? 'normal', 301 '--wpfed-username-font-size' => $styles['username_font_size'] ?? '14px', 302 '--wpfed-username-font-weight' => $styles['username_font_weight'] ?? 'bold', 303 '--wpfed-username-font-style' => $styles['username_font_style'] ?? 'normal', 304 '--wpfed-email-font-size' => $styles['email_font_size'] ?? '14px', 305 '--wpfed-email-font-weight' => $styles['email_font_weight'] ?? 'normal', 306 '--wpfed-email-font-style' => $styles['email_font_style'] ?? 'normal', 307 '--wpfed-field-labels-font-size' => $styles['field_labels_font_size'] ?? '14px', 308 '--wpfed-field-labels-font-weight' => $styles['field_labels_font_weight'] ?? 'bold', 309 '--wpfed-field-labels-font-style' => $styles['field_labels_font_style'] ?? 'normal', 310 '--wpfed-comment-font-size' => $styles['comment_font_size'] ?? '16px', 311 '--wpfed-comment-font-weight' => $styles['comment_font_weight'] ?? 'normal', 312 '--wpfed-comment-font-style' => $styles['comment_font_style'] ?? 'normal', 313 ); 314 315 $css = ':root {'; 316 foreach ($css_vars as $var => $value) { 317 $css .= esc_attr($var) . ': ' . esc_attr($value) . ';'; 318 } 319 $css .= '}'; 320 321 // Add enhanced CSS with !important declarations to override external theme editors 322 $css .= ' 323 /* Vertical alignment for entry content - DISABLED 324 .wpfed-comment-content { 325 display: flex !important; 326 flex-direction: column !important; 327 } 328 329 .wpfed-comment-content { 330 justify-content: ' . ($styles['vertical_alignment'] === 'middle' ? 'center' : ($styles['vertical_alignment'] === 'bottom' ? 'flex-end' : 'flex-start')) . ' !important; 331 } 332 */ 333 334 /* Date Typography */ 335 .wpfed-comment-date { 336 font-size: var(--wpfed-date-font-size) !important; 337 font-weight: var(--wpfed-date-font-weight) !important; 338 font-style: var(--wpfed-date-font-style) !important; 339 } 340 341 /* Username Typography */ 342 .wpfed-username { 343 font-size: var(--wpfed-username-font-size) !important; 344 font-weight: var(--wpfed-username-font-weight) !important; 345 font-style: var(--wpfed-username-font-style) !important; 346 } 347 348 /* Field Labels Typography */ 349 .wpfed-field-label { 350 font-size: var(--wpfed-field-labels-font-size) !important; 351 font-weight: var(--wpfed-field-labels-font-weight) !important; 352 font-style: var(--wpfed-field-labels-font-style) !important; 353 } 354 355 /* Email Field Typography */ 356 .wpfed-field-email .wpfed-field-value { 357 font-size: var(--wpfed-email-font-size) !important; 358 font-weight: var(--wpfed-email-font-weight) !important; 359 font-style: var(--wpfed-email-font-style) !important; 360 } 361 362 /* Comment Field Typography */ 363 .wpfed-field-comment .wpfed-field-value { 364 font-size: var(--wpfed-comment-font-size) !important; 365 font-weight: var(--wpfed-comment-font-weight) !important; 366 font-style: var(--wpfed-comment-font-style) !important; 367 } 368 369 /* General Field Typography (fallback for other fields) */ 370 .wpfed-field-general .wpfed-field-value { 371 font-size: var(--wpfed-comment-font-size) !important; 372 font-weight: var(--wpfed-comment-font-weight) !important; 373 font-style: var(--wpfed-comment-font-style) !important; 374 } 375 376 /* Ensure typography overrides work with common page builders */ 377 .elementor .wpfed-comment-date, 378 .elementor-widget .wpfed-comment-date, 379 .et_pb_module .wpfed-comment-date, 380 .vc_row .wpfed-comment-date { 381 font-size: var(--wpfed-date-font-size) !important; 382 font-weight: var(--wpfed-date-font-weight) !important; 383 font-style: var(--wpfed-date-font-style) !important; 384 } 385 386 .elementor .wpfed-username, 387 .elementor-widget .wpfed-username, 388 .et_pb_module .wpfed-username, 389 .vc_row .wpfed-username { 390 font-size: var(--wpfed-username-font-size) !important; 391 font-weight: var(--wpfed-username-font-weight) !important; 392 font-style: var(--wpfed-username-font-style) !important; 393 } 394 395 .elementor .wpfed-field-label, 396 .elementor-widget .wpfed-field-label, 397 .et_pb_module .wpfed-field-label, 398 .vc_row .wpfed-field-label { 399 font-size: var(--wpfed-field-labels-font-size) !important; 400 font-weight: var(--wpfed-field-labels-font-weight) !important; 401 font-style: var(--wpfed-field-labels-font-style) !important; 402 } 403 404 .elementor .wpfed-field-email .wpfed-field-value, 405 .elementor-widget .wpfed-field-email .wpfed-field-value, 406 .et_pb_module .wpfed-field-email .wpfed-field-value, 407 .vc_row .wpfed-field-email .wpfed-field-value { 408 font-size: var(--wpfed-email-font-size) !important; 409 font-weight: var(--wpfed-email-font-weight) !important; 410 font-style: var(--wpfed-email-font-style) !important; 411 } 412 413 .elementor .wpfed-field-comment .wpfed-field-value, 414 .elementor-widget .wpfed-field-comment .wpfed-field-value, 415 .et_pb_module .wpfed-field-comment .wpfed-field-value, 416 .vc_row .wpfed-field-comment .wpfed-field-value { 417 font-size: var(--wpfed-comment-font-size) !important; 418 font-weight: var(--wpfed-comment-font-weight) !important; 419 font-style: var(--wpfed-comment-font-style) !important; 420 } 421 '; 422 423 return $css; 424 } 425 426 /** 427 * Generates an HTML-formatted error message. 428 * 429 * @param string $message The error message text. 430 * @return string The formatted error message. 431 */ 432 private function get_error_message($message) { 433 return '<div class="wpfed-error">' . $message . '</div>'; 434 } 435 436 /** 437 * Determine field type class for styling 438 * 439 * @param array $form_field The form field data 440 * @return string CSS class for field type 441 */ 442 private function get_field_type_class($form_field) { 443 $field_type = $form_field['type'] ?? ''; 444 $field_label = strtolower($form_field['label'] ?? ''); 445 446 // Check for email fields 447 if ($field_type === 'email' || stripos($field_label, 'email') !== false) { 448 return 'wpfed-field-email'; 449 } 450 451 // Check for comment/message fields 452 if ($field_type === 'textarea' || 453 stripos($field_label, 'comment') !== false || 454 stripos($field_label, 'message') !== false || 455 stripos($field_label, 'description') !== false) { 456 return 'wpfed-field-comment'; 457 } 458 459 return 'wpfed-field-general'; 460 } 243 461 } 244 462 245 /** 246 * Generate custom CSS based on style settings 247 * 248 * @param array $styles Style settings 249 * @return string CSS rules to apply 250 */ 251 function wpfed_generate_custom_css($styles) { 252 $css = ''; 253 254 // Apply default styles if specific settings are not provided 255 $background_color = isset($styles['background_color']) ? $styles['background_color'] : '#f9f9f9'; 256 $border_color = isset($styles['border_color']) ? $styles['border_color'] : '#e0e0e0'; 257 $text_color = isset($styles['text_color']) ? $styles['text_color'] : '#333333'; 258 $header_color = isset($styles['header_color']) ? $styles['header_color'] : '#444444'; 259 $border_radius = isset($styles['border_radius']) ? $styles['border_radius'] : '5px'; 260 $padding = isset($styles['padding']) ? $styles['padding'] : '15px'; 261 $box_shadow = isset($styles['box_shadow']) ? $styles['box_shadow'] : '0 2px 5px rgba(0,0,0,0.1)'; 262 263 // Configure CSS rules for the comments container 264 $css .= '.wpfed-comments-container {'; 265 $css .= 'margin-bottom: 20px;'; 266 $css .= '}'; 267 268 // Configure CSS for each individual comment 269 $css .= '.wpfed-comment {'; 270 $css .= 'background-color: ' . $background_color . ';'; 271 $css .= 'color: ' . $text_color . ';'; 272 $css .= 'border: 1px solid ' . $border_color . ';'; 273 $css .= 'border-radius: ' . $border_radius . ';'; 274 $css .= 'padding: ' . $padding . ';'; 275 $css .= 'margin-bottom: 20px;'; 276 277 // Include box shadow only if specified and not set to 'none' 278 if ($box_shadow !== 'none') { 279 $css .= 'box-shadow: ' . $box_shadow . ';'; 280 } 281 282 $css .= '}'; 283 284 // Customize comment date display 285 $css .= '.wpfed-comment-date {'; 286 $css .= 'font-size: 0.9em;'; 287 $css .= 'color: ' . $header_color . ';'; 288 $css .= 'margin-bottom: 10px;'; 289 $css .= 'font-weight: bold;'; 290 $css .= '}'; 291 292 // Define styles for the username 293 $css .= '.wpfed-username {'; 294 $css .= 'font-weight: bold;'; 295 $css .= 'color: ' . $header_color . ';'; 296 $css .= '}'; 297 298 // Configure styles for comment fields 299 $css .= '.wpfed-comment-field {'; 300 $css .= 'margin-bottom: 8px;'; 301 $css .= '}'; 302 303 // Define font styles for field labels 304 $css .= '.wpfed-field-label {'; 305 $css .= 'font-weight: bold;'; 306 $css .= 'color: ' . $header_color . ';'; 307 $css .= '}'; 308 309 // Define styles for field values 310 $css .= '.wpfed-field-value {'; 311 $css .= 'word-break: break-word;'; 312 $css .= '}'; 313 314 // Remove margin for last field element 315 $css .= '.wpfed-comment-field:last-child {'; 316 $css .= 'margin-bottom: 0;'; 317 $css .= '}'; 318 319 // Configure styles for error messages 320 $css .= '.wpfed-error {'; 321 $css .= 'color: #d63638;'; 322 $css .= 'padding: 10px;'; 323 $css .= 'border: 1px solid #ffb8b8;'; 324 $css .= 'background-color: #ffecec;'; 325 $css .= 'border-radius: 4px;'; 326 $css .= 'margin-bottom: 20px;'; 327 $css .= '}'; 328 329 // Define styles for 'no entries' message 330 $css .= '.wpfed-no-entries {'; 331 $css .= 'padding: 15px;'; 332 $css .= 'text-align: center;'; 333 $css .= 'background-color: ' . $background_color . ';'; 334 $css .= 'border: 1px solid ' . $border_color . ';'; 335 $css .= 'border-radius: ' . $border_radius . ';'; 336 $css .= '}'; 337 338 return $css; 339 } 463 // Initialize the shortcode handler class. 464 new WPFED_Shortcode(); -
entries-display-for-wpforms/trunk/readme.txt
r3264722 r3325824 1 1 === Entries Display for WPForms === 2 Contributors: y evdel2 Contributors: yddev, yevdel 3 3 Tags: wpforms, entries, display, comments, feedback 4 4 Requires at least: 5.0 5 5 Tested up to: 6.7 6 Stable tag: 0. 36 Stable tag: 0.5 7 7 Requires PHP: 7.0 8 8 License: GPLv2 or later 9 9 License URI: https://www.gnu.org/licenses/gpl-2.0.html 10 10 11 Display WPForms entries as beautifully styled comments with full customization options. Perfect for testimonials, reviews, and user feedback.11 Display WPForms entries as beautifully styled comments with advanced typography controls and theme override capabilities. Perfect for testimonials, reviews, and user feedback. 12 12 13 13 == Description == … … 18 18 19 19 * **Simple Shortcode Implementation** - Display entries with a simple shortcode: [wpforms_entries_display] 20 * **Live Preview** - See design changes in real-time directly in the settings panel 20 * **Advanced Typography Controls** - Granular font styling for dates, usernames, emails, field labels, and content 21 * **Theme Override Protection** - Typography settings use !important CSS to override external theme editors like Elementor 22 * **Smart Field Detection** - Automatically detects and styles email fields, comments, and general content differently 21 23 * **Customizable Styling** - Control colors, borders, shadows, and spacing to match your site's design 22 24 * **Field Selection** - Choose which form fields to display and in what order … … 27 29 * **Field Labels** - Show or hide field labels for cleaner display 28 30 * **Empty Fields** - Option to hide fields with no content 31 * **Live Preview** - Real-time preview of your styling changes in the admin area 32 33 = Advanced Typography System = 34 35 Our comprehensive typography system gives you complete control over text styling: 36 37 * **Date Typography** - Customize font size, weight, and style for entry dates 38 * **Username Typography** - Style WordPress usernames independently 39 * **Email Typography** - Specific styling for email field values 40 * **Field Labels Typography** - Control appearance of all field labels (e.g., "Name:", "Email:") 41 * **Content Typography** - Style comment/message fields and general content 42 43 Each typography setting includes font size (10px-30px), weight (100-900), and style (normal/italic) options with real-time preview. 44 45 = Theme & Page Builder Compatibility = 46 47 Built with modern WordPress development in mind, this plugin ensures your typography choices always take precedence: 48 49 * **Override Protection** - Uses !important CSS declarations to override theme styling 50 * **Page Builder Support** - Specifically targets Elementor, Divi, and Visual Composer 51 * **Dynamic Form Handling** - Automatically adapts to any form structure with any number of fields 52 * **Smart Field Recognition** - Intelligently detects field types for appropriate styling 29 53 30 54 = Intuitive Shortcode Generator = 31 55 32 56 Say goodbye to manual shortcode typing! Our built-in visual shortcode generator makes configuration a breeze. Simply select your options from dropdown menus, see a live preview of your shortcode, and copy it with a single click. This powerful tool eliminates guesswork and ensures perfect implementation every time - even for WordPress beginners! 57 58 = Enhanced Admin Experience = 59 60 * **Live Preview Widget** - Floating sticky preview that updates in real-time as you adjust settings 61 * **Organized Settings** - Clean, card-based layout with logical grouping 62 * **Typography Controls** - Grid-based typography controls for easy configuration 63 * **Visual Feedback** - Immediate preview of changes without page refresh 33 64 34 65 = Requirements = … … 86 117 == Screenshots == 87 118 88 1. Frontend display of testimonials from WPForms on the main page 89 2. General plugin settings page 90 3. Live preview settings for testimonial bubble design 119 1. Frontend display of form entries as styled comments 120 2. Admin settings page with customization options 121 3. Visual shortcode generator for easy implementation 122 4. Style customization options for perfect integration with your theme 91 123 92 124 == Changelog == 93 125 126 = 0.4 = 127 128 * **NEW Features**: Added comprehensive typography controls, theme override protection, and smart field detection 129 * **Enhanced Admin Experience**: Added floating sticky Live Preview widget, reorganized settings into card-based sections, improved typography controls 130 * **Security & Stability**: Strengthened security with proper nonce validation, improved AJAX handling, enhanced input sanitization 131 * **Code Improvements**: Refactored admin settings into class-based structure, enhanced CSS generation, better code organization 132 94 133 = 0.3 = 134 95 135 * UI/UX Improvements: Added live preview section, reorganized settings into collapsible sections, fixed color picker display, improved spacing and layout, enhanced responsive design, optimized CSS code. 96 136 97 137 = 0.2 = 138 98 139 * Fixed plugin review issues: proper JS/CSS enqueuing, removed deprecated function calls. Improved admin UI with better layout, fixed date format selector issues, and enhanced responsive design. 99 140 100 141 = 0.1 = 142 101 143 * Initial release -
entries-display-for-wpforms/trunk/wpforms-entries-display.php
r3264712 r3325824 3 3 * Plugin Name: Entries Display for WPForms 4 4 * Description: Display WPForms entries as styled comments with customizable options. 5 * Version: 0. 35 * Version: 0.4 6 6 * Author: YD:dev 7 7 * Author URI: https://deliamure.com/ 8 8 * Text Domain: entries-display-for-wpforms 9 * License: GPL- 2.0+10 * License URI: http://www.gnu.org/licenses/gpl- 2.0.txt9 * License: GPL-3.0+ 10 * License URI: http://www.gnu.org/licenses/gpl-3.0.txt 11 11 */ 12 12 … … 16 16 } 17 17 18 if (!function_exists('WP_Filesystem')) { 19 require_once ABSPATH . 'wp-admin/includes/file.php'; 18 // Define plugin constants for directory paths and version control. 19 if (!defined('WPFED_VERSION')) { 20 $plugin_data = get_file_data(__FILE__, array('Version' => 'Version'), false); 21 define('WPFED_VERSION', $plugin_data['Version']); 20 22 } 21 WP_Filesystem();22 global $wp_filesystem;23 23 24 // Define plugin constants for directory paths and version control. 25 define('WPFED_PLUGIN_DIR', plugin_dir_path(__FILE__)); 26 define('WPFED_PLUGIN_URL', plugin_dir_url(__FILE__)); 27 define('WPFED_VERSION', '0.2'); 24 if (!defined('WPFED_PLUGIN_DIR')) { 25 define('WPFED_PLUGIN_DIR', plugin_dir_path(__FILE__)); 26 } 27 28 if (!defined('WPFED_PLUGIN_URL')) { 29 define('WPFED_PLUGIN_URL', plugin_dir_url(__FILE__)); 30 } 28 31 29 32 // Include necessary files for plugin functionality. … … 50 53 $screen = get_current_screen(); 51 54 if ($screen && $screen->id === 'settings_page_entries-display-for-wpforms') { 52 echo '<input type="hidden" id="wpfed_nonce" value="' . esc_attr(wp_create_nonce('wpfed_get_fields_nonce')) . '">';55 wp_nonce_field('wpfed_get_fields_nonce', 'wpfed_nonce'); 53 56 } 54 57 } 55 58 add_action('admin_footer', 'wpfed_admin_footer'); 56 59 57 // Activation hook to set default options and create necessary directories.60 // Activation hook to set default options. 58 61 function wpfed_activate() { 59 62 // Define default options for the plugin. … … 75 78 'padding' => '15px', 76 79 'box_shadow' => '0 2px 5px rgba(0,0,0,0.1)', 80 // New vertical alignment option 81 'vertical_alignment' => 'top', 82 // Updated text styling options with field-specific typography 83 'date_font_size' => '14px', 84 'date_font_weight' => 'bold', 85 'date_font_style' => 'normal', 86 'username_font_size' => '14px', 87 'username_font_weight' => 'bold', 88 'username_font_style' => 'normal', 89 'email_font_size' => '14px', 90 'email_font_weight' => 'normal', 91 'email_font_style' => 'normal', 92 'field_labels_font_size' => '14px', 93 'field_labels_font_weight' => 'bold', 94 'field_labels_font_style' => 'normal', 95 'comment_font_size' => '16px', 96 'comment_font_weight' => 'normal', 97 'comment_font_style' => 'normal', 77 98 ) 78 99 ); … … 81 102 if (!get_option('wpfed_options')) { 82 103 update_option('wpfed_options', $default_options); 83 }84 85 // Create required folders for assets if they do not exist.86 if (!file_exists(WPFED_PLUGIN_DIR . 'assets')) {87 WP_Filesystem();88 global $wp_filesystem;89 $wp_filesystem->mkdir($upload_dir['basedir'] . '/wpforms-entries-display', 0755);90 }91 92 if (!file_exists(WPFED_PLUGIN_DIR . 'assets/css')) {93 WP_Filesystem();94 global $wp_filesystem;95 $wp_filesystem->mkdir($upload_dir['basedir'] . '/wpforms-entries-display/css', 0755);96 }97 98 if (!file_exists(WPFED_PLUGIN_DIR . 'assets/js')) {99 WP_Filesystem();100 global $wp_filesystem;101 $wp_filesystem->mkdir($upload_dir['basedir'] . '/wpforms-entries-display/js', 0755);102 104 } 103 105 }
Note: See TracChangeset
for help on using the changeset viewer.