jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-19 15:26:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lazy image load logo (#7888)

Browse Source 
* Lazy load component logos

* Fix component count
This commit is contained in:
Paulus Schoutsen 2018-12-17 23:45:49 +01:00 committed by GitHub
parent e9fc22b4a6
commit 6c6cd38a8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
source/components/index.html
View File

@ -13,19 +13,24 @@ body_id: components-page
regenerate: false
---
{% assign count = site.components | size %}
{% assign nocat = site.components | where: 'ha_category', null | size %}
{% assign tot = count | minus: nocat %}
{% assign components = site.components | sort: 'title' %}
{% assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq %}
{% capture current_version %}{{ site.current_major_version }}.{{ site.current_minor_version }}{% endcapture %}
{% assign added_one_ago_minor_version = site.current_minor_version|minus: 1 %}
{% capture added_one_ago_version %}{{ site.current_major_version }}.{{ added_one_ago_minor_version }}{% endcapture %}
{% assign added_two_ago_minor_version = site.current_minor_version|minus: 2 %}
{% capture added_two_ago_version %}{{ site.current_major_version }}.{{ added_two_ago_minor_version }}{% endcapture %}
{% assign current_version_components_count = site.components | where: 'ha_release', current_version | size %}
{% assign one_ago_version_components_count = site.components | where: 'ha_release', added_one_ago_version | size %}
{% assign two_ago_version_components_count = site.components | where: 'ha_release', added_two_ago_version | size %}
{%- comment -%}Can't use where to count nil because of https://github.com/jekyll/jekyll/issues/6038{%- endcomment -%}
{%- assign tot = 0 -%}
{%- for comp in site.components -%}
{%- if comp.ha_category -%}
{%- assign tot = tot | plus: 1 -%}
{%- endif %}
{%- endfor -%}
{%- assign components = site.components | sort: 'title' -%}
{%- assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq -%}
{%- capture current_version -%}{{ site.current_major_version }}.{{ site.current_minor_version }}{% endcapture -%}
{%- assign added_one_ago_minor_version = site.current_minor_version|minus: 1 -%}
{%- capture added_one_ago_version -%}{{ site.current_major_version }}.{{ added_one_ago_minor_version }}{% endcapture -%}
{%- assign added_two_ago_minor_version = site.current_minor_version|minus: 2 -%}
{%- capture added_two_ago_version -%}{{ site.current_major_version }}.{{ added_two_ago_minor_version }}{% endcapture -%}
{%- assign current_version_components_count = site.components | where: 'ha_release', current_version | size -%}
{%- assign one_ago_version_components_count = site.components | where: 'ha_release', added_one_ago_version | size -%}
{%- assign two_ago_version_components_count = site.components | where: 'ha_release', added_two_ago_version | size -%}
<p class='note'>
Support for these components is provided by the Home Assistant community.
@ -68,8 +73,9 @@ Support for these components is provided by the Home Assistant community.
{%- endfor -%}
{% endcomment %}
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/10.17.0/lazyload.min.js"></script>
{% raw %}
<script id="component-template" type="text/x-custom-template">
@ -134,6 +140,9 @@ allComponents.pop(); // remove placeholder element at the end
* filter all components, based on the location's hash and render them into the component box
*/
function applyFilter() {
var logoLazyLoad = new LazyLoad({
elements_selector: ".option-card img"
});
var rendered, i, filter, search;
var hash = location.hash || '';
var data = {
@ -142,7 +151,7 @@ allComponents.pop(); // remove placeholder element at the end
if(this.logo === '') {
return '';
} else {
return '<img src="/images/supported_brands/' + this.logo + '">';
return '<img data-src="/images/supported_brands/' + this.logo + '">';
}
}
};
@ -201,6 +210,7 @@ allComponents.pop(); // remove placeholder element at the end
// remove previous elements and css classes, add the new stuff and then trigger the fade-in css animation
$('#componentContainer').html('').removeClass('show-items remove-items').html(rendered).addClass('show-items');
logoLazyLoad.update();
}
/**