297 lines
9.4 KiB
JavaScript
297 lines
9.4 KiB
JavaScript
/**
|
||
* amWiki Web端 - 全库搜索模块
|
||
* @author Tevin
|
||
*/
|
||
|
||
;
|
||
(function (win) {
|
||
|
||
'use strict';
|
||
|
||
/**
|
||
* 全局搜索
|
||
* @param {Storage} _storage
|
||
* @constructor
|
||
*/
|
||
var Search = function (_storage) {
|
||
this._storage = _storage;
|
||
this.$e = {
|
||
//显示搜索面板按钮
|
||
searchShow: $('#searchShow'),
|
||
//更新全部缓存按钮
|
||
searchUpdate: this._storage.$e.searchUpdate,
|
||
//搜索面板
|
||
searchBox: $('#searchBox'),
|
||
//搜索结果列表
|
||
results: $('#results'),
|
||
//搜索结果信息提示
|
||
resultMsg: $('#resultMsg'),
|
||
//搜素结果显示更多
|
||
resultMore: $('#resultMore'),
|
||
//搜索按钮
|
||
search: $('#search'),
|
||
//搜索文本
|
||
searchText: $('#searchText')
|
||
};
|
||
this._data = {
|
||
//搜素结果
|
||
result: [],
|
||
//单条结果的模板
|
||
template: $('#template\\:searchResult').text(),
|
||
//每页结果数
|
||
pageSize: 15,
|
||
//当前页码
|
||
pagination: 0
|
||
};
|
||
this._bindCtrl();
|
||
//用户执行重建缓存的回调
|
||
this.onNeedRebuildStorage = null;
|
||
};
|
||
|
||
/**
|
||
* 绑定用户操作
|
||
* @private
|
||
*/
|
||
Search.prototype._bindCtrl = function () {
|
||
var that = this;
|
||
//展开折叠搜索面板
|
||
this.$e.searchShow.on('click', function () {
|
||
if (that.$e.searchBox.hasClass('on')) {
|
||
that.displayBox('off');
|
||
that.$e.searchShow.trigger('searchoff');
|
||
} else {
|
||
that.displayBox('on', function () {
|
||
resetResHeight();
|
||
});
|
||
that.$e.searchShow.trigger('searchon');
|
||
}
|
||
});
|
||
//设置结果区域高度
|
||
var resetResHeight = function () {
|
||
var hOut = that.$e.searchBox.height();
|
||
var dt = that.$e.results.offset().top - that.$e.searchUpdate.offset().top;
|
||
that.$e.results.height(hOut - dt);
|
||
};
|
||
$(win).on('resize', function () {
|
||
if (that.$e.searchBox.hasClass('on')) {
|
||
resetResHeight();
|
||
}
|
||
});
|
||
//当本地浏览且存在页面挂载数据时，隐藏重建缓存按钮
|
||
if (location.protocol == 'file:' && typeof AWPageMounts != 'undefined') {
|
||
this.$e.searchUpdate.parent().addClass('off');
|
||
}
|
||
//重建缓存
|
||
this.$e.searchUpdate.on('click', function () {
|
||
//开启重建缓存时，如果存在搜索子进程，则干掉子进程
|
||
if (that._worker) {
|
||
that._worker.terminate();
|
||
that._worker = null;
|
||
that.$e.resultMsg.hide();
|
||
}
|
||
that.$e.search.prop('disabled', true);
|
||
that.$e.searchUpdate.prop('disabled', true);
|
||
that.onNeedRebuildStorage(function () {
|
||
that.$e.search.prop('disabled', false);
|
||
that.$e.searchUpdate.val('请勿频繁使用');
|
||
});
|
||
});
|
||
//更新全部缓存按钮使用的时间限制：一小时内不允许重复使用
|
||
var lastBuild = this._storage.getLastBuildTs();
|
||
if (lastBuild) {
|
||
var lave = Date.now() - lastBuild;
|
||
if (lave < 60 * 60 * 1000) {
|
||
this.$e.searchUpdate.prop('disabled', true).val('请勿频繁使用');
|
||
}
|
||
}
|
||
//点击搜索
|
||
this.$e.search.on('click', function () {
|
||
that._search();
|
||
});
|
||
this.$e.searchText.on('keyup', function (e) {
|
||
if (e.keyCode == 13) {
|
||
that._search();
|
||
}
|
||
});
|
||
//结果翻页
|
||
this.$e.resultMore.on('click', function () {
|
||
that._nextResultPage();
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 显示隐藏搜索面板
|
||
* @param {String} type - on 显示 ／ off 隐藏
|
||
* @param {Function} callback
|
||
* @public
|
||
*/
|
||
Search.prototype.displayBox = function (type, callback) {
|
||
var that = this;
|
||
var $box = this.$e.searchBox;
|
||
if (type == 'on' && !$box.hasClass('on')) {
|
||
$box
|
||
.addClass('on')
|
||
.css({
|
||
'display': 'block',
|
||
'width': '0',
|
||
'opacity': 0
|
||
})
|
||
.animate({
|
||
'width': '100%',
|
||
'opacity': 1
|
||
}, 300, 'swing', function () {
|
||
callback && callback();
|
||
});
|
||
} else if (type == 'off' && $box.hasClass('on')) {
|
||
$box
|
||
.removeClass('on')
|
||
.animate({
|
||
'width': '30%',
|
||
'opacity': 0
|
||
}, 200, 'swing', function () {
|
||
$box.removeAttr('style');
|
||
callback && callback();
|
||
});
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 启动搜素
|
||
* @private
|
||
*/
|
||
Search.prototype._search = function () {
|
||
var that = this;
|
||
if (this.$e.searchText.val() == '') {
|
||
this.$e.searchText.focus();
|
||
return;
|
||
}
|
||
var words = this.$e.searchText.val();
|
||
this.$e.resultMsg.show().text('创建搜索中...');
|
||
if (typeof win.Worker !== "undefined") {
|
||
//开启一次新搜索时，如果存在搜索子进程，则干掉子进程
|
||
if (this._worker) {
|
||
this._worker.terminate();
|
||
this._worker = null;
|
||
this.$e.resultMsg.hide();
|
||
}
|
||
try {
|
||
//创建搜素子进程搜素
|
||
this._worker = new win.Worker('amWiki/js/amWiki.search.worker.js');
|
||
this._searchByWorker(words);
|
||
} catch (e) {
|
||
//在当前环境搜索
|
||
this._searchByPresent(words);
|
||
}
|
||
} else {
|
||
//在当前环境搜索
|
||
this._searchByPresent(words);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 搜索子进程通讯
|
||
* @param {String} words
|
||
* @private
|
||
*/
|
||
Search.prototype._searchByWorker = function (words) {
|
||
var that = this;
|
||
//收到子进程搜素消息
|
||
this._worker.onmessage = function (event) {
|
||
var data = event.data;
|
||
//加载成功后发送文档数据
|
||
if (data.type == 'searcher:loaded') {
|
||
that._worker.postMessage({type: 'searcher:docs', docs: that._storage.getAllDocs()});
|
||
}
|
||
//文档预处理完成后开始搜索
|
||
else if (data.type == 'searcher:ready') {
|
||
that.$e.resultMsg.show().html('正在搜索，请稍后...');
|
||
that._worker.postMessage({type: 'searcher:search', words: words});
|
||
}
|
||
//搜索结果排行
|
||
else if (data.type == 'searcher:result') {
|
||
that._data.result = data.result;
|
||
that._showResultList();
|
||
that._worker.terminate();
|
||
that._worker = null;
|
||
}
|
||
};
|
||
//子进程出错
|
||
this._worker.onerror = function (e) {
|
||
console.error(e);
|
||
this.$e.resultMsg.show().text('Sorry，出错了！<br/>' + e.msg);
|
||
that._worker.terminate();
|
||
that._worker = null;
|
||
};
|
||
};
|
||
|
||
/**
|
||
* 在当前环境搜索
|
||
* @param {String} words
|
||
* @private
|
||
*/
|
||
Search.prototype._searchByPresent = function (words) {
|
||
var searcher = new AWSearcher();
|
||
searcher.initDocs(this._storage.getAllDocs());
|
||
this.$e.resultMsg.show().html('正在搜索，请稍后...');
|
||
searcher.matchWords(words);
|
||
this._data.result = searcher.getResult();
|
||
this._showResultList();
|
||
};
|
||
|
||
/**
|
||
* 显示结果列表
|
||
* @private
|
||
*/
|
||
Search.prototype._showResultList = function () {
|
||
this.$e.results.children('ul').children().remove();
|
||
this.$e.resultMsg.hide();
|
||
this._data.pagination = 0;
|
||
this._nextResultPage();
|
||
};
|
||
|
||
/**
|
||
* 显示结果列表下一页
|
||
* @private
|
||
*/
|
||
Search.prototype._nextResultPage = function () {
|
||
var html = '';
|
||
var count = 0;
|
||
for (var i = this._data.pagination * this._data.pageSize, item; item = this._data.result[i]; i++) {
|
||
html += this._renderRankItem(this._data.template, item);
|
||
//超过页码跳出
|
||
if (++count >= this._data.pageSize) {
|
||
break;
|
||
}
|
||
}
|
||
this.$e.results.children('ul').append(html);
|
||
this._data.pagination++;
|
||
//如果还有结果没显示完，显示显示更多按钮
|
||
if (this._data.pagination * this._data.pageSize >= this._data.result.length) {
|
||
this.$e.resultMore.hide();
|
||
} else {
|
||
this.$e.resultMore.show();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 渲染单条模板
|
||
* @param {String} template
|
||
* @param {Object} data
|
||
* @returns {String}
|
||
* @private
|
||
*/
|
||
Search.prototype._renderRankItem = function (template, data) {
|
||
var tmpl = template;
|
||
data.time = win.tools.formatTime(data.timestamp);
|
||
delete data.timestamp;
|
||
for (var p in data) {
|
||
if (data.hasOwnProperty(p)) {
|
||
tmpl = tmpl.replace(new RegExp('{{' + p + '}}', 'g'), data[p]);
|
||
}
|
||
}
|
||
return tmpl;
|
||
};
|
||
|
||
return win.AWSearch = Search;
|
||
|
||
})(window); |