bigbluebutton-html-plugin-sdk
Version:
This repository contains the SDK for developing BigBlueButton plugins. Plugins are React components that can be loaded from external sources by the BigBlueButton HTML5 client to extend its functionalities.
165 lines • 8.38 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActionsBarToggleGroup = exports.ActionsBarSelector = exports.ActionsBarSeparator = exports.ActionsBarButton = void 0;
var enums_1 = require("./enums");
// ActionsBar Extensible Area
var ActionsBarItem = /** @class */ (function () {
function ActionsBarItem(_a) {
var id = _a.id, type = _a.type, _b = _a.position, position = _b === void 0 ? enums_1.ActionsBarPosition.RIGHT : _b, _c = _a.dataTest, dataTest = _c === void 0 ? '' : _c;
this.id = '';
if (id) {
this.id = id;
}
this.type = type;
this.position = position;
this.dataTest = dataTest;
}
ActionsBarItem.prototype.setItemId = function (id) {
this.id = "ActionsBar".concat(this.type, "_").concat(id);
};
return ActionsBarItem;
}());
var ActionsBarButton = /** @class */ (function (_super) {
__extends(ActionsBarButton, _super);
/**
* Returns object to be used in the setter for action bar. In this case,
* a button.
*
* @param icon - icon to be used in the button for the action bar - it can be the iconName
* from BigBlueButton or an svg
* @param tooltip - tooltip to be displayed when hovering the button
* @param dataTest - string attribute to be used for testing
* @param onClick - function to be called when clicking the button
* @param position - position that this button will be displayed, see {@link ActionsBarPosition}
* @param color - button color variant, defaults to 'primary'
*
* @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
*/
function ActionsBarButton(_a) {
var id = _a.id, icon = _a.icon, _b = _a.tooltip, tooltip = _b === void 0 ? '' : _b, _c = _a.dataTest, dataTest = _c === void 0 ? '' : _c, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, _e = _a.position, position = _e === void 0 ? enums_1.ActionsBarPosition.RIGHT : _e, _f = _a.color, color = _f === void 0 ? 'primary' : _f;
var _this = _super.call(this, {
id: id,
type: enums_1.ActionsBarItemType.BUTTON,
position: position,
dataTest: dataTest,
}) || this;
_this.icon = icon;
_this.tooltip = tooltip;
_this.dataTest = dataTest;
_this.onClick = onClick;
_this.color = color;
return _this;
}
return ActionsBarButton;
}(ActionsBarItem));
exports.ActionsBarButton = ActionsBarButton;
var ActionsBarSeparator = /** @class */ (function (_super) {
__extends(ActionsBarSeparator, _super);
/**
* Returns object to be used in the setter for action bar. In this case,
* a separator.
*
* @param position - position that this button will be displayed, see {@link ActionsBarPosition}
* @param icon - Icon to be displayed as the separator. If not provided, the default separator
* (a vertical bar) will be displayed.
* @param dataTest - string attribute to be used for testing
*
* @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
*/
function ActionsBarSeparator(_a) {
var _b = _a.position, position = _b === void 0 ? enums_1.ActionsBarPosition.RIGHT : _b, _c = _a.icon, icon = _c === void 0 ? '' : _c, _d = _a.dataTest, dataTest = _d === void 0 ? '' : _d;
var _this = _super.call(this, { type: enums_1.ActionsBarItemType.SEPARATOR, position: position, dataTest: dataTest }) || this;
_this.icon = icon;
return _this;
}
return ActionsBarSeparator;
}(ActionsBarItem));
exports.ActionsBarSeparator = ActionsBarSeparator;
var ActionsBarSelector = /** @class */ (function (_super) {
__extends(ActionsBarSelector, _super);
/**
* Returns object to be used in the setter for action bar. In this case,
* a selector.
*
* @param title - title to be used in the selector for the actions bar
* @param options - an array of options to be available in the selector
* @param defaultOption - the option to be initially selected, if not present, the first option is
* selected
* @param dataTest - string attribute to be used for testing
* @param onChange - function to be called when selected value changes
* @param position - position that this button will be displayed, see {@link ActionsBarPosition}
* @param width - desired width for the selector in px, default is 140
*
* @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
*/
function ActionsBarSelector(_a) {
var id = _a.id, _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.defaultOption, defaultOption = _d === void 0 ? options[0] : _d, _e = _a.dataTest, dataTest = _e === void 0 ? '' : _e, _f = _a.onChange, onChange = _f === void 0 ? function () { } : _f, _g = _a.position, position = _g === void 0 ? enums_1.ActionsBarPosition.RIGHT : _g, _h = _a.width, width = _h === void 0 ? 140 : _h;
var _this = _super.call(this, {
id: id,
type: enums_1.ActionsBarItemType.SELECTOR,
position: position,
dataTest: dataTest,
}) || this;
_this.width = 145;
_this.title = title;
_this.options = options;
_this.defaultOption = defaultOption;
_this.onChange = onChange;
_this.width = width;
return _this;
}
return ActionsBarSelector;
}(ActionsBarItem));
exports.ActionsBarSelector = ActionsBarSelector;
var ActionsBarToggleGroup = /** @class */ (function (_super) {
__extends(ActionsBarToggleGroup, _super);
/**
* Returns object to be used in the setter for action bar. In this case,
* a toggle group.
*
* @param title - title to be used in the selector for the actions bar
* @param exclusive - whether the toggle group should be exclusive or not - allow checking
* multiple options
* @param options - an array of options to be available in the toggle group
* @param defaultOption - the option to be initially checked, if not present, the first option is
* checked
* @param dataTest - string attribute to be used for testing
* @param onChange - function to be called when checked value changes
* @param position - position that this button will be displayed, see {@link ActionsBarPosition}
*
* @returns Object that will be interpreted by the core of Bigbluebutton (HTML5)
*/
function ActionsBarToggleGroup(_a) {
var id = _a.id, _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.exclusive, exclusive = _c === void 0 ? true : _c, _d = _a.options, options = _d === void 0 ? [] : _d, _e = _a.defaultOption, defaultOption = _e === void 0 ? options[0] : _e, _f = _a.dataTest, dataTest = _f === void 0 ? '' : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { } : _g, _h = _a.position, position = _h === void 0 ? enums_1.ActionsBarPosition.RIGHT : _h;
var _this = _super.call(this, {
id: id,
type: enums_1.ActionsBarItemType.TOGGLE_GROUP,
position: position,
dataTest: dataTest,
}) || this;
_this.title = title;
_this.exclusive = exclusive;
_this.options = options;
_this.defaultOption = defaultOption;
_this.onChange = onChange;
return _this;
}
return ActionsBarToggleGroup;
}(ActionsBarItem));
exports.ActionsBarToggleGroup = ActionsBarToggleGroup;
//# sourceMappingURL=component.js.map