Issue 2310: Release filter on component page (#2646)

* * removed duplicated code
* give the search field focus on page load for faster interaction

* introduced filter-by-version
This commit is contained in:
Beat 2017-05-17 04:50:30 +02:00 committed by Paulus Schoutsen
parent 9a73e00636
commit 14109cf5c3

View File

@ -36,9 +36,9 @@ Support for these components is provided by the Home Assistant community.
<div class="filter-button-group"> <div class="filter-button-group">
<a href='#all' class="btn">All ({{tot}})</a> <a href='#all' class="btn">All ({{tot}})</a>
<a href='#featured' class="btn featured">Featured</a> <a href='#featured' class="btn featured">Featured</a>
<a href='#added_in_current_version' class="btn added_in_current_version">Added in {{ current_version }} ({{ current_version_components_count }})</a> <a href='#version/{{ current_version }}' class="btn added_in_current_version">Added in {{ current_version }} ({{ current_version_components_count }})</a>
<a href='#added_one_version_ago' class="btn added_one_version_ago">Added in {{ added_one_ago_version }} ({{ one_ago_version_components_count }})</a> <a href='#version/{{ added_one_ago_version }}' class="btn added_one_version_ago">Added in {{ added_one_ago_version }} ({{ one_ago_version_components_count }})</a>
<a href='#added_two_versions_ago' class="btn added_two_versions_ago">Added in {{ added_two_ago_version }} ({{ two_ago_version_components_count }})</a> <a href='#version/{{ added_two_ago_version }}' class="btn added_two_versions_ago">Added in {{ added_two_ago_version }} ({{ two_ago_version_components_count }})</a>
{% for category in categories %} {% for category in categories %}
{% if category and category != 'Other' %} {% if category and category != 'Other' %}
@ -87,16 +87,14 @@ Support for these components is provided by the Home Assistant community.
{% endraw %} {% endraw %}
<script type="text/javascript"> <script type="text/javascript">
var current_minor_version = {{site.current_minor_version}};
var added_one_ago_minor_version = {{added_one_ago_minor_version}};
var added_two_ago_minor_version = {{added_two_ago_minor_version}};
// This object contains all components we have // This object contains all components we have
var allComponents = [ var allComponents = [
{% for component in components %} {% for component in components %}
{% if component.ha_category %} {% if component.ha_category %}
{% assign sliced_version = component.ha_release | split: '.' %} {% assign sliced_version = component.ha_release | split: '.' %}
{% assign minor_version = sliced_version[1]|plus: 0 %} {% assign minor_version = sliced_version[1]|plus: 0 %}
{url:"{{ component.url }}", title:"{{component.title}}", cat:"{{component.ha_category | slugify}}", featured: {% if component.featured %}true{% else %}false{% endif %}, v: {{minor_version}}, logo: "{{component.logo}}"}, {% assign major_version = sliced_version[0]|plus: 0 %}
{url:"{{ component.url }}", title:"{{component.title}}", cat:"{{component.ha_category | slugify}}", featured: {% if component.featured %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
{% endif %} {% endif %}
{% endfor %} {% endfor %}
false false
@ -114,24 +112,24 @@ allComponents.pop(); // remove placeholder element at the end
allComponents[i].titleLC = allComponents[i].title.toLowerCase(); allComponents[i].titleLC = allComponents[i].title.toLowerCase();
allComponents[i].catLC = allComponents[i].cat.toLowerCase(); allComponents[i].catLC = allComponents[i].cat.toLowerCase();
} }
// sort the components alphabetically // sort the components alphabetically
allComponents.sort(function(a, b){ allComponents.sort(function(a, b){
return a.titleLC.localeCompare(b.titleLC); return a.titleLC.localeCompare(b.titleLC);
}); });
if (location.hash !== '' && location.hash.indexOf('#search/') === 0) { if (location.hash !== '' && location.hash.indexOf('#search/') === 0) {
// set default value in search from URL // set default value in search from URL
jQuery('.component-search input').val(decodeURIComponent(location.hash).substring(8)); jQuery('.component-search input').val(decodeURIComponent(location.hash).substring(8));
} }
// add focus to the search field - even on IE // add focus to the search field - even on IE
setTimeout(function () { setTimeout(function () {
jQuery('.component-search input').focus(); jQuery('.component-search input').focus();
}, 1); }, 1);
} }
init(); init();
/** /**
* filter all components, based on the location's hash and render them into the component box * filter all components, based on the location's hash and render them into the component box
*/ */
@ -171,26 +169,22 @@ allComponents.pop(); // remove placeholder element at the end
} else if(hash === '#featured' || hash === '') { } else if(hash === '#featured' || hash === '') {
// only show those with featured = true // only show those with featured = true
filter = function(comp) { filter = function(comp) {
return comp.featured; return comp.featured;
}; };
} else if(hash === '#added_in_current_version' || hash === '#added_one_version_ago' || hash === '#added_two_versions_ago') { } else if(hash.indexOf('#version/') === 0) {
// compare against a version // compare against a version
search = current_minor_version; search = decodeURIComponent(hash).substring(9).toLowerCase();
if (hash === '#added_one_version_ago') { filter = function(comp) {
search = added_one_ago_minor_version; // compare version string against version js
} else if (hash === '#added_two_versions_ago') {
search = added_two_ago_minor_version;
}
filter = function(comp) {
return comp.v === search; return comp.v === search;
}; };
} else { } else {
// regular filter categories // regular filter categories
search = hash.substring(1); search = hash.substring(1);
filter = function(comp) { filter = function(comp) {
return comp.catLC === search; return comp.catLC === search;
}; };
} }
@ -210,7 +204,7 @@ allComponents.pop(); // remove placeholder element at the end
} }
/** /**
* update the browser location hash. This enables users to use the browser-history * update the browser location hash. This enables users to use the browser-history
*/ */
function updateHash(newHash) { function updateHash(newHash) {
if ('replaceState' in history) { if ('replaceState' in history) {