User:BZPN/PNHelper.js: Difference between revisions
From Test Wiki
Content deleted Content added
No edit summary Tag: Reverted |
Tags: Undo Reverted |
||
| Line 1: | Line 1: | ||
// <nowiki> |
|||
mw.loader.using('mediawiki.util').then(function() { |
|||
mw.loader.using(['oojs-ui-core', 'oojs-ui-windows'], function () { |
|||
// Dodanie przycisku do paska bocznego |
|||
mw.hook('wikipage.content').add(function ($content) { |
|||
mw.util.addPortletLink( |
|||
// Tworzenie przycisku |
|||
'p-tb', // Sekcja na pasku bocznym |
|||
var $button = $('<li id="t-custom-task"><a href="#"></a></li>'); |
|||
'#', // Link (placeholder) |
|||
'Dodaj zadanie' |
$button.find('a').text('Dodaj zadanie'); |
||
'dodaj-zadanie-przycisk', // ID przycisku |
|||
'Dodaj nowe zadanie' // Opis przycisku (tooltip) |
|||
); |
|||
// Dodanie przycisku do paska narzędzi |
|||
// Funkcja wyświetlająca popup |
|||
$('#p-tb ul').append($button); |
|||
function showPopup() { |
|||
// Tworzenie elementów popupu |
|||
var $popup = $('<div>', { id: 'zadanie-popup', class: 'popup-okno' }).css({ |
|||
position: 'fixed', |
|||
top: '50%', |
|||
left: '50%', |
|||
transform: 'translate(-50%, -50%)', |
|||
background: '#fff', |
|||
padding: '20px', |
|||
border: '1px solid #ccc', |
|||
'z-index': 1000 |
|||
}); |
|||
// Pole do wpisania tytułu zadania |
|||
var $titleInput = $('<input>', { |
|||
type: 'text', |
|||
id: 'zadanie-tytul', |
|||
placeholder: 'Wpisz tytuł zadania' |
|||
}).css({ width: '100%', 'margin-bottom': '10px' }); |
|||
// Większe pole do wpisania opisu zadania |
|||
var $descriptionInput = $('<textarea>', { |
|||
id: 'zadanie-opis', |
|||
placeholder: 'Wpisz opis zadania' |
|||
}).css({ width: '100%', height: '100px', 'margin-bottom': '10px' }); |
|||
// Przycisk do dodawania stylów tekstu |
|||
var $editButtons = $('<div>', { id: 'edit-buttons' }).css({ 'margin-bottom': '10px' }); |
|||
var $boldButton = $('<button>', { text: 'B' }).css({ 'font-weight': 'bold' }).on('click', function() { |
|||
document.execCommand('bold'); |
|||
}); |
|||
var $italicButton = $('<button>', { text: 'I' }).css({ 'font-style': 'italic' }).on('click', function() { |
|||
document.execCommand('italic'); |
|||
}); |
|||
$editButtons.append($boldButton, $italicButton); |
|||
// Przycisk do dodawania linków do zaznaczonych wyrazów |
|||
var $linkButton = $('<button>', { text: 'Dodaj link' }).on('click', function() { |
|||
var selectedText = window.getSelection().toString(); |
|||
if (selectedText) { |
|||
var url = prompt('Podaj URL dla zaznaczonego tekstu:'); |
|||
if (url) { |
|||
document.execCommand('createLink', false, url); |
|||
} |
|||
} else { |
|||
alert('Zaznacz tekst, aby dodać link.'); |
|||
} |
|||
}); |
|||
// |
// Funkcja tworząca okno dialogowe |
||
function createDialog() { |
|||
var $cancelButton = $('<button>', { text: 'Anuluj' }).on('click', function() { |
|||
var dialog = new OO.ui.MessageDialog({ |
|||
size: 'medium' |
|||
}).css({ 'margin-top': '10px', 'background-color': '#f44336', color: '#fff' }); |
|||
}); |
|||
// |
// Tworzenie pól formularza |
||
var titleInput = new OO.ui.TextInputWidget({ |
|||
$popup.append($titleInput, $descriptionInput, $editButtons, $linkButton, $cancelButton); |
|||
placeholder: 'Wpisz tytuł zadania' |
|||
}); |
|||
var descriptionInput = new OO.ui.MultilineTextInputWidget({ |
|||
// Dodanie popupu do dokumentu |
|||
placeholder: 'Wpisz opis zadania', |
|||
$('body').append($popup); |
|||
rows: 5 |
|||
} |
|||
}); |
|||
var addLinkButton = new OO.ui.ButtonWidget({ |
|||
// Podpięcie funkcji do kliknięcia przycisku |
|||
label: 'Dodaj link', |
|||
$('#dodaj-zadanie-przycisk').on('click', function(e) { |
|||
disabled: true // Na razie nieaktywny |
|||
e.preventDefault(); |
|||
}); |
|||
// Konfiguracja okna dialogowego |
|||
var config = { |
|||
title: 'Dodaj nowe zadanie', |
|||
message: new OO.ui.FieldsetLayout({ |
|||
items: [ |
|||
new OO.ui.FieldLayout(titleInput, { |
|||
label: 'Tytuł', |
|||
align: 'top' |
|||
}), |
|||
new OO.ui.FieldLayout(descriptionInput, { |
|||
label: 'Opis', |
|||
align: 'top' |
|||
}), |
|||
new OO.ui.FieldLayout(addLinkButton, { |
|||
align: 'top' |
|||
}) |
|||
] |
|||
}), |
|||
actions: [ |
|||
{ |
|||
action: 'cancel', |
|||
label: 'Anuluj', |
|||
flags: 'safe' |
|||
}, |
|||
{ |
|||
action: 'submit', |
|||
label: 'Zapisz', |
|||
flags: ['primary', 'progressive'] |
|||
} |
|||
] |
|||
}; |
|||
// Otwieranie okna dialogowego |
|||
var windowManager = new OO.ui.WindowManager(); |
|||
$('body').append(windowManager.$element); |
|||
windowManager.addWindows([dialog]); |
|||
windowManager.openWindow(dialog, config); |
|||
// Obsługa zamykania okna |
|||
dialog.on('closing', function (windowManager, promise) { |
|||
promise.done(function (data) { |
|||
if (data && data.action === 'submit') { |
|||
console.log('Zapisano zadanie:', titleInput.getValue(), descriptionInput.getValue()); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
// Dodanie obsługi kliknięcia przycisku |
|||
$button.on('click', function (e) { |
|||
e.preventDefault(); |
|||
createDialog(); |
|||
}); |
|||
}); |
}); |
||
}); |
}); |
||
// </nowiki> |
|||
