mediawiki-extensions-Visual.../modules/ve-mw/ui/tools/ve.ui.MWEducationPopupTool.js
Alex Monk 6341c4a3b5 Apply same hide/show logic to both education popup dots
Bug: T117627
Change-Id: Icbde23f396935b7f6275ed89ce264ce5e49ebf6a
2015-11-04 15:56:40 +00:00

132 lines
3.8 KiB
JavaScript

/*!
* VisualEditor UserInterface MediaWiki EducationPopupTool class.
*
* @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* UserInterface education popup tool. Used as a mixin to show a pulsating blue dot
* which, when you click, reveals a popup with useful information.
*
* @class
*
* @constructor
* @param {Object} [config] Configuration options
*/
ve.ui.MWEducationPopupTool = function VeUiMwEducationPopupTool( config ) {
var popupCloseButton, $popupContent,
usePrefs = !mw.user.isAnon(),
prefSaysShow = usePrefs && !mw.user.options.get( 'visualeditor-hideusered' ),
tool = this;
config = config || {};
if (
ve.init.target.dummyToolbar ||
(
!prefSaysShow &&
!(
!usePrefs &&
localStorage.getItem( 've-hideusered' ) === null &&
$.cookie( 've-hideusered' ) === null
)
)
) {
return;
}
popupCloseButton = new OO.ui.ButtonWidget( {
label: ve.msg( 'visualeditor-educationpopup-dismiss' ),
flags: [ 'progressive', 'primary' ],
classes: [ 've-ui-educationPopup-dismiss' ]
} );
popupCloseButton.connect( this, { click: 'onPopupCloseButtonClick' } );
$popupContent = $( '<div>' ).append(
$( '<div>' ).addClass( 've-ui-educationPopup-header' ),
$( '<h3>' ).text( config.title ),
$( '<p>' ).text( config.text ),
popupCloseButton.$element
);
this.popup = new OO.ui.PopupWidget( {
$content: $popupContent,
padded: true,
width: 300
} );
this.$pulsatingDot = $( '<div>' ).addClass( 've-ui-pulsatingDot' );
this.$stillDot = $( '<div>' ).addClass( 've-ui-stillDot' );
this.$element
.addClass( 've-ui-educationPopup' )
.append( this.popup.$element, this.$stillDot, this.$pulsatingDot );
setTimeout( function () {
var radius = tool.$pulsatingDot.width() / 2;
tool.$pulsatingDot.css( {
left: tool.$element.width() / 2 - radius,
top: tool.$element.height() - radius
} );
tool.$stillDot.css( {
left: tool.$element.width() / 2 - radius / 3,
top: tool.$element.height() - radius / 3
} );
}, 0 );
};
/* Inheritance */
OO.initClass( ve.ui.MWEducationPopupTool );
/* Methods */
/**
* Click handler for the popup close button
*/
ve.ui.MWEducationPopupTool.prototype.onPopupCloseButtonClick = function () {
this.popup.toggle( false );
this.setActive( false );
ve.init.target.openEducationPopupTool = undefined;
};
/**
* Overrides Tool's onSelect to bring up popup where necessary
*/
ve.ui.MWEducationPopupTool.prototype.onSelect = function () {
var usePrefs = !mw.user.isAnon(),
prefSaysShow = usePrefs && !mw.user.options.get( 'visualeditor-hideusered' );
// Beware: this method is called even if the constructor bailed after checking
// the user preference / cookie / localStorage. In that case, this.$pulsatingDot,
// this.popup and other properties will not be set.
if ( this.$pulsatingDot && this.$pulsatingDot.is( ':visible' ) ) {
if ( ve.init.target.openEducationPopupTool ) {
ve.init.target.openEducationPopupTool.popup.toggle( false );
ve.init.target.openEducationPopupTool.setActive( false );
ve.init.target.openEducationPopupTool.$pulsatingDot.show();
ve.init.target.openEducationPopupTool.$stillDot.show();
}
ve.init.target.openEducationPopupTool = this;
this.$pulsatingDot.hide();
this.$stillDot.hide();
this.popup.toggle( true );
this.popup.$element.css( {
left: this.$element.width() / 2,
top: this.$element.height()
} );
if ( prefSaysShow ) {
new mw.Api().saveOption( 'visualeditor-hideusered', 1 );
mw.user.options.set( 'visualeditor-hideusered', 1 );
} else if ( !usePrefs ) {
try {
localStorage.setItem( 've-hideusered', 1 );
} catch ( e ) {
$.cookie( 've-hideusered', 1, { path: '/', expires: 30 } );
}
}
} else if ( !this.popup || !this.popup.isVisible() ) {
return this.constructor.super.prototype.onSelect.apply( this, arguments );
}
};