diff options
author | Luke Shumaker <lukeshu@sbcglobal.net> | 2016-05-01 15:30:02 -0400 |
---|---|---|
committer | Luke Shumaker <lukeshu@sbcglobal.net> | 2016-05-01 15:30:02 -0400 |
commit | 1de335ad3f395ca6861085393ba366a9e3fb4a0d (patch) | |
tree | f1fdd326034e05177596851be6a7127615d81498 /vendor/oojs/oojs-ui/src/layouts/MenuLayout.js | |
parent | 9c75fa8ff6d4d38ef552c00fef5969fb154765e8 (diff) | |
parent | f6d65e533c62f6deb21342d4901ece24497b433e (diff) |
Merge commit 'f6d65'
# Conflicts:
# skins/ArchLinux/ArchLinux.php
Diffstat (limited to 'vendor/oojs/oojs-ui/src/layouts/MenuLayout.js')
-rw-r--r-- | vendor/oojs/oojs-ui/src/layouts/MenuLayout.js | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/vendor/oojs/oojs-ui/src/layouts/MenuLayout.js b/vendor/oojs/oojs-ui/src/layouts/MenuLayout.js new file mode 100644 index 00000000..53937cc7 --- /dev/null +++ b/vendor/oojs/oojs-ui/src/layouts/MenuLayout.js @@ -0,0 +1,156 @@ +/** + * MenuLayouts combine a menu and a content {@link OO.ui.PanelLayout panel}. The menu is positioned relative to the content (after, before, top, or bottom) + * and its size is customized with the #menuSize config. The content area will fill all remaining space. + * + * @example + * var menuLayout = new OO.ui.MenuLayout( { + * position: 'top' + * } ), + * menuPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ), + * contentPanel = new OO.ui.PanelLayout( { padded: true, expanded: true, scrollable: true } ), + * select = new OO.ui.SelectWidget( { + * items: [ + * new OO.ui.OptionWidget( { + * data: 'before', + * label: 'Before', + * } ), + * new OO.ui.OptionWidget( { + * data: 'after', + * label: 'After', + * } ), + * new OO.ui.OptionWidget( { + * data: 'top', + * label: 'Top', + * } ), + * new OO.ui.OptionWidget( { + * data: 'bottom', + * label: 'Bottom', + * } ) + * ] + * } ).on( 'select', function ( item ) { + * menuLayout.setMenuPosition( item.getData() ); + * } ); + * + * menuLayout.$menu.append( + * menuPanel.$element.append( '<b>Menu panel</b>', select.$element ) + * ); + * menuLayout.$content.append( + * contentPanel.$element.append( '<b>Content panel</b>', '<p>Note that the menu is positioned relative to the content panel: top, bottom, after, before.</p>') + * ); + * $( 'body' ).append( menuLayout.$element ); + * + * If menu size needs to be overridden, it can be accomplished using CSS similar to the snippet + * below. MenuLayout's CSS will override the appropriate values with 'auto' or '0' to display the + * menu correctly. If `menuPosition` is known beforehand, CSS rules corresponding to other positions + * may be omitted. + * + * .oo-ui-menuLayout-menu { + * height: 200px; + * width: 200px; + * } + * .oo-ui-menuLayout-content { + * top: 200px; + * left: 200px; + * right: 200px; + * bottom: 200px; + * } + * + * @class + * @extends OO.ui.Layout + * + * @constructor + * @param {Object} [config] Configuration options + * @cfg {boolean} [showMenu=true] Show menu + * @cfg {string} [menuPosition='before'] Position of menu: `top`, `after`, `bottom` or `before` + */ +OO.ui.MenuLayout = function OoUiMenuLayout( config ) { + // Configuration initialization + config = $.extend( { + showMenu: true, + menuPosition: 'before' + }, config ); + + // Parent constructor + OO.ui.MenuLayout.super.call( this, config ); + + /** + * Menu DOM node + * + * @property {jQuery} + */ + this.$menu = $( '<div>' ); + /** + * Content DOM node + * + * @property {jQuery} + */ + this.$content = $( '<div>' ); + + // Initialization + this.$menu + .addClass( 'oo-ui-menuLayout-menu' ); + this.$content.addClass( 'oo-ui-menuLayout-content' ); + this.$element + .addClass( 'oo-ui-menuLayout' ) + .append( this.$content, this.$menu ); + this.setMenuPosition( config.menuPosition ); + this.toggleMenu( config.showMenu ); +}; + +/* Setup */ + +OO.inheritClass( OO.ui.MenuLayout, OO.ui.Layout ); + +/* Methods */ + +/** + * Toggle menu. + * + * @param {boolean} showMenu Show menu, omit to toggle + * @chainable + */ +OO.ui.MenuLayout.prototype.toggleMenu = function ( showMenu ) { + showMenu = showMenu === undefined ? !this.showMenu : !!showMenu; + + if ( this.showMenu !== showMenu ) { + this.showMenu = showMenu; + this.$element + .toggleClass( 'oo-ui-menuLayout-showMenu', this.showMenu ) + .toggleClass( 'oo-ui-menuLayout-hideMenu', !this.showMenu ); + } + + return this; +}; + +/** + * Check if menu is visible + * + * @return {boolean} Menu is visible + */ +OO.ui.MenuLayout.prototype.isMenuVisible = function () { + return this.showMenu; +}; + +/** + * Set menu position. + * + * @param {string} position Position of menu, either `top`, `after`, `bottom` or `before` + * @throws {Error} If position value is not supported + * @chainable + */ +OO.ui.MenuLayout.prototype.setMenuPosition = function ( position ) { + this.$element.removeClass( 'oo-ui-menuLayout-' + this.menuPosition ); + this.menuPosition = position; + this.$element.addClass( 'oo-ui-menuLayout-' + position ); + + return this; +}; + +/** + * Get menu position. + * + * @return {string} Menu position + */ +OO.ui.MenuLayout.prototype.getMenuPosition = function () { + return this.menuPosition; +}; |