Add meat pie recipe and improve mobile view

2 files changed, 34 insertions, 15 deletions

diff --git a/js/src/Dom.purs b/js/src/Dom.purs
index a71cda7..426c390 100644
--- a/js/src/Dom.purs
+++ b/js/src/Dom.purs
@@ -1,6 +1,7 @@
 module Dom
   ( onInput
   , selectElement
+  , selectElements
   , selectElementFrom
   , selectElementsFrom
   , replaceElement
@@ -26,8 +27,8 @@ import DOM.Node.Node (replaceChild, parentNode, appendChild) as DOM
 import DOM.Node.NodeList (length, item) as DOM
 import DOM.Node.ParentNode (QuerySelector)
 import DOM.Node.ParentNode (querySelector, querySelectorAll) as DOM
-import DOM.Node.Types (Element, Node)
-import DOM.Node.Types (elementToParentNode) as DOM
+import DOM.Node.Types (Element, Node, NodeList)
+import DOM.Node.Types (elementToParentNode, readElement) as DOM
 
 foreign import onInput :: forall e. Element -> (String -> Eff (dom :: DOM | e) Unit) -> Eff (dom :: DOM | e) Unit
 
@@ -36,18 +37,41 @@ selectElement query = do
   document <- DOM.window >>= DOM.document
   DOM.querySelector query (DOM.htmlDocumentToParentNode document)
 
+selectElements :: forall e. QuerySelector -> Eff (dom :: DOM | e) (Array Element)
+selectElements query = do
+  document <- DOM.window >>= DOM.document
+  nodeList <- DOM.querySelectorAll query (DOM.htmlDocumentToParentNode document)
+  getNodes nodeList
+
 selectElementFrom :: forall e. Element -> QuerySelector -> Eff (dom :: DOM | e) (Maybe Element)
-selectElementFrom elem query = DOM.querySelector query (DOM.elementToParentNode elem)
+selectElementFrom elem query =
+  DOM.querySelector query (DOM.elementToParentNode elem)
 
-selectElementsFrom :: forall e. Element -> QuerySelector -> Eff (dom :: DOM | e) (Array Node)
+selectElementsFrom :: forall e. Element -> QuerySelector -> Eff (dom :: DOM | e) (Array Element)
 selectElementsFrom elem query = do
   nodeList <- DOM.querySelectorAll query (DOM.elementToParentNode elem)
+  getNodes nodeList
+
+getNodes :: forall e. NodeList -> Eff (dom :: DOM | e) (Array Element)
+getNodes nodeList = do
   length <- DOM.length nodeList
   Array.range 0 length
-    # map (\i -> DOM.item i nodeList)
+    # (map (\i -> (concatMaybe <<< map nodeToElement) <$> DOM.item i nodeList))
     # Traversable.sequence
     # map Array.catMaybes
 
+concatMaybe :: forall a. Maybe (Maybe a) -> Maybe a
+concatMaybe mma =
+  case mma of
+    Just x -> x
+    Nothing -> Nothing
+
+nodeToElement :: Node -> Maybe Element
+nodeToElement node =
+  case Except.runExcept $ DOM.readElement (Foreign.toForeign node) of
+    Right element -> Just element
+    _ -> Nothing
+
 replaceElement :: forall e. Node -> Node -> Eff (dom :: DOM | e) Unit
 replaceElement before after = do
   parent <- DOM.parentNode before
diff --git a/js/src/Main.purs b/js/src/Main.purs
index 42db131..3e470ae 100644
--- a/js/src/Main.purs
+++ b/js/src/Main.purs
@@ -10,7 +10,7 @@ import DOM.Node.Types (elementToNode) as DOM
 import DOM.Node.Types (Node)
 import Prelude
 
-import Dom (selectElement, selectElementsFrom, onInput, setValue, selectElementFrom) as Dom
+import Dom (selectElement, selectElements, onInput, setValue, selectElementFrom) as Dom
 import EditableNumber (NumberElem)
 import EditableNumber (set) as EditableNumber
 import Number (format) as Number
@@ -24,15 +24,10 @@ main = do
 
 getNumberElements :: forall e. Eff (dom :: DOM | e) (Array { tag :: String, node :: Node })
 getNumberElements = do
-  h2 <- (map (\elem -> { tag: "h2", node: DOM.elementToNode elem})) <$> Dom.selectElement (QuerySelector "h2")
-  ul <- Dom.selectElement (QuerySelector "ul")
-  lis <- case ul of
-    Just elem -> do
-      myLis <- Dom.selectElementsFrom elem (QuerySelector "li")
-      pure $ map (\node -> { tag: "li", node: node }) myLis
-    _ -> do
-      pure []
-  pure $ (maybeToArray h2 <> lis)
+  let fromElem tag elem = { tag: tag, node: DOM.elementToNode elem }
+  h1 <- map (fromElem "h1") <$> Dom.selectElement (QuerySelector "h1")
+  lis <- map (fromElem "li") <$> Dom.selectElements (QuerySelector "ul > li")
+  pure $ (maybeToArray h1 <> lis)
 
 onInput :: forall e. Array NumberElem -> NumberElem -> Eff (dom :: DOM | e) Unit
 onInput numberElems { elem, number } = do