![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Changeset 27995
- Timestamp:
- 04/07/2014 07:59:49 PM (12 years ago)
- File:
-
- 1 edited
-
trunk/src/wp-admin/js/customize-widgets.js (modified) (24 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/js/customize-widgets.js
r27988 r27995 530 530 e.preventDefault(); 531 531 var sidebarWidgetsControl = self.getSidebarWidgetsControl(); 532 if ( sidebarWidgetsControl.is _reordering ) {532 if ( sidebarWidgetsControl.isReordering ) { 533 533 return; 534 534 } … … 607 607 var li = $( this ), 608 608 sidebarId, 609 sidebar _model;609 sidebar; 610 610 611 611 sidebarId = li.data( 'id' ); 612 sidebar _model= api.Widgets.registeredSidebars.get( sidebarId );613 614 li.toggle( sidebar _model.get( 'is_rendered' ) );615 616 if ( li.hasClass( 'selected' ) && ! sidebar _model.get( 'is_rendered' ) ) {612 sidebar = api.Widgets.registeredSidebars.get( sidebarId ); 613 614 li.toggle( sidebar.get( 'is_rendered' ) ); 615 616 if ( li.hasClass( 'selected' ) && ! sidebar.get( 'is_rendered' ) ) { 617 617 selectSidebarItem( selfSidebarItem ); 618 618 } … … 726 726 $saveBtn.on( 'click', function( e ) { 727 727 e.preventDefault(); 728 self.updateWidget( { disable_form: true } ); 728 self.updateWidget( { disable_form: true } ); // @todo disable_form is unused? 729 729 } ); 730 730 … … 737 737 if ( 13 === e.which ) { // Enter 738 738 e.preventDefault(); 739 self.updateWidget( { ignore _active_element: true } );739 self.updateWidget( { ignoreActiveElement: true } ); 740 740 } 741 741 } ); … … 764 764 765 765 // Update widget control to indicate whether it is currently rendered 766 api.Widgets.Previewer.bind( 'rendered-widgets', function( rendered_widgets ) { 767 var is_rendered = !! rendered_widgets[self.params.widget_id]; 768 self.container.toggleClass( 'widget-rendered', is_rendered ); 766 api.Widgets.Previewer.bind( 'rendered-widgets', function( renderedWidgets ) { 767 var isRendered = !! renderedWidgets[self.params.widget_id]; 768 769 self.container.toggleClass( 'widget-rendered', isRendered ); 769 770 } ); 770 771 … … 801 802 802 803 self.container.slideUp( function() { 803 var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ), 804 sidebar_widget_ids, 805 i; 806 807 if ( ! sidebars_widgets_control ) { 804 var sidebarsWidgetsControl = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ), 805 sidebarWidgetIds, i; 806 807 if ( ! sidebarsWidgetsControl ) { 808 808 return; 809 809 } 810 sidebar_widget_ids = sidebars_widgets_control.setting().slice(); 811 i = _.indexOf( sidebar_widget_ids, self.params.widget_id ); 810 811 sidebarWidgetIds = sidebarsWidgetsControl.setting().slice(); 812 i = _.indexOf( sidebarWidgetIds, self.params.widget_id ); 812 813 if ( -1 === i ) { 813 814 return; 814 815 } 815 sidebar_widget_ids.splice( i, 1 ); 816 sidebars_widgets_control.setting( sidebar_widget_ids ); 816 817 sidebarWidgetIds.splice( i, 1 ); 818 sidebarsWidgetsControl.setting( sidebarWidgetIds ); 819 817 820 $adjacentFocusTarget.focus(); // keyboard accessibility 818 821 } ); … … 914 917 * @param {Object|null} [args.instance=null] When the model changes, the instance is sent here; otherwise, the inputs from the form are used 915 918 * @param {Function|null} [args.complete=null] Function which is called when the request finishes. Context is bound to the control. First argument is any error. Following arguments are for success. 916 * @param {Boolean} [args.ignore _active_element=false] Whether or not updating a field will be deferred if focus is still on the element.919 * @param {Boolean} [args.ignoreActiveElement=false] Whether or not updating a field will be deferred if focus is still on the element. 917 920 */ 918 921 updateWidget: function( args ) { … … 923 926 instance: null, 924 927 complete: null, 925 ignore _active_element: false928 ignoreActiveElement: false 926 929 }, args ); 927 930 … … 1017 1020 $input.data( 'sanitized', sanitizedState ); 1018 1021 1019 canUpdateState = ( submittedState !== sanitizedState && ( args.ignore _active_element || ! $input.is( document.activeElement ) ) );1022 canUpdateState = ( submittedState !== sanitizedState && ( args.ignoreActiveElement || ! $input.is( document.activeElement ) ) ); 1020 1023 if ( canUpdateState ) { 1021 1024 $input.prop( property, sanitizedState ); … … 1056 1059 1057 1060 if ( completeCallback ) { 1058 completeCallback.call( self, null, { no _change: ! isChanged, ajax_finished: true } );1061 completeCallback.call( self, null, { noChange: ! isChanged, ajaxFinished: true } ); 1059 1062 } 1060 1063 } else { … … 1302 1305 */ 1303 1306 ready: function() { 1304 var control = this;1305 control.control_section = control.container.closest( '.control-section' );1306 control.section_content = control.container.closest( '.accordion-section-content' ); 1307 control._setupModel();1308 control._setupSortable();1309 control._setupAddition();1310 control._applyCardinalOrderClassNames();1307 this.$controlSection = this.container.closest( '.control-section' ); 1308 this.$sectionContent = this.container.closest( '.accordion-section-content' ); 1309 1310 this._setupModel(); 1311 this._setupSortable(); 1312 this._setupAddition(); 1313 this._applyCardinalOrderClassNames(); 1311 1314 }, 1312 1315 … … 1315 1318 */ 1316 1319 _setupModel: function() { 1317 var control= this,1318 registered _sidebar = api.Widgets.registeredSidebars.get( control.params.sidebar_id );1319 1320 control.setting.bind( function( new_widget_ids, old_widget_ids ) {1321 var widget _form_controls,1322 sidebar_widgets_add_control, 1323 final_control_containers,1324 removed_widget_ids = _( old_widget_ids ).difference( new_widget_ids ); 1325 1326 // Filter out any persistent widget_ids for widgets which have been deactivated1327 new_widget_ids = _( new_widget_ids ).filter( function( new_widget_id ) {1328 var parsed_widget_id = parse_widget_id( new_widget_id ); 1329 return !! api.Widgets.availableWidgets.findWhere( { id_base: parsed _widget_id.id_base } );1320 var self = this, 1321 registeredSidebar = api.Widgets.registeredSidebars.get( this.params.sidebar_id ); 1322 1323 this.setting.bind( function( newWidgetIds, oldWidgetIds ) { 1324 var widgetFormControls, $sidebarWidgetsAddControl, finalControlContainers, removedWidgetIds; 1325 1326 removedWidgetIds = _( oldWidgetIds ).difference( newWidgetIds ); 1327 1328 // Filter out any persistent widget IDs for widgets which have been deactivated 1329 newWidgetIds = _( newWidgetIds ).filter( function( newWidgetId ) { 1330 var parsedWidgetId = parseWidgetId( newWidgetId ); 1331 1332 return !! api.Widgets.availableWidgets.findWhere( { id_base: parsedWidgetId.id_base } ); 1330 1333 } ); 1331 1334 1332 widget_form_controls = _( new_widget_ids ).map( function( widget_id ) { 1333 var widget_form_control = api.Widgets.getWidgetFormControlForWidget( widget_id ); 1334 if ( ! widget_form_control ) { 1335 widget_form_control = control.addWidget( widget_id ); 1336 } 1337 return widget_form_control; 1335 widgetFormControls = _( newWidgetIds ).map( function( widgetId ) { 1336 var widgetFormControl = api.Widgets.getWidgetFormControlForWidget( widgetId ); 1337 1338 if ( ! widgetFormControl ) { 1339 widgetFormControl = self.addWidget( widgetId ); 1340 } 1341 1342 return widgetFormControl; 1338 1343 } ); 1339 1344 1340 1345 // Sort widget controls to their new positions 1341 widget_form_controls.sort( function( a, b ) { 1342 var a_index = _.indexOf( new_widget_ids, a.params.widget_id ), 1343 b_index = _.indexOf( new_widget_ids, b.params.widget_id ); 1344 if ( a_index === b_index ) { 1346 widgetFormControls.sort( function( a, b ) { 1347 var aIndex = _.indexOf( newWidgetIds, a.params.widget_id ), 1348 bIndex = _.indexOf( newWidgetIds, b.params.widget_id ); 1349 1350 if ( aIndex === bIndex ) { 1345 1351 return 0; 1346 1352 } 1347 return a_index < b_index ? -1 : 1; 1353 1354 return aIndex < bIndex ? -1 : 1; 1348 1355 } ); 1349 1356 1350 sidebar_widgets_add_control = control.section_content.find( '.customize-control-sidebar_widgets' );1351 1352 1357 // Append the controls to put them in the right order 1353 final _control_containers = _( widget_form_controls ).map( function( widget_form_controls ) {1354 return widget _form_controls.container[0];1358 finalControlContainers = _( widgetFormControls ).map( function( widgetFormControls ) { 1359 return widgetFormControls.container[0]; 1355 1360 } ); 1356 1361 1362 $sidebarWidgetsAddControl = self.$sectionContent.find( '.customize-control-sidebar_widgets' ); 1363 $sidebarWidgetsAddControl.before( finalControlContainers ); 1364 1357 1365 // Re-sort widget form controls (including widgets form other sidebars newly moved here) 1358 sidebar_widgets_add_control.before( final_control_containers ); 1359 control._applyCardinalOrderClassNames(); 1366 self._applyCardinalOrderClassNames(); 1360 1367 1361 1368 // If the widget was dragged into the sidebar, make sure the sidebar_id param is updated 1362 _( widget _form_controls ).each( function( widget_form_control ) {1363 widget _form_control.params.sidebar_id = control.params.sidebar_id;1369 _( widgetFormControls ).each( function( widgetFormControl ) { 1370 widgetFormControl.params.sidebar_id = self.params.sidebar_id; 1364 1371 } ); 1365 1372 1366 1373 // Cleanup after widget removal 1367 _( removed _widget_ids ).each( function( removed_widget_id ) {1374 _( removedWidgetIds ).each( function( removedWidgetId ) { 1368 1375 1369 1376 // Using setTimeout so that when moving a widget to another sidebar, the other sidebars_widgets settings get a chance to update 1370 1377 setTimeout( function() { 1371 var is_present_in_another_sidebar = false, 1372 removed_control, 1373 was_dragged_to_another_sidebar, 1374 inactive_widgets, 1375 removed_id_base, 1376 widget; 1378 var removedControl, wasDraggedToAnotherSidebar, inactiveWidgets, removedIdBase, 1379 widget, isPresentInAnotherSidebar = false; 1377 1380 1378 1381 // Check if the widget is in another sidebar 1379 api.each( function( other _setting ) {1380 if ( other _setting.id === control.setting.id || 0 !== other_setting.id.indexOf( 'sidebars_widgets[' ) || other_setting.id === 'sidebars_widgets[wp_inactive_widgets]' ) {1382 api.each( function( otherSetting ) { 1383 if ( otherSetting.id === self.setting.id || 0 !== otherSetting.id.indexOf( 'sidebars_widgets[' ) || otherSetting.id === 'sidebars_widgets[wp_inactiveWidgets]' ) { 1381 1384 return; 1382 1385 } 1383 var other_sidebar_widgets = other_setting(), i; 1384 1385 i = _.indexOf( other_sidebar_widgets, removed_widget_id ); 1386 1387 var otherSidebarWidgets = otherSetting(), i; 1388 1389 i = _.indexOf( otherSidebarWidgets, removedWidgetId ); 1386 1390 if ( -1 !== i ) { 1387 is _present_in_another_sidebar = true;1391 isPresentInAnotherSidebar = true; 1388 1392 } 1389 1393 } ); 1390 1394 1391 1395 // If the widget is present in another sidebar, abort! 1392 if ( is _present_in_another_sidebar ) {1396 if ( isPresentInAnotherSidebar ) { 1393 1397 return; 1394 1398 } 1395 1399 1396 removed _control = api.Widgets.getWidgetFormControlForWidget( removed_widget_id );1400 removedControl = api.Widgets.getWidgetFormControlForWidget( removedWidgetId ); 1397 1401 1398 1402 // Detect if widget control was dragged to another sidebar 1399 was_dragged_to_another_sidebar = ( 1400 removed_control && 1401 $.contains( document, removed_control.container[0] ) && 1402 ! $.contains( control.section_content[0], removed_control.container[0] ) 1403 ); 1403 wasDraggedToAnotherSidebar = removedControl && $.contains( document, removedControl.container[0] ) && ! $.contains( self.$sectionContent[0], removedControl.container[0] ); 1404 1404 1405 1405 // Delete any widget form controls for removed widgets 1406 if ( removed _control && ! was_dragged_to_another_sidebar ) {1407 api.control.remove( removed _control.id );1408 removed _control.container.remove();1406 if ( removedControl && ! wasDraggedToAnotherSidebar ) { 1407 api.control.remove( removedControl.id ); 1408 removedControl.container.remove(); 1409 1409 } 1410 1410 1411 1411 // Move widget to inactive widgets sidebar (move it to trash) if has been previously saved 1412 1412 // This prevents the inactive widgets sidebar from overflowing with throwaway widgets 1413 if ( api.Widgets.savedWidgetIds[removed _widget_id] ) {1414 inactive _widgets = api.value( 'sidebars_widgets[wp_inactive_widgets]' )().slice();1415 inactive _widgets.push( removed_widget_id );1416 api.value( 'sidebars_widgets[wp_inactive _widgets]' )( _( inactive_widgets ).unique() );1413 if ( api.Widgets.savedWidgetIds[removedWidgetId] ) { 1414 inactiveWidgets = api.value( 'sidebars_widgets[wp_inactiveWidgets]' )().slice(); 1415 inactiveWidgets.push( removedWidgetId ); 1416 api.value( 'sidebars_widgets[wp_inactiveWidgets]' )( _( inactiveWidgets ).unique() ); 1417 1417 } 1418 1418 1419 1419 // Make old single widget available for adding again 1420 removed _id_base = parse_widget_id( removed_widget_id ).id_base;1421 widget = api.Widgets.availableWidgets.findWhere( { id_base: removed _id_base } );1420 removedIdBase = parseWidgetId( removedWidgetId ).id_base; 1421 widget = api.Widgets.availableWidgets.findWhere( { id_base: removedIdBase } ); 1422 1422 if ( widget && ! widget.get( 'is_multi' ) ) { 1423 1423 widget.set( 'is_disabled', false ); … … 1429 1429 1430 1430 // Update the model with whether or not the sidebar is rendered 1431 api.Widgets.Previewer.bind( 'rendered-sidebars', function( rendered_sidebars ) { 1432 var is_rendered = !! rendered_sidebars[control.params.sidebar_id]; 1433 registered_sidebar.set( 'is_rendered', is_rendered ); 1431 api.Widgets.Previewer.bind( 'rendered-sidebars', function( renderedSidebars ) { 1432 var isRendered = !! renderedSidebars[self.params.sidebar_id]; 1433 1434 registeredSidebar.set( 'is_rendered', isRendered ); 1434 1435 } ); 1435 1436 1436 1437 // Show the sidebar section when it becomes visible 1437 registered_sidebar.on( 'change:is_rendered', function( ) { 1438 var section_selector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), section; 1439 section = $( section_selector ); 1438 registeredSidebar.on( 'change:is_rendered', function( ) { 1439 var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section; 1440 1441 $section = $( sectionSelector ); 1440 1442 if ( this.get( 'is_rendered' ) ) { 1441 section.stop().slideDown( function() {1443 $section.stop().slideDown( function() { 1442 1444 $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow 1443 1445 } ); 1446 1444 1447 } else { 1445 1448 // Make sure that hidden sections get closed first 1446 if ( section.hasClass( 'open' ) ) {1449 if ( $section.hasClass( 'open' ) ) { 1447 1450 // it would be nice if accordionSwitch() in accordion.js was public 1448 section.find( '.accordion-section-title' ).trigger( 'click' ); 1449 } 1450 section.stop().slideUp(); 1451 $section.find( '.accordion-section-title' ).trigger( 'click' ); 1452 } 1453 1454 $section.stop().slideUp(); 1451 1455 } 1452 1456 } ); … … 1457 1461 */ 1458 1462 _setupSortable: function() { 1459 var control = this; 1460 control.is_reordering = false; 1463 var self = this; 1464 1465 this.isReordering = false; 1461 1466 1462 1467 /** 1463 1468 * Update widget order setting when controls are re-ordered 1464 1469 */ 1465 control.section_content.sortable( {1470 this.$sectionContent.sortable( { 1466 1471 items: '> .customize-control-widget_form', 1467 1472 handle: '.widget-top', … … 1469 1474 connectWith: '.accordion-section-content:has(.customize-control-sidebar_widgets)', 1470 1475 update: function() { 1471 var widget_container_ids = control.section_content.sortable( 'toArray' ), widget_ids; 1472 widget_ids = $.map( widget_container_ids, function( widget_container_id ) { 1473 return $( '#' + widget_container_id ).find( ':input[name=widget-id]' ).val(); 1476 var widgetContainerIds = self.$sectionContent.sortable( 'toArray' ), widgetIds; 1477 1478 widgetIds = $.map( widgetContainerIds, function( widgetContainerId ) { 1479 return $( '#' + widgetContainerId ).find( ':input[name=widget-id]' ).val(); 1474 1480 } ); 1475 control.setting( widget_ids ); 1481 1482 self.setting( widgetIds ); 1476 1483 } 1477 1484 } ); … … 1481 1488 * allowing the control to be dropped into another section 1482 1489 */ 1483 control.control_section.find( '.accordion-section-title' ).droppable({1490 this.$controlSection.find( '.accordion-section-title' ).droppable({ 1484 1491 accept: '.customize-control-widget_form', 1485 1492 over: function() { 1486 if ( ! control.control_section.hasClass( 'open' ) ) {1487 control.control_section.addClass( 'open' );1488 control.section_content.toggle( false ).slideToggle( 150, function() {1489 control.section_content.sortable( 'refreshPositions' );1493 if ( ! self.$controlSection.hasClass( 'open' ) ) { 1494 self.$controlSection.addClass( 'open' ); 1495 self.$sectionContent.toggle( false ).slideToggle( 150, function() { 1496 self.$sectionContent.sortable( 'refreshPositions' ); 1490 1497 } ); 1491 1498 } 1492 1499 } 1493 } 1500 }); 1494 1501 1495 1502 /** 1496 1503 * Keyboard-accessible reordering 1497 1504 */ 1498 control.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) {1505 this.container.find( '.reorder-toggle' ).on( 'click keydown', function( event ) { 1499 1506 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar 1500 1507 return; 1501 1508 } 1502 1509 1503 control.toggleReordering( ! control.is_reordering );1510 self.toggleReordering( ! self.isReordering ); 1504 1511 } ); 1505 1512 }, … … 1509 1516 */ 1510 1517 _setupAddition: function() { 1511 var control= this;1512 1513 control.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) {1518 var self = this; 1519 1520 this.container.find( '.add-new-widget' ).on( 'click keydown', function( event ) { 1514 1521 if ( event.type === 'keydown' && ! ( event.which === 13 || event.which === 32 ) ) { // Enter or Spacebar 1515 1522 return; 1516 1523 } 1517 1524 1518 if ( control.section_content.hasClass( 'reordering' ) ) {1525 if ( self.$sectionContent.hasClass( 'reordering' ) ) { 1519 1526 return; 1520 1527 } 1521 1528 1522 // @todo Use an control.is_adding state1523 1529 if ( ! $( 'body' ).hasClass( 'adding-widget' ) ) { 1524 api.Widgets.availableWidgetsPanel.open( control);1530 api.Widgets.availableWidgetsPanel.open( self ); 1525 1531 } else { 1526 1532 api.Widgets.availableWidgetsPanel.close(); … … 1533 1539 */ 1534 1540 _applyCardinalOrderClassNames: function() { 1535 var control = this; 1536 control.section_content.find( '.customize-control-widget_form' ) 1541 this.$sectionContent.find( '.customize-control-widget_form' ) 1537 1542 .removeClass( 'first-widget' ) 1538 1543 .removeClass( 'last-widget' ) 1539 1544 .find( '.move-widget-down, .move-widget-up' ).prop( 'tabIndex', 0 ); 1540 1545 1541 control.section_content.find( '.customize-control-widget_form:first' )1546 this.$sectionContent.find( '.customize-control-widget_form:first' ) 1542 1547 .addClass( 'first-widget' ) 1543 1548 .find( '.move-widget-up' ).prop( 'tabIndex', -1 ); 1544 control.section_content.find( '.customize-control-widget_form:last' ) 1549 1550 this.$sectionContent.find( '.customize-control-widget_form:last' ) 1545 1551 .addClass( 'last-widget' ) 1546 1552 .find( '.move-widget-down' ).prop( 'tabIndex', -1 ); … … 1555 1561 * Enable/disable the reordering UI 1556 1562 * 1557 * @param {Boolean} toggle to enable/disable reordering1558 */ 1559 toggleReordering: function( toggle ) {1560 var control = this;1561 toggle = Boolean( toggle ); 1562 if ( toggle === control.section_content.hasClass( 'reordering' ) ) {1563 * @param {Boolean} showOrHide to enable/disable reordering 1564 */ 1565 toggleReordering: function( showOrHide ) { 1566 showOrHide = Boolean( showOrHide ); 1567 1568 if ( showOrHide === this.$sectionContent.hasClass( 'reordering' ) ) { 1563 1569 return; 1564 1570 } 1565 1571 1566 control.is_reordering = toggle;1567 control.section_content.toggleClass( 'reordering', toggle );1568 1569 if ( toggle ) {1570 _( control.getWidgetFormControls() ).each( function( form_control ) {1571 form _control.collapseForm();1572 this.isReordering = showOrHide; 1573 this.$sectionContent.toggleClass( 'reordering', showOrHide ); 1574 1575 if ( showOrHide ) { 1576 _( this.getWidgetFormControls() ).each( function( formControl ) { 1577 formControl.collapseForm(); 1572 1578 } ); 1573 1579 } … … 1578 1584 */ 1579 1585 getWidgetFormControls: function() { 1580 var control = this, form_controls; 1581 1582 form_controls = _( control.setting() ).map( function( widget_id ) { 1583 var setting_id = widgetIdToSettingId( widget_id ), 1584 form_control = api.control( setting_id ); 1585 1586 if ( ! form_control ) { 1587 throw new Error( 'Unable to find widget_form control for ' + widget_id ); 1588 } 1589 return form_control; 1590 } ); 1591 return form_controls; 1592 }, 1593 1594 /** 1595 * @param {string} widget_id or an id_base for adding a previously non-existing widget 1586 var formControls; 1587 1588 formControls = _( this.setting() ).map( function( widgetId ) { 1589 var settingId = widgetIdToSettingId( widgetId ), 1590 formControl = api.control( settingId ); 1591 1592 if ( ! formControl ) { 1593 return; 1594 } 1595 1596 return formControl; 1597 } ); 1598 1599 return formControls; 1600 }, 1601 1602 /** 1603 * @param {string} widgetId or an id_base for adding a previously non-existing widget 1596 1604 * @returns {object} widget_form control instance 1597 1605 */ 1598 addWidget: function( widget_id ) { 1599 var control = this, 1600 control_html, 1601 widget_el, 1602 customize_control_type = 'widget_form', 1603 customize_control, 1604 parsed_widget_id = parse_widget_id( widget_id ), 1605 widget_number = parsed_widget_id.number, 1606 widget_id_base = parsed_widget_id.id_base, 1607 widget = api.Widgets.availableWidgets.findWhere( {id_base: widget_id_base} ), 1608 setting_id, 1609 is_existing_widget, 1610 Constructor, 1611 widget_form_control, 1612 sidebar_widgets, 1613 setting_args; 1606 addWidget: function( widgetId ) { 1607 var self = this, controlHtml, $widget, controlType = 'widget_form', $control, controlConstructor, 1608 parsedWidgetId = parseWidgetId( widgetId ), 1609 widgetNumber = parsedWidgetId.number, 1610 widgetIdBase = parsedWidgetId.id_base, 1611 widget = api.Widgets.availableWidgets.findWhere( {id_base: widgetIdBase} ), 1612 settingId, isExistingWidget, widgetFormControl, sidebarWidgets, settingArgs; 1614 1613 1615 1614 if ( ! widget ) { 1616 throw new Error( 'Widget unexpectedly not found.' ); 1617 } 1618 if ( widget_number && ! widget.get( 'is_multi' ) ) { 1619 throw new Error( 'Did not expect a widget number to be supplied for a non-multi widget' ); 1615 return; 1616 } 1617 1618 if ( widgetNumber && ! widget.get( 'is_multi' ) ) { 1619 return; 1620 1620 } 1621 1621 1622 1622 // Set up new multi widget 1623 if ( widget.get( 'is_multi' ) && ! widget _number ) {1623 if ( widget.get( 'is_multi' ) && ! widgetNumber ) { 1624 1624 widget.set( 'multi_number', widget.get( 'multi_number' ) + 1 ); 1625 widget _number = widget.get( 'multi_number' );1626 } 1627 1628 control _html = $( '#widget-tpl-' + widget.get( 'id' ) ).html();1625 widgetNumber = widget.get( 'multi_number' ); 1626 } 1627 1628 controlHtml = $( '#widget-tpl-' + widget.get( 'id' ) ).html(); 1629 1629 if ( widget.get( 'is_multi' ) ) { 1630 control _html = control_html.replace( /<[^<>]+>/g, function( m ) {1631 return m.replace( /__i__|%i%/g, widget _number );1630 controlHtml = controlHtml.replace( /<[^<>]+>/g, function( m ) { 1631 return m.replace( /__i__|%i%/g, widgetNumber ); 1632 1632 } ); 1633 1633 } else { 1634 1634 widget.set( 'is_disabled', true ); // Prevent single widget from being added again now 1635 1635 } 1636 widget_el = $( control_html ); 1637 1638 customize_control = $( '<li></li>' ); 1639 customize_control.addClass( 'customize-control' ); 1640 customize_control.addClass( 'customize-control-' + customize_control_type ); 1641 customize_control.append( widget_el ); 1642 customize_control.find( '> .widget-icon' ).remove(); 1636 1637 $widget = $( controlHtml ); 1638 1639 $control = $( '<li/>' ) 1640 .addClass( 'customize-control' ) 1641 .addClass( 'customize-control-' + controlType ) 1642 .append( $widget ); 1643 1644 // Remove icon which is visible inside the panel 1645 $control.find( '> .widget-icon' ).remove(); 1646 1643 1647 if ( widget.get( 'is_multi' ) ) { 1644 customize_control.find( 'input[name="widget_number"]' ).val( widget_number ); 1645 customize_control.find( 'input[name="multi_number"]' ).val( widget_number ); 1646 } 1647 widget_id = customize_control.find( '[name="widget-id"]' ).val(); 1648 customize_control.hide(); // to be slid-down below 1649 1650 setting_id = 'widget_' + widget.get( 'id_base' ); 1648 $control.find( 'input[name="widget_number"]' ).val( widgetNumber ); 1649 $control.find( 'input[name="multi_number"]' ).val( widgetNumber ); 1650 } 1651 1652 widgetId = $control.find( '[name="widget-id"]' ).val(); 1653 1654 $control.hide(); // to be slid-down below 1655 1656 settingId = 'widget_' + widget.get( 'id_base' ); 1651 1657 if ( widget.get( 'is_multi' ) ) { 1652 setting _id += '[' + widget_number + ']';1653 } 1654 customize_control.attr( 'id', 'customize-control-' + setting_id.replace( /\]/g, '' ).replace( /\[/g, '-' ) );1655 1656 control.container.after( customize_control );1658 settingId += '[' + widgetNumber + ']'; 1659 } 1660 $control.attr( 'id', 'customize-control-' + settingId.replace( /\]/g, '' ).replace( /\[/g, '-' ) ); 1661 1662 this.container.after( $control ); 1657 1663 1658 1664 // Only create setting if it doesn't already exist (if we're adding a pre-existing inactive widget) 1659 is _existing_widget = api.has( setting_id );1660 if ( ! is _existing_widget ) {1661 setting _args = {1665 isExistingWidget = api.has( settingId ); 1666 if ( ! isExistingWidget ) { 1667 settingArgs = { 1662 1668 transport: 'refresh', 1663 previewer: control.setting.previewer1669 previewer: this.setting.previewer 1664 1670 }; 1665 api.create( setting _id, setting_id, {}, setting_args );1666 } 1667 1668 Constructor = api.controlConstructor[customize_control_type];1669 widget _form_control = new Constructor( setting_id, {1671 api.create( settingId, settingId, {}, settingArgs ); 1672 } 1673 1674 controlConstructor = api.controlConstructor[controlType]; 1675 widgetFormControl = new controlConstructor( settingId, { 1670 1676 params: { 1671 1677 settings: { 1672 'default': setting _id1678 'default': settingId 1673 1679 }, 1674 sidebar_id: control.params.sidebar_id,1675 widget_id: widget _id,1680 sidebar_id: self.params.sidebar_id, 1681 widget_id: widgetId, 1676 1682 widget_id_base: widget.get( 'id_base' ), 1677 type: c ustomize_control_type,1678 is_new: ! is _existing_widget,1683 type: controlType, 1684 is_new: ! isExistingWidget, 1679 1685 width: widget.get( 'width' ), 1680 1686 height: widget.get( 'height' ), 1681 1687 is_wide: widget.get( 'is_wide' ) 1682 1688 }, 1683 previewer: control.setting.previewer1684 } ); 1685 api.control.add( setting _id, widget_form_control );1689 previewer: self.setting.previewer 1690 } ); 1691 api.control.add( settingId, widgetFormControl ); 1686 1692 1687 1693 // Make sure widget is removed from the other sidebars 1688 api.each( function( other _setting ) {1689 if ( other _setting.id === control.setting.id ) {1694 api.each( function( otherSetting ) { 1695 if ( otherSetting.id === self.setting.id ) { 1690 1696 return; 1691 1697 } 1692 if ( 0 !== other_setting.id.indexOf( 'sidebars_widgets[' ) ) { 1698 1699 if ( 0 !== otherSetting.id.indexOf( 'sidebars_widgets[' ) ) { 1693 1700 return; 1694 1701 } 1695 var other_sidebar_widgets = other_setting().slice(), i; 1696 i = _.indexOf( other_sidebar_widgets, widget_id ); 1702 1703 var otherSidebarWidgets = otherSetting().slice(), 1704 i = _.indexOf( otherSidebarWidgets, widgetId ); 1705 1697 1706 if ( -1 !== i ) { 1698 other _sidebar_widgets.splice( i );1699 other _setting( other_sidebar_widgets );1707 otherSidebarWidgets.splice( i ); 1708 otherSetting( otherSidebarWidgets ); 1700 1709 } 1701 1710 } ); 1702 1711 1703 1712 // Add widget to this sidebar 1704 sidebar _widgets = control.setting().slice();1705 if ( -1 === _.indexOf( sidebar _widgets, widget_id ) ) {1706 sidebar _widgets.push( widget_id );1707 control.setting( sidebar_widgets );1708 } 1709 1710 customize_control.slideDown( function() {1711 if ( is _existing_widget ) {1712 widget _form_control.expandForm();1713 widget _form_control.updateWidget( {1714 instance: widget _form_control.setting(),1713 sidebarWidgets = this.setting().slice(); 1714 if ( -1 === _.indexOf( sidebarWidgets, widgetId ) ) { 1715 sidebarWidgets.push( widgetId ); 1716 this.setting( sidebarWidgets ); 1717 } 1718 1719 $control.slideDown( function() { 1720 if ( isExistingWidget ) { 1721 widgetFormControl.expandForm(); 1722 widgetFormControl.updateWidget( { 1723 instance: widgetFormControl.setting(), 1715 1724 complete: function( error ) { 1716 1725 if ( error ) { 1717 1726 throw error; 1718 1727 } 1719 widget _form_control.focus();1728 widgetFormControl.focus(); 1720 1729 } 1721 1730 } ); 1722 1731 } else { 1723 widget _form_control.focus();1724 } 1725 } ); 1726 1727 $( document ).trigger( 'widget-added', [ widget_el] );1728 1729 return widget _form_control;1732 widgetFormControl.focus(); 1733 } 1734 } ); 1735 1736 $( document ).trigger( 'widget-added', [ $widget ] ); 1737 1738 return widgetFormControl; 1730 1739 } 1731 1732 1740 } ); 1733 1741 1742 /** 1743 * Extends wp.customizer.controlConstructor with control constructor for 1744 * widget_form and sidebar_widgets. 1745 */ 1734 1746 $.extend( api.controlConstructor, { 1735 1747 widget_form: api.Widgets.WidgetControl, 1736 1748 sidebar_widgets: api.Widgets.SidebarControl 1737 1749 }); 1738 1739 api.bind( 'ready', function() {1740 // Set up the widgets panel1741 api.Widgets.availableWidgetsPanel = new api.Widgets.AvailableWidgetsPanelView({1742 collection: api.Widgets.availableWidgets1743 });1744 1745 // Highlight widget control1746 api.Widgets.Previewer.bind( 'highlight-widget-control', api.Widgets.highlightWidgetFormControl );1747 1748 // Open and focus widget control1749 api.Widgets.Previewer.bind( 'focus-widget-control', api.Widgets.focusWidgetFormControl );1750 } );1751 1750 1752 1751 /** … … 1763 1762 1764 1763 /** 1764 * Init Customizer for widgets. 1765 */ 1766 api.bind( 'ready', function() { 1767 // Set up the widgets panel 1768 api.Widgets.availableWidgetsPanel = new api.Widgets.AvailableWidgetsPanelView({ 1769 collection: api.Widgets.availableWidgets 1770 }); 1771 1772 // Highlight widget control 1773 api.Widgets.Previewer.bind( 'highlight-widget-control', api.Widgets.highlightWidgetFormControl ); 1774 1775 // Open and focus widget control 1776 api.Widgets.Previewer.bind( 'focus-widget-control', api.Widgets.focusWidgetFormControl ); 1777 } ); 1778 1779 /** 1765 1780 * Highlight a widget control. 1766 1781 * … … 1790 1805 /** 1791 1806 * Given a widget control, find the sidebar widgets control that contains it. 1792 * @param {string} widget _id1807 * @param {string} widgetId 1793 1808 * @return {object|null} 1794 1809 */ 1795 api.Widgets.getSidebarWidgetControlContainingWidget = function( widget_id ) { 1796 var found_control = null; 1810 api.Widgets.getSidebarWidgetControlContainingWidget = function( widgetId ) { 1811 var foundControl = null; 1812 1797 1813 // @todo this can use widgetIdToSettingId(), then pass into wp.customize.control( x ).getSidebarWidgetsControl() 1798 1814 api.control.each( function( control ) { 1799 if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widget _id ) ) {1800 found _control = control;1815 if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widgetId ) ) { 1816 foundControl = control; 1801 1817 } 1802 1818 } ); 1803 1819 1804 return found _control;1820 return foundControl; 1805 1821 }; 1806 1822 1807 1823 /** 1808 * Given a widget_id for a widget appearing in the preview, get the widget form control associated with it 1809 * @param {string} widget_id 1824 * Given a widget ID for a widget appearing in the preview, get the widget form control associated with it. 1825 * 1826 * @param {string} widgetId 1810 1827 * @return {object|null} 1811 1828 */ 1812 api.Widgets.getWidgetFormControlForWidget = function( widget_id ) { 1813 var found_control = null; 1829 api.Widgets.getWidgetFormControlForWidget = function( widgetId ) { 1830 var foundControl = null; 1831 1814 1832 // @todo We can just use widgetIdToSettingId() here 1815 1833 api.control.each( function( control ) { 1816 if ( control.params.type === 'widget_form' && control.params.widget_id === widget _id ) {1817 found _control = control;1834 if ( control.params.type === 'widget_form' && control.params.widget_id === widgetId ) { 1835 foundControl = control; 1818 1836 } 1819 1837 } ); 1820 1838 1821 return found _control;1839 return foundControl; 1822 1840 }; 1823 1841 1824 1842 /** 1825 * @param {String} widget _id1843 * @param {String} widgetId 1826 1844 * @returns {Object} 1827 1845 */ 1828 function parse _widget_id( widget_id ) {1846 function parseWidgetId( widgetId ) { 1829 1847 var matches, parsed = { 1830 1848 number: null, 1831 1849 id_base: null 1832 1850 }; 1833 matches = widget_id.match( /^(.+)-(\d+)$/ ); 1851 1852 matches = widgetId.match( /^(.+)-(\d+)$/ ); 1834 1853 if ( matches ) { 1835 1854 parsed.id_base = matches[1]; … … 1837 1856 } else { 1838 1857 // likely an old single widget 1839 parsed.id_base = widget _id;1858 parsed.id_base = widgetId; 1840 1859 } 1860 1841 1861 return parsed; 1842 1862 } 1843 1863 1844 1864 /** 1845 * @param {String} widget _id1865 * @param {String} widgetId 1846 1866 * @returns {String} settingId 1847 1867 */ 1848 function widgetIdToSettingId( widget _id ) {1849 var parsed = parse _widget_id( widget_id ), settingId;1868 function widgetIdToSettingId( widgetId ) { 1869 var parsed = parseWidgetId( widgetId ), settingId; 1850 1870 1851 1871 settingId = 'widget_' + parsed.id_base; … … 1853 1873 settingId += '[' + parsed.number + ']'; 1854 1874 } 1875 1855 1876 return settingId; 1856 1877 }
Note:
See TracChangeset
for help on using the changeset viewer.
