Made save page button only work when an edit is made

Also added confirmation dialog for abandoning unsaved changes

Change-Id: I3388a8f7def9bee5eda32b97ef78e9565a7e33ea
This commit is contained in:
Trevor Parscal 2012-06-12 10:32:10 -07:00
parent cd3cf1d856
commit 9b9dcca6e2
2 changed files with 63 additions and 5 deletions

View file

@ -55,6 +55,11 @@
box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
}
.ve-init-viewPageTarget-button-disabled {
opacity: 0.5;
-moz-opacity: 0.5;
}
/* inspector styles */
.ve-init-viewPageTarget-saveButton {
border: 1px solid transparent;
@ -134,7 +139,7 @@
.ve-init-viewPageTarget-saveDialog {
display: block;
top: -1px;
top: 0.25em;
right: 0.5em;
width: 29em;
}

View file

@ -18,6 +18,8 @@ ve.init.ViewPageTarget = function() {
this.$toolbar = null;
this.surface = null;
this.active = false;
this.edited = false;
this.proxiedOnSurfaceModelTransact = ve.proxy( this.onSurfaceModelTransact, this );
this.surfaceOptions = {
'toolbars': {
'top': {
@ -98,7 +100,12 @@ ve.init.ViewPageTarget.prototype.onEditTabClick = function( e ) {
ve.init.ViewPageTarget.prototype.onViewTabClick = function( e ) {
// Don't do anything special unless we are in editing mode
if ( this.active ) {
this.tearDownSurface();
if (
!this.surface.getModel().getHistory().length ||
confirm( 'Are you sure you want to go back to view mode without saving first?' )
) {
this.tearDownSurface();
}
// Prevent the edit tab's normal behavior
e.preventDefault();
return false;
@ -124,6 +131,42 @@ ve.init.ViewPageTarget.prototype.onSaveDialogSaveButtonClick = function( e ) {
);
};
/**
* ...
*
* @method
*/
ve.init.ViewPageTarget.prototype.onSurfaceModelTransact = function() {
if ( !this.edited ) {
this.edited = true;
this.$toolbar.find( '.ve-init-viewPageTarget-saveButton ' )
.removeClass( 've-init-viewPageTarget-button-disabled' );
this.surface.getModel().removeListener( 'transact', this.proxiedOnSurfaceModelTransact );
}
};
/**
* ...
*
* @method
*/
ve.init.ViewPageTarget.prototype.onSaveButtonClick = function( e ) {
if ( this.edited ) {
this.$dialog.fadeIn( 'fast' );
this.$dialog.find( 'input:first' ).focus();
}
};
/**
* ...
*
* @method
*/
ve.init.ViewPageTarget.prototype.onSaveDialogCloseButtonClick = function( e ) {
this.$dialog.fadeOut( 'fast' );
this.$surface.find( '.ve-ce-documentNode' ).focus();
};
/**
* ...
*
@ -133,6 +176,7 @@ ve.init.ViewPageTarget.prototype.onLoad = function( error, dom ) {
if ( error ) {
// TODO: Error handling in the UI
} else {
this.edited = false;
this.setUpSurface( dom );
this.$surface.find( '.ve-ce-documentNode' ).focus();
}
@ -165,6 +209,7 @@ ve.init.ViewPageTarget.prototype.setUpSurface = function( dom ) {
// Initialize surface
this.$surface.appendTo( this.$content );
this.surface = new ve.Surface( this.$surface, dom, this.surfaceOptions );
this.surface.getModel().on( 'transact', this.proxiedOnSurfaceModelTransact );
// Transplant the toolbar
this.$toolbar = this.$surface.find( '.es-toolbar-wrapper' );
this.$heading
@ -180,13 +225,21 @@ ve.init.ViewPageTarget.prototype.setUpSurface = function( dom ) {
.find( '.es-modes' )
.append(
$( '<div></div>' )
.addClass( 've-init-viewPageTarget-button ve-init-viewPageTarget-saveButton' )
.addClass(
've-init-viewPageTarget-button ' +
've-init-viewPageTarget-button-disabled ' +
've-init-viewPageTarget-saveButton'
)
.append(
$( '<span class="ve-init-viewPageTarget-saveButton-label"></span>' )
.text( mw.msg( 'savearticle' ) )
)
.append( $( '<span class="ve-init-viewPageTarget-saveButton-icon"></span>' ) )
.click( ve.proxy( function() { $(this).fadeIn( 'fast' ); }, this.$dialog ) )
.mousedown( function( e ) {
e.preventDefault();
return false;
} )
.click( ve.proxy( this.onSaveButtonClick, this ) )
);
// Set up save dialog
this.$dialog
@ -194,7 +247,7 @@ ve.init.ViewPageTarget.prototype.setUpSurface = function( dom ) {
.text( mw.msg( 'tooltip-save' ) )
.end()
.find( '.ve-init-viewPageTarget-saveDialog-closeButton' )
.click( ve.proxy( function() { $(this).fadeOut( 'fast' ); }, this.$dialog ) )
.click( ve.proxy( this.onSaveDialogCloseButtonClick, this ) )
.end()
.find( '.ve-init-viewPageTarget-saveDialog-editSummary-label' )
.text( mw.msg( 'summary' ) )