register_modules/app/views/register_modules/index.html.erb

86 lines
2.3 KiB
Plaintext

<% OrbitHelper.render_css_in_head(["register_module/module_store.scss"]) %>
<%
data = action_data
categories = data["categories"]
tags = data["tags"]
apps = data["apps"]
%>
<div id="module-store">
<div class="filter">
<h3><%= t("register_module.filter") %></h3>
<div class="module-type filter-column">
<ul>
<% categories.each do |category| %>
<li>
<input type="checkbox" id="module_type_<%= category.id.to_s %>" class="filter-checkbox category-checkbox" data-filter="<%= category.id.to_s %>">
<label for="module_type_<%= category.id.to_s %>"><%= category.title %></label>
</li>
<% end %>
</ul>
</div>
<div class="tag-filter filter-column">
<h4><%= t("tags") %></h4>
<ul>
<% tags.each do |tag| %>
<li>
<input type="checkbox" id="tag_<%= tag.id.to_s %>" data-filter="<%= tag.id.to_s %>" class="filter-checkbox tag-checkbox">
<label for="tag_<%= tag.id.to_s %>"><%= tag.name %></label>
</li>
<% end %>
</ul>
</div>
</div>
<div class="app-holder">
<h3 class="heading"><%= t("register_module.modules") %></h3>
<ul class="app-list">
<% apps.each do |app| %>
<li class="app <%= app.get_colour_class %>" data-filter-tags='<%= app.tags.collect{|tag| tag.id.to_s}.to_s.html_safe %>' data-filter-type="<%= app.category.id.to_s %>">
<div class="icon">
<% if !app.icon_class.nil? %>
<i class="<%= app.icon_class %>"></i>
<% else %>
<i class="no-logo">No Logo</i>
<% end %>
</div>
<div class="app-info">
<div class="name"><%= app.name %></div>
<div class="company">RulingDigital</div>
</div>
<div class="module-type">
<%= app.category.title %>
</div>
</li>
<% end %>
</ul>
</div>
</div>
<script type="text/javascript">
var categories = [],
tags = [];
$(".category-checkbox").on("click",function(){
var val = $(this).data("filter");
if($(this).is(":checked")){
if(categories.indexOf(val) == -1){
categories.push(val);
}
}else{
var idx = categories.indexOf(val);
if(idx > -1){
categories.splice(idx,1);
}
}
filterApps();
})
var filterApps = function(){
$(".app-holder li.app").fadeIn();
$.each(categories,function(idx, cat){
$(".app-holder li.app[data-filter-type="+ cat +"]").fadeIn();
$(".app-holder li.app:not([data-filter-type="+ cat +"])").fadeOut();
})
}
</script>