jiti-meet/modules/UI/util/UIUtil.js

/* global $, interfaceConfig */

/**
 * Associates the default display type with corresponding CSS class
 */
const SHOW_CLASSES = {
    'block': 'show',
    'inline': 'show-inline',
    'list-item': 'show-list-item'
};

/**
 * Contains sizes of thumbnails
 * @type {{SMALL: number, MEDIUM: number}}
 */
const ThumbnailSizes = {
    SMALL: 60,
    MEDIUM: 80
};

/**
 * Contains font sizes for thumbnail indicators
 * @type {{SMALL: number, MEDIUM: number}}
 */
const IndicatorFontSizes = {
    SMALL: 5,
    MEDIUM: 6,
    NORMAL: 8
};

/**
 * Created by hristo on 12/22/14.
 */
const UIUtil = {

    /**
     * Returns the available video width.
     */
    getAvailableVideoWidth() {
        return window.innerWidth;
    },

    /**
     * Changes the style class of the element given by id.
     */
    buttonClick(id, classname) {
        // add the class to the clicked element
        $(`#${id}`).toggleClass(classname);
    },

    /**
     * Returns the text width for the given element.
     *
     * @param el the element
     */
    getTextWidth(el) {
        return el.clientWidth + 1;
    },

    /**
     * Returns the text height for the given element.
     *
     * @param el the element
     */
    getTextHeight(el) {
        return el.clientHeight + 1;
    },

    /**
     * Escapes the given text.
     */
    escapeHtml(unsafeText) {
        return $('<div/>').text(unsafeText)
            .html();
    },

    /**
     * Unescapes the given text.
     *
     * @param {string} safe string which contains escaped html
     * @returns {string} unescaped html string.
     */
    unescapeHtml(safe) {
        return $('<div />').html(safe)
            .text();
    },

    imageToGrayScale(canvas) {
        const context = canvas.getContext('2d');
        const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
        const pixels = imgData.data;

        for (let i = 0, n = pixels.length; i < n; i += 4) {
            const grayscale
                = (pixels[i] * 0.3)
                    + (pixels[i + 1] * 0.59)
                    + (pixels[i + 2] * 0.11);

            pixels[i] = grayscale; // red
            pixels[i + 1] = grayscale; // green
            pixels[i + 2] = grayscale; // blue
            // pixels[i+3]              is alpha
        }

        // redraw the image in black & white
        context.putImageData(imgData, 0, 0);
    },

    /**
     * Inserts given child element as the first one into the container.
     * @param container the container to which new child element will be added
     * @param newChild the new element that will be inserted into the container
     */
    prependChild(container, newChild) {
        const firstChild = container.childNodes[0];

        if (firstChild) {
            container.insertBefore(newChild, firstChild);
        } else {
            container.appendChild(newChild);
        }
    },

    /**
     * Indicates if the setting section is enabled.
     *
     * @param name the name of the setting section as defined in
     * interface_config.js and SettingsMenu.js
     * @returns {boolean} {true} to indicate that the given setting section
     * is enabled, {false} - otherwise
     */
    isSettingEnabled(name) {
        return interfaceConfig.SETTINGS_SECTIONS.indexOf(name) !== -1;
    },

    /**
     * Indicates if Authentication Section should be shown
     *
     * @returns {boolean}
     */
    isAuthenticationEnabled() {
        return interfaceConfig.AUTHENTICATION_ENABLE;
    },

    /**
     * Shows / hides the element given by id.
     *
     * @param {string|HTMLElement} idOrElement the identifier or the element
     *        to show/hide
     * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
     */
    setVisible(id, visible) {
        let element;

        if (id instanceof HTMLElement) {
            element = id;
        } else {
            element = document.getElementById(id);
        }

        if (!element) {
            return;
        }

        if (!visible) {
            element.classList.add('hide');
        } else if (element.classList.contains('hide')) {
            element.classList.remove('hide');
        }

        const type = this._getElementDefaultDisplay(element.tagName);
        const className = SHOW_CLASSES[type];

        if (visible) {
            element.classList.add(className);
        } else if (element.classList.contains(className)) {
            element.classList.remove(className);
        }
    },

    /**
     * Returns default display style for the tag
     * @param tag
     * @returns {*}
     * @private
     */
    _getElementDefaultDisplay(tag) {
        const tempElement = document.createElement(tag);

        document.body.appendChild(tempElement);
        const style = window.getComputedStyle(tempElement).display;

        document.body.removeChild(tempElement);

        return style;
    },

    /**
     * Shows / hides the element with the given jQuery selector.
     *
     * @param {jQuery} jquerySelector the jQuery selector of the element to
     * show / shide
     * @param {boolean} isVisible
     */
    setVisibleBySelector(jquerySelector, isVisible) {
        if (jquerySelector && jquerySelector.length > 0) {
            jquerySelector.css('visibility', isVisible ? 'visible' : 'hidden');
        }
    },

    /**
     * Redirects to a given URL.
     *
     * @param {string} url - The redirect URL.
     * NOTE: Currently used to redirect to 3rd party location for
     * authentication. In most cases redirectWithStoredParams action must be
     * used instead of this method in order to preserve curent URL params.
     */
    redirect(url) {
        window.location.href = url;
    },

    /**
     * Indicates if we're currently in full screen mode.
     *
     * @return {boolean} {true} to indicate that we're currently in full screen
     * mode, {false} otherwise
     */
    isFullScreen() {
        return document.fullscreenElement
            || document.mozFullScreenElement
            || document.webkitFullscreenElement
            || document.msFullscreenElement;
    },

    /**
     * Exits full screen mode.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
     */
    exitFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    },

    /**
     * Enter full screen mode.
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
     */
    enterFullScreen() {
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement
                .webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    },

    /**
      * Create html attributes string out of object properties.
      * @param {Object} attrs object with properties
      * @returns {String} string of html element attributes
      */
    attrsToString(attrs) {
        return (
            Object.keys(attrs).map(key => ` ${key}="${attrs[key]}"`)
.join(' '));
    },

    /**
     * Checks if the given DOM element is currently visible. The offsetParent
     * will be null if the "display" property of the element or any of its
     * parent containers is set to "none". This method will NOT check the
     * visibility property though.
     * @param {el} The DOM element we'd like to check for visibility
     */
    isVisible(el) {
        return el.offsetParent !== null;
    },

    /**
     * Shows / hides the element given by {selector} and sets a timeout if the
     * {hideDelay} is set to a value > 0.
     * @param selector the jquery selector of the element to show/hide.
     * @param show a {boolean} that indicates if the element should be shown or
     * hidden
     * @param hideDelay the value in milliseconds to wait before hiding the
     * element
     */
    animateShowElement(selector, show, hideDelay) {
        if (show) {
            if (!selector.is(':visible')) {
                selector.css('display', 'inline-block');
            }

            selector.fadeIn(300,
                () => {
                    selector.css({ opacity: 1 });
                }
            );

            if (hideDelay && hideDelay > 0) {
                setTimeout(
                    () => {
                        selector.fadeOut(
                            300,
                            () => {
                                selector.css({ opacity: 0 });
                            });
                    },
                    hideDelay);
            }
        } else {
            selector.fadeOut(300,
                () => {
                    selector.css({ opacity: 0 });
                }
            );
        }
    },

    /**
     * Parses the given cssValue as an Integer. If the value is not a number
     * we return 0 instead of NaN.
     * @param cssValue the string value we obtain when querying css properties
     */
    parseCssInt(cssValue) {
        return parseInt(cssValue, 10) || 0;
    },

    /**
     * Adds href value to 'a' link jquery object. If link value is null,
     * undefined or empty string, disables the link.
     * @param {object} aLinkElement the jquery object
     * @param {string} link the link value
     */
    setLinkHref(aLinkElement, link) {
        if (link) {
            aLinkElement.attr('href', link);
        } else {
            aLinkElement.css({
                'pointer-events': 'none',
                'cursor': 'default'
            });
        }
    },

    /**
     * Returns font size for indicators according to current
     * height of thumbnail
     * @param {Number} [thumbnailHeight] - current height of thumbnail
     * @returns {Number} - font size for current height
     */
    getIndicatorFontSize(thumbnailHeight) {
        const height = typeof thumbnailHeight === 'undefined'
            ? $('#localVideoContainer').height() : thumbnailHeight;

        const { SMALL, MEDIUM } = ThumbnailSizes;
        let fontSize = IndicatorFontSizes.NORMAL;

        if (height <= SMALL) {
            fontSize = IndicatorFontSizes.SMALL;
        } else if (height > SMALL && height <= MEDIUM) {
            fontSize = IndicatorFontSizes.MEDIUM;
        }

        return fontSize;
    }
};

export default UIUtil;