Skip to content

Commit

Permalink
random css tweaks and tiny js fixes, mostly playing around with ideas
Browse files Browse the repository at this point in the history
  • Loading branch information
quickredfox committed Feb 9, 2010
1 parent fd25e30 commit 31e52e7
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 26 deletions.
11 changes: 5 additions & 6 deletions css/jquery.jsonview.css
Expand Up @@ -13,24 +13,23 @@
.jquery-jsonview .array-item-list,.jquery-jsonview .object-property-list{margin-left:3em;}
/* array display */
.jquery-jsonview div.array-wrapper{border-left:1px dotted #ccc;}
.jquery-jsonview ol.array-item-list:before{content:'[';display:block;float:left;color:#069;font-weight:bold;}
.jquery-jsonview ol.array-item-list:after{content:']';display:block;float:left;color:#069;font-weight:bold;}
.jquery-jsonview div.array-wrapper:before{content:'[';display:block;float:left;color:#069;font-weight:bold;margin-left:-1em;}
.jquery-jsonview div.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 li.array-item:last-child:after{content:''}
/* object display */
.jquery-jsonview div.object-wrapper{border-left:1px dotted #ccc;}
.jquery-jsonview dl.object-property-list{font-weight:bold;display:block;float:left;width:100%;}
.jquery-jsonview dl.object-property-list:before{content:'{';display:block;float:left;color:#069;font-weight:bold;}
.jquery-jsonview dl.object-property-list:after{content:'}';display:block;float:left;color:#069;font-weight:bold;}
.jquery-jsonview div.object-wrapper:before{content:'{';display:block;float:left;color:#069;font-weight:bold;margin-left:-1em;}
.jquery-jsonview div.object-wrapper:after{content:'}';display:block;float:left;color:#069;font-weight:bold;margin-left:-0.5em;}
.jquery-jsonview dt.property-name{color:#000;margin-left:1em;position:relative;}
.jquery-jsonview dd.property-value{margin-left:2em;color:#666;font-weight:normal;}
/* closed states */
.jquery-jsonview dt.property-name.closed-object:after{content:'{ … }';color:#069;margin-left:5px;}
.jquery-jsonview dt.property-name.closed-array:after{ content:'[ … ]';color:#069;margin-left:5px;}
.jquery-jsonview dt.property-name.closed-string:after{content:'" … "';color:#069;margin-left:5px;}
/* misc */
.jquery-jsonview p.null-value,.jquery-jsonview p.string-value{padding:2px;border:1px solid #eee;width:100%;margin:2px;}
.jquery-jsonview p.null-value,.jquery-jsonview p.string-value{padding:2px;border:1px solid #eee;width:auto;margin:2px;font-family:monospace;color:#333;font-size:13px;}
.jquery-jsonview p.null-value{color:#ccc;}
.jquery-jsonview p.string-value input{border:0;font-family:monospace;color:#333;font-size:13px;width:100%;}
.jquery-jsonview a.property-toggle-button{font-size:11px;text-decoration:none;font-weight:bold;position:absolute;left:-17px;width:15px;height:15px;color:#c99;}
.jquery-jsonview a.property-toggle-button:hover{#c03;}
15 changes: 1 addition & 14 deletions data.json
@@ -1,14 +1 @@
{
"tree": {
"propKey": "prop string value",
"objectpropKey": {
"name": "example object",
"items" : [["one","two","three"],{"foo":"bar"},"camp"]
},
"arrayobjectpropKey": [
"one",
{"two":"three","four":"five"},
["six",7,null]
]
}
}
{"praized": {"community": {"type": "Hub", "slug": "praized-com-hub", "xd_receiver_url": "", "name": "praized.com hub", "base_url": "http://praized.com", "home_url": "http://praized.com/"}, "merchants": [{"pid": "96423266cd5145552decb67454b13e4e", "permalink": "http://praized.com/places/ca/quebec/montreal/societe-des-arts-technologiques-sat", "name": "Societe Des Arts Technologiques (SAT)", "updated_at": "2008/09/19 14:15:36 +0000", "favorite_count": "22", "sponsored_links": [], "short_url": "http://przd.com/9j-TQ0xz", "votes": {"neg_count": "1", "score": "99", "pos_count": "115", "count": "116"}, "tag_count": "10", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.07050"}], "tags": [{"name": "arts"}, {"name": "cultural"}, {"name": "organizations"}, {"name": "culture"}, {"name": "web"}, {"name": "technology"}, {"name": "internet"}, {"name": "dj"}, {"name": "vj"}, {"name": "creative"}], "feeds": [], "answer_count": "2", "url": null, "comment_count": "13", "business_hours": null, "description": null, "phone": "(514) 844-2033", "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": "MTL"}, "latitude": 45.509334, "postal_code": "H2X 2S6", "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "1195, Boulevard Saint-Laurent", "longitude": -73.562672}, "email": null, "created_at": "2008/04/04 14:13:46 +0000"}, {"pid": "8f5aad1c025a993bccf9f76c02268e22", "permalink": "http://praized.com/places/ca/quebec/montreal/fromentier-le", "name": "Fromentier (Le)", "updated_at": "2008/12/04 22:27:49 +0000", "favorite_count": "12", "sponsored_links": [], "short_url": "http://przd.com/Hj-TQ0xz", "votes": {"neg_count": "0", "score": "100", "pos_count": "54", "count": "54"}, "tag_count": "5", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.16759"}], "tags": [{"name": "bakers"}, {"name": "retail"}, {"name": "bread"}, {"name": "boulangerie"}, {"name": "pain"}], "feeds": [], "answer_count": "2", "url": null, "comment_count": "8", "business_hours": null, "description": null, "phone": "(514) 527-3327", "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": "MTL"}, "latitude": 45.533699, "postal_code": "H2J 1H6", "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "1375, Avenue Laurier Est", "longitude": -73.58349}, "email": null, "created_at": "2008/05/13 16:14:45 +0000"}, {"pid": "06028918fa93968698da8c59b83e5093", "permalink": "http://praized.com/places/ca/montreal/station-c", "name": "Station C", "updated_at": "2008/07/09 18:35:55 +0000", "favorite_count": "27", "sponsored_links": [], "short_url": "http://przd.com/iep-TQ0xz", "votes": {"neg_count": "2", "score": "97", "pos_count": "95", "count": "97"}, "tag_count": "7", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.23346"}], "tags": [{"name": "coworking"}, {"name": "space"}, {"name": "espace"}, {"name": "travail"}, {"name": "communautaire"}, {"name": "web"}, {"name": "patin"}], "feeds": [], "answer_count": "0", "url": "http://station-c.com/", "comment_count": "14", "business_hours": null, "description": null, "phone": null, "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": "MTL"}, "latitude": 45.524825, "postal_code": "H2T 1S5", "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "5369 Saint-Laurent #430", "longitude": -73.596751}, "email": null, "created_at": "2008/07/02 11:18:33 +0000"}, {"pid": "11e0bb29eb8be9b8cbbaa23a8ef54728", "permalink": "http://praized.com/places/ca/quebec/montreal/ex-centris", "name": "Ex-Centris", "updated_at": "2008/06/26 12:19:07 +0000", "favorite_count": "19", "sponsored_links": [], "short_url": "http://przd.com/wnO-TQ0xz", "votes": {"neg_count": "2", "score": "97", "pos_count": "92", "count": "94"}, "tag_count": "3", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.28819"}], "tags": [{"name": "cinemas"}, {"name": "arts"}, {"name": "alternative"}], "feeds": [], "answer_count": "0", "url": null, "comment_count": "10", "business_hours": null, "description": null, "phone": "(514) 847-2206", "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": "MTL"}, "latitude": 45.513284, "postal_code": "H2X 2V1", "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "3536 Boul. Saint-Laurent", "longitude": -73.571246}, "email": null, "created_at": "2008/04/01 22:37:05 +0000"}, {"pid": "512584ac284e25484c5aca3857a97eaf", "permalink": "http://praized.com/places/ca/quebec/montreal/parc-lafontaine", "name": "Parc Lafontaine", "updated_at": "2008/07/22 16:32:21 +0000", "favorite_count": "12", "sponsored_links": [], "short_url": "http://przd.com/Do-TQ0xz", "votes": {"neg_count": "0", "score": "100", "pos_count": "42", "count": "42"}, "tag_count": "9", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.34743"}], "tags": [{"name": "parks"}, {"name": "fontaine"}, {"name": "patin"}, {"name": "chiens"}, {"name": "enfants"}, {"name": "jour"}, {"name": "de"}, {"name": "la"}, {"name": "lenteur"}], "feeds": [], "answer_count": "1", "url": null, "comment_count": "1", "business_hours": null, "description": null, "phone": "(514) 872-3947", "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": "MTL"}, "latitude": 45.545447, "postal_code": null, "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": null, "longitude": -73.639076}, "email": null, "created_at": "2008/07/04 16:58:56 +0000"}, {"pid": "3d502a6c70a98b6be0e4871efd3688e3", "permalink": "http://praized.com/places/ca/quebec/montreal/ile-sans-fil", "name": "Ile Sans Fil ", "updated_at": "2009/01/15 15:17:39 +0000", "favorite_count": "15", "sponsored_links": [], "short_url": "http://przd.com/vWkA-TQ0xz", "votes": {"neg_count": "1", "score": "98", "pos_count": "63", "count": "64"}, "tag_count": "9", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.40267"}], "tags": [{"name": "hotspots"}, {"name": "community"}, {"name": "montreal"}, {"name": "wifi"}, {"name": "cafes"}, {"name": "sansfil"}, {"name": "isf"}, {"name": "wireless"}, {"name": "internet"}], "feeds": [], "answer_count": "0", "url": "http://www.ilesansfil.org", "comment_count": "2", "business_hours": null, "description": null, "phone": "(514) 313-3345", "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": null}, "latitude": 45.519269, "postal_code": "H2L 2Y7", "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "1212 Rue Panet", "longitude": -73.55348}, "email": "info@ilesansfil.org", "created_at": "2008/07/24 08:51:06 +0000"}, {"pid": "df2cc18f406a6c1bdd21dc7411c32884", "permalink": "http://praized.com/places/ca/quebec/montreal/helm-brasseur-gourmand", "name": "Helm Brasseur Gourmand", "updated_at": "2008/09/26 22:22:13 +0000", "favorite_count": "7", "sponsored_links": [], "short_url": "http://przd.com/ZK-TQ0xz", "votes": {"neg_count": "0", "score": "100", "pos_count": "38", "count": "38"}, "tag_count": "8", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.45633"}], "tags": [{"name": "bars"}, {"name": "restaurants"}, {"name": "ilesansfil"}, {"name": "wifi"}, {"name": "isf"}, {"name": "ile"}, {"name": "sans"}, {"name": "fil"}], "feeds": [], "answer_count": "6", "url": null, "comment_count": "6", "business_hours": null, "description": null, "phone": "(514) 276-0473", "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": "MTL"}, "latitude": 45.523974, "postal_code": "H2V 1T5", "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "273, Rue Bernard Ouest", "longitude": -73.605193}, "email": null, "created_at": "2008/04/22 21:16:30 +0000"}, {"pid": "115cda2a66dd204933bc26c012dd17fe", "permalink": "http://praized.com/places/ca/quebec/petite-riviere-saint-francois/le-massif", "name": "Le Massif", "updated_at": "2008/06/26 15:02:41 +0000", "favorite_count": "12", "sponsored_links": [], "short_url": "http://przd.com/SuY0-TQ0xz", "votes": {"neg_count": "1", "score": "98", "pos_count": "55", "count": "56"}, "tag_count": "4", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.89917"}], "tags": [{"name": "skiing"}, {"name": "centres"}, {"name": "resorts"}, {"name": "snowboard"}], "feeds": [], "answer_count": "2", "url": null, "comment_count": "7", "business_hours": null, "description": null, "phone": "(418) 632-5876", "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Petite-Rivi\u00e8re-Saint-Fran\u00e7ois", "code": null}, "latitude": 47.279372, "postal_code": "G0A 2L0", "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "1350, Rue Principale, C.P. 47", "longitude": -70.570219}, "email": null, "created_at": "2008/06/06 16:33:12 +0000"}, {"pid": "4b414e0de1beb6b6cad55213aacbd52d", "permalink": "http://praized.com/places/ca/quebec/montreal/praized-hq", "name": "Praized HQ", "updated_at": "2008/07/14 20:30:47 +0000", "favorite_count": "19", "sponsored_links": [], "short_url": "http://przd.com/ZxB-TQ0xz", "votes": {"neg_count": "4", "score": "95", "pos_count": "95", "count": "99"}, "tag_count": "11", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650114.95328"}], "tags": [{"name": "startup"}, {"name": "web"}, {"name": "social"}, {"name": "local"}, {"name": "search"}, {"name": "blogs"}, {"name": "networks"}, {"name": "internet"}, {"name": "ratings"}, {"name": "company"}, {"name": "praized"}], "feeds": [], "answer_count": "2", "url": "http://praizedmedia.com/", "comment_count": "14", "business_hours": null, "description": null, "phone": null, "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": "MTL"}, "latitude": 45.50493, "postal_code": null, "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "460 Ste-Catherine O. #402", "longitude": -73.568163}, "email": null, "created_at": "2008/03/14 13:52:20 +0000"}, {"pid": "a11d1e35a5dfb481ec9ffd576bcc3502", "permalink": "http://praized.com/places/ca/quebec/montreal/fairmount-bagel-bakery-inc", "name": "Fairmount Bagel Bakery Inc", "updated_at": "2008/06/26 01:51:20 +0000", "favorite_count": "11", "sponsored_links": [], "short_url": "http://przd.com/12sju-TQ0xz", "votes": {"neg_count": "2", "score": "96", "pos_count": "64", "count": "66"}, "tag_count": "3", "stat_links": [{"url": "http://ca.stats.praized.com/ping?t=1265650115.02390"}], "tags": [{"name": "bakers"}, {"name": "retail"}, {"name": "bagels"}], "feeds": [], "answer_count": "0", "url": null, "comment_count": "9", "business_hours": null, "description": null, "phone": "(514) 272-0667", "fax": null, "avatar": {"small": "http://praized.com/images/generic/default_avatar_40x40.png", "medium": "http://praized.com/images/generic/default_avatar_70x70.png", "large": "http://praized.com/images/generic/default_avatar.png"}, "sponsored_images": [], "location": {"city": {"name": "Montreal", "code": "MTL"}, "latitude": 45.522948, "postal_code": "H2T 2M2", "regions": {"province": "Quebec"}, "country": {"name": "Canada", "code": "CA"}, "street_address": "74, Avenue Fairmount Ouest", "longitude": -73.595323}, "email": null, "created_at": "2008/04/05 18:50:22 +0000"}], "pagination": {"total_entries": "6941", "current_page": "1", "page_count": "695", "per_page": "10"}}}
9 changes: 9 additions & 0 deletions example.html
Expand Up @@ -6,6 +6,15 @@
<head>
<title>example</title>
<link rel="stylesheet" href="css/jquery.jsonview.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
body{background:#f5f9f5;}
#jsonview{
display:block;position:absolute;top:5%;left:50%;width:800px;margin-left:-406px;border:3px solid #787;overflow:auto;
-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;padding:10px;bottom:10%;
-moz-box-shadow:3px 3px 6px #ccc;-webkit-box-shadow:3px 3px 6px #ccc;box-shadow:3px 3px 6px #ccc;
background:#fff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jsonview.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
Expand Down
11 changes: 5 additions & 6 deletions js/jquery.jsonview.js
Expand Up @@ -29,7 +29,7 @@
}
// the ACTUAL plugin
var json2markup = function(json,lvl){
var markup = [],lvl = (lvl ? lvl+1 : 0);
var markup = [],lvl = (lvl+1)||0;
if(typeof json == 'object' && json instanceof Array){
// handle array
markup.push('<div class="array-wrapper lvl-'+lvl+'"><ol title="Array with '+json.length+' items" class="array-item-list">');
Expand All @@ -42,7 +42,7 @@
markup.push('</ul></div>');
}else if(json){
// handle string
markup.push('<p class="string-value"><input type="text" readonly="readonly" value="'+json+'" /></p>');
markup.push('<p class="string-value">'+json+'</p>');
}else{
// handle null
markup.push('<p class="null-value">null</p>');
Expand All @@ -62,16 +62,15 @@
}
// toggle
if($this.data('dd').is(':visible')){
$this.data('dd').slideUp(function(){
$this.data('dd').hide(0,function(){
$this.data('dt').addClass('closed-'+$this.data('type'))
$this.text('[+]');
});
}else{
$this.data('dd').slideDown(function(){
$this.data('dd').show(0,function(){
$this.data('dt').removeClass('closed-'+$this.data('type'))
$this.text('[-]');
});
}
});
$('.string-value input').live('click',function(){ $(this).focus().select();})
})()
})();

0 comments on commit 31e52e7

Please sign in to comment.