mj-context-menu
Version:
A generic context menu
239 lines • 7.04 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.addMenuStyles = addMenuStyles;
var html_classes_js_1 = require("./html_classes.js");
function makeClass_(name) {
return '.' + (html_classes_js_1.HtmlClasses[name] || name);
}
function cssDef_(def, sep) {
if (sep === void 0) { sep = ';'; }
return '{\n ' + def.join(sep + '\n ') + ';\n}';
}
var MENU_STYLES = {};
MENU_STYLES[makeClass_('MENU')] = cssDef_([
'position: absolute',
'background-color: white',
'color: black',
'width: auto',
'padding: 5px 0px',
'border: 1px solid #CCCCCC',
'margin: 0',
'cursor: default',
'font: menu',
'text-align: left',
'text-indent: 0',
'text-transform: none',
'line-height: normal',
'letter-spacing: normal',
'word-spacing: normal',
'word-wrap: normal',
'white-space: nowrap',
'float: none',
'z-index: 1001',
'border-radius: 5px',
'box-shadow: 0px 10px 20px #808080',
]);
MENU_STYLES[makeClass_('MENUITEM')] = cssDef_([
'padding: 1px 2em',
'background: transparent',
]);
MENU_STYLES[makeClass_('MENUARROW')] = cssDef_([
'position: absolute',
'right: 0.5em',
'padding-top: 0.25em',
'color: #666666',
'font-family: null',
'font-size: 0.75em',
]);
MENU_STYLES[makeClass_('MENUACTIVE') + ' ' + makeClass_('MENUARROW')] = cssDef_([
'color: white',
]);
MENU_STYLES[makeClass_('MENUARROW') + makeClass_('RTL')] = cssDef_([
'left: 0.5em',
'right: auto',
]);
MENU_STYLES[makeClass_('MENUCHECK')] = cssDef_([
'position: absolute',
'left: 0.7em',
'font-family: null',
]);
MENU_STYLES[makeClass_('MENUCHECK') + makeClass_('RTL')] = cssDef_([
'right: 0.7em',
'left: auto',
]);
MENU_STYLES[makeClass_('MENURADIOCHECK')] = cssDef_([
'position: absolute',
'left: 0.7em',
]);
MENU_STYLES[makeClass_('MENURADIOCHECK') + makeClass_('RTL')] = cssDef_([
'right: 0.7em',
'left: auto',
]);
MENU_STYLES[makeClass_('MENUINPUTBOX')] = cssDef_([
'padding-left: 1em',
'right: 0.5em',
'color: #666666',
'font-family: null',
]);
MENU_STYLES[makeClass_('MENUINPUTBOX') + makeClass_('RTL')] = cssDef_([
'left: 0.1em',
]);
MENU_STYLES[makeClass_('MENUCOMBOBOX')] = cssDef_([
'left: 0.1em',
'padding-bottom: 0.5em',
]);
MENU_STYLES[makeClass_('MENUSLIDER')] = cssDef_([
'left: 0.1em',
]);
MENU_STYLES[makeClass_('SLIDERVALUE')] = cssDef_([
'position: absolute',
'right: 0.1em',
'padding-top: 0.25em',
'color: #333333',
'font-size: 0.75em',
]);
MENU_STYLES[makeClass_('MENUACTIVE') + ' ' + makeClass_('SLIDERVALUE')] = cssDef_([
'color: #DDDDDD',
]);
MENU_STYLES[makeClass_('SLIDERBAR')] = cssDef_([
'outline: none',
'background: #D3D3D3',
]);
MENU_STYLES[makeClass_('MENULABEL')] = cssDef_([
'padding: 1px 2em 3px 1.33em',
'font-style: italic',
]);
MENU_STYLES[makeClass_('MENURULE')] = cssDef_([
'border-top: 1px solid #DDDDDD',
'margin: 4px 3px',
]);
MENU_STYLES[makeClass_('MENUDISABLED')] = cssDef_([
'color: #999',
]);
MENU_STYLES[makeClass_('MENUACTIVE')] = cssDef_([
'background-color: #606872',
'color: white',
]);
MENU_STYLES[makeClass_('MENUDISABLED') + ':focus'] = cssDef_([
'background-color: #E8E8E8',
]);
MENU_STYLES[makeClass_('MENULABEL') + ':focus'] = cssDef_([
'background-color: #E8E8E8',
]);
MENU_STYLES[makeClass_('CONTEXTMENU') + ':focus'] = cssDef_([
'outline: none',
]);
MENU_STYLES[makeClass_('CONTEXTMENU') + ' ' + makeClass_('MENUITEM') + ':focus'] = cssDef_([
'outline: none',
]);
MENU_STYLES[makeClass_('SELECTIONMENU')] = cssDef_([
'position: relative',
'float: left',
'border-bottom: none',
'box-shadow: none ! important',
'border-radius: 0px !important',
]);
MENU_STYLES[makeClass_('SELECTIONITEM')] = cssDef_([
'padding-right: 1em',
]);
MENU_STYLES[makeClass_('SELECTION')] = cssDef_([
'right: 40%',
'width: 50%',
]);
MENU_STYLES[makeClass_('SELECTIONBOX')] = cssDef_([
'padding: 0em',
'max-height: 20em',
'max-width: none',
'background-color: #FFFFFF',
]);
MENU_STYLES[makeClass_('SELECTIONDIVIDER')] = cssDef_([
'clear: both',
'border-top: 2px solid #000000',
]);
MENU_STYLES[makeClass_('MENU') + ' ' + makeClass_('MENUCLOSE')] = cssDef_([
'top: -10px',
'left: -10px',
]);
MENU_STYLES['@media (prefers-color-scheme: dark) /* menu */'] = cssDef_([
makeClass_('MENU') + ' ' + cssDef_([
'color: #E0E0E0',
'background-color: #242436',
'box-shadow: 0px 10px 20px #000',
'border: 1px solid #808080',
]),
makeClass_('SLIDERVALUE') + ' ' + cssDef_([
'color: #D0D0D0',
]),
makeClass_('MENUDISABLED') + ':focus ' + cssDef_([
'background-color: #383838',
]),
makeClass_('MENULABEL') + ':focus ' + cssDef_([
'background-color: #585858',
]),
makeClass_('MENURULE') + ' ' + cssDef_([
'border-top: 1px solid #808080',
]),
makeClass_('SELECTIONDIVIDER') + ' ' + cssDef_([
'border-top: 2px solid #808080',
]),
], '');
var CLOSE_ICON_STYLES = {};
CLOSE_ICON_STYLES[makeClass_('MENUCLOSE')] = cssDef_([
'position: absolute',
'cursor: pointer',
'display: inline-block',
'border: 2px solid #AAA',
'border-radius: 18px',
'font-family: "Courier New", Courier',
'font-size: 24px',
'color: #F0F0F0',
]);
CLOSE_ICON_STYLES[makeClass_('MENUCLOSE') + ' span'] = cssDef_([
'display: block',
'background-color: #AAA',
'border: 1.5px solid',
'border-radius: 18px',
'line-height: 0',
'padding: 8px 0 6px',
]);
CLOSE_ICON_STYLES[makeClass_('MENUCLOSE') + ':hover'] = cssDef_([
'color: white !important',
'border: 2px solid #CCC !important',
]);
CLOSE_ICON_STYLES[makeClass_('MENUCLOSE') + ':hover span'] = cssDef_([
'background-color: #CCC !important',
]);
CLOSE_ICON_STYLES[makeClass_('MENUCLOSE') + ':hover:focus'] = cssDef_([
'outline: none',
]);
var STYLESHEET_NAME = 'MJX-Menu-styles';
function addMenuStyles(document) {
addStyles_(__assign(__assign({}, MENU_STYLES), CLOSE_ICON_STYLES), document);
}
function addStyles_(styles, doc, name) {
if (doc === void 0) { doc = document; }
if (name === void 0) { name = STYLESHEET_NAME; }
if (doc.head.querySelector('#' + name)) {
return;
}
var element = doc.createElement('style');
element.id = name;
var inner = [];
for (var style in styles) {
inner.push("".concat(style, " ").concat(styles[style]));
}
element.textContent = inner.join('\n');
doc.head.appendChild(element);
}
//# sourceMappingURL=css_util.js.map