User:Valcio/todo.js

( function ( mw, $ ) {
	'use strict';
    mw.loader.load( 'oojs-ui-core' );
    mw.loader.load( 'oojs-ui-widgets' );
    mw.loader.load( 'oojs-ui-toolbars' );
    mw.loader.load( 'oojs-ui-windows' );
	mw.loader.addStyleTag(".todo-error input {	background-color: #ff9696;}\n.wrapper {	width: 60%;	margin-left: auto;	margin-right: auto;}\n.todo-list .oo-ui-optionWidget {	border-bottom: 1px solid #666;}\n.oo-ui-selectWidget-unpressed .oo-ui-optionWidget-selected {	background-color: #80ccff;}\n.oo-ui-optionWidget-highlighted {	background-color: #b9e3ff;}\n.oo-ui-inputWidget {	margin-bottom: 0.5em;}\n.todo-list .oo-ui-labelElement-label {	margin-left: 0.25em;}\n.oo-ui-labelElement .oo-ui-optionWidget {	padding: 0.25em;}\n.todo-itemWidget {	display: inline-table;}\n.todo-itemWidget.oo-ui-optionWidget.oo-ui-labelElement >.oo-ui-labelElement-label {	display: table-cell;	width: 100%;	padding: 0.5em;}\n.todo-highlight {background-color: #fc3; border-radius: 2px; padding: 0.25em 0.8em 0.2em 0.8em; font-weight: normal; color:black}");
	var content=[];
	//OOui Dialogs
	var currentElement, lastLine=-1;
	function updateToDo(sum){
		var printcontent=content[0];
		for(var i in content)
			if(content[i]!=null && content[i]!=undefined)
				if(i>0)
					printcontent=printcontent+"\n"+content[i];
		var params2={
	        action: "edit",
	        recreate: true,
	        title: "Utente:ValeJappo/da_fare",
	        text: printcontent,
	        summary: sum,
	        format: "json"
	    };
		api.postWithToken( 'csrf', params2 );
	}
	
	function closeWindow(){
		currentElement.close();
	}

	//Get User:USERnaME/da_fare content
	var params={
		"action": "query",
		"format": "json",
		"prop": "revisions",
		"titles": "Utente:ValeJappo/da_fare",
		"formatversion": "2",
		"rvprop": "content",
		"rvslots": "*"
	};
	var queryresult, api = new mw.Api();
	api.postWithToken( 'csrf', params ).done( function ( data ) {
		queryresult=data.query.pages[0].revisions[0].slots.main.content; //save content in queryresult
		var deltwo=false;
		if(queryresult==""){
			queryresult="IGNOREME\nTHERE ARE NOT ELEMETS";
			deltwo=true;
		}
		content = queryresult.match(/[^\r\n]+/g); //separate each line
		if(deltwo){
			content.shift();
			content.shift();
		}
			var node = mw.util.addPortletLink( //add link "da fare"
		    'p-personal',
		    '#',
		    "da fare",
		    "p-todo"
			);
			$( node ).on( 'click', function () { //on click
				function MyDialog( config ) {
			    	MyDialog.super.call( this, config );
				}
				OO.inheritClass( MyDialog, OO.ui.Dialog );
				MyDialog.static.name = 'myDialog';
				MyDialog.prototype.initialize = function () {
					MyDialog.super.prototype.initialize.call( this );
					this.content = new OO.ui.PanelLayout( { padded: true, expanded: false } );
					//Inspired by https://doc.wikimedia.org/oojs-ui/master/demos/tutorials/collection/basics2/contents.html
						//Defining functions
						var ToDoItemWidget = function ( config ) {
							config = config || {};
							ToDoItemWidget.super.call( this, config );
						
							this.creationTime = config.creationTime;
						
							this.deleteButton = new OO.ui.ButtonWidget( {
								label: 'Delete'
							} );
						
							this.$element
								.addClass( 'todo-itemWidget' )
								.append( this.deleteButton.$element );
						
							this.deleteButton.connect( this, {
								click: 'onDeleteButtonClick'
							} );
						};
						
						OO.inheritClass( ToDoItemWidget, OO.ui.OptionWidget );
						
						ToDoItemWidget.prototype.getCreationTime = function () {
							return this.creationTime;
						};
						
						ToDoItemWidget.prototype.getPrettyCreationTime = function () {
							var time = new Date( this.creationTime ),
								hour = time.getHours(),
								minute = time.getMinutes(),
								second = time.getSeconds(),
								temp = String( ( hour > 12 ) ? hour - 12 : hour ),
								monthNames = [
									'Jan',
									'Feb',
									'Mar',
									'Apr',
									'May',
									'Jun',
									'Jul',
									'Aug',
									'Sep',
									'Oct',
									'Nov',
									'Dec'
								];
						
							if ( hour === 0 ) {
								temp = '12';
							}
							temp += ( ( minute < 10 ) ? ':0' : ':' ) + minute;
							temp += ( ( second < 10 ) ? ':0' : ':' ) + second;
							temp += ( hour >= 12 ) ? ' P.M.' : ' A.M.';
							return [
								time.getDate(),
								monthNames[ time.getMonth() ],
								time.getFullYear() + ', ',
								temp
							].join( ' ' );
						};
						
						ToDoItemWidget.prototype.onDeleteButtonClick = function () {
							this.emit( 'delete' );
							content[this.data]=null;
							updateToDo("-1 todo");
							myDialog.updateSize();
						};
						
						var ToDoListWidget = function ToDoListWidget( config ) {
							config = config || {};
						
							// Call parent constructor
							ToDoListWidget.super.call( this, config );
						
							this.aggregate( {
								delete: 'itemDelete'
							} );
						
							this.connect( this, {
								itemDelete: 'onItemDelete'
							} );
						};
						
						OO.inheritClass( ToDoListWidget, OO.ui.SelectWidget );
						
						ToDoListWidget.prototype.onItemDelete = function ( itemWidget ) {
							this.removeItems( [ itemWidget ] );
						};
						
					//Creating UI	
					var input = new OO.ui.TextInputWidget( {
							placeholder: 'Add a ToDo item'
						} ),
						list = new ToDoListWidget( {
							classes: [ 'todo-list' ]
						} ),
						info = new OO.ui.LabelWidget( {
							label: 'Information',
							classes: [ 'todo-info' ]
						} );
					
					//Load query results

					for(var i in content){
						list.addItems( [
							new ToDoItemWidget( {
								data: i,
								label: content[i],
								creationTime: Date.now()
							} )
						] );
						lastLine=i;
					}
					myDialog.updateSize();
					
					// Respond to 'enter' keypress
					input.on( 'enter', function () {
						// Check for duplicates and prevent empty input
						if ( content.indexOf(input.getValue())!=-1 || input.getValue() === '' ) {
							input.$element.addClass( 'todo-error' );
							return;
						}
						input.$element.removeClass( 'todo-error' );
				
						list.on( 'choose', function ( item ) {
							info.setLabel( item.getValue() + ' (' +
								item.getPrettyCreationTime() + ')' );
						} );
				
						// Add the items
						lastLine=lastLine+1;
						content.push(input.getValue());
						list.addItems( [
							new ToDoItemWidget( {
								data: lastLine,
								label: input.getValue(),
								creationTime: Date.now()
							} )
						] );
						input.setValue( '' );
						myDialog.updateSize();
						updateToDo("+1 todo");
					} );
				
					// Append the app widgets
					this.$body.append(
						input.$element,
						list.$element,
						info.$element
					);
				};
				MyDialog.prototype.getBodyHeight = function () {
			    	return this.$body.outerHeight( true );
				};
				var myDialog = new MyDialog( {
				    size: 'medium'
				} );
				var windowManager = new OO.ui.WindowManager();
				currentElement=windowManager;
				$( document.body ).append( windowManager.$element );
				windowManager.addWindows( [ myDialog ] );
				windowManager.openWindow( myDialog );
				
		});	
		if(queryresult!="IGNOREME\nTHERE ARE NOT ELEMETS")
			document.getElementById("p-todo").getElementsByTagName("a")[0].classList.add("todo-highlight"); 
	} );
	
}( mediaWiki, jQuery ) );