增加搜索结果分享功能

This commit is contained in:
枫谷剑仙 2022-11-28 02:25:14 +08:00
parent e12470fd1c
commit e451fa557c
12 changed files with 143 additions and 74 deletions

View File

@ -443,9 +443,12 @@ label[for="box-have"]::after
.control-div .search-close::before{
content: "Close Search Panel";
}
.control-div .search-share::before{
content: "Share Search";
}
.dialog-search-string .dialog-title::before
{
content: "Search By Tags";
content: "Search by Tags";
}
.dialog-close::before,
.mask-close::before

View File

@ -437,6 +437,9 @@ label[for="box-have"]::after
.control-div .search-close::before{
content: "検索を閉じる";
}
.control-div .search-share::before{
content: "検索を分け合う";
}
.dialog-search-string .dialog-title::before
{
content: "タグで検索";

View File

@ -429,6 +429,9 @@ label[for="have-8-latent-slot"]::after
.control-div .search-close::before{
content: "찾기 닫기";
}
.control-div .search-share::before{
content: "검색 공유하기";
}
.dialog-search-string .dialog-title::before
{
content: "태그로 검색";

View File

@ -441,6 +441,9 @@ label[for="box-have"]::after
.control-div .search-close::before{
content: "關閉搜索";
}
.control-div .search-share::before{
content: "分享搜索";
}
.dialog-search-string .dialog-title::before
{
content: "以標簽搜索";

View File

@ -438,6 +438,9 @@ label[for="box-have"]::after
.control-div .search-close::before{
content: "关闭搜索";
}
.control-div .search-share::before{
content: "分享搜索";
}
.dialog-search-string .dialog-title::before
{
content: "以標簽搜索";

View File

@ -1062,6 +1062,7 @@ var formation = new Formation(teamsCount,5);
<button class="search-start"><!--开始搜索--></button>
<button class="search-close"><!--关闭搜索--></button>
<button class="search-clear"><!--清空搜索条件--></button>
<button class="search-share"><!--分享搜索内容--></button>
<div class="additional-div"><!--额外显示栏-->
<input type="checkbox" class="config-checkbox-ipt" name="add-show-CD" id="add-show-CD"><label class="config-checkbox-lbl add-show-CD-label" for="add-show-CD"><div class="config-checkbox-lbl-cicle"></div></label>
<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities" id="add-show-abilities"><label class="config-checkbox-lbl add-show-abilities-label" for="add-show-abilities"><div class="config-checkbox-lbl-cicle"></div></label>
@ -1274,6 +1275,13 @@ var formation = new Formation(teamsCount,5);
<div class="skill-datail-parsed"></div>
</div>
</div>
<div class="dialog dialog-show-any-string display-none">
<div class="dialog-title"></div>
<div class="dialog-content">
<input type="text" class="string-value" readonly /><button class="string-copy"></button>
</div>
<div class="dialog-control"><button class="dialog-close brown-button"></button></div>
</div>
<div class="dialog dialog-search-string display-none">
<div class="dialog-title"></div>
<div class="dialog-content"></div>
@ -1376,7 +1384,7 @@ var formation = new Formation(teamsCount,5);
<li><label for="dungeon-rcv"></label><input id="dungeon-rcv" type="number" min=0 step=1 value=1 /></li>
</ul>
</div>
<div class="dialog-control"><button class="dialog-clear brown-button"></button><button class="dialog-confirm brown-button"></button></div>
<div class="dialog-control"><button class="dialog-clear brown-button"></button><button class="dialog-close brown-button"></button><button class="dialog-confirm brown-button"></button></div>
</div>
<div id="player-data-frame" class="mask display-none">

View File

@ -676,7 +676,7 @@ function calculateAbility_max(id, solo, teamsCount, maxLevel = 110) {
}
}
//搜索卡片用
function searchCards(cards, {attr:[attr1, attr2], fixMainColor, types, typeAndOr, rares, awokens, sawokens, equalAk, incSawoken, canAssist, canLv110, is8Latent}) {
function searchCards(cards, {attrs:[attr1, attr2], fixMainColor, types, typeAndOr, rares, awokens, sawokens, equalAk, incSawoken, canAssist, canLv110, is8Latent}) {
let cardsRange = cards.concat(); //这里需要复制一份原来的数组不然若无筛选后面的排序会改变初始Cards
if (canAssist) cardsRange = cardsRange.filter(card=>card.canAssist);
if (canLv110) cardsRange = cardsRange.filter(card=>card.limitBreakIncr>0);

122
script.js
View File

@ -1366,7 +1366,7 @@ function reloadFormationData(event) {
} catch (error) {
return null;
}
})(sessionStorage.getItem('search-options'));
})(getQueryString('search-options') || sessionStorage.getItem('search-options'));
if (searchOptions) {
editBox?.querySelector(".search-box")?.recoverySearchStatus(searchOptions);
}
@ -2421,7 +2421,7 @@ function initialize() {
//显示HP的详细值
const hpDetailDialog = formationBox.querySelector(".dialog-hp-detail");
hpDetailDialog.show = function(reduceAttrRanges, tHP, tHPNoAwoken)
hpDetailDialog.initialing = function(reduceAttrRanges, tHP, tHPNoAwoken)
{
const dialogContent = this.querySelector(".dialog-content");
const fragment = document.createDocumentFragment();
@ -2501,14 +2501,10 @@ function initialize() {
dialogContent.innerHTML = "";
dialogContent.appendChild(fragment);
this.classList.remove(className_displayNone);
}
hpDetailDialog.close = function()
{
this.classList.add(className_displayNone);
}
const hpDetailDialog_Close = hpDetailDialog.querySelector(".dialog-close");
hpDetailDialog_Close.onclick = function(){hpDetailDialog.close();};
//初始化Dialog
dialogInitialing(hpDetailDialog);
const reduceDetailsBars = Array.from(formationBox.querySelectorAll(".tIf-total-hp .reduce-details"));
reduceDetailsBars.forEach(bar => {
bar.onclick = function(){
@ -2518,7 +2514,7 @@ function initialize() {
//设置地下城倍率
const dungeonEnchanceDialog = document.body.querySelector(".dialog-dungeon-enchance");
dungeonEnchanceDialog.show = function(formation)
dungeonEnchanceDialog.initialing = function(formation)
{
const dialogContent = this.querySelector(".dialog-content");
const rareDoms = Array.from(dialogContent.querySelectorAll(".rare-list .rare-check"));
@ -2542,9 +2538,8 @@ function initialize() {
this.classList.remove(className_displayNone);
}
dungeonEnchanceDialog.close = function(){
this.classList.add(className_displayNone);
}
//初始化Dialog
dialogInitialing(dungeonEnchanceDialog);
const dungeonEnchanceDialogConfirm = dungeonEnchanceDialog.querySelector(".dialog-confirm");
dungeonEnchanceDialogConfirm.onclick = function(){
const dialogContent = dungeonEnchanceDialog.querySelector(".dialog-content");
@ -2667,12 +2662,14 @@ function initialize() {
{
input.focus(); //设input为焦点
input.select(); //选择全部
if (document.execCommand('copy')) {
if (navigator?.clipboard?.writeText) { //优先使用新API
navigator.clipboard.writeText(input.value);
} else if (document.execCommand('copy')) {
document.execCommand('copy');
}
//input.blur(); //取消焦点
}
stringSearchDialog.show = function(originalStrArr = [], additionalStrArr = [])
stringSearchDialog.initialing = function(originalStrArr = [], additionalStrArr = [])
{
const stringSearchContent = this.querySelector(".dialog-content");
const fragment = document.createDocumentFragment();
@ -2713,14 +2710,30 @@ function initialize() {
}
stringSearchContent.innerHTML = "";
stringSearchContent.appendChild(fragment);
this.classList.remove(className_displayNone);
}
stringSearchDialog.close = function()
{
this.classList.add(className_displayNone);
}
const stringSearchDialog_Close = stringSearchDialog.querySelector(".dialog-close");
stringSearchDialog_Close.onclick = function(){stringSearchDialog.close();};
function dialogShowFunction(...arg){
this?.initialing(...arg); //自身初始化
this.classList.remove(className_displayNone);
};
function dialogCloseFunction(){
this.classList.add(className_displayNone);
};
function dialogCloseButtonFunction(){
this.parentElement.parentElement.close();
};
function dialogInitialing(dialog){
dialog.show = dialogShowFunction;
dialog.close = dialogCloseFunction;
const closeButton = dialog.querySelector(".dialog-close");
closeButton.onclick = dialogCloseButtonFunction;
}
//初始化Dialog
dialogInitialing(stringSearchDialog);
const mAltName = smonsterinfoBox.querySelector(".monster-altName");
mAltName.onclick = function() { //搜索合作
@ -3186,7 +3199,27 @@ function initialize() {
const searchStart = s_controlDiv.querySelector(".search-start");
const searchClose = s_controlDiv.querySelector(".search-close");
const searchClear = s_controlDiv.querySelector(".search-clear");
const searchShare = s_controlDiv.querySelector(".search-share");
searchShare.onclick = function() {
const options = searchBox.getSearchOptions();
const optionJSON = JSON.stringify(options);
const locationURL = new URL(location);
locationURL.searchParams.set('search-options', optionJSON);
const idArr = searchMonList.originalHeads?.map(head=>head.card.id) ?? [];
locationURL.searchParams.set('show-search', JSON.stringify(idArr));
showAnyStringDialog.show(locationURL.toString());
//prompt(undefined, locationURL.toString());
}
const showAnyStringDialog = settingBox.querySelector(".dialog-show-any-string");
showAnyStringDialog.initialing = function(str) {
const ipt = this.querySelector(".string-value");
ipt.value = str;
}
showAnyStringDialog.querySelector('.string-copy').onclick = function(){
copyString(showAnyStringDialog.querySelector(".string-value"));
}
//初始化Dialog
dialogInitialing(showAnyStringDialog);
function returnCheckedInput(ipt) {
return ipt.checked;
@ -3331,8 +3364,7 @@ function initialize() {
filterUl.value = filter.join("|");
}
}
searchStart.onclick = function(event) {
let customAdditionalFunction = [];
searchBox.getSearchOptions = function(){
let attr1 = Number(returnRadiosValue(s_attr1s)) || 0;
let attr2 = Number(returnRadiosValue(s_attr2s)) || 0;
@ -3350,7 +3382,7 @@ function initialize() {
});
const options = {
attr:[attr1, attr2],
attrs:[attr1, attr2],
fixMainColor: s_fixMainColor.checked,
types,
typeAndOr: s_typeAndOr.checked,
@ -3362,16 +3394,22 @@ function initialize() {
canAssist: s_canAssist.checked,
canLv110: s_canLevelLimitBreakthrough.checked,
is8Latent: s_have8LatentSlot.checked,
specialFilters: Array.from(specialFilterUl.querySelectorAll(".special-filter"))
.map(select=>select.value.split("|").map(Number)) //储存设置用于页面刷新的状态恢复
};
return options;
}
searchStart.onclick = function(event) {
let customAdditionalFunction = [];
const options = searchBox.getSearchOptions();
let searchResult = searchCards(Cards, options);
//进行特殊附加搜索
const specialFilters = Array.from(specialFilterUl.querySelectorAll(".special-filter")).map(select=>{
const indexs = select.value.split("|").map(Number);
const funcObj = indexs.length > 1 ? specialSearchFunctions[indexs[0]].functions[indexs[1]] : specialSearchFunctions[indexs[0]];
return funcObj;
});
const specialFilters = options.specialFilters.map(([name1, name2])=>
name2 !== undefined ? specialSearchFunctions[name1].functions[name2] : specialSearchFunctions[name1]
);
searchResult = specialFilters.reduce((pre,funcObj)=>
{
if (!funcObj) return pre;
@ -3379,26 +3417,14 @@ function initialize() {
return funcObj.function(pre); //结果进一步筛选
}, searchResult);
//储存设置用于页面刷新的状态恢复
options.specialFilters = Array.from(specialFilterUl.querySelectorAll(".special-filter"))
.map(select=>select.value.split("|").map(Number));
sessionStorage.setItem('search-options',JSON.stringify(options, [
"attr1",
"attr2",
"fixMainColor",
"types",
"typeAndOr",
"rares",
"awokens",
"sawokens",
"equalAk",
"incSawoken",
"canAssist",
"canLv110",
"is8Latent",
"specialFilters",
]));
const optionJSON = JSON.stringify(options);
sessionStorage.setItem('search-options', optionJSON);
// if (event.ctrlKey) {
// const locationURL = new URL(location);
// locationURL.searchParams.set('search-options', optionJSON);
// locationURL.searchParams.set('show-search', JSON.stringify(searchResult.map(card=>card.id)));
// history.replaceState(null, null, locationURL);
// }
//显示搜索结果
showSearch(searchResult, customAdditionalFunction);
@ -3480,7 +3506,7 @@ function initialize() {
if (isGuideMod)
{
const idArr = searchMonList.originalHeads ? searchMonList.originalHeads.map(head=>head.card.id) : [];
const idArr = searchMonList.originalHeads?.map(head=>head.card.id) ?? [];
const state = {searchArr:idArr,mid:newId};
const locationURL = new URL(location);
if (newId === 0) {

View File

@ -6847,7 +6847,7 @@ const cachesMap = new Map([
],
[
"multi.html",
"db4232f8d4a45d027594af5322053ba3"
"879e15f7cbd65d01b756bf4626b7b24b"
],
[
"script-custom_elements.js",
@ -6863,15 +6863,15 @@ const cachesMap = new Map([
],
[
"script-universal_function.js",
"40d4a975ec1b4086ddaf822cf8bd3435"
"fe7c78c90328699773a0ca4ceb7d7fe7"
],
[
"script.js",
"259c3cb2b00efc00ae1f33ccd9eb2071"
"eda6b45f6710044a734c7fd6915ba407"
],
[
"solo.html",
"34bafc0680d45473290fc4f3584b63c3"
"bcde6ce52dcf6b5d0126cdc0f7b26bda"
],
[
"style-monsterimages.css",
@ -6879,7 +6879,7 @@ const cachesMap = new Map([
],
[
"style.css",
"21dd5e9c2b98c0d6c85c1cb584a2bda2"
"b82995b443e150db1640e8106fe9c8d3"
],
[
"temp.js",
@ -6887,11 +6887,11 @@ const cachesMap = new Map([
],
[
"triple.html",
"4200bbf7ec2d354ef31ff4fd9fcbe66e"
"af7798d49322f58831f9236194dbb20b"
],
[
"languages/en.css",
"f63cf0ac6158c1b3669c34364eb9c9e3"
"8dc1b80748c04b946f923e4edb821c23"
],
[
"languages/en.js",
@ -6899,7 +6899,7 @@ const cachesMap = new Map([
],
[
"languages/ja.css",
"413d6d11cbe6644096fd4c813ce914a2"
"c93a2a81bcf799ae85484ecd18707fd0"
],
[
"languages/ja.js",
@ -6907,7 +6907,7 @@ const cachesMap = new Map([
],
[
"languages/ko.css",
"a1a0b0b39ff67a26eeee841624e36e79"
"0f1a9af0a066cb4f321c9ed187bd862d"
],
[
"languages/ko.js",
@ -6927,7 +6927,7 @@ const cachesMap = new Map([
],
[
"languages/zh-TW.css",
"b203dd3ac738514c27dce3906880a426"
"dd898de95f2d6453a99ffd28865f4899"
],
[
"languages/zh-TW.js",
@ -6935,7 +6935,7 @@ const cachesMap = new Map([
],
[
"languages/zh.css",
"48e3227c022f22ad51d7a163a5a3c2af"
"1ede18316ffa7ff271427d2c654ceeba"
],
[
"languages/zh.js",

View File

@ -908,6 +908,7 @@ var formation = new Formation(teamsCount,6);
<button class="search-start"><!--开始搜索--></button>
<button class="search-close"><!--关闭搜索--></button>
<button class="search-clear"><!--清空搜索条件--></button>
<button class="search-share"><!--分享搜索内容--></button>
<div class="additional-div"><!--额外显示栏-->
<input type="checkbox" class="config-checkbox-ipt" name="add-show-CD" id="add-show-CD"><label class="config-checkbox-lbl add-show-CD-label" for="add-show-CD"><div class="config-checkbox-lbl-cicle"></div></label>
<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities" id="add-show-abilities"><label class="config-checkbox-lbl add-show-abilities-label" for="add-show-abilities"><div class="config-checkbox-lbl-cicle"></div></label>
@ -1120,6 +1121,13 @@ var formation = new Formation(teamsCount,6);
<div class="skill-datail-parsed"></div>
</div>
</div>
<div class="dialog dialog-show-any-string display-none">
<div class="dialog-title"></div>
<div class="dialog-content">
<input type="text" class="string-value" readonly /><button class="string-copy"></button>
</div>
<div class="dialog-control"><button class="dialog-close brown-button"></button></div>
</div>
<div class="dialog dialog-search-string display-none">
<div class="dialog-title"></div>
<div class="dialog-content"></div>
@ -1222,7 +1230,7 @@ var formation = new Formation(teamsCount,6);
<li><label for="dungeon-rcv"></label><input id="dungeon-rcv" type="number" min=0 step=1 value=1 /></li>
</ul>
</div>
<div class="dialog-control"><button class="dialog-clear brown-button"></button><button class="dialog-confirm brown-button"></button></div>
<div class="dialog-control"><button class="dialog-clear brown-button"></button><button class="dialog-close brown-button"></button><button class="dialog-confirm brown-button"></button></div>
</div>
<div id="player-data-frame" class="mask display-none">

View File

@ -281,12 +281,17 @@ ul{
content: "关闭";
}
*/
.dialog-show-any-string {
width: 400px;
top: 100px;
position: fixed;
}
.dialog-search-string
{
width: 260px;
}
.dialog-search-string .string-copy,
.dialog-search-string .string-search
.dialog .string-copy,
.dialog .string-search
{
box-sizing: border-box;
width: 45px;
@ -298,24 +303,23 @@ ul{
border-radius: 5px;
padding: 0;
}
.dialog-search-string .string-copy::before
.dialog .string-copy::before
{
content: "📋";
}
.dialog-search-string .string-search::before
.dialog .string-search::before
{
content: "🔍";
}
.dialog-search-string .string-value
{
box-sizing: border-box;
width: calc(100% - 50px * 2);
}
.dialog-search-string .additional-string .string-value
.dialog .string-value
{
box-sizing: border-box;
width: calc(100% - 50px * 1);
}
.dialog .additional-string .string-value
{
width: calc(100% - 50px * 2);
}
/*单个怪物*/
.monster{

View File

@ -1944,6 +1944,7 @@ var formation = new Formation(teamsCount,6);
<button class="search-start"><!--开始搜索--></button>
<button class="search-close"><!--关闭搜索--></button>
<button class="search-clear"><!--清空搜索条件--></button>
<button class="search-share"><!--分享搜索内容--></button>
<div class="additional-div"><!--额外显示栏-->
<input type="checkbox" class="config-checkbox-ipt" name="add-show-CD" id="add-show-CD"><label class="config-checkbox-lbl add-show-CD-label" for="add-show-CD"><div class="config-checkbox-lbl-cicle"></div></label>
<input type="checkbox" class="config-checkbox-ipt" name="add-show-abilities" id="add-show-abilities"><label class="config-checkbox-lbl add-show-abilities-label" for="add-show-abilities"><div class="config-checkbox-lbl-cicle"></div></label>
@ -2156,6 +2157,13 @@ var formation = new Formation(teamsCount,6);
<div class="skill-datail-parsed"></div>
</div>
</div>
<div class="dialog dialog-show-any-string display-none">
<div class="dialog-title"></div>
<div class="dialog-content">
<input type="text" class="string-value" readonly /><button class="string-copy"></button>
</div>
<div class="dialog-control"><button class="dialog-close brown-button"></button></div>
</div>
<div class="dialog dialog-search-string display-none">
<div class="dialog-title"></div>
<div class="dialog-content"></div>
@ -2258,7 +2266,7 @@ var formation = new Formation(teamsCount,6);
<li><label for="dungeon-rcv"></label><input id="dungeon-rcv" type="number" min=0 step=1 value=1 /></li>
</ul>
</div>
<div class="dialog-control"><button class="dialog-clear brown-button"></button><button class="dialog-confirm brown-button"></button></div>
<div class="dialog-control"><button class="dialog-clear brown-button"></button><button class="dialog-close brown-button"></button><button class="dialog-confirm brown-button"></button></div>
</div>
<div id="player-data-frame" class="mask display-none">