feat(ui): implement Stage 7 watermark background switcher (product, white, transparent grid) and action button margin polish

This commit is contained in:
nertyog 2026-08-07 04:58:49 +03:00
parent 07e9d9773c
commit be06ede1c3
3 changed files with 62 additions and 38 deletions

View File

@ -1999,9 +1999,10 @@ class ControllerModuleImgOpti extends Controller {
$type = isset($this->request->post['module_img_opti_wm_type']) ? $this->request->post['module_img_opti_wm_type'] : '';
$image = isset($this->request->post['module_img_opti_wm_image']) ? $this->request->post['module_img_opti_wm_image'] : '';
$bg_mode = isset($this->request->post['wm_preview_bg']) ? $this->request->post['wm_preview_bg'] : 'product';
$base_file = '';
if ($bg_mode === 'product') {
$query_prod = $this->db->query("SELECT image FROM `" . DB_PREFIX . "product` WHERE image IS NOT NULL AND image != '' AND image LIKE 'catalog/%' LIMIT 1");
if ($query_prod->num_rows && is_file(DIR_IMAGE . $query_prod->row['image'])) {
$base_file = DIR_IMAGE . $query_prod->row['image'];
@ -2011,6 +2012,7 @@ class ControllerModuleImgOpti extends Controller {
$base_file = DIR_IMAGE . 'catalog/no_image.png';
}
}
}
$temp_preview = DIR_IMAGE . 'cache/temp_wm_preview.png';
$compare_dir = DIR_IMAGE . 'cache/';
@ -2018,6 +2020,29 @@ class ControllerModuleImgOpti extends Controller {
@mkdir($compare_dir, 0755, true);
}
$preview_w = 500;
$preview_h = 500;
$preview_im = imagecreatetruecolor($preview_w, $preview_h);
if ($bg_mode === 'white') {
$white = imagecolorallocate($preview_im, 255, 255, 255);
imagefill($preview_im, 0, 0, $white);
} elseif ($bg_mode === 'transparent') {
$c1 = imagecolorallocate($preview_im, 255, 255, 255);
$c2 = imagecolorallocate($preview_im, 226, 232, 240);
imagefill($preview_im, 0, 0, $c1);
$sqSize = 25;
for ($x = 0; $x < $preview_w; $x += $sqSize) {
for ($y = 0; $y < $preview_h; $y += $sqSize) {
if ((($x / $sqSize) + ($y / $sqSize)) % 2 === 0) {
imagefilledrectangle($preview_im, $x, $y, $x + $sqSize - 1, $y + $sqSize - 1, $c2);
}
}
}
} else {
$white = imagecolorallocate($preview_im, 255, 255, 255);
imagefill($preview_im, 0, 0, $white);
$base_img = false;
if (is_file($base_file)) {
$ext = strtolower(pathinfo($base_file, PATHINFO_EXTENSION));
@ -2030,18 +2055,7 @@ class ControllerModuleImgOpti extends Controller {
}
}
if (!$base_img) {
$base_img = imagecreatetruecolor(500, 500);
$bg = imagecolorallocate($base_img, 240, 240, 240);
imagefill($base_img, 0, 0, $bg);
}
$preview_w = 500;
$preview_h = 500;
$preview_im = imagecreatetruecolor($preview_w, $preview_h);
$white = imagecolorallocate($preview_im, 255, 255, 255);
imagefill($preview_im, 0, 0, $white);
if ($base_img) {
$orig_w = imagesx($base_img);
$orig_h = imagesy($base_img);
$scale = min($preview_w / $orig_w, $preview_h / $orig_h);
@ -2052,6 +2066,8 @@ class ControllerModuleImgOpti extends Controller {
imagecopyresampled($preview_im, $base_img, $dst_x, $dst_y, 0, 0, $new_w, $new_h, $orig_w, $orig_h);
imagedestroy($base_img);
}
}
imagepng($preview_im, $temp_preview);
imagedestroy($preview_im);

View File

@ -1,4 +1,4 @@
<?php echo $header; ?><?php echo $column_left; ?>
<?php echo $header; ?><?php echo $column_left; ?>
<div id="content">
<div class="page-header">
<div class="container-fluid">
@ -3404,6 +3404,14 @@ $(document).ready(function() {
<div class="form-group" style="margin-top:10px;">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<div style="margin-bottom: 10px;">
<label style="font-weight:bold; margin-right:8px; display:inline-block; vertical-align:middle;">Фон прев'ю / Фон превью / Preview BG:</label>
<div class="btn-group" data-toggle="buttons" id="wm-preview-bg-switcher">
<label class="btn btn-default active" style="padding: 4px 10px; font-size: 12px;"><input type="radio" name="wm_preview_bg" value="product" checked="checked"> 🖼️ Товар / Item</label>
<label class="btn btn-default" style="padding: 4px 10px; font-size: 12px;"><input type="radio" name="wm_preview_bg" value="white"> ⚪ Білий / Белый</label>
<label class="btn btn-default" style="padding: 4px 10px; font-size: 12px;"><input type="radio" name="wm_preview_bg" value="transparent"> 🏁 Сітка / Сетка</label>
</div>
</div>
<button type="button" id="btn-modal-wm-preview" class="btn btn-info"><i class="fa fa-eye"></i> <?php echo $button_preview_watermark; ?></button>
<div id="modal-wm-preview-container" style="display:none; margin-top:15px; text-align:center; border:2px dashed #2c3e50; padding:15px; border-radius:4px; background:#f8f9fa;">
<div style="font-weight:bold; color:#2c3e50; margin-bottom:8px;"><i class="fa fa-image"></i> <?php echo $text_wm_preview_title; ?></div>