README.md
5 months ago
wpdm-modal.css
3 months ago
wpdm-modal.js
3 months ago
wpdm-modal.min.css
3 months ago
wpdm-modal.min.js
3 months ago
README.md
558 lines
| 1 | # WPDM Dialog System |
| 2 | |
| 3 | Enterprise-grade modal dialogs for WordPress Download Manager. |
| 4 | |
| 5 | ## Overview |
| 6 | |
| 7 | The WPDM Dialog System provides a modern, accessible, and customizable dialog API for displaying alerts, confirmations, prompts, and custom dialogs in your WordPress Download Manager implementations. |
| 8 | |
| 9 | ## Features |
| 10 | |
| 11 | - **Promise-based API** - All methods return Promises for easy async/await usage |
| 12 | - **Dark Mode Support** - Automatically detects and adapts to light/dark themes |
| 13 | - **Accessible** - Proper ARIA attributes, keyboard navigation, and focus management |
| 14 | - **Responsive** - Mobile-friendly design with bottom sheet on small screens |
| 15 | - **Customizable** - Multiple sizes, icon types, and button configurations |
| 16 | - **XSS Safe** - HTML escaping by default, opt-in for HTML content |
| 17 | |
| 18 | ## Quick Start |
| 19 | |
| 20 | ```javascript |
| 21 | // Alert |
| 22 | WPDM.dialog.alert('Welcome!', 'Thanks for using WordPress Download Manager.'); |
| 23 | |
| 24 | // Confirm |
| 25 | const confirmed = await WPDM.dialog.confirm('Delete File', 'Are you sure you want to delete this file?'); |
| 26 | if (confirmed) { |
| 27 | // User clicked Confirm |
| 28 | } |
| 29 | |
| 30 | // Prompt |
| 31 | const filename = await WPDM.dialog.prompt('Rename File', 'Enter a new name for this file:', { |
| 32 | inputValue: 'document.pdf', |
| 33 | placeholder: 'Enter filename' |
| 34 | }); |
| 35 | if (filename) { |
| 36 | // User submitted: filename |
| 37 | } |
| 38 | |
| 39 | // AJAX - Load content from server |
| 40 | await WPDM.dialog.ajax('Package Details', '/api/package/123', { |
| 41 | size: 'lg', |
| 42 | buttons: [{ text: 'Close', type: 'primary', action: 'close' }] |
| 43 | }); |
| 44 | ``` |
| 45 | |
| 46 | ## API Reference |
| 47 | |
| 48 | ### `WPDM.dialog.alert(title, message, options)` |
| 49 | |
| 50 | Shows an informational alert dialog with a single OK button. |
| 51 | |
| 52 | **Parameters:** |
| 53 | | Parameter | Type | Description | |
| 54 | |-----------|------|-------------| |
| 55 | | `title` | string | Dialog title | |
| 56 | | `message` | string | Dialog message | |
| 57 | | `options` | object | Additional options (optional) | |
| 58 | |
| 59 | **Options:** |
| 60 | | Option | Type | Default | Description | |
| 61 | |--------|------|---------|-------------| |
| 62 | | `type` | string | `'info'` | Icon type: `info`, `success`, `warning`, `danger` | |
| 63 | | `buttonText` | string | `'OK'` | Button text | |
| 64 | | `size` | string | `'sm'` | Dialog size: `sm`, `md`, `lg`, `xl` | |
| 65 | | `html` | boolean | `false` | Allow HTML in message | |
| 66 | |
| 67 | **Returns:** `Promise<boolean>` - Always resolves to `true` |
| 68 | |
| 69 | **Example:** |
| 70 | ```javascript |
| 71 | await WPDM.dialog.alert('Success', 'Your file has been uploaded.', { |
| 72 | type: 'success' |
| 73 | }); |
| 74 | ``` |
| 75 | |
| 76 | --- |
| 77 | |
| 78 | ### `WPDM.dialog.success(title, message, options)` |
| 79 | |
| 80 | Shorthand for alert with success icon. |
| 81 | |
| 82 | ```javascript |
| 83 | await WPDM.dialog.success('Saved!', 'Your changes have been saved.'); |
| 84 | ``` |
| 85 | |
| 86 | --- |
| 87 | |
| 88 | ### `WPDM.dialog.warning(title, message, options)` |
| 89 | |
| 90 | Shorthand for alert with warning icon. |
| 91 | |
| 92 | ```javascript |
| 93 | await WPDM.dialog.warning('Warning', 'This action cannot be undone.'); |
| 94 | ``` |
| 95 | |
| 96 | --- |
| 97 | |
| 98 | ### `WPDM.dialog.error(title, message, options)` |
| 99 | |
| 100 | Shorthand for alert with danger/error icon. |
| 101 | |
| 102 | ```javascript |
| 103 | await WPDM.dialog.error('Error', 'Failed to save the file. Please try again.'); |
| 104 | ``` |
| 105 | |
| 106 | --- |
| 107 | |
| 108 | ### `WPDM.dialog.confirm(title, message, options)` |
| 109 | |
| 110 | Shows a confirmation dialog with Cancel and Confirm buttons. |
| 111 | |
| 112 | **Parameters:** |
| 113 | | Parameter | Type | Description | |
| 114 | |-----------|------|-------------| |
| 115 | | `title` | string | Dialog title | |
| 116 | | `message` | string | Dialog message | |
| 117 | | `options` | object | Additional options (optional) | |
| 118 | |
| 119 | **Options:** |
| 120 | | Option | Type | Default | Description | |
| 121 | |--------|------|---------|-------------| |
| 122 | | `type` | string | `'question'` | Icon type | |
| 123 | | `confirmText` | string | `'Confirm'` | Confirm button text | |
| 124 | | `cancelText` | string | `'Cancel'` | Cancel button text | |
| 125 | | `confirmType` | string | `'primary'` | Confirm button style: `primary`, `success`, `danger` | |
| 126 | | `size` | string | `'sm'` | Dialog size | |
| 127 | | `html` | boolean | `false` | Allow HTML in message | |
| 128 | |
| 129 | **Returns:** `Promise<boolean>` - `true` if confirmed, `false` otherwise |
| 130 | |
| 131 | **Example:** |
| 132 | ```javascript |
| 133 | const proceed = await WPDM.dialog.confirm( |
| 134 | 'Publish Package', |
| 135 | 'Are you sure you want to publish this package?', |
| 136 | { |
| 137 | confirmText: 'Publish', |
| 138 | cancelText: 'Not Yet' |
| 139 | } |
| 140 | ); |
| 141 | |
| 142 | if (proceed) { |
| 143 | // Publish the package |
| 144 | } |
| 145 | ``` |
| 146 | |
| 147 | --- |
| 148 | |
| 149 | ### `WPDM.dialog.confirmDelete(title, message, options)` |
| 150 | |
| 151 | Shorthand for confirm with danger styling (for delete operations). |
| 152 | |
| 153 | ```javascript |
| 154 | const shouldDelete = await WPDM.dialog.confirmDelete( |
| 155 | 'Delete Package', |
| 156 | 'This will permanently delete the package and all associated files.' |
| 157 | ); |
| 158 | |
| 159 | if (shouldDelete) { |
| 160 | // Delete the package |
| 161 | } |
| 162 | ``` |
| 163 | |
| 164 | --- |
| 165 | |
| 166 | ### `WPDM.dialog.prompt(title, message, options)` |
| 167 | |
| 168 | Shows a dialog with an input field. |
| 169 | |
| 170 | **Parameters:** |
| 171 | | Parameter | Type | Description | |
| 172 | |-----------|------|-------------| |
| 173 | | `title` | string | Dialog title | |
| 174 | | `message` | string | Dialog message (optional) | |
| 175 | | `options` | object | Additional options (optional) | |
| 176 | |
| 177 | **Options:** |
| 178 | | Option | Type | Default | Description | |
| 179 | |--------|------|---------|-------------| |
| 180 | | `type` | string | `'question'` | Icon type | |
| 181 | | `inputType` | string | `'text'` | Input type: `text`, `email`, `password`, `number`, `url` | |
| 182 | | `inputValue` | string | `''` | Initial input value | |
| 183 | | `placeholder` | string | `''` | Input placeholder | |
| 184 | | `confirmText` | string | `'Submit'` | Submit button text | |
| 185 | | `cancelText` | string | `'Cancel'` | Cancel button text | |
| 186 | | `size` | string | `'md'` | Dialog size | |
| 187 | | `html` | boolean | `false` | Allow HTML in message | |
| 188 | |
| 189 | **Returns:** `Promise<string|null>` - Input value if submitted, `null` if cancelled |
| 190 | |
| 191 | **Example:** |
| 192 | ```javascript |
| 193 | const newName = await WPDM.dialog.prompt( |
| 194 | 'Rename Package', |
| 195 | 'Enter a new name for this package:', |
| 196 | { |
| 197 | inputValue: 'My Package', |
| 198 | placeholder: 'Package name' |
| 199 | } |
| 200 | ); |
| 201 | |
| 202 | if (newName !== null) { |
| 203 | // Rename to: newName |
| 204 | } |
| 205 | ``` |
| 206 | |
| 207 | --- |
| 208 | |
| 209 | ### `WPDM.dialog.ajax(title, urlOrOptions, options)` |
| 210 | |
| 211 | Shows a dialog with content loaded asynchronously via AJAX. Displays a loading spinner while fetching content. |
| 212 | |
| 213 | **Parameters:** |
| 214 | | Parameter | Type | Description | |
| 215 | |-----------|------|-------------| |
| 216 | | `title` | string | Dialog title | |
| 217 | | `urlOrOptions` | string\|object | URL string or AJAX options object | |
| 218 | | `options` | object | Additional dialog options (optional) | |
| 219 | |
| 220 | **AJAX Options (when `urlOrOptions` is an object):** |
| 221 | | Option | Type | Default | Description | |
| 222 | |--------|------|---------|-------------| |
| 223 | | `url` | string | Required | URL to fetch content from | |
| 224 | | `method` | string | `'GET'` | HTTP method | |
| 225 | | `data` | object | `{}` | Data to send with request | |
| 226 | | `dataType` | string | `'html'` | Expected response type: `html`, `json` | |
| 227 | | `headers` | object | `{}` | Additional headers | |
| 228 | | `timeout` | number | `30000` | Request timeout in ms | |
| 229 | |
| 230 | **Dialog Options:** |
| 231 | | Option | Type | Default | Description | |
| 232 | |--------|------|---------|-------------| |
| 233 | | `type` | string | `'info'` | Icon type | |
| 234 | | `size` | string | `'md'` | Dialog size | |
| 235 | | `subtitle` | string | - | Subtitle below title | |
| 236 | | `closable` | boolean | `true` | Show close button | |
| 237 | | `backdrop` | string | - | `'static'` to prevent backdrop close | |
| 238 | | `keyboard` | boolean | `true` | Allow Escape key to close | |
| 239 | | `buttons` | array | - | Footer buttons (shown after content loads) | |
| 240 | | `errorMessage` | string | `'Failed to load...'` | Custom error message | |
| 241 | | `showRetry` | boolean | `true` | Show retry button on error | |
| 242 | | `onLoad` | function | - | Callback after content loads: `($body, data)` | |
| 243 | | `onError` | function | - | Callback on error: `(xhr, status, error)` | |
| 244 | |
| 245 | **JSON Response Format:** |
| 246 | When `dataType: 'json'`, the response can include: |
| 247 | ```javascript |
| 248 | { |
| 249 | content: '<html>', // or 'html' or 'body' |
| 250 | buttons: [ // Optional: override dialog buttons |
| 251 | { text: 'OK', type: 'primary', action: 'ok' } |
| 252 | ] |
| 253 | } |
| 254 | ``` |
| 255 | |
| 256 | **Returns:** `Promise<{action: string, data: any}>` - Result object with action and response data |
| 257 | |
| 258 | **Examples:** |
| 259 | |
| 260 | ```javascript |
| 261 | // Simple URL |
| 262 | await WPDM.dialog.ajax('Package Details', '/api/package/123'); |
| 263 | |
| 264 | // With options |
| 265 | await WPDM.dialog.ajax('User Profile', '/api/user/details', { |
| 266 | size: 'lg', |
| 267 | type: 'info', |
| 268 | buttons: [ |
| 269 | { text: 'Close', type: 'secondary', action: 'close' }, |
| 270 | { text: 'Edit', type: 'primary', action: 'edit' } |
| 271 | ] |
| 272 | }); |
| 273 | |
| 274 | // POST request with data |
| 275 | const result = await WPDM.dialog.ajax('Search Results', { |
| 276 | url: ajaxurl, |
| 277 | method: 'POST', |
| 278 | data: { action: 'wpdm_search', query: 'documents' } |
| 279 | }, { |
| 280 | size: 'xl', |
| 281 | onLoad: function($body, data) { |
| 282 | // Initialize any JavaScript in loaded content |
| 283 | $body.find('.datepicker').datepicker(); |
| 284 | } |
| 285 | }); |
| 286 | |
| 287 | // Handle button actions |
| 288 | if (result.action === 'edit') { |
| 289 | // User clicked Edit button |
| 290 | } |
| 291 | |
| 292 | // WordPress admin-ajax.php example |
| 293 | await WPDM.dialog.ajax('Package Settings', { |
| 294 | url: ajaxurl, |
| 295 | method: 'POST', |
| 296 | data: { |
| 297 | action: 'wpdm_get_package_settings', |
| 298 | package_id: 123, |
| 299 | _wpnonce: wpdm_nonce |
| 300 | }, |
| 301 | dataType: 'json' |
| 302 | }, { |
| 303 | size: 'lg', |
| 304 | buttons: [ |
| 305 | { text: 'Cancel', type: 'secondary', action: 'cancel' }, |
| 306 | { text: 'Save', type: 'primary', action: 'save' } |
| 307 | ] |
| 308 | }); |
| 309 | ``` |
| 310 | |
| 311 | --- |
| 312 | |
| 313 | ### `WPDM.dialog.load(title, url, options)` |
| 314 | |
| 315 | Alias for `ajax()` with simplified parameters. |
| 316 | |
| 317 | ```javascript |
| 318 | await WPDM.dialog.load('Help', '/help/getting-started'); |
| 319 | ``` |
| 320 | |
| 321 | --- |
| 322 | |
| 323 | ### `WPDM.dialog.show(options)` |
| 324 | |
| 325 | Advanced method for creating custom dialogs. |
| 326 | |
| 327 | **Options:** |
| 328 | | Option | Type | Default | Description | |
| 329 | |--------|------|---------|-------------| |
| 330 | | `title` | string | Required | Dialog title | |
| 331 | | `subtitle` | string | - | Subtitle below title | |
| 332 | | `message` | string | - | Main message content | |
| 333 | | `type` | string | `'info'` | Icon type: `info`, `success`, `warning`, `danger`, `question` | |
| 334 | | `icon` | boolean | `true` | Show/hide icon | |
| 335 | | `size` | string | `'md'` | Size: `sm`, `md`, `lg`, `xl` | |
| 336 | | `input` | boolean | `false` | Show input field | |
| 337 | | `inputType` | string | `'text'` | Input type | |
| 338 | | `inputValue` | string | `''` | Initial input value | |
| 339 | | `placeholder` | string | `''` | Input placeholder | |
| 340 | | `content` | string | - | Custom HTML content | |
| 341 | | `html` | boolean | `false` | Allow HTML in message | |
| 342 | | `closable` | boolean | `true` | Show close button | |
| 343 | | `backdrop` | string | - | `'static'` to prevent backdrop close | |
| 344 | | `keyboard` | boolean | `true` | Allow Escape key to close | |
| 345 | | `buttons` | array | - | Custom button configuration | |
| 346 | | `compactFooter` | boolean | `false` | No background on footer | |
| 347 | |
| 348 | **Button Configuration:** |
| 349 | ```javascript |
| 350 | buttons: [ |
| 351 | { text: 'Cancel', type: 'secondary', action: 'cancel' }, |
| 352 | { text: 'Save', type: 'primary', action: 'save' }, |
| 353 | { text: 'Delete', type: 'danger', action: 'delete' } |
| 354 | ] |
| 355 | ``` |
| 356 | |
| 357 | **Button Types:** `secondary`, `primary`, `success`, `danger` |
| 358 | |
| 359 | **Returns:** `Promise<{action: string, value: string|null}>` - Result object with action and input value |
| 360 | |
| 361 | **Example:** |
| 362 | ```javascript |
| 363 | const result = await WPDM.dialog.show({ |
| 364 | title: 'Configure Download', |
| 365 | subtitle: 'Set download options', |
| 366 | type: 'info', |
| 367 | size: 'lg', |
| 368 | content: ` |
| 369 | <div class="form-group"> |
| 370 | <label>Max Downloads</label> |
| 371 | <input type="number" class="form-control" id="max-downloads" value="10"> |
| 372 | </div> |
| 373 | `, |
| 374 | buttons: [ |
| 375 | { text: 'Cancel', type: 'secondary', action: 'cancel' }, |
| 376 | { text: 'Apply', type: 'primary', action: 'apply' } |
| 377 | ] |
| 378 | }); |
| 379 | |
| 380 | if (result.action === 'apply') { |
| 381 | const maxDownloads = document.getElementById('max-downloads').value; |
| 382 | // Apply configuration |
| 383 | } |
| 384 | ``` |
| 385 | |
| 386 | ## Dialog Sizes |
| 387 | |
| 388 | | Size | Max Width | Best For | |
| 389 | |------|-----------|----------| |
| 390 | | `sm` | 320px | Simple alerts and confirms | |
| 391 | | `md` | 420px | Prompts and small forms | |
| 392 | | `lg` | 560px | Larger forms | |
| 393 | | `xl` | 720px | Complex content | |
| 394 | |
| 395 | ## Icon Types |
| 396 | |
| 397 | | Type | Color | Use Case | |
| 398 | |------|-------|----------| |
| 399 | | `info` | Blue | General information | |
| 400 | | `success` | Green | Success messages | |
| 401 | | `warning` | Orange | Warnings | |
| 402 | | `danger` | Red | Errors, delete confirmations | |
| 403 | | `question` | Purple | Questions, confirmations | |
| 404 | |
| 405 | ## Dark Mode |
| 406 | |
| 407 | The dialog automatically syncs with WPDM's color scheme settings. Detection priority: |
| 408 | |
| 409 | 1. **WPDM Settings** - `wpdm_js.color_scheme` from WordPress Download Manager settings |
| 410 | - `'light'` → Forces light mode |
| 411 | - `'dark'` → Forces dark mode |
| 412 | - `'system'` → Falls through to check page classes or OS preference |
| 413 | 2. **Page Classes** - `.dark-mode` or `.light-mode` class on body or `.w3eden` |
| 414 | 3. **Data Attributes** - `data-theme="dark"` or `data-theme="light"` on html/body |
| 415 | 4. **System Preference** - CSS `prefers-color-scheme` media query |
| 416 | |
| 417 | ### WPDM Color Scheme Setting |
| 418 | |
| 419 | The color scheme is configured in **WPDM → Settings → User Interface** and stored as `__wpdm_color_scheme` option with values: |
| 420 | - `light` - Always use light mode |
| 421 | - `dark` - Always use dark mode |
| 422 | - `system` - Follow operating system preference |
| 423 | |
| 424 | ## Keyboard Shortcuts |
| 425 | |
| 426 | | Key | Action | |
| 427 | |-----|--------| |
| 428 | | `Escape` | Close dialog (if keyboard enabled) | |
| 429 | | `Enter` | Submit prompt input | |
| 430 | | `Tab` | Navigate between buttons | |
| 431 | |
| 432 | ## Accessibility |
| 433 | |
| 434 | - Uses `role="dialog"` and `aria-modal="true"` |
| 435 | - Title linked with `aria-labelledby` |
| 436 | - Focus trapped within dialog |
| 437 | - Focus restored on close |
| 438 | - Close button has `aria-label` |
| 439 | |
| 440 | ## CSS Classes |
| 441 | |
| 442 | ### Wrapper Classes |
| 443 | - `.wpdm-dialog-wrapper` - Main wrapper |
| 444 | - `.wpdm-dialog-visible` - Added when visible |
| 445 | - `.dark-mode` / `.light-mode` - Theme classes |
| 446 | |
| 447 | ### Size Classes |
| 448 | - `.wpdm-dialog--sm` |
| 449 | - `.wpdm-dialog--md` |
| 450 | - `.wpdm-dialog--lg` |
| 451 | - `.wpdm-dialog--xl` |
| 452 | |
| 453 | ### Icon Variant Classes |
| 454 | - `.wpdm-dialog__icon--info` |
| 455 | - `.wpdm-dialog__icon--success` |
| 456 | - `.wpdm-dialog__icon--warning` |
| 457 | - `.wpdm-dialog__icon--danger` |
| 458 | - `.wpdm-dialog__icon--question` |
| 459 | |
| 460 | ### Button Classes |
| 461 | - `.wpdm-dialog__btn--secondary` |
| 462 | - `.wpdm-dialog__btn--primary` |
| 463 | - `.wpdm-dialog__btn--success` |
| 464 | - `.wpdm-dialog__btn--danger` |
| 465 | - `.wpdm-dialog__btn--loading` |
| 466 | |
| 467 | ### AJAX State Classes |
| 468 | - `.wpdm-dialog__body--ajax` - Body with loading spinner |
| 469 | - `.wpdm-dialog__loading` - Loading container |
| 470 | - `.wpdm-dialog__spinner` - Animated spinner |
| 471 | - `.wpdm-dialog__loading-text` - Loading text |
| 472 | - `.wpdm-dialog__error` - Error state container |
| 473 | - `.wpdm-dialog__error-icon` - Error icon |
| 474 | - `.wpdm-dialog__error-message` - Error message |
| 475 | - `.wpdm-dialog__retry` - Retry button |
| 476 | - `.wpdm-dialog__footer--hidden` - Hidden footer (until content loads) |
| 477 | |
| 478 | ## Browser Support |
| 479 | |
| 480 | - Chrome 60+ |
| 481 | - Firefox 55+ |
| 482 | - Safari 12+ |
| 483 | - Edge 79+ |
| 484 | |
| 485 | Requires Promise support (IE11 needs polyfill). |
| 486 | |
| 487 | ## Migration from Native Dialogs |
| 488 | |
| 489 | **Before (native):** |
| 490 | ```javascript |
| 491 | if (confirm('Delete this file?')) { |
| 492 | deleteFile(); |
| 493 | } |
| 494 | ``` |
| 495 | |
| 496 | **After (WPDM Dialog):** |
| 497 | ```javascript |
| 498 | const confirmed = await WPDM.dialog.confirm('Delete', 'Delete this file?'); |
| 499 | if (confirmed) { |
| 500 | deleteFile(); |
| 501 | } |
| 502 | ``` |
| 503 | |
| 504 | **Before (native prompt):** |
| 505 | ```javascript |
| 506 | const name = prompt('Enter name:', 'Default'); |
| 507 | if (name) { |
| 508 | saveName(name); |
| 509 | } |
| 510 | ``` |
| 511 | |
| 512 | **After (WPDM Dialog):** |
| 513 | ```javascript |
| 514 | const name = await WPDM.dialog.prompt('Name', 'Enter name:', { inputValue: 'Default' }); |
| 515 | if (name !== null) { |
| 516 | saveName(name); |
| 517 | } |
| 518 | ``` |
| 519 | |
| 520 | ## Standalone Usage |
| 521 | |
| 522 | The dialog can be used without the WPDM global object: |
| 523 | |
| 524 | ```javascript |
| 525 | // WPDMDialog is available as a standalone object |
| 526 | WPDMDialog.alert('Hello', 'World'); |
| 527 | ``` |
| 528 | |
| 529 | ## Files |
| 530 | |
| 531 | | File | Purpose | |
| 532 | |------|---------| |
| 533 | | `assets/modal/wpdm-modal.js` | JavaScript implementation | |
| 534 | | `assets/modal/wpdm-modal.css` | CSS styles | |
| 535 | | `assets/modal/README.md` | This documentation | |
| 536 | |
| 537 | ## Installation / Enqueue |
| 538 | |
| 539 | ### In PHP (WordPress) |
| 540 | |
| 541 | ```php |
| 542 | // Enqueue the modal library |
| 543 | wp_enqueue_style('wpdm-modal', WPDM_ASSET_URL . 'modal/wpdm-modal.css', [], WPDM_VERSION); |
| 544 | wp_enqueue_script('wpdm-modal', WPDM_ASSET_URL . 'modal/wpdm-modal.js', ['jquery'], WPDM_VERSION, true); |
| 545 | ``` |
| 546 | |
| 547 | ### In HTML |
| 548 | |
| 549 | ```html |
| 550 | <link rel="stylesheet" href="path/to/wpdm-modal.css"> |
| 551 | <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
| 552 | <script src="path/to/wpdm-modal.js"></script> |
| 553 | ``` |
| 554 | |
| 555 | ## Dependencies |
| 556 | |
| 557 | - jQuery 1.9+ (required) |
| 558 |