MediaWiki:Gadget-RecentChangesChat.js

$( function() {
	'use strict';
	var page = 'Wikipedia:Senaste ändringar/Chatt';
	function getMaximumPosts() {
		if ( window.localStorage && localStorage.getItem( 'gadget-rcchat-maximumposts' ) ) {
			return localStorage.getItem( 'gadget-rcchat-maximumposts' );
		} else {
			return 5;
		}
	}
	function getPosts() {
		( new mw.Api() ).get( {
			action: 'parse',
			page: page,
			prop: 'text'
		} ).done( function( result, jqXHR ) {
			var latestposts = $( result.parse.text[ '*' ] ).filter( function() {
				return this.nodeType === 1;
			} ).slice( -Number( getMaximumPosts() ) );
			var posts;
			var latestviewed;
			var latesttime = latestposts.last().attr( 'data-gadget-rcchat-time' );
			if ( $( '.oo-ui-window-active' ).length ) {
				$( '#gadget-rcchat-posts' ).empty().append( latestposts );
				posts = $( '#gadget-rcchat-posts' ).children( '.gadget-rcchat-postcontainer' );
				posts.each( function( i, e ) {
					var time = $( e ).attr( 'data-gadget-rcchat-time' );
					var str = ( new Date( Number( time ) ) ).toLocaleString();
					$( e ).append( '<div class="gadget-rcchat-time">' + str + '</div>' );
				} );
				latestviewed = posts.last().attr( 'data-gadget-rcchat-time' );
				if ( latestviewed && window.localStorage ) {
					localStorage.setItem( 'gadget-rcchat-latestviewed', latestviewed );
				}
			}
			if ( window.localStorage && localStorage.getItem( 'gadget-rcchat-latestviewed' ) ) {
				if ( latesttime !== localStorage.getItem( 'gadget-rcchat-latestviewed' ) ) {
					$( '#gadget-rcchat' ).addClass( 'gadget-rcchat-unread' );
				} else {
					$( '#gadget-rcchat' ).removeClass( 'gadget-rcchat-unread' );
				}
			}
		} );
	}
	if ( mw.config.get( 'wgCanonicalSpecialPageName' ) === 'Recentchanges' ) {
		getPosts();
		$( '#rclinks_snabbraderingar' ).after( ' <span id="gadget-rcchat-dot">·</span> <a href="#" id="gadget-rcchat">Chatt</a>' );
		$( '#gadget-rcchat' ).click( function( e ) {
			e.preventDefault();
			// Creating and opening a simple dialog window.

			// Subclass Dialog class. Note that the OOjs inheritClass() method extends the parent constructor's prototype and static methods and properties to the child constructor.

			function MyDialog( config ) {
				MyDialog.super.call( this, config );
			}
			if ( $( '.oo-ui-window-active' ).length === 0 ) {
				getPosts();
				OO.inheritClass( MyDialog, OO.ui.Dialog );

				// Specify a title statically (or, alternatively, with data passed to the opening() method).
				MyDialog.static.name = 'gadgetrecentchangeschatdialog';
				MyDialog.static.title = 'Simple dialog';

				// Customize the initialize() function: This is where to add content to the dialog body and set up event handlers.
				MyDialog.prototype.initialize = function () {
					// Call the parent method
					MyDialog.super.prototype.initialize.call( this );
					// Create and append a layout and some content.
					this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
					this.content.$element.append( '<div><div id="gadget-rcchat-posts"></div><input id="gadget-rcchat-input"><button id="gadget-rcchat-button">Skicka</button></div>' );
					this.$body.append( this.content.$element );
				};

				// Set up the ready mode of the window. 
				MyDialog.prototype.getReadyProcess = function ( data ) {
					return MyDialog.super.prototype.getReadyProcess.call( this, data )
					.next( function () {
						$( '#gadget-rcchat-input' ).focus();
					}, this );
				};

				// Use the getTeardownProcess() method to perform actions whenever the dialog is closed.
				// This method provides access to data passed into the window's close() method
				// or the window manager's closeWindow() method.
				MyDialog.prototype.getTeardownProcess = function ( data ) {
					return MyDialog.super.prototype.getTeardownProcess.call( this, data )
					.first( function () {
						// Perform any cleanup as needed
						$( '.oo-ui-windowManager' ).remove();
						getPosts();
					}, this );
				};

				// Make the window.
				var myDialog = new MyDialog();

				// Create and append a window manager, which will open and close the window.
				var windowManager = new OO.ui.WindowManager();
				$( 'body' ).append( windowManager.$element );

				// Add the window to the window manager using the addWindows() method.
				windowManager.addWindows( [ myDialog ] );

				// Open the window!
				windowManager.openWindow( myDialog );
				$( '#gadget-rcchat-button' ).click( function() {
					if ( !/^\s*$/.test( $( '#gadget-rcchat-input' ).val() ) ) {
						mw.user.getNameOrIP( function( nameOrIP ) {
							( new mw.Api() ).postWithToken( 'csrf', {
								action: 'edit',
								title: page,
								appendtext: '\n<div class="gadget-rcchat-postcontainer" data-gadget-rcchat-time="' + Date.now() + '"><span class="gadget-rcchat-user">' + nameOrIP + '</span><span class="gadget-rcchat-separator">:</span><span class="gadget-rcchat-post">' + $( '#gadget-rcchat-input' ).val() + '</span></div>',
								minor: ''
							} ).done( function( result, jqXHR ) {
								$( '#gadget-rcchat-input' ).val( '' );
								getPosts();
							} );
						} );
					}
				} );
				$( '#gadget-rcchat-input' ).keyup( function( e ) {
					if ( e.which === 13 ) {
						$( '#gadget-rcchat-button' ).trigger( 'click' );
					}
				} );
			}
		} );
	}
} );