kreta/KretaWeb/Areas/Adminisztracio/Views/SystemSettings/FejlecLablecSzerkeszto.cshtml

@using Kreta.Web.Areas.Adminisztracio.Models

@model FejlecLablecSzerkesztoModel

@{
    List<SelectListItem> list = new List<SelectListItem>();

    list.Add(new SelectListItem() { Value = "0", Text = "(kép mérete)", Selected = true });
    for (int i = 1; i <= 10; i++)
    {
        list.Add(new SelectListItem() { Value = i.ToString(), Text = i.ToString() + "0%-os képméret" });
    }

    Layout = null;

    var mentesUrl = Model.IsFejlec ? Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = "SystemSettingsApi", action = "FejlecMentes" }) : Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = "SystemSettingsApi", action = "LablecMentes" });
    var torlesUrl = Model.IsFejlec ? Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = "SystemSettingsApi", action = "FejlecTorles" }) : Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = "SystemSettingsApi", action = "LablecTorles" });
    var checkBoxSave = Model.IsFejlec ? Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = "SystemSettingsApi", action = "FejlecCheckBoxMentes" }) : Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = "SystemSettingsApi", action = "LablecCheckBoxMentes" });
    var fejlecVagyLablec = Model.IsFejlec ? SystemSettingsResource.Fejlec : SystemSettingsResource.Lablec;
    var fejlecVagyLablecText = Model.IsFejlec ? SystemSettingsResource.EgyeniFejlec : SystemSettingsResource.EgyeniLablec;
    var base64Image = Model.Base64Image;
    var imageValidate = Url.HttpRouteUrl(Constants.RouteKey.ActionApi, new { controller = "SystemSettingsApi", action = "ImageValidate" });
}

<style>
    #FejlecLablecSzerkeszto .k-widget.k-editor.k-header.k-editor-widget {
        width: auto;
    }

    #FejlecLablecSzerkeszto .k-editable-area {
        height: 140px;
    }

    #FejlecLablecSzerkeszto #tempHtmlContent {
        width: 980px;
        height: 140px;
        background-color: white;
        color: black;
    }

    #FejlecLablecSzerkeszto #img2b64 {
        display: none;
    }

    #FejlecLablecSzerkeszto .k-addImageTool {
        background-image: url('../../../../Content/content/images/sprite.png');
        background-position: -288px -96px;
    }

    #inline {
        display: flex;
        height: 100px;
        justify-content: center;
        align-items: center;
    }

    #inline .Cim {
        font-size: larger;
        font-weight: bold;
        text-align: center;
        margin-left: 10px;
    }

    #inline .Szoveg {
        text-align: center;
        margin-left: 15px;
        margin-right: 15px;
    }

    #inline .CheckBox {
        margin-right: 10px;
    }

    #iktatas {
        height: auto;
        position: relative;
        margin-left: 15px;
        margin-right: 15px;
    }

    #iktatas p {
        color: black;
        vertical-align: bottom;
        text-align: center;
        font-size: 13pt;
    }

    #pictureDetailText {
        text-align: center;
    }

    #pictureDetailText p {
        color: black;
        margin: 10px auto;
        vertical-align: bottom;
    }

    #FejlecLablecSzerkeszto > table {
        margin: 0 auto;
    }

    #FejlecLablecSzerkeszto > #tempHtmlContent {
        margin: 0 auto;
    }
</style>

<div id="pictureDetailText">
    <p>@SystemSettingsResource.MaxKepmeret
</div>

<div id="FejlecLablecSzerkeszto">
    @(Html.KretaHtmlEditorFor(m => m.Htmlcontent)
        .Tools(tools => tools
           .CustomButton(customButton => customButton
                .Name("addImageTool")
                .ToolTip(CommonResource.KepHozzaadas)
                .Exec(
                    @<text>
                        function(e) {
                            $("#inputFileToLoad").click();
                        }
                     </text>
                )
            )
           .CustomTemplate(template => template
                .Template(Html.KretaDropdownList("ImagePercentDropDown", list)
                .Events(e => e.Select("function(e) { FejlecLablecSzerkesztoHelper.selectedPrecent(e) }"))
                .HtmlAttributes(new Dictionary<string, object>() { { "style", "margin-bottom: 0px;" } } )
                .ToClientTemplate()
                .ToHtmlString())
            )
        )
    )

    <div id="tempHtmlContent"></div>
    <form class="input-group" id="img2b64">
        <input id="inputFileToLoad" type="file" accept="image/*" onchange="FejlecLablecSzerkesztoHelper.Encode();"/>
    </form>
</div>
<div id="inline">
    <div class="Cim">@fejlecVagyLablec</div>
    <div class="Szoveg">@fejlecVagyLablecText</div>
    <div class="CheckBox">@Html.KretaSwitchButton("IsFejlecOrLablecMegjelenit", Model.IsFejlecOrLablecMegjelenit)</div>
</div>
<div id="iktatas">
    <p>@SystemSettingsResource.HaIktatniKivant
</div>

<script type="text/javascript">
    var FejlecLablecSzerkesztoHelper = (function () {
        var fejlecLablecSzerkesztoHelper = function () { };

        var rawBase64Image = null;
        var mentesUrl = "@mentesUrl";
        var torlesUrl = "@torlesUrl";
        var checkBoxSave = "@checkBoxSave";
        var base64Image = "@base64Image";
        var imageValidate = "@imageValidate";
        var editorValue = null;
        var generatedCanvas = null;
        var isHtmlContetChange = false;
        var isOkButtonShow = false;

        fejlecLablecSzerkesztoHelper.Generalas = function () { generate(); };
        fejlecLablecSzerkesztoHelper.Mentes = function () { save(); };
        fejlecLablecSzerkesztoHelper.Torles = function () { confirmTorles(); };
        fejlecLablecSzerkesztoHelper.Cancel = function () { cancel(); };
        fejlecLablecSzerkesztoHelper.Encode = function (cb) { encodeImageFile(cb); };
        fejlecLablecSzerkesztoHelper.init = function () {
            editorValue = $("#Htmlcontent").data("kendoEditor").value();
            var editor = $("#Htmlcontent").data("kendoEditor");
            var fontNames = [].concat(kendo.ui.Editor.fn.options.fontName,
                [{ text: "Baar Sophia", value: "Baar Sophia" }]);
            fontNames.sort(function (a, b) {
                var textA = a.text.toUpperCase();
                var textB = b.text.toUpperCase();
                if (textA < textB) {
                    return -1;
                }
                if (textA > textB) {
                    return 1;
                }
                return 0;
            });
            editor.options.fontName = fontNames;
            editor.setOptions(editor.options);
            $(editor.body).prevAll("head").append("<link href='/Content/editor-fonts.css' rel='stylesheet' type='text/css'>")
            $(editor.body).css('overflow','hidden')
        }

        fejlecLablecSzerkesztoHelper.selectedPrecent = function (e) {
            
            var editor = $("#Htmlcontent").data("kendoEditor");
            var percent = $("#ImagePercentDropDown").data("kendoDropDownList").dataItem(e.item).Value
        
            if (!CommonUtils.isNullOrWhiteSpace(rawBase64Image) && percent > 0 && percent <= 9) {
                var percentValue = parseFloat("0." + percent)

                var img = new Image();
                img.src = rawBase64Image;
                var width = img.width * percentValue;
                var height = img.height * percentValue;

                var canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;

                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0, width, height);

                var result = canvas.toDataURL();  
            
                var editorContent = editor.value();

                var inserthtml = '<img src="' + result + '" />';

                editor.value(`${editorContent.replace(/(<img([^>]+)>)/gi, inserthtml)}`);
                
                img = null;
            } else if (!CommonUtils.isNullOrWhiteSpace(rawBase64Image) && percent == 10) {
                var editorContent = editor.value();

                var inserthtml = '<img src="' + rawBase64Image + '" />';

                editor.value(`${editorContent.replace(/(<img([^>]+)>)/gi, inserthtml)}`);
            }        
            
        };

        function generate() {
            var content = $("#Htmlcontent").data("kendoEditor").value();
            AjaxHelper.DoPost(imageValidate, content, function () {
                var temp = $("#tempHtmlContent");
                temp.empty();
                temp.append(content);
                generatedCanvas = content;
                showElonezetButton();
                showOkButton();
                showDelButton();
            });
        }

        function cancel() {
            if (isHtmlContetChange === true) {
                KretaWindowHelper.confirmWindow("@(SystemSettingsResource.BiztosanFolytat)", "@(SystemSettingsResource.ElNemMentettModositas)", KretaWindowHelper.destroyAllWindow);
            }
            else {
                KretaWindowHelper.destroyAllWindow();
            }
        }

        function save() {
            if (generatedCanvas !== null && editorValue !== "") {
                var model = {
                    IsFejlecOrLablecMegjelenit: $("#hiddenIsFejlecOrLablecMegjelenit").val(),
                    Htmlcontent: $("#Htmlcontent").data("kendoEditor").value()
                };

                AjaxHelper.DoPost(mentesUrl, model, KretaWindowHelper.destroyAllWindow);
                KretaWindowHelper.successFeedBackWindow();
            }
            else {
                var postData = {};
                if(editorValue === ""){
                    postData.isMegjelenit = false;
                }
                else {
                    postData.isMegjelenit = $("#hiddenIsFejlecOrLablecMegjelenit").val();

                }

                AjaxHelper.DoPostQuery(checkBoxSave, null, postData, KretaWindowHelper.destroyAllWindow);
                KretaWindowHelper.successFeedBackWindow();
            }
        }

        function confirmTorles() {
            KretaWindowHelper.confirmWindow("@(SystemSettingsResource.Torles)", "@(SystemSettingsResource.VeglegesenTorol)", torles);
        }

        function torles() {
            AjaxHelper.DoPost(torlesUrl, null, callbackTorles);
        }

        function callbackTorles() {
            KretaWindowHelper.successFeedBackWindow();

            var editor = $("#Htmlcontent").data("kendoEditor");
            editor.value('');
            editor.refresh();
            editorValue = editor.value();

            KretaWindowHelper.destroyAllWindow();
        }

        function encodeImageFile(cb) {
            return function () {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onloadend = function () {
                    cb(reader.result);
                }
                reader.readAsDataURL(file);
            }
        }

        function editorChange() {
            editorValue = $("#Htmlcontent").data("kendoEditor").value();
            if (isHtmlContetChange === true && isOkButtonShow === true) {
                hideOkButton();
            }
        }

        $('#inputFileToLoad').change(encodeImageFile(function (base64Img) {
            var editor = $("#Htmlcontent").data("kendoEditor");
            editor.exec("inserthtml", { value: '<img src="' + base64Img + '" />' });
            rawBase64Image = base64Img;
        }));

        $("#myIsFejlecOrLablecMegjelenit").change(showOkButton);
        $("#Htmlcontent").data("kendoEditor").bind("change", function () { isHtmlContetChange = true; editorChange(); showElonezetButton();});

        function hideOkButton() { $("#BtnOk").hide(); }
        function showOkButton() { if (isHtmlContetChange === true && generatedCanvas !== null || isHtmlContetChange === false) $("#BtnOk").show(); isOkButtonShow = true; }
        function hideDelButton() { $("#BtnDelete").hide(); }
        function showDelButton() { $("#BtnDelete").show(); }
        function hideElonezetButton() { $("#generate").hide(); }
        function showElonezetButton() { $("#generate").show(); }

        hideElonezetButton();
        hideOkButton();
        if (base64Image !== "") {
            showDelButton();
        } else {
            hideDelButton();
        }
        return fejlecLablecSzerkesztoHelper;
    })();

    $(document).ready(function () {
        FejlecLablecSzerkesztoHelper.init();
    });

</script>