Tchanders has uploaded a new change for review.

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

Change subject: WIP Update gallery dialog actions to reflect presence of changes
......................................................................

WIP Update gallery dialog actions to reflect presence of changes

Every time a change is made in the gallery dialog, disable
or enable the Done button according to whether the dialog
has changed since it was opened.

Changes have been made upstream, so they also apply to
inspectors and dialogs that inherit from
MWLiveExtensionInspector or MWExtensionWindow.

Bug: T62311

Change-Id: I2295d77114fe024921b6e2bbcf76e04faefa47f1
---
M modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
M modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
M modules/ve-mw/ui/ve.ui.MWExtensionWindow.js
3 files changed, 96 insertions(+), 34 deletions(-)


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

diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js 
b/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
index bfd54f1..18a87d5 100644
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWGalleryDialog.js
@@ -322,7 +322,6 @@
                                this.toggleEmptyGalleryMessage( true );
                                this.showSearchPanelButton.toggle( false );
                                this.toggleSearchPanel( true );
-                               this.updateActions();
                        }
 
                        // Options card
@@ -348,11 +347,20 @@
                        this.stylesInput.setValue( styles );
 
                        // Add event handlers
+                       this.highlightedCaptionInput.connect( this, { change: 
'updateActions' } );
                        this.searchWidget.getResults().connect( this, { choose: 
'onSearchResultsChoose' } );
                        this.showSearchPanelButton.connect( this, { click: 
'onShowSearchPanelButtonClick' } );
                        this.galleryGroup.connect( this, { editItem: 
'onHighlightItem' } );
+                       this.galleryGroup.connect( this, { itemDragEnd: 
'updateActions' } );
                        this.removeButton.connect( this, { click: 
'onRemoveItem' } );
                        this.modeDropdown.getMenu().connect( this, { choose: 
'onModeDropdownChange' } );
+                       this.captionInput.connect( this, { change: 
'updateActions' } );
+                       this.widthsInput.connect( this, { change: 
'updateActions' } );
+                       this.heightsInput.connect( this, { change: 
'updateActions' } );
+                       this.perrowInput.connect( this, { change: 
'updateActions' } );
+                       this.showFilenameCheckbox.connect( this, { change: 
'updateActions' } );
+                       this.classesInput.connect( this, { change: 
'updateActions' } );
+                       this.stylesInput.connect( this, { change: 
'updateActions' } );
 
                        // Hack: Give the input a value so that 
this.insertOrUpdateNode gets called
                        this.input.setValue( 'gallery' );
@@ -383,11 +391,19 @@
                        this.searchPanelVisible = false;
 
                        // Disconnect events
+                       this.highlightedCaptionInput.disconnect( this );
                        this.searchWidget.getResults().disconnect( this );
                        this.showSearchPanelButton.disconnect( this );
                        this.galleryGroup.disconnect( this );
                        this.removeButton.disconnect( this );
                        this.modeDropdown.disconnect( this );
+                       this.captionInput.disconnect( this );
+                       this.widthsInput.disconnect( this );
+                       this.heightsInput.disconnect( this );
+                       this.perrowInput.disconnect( this );
+                       this.showFilenameCheckbox.disconnect( this );
+                       this.classesInput.disconnect( this );
+                       this.stylesInput.disconnect( this );
                }, this );
 };
 
@@ -481,6 +497,7 @@
  */
 ve.ui.MWGalleryDialog.prototype.onSearchResultsChoose = function ( item ) {
        this.addNewImage( item.getData().title );
+       this.updateActions();
 };
 
 /**
@@ -544,6 +561,7 @@
 
        this.widthsInput.setDisabled( disabled );
        this.perrowInput.setDisabled( disabled );
+       this.updateActions();
 };
 
 /**
@@ -600,50 +618,65 @@
  * Disable the "Done" button if the gallery is empty, otherwise enable it
  */
 ve.ui.MWGalleryDialog.prototype.updateActions = function () {
-       this.actions.setAbilities( { done: this.galleryGroup.items.length > 0 } 
);
+       this.actions.setAbilities( { done: this.galleryGroup.items.length > 0 
&& this.isModified() } );
+};
+
+/**
+ * Get the current images and options data
+ *
+ * @return {Object} Images and options data
+ */
+ve.ui.MWGalleryDialog.prototype.getCurrentData = function () {
+       var i, ilen,
+               data = {},
+               items = this.galleryGroup.items;
+
+       // Get data from options card
+       data.mode = this.modeDropdown.getMenu().getSelectedItem().getData();
+       data.caption = this.captionInput.getValue() || undefined;
+       data.widths = this.widthsInput.getValue() || undefined;
+       data.heights = this.heightsInput.getValue() || undefined;
+       data.perrow = this.perrowInput.getValue() || undefined;
+       data.showFilename = this.showFilenameCheckbox.isSelected() ? 'yes' : 
undefined;
+       data.classes = this.classesInput.getValue() || undefined;
+       data.styles = this.stylesInput.getValue() || undefined;
+
+       // Unset mode attribute if it is the same as the default
+       data.mode = data.mode === this.defaults.mode ? undefined : data.mode;
+
+       // Get titles and captions from gallery group
+       data.extsrc = '';
+       if ( this.highlightedItem ) {
+               this.highlightedItem.setCaption( 
this.highlightedCaptionInput.getValue() );
+       }
+       for ( i = 0, ilen = items.length; i < ilen; i++ ) {
+               data.extsrc += '\n' + items[ i ].imageTitle + '|' + items[ i 
].caption;
+       }
+       data.extsrc += '\n';
+
+       return data;
 };
 
 /**
  * @inheritdoc
  */
 ve.ui.MWGalleryDialog.prototype.updateMwData = function ( mwData ) {
-       var i, ilen, mode, caption, widths, heights, perrow,
-               showFilename, classes, styles,
-               extsrc = '',
-               items = this.galleryGroup.items;
+       var data;
 
        // Parent method
        ve.ui.MWGalleryDialog.super.prototype.updateMwData.call( this, mwData );
 
-       // Get titles and captions from gallery group
-       this.highlightedItem.setCaption( 
this.highlightedCaptionInput.getValue() );
-       for ( i = 0, ilen = items.length; i < ilen; i++ ) {
-               extsrc += '\n' + items[ i ].imageTitle + '|' + items[ i 
].caption;
-       }
+       data = this.getCurrentData();
 
-       // Get data from options card
-       mode = this.modeDropdown.getMenu().getSelectedItem().getData();
-       caption = this.captionInput.getValue();
-       widths = this.widthsInput.getValue();
-       heights = this.heightsInput.getValue();
-       perrow = this.perrowInput.getValue();
-       showFilename = this.showFilenameCheckbox.isSelected();
-       classes = this.classesInput.getValue();
-       styles = this.stylesInput.getValue();
-
-       // Update extsrc and attributes
-       mwData.body.extsrc = extsrc + '\n';
-       mwData.attrs.mode = mode || undefined;
-       mwData.attrs.caption = caption || undefined;
-       mwData.attrs.widths = widths || undefined;
-       mwData.attrs.heights = heights || undefined;
-       mwData.attrs.perrow = perrow || undefined;
-       mwData.attrs.showfilename = showFilename ? 'yes' : undefined;
-       mwData.attrs.classes = classes || undefined;
-       mwData.attrs.styles = styles || undefined;
-
-       // Unset mode attribute if it is the same as the default
-       mwData.attrs.mode = mode === this.defaults.mode ? undefined : mode;
+       mwData.body.extsrc = data.extsrc;
+       mwData.attrs.mode = data.mode;
+       mwData.attrs.caption = data.caption;
+       mwData.attrs.widths = data.widths;
+       mwData.attrs.heights = data.heights;
+       mwData.attrs.perrow = data.perrow;
+       mwData.attrs.showfilename = data.showFilename;
+       mwData.attrs.classes = data.classes;
+       mwData.attrs.styles = data.styles;
 };
 
 /* Registration */
diff --git a/modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js 
b/modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
index f7eafff..3a7dca5 100644
--- a/modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
+++ b/modules/ve-mw/ui/inspectors/ve.ui.MWLiveExtensionInspector.js
@@ -120,6 +120,7 @@
        var mwData = ve.copy( this.selectedNode.getAttribute( 'mw' ) );
 
        this.updateMwData( mwData );
+       this.updateActions();
 
        this.hideGeneratedContentsError();
 
diff --git a/modules/ve-mw/ui/ve.ui.MWExtensionWindow.js 
b/modules/ve-mw/ui/ve.ui.MWExtensionWindow.js
index 00f83f8..4157bc0 100644
--- a/modules/ve-mw/ui/ve.ui.MWExtensionWindow.js
+++ b/modules/ve-mw/ui/ve.ui.MWExtensionWindow.js
@@ -17,6 +17,7 @@
 ve.ui.MWExtensionWindow = function VeUiMWExtensionWindow() {
        this.whitespace = null;
        this.input = null;
+       this.mwData = null;
 };
 
 /* Inheritance */
@@ -80,6 +81,7 @@
 
                if ( this.selectedNode ) {
                        this.input.setValueAndWhitespace( 
this.selectedNode.getAttribute( 'mw' ).body.extsrc );
+                       this.mwData = this.selectedNode.getAttribute( 'mw' );
                } else {
                        if ( !this.constructor.static.modelClasses[ 0 
].static.isContent ) {
                                // New nodes should use linebreaks for blocks
@@ -92,6 +94,9 @@
 
                dir = this.constructor.static.dir || data.dir;
                this.input.setRTL( dir === 'rtl' );
+
+               this.actions.setAbilities( { done: false } );
+               this.input.connect( this, { change: 'updateActions' } );
        }, this );
 };
 
@@ -124,6 +129,13 @@
                        }
                }
        }, this );
+};
+
+/**
+ * Disable the "Done" button if there are no changes
+ */
+ve.ui.MWExtensionWindow.prototype.updateActions = function () {
+       this.actions.setAbilities( { done: this.isModified() } );
 };
 
 /**
@@ -200,3 +212,19 @@
 
        mwData.body.extsrc = value;
 };
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWExtensionWindow.prototype.isModified = function () {
+       var newMwData;
+
+       if ( this.mwData ) {
+               newMwData = ve.copy( this.mwData );
+               this.updateMwData( newMwData );
+               modified = !ve.compare( this.mwData, newMwData );
+       } else {
+               modified = true;
+       }
+       return modified;
+};

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: I2295d77114fe024921b6e2bbcf76e04faefa47f1
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/VisualEditor
Gerrit-Branch: master
Gerrit-Owner: Tchanders <thalia.e.c...@googlemail.com>

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

Reply via email to