@@ -18,7 +18,7 @@ | |||||
#${содержимое} | #${содержимое} | ||||
{ | { | ||||
width: calc(100% - 320px); | width: calc(100% - 320px); | ||||
height: calc(100% - 80px); | |||||
height: calc(100% - 100px); | |||||
position: fixed; | position: fixed; | ||||
top: 80px; | top: 80px; | ||||
left: 320px; | left: 320px; | ||||
@@ -16,20 +16,18 @@ | |||||
<div class="tm-navbar uk-navbar-container" uk-sticky> | <div class="tm-navbar uk-navbar-container" uk-sticky> | ||||
<div class="uk-container uk-container-expand"> | <div class="uk-container uk-container-expand"> | ||||
<nav class="uk-navbar"> | <nav class="uk-navbar"> | ||||
<div id="${заголовок-лево}" class="uk-navbar-left"> | |||||
<div id="${заголовокЛево}" class="uk-navbar-left"> | |||||
<!-- ПРИМЕР_НАЧАЛО --> | <!-- ПРИМЕР_НАЧАЛО --> | ||||
<!-- SAMPLE_BEGIN --> | <!-- SAMPLE_BEGIN --> | ||||
<p class="uk-navbar-item uk-logo"> | |||||
<span class="uk-navbar-item uk-logo"> | |||||
Макет UIK | UIK template | Макет UIK | UIK template | ||||
</p> | |||||
</span> | |||||
<!-- ПРИМЕР_КОНЕЦ --> | <!-- ПРИМЕР_КОНЕЦ --> | ||||
<!-- SAMPLE_END --> | <!-- SAMPLE_END --> | ||||
</div> | </div> | ||||
<div id="${заголовок-центр}" class="uk-navbar-center"> | |||||
</div> | |||||
<div id="${заголовок-право}" class="uk-navbar-right"> | |||||
<div id="${заголовокПраво}" class="uk-navbar-right"> | |||||
<!-- ПРИМЕР_НАЧАЛО --> | <!-- ПРИМЕР_НАЧАЛО --> | ||||
<!-- SAMPLE_BEGIN --> | <!-- SAMPLE_BEGIN --> | ||||
@@ -46,23 +44,31 @@ | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<div class="tm-sidebar-left"> | |||||
<ul id="${меню}" class="uk-nav uk-nav-default tm-nav"> | |||||
<!-- ПРИМЕР_НАЧАЛО --> | |||||
<!-- SAMPLE_BEGIN --> | |||||
<div id="${меню}" class="tm-sidebar-left"> | |||||
<!-- ПРИМЕР_НАЧАЛО --> | |||||
<!-- SAMPLE_BEGIN --> | |||||
<ul class="uk-nav uk-nav-default tm-nav"> | |||||
<li class="uk-nav-header">📦 Зав | Mgr</li> | <li class="uk-nav-header">📦 Зав | Mgr</li> | ||||
<li class="uk-active"><a>/загрузка|load.js</a></li> | <li class="uk-active"><a>/загрузка|load.js</a></li> | ||||
<li><a>/загрузка|load.череда</a></li> | <li><a>/загрузка|load.череда</a></li> | ||||
<li><a>/основа|main.js</a></li> | <li><a>/основа|main.js</a></li> | ||||
<li><a>/основа|main.череда</a></li> | <li><a>/основа|main.череда</a></li> | ||||
<!-- ПРИМЕР_КОНЕЦ --> | |||||
<!-- SAMPLE_END --> | |||||
</ul> | </ul> | ||||
<!-- ПРИМЕР_КОНЕЦ --> | |||||
<!-- SAMPLE_END --> | |||||
</div> | </div> | ||||
<div id="${содержимое}"></div> | |||||
<div id="${содержимое}"> | |||||
<!-- ПРИМЕР_НАЧАЛО --> | |||||
<!-- SAMPLE_BEGIN --> | |||||
<p>Пример содержимого</p> | |||||
<!-- ПРИМЕР_КОНЕЦ --> | |||||
<!-- SAMPLE_END --> | |||||
</div> | |||||
<!-- МАКЕТ_КОНЕЦ --> | <!-- МАКЕТ_КОНЕЦ --> | ||||
<!-- TEMPLATE_END --> | <!-- TEMPLATE_END --> | ||||
@@ -1,5 +1,123 @@ | |||||
const ИМЯ = "UIK"; | |||||
// // // // | |||||
ЗадатьРазделМенюПримеров = мир => | |||||
{ | |||||
мир.макет.константы.примеры = "примеры"; | |||||
$(`#${мир.макет.константы.меню}`).append(` | |||||
<ul id="${мир.макет.константы.примеры}" class="uk-nav uk-nav-default tm-nav"> | |||||
<li class="uk-nav-header">Примеры</li> | |||||
</ul> | |||||
`); | |||||
}; | |||||
// // // // | |||||
ЗадатьРазделМенюДокументации = мир => | |||||
{ | |||||
мир.макет.константы.документация = "документация"; | |||||
$(`#${мир.макет.константы.меню}`).append(` | |||||
<ul id="${мир.макет.константы.документация}" class="uk-nav uk-nav-default tm-nav"> | |||||
<li class="uk-nav-header">Документация</li> | |||||
</ul> | |||||
`); | |||||
}; | |||||
// // // // | |||||
ЗадатьЗаголовок = мир => | |||||
{ | |||||
$(`#${мир.макет.константы.заголовокЛево}`).html(` | |||||
<span class="uk-navbar-item uk-logo">UIK</span> | |||||
`); | |||||
}; | |||||
// // // // | |||||
ОчиститьМакетUIKОтЗаглушек = мир => | |||||
{ | |||||
$(`#${мир.макет.константы.заголовокЛево}`).text(""); | |||||
$(`#${мир.макет.константы.заголовокЦентр}`).text(""); | |||||
$(`#${мир.макет.константы.заголовокПраво}`).text(""); | |||||
$(`#${мир.макет.константы.меню}`).text(""); | |||||
$(`#${мир.макет.константы.содержимое}`).text(""); | |||||
}; | |||||
// // // // | |||||
УстановитьМакетUIK = мир => | |||||
{ | |||||
document.body.innerHTML = мир.макет.структура; | |||||
var вид = document.createElement("style"); | |||||
document.head.appendChild(вид); | |||||
вид.innerHTML = мир.макет.вид; | |||||
}; | |||||
// // // // | |||||
НастроитьПримерМакетаUIK = мир => | |||||
{ | |||||
var название = "пример"; | |||||
var html = мир.макет.структура; | |||||
var css = мир.макет.вид; | |||||
// Вырезаем тело из макета. | |||||
var начало = html.indexOf("<!-- МАКЕТ_НАЧАЛО -->"); | |||||
var конец = html.indexOf("<!-- МАКЕТ_КОНЕЦ -->"); | |||||
html = html.substring(начало, конец); | |||||
мир.макет.константы = { | |||||
"заголовокЛево": `${название}-заголовокЛево`, | |||||
"заголовокЦентр": `${название}-заголовокЦентр`, | |||||
"заголовокПраво": `${название}-заголовокПраво`, | |||||
"меню": `${название}-меню`, | |||||
"содержимое": `${название}-содержимое`, | |||||
}; | |||||
// Заменяем константы в макете. | |||||
for (var константа in мир.макет.константы) | |||||
{ | |||||
var старое = "${" + константа + "}"; | |||||
var новое = мир.макет.константы[константа]; | |||||
html = html.replace(старое, новое); | |||||
css = css.replace(старое, новое); | |||||
} | |||||
мир.макет.структура = html; | |||||
мир.макет.вид = css; | |||||
}; | |||||
// // // // | |||||
ЗагрузитьМакетUIK = мир => | |||||
{ | |||||
var м = мир.модули.модульПоИмени(ИМЯ); | |||||
мир.макет = { | |||||
"структура": м.содержимое["/макет|template.html"], | |||||
"вид": м.содержимое["/макет|template.css"], | |||||
}; | |||||
}; | |||||
// // // // | // // // // | ||||
@@ -1,2 +1,9 @@ | |||||
пуск примера | пуск примера | ||||
вывести приветствие от UIK | вывести приветствие от UIK | ||||
загрузить макет UIK | |||||
настроить пример макета UIK | |||||
установить макет UIK | |||||
очистить макет UIK от заглушек | |||||
задать заголовок | |||||
задать раздел меню документации | |||||
задать раздел меню примеров |