Merge "Improve media context item to show Image/Video/Audio instead of 'Media'"

extension.json

@@ -1513,7 +1513,8 @@
 				"modules/ve-mw/ui/widgets/ve.ui.MWMediaInfoFieldWidget.js",
 				"modules/ve-mw/ui/datatransferhandlers/ve.ui.MWMediaTransferHandler.js",
 				"modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js",
-				"modules/ve-mw/ui/tools/ve.ui.MWMediaDialogTool.js"
+				"modules/ve-mw/ui/tools/ve.ui.MWMediaDialogTool.js",
+				"modules/ve-mw/ui/contextitems/ve.ui.MWMediaContextItem.js"
 			],
 			"styles": [
 				"modules/ve-mw/ui/styles/dialogs/ve.ui.MWMediaDialog.css",
@@ -1578,7 +1579,10 @@
 				"visualeditor-dialog-media-type-section-help",
 				"visualeditor-dialog-media-type-thumb",
 				"visualeditor-dialog-media-upload",
-				"visualeditor-dialogbutton-media-tooltip"
+				"visualeditor-dialogbutton-media-tooltip",
+				"visualeditor-media-title-audio",
+				"visualeditor-media-title-image",
+				"visualeditor-media-title-video"
 			],
 			"targets": [
 				"desktop"

i18n/ve-mw/en.json

@@ -284,6 +284,9 @@
 	"visualeditor-magiclinknodeinspector-title-rfc": "RFC link",
 	"visualeditor-mainnamespacepagelink": "Project:Main namespace",
 	"visualeditor-media-input-placeholder": "Search for media",
+	"visualeditor-media-title-audio": "Audio",
+	"visualeditor-media-title-image": "Image",
+	"visualeditor-media-title-video": "Video",
 	"visualeditor-meta-tool": "Options",
 	"visualeditor-mweditmode-tooltip": "Switch editor",
 	"visualeditor-mweditmodesource-progress": "Switching to source editing…",

i18n/ve-mw/qqq.json

@@ -297,6 +297,9 @@
 	"visualeditor-magiclinknodeinspector-title-rfc": "Title of inspector for editing RFC magic links.\n\nSee also:\n* {{msg-mw|Visualeditor-annotationbutton-magiclinknode-tooltip-rfc}}",
 	"visualeditor-mainnamespacepagelink": "Name of a page describing the main namespace (NS0) in this project.\n{{doc-important|Do not translate \"Project\"; it is automatically converted to the wiki's project namespace.}}",
 	"visualeditor-media-input-placeholder": "Place holder text for media search input",
+	"visualeditor-media-title-audio": "Title of context item for embedded audio",
+	"visualeditor-media-title-image": "Title of context item for an image",
+	"visualeditor-media-title-video": "Title of context item for embedded video",
 	"visualeditor-meta-tool": "Text of tool in the toolbar the lets users set categories, language links and other page settings.\n{{Identical|Options}}",
 	"visualeditor-mweditmode-tooltip": "Tooltip text for editor switching menu.",
 	"visualeditor-mweditmodesource-progress": "Title of progress bar shown while switching to source mode.",

modules/ve-mw/dm/nodes/ve.dm.MWImageNode.js

@@ -66,6 +66,14 @@ ve.dm.MWImageNode.static.rdfaToTypes = ( function () {
 	return rdfaToType;
 }() );
 
+/**
+ * Get RDFa type
+ *
+ * @static
+ * @param {string} mediaClass Media class, one of 'Image', 'Video' or 'Audio'
+ * @param {string} frameType Frame type, one of 'none', 'frameless', 'thumb' or 'frame'
+ * @return {string} RDFa type
+ */
 ve.dm.MWImageNode.static.getRdfa = function ( mediaClass, frameType ) {
 	return 'mw:' + mediaClass + {
 		none: '',

modules/ve-mw/ui/contextitems/ve.ui.MWMediaContextItem.js

@@ -0,0 +1,70 @@
+/*!
+ * VisualEditor MWMediaContextItem class.
+ *
+ * @copyright 2011-2017 VisualEditor Team and others; see http://ve.mit-license.org
+ */
+
+/**
+ * Context item for a MWImageNode.
+ *
+ * @class
+ * @extends ve.ui.LinearContextItem
+ *
+ * @constructor
+ * @param {ve.ui.Context} context Context item is in
+ * @param {ve.dm.Model} model Model item is related to
+ * @param {Object} config Configuration options
+ */
+ve.ui.MWMediaContextItem = function VeUiMWMediaContextItem( context, model ) {
+	var mediaClass;
+
+	// Parent constructor
+	ve.ui.MWMediaContextItem.super.apply( this, arguments );
+
+	// Initialization
+	this.$element.addClass( 've-ui-mwMediaContextItem' );
+
+	mediaClass = model.getAttribute( 'mediaClass' ) || 'Image';
+
+	this.setIcon( {
+		Image: 'image',
+		// TODO: Better icons for audio/video
+		Audio: 'play',
+		Video: 'play'
+	}[ mediaClass ] );
+	// The following messages can be used here
+	// * visualeditor-media-title-audio
+	// * visualeditor-media-title-image
+	// * visualeditor-media-title-video
+	this.setLabel( ve.msg( 'visualeditor-media-title-' + mediaClass.toLowerCase() ) );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWMediaContextItem, ve.ui.LinearContextItem );
+
+/* Static Properties */
+
+ve.ui.MWMediaContextItem.static.name = 'mwMedia';
+
+ve.ui.MWMediaContextItem.static.icon = 'image';
+
+ve.ui.MWMediaContextItem.static.label =
+	OO.ui.deferMsg( 'visualeditor-media-title-image' );
+
+ve.ui.MWMediaContextItem.static.modelClasses = [ ve.dm.MWBlockImageNode, ve.dm.MWInlineImageNode ];
+
+ve.ui.MWMediaContextItem.static.commandName = 'media';
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWMediaContextItem.prototype.getDescription = function () {
+	return ve.ce.nodeFactory.getDescription( this.model );
+};
+
+/* Registration */
+
+ve.ui.contextItemFactory.register( ve.ui.MWMediaContextItem );