Справица:DiagramGenerator.js

(function() {
    'use strict';
    var lib = mw.libs.diagramGenerator;
    var fileContents = {};

    function updateSubmitEnabled() {
        if (fileContents.microcode && fileContents.configuration) {
            $('.diagram-generator-action')
                .removeAttr('disabled')
                .parent()
                .removeClass('oo-ui-widget-disabled')
                .addClass('oo-ui-widget-enabled');
        } else {
            $('.diagram-generator-action')
                .attr('disabled', '')
                .parent()
                .removeClass('oo-ui-widget-enabled')
                .addClass('oo-ui-widget-disabled');
        }
    }

    function fileLoaded(id) {
        fileContents[id] = this.result;
        updateSubmitEnabled();
    }

    function updateFile(event) {
        var input = event.target;
        delete fileContents[input.id];
        var files = input.files;
        if (files.length === 0) {
            return;
        }
        var reader = new FileReader();
        reader.addEventListener('load', fileLoaded.bind(reader, input.id));
        reader.readAsText(files[0]);
        updateSubmitEnabled();
    }

    function downloadSVG(svg) {
        var contents = [
            '<?xml version="1.0" encoding="utf-8"?>',
            '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',
            svg.outerHTML
        ].join('\n');
        var blob = new Blob([contents], {
            type: 'image/svg+xml'
        });
        var blobUrl = URL.createObjectURL(blob);
        var downloadLink = document.createElement('a');
        downloadLink.href = blobUrl;
        downloadLink.download = 'Diagram.svg';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        URL.revokeObjectURL(blobUrl);
        downloadLink.remove();
    }

    function printPages(width, height, pages) {
        var imageWindow = window.open('');
        pages.forEach(function(page) {
            var svg = lib.createSVG(width, height);
            svg.appendChild(page);
            svg.style.breakAfter = 'page';
            imageWindow.document.write(svg.outerHTML);
        });
        imageWindow.document.close();
        imageWindow.focus();
        imageWindow.print();
    }

    function postGeneration(parameters, actionId, pages) {
        switch (actionId) {
            case 'diagram-generator-this-page':
                var svg = lib.createSVGWithPages(parameters.width, parameters.height, pages);
                $('#diagram-generator-result').html(svg.outerHTML);
                break;
            case 'diagram-generator-new-page':
                printPages(parameters.width, parameters.height, pages);
                break;
            case 'diagram-generator-download-svg':
                downloadSVG(lib.createSVGWithPages(parameters.width, parameters.height, pages));
                break;
            default:
                // ???
                break;
        }
    }

    function getParameters() {
        return {
            arrowHeight: 15,
            columnHeaderLeft: 'Dijagram toka mikrooperacija',
            columnHeaderMiddle: 'Dijagram toka upravljačkih signala',
            columnHeaderRight: 'Sekvenca upravljačkih signala',
            headerHeight: 20,
            height: 1680,
            indexNum: $('#diagram-generator-student-index').val(),
            footerRowHeight: 50,
            margin: 50,
            nameSurname: $('#diagram-generator-student-name').val(),
            subjectName: 'Osnovi računarske tehnike 2',
            width: 1200
        };
    }

    function generate(event) {
        event.preventDefault();
        $('#diagram-generator-error').text('');
        var config = lib.parseConfig(fileContents.configuration);
        if (!config) {
            $('#diagram-generator-error').text('Error while parsing configuration.');
            return;
        }
        var instructionsResult = lib.getInstructions(config, fileContents.microcode);
        if (instructionsResult.error) {
            $('#diagram-generator-error').text(instructionsResult.error);
        }
        var instructions = instructionsResult.result;
        var parameters = getParameters();
        var pages = lib.getPages(parameters, config, instructions);
        postGeneration(parameters, event.currentTarget.id, pages);
    }

    function createFieldset(text, contents) {
        var $icon = $('<span>').addClass([
            'oo-ui-widget',
            'oo-ui-widget-enabled',
            'oo-ui-iconElement-icon',
            'oo-ui-iconElement',
            'oo-ui-labelElement-invisible',
            'oo-ui-iconWidget'
        ]);
        return $('<fieldset>', {
            html: [
                $('<legend>', {
                    html: [
                        $('<span>', {
                            'class': 'oo-ui-labelElement-label',
                            'text': text
                        }),
                        $icon.clone().addClass('oo-ui-icon-expand'),
                        $icon.clone().addClass('oo-ui-icon-collapse')
                    ],
                    role: 'button',
                    tabindex: 0
                }).addClass(['oo-ui-fieldsetLayout-header']),
                $('<div>', {
                    'class': 'oo-ui-fieldsetLayout-group',
                    'html': $('<div>', {
                        'class': 'oo-ui-widget oo-ui-widget-enabled',
                        'html': contents
                    })
                })
            ]
        }).addClass([
            'oo-ui-layout',
            'oo-ui-labelElement',
            'oo-ui-fieldsetLayout',
            'mw-collapsible'
        ]);
    }

    function createFormRow(text, options) {
        var inputOptions = $.extend({}, options, {
            'class': 'oo-ui-inputWidget-input',
            'name': options.id
        });
        return $('<div>', {
            html: $('<div>', {
                'class': 'oo-ui-fieldLayout-body',
                'html': [
                    $('<span>', {
                        'class': 'oo-ui-fieldLayout-header',
                        'html': $('<label>', {
                            'class': 'oo-ui-labelElement-label',
                            'for': options.id,
                            'text': text + ':'
                        })
                    }),
                    $('<div>', {
                        'class': 'oo-ui-fieldLayout-field',
                        'html': $('<div>', {
                            html: $('<input>', inputOptions)
                        }).addClass([
                            'oo-ui-widget',
                            'oo-ui-widget-enabled',
                            'oo-ui-inputWidget',
                            'oo-ui-textInputWidget',
                            'oo-ui-textInputWidget-type-text'
                        ])
                    })
                ]
            })
        }).addClass([
            'mw-htmlform-field-HTMLTextField',
            'oo-ui-layout',
            'oo-ui-labelElement',
            'oo-ui-fieldLayout',
            'oo-ui-fieldLayout-align-top'
        ]);
    }

    function createFormButton(text, options) {
        return $('<span>', $.extend({
            'class': [
                'oo-ui-buttonElement',
                'oo-ui-buttonElement-framed',
                'oo-ui-flaggedElement-primary',
                'oo-ui-flaggedElement-progressive',
                'oo-ui-labelElement',
                'oo-ui-widget-enabled'
            ].join(' ')
        }, options)).append(
            $('<button>', {
                'class': 'oo-ui-buttonElement-button diagram-generator-action',
                'tabindex': '0'
            }).append(
                $('<span>', {
                    'class': 'oo-ui-labelElement-label label',
                    'text': text
                })
            )
        );
    }

    function init() {
        var $optionsFieldset = createFieldset('Options', [
            createFormRow('Microcode', {
                change: updateFile,
                id: 'microcode',
                type: 'file'
            }),
            createFormRow('Configuration', {
                change: updateFile,
                id: 'configuration',
                type: 'file'
            }),
            createFormRow('Student name', {
                id: 'diagram-generator-student-name',
                placeholder: 'Pera Pisar',
                type: 'text'
            }),
            createFormRow('Student index', {
                id: 'diagram-generator-student-index',
                placeholder: '2021/0000',
                type: 'text'
            })
        ]);
        var $actionsFieldset = createFieldset('Actions', [
            createFormButton('Generate (on page)', {
                click: generate,
                id: 'diagram-generator-this-page'
            }),
            createFormButton('Print (new page)', {
                click: generate,
                id: 'diagram-generator-new-page'
            }),
            createFormButton('Download SVG', {
                click: generate,
                id: 'diagram-generator-download-svg'
            })
        ]);
        $('#diagram-generator').addClass([
            'mw-htmlform-ooui-wrapper',
            'oo-ui-layout',
            'oo-ui-panelLayout',
            'oo-ui-panelLayout-padded',
            'oo-ui-panelLayout-framed'
        ]).append(
            $('<form>', {
                html: [
                    $optionsFieldset,
                    $actionsFieldset,
                    $('<p>', {
                        id: 'diagram-generator-error'
                    })
                ]
            }).addClass(['mw-htmlform', 'mw-htmlform-ooui', 'oo-ui-layout', 'oo-ui-formLayout']),
            $('<div>', {
                id: 'diagram-generator-result'
            })
        );
        updateSubmitEnabled();
    }

    $(init);
})();