custom-admin-menu.js
| 1 | (function( $ ) { |
| 2 | 'use strict'; |
| 3 | |
| 4 | $(document).ready( function() { |
| 5 | |
| 6 | // ----- Menu Ordering ----- |
| 7 | |
| 8 | // Initialize sortable elements for parent menu items: https://api.jqueryui.com/sortable/ |
| 9 | $('#custom-admin-menu').sortable({ |
| 10 | items: '> li', |
| 11 | opacity: 0.6, |
| 12 | placeholder: 'sortable-placeholder', |
| 13 | tolerance: 'pointer', |
| 14 | revert: 250 |
| 15 | }); |
| 16 | |
| 17 | // Get the default/current menu order |
| 18 | let menuOrder = $('#custom-admin-menu').sortable("toArray").toString(); |
| 19 | |
| 20 | // Set hidden input value for saving in options |
| 21 | document.getElementById('admin_site_enhancements[custom_menu_order]').value = menuOrder; |
| 22 | |
| 23 | // Save custom order into a comma-separated string, triggerred after each drag and drop of menu item |
| 24 | // https://api.jqueryui.com/sortable/#event-update |
| 25 | // https://api.jqueryui.com/sortable/#method-toArray |
| 26 | $('#custom-admin-menu').on( 'sortupdate', function( event, ui) { |
| 27 | |
| 28 | // Get the updated menu order |
| 29 | let menuOrder = $('#custom-admin-menu').sortable("toArray").toString(); |
| 30 | |
| 31 | // Set hidden input value for saving in options |
| 32 | document.getElementById('admin_site_enhancements[custom_menu_order]').value = menuOrder; |
| 33 | |
| 34 | }); |
| 35 | |
| 36 | |
| 37 | |
| 38 | // ----- Parent Menu Item Hiding ----- |
| 39 | |
| 40 | // Prepare constant to store IDs of menu items that will be hidden |
| 41 | if ( document.getElementById('admin_site_enhancements[custom_menu_hidden]') != null ) { |
| 42 | var hiddenMenuItems = document.getElementById('admin_site_enhancements[custom_menu_hidden]').value.split(","); // array |
| 43 | } else { |
| 44 | var hiddenMenuItems = []; // array |
| 45 | } |
| 46 | |
| 47 | |
| 48 | // Detect which menu items are being checked. Ref: https://stackoverflow.com/a/3871602 |
| 49 | Array.from(document.getElementsByClassName('parent-menu-hide-checkbox')).forEach(function(item,index,array) { |
| 50 | |
| 51 | item.addEventListener('click', event => { |
| 52 | |
| 53 | if (event.target.checked) { |
| 54 | |
| 55 | // Add ID of menu item to array |
| 56 | hiddenMenuItems.push(event.target.dataset.menuItemId); |
| 57 | |
| 58 | } else { |
| 59 | |
| 60 | // Remove ID of menu item from array |
| 61 | const start = hiddenMenuItems.indexOf(event.target.dataset.menuItemId); |
| 62 | const deleteCount = 1; |
| 63 | hiddenMenuItems.splice(start, deleteCount); |
| 64 | |
| 65 | } |
| 66 | |
| 67 | // Set hidden input value |
| 68 | document.getElementById('admin_site_enhancements[custom_menu_hidden]').value = hiddenMenuItems; |
| 69 | |
| 70 | }); |
| 71 | |
| 72 | }); |
| 73 | |
| 74 | // Clicking on header save button |
| 75 | $('.asenha-save-button').click( function(e) { |
| 76 | |
| 77 | e.preventDefault(); |
| 78 | |
| 79 | // Prepare variable to store ID-Title pairs of menu items |
| 80 | var customMenuTitles = []; // empty array |
| 81 | |
| 82 | // Initialize other variables |
| 83 | var menuItemId = ''; |
| 84 | var customTitle = ''; |
| 85 | |
| 86 | // Save default/custom title values. Ref: https://stackoverflow.com/a/3871602 |
| 87 | Array.from(document.getElementsByClassName('menu-item-custom-title')).forEach(function(item,index,array) { |
| 88 | |
| 89 | menuItemId = item.dataset.menuItemId; |
| 90 | customTitle = item.value; |
| 91 | customMenuTitles.push(menuItemId + '__' + customTitle); |
| 92 | |
| 93 | }); |
| 94 | |
| 95 | // Set hidden input value |
| 96 | document.getElementById('admin_site_enhancements[custom_menu_titles]').value = customMenuTitles; |
| 97 | |
| 98 | }); |
| 99 | |
| 100 | }); |
| 101 | |
| 102 | })( jQuery ); |