Changeset 3308965
- Timestamp:
- 06/10/2025 08:03:32 AM (10 months ago)
- Location:
- media-focus-point
- Files:
-
- 7 added
- 6 edited
-
tags/1.4/media-focus-point.php (modified) (1 diff)
-
tags/1.5/languages/media-focus-point.pot (modified) (1 diff)
-
tags/2.0.1 (added)
-
tags/2.0.1/admin.css (added)
-
tags/2.0.1/languages (added)
-
tags/2.0.1/languages/media-focus-point.pot (added)
-
tags/2.0.1/media-focus-point.php (added)
-
tags/2.0.1/readme.txt (added)
-
tags/2.0.1/script.js (added)
-
trunk/admin.css (modified) (12 diffs)
-
trunk/media-focus-point.php (modified) (4 diffs)
-
trunk/readme.txt (modified) (2 diffs)
-
trunk/script.js (modified) (10 diffs)
Legend:
- Unmodified
- Added
- Removed
-
media-focus-point/tags/1.4/media-focus-point.php
r3257865 r3308965 139 139 function MFP_Background( $attachment_id, $include_image = true ) { 140 140 // Get the stored background position 141 echo $attachment_id; 141 142 $bg_pos_desktop = get_post_meta( $attachment_id, 'bg_pos_desktop', true ); 142 143 -
media-focus-point/tags/1.5/languages/media-focus-point.pot
r3257933 r3308965 3 3 msgid "" 4 4 msgstr "" 5 "Project-Id-Version: Media Focus Point 1. 4\n"5 "Project-Id-Version: Media Focus Point 1.5\n" 6 6 "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/media-focus-point\n" 7 7 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" -
media-focus-point/trunk/admin.css
r3281586 r3308965 1 . overlay{1 .wpcmfp-overlay{ 2 2 display:none; 3 3 position: fixed; … … 11 11 flex-direction:column 12 12 } 13 . overlay.show{13 .wpcmfp-overlay.wpcmfp-show{ 14 14 display:flex; 15 15 } 16 . overlay:before {16 .wpcmfp-overlay:before { 17 17 content: ''; 18 18 display: block; … … 26 26 opacity: 0.5; 27 27 } 28 . overlay h3{28 .wpcmfp-overlay h3{ 29 29 font-size:15px; 30 30 margin:0px; 31 31 } 32 . overlay .controls{32 .wpcmfp-overlay .wpcmfp-controls{ 33 33 display:flex; 34 34 } 35 . overlay .controls span{35 .wpcmfp-overlay .wpcmfp-controls span{ 36 36 margin:0px 5px; 37 37 } 38 . overlay .close{38 .wpcmfp-overlay .wpcmfp-close{ 39 39 z-index:99; 40 40 border:1px solid; 41 41 } 42 . overlay .img-container{42 .wpcmfp-overlay .wpcmfp-img-container{ 43 43 height: 610px; 44 44 width: 1000px; … … 50 50 margin-top: -305px; 51 51 } 52 . overlay .img-container .header{52 .wpcmfp-overlay .wpcmfp-img-container .wpcmfp-header{ 53 53 height: 50px; 54 54 width: 100%; … … 56 56 border-bottom: 1px solid #DCDCDD; 57 57 } 58 . overlay .img-container .header .wrapp{58 .wpcmfp-overlay .wpcmfp-img-container .wpcmfp-header .wpcmfp-wrapp{ 59 59 display: flex; 60 60 align-items: center; … … 64 64 border-bottom: 1px solid #DCDCDD; 65 65 } 66 . overlay .img-container .container{66 .wpcmfp-overlay .wpcmfp-img-container .wpcmfp-container{ 67 67 background-color: #F7F7F7; 68 68 width: 100%; … … 74 74 position:relative; 75 75 } 76 . overlay img{76 .wpcmfp-overlay img{ 77 77 cursor: crosshair; 78 78 max-height: 100%; … … 82 82 } 83 83 84 . overlay video {84 .wpcmfp-overlay video { 85 85 cursor: crosshair; 86 86 } 87 . overlay .pin{87 .wpcmfp-overlay .wpcmfp-pin{ 88 88 position: absolute; 89 89 top: 50%; … … 93 93 pointer-events: none; 94 94 } 95 . overlay .pin::before {95 .wpcmfp-overlay .wpcmfp-pin::before { 96 96 content: ""; 97 97 position: absolute; … … 109 109 box-shadow: 0 0 0 6000px #000000; 110 110 } 111 . overlay .pin::after {111 .wpcmfp-overlay .wpcmfp-pin::after { 112 112 content: ""; 113 113 position: absolute; … … 124 124 opacity: .6; 125 125 } 126 .close.button{ 127 border:0px; 128 background:transparent; 129 } 130 .focusp_label_holder{ 126 127 .wpcmfp-focusp_label_holder{ 131 128 margin-bottom:15px; 132 129 } 133 # desktop_value,#mobile_value{130 #wpcmfp_desktop_value,#wpcmfp_mobile_value{ 134 131 margin:6px 0px; 135 132 } 136 # desktop_value input[type="number"] {133 #wpcmfp_desktop_value input[type="number"] { 137 134 width: calc(3ch + 28px); 138 135 padding: 0 4px; … … 141 138 font-size:12px; 142 139 } 143 .media-frame-content. show{140 .media-frame-content.wpcmfp-show{ 144 141 z-index:9999999999999999999; 145 142 } 146 . media-sidebar.show,.media-frame-content.show{143 .wpcmfp-media-sidebar.wpcmfp-show,.wpcmfp-media-frame-content.wpcmfp-show{ 147 144 overflow: visible; 148 145 } -
media-focus-point/trunk/media-focus-point.php
r3281586 r3308965 3 3 * Plugin Name: Media Focus Point 4 4 * Description: Ensures that your selected focus area of an image or video remains centered and visible, even when resized. 5 * Version: 2.0 5 * Version: 2.0.1 6 6 * Author: WP Company 7 7 * Author URI: https://www.wpcompany.nl 8 8 * Text Domain: media-focus-point 9 9 * Domain Path: /languages 10 * Tested up to: 6. 810 * Tested up to: 6.7.2 11 11 * License: GPLv3 or later 12 12 * License URI: http://www.gnu.org/licenses/gpl-3.0.html … … 54 54 55 55 $html = ' 56 <input type="hidden" value="' . esc_attr( $field_value ) . '" id=" bg_pos_desktop_id" name="attachments[' . $post->ID . '][bg_pos_desktop]">57 <div class=" overlayimage_focus_point">58 <div class=" img-container">59 <div class=" header">60 <div class="w rapp">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 61 <h3>' . __( 'Click on the media to set the focus point', 'media-focus-point' ) . '</h3> 62 <div class=" controls">62 <div class="wpcmfp-controls"> 63 63 ' . ( $is_video ? ' 64 <span class=" button button-secondary wpcmfp-button" onclick="toggle_controls()">64 <span class="wpcmfp-button button-secondary wpcmfp-button" onclick="toggle_controls()"> 65 65 ' . __( 'Toggle Controls', 'media-focus-point' ) . ' 66 66 </span>' : '' ) . ' … … 74 74 </div> 75 75 </div> 76 <div class=" container">77 <div class=" pin"></div>76 <div class="wpcmfp-container"> 77 <div class="wpcmfp-pin"></div> 78 78 ' . $media_tag . ' 79 79 </div> 80 80 </div> 81 81 </div> 82 <div class=" focusp_label_holder">83 <div id=" desktop_value">82 <div class="wpcmfp-focusp_label_holder"> 83 <div id="wpcmfp_desktop_value"> 84 84 <input 85 id=" desktop_value_x"85 id="wpcmfp_desktop_value_x" 86 86 type="number" 87 87 min="0" … … 90 90 title="' . __( 'This field contains the X-percentage', 'media-focus-point' ) . '" value="' . $value_x . '" 91 91 onchange="onNumberInputChange(this)" />% 92 <input id=" desktop_value_y" type="number" min="0" max="100" step="1" title="' . __( 'This field contains the Y-percentage', 'media-focus-point' ) . '" value="' . $value_y . '" onchange="onNumberInputChange(this)" />%93 <div id=" desktop_value_label"></div>92 <input id="wpcmfp_desktop_value_y" type="number" min="0" max="100" step="1" title="' . __( 'This field contains the Y-percentage', 'media-focus-point' ) . '" value="' . $value_y . '" onchange="onNumberInputChange(this)" />% 93 <div id="wpcmfp_desktop_value_label"></div> 94 94 </div> 95 95 <input 96 96 type="button" 97 97 class="button button-primary button-small" 98 id=" label_desktop"98 id="wpcmfp_label_desktop" 99 99 onclick="set_focus(0)" 100 100 value="' . $label . '"> 101 101 <input 102 102 type="button" 103 class="button button-s mall"104 id=" reset_desktop"103 class="button button-secondary button-small" 104 id="wpcmfp_reset_desktop" 105 105 onclick="reset_focus()" 106 106 value="' . __( 'Reset', 'media-focus-point' ) . '" ' . $disabled . '> -
media-focus-point/trunk/readme.txt
r3281586 r3308965 1 1 === Media Focus Point === 2 2 Contributors: wpcompany 3 Tags: focus, focal, center, image, background, media, video3 Tags: focus, focal, image, background, video 4 4 Requires at least: 6.0 5 5 Tested up to: 6.8 6 6 Requires PHP: 7.4 7 Stable tag: 2.0 7 Stable tag: 2.0.1 8 8 License: GPLv3 or later 9 9 License URI: https://www.gnu.org/licenses/gpl-2.0.html … … 110 110 == Changelog == 111 111 112 = 2.0.1 = 113 * Added custom prefix to all classes to prevent style conflicts 114 112 115 = 2.0 = 113 116 * Media Focus Point: now supports video! -
media-focus-point/trunk/script.js
r3281586 r3308965 29 29 30 30 function onNumberInputChange() { 31 const inputX = document.getElementById(' desktop_value_x');32 const inputY = document.getElementById(' desktop_value_y');33 const hidden_input = document.getElementById(' bg_pos_desktop_id') ;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 34 35 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 … … 46 46 47 47 function set_bg_values() { 48 let d = document.getElementById(" bg_pos_desktop_id").value.replaceAll('%', '');48 let d = document.getElementById("wpcmfp_bg_pos_desktop_id").value.replaceAll('%', ''); 49 49 d_left = d.split(' ')[0]; 50 50 d_right = d.split(' ')[1]; … … 52 52 53 53 function cancel_focus() { 54 document.querySelectorAll(". media-frame-content,.media-sidebar").forEach(el => el.classList.remove('show'));55 document.querySelector('. overlay').classList.remove('show');54 document.querySelectorAll(".wpcmfp-media-frame-content,.wpcmfp-media-sidebar").forEach(el => el.classList.remove('wpcmfp-show')); 55 document.querySelector('.wpcmfp-overlay').classList.remove('wpcmfp-show'); 56 56 } 57 57 58 58 function close_overlay() { 59 const inputX = document.getElementById(' desktop_value_x');60 const inputY = document.getElementById(' desktop_value_y');61 document.querySelectorAll(". media-frame-content.media-sidebar").forEach(el => el.classList.remove('show'));62 document.querySelector('. overlay').classList.remove('show');59 const inputX = document.getElementById('wpcmfp_desktop_value_x'); 60 const inputY = document.getElementById('wpcmfp_desktop_value_y'); 61 document.querySelectorAll(".wpcmfp-media-frame-content.wpcmfp-media-sidebar").forEach(el => el.classList.remove('wpcmfp-show')); 62 document.querySelector('.wpcmfp-overlay').classList.remove('wpcmfp-show'); 63 63 64 64 d_left = bgX; … … 72 72 } 73 73 74 document.getElementById(' bg_pos_desktop_id').value = `${bgX}% ${bgY}%`;75 document.getElementById(' desktop_value_x').value = bgX;76 document.getElementById(' desktop_value_y').value = bgY;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 77 // Trigger change event to save new values 78 triggerChange(document.getElementById(' bg_pos_desktop_id'));78 triggerChange(document.getElementById('wpcmfp_bg_pos_desktop_id')); 79 79 80 80 if (bgX == 50 && bgY == 50) { 81 document.getElementById(" desktop_value_label").innerHTML = centered_text;82 document.getElementById(" label_desktop").setAttribute('value', 'Set');81 document.getElementById("wpcmfp_desktop_value_label").innerHTML = centered_text; 82 document.getElementById("wpcmfp_label_desktop").setAttribute('value', 'Set'); 83 83 } else { 84 document.getElementById(" desktop_value_label").innerHTML = '';85 document.getElementById(" label_desktop").setAttribute('value', 'Change');86 document.getElementById(" reset_desktop").style.display = 'inline';84 document.getElementById("wpcmfp_desktop_value_label").innerHTML = ''; 85 document.getElementById("wpcmfp_label_desktop").setAttribute('value', 'Change'); 86 document.getElementById("wpcmfp_reset_desktop").style.display = 'inline'; 87 87 } 88 88 89 89 // Automatically save the page if editing an attachment directly (not via media modal) 90 if (!document.querySelector('. media-modal-content')) {90 if (!document.querySelector('.wpcmfp-media-modal-content')) { 91 91 const postForm = document.getElementById('post'); 92 92 if (postForm) { … … 148 148 149 149 replaceCustomVideoElements() 150 document.querySelectorAll(". media-frame-content,.media-sidebar").forEach(el => el.classList.add('show'));151 document.querySelectorAll(". media-toolbar,.media-menu-item").forEach(el => el.style.zIndex = 0);150 document.querySelectorAll(".wpcmfp-media-frame-content,.wpcmfp-media-sidebar").forEach(el => el.classList.add('show')); 151 document.querySelectorAll(".wpcmfp-media-toolbar,.wpcmfp-media-menu-item").forEach(el => el.style.zIndex = 0); 152 152 set_bg_values(); 153 document.querySelector('. overlay').classList.add('show');153 document.querySelector('.wpcmfp-overlay').classList.add('wpcmfp-show'); 154 154 attachMediaClickListener(); 155 155 156 const container = document.querySelector(". image_focus_point .container");156 const container = document.querySelector(".wpcmfp-image_focus_point .wpcmfp-container"); 157 157 const media = container.querySelector("img") || container.querySelector("video"); 158 158 … … 175 175 // So we will calculate the position of the dot based on the input value. 176 176 if (Number.isNaN(relX) || Number.isNaN(relY)) { 177 const inputX = document.getElementById(' desktop_value_x'); // reading out the input values178 const inputY = document.getElementById(' desktop_value_y');177 const inputX = document.getElementById('wpcmfp_desktop_value_x'); // reading out the input values 178 const inputY = document.getElementById('wpcmfp_desktop_value_y'); 179 179 inputX.value = Math.max(0, Math.min(100, inputX.value)); 180 180 inputY.value = Math.max(0, Math.min(100, inputY.value)); … … 197 197 198 198 199 document.querySelector('. pin').style.left = `${rec_left}%`;200 document.querySelector('. pin').style.top = `${rec_top}%`;199 document.querySelector('.wpcmfp-pin').style.left = `${rec_left}%`; 200 document.querySelector('.wpcmfp-pin').style.top = `${rec_top}%`; 201 201 } 202 202 … … 204 204 bgX = 50; 205 205 bgY = 50; 206 document.querySelector(". overlay .pin").style.left = '50%';207 document.querySelector(". overlay .pin").style.top = '50%';208 document.getElementById(" reset_desktop").style.display = 'none';206 document.querySelector(".wpcmfp-overlay .wpcmfp-pin").style.left = '50%'; 207 document.querySelector(".wpcmfp-overlay .wpcmfp-pin").style.top = '50%'; 208 document.getElementById("wpcmfp_reset_desktop").style.display = 'none'; 209 209 close_overlay(); 210 210 } … … 224 224 225 225 function attachMediaClickListener() { 226 const container = document.querySelector(". overlay .container");226 const container = document.querySelector(".wpcmfp-overlay .wpcmfp-container"); 227 227 const media = container.querySelector("img") || container.querySelector("video"); 228 228 … … 246 246 bgY = Math.round(((e.clientY - rect.top) / rect.height) * 100); 247 247 248 document.querySelector('. pin').style.left = `${rec_left}%`;249 document.querySelector('. pin').style.top = `${rec_top}%`;248 document.querySelector('.wpcmfp-pin').style.left = `${rec_left}%`; 249 document.querySelector('.wpcmfp-pin').style.top = `${rec_top}%`; 250 250 }); 251 251 } else {
Note: See TracChangeset
for help on using the changeset viewer.