Introduce Utils.Frontend.I18n

messages/frontend/de.msg

@@ -0,0 +1,4 @@
+FilesSelected: Dateien ausgewählt
+SelectFile: Datei auswählen
+SelectFiles: Datei(en) auswählen
+AsyncFormFailure: Da ist etwas schief gelaufen, das tut uns Leid. Falls das erneut passiert schicke uns gerne eine kurze Beschreibung dieses Ereignisses über das Hilfe-Widget rechts oben. Vielen Dank für deine Hilfe!

src/Foundation.hs

@@ -187,6 +187,7 @@ mkMessageVariant "UniWorX" "Campus" "messages/campus" "de"
 mkMessageVariant "UniWorX" "Dummy" "messages/dummy" "de"
 mkMessageVariant "UniWorX" "PWHash" "messages/pw-hash" "de"
 mkMessageVariant "UniWorX" "Button" "messages/button" "de"
+mkMessageVariant "UniWorX" "Frontend" "messages/frontend" "de"
 
 -- This instance is required to use forms. You can modify renderMessage to
 -- achieve customized and internationalized form validation messages.
@@ -1053,6 +1054,11 @@ siteLayout' headingOverride widget = do
       hasSecondaryPageActions = any (is _PageActionSecondary) $ toListOf (traverse . _1 . _menuItemType) menuTypes
       hasPrimaryPageActions = any (is _PageActionPrime) $ toListOf (traverse . _1 . _menuItemType) menuTypes
 
+  MsgRenderer mr <- getMsgRenderer
+  let
+    -- See Utils.Frontend.I18n and files in messages/frontend for message definitions
+    frontendI18n = toJSON (mr :: FrontendMessage -> Text)
+
   pc <- widgetToPageContent $ do
       -- 3rd party
       addScript $ StaticR js_vendor_flatpickr_js

src/Import/NoFoundation.hs

@@ -15,7 +15,8 @@ import Yesod.Auth             as Import
 import Yesod.Core.Types       as Import (loggerSet)
 import Yesod.Default.Config2  as Import
 import Utils                  as Import
-import Utils.Modal            as Import
+import Utils.Frontend.Modal   as Import
+import Utils.Frontend.I18n    as Import
 import Yesod.Core.Json        as Import (provideJson)
 import Yesod.Core.Types.Instances as Import ()
 

src/Utils/Frontend/I18n.hs

@@ -0,0 +1,41 @@
+module Utils.Frontend.I18n
+  ( FrontendMessage(..)
+  ) where
+
+import ClassyPrelude
+import Data.Universe
+
+import Control.Lens
+import Utils.PathPiece
+
+import Web.PathPieces
+import Data.Aeson
+import Data.Aeson.Types (toJSONKeyText)
+import Data.Aeson.TH
+import qualified Data.Char as Char
+
+
+-- | I18n-Messages used in JavaScript-Frontend
+--
+-- Only nullary constructors are supported
+--
+-- @MsgCamelCaseIdentifier@ gets translated to @camelCaseIdentifier@ in Frontend (see `nullaryPathPiece` and `deriveJSON` below)
+data FrontendMessage = MsgFilesSelected
+                     | MsgSelectFile
+                     | MsgSelectFiles
+                     | MsgAsyncFormFailure
+  deriving (Eq, Ord, Enum, Bounded, Read, Show, Generic, Typeable)
+instance Universe FrontendMessage
+instance Finite FrontendMessage
+instance Hashable FrontendMessage
+
+nullaryPathPiece ''FrontendMessage $ over _head Char.toLower . mconcat . drop 1 . splitCamel
+
+deriveJSON defaultOptions
+  { constructorTagModifier = over _head Char.toLower . mconcat . drop 1 . splitCamel
+  } ''FrontendMessage
+
+instance ToJSONKey FrontendMessage where
+  toJSONKey = toJSONKeyText toPathPiece
+instance FromJSONKey FrontendMessage where
+  fromJSONKey = FromJSONKeyTextParser $ parseJSON . String

src/Utils/Frontend/Modal.hs

@@ -1,4 +1,4 @@
-module Utils.Modal
+module Utils.Frontend.Modal
   ( Modal(..)
   , customModal
   , modal

templates/default-layout.julius

@@ -36,12 +36,7 @@ function setupDatepicker(wrapper) {
 }
 
 if (I18n) {
-  I18n.addMany({
+  I18n.addMany(#{frontendI18n});
-    filesSelected: 'Dateien ausgewählt',
-    selectFile: 'Datei auswählen',
-    selectFiles: 'Datei(en) auswählen',
-    asyncFormFailure: 'Da ist etwas schief gelaufen, das tut uns Leid. Falls das erneut passiert schicke uns gerne eine kurze Beschreibung dieses Ereignisses über das Hilfe-Widget rechts oben. Vielen Dank für deine Hilfe!',
-  });
 } else {
   throw new Error('I18n JavaScript service is missing!');
 }