a88e7d1bd7
* Adds to the language settings menu. * Adds tp the language actions menu. * Changes template directly. Bug: T365990 Change-Id: I7e13a461c5e455ac1de821351576b992681c66ac
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 notheme">' +
|
|
'<div class="uls-language-actions-title">' +
|
|
'<button class="cdx-button cdx-button--weight-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-add-languages-button-label' ) );
|
|
},
|
|
|
|
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;
|
|
|
|
}() );
|