257112ce78
Currently, actions menu button only support an event handler to be called upon button click. However, when the desired result of a button click is just a redirection, "href" attributes are preferable, due to their accessibility support. To better handle such cases, this patch also adds support for "href" attributes inside action item buttons. When "href" property exists for an actions menu item, it is used and the event handler is ignored. Bug: T289840 Change-Id: I776680c19564f032acd550206c7d1306407420e0
114 lines
2.6 KiB
JavaScript
114 lines
2.6 KiB
JavaScript
( function () {
|
|
'use strict';
|
|
|
|
var ActionsMenuItem = require( './ext.uls.actions.menu.item.js' );
|
|
|
|
function ActionsMenu( options ) {
|
|
this.options = options;
|
|
this.$template = $( ActionsMenu.template );
|
|
this.actionItems = options.actions.map( function ( action ) {
|
|
return new ActionsMenuItem( action.icon, action.text, action.handler, action.href );
|
|
} );
|
|
this.rendered = false;
|
|
this.shown = false;
|
|
}
|
|
|
|
ActionsMenu.template = '<div class="uls-menu uls-language-actions-dialog">' +
|
|
'<div class="uls-language-actions-title">' +
|
|
'<button class="mw-ui-button mw-ui-quiet uls-language-actions-close"></button>' +
|
|
'<span> <strong></strong> </span>' +
|
|
'</div>' +
|
|
'<div class="uls-language-action-items"></div>' +
|
|
'</div>';
|
|
|
|
ActionsMenu.prototype = {
|
|
|
|
/**
|
|
* Render the module into a given target
|
|
*/
|
|
render: function () {
|
|
if ( this.rendered ) {
|
|
this.shown = true;
|
|
this.$template.show();
|
|
return;
|
|
}
|
|
this.actionItems.forEach( function ( actionItem ) {
|
|
this.renderAction( actionItem );
|
|
}.bind( this ) );
|
|
|
|
this.i18n();
|
|
$( document.body ).append( this.$template );
|
|
this.$template.css( this.position() );
|
|
this.$template.show();
|
|
this.$template.find( '.uls-language-actions-close' ).on( 'click', function ( event ) {
|
|
event.stopPropagation();
|
|
this.close();
|
|
}.bind( this ) );
|
|
|
|
$( document.body ).on( 'click', this.cancel.bind( this ) );
|
|
|
|
this.shown = true;
|
|
this.rendered = true;
|
|
},
|
|
|
|
position: function () {
|
|
if ( this.options.onPosition ) {
|
|
return this.options.onPosition.call( this );
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {ActionsMenuItem | Object} actionItem
|
|
*/
|
|
renderAction: function ( actionItem ) {
|
|
if ( !( actionItem instanceof ActionsMenuItem ) ) {
|
|
actionItem = new ActionsMenuItem(
|
|
actionItem.icon,
|
|
actionItem.text,
|
|
actionItem.handler,
|
|
actionItem.href
|
|
);
|
|
}
|
|
var actionButton = actionItem.render();
|
|
this.$template.find( '.uls-language-action-items' ).prepend(
|
|
actionButton.$element
|
|
);
|
|
},
|
|
|
|
i18n: function () {
|
|
this.$template.find( '.uls-language-actions-title strong' )
|
|
.text( $.i18n( 'ext-uls-actions-menu-header' ) );
|
|
},
|
|
|
|
hide: function () {
|
|
this.shown = false;
|
|
this.$template.hide();
|
|
},
|
|
|
|
cancel: function ( e ) {
|
|
if ( e && ( this.$template.is( e.target ) ||
|
|
$.contains( this.$template[ 0 ], e.target ) ) ) {
|
|
return;
|
|
}
|
|
|
|
this.hide();
|
|
},
|
|
|
|
close: function () {
|
|
if ( !this.shown ) {
|
|
return;
|
|
}
|
|
|
|
this.hide();
|
|
// optional callback
|
|
if ( this.options.onClose ) {
|
|
this.options.onClose();
|
|
}
|
|
|
|
}
|
|
};
|
|
|
|
module.exports = ActionsMenu;
|
|
|
|
}() );
|