feat: related lessons selector

.php-version

+7.4.29

user/plugins/language-selector/css/language-selector.css

@@ -43,8 +43,9 @@
 
 .language-selector .dropdown-menu {
 	  position: absolute;
-	  top: 100%;
+	  top: 95%;
 	  left: 0;
+      /*right: 0;*/
 	  z-index: 1000;
 	  display: none;
 	  float: left;
@@ -76,7 +77,7 @@
     background-color: #eee;
 }
 
-.language-selector .dropdown-menu>li>a {
+.language-selector .dropdown-menu > li > a {
     display: block;
     padding: 3px 15px;
     clear: both;

user/plugins/m3-p2/m3-p2.php

@@ -355,16 +355,44 @@ class M3P2Plugin extends Plugin
             return;
         }
 
+        $current_lesson_name = "";
+        $other_lessons = [];  // of slug => ['name' => …, 'slug' => …]
+        foreach ($target_pages as $target_page) {
+            $page_config = $target_page->header();
+            if ( ! isset($page_config->lessons) || empty($page_config->lessons)) {
+                return false;
+            }
+            foreach ($page_config->lessons as $page_lesson) {
+                if ( ! isset($page_lesson['slug'])) {
+                    continue;
+                }
+                if ($lesson_slug != $page_lesson['slug']) {
+                    if ( ! isset($other_lessons[$page_lesson['slug']])) {
+                        $other_lessons[$page_lesson['slug']] = $page_lesson;
+                    }
+                    continue;
+                }
+                if (isset($page_lesson['name']) && ! empty($page_lesson['name'])) {
+                    $current_lesson_name = $page_lesson['name'];
+                }
+            }
+        }
+
+        //dd($other_lessons);
+
         $this->grav['twig']->twig()->addGlobal('target_pages', $target_pages);
+        $this->grav['twig']->twig()->addGlobal('related_lessons', $other_lessons);
         $this->grav['twig']->twig()->addGlobal('disable_multilingual', true);
 
         // hotfix until we know how to fetch the appropriate translation
-        $this->grav['twig']->twig()->addGlobal('disable_language_selector', true);
+        // disabled in template lesson-columns.html.twig
+        //$this->grav['twig']->twig()->addGlobal('disable_language_selector', true);
 
-        $page = new Page;
+        $page = new Page();
         $page->init(new \SplFileInfo(__DIR__ . '/pages/lesson-columns.md'));
 
-        // here: perhaps add a title and other metadata
+        $page->title($current_lesson_name);
+        // here: perhaps add other metadata
 
         $event->page = $page;
         $event->stopPropagation();

user/themes/textbook/css/custom.css

@@ -58,6 +58,7 @@ section#header { z-index: 2; }
 
 /* Little patch for the language selector, to center it vertically. */
 /* Beta feature : may cause bugs. We'll see. */
+.dropdown-selector,
 .language-selector {
     -webkit-transform: initial !important;
     -moz-transform: initial !important;
@@ -265,5 +266,117 @@ iframe.geogebra {
 /*    100%  {display: none;}*/
 /*}*/
 
+
+#lesson-selector-button:hover ~ *,
+#lesson-selector-button:focus ~ *,
+/* class only won't work, we need an id here for some reason */
+.dropdown-menu-button:hover ~ *,
+.dropdown-menu-button:focus ~ * {
+    display: block;
+    visibility: visible;
+}
+
+
+#lesson-selector-dropdown:focus-within,
+#lesson-selector-dropdown:hover,
+#lesson-selector-dropdown:focus,
+/* same */
+.dropdown-menu:focus-within,
+.dropdown-menu:hover,
+.dropdown-menu:focus {
+    display: block;
+    visibility: visible;
+}
+
+
+.dropdown-selector {
+    float: right;
+    position: relative;
+    top: 50%;
+    vertical-align: middle;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    margin: 0 1rem !important;
+    display: inline-block;
+}
+
+.dropdown-selector > .btn:first-child {
+    margin-left: 0;
+}
+
+.dropdown-selector .btn {
+    float: left;
+    position: relative;
+    display: inline-block;
+    margin-bottom: 0;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    touch-action: manipulation;
+    cursor: pointer;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    /* size */
+    padding: 5px 10px;
+    font-size: 0.8rem;
+    line-height: 1.5;
+    border-radius: 3px;
+    /* Aspect */
+    color: #333;
+    background-color: #fff;
+    border-color: #ccc;
+}
+
+.dropdown-selector .dropdown-menu {
+    position: absolute;
+    top: 95%;
+    /*left: 0;*/
+    right: 0;
+    z-index: 1000;
+    display: none;
+    float: left;
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 1rem;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    background-clip: padding-box;
+    border-radius: 4px;
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+}
+
+.dropdown-selector .dropdown-menu img {
+    width: 24px;
+    height: 12px;
+    max-width: inherit;
+}
+
+.dropdown-selector .dropdown-menu li {
+    line-height: 1rem;
+    font-color: #c0c0c0;
+    display: list-item;
+    text-align: -webkit-match-parent;
+}
+
+.dropdown-selector .dropdown-menu li:hover {
+    background-color: #eee;
+}
+
+.dropdown-selector .dropdown-menu > li > a {
+    display: block;
+    padding: 3px 15px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap;
+}
+
 /**********************************************************************************************************************/
 

user/themes/textbook/templates/lesson-columns.html.twig

@@ -28,6 +28,26 @@
 {% endblock %}
 
 {# Disable the language selector. #}
-{#{% block header_language_selection %}{% endblock %}#}
+{# We also do this procedurally in user/plugins/m3-p2/m3-p2.php #}
+{% block header_language_selection %}
+{% if related_lessons %}
+
+<div id="lesson-selector" class="dropdown-selector">
+    <button id="lesson-selector-button" class="btn dropdown-menu-button" type="button">
+        📚 {{ related_lessons | length }}
+        <i class="fa fa-caret-down"></i>
+    </button>
+    <ul id="lesson-selector-dropdown" class="dropdown-menu lesson-list">
+{% for related_lesson_slug, related_lesson in related_lessons %}
+        <li>
+            <a href="/{{ language_selector.current }}/lessons/{{ related_lesson.slug }}">
+                {{ related_lesson.name ? related_lesson.name : related_lesson.slug }}
+            </a>
+        </li>
+{% endfor %}
+    </ul>
+</div>
+{% endif %}
+{% endblock %}
 {# … disabling the whole section instead is semantically correct but it offsets the navigation. TBD #}
 {#{% block header_language_selection_section %}{% endblock %}#}