Skip to content

Commit

Permalink
feat: Make the prelude available in description page (#393)
Browse files Browse the repository at this point in the history 
* Make the prelude available in description page

* fix(description.html): Load learnocaml_tryocaml.css & Comment-out unneeded file

* fix(description): Initially show the Prelude

* fix(description): Simplify/Fix HTML+CSS+Js_of_ocaml for the prelude

Co-authored-by: Erik Martin-Dorel <erik.martin-dorel@irit.fr>
  • Loading branch information
@YoanwM @erikmd
YoanwM and erikmd committed Sep 29, 2021
1 parent b277b38 commit 51ed717
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 15 deletions.
36 changes: 36 additions & 0 deletions src/app/learnocaml_common.ml
View file
Expand Up @@ -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-descr" 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 -> true
| "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
Expand Down
2 changes: 2 additions & 0 deletions src/app/learnocaml_common.mli
View file
Expand Up @@ -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
Expand Down
17 changes: 10 additions & 7 deletions src/app/learnocaml_description_main.ml
View file
Expand Up @@ -16,30 +16,33 @@ module Exercise_link =
a_class cl ]
content)
end
module Display = Display_exercise(Exercise_link)

module Display = Display_exercise(Exercise_link)
open Display

let () =
run_async_with_log @@ fun () ->
let id = match Url.Current.path with
| "" :: "description" :: p | "description" :: p ->
String.concat "/" (List.map Url.urldecode (List.filter ((<>) "") p))
| _ -> arg "id" in
Learnocaml_local_storage.init () ;
let text_container = find_component "learnocaml-exo-tab-text" in
let title_container = find_component "learnocaml-exo-tab-text-title" in
let text_container = find_component "learnocaml-exo-tab-text-descr" in
try begin
let token = Learnocaml_data.Token.parse (arg "token") in
let exercise_fetch =
retrieve (Learnocaml_api.Exercise (Some token, id))
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 text_iframe = Dom_html.createIframe Dom_html.document in
Manip.replaceChildren title_container
Tyxml_js.Html5.[ h1 [ txt ex_meta.title] ];
Manip.replaceChildren text_container
Tyxml_js.Html5.[ h1 [ txt ex_meta.title ] ;
Tyxml_js.Of_dom.of_iFrame text_iframe ] ;
[ Tyxml_js.Of_dom.of_iFrame text_iframe ];
Js.Opt.case
(text_iframe##.contentDocument)
(fun () -> failwith "cannot edit iframe document")
Expand Down
91 changes: 85 additions & 6 deletions static/css/learnocaml_description.css
View file
Expand Up @@ -31,8 +31,9 @@ body {
display: flex;
flex-direction: column;
overflow: hidden;
border: none;
}
#learnocaml-exo-tabs > * > h1 {
#learnocaml-exo-tabs h1 {
flex: 0 0 auto;
background: #222;
color: #eee;
Expand All @@ -43,23 +44,101 @@ body {
display: block;
font-weight: normal;
position: relative;
border-bottom: thin solid #eee;
}
#learnocaml-exo-tabs > * > h1:first-child {
#learnocaml-exo-tabs h1:first-child {
margin-top: 5px;
}
#learnocaml-exo-tabs > * > iframe {
#learnocaml-exo-tabs iframe {
border: none;
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-descr {
position : absolute;
top: 48px;
right : 0px;
left : 0px;
bottom : 0px;
display : flex ;
flex-direction : column;
}

/* -------------------- 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 > 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 {
Expand Down Expand Up @@ -191,9 +270,9 @@ body {
#learnocaml-exo-tab-text {
position: relative;
flex-grow: 4;
border-right: #222 2px solid;
border-right: none;
overflow-y: auto;
}
}
#learnocaml-exo-tab-meta {
position: relative;
flex-grow: 1;
Expand Down
9 changes: 7 additions & 2 deletions static/description.html
View file
Expand Up @@ -6,8 +6,9 @@
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<title>Learn OCaml by OCamlPro - Description</title>
<link rel="stylesheet" href="/css/learnocaml_common.css">
<link rel="stylesheet" href="/css/learnocaml_standalone_description.css">
<link rel="stylesheet" href="/css/learnocaml_tryocaml.css">
<link rel="stylesheet" href="/css/learnocaml_description.css">
<!-- <link rel="stylesheet" href="/css/learnocaml_standalone_description.css"> -->

<script src="/js/ace/ace.js" type="text/javascript" charset="utf-8" defer></script>
<!-- var editor = ace.edit("learnocaml-exo-editor-pane"); -->
Expand All @@ -34,7 +35,11 @@
<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-title"></div>
<div id="learnocaml-exo-tab-text-prelude"></div>
<div id="learnocaml-exo-tab-text-descr"></div>
</div>
</div>
</body>

Expand Down

0 comments on commit 51ed717

Please sign in to comment.