User:Valcio/todo.js
(Redirected from User:ValeJappo/todo.js)
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
( 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 ) );