Skip to content

Commit

Permalink
Use Bootstrap's included navigation components
Browse files Browse the repository at this point in the history
  • Loading branch information
@stevenjoezhang
stevenjoezhang committed Jun 27, 2021
1 parent e58125a commit 35c183c
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 106 deletions.
2 changes: 1 addition & 1 deletion app/js/danmaku.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function danmakuFilter(text, T1, T2, ST1, ST2, user) {
<td>${sendTime}</td>
<td>${target.text}</td>
<td>
<a href="#" onclick="searchUser(event)">${target.user}</button>
<button class="btn btn-link" onclick="searchUser(event)">${target.user}</button>
</td>
</tr>`);
}
Expand Down
6 changes: 2 additions & 4 deletions app/js/panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,8 @@ class Downloader {
this.getData();
getDanmaku(); //获取cid后，获取下载链接和弹幕信息
$("#cid").html(cid);
$("#nav").css("display", "flex");
if ($(".tab-pane").eq(1).is(":hidden")) {
changeMenu(0);
}
document.getElementById("nav").classList.remove("d-none");
document.querySelector("#nav .nav-link").click();
fetch("https://api.bilibili.com/x/web-interface/view?aid=" + aid)
.then(response => response.json())
.then(({ data }) => {
Expand Down
199 changes: 101 additions & 98 deletions app/panel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<title>Mimi Downloader</title>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid g-4 mt-3">
Expand All @@ -19,118 +20,126 @@ <h1>Mimi Downloader</h1>
<button class="btn btn-secondary" onclick="help()">帮助</button>
<button class="btn btn-secondary" onclick="about()">关于</button>
</div>
<ul class="nav nav-tabs mt-4" id="nav">
<li class="nav-item" role="presentation"><a class="nav-link active" href="javascript:changeMenu(0)">下载地址</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="javascript:changeMenu(1)">视频信息</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="javascript:changeMenu(2)">弹幕查询</a></li>
<ul class="nav nav-tabs mt-4 d-none" id="nav" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-pane-0" type="button" role="tab">下载地址</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-pane-1" type="button" role="tab">视频信息</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-pane-2" type="button" role="tab">弹幕查询</button>
</li>
</ul>
<div class="tab-pane mt-4">
<div class="mb-3">
<label class="form-label fw-bold">视频 CID：</label>
<span id="cid"></span>
<label class="form-label fw-bold">清晰度：</label>
<span id="quality"></span>
<br>
<label class="form-label fw-bold">下载弹幕：</label>
<button class="btn btn-success" onclick="xml()">.xml</button>
<button class="btn btn-primary" onclick="ass()">.ass</button>
</div>
<div id="error">
<div class="tab-content">
<div class="tab-pane fade mt-4" id="tab-pane-0">
<div class="mb-3">
<label class="form-label fw-bold">获取 PlayUrl 或下载链接出错！由于B站限制，只能下载低清晰度视频。</label>
<label class="form-label fw-bold">视频 CID：</label>
<span id="cid"></span>
<label class="form-label fw-bold">清晰度：</label>
<span id="quality"></span>
<br>
<label class="form-label fw-bold">下载弹幕：</label>
<button class="btn btn-success" onclick="xml()">.xml</button>
<button class="btn btn-primary" onclick="ass()">.ass</button>
</div>
<div id="error">
<div class="mb-3">
<label class="form-label fw-bold">获取 PlayUrl 或下载链接出错！由于B站限制，只能下载低清晰度视频。</label>
</div>
</div>
<div id="success">
<table class="table table-striped">
<thead>
<tr>
<th>编号</th>
<th>时长(s)</th>
<th>大小(MB)</th>
<th>选定</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="mb-3">
<button class="btn btn-primary" onclick="selectAll()">全选</button>
<button class="btn btn-secondary" onclick="selectReverse()">反选</button>
<button class="btn btn-danger" onclick="selectNone()">全不选</button>
</div>
<div class="mb-3 mt-4">
<label class="form-label fw-bold">下载路径</label>
<div class="input-group">
<input type="text" class="form-control" id="downloadPath">
<button class="btn btn-outline-secondary" type="button" onclick="openDialog()">浏览</button>
</div>
</div>
<div class="mb-3">
<label class="form-label fw-bold">文件名</label>
<input type="text" class="form-control" id="videoName">
</div>
<div class="mb-3">
<button class="btn btn-success" onclick="downloader.downloadAll()">下载选中片段</button>
<button class="btn btn-primary" onclick="openPath()">打开下载目录</button>
</div>
</div>
</div>
<div id="success">
<div class="tab-pane fade mt-4" id="tab-pane-1">
<table class="table table-striped">
<thead>
<tr>
<th>编号</th>
<th>时长(s)</th>
<th>大小(MB)</th>
<th>选定</th>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="tab-pane fade mt-4" id="tab-pane-2">
<div class="mb-3">
<button class="btn btn-primary" onclick="selectAll()">全选</button>
<button class="btn btn-secondary" onclick="selectReverse()">反选</button>
<button class="btn btn-danger" onclick="selectNone()">全不选</button>
<span>如果不需要过滤弹幕，以下内容留空即可</span>
</div>
<div class="mb-3 mt-4">
<label class="form-label fw-bold">下载路径</label>
<div class="mb-3">
<label class="form-label fw-bold">关键词</label>
<div class="input-group">
<input type="text" class="form-control" id="downloadPath">
<button class="btn btn-outline-secondary" type="button" onclick="openDialog()">浏览</button>
<input type="text" class="form-control" id="searchDanmaku" placeholder="不支持正则表达式">
<button class="btn btn-outline-secondary" type="button" onclick="searchDanmaku()">搜索</button>
</div>
</div>
<div class="mb-3">
<label class="form-label fw-bold">文件名</label>
<input type="text" class="form-control" id="videoName">
</div>
<div class="mb-3">
<button class="btn btn-success" onclick="downloader.downloadAll()">下载选中片段</button>
<button class="btn btn-primary" onclick="openPath()">打开下载目录</button>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="filterSwitch" onchange="filterSwitch()">
<label class="form-check-label" for="filterSwitch">
开启高级过滤器
</label>
</div>
</div>
</div>
<div class="tab-pane mt-4">
<table class="table table-striped">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="tab-pane mt-4">
<div class="mb-3">
<span>如果不需要过滤弹幕，以下内容留空即可</span>
</div>
<div class="mb-3">
<label class="form-label fw-bold">关键词</label>
<div class="input-group">
<input type="text" class="form-control" id="searchDanmaku" placeholder="不支持正则表达式">
<button class="btn btn-outline-secondary" type="button" onclick="searchDanmaku()">搜索</button>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="filterSwitch" onchange="filterSwitch()">
<label class="form-check-label" for="filterSwitch">
开启高级过滤器
</label>
</div>
<div id="filter" style="display: none;">
<div class="input-group mt-2">
<span class="input-group-text">弹幕时间</span>
<input type="text" class="form-control" id="T1" placeholder="起始(s)">
<input type="text" class="form-control" id="T2" placeholder="结束(s)">
</div>
<div class="input-group mt-2">
<span class="input-group-text">发送时间</span>
<input type="text" class="form-control" id="ST1" placeholder="起始(s)">
<input type="text" class="form-control" id="ST2" placeholder="结束(s)">
<div id="filter" style="display: none;">
<div class="input-group mt-2">
<span class="input-group-text">弹幕时间</span>
<input type="text" class="form-control" id="T1" placeholder="起始(s)">
<input type="text" class="form-control" id="T2" placeholder="结束(s)">
</div>
<div class="input-group mt-2">
<span class="input-group-text">发送时间</span>
<input type="text" class="form-control" id="ST1" placeholder="起始(s)">
<input type="text" class="form-control" id="ST2" placeholder="结束(s)">
</div>
<div class="input-group mt-2">
<span class="input-group-text">发送者</span>
<input type="text" class="form-control" id="user" placeholder="输入发送者的用户名">
</div>
</div>
<div class="input-group mt-2">
<span class="input-group-text">发送者</span>
<input type="text" class="form-control" id="user" placeholder="输入发送者的用户名">
<div class="mt-4">
<table class="table table-striped" id="danmaku">
<thead>
<tr>
<th style="width: 100px;">弹幕时间</th>
<th style="width: 140px;">发送时间</th>
<th>弹幕内容</th>
<th style="width: 100px;">发送者</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="mt-4">
<table class="table table-striped" id="danmaku">
<thead>
<tr>
<th style="width: 100px;">弹幕时间</th>
<th style="width: 140px;">发送时间</th>
<th>弹幕内容</th>
<th style="width: 100px;">发送者</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="mt-4" id="download"></div>
<img src="bg.png" id="bg" class="mt-4">
Expand Down Expand Up @@ -187,12 +196,6 @@ <h1>Mimi Downloader</h1>
showMessage(`Mimi Downloader Ver ${require("../package.json").version}\n\nWe are using Node.js ${process.versions.node}, Chromium ${process.versions.chrome}, and Electron ${process.versions.electron}. Powered by Mimi.`);
}

function changeMenu(index) {
if (!$(".tab-pane").eq(index).is(":hidden")) return;
$(".tab-pane").hide().eq(index).fadeIn();
$("#nav").find("a").removeClass("active").eq(index).addClass("active");
}

function selectAll() {
$("tbody input[type=checkbox]").prop("checked", true);
}
Expand Down
6 changes: 3 additions & 3 deletions app/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
body {
overflow-x: hidden;
}
.tab-pane, #nav {
display: none;
}
td {
word-break: break-all;
}
Expand All @@ -25,3 +22,6 @@ table pre {
#danmaku {
table-layout: fixed;
}
.btn-link {
padding: 0;
}

0 comments on commit 35c183c

Please sign in to comment.