Text selection and iFrame with Reflex.Dom

WiktionaryLookup.hs

{-# LANGUAGE JavaScriptFFI #-}

import Reflex.Dom
import qualified Data.Text as T
import Data.Monoid
import GHCJS.Types
import GHCJS.Foreign
import Control.Monad.IO.Class
import Control.Monad
import Data.Maybe

stylesheet :: MonadWidget t m => m ()
stylesheet = elAttr "link" ("rel" =: "stylesheet" <> "href" =: "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/readable/bootstrap.min.css") $ return ()

main :: IO ()
main = mainWidgetWithHead stylesheet $ do
  url <- elAttr "div" passageContainerAttrs $ do
    passage <- textArea $ def & attributes .~ (constDyn passageInputAttrs)
                              & textAreaConfig_initialValue .~ kafka
    pLines <- mapDyn lines (value passage)
    (e, _) <- el' "div" $ simpleList pLines $ el "p" . dynText -- $ dynText $ value passage
    word <- performEvent $ fmap (const $ liftIO getSelection) $ domEvent Mouseup e
    holdDyn ("src" =: "about:blank" <> iframeAttrs) $ fmap (\word' -> iframeAttrs <> "src" =: ("https://en.wiktionary.org/w/index.php?title=" <> word' <>"&printable=yes#German")) $ fmapMaybe (listToMaybe . words) word
  elDynAttr "iframe" url $ return ()
  return ()
  where
    passageContainerAttrs = "style" =: "position: absolute; height: 99%; width: 50%; overflow-y: scroll; overflow-x: hidden;"
    passageInputAttrs = "style" =: "width:100%;"
    iframeAttrs = "style" =: "position: absolute; height: 99%; width: 50%; right: 0; overflow-x: hidden;" <> "frameborder" =: "0"


foreign import javascript unsafe "window.getSelection().toString()" getSelection_ :: IO JSString

getSelection :: IO String
getSelection = liftM fromJSString getSelection_

kafka :: String
kafka = "Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt. Er lag auf seinem panzerartig harten Rücken und sah, wenn er den Kopf ein wenig hob, seinen gewölbten, braunen, von bogenförmigen Versteifungen geteilten Bauch, auf dessen Höhe sich die Bettdecke, zum gänzlichen Niedergleiten bereit, kaum noch erhalten konnte. Seine vielen, im Vergleich zu seinem sonstigen Umfang kläglich dünnen Beine flimmerten ihm hilflos vor den Augen."

Use try-reflex to build.

You should end up with something like this: Enter text in the textarea element and it is rendered below the textarea. Select a word and the iframe on the right will show it's definition courtesy of Wiktionary.