36 lines
1.6 KiB
PHP
36 lines
1.6 KiB
PHP
|
<?php
|
||
|
|
/**
|
||
|
|
* 裁剪弹窗（Cropper.js 的容器）。两个页面共用：
|
||
|
|
* · templates/nodes/attachments.php（照片页）
|
||
|
|
* · templates/nodes/form.php（节点表单）
|
||
|
|
* 抽成一份是为了避免两处漂移——id 改了哪边忘了另一边，弹窗就静默打不开。
|
||
|
|
*
|
||
|
|
* JS 约定（两个页面的脚本都按这套 id 找）：
|
||
|
|
* #crop-modal 弹窗容器（.open 时显示）
|
||
|
|
* #crop-title 标题
|
||
|
|
* #crop-hint 提示行
|
||
|
|
* #crop-image 每次打开都要**新建**一个 img 换进去（Cropper 不能复用旧实例，会状态残留）
|
||
|
|
* #crop-cancel / #crop-reset / #crop-apply 三个按钮
|
||
|
|
*
|
||
|
|
* 可覆盖变量：
|
||
|
|
* $cropHint 提示文案（默认为通用文案）
|
||
|
|
*/
|
||
|
|
$cropHint = $cropHint ?? '拖动选框选好范围后点「确定」。不想裁就直接点「确定」——会按原图上传，不会重新压缩。';
|
||
|
|
?>
|
||
|
|
<div class="modal" id="crop-modal" aria-hidden="true">
|
||
|
|
<div class="modal-backdrop" data-close="1"></div>
|
||
|
|
<div class="modal-content modal-content-wide">
|
||
|
|
<h3 class="modal-title" id="crop-title">裁剪照片</h3>
|
||
|
|
<p class="modal-hint" id="crop-hint"><?= e($cropHint) ?></p>
|
||
|
|
<div class="crop-container crop-container-wide">
|
||
|
|
<img id="crop-image" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="modal-actions">
|
||
|
|
<button type="button" class="btn" id="crop-cancel">取消</button>
|
||
|
|
<button type="button" class="btn" id="crop-reset">重置</button>
|
||
|
|
<button type="button" class="btn-primary" id="crop-apply">确定</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php unset($cropHint); ?>
|