Last active
October 20, 2020 03:39
-
-
Save xumx/e9ad829d7ff9bdf5a68789431972152b to your computer and use it in GitHub Desktop.
KeyReply Chat Widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| // Load Stylesheet | |
| var root = 'https://files.keyreply.com' | |
| var head = document.getElementsByTagName('head')[0], | |
| stylesheet = document.createElement('link') | |
| stylesheet.type = 'text/css' | |
| stylesheet.rel = 'stylesheet' | |
| stylesheet.href = root + '/files/boutir.css?13' | |
| head.appendChild(stylesheet) | |
| function init() { | |
| var $ = window.jQuery | |
| var settings = {}, | |
| script = $('#keyreply-script'), | |
| site = window.location.host, | |
| cipher = script.data('apps'), | |
| align = script.data('align'), | |
| whitelabel = script.data('whitelabel'), | |
| colors = { | |
| livechat: '#334433', | |
| skype: '#00AFF0', | |
| whatsapp: '#30BE2D', | |
| email: '#2D70E7', | |
| sms: '#0AD02C', | |
| phone: '#0AD02C', | |
| facetime: '#0DD12F', | |
| telegram: '#2DA5E1', | |
| facebook: '#0084FF', | |
| kakao: '#FBDE24', | |
| line: '#3ACE01', | |
| snapchat: '#FFFC00', | |
| wechat: '#1ECE29', | |
| reddit: '#017AD4', | |
| twitter: '#2DAAE1', | |
| hipchat: '#274970', | |
| slack: '#423843', | |
| handouts: '#70AD46', | |
| boutir: '#1CB78D' | |
| } | |
| settings.apps = JSON.parse(decodeURI(atob(cipher))) | |
| settings.message = atob(script.data('message') || '') | |
| settings.color = script.data('color') | |
| var numberOfApps = Object.keys(settings.apps).length | |
| if (!Mobile) { | |
| if (settings.apps.sms) numberOfApps-- | |
| if (settings.apps.kakao) numberOfApps-- | |
| } | |
| var maxIconCount = Math.floor((window.innerHeight - 130) / 52) | |
| var anchor = $('<div>') | |
| .attr('id', 'keyreply-container') | |
| .appendTo($('body')) | |
| if (align == 'left') { | |
| anchor.addClass('left') | |
| } | |
| var launcher = $('<div>') | |
| .addClass('keyreply-launcher') | |
| .addClass('keyreply-effect') | |
| .css('background-image', 'url("data:image/svg+xml;charset=utf8,%3Csvg width=\'26\' height=\'26\' viewBox=\'0 0 26 26\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cellipse fill=\'' + escape(settings.color) + '\' cx=\'13\' cy=\'13\' rx=\'12\' ry=\'12\'/%3E%3Cpath d=\'M6.798 15.503l1.453-.92c.617.215 1.29.334 2 .334 2.898 0 5.247-1.996 5.247-4.46 0-2.46-2.35-4.457-5.248-4.457C7.35 6 5 7.996 5 10.458c0 1.446.81 2.73 2.065 3.545l-.503 1.273c-.038.03-.062.076-.062.127 0 .09.074.162.166.162.054 0 .1-.024.132-.062z\' stroke=\'' + escape(settings.color) + '\' stroke-width=\'.2\' fill=\'%23FFF\'/%3E%3Cpath d=\'M20.297 18.97l.04-.065-.578-1.155c1.066-.814 1.737-1.993 1.737-3.305 0-2.455-2.35-4.445-5.248-4.445-2.9 0-5.25 1.99-5.25 4.445s2.35 4.445 5.25 4.445c.838 0 1.63-.167 2.334-.463l1.39.756c.035.05.095.085.163.085.107 0 .194-.085.194-.19 0-.04-.012-.076-.033-.107z\' stroke=\'' + escape(settings.color) + '\' stroke-width=\'.2\' fill=\'%23FFF\'/%3E%3C/g%3E%3C/svg%3E")') | |
| .css('background-color', settings.color) | |
| .appendTo(anchor) | |
| .click(function () { | |
| launcher.addClass('keyreply-show-effect') | |
| setTimeout(function () { | |
| launcher.removeClass('keyreply-show-effect') | |
| }, 700) | |
| }) | |
| if (!whitelabel) { | |
| var brand = $('<a target="_blank" href="https://keyreply.com/chat/?ref=getwidget">get widget</a>') | |
| .addClass('keyreply-brand') | |
| .appendTo(launcher) | |
| .click(function (event) { | |
| event.stopPropagation() | |
| }) | |
| } | |
| var ua = navigator.userAgent | |
| var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i) | |
| var Android = !!ua.match(/Android/i) | |
| var Mobile = !!ua.match(/Mobi/i) | |
| var Mac = !!ua.match(/Macintosh/i) | |
| $.each(settings.apps, function (key, value) { | |
| if (Mobile || (key != 'sms' && key != 'kakao')) { | |
| $('<div>') | |
| .addClass('keyreply-chat-icon') | |
| .attr('data-type', key) | |
| .css('background-color', colors[key]) | |
| .append( | |
| $('<img>') | |
| .attr('src', root + '/files/images/app/' + key + '.svg') | |
| .attr('alt', key) | |
| ) | |
| .append($('<div class="keyreply-label">').text(key.charAt(0).toUpperCase() + key.slice(1))) | |
| .hide() | |
| .appendTo(anchor) | |
| } | |
| }) | |
| // Add a more icon | |
| var more = $('<div>') | |
| .css('background-color', '#888888') | |
| .addClass('keyreply-chat-icon') | |
| .attr('data-type', 'more') | |
| .append( | |
| $('<img>') | |
| .attr('src', root + '/chat/images/apps/' + 'more' + '.svg') | |
| .attr('alt', 'more') | |
| ) | |
| .append($('<div class="keyreply-label">').text('More').css('color', 'white')) | |
| .hide() | |
| .click(function () { | |
| anchor.find('.keyreply-chat-icon').each(function (index, img) { | |
| img = $(img) | |
| if (index <= numberOfApps - maxIconCount) { | |
| if (img.is(':visible')) { | |
| img.animate({ | |
| 'bottom': '', | |
| 'right': '', | |
| 'opacity': 0 | |
| }, 'fast', function () { | |
| img.hide() | |
| }) | |
| } else { | |
| // Setting | |
| var option = { | |
| 'opacity': 1, | |
| 'bottom': 72 + index % maxIconCount * 52 | |
| } | |
| option[(align == 'left' ? 'left' : 'right')] = 52 + 16 + Math.floor(index / maxIconCount) * 52 | |
| option[(align == 'left' ? 'right' : 'left')] = 'auto' | |
| img.show().animate(option, 'fast') | |
| } | |
| } | |
| }) | |
| }) | |
| if (numberOfApps > maxIconCount) { | |
| more.appendTo(anchor) | |
| } | |
| $(window).resize(function () { | |
| maxIconCount = Math.floor((window.innerHeight - 130) / 52) | |
| if (numberOfApps > maxIconCount) { | |
| more.appendTo(anchor) | |
| } else { | |
| more.detach() | |
| } | |
| }) | |
| launcher.click(function () { | |
| $('#keyreply-container > .keyreply-chat-icon').each(function (index, img) { | |
| img = $(img) | |
| if (launcher.is('.keyreply-launcher-active')) { | |
| img.animate({ | |
| 'bottom': 20, | |
| 'right': 16, | |
| 'opacity': 0 | |
| }, 'fast', function () { | |
| img.css('right', '') | |
| .css('bottom', '') | |
| .hide() | |
| }) | |
| } else { | |
| if (numberOfApps > maxIconCount) { | |
| if (index > numberOfApps - maxIconCount) { | |
| img.show().animate({ | |
| 'opacity': 1, | |
| 'bottom': 72 + (maxIconCount - ((numberOfApps - index) % maxIconCount) - 1) * 52 | |
| }, 'fast') | |
| } | |
| } else { | |
| img.show().animate({ | |
| 'opacity': 1, | |
| 'bottom': 72 + index * 52 | |
| }, 'fast') | |
| } | |
| } | |
| }) | |
| launcher.toggleClass('keyreply-launcher-active') | |
| }) | |
| $('.keyreply-chat-icon').each(function (index, icon) { | |
| var link, qr, app = $(icon) | |
| var container = $('<div>').addClass('keyreply-qr') | |
| switch (app.data('type')) { | |
| case 'email': | |
| link = 'mailto:' + settings.apps.email | |
| break | |
| case 'sms': | |
| link = 'sms:' + settings.apps.sms | |
| break | |
| case 'phone': | |
| if (Mobile) { | |
| link = 'tel:' + settings.apps.phone | |
| } else { | |
| container.css('color', 'white').css('padding', '8px').css('padding-top', '32px') | |
| $('<a target="_blank" class="keyreply-button">').attr('href', 'tel://' + settings.apps.phone).text(settings.apps.phone).appendTo(container) | |
| qr = true | |
| break | |
| } | |
| break | |
| case 'facetime': | |
| link = 'facetime-audio:' + settings.apps.facetime | |
| break | |
| case 'telegram': | |
| link = 'tg://resolve?domain=' + settings.apps.telegram.replace('@', '') | |
| break | |
| case 'skype': | |
| link = 'skype:' + (iOS ? '//' : '') + settings.apps.skype + '?chat' | |
| break | |
| case 'facebook': | |
| link = 'https://m.me/' + settings.apps.facebook | |
| break | |
| case 'kakao': | |
| app.find('.keyreply-label').css('color', '#1F1F1F') | |
| link = 'http://goto.kakao.com/' + settings.apps.kakao | |
| break | |
| case 'reddit': | |
| // Deeplink not possible | |
| link = 'https://www.reddit.com/message/compose/?to=' + settings.apps.reddit | |
| break | |
| case 'twitter': | |
| if (Mobile) { | |
| link = 'twitter://user?screen_name=' + settings.apps.twitter.replace('@', '') | |
| } else { | |
| link = 'https://twitter.com/' + settings.apps.twitter.replace('@', '') | |
| } | |
| break | |
| case 'whatsapp': | |
| if (window.__getMessage && typeof window.__getMessage === 'function') { | |
| var message = window.__getMessage() | |
| if (message) { | |
| settings.message = message | |
| } | |
| } | |
| if (Mobile) { | |
| link = 'whatsapp://send/?phone=' + encodeURIComponent(settings.apps.whatsapp) + '&text=' + encodeURIComponent(settings.message) | |
| } else { | |
| link = 'https://web.whatsapp.com/send?phone=' + encodeURIComponent(settings.apps.whatsapp) + '&text=' + encodeURIComponent(settings.message) | |
| } | |
| break | |
| case 'wechat': | |
| if (settings.apps.wechat.length > 100 || /^(http)/.test(settings.apps.wechat)) { | |
| $('<img>') | |
| .attr('src', settings.apps.wechat) | |
| .height('100%') | |
| .width('100%') | |
| .appendTo(container) | |
| $('<br><a class="keyreply-button" href="weixin://">Open Wechat</a>').appendTo(container) | |
| } else { | |
| $('<div style="color:white;">WeChat ID (微信号): ' + settings.apps.wechat + '</div>').appendTo(container) | |
| } | |
| qr = true | |
| break | |
| case 'line': | |
| if (/^http.+ti\/p\/.+/.test(settings.apps.line)) { | |
| link = settings.apps.line | |
| } else { | |
| if (settings.apps.line.length > 100 || /^(http)/.test(settings.apps.line)) { | |
| $('<img>') | |
| .attr('src', settings.apps.line) | |
| .height('100%') | |
| .width('100%') | |
| .appendTo(container) | |
| $('<br><a class="keyreply-button" href="line://ti/p/">Open Line</a>').appendTo(container) | |
| } else { | |
| container.css('color', 'white').css('padding-top', '32px').text('Line ID: ' + settings.apps.line) | |
| $('<br><a class="keyreply-button" href="line://ti/p/%40' + settings.apps.line + '">Open Line</a>').appendTo(container) | |
| } | |
| qr = true | |
| } | |
| break | |
| case 'snapchat': | |
| app.find('.keyreply-label').css('color', '#1F1F1F') | |
| container.css('background-image', 'url("' + settings.apps.snapchat + '")') | |
| qr = true | |
| break | |
| case 'boutir': | |
| if (window.__boutirCallback) { | |
| link = 'javascript:__boutirCallback();' | |
| } | |
| break | |
| default: | |
| break | |
| } | |
| if (qr) { | |
| app.append(container) | |
| } | |
| app.click(function (event) { | |
| event.stopPropagation() | |
| if (qr) { | |
| if (app.is('.keyreply-panel')) { | |
| app.removeClass('keyreply-panel') | |
| app.find('.keyreply-qr').removeClass('active') | |
| } else { | |
| app.siblings().removeClass('keyreply-panel') | |
| app.addClass('keyreply-panel') | |
| app.find('.keyreply-qr').addClass('active') | |
| } | |
| } | |
| if (link) { | |
| app.siblings().removeClass('keyreply-panel') | |
| if (app.data('type') === 'whatsapp') { | |
| if (Mobile) { | |
| link = 'whatsapp://send/?phone=' + encodeURIComponent(settings.apps.whatsapp) + '&text=' + encodeURIComponent(settings.message) | |
| } else { | |
| link = 'https://web.whatsapp.com/send?phone=' + encodeURIComponent(settings.apps.whatsapp) + '&text=' + encodeURIComponent(settings.message) | |
| } | |
| } | |
| if (Mobile) { | |
| window.location = link | |
| } else { | |
| var a = $('<a>').attr('target', '_blank').attr('href', link) | |
| a.appendTo(anchor)[0].click() | |
| a.detach() | |
| } | |
| } | |
| }) | |
| window.keyreply = { | |
| open: function(app, message) { | |
| if (message) { | |
| settings.message = message | |
| } | |
| $('.keyreply-chat-icon[data-type="' + app + '"]').click() | |
| } | |
| } | |
| }) | |
| return true | |
| } | |
| function loadScript(url, callback) { | |
| var script = document.createElement('script') | |
| script.type = 'text/javascript' | |
| if (script.readyState) { // IE | |
| script.onreadystatechange = function () { | |
| if (script.readyState == 'loaded' || script.readyState == 'complete') { | |
| script.onreadystatechange = null | |
| callback() | |
| } | |
| } | |
| } else { // Others | |
| script.onload = function () { | |
| callback() | |
| } | |
| } | |
| script.src = url | |
| document.getElementsByTagName('head')[0].appendChild(script) | |
| } | |
| window.initializeKeyreply = init | |
| })() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment