hack around elm's lack of support for custom css properties

Uses a port to set `--change-stage`.
harrysarson · Jun 2, 2018 · 50aa864 · 50aa864
1 parent 83e0e0b
commit 50aa864
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/elm-src/Config.elm b/elm-src/Config.elm
@@ -10,3 +10,4 @@ imageInputId = "file"
 
 nonPrimeImageNumberId : String
 nonPrimeImageNumberId = "nonPrimeImageNumberId"
+
diff --git a/elm-src/DisplayPanel.elm b/elm-src/DisplayPanel.elm
@@ -21,8 +21,6 @@ view props =
   div []
     [ div
       [ class "display-panel stage-selecting"
-      , style
-        [ ( "--show-stage", toString props.stage ) ]
       ]
       ( List.map
         ( div <|

diff --git a/elm-src/Ports.elm b/elm-src/Ports.elm
@@ -5,6 +5,7 @@ port module Ports exposing  ( fileSelected
                             , prettyPrintState
                             , setInitialValues
                             , resizeImageNumber
+                            , setCssProp
                             )
 import Types
 import ToNumberConfig.Types
@@ -29,3 +30,6 @@ port ppState : Types.Model -> Cmd msg
 port setInitialValues : ToNumberConfig.Types.Model -> Cmd msg
 
 port resizeImageNumber : String -> Cmd msg
+
+--                 selector prop    value
+port setCssProp : ( String, String, String ) -> Cmd msg
diff --git a/elm-src/State.elm b/elm-src/State.elm
@@ -6,7 +6,13 @@ import Task
 
 import Types
 import Config
-import Ports exposing (fileSelected, requestNonPrime, prettyPrintState, setInitialValues, resizeImageNumber)
+import Ports exposing ( fileSelected
+                      , requestNonPrime
+                      , prettyPrintState
+                      , setInitialValues
+                      , resizeImageNumber
+                      , setCssProp
+                      )
 
 import ToNumberConfig.Types
 import ToNumberConfig.State
@@ -25,6 +31,8 @@ initialState =
                 { contents = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                 , filename = "sample"
                 }
+        , Task.perform Types.ChangeStage <|
+            Task.succeed 0
         ]
     )
 
@@ -36,14 +44,17 @@ update msg model =
       Types.ChangeStage change ->
         let
           newStage = max 0 <| min Config.stageCount model.stage + change
-          cmd =
+          setIntialVal =
               if change /= 0 && newStage == 2 then
                   setInitialValues model.toNumberConfig
               else
                   Cmd.none
         in
           ( { model | stage = newStage }
-          , cmd
+          , Cmd.batch
+              [ setIntialVal
+              , setCssProp ( ".display-panel", "--show-stage", toString newStage )
+              ]
           )
       Types.ImageSelected ->
           ( model

diff --git a/site/index.html b/site/index.html
@@ -118,6 +118,12 @@
         console.log(state);
       });
 
+      app.ports.setCssProp.subscribe(([selector, prop, value]) => {
+        for(const $el of document.querySelectorAll(selector)) {
+          $el.style.setProperty(prop, value);
+        }
+      });
+
       /* Automatic text resizing */
 
       function resizeText($node) {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,3 +10,4 @@ imageInputId = "file"

		nonPrimeImageNumberId : String
		nonPrimeImageNumberId = "nonPrimeImageNumberId"