Niharika29 has uploaded a new change for review. (
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 resources/ext.CodeMirror.js
A resources/modules/popup.css
4 files changed, 104 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/CodeMirror
refs/changes/00/361600/1
diff --git a/CodeMirror.hooks.php b/CodeMirror.hooks.php
index 8238fa1..921edf3 100644
--- a/CodeMirror.hooks.php
+++ b/CodeMirror.hooks.php
@@ -23,7 +23,6 @@
ExtensionRegistry::getInstance()->isLoaded(
'BetaFeatures' ) &&
BetaFeatures::isFeatureEnabled(
$context->getUser(), 'codemirror-syntax-highlight' );
}
-
return $isEnabled;
}
@@ -124,6 +123,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 cc62933..f610a9c 100644
--- a/extension.json
+++ b/extension.json
@@ -28,13 +28,15 @@
"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.css"
],
"messages": [
"codemirror-toggle-label"
diff --git a/resources/ext.CodeMirror.js b/resources/ext.CodeMirror.js
index 7f766dd..5b4726d 100644
--- a/resources/ext.CodeMirror.js
+++ b/resources/ext.CodeMirror.js
@@ -9,7 +9,9 @@
// CodeMirror get's disabled.
origTextSelection = $.fn.textSelection;
useCodeMirror = mw.user.options.get( 'usecodemirror' ) > 0;
+
api = new mw.Api();
+ popup = null;
originHooksTextarea = $.valHooks.textarea;
// The WikiEditor extension exists the WikiEditor beta toolbar is used
by the user
wikiEditorToolbarEnabled = !!mw.loader.getState( 'ext.wikiEditor' ) &&
@@ -385,12 +387,41 @@
} );
}
+ /**
+ * Add a popup for first time users (T165003)
+ *
+ * "<div id='popup-no-btn'>" + "No, thank you" + "</div>"
+ */
+ function addPopup() {
+ $content = "<div id='popup-div'>" +
+ "<div id='popup-top'>" + "{ <span
id='popup-color-blue'>Syntax</span> Highlighting }" + "</div>" +
+ "<div id='popup-text'>" + "Syntax highlighting will
help you easily distinguish different parts of your edit by color coding them"
+ "</div>" +
+ "<div id='popup-yes-btn'>" + "Try it" + "</div>" +
+ "<div id='popup-no-btn'>" + "No, thank you" + "</div>" +
+ "</div>";
+ this.popup = new OO.ui.PopupWidget( {
+ $content: $( $content ),
+ containerPadding: 80,
+ $floatableContainer: $( '#mw-editbutton-codemirror' ),
+ padded: false,
+ width: 205
+ } );
+ // Add our popup to the body, it will find its correct position
using $floatableContainer
+ $( 'body' ).append( this.popup.$element );
+
+ // To display the popup, toggle the visibility to 'true'
+ this.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 +433,33 @@
}
} );
// We don't know when button will be added,
wait until the document is ready to update it
- $( function () { updateToolbarButton(); } );
+ $( function () {
+ updateToolbarButton();
+ // See if we need the popup and add it
if we do
+ try {
+ // 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' );
+ } catch ( e ) {
+ popupStatus = false;
+ }
+ // If popup entry isn't in local
storage, lets show them the popup
+ if ( !popupStatus ) {
+ try {
+ localStorage.setItem(
'codemirror-try-popup', 1 );
+ addPopup();
+ $( '#popup-yes-btn'
).click( function() {
+
switchCodeMirror();
+ popup.toggle(
false );
+ } );
+ $( '#popup-no-btn'
).click( function() {
+ popup.toggle(
false );
+ } );
+ } catch ( e ) {
+ // No local storage or
local storage full, don't show popup
+ }
+ }
+ } );
} );
}
}
@@ -415,4 +472,5 @@
enableCodeMirror();
}
}
+
}( mediaWiki, jQuery ) );
diff --git a/resources/modules/popup.css b/resources/modules/popup.css
new file mode 100644
index 0000000..c75fbf8
--- /dev/null
+++ b/resources/modules/popup.css
@@ -0,0 +1,38 @@
+.codemirror-popup {
+ position: absolute;
+ z-index: 999999999;
+}
+
+#popup-div {
+ padding: 14px;
+ text-align: center;
+ font-size: 14px;
+}
+
+#popup-top {
+ font-size: 16px;
+ font-weight: 700;
+ margin-bottom: 10px;
+}
+
+#popup-color-blue {
+ color: dodgerblue;
+}
+
+#popup-yes-btn {
+ background-color: royalblue;
+ color: #ffffff;
+ border-radius: 5px;
+ width: 80px;
+ margin: auto;
+ margin-top: 10px;
+ padding: 5px;
+ cursor: pointer;
+}
+
+#popup-no-btn {
+ font-size: 14px;
+ margin-top: 10px;
+ font-weight: 600;
+ cursor: pointer;
+}
--
To view, visit https://gerrit.wikimedia.org/r/361600
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I545a57bdb273ab6906711e2d65dc029293ecc02a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/CodeMirror
Gerrit-Branch: master
Gerrit-Owner: Niharika29 <nko...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
