User:Mooeypoo/articlesandbox.js

var ARTICLE_REPO = 'User:Mooeypoo/test/articlesandbox', // Language messages = { he: { 'articlesandbox-title': 'אשף ערכים', 'articlesandbox-button': 'אשף ערכים', 'articlesandbox-dismiss': 'ביטול', 'articlesandbox-create-article': ' ערך', 'articlesandbox-sections': 'רשימת ערכים' },		en: { 'articlesandbox-title': 'Article helper', 'articlesandbox-button': 'Article helper', 'articlesandbox-dismiss': 'Dismiss', 'articlesandbox-create-article': 'Create article', 'articlesandbox-sections': 'Available article templates' }	};

// Import CSS importStylesheet( 'User:Mooeypoo/articlesandbox.css' ); // TODO: Add css loading to the $.ready promise with $.when // mw.loader.load( 'https://www.mediawiki.org/w/index.php?title=User:Mooeypoo/articlesandbox.css&action=raw&ctype=text/css', 'text/css' );

// Set language, with default 'English' mw.messages.set(messages['en']); var lang = mw.config.get('wgUserLanguage'); if (lang && lang != 'en' && lang in messages) { mw.messages.set(messages[lang]); }

mw.loader.using( [ 'oojs-ui', 'mediawiki.util', 'mediawiki.api' ] ).then( function {	// Dialog settings; this must be inside the loader.using scope	// since it requires OOUI	var ArticleDialog = function ArticleDialog( config ) {		ArticleDialog.parent.call( this, config );	};	OO.inheritClass( ArticleDialog, OO.ui.ProcessDialog );	ArticleDialog.static.actions = [		{ action: 'create', label: mw.msg( 'articlesandbox-create-article' ), flags: [ 'primary', 'progressive' ] },		{ label: mw.msg( 'articlesandbox-dismiss' ), flags: 'safe' }	];	ArticleDialog.static.title = mw.msg( 'articlesandbox-title' );	ArticleDialog.static.name = 'articlehelperdialog';	ArticleDialog.prototype.initialize = function  {		var dialog = this;		ArticleDialog.parent.prototype.initialize.apply( this, arguments );		this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );

// Build the dialog body // this.content.$element.append;

this.$body.append( this.content.$element ); };

ArticleDialog.prototype.onArticleListChoose = function ( item ) { console.log( item.getData ); };

ArticleDialog.prototype.createArticleListWidget = function ( articles ) { var listWidget = new OO.ui.SelectWidget( {				classes: [ 'articlesandbox-articles-section-list' ]			} ), pages = articles ? Object.keys( articles ) : [];

// Event listWidget.connect( this, { choose: 'onArticleListChoose' } );

// Add items from top layer pages.forEach( function ( page ) {			var items = [];			if ( $.isEmptyObject( articles[ page ]._articles ) ) {				// This is a leaf article, add item				items.push( new OO.ui.DecoratedOptionWidget( {					data: articles[ page ]._path,					label: page				} ) );			} else {				// This is a category of sub pages, ignore that,				// it's being handled in #addArticleSection			}			listWidget.addItems( items );		} ); return listWidget; };

ArticleDialog.prototype.createArticlesSection = function ( title, articles ) { var dialog = this, listWidget = this.createArticleListWidget( articles ), pages = articles ? Object.keys( articles ) : [], titleWidget = new OO.ui.LabelWidget( {				classes: [ 'articlesandbox-articles-section-title' ],				label: title			} ), $section = $( ' ' ) .addClass( 'articlesandbox-articles-section' ) .append( titleWidget.$element, listWidget.$element );

// Look for sub sections pages.forEach( function ( page ) {			if ( !$.isEmptyObject( articles[ page ]._articles ) ) {				// This is another section, recurse				$section.append( dialog.createArticlesSection( page, articles[ page ]._articles ) );			}		} );		return $section; };

/**	 * Build the content based on the article structure given * 	 * @param {Object} articles Article structure with paths */	ArticleDialog.prototype.buildContent = function ( articles ) { var $articleSection = this.createArticlesSection(			mw.msg( 'articlesandbox-sections' ),			articles		); this.content.$element.append( $articleSection ); };

ArticleDialog.prototype.getBodyHeight = function { return this.content.$element.outerHeight( true ); };

ArticleDialog.prototype.getActionProcess = function ( action ) { var dialog = this; if ( action === 'create' ) { return new OO.ui.Process( function {	        	alert( 'creating...' );	            // dialog.close( { action: action } );	        } ); }	   return ArticleDialog.parent.prototype.getActionProcess.call( this, action ); };

var mainDialog = new ArticleDialog, windowManager = new OO.ui.WindowManager, mainButton = new OO.ui.ButtonWidget( {			label: mw.msg( 'articlesandbox-button' ),			icon: 'article',			flags: [ 'progressive' ]		} );

windowManager.addWindows( [ mainDialog ] );

// Attach events mainButton.on( 'click', function {		windowManager.openWindow( mainDialog );	} );

// Get the data buildArticleStructure .then( function ( articles ) {			console.log( 'final', articles );			mainDialog.buildContent( articles );		} );

$( document ).ready( function {		// Attach to DOM		$( '#right-navigation' ).append( mainButton.$element );		$( 'body' ).append( windowManager.$element );	} );

} );

/** * Build the article structure from the API */ function buildArticleStructure { var path, flatPath, articles = {};

return ( new mw.Api ).get( {		action: 'query',		format: 'json',		list: 'prefixsearch',		pssearch: ARTICLE_REPO	} ) .then(		// Success		function ( queryData ) {			var articlesArr = queryData.query.prefixsearch;			articlesArr.forEach( function ( articleData ) { var pieces = [], title = articleData.title;

if ( title.indexOf( ARTICLE_REPO ) !== 0 ) { return; }				pieces = title.replace( ARTICLE_REPO, '' ).split( '/' ); pieces = pieces.filter( function ( piece ) {					return !!piece; // Get rid of empty strings				} );

// Build article structure path = articles; flatPath = ''; pieces.forEach( function ( piece ) {					flatPath += '/' + piece;

path[ piece ] = path[ piece ] || { _path: ARTICLE_REPO + flatPath, _articles: {} };					// Shift reference path = path[piece]._articles; } );			} );			return articles; },		// Convert failure to empty success function { return $.Deferred.resolve( {} ); }	); }

function createDialog { }