<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use justinvoelker\awesomebootstrapcheckbox\ActiveField;
use yii\widgets\MaskedInput;
use common\widgets\GooglePlacesAutoComplete\GooglePlacesAutoComplete;
use common\widgets\ImageLoad\assets\CropperAsset;
use common\widgets\Chosen\ChosenAsset;
use common\widgets\FontAwesome\AssetBundle;
use yii\helpers\Url;
AssetBundle::register($this);
ChosenAsset::register($this);
CropperAsset::register($this);
/* @var $this yii\web\View */
/* @var $modelAdTransport common\models\AdTransport */
/* @var $user common\models\User */
/* @var $form yii\bootstrap\ActiveForm */
/* @var $key int */
/* @var $pjaxUrl string */
$user = Yii::$app->user->identity;
?>
<div class="col-md-6 col-md-offset-3">
<div class="ad-real-estate-form">
<div class="row">
<?php
$form = ActiveForm::begin(['action' => $modelAdTransport->isNewRecord ? 'create' : Url::to(['update', 'id' => $modelAdTransport->id]), 'method' => 'post', 'fieldClass' => justinvoelker\awesomebootstrapcheckbox\ActiveField::className(), 'id' => 'ad_form']);
?>
<?php
//d($modelAdTransport->scenario);
public function registerClientScript()
{
$view = $this->getView();
// Регистрация виджета
CropperAsset::register($view);
// Пользовательские настройки переводим в JSON
$options = Json::encode($this->pluginOptions);
$cropBoxData = Json::encode($this->cropBoxData);
$canvasData = Json::encode($this->canvasData);
$imageClass = $this->classesWidget['imageClass'];
$buttonDeleteClass = $this->classesWidget['buttonDeleteClass'];
$imageContainerClass = $this->classesWidget['imageContainerClass'];
$formImagesContainerClass = $this->classesWidget['formImagesContainerClass'];
$js = <<<JS
var loadFile = function(event) { // Создается объект события, который срабатывает при выборе нового изображения
var output = document.getElementById("previewImg-{$this->id}"); // output - объект, куда будет помещено выбранное изображение
output.src = URL.createObjectURL(event.target.files[0]); // в свойство src объекта output помещает url выбранного изображения\\
\$("#modal-{$this->id}").modal('show'); // открывает модальное окно с ID "#{$this->id}", запускается перед событием shown.bs.modal
};
var deleteImage = function(event) { // Функция для удаления изображения
if (confirm("Удалить изображение?")) { // подтверждение удаления
var imageData = JSON.stringify({
modelName: "{$this->modelName}",
id: "{$this->id}",
object_id: "{$this->object_id}",
image_id: window.idImage,
images_num: "{$this->images_num}",
images_label: "{$this->images_label}",
images_temp: "{$this->images_temp}",
imageSmallWidth: "{$this->imageSmallWidth}",
imageSmallHeight: "{$this->imageSmallHeight}",
deleteUrl: "{$this->deleteUrl}",
baseUrl: "{$this->baseUrl}",
imagePath: "{$this->imagePath}",
noImage: "{$this->noImage}",
imageClass: "{$imageClass}",
buttonDeleteClass: "{$buttonDeleteClass}",
imageContainerClass: "{$imageContainerClass}",
formImagesContainerClass: "{$formImagesContainerClass}"
});
\$.pjax({
type: "POST",
url: "{$this->deleteUrl}",
data: {imageData: imageData},
container: "#images-widget",
push: false
});
} else {
return false;
}
};
JS;
$view->registerJs($js, View::POS_HEAD);
// Событие, загрзки файла, регистрируем в head
$js = <<<JS
var modalBox = \$("#modal-{$this->id}"), // modalBox - объект модального окна с ID "#{$this->id}"
image = \$("#modal-{$this->id} .crop-image-container > img"), // селектор для выбранного изображения
cropBoxData = {$cropBoxData},
canvasData = {$canvasData},
cropUrl; // путь контроллер/действие, куда будут отправлятся pjax данные
modalBox.on("shown.bs.modal", function (event) { // событие, перед фактическим показом модального окна, выполняется после события show
cropUrl = \$("#crop-url-{$this->id}").attr("data-crop-url"); // в объект cropUrl помещаем маршрут из свойства data-crop-url элемента "#crop-url-{$this->id}"
image.cropper(\$.extend({ // \$.extend объеденяем объекты built и dragend, результат будет записан в built
built: function () { // событие происходит когда Cropper полностью построен
// Начальные настройки изображения
image.cropper('setCropBoxData', cropBoxData);
image.cropper('setCanvasData', canvasData);
},
dragend: function() { // событие завершения выделения и получения данных
cropBoxData = image.cropper('getCropBoxData'); // получение состояния рамки
canvasData = image.cropper('getCanvasData'); // получение состояние холста
}
}, {$options})); // дополнительные настройки
}).on('hidden.bs.modal', function () { // событие выполняется перед фактическим закрытием модального окна и после события hide
cropBoxData = image.cropper('getCropBoxData'); // получение конечных данных рамки
canvasData = image.cropper('getCanvasData'); // получение конечных данных холста
image.cropper('destroy'); // уничтожает Cropper и удаляет экземпляр из изображения
});
\$(document).on("click", "#rotate-left-{$this->id}", function(e) { // при нажатие на элемент "#rotate-left-{$this->id}" происходит поворот влево на 90 градусов
image.cropper("rotate", -90);
});
\$(document).on("click", "#rotate-right-{$this->id}", function(e) { // при нажатие на элемент "#rotate-right-{$this->id}" происходит поворот вправо на 90 градусов
image.cropper("rotate", 90);
});
JS;
$view->registerJs($js);
$js = <<<JS
\$(document).on("click", "#modal-{$this->id} .crop-submit", function(e) { // событие нажатия на кнопку с классом .crop-submit в элементе с ID "#{$this->id}"
e.preventDefault(); // событие не сработает по умолчанию
// console.log(image.cropper("getData")); // вывод объекта image.cropper("getData") в консоль
var form = \$("#image-form-{$this->id}");
cropBoxData = image.cropper('getCropBoxData'); // получение конечных данных рамки
canvasData = image.cropper('getCanvasData'); // получение конечных данных холста
var cropData = JSON.stringify(image.cropper("getData"));
form.trigger('submit');
form.on("beforeSubmit", function(e) {
\$("#image_id-{$this->id}").attr("value", window.idImage); // отправляем ID изображения, которое нужно изменить
var cropData = JSON.stringify(image.cropper("getData"));
\$("#imageCrop-{$this->id}").attr("value", cropData);
});
modalBox.modal("hide"); // событие выполняется перед фактическим закрытием модального окна и перед событием hidden.bs.modal
});
JS;
$view->registerJs($js);
}
