Tchanders has uploaded a new change for review.
https://gerrit.wikimedia.org/r/246789
Change subject: WIP Make new error element
......................................................................
WIP Make new error element
Change-Id: I5839ba62fe4b4708ff51dc549c5294189d7f8843
---
M extension.json
A modules/ve-mw/ui/elements/ve.ui.MWExpandableErrorElement.js
M modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
A modules/ve-mw/ui/styles/elements/ve.ui.MWExpandableErrorElement.css
4 files changed, 183 insertions(+), 57 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/VisualEditor
refs/changes/89/246789/1
diff --git a/extension.json b/extension.json
index 90d3dfc..cfa844e 100644
--- a/extension.json
+++ b/extension.json
@@ -974,6 +974,7 @@
"modules/ve-mw/ui/dialogs/ve.ui.MWCommandHelpDialog.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWCancelConfirmDialog.js",
"modules/ve-mw/ui/dialogs/ve.ui.MWWikitextSwitchConfirmDialog.js",
+
"modules/ve-mw/ui/elements/ve.ui.MWExpandableErrorElement.js",
"modules/ve-mw/ui/tools/ve.ui.MWEditModeTool.js",
"modules/ve-mw/ui/tools/ve.ui.MWPopupTool.js",
"modules/ve-mw/ui/inspectors/ve.ui.MWExtensionInspector.js",
@@ -986,6 +987,7 @@
"modules/ve-mw/ui/styles/inspectors/ve.ui.MWLiveExtensionInspector.css",
"modules/ve-mw/ui/styles/dialogs/ve.ui.MWWelcomeDialog.css",
"modules/ve-mw/ui/styles/dialogs/ve.ui.MWSaveDialog.css",
+
"modules/ve-mw/ui/styles/elements/ve.ui.MWExpandableErrorElement.css",
"modules/ve-mw/ui/styles/tools/ve.ui.MWPopupTool.css",
"modules/ve-mw/ui/styles/widgets/ve.ui.MWTocWidget.css",
"modules/ve-mw/ui/styles/tools/ve.ui.MWEducationPopupTool.css"
diff --git a/modules/ve-mw/ui/elements/ve.ui.MWExpandableErrorElement.js
b/modules/ve-mw/ui/elements/ve.ui.MWExpandableErrorElement.js
new file mode 100644
index 0000000..8c68d4b
--- /dev/null
+++ b/modules/ve-mw/ui/elements/ve.ui.MWExpandableErrorElement.js
@@ -0,0 +1,134 @@
+/*!
+ * VisualEditor UserInterface MWExpandableErrorElement class.
+ *
+ * @copyright 2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/*global ve, OO */
+
+/**
+ * MediaWiki expandable error element.
+ *
+ * @class
+ * @extends OO.ui.Element
+ * @mixins OO.EventEmitter
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWExpandableErrorElement = function VeUiMWExpandableErrorElement( config
) {
+ // Parent constructor
+ ve.ui.MWExpandableErrorElement.super.call( this, config );
+
+ // Mixin constructors
+ OO.EventEmitter.call( this );
+
+ // Interaction
+ this.expanded = false;
+ this.expandable = false;
+
+ this.$element.addClass( 'oo-ui-element-hidden' );
+ this.label = new OO.ui.LabelWidget( {
+ classes: [ 've-ui-mwExpandableErrorElement-label' ]
+ } );
+ this.button = new OO.ui.ButtonWidget( {
+ framed: false,
+ classes: [
+ 've-ui-mwExpandableErrorElement-button ' +
+ 'oo-ui-element-hidden' ],
+ icon: 'expand'
+ } );
+
+ this.$element.append(
+ this.button.$element,
+ this.label.$element
+ );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWExpandableErrorElement, OO.ui.Element );
+
+OO.mixinClass( ve.ui.MWExpandableErrorElement, OO.EventEmitter );
+
+/* Methods */
+
+/**
+ * Set this.expandable property
+ *
+ * @param {boolean} [expandable] Force expandable if true, force not
+ * expandable if false, determine based on label size if omitted
+ */
+ve.ui.MWExpandableErrorElement.prototype.setExpandable = function ( expandable
) {
+ if ( expandable !== undefined ) {
+ this.expandable = expandable;
+ } else {
+ this.label.$element
+ .addClass(
've-ui-mwExpandableErrorElement-label-not-expandable' );
+ this.expandable = this.label.$element.prop( 'scrollWidth' ) >
+ this.label.$element.innerWidth();
+ }
+ this.label.$element
+ .toggleClass(
've-ui-mwExpandableErrorElement-label-not-expandable', !this.expandable );
+};
+
+/**
+ * Show the error and set the label to contain the error text.
+ *
+ * @param {jQuery} [$element] Element containing the error
+ */
+ve.ui.MWExpandableErrorElement.prototype.show = function ( $element ) {
+ this.label.setLabel( $element || null );
+ this.$element.removeClass( 'oo-ui-element-hidden' );
+ // Now decide whether you still want the button appended
+
+ this.setExpandable();
+
+ if ( this.expandable ) {
+ this.label.$element.addClass(
've-ui-mwExpandableErrorElement-label-collapsed' );
+ this.button.$element.removeClass( 'oo-ui-element-hidden' );
+ this.button.connect( this, { click: 'toggleLabel' } );
+ }
+
+ this.emit( 'expandableErrorUpdate' );
+};
+
+/**
+ * Hide and collapse the error element, remove the label, and set expandable
+ * to false.
+ */
+ve.ui.MWExpandableErrorElement.prototype.hide = function () {
+ this.label.setLabel( null );
+ this.$element.addClass( 'oo-ui-element-hidden' );
+
+ this.button.$element.addClass( 'oo-ui-element-hidden' );
+ this.button.disconnect( this );
+ this.toggleLabel( false );
+
+ this.emit( 'expandableErrorUpdate' );
+};
+
+/**
+ * Toggles the label between collapsed and expanded.
+ *
+ * @param {boolean} [expand] Expand if true, collapse if false, toggle if
+ * omitted
+ */
+ve.ui.MWExpandableErrorElement.prototype.toggleLabel = function ( expand ) {
+ // Set this.expanded to the new state
+ this.expanded = expand === undefined ? !this.expanded : expand;
+
+ // Perform actions based on the new state of this.expanded
+ this.button.setIcon( this.expanded ? 'collapse' : 'expand' );
+ this.label.$element.removeClass(
+ 've-ui-mwExpandableErrorElement-label-' +
+ ( this.expanded ? 'collapsed' : 'expanded' )
+ );
+ this.label.$element.addClass(
+ 've-ui-mwExpandableErrorElement-label-' +
+ ( this.expanded ? 'expanded' : 'collapsed' )
+ );
+
+ this.emit( 'expandableErrorUpdate' );
+};
diff --git a/modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
b/modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
index 4147d78..f744c40 100644
--- a/modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
+++ b/modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
@@ -36,26 +36,8 @@
// Parent method
ve.ui.MWLiveExtensionInspector.super.prototype.initialize.call( this );
- // Elements for displaying errors
- this.$generatedContentsErrorContainer = $( '<div>', {
- 'class': 've-ui-mwLiveExtensionInspector-error-container-hidden'
- } );
- this.generatedContentsErrorLabel = new OO.ui.LabelWidget( {
- classes: [
- 've-ui-mwLiveExtensionInspector-error
ve-ui-mwLiveExtensionInspector-error-collapsed'
- ]
- } );
- this.generatedContentsErrorButton = new OO.ui.ButtonWidget( {
- framed: false,
- classes: [ 've-ui-mwLiveExtensionInspector-error-button' ],
- icon: 'expand'
- } );
-
- this.$generatedContentsErrorContainer.append(
- this.generatedContentsErrorButton.$element,
- this.generatedContentsErrorLabel.$element
- );
- this.form.$element.append( this.$generatedContentsErrorContainer );
+ this.generatedContentsError = new ve.ui.MWExpandableErrorElement();
+ this.form.$element.append( this.generatedContentsError.$element );
};
/**
@@ -84,8 +66,11 @@
this.selectedNode =
this.getFragment().getSelectedNode();
}
this.input.on( 'change', this.onChangeHandler );
+ this.generatedContentsError.connect( this, {
+ expandableErrorUpdate: 'updateSize'
+ } );
this.selectedNode.connect( this, {
- generatedContentsError:
this.renderGeneratedContentsError
+ generatedContentsError:
'showGeneratedContentsError'
} );
}, this );
};
@@ -96,8 +81,9 @@
ve.ui.MWLiveExtensionInspector.prototype.getTeardownProcess = function ( data
) {
return
ve.ui.MWLiveExtensionInspector.super.prototype.getTeardownProcess.call( this,
data )
.first( function () {
- this.removeGeneratedContentsError();
this.input.off( 'change', this.onChangeHandler );
+ this.generatedContentsError.hide();
+ this.generatedContentsError.disconnect( this );
this.selectedNode.disconnect( this );
if ( data === undefined ) { // cancel
this.getFragment().getSurface().popStaging();
@@ -135,7 +121,7 @@
this.updateMwData( mwData );
- this.removeGeneratedContentsError();
+ this.hideGeneratedContentsError();
if ( this.visible ) {
this.getFragment().changeAttributes( { mw: mwData } );
@@ -147,25 +133,15 @@
*
* @param {jQuery} $element Element containing the error
*/
-ve.ui.MWLiveExtensionInspector.prototype.renderGeneratedContentsError =
function ( $element ) {
- // Display the error
- this.$generatedContentsErrorContainer
- .removeClass(
've-ui-mwLiveExtensionInspector-error-container-hidden' );
- this.generatedContentsErrorLabel.setLabel(
this.formatGeneratedContentsError( $element ) );
- this.updateSize();
-
- this.generatedContentsErrorButton.connect( this, { click:
'toggleGeneratedContentsError' } );
+ve.ui.MWLiveExtensionInspector.prototype.showGeneratedContentsError = function
( $element ) {
+ this.generatedContentsError.show( this.formatGeneratedContentsError(
$element ) );
};
/**
* Hide the error and collapse the error container.
*/
-ve.ui.MWLiveExtensionInspector.prototype.removeGeneratedContentsError =
function () {
- this.$generatedContentsErrorContainer
- .addClass(
've-ui-mwLiveExtensionInspector-error-container-hidden' );
- this.generatedContentsErrorButton.setIcon( 'expand' ).disconnect( this
);
- this.generatedContentsErrorLabel.setLabel( null );
- this.toggleGeneratedContentsError( true );
+ve.ui.MWLiveExtensionInspector.prototype.hideGeneratedContentsError = function
() {
+ this.generatedContentsError.hide();
};
/**
@@ -178,24 +154,4 @@
*/
ve.ui.MWLiveExtensionInspector.prototype.formatGeneratedContentsError =
function ( $element ) {
return $element;
-};
-
-/**
- * Toggle the error between collapsed and expanded.
- *
- * @param {boolean} expanded Treat the error as expanded without checking
- */
-ve.ui.MWLiveExtensionInspector.prototype.toggleGeneratedContentsError =
function ( expanded ) {
- // Set the correct icon on the expand/collapse button
- expanded = expanded || this.generatedContentsErrorButton.getIcon() ===
'collapse';
- this.generatedContentsErrorButton.setIcon( expanded ? 'expand' :
'collapse' );
-
- // Expand or collapse the error message
- this.generatedContentsErrorLabel.$element
- .removeClass(
- 've-ui-mwLiveExtensionInspector-error-expanded
ve-ui-mwLiveExtensionInspector-error-collapsed'
- )
- .addClass( 've-ui-mwLiveExtensionInspector-error-' + ( expanded
? 'collapsed' : 'expanded' ) );
-
- this.updateSize();
};
diff --git
a/modules/ve-mw/ui/styles/elements/ve.ui.MWExpandableErrorElement.css
b/modules/ve-mw/ui/styles/elements/ve.ui.MWExpandableErrorElement.css
new file mode 100644
index 0000000..df3b457
--- /dev/null
+++ b/modules/ve-mw/ui/styles/elements/ve.ui.MWExpandableErrorElement.css
@@ -0,0 +1,34 @@
+/*!
+ * VisualEditor MediaWiki UserInterface expandable error element styles.
+ *
+ * @copyright 2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+.ve-ui-mwExpandableErrorElement-label {
+ display: block;
+ margin-right: 2.5em;
+ color: #c00;
+}
+
+.ve-ui-mwExpandableErrorElement-label-collapsed {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ve-ui-mwExpandableErrorElement-label-expanded {
+ white-space: pre-wrap;
+}
+
+.ve-ui-mwExpandableErrorElement-label-not-expandable {
+ white-space: nowrap;
+ overflow: visible;
+ text-overflow: clip;
+ margin-right: 0;
+}
+
+.ve-ui-mwExpandableErrorElement-button {
+ float: right;
+ margin-top: -0.3em;
+}
--
To view, visit https://gerrit.wikimedia.org/r/246789
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5839ba62fe4b4708ff51dc549c5294189d7f8843
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Tchanders <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
