' ).addClass( 'ext-WikiEditor-realtimepreview-onboarding-button' )
- .append( okayButton.$element )
- );
- var popup = new OO.ui.PopupWidget( {
- classes: [ 'ext-WikiEditor-realtimepreview-onboarding-popup' ],
- $floatableContainer: $pulsatingDot,
- $content: $popupContent,
- padded: true,
- width: 300,
- align: 'backwards'
- } );
- this.popup = popup;
-
- // Toggle the popup when the dot is clicked.
- $pulsatingDot.on( 'click', function () {
- popup.toggle();
- } );
- // Close the popup when clicking anywhere outside it or the dot.
- $( 'html' ).on( 'click', function ( event ) {
- var $parents = $( event.target ).closest( '.ext-WikiEditor-realtimepreview-onboarding-popup, .ext-WikiEditor-realtimepreview-onboarding-dot' );
- if ( $parents.length === 0 && popup.isVisible() ) {
- popup.toggle( false );
- }
- } );
-
- // Add the dot and popup to this widget.
- this.$element.append( $pulsatingDot, popup.$element );
-}
-
-OO.inheritClass( OnboardingPopup, OO.ui.Widget );
-
-/**
- * @param {Function} callback
- */
-OnboardingPopup.prototype.setNextCloseAction = function ( callback ) {
- // Only register a next-action if the onboarding popup is not currently shown.
- // For example, if someone clicks the options button, gets the onboarding popup,
- // but then clicks the toolbar button, we don't want to register another next-action.
- if ( this.popup.isVisible() ) {
- return;
- }
- this.nextCloseAction = callback;
-};
-
-/**
- * When clicking the 'okay, got it' button, hide and remove the popup
- * and record the fact that it shouldn't ever open again.
- */
-OnboardingPopup.prototype.onPopupButtonClick = function () {
- // First run any close-action that's been registered.
- if ( this.nextCloseAction instanceof Function ) {
- this.nextCloseAction.call();
- }
- // Hide the popup now and forever.
- this.$element.remove();
- this.popup.$element.remove();
- this.popup = false;
- localStorage.set( this.localStorageName, true );
-};
-
-/**
- * When the Realtime Preview button is clicked, show the onboarding popup (if it's not been dismissed).
- */
-OnboardingPopup.prototype.onPreviewButtonClick = function () {
- if ( !this.popup ) {
- return;
- }
- this.popup.toggle( true );
-};
-
-module.exports = OnboardingPopup;
diff --git a/modules/realtimepreview/OnboardingPopup.less b/modules/realtimepreview/OnboardingPopup.less
deleted file mode 100644
index 83c41e18..00000000
--- a/modules/realtimepreview/OnboardingPopup.less
+++ /dev/null
@@ -1,22 +0,0 @@
-.ext-WikiEditor-realtimepreview-onboarding-dot {
- position: absolute;
- left: 50%;
- top: 100%;
- cursor: pointer;
- z-index: 3;
-}
-
-.ext-WikiEditor-realtimepreview-onboarding-popup {
- .oo-ui-popupWidget-body-padded {
- margin: 12px;
- }
-
- .ext-WikiEditor-image-realtimepreview-onboarding {
- // Height to match the SVG's.
- height: 164px;
- }
-
- .ext-WikiEditor-realtimepreview-onboarding-button {
- margin-top: 24px;
- }
-}
diff --git a/modules/realtimepreview/OnboardingPopup_ltr.svg b/modules/realtimepreview/OnboardingPopup_ltr.svg
deleted file mode 100644
index fe57b931..00000000
--- a/modules/realtimepreview/OnboardingPopup_ltr.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
diff --git a/modules/realtimepreview/OnboardingPopup_rtl.svg b/modules/realtimepreview/OnboardingPopup_rtl.svg
deleted file mode 100644
index 98fd58dd..00000000
--- a/modules/realtimepreview/OnboardingPopup_rtl.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
diff --git a/modules/realtimepreview/RealtimePreview.js b/modules/realtimepreview/RealtimePreview.js
index cd4742d3..f9ec90e5 100644
--- a/modules/realtimepreview/RealtimePreview.js
+++ b/modules/realtimepreview/RealtimePreview.js
@@ -2,7 +2,7 @@ var ResizingDragBar = require( './ResizingDragBar.js' );
var TwoPaneLayout = require( './TwoPaneLayout.js' );
var ErrorLayout = require( './ErrorLayout.js' );
var ManualWidget = require( './ManualWidget.js' );
-var OnboardingPopup = require( './OnboardingPopup.js' );
+var localStorage = require( 'mediawiki.storage' ).local;
/**
* @class
@@ -55,8 +55,6 @@ function RealtimePreview() {
}.bind( this )
} );
- this.onboardingPopup = new OnboardingPopup();
-
// Manual mode widget.
this.manualWidget = new ManualWidget( this, this.reloadButton );
// Set up a property for reducedMotion — useful for customising the UI message.
@@ -106,16 +104,15 @@ RealtimePreview.prototype.getToolbarButton = function ( context ) {
if ( !this.isScreenWideEnough() ) {
this.enabled = false;
this.button.toggle( false );
- this.onboardingPopup.toggle( false );
}
// Hide or show the preview and toolbar button when the window is resized.
$( window ).on( 'resize', this.enableFeatureWhenScreenIsWideEnough.bind( this ) );
- // Add the onboarding popup.
- this.button.connect( this.onboardingPopup, { change: this.onboardingPopup.onPreviewButtonClick } );
+ // Remove the old onboarding-status storage that was discontinued in March 2023.
+ localStorage.remove( 'WikiEditor-RealtimePreview-onboarding-dismissed' );
- return $( '
' ).append( this.button.$element, this.onboardingPopup.$element );
+ return $( '
' ).append( this.button.$element );
};
/**
@@ -256,14 +253,12 @@ RealtimePreview.prototype.enableFeatureWhenScreenIsWideEnough = function () {
var isScreenWideEnough = this.isScreenWideEnough();
if ( !isScreenWideEnough && previewButtonIsVisible ) {
this.button.toggle( false );
- this.onboardingPopup.toggle( false );
this.reloadButton.setDisabled( true );
if ( this.enabled ) {
this.setEnabled( false, false );
}
} else if ( isScreenWideEnough && !previewButtonIsVisible ) {
this.button.toggle( true );
- this.onboardingPopup.toggle( true );
this.reloadButton.setDisabled( false );
// if user preference and realtime disable
if ( !this.enabled && this.getUserPref() ) {