jiti-meet/modules/UI/side_pannels/SideContainerToggler.js

137 lines
4.1 KiB
JavaScript

/* global $ */
import UIEvents from "../../../service/UI/UIEvents";
/**
* Handles open and close of the extended toolbar side panel
* (chat, settings, etc.).
*
* @type {{init, toggle, isVisible, hide, show, resize}}
*/
const SideContainerToggler = {
/**
* Initialises this toggler by registering the listeners.
*
* @param eventEmitter
*/
init(eventEmitter) {
this.eventEmitter = eventEmitter;
// Adds a listener for the animation end event that would take care
// of hiding all internal containers when the extendedToolbarPanel is
// closed.
document.getElementById("sideToolbarContainer")
.addEventListener("animationend", function(e) {
if(e.animationName === "slideOutExt")
$("#sideToolbarContainer").children().each(function() {
if ($(this).hasClass("show"))
SideContainerToggler.hideInnerContainer($(this));
});
}, false);
},
/**
* Toggles the container with the given element id.
*
* @param {String} elementId the identifier of the container element to
* toggle
*/
toggle(elementId) {
let elementSelector = $(`#${elementId}`);
let isSelectorVisible = elementSelector.hasClass("show");
if (isSelectorVisible) {
this.hide();
}
else {
if (this.isVisible())
$("#sideToolbarContainer").children().each(function() {
if ($(this).id !== elementId && $(this).hasClass("show"))
SideContainerToggler.hideInnerContainer($(this));
});
if (!this.isVisible())
this.show();
this.showInnerContainer(elementSelector);
}
},
/**
* Returns {true} if the side toolbar panel is currently visible,
* otherwise returns {false}.
*/
isVisible() {
return $("#sideToolbarContainer").hasClass("slideInExt");
},
/**
* Returns {true} if the side toolbar panel is currently hovered and
* {false} otherwise.
*/
isHovered() {
return $("#sideToolbarContainer:hover").length > 0;
},
/**
* Hides the side toolbar panel with a slide out animation.
*/
hide() {
$("#sideToolbarContainer")
.removeClass("slideInExt").addClass("slideOutExt");
},
/**
* Shows the side toolbar panel with a slide in animation.
*/
show() {
if (!this.isVisible())
$("#sideToolbarContainer")
.removeClass("slideOutExt").addClass("slideInExt");
},
/**
* Hides the inner container given by the selector.
*
* @param {Object} containerSelector the jquery selector for the
* element to hide
*/
hideInnerContainer(containerSelector) {
containerSelector.removeClass("show").addClass("hide");
this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
containerSelector.attr('id'), false);
},
/**
* Shows the inner container given by the selector.
*
* @param {Object} containerSelector the jquery selector for the
* element to show
*/
showInnerContainer(containerSelector) {
// Before showing the container, make sure there is no other visible.
// If we quickly show a container, while another one is animating
// and animation never ends, so we do not really hide the first one and
// we end up with to shown panels
$("#sideToolbarContainer").children().each(function() {
if ($(this).hasClass("show"))
SideContainerToggler.hideInnerContainer($(this));
});
containerSelector.removeClass("hide").addClass("show");
this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
containerSelector.attr('id'), true);
},
/**
* TO FIX: do we need to resize the chat?
*/
resize () {
//let [width, height] = UIUtil.getSidePanelSize();
//Chat.resizeChat(width, height);
}
};
export default SideContainerToggler;