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.
200 lines
6.2 KiB
200 lines
6.2 KiB
/* |
|
* https://github.com/morethanwords/tweb |
|
* Copyright (C) 2019-2021 Eduard Kuzmenko |
|
* https://github.com/morethanwords/tweb/blob/master/LICENSE |
|
*/ |
|
|
|
import { SliderSuperTab } from "../../slider" |
|
import { generateSection } from ".."; |
|
import RangeSelector from "../../rangeSelector"; |
|
import Button from "../../button"; |
|
import CheckboxField from "../../checkboxField"; |
|
import RadioField from "../../radioField"; |
|
import appStateManager from "../../../lib/appManagers/appStateManager"; |
|
import rootScope from "../../../lib/rootScope"; |
|
import { isApple } from "../../../helpers/userAgent"; |
|
import Row from "../../row"; |
|
import { attachClickEvent } from "../../../helpers/dom"; |
|
import AppBackgroundTab from "./background"; |
|
import { LangPackKey, _i18n } from "../../../lib/langPack"; |
|
|
|
export class RangeSettingSelector { |
|
public container: HTMLDivElement; |
|
private range: RangeSelector; |
|
|
|
public onChange: (value: number) => void; |
|
|
|
constructor(name: LangPackKey, step: number, initialValue: number, minValue: number, maxValue: number) { |
|
const BASE_CLASS = 'range-setting-selector'; |
|
this.container = document.createElement('div'); |
|
this.container.classList.add(BASE_CLASS); |
|
|
|
const details = document.createElement('div'); |
|
details.classList.add(BASE_CLASS + '-details'); |
|
|
|
const nameDiv = document.createElement('div'); |
|
nameDiv.classList.add(BASE_CLASS + '-name'); |
|
_i18n(nameDiv, name); |
|
|
|
const valueDiv = document.createElement('div'); |
|
valueDiv.classList.add(BASE_CLASS + '-value'); |
|
valueDiv.innerHTML = '' + initialValue; |
|
|
|
details.append(nameDiv, valueDiv); |
|
|
|
this.range = new RangeSelector(step, initialValue, minValue, maxValue); |
|
this.range.setListeners(); |
|
this.range.setHandlers({ |
|
onScrub: value => { |
|
if(this.onChange) { |
|
this.onChange(value); |
|
} |
|
|
|
//console.log('font size scrub:', value); |
|
valueDiv.innerText = '' + value; |
|
} |
|
}); |
|
|
|
this.container.append(details, this.range.container); |
|
} |
|
} |
|
|
|
export default class AppGeneralSettingsTab extends SliderSuperTab { |
|
init() { |
|
this.container.classList.add('general-settings-container'); |
|
this.setTitle('General'); |
|
|
|
const section = generateSection.bind(null, this.scrollable); |
|
|
|
{ |
|
const container = section('Settings'); |
|
|
|
const range = new RangeSettingSelector('TextSize', 1, rootScope.settings.messagesTextSize, 12, 20); |
|
range.onChange = (value) => { |
|
appStateManager.setByKey('settings.messagesTextSize', value); |
|
}; |
|
|
|
const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'photo', text: 'ChatBackground'}); |
|
|
|
attachClickEvent(chatBackgroundButton, () => { |
|
new AppBackgroundTab(this.slider).open(); |
|
}); |
|
|
|
const animationsCheckboxField = new CheckboxField({ |
|
text: 'EnableAnimations', |
|
name: 'animations', |
|
stateKey: 'settings.animationsEnabled', |
|
withRipple: true |
|
}); |
|
|
|
container.append(range.container, chatBackgroundButton, animationsCheckboxField.label); |
|
} |
|
|
|
{ |
|
const container = section('General.Keyboard'); |
|
|
|
const form = document.createElement('form'); |
|
|
|
const enterRow = new Row({ |
|
radioField: new RadioField({ |
|
langKey: 'General.SendShortcut.Enter', |
|
name: 'send-shortcut', |
|
value: 'enter', |
|
stateKey: 'settings.sendShortcut' |
|
}), |
|
subtitleLangKey: 'General.SendShortcut.NewLine.ShiftEnter' |
|
}); |
|
|
|
const ctrlEnterRow = new Row({ |
|
radioField: new RadioField({ |
|
name: 'send-shortcut', |
|
value: 'ctrlEnter', |
|
stateKey: 'settings.sendShortcut' |
|
}), |
|
subtitleLangKey: 'General.SendShortcut.NewLine.Enter' |
|
}); |
|
_i18n(ctrlEnterRow.radioField.main, 'General.SendShortcut.CtrlEnter', [isApple ? '⌘' : 'Ctrl']); |
|
|
|
form.append(enterRow.container, ctrlEnterRow.container); |
|
container.append(form); |
|
} |
|
|
|
{ |
|
const container = section('AutoDownloadMedia'); |
|
//container.classList.add('sidebar-left-section-disabled'); |
|
|
|
const contactsCheckboxField = new CheckboxField({ |
|
text: 'AutodownloadContacts', |
|
name: 'contacts', |
|
stateKey: 'settings.autoDownload.contacts', |
|
withRipple: true |
|
}); |
|
const privateCheckboxField = new CheckboxField({ |
|
text: 'AutodownloadPrivateChats', |
|
name: 'private', |
|
stateKey: 'settings.autoDownload.private', |
|
withRipple: true |
|
}); |
|
const groupsCheckboxField = new CheckboxField({ |
|
text: 'AutodownloadGroupChats', |
|
name: 'groups', |
|
stateKey: 'settings.autoDownload.groups', |
|
withRipple: true |
|
}); |
|
const channelsCheckboxField = new CheckboxField({ |
|
text: 'AutodownloadChannels', |
|
name: 'channels', |
|
stateKey: 'settings.autoDownload.channels', |
|
withRipple: true |
|
}); |
|
|
|
container.append(contactsCheckboxField.label, privateCheckboxField.label, groupsCheckboxField.label, channelsCheckboxField.label); |
|
} |
|
|
|
{ |
|
const container = section('General.AutoplayMedia'); |
|
//container.classList.add('sidebar-left-section-disabled'); |
|
|
|
const gifsCheckboxField = new CheckboxField({ |
|
text: 'AutoplayGIF', |
|
name: 'gifs', |
|
stateKey: 'settings.autoPlay.gifs', |
|
withRipple: true |
|
}); |
|
const videosCheckboxField = new CheckboxField({ |
|
text: 'AutoplayVideo', |
|
name: 'videos', |
|
stateKey: 'settings.autoPlay.videos', |
|
withRipple: true |
|
}); |
|
|
|
container.append(gifsCheckboxField.label, videosCheckboxField.label); |
|
} |
|
|
|
{ |
|
const container = section('Telegram.InstalledStickerPacksController'); |
|
|
|
const suggestCheckboxField = new CheckboxField({ |
|
text: 'Stickers.SuggestStickers', |
|
name: 'suggest', |
|
stateKey: 'settings.stickers.suggest', |
|
withRipple: true |
|
}); |
|
const loopCheckboxField = new CheckboxField({ |
|
text: 'InstalledStickers.LoopAnimated', |
|
name: 'loop', |
|
stateKey: 'settings.stickers.loop', |
|
withRipple: true |
|
}); |
|
|
|
container.append(suggestCheckboxField.label, loopCheckboxField.label); |
|
} |
|
} |
|
|
|
onOpen() { |
|
if(this.init) { |
|
this.init(); |
|
this.init = null; |
|
} |
|
} |
|
}
|
|
|