Changeset 33347
- Timestamp:
- 07/21/2015 05:39:24 PM (9 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/js/customize-preview-nav-menus.js
r33345 r33347 1 1 /* global JSON, _wpCustomizePreviewNavMenusExports */ 2 2 3 wp.customize.menusPreview = ( function( $, api) {3 ( function( $, _, wp ) { 4 4 'use strict'; 5 var currentRefreshDebounced = {}, 5 6 if ( ! wp || ! wp.customize ) { return; } 7 8 var api = wp.customize, 9 currentRefreshDebounced = {}, 6 10 refreshDebounceDelay = 200, 7 11 settings = {}, … … 17 21 }, 18 22 navMenuInstanceArgs: {} 19 }, 20 self = {}; 23 }; 24 25 api.MenusCustomizerPreview = { 26 /** 27 * Bootstrap functionality. 28 */ 29 init : function() { 30 var self = this, initializedSettings = {}; 31 32 settings = _.extend( {}, defaultSettings ); 33 if ( 'undefined' !== typeof _wpCustomizePreviewNavMenusExports ) { 34 _.extend( settings, _wpCustomizePreviewNavMenusExports ); 35 } 36 37 api.each( function( setting, id ) { 38 setting.id = id; 39 initializedSettings[ setting.id ] = true; 40 self.bindListener( setting ); 41 } ); 42 43 api.preview.bind( 'setting', function( args ) { 44 var id, value, setting; 45 args = args.slice(); 46 id = args.shift(); 47 value = args.shift(); 48 49 setting = api( id ); 50 if ( ! setting ) { 51 // Currently customize-preview.js is not creating settings for dynamically-created settings in the pane, so we have to do it. 52 setting = api.create( id, value ); // @todo This should be in core 53 } 54 if ( ! setting.id ) { 55 // Currently customize-preview.js doesn't set the id property for each setting, like customize-controls.js does. 56 setting.id = id; 57 } 58 59 if ( ! initializedSettings[ setting.id ] ) { 60 initializedSettings[ setting.id ] = true; 61 if ( self.bindListener( setting ) ) { 62 setting.callbacks.fireWith( setting, [ setting(), null ] ); 63 } 64 } 65 } ); 66 }, 67 68 /** 69 * 70 * @param {wp.customize.Value} setting 71 * @returns {boolean} Whether the setting was bound. 72 */ 73 bindListener : function( setting ) { 74 var matches, themeLocation; 75 76 matches = setting.id.match( /^nav_menu\[(-?\d+)]$/ ); 77 if ( matches ) { 78 setting.navMenuId = parseInt( matches[1], 10 ); 79 setting.bind( this.onChangeNavMenuSetting ); 80 return true; 81 } 82 83 matches = setting.id.match( /^nav_menu_item\[(-?\d+)]$/ ); 84 if ( matches ) { 85 setting.navMenuItemId = parseInt( matches[1], 10 ); 86 setting.bind( this.onChangeNavMenuItemSetting ); 87 return true; 88 } 89 90 matches = setting.id.match( /^nav_menu_locations\[(.+?)]/ ); 91 if ( matches ) { 92 themeLocation = matches[1]; 93 setting.bind( _.bind( function() { 94 this.refreshMenuLocation( themeLocation ); 95 }, this ) ); 96 return true; 97 } 98 99 return false; 100 }, 101 102 /** 103 * Handle changing of a nav_menu setting. 104 * 105 * @this {wp.customize.Setting} 106 */ 107 onChangeNavMenuSetting : function() { 108 var setting = this; 109 if ( ! setting.navMenuId ) { 110 throw new Error( 'Expected navMenuId property to be set.' ); 111 } 112 api.MenusCustomizerPreview.refreshMenu( setting.navMenuId ); 113 }, 114 115 /** 116 * Handle changing of a nav_menu_item setting. 117 * 118 * @this {wp.customize.Setting} 119 * @param {object} to 120 * @param {object} from 121 */ 122 onChangeNavMenuItemSetting : function( to, from ) { 123 if ( from && from.nav_menu_term_id && ( ! to || from.nav_menu_term_id !== to.nav_menu_term_id ) ) { 124 api.MenusCustomizerPreview.refreshMenu( from.nav_menu_term_id ); 125 } 126 if ( to && to.nav_menu_term_id ) { 127 api.MenusCustomizerPreview.refreshMenu( to.nav_menu_term_id ); 128 } 129 }, 130 131 /** 132 * Update a given menu rendered in the preview. 133 * 134 * @param {int} menuId 135 */ 136 refreshMenu : function( menuId ) { 137 var assignedLocations = []; 138 139 api.each(function( setting, id ) { 140 var matches = id.match( /^nav_menu_locations\[(.+?)]/ ); 141 if ( matches && menuId === setting() ) { 142 assignedLocations.push( matches[1] ); 143 } 144 }); 145 146 _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) { 147 if ( menuId === navMenuArgs.menu || -1 !== _.indexOf( assignedLocations, navMenuArgs.theme_location ) ) { 148 this.refreshMenuInstanceDebounced( instanceNumber ); 149 } 150 }, this ); 151 }, 152 153 /** 154 * Refresh the menu(s) associated with a given nav menu location. 155 * 156 * @param {string} location 157 */ 158 refreshMenuLocation : function( location ) { 159 var foundInstance = false; 160 _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) { 161 if ( location === navMenuArgs.theme_location ) { 162 this.refreshMenuInstanceDebounced( instanceNumber ); 163 foundInstance = true; 164 } 165 }, this ); 166 if ( ! foundInstance ) { 167 api.preview.send( 'refresh' ); 168 } 169 }, 170 171 /** 172 * Update a specific instance of a given menu on the page. 173 * 174 * @param {int} instanceNumber 175 */ 176 refreshMenuInstance : function( instanceNumber ) { 177 var data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName; 178 179 if ( ! settings.navMenuInstanceArgs[ instanceNumber ] ) { 180 throw new Error( 'unknown_instance_number' ); 181 } 182 instance = settings.navMenuInstanceArgs[ instanceNumber ]; 183 184 containerInstanceClassName = 'partial-refreshable-nav-menu-' + String( instanceNumber ); 185 container = $( '.' + containerInstanceClassName ); 186 187 if ( _.isNumber( instance.menu ) ) { 188 menuId = instance.menu; 189 } else if ( instance.theme_location && api.has( 'nav_menu_locations[' + instance.theme_location + ']' ) ) { 190 menuId = api( 'nav_menu_locations[' + instance.theme_location + ']' ).get(); 191 } 192 193 if ( ! menuId || ! instance.can_partial_refresh || 0 === container.length ) { 194 api.preview.send( 'refresh' ); 195 return; 196 } 197 menuId = parseInt( menuId, 10 ); 198 199 data = { 200 nonce: settings.previewCustomizeNonce, // for Customize Preview 201 wp_customize: 'on' 202 }; 203 if ( ! settings.theme.active ) { 204 data.theme = settings.theme.stylesheet; 205 } 206 data[ settings.renderQueryVar ] = '1'; 207 208 // Gather settings to send in partial refresh request. 209 customized = {}; 210 api.each( function( setting, id ) { 211 var value = setting.get(), shouldSend = false; 212 // @todo Core should propagate the dirty state into the Preview as well so we can use that here. 213 214 // Send setting if it is a nav_menu_locations[] setting. 215 shouldSend = shouldSend || /^nav_menu_locations\[/.test( id ); 216 217 // Send setting if it is the setting for this menu. 218 shouldSend = shouldSend || id === 'nav_menu[' + String( menuId ) + ']'; 219 220 // Send setting if it is one that is associated with this menu, or it is deleted. 221 shouldSend = shouldSend || ( /^nav_menu_item\[/.test( id ) && ( false === value || menuId === value.nav_menu_term_id ) ); 222 223 if ( shouldSend ) { 224 customized[ id ] = value; 225 } 226 } ); 227 data.customized = JSON.stringify( customized ); 228 data[ settings.renderNoncePostKey ] = settings.renderNonceValue; 229 230 wpNavArgs = $.extend( {}, instance ); 231 data.wp_nav_menu_args_hash = wpNavArgs.args_hash; 232 delete wpNavArgs.args_hash; 233 data.wp_nav_menu_args = JSON.stringify( wpNavArgs ); 234 235 container.addClass( 'customize-partial-refreshing' ); 236 237 request = wp.ajax.send( null, { 238 data: data, 239 url: settings.requestUri 240 } ); 241 request.done( function( data ) { 242 // If the menu is now not visible, refresh since the page layout may have changed. 243 if ( false === data ) { 244 api.preview.send( 'refresh' ); 245 return; 246 } 247 248 var eventParam, previousContainer = container; 249 container = $( data ); 250 container.addClass( containerInstanceClassName ); 251 container.addClass( 'partial-refreshable-nav-menu customize-partial-refreshing' ); 252 previousContainer.replaceWith( container ); 253 eventParam = { 254 instanceNumber: instanceNumber, 255 wpNavArgs: wpNavArgs, 256 oldContainer: previousContainer, 257 newContainer: container 258 }; 259 container.removeClass( 'customize-partial-refreshing' ); 260 $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] ); 261 } ); 262 }, 263 264 refreshMenuInstanceDebounced : function( instanceNumber ) { 265 if ( currentRefreshDebounced[ instanceNumber ] ) { 266 clearTimeout( currentRefreshDebounced[ instanceNumber ] ); 267 } 268 currentRefreshDebounced[ instanceNumber ] = setTimeout( 269 _.bind( function() { 270 this.refreshMenuInstance( instanceNumber ); 271 }, this ), 272 refreshDebounceDelay 273 ); 274 } 275 }; 21 276 22 277 api.bind( 'preview-ready', function() { 23 278 api.preview.bind( 'active', function() { 24 self.init();279 api.MenusCustomizerPreview.init(); 25 280 } ); 26 281 } ); 27 282 28 /** 29 * Bootstrap functionality. 30 */ 31 self.init = function() { 32 var self = this, initializedSettings = {}; 33 34 settings = _.extend( {}, defaultSettings ); 35 if ( 'undefined' !== typeof _wpCustomizePreviewNavMenusExports ) { 36 _.extend( settings, _wpCustomizePreviewNavMenusExports ); 37 } 38 39 api.each( function( setting, id ) { 40 setting.id = id; 41 initializedSettings[ setting.id ] = true; 42 self.bindListener( setting ); 43 } ); 44 45 api.preview.bind( 'setting', function( args ) { 46 var id, value, setting; 47 args = args.slice(); 48 id = args.shift(); 49 value = args.shift(); 50 51 setting = api( id ); 52 if ( ! setting ) { 53 // Currently customize-preview.js is not creating settings for dynamically-created settings in the pane, so we have to do it. 54 setting = api.create( id, value ); // @todo This should be in core 55 } 56 if ( ! setting.id ) { 57 // Currently customize-preview.js doesn't set the id property for each setting, like customize-controls.js does. 58 setting.id = id; 59 } 60 61 if ( ! initializedSettings[ setting.id ] ) { 62 initializedSettings[ setting.id ] = true; 63 if ( self.bindListener( setting ) ) { 64 setting.callbacks.fireWith( setting, [ setting(), null ] ); 65 } 66 } 67 } ); 68 }; 69 70 /** 71 * 72 * @param {wp.customize.Value} setting 73 * @returns {boolean} Whether the setting was bound. 74 */ 75 self.bindListener = function( setting ) { 76 var matches, themeLocation; 77 78 matches = setting.id.match( /^nav_menu\[(-?\d+)]$/ ); 79 if ( matches ) { 80 setting.navMenuId = parseInt( matches[1], 10 ); 81 setting.bind( self.onChangeNavMenuSetting ); 82 return true; 83 } 84 85 matches = setting.id.match( /^nav_menu_item\[(-?\d+)]$/ ); 86 if ( matches ) { 87 setting.navMenuItemId = parseInt( matches[1], 10 ); 88 setting.bind( self.onChangeNavMenuItemSetting ); 89 return true; 90 } 91 92 matches = setting.id.match( /^nav_menu_locations\[(.+?)]/ ); 93 if ( matches ) { 94 themeLocation = matches[1]; 95 setting.bind( function() { 96 self.refreshMenuLocation( themeLocation ); 97 } ); 98 return true; 99 } 100 101 return false; 102 }; 103 104 /** 105 * Handle changing of a nav_menu setting. 106 * 107 * @this {wp.customize.Setting} 108 */ 109 self.onChangeNavMenuSetting = function() { 110 var setting = this; 111 if ( ! setting.navMenuId ) { 112 throw new Error( 'Expected navMenuId property to be set.' ); 113 } 114 self.refreshMenu( setting.navMenuId ); 115 }; 116 117 /** 118 * Handle changing of a nav_menu_item setting. 119 * 120 * @this {wp.customize.Setting} 121 * @param {object} to 122 * @param {object} from 123 */ 124 self.onChangeNavMenuItemSetting = function( to, from ) { 125 if ( from && from.nav_menu_term_id && ( ! to || from.nav_menu_term_id !== to.nav_menu_term_id ) ) { 126 self.refreshMenu( from.nav_menu_term_id ); 127 } 128 if ( to && to.nav_menu_term_id ) { 129 self.refreshMenu( to.nav_menu_term_id ); 130 } 131 }; 132 133 /** 134 * Update a given menu rendered in the preview. 135 * 136 * @param {int} menuId 137 */ 138 self.refreshMenu = function( menuId ) { 139 var assignedLocations = []; 140 141 api.each(function( setting, id ) { 142 var matches = id.match( /^nav_menu_locations\[(.+?)]/ ); 143 if ( matches && menuId === setting() ) { 144 assignedLocations.push( matches[1] ); 145 } 146 }); 147 148 _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) { 149 if ( menuId === navMenuArgs.menu || -1 !== _.indexOf( assignedLocations, navMenuArgs.theme_location ) ) { 150 this.refreshMenuInstanceDebounced( instanceNumber ); 151 } 152 }, this ); 153 }; 154 155 /** 156 * Refresh the menu(s) associated with a given nav menu location. 157 * 158 * @param {string} location 159 */ 160 self.refreshMenuLocation = function( location ) { 161 var foundInstance = false; 162 _.each( settings.navMenuInstanceArgs, function( navMenuArgs, instanceNumber ) { 163 if ( location === navMenuArgs.theme_location ) { 164 this.refreshMenuInstanceDebounced( instanceNumber ); 165 foundInstance = true; 166 } 167 }, this ); 168 if ( ! foundInstance ) { 169 api.preview.send( 'refresh' ); 170 } 171 }; 172 173 /** 174 * Update a specific instance of a given menu on the page. 175 * 176 * @param {int} instanceNumber 177 */ 178 self.refreshMenuInstance = function( instanceNumber ) { 179 var self = this, data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName; 180 181 if ( ! settings.navMenuInstanceArgs[ instanceNumber ] ) { 182 throw new Error( 'unknown_instance_number' ); 183 } 184 instance = settings.navMenuInstanceArgs[ instanceNumber ]; 185 186 containerInstanceClassName = 'partial-refreshable-nav-menu-' + String( instanceNumber ); 187 container = $( '.' + containerInstanceClassName ); 188 189 if ( _.isNumber( instance.menu ) ) { 190 menuId = instance.menu; 191 } else if ( instance.theme_location && api.has( 'nav_menu_locations[' + instance.theme_location + ']' ) ) { 192 menuId = api( 'nav_menu_locations[' + instance.theme_location + ']' ).get(); 193 } 194 195 if ( ! menuId || ! instance.can_partial_refresh || 0 === container.length ) { 196 api.preview.send( 'refresh' ); 197 return; 198 } 199 menuId = parseInt( menuId, 10 ); 200 201 data = { 202 nonce: settings.previewCustomizeNonce, // for Customize Preview 203 wp_customize: 'on' 204 }; 205 if ( ! settings.theme.active ) { 206 data.theme = settings.theme.stylesheet; 207 } 208 data[ settings.renderQueryVar ] = '1'; 209 210 // Gather settings to send in partial refresh request. 211 customized = {}; 212 api.each( function( setting, id ) { 213 var value = setting.get(), shouldSend = false; 214 // @todo Core should propagate the dirty state into the Preview as well so we can use that here. 215 216 // Send setting if it is a nav_menu_locations[] setting. 217 shouldSend = shouldSend || /^nav_menu_locations\[/.test( id ); 218 219 // Send setting if it is the setting for this menu. 220 shouldSend = shouldSend || id === 'nav_menu[' + String( menuId ) + ']'; 221 222 // Send setting if it is one that is associated with this menu, or it is deleted. 223 shouldSend = shouldSend || ( /^nav_menu_item\[/.test( id ) && ( false === value || menuId === value.nav_menu_term_id ) ); 224 225 if ( shouldSend ) { 226 customized[ id ] = value; 227 } 228 } ); 229 data.customized = JSON.stringify( customized ); 230 data[ settings.renderNoncePostKey ] = settings.renderNonceValue; 231 232 wpNavArgs = $.extend( {}, instance ); 233 data.wp_nav_menu_args_hash = wpNavArgs.args_hash; 234 delete wpNavArgs.args_hash; 235 data.wp_nav_menu_args = JSON.stringify( wpNavArgs ); 236 237 container.addClass( 'customize-partial-refreshing' ); 238 239 request = wp.ajax.send( null, { 240 data: data, 241 url: settings.requestUri 242 } ); 243 request.done( function( data ) { 244 // If the menu is now not visible, refresh since the page layout may have changed. 245 if ( false === data ) { 246 api.preview.send( 'refresh' ); 247 return; 248 } 249 250 var eventParam, previousContainer = container; 251 container = $( data ); 252 container.addClass( containerInstanceClassName ); 253 container.addClass( 'partial-refreshable-nav-menu customize-partial-refreshing' ); 254 previousContainer.replaceWith( container ); 255 eventParam = { 256 instanceNumber: instanceNumber, 257 wpNavArgs: wpNavArgs, 258 oldContainer: previousContainer, 259 newContainer: container 260 }; 261 container.removeClass( 'customize-partial-refreshing' ); 262 $( document ).trigger( 'customize-preview-menu-refreshed', [ eventParam ] ); 263 } ); 264 }; 265 266 self.refreshMenuInstanceDebounced = function( instanceNumber ) { 267 if ( currentRefreshDebounced[ instanceNumber ] ) { 268 clearTimeout( currentRefreshDebounced[ instanceNumber ] ); 269 } 270 currentRefreshDebounced[ instanceNumber ] = setTimeout( 271 function() { 272 self.refreshMenuInstance( instanceNumber ); 273 }, 274 refreshDebounceDelay 275 ); 276 }; 277 278 return self; 279 280 }( jQuery, wp.customize ) ); 283 }( jQuery, _, wp ) );
Note: See TracChangeset
for help on using the changeset viewer.