// "use strict"; var generateVideoCall = function (options) { var defaults = { roofKey: '', VCUser: '', bottomPosition: 0, rightPostion: 0, VCButtonOn: 0, VCMaximizedImg: 'https://media.flickfusion.net/videocall/images/button_lg.png', VCMinimizedImg: 'https://media.flickfusion.net/videocall/images/button_sm.png', VCImgWidth: '360' }; this.vidCallURL = 'https://media.flickfusion.net/videocall/external_vidcallV3.php'; this.options = extend(defaults, options); this.generateButtons(); }; generateVideoCall.prototype.generateButtons = function () { var fromVidCallURL = this.vidCallURL + '?roof_key=' + this.options.roofKey; if (this.options.VCUser != "") fromVidCallURL = fromVidCallURL + "&rd=1&manual_user_name=" + this.options.VCUser; var callWrapper = document.createElement('div'); callWrapper.className = 'vid_call_wrapper'; callWrapper.style.cssText = 'z-index: 999999; position: fixed; bottom: ' + this.options.bottomPosition + 'px; right: ' + this.options.rightPostion + 'px;'; if (this.options.VCButtonOn == '1') { // create link let anchoreLink = document.createElement('a'); anchoreLink.setAttribute('target', '_blank'); anchoreLink.href = fromVidCallURL; var VCWrapper = document.createElement('div'); VCWrapper.className = 'service_wrapper'; // maximized image var VCWrapperMaximinzed = document.createElement('img'); VCWrapperMaximinzed.classList.add('large_call_img'); VCWrapperMaximinzed.src = this.options.VCMaximizedImg; VCWrapperMaximinzed.width = this.options.VCImgWidth; VCWrapper.appendChild(VCWrapperMaximinzed); // minimized image var VCWrapperMinimized = document.createElement('img'); VCWrapperMinimized.classList.add('small_call_img', 'is_hidden'); VCWrapperMinimized.src = this.options.VCMinimizedImg; VCWrapperMinimized.width = this.options.VCImgWidth; VCWrapper.appendChild(VCWrapperMinimized); anchoreLink.appendChild(VCWrapper); callWrapper.appendChild(anchoreLink); var closeButton = document.createElement('span'); closeButton.style.cssText = 'align-self: flex-end; position: absolute; right: 40px; top: 33px; color:#fff;'; closeButton.classList.add('close_btn'); callWrapper.appendChild(closeButton); let style = document.createElement('style'); style.innerText = ".close_btn::before { content: '\\2A2F'; font-size: 25px; align-self: flex-end; position: absolute; background-color: #043b9c; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 500ms ease; z-index: 999; } .close_btn::after { content: 'Minimize'; position: absolute; right: -7px;line-height: 14px; display: flex; top: 1px; font-size: 12px; background-color: #043b9c; padding: 4px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; opacity: 0; transition: all 400ms ease; cursor: pointer; padding-right: 8px; } .close_btn:hover::after { transition: all 400ms ease; opacity: 1; } .close_btn:hover::before { transition: all 200ms ease; } .is_hidden { display: none; } .vid_call_wrapper.on_open .small_call_img { display: block; } .vid_call_wrapper.on_open .large_call_img { display: none; } .vid_call_wrapper.on_open .close_btn::after { content: 'Maximize'; } .vid_call_wrapper.on_open .close_btn::before { content: '\\021D6'; } @media(max-width:812px){.vid_call_wrapper{max-width:200px;width:100%;}.close_btn{right:20px !important;top:5px !important;}.close_btn::before{width:20px;height:20px;font-size:17px;}.close_btn::after{font-size:10px;top:0px;right:-8px;height:12px;line-height:12px;}}"; document.head.appendChild(style); const isMinimized = localStorage.getItem("isMinimized"); if (isMinimized === "true") { callWrapper.classList.add("on_open"); } closeButton.onclick = function () { // callWrapper.classList.toggle('on_open'); toggleOpenClass(); }; // if(window.innerWidth < 800){ // callWrapper.classList.add('on_open'); // } function toggleOpenClass() { callWrapper.classList.toggle("on_open"); const isMinimized = callWrapper.classList.contains("on_open"); localStorage.setItem("isMinimized", isMinimized); } document.querySelector('body').appendChild(callWrapper); } }; var extend = function (defaults, options) { var extended = {}; var prop; for (prop in defaults) { if (Object.prototype.hasOwnProperty.call(defaults, prop)) { extended[prop] = defaults[prop]; } } for (prop in options) { if (Object.prototype.hasOwnProperty.call(options, prop)) { extended[prop] = options[prop]; } } return extended; }; document.addEventListener('DOMContentLoaded', function (event) { var generate = new generateVideoCall({ roofKey: 'A3C8ACC8-F456-180B-CC88-85E7E133B7BC', VCUser: '', bottomPosition: '0', rightPostion: '0', VCButtonOn: '1', VCMaximizedImg: '//media.flickfusion.net/videocall/images/ff_NADA_2021.png', VCMinimizedImg: '//media.flickfusion.net/videocall/images/button_sm.png', VCImgWidth: '360' }); });