update demo page

wass80 · Nov 24, 2016 · 867bd8d · 867bd8d
1 parent 6f91fda
commit 867bd8d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/app/Main.hs b/app/Main.hs
@@ -12,24 +12,28 @@ import Transpiler (transpile)
 setText :: Elem -> String -> IO ()
 setText p = setProp p "textContent"
 
+update :: Elem -> Elem -> Elem -> Elem -> IO ()
+update input preview ast output = do
+  -- getValue :: (IsElem e, MonadIO m, JSType a) => e -> m (Maybe a)
+  (Just ln) <- getValue input
+  setText preview ln
+  case parse ln of
+    Right s -> do
+      setText ast (show s)
+      setText output (transpile s)
+    Left l -> do
+      setText ast (show l)
+      setText output "Error"
+
 main :: IO ()
 main = do
-    -- elemById ::  MonadIO m => ElemID -> m (Maybe Elem)
-    Just input <- elemById "input"
-    Just preview <- elemById "preview"
-    Just ast <- elemById "ast"
-    Just output <- elemById "output"
-    -- onEvent element event (EventData evt -> m ()) という形
-    -- この場合 e にはイベント情報が入り，（今回は使っていないが）函数に渡される
-    onEvent input KeyDown $ \ e -> do
-        -- getValue :: (IsElem e, MonadIO m, JSType a) => e -> m (Maybe a)
-        (Just ln) <- getValue input
-        setText preview ln
-        case parse ln of
-             Right s -> do
-               setText ast (show s)
-               setText output (transpile s)
-             Left l -> do
-               setText ast (show l)
-               setText output "Error"
-    return ()
+  -- elemById ::  MonadIO m => ElemID -> m (Maybe Elem)
+  Just input <- elemById "input"
+  Just preview <- elemById "preview"
+  Just ast <- elemById "ast"
+  Just output <- elemById "output"
+  update input preview ast output
+  -- onEvent element event (EventData evt -> m ()) という形
+  -- この場合 e にはイベント情報が入り，（今回は使っていないが）函数に渡される
+  onEvent input KeyDown $ \ e -> update input preview ast output
+  return ()
diff --git a/build/Main.js b/build/Main.js
diff --git a/demo/index.html b/demo/index.html
@@ -18,7 +18,6 @@
 }
 .virt {
   white-space: pre;
-  font-size: 150%;
 }
 .container {
   display: flex;
@@ -32,6 +31,7 @@
 }
 .mouhitu {
   font-family: 'KouzanMouhitu';
+  font-size: 150%;
 }
 .fit {
     border: none;
@@ -46,9 +46,12 @@
   <div class="container">
     <div class="split grow">
       <h1 class="mouhitu">孔Caml</h1>
+      <h2 class="mouhitu">入力</h2>
       <textarea id="input" contenteditable="true" class="grow fit"
       placeholder="please write here.">亜。</textarea>
+      <h2>OCamlコード</h2>
       <div id="output" class="grow virt"></div>
+      <h2>抽象構文木</h2>
       <div id="ast" class=""></div>
     </div>
     <div id="preview" class="vert grow virt mouhitu"></div>