From 00213f806c52d1f867767b6d0ee0f8a0b68089fb Mon Sep 17 00:00:00 2001 From: "Fedor A. Fetisov" Date: Wed, 28 Dec 2016 03:28:49 +0300 Subject: [PATCH] Implement minification of the chat iframe Fixes #153 --- src/mibew/js/source/chat_popup.js | 31 ++++++++++++++++++ src/mibew/styles/chats/default/iframe.css | 31 ++++++++++++++++++ .../default/images/default-logo-short.png | Bin 0 -> 875 bytes .../styles/chats/default/images/right.png | Bin 0 -> 936 bytes 4 files changed, 62 insertions(+) create mode 100644 src/mibew/styles/chats/default/images/default-logo-short.png create mode 100644 src/mibew/styles/chats/default/images/right.png diff --git a/src/mibew/js/source/chat_popup.js b/src/mibew/js/source/chat_popup.js index ab8b2aef..1c187328 100644 --- a/src/mibew/js/source/chat_popup.js +++ b/src/mibew/js/source/chat_popup.js @@ -298,6 +298,12 @@ var Mibew = Mibew || {}; */ this.iframe = null; + /** + * Toggle iframe DOM Element. + * @type {Node} + */ + this.toggleDiv = null; + /** * Indicates if the popup is opened. * @type {Boolean} @@ -322,6 +328,11 @@ var Mibew = Mibew || {}; // The chat was not closed so the popup should be reopened when a // new page is visited. this.open(openedChatUrl); + // Check minification status of the popup and toggle it if needed. + var minifiedPopup = Mibew.Utils.readCookie('mibew-chat-frame-minified-' + this.id); + if (minifiedPopup === 'true') { + this.toggle(); + } } }; @@ -387,6 +398,21 @@ var Mibew = Mibew || {}; this.iframe.setAttribute('frameBorder', 0); this.iframe.style.display = 'none'; document.getElementsByTagName('body')[0].appendChild(this.iframe); + + // Setup toggle element. As it's not a part of the iframe, it should be + // treated separately. + this.toggleDiv = document.createElement('div'); + this.toggleDiv.setAttribute('id', 'mibew-chat-frame-toggle-' + this.id); + this.toggleDiv.className = 'mibew-chat-frame-toggle mibew-chat-frame-toggle-on'; + Mibew.Utils.addEventListener(this.toggleDiv, 'click', function(event) { + var popups = Mibew.Objects.ChatPopups, + matches = /^mibew-chat-frame-toggle-([0-9A-Za-z]+)$/.exec(this.id); + + if (matches && popups[matches[1]]) { + popups[matches[1]].toggle(); + } + }); + document.getElementsByTagName('body')[0].appendChild(this.toggleDiv); } this.iframe.style.display = 'block'; @@ -406,7 +432,9 @@ var Mibew = Mibew || {}; this.iframe.style.display = 'none'; this.iframe.src = ''; this.isOpened = false; + this.toggleDiv.style.display = 'none'; Mibew.Utils.deleteCookie('mibew-chat-frame-' + this.id); + Mibew.Utils.deleteCookie('mibew-chat-frame-minified' + this.id); }; /** @@ -415,6 +443,9 @@ var Mibew = Mibew || {}; Mibew.ChatPopup.IFrame.prototype.toggle = function() { this.iframe.style.display = this.isMinified ? "block" : "none"; this.isMinified = !this.isMinified; + this.toggleDiv.className = 'mibew-chat-frame-toggle mibew-chat-frame-toggle-' + + (this.isMinified ? 'off' : 'on'); + Mibew.Utils.createCookie('mibew-chat-frame-minified-' + this.id, this.isMinified); }; /** diff --git a/src/mibew/styles/chats/default/iframe.css b/src/mibew/styles/chats/default/iframe.css index 39ad0592..f10a30bd 100644 --- a/src/mibew/styles/chats/default/iframe.css +++ b/src/mibew/styles/chats/default/iframe.css @@ -35,3 +35,34 @@ iframe.mibew-chat-frame { -moz-box-shadow: 0 1px 1px 1px #ddd !important; -webkit-box-shadow: 0 1px 1px 1px #ddd !important; } + +div.mibew-chat-frame-toggle { + border: 1px solid black; + position: fixed !important; + border: 1px solid #aaa !important; + overflow: hidden !important; + z-index: 100 !important; + border-radius: 10px !important; + -webkit-border-radius: 10px !important; + -moz-border-radius: 10px !important; + box-shadow: 0 1px 1px 1px #ddd !important; + -moz-box-shadow: 0 1px 1px 1px #ddd !important; + -webkit-box-shadow: 0 1px 1px 1px #ddd !important; + cursor: pointer; +} + +div.mibew-chat-frame-toggle-on { + width: 27px !important; + height: 480px !important; + right: 517px !important; + bottom: 5px !important; + background: #ffffff url("images/right.png") scroll no-repeat 0 0; +} + +div.mibew-chat-frame-toggle-off { + width: 40px !important; + height: 40px !important; + right: 5px !important; + bottom: 5px !important; + background: #ffffff url("images/default-logo-short.png") scroll no-repeat 4px 5px; +} diff --git a/src/mibew/styles/chats/default/images/default-logo-short.png b/src/mibew/styles/chats/default/images/default-logo-short.png new file mode 100644 index 0000000000000000000000000000000000000000..17b82e79860d1be076b187f6b544e22824183963 GIT binary patch literal 875 zcmV-x1C;!UP)uO`8b6RF+ncp|_-`QCe zj#?qW0v0i`)&`5!FF6vEy%kD{tppeYYuD3tMvFi;(BK*{q zJAl?il9ohr=mDL*Xi5#Ki4cC`L*9WfYORiG--OD@DAY9nk$XX6#0GJk8Y-{qzJ^DHZn1xpr1R3H&QdZjQ!^yQs_5- z?=5ge*mUX^oxS~B-M5~)-76?93NmOrSwTdEl;h$vG{?6r<;KAcgo1vy*4?I~r*HHb z6OLNVK-FlcaYfizGmj(d7GoNkw}~Y0K6mr-LnrOseTWFtLIqUMoWk50rBs%c5;T2W zZfwSS^n%|0!7(S|m;fVRA*Esc!Z|FhEN6cCWGbeHFbxAqgSIEX(%O;aXf| z(}&+@P*&)c}!^p=$EV7o#|VE{uZy1xwoU>X|J&?u!mCHD+4(lSXhEwV)@ z3Yg=Xgzf1SIUgn(*a7tAXwUy0KfvZ;d4{9blyM~Y11HiyIFe;`+z#9u>5s=EUBBKj zJz6+w5syU(N3B|*4ha4baxxx^9QtdY<9IBRxjYw-MGAmdKa_vXgzN(uka#Sz0N9nT zumIH)x{#z>asikHbf;I>tdMVF)i(P=vF< zBeIx*fm;}a85w5HkpK#^mw5WRvOnOFVGvcHF7Uh>C?uO15>euupPQSSR|4cRFgO>b zCYGe8D3oWGWGJ|M`Ua%vrLr?HF!Ol2IEGZ*dVAN``*DECv5(6OUxgZM6^ni4=lYl7 zUF-_qTIKndrZV1s<+SOAy1>EK7l)=sd0$+lwBmY7nUk7d?wqnT!~YIqwHiOa#+;1-EKfbE2ZkkGOPY;jS z>k=!jCWpSq8QIz1>t6GvNxpygZp-f7tJ5~GeEmB6?c296A3jVph**5_!r#Atk3SDv zy)GkjFAIGAU7)=6#E_n?L>i?^$!_`i4fVzy9^dj~n-Wb9*lS`c=iXXXnm~ z|NhnaCoJPMva(uLv~$hNmoHuJC@eZ4163PKYqL_ zL`zGAYkt@i$<5cac%0|Xo3~8s){Pqh8zbIueeH1#T#~hQ)#uNjUF-}E7tWn4yK~)d z)hof~QQ4&>B~zMWu1|el3Do}g=kmJh>R^dBD?2;C(2$iOb+=3JAJWs;55Dl^$&#A; z*Kgd2Pi1l|aN&ade&bK;_}OR)zQrfnGjbe`Wlmy?@&{!YPgg&ebxsLQ0Mdk+ AZ~y=R literal 0 HcmV?d00001