[MediaWiki-commits] [Gerrit] Add an icon to hidden templates - change (mediawiki...VisualEditor)

[Mooeypoo (Code Review)]

Mooeypoo has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/193975

Change subject: Add an icon to hidden templates
......................................................................

Add an icon to hidden templates

Check if, after being fully rendered, a template is effectively
empty. If it is, add an icon and style to it so it displays for
the user and is clickable.

Bug: T51806
Change-Id: I11b9f0aba3398a3deb3e755051366e174a28e586
---
M VisualEditor.php
M modules/ve-mw/ce/nodes/ve.ce.MWTransclusionNode.js
A modules/ve-mw/ce/styles/nodes/ve.ce.MWTransclusionNode.css
3 files changed, 50 insertions(+), 13 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor 
refs/changes/75/193975/1

diff --git a/VisualEditor.php b/VisualEditor.php
index a2d5fb3..5d78415 100644
--- a/VisualEditor.php
+++ b/VisualEditor.php
@@ -1323,6 +1323,9 @@
 
                        'modules/ve-mw/ce/nodes/ve.ce.MWTransclusionNode.js',
                ),
+               'styles' => array(
+                       
'modules/ve-mw/ce/styles/nodes/ve.ce.MWTransclusionNode.css'
+               ),
                'dependencies' => array(
                        'ext.visualEditor.mwcore',
                ),
diff --git a/modules/ve-mw/ce/nodes/ve.ce.MWTransclusionNode.js 
b/modules/ve-mw/ce/nodes/ve.ce.MWTransclusionNode.js
index 7258696..8726100 100644
--- a/modules/ve-mw/ce/nodes/ve.ce.MWTransclusionNode.js
+++ b/modules/ve-mw/ce/nodes/ve.ce.MWTransclusionNode.js
@@ -24,6 +24,7 @@
 
        // Mixin constructors
        ve.ce.FocusableNode.call( this );
+       OO.ui.IconElement.call( this, $.extend( {}, config, { $icon: 
this.$element } ) );
        ve.ce.GeneratedContentNode.call( this );
 };
 
@@ -33,6 +34,7 @@
 
 OO.mixinClass( ve.ce.MWTransclusionNode, ve.ce.FocusableNode );
 OO.mixinClass( ve.ce.MWTransclusionNode, ve.ce.GeneratedContentNode );
+OO.mixinClass( ve.ce.MWTransclusionNode, OO.ui.IconElement );
 
 /* Static Properties */
 
@@ -96,7 +98,7 @@
  * @param {Object} response Response data
  */
 ve.ce.MWTransclusionNode.prototype.onParseSuccess = function ( deferred, 
response ) {
-       var contentNodes, $placeHolder;
+       var contentNodes;
 
        if ( !response || response.error || !response.visualeditor || 
response.visualeditor.result !== 'success' ) {
                return this.onParseError.call( this, deferred );
@@ -111,22 +113,35 @@
                contentNodes = Array.prototype.slice.apply( 
contentNodes[0].childNodes );
        }
 
-       // Check if the final result of the imported template is empty.
-       // If it is empty, put an inline placeholder inside it so that it can
-       // be accessible to users (either to remove or edit)
-       if ( contentNodes.length === 0 ) {
-               $placeHolder = this.$( '<span>' )
-                       .css( { display: 'block' } )
-                       // adapted from ve.ce.BranchNode.$blockSlugTemplate
-                       // IE support may require using &nbsp;
-                       .html( '&#xFEFF;' );
-
-               contentNodes.push( $placeHolder[0] );
-       }
        deferred.resolve( contentNodes );
 };
 
 /**
+ * Extend the ve.ce.GeneratedContentNode render method to check for hidden 
templates.
+ *
+ * Check if the final result of the imported template is empty.
+ * If it is empty, set the icon to be the template icon so that it can
+ * be accessible to users (either to remove or edit)
+ *
+ * @see ve.ce.GeneratedContentNode#render
+ */
+ve.ce.MWTransclusionNode.prototype.render = function ( generatedContents ) {
+       // Call parent mixin
+       ve.ce.GeneratedContentNode.prototype.render.call( this, 
generatedContents );
+
+       // Since render relpaces this.$element with a new node, we need to make 
sure
+       // our iconElement is defined again to be this.$element
+       this.setIconElement( this.$element );
+       this.$element.addClass( 've-ce-mwTransclusionNode' );
+       if ( $( generatedContents ).text().trim().length === 0 ) {
+               // If the template length is empty, set up the icon
+               this.setIcon( 'template' );
+       } else {
+               this.setIcon( null );
+       }
+};
+
+/**
  * @inheritdoc
  */
 ve.ce.MWTransclusionNode.prototype.getRenderedDomElements = function ( 
domElements ) {
diff --git a/modules/ve-mw/ce/styles/nodes/ve.ce.MWTransclusionNode.css 
b/modules/ve-mw/ce/styles/nodes/ve.ce.MWTransclusionNode.css
new file mode 100644
index 0000000..226c3cd
--- /dev/null
+++ b/modules/ve-mw/ce/styles/nodes/ve.ce.MWTransclusionNode.css
@@ -0,0 +1,19 @@
+/*!
+ * VisualEditor ContentEditable MediaWiki MWTransclusionNode styles.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+/*csslint regex-selectors:false, overqualified-elements:false */
+
+.ve-ce-mwTransclusionNode.oo-ui-iconElement {
+       display: inline-block;
+       vertical-align: middle;
+       padding: 0.2em;
+       margin: -0.25em 0.15em 0 0.15em;
+       width: 1em;
+       height: 1em;
+       background-repeat: no-repeat;
+       background-position: center center;
+       opacity: 0.5;
+}

-- 
To view, visit https://gerrit.wikimedia.org/r/193975
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I11b9f0aba3398a3deb3e755051366e174a28e586
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits