diff --git a/admin/class-wp-focuslock-admin.php b/admin/class-wp-focuslock-admin.php
index becec38..a5336da 100644
--- a/admin/class-wp-focuslock-admin.php
+++ b/admin/class-wp-focuslock-admin.php
@@ -37,11 +37,11 @@ public function __construct ( $file = '', $version = '1.0.0' ) {
add_filter( 'attachment_fields_to_edit', array( $this, 'media_field_setup' ), 10, 2 );
add_action( 'edit_attachment', array( $this, 'save_attachment') );
-
+
// Load admin JS & CSS
add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_styles' ), 10, 1 );
add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ), 10, 1 );
-
+
add_shortcode( 'focuslock', array( $this, 'focuslock_shortcode') );
add_action( 'wp_ajax_get_focus_points', array( $this, 'get_focus_points' ) );
@@ -110,8 +110,10 @@ public function save_focus_points() {
if ( $attachment_id ) {
$focuslock_coords = $_POST['focuslock_coords'];
$focuslock_mouse_coords = $_POST['focuslock_mouse_coords'];
+ $focuslock_css_percent_coords = $_POST['focuslock_css_percent_coords'];
update_post_meta( $attachment_id, 'focuslock_coords', $focuslock_coords );
update_post_meta( $attachment_id, 'focuslock_mouse_coords', $focuslock_mouse_coords );
+ update_post_meta( $attachment_id, 'focuslock_css_percent_coords', $focuslock_css_percent_coords );
}
}
@@ -119,8 +121,10 @@ public function save_attachment( $attachment_id ) {
if ( isset( $_REQUEST['attachments'][$attachment_id]['focuslock_coords'] ) ) {
$focuslock_coords = $_REQUEST['attachments'][$attachment_id]['focuslock_coords'];
$focuslock_mouse_coords = $_REQUEST['attachments'][$attachment_id]['focuslock_mouse_coords'];
+ $focuslock_css_percent_coords = $_REQUEST['attachments'][$attachment_id]['focuslock_css_percent_coords'];
update_post_meta( $attachment_id, 'focuslock_coords', $focuslock_coords );
update_post_meta( $attachment_id, 'focuslock_mouse_coords', $focuslock_mouse_coords );
+ update_post_meta( $attachment_id, 'focuslock_css_percent_coords', $focuslock_css_percent_coords );
}
}
@@ -147,7 +151,7 @@ public function admin_enqueue_scripts() {
}
public function focuslock_shortcode( $atts , $content = null ) {
-
+
if (isset($atts['size'])) {
$size = $atts['size'];
} else {
diff --git a/admin/js/main.js b/admin/js/main.js
index 529d8ee..34d80d3 100644
--- a/admin/js/main.js
+++ b/admin/js/main.js
@@ -8,7 +8,7 @@ if ( ! window.console )
"use strict"
function focuslock() {
-
+
var t = this;
$.extend( t, {
@@ -35,7 +35,7 @@ if ( ! window.console )
if (t.image_wrapper.hasClass('locked')) {
return;
}
-
+
var imageW = $(this).width();
var imageH = $(this).height();
@@ -48,6 +48,13 @@ if ( ! window.console )
var centeredMouseX = mouseX - (t.dotSize / 2);
var centeredMouseY = mouseY - (t.dotSize / 2);
+
+ //Calculate CSS Percentages
+ var percentageX = (mouseX/imageW)*100;
+ var percentageY = (mouseY/imageH)*100;
+ var backgroundPositionCSS = percentageX.toFixed(0) + '%|' + percentageY.toFixed(0) + '%';
+
+
if (t.image_wrapper.find(".focuslock-dot").length == 0) {
t.createDot(centeredMouseY, centeredMouseX);
} else {
@@ -56,6 +63,7 @@ if ( ! window.console )
t.focuslock_coords = focusX + '|' + focusY;
t.focuslock_mouse_coords = centeredMouseX + '|' + centeredMouseY;
+ t.focuslock_css_percent_coords = backgroundPositionCSS;
});
@@ -87,8 +95,8 @@ if ( ! window.console )
$('.save-focuslock, .cancel-focuslock').show();
} else {
t.image_wrapper.addClass('locked');
- $('.edit-focuslock').show();
- $('.save-focuslock, .cancel-focuslock').hide();
+ $('.edit-focuslock').show();
+ $('.save-focuslock, .cancel-focuslock').hide();
}
},
@@ -99,13 +107,13 @@ if ( ! window.console )
.css('top', top + 'px')
.css('left', left + 'px')
.css('width', t.dotSize + 'px')
- .css('height', t.dotSize + 'px'));
+ .css('height', t.dotSize + 'px'));
},
moveDot: function(top, left) {
t.image_wrapper.find(".focuslock-dot")
.css('top', top + 'px')
- .css('left', left + 'px');
+ .css('left', left + 'px');
},
save: function() {
@@ -113,14 +121,15 @@ if ( ! window.console )
action: 'save_focus_points',
attachment_id: t.attachment_id,
focuslock_coords: t.focuslock_coords,
- focuslock_mouse_coords: t.focuslock_mouse_coords
+ focuslock_mouse_coords: t.focuslock_mouse_coords,
+ focuslock_css_percent_coords: t.focuslock_css_percent_coords
}, function( rsp ) {
$('.saved-message').fadeIn('fast');
setTimeout(function() {
$('.saved-message').fadeOut('fast');
}, 2000);
- });
+ });
}
});
diff --git a/public/class-wp-focuslock-public.php b/public/class-wp-focuslock-public.php
index 7b15bd7..0079349 100644
--- a/public/class-wp-focuslock-public.php
+++ b/public/class-wp-focuslock-public.php
@@ -27,7 +27,7 @@ public function __construct ( $file = '', $version = '1.0.0' ) {
$this->version = $version;
$this->file = $file;
-
+
add_action( 'wp_enqueue_scripts', array( $this, 'public_enqueue_styles' ), 10, 1 );
add_action( 'wp_enqueue_scripts', array( $this, 'public_enqueue_scripts' ), 10, 1 );
}
@@ -48,48 +48,121 @@ public function public_enqueue_scripts() {
wp_enqueue_script( 'jquery_focuspoint', plugin_dir_url( __FILE__ ) . 'js/jquery.focuspoint.min.js', array('jquery'), $this->version, true );
wp_enqueue_script( 'wp_focuslock', plugin_dir_url( __FILE__ ) . 'js/wp-focuslock.js', array('jquery', 'jquery_focuspoint'), $this->version, true );
}
-}
+ public function focus_coords( $attachment_id = false ){
-function focuslock_image($attachment_id, $image_size = 'full', $additional_classes = '', $width = null, $height = null) {
-
- if (empty($attachment_id)) {
- echo '';
- return;
- }
+ $coords = false;
- $meta = wp_get_attachment_metadata( $attachment_id );
- $style = '';
+ if( $attachment_id ){
- if ($image_size == 'full') {
- $size = [];
- $size['width'] = $meta['width'];
- $size['height'] = $meta['height'];
- } else {
- $size = $meta['sizes'][$image_size];
- }
+ $meta = get_post_meta( $attachment_id, 'focuslock_coords', true);
- if ($width) {
- $style .= 'width: ' . $width . ';';
- }
+ $coords = new stdClass();
+ $coords->data_focus_x = '0';
+ $coords->data_focus_y = '0';
- if ($height) {
- $style .= 'height: ' . $height . ';';
- }
+ if ( $meta ) {
+ $c = explode( '|', $meta );
+ $coords->data_focus_x = $c[0];
+ $coords->data_focus_y = $c[1];
+ }
- $coords = get_post_meta($attachment_id, 'focuslock_coords', true);
+ }
+
+ return $coords;
- if ($coords) {
- $coords = explode('|', $coords);
- } else {
- $coords[0] = '0';
- $coords[1] = '0';
}
- $html = '';
- $html .= wp_get_attachment_image( $attachment_id, $image_size );
- $html .= '
';
+ public function get_size( $size, $meta, $width, $height ){
+
+ $s = new stdClass();
+
+ if( $size == 'full' ){
+
+ $s->width = $meta[ 'width' ];
+ $s->height = $meta[ 'height' ];
+
+ } else {
- echo $html;
+ $s->width = $meta[ 'sizes' ][ $size ][ 'width' ];
+ $s->height = $meta[ 'sizes' ][ $size ][ 'height' ];
+
+ }
+
+ return $s;
+
+ }
+
+
+ public function get_focuslock_image_attributes ( $args, $size, $coords ){
+
+ $attr = 'class="focuspoint ' . $args['classes'] . '" ';
+ $attr .= 'data-focus-x="' . $coords->data_focus_x . '" ';
+ $attr .= 'data-focus-y="' . $coords->data_focus_y . '" ';
+ $attr .= 'data-focus-w="' . $size->width . '" ';
+ $attr .= 'data-focus-h="' . $size->height . '" ';
+
+ return 'id="focuslock_image_' . $args['id'] . '" ' . $attr;
+
+ }
+
+}
-}
\ No newline at end of file
+
+function get_focuslock_image( $args ){
+
+ if( ! isset( $args[ 'id' ] ) ) {
+ return new WP_Error( 'error', 'The attachment id is missing!' );
+ }
+
+ $default = [
+ 'width' => false,
+ 'height' => false
+ ];
+
+ $args = wp_parse_args( $args, $default );
+
+ $wp_focusLock_public = new WP_FocusLock_Public();
+
+ $image = new stdClass();
+ $image->meta = wp_get_attachment_metadata( $args[ 'id' ] );
+ $image->image = wp_get_attachment_image( $args[ 'id' ], $args['size'] );
+ $image->size = $wp_focusLock_public->get_size( $args[ 'size' ], $image->meta, $args[ 'width' ], $args[ 'height' ] );
+ $image->coords = $wp_focusLock_public->focus_coords( $args[ 'id' ] );
+ $image->classes = $args[ 'classes' ];
+ $image->attr = $wp_focusLock_public->get_focuslock_image_attributes( $args, $image->size, $image->coords );
+
+ $image->background_position = get_post_meta( $args[ 'id' ], 'focuslock_css_percent_coords', true );
+
+ return $image;
+}
+
+
+function focuslock_image( $attachment_id, $image_size = 'full', $additional_classes = '', $width = false, $height = false, $echo = false ){
+
+ $args = [
+ 'id' => $attachment_id,
+ 'size' => $image_size,
+ 'classes' => $additional_classes,
+ 'width' => $width,
+ 'height' => $height,
+ ];
+
+ $image_args = get_focuslock_image( $args );
+ $image_args->id = $args['id'];
+
+ if( $echo == true ){
+
+ $html = 'attr . '" >';
+ $html .= $image_args->image;
+ $html .= '
';
+
+ echo $html;
+ return true;
+ }
+
+ do_action( 'focuslock_image', $image_args );
+
+ return $image_args;
+
+}