server/mylomen-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add:本地测试跳转

Browse Source
This commit is contained in:
shaoyongjun 2024-11-01 09:52:52 +08:00
parent ba6491650c
commit c497e02416
5 changed files with 81 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
static/css/myEdit.css
View File

@ -35,17 +35,29 @@ body {
} }
header { header {
position: relative; /*position: relative;*/
top: 0; /*top: 0;*/
/* height: 8rem; */ /*border: 1px yellow solid;*/
z-index: 9999; /*!* height: 8rem; *!*/
left: 0; /*z-index: 9999;*/
right: 0; /*left: 0;*/
width: 100%; /*right: 0;*/
/*width: 100%;*/
/*响应式*/
/*display: flex;*/
/*flex-direction:column;*/
/*flex-wrap: nowrap;*/
}
main {
display: flex;
flex-direction: column;
align-items: center;
} }
#noteshare { #noteshare {
width: 90%; width: 80%;
/* width: 21cm; */ /* width: 21cm; */
min-height: 2000rem; min-height: 2000rem;
/* font-size: 1.5rem; */ /* font-size: 1.5rem; */
@ -104,7 +116,7 @@ header {
.childStyleU { .childStyleU {
text-decoration: underline; text-decoration: underline;
/*/ / 中划线 / / text-decoration: line-through;*/ /*/ / 中划线 / / text-decoration: line-through;*/
} }
.childStyleDel { .childStyleDel {
@ -121,9 +133,9 @@ header {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
width: auto; width: auto;
height: 200rem; /*height: 200rem;*/
padding: 30rem 30rem; padding: 20rem 30rem;
/*padding: 0.6rem 1rem 0.6rem 1rem;*/ /*padding: 0.6rem 1rem 0.6rem 1rem;*/
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -139,8 +151,8 @@ header {
/*border: 1px blue solid;*/ /*border: 1px blue solid;*/
margin: 0 0; margin: 0 0;
width: auto; width: auto;
height: 130rem; /*height: 130rem;*/
padding: 20rem 20rem; /*padding: 20rem 20rem;*/
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -151,3 +163,27 @@ header {
.fixStyleInnerSpan { .fixStyleInnerSpan {
margin: 0 80rem; margin: 0 80rem;
} }
@media screen and ( max-width: 768px ) {
/*当屏幕尺寸小于768px时，应用下面的css样式*/
.fixStylePosition {
display: block;
z-index: 99;
top: 0;
width: 100%;
min-height: 200rem;
margin-bottom: 3rem;
}
body{
top: 1%;
}
#_style_utils svg{
width:400rem;
height:400rem;
margin: 50rem 0;
}
main {
margin-top: 500rem;
}
}

69
static/js/lib/common/MyUtils.js
View File

@ -299,13 +299,13 @@ export class MyUtils {
console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize); console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize);
let testDiv = document.getElementById("testDevice") let testDiv = document.getElementById("testDevice")
testDiv.innerText = testDiv.innerText + testDiv.innerText = testDiv.innerText +
"\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() + // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() +
"\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) + "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) +
"\n isIOS :" + /iphone|ipad|ipod/.test(window.navigator.userAgent.toLocaleLowerCase()) + "\n isIOS :" + /iphone|ipad|ipod/.test(window.navigator.userAgent.toLocaleLowerCase()) +
"\n isAndroid :" + /android/.test(window.navigator.userAgent.toLocaleLowerCase()) + "\n isAndroid :" + /android/.test(window.navigator.userAgent.toLocaleLowerCase()) +
"\n curClientW :" + curClientW + "\n curClientW :" + curClientW +
" \n designWidth: " + designWidth + " \n designWidth: " + designWidth +
"\n -> " + nowFrontSize "\n 1rem = " + nowFrontSize
} }
@ -331,72 +331,17 @@ export class MyUtils {
} }
} }
let myEditFrontSize = document.getElementById("noteshare"); let myEditFrontSize = document.getElementById("myEdit_main");
if (document.documentElement.clientWidth <= 720) { if (document.documentElement.clientWidth <= 720) {
myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize + 'px'; myEditFrontSize.style.fontSize = (window.myEdit.ctx.editFrontSize + 6) + 'px';
} else { } else {
myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px'; myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px';
} }
// myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px';
console.log("body-frontSize: ", myEditFrontSize.style.fontSize); console.log("myEditFrontSize: ", myEditFrontSize.style.fontSize);
if (window.myEdit.ctx.isMobile) {
let testDiv = document.getElementById("testDevice"); let testDiv = document.getElementById("testDevice");
var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; testDiv.innerText += "\nmyEditFrontSize:" + myEditFrontSize.style.fontSize;
if (window.myEdit.ctx.originHeight < resizeHeight) {
console.log('Android 键盘收起啦！');
testDiv.innerText = "\nmobile: " + 'Android 键盘收起啦！' +
"\noriginHeight " + window.myEdit.ctx.originHeight +
"\nresizeHeight:" + resizeHeight +
"\ninnerHeight:" + window.innerHeight +
"\nvisualViewport.height: " + window.visualViewport.height
// Android 键盘收起后操作
let styleUtils = document.getElementById("_style_utils");
styleUtils.style.display = "none";
setTimeout(() => {
this.keyBoardHeight = window.innerHeight - window.visualViewport.height;
// console.log("mobile: ", this.keyBoardHeight);
testDiv.innerText = "\n键盘收起啦mobile: " + this.keyBoardHeight +
"\noriginHeight " + window.myEdit.ctx.originHeight +
"\nresizeHeight " + resizeHeight +
"\ninnerHeight:" + window.innerHeight +
"\nvisualViewport.height: " + window.visualViewport.height
let styleUtils = document.getElementById("_style_utils");
styleUtils.style.display = "none";
}, 800);
} else {
console.log('Android 键盘弹起啦！');
testDiv.innerText = "\nmobile: " + 'Android 键盘弹起啦！' +
"\noriginHeight " + window.myEdit.ctx.originHeight +
"\nresizeHeight " + resizeHeight +
"\ninnerHeight:" + window.innerHeight +
"\nvisualViewport.height: " + window.visualViewport.height
// Android 键盘弹起后操作
setTimeout(() => {
this.keyBoardHeight = window.innerHeight - window.visualViewport.height;
// console.log("mobile: ", this.keyBoardHeight);
testDiv.innerText = "\n键盘弹起啦mobile: " + this.keyBoardHeight +
"\noriginHeight " + window.myEdit.ctx.originHeight +
"\nresizeHeight " + resizeHeight +
"\ninnerHeight:" + window.innerHeight +
"\nvisualViewport.height: " + window.visualViewport.height
// styleUtils.style.left = 0;
let styleUtils = document.getElementById("_style_utils");
styleUtils.style.display = "block";
styleUtils.style.bottom = "500px";
}, 800);
}
window.myEdit.ctx.originHeight = resizeHeight;
}
} }
/** /**

10
static/js/lib/event/MyEventListener.js
View File

@ -72,9 +72,9 @@ export class MyEventListener {
const keyCode = window.myEdit.utils.GetKeyCode(event); const keyCode = window.myEdit.utils.GetKeyCode(event);
const metaKey = event.metaKey; const metaKey = event.metaKey;
let testDiv = document.getElementById("testDevice") // let testDiv = document.getElementById("testDevice")
testDiv.innerText = "键盘输入: keyCode:" + keyCode + // testDiv.innerText = "键盘输入: keyCode:" + keyCode +
"\nmetaKey:" + metaKey; // "\nmetaKey:" + metaKey;
//支持全屏撤销 //支持全屏撤销
if (metaKey && keyCode === 90) { if (metaKey && keyCode === 90) {
@ -102,8 +102,8 @@ export class MyEventListener {
const event = window.myEdit.utils.ParseEvent(e); const event = window.myEdit.utils.ParseEvent(e);
// console.log("input : ", event, " text: '", event.data + "'") // console.log("input : ", event, " text: '", event.data + "'")
let testDiv = document.getElementById("testDevice") let testDiv = document.getElementById("testDevice")
testDiv.innerText = testDiv.innerText + testDiv.innerText =
"\n输入内容: '" + (event.data === " ") + "'"; "\ninput: " + event.data + " isEmpty: " + (event.data === " ");
window.myEdit.biz.inputHandle(event); window.myEdit.biz.inputHandle(event);
//处理空行转换 //处理空行转换

7
static/js/lib/main.js
View File

@ -31,11 +31,11 @@ import {MyEventListener} from "./event/MyEventListener.js";
/** /**
* 默认body front-size 单位px * 默认body front-size 单位px
*/ */
editFrontSize: 14, editFrontSize: 12,
/** /**
* 设计稿宽度 375 * 设计稿宽度 375
*/ */
designWith: 1280, designWith: 375,
/** /**
* 文档的根节点 * 文档的根节点
*/ */
@ -120,7 +120,6 @@ import {MyEventListener} from "./event/MyEventListener.js";
* *
*/ */
window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true); window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true);
window.addEventListener('touchend', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true);
}()); }());
/** /**
@ -162,8 +161,6 @@ window.onload = function () {
//监听鼠标抬起事件 //监听鼠标抬起事件
document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUpOrTouchend, true); document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUpOrTouchend, true);
//监听手指抬起事件
document.getElementById("noteshare").addEventListener("touchend", window.myEdit.eventListener.MouseUpOrTouchend, true);
//这里监听鼠标按下事件 //这里监听鼠标按下事件
document.getElementById("_style_utils").addEventListener("mousedown", function (e) { document.getElementById("_style_utils").addEventListener("mousedown", function (e) {
const event = window.myEdit.utils.ParseEvent(e); const event = window.myEdit.utils.ParseEvent(e);

27
static/yanxuelu.html
View File

@ -7,7 +7,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📒</title> <title>📒</title>
<meta name="viewport" <meta name="viewport"
content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
<link rel="stylesheet" type="text/css" href="./css/normalize.css"> <link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/myEdit.css"> <link rel="stylesheet" type="text/css" href="./css/myEdit.css">
<script type="module" src="./js/lib/main.js"></script> <script type="module" src="./js/lib/main.js"></script>
@ -16,15 +17,7 @@
<body style="display: flex; flex-direction:column; background-color: #ffebc3"> <body style="display: flex; flex-direction:column; background-color: #ffebc3">
<header> <header>
<!-- 顶部 -->
</header>
<main style="margin-top: 90rem; display: flex; flex-direction:column; align-items:center;">
<h3>测试编辑</h3>
<div id="noteshare" spellcheck="false" translate="no">
</div>
</main>
<footer>
<div class="fixStylePosition" id="_style_utils"> <div class="fixStylePosition" id="_style_utils">
<div class="fixStyleOut"> <div class="fixStyleOut">
<div style="display: flex;"> <div style="display: flex;">
@ -124,6 +117,20 @@
<!-- </div>--> <!-- </div>-->
</div> </div>
</div> </div>
</header>
<main id="myEdit_main">
<!-- 标题 -->
<h3 style=" border: 1px blanchedalmond solid;">
测试编辑
</h3>
<!-- 内容 -->
<div id="noteshare" spellcheck="false" translate="no">
</div>
</main>
<footer>
</footer> </footer>
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div> <div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div>