1document.addEventListener('DOMContentLoaded', () => { 2 function loadPreview(type) { 3 /* ---------------------------------- 4 Button context 5 ---------------------------------- */ 6 const buttonEl = document.querySelector('.selected-button'); 7 if (!buttonEl) return; 8 let button = buttonEl.getAttribute('id'); 9 10 /* ---------------------------------- 11 Basic values 12 ---------------------------------- */ 13 const alignBtn = document.querySelector('.button-alignment .alignment-button[data-selected="true"]'); 14 const bAlignment = alignBtn ? alignBtn.getAttribute('data-alignment') : undefined; 15 const stickyInput = document.querySelector('.sticky-alignment input'); 16 let sAlignment = stickyInput ? stickyInput.checked : false; 17 const sizeInput = document.querySelector('.button-size .item input:checked'); 18 const bSize = sizeInput ? sizeInput.closest('.item').querySelector('label').innerHTML : undefined; 19 const labelInput = document.querySelector('.button-labels .item input:checked'); 20 let bLabels = labelInput ? labelInput.closest('.item').querySelector('label').getAttribute('id') : undefined; 21 const colorInput = document.querySelector('.button-color .item input:checked'); 22 let bColor = colorInput ? colorInput.closest('.item').querySelector('label').getAttribute('id') : undefined; 23 const countInput = document.querySelector('input.minimum-count'); 24 const bCount = countInput ? countInput.value : undefined; 25 let showTotal = document.querySelector('div.show-total-count input')?.checked || false; 26 let extraSpacing = document.querySelector('div.extra-spacing input')?.checked || false; 27 let showMobile = document.querySelector('div.show-on-mobile input')?.checked || false; 28 let showDesktop = document.querySelector('div.show-on-desktop input')?.checked || false; 29 const vertAlignVal = document.querySelector('.vertical-alignment')?.value || 0; 30 const vertAlign = vertAlignVal + 'px'; 31 const mobileBreak = document.querySelector('.mobile-breakpoint')?.value; 32 let spacing = 0; 33 let bRadius = (document.querySelector('#radius-selector')?.value || 0) + 'px'; 34 let language = document.querySelector('#st-language option:checked')?.value; 35 36 /* ---------------------------------- 37 Smart Share 38 ---------------------------------- */ 39 let smartShareCountEl = document.querySelector('#social-service-count'); 40 let smartShareButton = document.querySelector('.smart-share.engage.network-type'); 41 if (button) { 42 const base = button.toLowerCase().replace(' share', ''); 43 smartShareCountEl = document.querySelector('.' + base + '-show #social-service-count'); 44 smartShareButton = document.querySelector('.' + base + '-show .smart-share.engage.network-type'); 45 } 46 const smartShareCount = smartShareCountEl ? smartShareCountEl.value : 6; 47 48 /* ---------------------------------- 49 Shopify detection 50 ---------------------------------- */ 51 52 let networks = []; 53 const base = button.toLowerCase().replace(' share', ''); 54 const radiusInput = document.querySelector('.' + base + '-show.range-field input'); 55 if (radiusInput) bRadius = radiusInput.value + 'px'; 56 const langSelect = document.querySelector('.' + base + '-show.select-field select option:checked'); 57 if (langSelect) language = langSelect.value; 58 showTotal = document.querySelector('.' + base + '-show.show-total-count input')?.checked || false; 59 const labelShopify = document.querySelector('.' + base + '-show.button-labels .item input:checked'); 60 if (labelShopify) { 61 bLabels = labelShopify.closest('.item').querySelector('label').getAttribute('data-type'); 62 } 63 const colorShopify = document.querySelector('.' + base + '-show.button-color .item input:checked'); 64 if (colorShopify) { 65 bColor = colorShopify.closest('.item').querySelector('label').getAttribute('id'); 66 } 67 if ('initial' === type) { 68 const selected = document.querySelectorAll('.share-buttons[data-button="' + base + '"] .share-button[data-selected="true"]'); 69 selected.forEach(el => { 70 networks.push(el.getAttribute('data-network')); 71 }); 72 } else { 73 const previewSelector = '#st-' + button.toLowerCase().replace(' ', '-') + '-button-preview .st-btn'; 74 document.querySelectorAll(previewSelector).forEach(el => { 75 networks.push(el.getAttribute('data-network')); 76 }); 77 } 78 if (button === 'Inline Share') button = 'inline-share'; 79 if (button === 'Sticky Share') button = 'sticky-share'; 80 81 /* ---------------------------------- 82 Alignment + sizing 83 ---------------------------------- */ 84 sAlignment = sAlignment ? 'right' : 'left'; 85 let size, fontSize, padding; 86 if (bSize === 'Small') { 87 size = 32; 88 fontSize = 11; 89 padding = 8; 90 document.querySelector('#radius-selector')?.setAttribute('max', 16); 91 } 92 if (bSize === 'Medium') { 93 size = 40; 94 fontSize = 12; 95 padding = 10; 96 document.querySelector('#radius-selector')?.setAttribute('max', 20); 97 } 98 if (bSize === 'Large' || button === 'sticky-share') { 99 size = 48; 100 fontSize = 16; 101 padding = 12; 102 document.querySelector('#radius-selector')?.setAttribute('max', 26); 103 } 104 spacing = 8; 105 106 /* ---------------------------------- 107 Config build 108 ---------------------------------- */
109 let config; 110 if (button === 'inline-share') { 111 config = { 112 alignment: 'center', 113 color: 'social', 114 enabled: true, 115 labels: bLabels, 116 min_count: 10, 117 padding, 118 font_size: fontSize, 119 radius: 4, 120 networks, 121 show_total: showTotal, 122 show_mobile_buttons: true, 123 size, 124 language: 'en' 125 }; 126 } else { 127 config = { 128 alignment: sAlignment, 129 color: 'social', 130 enabled: true, 131 labels: bLabels, 132 min_count: 10, 133 radius: 4, 134 networks, 135 mobile_breakpoint: 1024, 136 top: 160, 137 padding, 138 size, 139 font_size: fontSize, 140 show_mobile: true, 141 show_total: showTotal, 142 hide_desktop: false, 143 show_mobile_buttons: true, 144 spacing: 0, 145 language: 'en' 146 }; 147 } 148 config.container = 'st-' + button.toLowerCase() + '-button-preview'; 149 document.getElementById(config.container).innerHTML = ''; 150 window.configHTML = config; 151 152 /* ---------------------------------- 153 Load ShareThis 154 ---------------------------------- */ 155 window.__sharethis__.href = 'https://www.sharethis.com/'; 156 window.onShareThisLoaded = () => { 157 window.__sharethis__.load(button.toLowerCase() + '-buttons', config); 158 }; 159 window.__sharethis__.load(button.toLowerCase() + '-buttons', config); 160 getHTMLCode(button.toLowerCase(), 'false'); 161 const container = document.querySelector('[id*=st-el]'); 162 let dragged = null; 163 container.querySelectorAll('.st-btn').forEach(btn => { 164 btn.draggable = true; 165 btn.addEventListener('dragstart', e => { 166 dragged = btn; 167 btn.classList.add('dragging'); 168 }); 169 btn.addEventListener('dragend', () => { 170 dragged.classList.remove('dragging'); 171 dragged = null; 172 const networks = []; 173 container.querySelectorAll('.st-btn').forEach(el => networks.push(el.dataset.network)); 174 loadPreview(); 175 }); 176 }); 177 container.addEventListener('dragover', e => { 178 e.preventDefault(); 179 const target = e.target.closest('.st-btn'); 180 if (!target || target === dragged) return; 181 const rect = target.getBoundingClientRect(); 182 const next = e.clientX - rect.left > rect.width / 2; 183 container.insertBefore(dragged, next ? target.nextSibling : target); 184 }); 185 } 186 187 /* ---------------------------------- 188 Back to create account 189 ---------------------------------- */ 190 const backBtn = document.getElementById('back-to-create'); 191 if (backBtn) { 192 backBtn.addEventListener('click', () => { 193 const login = document.querySelector('.st-login-wrap'); 194 const create = document.querySelector('.create-account-wrap'); 195 if (login) login.style.display = 'none'; 196 if (create) create.style.display = 'inline-block'; 197 }); 198 } 199 200 /* ---------------------------------- 201 Shopify back button 202 ---------------------------------- */ 203 const shopifyBack = document.querySelector('.shopify-back-button'); 204 if (shopifyBack) { 205 shopifyBack.addEventListener('click', e => { 206 e.preventDefault(); 207 const choices = document.getElementById('product-choices'); 208 const configs = document.getElementById('shopify-button-configs'); 209 const heroColumn = document.querySelector('.hero-info-column'); 210 const getTheCode = document.querySelector('.get-the-code-column'); 211 const codeSection = document.querySelector('.platform-installation'); 212 const heroImage = codeSection.parentNode.querySelector('figure'); 213 if (true === codeSection.classList.contains('engage')) { 214 document.querySelectorAll('.' + getTheCode.dataset?.button + '-share-default-preview').forEach(stickyPreview => { 215 stickyPreview.classList.add('engage'); 216 }); 217 } 218 if (heroImage && false === codeSection.classList.contains('engage')) heroImage.style.display = 'block'; 219 if (getTheCode) getTheCode.style.flexBasis = '55%'; 220 if (heroColumn) heroColumn.style.display = 'block'; 221 if (choices) choices.style.display = 'block'; 222 if (codeSection) codeSection.style.removeProperty('display'); 223 if (configs) configs.style.display = 'none'; 224 }); 225 } 226 227 /* ---------------------------------- 228 Switch button config 229 ---------------------------------- */ 230 const configButtons = document.querySelectorAll('.choose-config, .customize-button'); 231 for (let i = 0; i < configButtons.length; i++) { 232 configButtons[i].addEventListener('click', e => { 233 e.preventDefault(); 234 const buttonSwitch = e.currentTarget.dataset.button; 235 const shareConfig = document.querySelector('.share-buttons-config'); 236 const followConfig = document.querySelector('.follow-buttons-config'); 237 const codeSection = document.querySelector('.platform-installation'); 238 const heroImage = codeSection.parentNode.querySelector('figure'); 239 const inlineShow = document.querySelectorAll('.inline-show'); 240 const stickyShow = document.querySelectorAll('.sticky-show'); 241 const followShow = document.querySelectorAll('.follow-show'); 242 const previewTitle = document.querySelector('.preview-title'); 243 const choices = document.getElementById('product-choices'); 244 const configs = document.getElementById('shopify-button-configs'); 245 document.querySelectorAll('.sticky-share-default-preview').forEach(stickyPreview => { 246 stickyPreview.classList.remove('engage'); 247 }); 248 document.querySelectorAll('.inline-share-default-preview').forEach(inlinePreview => { 249 inlinePreview.classList.remove('engage'); 250 }); 251 if (choices) choices.style.display = 'none'; 252 if (configs) configs.style.display = 'block'; 253 if (codeSection) codeSection.style.display = 'block'; 254 const heroColumn = document.querySelector('.hero-info-column'); 255 const getTheCode = document.querySelector('.get-the-code-column'); 256 getTheCode.setAttribute('data-button', buttonSwitch); 257 if (getTheCode) getTheCode.style.flexBasis = '100%'; 258 if (heroColumn) heroColumn.style.display = 'none'; 259 if (heroImage) heroImage.style.display = 'none'; 260 for (let j = 0; j < inlineShow.length; j++) inlineShow[j].style.display = 'none'; 261 for (let j = 0; j < stickyShow.length; j++) stickyShow[j].style.display = 'none'; 262 for (let j = 0; j < followShow.length; j++) followShow[j].style.display = 'none'; 263 if (shareConfig) shareConfig.style.display = 'none'; 264 if (followConfig) followConfig.style.display = 'none'; 265 let capButton = ''; 266 if (buttonSwitch === 'inline') { 267 capButton = 'Inline Share'; 268 if (shareConfig) shareConfig.style.display = 'block'; 269 for (let j = 0; j < inlineShow.length; j++) inlineShow[j].style.display = 'inline-block'; 270 } 271 if (buttonSwitch === 'sticky') { 272 capButton = 'Sticky Share'; 273 if (shareConfig) shareConfig.style.display = 'block'; 274 for (let j = 0; j < stickyShow.length; j++) stickyShow[j].style.display = 'inline-block'; 275 } 276 if (buttonSwitch === 'follow') { 277 capButton = 'inline-follow'; 278 if (followConfig) followConfig.style.display = 'block'; 279 for (let j = 0; j < followShow.length; j++) followShow[j].style.display = 'inline-block'; 280 } 281 if (previewTitle) { 282 previewTitle.innerHTML = buttonSwitch + ' Buttons Preview:'; 283 } 284 const selected = document.querySelector('.selected-button'); 285 if (selected) selected.id = capButton; 286 loadPreview('initial'); 287 }); 288 } 289 const ranges = document.querySelectorAll('.range-field'); 290 if (ranges) {
291 ranges.forEach(range => { 292 range.addEventListener('change', () => { 293 loadPreview(); 294 }); 295 }); 296 } 297 const levers = document.querySelectorAll('.switch'); 298 if (levers) { 299 levers.forEach(lever => { 300 lever.addEventListener('click', () => { 301 loadPreview(); 302 }); 303 }); 304 } 305 306 /* ---------------------------------- 307 Radio buttons / labels 308 ---------------------------------- */ 309 const labels = document.querySelectorAll('.st-radio-config .item label'); 310 labels.forEach(label => { 311 label.addEventListener('click', e => { 312 const input = e.target.previousElementSibling; 313 if (!input) return; 314 if (!input.checked) { 315 const radioWrap = label.closest('.st-radio-config'); 316 const radios = radioWrap.querySelectorAll('input'); 317 radios.forEach(radio => { 318 radio.checked = false; 319 }); 320 input.checked = true; 321 } 322 loadPreview(''); 323 }); 324 }); 325 326 /* ---------------------------------- 327 Copy buttons 328 ---------------------------------- */ 329 const copyBasic = document.querySelector('.copy-basic'); 330 copyBasic.addEventListener('click', e => { 331 const field = document.getElementById('basic-st-copy-section'); 332 if (!field) return; 333 field.select(); 334 document.execCommand('copy'); 335 let copyCode = e.target.nextElementSibling; 336 if (false === copyCode.classList.contains('copy-message')) { 337 copyCode = copyCode.nextElementSibling; 338 } 339 copyCode.classList.add('engage'); 340 setTimeout(() => { 341 copyCode.classList.remove('engage'); 342 }, 500); 343 }); 344 345 /* ---------------------------------- 346 Alignment buttons 347 ---------------------------------- */ 348 const alignmentButtons = document.querySelectorAll('.button-alignment .alignment-button'); 349 for (let i = 0; i < alignmentButtons.length; i++) { 350 alignmentButtons[i].addEventListener('click', e => { 351 for (let j = 0; j < alignmentButtons.length; j++) { 352 alignmentButtons[j].dataset.selected = 'false'; 353 } 354 e.currentTarget.dataset.selected = 'true'; 355 loadPreview(''); 356 }); 357 } 358 359 /* ---------------------------------- 360 Tooltip 361 ---------------------------------- */ 362 const tooltips = document.querySelectorAll('.tooltip-icon'); 363 for (let i = 0; i < tooltips.length; i++) { 364 tooltips[i].addEventListener('mouseover', e => { 365 const msg = document.querySelector('.tooltip-message-over'); 366 if (!msg) return; 367 const rect = e.target.getBoundingClientRect(); 368 msg.innerHTML = e.target.dataset.tooltip; 369 msg.style.left = rect.left + 20 + 'px'; 370 msg.style.top = rect.top - 20 + 'px'; 371 msg.style.display = 'block'; 372 }); 373 tooltips[i].addEventListener('mouseleave', () => { 374 const msg = document.querySelector('.tooltip-message-over'); 375 if (msg) msg.style.display = 'none'; 376 }); 377 } 378 379 /* ---------------------------------- 380 Sticky preview scroll 381 ---------------------------------- */ 382 window.addEventListener('scroll', () => { 383 const wrap = document.querySelector('.custom-wrap'); 384 if (!wrap) return; 385 const preview = document.querySelector('.sharethis-selected-networks'); 386 if (!preview) return; 387 if (window.scrollY >= wrap.offsetTop) { 388 preview.classList.add('sharethis-prev-stick'); 389 } else { 390 preview.classList.remove('sharethis-prev-stick'); 391 } 392 }); 393 document.body.addEventListener('click', e => { 394 const target = e.target.closest('.copy-shopify'); 395 if (!target) return; 396 if (typeof mixpanel !== 'undefined') { 397 mixpanel.track('Onboarding CopyCode'); 398 } 399 const field = document.getElementById('shopify-div'); 400 if (!field) return; 401 field.select(); 402 document.execCommand('copy'); 403 let copyCode = e.target.nextElementSibling; 404 if (false === copyCode.classList.contains('copy-message')) { 405 copyCode = copyCode.nextElementSibling; 406 } 407 if (false === copyCode.classList.contains('copy-message')) { 408 copyCode = copyCode.nextElementSibling; 409 } 410 copyCode.classList.add('engage'); 411 setTimeout(() => { 412 copyCode.classList.remove('engage'); 413 }, 500); 414 }); 415 const inlineGenerates = document.querySelectorAll('.generate-inline-html'); 416 const stickyGenerates = document.querySelectorAll('.generate-sticky-html'); 417 const getTheCode = document.querySelector('.platform-installation'); 418 const heroImage = getTheCode.parentNode.querySelector('figure'); 419 if (inlineGenerates && getTheCode && heroImage) {
420 inlineGenerates.forEach(inlineGenerate => { 421 inlineGenerate.addEventListener('click', () => { 422 getHTMLCode('inline-share', inlineGenerate.dataset?.noconfig); 423 getTheCode.classList.add('engage'); 424 heroImage.style.display = 'none'; 425 document.querySelectorAll('.sticky-share-default-preview').forEach(stickyPreview => { 426 stickyPreview.classList.remove('engage'); 427 }); 428 document.querySelectorAll('.inline-share-default-preview').forEach(inlinePreview => { 429 inlinePreview.classList.add('engage'); 430 }); 431 }); 432 }); 433 } 434 if (stickyGenerates && getTheCode && heroImage) { 435 stickyGenerates.forEach(stickyGenerate => { 436 stickyGenerate.addEventListener('click', () => { 437 getHTMLCode('sticky-share', stickyGenerate.dataset?.noconfig); 438 getTheCode.classList.add('engage'); 439 heroImage.style.display = 'none'; 440 document.querySelectorAll('.sticky-share-default-preview').forEach(stickyPreview => { 441 stickyPreview.classList.add('engage'); 442 }); 443 document.querySelectorAll('.inline-share-default-preview').forEach(inlinePreview => { 444 inlinePreview.classList.remove('engage'); 445 }); 446 }); 447 }); 448 } 449 function getHTMLCode(type, noconfig) { 450 let finalHTML = ''; 451 const startHTMLDiv = '<!-- ShareThis BEGINS -->\n<div class="sharethis-share-buttons" data-type="' + type + '-buttons"'; 452 let attrs = ''; 453 let inner = ''; 454 if ('true' === noconfig) { 455 finalHTML = startHTMLDiv + '>\n<span data-network="facebook"></span>\n<span data-network="twitter"></span>\n<span data-network="linkedin"></span>\n<span data-network="email"></span>\n<span data-network="sharethis"></span>\n</div>'; 456 } else { 457 for (const key in window.configHTML) { 458 if ('labels' !== key && 'size' !== key && 'show_total' !== key && 'alignment' !== key && 'networks' !== key) continue; 459 if ('alignment' === key && 'sticky-share' !== type || 'sticky-share' === type && 'size' === key) { 460 continue; 461 } 462 const value = window.configHTML[key]; 463 if (value === undefined || value === null) continue; 464 if (key === 'networks' && Array.isArray(value)) { 465 value.forEach(network => { 466 inner += `<span data-network="${network}"></span>\n`; 467 }); 468 continue; 469 } 470 const dataKey = 'data-' + key; 471 let attrValue = value; 472 if (typeof attrValue === 'boolean') attrValue = attrValue ? 'true' : 'false'; 473 if ('data-size' === dataKey) { 474 switch (attrValue) { 475 case 32: 476 attrValue = 'small'; 477 break; 478 case 40: 479 attrValue = 'medium'; 480 break; 481 case 48: 482 attrValue = 'large'; 483 break; 484 default: 485 attrValue = 'small'; 486 } 487 } 488 attrs += ` ${dataKey}="${String(attrValue)}"`; 489 } 490 finalHTML = `${startHTMLDiv}${attrs}>\n${inner}</div>`; 491 } 492 const codeOutput = document.querySelector('textarea#shopify-div'); 493 if (codeOutput) { 494 codeOutput.value = finalHTML + '\n<!-- ShareThis ENDS -->'; 495 } 496 } 497 document.body.addEventListener('click', function (event) { 498 const button = event.target.closest('.share-config .share-buttons .share-button'); 499 if (!button) return; 500 const selection = button.getAttribute('data-selected'); 501 const network = button.getAttribute('data-network'); 502 if (selection === 'true') { 503 button.setAttribute('data-selected', 'false'); 504 const selectedBtn = document.querySelector('.sharethis-selected-networks > div div[data-network="' + network + '"]'); 505 if (selectedBtn) { 506 selectedBtn.remove(); 507 } 508 const urlItem = document.querySelector('#st-network-urls .center-align[data-network="' + network + '"]'); 509 if (urlItem) { 510 urlItem.setAttribute('data-selected', 'false'); 511 } 512 } else { 513 button.setAttribute('data-selected', 'true'); 514 const container = document.querySelector('.sharethis-selected-networks'); 515 const buttonContainer = document.querySelector('#st-' + container.id.toLowerCase().replace(' ', '-') + '-button-preview'); 516 if (buttonContainer && buttonContainer.offsetParent !== null) { 517 const div = document.createElement('div'); 518 div.className = 'st-btn'; 519 div.setAttribute('data-network', network); 520 div.style.display = 'inline-block'; 521 buttonContainer.appendChild(div); 522 } 523 const urlItem = document.querySelector('#st-network-urls .center-align[data-network="' + network + '"]'); 524 if (urlItem) { 525 urlItem.setAttribute('data-selected', 'true'); 526 } 527 } 528 loadPreview(); 529 }); 530});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.