Permalink
Browse files

Added lightbox for help and faq - old content, to be updated

  • Loading branch information...
1 parent ac2b6f1 commit 90122765940ace89949597a3e9c0e75553026f70 @remy remy committed Jan 9, 2010
Showing with 211 additions and 7 deletions.
  1. +3 −0 .htaccess
  2. +20 −0 about.html
  3. +64 −0 css/style.css
  4. +45 −0 faq.html
  5. +2 −2 index.php
  6. +2 −2 js/chrome/app.js
  7. +2 −2 js/chrome/gist.js
  8. +42 −1 js/chrome/navigation.js
  9. +31 −0 js/render/lightbox.js
View
@@ -24,6 +24,9 @@ RewriteCond %{REQUEST_FILENAME} -d [OR]
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule .* - [L]
+RewriteCond %{REQUEST_FILENAME}.html -f
+RewriteRule ^(.*)$ $1.html [L]
+
# using 'index.php' because it forces a '/' request to the handler
RewriteRule ^(.*)$ index.php [QSA,L]
</IfModule>
View
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset=utf-8 />
+<title>About JS Bin</title>
+</head>
+<body>
+ <div id="content">
+ <div>
+ <h1>About</h1>
+ <p><a href="/">JS Bin</a> is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively.</p>
+ <p>JS Bin allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code - new tabs doesn't). Once you're happy you can save, and send the URL to a peer for review or help. They can then make further changes saving anew if required.</p>
+ <p>The original idea spawned from a conversation with another developer in trying to help him debug an Ajax issue. The original aim was to build it using Google's app engine, but in the end, it was <a href="http://ejohn.org">John Resig</a>'s <a href="http://ejohn.org/apps/learn">Learning app</a> that inspired me to build the whole solution in JavaScript with liberal dashes of jQuery and a tiny bit of LAMP for the saving process.</p>
+
+ <p>It took me the best part of 4 hours to develop - so if it's shaky around the edges, let me know!</p>
+ <p><em>This webapp was built by <a href="http://remysharp.com">Remy Sharp</a> (<a href="http://twitter.com/rem">@rem</a>) of <a href="http://leftlogic.com">Left Logic</a>. <a href="http://leftlogic.com/contact?message=Found%20through%20jsbin.com">Please get in touch</a> if you're interested in working with me.</em></p>
+ </div>
+ </div>
+</body>
+</html>
View
@@ -43,6 +43,10 @@ p {
float: right;
}
+.help a {
+ outline: 0;
+}
+
.starting, .help {
line-height: 32px;
}
@@ -352,4 +356,64 @@ body.preview #source select {
.html-only div.html {
left: 0%;
width: 100%;
+}
+
+/* lightbox */
+.lightboxWrapper {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ left: 0;
+ width: 100%;
+}
+
+.overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 11;
+}
+
+.overlay {
+ opacity: 0.5;
+ -moz-opacity: 0.5;
+ filter:alpha(opacity=50);
+ background: #fff;
+}
+
+.lightbox {
+ position: relative;
+ width: 600px;
+ z-index: 12;
+ border: 10px solid #ccc;
+ margin: 0 auto;
+ overflow-y: auto;
+ overflow-x: hidden;
+ background: #fff;
+ -moz-box-shadow: #666 0px 0px 5px;
+ -webkit-box-shadow: #666 0px 0px 5px;
+ box-shadow: #666 0px 0px 5px;
+ top: 75px;
+ width: 80%;
+ max-height: 65%;
+}
+
+.lightbox h1 {
+ margin-top: 0;
+ background: #000;
+ padding: 20px;
+ color: #fff;
+ position: relative;
+/* width: 100%;*/
+}
+
+.lightbox p,
+.lightbox h2 {
+ margin: 14px 20px;
+}
+
+.lightbox p {
+ font-size: 16px;
}
View
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset=utf-8 />
+<title>About JS Bin</title>
+</head>
+<body>
+ <div id="content">
+ <h1>FAQ</h1>
+
+ <h2>I didn't insert the JavaScript and it still runs</h2>
+ <p>When you tab to the <em>output</em> panel, JS Bin <em>automatically</em> inserts your JavaScript on the fly, so you don't need to worry about it.</p>
+
+
+ <h2>I need my JavaScript inserted in a specific position</h2>
+ <p>The <em>special %code%</em> symbol will be replaced with your JavaScript. If it's not included, it will be included just before the body closes. Otherwise you can add <em>&lt;script&gt;%code%&lt;/script&gt;</em> anywhere you like.</p>
+
+ <h2>How do I re-run the code</h2>
+
+ <p>Just <em>click the 'Output'</em> tab, and the entire frame will re-execute.</p>
+
+ <h2>Can I see the output outside of this window?</h2>
+ <p>Yes. First you must save the code, then <em>use the 'Live' link</em>. This is now stored privately and can be shared amongst your peers.</p>
+
+ <h2>When I click the live link it doesn't reflect my changes</h2>
+
+ <p>The live link <em>only shows the saved</em> code, any changes must be saved first.</p>
+
+ <h2>Can JS Bin respond to Ajax requests?</h2>
+ <p>Yes. See the <a class="tab" href="#video">video introduction</a> for a demo. Or, it's as simple as removing the HTML output, saving the code, then requesting the URL via a new snippet. JS Bin will respond to Ajax requests appropriately.</p>
+
+ <h2>Is there a bookmarklet?</h2>
+
+ <p>Funny you ask! Yes, just drag the following <a href="javascript:(function(){window.location='http://jsbin.com/?js='+encodeURIComponent((window.getSelection?window.getSelection():document.selection.createRange().text)+'')})()">jsbin</a> bookmarklet to your bookmark bar. The bookmarklet will inject any selected JavaScript in to JS Bin.</p>
+
+ <h2>IE6?</h2>
+ <p>Sorry: <em>no</em>.</p>
+
+ <h2>My question isn't answered</h2>
+
+ <p>Feel free to <a href="http://leftlogic.com/contact?message=Question%20regarding%20JS Bin:%20">get in touch</a> and if appropriate I'll add it to the FAQ.</p>
+
+ </div>
+</body>
+</html>
View
@@ -45,9 +45,9 @@
</div>
<div class="help">
<ul class="flat">
- <li><a href="#">About</a></li>
+ <li><a href="/about">About</a></li>
<li><a href="#">Ajax Debugging</a></li>
- <li><a href="#">Help</a></li>
+ <li><a href="/faq">Help</a></li>
</ul>
</div>
</div>
View
@@ -7,7 +7,7 @@ var debug = false,
unload = function () {
sessionStorage.setItem('javascript', editors.javascript.getCode());
sessionStorage.setItem('html', editors.html.getCode());
-
+
var panel = getFocusedPanel();
sessionStorage.setItem('panel', panel);
sessionStorage.setItem('line', editors[panel].currentLine());
@@ -30,7 +30,7 @@ if (localStorage && localStorage.getItem('html-only')) {
if (/gist\/\d+/.test(window.location.pathname) && (!sessionStorage.getItem('javascript') && !sessionStorage.getItem('html'))) {
window.editors = editors; // needs to be global when the callback triggers to set the content
$.getScript('/js/chrome/gist.js', function () {
- var gist = new Gist(window.location.pathname.replace(/.*?(\d+).*/, "$1"));
+ window.gist = new Gist(window.location.pathname.replace(/.*?(\d+).*/, "$1"));
});
}
View
@@ -11,9 +11,9 @@ var Gist = function (id) {
});
gist.code = code.join("\n");
- var type = $('.gist-meta a:first', win.body).attr('href').substr(-2) == 'js' ? 'javascript' : 'html';
+ gist.type = $('.gist-meta a:first', win.body).attr('href').substr(-2) == 'js' ? 'javascript' : 'html';
- editors[type].setCode(gist.code);
+ editors[gist.type].setCode(gist.code);
iframe.remove();
});
win.open();
View
@@ -1,3 +1,5 @@
+//= require "../render/lightbox"
+
$('#startingpoint').click(function () {
if (localStorage) {
localStorage.setItem('saved-javascript', editors.javascript.getCode());
@@ -15,6 +17,10 @@ $('#revert').click(function () {
editors.javascript.focus();
$('#library').val('none');
+
+ if (window.gist != undefined) {
+ editors[gist.type].setCode(gist.code);
+ }
$(document).trigger('codeChange', [ true ]);
@@ -28,4 +34,39 @@ $('#control .button').click(function (event) {
if ($(this).is('.preview')) {
renderPreview();
}
-});
+});
+
+$('#control div.help a').click(function (event) {
+ event.preventDefault();
+ var useAjax = false,
+ url = $(this).attr('href'); // using href to ensure the url doesn't resolve
+
+ if (url.substr(0, 1) == '#') {
+ url = this.hash; // id based
+ } else {
+ useAjax = true;
+ }
+
+ if (useAjax) {
+ $.ajax({
+ url: url,
+ dataType: 'html',
+ error: function () {
+ // console.log(arguments);
+ },
+ complete: function (res) {
+ var content = $('<div />').append(res.responseText.replace(/<script(.|\s)*?\/script>/g, "")).find('#content').html();
+ var lightbox = new Lightbox(content, 100).show();
+ }
+ });
+ }
+});
+
+
+
+
+
+
+
+
+
View
@@ -0,0 +1,31 @@
+var Lightbox = function (source, effectSpeed) {
+ var $box = $('<div class="lightboxWrapper"><div class="overlay"></div><div class="lightbox"></div></div>')
+ .hide()
+ .find('.lightbox')
+ .html(source)
+ .end();
+
+ this.speed = effectSpeed || 'normal';
+ this.$box = $box;
+};
+
+Lightbox.prototype.show = function () {
+ var lightbox = this;
+ lightbox.$box.appendTo(document.body).fadeIn(lightbox.speed);
+
+ var escape = function (event) {
+ if (event.keyCode == 27 || event.type == 'click') {
+ lightbox.remove();
+ $(document).unbind('keyup', escape);
+ }
+ };
+
+ $(document).keyup(escape);
+ lightbox.$box.find('.overlay').click(escape);
+};
+
+Lightbox.prototype.remove = function () {
+ this.$box.fadeTo(this.speed, 0, function () {
+ $(this).remove();
+ });
+};

0 comments on commit 9012276

Please sign in to comment.