Форум

Отзывы и предолжения к софту от AleXStam
  • Страница 3 из 4
  • «
  • 1
  • 2
  • 3
  • 4
  • »
Форум » Флуд » Общение » Поговорим о...
Поговорим о...
AleXStamДата: Четверг, Вчера, 15:11 | Сообщение # 31
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
{{ $level := .level | default 1 }}
<ul class="perfect-tree" data-level="{{ $level }}">
{{ range $index, $node := .nodes }}
<li class="tree-item {{ if $node.children }}has-children{{ end }} {{ $node.state | default 'closed' }} {{ if eq $index 0 }}first-item{{ end }}">
<div class="tree-content">
{{ if $node.children }}
<span class="tree-arrow">▶</span>
{{ else }}
<span class="tree-dot">•</span>
{{ end }}
<span class="tree-label">{{ $node.name }}</span>
</div>
{{ if $node.children }}
{{ partial "tree" (dict "nodes" $node.children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>

<style>
/* Полный сброс стилей для изоляции */
.perfect-tree, .perfect-tree * {
all: unset;
box-sizing: border-box;
}

.perfect-tree {
list-style: none;
padding-left: 24px;
margin: 0;
position: relative;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #333;
}

.tree-item {
position: relative;
padding-left: 4px;
margin: 0;
}

.tree-content {
display: flex;
align-items: center;
padding: 4px 0;
cursor: pointer;
position: relative;
min-height: 24px;
}

/* Стрелки и точки */
.tree-arrow, .tree-dot {
position: absolute;
left: -18px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #666;
background-color: white;
z-index: 2;
pointer-events: none;
}

.tree-dot {
color: #999;
font-size: 16px;
left: -17px;
}

.tree-label {
padding-left: 6px;
position: relative;
z-index: 1;
}

/* Вертикальные линии */
.tree-item:not(.first-item)::before {
content: "";
position: absolute;
top: -16px;
bottom: 16px;
left: 12px;
width: 1px;
background: #e0e0e0;
}

/* Горизонтальные линии */
.tree-item::after {
content: "";
position: absolute;
top: 16px;
left: 12px;
width: 6px;
height: 1px;
background: #e0e0e0;
}

/* Убираем лишние линии */
.tree-item:last-child::before {
bottom: 50%;
}

.tree-item.first-item::before {
display: none;
}

/* Состояния */
.tree-item.open > .tree-content > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}

.tree-item > ul {
display: none;
}

.tree-item.open > ul {
display: block;
}

/* Курсор при наведении */
.tree-content:hover {
color: #0066cc;
cursor: pointer;
}

.tree-content:hover .tree-arrow,
.tree-content:hover .tree-dot {
color: #0066cc;
}
</style>

<script>
(function() {
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.perfect-tree').forEach(function(tree) {
tree.addEventListener('click', function(e) {
const content = e.target.closest('.tree-content');
if (!content) return;

const item = content.parentElement;
if (item.classList.contains('has-children')) {
e.stopPropagation();
item.classList.toggle('open');
item.classList.toggle('closed');
}
});
});
});
})();
</script>
AleXStamДата: Четверг, Вчера, 15:11 | Сообщение # 32
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
<div class="tree-viewer" style="
all: initial;
display: block;
padding: 16px;
background: white;
border-radius: 8px;
border: 1px solid #f0f0f0;
margin: 12px 0;
overflow-x: auto;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
AleXStamДата: Четверг, Вчера, 15:19 | Сообщение # 33
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
{{ $level := .level | default 1 }}
<ul class="minimal-tree" data-level="{{ $level }}">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default 'closed' }}">
<div class="tree-line">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-bullet">•</span>
{{ end }}
<span class="tree-text">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>

<style>
/* Минимальные стили */
.minimal-tree {
list-style: none;
padding-left: 20px;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
line-height: 1.4;
color: #333;
}

.tree-item {
margin: 1px 0;
position: relative;
}

.tree-line {
display: flex;
align-items: center;
padding: 2px 0;
cursor: pointer;
min-height: 20px;
}

/* Аккуратные стрелки */
.tree-arrow {
width: 14px;
height: 14px;
margin-right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #666;
transition: transform 0.2s;
transform-origin: center;
}

.tree-bullet {
width: 14px;
height: 14px;
margin-right: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #999;
}

.tree-text {
flex: 1;
}

/* Состояния */
.tree-item.open > .tree-line > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}

.tree-item > ul {
display: none;
padding-left: 18px;
}

.tree-item.open > ul {
display: block;
}

/* Эффекты при наведении */
.tree-line:hover {
color: #0066cc;
}

.tree-line:hover .tree-arrow,
.tree-line:hover .tree-bullet {
color: inherit;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.tree-line').forEach(function(line) {
line.addEventListener('click', function(e) {
const item = this.parentElement;
if (item.classList.contains('has-children')) {
e.stopPropagation();
item.classList.toggle('open');
item.classList.toggle('closed');
}
});
});
});
</script>
AleXStamДата: Четверг, Вчера, 15:19 | Сообщение # 34
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
<div class="tree-container" style="
padding: 12px 15px;
background: white;
border-radius: 6px;
border: 1px solid #f0f0f0;
margin: 8px 0;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
ГостьДата: Четверг, Вчера, 15:29 | Сообщение # 35
Гость
Группа: Гости





tree:
- name: "Литология"
state: "open"
children:
- name: "Стратиграфические подразделения"
children:
- name: "Элемент 1"
- name: "Элемент 2"
children:
- name: "Подэлемент a"
- name: "Подэлемент b"
- name: "Нестратиграфические подразделения"
state: "open"
children:
- name: "Элемент X"
- name: "Элемент Y"
- name: "Вторичные изменения"
state: "closed"
children:
- name: "Элемент X"
- name: "Элемент Y"
---
AleXStamДата: Четверг, Вчера, 15:35 | Сообщение # 36
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
{{ $level := .level | default 1 }}
<ul class="clean-tree">
{{ range .nodes }}
<li class="tree-node {{ if .children }}has-children{{ end }} {{ .state | default 'closed' }}">
<div class="tree-line">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ end }}
<span class="tree-text">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>

<style>
.clean-tree {
list-style: none;
padding-left: 20px;
margin: 0;
font-size: 14px;
line-height: 1.4;
}
.tree-node {
margin: 1px 0;
}
.tree-line {
display: flex;
align-items: center;
padding: 2px 0;
cursor: pointer;
}
.tree-arrow {
margin-right: 5px;
transition: transform 0.2s;
}
.tree-node.open > .tree-line > .tree-arrow {
transform: rotate(90deg);
}
.tree-node > ul {
display: none;
}
.tree-node.open > ul {
display: block;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.tree-line').forEach(el => {
el.addEventListener('click', function() {
this.parentElement.classList.toggle('open');
});
});
});
</script>
ГостьДата: Четверг, Вчера, 15:56 | Сообщение # 37
Гость
Группа: Гости





{{<filetree/container>}}
{{<filetree/folder name="Литология">}}
{{<filetree/folder name="Стратиграфические подразделения">}}
{{<filetree/folder name="Осадочные породы" state="closed">}}
{{<filetree/folder name="Кремнистые породы" state="closed">}}
{{<filetree/file name="Известково-силикатные породы">}}
{{<filetree/file name="Силицит">}}
{{<filetree/file name="Яшма">}}
{{<filetree/file name="Кремень">}}
{{</filetree/folder>}}
{{<filetree/folder name="Обломочные и глинистые породы" state="closed">}}
{{<filetree/file name="Ксенолит">}}
{{<filetree/folder name="Сцементированные" state="closed">}}
{{<filetree/file name="Коптогенные породы">}}
{{<filetree/file name="Терригенная порода">}}
{{<filetree/file name="Аргиллиты">}}
{{<filetree/file name="Алевролиты">}}
{{<filetree/file name="Дресвяник (собирательное понятие)">}}
{{<filetree/file name="Песчаники">}}
{{<filetree/file name="Ритмиты (Переслаивание)">}}
{{<filetree/file name="Гравелиты">}}
{{<filetree/file name="Конгломерат">}}
{{<filetree/file name="Конглобрекчия">}}
{{<filetree/file name="Брекчия">}}
{{<filetree/file name="Дьяхтарские">}}
{{</filetree/folder>}}
{{<filetree/folder name="Рыхлые" state="closed">}}
{{<filetree/file name="Глины">}}
{{<filetree/file name="Алевриты">}}
{{<filetree/file name="Глина-аргиллит-щебнистые">}}
{{<filetree/file name="Пески">}}
{{<filetree/file name="Окатанные">}}
{{<filetree/file name="Не окатанные">}}
{{</filetree/folder>}}
{{</filetree/folder>}}
{{<filetree/folder name="Карбонатные породы" state="closed">}}
{{<filetree/file name="Сидеритолит">}}
{{<filetree/file name="Карбонатные (Обобщенное понятие)">}}
{{<filetree/file name="Известняки">}}
{{<filetree/file name="Доломиты">}}
{{<filetree/file name="Мергель">}}
{{</filetree/folder>}}
{{<filetree/folder name="Сульфатно-галогенные" state="closed">}}
{{<filetree/file name="Ангидрит">}}
{{<filetree/file name="Гипс">}}
{{<filetree/file name="Галит">}}
{{</filetree/folder>}}
{{<filetree/folder name="Каустобиолиты" state="closed">}}
{{<filetree/file name="Уголь">}}
{{</filetree/folder>}}
{{<filetree/folder name="Бокситы" state="closed">}}
{{<filetree/file name="Бокситы">}}
{{<filetree/file name="Аллиты">}}
{{</filetree/folder>}}
{{<filetree/folder name="Железистые" state="closed">}}
{{<filetree/file name="Гематит">}}
{{<filetree/file name="Лимонит">}}
{{</filetree/folder>}}
{{</filetree/folder>}}
{{<filetree/folder name="Вулканокластические" state="closed">}}
{{<filetree/folder name="Эксплозивно-обломочные" state="closed">}}
{{<filetree/file name="Туфобрекчия">}}
{{<filetree/file name="Эксплозивные брекчии">}}
{{<filetree/file name="Туф">}}
{{<filetree/file name="Эруптивные брекчии">}}
{{</filetree/folder>}}
{{</filetree/folder>}}
{{<filetree/folder name="Вулканно-осадочные" state="closed">}}
{{<filetree/folder name="Осадочно-пирокластические" state="closed">}}
{{<filetree/file name="Туфопесчаник">}}
{{<filetree/file name="Туфоалевролит">}}
{{<filetree/file name="Туфоаргиллит">}}
{{<filetree/file name="Туффизит">}}
{{<filetree/file name="Туффит">}}
{{</filetree/folder>}}
{{</filetree/folder>}}
{{</filetree/folder>}}
{{<filetree/folder name="Нестратиграфические подразделения">}}
{{<filetree/folder name="Интрузивные образования" state="closed">}}
{{<filetree/file name="Кимберлиты">}}
{{<filetree/file name="Ультрамафиты (гипербазиты)">}}
{{<filetree/file name="Мелилитит">}}
{{<filetree/file name="Мелилитолит">}}
{{<filetree/file name="Ийолит">}}
{{<filetree/file name="Лампрофиры">}}
{{<filetree/file name="Мончикит">}}
{{<filetree/file name="Альнеит">}}
{{<filetree/file name="Лампроит">}}
{{<filetree/file name="Карбонатит">}}
{{<filetree/file name="Диорит">}}
{{<filetree/file name="Пикрит">}}
{{<filetree/file name="Базальт">}}
{{<filetree/file name="Долериты">}}
{{<filetree/file name="Габброиды">}}
{{<filetree/file name="Граниты">}}
{{<filetree/file name="Пегматиты">}}
{{<filetree/file name="Аплины">}}
{{<filetree/file name="Перкниты">}}
{{<filetree/file name="Сиениты">}}
{{</filetree/folder>}}
{{</filetree/folder>}}
{{<filetree/folder name="Вторичные изменения">}}
{{<filetree/folder name="Коры выветривания" state="closed">}}
{{<filetree/file name="Коры выветривания">}}
{{<filetree/file name="Коры выветривания по кимберлитам">}}
{{<filetree/file name="Коры выветривания по долеритам">}}
{{<filetree/file name="Глина каолинитовая">}}
{{<filetree/file name="Глина гидрослюдисто-монмориллонитовая">}}
{{<filetree/file name="Глина маршаллитовая">}}
{{<filetree/file name="Кора выветривания по карбонатным породам">}}
{{<filetree/file name="Выветрелые карбонатные породы">}}
{{</filetree/folder>}}
{{<filetree/folder name="Метаморфические" state="closed">}}
{{<filetree/file name="Роговик">}}
{{<filetree/file name="Скарны">}}
{{<filetree/file name="Породы зоны дробления">}}
{{<filetree/file name="Эруптивные агломератовые брекчии">}}
{{<filetree/file name="Порода ороговикованная">}}
{{<filetree/file name="Гранито-гнейс">}}
{{<filetree/file name="Гнейс">}}
{{<filetree/file name="Плагиогнейс">}}
{{<filetree/file name="Гнейс графитсодержащий">}}
{{<filetree/file name="Мигматит">}}
{{<filetree/file name="Гранулит">}}
{{<filetree/file name="Кристаллический сланец">}}
{{<filetree/file name="Диафторитовый гнейс">}}
{{<filetree/file name="Диафторитовый сланец">}}
{{<filetree/file name="Диафторитовый амфиболит">}}
{{<filetree/file name="Диафторит">}}
{{<filetree/file name="Катаклазит">}}
{{<filetree/file name="Милонит">}}
{{<filetree/file name="Амфиболит">}}
{{<filetree/file name="Кальцифир">}}
{{<filetree/file name="Мрамор">}}
{{<filetree/file name="Кварцит">}}
{{</filetree/folder>}}
{{<filetree/folder name="Метасоматиты" state="closed">}}
{{<filetree/file name="Метасамотиты">}}
{{<filetree/file name="Хлорит">}}
{{<filetree/file name="Цеолит">}}
{{<filetree/file name="Кварц">}}
{{<filetree/file name="Кальцит">}}
{{<filetree/file name="Вторичный кварц">}}
{{<filetree/file name="Серпентинит">}}
{{<filetree/file name="Пропилит">}}
{{<filetree/file name="Калишпатит">}}
{{<filetree/file name="Гумбеит">}}
{{<filetree/file name="Адулярит">}}
{{<filetree/file name="Альбитит">}}
{{<filetree/file name="Фельдшпатит">}}
{{<filetree/file name="Аргиллизит">}}
{{<filetree/file name="Березит">}}
{{<filetree/file name="Лиственит">}}
{{<filetree/file name="Биотитит">}}
{{<filetree/file name="Слюдит">}}
{{</filetree/folder>}}
{{<filetree/folder name="Эпигенез" state="closed">}}
{{<filetree/file name="Порода окремненная">}}
{{<filetree/file name="Порода пиритизированная">}}
{{<filetree/file name="Порода ожелезненная">}}
{{<filetree/file name="Порода битуминозная">}}
{{</filetree/folder>}}
{{<filetree/folder name="Карстовые образования" state="closed">}}
{{<filetree/file name="Дезинтегрированные породы с пустотами">}}
{{<filetree/file name="Карстовые образования в известняках">}}
{{</filetree/folder>}}
{{</filetree/folder>}}
{{</filetree/folder>}}
{{</filetree/container>}}
AleXStamДата: Четверг, Вчера, 16:05 | Сообщение # 38
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
111
Прикрепления: ooooo.txt (8.2 Kb)
AleXStamДата: Четверг, Вчера, 16:12 | Сообщение # 39
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
<div class="tree-search-container">
<input type="text" class="tree-search-input" placeholder="Поиск по литологии..." aria-label="Поиск по списку">
<div class="tree-search-results"></div>
</div>

<ul class="minimal-tree" id="tree-container">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default 'closed' }}" data-search-text="{{ lower .name }}">
<div class="tree-line">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-bullet">•</span>
{{ end }}
<span class="tree-text">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add .level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>

<style>
/* Стили поиска */
.tree-search-container {
margin-bottom: 15px;
position: relative;
}

.tree-search-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}

.tree-search-input:focus {
outline: none;
border-color: #0066cc;
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
}

/* Подсветка результатов */
.tree-item.highlighted > .tree-line {
background-color: #fff8e1;
}

.tree-item.match > .tree-line {
font-weight: bold;
color: #0066cc;
}

.tree-item.match > .tree-line .tree-text {
background-color: #ffeb3b;
padding: 0 2px;
border-radius: 2px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.querySelector('.tree-search-input');
const treeContainer = document.getElementById('tree-container');
const allItems = treeContainer.querySelectorAll('.tree-item');

// Функция поиска
function handleSearch() {
const searchTerm = searchInput.value.trim().toLowerCase();

if (searchTerm === '') {
allItems.forEach(item => {
item.classList.remove('match', 'highlighted');
item.style.display = '';
});
return;
}

allItems.forEach(item => {
const text = item.getAttribute('data-search-text');
const isMatch = text.includes(searchTerm);

if (isMatch) {
item.classList.add('match');
item.style.display = '';

// Показываем всех родителей
let parent = item.parentElement.closest('.tree-item');
while (parent) {
parent.classList.add('highlighted');
parent.style.display = '';
parent = parent.parentElement.closest('.tree-item');
}
} else {
item.classList.remove('match', 'highlighted');
item.style.display = 'none';
}
});
}

// Обработчики событий
searchInput.addEventListener('input', handleSearch);
searchInput.addEventListener('keyup', function(e) {
if (e.key === 'Escape') {
searchInput.value = '';
handleSearch();
}
});

// Клик по элементам дерева
document.querySelectorAll('.tree-line').forEach(el => {
el.addEventListener('click', function() {
this.parentElement.classList.toggle('open');
});
});
});
</script>
AleXStamДата: Четверг, Вчера, 16:12 | Сообщение # 40
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
<div class="tree-viewer">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>

<style>
.tree-viewer {
padding: 15px;
background: white;
border-radius: 6px;
border: 1px solid #f0f0f0;
margin: 20px 0;
}
</style>
AleXStamДата: Четверг, Вчера, 16:20 | Сообщение # 41
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
{{- $nodes := .nodes | default slice -}}
{{- $level := .level | default 1 -}}

<div class="tree-container">
<input type="text" class="tree-search" placeholder="Поиск по литологии..." aria-label="Поиск">

<ul class="tree-list" data-level="{{ $level }}">
{{- range $nodes -}}
{{- $hasChildren := cond (isset . "children") (gt (len .children) 0 false -}}
<li class="tree-node {{ if $hasChildren }}has-children{{ end }} {{ .state | default "closed" }}"
data-search="{{ .name | lower }}">
<div class="tree-item">
{{- if $hasChildren -}}
<span class="tree-toggle">›</span>
{{- else -}}
<span class="tree-bullet">•</span>
{{- end -}}
<span class="tree-label">{{ .name }}</span>
</div>

{{- if $hasChildren -}}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{- end -}}
</li>
{{- end -}}
</ul>
</div>

<style>
.tree-container {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin: 1rem 0;
}

.tree-search {
width: 100%;
padding: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
}

.tree-list {
list-style: none;
padding-left: 1.5rem;
margin: 0;
}

.tree-node {
margin: 0.2rem 0;
position: relative;
}

.tree-item {
display: flex;
align-items: center;
padding: 0.2rem 0;
cursor: pointer;
}

.tree-toggle, .tree-bullet {
margin-right: 0.5rem;
font-size: 1.1em;
}

.tree-toggle {
transition: transform 0.2s;
}

.tree-node.open > .tree-item > .tree-toggle {
transform: rotate(90deg);
}

.tree-node > .tree-list {
display: none;
}

.tree-node.open > .tree-list {
display: block;
}

/* Стили поиска */
.tree-node.hidden {
display: none;
}

.tree-node.match .tree-label {
background-color: #ffeb3b;
padding: 0 2px;
border-radius: 2px;
}

.tree-node.highlighted > .tree-item {
background-color: #fff8e1;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
const container = document.querySelector('.tree-container');
const searchInput = container.querySelector('.tree-search');
const allNodes = container.querySelectorAll('.tree-node');

// Обработчик клика по узлам
container.addEventListener('click', function(e) {
const item = e.target.closest('.tree-item');
if (!item) return;

const node = item.parentElement;
if (node.classList.contains('has-children')) {
node.classList.toggle('open');
}
});

// Функция поиска
searchInput.addEventListener('input', function() {
const term = this.value.trim().toLowerCase();

allNodes.forEach(node => {
const text = node.getAttribute('data-search');
const isMatch = term === '' || text.includes(term);

node.classList.toggle('hidden', !isMatch);
node.classList.toggle('match', isMatch && term !== '');

if (isMatch) {
// Показываем всех родителей для найденных элементов
let parent = node.parentElement.closest('.tree-node');
while (parent) {
parent.classList.remove('hidden');
parent.classList.add('highlighted');
parent = parent.parentElement.closest('.tree-node');
}
} else {
node.classList.remove('highlighted');
}
});
});
});
</script>
AleXStamДата: Четверг, Вчера, 16:23 | Сообщение # 42
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
{{- if isset .Page.Params "tree" -}}
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
{{- else -}}
{{ errorf "Параметр 'tree' не найден в front matter страницы %s" .Page.Path }}
{{- end -}}
AleXStamДата: Пятница, Сегодня, 09:02 | Сообщение # 43
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
{{ $level := .level | default 1 }}
<ul class="deep-tree level-{{ $level }}">
{{ range .nodes }}
<li class="tree-item {{ if .children }}has-children{{ end }} {{ .state | default 'closed' }}">
<div class="tree-line" data-level="{{ $level }}">
{{ if .children }}
<span class="tree-arrow">›</span>
{{ else }}
<span class="tree-bullet">•</span>
{{ end }}
<span class="tree-text">{{ .name }}</span>
</div>
{{ if .children }}
{{ partial "tree" (dict "nodes" .children "level" (add $level 1)) }}
{{ end }}
</li>
{{ end }}
</ul>

<style>
.deep-tree {
list-style: none;
padding-left: 20px;
margin: 0;
}

.tree-item {
margin: 1px 0;
position: relative;
}

.tree-line {
display: flex;
align-items: center;
padding: 2px 0;
cursor: pointer;
min-height: 22px;
}

.tree-arrow, .tree-bullet {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 4px;
flex-shrink: 0;
}

.tree-arrow {
font-size: 14px;
color: #666;
transition: transform 0.2s;
}

.tree-bullet {
font-size: 16px;
color: #999;
}

.tree-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.tree-item.open > .tree-line > .tree-arrow {
transform: rotate(90deg);
color: #0066cc;
}

.tree-item > ul {
display: none;
}

.tree-item.open > ul {
display: block;
}
</style>
AleXStamДата: Пятница, Сегодня, 09:02 | Сообщение # 44
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
<script>
(function() {
// Инициализация после загрузки DOM
document.addEventListener('DOMContentLoaded', function() {
// Функция для переключения состояния
function toggleTreeItem(item) {
if (item.classList.contains('has-children')) {
item.classList.toggle('open');
// Сохраняем состояние в localStorage
const path = getItemPath(item);
localStorage.setItem(`tree-state-${path}`, item.classList.contains('open') ? 'open' : 'closed');
}
}

// Получаем уникальный путь к элементу
function getItemPath(item) {
let path = [];
let current = item;
while (current) {
const index = Array.from(current.parentNode.children).indexOf(current);
path.unshift(index);
current = current.parentNode.closest('.tree-item');
}
return path.join('-');
}

// Восстанавливаем состояния из localStorage
function restoreStates() {
document.querySelectorAll('.tree-item').forEach(item => {
const path = getItemPath(item);
const state = localStorage.getItem(`tree-state-${path}`);
if (state === 'open') {
item.classList.add('open');
// Показываем вложенные элементы
const ul = item.querySelector('ul');
if (ul) ul.style.display = 'block';
}
});
}

// Делегирование событий
document.querySelectorAll('.deep-tree').forEach(tree => {
tree.addEventListener('click', function(e) {
const line = e.target.closest('.tree-line');
if (line) {
const item = line.parentElement;
toggleTreeItem(item);
}
});
});

// Восстанавливаем сохраненные состояния
restoreStates();
});
})();
</script>
AleXStamДата: Пятница, Сегодня, 09:02 | Сообщение # 45
AleXStam
Генералиссимус
Группа: Администраторы
Сообщений: 119
Награды: 1
Репутация: 10003
Статус: Оффлайн
<div class="tree-container" style="
padding: 12px;
background: white;
border-radius: 6px;
border: 1px solid #eee;
max-width: 100%;
overflow-x: auto;
">
{{ partial "tree" (dict "nodes" .Page.Params.tree) }}
</div>
Форум » Флуд » Общение » Поговорим о...
  • Страница 3 из 4
  • «
  • 1
  • 2
  • 3
  • 4
  • »
Поиск:
Новый ответ
Имя:
Текст сообщения:


Яндекс.Метрика