WordPress.org
Get WordPress

Plugin Directory

Changeset 3371152


Ignore:
Timestamp:
10/01/2025 02:11:34 PM (6 months ago)
Author:
wpcompany
Message:

Release 2.0.3

Location:
media-focus-point
Files:
7 added
4 edited

Legend:

Unmodified
Added
Removed

  • media-focus-point/trunk/admin.css

    r3359922 r3371152  
    99    width: 100%;
    1010    height: 100%;
    11     z-index: 9999;
     11    z-index: 9999999999;
    1212    align-items: center;
    1313    justify-content: center;
    … …  
    3838.wpcmfp-overlay .wpcmfp-controls span{
    3939    margin: 0 5px;
     40}
     41.wpcmfp-overlay:not(.contains-video) span.wpcmfp-toggle-video-controls {
     42    display: none;
    4043}
    4144.wpcmfp-overlay .wpcmfp-close{
    … …  
    7578    position: relative;
    7679}
     80
    7781.wpcmfp-overlay img{
    7882    cursor: crosshair;

  • media-focus-point/trunk/media-focus-point.php

    r3359929 r3371152  
    11<?php
    22/**
    3 * Plugin Name: Media Focus Point
    4 * Description: Ensures that your selected focus area of an image or video remains centered and visible, even when resized.
    5 * Version: 2.0.2
    6 * Author: WP Company
    7 * Author URI: https://www.wpcompany.nl
    8 * Text Domain: media-focus-point
    9 * Domain Path: /languages
    10 * Tested up to: 6.8.2
    11 * License: GPLv3 or later
    12 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
    13 */
     3 * Plugin Name: Media Focus Point
     4 * Description: Ensures that your selected focus area of an image or video remains centered and visible, even when resized.
     5 * Version: 2.0.3
     6 * Author: WP Company
     7 * Author URI: https://www.wpcompany.nl
     8 * Text Domain: media-focus-point
     9 * Domain Path: /languages
     10 * Tested up to: 6.8.3
     11 * License: GPLv3 or later
     12 * License URI: http://www.gnu.org/licenses/gpl-3.0.html
     13 */
    1414
    1515if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
    … …  
    5454
    5555    $html = '
    56         <input type="hidden" value="' . esc_attr( $field_value ) . '" id="wpcmfp_bg_pos_desktop_id" name="attachments[' . $post->ID . '][bg_pos_desktop]">
    57         <div class="wpcmfp-overlay wpcmfp-image_focus_point">
    58             <div class="wpcmfp-img-container">
    59                 <div class="wpcmfp-header">
    60                     <div class="wpcmfp-wrapp">
    61                         <h3>' . __( 'Click on the media to set the focus point', 'media-focus-point' ) . '</h3>
    62                         <div class="wpcmfp-controls">
    63                         ' . ( $is_video ? '
    64                         <span class="wpcmfp-button button-secondary wpcmfp-button" onclick="toggle_controls()">
    65                         ' . __( 'Toggle Controls', 'media-focus-point' ) . '
    66                         </span>' : '' ) . '
    67                         <span class="button button-secondary" onclick="cancel_focus()">
    68                         ' . __( 'Cancel', 'media-focus-point' ) . '
    69                         </span>
    70                         <span class="button button-primary" onclick="close_overlay()">
    71                         ' . __( 'Save', 'media-focus-point' ) . '
    72                         </span>
    73                         </div>
    74                     </div>
    75                 </div>
    76                 <div class="wpcmfp-container">
    77                     <div class="wpcmfp-pin"></div>
    78                     ' . $media_tag . '
    79                 </div>
    80             </div>
    81         </div>
     56        <input
     57            type="hidden"
     58            value="' . esc_attr( $field_value ) . '"
     59            id="wpcmfp_bg_pos_desktop_id"
     60            name="attachments[' . $post->ID . '][bg_pos_desktop]"
     61            data-media-tag="' . esc_attr( base64_encode($media_tag) ) . '"
     62            data-is-video="' . ($is_video ? '1' : '0') . '"
     63        >
    8264        <div class="wpcmfp-focusp_label_holder">
    8365            <div id="wpcmfp_desktop_value">
    … …  
    9880                    id="wpcmfp_label_desktop"
    9981                    onclick="set_focus(0)"
    100                     value="' . $label . '">
    101                     <input
     82                    value="' . $label . '"
     83                >
     84                <input
    10285                    type="button"
    10386                    class="button button-secondary button-small"
    10487                    id="wpcmfp_reset_desktop"
    10588                    onclick="reset_focus()"
    106                 value="' . __( 'Reset', 'media-focus-point' ) . '" ' . $disabled . '>
     89                    value="' . __( 'Reset', 'media-focus-point' ) . '" ' . $disabled . '
     90                >
    10791            </div>
    10892    ';
    … …  
    208192}, 10, 2);
    209193
    210 
    211 
    212 
    213 
    214194// Enqueue admin styles/scripts
    215195function wpcmfp_media_focus_point_admin_scripts() {
    … …  
    281261    }
    282262}
     263
     264add_action( 'admin_footer', function() {
     265    ?>
     266    <div class="wpcmfp-overlay wpcmfp-image_focus_point">
     267        <div class="wpcmfp-img-container">
     268            <div class="wpcmfp-header">
     269                <div class="wpcmfp-wrapp">
     270                    <h3><?= __( 'Click on the media to set the focus point', 'media-focus-point' ) ?></h3>
     271                    <div class="wpcmfp-controls">
     272                        <span class="wpcmfp-button button-secondary wpcmfp-button wpcmfp-toggle-video-controls" onclick="toggle_controls()">
     273                            <?= __( 'Toggle Controls', 'media-focus-point' ) ?>
     274                        </span>
     275                        <span class="button button-secondary" onclick="cancel_focus()">
     276                            <?= __( 'Cancel', 'media-focus-point' ) ?>
     277                        </span>
     278                        <span class="button button-primary" onclick="close_overlay()">
     279                            <?= __( 'Save', 'media-focus-point' ) ?>
     280                        </span>
     281                    </div>
     282                </div>
     283            </div>
     284            <div class="wpcmfp-container">
     285                <div class="wpcmfp-pin"></div>
     286            </div>
     287        </div>
     288    </div>
     289    <?php
     290} );

  • media-focus-point/trunk/readme.txt

    r3359922 r3371152  
    33Tags: focus, focal, image, background, video
    44Requires at least: 6.0
    5 Tested up to: 6.8.2
     5Tested up to: 6.8.3
    66Requires PHP: 7.4
    7 Stable tag: 2.0.2
     7Stable tag: 2.0.3
    88License: GPLv3 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    110110== Changelog ==
    111111
     112= 2.0.3 =
     113* Fixed an issue with overlapping elements when opening the focus point overlay within a media library opened in a block editor.
     114
    112115= 2.0.2 =
    113116* Fixed aspect ratio of wide images while selecting a focus point

  • media-focus-point/trunk/script.js

    r3359922 r3371152  
    143143
    144144async function set_focus(e) {
     145    const hiddenInput = document.getElementById('wpcmfp_bg_pos_desktop_id');
     146    const mediaContainer = document.querySelector('.wpcmfp-container');
     147    const overlay = document.querySelector('.wpcmfp-overlay');
     148    const mediaPreviewContainer = document.createElement('div');
     149    // If the overlay doesn't contain the contains-video class, it will hide the controls toggle button
     150    if (hiddenInput.dataset.isVideo === '1') {
     151        overlay.classList.add('contains-video');
     152    } else {
     153        overlay.classList.remove('contains-video');
     154    }
     155    mediaPreviewContainer.classList.add('wpcmfp-media-preview-container');
     156    // Fetch data-attribute data-media-tag, which should contain a base64 encoded string of the media tag
     157    mediaPreviewContainer.innerHTML = atob(hiddenInput.dataset.mediaTag);
     158    // Save pin to add back again later
     159    const pin = mediaContainer.querySelector('.wpcmfp-pin');
     160    // Clear overlay contents
     161    mediaContainer.innerHTML = '';
     162    // Re-add the pin
     163    if (pin) mediaContainer.append(pin);
     164    // Add image to overlay
     165    mediaContainer.append(mediaPreviewContainer);
     166
    145167    replaceCustomVideoElements()
    146168    document.querySelectorAll(".wpcmfp-media-frame-content,.wpcmfp-media-sidebar").forEach(el => el.classList.add('show'));
Note: See TracChangeset for help on using the changeset viewer.