Page MenuHomeWickedGov Phorge
Files F1429587

ResizingDragBar.js
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

ResizingDragBar.js
View Options

/**
* @class
* @constructor
* @extends OO.ui.Element
* @param {Object} [config] Configuration options
* @param {boolean} [config.isEW] Orientation of the drag bar, East-West (true) or North-South (false).
*/
function ResizingDragBar( config ) {
config = Object.assign( {}, {
isEW: true,
classes: [ 'ext-WikiEditor-ResizingDragBar' ]
}, config );
ResizingDragBar.super.call( this, config );
var classNameDir = 'ext-WikiEditor-ResizingDragBar-' + ( config.isEW ? 'ew' : 'ns' );
// Possible class names:
// * ext-WikiEditor-ResizingDragBar-ew
// * ext-WikiEditor-ResizingDragBar-ns
this.$element.addClass( classNameDir );
var resizingDragBar = this;
// Determine the horizontal direction to move (flexbox automatically reverses but the offset direction doesn't).
var rtlFactor = config.isEW && OO.ui.Element.static.getDir( document ) === 'rtl' ? -1 : 1;
this.$element.on( 'mousedown', function ( eventMousedown ) {
if ( eventMousedown.button !== ResizingDragBar.static.MAIN_MOUSE_BUTTON ) {
// If not the main mouse (e.g. left) button, ignore.
return;
}
// Prevent selecting (or anything else) when dragging over other parts of the page.
$( document ).on( 'selectstart.' + classNameDir, false );
// Set up parameter names.
var xOrY = config.isEW ? 'pageX' : 'pageY';
var widthOrHeight = config.isEW ? 'width' : 'height';
var lastOffset = eventMousedown[ xOrY ];
// Handle the actual dragging.
$( document ).on( 'mousemove.' + classNameDir, function ( eventMousemove ) {
// Initial width or height of the pane.
var startSize = resizingDragBar.getResizedPane()[ widthOrHeight ]();
// Current position of the mouse (relative to page, not viewport).
var newOffset = eventMousemove[ xOrY ];
// Distance the mouse has moved.
var change = rtlFactor * ( lastOffset - newOffset );
// Set the new size of the pane, and tell others about it.
var newSize = Math.max( startSize - change, ResizingDragBar.static.MIN_PANE_SIZE );
resizingDragBar.getResizedPane().css( widthOrHeight, newSize );
// Save the new starting point of the mouse, from which to calculate the next move.
lastOffset = newOffset;
// Let other scripts do things after the resize.
mw.hook( 'ext.WikiEditor.realtimepreview.resize' ).fire( resizingDragBar );
} );
} );
// Add a UI affordance within the handle area (CSS gives it its appearance).
this.$element.append( $( '<span>' ) );
// Remove the resize event handler when the mouse is released.
$( document ).on( 'mouseup', function () {
$( document ).off( 'mousemove.' + classNameDir );
$( document ).off( 'selectstart.' + classNameDir, false );
} );
}
OO.inheritClass( ResizingDragBar, OO.ui.Element );
/**
* @static
* @property {number} See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
*/
ResizingDragBar.static.MAIN_MOUSE_BUTTON = 0;
/**
* @static
* @property {number} The minimum pane size, in pixels.
* Should be slightly more than the affordance length.
* This should match the max-width of the .ext-WikiEditor-twopanes-pane2 element.
*/
ResizingDragBar.static.MIN_PANE_SIZE = 248;
/**
* Get the pane that is resized by this bar (always the immediate prior sibling).
*
* @public
* @return {jQuery}
*/
ResizingDragBar.prototype.getResizedPane = function () {
return this.$element.prev();
};
module.exports = ResizingDragBar;

File Metadata

Mime Type
text/plain
Expires
Sat, May 16, 17:47 (8 h, 54 m)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
a2/b8/93c2d00b1c99c9afe890f4313627
Default Alt Text
ResizingDragBar.js (3 KB)

Event Timeline