User:BZPN/PNHelper.js: Difference between revisions

From Test Wiki
Jump to navigation Jump to search
← Older editNewer edit →
Content deleted Content added
No edit summary
Tag: Reverted
Restored revision 53155 by BZPN (Restorer)
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', // Tekst przycisku
$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.');
}
});


// Przycisk Anuluj
// Funkcja tworząca okno dialogowe
function createDialog() {
var $cancelButton = $('<button>', { text: 'Anuluj' }).on('click', function() {
$popup.remove();
var dialog = new OO.ui.MessageDialog({
size: 'medium'
}).css({ 'margin-top': '10px', 'background-color': '#f44336', color: '#fff' });
});


// Dodanie elementów do popupu
// 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();
showPopup();
});

// 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>

Revision as of 16:25, 20 November 2024

// <nowiki>
mw.loader.using(['oojs-ui-core', 'oojs-ui-windows'], function () {
    mw.hook('wikipage.content').add(function ($content) {
        // Tworzenie przycisku
        var $button = $('<li id="t-custom-task"><a href="#"></a></li>');
        $button.find('a').text('Dodaj zadanie');

        // Dodanie przycisku do paska narzędzi
        $('#p-tb ul').append($button);

        // Funkcja tworząca okno dialogowe
        function createDialog() {
            var dialog = new OO.ui.MessageDialog({
                size: 'medium'
            });

            // Tworzenie pól formularza
            var titleInput = new OO.ui.TextInputWidget({
                placeholder: 'Wpisz tytuł zadania'
            });

            var descriptionInput = new OO.ui.MultilineTextInputWidget({
                placeholder: 'Wpisz opis zadania',
                rows: 5
            });

            var addLinkButton = new OO.ui.ButtonWidget({
                label: 'Dodaj link',
                disabled: true // Na razie nieaktywny
            });

            // 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>
Retrieved from "https://testwiki.wiki/index.php?title=User:BZPN/PNHelper.js&oldid=53164"