Skip to content

Commit 5824b32

Browse files
hefuyicoderhefuyicoder
committed
Site updated: 2017-05-08 15:50:32
1 parent fea0265 commit 5824b32

File tree

19 files changed

+6913
-149
lines changed

19 files changed

+6913
-149
lines changed

‎2017/04/15/听听，一款优雅的开源音乐播放器/index.html

Lines changed: 368 additions & 2 deletions
Large diffs are not rendered by default.

‎2017/04/27/Glide源码解析（一）：加载流程/index.html

Lines changed: 368 additions & 2 deletions
Large diffs are not rendered by default.

‎2017/05/08/Glide源码解析（二）：缓存机制/index.html

Lines changed: 368 additions & 2 deletions
Large diffs are not rendered by default.

‎about/index.html

Lines changed: 1035 additions & 0 deletions
Large diffs are not rendered by default.

‎archives/2017/04/index.html

Lines changed: 356 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -262,10 +262,44 @@
262262

263263

264264

265+
<li class="menu-item menu-item-search">
266+
267+
<a href="javascript:;" class="popup-trigger">
268+
269+
270+
<i class="menu-item-icon fa fa-search fa-fw"></i> <br />
271+
272+
搜索
273+
</a>
274+
</li>
275+
265276
</ul>
266277

267278

268279

280+
<div class="site-search">
281+
282+
<div class="popup search-popup local-search-popup">
283+
<div class="local-search-header clearfix">
284+
<span class="search-icon">
285+
<i class="fa fa-search"></i>
286+
</span>
287+
<span class="popup-btn-close">
288+
<i class="fa fa-times-circle"></i>
289+
</span>
290+
<div class="local-search-input-wrapper">
291+
<input autocomplete="off"
292+
placeholder="搜索..." spellcheck="false"
293+
type="text" id="local-search-input">
294+
</div>
295+
</div>
296+
<div id="local-search-result"></div>
297+
</div>
298+
299+
300+
301+
</div>
302+
269303
</nav>
270304

271305

@@ -618,25 +652,345 @@ <h2 class="post-title">
618652

619653

620654

655+
656+
<script>
657+
var cloudTieConfig = {
658+
url: document.location.href,
659+
sourceId: "",
660+
productKey: "f2b9309d2b034863a3f5ea325458b6cb",
661+
target: "cloud-tie-wrapper"
662+
};
663+
</script>
664+
<script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script>
665+
621666

622667

623668

624669

625670

626-
627671

628672

629673

630674

631675

632676

633677

678+
<script type="text/javascript">
679+
// Popup Window;
680+
var isfetched = false;
681+
var isXml = true;
682+
// Search DB path;
683+
var search_path = "search.xml";
684+
if (search_path.length === 0) {
685+
search_path = "search.xml";
686+
} else if (search_path.endsWith("json")) {
687+
isXml = false;
688+
}
689+
var path = "/" + search_path;
690+
// monitor main search box;
691+
692+
var onPopupClose = function (e) {
693+
$('.popup').hide();
694+
$('#local-search-input').val('');
695+
$('.search-result-list').remove();
696+
$('#no-result').remove();
697+
$(".local-search-pop-overlay").remove();
698+
$('body').css('overflow', '');
699+
}
634700

701+
function proceedsearch() {
702+
$("body")
703+
.append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
704+
.css('overflow', 'hidden');
705+
$('.search-popup-overlay').click(onPopupClose);
706+
$('.popup').toggle();
707+
var $localSearchInput = $('#local-search-input');
708+
$localSearchInput.attr("autocapitalize", "none");
709+
$localSearchInput.attr("autocorrect", "off");
710+
$localSearchInput.focus();
711+
}
635712

713+
// search function;
714+
var searchFunc = function(path, search_id, content_id) {
715+
'use strict';
716+
717+
// start loading animation
718+
$("body")
719+
.append('<div class="search-popup-overlay local-search-pop-overlay">' +
720+
'<div id="search-loading-icon">' +
721+
'<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
722+
'</div>' +
723+
'</div>')
724+
.css('overflow', 'hidden');
725+
$("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');
726+
727+
$.ajax({
728+
url: path,
729+
dataType: isXml ? "xml" : "json",
730+
async: true,
731+
success: function(res) {
732+
// get the contents from search data
733+
isfetched = true;
734+
$('.popup').detach().appendTo('.header-inner');
735+
var datas = isXml ? $("entry", res).map(function() {
736+
return {
737+
title: $("title", this).text(),
738+
content: $("content",this).text(),
739+
url: $("url" , this).text()
740+
};
741+
}).get() : res;
742+
var input = document.getElementById(search_id);
743+
var resultContent = document.getElementById(content_id);
744+
var inputEventFunction = function() {
745+
var searchText = input.value.trim().toLowerCase();
746+
var keywords = searchText.split(/[\s\-]+/);
747+
if (keywords.length > 1) {
748+
keywords.push(searchText);
749+
}
750+
var resultItems = [];
751+
if (searchText.length > 0) {
752+
// perform local searching
753+
datas.forEach(function(data) {
754+
var isMatch = false;
755+
var hitCount = 0;
756+
var searchTextCount = 0;
757+
var title = data.title.trim();
758+
var titleInLowerCase = title.toLowerCase();
759+
var content = data.content.trim().replace(/<[^>]+>/g,"");
760+
var contentInLowerCase = content.toLowerCase();
761+
var articleUrl = decodeURIComponent(data.url);
762+
var indexOfTitle = [];
763+
var indexOfContent = [];
764+
// only match articles with not empty titles
765+
if(title != '') {
766+
keywords.forEach(function(keyword) {
767+
function getIndexByWord(word, text, caseSensitive) {
768+
var wordLen = word.length;
769+
if (wordLen === 0) {
770+
return [];
771+
}
772+
var startPosition = 0, position = [], index = [];
773+
if (!caseSensitive) {
774+
text = text.toLowerCase();
775+
word = word.toLowerCase();
776+
}
777+
while ((position = text.indexOf(word, startPosition)) > -1) {
778+
index.push({position: position, word: word});
779+
startPosition = position + wordLen;
780+
}
781+
return index;
782+
}
783+
784+
indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
785+
indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
786+
});
787+
if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
788+
isMatch = true;
789+
hitCount = indexOfTitle.length + indexOfContent.length;
790+
}
791+
}
792+
793+
// show search results
794+
795+
if (isMatch) {
796+
// sort index by position of keyword
797+
798+
[indexOfTitle, indexOfContent].forEach(function (index) {
799+
index.sort(function (itemLeft, itemRight) {
800+
if (itemRight.position !== itemLeft.position) {
801+
return itemRight.position - itemLeft.position;
802+
} else {
803+
return itemLeft.word.length - itemRight.word.length;
804+
}
805+
});
806+
});
807+
808+
// merge hits into slices
809+
810+
function mergeIntoSlice(text, start, end, index) {
811+
var item = index[index.length - 1];
812+
var position = item.position;
813+
var word = item.word;
814+
var hits = [];
815+
var searchTextCountInSlice = 0;
816+
while (position + word.length <= end && index.length != 0) {
817+
if (word === searchText) {
818+
searchTextCountInSlice++;
819+
}
820+
hits.push({position: position, length: word.length});
821+
var wordEnd = position + word.length;
822+
823+
// move to next position of hit
824+
825+
index.pop();
826+
while (index.length != 0) {
827+
item = index[index.length - 1];
828+
position = item.position;
829+
word = item.word;
830+
if (wordEnd > position) {
831+
index.pop();
832+
} else {
833+
break;
834+
}
835+
}
836+
}
837+
searchTextCount += searchTextCountInSlice;
838+
return {
839+
hits: hits,
840+
start: start,
841+
end: end,
842+
searchTextCount: searchTextCountInSlice
843+
};
844+
}
845+
846+
var slicesOfTitle = [];
847+
if (indexOfTitle.length != 0) {
848+
slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
849+
}
850+
851+
var slicesOfContent = [];
852+
while (indexOfContent.length != 0) {
853+
var item = indexOfContent[indexOfContent.length - 1];
854+
var position = item.position;
855+
var word = item.word;
856+
// cut out 100 characters
857+
var start = position - 20;
858+
var end = position + 80;
859+
if(start < 0){
860+
start = 0;
861+
}
862+
if (end < position + word.length) {
863+
end = position + word.length;
864+
}
865+
if(end > content.length){
866+
end = content.length;
867+
}
868+
slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
869+
}
870+
871+
// sort slices in content by search text's count and hits' count
872+
873+
slicesOfContent.sort(function (sliceLeft, sliceRight) {
874+
if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
875+
return sliceRight.searchTextCount - sliceLeft.searchTextCount;
876+
} else if (sliceLeft.hits.length !== sliceRight.hits.length) {
877+
return sliceRight.hits.length - sliceLeft.hits.length;
878+
} else {
879+
return sliceLeft.start - sliceRight.start;
880+
}
881+
});
882+
883+
// select top N slices in content
884+
885+
var upperBound = parseInt('1');
886+
if (upperBound >= 0) {
887+
slicesOfContent = slicesOfContent.slice(0, upperBound);
888+
}
889+
890+
// highlight title and content
891+
892+
function highlightKeyword(text, slice) {
893+
var result = '';
894+
var prevEnd = slice.start;
895+
slice.hits.forEach(function (hit) {
896+
result += text.substring(prevEnd, hit.position);
897+
var end = hit.position + hit.length;
898+
result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
899+
prevEnd = end;
900+
});
901+
result += text.substring(prevEnd, slice.end);
902+
return result;
903+
}
904+
905+
var resultItem = '';
906+
907+
if (slicesOfTitle.length != 0) {
908+
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
909+
} else {
910+
resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
911+
}
912+
913+
slicesOfContent.forEach(function (slice) {
914+
resultItem += "<a href='" + articleUrl + "'>" +
915+
"<p class=\"search-result\">" + highlightKeyword(content, slice) +
916+
"...</p>" + "</a>";
917+
});
918+
919+
resultItem += "</li>";
920+
resultItems.push({
921+
item: resultItem,
922+
searchTextCount: searchTextCount,
923+
hitCount: hitCount,
924+
id: resultItems.length
925+
});
926+
}
927+
})
928+
};
929+
if (keywords.length === 1 && keywords[0] === "") {
930+
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
931+
} else if (resultItems.length === 0) {
932+
resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
933+
} else {
934+
resultItems.sort(function (resultLeft, resultRight) {
935+
if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
936+
return resultRight.searchTextCount - resultLeft.searchTextCount;
937+
} else if (resultLeft.hitCount !== resultRight.hitCount) {
938+
return resultRight.hitCount - resultLeft.hitCount;
939+
} else {
940+
return resultRight.id - resultLeft.id;
941+
}
942+
});
943+
var searchResultList = '<ul class=\"search-result-list\">';
944+
resultItems.forEach(function (result) {
945+
searchResultList += result.item;
946+
})
947+
searchResultList += "</ul>";
948+
resultContent.innerHTML = searchResultList;
949+
}
950+
}
636951

952+
if ('auto' === 'auto') {
953+
input.addEventListener('input', inputEventFunction);
954+
} else {
955+
$('.search-icon').click(inputEventFunction);
956+
input.addEventListener('keypress', function (event) {
957+
if (event.keyCode === 13) {
958+
inputEventFunction();
959+
}
960+
});
961+
}
637962

963+
// remove loading animation
964+
$(".local-search-pop-overlay").remove();
965+
$('body').css('overflow', '');
638966

639-
967+
proceedsearch();
968+
}
969+
});
970+
}
971+
972+
// handle and trigger popup window;
973+
$('.popup-trigger').click(function(e) {
974+
e.stopPropagation();
975+
if (isfetched === false) {
976+
searchFunc(path, 'local-search-input', 'local-search-result');
977+
} else {
978+
proceedsearch();
979+
};
980+
});
981+
982+
$('.popup-btn-close').click(onPopupClose);
983+
$('.popup').click(function(e){
984+
e.stopPropagation();
985+
});
986+
$(document).on('keyup', function (event) {
987+
var shouldDismissSearchPopup = event.which === 27 &&
988+
$('.search-popup').is(':visible');
989+
if (shouldDismissSearchPopup) {
990+
onPopupClose();
991+
}
992+
});
993+
</script>
640994

641995

642996

0 commit comments

Comments
 (0)