Config
Table of Contents

Class

O.MenuButtonView

Extends
O.ButtonView

A MenuButtonView reveals a menu when pressed. Example usage:

new O.MenuButtonView({
    label: 'Select File',
    icon: 'more',
    popOverView: new O.PopOverView(),
    menuView: new O.MenuView({
        showFilter: false,
        closeOnActivate: true,
        options: [
            new O.FileButtonView({
                label: 'Upload From Computer',
                acceptMultiple: true,
                target: controller,
                method: 'uploadFiles'
            }),
            new O.ButtonView({
                label: 'Select From Dropbox',
                target: controller,
                method: 'selectFromDropbox'
            })
        ]
    })
});
"use strict";

( function ( NS ) {

var MenuButtonView = NS.Class({

 Extends: NS.ButtonView,

Property

O.MenuButtonView#type

  • String

Overrides default in O.ButtonView#type.

type: 'v-MenuButton',

Property

O.MenuButtonView#popOverView

  • O.PopOverView

The <O.PopOverView> instance to use to show the menu view.

popOverView: null,

Property

O.MenuButtonView#popOverViewOptions

  • Object

Options to pass to <O.PopOverView#show>.

popOverOptions: {},

Property

O.MenuButtonView#menuView

  • O.MenuView

The <O.MenuView> instance to show when the button is pressed.

menuView: null,

Property

O.MenuButtonView#alignMenu

  • String

Which of the menu and button edges should be aligned? Valid options are 'left', 'right' or 'centre'.

alignMenu: 'left',

Property

O.MenuButtonView#isInMenu

  • Boolean

Is this a child view of an <O.MenuOptionView>?

isInMenu: function () {
   return this.get( 'parentView' ) instanceof NS.MenuOptionView;
 }.property( 'parentView' ),

 // --- Accessibility ---

 didCreateLayer: function ( layer ) {
   layer.setAttribute( 'aria-expanded', 'false' );
 },

 ariaNeedsRedraw: function ( self, property, oldValue ) {
     return this.propertyNeedsRedraw( self, 'aria', oldValue );
 }.observes( 'isActive' ),

 redrawAria: function ( layer ) {
   // Set ARIA attribute to link the menu DOM element to this
   // button, so screen readers know what has opened.
   layer.setAttribute( 'aria-controls',
     this.getFromPath( 'menuView.id' ) );
   // And set ARIA attribute to say that the menu is now open
   layer.setAttribute( 'aria-expanded', this.get( 'isActive' ) + '' );
 },

 // --- Activate ---

Method

O.MenuButtonView#activate()

Overridden to show menu associated with button, if not already visible. Ignores target/method/action properties.

activate: function () {
   if ( !this.get( 'isActive' ) && !this.get( 'isDisabled' ) ) {
     this.set( 'isActive', true );
     var buttonView = this,
       popOverOptions = NS.extend({
         view: this.get( 'menuView' ),
         alignWithView: buttonView,
         alignEdge: this.get( 'alignMenu' ),
         onHide: function () {
           buttonView.set( 'isActive', false );
           if ( menuOptionView ) {
             menuOptionView.removeObserverForKey(
               'isFocussed', popOverView, 'hide' );
           }
         }
       }, this.get( 'popOverOptions' ) ),
       popOverView, menuOptionView, rootView;
     if ( this.get( 'isInMenu' ) ) {
       popOverView = this.getParent( NS.PopOverView );
       menuOptionView = this.get( 'parentView' );
       rootView = buttonView.getParent( NS.RootView );

       popOverOptions.alignWithView = popOverView;
       popOverOptions.atNode = this.get( 'layer' );
       popOverOptions.positionToThe =
         buttonView.getPositionRelativeTo( rootView ).left +
         buttonView.get( 'pxWidth' ) + 180 <
           rootView.get( 'pxWidth' ) ?
             'right' : 'left';
       popOverOptions.alignEdge = 'top';
       popOverOptions.offsetTop =
         popOverOptions.view.get( 'showFilter' ) ? -35 : -5;
     } else {
       popOverView = this.get( 'popOverView' );
     }
     // If the isInMenu, the popOverView used will actually be a subview
     // of this popOverView, and is returned from the show method.
     popOverView = popOverView.show( popOverOptions );
     if ( menuOptionView ) {
       menuOptionView.addObserverForKey(
         'isFocussed', popOverView, 'hide' );
     }
   }
 },

 // --- Keep state in sync with render ---

Private Method

O.MenuButtonView#_activateOnMousedown()

Activates the button on mousedown, not just on click. This allows the user to press the mouse down on the button to show the menu, drag down to the option they want, then release the button to select it.

_activateOnMousedown: function ( event ) {
   if ( event.button || event.metaKey || event.ctrlKey ) {
     return;
   }
   this.activate();
 }.on( 'mousedown' )
});

NS.MenuButtonView = MenuButtonView;

}( O ) );
Animation
Application
Core
DataStore
DOM
DragDrop
Foundation
IO
Localisation
Selection
Parser
TimeZones
Storage
Touch
CollectionViews
UA
ContainerViews
ControlViews
PanelViews
View