| 1 |
/** |
| 2 |
* This file enables JavaScript related features shared by multiple menus. Specifically: |
| 3 |
* |
| 4 |
* - Sync between input elements of type range and number. |
| 5 |
* - Show and hide the various sections of forms. |
| 6 |
* - Show and hide the sub menu when the user hovers over the "admin-toolbar-menu-item-more" class. |
| 7 |
* - Allow to close the dismissible notice using the close button. |
| 8 |
* - Keep in sync the values of the item selectors with the hidden input field that is used to store the selected |
| 9 |
* items as a comma-separated list. |
| 10 |
* |
| 11 |
* @package ultimate-markdown |
| 12 |
*/ |
| 13 |
|
| 14 |
jQuery( document ).ready( |
| 15 |
function ($) { |
| 16 |
|
| 17 |
'use strict'; |
| 18 |
|
| 19 |
/** |
| 20 |
* Handle the sync between input elements of type range and number. |
| 21 |
* |
| 22 |
* Steps: |
| 23 |
* 1. Iterate over all the input elements of type range using jQuery.each() |
| 24 |
* |
| 25 |
* 2. Add a change event listener to each iterated elements used to update the |
| 26 |
* input element of type number that has the same data-range-sync-id attribute value. |
| 27 |
* |
| 28 |
* 3. Get the element of type number that has the same data-range-sync-id attribute value. |
| 29 |
* |
| 30 |
* 4. Add a change event listener to the element of type number that updates the |
| 31 |
* input element of type range that has the same data-range-sync-id attribute value. |
| 32 |
*/ |
| 33 |
$( document ).ready( |
| 34 |
function () { |
| 35 |
$( "input[type='range']" ).each( |
| 36 |
function () { |
| 37 |
const range = $( this ); |
| 38 |
const number = $( "input[type='number'][data-range-sync-id='" + range.attr( "data-range-sync-id" ) + "']" ); |
| 39 |
range.change( |
| 40 |
function () { |
| 41 |
number.val( range.val() ); |
| 42 |
} |
| 43 |
); |
| 44 |
number.change( |
| 45 |
function () { |
| 46 |
range.val( number.val() ); |
| 47 |
} |
| 48 |
); |
| 49 |
} |
| 50 |
); |
| 51 |
} |
| 52 |
); |
| 53 |
|
| 54 |
$( document.body ).on( |
| 55 |
'click', |
| 56 |
'.group-trigger' , |
| 57 |
function () { |
| 58 |
|
| 59 |
'use strict'; |
| 60 |
|
| 61 |
// Open and close the various sections of the tables area. |
| 62 |
const target = $( this ).attr( 'data-trigger-target' ); |
| 63 |
$( '.daextulma-main-form__daext-form-section-body[data-section-id="' + target + '"]' ).toggleClass( 'daextulma-main-form__daext-form-section-body-opened' ); |
| 64 |
|
| 65 |
$( this ).find( '.expand-icon' ).toggleClass( 'arrow-down' ); |
| 66 |
$( this ).find( '.expand-icon' ).toggleClass( 'arrow-up' ); |
| 67 |
|
| 68 |
} |
| 69 |
); |
| 70 |
|
| 71 |
/** |
| 72 |
* When the "admin-toolbar-menu-item-more" class is hovered, then show the "pop-sub-menu" sub menu. |
| 73 |
* |
| 74 |
* When the user does not hover over the "admin-toolbar-menu-item-more" or "pop-sub-menu" class, then hide the |
| 75 |
* "pop-sub-menu" sub menu. |
| 76 |
*/ |
| 77 |
$( document.body ).on( |
| 78 |
'mouseenter', |
| 79 |
'.daextulma-admin-toolbar__menu-item-more', |
| 80 |
function () { |
| 81 |
$( '.daextulma-admin-toolbar__pop-sub-menu' ).show(); |
| 82 |
} |
| 83 |
); |
| 84 |
|
| 85 |
$( document.body ).on( |
| 86 |
'mouseleave', |
| 87 |
'.daextulma-admin-toolbar__menu-item-more, .daextulma-admin-toolbar__pop-sub-menu', |
| 88 |
function () { |
| 89 |
$( '.daextulma-admin-toolbar__pop-sub-menu' ).hide(); |
| 90 |
} |
| 91 |
); |
| 92 |
|
| 93 |
$( '.notice-dismiss-button' ).on( |
| 94 |
'click', |
| 95 |
function () { |
| 96 |
$( this ).parent().hide(); |
| 97 |
} |
| 98 |
); |
| 99 |
|
| 100 |
/** |
| 101 |
* Show the file name when the user selects a file using a custom file upload input. |
| 102 |
* |
| 103 |
* Ref: |
| 104 |
* |
| 105 |
* - https://stackoverflow.com/questions/572768/styling-an-input-type-file-button |
| 106 |
* - https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file |
| 107 |
*/ |
| 108 |
$( document ).on( |
| 109 |
'change', |
| 110 |
'.custom-file-upload-input', |
| 111 |
function () { |
| 112 |
|
| 113 |
const numFiles = parseInt($( this )[0].files.length, 10); |
| 114 |
let fileName = ''; |
| 115 |
if(numFiles === 0){ |
| 116 |
fileName = 'No file chosen'; |
| 117 |
}else if(numFiles > 1){ |
| 118 |
fileName = numFiles + ' files'; |
| 119 |
|
| 120 |
if(numFiles > parseInt(window.DAEXTULMA_PARAMETERS.maxFileUploads, 10)){ |
| 121 |
|
| 122 |
// Show an alert message. |
| 123 |
alert('The maximum number of files allowed for upload is ' + window.DAEXTULMA_PARAMETERS.maxFileUploads + '. If you need to upload more than 20 files, you can increase this limit by modifying the max_file_uploads directive in your php.ini file.'); |
| 124 |
|
| 125 |
// Disable the submit button. |
| 126 |
$('#submit').prop('disabled', true); |
| 127 |
|
| 128 |
// Reset upload form. |
| 129 |
$('#import-upload-form')[0].reset(); |
| 130 |
$('#upload').val(''); |
| 131 |
|
| 132 |
return; |
| 133 |
|
| 134 |
} |
| 135 |
|
| 136 |
}else{ |
| 137 |
const file = $( this )[0].files[0]; |
| 138 |
fileName = file.name; |
| 139 |
} |
| 140 |
|
| 141 |
$( this ).prev().text( fileName ); |
| 142 |
|
| 143 |
} |
| 144 |
); |
| 145 |
|
| 146 |
/** |
| 147 |
* Keep in sync the values of the item selectors with the hidden input field that is used to store the selected |
| 148 |
* items as a comma-separated list. |
| 149 |
*/ |
| 150 |
$( document ).on( |
| 151 |
'change', |
| 152 |
'.daextulma-bulk-action-checkbox', |
| 153 |
function () { |
| 154 |
let selectedItems = []; |
| 155 |
$( '.daextulma-bulk-action-checkbox:checked' ).each( |
| 156 |
function () { |
| 157 |
selectedItems.push( $( this ).val() ); |
| 158 |
} |
| 159 |
); |
| 160 |
$( '#bulk-action-selected-items' ).val( selectedItems.join( ',' ) ); |
| 161 |
} |
| 162 |
); |
| 163 |
|
| 164 |
$( document ).on( |
| 165 |
'change', |
| 166 |
'.daextulma-cb-select-all', |
| 167 |
function () { |
| 168 |
let selectedItems = []; |
| 169 |
|
| 170 |
// Update all the standard checkboxes according to the value of the changed select all checkbox. |
| 171 |
const cbSelectAllValue = $( this ).prop( 'checked' ); |
| 172 |
|
| 173 |
// Update all the select all checkboxes according to the value of the changed select all checkbox. |
| 174 |
$( '.daextulma-cb-select-all' ).prop( 'checked', cbSelectAllValue ); |
| 175 |
|
| 176 |
// Update the hidden input field that is used to store the selected items as a comma-separated list. |
| 177 |
$( '.daextulma-bulk-action-checkbox' ).each( |
| 178 |
function () { |
| 179 |
$( this ).prop( 'checked', cbSelectAllValue ); |
| 180 |
if ( cbSelectAllValue ) { |
| 181 |
selectedItems.push( $( this ).val() ); |
| 182 |
} |
| 183 |
} |
| 184 |
); |
| 185 |
$( '#bulk-action-selected-items' ).val( selectedItems.join( ',' ) ); |
| 186 |
|
| 187 |
} |
| 188 |
); |
| 189 |
|
| 190 |
} |
| 191 |
); |
| 192 |
|
