/* global moment */ const STATE_UNSUBSCRIBED = 0, STATE_SUBSCRIBED = 1, STATE_AUTOSUBSCRIBED = 2, utils = require( './utils.js' ), CommentItem = require( './CommentItem.js' ), HeadingItem = require( './HeadingItem.js' ); let api, seenAutoTopicSubPopup = !!+mw.user.options.get( 'discussiontools-seenautotopicsubpopup' ), linksByName = {}, buttonsByName = {}; /** * Update a subscribe link * * @param {HTMLElement} element Subscribe link * @param {number|null} state State constant (STATE_UNSUBSCRIBED, STATE_SUBSCRIBED or STATE_AUTOSUBSCRIBED) * @param {HTMLElement|null} labelElement Subscribe link, if different to element * @param {boolean} isNewTopics Is a subscribe link for new topics subscriptions */ function updateSubscribeLink( element, state, labelElement, isNewTopics ) { labelElement = labelElement || element; if ( state !== null ) { element.setAttribute( 'data-mw-subscribed', String( state ) ); } if ( state ) { labelElement.textContent = mw.msg( isNewTopics ? 'discussiontools-newtopicssubscription-button-unsubscribe-label' : 'discussiontools-topicsubscription-button-unsubscribe' ); element.setAttribute( 'title', mw.msg( isNewTopics ? 'discussiontools-newtopicssubscription-button-unsubscribe-tooltip' : 'discussiontools-topicsubscription-button-unsubscribe-tooltip' ) ); } else { labelElement.textContent = mw.msg( isNewTopics ? 'discussiontools-newtopicssubscription-button-subscribe-label' : 'discussiontools-topicsubscription-button-subscribe' ); element.setAttribute( 'title', mw.msg( isNewTopics ? 'discussiontools-newtopicssubscription-button-subscribe-tooltip' : 'discussiontools-topicsubscription-button-subscribe-tooltip' ) ); } } /** * Update a subscribe button * * @param {OO.ui.ButtonWidget} button Subscribe button * @param {number|null} state State constant (STATE_UNSUBSCRIBED, STATE_SUBSCRIBED or STATE_AUTOSUBSCRIBED) */ function updateSubscribeButton( button, state ) { if ( state !== null ) { button.$element[ 0 ].setAttribute( 'data-mw-subscribed', String( state ) ); } if ( state ) { button.setIcon( 'bell' ); button.setLabel( mw.msg( 'discussiontools-topicsubscription-button-unsubscribe-label' ) ); button.setTitle( mw.msg( 'discussiontools-topicsubscription-button-unsubscribe-tooltip' ) ); } else { button.setIcon( 'bellOutline' ); button.setLabel( mw.msg( 'discussiontools-topicsubscription-button-subscribe-label' ) ); button.setTitle( mw.msg( 'discussiontools-topicsubscription-button-subscribe-tooltip' ) ); } } /** * Change the subscription state of a topic subscription * * @param {string} title Page title * @param {string} commentName Comment name * @param {boolean} subscribe Subscription state * @param {boolean} isNewTopics Subscription is for new topics * @return {jQuery.Promise} Promise which resolves after change of state */ function changeSubscription( title, commentName, subscribe, isNewTopics ) { const promise = api.postWithToken( 'csrf', { action: 'discussiontoolssubscribe', page: title, commentname: commentName, subscribe: subscribe } ).then( ( response ) => OO.getProp( response, 'discussiontoolssubscribe' ) || {} ); promise.then( ( result ) => { mw.notify( mw.msg( result.subscribe ? ( isNewTopics ? 'discussiontools-newtopicssubscription-notify-subscribed-body' : 'discussiontools-topicsubscription-notify-subscribed-body' ) : ( isNewTopics ? 'discussiontools-newtopicssubscription-notify-unsubscribed-body' : 'discussiontools-topicsubscription-notify-unsubscribed-body' ) ), { title: mw.msg( result.subscribe ? ( isNewTopics ? 'discussiontools-newtopicssubscription-notify-subscribed-title' : 'discussiontools-topicsubscription-notify-subscribed-title' ) : ( isNewTopics ? 'discussiontools-newtopicssubscription-notify-unsubscribed-title' : 'discussiontools-topicsubscription-notify-unsubscribed-title' ) ) } ); }, ( code, data ) => { mw.notify( api.getErrorMessage( data ), { type: 'error' } ); } ); return promise; } function getSubscribedStateFromElement( element ) { return element.hasAttribute( 'data-mw-subscribed' ) ? Number( element.getAttribute( 'data-mw-subscribed' ) ) : null; } /** * Lazy load API to avoid circular dependency */ function initApi() { if ( !api ) { api = require( './controller.js' ).getApi(); } } /** * Initialize topic subscriptions feature * * @param {jQuery} $container Page container * @param {ThreadItemSet} threadItemSet */ function initTopicSubscriptions( $container, threadItemSet ) { linksByName = {}; buttonsByName = {}; initApi(); // Subscription buttons (visual enhancements) $container.find( '.ext-discussiontools-init-section-subscribeButton' ).each( ( i, element ) => { // These attributes will be lost when infusing // TODO: Could also be fixed by subclassing ButtonWidget in PHP const subscribedStateTemp = getSubscribedStateFromElement( element ); const id = $( element ).closest( '.ext-discussiontools-init-section' ) .find( '[data-mw-comment-start]' ).attr( 'id' ); const headingItem = threadItemSet.findCommentById( id ); if ( !( headingItem instanceof HeadingItem ) ) { // This should never happen return; } const name = headingItem.name; const button = OO.ui.infuse( element ); buttonsByName[ name ] = button; // Restore data attribute if ( subscribedStateTemp !== null ) { button.$element[ 0 ].setAttribute( 'data-mw-subscribed', String( subscribedStateTemp ) ); } const title = mw.config.get( 'wgRelevantPageName' ) + '#' + headingItem.getLinkableTitle(); button.on( 'click', () => { // Get latest subscribedState const subscribedState = getSubscribedStateFromElement( button.$element[ 0 ] ); button.setDisabled( true ); changeSubscription( title, name, !subscribedState ) .then( ( result ) => { updateSubscribeButton( button, result.subscribe ? STATE_SUBSCRIBED : STATE_UNSUBSCRIBED ); } ) .always( () => { button.setDisabled( false ); } ); } ); } ); // Subscription links (no visual enhancements) $container.find( '.ext-discussiontools-init-section-subscribe-link' ).each( ( i, link ) => { const $link = $( link ); const id = $link.closest( '.ext-discussiontools-init-section' ) .find( '[data-mw-comment-start]' ).attr( 'id' ); const headingItem = threadItemSet.findCommentById( id ); if ( !( headingItem instanceof HeadingItem ) ) { // This should never happen return; } const itemName = headingItem.name; const title = mw.config.get( 'wgRelevantPageName' ) + '#' + headingItem.getLinkableTitle(); linksByName[ itemName ] = link; $link.on( 'click keypress', ( e ) => { if ( e.type === 'keypress' && e.which !== OO.ui.Keys.ENTER && e.which !== OO.ui.Keys.SPACE ) { // Only handle keypresses on the "Enter" or "Space" keys return; } if ( e.type === 'click' && !utils.isUnmodifiedLeftClick( e ) ) { // Only handle unmodified left clicks return; } e.preventDefault(); // Get latest subscribedState const subscribedState = getSubscribedStateFromElement( $link[ 0 ] ); $link.addClass( 'ext-discussiontools-init-section-subscribe-link-pending' ); changeSubscription( title, itemName, !subscribedState ) .then( ( result ) => { updateSubscribeLink( $link[ 0 ], result.subscribe ? STATE_SUBSCRIBED : STATE_UNSUBSCRIBED ); } ) .always( () => { $link.removeClass( 'ext-discussiontools-init-section-subscribe-link-pending' ); } ); } ); } ); initNewTopicsSubscription(); } /** * Bind new topics subscription button * * Note: because this function can get called from `wikipage.content`, * and we're interacting with elements outside of $container, make * sure to account for this possibly being run multiple times on a * pageload. Calls from DT's own previews are filtered out, but other * page actions like live-preview can still reach this point. */ function initNewTopicsSubscription() { let $button, $label, $icon; initApi(); if ( mw.config.get( 'skin' ) === 'minerva' ) { // eslint-disable-next-line no-jquery/no-global-selector $button = $( '.menu__item--page-actions-overflow-t-page-subscribe' ); $label = $button.find( '.toggle-list-item__label' ); $icon = $button.find( '.minerva-icon' ); // HACK: We can't set data-mw-subscribed intially in Minerva, so work it out from the icon // eslint-disable-next-line no-jquery/no-class-state const initialState = $icon.hasClass( 'minerva-icon--bell' ) ? STATE_SUBSCRIBED : STATE_UNSUBSCRIBED; $button.attr( 'data-mw-subscribed', String( initialState ) ); } else { // eslint-disable-next-line no-jquery/no-global-selector $button = $( '#ca-dt-page-subscribe > a' ); $label = $button.find( 'span' ); $icon = $( [] ); } const titleObj = mw.Title.newFromText( mw.config.get( 'wgRelevantPageName' ) ); const name = utils.getNewTopicsSubscriptionId( titleObj ); $button.off( '.mw-dt-topicsubscriptions' ).on( 'click.mw-dt-topicsubscriptions', ( e ) => { e.preventDefault(); // Get latest subscribedState const subscribedState = getSubscribedStateFromElement( $button[ 0 ] ); changeSubscription( titleObj.getPrefixedText(), name, !subscribedState, true ) .then( ( result ) => { updateSubscribeLink( $button[ 0 ], result.subscribe ? STATE_SUBSCRIBED : STATE_UNSUBSCRIBED, $label[ 0 ], true ); $icon.toggleClass( 'minerva-icon--bell', !!result.subscribe ); $icon.toggleClass( 'minerva-icon--bellOutline', !result.subscribe ); } ); } ); } function initSpecialTopicSubscriptions() { api = require( './controller.js' ).getApi(); // Unsubscribe links on special page // eslint-disable-next-line no-jquery/no-global-selector $( '.ext-discussiontools-special-unsubscribe-button' ).each( ( i, element ) => { const button = OO.ui.infuse( element ); const data = button.getData(); let subscribedState = STATE_SUBSCRIBED; button.on( 'click', () => { button.setDisabled( true ); changeSubscription( data.title, data.item, !subscribedState ) .then( ( result ) => { button.setLabel( mw.msg( result.subscribe ? 'discussiontools-topicsubscription-button-unsubscribe-label' : 'discussiontools-topicsubscription-button-subscribe-label' ) ); button.clearFlags(); button.setFlags( [ result.subscribe ? 'destructive' : 'progressive' ] ); subscribedState = result.subscribe ? STATE_SUBSCRIBED : STATE_UNSUBSCRIBED; } ).always( () => { button.setDisabled( false ); } ); } ); } ); } /** * Show the first time popup for auto topic subscriptions, if required */ function maybeShowFirstTimeAutoTopicSubPopup() { const lastHighlightComment = require( './highlighter.js' ).getLastHighlightedPublishedComment(); if ( !lastHighlightComment || seenAutoTopicSubPopup ) { return; } seenAutoTopicSubPopup = true; mw.user.options.set( 'discussiontools-seenautotopicsubpopup', '1' ); api.saveOption( 'discussiontools-seenautotopicsubpopup', '1' ); let popup = null; function close() { popup.$element.removeClass( 'ext-discussiontools-autotopicsubpopup-fadein' ); setTimeout( () => { popup.$element.detach(); }, 1000 ); } const $popupContent = $( '<div>' ) .append( $( '<strong>' ) .addClass( 'ext-discussiontools-autotopicsubpopup-title' ) .text( mw.msg( 'discussiontools-autotopicsubpopup-title' ) ), $( '<div>' ) .addClass( 'ext-discussiontools-autotopicsubpopup-image' ), $( '<div>' ) .addClass( 'ext-discussiontools-autotopicsubpopup-body' ) .text( mw.msg( 'discussiontools-autotopicsubpopup-body' ) ), $( '<div>' ) .addClass( 'ext-discussiontools-autotopicsubpopup-actions' ) .append( new OO.ui.ButtonWidget( { label: mw.msg( 'discussiontools-autotopicsubpopup-dismiss' ), flags: [ 'primary', 'progressive' ] } ).on( 'click', close ).$element ) .append( new OO.ui.ButtonWidget( { label: mw.msg( 'discussiontools-autotopicsubpopup-preferences' ), href: mw.util.getUrl( 'Special:Preferences#mw-prefsection-editing-discussion' ), flags: [ 'progressive' ], framed: false } ).$element ) ); popup = new OO.ui.PopupWidget( { // Styles and dimensions width: '', height: '', anchor: false, autoClose: false, head: false, padded: false, classes: [ 'ext-discussiontools-autotopicsubpopup' ], hideWhenOutOfView: false, // Content $content: $popupContent.contents() } ); // Like in highlight() lastHighlightComment.getRange().insertNode( popup.$element[ 0 ] ); // Pull it outside of headings to avoid silly fonts if ( popup.$element.closest( 'h1, h2, h3, h4, h5, h6' ).length ) { popup.$element.closest( 'h1, h2, h3, h4, h5, h6' ).after( popup.$element ); } if ( popup.$element.closest( '.mw-heading' ).length ) { popup.$element.closest( '.mw-heading' ).after( popup.$element ); } // Disable positioning, the popup is positioned in CSS, above the highlight popup.toggle( true ).toggleClipping( false ).togglePositioning( false ); // If the page is very short, there might not be enough space above the highlight, // causing the popup to overlap the skin navigation or even be off-screen. // Position it on top of the highlight in that case... // eslint-disable-next-line no-jquery/no-global-selector if ( popup.$popup[ 0 ].getBoundingClientRect().top < $( '.mw-body' )[ 0 ].getBoundingClientRect().top ) { popup.$popup.addClass( 'ext-discussiontools-autotopicsubpopup-overlap' ); } // Scroll into view, leave some space above to avoid overlapping .postedit-container OO.ui.Element.static.scrollIntoView( popup.$popup[ 0 ], { padding: { // Add padding to avoid overlapping the post-edit notification (above on desktop, below on mobile) top: OO.ui.isMobile() ? 10 : 60, bottom: OO.ui.isMobile() ? 85 : 10 }, // Specify scrollContainer for compatibility with MobileFrontend. // Apparently it makes `<dd>` elements scrollable and OOUI tried to scroll them instead of body. scrollContainer: OO.ui.Element.static.getRootScrollableElement( popup.$popup[ 0 ] ) } ); popup.$element.addClass( 'ext-discussiontools-autotopicsubpopup-fadein' ); } /** * Update the subscription state of various topics * * @param {jQuery} $container Page container * @param {Object.<string, HeadingItem>} headingsToUpdate Headings of topics where subscription state has changed */ function updateSubscriptionStates( $container, headingsToUpdate ) { // This method is called when we recently edited this page, and auto-subscriptions might have been // added for some topics. It updates the [subscribe] buttons to reflect the new subscriptions. // If the topic is already marked as auto-subscribed, there's nothing to do. // (Except maybe show the first-time popup.) // If the topic is marked as having never been subscribed, check if they are auto-subscribed now. const topicsToCheck = []; const pendingLinks = []; const pendingButtons = []; for ( const headingName in headingsToUpdate ) { const link = linksByName[ headingName ]; const button = buttonsByName[ headingName ]; const subscribedState = getSubscribedStateFromElement( link || button.$element[ 0 ] ); if ( subscribedState === STATE_AUTOSUBSCRIBED ) { maybeShowFirstTimeAutoTopicSubPopup(); } else if ( subscribedState === null || subscribedState === STATE_UNSUBSCRIBED ) { topicsToCheck.push( headingName ); if ( link ) { pendingLinks.push( link ); } if ( button ) { pendingButtons.push( button ); } } } $( pendingLinks ).addClass( 'ext-discussiontools-init-section-subscribe-link-pending' ); pendingButtons.forEach( ( b ) => { b.setDisabled( true ); } ); if ( !topicsToCheck.length ) { return; } api.get( { action: 'discussiontoolsgetsubscriptions', commentname: topicsToCheck } ).then( ( response ) => { if ( $.isEmptyObject( response.subscriptions ) ) { // If none of the topics has an auto-subscription yet, wait a moment and check again. // updateSubscriptionStates() method is only called if we're really expecting one to be there. // (There are certainly neater ways to implement this, involving push notifications or at // least long-polling or something. But this is the simplest one!) const wait = $.Deferred(); setTimeout( wait.resolve, 5000 ); return wait.then( () => api.get( { action: 'discussiontoolsgetsubscriptions', commentname: topicsToCheck } ) ); } return response; } ).then( ( response ) => { // Update state of each topic for which there is a subscription for ( const subItemName in response.subscriptions ) { const state = response.subscriptions[ subItemName ]; if ( linksByName[ subItemName ] ) { updateSubscribeLink( linksByName[ subItemName ], state ); } if ( buttonsByName[ subItemName ] ) { updateSubscribeButton( buttonsByName[ subItemName ], state ); } if ( state === STATE_AUTOSUBSCRIBED ) { maybeShowFirstTimeAutoTopicSubPopup(); } } } ).always( () => { $( pendingLinks ).removeClass( 'ext-discussiontools-init-section-subscribe-link-pending' ); pendingButtons.forEach( ( b ) => { b.setDisabled( false ); } ); } ); } /** * Update subscription state of just-posted new topics * * @param {jQuery} $container Page container * @param {ThreadItemSet} threadItemSet * @param {string} [threadItemId] Just-posted comment ID (or NEW_TOPIC_COMMENT_ID) */ function updateAutoSubscriptionStates( $container, threadItemSet, threadItemId ) { const recentComments = []; const headingsToUpdate = {}; if ( threadItemId ) { // Edited by using the reply tool or new topic tool. Only check the edited topic. if ( threadItemId === utils.NEW_TOPIC_COMMENT_ID ) { recentComments.push( threadItemSet.threadItems[ threadItemSet.threadItems.length - 1 ] ); } else { recentComments.push( threadItemSet.threadItemsById[ threadItemId ] ); } } else if ( mw.config.get( 'wgPostEdit' ) ) { // Edited by using wikitext editor. Check topics with their own comments within last minute. for ( let i = 0; i < threadItemSet.threadItems.length; i++ ) { if ( threadItemSet.threadItems[ i ] instanceof CommentItem && threadItemSet.threadItems[ i ].author === mw.user.getName() && threadItemSet.threadItems[ i ].timestamp.isSameOrAfter( moment().subtract( 1, 'minute' ), 'minute' ) ) { recentComments.push( threadItemSet.threadItems[ i ] ); } } } recentComments.forEach( ( recentComment ) => { const headingItem = recentComment.getSubscribableHeading(); if ( headingItem ) { // Use names as object keys to deduplicate if there are multiple comments in a topic. headingsToUpdate[ headingItem.name ] = headingItem; } } ); updateSubscriptionStates( $container, headingsToUpdate ); } module.exports = { initTopicSubscriptions: initTopicSubscriptions, initSpecialTopicSubscriptions: initSpecialTopicSubscriptions, initNewTopicsSubscription: initNewTopicsSubscription, updateAutoSubscriptionStates: updateAutoSubscriptionStates };