mediawiki-skins-MinervaNeue/resources/skins.minerva.scripts/talk.js

277 lines
8.2 KiB
JavaScript
Raw Normal View History

/**
* @param {Object} mobile mobileFrontend component library
*/
module.exports = function ( mobile ) {
var
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
SKIN_MINERVA_TALK_SIMPLIFIED_CLASS = 'skin-minerva--talk-simplified',
toast = mobile.toast,
currentPage = mobile.currentPage(),
api = new mw.Api(),
overlayManager = mobile.OverlayManager.getSingleton(),
// FIXME: This dependency shouldn't exist
skin = mobile.Skin.getSingleton(),
talkTitle = currentPage.titleObj.getTalkPage() ?
currentPage.titleObj.getTalkPage().getPrefixedText() :
undefined;
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
/**
* Render a type of talk overlay
* @param {string} className name of talk overlay to create
* @param {Object} talkOptions
* @return {Overlay|JQuery.Promise}
*/
function createOverlay( className, talkOptions ) {
// eslint-disable-next-line no-restricted-properties
var M = mw.mobileFrontend;
return new ( M.require( 'mobile.talk.overlays/' + className ) )( talkOptions );
}
/**
* Cleanup the listeners previously added in initTalkSection
* so that events like clicking on a section) won't cause
* scroll changes/things only needed for the simplified view.
* Also restore ids for table of contents.
*/
function restoreSectionHeadings() {
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
// eslint-disable-next-line no-jquery/no-global-selector
$( '.section-heading' ).each( function () {
var $heading = $( this ),
$headline = $heading.find( '.mw-headline' );
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
$heading.off( 'click.talkSectionOverlay' );
// restore for table of contents:
$headline.attr( 'id', $headline.data( 'id' ) );
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
} );
}
/**
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
* @param {JQuery.Element} $heading
* @param {JQuery.Element} $headline
* @param {string} sectionId
* @return {JQuery.Promise} A promise that rejects if simplified mode is off.
* A promise that resolves to the TalkSectionOverlay otherwise (unless a
* network error occurs).
*/
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
function createTalkSectionOverlay( $heading, $headline, sectionId ) {
if ( !isSimplifiedViewEnabled() ) {
// If the simplified view is not enabled, we don't want to show the
// talk section overlay (e.g. when user clicks on a link in TOC)
return mobile.util.Deferred().reject();
}
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
return createOverlay( 'TalkSectionOverlay', {
id: sectionId,
section: new mobile.Section( {
line: $headline.html(),
text: $heading.next().html()
} ),
// FIXME: Replace this api param with onSaveComplete
api: api,
title: talkTitle,
// T184273 using `currentPage` because 'wgPageName'
// contains underscores instead of spaces.
licenseMsg: skin.getLicenseMsg(),
onSaveComplete: function () {
toast.showOnPageReload( mw.message( 'minerva-talk-reply-success' ).text() );
window.location.reload();
}
} );
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
}
/**
* Initializes code needed to display the TalkSectionOverlay
*/
function initTalkSection() {
// register route for each of the sub-headings
// eslint-disable-next-line no-jquery/no-global-selector
$( '.section-heading' ).each( function () {
var
sectionId,
$heading = $( this ),
$headline = $heading.find( '.mw-headline' ),
sectionIdMatch = $heading.next().attr( 'class' ).match( /mf-section-(\d+)/ ),
headlineId = $headline.attr( 'id' );
if ( sectionIdMatch === null || sectionIdMatch.length !== 2 ) {
// If section id couldn't be parsed, there is no point in continuing
return;
}
sectionId = sectionIdMatch[ 1 ];
$heading.on( 'click.talkSectionOverlay', function ( ev ) {
ev.preventDefault();
window.location.hash = '#' + headlineId;
} );
// remove the `id` to avoid conflicts with the overlay route.
// Without JS the id will still be present. With JS the overlay will open.
$headline.removeAttr( 'id' );
// however cache it to data for cooperation with the 'read as wiki page' button.
$headline.data( 'id', headlineId );
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
overlayManager.add( headlineId, function () {
return createTalkSectionOverlay( $heading, $headline, sectionId );
} );
} );
}
/**
* Initializes code needed to display the TalkSectionAddOverlay
*/
function initTalkSectionAdd() {
overlayManager.add( /^\/talk\/new$/, function () {
return createOverlay( 'TalkSectionAddOverlay', {
api: api,
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
title: talkTitle,
Make Minerva use new PageHTMLParser.js and refactored Page.js In I02f8645aac1d7b081eaba8f2ac92a2ef51f78182, Page.js was made into a model and its html parsing responsibilities were moved to PageHTMLParser. Additionally, a singleton for the current page (currentPage.js) and a singleton for the curent page html parser (currentPageHTMLParser.js) were introduced to replace the usage of M.getCurrentPage(). This commit refactors Minerva to make use of these changes. Notable changes: * 🐛 The event bus singleton was added to references.js since it previously relied on an instance of Skin to listen for the `references-loaded` event. However, this event is emitted on the event bus singleton. * Additionally, I didn't see a reason why the `references-loaded` event needed to also pass the current page instance when the only file listening to it is references.js (which already has the current page instance) so I removed that and the convoluted passing of page.js within the file. I assumed this logic was unecessary. * The call to drawer.showReferences in references.js now was made to pass the currentPage instance as well as the currentPageHTMLParser. This is to prepare for I6e858bbe73f83166476b5b2c0fdac1cca7404246 where the getReferences() interface for ReferencesMobileViewGateway.js and ReferencesHtmlScraperGateway.js is refactored to accept both of these instances. Additionally, references.js was refactored to support event delegation which gets rid of some parsing/setup logic. Bug: T193077 Depends-On: I02f8645aac1d7b081eaba8f2ac92a2ef51f78182 Change-Id: I2f32dbcc4ebaa4bebb297cda1ecce3457922b343
2019-07-11 00:56:04 +00:00
// T184273 using `currentPage` because 'wgPageName'
// contains underscores instead of spaces.
licenseMsg: skin.getLicenseMsg(),
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
currentPageTitle: currentPage.title,
onSaveComplete: function () {
toast.showOnPageReload( mw.message( 'minerva-talk-topic-feedback' ).text() );
window.location = currentPage.titleObj.getTalkPage().getUrl();
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
}
} );
} );
}
/**
* T230695: In the simplified view, we need to display a "Read as wikipage"
* button which enables the user to switch from simplified mode to the regular
* version of the mobile talk page (with TOC and sections that you can
* expand/collapse).
*/
function renderReadAsWikiPageButton() {
$( '<button>' )
.addClass( 'minerva-talk-full-page-button' )
.text( mw.message( 'minerva-talk-full-page' ).text() )
.on( 'click', function () {
restoreSectionHeadings();
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
// eslint-disable-next-line no-jquery/no-global-selector
$( 'body' ).removeClass( 'skin-minerva--talk-simplified' );
$( this ).remove();
// send user back up to top of page so they don't land awkwardly in
// middle of page when it expands
window.scrollTo( 0, 0 );
} )
.appendTo( '#content' );
}
/**
* @param {JQuery.Event} ev
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
* @param {Function} onDismiss
* @param {Function} onFollowRoute
* @param {string} returnToQuery
* @return {undefined}
*/
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
function showDrawerIfEligible( ev, onDismiss, onFollowRoute, returnToQuery ) {
var
amcOutreach = mobile.amcOutreach,
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
amcCampaign = amcOutreach.loadCampaign();
// avoiding navigating to original URL
// DO NOT USE stopPropagation or you'll break click tracking in WikimediaEvents
ev.preventDefault();
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
if (
amcCampaign.showIfEligible(
amcOutreach.ACTIONS.onTalkLink,
onDismiss,
talkTitle,
returnToQuery
)
) {
return;
}
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
onFollowRoute();
}
/**
* Called when user clicks on the add dicussion button located on a talk
* page
*
* @param {JQuery.Event} ev
*/
function amcAddTalkClickHandler( ev ) {
var
onFollowRoute = function () {
window.location.hash = '#/talk/new';
},
onDismiss = function () {
onFollowRoute();
toast.show( mw.message( 'mobile-frontend-amc-outreach-dismissed-message' ).text() );
};
showDrawerIfEligible( ev, onDismiss, onFollowRoute, '#/talk/new' );
}
/**
* Called when user clicks on a talk button that links to the talk page
*
* @param {JQuery.Event} ev
*/
function amcTalkClickHandler( ev ) {
var
$button = $( ev.target ),
onFollowRoute = function () {
window.location = $button.attr( 'href' );
},
onDismiss = function () {
onFollowRoute();
toast.showOnPageReload( mw.message( 'mobile-frontend-amc-outreach-dismissed-message' ).text() );
};
showDrawerIfEligible( ev, onDismiss, onFollowRoute, '' );
}
/**
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
* @return {boolean}
*/
function isSimplifiedViewEnabled() {
// eslint-disable-next-line no-jquery/no-class-state, no-jquery/no-global-selector
return $( 'body' ).hasClass( SKIN_MINERVA_TALK_SIMPLIFIED_CLASS );
}
/**
* Sets up necessary event handlers related to the talk page and talk buttons.
* Also renders the "Read as wikipage" button for the simplified mode
* (T230695).
*/
function init() {
var promise,
// eslint-disable-next-line no-jquery/no-global-selector
$talk = $( '.talk' ),
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
// eslint-disable-next-line no-jquery/no-global-selector
$addTalk = $( '.minerva-talk-add-button' );
$talk.on( 'click', amcTalkClickHandler );
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
$addTalk.on( 'click', amcAddTalkClickHandler );
// We only want the talk section add overlay to show when the user is on the
// view action (default action) of the talk page and not when the user is on
// other actions of the talk page (e.g. like the history action)
if ( currentPage.titleObj.isTalkPage() && mw.config.get( 'wgAction' ) === 'view' ) {
promise = mw.loader.using( 'mobile.talk.overlays' )
.then( initTalkSectionAdd );
} else {
return;
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
}
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
// SkinMinerva sets a class on the body which effectively controls when this
// mode is on
if ( isSimplifiedViewEnabled() ) {
promise.then( initTalkSection )
.then( renderReadAsWikiPageButton );
Render talk page as a tab instead of an overlay Following up on Jon's POC, this will get rid of the talk board component in favor of linking to the server rendered talk page. Additional Changes: * Cleaned up talk selenium tests. Removed talk_steps.rb which doesn't appear to be used anymore. * Changed talk add button classes to a single class * Moved "Add discussion" button to postheadinghtml per design mock * Added "...talk-explained", "...talk-explained-empty" messages to postheadinghtml per design mock * Due to undesirable jumps in window scroll caused by the section anchor & Toggler.js code when opening the TalkSectionOverlay (read fixme in code), a Promise is always returned from OverlayManager route to reset the scroll position to the top when the section overlay is opened. * Moved "mobile-frontend-talk-fullpage", "mobile-frontend-talk-reply-success", "mobile-frontend-talk-topic-feedback", "mobile-frontend-talk-explained" "mobile-frontend-talk-explained-empty" messages to minerva as minerva is the one who initiates those messages now. * Limited $talk selector to only `.talk` elements since amc talk tab does not need to be targeted * After saving a reply from TalkSectionOverlay, the DOM that is not part of the overlay becomes out of sync since a new reply was created. To get around this, an `onSaveComplete` callback was passed (similar to the TalkSectionAddOverlay) to execute a full page refresh. Although this is clunky, it is the easiest way to resync. Bug: T230695 Depends-On: I80201394fd7015db6700446142b0b4b20829f12e Change-Id: I243f1193bce0da9fa710fc3b5379f90b2d079680
2019-10-17 22:46:07 +00:00
}
}
if ( talkTitle ) {
init();
}
};