tips for updating <h1> elements using ghcjs-dom

Question

tips for updating <h1> elements using ghcjs-dom

My experience with the ghcjs and ghcjs-dom documentation has been quite limited. Here is a simple example with basic HTML code:

h1 { font-family: Helvetica; }

p {font-family: Helvetica; color: blue; }

<h1>
Hello World
</h1>
<p>
This is my test document.
</p>

From what I've gathered, ghcjs essentially compiles Haskell to JavaScript. To manipulate the DOM tree even with this simple document, one needs to use the Foreign Function Interface (FFI) and possibly incorporate ghcjs-dom.

The terminology of calling it the "Foreign Function Interface" is somewhat ironic given that JavaScript is considered "native" to browsers. This leads to a bit of confusion in terms.

In this straightforward case,

Let's attempt a basic DOM manipulation example. I have a plain HTML document and I wish to * change the blue paragraph to red or * toggle between red and blue every second

If these simple tasks are not achievable using the ghcjs toolset, then how can it handle more complex challenges? There seems to be a gap in explaining these very fundamental scenarios. I have raised an issue on Github highlighting this lack of clarity and guidance:

https://github.com/ghcjs/ghcjs/issues/568

css haskell ghcjs ghcjs-dom

Answer 1

Answer №1

Here is a concise example showcasing the use of reflex-dom to implement red/blue color switching as described. This code snippet, originally shared by epsilonhalbe in this answer to an earlier question, builds upon previous knowledge referenced in your inquiry.

{-# LANGUAGE OverloadedStrings #-} 
{-# LANGUAGE ScopedTypeVariables #-} -- allows for local type declarations.
import Reflex
import Reflex.Dom
import Data.Text (Text, pack)
import Data.Map (Map)
import Data.Time.Clock (getCurrentTime)
import Control.Monad.Trans (liftIO)

webPage :: MonadWidget t m => m ()
webPage = do

  -- ticker Event triggers every second.
  ticker :: Event t TickInfo <- tickLossy 1.0 =<< liftIO getCurrentTime  

  -- counter Dynamic increments by one per second.
  counter :: Dynamic t Int <- foldDyn  (\_ n -> n+1) 0 ticker

  -- function mapping integers to red or blue styling.
  let chooseColor :: Int -> (Map Text Text) 
      chooseColor n = "style" =: pack ("color: " ++ if (n `mod` 2) == 0 then "red" else "blue")

  -- redBlueStyle Dynamic changes each second.
  let redBlueStyle :: Dynamic t (Map Text Text) 
      redBlueStyle = fmap chooseColor counter

  -- place an h1 element.
  el "h1" $ text "Hello World!"

  -- add a paragraph with Dynamic red-blue style.
  elDynAttr "p" redBlueStyle $ text "This is my test document"

  return ()


css = "h1 {font-family: Helvetica;} p {font-family: Helvetica;}" 

main :: IO ()
main = mainWidgetWithCss css webPage

It's important to note that reflex-dom brings higher level functionalities compared to ghcjs-dom and introduces concepts like Event, Dynamic, and Behavior that require some familiarity.

The provided example utilizes a Dynamic Map to switch styles between red and blue every second when applied to an element.

To enhance clarity, this demonstration includes certain type declarations that may not be strictly necessary.

You can find this project at: https://github.com/dc25/stackOverflow__how-to-change-h1-tags-with-ghcjs-dom. Explore a browser-based demo here:

Answer 2

Here is a concise example showcasing the use of reflex-dom to implement red/blue color switching as described. This code snippet, originally shared by epsilonhalbe in this answer to an earlier question, builds upon previous knowledge referenced in your inquiry.

{-# LANGUAGE OverloadedStrings #-} 
{-# LANGUAGE ScopedTypeVariables #-} -- allows for local type declarations.
import Reflex
import Reflex.Dom
import Data.Text (Text, pack)
import Data.Map (Map)
import Data.Time.Clock (getCurrentTime)
import Control.Monad.Trans (liftIO)

webPage :: MonadWidget t m => m ()
webPage = do

  -- ticker Event triggers every second.
  ticker :: Event t TickInfo <- tickLossy 1.0 =<< liftIO getCurrentTime  

  -- counter Dynamic increments by one per second.
  counter :: Dynamic t Int <- foldDyn  (\_ n -> n+1) 0 ticker

  -- function mapping integers to red or blue styling.
  let chooseColor :: Int -> (Map Text Text) 
      chooseColor n = "style" =: pack ("color: " ++ if (n `mod` 2) == 0 then "red" else "blue")

  -- redBlueStyle Dynamic changes each second.
  let redBlueStyle :: Dynamic t (Map Text Text) 
      redBlueStyle = fmap chooseColor counter

  -- place an h1 element.
  el "h1" $ text "Hello World!"

  -- add a paragraph with Dynamic red-blue style.
  elDynAttr "p" redBlueStyle $ text "This is my test document"

  return ()


css = "h1 {font-family: Helvetica;} p {font-family: Helvetica;}" 

main :: IO ()
main = mainWidgetWithCss css webPage

It's important to note that reflex-dom brings higher level functionalities compared to ghcjs-dom and introduces concepts like Event, Dynamic, and Behavior that require some familiarity.

The provided example utilizes a Dynamic Map to switch styles between red and blue every second when applied to an element.

To enhance clarity, this demonstration includes certain type declarations that may not be strictly necessary.

You can find this project at: https://github.com/dc25/stackOverflow__how-to-change-h1-tags-with-ghcjs-dom. Explore a browser-based demo here:

tips for updating <h1> elements using ghcjs-dom

Answer №1

Similar questions

Ways to disable the caching feature in Google Chrome

Tips for repairing a button using a JavaScript function in an HTML document

I'm struggling to locate the space that should be between these elements

Tips for creating an inline list in MVC

How to use CSS to align text at the bottom of Angular Material icons within spans?

Calculating the dimensions of a CSS element based on its content

Creating a curved container with CSS styling

Change the display, animate the elements within

Having trouble with CSS messing up your gridview button display?

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

Spots on a spinning wheel

Achieving a layout of three columns and two rows (1 x 2 x 2) using flexbox

Updating the icon of an action column dynamically in Ext JS4

Keyframes for CSS3 animations

In what way does a child's width vary when set to "100%" or "inherit" from its parent element?

Creating a dropdown in HTML that overlaps another div requires using relative and absolute positioning

Adding a line and text as a label to a rectangle in D3: A step-by-step guide

The shadow effects and color overlays do not seem to be functioning properly in Mozilla Firefox

Show HTML code inside a text box

Change a portion of the CSS background-image URL using vanilla JavaScript for a set of pictures