Andrew-WMDE has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/405730 )

Change subject: [WIP] Show error message in prototype if not all versions have 
been selected
......................................................................

[WIP] Show error message in prototype if not all versions have been selected

Bug: T183363
Change-Id: I3126dcd5bfae77499503701d294d5d5a4ef833ba
---
M modules/GoatTwoColConflict/ext.TwoColConflict.Goat.init.js
M modules/GoatTwoColConflict/ext.TwoColConflict.Goat.less
2 files changed, 88 insertions(+), 24 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/TwoColConflict 
refs/changes/30/405730/1

diff --git a/modules/GoatTwoColConflict/ext.TwoColConflict.Goat.init.js 
b/modules/GoatTwoColConflict/ext.TwoColConflict.Goat.init.js
index 3df9e7b..817fce6 100644
--- a/modules/GoatTwoColConflict/ext.TwoColConflict.Goat.init.js
+++ b/modules/GoatTwoColConflict/ext.TwoColConflict.Goat.init.js
@@ -1,28 +1,73 @@
 ( function ( mw, $ ) {
-       // TODO refactor to avoid this being double in the inits
-       function disableEditButtons() {
-               if ( mw.config.get( 'wgTwoColConflictTestMode' ) ) {
-                       OO.ui.infuse( 'wpTestPreviewWidget' ).setDisabled( true 
);
-                       return;
-               }
-               OO.ui.infuse( 'wpSaveWidget' ).setDisabled( true );
-               OO.ui.infuse( 'wpPreviewWidget' ).setDisabled( true );
-               OO.ui.infuse( 'wpDiffWidget' ).setDisabled( true );
+       function markRowsWithSwitches( $switches ) {
+               var $rowsWithSwitches = $switches.closest( 
'.mw-twocolconflict-goat-row' );
+
+               $rowsWithSwitches.each(
+                       function () {
+                               $( this ).attr( 'incomplete', true );
+                       }
+               );
        }
 
-       function enableEditButtons() {
-               if ( mw.config.get( 'wgTwoColConflictTestMode' ) ) {
-                       OO.ui.infuse( 'wpTestPreviewWidget' ).setDisabled( 
false );
-                       return;
+       function checkForCompletion( event, $btn ) {
+               var $rows = $( '.mw-twocolconflict-goat-view' ).children( 
'.mw-twocolconflict-goat-row' ),
+                       $incompleteRows = false,
+                       $editOptionsSection = $btn.closest( '.editOptions' ),
+                       $msgSection = $editOptionsSection.find( 
'.mw-twocolconflict-goat-row-incomplete-error-text' ),
+                       $msg;
+
+               $rows.each(
+                       function () {
+                               if ( $( this ).attr( 'incomplete' ) === 'true' 
) {
+                                       $( this ).addClass( 
'mw-twocolconflict-goat-row-incomplete' );
+                                       $incompleteRows = true;
+                               } else {
+                                       $( this ).removeClass( 
'mw-twocolconflict-goat-row-incomplete' );
+                               }
+                       } );
+
+               if ( $incompleteRows ) {
+                       $msg = $( '<div></div>' )
+                               .addClass( 
'mw-twocolconflict-goat-row-incomplete-error-text' );
+
+                       $msg.append(
+                               $( '<span></span>' ).text( 'There are 
paragraphs you didn\'t choose a version for. Please select one for each 
paragraph.' )
+                       );
+
+                       $msg.append(
+                               $( '<a></a>' ).text( 'Show me unselected 
paragraphs -->' ).on( 'click', function () {
+                                       document.getElementsByClassName( 
'mw-twocolconflict-goat-row-incomplete' )[ 0 ].scrollIntoView();
+                               } )
+                       );
+
+                       if ( $msgSection.length === 0 ) {
+                               $editOptionsSection.append( $msg );
+                       } else {
+                               $msgSection.html( $msg );
+                       }
+
+                       event.preventDefault();
                }
-               OO.ui.infuse( 'wpSaveWidget' ).setDisabled( false );
-               OO.ui.infuse( 'wpPreviewWidget' ).setDisabled( false );
-               OO.ui.infuse( 'wpDiffWidget' ).setDisabled( false );
        }
 
-       function oneOptionPerSwitchIsSelected( $switches ) {
-               return $switches.find( 'input:checked' ).length ===
-                       $switches.find( 'input' ).length / 2;
+       function reConfigureSubmitButton() {
+               if ( mw.config.get( 'wgTwoColConflictTestMode' ) ) {
+                       $( '#wpTestPreviewWidget' ).find( 'input' ).on( 
'click', function ( event ) {
+                               checkForCompletion( event, $( this ) );
+                       } );
+               }
+
+               $( '#wpSaveWidget' ).find( 'input' ).on( 'click', function ( 
event ) {
+                       checkForCompletion( event, $( this ) );
+               } );
+
+               $( '#wpPreviewWidget' ).find( 'input' ).on( 'click', function ( 
event ) {
+                       checkForCompletion( event, $( this ) );
+               } );
+
+               $( '#wpDiffWidget' ).find( 'input' ).on( 'click', function ( 
event ) {
+                       checkForCompletion( event, $( this ) );
+               } );
        }
 
        function buildFinalText( $switches ) {
@@ -155,6 +200,9 @@
                        $radioButtons = $switches.find( 'input' );
                // TODO sync views and textareas when reloading
 
+               markRowsWithSwitches( $switches );
+               reConfigureSubmitButton();
+
                // TODO put into own function
                $radioButtons.prop( 'checked', false );
                $radioButtons.on( 'change', function () {
@@ -182,9 +230,7 @@
                                .removeClass( 'mw-twocolconflict-goat-selected' 
)
                                .addClass( 'mw-twocolconflict-goat-unselected' 
);
 
-                       if ( oneOptionPerSwitchIsSelected( $switches ) ) {
-                               enableEditButtons();
-                       }
+                       $row.attr( 'incomplete', false );
                } );
 
                // TODO this might not be necessary with better CSS
@@ -194,8 +240,6 @@
                        var textToSubmit = buildFinalText( $switches );
                        $( '.mw-twocolconflict-goat-result' ).val( textToSubmit 
);
                } );
-
-               disableEditButtons();
 
                $( '.mw-twocolconflict-goat-editbutton' ).click( function () {
                        saveAndStopCurrentEditing();
diff --git a/modules/GoatTwoColConflict/ext.TwoColConflict.Goat.less 
b/modules/GoatTwoColConflict/ext.TwoColConflict.Goat.less
index 51d5263..622a64e 100644
--- a/modules/GoatTwoColConflict/ext.TwoColConflict.Goat.less
+++ b/modules/GoatTwoColConflict/ext.TwoColConflict.Goat.less
@@ -35,6 +35,24 @@
        min-height: 110px;
 }
 
+.mw-twocolconflict-goat-row-incomplete {
+       background-color: #ffe7e7;
+       color: #ff1c1d;
+       padding: 0 10px 0 10px;
+       border: #ff1c1d solid 1px;
+}
+
+.mw-twocolconflict-goat-row-incomplete-error-text {
+       margin-top: 10px;
+       color: #ff1c1d;
+}
+
+.mw-twocolconflict-goat-row-incomplete-error-text a {
+       text-decoration: underline;
+       color: #ff1c1d;
+       margin-left: 5px;
+}
+
 .mw-twocolconflict-goat-selection {
        margin-top: 14px;
        width: 66px;
@@ -64,6 +82,8 @@
 }
 
 .mw-twocolconflict-goat-column {
+       background-color: white;
+       color: black;
        position: relative;
        margin: 10px 0;
        border-radius: 8px;

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

Gerrit-MessageType: newchange
Gerrit-Change-Id: I3126dcd5bfae77499503701d294d5d5a4ef833ba
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/TwoColConflict
Gerrit-Branch: master
Gerrit-Owner: Andrew-WMDE <andrew.kos...@wikimedia.de>

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

Reply via email to