X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/76aea3697c6043c1613370f172395b4f65ee71f0..refs/tags/wordpress-4.4:/wp-admin/js/widgets.js diff --git a/wp-admin/js/widgets.js b/wp-admin/js/widgets.js index b42812f3..de64533b 100644 --- a/wp-admin/js/widgets.js +++ b/wp-admin/js/widgets.js @@ -1,136 +1,595 @@ -jQuery(function($) { - $('.noscript-action').remove(); - - var increment = 1; - - // Open or close widget control form - var toggleWidget = function( li, disableFields ) { - var width = li.find('input.widget-width').val(); - - // it seems IE chokes on these animations because of the positioning/floating - var widgetAnim = $.browser.msie ? function() { - var t = $(this); - if ( t.is(':visible') ) { - if ( disableFields ) { t.find( ':input:enabled' ).not( '[name="widget-id[]"], [name*="[submit]"]' ).attr( 'disabled', 'disabled' ); } - li.css( 'marginLeft', 0 ); - t.siblings('div').children('h4').children('a').text( widgetsL10n.edit ); +/*global ajaxurl, isRtl */ +var wpWidgets; +(function($) { + var $document = $( document ); + +wpWidgets = { + /** + * A closed Sidebar that gets a Widget dragged over it. + * + * @var element|null + */ + hoveredSidebar: null, + + init : function() { + var rem, the_id, + self = this, + chooser = $('.widgets-chooser'), + selectSidebar = chooser.find('.widgets-chooser-sidebars'), + sidebars = $('div.widgets-sortables'), + isRTL = !! ( 'undefined' !== typeof isRtl && isRtl ); + + $('#widgets-right .sidebar-name').click( function() { + var $this = $(this), + $wrap = $this.closest('.widgets-holder-wrap'); + + if ( $wrap.hasClass('closed') ) { + $wrap.removeClass('closed'); + $this.parent().sortable('refresh'); } else { - t.find( ':disabled' ).attr( 'disabled', '' ); // always enable on open - if ( width > 250 ) - li.css( 'marginLeft', ( width - 250 ) * -1 ); - t.siblings('div').children('h4').children('a').text( widgetsL10n.cancel ); + $wrap.addClass('closed'); + } + + $document.triggerHandler( 'wp-pin-menu' ); + }); + + $('#widgets-left .sidebar-name').click( function() { + $(this).closest('.widgets-holder-wrap').toggleClass('closed'); + $document.triggerHandler( 'wp-pin-menu' ); + }); + + $(document.body).bind('click.widgets-toggle', function(e) { + var target = $(e.target), + css = { 'z-index': 100 }, + widget, inside, targetWidth, widgetWidth, margin; + + if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) { + widget = target.closest('div.widget'); + inside = widget.children('.widget-inside'); + targetWidth = parseInt( widget.find('input.widget-width').val(), 10 ), + widgetWidth = widget.parent().width(); + + if ( inside.is(':hidden') ) { + if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) { + if ( widget.closest('div.widget-liquid-right').length ) { + margin = isRTL ? 'margin-right' : 'margin-left'; + } else { + margin = isRTL ? 'margin-left' : 'margin-right'; + } + + css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px'; + widget.css( css ); + } + widget.addClass( 'open' ); + inside.slideDown('fast'); + } else { + inside.slideUp('fast', function() { + widget.attr( 'style', '' ); + widget.removeClass( 'open' ); + }); + } + e.preventDefault(); + } else if ( target.hasClass('widget-control-save') ) { + wpWidgets.save( target.closest('div.widget'), 0, 1, 0 ); + e.preventDefault(); + } else if ( target.hasClass('widget-control-remove') ) { + wpWidgets.save( target.closest('div.widget'), 1, 1, 0 ); + e.preventDefault(); + } else if ( target.hasClass('widget-control-close') ) { + widget = target.closest('div.widget'); + widget.removeClass( 'open' ); + wpWidgets.close( widget ); + e.preventDefault(); + } else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) { + wpWidgets.removeInactiveWidgets(); + e.preventDefault(); + } + }); + + sidebars.children('.widget').each( function() { + var $this = $(this); + + wpWidgets.appendTitle( this ); + + if ( $this.find( 'p.widget-error' ).length ) { + $this.find( 'a.widget-action' ).trigger('click'); + } + }); + + $('#widget-list').children('.widget').draggable({ + connectToSortable: 'div.widgets-sortables', + handle: '> .widget-top > .widget-title', + distance: 2, + helper: 'clone', + zIndex: 100, + containment: '#wpwrap', + refreshPositions: true, + start: function( event, ui ) { + var chooser = $(this).find('.widgets-chooser'); + + ui.helper.find('div.widget-description').hide(); + the_id = this.id; + + if ( chooser.length ) { + // Hide the chooser and move it out of the widget + $( '#wpbody-content' ).append( chooser.hide() ); + // Delete the cloned chooser from the drag helper + ui.helper.find('.widgets-chooser').remove(); + self.clearWidgetSelection(); + } + }, + stop: function() { + if ( rem ) { + $(rem).hide(); + } + + rem = ''; + } + }); + + /** + * Opens and closes previously closed Sidebars when Widgets are dragged over/out of them. + */ + sidebars.droppable( { + tolerance: 'intersect', + + /** + * Open Sidebar when a Widget gets dragged over it. + * + * @param event + */ + over: function( event ) { + var $wrap = $( event.target ).parent(); + + if ( wpWidgets.hoveredSidebar && ! $wrap.is( wpWidgets.hoveredSidebar ) ) { + // Close the previous Sidebar as the Widget has been dragged onto another Sidebar. + wpWidgets.closeSidebar( event ); + } + + if ( $wrap.hasClass( 'closed' ) ) { + wpWidgets.hoveredSidebar = $wrap; + $wrap.removeClass( 'closed' ); + } + + $( this ).sortable( 'refresh' ); + }, + + /** + * Close Sidebar when the Widget gets dragged out of it. + * + * @param event + */ + out: function( event ) { + if ( wpWidgets.hoveredSidebar ) { + wpWidgets.closeSidebar( event ); + } + } + } ); + + sidebars.sortable({ + placeholder: 'widget-placeholder', + items: '> .widget', + handle: '> .widget-top > .widget-title', + cursor: 'move', + distance: 2, + containment: '#wpwrap', + tolerance: 'pointer', + refreshPositions: true, + start: function( event, ui ) { + var height, $this = $(this), + $wrap = $this.parent(), + inside = ui.item.children('.widget-inside'); + + if ( inside.css('display') === 'block' ) { + ui.item.removeClass('open'); + inside.hide(); + $(this).sortable('refreshPositions'); + } + + if ( ! $wrap.hasClass('closed') ) { + // Lock all open sidebars min-height when starting to drag. + // Prevents jumping when dragging a widget from an open sidebar to a closed sidebar below. + height = ui.item.hasClass('ui-draggable') ? $this.height() : 1 + $this.height(); + $this.css( 'min-height', height + 'px' ); + } + }, + + stop: function( event, ui ) { + var addNew, widgetNumber, $sidebar, $children, child, item, + $widget = ui.item, + id = the_id; + + // Reset the var to hold a previously closed sidebar. + wpWidgets.hoveredSidebar = null; + + if ( $widget.hasClass('deleting') ) { + wpWidgets.save( $widget, 1, 0, 1 ); // delete widget + $widget.remove(); + return; + } + + addNew = $widget.find('input.add_new').val(); + widgetNumber = $widget.find('input.multi_number').val(); + + $widget.attr( 'style', '' ).removeClass('ui-draggable'); + the_id = ''; + + if ( addNew ) { + if ( 'multi' === addNew ) { + $widget.html( + $widget.html().replace( /<[^<>]+>/g, function( tag ) { + return tag.replace( /__i__|%i%/g, widgetNumber ); + }) + ); + + $widget.attr( 'id', id.replace( '__i__', widgetNumber ) ); + widgetNumber++; + + $( 'div#' + id ).find( 'input.multi_number' ).val( widgetNumber ); + } else if ( 'single' === addNew ) { + $widget.attr( 'id', 'new-' + id ); + rem = 'div#' + id; + } + + wpWidgets.save( $widget, 0, 0, 1 ); + $widget.find('input.add_new').val(''); + $document.trigger( 'widget-added', [ $widget ] ); + } + + $sidebar = $widget.parent(); + + if ( $sidebar.parent().hasClass('closed') ) { + $sidebar.parent().removeClass('closed'); + $children = $sidebar.children('.widget'); + + // Make sure the dropped widget is at the top + if ( $children.length > 1 ) { + child = $children.get(0); + item = $widget.get(0); + + if ( child.id && item.id && child.id !== item.id ) { + $( child ).before( $widget ); + } + } + } + + if ( addNew ) { + $widget.find( 'a.widget-action' ).trigger('click'); + } else { + wpWidgets.saveOrder( $sidebar.attr('id') ); + } + }, + + activate: function() { + $(this).parent().addClass( 'widget-hover' ); + }, + + deactivate: function() { + // Remove all min-height added on "start" + $(this).css( 'min-height', '' ).parent().removeClass( 'widget-hover' ); + }, + + receive: function( event, ui ) { + var $sender = $( ui.sender ); + + // Don't add more widgets to orphaned sidebars + if ( this.id.indexOf('orphaned_widgets') > -1 ) { + $sender.sortable('cancel'); + return; + } + + // If the last widget was moved out of an orphaned sidebar, close and remove it. + if ( $sender.attr('id').indexOf('orphaned_widgets') > -1 && ! $sender.children('.widget').length ) { + $sender.parents('.orphan-sidebar').slideUp( 400, function(){ $(this).remove(); } ); + } + } + }).sortable( 'option', 'connectWith', 'div.widgets-sortables' ); + + $('#available-widgets').droppable({ + tolerance: 'pointer', + accept: function(o){ + return $(o).parent().attr('id') !== 'widget-list'; + }, + drop: function(e,ui) { + ui.draggable.addClass('deleting'); + $('#removing-widget').hide().children('span').empty(); + }, + over: function(e,ui) { + ui.draggable.addClass('deleting'); + $('div.widget-placeholder').hide(); + + if ( ui.draggable.hasClass('ui-sortable-helper') ) { + $('#removing-widget').show().children('span') + .html( ui.draggable.find( 'div.widget-title' ).children( 'h3' ).html() ); + } + }, + out: function(e,ui) { + ui.draggable.removeClass('deleting'); + $('div.widget-placeholder').show(); + $('#removing-widget').hide().children('span').empty(); } - t.toggle(); - } : function() { - var t = $(this); - - if ( t.is(':visible') ) { - if ( disableFields ) { t.find( ':input:enabled' ).not( '[name="widget-id[]"], [name*="[submit]"]' ).attr( 'disabled', 'disabled' ); } - if ( width > 250 ) - li.animate( { marginLeft: 0 } ); - t.siblings('div').children('h4').children('a').text( widgetsL10n.edit ); + }); + + // Area Chooser + $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) { + var $element = $( element ), + name = $element.find( '.sidebar-name h2' ).text(), + id = $element.find( '.widgets-sortables' ).attr( 'id' ), + li = $('
  • ').text( $.trim( name ) ); + + if ( index === 0 ) { + li.addClass( 'widgets-chooser-selected' ); + } + + selectSidebar.append( li ); + li.data( 'sidebarId', id ); + }); + + $( '#available-widgets .widget .widget-title' ).on( 'click.widgets-chooser', function() { + var $widget = $(this).closest( '.widget' ); + + if ( $widget.hasClass( 'widget-in-question' ) || $( '#widgets-left' ).hasClass( 'chooser' ) ) { + self.closeChooser(); } else { - t.find( ':disabled' ).attr( 'disabled', '' ); // always enable on open - if ( width > 250 ) - li.animate( { marginLeft: ( width - 250 ) * -1 } ); - t.siblings('div').children('h4').children('a').text( widgetsL10n.cancel ); + // Open the chooser + self.clearWidgetSelection(); + $( '#widgets-left' ).addClass( 'chooser' ); + $widget.addClass( 'widget-in-question' ).children( '.widget-description' ).after( chooser ); + + chooser.slideDown( 300, function() { + selectSidebar.find('.widgets-chooser-selected').focus(); + }); + + selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() { + selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' ); + $(this).addClass( 'widgets-chooser-selected' ); + } ); + } + }); + + // Add event handlers + chooser.on( 'click.widgets-chooser', function( event ) { + var $target = $( event.target ); + + if ( $target.hasClass('button-primary') ) { + self.addWidget( chooser ); + self.closeChooser(); + } else if ( $target.hasClass('button-secondary') ) { + self.closeChooser(); } - t.animate( { height: 'toggle' } ); + }).on( 'keyup.widgets-chooser', function( event ) { + if ( event.which === $.ui.keyCode.ENTER ) { + if ( $( event.target ).hasClass('button-secondary') ) { + // Close instead of adding when pressing Enter on the Cancel button + self.closeChooser(); + } else { + self.addWidget( chooser ); + self.closeChooser(); + } + } else if ( event.which === $.ui.keyCode.ESCAPE ) { + self.closeChooser(); + } + }); + }, + + saveOrder : function( sidebarId ) { + var data = { + action: 'widgets-order', + savewidgets: $('#_wpnonce_widgets').val(), + sidebars: [] }; - return li.children('div.widget-control').each( widgetAnim ).end(); - }; - - // onclick for edit/cancel links - var editClick = function() { - var q = wpAjax.unserialize( this.href ); - // if link is in available widgets list, make sure it points to the current sidebar - if ( ( q.sidebar && q.sidebar == $('#sidebar').val() ) || q.add ) { - var w = q.edit || q.add; - toggleWidget( $('#current-sidebar .widget-control-list input[@name^="widget-id"][@value=' + w + ']').parents('li:first'), false ).blur(); - return false; - } else if ( q.sidebar ) { // otherwise, redirect to correct page - return true; + if ( sidebarId ) { + $( '#' + sidebarId ).find( '.spinner:first' ).addClass( 'is-active' ); } - // If link is in current widgets list, just open the form - toggleWidget( $(this).parents('li:first'), true ).blur(); - return false; - }; - - // onclick for add links - var addClick = function() { - var oldLi = $(this).parents('li:first').find('ul.widget-control-info li'); - var newLi = oldLi.clone(); - - if ( newLi.html().match( /%i%/ ) ) { - // supplid form is a template, replace %i% by unique id - var i = $('#generated-time').val() + increment.toString(); - increment++; - newLi.html( newLi.html().replace( /%i%/g, i ) ); - } else { - $(this).text( widgetsL10n.edit ).unbind().click( editClick ); - // save form content in textarea so we don't have any conflicting HTML ids - oldLi.html( '' ); + $('div.widgets-sortables').each( function() { + if ( $(this).sortable ) { + data['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(','); + } + }); + + $.post( ajaxurl, data, function() { + $( '#inactive-widgets-control-remove' ).prop( 'disabled' , ! $( '#wp_inactive_widgets .widget' ).length ); + $( '.spinner' ).removeClass( 'is-active' ); + }); + }, + + save : function( widget, del, animate, order ) { + var sidebarId = widget.closest('div.widgets-sortables').attr('id'), + data = widget.find('form').serialize(), a; + + widget = $(widget); + $( '.spinner', widget ).addClass( 'is-active' ); + + a = { + action: 'save-widget', + savewidgets: $('#_wpnonce_widgets').val(), + sidebar: sidebarId + }; + + if ( del ) { + a.delete_widget = 1; } - // add event handlers - addWidgetControls( newLi ); + data += '&' + $.param(a); - // add widget to sidebar sortable - widgetSortable.append( newLi ).SortableAddItem( newLi[0] ); + $.post( ajaxurl, data, function(r) { + var id; - // increment widget counter - var n = parseInt( $('#widget-count').text(), 10 ) + 1; - $('#widget-count').text( n.toString() ) + if ( del ) { + if ( ! $('input.widget_number', widget).val() ) { + id = $('input.widget-id', widget).val(); + $('#available-widgets').find('input.widget-id').each(function(){ + if ( $(this).val() === id ) { + $(this).closest('div.widget').show(); + } + }); + } - return false; - }; + if ( animate ) { + order = 0; + widget.slideUp('fast', function(){ + $(this).remove(); + wpWidgets.saveOrder(); + }); + } else { + widget.remove(); - // add event handlers to all links found in context - var addWidgetControls = function( context ) { - if ( !context ) - context = document; + if ( sidebarId === 'wp_inactive_widgets' ) { + $( '#inactive-widgets-control-remove' ).prop( 'disabled' , ! $( '#wp_inactive_widgets .widget' ).length ); + } + } + } else { + $( '.spinner' ).removeClass( 'is-active' ); + if ( r && r.length > 2 ) { + $( 'div.widget-content', widget ).html( r ); + wpWidgets.appendTitle( widget ); + $document.trigger( 'widget-updated', [ widget ] ); - $('a.widget-control-edit', context).click( editClick ); + if ( sidebarId === 'wp_inactive_widgets' ) { + $( '#inactive-widgets-control-remove' ).prop( 'disabled' , ! $( '#wp_inactive_widgets .widget' ).length ); + } + } + } - // onclick for save links - $('a.widget-control-save', context).click( function() { - toggleWidget( $(this).parents('li:first'), false ).blur() - return false; - } ); + if ( order ) { + wpWidgets.saveOrder(); + } + }); + }, - // onclick for remove links - $('a.widget-control-remove', context).click( function() { - var w = $(this).parents('li:first').find('input[@name^="widget-id"]').val(); - $(this).parents('li:first').remove(); - var t = $('#widget-list ul#widget-control-info-' + w + ' textarea'); - t.parent().html( t.text() ).parents('li.widget-list-item:first').children( 'h4' ).children('a.widget-action') - .show().text( widgetsL10n.add ).unbind().click( addClick ); - var n = parseInt( $('#widget-count').text(), 10 ) - 1; - $('#widget-count').text( n.toString() ) - return false; - } ); - } + removeInactiveWidgets : function() { + var $element = $( '.remove-inactive-widgets' ), a, data; - addWidgetControls(); + $( '.spinner', $element ).addClass( 'is-active' ); - $('a.widget-control-add').click( addClick ); + a = { + action : 'delete-inactive-widgets', + removeinactivewidgets : $( '#_wpnonce_remove_inactive_widgets' ).val() + }; - var widgetSortable; - var widgetSortableInit = function() { - try { // a hack to make sortables work in jQuery 1.2+ and IE7 - $('#current-sidebar .widget-control-list').SortableDestroy(); - } catch(e) {} - widgetSortable = $('#current-sidebar .widget-control-list').Sortable( { - accept: 'widget-sortable', - helperclass: 'sorthelper', - handle: 'h4.widget-title', - onStop: widgetSortableInit + data = $.param( a ); + + $.post( ajaxurl, data, function() { + $( '#wp_inactive_widgets .widget' ).remove(); + $( '#inactive-widgets-control-remove' ).prop( 'disabled' , true ); + $( '.spinner', $element ).removeClass( 'is-active' ); } ); + }, + + appendTitle : function(widget) { + var title = $('input[id*="-title"]', widget).val() || ''; + + if ( title ) { + title = ': ' + title.replace(/<[^<>]+>/g, '').replace(//g, '>'); + } + + $(widget).children('.widget-top').children('.widget-title').children() + .children('.in-widget-title').html(title); + + }, + + close : function(widget) { + widget.children('.widget-inside').slideUp('fast', function() { + widget.attr( 'style', '' ); + }); + }, + + addWidget: function( chooser ) { + var widget, widgetId, add, n, viewportTop, viewportBottom, sidebarBounds, + sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'), + sidebar = $( '#' + sidebarId ); + + widget = $('#available-widgets').find('.widget-in-question').clone(); + widgetId = widget.attr('id'); + add = widget.find( 'input.add_new' ).val(); + n = widget.find( 'input.multi_number' ).val(); + + // Remove the cloned chooser from the widget + widget.find('.widgets-chooser').remove(); + + if ( 'multi' === add ) { + widget.html( + widget.html().replace( /<[^<>]+>/g, function(m) { + return m.replace( /__i__|%i%/g, n ); + }) + ); + + widget.attr( 'id', widgetId.replace( '__i__', n ) ); + n++; + $( '#' + widgetId ).find('input.multi_number').val(n); + } else if ( 'single' === add ) { + widget.attr( 'id', 'new-' + widgetId ); + $( '#' + widgetId ).hide(); + } + + // Open the widgets container + sidebar.closest( '.widgets-holder-wrap' ).removeClass('closed'); + + sidebar.append( widget ); + sidebar.sortable('refresh'); + + wpWidgets.save( widget, 0, 0, 1 ); + // No longer "new" widget + widget.find( 'input.add_new' ).val(''); + + $document.trigger( 'widget-added', [ widget ] ); + + /* + * Check if any part of the sidebar is visible in the viewport. If it is, don't scroll. + * Otherwise, scroll up to so the sidebar is in view. + * + * We do this by comparing the top and bottom, of the sidebar so see if they are within + * the bounds of the viewport. + */ + viewportTop = $(window).scrollTop(); + viewportBottom = viewportTop + $(window).height(); + sidebarBounds = sidebar.offset(); + + sidebarBounds.bottom = sidebarBounds.top + sidebar.outerHeight(); + + if ( viewportTop > sidebarBounds.bottom || viewportBottom < sidebarBounds.top ) { + $( 'html, body' ).animate({ + scrollTop: sidebarBounds.top - 130 + }, 200 ); + } + + window.setTimeout( function() { + // Cannot use a callback in the animation above as it fires twice, + // have to queue this "by hand". + widget.find( '.widget-title' ).trigger('click'); + }, 250 ); + }, + + closeChooser: function() { + var self = this; + + $( '.widgets-chooser' ).slideUp( 200, function() { + $( '#wpbody-content' ).append( this ); + self.clearWidgetSelection(); + }); + }, + + clearWidgetSelection: function() { + $( '#widgets-left' ).removeClass( 'chooser' ); + $( '.widget-in-question' ).removeClass( 'widget-in-question' ); + }, + + /** + * Closes a Sidebar that was previously closed, but opened by dragging a Widget over it. + * + * Used when a Widget gets dragged in/out of the Sidebar and never dropped. + * + * @param sidebar + */ + closeSidebar: function( sidebar ) { + this.hoveredSidebar.addClass( 'closed' ); + $( sidebar.target ).css( 'min-height', '' ); + this.hoveredSidebar = null; } +}; - // initialize sortable - widgetSortableInit(); +$document.ready( function(){ wpWidgets.init(); } ); -}); +})(jQuery);