// Custom "Social" tool for the Unlayer editor. // // The native social tool is disabled in our Unlayer project's server-side // configuration (project 202584) and tools.social.enabled in unlayer.init // cannot override that, so we register our own tool instead. This file is // injected into the editor iframe as an inline customJS string (URL-based // customJS is fetched by Unlayer's servers, which cannot reach localhost). // // Architecture: // * Links are stored as an ordered array on the `links` option: // [{ key: 'facebook', url: 'https://...' }, ...]. Array order == render // order. The legacy flat shape (values.facebook, values.instagram, ...) // is still read so old saved designs keep rendering. // * A custom property editor (`ms_social_links`) renders that array as a // drag-to-reorder list with per-row remove plus an "add network" picker, // replacing the old fixed set of eight text fields. // * All panel copy comes from the I18N object below, which the Rails helper // `unlayer_custom_tools_js` substitutes server-side from the request // locale. Brand names and URL placeholders are intentionally untranslated. // * The same helper substitutes PREFILL with the firm's brand kit social // links, so a newly dropped block starts filled in and the panel can offer // a one-click "use my brand links" action. // * Exporters emit an empty string when nothing is configured, so English // placeholder copy can never leak into a real email. // // Icons come from Unlayer's public CDN (the same assets the native tool // uses), so exported emails render identically to native social blocks. The // exception is whatsapp, whose CDN asset is a circle-inside-a-circle that // clashes with every other network; we serve our own set for it (see // SELF_HOSTED_ICONS). Those PNGs live in public/ms_social_icons/whatsapp/ and // are drawn from the Font Awesome Free 6.7.2 brands "whatsapp" glyph // (Icons: CC BY 4.0, https://fontawesome.com/license/free), redrawn as a solid // bubble so it reads the same way every other network's glyph does. (function () { var I18N = {"label":"Social","links_title":"Social links","style_title":"Style","icon_style":"Icon style","style_circle":"Circle (brand colors)","style_circle_black":"Circle black","style_circle_white":"Circle white","style_rounded":"Rounded","style_squared":"Squared","icon_size":"Icon size","spacing":"Spacing","alignment":"Alignment","add_network":"Add network","remove":"Remove","drag_reorder":"Drag to reorder","empty_state":"Add social links from the panel on the right","brand_use":"Use my brand links","brand_hint":"Save your social links once in your brand kit and every new Social block starts filled in.","brand_setup":"Set up your brand kit","brand_refresh":"Already set it up? Refresh","brand_found":"Brand links found","brand_in_use":"Using brand links"}; // { links: { facebook: 'https://...', ... }, brandKitUrl, refreshUrl, // refreshToken }. Link keys are already mapped to the network keys below // (the brand kit stores "twitter" where this tool uses "x"). var PREFILL = {"links":{},"brandKitUrl":"https://app.mailsoftly.com/en/settings/brand_kit/edit","refreshUrl":null,"refreshToken":null}; var PREFILL_LINKS = (PREFILL && PREFILL.links) || {}; var BRAND_KIT_URL = (PREFILL && PREFILL.brandKitUrl) || ''; var REFRESH_URL = (PREFILL && PREFILL.refreshUrl) || ''; var REFRESH_TOKEN = (PREFILL && PREFILL.refreshToken) || ''; var ICON_BASE = 'https://cdn.tools.unlayer.com/social/icons/'; // Networks we serve ourselves instead of pulling from Unlayer's CDN, laid out // as /.png. Hardcoded to production and absolute on // purpose: this URL ends up in mailed HTML, where a relative or localhost URL // would break in every inbox. It is also why the PANEL never loads these over // the network - see iconMarkup: the editor iframe is https, so a dev host's // http image is blocked as mixed content and shows as a broken thumbnail. var MS_ICON_BASE = 'https://app.mailsoftly.com/ms_social_icons/'; // Key -> panel renderer. Presence in this map also routes iconUrl (canvas and // export) to MS_ICON_BASE instead of Unlayer's CDN. var SELF_HOSTED_ICONS = { whatsapp: whatsappSvg }; var ICON_TYPES = ['circle', 'circle-black', 'circle-white', 'rounded', 'squared']; var ALIGNMENTS = ['left', 'center', 'right']; // Order here is the order of the "add network" picker. Every key below is // verified to exist on the Unlayer CDN for all five icon styles; do not add // keys without checking (e.g. twitch and website 404). var NETWORKS = [ { key: 'facebook', label: 'Facebook', placeholder: 'https://facebook.com/...' }, { key: 'instagram', label: 'Instagram', placeholder: 'https://instagram.com/...' }, { key: 'x', label: 'X (Twitter)', placeholder: 'https://x.com/...' }, { key: 'linkedin', label: 'LinkedIn', placeholder: 'https://linkedin.com/...' }, { key: 'youtube', label: 'YouTube', placeholder: 'https://youtube.com/...' }, { key: 'tiktok', label: 'TikTok', placeholder: 'https://tiktok.com/...' }, { key: 'whatsapp', label: 'WhatsApp', placeholder: 'https://wa.me/...' }, { key: 'telegram', label: 'Telegram', placeholder: 'https://t.me/...' }, { key: 'pinterest', label: 'Pinterest', placeholder: 'https://pinterest.com/...' }, { key: 'snapchat', label: 'Snapchat', placeholder: 'https://snapchat.com/...' }, { key: 'threads', label: 'Threads', placeholder: 'https://threads.net/...' }, { key: 'discord', label: 'Discord', placeholder: 'https://discord.gg/...' }, { key: 'reddit', label: 'Reddit', placeholder: 'https://reddit.com/...' }, { key: 'medium', label: 'Medium', placeholder: 'https://medium.com/...' }, { key: 'github', label: 'GitHub', placeholder: 'https://github.com/...' }, { key: 'email', label: 'Email', placeholder: 'mail@example.com' } ]; // Order the pre-array tool stored its URLs in, used to migrate old designs. var LEGACY_KEYS = [ 'facebook', 'instagram', 'x', 'linkedin', 'youtube', 'tiktok', 'whatsapp', 'pinterest' ]; // Used for a brand-new block only when the firm has no brand kit links. var FALLBACK_LINKS = [ { key: 'facebook', url: 'https://www.facebook.com/' }, { key: 'instagram', url: 'https://www.instagram.com/' }, { key: 'x', url: 'https://x.com/' } ]; var NETWORK_BY_KEY = {}; for (var n = 0; n < NETWORKS.length; n++) { NETWORK_BY_KEY[NETWORKS[n].key] = NETWORKS[n]; } function trim(s) { return String(s == null ? '' : s).replace(/^\s+|\s+$/g, ''); } // The brand kit's links in NETWORKS order, so the prefill and the "use my // brand links" button both produce the picker's canonical ordering. function brandLinks() { var out = []; for (var i = 0; i < NETWORKS.length; i++) { var url = trim(PREFILL_LINKS[NETWORKS[i].key]); if (url) out.push({ key: NETWORKS[i].key, url: url }); } return out; } // Unlayer reads defaultValue only when a block is created, so seeding it from // the brand kit gives a freshly dropped Social block the firm's real links // without ever rewriting a saved design's values. var DEFAULT_LINKS = brandLinks(); if (!DEFAULT_LINKS.length) DEFAULT_LINKS = FALLBACK_LINKS; function esc(s) { return String(s == null ? '' : s) .replace(/&/g, '&') .replace(/"/g, '"') .replace(//g, '>'); } function tryParseJson(s) { try { return JSON.parse(s); } catch (e) { return null; } } function networkFor(key) { return NETWORK_BY_KEY[String(key || '')] || null; } // Single funnel for every icon URL (the canvas viewer and the exported email // markup) so a self-hosted override can never apply to one but miss the other. function iconUrl(iconType, key) { if (SELF_HOSTED_ICONS[key]) return MS_ICON_BASE + key + '/' + iconType + '.png'; return ICON_BASE + iconType + '/' + key + '.png'; } // --------------------------------------------------------------------------- // Panel icon markup // // The panel is chrome, not content, so it must never depend on our own asset // host: the editor iframe is served over https, which blocks a dev host's // http:// image as mixed content, and on production the PNGs only exist once // they are deployed. Networks we host ourselves are therefore drawn as inline // SVG in the panel. The canvas and the exported email keep using the PNG URLs, // where an absolute production URL is exactly what is wanted. // // WhatsApp glyph: Font Awesome Free 6.7.2 brands "whatsapp" (Icons: CC BY 4.0, // https://fontawesome.com/license/free), fitted to a 0 0 64 64 box at the same // glyph/canvas ratio as the CDN icons. WA_GLYPH is the bubble silhouette // followed by the handset: under fill-rule="evenodd" the handset punches // through to whatever is behind it, which is how the real mark reads. // --------------------------------------------------------------------------- var WA_GREEN = '#25D366'; var WA_GLYPH = 'M46.94 16.87C42.95 12.87 37.64 10.67 31.99 10.67C20.33 10.67 10.85 20.15 10.85 31.81C10.85 35.53 11.82 39.17 13.67 42.38L10.67 53.33L21.88 50.39C24.96 52.08 28.44 52.96 31.98 52.96L31.99 52.96C43.64 52.96 53.33 43.48 53.33 31.82C53.33 26.17 50.93 20.87 46.94 16.87ZM41.63 36.24C41.1 35.97 38.5 34.7 38.02 34.52C37.53 34.34 37.18 34.26 36.83 34.79C36.48 35.32 35.47 36.5 35.15 36.87C34.85 37.22 34.53 37.27 34.01 37C30.9 35.45 28.87 34.23 26.82 30.71C26.28 29.78 27.36 29.85 28.37 27.83C28.54 27.48 28.46 27.17 28.32 26.9C28.19 26.64 27.13 24.04 26.7 22.98C26.27 21.95 25.83 22.1 25.5 22.08C25.2 22.06 24.85 22.06 24.5 22.06C24.14 22.06 23.57 22.19 23.09 22.71C22.6 23.25 21.24 24.52 21.24 27.12C21.24 29.72 23.13 32.24 23.39 32.59C23.66 32.94 27.11 38.28 32.42 40.57C35.77 42.02 37.09 42.14 38.76 41.9C39.78 41.74 41.89 40.62 42.32 39.38C42.76 38.14 42.76 37.09 42.63 36.87C42.5 36.63 42.15 36.5 41.63 36.24Z'; // Tile shapes, all full-bleed in the same 64-unit box. The rounded radius is // measured off the CDN's rounded/*.png (12.5 of 144). var WA_TILES = { 'circle': 'M0 32a32 32 0 1 0 64 0a32 32 0 1 0-64 0Z', 'rounded': 'M5.6 0h52.8a5.6 5.6 0 0 1 5.6 5.6v52.8a5.6 5.6 0 0 1-5.6 5.6H5.6A5.6 5.6 0 0 1 0 58.4V5.6A5.6 5.6 0 0 1 5.6 0Z', 'squared': 'M0 0h64v64H0Z' }; var WA_FILLS = { 'circle': WA_GREEN, 'circle-black': '#000000', 'rounded': WA_GREEN, 'squared': WA_GREEN }; // cls / alt / inlineStyle are all optional: the panel passes a class, the // canvas viewer passes the same inline style its siblings carry. function whatsappSvg(iconType, size, cls, alt, inlineStyle) { var head = ''; } var tile = WA_TILES[iconType === 'circle-black' ? 'circle' : iconType] || WA_TILES.circle; return head + '' + '' + ''; } // The one entry point every panel render path uses. Self-hosted networks come // back as inline SVG in the requested style; everything else stays an // off Unlayer's CDN, which the panel can always reach. function iconMarkup(iconType, key, size, cls, alt) { var style = ICON_TYPES.indexOf(iconType) >= 0 ? iconType : 'circle'; // A white tile is invisible on the panel's white background, so those get a // faint chip behind them. Cosmetic, panel only. var classes = (cls || '') + (style === 'circle-white' ? ' msl-onlight' : ''); classes = trim(classes); var renderer = SELF_HOSTED_ICONS[key]; if (renderer) return renderer(style, size, classes, alt); return ''; } function normalizeLinks(value) { var links = Array.isArray(value) ? value : (typeof value === 'string' ? tryParseJson(value) : null) || []; var out = []; for (var i = 0; i < links.length; i++) { var link = links[i]; if (!link || typeof link !== 'object') continue; if (!networkFor(link.key)) continue; out.push({ key: String(link.key), url: link.url == null ? '' : String(link.url) }); } return out; } // Reads the links array off a tool's values, falling back to the legacy flat // shape (values.facebook = 'https://...') used by designs saved before the // array rewrite. function resolveLinks(values) { if (!values) return []; if (Array.isArray(values.links) || typeof values.links === 'string') { return normalizeLinks(values.links); } var out = []; for (var i = 0; i < LEGACY_KEYS.length; i++) { var key = LEGACY_KEYS[i]; var url = values[key]; if (typeof url === 'string' && url.trim()) out.push({ key: key, url: url }); } return out; } // True when the block already carries every brand kit link at its exact URL. // Deliberately a subset check: extra networks on the block are the user's own // additions and do not break the match. Any brand link that is missing, or // present with a different URL, makes this false and brings the apply button // back. function brandLinksApplied(links) { var brand = brandLinks(); if (!brand.length) return false; var urlByKey = {}; for (var i = 0; i < links.length; i++) { urlByKey[links[i].key] = trim(links[i].url); } for (var b = 0; b < brand.length; b++) { if (urlByKey[brand[b].key] !== brand[b].url) return false; } return true; } // Applies the brand kit over an existing block's links: networks the kit // knows about are overwritten (the user clicked the button deliberately, so a // stale URL should lose) and missing ones are appended in picker order. Rows // for networks the kit has no link for are left exactly as they are. function applyBrandLinks(links) { var next = []; var indexByKey = {}; for (var i = 0; i < links.length; i++) { next.push({ key: links[i].key, url: links[i].url }); indexByKey[links[i].key] = i; } var brand = brandLinks(); for (var b = 0; b < brand.length; b++) { var at = indexByKey[brand[b].key]; if (at === undefined) { next.push({ key: brand[b].key, url: brand[b].url }); } else { next[at].url = brand[b].url; } } return next; } function normalizeUrl(key, url) { var value = String(url == null ? '' : url).trim(); if (!value) return ''; if (key === 'email') { return /^mailto:/i.test(value) ? value : 'mailto:' + value; } return /^https?:\/\//i.test(value) ? value : 'https://' + value; } // --------------------------------------------------------------------------- // Rendering / export // --------------------------------------------------------------------------- function msSocialHtml(values, forViewer) { values = values || {}; var iconType = ICON_TYPES.indexOf(values.iconType) >= 0 ? values.iconType : 'circle'; if (forViewer) notePanelIconType(iconType); var size = parseInt(values.iconSize, 10) || 32; var spacing = parseInt(values.spacing, 10); if (isNaN(spacing) || spacing < 0) spacing = 10; var pad = Math.round(spacing / 2); var align = ALIGNMENTS.indexOf(values.align) >= 0 ? values.align : 'center'; var links = resolveLinks(values); var cells = []; for (var i = 0; i < links.length; i++) { var net = networkFor(links[i].key); if (!net) continue; var url = normalizeUrl(net.key, links[i].url); if (!url) continue; // Identical box metrics either way, so an inline SVG lines up with the // CDN icons beside it: same width/height attributes, same // display:block, same computed size. var iconStyle = 'display:block;border:0;outline:none;' + 'width:' + size + 'px;height:' + size + 'px;'; var renderer = SELF_HOSTED_ICONS[net.key]; var icon; if (forViewer && renderer) { // Canvas only. The hosted PNG is fine in a mailbox but not here: it is // absolute to production, so it 404s until deployed, and the editor // iframe is https, so a dev host's copy would be blocked as mixed // content regardless. The exporters below keep the hosted URL, because // Gmail and most clients will not render inline SVG. icon = renderer(iconType, size, '', net.label, iconStyle); } else { icon = ' ' + esc(net.label) + '

'; } cells.push( '' + '' + '' + '

' + '' + icon + '' + '

' + '' ); } if (!cells.length) { // Exporters must stay empty: placeholder copy would otherwise be sent to // real recipients. Only the in-editor viewer shows the hint. if (!forViewer) return ''; return '

' + esc(I18N.empty_state) + '

'; } // MJML-style horizontal social markup: each icon sits in its own one-cell // inline-table so modern clients wrap the row when it exceeds the content // width (16 icons at 32px overflow a 600px email). Outlook ignores // display:inline-table, so the mso conditional comments hand it a single // outer table instead; padding lives only on the inner cell either way. // // The ms-soc/ms-soc-td classes on the ghost fragments exist for the OAuth // send lanes: Gmail API and Microsoft Graph strip every HTML comment, so // OutlookSafeEmailBody reveals these blocks into real markup first, and its // mark_tags stamps class="msr" on any revealed table/td that has no class // of its own. td.msr turns display:block on phones (the column-stacking // safety net), which would pile the icons vertically - a class of our own // keeps msr, and with it the stacking rule, off these cells. return '

' + '' + cells.join('') + '' + '

'; } // --------------------------------------------------------------------------- // Custom property editor: drag-to-reorder link list + network picker // --------------------------------------------------------------------------- var WIDGET_CSS_ID = 'ms-social-widget-css'; var WIDGET_CSS = [ '.msl-wrap{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:#111827;}', '.msl-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:5px 6px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;box-sizing:border-box;}', '.msl-row:last-child{margin-bottom:0;}', '.msl-row:hover{border-color:#d1d5db;background:#fafafa;}', '.msl-row.msl-dragging{opacity:.45;}', '.msl-row.msl-drop-before{box-shadow:inset 0 2px 0 0 #2563eb;}', '.msl-row.msl-drop-after{box-shadow:inset 0 -2px 0 0 #2563eb;}', '.msl-handle{flex:0 0 auto;cursor:grab;color:#9ca3af;font-size:14px;line-height:1;padding:2px 1px;-webkit-user-select:none;user-select:none;}', '.msl-handle:hover{color:#6b7280;}', '.msl-handle:active{cursor:grabbing;}', '.msl-icon{flex:0 0 auto;width:22px;height:22px;display:block;border:0;}', // Self-hosted networks draw as inline SVG here, so the white-tile style // would vanish against the panel. A faint chip keeps it readable. '.msl-onlight{background:#f3f4f6;border-radius:50%;}', '.msl-url{flex:1 1 auto;min-width:0;border:1px solid #e5e7eb;border-radius:4px;padding:5px 7px;font-size:12px;font-family:inherit;color:#111827;background:#fff;outline:none;box-sizing:border-box;}', '.msl-url:focus{border-color:#2563eb;}', '.msl-remove{flex:0 0 auto;border:0;background:transparent;color:#9ca3af;font-size:16px;line-height:1;cursor:pointer;padding:2px 5px;border-radius:4px;}', '.msl-remove:hover{color:#ef4444;background:#fef2f2;}', '.msl-empty{color:#9ca3af;font-size:12px;line-height:1.5;padding:2px 0 4px;}', '.msl-add{margin-top:12px;}', '.msl-add-label{color:#6b7280;font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px;}', '.msl-add-grid{display:flex;flex-wrap:wrap;gap:6px;}', '.msl-add-btn{border:1px solid #e5e7eb;background:#fff;border-radius:6px;padding:3px;line-height:0;cursor:pointer;}', '.msl-add-btn:hover{border-color:#2563eb;background:#f8fafc;}', '.msl-add-btn img,.msl-add-btn svg{width:26px;height:26px;display:block;border:0;}', '.msl-brand{margin-top:14px;padding-top:10px;border-top:1px solid #f3f4f6;}', '.msl-brand-btn{display:block;width:100%;border:1px solid #e5e7eb;background:#fff;border-radius:6px;padding:6px 10px;font-size:12px;font-family:inherit;color:#374151;cursor:pointer;text-align:center;}', '.msl-brand-btn:hover{border-color:#2563eb;background:#f8fafc;color:#1d4ed8;}', '.msl-found{display:flex;align-items:center;gap:5px;color:#047857;font-size:11px;line-height:1.4;margin-bottom:6px;}', // Permanent "already applied" variant: neutral rather than success-green, // and the only line in its section, so no bottom gap. '.msl-found--static{color:#6b7280;margin-bottom:0;}', '.msl-found svg{flex:0 0 auto;width:13px;height:13px;}', '.msl-callout{background:#eff6ff;border:1px solid #dbeafe;border-radius:8px;padding:11px 12px;display:flex;gap:9px;align-items:flex-start;}', '.msl-callout-ico{flex:0 0 auto;width:17px;height:17px;color:#2563eb;margin-top:1px;}', '.msl-callout-body{flex:1 1 auto;min-width:0;}', '.msl-callout-text{color:#1e40af;font-size:12px;line-height:1.5;margin-bottom:9px;}', '.msl-brand-cta{display:block;width:100%;border:0;background:#2563eb;color:#fff;border-radius:6px;padding:7px 10px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;text-align:center;}', '.msl-brand-cta:hover{background:#1d4ed8;}', '.msl-brand-refresh{display:block;margin:7px auto 0;border:0;background:transparent;padding:0;font-size:11px;font-family:inherit;color:#2563eb;cursor:pointer;text-decoration:underline;}', '.msl-brand-refresh:hover{color:#1d4ed8;}', '.msl-brand-refresh[disabled]{color:#9ca3af;cursor:default;text-decoration:none;}' ].join(''); // Simple four-point spark for the "set up your brand kit" callout, and a tick // for the "we found your links" micro-state. Inline so the panel needs no // network round-trip and no icon font. var SPARK_SVG = ''; var TICK_SVG = ''; // Set right before updateValue() when a network is added, consumed by the // next mount() so the freshly added row's input takes focus. var pendingFocusKey = null; var dragIndex = null; // The icon style the panel draws its thumbnails in. The links widget is a // separate property editor and never sees the style option, so we learn it // from the Viewer (which does get the full values) and redraw the panel when // it moves. Until the first canvas render this is the tool's own default. var panelIconType = 'circle'; function notePanelIconType(iconType) { if (iconType === panelIconType) return; panelIconType = iconType; // Deferred: we are inside a canvas render and the panel lives elsewhere in // the DOM. redrawActivePanel is a no-op when no panel is mounted. try { setTimeout(redrawActivePanel, 0); } catch (e) { /* no timers: the panel catches up on its next mount */ } } // --- brand kit refresh ------------------------------------------------------ // The user leaves for the brand kit settings page in another tab and comes // back; the panel has to notice. A cookie'd fetch is impossible from this // cross-origin iframe, so we re-read a token-gated JSON endpoint instead. var awaitingBrandKitReturn = false; // set when the setup link is clicked var refreshInFlight = false; var brandJustLoaded = false; // one-shot "we found them" micro-state var visibilityHooked = false; // The currently mounted panel, so a refresh that lands asynchronously can // redraw whatever is on screen. var activePanel = null; function refreshLinks(cb) { if (refreshInFlight || !REFRESH_URL || !REFRESH_TOKEN) { if (cb) cb(false); return; } refreshInFlight = true; try { var url = REFRESH_URL + (REFRESH_URL.indexOf('?') >= 0 ? '&' : '?') + 'token=' + encodeURIComponent(REFRESH_TOKEN); var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return; refreshInFlight = false; var updated = false; if (xhr.status >= 200 && xhr.status < 300) { var body = tryParseJson(xhr.responseText); if (body && body.links && typeof body.links === 'object') { PREFILL_LINKS = body.links; updated = true; } } else { // Expired token, endpoint not deployed, offline: stay on what we have. console.error('[ms_social] brand kit refresh failed: ' + xhr.status); } if (cb) cb(updated); }; xhr.send(); } catch (e) { refreshInFlight = false; console.error('[ms_social] brand kit refresh error: ' + e); if (cb) cb(false); } } function redrawActivePanel() { if (!activePanel || !activePanel.node || !activePanel.node.parentNode) return; var panel = activePanel; panel.node.innerHTML = renderWidget(panel.value); mountWidget(panel.node, panel.value, panel.updateValue); } // Refresh, and if that turned an empty brand kit into a populated one, flag // the one-shot confirmation the next render shows. function refreshAndRedraw() { var hadLinks = brandLinks().length > 0; refreshLinks(function () { if (!hadLinks && brandLinks().length > 0) brandJustLoaded = true; redrawActivePanel(); }); } function ensureVisibilityHook() { if (visibilityHooked) return; visibilityHooked = true; try { document.addEventListener('visibilitychange', function () { if (document.hidden || !awaitingBrandKitReturn) return; awaitingBrandKitReturn = false; refreshAndRedraw(); }); } catch (e) { /* no Page Visibility API: the manual refresh link still works */ } } function ensureWidgetStyles() { try { if (document.getElementById(WIDGET_CSS_ID)) return; var style = document.createElement('style'); style.id = WIDGET_CSS_ID; style.appendChild(document.createTextNode(WIDGET_CSS)); (document.head || document.documentElement).appendChild(style); } catch (e) { /* styling is cosmetic; never break the editor over it */ } } function closestRow(el) { while (el && el.nodeType === 1) { if (el.className && String(el.className).split(' ').indexOf('msl-row') >= 0) return el; el = el.parentNode; } return null; } function rowIndexOf(el) { var row = closestRow(el); if (!row) return -1; var idx = parseInt(row.getAttribute('data-msl-index'), 10); return isNaN(idx) ? -1 : idx; } function clearIndicators(root) { var rows = root.querySelectorAll('.msl-row'); for (var i = 0; i < rows.length; i++) { rows[i].className = rows[i].className .replace(/\s*msl-drop-(before|after)/g, '') .replace(/\s*msl-dragging/g, ''); } } function setIndicator(row, position) { var base = row.className.replace(/\s*msl-drop-(before|after)/g, ''); row.className = base + ' msl-drop-' + position; } function renderWidget(value) { var links = normalizeLinks(value); var used = {}; var rows = []; for (var i = 0; i < links.length; i++) { var net = networkFor(links[i].key); if (!net) continue; used[net.key] = true; rows.push( '

' + '⠿' + iconMarkup(panelIconType, net.key, 22, 'msl-icon', '') + '' + '' + '

' ); } var picker = []; for (var j = 0; j < NETWORKS.length; j++) { if (used[NETWORKS[j].key]) continue; picker.push( '' ); } var html = '

'; html += '

' + rows.join('') + '

'; if (!rows.length) { html += '

' + esc(I18N.empty_state) + '

'; } if (picker.length) { html += '

' + '

' + esc(I18N.add_network) + '

' + '

' + picker.join('') + '

' + '

'; } // Brand kit shortcut. With links saved it fills the block in one click; // without them it shows a callout pointing at the settings page, which // opens in a new tab (this iframe is cross-origin, so the only call we ever // make back to the app is the token-gated refresh endpoint). var brand = ''; if (brandLinks().length) { if (brandLinksApplied(links)) { // Nothing left to apply: a passive confirmation instead of a button that // would do nothing. Consuming brandJustLoaded here keeps a refresh from // stacking a second tick on top of this one. brandJustLoaded = false; brand += '

' + TICK_SVG + '' + esc(I18N.brand_in_use) + '

'; } else { if (brandJustLoaded) { brandJustLoaded = false; // one-shot: only the render right after a refresh brand += '

' + TICK_SVG + '' + esc(I18N.brand_found) + '

'; } brand += ''; } } else if (BRAND_KIT_URL) { brand += '

' + SPARK_SVG + '

' + '

' + esc(I18N.brand_hint) + '

' + '' + // Manual fallback for browsers that never fire visibilitychange, or a // user who set the kit up before this panel was ever opened. (REFRESH_URL && REFRESH_TOKEN ? '' : '') + '

' + '

'; } // Wrapper only when there is something in it: .msl-brand carries a top // border, which would otherwise show as a stray rule in the public editor. if (brand) html += '

' + brand + '

'; html += '

'; return html; } function mountWidget(node, value, updateValue) { if (!node) return; ensureWidgetStyles(); // Remembered so an async brand-kit refresh can redraw the panel that is // actually on screen. Unlayer re-mounts on every updateValue, so this stays // pointed at the live node. activePanel = { node: node, value: value, updateValue: updateValue }; var links = normalizeLinks(value); // URL inputs commit on change (blur / Enter) rather than on every // keystroke: updateValue re-renders the whole widget, which would drop // focus mid-word if it fired per character. var inputs = node.querySelectorAll('[data-msl-url]'); for (var i = 0; i < inputs.length; i++) { (function (input) { input.addEventListener('change', function () { var idx = rowIndexOf(input); if (idx < 0 || !links[idx]) return; var next = links.slice(); next[idx] = { key: links[idx].key, url: input.value }; updateValue(next); }); input.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.keyCode === 13) { e.preventDefault(); input.blur(); } }); })(inputs[i]); } var removes = node.querySelectorAll('[data-msl-remove]'); for (var r = 0; r < removes.length; r++) { (function (button) { button.addEventListener('click', function (e) { e.preventDefault(); var idx = rowIndexOf(button); if (idx < 0 || !links[idx]) return; var next = links.slice(); next.splice(idx, 1); updateValue(next); }); })(removes[r]); } // Rows stay draggable=false so the URL input keeps normal text selection; // the handle flips the flag only for the duration of a drag. var rows = node.querySelectorAll('.msl-row'); for (var k = 0; k < rows.length; k++) { (function (row) { var handle = row.querySelector('[data-msl-handle]'); if (handle) { handle.addEventListener('mousedown', function () { row.draggable = true; }); } row.addEventListener('mouseup', function () { row.draggable = false; }); row.addEventListener('dragstart', function (e) { dragIndex = rowIndexOf(row); if (e.dataTransfer) { e.dataTransfer.effectAllowed = 'move'; try { e.dataTransfer.setData('text/plain', String(dragIndex)); } catch (err) { /* IE-style dataTransfer restrictions; ordering still works */ } } row.className += ' msl-dragging'; }); row.addEventListener('dragover', function (e) { if (dragIndex === null) return; e.preventDefault(); if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'; var rect = row.getBoundingClientRect(); setIndicator(row, (e.clientY - rect.top) > rect.height / 2 ? 'after' : 'before'); }); row.addEventListener('dragleave', function () { row.className = row.className.replace(/\s*msl-drop-(before|after)/g, ''); }); row.addEventListener('drop', function (e) { e.preventDefault(); e.stopPropagation(); var from = dragIndex; var target = rowIndexOf(row); var rect = row.getBoundingClientRect(); var insertAt = (e.clientY - rect.top) > rect.height / 2 ? target + 1 : target; dragIndex = null; row.draggable = false; clearIndicators(node); if (from === null || from < 0 || target < 0) return; if (from === insertAt || from + 1 === insertAt) return; var next = links.slice(); var moved = next.splice(from, 1)[0]; if (from < insertAt) insertAt -= 1; next.splice(insertAt, 0, moved); updateValue(next); }); row.addEventListener('dragend', function () { dragIndex = null; row.draggable = false; clearIndicators(node); }); })(rows[k]); } var adders = node.querySelectorAll('[data-msl-add]'); for (var a = 0; a < adders.length; a++) { (function (button) { button.addEventListener('click', function (e) { e.preventDefault(); var key = button.getAttribute('data-msl-add'); if (!networkFor(key)) return; pendingFocusKey = key; updateValue(links.concat([{ key: key, url: '' }])); }); })(adders[a]); } var brandButton = node.querySelector('[data-msl-brand]'); if (brandButton) { brandButton.addEventListener('click', function (e) { e.preventDefault(); updateValue(applyBrandLinks(links)); }); } var brandSetup = node.querySelector('[data-msl-brand-setup]'); if (brandSetup) { brandSetup.addEventListener('click', function (e) { e.preventDefault(); // Arm the visibilitychange re-read before opening: when this tab comes // back to the foreground we look for the links they just saved. awaitingBrandKitReturn = true; ensureVisibilityHook(); try { window.open(BRAND_KIT_URL, '_blank', 'noopener'); } catch (err) { /* popup blocked; nothing else to do from inside the iframe */ } }); } var brandRefresh = node.querySelector('[data-msl-brand-refresh]'); if (brandRefresh) { brandRefresh.addEventListener('click', function (e) { e.preventDefault(); brandRefresh.disabled = true; refreshAndRedraw(); }); } if (pendingFocusKey) { var focusRow = node.querySelector('.msl-row[data-msl-key="' + pendingFocusKey + '"] [data-msl-url]'); pendingFocusKey = null; if (focusRow) { try { focusRow.focus(); } catch (e) { /* focus is a nicety, not a requirement */ } } } } unlayer.registerPropertyEditor({ name: 'ms_social_links', Widget: unlayer.createWidget({ render: function (value) { return renderWidget(value); }, mount: function (node, value, updateValue) { mountWidget(node, value, updateValue); } }) }); unlayer.registerTool({ name: 'ms_social', label: I18N.label, // Inline SVG data URI instead of a Font Awesome name: the FA share icons // only come solid, which clashes with the thin-outline style of the native // tool tiles. Source SVG: 33x33 share-nodes outline, 2px round strokes. icon: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMyAzMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PGNpcmNsZSBjeD0iMjQuNSIgY3k9IjcuNSIgcj0iNCIvPjxjaXJjbGUgY3g9IjguNSIgY3k9IjE2LjUiIHI9IjQiLz48Y2lyY2xlIGN4PSIyNC41IiBjeT0iMjUuNSIgcj0iNCIvPjxwYXRoIGQ9Ik0xMyAxNEwyMCAxMC4xIi8+PHBhdGggZD0iTTEzIDE5TDIwIDIyLjkiLz48L3N2Zz4=', supportedDisplayModes: ['web', 'email'], options: { links: { title: I18N.links_title, position: 1, options: { links: { label: '', defaultValue: DEFAULT_LINKS, widget: 'ms_social_links' } } }, style: { title: I18N.style_title, position: 2, options: { iconType: { label: I18N.icon_style, defaultValue: 'circle', widget: 'dropdown', data: { options: [ { label: I18N.style_circle, value: 'circle' }, { label: I18N.style_circle_black, value: 'circle-black' }, { label: I18N.style_circle_white, value: 'circle-white' }, { label: I18N.style_rounded, value: 'rounded' }, { label: I18N.style_squared, value: 'squared' } ] } }, iconSize: { label: I18N.icon_size, defaultValue: 32, widget: 'counter' }, spacing: { label: I18N.spacing, defaultValue: 10, widget: 'counter' }, align: { label: I18N.alignment, defaultValue: 'center', widget: 'alignment' } } } }, values: {}, renderer: { Viewer: unlayer.createViewer({ render: function (values) { return msSocialHtml(values, true); } }), exporters: { web: function (values) { return msSocialHtml(values, false); }, email: function (values) { return msSocialHtml(values, false); } }, head: { css: function () { return ''; }, js: function () { return ''; } } } }); })();