-
Notifications
You must be signed in to change notification settings - Fork 245
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Handle switching theme, store selecte theme in cookies
- Loading branch information
Showing
17 changed files
with
583 additions
and
8 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
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
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,86 @@ | ||
| /** | ||
| * @description handles the logic of tooltip visible on the right side of the interface | ||
| */ | ||
| import JsCookie from "../../libs/js-cookie/JsCookie"; | ||
|
|
||
| export default class JsSettingsTooltip { | ||
|
|
||
| private static readonly SETTINGS_COG_SELECTOR = ".js-settings-toggle"; | ||
| private static readonly SETTINGS_PANEL_SELECTOR = ".settings-panel"; | ||
| private static readonly SETTINGS_CLOSE_PANEL_SELECTOR = ".js-settings-close"; | ||
|
|
||
| private static readonly SETTINGS_THEME_COLOR_INPUT_SELECTOR = "input.theme-color"; | ||
| private static readonly BODY_DATA_ATTRIBUTE_THEME = "data-theme"; | ||
|
|
||
| /** | ||
| * @description will initialize the main logic | ||
| */ | ||
| public init(): void | ||
| { | ||
| this.attachShowingTooltipToCogsIcon(); | ||
| this.handleClosingSettingsPanel(); | ||
| this.handleThemeSelect(); | ||
| } | ||
|
|
||
| /** | ||
| * @description will set the theme from cookie saved value | ||
| */ | ||
| public setThemeFromCookie(): void | ||
| { | ||
| if( JsCookie.isJsSettingsSelectedTheme() ){ | ||
| this.setTheme(JsCookie.getJsSettingsSelectedTheme()); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * @description will attach the events/logic for showing the panel upon clicking on the cogs icon | ||
| */ | ||
| private attachShowingTooltipToCogsIcon(): void | ||
| { | ||
| $(JsSettingsTooltip.SETTINGS_COG_SELECTOR).on('click', () => { | ||
| $(JsSettingsTooltip.SETTINGS_PANEL_SELECTOR).addClass('settings-panel-shown'); | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * @description attaches the logic responsible to hiding back the js settings panel | ||
| */ | ||
| private handleClosingSettingsPanel(): void | ||
| { | ||
| $(JsSettingsTooltip.SETTINGS_CLOSE_PANEL_SELECTOR).on('click', () => { | ||
| $(JsSettingsTooltip.SETTINGS_PANEL_SELECTOR).removeClass('settings-panel-shown'); | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * @description will handle selecting theme | ||
| * - based on user click, | ||
| * - based on what's already stored in cookies, | ||
| */ | ||
| private handleThemeSelect(): void | ||
| { | ||
| $(JsSettingsTooltip.SETTINGS_THEME_COLOR_INPUT_SELECTOR).on('click', (event) => { | ||
| //@ts-ignore | ||
| let selectedTheme = event.target.value; | ||
| this.setTheme(selectedTheme); | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * @description will set given theme | ||
| */ | ||
| private setTheme(themeName: string): void | ||
| { | ||
| $(JsSettingsTooltip.SETTINGS_THEME_COLOR_INPUT_SELECTOR).removeAttr('checked'); | ||
| $(JsSettingsTooltip.SETTINGS_THEME_COLOR_INPUT_SELECTOR).prop("checked", false); | ||
|
|
||
| $("body").attr(JsSettingsTooltip.BODY_DATA_ATTRIBUTE_THEME, themeName); | ||
| JsCookie.setJsSettingsSelectedTheme(themeName); | ||
|
|
||
| $(`${JsSettingsTooltip.SETTINGS_THEME_COLOR_INPUT_SELECTOR}[value="${themeName}"]`) | ||
| .attr("checked", "checked") | ||
| .prop("checked", true); | ||
| } | ||
|
|
||
|
|
||
| } |
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
Oops, something went wrong.