219 lines
7.5 KiB
Django/Jinja
219 lines
7.5 KiB
Django/Jinja
{% extends 'base.jinja' %}
|
|
|
|
{% set page_title = document.get_tag_value('title') or document.get_tag_value('id') -%}
|
|
{% set page_summary = document.get_tag_value('summary', '') %}
|
|
|
|
{% block page_scripts %}
|
|
<script>
|
|
var newTabCounter = 0;
|
|
|
|
function selectTab(name) {
|
|
let tab = document.getElementById("tab-" + name);
|
|
if (tab)
|
|
{
|
|
// Unselect all tabs and content
|
|
Array.from(document.getElementsByClassName("tab-content"))
|
|
.forEach(e => e.classList.remove("tab-down"));
|
|
Array.from(document.getElementsByClassName("tab-page"))
|
|
.forEach(e => e.classList.remove("tab-page-selected"));
|
|
// Select the new tab and content
|
|
tab.classList.add("tab-down");
|
|
let content = document.getElementById(name + "-page");
|
|
content.classList.add("tab-page-selected");
|
|
}
|
|
}
|
|
|
|
function addTab() {
|
|
let newTabName = "newtab" + ++newTabCounter;
|
|
let tabsDiv = document.querySelector("#tabs");
|
|
let wrapper = document.querySelector("#wrapper");
|
|
let newTabTab = document.querySelector("#newtab");
|
|
|
|
// Add tab div
|
|
let newTab = document.createElement("div");
|
|
newTab.id = "tab-" + newTabName;
|
|
newTab.classList = "tab tab-content";
|
|
newTab.contenteditable = true;
|
|
newTab.innerText = newTabName;
|
|
newTab.onclick = function() { selectTab(newTabName); };
|
|
tabsDiv.insertBefore(newTab, newTabTab);
|
|
|
|
// Add page div
|
|
let newPage = document.createElement("div");
|
|
newPage.id = newTabName + "-page";
|
|
newPage.classList = "tag-page";
|
|
let newPageTable = document.createElement("table");
|
|
newPageTable.id = newTabName + "-page-table";
|
|
newPageTable.classList = "page-table";
|
|
wrapper.appendChild(newPage);
|
|
}
|
|
|
|
function save() {
|
|
let tabs = document.querySelectorAll(".tab-page");
|
|
let doc = [];
|
|
for (var tabDiv of tabs.values()) {
|
|
let tabName = tabDiv.querySelector(".edit-tab-name").innerText;
|
|
let tabPriority = tabDiv.querySelector(".tab-priority").value;
|
|
let tabHideNames = tabDiv.querySelector(".tab-hidenames").checked;
|
|
let tabPrivate = tabDiv.querySelector(".tab-private").checked;
|
|
let tab = {
|
|
name: tabName,
|
|
tags: [],
|
|
options: {
|
|
priority: parseInt(tabPriority),
|
|
hide_names: tabHideNames,
|
|
private: tabPrivate,
|
|
},
|
|
};
|
|
doc.push(tab)
|
|
|
|
let tags = tabDiv.querySelectorAll(".edit-tag");
|
|
let subtags = tabDiv.querySelectorAll(".edit-subtag");
|
|
for (var tagRow of tags.values()) {
|
|
let tagRowName = tagRow.querySelector(".edit-tag-name").innerText;
|
|
let tagRowValue = tagRow.querySelector(".edit-tag-value").innerText;
|
|
let tag = {
|
|
name: tagRowName,
|
|
value: tagRowValue,
|
|
subtags: [],
|
|
};
|
|
if (tagRowName != "id") {
|
|
let optionsRow = tagRow.nextElementSibling;
|
|
let tagHyperlink = optionsRow.querySelector(".tag-hyperlink").checked;
|
|
let tagInterlink = optionsRow.querySelector(".tag-interlink").checked;
|
|
let tagPrivate = optionsRow.querySelector(".tag-private").checked;
|
|
tag.options = {
|
|
hyperlink: tagHyperlink,
|
|
interlink: tagInterlink,
|
|
private: tagPrivate,
|
|
};
|
|
}
|
|
tab.tags.push(tag);
|
|
|
|
let tagRowId = tagRow.dataset.tag;
|
|
for (var subtagRow of subtags.values()) {
|
|
let subtagRowId = subtagRow.dataset.tag;
|
|
if (subtagRowId == tagRowId) {
|
|
let subtagRowName = subtagRow.querySelector(".edit-subtag-name").innerText;
|
|
let subtagRowValue = subtagRow.querySelector(".edit-subtag-value").innerText;
|
|
let subOptionsRow = subtagRow.nextElementSibling;
|
|
let subtagHyperlink = subOptionsRow.querySelector(".tag-hyperlink").checked;
|
|
let subtagInterlink = subOptionsRow.querySelector(".tag-interlink").checked;
|
|
let subtagPrivate = subOptionsRow.querySelector(".tag-private").checked;
|
|
let subtag = {
|
|
name: subtagRowName,
|
|
value: subtagRowValue,
|
|
options: {
|
|
hyperlink: subtagHyperlink,
|
|
interlink: subtagInterlink,
|
|
private: subtagPrivate,
|
|
}
|
|
};
|
|
tag.subtags.push(subtag);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var req = new XMLHttpRequest();
|
|
req.open("POST", "/edit/{{ document.get_tag_value('id') }}", true);
|
|
req.setRequestHeader("Content-type", "application/json");
|
|
req.responseType = "json";
|
|
req.onreadystatechange = function () {
|
|
if (req.readyState == 4 && req.status == 200) {
|
|
window.location.reload();
|
|
}
|
|
};
|
|
req.send(JSON.stringify(doc));
|
|
}
|
|
|
|
window.onload = function () {
|
|
// Respect fragment as a tab selector shortcut
|
|
if (window.location.hash) {
|
|
selectTab(window.location.hash.substring(1));
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock page_scripts %}
|
|
|
|
{% macro make_content_tab(tab, selected) -%}
|
|
<div id="tab-{{ tab.name }}" class="tab tab-content{% if selected %} tab-down{% endif %}{% if index %} tab-right{% endif %}" onclick="javascript:selectTab('{{ tab.name }}')">{{ tab.name }}</div>
|
|
{%- endmacro %}
|
|
|
|
{% macro make_tab_page(tab, selected) %}
|
|
<div id="{{ tab.name }}-page" class="tab-page{% if selected %} tab-page-selected{% endif %}">
|
|
<table id="{{ tab.name }}-page-table" class="page-table">
|
|
|
|
<tr>
|
|
<td><i>tab name</i></td>
|
|
<td><div class="edit-tab-name" contenteditable>{{ tab.name }}</div></td>
|
|
</tr>
|
|
|
|
<tr><td></td>
|
|
<td><input class="tab-priority numeric-input" type="number" value="{{ tab.options.priority }}"> <i>priority</i> — <input class="tab-hidenames" type="checkbox"{% if tab.options.hide_names %} checked {% endif %}> <i>hide names</i> — <input class="tab-private" type="checkbox"{% if tab.options.private %} checked{% endif %}> <i>private</i></td>
|
|
</tr>
|
|
|
|
{% for tag in tab.tags %}
|
|
<tr class="edit-tag" data-tag="{{ tag.name }}" >
|
|
<td><div class="edit-tag-name"{% if tag.name != 'id' %} contenteditable{% endif %}>{{ tag.name }}</div></td>
|
|
<td><div class="edit-tag-value" contenteditable>{{ tag.value }}</div></td>
|
|
</tr>
|
|
|
|
{%- if tag.name != 'id' -%}
|
|
<tr><td>
|
|
{%- if tag.subtags -%}
|
|
│
|
|
{%- else -%}
|
|
<a href="/edit/{{ document.get_tag('id').value }}?add=subtag&tag={{ tag.name }}">└ +</a>
|
|
{%- endif -%}</td>
|
|
<td><input class="tag-hyperlink" type="checkbox"{% if tag.options.hyperlink %} checked {% endif %}> <i>hyperlink</i> — <input class="tag-interlink" type="checkbox"{% if tag.options.interlink %} checked {% endif %}> <i>interlink</i> — <input class="tag-private" type="checkbox"{% if tag.options.private %} checked {% endif %}> <i>private</i></td>
|
|
</tr>
|
|
{%- endif -%}
|
|
|
|
{% for subtag in tag.subtags %}
|
|
<tr class="edit-subtag" data-tag="{{ tag.name }}">
|
|
<td><div class="edit-subtag-name" contenteditable>{{ subtag.name }}</div></td>
|
|
<td><div class="edit-subtag-value" contenteditable>{{ subtag.value }}</div></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>
|
|
{%- if not loop.last -%}
|
|
│
|
|
{%- else -%}
|
|
<a href="/edit/{{ document.get_tag('id').value }}?add=subtag&tag={{ tag.name }}">└ +</a>
|
|
{%- endif -%}
|
|
</td>
|
|
<td><input class="tag-hyperlink" type="checkbox"{% if subtag.options.hyperlink %} checked {% endif %}> <i>hyperlink</i> — <input class="tag-interlink" type="checkbox"{% if subtag.options.interlink %} checked {% endif %}> <i>interlink</i> — <input class="tag-private" type="checkbox"{% if subtag.options.private %} checked {% endif %}> <i>private</i></td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
{% endfor %}
|
|
|
|
<tr>
|
|
<td><a href="/edit/{{ document.get_tag('id').value }}?add=tag&tab={{ tab.name }}">add tag</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td></td>
|
|
<td><a onclick="javascript:save()">submit changes</a></td>
|
|
</tr>
|
|
|
|
</table>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{# TODO: tab.priority support #}
|
|
{% block page_content %}
|
|
<div id="tabs">
|
|
{%- for tab in document -%}
|
|
{{ make_content_tab(tab, loop.first) }}
|
|
{%- endfor -%}
|
|
<div id="newtab" class="tab"><a href="/edit/{{ document.get_tag('id').value }}?add=tab">+</div>
|
|
<div id="index" class="tab tab-right"><a href="/index/">index</a></div>
|
|
</div>
|
|
{% for tab in document -%}
|
|
{{ make_tab_page(tab, loop.first) }}
|
|
{%- endfor -%}
|
|
{% endblock page_content %} |