Inez has uploaded a new change for review.
https://gerrit.wikimedia.org/r/65090
Change subject: (WIP) Support for thumb and frame images with captions.
......................................................................
(WIP) Support for thumb and frame images with captions.
* VisualEditor.hooks.php
** export URL to magnify clip as a configuration variable so thumbnail image
can render correctly
* ve.ce.Surface.css
** add CSS styling to make image captions look the same way in edit mode as
they look in the view mode
* ve.ce.ParagraphNode.js
** add CSS class ve-ce-generated-wrapper if it is a generated wrapper
* ve.ce.MWImageCaptionNode.js
** make image caption rendering match the view mode
Change-Id: I0cd1b25e8f8355e0500aabc90e7c4cdf591545f3
---
M VisualEditor.hooks.php
M modules/ve/ce/nodes/ve.ce.MWImageCaptionNode.js
M modules/ve/ce/nodes/ve.ce.ParagraphNode.js
M modules/ve/ce/styles/ve.ce.Surface.css
M modules/ve/dm/nodes/ve.dm.MWBlockImageNode.js
5 files changed, 69 insertions(+), 3 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/90/65090/1
diff --git a/VisualEditor.hooks.php b/VisualEditor.hooks.php
index 88bfbc9..7793b2b 100644
--- a/VisualEditor.hooks.php
+++ b/VisualEditor.hooks.php
@@ -60,10 +60,12 @@
* Adds extra variables to the page config.
*/
public static function onMakeGlobalVariablesScript( array &$vars,
OutputPage $out ) {
+ global $wgStylePath, $wgContLang;
$vars['wgVisualEditor'] = array(
'isPageWatched' => $out->getUser()->isWatched(
$out->getTitle() ),
'pageLanguageCode' =>
$out->getTitle()->getPageLanguage()->getHtmlCode(),
- 'pageLanguageDir' =>
$out->getTitle()->getPageLanguage()->getDir()
+ 'pageLanguageDir' =>
$out->getTitle()->getPageLanguage()->getDir(),
+ 'magnifyClipIconURL' => $wgStylePath .
'/common/images/magnify-clip' . ( $wgContLang->isRTL() ? '-rtl' : '' ) . '.png'
// Same as in Linker.php
);
return true;
diff --git a/modules/ve/ce/nodes/ve.ce.MWImageCaptionNode.js
b/modules/ve/ce/nodes/ve.ce.MWImageCaptionNode.js
index 53e62ca..48eddb0 100644
--- a/modules/ve/ce/nodes/ve.ce.MWImageCaptionNode.js
+++ b/modules/ve/ce/nodes/ve.ce.MWImageCaptionNode.js
@@ -17,6 +17,9 @@
ve.ce.MWImageCaptionNode = function VeCeMWImageCaptionNode( model, config ) {
// Parent constructor
ve.ce.BranchNode.call( this, model, config );
+
+ // DOM changes
+ this.$.addClass( 'thumbcaption' );
};
/* Inheritance */
@@ -27,7 +30,42 @@
ve.ce.MWImageCaptionNode.static.name = 'MWimagecaption';
-ve.ce.MWImageCaptionNode.static.tagName = 'figcaption';
+ve.ce.MWImageCaptionNode.static.tagName = 'div';
+
+/* Methods */
+
+/**
+ * TODO: Magnify should not be built nor appended if this is a caption of
frame (vs. thumb) image.
+ */
+ve.ce.MWImageCaptionNode.prototype.onSplice = function () {
+ if ( this.$magnify ) {
+ this.$magnify.detach();
+ } else {
+ this.buildMagnify();
+ }
+
+ // Call parent implementation
+ ve.ce.BranchNode.prototype.onSplice.apply( this, arguments );
+
+ this.$magnify.prependTo( this.$ );
+};
+
+ve.ce.MWImageCaptionNode.prototype.buildMagnify = function() {
+ this.$magnify = $( '<div>' )
+ .addClass( 'magnify' );
+ this.$a = $( '<a>' )
+ .addClass( 'internal' )
+ // It's inside a protected node, so user can't see href/title
anyways.
+ //.attr( 'href', '/wiki/File:Wiki.png') -
+ //.attr( 'title', 'Enlarge' )
+ .appendTo( this.$magnify );
+ this.$img = $( '<img>' )
+ .attr( 'src',
mw.config.get('wgVisualEditor').magnifyClipIconURL )
+ .attr( 'width', 15 )
+ .attr( 'height', 11 )
+ .attr( 'alt', '' )
+ .appendTo( this.$a );
+};
/* Registration */
diff --git a/modules/ve/ce/nodes/ve.ce.ParagraphNode.js
b/modules/ve/ce/nodes/ve.ce.ParagraphNode.js
index 512756d..6839a0b 100644
--- a/modules/ve/ce/nodes/ve.ce.ParagraphNode.js
+++ b/modules/ve/ce/nodes/ve.ce.ParagraphNode.js
@@ -17,6 +17,14 @@
ve.ce.ParagraphNode = function VeCeParagraphNode( model, config ) {
// Parent constructor
ve.ce.ContentBranchNode.call( this, model, config );
+
+ // DOM changes
+ if (
+ this.model.getElement().internal &&
+ this.model.getElement().internal.generated === 'wrapper'
+ ) {
+ this.$.addClass( 've-ce-generated-wrapper' );
+ }
};
/* Inheritance */
diff --git a/modules/ve/ce/styles/ve.ce.Surface.css
b/modules/ve/ce/styles/ve.ce.Surface.css
index feabdf2..c97d2ff 100644
--- a/modules/ve/ce/styles/ve.ce.Surface.css
+++ b/modules/ve/ce/styles/ve.ce.Surface.css
@@ -58,3 +58,16 @@
height: 1px !important;
width: 1px !important;
}
+
+/* MediaWiki PHP Parser does not wrap text inside image captions in <p> but we
do (cause we have to).
+ * Let's make those <p> looks like they are not there by proper CSS styling. */
+.ve-ce-surface .thumbcaption p.ve-ce-generated-wrapper {
+ display: inline;
+ margin: 0;
+ padding: 0;
+ line-height: inherit;
+}
+
+.ve-ce-surface .thumbcaption .ve-ce-branchNode-slug {
+ display: none;
+}
\ No newline at end of file
diff --git a/modules/ve/dm/nodes/ve.dm.MWBlockImageNode.js
b/modules/ve/dm/nodes/ve.dm.MWBlockImageNode.js
index 411f340..08f4d42 100644
--- a/modules/ve/dm/nodes/ve.dm.MWBlockImageNode.js
+++ b/modules/ve/dm/nodes/ve.dm.MWBlockImageNode.js
@@ -81,7 +81,12 @@
}
if ( $caption.length === 0 ) {
- return { 'type': 'MWblockimage', 'attributes': attributes };
+ return [
+ { 'type': 'MWblockimage', 'attributes': attributes },
+ { 'type': 'MWimagecaption' },
+ { 'type': '/MWimagecaption' },
+ { 'type': '/MWblockimage' }
+ ];
} else {
return [ { 'type': 'MWblockimage', 'attributes': attributes } ].
concat( converter.getDataFromDomRecursionClean(
$caption[0], { 'type': 'MWimagecaption' } ) ).
--
To view, visit https://gerrit.wikimedia.org/r/65090
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I0cd1b25e8f8355e0500aabc90e7c4cdf591545f3
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Inez <i...@wikia-inc.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
