diff --git a/frontend/elm.json b/frontend/elm.json index f9efb79..98ed09c 100755 --- a/frontend/elm.json +++ b/frontend/elm.json @@ -14,6 +14,7 @@ "elm/json": "1.1.3", "elm/url": "1.0.0", "elm-community/list-extra": "8.7.0", + "elm-community/maybe-extra": "5.3.0", "mdgriffith/elm-ui": "1.1.8" }, "indirect": { diff --git a/frontend/src/Debate/Helpers.elm b/frontend/src/Debate/Helpers.elm index e55ab91..7912c2d 100755 --- a/frontend/src/Debate/Helpers.elm +++ b/frontend/src/Debate/Helpers.elm @@ -17,6 +17,7 @@ import Html.Attributes exposing (form, id) import Layouts import List.Extra exposing (..) import Maybe exposing (withDefault) +import Maybe.Extra exposing (isNothing) import Page exposing (Page) import Route exposing (Route) import Shared @@ -35,47 +36,57 @@ import View exposing (View) -- ) -argumentMaker : (Int -> msg) -> List Int -> Argument -> Int -> Element msg -argumentMaker onClickMsg argHeights argument indexExpand = - let - isArgumentExpanded : Int - isArgumentExpanded = - withDefault 0 <| getAt indexExpand argHeights - in +type alias ArgMakerInput msg = + { arg : Argument + , index : Int + , isExpanded : Bool + , maybeHeight : Maybe Int + , titleClickMsg : msg + } + + +argumentMaker : ArgMakerInput msg -> Element msg +argumentMaker argMakerInput = column - [ B.color colourTheme.cardBackground - , rounded 10 - , E.width <| px 700 - , E.htmlAttribute (id <| "arg" ++ String.fromInt indexExpand) - ] - [ titleMaker onClickMsg indexExpand argument.argumentTitle isArgumentExpanded + (if isNothing argMakerInput.maybeHeight then + [ E.htmlAttribute (id <| "arg" ++ String.fromInt argMakerInput.index) ] + + else + [] + ) + [ titleMaker argMakerInput , column - ([ E.width <| px 600, centerX, transitionStyle, spacing 10 ] - -- ++ (if not isArgumentExpanded then - -- [ transitionStyle - -- -- , height <| px 0 - -- , roundEach { topLeft = 0, topRight = 0, bottomRight = 10, bottomLeft = 10 } - -- , clip - -- ] - -- else - -- [ transitionStyle - -- , height <| px 300 - -- , clip - -- ] - -- ) + (case argMakerInput.maybeHeight of + Just h -> + [ B.color colourTheme.cardBackground + , clip + , transitionStyle + , height <| + px <| + if argMakerInput.isExpanded then + h + + else + 0 + ] + + Nothing -> + [ transparent True ] ) - [ propositionMaker argument isArgumentExpanded - , reductioMaker argument isArgumentExpanded - , summaryMaker argument isArgumentExpanded - , strengthMaker argument isArgumentExpanded - , tableMaker argument isArgumentExpanded - , proofTreeMaker argument isArgumentExpanded - ] + <| + List.map (\x -> x argMakerInput) + [ propositionMaker + , reductioMaker + , summaryMaker + , strengthMaker + , tableMaker + , proofTreeMaker + ] ] -titleMaker : (Int -> msg) -> Int -> String -> Int -> Element msg -titleMaker onClickMsg indexExpand title argHeight = +titleMaker : ArgMakerInput msg -> Element msg +titleMaker argMakerInput = paragraph (paragraphBoldFormat ++ [ F.size 20 @@ -93,21 +104,21 @@ titleMaker onClickMsg indexExpand title argHeight = , F.color colourTheme.nonHighlightedText , D.color colourTheme.highlightTextHover ] - , V.onClick <| onClickMsg indexExpand + , V.onClick <| argMakerInput.titleClickMsg ] - ++ (if argHeight == 30 then - [ rounded 10 ] + ++ (case argMakerInput.maybeHeight of + Nothing -> + [ transparent True ] - else - [ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ] + Just _ -> + [ roundEach { topLeft = 10, topRight = 10, bottomRight = 0, bottomLeft = 0 } ] ) ) - [ text title - ] + [ text argMakerInput.arg.argumentTitle ] -propositionMaker : Argument -> Int -> Element msg -propositionMaker argument argHeight = +propositionMaker : ArgMakerInput msg -> Element msg +propositionMaker argMakerInput = row [ paddingEach { top = 10, right = 0, bottom = 0, left = 0 } ] @@ -124,7 +135,7 @@ propositionMaker argument argHeight = , column [ E.width fill, E.alignLeft ] [ paragraph (paragraphBoldFormat ++ [ F.size 18 ]) - [ text argument.propositionTitle + [ text argMakerInput.arg.propositionTitle |> el [ F.color colourTheme.nonHighlightedText , F.regular @@ -135,9 +146,9 @@ propositionMaker argument argHeight = ] -reductioMaker : Argument -> Int -> Element msg -reductioMaker argument argHeight = - case argument.propositionReductio of +reductioMaker : ArgMakerInput msg -> Element msg +reductioMaker argMakerInput = + case argMakerInput.arg.propositionReductio of "" -> none @@ -156,8 +167,8 @@ reductioMaker argument argHeight = ] -summaryMaker : Argument -> Int -> Element msg -summaryMaker argument argHeight = +summaryMaker : ArgMakerInput msg -> Element msg +summaryMaker argMakerInput = row [] [ column [ E.alignTop, E.alignLeft ] @@ -173,7 +184,7 @@ summaryMaker argument argHeight = , spacing 3 ] ) - [ text argument.propositionSummary + [ text argMakerInput.arg.propositionSummary |> el [ F.color colourTheme.nonHighlightedText , F.regular @@ -184,8 +195,8 @@ summaryMaker argument argHeight = ] -strengthMaker : Argument -> Int -> Element msg -strengthMaker argument argHeight = +strengthMaker : ArgMakerInput msg -> Element msg +strengthMaker argMakerInput = let barMaker : Int -> Element msg barMaker num = @@ -254,12 +265,12 @@ strengthMaker argument argHeight = ] , column [ E.width fill, E.alignLeft, centerY ] - [ barMaker argument.argumentCertainty ] + [ barMaker argMakerInput.arg.argumentCertainty ] ] -tableMaker : Argument -> Int -> Element msg -tableMaker argument argHeight = +tableMaker : ArgMakerInput msg -> Element msg +tableMaker argMakerInput = let formalizationMaker : List (Element msg) formalizationMaker = @@ -300,7 +311,7 @@ tableMaker argument argHeight = ] ) ) - argument.argumentFormalization + argMakerInput.arg.argumentFormalization in column [ centerX, E.width <| px 600 ] [ wrappedRow (paragraphBoldFormat ++ [ E.alignLeft, E.width fill ]) @@ -311,7 +322,7 @@ tableMaker argument argHeight = , D.color colourTheme.nonHighlightedDarkText , clip ] - { data = argument.definitionTable + { data = argMakerInput.arg.definitionTable , columns = [ { header = el @@ -368,8 +379,8 @@ tableMaker argument argHeight = ] -proofTreeMaker : Argument -> Int -> Element msg -proofTreeMaker argument argHeight = +proofTreeMaker : ArgMakerInput msg -> Element msg +proofTreeMaker argMakerInput = row [ paddingEach { top = 10, right = 0, bottom = 10, left = 0 }, centerX, E.width fill ] [ column [ E.alignRight ] [ newTabLink @@ -391,7 +402,7 @@ proofTreeMaker argument argHeight = ] ] ) - { url = argument.proofLink + { url = argMakerInput.arg.proofLink , label = text "Proof Tree" } ] diff --git a/frontend/src/Pages/Arguments.elm b/frontend/src/Pages/Arguments.elm index f422c49..ea6e776 100755 --- a/frontend/src/Pages/Arguments.elm +++ b/frontend/src/Pages/Arguments.elm @@ -64,7 +64,7 @@ import Html.Attributes as H exposing (style, title, wrap) import Layouts import List.Extra as L exposing (..) import Page exposing (Page) -import Ports +import Ports exposing (gotArgHeight) import Route exposing (Route) import Shared import View exposing (View) @@ -91,12 +91,21 @@ toLayout model = type alias Model = - { argHeights : List Int } + { argExpansions : List Bool + , argHeights : List Int + } init : () -> ( Model, Effect Msg ) init () = - ( { argHeights = List.repeat (List.length argumentList) 30 } + let + numArgs : Int + numArgs = + List.length argumentList + in + ( { argExpansions = List.repeat numArgs False + , argHeights = List.repeat numArgs 0 + } , Effect.none ) @@ -106,30 +115,36 @@ init () = type Msg - = ToggleExpandArg Int + = GotArgHeight (List Int) + | ToggleExpandArg Int update : Msg -> Model -> ( Model, Effect Msg ) update msg model = - case msg of - ToggleExpandArg index -> - ( case getAt index model.argHeights of - Nothing -> - model + Debug.log (Debug.toString model.argHeights) <| + case msg of + GotArgHeight argHeights -> + ( { model | argHeights = argHeights }, Effect.none ) - Just elHeight -> - { model | argHeights = setAt index elHeight model.argHeights } - , Effect.sendCmd <| Ports.getArgHeight () - ) + ToggleExpandArg index -> + ( case getAt index model.argExpansions of + Nothing -> + model - - --- SUBSCRIPTIONS + Just isExpanded -> + { model + | argExpansions = + setAt index + (not isExpanded) + model.argExpansions + } + , Effect.sendCmd <| Ports.getArgHeight <| List.length model.argHeights + ) subscriptions : Model -> Sub Msg subscriptions model = - Sub.none + gotArgHeight GotArgHeight @@ -156,14 +171,39 @@ debateContainer shared model = debateList : Model -> Element Msg debateList model = - column - pageList + let + argColumn : Bool -> Element Msg + argColumn isHidden = + column + -- (explain Debug.todo :: + [ padding 30 + , spacing 10 + ] + <| + List.map argumentMaker <| + List.map4 + (\w x y z -> + { arg = w + , index = x + , isExpanded = y + , maybeHeight = + if isHidden then + Nothing + + else + z + , titleClickMsg = ToggleExpandArg x + } + ) + argumentList + (List.range 0 <| List.length model.argHeights) + model.argExpansions + (List.map Just model.argHeights) + in + el + [ behindContent <| argColumn True ] <| - List.map2 (argumentMaker ToggleExpandArg model.argHeights) - argumentList - <| - List.range 0 <| - List.length model.argHeights + argColumn False argumentList : List Argument diff --git a/frontend/src/Ports.elm b/frontend/src/Ports.elm index edb42b1..dd565e5 100644 --- a/frontend/src/Ports.elm +++ b/frontend/src/Ports.elm @@ -1,7 +1,7 @@ -port module Ports exposing (getArgHeight) +port module Ports exposing (getArgHeight, gotArgHeight) -port getArgHeight : () -> Cmd msg +port getArgHeight : Int -> Cmd msg -port gotArgHeight : (() -> msg) -> Sub msg +port gotArgHeight : (List Int -> msg) -> Sub msg diff --git a/frontend/src/interop.js b/frontend/src/interop.js index ba5864d..935b75a 100644 --- a/frontend/src/interop.js +++ b/frontend/src/interop.js @@ -3,10 +3,10 @@ // The value returned here will be passed as flags // into your `Shared.init` function. export const flags = ({ env }) => { - return { - height: window.innerHeight, - width: window.innerWidth - } + return { + height: window.innerHeight, + width: window.innerWidth + } } // This is called AFTER your Elm app starts up @@ -15,16 +15,20 @@ export const flags = ({ env }) => { // to your Elm application, or subscribe to incoming // messages from Elm export const onReady = ({ app, env }) => { - app.ports.getArgHeight.subscribe(() => { - - setTimeout(() => { - const element = document.getElementById('arg1'); + app.ports.getArgHeight.subscribe((numArgs) => { + const heights = []; - if (element) { - const height = element.offsetHeight; - console.log(`Height of the element: ${height}px`); - } else { - console.error('Element not found.'); - } - }, 0) - })} \ No newline at end of file + for (let i = 0; i < numArgs; i++) { + const element = document.getElementById(`arg${i}`); + + if (element) { + heights.push(element.offsetHeight); + } else { + console.error(`Element with ID 'arg${i}' not found.`); + heights.push(null); // Add null or any placeholder for missing elements + } + } + + app.ports.gotArgHeight.send(heights); + }); +}; diff --git a/parts/config/devshells.nix b/parts/config/devshells.nix index d192f84..3afd720 100755 --- a/parts/config/devshells.nix +++ b/parts/config/devshells.nix @@ -21,6 +21,13 @@ elm-review elm-test ; + + inherit + (pkgs.nodePackages) + "@commitlint/config-conventional" + npm + typescript-language-server + ; }; }; };