os gui
v0.7.3 Taskbarless Minimization
用于模仿操作系统的库图图形用户界面
具体来说，Windows 98-至少现在；将来可能会扩展。
该库为98.JS.org提供了基于Windows 98的网络版本，包括油漆，记事本，录音机等。
有关更多信息，请参见主页。
菜单栏，支持复选框和无线电项目，残疾状态，子菜单，键盘快捷键等等
您可以拖动，最大化，最小化，关闭和调整大小的应用程序窗口
对话框和工具窗口变体
在最大化/最小化/还原过程中引导您的眼睛的飞行标题栏动画
焦点容器：如果您在窗口内的选项卡或Shift+选项卡，则将其包裹到第一个/最后一个控件。
按钮样式，包括轻巧按钮，禁用按钮和默认操作按钮
卷轴样式，Webkit特定于特定于Webkit（将来可能会基于非信息滚动库库的自定义滚动条或支持库的样式，您期望您可以直接使用该库）
.themepack在运行时使用Windows .theme
在此处在线查看演示
该库当前需要jQuery来实现窗口。菜单栏不需要jQuery。
（最终我没有依赖关系。到目前为止，我从菜单代码中删除了jQuery ...）
该库还没有作为单个方便的文件提供。
您可以1。将存储库作为zip文件下载2。克隆存储库，或3。将库作为NPM软件包安装。
您必须包括要使用的组件（ MenuBar.js或$Window.js ）的脚本，以及用于布局，主题和配色方案的样式表。
确保使用编译的CSS文件，而不是源文件。
在<head>中：
< link href =" os-gui/layout.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-98.css " rel =" stylesheet " type =" text/css " >
< link href =" os-gui/windows-default.css " rel =" stylesheet " type =" text/css " >在<head>或<body>中：
< script src =" os-gui/MenuBar.js " > </ script >
< script src =" lib/jquery.js " > </ script > <!-- required by $Window.js -->
< script src =" os-gui/$Window.js " > </ script > 注意：API可能会发生很大变化，但我维护了一个更改。
.inset-deep.outset-deep创建2PX插图边框（例如按钮或窗口或菜单弹出）.inset-shallow.outset-shallow创建1PX的启动边框按钮样式应用于全球button元素。 （如果您想重置它，请注意，您必须摆脱伪元素::after 。
要制作一个切换按钮，请将.toggle类添加到该按钮。使其显示为.selected类。 （@todo：重命名此.pressed ）
您应该适当地将样式与语义aria-pressed ， aria-haspopup和/或aria-expanded属性一起使用。
您可以通过将.default添加到该按钮来显示默认操作。请注意，在Windows 98中，此样式根据焦点从按钮移到按钮。经验法则是它应该在Enter触发的按钮上。
您可以通过在按钮上添加.lightweight来制作轻巧的按钮。轻巧的按钮是微妙的，直到悬停之前才有边界。
您可以通过将标准disabled属性添加到按钮来禁用按钮。
您可以通过将.pressing类添加到按钮中显示一个按钮。
这对于由按键触发的按钮很有用。
滚动栏样式在全球应用，但具有-webkit-前缀，因此它们仅在基于Webkit的“基于Webkit”的浏览器中工作，例如Chrome，Safari和Opera。
（可以用::-webkit-scrollbar和相关的选择器覆盖（但不容易重置为浏览器默认值，除非-webkit-appearance: scrollbar works ... @todo：scope csss）
选择样式是全球应用的。
（可以用::selection覆盖（但不容易重置为浏览器默认值...除非使用unset ？@todo：scope css）
MenuBar(menus)创建菜单栏组件。
menus应是持有菜单项规格的对象，该对象由菜单按钮名称锁定。
返回带有属性element的对象，然后您应该将其附加到所需的DOM。
请参阅演示代码中的示例。
element表示菜单栏的DOM元素。
closeMenus()关闭所有开放的菜单。
setKeyboardScope(...eventTargets)像Alt这样的热键将在给定元素或事件目标的级别上处理。
默认情况下，范围是window （全局），对于单页应用程序的情况下，菜单栏位于顶部。如果将菜单栏放在窗口中，则应使用窗口的元素调用此菜单：
menu_bar . setKeyboardScope ( $window . element ) ;或者更好
$window . setMenuBar ( menu_bar ) ;在将菜单栏安装到窗口的同时，为您服务了键盘范围。
请注意，如果菜单栏具有焦点，总是会处理某些键盘行为。
还要注意iframes，您可能需要使用$window[0], iframe.contentWindow调用此问题，但是将来应该更改此此事（键盘事件应代理）。
info可用于实现状态栏。提供描述为event.detail.description 。在滚动指定description的菜单项时。例如：
menubar . element . addEventListener ( "info" , ( event ) => {
statusBar . textContent = event . detail ?. description || "" ;
} ) ; default-info信号表明状态栏应重置为空白或默认消息。
menubar . element . addEventListener ( "default-info" , ( event ) => {
statusBar . textContent = "" ;
// or:
statusBar . textContent = "For Help, click Help Topics on the Help Menu." ;
// like in MS Paint (and JS Paint)
// or:
statusBar . textContent = "For Help, press F1." ;
// like WordPad
// or perhaps even:
statusBar . innerHTML = "For Help, <a href='docs'>click here</a>" ;
// Note that a link is not a common pattern, and it could only work for the default text;
// for menu item descriptions the message in the status bar is transient, so
// you wouldn't be able to reach it to click on it.
} ) ;菜单项规范是MENU_DIVIDER （表示水平规则的常数），或无线电组规范，或具有以下属性的对象：
label ：该项目的标签； ampersands定义访问键（要使用字面的andand，请使用&& ）shortcutLabel （可选）：键盘快捷键可以显示该项目ariaKeyShortcuts （可选）：该项目的aria-keyshortcuts ，例如“控制+A Meta+A”，用于屏幕读取器。 “ CTRL”是无效的（您必须将其拼写出来），最好使用“ Meta”（and event.metaKey ）提供MacOS的替代方案，通常使用等效命令键。action （可选）：单击项目时要执行的函数（只能指定action或checkbox ）checkbox （可选）：指定该项目应作为复选框的对象。check应该是检查是否应检查该项目的功能，以返回为检查的true ，并为未检查的false返回。多么可爱的名字。toggle应该是一个可以切换选项状态的函数，但是您要存储它。单击时调用。enabled （可选）：可以false地禁用项目，或一个确定是否应启用该项目的函数，返回为true以启用该项目， false disable。submenu （可选）：一系列菜单项规格来创建子菜单description （可选）：用于实现状态栏；使用此描述滚动该项目时会发出info事件value （可选）：对于无线电项目，项目的值；可以是任何类型，但是===用于确定是否检查了项目。无线电组规范是具有以下属性的对象：
radioItems ：一系列菜单项规格，以创建一个广播按钮组。与submenu不同，这些项目直接包含在此菜单中。建议使用MENU_DIVIDER将无线电组与其他菜单项分开。getValue ：应返回所选无线电项目值的函数。setValue ：应以特定于应用程序的方式将状态更改为给定值的函数。ariaLabel （可选）：一个用作无线电组的aria-label的字符串（用于屏幕读取器可访问性）菜单可以用上下文热键称为Access Keys 。
在菜单按钮或菜单项标签中的字母之前放置一个andand，以使其成为访问密钥。 Microsoft拥有有关访问密钥的文档，包括选择访问密钥的指南。通常，第一个字母是一个不错的选择。
如果菜单项没有定义访问密钥，则可以使用标签的第一个字母访问它。
对于菜单按钮，按下按钮的访问键时需要保持ALT，但是对于菜单弹出式菜单项，您必须直接按键，因为ALT将关闭菜单。
如果有多个带有相同访问密钥的菜单项，则它将在它们之间循环而不会激活它们。您应该尝试使访问键与众不同，包括在没有定义的访问键的情况下定义的访问键和菜单项的第一个字母之间。 （在Explorer的收藏夹菜单中，在Windows 98中观察到此行为，您可以在其中使用与其他菜单项的访问键匹配的首字母进行书签。）
MenuBar.js导出了一个AccessKeys对象，并具有处理访问键的功能：
AccessKeys.escape(label)在给定标签中逃脱ampersands，以免将它们解释为访问键。
这对于动态菜单很有用，例如使用页面标题作为标签的历史菜单。您不希望ampersands被假解释为访问键，也不希望将双重及用作单个及其单个及其词。
AccessKeys.unescape(label)标签中的所有双重及时。
为了渲染，请改用toHTML或toFragment 。
AccessKeys.has(label)如果标签具有访问密钥，则返回true。
AccessKeys.get(label)返回给定标签的访问键，如果没有，则返回null。
MenuBar会自动处理访问键，但是如果您要包含其他UI元素的访问键，则需要自己处理它们，并且可以使用此键，而不是对访问密钥进行硬编码，因此不需要在两个地方更改它。
AccessKeys.remove(label)从标签中删除访问密钥指示器（ & ），并取消任何双重示例。还可以删除括号访问密钥指标，例如“（＆n）”作为特殊情况。
AccessKeys.toText(label)从标签中删除访问密钥指示器（ & ），并取消任何双重示例。这就像toHTML但对于纯文本。
注意：虽然访问键通常是单词的一部分，例如“＆new”，但在翻译中通常被单独指示，例如“새로새로（＆n）”，因为访问键保持不变，但是字母不再是单词的一部分（甚至字母）。此功能不会删除诸如“（＆n）”之类的字符串，它将仅删除“＆”，然后离开“새로（n）”。如果您想要这种行为，请使用AccessKeys.remove(label) 。
AccessKeys.toHTML(label)返回html（正确逃脱），访问键为<span class='menu-hotkey'>元素。
安全说明：在HTML元素内容中使用此功能的结果是安全的，因为它可以逃脱标签。在属性值中使用并不安全，但这不是预期的用法。
布局注意：您可能需要用<span style="white-space: pre">包围结果，以防止空格倒塌，如果访问键在空间旁边。
AccessKeys.toFragment(label)返回带有访问键的DocumentFragment ，为<span class='menu-hotkey'>元素。
布局注意：您可能需要用<span style="white-space: pre">包围结果，以防止空格倒塌，如果访问键在空间旁边。
$Window(options)创建一个可以拖动的窗口组件，然后在单击时将其带到前面，并关闭。可以使用不同的选项创建不同类型的Windows。请注意，焦点包裹在窗口的内容中。
返回带有其他方法和属性的jQuery对象（请参见下文，在选项之后）。
可以使用$window.element访问DOM节点，并且可以使用element.$window $Window DOM节点访问$ window对象。
|
返回具有其他方法和属性的jQuery对象：
title(text)设置标题，或者如果未text ，则返回窗口的当前标题。
close(force=false)关闭窗口。
如果force为true ，则不会发出“关闭”事件，并且窗口将立即关闭。
focus()试图按照此优先顺序将窗口中的某些内容集中在窗口中：
class="default"控件$window.$content ） blur()从窗户上取出聚焦。如果焦点在窗户外面，则保持不变。
minimize()最小化窗口。如果定义了$window.task.$task它将用它作为最小化目标，否则窗口将最小化到屏幕的底部。
当前的行为是它可以切换最小化。这可能会在未来发生变化。
maximize()最大化窗口。最大化时，窗口将使用position: fixed ，因此不会与页面滚动。
当前行为是它可以切换最大化。这可能会在未来发生变化。另外，如果最小化，它将恢复而不是最大化。基本上，它可以执行最大化按钮的作用，而不是简单的方法名称所建议的内容。
unminimize()私人：不要使用这个。而是使用restore() 。
从最小化状态恢复窗口。
restore()从最小化或最大化状态恢复窗口。如果未最小化或最大化窗口，则此方法无能为力。
center()以页面中的窗口为中心。您应该在完全渲染窗口的内容后调用它，或者为窗口设置了固定尺寸。
如果窗口中有图像，请在显示和居中窗口之前等待它们加载，或为图像定义固定尺寸。
applyBounds()如果部分是在屏幕外的，则适合页面内的窗口。 （如果窗口太大，则不会调整窗口的大小；它将从屏幕的右侧和底部伸出。）
bringTitleBarInBounds()重新定位窗口，以使标题栏在页面范围内，因此可以拖动。
bringToFront()通过将其z-index设置为比窗口系统使用的任何z-index将窗口带到正面。
setDimensions({ innerWidth, innerHeight, outerWidth, outerHeight })设置窗口的大小。通过{ innerWidth, innerHeight }以窗口内容或{ outerWidth, outerHeight }指定大小，以指定包括窗口框架的大小。
（将来可能会扩展这一点，以允许设置该位置...）
setIcons(icons)更改窗口的图标。 icons与options.icons的格式相同。
setTitlebarIconSize(size)设置窗口标题栏图标的大小，选择可用的最接近的尺寸。
getTitlebarIconSize()返回窗口标题栏图标的大小。
getIconAtSize(size)选择可用的最接近的图标大小，并返回一个唯一的DOM节点（即克隆），或者如果未定义图标，则null 。
这可用于表示任务栏中的窗口。
setMenuBar(menuBar)将菜单栏附加到窗口，并将菜单栏热键的键盘范围设置为窗口。
可以使用null调用以删除菜单栏。
setMinimizeTarget(minimizeTargetElement)最小化目标（任务栏按钮）表示最小化后的窗口，并用于使最小化和还原动画。如果minimizeTargetElement为null ，则窗口将最小化屏幕底部（默认值）。
$Button(text, action)在窗口的内容区域中创建一个按钮。单击时，它会自动关闭窗口。没有（）仅用于对话的好方法来防止这种情况。
如果您需要任何其他行为，只需创建<button>并将其添加到窗口的内容区域。
返回jQuery对象。
addChildWindow($window)私人：不要使用这个。
定义一个窗户小时候。对于工具窗口，焦点状态将与父窗口共享。
在创建窗口时设置options.parentWindow时，这将在内部使用。
onFocus(listener)当窗口（视觉上）聚焦时，请呼叫听众。
返回函数以删除侦听器。
onBlur(listener)当窗口（视觉上？）失去焦点时，请致电听众。
返回函数以删除侦听器。
onClosed(listener)关闭窗口时呼叫听众（在发出关闭事件后，如果没有阻止）。
返回函数以删除侦听器。
onBeforeClose(listener)在关闭窗口之前呼叫听众。如果侦听器调用event.preventDefault() ，则不会关闭窗口。
返回函数以删除侦听器。
例如，此事件对于在关闭窗口之前与用户确认很有用。
然后， $window.close(true)可以用来绕过此事件（和确认），当时应该关闭窗口时。
如果您不想阻止关闭窗口，则可能应该使用closed事件，因为假设另一个听众可以在听众后阻止关闭，从而导致过早清理。
onBeforeDrag(listener)在TitleBar拖动窗口之前，请致电侦听器。如果侦听器调用event.preventDefault() ，则将阻止阻力。
返回函数以删除侦听器。
此事件允许在JS油漆中覆盖颜色和工具Windows的阻力行为。
onTitleChange(listener)窗口标题更改时呼叫听众。
返回函数以删除侦听器。
此事件可用于更新任务栏按钮的标签。
onIconChange(listener)当窗口的图标更改时，请致电侦听器。
返回函数以删除侦听器。
此事件可用于更新任务栏按钮的图标。使用$window.getIconAtSize(size)获取适当的图标。
closed窗口是否已关闭。
icons窗口的图标是不同尺寸的图标，如options.icons或setIcons() 。
elements包含对窗口元素的引用的对象。
content （htmlelement）窗口的内容区域。
titlebar （htmlelement）窗口的标题栏，包括标题，窗口按钮以及可能的图标。
_title_area （htmlelement）标题周围的包装元素。
私人：不要使用这个。如果可能的话，请使用elements.titlebar或elements.title 。
title （htmlelement）窗口的标题。
closeButton （htmlbuttonelement）窗口的关闭按钮。
minimizeButton （htmlbuttonelement）窗口的最小化按钮。
maximizeButton （htmlbuttonelement）窗口的最大化按钮。
$content jQuery对象。
您可以在哪里添加内容到窗口。
$titlebar jQuery对象。
窗口的标题栏，包括标题，窗口按钮以及可能的图标。
$title_area私人：不要使用这个。如果可能的话，请改用$title或$titlebar 。
jQuery对象。
围绕标题包装。
$title jQuery对象。
标题栏的标题部分。
$x jQuery对象。
关闭按钮。
$minimize jQuery对象。
最小化按钮。
$maximize jQuery对象。
最大化按钮。
$icon私人：不要使用这个。
jQuery对象。
标题栏图标。
element表示窗口的DOM元素。
close弃用：改用onBeforeClose方法。
可以使用event.preventDefault()来防止关闭窗口。由于可能有多个侦听器，并且另一个听众可以防止关闭，如果您想检测窗口何时实际关闭，请使用closed事件。
closed弃用：而是使用onClosed方法。
关闭窗口时会发出此事件。它不能预防。
window-drag-start弃用：改用onBeforeDrag方法。
可以使用event.preventDefault()来防止拖动窗口。
title-change弃用：改用onTitleChange方法。
可用于更新任务栏按钮的标签。
icon-change弃用：而是使用onIconChange方法。
可用于更新任务栏按钮的图标。使用$window.getIconAtSize(size)获取适当的图标。
除center()外，没有专门用于定位窗口的API。
您可以使用$($window.element).css({ top: "500px", left: "500px" })用jQuery的css()方法设置窗口的位置，否则请使用：
$window . element . style . top = "500px" ;
$window . element . style . left = "500px" ;您还可以将position设置为fixed或absolute位置，以分别相对于视口或最近的位置祖先定位窗口。
如果要将窗口相对放置在另一个窗口中，则可以使用$otherWindow.element.getBoundingClientRect()获取另一个窗口的边界矩形，然后使用它来定位窗口。这是一个内置的DOM API。例如：
const otherRect = $otherWindow . element . getBoundingClientRect ( ) ;
$window . element . top = ` ${ otherRect . top } px` ;
$window . element . left = ` ${ otherRect . right + 10 } px` ; !important ）来定位窗口，因为库使用内联样式将窗口定位为优先。setDimensions()以允许放置窗口除尺寸外，或添加setPosition()方法。options.constrainRect在拖动和调整大小时动态约束窗口位置和大小。parse-theme.js包含用于解析和应用主题的功能。
parseThemeFileString(themeString)将INI文件字符串解析到CSS属性中。
自动呈现动态主题图形，并将其包含在CSS属性中。
applyCSSProperties(cssProperties, {element=document.documentElement, recurseIntoIframes=false}) cssProperties是具有CSS属性和值的对象。它也可以是CSSStyleDeclaration对象。
element是将属性应用于的元素。
如果recurseIntoIframes为真，则属性也将应用于元素中的所有<iframe>元素。这仅适用于相同的原始iframe。
renderThemeGraphics(cssProperties)可用于更新页面的特定部分的主题图形（滚动条图标等）。演示用于显示变化。
返回代表渲染主题图形的CSS属性。
element . style . setProperty ( '--scrollbar-size' , '30px' ) ;
applyCSSProperties ( renderThemeGraphics ( getComputedStyle ( element ) ) , { element } ) ; makeThemeCSSFile(cssProperties)导出一个主题的CSS文件。假设主题图形已经呈现。包括“生成的文件”注释。
makeBlackToInsetFilter()初始化可用于使图标显示禁用的SVG过滤器。它可能无法与所有图标一起使用，因为它使用图像的黑色部分形成形状。
CSS的用法：
button : disabled . icon {
filter : saturate ( 0 % ) opacity ( 50 % ); /* fallback until SVG filter is initialized */
filter : url ( "#os-gui-black-to-inset-filter" );
}根据MIT许可获得许可，请参阅许可证以获取详细信息。
如果您尚未安装Node.js。
克隆存储库，然后在项目目录中运行npm i以安装依赖项。同样，在从存储库中提取更改时，请运行npm i ，以防依赖关系发生变化。
运行npm start打开开发服务器。它将在默认浏览器中打开一个演示页面。对库的更改将自动重新编译，并且页面将自动重新加载。
运行npm run lint以运行类型检查和拼写检查（以及任何其他伸长任务）。
运行npm test以运行测试。这也将覆盖范围报告保存到coverage目录，但请注意，它仅记录由单元测试涵盖的代码，即直接导入到测试中的代码，而不是在页面上下文中加载的代码，因为这需要为仪器进行进一步的设置。
在更新或安装依赖项时关闭服务器是一个好主意；否则，您可能会遇到Eperm问题。
这些样式用邮政编码，用于混合蛋白和其他转换而编写。
建议：为编辑器安装PostCSS语言插件，例如PostCSS语言支持VS代码。
当前，有一些CSS必须手动重新生成浏览器并复制到特定于主题的CSS文件中。
将来node-canvas这可以使用。或者也许是UPNG.JS和普通的像素操纵。
