import ldBar from '@loadingio/loading-bar/lib/loading-bar.js';
import '@loadingio/loading-bar/dist/loading-bar.css';
let hostesses = [];
let intervals = [];
Shiny.addCustomMessageHandler('hostess-init', (opts) => {
hostesses[opts.id] = new ldBar("#" + opts.id);
if(!opts.infinite)
return ;
let value = 0,
inc = 0,
end = 100;
intervals[opts.id] = setInterval(function(){
inc = ((end - value) / (end + value));
value = Math.round((value + inc + Number.EPSILON) * 1000) / 1000
hostesses[opts.id].set(value);
}, 350);
});
Shiny.addCustomMessageHandler('hostess-set', (opts) => {
hostesses[opts.id].set(opts.value);
if(opts.value != 100)
return ;
let notif = document.getElementById(opts.id);
if(notif != undefined)
notif.remove();
});
Shiny.addCustomMessageHandler('hostess-notify', (opts) => {
// create div
let notification = document.createElement("DIV");
// position div
let pos = position_to_coords(opts.position);
notification.style.bottom = pos.bottom;
notification.style.right = pos.right;
notification.style.left = pos.left;
notification.style.top = pos.top;
notification.height = '100px';
notification.style.color = opts.text_color;
notification.style.backgroundColor = opts.background_color;
notification.style.position = "fixed";
notification.innerHTML = opts.html;
notification.style.zIndex = 999;
notification.id = opts.id;
notification.classList.add("waitress-notification");
document.body.appendChild(notification);
hostesses[opts.id] = new ldBar("#" + opts.id);
if(!opts.infinite)
return ;
let value = 0,
inc = 0,
end = 100;
intervals[opts.id] = setInterval(function(){
inc = ((end - value) / (end + value));
value = Math.round((value + inc + Number.EPSILON) * 1000) / 1000
hostesses[opts.id].set(value);
}, 350);
});
Shiny.addCustomMessageHandler('hostess-end', (opts) => {
let bar = document.getElementById(opts.id);
if(opts.infinite){
clearInterval(intervals[opts.id]);
hostesses[opts.id].set(95);
}
if(bar != undefined)
setTimeout(function(){
bar.remove();
}, 350);
});
/**
* Convert position of to coordinates.
* @function
* @param {string} position - Convert position to an array of
* coordinates.
*/
const position_to_coords = (position) => {
let pos = {};
let base_y = 100;
let current_notifications = document.getElementsByClassName("waitress-notification");
for(let n of current_notifications){
base_y = base_y + 100 + n.offsetHeight;
}
if(position == "bl"){
pos.top = "auto";
pos.bottom = (base_y + 10) + 'px';
pos.left = "10px";
pos.right = "auto";
} else if (position == "tl"){
pos.top = (base_y + 10) + 'px';
pos.bottom = "auto";
pos.left = "10px";
pos.right = "auto";
} else if(position == "br"){
pos.top = "auto";
pos.bottom = (base_y + 10) + 'px';
pos.left = "auto";
pos.right = "10px";
} else if(position == "tr"){
pos.top = (base_y + 10) + 'px';
pos.bottom = "auto";
pos.left = "auto";
pos.right = "10px";
}
return pos;
}