Make the prelude available in description page

src/app/learnocaml_common.ml

@@ -948,6 +948,42 @@ let set_nickname_div () =
   | nickname -> Manip.setInnerText nickname_div nickname
   | exception Not_found -> ()
 
+(* setup for the prelude in the description page (in description_main.ml) *)
+let setup_tab_text_prelude_pane prelude =
+  if prelude = "" then () else
+  let iframe_pane = find_component "learnocaml-exo-tab-text-iframe" in
+  let prelude_pane = find_component "learnocaml-exo-tab-text-prelude" in
+  let open Tyxml_js.Html5 in
+  let state =
+    ref (match arg "tab_text_prelude" with
+         | exception Not_found -> false
+         | "shown" -> true
+         | "hidden" -> false
+         | _ -> failwith "Bad format for argument prelude.") in
+  let prelude_btn = button [] in
+  let prelude_title = h1 [ txt [%i"OCaml prelude"] ;
+                           prelude_btn ] in
+  let prelude_container =
+    pre ~a: [ a_class [ "toplevel-code" ] ]
+      (Learnocaml_toplevel_output.format_ocaml_code prelude) in
+  let update () =
+    if !state then begin
+        Manip.replaceChildren prelude_btn [ txt ("↳ "^[%i"Hide"]) ] ;
+        Manip.SetCss.display prelude_container "" ;
+        Manip.SetCss.top iframe_pane "241px";
+        set_arg "tab_text_prelude" "shown"
+      end else begin
+        Manip.replaceChildren prelude_btn [ txt ("↰ "^[%i"Show"]) ] ;
+        Manip.SetCss.display prelude_container "none" ;
+        Manip.SetCss.top iframe_pane "90px";
+        set_arg "tab_text_prelude" "hidden"
+      end in
+  update () ;
+  Manip.Ev.onclick prelude_btn
+    (fun _ -> state := not !state ; update () ; true) ;
+  Manip.appendChildren prelude_pane
+    [ prelude_title ; prelude_container ]
+
 let setup_prelude_pane ace prelude =
   if prelude = "" then () else
   let editor_pane = find_component "learnocaml-exo-editor-pane" in

src/app/learnocaml_common.mli

@@ -222,6 +222,8 @@ val typecheck :
 
 val set_nickname_div : unit -> unit
 
+val setup_tab_text_prelude_pane : string -> unit
+
 val setup_prelude_pane : 'a Ace.editor -> string -> unit
 
 val get_token : ?has_server:bool -> unit -> Learnocaml_data.student Learnocaml_data.token option Lwt.t

src/app/learnocaml_description_main.ml

@@ -35,11 +35,16 @@ let () =
          in
          init_tabs ();
          exercise_fetch >>= fun (ex_meta, exo, _deadline) ->
-         (* display exercise questions *)
+         (* display exercise questions and prelude *)
+         setup_tab_text_prelude_pane Learnocaml_exercise.(decipher File.prelude exo);
+         let prelude_container = find_component "learnocaml-exo-tab-text-prelude" in
+         let iframe_container = find_component "learnocaml-exo-tab-text-iframe" in
          let text_iframe = Dom_html.createIframe Dom_html.document in
+         Manip.replaceChildren iframe_container [Tyxml_js.Of_dom.of_iFrame text_iframe];
          Manip.replaceChildren text_container
-           Tyxml_js.Html5.[ h1 [ txt ex_meta.title ] ;
-                            Tyxml_js.Of_dom.of_iFrame text_iframe ] ;
+           Tyxml_js.Html5.[ h1 [ txt ex_meta.title] ;
+                            prelude_container;
+                            iframe_container ] ;
          Js.Opt.case
            (text_iframe##.contentDocument)
            (fun () -> failwith "cannot edit iframe document")

static/css/learnocaml_description.css

@@ -43,6 +43,7 @@ body {
   display: block;
   font-weight: normal;
   position: relative;
+  border-bottom: thin solid #eee;
 }
 #learnocaml-exo-tabs > * > h1:first-child {
   margin-top: 5px;
@@ -52,14 +53,97 @@ body {
   overflow: auto;
   flex: 1 3 auto ;
 }
-#learnocaml-exo-tab-meta > h1::after {
+#learnocaml-exo-tab-meta > * > h1::after {
   position: absolute;
   left: 0px; bottom: -5px; width: 100%;
   content:"";
   height:5px; background: pink;
   background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0, transparent 100%)
 }
 
+/* ----------------------- iframe --------------------------------*/
+
+#learnocaml-exo-tab-text-iframe {
+    position : absolute;
+    right : 0px;
+    left : 0px;
+    bottom : 0px;
+    display : flex ;
+    flex-direction : column;
+}
+
+#learnocaml-exo-tab-text-iframe > iframe {
+    height : 100%;
+}
+/* -------------------- Prelude -------------------------------- */
+
+#learnocaml-exo-tab-text-prelude {
+  overflow: hidden;
+  left: 0;
+  top: 61px;
+  z-index: 1002;
+  border-bottom: thin solid #eee;
+  width: 100%;
+}
+#learnocaml-exo-tab-text-prelude > h1 {
+  position: relative;
+  flex: 0 0 auto;
+  background: #222;
+  color: #eee;
+  font-size: 20px;
+  line-height: 22px;
+  margin: 0;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  display: block;
+  font-weight: normal;
+  z-index: 1005;
+  width: 100%;
+  text-align: center;
+}
+#learnocaml-exo-tab-text-prelude > h1:first-child {
+  margin-top: 0;
+}
+#learnocaml-exo-tab-text-prelude > h1 > button {
+  float: right;
+  border: none;
+  border-left: 1px #eee solid;
+  color: #eee;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  margin-top: -10px;
+  margin-bottom: -10px;
+  font-size: 20px;
+  line-height: 22px;
+  z-index: 1006;
+  width: 20%;
+  background: #222; 
+}
+#learnocaml-exo-tab-text-prelude > iframe {
+  border: none;
+  overflow: auto;
+  flex: 1 3 auto ;
+}
+#learnocaml-exo-tab-text-prelude > pre.toplevel-code {
+  flex: 0 1 auto;
+  height: 150px;
+  max-height: 150px;
+  background: #666;
+  margin: 0;
+  overflow: auto;
+  width: 100%;
+  position: absolute;
+}
+#learnocaml-exo-tab-text-prelude > h1::after {
+  position: absolute;
+  left: 0px; bottom: -5px; width: 100%;
+  content:"";
+  height:5px; background: pink;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0, transparent 100%)
+}
+
+
+
 /* BEGIN excerpt from learnocaml_exercise.css */
 
 .learnocaml-exo-meta-category ~ .exercise + .exercise {

static/description.html

@@ -34,7 +34,12 @@
     <div id="learnocaml-exo-tabs">
       <div id="learnocaml-exo-tab-meta" class="front-tab"></div>
       <div id="learnocaml-exo-tab-meta-sep"></div>
-      <div id="learnocaml-exo-tab-text"></div>
+      <div id="learnocaml-exo-tab-text">
+        <div id="learnocaml-exo-tab-text-prelude"></div>
+        <div id="learnocaml-exo-tab-text-iframe"></div>
+        <!-- The learnocaml-exo-tab-text-iframe div is needed to be responsive
+             to the prelude (show and hidden) -->
+      </div>
     </div>
 </body>