| 1 |
jQuery(function ($) { |
| 2 |
|
| 3 |
let $modal = $('#sharemypost-modal-overlay'), |
| 4 |
admin_data = window.sharemypost_data || {}, |
| 5 |
$main_tabs = $('.sharemypost-nav-tab'), |
| 6 |
$sub_tabs = $('.sharemypost-sub-tab'), |
| 7 |
$tab_contents = $('.sharemypost-tab-content'), |
| 8 |
$sub_panels = $('.sharemypost-sub-panel'), |
| 9 |
$sub_tabs_wrapper = $('.sharemypost-sub-tabs-wrapper'), |
| 10 |
$inline_color_type_select = $('#sharemypost_inline_color_type_select'), |
| 11 |
$inline_custom_color_container = $('#sharemypost_inline_custom_color_container'); |
| 12 |
|
| 13 |
// ===== DEFAULT ACTIVE TABS ===== |
| 14 |
let saved_main_tab = window.localStorage ? window.localStorage.getItem('sharemypost_active_main_tab') : null; |
| 15 |
let saved_sub_tab = window.localStorage ? window.localStorage.getItem('sharemypost_active_sub_tab') : null; |
| 16 |
|
| 17 |
$main_tabs.filter('[data-tab="' + (saved_main_tab || 'options') + '"]').addClass('active'); |
| 18 |
|
| 19 |
let defaultSubTab = saved_sub_tab || 'inline_content'; |
| 20 |
if (!$sub_tabs.filter('[data-subtab="' + defaultSubTab + '"]').length) { |
| 21 |
defaultSubTab = 'inline_content'; |
| 22 |
} |
| 23 |
$sub_tabs.filter('[data-subtab="' + defaultSubTab + '"]').addClass('active'); |
| 24 |
|
| 25 |
let $active_main = $main_tabs.filter('.active'); |
| 26 |
if (!$active_main.length) { |
| 27 |
let $options_tab = $main_tabs.filter('[data-tab="options"]'); |
| 28 |
if ($options_tab.length) { |
| 29 |
$options_tab.addClass('active'); |
| 30 |
$active_main = $options_tab; |
| 31 |
} |
| 32 |
} |
| 33 |
|
| 34 |
if ($active_main.length && $active_main.data('tab') !== 'options') { |
| 35 |
$sub_tabs_wrapper.hide(); |
| 36 |
} else { |
| 37 |
$sub_tabs_wrapper.show(); |
| 38 |
$sub_panels.hide(); |
| 39 |
let $active_sub = $sub_tabs.filter('.active'); |
| 40 |
if ($active_sub.length) { |
| 41 |
$('#subtab-' + $active_sub.data('subtab')).show(); |
| 42 |
} else { |
| 43 |
$('#subtab-inline_content').show(); |
| 44 |
} |
| 45 |
} |
| 46 |
|
| 47 |
// ===== TAB HANDLING ===== |
| 48 |
$('.sharemypost-nav-tab, .sharemypost-sub-tab').on('click', function (e) { |
| 49 |
e.preventDefault(); |
| 50 |
let $this = $(this), |
| 51 |
is_main = $this.hasClass('sharemypost-nav-tab'); |
| 52 |
|
| 53 |
if (is_main) { |
| 54 |
$tab_contents.hide(); |
| 55 |
$('#sharemypost-' + $this.data('tab')).show(); |
| 56 |
$main_tabs.removeClass('active'); |
| 57 |
|
| 58 |
if ($this.data('tab') === 'options') { |
| 59 |
$sub_tabs_wrapper.show(); |
| 60 |
$sub_panels.hide(); |
| 61 |
let $active_sub = $sub_tabs.filter('.active'); |
| 62 |
if ($active_sub.length) { |
| 63 |
$('#subtab-' + $active_sub.data('subtab')).show(); |
| 64 |
} else { |
| 65 |
$('#subtab-inline_content').show(); |
| 66 |
} |
| 67 |
} else { |
| 68 |
$sub_tabs_wrapper.hide(); |
| 69 |
} |
| 70 |
} else { |
| 71 |
$sub_panels.hide(); |
| 72 |
$('#subtab-' + $this.data('subtab')).show(); |
| 73 |
$sub_tabs.removeClass('active'); |
| 74 |
} |
| 75 |
$this.addClass('active'); |
| 76 |
|
| 77 |
if (window.localStorage) { |
| 78 |
if (is_main) { |
| 79 |
window.localStorage.setItem('sharemypost_active_main_tab', $this.data('tab')); |
| 80 |
} else { |
| 81 |
window.localStorage.setItem('sharemypost_active_sub_tab', $this.data('subtab')); |
| 82 |
} |
| 83 |
} |
| 84 |
}); |
| 85 |
|
| 86 |
// ===== INLINE COLOR TOGGLE ===== |
| 87 |
$inline_color_type_select.on('change', function () { |
| 88 |
$inline_custom_color_container.toggle(this.value === 'custom'); |
| 89 |
update_button_preview(); |
| 90 |
}).trigger('change'); |
| 91 |
|
| 92 |
// ===== LIVE PREVIEW ===== |
| 93 |
function update_button_preview() { |
| 94 |
let $panel = $('.sharemypost-sub-panel:visible').first(); |
| 95 |
if (!$panel.length) { |
| 96 |
$panel = $('#subtab-inline_content'); |
| 97 |
} |
| 98 |
let $preview_inputs = $panel.find('.sharemypost-preview-input'), |
| 99 |
$preview = $panel.find('#sharemypost-button-preview'); |
| 100 |
|
| 101 |
if (!$preview_inputs.length || !$preview.length) { |
| 102 |
return; |
| 103 |
} |
| 104 |
|
| 105 |
let config = {}; |
| 106 |
$preview_inputs.each(function () { |
| 107 |
let $el = $(this); |
| 108 |
config[$el.data('preview-attr')] = $el.val(); |
| 109 |
}); |
| 110 |
|
| 111 |
let shape = config.shape || 'rounded', |
| 112 |
size = parseInt(config.size, 10) || 38, |
| 113 |
space = parseInt(config.space, 10) || 10, |
| 114 |
style = config.style || 'filled'; |
| 115 |
|
| 116 |
let color_type = 'original', |
| 117 |
button_color = '#1f75e1'; |
| 118 |
|
| 119 |
$preview.removeClass(function (index, class_name) { |
| 120 |
return (class_name.match(/(^|\s)sharemypost-(shape|style|color-type)-\S+/g) || []).join(' '); |
| 121 |
}); |
| 122 |
|
| 123 |
$preview.addClass(`sharemypost-shape-${shape} sharemypost-style-${style}`); |
| 124 |
|
| 125 |
let preview_style = $preview[0].style; |
| 126 |
|
| 127 |
if (color_type === 'custom') { |
| 128 |
$preview.addClass('sharemypost-color-type-custom'); |
| 129 |
preview_style.setProperty('--sharemypost-button-color', button_color); |
| 130 |
} else { |
| 131 |
preview_style.removeProperty('--sharemypost-button-color'); |
| 132 |
} |
| 133 |
|
| 134 |
// Size + Gap |
| 135 |
preview_style.setProperty('--sharemypost-button-gap', space + 'px'); |
| 136 |
preview_style.setProperty('--sharemypost-button-size', size + 'px'); |
| 137 |
preview_style.setProperty('--sharemypost-button-icon-size', Math.max(12, Math.round(size * 0.55)) + 'px'); |
| 138 |
|
| 139 |
let is_fixed_shape = ['circle', 'drop'].includes(shape), |
| 140 |
font_size = Math.max(10, Math.round(size * 0.33)) + 'px', |
| 141 |
padding_value = `${Math.max(6, Math.round(size * 0.22))}px ${Math.max(10, Math.round(size * 0.35))}px`; |
| 142 |
|
| 143 |
$preview.find('.sharemypost-share-button').each(function () { |
| 144 |
let btn_style = this.style; |
| 145 |
btn_style.setProperty('--sharemypost-button-font-size', font_size); |
| 146 |
btn_style.setProperty('--sharemypost-button-padding', padding_value); |
| 147 |
|
| 148 |
if (is_fixed_shape) { |
| 149 |
btn_style.width = size + 'px'; |
| 150 |
btn_style.height = size + 'px'; |
| 151 |
btn_style.padding = '0'; |
| 152 |
} else { |
| 153 |
btn_style.width = 'auto'; |
| 154 |
btn_style.height = 'auto'; |
| 155 |
btn_style.padding = ''; |
| 156 |
} |
| 157 |
}); |
| 158 |
} |
| 159 |
|
| 160 |
// ===== PREVIEW EVENTS ===== |
| 161 |
$('.sharemypost-preview-input').on('input change keyup', update_button_preview); |
| 162 |
update_button_preview(); |
| 163 |
|
| 164 |
// ===== MODALS ===== |
| 165 |
$('.sharemypost-network-universal').on('click', function (e) { |
| 166 |
e.preventDefault(); |
| 167 |
if ($modal.length) { |
| 168 |
$modal.css('display', 'flex').hide().fadeIn(200); |
| 169 |
} |
| 170 |
}); |
| 171 |
|
| 172 |
$('#sharemypost-modal-overlay, .sharemypost-modal-close').on('click', function (e) { |
| 173 |
if (e.target === this || $(e.target).hasClass('sharemypost-modal-close')) { |
| 174 |
$modal.fadeOut(200); |
| 175 |
} |
| 176 |
}); |
| 177 |
|
| 178 |
// ===== NETWORK SORTING ===== |
| 179 |
if ($.isFunction($.fn.sortable)) { |
| 180 |
$('.sharemypost-core-sortable').sortable({ |
| 181 |
items: '> label.sharemypost-network-item', |
| 182 |
placeholder: 'ui-sortable-placeholder', |
| 183 |
forcePlaceholderSize: true, |
| 184 |
tolerance: 'pointer', |
| 185 |
cursor: 'move', |
| 186 |
start: function (e, ui) { |
| 187 |
ui.placeholder.height(ui.item.outerHeight()); |
| 188 |
ui.placeholder.width(ui.item.outerWidth()); |
| 189 |
}, |
| 190 |
update: function () { |
| 191 |
let $container = $(this), |
| 192 |
order = $container.find('label.sharemypost-network-item').map(function () { |
| 193 |
return $(this).data('network'); |
| 194 |
}).get(); |
| 195 |
$($container.data('order-input')).val(order.join(',')); |
| 196 |
} |
| 197 |
}); |
| 198 |
} |
| 199 |
|
| 200 |
// Re-init sortable when a sub-panel becomes visible |
| 201 |
$('.sharemypost-sub-tab').on('click', function () { |
| 202 |
setTimeout(function () { |
| 203 |
if ($.isFunction($.fn.sortable)) { |
| 204 |
$('.sharemypost-core-sortable').sortable('refresh'); |
| 205 |
} |
| 206 |
}, 50); |
| 207 |
}); |
| 208 |
|
| 209 |
// ===== NETWORK ACTIVE STATE ===== |
| 210 |
$('.sharemypost-network-checkbox, .sharemypost-network-item input').on('change', function () { |
| 211 |
$(this).closest('.sharemypost-network-item').toggleClass('is-active', this.checked); |
| 212 |
}); |
| 213 |
|
| 214 |
// ===== FORM SUBMISSION - PERSIST TAB STATE ===== |
| 215 |
$('.sharemypost-settings-form').on('submit', function () { |
| 216 |
if (window.localStorage) { |
| 217 |
let $active_main = $main_tabs.filter('.active'); |
| 218 |
let $active_sub = $sub_tabs.filter('.active'); |
| 219 |
if ($active_main.length) { |
| 220 |
window.localStorage.setItem('sharemypost_active_main_tab', $active_main.data('tab')); |
| 221 |
} |
| 222 |
if ($active_sub.length) { |
| 223 |
window.localStorage.setItem('sharemypost_active_sub_tab', $active_sub.data('subtab')); |
| 224 |
} |
| 225 |
} |
| 226 |
}); |
| 227 |
}); |
