WordPress.org
Get WordPress

Plugin Directory

Changeset 3359922


Ignore:
Timestamp:
09/11/2025 01:48:30 PM (7 months ago)
Author:
wpcompany
Message:

Release 2.0.2

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

Legend:

Unmodified
Added
Removed

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

    r3308965 r3359922  
    11.wpcmfp-overlay{
    2     display:none;
     2    --wpcmfp-header-height: 50px;
     3    --wpcmfp-container-max-height: 80vh;
     4    --wpcmfp-container-max-width: 80vw;
     5    display: none;
    36    position: fixed;
    4     top: 0;
    5     left: 0px;
    6     width: 100%;
    7     height: 100%;
    8     z-index: 9999;
    9     align-items:center;
    10     justify-content:center;
    11     flex-direction:column
     7    top: 0;
     8    left: 0;
     9    width: 100%;
     10    height: 100%;
     11    z-index: 9999;
     12    align-items: center;
     13    justify-content: center;
     14    flex-direction: column
    1215}
    1316.wpcmfp-overlay.wpcmfp-show{
    14     display:flex;
     17    display: flex;
    1518}
    1619.wpcmfp-overlay:before {
    17     content: '';
    18     display: block;
    19     width: 100%;
    20     height: 100%;
    21     z-index: 0;
    22     position: absolute;
    23     top: 0;
    24     left: 0;
    25     background: #000;
    26     opacity: 0.5;
     20    content: '';
     21    display: block;
     22    width: 100%;
     23    height: 100%;
     24    z-index: 0;
     25    position: absolute;
     26    top: 0;
     27    left: 0;
     28    background: #000;
     29    opacity: 0.5;
    2730}
    2831.wpcmfp-overlay h3{
    29     font-size:15px;
    30     margin:0px;
     32    font-size: 15px;
     33    margin: 0;
    3134}
    3235.wpcmfp-overlay .wpcmfp-controls{
    33     display:flex;
     36    display: flex;
    3437}
    3538.wpcmfp-overlay .wpcmfp-controls span{
    36     margin:0px 5px;
     39    margin: 0 5px;
    3740}
    3841.wpcmfp-overlay .wpcmfp-close{
    39     z-index:99;
    40     border:1px solid;
     42    z-index: 99;
     43    border: 1px solid;
    4144}
    4245.wpcmfp-overlay .wpcmfp-img-container{
    43     height: 610px;
    44     width: 1000px;
    45     background-color: #F7F7F7;
    46     position: absolute;
    47     left: 50%;
    48     top: 50%;
    49     margin-left: -500px;
    50     margin-top: -305px;
     46    max-height: var(--wpcmfp-container-max-height);
     47    max-width: var(--wpcmfp-container-max-width);
     48    background-color: #F7F7F7;
     49    position: absolute;
     50    display: flex;
     51    flex-direction: column;
    5152}
    5253.wpcmfp-overlay .wpcmfp-img-container .wpcmfp-header{
    53     height: 50px;
    54     width: 100%;
    55     background-color: white;
    56     border-bottom: 1px solid #DCDCDD;
     54    height: var(--wpcmfp-header-height);
     55    width: 100%;
     56    background-color: white;
     57    border-bottom: 1px solid #DCDCDD;
    5758}
    5859.wpcmfp-overlay .wpcmfp-img-container .wpcmfp-header .wpcmfp-wrapp{
    59     display: flex;
    60     align-items: center;
    61     justify-content: space-between;
    62     background: #fff;
    63     padding: 10px 15px;
     60    display: flex;
     61    align-items: center;
     62    justify-content: space-between;
     63    background: #fff;
     64    padding: 10px 15px;
    6465    border-bottom: 1px solid #DCDCDD;
    6566}
    6667.wpcmfp-overlay .wpcmfp-img-container .wpcmfp-container{
    6768    background-color: #F7F7F7;
    68     width: 100%;
    69     height: calc(100% - 50px);
    70     display: flex;
    71     align-items: center;
    72     justify-content: center;
    73     overflow: hidden;
    74     position:relative;
     69    width: 100%;
     70    height: calc(100% - var(--wpcmfp-header-height));
     71    display: flex;
     72    align-items: center;
     73    justify-content: center;
     74    overflow: hidden;
     75    position: relative;
    7576}
    7677.wpcmfp-overlay img{
    7778    cursor: crosshair;
    78     max-height: 100%;
    79     height: 100%;
    80     max-width: 100%;
    81     width: auto;
     79    max-height: calc(var(--wpcmfp-container-max-height) - var(--wpcmfp-header-height));
     80    height: auto;
     81    max-width: 100%;
     82    width: auto;
    8283}
    8384
    8485.wpcmfp-overlay video {
    85     cursor: crosshair;
     86    cursor: crosshair;
    8687}
    8788.wpcmfp-overlay .wpcmfp-pin{
    8889    position: absolute;
    89     top: 50%;
    90     left: 50%;
    91     width: 4px;
    92     aspect-ratio: 1 / 1;
    93     pointer-events: none;
     90    top: 50%;
     91    left: 50%;
     92    width: 4px;
     93    aspect-ratio: 1 / 1;
     94    pointer-events: none;
    9495}
    9596.wpcmfp-overlay .wpcmfp-pin::before {
    96     content: "";
    97     position: absolute;
    98     top: 50%;
    99     left: 50%;
    100     width: 150px;
    101     aspect-ratio: 1 / 1;
    102     background-size: cover;
    103     background: transparent;
    104     border-radius: 50%;
    105     outline: 2px solid white;
    106     pointer-events: none;
    107     transform: translate(-50%, -50%);
    108     opacity: .3;
    109     box-shadow: 0 0 0 6000px #000000;
     97    content: "";
     98    position: absolute;
     99    top: 50%;
     100    left: 50%;
     101    width: 150px;
     102    aspect-ratio: 1 / 1;
     103    background-size: cover;
     104    background: transparent;
     105    border-radius: 50%;
     106    outline: 2px solid white;
     107    pointer-events: none;
     108    transform: translate(-50%, -50%);
     109    opacity: .3;
     110    box-shadow: 0 0 0 6000px #000000;
    110111}
    111112.wpcmfp-overlay .wpcmfp-pin::after {
    112     content: "";
    113     position: absolute;
    114     top: 50%;
    115     left: 50%;
    116     width: 13px;
    117     aspect-ratio: 1 / 1;
    118     background-size: cover;
    119     background: #324cd9;
    120     border-radius: 50%;
    121     outline: 3px solid white;
    122     pointer-events: none;
    123     transform: translate(-50%, -50%);
    124     opacity: .6;
     113    content: "";
     114    position: absolute;
     115    top: 50%;
     116    left: 50%;
     117    width: 13px;
     118    aspect-ratio: 1 / 1;
     119    background-size: cover;
     120    background: #324cd9;
     121    border-radius: 50%;
     122    outline: 3px solid white;
     123    pointer-events: none;
     124    transform: translate(-50%, -50%);
     125    opacity: .6;
    125126}
    126127
    127128.wpcmfp-focusp_label_holder{
    128     margin-bottom:15px;
     129    margin-bottom: 15px;
    129130}
    130131#wpcmfp_desktop_value,#wpcmfp_mobile_value{
    131     margin:6px 0px;
     132    margin: 6px 0;
    132133}
    133134#wpcmfp_desktop_value input[type="number"] {
    134     width: calc(3ch + 28px);
    135     padding: 0 4px;
     135    width: calc(3ch + 28px);
     136    padding: 0 4px;
    136137}
    137138.compat-field-background_position_desktop label span{
    138     font-size:12px;
     139    font-size: 12px;
    139140}
    140141.media-frame-content.wpcmfp-show{
    141     z-index:9999999999999999999;
     142    z-index: 9999999999999999999;
    142143}
    143144.wpcmfp-media-sidebar.wpcmfp-show,.wpcmfp-media-frame-content.wpcmfp-show{
    144     overflow: visible;
     145    overflow: visible;
    145146}

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

    r3308965 r3359922  
    33Tags: focus, focal, image, background, video
    44Requires at least: 6.0
    5 Tested up to: 6.8
     5Tested up to: 6.8.2
    66Requires PHP: 7.4
    7 Stable tag: 2.0.1
     7Stable tag: 2.0.2
    88License: GPLv3 or later
    99License URI: https://www.gnu.org/licenses/gpl-2.0.html
    … …  
    110110== Changelog ==
    111111
     112= 2.0.2 =
     113* Fixed aspect ratio of wide images while selecting a focus point
     114* Fixed setting a focus point by mouseclick sometimes resulting in a focus point just outside the image
     115
    112116= 2.0.1 =
    113117* Added custom prefix to all classes to prevent style conflicts

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

    r3308965 r3359922  
    1111let rec_top = 0;
    1212
    13 
    1413// Replaces the custom HTML element with a standard video element
    1514function replaceCustomVideoElements() {
    … …  
    2726}
    2827
    29 
    3028function onNumberInputChange() {
    31     const inputX = document.getElementById('wpcmfp_desktop_value_x');
    32     const inputY = document.getElementById('wpcmfp_desktop_value_y');
    33     const hidden_input = document.getElementById('wpcmfp_bg_pos_desktop_id') ;
    34 
    35     // As values are percentages and it doesn't make sense to place focus outside of the image, we use 100 as a maximum value
    36     if (inputX.value > 100) {
    37         inputX.value = 100;
    38     }
    39     if (inputY.value > 100) {
    40         inputY.value = 100;
    41     }
    42 
    43     // Concatenate number input values to correct CSS syntax
    44     hidden_input.value = `${inputX.value}% ${inputY.value}%`;
     29    const inputX = document.getElementById('wpcmfp_desktop_value_x');
     30    const inputY = document.getElementById('wpcmfp_desktop_value_y');
     31    const hidden_input = document.getElementById('wpcmfp_bg_pos_desktop_id') ;
     32
     33    // As values are percentages, and it doesn't make sense to place focus outside of the image, we use 100 as a maximum value
     34    if (inputX.value > 100) {
     35        inputX.value = 100;
     36    }
     37    if (inputY.value > 100) {
     38        inputY.value = 100;
     39    }
     40
     41    // Concatenate number input values to correct CSS syntax
     42    hidden_input.value = `${inputX.value}% ${inputY.value}%`;
    4543}
    4644
    … …  
    7270    }
    7371
    74     document.getElementById('wpcmfp_bg_pos_desktop_id').value = `${bgX}% ${bgY}%`;
    75     document.getElementById('wpcmfp_desktop_value_x').value = bgX;
    76     document.getElementById('wpcmfp_desktop_value_y').value = bgY;
    77     // Trigger change event to save new values
     72    // If a coordinate is somehow negative, set it to 0 instead
     73    if (bgX < 0) bgX = 0;
     74    if (bgY < 0) bgY = 0;
     75
     76    document.getElementById('wpcmfp_bg_pos_desktop_id').value = `${bgX}% ${bgY}%`;
     77    document.getElementById('wpcmfp_desktop_value_x').value = bgX;
     78    document.getElementById('wpcmfp_desktop_value_y').value = bgY;
     79    // Trigger change event to save new values
    7880    triggerChange(document.getElementById('wpcmfp_bg_pos_desktop_id'));
    7981
    … …  
    8890
    8991    // Automatically save the page if editing an attachment directly (not via media modal)
    90     if (!document.querySelector('.wpcmfp-media-modal-content')) {
    91         const postForm = document.getElementById('post');
    92         if (postForm) {
    93             postForm.submit();
    94         }
    95     }
     92    if (!document.querySelector('.wpcmfp-media-modal-content')) {
     93        const postForm = document.getElementById('post');
     94        if (postForm) {
     95            postForm.submit();
     96        }
     97    }
    9698}
    9799
    98100function triggerChange(element) {
    99     if (element) {
    100         const changeEvent = new Event('change', {
    101             'bubbles': true,
    102             'cancelable': true
    103         });
    104 
    105         element.dispatchEvent(changeEvent);
    106     }
    107 }
    108 
     101    if (element) {
     102        const changeEvent = new Event('change', {
     103            'bubbles': true,
     104            'cancelable': true
     105        });
     106
     107        element.dispatchEvent(changeEvent);
     108    }
     109}
    109110
    110111function waitForMediaLoad(media) {
    … …  
    125126    });
    126127}
    127 
    128128
    129129document.addEventListener('DOMContentLoaded', () => {
    … …  
    140140        }
    141141    });
    142 
    143142});
    144143
    145 
    146 
    147144async function set_focus(e) {
    148 
    149145    replaceCustomVideoElements()
    150146    document.querySelectorAll(".wpcmfp-media-frame-content,.wpcmfp-media-sidebar").forEach(el => el.classList.add('show'));
    … …  
    163159
    164160    await waitForMediaLoad(media);
    165         const rect = media.getBoundingClientRect();
    166         containerHt = container.clientHeight;
    167         containerWt = container.clientWidth;
    168         // This part calculates the position of the point on the image
    169         const marginLeft = (containerWt - rect.width) / 2; // Whitespace between the container and image
    170         const marginTop = (containerHt - rect.height) / 2;
    171         let relX = (e.clientX - rect.left) + marginLeft; // Calculate the location in px. + adding the margin so that the dot never goes outside the image
    172         let relY = (e.clientY - rect.top) + marginTop;
    173 
    174         // When the number is NaN. It means that the user has not interacted with the image.
    175         // So we will calculate the position of the dot based on the input value.
    176         if (Number.isNaN(relX) || Number.isNaN(relY)) {
    177             const inputX = document.getElementById('wpcmfp_desktop_value_x'); // reading out the input values
    178             const inputY = document.getElementById('wpcmfp_desktop_value_y');
    179             inputX.value = Math.max(0, Math.min(100, inputX.value));
    180             inputY.value = Math.max(0, Math.min(100, inputY.value));
    181 
    182             const inputX_px = (rect.width / 100) * inputX.value; // Convert the input value % to px
    183             const inputY_px = (rect.height / 100) * inputY.value;
    184             const marginX = (containerWt - rect.width) / 2; // get the offset of the left (this is in px)
    185             const marginY = (containerHt - rect.height) / 2;
    186             const totalX = inputX_px + marginX; // Combine the offset and the input value
    187             const totalY = inputY_px + marginY;
    188             relX = totalX; // Set the value of rel to total
    189             relY = totalY;
    190         }
    191 
    192         // this part calculated the percentage that will be given to the image on websites.
    193         bgX = Math.round(((e.clientX - rect.left) / containerWt) * 100);
    194         bgY =  Math.round(((e.clientY - rect.top) / containerHt) * 100);
    195         rec_left = Math.round((relX / containerWt) * 100); // Converting the values to percentages
    196         rec_top = Math.round((relY / containerHt) * 100);
    197 
    198 
    199         document.querySelector('.wpcmfp-pin').style.left = `${rec_left}%`;
    200         document.querySelector('.wpcmfp-pin').style.top = `${rec_top}%`;
     161    const rect = media.getBoundingClientRect();
     162    containerHt = container.clientHeight;
     163    containerWt = container.clientWidth;
     164    // This part calculates the position of the point on the image
     165    const marginLeft = (containerWt - rect.width) / 2; // Whitespace between the container and image
     166    const marginTop = (containerHt - rect.height) / 2;
     167    let relX = (e.clientX - rect.left) + marginLeft; // Calculate the location in px. + adding the margin so that the dot never goes outside the image
     168    let relY = (e.clientY - rect.top) + marginTop;
     169
     170    // When the number is NaN. It means that the user has not interacted with the image.
     171    // So we will calculate the position of the dot based on the input value.
     172    if (Number.isNaN(relX) || Number.isNaN(relY)) {
     173        const inputX = document.getElementById('wpcmfp_desktop_value_x'); // reading out the input values
     174        const inputY = document.getElementById('wpcmfp_desktop_value_y');
     175        inputX.value = Math.max(0, Math.min(100, inputX.value));
     176        inputY.value = Math.max(0, Math.min(100, inputY.value));
     177
     178        const inputX_px = (rect.width / 100) * inputX.value; // Convert the input value % to px
     179        const inputY_px = (rect.height / 100) * inputY.value;
     180        const marginX = (containerWt - rect.width) / 2; // get the offset of the left (this is in px)
     181        const marginY = (containerHt - rect.height) / 2;
     182        const totalX = inputX_px + marginX; // Combine the offset and the input value
     183        const totalY = inputY_px + marginY;
     184        relX = totalX; // Set the value of rel to total
     185        relY = totalY;
     186    }
     187
     188    // this part calculated the percentage that will be given to the image on websites.
     189    bgX = Math.round(((e.clientX - rect.left) / containerWt) * 100);
     190    bgY =  Math.round(((e.clientY - rect.top) / containerHt) * 100);
     191    rec_left = Math.round((relX / containerWt) * 100); // Converting the values to percentages
     192    rec_top = Math.round((relY / containerHt) * 100);
     193
     194    document.querySelector('.wpcmfp-pin').style.left = `${rec_left}%`;
     195    document.querySelector('.wpcmfp-pin').style.top = `${rec_top}%`;
    201196}
    202197
    … …  
    222217}
    223218
    224 
    225219function attachMediaClickListener() {
    226220    const container = document.querySelector(".wpcmfp-overlay .wpcmfp-container");
Note: See TracChangeset for help on using the changeset viewer.