mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
synced 2024-11-14 17:55:07 +00:00
Merge "Show a popup for first time Codemirror users"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
656415bf0a
|
|
@ -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' );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 ) );
|
||||
|
|
|
|||
31
resources/modules/popup.less
Normal file
31
resources/modules/popup.less
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue