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); }
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); }