cxykevin
/
sacn_comments
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成iframe适配，支持js插入

This commit is contained in:
cxykevin 2024-09-11 22:42:07 +08:00
parent 7bb80e84f6
commit 06cad663e0
5 changed files with 182 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -38,3 +38,4 @@ venv.bak/
idea/ idea/
# etc # etc
config.toml

18
debug/test.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Document</title>
</head>
<body>
<div id="sacn_comments"></div>
<script src="http://127.0.0.1:8020/loader.js"></script>
<script>
load_comments("/test")
</script>
</body>
</html>

7
server/main.py
View File

@ -125,9 +125,14 @@ async def init(key: str):
return 0 return 0
@app.get("/loader.js")
async def loader():
return templates.TemplateResponse("loader.js", {"request": {}})
@app.get("/{route:path}") @app.get("/{route:path}")
async def show(route: str = "", session: Annotated[str | None, Cookie()] = None): async def show(route: str = "", session: Annotated[str | None, Cookie()] = None):
if (await check_token(session) != ""): if (session is not None and await check_token(session) != ""):
islogin = 1 islogin = 1
else: else:
islogin = 0 islogin = 0

11
src/loader.js Normal file
View File

@ -0,0 +1,11 @@
window.addEventListener('message', function (event) {
if (event.data.sacn_height) {
const iframe = document.getElementById('sacn_comments');
iframe.style.height = event.data.sacn_height + 'px';
}
});
function load_comments(route) {
var tmpl = `<iframe src="http://127.0.0.1:8020` + route + `" frameborder="0" scrolling="no" width="100%" height="800px"
id="sacn_comments">Comments</iframe>`
document.getElementById('sacn_comments').outerHTML = tmpl;
}

271
src/page.html
View File

@ -18,6 +18,15 @@
padding: 0; padding: 0;
min-width: 320px; min-width: 320px;
max-width: 700px; max-width: 700px;
margin: 0 auto;
}
.root {
margin: 0;
padding: 0;
min-width: 320px;
max-width: 700px;
margin: 0 auto;
} }
.main-card { .main-card {
@ -139,139 +148,149 @@
</head> </head>
<body> <body>
<div id="comment_tmpl" class="hides"> <!-- 评论模板 --> <div class="root">
<mdui-card variant="outlined" class="comment-card"> <div id="comment_tmpl" class="hides"> <!-- 评论模板 -->
<div class="comment-user"> <!-- 用户 --> <mdui-card variant="outlined" class="comment-card">
<mdui-avatar class="comment-user-avatar"></mdui-avatar> <!-- 头像 --> <div class="comment-user"> <!-- 用户 -->
<span class="comment-user-name"></span> <!-- 用户名 --> <mdui-avatar class="comment-user-avatar"></mdui-avatar> <!-- 头像 -->
<!-- <mdui-button variant="text" class="likebtn" icon="star">0</mdui-button> 点赞按钮 --> <span class="comment-user-name"></span> <!-- 用户名 -->
<mdui-button-icon class="morebtn" variant="outlined" icon="expand_more"></mdui-button-icon> <!-- <mdui-button variant="text" class="likebtn" icon="star">0</mdui-button> 点赞按钮 -->
<!-- 展开按钮 --> <mdui-button-icon class="morebtn" variant="outlined" icon="expand_more"></mdui-button-icon>
</div> <!-- 展开按钮 -->
<div class="comment-text"> <!-- 评论内容 --> </div>
<span class="comment-text-span"></span> <div class="comment-text"> <!-- 评论内容 -->
</div> <span class="comment-text-span"></span>
</div>
</mdui-card>
</div>
<mdui-card class="main-card" variant="outlined"> <!-- 发送部分 -->
<mdui-card variant="filled" class="top-card">
<span class="title" id="comments_show_cnt">共 0 条评论</span> <!-- 评论数 -->
<mdui-button variant="filled" class="send-btn" onclick="send_msg()">发送</mdui-button>
</mdui-card>
{% if islogin==1 %}
<!-- 输入 -->
<mdui-text-field variant="outlined" rows=5 label="评论" class="input-card" id="input-card"></mdui-text-field>
{% else %}
<!-- 登录 -->
<mdui-card class="login-card" id="login-card">
<div class="info-card">
<mdui-chip class="info-card-text" onclick="login()">登录</mdui-chip>
<span class="info-card-text">进行评论</span>
</div>
</mdui-card>
{% endif %}
</mdui-card> </mdui-card>
<div id="insert_pos" class="hides"></div> <!-- 插入位置 -->
<div class="show-more-card"> <!-- 显示更多 -->
<mdui-chip class="show-more-chip" elevated onclick="next_page()">点我显示更多</mdui-chip>
</div>
</div> </div>
<mdui-card class="main-card" variant="outlined"> <!-- 发送部分 --> <script>
<mdui-card variant="filled" class="top-card">
<span class="title" id="comments_show_cnt">共 0 条评论</span> <!-- 评论数 -->
<mdui-button variant="filled" class="send-btn" onclick="send_msg()">发送</mdui-button>
</mdui-card>
{% if islogin==1 %}
<!-- 输入 -->
<mdui-text-field variant="outlined" rows=5 label="评论" class="input-card" id="input-card"></mdui-text-field>
{% else %}
<!-- 登录 -->
<mdui-card class="login-card" id="login-card">
<div class="info-card">
<mdui-chip class="info-card-text" onclick="login()">登录</mdui-chip>
<span class="info-card-text">进行评论</span>
</div>
</mdui-card>
{% endif %}
</mdui-card>
<div id="insert_pos" class="hides"></div> <!-- 插入位置 -->
<div class="show-more-card"> <!-- 显示更多 -->
<mdui-chip class="show-more-chip" elevated onclick="next_page()">点我显示更多</mdui-chip>
</div>
</body>
<script>
setTimeout(function () {
var hashs = window.location.hash
if (hashs !== "") {
var exp = /(?<=#access_token\=).*(?=&token_type)/g
var res = hashs.match(exp)
if (res != null) {
var key = res[0]
var xhr = new XMLHttpRequest()
xhr.open('post', '/api/login?apikey=' + key);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname
}
}
xhr.send()
}
}
}, 200);
var old_href = window.location.href
var logined = Number("{{islogin}}")
function login() {
setTimeout(function () { setTimeout(function () {
window.location.href = "{{ui.link}}/login?redirect_url=" + old_href var hashs = window.location.hash
}, 100); if (hashs !== "") {
} var exp = /(?<=#access_token\=).*(?=&token_type)/g
var page = 1 var res = hashs.match(exp)
var comment_id = 1 if (res != null) {
function add(datas) { var key = res[0]
var virtualelem = document.createElement('div'); var xhr = new XMLHttpRequest()
virtualelem.innerHTML = document.getElementById("comment_tmpl").innerHTML; xhr.open('post', '/api/login?apikey=' + key);
xhr.onreadystatechange = function () {
for (var i = 0; i < datas.comments.length; i++) { if (xhr.readyState === 4 && xhr.status === 200) {
data = datas.comments[i]; window.location.href = window.location.protocol + "//" + window.location.host + window.location.pathname
virtualelem.getElementsByClassName("comment-user-avatar")[0].innerHTML = data.avatar; }
virtualelem.getElementsByClassName("comment-user-name")[0].innerHTML = data.username; }
virtualelem.getElementsByClassName("comment-text-span")[0].innerHTML = data.comment; xhr.send()
virtualelem.getElementsByClassName("comment-card")[0].setAttribute("id", "comment-card-id-" + comment_id.toString());
virtualelem.getElementsByClassName("morebtn")[0].setAttribute("onclick", "show_more(\"" + "comment-card-id-" + comment_id.toString() + "\")")
document.getElementById("insert_pos").insertAdjacentHTML('beforebegin', virtualelem.innerHTML);
comment_id++;
}
}
function show_more(ids) {
if (document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.contains("comment-show-all")) {
document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.remove("comment-show-all")
} else {
document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.add("comment-show-all")
}
}
function send_msg() {
if (document.getElementById("input-card").value.length < 10) {
window.parent.alert("评论内容不能少于10个字")
return
}
if (logined == 0) {
login()
return
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/send_comment?route={{route}}");
var form = new FormData();
document.getElementsByClassName("send-btn")[0].setAttribute("loading", "true")
form.append("text", document.getElementById("input-card").value);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var obj = JSON.parse(xhr.responseText);
if (obj.code == 1) {
window.parent.alert(obj.msg)
document.getElementsByClassName("send-btn")[0].removeAttribute("loading")
return
} }
location.reload() }
}, 200);
var old_href = window.location.href
var logined = Number("{{islogin}}")
function login() {
setTimeout(function () {
window.location.href = "{{ui.link}}/login?redirect_url=" + old_href
}, 100);
}
var page = 1
var comment_id = 1
function add(datas) {
var virtualelem = document.createElement('div');
virtualelem.innerHTML = document.getElementById("comment_tmpl").innerHTML;
for (var i = 0; i < datas.comments.length; i++) {
data = datas.comments[i];
virtualelem.getElementsByClassName("comment-user-avatar")[0].innerHTML = data.avatar;
virtualelem.getElementsByClassName("comment-user-name")[0].innerHTML = data.username;
virtualelem.getElementsByClassName("comment-text-span")[0].innerHTML = data.comment;
virtualelem.getElementsByClassName("comment-card")[0].setAttribute("id", "comment-card-id-" + comment_id.toString());
virtualelem.getElementsByClassName("morebtn")[0].setAttribute("onclick", "show_more(\"" + "comment-card-id-" + comment_id.toString() + "\")")
document.getElementById("insert_pos").insertAdjacentHTML('beforebegin', virtualelem.innerHTML);
comment_id++;
}
setTimeout(function () {
window.location.hash = "h=" + document.getElementsByClassName("root")[0].offsetHeight;
if (window.parent) {
window.parent.postMessage({ sacn_height: document.getElementsByClassName("root")[0].offsetHeight }, '*');
}
}, 0);
}
function show_more(ids) {
if (document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.contains("comment-show-all")) {
document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.remove("comment-show-all")
} else {
document.getElementById(ids).getElementsByClassName("comment-text")[0].classList.add("comment-show-all")
} }
} }
xhr.send(form); function send_msg() {
} if (document.getElementById("input-card").value.length < 10) {
function next_page() { window.parent.alert("评论内容不能少于10个字")
var xhr = new XMLHttpRequest(); return
xhr.open("GET", "/api/comments?route={{route}}&page=" + page);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var obj = JSON.parse(xhr.responseText);
add(obj);
document.getElementById("comments_show_cnt").innerHTML = "共 " + obj.count + " 条评论";
if (page * 5 >= obj.count) {
document.getElementsByClassName("show-more-card")[0].classList.add("hides")
}
page++;
} }
if (logined == 0) {
login()
return
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/send_comment?route={{route}}");
var form = new FormData();
document.getElementsByClassName("send-btn")[0].setAttribute("loading", "true")
form.append("text", document.getElementById("input-card").value);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var obj = JSON.parse(xhr.responseText);
if (obj.code == 1) {
window.parent.alert(obj.msg)
document.getElementsByClassName("send-btn")[0].removeAttribute("loading")
return
}
location.reload()
}
}
xhr.send(form);
} }
xhr.send(); function next_page() {
} var xhr = new XMLHttpRequest();
next_page() xhr.open("GET", "/api/comments?route={{route}}&page=" + page);
</script> xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var obj = JSON.parse(xhr.responseText);
add(obj);
document.getElementById("comments_show_cnt").innerHTML = "共 " + obj.count + " 条评论";
if (page * 5 >= obj.count) {
document.getElementsByClassName("show-more-card")[0].classList.add("hides")
}
page++;
}
}
xhr.send();
}
next_page()
</script>
</body>
</html> </html>