From 46e85f269d6042f4d964b2e2c286acc92e90a3c7 Mon Sep 17 00:00:00 2001 From: DerPixler Date: Fri, 28 Oct 2016 15:33:45 +0200 Subject: [PATCH 1/2] Refactor focuslock-public, implement getter methode Now you can use the Methode `get_focuslock_image( $args )` Example: ``` args = [ 'id' => $attachment[0], 'size' => 'large', 'classes' => 'gal' ]; $attachment = get_focuslock_image( $args ); ``` --- public/class-wp-focuslock-public.php | 136 ++++++++++++++++++++------- 1 file changed, 102 insertions(+), 34 deletions(-) diff --git a/public/class-wp-focuslock-public.php b/public/class-wp-focuslock-public.php index 7b15bd7..c6cc7e8 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,116 @@ 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( ! empty( $size ) ){ + + $s->width = $meta[ 'sizes' ][ $size ][ 'width' ]; + $s->height = $meta[ 'sizes' ][ $size ][ 'height' ]; + + } else { + + $s->width = $meta[ 'width' ]; + $s->height = $meta[ 'height' ]; + + } + + return $s; + + } + +} + - echo $html; +function get_focuslock_image( $args ){ -} \ No newline at end of file + 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 = 'focuspoint ' . $args[ 'classes' ]; + + return $image; +} + + +function focuslock_image( $attachment_id, $image_size = false, $additional_classes = '', $width = false, $height = false ){ + + $args = [ + 'id' => $attachment_id, + 'size' => $image_size, + 'classes' => $additional_classes, + 'width' => $width, + 'height' => $height, + ]; + + $image_args = get_focuslock_image( $args ); + + $style = []; + + if( ! empty( $width ) ){ + $style[] = 'width: ' . $image_args->size->width . '; '; + }else{ + $style[] = 'width: ' . $width . '; '; + } + + if( ! empty( $height ) ){ + $style[] = 'height: ' . $image_args->size->height . '; '; + }else{ + $style[] = 'height: ' . $height . '; '; + } + + $attr = 'class="' . $image_args->classes . '" '; + $attr .= 'data-focus-x=" ' . $image_args->coords->data_focus_x . '" '; + $attr .= 'data-focus-y=" ' . $image_args->coords->data_focus_y . '" '; + $attr .= 'data-focus-w=" ' . $image_args->size->width . '" '; + $attr .= 'data-focus-h=" ' . $image_args->size->height . '" '; + + $html = '
'; + $html .= $image_args->image; + $html .= '
'; + + echo $html; + +} From cd8457aecff7938205f943db366b326b9b3a4e3d Mon Sep 17 00:00:00 2001 From: Rene Reimann Date: Mon, 31 Oct 2016 11:54:24 +0100 Subject: [PATCH 2/2] add background css support --- admin/class-wp-focuslock-admin.php | 10 ++-- admin/js/main.js | 25 ++++++--- public/class-wp-focuslock-public.php | 79 +++++++++++++++------------- 3 files changed, 66 insertions(+), 48 deletions(-) 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 c6cc7e8..0079349 100644 --- a/public/class-wp-focuslock-public.php +++ b/public/class-wp-focuslock-public.php @@ -77,15 +77,15 @@ public function get_size( $size, $meta, $width, $height ){ $s = new stdClass(); - if( ! empty( $size ) ){ + if( $size == 'full' ){ - $s->width = $meta[ 'sizes' ][ $size ][ 'width' ]; - $s->height = $meta[ 'sizes' ][ $size ][ 'height' ]; + $s->width = $meta[ 'width' ]; + $s->height = $meta[ 'height' ]; } else { - $s->width = $meta[ 'width' ]; - $s->height = $meta[ 'height' ]; + $s->width = $meta[ 'sizes' ][ $size ][ 'width' ]; + $s->height = $meta[ 'sizes' ][ $size ][ 'height' ]; } @@ -93,6 +93,19 @@ public function get_size( $size, $meta, $width, $height ){ } + + 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; + + } + } @@ -116,48 +129,40 @@ function get_focuslock_image( $args ){ $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 = 'focuspoint ' . $args[ 'classes' ]; + $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 = false, $additional_classes = '', $width = false, $height = false ){ +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, - ]; + $args = [ + 'id' => $attachment_id, + 'size' => $image_size, + 'classes' => $additional_classes, + 'width' => $width, + 'height' => $height, + ]; - $image_args = get_focuslock_image( $args ); + $image_args = get_focuslock_image( $args ); + $image_args->id = $args['id']; - $style = []; + if( $echo == true ){ - if( ! empty( $width ) ){ - $style[] = 'width: ' . $image_args->size->width . '; '; - }else{ - $style[] = 'width: ' . $width . '; '; - } + $html = '
attr . '" >'; + $html .= $image_args->image; + $html .= '
'; - if( ! empty( $height ) ){ - $style[] = 'height: ' . $image_args->size->height . '; '; - }else{ - $style[] = 'height: ' . $height . '; '; - } + echo $html; + return true; + } + + do_action( 'focuslock_image', $image_args ); - $attr = 'class="' . $image_args->classes . '" '; - $attr .= 'data-focus-x=" ' . $image_args->coords->data_focus_x . '" '; - $attr .= 'data-focus-y=" ' . $image_args->coords->data_focus_y . '" '; - $attr .= 'data-focus-w=" ' . $image_args->size->width . '" '; - $attr .= 'data-focus-h=" ' . $image_args->size->height . '" '; - - $html = '
'; - $html .= $image_args->image; - $html .= '
'; - - echo $html; + return $image_args; }