if (!window.RitualTopBar) window.RitualTopBar = {};
RitualTopBar.Data = {};
RitualTopBar.Data.env = 'https://order.ritual.co';
RitualTopBar.Data.pickupLocations = [];
RitualTopBar.Data.menuItems = [];
if (!window['RitualTopBar']) window['RitualTopBar'] = {};
/**
* The id for the delivery panel.
* @const {string}
*/
RitualTopBar.ID_DELIVERY = 'rl-delivery';
/**
* The id for the delivery choices panel.
* @const {string}
*/
RitualTopBar.ID_DELIVERY_TOGGLE = 'rl-delivery-tgl';
/**
* The id for the pickup panel.
* @const {string}
*/
RitualTopBar.ID_PICKUP = 'rl-pickup';
/**
* The id for the pickup choices panel.
* @const {string}
*/
RitualTopBar.ID_PICKUP_TOGGLE = 'rl-pickup-tgl';
/**
* The id for the order online panel on mobile.
* @const {string}
*/
RitualTopBar.ID_MOBILE_ORDER_ONLINE = 'rl-mobile-order-online';
/**
* The id for the order online choices.
* @const {string}
*/
RitualTopBar.ID_MOBILE_ORDER_ONLINE_TOGGLE = 'rl-mobile-order-online-tgl';
/**
* The id for the pickup button animation.
* @const {string}
*/
RitualTopBar.ID_BUTTON_ANIMATION = 'rl-widget-btn-animation';
/**
* The maximum number of menu items to display.
* @const {number}
*/
RitualTopBar.MAX_MENU_ITEMS = 3;
/**
* The query string param key to add for Ritual pickup urls.
* @const {string}
*/
RitualTopBar.RITUAL_PICKUP_QUERY_PARAM_KEY = 'tb';
/**
* Entry point, builds the Ritual top bar and its it to the DOM.
*/
RitualTopBar.init = function() {
RitualTopBar.addCss(RitualTopBar.Data['env']);
RitualTopBar.inject(window['RitualTopBarConfig'] || {});
};
/**
* Add the style sheet to the page.
* @param {!string} env
*/
RitualTopBar.addCss = function(env) {
var link = document.createElement('link');
link.href = env + '/api/v1/css/topbar.css';
link.type = 'text/css';
link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(link);
};
/**
* Get the parent element.
* @param {!Object} config
* @return {Element}
*/
RitualTopBar.getParent = function(config) {
if (config['layoutOptions'] && config['layoutOptions']['parentQuery']) {
var index = config['layoutOptions']['parentQueryIndex'] || 0;
return document.querySelectorAll(config['layoutOptions']['parentQuery'])[index];
}
return document.getElementsByTagName("body")[0];
};
/**
* Update the existing header css.
* @param {!Object} config
*/
RitualTopBar.updateHeader = function(config) {
if (config['layoutOptions'] && config['layoutOptions']['headerQuery']) {
var index = config['layoutOptions']['headerQueryIndex'] || 0;
var header = document.querySelectorAll(config['layoutOptions']['headerQuery'])[index];
if (header) {
if (config['layoutOptions']['headerTop']) {
header.style.top = config['layoutOptions']['headerTop'];
}
}
}
};
/**
* Inject the Ritual top bar.
* @param {!Object} config
*/
RitualTopBar.inject = function(config) {
if (!RitualTopBar.isValidConfg(config)) {
return;
}
var oDiv = document.getElementById('rl-widget');
if (!oDiv) {
oDiv = document.createElement('div');
oDiv.id = 'rl-widget';
var parent = RitualTopBar.getParent(config);
parent.insertBefore(oDiv, parent.firstChild);
RitualTopBar.updateHeader(config);
}
oDiv.className = 'rl-widget';
if (config['layoutOptions']) {
if (config['layoutOptions']['paddingTop']) {
oDiv.style.paddingTop = config['layoutOptions']['paddingTop'];
}
if (config['layoutOptions']['paddingBottom']) {
oDiv.style.paddingBottom = config['layoutOptions']['paddingBottom'];
}
if (config['layoutOptions']['opacity'] && config['layoutOptions']['opacity'] != 1) {
oDiv.style.opacity = config['layoutOptions']['opacity'];
}
if (config['layoutOptions']['paddingTopBody']) {
var oPad = document.createElement('div');
oPad.style.height = config['layoutOptions']['paddingTopBody'];
var body = document.getElementsByTagName("body")[0];
body.insertBefore(oPad, body.firstChild);
}
if (config['layoutOptions']['floatToTop'] == 1) {
oDiv.className += ' rl-widget-top';
}
}
RitualTopBar.setHtml(oDiv, config);
};
/**
* Generate the html for the top bar.
* @param {!Element} target
* @param {!Object} config
*/
RitualTopBar.setHtml = function(target, config) {
var data = RitualTopBar.Data;
var bgColor = config['bgColor'] || '#221e1f';
var primaryColor = config['primaryColor'] || '#dcb500';
var primaryDarkColor = config['primaryDarkColor'] || '#a08400';
var prepTime = config['prepTime'] || '10';
var labelTrending = config['labelTrending'] ? config['labelTrending'].toUpperCase() : 'TRENDING:';
var labelPickup = config['labelPickup'] ? config['labelPickup'].toUpperCase() : 'TAKE-OUT';
var deliveryOptions = config['deliveryOptions'] || [];
var pickupOptions = config['pickupOptions'] || [];
var menuItems = data && data['menuItems'] || [];
var menuUrl = RitualTopBar.maybeAddTopbarParam(RitualTopBar.getMenuUrl(pickupOptions));
var locationsUrl = config['pickupLocationUrl'] && pickupOptions.length > 1 ? config['pickupLocationUrl'] : '';
var isBgWhite = config['isBgWhite'] == 1 || bgColor.toLowerCase() == '#ffffff';
var textColor = isBgWhite ? '#211d1e' : '#fff';
var isPrimaryColorWhite = config['isPrimaryColorWhite'] == 1 || primaryColor.toLowerCase() == '#ffffff';
var labelPickupColor = isPrimaryColorWhite ? '#000000' : '#ffffff';
var orderAheadColor = isPrimaryColorWhite ? bgColor : primaryColor;
var dropdownArrowClass = isPrimaryColorWhite ? 'ico-arrow-down-dark' : 'ico-arrow-down-light';
var deliveryStyle = deliveryOptions.length > 0 ? '' : 'display: none;';
var enablePromo = !(config['enablePromo'] === 0);
target.style.backgroundColor = bgColor;
target.style.color = primaryColor;
var html = '';
html += '';
html += '';
target.innerHTML = html;
RitualTopBar.addEvents(pickupOptions);
var targets = document.getElementsByClassName('rl-pricetag');
for (var i = 0; i < targets.length; i++) {
targets[i].style.backgroundColor = primaryDarkColor;
targets[i].style.borderRightColor = primaryDarkColor;
}
};
/**
* @param {!Object} config
* @return {boolean} True if the config is valid.
*/
RitualTopBar.isValidConfg = function(config) {
var pickupOptions = config['pickupOptions'] || [];
for (var i = 0; i < pickupOptions.length; i++) {
if (pickupOptions[i]['url']) {
return true;
}
}
return false;
};
/**
* @param {!Array} pickupOptions
* @return {string} The first pickup option menu URL.
*/
RitualTopBar.getMenuUrl = function(pickupOptions) {
for (var i = 0; i < pickupOptions.length; i++) {
if (pickupOptions[i]['url']) {
return pickupOptions[i]['url'];
}
}
return '';
};
RitualTopBar.addEvents = function(pickupOptions) {
RitualTopBar.setDeliveryToggleOnClick(RitualTopBar.ID_DELIVERY, RitualTopBar.ID_DELIVERY_TOGGLE);
RitualTopBar.setDeliveryToggleOnClick(RitualTopBar.ID_MOBILE_ORDER_ONLINE, RitualTopBar.ID_MOBILE_ORDER_ONLINE_TOGGLE);
if (pickupOptions.length > 1) {
RitualTopBar.setPickupToggleOnClick(RitualTopBar.ID_PICKUP, RitualTopBar.ID_PICKUP_TOGGLE);
}
};
/**
* Set the delievery toggle onclick event.
* @param {string} idClick The id of the element to attach the onclick event.
* @param {string} idToggle The id of the element to toggle the display.
*/
RitualTopBar.setDeliveryToggleOnClick = function(idClick, idToggle) {
var targetClick = document.getElementById(idClick);
if (targetClick) {
targetClick.onclick = function() {
RitualTopBar.toggleElement(idToggle);
};
}
};
/**
* Set the pickup toggle onclick event.
* @param {string} idClick The id of the element to attach the onclick event.
* @param {string} idToggle The id of the element to toggle the display.
*/
RitualTopBar.setPickupToggleOnClick = function(idClick, idToggle) {
var targetClick = document.getElementById(idClick);
if (targetClick) {
targetClick.onclick = function() {
var toggleResult = RitualTopBar.toggleElement(idToggle);
if (toggleResult !== undefined) {
var animationTarget = document.getElementById(RitualTopBar.ID_BUTTON_ANIMATION);
if (animationTarget) {
animationTarget.className = animationTarget.className == RitualTopBar.ID_BUTTON_ANIMATION ? '' : RitualTopBar.ID_BUTTON_ANIMATION;
}
}
return false;
};
}
};
/**
* Toggle an elements display from none to block or block to none.
* @param {string} id The id of the element to toggle.
*/
RitualTopBar.toggleElement = function(id) {
var target = document.getElementById(id);
if (target) {
if (target.style.display != 'none') {
target.style.display = 'none';
return false;
} else {
target.style.display = 'block';
return true;
}
}
};
/**
* Convert a price into a fancy price.
* @param {string} p The price string.
* @return {string} The fancy price.
*/
RitualTopBar.getPriceHtml = function(p) {
return p.replace('$', '$').replace('.', '.') + '';
};
/**
* Add a query string param to a url.
* @param {string} url The price URL.
* @param {string} paramKey The param key.
* @param {string} paramValue The param value.
* @return {string} The url with param added.
*/
RitualTopBar.addParam = function(url, paramKey, paramValue) {
if (!paramKey) {
return url;
} else if ((url.indexOf('?' + paramKey) > -1) || ( url.indexOf('&' + paramKey) > -1)) {
return url;
}
var paramString = paramKey;
if (url.indexOf('?') > -1) {
paramString = '&' + paramString;
} else {
paramString = '?' + paramString;
}
if (paramValue) {
paramString += '=' + paramValue;
}
var anchorIndex = url.indexOf('#');
if (anchorIndex > -1) {
return url.substring(0, anchorIndex) + paramString + url.substring(anchorIndex);
} else {
return url + paramString;
}
};
/**
* Add a Topbar query param to a pickup url if it is a Ritual web order url.
* @param {string} pickupUrl The pickup URL.
* @return {string} The url with param added.
*/
RitualTopBar.maybeAddTopbarParam = function(pickupUrl) {
if (pickupUrl.indexOf('ritual.co') < 0) {
return pickupUrl;
}
return RitualTopBar.addParam(pickupUrl, RitualTopBar.RITUAL_PICKUP_QUERY_PARAM_KEY, '' /* paramValue */);
};
RitualTopBar.init();