mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add textbox contents in settings
This commit is contained in:
parent
db123dfcd3
commit
93293bf141
@ -2,8 +2,7 @@
|
|||||||
增强哔哩哔哩Web端体验的油猴脚本.
|
增强哔哩哔哩Web端体验的油猴脚本.
|
||||||
|
|
||||||
**注: 作为[原脚本](bilibili-touch.user.js)的工程化形式,目前尚未完成,在完成之前可以先使用[原脚本](bilibili-touch.user.js).([安装原脚本](https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-touch.user.js))**
|
**注: 作为[原脚本](bilibili-touch.user.js)的工程化形式,目前尚未完成,在完成之前可以先使用[原脚本](bilibili-touch.user.js).([安装原脚本](https://github.com/the1812/Bilibili-Evolved/raw/master/bilibili-touch.user.js))**
|
||||||
# 2018年7月20日后的变化
|
|
||||||
新版播放页面的播放器被b站重新设计,新样式对其的适配还需改进.
|
|
||||||
# 功能概览
|
# 功能概览
|
||||||
## 新样式
|
## 新样式
|
||||||
改变顶栏的样式,并有一些界面微调,适用于主站和新版播放器.暂不支持直播,相簿.
|
改变顶栏的样式,并有一些界面微调,适用于主站和新版播放器.暂不支持直播,相簿.
|
||||||
|
|||||||
@ -134,7 +134,11 @@
|
|||||||
{
|
{
|
||||||
for (const key in settings)
|
for (const key in settings)
|
||||||
{
|
{
|
||||||
settings[key] = GM_getValue(key, settings[key]);
|
const value = GM_getValue(key, settings[key]);
|
||||||
|
if (value !== undefined)
|
||||||
|
{
|
||||||
|
settings[key] = value;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function saveSettings()
|
function saveSettings()
|
||||||
@ -251,11 +255,47 @@
|
|||||||
{
|
{
|
||||||
loadSettings();
|
loadSettings();
|
||||||
reload(resources);
|
reload(resources);
|
||||||
|
|
||||||
|
// gui-settings.js
|
||||||
const svgData = {
|
const svgData = {
|
||||||
settings: "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z",
|
settings: "M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z",
|
||||||
close: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",
|
close: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z",
|
||||||
ok: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
|
ok: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
|
||||||
};
|
};
|
||||||
|
const textValidate = {
|
||||||
|
"customStyleColor": text =>
|
||||||
|
{
|
||||||
|
const match = text.match(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/);
|
||||||
|
if (match)
|
||||||
|
{
|
||||||
|
if (text.length < 7)
|
||||||
|
{
|
||||||
|
return `#${text[0]}${text[0]}${text[1]}${text[1]}${text[2]}${text[2]}`;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
return settings.customStyleColor;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"blurBackgroundOpacity": text =>
|
||||||
|
{
|
||||||
|
const match = text.match(/^([-\+]?\d+)(\.\d+)?$/);
|
||||||
|
if (match)
|
||||||
|
{
|
||||||
|
const value = parseFloat(text);
|
||||||
|
if (value >= 0 && value <= 1)
|
||||||
|
{
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return settings.blurBackgroundOpacity;
|
||||||
|
}
|
||||||
|
};
|
||||||
waitForQuery()(
|
waitForQuery()(
|
||||||
() => $(".gr__bilibili_com>body"),
|
() => $(".gr__bilibili_com>body"),
|
||||||
it => it.length > 0,
|
it => it.length > 0,
|
||||||
@ -278,6 +318,13 @@
|
|||||||
const settingsBox = resources.data.guiSettingsDom;
|
const settingsBox = resources.data.guiSettingsDom;
|
||||||
if (settingsBox)
|
if (settingsBox)
|
||||||
{
|
{
|
||||||
|
const reloadGuiSettings = () =>
|
||||||
|
{
|
||||||
|
for (const key in settings)
|
||||||
|
{
|
||||||
|
$(`input[type='checkbox'][key='${key}']`).prop("checked", settings[key]);
|
||||||
|
}
|
||||||
|
};
|
||||||
$("body").append(settingsBox);
|
$("body").append(settingsBox);
|
||||||
$(".gui-settings-header .gui-settings-close").on("click", () =>
|
$(".gui-settings-header .gui-settings-close").on("click", () =>
|
||||||
{
|
{
|
||||||
@ -285,10 +332,18 @@
|
|||||||
});
|
});
|
||||||
$("button.save").on("click", () =>
|
$("button.save").on("click", () =>
|
||||||
{
|
{
|
||||||
$("input[type='checkbox'][key]").each((_, element) =>
|
$("input[type='checkbox'][key]")
|
||||||
{
|
.each((_, element) =>
|
||||||
settings[$(element).attr("key")] = $(element).prop("checked");
|
{
|
||||||
});
|
settings[$(element).attr("key")] = $(element).prop("checked");
|
||||||
|
});
|
||||||
|
$("input[type='text'][key]")
|
||||||
|
.each((_, element) =>
|
||||||
|
{
|
||||||
|
const key = $(element).attr("key");
|
||||||
|
const value = $(element).val();
|
||||||
|
settings[key] = textValidate[key](value);
|
||||||
|
});
|
||||||
saveSettings();
|
saveSettings();
|
||||||
const svg = $(".gui-settings-footer svg.gui-settings-ok");
|
const svg = $(".gui-settings-footer svg.gui-settings-ok");
|
||||||
if (parseInt(svg.css("width")) === 0)
|
if (parseInt(svg.css("width")) === 0)
|
||||||
@ -305,16 +360,17 @@
|
|||||||
});
|
});
|
||||||
}, 3000);
|
}, 3000);
|
||||||
}
|
}
|
||||||
|
reloadGuiSettings();
|
||||||
});
|
});
|
||||||
|
|
||||||
$(".gui-settings-close path").attr("d", svgData.close);
|
$(".gui-settings-close path").attr("d", svgData.close);
|
||||||
$(".gui-settings-ok path").attr("d", svgData.ok);
|
$(".gui-settings-ok path").attr("d", svgData.ok);
|
||||||
$(".gui-settings svg path").attr("d", svgData.settings);
|
$(".gui-settings svg path").attr("d", svgData.settings);
|
||||||
|
|
||||||
|
reloadGuiSettings();
|
||||||
const dependencies = {};
|
const dependencies = {};
|
||||||
for (const key in settings)
|
for (const key in settings)
|
||||||
{
|
{
|
||||||
$(`input[type='checkbox'][key='${key}']`).prop("checked", settings[key]);
|
|
||||||
$(`input[dependencies]`).each((_, element) =>
|
$(`input[dependencies]`).each((_, element) =>
|
||||||
{
|
{
|
||||||
dependencies[$(element).attr("key")] = $(element).attr("dependencies");
|
dependencies[$(element).attr("key")] = $(element).attr("dependencies");
|
||||||
|
|||||||
@ -54,7 +54,7 @@
|
|||||||
}
|
}
|
||||||
.gui-settings-box
|
.gui-settings-box
|
||||||
{
|
{
|
||||||
width: 400px;
|
width: 450px;
|
||||||
height: 90%;
|
height: 90%;
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
@ -127,6 +127,31 @@
|
|||||||
{
|
{
|
||||||
fill: transparent;
|
fill: transparent;
|
||||||
}
|
}
|
||||||
|
.gui-settings-textbox-container
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
.gui-settings-textbox-container span
|
||||||
|
{
|
||||||
|
margin: 0 16px;
|
||||||
|
}
|
||||||
|
.gui-settings-textbox-container input
|
||||||
|
{
|
||||||
|
border-radius: 4px;
|
||||||
|
border: none;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 100px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
background: #8884;
|
||||||
|
}
|
||||||
|
.gui-settings-textbox-container input:disabled,
|
||||||
|
.gui-settings-textbox-container input:disabled ~ span
|
||||||
|
{
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
.gui-settings-checkbox-container
|
.gui-settings-checkbox-container
|
||||||
{
|
{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@ -189,7 +189,7 @@ div.bilibili-player-video-control
|
|||||||
}
|
}
|
||||||
.bui-slider .bui-track.bui-track-video-progress .bui-bar-wrap
|
.bui-slider .bui-track.bui-track-video-progress .bui-bar-wrap
|
||||||
{
|
{
|
||||||
background: #666 !important;
|
background: #666;
|
||||||
}
|
}
|
||||||
.bilibili-player .bilibili-player-area .bilibili-player-video-control-bottom,
|
.bilibili-player .bilibili-player-area .bilibili-player-video-control-bottom,
|
||||||
.bilibili-player-video-control-bottom-left,
|
.bilibili-player-video-control-bottom-left,
|
||||||
|
|||||||
@ -19,6 +19,18 @@
|
|||||||
<span>新样式</span>
|
<span>新样式</span>
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="indent-1">
|
||||||
|
<label class="gui-settings-textbox-container">
|
||||||
|
<span>自定义颜色</span>
|
||||||
|
<input key="customStyleColor" dependencies="useNewStyle" type="text" />
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li class="indent-1">
|
||||||
|
<label class="gui-settings-textbox-container">
|
||||||
|
<span>顶栏(对顶部横幅)的透明度</span>
|
||||||
|
<input key="blurBackgroundOpacity" dependencies="useNewStyle" type="number" />
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
<li class="indent-1">
|
<li class="indent-1">
|
||||||
<label class="gui-settings-checkbox-container">
|
<label class="gui-settings-checkbox-container">
|
||||||
<input key="useDarkStyle" dependencies="useNewStyle" type="checkbox" />
|
<input key="useDarkStyle" dependencies="useNewStyle" type="checkbox" />
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user