Set special CSS class for the button depending on its visibility

This commit is contained in:
Fedor A. Fetisov 2018-10-17 18:25:47 +03:00
parent b83f32cd3f
commit 44db483a25
2 changed files with 20 additions and 8 deletions

View File

@ -2,6 +2,8 @@
It make the button represents actual operator's state and automatically hides it if the chat was started. It make the button represents actual operator's state and automatically hides it if the chat was started.
Additionaly the plugin sets the class `mibew_visible` or `mibew_hidden` for the button depending on its alleged visibility. It can be useful for implementing some custom effects with cloaking mode (see below) set to `none`.
The plugin needs the feature "Tracking and inviting" to be enabled. Otherwise it will just not work. The plugin needs the feature "Tracking and inviting" to be enabled. Otherwise it will just not work.
NB.: If one enabled the feature "Tracking and inviting" for the first time, the button should be regenerated. NB.: If one enabled the feature "Tracking and inviting" for the first time, the button should be regenerated.
@ -36,7 +38,7 @@ Type: `String`
Default: `visibility` Default: `visibility`
Specify a mode to hide the button after the start of the chat. Possible values: `visibility` (hide using `visibility` CSS property), `display` (hide using `display` CSS property), `none` (do nothing). Specify a mode to cloak the button after the start of the chat. Possible values: `visibility` (cloak using `visibility` CSS property), `display` (cloak using `display` CSS property), `none` (do nothing).
### config.submode ### config.submode

View File

@ -5,14 +5,15 @@
var originalSrc = img.src.replace(/&dummy=\d+/, ''); var originalSrc = img.src.replace(/&dummy=\d+/, '');
img.src = originalSrc + "&dummy=" + (new Date()).getTime(); img.src = originalSrc + "&dummy=" + (new Date()).getTime();
// Check whether we need to hide the button // Hide the button if all popups are open or make it visible otherwise
var visible = false;
for(var key in Mibew.Objects.ChatPopups) {
var popup = Mibew.Objects.ChatPopups[key];
visible = visible || !popup.isOpened;
}
// Check whether we actually need to hide the button
if (data.refreshButton.mode != 'none') { if (data.refreshButton.mode != 'none') {
// Hide the button if all popups are open or make it visible otherwise
var visible = false;
for(var key in Mibew.Objects.ChatPopups) {
var popup = Mibew.Objects.ChatPopups[key];
visible = visible || !popup.isOpened;
}
if (data.refreshButton.mode == 'visibility') { if (data.refreshButton.mode == 'visibility') {
img.style.visibility = visible ? 'visible' : 'hidden'; img.style.visibility = visible ? 'visible' : 'hidden';
} }
@ -20,5 +21,14 @@
img.style.display = visible ? data.refreshButton.submode : 'none'; img.style.display = visible ? data.refreshButton.submode : 'none';
} }
} }
// Set appropriate class for the button depending on its alleged visibility
img.className = img.className.replace(/ mibew_(visible|hidden)/, '');
if (visible) {
img.className = img.className.concat(' mibew_visible');
}
else {
img.className = img.className.concat(' mibew_hidden');
}
} }
})(Mibew); })(Mibew);