192 lines
6.8 KiB
Plaintext
192 lines
6.8 KiB
Plaintext
<div id="filter" class="topnav clearfix open">
|
|
<ul class="breadcrumb text-info pull-left">
|
|
<li><a href="/zh_tw/admin/dashboards">網站內容</a><span class="divider">/</span></li><li><a href="/admin/site_panel"><span class="translation_missing" title="translation missing: zh_tw.module_name.client_management">Client Management</span></a><span class="divider">/</span></li><li class="active"><span class="translation_missing" title="translation missing: zh_tw.restful_actions.server_manager">Server Manager</span></li>
|
|
</ul>
|
|
<div class="searchClear pull-left" style="clear: left;">
|
|
<form id="module-search-form">
|
|
<div class="sc-field"><i class="icon-search"></i><i class="icons-cross-3 search-clear" style="display: none;"></i><input type="text" id="filter-input" class="search-query input-medium" placeholder="搜尋" value=""></div>
|
|
</form>
|
|
<img id="search-preloader" src="/assets/preloader.gif" style="height: 40px; position: absolute; left: 220px; top: -5px; display:none;">
|
|
</div>
|
|
<ul class="nav nav-pills filter-nav pull-right">
|
|
<li class="accordion-group">
|
|
<div class="accordion-heading">
|
|
<a href="#collapse-category" data-toggle="collapse" data-parent="#filter" class="accordion-toggle"><%=t(:category)%></a>
|
|
</div>
|
|
</li>
|
|
<li class="accordion-group">
|
|
<div class="accordion-heading">
|
|
<a href="#collapse-tags" data-toggle="collapse" data-parent="#filter" class="accordion-toggle"><%=t(:tags)%></a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="filter-group accordion-group">
|
|
<div class="accordion-body in collapse" id="collapse-category" style="height: auto;">
|
|
<div class="accordion-inner pagination-right">
|
|
<% @categories.each do |category|%>
|
|
<a class="btn btn-small " href="#" id="filter_<%=category.id%>" onclick="filter.addFilter('filters[category][]=<%=category.id%>');$(this).toggleClass('active');return false;"><%=category.title%></a>
|
|
<% end %>
|
|
</div>
|
|
<div class="filter-clear">
|
|
<a href="#" onclick="filter.clearFilter();" class="btn btn-link btn-small"><i class="icons-cycle"></i> 清除</a>
|
|
</div>
|
|
</div>
|
|
<div class="accordion-body collapse" id="collapse-tags">
|
|
<div class="accordion-inner pagination-right">
|
|
</div>
|
|
<div class="filter-clear">
|
|
<a href="#" onclick="filter.clearFilter();" class="btn btn-link btn-small"><i class="icons-cycle"></i> 清除</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var interval = 0;
|
|
var keyword;
|
|
var searchLock=false;
|
|
|
|
$("#filter-input").bind("input", function() {queueSearch();});
|
|
$("#module-search-form").submit(function(){queueSearch(); return false; });
|
|
|
|
var params = function(key){
|
|
var result = {};
|
|
var datas = window.location.search ? window.location.search.replace('?','').split('&') : []
|
|
datas.map(function(data){
|
|
tmp = data.split("=");
|
|
tmp[1] = decodeURIComponent(tmp[1]);
|
|
if(key){
|
|
if(tmp[0]==key){
|
|
if(tmp[0].indexOf('[]')>=0){
|
|
if(!Array.isArray(result)) result = [];
|
|
result.push(tmp[1]);
|
|
}else{
|
|
result = tmp[1];
|
|
}
|
|
}
|
|
}else{
|
|
if(tmp[0].indexOf('[]')>=0){
|
|
if(typeof(result[tmp[0]]) == "undefined") result[tmp[0]] = [];
|
|
result[tmp[0]].push(tmp[1]);
|
|
}else{
|
|
result[tmp[0]] = tmp[1];
|
|
}
|
|
}
|
|
});
|
|
return result;
|
|
}
|
|
|
|
var queueSearch = function(){
|
|
if($("#filter-input").val()!=keyword){
|
|
keyword = $("#filter-input").val();
|
|
interval=500;
|
|
if(!searchLock) moduleSearch();
|
|
}
|
|
}
|
|
|
|
var moduleSearch = function(){
|
|
$("#search-preloader").fadeIn();
|
|
searchLock = true;
|
|
if(interval==0){
|
|
url = document.URL;
|
|
url = url.replace('#','');
|
|
if(url.indexOf("keywords=")>=0){
|
|
url = url.replace("keywords="+encodeURIComponent(params("keywords")),"keywords="+keyword)
|
|
}else{
|
|
url = (url.indexOf("?")>=0) ? url+"&keywords="+keyword : url+"?keywords="+keyword
|
|
}
|
|
url = url.replace("page="+params("page"),"page=1");
|
|
|
|
history.pushState(null, null, url);
|
|
$.get(url,function(data){
|
|
searchLock = false;
|
|
$("#index_table").html(data);
|
|
bindPagination();
|
|
$("#search-preloader").fadeOut();
|
|
});
|
|
}else{
|
|
interval -= 100;
|
|
setTimeout(moduleSearch,100);
|
|
}
|
|
}
|
|
|
|
var bindPagination = function(){
|
|
$(".pagination a").click(function(){
|
|
filter.updateTable($(this).attr('href'),false,true);
|
|
return false;
|
|
});
|
|
}
|
|
|
|
|
|
var Filter = function(dom){
|
|
var self = this;
|
|
var makeFilters = function(){
|
|
return (window.location.search ? window.location.search.replace('?','').split('&') : []);
|
|
}
|
|
var filters = makeFilters(),
|
|
dom = $(dom),
|
|
mainUrl = window.location.pathname;
|
|
this.updateTable = function(url, goback, is_pagination){
|
|
update = true;
|
|
xurl = (url == null ? ( filters.length ? mainUrl + "?" + filters.join('&') : mainUrl ) : url);
|
|
$.ajax({
|
|
url : xurl,
|
|
type : "get",
|
|
dataType : "html"
|
|
}).done(function(data){
|
|
if(is_pagination){
|
|
history.pushState(null, null, decodeURIComponent(xurl));
|
|
}else{
|
|
if(!goback) history.replaceState(null, null, decodeURIComponent(xurl));
|
|
}
|
|
filters = makeFilters();
|
|
dom.html(data);
|
|
bindPagination();
|
|
update = false;
|
|
})
|
|
}
|
|
this.addFilter = function(filter){
|
|
filters = makeFilters();
|
|
$.each(filters,function(idx,data){
|
|
if(typeof(data)=="undefined") return true;
|
|
if(data.indexOf("page=")>-1) filters.splice(idx,1);
|
|
});
|
|
|
|
if( (index = filters.indexOf(filter) ) > -1){
|
|
mainUrl = mainUrl.replace(filter,'');
|
|
filters.splice(index,1);
|
|
}else{
|
|
filters.push(filter);
|
|
}
|
|
|
|
self.updateTable();
|
|
return false;
|
|
};
|
|
|
|
this.clearFilter = function(){
|
|
$(".filter-group a.active").removeClass("active");
|
|
filters = [];
|
|
self.updateTable();
|
|
return false;
|
|
}
|
|
|
|
window.onpopstate = function(event){
|
|
if(!update){
|
|
$("#filter-input").val( $.isEmptyObject(params('keywords')) ? "" : params('keywords') );
|
|
self.updateTable(document.location, true);
|
|
$(".filter-group .btn-small").removeClass('active');
|
|
$.each(document.location.search.split('&'),function(key,filter){
|
|
if(filter.split('=')[0].indexOf("keywords")>=0) return true;
|
|
$('#filter_'+filter.split('=')[1]).addClass('active');
|
|
});
|
|
}
|
|
update = false;
|
|
}
|
|
}
|
|
|
|
var update = false;
|
|
var filter;
|
|
$(document).ready(function(){
|
|
filter = new Filter("#index_table");
|
|
bindPagination();
|
|
});
|
|
</script> |