haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor filmstrip module

This commit is contained in:
Ilya Daynatovich 2016-11-03 13:44:17 +02:00
parent 4b1dfb9a33
commit 51d48e18c6
1 changed files with 60 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
modules/UI/videolayout/FilmStrip.js
View File

@ -10,36 +10,35 @@ const FilmStrip = {
* emit/fire {UIEvents} (such as {UIEvents.TOGGLED_FILM_STRIP}). * emit/fire {UIEvents} (such as {UIEvents.TOGGLED_FILM_STRIP}).
*/ */
init (eventEmitter) { init (eventEmitter) {
this.iconMenuDownClassName = 'icon-menu-down';
this.iconMenuUpClassName = 'icon-menu-up';
this.filmStrip = $('#remoteVideos'); this.filmStrip = $('#remoteVideos');
this.eventEmitter = eventEmitter; this.eventEmitter = eventEmitter;
this.filmStripIsVisible = true; this.filmStripIsVisible = true;
this.renderFilmstripToolbar(); this._initFilmStripToolbar();
this.activateHideButton(); this.registerListeners();
}, },
/** /**
* Attach 'click' listener to "hide filmstrip" button * Initializes the filmstrip toolbar
*/ */
activateHideButton () { _initFilmStripToolbar() {
$('#videospace').on('click', '#hideVideoToolbar', () => { let toolbar = this._generateFilmStripToolbar();
var icon = document.querySelector('#hideVideoToolbar i');
this.filmStripIsVisible = !this.filmStripIsVisible; document.querySelector('#videospace')
this.toggleFilmStrip(this.filmStripIsVisible); .insertBefore(toolbar, document.querySelector('#remoteVideos'));
icon.classList.remove( let iconSelector = '#hideVideoToolbar i';
this.filmStripIsVisible ? 'icon-menu-up' : 'icon-menu-down'); this.toggleFilmStripIcon = document.querySelector(iconSelector);
icon.classList.add(
this.filmStripIsVisible ? 'icon-menu-down' : 'icon-menu-up');
});
}, },
/** /**
* Shows toolbar on the right of the filmstrip * Generates HTML layout for filmstrip toolbar
* @returns {HTMLElement}
* @private
*/ */
renderFilmstripToolbar () { _generateFilmStripToolbar() {
// create toolbar let container = document.createElement('div');
var container = document.createElement('div');
container.className = 'filmstripToolbar'; container.className = 'filmstripToolbar';
container.innerHTML = ` container.innerHTML = `
@ -49,9 +48,42 @@ const FilmStrip = {
</button> </button>
`; `;
// show toolbar return container;
document.querySelector('#videospace') },
.insertBefore(container, document.querySelector('#remoteVideos'));
/**
* Attach 'click' listener to "hide filmstrip" button
*/
registerListeners() {
$('#videospace').on('click', '#hideVideoToolbar', () => {
this.filmStripIsVisible = !this.filmStripIsVisible;
this.toggleFilmStrip(this.filmStripIsVisible);
if (this.filmStripIsVisible) {
this.showMenuDownIcon();
} else {
this.showMenuUpIcon();
}
});
},
/**
* Changes classes of icon for showing down state
*/
showMenuDownIcon() {
let icon = this.toggleFilmStripIcon;
icon.classList.add(this.iconMenuDownClassName);
icon.classList.remove(this.iconMenuUpClassName);
},
/**
* Changes classes of icon for showing up state
*/
showMenuUpIcon() {
let icon = this.toggleFilmStripIcon;
icon.classList.add(this.iconMenuUpClassName);
icon.classList.remove(this.iconMenuDownClassName);
}, },
/** /**