more changes to css theming; it should now be much more responsive, have less FOUC's and not load a bunch of unused css when it isn't in use.
This commit is contained in:
Robert Clarke
parent
1e88a4bdcf
commit
09c17330d6
4 changed files with 104 additions and 81 deletions
|
|
@ -1,44 +1,80 @@
|
|||
const THEME_KEY = "ZULMA_THEME";
|
||||
(function (switch_css) {
|
||||
//Constants
|
||||
const THEME_KEY = "ZULMA_THEME";
|
||||
const STOP_LINK_CSS_ID = "stop-blink";
|
||||
|
||||
let theme = localStorage.getItem(THEME_KEY);
|
||||
if (theme) {
|
||||
changeTheme(theme);
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('#theme-select>option').forEach(element => {
|
||||
if (element.value === theme) {
|
||||
element.selected = 'selected';
|
||||
//Variables
|
||||
let link = null;
|
||||
let theme = localStorage.getItem(THEME_KEY);
|
||||
|
||||
//Private Methods
|
||||
function changeTheme(themeName, firstLoad) {
|
||||
var fileref = document.createElement("link");
|
||||
fileref.rel = "stylesheet";
|
||||
fileref.type = "text/css";
|
||||
fileref.href = `/${themeName}.css`;
|
||||
link = document.getElementsByTagName("head")[0].appendChild(fileref);
|
||||
|
||||
link.addEventListener('load', onLinkLoad);
|
||||
if (firstLoad) {
|
||||
document.querySelectorAll('.stylesheet').forEach((el) => {
|
||||
el.remove();
|
||||
});
|
||||
}
|
||||
|
||||
saveTheme(themeName);
|
||||
};
|
||||
|
||||
function onLinkLoad() {
|
||||
link.removeEventListener('load', onLinkLoad);
|
||||
document.querySelectorAll('.stylesheet').forEach((el) => {
|
||||
el.remove();
|
||||
});
|
||||
link.className += 'stylesheet';
|
||||
addcss('body{visibility:visible;}');
|
||||
};
|
||||
|
||||
function saveTheme(themeName) {
|
||||
localStorage.setItem(THEME_KEY, themeName);
|
||||
};
|
||||
|
||||
function addcss(css) {
|
||||
let el = document.getElementById(STOP_LINK_CSS_ID);
|
||||
if (el) {
|
||||
el.innerText = css;
|
||||
} else {
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var style = document.createElement('style');
|
||||
style.id = STOP_LINK_CSS_ID;
|
||||
style.setAttribute('type', 'text/css');
|
||||
if (style.styleSheet) { // IE
|
||||
style.styleSheet.cssText = css;
|
||||
} else { // the world
|
||||
style.appendChild(document.createTextNode(css));
|
||||
}
|
||||
head.insertBefore(style, head.firstChild);
|
||||
}
|
||||
};
|
||||
|
||||
//Public Methods
|
||||
switch_css.init = function () {
|
||||
if (theme && !document.getElementById(theme)) {
|
||||
addcss('body{visibility:hidden;}')
|
||||
changeTheme(theme, true);
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('#theme-select>option').forEach(element => {
|
||||
if (element.value === theme) {
|
||||
element.selected = 'selected';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('theme-select').onchange = function () {
|
||||
changeTheme(this.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('theme-select').onchange = function () {
|
||||
changeTheme(this.value);
|
||||
}
|
||||
});
|
||||
}(switch_css = window.switch_css || {}));
|
||||
|
||||
function changeTheme(themeName) {
|
||||
let alternates = [];
|
||||
|
||||
document.querySelectorAll('link.stylesheet').forEach(element => {
|
||||
if (element.id === themeName) {
|
||||
element.disabled = false;
|
||||
element.media = '';
|
||||
}
|
||||
else {
|
||||
alternates.push(element);
|
||||
}
|
||||
});
|
||||
|
||||
alternates.forEach(element => {
|
||||
element.disabled = true;
|
||||
element.media = 'none';
|
||||
});
|
||||
|
||||
saveTheme(themeName);
|
||||
}
|
||||
|
||||
function saveTheme(themeName) {
|
||||
localStorage.setItem(THEME_KEY, themeName);
|
||||
}
|
||||
switch_css.init();
|
||||
|
|
@ -16,23 +16,20 @@
|
|||
{% block title %}{{ config.title }}{% endblock title %}
|
||||
</title>
|
||||
|
||||
{% block css %}
|
||||
{{ index_macros::css() }}
|
||||
{% endblock css %}
|
||||
|
||||
|
||||
{{ index_macros::css() }}
|
||||
{% if config.extra.zulma_allow_theme_selection %}
|
||||
<script type="text/javascript" src="{{ get_url(path="js/switchcss.js") }}"></script>
|
||||
{% endif %}
|
||||
{% if config.generate_rss %}
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml") | safe }}">
|
||||
{% endif %}
|
||||
|
||||
{% block js %}
|
||||
{% if config.build_search_index %}
|
||||
<script defer type="text/javascript" src="{{ get_url(path="elasticlunr.min.js") }}"></script>
|
||||
<script defer type="text/javascript" src="{{ get_url(path="search_index.en.js") }}"></script>
|
||||
{% endif %}
|
||||
{% if config.extra.zulma_allow_theme_selection %}
|
||||
<script type="text/javascript" src="{{ get_url(path="js/switchcss.js") }}"></script>
|
||||
{% endif %}
|
||||
{% endblock js %}
|
||||
|
||||
{% block extra_head %}
|
||||
{% endblock extra_head %}
|
||||
|
|
@ -79,9 +76,11 @@
|
|||
{% endif %}
|
||||
<!-- END PAGINATION -->
|
||||
</div>
|
||||
{{ index_macros::footer() }}
|
||||
</main>
|
||||
{% endblock content %}
|
||||
{% block footer %}
|
||||
{{ index_macros::footer() }}
|
||||
{% endblock footer %}
|
||||
|
||||
<script type="text/javascript" src="{{ get_url(path="js/bulma.js") }}"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -125,24 +125,10 @@
|
|||
{% endmacro footer %}
|
||||
|
||||
{% macro css() %}
|
||||
{% if config.extra.zulma_allow_theme_selection %}
|
||||
{% for theme in config.extra.zulma_themes %}
|
||||
{% if config.extra.zulma_theme %}
|
||||
{% set default_theme = config.extra.zulma_theme %}
|
||||
<link id="{{config.extra.zulma_theme}}" class="stylesheet" rel="stylesheet"
|
||||
href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% else %}
|
||||
{% set default_theme = "default" %}
|
||||
{% endif %}
|
||||
{% if default_theme == theme %}
|
||||
<link id="{{theme}}" class="stylesheet" rel="stylesheet"
|
||||
href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% else %}
|
||||
<link id="{{theme}}" class="alternate stylesheet" media="none" rel="stylesheet"
|
||||
href="{{ get_url(path=theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% elif config.extra.zulma_theme %}
|
||||
<link rel="stylesheet" href="{{ get_url(path=config.extra.zulma_theme ~ ".css", trailing_slash=false) }}" />
|
||||
{% else %}
|
||||
<link rel="stylesheet" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
|
||||
<link id="default" class="stylesheet" rel="stylesheet" href="{{ get_url(path="default.css", trailing_slash=false) }}" />
|
||||
{% endif %}
|
||||
{% endmacro css %}
|
||||
|
|
@ -7,23 +7,25 @@
|
|||
{{ super() }}
|
||||
{% endblock header %}
|
||||
<!-- END NAV -->
|
||||
<section class="container">
|
||||
<div class="columns is-desktop">
|
||||
<div class="column is-10-desktop is-offset-1-desktop">
|
||||
<article itemscope itemtype="http://schema.org/BlogPosting">
|
||||
<div class="card article">
|
||||
<div class="card-content">
|
||||
{{ post_macros::article_header(page = page) }}
|
||||
<div itemprop="articleBody" class="content article-body">
|
||||
{{ page.content | safe }}
|
||||
<main>
|
||||
<section class="container">
|
||||
<div class="columns is-desktop">
|
||||
<div class="column is-10-desktop is-offset-1-desktop">
|
||||
<article itemscope itemtype="http://schema.org/BlogPosting">
|
||||
<div class="card article">
|
||||
<div class="card-content">
|
||||
{{ post_macros::article_header(page = page) }}
|
||||
<div itemprop="articleBody" class="content article-body">
|
||||
{{ page.content | safe }}
|
||||
</div>
|
||||
</div>
|
||||
{% block page_footer %}
|
||||
{{ post_macros::post_footer(page=page) }}
|
||||
{% endblock page_footer %}
|
||||
</div>
|
||||
{% block page_footer %}
|
||||
{{ post_macros::post_footer(page=page) }}
|
||||
{% endblock page_footer %}
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
{% endblock content %}
|
||||
Loading…
Add table
Reference in a new issue