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和普通的像素操縱。
