diff options
Diffstat (limited to 'vendor/oojs/oojs-ui/src/elements/DraggableGroupElement.js')
-rw-r--r-- | vendor/oojs/oojs-ui/src/elements/DraggableGroupElement.js | 261 |
1 files changed, 0 insertions, 261 deletions
diff --git a/vendor/oojs/oojs-ui/src/elements/DraggableGroupElement.js b/vendor/oojs/oojs-ui/src/elements/DraggableGroupElement.js deleted file mode 100644 index 134e2953..00000000 --- a/vendor/oojs/oojs-ui/src/elements/DraggableGroupElement.js +++ /dev/null @@ -1,261 +0,0 @@ -/** - * DraggableGroupElement is a mixin class used to create a group element to - * contain draggable elements, which are items that can be clicked and dragged by a mouse. - * The class is used with OO.ui.DraggableElement. - * - * @abstract - * @class - * @mixins OO.ui.GroupElement - * - * @constructor - * @param {Object} [config] Configuration options - * @cfg {string} [orientation] Item orientation: 'horizontal' or 'vertical'. The orientation - * should match the layout of the items. Items displayed in a single row - * or in several rows should use horizontal orientation. The vertical orientation should only be - * used when the items are displayed in a single column. Defaults to 'vertical' - */ -OO.ui.DraggableGroupElement = function OoUiDraggableGroupElement( config ) { - // Configuration initialization - config = config || {}; - - // Parent constructor - OO.ui.GroupElement.call( this, config ); - - // Properties - this.orientation = config.orientation || 'vertical'; - this.dragItem = null; - this.itemDragOver = null; - this.itemKeys = {}; - this.sideInsertion = ''; - - // Events - this.aggregate( { - dragstart: 'itemDragStart', - dragend: 'itemDragEnd', - drop: 'itemDrop' - } ); - this.connect( this, { - itemDragStart: 'onItemDragStart', - itemDrop: 'onItemDrop', - itemDragEnd: 'onItemDragEnd' - } ); - this.$element.on( { - dragover: $.proxy( this.onDragOver, this ), - dragleave: $.proxy( this.onDragLeave, this ) - } ); - - // Initialize - if ( Array.isArray( config.items ) ) { - this.addItems( config.items ); - } - this.$placeholder = $( '<div>' ) - .addClass( 'oo-ui-draggableGroupElement-placeholder' ); - this.$element - .addClass( 'oo-ui-draggableGroupElement' ) - .append( this.$status ) - .toggleClass( 'oo-ui-draggableGroupElement-horizontal', this.orientation === 'horizontal' ) - .prepend( this.$placeholder ); -}; - -/* Setup */ -OO.mixinClass( OO.ui.DraggableGroupElement, OO.ui.GroupElement ); - -/* Events */ - -/** - * A 'reorder' event is emitted when the order of items in the group changes. - * - * @event reorder - * @param {OO.ui.DraggableElement} item Reordered item - * @param {number} [newIndex] New index for the item - */ - -/* Methods */ - -/** - * Respond to item drag start event - * - * @private - * @param {OO.ui.DraggableElement} item Dragged item - */ -OO.ui.DraggableGroupElement.prototype.onItemDragStart = function ( item ) { - var i, len; - - // Map the index of each object - for ( i = 0, len = this.items.length; i < len; i++ ) { - this.items[ i ].setIndex( i ); - } - - if ( this.orientation === 'horizontal' ) { - // Set the height of the indicator - this.$placeholder.css( { - height: item.$element.outerHeight(), - width: 2 - } ); - } else { - // Set the width of the indicator - this.$placeholder.css( { - height: 2, - width: item.$element.outerWidth() - } ); - } - this.setDragItem( item ); -}; - -/** - * Respond to item drag end event - * - * @private - */ -OO.ui.DraggableGroupElement.prototype.onItemDragEnd = function () { - this.unsetDragItem(); - return false; -}; - -/** - * Handle drop event and switch the order of the items accordingly - * - * @private - * @param {OO.ui.DraggableElement} item Dropped item - * @fires reorder - */ -OO.ui.DraggableGroupElement.prototype.onItemDrop = function ( item ) { - var toIndex = item.getIndex(); - // Check if the dropped item is from the current group - // TODO: Figure out a way to configure a list of legally droppable - // elements even if they are not yet in the list - if ( this.getDragItem() ) { - // If the insertion point is 'after', the insertion index - // is shifted to the right (or to the left in RTL, hence 'after') - if ( this.sideInsertion === 'after' ) { - toIndex++; - } - // Emit change event - this.emit( 'reorder', this.getDragItem(), toIndex ); - } - this.unsetDragItem(); - // Return false to prevent propogation - return false; -}; - -/** - * Handle dragleave event. - * - * @private - */ -OO.ui.DraggableGroupElement.prototype.onDragLeave = function () { - // This means the item was dragged outside the widget - this.$placeholder - .css( 'left', 0 ) - .addClass( 'oo-ui-element-hidden' ); -}; - -/** - * Respond to dragover event - * - * @private - * @param {jQuery.Event} event Event details - */ -OO.ui.DraggableGroupElement.prototype.onDragOver = function ( e ) { - var dragOverObj, $optionWidget, itemOffset, itemMidpoint, itemBoundingRect, - itemSize, cssOutput, dragPosition, itemIndex, itemPosition, - clientX = e.originalEvent.clientX, - clientY = e.originalEvent.clientY; - - // Get the OptionWidget item we are dragging over - dragOverObj = this.getElementDocument().elementFromPoint( clientX, clientY ); - $optionWidget = $( dragOverObj ).closest( '.oo-ui-draggableElement' ); - if ( $optionWidget[ 0 ] ) { - itemOffset = $optionWidget.offset(); - itemBoundingRect = $optionWidget[ 0 ].getBoundingClientRect(); - itemPosition = $optionWidget.position(); - itemIndex = $optionWidget.data( 'index' ); - } - - if ( - itemOffset && - this.isDragging() && - itemIndex !== this.getDragItem().getIndex() - ) { - if ( this.orientation === 'horizontal' ) { - // Calculate where the mouse is relative to the item width - itemSize = itemBoundingRect.width; - itemMidpoint = itemBoundingRect.left + itemSize / 2; - dragPosition = clientX; - // Which side of the item we hover over will dictate - // where the placeholder will appear, on the left or - // on the right - cssOutput = { - left: dragPosition < itemMidpoint ? itemPosition.left : itemPosition.left + itemSize, - top: itemPosition.top - }; - } else { - // Calculate where the mouse is relative to the item height - itemSize = itemBoundingRect.height; - itemMidpoint = itemBoundingRect.top + itemSize / 2; - dragPosition = clientY; - // Which side of the item we hover over will dictate - // where the placeholder will appear, on the top or - // on the bottom - cssOutput = { - top: dragPosition < itemMidpoint ? itemPosition.top : itemPosition.top + itemSize, - left: itemPosition.left - }; - } - // Store whether we are before or after an item to rearrange - // For horizontal layout, we need to account for RTL, as this is flipped - if ( this.orientation === 'horizontal' && this.$element.css( 'direction' ) === 'rtl' ) { - this.sideInsertion = dragPosition < itemMidpoint ? 'after' : 'before'; - } else { - this.sideInsertion = dragPosition < itemMidpoint ? 'before' : 'after'; - } - // Add drop indicator between objects - this.$placeholder - .css( cssOutput ) - .removeClass( 'oo-ui-element-hidden' ); - } else { - // This means the item was dragged outside the widget - this.$placeholder - .css( 'left', 0 ) - .addClass( 'oo-ui-element-hidden' ); - } - // Prevent default - e.preventDefault(); -}; - -/** - * Set a dragged item - * - * @param {OO.ui.DraggableElement} item Dragged item - */ -OO.ui.DraggableGroupElement.prototype.setDragItem = function ( item ) { - this.dragItem = item; -}; - -/** - * Unset the current dragged item - */ -OO.ui.DraggableGroupElement.prototype.unsetDragItem = function () { - this.dragItem = null; - this.itemDragOver = null; - this.$placeholder.addClass( 'oo-ui-element-hidden' ); - this.sideInsertion = ''; -}; - -/** - * Get the item that is currently being dragged. - * - * @return {OO.ui.DraggableElement|null} The currently dragged item, or `null` if no item is being dragged - */ -OO.ui.DraggableGroupElement.prototype.getDragItem = function () { - return this.dragItem; -}; - -/** - * Check if an item in the group is currently being dragged. - * - * @return {Boolean} Item is being dragged - */ -OO.ui.DraggableGroupElement.prototype.isDragging = function () { - return this.getDragItem() !== null; -}; |