<commit_before><script src="/static/js/jquery-1.11.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
<script src="/static/js/bootstrap.min.js"></script>

## The block to hold the question circle, which prevents it from overlapping with the image and
## of which the style will be updated if zoom is enabled
<div id="popover-buffer" style="display: none"></div>
<a id="popover-content" style="display: none" data-toggle="popover"
   data-trigger="hover" data-placement="left" data-html="true"
   data-content="
    <p><b> HiRes:</b> Click on the image to view in higher resolution when available</p>
    <p><b> Zoom:</b> Click on the image and use the mouse wheel to zoom in and out</p>
    <p><b> Navigate:</b> Move the mouse cursor to navigate through the magnified image</p>
   "
><img src="${base}/images/question-circle.png"></a>

## The image to render, which will be wrapped accordingly if zoom is enabled
<img id="base-image" style="max-width: 100%" class="baseImage" src="${url}">

## MFR scripts
<script src="/static/js/mfr.js"></script>
<script src="/static/js/mfr.child.js"></script>

## JQuery Zoom and Mouse Wheel scripts
<script src="${base}/js/jquery.mousewheel.min.js"></script>
<script src="${base}/js/jquery.zoom.js"></script>

## The main script for enable Hi-Res and Zoom for rendered images
<script>
    ## Enforces strict mode
    "use strict";

    ## Magnifiation parameters
    var magScale = 1;
    var magStep = 0.1;
    var maxScale = 3;
    var minScale = 1;
    var magHeight = null;
    var magWidth = null;

    ## The height and width for the displaying part of the image
    var heightLimit = null;
    var widthLimit = null;

    ## The minimal height requirement to enable the zoom feature for a image
    ## For more information, refer to the line where it is used in this file
    var minHeightToZoom = 200;

    ## A flag indicating whether the image is already wrapped or not
    var wrapped = false;

    $(document).ready(function() {

        ## Reference on how mobile is detected: https://stackoverflow.com/a/10364620
        var isMobile = window.matchMedia("only screen and (max-width: 760px)");

        ## Enable the zoom feature only for desktop browsers
        if (!isMobile.matches) {

            ## Update the style for instruction popover and enable it
            var popoverBuffer = $("#popover-buffer");
            var popoverContent = $("#popover-content");
            popoverBuffer.css({"height": "38px"});
            popoverContent.css({
                "position": "absolute",
                "top": "10px",
                "right": "10px",
                "cursor": "pointer"
            });
            $('[data-toggle="popover"]').popover();

            var baseImage = $("#base-image");

            ## Quirks: the base image must be wrapped, see http://www.jacklmoore.com/zoom/
            ##
            ## The BASE image must be wrapped with a parent "container" and it must be the only (or
            ## the first) image in it.  The `jquery.zoom` library performs the zoom on the parent
            ## and grabs the first image it finds to create the zoom image.
            ##
            ## `addSpan()` performs the "wrap" accordingly to cater for most cases
            var addSpan = function () {

                ## Only wrap the image once
                if (wrapped) {
                    return;
                }

                ## Obtain the original height and width for the image loaded
                var baseImageHeight = parseInt(baseImage.css("height"), 10);
                var baseImageWidth = parseInt(baseImage.css("width"), 10);

                ## Detect the Google Chrome browser
                var isChrome = !!window.chrome;

                ## Detect if the image is downsized due to screen size
                var isActualSize = heightLimit === baseImageHeight || widthLimit === baseImageWidth;

                if (isActualSize || !isChrome) {
                    ## Use the default wrapping suggested by http://www.jacklmoore.com/zoom/ if
                    ## either of the two conditions below holds:
                    ## 1.   Images are downsized but not in Google Chrome. Please see the flickering
                    ##      issue mentioned below.
                    ## 2.   Images are displayed in its actual size. No issue for all supported
                    ##      browsers.
                    baseImage.wrap("<div></div>").parent().css("display", "inline-block");<commit_msg>Explicitly set CSS attributes for IE to resize<commit_after><script src="/static/js/jquery-1.11.3.min.js"></script>

<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
<script src="/static/js/bootstrap.min.js"></script>

## The block to hold the question circle, which prevents it from overlapping with the image and
## of which the style will be updated if zoom is enabled
<div id="popover-buffer" style="display: none"></div>
<a id="popover-content" style="display: none" data-toggle="popover"
   data-trigger="hover" data-placement="left" data-html="true"
   data-content="
    <p><b> HiRes:</b> Click on the image to view in higher resolution when available</p>
    <p><b> Zoom:</b> Click on the image and use the mouse wheel to zoom in and out</p>
    <p><b> Navigate:</b> Move the mouse cursor to navigate through the magnified image</p>
   "
><img src="${base}/images/question-circle.png"></a>

## The image to render, which will be wrapped accordingly if zoom is enabled
<img id="base-image" style="max-width: 100%" class="baseImage" src="${url}">

## MFR scripts
<script src="/static/js/mfr.js"></script>
<script src="/static/js/mfr.child.js"></script>

## JQuery Zoom and Mouse Wheel scripts
<script src="${base}/js/jquery.mousewheel.min.js"></script>
<script src="${base}/js/jquery.zoom.js"></script>

## The main script for enable Hi-Res and Zoom for rendered images
<script>
    ## Enforces strict mode
    "use strict";

    ## Magnifiation parameters
    var magScale = 1;
    var magStep = 0.1;
    var maxScale = 3;
    var minScale = 1;
    var magHeight = null;
    var magWidth = null;

    ## The height and width for the displaying part of the image
    var heightLimit = null;
    var widthLimit = null;

    ## The minimal height requirement to enable the zoom feature for a image
    ## For more information, refer to the line where it is used in this file
    var minHeightToZoom = 200;

    ## A flag indicating whether the image is already wrapped or not
    var wrapped = false;

    $(document).ready(function() {

        ## Reference on how mobile is detected: https://stackoverflow.com/a/10364620
        var isMobile = window.matchMedia("only screen and (max-width: 760px)");

        ## Enable the zoom feature only for desktop browsers
        if (!isMobile.matches) {

            ## Update the style for instruction popover and enable it
            var popoverBuffer = $("#popover-buffer");
            var popoverContent = $("#popover-content");
            popoverBuffer.css({"height": "38px"});
            popoverContent.css({
                "position": "absolute",
                "top": "10px",
                "right": "10px",
                "cursor": "pointer"
            });
            $('[data-toggle="popover"]').popover();

            var baseImage = $("#base-image");

            ## Quirks: the base image must be wrapped, see http://www.jacklmoore.com/zoom/
            ##
            ## The BASE image must be wrapped with a parent "container" and it must be the only (or
            ## the first) image in it.  The `jquery.zoom` library performs the zoom on the parent
            ## and grabs the first image it finds to create the zoom image.
            ##
            ## `addSpan()` performs the "wrap" accordingly to cater for most cases
            var addSpan = function () {

                ## Only wrap the image once
                if (wrapped) {
                    return;
                }

                ## Obtain the original height and width for the image loaded
                var baseImageHeight = parseInt(baseImage.css("height"), 10);
                var baseImageWidth = parseInt(baseImage.css("width"), 10);

                ## Detect the Google Chrome browser
                var isChrome = !!window.chrome;

                ## Detect if the image is downsized due to screen size
                var isActualSize = heightLimit === baseImageHeight || widthLimit === baseImageWidth;

                if (isActualSize || !isChrome) {
                    ## Use the default wrapping suggested by http://www.jacklmoore.com/zoom/ if
                    ## either of the two conditions below holds:
                    ## 1.   Images are downsized but not in Google Chrome. Please see the flickering
                    ##      issue mentioned below.
                    ## 2.   Images are displayed in its actual size. No issue for all supported
                    ##      browsers.
                    baseImage.wrap("<div></div>").parent().css({
                        "display": "inline-block",
                        "max-width": "100%",  // need to be explicit for IE
                        "height": "auto"      // need to be explicit for IE
                    });
{'fraction_non_alphanumeric': 0.11696658097686376, 'fraction_numerical': 0.008461868037703513, 'mean_word_length': 2.2499129829446574, 'pattern_counts': {'":': 13, '<': 71, '<?xml version=': 0, '>': 71, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7309119', 'n_tokens_mistral': 2554, 'n_tokens_neox': 2406, 'n_words': 909}