User:BZPN/PNHelper.js

mw.loader.using(['mediawiki.api', 'oojs-ui'], function() {
    function createLinkAnnotationTool() {
        // Główny kontener narzędzia
        var annotationPanel = new OO.ui.PanelLayout({
            padded: true,
            expanded: false
        });

        // Pole tytułu zadania
        var titleInput = new OO.ui.TextInputWidget({
            placeholder: 'Tytuł zadania'
        });

        // Pole opisu zadania 
        var descriptionInput = new OO.ui.MultilineTextInputWidget({
            placeholder: 'Opis zadania',
            rows: 5
        });

        // Przycisk dodawania linków
        var addLinkButton = new OO.ui.ButtonWidget({
            label: 'Dodaj linki',
            flags: ['primary', 'progressive']
        });

        // Przycisk stylowania tekstu
        var styleTextButton = new OO.ui.ButtonWidget({
            label: 'Style tekstu'
        });

        // Przycisk anulowania
        var cancelButton = new OO.ui.ButtonWidget({
            label: 'Anuluj',
            flags: ['destructive']
        });

        // Układ przycisków
        var buttonLayout = new OO.ui.HorizontalLayout({
            items: [addLinkButton, styleTextButton, cancelButton]
        });

        // Dodanie elementów do panelu
        annotationPanel.$element.append(
            titleInput.$element,
            descriptionInput.$element,
            buttonLayout.$element
        );

        // Logika zamykania
        cancelButton.on('click', function() {
            // Zamknięcie okna/popupu
        });

        // Zwrócenie głównego elementu
        return annotationPanel;
    }

    // Dodanie przycisku do paska narzędzi
    function addAnnotationToolbarButton() {
        var annotationTool = new OO.ui.ButtonWidget({
            label: 'Annotacje',
            icon: 'link'
        });

        annotationTool.on('click', function() {
            // Otwieranie popupu z narzędziem
            var popup = new OO.ui.PopupWidget({
                $content: createLinkAnnotationTool().$element,
                width: 400
            });
            
            popup.toggle();
        });

        // Dodanie do paska narzędzi
        $('#p-tb .vector-menu-content-list').append(
            $('<li>').append(annotationTool.$element)
        );
    }

    // Inicjalizacja po załadowaniu strony
    $(document).ready(function() {
        addAnnotationToolbarButton();
    });
});