77 lines
2.5 KiB
Twig
77 lines
2.5 KiB
Twig
<div class="brizy-featured-image hide-if-no-js">
|
|
<div class="wrapper">
|
|
<img id="featured-image-el" src="{{ thumbnailSrc[0] }}" alt="" width="100%">
|
|
<div class="focal-point" style="left: {{ focalPoint['x'] }}%; top: {{ focalPoint['y'] }}%;"></div>
|
|
<div class="deleteImage">
|
|
<a href="#" id="remove-post-thumbnail">
|
|
<svg class="brz-icon-svg">
|
|
<use xlink:href="{{ pluginUrl }}/editor/icons/icons.svg#nc-circle-remove"></use>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="_thumbnail_id" name="_thumbnail_id" value="{{ thumbnailId }}">
|
|
<input type="hidden" id="_thumbnail_focal_point_x" name="_thumbnail_focal_point_x" value="{{ focalPoint['x'] }}"/>
|
|
<input type="hidden" id="_thumbnail_focal_point_y" name="_thumbnail_focal_point_y" value="{{ focalPoint['y'] }}"/>
|
|
</div>
|
|
|
|
<script>
|
|
jQuery(document).ready(function ($) {
|
|
(function () {
|
|
var $focalPointDiv = $('.focal-point');
|
|
var $focalPointX = $('#_thumbnail_focal_point_x');
|
|
var $focalPointY = $('#_thumbnail_focal_point_y');
|
|
var $featuredImageEl = $('#featured-image-el');
|
|
var isDragging = false;
|
|
|
|
$('.brizy-featured-image .wrapper').on('mouseleave', function () {
|
|
isDragging = false;
|
|
});
|
|
|
|
$featuredImageEl.on('mousedown', function () {
|
|
isDragging = true;
|
|
});
|
|
|
|
$featuredImageEl.on('mouseup', function () {
|
|
isDragging = false;
|
|
});
|
|
|
|
$focalPointDiv.on('mouseup', function () {
|
|
isDragging = false;
|
|
});
|
|
|
|
$focalPointDiv.on('mousedown', function () {
|
|
isDragging = true;
|
|
});
|
|
|
|
$featuredImageEl.on( 'click mousemove', function ( e ) {
|
|
if ( ! isDragging && e.type!=='click' ) {
|
|
return;
|
|
}
|
|
|
|
if ( window.getSelection ) {
|
|
window.getSelection().removeAllRanges();
|
|
} else if ( document.selection ) {
|
|
document.selection.empty();
|
|
}
|
|
|
|
var $this = $(this);
|
|
var imageW = $this.width();
|
|
var imageH = $this.height();
|
|
|
|
//Calculate FocusPoint coordinates
|
|
var offsetX = e.pageX - $this.offset().left;
|
|
var offsetY = e.pageY - $this.offset().top;
|
|
|
|
//Calculate CSS Percentages
|
|
var percentageX = (offsetX / imageW) * 100;
|
|
var percentageY = (offsetY / imageH) * 100;
|
|
|
|
// Set positioning
|
|
$focalPointDiv.css({left: percentageX.toFixed(0) + '% ', top: percentageY.toFixed(0) + '%'});
|
|
$focalPointX.val(percentageX.toFixed(0));
|
|
$focalPointY.val(percentageY.toFixed(0));
|
|
});
|
|
})();
|
|
});
|
|
</script> |