Permalink
Browse files

Updated todo, and put embed back in

  • Loading branch information...
1 parent 901be2e commit f888b275554b9a2ad0cacb79247908f6deb1eeff @remy remy committed Jul 4, 2012
Showing with 193 additions and 44 deletions.
  1. +7 −44 TODO.md
  2. +37 −0 docs/embedding.md
  3. +21 −0 docs/post.md
  4. +128 −0 public/js/embed.js
View
51 TODO.md
@@ -14,68 +14,31 @@
- /latest is fixed - not redirected
- If I'm on /latest, any new updates, notify me and I can reload/live refresh if I want
- Rewind? Possibly not.
+- /last/[username]/ is a hot link to your last + edit, live combo supported
+
+# Code Casting
+
+- Add data to report number of connected users
+- Add visual cue that you're following
# Panels
-- Options for pre-rendering
-- .getCode runs through panel language
+- UI for pre-rendering
- "insertionPoint" means we can have more panels
# Save
- Add gist support back in (but do it server side) - support Lea's dabblet format (but files named jsbin.html, etc)
- Fork (as well as clone) and folk allows me to trace this heirachy of bins saved to get to this point
-- Remove sha1 and move to better security
# Misc
-- Include analytics for dynamic nature of JS Bin
-- Libs need to support styles, etc specific to the version
- Expose API for specific tasks:
- prefilters for panels
- codemirror config
- jsbin settings (key mappings?)
-- Expose all the urls - via slash, but also via dot - ie. abc.js or abc.css
- Humans.txt
-# Embed
-
-User includes jsbin-embed.js in their code - probably in the footer - it runs one doc ready. As a user I have a few options:
-
-1. full embed - pulls an existing jsbin directly in to my site (though url can prefine which panels to show)
-2. mixed embed - mixes existing content in my site with a predefined jsbin - enabling me to template code
-3. scoop links - allows me to pass through to jsbin, but it carries through the code from the site
-
-## Example of full embed
-
-A mini JS Bin embed in their site via an iframe - since the height is flexible inside jsbin, user can style the iframe that's generated.
-
- <a class="jsbin jsbin-embed" href="http://jsbin.com/abc/edit">Edit this example</a>
-
-Full embed that only includes the JS & Live output
-
- <a class="jsbin jsbin-embed" href="http://jsbin.com/abc/edit?live,javascript">Edit this example</a>
-
-Mixed embed, that references existing code in my blog and uses the template on the endpoint to run the example:
-
-?? Question - should this try to detect the type of language based on the first few lines, and therefore insert in the best place?
-
- <a class="jsbin jsbin-mix-embed" rel="#mycode-example1" href="http://jsbin.com/abc/edit">Edit this example</a>
-
-## Scoop links
-
-By clicking on this link, I'll arrive on jsbin.com with the "abc" existing code, and the code from `#mycode-example1` inserted in to the correct place (possibly detecting which panel to show too). This is achieved with:
-
- <a class="jsbin jsbin-scoop" rel="#mycode-example1" href="http://jsbin.com/abc/edit">Edit this example</a>
-
-The JavaScript will transform the link to something like: jsbin.com/abc/edit?live,javascript=[some escaped javascript]
-
-Example usage: on jQuery UI site, much easier if I could just add a link that says to scoop up the existing code and splat in to jsbin.com
-
-## Removing the rel attribute
-
-If we're really smart, we could go hunting for the closest `<pre>` element by looking through the parent elements to the link found.
-
# IE
- Gutter is being rendered thick if the panel isn't visible - possibly solution, only render CM when made visible - problem is the .getCode won't work - so need to think about how to get around it.
View
@@ -0,0 +1,37 @@
+# Embed
+
+User includes `http://jsbin.com/js/embed.js` in their code - probably in the footer - it runs one doc ready. As a user I have a few options:
+
+1. full embed - pulls an existing jsbin directly in to my site (though url can prefine which panels to show)
+2. mixed embed - mixes existing content in my site with a predefined jsbin - enabling me to template code
+3. scoop links - allows me to pass through to jsbin, but it carries through the code from the site
+
+## Example of full embed
+
+A mini JS Bin embed in their site via an iframe - since the height is flexible inside jsbin, user can style the iframe that's generated.
+
+ <a class="jsbin jsbin-embed" href="http://jsbin.com/abc/edit">Edit this example</a>
+
+Full embed that only includes the JS & Live output
+
+ <a class="jsbin jsbin-embed" href="http://jsbin.com/abc/edit?live,javascript">Edit this example</a>
+
+Mixed embed, that references existing code in my blog and uses the template on the endpoint to run the example:
+
+?? Question - should this try to detect the type of language based on the first few lines, and therefore insert in the best place?
+
+ <a class="jsbin jsbin-mix-embed" rel="#mycode-example1" href="http://jsbin.com/abc/edit">Edit this example</a>
+
+## Scoop links
+
+By clicking on this link, I'll arrive on jsbin.com with the "abc" existing code, and the code from `#mycode-example1` inserted in to the correct place (possibly detecting which panel to show too). This is achieved with:
+
+ <a class="jsbin jsbin-scoop" rel="#mycode-example1" href="http://jsbin.com/abc/edit">Edit this example</a>
+
+The JavaScript will transform the link to something like: jsbin.com/abc/edit?live,javascript=[some escaped javascript]
+
+Example usage: on jQuery UI site, much easier if I could just add a link that says to scoop up the existing code and splat in to jsbin.com
+
+## Removing the rel attribute
+
+If we're really smart, we could go hunting for the closest `<pre>` element by looking through the parent elements to the link found.
View
@@ -0,0 +1,21 @@
+# JS Bin v3: built for sharing, education and real-time
+
+# Headings
+
+- What is JS Bin for, bit of history, launched in 2008
+- What's new in JS Bin
+ - Huge focus on live: live rendering, live codecasting, live remote rendering
+ - New UX
+ - Exposed a lot of the beta features from v2, like accounts to recall saved bins (also exposed the history live preview)
+ - Sticky urls
+ - Complete rewrite from PHP to Node
+ - Dave the JS Bin Bot!
+- Open source, host it yourself, have hosted bespoke solution, embedding
+- What's coming?
+ - Exposing API to add your own libraries and customise the editor in a single click
+ - Hosting of personl static assets to include in tests
+ - Preprossesors (they're already live, but there's no UI)
+ - Github / gist support
+
+# What is a JS Bin
+
View
@@ -0,0 +1,128 @@
+(function (window, document, undefined) {
+
+var innerText = document.createElement('i').innerText === undefined ? 'textContent' : 'innerText';
+
+// 1. find all links with class=jsbin
+function getLinks() {
+ var links, alllinks, i = 0, length;
+ if (document.querySelectorAll) {
+ links = [].slice.call(document.querySelectorAll('a.jsbin'));
+ } else {
+ alllinks = document.getElementsByTagName('a');
+ length = links.length;
+ for (; i < length; i++) {
+ if ((' ' + alllinks[i].className + ' ').indexOf(' jsbin ') !== -1) {
+ links.push(alllinks[i]);
+ }
+ }
+ }
+
+ return links;
+}
+
+function findCodeInParent(element) {
+ var match = element;
+
+ while (match = match.previousSibling) {
+ console.log(match.nodeName);
+ if (match.nodeName === 'PRE') {
+ break;
+ }
+ if (match.getElementsByTagName) {
+ match = match.getElementsByTagName('pre');
+ if (match.length) {
+ match = match[0]; // only grabs the first
+ break;
+ }
+ }
+ }
+
+ if (match) return match;
+
+ match = element.parentNode.getElementsByTagName('pre');
+
+ if (!match.length) {
+ if (element.parentNode) {
+ return findCodeInParent(element.parentNode);
+ } else {
+ return null;
+ }
+ }
+
+ return match[0];
+}
+
+function findCode(link) {
+ var rel = link.rel,
+ query = link.search.substring(1),
+ element,
+ code,
+ panels = [];
+
+ if (rel && (element = document.getElementById(rel.substring(1)))) {
+ code = element[innerText];
+ // else - try to support multiple targets for each panel...
+ // } else if (query.indexOf('=') !== -1) {
+ // // assumes one of the panels points to an ID
+ // query.replace(/([^,=]*)=([^,=]*)/g, function (all, key, value) {
+ // code = document.getElementById(value.substring(1))[innerText];
+
+ // });
+ } else {
+ // go looking through it's parents
+ element = findCodeInParent(link);
+ if (element) {
+ code = element[innerText];
+ }
+ }
+
+ return code;
+}
+
+function detectLanguage(code) {
+ var htmlcount = (code.split("<").length - 1),
+ csscount = (code.split("{").length - 1),
+ jscount = (code.split(".").length - 1);
+
+ if (htmlcount > csscount && htmlcount > jscount) {
+ return 'html';
+ } else if (csscount > htmlcount && csscount > jscount) {
+ return 'css';
+ } else {
+ return 'javascript';
+ }
+}
+
+function scoop(link) {
+ var code = findCode(link),
+ language = detectLanguage(code),
+ query = link.search.substring(1);
+
+ if (language === 'html' && code.toLowerCase().indexOf('<html') === -1) {
+ // assume this is an HTML fragment - so try to insert in the %code% position
+ language = 'code';
+ }
+
+ if (query.indexOf(language) === -1) {
+ query += ',' + language + '=' + encodeURIComponent(code);
+ } else {
+ query = query.replace(language, language + '=' + encodeURIComponent(code));
+ }
+
+ link.search = '?' + query;
+}
+
+// 2. process link based on subclass - jsbin-scoop to start with
+var links = getLinks(),
+ i = 0,
+ length = links.length,
+ className = '';
+
+for (; i < length; i++) {
+ className = ' ' + links[i].className + ' ';
+ if (className.indexOf(' jsbin-scoop ') !== -1) {
+ scoop(links[i]);
+ }
+}
+
+}(this, document));

0 comments on commit f888b27

Please sign in to comment.