templates/page.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

{% extends "layout.html" %}

{% block title %}{{ _input }} {{ title }}{% parent %}{% endblock %}
{% block description %}{% endblock %}
{% block robots %}index, follow{% endblock %}
{% block content %}
<div class="book {% if _input == "README.md" %}with-summary{% endif %}">
    {% include "includes/book/header.html" %}
    {% include "includes/book/summary.html" %}

    <div class="book-body">
        <div class="page-wrapper">
            <div class="page-inner">
            {% for section in content %}
                <section class="{{ section.type }}" id="section-{{ section.id }}">
                {% if section.type == "normal" %}
                    {% autoescape false %}{{ section.content }}{% endautoescape %}
                {% elif section.type == "exercise" %}
                    {% include "./includes/book/exercise.html" with {section: section} %}
                {% endif %}
                </section>
            {% endfor %}
            </div>

            <div class="page-footer">
                <div class="navigation">
                {% if _input == "README.md" %}
                    <a href="{{ basePath }}/{{ navigation.next.path }}" class="navigation-link">Start this book</a>
                {% else %}
                    {% if navigation.prev %}
                        <a href="{{ basePath }}/{{ navigation.prev.path }}" class="navigation-link prev"><i class="fa fa-chevron-left"></i> <span>{{ navigation.prev.title }}</span></a>
                    {% endif %}
                    {% if navigation.next %}
                    <a href="{{ basePath }}/{{ navigation.next.path }}" class="navigation-link next"><span>{{ navigation.next.title }}</span> <i class="fa fa-chevron-right"></i></a>
                    {% endif %}
                {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $("section.exercise").each(function() {
        var $exercise = $(this);

        var codeSolution = $exercise.find(".code-solution").html();
        var codeValidation = $exercise.find(".code-validation").html();

        var editor = ace.edit($exercise.find(".editor").get(0));
        editor.setTheme("ace/theme/tomorrow");
        editor.getSession().setMode("ace/mode/javascript");

        $exercise.find(".action-submit").click(function(e) {
            e.preventDefault();

            alert("submit");
        });
        $exercise.find(".action-solution").click(function(e) {
            e.preventDefault();

            editor.setValue(codeSolution);
        });
    })
});
</script>
{% endblock %}