Merge pull request #83 from wikimedia/gray-out-untokenized

Gray out non-tokenized elements

src/App.js

@@ -1,3 +1,4 @@
+import config from './config';
 import InfoBarWidget from './InfoBarWidget';
 import RevisionPopupWidget from './RevisionPopupWidget';
 import wwtController from './Controller';
@@ -63,6 +64,7 @@ class App {
 		// only what's actually inside it
 		this.$content = $( $.parseHTML( html ) ).contents();
 		this.attachContentListeners( this.$content );
+		this.grayOutUntokenizedElements( this.$content );
 	}
 
 	/**
@@ -132,6 +134,28 @@ class App {
 		return out;
 	}
 
+	/**
+	 * Gray out elements that aren't or do not contain tokens.
+	 * See `untokenizedElements` in config.js for selectors of elements we know aren't tokenized.
+	 * @param {jQuery} $content
+	 */
+	grayOutUntokenizedElements( $content ) {
+		// Disable various elements that may not be picked up by the $.each loop below.
+		// This NOT comprehensive, and is comprised of a manually maintained list in config.js
+		$content.find( config.untokenizedElements.join( ',' ) ).addClass( 'wwt-disabled' );
+
+		// Add the class to immediate children of the parser output
+		// that don't contain tokenized elements.
+		$.each( $content, ( _i, el ) => {
+			if ( !$( el ).hasClass( 'editor-token' ) && !$( el ).find( '.editor-token' ).length ) {
+				$( el ).addClass( 'wwt-disabled' )
+					// Remove .wtt-disabled elements added above to prevent compounding opacity.
+					.find( '.wwt-disabled' )
+					.removeClass( 'wwt-disabled' );
+			}
+		} );
+	}
+
 	/**
 	 * Add listeners to:
 	 *   - highlight attribution;

src/config.js

@@ -1,7 +1,14 @@
 const config = {
 	wikiWhoUrl: 'https://www.wikiwho.net/',
 	// Set the output type between the extension and the gadget
-	outputEnvironment: ''
+	outputEnvironment: '',
+	// Elements that we know for sure are never tokenized and should be grayed out.
+	untokenizedElements: [
+		'.citation',
+		'.IPA',
+		'.mw-editsection',
+		'table'
+	]
 };
 
 // Set up a prefix for console outputs

src/less/general.less

@@ -32,3 +32,11 @@ html.wwt-popup body {
 	top: 0;
 	left: 0;
 }
+
+.wwt-disabled {
+	opacity: 0.5;
+
+	&:hover {
+		opacity: 0.8;
+	}
+}