json-strict/src/test.html

Json Specification & Validation & Document Generation

<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>.typespec {
	font-family: monospace;
	font-size: 16px;
	border-width: 4px;
	border-color: rgba(165, 230, 229, 0.24);
	border-style: ridge;
}
.typespec>div, .typespec>pre {
	margin: 0.6em
}
.typespec .unfolded>.fold, .typespec .folded>.unfold {
	display: none
}
.typespec ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px 0px 0px 2em;
}
.typespec .meta-field {
	color: gray;
}
.typespec .field-name {
	font-weight: bold;
	color: #87BFB8
}
.typespec .type-name {
	color: blue;
}
.typespec .spec .type-name {
	cursor: pointer
}
.typespec .type-maker {
	color: #223497
}
.typespec .type-maker.unwrapped>.unwrapped:before {
	content: '('
}
.typespec .type-maker.unwrapped>.unwrapped:after {
	content: ')'
}
.typespec .spliter {
	color: gray;
	padding: 0 0.5em
}
.typespec .sample pre {
	margin: 0;
	color: green;
	max-height: 20em;
	overflow: auto;
}
.typespec .spec {
	cursor: default
}
.typespec .spec li:hover {
	transition: 1s;
	background-color: rgba(140, 150, 255, 0.12)
}
.typespec .spec .type-name:hover, .typespec .spec .folded-detail:hover, .typespec .fold>.field-name:hover, .typespec .unfold>.field-name:hover, .typespec .fold>.meta-field:hover, .typespec .unfold>.meta-field:hover {
	opacity: 0.6
}</style>
<div class='typespec'><div class='spec'><div class='fold'><span class='meta-field'>spec</span>: <span class='type-maker'>[<span class='type-maker'>{<span class='folded-detail'>...</span>}</span>]</span></div><div class='unfold'><span class='meta-field'>spec</span>: <span class='type-maker'>[<span class='type-maker'>{</span></span><ul class='object'><li><div class='fold'><span class='field-name'>tableName</span>: <span class='type-name'>TableName</span></div><div class='unfold'><span class='field-name'>tableName</span>: <span><span class='type-name'>TableName</span><span class='spliter'>spec:</span><span class='type-maker'>String</span></span></div></li><li><div class='fold'><span class='field-name'>join</span>: <span class='type-maker'>{<span class='folded-detail'>...</span>}</span></div><div class='unfold'><span class='field-name'>join</span>: <span class='type-maker'>{</span><ul class='object'><li><div class='fold'><span class='field-name'>leftTableName</span>: <span class='type-name'>TableName</span></div><div class='unfold'><span class='field-name'>leftTableName</span>: <span><span class='type-name'>TableName</span><span class='spliter'>spec:</span><span class='type-maker'>String</span></span></div></li><li><div class='fold'><span class='field-name'>left</span>: <span class='type-name'>FieldName</span></div><div class='unfold'><span class='field-name'>left</span>: <span><span class='type-name'>FieldName</span><span class='spliter'>spec:</span><span class='type-maker'>String</span></span></div></li><li><div class='inline'><span class='field-name'>op</span>: <span class='type-maker unwrapped'>Enum ["=","<","<=",">=",">"]</span></div></li><li><div class='fold'><span class='field-name'>right</span>: <span class='type-name'>FieldName</span></div><div class='unfold'><span class='field-name'>right</span>: <span><span class='type-name'>FieldName</span><span class='spliter'>spec:</span><span class='type-maker'>String</span></span></div></li></ul><span class='type-maker'>}</span></div></li></ul><span class='type-maker'><span class='type-maker'>}</span>]</span></div></div><div class='sample'>
<span class='meta-field'>sample</span>: <pre class='code'>[
    {
        "tableName": "table1",
        "join": {
            "leftTableName": "table1",
            "left": "product_id",
            "op": "=",
            "right": "product_id"
        }
    }
]</pre>
</div></div>
<script src='http://libs.baidu.com/jquery/1.9.0/jquery.js'></script>
<script>(function ($) {
    return function(rootSelection) {
      rootSelection.find('.unfold').each(function(i, elm) {
        return $(elm).closest('li,.spec').addClass('unfolded').removeClass('folded');
      });
      rootSelection.find('.type-name, .choose').each(function(i, elm) {
        return $(elm).closest('li').addClass('folded').removeClass('unfolded');
      });
      return rootSelection.find('.type-name, .folded-detail, .fold>.field-name, .unfold>.field-name, .fold>.meta-field, .unfold>.meta-field').each(function(i, elm) {
        var e;
        if ((e = $(elm).closest('li,.spec')).length > 0) {
          return $(elm).css({
            cursor: 'pointer'
          }).click(function() {
            return e.toggleClass('folded').toggleClass('unfolded');
          });
        }
      });
    };
  })(jQuery)($('.typespec'))</script>