Last active
October 25, 2019 09:44
-
-
Save mohsenk/d508bbfe97708b687e663326a29eb92d to your computer and use it in GitHub Desktop.
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(global, factory) { | |
typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? define(factory) : global.boka_widget = factory() | |
} | |
)(this, function() { | |
var publicCallback, container, wrapper, banner, iframe, overlay; | |
function public() { | |
publicCallback.apply(null, arguments) | |
} | |
var mode = { | |
none: 0, | |
calendar: 1, | |
article: 2 | |
}; | |
var settings = { | |
logging: true, | |
isPreview: false, | |
isMobile: false, | |
baseUrl: "https://widget.boka.se", | |
remoteUrl: "https://boka.se", | |
backgroundColor: "#3d484e", | |
foregroundColor: "#ffffff", | |
title: "Klicka här för att boka", | |
containerCss: { | |
display: "block !important", | |
"z-index": "999999999 !important", | |
position: "fixed !important", | |
right: "20px !important", | |
bottom: "0px !important", | |
top: "auto !important", | |
left: "auto !important", | |
border: "0px !important", | |
"max-height": "none !important", | |
"min-height": "none !important", | |
"transition-property": "none !important", | |
transform: "none !important", | |
height: "auto !important", | |
cursor: "auto !important", | |
float: "none !important", | |
outline: "none !important", | |
opacity: "1 !important", | |
visibility: "visible !important", | |
overflow: "visible !important", | |
"box-shadow": "none !important", | |
background: "none transparent !important", | |
width: "340px !important", | |
"box-sizing": "content-box !important" | |
}, | |
containerCssMobileDocked: { | |
right: "0px !important", | |
width: "320px !important" | |
}, | |
containerCssMobile: { | |
display: "block !important", | |
"z-index": "9999999 !important", | |
position: "absolute !important", | |
top: "0px !important", | |
bottom: "0px !important", | |
left: "0px !important", | |
right: "0px !important", | |
border: "0px !important", | |
"transition-property": "none !important", | |
transform: "none !important", | |
cursor: "auto !important", | |
outline: "none !important", | |
opacity: "1 !important", | |
visibility: "visible !important", | |
"box-shadow": "none !important", | |
background: "none transparent !important", | |
"box-sizing": "content-box !important" | |
}, | |
wrapperCss: {}, | |
wrapperMobileCss: {}, | |
bannerCss: { | |
"display:": "block !important", | |
position: "relative !important", | |
"border-radius": "10px 10px 0px 0px !important", | |
height: "36px !important", | |
padding: "5px 5px 5px 20px !important", | |
"line-height": "41px !important", | |
"background-color": "#3d484e !important", | |
color: "#fff !important", | |
"font-family": "Arial, Helvetica, sans-serif !important", | |
"font-size": "16px !important", | |
"font-weight": "bold !important", | |
width: "319px", | |
cursor: "pointer !important" | |
}, | |
bannerCssMobileDocked: { | |
"border-radius": "10px 0px 0px 0px !important", | |
padding: "5px 5px 5px 5px !important", | |
width: "auto" | |
}, | |
bannerCssMobile: { | |
display: "flex !important", | |
"justify-content": "space-between", | |
"border-radius": "0px 0px 0px 0px !important", | |
height: "36px !important", | |
padding: "5px 5px 5px 20px !important", | |
"line-height": "41px !important", | |
"background-color": "#3d484e !important", | |
color: "#fff !important", | |
"font-family": "Arial, Helvetica, sans-serif !important", | |
"font-size": "16px !important", | |
"font-weight": "bold !important", | |
width: "calc(100vw - 25px) !important", | |
cursor: "pointer !important" | |
}, | |
widgetCss: { | |
display: "block !important", | |
position: "relative !important", | |
"max-height": "0px", | |
"min-height": "none !important", | |
transform: "none !important", | |
border: "solid 2px #3d484e !important", | |
cursor: "auto !important", | |
float: "none !important", | |
outline: "none !important", | |
opacity: "1 !important", | |
visibility: "visible !important", | |
overflow: "visible !important", | |
"box-shadow": "none !important", | |
background: "none transparent !important", | |
height: "470px", | |
width: "340px", | |
transition: "max-height 0.15s ease-in", | |
"margin-bottom": "0 !important" | |
}, | |
widgetCssMobile: { | |
display: "block !important", | |
position: "relative", | |
transform: "none !important", | |
border: "0px !important", | |
cursor: "auto !important", | |
outline: "none !important", | |
opacity: "1 !important", | |
"overflow-x": "hidden", | |
"overflow-y": "auto", | |
visibility: "visible !important", | |
"box-shadow": "none !important", | |
background: "none transparent !important", | |
height: "calc(100vh - 46px) !important", | |
width: "100vw !important", | |
transition: "none" | |
} | |
}; | |
function readSettings() { | |
switch (_bws["d"]) { | |
case "c": | |
settings.widgetMode = mode.calendar; | |
settings.calendarId = _bws["k"]; | |
break; | |
case "a": | |
settings.widgetMode = mode.article; | |
settings.systemId = _bws["k"]; | |
break; | |
default: | |
settings.widgetMode = mode.none; | |
break | |
} | |
if (_bws["p"] && _bws["p"] === true) | |
settings.isPreview = true | |
} | |
function mergeSettings(s) { | |
try { | |
var jsonSettings = JSON.parse(s); | |
settings.title = jsonSettings.title; | |
settings.backgroundColor = jsonSettings.backgroundColor; | |
settings.foregroundColor = jsonSettings.foregroundColor; | |
settings.maximizeOnLoad = jsonSettings.maximizeOnLoad; | |
if (settings.isPreview) { | |
settings.containerCss["width"] = "346px !important"; | |
settings.containerCss["right"] = "0 !important"; | |
settings.widgetCss["width"] = "340px !important" | |
} | |
settings.widgetCss["border"] = "solid 2px " + settings.backgroundColor + " !important", | |
iframe.style.cssText = objToCss(settings.widgetCss); | |
var suffix = settings.foregroundColor.toLowerCase() == "#ffffff" ? "w.png" : "b.png"; | |
settings.bannerCss["background-color"] = settings.backgroundColor; | |
settings.bannerCss["color"] = settings.foregroundColor; | |
banner.style.cssText = objToCss(settings.bannerCss); | |
banner.innerHTML = '<span id="boka_widget_banner_text" style="line-height: 28px !important; text-align: left; width: 100%; display: ' + (!settings.isMobile && (settings.isPreview || settings.maximizeOnLoad) ? "none" : "inline") + '">' + settings.title + '</span><img id="boka_widget_banner_logo" src="https://boka.se/Content/boka_white.png" height="26" style="height: 26px !important; margin-top: 5px; display: ' + (!settings.isMobile && (settings.isPreview || settings.maximizeOnLoad) ? "inline" : "none") + '"/>' + '<span id="boka_widget_icons" style="float: right !important; text-align: right !important;">' + '<img id="boka_widget_icons_maximize" title="Maxmiera" style="padding: 0px 7px; display: ' + (!settings.isMobile && (settings.isPreview || settings.maximizeOnLoad) ? "none" : "inline") + '" src="' + settings.baseUrl + "/images/widget_maximize_" + suffix + '"/>' + '<img id="boka_widget_icons_minimize" title="Minimera" style="padding: 0px 7px; display: ' + (!settings.isMobile && (settings.isPreview || settings.maximizeOnLoad) ? "inline" : "none") + '" src="' + settings.baseUrl + "/images/widget_minimize_" + suffix + '"/>' + '<img id="boka_widget_icons_popout" title="Frigör widget" style="padding: 0px 15px 0px 8px; display: ' + (settings.isMobile ? "none" : "inline") + '" src="' + settings.baseUrl + "/images/widget_popout_" + suffix + '"/>' + "</span>"; | |
if (!settings.isMobile && (settings.isPreview || settings.maximizeOnLoad)) { | |
iframe.style.maxHeight = "500px" | |
} | |
container.style.cssText = objToCss(settings.containerCss); | |
if (settings.isMobile) { | |
container.style.cssText = objToCss(Object.assign(settings.containerCss, settings.containerCssMobileDocked)); | |
banner.style.cssText = objToCss(Object.assign(settings.bannerCss, settings.bannerCssMobileDocked)) | |
} | |
function toggle(e) { | |
e.preventDefault(); | |
var css = ""; | |
switch (parseInt(iframe.style.maxHeight)) { | |
case 0: | |
if (settings.isMobile) { | |
window.scrollTo(0, 0); | |
css = Object.assign({}, settings.widgetCssMobile); | |
css["max-height"] = "100%"; | |
iframe.style.cssText = objToCss(css); | |
container.style.cssText = objToCss(settings.containerCssMobile); | |
banner.style.cssText = objToCss(settings.bannerCssMobile); | |
wrapper.style.cssText = objToCss(settings.wrapperMobileCss); | |
disableScroll(); | |
showOverlay(); | |
overlay.onclick = toggle | |
} else { | |
iframe.style.cssText = objToCss(settings.widgetCss); | |
iframe.style.maxHeight = "500px"; | |
container.style.cssText = objToCss(settings.containerCss); | |
banner.style.cssText = objToCss(settings.bannerCss) | |
} | |
document.getElementById("boka_widget_banner_logo").style.display = "inline"; | |
document.getElementById("boka_widget_banner_text").style.display = "none"; | |
document.getElementById("boka_widget_icons_maximize").style.display = "none"; | |
document.getElementById("boka_widget_icons_minimize").style.display = "inline"; | |
break; | |
default: | |
if (settings.isMobile) { | |
css = Object.assign(settings.containerCss, settings.containerCssMobileDocked); | |
container.style.cssText = objToCss(css); | |
css = Object.assign(settings.bannerCss, settings.bannerCssMobileDocked); | |
banner.style.cssText = objToCss(css); | |
css = Object.assign({}, settings.widgetCss); | |
css["max-height"] = "0px"; | |
css["transition"] = "none"; | |
iframe.style.cssText = objToCss(css); | |
enableScroll(); | |
hideOverlay() | |
} | |
iframe.style.maxHeight = "0px"; | |
document.getElementById("boka_widget_banner_logo").style.display = "none"; | |
document.getElementById("boka_widget_banner_text").style.display = "inline"; | |
document.getElementById("boka_widget_icons_maximize").style.display = "inline"; | |
document.getElementById("boka_widget_icons_minimize").style.display = "none"; | |
break | |
} | |
} | |
banner.onclick = toggle; | |
document.getElementById("boka_widget_icons_popout").onclick = function(e) { | |
if (!e) | |
e = window.event; | |
e.cancelBubble = true; | |
if (e.stopPropagation) | |
e.stopPropagation(); | |
switch (parseInt(iframe.style.maxHeight)) { | |
case 0: | |
break; | |
default: | |
toggle(e) | |
} | |
window.open(iframe.src, "Boka Widget", "width=344,height=520") | |
} | |
} catch (err) { | |
if (console.warn) | |
console.warn("Error reading remote settings.") | |
} | |
} | |
function create() { | |
container = document.createElement("div"); | |
container.id = "boka_widget"; | |
container.style.cssText = objToCss(settings.containerCss); | |
banner = document.createElement("div"); | |
wrapper = document.createElement("div"); | |
iframe = document.createElement("iframe"); | |
iframe.src = "about:blank"; | |
iframe.frameBorder = 0; | |
iframe.style.cssText = objToCss(settings.widgetCss); | |
iframe.onload = function(e) { | |
if (settings.isMobile) { | |
window.scrollTo(0, 0) | |
} | |
} | |
; | |
container.appendChild(banner); | |
wrapper.appendChild(iframe); | |
container.appendChild(wrapper); | |
var _body = document.getElementsByTagName("body")[0]; | |
_body.appendChild(container); | |
var _attachEvent = window.addEventListener ? "addEventListener" : "attachEvent"; | |
var _windowEvent = window[_attachEvent]; | |
var onMessage = function(e) { | |
if (e.origin !== settings.remoteUrl) { | |
return | |
} | |
var _msg = e[e.message ? "message" : "data"]; | |
if (_msg) { | |
if (!_msg["id"] && !_msg["type"]) | |
return; | |
if (_msg["id"] && _msg["id"] !== "boka_xdm_https") | |
return; | |
switch (_msg.type) { | |
case "PING?": | |
sendMessage("PONG!"); | |
break; | |
case "popLogin": | |
popLogin(); | |
break; | |
case "login": | |
closeModal(); | |
sendMessage("reload") | |
} | |
} | |
}; | |
if (_attachEvent === "addEventListener") { | |
_windowEvent("message", onMessage, false) | |
} else { | |
_windowEvent("onmessage", onMessage) | |
} | |
} | |
function load() { | |
settings.isMobile = /Mobi/i.test(navigator.userAgent); | |
loadStyles(); | |
loadModal(); | |
var _http = new XMLHttpRequest; | |
_http.open("GET", settings.baseUrl + "/settings/" + _bws["d"] + "/" + _bws["k"], true); | |
_http.onload = function() { | |
mergeSettings(_http.responseText); | |
switch (settings.widgetMode) { | |
case mode.calendar: | |
iframe.src = settings.remoteUrl + "/calendar/" + settings.calendarId + "?widget=1"; | |
break; | |
case mode.article: | |
iframe.src = settings.remoteUrl + "/" + settings.systemId + "/info?widget=1"; | |
break | |
} | |
} | |
; | |
_http.send() | |
} | |
function popLogin(disableModal) { | |
var login_wnd = window.open(settings.remoteUrl + "/login/apilogin?id=ZSRvZXNzcDRidWZ1QDMzNDpkJGV4ZTlAN2J6bzQ5ZXI0", "boka_login_wnd", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=640,width=400"); | |
if (disableModal) | |
return; | |
if (login_wnd == null || typeof login_wnd == "undefined") { | |
popModal() | |
} | |
} | |
function loadStyles() { | |
var _injectCSS = "#boka_widget *, #boka_widget *:after, #boka_widget *:before { box-sizing: content-box !important; -webkit-box-sizing: content-box !important }"; | |
var _injectCSSNode = document.createElement("style"); | |
_injectCSSNode.innerHTML = _injectCSS; | |
document.body.appendChild(_injectCSSNode) | |
} | |
function loadModal() { | |
if (!overlay) | |
loadOverlay() | |
} | |
function loadOverlay() { | |
var _modalCSS = ".boka_widget_fullscreen { overflow: hidden !important; }.boka_widget_is_hidden { display: none; }.boka_widget_button_close {display: inline-block;width: 16px;height: 16px;position: absolute;top: 10px;right: 10px;cursor: pointer;background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAowAAAKMB8MeazgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAB5SURBVDiNrZPRCcAwCEQfnUiySAZuF8kSWeH6Yz8KrQZMQAicJ+epAB0YwAmYJKIADLic0/GPPCbQAnLznCd/4NWUFfkgy1VjH8CryA95ApYltAiTRCZxpuoW+gz9WXE6NPeg+ra1UDIxGlWEObe4SGxY5fIxlc75Bkt9V4JS7KWJAAAAAElFTkSuQmCC59ef34356faa7edebc7ed5432ddb673d');}.boka_widget_overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);}.boka_widget_modal_content {padding: 20px 30px;width: 400px;position: relative;min-height: 180px;margin: 5% auto 0;background: #fff;}"; | |
var _modalCSSNode = document.createElement("style"); | |
_modalCSSNode.innerHTML = _modalCSS; | |
document.body.appendChild(_modalCSSNode); | |
overlay = document.createElement("div"); | |
overlay.classList.add("boka_widget_overlay"); | |
overlay.classList.add("boka_widget_is_hidden"); | |
overlay.id = "boka_widget_overlay"; | |
document.body.appendChild(overlay) | |
} | |
function showOverlay() { | |
overlay.classList.remove("boka_widget_is_hidden") | |
} | |
function hideOverlay() { | |
overlay.classList.add("boka_widget_is_hidden") | |
} | |
function popModal() { | |
var _overlayHTML = '<div class="boka_widget_modal_content"><span class="boka_widget_button_close" onclick="boka_widget.closeModal();"></span><h3 style="color:#000 !important;">Inloggning krävs</h3><p style="color:#000 !important; font: 12px Arial, Helvetica, sans-serif;">För att använda denna funktion måste du logga in på boka.se.</p><p style="color:#000 !important; font: 12px Arial, Helvetica, sans-serif;">Klicka på "Logga in" nedan för att öppna inloggningen i ett nytt fönster.</p><input type="button" onclick="boka_widget.popLogin(true);" value="Logga in" /> <input type="button" onclick="boka_widget.closeModal();" value="Stäng"></div>'; | |
overlay.innerHTML = _overlayHTML; | |
showOverlay() | |
} | |
function closeModal() { | |
hideOverlay(); | |
overlay.innerHTML = "" | |
} | |
function sendMessage(type, data) { | |
var msg = { | |
id: "boka_xdm_https", | |
type: type, | |
data: data | |
}; | |
iframe.contentWindow.postMessage(msg, "*") | |
} | |
function disableScroll() { | |
document.body.classList.add("boka_widget_fullscreen") | |
} | |
function enableScroll() { | |
document.body.classList.remove("boka_widget_fullscreen") | |
} | |
function objToCss(obj) { | |
var _cssString = ""; | |
for (var _css in obj) { | |
_cssString += _css + ":" + obj[_css] + ";" | |
} | |
return _cssString | |
} | |
function log(message) { | |
if (!settings.logging) | |
return; | |
console.log(message) | |
} | |
readSettings(); | |
document.addEventListener('DOMContentLoaded', function(){ | |
create(); | |
load(); | |
}); | |
public.version = "0.1.0"; | |
public.popLogin = popLogin; | |
public.closeModal = closeModal; | |
return public | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment