This library allows you to quickly create a menu for your browser game (More for MooMoo.io) script.
Detta skript bör inte installeras direkt. Det är ett bibliotek för andra skript att inkludera med meta-direktivet // @require https://update.greasyfork.org/scripts/480303/1282926/MooUI.js
/******/
(function() { // webpackBootstrap
/******/
"use strict";
/******/
var __webpack_modules__ = ({
/***/
"./src/configs/templates/columns.ts":
/*!******************************************!*\
!*** ./src/configs/templates/columns.ts ***!
\******************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
var columnsTemplate = {
showDisplay: "block",
warns: {
appendNode: "menu.appendNode is undefined. Without this, the menu will not be added to HTML. MenuID: [m_id]"
},
column: {
defaultX: 20,
defaultY: 20,
defaultWidth: 200,
defaultHeight: 400,
defaultMaxHeight: 400,
dragMouseKey: 0,
header: {
defaultWidth: 200,
defaultHeight: 30,
openMouseKey: 2,
colors: {
main: "rgba(26, 26, 26, 1)",
text: "rgba(255, 255, 255, 1)"
}
},
container: {
showDisplay: "flex",
colors: {
main: "rgba(26, 26, 26, 1)",
text: "rgba(255, 255, 255, 1)"
}
},
optionsContainer: {
showDisplay: "flex",
colors: {
main: "rgba(26, 26, 26, 1)",
text: "rgba(255, 255, 255, 1)"
}
},
checkbox: {
toggleKey: 0,
openOptionsKey: 2
}
}
};
/* harmony default export */
__webpack_exports__["default"] = (columnsTemplate);
/***/
}),
/***/
"./src/menu/Menu.ts":
/*!**************************!*\
!*** ./src/menu/Menu.ts ***!
\**************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _layout_htmlLayout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./layout/htmlLayout */ "./src/menu/layout/htmlLayout.ts");
var Menu = /** @class */ (function() {
function Menu(_a) {
var id = _a.id,
config = _a.config,
toggleKey = _a.toggleKey,
appendNode = _a.appendNode;
this.id = id;
this.config = config;
this.toggleKey = toggleKey;
this.appendNode = appendNode;
if (!this.appendNode) {
console.warn(this.config.warns.appendNode.replace(/\[m_id\]/g, this.id));
}
this.holder = document.createElement("div");
this.showDisplay = this.config.showDisplay;
this.columns = new Map();
this.isMenu = true;
this.modelsActionEvents = new Map();
this.append();
this.hide();
console.log("Menu created.");
}
Object.defineProperty(Menu.prototype, "isVisible", {
get: function() {
return this.holder.style.display === this.showDisplay;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "visibleStatus", {
get: function() {
return this.isVisible ? "show" : "hide";
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "wrapper", {
get: function() {
return this.holder.querySelector(".menu-wrapper");
},
enumerable: false,
configurable: true
});
Menu.prototype.getModel = function(key) {
var model = null;
this.columns.forEach(function(column) {
column.container.models.forEach(function(_model) {
if (!_model.options.size || !_model.options.get(key))
return;
model = _model.options.get(key);
return;
});
column.container.models.get(key) && (model = column.container.models.get(key));
});
return model;
};
Menu.prototype.getModelActive = function(key) {
var _a;
return (_a = this.getModel(key)) === null || _a === void 0 ? void 0 : _a.isActive;
};
Menu.prototype.getModelValue = function(key) {
var _a;
return (_a = this.getModel(key)) === null || _a === void 0 ? void 0 : _a.value;
};
Menu.prototype.setModelActive = function(key, state) {
var model = this.getModel(key);
typeof(model === null || model === void 0 ? void 0 : model.isActive) !== 'undefined' && model.setActive(state);
};
Menu.prototype.setModelValue = function(key, value) {
var model = this.getModel(key);
typeof(model === null || model === void 0 ? void 0 : model.value) !== 'undefined' && model.setValue(value);
};
Menu.prototype.onModelsAction = function(callback) {
this.modelsActionEvents.set(this.modelsActionEvents.size + 1, callback);
};
Menu.prototype.add = function() {
var _this = this;
var columns = [];
for (var _i = 0; _i < arguments.length; _i++) {
columns[_i] = arguments[_i];
}
if (!columns.length)
return;
for (var _a = 0, columns_1 = columns; _a < columns_1.length; _a++) {
var column = columns_1[_a];
column.id = this.columns.size + 1;
column.build();
column.setTo(column.width * (column.id - 1) + 10 * (column.id), column.y);
this.wrapper.appendChild(column.element);
this.columns.set(column.id, column);
column.container.models.forEach(function(model) {
model.on("click", function(state) {
_this.modelsActionEvents.forEach(function(callback) {
callback(model.key, state, "click", model);
});
});
if (model.options.size) {
model.options.forEach(function(option) {
var _loop_1 = function(event_1) {
if (option.events.has(event_1)) {
option.on(event_1, function(value) {
_this.modelsActionEvents.forEach(function(callback) {
callback(option.key, value, event_1, option);
});
});
}
};
for (var _i = 0, _a = ["click", "change", "input"]; _i < _a.length; _i++) {
var event_1 = _a[_i];
_loop_1(event_1);
}
});
}
return;
});
console.log("Menu \"".concat(column.header.text, "\" has been added"));
}
};
Menu.prototype.destroy = function() {};
Menu.prototype.show = function() {
this.holder.style.display = this.showDisplay;
};
Menu.prototype.hide = function() {
this.holder.style.display = "none";
};
Menu.prototype.toggle = function() {
if (this.isVisible)
return this.hide();
this.show();
};
Menu.prototype.build = function() {
this.holder.classList.add("menu-holder", "absolute", "wh-100", "no-pointer");
this.holder.insertAdjacentHTML("beforeend", _layout_htmlLayout__WEBPACK_IMPORTED_MODULE_0__["default"]);
this.initEvents();
};
Menu.prototype.initEvents = function() {
var _this = this;
var isPressed = false;
var isMatchesToggleKey = function(event) {
for (var _i = 0, _a = Object.entries(_this.toggleKey); _i < _a.length; _i++) {
var entrie = _a[_i];
if (event[entrie[0]] !== entrie[1])
continue;
return true;
}
return false;
};
window.addEventListener("keydown", function(event) {
if (!isMatchesToggleKey(event) || isPressed)
return;
_this.toggle();
isPressed = true;
});
window.addEventListener("keyup", function(event) {
if (!isMatchesToggleKey(event))
return;
isPressed = false;
});
};
Menu.prototype.append = function() {
var _this = this;
var appendNode = this.appendNode;
if (typeof appendNode === 'string') {
if (!/whenload/.test(appendNode))
return;
var constructType = /\(\w+\)/.exec(appendNode)[0].replace(/(\(|\))/g, "");
var appendChild = appendNode.split(":")[1];
switch (constructType) {
case "Node": {
appendNode = eval(appendChild);
}
break;
case "Selector": {
appendNode = document.querySelector(appendChild);
}
break;
}
return window.addEventListener("DOMContentLoaded", function() {
return appendNode.appendChild(_this.holder);
});
}
appendNode.appendChild(this.holder);
this.build();
};
return Menu;
}());
/* harmony default export */
__webpack_exports__["default"] = (Menu);
/***/
}),
/***/
"./src/menu/column/Column.ts":
/*!***********************************!*\
!*** ./src/menu/column/Column.ts ***!
\***********************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ../../configs/templates/columns */ "./src/configs/templates/columns.ts");
/* harmony import */
var _Container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! ./Container */ "./src/menu/column/Container.ts");
/* harmony import */
var _DragSystem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__( /*! ./DragSystem */ "./src/menu/column/DragSystem.ts");
/* harmony import */
var _Header__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__( /*! ./Header */ "./src/menu/column/Header.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
function hexToRGBA(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
}
var Column = /** @class */ (function(_super) {
__extends(Column, _super);
function Column() {
var _this = this;
var element = document.createElement("div");
var config = _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__["default"].column;
var container = new _Container__WEBPACK_IMPORTED_MODULE_1__["default"](element, config.defaultX, config.defaultY, config.header.defaultWidth, "auto");
var header = new _Header__WEBPACK_IMPORTED_MODULE_3__["default"](element, config.defaultX, config.defaultY, config.header.defaultWidth, config.header.defaultHeight, container);
_this = _super.call(this, header.element, element, config.defaultX, config.defaultY, config.defaultWidth, config.defaultHeight, header.width, header.height) || this;
_this.id = NaN;
_this.element = element;
_this.config = config;
_this.header = header;
_this.container = container;
return _this;
}
Column.prototype.setMaxHeight = function(maxHeight) {
this.container.maxHeight = Math.abs(maxHeight - this.header.height);
this.container.updateStyles();
this.updateStyles();
return this;
};
Column.prototype.setSize = function(width, height) {
this.width = width;
this.height = height;
this.updateStyles();
return this;
};
Column.prototype.setHeaderShadowActive = function(state) {
this.header.isShadowActive = state;
return this;
};
Column.prototype.setHeaderIconURL = function(iconURL) {
this.header.iconURL = iconURL;
return this;
};
Column.prototype.setHeaderSize = function(width, height) {
this.header.width = width;
this.header.height = height;
this.header.updateStyles();
return this;
};
Column.prototype.setHeaderText = function(value) {
this.header.text = value === null || value === void 0 ? void 0 : value.toString();
this.header.updateStyles();
return this;
};
Column.prototype.setHeaderBgColor = function(hex) {
this.header.bgColor = hexToRGBA(hex === null || hex === void 0 ? void 0 : hex.toString(), 1);
this.header.updateStyles();
return this;
};
Column.prototype.setHeaderTextColor = function(hex) {
this.header.textColor = hexToRGBA(hex === null || hex === void 0 ? void 0 : hex.toString(), 1);
this.header.updateStyles();
return this;
};
Column.prototype.setContainerBgColor = function(hex) {
this.container.bgColor = hexToRGBA(hex === null || hex === void 0 ? void 0 : hex.toString(), 1);
this.container.updateStyles();
return this;
};
Column.prototype.setContainerTextColor = function(hex) {
this.container.textColor = hexToRGBA(hex === null || hex === void 0 ? void 0 : hex.toString(), 1);
this.container.updateStyles();
return this;
};
Column.prototype.updateStyles = function() {
this.element.style.width = "".concat(this.width, "px");
this.element.style.height = "".concat(this.height, "px");
this.element.style.maxHeight = "".concat(this.maxHeight, "px");
};
Column.prototype.add = function(uiModel) {
return this.container.add(uiModel);
};
Column.prototype.build = function() {
this.element.classList.add("menu-column", "absolute", "flex", "fcolumn");
this.element.oncontextmenu = function() {
return false;
};
this.updateStyles();
this.header.build();
this.container.build();
this.setMaxHeight(this.height);
this._initEvents();
};
return Column;
}(_DragSystem__WEBPACK_IMPORTED_MODULE_2__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (Column);
/***/
}),
/***/
"./src/menu/column/Container.ts":
/*!**************************************!*\
!*** ./src/menu/column/Container.ts ***!
\**************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ../../configs/templates/columns */ "./src/configs/templates/columns.ts");
/* harmony import */
var _StyleSystem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! ./StyleSystem */ "./src/menu/column/StyleSystem.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var Container = /** @class */ (function(_super) {
__extends(Container, _super);
function Container(parent, x, y, width, height) {
var _this = this;
var element = document.createElement("container");
var config = _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__["default"].column;
_this = _super.call(this, element, config.container.colors) || this;
_this.parent = parent;
_this.x = x;
_this.y = y;
_this.width = width;
_this.height = height;
_this.parent = parent;
_this.x = x;
_this.y = y;
_this.width = width;
_this.height = height;
_this.element = element;
_this.config = config;
_this.maxHeight = 0;
_this.models = new Map();
return _this;
}
Object.defineProperty(Container.prototype, "isVisible", {
get: function() {
return this.element.style.display === this.config.container.showDisplay;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Container.prototype, "visibleStatus", {
get: function() {
return this.isVisible ? "show" : "hide";
},
enumerable: false,
configurable: true
});
Container.prototype.show = function() {
this.element.style.display = this.config.container.showDisplay;
};
Container.prototype.hide = function() {
this.element.style.display = "none";
};
Container.prototype.toggle = function() {
if (this.isVisible)
return this.hide();
this.show();
};
Container.prototype.add = function(uiModel) {
if (!uiModel.key)
return;
uiModel.setParent(this.element);
return this.models.set(uiModel.key, uiModel).get(uiModel.key);
};
Container.prototype.updateStyles = function() {
var _this = this;
this._updateStyles(this.width, this.height);
this.element.style.maxHeight = "".concat(this.maxHeight, "px");
this.models.forEach(function(model) {
model.bgColor = _this.bgColor;
model.textColor = _this.textColor;
model._updateStyles("intial", "auto");
if (model.options.size) {
model.optionsContainer.bgColor = _this.bgColor;
model.optionsContainer.textColor = _this.textColor;
model.optionsContainer.updateStyles();
}
});
};
Container.prototype.build = function() {
this.element.classList.add("column-container", "flex", "fcolumn", "all-pointer");
this.parent.appendChild(this.element);
this.models.forEach(function(model) {
model.build();
});
this.hide();
this.updateStyles();
};
return Container;
}(_StyleSystem__WEBPACK_IMPORTED_MODULE_1__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (Container);
/***/
}),
/***/
"./src/menu/column/DragSystem.ts":
/*!***************************************!*\
!*** ./src/menu/column/DragSystem.ts ***!
\***************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ../../configs/templates/columns */ "./src/configs/templates/columns.ts");
var DragSystem = /** @class */ (function() {
function DragSystem(targetNode, node, x, y, width, height, collisionWidth, collisionHeight) {
this.targetNode = targetNode;
this.node = node;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.collisionWidth = collisionWidth;
this.collisionHeight = collisionHeight;
this.targetNode = targetNode;
this.node = node;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.collisionWidth = collisionWidth;
this.collisionHeight = collisionHeight;
this._config = _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__["default"].column;
this.isDragging = false;
this.setTo(this.x, this.y);
}
DragSystem.prototype.fixXY = function() {
this.x <= 0 && (this.x = 0);
this.y <= 0 && (this.y = 0);
this.x + this.collisionWidth >= window.innerWidth && (this.x = window.innerWidth - this.collisionWidth);
this.y + this.collisionHeight >= window.innerHeight && (this.y = window.innerHeight - this.collisionHeight);
};
DragSystem.prototype.setTo = function(x, y, checkCollision) {
typeof checkCollision === 'undefined' && (checkCollision = true);
this.x = x;
this.y = y;
checkCollision && this.fixXY();
this.node.style.left = "".concat(this.x, "px");
this.node.style.top = "".concat(this.y, "px");
};
DragSystem.prototype._initEvents = function() {
var _this = this;
var mousePressed = false;
this.targetNode.addEventListener("mousedown", function(event) {
if (mousePressed || event.button !== _this._config.dragMouseKey)
return;
_this.isDragging = true;
mousePressed = true;
});
window.addEventListener("mouseup", function(event) {
if (event.button !== _this._config.dragMouseKey)
return;
_this.isDragging = false;
mousePressed = false;
});
window.addEventListener("mousemove", function(event) {
if (!_this.isDragging)
return;
var x = event.clientX - parseInt(_this.targetNode.style.width) / 2;
var y = event.clientY - parseInt(_this.targetNode.style.height) / 2;
_this.setTo(x, y);
});
window.addEventListener("resize", function() {
_this.setTo(_this.x, _this.y);
});
};
return DragSystem;
}());
/* harmony default export */
__webpack_exports__["default"] = (DragSystem);
/***/
}),
/***/
"./src/menu/column/Header.ts":
/*!***********************************!*\
!*** ./src/menu/column/Header.ts ***!
\***********************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ../../configs/templates/columns */ "./src/configs/templates/columns.ts");
/* harmony import */
var _StyleSystem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! ./StyleSystem */ "./src/menu/column/StyleSystem.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var Header = /** @class */ (function(_super) {
__extends(Header, _super);
function Header(parent, x, y, width, height, targetContainer) {
var _this = this;
var element = document.createElement("header");
var config = _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__["default"].column;
_this = _super.call(this, element, config.header.colors) || this;
_this.parent = parent;
_this.x = x;
_this.y = y;
_this.width = width;
_this.height = height;
_this.targetContainer = targetContainer;
_this.parent = parent;
_this.x = x;
_this.y = y;
_this.width = width;
_this.height = height;
_this.targetContainer = targetContainer;
_this.element = element;
_this.config = config;
_this.text = "ColumnMenu";
_this.iconURL = "";
return _this;
}
Object.defineProperty(Header.prototype, "textElement", {
get: function() {
return this.element.querySelector(".header-text");
},
enumerable: false,
configurable: true
});
Object.defineProperty(Header.prototype, "iconElement", {
get: function() {
return this.element.querySelector(".header-icon");
},
enumerable: false,
configurable: true
});
Object.defineProperty(Header.prototype, "html", {
get: function() {
return "\n ".concat(/^https?\:\/{2}/.test(this.iconURL) ? "<img class=\"header-icon\" src=\"".concat(this.iconURL, "\">") : "", "\n <span class=\"header-text\">").concat(this.text, "</span>\n ");
},
enumerable: false,
configurable: true
});
Header.prototype.updateStyles = function() {
this._updateStyles(this.width, this.height);
if (this.iconElement instanceof HTMLImageElement) {
this.iconElement.src !== this.iconURL && (this.iconElement.src = this.iconURL);
}
if (this.textElement instanceof HTMLSpanElement) {
this.textElement.innerText = this.text;
}
};
Header.prototype.initEvents = function() {
var _this = this;
var mousePressed = false;
this.element.addEventListener("mousedown", function(event) {
if (mousePressed || event.button !== _this.config.header.openMouseKey)
return;
_this.targetContainer.toggle();
mousePressed = true;
});
window.addEventListener("mouseup", function(event) {
if (event.button !== _this.config.header.openMouseKey)
return;
mousePressed = false;
});
};
Header.prototype.build = function() {
this.element.classList.add("column-header", "flex", "fcenter", "all-pointer");
this.parent.appendChild(this.element);
this.element.insertAdjacentHTML("beforeend", this.html);
this.updateStyles();
this.initEvents();
};
return Header;
}(_StyleSystem__WEBPACK_IMPORTED_MODULE_1__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (Header);
/***/
}),
/***/
"./src/menu/column/StyleSystem.ts":
/*!****************************************!*\
!*** ./src/menu/column/StyleSystem.ts ***!
\****************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
var StyleSystem = /** @class */ (function() {
function StyleSystem(node, colors) {
this.node = node;
this.colors = colors;
this.node = node;
this.colors = colors;
this.bgColor = this.colors.main;
this.textColor = this.colors.text;
this.isShadowActive = false;
}
Object.defineProperty(StyleSystem.prototype, "alphaReg", {
get: function() {
return /\,\s?\d(\.\d+)?\)/gm;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StyleSystem.prototype, "onlyRGBReg", {
get: function() {
return /(?!\d+\)$)\d+/ig;
},
enumerable: false,
configurable: true
});
StyleSystem.prototype.getBorderColor = function() {
return this.bgColor.replace(this.alphaReg, ",1)").replace(this.onlyRGBReg, function(value) {
var offset = 1;
return value >> offset <= 255 && value >> offset >= 0 ? value >> offset : value;
});
};
StyleSystem.prototype.getBackgroundColor = function() {
return this.bgColor.replace(this.alphaReg, ",0.7)");
};
StyleSystem.prototype._updateStyles = function(width, height) {
var backgroundColor = this.getBackgroundColor();
var borderColor = this.getBorderColor();
this.node.style.width = typeof width === 'number' ? "".concat(width, "px") : width;
this.node.style.height = typeof height === 'number' ? "".concat(height, "px") : height;
this.node.style.backgroundColor = backgroundColor;
this.node.style.borderColor = borderColor;
this.node.style.boxShadow = this.isShadowActive ? "inset 0px 0px 6px 2px ".concat(borderColor) : "";
this.node.style.color = this.textColor;
};
return StyleSystem;
}());
/* harmony default export */
__webpack_exports__["default"] = (StyleSystem);
/***/
}),
/***/
"./src/menu/column/models/Checkbox.ts":
/*!********************************************!*\
!*** ./src/menu/column/models/Checkbox.ts ***!
\********************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _UIModel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./UIModel */ "./src/menu/column/models/UIModel.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var Checkbox = /** @class */ (function(_super) {
__extends(Checkbox, _super);
function Checkbox(_a) {
var key = _a.key,
name = _a.name,
description = _a.description,
_b = _a.options,
options = _b === void 0 ? [] : _b,
_c = _a.isActive,
isActive = _c === void 0 ? false : _c,
_d = _a.isDisabled,
isDisabled = _d === void 0 ? false : _d;
var _this = this;
var element = document.createElement("box");
_this = _super.call(this, {
key: key,
name: name,
description: description,
options: options,
node: element
}) || this;
_this.isActive = isActive;
_this.isDisabled = isDisabled;
_this.element = element;
_this.events = new Map([
["click", new Map()]
]);
return _this;
}
Object.defineProperty(Checkbox.prototype, "html", {
get: function() {
return "\n <span class=\"ui-model-text\">".concat(this.name, "</span>\n ");
},
enumerable: false,
configurable: true
});
Checkbox.prototype.on = function(event, callback) {
var eventMap = this.events.get(event);
eventMap.set(eventMap.size + 1, callback);
};
Checkbox.prototype.setActive = function(activeState) {
this.isActive = activeState;
this.updateClasses();
};
Checkbox.prototype.setDisabled = function(activeState) {
this.isDisabled = activeState;
this.updateClasses();
};
Checkbox.prototype.toggle = function() {
var _this = this;
this.setActive(!this.isActive);
var eventMap = this.events.get("click");
eventMap.forEach(function(callback) {
callback(_this.isActive, _this.element);
});
return this.isActive;
};
Checkbox.prototype.initEvents = function() {
var _this = this;
var mousePressed = false;
this.element.addEventListener("mousedown", function(event) {
if (mousePressed)
return;
if (event.button === _this.config.checkbox.toggleKey && !_this.isDisabled) {
_this.toggle();
}
if (event.button === _this.config.checkbox.openOptionsKey) {
_this.toggleOptions();
}
mousePressed = true;
});
window.addEventListener("mouseup", function(event) {
if (event.button !== _this.config.checkbox.toggleKey &&
event.button !== _this.config.checkbox.openOptionsKey)
return;
mousePressed = false;
});
};
Checkbox.prototype.updateClasses = function() {
var activeClass = function(isActive) {
return isActive ? "active" : "inactive";
};
this.element.classList.remove(activeClass(!this.isActive));
this.element.classList.add(activeClass(this.isActive));
if (this.isDisabled) {
this.element.classList.add("disabled");
} else {
this.element.classList.remove("disabled");
}
this.options.size && this.element.classList.add("has-options");
};
Checkbox.prototype.build = function() {
this.element.classList.add("ui-model", "checkbox-model");
this.updateClasses();
this.parent.appendChild(this.element);
this.element.insertAdjacentHTML("beforeend", this.html);
this.initOptions();
this.initEvents();
this.element.title = "".concat(this.description);
};
return Checkbox;
}(_UIModel__WEBPACK_IMPORTED_MODULE_0__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (Checkbox);
/***/
}),
/***/
"./src/menu/column/models/UIModel.ts":
/*!*******************************************!*\
!*** ./src/menu/column/models/UIModel.ts ***!
\*******************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ../../../configs/templates/columns */ "./src/configs/templates/columns.ts");
/* harmony import */
var _StyleSystem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! ../StyleSystem */ "./src/menu/column/StyleSystem.ts");
/* harmony import */
var _option_OptionsContainer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__( /*! ./option/OptionsContainer */ "./src/menu/column/models/option/OptionsContainer.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var UIModel = /** @class */ (function(_super) {
__extends(UIModel, _super);
function UIModel(_a) {
var key = _a.key,
name = _a.name,
description = _a.description,
options = _a.options,
node = _a.node;
var _this = this;
var config = _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__["default"].column;
_this = _super.call(this, node, config.container.colors) || this;
_this.key = key;
_this.name = name;
_this.description = description;
_this.options = new Map(options.map(function(option) {
return [option.key, option];
}));
_this.config = config;
_this.parent = null;
return _this;
}
UIModel.prototype.setParent = function(parentElement) {
this.parent = parentElement;
};
UIModel.prototype.showOptions = function() {
this.optionsContainer.show();
};
UIModel.prototype.hideOptions = function() {
this.optionsContainer.hide();
};
UIModel.prototype.toggleOptions = function() {
if (!this.node.classList.contains("has-options"))
return;
if (this.node.classList.contains("show-options")) {
this.node.classList.remove("show-options");
return this.hideOptions();
}
this.node.classList.add("show-options");
this.showOptions();
};
UIModel.prototype.initOptions = function() {
var _this = this;
this._updateStyles("initial", "auto");
if (this.options.size) {
this.optionsContainer = new _option_OptionsContainer__WEBPACK_IMPORTED_MODULE_2__["default"](this.node, this.key);
}
this.options.forEach(function(option) {
_this.optionsContainer.add(option);
});
if (this.options.size) {
this.optionsContainer.build();
}
};
return UIModel;
}(_StyleSystem__WEBPACK_IMPORTED_MODULE_1__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (UIModel);
/***/
}),
/***/
"./src/menu/column/models/option/Option.ts":
/*!*************************************************!*\
!*** ./src/menu/column/models/option/Option.ts ***!
\*************************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ../../../../configs/templates/columns */ "./src/configs/templates/columns.ts");
/* harmony import */
var _StyleSystem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! ../../StyleSystem */ "./src/menu/column/StyleSystem.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var Option = /** @class */ (function(_super) {
__extends(Option, _super);
function Option(_a) {
var key = _a.key,
name = _a.name,
description = _a.description,
node = _a.node;
var _this = this;
var config = _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__["default"].column;
_this = _super.call(this, node, config.container.colors) || this;
_this.key = key;
_this.name = name;
_this.description = description;
_this.config = config;
_this.parent = null;
return _this;
}
Option.prototype.setParent = function(parentElement) {
this.parent = parentElement;
};
return Option;
}(_StyleSystem__WEBPACK_IMPORTED_MODULE_1__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (Option);
/***/
}),
/***/
"./src/menu/column/models/option/OptionCheckbox.ts":
/*!*********************************************************!*\
!*** ./src/menu/column/models/option/OptionCheckbox.ts ***!
\*********************************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _Option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./Option */ "./src/menu/column/models/option/Option.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var OptionCheckbox = /** @class */ (function(_super) {
__extends(OptionCheckbox, _super);
function OptionCheckbox(_a) {
var key = _a.key,
name = _a.name,
description = _a.description,
_b = _a.isActive,
isActive = _b === void 0 ? false : _b,
_c = _a.isDisabled,
isDisabled = _c === void 0 ? false : _c;
var _this = this;
var element = document.createElement("box");
_this = _super.call(this, {
key: key,
name: name,
description: description,
node: element
}) || this;
_this.isActive = isActive;
_this.isDisabled = isDisabled;
_this.element = element;
_this.events = new Map([
["click", new Map()]
]);
return _this;
}
Object.defineProperty(OptionCheckbox.prototype, "html", {
get: function() {
return "\n <span class=\"ui-option-text\">".concat(this.name, "</span>\n ");
},
enumerable: false,
configurable: true
});
OptionCheckbox.prototype.on = function(event, callback) {
var eventMap = this.events.get(event);
eventMap.set(eventMap.size + 1, callback);
};
OptionCheckbox.prototype.setActive = function(activeState) {
this.isActive = activeState;
this.updateClasses();
};
OptionCheckbox.prototype.setDisabled = function(activeState) {
this.isDisabled = activeState;
this.updateClasses();
};
OptionCheckbox.prototype.toggle = function() {
var _this = this;
this.setActive(!this.isActive);
var eventMap = this.events.get("click");
eventMap.forEach(function(callback) {
callback(_this.isActive, _this.element);
});
return this.isActive;
};
OptionCheckbox.prototype.initEvents = function() {
var _this = this;
var mousePressed = false;
this.element.addEventListener("mousedown", function(event) {
if (mousePressed)
return;
if (event.button === _this.config.checkbox.toggleKey && !_this.isDisabled) {
_this.toggle();
}
mousePressed = true;
});
window.addEventListener("mouseup", function(event) {
if (event.button !== _this.config.checkbox.toggleKey &&
event.button !== _this.config.checkbox.openOptionsKey)
return;
mousePressed = false;
});
};
OptionCheckbox.prototype.updateClasses = function() {
var activeClass = function(isActive) {
return isActive ? "active" : "inactive";
};
this.element.classList.remove(activeClass(!this.isActive));
this.element.classList.add(activeClass(this.isActive));
if (this.isDisabled) {
this.element.classList.add("disabled");
} else {
this.element.classList.remove("disabled");
}
};
OptionCheckbox.prototype.build = function() {
this.element.classList.add("ui-model", "checkbox-model");
this.updateClasses();
this.parent.appendChild(this.element);
this.element.insertAdjacentHTML("beforeend", this.html);
this.initEvents();
this.element.title = "".concat(this.description);
};
return OptionCheckbox;
}(_Option__WEBPACK_IMPORTED_MODULE_0__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (OptionCheckbox);
/***/
}),
/***/
"./src/menu/column/models/option/OptionIColor.ts":
/*!*******************************************************!*\
!*** ./src/menu/column/models/option/OptionIColor.ts ***!
\*******************************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _Option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./Option */ "./src/menu/column/models/option/Option.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var OptionIColor = /** @class */ (function(_super) {
__extends(OptionIColor, _super);
function OptionIColor(_a) {
var key = _a.key,
name = _a.name,
description = _a.description,
_b = _a.value,
value = _b === void 0 ? "" : _b,
_c = _a.isDisabled,
isDisabled = _c === void 0 ? false : _c;
var _this = this;
var element = document.createElement("box");
element.setAttribute("data-name", name);
_this = _super.call(this, {
key: key,
name: name,
description: description,
node: element
}) || this;
_this.value = value;
_this.isDisabled = isDisabled;
_this.element = element;
_this.inputElement = null;
_this.events = new Map([
["change", new Map()],
["input", new Map()]
]);
return _this;
}
Object.defineProperty(OptionIColor.prototype, "html", {
get: function() {
return "\n <input type=\"color\" class=\"ui-option-input-color\">\n ";
},
enumerable: false,
configurable: true
});
OptionIColor.prototype.on = function(event, callback) {
var eventMap = this.events.get(event);
eventMap.set(eventMap.size + 1, callback);
};
OptionIColor.prototype.setValue = function(value) {
this.value = value;
this.inputElement.value = this.value;
};
OptionIColor.prototype.setDisabled = function(activeState) {
this.isDisabled = activeState;
this.updateClasses();
};
OptionIColor.prototype.onChange = function(event) {
var _this = this;
this.setValue(this.inputElement.value);
var eventMap = this.events.get("change");
eventMap.forEach(function(callback) {
callback(_this.value, event, _this.inputElement);
});
return this.value;
};
OptionIColor.prototype.onInput = function(event) {
this.onChange(event);
};
OptionIColor.prototype.initEvents = function() {
this.inputElement.addEventListener("change", this.onInput.bind(this));
this.inputElement.addEventListener("focus", this.onInput.bind(this));
this.inputElement.addEventListener("input", this.onInput.bind(this));
};
OptionIColor.prototype.updateClasses = function() {
if (this.isDisabled) {
this.element.classList.add("disabled");
this.inputElement.disabled = true;
} else {
this.element.classList.remove("disabled");
this.inputElement.disabled = false;
}
};
OptionIColor.prototype.build = function() {
this.element.classList.add("ui-model", "input-color-model", "inactive");
this.parent.appendChild(this.element);
this.element.insertAdjacentHTML("beforeend", this.html);
this.inputElement = this.element.querySelector("input");
this.setValue(this.value);
this.updateClasses();
this.initEvents();
this.element.title = "".concat(this.description);
};
return OptionIColor;
}(_Option__WEBPACK_IMPORTED_MODULE_0__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (OptionIColor);
/***/
}),
/***/
"./src/menu/column/models/option/OptionIRange.ts":
/*!*******************************************************!*\
!*** ./src/menu/column/models/option/OptionIRange.ts ***!
\*******************************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _Option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./Option */ "./src/menu/column/models/option/Option.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var OptionIRange = /** @class */ (function(_super) {
__extends(OptionIRange, _super);
function OptionIRange(_a) {
var key = _a.key,
name = _a.name,
description = _a.description,
_b = _a.min,
min = _b === void 0 ? 0 : _b,
_c = _a.max,
max = _c === void 0 ? 100 : _c,
_d = _a.value,
value = _d === void 0 ? "" : _d,
_e = _a.fixValue,
fixValue = _e === void 0 ? 0 : _e,
_f = _a.isDisabled,
isDisabled = _f === void 0 ? false : _f;
var _this = this;
var element = document.createElement("box");
element.setAttribute("data-name", name);
_this = _super.call(this, {
key: key,
name: name,
description: description,
node: element
}) || this;
_this.min = min;
_this.max = max;
_this.value = value;
_this.fixValue = fixValue;
_this.isDisabled = isDisabled;
_this.element = element;
_this.inputElement = null;
_this.events = new Map([
["input", new Map()]
]);
return _this;
}
Object.defineProperty(OptionIRange.prototype, "html", {
get: function() {
return "\n <div class=\"ui-input-range-holder\">\n <div class=\"ui-input-range-info\">\n <span>".concat(this.name, "</span>\n <span id=\"").concat(this.key, "_value\">").concat(this.value, "</span>\n </div>\n \n <input type=\"range\" class=\"ui-option-input-range\" min=\"").concat(this.min, "\" max=\"").concat(this.max, "\">\n </div>\n ");
},
enumerable: false,
configurable: true
});
OptionIRange.prototype.on = function(event, callback) {
var eventMap = this.events.get(event);
eventMap.set(eventMap.size + 1, callback);
};
OptionIRange.prototype.setValue = function(value) {
var valueInfo = document.getElementById("".concat(this.key, "_value"));
this.value = value;
this.inputElement.value = this.value;
valueInfo && (valueInfo.innerText = this.value);
};
OptionIRange.prototype.setDisabled = function(activeState) {
this.isDisabled = activeState;
this.updateClasses();
};
OptionIRange.prototype.onInput = function() {
var _this = this;
var eventMap = this.events.get("input");
eventMap.forEach(function(callback) {
callback(_this.value, _this.inputElement);
});
return this.value;
};
OptionIRange.prototype.updateBackgroundSize = function() {
var value = +this.value;
var min = +this.min;
var max = +this.max;
this.inputElement.style.backgroundSize = (value - min) * 100 / (max - min) + '% 100%';
};
OptionIRange.prototype.getValueByMouseX = function(mouseX) {
var rect = this.element.getBoundingClientRect();
var min = +this.min;
var max = +this.max;
var newValue = ((mouseX / rect.width) * max).toFixed(this.fixValue);
return Math.min(Math.max(+newValue, min), max);
};
OptionIRange.prototype.updateInputValue = function(event) {
var value = this.getValueByMouseX(event.offsetX);
this.setValue(value);
this.onInput();
this.inputElement.dispatchEvent(new InputEvent("input"));
};
OptionIRange.prototype.initEvents = function() {
var _this = this;
var menuHolder = document.querySelector(".menu-holder");
var isPressed = false;
this.updateBackgroundSize();
this.element.addEventListener("mousedown", function(event) {
isPressed = true;
});
window.addEventListener("mouseup", function(event) {
if (!isPressed)
return;
isPressed = false;
});
menuHolder.addEventListener("mousemove", function(event) {
if (!isPressed)
return;
_this.updateInputValue(event);
});
this.inputElement.addEventListener("input", function() {
_this.updateBackgroundSize();
});
};
OptionIRange.prototype.updateClasses = function() {
if (this.isDisabled) {
this.element.classList.add("disabled");
this.inputElement.disabled = true;
} else {
this.element.classList.remove("disabled");
this.inputElement.disabled = false;
}
};
OptionIRange.prototype.build = function() {
this.element.classList.add("ui-model", "input-range-model", "inactive");
this.parent.appendChild(this.element);
this.element.insertAdjacentHTML("beforeend", this.html);
this.inputElement = this.element.querySelector("input");
this.setValue(this.value);
this.updateClasses();
this.initEvents();
this.element.title = "".concat(this.description);
};
return OptionIRange;
}(_Option__WEBPACK_IMPORTED_MODULE_0__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (OptionIRange);
/***/
}),
/***/
"./src/menu/column/models/option/OptionIText.ts":
/*!******************************************************!*\
!*** ./src/menu/column/models/option/OptionIText.ts ***!
\******************************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _Option__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./Option */ "./src/menu/column/models/option/Option.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var OptionIText = /** @class */ (function(_super) {
__extends(OptionIText, _super);
function OptionIText(_a) {
var key = _a.key,
name = _a.name,
description = _a.description,
_b = _a.value,
value = _b === void 0 ? "" : _b,
_c = _a.isDisabled,
isDisabled = _c === void 0 ? false : _c;
var _this = this;
var element = document.createElement("box");
_this = _super.call(this, {
key: key,
name: name,
description: description,
node: element
}) || this;
_this.value = value;
_this.isDisabled = isDisabled;
_this.element = element;
_this.inputElement = null;
_this.events = new Map([
["input", new Map()]
]);
return _this;
}
Object.defineProperty(OptionIText.prototype, "html", {
get: function() {
return "\n <input class=\"ui-option-input-text\" placeholder=\"".concat(this.name, "\">\n ");
},
enumerable: false,
configurable: true
});
OptionIText.prototype.on = function(event, callback) {
var eventMap = this.events.get(event);
eventMap.set(eventMap.size + 1, callback);
};
OptionIText.prototype.setValue = function(value) {
this.value = value;
this.inputElement.value = this.value;
};
OptionIText.prototype.setDisabled = function(activeState) {
this.isDisabled = activeState;
this.updateClasses();
};
OptionIText.prototype.onInput = function(event) {
var _this = this;
this.setValue(this.inputElement.value);
var eventMap = this.events.get("input");
eventMap.forEach(function(callback) {
callback(_this.value, event, _this.inputElement);
});
return this.value;
};
OptionIText.prototype.initEvents = function() {
this.inputElement.addEventListener("input", this.onInput.bind(this));
};
OptionIText.prototype.updateClasses = function() {
if (this.isDisabled) {
this.element.classList.add("disabled");
this.inputElement.disabled = true;
} else {
this.element.classList.remove("disabled");
this.inputElement.disabled = false;
}
};
OptionIText.prototype.build = function() {
this.element.classList.add("ui-model", "input-text-model", "inactive");
this.parent.appendChild(this.element);
this.element.insertAdjacentHTML("beforeend", this.html);
this.inputElement = this.element.querySelector("input");
this.setValue(this.value);
this.updateClasses();
this.initEvents();
this.element.title = "".concat(this.description);
};
return OptionIText;
}(_Option__WEBPACK_IMPORTED_MODULE_0__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (OptionIText);
/***/
}),
/***/
"./src/menu/column/models/option/OptionsContainer.ts":
/*!***********************************************************!*\
!*** ./src/menu/column/models/option/OptionsContainer.ts ***!
\***********************************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ../../../../configs/templates/columns */ "./src/configs/templates/columns.ts");
/* harmony import */
var _StyleSystem__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! ../../StyleSystem */ "./src/menu/column/StyleSystem.ts");
var __extends = (undefined && undefined.__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 __());
};
})();
var OptionsContainer = /** @class */ (function(_super) {
__extends(OptionsContainer, _super);
function OptionsContainer(parent, parentKey) {
var _this = this;
var element = document.createElement("container");
var config = _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__["default"].column;
_this = _super.call(this, element, config.container.colors) || this;
_this.parent = parent;
_this.parentKey = parentKey;
_this.element = element;
_this.config = config;
_this.models = new Map();
return _this;
}
Object.defineProperty(OptionsContainer.prototype, "isVisible", {
get: function() {
return this.element.style.display === this.config.optionsContainer.showDisplay;
},
enumerable: false,
configurable: true
});
Object.defineProperty(OptionsContainer.prototype, "visibleStatus", {
get: function() {
return this.isVisible ? "show" : "hide";
},
enumerable: false,
configurable: true
});
OptionsContainer.prototype.show = function() {
this.element.style.display = this.config.container.showDisplay;
};
OptionsContainer.prototype.hide = function() {
this.element.style.display = "none";
};
OptionsContainer.prototype.toggle = function() {
if (this.isVisible)
return this.hide();
this.show();
};
OptionsContainer.prototype.add = function(option) {
return this.models.set(option.key, option).get(option.key);
};
OptionsContainer.prototype.updateStyles = function() {
var _this = this;
this._updateStyles("100%", "auto");
this.models.forEach(function(model) {
model.bgColor = _this.bgColor;
model.textColor = _this.textColor;
model._updateStyles("intial", "auto");
});
};
OptionsContainer.prototype.build = function() {
var _this = this;
this.element.classList.add("options-container", "flex", "fcolumn");
this.element.id = "".concat(this.parentKey, "_container");
this.parent.insertAdjacentHTML("afterend", this.element.outerHTML);
this.element = this.parent.nextElementSibling;
this.node = this.element;
this.models.forEach(function(model) {
model.setParent(_this.element);
model.build();
});
this.hide();
this.updateStyles();
};
return OptionsContainer;
}(_StyleSystem__WEBPACK_IMPORTED_MODULE_1__["default"]));
/* harmony default export */
__webpack_exports__["default"] = (OptionsContainer);
/***/
}),
/***/
"./src/menu/layout/cssLayout.ts":
/*!**************************************!*\
!*** ./src/menu/layout/cssLayout.ts ***!
\**************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
var cssLayout = "\n.menu-holder {\n z-index: 99999999;\n}\n\n.ui-input-range-holder {\n display: flex;\n flex-direction: column;\n width: 100%;\n gap: 1.5px;\n cursor: default;\n}\n\n.ui-input-range-info {\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n cursor: default;\n}\n\n.ui-option-input-range {\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n height: 3px;\n width: 100%;\n filter: invert(.2);\n background-image: linear-gradient(currentColor, currentColor);\n background-size: 0% 100%;\n background-repeat: no-repeat;\n margin: 0;\n padding: 0;\n}\n\n.ui-option-input-range::-webkit-slider-runnable-track {\n display: none;\n height: 0;\n}\n \n.ui-option-input-range::-moz-range-track {\n display: none;\n height: 0;\n}\n\n.ui-option-input-text {\n width: initial;\n height: initial;\n background: none;\n border: none;\n outline: 0;\n padding: 0;\n color: currentColor;\n font-size: 14px;\n}\n\n.ui-option-input-color {\n -webkit-appearance: none;\n width: 100%;\n height: 100%;\n background: none;\n border: none;\n outline: 0;\n padding: 0;\n overflow: hidden;\n height: 22.5px !important;\n}\n\n.ui-option-input-color::-webkit-color-swatch-wrapper {\n padding: 0; \n}\n\n.ui-option-input-color::-webkit-color-swatch {\n border: none;\n}\n\n.input-color-model {\n padding: 0 !important;\n}\n\n.input-color-model::before {\n content: attr(data-name);\n position: absolute;\n color: currentColor;\n pointer-events: none;\n left: 6.5px;\n}\n\n.input-text-model, .input-color-model {\n cursor: default !important;\n}\n\n.options-container {\n border: 1.5px solid;\n border-top: none;\n box-sizing: border-box;\n padding: 2.5px;\n gap: 2.5px;\n margin-top: -2.5px;\n}\n\n.options-container::-webkit-scrollbar {\n width: 6px;\n}\n\n.options-container::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);\n}\n\n.ui-model {\n display: flex;\n align-items: center;\n width: initial;\n height: 20px !important;\n cursor: pointer;\n border: 1.5px solid;\n font-size: 16px;\n gap: 5px;\n padding: 2px 5px;\n color: inherit !important;\n}\n\n.ui-model.has-options::before {\n content: \">\";\n transform: rotate(0deg) scaleY(1.35);\n cursor: pointer;\n}\n\n.ui-model.has-options.show-options::before {\n transform: rotate(90deg) scaleY(1.35);\n}\n\n.ui-model.disabled {\n cursor: default;\n filter: invert(.15);\n}\n\n.ui-model.active, \n.ui-model.active > .ui-model-text,\n.ui-model.active > .ui-option-text,\n.ui-model.active > .ui-model.has-options::before {\n filter: invert(0);\n}\n\n.ui-model.inactive {\n filter: invert(.075);\n}\n\n.ui-model.inactive > .ui-model-text,\n.ui-model.inactive > .ui-option-text,\n.ui-model.inactive.has-options::before {\n filter: invert(.3);\n}\n\n.column-container {\n border: 1.5px solid;\n border-top: none;\n box-sizing: border-box;\n padding: 2.5px;\n gap: 2.5px;\n overflow-y: auto;\n}\n\n.column-container::-webkit-scrollbar {\n width: 6px;\n}\n\n.column-container::-webkit-scrollbar-thumb {\n box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);\n}\n\n.column-header {\n cursor: pointer;\n border: 1px solid;\n box-sizing: border-box;\n transition: .1s filter;\n}\n\n.column-header:hover {\n filter: grayscale(0.15);\n}\n\n.header-text {\n font-size: 16px;\n font-weight: 1000;\n}\n\n.no-pointer {\n pointer-events: none;\n}\n\n.all-pointer {\n pointer-events: all;\n}\n\n.wh-inherit {\n width: inherit;\n height: inherit;\n}\n\n.absolute {\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.wh-100 {\n width: 100%;\n height: 100%;\n}\n\n.flex {\n display: flex;\n}\n\n.flex.fcolumn {\n flex-direction: column\n}\n\n.flex.fcenter {\n align-items: center;\n justify-content: center;\n}\n";
/* harmony default export */
__webpack_exports__["default"] = (cssLayout);
/***/
}),
/***/
"./src/menu/layout/htmlLayout.ts":
/*!***************************************!*\
!*** ./src/menu/layout/htmlLayout.ts ***!
\***************************************/
/***/
(function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _cssLayout__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./cssLayout */ "./src/menu/layout/cssLayout.ts");
var htmlLayout = "\n<style>".concat(_cssLayout__WEBPACK_IMPORTED_MODULE_0__["default"].toString(), "</style>\n\n<div class=\"menu-wrapper wh-inherit flex\">\n\n</div>\n");
/* harmony default export */
__webpack_exports__["default"] = (htmlLayout);
/***/
})
/******/
});
/************************************************************************/
/******/ // The module cache
/******/
var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/
function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/
var cachedModule = __webpack_module_cache__[moduleId];
/******/
if (cachedModule !== undefined) {
/******/
return cachedModule.exports;
/******/
}
/******/ // Create a new module (and put it into the cache)
/******/
var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/
exports: {}
/******/
};
/******/
/******/ // Execute the module function
/******/
__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/
return module.exports;
/******/
}
/******/
/************************************************************************/
/******/
/* webpack/runtime/make namespace object */
/******/
! function() {
/******/ // define __esModule on exports
/******/
__webpack_require__.r = function(exports) {
/******/
if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/
Object.defineProperty(exports, Symbol.toStringTag, {
value: 'Module'
});
/******/
}
/******/
Object.defineProperty(exports, '__esModule', {
value: true
});
/******/
};
/******/
}();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
! function() {
/*!**********************!*\
!*** ./src/index.ts ***!
\**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__( /*! ./configs/templates/columns */ "./src/configs/templates/columns.ts");
/* harmony import */
var _menu_Menu__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__( /*! ./menu/Menu */ "./src/menu/Menu.ts");
/* harmony import */
var _menu_column_Column__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__( /*! ./menu/column/Column */ "./src/menu/column/Column.ts");
/* harmony import */
var _menu_column_models_Checkbox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__( /*! ./menu/column/models/Checkbox */ "./src/menu/column/models/Checkbox.ts");
/* harmony import */
var _menu_column_models_option_OptionCheckbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__( /*! ./menu/column/models/option/OptionCheckbox */ "./src/menu/column/models/option/OptionCheckbox.ts");
/* harmony import */
var _menu_column_models_option_OptionIColor__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__( /*! ./menu/column/models/option/OptionIColor */ "./src/menu/column/models/option/OptionIColor.ts");
/* harmony import */
var _menu_column_models_option_OptionIRange__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__( /*! ./menu/column/models/option/OptionIRange */ "./src/menu/column/models/option/OptionIRange.ts");
/* harmony import */
var _menu_column_models_option_OptionIText__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__( /*! ./menu/column/models/option/OptionIText */ "./src/menu/column/models/option/OptionIText.ts");
var MooUI = (function() {
this.list = new Map();
this.Column = _menu_column_Column__WEBPACK_IMPORTED_MODULE_2__["default"];
this.Checkbox = _menu_column_models_Checkbox__WEBPACK_IMPORTED_MODULE_3__["default"];
this.OptionCheckbox = _menu_column_models_option_OptionCheckbox__WEBPACK_IMPORTED_MODULE_4__["default"];
this.OptionIText = _menu_column_models_option_OptionIText__WEBPACK_IMPORTED_MODULE_7__["default"];
this.OptionIColor = _menu_column_models_option_OptionIColor__WEBPACK_IMPORTED_MODULE_5__["default"];
this.OptionIRange = _menu_column_models_option_OptionIRange__WEBPACK_IMPORTED_MODULE_6__["default"];
this.createMenu = function(_a) {
var _this = this;
var toggleKey = _a.toggleKey,
appendNode = _a.appendNode;
var id = this.list.size + 1;
var menu = new _menu_Menu__WEBPACK_IMPORTED_MODULE_1__["default"]({
id: id,
config: _configs_templates_columns__WEBPACK_IMPORTED_MODULE_0__["default"],
toggleKey: toggleKey,
appendNode: appendNode
});
menu.destroy = function() {
menu.holder.remove();
_this.list.delete(menu.id);
};
return this.list.set(id, menu).get(id);
};
this.eachAllMenu = function(callback, predicate) {
typeof predicate === 'undefined' && (predicate = function() {
return true;
});
Array.from(this.list.values()).filter(function(item) {
return item.isMenu && predicate(item);
}).forEach(function(menu) {
return callback(menu);
});
};
this.toggleAllMenu = function(action) {
this.eachAllMenu(function(menu) {
menu[action]();
}, function(menu) {
return action === "show" ? !menu.isVisible : menu.isVisible;
});
};
this.showAllMenu = function() {
this.toggleAllMenu("show");
};
this.hideAllMenu = function() {
this.toggleAllMenu("hide");
};
console.log("MooUI.js v1.0.0");
return this;
}).call(Object.create({}));
window.MooUI = MooUI;
}();
/******/
})();
//# sourceMappingURL=bundle.js.map