Refactor to use current style recommendations.

rtfeldman · Jul 15, 2015 · 400ea83 · 400ea83
1 parent cb7d401
commit 400ea83
Show file tree

Hide file tree

Showing 8 changed files with 1,128 additions and 624 deletions.
diff --git a/App.elm b/App.elm
diff --git a/Component/Editor.elm b/Component/Editor.elm
@@ -12,120 +12,241 @@ import List exposing (..)
 import Signal exposing (Address, mailbox)
 import Json.Encode exposing (string)
 
-type alias Addresses a = { a |
-  fullscreen  : Address FullscreenState,
-  remoteSync  : Address (),
-  execCommand : Address String
-}
 
-type alias Model = {
-  currentDoc : Doc,
-  fullscreen : FullscreenState
-}
+type alias Addresses a =
+    { a |
+        fullscreen : Address FullscreenState,
+        remoteSync : Address (),
+        execCommand : Address String
+    }
+
+
+type alias Model =
+    {
+        currentDoc : Doc,
+        fullscreen : FullscreenState
+    }
+
 
 initialModel : Model
-initialModel = {
-    currentDoc = emptyDoc,
-    fullscreen = False
-  }
+initialModel =
+    {
+        currentDoc = emptyDoc,
+        fullscreen = False
+    }
+
 
 view : Addresses a -> Model -> Html
 view channels model =
-  lazy3 viewEditor channels model.currentDoc model.fullscreen
+    lazy3 viewEditor channels model.currentDoc model.fullscreen
+
 
 viewEditor : Addresses a -> Doc -> FullscreenState -> Html
 viewEditor channels currentDoc fullscreen =
-  div [id "editor-container"] [
-    div [id "editor-frame"] [
-      div [id "editor-header"] [
-        div [class "toolbar-section toolbar-button flaticon-zoom19"] [],
-        div [class "toolbar-section"] [
-          viewFontControl channels.execCommand "toggle-bold" "B" "bold",
-          viewFontControl channels.execCommand "toggle-italics" "I" "italic",
-          viewFontControl channels.execCommand "toggle-strikethrough" "\xA0S\xA0" "strikethrough"
-        ],
-        lazy2 viewFullscreenButton channels.fullscreen fullscreen
-      ],
-
-      div [id "document-page"] <| [
-        h1  [id "edit-title"      ] [],
-        div [id "edit-description"] []
-      ] ++ concatMap (lazyViewChapter << .id) currentDoc.chapters,
-
-      div [id "editor-footer"] [
-        let wordCount = currentDoc.titleWords + currentDoc.descriptionWords +
-          (sum <| map (\chap -> chap.headingWords + chap.bodyWords) currentDoc.chapters)
-        in
-          div [id "doc-word-count"] [text <| (pluralize "word" wordCount) ++ " saved"],
-        div [id "dropbox-sync"] [
-          input [
-            id "toggle-dropbox-sync",
-            property "type" (string "checkbox"),
-            onClick channels.remoteSync ()
-          ] [],
-          label [for "toggle-dropbox-sync"] [
-            text " sync to Dropbox"
-          ]
+    div
+        [ id "editor-container" ]
+        [
+            div
+                [ id "editor-frame" ]
+                [
+                    viewEditorHeader channels currentDoc fullscreen,
+                    viewOutline channels currentDoc fullscreen,
+                    viewEditorFooter channels currentDoc fullscreen
+                ]
         ]
-      ]
-    ]
-  ]
+
+
+viewEditorHeader : Addresses a -> Doc -> FullscreenState -> Html
+viewEditorHeader channels currentDoc fullscreen =
+    div
+        [ id "editor-header" ]
+        [
+            div [ class "toolbar-section toolbar-button flaticon-zoom19" ] [],
+
+            div
+                [ class "toolbar-section" ]
+                [
+                    viewFontControl
+                        channels.execCommand
+                        "toggle-bold"
+                        "B"
+                        "bold"
+                    ,
+
+                    viewFontControl
+                        channels.execCommand
+                        "toggle-italics"
+                        "I"
+                        "italic"
+                    ,
+
+                    viewFontControl
+                        channels.execCommand
+                        "toggle-strikethrough"
+                        "\xA0S\xA0"
+                        "strikethrough"
+                ]
+            ,
+
+            lazy2 viewFullscreenButton channels.fullscreen fullscreen
+        ]
+
+
+viewEditorFooter : Addresses a -> Doc -> FullscreenState -> Html
+viewEditorFooter channels currentDoc fullscreen =
+    let
+        countChapterWords chapter =
+            chapter.headingWords + chapter.bodyWords
+
+        chapterWords =
+            currentDoc.chapters
+                |> List.map countChapterWords
+                |> List.sum
+
+        wordCount =
+            currentDoc.titleWords +
+            currentDoc.descriptionWords +
+            chapterWords
+
+        wordCountLabel =
+            (pluralize "word" wordCount) ++ " saved"
+    in
+        div 
+            [ id "editor-footer" ]
+            [
+                div [ id "doc-word-count" ] [ text wordCountLabel ],
+
+                div
+                    [ id "dropbox-sync" ]
+                    [
+                        input
+                            [
+                                id "toggle-dropbox-sync",
+                                property "type" (string "checkbox"),
+                                onClick channels.remoteSync ()
+                            ]
+                            []
+                        ,
+
+                        label
+                            [ for "toggle-dropbox-sync" ]
+                            [ text " sync to Dropbox" ]
+                    ]
+            ]
+
+
+viewOutline : Addresses a -> Doc -> FullscreenState -> Html
+viewOutline channels currentDoc fullscreen =
+    let
+        outlineHeadingNodes =
+            [
+                h1 [ id "edit-title" ] [],
+                div [ id "edit-description" ] []
+            ]
+
+        outlineChapterNodes =
+            List.concatMap
+                (.id >> lazyViewChapter)
+                currentDoc.chapters
+    in
+        div
+            [ id "document-page" ]
+            (outlineHeadingNodes ++ outlineChapterNodes)
+
 
 withCommas : Int -> String
 withCommas num =
-  if num >= 1000
-    then
-      let prefix = withCommas <| floor (num / 1000)
-      in
-        prefix ++ "," ++ (String.right 3 <| toString num)
+    if num >= 1000 then
+        let
+            prefix = 
+                (num / 1000)
+                    |> floor
+                    |> withCommas
+
+            suffix =
+                num
+                    |> toString
+                    |> String.right 3
+
+        in
+            prefix ++ "," ++ suffix
     else
-      toString num
+        toString num
+
 
 pluralize : String -> Int -> String
 pluralize noun quantity =
-  if quantity == 1
-    then "1 " ++ noun
-    else (withCommas quantity) ++ " " ++ noun ++ "s"
+    if quantity == 1 then
+        "1 " ++ noun
+    else
+        (withCommas quantity) ++ " " ++ noun ++ "s"
+
 
 viewFullscreenButton : Address FullscreenState -> FullscreenState -> Html
 viewFullscreenButton fullscreenChannel fullscreen =
-  let {fullscreenClass, targetMode, fullscreenTitle} = case fullscreen of
-    True ->
-      { fullscreenClass = "flaticon-collapsing"
-      , targetMode      = False
-      , fullscreenTitle = "Leave Fullscreen Mode"
-      }
-    False ->
-      { fullscreenClass = "flaticon-expand"
-      , targetMode      = True
-      , fullscreenTitle = "Enter Fullscreen Mode"
-      }
-  in
-    div [class ("toolbar-section toolbar-button " ++ fullscreenClass),
-      title fullscreenTitle,
-      onClick fullscreenChannel targetMode
-    ] []
+    let
+        {fullscreenClass, targetMode, fullscreenTitle} =
+            case fullscreen of
+                True ->
+                    {
+                        fullscreenClass = "flaticon-collapsing",
+                        targetMode = False,
+                        fullscreenTitle = "Leave Fullscreen Mode"
+                    }
+
+                False ->
+                    {
+                        fullscreenClass = "flaticon-expand",
+                        targetMode = True,
+                        fullscreenTitle = "Enter Fullscreen Mode"
+                    }
+    in
+        div
+            [
+                class ("toolbar-section toolbar-button " ++ fullscreenClass),
+                title fullscreenTitle,
+                onClick fullscreenChannel targetMode
+            ]
+            []
+
 
 lazyViewChapter : Identifier -> List Html
-lazyViewChapter chapterId = [
-    lazy viewChapterHeading chapterId,
-    lazy viewChapterBody    chapterId
-  ]
+lazyViewChapter chapterId =
+    [
+        lazy viewChapterHeading chapterId,
+        lazy viewChapterBody chapterId
+    ]
+
 
 viewChapterBody : Identifier -> Html
 viewChapterBody chapterId =
-  div [key ("chapter-body-" ++ chapterId),
-    id ("edit-chapter-body-" ++ chapterId),
-    class "chapter-body"] []
+    div
+        [
+            key ("chapter-body-" ++ chapterId),
+            id ("edit-chapter-body-" ++ chapterId),
+            class "chapter-body"
+        ]
+        []
+
 
 viewChapterHeading : Identifier -> Html
 viewChapterHeading chapterId =
-  h2 [key ("chapter-heading-" ++ chapterId),
-    id ("edit-chapter-heading-" ++ chapterId),
-    class "chapter-heading"] []
+    h2
+        [
+            key ("chapter-heading-" ++ chapterId),
+            id ("edit-chapter-heading-" ++ chapterId),
+            class "chapter-heading"
+        ]
+        []
+
 
 viewFontControl : Address String -> String -> String -> String -> Html
 viewFontControl execCommandChannel idAttr label command =
-  span [class "font-control toolbar-button toolbar-font-button", id idAttr,
-    (property "unselectable" (string "on")),
-    onClick execCommandChannel command] [text label]
+    span
+        [
+            class "font-control toolbar-button toolbar-font-button",
+            id idAttr,
+            (property "unselectable" (string "on")),
+            onClick execCommandChannel command
+        ]
+        [ text label ]