mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeMirror
synced 2024-11-27 23:50:05 +00:00
Popup: Use built-in features of PopupWidget instead of custom CSS
* 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
Jforrester
parent
60ab939b26
commit
7fe9e2e762
|
|
@ -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 =
|
||||
$( '<div>' ).addClass( 'codemirror-popup-div' ).append(
|
||||
$( '<div>' ).addClass( 'codemirror-popup-top' ).append(
|
||||
/**
|
||||
*/
|
||||
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-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,11 +484,15 @@
|
|||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
// 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
|
||||
if ( useCodeMirror ) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue