/**
* Provides the trophy icon designer.
*
- * @author Joshua Ruesweg
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge
+ * @author Joshua Ruesweg
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge
*/
-define(['Core', 'Dictionary', 'Language', 'Ui/Dialog', 'WoltLabSuite/Core/Ui/Color/Picker', 'WoltLabSuite/Core/Ui/Style/FontAwesome'], function (Core, Dictionary, Language, UiDialog, UiColorPicker, UiStyleFontAwesome) {
+define(["require", "exports", "tslib", "../../../Language", "../../../Ui/Dialog", "../../../Ui/Style/FontAwesome"], function (require, exports, tslib_1, Language, Dialog_1, UiStyleFontAwesome) {
"use strict";
- var _icon, _iconNameInput, _iconColorInput, _badgeColorInput, _dialogContent, _iconColor, _badgeColor;
+ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.init = void 0;
+ Language = tslib_1.__importStar(Language);
+ Dialog_1 = tslib_1.__importDefault(Dialog_1);
+ UiStyleFontAwesome = tslib_1.__importStar(UiStyleFontAwesome);
/**
* @exports WoltLabSuite/Core/Acp/Ui/Trophy/Badge
*/
- return {
+ class AcpUiTrophyBadge {
/**
* Initializes the badge designer.
*/
- init: function () {
- var iconContainer = elById('badgeContainer');
- elBySel('.button', iconContainer).addEventListener('click', this._click.bind(this));
- _iconNameInput = elBySel('input[name="iconName"]', iconContainer);
- _iconColorInput = elBySel('input[name="iconColor"]', iconContainer);
- _badgeColorInput = elBySel('input[name="badgeColor"]', iconContainer);
- },
+ constructor() {
+ this.badgeColor = undefined;
+ this.dialogContent = undefined;
+ this.icon = undefined;
+ this.iconColor = undefined;
+ const iconContainer = document.getElementById("badgeContainer");
+ const button = iconContainer.querySelector(".button");
+ button.addEventListener("click", (ev) => this.click(ev));
+ this.iconNameInput = iconContainer.querySelector('input[name="iconName"]');
+ this.iconColorInput = iconContainer.querySelector('input[name="iconColor"]');
+ this.badgeColorInput = iconContainer.querySelector('input[name="badgeColor"]');
+ }
/**
* Opens the icon designer.
- *
- * @param {Event} event event object
- * @protected
*/
- _click: function (event) {
+ click(event) {
event.preventDefault();
- UiDialog.open(this);
- },
+ Dialog_1.default.open(this);
+ }
/**
* Sets the icon name.
- *
- * @param {string} iconName icon name
- * @protected
*/
- _setIcon: function (iconName) {
- _icon.textContent = iconName;
- this._renderIcon();
- },
+ setIcon(iconName) {
+ this.icon.textContent = iconName;
+ this.renderIcon();
+ }
/**
* Sets the icon color, can be either a string or an object holding the
* individual r, g, b and a values.
- *
- * @param {(string|Object)} color color data
- * @protected
*/
- _setIconColor: function (color) {
+ setIconColor(color) {
if (typeof color !== "string") {
- color = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';
+ color = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
}
- elData(_iconColor, 'color', color);
- _iconColor.style.setProperty('background-color', color, '');
- this._renderIcon();
- },
+ this.iconColor.dataset.color = color;
+ this.iconColor.style.setProperty("background-color", color, "");
+ this.renderIcon();
+ }
/**
* Sets the badge color, can be either a string or an object holding the
* individual r, g, b and a values.
- *
- * @param {(string|Object)} color color data
- * @protected
*/
- _setBadgeColor: function (color) {
+ setBadgeColor(color) {
if (typeof color !== "string") {
- color = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';
+ color = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
}
- elData(_badgeColor, 'color', color);
- _badgeColor.style.setProperty('background-color', color, '');
- this._renderIcon();
- },
+ this.badgeColor.dataset.color = color;
+ this.badgeColor.style.setProperty("background-color", color, "");
+ this.renderIcon();
+ }
/**
* Renders the custom icon preview.
- *
- * @protected
*/
- _renderIcon: function () {
- var iconColor = _iconColor.style.getPropertyValue('background-color');
- var badgeColor = _badgeColor.style.getPropertyValue('background-color');
- var icon = elBySel('.jsTrophyIcon', _dialogContent);
+ renderIcon() {
+ const iconColor = this.iconColor.style.getPropertyValue("background-color");
+ const badgeColor = this.badgeColor.style.getPropertyValue("background-color");
+ const icon = this.dialogContent.querySelector(".jsTrophyIcon");
// set icon
- icon.className = icon.className.replace(/\b(fa-[a-z0-9\-]+)\b/, '');
- icon.classList.add('fa-' + _icon.textContent);
- icon.style.setProperty('color', iconColor, '');
- icon.style.setProperty('background-color', badgeColor, '');
- },
+ icon.className = icon.className.replace(/\b(fa-[a-z0-9-]+)\b/, "");
+ icon.classList.add(`fa-${this.icon.textContent}`);
+ icon.style.setProperty("color", iconColor, "");
+ icon.style.setProperty("background-color", badgeColor, "");
+ }
/**
* Saves the custom icon design.
- *
- * @param {Event} event event object
- * @protected
*/
- _save: function (event) {
+ save(event) {
event.preventDefault();
- var iconColor = _iconColor.style.getPropertyValue('background-color');
- var badgeColor = _badgeColor.style.getPropertyValue('background-color');
- var icon = _icon.textContent;
- _iconNameInput.value = icon;
- _badgeColorInput.value = badgeColor;
- _iconColorInput.value = iconColor;
- var previewIcon = elBySel('.jsTrophyIcon', elById('iconContainer'));
+ const iconColor = this.iconColor.style.getPropertyValue("background-color");
+ const badgeColor = this.badgeColor.style.getPropertyValue("background-color");
+ const icon = this.icon.textContent;
+ this.iconNameInput.value = icon;
+ this.badgeColorInput.value = badgeColor;
+ this.iconColorInput.value = iconColor;
+ const iconContainer = document.getElementById("iconContainer");
+ const previewIcon = iconContainer.querySelector(".jsTrophyIcon");
// set icon
- previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9\-]+)\b/, '');
- previewIcon.classList.add('fa-' + icon);
- previewIcon.style.setProperty('color', iconColor, '');
- previewIcon.style.setProperty('background-color', badgeColor, '');
- UiDialog.close(this);
- },
- _dialogSetup: function () {
+ previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9-]+)\b/, "");
+ previewIcon.classList.add("fa-" + icon);
+ previewIcon.style.setProperty("color", iconColor, "");
+ previewIcon.style.setProperty("background-color", badgeColor, "");
+ Dialog_1.default.close(this);
+ }
+ _dialogSetup() {
return {
- id: 'trophyIconEditor',
+ id: "trophyIconEditor",
options: {
- onSetup: (function (context) {
- _dialogContent = context;
- _iconColor = elBySel('#jsIconColorContainer .colorBoxValue', context);
- _badgeColor = elBySel('#jsBadgeColorContainer .colorBoxValue', context);
- _icon = elBySel('.jsTrophyIconName', context);
- elBySel('.jsTrophyIconName + .button', context).addEventListener('click', (function (event) {
+ onSetup: (context) => {
+ this.dialogContent = context;
+ this.iconColor = context.querySelector("#jsIconColorContainer .colorBoxValue");
+ this.badgeColor = context.querySelector("#jsBadgeColorContainer .colorBoxValue");
+ this.icon = context.querySelector(".jsTrophyIconName");
+ const buttonIconPicker = context.querySelector(".jsTrophyIconName + .button");
+ buttonIconPicker.addEventListener("click", (event) => {
event.preventDefault();
- UiStyleFontAwesome.open(this._setIcon.bind(this));
- }).bind(this));
- elBySel('.jsButtonIconColorPicker', elById('jsIconColorContainer')).addEventListener('click', function (event) {
+ UiStyleFontAwesome.open((iconName) => this.setIcon(iconName));
+ });
+ const iconColorContainer = document.getElementById("jsIconColorContainer");
+ const iconColorPicker = iconColorContainer.querySelector(".jsButtonIconColorPicker");
+ iconColorPicker.addEventListener("click", (event) => {
event.preventDefault();
- Core.triggerEvent(elBySel('.jsColorPicker', elById('jsIconColorContainer')), 'click');
+ const picker = iconColorContainer.querySelector(".jsColorPicker");
+ picker.click();
});
- elBySel('.jsButtonBadgeColorPicker', elById('jsBadgeColorContainer')).addEventListener('click', function (event) {
+ const badgeColorContainer = document.getElementById("jsBadgeColorContainer");
+ const badgeColorPicker = badgeColorContainer.querySelector(".jsButtonBadgeColorPicker");
+ badgeColorPicker.addEventListener("click", (event) => {
event.preventDefault();
- Core.triggerEvent(elBySel('.jsColorPicker', elById('jsBadgeColorContainer')), 'click');
+ const picker = badgeColorContainer.querySelector(".jsColorPicker");
+ picker.click();
});
- var colorPicker = new WCF.ColorPicker('.jsColorPicker');
- colorPicker.setCallbackSubmit(this._renderIcon.bind(this));
- elBySel('.formSubmit > .buttonPrimary', context).addEventListener('click', this._save.bind(this));
- return;
- }).bind(this),
- onShow: (function () {
- this._setIcon(_iconNameInput.value);
- this._setIconColor(_iconColorInput.value);
- this._setBadgeColor(_badgeColorInput.value);
- }).bind(this),
- title: Language.get('wcf.acp.trophy.badge.edit')
- }
+ const colorPicker = new window.WCF.ColorPicker(".jsColorPicker");
+ colorPicker.setCallbackSubmit(() => this.renderIcon());
+ const submitButton = context.querySelector(".formSubmit > .buttonPrimary");
+ submitButton.addEventListener("click", (ev) => this.save(ev));
+ },
+ onShow: () => {
+ this.setIcon(this.iconNameInput.value);
+ this.setIconColor(this.iconColorInput.value);
+ this.setBadgeColor(this.badgeColorInput.value);
+ },
+ title: Language.get("wcf.acp.trophy.badge.edit"),
+ },
};
}
- };
+ }
+ let acpUiTrophyBadge;
+ /**
+ * Initializes the badge designer.
+ */
+ function init() {
+ if (!acpUiTrophyBadge) {
+ acpUiTrophyBadge = new AcpUiTrophyBadge();
+ }
+ }
+ exports.init = init;
});
+++ /dev/null
-/**
- * Provides the trophy icon designer.
- *
- * @author Joshua Ruesweg
- * @copyright 2001-2019 WoltLab GmbH
- * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
- * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge
- */
-define(['Core', 'Dictionary', 'Language', 'Ui/Dialog', 'WoltLabSuite/Core/Ui/Color/Picker', 'WoltLabSuite/Core/Ui/Style/FontAwesome'], function (Core, Dictionary, Language, UiDialog, UiColorPicker, UiStyleFontAwesome) {
- "use strict";
-
- var _icon, _iconNameInput, _iconColorInput, _badgeColorInput, _dialogContent, _iconColor, _badgeColor;
-
- /**
- * @exports WoltLabSuite/Core/Acp/Ui/Trophy/Badge
- */
- return {
- /**
- * Initializes the badge designer.
- */
- init: function () {
- var iconContainer = elById('badgeContainer');
- elBySel('.button', iconContainer).addEventListener('click', this._click.bind(this));
-
- _iconNameInput = elBySel('input[name="iconName"]', iconContainer);
- _iconColorInput = elBySel('input[name="iconColor"]', iconContainer);
- _badgeColorInput = elBySel('input[name="badgeColor"]', iconContainer);
- },
-
- /**
- * Opens the icon designer.
- *
- * @param {Event} event event object
- * @protected
- */
- _click: function (event) {
- event.preventDefault();
-
- UiDialog.open(this);
- },
-
- /**
- * Sets the icon name.
- *
- * @param {string} iconName icon name
- * @protected
- */
- _setIcon: function (iconName) {
- _icon.textContent = iconName;
-
- this._renderIcon();
- },
-
- /**
- * Sets the icon color, can be either a string or an object holding the
- * individual r, g, b and a values.
- *
- * @param {(string|Object)} color color data
- * @protected
- */
- _setIconColor: function (color) {
- if (typeof color !== "string") {
- color = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';
- }
-
- elData(_iconColor, 'color', color);
- _iconColor.style.setProperty('background-color', color, '');
-
- this._renderIcon();
- },
-
- /**
- * Sets the badge color, can be either a string or an object holding the
- * individual r, g, b and a values.
- *
- * @param {(string|Object)} color color data
- * @protected
- */
- _setBadgeColor: function (color) {
- if (typeof color !== "string") {
- color = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';
- }
-
- elData(_badgeColor, 'color', color);
- _badgeColor.style.setProperty('background-color', color, '');
-
- this._renderIcon();
- },
-
- /**
- * Renders the custom icon preview.
- *
- * @protected
- */
- _renderIcon: function () {
- var iconColor = _iconColor.style.getPropertyValue('background-color');
- var badgeColor = _badgeColor.style.getPropertyValue('background-color');
-
- var icon = elBySel('.jsTrophyIcon', _dialogContent);
-
- // set icon
- icon.className = icon.className.replace(/\b(fa-[a-z0-9\-]+)\b/, '');
- icon.classList.add('fa-' + _icon.textContent);
-
- icon.style.setProperty('color', iconColor, '');
- icon.style.setProperty('background-color', badgeColor, '');
- },
-
- /**
- * Saves the custom icon design.
- *
- * @param {Event} event event object
- * @protected
- */
- _save: function(event) {
- event.preventDefault();
-
- var iconColor = _iconColor.style.getPropertyValue('background-color');
- var badgeColor = _badgeColor.style.getPropertyValue('background-color');
- var icon = _icon.textContent;
-
- _iconNameInput.value = icon;
- _badgeColorInput.value = badgeColor;
- _iconColorInput.value = iconColor;
-
- var previewIcon = elBySel('.jsTrophyIcon', elById('iconContainer'));
-
- // set icon
- previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9\-]+)\b/, '');
- previewIcon.classList.add('fa-' + icon);
- previewIcon.style.setProperty('color', iconColor, '');
- previewIcon.style.setProperty('background-color', badgeColor, '');
-
- UiDialog.close(this);
- },
-
- _dialogSetup: function () {
- return {
- id: 'trophyIconEditor',
- options: {
- onSetup: (function (context) {
- _dialogContent = context;
-
- _iconColor = elBySel('#jsIconColorContainer .colorBoxValue', context);
- _badgeColor = elBySel('#jsBadgeColorContainer .colorBoxValue', context);
- _icon = elBySel('.jsTrophyIconName', context);
-
- elBySel('.jsTrophyIconName + .button', context).addEventListener('click', (function (event) {
- event.preventDefault();
-
- UiStyleFontAwesome.open(this._setIcon.bind(this));
- }).bind(this));
-
- elBySel('.jsButtonIconColorPicker', elById('jsIconColorContainer')).addEventListener('click', function (event) {
- event.preventDefault();
-
- Core.triggerEvent(elBySel('.jsColorPicker', elById('jsIconColorContainer')), 'click');
- });
-
- elBySel('.jsButtonBadgeColorPicker', elById('jsBadgeColorContainer')).addEventListener('click', function (event) {
- event.preventDefault();
-
- Core.triggerEvent(elBySel('.jsColorPicker', elById('jsBadgeColorContainer')), 'click');
- });
-
- var colorPicker = new WCF.ColorPicker('.jsColorPicker');
- colorPicker.setCallbackSubmit(this._renderIcon.bind(this));
-
- elBySel('.formSubmit > .buttonPrimary', context).addEventListener('click', this._save.bind(this));
- return;
- }).bind(this),
- onShow: (function () {
- this._setIcon(_iconNameInput.value);
- this._setIconColor(_iconColorInput.value);
- this._setBadgeColor(_badgeColorInput.value);
- }).bind(this),
- title: Language.get('wcf.acp.trophy.badge.edit')
- }
- };
- }
- };
-});
--- /dev/null
+/**
+ * Provides the trophy icon designer.
+ *
+ * @author Joshua Ruesweg
+ * @copyright 2001-2019 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module WoltLabSuite/Core/Acp/Ui/Trophy/Badge
+ */
+
+import * as Language from "../../../Language";
+import UiDialog from "../../../Ui/Dialog";
+import * as UiStyleFontAwesome from "../../../Ui/Style/FontAwesome";
+import { DialogCallbackObject, DialogCallbackSetup } from "../../../Ui/Dialog/Data";
+
+interface Rgba {
+ r: number;
+ g: number;
+ b: number;
+ a: number;
+}
+
+type Color = string | Rgba;
+
+/**
+ * @exports WoltLabSuite/Core/Acp/Ui/Trophy/Badge
+ */
+class AcpUiTrophyBadge implements DialogCallbackObject {
+ private badgeColor?: HTMLSpanElement = undefined;
+ private readonly badgeColorInput: HTMLInputElement;
+ private dialogContent?: HTMLElement = undefined;
+ private icon?: HTMLSpanElement = undefined;
+ private iconColor?: HTMLSpanElement = undefined;
+ private readonly iconColorInput: HTMLInputElement;
+ private readonly iconNameInput: HTMLInputElement;
+
+ /**
+ * Initializes the badge designer.
+ */
+ constructor() {
+ const iconContainer = document.getElementById("badgeContainer")!;
+ const button = iconContainer.querySelector(".button") as HTMLElement;
+ button.addEventListener("click", (ev) => this.click(ev));
+
+ this.iconNameInput = iconContainer.querySelector('input[name="iconName"]') as HTMLInputElement;
+ this.iconColorInput = iconContainer.querySelector('input[name="iconColor"]') as HTMLInputElement;
+ this.badgeColorInput = iconContainer.querySelector('input[name="badgeColor"]') as HTMLInputElement;
+ }
+
+ /**
+ * Opens the icon designer.
+ */
+ private click(event: MouseEvent): void {
+ event.preventDefault();
+
+ UiDialog.open(this);
+ }
+
+ /**
+ * Sets the icon name.
+ */
+ private setIcon(iconName: string): void {
+ this.icon!.textContent = iconName;
+
+ this.renderIcon();
+ }
+
+ /**
+ * Sets the icon color, can be either a string or an object holding the
+ * individual r, g, b and a values.
+ */
+ private setIconColor(color: Color): void {
+ if (typeof color !== "string") {
+ color = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+ }
+
+ this.iconColor!.dataset.color = color;
+ this.iconColor!.style.setProperty("background-color", color, "");
+
+ this.renderIcon();
+ }
+
+ /**
+ * Sets the badge color, can be either a string or an object holding the
+ * individual r, g, b and a values.
+ */
+ private setBadgeColor(color: Color): void {
+ if (typeof color !== "string") {
+ color = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+ }
+
+ this.badgeColor!.dataset.color = color;
+ this.badgeColor!.style.setProperty("background-color", color, "");
+
+ this.renderIcon();
+ }
+
+ /**
+ * Renders the custom icon preview.
+ */
+ private renderIcon(): void {
+ const iconColor = this.iconColor!.style.getPropertyValue("background-color");
+ const badgeColor = this.badgeColor!.style.getPropertyValue("background-color");
+
+ const icon = this.dialogContent!.querySelector(".jsTrophyIcon") as HTMLElement;
+
+ // set icon
+ icon.className = icon.className.replace(/\b(fa-[a-z0-9-]+)\b/, "");
+ icon.classList.add(`fa-${this.icon!.textContent!}`);
+
+ icon.style.setProperty("color", iconColor, "");
+ icon.style.setProperty("background-color", badgeColor, "");
+ }
+
+ /**
+ * Saves the custom icon design.
+ */
+ private save(event: MouseEvent): void {
+ event.preventDefault();
+
+ const iconColor = this.iconColor!.style.getPropertyValue("background-color");
+ const badgeColor = this.badgeColor!.style.getPropertyValue("background-color");
+ const icon = this.icon!.textContent!;
+
+ this.iconNameInput.value = icon;
+ this.badgeColorInput.value = badgeColor;
+ this.iconColorInput.value = iconColor;
+
+ const iconContainer = document.getElementById("iconContainer")!;
+ const previewIcon = iconContainer.querySelector(".jsTrophyIcon") as HTMLElement;
+
+ // set icon
+ previewIcon.className = previewIcon.className.replace(/\b(fa-[a-z0-9-]+)\b/, "");
+ previewIcon.classList.add("fa-" + icon);
+ previewIcon.style.setProperty("color", iconColor, "");
+ previewIcon.style.setProperty("background-color", badgeColor, "");
+
+ UiDialog.close(this);
+ }
+
+ _dialogSetup(): ReturnType<DialogCallbackSetup> {
+ return {
+ id: "trophyIconEditor",
+ options: {
+ onSetup: (context) => {
+ this.dialogContent = context;
+
+ this.iconColor = context.querySelector("#jsIconColorContainer .colorBoxValue") as HTMLSpanElement;
+ this.badgeColor = context.querySelector("#jsBadgeColorContainer .colorBoxValue") as HTMLSpanElement;
+ this.icon = context.querySelector(".jsTrophyIconName") as HTMLSpanElement;
+
+ const buttonIconPicker = context.querySelector(".jsTrophyIconName + .button") as HTMLAnchorElement;
+ buttonIconPicker.addEventListener("click", (event) => {
+ event.preventDefault();
+
+ UiStyleFontAwesome.open((iconName) => this.setIcon(iconName));
+ });
+
+ const iconColorContainer = document.getElementById("jsIconColorContainer")!;
+ const iconColorPicker = iconColorContainer.querySelector(".jsButtonIconColorPicker") as HTMLAnchorElement;
+ iconColorPicker.addEventListener("click", (event) => {
+ event.preventDefault();
+
+ const picker = iconColorContainer.querySelector(".jsColorPicker") as HTMLAnchorElement;
+ picker.click();
+ });
+
+ const badgeColorContainer = document.getElementById("jsBadgeColorContainer")!;
+ const badgeColorPicker = badgeColorContainer.querySelector(".jsButtonBadgeColorPicker") as HTMLAnchorElement;
+ badgeColorPicker.addEventListener("click", (event) => {
+ event.preventDefault();
+
+ const picker = badgeColorContainer.querySelector(".jsColorPicker") as HTMLAnchorElement;
+ picker.click();
+ });
+
+ const colorPicker = new window.WCF.ColorPicker(".jsColorPicker");
+ colorPicker.setCallbackSubmit(() => this.renderIcon());
+
+ const submitButton = context.querySelector(".formSubmit > .buttonPrimary") as HTMLElement;
+ submitButton.addEventListener("click", (ev) => this.save(ev));
+ },
+ onShow: () => {
+ this.setIcon(this.iconNameInput.value);
+ this.setIconColor(this.iconColorInput.value);
+ this.setBadgeColor(this.badgeColorInput.value);
+ },
+ title: Language.get("wcf.acp.trophy.badge.edit"),
+ },
+ };
+ }
+}
+
+let acpUiTrophyBadge: AcpUiTrophyBadge;
+
+/**
+ * Initializes the badge designer.
+ */
+export function init(): void {
+ if (!acpUiTrophyBadge) {
+ acpUiTrophyBadge = new AcpUiTrophyBadge();
+ }
+}