Ejemplo n.º 1
0
    private function registerAssets()
    {
        GalleryAssets::register($this->getView());
        $singleGallery = ['active' => null, 'noactive' => ''];
        if (!$this->multiple) {
            $singleGallery = ['active' => '$($(element).parents(".sya_media_library").find(".active")).removeClass("active"); $("#image").val("");', 'noactive' => ' else {
                    removeImageByGallery(element);
                }'];
        }
        $this->getView()->registerJs('
            function syaPreviewImage(element){
                var listImage = $("#image").val().split(";"),
                    imagesSelected = [],
                    image = $(element).attr("data-info");

                $.ajax({
                    url: "' . Url::to(['/gallery/ajax/getinfoimage']) . '",
                    type: "post",
                    data: {image: image},
                }).done(function (data) {
                    $("#sya_gallery_viewpath").html(data);
                    formChangeValue();
                });

                if (!$(element).parent().hasClass("active")) {
                    ' . ArrayHelper::getValue($singleGallery, "active") . '

                    // Add image for input
                    if ($("#image").val().length && listImage.length){
                        var updateImage = false;
                        for(i = 0; i < listImage.length; i++){
                            if (listImage[i] == image){
                                updateImage = true;
                            }
                            imagesSelected[i] = listImage[i];
                        }

                        if (!updateImage){
                            imagesSelected[imagesSelected.length] = image;
                        }
                    }

                    $("#image").val(imagesSelected.length ? imagesSelected.join(";") : image);

                    $(element).parent().addClass("active");
                }' . ArrayHelper::getValue($singleGallery, "noactive") . '
            }

            function formChangeValue(){
                $("#sya_gallery_form_preview .form-control").keyup(function(event) {
                    var element = $(this),
                        listImage = $("#image").val().split(";"),
                        url = element.parents("#sya_gallery_form_preview").find("input[name=\'sya_url\']").val(),
                        imageChange = [];

                    for(i = 0; i < listImage.length; i++){
                        var image = jQuery.parseJSON(listImage[i]);

                        if (image.url == url){
                            element.each(function(){
                                image[element.attr("name").replace("sya_", "")] = element.val();
                            });

                            $("div[id=\'" + url + "\']").attr("data-info", JSON.stringify(image));
                        }

                        imageChange[i] = JSON.stringify(image);
                    }

                    $("#image").val(imageChange.length ? imageChange.join(";") : listImage);
                });
            }

            function removeImageByGallery(element){
                var listImage = $("#image").val().split(";"),
                    image = $(element).attr("data-info");

                if ($("#image").val().length && listImage.length){
                    for(i = 0; i < listImage.length; i++){
                        if (listImage[i] == image){
                            listImage.splice(i, 1);
                        }
                    }
                }

                $("#image").val(listImage.length ? listImage.join(";") : "");

                $(element).parent().removeClass("active");
                $("#sya_gallery_viewpath").html("");
            }

            function addImageByGallery(type){
                var module = "' . $this->moduleName . '",
                    attribute = "' . $this->attribute . '",
                    templateInfomationImage = \'' . str_replace(array("\r\n", "\n", "\r"), '', $this->infomationImage) . '\',
                    templateInfomationImageDetail = \'' . str_replace(array("\r\n", "\n", "\r"), '', $this->infomationImageDetail) . '\',
                    columns = \'' . Json::encode($this->columns) . '\',
                    image = $("#image").val();

                if (image.length > 0) {
                    $.ajax({
                        url: "' . Url::to(['/gallery/ajax/additemimage']) . '",
                        type: "post",
                        data: {type: type, module: module, attribute: attribute, columns: columns, image: image, templateInfomationImage: templateInfomationImage, templateInfomationImageDetail: templateInfomationImageDetail},
                    }).done(function (data) {
                        if (data.length > 0) {
                            $("' . $this->syaContainer . '").append(data);
                            $("#sya_gallery_modal").modal("hide");

                            // Reset value
                            $("#sya_gallery_path").find(".active").removeClass("active");
                            $("#sya_gallery_viewpath").html("");
                            $(".sya_image_input").val("");
                        }
                    });
                }
            }

            // Ham xoa anh
            function syaremoveImage(element){
                var confirmAlert = confirm("' . Yii::t('yii', 'Are you sure you want to delete this item?') . '");
                if (confirmAlert == true){
                    $(element).parents("#imageItem").remove();
                    // Kiem tra co anh trong gallery hay khong
                    if ($("' . $this->syaContainer . '").children().length == 0) {
                        $("' . $this->syaContainer . '").append(\'' . Html::hiddenInput($this->moduleName . '[' . $this->attribute . ']', '', ['class' => 'form-control']) . '\');
                    }
                }
            }

            var page = 2;
            function syaloadMoreImage(){
                $.ajax({
                    url: "' . Url::to(['/gallery/ajax/getgallerypath']) . '",
                    type: "post",
                    data: {type: $("#insert_image").attr("data-type"), page: page},
                }).done(function (data) {
                    if (data != "") {
                        $(".sya_media_library").append(data);
                        page += 1;
                    }
                });
            }

            function syaGetGalleryByPath(){
                $.ajax({
                    url: "' . Url::to(['/gallery/ajax/getgallerypath']) . '",
                    type: "post",
                    data: {type: "' . self::TYPE_PATH . '"},
                }).done(function (data) {
                    $(".sya_media_library").html(data);

                    $(".sya_remove_img").hover(function(){
                        $(this).removeClass("glyphicon-ok");
                        $(this).addClass("glyphicon-remove");
                    }, function(){
                        $(this).addClass("glyphicon-ok");
                        $(this).removeClass("glyphicon-remove");
                    });
                });
            }
        ', View::POS_END);
        $this->getView()->registerJs('
            // Sap xep anh
            $("' . $this->syaContainer . '").sortable({});

            // Dropzone drop and drag file
            Dropzone.options.myAwesomeDropzone = {
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,
                paramName: "image",
                params: {
                    type: "' . self::TYPE_UPLOAD . '",
                    module: "' . $this->moduleName . '",
                    columns: \'' . Json::encode($this->columns) . '\'
                },
                autoDiscover: false,
                url: "' . Url::to(['/gallery/ajax/additemimage']) . '",
                headers: {
                    "Accept": "*/*",
                    "' . \yii\web\Request::CSRF_HEADER . '": "' . Yii::$app->getRequest()->csrfToken . '",
                    "Access-Control-Allow-Origin": "*"
                },

                // Dropzone settings
                init: function() {
                    this.on("sendingmultiple", function(image, xhr, formData) {
                        formData.processData = false;
                        formData.contentType = false;
                        formData.enctype = "multipart/form-data";
                    });

                    this.on("complete", function(files, responseText, e) {
                        syaGetGalleryByPath();
                        $(".custom_modal_gallery a[data-type=\'' . self::TYPE_PATH . '\']").tab("show");
                        $(".sya_media_library").prepend(responseText);
                    });
                }
            }

            $(".custom_modal_gallery a[data-toggle=\'tab\']").on("shown.bs.tab", function (e) {
                var tabs = $(e.target).parents(".tabs-left"),
                    image = tabs.find(".active").find(".sya_image_input");

                if ($(".sya_media_library").children().length <= 0 && $(e.target).attr("data-type") == "' . self::TYPE_PATH . '"){
                    syaGetGalleryByPath();
                }

                // Forcus input
                image.focus();
                tabs.find(".sya_image_input").removeAttr("id");
                image.attr("id", "image");

                $("#insert_image").attr("data-type", $(e.target).attr("data-type"));
            })

            $(".sya_input_info_image").on("input",function(e){
            	var image = $(this).val();
                $.ajax({
                    url: "' . Url::to(['/gallery/ajax/getimagepreview']) . '",
                    type: "post",
                    data: {image: image},
                }).done(function (data) {
                    $("#embed_url_settings").html(data);
                    $("#image").val("{\\"url\\": \\"" + image + "\\", \\"title\\":\\"\\", \\"caption\\":\\"\\", \\"alt_text\\":\\"\\"}");
                    formChangeValue();
                });
            });

            $("#insert_image").click(function() {
                addImageByGallery($(this).attr("data-type"));
            });

            $( ".sya_media_library" ).scroll(function() {
                var scrollPosition = $(this).scrollTop() + $(this).outerHeight(),
                    divTotalHeight = $(this)[0].scrollHeight
                          + parseInt($(this).css("padding-top"), 10)
                          + parseInt($(this).css("padding-bottom"), 10)
                          + parseInt($(this).css("border-top-width"), 10)
                          + parseInt($(this).css("border-bottom-width"), 10);

                if(scrollPosition + 20 == divTotalHeight)
                {
                    syaloadMoreImage();
                }
            });
        ', View::POS_READY);
    }
Ejemplo n.º 2
0
    private function registerAssets()
    {
        GalleryAssets::register($this->getView());
        $this->getView()->registerJs('
            function insertImagePath(element){
                var data = $("#let_galleries").val();
                if (data == ""){
                    $("#let_galleries").val($(element).attr("id"));
                } else {
                    $("#let_galleries").val(data.concat("," + $(element).attr("id")));
                }
            }

            function addImageByGallery(type){
                var module = "' . $this->moduleName . '",
                    columns = \'' . \yii\helpers\Json::encode($this->columns) . '\',
                    image = $("#image").val();

                $.ajax({
                    url: "' . \yii\helpers\Url::to(['/gallery/ajax/additemimage']) . '",
                    type: "post",
                    data: {type: type, module: module, columns: columns, image: image},
                }).done(function (data) {
                    if (data.length > 0) {
                        $("#tableImage").append(data);
                        $("#sya_gallery").modal("hide");
                    }
                });
            }
            
            // Ham xoa anh
            function removeImage(element){
                var confirmAlert = confirm("' . Yii::t('yii', 'Are you sure you want to delete this item?') . '");
                if (confirmAlert == true){
                    $(element).parents("#imageItem").remove();
                    // Kiem tra co anh trong gallery hay khong
                    if ($("#tableImage").children().length == 0) {
                        $("#tableImage").append(\'' . Html::hiddenInput($this->moduleName . '[gallery]', '', ['class' => 'form-control']) . '\');
                    }
                }
            }
        ', \yii\web\View::POS_END);
        $this->getView()->registerJs('
            // Sap xep anh
            $("#tableImage").sortable({});

            // Dropzone drop and drag file
            Dropzone.options.myAwesomeDropzone = {
                uploadMultiple: true,
                parallelUploads: 100,
                maxFiles: 100,
                paramName: "image",
                params: {
                    type: "' . self::TYPE_UPLOAD . '",
                    module: "' . $this->moduleName . '",
                    columns: \'' . \yii\helpers\Json::encode($this->columns) . '\'
                },
                autoDiscover: false,
                url: "' . \yii\helpers\Url::to(['/gallery/ajax/additemimage']) . '",
                headers: {
                    "Accept": "*/*",
                    "' . \yii\web\Request::CSRF_HEADER . '": "' . Yii::$app->getRequest()->csrfToken . '",
                    "Access-Control-Allow-Origin": "*"
                },

                // Dropzone settings
                init: function() {
                    this.on("sendingmultiple", function(image, xhr, formData) {
                        formData.processData = false;
                        formData.contentType = false;
                        formData.enctype = "multipart/form-data";
                    });

                    this.on("successmultiple", function(files, responseText, e) {
                        $("#tableImage").append(responseText);
                    });
                }
            }

            // Forcus input
            $(".custom_modal_gallery a[data-toggle=\'tab\']").on("shown.bs.tab", function (e) {
                $("#insert_image").attr("data-type", $(e.target).attr("data-type"));
                $(e.target).parents(".tabs-container").find("#image").focus();
            })

            $("#image").on("input",function(e){
                $.ajax({
                    url: "' . \yii\helpers\Url::to(['/gallery/ajax/getimagepreview']) . '",
                    type: "post",
                    data: {image: $(this).val()},
                }).done(function (data) {
                    $("#embed_url_settings").html(data);
                });
            });

            $("#insert_image").click(function() {
                addImageByGallery($(this).attr("data-type"));
            });
        ', yii\web\View::POS_READY);
    }