User:BZPN/PNHelper.js: Difference between revisions
From Test Wiki
Content deleted Content added
No edit summary Tag: Reverted |
Tag: Undo |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
mw.loader.using('mediawiki. |
mw.loader.using(['mediawiki.api', 'oojs-ui'], function() { |
||
function createTaskModal() { |
|||
// Dodanie przycisku do paska bocznego |
|||
// Główne okno modalne |
|||
mw.util.addPortletLink( |
|||
var taskModal = new OO.ui.WindowManager(); |
|||
'p-tb', // Sekcja na pasku bocznym |
|||
$('body').append(taskModal.$element); |
|||
'#', // Link (placeholder) |
|||
'Dodaj zadanie', // Tekst przycisku |
|||
'dodaj-zadanie-przycisk', // ID przycisku |
|||
'Dodaj nowe zadanie' // Opis przycisku (tooltip) |
|||
); |
|||
// |
// Klasa okna modalnego |
||
var TaskDialog = function() { |
|||
function showPopup() { |
|||
TaskDialog.super.apply(this, arguments); |
|||
// Tworzenie elementów popupu |
|||
}; |
|||
var $popup = $('<div>', { id: 'zadanie-popup', class: 'popup-okno' }).css({ |
|||
OO.inheritClass(TaskDialog, OO.ui.ProcessDialog); |
|||
position: 'fixed', |
|||
top: '50%', |
|||
TaskDialog.static.name = 'taskDialog'; |
|||
TaskDialog.static.title = 'Dodaj zadanie'; |
|||
transform: 'translate(-50%, -50%)', |
|||
TaskDialog.static.actions = [ |
|||
background: '#fff', |
|||
{ |
|||
action: 'save', |
|||
label: 'Zapisz', |
|||
flags: ['primary', 'progressive'] |
|||
}); |
|||
}, |
|||
{ |
|||
action: 'cancel', |
|||
label: 'Anuluj', |
|||
flags: ['safe', 'close'] |
|||
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.'); |
|||
} |
} |
||
]; |
|||
TaskDialog.prototype.initialize = function() { |
|||
TaskDialog.super.prototype.initialize.apply(this, arguments); |
|||
// Pole tytułu zadania |
|||
this.titleInput = new OO.ui.TextInputWidget({ |
|||
placeholder: 'Wprowadź tytuł zadania' |
|||
}); |
|||
// Pole opisu zadania |
|||
this.descriptionInput = new OO.ui.MultilineTextInputWidget({ |
|||
placeholder: 'Szczegółowy opis zadania', |
|||
rows: 5 |
|||
}); |
|||
// Przycisk dodawania linków |
|||
this.addLinkButton = new OO.ui.ButtonWidget({ |
|||
label: 'Dodaj linki do tekstu', |
|||
icon: 'link' |
|||
}); |
|||
// Przycisk stylowania tekstu |
|||
this.styleTextButton = new OO.ui.ButtonWidget({ |
|||
label: 'Style tekstu', |
|||
icon: 'formatting' |
|||
}); |
|||
// Układ pionowy elementów |
|||
var contentLayout = new OO.ui.VerticalLayout({ |
|||
items: [ |
|||
this.titleInput, |
|||
this.descriptionInput, |
|||
new OO.ui.HorizontalLayout({ |
|||
items: [ |
|||
this.addLinkButton, |
|||
this.styleTextButton |
|||
] |
|||
}) |
|||
] |
|||
}); |
|||
// Dodanie layoutu do panelu |
|||
this.$body.append(contentLayout.$element); |
|||
}; |
|||
TaskDialog.prototype.getActionProcess = function(action) { |
|||
if (action === 'save') { |
|||
return new OO.ui.Process(function() { |
|||
// Logika zapisu zadania |
|||
console.log('Tytuł:', this.titleInput.getValue()); |
|||
console.log('Opis:', this.descriptionInput.getValue()); |
|||
this.close(); |
|||
}, this); |
|||
} |
|||
if (action === 'cancel') { |
|||
return new OO.ui.Process(function() { |
|||
this.close(); |
|||
}, this); |
|||
} |
|||
return TaskDialog.super.prototype.getActionProcess.call(this, action); |
|||
}; |
|||
// Dodanie obsługi zdarzeń dla przycisków specjalnych |
|||
TaskDialog.prototype.onDialogReady = function() { |
|||
this.addLinkButton.on('click', function() { |
|||
// Logika dodawania linków |
|||
alert('Funkcja dodawania linków w trakcie implementacji'); |
|||
}); |
|||
this.styleTextButton.on('click', function() { |
|||
// Logika stylowania tekstu |
|||
alert('Funkcja stylowania tekstu w trakcie implementacji'); |
|||
}); |
|||
}; |
|||
// Stworzenie instancji dialogu |
|||
var taskDialog = new TaskDialog({ |
|||
size: 'large' |
|||
}); |
}); |
||
// |
// Dodanie dialogu do menedżera okien |
||
taskModal.addWindows([taskDialog]); |
|||
var $cancelButton = $('<button>', { text: 'Anuluj' }).on('click', function() { |
|||
$popup.remove(); |
|||
// Funkcja otwierania modala |
|||
}).css({ 'margin-top': '10px', 'background-color': '#f44336', color: '#fff' }); |
|||
function openTaskModal() { |
|||
taskModal.openWindow(taskDialog); |
|||
} |
|||
// Dodanie |
// Dodanie przycisku do paska narzędzi |
||
function addTaskButton() { |
|||
$popup.append($titleInput, $descriptionInput, $editButtons, $linkButton, $cancelButton); |
|||
var $toolbar = $('#p-tb .vector-menu-content-list'); |
|||
var $taskButton = $('<li>') |
|||
.append( |
|||
$('<a>') |
|||
.text('Dodaj zadanie') |
|||
.on('click', openTaskModal) |
|||
); |
|||
$toolbar.append($taskButton); |
|||
} |
|||
// |
// Inicjalizacja po załadowaniu strony |
||
$( |
$(document).ready(addTaskButton); |
||
} |
} |
||
// |
// Wywołanie funkcji inicjalizującej |
||
createTaskModal(); |
|||
$('#dodaj-zadanie-przycisk').on('click', function(e) { |
|||
e.preventDefault(); |
|||
showPopup(); |
|||
}); |
|||
}); |
}); |
||