diff --git a/css/common.css b/css/common.css index cbaf3ec54..84e72279f 100644 --- a/css/common.css +++ b/css/common.css @@ -300,11 +300,79 @@ footer.qsm-popup__footer button.qsm-popup-secondary-button:hover { color: green; display: block; } +.quiz_section .qsm-file-upload-container { + border: 3px dashed rgba(84, 116, 130, 0.32); + padding: 15px; + background: #EBEEF0; + border-radius: 5px; + max-width: 300px; + cursor: pointer; +} +.quiz_section .qsm-file-upload-container.file-hover, +.quiz_section .qsm-file-upload-container:hover { + border: 3px solid #229ACD; + padding: 15px; +} + +.quiz_section .qsm-file-upload-container.file-hover { + background-color: lightgray; +} +.quiz_section .qsm-file-upload-container .qsm-file-upload-logo { + font-size: 45px; + height: 100%; + width: 100%; + color: #8FA0AA; +} +.quiz_section .qsm-file-upload-container .qsm-file-upload-message { + text-align: center; + font-size: 14px; + color: #555; +} +.quiz_section .qsm-file-upload-container .qsm-file-upload-message a { + color: #8FA0AA; + text-decoration: none; + font-weight: bold; +} +.quiz_section .qsm-file-upload-container .qsm-file-upload-name { + text-align: center; + font-size: 14px; + padding: 5px; + font-weight: bold; + color: #555; + overflow-wrap: anywhere; +} +.quiz_section .qsm-file-upload-container .qsm-file-upload-status { + display: none; + width: calc(100% + 30px); + margin: 0 -15px -15px; + position: inherit; + font-weight: normal; + text-align: center; + font-size: 15px; +} +.qsm-processing { + background-color: rgb(219, 218, 218); + color: black; + font-weight: 600; +} +.qsm-error { + background-color: rgb(255, 221, 221); + color: red; +} +.qsm-success { + background-color: rgb(221, 255, 221); + color: green; +} .quiz_section .remove-uploaded-file { color: red; display: inline-block; cursor: pointer; margin-top: 5px; + border: 1px solid red; + border-radius: 50%; + position: relative; + left: 345px; + bottom: 90px; } .quiz_section .loading-uploaded-file { width: 20px; diff --git a/js/qsm-quiz.js b/js/qsm-quiz.js index e154cd210..e76349f09 100644 --- a/js/qsm-quiz.js +++ b/js/qsm-quiz.js @@ -1538,6 +1538,10 @@ jQuery(function () { var question_id = $this.parent('.quiz_section').find('.mlw_file_upload_media_id').attr("name").replace('question', ''); form_data.append('question_id', question_id); $this.next('.loading-uploaded-file').show(); + $this.parent('.quiz_section').find('.qsm-file-upload-status').removeClass('qsm-error qsm-success'); + $this.parent('.quiz_section').find('.qsm-file-upload-status').addClass('qsm-processing'); + $this.parent('.quiz_section').find('.qsm-file-upload-status').html('Uploading...').show(); + $this.parent('.quiz_section').find('.qsm-file-upload-name').html(jQuery(this)[0].files[0].name).show(); jQuery(".qsm-submit-btn, .mlw_custom_next").attr('disabled', true); jQuery.ajax({ url: qmn_ajax_object.ajaxurl, @@ -1551,17 +1555,18 @@ jQuery(function () { $this.next('.loading-uploaded-file').hide(); jQuery(".qsm-submit-btn, .mlw_custom_next").attr('disabled', false); if (obj.type == 'success') { - $this.next().next('.remove-uploaded-file').show(); + $this.next().next().next('.remove-uploaded-file').show(); $this.parent('.quiz_section').find('.mlw_file_upload_hidden_nonce').val(obj.wp_nonoce); $this.parent('.quiz_section').find('.mlw_file_upload_hidden_path').val(obj.file_path); $this.parent('.quiz_section').find('.mlw_file_upload_media_id').val(obj.media_id); - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').hide(); - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').addClass('mlw-file-upload-success-msg').text(obj.message); - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').show(); + $this.parent('.quiz_section').find('.qsm-file-upload-status').hide(); + $this.parent('.quiz_section').find('.qsm-file-upload-status').removeClass('qsm-processing qsm-error'); + $this.parent('.quiz_section').find('.qsm-file-upload-status').addClass('qsm-success').text(obj.message); + $this.parent('.quiz_section').find('.qsm-file-upload-status').show(); } else { - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').removeClass('mlw-file-upload-success-msg'); - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').text('').text(obj.message); - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').show(); + $this.parent('.quiz_section').find('.qsm-file-upload-status').removeClass('qsm-processing qsm-success'); + $this.parent('.quiz_section').find('.qsm-file-upload-status').addClass('qsm-error').text('').text(obj.message); + $this.parent('.quiz_section').find('.qsm-file-upload-status').show(); $this.parent('.quiz_section').find('.mlw_answer_file_upload').val(''); } // triggers after file uploads @@ -1580,6 +1585,10 @@ jQuery(function () { form_data.append('action', 'qsm_remove_file_fd_question'); form_data.append('media_id', media_id); form_data.append('nonce', nonce); + $this.parent('.quiz_section').find('.qsm-file-upload-status').removeClass('qsm-processing qsm-success'); + $this.parent('.quiz_section').find('.qsm-file-upload-status').addClass('qsm-error'); + $this.parent('.quiz_section').find('.qsm-file-upload-status').html('Removing...').show(); + $this.parent('.quiz_section').find('.qsm-file-upload-name').html('').show(); jQuery.ajax({ url: qmn_ajax_object.ajaxurl, type: 'POST', @@ -1595,16 +1604,60 @@ jQuery(function () { $this.parent('.quiz_section').find('.mlw_file_upload_hidden_nonce').val(''); $this.parent('.quiz_section').find('.mlw_file_upload_media_id').val(''); $this.parent('.quiz_section').find('.mlw_answer_file_upload').val(''); - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').text(obj.message); + $this.parent('.quiz_section').find('.qsm-file-upload-status').text(obj.message); } else { - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').text('').text(obj.message); - $this.parent('.quiz_section').find('.mlw-file-upload-error-msg').show(); + $this.parent('.quiz_section').find('.qsm-file-upload-status').text('').text(obj.message); + $this.parent('.quiz_section').find('.qsm-file-upload-status').show(); } } }); return false; }); - + jQuery('.quiz_section .qsm-file-upload-container').on('click', function (e) { + e.preventDefault(); + jQuery(this).prev('.mlw_answer_file_upload').trigger('click'); + }); + jQuery('.quiz_section .qsm-file-upload-container').on( + 'dragover', + function (e) { + e.preventDefault(); + e.stopPropagation(); + jQuery(this).addClass('file-hover'); + } + ) + jQuery('.quiz_section .qsm-file-upload-container').on( + 'dragenter', + function (e) { + e.preventDefault(); + e.stopPropagation(); + } + ) + jQuery('.quiz_section .qsm-file-upload-container').on( + 'dragleave', + function (e) { + e.preventDefault(); + e.stopPropagation(); + jQuery(this).removeClass('file-hover'); + } + ) + jQuery('.quiz_section .qsm-file-upload-container').on( + 'drop', + function (e) { + jQuery(this).removeClass('file-hover'); + jQuery(this).find('.qsm-file-upload-name').html(e.originalEvent.dataTransfer.files[0].name).fadeIn(); + if (e.originalEvent.dataTransfer) { + if (e.originalEvent.dataTransfer.files.length) { + e.preventDefault(); + e.stopPropagation(); + jQuery(this).prev('.mlw_answer_file_upload').prop('files', e.originalEvent.dataTransfer.files); + jQuery(this).prev('.mlw_answer_file_upload').trigger('change'); + } + } + } + ); + jQuery('.quiz_section .qsm-file-upload-container').on('mouseleave', function () { + jQuery(this).removeClass('file-hover'); + }); //Deselect all answer on select jQuery('.qsm-deselect-answer').click(function (e) { e.preventDefault(); diff --git a/php/question-types/qsm-question-type-file-upload.php b/php/question-types/qsm-question-type-file-upload.php index 74a2da6c8..772e39ca1 100644 --- a/php/question-types/qsm-question-type-file-upload.php +++ b/php/question-types/qsm-question-type-file-upload.php @@ -12,8 +12,15 @@ * @since 6.3.7 */ function qmn_file_upload_display( $id, $question, $answers ) { - global $mlwQuizMasterNext; + global $mlwQuizMasterNext, $wpdb; $required = $mlwQuizMasterNext->pluginHelper->get_question_setting( $id, 'required' ); + $quiz_id = $wpdb->get_var( $wpdb->prepare( "SELECT quiz_id FROM {$wpdb->prefix}mlw_questions WHERE question_id=%d", $id ) ); + $theme_id = $mlwQuizMasterNext->theme_settings->get_active_quiz_theme( $quiz_id ); + $active_themes = $mlwQuizMasterNext->theme_settings->get_active_themes(); + $is_theme_active = array_filter($active_themes, function( $subarray ) use ( $theme_id ) { + return $subarray['id'] == $theme_id; + }); + $hide = $is_theme_active ? true : false; if ( 0 == $required ) { $mlw_require_class = 'mlwRequiredFileUpload'; } else { @@ -21,9 +28,23 @@ function qmn_file_upload_display( $id, $question, $answers ) { } $new_question_title = $mlwQuizMasterNext->pluginHelper->get_question_setting( $id, 'question_title' ); qsm_question_title_func( $question, '', $new_question_title, $id ); - ?>
+ ?>
+ + +
+ +
+ + + + +
+
+
+
+ - +