<commit_before>/**
 * Viewer controls HUD.
 */
class ViewerControls {
    
    constructor(viewerConfig) {
        this.viewerConfig = viewerConfig;
        this.element = $('<div class="viewer-controls"></div>');
        this.addButtons();
        
        // Show help modal when button clicked
        this.element.on('click', '#show-help-modal', (evt) => {
            $('#help-modal').modal('show');
        });
    }
    
    /**
     * Add a button to the HUD.
     */
    addButton(id, icon, tooltip) {
        let button = $(`
            <button id="${id}" data-toggle="tooltip" title="${tooltip}" role="button">
            <span class="fa ${icon}"></span>
            </button>
        `);
        
        button.tooltip({
            placement: 'right',
            template: `<div class="tooltip tooltip-hud" role="tooltip">
                       <div class="tooltip-arrow"></div>
                       <div class="tooltip-inner"></div>
                       </div>`
        });
        
        this.element.append(button);
    }
    
    /**
     * Add all buttons to the HUD.
     */
    addButtons() {
        this.addButton(this.viewerConfig.zoomInButton, "fa-plus-circle", "Zoom in"); 
        this.addButton(this.viewerConfig.zoomOutButton, "fa-minus-circle", "Zoom out"); 
        this.addButton(this.viewerConfig.homeButton, "fa-refresh", "Reset Zoom"); 
        this.addButton(this.viewerConfig.fullPageButton, "fa-expand", "Fullscreen");
        
        if (this.viewerConfig.selectionEnabled) {
            this.addButton(this.viewerConfig.selectionConfig.toggleButton, "fa-toggle-off", "Toggle selection");
        }
        
        this.addButton(this.viewerConfig.helpButton, "fa-question", "Help");
    }
}

/**
 * Viewer sidebar HUD.
 */
class ViewerSidebar {
    
    constructor(config) {
        this.config = config;
        this.element = $(`
            <div class="viewer-sidebar-container">
                <div class="viewer-sidebar">
                    <h4 class="viewer-sidebar-title font-weight-bold text-uppercase">
                        ${config.title}
                        <a href="#sb-content" class="viewer-sidebar-toggle" data-toggle="collapse" role="button">&#x25B2;</a>
                    </h4>
                    <div id="sb-content" class="sidebar-content collapse show">
                        <h3 class="objective"></h3>
                        <p class="guidance"></p>
                        <form id="answer-form"></form>
                        <button class="btn btn-success btn-block btn-answer my-2" role="button">
                            ${this.config.answerButtonText}
                        </button>
                        <div id="favourites" style="display: none;"></div>
                        <a id="tutorial" href="../tutorial" class="btn btn-outline-white btn-block my-2" role="button" style="display: none;">
                            View Tutorial
                        </a>
                        <div id="comments" class="my-2" style="display: none;">
                            <a href="#comment" class="btn btn-outline-white btn-block" role="button" data-toggle="collapse">
                                Add Comment
                            </a>
                            <div class="mt-2 collapse" id="comment">
                                <textarea class="form-control margin-bottom-xs" rows="3" id="comment-input" placeholder="Add a comment..."></textarea>
                            </div>
                        </div>
                        <div id="progress" class="mt-4" style="display: none;">
                            <h5 class="viewer-sidebar-title font-weight-bold text-uppercase">Progress</h5>
                            <div class="progress my-2">
                                <div class="progress-bar" role="progress-bar" style="width: 0%;"></div>
                            </div>
                            <p id="progress-summary" class="text-center"></p>
                        </div>
                        <div id="preview" class="mt-4" style="display: none;">
                            <h5 class="viewer-sidebar-title font-weight-bold text-uppercase">Up Next</h5>
                            <div class="text-center mt-2">
                                <img class="img-fluid" id="preview-thumbnail" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `);
        
        if (this.config.showTutorial) {
            this.element.find('#tutorial').show();
        }
        
        if (this.config.showComments) {
            this.element.find('#comments').show();
        }
        
        if (this.config.showProgress) {
            this.element.find('#progress').show();
        }
        
        if (this.config.showFavourites) {
            this.element.find('#favourites').show();
        }
        
        if (this.config.showPreview) {
            this.element.find('#preview').show();
        }
        
        // Focus on comment input when shown
        $('#task-comment').on('shown.bs.collapse', function () {
            $('#comment-input').focus();
        });
    }
}

/**
 * Viewer footer HUD, to be shown on smaller screens.
 */
class ViewerFooter {
    
    constructor() {
        this.element = $(`
            <div class="viewer-footer">
                <h3 class="objective"></h3>
                <button class="btn btn-success btn-block btn-answer my-2" role="button">Done</button>
            </div>
        `);
    }
}

/**
 * Help modal for LibCrowds viewer.
 */
class ViewerHelpModal {
    
    constructor(selectionEnabled) {
        this.element = $(`
            <div class="modal viewer-modal fade" id="help-modal" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content bg-inverse text-white">
                        <div class="modal-header">
                            <h5 class="modal-title">Help</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <a id="tutorial" href="../tutorial" class="btn btn-outline-white btn-block mt-2" role="button">
                                View Tutorial
                            </a>
                            <h4 class="mt-3">Viewer controls</h4>
                            <p>The following controls are provided towards the left of the viewer:</p>
                            <ul class="list-unstyled">
                                <li class="mb-1"><span class="fa fa-plus-circle fa-fw mr-1"></span>Zoom in</li>
                                <li class="mb-1"><span class="fa fa-minus-circle fa-fw mr-1"></span>Zoom out</li>
                                <li class="mb-1"><span class="fa fa-refresh fa-fw mr-1"></span>Reset zoom</li>
                                <li class="mb-1"><span class="fa fa-expand fa-fw mr-1"></span>Fullscreen</li>
                                <li class="selection-help mb-1">
                                    <span class="fa fa-toggle-on fa-fw mr-1"></span>Toggle selection
                                </li><commit_msg>Change btn colour<commit_after>/**
 * Viewer controls HUD.
 */
class ViewerControls {
    
    constructor(viewerConfig) {
        this.viewerConfig = viewerConfig;
        this.element = $('<div class="viewer-controls"></div>');
        this.addButtons();
        
        // Show help modal when button clicked
        this.element.on('click', '#show-help-modal', (evt) => {
            $('#help-modal').modal('show');
        });
    }
    
    /**
     * Add a button to the HUD.
     */
    addButton(id, icon, tooltip) {
        let button = $(`
            <button id="${id}" data-toggle="tooltip" title="${tooltip}" role="button">
            <span class="fa ${icon}"></span>
            </button>
        `);
        
        button.tooltip({
            placement: 'right',
            template: `<div class="tooltip tooltip-hud" role="tooltip">
                       <div class="tooltip-arrow"></div>
                       <div class="tooltip-inner"></div>
                       </div>`
        });
        
        this.element.append(button);
    }
    
    /**
     * Add all buttons to the HUD.
     */
    addButtons() {
        this.addButton(this.viewerConfig.zoomInButton, "fa-plus-circle", "Zoom in"); 
        this.addButton(this.viewerConfig.zoomOutButton, "fa-minus-circle", "Zoom out"); 
        this.addButton(this.viewerConfig.homeButton, "fa-refresh", "Reset Zoom"); 
        this.addButton(this.viewerConfig.fullPageButton, "fa-expand", "Fullscreen");
        
        if (this.viewerConfig.selectionEnabled) {
            this.addButton(this.viewerConfig.selectionConfig.toggleButton, "fa-toggle-off", "Toggle selection");
        }
        
        this.addButton(this.viewerConfig.helpButton, "fa-question", "Help");
    }
}

/**
 * Viewer sidebar HUD.
 */
class ViewerSidebar {
    
    constructor(config) {
        this.config = config;
        this.element = $(`
            <div class="viewer-sidebar-container">
                <div class="viewer-sidebar">
                    <h4 class="viewer-sidebar-title font-weight-bold text-uppercase">
                        ${config.title}
                        <a href="#sb-content" class="viewer-sidebar-toggle" data-toggle="collapse" role="button">&#x25B2;</a>
                    </h4>
                    <div id="sb-content" class="sidebar-content collapse show">
                        <h3 class="objective"></h3>
                        <p class="guidance"></p>
                        <form id="answer-form"></form>
                        <button class="btn btn-success btn-block btn-answer my-2" role="button">
                            ${this.config.answerButtonText}
                        </button>
                        <div id="favourites" style="display: none;"></div>
                        <a id="tutorial" href="../tutorial" class="btn btn-outline-white btn-block my-2" role="button" style="display: none;">
                            View Tutorial
                        </a>
                        <div id="comments" class="my-2" style="display: none;">
                            <a href="#comment" class="btn btn-outline-white btn-block" role="button" data-toggle="collapse">
                                Add Comment
                            </a>
                            <div class="mt-2 collapse" id="comment">
                                <textarea class="form-control margin-bottom-xs" rows="3" id="comment-input" placeholder="Add a comment..."></textarea>
                            </div>
                        </div>
                        <div id="progress" class="mt-4" style="display: none;">
                            <h5 class="viewer-sidebar-title font-weight-bold text-uppercase">Progress</h5>
                            <div class="progress my-2">
                                <div class="progress-bar" role="progress-bar" style="width: 0%;"></div>
                            </div>
                            <p id="progress-summary" class="text-center"></p>
                        </div>
                        <div id="preview" class="mt-4" style="display: none;">
                            <h5 class="viewer-sidebar-title font-weight-bold text-uppercase">Up Next</h5>
                            <div class="text-center mt-2">
                                <img class="img-fluid" id="preview-thumbnail" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `);
        
        if (this.config.showTutorial) {
            this.element.find('#tutorial').show();
        }
        
        if (this.config.showComments) {
            this.element.find('#comments').show();
        }
        
        if (this.config.showProgress) {
            this.element.find('#progress').show();
        }
        
        if (this.config.showFavourites) {
            this.element.find('#favourites').show();
        }
        
        if (this.config.showPreview) {
            this.element.find('#preview').show();
        }
        
        // Focus on comment input when shown
        $('#task-comment').on('shown.bs.collapse', function () {
            $('#comment-input').focus();
        });
    }
}

/**
 * Viewer footer HUD, to be shown on smaller screens.
 */
class ViewerFooter {
    
    constructor() {
        this.element = $(`
            <div class="viewer-footer">
                <h3 class="objective"></h3>
                <button class="btn btn-success btn-block btn-answer my-2" role="button">Done</button>
            </div>
        `);
    }
}

/**
 * Help modal for LibCrowds viewer.
 */
class ViewerHelpModal {
    
    constructor(selectionEnabled) {
        this.element = $(`
            <div class="modal viewer-modal fade" id="help-modal" tabindex="-1" role="dialog">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content bg-inverse text-white">
                        <div class="modal-header">
                            <h5 class="modal-title">Help</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <a id="tutorial" href="../tutorial" class="btn btn-info btn-block mt-2" role="button">
                                View Tutorial
                            </a>
                            <h4 class="mt-3">Viewer controls</h4>
                            <p>The following controls are provided towards the left of the viewer:</p>
                            <ul class="list-unstyled">
                                <li class="mb-1"><span class="fa fa-plus-circle fa-fw mr-1"></span>Zoom in</li>
                                <li class="mb-1"><span class="fa fa-minus-circle fa-fw mr-1"></span>Zoom out</li>
                                <li class="mb-1"><span class="fa fa-refresh fa-fw mr-1"></span>Reset zoom</li>
                                <li class="mb-1"><span class="fa fa-expand fa-fw mr-1"></span>Fullscreen</li>
                                <li class="selection-help mb-1">
                                    <span class="fa fa-toggle-on fa-fw mr-1"></span>Toggle selection
                                </li>
{'fraction_non_alphanumeric': 0.14532663316582914, 'fraction_numerical': 0.005494137353433836, 'mean_word_length': 1.3669521091024421, 'pattern_counts': {'":': 0, '<': 211, '<?xml version=': 0, '>': 213, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 14, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4661378', 'n_tokens_mistral': 4027, 'n_tokens_neox': 3884, 'n_words': 747}