This repository has been archived by the owner on Oct 25, 2022. It is now read-only.
forked from cameroncondry/cbc-kitten-scientists
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(ui): Move core UI elements out of
SettingsSectionUi
- Loading branch information
1 parent
67e9f8d
commit da66504
Showing
16 changed files
with
434 additions
and
326 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import { SettingLimited } from "../options/Settings"; | ||
| import { clog } from "../tools/Log"; | ||
| import { UserScript } from "../UserScript"; | ||
| import { SettingUi } from "./SettingUi"; | ||
|
|
||
| export class SettingLimitedUi { | ||
| /** | ||
| * Create a UI element for an option that can be limited. | ||
| * This will result in an element with a checkbox that has a "Limited" label. | ||
| * | ||
| * @param host The userscript instance. | ||
| * @param name A unique name for this option. | ||
| * @param option The option model. | ||
| * @param label The label for the option. | ||
| * @param delimiter Should a delimiter be rendered after this element? | ||
| * @param upgradeIndicator Should an indicator be rendered in front of the elemnt, | ||
| * to indicate that this is an upgrade of a prior option? | ||
| * @param handler Handlers to call when the option is checked or unchecked. | ||
| * @param handler.onCheck Is called when the option is checked. | ||
| * @param handler.onUnCheck Is called when the option is unchecked. | ||
| * @param handler.onLimitedCheck Is called when the "Limited" checkbox is checked. | ||
| * @param handler.onLimitedUnCheck Is called when the "Limited" checkbox is unchecked. | ||
| * @returns The created element. | ||
| */ | ||
| static make( | ||
| host: UserScript, | ||
| name: string, | ||
| option: SettingLimited, | ||
| label: string, | ||
| delimiter = false, | ||
| upgradeIndicator = false, | ||
| handler: { | ||
| onCheck?: () => void; | ||
| onUnCheck?: () => void; | ||
| onLimitedCheck?: () => void; | ||
| onLimitedUnCheck?: () => void; | ||
| } = {} | ||
| ): JQuery<HTMLElement> { | ||
| const element = SettingUi.make(host, name, option, label, delimiter, upgradeIndicator, handler); | ||
|
|
||
| const labelElement = $("<label/>", { | ||
| for: `toggle-limited-${name}`, | ||
| text: host.i18n("ui.limit"), | ||
| }); | ||
|
|
||
| const input = $("<input/>", { | ||
| id: `toggle-limited-${name}`, | ||
| type: "checkbox", | ||
| }).data("option", option); | ||
| option.$limited = input; | ||
|
|
||
| input.on("change", () => { | ||
| if (input.is(":checked") && option.limited === false) { | ||
| if (handler.onLimitedCheck) { | ||
| handler.onLimitedCheck(); | ||
| return; | ||
| } | ||
|
|
||
| host.updateOptions(() => (option.limited = true)); | ||
| clog("Unlogged action item"); | ||
| } else if (!input.is(":checked") && option.limited === true) { | ||
| if (handler.onLimitedUnCheck) { | ||
| handler.onLimitedUnCheck(); | ||
| return; | ||
| } | ||
|
|
||
| host.updateOptions(() => (option.limited = false)); | ||
| clog("Unlogged action item"); | ||
| } | ||
| }); | ||
|
|
||
| element.append(input, labelElement); | ||
|
|
||
| return element; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { SettingMax } from "../options/Settings"; | ||
| import { UserScript } from "../UserScript"; | ||
| import { SettingsSectionUi } from "./SettingsSectionUi"; | ||
| import { SettingUi } from "./SettingUi"; | ||
|
|
||
| export class SettingMaxUi { | ||
| /** | ||
| * Create a UI element for an option that can have a maximum. | ||
| * This will result in an element with a labeled checkbox and a "Max" indicator, | ||
| * which controls the respective `max` property in the option model. | ||
| * | ||
| * @param host The userscript instance. | ||
| * @param name A unique name for this option. | ||
| * @param option The option model. | ||
| * @param label The label for the option. | ||
| * @param delimiter Should a delimiter be rendered after this element? | ||
| * @param upgradeIndicator Should an indicator be rendered in front of the elemnt, | ||
| * to indicate that this is an upgrade of a prior option? | ||
| * @param handler Handlers to call when the option is checked or unchecked. | ||
| * @param handler.onCheck Is called when the option is checked. | ||
| * @param handler.onUnCheck Is called when the option is unchecked. | ||
| * @returns The created element. | ||
| */ | ||
| static make( | ||
| host: UserScript, | ||
| name: string, | ||
| option: SettingMax, | ||
| label: string, | ||
| delimiter = false, | ||
| upgradeIndicator = false, | ||
| handler: { | ||
| onCheck?: () => void; | ||
| onUnCheck?: () => void; | ||
| } = {} | ||
| ): JQuery<HTMLElement> { | ||
| const element = SettingUi.make(host, name, option, label, delimiter, upgradeIndicator, handler); | ||
|
|
||
| const maxButton = $("<div/>", { | ||
| id: `set-${name}-max`, | ||
| css: { | ||
| cursor: "pointer", | ||
| display: "inline-block", | ||
| float: "right", | ||
| paddingRight: "5px", | ||
| }, | ||
| }).data("option", option); | ||
| option.$max = maxButton; | ||
|
|
||
| maxButton.on("click", () => { | ||
| const value = SettingsSectionUi.promptLimit( | ||
| host.i18n("ui.max.set", [label]), | ||
| option.max.toString() | ||
| ); | ||
|
|
||
| if (value !== null) { | ||
| const limit = SettingsSectionUi.renderLimit(value, host); | ||
| host.updateOptions(() => (option.max = value)); | ||
| maxButton[0].title = limit; | ||
| maxButton[0].innerText = host.i18n("ui.max", [limit]); | ||
| } | ||
| }); | ||
|
|
||
| element.append(maxButton); | ||
|
|
||
| return element; | ||
| } | ||
| } |
Oops, something went wrong.