archive/pelican-mg
1
0
Fork 0
mirror of https://github.com/c0de-archive/pelican-mg.git synced 2025-07-30 13:30:17 +00:00
Code Issues Projects Releases Wiki Activity

Enabling lazy loading on home page

Browse Source
This commit is contained in:
Lucas Cimon
2017-12-04 23:53:23 +01:00
parent 68071dd721
commit 6d49fc273a
33 changed files with 4312 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
templates/base.html
View File

@@ -52,13 +52,7 @@
{% endif %}
{% endblock %}
<link href='{{ SITEURL }}/theme/css/uikit-2.27.4.min.css' rel='stylesheet' type='text/css'>
{% if not DISABLE_SEARCH %}
<link href='{{ SITEURL }}/theme/css/uikit-2.27.4-search.min.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/tipuesearch.css">
{% endif %}
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/solarized-highlight.css">
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/main.css">
<link rel="stylesheet" type="text/css" href="{{SITEURL}}/theme/bundle-DISABLE_SEARCH-{{DISABLE_SEARCH|string|first|length|string|first}}-SHORTSHA1-cf29250.css">
</head>
<body>
<!--[if lt IE 7]>
@@ -265,31 +259,7 @@
</div>
</aside>
<script src="{{ SITEURL }}/theme/js/html5shiv-3.7.2.min.js"></script>
<script src="{{ SITEURL }}/theme/js/jquery-1.10.2.min.js"></script>
<script src="{{ SITEURL }}/theme/js/uikit-2.27.4.min.js"></script>
{% if not DISABLE_SEARCH %}
<script src="{{ SITEURL }}/theme/js/uikit-2.27.4-search.min.js"></script>
<script src="{{ SITEURL }}/theme/js/tipuesearch_set.js"></script>
<script src="{{ SITEURL }}/theme/js/tipuesearch.js"></script>
<script>
{% include 'js/enable-search.js' %}
</script>
{% endif %}
{% if SHARE %}
<script src="{{ SITEURL }}/theme/js/jquery.sticky-kit.js"></script>
<script>
{% include 'js/social.js' %}
</script>
{% endif %}
{% if MG_FILTER_TAGS %}
<script>
{% include 'js/filter-tags.js' %}
</script>
{% endif %}
<script src="{{SITEURL}}/theme/bundle-DISABLE_SEARCH-{{DISABLE_SEARCH|string|first|length|string|first}}-SHARE-{{SHARE|string|first|length|string|first}}-MG_FILTER_TAGS-{{MG_FILTER_TAGS|string|first|length|string|first}}-SHORTSHA1-e15c693.js"></script>
{% include 'disqus_count.html' %}
{% include 'analytics.html' %}

10
templates/js/enable-search.js
View File

@@ -1,10 +0,0 @@
$(document).ready(() => {
$('.tipue_search').tipuesearch({
show: 10,
mode: 'json',
showURL: false,
descriptiveWords: 75,
highlightEveryTerm: true,
contentLocation: './tipue_search.json',
});
});

76
templates/js/filter-tags.js
View File

@@ -1,76 +0,0 @@
/*
* Filters state can be one of:
* - undefined => disabled
* - true => select ONLY articles with this tag
* - false => do NOT select articles with this tag
* */
(function iife() {
'strict';
window.tagFilters = {};
function includes(anArray, value) {
return anArray.indexOf(value) >= 0;
}
function updateArticlesVisibility() {
const includeFilters = Object.keys(window.tagFilters).filter((tagFilter) => window.tagFilters[tagFilter] === true);
const excludeFilters = Object.keys(window.tagFilters).filter((tagFilter) => window.tagFilters[tagFilter] === false);
Array.prototype.slice.call(document.getElementsByTagName('article')).forEach((article) => {
// article-excerpt: we ignore it
if (!article.dataset.tags) {
return;
}
const articleTags = JSON.parse(article.dataset.tags);
const allIncludeTags = includeFilters.every((tag) => includes(articleTags, tag));
const anyExcludeTag = excludeFilters.some((tag) => includes(articleTags, tag));
// Now implementing the core logic
let shouldDisplay = !anyExcludeTag;
if (shouldDisplay && includeFilters.length > 0) {
shouldDisplay = allIncludeTags;
}
if (shouldDisplay) {
article.classList.remove('mg-faded');
} else {
article.classList.add('mg-faded');
}
});
}
window.toggleTagFilter = function toggleTagFilter(tag) {
let filterState = window.tagFilters[tag];
if (filterState === true) {
this.classList.remove('mg-tag-filter-include');
filterState = false;
this.classList.add('mg-tag-filter-exclude');
this.title = 'Tag filter (exclude matching articles)';
} else if (filterState === false) {
this.classList.remove('mg-tag-filter-exclude');
filterState = undefined;
this.title = 'Tag filter (disabled)';
} else {
filterState = true;
this.classList.add('mg-tag-filter-include');
this.title = 'Tag filter (include matching articles)';
}
window.tagFilters[tag] = filterState;
updateArticlesVisibility();
};
window.toggleLangTagFilter = function toggleLangTagFilter(langs) {
let lang = this.textContent;
window.tagFilters[`lang:${ lang }`] = undefined;
lang = langs[langs.indexOf(lang) + 1];
if (typeof lang === 'undefined') {
lang = 'lang';
this.title = 'Language filter (disabled)';
} else {
window.tagFilters[`lang:${ lang }`] = true;
this.title = `Language filter (include only "${ lang }" articles)`;
}
this.textContent = lang;
updateArticlesVisibility();
};
}());

4
templates/js/social.js
View File

@@ -1,4 +0,0 @@
$(document).ready(() => {
$('.mg-container-social').height($('article').height());
$('#mg-panel-social').stick_in_parent({ 'offset_top': 35 });
});

4
templates/partials/article-short.html
View File

@@ -2,7 +2,7 @@
data-tags='{{ article.tags|map(attribute="name")|list|tojson }}'>
<div class="mg-article-short">
{% if article.featured_image %}
<img class="mg-article-image image-process-thumb" src="{{ article.featured_image }}" alt="">
<div class="lazyload" data-noscript=""><noscript><img src="{{ article.featured_image }}" alt=""></noscript></div>
{% endif %}
<div class="mg-article-content">
<a href="{{ SITEURL }}/{{ article.url }}" class="uk-link-muted"><h2 class="uk-article-title" itemprop="name">{{ article.title|e }}</h2></a>
@@ -18,4 +18,4 @@
</div>
</div>
<hr class="uk-article-divider">
</article>
</article>