ajax-submission.js
1 week ago
ajax-submission.min.js
1 week ago
everest-forms-file-upload.js
4 months ago
everest-forms-file-upload.min.js
4 months ago
everest-forms-survey-polls-quiz.js
1 year ago
everest-forms-survey-polls-quiz.min.js
2 years ago
everest-forms.js
1 week ago
everest-forms.min.js
1 week ago
evf-form-preview.js
1 year ago
evf-form-preview.min.js
1 year ago
text-limit.js
1 year ago
text-limit.min.js
1 year ago
everest-forms-file-upload.js
486 lines
| 1 | 'use strict'; |
| 2 | |
| 3 | ( function($) { |
| 4 | |
| 5 | /** |
| 6 | * Toggle loading message above submit button. |
| 7 | * |
| 8 | * @since 1.3.0 |
| 9 | * |
| 10 | * @param {object} $form jQuery form element. |
| 11 | * |
| 12 | * @returns {Function} event handler function. |
| 13 | */ |
| 14 | function toggleLoadingMessage( $form ) { |
| 15 | return function() { |
| 16 | if ( ! $form.find( '.everest-forms-uploading-in-progress-alert' ).length ) { |
| 17 | $form.find( '.everest-forms-submit-container' ).before( '<div class="everest-forms-error-alert everest-forms-uploading-in-progress-alert">' + window.everest_forms_upload_parms.loading_message + '</div>' ); |
| 18 | } |
| 19 | }; |
| 20 | } |
| 21 | |
| 22 | /** |
| 23 | * Disable submit button while sending files to the server. |
| 24 | * |
| 25 | * @since 1.3.0 |
| 26 | * |
| 27 | * @param {object} dz Dropzone object. |
| 28 | */ |
| 29 | function toggleSubmit( dz ) { |
| 30 | var $form = jQuery( dz.element ).closest( 'form' ); |
| 31 | var $btn = $form.find( '.everest-forms-submit' ); |
| 32 | var disabled = dz.loading > 0; |
| 33 | var handler = toggleLoadingMessage( $form ); |
| 34 | |
| 35 | if ( disabled ) { |
| 36 | $btn.prop( 'disabled', true ); |
| 37 | if ( ! $form.find( '.everest-forms-submit-overlay' ).length ) { |
| 38 | $btn.parent().addClass( 'everest-forms-submit-overlay-container' ); |
| 39 | $btn.parent().append( '<div class="everest-forms-submit-overlay"></div>' ); |
| 40 | $form.find( '.everest-forms-submit-overlay' ).css( 'width', $btn.outerWidth() + 'px' ); |
| 41 | $form.find( '.everest-forms-submit-overlay' ).css( 'height', $btn.parent().outerHeight() + 'px' ); |
| 42 | $form.find( '.everest-forms-submit-overlay' ).on( 'click', handler ); |
| 43 | } |
| 44 | } else { |
| 45 | $btn.prop( 'disabled', false ); |
| 46 | $form.find( '.everest-forms-submit-overlay' ).off( 'click', handler ); |
| 47 | $form.find( '.everest-forms-submit-overlay' ).remove(); |
| 48 | $btn.parent().removeClass( 'everest-forms-submit-overlay-container' ); |
| 49 | if ( $form.find( '.everest-forms-uploading-in-progress-alert' ).length ) { |
| 50 | $form.find( '.everest-forms-uploading-in-progress-alert' ).remove(); |
| 51 | } |
| 52 | } |
| 53 | } |
| 54 | |
| 55 | /** |
| 56 | * Parse JSON or return false. |
| 57 | * |
| 58 | * @since 1.3.0 |
| 59 | * |
| 60 | * @param {string} str JSON string candidate. |
| 61 | * |
| 62 | * @returns {*} Parse object or false. |
| 63 | */ |
| 64 | function parseJSON( str ) { |
| 65 | try { |
| 66 | return JSON.parse( str ); |
| 67 | } catch ( e ) { |
| 68 | return false; |
| 69 | } |
| 70 | } |
| 71 | |
| 72 | /** |
| 73 | * Leave only objects with length. |
| 74 | * |
| 75 | * @since 1.3.0 |
| 76 | * |
| 77 | * @param {object} el Any array. |
| 78 | * |
| 79 | * @returns {bool} Has length more than 0 or no. |
| 80 | */ |
| 81 | function onlyWithLength( el ) { |
| 82 | return el.length > 0; |
| 83 | } |
| 84 | |
| 85 | /** |
| 86 | * Leave only positive elements. |
| 87 | * |
| 88 | * @since 1.3.0 |
| 89 | * |
| 90 | * @param {*} el Any element. |
| 91 | * |
| 92 | * @returns {*} Filter only positive. |
| 93 | */ |
| 94 | function onlyPositive( el ) { |
| 95 | return el; |
| 96 | } |
| 97 | |
| 98 | /** |
| 99 | * Get xhr. |
| 100 | * |
| 101 | * @since 1.3.0 |
| 102 | * |
| 103 | * @param {object} el Object with xhr property. |
| 104 | * |
| 105 | * @returns {*} Get XHR. |
| 106 | */ |
| 107 | function getXHR( el ) { |
| 108 | return el.xhr; |
| 109 | } |
| 110 | |
| 111 | /** |
| 112 | * Get response text. |
| 113 | * |
| 114 | * @since 1.3.0 |
| 115 | * |
| 116 | * @param {object} el Xhr object. |
| 117 | * |
| 118 | * @returns {object} Response text. |
| 119 | */ |
| 120 | function getResponseText( el ) { |
| 121 | return el.responseText; |
| 122 | } |
| 123 | |
| 124 | /** |
| 125 | * Get data. |
| 126 | * |
| 127 | * @since 1.3.0 |
| 128 | * |
| 129 | * @param {object} el Object with data property. |
| 130 | * |
| 131 | * @returns {object} Data. |
| 132 | */ |
| 133 | function getData( el ) { |
| 134 | return el.data; |
| 135 | } |
| 136 | |
| 137 | /** |
| 138 | * Get value from files. |
| 139 | * |
| 140 | * @since 1.3.0 |
| 141 | * |
| 142 | * @param {object} files Dropzone files. |
| 143 | * |
| 144 | * @returns {object} Prepared value. |
| 145 | */ |
| 146 | function getValue( files ) { |
| 147 | return files |
| 148 | .map( getXHR ) |
| 149 | .filter( onlyPositive ) |
| 150 | .map( getResponseText ) |
| 151 | .filter( onlyWithLength ) |
| 152 | .map( parseJSON ) |
| 153 | .filter( onlyPositive ) |
| 154 | .map( getData ); |
| 155 | } |
| 156 | |
| 157 | /** |
| 158 | * Sending event higher order function. |
| 159 | * |
| 160 | * @since 1.3.0 |
| 161 | * |
| 162 | * @param {object} dz Dropzone object. |
| 163 | * @param {object} data Adding data to request. |
| 164 | * |
| 165 | * @returns {Function} Handler function. |
| 166 | */ |
| 167 | function sending( dz, data ) { |
| 168 | return function( file, xhr, formData ) { |
| 169 | if ( file.size > this.dataTransfer.postMaxSize ) { |
| 170 | xhr.send = function() {}; |
| 171 | |
| 172 | file.accepted = false; |
| 173 | file.processing = false; |
| 174 | file.status = 'rejected'; |
| 175 | file.previewElement.classList.add( 'dz-error' ); |
| 176 | file.previewElement.classList.add( 'dz-complete' ); |
| 177 | |
| 178 | return; |
| 179 | } |
| 180 | |
| 181 | this.loading = this.loading || 0; |
| 182 | this.loading++; |
| 183 | toggleSubmit( this ); |
| 184 | Object.keys( data ).forEach( function( key ) { |
| 185 | formData.append( key, data[key] ); |
| 186 | } ); |
| 187 | }; |
| 188 | } |
| 189 | |
| 190 | /** |
| 191 | * Convert files to input value. |
| 192 | * |
| 193 | * @since 1.3.0 |
| 194 | * |
| 195 | * @param {object} files Files list. |
| 196 | * |
| 197 | * @returns {string} Converted value. |
| 198 | */ |
| 199 | function convertFilesToValue( files ) { |
| 200 | return files.length ? JSON.stringify( files ) : ''; |
| 201 | } |
| 202 | |
| 203 | /** |
| 204 | * Update value in input. |
| 205 | * |
| 206 | * @since 1.3.0 |
| 207 | * |
| 208 | * @param {object} dz Dropzone object. |
| 209 | */ |
| 210 | function updateInputValue( dz ) { |
| 211 | var $input = jQuery( dz.element ).parents( '.evf-field-image-upload, .evf-field-file-upload' ).find( 'input[name=' + dz.dataTransfer.name + ']' ); |
| 212 | |
| 213 | $input.val( convertFilesToValue( getValue( dz.files ) ) ).trigger( 'input' ); |
| 214 | |
| 215 | if ( typeof jQuery.fn.valid !== 'undefined' ) { |
| 216 | $input.valid(); |
| 217 | } |
| 218 | } |
| 219 | |
| 220 | /** |
| 221 | * Complete event. |
| 222 | * |
| 223 | * @since 1.3.0 |
| 224 | * |
| 225 | * @param {object} dz Dropzone object. |
| 226 | * |
| 227 | * @returns {Function} Handler function. |
| 228 | */ |
| 229 | function complete( dz ) { |
| 230 | return function() { |
| 231 | dz.loading = dz.loading || 0; |
| 232 | dz.loading--; |
| 233 | toggleSubmit( dz ); |
| 234 | updateInputValue( dz ); |
| 235 | var $td = $( dz.element ).closest('.evf-field').closest('td'); |
| 236 | $td.find('.evf-error').remove(); |
| 237 | }; |
| 238 | } |
| 239 | |
| 240 | /** |
| 241 | * Toggle showing empty message. |
| 242 | * |
| 243 | * @since 1.3.0 |
| 244 | * |
| 245 | * @param {object} dz Dropzone object. |
| 246 | */ |
| 247 | function toggleMessage( dz ) { |
| 248 | setTimeout( function() { |
| 249 | var validFiles = dz.files.filter( function( file ) { |
| 250 | return file.accepted; |
| 251 | } ); |
| 252 | |
| 253 | if ( validFiles.length >= dz.options.maxFiles ) { |
| 254 | dz.element.querySelector( '.dz-message' ).classList.add( 'hide' ); |
| 255 | } else { |
| 256 | dz.element.querySelector( '.dz-message' ).classList.remove( 'hide' ); |
| 257 | } |
| 258 | }, 0 ); |
| 259 | } |
| 260 | |
| 261 | /** |
| 262 | * Toggle error message if total size more than limit. |
| 263 | * Runs for each file. |
| 264 | * |
| 265 | * @since 1.3.0 |
| 266 | * |
| 267 | * @param {object} file Current file. |
| 268 | * @param {object} dz Dropzone object. |
| 269 | */ |
| 270 | function validatePostMaxSizeError( file, dz ) { |
| 271 | setTimeout( function() { |
| 272 | if ( file.size >= dz.dataTransfer.postMaxSize ) { |
| 273 | var errorMessage = window.everest_forms_upload_parms.errors.post_max_size; |
| 274 | if ( ! file.isErrorNotUploadedDisplayed ) { |
| 275 | file.isErrorNotUploadedDisplayed = true; |
| 276 | errorMessage = window.everest_forms_upload_parms.errors.file_not_uploaded + ' ' + errorMessage; |
| 277 | } |
| 278 | |
| 279 | var span = document.createElement( 'span' ); |
| 280 | span.innerText = errorMessage; |
| 281 | span.setAttribute( 'data-dz-errormessage', '' ); |
| 282 | |
| 283 | file.previewElement.querySelector( '.dz-error-message' ).appendChild( span ); |
| 284 | } |
| 285 | }, 1 ); |
| 286 | } |
| 287 | |
| 288 | /** |
| 289 | * Validate the file when it was added in the dropzone. |
| 290 | * |
| 291 | * @since 1.3.0 |
| 292 | * |
| 293 | * @param {object} dz Dropzone object. |
| 294 | * |
| 295 | * @returns {Function} Handler function. |
| 296 | */ |
| 297 | function addedFile( dz ) { |
| 298 | return function( file ) { |
| 299 | validatePostMaxSizeError( file, dz ); |
| 300 | toggleMessage( dz ); |
| 301 | }; |
| 302 | } |
| 303 | |
| 304 | /** |
| 305 | * Send an AJAX request to remove file from the server. |
| 306 | * |
| 307 | * @since 1.3.0 |
| 308 | * |
| 309 | * @param {string} file File name. |
| 310 | * @param {object} dz Dropzone object. |
| 311 | */ |
| 312 | function removeFromServer( file, dz ) { |
| 313 | wp.ajax.post( { |
| 314 | action: 'everest_forms_remove_file', |
| 315 | file: file, |
| 316 | form_id: dz.dataTransfer.formId, |
| 317 | field_id: dz.dataTransfer.fieldId, |
| 318 | } ); |
| 319 | } |
| 320 | |
| 321 | /** |
| 322 | * Init the file removal on server when user removed it on front-end. |
| 323 | * |
| 324 | * @since 1.3.0 |
| 325 | * |
| 326 | * @param {object} dz Dropzone object. |
| 327 | * |
| 328 | * @returns {Function} Handler function. |
| 329 | */ |
| 330 | function removedFile( dz ) { |
| 331 | return function( file ) { |
| 332 | toggleMessage( dz ); |
| 333 | |
| 334 | if ( file.xhr ) { |
| 335 | var json = parseJSON( file.xhr.responseText ); |
| 336 | |
| 337 | if ( json ) { |
| 338 | removeFromServer( json.data.file, dz ); |
| 339 | } |
| 340 | } |
| 341 | |
| 342 | updateInputValue( dz ); |
| 343 | }; |
| 344 | } |
| 345 | |
| 346 | /** |
| 347 | * Process any error that was fired per each file. |
| 348 | * There might be several errors per file, in that case - display "not uploaded" text only once. |
| 349 | * |
| 350 | * @since 1.3.0.1 |
| 351 | * |
| 352 | * @param {object} dz Dropzone object. |
| 353 | * |
| 354 | * @returns {Function} Handler function. |
| 355 | */ |
| 356 | function error( dz ) { |
| 357 | return function( file, errorMessage ) { |
| 358 | if ( file.isErrorNotUploadedDisplayed ) { |
| 359 | return; |
| 360 | } |
| 361 | |
| 362 | file.isErrorNotUploadedDisplayed = true; |
| 363 | file.previewElement.querySelectorAll( '[data-dz-errormessage]' )[0].textContent = window.everest_forms_upload_parms.errors.file_not_uploaded + ' ' + errorMessage; |
| 364 | }; |
| 365 | } |
| 366 | |
| 367 | /** |
| 368 | * Dropzone.js init for each field. |
| 369 | * |
| 370 | * @since 1.3.0 |
| 371 | * |
| 372 | * @param {object} $el EVF uploader DOM element. |
| 373 | * |
| 374 | * @returns {object} Dropzone object. |
| 375 | */ |
| 376 | function dropZoneInit( $el ) { |
| 377 | var formId = parseInt( $el.dataset.formId, 10 ); |
| 378 | var fieldId = $el.dataset.fieldId; |
| 379 | var maxFiles = parseInt( $el.dataset.maxFileNumber, 10 ); |
| 380 | var currentFileCount = parseInt($el.dataset.currentFileCount, 10) || 0; |
| 381 | |
| 382 | let existingFiles = []; |
| 383 | try { |
| 384 | if ($el.dataset.existingFiles) { |
| 385 | existingFiles = JSON.parse($el.dataset.existingFiles); |
| 386 | } |
| 387 | } catch (e) { |
| 388 | console.error('Error parsing existing files:', e); |
| 389 | } |
| 390 | |
| 391 | var acceptedFiles = $el.dataset.extensions.split( ',' ).map( function( el ) { |
| 392 | return '.' + el; |
| 393 | } ).join( ',' ); |
| 394 | |
| 395 | var dz = new window.Dropzone( $el, { |
| 396 | url: window.everest_forms_upload_parms.url, |
| 397 | addRemoveLinks: true, |
| 398 | maxFilesize: ( parseInt( $el.dataset.maxSize, 10 ) / 1000000 ).toFixed( 2 ), |
| 399 | maxFiles: maxFiles - currentFileCount, |
| 400 | acceptedFiles: acceptedFiles, |
| 401 | dictMaxFilesExceeded: window.everest_forms_upload_parms.errors.file_limit.replace( '{fileLimit}', maxFiles ), |
| 402 | dictInvalidFileType: window.everest_forms_upload_parms.errors.file_extension, |
| 403 | dictFileTooBig: window.everest_forms_upload_parms.errors.file_size, |
| 404 | timeout: everest_forms_upload_parms.max_timeout, |
| 405 | } ); |
| 406 | |
| 407 | dz.dataTransfer = { |
| 408 | name: $el.dataset.inputName, |
| 409 | postMaxSize: parseInt( $el.dataset.postMaxSize, 10 ), |
| 410 | formId: formId, |
| 411 | fieldId: fieldId, |
| 412 | }; |
| 413 | |
| 414 | dz.on( 'sending', sending( dz, { |
| 415 | action: 'everest_forms_upload_file', |
| 416 | form_id: formId, |
| 417 | field_id: fieldId, |
| 418 | } ) ); |
| 419 | dz.on( 'addedfile', addedFile( dz ) ); |
| 420 | dz.on( 'removedfile', removedFile( dz ) ); |
| 421 | jQuery(document).on('evf_frontend_reset_button',function(){ |
| 422 | dz.removeAllFiles(); |
| 423 | }); |
| 424 | dz.on( 'complete', complete( dz ) ); |
| 425 | dz.on( 'error', error( dz ) ); |
| 426 | |
| 427 | return dz; |
| 428 | } |
| 429 | |
| 430 | /** |
| 431 | * DOMContentLoaded handler. |
| 432 | * |
| 433 | * @since 1.3.0 |
| 434 | */ |
| 435 | function ready() { |
| 436 | window.everest_forms = window.everest_forms || {}; |
| 437 | window.everest_forms.dropzones = [].slice.call(document.querySelectorAll('.everest-forms-uploader')).map(dropZoneInit); |
| 438 | |
| 439 | jQuery(document).on('everest-forms-uploads-init', function(event, el) { |
| 440 | dropZoneInit(el); |
| 441 | }); |
| 442 | |
| 443 | jQuery(document).on('elementor/popup/show', function(event, popup) { |
| 444 | const popupContent = popup.$element || document; |
| 445 | popupContent.querySelectorAll('.everest-forms-uploader').forEach(el => dropZoneInit(el)); |
| 446 | }); |
| 447 | |
| 448 | $(document).on('click','.evf-remove-file', function(e) { |
| 449 | |
| 450 | var max_files = $(this).closest(".everest-forms-uploader")[0].dropzone.options.maxFiles; |
| 451 | $(this).closest(".everest-forms-uploader")[0].dropzone.options.maxFiles = |
| 452 | ++max_files; |
| 453 | $(this).closest('.everest-forms-uploader').find('.dz-message').show(); |
| 454 | |
| 455 | var fileData = $(this).closest('.dz-preview').find('.existing-file').val(); |
| 456 | var deleteInput = $(this).closest('.everest-forms-uploader').find('.deleted-input'); |
| 457 | var deleteInputValue = deleteInput.val(); |
| 458 | |
| 459 | if (!deleteInputValue) { |
| 460 | deleteInputValue = [fileData]; |
| 461 | } else { |
| 462 | try { |
| 463 | deleteInputValue = JSON.parse(deleteInputValue); |
| 464 | if (!Array.isArray(deleteInputValue)) { |
| 465 | deleteInputValue = [deleteInputValue, fileData]; |
| 466 | } else { |
| 467 | deleteInputValue.push(fileData); |
| 468 | } |
| 469 | } catch (e) { |
| 470 | deleteInputValue = [deleteInputValue, fileData]; |
| 471 | } |
| 472 | } |
| 473 | |
| 474 | deleteInput.val(JSON.stringify(deleteInputValue)); |
| 475 | |
| 476 | $(this).closest(".dz-preview").remove(); |
| 477 | }); |
| 478 | } |
| 479 | |
| 480 | if (document.readyState === 'loading') { |
| 481 | document.addEventListener('DOMContentLoaded', ready); |
| 482 | } else { |
| 483 | ready(); |
| 484 | } |
| 485 | }(jQuery) ); |
| 486 |