Your IP : 216.73.216.79
<?php
use yii\bootstrap\Modal;
use yii\helpers\Html;
use yii\widgets\Pjax;
use yii\widgets\ActiveForm;
use backend\modules\theme\models\ThemeRule;
use yii\helpers\Url;
/* @var $this yii\web\View */
/* @var $searchModel backend\modules\theme\models\ThemeSettingSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
/* @var $setting backend\modules\theme\models\ThemeSetting */
$rules = ThemeRule::find()->where(['rule_status' => 1])->all();
$units = ['px', 'rem', '%', 'vh', 'vw'];
$this->title = Yii::t('app', 'Theme Settings');
$this->params['breadcrumbs'][] = $this->title;
$this->params['extra-asset']['JS'][] = 'plugins/colorpicker/bootstrap-colorpicker.min.js';
$this->params['extra-asset']['CSS'][] = 'plugins/colorpicker/bootstrap-colorpicker.min.css';
$this->params['extra-asset']['JS'][] = 'plugins/cropper/cropper.min.js';
$this->params['extra-asset']['CSS'][] = 'plugins/cropper/cropper.min.css';
$this->registerJs(
<<<JS
$('.colorpicker').colorpicker();
var imgcrop = $('#image-crop-src')
imgcrop.cropper({
aspectRatio: 1,
preview: ".img-prev",
done: function(data) {
// Output the result data for cropping image.
}
});
var inputImage = $("#inputImage");
if (window.FileReader) {
inputImage.change(function() {
var fileReader = new FileReader(),
files = this.files,
file;
if (!files.length) {
return;
}
file = files[0];
$('#uploadname').val(file.name)
$('#crop').removeClass('hide')
if (/^image\/\w+$/.test(file.type)) {
fileReader.readAsDataURL(file);
fileReader.onload = function () {
imgcrop.cropper("reset", true).cropper("replace", this.result);
};
} else {
showMessage("Please choose an image file.");
}
});
} else {
inputImage.addClass("hide");
}
var favicon = $("#inputImageFavicon");
if (window.FileReader) {
favicon.change(function() {
var fileReader = new FileReader(),
files = this.files,
file;
if (!files.length) {
return;
}
file = files[0];
$('#uploadnameFavicon').val(file.name)
});
}
var loginlogo = $("#inputloginlogo");
if (window.FileReader) {
loginlogo.change(function() {
var fileReader = new FileReader(),
files = this.files,
file;
if (!files.length) {
return;
}
file = files[0];
$('#loginlogo').val(file.name)
});
}
var loginbg = $("#inputloginbackground");
if (window.FileReader) {
loginbg.change(function() {
var fileReader = new FileReader(),
files = this.files,
file;
if (!files.length) {
return;
}
file = files[0];
$('#loginbackground').val(file.name)
});
}
$("#zoomIn").click(function() {
imgcrop.cropper("zoom", 0.1);
});
$("#zoomOut").click(function() {
imgcrop.cropper("zoom", -0.1);
});
$("#rotateLeft").click(function() {
imgcrop.cropper("rotate", 45);
});
$("#rotateRight").click(function() {
imgcrop.cropper("rotate", -45);
});
$("#save").click(function() {
let base64 = imgcrop.cropper("getDataURL")
// Convert it to a blob to upload
$('#base64Image').val(base64);
$('#cropmodal').modal('hide');
});
JS
)
?>
<style>
.cropper-container{
left:0 !important;
}
</style>
<div class="wrapper wrapper-content">
<a href="<?= Url::to(['/theme/theme-rule/index']) ?>" class="btn btn-primary m-b"><i class="fa fa-css3"></i> Css Rule</a>
<div class="ibox animated fadeInRight">
<div class="ibox-content b-r-md">
<?php Pjax::begin(); ?>
<?php ActiveForm::begin([
'action'=> ['theme-setting/create'],
'options' => ['enctype' => 'multipart/form-data']
]); ?>
<div class="col-md-12">
<div class="form-group">
<h2>Sidebar Image</h2>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> Image for the sidebar</div>
<div class="col-md-12 input-group col-xs-12 i-checks">
<input type="text" class="form-control" id="uploadname" name="sidebar-bg">
<div class="input-group-btn">
<label title="Upload image file" for="inputImage" class="btn btn-primary">
<input type="file" accept="image/*" name="file" id="inputImage" class="hide">
<input type="hidden" name="fileBase64" id="base64Image">
<i class="fa fa-image"></i> Upload Image
</label>
<label data-target="#cropmodal" data-toggle="modal" title="Edit image" id="crop" class="btn btn-primary hide"><i class="fa fa-crop"></i> Crop Image</label>
</div>
</div>
</div>
<div class="form-group">
<h2>Favicon</h2>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> Image for the favicon</div>
<div class="col-md-12 input-group col-xs-12 i-checks">
<input type="text" class="form-control" id="uploadnameFavicon" name="uploadnameFavicon">
<div class="input-group-btn">
<label title="Upload image file" for="inputImageFavicon" class="btn btn-primary">
<input type="file" accept="image/*" name="favicon" id="inputImageFavicon" class="hide">
<i class="fa fa-image"></i> Upload Image
</label>
</div>
</div>
</div>
<div class="form-group">
<h2>Login Logo Image</h2>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> Image for login background</div>
<div class="col-md-12 input-group col-xs-12 i-checks">
<input type="text" class="form-control" id="loginlogo" name="loginlogo">
<div class="input-group-btn">
<label title="Upload image file" for="inputloginlogo" class="btn btn-primary">
<input type="file" accept="image/*" name="inputloginlogo" id="inputloginlogo" class="hide">
<i class="fa fa-image"></i> Upload logo
</label>
</div>
</div>
</div>
<div class="form-group">
<h2>Login Background Image</h2>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> Image for login Page</div>
<div class="col-md-12 input-group col-xs-12 i-checks">
<input type="text" class="form-control" id="loginbackground" name="loginbackground">
<div class="input-group-btn">
<label title="Upload image file" for="inputloginbackground" class="btn btn-primary">
<input type="file" accept="image/*" name="inputloginbackground" id="inputloginbackground" class="hide">
<i class="fa fa-image"></i> Upload Background
</label>
</div>
</div>
</div>
<div class="form-group">
<h2>Page Title</h2>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> Default page title</div>
<div class="col-md-12 input-group col-xs-12 i-checks">
<input type="text" class="form-control" value="<?= $setting['9000']['page-title'] ?? '' ?>" id="page-title" name="rule-id-9000[param][page-title]">
<input type="hidden" value="text" name="rule-id-9000[type][page-title]">
<input type="hidden" value="SISTEM PENGURUSAN CONTENT" name="rule-id-9000[default][page-title]">
</div>
</div>
</div>
<?php foreach($rules as $rule): ?>
<div class="col-md-12">
<h2><?= $rule->rule_name?></h2>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> <?= $rule->rule_description?></div>
<?php foreach (json_decode($rule->rule_params) as $param):?>
<div class="form-group">
<div class="">
<label><?= $param->param_name ?></label>
<!-- input type -->
<?php if($param->param_type === 'text'): ?>
<input type="text" name="rule-id-<?= $rule->rule_id?>[param][<?= $param->param_name ?>]" value="<?= $setting[$rule->rule_id][$param->param_name] ?? null ?>" class="form-control">
<?php endif?>
<?php if($param->param_type === 'colorpicker'): ?>
<input type="text" name="rule-id-<?= $rule->rule_id?>[param][<?= $param->param_name ?>]" value="<?= $setting[$rule->rule_id][$param->param_name] ?? null ?>" class="form-control colorpicker">
<?php endif?>
<?php if($param->param_type === 'unit'): ?>
<div class="row">
<div class="col-md-6">
<input type="number" name="rule-id-<?= $rule->rule_id?>[param][<?= $param->param_name ?>][]" value="<?= $setting[$rule->rule_id][$param->param_name]['value'] ?? null ?>" class="form-control">
</div>
<div class="col-md-6">
<select class="form-control" name="rule-id-<?= $rule->rule_id?>[param][<?= $param->param_name ?>][]">
<?php foreach ($units as $u):;$unit = $setting[$rule->rule_id][$param->param_name]['unit'] ?? null;?>
<option value="<?= $u ?>" <?= $u === $unit ? 'selected' : '' ?>><?= $u ?></option>
<?php endforeach?>
</select>
</div>
</div>
<?php endif?>
<!-- input type end-->
<!-- input default -->
<input type="hidden" value="<?= $param->param_type ?>" name="rule-id-<?= $rule->rule_id?>[type][<?= $param->param_name ?>]">
<?php $def = $param->param_type === 'unit' ? $param->param_default->value . $param->param_default->unit : $param->param_default; ?>
<input type="hidden" value="<?= $def ?>" name="rule-id-<?= $rule->rule_id?>[default][<?= $param->param_name ?>]">
</div>
</div>
<?php endforeach?>
</div>
<?php endforeach;?>
<div class="clearfix"></div>
<div class="hr-line-dashed"></div>
<div class="form-group col-md-12">
<?= Html::submitButton("<i class='fa fa-save'></i> " . Yii::t('app', 'Save'), ['class' => 'btn btn-success pull-right']) ?>
</div>
<div class="clearfix"></div>
<?php ActiveForm::end(); ?>
<?php Pjax::end(); ?>
</div>
</div>
</div>
<?php
/* start modal */
Modal::begin([
'header' => Yii::t('app','Image editor'),
'size' => 'modal-md',
'id' => 'cropmodal',
'footer' => '<button class="btn btn-sm btn-default" id="zoomIn">Zoom In</button>' .
'<button class="btn btn-sm btn-default" id="zoomOut">Zoom out</button>' .
'<button class="btn btn-sm btn-default" id="rotateLeft">Rotate left</button>' .
'<button class="btn btn-sm btn-default" id="rotateRight">Rotate Right</button>' .
'<button class="btn btn-sm btn-primary" id="save">Save</button>'
]);
echo '<div class="row">';
echo '<div class="col-md-6"><h2>Image Crop</h2><div class="image-crop"><img id="image-crop-src" width="100%" /></div></div>';
echo '<div class="col-md-6"><h2>Preview</h2><div style="width:190px;height:190px;" class="img-prev img-preview"></div></div>';
echo '</div>';
echo '<br>';
echo '<div class="clearfix"></div>';
Modal::end();
?>