Skip to content
This repository was archived by the owner on Dec 15, 2025. It is now read-only.

Commit f185226

Browse files
prtksxnaprtksxna
committed
Use dropdown instead of OOjs UI select
1 parent 5ff9beb commit f185226

File tree

5 files changed

+73
-34
lines changed

5 files changed

+73
-34
lines changed

‎AccessibilitySimulation.php‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,10 @@
5050
'remoteExtPath' => 'AccessibilitySimulation',
5151
'localBasePath' => __DIR__,
5252
'group' => 'ext.accessibility-simulation',
53-
'styles' => 'filters.css',
53+
'styles' => array(
54+
'filters.css',
55+
'dropdown.css',
56+
),
5457
'scripts' => 'accessibility-switch.js',
5558
'dependencies' => 'oojs-ui',
5659
'messages' => array(

‎accessibility-switch.js‎

Lines changed: 46 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -36,44 +36,59 @@ window.onpopstate = function( event ) {
3636

3737
$( function() {
3838
var $navBar = $( 'ul.navbar-head' ),
39-
selector = new OO.ui.DropdownWidget( {
40-
"label": mw.msg( 'accessibility-simulation' ),
41-
"menu" : { 'items' : [
42-
new OO.ui.MenuOptionWidget( {
43-
'data' : '',
44-
'label' : mw.msg( 'accessibility-simulation-none' ),
45-
'selected' : true
46-
} ),
47-
new OO.ui.MenuOptionWidget( {
48-
'data' : 'protanopia',
49-
'label' : mw.msg( 'accessibility-simulation-protanopia' )
50-
} ),
51-
new OO.ui.MenuOptionWidget( {
52-
'data' : 'deuteranopia',
53-
'label' : mw.msg( 'accessibility-simulation-deuteranopia' )
54-
} ),
55-
new OO.ui.MenuOptionWidget( {
56-
'data' : 'tritanopia',
57-
'label' : mw.msg( 'accessibility-simulation-tritanopia' )
58-
} ),
59-
new OO.ui.MenuOptionWidget( {
60-
'data' : 'monochromacy',
61-
'label' : mw.msg( 'accessibility-simulation-monochromacy' )
62-
} )
63-
] }
64-
} ),
65-
menu = selector.getMenu(),
66-
$newItem = $( '<li/>' ).append( selector.$element ),
39+
$dropdown = $( '<ul>' )
40+
.attr( {
41+
'role': 'menu',
42+
'aria-labelledby': 'Accessibility Simulation',
43+
'class': 'dropdown-menu accessibility-simulation-dropdown'
44+
} )
45+
.append(
46+
$( '<li>' ).append(
47+
$( '<a>' )
48+
.text( mw.msg( 'accessibility-simulation-none' ) )
49+
.data( 'name', '' )
50+
),
51+
$( '<li>' ).append(
52+
$( '<a>' )
53+
.text( mw.msg( 'accessibility-simulation-protanopia' ) )
54+
.data( 'name', 'protanopia' )
55+
),
56+
$( '<li>' ).append(
57+
$( '<a>' )
58+
.text( mw.msg( 'accessibility-simulation-deuteranopia' ) )
59+
.data( 'name', 'deuteranopia' )
60+
),
61+
$( '<li>' ).append(
62+
$( '<a>' )
63+
.text( mw.msg( 'accessibility-simulation-tritanopia' ) )
64+
.data( 'name', 'tritanopia' )
65+
),
66+
$( '<li>' ).append(
67+
$( '<a>' )
68+
.text( mw.msg( 'accessibility-simulation-monochromacy' ) )
69+
.data( 'name', 'monochromacy' )
70+
)
71+
),
72+
$dropdownButton = $( '<a>' )
73+
.attr( {
74+
'class': 'btn btn-default dropdown-toggle accessibility-simulation-button',
75+
'role': 'button',
76+
'data-toggle': 'dropdown',
77+
'aria-expanded': 'true'
78+
} ),
6779
queryParameters = decodeQueryString( window.location.search ),
6880
selectedSimulation = '';
6981

7082
if ( 'simulation' in queryParameters )
7183
selectedSimulation = queryParameters.simulation;
7284

73-
$newItem.appendTo( $navBar );
85+
$navBar.append( $( '<li>' )
86+
.addClass( 'dropdown' )
87+
.append( $dropdownButton, $dropdown )
88+
);
7489

75-
menu.on( 'select', function( item ) {
76-
var type = item.getData(),
90+
$('.accessibility-simulation-dropdown a').on( 'click', function() {
91+
var type = $( this ).data( 'name' ),
7792
newQueryParameters = decodeQueryString( window.location.search ),
7893
newUrl;
7994

@@ -92,7 +107,5 @@ $( function() {
92107
newUrl
93108
);
94109
} );
95-
96-
menu.selectItem( menu.getItemFromData( selectedSimulation ) );
97110
} );
98111
} )( jQuery, mediaWiki );

‎downTriangle.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎dropdown.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.accessibility-simulation-button {
2+
border-left: 1px solid #2860B2;
3+
background-color: #2B5ECF;
4+
background-image: url( 'visionSimulator.svg' ), url( 'downTriangle.svg' );
5+
background-repeat: no-repeat, no-repeat;
6+
background-position: center left 10px, center right 10px;
7+
background-size: 50% 50%, 20% 20%;
8+
width: 65px;
9+
height: 50px;
10+
}

‎visionSimulator.svg‎

Lines changed: 9 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)