From 99e31d152fa5945f7f56a9b168cb4dd337f63654 Mon Sep 17 00:00:00 2001 From: Niharika29 Date: Mon, 26 Jun 2017 23:37:48 +0000 Subject: [PATCH] Show a popup for first time Codemirror users Bug: T165003 Change-Id: I545a57bdb273ab6906711e2d65dc029293ecc02a --- CodeMirror.hooks.php | 1 + extension.json | 13 ++++++-- i18n/en.json | 7 +++- i18n/qqq.json | 7 +++- resources/ext.CodeMirror.js | 62 +++++++++++++++++++++++++++++++++--- resources/modules/popup.less | 31 ++++++++++++++++++ 6 files changed, 112 insertions(+), 9 deletions(-) create mode 100644 resources/modules/popup.less diff --git a/CodeMirror.hooks.php b/CodeMirror.hooks.php index 34364fab..9c88320a 100644 --- a/CodeMirror.hooks.php +++ b/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' ); } } diff --git a/extension.json b/extension.json index a24dd9c3..db9d5af1 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 90871195..ee0733b6 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 9496c891..ba7c0c15 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 7f766dd5..62b6b5f4 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 = '
' + + '
{ ' + + mw.msg( 'codemirror-popup-syntax' ) + ' ' + + mw.msg( 'codemirror-popup-highlighting' ) + ' }
' + + '
' + mw.msg( 'codemirror-popup-desc' ) + '
' + + '
' + mw.msg( 'codemirror-popup-btn-yes' ) + '
' + + '
' + mw.msg( 'codemirror-popup-btn-no' ) + '
' + + '
'; + 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 00000000..2cd15edd --- /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; + } + } +}