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