convert menubar code from html to js
This commit is contained in:
Stewart Allen
parent
c49454ed6a
commit
431e2c3f4b
2 changed files with 212 additions and 284 deletions
|
|
@ -1,293 +1,221 @@
|
||||||
/** Copyright Stewart Allen <sa@grid.space> -- All Rights Reserved */
|
/** Copyright Stewart Allen <sa@grid.space> -- All Rights Reserved */
|
||||||
|
|
||||||
import { $ } from '../../moto/webui.js';
|
import { $, h } from '../../moto/webui.js';
|
||||||
|
|
||||||
const MENUBAR_HTML = `
|
const { div, span, label, input, button, i, hr } = h;
|
||||||
<div class="menubar-appname">Kiri:Moto</div>
|
|
||||||
<div class="menubar-separator"></div>
|
function icon(cls) {
|
||||||
<div class="f-row top-menu grow">
|
return i({ class: cls });
|
||||||
<span>
|
}
|
||||||
<label lk="fe_menu">files</label>
|
|
||||||
<div class="top-menu-drop top-menu-left">
|
function on(actions, id) {
|
||||||
<div class="content">
|
return actions && typeof actions[id] === 'function' ? { onclick: actions[id] } : {};
|
||||||
<div id="file-new">
|
}
|
||||||
<label lk="new">new</label>
|
|
||||||
<span><i class="fas fa-file"></i></span>
|
function menuItem(actions, { id, lk, xlk, text, title, iconClass, className, children }) {
|
||||||
</div>
|
const attr = {
|
||||||
<hr>
|
...(id ? { id } : {}),
|
||||||
<div id="file-recent">
|
...(title ? { title } : {}),
|
||||||
<label lk="recent">recent</label>
|
...(className ? { class: className } : {}),
|
||||||
<span><i class="fas fa-list"></i></span>
|
...on(actions, id)
|
||||||
</div>
|
};
|
||||||
<div id="file-import">
|
const lblAttr = {
|
||||||
<label lk="import">import</label>
|
...(lk ? { lk } : {}),
|
||||||
<span><i class="fas fa-file-upload"></i></span>
|
...(xlk ? { xlk } : {})
|
||||||
<input id="load-file" type="file" name="loadme" style="display:none" accept=".km,.kmz,.stl,.obj,.svg,.png,.jpg,.jpeg,.gcode,.nc">
|
};
|
||||||
</div>
|
return div(attr, [
|
||||||
<hr>
|
text !== undefined ? label({ ...lblAttr, _: text }) : undefined,
|
||||||
<div id="app-export">
|
iconClass ? span([icon(iconClass)]) : undefined,
|
||||||
<label lk="export-ws">export work</label>
|
children
|
||||||
<span><i class="fas fa-download"></i></span>
|
].filter(v => v !== undefined));
|
||||||
</div>
|
}
|
||||||
<hr>
|
|
||||||
<div id="app-quit" class="hide">
|
function dropMenu(actions, side, items) {
|
||||||
<label lk="quit">quit</label>
|
return div({ class: `top-menu-drop top-menu-${side}` }, [
|
||||||
</div>
|
div({ class: 'content' }, items)
|
||||||
</div>
|
]);
|
||||||
</div>
|
}
|
||||||
</span>
|
|
||||||
<span>
|
function topMenu(actions, { text, lk, iconClass, side = 'left', right = false, items }) {
|
||||||
<label lk="vu_menu">view</label>
|
return span({ class: right ? 'menu-right' : undefined }, [
|
||||||
<div class="top-menu-drop top-menu-left">
|
text !== undefined ? label({ ...(lk ? { lk } : {}), _: text }) : undefined,
|
||||||
<div class="content">
|
iconClass ? icon(iconClass) : undefined,
|
||||||
<div id="view-fit">
|
dropMenu(actions, side, items)
|
||||||
<label lk="contents">contents</label>
|
]);
|
||||||
<span><i class="fas fa-arrows-to-circle"></i></span>
|
}
|
||||||
</div>
|
|
||||||
<div id="view-home">
|
function toolbarToolNozzle() {
|
||||||
<label lk="home">home</label>
|
return span({ id: 'tool-nozzle' }, [
|
||||||
<span><i class="fas fa-home"></i></span>
|
i({ class: 'fas fa-location-pin', title: 'extruder' }),
|
||||||
</div>
|
div({ id: 'ft-nozzle', class: 'f-col pop' })
|
||||||
<div id="view-top">
|
]);
|
||||||
<label lk="top">top</label>
|
}
|
||||||
<span><i class="fas fa-square"></i></span>
|
|
||||||
</div>
|
function toolbarToolRotate(actions) {
|
||||||
<hr>
|
return span({ id: 'tool-rotate' }, [
|
||||||
<div id="app-xpnd">
|
i({ class: 'fas fa-rotate-right', title: 'rotate selection' }),
|
||||||
<label lk="fullscreen">fullscreen</label>
|
div({ id: 'ft-rotate', class: 'grid pop' }, [
|
||||||
<span><i class="fas fa-maximize"></i></span>
|
div({ id: 'rot_x_lt', ...on(actions, 'rot_x_lt') }, icon('fas fa-chevron-left')),
|
||||||
</div>
|
label({ _: 'X' }),
|
||||||
</div>
|
div({ id: 'rot_x_gt', ...on(actions, 'rot_x_gt') }, icon('fas fa-chevron-right')),
|
||||||
</div>
|
input({ id: 'rot_x', class: 'value center', size: '6', value: '90' }),
|
||||||
</span>
|
div({ id: 'rot_y_lt', ...on(actions, 'rot_y_lt') }, icon('fas fa-chevron-left')),
|
||||||
<span>
|
label({ _: 'Y' }),
|
||||||
<label lk="al_menu">Align</label>
|
div({ id: 'rot_y_gt', ...on(actions, 'rot_y_gt') }, icon('fas fa-chevron-right')),
|
||||||
<div class="top-menu-drop top-menu-left">
|
input({ id: 'rot_y', class: 'value center', size: '6', value: '90' }),
|
||||||
<div class="content">
|
div({ id: 'rot_z_lt', ...on(actions, 'rot_z_lt') }, icon('fas fa-chevron-left')),
|
||||||
<div id="context-setfocus">
|
label({ _: 'Z' }),
|
||||||
<label lk="focus">focal point</label>
|
div({ id: 'rot_z_gt', ...on(actions, 'rot_z_gt') }, icon('fas fa-chevron-right')),
|
||||||
<span><i class="fas fa-eye"></i></span>
|
input({ id: 'rot_z', class: 'value center', size: '6', value: '90' }),
|
||||||
</div>
|
div({ class: 'buttons f-row' }, [
|
||||||
<div id="context-layflat">
|
button({ id: 'unrotate', class: 'grow', lk: 'reset', _: 'reset', ...on(actions, 'unrotate') })
|
||||||
<label lk="face-down">face down</label>
|
])
|
||||||
<span><i class="fas fa-home"></i></span>
|
])
|
||||||
</div>
|
]);
|
||||||
<div id="context-lefty">
|
}
|
||||||
<label lk="face-left">face left</label>
|
|
||||||
<span><i class="fas fa-maximize"></i></span>
|
function toolbarToolScale(actions) {
|
||||||
</div>
|
return span({ id: 'tool-scale' }, [
|
||||||
</div>
|
i({ class: 'fas fa-expand', title: 'scale or resize selection' }),
|
||||||
</div>
|
div({ id: 'ft-scale', class: 'grid pop' }, [
|
||||||
</span>
|
div([label({ _: 'X' }), input({ id: 'lock_x', type: 'checkbox', _checked: true })]),
|
||||||
<span>
|
div([label({ _: 'Y' }), input({ id: 'lock_y', type: 'checkbox', _checked: true })]),
|
||||||
<label lk="re_menu">render</label>
|
div([label({ _: 'Z' }), input({ id: 'lock_z', type: 'checkbox', _checked: true })]),
|
||||||
<div class="top-menu-drop top-menu-left">
|
label({ id: 'lab-axis', lk: 'axis', _: 'axis', ...on(actions, 'lab-axis') }),
|
||||||
<div class="content">
|
input({ id: 'size_x', size: '8', class: 'value' }),
|
||||||
<div id="render-solid">
|
input({ id: 'size_y', size: '8', class: 'value' }),
|
||||||
<label xlk="focus">solid</label>
|
input({ id: 'size_z', size: '8', class: 'value' }),
|
||||||
<span><i class="fas fa-square"></i></span>
|
label({ id: 'lab-size', lk: 'size', _: 'size' }),
|
||||||
</div>
|
input({ id: 'scale_x', size: '8', class: 'value', value: '1' }),
|
||||||
<div id="render-wire">
|
input({ id: 'scale_y', size: '8', class: 'value', value: '1' }),
|
||||||
<label xlk="face-down">wireframe</label>
|
input({ id: 'scale_z', size: '8', class: 'value', value: '1' }),
|
||||||
<span><i class="fas fa-border-all"></i></span>
|
label({ id: 'lab-scale', lk: 'scale', _: 'scale', ...on(actions, 'lab-scale') }),
|
||||||
</div>
|
div({ class: 'buttons f-row' }, [
|
||||||
<div id="render-ghost">
|
button({ id: 'scale-reset', class: 'grow j-center', _: 'reset', ...on(actions, 'scale-reset') })
|
||||||
<label xlk="face-left">transparent</label>
|
])
|
||||||
<span><i class="fas fa-border-none"></i></span>
|
])
|
||||||
</div>
|
]);
|
||||||
<hr>
|
}
|
||||||
<div id="render-edges">
|
|
||||||
<label xlk="face-left">toggle edges</label>
|
function content(actions) {
|
||||||
<span><i class="fa-regular fa-square"></i></span>
|
return [
|
||||||
</div>
|
div({ class: 'menubar-appname', _: 'Kiri:Moto' }),
|
||||||
</div>
|
div({ class: 'menubar-separator' }),
|
||||||
</div>
|
div({ class: 'f-row top-menu grow' }, [
|
||||||
</span>
|
topMenu(actions, {
|
||||||
<span>
|
text: 'files', lk: 'fe_menu', items: [
|
||||||
<label lk="sx_menu">selection</label>
|
menuItem(actions, { id: 'file-new', lk: 'new', text: 'new', iconClass: 'fas fa-file' }),
|
||||||
<div class="top-menu-drop top-menu-left">
|
hr(),
|
||||||
<div class="content">
|
menuItem(actions, { id: 'file-recent', lk: 'recent', text: 'recent', iconClass: 'fas fa-list' }),
|
||||||
<div id="context-mirror">
|
menuItem(actions, {
|
||||||
<label xlk="rc_mirr-left">mirror</label>
|
id: 'file-import', lk: 'import', text: 'import', iconClass: 'fas fa-file-upload', children:
|
||||||
<span><i class="fas fa-arrows-left-right-to-line"></i></span>
|
input({ id: 'load-file', type: 'file', name: 'loadme', style: 'display:none', accept: '.km,.kmz,.stl,.obj,.svg,.png,.jpg,.jpeg,.gcode,.nc' })
|
||||||
</div>
|
}),
|
||||||
<div id="context-duplicate">
|
hr(),
|
||||||
<label xlk="rc_dupl">duplicate</label>
|
menuItem(actions, { id: 'app-export', lk: 'export-ws', text: 'export work', iconClass: 'fas fa-download' }),
|
||||||
<span><i class="fas fa-copy"></i></span>
|
hr(),
|
||||||
</div>
|
menuItem(actions, { id: 'app-quit', lk: 'quit', text: 'quit', className: 'hide' })
|
||||||
<hr>
|
]
|
||||||
<div id="mesh-merge">
|
}),
|
||||||
<label xlk="rc_merg">merge meshes</label>
|
topMenu(actions, {
|
||||||
</div>
|
text: 'view', lk: 'vu_menu', items: [
|
||||||
<div id="mesh-split">
|
menuItem(actions, { id: 'view-fit', lk: 'contents', text: 'contents', iconClass: 'fas fa-arrows-to-circle' }),
|
||||||
<label xlk="rc_splt-down">isolate meshes</label>
|
menuItem(actions, { id: 'view-home', lk: 'home', text: 'home', iconClass: 'fas fa-home' }),
|
||||||
</div>
|
menuItem(actions, { id: 'view-top', lk: 'top', text: 'top', iconClass: 'fas fa-square' }),
|
||||||
<hr>
|
hr(),
|
||||||
<div id="mesh-export-obj">
|
menuItem(actions, { id: 'app-xpnd', lk: 'fullscreen', text: 'fullscreen', iconClass: 'fas fa-maximize' })
|
||||||
<label lk="export-obj">save as OBJ</label>
|
]
|
||||||
<span><i class="fas fa-dice-d20"></i></span>
|
}),
|
||||||
</div>
|
topMenu(actions, {
|
||||||
<div id="mesh-export-stl">
|
text: 'Align', lk: 'al_menu', items: [
|
||||||
<label lk="export-stl">save as STL</label>
|
menuItem(actions, { id: 'context-setfocus', lk: 'focus', text: 'focal point', iconClass: 'fas fa-eye' }),
|
||||||
<span><i class="fas fa-dice-d20"></i></span>
|
menuItem(actions, { id: 'context-layflat', lk: 'face-down', text: 'face down', iconClass: 'fas fa-home' }),
|
||||||
</div>
|
menuItem(actions, { id: 'context-lefty', lk: 'face-left', text: 'face left', iconClass: 'fas fa-maximize' })
|
||||||
</div>
|
]
|
||||||
</div>
|
}),
|
||||||
</span>
|
topMenu(actions, {
|
||||||
<div class="menubar-separator"></div>
|
text: 'render', lk: 're_menu', items: [
|
||||||
<div class="f-row top-menu">
|
menuItem(actions, { id: 'render-solid', xlk: 'focus', text: 'solid', iconClass: 'fas fa-square' }),
|
||||||
<span id="tool-nozzle"><i class="fas fa-location-pin" title="extruder"></i>
|
menuItem(actions, { id: 'render-wire', xlk: 'face-down', text: 'wireframe', iconClass: 'fas fa-border-all' }),
|
||||||
<div id="ft-nozzle" class="f-col pop"></div>
|
menuItem(actions, { id: 'render-ghost', xlk: 'face-left', text: 'transparent', iconClass: 'fas fa-border-none' }),
|
||||||
</span>
|
hr(),
|
||||||
<span id="tool-rotate"><i class="fas fa-rotate-right" title="rotate selection"></i>
|
menuItem(actions, { id: 'render-edges', xlk: 'face-left', text: 'toggle edges', iconClass: 'fa-regular fa-square' })
|
||||||
<div id="ft-rotate" class="grid pop">
|
]
|
||||||
<div id="rot_x_lt"><i class="fas fa-chevron-left"></i></div>
|
}),
|
||||||
<label>X</label>
|
topMenu(actions, {
|
||||||
<div id="rot_x_gt"><i class="fas fa-chevron-right"></i></div>
|
text: 'selection', lk: 'sx_menu', items: [
|
||||||
<input id="rot_x" class="value center" size="6" value="90">
|
menuItem(actions, { id: 'context-mirror', xlk: 'rc_mirr-left', text: 'mirror', iconClass: 'fas fa-arrows-left-right-to-line' }),
|
||||||
<div id="rot_y_lt"><i class="fas fa-chevron-left"></i></div>
|
menuItem(actions, { id: 'context-duplicate', xlk: 'rc_dupl', text: 'duplicate', iconClass: 'fas fa-copy' }),
|
||||||
<label>Y</label>
|
hr(),
|
||||||
<div id="rot_y_gt"><i class="fas fa-chevron-right"></i></div>
|
menuItem(actions, { id: 'mesh-merge', xlk: 'rc_merg', text: 'merge meshes' }),
|
||||||
<input id="rot_y" class="value center" size="6" value="90">
|
menuItem(actions, { id: 'mesh-split', xlk: 'rc_splt-down', text: 'isolate meshes' }),
|
||||||
<div id="rot_z_lt"><i class="fas fa-chevron-left"></i></div>
|
hr(),
|
||||||
<label>Z</label>
|
menuItem(actions, { id: 'mesh-export-obj', lk: 'export-obj', text: 'save as OBJ', iconClass: 'fas fa-dice-d20' }),
|
||||||
<div id="rot_z_gt"><i class="fas fa-chevron-right"></i></div>
|
menuItem(actions, { id: 'mesh-export-stl', lk: 'export-stl', text: 'save as STL', iconClass: 'fas fa-dice-d20' })
|
||||||
<input id="rot_z" class="value center" size="6" value="90">
|
]
|
||||||
<div class="buttons f-row">
|
}),
|
||||||
<button id="unrotate" class="grow" lk="reset">reset</button>
|
div({ class: 'menubar-separator' }),
|
||||||
</div>
|
div({ class: 'f-row top-menu' }, [
|
||||||
</div>
|
toolbarToolNozzle(),
|
||||||
</span>
|
toolbarToolRotate(actions),
|
||||||
<span id="tool-scale"><i class="fas fa-expand" title="scale or resize selection"></i>
|
toolbarToolScale(actions)
|
||||||
<div id="ft-scale" class="grid pop">
|
]),
|
||||||
<div><label>X</label><input id="lock_x" type="checkbox" checked></div>
|
div({ class: 'grow' }),
|
||||||
<div><label>Y</label><input id="lock_y" type="checkbox" checked></div>
|
div({ class: 'menubar-mode', id: 'app-mode' }),
|
||||||
<div><label>Z</label><input id="lock_z" type="checkbox" checked></div>
|
div({ class: 'menubar-separator' }),
|
||||||
<label id="lab-axis" lk="axis">axis</label>
|
topMenu(actions, {
|
||||||
<input id="size_x" size="8" class="value">
|
text: 'mode', lk: 'mo_menu', side: 'right', right: true, items: [
|
||||||
<input id="size_y" size="8" class="value">
|
menuItem(actions, { id: 'mode-fdm', text: 'FDM', title: '3D Additive Printing Processes', iconClass: 'fas fa-layer-group' }),
|
||||||
<input id="size_z" size="8" class="value">
|
menuItem(actions, { id: 'mode-cam', text: 'CNC', title: 'CNC Mills and Subtractive Processes', iconClass: 'fas fa-bore-hole' }),
|
||||||
<label id="lab-size" lk="size">size</label>
|
menuItem(actions, { id: 'mode-sla', text: 'SLA', title: 'mSLA Resin Printing', iconClass: 'fas fa-cube' }),
|
||||||
<input id="scale_x" size="8" class="value" value="1">
|
hr(),
|
||||||
<input id="scale_y" size="8" class="value" value="1">
|
menuItem(actions, { id: 'mode-laser', text: 'Laser', title: 'Laser Cutting and Engraving', iconClass: 'fas fa-bolt' }),
|
||||||
<input id="scale_z" size="8" class="value" value="1">
|
menuItem(actions, { id: 'mode-wjet', text: 'Water', title: 'WaterJet Cutting', iconClass: 'fas fa-location-pin' }),
|
||||||
<label id="lab-scale" lk="scale">scale</label>
|
menuItem(actions, { id: 'mode-wedm', text: 'Wire', title: 'Wire EDM Cutting', iconClass: 'fas fa-ellipsis-vertical' }),
|
||||||
<div class="buttons f-row">
|
menuItem(actions, { id: 'mode-drag', text: 'Drag', title: 'Drag Knife Cutting', iconClass: 'fas fa-caret-left' })
|
||||||
<button id="scale-reset" class="grow j-center">reset</button>
|
]
|
||||||
</div>
|
}),
|
||||||
</div>
|
topMenu(actions, {
|
||||||
</span>
|
text: 'info', lk: 'info', side: 'right', right: true, items: [
|
||||||
</div>
|
menuItem(actions, { id: 'app-help', lk: 'help', text: 'help' }),
|
||||||
<div class="grow"></div>
|
menuItem(actions, { id: 'app-don8', lk: 'donate', text: 'donate' }),
|
||||||
<div class="menubar-mode" id="app-mode"></div>
|
hr(),
|
||||||
<div class="menubar-separator"></div>
|
menuItem(actions, { children: label({ id: 'app-info', _: 'version' }) })
|
||||||
<span class="menu-right">
|
]
|
||||||
<label lk="mo_menu">mode</label>
|
}),
|
||||||
<div class="top-menu-drop top-menu-right">
|
topMenu(actions, {
|
||||||
<div class="content">
|
text: 'setup', lk: 'su_menu', side: 'right', right: true, items: [
|
||||||
<div id="mode-fdm">
|
menuItem(actions, { id: 'set-device', lk: 'machines', text: 'machines', iconClass: 'fas fa-cube' }),
|
||||||
<label title="3D Additive Printing Processes">FDM</label>
|
menuItem(actions, { id: 'set-profs', lk: 'profs', text: 'profiles', iconClass: 'fas fa-sliders-h' }),
|
||||||
<span><i class="fas fa-layer-group"></i></span>
|
menuItem(actions, { id: 'set-tools', lk: 'tools', text: 'tools', iconClass: 'fas fa-tools' }),
|
||||||
</div>
|
menuItem(actions, { id: 'set-prefs', lk: 'prefs', text: 'prefs', iconClass: 'fa-solid fa-square-check' }),
|
||||||
<div id="mode-cam">
|
hr(),
|
||||||
<label title="CNC Mills and Subtractive Processes">CNC</label>
|
menuItem(actions, { id: 'install', lk: 'install', text: 'install' }),
|
||||||
<span><i class="fas fa-bore-hole"></i></span>
|
menuItem(actions, { id: 'uninstall', lk: 'uninstall', text: 'uninstall', className: 'hide' })
|
||||||
</div>
|
]
|
||||||
<div id="mode-sla">
|
}),
|
||||||
<label title="mSLA Resin Printing">SLA</label>
|
topMenu(actions, {
|
||||||
<span><i class="fas fa-cube"></i></span>
|
iconClass: 'fas fa-language', side: 'right', right: true, items: [
|
||||||
</div>
|
menuItem(actions, { children: label({ id: 'lset-zh', _: '简体中文' }) }),
|
||||||
<hr>
|
menuItem(actions, { children: label({ id: 'lset-da', _: 'dansk' }) }),
|
||||||
<div id="mode-laser">
|
menuItem(actions, { children: label({ id: 'lset-de', _: 'deutsch' }) }),
|
||||||
<label title="Laser Cutting and Engraving">Laser</label>
|
menuItem(actions, { children: label({ id: 'lset-en', _: 'english' }) }),
|
||||||
<span><i class="fas fa-bolt"></i></span>
|
menuItem(actions, { children: label({ id: 'lset-es', _: 'español' }) }),
|
||||||
</div>
|
menuItem(actions, { children: label({ id: 'lset-fr', _: 'français' }) }),
|
||||||
<div id="mode-wjet">
|
menuItem(actions, { children: label({ id: 'lset-pl', class: 'nocap', _: 'polski' }) }),
|
||||||
<label title="WaterJet Cutting">Water</label>
|
menuItem(actions, { children: label({ id: 'lset-pt', _: 'português' }) })
|
||||||
<span><i class="fas fa-location-pin"></i></span>
|
]
|
||||||
</div>
|
})
|
||||||
<div id="mode-wedm">
|
])
|
||||||
<label title="Wire EDM Cutting">Wire</label>
|
];
|
||||||
<span><i class="fas fa-ellipsis-vertical"></i></span>
|
}
|
||||||
</div>
|
|
||||||
<div id="mode-drag">
|
|
||||||
<label title="Drag Knife Cutting">Drag</label>
|
|
||||||
<span><i class="fas fa-caret-left"></i></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="menu-right">
|
|
||||||
<label lk="info">info</label>
|
|
||||||
<div class="top-menu-drop top-menu-right">
|
|
||||||
<div class="content">
|
|
||||||
<div id="app-help">
|
|
||||||
<label lk="help">help</label>
|
|
||||||
</div>
|
|
||||||
<div id="app-don8">
|
|
||||||
<label lk="donate">donate</label>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div>
|
|
||||||
<label id="app-info">version</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="menu-right">
|
|
||||||
<label lk="su_menu">setup</label>
|
|
||||||
<div class="top-menu-drop top-menu-right">
|
|
||||||
<div class="content">
|
|
||||||
<div id="set-device">
|
|
||||||
<label lk="machines">machines</label>
|
|
||||||
<span><i class="fas fa-cube"></i></span>
|
|
||||||
</div>
|
|
||||||
<div id="set-profs">
|
|
||||||
<label lk="profs">profiles</label>
|
|
||||||
<span><i class="fas fa-sliders-h"></i></span>
|
|
||||||
</div>
|
|
||||||
<div id="set-tools">
|
|
||||||
<label lk="tools">tools</label>
|
|
||||||
<span><i class="fas fa-tools"></i></span>
|
|
||||||
</div>
|
|
||||||
<div id="set-prefs">
|
|
||||||
<label lk="prefs">prefs</label>
|
|
||||||
<span><i class="fa-solid fa-square-check"></i></span>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div id="install">
|
|
||||||
<label lk="install">install</label>
|
|
||||||
</div>
|
|
||||||
<div id="uninstall" class="hide">
|
|
||||||
<label lk="uninstall">uninstall</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="menu-right">
|
|
||||||
<i class="fas fa-language"></i>
|
|
||||||
<div class="top-menu-drop top-menu-right">
|
|
||||||
<div class="content">
|
|
||||||
<div><label id="lset-zh">简体中文</label></div>
|
|
||||||
<div><label id="lset-da">dansk</label></div>
|
|
||||||
<div><label id="lset-de">deutsch</label></div>
|
|
||||||
<div><label id="lset-en">english</label></div>
|
|
||||||
<div><label id="lset-es">español</label></div>
|
|
||||||
<div><label id="lset-fr">français</label></div>
|
|
||||||
<div><label id="lset-pl" class="nocap">polski</label></div>
|
|
||||||
<div><label id="lset-pt">português</label></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const menubar = {
|
export const menubar = {
|
||||||
build() {
|
build(actions = {}) {
|
||||||
const node = $('menubar');
|
const node = $('menubar');
|
||||||
if (!node) {
|
if (!node) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
node.innerHTML = MENUBAR_HTML;
|
h.bind(node, content(actions));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@
|
||||||
import { menubar } from './menubar.js';
|
import { menubar } from './menubar.js';
|
||||||
|
|
||||||
const toolbar = {
|
const toolbar = {
|
||||||
build() {
|
build(actions) {
|
||||||
menubar.build();
|
menubar.build(actions);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue