foreach ($topics_tree as $topics_tree_topic_data) {
echo getTopicsTreeTopicHTML($topics_tree_topic_data);
}
echo <<<s
</section>
</div>
<div class="column">
<section>
<h2>Lessons</h2>
</section>
<section style="max-height: 800px; overflow-x: scroll;">
<input onKeyUp="filterLessonFamilies(this);" />
<div class="lesson_family">
s;
foreach ($lessons_tree as $lessons_tree_lesson_data) {
echo getLessonsTreeLessonHTML($lessons_tree_lesson_data);
}
echo <<<s
</div>
</section>
</div>
</div>
</div>
s;
require_once 'components/footer.php';
?>
function getTopicsTreeTopicHTML($topic_data)
{
$topic_children_count = count($topic_data['Children']);
$topic_lessons_count = count($topic_data['Lessons']);
$topic_tags_count = count($topic_data['Tags']);
$topic_html = <<<s
<div class="tree_item" data-type="topic">
s;
if ($topic_children_count || $topic_lessons_count) {
$topic_html .= <<<s
\t<input class="toggler" id="toggler[topic_{$topic_data['Id']}]" type="checkbox" />
s;
}
$topic_html .= <<<s
\t<div class="self">
s;
if ($topic_children_count || $topic_lessons_count) {
$topic_html .= <<<s
\t\t<label class="toggler" for="toggler[topic_{$topic_data['Id']}]"></label>
s;
}
$topic_html .= <<<s
\t\t<a class="link topic" data-topic-id="{$topic_data['Id']}" href="topic.php?id={$topic_data['Id']}">
\t\t\t<h4>{$topic_data['Title']}</h4>
\t\t\t<p>Topics: {$topic_children_count} · Lessons: {$topic_lessons_count} · Tags: {$topic_tags_count}</p>
\t\t</a>
\t</div>
s;
if ($topic_children_count || $topic_lessons_count) {
$topic_html .= <<<s
\t<div class="children">
s;
if ($topic_children_count) {
foreach ($topic_data['Children'] as $topic_child_data) {
$topic_html .= getTopicsTreeTopicHTML($topic_child_data);
}
}
if ($topic_lessons_count) {
foreach ($topic_data['Lessons'] as $topic_lesson_data) {
$topic_html .= getLessonsTreeLessonHTML($topic_lesson_data);
}
}
$topic_html .= <<<s
\t</div>
s;
}
$topic_html .= <<<s
</div>
s;
return $topic_html;
}
</div>
</section>
<section id="lessons">
<input checked id="lessons_toggle" type="checkbox" />
<label class="heading" for="lessons_toggle">
<div class="icon icon-lessons"></div>
<h2>Lesson family</h2>
</label>
<div class="content">
<p>
<a onclick="showPopup('add_lesson');">Add lesson</a>
</p>
<div class="lessons">
s;
echo getLessonsTreeLessonHTML($lesson_family);
echo <<<s
</div>
</div>
<script>
$('[data-lesson-id={$lesson_data['Id']}]').addClass('active');
$('[data-lesson-id={$lesson_data['Id']}]').parents('.tree_item').each(function () {
$(this).children('input[type=checkbox].toggler').prop('checked', true);
});
</script>
</section>
<section id="notes">
<input id="notes_toggle" type="checkbox" />
<label class="heading" for="notes_toggle">
<div class="icon icon-ul"></div>
