codemirror
4 months ago
datatables
4 months ago
admin-menu-organizer.js
4 months ago
admin-page.js
4 months ago
content-order-sort.js
4 months ago
custom-admin-menu.js
4 months ago
external-permalinks.js
4 months ago
gutenberg-content-duplication.js
4 months ago
hide-admin-notices.js
4 months ago
jBox.all.min.js
4 months ago
jquery.jsticky.mod.js
4 months ago
jquery.jsticky.mod.min.js
4 months ago
jquery.mjs.nestedSortable.js
4 months ago
jquery.ui.touch-punch.min.js
4 months ago
js.cookie.min.js
4 months ago
list-tables-content-order.js
4 months ago
media-replace.js
4 months ago
multiple-user-roles.js
4 months ago
select2.full.min.js
4 months ago
toggle-hidden-menu.js
4 months ago
content-order-sort.js
193 lines
| 1 | (function( $ ) { |
| 2 | 'use strict'; |
| 3 | |
| 4 | $(document).ready( function() { |
| 5 | var itemList = $('#item-list'), // Container of item list |
| 6 | maxLevel = 6, |
| 7 | dragAxis = false, |
| 8 | dragTabSize = 20, |
| 9 | hierarchicalValue = ( typeof contentOrderSort.hierarchical !== 'undefined' ) ? contentOrderSort.hierarchical : contentOrderSort.hirarchical, |
| 10 | isHierarchical = ( String( hierarchicalValue ) === 'true' ), |
| 11 | disableParentChange = ! isHierarchical, |
| 12 | isSavingOrder = false, |
| 13 | sort_started = {}, // For data related to the dragged element when dragging started |
| 14 | sort_finished = {}; // For data related to the dragged element when dragging has finished |
| 15 | |
| 16 | // console.log(contentOrderSort); // Data passed from PHP via wp_localize_script |
| 17 | if ( ! isHierarchical ) { |
| 18 | // Non-hierarchical lists should only support top-level reordering. |
| 19 | maxLevel = 1; |
| 20 | // Locking drag to vertical axis prevents right-drift from triggering invalid nest attempts. |
| 21 | dragAxis = 'y'; |
| 22 | // Keep placeholder-based drop valid even when pointer drifts right. |
| 23 | dragTabSize = 9999; |
| 24 | } |
| 25 | |
| 26 | // Make item list into nested sortable |
| 27 | // Ref: https://api.jqueryui.com/sortable/ |
| 28 | // Ref: https://github.com/ilikenwf/nestedSortable |
| 29 | // See options at https://github.com/ilikenwf/nestedSortable/blob/master/jquery.mjs.nestedSortable.js#L37 |
| 30 | // Ref: https://ilikenwf.github.io/example.html (demo) |
| 31 | itemList.nestedSortable({ |
| 32 | // Disable nesting if set to true |
| 33 | protectRoot: false, |
| 34 | // Disable moving sub-item to a different parent or up the nested structure |
| 35 | disableParentChange: disableParentChange, |
| 36 | isTree: true, |
| 37 | // Forces the placeholder to have a size. |
| 38 | forcePlaceholderSize: true, |
| 39 | // Restricts sort start click to the specified element. |
| 40 | // Allows for a helper element to be used for dragging display. |
| 41 | // If set to "clone", then the element will be cloned and the clone will be dragged. |
| 42 | helper: 'clone', |
| 43 | // Use vertical-only dragging for non-hierarchical post types. |
| 44 | axis: dragAxis, |
| 45 | listType: 'ul', |
| 46 | items: 'li', |
| 47 | toleranceElement: '> div', // Direct children of the li element |
| 48 | handle: 'div', // The same <div> for toleranceElement is set as the drag handle |
| 49 | // Specifies which mode to use for testing whether the item being moved is hovering over another item. |
| 50 | // If set to 'pointr', is when the mouse pointer overlaps the other item. |
| 51 | tolerance: 'pointer', |
| 52 | // The maximum depth of nested items the list can accept. |
| 53 | maxLevels: maxLevel, |
| 54 | // Defines the opacity of the helper while sorting. |
| 55 | opacity: 0.6, |
| 56 | placeholder: 'ui-sortable-placeholder', |
| 57 | // Whether the sortable items should revert to their new positions using a smooth animation. |
| 58 | // If set as a number, it's in miliseconds |
| 59 | revert: 250, |
| 60 | // How far right or left (in pixels) the item has to travel |
| 61 | // in order to be nested or to be sent outside its current list. Default: 20 |
| 62 | tabSize: dragTabSize, |
| 63 | // This event is triggered when sorting starts. |
| 64 | start: function (event, ui) { |
| 65 | if ( isSavingOrder ) { |
| 66 | return false; |
| 67 | } |
| 68 | |
| 69 | // console.log('ui.item -- start'); |
| 70 | // console.log(ui.item); |
| 71 | sort_started.item = ui.item; // The jQuery object representing the current dragged element. |
| 72 | sort_started.prev = ui.item.prev(':not(".ui-sortable-placeholder")'); |
| 73 | sort_started.next = ui.item.next(':not(".ui-sortable-placeholder")'); |
| 74 | }, |
| 75 | // This event is triggered when the user stopped sorting and the DOM position has changed. |
| 76 | update: function (event, ui) { |
| 77 | // console.log('ui.item -- update'); |
| 78 | // console.log(ui.item); |
| 79 | // Elements of the "Updating order..." notice |
| 80 | var updateNotice = $('#updating-order-notice'), // Wrapper |
| 81 | spinner = $('#spinner-img'), // Spinner |
| 82 | updateSuccess = $('.updating-order-notice .dashicons.dashicons-saved'); // Check mark |
| 83 | |
| 84 | ui.item.find('div.row-content:first').append(updateNotice); |
| 85 | |
| 86 | // Reset the state of the "Updating order..." indicator |
| 87 | $(spinner).show(); |
| 88 | $(updateSuccess).hide(); |
| 89 | $(updateNotice).css('background-color','#eee').fadeIn(); |
| 90 | |
| 91 | // Get the end items where the item was placed |
| 92 | // console.log('sort_finished'); |
| 93 | // console.log(sort_finished); |
| 94 | sort_finished.item = ui.item; // The jQuery object representing the current dragged element. |
| 95 | // sort_finished.prev = ui.item.prev(':not(".ui-sortable-placeholder")'); |
| 96 | // sort_finished.next = ui.item.next(':not(".ui-sortable-placeholder")'); |
| 97 | |
| 98 | // If an item is moved as a child of another item |
| 99 | // it will be inserted inside the ul.child-list with a data-parent |
| 100 | if ( ui.item.parent('.child-list').length ) { |
| 101 | // if ( ui.item.siblings('.list-item').length ) { |
| 102 | // Do something |
| 103 | // } else { |
| 104 | // Let's set the item's parent ID here, taking from ul.child-list's data-parent info |
| 105 | sort_finished.item.attr('data-parent', ui.item.parent('.child-list').attr('data-parent')); |
| 106 | // } |
| 107 | } else { |
| 108 | sort_finished.item.attr('data-parent', '0'); |
| 109 | } |
| 110 | // console.log('sort_finished.prev'); |
| 111 | // console.log(sort_finished.prev); |
| 112 | |
| 113 | var list_offset = parseInt(sort_finished.item.index()); |
| 114 | sort_finished.item.attr('data-menu-order', list_offset); |
| 115 | |
| 116 | // Get attributes |
| 117 | var attributes = {}; |
| 118 | $.each(sort_finished.item[0].attributes, function () { |
| 119 | attributes[this.name] = this.value; |
| 120 | }); |
| 121 | // console.log('attributes: ' + cleanStringify(attributes)); |
| 122 | |
| 123 | // Data for ajax call |
| 124 | var dataArgs = { |
| 125 | action: contentOrderSort.action, // from wp_localize_script |
| 126 | item_parent: 0, // We only deal with top-level items, not child items |
| 127 | start: 0, // Start processing menu_order update in DB from item with menu_order defined here |
| 128 | nonce: contentOrderSort.nonce, |
| 129 | post_id: sort_finished.item.attr('data-id'), |
| 130 | menu_order: sort_finished.item.attr('data-menu-order'), |
| 131 | excluded_items: {}, |
| 132 | post_type: sort_started.item.attr('data-post-type'), |
| 133 | attributes: attributes, |
| 134 | }; |
| 135 | |
| 136 | |
| 137 | // console.log('dataArgs: ' + cleanStringify(dataArgs)); |
| 138 | |
| 139 | isSavingOrder = true; |
| 140 | |
| 141 | // AJAX call to update menu_order for items in the list |
| 142 | $.ajax({ |
| 143 | type: "POST", |
| 144 | url: ajaxurl, |
| 145 | data: dataArgs, |
| 146 | success: function(response) { |
| 147 | // console.log(response); |
| 148 | // Update the state of the "Updating order..." indicator |
| 149 | $(spinner).hide(); |
| 150 | $(updateSuccess).show(); |
| 151 | $(updateNotice).css('background-color','#cce5cc').delay(1000).fadeOut(); |
| 152 | }, |
| 153 | error: function(errorThrown) { |
| 154 | console.log(errorThrown); |
| 155 | }, |
| 156 | complete: function() { |
| 157 | isSavingOrder = false; |
| 158 | } |
| 159 | }); |
| 160 | } |
| 161 | }); |
| 162 | |
| 163 | |
| 164 | }); |
| 165 | |
| 166 | // Convert object to simpler string for console.log. Ref: https://stackoverflow.com/a/48845206 |
| 167 | // function cleanStringify(object) { |
| 168 | // if (object && typeof object === 'object') { |
| 169 | // object = copyWithoutCircularReferences([object], object); |
| 170 | // } |
| 171 | // return JSON.stringify(object); |
| 172 | |
| 173 | // function copyWithoutCircularReferences(references, object) { |
| 174 | // var cleanObject = {}; |
| 175 | // Object.keys(object).forEach(function(key) { |
| 176 | // var value = object[key]; |
| 177 | // if (value && typeof value === 'object') { |
| 178 | // if (references.indexOf(value) < 0) { |
| 179 | // references.push(value); |
| 180 | // cleanObject[key] = copyWithoutCircularReferences(references, value); |
| 181 | // references.pop(); |
| 182 | // } else { |
| 183 | // cleanObject[key] = '###_Circular_###'; |
| 184 | // } |
| 185 | // } else if (typeof value !== 'function') { |
| 186 | // cleanObject[key] = value; |
| 187 | // } |
| 188 | // }); |
| 189 | // return cleanObject; |
| 190 | // } |
| 191 | // } |
| 192 | |
| 193 | })( jQuery ); |