Browse Source

feat(download): 添加下载页搜索逻辑

master
peijunlei 3 weeks ago
parent
commit
c920762221
  1. 43
      public/themes/dist_static/static/js/download.js
  2. 12
      public/themes/website/1/zh/demo/download.html

43
public/themes/dist_static/static/js/download.js

@ -18,10 +18,31 @@ $(function() {
$("[data-dropdown]").prop("hidden", true);
$("[data-dropdown-trigger]").removeClass("is-open").attr("aria-expanded", "false");
};
const getActiveTabId = () => {
const $active = $(".d-tabs__item.is-active").first();
const $group = $active.closest(".d-tabs__group");
if ($group.length) {
const $activeChild = $group.find(".d-tabs__dropdown-item.is-active[data-tab]").first();
if ($activeChild.length) return $activeChild.attr("data-tab") || "";
}
return $active.attr("data-tab") || "";
};
const activateTabById = (tabId) => {
if (!tabId) return;
const $dropdownItem = $(`.d-tabs__dropdown-item[data-tab="${tabId}"]`).first();
if ($dropdownItem.length) {
$dropdownItem.addClass("is-active").siblings().removeClass("is-active");
const $trigger = $dropdownItem.closest(".d-tabs__group").find("[data-dropdown-trigger]");
$trigger.find("span").text($dropdownItem.text());
activateTab($trigger);
return;
}
const $target = $(`.d-tabs__item[data-tab="${tabId}"]`).first();
if ($target.length) activateTab($target);
};
$(".d-tabs__item:not([data-dropdown-trigger])").on("click", function() {
activateTab($(this));
closeDropdowns();
$("[data-dropdown-trigger] span").text("样本手册");
});
$("[data-dropdown-trigger]").on("click", function() {
const $btn = $(this);
@ -44,10 +65,20 @@ $(function() {
$(document).on("click", function(event) {
if (!$(event.target).closest(".d-tabs__group").length) closeDropdowns();
});
const tabParam = new URLSearchParams(window.location.search).get("tab");
if (tabParam) {
const $target = $(`[data-tab="${tabParam}"]`);
if ($target.length) activateTab($target);
}
$("[data-download-search]").on("submit", function(event) {
event.preventDefault();
const params = new URLSearchParams();
const keywords = $(this).find('[name="keywords"]').val().trim();
const tabId = getActiveTabId();
if (tabId) params.set("tab", tabId);
if (keywords) params.set("keywords", keywords);
const query = params.toString();
window.location.href = query ? `${window.location.pathname}?${query}` : window.location.pathname;
});
const searchParams = new URLSearchParams(window.location.search);
const tabParam = searchParams.get("tab");
const keywordsParam = searchParams.get("keywords");
if (keywordsParam) $("[data-download-search] [name='keywords']").val(keywordsParam);
if (tabParam) activateTabById(tabParam);
});
//#endregion

12
public/themes/website/1/zh/demo/download.html

@ -1,6 +1,8 @@
<!DOCTYPE html>
<html lang="zh-CN">
{php}$download_keywords = input('keywords', '');{/php}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -68,7 +70,7 @@
{/php}
{if $count > 0}
<div class="d-tabs__group">
<button type="button" class="d-tabs__item" role="tab" aria-selected="false" aria-expanded="false" data-dropdown-trigger>
<button type="button" class="d-tabs__item" role="tab" aria-selected="false" aria-expanded="false" data-dropdown-trigger data-tab="{$vo.id}">
<span>{$vo.title}</span>
<svg class="d-tabs__chevron" viewBox="0 0 11.2728 6.90918" width="11" height="7" fill="none" aria-hidden="true">
<path d="M0.636353 0.636272L5.63635 5.63627L10.6364 0.63623" stroke="currentColor" stroke-width="1.8" />
@ -76,18 +78,18 @@
</button>
{hcTaglib:subcategory pid="$vo.id" item="child" sort=""}
<div class="d-tabs__dropdown" data-dropdown hidden>
<button type="button" class="d-tabs__dropdown-item is-active">{$child.title}</button>
<button type="button" class="d-tabs__dropdown-item is-active" data-tab="{$child.id}">{$child.title}</button>
</div>
{/hcTaglib:subcategory}
</div>
{else}
<button type="button" class="d-tabs__item" role="tab" aria-selected="false">{$vo.title}</button>
<button type="button" class="d-tabs__item" role="tab" aria-selected="false" data-tab="{$vo.id}">{$vo.title}</button>
{/if}
{/volist}
</div>
<form class="s-search" action="#" method="get" role="search" onsubmit="return false;">
<form class="s-search" role="search" data-download-search>
<img class="s-search__icon" src="data:image/svg+xml,%3csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='24.000000'%20height='24.000000'%20fill='none'%3e%3crect%20id='搜索'%20width='24.000000'%20height='24.000000'%20x='0.000000'%20y='0.000000'%20fill='rgb(255,255,255)'%20fill-opacity='0'%20/%3e%3cpath%20id='矢量%203'%20d='M15.8481%2017.1208C14.4808%2018.2114%2012.7482%2018.8633%2010.8633%2018.8633C6.44506%2018.8633%202.86328%2015.2816%202.86328%2010.8633C2.86328%206.445%206.44506%202.86328%2010.8633%202.86328C15.2815%202.86328%2018.8633%206.445%2018.8633%2010.8633C18.8633%2012.7482%2018.2114%2014.4808%2017.1208%2015.8481L21.136%2019.8633L19.8633%2021.136L15.8481%2017.1208ZM17.0632%2010.8633C17.0632%207.43908%2014.2874%204.66326%2010.8633%204.66326C7.4392%204.66326%204.66332%207.43908%204.66332%2010.8633C4.66332%2014.2875%207.4392%2017.0633%2010.8633%2017.0633C14.2874%2017.0633%2017.0632%2014.2875%2017.0632%2010.8633Z'%20fill='rgb(175,181,185)'%20fill-rule='evenodd'%20/%3e%3c/svg%3e" alt="" width="24" height="24" />
<input class="s-search__input" type="search" name="q" placeholder="请输入您想下载的文件" autocomplete="off" />
<input class="s-search__input" type="search" name="keywords" value="{$download_keywords}" placeholder="请输入您想下载的文件" autocomplete="off" />
<button class="s-search__btn" type="submit">搜索</button>
</form>
</div>

Loading…
Cancel
Save