Fix modals

messages/uniworx/de.msg

@@ -702,3 +702,5 @@ DBTIRowsMissing n@Int: #{pluralDE n "Eine Zeile ist" "Einige Zeile sind"} aus de
 
 MassInputAddDimension: Hinzufügen
 MassInputDeleteCell: Entfernen
+
+NavigationFavourites: Favoriten

src/Foundation.hs

@@ -62,7 +62,6 @@ import Control.Monad.Memo (MemoT, startEvalMemoT, MonadMemo(..))
 import qualified Control.Monad.Catch as C
 
 import Handler.Utils.StudyFeatures
-import Handler.Utils.Templates
 import Utils.Lens
 import Utils.Form
 import Utils.Sheet
@@ -1007,8 +1006,8 @@ siteLayout' headingOverride widget = do
 
   let highlight :: Route UniWorX -> Bool -- highlight last route in breadcrumbs, favorites taking priority
       highlight = let crumbs = mcons mcurrentRoute $ fst <$> reverse parents
-                      navItems = map snd3 favourites ++ map (urlRoute . menuItemRoute . view _1) menuTypes
+                      navItems = map (view _2) favourites ++ map (urlRoute . menuItemRoute . view _1) menuTypes
-                      highR  = find (`elem` navItems) . uncurry (++) $ partition (`elem` map snd3 favourites) crumbs
+                      highR  = find (`elem` navItems) . uncurry (++) $ partition (`elem` map (view _2) favourites) crumbs
                   in \r -> Just r == highR
       favouriteTerms :: [TermIdentifier]
       favouriteTerms = Set.toDescList $ foldMap (\(Course{..}, _, _) -> Set.singleton $ unTermKey courseTerm) favourites
@@ -1021,6 +1020,17 @@ siteLayout' headingOverride widget = do
       -- value passed to hamletToRepHtml cannot be a widget, this allows
       -- you to use normal widget features in default-layout.
 
+      navbarModal (MenuItem{..}, menuIdent') = customModal Modal
+        { modalTriggerId = Just menuIdent'
+        , modalId = Nothing
+        , modalTrigger = \(Just route) menuIdent -> $(widgetFile "widgets/navbar/item")
+        , modalContent = Left menuItemRoute
+        }
+
+      navbarItem (MenuItem{..}, menuIdent) = do
+        route <- toTextUrl menuItemRoute
+        $(widgetFile "widgets/navbar/item")
+
       navbar :: Widget
       navbar = $(widgetFile "widgets/navbar/navbar")
       asidenav :: Widget

src/Handler/Utils.hs

@@ -24,7 +24,6 @@ import Handler.Utils.Zip        as Handler.Utils
 import Handler.Utils.Rating     as Handler.Utils hiding (extractRatings)
 -- import Handler.Utils.Submission as Handler.Utils
 import Handler.Utils.Sheet      as Handler.Utils
-import Handler.Utils.Templates  as Handler.Utils
 import Handler.Utils.Mail       as Handler.Utils
 
 
@@ -139,4 +138,4 @@ warnTermDays tid times = do
 i18nWidgetFile :: FilePath -> Q Exp
 i18nWidgetFile =
   -- TODO write code to distinguish languages here
-  widgetFile . (</> "de")
+  widgetFile . (</> "de")

src/Handler/Utils/Templates.hs

@@ -1,30 +0,0 @@
-module Handler.Utils.Templates where
-
-import Data.Either (isLeft)
-
-import Import.NoFoundation
-
-
--- | Create a link to a modal
-modal :: WidgetT site IO () -- ^ Widget that represents the link
-      -> Either (SomeRoute site) (WidgetT site IO ()) -- ^ Modal contant: either dynamic link or static widget
-      -> WidgetT site IO () -- ^ result widget
-modal modalTrigger modalContent = do
-  let modalDynamic = isLeft modalContent
-  modalId <- newIdent
-  triggerId <- newIdent
-  $(widgetFile "widgets/modal/modal")
-  case modalContent of
-    Left  route -> do
-      route' <- toTextUrl route
-      [whamlet|
-        $newline never
-        <a .modal__trigger href=#{route'} ##{triggerId}>
-          <span .modal__trigger-label>^{modalTrigger}
-      |]
-    Right _     ->
-      [whamlet|
-        $newline never
-        <div .modal__trigger ##{triggerId}>
-          <span .modal__trigger-label>^{modalTrigger}
-      |]

src/Import/NoFoundation.hs

@@ -15,6 +15,7 @@ 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 Yesod.Core.Json        as Import (provideJson)
 import Yesod.Core.Types.Instances as Import ()
 

src/Utils/Modal.hs

@@ -0,0 +1,42 @@
+module Utils.Modal
+  ( Modal(..)
+  , customModal
+  , modal
+  ) where
+
+import ClassyPrelude.Yesod
+
+import Control.Lens
+import Control.Lens.Extras (is)
+import Utils.Route
+
+import Settings (widgetFile)
+
+
+data Modal site = Modal
+  { modalTriggerId
+  , modalId :: Maybe Text
+  , modalTrigger :: Maybe Text {- Dynamic URL -} -> Text {- TriggerId -} -> WidgetT site IO ()
+  , modalContent :: Either (SomeRoute site) (WidgetT site IO ())
+  }
+
+customModal :: Modal site -> WidgetT site IO ()
+customModal Modal{..} = do
+  let isDynamic = is _Left modalContent
+  modalId' <- maybe newIdent return modalId
+  triggerId' <- maybe newIdent return modalTriggerId
+
+  $(widgetFile "widgets/modal/modal")
+
+  route <- for (modalContent ^? _Left) toTextUrl
+  modalTrigger route triggerId'
+
+-- | Create a link to a modal
+modal :: WidgetT site IO () -- ^ Widget that represents the link
+      -> Either (SomeRoute site) (WidgetT site IO ()) -- ^ Modal contant: either dynamic link or static widget
+      -> WidgetT site IO () -- ^ result widget
+modal modalTrigger' modalContent = customModal Modal{..}
+  where
+    modalTriggerId = Nothing
+    modalId = Nothing
+    modalTrigger mRoute triggerId = $(widgetFile "widgets/modal/trigger")

src/index.md

@@ -86,7 +86,7 @@ Handler.Utils.Table.Pagination.Types
 Handler.Utils.Table.Cells
   : extends dbTable with UniWorX specific functions, such as special courseCell
 
-Handler.Utils.Templates
+Utils.Modal
   : Modals
 
 Handler.Utils.Zip

templates/default-layout.lucius

@@ -532,13 +532,13 @@ section {
     border-bottom: 1px solid #d3d3d3;
 
     + section {
-      margin-top: 20px;
+        margin-top: 20px;
-      padding-top: 20px;
+        padding-top: 20px;
     }
+}
 
-    section {
+section:last-of-type {
-      border-bottom: none;
+    border-bottom: none;
-    }
 }
 
 .pseudonym {

templates/widgets/modal/modal.hamlet

@@ -1,4 +1,5 @@
-<div .modal.js-modal #modal-#{modalId} data-trigger=#{triggerId} data-closeable :modalDynamic:data-dynamic>
+$newline never
+<div .modal.js-modal #modal-#{modalId'} data-trigger=#{triggerId'} data-closeable :isDynamic:data-dynamic>
   $case modalContent
     $of Right content
       <div .modal__content>

templates/widgets/modal/modal.julius

@@ -1,9 +1,5 @@
 document.addEventListener('DOMContentLoaded', function() {
-  var modalIdent = #{String modalId};
+  if (modal = document.querySelector('#modal-' + #{String modalId'})) {
-  var selector = '#modal-' + modalIdent;
-  var modal = document.querySelector(selector);
-
-  if (modal) {
     window.utils.setup('modal', modal);
   }
 });

templates/widgets/modal/trigger.hamlet

@@ -0,0 +1,7 @@
+$newline never
+$maybe route <- mRoute
+  <a .modal__trigger href=#{route} ##{triggerId}>
+    <span .modal__trigger-label>^{modalTrigger'}
+$nothing
+  <div .modal__trigger ##{triggerId}>
+    <span .modal__trigger-label>^{modalTrigger'}

templates/widgets/navbar/item.hamlet

@@ -0,0 +1,3 @@
+<a .navbar__link-wrapper href=#{route} ##{menuIdent}>
+  <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
+  <div .navbar__link-label>_{SomeMessage menuItemLabel}

templates/widgets/navbar/navbar.hamlet

@@ -8,34 +8,31 @@ $newline never
       <li .navbar__list-item.navbar__list-item--favorite>
         <a .navbar__link-wrapper href="#">
           <i .fas.fa-star>
-          <div .navbar__link-label> Favorites
+          <div .navbar__link-label>_{MsgNavigationFavourites}
 
-      $forall (MenuItem{menuItemType, menuItemRoute, menuItemIcon, menuItemLabel, menuItemModal}, menuIdent, route) <- menuTypes
+      $forall (menuItem@MenuItem{menuItemType, menuItemRoute, menuItemModal}, menuIdent, _) <- menuTypes
         $case menuItemType
           $of NavbarAside
             <li .navbar__list-item :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
               $if menuItemModal
-                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
+                ^{navbarModal (menuItem, menuIdent)}
-              <a .navbar__link-wrapper href=#{route} ##{menuIdent}>
+              $else
-                <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
+                ^{navbarItem (menuItem, menuIdent)}
-                <div .navbar__link-label>_{SomeMessage menuItemLabel}
           $of _
 
     <ul .navbar__list.list--inline>
-      $forall (MenuItem{menuItemType, menuItemRoute, menuItemIcon, menuItemLabel, menuItemModal}, menuIdent, route) <- menuTypes
+      $forall (menuItem@MenuItem{menuItemType, menuItemRoute, menuItemModal}, menuIdent, _) <- menuTypes
         $case menuItemType
           $of NavbarRight
             <li .navbar__list-item :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
               $if menuItemModal
-                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
+                ^{navbarModal (menuItem, menuIdent)}
-              <a .navbar__link-wrapper href=#{route} ##{menuIdent}>
+              $else
-                <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
+                ^{navbarItem (menuItem, menuIdent)}
-                <div .navbar__link-label>_{SomeMessage menuItemLabel}
           $of NavbarSecondary
             <li .navbar__list-item :highlight (urlRoute menuItemRoute):.navbar__list-item--active>
               $if menuItemModal
-                <div .modal.js-modal #modal-#{menuIdent} data-trigger=#{menuIdent} data-closeable data-dynamic>
+                ^{navbarModal (menuItem, menuIdent)}
-              <a .navbar__link-wrapper href=#{route} ##{menuIdent}>
+              $else
-                <i .fas.fa-#{fromMaybe "none" menuItemIcon}>
+                ^{navbarItem (menuItem, menuIdent)}
-                <div .navbar__link-label>_{SomeMessage menuItemLabel}
           $of _