diff --git a/app/javascript/packs/application.ts b/app/javascript/packs/application.ts index b6a16cf7..8236bff5 100644 --- a/app/javascript/packs/application.ts +++ b/app/javascript/packs/application.ts @@ -12,6 +12,7 @@ import initQuestion from 'retrospring/features/question'; import initModeration from 'retrospring/features/moderation'; import initMemes from 'retrospring/features/memes'; import initLocales from 'retrospring/features/locales'; +import initFront from 'retrospring/features/front'; start(); document.addEventListener('DOMContentLoaded', initAnswerbox); @@ -24,4 +25,5 @@ document.addEventListener('DOMContentLoaded', initQuestion); document.addEventListener('DOMContentLoaded', initModeration); document.addEventListener('DOMContentLoaded', initMemes); document.addEventListener('turbolinks:load', initAnnouncements); -document.addEventListener('turbolinks:load', initLocales); \ No newline at end of file +document.addEventListener('turbolinks:load', initLocales); +document.addEventListener('turbolinks:load', initFront); \ No newline at end of file diff --git a/app/javascript/retrospring/features/front/index.ts b/app/javascript/retrospring/features/front/index.ts new file mode 100644 index 00000000..0ceca8d9 --- /dev/null +++ b/app/javascript/retrospring/features/front/index.ts @@ -0,0 +1,8 @@ +import registerEvents from 'retrospring/utilities/registerEvents'; +import { themeButtonHandler } from './theme'; + +export default (): void => { + registerEvents([ + { type: 'click', target: document.querySelectorAll('.js-theme-button'), handler: themeButtonHandler } + ]); +} \ No newline at end of file diff --git a/app/javascript/retrospring/features/front/theme.ts b/app/javascript/retrospring/features/front/theme.ts new file mode 100644 index 00000000..cd085355 --- /dev/null +++ b/app/javascript/retrospring/features/front/theme.ts @@ -0,0 +1,14 @@ +export function themeButtonHandler(event: Event): void { + const button = event.currentTarget as HTMLButtonElement; + event.preventDefault(); + + const theme = button.dataset.theme; + + document.body.setAttribute('class', 'not-logged-in'); + + if (theme === 'reset') return; + + if (!document.body.classList.contains(theme)) { + document.body.classList.add(theme); + } +} \ No newline at end of file