Faceted boards page
This commit is contained in:
Phil Howard
parent
89010081c4
commit
2f499cd19e
@ -482,7 +482,7 @@ for overlay in overlays:
|
||||
|
||||
featured_boards_html = ''
|
||||
for overlay in featured_boards:
|
||||
featured_boards_html += '<div class="board"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong><span>{description}</span></a></div>'.format(
|
||||
featured_boards_html += '<div class="board"><a href="{base_url}{page_url}"><img alt="{name}" src="{resource_url}boards/{image}" /><strong>{name}</strong><span>{description}</span></a></div>'.format(
|
||||
image=overlay['image'],
|
||||
name=overlay['name'],
|
||||
page_url=overlay['page_url'],
|
||||
@ -518,15 +518,21 @@ for overlay_type in nav_html.keys():
|
||||
if overlay_type == 'board':
|
||||
for x in items:
|
||||
image = x['image'] if 'image' in x else 'no-image.png'
|
||||
print(x)
|
||||
|
||||
boards_page.append({'name': x['name'], 'html': '<li class="board"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong></a></li>'.format(
|
||||
if 'formfactor' not in x:
|
||||
print('Warning! -> {name} missing formfactor'.format(name=x['name']))
|
||||
|
||||
boards_page.append({'name': x['name'], 'html': '<li class="board" data-type="{type}" data-manufacturer="{manufacturer}" data-form-factor="{formfactor}"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong></a></li>'.format(
|
||||
image=image,
|
||||
name=x['name'],
|
||||
page_url=x['page_url'],
|
||||
base_url=base_url,
|
||||
type=x['type'] if 'type' in x else '',
|
||||
formfactor=x['formfactor'] if 'formfactor' in x else '',
|
||||
manufacturer=x['manufacturer'],
|
||||
resource_url=resource_url)})
|
||||
|
||||
|
||||
group_items_pictures = (''.join(map(lambda x: '<li class="featured"><a href="{base_url}{page_url}"><img src="{resource_url}boards/{image}" /><strong>{name}</strong></a></li>'.format(
|
||||
image=x['image'],
|
||||
name=x['name'],
|
||||
@ -549,7 +555,7 @@ for overlay_type in nav_html.keys():
|
||||
nav_html[overlay_type] = '<div class="group-nav"><ul>' + overlay_subnav + '</ul></div>' + nav_html[overlay_type]
|
||||
|
||||
|
||||
print(nav_html)
|
||||
#print(nav_html)
|
||||
|
||||
boards_page = [x['html'] for x in sorted(boards_page, key=lambda k: k['name'])]
|
||||
|
||||
|
||||
101
resources/boards.js
Normal file
101
resources/boards.js
Normal file
@ -0,0 +1,101 @@
|
||||
var dom_boards = $('#boards .board');
|
||||
|
||||
var facets = {};
|
||||
var filters = {};
|
||||
|
||||
dom_boards.each(function(idx, obj){
|
||||
var obj = $(obj);
|
||||
for (var key in obj.data()){
|
||||
if(typeof(key) !== 'undefined'){
|
||||
|
||||
if(typeof(facets[key]) == 'undefined'){
|
||||
facets[key] = {
|
||||
'title':key.split(/(?=[A-Z])/).join(" ").toLowerCase(),
|
||||
'key':key,
|
||||
'items':[]
|
||||
};
|
||||
filters[key] = '';
|
||||
}
|
||||
|
||||
var vals = obj.data(key).split(',');
|
||||
|
||||
for(var idx in vals){
|
||||
var val = vals[idx];
|
||||
|
||||
if(facets[key].items.indexOf(val) == -1){
|
||||
facets[key].items.push(val);
|
||||
facets[key].items.sort();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var dom_facets = $('<div>').addClass('facets').insertBefore('#boards');
|
||||
|
||||
dom_facets.on('click','li',function(e){
|
||||
var val = $(this).data('val');
|
||||
var key = $(this).data('key');
|
||||
console.log(val,key);
|
||||
|
||||
if(filters[key] != val){
|
||||
filters[key] = val;
|
||||
$(this).parents('ul').find('li').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
}
|
||||
else
|
||||
{
|
||||
filters[key] = '';
|
||||
//filters[key].splice(filters[key].indexOf(val), 1);
|
||||
$(this).removeClass('selected');
|
||||
}
|
||||
|
||||
update_filters()
|
||||
});
|
||||
|
||||
for (var facet in facets){
|
||||
var title = facets[facet].title;
|
||||
var items = facets[facet].items;
|
||||
var key = facets[facet].key;
|
||||
|
||||
console.log(title, items, key);
|
||||
|
||||
$('<h4>').text(title).appendTo(dom_facets);
|
||||
var dom_facet = $('<ul>').addClass('facet').appendTo(dom_facets);
|
||||
|
||||
for(var idx in items){
|
||||
var val = items[idx];
|
||||
$('<li>')
|
||||
.addClass('item')
|
||||
.data('key',key)
|
||||
.data('val',val)
|
||||
.text(val)
|
||||
.appendTo(dom_facet);
|
||||
}
|
||||
}
|
||||
|
||||
function update_filters(){
|
||||
dom_boards.each(function(idx, obj){
|
||||
var obj = $(obj);
|
||||
var hide = false;
|
||||
|
||||
for(var key in filters){
|
||||
console.log('Filter key',key);
|
||||
var selected = filters[key];
|
||||
|
||||
if(selected.length > 0){
|
||||
if(obj.data(key).split(',').indexOf(selected) == -1){
|
||||
hide = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(hide) {
|
||||
obj.hide();
|
||||
}
|
||||
else
|
||||
{
|
||||
obj.show();
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -55,7 +55,9 @@ Footer language nav
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
background:#C7C2AE;
|
||||
margin-top:10px;
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.lang-nav {
|
||||
@ -98,6 +100,8 @@ Content Area
|
||||
background:#EBE6D3;
|
||||
width:500px;
|
||||
min-height:640px;
|
||||
position: relative;
|
||||
padding-bottom:50px;
|
||||
}
|
||||
#content h1 {font-size:30px;}
|
||||
#content h2 {font-size:20px;margin-top:20px;}
|
||||
@ -288,8 +292,8 @@ Drop down nav
|
||||
}
|
||||
#boards .board a, #featured .board a {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
min-height: 230px;
|
||||
padding-bottom: 0px;
|
||||
min-height: 220px;
|
||||
display:block;
|
||||
}
|
||||
#featured .board a {
|
||||
@ -298,7 +302,7 @@ Drop down nav
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#sections .featured img, #boards .board img, #featured .board img {
|
||||
max-width:100%;
|
||||
max-width:80%;
|
||||
height:auto;
|
||||
display:block;
|
||||
margin:0 auto;
|
||||
@ -346,6 +350,54 @@ Drop down nav
|
||||
display:block;
|
||||
}
|
||||
|
||||
.facets {
|
||||
padding:0 15px;
|
||||
}
|
||||
.facets h4 {
|
||||
text-transform: capitalize;
|
||||
font-size: 18px;
|
||||
margin: 10px 0 0 0;
|
||||
}
|
||||
|
||||
.facets ul, .facets li {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.facets .facet li {
|
||||
display: inline-block;
|
||||
padding: 0px 10px 0px 10px;
|
||||
margin-top: 2px;
|
||||
margin-right: 2px;
|
||||
background: #859900;
|
||||
color: #FFF;
|
||||
font-size: 14px;
|
||||
line-height: 23px;
|
||||
height: 22px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.facets .facet li:hover, .facets .facet li.selected {
|
||||
color: #859900;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.facets .facet:nth-of-type(2) li {
|
||||
background: #D33682;
|
||||
}
|
||||
.facets .facet:nth-of-type(2) li:hover, .facets .facet:nth-of-type(2) li.selected {
|
||||
color: #D33682;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
.facets .facet:nth-of-type(1) li {
|
||||
background: #268BD2;
|
||||
}
|
||||
.facets .facet:nth-of-type(1) li:hover, .facets .facet:nth-of-type(1) li.selected {
|
||||
color: #268BD2;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
/*
|
||||
Footer
|
||||
*/
|
||||
|
||||
@ -8,6 +8,7 @@ manufacturer: Cirrus Logic and element14
|
||||
description: Audio Card with unprecedented level of features and performance for Raspberry Pi.
|
||||
url: http://www.element14.com/community/community/raspberry-pi/raspberry-pi-accessories/cirrus_logic_audio_card
|
||||
buy: http://www.element14.com/community/community/raspberry-pi/raspberry-pi-accessories/cirrus_logic_audio_card
|
||||
formfactor: 'HAT'
|
||||
pincount: 40
|
||||
pin:
|
||||
'3':
|
||||
|
||||
@ -8,6 +8,7 @@ manufacturer: Kertatuote
|
||||
description: Computer controlled DMX lights, sounds and special effects.
|
||||
url: http://discohat.com
|
||||
buy: http://discohat.com/shop
|
||||
formfactor: 'HAT'
|
||||
pincount: 40
|
||||
pin:
|
||||
'8':
|
||||
|
||||
@ -33,32 +33,15 @@
|
||||
</nav>
|
||||
</div>
|
||||
<div id="content">
|
||||
<!--<div id="sections">
|
||||
<ul>
|
||||
<li class="boards"><a href="" title="Add-on boards for Raspberry Pi">Boards</a>
|
||||
<div class="dropdown">{{nav_html_board}}</div>
|
||||
</li>
|
||||
<li class="interfaces"><a href="" title="Raspberry Pi hardware interfaces">Interfaces</a>
|
||||
<div class="dropdown">{{nav_html_interface}}</div>
|
||||
</li>
|
||||
<li class="guides"><a href="" title="Connection guides for Raspberry Pi GPIO">Guides</a>
|
||||
<div class="dropdown">{{nav_html_guide}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>-->
|
||||
<div id="featured">
|
||||
<ul>
|
||||
{{featured_boards}}
|
||||
</ul>
|
||||
<a class="more" href="/boards">See more HATs, pHATs and add-ons</a>
|
||||
</div>
|
||||
<div id="interfaces">
|
||||
<ul>
|
||||
{{nav_html_interface}}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="pages">
|
||||
<article><h1>Raspberry Pi HATs, pHATs & Add-ons</h1></article>
|
||||
<article><h1>Raspberry Pi HATs, pHATs & Add-ons</h1>
|
||||
<h3>Click on a HAT, pHAT or add-on for more details and to see which pins it uses!</h3>
|
||||
</article>
|
||||
<div id="boards"><ul>{{content}}</ul></div>
|
||||
</div>
|
||||
<div id="lang">
|
||||
@ -80,5 +63,6 @@
|
||||
<script src='{{resource_url}}prettify/lang-ruby.js'></script>
|
||||
<script src='{{resource_url}}prettify/lang-bash.js'></script>
|
||||
<script src='{{resource_url}}pinout.js?v={{v}}'></script>
|
||||
<script src='{{resource_url}}boards.js?v={{v}}'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -33,19 +33,6 @@
|
||||
</nav>
|
||||
</div>
|
||||
<div id="content">
|
||||
<!--<div id="sections">
|
||||
<ul>
|
||||
<li class="boards"><a href="" title="Add-on boards for Raspberry Pi">Boards</a>
|
||||
<div class="dropdown">{{nav_html_board}}</div>
|
||||
</li>
|
||||
<li class="interfaces"><a href="" title="Raspberry Pi hardware interfaces">Interfaces</a>
|
||||
<div class="dropdown">{{nav_html_interface}}</div>
|
||||
</li>
|
||||
<li class="guides"><a href="" title="Connection guides for Raspberry Pi GPIO">Guides</a>
|
||||
<div class="dropdown">{{nav_html_guide}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>-->
|
||||
<div id="featured">
|
||||
<ul>
|
||||
{{featured_boards}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user