|
Поговорим о...
|
|
| AleXStam | Дата: Пятница, 2025-06-20, 16:26 | Сообщение # 61 |
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Пятница, 2025-06-20, 16:32 | Сообщение # 62 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="error-proof-tree">
{{ $level := .level | default 1 }}
<ul class="tree-ul level-{{ $level }}">
{{ range .nodes }}
<li class="tree-li {{ if .children }}has-children{{ end }} {{ .state | default "closed" }}">
<div class="tree-line">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-dot">•</span>
{{ end }}
<span class="tree-name">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>
</div>
<style>
.error-proof-tree {
font-family: system-ui, sans-serif;
font-size: 14px;
line-height: 1.4;
}
.tree-ul {
list-style: none;
padding-left: 20px;
margin: 0;
}
.tree-li {
margin: 2px 0;
}
.tree-line {
display: flex;
align-items: center;
cursor: pointer;
padding: 2px 0;
}
.tree-arrow, .tree-dot {
width: 16px;
margin-right: 4px;
text-align: center;
}
.tree-arrow {
transition: transform 0.2s;
}
.tree-li.open > .tree-line > .tree-arrow {
transform: rotate(90deg);
}
.tree-li > .tree-ul {
display: none;
}
.tree-li.open > .tree-ul {
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Инициализация состояний
document.querySelectorAll('.tree-li.has-children').forEach(item => {
const children = item.querySelector('.tree-ul');
if (item.classList.contains('open')) {
children.style.display = 'block';
} else {
children.style.display = 'none';
}
});
// Обработчик кликов
document.addEventListener('click', function(e) {
const line = e.target.closest('.tree-line');
if (!line) return;
const item = line.parentElement;
if (!item.classList.contains('has-children')) return;
const children = item.querySelector('.tree-ul');
const isOpen = children.style.display === 'block';
children.style.display = isOpen ? 'none' : 'block';
item.classList.toggle('open', !isOpen);
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Пятница, 2025-06-20, 16:33 | Сообщение # 63 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
| AleXStam | Дата: Пятница, 2025-06-20, 16:35 | Сообщение # 64 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="final-tree-solution">
<ul class="tree-root">
{{ range .nodes }}
{{ partial "tree-node" (dict "node" . "level" 1) }}
{{ end }}
</ul>
</div>
<style>
.final-tree-solution {
font-family: sans-serif;
font-size: 14px;
line-height: 1.4;
}
.tree-root {
list-style: none;
padding-left: 0;
margin: 0;
}
.tree-node > ul {
display: none;
padding-left: 20px;
}
.tree-node.open > ul {
display: block;
}
.tree-toggle {
cursor: pointer;
margin-right: 5px;
display: inline-block;
width: 15px;
}
.tree-content {
display: flex;
align-items: center;
padding: 2px 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Инициализация состояний
document.querySelectorAll('.tree-node').forEach(node => {
const children = node.querySelector('ul');
if (children) {
children.style.display = node.classList.contains('open') ? 'block' : 'none';
}
});
// Обработчик кликов
document.addEventListener('click', function(e) {
const toggle = e.target.closest('.tree-toggle');
if (!toggle) return;
const node = toggle.closest('.tree-node');
const children = node.querySelector('ul');
if (!children) return;
const isOpen = children.style.display === 'block';
children.style.display = isOpen ? 'none' : 'block';
node.classList.toggle('open', !isOpen);
});
});
</script>
|
|
|
| |
| AleXStam | Дата: Пятница, 2025-06-20, 16:35 | Сообщение # 65 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <li class="tree-node {{ if .node.children }}has-children{{ end }} {{ .node.state | default "closed" }}">
<div class="tree-content">
{{ if .node.children }}
<span class="tree-toggle">›</span>
{{ else }}
<span class="tree-toggle">•</span>
{{ end }}
<span class="tree-label">{{ .node.name }}</span>
</div>
{{ if .node.children }}
<ul>
{{ range .node.children }}
{{ partial "tree-node" (dict "node" . "level" (add $.level 1)) }}
{{ end }}
</ul>
{{ end }}
</li>
|
|
|
| |
| AleXStam | Дата: Пятница, 2025-06-20, 16:36 | Сообщение # 66 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 126
Награды: 1
Репутация: 10003
Статус: Оффлайн
| <div class="tree-container" style="padding: 12px; border: 1px solid #eee; border-radius: 8px;">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
|
|
|
| |
