114 lines
4.3 KiB
PHP
114 lines
4.3 KiB
PHP
|
<!--[if lt IE 9]>
|
||
|
|
<div style="margin-bottom: 1em;"> Setting an avatar with Internet Explorer will not work.</div>
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
<div id="set-avatar" class="page">
|
||
|
|
<div class="avatar-crop">
|
||
|
|
<?= $this->imageTag($this->post->sample_url(), ['id' => 'image', 'width' => $this->post->get_sample_width(), 'height' => $this->post->get_sample_height()]) ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?= $this->formTag([], ['level' => 'member'], function(){ ?>
|
||
|
|
<?= $this->hiddenFieldTag("post_id", $this->params()->id) ?>
|
||
|
|
<?php if ($this->params()->user_id) : ?>
|
||
|
|
<?=$this->hiddenFieldTag("user_id", $this->params()->user_id) ?>
|
||
|
|
<?php endif ?>
|
||
|
|
<?=$this->hiddenFieldTag("left", 0) ?>
|
||
|
|
<?=$this->hiddenFieldTag("right", 0) ?>
|
||
|
|
<?=$this->hiddenFieldTag("top", 0) ?>
|
||
|
|
<?=$this->hiddenFieldTag("bottom", 0) ?>
|
||
|
|
|
||
|
|
<div width="200px">
|
||
|
|
<div id="crop-preview-box">
|
||
|
|
<div class="crop-preview-frame" style="width: <?= CONFIG()->avatar_max_width + 10 ?>px; height: <?= CONFIG()->avatar_max_height + 10 ?>px;">
|
||
|
|
<div class="crop-preview-frame-inner">
|
||
|
|
<div id="crop-preview"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="avatar-submit">
|
||
|
|
<?= $this->submitTag($this->t('user_set_avatar')) ?>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<?php }) ?>
|
||
|
|
|
||
|
|
<script type="text/javascript" charset="utf-8">
|
||
|
|
function PositionPreview()
|
||
|
|
{
|
||
|
|
var box = $("crop-preview-box");
|
||
|
|
var image = $("image");
|
||
|
|
var image_right_outside = image.viewportOffset().left + image.getWidth();
|
||
|
|
var image_right_inside = image_right_outside - box.getWidth();
|
||
|
|
var viewport_align = document.viewport.getWidth();
|
||
|
|
image_right_outside += 5;
|
||
|
|
image_right_inside -= 5;
|
||
|
|
|
||
|
|
/* If the image is narrow enough for us to fit the preview to the right
|
||
|
|
* without falling off the screen, put it there. */
|
||
|
|
box.style.left = image_right_outside + "px";
|
||
|
|
box.style.right = "";
|
||
|
|
if(box.viewportOffset().left + box.getWidth() < document.viewport.getWidth() - 20)
|
||
|
|
return;
|
||
|
|
|
||
|
|
/* It doesn't fit there. Either attach the preview to the right edge of the
|
||
|
|
* viewport, or to the right edge of the image (if that's always on-screen). */
|
||
|
|
box.style.left = "";
|
||
|
|
box.style.right = "5px";
|
||
|
|
if(box.viewportOffset().left > image_right_inside)
|
||
|
|
{
|
||
|
|
box.style.left = image_right_inside + "px";
|
||
|
|
box.style.right = "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
PositionPreview();
|
||
|
|
Event.observe(window, "resize", function(e) { PositionPreview(); }, false);
|
||
|
|
|
||
|
|
function onEndCrop(coords, dimensions) {
|
||
|
|
$("left").value = (coords.x1 / $("image").width).toFixed(4);
|
||
|
|
$("right").value = (coords.x2 / $("image").width).toFixed(4);
|
||
|
|
$("top").value = (coords.y1 / $("image").height).toFixed(4);
|
||
|
|
$("bottom").value = (coords.y2 / $("image").height).toFixed(4);
|
||
|
|
}
|
||
|
|
|
||
|
|
// example with a preview of crop results, must have minimumm dimensions
|
||
|
|
var width = $("image").width;
|
||
|
|
var height = $("image").height;
|
||
|
|
var options =
|
||
|
|
{
|
||
|
|
displayOnInit: true,
|
||
|
|
onEndCrop: onEndCrop,
|
||
|
|
previewWrap: 'crop-preview',
|
||
|
|
minWidth: 1,
|
||
|
|
minHeight: 1,
|
||
|
|
|
||
|
|
resizePreview: function(dim)
|
||
|
|
{
|
||
|
|
var max_width = <?= CONFIG()->avatar_max_width ?>;
|
||
|
|
var max_height = <?= CONFIG()->avatar_max_height ?>;
|
||
|
|
var width = dim.x;
|
||
|
|
var height = dim.y;
|
||
|
|
|
||
|
|
if(width < max_width) { var scale = max_width / width; width *= scale; height *= scale; }
|
||
|
|
if(height < max_height) { var scale = max_height / height; width *= scale; height *= scale; }
|
||
|
|
if(width > max_width) { var scale = max_width / width; width *= scale; height *= scale; }
|
||
|
|
if(height > max_height) { var scale = max_height / height; width *= scale; height *= scale; }
|
||
|
|
|
||
|
|
return { x: Math.round(width), y: Math.round(height) }
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
<?php if ($this->user->has_avatar() && $this->post->id == $this->user->avatar_post->id) : ?>
|
||
|
|
options.onloadCoords = { x1: <?= $this->user->avatar_left ?> * width, y1: <?= $this->user->avatar_top ?> * height,
|
||
|
|
x2: <?= $this->user->avatar_right ?> * width, y2: <?= $this->user->avatar_bottom ?> * height }
|
||
|
|
<?php else: ?>
|
||
|
|
/* Default to a square selection. */
|
||
|
|
if(width < height)
|
||
|
|
options.onloadCoords = { x1: width/4, y1: width/4, x2: width*2/4, y2: width*2/4 }
|
||
|
|
else
|
||
|
|
options.onloadCoords = { x1: height/4, y1: height/4, x2: height*2/4, y2: height*2/4 }
|
||
|
|
<?php endif ?>
|
||
|
|
|
||
|
|
new Cropper.ImgWithPreview("image", options)
|
||
|
|
</script>
|
||
|
|
</div>
|