Ticket #13220: sorting.improvements.progress.1.patch
File sorting.improvements.progress.1.patch, 5.8 KB (added by , 14 years ago) |
---|
-
wp-admin/js/nav-menu.dev.js
163 163 }, 164 164 165 165 initSortables : function() { 166 var currentDepth = 0, originalDepth, minDepth, maxDepth, 167 menuLeft = api.menuList.offset().left, 168 newItem, transport; 166 var sort = { 167 currentDepth : 0, 168 originalDepth : 0, 169 minDepth : 0, 170 maxDepth : 0, 171 menuLeft : api.menuList.offset().left, 172 prevBottom : 0, 173 prev : $(), 174 next : $(), 175 transport : undefined 176 }; 169 177 170 178 api.menuList.sortable({ 171 179 handle: '.menu-item-handle', … … 173 181 start: function(e, ui) { 174 182 var height, width, parent, children, maxChildDepth; 175 183 176 transport = ui.item.children('.menu-item-transport');184 sort.transport = ui.item.children('.menu-item-transport'); 177 185 178 186 // Set depths. currentDepth must be set before children are located. 179 originalDepth = ( newItem ) ? 0 :ui.item.menuItemDepth();180 updateCurrentDepth(ui, originalDepth);187 sort.originalDepth = ui.item.menuItemDepth(); 188 updateCurrentDepth(ui, sort.originalDepth); 181 189 182 190 // Attach child elements to parent 183 191 // Skip the placeholder 184 192 parent = ( ui.item.next()[0] == ui.placeholder[0] ) ? ui.item.next() : ui.item; 185 193 children = parent.childMenuItems(); 186 transport.append( children );194 sort.transport.append( children ); 187 195 188 196 // Now that the element is complete, we can update... 189 197 updateDepthRange(ui); 190 198 191 199 // Update the height of the placeholder to match the moving item. 192 height = transport.outerHeight();200 height = sort.transport.outerHeight(); 193 201 // If there are children, account for distance between top of children and parent 194 202 height += ( height > 0 ) ? (ui.placeholder.css('margin-top').slice(0, -2) * 1) : 0; 195 203 height += ui.helper.outerHeight(); … … 197 205 ui.placeholder.height(height); 198 206 199 207 // Update the width of the placeholder to match the moving item. 200 maxChildDepth = originalDepth;208 maxChildDepth = sort.originalDepth; 201 209 children.each(function(){ 202 210 var depth = $(this).menuItemDepth(); 203 211 maxChildDepth = (depth > maxChildDepth) ? depth : maxChildDepth; 204 212 }); 205 213 width = ui.helper.find('.menu-item-handle').outerWidth(); // Get original width 206 width += api.depthToPx(maxChildDepth - originalDepth); // Account for children214 width += api.depthToPx(maxChildDepth - sort.originalDepth); // Account for children 207 215 width -= 2; // Subtract 2 for borders 208 216 ui.placeholder.width(width); 209 217 }, 210 218 stop: function(e, ui) { 211 var children, depthChange = currentDepth -originalDepth;219 var children, depthChange = sort.currentDepth - sort.originalDepth; 212 220 213 221 // Return child elements to the list 214 children = transport.children().insertAfter(ui.item);222 children = sort.transport.children().insertAfter(ui.item); 215 223 216 224 // Update depth classes 217 225 if( depthChange != 0 ) { 218 ui.item.updateDepthClass( currentDepth );226 ui.item.updateDepthClass( sort.currentDepth ); 219 227 children.shiftDepthClass( depthChange ); 220 228 } 229 230 // Unhighlight the parent 231 sort.prev.removeClass('menu-item-highlight'); 221 232 // Update the item data. 222 233 ui.item.updateParentMenuItemDBId(); 223 234 // Update positions … … 232 243 updateDepthRange(ui); 233 244 }, 234 245 sort: function(e, ui) { 235 var depth = api.pxToDepth(ui.helper.offset().left - menuLeft); 246 var offset = ui.helper.offset(); 247 depth = api.pxToDepth(offset.left - sort.menuLeft); 248 236 249 // Check and correct if depth is not within range. 237 if ( depth < minDepth ) depth = minDepth; 238 else if ( depth > maxDepth ) depth = maxDepth; 250 if ( depth < sort.minDepth ) depth = sort.minDepth; 251 else if ( depth > sort.maxDepth ) depth = sort.maxDepth; 252 253 // If element is over another element, highlight and shift placeholder to max 254 if ( offset.top < sort.prevBottom ) { 255 sort.prev.addClass('menu-item-highlight'); 256 depth = sort.maxDepth; 257 } else { 258 sort.prev.removeClass('menu-item-highlight'); 259 } 239 260 240 if( depth != currentDepth )261 if( depth != sort.currentDepth ) 241 262 updateCurrentDepth(ui, depth); 242 263 } 243 264 }); … … 249 270 // Make sure we don't select the moving item. 250 271 if( prev[0] == ui.item[0] ) prev = prev.prev(); 251 272 if( next[0] == ui.item[0] ) next = next.next(); 273 274 sort.prev.removeClass('menu-item-highlight'); 275 sort.prev = prev; 276 sort.next = next; 277 278 sort.prevBottom = (prev.length) ? prev.offset().top + prev.height() : 0; 279 sort.minDepth = (next.length) ? next.menuItemDepth() : 0; 252 280 253 minDepth = (next.length) ? next.menuItemDepth() : 0;254 255 281 if( prev.length ) 256 maxDepth = ( (depth = prev.menuItemDepth() + 1) > api.options.globalMaxDepth ) ? api.options.globalMaxDepth : depth;282 sort.maxDepth = ( (depth = prev.menuItemDepth() + 1) > api.options.globalMaxDepth ) ? api.options.globalMaxDepth : depth; 257 283 else 258 maxDepth = 0;284 sort.maxDepth = 0; 259 285 } 260 286 261 287 function updateCurrentDepth(ui, depth) { 262 ui.placeholder.updateDepthClass( depth, currentDepth );263 currentDepth = depth;288 ui.placeholder.updateDepthClass( depth, sort.currentDepth ); 289 sort.currentDepth = depth; 264 290 } 265 291 }, 266 292 -
wp-admin/css/nav-menu.dev.css
304 304 .menu li.deleting .menu-item-handle { 305 305 background-color:#faa; 306 306 } 307 .menu-item-highlight .menu-item-handle { 308 background: #ffffe0; 309 border: 1px solid #e6db55; 310 } 307 311 308 312 .menu-item-handle .item-title { 309 313 padding: 7px 0;