chatwidgetxyz
Version:
A chatbot Plug and Play widget
78 lines (77 loc) • 4.42 kB
JavaScript
var ChatWidget = /** @class */ (function () {
function ChatWidget(_a) {
var position = _a.position;
this.position = this.getPosition(position); // {bottom : 30px , right : "30px"}
this.open = false;
this.initialise();
this.createStyle();
this.createMessageContainerContent();
}
ChatWidget.prototype.getPosition = function (position) {
var _a;
var _b = position.split('-'), vertical = _b[0], horizontal = _b[1];
return _a = {},
_a[vertical] = '30px',
_a[horizontal] = '30px',
_a;
};
ChatWidget.prototype.initialise = function () {
var _this = this;
var container = document.createElement('div');
container.style.position = 'fixed';
Object.keys(this.position).forEach(function (key) { return (container.style[key] = _this.position[key]); });
document.body.appendChild(container);
var buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container');
var chatIcon = document.createElement('img');
chatIcon.src = './assets/chat.svg';
chatIcon.classList.add('icon');
this.chatIcon = chatIcon;
var closeIcon = document.createElement('img');
closeIcon.src = './assets/close.svg';
closeIcon.classList.add('icon', 'hidden');
this.closeIcon = closeIcon;
this.messageContainer = document.createElement('div');
this.messageContainer.classList.add('hidden', 'message-container');
// Todo create all the container of the message here
buttonContainer.appendChild(this.chatIcon);
buttonContainer.appendChild(this.closeIcon);
buttonContainer.addEventListener('click', this.toggleOpen.bind(this));
container.appendChild(buttonContainer);
container.appendChild(this.messageContainer);
};
ChatWidget.prototype.createMessageContainerContent = function () {
this.messageContainer.innerHTML = ''; // deleting all the previous messages
var botAvtar = document.createElement('img');
botAvtar.src = './assets/bot.svg';
var text = document.createElement('p');
text.innerHTML = 'Well Well';
var message = document.createElement('div');
message.classList.add('message');
message.appendChild(botAvtar);
message.appendChild(text);
this.messageContainer.appendChild(message);
};
// Adding Style to the Widget
ChatWidget.prototype.toggleOpen = function () {
this.open = !this.open;
if (this.open) {
this.chatIcon.classList.add('hidden');
this.closeIcon.classList.remove('hidden');
this.messageContainer.classList.remove('hidden');
}
else {
this.createMessageContainerContent();
this.chatIcon.classList.remove('hidden');
this.closeIcon.classList.add('hidden');
this.messageContainer.classList.add('hidden');
}
};
ChatWidget.prototype.createStyle = function () {
var styleTag = document.createElement('style');
document.head.appendChild(styleTag);
styleTag.innerHTML = "\n .icon {\n cursor : pointer;\n width: 70%;\n position : absolute ;\n top : 9px;\n left : 9px;\n transition : transform .3s ease;\n }\n\n .hidden {\n transform : scale(0);\n }\n\n .button-container {\n background : #04b73f;\n width : 60px;\n height : 60px;\n border-radius : 50%;\n }\n\n .message-container {\n box-shadow : 0 0 18px 8px rgba (0,0,0,0.1);\n widht : 400px;\n right : -25px;\n bottom : 75px;\n max-height : 400px;\n position : absolute;\n transition : max-height .2s ease;\n font-family : Helvetica , Arial ,sans-serif\n }\n\n .message-container.hidden {\n max-height : 0px\n }\n\n .message-container.message {\n margin : 0;\n padding : 10px;\n width : 100%;\n height : 10px;\n color : #ffffff;\n background : #04b73f;\n }\n \n ";
};
return ChatWidget;
}());
export { ChatWidget };