| 1 |
<?php if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly ?> |
| 2 |
<script> |
| 3 |
|
| 4 |
jQuery("document").ready(function($) { |
| 5 |
|
| 6 |
// ================================================== |
| 7 |
// Dealing with uploading images |
| 8 |
// ================================================== |
| 9 |
|
| 10 |
$('.yydev_upload_image, .yydev_light_img_bg').click(function(e) { |
| 11 |
|
| 12 |
var uploadButtonParent = $(this).parent(); |
| 13 |
|
| 14 |
e.preventDefault(); |
| 15 |
var image = wp.media({ |
| 16 |
title: 'Upload Image'}).open() |
| 17 |
.on('select', function(e){ |
| 18 |
|
| 19 |
// This will return the selected image from the Media Uploader, the result is an object |
| 20 |
var images_length = image.state().get("selection").length; |
| 21 |
var images = image.state().get("selection").models; |
| 22 |
|
| 23 |
console.log(images); |
| 24 |
|
| 25 |
var image_url = images[0].toJSON().url; |
| 26 |
var image_alt = images[0].toJSON().alt; |
| 27 |
var image_caption = images[0].toJSON().caption; |
| 28 |
var image_title = images[0].toJSON().title; |
| 29 |
var image_id = images[0].toJSON().id; |
| 30 |
|
| 31 |
// Let's assign the url value to the input field |
| 32 |
uploadButtonParent.find('.yydev_light_img_bg').attr('src', image_url); // changing image icon |
| 33 |
uploadButtonParent.find('.yydev_image_input').val(image_url); // changing input url |
| 34 |
|
| 35 |
}); // .on('select', function(e){ |
| 36 |
|
| 37 |
}); // $('.edit-button-image-upload').click(function(e) { |
| 38 |
|
| 39 |
// ================================================== |
| 40 |
// Changing the background of icon image on background change |
| 41 |
// ================================================== |
| 42 |
|
| 43 |
$('input#background_color').change(function() { |
| 44 |
|
| 45 |
var backgroundValue = $(this).val(); |
| 46 |
$("img.yydev_light_img_bg").css("background", backgroundValue); |
| 47 |
|
| 48 |
}); // $('input#background_color').change(function() { |
| 49 |
|
| 50 |
// =========================================== |
| 51 |
// SVG Upload and Controls |
| 52 |
// =========================================== |
| 53 |
|
| 54 |
// SVG uploader functionality |
| 55 |
$('.yydev_upload_svg, .yydev_light_svg_bg').click(function(e) { |
| 56 |
|
| 57 |
var uploadButtonParent = $(this).parent(); |
| 58 |
|
| 59 |
e.preventDefault(); |
| 60 |
var svg = wp.media({ |
| 61 |
title: 'Upload SVG'}).open() |
| 62 |
.on('select', function(e){ |
| 63 |
|
| 64 |
// This will return the selected SVG from the Media Uploader, the result is an object |
| 65 |
var svgs_length = svg.state().get("selection").length; |
| 66 |
var svgs = svg.state().get("selection").models; |
| 67 |
|
| 68 |
console.log(svgs); |
| 69 |
|
| 70 |
var svg_url = svgs[0].toJSON().url; |
| 71 |
var svg_alt = svgs[0].toJSON().alt; |
| 72 |
var svg_caption = svgs[0].toJSON().caption; |
| 73 |
var svg_title = svgs[0].toJSON().title; |
| 74 |
var svg_id = svgs[0].toJSON().id; |
| 75 |
|
| 76 |
// Let's assign the url value to the input field |
| 77 |
uploadButtonParent.find('.yydev_light_svg_bg').attr('src', svg_url); // changing SVG icon |
| 78 |
uploadButtonParent.find('.yydev_svg_input').val(svg_url); // changing input url |
| 79 |
updateSVGPreviewSize(); // Update size after new SVG is loaded |
| 80 |
|
| 81 |
}); // .on('select', function(e){ |
| 82 |
|
| 83 |
}); // $('.yydev_upload_svg').click(function(e) { |
| 84 |
|
| 85 |
// Dynamic icon type control |
| 86 |
$('#icon_type').change(function() { |
| 87 |
var iconType = $(this).val(); |
| 88 |
|
| 89 |
if (iconType === 'svg') { |
| 90 |
$('#icon_size_section').show(); |
| 91 |
$('#svg_url_section').show(); |
| 92 |
$('#image_url_section').hide(); |
| 93 |
} else { |
| 94 |
$('#icon_size_section').hide(); |
| 95 |
$('#svg_url_section').hide(); |
| 96 |
$('#image_url_section').show(); |
| 97 |
} |
| 98 |
}); |
| 99 |
|
| 100 |
// Trigger change event on page load to set initial state |
| 101 |
$('#icon_type').trigger('change'); |
| 102 |
|
| 103 |
// SVG background color update |
| 104 |
$('input#background_color').change(function() { |
| 105 |
|
| 106 |
var backgroundValue = $(this).val(); |
| 107 |
$("img.yydev_light_img_bg").css("background", backgroundValue); |
| 108 |
$("img.yydev_light_svg_bg").css("background", backgroundValue); |
| 109 |
|
| 110 |
}); // $('input#background_color').change(function() { |
| 111 |
|
| 112 |
// SVG Size Preview Updates |
| 113 |
$('#icon_width, #icon_height, #button_width, #button_height').on('input keyup change', function() { |
| 114 |
if ($('#icon_type').val() === 'svg') { |
| 115 |
updateSVGPreviewSize(); |
| 116 |
} |
| 117 |
}); |
| 118 |
|
| 119 |
// Function to update SVG preview size |
| 120 |
function updateSVGPreviewSize() { |
| 121 |
var iconWidth = $('#icon_width').val(); |
| 122 |
var iconHeight = $('#icon_height').val(); |
| 123 |
var buttonWidth = $('#button_width').val() || '45'; |
| 124 |
var buttonHeight = $('#button_height').val() || '45'; |
| 125 |
var previewSvg = $('.yydev_light_svg_bg'); |
| 126 |
|
| 127 |
// Use SVG dimensions if provided, otherwise use button dimensions |
| 128 |
var finalWidth = (iconWidth && iconWidth !== '') ? iconWidth : buttonWidth; |
| 129 |
var finalHeight = (iconHeight && iconHeight !== '') ? iconHeight : buttonHeight; |
| 130 |
|
| 131 |
// Apply size to SVG preview |
| 132 |
if (previewSvg.length > 0) { |
| 133 |
previewSvg.css({ |
| 134 |
'width': finalWidth + 'px', |
| 135 |
'height': finalHeight + 'px' |
| 136 |
}); |
| 137 |
} |
| 138 |
} |
| 139 |
|
| 140 |
// Initialize SVG preview size on page load |
| 141 |
setTimeout(function() { |
| 142 |
if ($('#icon_type').val() === 'svg') { |
| 143 |
updateSVGPreviewSize(); |
| 144 |
} |
| 145 |
}, 300); |
| 146 |
|
| 147 |
}); // jQuery("document").ready(function($) { |
| 148 |
|
| 149 |
</script> |
