Mibew/mibew
1
0
Fork 0
mirror of https://github.com/Mibew/mibew.git synced 2025-02-07 16:24:43 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Wrap chat iframe into a div

Browse Source 
This could help make the design responsive
This commit is contained in:
Fedor A. Fetisov 2018-01-16 17:11:11 +03:00
parent 39309d1914
commit d1a1f51bf0
2 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/mibew/js/source/chat_popup.js
View File

@ -292,6 +292,12 @@ var Mibew = Mibew || {};
// Call parent constructor. // Call parent constructor.
BasePopup.call(this, options); BasePopup.call(this, options);
/**
* Wrapper for popup iframe DOM Element.
* @type {Node}
*/
this.wrapperDiv = null;
/** /**
* Popup iframe DOM Element. * Popup iframe DOM Element.
* @type {Node} * @type {Node}
@ -384,20 +390,23 @@ var Mibew = Mibew || {};
return; return;
} }
if (!this.iframe) { if (!this.wrapperDiv) {
// Create new iframe. // Create new iframe and its wrapper.
// There is a bug in IE <= 7 that make "name" attribute unchangeble // There is a bug in IE <= 7 that make "name" attribute unchangeble
// for elements that already exist. Thus a temporary div is used // for elements that already exist. Thus a temporary div is used
// here as a workaround. // here as a workaround.
var tmpDiv = document.createElement('div'); this.wrapperDiv = document.createElement('div');
tmpDiv.innerHTML = '<iframe name="mibewChat' + this.id + '"></iframe>'; this.wrapperDiv.className = 'mibew-chat-wrapper';
this.wrapperDiv.setAttribute('id', 'mibew-chat-wrapper-' + this.id);
this.wrapperDiv.style.display = 'none';
this.wrapperDiv.innerHTML = '<iframe name="mibewChat' + this.id + '"></iframe>';
this.iframe = tmpDiv.getElementsByTagName('iframe')[0]; this.iframe = this.wrapperDiv.getElementsByTagName('iframe')[0];
this.iframe.setAttribute('id', 'mibew-chat-frame-' + this.id); this.iframe.setAttribute('id', 'mibew-chat-frame-' + this.id);
this.iframe.className = 'mibew-chat-frame'; this.iframe.className = 'mibew-chat-frame';
this.iframe.setAttribute('frameBorder', 0); this.iframe.setAttribute('frameBorder', 0);
this.iframe.style.display = 'none';
document.getElementsByTagName('body')[0].appendChild(this.iframe); document.getElementsByTagName('body')[0].appendChild(this.wrapperDiv);
// Setup toggle element. As it's not a part of the iframe, it should be // Setup toggle element. As it's not a part of the iframe, it should be
// treated separately. // treated separately.
@ -415,7 +424,7 @@ var Mibew = Mibew || {};
document.getElementsByTagName('body')[0].appendChild(this.toggleDiv); document.getElementsByTagName('body')[0].appendChild(this.toggleDiv);
} }
this.iframe.style.display = 'block'; this.wrapperDiv.style.display = 'block';
this.toggleDiv.style.display = 'block'; this.toggleDiv.style.display = 'block';
this.iframe.src = url || this.buildChatUrl(); this.iframe.src = url || this.buildChatUrl();
this.isOpened = true; this.isOpened = true;
@ -430,7 +439,7 @@ var Mibew = Mibew || {};
return; return;
} }
this.iframe.style.display = 'none'; this.wrapperDiv.style.display = 'none';
this.iframe.src = ''; this.iframe.src = '';
this.isOpened = false; this.isOpened = false;
this.toggleDiv.style.display = 'none'; this.toggleDiv.style.display = 'none';
@ -442,7 +451,7 @@ var Mibew = Mibew || {};
* Toggles the popup. * Toggles the popup.
*/ */
Mibew.ChatPopup.IFrame.prototype.toggle = function() { Mibew.ChatPopup.IFrame.prototype.toggle = function() {
this.iframe.style.display = this.isMinified ? "block" : "none"; this.wrapperDiv.style.display = this.isMinified ? "block" : "none";
this.isMinified = !this.isMinified; this.isMinified = !this.isMinified;
this.toggleDiv.className = 'mibew-chat-frame-toggle mibew-chat-frame-toggle-' this.toggleDiv.className = 'mibew-chat-frame-toggle mibew-chat-frame-toggle-'
+ (this.isMinified ? 'off' : 'on'); + (this.isMinified ? 'off' : 'on');

15
src/mibew/styles/chats/default/iframe.css
View File

@ -14,6 +14,15 @@
* limitations under the License. * limitations under the License.
*/ */
div.mibew-chat-wrapper {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
position: fixed !important;
bottom: 5px !important;
right: 5px !important;
}
iframe.mibew-chat-frame { iframe.mibew-chat-frame {
background: url("images/ajax-loader.gif") center center no-repeat #f1f2f2 !important; background: url("images/ajax-loader.gif") center center no-repeat #f1f2f2 !important;
margin: 0 !important; margin: 0 !important;
@ -21,10 +30,8 @@ iframe.mibew-chat-frame {
border: 0 !important; border: 0 !important;
outline: 0 !important; outline: 0 !important;
border: 1px solid #aaa !important; border: 1px solid #aaa !important;
position: fixed !important;
bottom: 5px !important;
right: 5px !important;
width: 510px !important; width: 510px !important;
max-width: 100% !important;
height: 480px !important; height: 480px !important;
overflow: hidden !important; overflow: hidden !important;
z-index: 100 !important; z-index: 100 !important;
@ -55,7 +62,7 @@ div.mibew-chat-frame-toggle-on {
width: 27px !important; width: 27px !important;
height: 480px !important; height: 480px !important;
right: 517px !important; right: 517px !important;
bottom: 5px !important; bottom: 9px !important;
background: #ffffff url("images/right.png") scroll no-repeat 0 0; background: #ffffff url("images/right.png") scroll no-repeat 0 0;
} }