jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/361600 )
Change subject: Show a popup for first time Codemirror users
......................................................................
Show a popup for first time Codemirror users
Bug: T165003
Change-Id: I545a57bdb273ab6906711e2d65dc029293ecc02a
---
M CodeMirror.hooks.php
M extension.json
M i18n/en.json
M i18n/qqq.json
M resources/ext.CodeMirror.js
A resources/modules/popup.less
6 files changed, 112 insertions(+), 9 deletions(-)
Approvals:
jenkins-bot: Verified
Kaldari: Looks good to me, approved
diff --git a/CodeMirror.hooks.php b/CodeMirror.hooks.php
index 34364fa..9c88320 100644
--- a/CodeMirror.hooks.php
+++ b/CodeMirror.hooks.php
@@ -127,6 +127,7 @@
*/
public static function onBeforePageDisplay( OutputPage &$out, Skin
&$skin ) {
if ( self::isCodeMirrorEnabled( $out->getContext() ) ) {
+ $out->enableOOUI();
$out->addModules( 'ext.CodeMirror' );
}
}
diff --git a/extension.json b/extension.json
index a24dd9c..db9d5af 100644
--- a/extension.json
+++ b/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": {
diff --git a/i18n/en.json b/i18n/en.json
index 9087119..ee0733b 100644
--- a/i18n/en.json
+++ b/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"
}
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 9496c89..ba7c0c1 100644
--- a/i18n/qqq.json
+++ b/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"
}
diff --git a/resources/ext.CodeMirror.js b/resources/ext.CodeMirror.js
index 7f766dd..62b6b5f 100644
--- a/resources/ext.CodeMirror.js
+++ b/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
- $( '#wpTextbox1' ).on(
'wikiEditor-toolbar-doneInitialSections', addCodeMirrorToWikiEditor );
+ // Add our button
+ 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 ) );
diff --git a/resources/modules/popup.less b/resources/modules/popup.less
new file mode 100644
index 0000000..2cd15ed
--- /dev/null
+++ b/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;
+ }
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/361600
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I545a57bdb273ab6906711e2d65dc029293ecc02a
Gerrit-PatchSet: 13
Gerrit-Project: mediawiki/extensions/CodeMirror
Gerrit-Branch: master
Gerrit-Owner: Niharika29 <[email protected]>
Gerrit-Reviewer: Kaldari <[email protected]>
Gerrit-Reviewer: Niharika29 <[email protected]>
Gerrit-Reviewer: Pastakhov <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
