Skip to content

Instantly share code, notes, and snippets.

@mohsenk

mohsenk/boka-widget-update.js

Last active October 25, 2019 09:44
Show Gist options
  • Save mohsenk/d508bbfe97708b687e663326a29eb92d to your computer and use it in GitHub Desktop.
Save mohsenk/d508bbfe97708b687e663326a29eb92d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
boka-widget-update.js
(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