diff --git a/package.json b/package.json index feb8d6c5d02877ab25b437d6c0e3b1286902c29d..81f2cef22be8c54c44ec784f09f9abb4e825efe0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jsonbox", - "version": "1.5.7", + "version": "1.6.0", "description": "JsonBox-跨平台的json格式化工具", "main": "main.js", "scripts": { diff --git a/src/index.css b/src/index.css index 3d0768b63ac9bd54da287c97a969ee7c308474b4..58e0db78a02cc7a283d49589976265b82fcba842 100644 --- a/src/index.css +++ b/src/index.css @@ -13,26 +13,26 @@ body{ /* .icon:hover{background-color: dimgray;} */ /* 页面布局 */ -.frame_page { display: flex; height:100vh; flex-direction:column; margin: 0 10;} +.frame_page { display: flex; height:100vh; flex-direction:column; margin:0 10; padding:0;} .frame_header { height:40px; } -.frame_content { flex:1; overflow:auto; } -.frame_footer { height: 40px; } +.frame_content { flex:1; padding:0; overflow:auto; } +.frame_footer { height:30px; position: sticky!important; margin-top:2px; margin-bottom:2px; } /* 标签tabs区域 */ .nav {min-height:30px;} .nav>li>a {height:30px; padding-top:4px; font-size:20px;} /* 格式化区域 */ -#container{background-color:white; width:100%; height:100%; overflow-y:auto; overflow-x:auto; cursor:text; padding:0;} -#container #ln{width:50px; height: 100%; text-align: right; margin:0 5px 0 0; padding:0; float:left;} -#container #ln ul{padding-inline-start: 0; margin-block-start: 0; margin-block-end: 0;} -#container #ln ul li{list-style: none; padding:0; margin:0;} -#container #con{background-color: white; overflow-x:auto; overflow-y:hidden; padding:0;} -#container #con .ta{background-color: white; padding: 0; outline: none; overflow:hidden; border: 0;} -#container #con .ta pre{ margin:0; height:100%; overflow-y: hidden; overflow-x: auto; font-size:20px;} -#container #con .ta pre::-webkit-scrollbar{display: none;} - -#frame_footer #match{display:table-cell; width:150px; text-align: right;} +.content{background-color:white; margin:0; padding:0; overflow:auto; display:flex; flex-direction:row; height:100vh;} +.content .line{top:0; left:0; bottom:0; min-width:50px; text-align:right; background-color:rgb(179, 171, 171); padding-right:5px; overflow-y:auto;} +.content .line::-webkit-scrollbar{display:none;} +.content .line ul{padding-inline-start: 0; margin-block-start: 0; margin-block-end: 0;} +.content .line ul li{list-style: none; padding:0; margin:0;} +.content .ta{background-color: white; padding: 0; outline: none; border: 0; padding-left: 1px;} +.content .ta pre{ margin:0; overflow-y:hidden; font-size:20px;} +.content .ta pre::-webkit-scrollbar{display: none;} + +#match{display:inline-block; width:80px; text-align: right;} /* 搜索高亮 */ .hilight{background:yellow;color:red;} diff --git a/src/index.html b/src/index.html index 1d97e25c430e96ed58ebdf9de4c91bce88fec81b..869a8be6f6215104edf3166aca1eaf78d9ed21c0 100644 --- a/src/index.html +++ b/src/index.html @@ -13,40 +13,36 @@
-
-
-
-
    -
  • {{index}}
    • -
-
-
-
-
+
+
+
    +
  • {{index}}
    • +
+
-
-
- -
-
- {{match}}   -   - +
+
+
+    + {{j.match}}  +   + +
+
-
diff --git a/src/index.js b/src/index.js index 98b0533ff582c9fa93be5bc2a4d31ba114af4364..8b995223c5cb2b381542ff42c1ea92152581509e 100644 --- a/src/index.js +++ b/src/index.js @@ -2,13 +2,15 @@ const jsonbox = { data() { return { boxes: [], - strJson: '', - lineCount: 1, // 总行数 - searchText: '', - keyword: {}, // keyword: {last: "上次搜索关键字", now: "本次搜索关键字"} - match: '', // 搜索结果显示字符串，格式：1/2，第二个数字是搜搜匹配总数，第一个数是当前是第几个搜索匹配 - totalMatch: 0, // 搜索总匹配数 - checkIndex: 0 // 当前是第几个搜索匹配，从0开始计数 + j: { + strJson: '', + lineCount: 1, // 总行数 + searchText: '', + keyword: {}, // keyword: {last: "上次搜索关键字", now: "本次搜索关键字"} + match: '', // 搜索结果显示字符串，格式：1/2，第二个数字是搜搜匹配总数，第一个数是当前是第几个搜索匹配 + totalMatch: 0, // 搜索总匹配数 + checkIndex: 0 // 当前是第几个搜索匹配，从0开始计数 + }, } }, setup() { @@ -72,10 +74,14 @@ const jsonbox = { selection.removeAllRanges(); selection.addRange(range); }); + document.querySelector('#container').addEventListener('scroll', (e) => { + // console.info(e.currentTarget.scrollTop); + document.querySelector('#ln').scrollTop = e.currentTarget.scrollTop; + }); // 可编辑div里的内容变化事件，这是为了重写linenum divJson.addEventListener('DOMNodeInserted', () => { - this.lineCount = Math.ceil(divJson.offsetHeight / 20) + this.j.lineCount = Math.ceil(divJson.offsetHeight / 20) }); // 可编辑div里的内容全选后删除事件，尤其内容特别多的时候，必须自己来写全选后的删除，否則会卡得cpu狂飙 @@ -85,7 +91,7 @@ const jsonbox = { console.info('all selected before delete'); divJson.innerText = ''; // divJson.innerHTML = ''; } - this.lineCount = Math.ceil(divJson.offsetHeight / 20); + this.j.lineCount = Math.ceil(divJson.offsetHeight / 20); } }); @@ -93,7 +99,7 @@ const jsonbox = { // 包含全选后粘贴，和 在光标所在处粘贴 divJson.addEventListener('paste', (e) => { e.preventDefault(); - this.keyword = {}; + this.j.keyword = {}; if(document.getSelection().toString().trim() == divJson.textContent.trim()) { console.info('all selected before ctrl+v'); divJson.innerHTML = ''; @@ -136,10 +142,18 @@ const jsonbox = { // console.info(txtSearch.value.trim()); this.search(); }); + txtSearch.addEventListener('focus', (e) => { + // 获取焦点的时候全选内容 + e.currentTarget.select(); + }); }, methods: { + createTemplate() { + return + ""; + }, manuParse() { - this.keyword = {}; + this.j.keyword = {}; this.parse(); this.search(); }, @@ -164,11 +178,11 @@ const jsonbox = { // add linenum console.info('==current total line=====%d', after.split('\n').length); - this.lineCount = after.split('\n').length; + this.j.lineCount = after.split('\n').length; }, clearHilight() { this.removeCurStyle(); - let m = new RegExp('' + this.keyword.now + '', 'gi'); + let m = new RegExp('' + this.j.keyword.now + '', 'gi'); let divJson = this.$refs.divJson; let content = divJson.innerHTML; let arr = content.match(m), i = -1; @@ -180,7 +194,7 @@ const jsonbox = { return arr[i]; }); - m = new RegExp('' + this.keyword.now + '', 'gi'); + m = new RegExp('' + this.j.keyword.now + '', 'gi'); arr = content.match(m), i = -1; content = content.replace(m, () => { i++; @@ -190,48 +204,50 @@ const jsonbox = { }); divJson.innerHTML = content; - this.match = ''; - this.totalMatch = 0; + this.j.match = ''; + this.j.totalMatch = 0; }, recordKeyword() { let kw = txtSearch.value.trim(); - if(this.keyword.now == kw) { + if(this.j.keyword.now == kw) { return; } - this.keyword.last = this.keyword.now; - this.keyword.now = kw; + this.j.keyword.last = this.j.keyword.now; + this.j.keyword.now = kw; }, search() { let divJson = this.$refs.divJson; let textContent = divJson.textContent.trim(); - console.info('keyword.last==%s========keyword.now==%s', this.keyword.last, this.keyword.now); + console.info('keyword.last==%s========keyword.now==%s', this.j.keyword.last, this.j.keyword.now); if(undefined == textContent || 'undefined' == textContent || '' == textContent || 0 === textContent.length) { // this.clearHilight(); return; } - if(undefined == this.searchText || '' == this.searchText) { + if(undefined == this.j.searchText || '' == this.j.searchText) { console.info('clear hilight'); this.clearHilight(); // this.recordKeyword(); return; } - if(this.keyword.now == this.searchText) { - if(this.totalMatch == 0) return; + if(this.j.keyword.now == this.j.searchText) { + if(this.j.totalMatch == 0) return; console.info('now locate to next'); this.next(); return; } this.clearHilight(); // 此处的clearHight一定要在recordKeyword前面哦～ this.recordKeyword(); - this.checkIndex = 0; - console.info('%s=====a========%s', this.keyword.last, this.keyword.now); + this.j.checkIndex = 0; + console.info('%s=====a========%s', this.j.keyword.last, this.j.keyword.now); let content = divJson.innerHTML;//, reg = new RegExp(searchText, 'gi'); - let reg = new RegExp('()((?:(?!<\/span>).)*?)(' + this.searchText + ')', 'gi'); + content = content.substring(5) // 去掉开头的
+            content = content.substring(0, content.length - 6)  // 去掉末尾的
+ let reg = new RegExp('()((?:(?!<\/span>).)*?)(' + this.j.searchText + ')', 'gi'); let arr = content.match(reg), i = -1; if(undefined == arr || null == arr) { console.info('there is no match'); - this.match = '0' - this.totalMatch = 0; + this.j.match = '0' + this.j.totalMatch = 0; return; } content = content.replace(reg, '$1$2$3'); @@ -240,9 +256,9 @@ const jsonbox = { // return '' + arr[i] + ''; // }); divJson.innerHTML = '
' + content + '
'; - console.info('checkIndex======%d', this.checkIndex); - this.match = (this.checkIndex + 1) + "/" + arr.length; - this.totalMatch = arr.length; + console.info('checkIndex======%d', this.j.checkIndex); + this.j.match = (this.j.checkIndex + 1) + "/" + arr.length; + this.j.totalMatch = arr.length; this.locate(); }, locate() { @@ -250,19 +266,21 @@ const jsonbox = { let container = document.getElementById('container'); this.removeCurStyle(); this.addCurStyle(); + console.info('====================%s', container.offsetWidth); container.scrollTo({ - top: hilight[this.checkIndex].offsetTop, + top: hilight[this.j.checkIndex].offsetTop - 100, + left: (hilight[this.j.checkIndex].offsetLeft < container.offsetWidth ? 0 : hilight[this.j.checkIndex].offsetLeft - container.offsetWidth / 2), behavior: 'smooth' }); }, addCurStyle() { let hilight = document.querySelectorAll('.hilight'); - hilight[this.checkIndex].style.background = '#a8ac94'; - // if(this.checkIndex > 0) { - // hilight[this.checkIndex - 1].removeAttribute('style'); + hilight[this.j.checkIndex].style.background = '#a8ac94'; + // if(this.j.checkIndex > 0) { + // hilight[this.j.checkIndex - 1].removeAttribute('style'); // } - // if(this.checkIndex < this.totalMatch - 1) { - // hilight[this.checkIndex + 1].removeAttribute('style'); + // if(this.j.checkIndex < this.j.totalMatch - 1) { + // hilight[this.j.checkIndex + 1].removeAttribute('style'); // } }, removeCurStyle() { @@ -272,24 +290,24 @@ const jsonbox = { } }, next() { - if(undefined == this.searchText || '' == this.searchText) { + if(undefined == this.j.searchText || '' == this.j.searchText) { return; } - if(this.totalMatch == 0) return; // 没有匹配，不再继续检索 + if(this.j.totalMatch == 0) return; // 没有匹配，不再继续检索 // 搜索到最后一个，继续从头开始 - if(this.checkIndex + 1 === this.totalMatch && this.totalMatch != 0) this.checkIndex = -1; - this.checkIndex++; - this.match = (this.checkIndex + 1) + "/" + this.totalMatch; + if(this.j.checkIndex + 1 === this.j.totalMatch && this.j.totalMatch != 0) this.j.checkIndex = -1; + this.j.checkIndex++; + this.j.match = (this.j.checkIndex + 1) + "/" + this.j.totalMatch; this.locate(); }, previous() { - if(undefined == this.searchText || '' == this.searchText) { + if(undefined == this.j.searchText || '' == this.j.searchText) { return; } - if(this.totalMatch == 0) return; // 没有匹配，不再继续检索 - if(this.checkIndex === 0) this.checkIndex = this.totalMatch; - this.checkIndex--; - this.match = (this.checkIndex + 1) + "/" + this.totalMatch; + if(this.j.totalMatch == 0) return; // 没有匹配，不再继续检索 + if(this.j.checkIndex === 0) this.j.checkIndex = this.j.totalMatch; + this.j.checkIndex--; + this.j.match = (this.j.checkIndex + 1) + "/" + this.j.totalMatch; this.locate(); }, openSettings() {