Anastasia / clinica

var imageManagerModule = {
    //params for input selector
    fieldId: null,
    cropRatio: null,
    cropViewMode: 1,
    defaultImageId: null,
    selectType: null, //current selected image
    selectedImage: null, //language
    message: null, //init imageManager
    init: function() {
        //init cropper
        $('#module-imagemanager > .row .col-image-editor .image-cropper .image-wrapper img#image-cropper')
            .cropper(
                {
                    viewMode: imageManagerModule.cropViewMode
                }
            );

        //preselect image if image-id isset
        if (imageManagerModule.defaultImageId !== "") {
            imageManagerModule.selectImage(imageManagerModule.defaultImageId);
        }

        //set selected after pjax complete
        $('#pjax-mediamanager')
            .on(
                'pjax:complete', function() {
                    if (imageManagerModule.selectedImage !== null) {
                        imageManagerModule.selectImage(imageManagerModule.selectedImage.id);
                    }
                }
            );

        $(document)
            .on(
                'click', '#save-image-info', function() {
                    var form = $('#save-image-info-form');
                    $.ajax(
                        {
                            url: imageManagerModule.baseUrl + "/save-image-info",
                            type: "POST",
                            data: form.serialize(),
                            success: function(data) {
                                new PNotify(
                                    {
                                        title: "Notification",
                                        text: "Image info saved",
                                        type: "info",
                                        styling: "bootstrap3",
                                        icon: "glyphicon glyphicon-exclamation-sign"
                                    }
                                );
                            }
                        }
                    );
                }
            );
    }, //filter result
    filterImageResult: function(searchTerm) {
        //set new url
        var newUrl = window.queryStringParameter.set(window.location.href, "ImageManagerSearch[globalSearch]", searchTerm);
        //set pjax
        $.pjax(
            {
                url: newUrl,
                container: "#pjax-mediamanager",
                push: false,
                replace: false,
                timeout: 5000,
                scrollTo: false
            }
        );
    }, //select an image
    selectImage: function(id) {
        //set selected class
        $("#module-imagemanager .item-overview .item")
            .removeClass("selected");
        $("#module-imagemanager .item-overview .item[data-key='" + id + "']")
            .addClass("selected");
        //get details
        imageManagerModule.getDetails(id);
    }, //pick the selected image
    pickImage: function() {
        //switch between select type
        switch (imageManagerModule.selectType) {
            //default widget selector
            case "input":
                //get id data
                var sFieldId = imageManagerModule.fieldId;
                var sFieldNameId = sFieldId + "_name";
                var sFieldImageId = sFieldId + "_image";
                //set input data
                $('#' + sFieldId, window.parent.document)
                    .val(imageManagerModule.selectedImage.id);
                $('#' + sFieldNameId, window.parent.document)
                    .val(imageManagerModule.selectedImage.fileName);
                $('#' + sFieldImageId, window.parent.document)
                    .attr("src", imageManagerModule.selectedImage.image)
                    .parent()
                    .removeClass("hide");
                //trigger change
                parent.$('#' + sFieldId)
                    .trigger('change');
                //show delete button
                $(".delete-selected-image[data-input-id='" + sFieldId + "']", window.parent.document)
                    .removeClass("hide");
                //close the modal
                window.parent.imageManagerInput.closeModal();
                break;
            //CKEditor selector
            case "ckeditor":
            //TinyMCE Selector
            case "tinymce":
                //check if isset image
                if (imageManagerModule.selectedImage !== null) {
                    //call action by ajax
                    $.ajax(
                        {
                            url: imageManagerModule.baseUrl + "/get-original-image",
                            type: "POST",
                            data: {
                                ImageManager_id: imageManagerModule.selectedImage.id,
                                _csrf: $('meta[name=csrf-token]')
                                    .prop('content')
                            },
                            dataType: "json",
                            success: function(responseData, textStatus, jqXHR) {
                                //set attributes for each selector
                                if (imageManagerModule.selectType == "ckeditor") {
                                    var sField = window.queryStringParameter.get(window.location.href, "CKEditorFuncNum");
                                    window.top.opener.CKEDITOR.tools.callFunction(sField, responseData);
                                    window.self.close();
                                } else if (imageManagerModule.selectType == "tinymce") {
                                    var sField = window.queryStringParameter.get(window.location.href, "tag_name");
                                    window.opener.document.getElementById(sField).value = responseData;
                                    window.close();
                                    window.opener.focus();
                                }
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                alert("Error: can't get item");
                            }
                        }
                    );
                } else {
                    alert("Error: image can't picked");
                }
                break;
        }

    }, //delete the selected image
    deleteSelectedImage: function() {
        //confirm message
        if (confirm(imageManagerModule.message.deleteMessage)) {
            //close editor
            imageManagerModule.editor.close();
            //check if isset image
            if (imageManagerModule.selectedImage !== null) {
                //call action by ajax
                $.ajax(
                    {
                        url: imageManagerModule.baseUrl + "/delete",
                        type: "POST",
                        data: {
                            ImageManager_id: imageManagerModule.selectedImage.id,
                            _csrf: $('meta[name=csrf-token]')
                                .prop('content')
                        },
                        dataType: "json",
                        success: function(responseData, textStatus, jqXHR) {
                            //check if delete is true
                            if (responseData.delete === true) {
                                //delete item element
                                $("#module-imagemanager .item-overview .item[data-key='" + imageManagerModule.selectedImage.id + "']")
                                    .remove();
                                //add hide class to info block
                                $("#module-imagemanager .image-info")
                                    .addClass("hide");
                                //set selectedImage to null
                                imageManagerModule.selectedImage = null;
                                //close edit
                            } else {
                                alert("Error: item is not deleted");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Error: can't delete item");
                        }
                    }
                );
            } else {
                alert("Error: image can't delete, no image isset set");
            }
        }
    }, //get image details
    getDetails: function(id, pickAfterGetDetails) {
        //set propertie if not set
        pickAfterGetDetails = pickAfterGetDetails !== undefined ? pickAfterGetDetails : false;
        //call action by ajax
        $.ajax(
            {
                url: imageManagerModule.baseUrl + "/view",
                type: "POST",
                data: {
                    ImageManager_id: id,
                    _csrf: $('meta[name=csrf-token]')
                        .prop('content')
                },
                dataType: "json",
                success: function(responseData, textStatus, jqXHR) {
                    //set imageManagerModule.selectedImage property
                    imageManagerModule.selectedImage = responseData;

                    //if need to pick image?
                    if (pickAfterGetDetails) {
                        imageManagerModule.pickImage();
                        //else set data
                    } else {
                        //set text elements
                        $("#module-imagemanager .image-info .fileName")
                            .text(responseData.fileName)
                            .attr("title", responseData.fileName);
                        $("#module-imagemanager .image-info .created")
                            .text(responseData.created);
                        $("#module-imagemanager .image-info .fileSize")
                            .text(responseData.fileSize);
                        $("#module-imagemanager .image-info .dimensions .dimension-width")
                            .text(responseData.dimensionWidth);
                        $("#module-imagemanager .image-info .dimensions .dimension-height")
                            .text(responseData.dimensionHeight);
                        $("#module-imagemanager .image-info .thumbnail")
                            .html("<img src='" + responseData.image + "' alt='" + responseData.fileName + "'/>");
                        $("#module-imagemanager .image-info .seo-info")
                            .html(responseData.div);
                        //remove hide class
                        $("#module-imagemanager .image-info")
                            .removeClass("hide");
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("Error: can't get ''data''");
                }
            }
        );
    }, //upload file
    uploadSuccess: function(uploadResponse) {
        //close editor
        imageManagerModule.editor.close();
        //reload pjax container
        $.pjax.reload(
            '#pjax-mediamanager', {
                push: false,
                replace: false,
                timeout: 5000,
                scrollTo: false
            }
        );
    }, //editor functions
    editor: {
        //open editor block
        open: function() {
            //show editer / hide overview
            $("#module-imagemanager > .row .col-image-editor")
                .show();
            $("#module-imagemanager > .row .col-overview")
                .hide();
        }, //close editor block
        close: function() {
            //show overview / hide editer
            $("#module-imagemanager > .row .col-overview")
                .show();
            $("#module-imagemanager > .row .col-image-editor")
                .hide();
        }, //open cropper
        openCropper: function() {
            //check if isset image
            if (imageManagerModule.selectedImage !== null) {
                //call action by ajax
                $.ajax(
                    {
                        url: imageManagerModule.baseUrl + "/get-original-image",
                        type: "POST",
                        data: {
                            ImageManager_id: imageManagerModule.selectedImage.id,
                            _csrf: $('meta[name=csrf-token]')
                                .prop('content')
                        },
                        dataType: "json",
                        success: function(responseData, textStatus, jqXHR) {
                            //hide cropper
                            $("#module-imagemanager > .row .col-image-cropper")
                                .css("visibility", "hidden");
                            //set image in cropper
                            $('#module-imagemanager > .row .col-image-editor .image-cropper .image-wrapper img#image-cropper')
                                .one(
                                    'built.cropper', function() {
                                        //show cropper
                                        $("#module-imagemanager > .row .col-image-cropper")
                                            .css("visibility", "visible");
                                    }
                                )
                                .cropper('reset')
                                .cropper('setAspectRatio', parseFloat(imageManagerModule.cropRatio))
                                .cropper('replace', responseData);
                            //open editor
                            imageManagerModule.editor.open();
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Error: can't get item");
                        }
                    }
                );
            } else {
                alert("Error: image can't crop, no image isset set");
            }
        }, //apply crop
        applyCrop: function(pickAfterCrop) {
            //set propertie if not set
            pickAfterCrop = pickAfterCrop !== undefined ? pickAfterCrop : false;
            //check if isset image
            if (imageManagerModule.selectedImage !== null) {
                //set image in cropper
                var oCropData = $('#module-imagemanager > .row .col-image-editor .image-cropper .image-wrapper img#image-cropper')
                    .cropper("getData");
                //call action by ajax
                $.ajax(
                    {
                        url: imageManagerModule.baseUrl + "/crop",
                        type: "POST",
                        data: {
                            ImageManager_id: imageManagerModule.selectedImage.id,
                            CropData: oCropData,
                            _csrf: $('meta[name=csrf-token]')
                                .prop('content')
                        },
                        dataType: "json",
                        success: function(responseData, textStatus, jqXHR) {
                            //set cropped image
                            if (responseData !== null) {
                                //if pickAfterCrop is true? select directly else
                                if (pickAfterCrop) {
                                    imageManagerModule.getDetails(responseData, true);
                                    //else select the image only
                                } else {
                                    //set new image
                                    imageManagerModule.selectImage(responseData);
                                    //reload pjax container
                                    $.pjax.reload(
                                        '#pjax-mediamanager', {
                                            push: false,
                                            replace: false,
                                            timeout: 5000,
                                            scrollTo: false
                                        }
                                    );
                                }
                            }
                            //close editor
                            imageManagerModule.editor.close();
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Error: item is not cropped");
                        }
                    }
                );
            } else {
                alert("Error: image can't crop, no image isset set");
            }
        }
    }
};

$(document)
    .ready(
        function() {
            //init Image manage
            imageManagerModule.init();
            //on click select item (open view)
            $(document)
                .on(
                    "click", "#module-imagemanager .item-overview .item", function() {
                        //get id
                        var ImageManager_id = $(this)
                            .data("key");
                        //select image
                        imageManagerModule.selectImage(ImageManager_id);
                    }
                );
            //on click pick image
            $(document)
                .on(
                    "click", "#module-imagemanager .image-info .pick-image-item", function() {
                        imageManagerModule.pickImage();
                        return false;
                    }
                );
            //on click delete call "delete"
            $(document)
                .on(
                    "click", "#module-imagemanager .image-info .delete-image-item", function() {
                        imageManagerModule.deleteSelectedImage();
                        return false;
                    }
                );
            //on click crop call "crop"
            $(document)
                .on(
                    "click", "#module-imagemanager .image-info .crop-image-item", function() {
                        imageManagerModule.editor.openCropper();
                        return false;
                    }
                );
            //on click apply crop
            $(document)
                .on(
                    "click", "#module-imagemanager .image-cropper .apply-crop", function() {
                        imageManagerModule.editor.applyCrop();
                        return false;
                    }
                );
            //on click apply crop
            $(document)
                .on(
                    "click", "#module-imagemanager .image-cropper .apply-crop-select", function() {
                        imageManagerModule.editor.applyCrop(true);
                        return false;
                    }
                );
            //on click cancel crop
            $(document)
                .on(
                    "click", "#module-imagemanager .image-cropper .cancel-crop", function() {
                        imageManagerModule.editor.close();
                        return false;
                    }
                );
            //on keyup change set filter
            $(document)
                .on(
                    "keyup change", "#input-mediamanager-search", function() {
                        imageManagerModule.filterImageResult(
                            $(this)
                                .val()
                        );
                    }
                );

        }
    );

/*
 * return new get param to url
 */
window.queryStringParameter = {
    get: function(uri, key) {
        var reParam = new RegExp('(?:[\?&]|&amp;)' + key + '=([^&]+)', 'i');
        var match = uri.match(reParam);
        return (match && match.length > 1) ? match[ 1 ] : null;
    },
    set: function(uri, key, value) {
        //replace brackets
        var keyReplace = key.replace("[]", "")
            .replace(/\[/g, "%5B")
            .replace(/\]/g, "%5D");
        //replace data
        var re = new RegExp("([?&])" + keyReplace + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + keyReplace + "=" + value + '$2');
        } else {
            return uri + separator + keyReplace + "=" + value;
        }
    }
};