js-checker
Version:
a type checker for javascript
236 lines (208 loc) • 7.04 kB
HTML
<html lang="en">
<meta charset="utf-8">
<head>
<style>
#detail-params-content {
margin: 10px 0 0 15px;
border-radius: 5px;
font-size: 14px;
}
#detail-params-content .fold {
/* display: none; */
}
#detail-params-content .unfold {
display: block;
}
#detail-params-content .fold > div {
display: none;
}
#detail-params-content .fold > .mark {
display: none;
}
#detail-params-content .fold > .foldedMark {
display: inline;
}
#detail-params-content .unfold > div {
display: block;
}
#detail-params-content .unfold > .mark {
display: inline;
}
#detail-params-content .unfold > .foldedMark {
display: none;
}
/* icon */
.description {
padding: 2px;
border: solid 1px #4181e0;
background: #ffeb3b8f;
font-size: 12px;
}
.C-type {
padding: 2px;
border: solid 1px #9e9e9e42;
background: #9e9e9e42;
font-size: 14px;
}
.T-type {
padding: 2px;
border: solid 1px #9e9e9e42;
background: #03a9f42e;
font-size: 14px;
color: #AB2525;
}
.field-name {
font-size: 20px;
font-size: 14px;
font-weight: bold;
color: #295F94;
}
.fold .fold > .field-name:hover, .fold .unfold > .field-name:hover, .unfold .fold > .field-name:hover, .unfold .unfold > .field-name:hover {
color: rgba(41, 94, 148, 0.788);
font-weight: 900;
cursor: pointer;
}
.fold .foldedMark {
cursor: pointer;
}
.basic.fold {
cursor: pointer;
}
.basic.unfold {
cursor: pointer;
}
.basic.fold .attribute {
cursor: default;
}
.basic.unfold .attribute {
cursor: default;
}
/* type style */
.basic, .default, .or, .obj, .optional {
margin: 2px 0;
line-height: 24px;
}
.attribute {
padding-left: 3%;
border-left: solid 1px #9e9e9e42;
transition: color .1s linear, background-color .1s linear, border .1s linear, box-shadow .1s linear;
}
.type-obj, .description-obj {
margin: 0;
}
/* optional type */
.optional-desc span {
display: inline-block;
vertical-align: top;
}
.optional-attribute {
display: inline-block;
vertical-align: top;
}
.optional-attribute .or, .optional-attribute .obj {
margin: 0
}
.optional-attribute .or .or-attribute {
display: inline-block;
}
.showInfotab {
display: inline-block;
margin: 0;
margin-right: 4px;
height: 24px;
padding: 5px 16px 4px;
border: 1px solid #3b415196;
border-radius: 6px 6px 0 0;
transition: all .1s ease-in-out;
background: #f8f8f9;
transform: translateY(1px);
font-size: 16px;
}
.showInfotab:hover {
cursor: pointer;
color: #2d8cf0;
}
.showInfotab-active {
display: inline-block;
margin: 0;
margin-right: 4px;
height: 24px;
padding: 5px 16px 4px;
border: 1px solid #348ef4;
border-radius: 6px 6px 0 0;
transition: all .1s ease-in-out;
background: #fafafa;
transform: translateY(1px);
border-bottom: 1px solid #fafafa;
color: #2d8cf0;
font-size: 16px;
}
.showInfotab-active:hover {
cursor: pointer;
color: #2d8cf0;
}
</style>
</head>
<title>test</title>
<!-- @NOPARSE -->
<body class="content">
<div id="detail-params-content">
<div class="obj unfold" fold-id=0>
<span class="field-name">test:</span>
<span style="display: none;">Obj</span>
<span class="description">测试</span>
<span class="mark">{</span>
<div class="attribute">
<div class="basic">
<span class="field-name">id:</span>
<span class="T-type">Num</span>
<span class="description">自增id</span>
<span></span>
</div>
<div class="basic">
<span class="field-name">name:</span>
<span class="T-type">Str</span>
<span class="description">名称</span>
</div>
<div class="obj fold" fold-id=1>
<span class="field-name">details:</span>
<span style="display: none;">Obj</span>
<span class="description">详情</span>
<span class="mark">{</span>
<div class="attribute">
<div class="basic">
<span class="field-name">id:</span>
<span class="T-type">Str</span>
</div>
<div class="basic">
<span class="field-name">name:</span>
<span class="T-type">Num</span>
<span></span>
</div>
</div>
<span class="mark">}</span>
<span class="foldedMark">{ ... }</span>
</div>
</div>
<span class="mark">}</span>
<span class="foldedMark">{ ... }</span>
</div>
</div>
<script type="text/javascript">
document.getElementById('detail-params-content').addEventListener('click', (evt) => {
let { target } = evt;
if (['field-name', 'foldedMark', 'mark'].some(name => target.classList.contains(name))) {
target = target.parentNode;
if (target.classList.contains('fold')) {
target.classList.remove('fold');
target.classList.add('unfold');
} else if (target.classList.contains('unfold')) {
target.classList.remove('unfold');
target.classList.add('fold');
}
}
});
</script>
</body>
</html>