Sebastian Berlin (WMSE) has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/341298 )
Change subject: Floating control panel for player
......................................................................
Floating control panel for player
Moved the buttons for controlling the player to a separate <div>, that
is placed at the bottom of the page. The control panel is fixed to
this position, even when scrolling. When debugging, the control panel
is placed above (Y-axis) the debug panel.
CSS linting was changed from csslint to stylelint.
Bug: T151887
Change-Id: I17ebf3ab3a32dba2b28715bc3053b6b2746bd4f3
---
A .stylelintrc
M Gruntfile.js
M modules/ext.wikispeech.css
M modules/ext.wikispeech.js
M package.json
M tests/qunit/ext.wikispeech.test.js
6 files changed, 116 insertions(+), 43 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Wikispeech
refs/changes/98/341298/1
diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 0000000..2c90730
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,3 @@
+{
+ "extends": "stylelint-config-wikimedia"
+}
diff --git a/Gruntfile.js b/Gruntfile.js
index 42cbbd3..981072a 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -5,7 +5,7 @@
grunt.loadNpmTasks( 'grunt-jsonlint' );
grunt.loadNpmTasks( 'grunt-banana-checker' );
grunt.loadNpmTasks( 'grunt-jscs' );
- grunt.loadNpmTasks( 'grunt-contrib-csslint' );
+ grunt.loadNpmTasks( 'grunt-stylelint' );
grunt.initConfig( {
jshint: {
@@ -29,7 +29,16 @@
'!node_modules/**'
]
},
- csslint: {
+ stylelint: {
+ options: {
+ configFile: '.stylelintrc',
+ formatter: 'string',
+ ignoreDisables: false,
+ failOnError: true,
+ outputFile: '',
+ reportNeedlessDisables: false,
+ syntax: ''
+ },
all: 'modules/**/*.css'
}
} );
@@ -41,7 +50,7 @@
'jscs',
'jsonlint',
'banana',
- 'csslint'
+ 'stylelint'
]
);
grunt.registerTask( 'default', 'test' );
diff --git a/modules/ext.wikispeech.css b/modules/ext.wikispeech.css
index 4b5bfb3..5fe48a5 100644
--- a/modules/ext.wikispeech.css
+++ b/modules/ext.wikispeech.css
@@ -3,30 +3,39 @@
}
.ext-wikispeech-play:after {
- content: "Play";
+ content: 'Play';
}
.ext-wikispeech-stop:after {
- content: "Stop";
+ content: 'Stop';
}
.ext-wikispeech-skip-ahead-sentence:after {
- content: "Skip ahead sentence";
+ content: 'Skip ahead sentence';
}
.ext-wikispeech-skip-back-sentence:after {
- content: "Skip back sentence";
+ content: 'Skip back sentence';
}
.ext-wikispeech-skip-ahead-word:after {
- content: "Skip ahead word";
+ content: 'Skip ahead word';
}
.ext-wikispeech-skip-back-word:after {
- content: "Skip back word";
+ content: 'Skip back word';
}
.ext-wikispeech-highlight-sentence {
- background-color: rgb(0, 200, 0);
- background-color: rgba(0, 200, 0, 0.5);
-}
\ No newline at end of file
+ background-color: rgb( 0, 200, 0 );
+ background-color: rgba( 0, 200, 0, 0.5 );
+}
+
+.ext-wikispeech-control-panel {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ border: solid 1px rgb( 150, 150, 150 );
+ background-color: rgb( 200, 200, 200 );
+}
diff --git a/modules/ext.wikispeech.js b/modules/ext.wikispeech.js
index 2db7949..a130844 100644
--- a/modules/ext.wikispeech.js
+++ b/modules/ext.wikispeech.js
@@ -9,7 +9,12 @@
* Add buttons for controlling playback to the top of the page.
*/
- this.addButtons = function () {
+ this.addControlPanel = function () {
+ $( '<div></div>' )
+ .attr( 'id', 'ext-wikispeech-control-panel' )
+ .addClass( 'ext-wikispeech-control-panel' )
+ .appendTo( '#content' );
+ self.moveControlPanelWhenDebugging();
self.addButton(
'ext-wikispeech-play-stop-button',
'ext-wikispeech-play',
@@ -38,6 +43,52 @@
};
/**
+ * Make sure the control panel isn't covered by the debug panel.
+ *
+ * The debug panel is also added to the bottom of the page and
+ * covers the control panel. This function moves the control
+ * panel above the debug panel, when it is added or has
+ * children added (which changes the size).
+ */
+
+ this.moveControlPanelWhenDebugging = function () {
+ var debugPanelChangedObserver, debugPanelAddedObserver,
i, j,
+ mutation, addedNode;
+
+ debugPanelChangedObserver =
+ new MutationObserver( function ( ) {
+ $( '#ext-wikispeech-control-panel'
).css(
+ 'bottom',
+ $( '#jquery-foot-hovzer'
).height()
+ );
+ } );
+ debugPanelAddedObserver =
+ new MutationObserver( function ( mutations ) {
+ for ( i = 0; i < mutations.length; i++
) {
+ mutation = mutations[ i ];
+ for ( j = 0; j <
mutation.addedNodes.length; j++ ) {
+ addedNode =
mutation.addedNodes[ j ];
+ if (
addedNode.getAttribute( 'id' ) ===
+
'jquery-foot-hovzer' ) {
+
debugPanelChangedObserver.observe(
+ $(
'#jquery-foot-hovzer' ).get( 0 ),
+ {
childList: true }
+ );
+ $(
'#ext-wikispeech-control-panel' ).css(
+
'bottom',
+ $(
'#jquery-foot-hovzer' ).height()
+ );
+ }
+ }
+ }
+ } );
+ debugPanelAddedObserver.observe(
+ $( 'body' ).get( 0 ),
+ { childList: true }
+ );
+ };
+
+ /**
* Add a control button.
*
* @param {string} id The id of the button.
@@ -51,7 +102,7 @@
var $button = $( '<button></button>' )
.attr( 'id', id )
.addClass( cssClass );
- $( '#firstHeading' ).append( $button );
+ $( '#ext-wikispeech-control-panel' ).append( $button );
$button.click( onClickFunction );
};
@@ -754,7 +805,7 @@
mw.wikispeech.wikispeech = new mw.wikispeech.Wikispeech();
// Prepare the first utterance for playback.
mw.wikispeech.wikispeech.prepareUtterance( $( '#utterance-0' )
);
- mw.wikispeech.wikispeech.addButtons();
+ mw.wikispeech.wikispeech.addControlPanel();
mw.wikispeech.wikispeech.addKeyboardShortcuts();
}
}( mediaWiki, jQuery ) );
diff --git a/package.json b/package.json
index 0a37bfa..6269d98 100644
--- a/package.json
+++ b/package.json
@@ -1,19 +1,20 @@
{
- "name": "wikispeech",
- "version": "0.0.1",
- "private": true,
- "license": "GPL-2.0+",
- "scripts": {
- "test": "grunt test"
- },
- "devDependencies": {
- "grunt": "0.4.5",
- "grunt-cli": "0.1.13",
- "grunt-contrib-csslint": "1.0.0",
- "grunt-contrib-jshint": "0.11.3",
- "grunt-banana-checker": "0.4.0",
- "grunt-jscs": "2.1.0",
- "grunt-jsonlint": "1.0.4",
- "qunitjs": "1.23.1"
- }
+ "name": "wikispeech",
+ "version": "0.0.1",
+ "private": true,
+ "license": "GPL-2.0+",
+ "scripts": {
+ "test": "grunt test"
+ },
+ "devDependencies": {
+ "grunt": "0.4.5",
+ "grunt-banana-checker": "0.4.0",
+ "grunt-cli": "0.1.13",
+ "grunt-contrib-jshint": "0.11.3",
+ "grunt-jscs": "2.1.0",
+ "grunt-jsonlint": "1.0.4",
+ "grunt-stylelint": "^0.7.0",
+ "qunitjs": "1.23.1",
+ "stylelint-config-wikimedia": "^0.4.1"
+ }
}
diff --git a/tests/qunit/ext.wikispeech.test.js
b/tests/qunit/ext.wikispeech.test.js
index 43cf457..3a2c881 100644
--- a/tests/qunit/ext.wikispeech.test.js
+++ b/tests/qunit/ext.wikispeech.test.js
@@ -10,7 +10,7 @@
// overrideMimeType() isn't defined by default.
server.xhr.prototype.overrideMimeType = function () {};
$( '#qunit-fixture' ).append(
- $( '<h1></h1>' ).attr( 'id', 'firstHeading' )
+ $( '<div></div>' ).attr( 'id', 'content' )
);
$utterances = $( '#qunit-fixture' ).append(
$( '<utterances></utterances>' )
@@ -165,29 +165,29 @@
);
} );
- QUnit.test( 'addButtons()', function ( assert ) {
+ QUnit.test( 'addControlPanel()', function ( assert ) {
assert.expect( 5 );
- wikispeech.addButtons();
+ wikispeech.addControlPanel();
assert.strictEqual(
- $( '#firstHeading #ext-wikispeech-play-stop-button'
).length,
+ $( '#ext-wikispeech-control-panel
#ext-wikispeech-play-stop-button' ).length,
1
);
assert.strictEqual(
- $( '#firstHeading
#ext-wikispeech-skip-ahead-sentence-button' ).length,
+ $( '#ext-wikispeech-control-panel
#ext-wikispeech-skip-ahead-sentence-button' ).length,
1
);
assert.strictEqual(
- $( '#firstHeading
#ext-wikispeech-skip-back-sentence-button' ).length,
+ $( '#ext-wikispeech-control-panel
#ext-wikispeech-skip-back-sentence-button' ).length,
1
);
assert.strictEqual(
- $( '#firstHeading
#ext-wikispeech-skip-ahead-word-button' ).length,
+ $( '#ext-wikispeech-control-panel
#ext-wikispeech-skip-ahead-word-button' ).length,
1
);
assert.strictEqual(
- $( '#firstHeading
#ext-wikispeech-skip-back-word-button' ).length,
+ $( '#ext-wikispeech-control-panel
#ext-wikispeech-skip-back-word-button' ).length,
1
);
} );
@@ -212,7 +212,7 @@
function testClickButton( assert, functionName, buttonId ) {
assert.expect( 1 );
sinon.spy( wikispeech, functionName );
- wikispeech.addButtons();
+ wikispeech.addControlPanel();
$( buttonId ).click();
@@ -325,7 +325,7 @@
QUnit.test( 'stop()', function ( assert ) {
assert.expect( 4 );
- wikispeech.addButtons();
+ wikispeech.addControlPanel();
wikispeech.play();
wikispeech.prepareUtterance( $( '#utterance-0' ) );
$( '#utterance-0 audio' ).prop( 'currentTime', 1.0 );
@@ -352,7 +352,7 @@
QUnit.test( 'play()', function ( assert ) {
var $firstUtterance = $( '#utterance-0' );
assert.expect( 3 );
- wikispeech.addButtons();
+ wikispeech.addControlPanel();
wikispeech.prepareUtterance( $firstUtterance );
wikispeech.play();
--
To view, visit https://gerrit.wikimedia.org/r/341298
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I17ebf3ab3a32dba2b28715bc3053b6b2746bd4f3
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Wikispeech
Gerrit-Branch: master
Gerrit-Owner: Sebastian Berlin (WMSE) <sebastian.ber...@wikimedia.se>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
