Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Make the prelude available in description page #393

Merged
merged 4 commits into from Sep 29, 2021
Merged

feat: Make the prelude available in description page #393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
271c033
Make the prelude available in description page
May 12, 2021
9970b4a
fix(description.html): Load learnocaml_tryocaml.css & Comment-out unn…
erikmd Sep 20, 2021
a58898d
fix(description): Initially show the Prelude
erikmd Sep 20, 2021
dc30a09
fix(description): Simplify/Fix HTML+CSS+Js_of_ocaml for the prelude
erikmd Sep 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 36 additions & 0 deletions src/app/learnocaml_common.ml
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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