@awhere/api/widgets/WidgetBase/WidgetBase.js

The awesome aWhere API for JavaScript.

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WidgetBaseEvent = void 0;
var querystring_1 = require("querystring");
var uuid_1 = __importDefault(require("../../utils/uuid"));
var credential_1 = require("../../identity/credential");
var WidgetBaseEvent;
(function (WidgetBaseEvent) {
    WidgetBaseEvent["Ready"] = "ready";
    WidgetBaseEvent["PostWidgetParameters"] = "post-widget-parameters";
    WidgetBaseEvent["Error"] = "error";
    WidgetBaseEvent["CloseWithError"] = "close-with-error";
})(WidgetBaseEvent || (exports.WidgetBaseEvent = WidgetBaseEvent = {}));
var WidgetBase = /** @class */ (function () {
    function WidgetBase(props) {
        var _this = this;
        this._eventHandlers = {};
        this._widgetPath = '/';
        this._locale = 'en';
        this._theme = 'light';
        this._isReady = false;
        this._queuedMessages = [];
        this._handleMessage = function (message) {
            if (message.origin === _this._widgetOrigin && message.data.messageToken === _this._messageToken) {
                var _a = message.data, action = _a.action, payload = _a.payload;
                if (action === WidgetBaseEvent.Ready) {
                    _this._isReady = true;
                    var _queuedMessages = __spreadArray([], _this._queuedMessages, true);
                    _this._queuedMessages = [];
                    _queuedMessages.forEach(function (item) {
                        _this._postMessage(item.action, item.payload);
                    });
                }
                _this._emitEvent(action, payload);
            }
        };
        this._origin = window.location.origin;
        this._messageToken = (0, uuid_1.default)('awhere.widgets.message-token');
        this._widgetOrigin = props.widgetOrigin;
        if (props.widgetPath !== undefined) {
            this._widgetPath = props.widgetPath;
        }
        if (props.credential !== undefined) {
            this._credential = props.credential;
        }
        if (props.locale !== undefined) {
            this._locale = props.locale;
        }
        if (props.theme !== undefined) {
            this._theme = props.theme;
        }
    }
    Object.defineProperty(WidgetBase.prototype, "widgetOrigin", {
        get: function () {
            return this._widgetOrigin;
        },
        set: function (v) {
            this._widgetOrigin = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(WidgetBase.prototype, "widgetPath", {
        get: function () {
            return this._widgetPath;
        },
        set: function (v) {
            this._widgetPath = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(WidgetBase.prototype, "credential", {
        get: function () {
            return this._credential;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(WidgetBase.prototype, "locale", {
        set: function (v) {
            this._locale = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(WidgetBase.prototype, "theme", {
        set: function (v) {
            this._theme = v;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(WidgetBase.prototype, "element", {
        get: function () {
            return this._element;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(WidgetBase.prototype, "isReady", {
        get: function () {
            return this._isReady;
        },
        enumerable: false,
        configurable: true
    });
    WidgetBase.prototype._addPostMessageEventListener = function () {
        window.addEventListener('message', this._handleMessage);
    };
    WidgetBase.prototype._removePostMessageEventListener = function () {
        window.removeEventListener('message', this._handleMessage);
    };
    WidgetBase.prototype._emitEvent = function (event, data) {
        if (this._eventHandlers[event]) {
            this._eventHandlers[event].forEach(function (callback) {
                callback(data);
            });
        }
    };
    WidgetBase.prototype._addEventHandler = function (event, handler) {
        if (this._eventHandlers[event]) {
            if (this._eventHandlers[event].indexOf(handler) === -1) {
                this._eventHandlers[event].push(handler);
            }
        }
        else {
            this._eventHandlers[event] = [handler];
        }
    };
    WidgetBase.prototype._removeEventHandler = function (event, handler) {
        var index = this._eventHandlers[event].indexOf(handler);
        if (index > -1) {
            this._eventHandlers[event].splice(index, 1);
        }
    };
    WidgetBase.prototype._postMessage = function (action, payload) {
        var _a, _b;
        if (this._isReady) {
            (_b = (_a = this._element) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage({
                messageToken: this._messageToken,
                action: action,
                payload: payload || {},
            }, this._widgetOrigin);
        }
        else {
            this._queuedMessages.push({
                action: action,
                payload: payload,
            });
        }
    };
    WidgetBase.prototype._build = function (widgetName, target, widgetParameters, widgetPostParameters) {
        if (widgetParameters === void 0) { widgetParameters = {}; }
        this._removePostMessageEventListener();
        this._addPostMessageEventListener();
        var credentialParameters;
        if (this._credential) {
            if (this._credential instanceof credential_1.APIKey) {
                credentialParameters = {
                    _credential_type: 'api-key',
                    _api_key: this._credential.key,
                };
            }
            else if (this._credential instanceof credential_1.OAuth) {
                credentialParameters = {
                    _credential_type: 'bearer-token',
                    _token: this._credential.accessToken,
                };
            }
            else if (this._credential instanceof credential_1.BasicAuth) {
                credentialParameters = {
                    _credential_type: 'basic-auth',
                    _username: this._credential.username,
                    _password: this._credential.password,
                };
            }
            else if (this._credential instanceof credential_1.BearerToken) {
                credentialParameters = {
                    _credential_type: 'bearer-token',
                    _token: this._credential.token,
                };
            }
        }
        var parameters = __assign(__assign(__assign({}, widgetParameters), (credentialParameters || {})), { _origin: this._origin, _message_token: this._messageToken, _locale: this._locale, _theme: this._theme });
        var iframe = document.createElement('iframe');
        if (widgetPostParameters) {
            this._postMessage(WidgetBaseEvent.PostWidgetParameters, widgetPostParameters);
        }
        iframe.setAttribute('src', "".concat(this._widgetOrigin).concat(this._widgetPath === '/' ? '' : this._widgetPath, "/").concat(widgetName, "?").concat((0, querystring_1.stringify)(parameters)));
        iframe.setAttribute('frameborder', '0');
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        this._element = iframe;
        target.appendChild(iframe);
    };
    WidgetBase.prototype._destroy = function () {
        this._removePostMessageEventListener();
        if (this._element && this._element.parentNode) {
            this._element.parentNode.removeChild(this._element);
        }
        this._element = undefined;
    };
    WidgetBase.prototype.on = function (event, handler) {
        var _this = this;
        this._addEventHandler(event, handler);
        return {
            reconnect: function () {
                _this._addEventHandler(event, handler);
            },
            disconnect: function () {
                _this._removeEventHandler(event, handler);
            },
        };
    };
    return WidgetBase;
}());
exports.default = WidgetBase;
//# sourceMappingURL=WidgetBase.js.map