Изменения от Издателя ГитЖС | Changes of GitJS Publisher

макет|template.css

@@ -24,5 +24,6 @@
     left: 320px;
     right: 0;
     bottom: 0;
+    padding: 1em;
 }
 

пример|sample.js

@@ -2,34 +2,110 @@
 
 const ИМЯ = "UIK";
 
+// Переместить в отдельный файл. JSON?
+
+const разделМеню = `
+<ul class="uk-nav uk-nav-default tm-nav">
+    <li class="uk-nav-header">%название%</li>
+    %содержимое%
+</ul>
+`;
+
+const пунктМеню = `
+<li id="%id%"><a id="%id%-ссылка">%название%</a></li>
+`;
+
+
+// // // //
+
+
+ВыбратьПервыйПунктМенюДокументации = мир =>
+{
+    мир.номерВыбранногоПунктаДокументации = 0;
+    мир.уведомить("выбрали пункт меню документации");
+};
+
 
 // // // //
 
 
-ЗадатьРазделМенюПримеров = мир =>
+ОтобразитьСодержимоеВыбранногоПунктаМенюДокументации = мир =>
 {
-    мир.макет.константы.примеры = "примеры";
+    $(`#${мир.макет.константы.содержимое}`).html(`<p>Выбрали пункт меню #${мир.номерВыбранногоПунктаДокументации}`);
+};
+
+
+// // // //
+
+
+ОтобразитьВыборПунктаМенюДокументации = мир =>
+{
+    const id = мир.макет.константы.документация;
+    // Очищаем прошлый выбор.
+    for (var номер in мир.пунктыДокументации)
+    {
+        $(`#${id}-${номер}`).removeClass("uk-active");
+    }
     
-    $(`#${мир.макет.константы.меню}`).append(`
-<ul id="${мир.макет.константы.примеры}" class="uk-nav uk-nav-default tm-nav">
-    <li class="uk-nav-header">Примеры</li>
-</ul>
-    `);
+    // Задаём новый выбор.
+    $(`#${id}-${мир.номерВыбранногоПунктаДокументации}`).addClass("uk-active");
 };
 
 
 // // // //
 
 
-ЗадатьРазделМенюДокументации = мир =>
+ОтслеживатьВыборПунктаМенюДокументации = мир =>
+{
+    for (var номер in мир.пунктыДокументации)
+    {
+        const номерПункта = номер;
+        const id = `${мир.макет.константы.документация}-${номер}-ссылка`;
+        $(`#${id}`).click(function() {
+            мир.номерВыбранногоПунктаДокументации = номерПункта;
+            мир.уведомить("выбрали пункт меню документации");
+        });
+    }
+};
+
+
+// // // //
+
+
+СоздатьРазделМенюДокументации = мир =>
 {
     мир.макет.константы.документация = "документация";
     
-    $(`#${мир.макет.константы.меню}`).append(`
-<ul id="${мир.макет.константы.документация}" class="uk-nav uk-nav-default tm-nav">
-    <li class="uk-nav-header">Документация</li>
-</ul>
-    `);
+    var содержимое = "";
+    for (var номер in мир.пунктыДокументации)
+    {
+        var название = мир.пунктыДокументации[номер];
+        var id = `${мир.макет.константы.документация}-${номер}`;
+        var пункт = пунктМеню
+            .replace("%название%", название)
+            .replace(/%id%/g, id)
+            ;
+        содержимое += пункт;
+    }
+    
+    var раздел = разделМеню
+        .replace("%название%", мир.макет.константы.документация)
+        .replace("%содержимое%", содержимое)
+        ;
+    
+    $(`#${мир.макет.константы.меню}`).append(раздел);
+};
+
+
+// // // //
+
+
+ЗадатьПунктыРазделаМенюДокументации = мир =>
+{
+    мир.пунктыДокументации = [
+        "Описание",
+        "Ещё что-то",
+    ];
 };
 
 

пример|sample.череда

@@ -5,5 +5,10 @@
     установить макет UIK
     очистить макет UIK от заглушек
     задать заголовок
-    задать раздел меню документации
-    задать раздел меню примеров
+    задать пункты раздела меню документации
+    создать раздел меню документации
+    отслеживать выбор пункта меню документации
+    выбрать первый пункт меню документации
+выбрали пункт меню документации
+    отобразить выбор пункта меню документации
+    отобразить содержимое выбранного пункта меню документации