User:BZPN/PNHelper.js: Difference between revisions

From Test Wiki
Jump to navigation Jump to search
Content deleted Content added
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
mw.loader.using(['mediawiki.api', 'oojs-ui'], function() {
mw.loader.using('mediawiki.util').then(function() {
// Tworzenie przycisku
// Dodanie przycisku do paska bocznego
mw.util.addPortletLink(
var $button = $('<li id="t-custom-task"><a href="#"></a></li>');
'p-tb', // Sekcja na pasku bocznym
$button.find('a').text('Dodaj zadanie');
'#', // Link (placeholder)
'Dodaj zadanie', // Tekst przycisku
'dodaj-zadanie-przycisk', // ID przycisku
'Dodaj nowe zadanie' // Opis przycisku (tooltip)
);


// Funkcja wyświetlająca popup
// Dodanie przycisku do paska narzędzi
function showPopup() {
$('#p-tb ul').append($button);
// Tworzenie elementów popupu

var $popup = $('<div>', { id: 'zadanie-popup', class: 'popup-okno' }).css({
function createTaskModal() {
// Główne okno modalne
position: 'fixed',
var taskModal = new OO.ui.WindowManager();
top: '50%',
left: '50%',
$('body').append(taskModal.$element);
transform: 'translate(-50%, -50%)',

// Klasa okna modalnego
background: '#fff',
var TaskDialog = function() {
padding: '20px',
TaskDialog.super.apply(this, arguments);
border: '1px solid #ccc',
};
'z-index': 1000
});
OO.inheritClass(TaskDialog, OO.ui.ProcessDialog);

// Pole do wpisania tytułu zadania
TaskDialog.static.name = 'taskDialog';
TaskDialog.static.title = 'Dodaj zadanie';
var $titleInput = $('<input>', {
type: 'text',
TaskDialog.static.actions = [
{
id: 'zadanie-tytul',
action: 'save',
placeholder: 'Wpisz tytuł zadania'
label: 'Zapisz',
}).css({ width: '100%', 'margin-bottom': '10px' });
flags: ['primary', 'progressive']
},
// Większe pole do wpisania opisu zadania
{
var $descriptionInput = $('<textarea>', {
action: 'cancel',
id: 'zadanie-opis',
label: 'Anuluj',
placeholder: 'Wpisz opis zadania'
flags: ['safe', 'close']
}).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
// Przycisk Anuluj
var $cancelButton = $('<button>', { text: 'Anuluj' }).on('click', function() {
taskModal.addWindows([taskDialog]);
$popup.remove();
}).css({ 'margin-top': '10px', 'background-color': '#f44336', color: '#fff' });


// Funkcja otwierania modala
// Dodanie elementów do popupu
$popup.append($titleInput, $descriptionInput, $editButtons, $linkButton, $cancelButton);
function openTaskModal() {
taskModal.openWindow(taskDialog);
}


// Dodanie zdarzenia kliknięcia do przycisku
// Dodanie popupu do dokumentu
$button.find('a').on('click', function(e) {
$('body').append($popup);
e.preventDefault();
openTaskModal();
});
}
}


// Podpięcie funkcji do kliknięcia przycisku
// Inicjalizacja po załadowaniu strony
$('#dodaj-zadanie-przycisk').on('click', function(e) {
$(document).ready(createTaskModal);
e.preventDefault();
showPopup();
});
});
});

Revision as of 16:24, 20 November 2024

mw.loader.using('mediawiki.util').then(function() {
    // Dodanie przycisku do paska bocznego
    mw.util.addPortletLink(
        'p-tb',                   // Sekcja na pasku bocznym
        '#',                      // Link (placeholder)
        'Dodaj zadanie',          // Tekst przycisku
        'dodaj-zadanie-przycisk', // ID przycisku
        'Dodaj nowe zadanie'      // Opis przycisku (tooltip)
    );

    // Funkcja wyświetlająca popup
    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
        var $cancelButton = $('<button>', { text: 'Anuluj' }).on('click', function() {
            $popup.remove();
        }).css({ 'margin-top': '10px', 'background-color': '#f44336', color: '#fff' });

        // Dodanie elementów do popupu
        $popup.append($titleInput, $descriptionInput, $editButtons, $linkButton, $cancelButton);

        // Dodanie popupu do dokumentu
        $('body').append($popup);
    }

    // Podpięcie funkcji do kliknięcia przycisku
    $('#dodaj-zadanie-przycisk').on('click', function(e) {
        e.preventDefault();
        showPopup();
    });
});