Changeset 27988
- Timestamp:
- 04/07/2014 04:31:52 PM (11 years ago)
- Location:
- trunk/src/wp-admin
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/css/customize-widgets.css
r27985 r27988 96 96 } 97 97 98 .control-section.accordion-section. widget-customizer-highlighted > .accordion-section-title,99 .customize-control-widget_form. widget-customizer-highlighted {98 .control-section.accordion-section.highlighted > .accordion-section-title, 99 .customize-control-widget_form.highlighted { 100 100 outline: none; 101 101 -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8); -
trunk/src/wp-admin/js/customize-widgets.js
r27986 r27988 178 178 179 179 this.listenTo( this.collection, 'update', this.updateList ); 180 this.listenTo( this.collection, 'change', this.updateList ); 180 181 181 182 this.updateList(); … … 411 412 */ 412 413 ready: function() { 413 var control = this; 414 control._setupModel(); 415 control._setupWideWidget(); 416 control._setupControlToggle(); 417 control._setupWidgetTitle(); 418 control._setupReorderUI(); 419 control._setupHighlightEffects(); 420 control._setupUpdateUI(); 421 control._setupRemoveUI(); 414 this._setupModel(); 415 this._setupWideWidget(); 416 this._setupControlToggle(); 417 this._setupWidgetTitle(); 418 this._setupReorderUI(); 419 this._setupHighlightEffects(); 420 this._setupUpdateUI(); 421 this._setupRemoveUI(); 422 422 }, 423 423 … … 426 426 */ 427 427 _setupModel: function() { 428 var control = this, remember_saved_widget_id;428 var self = this, rememberSavedWidgetId; 429 429 430 430 api.Widgets.savedWidgetIds = api.Widgets.savedWidgetIds || []; 431 431 432 432 // Remember saved widgets so we know which to trash (move to inactive widgets sidebar) 433 remember _saved_widget_id = function() {434 api.Widgets.savedWidgetIds[ control.params.widget_id] = true;433 rememberSavedWidgetId = function() { 434 api.Widgets.savedWidgetIds[self.params.widget_id] = true; 435 435 }; 436 api.bind( 'ready', remember _saved_widget_id );437 api.bind( 'saved', remember _saved_widget_id );438 439 control._update_count = 0;440 control.is_widget_updating = false;441 control.live_update_mode = true;436 api.bind( 'ready', rememberSavedWidgetId ); 437 api.bind( 'saved', rememberSavedWidgetId ); 438 439 this._updateCount = 0; 440 this.isWidgetUpdating = false; 441 this.liveUpdateMode = true; 442 442 443 443 // Update widget whenever model changes 444 control.setting.bind( function( to, from ) {445 if ( ! _( from ).isEqual( to ) && ! control.is_widget_updating ) {446 control.updateWidget( { instance: to } );444 this.setting.bind( function( to, from ) { 445 if ( ! _( from ).isEqual( to ) && ! self.isWidgetUpdating ) { 446 self.updateWidget( { instance: to } ); 447 447 } 448 448 } ); … … 453 453 */ 454 454 _setupWideWidget: function() { 455 var control = this, 456 widget_inside, 457 widget_form, 458 customize_sidebar, 459 position_widget, 460 theme_controls_container; 461 462 if ( ! control.params.is_wide ) { 455 var self = this, $widgetInside, $widgetForm, $customizeSidebar, 456 $themeControlsContainer, positionWidget; 457 458 if ( ! this.params.is_wide ) { 463 459 return; 464 460 } 465 461 466 widget_inside = control.container.find( '.widget-inside' );467 widget_form = widget_inside.find( '> .form' );468 customize_sidebar = $( '.wp-full-overlay-sidebar-content:first' );469 control.container.addClass( 'wide-widget-control' );470 471 control.container.find( '.widget-content:first' ).css( {472 'max-width': control.params.width,473 'min-height': control.params.height462 $widgetInside = this.container.find( '.widget-inside' ); 463 $widgetForm = $widgetInside.find( '> .form' ); 464 $customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' ); 465 this.container.addClass( 'wide-widget-control' ); 466 467 this.container.find( '.widget-content:first' ).css( { 468 'max-width': this.params.width, 469 'min-height': this.params.height 474 470 } ); 475 471 … … 483 479 * will become scrollable (overflow:auto). 484 480 */ 485 position _widget = function() {486 var offset _top = control.container.offset().top,487 window _height = $( window ).height(),488 form _height = widget_form.outerHeight(),481 positionWidget = function() { 482 var offsetTop = self.container.offset().top, 483 windowHeight = $( window ).height(), 484 formHeight = $widgetForm.outerHeight(), 489 485 top; 490 widget_inside.css( 'max-height', window_height );486 $widgetInside.css( 'max-height', windowHeight ); 491 487 top = Math.max( 492 488 0, // prevent top from going off screen 493 489 Math.min( 494 Math.max( offset _top, 0 ), // distance widget in panel is from top of screen495 window _height - form_height // flush up against bottom of screen490 Math.max( offsetTop, 0 ), // distance widget in panel is from top of screen 491 windowHeight - formHeight // flush up against bottom of screen 496 492 ) 497 493 ); 498 widget_inside.css( 'top', top );494 $widgetInside.css( 'top', top ); 499 495 }; 500 496 501 theme_controls_container = $( '#customize-theme-controls' );502 control.container.on( 'expand', function() {503 position _widget();504 customize_sidebar.on( 'scroll', position_widget );505 $( window ).on( 'resize', position _widget );506 theme_controls_container.on( 'expanded collapsed', position_widget );507 } ); 508 control.container.on( 'collapsed', function() {509 customize_sidebar.off( 'scroll', position_widget );510 $( window ).off( 'resize', position _widget );511 theme_controls_container.off( 'expanded collapsed', position_widget );497 $themeControlsContainer = $( '#customize-theme-controls' ); 498 this.container.on( 'expand', function() { 499 positionWidget(); 500 $customizeSidebar.on( 'scroll', positionWidget ); 501 $( window ).on( 'resize', positionWidget ); 502 $themeControlsContainer.on( 'expanded collapsed', positionWidget ); 503 } ); 504 this.container.on( 'collapsed', function() { 505 $customizeSidebar.off( 'scroll', positionWidget ); 506 $( window ).off( 'resize', positionWidget ); 507 $themeControlsContainer.off( 'expanded collapsed', positionWidget ); 512 508 } ); 513 509 … … 516 512 if ( 0 === setting.id.indexOf( 'sidebars_widgets[' ) ) { 517 513 setting.bind( function() { 518 if ( control.container.hasClass( 'expanded' ) ) {519 position _widget();514 if ( self.container.hasClass( 'expanded' ) ) { 515 positionWidget(); 520 516 } 521 517 } ); … … 529 525 */ 530 526 _setupControlToggle: function() { 531 var control = this, close_btn;532 533 control.container.find( '.widget-top' ).on( 'click', function( e ) {527 var self = this, $closeBtn; 528 529 this.container.find( '.widget-top' ).on( 'click', function( e ) { 534 530 e.preventDefault(); 535 var sidebar _widgets_control = control.getSidebarWidgetsControl();536 if ( sidebar _widgets_control.is_reordering ) {531 var sidebarWidgetsControl = self.getSidebarWidgetsControl(); 532 if ( sidebarWidgetsControl.is_reordering ) { 537 533 return; 538 534 } 539 control.toggleForm(); 540 } ); 541 542 close_btn = control.container.find( '.widget-control-close' ); 543 // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633> 544 close_btn.on( 'click', function( e ) { 535 self.toggleForm(); 536 } ); 537 538 $closeBtn = this.container.find( '.widget-control-close' ); 539 $closeBtn.on( 'click', function( e ) { 545 540 e.preventDefault(); 546 control.collapseForm();547 control.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility541 self.collapseForm(); 542 self.container.find( '.widget-top .widget-action:first' ).focus(); // keyboard accessibility 548 543 } ); 549 544 }, … … 553 548 */ 554 549 _setupWidgetTitle: function() { 555 var control = this, update_title;556 557 update _title = function() {558 var title = control.setting().title,559 in _widget_title = control.container.find( '.in-widget-title' );550 var self = this, updateTitle; 551 552 updateTitle = function() { 553 var title = self.setting().title, 554 inWidgetTitle = self.container.find( '.in-widget-title' ); 560 555 561 556 if ( title ) { 562 in _widget_title.text( ': ' + title );557 inWidgetTitle.text( ': ' + title ); 563 558 } else { 564 in _widget_title.text( '' );559 inWidgetTitle.text( '' ); 565 560 } 566 561 }; 567 control.setting.bind( update_title );568 update _title();562 this.setting.bind( updateTitle ); 563 updateTitle(); 569 564 }, 570 565 … … 573 568 */ 574 569 _setupReorderUI: function() { 575 var control = this, 576 select_sidebar_item, 577 move_widget_area, 578 reorder_nav, 579 update_available_sidebars; 570 var self = this, selectSidebarItem, $moveWidgetArea, 571 $reorderNav, updateAvailableSidebars; 580 572 581 573 /** … … 584 576 * @param {jQuery} li 585 577 */ 586 select _sidebar_item = function( li ) {578 selectSidebarItem = function( li ) { 587 579 li.siblings( '.selected' ).removeClass( 'selected' ); 588 580 li.addClass( 'selected' ); 589 var is _self_sidebar = ( li.data( 'id' ) === control.params.sidebar_id );590 control.container.find( '.move-widget-btn' ).prop( 'disabled', is_self_sidebar );581 var isSelfSidebar = ( li.data( 'id' ) === self.params.sidebar_id ); 582 self.container.find( '.move-widget-btn' ).prop( 'disabled', isSelfSidebar ); 591 583 }; 592 584 … … 594 586 * Add the widget reordering elements to the widget control 595 587 */ 596 control.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) );597 move_widget_area = $(588 this.container.find( '.widget-title-action' ).after( $( api.Widgets.data.tpl.widgetReorderNav ) ); 589 $moveWidgetArea = $( 598 590 _.template( api.Widgets.data.tpl.moveWidgetArea, { 599 591 sidebars: _( api.Widgets.registeredSidebars.toArray() ).pluck( 'attributes' ) 600 592 } ) 601 593 ); 602 control.container.find( '.widget-top' ).after( move_widget_area );594 this.container.find( '.widget-top' ).after( $moveWidgetArea ); 603 595 604 596 /** 605 597 * Update available sidebars when their rendered state changes 606 598 */ 607 update_available_sidebars = function() { 608 var sidebar_items = move_widget_area.find( 'li' ), self_sidebar_item; 609 self_sidebar_item = sidebar_items.filter( function(){ 610 return $( this ).data( 'id' ) === control.params.sidebar_id; 599 updateAvailableSidebars = function() { 600 var $sidebarItems = $moveWidgetArea.find( 'li' ), selfSidebarItem; 601 602 selfSidebarItem = $sidebarItems.filter( function(){ 603 return $( this ).data( 'id' ) === self.params.sidebar_id; 611 604 } ); 612 sidebar_items.each( function() { 605 606 $sidebarItems.each( function() { 613 607 var li = $( this ), 614 sidebar _id,608 sidebarId, 615 609 sidebar_model; 616 610 617 sidebar_id = li.data( 'id' ); 618 sidebar_model = api.Widgets.registeredSidebars.get( sidebar_id ); 611 sidebarId = li.data( 'id' ); 612 sidebar_model = api.Widgets.registeredSidebars.get( sidebarId ); 613 619 614 li.toggle( sidebar_model.get( 'is_rendered' ) ); 615 620 616 if ( li.hasClass( 'selected' ) && ! sidebar_model.get( 'is_rendered' ) ) { 621 select _sidebar_item( self_sidebar_item );617 selectSidebarItem( selfSidebarItem ); 622 618 } 623 619 } ); 624 620 }; 625 update_available_sidebars(); 626 api.Widgets.registeredSidebars.on( 'change:is_rendered', update_available_sidebars ); 621 622 updateAvailableSidebars(); 623 api.Widgets.registeredSidebars.on( 'change:is_rendered', updateAvailableSidebars ); 627 624 628 625 /** 629 626 * Handle clicks for up/down/move on the reorder nav 630 627 */ 631 reorder_nav = control.container.find( '.widget-reorder-nav' );632 reorder_nav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) {628 $reorderNav = this.container.find( '.widget-reorder-nav' ); 629 $reorderNav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) { 633 630 if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) { 634 631 return; … … 637 634 638 635 if ( $( this ).is( '.move-widget' ) ) { 639 control.toggleWidgetMoveArea();636 self.toggleWidgetMoveArea(); 640 637 } else { 641 var is _move_down = $( this ).is( '.move-widget-down' ),642 is _move_up = $( this ).is( '.move-widget-up' ),643 i = control.getWidgetSidebarPosition();644 645 if ( ( is _move_up && i === 0 ) || ( is_move_down && i === control.getSidebarWidgetsControl().setting().length - 1 ) ) {638 var isMoveDown = $( this ).is( '.move-widget-down' ), 639 isMoveUp = $( this ).is( '.move-widget-up' ), 640 i = self.getWidgetSidebarPosition(); 641 642 if ( ( isMoveUp && i === 0 ) || ( isMoveDown && i === self.getSidebarWidgetsControl().setting().length - 1 ) ) { 646 643 return; 647 644 } 648 645 649 if ( is _move_up ) {650 control.moveUp();646 if ( isMoveUp ) { 647 self.moveUp(); 651 648 } else { 652 control.moveDown();649 self.moveDown(); 653 650 } 654 651 … … 660 657 * Handle selecting a sidebar to move to 661 658 */ 662 control.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( e ) {659 this.container.find( '.widget-area-select' ).on( 'click keypress', 'li', function( e ) { 663 660 if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) { 664 661 return; 665 662 } 666 663 e.preventDefault(); 667 select _sidebar_item( $( this ) );664 selectSidebarItem( $( this ) ); 668 665 } ); 669 666 … … 671 668 * Move widget to another sidebar 672 669 */ 673 control.container.find( '.move-widget-btn' ).click( function() { 674 control.getSidebarWidgetsControl().toggleReordering( false ); 675 676 var old_sidebar_id = control.params.sidebar_id, 677 new_sidebar_id = control.container.find( '.widget-area-select li.selected' ).data( 'id' ), 678 old_sidebar_widgets_setting, 679 new_sidebar_widgets_setting, 680 old_sidebar_widget_ids, 681 new_sidebar_widget_ids, 682 i; 683 684 old_sidebar_widgets_setting = api( 'sidebars_widgets[' + old_sidebar_id + ']' ); 685 new_sidebar_widgets_setting = api( 'sidebars_widgets[' + new_sidebar_id + ']' ); 686 old_sidebar_widget_ids = Array.prototype.slice.call( old_sidebar_widgets_setting() ); 687 new_sidebar_widget_ids = Array.prototype.slice.call( new_sidebar_widgets_setting() ); 688 689 i = control.getWidgetSidebarPosition(); 690 old_sidebar_widget_ids.splice( i, 1 ); 691 new_sidebar_widget_ids.push( control.params.widget_id ); 692 693 old_sidebar_widgets_setting( old_sidebar_widget_ids ); 694 new_sidebar_widgets_setting( new_sidebar_widget_ids ); 695 696 control.focus(); 670 this.container.find( '.move-widget-btn' ).click( function() { 671 self.getSidebarWidgetsControl().toggleReordering( false ); 672 673 var oldSidebarId = self.params.sidebar_id, 674 newSidebarId = self.container.find( '.widget-area-select li.selected' ).data( 'id' ), 675 oldSidebarWidgetsSetting, newSidebarWidgetsSetting, 676 oldSidebarWidgetIds, newSidebarWidgetIds, i; 677 678 oldSidebarWidgetsSetting = api( 'sidebars_widgets[' + oldSidebarId + ']' ); 679 newSidebarWidgetsSetting = api( 'sidebars_widgets[' + newSidebarId + ']' ); 680 oldSidebarWidgetIds = Array.prototype.slice.call( oldSidebarWidgetsSetting() ); 681 newSidebarWidgetIds = Array.prototype.slice.call( newSidebarWidgetsSetting() ); 682 683 i = self.getWidgetSidebarPosition(); 684 oldSidebarWidgetIds.splice( i, 1 ); 685 newSidebarWidgetIds.push( self.params.widget_id ); 686 687 oldSidebarWidgetsSetting( oldSidebarWidgetIds ); 688 newSidebarWidgetsSetting( newSidebarWidgetIds ); 689 690 self.focus(); 697 691 } ); 698 692 }, … … 702 696 */ 703 697 _setupHighlightEffects: function() { 704 var control= this;698 var self = this; 705 699 706 700 // Highlight whenever hovering or clicking over the form 707 control.container.on( 'mouseenter click', function() {708 control.setting.previewer.send( 'highlight-widget', control.params.widget_id );701 this.container.on( 'mouseenter click', function() { 702 self.setting.previewer.send( 'highlight-widget', self.params.widget_id ); 709 703 } ); 710 704 711 705 // Highlight when the setting is updated 712 control.setting.bind( function() { 713 control.setting.previewer.send( 'highlight-widget', control.params.widget_id ); 714 } ); 715 716 // Highlight when the widget form is expanded 717 control.container.on( 'expand', function() { 718 control.scrollPreviewWidgetIntoView(); 706 this.setting.bind( function() { 707 self.setting.previewer.send( 'highlight-widget', self.params.widget_id ); 719 708 } ); 720 709 }, … … 724 713 */ 725 714 _setupUpdateUI: function() { 726 var control = this, 727 widget_root, 728 widget_content, 729 save_btn, 730 update_widget_debounced, 731 form_update_event_handler; 732 733 widget_root = control.container.find( '.widget:first' ); 734 widget_content = widget_root.find( '.widget-content:first' ); 715 var self = this, $widgetRoot, $widgetContent, 716 $saveBtn, updateWidgetDebounced, formSyncHandler; 717 718 $widgetRoot = this.container.find( '.widget:first' ); 719 $widgetContent = $widgetRoot.find( '.widget-content:first' ); 735 720 736 721 // Configure update button 737 save_btn = control.container.find( '.widget-control-save' );738 save_btn.val( l10n.saveBtnLabel );739 save_btn.attr( 'title', l10n.saveBtnTooltip );740 save_btn.removeClass( 'button-primary' ).addClass( 'button-secondary' );741 save_btn.on( 'click', function( e ) {722 $saveBtn = this.container.find( '.widget-control-save' ); 723 $saveBtn.val( l10n.saveBtnLabel ); 724 $saveBtn.attr( 'title', l10n.saveBtnTooltip ); 725 $saveBtn.removeClass( 'button-primary' ).addClass( 'button-secondary' ); 726 $saveBtn.on( 'click', function( e ) { 742 727 e.preventDefault(); 743 control.updateWidget( { disable_form: true } ); 744 } ); 745 746 update_widget_debounced = _.debounce( function() { 747 // @todo For compatibility with other plugins, should we trigger a click event? What about form submit event? 748 control.updateWidget(); 728 self.updateWidget( { disable_form: true } ); 729 } ); 730 731 updateWidgetDebounced = _.debounce( function() { 732 self.updateWidget(); 749 733 }, 250 ); 750 734 751 735 // Trigger widget form update when hitting Enter within an input 752 control.container.find( '.widget-content' ).on( 'keydown', 'input', function( e ) {736 this.container.find( '.widget-content' ).on( 'keydown', 'input', function( e ) { 753 737 if ( 13 === e.which ) { // Enter 754 738 e.preventDefault(); 755 control.updateWidget( { ignore_active_element: true } );739 self.updateWidget( { ignore_active_element: true } ); 756 740 } 757 741 } ); 758 742 759 743 // Handle widgets that support live previews 760 widget_content.on( 'change input propertychange', ':input', function( e ) {761 if ( control.live_update_mode ) {744 $widgetContent.on( 'change input propertychange', ':input', function( e ) { 745 if ( self.liveUpdateMode ) { 762 746 if ( e.type === 'change' ) { 763 control.updateWidget();747 self.updateWidget(); 764 748 } else if ( this.checkValidity && this.checkValidity() ) { 765 update _widget_debounced();749 updateWidgetDebounced(); 766 750 } 767 751 } … … 769 753 770 754 // Remove loading indicators when the setting is saved and the preview updates 771 control.setting.previewer.channel.bind( 'synced', function() { 772 control.container.removeClass( 'previewer-loading' ); 773 } ); 774 api.Widgets.Previewer.bind( 'widget-updated', function( updated_widget_id ) { 775 if ( updated_widget_id === control.params.widget_id ) { 776 control.container.removeClass( 'previewer-loading' ); 777 } 778 } ); 779 780 // Update widget control to indicate whether it is currently rendered (cf. Widget Visibility) 755 this.setting.previewer.channel.bind( 'synced', function() { 756 self.container.removeClass( 'previewer-loading' ); 757 } ); 758 759 api.Widgets.Previewer.bind( 'widget-updated', function( updatedWidgetId ) { 760 if ( updatedWidgetId === self.params.widget_id ) { 761 self.container.removeClass( 'previewer-loading' ); 762 } 763 } ); 764 765 // Update widget control to indicate whether it is currently rendered 781 766 api.Widgets.Previewer.bind( 'rendered-widgets', function( rendered_widgets ) { 782 var is_rendered = !! rendered_widgets[ control.params.widget_id];783 control.container.toggleClass( 'widget-rendered', is_rendered );784 } ); 785 786 form _update_event_handler = api.Widgets.formSyncHandlers[ control.params.widget_id_base ];787 if ( form _update_event_handler ) {788 $( document ).on( 'widget-synced', function( e, widget _el) {789 if ( widget_root.is( widget_el) ) {790 form _update_event_handler.apply( document, arguments );767 var is_rendered = !! rendered_widgets[self.params.widget_id]; 768 self.container.toggleClass( 'widget-rendered', is_rendered ); 769 } ); 770 771 formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ]; 772 if ( formSyncHandler ) { 773 $( document ).on( 'widget-synced', function( e, widget ) { 774 if ( $widgetRoot.is( widget ) ) { 775 formSyncHandler.apply( document, arguments ); 791 776 } 792 777 } ); … … 798 783 */ 799 784 _setupRemoveUI: function() { 800 var control = this, 801 remove_btn, 802 replace_delete_with_remove; 785 var self = this, $removeBtn, replaceDeleteWithRemove; 803 786 804 787 // Configure remove button 805 remove_btn = control.container.find( 'a.widget-control-remove' ); 806 // @todo Hitting Enter on this link does nothing; will be resolved in core with <http://core.trac.wordpress.org/ticket/26633> 807 remove_btn.on( 'click', function( e ) { 788 $removeBtn = this.container.find( 'a.widget-control-remove' ); 789 $removeBtn.on( 'click', function( e ) { 808 790 e.preventDefault(); 809 791 810 792 // Find an adjacent element to add focus to when this widget goes away 811 var adjacent_focus_target;812 if ( control.container.next().is( '.customize-control-widget_form' ) ) {813 adjacent_focus_target = control.container.next().find( '.widget-action:first' );814 } else if ( control.container.prev().is( '.customize-control-widget_form' ) ) {815 adjacent_focus_target = control.container.prev().find( '.widget-action:first' );793 var $adjacentFocusTarget; 794 if ( self.container.next().is( '.customize-control-widget_form' ) ) { 795 $adjacentFocusTarget = self.container.next().find( '.widget-action:first' ); 796 } else if ( self.container.prev().is( '.customize-control-widget_form' ) ) { 797 $adjacentFocusTarget = self.container.prev().find( '.widget-action:first' ); 816 798 } else { 817 adjacent_focus_target = control.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' );818 } 819 820 control.container.slideUp( function() {821 var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( control.params.widget_id ),799 $adjacentFocusTarget = self.container.next( '.customize-control-sidebar_widgets' ).find( '.add-new-widget:first' ); 800 } 801 802 self.container.slideUp( function() { 803 var sidebars_widgets_control = api.Widgets.getSidebarWidgetControlContainingWidget( self.params.widget_id ), 822 804 sidebar_widget_ids, 823 805 i; 824 806 825 807 if ( ! sidebars_widgets_control ) { 826 throw new Error( 'Unable to find sidebars_widgets_control' );808 return; 827 809 } 828 810 sidebar_widget_ids = sidebars_widgets_control.setting().slice(); 829 i = _.indexOf( sidebar_widget_ids, control.params.widget_id );811 i = _.indexOf( sidebar_widget_ids, self.params.widget_id ); 830 812 if ( -1 === i ) { 831 throw new Error( 'Widget is not in sidebar' );813 return; 832 814 } 833 815 sidebar_widget_ids.splice( i, 1 ); 834 816 sidebars_widgets_control.setting( sidebar_widget_ids ); 835 adjacent_focus_target.focus(); // keyboard accessibility817 $adjacentFocusTarget.focus(); // keyboard accessibility 836 818 } ); 837 819 } ); 838 820 839 replace _delete_with_remove = function() {840 remove_btn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete"841 remove_btn.attr( 'title', l10n.removeBtnTooltip );821 replaceDeleteWithRemove = function() { 822 $removeBtn.text( l10n.removeBtnLabel ); // wp_widget_control() outputs the link as "Delete" 823 $removeBtn.attr( 'title', l10n.removeBtnTooltip ); 842 824 }; 843 if ( control.params.is_new ) { 844 api.bind( 'saved', replace_delete_with_remove ); 825 826 if ( this.params.is_new ) { 827 api.bind( 'saved', replaceDeleteWithRemove ); 845 828 } else { 846 replace _delete_with_remove();829 replaceDeleteWithRemove(); 847 830 } 848 831 }, … … 872 855 */ 873 856 _getInputsSignature: function( inputs ) { 874 var inputs _signatures = _( inputs ).map( function( input ) {875 input = $( input );876 var signature_parts; 877 if ( input.is( ':checkbox, :radio' ) ) {878 signature _parts = [ input.attr( 'id' ), input.attr( 'name' ),input.prop( 'value' ) ];857 var inputsSignatures = _( inputs ).map( function( input ) { 858 var $input = $( input ), signatureParts; 859 860 if ( $input.is( ':checkbox, :radio' ) ) { 861 signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ), $input.prop( 'value' ) ]; 879 862 } else { 880 signature_parts = [ input.attr( 'id' ), input.attr( 'name' ) ]; 881 } 882 return signature_parts.join( ',' ); 883 } ); 884 return inputs_signatures.join( ';' ); 863 signatureParts = [ $input.attr( 'id' ), $input.attr( 'name' ) ]; 864 } 865 866 return signatureParts.join( ',' ); 867 } ); 868 869 return inputsSignatures.join( ';' ); 885 870 }, 886 871 … … 893 878 */ 894 879 _getInputStatePropertyName: function( input ) { 895 input = $( input ); 896 if ( input.is( ':radio, :checkbox' ) ) { 880 var $input = $( input ); 881 882 if ( $input.is( ':radio, :checkbox' ) ) { 897 883 return 'checked'; 898 884 } else { … … 909 895 */ 910 896 getSidebarWidgetsControl: function() { 911 var control = this, setting_id, sidebar_widgets_control; 912 913 setting_id = 'sidebars_widgets[' + control.params.sidebar_id + ']'; 914 sidebar_widgets_control = api.control( setting_id ); 915 if ( ! sidebar_widgets_control ) { 916 throw new Error( 'Unable to locate sidebar_widgets control for ' + control.params.sidebar_id ); 917 } 918 return sidebar_widgets_control; 897 var settingId, sidebarWidgetsControl; 898 899 settingId = 'sidebars_widgets[' + this.params.sidebar_id + ']'; 900 sidebarWidgetsControl = api.control( settingId ); 901 902 if ( ! sidebarWidgetsControl ) { 903 return; 904 } 905 906 return sidebarWidgetsControl; 919 907 }, 920 908 … … 929 917 */ 930 918 updateWidget: function( args ) { 931 var control = this, 932 instance_override, 933 complete_callback, 934 widget_root, 935 update_number, 936 widget_content, 937 params, 938 data, 939 inputs, 940 processing, 941 jqxhr, 942 is_changed; 919 var self = this, instanceOverride, completeCallback, $widgetRoot, $widgetContent, 920 updateNumber, params, data, $inputs, processing, jqxhr, isChanged; 943 921 944 922 args = $.extend( { … … 948 926 }, args ); 949 927 950 instance _override = args.instance;951 complete _callback = args.complete;952 953 control._update_count += 1;954 update _number = control._update_count;955 956 widget_root = control.container.find( '.widget:first' );957 widget_content = widget_root.find( '.widget-content:first' );928 instanceOverride = args.instance; 929 completeCallback = args.complete; 930 931 this._updateCount += 1; 932 updateNumber = this._updateCount; 933 934 $widgetRoot = this.container.find( '.widget:first' ); 935 $widgetContent = $widgetRoot.find( '.widget-content:first' ); 958 936 959 937 // Remove a previous error message 960 widget_content.find( '.widget-error' ).remove();961 962 control.container.addClass( 'widget-form-loading' );963 control.container.addClass( 'previewer-loading' );938 $widgetContent.find( '.widget-error' ).remove(); 939 940 this.container.addClass( 'widget-form-loading' ); 941 this.container.addClass( 'previewer-loading' ); 964 942 processing = api.state( 'processing' ); 965 943 processing( processing() + 1 ); 966 944 967 if ( ! control.live_update_mode ) {968 control.container.addClass( 'widget-form-disabled' );945 if ( ! this.liveUpdateMode ) { 946 this.container.addClass( 'widget-form-disabled' ); 969 947 } 970 948 … … 975 953 976 954 data = $.param( params ); 977 inputs = control._getInputs( widget_content );955 $inputs = this._getInputs( $widgetContent ); 978 956 979 957 // Store the value we're submitting in data so that when the response comes back, 980 958 // we know if it got sanitized; if there is no difference in the sanitized value, 981 959 // then we do not need to touch the UI and mess up the user's ongoing editing. 982 inputs.each( function() {960 $inputs.each( function() { 983 961 var input = $( this ), 984 property = control._getInputStatePropertyName( this );985 input.data( 'state' + update _number, input.prop( property ) );986 } ); 987 988 if ( instance _override ) {989 data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instance _override ) } );962 property = self._getInputStatePropertyName( this ); 963 input.data( 'state' + updateNumber, input.prop( property ) ); 964 } ); 965 966 if ( instanceOverride ) { 967 data += '&' + $.param( { 'sanitized_widget_setting': JSON.stringify( instanceOverride ) } ); 990 968 } else { 991 data += '&' + inputs.serialize(); 992 } 993 data += '&' + widget_content.find( '~ :input' ).serialize(); 994 995 jqxhr = $.post( wp.ajax.settings.url, data, function( r ) { 996 var message, 997 sanitized_form, 998 sanitized_inputs, 999 has_same_inputs_in_response, 1000 is_live_update_aborted = false; 969 data += '&' + $inputs.serialize(); 970 } 971 data += '&' + $widgetContent.find( '~ :input' ).serialize(); 972 973 jqxhr = $.post( wp.ajax.settings.url, data ); 974 975 jqxhr.done( function( r ) { 976 var message, sanitizedForm, $sanitizedInputs, hasSameInputsInResponse, 977 isLiveUpdateAborted = false; 1001 978 1002 979 // Check if the user is logged out. … … 1004 981 api.Widgets.Previewer.preview.iframe.hide(); 1005 982 api.Widgets.Previewer.login().done( function() { 1006 control.updateWidget( args );983 self.updateWidget( args ); 1007 984 api.Widgets.Previewer.preview.iframe.show(); 1008 985 } ); … … 1017 994 1018 995 if ( r.success ) { 1019 sanitized _form = $( '<div>' + r.data.form + '</div>' );1020 sanitized_inputs = control._getInputs( sanitized_form );1021 has _same_inputs_in_response = control._getInputsSignature( inputs ) === control._getInputsSignature( sanitized_inputs );996 sanitizedForm = $( '<div>' + r.data.form + '</div>' ); 997 $sanitizedInputs = self._getInputs( sanitizedForm ); 998 hasSameInputsInResponse = self._getInputsSignature( $inputs ) === self._getInputsSignature( $sanitizedInputs ); 1022 999 1023 1000 // Restore live update mode if sanitized fields are now aligned with the existing fields 1024 if ( has _same_inputs_in_response && ! control.live_update_mode ) {1025 control.live_update_mode = true;1026 control.container.removeClass( 'widget-form-disabled' );1027 control.container.find( 'input[name="savewidget"]' ).hide();1001 if ( hasSameInputsInResponse && ! self.liveUpdateMode ) { 1002 self.liveUpdateMode = true; 1003 self.container.removeClass( 'widget-form-disabled' ); 1004 self.container.find( 'input[name="savewidget"]' ).hide(); 1028 1005 } 1029 1006 1030 1007 // Sync sanitized field states to existing fields if they are aligned 1031 if ( has_same_inputs_in_response && control.live_update_mode ) { 1032 inputs.each( function( i ) { 1033 var input = $( this ), 1034 sanitized_input = $( sanitized_inputs[i] ), 1035 property = control._getInputStatePropertyName( this ), 1036 submitted_state, 1037 sanitized_state, 1038 can_update_state; 1039 1040 submitted_state = input.data( 'state' + update_number ); 1041 sanitized_state = sanitized_input.prop( property ); 1042 input.data( 'sanitized', sanitized_state ); 1043 1044 can_update_state = ( 1045 submitted_state !== sanitized_state && 1046 ( args.ignore_active_element || ! input.is( document.activeElement ) ) 1047 ); 1048 if ( can_update_state ) { 1049 input.prop( property, sanitized_state ); 1008 if ( hasSameInputsInResponse && self.liveUpdateMode ) { 1009 $inputs.each( function( i ) { 1010 var $input = $( this ), 1011 $sanitizedInput = $( $sanitizedInputs[i] ), 1012 property = self._getInputStatePropertyName( this ), 1013 submittedState, sanitizedState, canUpdateState; 1014 1015 submittedState = $input.data( 'state' + updateNumber ); 1016 sanitizedState = $sanitizedInput.prop( property ); 1017 $input.data( 'sanitized', sanitizedState ); 1018 1019 canUpdateState = ( submittedState !== sanitizedState && ( args.ignore_active_element || ! $input.is( document.activeElement ) ) ); 1020 if ( canUpdateState ) { 1021 $input.prop( property, sanitizedState ); 1050 1022 } 1051 1023 } ); 1052 $( document ).trigger( 'widget-synced', [ widget_root, r.data.form ] ); 1024 1025 $( document ).trigger( 'widget-synced', [ $widgetRoot, r.data.form ] ); 1053 1026 1054 1027 // Otherwise, if sanitized fields are not aligned with existing fields, disable live update mode if enabled 1055 } else if ( control.live_update_mode ) { 1056 control.live_update_mode = false; 1057 control.container.find( 'input[name="savewidget"]' ).show(); 1058 is_live_update_aborted = true; 1028 } else if ( self.liveUpdateMode ) { 1029 self.liveUpdateMode = false; 1030 self.container.find( 'input[name="savewidget"]' ).show(); 1031 isLiveUpdateAborted = true; 1032 1059 1033 // Otherwise, replace existing form with the sanitized form 1060 1034 } else { 1061 widget_content.html( r.data.form ); 1062 control.container.removeClass( 'widget-form-disabled' ); 1063 $( document ).trigger( 'widget-updated', [ widget_root ] ); 1035 $widgetContent.html( r.data.form ); 1036 1037 self.container.removeClass( 'widget-form-disabled' ); 1038 1039 $( document ).trigger( 'widget-updated', [ $widgetRoot ] ); 1064 1040 } 1065 1041 … … 1069 1045 * preview finishing loading. 1070 1046 */ 1071 is _changed = ! is_live_update_aborted && ! _( control.setting() ).isEqual( r.data.instance );1072 if ( is _changed ) {1073 control.is_widget_updating = true; // suppress triggering another updateWidget1074 control.setting( r.data.instance );1075 control.is_widget_updating = false;1047 isChanged = ! isLiveUpdateAborted && ! _( self.setting() ).isEqual( r.data.instance ); 1048 if ( isChanged ) { 1049 self.isWidgetUpdating = true; // suppress triggering another updateWidget 1050 self.setting( r.data.instance ); 1051 self.isWidgetUpdating = false; 1076 1052 } else { 1077 1053 // no change was made, so stop the spinner now instead of when the preview would updates 1078 control.container.removeClass( 'previewer-loading' );1079 } 1080 1081 if ( complete _callback ) {1082 complete _callback.call( control, null, { no_change: ! is_changed, ajax_finished: true } );1054 self.container.removeClass( 'previewer-loading' ); 1055 } 1056 1057 if ( completeCallback ) { 1058 completeCallback.call( self, null, { no_change: ! isChanged, ajax_finished: true } ); 1083 1059 } 1084 1060 } else { 1061 // General error message 1085 1062 message = l10n.error; 1063 1086 1064 if ( r.data && r.data.message ) { 1087 1065 message = r.data.message; 1088 1066 } 1089 if ( complete_callback ) { 1090 complete_callback.call( control, message ); 1067 1068 if ( completeCallback ) { 1069 completeCallback.call( self, message ); 1091 1070 } else { 1092 widget_content.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' ); 1093 } 1094 } 1095 } ); 1071 $widgetContent.prepend( '<p class="widget-error"><strong>' + message + '</strong></p>' ); 1072 } 1073 } 1074 } ); 1075 1096 1076 jqxhr.fail( function( jqXHR, textStatus ) { 1097 if ( complete_callback ) { 1098 complete_callback.call( control, textStatus ); 1099 } 1100 } ); 1077 if ( completeCallback ) { 1078 completeCallback.call( self, textStatus ); 1079 } 1080 } ); 1081 1101 1082 jqxhr.always( function() { 1102 control.container.removeClass( 'widget-form-loading' ); 1103 inputs.each( function() { 1104 $( this ).removeData( 'state' + update_number ); 1083 self.container.removeClass( 'widget-form-loading' ); 1084 1085 $inputs.each( function() { 1086 $( this ).removeData( 'state' + updateNumber ); 1105 1087 } ); 1106 1088 … … 1111 1093 /** 1112 1094 * Expand the accordion section containing a control 1113 * @todo it would be nice if accordion had a proper API instead of having to trigger UI events on its elements1114 1095 */ 1115 1096 expandControlSection: function() { 1116 var section = this.container.closest( '.accordion-section' ); 1117 if ( ! section.hasClass( 'open' ) ) { 1118 section.find( '.accordion-section-title:first' ).trigger( 'click' ); 1097 var $section = this.container.closest( '.accordion-section' ); 1098 1099 if ( ! $section.hasClass( 'open' ) ) { 1100 $section.find( '.accordion-section-title:first' ).trigger( 'click' ); 1119 1101 } 1120 1102 }, … … 1137 1119 * Expand or collapse the widget control 1138 1120 * 1139 * @param {boolean|undefined} [ do_expand] If not supplied, will be inverse of current visibility1140 */ 1141 toggleForm: function( do_expand) {1142 var control = this, widget,inside, complete;1143 1144 widget = control.container.find( 'div.widget:first' );1145 inside =widget.find( '.widget-inside:first' );1146 if ( typeof do_expand=== 'undefined' ) {1147 do_expand = !inside.is( ':visible' );1121 * @param {boolean|undefined} [showOrHide] If not supplied, will be inverse of current visibility 1122 */ 1123 toggleForm: function( showOrHide ) { 1124 var self = this, $widget, $inside, complete; 1125 1126 $widget = this.container.find( 'div.widget:first' ); 1127 $inside = $widget.find( '.widget-inside:first' ); 1128 if ( typeof showOrHide === 'undefined' ) { 1129 showOrHide = ! $inside.is( ':visible' ); 1148 1130 } 1149 1131 1150 1132 // Already expanded or collapsed, so noop 1151 if ( inside.is( ':visible' ) === do_expand) {1133 if ( $inside.is( ':visible' ) === showOrHide ) { 1152 1134 return; 1153 1135 } 1154 1136 1155 if ( do_expand) {1137 if ( showOrHide ) { 1156 1138 // Close all other widget controls before expanding this one 1157 api.control.each( function( other _control ) {1158 if ( control.params.type === other_control.params.type && control !== other_control ) {1159 other _control.collapseForm();1139 api.control.each( function( otherControl ) { 1140 if ( self.params.type === otherControl.params.type && self !== otherControl ) { 1141 otherControl.collapseForm(); 1160 1142 } 1161 1143 } ); 1162 1144 1163 1145 complete = function() { 1164 control.container.removeClass( 'expanding' );1165 control.container.addClass( 'expanded' );1166 control.container.trigger( 'expanded' );1146 self.container.removeClass( 'expanding' ); 1147 self.container.addClass( 'expanded' ); 1148 self.container.trigger( 'expanded' ); 1167 1149 }; 1168 if ( control.params.is_wide ) { 1169 inside.fadeIn( 'fast', complete ); 1150 1151 if ( self.params.is_wide ) { 1152 $inside.fadeIn( 'fast', complete ); 1170 1153 } else { 1171 inside.slideDown( 'fast', complete ); 1172 } 1173 control.container.trigger( 'expand' ); 1174 control.container.addClass( 'expanding' ); 1154 $inside.slideDown( 'fast', complete ); 1155 } 1156 1157 self.container.trigger( 'expand' ); 1158 self.container.addClass( 'expanding' ); 1175 1159 } else { 1176 control.container.trigger( 'collapse' );1177 control.container.addClass( 'collapsing' );1178 1160 complete = function() { 1179 control.container.removeClass( 'collapsing' );1180 control.container.removeClass( 'expanded' );1181 control.container.trigger( 'collapsed' );1161 self.container.removeClass( 'collapsing' ); 1162 self.container.removeClass( 'expanded' ); 1163 self.container.trigger( 'collapsed' ); 1182 1164 }; 1183 if ( control.params.is_wide ) { 1184 inside.fadeOut( 'fast', complete ); 1165 1166 self.container.trigger( 'collapse' ); 1167 self.container.addClass( 'collapsing' ); 1168 1169 if ( self.params.is_wide ) { 1170 $inside.fadeOut( 'fast', complete ); 1185 1171 } else { 1186 inside.slideUp( 'fast', function() {1187 widget.css( { width:'', margin:'' } );1172 $inside.slideUp( 'fast', function() { 1173 $widget.css( { width:'', margin:'' } ); 1188 1174 complete(); 1189 1175 } ); … … 1197 1183 */ 1198 1184 focus: function() { 1199 var control = this; 1200 control.expandControlSection(); 1201 control.expandForm(); 1202 control.container.find( '.widget-content :focusable:first' ).focus(); 1185 this.expandControlSection(); 1186 this.expandForm(); 1187 this.container.find( '.widget-content :focusable:first' ).focus(); 1203 1188 }, 1204 1189 … … 1206 1191 * Get the position (index) of the widget in the containing sidebar 1207 1192 * 1208 * @throws Error1209 1193 * @returns {Number} 1210 1194 */ 1211 1195 getWidgetSidebarPosition: function() { 1212 var control = this, 1213 sidebar_widget_ids, 1214 position; 1215 1216 sidebar_widget_ids = control.getSidebarWidgetsControl().setting(); 1217 position = _.indexOf( sidebar_widget_ids, control.params.widget_id ); 1196 var sidebarWidgetIds, position; 1197 1198 sidebarWidgetIds = this.getSidebarWidgetsControl().setting(); 1199 position = _.indexOf( sidebarWidgetIds, this.params.widget_id ); 1200 1218 1201 if ( position === -1 ) { 1219 throw new Error( 'Widget was unexpectedly not present in the sidebar.' ); 1220 } 1202 return; 1203 } 1204 1221 1205 return position; 1222 1206 }, … … 1242 1226 */ 1243 1227 _moveWidgetByOne: function( offset ) { 1244 var control = this, 1245 i, 1246 sidebar_widgets_setting, 1247 sidebar_widget_ids, 1248 adjacent_widget_id; 1249 1250 i = control.getWidgetSidebarPosition(); 1251 1252 sidebar_widgets_setting = control.getSidebarWidgetsControl().setting; 1253 sidebar_widget_ids = Array.prototype.slice.call( sidebar_widgets_setting() ); // clone 1254 adjacent_widget_id = sidebar_widget_ids[i + offset]; 1255 sidebar_widget_ids[i + offset] = control.params.widget_id; 1256 sidebar_widget_ids[i] = adjacent_widget_id; 1257 1258 sidebar_widgets_setting( sidebar_widget_ids ); 1228 var i, sidebarWidgetsSetting, sidebarWidgetIds, adjacentWidgetId; 1229 1230 i = this.getWidgetSidebarPosition(); 1231 1232 sidebarWidgetsSetting = this.getSidebarWidgetsControl().setting; 1233 sidebarWidgetIds = Array.prototype.slice.call( sidebarWidgetsSetting() ); // clone 1234 adjacentWidgetId = sidebarWidgetIds[i + offset]; 1235 sidebarWidgetIds[i + offset] = this.params.widget_id; 1236 sidebarWidgetIds[i] = adjacentWidgetId; 1237 1238 sidebarWidgetsSetting( sidebarWidgetIds ); 1259 1239 }, 1260 1240 … … 1262 1242 * Toggle visibility of the widget move area 1263 1243 * 1264 * @param {Boolean} [toggle] 1265 */ 1266 toggleWidgetMoveArea: function( toggle ) { 1267 var control = this, move_widget_area; 1268 move_widget_area = control.container.find( '.move-widget-area' ); 1269 if ( typeof toggle === 'undefined' ) { 1270 toggle = ! move_widget_area.hasClass( 'active' ); 1271 } 1272 if ( toggle ) { 1244 * @param {Boolean} [showOrHide] 1245 */ 1246 toggleWidgetMoveArea: function( showOrHide ) { 1247 var self = this, $moveWidgetArea; 1248 1249 $moveWidgetArea = this.container.find( '.move-widget-area' ); 1250 1251 if ( typeof showOrHide === 'undefined' ) { 1252 showOrHide = ! $moveWidgetArea.hasClass( 'active' ); 1253 } 1254 1255 if ( showOrHide ) { 1273 1256 // reset the selected sidebar 1274 move_widget_area.find( '.selected' ).removeClass( 'selected' ); 1275 move_widget_area.find( 'li' ).filter( function() { 1276 return $( this ).data( 'id' ) === control.params.sidebar_id; 1257 $moveWidgetArea.find( '.selected' ).removeClass( 'selected' ); 1258 1259 $moveWidgetArea.find( 'li' ).filter( function() { 1260 return $( this ).data( 'id' ) === self.params.sidebar_id; 1277 1261 } ).addClass( 'selected' ); 1278 control.container.find( '.move-widget-btn' ).prop( 'disabled', true ); 1279 } 1280 move_widget_area.toggleClass( 'active', toggle ); 1281 }, 1282 1283 /** 1284 * Inside of the customizer preview, scroll the widget into view 1285 */ 1286 scrollPreviewWidgetIntoView: function() { 1287 // @todo scrollIntoView() provides a robust but very poor experience. Animation is needed. See https://github.com/x-team/wp-widget-customizer/issues/16 1262 1263 this.container.find( '.move-widget-btn' ).prop( 'disabled', true ); 1264 } 1265 1266 $moveWidgetArea.toggleClass( 'active', showOrHide ); 1288 1267 }, 1289 1268 … … 1292 1271 */ 1293 1272 highlightSectionAndControl: function() { 1294 var control = this, target_element;1295 1296 if ( control.container.is( ':hidden' ) ) {1297 target_element = control.container.closest( '.control-section' );1273 var $target; 1274 1275 if ( this.container.is( ':hidden' ) ) { 1276 $target = this.container.closest( '.control-section' ); 1298 1277 } else { 1299 target_element = control.container; 1300 } 1301 1302 $( '.widget-customizer-highlighted' ).removeClass( 'widget-customizer-highlighted' ); 1303 target_element.addClass( 'widget-customizer-highlighted' ); 1278 $target = this.container; 1279 } 1280 1281 $( '.highlighted' ).removeClass( 'highlighted' ); 1282 $target.addClass( 'highlighted' ); 1283 1304 1284 setTimeout( function() { 1305 target_element.removeClass( 'widget-customizer-highlighted' );1285 $target.removeClass( 'highlighted' ); 1306 1286 }, 500 ); 1307 1287 } 1308 1309 1288 } ); 1310 1289 … … 1602 1581 1603 1582 form_controls = _( control.setting() ).map( function( widget_id ) { 1604 var setting_id = widget _id_to_setting_id( widget_id ),1583 var setting_id = widgetIdToSettingId( widget_id ), 1605 1584 form_control = api.control( setting_id ); 1606 1585 … … 1816 1795 api.Widgets.getSidebarWidgetControlContainingWidget = function( widget_id ) { 1817 1796 var found_control = null; 1818 // @todo this can use widget _id_to_setting_id(), then pass into wp.customize.control( x ).getSidebarWidgetsControl()1797 // @todo this can use widgetIdToSettingId(), then pass into wp.customize.control( x ).getSidebarWidgetsControl() 1819 1798 api.control.each( function( control ) { 1820 1799 if ( control.params.type === 'sidebar_widgets' && -1 !== _.indexOf( control.setting(), widget_id ) ) { … … 1833 1812 api.Widgets.getWidgetFormControlForWidget = function( widget_id ) { 1834 1813 var found_control = null; 1835 // @todo We can just use widget _id_to_setting_id() here1814 // @todo We can just use widgetIdToSettingId() here 1836 1815 api.control.each( function( control ) { 1837 1816 if ( control.params.type === 'widget_form' && control.params.widget_id === widget_id ) { … … 1865 1844 /** 1866 1845 * @param {String} widget_id 1867 * @returns {String} setting _id1846 * @returns {String} settingId 1868 1847 */ 1869 function widget _id_to_setting_id( widget_id ) {1870 var parsed = parse_widget_id( widget_id ), setting _id;1871 1872 setting _id = 'widget_' + parsed.id_base;1848 function widgetIdToSettingId( widget_id ) { 1849 var parsed = parse_widget_id( widget_id ), settingId; 1850 1851 settingId = 'widget_' + parsed.id_base; 1873 1852 if ( parsed.number ) { 1874 setting _id += '[' + parsed.number + ']';1853 settingId += '[' + parsed.number + ']'; 1875 1854 } 1876 return setting _id;1855 return settingId; 1877 1856 } 1878 1857
Note: See TracChangeset
for help on using the changeset viewer.