mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-05-02 01:07:36 +00:00
130 lines
3.2 KiB
HTML
130 lines
3.2 KiB
HTML
---
|
|
layout: page
|
|
title: "Components"
|
|
description: "List of the built-in components of Home Assistant."
|
|
date: 2014-12-21 13:35
|
|
sidebar: false
|
|
comments: false
|
|
sharing: true
|
|
footer: true
|
|
is_homepage: true
|
|
hide_github_edit: true
|
|
body_id: components-page
|
|
regenerate: true
|
|
---
|
|
|
|
<p class='note'>
|
|
Support for these components is provided by the Home Assistant community.
|
|
</p>
|
|
|
|
{% assign components = site.components | sort: 'title' %}
|
|
{% assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq %}
|
|
|
|
<div class="filter-button-group">
|
|
<a href='#all' class="btn">All</a>
|
|
<a href='#featured' class="btn">Featured</a>
|
|
|
|
{% for category in categories %}
|
|
{% if category and category != 'Other' %}
|
|
<a href='#{{ category | slugify }}' class="btn">{{ category }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<a href='#other' class="btn">Other</a>
|
|
</div>
|
|
|
|
<div id="componentContainer">
|
|
{% for component in components %}
|
|
{% if component.ha_category %}
|
|
<a href='{{ component.url }}'
|
|
class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'
|
|
{% unless component.featured %}style='display: none'{% endunless %}>
|
|
<div class='img-container'>
|
|
{% if component.logo %}
|
|
<img src='/images/supported_brands/{{ component.logo }}'>
|
|
{% endif %}
|
|
</div>
|
|
<div class='title'>{{ component.title }}</div>
|
|
<div class='category'>{{ component.ha_category }}</div>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% comment %}
|
|
## Pages without categories
|
|
|
|
{% for component in components %}
|
|
{% unless component.ha_category %}
|
|
<p>{{ component.title }}</p>
|
|
{% endunless %}
|
|
{% endfor %}
|
|
{% endcomment %}
|
|
|
|
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
|
<script>
|
|
// undo initial hiding of non-featured cards
|
|
if (location.hash !== '') {
|
|
if (location.hash === '#all') {
|
|
jQuery('#componentContainer a').show();
|
|
} else {
|
|
jQuery('#componentContainer .featured').hide();
|
|
jQuery('#componentContainer .' + location.hash.substr(1)).show();
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
|
|
<script>
|
|
$(window).load(function(){
|
|
var $container = $('#componentContainer');
|
|
|
|
function updateHash(newHash) {
|
|
if ('replaceState' in history) {
|
|
history.replaceState('', '', newHash);
|
|
} else {
|
|
location.hash = newHash;
|
|
}
|
|
}
|
|
|
|
function applyFilter() {
|
|
var hash = location.hash;
|
|
|
|
var filter;
|
|
if (hash == '') {
|
|
filter = '.featured'
|
|
hash = '#featured'
|
|
} else if (hash == '#all') {
|
|
filter = '*';
|
|
} else {
|
|
filter = '.' + hash.substr(1);
|
|
}
|
|
|
|
$('.filter-button-group a.current').removeClass('current');
|
|
$('.filter-button-group a[href='+hash+']').addClass('current');
|
|
|
|
$container.isotope({
|
|
filter: filter,
|
|
animationOptions: {
|
|
duration: 750,
|
|
easing: 'linear',
|
|
queue: false
|
|
},
|
|
masonry: {
|
|
columnWidth: 210
|
|
}
|
|
});
|
|
}
|
|
|
|
jQuery('.filter-button-group a').click(function() {
|
|
updateHash(this.getAttribute('href'));
|
|
applyFilter();
|
|
|
|
return false;
|
|
});
|
|
|
|
window.addEventListener('hashchange', applyFilter);
|
|
|
|
applyFilter();
|
|
});
|
|
</script>
|