Skip to content

Commit ad19882

Browse files
authored
Update settings.js
kode yang diberikan berfungsi untuk mengatur status tab yang diperluas/disembunyikan di dalam bagian pengaturan aplikasi Gradio.Penyimpanan Lokal dan Status Tab: Penyimpanan Lokal: Kode ini menggunakan fitur penyimpanan lokal browser untuk mengingat pengaturan pengguna, khususnya status perluasan atau penyembunyian tab. Data ini disimpan secara persisten, bahkan setelah pengguna menutup dan membuka kembali halaman. Pengambilan Elemen Tab: Kode ini mengidentifikasi semua elemen tab dalam halaman dan menyimpannya dalam variabel settingsTabs. Fungsi Pemulihan Status Tab: Mengembalikan Status: Fungsi ini bertanggung jawab untuk mengembalikan tampilan tab sesuai dengan pengaturan yang telah disimpan sebelumnya. Membaca Data dari Penyimpanan: Data yang disimpan sebelumnya diambil dari penyimpanan lokal dan diubah menjadi format yang mudah dibaca oleh JavaScript. Menerapkan Perubahan Tampilan: Setiap tab diperiksa untuk melihat apakah ID-nya ada dalam daftar tab yang seharusnya diperluas. Jika ya, tab tersebut akan ditampilkan; jika tidak, tab tersebut akan disembunyikan. Fungsi Memperbarui Penyimpanan: Memperbarui Data: Fungsi ini memperbarui data yang disimpan di penyimpanan lokal setiap kali pengguna mengubah status perluasan atau penyembunyian tab. Mencatat Tab yang Diperluas: Fungsi ini membuat daftar ID dari semua tab yang sedang diperluas dan menyimpannya dalam format JSON. Menyimpan ke Penyimpanan Lokal: Daftar ID tab yang diperluas kemudian disimpan kembali ke penyimpanan lokal, sehingga perubahan tersebut akan diingat saat pengguna membuka halaman lagi. Event Listener dan Pengalihan Tab: Menambahkan Event Listener: Setiap tombol yang terkait dengan tab diberi event listener. Artinya, ketika tombol ditekan, sebuah fungsi akan dijalankan. Mengubah Status Tab: Ketika tombol ditekan, fungsi tersebut akan mengubah tampilan tab (memperluas atau menyembunyikan). Memperbarui Penyimpanan: Setelah status tab diubah, fungsi updateStoredSettings dipanggil untuk memperbarui data yang disimpan di penyimpanan lokal.
1 parent be2d670 commit ad19882

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

javascript/settings.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,36 @@ onUiLoaded(function() {
4545
buttonShowAllPages.addEventListener("click", settingsShowAllTabs);
4646
});
4747

48+
const storedSettings = localStorage.getItem('gradio-settings-tabs');
49+
const settingsTabs = gradioApp().querySelector('#settings div');
50+
51+
function restoreTabState() {
52+
if (!storedSettings) return;
53+
const expandedTabs = JSON.parse(storedSettings);
54+
settingsTabs.querySelectorAll('div').forEach(tab => {
55+
tab.style.display = expandedTabs.includes(tab.id) ? 'block' : 'none';
56+
});
57+
}
58+
59+
function updateStoredSettings() {
60+
const expandedTabs = Array.from(settingsTabs.querySelectorAll('div:not([style*="none"])'))
61+
.map(tab => tab.id);
62+
localStorage.setItem('gradio-settings-tabs', JSON.stringify(expandedTabs));
63+
}
64+
65+
restoreTabState();
66+
67+
settingsTabs.querySelectorAll('div button').forEach(button => {
68+
button.addEventListener('click', function() {
69+
const tabId = this.parentElement.id;
70+
if (this.parentElement.style.display === 'block') {
71+
this.parentElement.style.display = 'none';
72+
} else {
73+
this.parentElement.style.display = 'block';
74+
}
75+
updateStoredSettings();
76+
});
77+
});
4878

4979
onOptionsChanged(function() {
5080
if (gradioApp().querySelector('#settings .settings-category')) return;

0 commit comments

Comments
 (0)