playable/dist/src/modules/ui/top-block/top-block.view.js

Video player based on HTML5Video

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var view_1 = (0, tslib_1.__importDefault)(require("../core/view"));
var htmlToElement_1 = (0, tslib_1.__importDefault)(require("../core/htmlToElement"));
var getElementByHook_1 = (0, tslib_1.__importDefault)(require("../core/getElementByHook"));
var templates_1 = require("./templates");
var top_block_scss_1 = (0, tslib_1.__importDefault)(require("./top-block.scss"));
var TopBlockView = /** @class */ (function (_super) {
    (0, tslib_1.__extends)(TopBlockView, _super);
    function TopBlockView(config) {
        var _this = _super.call(this) || this;
        var callbacks = config.callbacks, elements = config.elements;
        _this._callbacks = callbacks;
        _this._initDOM(elements);
        _this._bindEvents();
        return _this;
    }
    TopBlockView.prototype.getElement = function () {
        return this._$rootElement;
    };
    TopBlockView.prototype._initDOM = function (elements) {
        this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.topBlockTemplate)({
            styles: this.styleNames,
        }));
        this._$titleContainer = (0, getElementByHook_1.default)(this._$rootElement, 'title-container');
        this._$liveIndicatorContainer = (0, getElementByHook_1.default)(this._$rootElement, 'live-indicator-container');
        this._$titleContainer.appendChild(elements.title);
        this._$liveIndicatorContainer.appendChild(elements.liveIndicator);
    };
    TopBlockView.prototype._preventClickPropagation = function (e) {
        e.stopPropagation();
    };
    TopBlockView.prototype._bindEvents = function () {
        this._$rootElement.addEventListener('click', this._preventClickPropagation);
        this._$rootElement.addEventListener('mousemove', this._callbacks.onBlockMouseMove);
        this._$rootElement.addEventListener('mouseleave', this._callbacks.onBlockMouseOut);
    };
    TopBlockView.prototype._unbindEvents = function () {
        this._$rootElement.removeEventListener('click', this._preventClickPropagation);
        this._$rootElement.removeEventListener('mousemove', this._callbacks.onBlockMouseMove);
        this._$rootElement.removeEventListener('mouseleave', this._callbacks.onBlockMouseOut);
    };
    TopBlockView.prototype.show = function () {
        this._$rootElement.classList.remove(this.styleNames.hidden);
    };
    TopBlockView.prototype.hide = function () {
        this._$rootElement.classList.add(this.styleNames.hidden);
    };
    TopBlockView.prototype.showContent = function () {
        this._$rootElement.classList.add(this.styleNames.activated);
    };
    TopBlockView.prototype.hideContent = function () {
        this._$rootElement.classList.remove(this.styleNames.activated);
    };
    TopBlockView.prototype.showTitle = function () {
        this._$titleContainer.classList.remove(this.styleNames.hidden);
    };
    TopBlockView.prototype.hideTitle = function () {
        this._$titleContainer.classList.add(this.styleNames.hidden);
    };
    TopBlockView.prototype.showLiveIndicator = function () {
        this._$liveIndicatorContainer.classList.remove(this.styleNames.hidden);
    };
    TopBlockView.prototype.hideLiveIndicator = function () {
        this._$liveIndicatorContainer.classList.add(this.styleNames.hidden);
    };
    TopBlockView.prototype.destroy = function () {
        this._unbindEvents();
        if (this._$rootElement.parentNode) {
            this._$rootElement.parentNode.removeChild(this._$rootElement);
        }
        this._$rootElement = null;
    };
    return TopBlockView;
}(view_1.default));
TopBlockView.extendStyleNames(top_block_scss_1.default);
exports.default = TopBlockView;
//# sourceMappingURL=top-block.view.js.map