Permalink
Browse files

add folder, unfolder to array.

  • Loading branch information...
1 parent d5dfde0 commit 592f9269942a8a0fd046d45a65f64b865ef71068 @pinkdawn pinkdawn committed Jun 15, 2012
Showing with 37 additions and 11 deletions.
  1. +6 −5 css/jquery.jsonview.css
  2. +3 −5 example.html
  3. +28 −1 js/jquery.jsonview.js
View
@@ -16,9 +16,9 @@
/* array display */
.jquery-jsonview .array-wrapper{border-left:1px dotted #ccc;}
.jquery-jsonview .array-wrapper:before{content:'[';display:block;float:left;color:#069;font-weight:bold;margin-left:-1em;}
-.jquery-jsonview .array-wrapper:after{content:']';display:block;float:left;color:#069;font-weight:bold;margin-left:-0.5em;}
-/*.jquery-jsonview li.array-item:after{content:' ,';display:block;float:left;color:#069;font-weight:bold;}*/
-.jquery-jsonview .array-item:last-child:after{content:''}
+.jquery-jsonview .array-wrapper:after{content:']';display:block;color:#069;font-weight:bold;margin-left:-0.5em;}
+/*.jquery-jsonview li.array-item:after{content:' ,';display:block;float:left;color:#069;font-weight:bold;}
+.jquery-jsonview .array-item:last-child:after{content:''}*/
/* object display */
.jquery-jsonview .object-wrapper{border-left:1px dotted #ccc;}
.jquery-jsonview .object-property-list{font-weight:bold;display:block;float:left;width:100%;}
@@ -27,11 +27,12 @@
.jquery-jsonview .property-name{color:#000;margin-left:1em;position:relative;}
.jquery-jsonview .property-value{margin-left:2em;color:#666;font-weight:normal;}
/* closed states */
-.jquery-jsonview .property-name.closed-object:after{content:'{ … }';color:#069;margin-left:5px;}
-.jquery-jsonview .property-name.closed-array:after{ content:'[ … ]';color:#069;margin-left:5px;}
+.jquery-jsonview .property-name.closed-object:after,.array-item.closed-object:after{content:'{ … }';color:#069;margin-left:5px;}
+.jquery-jsonview .property-name.closed-array:after,.array-item.closed-array:after{ content:'[ … ]';color:#069;margin-left:5px;}
.jquery-jsonview .property-name.closed-string:after{content:'" … "';color:#069;margin-left:5px;}
/* misc */
.jquery-jsonview .null-value,.jquery-jsonview .string-value{padding:2px;border:1px solid #eee;width:auto;margin:2px;font-family:monospace;color:#333;font-size:13px;}
.jquery-jsonview .null-value{color:#ccc;}
.jquery-jsonview .property-toggle-button{font-size:11px;text-decoration:none;font-weight:bold;position:absolute;left:-17px;width:15px;height:15px;color:#c99;}
+.jquery-jsonview .list-toggle-button{font-size:11px;text-decoration:none;font-weight:bold;position:absolute;left:-25px;top:15px;display:block;position:relative;width:15px;height:15px;color:#c99;}
.jquery-jsonview .property-toggle-button:hover{#c03;}
View
@@ -20,11 +20,9 @@
<script type="text/javascript" charset="utf-8">
// wait for document ready
$(function(){
- // load some json data
- $.getJSON('data.json',function(json){
- // inject contents in document body
- $('#jsonview').jsonView(json);
- })
+ //var json = [['ab cd','ef ','gn 13'],[4,5,6,8], [{'abc':123}, {'dd':'ffff'}]];
+ var json = {"CmsControlContxt": [], "CssFile": null, "Title": null, "MetaDesc": null, "MasterPageFile": null, "JsFile": null, "PageProperties": [{"Value": "<?xml version=\"1.0\" encoding=\"utf-8\"?><ShopLocal><BannerZoneTop Src=\"/Images/Banners/images/green_minishops_banner1.jpg\" Link=\"/\" AltText=\"Banner\" /><BannerZoneLeft Src=\"/Images/Banners/images/minishops_PromoZone.jpg\" Link=\"/\" AltText=\"Banner\" /><BannerZoneMiddle Src=\"/Images/Banners/images/minishops_PromoZone.jpg\" Link=\"/\" AltText=\"Banner\" /><BannerZoneRight Src=\"/Images/Banners/images/minishops_PromoZone.jpg\" Link=\"/\" AltText=\"Banner\" /></ShopLocal>", "Key": "shop local"}], "PageId": {"Url": "/shoplocal", "UrlKey": "shop local", "CatalogId": 8}, "IsRobotAllowed": false};
+ $('#jsonview').jsonView(json);
});
</script>
</head>
View
@@ -36,7 +36,7 @@
else{
markup.push('<div class="array-wrapper lvl-'+lvl+'"><ol title="Array with '+json.length+' items" class="array-item-list">');
// if empty
- for(var i=0,item;item = json[i++];) markup.push('<li class="array-item">'+(typeof item == 'string' || typeof item == 'number' ? '<p class="string-value">'+item+'</p>' : json2markup(item,lvl))+'</li>');
+ for(var i=0,item;item = json[i++];) markup.push('<li class="array-item"><a href="#" class="list-toggle-button">[-]</a>'+(typeof item == 'string' || typeof item == 'number' ? '<p class="string-value">'+item+'</p>' : json2markup(item,lvl))+'</li>');
markup.push('</ol></div>');
}
}else if(typeof json == 'object'){
@@ -66,6 +66,33 @@
}
return markup.join('');
}
+
+ /** folder, un-folder array */
+ $('.list-toggle-button').live('click', function(e){
+ e.preventDefault();e.stopPropagation();
+ var $this = $(this);
+ if(!$this.data('li')){
+ $this.data('li', $this.parents('li').first());
+ $this.data('div', $this.data('li').children('div'));
+ var type = ($this.data('li').find('> .array-wrapper').length > 0 ? 'array' : $this.data('li').find('> .object-wrapper').length > 0 ? 'object' : 'string');
+ $this.data('type', type);
+ }
+
+ if(!$this.data('div').length){$this.text(''); return;} /** array of number, string does not need folder or unfolder */
+ //toggle
+ if($this.data('div').is(':visible')){
+ $this.text('[+]');
+ $this.data('div').hide(0,function(){
+ $this.data('li').addClass('closed-'+$this.data('type'));
+ });
+ }else{
+ $this.text('[-]');
+ $this.data('div').show(0,function(){
+ $this.data('li').removeClass('closed-'+$this.data('type'));
+ });
+ }
+ });
+
// only register this once... will work everywhere
$('.property-toggle-button').live('click',function(e){
e.preventDefault();e.stopPropagation();

0 comments on commit 592f926

Please sign in to comment.