135 lines
4.5 KiB
HTML
135 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang='en'>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>{{ name | prettify }} in octomode</title>
|
|
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
|
|
{% block head %}
|
|
{% endblock %}
|
|
</head>
|
|
<body>
|
|
<div id="nav">
|
|
<h1>{{ name | prettify }} <a href="{{ url_for('index') }}"><em class="octomode">in octomode</em></a></h1>
|
|
<div id="buttons">
|
|
|
|
<a href="{{ url_for('pad', name=name) }}"><button>pad</button></a>
|
|
<span id="click_md" class="info" tabindex="1">🌐</span>
|
|
<div id="show_md" class="hidden"><input type="text" name="pad" value="{{ pad_url }}/{{ name }}.md"></div>
|
|
|
|
<a href="{{ url_for('stylesheet', name=name) }}"><button>stylesheet</button></a>
|
|
<span id="click_css" class="info" tabindex="1">🌐</span>
|
|
<div id="show_css" class="hidden"><input type="text" name="pad" value="{{ pad_url }}/{{ name }}.css"></div>
|
|
|
|
<a href="{{ url_for('html', name=name) }}"><button>html</button></a>
|
|
|
|
<a id="layout_link" data-base-href="{{ url_for('pdf', name=name) }}" href="{{ url_for('pdf', name=name) }}"><button>layout</button></a>
|
|
<span class="layout-options">
|
|
<label><input type="checkbox" id="layout_impose"> impose</label>
|
|
<label><input type="checkbox" id="layout_single_page"> single pages</label>
|
|
</span>
|
|
|
|
|
|
</div>
|
|
</nav>
|
|
<div id="wrapper">
|
|
{% block content %}
|
|
{% endblock %}
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
const layoutLink = document.getElementById('layout_link');
|
|
const imposeToggle = document.getElementById('layout_impose');
|
|
const singleToggle = document.getElementById('layout_single_page');
|
|
|
|
if (!layoutLink || !imposeToggle || !singleToggle) {
|
|
return;
|
|
}
|
|
|
|
const STORE_KEY_IMPOSE = 'octomode_layout_impose';
|
|
const STORE_KEY_SINGLE = 'octomode_layout_single';
|
|
const store = (key, value) => {
|
|
try {
|
|
localStorage.setItem(key, value ? '1' : '0');
|
|
} catch (err) {}
|
|
};
|
|
|
|
const readStoredValue = (key, fallback) => {
|
|
try {
|
|
const stored = localStorage.getItem(key);
|
|
if (stored === null) {
|
|
return fallback;
|
|
}
|
|
return stored === '1';
|
|
} catch (err) {
|
|
return fallback;
|
|
}
|
|
};
|
|
|
|
const applyQueryDefaults = () => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.has('impose')) {
|
|
store(STORE_KEY_IMPOSE, params.get('impose') === '1');
|
|
}
|
|
if (params.has('single')) {
|
|
store(STORE_KEY_SINGLE, params.get('single') === '1');
|
|
}
|
|
};
|
|
|
|
const createQueryArgs = () => {
|
|
const params = new URLSearchParams();
|
|
if (imposeToggle.checked) {
|
|
params.set('impose', '1');
|
|
}
|
|
if (singleToggle.checked) {
|
|
params.set('single', '1');
|
|
}
|
|
const query = params.toString();
|
|
return query ? `?${query}` : '';
|
|
};
|
|
|
|
const updateLayoutHref = () => {
|
|
const baseHref = layoutLink.dataset.baseHref;// || layoutLink.getAttribute('href');
|
|
//const base = baseHref.split('?')[0];
|
|
layoutLink.setAttribute('href', baseHref + createQueryArgs());
|
|
};
|
|
|
|
const updatePdfIframe = () => {
|
|
const iframe = document.getElementById('pdf');
|
|
if (!iframe) return;
|
|
const baseSrc = iframe.dataset.baseSrc; //|| iframe.getAttribute('src').split('?')[0];
|
|
iframe.setAttribute('src', baseSrc + createQueryArgs());
|
|
};
|
|
|
|
applyQueryDefaults();
|
|
|
|
imposeToggle.checked = readStoredValue(STORE_KEY_IMPOSE, false);
|
|
singleToggle.checked = readStoredValue(STORE_KEY_SINGLE, false);
|
|
updateLayoutHref();
|
|
updatePdfIframe();
|
|
|
|
const handleChange = (e) => {
|
|
console.log(e.target, imposeToggle);
|
|
if(e.target == imposeToggle && imposeToggle.checked) {
|
|
//console.log("remove single.", singleToggle)
|
|
singleToggle.checked = false;
|
|
} else if(e.target == singleToggle && singleToggle.checked) {
|
|
//console.log("remove impose.", singleToggle)
|
|
imposeToggle.checked = false;
|
|
}
|
|
store(STORE_KEY_IMPOSE, imposeToggle.checked);
|
|
store(STORE_KEY_SINGLE, singleToggle.checked);
|
|
updateLayoutHref();
|
|
updatePdfIframe();
|
|
};
|
|
|
|
imposeToggle.addEventListener('change', handleChange);
|
|
singleToggle.addEventListener('change', handleChange);
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
|
|
{% block footer %}
|
|
{% endblock %}
|
|
</html>
|