Untitled

@page "{artistId}/{postId}"
@model Rockifi.Web.Pages.Artists.EditPostPhotoModel
@{ ViewBag.Title = "Edit Post Photo";
                ViewBag.MiniNav = true; }
<style>
    .cr-slider-wrap {
        margin-top: 1.5rem !important;
    }

    img {
        /* This rule is very important, please don't ignore this */
        max-width: 100% !important;
    }

    #cropper-canvas {
        height: 600px;
        width: 600px;
        background-color: #ffffff;
        cursor: default;
        border: 1px solid black;
    }

    .active-ratio svg rect {
        stroke: #04d98c !important;
    }

</style>

<div class="row" style=" justify-content: flex-end; margin-right: 10vw; height: 100px;">

</div>

<div id="editPostSlider" style="height: auto;">
    @if (Model.EditingExistingImage)
    {
        <img id="existing-photo-img" src="@Url.Action("GetArtistPostResource", "ArtistPostContent", new { artistId = Model.ArtistId, postId = Model.PostId, fileName = Model.PhotoSource })" /> 
    }
    else
    {
        <img id="photo-img" src="@Model.PhotoSource" />
    }

</div>

<div id="cropper-container" style="display: none; max-height: 50vh !important;">
    <canvas id="cropper-canvas">
        Your browser does not support the HTML5 canvas element.
    </canvas>
</div>

<div style="height: 70px;">
    <div class="container d-flex mb-4" id="toggle-aspect-ratio">
        <div>
            <span class="btn px-0" data-value="1.77777" id="rectangle-aspect" style="width: 50px;">
                <svg width: 44px>
                    <rect x="2" y="12" width="44" height="25"
                          style="fill:blue;stroke:white;stroke-width:3;fill-opacity:0;stroke-opacity:1" />
                </svg>
            </span>
            <span class="btn px-0" data-value="1" id="square-aspect" style="width: 50px;">
                <svg width: 44px>
                    <rect x="30" y="12" width="44" height="44"
                          style="fill:blue;stroke:white;stroke-width:3;fill-opacity:0;stroke-opacity:1" />
                </svg>
            </span>
        </div>
        
    </div>
</div>

<div class="container py-4" id="editPost">
    <div class="row">
        <div class="col-12">
            <form id="form" method="post">
                <input id="photo-base64" name="imageBase64" type="hidden" />
                <input id="photo-file-input" type="file" accept="image/*" hidden />
                <div class="row">
                    <div class="col-12 col-lg-4">
                        <button class="btn btn-outline-primary btn-block mb-3 mb-lg-0" asp-page-handler="CancelPhotoUpload">Cancel</button>
                    </div>
                    <div class="col-12 col-lg-4">
                        <button class="btn btn-primary btn-block mb-3 mb-lg-0" id="choose-photo-button">Choose photo</button>
                    </div>
                    <div class="col-12 col-lg-4">
                        <button class="btn btn-primary btn-block" id="save-button">Save</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@section scripts {
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.css" integrity="sha512-+VDbDxc9zesADd49pfvz7CgsOl2xREI/7gnzcdyA9XjuTxLXrdpuz21VVIqc5HPfZji2CypSbxx1lgD7BgBK5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js" integrity="sha512-ooSWpxJsiXe6t4+PPjCgYmVfr1NS5QXJACcR/FPpsdm6kqG1FmQ2SVyg2RXeVuCRBLr0lWHnWJP6Zs1Efvxzww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="~/js/jquery-cropper.js"></script>

    <script>
        let canvas = $("#cropper-canvas");
        var context = canvas.get(0).getContext("2d");

        $('#choose-photo-button').on('click', function (e) {
            e.preventDefault();
            $('#photo-file-input').trigger('click');
        });

        const options = {
            aspectRatio: 16 / 9,
            dragMode: 'move',
            cropBoxMovable: false,
            cropBoxResizable: false,
            background: false,
            guides: false,
            center: false
        };

        var existingImage = @Model.EditingExistingImage.ToString().ToLower();

        if (existingImage) {
            canvas = $('#existing-photo-img');
            canvas.cropper(options);
        };

        $('#photo-file-input').on('change', function (e) {
            var files = e.target.files;

            if (files && files[0]) {
                var file = files[0];

                if (file.type.match(/^image\//)) {
                    var reader = new FileReader();
                    reader.onload = function (evt) {
                        var img = new Image();
                        img.onload = function () {
                            context.canvas.height = img.height;
                            context.canvas.width = img.width;
                            context.drawImage(img, 0, 0);
                            var cropper = canvas.cropper(options);

                            $('#rectangle-aspect').addClass('active-ratio');
                            $('#square-aspect').removeClass('active-ratio');
                        }
                        img.src = evt.target.result;
                    };
                    reader.readAsDataURL(file);
                    $('#editPostSlider').hide();
                    $('#cropper-container').show();
                }
            }
        });

        $(document).on('click', '#toggle-aspect-ratio .btn', function () {
            if ($('#photo-file-input').val() || existingImage) {
                var aspectRatio = $(this).data('value');
                options.aspectRatio = aspectRatio;
                //canvas.setAspectRatio(aspectRatio);
                //canvas.cropper('setAspectRatio', aspectRatio);
                $(this).addClass('active-ratio').siblings().removeClass('active-ratio');
                canvas.cropper('destroy').cropper(options);
            }
        });

        $('#save-button').click(function (e) {
            e.preventDefault();
            var croppedImageDataUrl = canvas.cropper('getCroppedCanvas').toDataURL('image/png');
            croppedImageDataUrl = croppedImageDataUrl.replace('data:image/png;base64,', '');
            $('#photo-base64').val(croppedImageDataUrl);
            $('#form').submit();
        })

        
    </script>
}