wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-09-25 11:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve rendering of audio files

Browse source 
Use a static image of an audio player.

Also disable resizeable handle.

Bug: T206022
Change-Id: Ic41f381e65c40c3682f470b9993b2c9dbbb506c5
This commit is contained in:
Ed Sanders 2019-04-28 21:56:13 +01:00
parent 4fb17205b6
commit 258965c8b2
4 changed files with 41 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
modules/ve-mw/ce/nodes/ve.ce.MWBlockImageNode.js
View file

@ -63,6 +63,7 @@ ve.ce.MWBlockImageNode = function VeCeMWBlockImageNode() {
// Mixin constructors
ve.ce.MWImageNode.call( this, $focusable, $image );
this.updateMediaType();
this.updateSize();
};
@ -269,6 +270,9 @@ ve.ce.MWBlockImageNode.prototype.onAttributeChange = function ( key, from, to )
this.$image.attr( key, to );
}
break;
case 'mediaType':
this.updateMediaType();
break;
case 'defaultSize':
this.$element.toggleClass( 'mw-default-size', to );
break;
@ -276,6 +280,19 @@ ve.ce.MWBlockImageNode.prototype.onAttributeChange = function ( key, from, to )
}
};
/**
* Update rendering when media type changes
*/
ve.ce.MWBlockImageNode.prototype.updateMediaType = function () {
if ( this.model.getMediaType() === 'AUDIO' ) {
this.$image.attr( 'src', ve.ce.minImgDataUri );
this.$image.addClass( 've-ce-mwBlockImageNode-audioPlayer' );
} else {
this.$image.attr( 'src', this.getResolvedAttribute( 'src' ) );
this.$image.removeClass( 've-ce-mwBlockImageNode-audioPlayer' );
}
};
/**
* @param {Object} dimensions New dimensions
*/
@ -287,6 +304,10 @@ ve.ce.MWBlockImageNode.prototype.onResizableResizing = function ( dimensions ) {
}
};
ve.ce.MWBlockImageNode.prototype.isResizable = function () {
return this.model.getMediaType() !== 'AUDIO';
};
ve.ce.MWBlockImageNode.prototype.getDomPosition = function () {
// We need to override this because this.$element can have children other than renderings of child
// CE nodes (specifically, the image itself, this.$a), which throws the calculations out of whack.

11
modules/ve-mw/ce/styles/nodes/images/audioPlayer.svg Normal file
View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 32" width="300" height="32">
<g opacity=".5">
<path d="m11 9v14l14-7z"/>
<path d="m46.156 12q-1.0156 0-1.53 1.0026-0.50782 0.99609-0.50782 3.0013 0 1.9987 0.50782 3.0013 0.51432 0.99609 1.53 0.99609 1.0221 0 1.53-0.99609 0.51432-1.0026 0.51432-3.0013 0-2.0052-0.51432-3.0013-0.50782-1.0026-1.53-1.0026zm0-1.0417q1.6341 0 2.4935 1.2956 0.86589 1.289 0.86589 3.75 0 2.4544-0.86589 3.75-0.85939 1.2891-2.4935 1.2891-1.6341 0-2.5-1.2891-0.85939-1.2956-0.85939-3.75 0-2.4609 0.85939-3.75 0.86589-1.2956 2.5-1.2956z"/>
<path d="m51.973 19.2h1.3737v1.6536h-1.3737zm0-5.2407h1.3737v1.6536h-1.3737z"/>
<path d="m59.154 12q-1.0156 0-1.53 1.0026-0.50782 0.99609-0.50782 3.0013 0 1.9987 0.50782 3.0013 0.51432 0.99609 1.53 0.99609 1.0221 0 1.53-0.99609 0.51432-1.0026 0.51432-3.0013 0-2.0052-0.51432-3.0013-0.50782-1.0026-1.53-1.0026zm0-1.0417q1.6341 0 2.4935 1.2956 0.86589 1.289 0.86589 3.75 0 2.4544-0.86589 3.75-0.85939 1.2891-2.4935 1.2891-1.6341 0-2.5-1.2891-0.85939-1.2956-0.85939-3.75 0-2.4609 0.85939-3.75 0.86589-1.2956 2.5-1.2956z"/>
<path d="m67.643 12q-1.0156 0-1.53 1.0026-0.50782 0.99609-0.50782 3.0013 0 1.9987 0.50782 3.0013 0.51432 0.99609 1.53 0.99609 1.0221 0 1.53-0.99609 0.51432-1.0026 0.51432-3.0013 0-2.0052-0.51432-3.0013-0.50782-1.0026-1.53-1.0026zm0-1.0417q1.6341 0 2.4935 1.2956 0.86589 1.289 0.86589 3.75 0 2.4544-0.86589 3.75-0.85939 1.2891-2.4935 1.2891t-2.5-1.2891q-0.85939-1.2956-0.85939-3.75 0-2.4609 0.85939-3.75 0.86589-1.2956 2.5-1.2956z"/>
<rect x="85" y="12" width="205" height="8" rx="4" ry="4"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

5
modules/ve-mw/ce/styles/nodes/ve.ce.MWBlockImageNode.css
View file

@ -14,3 +14,8 @@
.ve-ce-mwBlockImageNode > a:after {
pointer-events: none;
}
.ve-ce-mwBlockImageNode-audioPlayer {
/* stylelint-disable-next-line declaration-no-important */
background: #fff url( images/audioPlayer.svg ) !important;
}

5
modules/ve-mw/dm/nodes/ve.dm.MWImageNode.js
View file

@ -349,7 +349,8 @@ ve.dm.MWImageNode.prototype.getFilename = function () {
* @inheritdoc
*/
ve.dm.MWImageNode.prototype.getScalable = function () {
var imageNode = this;
var oldMediaType,
imageNode = this;
if ( !this.scalablePromise ) {
this.scalablePromise = ve.dm.MWImageNode.static.getScalablePromise( this.getFilename() );
// If the promise was already resolved before getScalablePromise returned, then jQuery will execute the done straight away.
@ -360,6 +361,7 @@ ve.dm.MWImageNode.prototype.getScalable = function () {
width: info.width,
height: info.height
} );
oldMediaType = imageNode.mediaType;
// Update media type
imageNode.mediaType = info.mediatype;
// Update according to type
@ -368,6 +370,7 @@ ve.dm.MWImageNode.prototype.getScalable = function () {
imageNode.mediaType,
imageNode.getScalable()
);
imageNode.emit( 'attributeChange', 'mediaType', oldMediaType, imageNode.mediaType );
}
} );
}