Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 09:30:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

♻️ mobile menu

Browse source
This commit is contained in:
Vanessa 2022-06-05 15:23:25 +08:00
parent e49f03e5a9
commit 872a6f43f0
1 changed files with 193 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

371
app/src/mobile/util/menu.ts
View file

@ -149,30 +149,34 @@ ${accountHTML}
<svg class="b3-list-item__graphic"><use xlink:href="#iconQuit"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.safeQuit}</span> <svg class="b3-list-item__graphic"><use xlink:href="#iconQuit"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.safeQuit}</span>
</div>`; </div>`;
document.getElementById("menuSearch").addEventListener(getEventName(), () => { menuElement.addEventListener(getEventName(), (event) => {
popSearch(modelElement, modelMainElement); let target = event.target as HTMLElement;
}); while (target && !target.isEqualNode(menuElement)) {
if (target.id === "menuSearch") {
document.getElementById("menuAppearance").addEventListener(getEventName(), () => { popSearch(modelElement, modelMainElement);
initAppearance(modelElement, modelMainElement); event.preventDefault();
}); event.stopPropagation();
break;
document.getElementById("menuSafeQuit").addEventListener(getEventName(), () => { } else if (target.id === "menuAppearance") {
exitSiYuan(); initAppearance(modelElement, modelMainElement);
}); event.preventDefault();
event.stopPropagation();
document.getElementById("menuAbout").addEventListener(getEventName(), (event) => { break;
event.stopPropagation(); } else if (target.id === "menuSafeQuit") {
event.preventDefault(); exitSiYuan();
closePanel(); event.preventDefault();
if (!window.siyuan.config.localIPs || window.siyuan.config.localIPs.length === 0 || event.stopPropagation();
(window.siyuan.config.localIPs.length === 1 && window.siyuan.config.localIPs[0] === "")) { break;
window.siyuan.config.localIPs = ["127.0.0.1"]; } else if (target.id === "menuAbout") {
} closePanel();
modelElement.style.top = "0"; if (!window.siyuan.config.localIPs || window.siyuan.config.localIPs.length === 0 ||
modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconInfo"></use>'; (window.siyuan.config.localIPs.length === 1 && window.siyuan.config.localIPs[0] === "")) {
modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.about; window.siyuan.config.localIPs = ["127.0.0.1"];
modelMainElement.innerHTML = `<div class="b3-label fn__flex"> }
modelElement.style.top = "0";
modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconInfo"></use>';
modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.about;
modelMainElement.innerHTML = `<div class="b3-label fn__flex">
<div class="fn__flex-1"> <div class="fn__flex-1">
${window.siyuan.languages.about11} ${window.siyuan.languages.about11}
<div class="b3-label__text">${window.siyuan.languages.about12}</div> <div class="b3-label__text">${window.siyuan.languages.about12}</div>
@ -249,92 +253,100 @@ ${accountHTML}
<div style="color:var(--b3-theme-surface);font-family: cursive;">会泽百家&nbsp;至公天下</div> <div style="color:var(--b3-theme-surface);font-family: cursive;">会泽百家&nbsp;至公天下</div>
${window.siyuan.languages.about1} ${window.siyuan.languages.about1}
</div>`; </div>`;
const authCodeElement = modelMainElement.querySelector("#authCode") as HTMLInputElement; const authCodeElement = modelMainElement.querySelector("#authCode") as HTMLInputElement;
authCodeElement.addEventListener("click", () => { authCodeElement.addEventListener("click", () => {
setAccessAuthCode(); setAccessAuthCode();
}); });
modelMainElement.querySelector("#token").addEventListener("click", () => { modelMainElement.querySelector("#token").addEventListener("click", () => {
writeText(window.siyuan.config.api.token); writeText(window.siyuan.config.api.token);
}); });
modelMainElement.querySelector("#exportData").addEventListener("click", () => { modelMainElement.querySelector("#exportData").addEventListener("click", () => {
fetchPost("/api/export/exportData", {}, response => { fetchPost("/api/export/exportData", {}, response => {
if (window.JSAndroid) { if (window.JSAndroid) {
window.JSAndroid.openExternal(response.data.zip); window.JSAndroid.openExternal(response.data.zip);
return;
}
window.location.href = response.data.zip;
});
});
modelMainElement.querySelector("#importData").addEventListener("change", (event: InputEvent & { target: HTMLInputElement }) => {
const formData = new FormData();
formData.append("file", event.target.files[0]);
fetchPost("/api/import/importData", formData);
});
const networkServeElement = modelMainElement.querySelector("#networkServe") as HTMLInputElement;
networkServeElement.addEventListener("change", () => {
fetchPost("/api/system/setNetworkServe", {networkServe: networkServeElement.checked}, () => {
exitSiYuan();
});
});
event.preventDefault();
event.stopPropagation();
break;
} else if (target.id === "menuNewDaily") {
newDailyNote();
event.preventDefault();
event.stopPropagation();
break;
} else if (target.id === "menuNewNotebook") {
newNotebook();
event.preventDefault();
event.stopPropagation();
break;
} else if (target.id === "menuHelp") {
mountHelp();
event.preventDefault();
event.stopPropagation();
break;
} else if (target.id === "menuLock") {
fetchPost("/api/system/logoutAuth", {}, () => {
window.location.href = "/";
});
event.preventDefault();
event.stopPropagation();
break;
} else if (target.id === "menuSync") {
if (!needSubscribe()) {
closePanel();
modelElement.style.top = "0";
modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconCloud"></use>';
modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.cloud;
modelMainElement.innerHTML = repos.genHTML();
repos.element = modelMainElement;
repos.bindEvent();
}
event.preventDefault();
event.stopPropagation();
break;
} else if (target.id === "menuSyncNow") {
if (needSubscribe()) {
return; return;
} }
window.location.href = response.data.zip; if (!window.siyuan.config.sync.enabled) {
}); showMessage(window.siyuan.languages._kernel[124]);
}); return;
modelMainElement.querySelector("#importData").addEventListener("change", (event: InputEvent & { target: HTMLInputElement }) => { }
const formData = new FormData(); fetchPost("/api/sync/performSync", {});
formData.append("file", event.target.files[0]); event.preventDefault();
fetchPost("/api/import/importData", formData); event.stopPropagation();
}); break;
const networkServeElement = modelMainElement.querySelector("#networkServe") as HTMLInputElement; } else if (target.id === "menuHistory" && !window.siyuan.config.readonly) {
networkServeElement.addEventListener("change", () => { openHistory();
fetchPost("/api/system/setNetworkServe", {networkServe: networkServeElement.checked}, () => { event.preventDefault();
exitSiYuan(); event.stopPropagation();
}); break;
}); } else if (target.id === "menuAccount") {
}); event.preventDefault();
document.getElementById("menuNewDaily").addEventListener(getEventName(), () => { event.stopPropagation();
newDailyNote(); closePanel();
}); if (document.querySelector("#menuAccount img")) {
document.getElementById("menuNewNotebook").addEventListener(getEventName(), () => { showAccountInfo(modelElement, modelMainElement);
newNotebook(); return;
}); }
document.getElementById("menuHelp").addEventListener(getEventName(), () => { modelElement.style.top = "0";
mountHelp(); modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconAccount"></use>';
}); modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.login;
document.getElementById("menuLock").addEventListener(getEventName(), () => { modelMainElement.innerHTML = `<div class="b3-form__space" id="form1">
fetchPost("/api/system/logoutAuth", {}, () => {
window.location.href = "/";
});
});
document.getElementById("menuSync").addEventListener(getEventName(), (event) => {
event.stopPropagation();
event.preventDefault();
if (!needSubscribe()) {
closePanel();
modelElement.style.top = "0";
modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconCloud"></use>';
modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.cloud;
modelMainElement.innerHTML = repos.genHTML();
repos.element = modelMainElement;
repos.bindEvent();
}
});
document.getElementById("menuSyncNow").addEventListener(getEventName(), (event) => {
event.stopPropagation();
event.preventDefault();
if (needSubscribe()) {
return;
}
if (!window.siyuan.config.sync.enabled) {
showMessage(window.siyuan.languages._kernel[124]);
return;
}
fetchPost("/api/sync/performSync", {});
});
if (!window.siyuan.config.readonly) {
document.getElementById("menuHistory").addEventListener(getEventName(), (event) => {
event.stopPropagation();
event.preventDefault();
openHistory();
});
}
document.getElementById("menuAccount").addEventListener(getEventName(), (event) => {
event.stopPropagation();
event.preventDefault();
closePanel();
if (document.querySelector("#menuAccount img")) {
showAccountInfo(modelElement, modelMainElement);
return;
}
modelElement.style.top = "0";
modelElement.querySelector(".toolbar__icon").innerHTML = '<use xlink:href="#iconAccount"></use>';
modelElement.querySelector(".toolbar__text").textContent = window.siyuan.languages.login;
modelMainElement.innerHTML = `<div class="b3-form__space" id="form1">
<div class="b3-form__icon"> <div class="b3-form__icon">
<svg class="b3-form__icon-icon"><use xlink:href="#iconAccount"></use></svg> <svg class="b3-form__icon-icon"><use xlink:href="#iconAccount"></use></svg>
<input id="userName" class="b3-text-field fn__block b3-form__icon-input" placeholder="${window.siyuan.languages.accountName}"> <input id="userName" class="b3-text-field fn__block b3-form__icon-input" placeholder="${window.siyuan.languages.accountName}">
@ -373,82 +385,85 @@ ${accountHTML}
<div class="fn__hr--b"></div> <div class="fn__hr--b"></div>
<button id="login2" class="b3-button fn__block">${window.siyuan.languages.login}</button> <button id="login2" class="b3-button fn__block">${window.siyuan.languages.login}</button>
</div>`; </div>`;
const agreeLoginElement = modelMainElement.querySelector("#agreeLogin") as HTMLInputElement; const agreeLoginElement = modelMainElement.querySelector("#agreeLogin") as HTMLInputElement;
const userNameElement = modelMainElement.querySelector("#userName") as HTMLInputElement; const userNameElement = modelMainElement.querySelector("#userName") as HTMLInputElement;
const userPasswordElement = modelMainElement.querySelector("#userPassword") as HTMLInputElement; const userPasswordElement = modelMainElement.querySelector("#userPassword") as HTMLInputElement;
const captchaImgElement = modelMainElement.querySelector("#captchaImg") as HTMLInputElement; const captchaImgElement = modelMainElement.querySelector("#captchaImg") as HTMLInputElement;
const captchaElement = modelMainElement.querySelector("#captcha") as HTMLInputElement; const captchaElement = modelMainElement.querySelector("#captcha") as HTMLInputElement;
const twofactorAuthCodeElement = modelMainElement.querySelector("#twofactorAuthCode") as HTMLInputElement; const twofactorAuthCodeElement = modelMainElement.querySelector("#twofactorAuthCode") as HTMLInputElement;
const loginBtnElement = modelMainElement.querySelector("#login") as HTMLButtonElement; const loginBtnElement = modelMainElement.querySelector("#login") as HTMLButtonElement;
const login2BtnElement = modelMainElement.querySelector("#login2") as HTMLButtonElement; const login2BtnElement = modelMainElement.querySelector("#login2") as HTMLButtonElement;
userNameElement.focus(); userNameElement.focus();
let token: string; let token: string;
let needCaptcha: string; let needCaptcha: string;
agreeLoginElement.addEventListener("click", () => { agreeLoginElement.addEventListener("click", () => {
if (agreeLoginElement.checked) { if (agreeLoginElement.checked) {
loginBtnElement.removeAttribute("disabled"); loginBtnElement.removeAttribute("disabled");
} else { } else {
loginBtnElement.setAttribute("disabled", "disabled"); loginBtnElement.setAttribute("disabled", "disabled");
}
});
captchaImgElement.addEventListener("click", () => {
captchaImgElement.setAttribute("src", `https://ld246.com/captcha/login?needCaptcha=${needCaptcha}&t=${new Date().getTime()}`);
});
loginBtnElement.addEventListener("click", () => {
fetchPost("/api/account/login", {
userName: userNameElement.value.replace(/(^\s*)|(\s*$)/g, ""),
userPassword: md5(userPasswordElement.value),
captcha: captchaElement.value.replace(/(^\s*)|(\s*$)/g, ""),
}, (data) => {
if (data.code === 1) {
showMessage(data.msg);
if (data.data.needCaptcha) {
// 验证码
needCaptcha = data.data.needCaptcha;
captchaElement.parentElement.classList.remove("fn__none");
captchaElement.previousElementSibling.setAttribute("src",
`https://ld246.com/captcha/login?needCaptcha=${data.data.needCaptcha}`);
captchaElement.value = "";
return;
} }
return;
}
if (data.code === 10) {
// 两步验证
modelMainElement.querySelector("#form1").classList.add("fn__none");
modelMainElement.querySelector("#form2").classList.remove("fn__none");
twofactorAuthCodeElement.focus();
token = data.data.token;
return;
}
fetchPost("/api/setting/getCloudUser", {
token: data.data.token,
}, response => {
window.siyuan.user = response.data;
closePanel();
document.getElementById("menuAccount").innerHTML = `<img class="b3-list-item__graphic" src="${window.siyuan.user.userAvatarURL}"/>
<span class="b3-list-item__text">${window.siyuan.user.userName}</span>`;
}); });
}); captchaImgElement.addEventListener("click", () => {
}); captchaImgElement.setAttribute("src", `https://ld246.com/captcha/login?needCaptcha=${needCaptcha}&t=${new Date().getTime()}`);
});
loginBtnElement.addEventListener("click", () => {
fetchPost("/api/account/login", {
userName: userNameElement.value.replace(/(^\s*)|(\s*$)/g, ""),
userPassword: md5(userPasswordElement.value),
captcha: captchaElement.value.replace(/(^\s*)|(\s*$)/g, ""),
}, (data) => {
if (data.code === 1) {
showMessage(data.msg);
if (data.data.needCaptcha) {
// 验证码
needCaptcha = data.data.needCaptcha;
captchaElement.parentElement.classList.remove("fn__none");
captchaElement.previousElementSibling.setAttribute("src",
`https://ld246.com/captcha/login?needCaptcha=${data.data.needCaptcha}`);
captchaElement.value = "";
return;
}
return;
}
if (data.code === 10) {
// 两步验证
modelMainElement.querySelector("#form1").classList.add("fn__none");
modelMainElement.querySelector("#form2").classList.remove("fn__none");
twofactorAuthCodeElement.focus();
token = data.data.token;
return;
}
fetchPost("/api/setting/getCloudUser", {
token: data.data.token,
}, response => {
window.siyuan.user = response.data;
closePanel();
document.getElementById("menuAccount").innerHTML = `<img class="b3-list-item__graphic" src="${window.siyuan.user.userAvatarURL}"/>
<span class="b3-list-item__text">${window.siyuan.user.userName}</span>`;
});
});
});
login2BtnElement.addEventListener("click", () => { login2BtnElement.addEventListener("click", () => {
fetchPost("/api/setting/login2faCloudUser", { fetchPost("/api/setting/login2faCloudUser", {
code: twofactorAuthCodeElement.value, code: twofactorAuthCodeElement.value,
token, token,
}, faResponse => { }, faResponse => {
fetchPost("/api/setting/getCloudUser", { fetchPost("/api/setting/getCloudUser", {
token: faResponse.data.token, token: faResponse.data.token,
}, response => { }, response => {
window.siyuan.user = response.data; window.siyuan.user = response.data;
closePanel(); closePanel();
document.getElementById("menuAccount").innerHTML = `<img class="b3-list-item__graphic" src="${window.siyuan.user.userAvatarURL}"/> document.getElementById("menuAccount").innerHTML = `<img class="b3-list-item__graphic" src="${window.siyuan.user.userAvatarURL}"/>
<span class="b3-list-item__text">${window.siyuan.user.userName}</span>`; <span class="b3-list-item__text">${window.siyuan.user.userName}</span>`;
});
});
}); });
}); break;
}); }
target = target.parentElement;
}
}); });
menuElement.style.right = "0"; menuElement.style.right = "0";
scrimElement.classList.remove("fn__none"); scrimElement.classList.remove("fn__none");
}); });