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