wikimedia/mediawiki-extensions-Popups
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Popups synced 2024-11-28 01:10:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "settings: Add help dialog"

Browse source
This commit is contained in:
jenkins-bot 2015-01-21 16:47:19 +00:00 committed by Gerrit Code Review
parent 4685baed68 9ab483ec6f
commit 72362616a2
10 changed files with 144 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Popups.hooks.php
View file

@ -91,6 +91,8 @@ class PopupsHooks {
"popups-settings-save",
"popups-settings-cancel",
"popups-settings-enable",
"popups-settings-help",
"popups-settings-help-ok",
),
'remoteExtPath' => 'Popups',
'localBasePath' => __DIR__,

8
i18n/en.json
View file

@ -7,14 +7,16 @@
"popups-last-edited": "Last edited $1",
"popups-redirects": "redirects to <h3>$1</h3>",
"popups-settings-title": "Page preview",
"popups-settings-description": "This tool lets you preview blue links and references",
"popups-settings-description": "This tool lets you preview blue links and references.",
"popups-settings-option-simple": "Simple",
"popups-settings-option-simple-description": "See the lead sentence of a page and a preview image. This is recommended for readers",
"popups-settings-option-simple-description": "See the lead sentence of a page and a preview image. This is recommended for readers.",
"popups-settings-option-advanced": "Advanced",
"popups-settings-option-advanced-description": "See link previews and access editing function menus. This is used by many editors.",
"popups-settings-option-off": "Disable previews",
"popups-settings-option-off-description": "You can change this setting using the link in the footer of the page",
"popups-settings-option-off-description": "You can change this setting using the link in the footer of the page.",
"popups-settings-save": "Save",
"popups-settings-help-ok": "OK",
"popups-settings-cancel": "Cancel",
"popups-settings-help": "You can turn previews back on using a link in the footer of the page.",
"popups-settings-enable": "Enable previews"
}

2
i18n/qqq.json
View file

@ -18,6 +18,8 @@
"popups-settings-option-off": "Title to turn off hovercards option.\n\nSee also:\n* {{msg-mw|Popups-settings-enable}}",
"popups-settings-option-off-description": "Description for turn off hovercards option",
"popups-settings-save": "Save buttton for the setting's dialoag\n{{Identical|Save}}",
"popups-settings-help-okay": "Button to close help dialog",
"popups-settings-cancel": "Cancel button for the setting's dialog\n{{Identical|Cancel}}",
"popups-settings-help": "Help text explaining how to re-enable previews",
"popups-settings-enable": "Link on the footer to enable hovercards if its disabled.\n\nSee also:\n* {{msg-mw|Popups-settings-option-off}}"
}

90
resources/ext.popups.settings.js
View file

@ -14,10 +14,11 @@
settings.navPopEnabled = ( typeof disablePopups !== 'undefined' );
/**
* The settings' dialog's section element
* The settings' dialog's section element.
* Defined in settings.open
* @property $element
*/
settings.$element = $( '<section> ' ).attr( 'id', 'mwe-popups-settings' );
settings.$element = null;
/**
* Renders the relevant form and labels in the settings dialog
@ -31,29 +32,65 @@
$title = $( '<header>' ).append( $closeIcon, $titleText ),
$description = $( '<p>' ).text( mw.message( 'popups-settings-description' ).text() ),
$radioGroup = $( '<radiogroup>' ),
$cancelButton = $( '<button>' ).addClass( 'mw-ui-button mw-ui-quiet' ).text( mw.message( 'popups-settings-cancel' ).text() ).attr( 'type', 'button' ),
$saveButton = $( '<button>' ).addClass( 'mw-ui-button mw-ui-constructive' ).text( mw.message( 'popups-settings-save' ).text() ).attr( 'type', 'button' ),
$actions = $( '<div>' ).addClass( 'mwe-popups-settings-actions' ).append( $cancelButton, $saveButton ),
$cancelButton = $( '<button>' )
.addClass( 'mw-ui-button mw-ui-quiet' )
.text( mw.message( 'popups-settings-cancel' ).text() )
.attr( 'type', 'button' ),
$saveButton = $( '<button>' )
.addClass( 'mw-ui-button mw-ui-constructive' )
.text( mw.message( 'popups-settings-save' ).text() )
.attr( 'type', 'button' ),
$actions = $( '<div>' )
.addClass( 'mwe-popups-settings-actions' )
.append( $cancelButton, $saveButton ),
$okayButton = $( '<button>' )
.addClass( 'mw-ui-button mw-ui-constructive' )
.text( mw.message( 'popups-settings-help-ok' ).text() )
.attr( 'type', 'button' ),
$help = $( '<div>' )
.attr( 'id', 'mwe-popups-settings-help' )
.append(
$( '<p>' ).text( mw.message( 'popups-settings-help' ).text() ),
$( '<div>' ).addClass( 'mwe-popups-settings-help-image' ),
$( '<div>' ).addClass( 'mwe-popups-settings-actions' ).append( $okayButton )
)
.hide(),
$form = $( '<form>' ).append( $radioGroup, $actions ),
$main = $( '<main>' ).append( $description, $form ),
options = [
[ mw.message( 'popups-settings-option-simple' ).text(), mw.message( 'popups-settings-option-simple-description' ).text(), 'hovercard.svg' ],
[ mw.message( 'popups-settings-option-advanced' ).text(), mw.message( 'popups-settings-option-advanced-description' ).text(), 'navpop.svg' ],
[ mw.message( 'popups-settings-option-off' ).text(), mw.message( 'popups-settings-option-off-description' ).text() ]
];
$main = $( '<main>' ).attr( 'id', 'mwe-popups-settings-form' ).append( $description, $form ),
options = {
'simple': [
mw.message( 'popups-settings-option-simple' ).text(),
mw.message( 'popups-settings-option-simple-description' ).text(),
'hovercard.svg'
],
'advanced': [
mw.message( 'popups-settings-option-advanced' ).text(),
mw.message( 'popups-settings-option-advanced-description' ).text(),
'navpop.svg'
],
'off': [
mw.message( 'popups-settings-option-off' ).text(),
mw.message( 'popups-settings-option-off-description' ).text()
]
};
$( $closeIcon ).add( $cancelButton ).click( settings.close );
$saveButton.click( settings.save );
$okayButton.click( function () {
settings.close();
location.reload();
} );
$radioGroup.append( settings.renderOption( 0, options[ 0 ], true ) );
$radioGroup.append( settings.renderOption( 'simple', options.simple, true ) );
if ( settings.navPopEnabled ) {
$radioGroup.append( settings.renderOption( 1, options[ 1 ] ) );
$radioGroup.append( settings.renderOption( 'advanced', options.advanced ) );
}
$radioGroup.append( settings.renderOption( 2, options[ 2 ] ) );
$radioGroup.append( settings.renderOption( 'off', options.off ) );
settings.$element = $( '<section> ' ).attr( 'id', 'mwe-popups-settings' );
settings.$element
.hide()
.append( $title, $main );
.append( $title, $main, $help );
$( 'body' ).append( settings.$element );
};
@ -103,15 +140,15 @@
*/
settings.save = function () {
var v = $('input[name=mwe-popups-setting]:checked','#mwe-popups-settings').val();
if ( v === '0' ) {
if ( v === 'simple' ) {
$.jStorage.set( 'mwe-popups-enabled', 'true' );
location.reload();
settings.close();
} else {
$.jStorage.set( 'mwe-popups-enabled', 'false' );
location.reload();
$( '#mwe-popups-settings-form' ).hide();
$( '#mwe-popups-settings-help' ).show();
}
settings.close();
};
/**
@ -126,6 +163,10 @@
$( 'body' ).append( $( '<div>' ).addClass( 'mwe-popups-overlay' ) );
if ( !settings.$element ) {
settings.render();
}
settings.$element
.show()
.css( 'left', ( w - 600 ) / 2 )
@ -135,13 +176,19 @@
};
/**
* Close the setting dialoag and remove the overlay
* Close the setting dialoag and remove the overlay.
* If the close button is clicked on the help dialog
* save the setting and reload the page.
*
* @method close
*/
settings.close = function () {
if ( $( '#mwe-popups-settings-help' ).is( ':visible' ) ) {
location.reload();
} else {
$( '.mwe-popups-overlay' ).remove();
settings.$element.hide();
}
};
/**
@ -173,9 +220,6 @@
$footer.append( $setting );
};
settings.render();
$( function () {
if( !mw.popups.enabled ) {
settings.addFooterLink();

36
resources/ext.popups.settings.less
View file

@ -1,3 +1,5 @@
@import "mediawiki.mixins.less";
#mwe-popups-settings {
position: fixed;
z-index: 1000;
@ -92,6 +94,37 @@
font-weight: 100;
}
}
}
}
}
#mwe-popups-settings-help {
font-size: 18px;
font-weight: 800;
margin: 50px;
margin-bottom: 20px;
margin-right: 0;
p {
margin-right: 150px;
}
div.mwe-popups-settings-help-image {
margin-left: -55px;
margin-top: 20px;
margin-bottom: 50px;
background: #eee;
height: 65px;
width: 450px;
.background-image-svg( "footer-ltr.svg", "footer-ltr.png" );
background-position: center;
background-repeat: no-repeat;
}
}
.rtl #mwe-popups-settings-help div.mwe-popups-settings-help-image {
.background-image-svg( "footer-rtl.svg", "footer-rtl.png" );
}
.mwe-popups-settings-actions {
clear: both;
@ -99,9 +132,6 @@
margin: 10px;
margin-bottom: 20px;
}
}
}
}
.mwe-popups-overlay {
background: rgba( 0, 0, 0, 0.3 );

BIN
resources/footer-ltr.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 288 B

14
resources/footer-ltr.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="405px" height="38px" viewBox="0 0 405 38" enable-background="new 0 0 405 38" xml:space="preserve">
<g>
<rect y="13" opacity="0.5" fill="#3366BB" width="73" height="12"/>
<rect x="84" y="13" opacity="0.5" fill="#3366BB" width="43" height="12"/>
<rect x="214" y="13" opacity="0.5" fill="#3366BB" width="43" height="12"/>
<rect x="138" y="13" opacity="0.5" fill="#3366BB" width="63" height="12"/>
<rect x="270" fill="#FFFFFF" width="135" height="38"/>
<rect x="282" y="13" fill="#3366BB" width="111" height="12"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 911 B

BIN
resources/footer-rtl.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 303 B

14
resources/footer-rtl.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="405px" height="38px" viewBox="0 0 405 38" enable-background="new 0 0 405 38" xml:space="preserve">
<g>
<rect x="332" y="13" opacity="0.5" fill="#3366BB" width="73" height="12"/>
<rect x="278" y="13" opacity="0.5" fill="#3366BB" width="43" height="12"/>
<rect x="148" y="13" opacity="0.5" fill="#3366BB" width="43" height="12"/>
<rect x="204" y="13" opacity="0.5" fill="#3366BB" width="63" height="12"/>
<rect x="0" y="0" fill="#FFFFFF" width="135" height="38"/>
<rect x="12" y="13" fill="#3366BB" width="111" height="12"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 923 B