Merge "Show a popup for first time Codemirror users"

CodeMirror.hooks.php

@@ -127,6 +127,7 @@ class CodeMirrorHooks {
 	 */
 	public static function onBeforePageDisplay( OutputPage &$out, Skin &$skin ) {
 		if ( self::isCodeMirrorEnabled( $out->getContext() ) ) {
+			$out->enableOOUI();
 			$out->addModules( 'ext.CodeMirror' );
 		}
 	}

extension.json

@@ -28,16 +28,23 @@
 				"jquery.textSelection",
 				"mediawiki.api",
 				"mediawiki.api.options",
-				"user.options"
+				"user.options",
+				"oojs-ui"
 			],
 			"scripts": [
 				"ext.CodeMirror.js"
 			],
 			"styles": [
-				"ext.CodeMirror.less"
+				"ext.CodeMirror.less",
+				"modules/popup.less"
 			],
 			"messages": [
-				"codemirror-toggle-label"
+				"codemirror-toggle-label",
+				"codemirror-popup-syntax",
+				"codemirror-popup-highlighting",
+				"codemirror-popup-desc",
+				"codemirror-popup-btn-yes",
+				"codemirror-popup-btn-no"
 			]
 		},
 		"ext.CodeMirror.lib": {

i18n/en.json

@@ -7,5 +7,10 @@
 	"codemirror-desc": "Provides syntax highlighting in wikitext editor",
 	"codemirror-toggle-label": "Syntax highlighting",
 	"codemirror-beta-title": "Syntax highlighting",
-	"codemirror-beta-desc": "Syntax highlighting makes editing easier by using color and shade to visually separate article text from the code for links, references and templates."
+	"codemirror-beta-desc": "Syntax highlighting makes editing easier by using color and shade to visually separate article text from the code for links, references and templates.",
+	"codemirror-popup-syntax": "Syntax",
+	"codemirror-popup-highlighting": "Highlighting",
+	"codemirror-popup-desc": "Syntax highlighting will help you easily distinguish different parts of your edit by color coding them.",
+	"codemirror-popup-btn-yes": "Try it",
+	"codemirror-popup-btn-no": "No, thank you"
 }

i18n/qqq.json

@@ -10,5 +10,10 @@
 	"codemirror-desc": "{{desc|name=Code Mirror|url=https://www.mediawiki.org/wiki/Extension:CodeMirror}}\n\nAdditional info: Discription of \"Syntax highlighting\" in wiki\n[[mw:Extension:SyntaxHighlight GeSHi]]",
 	"codemirror-toggle-label": "Title tooltip for button to toggle CodeMirror in the editing toolbar.",
 	"codemirror-beta-title": "Title for syntax highlighting beta feature",
-	"codemirror-beta-desc": "Description for syntax highlight beta feature"
+	"codemirror-beta-desc": "Description for syntax highlight beta feature",
+	"codemirror-popup-syntax": "This message is combined with the message {{msg-mw|codemirror-popup-highlighting}} to form the title \"Syntax Highlighting\" (with the two words having different styling).",
+	"codemirror-popup-highlighting": "This message is combined with the message {{msg-mw|codemirror-popup-syntax}} to form the title \"Syntax Highlighting\" (with the two words having different styling).",
+	"codemirror-popup-desc": "Description of the syntax highlighting feature in the popup",
+	"codemirror-popup-btn-yes": "Text on the button for trying out codemirror",
+	"codemirror-popup-btn-no": "Text on the button for dismissing popup"
 }

resources/ext.CodeMirror.js

@@ -1,5 +1,6 @@
 ( function ( mw, $ ) {
-	var origTextSelection, useCodeMirror, codeMirror, api, originHooksTextarea, wikiEditorToolbarEnabled;
+	var origTextSelection, useCodeMirror, codeMirror, api, originHooksTextarea,
+		wikiEditorToolbarEnabled, popupStatus = null, popup = false;
 
 	if ( mw.config.get( 'wgCodeEditorCurrentLanguage' ) ) { // If the CodeEditor is used then just exit;
 		return;
@@ -385,12 +386,41 @@
 		} );
 	}
 
+	/**
+	 * Add a popup for first time users (T165003)
+	 */
+	function addPopup() {
+		this.popuptext = '<div class=\'codemirror-popup-div\'>' +
+			'<div class=\'codemirror-popup-top\'>{ <span class=\'codemirror-popup-color-blue\'>' +
+			mw.msg( 'codemirror-popup-syntax' ) + '</span> ' +
+			mw.msg( 'codemirror-popup-highlighting' ) + ' }</div>' +
+			'<div class=\'codemirror-popup-text\'>' + mw.msg( 'codemirror-popup-desc' ) + '</div>' +
+			'<div class=\'codemirror-popup-btn codemirror-popup-btn-yes\'>' + mw.msg( 'codemirror-popup-btn-yes' ) + '</div>' +
+			'<div class=\'codemirror-popup-btn codemirror-popup-btn-no\'>' + mw.msg( 'codemirror-popup-btn-no' ) + '</div>' +
+			'</div>';
+		popup = new OO.ui.PopupWidget( {
+			$content: $( this.popuptext ),
+			containerPadding: 80,
+			$floatableContainer: $( '#mw-editbutton-codemirror' ),
+			padded: false,
+			width: 215
+		} );
+		// Add our popup to the body, it will find its correct position using $floatableContainer
+		$( 'body' ).append( popup.$element );
+
+		// To display the popup, toggle the visibility to 'true'
+		popup.toggle( true );
+	}
+
 	/* Check if view is in edit mode and that the required modules are available. Then, customize the toolbar … */
 	if ( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
 		if ( wikiEditorToolbarEnabled ) {
-			// load wikiEditor's toolbar (if not already) and add our button
+			// Add our button
-			$( '#wpTextbox1' ).on( 'wikiEditor-toolbar-doneInitialSections', addCodeMirrorToWikiEditor );
+			if ( useCodeMirror ) {
+				$( addCodeMirrorToWikiEditor );
+			}
 		} else {
+			// Load wikiEditor's toolbar and add our button
 			mw.loader.using( 'mediawiki.toolbar', function () {
 				// If WikiEditor isn't enabled, add CodeMirror button to the default wiki editor toolbar
 				mw.toolbar.addButton( {
@@ -402,7 +432,30 @@
 					}
 				} );
 				// We don't know when button will be added, wait until the document is ready to update it
-				$( function () { updateToolbarButton(); } );
+				$( function () {
+					updateToolbarButton();
+					// Is there already a local storage entry?
+					// If so, we already showed them the popup, don't show again
+					popupStatus = localStorage.getItem( 'codemirror-try-popup' );
+					// If popup entry isn't in local storage, lets show them the popup
+					if ( !popupStatus ) {
+						try {
+							localStorage.setItem( 'codemirror-try-popup', 1 );
+							addPopup();
+							$( '.codemirror-popup-btn-yes' ).click( function () {
+								enableCodeMirror();
+								setCodeEditorPreference( true );
+								updateToolbarButton();
+								popup.toggle( false );
+							} );
+							$( '.codemirror-popup-btn-no' ).click( function () {
+								popup.toggle( false );
+							} );
+						} catch ( e ) {
+							// No local storage or local storage full, don't show popup
+						}
+					}
+				} );
 			} );
 		}
 	}
@@ -415,4 +468,5 @@
 			enableCodeMirror();
 		}
 	}
+
 }( mediaWiki, jQuery ) );

resources/modules/popup.less

@@ -0,0 +1,31 @@
+.codemirror-popup-div {
+	padding: 14px;
+	text-align: center;
+	font-size: 14px;
+
+	.codemirror-popup-top {
+		font-size: 16px;
+		font-weight: bolder;
+		margin-bottom: 10px;
+	}
+
+	.codemirror-popup-color-blue {
+		color: #1e90ff;
+	}
+
+	.codemirror-popup-btn {
+		font-weight: bolder;
+		margin-top: 5px;
+		cursor: pointer;
+
+		&-yes {
+			background-color: #4169e1;
+			color: #fff;
+			border-radius: 5px;
+			width: 80px;
+			margin: auto;
+			margin-top: 5px;
+			padding: 5px;
+		}
+	}
+}