Themes.purs 2.71 KB
Newer Older
1 2 3
module Gargantext.Components.Themes where

import Data.Array as A
4 5
import Data.Generic.Rep (class Generic)
import Data.Generic.Rep.Eq (genericEq)
6 7 8 9 10
import Data.Maybe (Maybe(..))
import Effect (Effect)
import FFI.Simple ((.=))
import Reactix as R
import Reactix.DOM.HTML as H
11
import Toestand as T
12 13 14 15

import Gargantext.Prelude
import Gargantext.Utils.Reactix as R2

16 17
here :: R2.Here
here = R2.here "Gargantext.Components.Themes"
18 19 20 21

stylesheetElId :: String
stylesheetElId = "bootstrap-css"

22 23 24 25 26
newtype Theme = Theme { location :: String
                      , name :: String }
derive instance genericTheme :: Generic Theme _
instance genericEq :: Eq Theme where
  eq = genericEq
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

themeName :: Theme -> String
themeName (Theme { name }) = name

defaultTheme :: Theme
defaultTheme = Theme { name: "default"
                     , location: "styles/bootstrap-default.css" }

greysonTheme :: Theme
greysonTheme = Theme { name: "greyson"
                     , location: "styles/bootstrap-greyson.css" }

monotonyTheme :: Theme
monotonyTheme = Theme { name: "monotony"
                      , location: "styles/bootstrap-monotony.css" }

43 44 45 46 47 48 49 50
herbieTheme :: Theme
herbieTheme = Theme { name: "herbie"
                      , location: "styles/bootstrap-herbie.css" }

darksterTheme :: Theme
darksterTheme = Theme { name: "darkster (bêta)"
                      , location: "styles/bootstrap-darkster.css" }

51
allThemes :: Array Theme
52
allThemes = [ defaultTheme, greysonTheme, monotonyTheme, herbieTheme, darksterTheme]
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

switchTheme :: Theme -> Effect Unit
switchTheme (Theme { location }) = do
  mEl <- R2.getElementById stylesheetElId
  case mEl of
    Nothing -> pure unit
    Just el -> do
      _ <- pure $ (el .= "href") location
      pure unit

type ThemeSwitcherProps = (
    theme  :: Theme
  , themes :: Array Theme
  )

themeSwitcher :: R2.Component ThemeSwitcherProps
themeSwitcher = R.createElement themeSwitcherCpt

themeSwitcherCpt :: R.Component ThemeSwitcherProps
72
themeSwitcherCpt = here.component "themeSwitcher" cpt
73 74
  where
    cpt { theme, themes } _ = do
75 76
      currentTheme <- T.useBox theme
      currentTheme' <- T.useLive T.unequal currentTheme
77 78 79 80 81

      let option (Theme { name }) = H.option { value: name } [ H.text name ]
      let options = map option themes

      pure $ R2.select { className: "form-control"
82
                       , defaultValue: themeName currentTheme'
83 84
                       , on: { change: onChange currentTheme } } options
      where
85
        onChange currentTheme e = do
86 87 88 89 90 91 92
          let value = R.unsafeEventValue e
          let mTheme = A.head $ A.filter (\(Theme { name }) -> value == name) themes

          case mTheme of
            Nothing -> pure unit
            Just t  -> do
              switchTheme t
93
              T.write_ t currentTheme