diff options
Diffstat (limited to 'CommentStreams/resources/CommentStreams.js')
| -rw-r--r-- | CommentStreams/resources/CommentStreams.js | 636 |
1 files changed, 324 insertions, 312 deletions
diff --git a/CommentStreams/resources/CommentStreams.js b/CommentStreams/resources/CommentStreams.js index 45a2ce5a..1dc0a683 100644 --- a/CommentStreams/resources/CommentStreams.js +++ b/CommentStreams/resources/CommentStreams.js @@ -1,4 +1,4 @@ -/* +/* * Copyright (c) 2016 The MITRE Corporation * * Permission is hereby granted, free of charge, to any person obtaining a @@ -20,7 +20,7 @@ * DEALINGS IN THE SOFTWARE. */ -var commentstreams_controller = ( function( mw, $ ) { +var commentstreams_controller = ( function () { 'use strict'; return { @@ -33,9 +33,9 @@ var commentstreams_controller = ( function( mw, $ ) { moderatorDelete: false, moderatorFastDelete: false, showLabels: false, - userDisplayName: null, newestStreamsOnTop: false, initiallyCollapsed: false, + isNamespaceEnabled: false, enableVoting: false, enableWatchlist: false, comments: [], @@ -57,9 +57,8 @@ var commentstreams_controller = ( function( mw, $ ) { top: '50%', // Top position relative to parent left: '50%' // Left position relative to parent }, - initialize: function() { - var self = this; - this.baseUrl = window.location.href.split( /[?#]/ )[0]; + initialize: function () { + this.baseUrl = window.location.href.split( /[?#]/ )[ 0 ]; this.imagepath = mw.config.get( 'wgExtensionAssetsPath' ) + '/CommentStreams/images/'; if ( window.location.hash ) { @@ -75,12 +74,11 @@ var commentstreams_controller = ( function( mw, $ ) { this.canComment = config.canComment; this.moderatorEdit = config.moderatorEdit; this.moderatorDelete = config.moderatorDelete; - this.moderatorFastDelete = this.moderatorDelete ? - config.moderatorFastDelete : false; + this.moderatorFastDelete = this.moderatorDelete ? config.moderatorFastDelete : false; this.showLabels = config.showLabels; - this.userDisplayName = config.userDisplayName; this.newestStreamsOnTop = config.newestStreamsOnTop; this.initiallyCollapsed = config.initiallyCollapsed; + this.isNamespaceEnabled = config.isNamespaceEnabled; this.enableVoting = config.enableVoting; this.enableWatchlist = config.enableWatchlist; this.comments = config.comments; @@ -90,68 +88,82 @@ var commentstreams_controller = ( function( mw, $ ) { this.scrollToAnchor( this.targetComment ); } }, - scrollToAnchor: function( id ){ + scrollToAnchor: function ( id ) { var element = $( '#' + id ); if ( element.length ) { - $( 'html,body' ).animate( {scrollTop: element.offset().top},'slow'); + $( 'html,body' ).animate( { scrollTop: element.offset().top }, 'slow' ); } }, - setupDivs: function() { + setupDivs: function () { var self = this; - var mainDiv = $( '#cs-comments' ); - if ( !mainDiv.length ) { - mainDiv = $( '<div>' ).attr( 'id', 'cs-comments' ); + if ( self.isNamespaceEnabled && $( '#cs-comments.cs-comments' ).length === 0 ) { + var mainDiv = $( '<div>' ).attr( 'class', 'cs-comments' ).attr( 'id', 'cs-comments' ); mainDiv.insertAfter( '#catlinks' ); } + $( '.cs-comments' ).each( function () { + var commentDiv = $( this ); - var headerDiv = $( '<div> ').attr( 'id', 'cs-header'); - mainDiv.append( headerDiv ); - - var footerDiv = $( '<div> ').attr( 'id', 'cs-footer'); - mainDiv.append( footerDiv ); - - if ( this.canComment ) { - var addButton = $( '<button>' ) - .attr( { - type: 'button', - id: 'cs-add-button', - title: mw.message( 'commentstreams-buttontext-add' ), - 'data-toggle': 'tooltip' - } ) - .addClass( 'cs-button' ); - var addImage = $( '<img>' ) - .attr( { - title: mw.message( 'commentstreams-buttontooltip-add' ), - src: this.imagepath + 'comment_add.png' - } ); - addButton.append( addImage ); - if ( this.showLabels ) { - var addLabel = $( '<span>' ) - .text( mw.message( 'commentstreams-buttontext-add' ) ) - .addClass( 'cs-comment-button-label' ) - addButton.append( addLabel ); + var headerDiv = $( '<div>' ).attr( 'class', 'cs-header' ); + // For backwards compatibility. Please remove in ver 6.0 + if ( commentDiv.attr( 'id' ) === 'cs-comments' ) { + headerDiv.attr( 'id', 'cs-header' ); } + commentDiv.append( headerDiv ); - if ( this.newestStreamsOnTop ) { - headerDiv.append( addButton ); - } else { - footerDiv.append( addButton ); + var footerDiv = $( '<div>' ).attr( 'class', 'cs-footer' ); + // For backwards compatibility. Please remove in ver 6.0 + if ( commentDiv.attr( 'id' ) === 'cs-comments' ) { + footerDiv.attr( 'id', 'cs-footer' ); } + commentDiv.append( footerDiv ); - addButton.click( function() { - self.showNewCommentStreamBox(); - } ); - } + if ( self.canComment ) { + var addButton = $( '<button>' ) + .attr( { + type: 'button', + class: 'cs-add-button', + title: mw.message( 'commentstreams-buttontext-add' ), + 'data-toggle': 'tooltip' + } ) + .addClass( 'cs-button' ); + // For backwards compatibility. Please remove in ver 6.0 + if ( commentDiv.attr( 'id' ) === 'cs-comments' ) { + addButton.attr( 'id', 'cs-add-button' ); + } + var addImage = $( '<img>' ) + .attr( { + title: mw.message( 'commentstreams-buttontooltip-add' ), + src: self.imagepath + 'comment_add.png' + } ); + addButton.append( addImage ); + if ( self.showLabels ) { + var addLabel = $( '<span>' ) + .text( mw.message( 'commentstreams-buttontext-add' ) ) + .addClass( 'cs-comment-button-label' ); + addButton.append( addLabel ); + } + + if ( self.newestStreamsOnTop ) { + headerDiv.append( addButton ); + } else { + footerDiv.append( addButton ); + } + + addButton.click( function () { + self.showNewCommentStreamBox( this ); + } ); + } + } ); }, - addInitialComments: function() { + addInitialComments: function () { var self = this; var parentIndex; for ( parentIndex in this.comments ) { var parentComment = this.comments[ parentIndex ]; var commenthtml = this.formatComment( parentComment ); var location = $( commenthtml ) - .insertBefore( '#cs-footer' ); + .insertBefore( '#' + parentComment.commentblockid + ' .cs-footer' ); var childIndex; for ( childIndex in parentComment.children ) { var childComment = parentComment.children[ childIndex ]; @@ -162,13 +174,13 @@ var commentstreams_controller = ( function( mw, $ ) { } if ( this.initiallyCollapsed ) { - $( '.cs-stream' ).each( function() { + $( '.cs-stream' ).each( function () { self.collapseStream( $( this ), $( this ) .find( '.cs-toggle-button' ) ); } ); } }, - collapseStream: function( stream, button ) { + collapseStream: function ( stream, button ) { stream.find( '.cs-reply-comment' ).addClass( 'cs-hidden' ); stream.find( '.cs-head-comment .cs-comment-body' ).addClass( 'cs-hidden' ); stream.find( '.cs-stream-footer .cs-reply-button' ).addClass( 'cs-hidden' ); @@ -180,7 +192,7 @@ var commentstreams_controller = ( function( mw, $ ) { src: this.imagepath + 'expand.png' } ); }, - expandStream: function( stream, button ) { + expandStream: function ( stream, button ) { stream.find( '.cs-reply-comment' ).removeClass( 'cs-hidden' ); stream.find( '.cs-head-comment .cs-comment-body' ).removeClass( 'cs-hidden' ); stream.find( '.cs-stream-footer .cs-reply-button' ).removeClass( 'cs-hidden' ); @@ -192,27 +204,27 @@ var commentstreams_controller = ( function( mw, $ ) { src: this.imagepath + 'collapse.png' } ); }, - disableAllButtons: function() { + disableAllButtons: function () { $( '.cs-edit-button' ).prop( 'disabled', true ); $( '.cs-reply-button' ).prop( 'disabled', true ); - $( '#cs-add-button' ).prop( 'disabled', true ); + $( '.cs-add-button' ).prop( 'disabled', true ); $( '.cs-delete-button' ).prop( 'disabled', true ); $( '.cs-toggle-button' ).prop( 'disabled', true ); $( '.cs-link-button' ).prop( 'disabled', true ); $( '.cs-vote-button' ).prop( 'disabled', true ); $( '.cs-watch-button' ).prop( 'disabled', true ); }, - enableAllButtons: function() { + enableAllButtons: function () { $( '.cs-edit-button' ).prop( 'disabled', false ); $( '.cs-reply-button' ).prop( 'disabled', false ); - $( '#cs-add-button' ).prop( 'disabled', false ); + $( '.cs-add-button' ).prop( 'disabled', false ); $( '.cs-delete-button' ).prop( 'disabled', false ); $( '.cs-toggle-button' ).prop( 'disabled', false ); $( '.cs-link-button' ).prop( 'disabled', false ); $( '.cs-vote-button' ).prop( 'disabled', false ); $( '.cs-watch-button' ).prop( 'disabled', false ); }, - formatComment: function( commentData ) { + formatComment: function ( commentData ) { var self = this; var comment = this.formatCommentInner( commentData ); @@ -246,11 +258,11 @@ var commentstreams_controller = ( function( mw, $ ) { if ( this.showLabels ) { var replyLabel = $( '<span>' ) .text( mw.message( 'commentstreams-buttontext-reply' ) ) - .addClass( 'cs-comment-button-label' ) + .addClass( 'cs-comment-button-label' ); replyButton.append( replyLabel ); } streamFooter.append( replyButton ); - replyButton.click( function() { + replyButton.click( function () { var pageId = $( this ).attr( 'data-stream-id' ); self.showNewReplyBox( $( this ), pageId ); } ); @@ -259,7 +271,7 @@ var commentstreams_controller = ( function( mw, $ ) { return comment; }, - formatCommentInner: function( commentData ) { + formatCommentInner: function ( commentData ) { var self = this; var commentHeader = $( '<div>' ) .addClass( 'cs-comment-header' ); @@ -318,11 +330,11 @@ var commentstreams_controller = ( function( mw, $ ) { centerDiv.append( divider ); if ( this.canEdit( commentData ) ) { - centerDiv.append( this.createEditButton( commentData.username) ); + centerDiv.append( this.createEditButton( commentData.username ) ); } if ( this.canDelete( commentData ) ) { - centerDiv.append( this.createDeleteButton( commentData.username) ); + centerDiv.append( this.createDeleteButton( commentData.username ) ); } centerDiv.append( this.createPermalinkButton( commentData.pageid ) ); @@ -332,8 +344,7 @@ var commentstreams_controller = ( function( mw, $ ) { var rightDiv = $( '<div>' ) .addClass( 'cs-comment-header-right' ); - if ( commentData.parentid === null && this.enableWatchlist && - !this.isLoggedIn ) { + if ( commentData.parentid === null && this.enableWatchlist && this.isLoggedIn ) { rightDiv.append( this.createWatchButton( commentData ) ); } @@ -353,7 +364,7 @@ var commentstreams_controller = ( function( mw, $ ) { } ); collapseButton.append( collapseimage ); rightDiv.append( collapseButton ); - collapseButton.click( function() { + collapseButton.click( function () { var stream = $( this ).closest( '.cs-stream' ); if ( stream.hasClass( 'cs-expanded' ) ) { self.collapseStream( stream, this ); @@ -378,11 +389,14 @@ var commentstreams_controller = ( function( mw, $ ) { commentClass = 'cs-head-comment'; } var id = 'cs-comment-' + commentData.pageid; + // The following classes are used here: + // * cs-reply-comment + // * cs-head-comment var comment = $( '<div>' ) .addClass( 'cs-comment' ) .addClass( commentClass ) .attr( { - 'id': id, + id: id, 'data-id': commentData.pageid } ); if ( this.targetComment === id ) { @@ -426,7 +440,7 @@ var commentstreams_controller = ( function( mw, $ ) { windowManager.openWindow( urlDialog ); textInput.select(); }, - createEditButton: function( username ) { + createEditButton: function ( username ) { var self = this; var editButton = $( '<button>' ) .addClass( 'cs-button' ) @@ -444,7 +458,7 @@ var commentstreams_controller = ( function( mw, $ ) { src: this.imagepath + 'comment_moderator_edit.png' } ); editButton - .addClass( 'cs-moderator-button' ) + .addClass( 'cs-moderator-button' ); } else { editimage .attr( { @@ -453,20 +467,20 @@ var commentstreams_controller = ( function( mw, $ ) { } ); } editButton.append( editimage ); - editButton.click( function() { + editButton.click( function () { var comment = $( this ).closest( '.cs-comment' ); var pageId = $( comment ).attr( 'data-id' ); self.editComment( $( comment ), pageId ); } ); return editButton; }, - createDeleteButton: function( username ) { + createDeleteButton: function ( username ) { var self = this; var deleteButton = $( '<button>' ) .addClass( 'cs-button' ) .addClass( 'cs-delete-button' ) .attr( { - type: 'button', + type: 'button', title: mw.message( 'commentstreams-buttontooltip-delete' ), 'data-toggle': 'tooltip' } ); @@ -478,7 +492,7 @@ var commentstreams_controller = ( function( mw, $ ) { src: this.imagepath + 'comment_moderator_delete.png' } ); deleteButton - .addClass( 'cs-moderator-button' ) + .addClass( 'cs-moderator-button' ); } else { deleteimage .attr( { @@ -487,14 +501,14 @@ var commentstreams_controller = ( function( mw, $ ) { } ); } deleteButton.append( deleteimage ); - deleteButton.click( function() { + deleteButton.click( function () { var comment = $( this ).closest( '.cs-comment' ); var pageId = $( comment ).attr( 'data-id' ); self.deleteComment( $( comment ), pageId ); } ); return deleteButton; }, - createPermalinkButton: function( pageid ) { + createPermalinkButton: function ( pageid ) { var self = this; var id = 'cs-comment-' + pageid; var permalinkButton = $( '<button>' ) @@ -504,10 +518,10 @@ var commentstreams_controller = ( function( mw, $ ) { title: mw.message( 'commentstreams-buttontooltip-permalink' ), 'data-toggle': 'tooltip' } ) - .click( function() { + .on( 'click', function () { $( '.cs-target-comment' ) .removeClass( 'cs-target-comment' ); - self.scrollToAnchor( id ) + self.scrollToAnchor( id ); var comment = $( this ).closest( '.cs-comment' ); comment .addClass( 'cs-target-comment' ); @@ -522,12 +536,12 @@ var commentstreams_controller = ( function( mw, $ ) { permalinkButton.append( permalinkimage ); return permalinkButton; }, - createWatchButton: function( commentData ) { + createWatchButton: function ( commentData ) { var self = this; var watchButton = $( '<button>' ) .addClass( 'cs-button' ) .addClass( 'cs-watch-button' ) - .click( function() { + .on( 'click', function () { self.watch( $( this ), commentData.pageid ); } ); var watchimage = $( '<img>' ) @@ -544,12 +558,12 @@ var commentstreams_controller = ( function( mw, $ ) { .attr( { title: mw.message( 'commentstreams-buttontooltip-watch' ), src: this.imagepath + 'notwatching.png' - } ) + } ); } watchButton.append( watchimage ); return watchButton; }, - createVotingButtons: function( commentData ) { + createVotingButtons: function ( commentData ) { var self = this; var upButton; @@ -557,7 +571,7 @@ var commentstreams_controller = ( function( mw, $ ) { upButton = $( '<button>' ) .addClass( 'cs-button' ) .addClass( 'cs-vote-button' ) - .click( function() { + .on( 'click', function () { self.vote( $( this ), commentData.pageid, true, commentData.created_timestamp ); } ); @@ -585,7 +599,7 @@ var commentstreams_controller = ( function( mw, $ ) { downButton = $( '<button>' ) .addClass( 'cs-button' ) .addClass( 'cs-vote-button' ) - .click( function() { + .on( 'click', function () { self.vote( $( this ), commentData.pageid, false, commentData.created_timestamp ); } ); @@ -614,7 +628,7 @@ var commentstreams_controller = ( function( mw, $ ) { votingSpan.append( downButton ); return votingSpan; }, - vote: function( button, pageid, up, created_timestamp ) { + vote: function ( button, pageid, up, created_timestamp ) { var self = this; var votespan = button.closest( '.cs-voting-span' ); @@ -626,30 +640,17 @@ var commentstreams_controller = ( function( mw, $ ) { var downimage = votespan.find( '.cs-vote-downimage' ); var newvote; - var oldvote; if ( up ) { if ( upimage.hasClass( 'cs-vote-enabled' ) ) { newvote = 0; - oldvote = 1; } else { newvote = 1; - if ( downimage.hasClass( 'cs-vote-enabled' ) ) { - oldvote = -1; - } else { - oldvote = 0; - } } } else { if ( downimage.hasClass( 'cs-vote-enabled' ) ) { newvote = 0; - oldvote = -1; } else { newvote = -1; - if ( upimage.hasClass( 'cs-vote-enabled' ) ) { - oldvote = 1; - } else { - oldvote = 0; - } } } @@ -657,9 +658,9 @@ var commentstreams_controller = ( function( mw, $ ) { this.disableAllButtons(); new Spinner( self.spinnerOptions ) .spin( document.getElementById( comment.attr( 'id' ) ) ); - CommentStreamsQuerier.vote( pageid, newvote, function( result ) { + CommentStreamsQuerier.vote( pageid, newvote, function ( result ) { $( '.spinner' ).remove(); - if ( result.error === undefined ) { + if ( result === undefined ) { if ( up ) { if ( upimage.hasClass( 'cs-vote-enabled' ) ) { upimage.attr( 'src', self.imagepath + 'upvote-disabled.png' ); @@ -707,17 +708,17 @@ var commentstreams_controller = ( function( mw, $ ) { } } ); }, - watch: function( button, pageid ) { + watch: function ( button, pageid ) { var self = this; - var image = button.find( '.cs-watch-image'); + var image = button.find( '.cs-watch-image' ); var watchaction = !image.hasClass( 'cs-watch-watching' ); var comment = button.closest( '.cs-comment' ); this.disableAllButtons(); new Spinner( self.spinnerOptions ) .spin( document.getElementById( comment.attr( 'id' ) ) ); - CommentStreamsQuerier.watch( pageid, watchaction, function( result ) { + CommentStreamsQuerier.watch( pageid, watchaction, function ( result ) { $( '.spinner' ).remove(); - if ( result.error === undefined ) { + if ( result === undefined ) { if ( watchaction ) { image .attr( { @@ -739,18 +740,18 @@ var commentstreams_controller = ( function( mw, $ ) { self.enableAllButtons(); } ); }, - adjustCommentOrder: function( stream, votediff, upcount, + adjustCommentOrder: function ( stream, votediff, upcount, created_timestamp ) { var nextSiblings = stream.nextAll( '.cs-stream' ); var first = true; var index; for ( index = 0; index < nextSiblings.length; index++ ) { - var sibling = nextSiblings[index]; + var nextSibling = nextSiblings[ index ]; var nextupcountspan = - $( sibling ).find( '.cs-vote-upcount' ); + $( nextSibling ).find( '.cs-vote-upcount' ); var nextupcount = parseInt( nextupcountspan.text() ); var nextdowncountspan = - $( sibling ).find( '.cs-vote-downcount' ); + $( nextSibling ).find( '.cs-vote-downcount' ); var nextdowncount = parseInt( nextdowncountspan.text() ); var nextvotediff = nextupcount - nextdowncount; if ( nextvotediff > votediff ) { @@ -760,7 +761,7 @@ var commentstreams_controller = ( function( mw, $ ) { // keeping looking } else if ( nextupcount === upcount ) { var nextcreated_timestamp = - $( sibling ).attr( 'data-created-timestamp' ); + $( nextSibling ).attr( 'data-created-timestamp' ); if ( this.newestStreamsOnTop ) { if ( nextcreated_timestamp > created_timestamp ) { // keeping looking @@ -768,7 +769,7 @@ var commentstreams_controller = ( function( mw, $ ) { // check previous siblings break; } else { - this.moveComment( stream, true, $( sibling ) ); + this.moveComment( stream, true, $( nextSibling ) ); return; } } else if ( nextcreated_timestamp < created_timestamp ) { @@ -777,39 +778,39 @@ var commentstreams_controller = ( function( mw, $ ) { // check previous siblings break; } else { - this.moveComment( stream, true, $( sibling ) ); + this.moveComment( stream, true, $( nextSibling ) ); return; } } else if ( first ) { // check previous siblings break; } else { - this.moveComment( stream, true, $( sibling ) ); + this.moveComment( stream, true, $( nextSibling ) ); return; } } else if ( first ) { // check previous siblings break; } else { - this.moveComment( stream, true, $( sibling ) ); + this.moveComment( stream, true, $( nextSibling ) ); return; } first = false; } if ( !first ) { this.moveComment( stream, false, - $( nextSiblings[nextSiblings.length - 1] ) ); + $( nextSiblings[ nextSiblings.length - 1 ] ) ); return; } var prevSiblings = stream.prevAll( '.cs-stream' ); first = true; for ( index = 0; index < prevSiblings.length; index++ ) { - var sibling = prevSiblings[index]; + var prevSibling = prevSiblings[ index ]; var prevupcountspan = - $( sibling ).find( '.cs-vote-upcount' ); + $( prevSibling ).find( '.cs-vote-upcount' ); var prevupcount = parseInt( prevupcountspan.text() ); var prevdowncountspan = - $( sibling ).find( '.cs-vote-downcount' ); + $( prevSibling ).find( '.cs-vote-downcount' ); var prevdowncount = parseInt( prevdowncountspan.text() ); var prevvotediff = prevupcount - prevdowncount; if ( prevvotediff < votediff ) { @@ -819,7 +820,7 @@ var commentstreams_controller = ( function( mw, $ ) { // keeping looking } else if ( prevupcount === upcount ) { var prevcreated_timestamp = - $( sibling ).attr( 'data-created-timestamp' ); + $( prevSibling ).attr( 'data-created-timestamp' ); if ( this.newestStreamsOnTop ) { if ( prevcreated_timestamp < created_timestamp ) { // keeping looking @@ -827,7 +828,7 @@ var commentstreams_controller = ( function( mw, $ ) { // done break; } else { - this.moveComment( stream, false, $( sibling ) ); + this.moveComment( stream, false, $( prevSibling ) ); return; } } else if ( prevcreated_timestamp > created_timestamp ) { @@ -836,36 +837,36 @@ var commentstreams_controller = ( function( mw, $ ) { // done break; } else { - this.moveComment( stream, false, $( sibling ) ); + this.moveComment( stream, false, $( prevSibling ) ); return; } } else if ( first ) { // done break; } else { - this.moveComment( stream, false, $( sibling ) ); + this.moveComment( stream, false, $( prevSibling ) ); return; } } else if ( first ) { // done break; } else { - this.moveComment( stream, false, $( sibling ) ); + this.moveComment( stream, false, $( prevSibling ) ); return; } first = false; } if ( !first ) { this.moveComment( stream, true, - $( prevSiblings[prevSiblings.length - 1] ) ); + $( prevSiblings[ prevSiblings.length - 1 ] ) ); return; } // otherwise, the comment was in the correct place already this.enableAllButtons(); }, - moveComment: function( stream, before, location ) { + moveComment: function ( stream, before, location ) { var self = this; - stream.slideUp( 1000, function() { + stream.slideUp( 1000, function () { stream.detach(); stream.hide(); if ( before ) { @@ -873,19 +874,19 @@ var commentstreams_controller = ( function( mw, $ ) { } else { stream.insertAfter( location ); } - stream.slideDown( 1000, function() { + stream.slideDown( 1000, function () { self.enableAllButtons(); var id = $( this ).find( '.cs-head-comment:first' ).attr( 'id' ); self.scrollToAnchor( id ); } ); } ); }, - createDivider: function() { + createDivider: function () { return $( '<span>' ) .addClass( 'cs-comment-details' ) .text( '|' ); }, - formatEditBox: function( is_stream ) { + formatEditBox: function ( is_stream ) { var commentBox = $( '<div>' ) .addClass( 'cs-edit-box' ) .attr( 'id', 'cs-edit-box' ); @@ -893,11 +894,11 @@ var commentstreams_controller = ( function( mw, $ ) { if ( is_stream ) { var titleField = $( '<input>' ) .attr( { - 'id': 'cs-title-edit-field', - 'type': 'text', - 'placeholder': mw.message( 'commentstreams-title-field-placeholder' ) + id: 'cs-title-edit-field', + type: 'text', + placeholder: mw.message( 'commentstreams-title-field-placeholder' ) } ); - commentBox.append( titleField ); + commentBox.append( titleField ); } else { commentBox.addClass( 'cs-reply-edit-box' ); } @@ -909,9 +910,9 @@ var commentstreams_controller = ( function( mw, $ ) { var bodyField = $( '<textarea>' ) .attr( { - 'id': 'cs-body-edit-field', - 'rows': 10, - 'placeholder': mw.message( 'commentstreams-body-field-placeholder' ) + id: 'cs-body-edit-field', + rows: 10, + placeholder: mw.message( 'commentstreams-body-field-placeholder' ) } ); commentBox.append( bodyField ); @@ -919,8 +920,8 @@ var commentstreams_controller = ( function( mw, $ ) { .addClass( 'cs-button' ) .addClass( 'cs-submit-button' ) .attr( { - 'id': 'cs-submit-button', - 'type': 'button' + id: 'cs-submit-button', + type: 'button' } ); var submitimage = $( '<img>' ) .attr( { @@ -935,8 +936,8 @@ var commentstreams_controller = ( function( mw, $ ) { .addClass( 'cs-button' ) .addClass( 'cs-cancel-button' ) .attr( { - 'id': 'cs-cancel-button', - 'type': 'button' + id: 'cs-cancel-button', + type: 'button' } ); var cancelimage = $( '<img>' ) .attr( { @@ -949,16 +950,16 @@ var commentstreams_controller = ( function( mw, $ ) { return commentBox; }, - showNewCommentStreamBox: function() { + showNewCommentStreamBox: function ( addButton ) { var self = this; var editBox = this.formatEditBox( true ); if ( this.newestStreamsOnTop ) { - $( '#cs-header' ).append( editBox ); + $( addButton ).parent( '.cs-header' ).append( editBox ); $( '#cs-edit-box' ) .hide() .slideDown(); } else { - $( '#cs-footer' ).prepend( editBox ); + $( addButton ).parent( '.cs-footer' ).prepend( editBox ); $( '#cs-edit-box' ) .hide() .slideDown(); @@ -968,10 +969,10 @@ var commentstreams_controller = ( function( mw, $ ) { var editField = $( '#cs-body-edit-field' ); editField.applyVisualEditor(); } - $( '#cs-submit-button' ).click( function() { - self.postComment( null ); + $( '#cs-submit-button' ).on( 'click', function () { + self.postComment( null, $( addButton ).parents( '.cs-comments' ).attr( 'id' ) ); } ); - $( '#cs-cancel-button' ).click( function() { + $( '#cs-cancel-button' ).on( 'click', function () { self.hideEditBox( true ); } ); this.disableAllButtons(); @@ -980,7 +981,7 @@ var commentstreams_controller = ( function( mw, $ ) { titleField.focus(); } }, - showNewReplyBox: function( element, topCommentId ) { + showNewReplyBox: function ( element, topCommentId ) { var self = this; var editBox = this.formatEditBox( false ); $( editBox ) @@ -988,10 +989,10 @@ var commentstreams_controller = ( function( mw, $ ) { .hide() .slideDown(); - $( '#cs-submit-button' ).click( function() { - self.postComment( topCommentId ); + $( '#cs-submit-button' ).on( 'click', function () { + self.postComment( topCommentId, '0' ); } ); - $( '#cs-cancel-button' ).click( function() { + $( '#cs-cancel-button' ).on( 'click', function () { self.hideEditBox( true ); } ); this.disableAllButtons(); @@ -1004,10 +1005,9 @@ var commentstreams_controller = ( function( mw, $ ) { } } }, - hideEditBox: function( animated ) { - var self = this; + hideEditBox: function ( animated ) { if ( animated ) { - $( '#cs-edit-box' ).slideUp( 'normal', function() { + $( '#cs-edit-box' ).slideUp( 'normal', function () { $( '#cs-edit-box' ).remove(); } ); } else { @@ -1015,10 +1015,10 @@ var commentstreams_controller = ( function( mw, $ ) { } this.enableAllButtons(); }, - postComment: function( parentPageId ) { + postComment: function ( parentPageId, commentblockid ) { var self = this; if ( this.isLoggedIn ) { - self.postComment2( parentPageId ); + self.postComment2( parentPageId, commentblockid ); } else { var message_text = mw.message( 'commentstreams-dialog-anonymous-message' ).text(); @@ -1028,7 +1028,7 @@ var commentstreams_controller = ( function( mw, $ ) { mw.message( 'commentstreams-dialog-buttontext-cancel' ).text(); var dialog = new OO.ui.MessageDialog(); var window_manager = new OO.ui.WindowManager(); - $( '#cs-comments' ).append( window_manager.$element ); + $( '.cs-comments' ).append( window_manager.$element ); window_manager.addWindows( [ dialog ] ); window_manager.openWindow( dialog, { message: message_text, @@ -1036,31 +1036,27 @@ var commentstreams_controller = ( function( mw, $ ) { { label: ok_text, action: 'ok' }, { label: cancel_text, flags: 'primary' } ] - } ).then( function ( opened ) { - opened.then( function ( closing, data ) { - if ( data && data.action ) { - if ( data.action === 'ok' ) { - self.postComment2( parentPageId ); - } - } - } ); + } ).closed.then( function ( data ) { + if ( data && data.action && data.action === 'ok' ) { + self.postComment2( parentPageId, commentblockid ); + } } ); } }, - postComment2: function( parentPageId ) { + postComment2: function ( parentPageId, commentblockid ) { var self = this; - if ( $( '#cs-body-edit-field' ).css( 'display' ) == 'none' ) { - self.postCommentFromVE( parentPageId ); + if ( $( '#cs-body-edit-field' ).css( 'display' ) === 'none' ) { + self.postCommentFromVE( parentPageId, commentblockid ); } else { var commentText = $( '#cs-body-edit-field' ).val(); - self.realPostComment( parentPageId, commentText ); + self.realPostComment( parentPageId, commentblockid, commentText ); } }, - postCommentFromVE: function( parentPageId ) { + postCommentFromVE: function ( parentPageId, commentblockid ) { var self = this; var editField = $( '#cs-body-edit-field' ); var veInstances = editField.getVEInstances(); - var curVEEditor = veInstances[veInstances.length - 1]; + var curVEEditor = veInstances[ veInstances.length - 1 ]; new mw.Api().post( { action: 'veforall-parsoid-utils', from: 'html', @@ -1069,20 +1065,20 @@ var commentstreams_controller = ( function( mw, $ ) { title: mw.config.get( 'wgPageName' ).split( /(\\|\/)/g ).pop() } ).then( function ( data ) { var commentText = data[ 'veforall-parsoid-utils' ].content; - self.realPostComment( parentPageId, commentText ); + self.realPostComment( parentPageId, commentblockid, commentText ); } ) - .fail( function ( data ) { - self.reportError( 'commentstreams-ve-conversion-error' ); - } ); + .fail( function () { + self.reportError( 'commentstreams-ve-conversion-error' ); + } ); }, - realPostComment: function( parentPageId, commentText ) { + realPostComment: function ( parentPageId, commentblockid, commentText ) { var self = this; var commentTitle; if ( parentPageId === null ) { var titleField = $( '#cs-title-edit-field' ); if ( titleField !== null ) { - commentTitle = titleField .val(); + commentTitle = titleField.val(); if ( commentTitle === null || commentTitle.trim() === '' ) { this.reportError( 'commentstreams-validation-error-nocommenttitle' ); return; @@ -1100,57 +1096,57 @@ var commentstreams_controller = ( function( mw, $ ) { $( '#cs-submit-button' ).prop( 'disabled', true ); $( '#cs-cancel-button' ).prop( 'disabled', true ); - $( '#cs-edit-box' ).fadeTo( 100, 0.2, function() { + $( '#cs-edit-box' ).fadeTo( 100, 0.2, function () { new Spinner( self.spinnerOptions ) .spin( document.getElementById( 'cs-edit-box' ) ); var associatedPageId = mw.config.get( 'wgArticleId' ); CommentStreamsQuerier.postComment( commentTitle, commentText, - associatedPageId, parentPageId, function( result ) { - $( '.spinner' ).remove(); - if ( result.error === undefined ) { - var comment = self.formatComment( result ); - if ( parentPageId ) { - if ( !self.moderatorFastDelete ) { - var deleteSpan = $( '#cs-edit-box' ) + associatedPageId, parentPageId, commentblockid, function ( result ) { + $( '.spinner' ).remove(); + if ( result.error === undefined ) { + var comment = self.formatComment( result ); + if ( parentPageId ) { + if ( !self.moderatorFastDelete ) { + var deleteSpan = $( '#cs-edit-box' ) + .closest( '.cs-stream' ) + .find( '.cs-head-comment' ) + .find( '.cs-comment-header' ) + .find( '.cs-delete-button' ); + deleteSpan.remove(); + } + var location = $( '#cs-edit-box' ) .closest( '.cs-stream' ) - .find( '.cs-head-comment' ) - .find( '.cs-comment-header' ) - .find( '.cs-delete-button' ); - deleteSpan.remove(); - } - var location = $( '#cs-edit-box' ) - .closest( '.cs-stream' ) - .find( '.cs-stream-footer' ); - self.hideEditBox( false ); - comment.insertBefore( $( location ) ) - .hide() - .slideDown(); - } else { - self.hideEditBox( false ); - if ( self.newestStreamsOnTop ) { - comment.insertAfter( '#cs-header' ) + .find( '.cs-stream-footer' ); + self.hideEditBox( false ); + comment.insertBefore( $( location ) ) .hide() .slideDown(); } else { - comment.insertBefore( '#cs-footer' ) - .hide() - .slideDown(); + self.hideEditBox( false ); + if ( self.newestStreamsOnTop ) { + comment.insertAfter( '#' + commentblockid + ' .cs-header' ) + .hide() + .slideDown(); + } else { + comment.insertBefore( '#' + commentblockid + ' .cs-footer' ) + .hide() + .slideDown(); + } + self.adjustCommentOrder( comment, 0, 0, + result.created_timestamp ); } - self.adjustCommentOrder( comment, 0, 0, - result.created_timestamp ); + } else { + self.reportError( result.error ); + $( '#cs-edit-box' ).fadeTo( 0.2, 100, function () { + $( '#cs-submit-button' ).prop( 'disabled', false ); + $( '#cs-cancel-button' ).prop( 'disabled', false ); + } ); } - } else { - self.reportError( result.error ); - $( '#cs-edit-box').fadeTo( 0.2, 100, function() { - $( '#cs-submit-button' ).prop( 'disabled', false ); - $( '#cs-cancel-button' ).prop( 'disabled', false ); - } ); - } - } ); + } ); } ); }, - deleteComment: function( element, pageId ) { + deleteComment: function ( element, pageId ) { var self = this; var message_text = mw.message( 'commentstreams-dialog-delete-message' ).text(); @@ -1160,7 +1156,7 @@ var commentstreams_controller = ( function( mw, $ ) { mw.message( 'commentstreams-dialog-buttontext-no' ).text(); var dialog = new OO.ui.MessageDialog(); var window_manager = new OO.ui.WindowManager(); - $( '#cs-comments' ).append( window_manager.$element ); + $( '.cs-comments' ).append( window_manager.$element ); window_manager.addWindows( [ dialog ] ); window_manager.openWindow( dialog, { message: message_text, @@ -1168,48 +1164,49 @@ var commentstreams_controller = ( function( mw, $ ) { { label: yes_text, action: 'yes' }, { label: no_text, flags: 'primary' } ] - } ).then( function ( opened ) { - opened.then( function ( closing, data ) { - if ( data && data.action ) { - if ( data.action === 'yes' ) { - self.realDeleteComment( element, pageId ); - } - } - } ); + } ).closed.then( function ( data ) { + if ( data && data.action && data.action === 'yes' ) { + self.realDeleteComment( element, pageId ); + } } ); }, - realDeleteComment: function( element, pageId ) { + realDeleteComment: function ( element, pageId ) { var self = this; this.disableAllButtons(); - element.fadeTo( 100, 0.2, function() { + var parentId = element + .closest( '.cs-stream' ) + .find( '.cs-head-comment' ) + .attr( 'data-id' ); + var fadeElement = element; + if ( parentId === pageId && self.moderatorFastDelete ) { + fadeElement = element.closest( '.cs-stream' ); + } + fadeElement.fadeTo( 100, 0.2, function () { new Spinner( self.spinnerOptions ) .spin( document.getElementById( element.attr( 'id' ) ) ); - CommentStreamsQuerier.deleteComment( pageId, function( result ) { + CommentStreamsQuerier.deleteComment( pageId, function ( result ) { $( '.spinner' ).remove(); - if ( result.error === undefined || + if ( result === undefined || result.error === 'commentstreams-api-error-commentnotfound' ) { if ( element.hasClass( 'cs-head-comment' ) ) { element.closest( '.cs-stream' ) - .slideUp( 'normal', function() { + .slideUp( 'normal', function () { element.closest( '.cs-stream' ).remove(); self.enableAllButtons(); } ); } else { - var parentId = element - .closest( '.cs-stream' ) - .find( '.cs-head-comment' ) - .attr( 'data-id' ); - CommentStreamsQuerier.queryComment( parentId, function( result ) { - if ( result.error === undefined && self.canDelete( result ) && + CommentStreamsQuerier.queryComment( parentId, function ( queryResult ) { + if ( queryResult.error === undefined && + self.canDelete( queryResult ) && !self.moderatorFastDelete ) { - self.createDeleteButton( result.username ) - .insertAfter ( element + self.createDeleteButton( queryResult.username ) + .insertAfter( element .closest( '.cs-stream' ) .find( '.cs-head-comment' ) .find( '.cs-comment-header' ) .find( '.cs-edit-button' ) ); } - element.slideUp( 'normal', function() { + element.slideUp( 'normal', function () { element.remove(); self.enableAllButtons(); } ); @@ -1217,20 +1214,20 @@ var commentstreams_controller = ( function( mw, $ ) { } } else { self.reportError( result.error ); - element.fadeTo( 0.2, 100, function() { + fadeElement.fadeTo( 0.2, 100, function () { self.enableAllButtons(); } ); } } ); } ); }, - editComment: function( element, pageId ) { + editComment: function ( element, pageId ) { var self = this; this.disableAllButtons(); - element.fadeTo( 100, 0.2, function() { + element.fadeTo( 100, 0.2, function () { new Spinner( self.spinnerOptions ) .spin( document.getElementById( element.attr( 'id' ) ) ); - CommentStreamsQuerier.queryComment( pageId, function( result ) { + CommentStreamsQuerier.queryComment( pageId, function ( result ) { $( '.spinner' ).remove(); if ( result.error === undefined ) { @@ -1254,17 +1251,17 @@ var commentstreams_controller = ( function( mw, $ ) { editField.applyVisualEditor(); } - $( '#cs-cancel-button' ).click( function() { - commentBox.slideUp( 'normal', function() { - element.fadeTo( 0.2, 100, function() { + $( '#cs-cancel-button' ).on( 'click', function () { + commentBox.slideUp( 'normal', function () { + element.fadeTo( 0.2, 100, function () { commentBox.remove(); self.enableAllButtons(); } ); } ); } ); - $( '#cs-submit-button' ).click( function() { - if ( $( '#cs-body-edit-field' ).css( 'display' ) == 'none' ) { + $( '#cs-submit-button' ).on( 'click', function () { + if ( $( '#cs-body-edit-field' ).css( 'display' ) === 'none' ) { self.editCommentFromVE( element, commentBox, pageId ); } else { var commentText = $( '#cs-body-edit-field' ).val(); @@ -1277,34 +1274,36 @@ var commentstreams_controller = ( function( mw, $ ) { .closest( '.cs-stream' ) .find( '.cs-head-comment' ) .attr( 'data-id' ); - CommentStreamsQuerier.queryComment( parentId, function( result ) { - if ( result.error === undefined && - self.canDelete( result ) && - !self.moderatorFastDelete ) { - self.createDeleteButton( result.username ) - .insertAfter ( element - .closest( '.cs-stream' ) - .find( '.cs-head-comment' ) - .find( '.cs-comment-header' ) - .find( '.cs-edit-button' ) ); + CommentStreamsQuerier.queryComment( parentId, function ( queryResult ) { + if ( queryResult.error === undefined ) { + if ( self.canDelete( queryResult ) && !self.moderatorFastDelete ) { + self.createDeleteButton( queryResult.username ) + .insertAfter( element + .closest( '.cs-stream' ) + .find( '.cs-head-comment' ) + .find( '.cs-comment-header' ) + .find( '.cs-edit-button' ) ); + } + } else { + self.reportError( queryResult.error ); } element.remove(); self.enableAllButtons(); } ); } else { self.reportError( result.error ); - element.fadeTo( 0.2, 100, function() { + element.fadeTo( 0.2, 100, function () { self.enableAllButtons(); } ); } } ); } ); }, - editCommentFromVE: function( element, commentBox, pageId ) { + editCommentFromVE: function ( element, commentBox, pageId ) { var self = this; var editField = $( '#cs-body-edit-field' ); var veInstances = editField.getVEInstances(); - var curVEEditor = veInstances[veInstances.length - 1]; + var curVEEditor = veInstances[ veInstances.length - 1 ]; new mw.Api().post( { action: 'veforall-parsoid-utils', from: 'html', @@ -1315,14 +1314,15 @@ var commentstreams_controller = ( function( mw, $ ) { var commentText = data[ 'veforall-parsoid-utils' ].content; self.realEditComment( element, commentBox, pageId, commentText ); } ) - .fail( function ( data ) { - self.reportError( 'commentstreams-ve-conversion-error' ); - } ); + .fail( function () { + self.reportError( 'commentstreams-ve-conversion-error' ); + } ); }, - realEditComment: function( element, commentBox, pageId, commentText ) { + realEditComment: function ( element, commentBox, pageId, commentText ) { var self = this; + var commentTitle = null; if ( element.hasClass( 'cs-head-comment' ) ) { - var commentTitle = $( '#cs-title-edit-field' ).val(); + commentTitle = $( '#cs-title-edit-field' ).val(); if ( commentTitle === null || commentTitle.trim() === '' ) { self.reportError( 'commentstreams-validation-error-nocommenttitle' ); @@ -1339,58 +1339,63 @@ var commentstreams_controller = ( function( mw, $ ) { $( '#cs-submit-button' ).prop( 'disabled', true ); $( '#cs-cancel-button' ).prop( 'disabled', true ); - commentBox.fadeTo( 100, 0.2, function() { + commentBox.fadeTo( 100, 0.2, function () { new Spinner( self.spinnerOptions ) .spin( document.getElementById( 'cs-edit-box' ) ); CommentStreamsQuerier.editComment( commentTitle, commentText, - pageId, function( result ) { - $( '.spinner' ).remove(); - if ( result.error === undefined ) { - var comment = self.formatCommentInner( result ); - if ( element.closest( '.cs-stream' ).hasClass( 'cs-collapsed' ) ) { - comment.find( '.cs-comment-body' ).addClass( 'cs-hidden' ); - } - commentBox.slideUp( 'normal', function() { - comment.insertAfter( commentBox ); - commentBox.remove(); - element.remove(); - self.enableAllButtons(); - } ); - } else if ( result.error === 'commentstreams-api-error-commentnotfound' ) { - self.reportError( result.error ); - var parentId = element - .closest( '.cs-stream' ) - .find( '.cs-head-comment' ) - .attr( 'data-id' ); - CommentStreamsQuerier.queryComment( parentId, function( result ) { - if ( result.error === undefined && - self.canDelete( result ) && - !self.moderatorFastDelete ) { - self.createDeleteButton( result.username ) - .insertAfter ( element - .closest( '.cs-stream' ) - .find( '.cs-head-comment' ) - .find( '.cs-comment-header' ) - .find( '.cs-edit-button' ) ); + pageId, function ( result ) { + $( '.spinner' ).remove(); + if ( result.error === undefined ) { + var comment = self.formatCommentInner( result ); + if ( element.closest( '.cs-stream' ).hasClass( 'cs-collapsed' ) ) { + comment.find( '.cs-comment-body' ).addClass( 'cs-hidden' ); } - commentBox.slideUp( 'normal', function() { + commentBox.slideUp( 'normal', function () { + comment.insertAfter( commentBox ); commentBox.remove(); element.remove(); self.enableAllButtons(); } ); - } ); - } else { - self.reportError( result.error ); - commentBox.fadeTo( 0.2, 100, function() { - $( '#cs-submit-button' ).prop( 'disabled', false ); - $( '#cs-cancel-button' ).prop( 'disabled', false ); - } ); - } - } ); + } else if ( result.error === 'commentstreams-api-error-commentnotfound' ) { + self.reportError( result.error ); + var parentId = element + .closest( '.cs-stream' ) + .find( '.cs-head-comment' ) + .attr( 'data-id' ); + CommentStreamsQuerier.queryComment( parentId, function ( queryResult ) { + if ( queryResult.error === undefined ) { + if ( + self.canDelete( queryResult ) && + !self.moderatorFastDelete + ) { + self.createDeleteButton( queryResult.usernam ) + .insertAfter( element + .closest( '.cs-stream' ) + .find( '.cs-head-comment' ) + .find( '.cs-comment-header' ) + .find( '.cs-edit-button' ) ); + } + } else { + self.reportError( queryResult.error ); + } + commentBox.slideUp( 'normal', function () { + commentBox.remove(); + element.remove(); + self.enableAllButtons(); + } ); + } ); + } else { + self.reportError( result.error ); + commentBox.fadeTo( 0.2, 100, function () { + $( '#cs-submit-button' ).prop( 'disabled', false ); + $( '#cs-cancel-button' ).prop( 'disabled', false ); + } ); + } + } ); } ); }, - canEdit: function( comment ) { + canEdit: function ( comment ) { var username = comment.username; if ( this.isLoggedIn && ( mw.config.get( 'wgUserName' ) === username || this.moderatorEdit ) ) { @@ -1398,7 +1403,7 @@ var commentstreams_controller = ( function( mw, $ ) { } return false; }, - canDelete: function( comment ) { + canDelete: function ( comment ) { var username = comment.username; if ( this.isLoggedIn && ( mw.config.get( 'wgUserName' ) === username || this.moderatorDelete ) && @@ -1407,12 +1412,17 @@ var commentstreams_controller = ( function( mw, $ ) { } return false; }, - reportError: function( message ) { - var message_text = mw.message( message ).text(); + reportError: function ( message ) { + /* eslint-disable mediawiki/msg-doc */ + var message_text = message; + var mwmessage = mw.message( message ); + if ( mwmessage.exists() ) { + message_text = mwmessage.text(); + } var ok_text = mw.message( 'commentstreams-dialog-buttontext-ok' ).text(); var dialog = new OO.ui.MessageDialog(); var window_manager = new OO.ui.WindowManager(); - $( '#cs-comments' ).append( window_manager.$element ); + $( '.cs-comments' ).append( window_manager.$element ); window_manager.addWindows( [ dialog ] ); window_manager.openWindow( dialog, { message: message_text, @@ -1424,15 +1434,17 @@ var commentstreams_controller = ( function( mw, $ ) { } ); } }; -}( mediaWiki, jQuery ) ); +}() ); window.CommentStreamsController = commentstreams_controller; -( function( mw, $ ) { +( function () { + 'use strict'; + $( document ) - .ready( function() { + .ready( function () { if ( mw.config.exists( 'CommentStreams' ) ) { window.CommentStreamsController.initialize(); } } ); -}( mediaWiki, jQuery ) ); +}() ); |