From f7d099edf137214142faba56a2cca7e156bf0921 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 14 May 2017 20:38:24 +0200 Subject: Add meat pie recipe and improve mobile view --- js/src/Dom.purs | 34 +++++++++++++++++++++++++++++----- js/src/Main.purs | 15 +++++---------- 2 files changed, 34 insertions(+), 15 deletions(-) (limited to 'js/src') 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 -- cgit v1.2.3