themes/apachecon/layouts/search/section.html (289 lines of code) (raw):
<!DOCTYPE HTML>
<html>
{{ partial "header.html" . }}
<body>
<!-- Header Wrapper -->
<div class="wrapper style1">
{{ partial "smallpageheader.html" . }}
<!-- Main -->
<div id="main" class="wrapper style4">
<!-- Content -->
<div id="content" class="container">
<section class="track">
<div class="search" οnlοad="getTestXmlValue();">
<input type="text" placeholder="{{i18n "searchContent"}}" id="search-key" />
<button onclick="search()">
<img class="icon" src="images/search.png">
</button>
</div>
<h1 id="search-tip" style="color: #c05b4d;text-align: center;display: none;">{{i18n "searching"}}</h1>
<br />
<div id="result"></div>
</section>
<div class="page_btn clear" id="pageCtl" style="display: none;">
<span class="page_box">
<ul id="pagination-clean">
<li class="first"><a>I<</a></li>
<li class="prev"><a>{{i18n "prevPage"}}</a></li>
<span class='ellipsis-pre' style='display:none'>...</span>
<input type="hidden" class="hidden"/>
<span class='ellipsis-end' style='display:none'>...</span>
<span class="pageNum" style='display:none'>
<span class="current_page">1</span>
<span style="padding:0 3px;">/</span>
<span class="total"></span>
</span>
<li class="next"><a>{{i18n "nextPage"}}</a></li>
<li class="last"><a>>I</a></li>
</ul>
</span>
</div>
</div>
</div>
{{ partial "footer.html" . }}
</body>
<style>
.page_btn {
float:left;
position:relative;
left:50%;
transform: translateX(-50%);
}
.page_btn a {
cursor: pointer;
padding: 5px;
border: solid 1px #ccc;
font-size: 12px·
}
.page_box {
float: right
}
.pageNum {
padding: 0 10px
}
#pagination-clean{
white-space: nowrap;
}
#pagination-clean li{
display: inline-block;
border:0; margin:0; padding:0;
font-size:14px;
margin-right:2px;
}
.selected{
font-weight:bold;
background-color: #F3E0EA;
}
.highlightMark{
color: #9E2165;
font-weight:bold;
}
.post-title{
font-weight:bold;
}
</style>
<script type="text/javascript">
// enter
window.onload = function() {
document.onkeydown = function(ev) {
var event = ev || event
if (event.keyCode == 13) {
search()
}
}
}
// search
function search() {
key = document.getElementById("search-key").value;
if (key === "") {
return;
}
// tip
document.getElementById("search-tip").innerText = "{{i18n "searching"}}";
document.getElementById("search-tip").style.display = "block";
// clear
var el = document.getElementById('result');
var childs = el.childNodes;
for (var i = childs.length - 1; i >= 0; i--) {
el.removeChild(childs[i]);
}
// xml
var language="{{i18n "translation"}}";;
xmltext = new XMLHttpRequest;
xmltext.open("POST", "{{i18n "searchIndex"}}", false);
xmltext.send();
resp = xmltext.responseXML;
items = resp.getElementsByTagName("item");
var i = 0;
haveResult = false;
while (i < items.length) {
txt = items[i].getElementsByTagName("title")[0].innerHTML + items[i].getElementsByTagName("description")[0].innerHTML;
if (txt.indexOf(key.toLowerCase()) > -1) {
title = items[i].getElementsByTagName("title")[0].innerHTML;
link = items[i].getElementsByTagName("link")[0].innerHTML;
time = items[i].getElementsByTagName("pubDate")[0].innerHTML;
// Highlight mark
mark = items[i].getElementsByTagName("description")[0].innerHTML;
mark = mark.replace(new RegExp(key,'i'), "<span class='highlightMark'>"+key.slice(0,1).toUpperCase()+key.slice(1)+"</span>");
// Filter data dateļ¼Mon, 01 Jan 0001 00:00:00 +0000
if(time != "Mon, 01 Jan 0001 00:00:00 +0000"){
haveResult = true;
addItem(title, link, time, mark)
}
}
i++;
}
if (!haveResult) {
document.getElementById("search-tip").innerText = "{{i18n "searched"}}";
document.getElementById("search-tip").style.display = "block";
document.getElementById("pageCtl").style.display = "none";
}else{
// Pagination display
page()
}
}
// add
function addItem(title, link, time, mark) {
document.getElementById("search-tip").style.display = "none";
tmpl = "<article class=\"post\" style=\"border-bottom: 1px solid #e6e6e6;display: none\" >" +
"<header class=\"post-header\">" +
"<h1 class=\"post-title\"><a class=\"post-link\" href=\"" + link + "\" target=\"_blank\">" + title + "</a></h1>" +
"<div class=\"post-meta\">" +
" <span class=\"post-time\">" + time + "</span>" +
"</div>" +
" </header>" +
"<div class=\"post-content\">" +
"<div class=\"post-summary\">" + mark + "</div>" +
"<div class=\"read-more\">" +
"<a href=\"" + link + "\" class=\"read-more-link\" target=\"_blank\">{{i18n "readMore"}}</a>" +
"</div>" +
" </div>" +
"</article>"
div = document.createElement("div")
div.innerHTML = tmpl;
document.getElementById('result').appendChild(div)
}
function page(){
$("#pageCtl").show();
var current_page = 5; // Data displayed per page
$("article").slice(0,current_page).show();
var total_q = $('article').size(); // Total data
var current_num = 1; // Current number of pages
var total_page = Math.ceil(total_q / current_page); // PageCount
var next = $(".next"); // next page
var prev = $(".prev"); // previous page
let first = $(".first") // first page
let last = $(".last") // last page
$(".ellipsis-end").hide() // Hide the leading ellipsis
$(".ellipsis-pre").hide() // Hide the end ellipsis
$(".total").text(total_page); // Show total pages
$(".current_page").text(current_num); //Displays the current number of pages
// Clear the page buttons
$(".tmp").remove()
// Adds a page number based on the current number of pages
for (var i = total_page; i>=1; i--){
$('.hidden').after("<li class='tmp' value='"+i+"'><a>"+i+"</a></li>");
}
// The first page is selected by default
$("#pagination-clean li").eq(2).addClass('selected');
if(total_page > 10){
$('.ellipsis-end').show()
}
// Hide redundant page buttons
function buttonHide(page = 1){
if(total_page > 10){
$.each($('.tmp'),(index, el) => {
if(page - $(el).val() > 3 || page - $(el).val() < -3){
$(el).hide()
} else {
$(el).show()
}
})
}
if(page > 4){
$('.ellipsis-pre').show()
} else {
$('.ellipsis-pre').hide()
}
if(page < total_page - 3){
$('.ellipsis-end').show()
} else {
$('.ellipsis-end').hide()
}
}
buttonHide()
// Click the page number to jump
$(".tmp").click(function () {
var clickPage=$(this).val()
current_num = clickPage
buttonHide(clickPage)
$(".current_page").text(current_num);
$(this).addClass("selected");
$.each($("article"), function (index, item) {
var start = current_page * (current_num - 1);
var end = current_page * current_num;
if (index >= start && index < end) {
$(this).show();
} else {
$(this).hide();
}
})
})
// next page
$(".next").click(function () {
if (current_num >= $(".total").text()) {
$(".next").removeAttr('onclick');
return false;
} else {
$(".current_page").text(++current_num);
$.each($("article"), function (index, item) {
var start = current_page * (current_num - 1);
var end = current_page * current_num;
if (index >= start && index < end) {
$(this).show();
} else {
$(this).hide();
}
})
$("#pagination-clean li").eq(current_num + 1).siblings('li').removeClass('selected');
$("#pagination-clean li").eq(current_num + 1).addClass('selected');
}
buttonHide(current_num)
})
// previous page
$(".prev").click(function () {
if (current_num <= 1) {
$(".prev").removeAttr('onclick');
return false;
} else {
$(".current_page").text(--current_num);
$.each($("article"), function (index, item) {
var start = current_page * (current_num - 1);
var end = current_page * current_num;
if (index >= start && index < end) {
$(this).show();
} else {
$(this).hide();
}
})
$("#pagination-clean li").eq(current_num + 1).siblings('li').removeClass('selected');
$("#pagination-clean li").eq(current_num + 1).addClass('selected');
buttonHide(current_num)
}
})
// first page
$('.first').click(function(){
document.getElementsByClassName('tmp')[0].click()
})
// last page
$('.last').click(function(){
document.getElementsByClassName('tmp')[total_page - 1].click()
})
// Page number selection
$("#pagination-clean li").click(function(){
let class_list = $(this).attr("class").split(" ")
if(class_list.includes("tmp")){
$(this).siblings('li').removeClass('selected'); // Delete styles for other sibling elements
$(this).addClass('selected'); // Adds the style of the current element
}
})
}
</script>
</html>