Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0fc625d

Browse files
GeoffreyBoothGeoffreyBooth
committed
Try CoffeeScript add play and link buttons
1 parent ef1005b commit 0fc625d

6 files changed

Lines changed: 64 additions & 26 deletions

File tree

‎docs/v2/index.html‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,7 @@
355355
color: #0b140f;
356356
border-color: #53d88f;
357357
transition: 0.2s ease-in-out;
358+
min-width: 3.125rem;
358359
}
359360
.btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-primary:active:hover, .btn-primary:active:focus {
360361
background-color: #61fea8;
@@ -390,7 +391,7 @@
390391
}
391392

392393
.try-coffeescript .CodeMirror {
393-
height: calc(100vh - 3.5rem);
394+
height: calc(100vh - 7rem);
394395
cursor: text;
395396
}
396397

@@ -402,11 +403,10 @@
402403
color: #2f2625;
403404
}
404405

405-
.try-coffeescript coffeescript-input-column,
406-
.try-coffeescript coffeescript-input,
407-
.try-coffeescript javascript-output-column,
408-
.try-coffeescript javascript-output {
409-
height: 100%;
406+
.try-coffeescript button svg {
407+
height: 1em;
408+
transform: scale(1.3) translateY(0.1em);
409+
fill: #0b140f;
410410
}
411411

412412
/* Adapted from https://github.com/FarhadG/code-mirror-themes/blob/master/themes/twilight.css */
@@ -456,7 +456,7 @@
456456
<body>
457457

458458
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse bg-ribbed-dark">
459-
<a class="navbar-brand" href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-22 347 566 100">
459+
<a class="navbar-brand" href="#" data-close="try"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-22 347 566 100">
460460
<title>
461461
CoffeeScript Logo
462462
</title>
@@ -465,9 +465,9 @@
465465
</a>
466466
<nav class="nav navbar-nav float-xs-left hidden-md-down">
467467
<a href="#try" id="try-link" class="nav-item nav-link" data-toggle="try">Try CoffeeScript</a>
468-
<a href="#language" class="nav-item nav-link">Language Reference</a>
469-
<a href="#resources" class="nav-item nav-link">Resources</a>
470-
<a href="http://github.com/jashkenas/coffeescript/" class="nav-item nav-link">GitHub</a>
468+
<a href="#language" class="nav-item nav-link" data-close="try">Language Reference</a>
469+
<a href="#resources" class="nav-item nav-link" data-close="try">Resources</a>
470+
<a href="http://github.com/jashkenas/coffeescript/" class="nav-item nav-link" data-close="try">GitHub</a>
471471
</nav>
472472
<button type="button" class="navbar-menu-button hidden-lg-up" data-toggle="offcanvas" aria-label="Toggle sidebar">
473473
<div class="menu-button">
@@ -480,13 +480,20 @@
480480
</nav>
481481

482482

483-
<aside id="try" class="try-coffeescript container-fluid">
483+
<aside id="try" class="try-coffeescript container-fluid" data-example="try">
484484
<div class="row">
485485
<div class="col-md-6 code-column bg-ribbed-dark coffeescript-input-column">
486-
<textarea class="coffeescript-input">alert 'Hello CoffeeScript!'</textarea>
486+
<textarea class="coffeescript-input" id="try-coffeescript-coffee">alert 'Hello CoffeeScript!'</textarea>
487487
</div>
488488
<div class="col-md-6 code-column bg-ribbed-dark javascript-output-column">
489-
<textarea class="javascript-output">alert('Hello CoffeeScript!');</textarea>
489+
<textarea class="javascript-output" id="try-coffeescript-js">alert('Hello CoffeeScript!');</textarea>
490+
</div>
491+
</div>
492+
<div class="row">
493+
<div class="col-xs-12 text-xs-right">
494+
<button type="button" class="btn btn-primary" data-action="run-code-example" data-example="try-coffeescript" data-run="true">▶</button>&emsp;
495+
<button type="button" class="btn btn-primary" data-action="link" data-example="try-coffeescript"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>
496+
</button>
490497
</div>
491498
</div>
492499
</aside>
@@ -3621,8 +3628,11 @@ <h2 class="header">
36213628
# Try CoffeeScript
36223629
toggleTry = ->
36233630
$('#try, #try-link').toggleClass 'active'
3631+
closeTry = ->
3632+
$('#try, #try-link').removeClass 'active'
36243633

36253634
$('[data-toggle="try"]').click toggleTry
3635+
$('[data-close="try"]').click closeTry
36263636

36273637

36283638
# Initialize Scrollspy for sidebar navigation; http://v4-alpha.getbootstrap.com/components/scrollspy/
@@ -3684,11 +3694,20 @@ <h2 class="header">
36843694
js = "#{js}\nalert(#{unescape run});" unless run is yes
36853695
eval js
36863696

3697+
$('[data-action="link"]').click ->
3698+
index = $("##{$(@).data('example')}-coffee").data 'index'
3699+
coffee = editors[index].getValue()
3700+
link = "try:#{encodeURIComponent coffee}"
3701+
window.history.pushState {}, 'CoffeeScript', "#{location.href.split('#')[0]}##{link}"
3702+
36873703

36883704
# Configure the initial state
36893705
if window.location.hash?
36903706
if window.location.hash is '#try'
36913707
toggleTry()
3708+
else if window.location.hash.indexOf('#try') is 0
3709+
editors[0].setValue decodeURIComponent window.location.hash[5..]
3710+
toggleTry()
36923711
else
36933712
initializeScrollspyFromHash window.location.hash
36943713

‎documentation/images/link.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎documentation/v2/docs.coffee‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,11 @@ $(document).ready ->
1717
# Try CoffeeScript
1818
toggleTry = ->
1919
$('#try, #try-link').toggleClass 'active'
20+
closeTry = ->
21+
$('#try, #try-link').removeClass 'active'
2022

2123
$('[data-toggle="try"]').click toggleTry
24+
$('[data-close="try"]').click closeTry
2225

2326

2427
# Initialize Scrollspy for sidebar navigation; http://v4-alpha.getbootstrap.com/components/scrollspy/
@@ -80,10 +83,19 @@ $(document).ready ->
8083
js = "#{js}\nalert(#{unescape run});" unless run is yes
8184
eval js
8285

86+
$('[data-action="link"]').click ->
87+
index = $("##{$(@).data('example')}-coffee").data 'index'
88+
coffee = editors[index].getValue()
89+
link = "try:#{encodeURIComponent coffee}"
90+
window.history.pushState {}, 'CoffeeScript', "#{location.href.split('#')[0]}##{link}"
91+
8392

8493
# Configure the initial state
8594
if window.location.hash?
8695
if window.location.hash is '#try'
8796
toggleTry()
97+
else if window.location.hash.indexOf('#try') is 0
98+
editors[0].setValue decodeURIComponent window.location.hash[5..]
99+
toggleTry()
88100
else
89101
initializeScrollspyFromHash window.location.hash

‎documentation/v2/docs.css‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,7 @@ textarea {
335335
color: #0b140f;
336336
border-color: #53d88f;
337337
transition: 0.2s ease-in-out;
338+
min-width: 3.125rem;
338339
}
339340
.btn-primary:active, .btn-primary:focus, .btn-primary:hover, .btn-primary:active:hover, .btn-primary:active:focus {
340341
background-color: #61fea8;
@@ -370,7 +371,7 @@ textarea {
370371
}
371372

372373
.try-coffeescript .CodeMirror {
373-
height: calc(100vh - 3.5rem);
374+
height: calc(100vh - 7rem);
374375
cursor: text;
375376
}
376377

@@ -382,9 +383,8 @@ textarea {
382383
color: #2f2625;
383384
}
384385

385-
.try-coffeescript coffeescript-input-column,
386-
.try-coffeescript coffeescript-input,
387-
.try-coffeescript javascript-output-column,
388-
.try-coffeescript javascript-output {
389-
height: 100%;
386+
.try-coffeescript button svg {
387+
height: 1em;
388+
transform: scale(1.3) translateY(0.1em);
389+
fill: #0b140f;
390390
}

‎documentation/v2/navbar.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<nav class="navbar navbar-dark navbar-fixed-top bg-inverse bg-ribbed-dark">
2-
<a class="navbar-brand" href="#"><%= include('documentation/images/logo.svg') %></a>
2+
<a class="navbar-brand" href="#" data-close="try"><%= include('documentation/images/logo.svg') %></a>
33
<nav class="nav navbar-nav float-xs-left hidden-md-down">
44
<a href="#try" id="try-link" class="nav-item nav-link" data-toggle="try">Try CoffeeScript</a>
5-
<a href="#language" class="nav-item nav-link">Language Reference</a>
6-
<a href="#resources" class="nav-item nav-link">Resources</a>
7-
<a href="http://github.com/jashkenas/coffeescript/" class="nav-item nav-link">GitHub</a>
5+
<a href="#language" class="nav-item nav-link" data-close="try">Language Reference</a>
6+
<a href="#resources" class="nav-item nav-link" data-close="try">Resources</a>
7+
<a href="http://github.com/jashkenas/coffeescript/" class="nav-item nav-link" data-close="try">GitHub</a>
88
</nav>
99
<button type="button" class="navbar-menu-button hidden-lg-up" data-toggle="offcanvas" aria-label="Toggle sidebar">
1010
<div class="menu-button">

‎documentation/v2/try.html‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1-
<aside id="try" class="try-coffeescript container-fluid">
1+
<aside id="try" class="try-coffeescript container-fluid" data-example="try">
22
<div class="row">
33
<div class="col-md-6 code-column bg-ribbed-dark coffeescript-input-column">
4-
<textarea class="coffeescript-input">alert 'Hello CoffeeScript!'</textarea>
4+
<textarea class="coffeescript-input" id="try-coffeescript-coffee">alert 'Hello CoffeeScript!'</textarea>
55
</div>
66
<div class="col-md-6 code-column bg-ribbed-dark javascript-output-column">
7-
<textarea class="javascript-output">alert('Hello CoffeeScript!');</textarea>
7+
<textarea class="javascript-output" id="try-coffeescript-js">alert('Hello CoffeeScript!');</textarea>
8+
</div>
9+
</div>
10+
<div class="row">
11+
<div class="col-xs-12 text-xs-right">
12+
<button type="button" class="btn btn-primary" data-action="run-code-example" data-example="try-coffeescript" data-run="true">▶</button>&emsp;
13+
<button type="button" class="btn btn-primary" data-action="link" data-example="try-coffeescript"><%= include('documentation/images/link.svg') %></button>
814
</div>
915
</div>
1016
</aside>

0 commit comments

Comments
 (0)