vanilla-js-chat/dist/vanillaJsChat.js

A tiny html chat using pure Javascript.

module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,r),a.l=!0,a.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="dist",r(r.s=0)}([function(e,t,r){"use strict";r(1);var n,a=(n=r(2))&&n.__esModule?n:{default:n},o=r(4),s=r(5);function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var u=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.chatInstances={chat:null,header:null,body:null,controller:null,wrapper:null},this.onSendMessageCallbacks=[]}var t,r,n;return t=e,(r=[{key:"destroyInstances",value:function(){this.chatInstances.chat=null,this.chatInstances.header=null,this.chatInstances.body=null,this.chatInstances.controller=null,this.chatInstances.wrapper=null}},{key:"isInstance",value:function(){return!!this.chatInstances.chat}},{key:"removeHtmlElements",value:function(){this.chatInstances.wrapper.removeChild(this.chatInstances.wrapper.firstChild)}},{key:"executeSendMessageCallbacks",value:function(e){e.length>0&&this.onSendMessageCallbacks.forEach((function(t){return t({message:e})}))}},{key:"scrollChatToBottom",value:function(){var e=this.chatInstances.body.scrollHeight;this.chatInstances.body.scrollTop=e}},{key:"addMessageEventListener",value:function(e,t){var r=this;e.addEventListener("click",(function(){r.executeSendMessageCallbacks(t.value),t.value=""})),t.addEventListener("keypress",(function(e){var n=e.key,a=e.target;"Enter"===n&&(r.executeSendMessageCallbacks(a.value),t.value="")}))}},{key:"init",value:function(e){var t=e||"vanilla-js-chat",r=document.querySelector("#".concat(t));if(!t||!r)return(0,o.throwWrapperIdError)();this.chatInstances.chat=a.default.renderElement(s.chatVdom),this.chatInstances.header=a.default.renderElement(s.headerVdom),this.chatInstances.body=a.default.renderElement(s.bodyVdom),this.chatInstances.controller=a.default.renderElement(s.controllerVdom),this.chatInstances.wrapper=r,a.default.render(function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({wrapper:r},this.chatInstances));var n=this.chatInstances.controller.querySelector("#vanilla-js-message"),i=this.chatInstances.controller.querySelector("#vanilla-js-button");this.addMessageEventListener(i,n)}},{key:"restart",value:function(){this.isInstance()&&this.close(),this.init()}},{key:"addMessage",value:function(e,t,r,n){if(!e||!e.length>0||!t||!t.length>0)return(0,o.throwWrapperMessageError)();if(!r||"string"!=typeof r)return throwWrapperColorError();if("right"!==n&&"left"!==n)return throwWrapperSideError();var l=(0,s.createMessageVdom)({name:e,message:t,color:r||"green",side:n||"right"}),c=a.default.renderElement(l);a.default.insertMessage(this.chatInstances.body,c),this.scrollChatToBottom()}},{key:"onSendMessage",value:function(e){if(!e||"function"!=typeof e)return throwOnSendMessageCallbackError();this.onSendMessageCallbacks.push(e)}},{key:"close",value:function(){this.isInstance()&&(this.removeHtmlElements(),this.destroyInstances())}}])&&i(t.prototype,r),n&&i(t,n),e}();e.exports=new u},function(e,t,r){},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n,a=(n=r(3))&&n.__esModule?n:{default:n};var o=new function(){return{render:function(e){var t=e.wrapper,r=e.chat,n=e.header,a=e.body,o=e.controller;r.appendChild(n),r.appendChild(a),r.appendChild(o),t.appendChild(r)},renderElement:function e(t){var r=a.default.createElement(t),n=t.children;return n&&n.forEach((function(t){r.appendChild(e(t))})),r},insertMessage:function(e,t){return e.insertBefore(t,null),e}}};t.default=o},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var n=new function(){var e=function(e){return Object.keys(e).filter((function(e){return"textContent"!==e}))},t=function(e,t){return function(r){return t.setAttribute(r,e[r])}},r=function(r,n){return e(n).forEach(t(n,r)),n.textContent&&(r.textContent=n.textContent),r};return{createElement:function(e){var t=e.type,n=e.props,a=document.createElement(t);return n&&r(a,n),a},getAttributesFromProps:e,setAttribute:t,addAttAndTextOnElement:r}};t.default=n},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.throwOnSendMessageCallbackError=t.throwWrapperColorError=t.throwWrapperSideError=t.throwWrapperMessageError=t.throwWrapperIdError=void 0;t.throwWrapperIdError=function(){throw"Html #vanilla-js-chat id not found"};t.throwWrapperMessageError=function(){throw"Name and message is required"};t.throwWrapperSideError=function(){throw"The side parameter should be right or left"};t.throwWrapperColorError=function(){throw"The color parameter should be a string"};t.throwOnSendMessageCallbackError=function(){throw"Callback should be a function"}},function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.chatVdom=t.controllerVdom=t.bodyVdom=t.createMessageVdom=t.headerVdom=void 0;t.headerVdom={type:"div",props:{class:"vanilla-js-chat__header"},children:[{type:"h1",props:{class:"vanilla-js-chat__title",textContent:"Conversa"}}]};t.createMessageVdom=function(e){var t=e.name,r=e.message,n=e.color,a=e.side;return{type:"div",props:{class:"vanilla-js-chat__message ".concat(a," ").concat(n)},children:[{type:"div",props:{class:"vanilla-js-chat__message__body"},children:[{type:"p",props:{class:"vanilla-js-chat__message__name",textContent:t}},{type:"p",props:{class:"vanilla-js-chat__message__text",textContent:r}}]}]}};t.bodyVdom={type:"div",props:{class:"vanilla-js-chat__body"}};t.controllerVdom={type:"div",props:{class:"vanilla-js-chat__controller"},children:[{type:"input",props:{id:"vanilla-js-message",name:"inputMessage",class:"vanilla-js-chat__input",textContent:"enviar"}},{type:"button",props:{name:"button",id:"vanilla-js-button",class:"vanilla-js-chat__btn",textContent:"enviar"}}]};t.chatVdom={type:"div",props:{class:"vanilla-js-chat"}}}]);