mediawiki-extensions-Visual.../modules/ve-mw/ui/widgets/ve.ui.MWEducationPopupWidget.js

134 lines
3.8 KiB
JavaScript
Raw Normal View History

/*!
* VisualEditor UserInterface MediaWiki EducationPopup class.
*
* @copyright See AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* UserInterface education popup.
*
* Shows a pulsating blue dot which, when you click,
* reveals a popup with useful information.
*
* @class
*
* @constructor
* @extends OO.ui.Widget
* @param {jQuery} $target Element to attach to
* @param {Object} config Configuration options
* @cfg {string} popupTitle
* @cfg {string|jQuery} popupText
* @cfg {string} [popupImage] Popup image class
* @cfg {string} [trackingName]
*/
ve.ui.MWEducationPopupWidget = function VeUiMwEducationPopup( $target, config ) {
config = config || {};
// HACK: Do not display on platforms other than desktop
if ( !( ve.init.mw.DesktopArticleTarget && ve.init.target instanceof ve.init.mw.DesktopArticleTarget ) ) {
return;
}
// Do not display if the user already acknowledged the popups
if ( !mw.libs.ve.shouldShowEducationPopups() ) {
return;
}
// Parent method
ve.ui.MWEducationPopupWidget.super.call( this, config );
// Properties
this.$target = $target;
this.popupCloseButton = new OO.ui.ButtonWidget( {
label: ve.msg( 'visualeditor-educationpopup-dismiss' ),
flags: [ 'progressive', 'primary' ],
classes: [ 've-ui-educationPopup-dismiss' ]
} );
this.trackingName = config.trackingName;
this.$pulsatingDot = $( '<div>' ).addClass( 'mw-pulsating-dot' );
var $popupContent = $( '<div>' ).append(
$( '<h3>' ).text( config.popupTitle ),
// eslint-disable-next-line no-jquery/no-append-html
$( '<p>' ).append(
config.popupText instanceof $ ?
config.popupText :
document.createTextNode( config.popupText )
),
this.popupCloseButton.$element
);
ve.targetLinksToNewWindow( $popupContent[ 0 ] );
if ( config.popupImage ) {
$popupContent.prepend(
// The following classes can be generated here:
// * ve-ui-educationPopup-image-link
// * others generated by extensions
$( '<div>' ).addClass( 've-ui-educationPopup-image ve-ui-educationPopup-image-' + config.popupImage )
);
}
this.popup = new OO.ui.PopupWidget( {
$floatableContainer: this.$target,
$content: $popupContent,
padded: true,
width: 300
} );
this.onTargetMouseDownHandler = this.onTargetMouseDown.bind( this );
// Events
this.$target.on( 'mousedown', this.onTargetMouseDownHandler );
this.popupCloseButton.connect( this, { click: 'onPopupCloseButtonClick' } );
// DOME
this.$element.addClass( 've-ui-educationPopup' ).append( this.$pulsatingDot, this.popup.$element );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWEducationPopupWidget, OO.ui.Widget );
/* Methods */
/**
* Handle mouse down events on the handle
*
* @param {jQuery.Event} e
* @return {boolean|undefined}
*/
ve.ui.MWEducationPopupWidget.prototype.onTargetMouseDown = function () {
if ( ve.init.target.openEducationPopup ) {
ve.init.target.openEducationPopup.popup.toggle( false );
ve.init.target.openEducationPopup.$pulsatingDot.removeClass( 'oo-ui-element-hidden' );
}
ve.init.target.openEducationPopup = this;
this.$pulsatingDot.addClass( 'oo-ui-element-hidden' );
this.popup.toggle( true );
this.popupCloseButton.focus();
if ( this.trackingName ) {
ve.track( 'activity.' + this.trackingName + 'EducationPopup', { action: 'show' } );
}
return false;
};
/**
* Click handler for the popup close button
*/
ve.ui.MWEducationPopupWidget.prototype.onPopupCloseButtonClick = function () {
this.$target.off( 'mousedown', this.onTargetMouseDownHandler );
this.popup.toggle( false );
ve.init.target.openEducationPopup = null;
mw.libs.ve.stopShowingEducationPopups();
var mouseLeft = { which: OO.ui.MouseButtons.LEFT };
this.$target
.trigger( $.Event( 'mousedown', mouseLeft ) )
.trigger( $.Event( 'mouseup', mouseLeft ) )
.trigger( $.Event( 'click', mouseLeft ) );
};