Unduh os gui - os gui Kode Sumber OS GUI

os gui

Kode sumber lainnya

v0.7.3 Taskbarless Minimization

Unduh

Perpustakaan untuk meniru Sistem Operasi Antarmuka Pengguna Grafis di Web

Secara khusus, Windows 98 - setidaknya untuk saat ini; itu bisa diperluas di masa depan.

Perpustakaan ini Powers 98.js.org, versi Windows 98 berbasis web, termasuk cat, notepad, perekam suara, dan banyak lagi.

Lihat beranda untuk informasi lebih lanjut.

Fitur

Bilah menu, dengan dukungan untuk kotak centang dan item radio, status dinonaktifkan, submenus, pintasan keyboard, dan banyak lagi
Aplikasi Windows yang dapat Anda seret, memaksimalkan, meminimalkan, menutup, dan mengubah ukuran
Varian dialog dan jendela alat
Animasi terbang titlebar yang memandu mata Anda selama memaksimalkan/meminimalkan/memulihkan
Fokus Containment: Jika Anda tab atau Shift+tab di dalam jendela, itu membungkus ke kontrol pertama/terakhir.
Gaya tombol, termasuk tombol ringan, tombol dinonaktifkan, dan tombol aksi default
Gaya scrollbar, spesifik webkit (di masa depan mungkin ada scrollbar khusus berdasarkan perpustakaan scrollbar non-intrusif, atau gaya yang mendukung perpustakaan, di mana Anda diharapkan menggunakan perpustakaan secara langsung)
- Panah yang ditampilkan secara prosedural, memungkinkan untuk ukuran scrollbar yang berbeda
- Efek inversi saat mengklik trek scrollbar
Dapat ditema dengan windows .theme & .themepack file saat runtime !

Demo

Lihat demo online di sini

Lihat juga

98.js, desktop web saya
Padraigfl/Packard-Belle
Arturbien/React95
React95/React95

Persyaratan

Perpustakaan ini saat ini membutuhkan jQuery untuk implementasi windowing. Bilah menu tidak memerlukan jQuery.

(Akhirnya saya ingin tidak memiliki dependensi. Sejauh ini saya telah menghapus jQuery dari kode menu ...)

Pengaturan

Perpustakaan belum (belum) disediakan sebagai satu file yang nyaman.

Anda dapat 1. Unduh repositori sebagai file zip, 2. Kloning repositori, atau 3. Instal perpustakaan sebagai paket NPM.

Anda harus menyertakan skrip untuk komponen yang ingin Anda gunakan ( MenuBar.js atau $Window.js ), bersama dengan stylesheet untuk tata letak, tema, dan skema warna.

Pastikan untuk menggunakan file CSS yang dikompilasi, bukan file sumber.

Di <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 " >

Di <head> atau <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

Catatan : API kemungkinan akan banyak berubah, tetapi saya mempertahankan changelog.

Panel & Gaya Inset

.inset-deep menciptakan perbatasan inset 2px
.outset-deep Membuat perbatasan inset 2px (seperti tombol atau jendela atau popup menu)
.inset-shallow menciptakan perbatasan inset 1px
.outset-shallow menciptakan batas awal 1px

Gaya tombol

Gaya tombol diterapkan pada elemen button secara global. (Dan jika Anda ingin mengatur ulang, perhatikan bahwa Anda harus menyingkirkan elemen pseudo ::after juga. @Todo: Lingkup CSS)

Tombol sakelar

Untuk membuat tombol sakelar, tambahkan kelas .toggle ke tombol. Jadikan itu ditampilkan sebagai ditekan dengan kelas .selected . (@Todo: ganti nama ini .pressed )

Anda harus menggunakan gaya bersama dengan atribut aria-pressed , aria-haspopup , dan/atau aria-expanded sebagaimana mestinya.

Tombol default

Anda dapat menampilkan tombol adalah tindakan default dengan menambahkan .default ke tombol. Perhatikan bahwa di Windows 98, gaya ini bergerak dari tombol ke tombol tergantung pada fokusnya. Aturan praktis adalah bahwa itu harus ada di tombol yang akan memicu dengan Enter.

Tombol ringan

Anda dapat membuat tombol ringan dengan menambahkan .lightweight ke tombol. Tombol ringan halus dan tidak memiliki perbatasan sampai melayang.

Status tombol dinonaktifkan

Anda dapat menonaktifkan tombol dengan menambahkan atribut standar disabled ke tombol.

Status tombol yang ditekan

Anda dapat menampilkan tombol sebagai ditekan dengan menambahkan kelas .pressing ke tombol.
Ini berguna untuk tombol yang dipicu oleh penekanan tombol.

Gaya scrollbar

Gaya scrollbar diterapkan secara global, tetapi mereka memiliki awalan -webkit- , sehingga mereka hanya akan bekerja di browser "berbasis web", umumnya, seperti chrome, safari, dan opera.

(Dapat ditimpa dengan ::-webkit-scrollbar dan selektor terkait (tetapi tidak mudah diatur ulang ke browser default, kecuali -webkit-appearance: scrollbar berfungsi ... @todo: lingkup css)

Gaya seleksi

Gaya seleksi diterapkan secara global.

(Dapat ditimpa dengan ::selection (tetapi tidak mudah diatur ulang ke browser default ... kecuali dengan unset ? @Todo: Lingkup CSS)

`MenuBar(menus)`

Membuat komponen bar menu.

menus harus berupa array penahan objek dari spesifikasi item menu, dikunci oleh nama tombol menu.

Mengembalikan objek dengan element properti, yang kemudian harus Anda tambahkan ke DOM tempat yang Anda inginkan.

Lihat contoh dalam kode demo.

`element`

Elemen DOM yang mewakili bilah menu.

`closeMenus()`

Menutup menu apa pun yang terbuka.

`setKeyboardScope(...eventTargets)`

Hotkeys Like Alt akan ditangani pada tingkat elemen yang diberikan atau target acara.

Secara default, ruang lingkupnya adalah window (Global), untuk kasus aplikasi satu halaman di mana bilah menu berada di atas. Jika Anda meletakkan bilah menu di jendela, Anda harus memanggil ini dengan elemen jendela:

 menu_bar . setKeyboardScope ( $window . element ) ;

atau lebih baik lagi,

 $window . setMenuBar ( menu_bar ) ;

Yang menangani ruang lingkup keyboard untuk Anda, sambil memasang bilah menu ke jendela.

Perhatikan bahwa beberapa perilaku keyboard selalu ditangani jika bilah menu memiliki fokus.

Catatan juga untuk iframes, Anda mungkin perlu memanggil ini dengan $window[0], iframe.contentWindow saat ini, tetapi ini harus diubah di masa mendatang (acara keyboard harus diproksi).

Acara: `info`

Dapat digunakan untuk mengimplementasikan bilah status. Deskripsi disediakan sebagai event.detail.description saat menggulung item menu yang menentukan description . Misalnya:

 menubar . element . addEventListener ( "info" , ( event ) => {
	statusBar . textContent = event . detail ?. description || "" ;
} ) ;

Acara: `default-info`

Sinyal bahwa bilah status harus diatur ulang menjadi kosong atau pesan default.

 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.
} ) ;

Spesifikasi Item Menu

Spesifikasi item menu adalah MENU_DIVIDER (konstanta yang menunjukkan aturan horizontal), atau spesifikasi grup radio, atau objek dengan properti berikut:

label : Label untuk item; ampersands mendefinisikan kunci akses (untuk menggunakan ampersand literal, gunakan && )
shortcutLabel (Opsional): Pintasan keyboard untuk ditampilkan untuk item, seperti "Ctrl+A" (Catatan: Anda perlu mendengarkan sendiri pintasan, tidak seperti tombol akses)
ariaKeyShortcuts (opsional): aria-keyshortcuts untuk item, seperti "Kontrol+A Meta+A", untuk pembaca layar. "Ctrl" tidak valid (Anda harus mengejanya), dan yang terbaik adalah memberikan alternatif untuk macOS, biasanya dengan kunci perintah yang setara, menggunakan "meta" (dan event.metaKey ).
action (Opsional): Fungsi untuk dieksekusi saat item diklik (hanya dapat menentukan action atau checkbox )
checkbox (opsional): Objek yang menentukan bahwa item ini harus berperilaku sebagai kotak centang.
- check properti dari objek ini harus menjadi fungsi yang memeriksa apakah item harus diperiksa atau tidak, mengembalikan true untuk dicentang dan false untuk tidak dicentang. Nama yang sangat imut.
- toggle properti harus menjadi fungsi yang mengubah keadaan opsi, namun Anda menyimpannya; dipanggil saat diklik.
enabled (Opsional): Dapat false untuk menonaktifkan item tanpa syarat, atau fungsi yang menentukan apakah item harus diaktifkan, mengembalikan true untuk mengaktifkan item, false untuk menonaktifkan.
submenu (opsional): Array spesifikasi item menu untuk membuat submenu
description (Opsional): Untuk mengimplementasikan bilah status; Acara info dipancarkan saat menggulung item dengan deskripsi ini
value (opsional): Untuk item radio, nilai item; dapat berupa jenis apa pun, tetapi === digunakan untuk menentukan apakah item diperiksa.

Spesifikasi grup radio adalah objek dengan properti berikut:

radioItems : Array spesifikasi item menu untuk membuat grup tombol radio. Tidak seperti submenu , item disertakan langsung dalam menu ini. Disarankan untuk memisahkan grup radio dari item menu lain dengan MENU_DIVIDER .
getValue : Fungsi yang harus mengembalikan nilai item radio yang dipilih.
setValue : Fungsi yang harus mengubah status ke nilai yang diberikan, dengan cara khusus aplikasi.
ariaLabel (Opsional): String yang akan digunakan sebagai aria-label untuk grup radio (untuk aksesibilitas pembaca layar)

Kunci akses

Menu dapat dinavigasi dengan hotkey kontekstual yang dikenal sebagai kunci akses .

Tempatkan ampersand di depan huruf di tombol menu atau label item menu untuk menjadikannya kunci akses. Microsoft memiliki dokumentasi tentang kunci akses, termasuk pedoman untuk memilih kunci akses. Umumnya surat pertama adalah pilihan yang baik.

Jika item menu tidak menentukan kunci akses, huruf pertama label dapat digunakan untuk mengaksesnya.

Untuk tombol menu, Anda harus menahan alt saat menekan tombol akses tombol, tetapi untuk item menu di popup menu Anda harus menekan tombol secara langsung, karena ALT akan menutup menu.

Jika ada beberapa item menu dengan tombol akses yang sama, itu akan bersepeda di antara mereka tanpa mengaktifkannya. Anda harus mencoba membuat tombol akses unik, termasuk antara tombol akses yang ditentukan dan huruf pertama dari item menu tanpa tombol akses yang ditentukan. (Perilaku ini diamati di Windows 98, di menu favorit Explorer, di mana Anda dapat membuat bookmark dengan huruf pertama yang cocok dengan tombol akses item menu lainnya.)

Ada objek AccessKeys yang diekspor oleh MenuBar.js , dengan fungsi untuk berurusan dengan kunci akses:

`AccessKeys.escape(label)`

Menyampaikan ampersand dalam label yang diberikan, sehingga mereka tidak ditafsirkan sebagai kunci akses.

Ini berguna untuk menu dinamis, seperti menu sejarah yang menggunakan judul halaman sebagai label. Anda tidak ingin ampersands ditafsirkan secara palsu sebagai kunci akses, atau ampersand ganda untuk ditafsirkan sebagai ampersand tunggal.

`AccessKeys.unescape(label)`

Un-escapes semua ampersand ganda dalam label.

Untuk rendering, gunakan toHTML atau toFragment sebagai gantinya.

`AccessKeys.has(label)`

Mengembalikan true jika label memiliki kunci akses.

`AccessKeys.get(label)`

Mengembalikan kunci akses untuk label yang diberikan, atau nol jika tidak ada.

MenuBar menangani tombol akses secara otomatis, tetapi jika Anda memasukkan kunci akses untuk elemen UI lainnya, Anda perlu menanganinya sendiri, dan Anda dapat menggunakan ini daripada menggerakkan kunci akses akses, sehingga tidak perlu diubah di dua tempat.

`AccessKeys.remove(label)`

Menghapus indikator kunci akses ( & ) dari label, dan tidak ada ampersand ganda. Juga menghapus indikator kunci akses tanda kurung, seperti "(& n)", sebagai kasus khusus.

`AccessKeys.toText(label)`

Menghapus indikator kunci akses ( & ) dari label, dan tidak ada ampersand ganda. Ini seperti toHTML tetapi untuk teks biasa.

Catatan : Meskipun sering kali akses akses adalah bagian dari kata, seperti "& baru", dalam terjemahan mereka sering ditunjukkan secara terpisah, seperti "새로 만들기 (& n)", karena kunci akses tetap sama, tetapi surat itu bukan lagi bagian dari kata (atau bahkan alfabet). Fungsi ini tidak menghilangkan string seperti "(& n)", itu hanya akan menghapus "&" dan meninggalkan "새로 만들기 (n)". Jika Anda menginginkan perilaku itu, gunakan AccessKeys.remove(label) .

`AccessKeys.toHTML(label)`

Mengembalikan html (dengan pelarian yang tepat) dengan kunci akses sebagai elemen <span class='menu-hotkey'> .

Catatan Keamanan : Aman untuk menggunakan hasil fungsi ini dalam konten elemen HTML, karena lolos dari label. Tidak aman digunakan dalam nilai atribut, tetapi ini bukan penggunaan yang dimaksud.

Catatan Tata Letak : Anda mungkin ingin mengelilingi hasilnya dengan <span style="white-space: pre"> Untuk mencegah ruang putih runtuh jika kunci akses berada di sebelah ruang.

`AccessKeys.toFragment(label)`

Mengembalikan DocumentFragment dengan kunci akses sebagai elemen <span class='menu-hotkey'> .

Catatan Tata Letak : Anda mungkin ingin mengelilingi hasilnya dengan <span style="white-space: pre"> Untuk mencegah ruang putih runtuh jika kunci akses berada di sebelah ruang.

`$Window(options)`

Membuat komponen jendela yang dapat diseret dan semacamnya, dibawa ke depan saat diklik, dan ditutup. Berbagai jenis jendela dapat dibuat dengan opsi yang berbeda. Perhatikan bahwa fokus membungkus dalam konten jendela.

Mengembalikan objek jQuery dengan metode dan properti tambahan (lihat di bawah, setelah opsi).

Node DOM dapat diakses dengan $window.element , dan objek $Window dapat diakses dari node DOM dengan dengan element.$window .

options.title : Mengatur teks awal.

options.icons : Menentukan ikon jendela dengan ukuran yang berbeda. Lewati objek dengan kunci yang berukuran dalam piksel (atau "apa pun"), dan nilai -nilai yang merupakan URL gambar, atau objek dengan srcset jika Anda ingin mendukung kepadatan piksel yang berbeda, atau node DOM jika Anda ingin kontrol penuh (misalnya menggunakan <svg> atau ikon font atau emoji).

options.toolWindow : Jika true , jendela akan menjadi jendela alat, yang berarti tidak akan memiliki tombol meminimalkan atau memaksimalkan, dan itu akan ditampilkan sebagai selalu difokuskan secara default. Ini juga akan memiliki tombol tutup yang lebih kecil di gaya default.

options.parentWindow : Jika ditentukan, jendela akan menjadi anak dari jendela ini. Untuk jendela alat, status fokus akan dibagikan dengan jendela induk.

options.maximizeButton : Jika diatur ke false , jendela tidak akan memiliki tombol Maximize. Anda tidak dapat mengaktifkan ini jika toolWindow true .

options.minimizeButton : Jika diatur ke false , jendela tidak akan memiliki tombol minimalkan. Anda tidak dapat mengaktifkan ini jika toolWindow true .

options.closeButton : Jika diatur ke false , jendela tidak akan memiliki tombol tutup.

options.resizable : Jika diatur ke true , jendela dapat diubah ukurannya dengan tepi dan sudut.

options.outerWidth : Menentukan lebar awal jendela, termasuk perbatasan.

options.outerHeight : Menentukan ketinggian awal jendela, termasuk judul bilah, bilah menu, dan perbatasan.

options.innerWidth : Menentukan lebar awal konten jendela, tidak termasuk perbatasan.

options.innerHeight : Menentukan ketinggian awal konten jendela, tidak termasuk judul bilah, bilah menu, dan perbatasan

options.minOuterWidth : Lebar luar minimum jendela (saat mengubah ukuran), dalam piksel.

options.minOuterHeight : Tinggi luar minimum jendela (saat mengubah ukuran), dalam piksel.

options.minInnerWidth : Lebar minimum konten jendela (saat mengubah ukuran), dalam piksel.

options.minInnerHeight : Tinggi minimum konten jendela (saat mengubah ukuran), dalam piksel.

options.constrainRect(rect, x_axis, y_axis) : Fungsi yang dapat digunakan untuk membatasi jendela ke persegi panjang tertentu. Mengambil dan mengembalikan objek persegi panjang dengan sifat x , y , width , dan height . x_axis dan y_axis Tentukan apa yang diseret: -1 untuk kiri dan atas, 1 untuk kanan dan bawah, dan 0 untuk tengah. Perhatikan bahwa jendela akan selalu dibatasi untuk tidak bergerak melewati lebar dan tinggi minimum.

options.iframes : Berisi opsi untuk mengendalikan integrasi iframe. Secara default OS-GUI akan mencoba meningkatkan iframe dengan logika untuk:

options.iframes.ignoreCrossOrigin : Setel ke True to Silence Cross-Origin Warnings for Iframe di dalam jendela. Integrasi fokus tidak dapat sepenuhnya bekerja dengan cross-origin iframe. Akan ada kasus di mana jendela tidak ditampilkan sebagai fokus saat mengklik ke iframe, dan fokus tidak dapat dipulihkan ke kontrol di dalam iframe.

Mengembalikan objek jQuery dengan metode dan properti tambahan:

`title(text)`

Mengatur judul, atau jika text tidak dilewati, mengembalikan judul jendela saat ini.

`close(force=false)`

Menutup jendela.

Jika force itu true , acara "Tutup" tidak akan dipancarkan, dan jendela akan segera ditutup.

`focus()`

Mencoba memfokuskan sesuatu di dalam jendela, dalam urutan prioritas ini:

Kontrol terfokus terakhir di dalam jendela
Kontrol dengan class="default"
Jika itu jendela alat, jendela induk
dan sebaliknya jendela itu sendiri (khususnya $window.$content )

`blur()`

Menghapus fokus dari jendela. Jika fokus berada di luar jendela, itu tidak berubah.

`minimize()`

Meminimalkan jendela. Jika $window.task.$task didefinisikan, itu akan menggunakannya sebagai target untuk meminimalkan, jika tidak jendela akan meminimalkan ke bagian bawah layar.

Perilaku saat ini adalah minimalisasi mengubah minimalisasi. Ini mungkin berubah di masa depan.

`maximize()`

Memaksimalkan jendela. Saat memaksimalkan, jendela akan menggunakan position: fixed , sehingga tidak akan menggulir dengan halaman.

Perilaku saat ini adalah bahwa ia mengubah maksimalisasi. Ini mungkin berubah di masa depan. Juga, jika diminimalkan, itu akan mengembalikan alih -alih memaksimalkan. Pada dasarnya, ia melakukan apa yang dilakukan tombol Maksimalkan, bukan hanya apa yang disarankan oleh nama metode.

`unminimize()`

Pribadi: Jangan gunakan ini. Gunakan restore() sebagai gantinya.

Mengembalikan jendela dari keadaan yang diminimalkan.

`restore()`

Mengembalikan jendela dari keadaan yang diminimalkan atau dimaksimalkan. Jika jendela tidak diminimalkan atau dimaksimalkan, metode ini tidak melakukan apa -apa.

`center()`

Memusatkan jendela di halaman. Anda harus memanggil ini setelah isi jendela sepenuhnya diterjemahkan, atau Anda telah menetapkan ukuran tetap untuk jendela.

Jika Anda memiliki gambar di jendela, tunggu mereka memuat sebelum menunjukkan dan memusatkan jendela, atau menentukan ukuran tetap untuk gambar.

`applyBounds()`

Sesuai dengan jendela di dalam halaman jika sebagian di luar layar. (Tidak mengubah ukuran jendela jika terlalu besar; itu akan keluar dari kanan dan bawah layar.)

`bringTitleBarInBounds()`

Reposisi jendela sehingga bilah judul berada dalam batas -batas halaman, sehingga dapat diseret.

`bringToFront()`

Membawa jendela ke depan dengan mengatur z-index ke lebih besar dari z-index yang belum digunakan oleh sistem windowing.

`setDimensions({ innerWidth, innerHeight, outerWidth, outerHeight })`

Mengatur ukuran jendela. Lulus { innerWidth, innerHeight } untuk menentukan ukuran dalam hal konten jendela, atau { outerWidth, outerHeight } untuk menentukan ukuran termasuk bingkai jendela.

(Ini dapat diperluas di masa depan untuk memungkinkan pengaturan posisi juga ...)

`setIcons(icons)`

Mengubah ikon jendela. icons berada dalam format yang sama dengan options.icons .

`setTitlebarIconSize(size)`

Mengatur ukuran ikon bilah judul jendela, memilih ukuran terdekat yang tersedia.

`getTitlebarIconSize()`

Mengembalikan ukuran ikon bilah judul jendela.

`getIconAtSize(size)`

Pilih ukuran ikon terdekat yang tersedia, dan mengembalikan simpul DOM yang unik (yaitu dikloning), atau null jika tidak ada ikon yang ditentukan.

Ini dapat digunakan untuk mewakili jendela di bilah tugas.

`setMenuBar(menuBar)`

Tambahkan bilah menu ke jendela, dan atur ruang lingkup keyboard untuk hotkeys bar menu ke jendela.

Dapat dipanggil dengan null untuk menghapus bilah menu.

`setMinimizeTarget(minimizeTargetElement)`

Minimalkan target (tombol bilah tugas) mewakili jendela saat diminimalkan, dan digunakan untuk menjiwai meminimalkan dan memulihkan. Jika minimizeTargetElement adalah null , jendela akan meminimalkan ke bagian bawah layar (default).

`$Button(text, action)`

Membuat tombol di area konten jendela. Secara otomatis menutup jendela saat diklik. Tidak ada cara (bagus) untuk mencegah ini, karena itu dimaksudkan hanya untuk dialog.

Jika Anda membutuhkan perilaku lain, cukup buat <button> dan tambahkan ke area konten jendela.

Mengembalikan objek jQuery.

`addChildWindow($window)`

Pribadi: Jangan gunakan ini.

Mendefinisikan jendela sebagai seorang anak. Untuk jendela alat, status fokus akan dibagikan dengan jendela induk.

Ini digunakan secara internal ketika Anda mengatur options.parentWindow ParentWindow saat membuat jendela.