Skip to content

Commit e6449de

Browse files
lloydlloyd
committed
complete the silly demo
1 parent 8140398 commit e6449de

File tree

6 files changed

+242
-25
lines changed

6 files changed

+242
-25
lines changed

‎site/css/style.css‎

Lines changed: 80 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
body {
2-
background: #191919;
2+
background-color: #191919;
33
color: #a1a1a1;
44
font-family: 'Droid Sans', arial, serif;
55
font-size: 14px;
66
}
77

88
#header {
99
position: fixed;
10-
background: #191919;
10+
background-color: #191919;
1111
opacity: .7;
1212
color: #ccc;
1313
width: 100%;
@@ -60,13 +60,16 @@ div.content {
6060
max-width: 700px;
6161
}
6262

63+
.json {
64+
background-color: #333;
65+
padding: .5em 1em .5em 1em;
66+
}
67+
6368
#splash .sample {
6469
width: 250px;
6570
float: right;
66-
background-color: #333;
67-
padding: .5em 1em .5em 1em;
6871
margin-left: 1em;
69-
margin-top: 5em;
72+
margin-top: 3em;
7073
border: 3px solid #444;
7174
border-radius: 1em;
7275
-moz-border-radius: 1em;
@@ -75,9 +78,8 @@ div.content {
7578
}
7679

7780
#splash .sample tt {
78-
font-size: 110%;
79-
font-weight: bold;
80-
padding: 0 .5em 0 .5em;
81+
font-size: 90%;
82+
padding: 0 .2em 0 .2em;
8183
}
8284

8385
#splash .sample pre {
@@ -90,15 +92,82 @@ div.content {
9092
font-size: 170%;
9193
}
9294

93-
#splash .sample .selected {
95+
.selected {
9496
opacity: .7;
95-
padding: .6em;
96-
margin-left: -.6em;
97+
padding: 8px;
98+
margin: -10px;
9799
background-color: #fff475;
98100
color: #000;
99101
border: 2px solid white;
100102
border-radius: 4px;
101103
-moz-border-radius: 4px;
102104
-webkit-border-radius: 4px;
105+
}
106+
107+
div.current input, div.selector, pre, code, tt {
108+
font-family: "andale mono",monospace;
109+
font-size: .9em;
110+
}
103111

112+
div.current {
113+
width: 100%;
114+
padding: 1em;
115+
}
116+
117+
div.current input {
118+
color: #fff;
119+
font-size: 110%;
120+
background-color: #333;
121+
border: 1px solid #444;
122+
padding: 8px;
123+
width: 400px;
124+
margin-left: 1em;
125+
margin-right: 1em;
126+
border-radius: 4px;
127+
-moz-border-radius: 4px;
128+
-webkit-border-radius: 4px;
129+
}
130+
131+
pre.doc {
132+
float: right;
133+
padding: 1em 3em 1em 3em;
134+
padding-right: 160px;
135+
border: 3px solid #444;
136+
border-radius: 1em;
137+
-moz-border-radius: 1em;
138+
-webkit-border-radius: 1em;
139+
font-size: 90%;
140+
}
141+
142+
.selectors {
143+
margin: 1em;
144+
background-color: #444;
145+
width: 300px;
146+
padding: 8px;
147+
border-radius: 4px;
148+
-moz-border-radius: 4px;
149+
-webkit-border-radius: 4px;
150+
151+
}
152+
.selectors .selector {
153+
background-color: #333;
154+
padding: .4em;
155+
margin: 1px;
156+
cursor: pointer;
157+
}
158+
159+
.selectors .selector.inuse {
160+
border: 1px solid #9f9;
161+
margin: -1px;
162+
margin-left: 0px;
163+
}
164+
165+
.results.error {
166+
color: #f99;
167+
}
168+
169+
.results {
170+
color: #9f9;
171+
font-size: 90%;
172+
width: 300px;
104173
}

‎site/index.html‎

Lines changed: 73 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,32 +14,91 @@
1414
</div>
1515
</div>
1616
<div id="main">
17-
<div id="splash" class="content">
18-
<div class="sample">
19-
<tt>#drinkPreference&nbsp;:first-child</tt>
17+
<div style="display: none" id="splash" class="content">
18+
<div class="sample json">
19+
<tt>".author .drinkPref&nbsp;:first-child"</tt>
2020
<pre>{
21-
"name": {
22-
"first": "Lloyd",
23-
"last": "Hilaiel",
24-
"(cc)": "<a href="http://creativecommons.org/licenses/by-sa/3.0/us/">BY-SA</a>"
21+
"author": {
22+
"name": {
23+
"first": "Lloyd",
24+
"last": "Hilaiel"
25+
},
26+
"drinkPref": [
27+
<span class="selected">"whiskey"</span>,
28+
"beer",
29+
"wine"
30+
],
2531
},
26-
"drinkPreference": [
27-
<span class="selected">"whiskey"</span>,
28-
"beer",
29-
"wine"
30-
]
32+
"thing": "JSONSelect site",
33+
"license": "<a href="http://creativecommons.org/licenses/by-sa/3.0/us/">(cc) BY-SA</a>"
3134
}</pre></div>
3235
<div class="pitch">
3336
<p>JSONSelect is a selector language for JSON.</p>
3437
<p>It <i>feels like</i> CSS.</p>
3538
<p>It's easy to learn.</p>
36-
<p>And you should <a href="#">give it a try</a>.
39+
<p>You should <a href="#">give it a try</a>.
3740
</div>
3841
</div>
39-
<div id="splash" class="content">
42+
<div id="tryit" class="content">
43+
<div class="current"> Current Selector: <input type="text"></input><span class="results"></span></div>
44+
<pre class="doc json">
45+
{
46+
"name": {
47+
"first": "Lloyd",
48+
"last": "Hilaiel"
49+
},
50+
"favoriteColor": "yellow",
51+
"languagesSpoken": [
52+
{
53+
"language": "Bulgarian",
54+
"level": "advanced"
55+
},
56+
{
57+
"language": "English",
58+
"level": "native"
59+
},
60+
{
61+
"language": "Spanish",
62+
"level": "beginner"
63+
}
64+
],
65+
"seatingPreference": [
66+
"window",
67+
"aisle"
68+
],
69+
"drinkPreference": [
70+
"beer",
71+
"whiskey",
72+
"wine"
73+
],
74+
"weight": 172
75+
}
76+
</pre>
77+
<div class="selectors">
78+
<div class="title"> Choose A Selector... </div>
79+
<div class="selector">#languagesSpoken #language</div>
80+
<div class="selector">#drinkPreference :first-child</div>
81+
<div class="selector">string:first-child</div>
82+
<div class="selector">#name > #first, #name > #last</div>
83+
<div class="selector">#language</div>
84+
<div class="selector">#"weight"</div>
85+
<div class="selector">#favoriteColor</div>
86+
<div class="selector">string#favoriteColor</div>
87+
<div class="selector">string:last-child</div>
88+
<div class="selector">string:nth-child(-n+2)</div>
89+
<div class="selector">string:nth-child(odd)</div>
90+
<div class="selector">string:nth-last-child(1)</div>
91+
<div class="selector">:root</div>
92+
<div class="selector">number</div>
93+
<div class="selector">object</div>
94+
<div class="selector">string</div>
95+
</div>
4096
</div>
4197
</div>
4298

4399
<a href="https://github.com/lloyd/JSONSelect"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/4c7dc970b89fd04b81c8e221ba88ff99a06c6b61/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub"></a>
44100
</body>
101+
<script src="js/jquery-1.6.1.min.js"></script>
102+
<script src="js/jsonselect.js"></script>
103+
<script src="js/demo.js"></script>
45104
</html>

‎site/js/demo.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
window.jsel = JSONSelect;
2+
3+
$(document).ready(function() {
4+
var theDoc = JSON.parse($("pre.doc").text());
5+
6+
function highlightMatches(ar) {
7+
// first calculate match offsets
8+
var wrk = [];
9+
var html = $.trim(JSON.stringify(theDoc, undefined, 4));
10+
var ss = "<span class=\"selected\">";
11+
var es = "</span>";
12+
for (var i = 0; i < ar.length; i++) {
13+
var found = $.trim(JSON.stringify(ar[i], undefined, 4));
14+
// turn the string into a regex to handle indentation
15+
found = found.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&").replace(/\s+/gm, "\\s*");
16+
var re = new RegExp(found, "m");
17+
var m = re.exec(html);
18+
if (!m) {
19+
console.log("ERROR, can't match: " + found);
20+
continue;
21+
}
22+
wrk.push({ off: m.index, typ: "s" });
23+
wrk.push({ off: m[0].length+m.index, typ: "e" });
24+
}
25+
// sort by offset
26+
wrk = wrk.sort(function(a,b) { return a.off - b.off; });
27+
28+
// now start injecting spans into the text
29+
var cur = 0;
30+
var cons = 0;
31+
for (var i = 0; i < wrk.length; i++) {
32+
var diff = wrk[i].off - cons;
33+
cons = wrk[i].off;
34+
var tag = (wrk[i].typ == 's' ? ss : es);
35+
cur += diff;
36+
html = html.substr(0, cur) + tag + html.substr(cur);
37+
cur += tag.length;
38+
}
39+
return html;
40+
}
41+
42+
// when a selector is chosen, update the text box
43+
$(".selectors .selector").click(function() {
44+
$(".current input").val($(this).text()).keyup();
45+
});
46+
47+
var lastSel;
48+
$(".current input").keyup(function () {
49+
try {
50+
var sel = $(".current input").val()
51+
if (lastSel === $.trim(sel)) return;
52+
lastSel = $.trim(sel);
53+
var ar = jsel.match(sel, theDoc);
54+
$(".current .results").text(ar.length + " match" + (ar.length == 1 ? "" : "es"))
55+
.removeClass("error");
56+
$("pre.doc").html(highlightMatches(ar));
57+
$("pre.doc .selected").hide().fadeIn(700);
58+
} catch(e) {
59+
$(".current .results").text(e.toString()).addClass("error");
60+
$("pre.doc").text($.trim(JSON.stringify(theDoc, undefined, 4)));
61+
}
62+
$(".selectors .selector").removeClass("inuse");
63+
$(".selectors div.selector").each(function() {
64+
if ($(this).text() === sel) $(this).addClass("inuse");
65+
});
66+
});
67+
});

‎site/js/jquery-1.6.1.min.js‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/js/jsonselect.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
../../src/jsonselect.js

‎site/js/main.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
$(document).ready(function() {
2+
3+
});

0 commit comments

Comments
 (0)