138 lines
5.9 KiB
JavaScript
138 lines
5.9 KiB
JavaScript
jQuery(document).ready(function ($) {
|
|
if (wp.hooks && wp.hooks.addFilter)
|
|
wp.hooks.addFilter(
|
|
'editor.PostFeaturedImage',
|
|
'brizy/featuredImage',
|
|
function (originalElement) {
|
|
return function (origianalProps) {
|
|
|
|
var isDragging = false;
|
|
var el = wp.element.createElement;
|
|
var x = Brizy_Admin_Data.page.focalPoint.x;
|
|
var y = Brizy_Admin_Data.page.focalPoint.y;
|
|
|
|
if (!origianalProps.media) {
|
|
return el(originalElement, origianalProps);
|
|
}
|
|
|
|
var clickAndMouseMoveHandler = function ( e ) {
|
|
|
|
if ( ! isDragging && e.type !== 'click' ) {
|
|
return;
|
|
}
|
|
|
|
var $this = $(e.target);
|
|
var imageW = $this.width();
|
|
var imageH = $this.height();
|
|
var $focalPointX = $('#_thumbnail_focal_point_x');
|
|
var $focalPointY = $('#_thumbnail_focal_point_y');
|
|
var $focalPointDiv = $('#_thumbnail_focal_point_div');
|
|
|
|
$focalPointDiv.on('mouseup', function () {
|
|
isDragging = false;
|
|
});
|
|
|
|
if ( window.getSelection ) {
|
|
window.getSelection().removeAllRanges();
|
|
} else if ( document.selection ) {
|
|
document.selection.empty();
|
|
}
|
|
|
|
// 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));
|
|
|
|
wp.data.dispatch('core/editor').editPost({
|
|
'brizy_attachment_focal_point': {
|
|
x: percentageX.toFixed(0),
|
|
y: percentageY.toFixed(0)
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
return el('div', {class: 'brizy-featured-image hide-if-no-js'}, [
|
|
el('input', {
|
|
id: '_thumbnail_focal_point_x',
|
|
name: '_thumbnail_focal_point_x',
|
|
type: 'hidden',
|
|
value: Brizy_Admin_Data.page.focalPoint.x
|
|
}),
|
|
el('input', {
|
|
id: '_thumbnail_focal_point_y',
|
|
name: '_thumbnail_focal_point_y',
|
|
type: 'hidden',
|
|
value: Brizy_Admin_Data.page.focalPoint.y
|
|
}),
|
|
el('div',
|
|
{
|
|
class: 'wrapper',
|
|
onMouseLeave: function () {
|
|
isDragging = false;
|
|
}
|
|
}, [
|
|
el('img', {
|
|
id: 'featured-image-el',
|
|
src: origianalProps.media.source_url,
|
|
width: "100%",
|
|
onClick: clickAndMouseMoveHandler,
|
|
onMouseMove: clickAndMouseMoveHandler,
|
|
onMouseDown: function () {
|
|
isDragging = true;
|
|
},
|
|
onMouseUp: function () {
|
|
isDragging = false;
|
|
}
|
|
}),
|
|
|
|
el('div', {
|
|
class: 'focal-point',
|
|
id: '_thumbnail_focal_point_div',
|
|
style: {left: x + "%", top: y + "%"},
|
|
onMouseDown: function () {
|
|
isDragging = true;
|
|
}
|
|
}),
|
|
el('div', {class: 'deleteImage'}, [
|
|
el('a', {
|
|
id: 'remove-post-thumbnail', href: "#", onClick: function (e) {
|
|
origianalProps.onRemoveImage(e);
|
|
|
|
Brizy_Admin_Data.page.focalPoint.x = 50;
|
|
Brizy_Admin_Data.page.focalPoint.y = 50;
|
|
|
|
wp.data.dispatch('core/editor').editPost({
|
|
'brizy_attachment_focal_point': {
|
|
x: 50,
|
|
y: 50
|
|
}
|
|
});
|
|
}
|
|
},
|
|
[
|
|
el('svg', {class: 'brz-icon-svg'}, [
|
|
el('use', {'xlinkHref': Brizy_Admin_Data.pluginUrl + '/editor/icons/icons.svg#nc-circle-remove'}),
|
|
]),
|
|
]),
|
|
]),
|
|
]),
|
|
]);
|
|
}
|
|
}
|
|
);
|
|
});
|
|
|
|
|