os gui
v0.7.3 Taskbarless Minimization
운영 체제를 모방하는 라이브러리 웹에서 그래픽 사용자 인터페이스
구체적으로, Windows 98 - 지금은 적어도; 앞으로 확장 될 수 있습니다.
이 라이브러리는 페인트, 메모장, 사운드 레코더 등을 포함하여 Windows 98의 웹 기반 버전 인 98.js.org에 전원을 공급합니다.
자세한 내용은 홈페이지를 참조하십시오.
확인란 및 라디오 항목, 장애인 상태, 하위 메뉴, 키보드 바로 가기 등을 지원하는 메뉴 표시 줄
당신이 드래그, 최대화, 최소화, 닫고, 크기를 조정할 수있는 앱 창
대화 및 도구 창 변형
최대화/최소화/복원 중에 눈을 안내하는 타이틀 바 애니메이션
포커스 격리 : 창 내에서 탭 또는 시프트+탭이 있으면 첫 번째/마지막 컨트롤로 감습니다.
가벼운 버튼, 비활성화 버튼 및 기본 액션 버튼을 포함한 버튼 스타일
스크롤 바 스타일, webkit-specific (미래에는 비 경제적 스크롤 바 라이브러리를 기반으로 하는 맞춤형 스크롤 바가있을 수 있습니다.
런타임에 Windows .theme & .themepack 파일로 마무리 할 수 있습니다!
온라인으로 데모를 참조하십시오
이 라이브러리는 현재 윈도우 구현을 위해 jQuery가 필요합니다. 메뉴 막대에는 jQuery가 필요 하지 않습니다 .
(결국 의존성이없고 싶습니다. 지금까지 메뉴 코드에서 jQuery를 제거했습니다 ...)
라이브러리는 (아직) 단일 편리한 파일로 제공되지 않습니다.
1. 리포지토리를 zip 파일로 다운로드하거나, 2. 저장소를 복제하거나, 3. 라이브러리를 NPM 패키지로 설치하십시오.
레이아웃, 테마 및 색 구성표를위한 스타일 시트와 함께 사용하려는 구성 요소 ( MenuBar.js 또는 $Window.js )에 대한 스크립트를 포함해야합니다.
소스 파일이 아닌 컴파일 된 CSS 파일을 사용해야합니다.
in <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 2px 삽입 테두리를 만듭니다.outset-deep 2px 삽입 테두리를 만듭니다 (버튼 또는 창 또는 메뉴 팝업 예 :.inset-shallow 1px 삽입 테두리를 만듭니다.outset-shallow 1px 초기 테두리를 만듭니다 버튼 스타일은 전 세계적으로 button 요소에 적용됩니다. (그리고 당신이 그것을 재설정하고 싶다면, 당신은 의사 요소를 제거해야한다는 점에 유의하십시오 ::after . @todo : Scope CSS)
토글 버튼을 만들려면 .toggle 클래스를 버튼에 추가하십시오. .selected 클래스로 눌린대로 표시하십시오. (@todo : this .pressed 의 이름 바꾸기)
Semantic aria-pressed , aria-haspopup 및/또는 aria-expanded 속성과 함께 스타일을 사용해야합니다.
버튼을 표시 할 수 있습니다. 버튼에 .default 추가하여 기본 조치입니다. Windows 98 에서이 스타일은 초점에 따라 버튼에서 버튼으로 이동합니다. 경험의 규칙은 Enter가 트리거되는 버튼에 있어야한다는 것입니다.
버튼에 .lightweight 추가하여 가벼운 버튼을 만들 수 있습니다. 가벼운 버튼은 미묘하며 호버까지 경계가 없습니다.
버튼에 표준 disabled 속성을 추가하여 버튼을 비활성화 할 수 있습니다.
버튼에 버튼을 눌러 버튼 .pressing 버튼을 표시 할 수 있습니다.
키 스트로크로 트리거되는 버튼에 유용합니다.
스크롤 바 스타일은 전 세계적으로 적용되지만 -webkit- 접두사가 있으므로 일반적으로 Chrome, Safari 및 Opera와 같은 "WebKit 기반"브라우저에서만 작동합니다.
( ::-webkit-scrollbar 및 관련 선택기로 재정의 할 수 있습니다 ( -webkit-appearance: scrollbar Works ... @todo : Scope CSS).
선택 스타일은 전 세계적으로 적용됩니다.
( ::selection 으로 재정의 할 수 있습니다 (그러나 브라우저 기본값으로 쉽게 재설정 할 수는 없습니다 ... unset 없는 한? @todo : scope css)
MenuBar(menus)메뉴 표시 줄 구성 요소를 만듭니다.
menus 메뉴 버튼 이름으로 키워진 메뉴 항목 사양의 객체 보유 배열이어야합니다.
속성 element 있는 객체를 반환 한 다음 원하는 곳에 DOM에 추가해야합니다.
데모 코드의 예를 참조하십시오.
element메뉴 표시 줄을 나타내는 DOM 요소.
closeMenus()열린 메뉴를 닫습니다.
setKeyboardScope(...eventTargets)ALT 와 같은 핫키는 주어진 요소 또는 이벤트 대상 수준에서 처리됩니다.
기본적으로 메뉴 표시 줄이 상단에있는 단일 페이지 응용 프로그램의 경우 범위는 window (Global)입니다. 메뉴 표시 줄을 창에 넣는 경우 창의 요소로 호출해야합니다.
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는 액세스 키를 정의합니다 (문자 그대로 앰퍼 샌드를 사용하기 위해 && )shortcutLabel (선택 사항) : "Ctrl+A"와 같은 항목에 표시되는 키보드 단축키 (참고 : 액세스 키와 달리 바로 가기를 직접 들어야합니다).ariaKeyShortcuts (선택 사항) : 스크린 리더의 "Control+A Meta+A"와 같은 항목의 aria-keyshortcuts . "CTRL"은 유효하지 않으며 (철자를 철자해야 함) "메타"(및 event.metaKey )를 사용하여 일반적으로 동등한 명령 키와 함께 MacOS에 대한 대안을 제공하는 것이 가장 좋습니다.action (선택 사항) : 항목을 클릭 할 때 실행할 함수 ( action 또는 checkbox 만 지정할 수 있음)checkbox (선택 사항) :이 항목이 확인란으로 작동하도록 지정하는 개체.check 항목을 확인 해야하는지 여부 를 확인하는 기능이어야하며 확인되지 않은 경우 true 반환하고 확인되지 않은 경우 false 반환해야합니다. 얼마나 귀여운 이름입니다.toggle 옵션의 상태를 전환하는 기능이지만 저장하고 있습니다. 클릭하면 호출됩니다.enabled (선택 사항) : 무조건 항목 true 무조건 비활성화하기 위해 false 일 수 있습니까 falsesubmenu (선택 사항) : 하위 메뉴 생성을위한 메뉴 항목 사양의 배열description (선택 사항) : 상태 표시 줄 구현; 이 설명으로 항목을 롤오버 할 때 info 이벤트가 방출됩니다.value (선택 사항) : 무선 항목의 경우 항목의 값; 모든 유형 일 수 있지만 === 항목을 확인하는 데 사용됩니다.라디오 그룹 사양은 다음 속성을 가진 객체입니다.
radioItems : 라디오 버튼 그룹을 만들기위한 메뉴 항목 사양 배열. submenu 와 달리 항목은이 메뉴에 직접 포함됩니다. MENU_DIVIDER 사용하여 라디오 그룹을 다른 메뉴 항목과 분리하는 것이 좋습니다.getValue : 선택한 무선 항목의 값을 반환 해야하는 함수.setValue : 응용 프로그램 별 방식으로 상태를 주어진 값으로 변경 해야하는 함수.ariaLabel (선택 사항) : 라디오 그룹의 aria-label 로 사용할 문자열 (스크린 리더 접근성)액세스 키로 알려진 상황에 맞는 핫키로 메뉴를 탐색 할 수 있습니다.
메뉴 버튼 또는 메뉴 항목의 레이블에 문자 앞에 암페어를 배치하여 액세스 키로 만들 수 있습니다. Microsoft에는 액세스 키 선택 가이드 라인을 포함하여 액세스 키에 대한 문서가 있습니다. 일반적으로 첫 번째 편지는 좋은 선택입니다.
메뉴 항목이 액세스 키를 정의하지 않으면 레이블의 첫 글자를 사용하여 액세스 할 수 있습니다.
메뉴 버튼의 경우 버튼의 액세스 키를 누를 때는 ALT를 누르야하지만 메뉴 팝업의 메뉴 항목의 경우 메뉴가 닫히므로 키를 직접 누릅니다.
동일한 액세스 키가있는 여러 메뉴 항목이 있으면 활성화하지 않고 사이에 순환됩니다. 정의 된 액세스 키와 정의 된 액세스 키가없는 메뉴 항목의 첫 글자를 포함하여 액세스 키를 독특하게 만들어야합니다. (이 동작은 Explorer의 즐겨 찾기 메뉴에서 Windows 98에서 관찰되며, 여기서 다른 메뉴 항목의 액세스 키와 일치하는 첫 번째 글자로 북마크를 만들 수 있습니다.)
MenuBar.js 가 내보내는 AccessKeys 객체가 있으며 액세스 키를 다루는 기능이 있습니다.
AccessKeys.escape(label)주어진 레이블에서 암페어를 탈출하여 액세스 키로 해석되지 않습니다.
이는 페이지 제목을 레이블로 사용하는 히스토리 메뉴와 같은 동적 메뉴에 유용합니다. 앰퍼 샌드가 접근 키로 의심스럽게 해석되거나 이중 암페어 샌드가 단일 암페어로 해석되기를 원하지 않습니다.
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) 액세스 키를 <span class='menu-hotkey'> 요소로 사용하여 HTML (올바른 탈출)을 반환합니다.
보안 참고 : 레이블을 피하기 때문에 HTML 요소 컨텐츠 에서이 기능의 결과를 사용하는 것이 안전합니다. 속성 값으로 사용하는 것은 안전하지 않지만 이는 의도 된 사용법이 아닙니다.
레이아웃 참고 : 액세스 키가 공간 옆에 있으면 흰색 공간이 붕괴되는 것을 방지하기 위해 <span style="white-space: pre"> 로 결과를 둘러싸고 싶을 수 있습니다.
AccessKeys.toFragment(label) Access Key가 <span class='menu-hotkey'> element로 Access Key를 사용하여 DocumentFragment 를 반환합니다.
레이아웃 참고 : 액세스 키가 공간 옆에 있으면 흰색 공간이 붕괴되는 것을 방지하기 위해 <span style="white-space: pre"> 로 결과를 둘러싸고 싶을 수 있습니다.
$Window(options)드래그 할 수있는 창 구성 요소를 생성하고 클릭하면 전면으로 가져와 닫힙니다. 다른 옵션으로 다른 유형의 창을 만들 수 있습니다. 초점은 창의 내용 내에서 포장됩니다.
추가 메소드와 속성으로 jQuery 객체를 반환합니다 (옵션 후 아래 참조).
DOM 노드는 $window.element 와 함께 액세스 할 수 있으며 요소와 함께 DOM 노드에서 $Window 객체에 액세스 할 수 있습니다 element.$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보다 큰 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) 타이틀 바에 의해 창을 드래그하기 전에 리스너를 호출합니다. 리스너가 event.preventDefault() 호출하면 드래그가 방지됩니다.
리스너를 제거하기 위해 함수를 반환합니다.
이 이벤트를 사용하면 JS 페인트의 색상 및 도구 창의 드래그 동작을 재정의 할 수 있습니다.
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 (htmlbuttonlement)창의 최소화 버튼.
maximizeButton (htmlbuttonlement)창이 최대화 버튼.
$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() 이외에도 Windows를 배치하기위한 API는 없습니다.
$($window.element).css({ top: "500px", left: "500px" }) 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 전달할 수 있습니다 .ConstrainRect 드래그 및 크기 조정시 창 위치와 크기를 동적으로 제한하십시오. parse-theme.js 에는 파싱 및 적용 테마를위한 기능이 포함되어 있습니다.
parseThemeFileString(themeString)INI 파일 문자열을 CSS 속성으로 구문 분석합니다.
동적 테마 그래픽을 자동으로 렌더링하고 CSS 속성에 포함시킵니다.
applyCSSProperties(cssProperties, {element=document.documentElement, recurseIntoIframes=false}) cssProperties 는 CSS 속성 및 값이있는 객체입니다. 또한 CSSStyleDeclaration 객체 일 수도 있습니다.
element 속성을 적용하는 요소입니다.
recurseIntoIframes 참이면, 속성은 요소 내의 모든 <iframe> 요소에도 적용됩니다. 이것은 동일한 오리핀 iframes에서만 작동합니다.
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를 아직 설치하지 않은 경우 Node.js를 설치하십시오.
저장소를 복제 한 다음 프로젝트 디렉토리에서 npm i 실행하여 종속성을 설치하십시오. 또한 종속성이 변경되는 경우 저장소에서 변경 사항을 가져올 때 npm i 실행하십시오.
npm start . 기본 브라우저에서 데모 페이지가 열립니다. 라이브러리 변경이 자동으로 재 컴파일되고 페이지가 자동으로 다시로드됩니다.
npm run lint 실행하여 유형 확인 및 맞춤법 검사 (및 기타 라인 팅 작업)를 실행하십시오.
npm test 실행하여 테스트를 실행하십시오. 또한 커버리지 보고서가 coverage 디렉토리에 저장되지만 단위 테스트에 의해 다루는 코드 만 기록합니다. 즉, 페이지 컨텍스트에로드 된 코드가 아닌 테스트에 직접 가져온 코드는 계측기에 대한 추가 설정이 필요하므로 주목하십시오.
종속성을 업데이트하거나 설치할 때 서버를 닫는 것이 좋습니다. 그렇지 않으면 EPERM 문제가 발생할 수 있습니다.
스타일은 믹스 인 및 기타 변환을 위해 Postcss와 함께 작성됩니다.
권장 : VS 코드에 대한 PostCSS 언어 지원과 같은 편집자를위한 PostCSS 언어 플러그인을 설치하십시오.
현재 브라우저에서 수동으로 재생되고 테마 별 CSS 파일로 복사 해야하는 CS가 있습니다.
앞으로 이것은 .theme/.themepack 파일에 대한 사용자 정의 PostCSS 구문 파서로 수행 될 수 있으며, node-canvas 필요하지 않도록 래스터 그래픽 대신 SVG (기본 종속성은 고통)입니다. 또는 upng.js 및 일반 픽셀 조작 일 수도 있습니다.
