Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.4 KiB
86 lines
2.4 KiB
import CheckboxField from "./checkbox"; |
|
import RadioField from "./radioField"; |
|
import { ripple } from "./ripple"; |
|
import { SliderSuperTab } from "./slider"; |
|
import RadioForm from "./radioForm"; |
|
|
|
export default class Row { |
|
public container: HTMLElement; |
|
public title: HTMLDivElement; |
|
public subtitle: HTMLElement; |
|
|
|
public checkboxField: ReturnType<typeof CheckboxField>; |
|
public radioField: ReturnType<typeof RadioField>; |
|
|
|
public freezed = false; |
|
|
|
constructor(options: Partial<{ |
|
icon: string, |
|
subtitle: string, |
|
radioField: Row['radioField'], |
|
checkboxField: Row['checkboxField'], |
|
title: string, |
|
clickable: boolean, |
|
navigationTab: SliderSuperTab |
|
}> = {}) { |
|
this.container = document.createElement('div'); |
|
this.container.classList.add('row'); |
|
|
|
this.subtitle = document.createElement('div'); |
|
this.subtitle.classList.add('row-subtitle'); |
|
if(options.subtitle) { |
|
this.subtitle.innerHTML = options.subtitle; |
|
} |
|
|
|
let havePadding = false; |
|
if(options.radioField || options.checkboxField) { |
|
havePadding = true; |
|
if(options.radioField) { |
|
this.radioField = options.radioField; |
|
this.container.append(this.radioField.label); |
|
} |
|
|
|
if(options.checkboxField) { |
|
this.checkboxField = options.checkboxField; |
|
this.container.append(this.checkboxField.label); |
|
} |
|
} else { |
|
if(options.title) { |
|
this.title = document.createElement('div'); |
|
this.title.classList.add('row-title'); |
|
this.title.innerHTML = options.title; |
|
this.container.append(this.title); |
|
} |
|
|
|
if(options.icon) { |
|
havePadding = true; |
|
this.title.classList.add('tgico', 'tgico-' + options.icon); |
|
} |
|
} |
|
|
|
if(havePadding) { |
|
this.container.classList.add('row-with-padding'); |
|
} |
|
|
|
if(options.navigationTab) { |
|
this.container.addEventListener('click', () => { |
|
if(this.freezed) return; |
|
options.navigationTab.open(); |
|
}); |
|
options.clickable = true; |
|
} |
|
|
|
if(options.clickable) { |
|
this.container.classList.add('row-clickable', 'hover-effect'); |
|
ripple(this.container); |
|
} |
|
|
|
this.container.append(this.subtitle); |
|
} |
|
|
|
|
|
} |
|
|
|
export const RadioFormFromRows = (rows: Row[], onChange: (value: string) => void) => { |
|
return RadioForm(rows.map(r => ({container: r.container, input: r.radioField.input})), onChange); |
|
}; |