| 1 |
/** Support Packages extension - admin JS */ |
| 2 |
|
| 3 |
jQuery(document).ready(function($){ |
| 4 |
|
| 5 |
let $admin_page_wrapper = $('.leyka-admin'); |
| 6 |
if( |
| 7 |
!$admin_page_wrapper.length |
| 8 |
|| !$admin_page_wrapper.hasClass('extension-settings') |
| 9 |
|| $admin_page_wrapper.data('leyka-extension-id') !== 'support_packages' |
| 10 |
) { |
| 11 |
return; |
| 12 |
} |
| 13 |
|
| 14 |
let LEYKA_EXT_AUTO_CALC_COLORS = false, |
| 15 |
$mainColorInput = $admin_page_wrapper.find('.extension-color-options input[name$="_main_color"]'), |
| 16 |
$backgroundColorInput = $admin_page_wrapper.find('.extension-color-options input[name$="_background_color"]') |
| 17 |
.closest('.field-component.field') |
| 18 |
.find('.leyka-setting-field.colorpicker'), |
| 19 |
$captionColorInput = $admin_page_wrapper.find('.extension-color-options input[name$="_caption_color"]') |
| 20 |
.closest('.field-component.field') |
| 21 |
.find('.leyka-setting-field.colorpicker'), |
| 22 |
$textColorInput = $admin_page_wrapper.find('.extension-color-options input[name$="_text_color"]') |
| 23 |
.closest('.field-component.field') |
| 24 |
.find('.leyka-setting-field.colorpicker'); |
| 25 |
|
| 26 |
$mainColorInput.closest('.field-component') |
| 27 |
.find('.leyka-setting-field.colorpicker').data('stored-color', $mainColorInput.val()); |
| 28 |
$backgroundColorInput.data('stored-color', $backgroundColorInput.closest('.field-component').find('.leyka-colorpicker-value').val()); |
| 29 |
$captionColorInput.data('stored-color', $captionColorInput.closest('.field-component').find('.leyka-colorpicker-value').val()); |
| 30 |
$textColorInput.data('stored-color', $textColorInput.closest('.field-component').find('.leyka-colorpicker-value').val()); |
| 31 |
|
| 32 |
function leykaSetupGeneralColors(mainColorHex) { |
| 33 |
|
| 34 |
let mainColorHsl = leykaHex2Hsl(mainColorHex), |
| 35 |
backgroundColorHsl = leykaMainHslColor2Background(mainColorHsl[0], mainColorHsl[1], mainColorHsl[2]), |
| 36 |
backgroundColorHex = leykaHsl2Hex(backgroundColorHsl[0], backgroundColorHsl[1], backgroundColorHsl[2]); |
| 37 |
|
| 38 |
LEYKA_EXT_AUTO_CALC_COLORS = true; |
| 39 |
|
| 40 |
if( !$backgroundColorInput.data('changed') ) { |
| 41 |
$backgroundColorInput.wpColorPicker('color', backgroundColorHex); |
| 42 |
} |
| 43 |
|
| 44 |
if( !$captionColorInput.data('changed') ) { |
| 45 |
$captionColorInput.wpColorPicker('color', backgroundColorHex); |
| 46 |
} |
| 47 |
|
| 48 |
let textColorHsl = leykaMainHslColor2Text(mainColorHsl[0], mainColorHsl[1], mainColorHsl[2]), |
| 49 |
textColorHex = leykaHsl2Hex(textColorHsl[0], textColorHsl[1], textColorHsl[2]); |
| 50 |
|
| 51 |
if( !$textColorInput.data('changed') ) { |
| 52 |
$textColorInput.wpColorPicker('color', textColorHex); |
| 53 |
} |
| 54 |
|
| 55 |
LEYKA_EXT_AUTO_CALC_COLORS = false; |
| 56 |
|
| 57 |
} |
| 58 |
|
| 59 |
$mainColorInput.on('change.leyka', function(){ |
| 60 |
leykaSetupGeneralColors($(this).val()); |
| 61 |
}); |
| 62 |
|
| 63 |
$backgroundColorInput.closest('.field-component').find('.leyka-colorpicker-value').on('change.leyka', function(){ |
| 64 |
if(!LEYKA_EXT_AUTO_CALC_COLORS) { |
| 65 |
$(this).closest('.field-component').find('.leyka-setting-field.colorpicker').data('changed', '1'); |
| 66 |
} |
| 67 |
}); |
| 68 |
|
| 69 |
$captionColorInput.closest('.field-component').find('.leyka-colorpicker-value').on('change.leyka', function(){ |
| 70 |
if(!LEYKA_EXT_AUTO_CALC_COLORS) { |
| 71 |
$(this).closest('.field-component').find('.leyka-setting-field.colorpicker').data('changed', '1'); |
| 72 |
} |
| 73 |
}); |
| 74 |
|
| 75 |
$textColorInput.closest('.field-component').find('.leyka-colorpicker-value').on('change.leyka', function(){ |
| 76 |
if(!LEYKA_EXT_AUTO_CALC_COLORS) { |
| 77 |
$(this).closest('.field-component').find('.leyka-setting-field.colorpicker').data('changed', '1'); |
| 78 |
} |
| 79 |
}); |
| 80 |
|
| 81 |
let $colorOptionsBlock = $('.settings-block.extension-color-options'); |
| 82 |
$colorOptionsBlock.append( $('<div class="color-actions"><a href="#" class="reset-colors"><span>'+leyka.extension_colors_reset+'</span></a><a href="#" class="unlock-changes"><span>'+leyka.extension_colors_make_change+'</span></a></div>') ); |
| 83 |
|
| 84 |
$colorOptionsBlock.find('.leyka-colorpicker-field-wrapper').each(function(){ |
| 85 |
$(this).append('<div class="leyka-colorpicker-field-overlay"></div>'); |
| 86 |
}); |
| 87 |
|
| 88 |
$colorOptionsBlock.on('click', '.unlock-changes', function(e){ |
| 89 |
e.preventDefault(); |
| 90 |
$colorOptionsBlock.toggleClass('changes-unlocked'); |
| 91 |
}); |
| 92 |
|
| 93 |
$colorOptionsBlock.on('click', '.reset-colors', function(e){ |
| 94 |
e.preventDefault(); |
| 95 |
|
| 96 |
$backgroundColorInput.data('changed', ''); |
| 97 |
$captionColorInput.data('changed', ''); |
| 98 |
$textColorInput.data('changed', ''); |
| 99 |
|
| 100 |
$mainColorInput.change(); |
| 101 |
|
| 102 |
}); |
| 103 |
|
| 104 |
$colorOptionsBlock.on('click', 'leyka-colorpicker-field-overlay', function(e){ |
| 105 |
e.stopPropagation(); |
| 106 |
}); |
| 107 |
|
| 108 |
}); |
