Toolbar: Add a new 'toggle' tool type; declare as v0.5.2

A new toggle tooltype which makes use of ToggleButtonWidget in order
to provide proper accessibility for all buttons that require on/off
state

Bug: T198781
Change-Id: I8b7fd41571a48fa4f6560790d94bb966972e740f
This commit is contained in:
Derk-Jan Hartman 2018-07-25 01:08:29 +02:00 committed by James D. Forrester
parent 7ab30e7f0f
commit bfbc794c5b
2 changed files with 23 additions and 9 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "WikiEditor", "name": "WikiEditor",
"version": "0.5.1", "version": "0.5.2",
"author": [ "author": [
"Derk-Jan Hartman", "Derk-Jan Hartman",
"Trevor Parscal", "Trevor Parscal",

View file

@ -305,7 +305,7 @@
return $group; return $group;
}, },
buildTool: function ( context, id, tool ) { buildTool: function ( context, id, tool ) {
var i, label, $button, icon, $select, $options, oouiButton, var i, label, $button, config, icon, $select, $options, oouiButton,
option, optionLabel; option, optionLabel;
if ( 'filters' in tool ) { if ( 'filters' in tool ) {
for ( i = 0; i < tool.filters.length; i++ ) { for ( i = 0; i < tool.filters.length; i++ ) {
@ -317,13 +317,19 @@
label = $.wikiEditor.autoMsg( tool, 'label' ); label = $.wikiEditor.autoMsg( tool, 'label' );
switch ( tool.type ) { switch ( tool.type ) {
case 'button': case 'button':
case 'toggle':
if ( tool.oouiIcon ) { if ( tool.oouiIcon ) {
oouiButton = new OO.ui.ButtonWidget( { config = {
framed: false, framed: false,
classes: [ 'tool' ], classes: [ 'tool' ],
icon: tool.oouiIcon, icon: tool.oouiIcon,
title: label title: label
} ); };
if ( tool.type === 'button' ) {
oouiButton = new OO.ui.ButtonWidget( config );
} else if ( tool.type === 'toggle' ) {
oouiButton = new OO.ui.ToggleButtonWidget( config );
}
$button = oouiButton.$element; $button = oouiButton.$element;
$button.attr( 'rel', id ); $button.attr( 'rel', id );
$button.data( 'ooui', oouiButton ); $button.data( 'ooui', oouiButton );
@ -349,8 +355,8 @@
$button.toggleClass( 'tool-active', active ); $button.toggleClass( 'tool-active', active );
// OOUI button // OOUI button
if ( $button.data( 'ooui' ) ) { if ( $button.data( 'ooui' ) && tool.type === 'toggle' ) {
$button.data( 'ooui' ).setFlags( { progressive: active } ); $button.data( 'ooui' ).setValue( active );
} }
} ); } );
if ( 'action' in tool ) { if ( 'action' in tool ) {
@ -361,15 +367,23 @@
// No dragging! // No dragging!
e.preventDefault(); e.preventDefault();
return false; return false;
} ) } );
.click( function ( e ) { if ( $button.data( 'ooui' ) ) {
$button.data( 'ooui' ).on( 'click', function () {
$.wikiEditor.modules.toolbar.fn.doAction( $.wikiEditor.modules.toolbar.fn.doAction(
$( this ).data( 'context' ), $( this ).data( 'action' ), $( this ) context, tool.action
);
} );
} else {
$button.on( 'click', function ( e ) {
$.wikiEditor.modules.toolbar.fn.doAction(
context, tool.action
); );
e.preventDefault(); e.preventDefault();
return false; return false;
} ); } );
} }
}
return $button; return $button;
case 'select': case 'select':
$select = $( '<div>' ) $select = $( '<div>' )