wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-12-18 02:40:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove unused code from mmv.ui

Browse source 
Bug: T77349
Change-Id: I9e26dc68859d9dca3c6066837253e85a19039ce0
This commit is contained in:
Derk-Jan Hartman 2024-05-21 00:20:05 +02:00 committed by Jdlrobson
parent 5b89420182
commit f592eeea3b
3 changed files with 1 additions and 219 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bundlesize.config.json
View file

@ -2,7 +2,7 @@
"modules": [ "modules": [
{ {
"resourceModule": "mmv", "resourceModule": "mmv",
"maxSize": "30.0 kB" "maxSize": "28.8 kB"
}, },
{ {
"resourceModule": "mmv.ui.restriction", "resourceModule": "mmv.ui.restriction",

131
resources/mmv/ui/mmv.ui.js
View file

@ -16,8 +16,6 @@
*/ */
( function () { ( function () {
let cachedRTL;
/** /**
* Represents a UI element. * Represents a UI element.
* *
@ -35,33 +33,6 @@
/** @property {Object.<string, string[]>} eventsRegistered Events that this element has registered with the DOM. */ /** @property {Object.<string, string[]>} eventsRegistered Events that this element has registered with the DOM. */
this.eventsRegistered = {}; this.eventsRegistered = {};
/**
* @property {Object.<string, jQuery>} $inlineStyles a list of `<style>` elements in the head
* which we use to manipulate pseudo-classes and pseudo-elements.
*/
this.$inlineStyles = [];
/**
* Stores named timeouts. See setTimer().
*
* @private
* @property {Object.<string, {timeout: Object, handler: function(), delay: number}>}
*/
this.timers = {};
}
/**
* Checks whether the document is RTL. Assumes it doesn't change.
*
* @return {boolean}
*/
isRTL() {
if ( cachedRTL === undefined ) {
cachedRTL = $( document.body ).hasClass( 'rtl' );
}
return cachedRTL;
} }
/** /**
@ -123,108 +94,6 @@
} }
} }
} }
/**
* Manipulate CSS directly. This is needed to set styles for pseudo-classes and pseudo-elements.
*
* @param {string} key some name to identify the style
* @param {string|null} style a CSS snippet (set to null to delete the given style)
*/
setInlineStyle( key, style ) {
if ( !this.$inlineStyles ) {
this.$inlineStyles = [];
}
if ( !this.$inlineStyles[ key ] ) {
if ( !style ) {
return;
}
this.$inlineStyles[ key ] = $( '<style>' ).attr( 'type', 'text/css' ).appendTo( 'head' );
}
this.$inlineStyles[ key ].html( style || '' );
}
/**
* Sets a timer. This is a shortcut to using the native setTimout and then storing
* the reference, with some small differences for convenience:
* - setting the same timer again clears the old one
* - callbacks have the element as their context
* Timers are local to the element.
* See also clearTimer() and resetTimer().
*
* @param {string} name
* @param {function()} callback
* @param {number} delay delay in milliseconds
*/
setTimer( name, callback, delay ) {
this.clearTimer( name );
this.timers[ name ] = {
timeout: null,
handler: callback,
delay: delay
};
this.timers[ name ].timeout = setTimeout( () => {
delete this.timers[ name ];
callback.call( this );
}, delay );
}
/**
* Clears a timer. See setTimer().
*
* @param {string} name
*/
clearTimer( name ) {
if ( name in this.timers ) {
clearTimeout( this.timers[ name ].timeout );
delete this.timers[ name ];
}
}
/**
* Resets a timer, so that its delay will be relative to when resetTimer() was called, not when
* the timer was created. Optionally changes the delay as well.
* Resetting a timer that does not exist or has already fired has no effect.
* See setTimer().
*
* @param {string} name
* @param {number} [delay] delay in milliseconds
*/
resetTimer( name, delay ) {
if ( name in this.timers ) {
if ( delay === undefined ) {
delay = this.timers[ name ].delay;
}
this.setTimer( name, this.timers[ name ].handler, delay );
}
}
/**
* Flips E (east) and W (west) directions in RTL documents.
*
* @param {string} keyword a keyword where the first 'e' or 'w' character means a direction (such as a
* tipsy gravity parameter)
* @return {string}
*/
correctEW( keyword ) {
if ( this.isRTL() ) {
keyword = keyword.replace( /[ew]/i, ( dir ) => {
if ( dir === 'e' ) {
return 'w';
} else if ( dir === 'E' ) {
return 'W';
} else if ( dir === 'w' ) {
return 'e';
} else if ( dir === 'W' ) {
return 'E';
}
} );
}
return keyword;
}
} }
OO.mixinClass( UiElement, OO.EventEmitter ); OO.mixinClass( UiElement, OO.EventEmitter );

87
tests/qunit/mmv/ui/mmv.ui.test.js
View file

@ -21,91 +21,4 @@ const { UiElement } = require( 'mmv' );
$( document ).trigger( new $.Event( 'mmv-foo' ) ); $( document ).trigger( new $.Event( 'mmv-foo' ) );
} ); } );
QUnit.test( 'setInlineStyle()', function ( assert ) {
const element = new UiElement( $( '<div>' ) );
const $testDiv = $( '<div>' ).attr( 'id', 'mmv-testdiv' ).text( '!!!' ).appendTo( '#qunit-fixture' );
assert.true( $testDiv.is( ':visible' ), 'Test div is visible' );
element.setInlineStyle( 'test', '#mmv-testdiv { display: none; }' );
assert.strictEqual( $testDiv.is( ':visible' ), false, 'Test div is hidden by inline style' );
element.setInlineStyle( 'test', null );
assert.strictEqual( $testDiv.is( ':visible' ), true, 'Test div is visible again' );
} );
QUnit.test( 'setTimer()/clearTimer()/resetTimer()', function ( assert ) {
const element = new UiElement( $( '<div>' ) );
const element2 = new UiElement( $( '<div>' ) );
let spy = this.sandbox.spy();
let spy2 = this.sandbox.spy();
element.setTimer( 'foo', spy, 10 );
this.clock.tick( 100 );
assert.strictEqual( spy.called, true, 'Timeout callback was called' );
assert.strictEqual( spy.calledOnce, true, 'Timeout callback was called once' );
assert.strictEqual( spy.calledOn( element ), true, 'Timeout callback was called on the element' );
spy = this.sandbox.spy();
element.setTimer( 'foo', spy, 10 );
element.setTimer( 'foo', spy2, 20 );
this.clock.tick( 100 );
assert.strictEqual( spy.called, false, 'Old timeout callback was not called after update' );
assert.strictEqual( spy2.called, true, 'New timeout callback was called after update' );
spy = this.sandbox.spy();
spy2 = this.sandbox.spy();
element.setTimer( 'foo', spy, 10 );
element.setTimer( 'bar', spy2, 20 );
this.clock.tick( 100 );
assert.strictEqual( spy.called && spy2.called, true, 'Timeouts with different names do not conflict' );
spy = this.sandbox.spy();
spy2 = this.sandbox.spy();
element.setTimer( 'foo', spy, 10 );
element2.setTimer( 'foo', spy2, 20 );
this.clock.tick( 100 );
assert.strictEqual( spy.called && spy2.called, true, 'Timeouts in different elements do not conflict' );
spy = this.sandbox.spy();
element.setTimer( 'foo', spy, 10 );
element.clearTimer( 'foo' );
this.clock.tick( 100 );
assert.strictEqual( spy.called, false, 'Timeout is invalidated by clearing' );
spy = this.sandbox.spy();
element.setTimer( 'foo', spy, 100 );
this.clock.tick( 80 );
element.resetTimer( 'foo' );
this.clock.tick( 80 );
assert.strictEqual( spy.called, false, 'Timeout is reset' );
this.clock.tick( 80 );
assert.strictEqual( spy.called, true, 'Timeout works after reset' );
spy = this.sandbox.spy();
element.setTimer( 'foo', spy, 100 );
this.clock.tick( 80 );
element.resetTimer( 'foo', 200 );
this.clock.tick( 180 );
assert.strictEqual( spy.called, false, 'Timeout is reset to the designated delay' );
this.clock.tick( 80 );
assert.strictEqual( spy.called, true, 'Timeout works after changing the delay' );
} );
QUnit.test( 'correctEW()', function ( assert ) {
const element = new UiElement( $( '<div>' ) );
element.isRTL = this.sandbox.stub().returns( true );
assert.strictEqual( element.correctEW( 'e' ), 'w', 'e (east) is flipped' );
assert.strictEqual( element.correctEW( 'ne' ), 'nw', 'ne (northeast) is flipped' );
assert.strictEqual( element.correctEW( 'W' ), 'E', 'uppercase is flipped' );
assert.strictEqual( element.correctEW( 's' ), 's', 'non-horizontal directions are ignored' );
element.isRTL.returns( false );
assert.strictEqual( element.correctEW( 'e' ), 'e', 'no flipping in LTR documents' );
} );
}() ); }() );