Permalink
Browse files

Toying with an info button to add description and owner to bin. Light…

…box supports adding tabbed system to content. Removed old intro and tweak CSS around it.
  • Loading branch information...
1 parent 2cc3403 commit e0f0ba5fec5fa8dc60dabcdd7374ea0514cb6616 @remy remy committed Jan 14, 2010
Showing with 207 additions and 156 deletions.
  1. +98 −80 css/style.css
  2. +61 −49 help.html
  3. BIN images/info.gif
  4. +1 −23 index.php
  5. +12 −3 js/chrome/app.js
  6. +1 −1 js/chrome/navigation.js
  7. +9 −0 js/editors/editors.js
  8. +25 −0 js/render/lightbox.js
View
@@ -262,76 +262,6 @@ body.preview #source select {
background: rgba(255, 255, 255, 0.3);
}
-#intro {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 99;
- background: url(/images/op7.png) repeat;
- display: none;
-}
-
-#intro .lightbox {
- background: #ccc;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- color: #000;
- padding: 10px;
- width: 600px;
- margin: 100px auto;
- position: relative;
-}
-
-#intro .lightbox div {
- background: #fff;
- -moz-border-radius: 5px;
- -webkit-border-radius: 5px;
- border: 1px solid #fff;
- padding: 20px;
-}
-
-#intro h1 {
- margin: 0 0 22px 0;
-}
-
-#intro ul,
-#intro ol {
- padding-left: 10px;
- margin: 0;
-}
-
-#intro ul {
- list-style: none;
-}
-
-#intro ul li {
- margin-left: 0;
-}
-
-#intro li {
- margin: 20px;
- font-size: 120%;
-}
-
-#intro .intro, #intro .keyboardShortcuts {
- float: left;
- width: 48%;
-}
-
-#intro .keyboardShortcuts {
- border-left: 1px dashed #ccc;
-}
-
-#intro .screencasts {
- text-align: center;
- font-size: 130%;
- padding: 20px 0 0 0;
- clear: left;
- border-top: 1px solid #ccc;
-}
-
.html-only div.javascript {
left: -50%;
display: none;
@@ -385,7 +315,7 @@ body.preview #source select {
}
.lightbox h1 {
- margin-top: 0;
+ margin: 0;
background: #000;
padding: 20px;
color: #fff;
@@ -394,7 +324,8 @@ body.preview #source select {
}
.lightbox p,
-.lightbox h2 {
+.lightbox h2,
+.lightbox h3 {
margin: 14px 20px;
}
@@ -408,18 +339,27 @@ body.preview #source select {
}
.video {
- padding-left: 18px;
- background: url(/images/icons.gif) no-repeat 0 -20px;
+ padding-left: 20px;
+ background: url(/images/play.gif) no-repeat left center;
}
-.save {
- padding-left: 14px;
- background: url(/images/icons.gif) no-repeat 0 4px;
+#info {
+ display: inline-block;
+ background: url(/images/info.gif) no-repeat bottom left;
+ color: #fff;
+ font-weight: bold;
+ font-style: italic;
+ font-family: georgia;
+ font-size: 10px;
+ height: 14px;
+ line-height: 14px;
+ width: 14px;
+ text-align: center;
+ text-shadow: none;
}
-#revert {
- padding-left: 14px;
- background: url(/images/icons.gif) no-repeat 0 -39px;
+#info:hover {
+ background: url(/images/info.gif) no-repeat top left;
}
#startingpoint {
@@ -430,4 +370,82 @@ textarea {
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
+}
+
+/* tab based help pages */
+#navigation {
+ margin: 0;
+ float: left;
+ display: block;
+ width: 200px;
+ padding-left: 0px;
+ list-style: none;
+}
+
+#navigation li {
+ margin: 1px 0;
+}
+
+#navigation a {
+ background: #A2B2CC;
+ display: block;
+ color: #fff;
+ text-decoration: none;
+ padding: 10px;
+ margin: 1px 0;
+ text-shadow: none;
+}
+
+#navigation a:hover,
+#navigation a.selected:hover {
+ background: #89C;
+ font-weight: bold;
+}
+
+#navigation a:active {
+ border: 2px solid #647ECC;
+ padding: 8px;
+}
+
+#navigation a.selected {
+ background: #768BCC;
+ font-weight: bold;
+}
+
+.panels {
+ margin-left: 210px;
+}
+
+.panels li {
+ margin: 14px 0;
+}
+
+.panels code {
+ font-size: 16px;
+}
+
+/* hud - apply style hud */
+.hud {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 99;
+ background: url(/images/op7.png) repeat;
+}
+
+.hud .outercontainer {
+ background: #1B1B1B;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ color: #fff;
+ position: relative;
+}
+
+.hud .title {
+ text-align: center;
+ text-shadow: #000 1px 1px 1px;
+ background: #454645;
}
View
110 help.html
@@ -8,78 +8,90 @@
<div id="content">
<h1 id="help">Help</h1>
- <h2 id="tips">Tips</h2>
+ <div>
+ <h2 id="tips">Tips</h2>
+ <ul>
+ <li>Click on the HTML or JavaScript labels to hide the JavaScript panel (this is stored to your preferences).</li>
+ <li>To only show the HTML panel use #html on the end of the url, such as <a href="http://jsbin.com/#html">http://jsbin.com/#html</a></li>
+ <li>&#8220;Use as my template&#8221; stores the current code as the default code you see when you open a new JS Bin window.</li>
+ <li>Refreshing the window will not lose your changes.</li>
+ <li>Use <code>console.log</code> to display debug information. If Firebug is present, then the logging goes there, otherwise it will show in a custom console window.</li>
+ <li>To view only the JavaScript append <code>/js</code> to the url, i.e. http://jsbin.com/ujayi/js</li>
+ </ul>
+
+ </div>
- <ul>
- <li>Click on the HTML or JavaScript labels to hide the JavaScript panel (this is stored to your preferences).</li>
- <li>To only show the HTML panel use #html on the end of the url, such as http://jsbin.com/#html</li>
- <li>&#8220;Use as my template&#8221; stores the current code as the default code you see when you open a new JS Bin window.</li>
- <li>Refreshing the window will not lose your changes.</li>
- <li>Use <code>console.log</code> to display debug information. If Firebug is present, then the logging goes there, otherwise it will show in a custom console window.</li>
- <li>To view only the JavaScript append <code>/js</code> to the url, i.e. http://jsbin.com/ujayi/js</li>
- </ul>
+ <div>
+ <h2 id="keyboard_navigation">Keyboard navigation</h2>
- <h2 id="keyboard_navigation">Keyboard navigation</h2>
+ <ul class="keyboardShortcuts">
+ <li><code>ctrl + 1</code> View source</li>
+ <li><code>ctrl + 2</code> View preview</li>
+ <li><code>ctrl + &larr;</code> Focus JavaScript</li>
+ <li><code>ctrl + &rarr;</code> Focus HTML</li>
+ </ul>
+ </div>
- <ul>
- <li>View source: ctrl + 1</li>
- <li>Preview: ctrl + 2</li>
- <li>Switch source code panel: ctrl + left cursor (for switching from HTML to JavaScript), ctrl + right cursor (for switching from JavaScript to HTML)</li>
- </ul>
+ <div>
+ <h2 id="faq">FAQ</h2>
+
+ <h3>When I change the url to a different JS Bin, it still has the old code</h3>
- <h2 id="faq">FAQ</h2>
+ <p>Click the <strong>revert</strong> button and it will reload the code from the database based on the url you requested.</p>
- <ul>
- <li>When I change the url to a different JS Bin, it still has the old code</li>
- </ul>
+ <h3>Can I run a Gist in JS Bin?</h3>
- <p>Click the <strong>revert</strong> button and it will reload the code from the database based on the url you requested.</p>
+ <p>Funny you ask! Absolutely you can - just save the <a href="http://gist.github.com" title="Gist">gist</a> in Github, and either using the <a href="javascript:(function(){window.location='http://jsbin.com/gist'+window.location.pathname})()">gist to JS Bin</a> bookmarklet, or change the url from <a href="http://gist.github.com/271333">http://gist.github.com/<strong>271333</strong></a> to <a href="http://jsbin.com/gist/271333">http://jsbin.com/<strong>gist/271333</strong></a></p>
- <ul>
- <li>I didn&#8217;t insert the JavaScript and it still runs</li>
- </ul>
+ <h3>I didn't insert the JavaScript and it still runs</h3>
- <p>When you tab to the output panel, JS Bin automatically inserts your JavaScript on the fly, so you don&#8217;t need to worry about it.</p>
+ <p>When you tab to the output panel, JS Bin automatically inserts your JavaScript on the fly, so you don&#8217;t need to worry about it.</p>
- <ul>
- <li>I need my JavaScript inserted in a specific position</li>
- </ul>
+ <h3>I need my JavaScript inserted in a specific position</h3>
- <p>Either insert the JavaScript directly in to the HTML panel, or you can use the special <code>%code%</code> command. Add <code>&lt;script&gt;%code%&lt;/script&gt;</code> to your HTML and the contents of the JavaScript panel will be inserted at that point.</p>
+ <p>Either insert the JavaScript directly in to the HTML panel, or you can use the special <code>%code%</code> command. Add <code>&lt;script&gt;%code%&lt;/script&gt;</code> to your HTML and the contents of the JavaScript panel will be inserted at that point.</p>
- <ul>
- <li>How do I re-run or re-render the code</li>
- </ul>
+ <h3>How do I re-run or re-render the code</h3>
- <p>Just click the &#8216;Preview&#8217; button, and your entire code will re-run.</p>
+ <p>Just click the &#8216;Preview&#8217; button, and your entire code will re-run.</p>
- <ul>
- <li>Can JS Bin respond to Ajax requests?</li>
- </ul>
+ <h3>Can JS Bin respond to Ajax requests?</h3>
- <p>Yes. See the Ajax debugging video (in the top of the navigation) for a demo. Or, it&#8217;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>
+ <p>Yes. See the Ajax debugging video (in the top of the navigation) for a demo. Or, it&#8217;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>
- <ul>
- <li>IE6?</li>
- </ul>
+ <h3>IE6?</h3>
- <p>I&#8217;m afraid not, but the application is open source, so if you think you can get it working - please go ahead: <a href="http://github.com/remy/jsbin">http://github.com/remy/jsbin</a></p>
+ <p>I&#8217;m afraid not, but the application is open source, so if you think you can get it working - please go ahead: <a href="http://github.com/remy/jsbin">http://github.com/remy/jsbin</a></p>
- <ul>
- <li>My question isn&#8217;t answered</li>
- </ul>
+ <h3>My question isn&#8217;t answered</h3>
- <p>Feel free to get in touch and if appropriate I&#8217;ll add it to the FAQ.</p>
+ <p>Feel free to get in touch and if appropriate I&#8217;ll add it to the FAQ.</p>
+ </div>
+ <div>
+ <h2 id="who_built_this">Who built this?</h2>
- <h2 id="who_built_this">Who built this?</h2>
+ <p>JS Bin was built by <a href="http://remysharp.com">Remy Sharp</a> and is completely open source and available <a href="http://github.com/remy/jsbin">http://github.com/remy/jsbin</a>. If you would like to work with me on a front end development project, <a href="http://leftlogic.com/contact?message=Found%20through%20jsbin.com">please get in touch</a>.</p>
+ <p>You can also follow <a href="http://twitter.com/rem">@rem</a> on Twitter where he'll tweet about JavaScript, HTML 5 and other such gems.</p>
- <p>JS Bin was built by <a href="http://remysharp.com">Remy Sharp</a> and is completely open source and available <a href="http://github.com/remy/jsbin">http://github.com/remy/jsbin</a>. If you would like to work with me on a front end development project, <a href="http://leftlogic.com/contact?message=Found%20through%20jsbin.com">please get in touch</a>. You should follow me on Twitter <a href="http://twitter.com/rem">here</a> where I tweet about JavaScript, HTML 5 and other such gems.</p>
+ <p>UX was kindly donated by <a href="http://yandleblog.com">Danny Hope</a> who also tweets <a href="http://twitter.com/yandle">here</a>.</p>
+ </div>
- <p>UX was kindly donated by <a href="http://yandleblog.com">Danny Hope</a> who also tweets <a href="http://twitter.com/yandle">here</a>.</p>
+ <div>
+ <h2 id="about">About</h2>
+ <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>
- <h2 id="bug_feedback">Bug / Feedback</h2>
+ <p><a href="">Version 1 of JS Bin</a> took me the best part of 4 hours to develop, but version 2, this version, has been rewritten from the ground up and is completely <a href="http://github.com/remy/jsbin">open source</a>.</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>
- <p>Please log an issues or feedback via the <a href="http://github.com/remy/jsbin/issues">issue tracker</a>.</p>
+
+ <div>
+ <h2 id="bug_feedback">Bugs / Feedback</h2>
+
+ <p>Please log an issues or feedback via the <a href="http://github.com/remy/jsbin/issues">issue tracker</a>.</p>
+ </div>
</div>
</body>
</html>
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -7,29 +7,6 @@
<link rel="stylesheet" href="/css/style.css" type="text/css" />
</head>
<body class="source">
-<div id="intro">
- <div class="lightbox">
- <div>
- <h1>Collaborative JavaScript Debugging</h1>
- <ol class="intro">
- <li>Test live JavaScript with HTML and CSS context</li>
- <li>Public URLs render outside of JS Bin</li>
- <li>Inject major JavaScript libraries</li>
- <li>Debug remote Ajax calls</li>
- </ol>
-
- <ul class="keyboardShortcuts">
- <li><strong>Keyboard Shortcuts:</strong></li>
- <li><code>ctrl + 1</code> View source</li>
- <li><code>ctrl + 2</code> View preview</li>
- <li><code>ctrl + &larr;</code> Focus JavaScript</li>
- <li><code>ctrl + &rarr;</code> Focus HTML</li>
- </ul>
-
- <p class="screencasts">Screencasts: <a href="/about#video">About</a> - <a href="/about#ajax">Ajax debugging</a></p>
- </div>
- </div>
-</div>
<div id="control">
<div class="control">
<div class="buttons">
@@ -41,6 +18,7 @@
<?php else : ?>
<a id="save" class="save" href="/save">Create public link</a>
<?php endif ?>
+ <a class="light" id="info" href="/info">&nbsp;</a>
<p><a class="light" id="revert" href="#">Revert</a><?php if ($code_id) : ?><span id="revision"> &mdash; <a id="newRevision" class="light save" href="/save">New revision</a></span><?php endif ?></p>
</div>
<div class="starting">
Oops, something went wrong.

0 comments on commit e0f0ba5

Please sign in to comment.