wikimedia/mediawiki-extensions-CodeMirror
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror synced 2024-11-23 22:03:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Popup: Use built-in features of PopupWidget instead of custom CSS

Browse source 
* Use OOUI buttons for the actions.
* Make the widget wider to accommodate longer titles in
  different languages.
* Don't show if CM already enabled

Change-Id: Ibde461a99929565c15b5e7c5ef3ad88e163fba05
This commit is contained in:
Ed Sanders 2017-07-20 15:28:40 +01:00 committed by Jforrester
parent 60ab939b26
commit 7fe9e2e762
2 changed files with 74 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
resources/ext.CodeMirror.js
View file

@ -1,6 +1,6 @@
( function ( mw, $ ) {
var origTextSelection, useCodeMirror, codeMirror, api, originHooksTextarea,
wikiEditorToolbarEnabled, popupStatus = null, popup = false;
wikiEditorToolbarEnabled;
if ( mw.config.get( 'wgCodeEditorCurrentLanguage' ) ) { // If the CodeEditor is used then just exit;
return;
@ -388,58 +388,74 @@
/**
* Add a popup for first time users (T165003)
*
* If popup hasn't been shown before, show popup and add a localStorage entry.
* check it before showing popup in future.
*/
function addPopup() {
var $content =
/**
*/
function handlePopup() {
var yesButton, noButton, $title, $content, popup;
// If popup has previously been dismissed, don't show again.
if ( mw.storage.get( 'codemirror-try-popup' ) ) {
return;
}
mw.storage.set( 'codemirror-try-popup', 1 );
yesButton = new OO.ui.ButtonWidget( {
label: mw.msg( 'codemirror-popup-btn-yes' ),
flags: [ 'primary', 'progressive' ]
} );
noButton = new OO.ui.ButtonWidget( {
label: mw.msg( 'codemirror-popup-btn-no' ),
flags: [ 'destructive' ]
} );
$title =
$( '<span>' ).append(
'{ ',
$( '<span>' ).addClass( 'codemirror-popup-color-blue' ).text( mw.msg( 'codemirror-popup-syntax' ) ),
' ',
document.createTextNode( mw.msg( 'codemirror-popup-highlighting' ) ),
' }'
);
$content =
$( '<div>' ).addClass( 'codemirror-popup-div' ).append(
$( '<div>' ).addClass( 'codemirror-popup-top' ).append(
'{ ',
$( '<span>' ).addClass( 'codemirror-popup-color-blue' ).text( mw.msg( 'codemirror-popup-syntax' ) ),
' ',
document.createTextNode( mw.msg( 'codemirror-popup-highlighting' ) ),
' }'
),
$( '<div>' ).addClass( 'codemirror-popup-text' ).text( mw.msg( 'codemirror-popup-desc' ) ),
$( '<div>' ).addClass( 'codemirror-popup-btn codemirror-popup-btn-yes' ).text( mw.msg( 'codemirror-popup-btn-yes' ) ),
$( '<div>' ).addClass( 'codemirror-popup-btn codemirror-popup-btn-no' ).text( mw.msg( 'codemirror-popup-btn-no' ) )
yesButton.$element,
noButton.$element
);
popup = new OO.ui.PopupWidget( {
head: true,
label: $title,
classes: [ 'codemirror-popup' ],
$content: $content,
containerPadding: 80,
$floatableContainer: $( '#mw-editbutton-codemirror' ),
padded: false,
width: 215
padded: true,
width: 300
} );
// Add our popup to the body, it will find its correct position using $floatableContainer
$( 'body' ).append( popup.$element );
// Events
yesButton.on( 'click', function () {
if ( !codeMirror ) {
switchCodeMirror();
}
popup.toggle( false );
} );
noButton.on( 'click', function () {
if ( codeMirror ) {
switchCodeMirror();
}
popup.toggle( false );
} );
// To display the popup, toggle the visibility to 'true'
popup.toggle( true );
}
/**
* Handle popup. If popup hasn't been shown before, show popup and add a localStorage entry.
* check it before showing popup in future.
*/
function handlePopup() {
popupStatus = mw.storage.get( 'codemirror-try-popup' );
// If popup entry isn't in local storage, lets show them the popup
if ( !popupStatus ) {
mw.storage.set( '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 );
} );
}
}
// If view is in edit mode, add the button to the toolbar.
if ( $.inArray( mw.config.get( 'wgAction' ), [ 'edit', 'submit' ] ) !== -1 ) {
// Check if the user is using the enhanced editing toolbar (supplied by the
@ -468,10 +484,14 @@
} );
} );
}
// Wait for DOM before loading our popup
$( function () {
window.setTimeout( function () { handlePopup(); }, 500 );
} );
// Don't show popup if CM already enabled
if ( !useCodeMirror ) {
// Wait for DOM before loading our popup
$( function () {
window.setTimeout( function () { handlePopup(); }, 500 );
} );
}
}
// enable CodeMirror

34
resources/modules/popup.less
View file

@ -1,31 +1,23 @@
.codemirror-popup-div {
padding: 14px;
.codemirror-popup {
text-align: center;
font-size: 14px;
font-size: 12.8px;
.codemirror-popup-top {
font-size: 16px;
font-weight: bolder;
margin-bottom: 10px;
.oo-ui-popupWidget-head {
font-weight: bold;
float: none;
display: inline-block;
> .oo-ui-labelElement-label {
font-size: 14px;
margin-left: 2.5em;
}
}
.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;
}
.codemirror-popup-text {
margin-bottom: 1em;
}
}