removed javascript and jquery code to handle collapsible tabs
This commit is contained in:
parent
7f87f040c0
commit
59631f6578
|
|
@ -1,203 +0,0 @@
|
|||
/**
|
||||
* Collapsible Tabs for the Vector skin.
|
||||
*
|
||||
* @class jQuery.plugin.collapsibleTabs
|
||||
*/
|
||||
( function ( $ ) {
|
||||
var isRTL = document.documentElement.dir === 'rtl',
|
||||
boundEvent = false,
|
||||
rAF = window.requestAnimationFrame || setTimeout;
|
||||
|
||||
/**
|
||||
* @event beforeTabCollapse
|
||||
*/
|
||||
|
||||
/**
|
||||
* @event afterTabCollapse
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {Object} [options]
|
||||
* @param {string} [options.expandedContainer="#p-views ul"] List of tabs
|
||||
* @param {string} [options.collapsedContainer="#p-cactions ul"] List of menu items
|
||||
* @param {string} [options.collapsible="li.collapsible"] Match tabs that are collapsible
|
||||
* @param {Function} [options.expandCondition]
|
||||
* @param {Function} [options.collapseCondition]
|
||||
* @return {jQuery}
|
||||
* @chainable
|
||||
*/
|
||||
$.fn.collapsibleTabs = function ( options ) {
|
||||
// Merge options into the defaults
|
||||
var settings = $.extend( {}, $.collapsibleTabs.defaults, options );
|
||||
|
||||
// return if the function is called on an empty jquery object
|
||||
if ( !this.length ) {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.each( function () {
|
||||
var $el = $( this );
|
||||
// add the element to our array of collapsible managers
|
||||
$.collapsibleTabs.instances.push( $el );
|
||||
// attach the settings to the elements
|
||||
$el.data( 'collapsibleTabsSettings', settings );
|
||||
// attach data to our collapsible elements
|
||||
$el.children( settings.collapsible ).each( function () {
|
||||
$.collapsibleTabs.addData( $( this ) );
|
||||
} );
|
||||
} );
|
||||
|
||||
// if we haven't already bound our resize handler, bind it now
|
||||
if ( !boundEvent ) {
|
||||
boundEvent = true;
|
||||
$( window ).on( 'resize', $.debounce( 100, function () {
|
||||
rAF( $.collapsibleTabs.handleResize );
|
||||
} ) );
|
||||
}
|
||||
|
||||
// call our resize handler to setup the page
|
||||
rAF( $.collapsibleTabs.handleResize );
|
||||
return this;
|
||||
};
|
||||
$.collapsibleTabs = {
|
||||
instances: [],
|
||||
defaults: {
|
||||
expandedContainer: '#p-views ul',
|
||||
collapsedContainer: '#p-cactions ul',
|
||||
collapsible: 'li.collapsible',
|
||||
shifting: false,
|
||||
expandCondition: function ( eleWidth ) {
|
||||
// If there are at least eleWidth + 1 pixels of free space, expand.
|
||||
// We add 1 because .width() will truncate fractional values but .offset() will not.
|
||||
return $.collapsibleTabs.calculateTabDistance() >= eleWidth + 1;
|
||||
},
|
||||
collapseCondition: function () {
|
||||
// If there's an overlap, collapse.
|
||||
return $.collapsibleTabs.calculateTabDistance() < 0;
|
||||
}
|
||||
},
|
||||
addData: function ( $collapsible ) {
|
||||
var settings = $collapsible.parent().data( 'collapsibleTabsSettings' );
|
||||
if ( settings ) {
|
||||
$collapsible.data( 'collapsibleTabsSettings', {
|
||||
expandedContainer: settings.expandedContainer,
|
||||
collapsedContainer: settings.collapsedContainer,
|
||||
expandedWidth: $collapsible.width()
|
||||
} );
|
||||
}
|
||||
},
|
||||
getSettings: function ( $collapsible ) {
|
||||
var settings = $collapsible.data( 'collapsibleTabsSettings' );
|
||||
if ( !settings ) {
|
||||
$.collapsibleTabs.addData( $collapsible );
|
||||
settings = $collapsible.data( 'collapsibleTabsSettings' );
|
||||
}
|
||||
return settings;
|
||||
},
|
||||
handleResize: function () {
|
||||
$.each( $.collapsibleTabs.instances, function ( i, $el ) {
|
||||
var data = $.collapsibleTabs.getSettings( $el );
|
||||
if ( data.shifting ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// if the two navigations are colliding
|
||||
if ( $el.children( data.collapsible ).length && data.collapseCondition() ) {
|
||||
$el.trigger( 'beforeTabCollapse' );
|
||||
// move the element to the dropdown menu
|
||||
$.collapsibleTabs.moveToCollapsed( $el.children( data.collapsible + ':last' ) );
|
||||
}
|
||||
|
||||
// if there are still moveable items in the dropdown menu,
|
||||
// and there is sufficient space to place them in the tab container
|
||||
if (
|
||||
$( data.collapsedContainer + ' ' + data.collapsible ).length &&
|
||||
data.expandCondition(
|
||||
$.collapsibleTabs.getSettings(
|
||||
$( data.collapsedContainer ).children(
|
||||
data.collapsible + ':first' )
|
||||
).expandedWidth
|
||||
)
|
||||
) {
|
||||
// move the element from the dropdown to the tab
|
||||
$el.trigger( 'beforeTabExpand' );
|
||||
$.collapsibleTabs
|
||||
.moveToExpanded( data.collapsedContainer + ' ' + data.collapsible + ':first' );
|
||||
}
|
||||
} );
|
||||
},
|
||||
moveToCollapsed: function ( $moving ) {
|
||||
var outerData, expContainerSettings, target;
|
||||
|
||||
outerData = $.collapsibleTabs.getSettings( $moving );
|
||||
if ( !outerData ) {
|
||||
return;
|
||||
}
|
||||
expContainerSettings = $.collapsibleTabs.getSettings(
|
||||
$( outerData.expandedContainer )
|
||||
);
|
||||
if ( !expContainerSettings ) {
|
||||
return;
|
||||
}
|
||||
expContainerSettings.shifting = true;
|
||||
|
||||
// Remove the element from where it's at and put it in the dropdown menu
|
||||
target = outerData.collapsedContainer;
|
||||
$moving.css( 'position', 'relative' )
|
||||
.css( ( isRTL ? 'left' : 'right' ), 0 )
|
||||
.animate( { width: '1px' }, 'normal', function () {
|
||||
$( this ).hide();
|
||||
// add the placeholder
|
||||
$( '<span class="placeholder" style="display: none;"></span>' ).insertAfter( this );
|
||||
$( this ).detach().prependTo( target ).data( 'collapsibleTabsSettings', outerData );
|
||||
$( this ).attr( 'style', 'display: list-item;' );
|
||||
expContainerSettings.shifting = false;
|
||||
rAF( $.collapsibleTabs.handleResize );
|
||||
} );
|
||||
},
|
||||
moveToExpanded: function ( ele ) {
|
||||
var data, expContainerSettings, $target, expandedWidth,
|
||||
$moving = $( ele );
|
||||
|
||||
data = $.collapsibleTabs.getSettings( $moving );
|
||||
if ( !data ) {
|
||||
return;
|
||||
}
|
||||
expContainerSettings = $.collapsibleTabs.getSettings( $( data.expandedContainer ) );
|
||||
if ( !expContainerSettings ) {
|
||||
return;
|
||||
}
|
||||
expContainerSettings.shifting = true;
|
||||
|
||||
// grab the next appearing placeholder so we can use it for replacing
|
||||
$target = $( data.expandedContainer ).find( 'span.placeholder:first' );
|
||||
expandedWidth = data.expandedWidth;
|
||||
$moving.css( 'position', 'relative' ).css( ( isRTL ? 'right' : 'left' ), 0 ).css( 'width', '1px' );
|
||||
$target.replaceWith(
|
||||
$moving
|
||||
.detach()
|
||||
.css( 'width', '1px' )
|
||||
.data( 'collapsibleTabsSettings', data )
|
||||
.animate( { width: expandedWidth + 'px' }, 'normal', function () {
|
||||
$( this ).attr( 'style', 'display: block;' );
|
||||
rAF( function () {
|
||||
// Update the 'expandedWidth' in case someone was brazen enough to
|
||||
// change the tab's contents after the page load *gasp* (T71729). This
|
||||
// doesn't prevent a tab from collapsing back and forth once, but at
|
||||
// least it won't continue to do that forever.
|
||||
data.expandedWidth = $moving.width();
|
||||
$moving.data( 'collapsibleTabsSettings', data );
|
||||
expContainerSettings.shifting = false;
|
||||
$.collapsibleTabs.handleResize();
|
||||
} );
|
||||
} )
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* @class jQuery
|
||||
* @mixins jQuery.plugin.collapsibleTabs
|
||||
*/
|
||||
|
||||
}( jQuery ) );
|
||||
68
vector.js
68
vector.js
|
|
@ -2,71 +2,5 @@
|
|||
* Vector-specific scripts
|
||||
*/
|
||||
jQuery( function ( $ ) {
|
||||
|
||||
/**
|
||||
* Collapsible tabs
|
||||
*/
|
||||
var $cactions = $( '#p-cactions' ),
|
||||
$tabContainer = $( '#p-views ul' ),
|
||||
rAF = window.requestAnimationFrame || setTimeout,
|
||||
// Avoid forced style calculation during page load
|
||||
initialCactionsWidth = function () {
|
||||
var width = $cactions.width();
|
||||
initialCactionsWidth = function () {
|
||||
return width;
|
||||
};
|
||||
return width;
|
||||
};
|
||||
|
||||
rAF( initialCactionsWidth );
|
||||
|
||||
/**
|
||||
* Focus search input at the very end
|
||||
*/
|
||||
$( '#searchInput' ).attr( 'tabindex', $( document ).lastTabIndex() + 1 );
|
||||
|
||||
// Bind callback functions to animate our drop down menu in and out
|
||||
// and then call the collapsibleTabs function on the menu
|
||||
$tabContainer
|
||||
.on( 'beforeTabCollapse', function () {
|
||||
// If the dropdown was hidden, show it
|
||||
if ( $cactions.hasClass( 'emptyPortlet' ) ) {
|
||||
$cactions.removeClass( 'emptyPortlet' );
|
||||
$cactions.find( 'h3' )
|
||||
.css( 'width', '1px' )
|
||||
.animate( { width: initialCactionsWidth() }, 'normal' );
|
||||
}
|
||||
} )
|
||||
.on( 'beforeTabExpand', function () {
|
||||
// If we're removing the last child node right now, hide the dropdown
|
||||
if ( $cactions.find( 'li' ).length === 1 ) {
|
||||
$cactions.find( 'h3' ).animate( { width: '1px' }, 'normal', function () {
|
||||
$( this ).attr( 'style', '' )
|
||||
.parent().addClass( 'emptyPortlet' );
|
||||
} );
|
||||
}
|
||||
} )
|
||||
.collapsibleTabs( {
|
||||
expandCondition: function ( eleWidth ) {
|
||||
// This looks a bit awkward because we're doing expensive queries as late
|
||||
// as possible.
|
||||
var distance = $.collapsibleTabs.calculateTabDistance();
|
||||
// If there are at least eleWidth + 1 pixels of free space, expand.
|
||||
// We add 1 because .width() will truncate fractional values but .offset() will not.
|
||||
if ( distance >= eleWidth + 1 ) {
|
||||
return true;
|
||||
} else {
|
||||
// Maybe we can still expand? Account for the width of the "Actions" dropdown
|
||||
// if the expansion would hide it.
|
||||
if ( $cactions.find( 'li' ).length === 1 ) {
|
||||
return distance >= eleWidth + 1 - initialCactionsWidth();
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
collapseCondition: function () {
|
||||
return false;
|
||||
}
|
||||
} );
|
||||
/* DO NOTHING -- previously used for collapsible tabs */
|
||||
} );
|
||||
|
|
|
|||
Loading…
Reference in New Issue