doc(sample): Add javascript sandbox integration (jsFiddle)

Change doc_widget.js to:

- render "edit in jsfiddle" button next to all examples
- make opt out certain examples by adding jsfiddle="false" attribute to
  doc:source element

6 files changed, 78 insertions, 6 deletions

diff --git a/docs/src/templates/doc_widgets.css b/docs/src/templates/doc_widgets.css
index 6b702644..b0348b22 100644
--- a/docs/src/templates/doc_widgets.css
+++ b/docs/src/templates/doc_widgets.css
@@ -19,6 +19,37 @@ ul.doc-example > li.doc-example-heading {
   margin-bottom: -10px;
 }
 
+span.nojsfiddle {
+  float: right;
+  font-size: 14px;
+  margin-right:10px;
+  margin-top: 10px;
+}
+
+form.jsfiddle {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+  height: 14px;
+}
+
+form.jsfiddle button {
+  cursor: pointer;
+  padding: 4px 10px;
+  margin: 10px;
+  background-color: #FFF;
+  font-weight: bold;
+  color: #7989D6;
+  border-color: #7989D6;
+  -moz-border-radius: 8px;
+  -webkit-border-radius:8px;
+  border-radius: 8px;
+}
+
+form.jsfiddle textarea, form.jsfiddle input {
+  display: none;
+}
+
 li.doc-example-live {
   padding: 10px;
   font-size: 1.2em;
diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
index 0be15101..31600ccc 100644
--- a/docs/src/templates/doc_widgets.js
+++ b/docs/src/templates/doc_widgets.js
@@ -28,6 +28,7 @@
     //jqlite instead. jqlite's find() method currently supports onlt getElementsByTagName!
     var example = element.find('pre').eq(0),  //doc-source
         exampleSrc = example.text(),
+        jsfiddle = element.find('doc:source').attr('jsfiddle') || true,
         scenario = element.find('pre').eq(1); //doc-scenario
 
     var code = indent(exampleSrc);
@@ -35,7 +36,8 @@
       '<ul class="doc-example">' +
         '<li class="doc-example-heading"><h3>Source</h3></li>' +
         '<li class="doc-example-source" ng:non-bindable>' +
-          '<pre class="brush: js; html-script: true; highlight: [' +
+        jsFiddleButton(jsfiddle) + // may or may not have value
+        '<pre class="brush: js; html-script: true; highlight: [' +
           code.hilite + ']; toolbar: false;"></pre></li>' +
         '<li class="doc-example-heading"><h3>Live Preview</h3></li>' +
         '<li class="doc-example-live">' + exampleSrc +'</li>';
@@ -59,6 +61,45 @@
     } catch (e) {
       alert(e);
     }
+
+    function jsFiddleButton(jsfiddle) {
+      if (jsfiddle !== 'false') {
+        if(jsfiddle == true) {
+          //dynamically generate a fiddle
+          var fiddleUrl = 'http://jsfiddle.net/api/post/library/pure/',
+              fiddleSrc =  exampleSrc,
+              stripIndent = fiddleSrc.match(/^(\s*)/)[1].length;
+
+          //escape closing textarea
+          fiddleSrc = fiddleSrc.replace(/<\/textarea>/gi,'&lt;/textarea&gt;')
+          //strip extra indentation
+          fiddleSrc = fiddleSrc.replace(new RegExp('^\\s{' + stripIndent + '}', 'gm'), '');
+
+          return '<form class="jsfiddle" method="post" action="' + fiddleUrl + '" target="_blank">' +
+                    '<textarea name="css">' +
+                      'body { font-family: Arial,Helvetica,sans-serif; }\n' +
+                      'body, td, th { font-size: 14px; margin: 0; }\n' +
+                      'table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }\n' +
+                      'a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }\n' +
+                    '</textarea>' +
+                    '<input type="text" name="title" value="AngularJS Live Example">' +
+                    '<textarea name="html">' +
+                      '<script src="' + angularJsUrl + '" ng:autobind></script>\n\n' +
+                      '<!-- AngularJS Example Code: -->\n\n' +
+                      fiddleSrc +
+                    '</textarea>' +
+                    '<button>edit at jsFiddle</button>' +
+                  '</form>';
+        } else {
+          //use existing fiddle
+          fiddleUrl = "http://jsfiddle.net" + jsfiddle;
+          return '<form class="jsfiddle" method="get" action="' + fiddleUrl + '" target="_blank">' +
+                   '<button>edit at jsFiddle</button>' +
+                 '</form>';
+        }
+      }
+      return '';
+    }
   });
 
   function indent(text) {
diff --git a/src/service/resource.js b/src/service/resource.js
index c11067b1..f6e0be18 100644
--- a/src/service/resource.js
+++ b/src/service/resource.js
@@ -157,7 +157,7 @@
 
    Let's look at what a buzz client created with the `$resource` service looks like:
     <doc:example>
-      <doc:source>
+      <doc:source jsfiddle="false">
        <script>
          function BuzzController($resource) {
            this.Activity = $resource(
diff --git a/src/service/route.js b/src/service/route.js
index 9534968a..3d555e4d 100644
--- a/src/service/route.js
+++ b/src/service/route.js
@@ -22,7 +22,7 @@
    Try changing the URL in the input box to see changes.
 
     <doc:example>
-      <doc:source>
+      <doc:source jsfiddle="false">
         <script>
           function MainCntl($route, $location) {
             this.$route = $route;
diff --git a/src/service/xhr.js b/src/service/xhr.js
index 224bc57a..70fcd067 100644
--- a/src/service/xhr.js
+++ b/src/service/xhr.js
@@ -109,7 +109,7 @@
  *
  * @example
    <doc:example>
-     <doc:source>
+     <doc:source jsfiddle="false">
        <script>
          function FetchCntl($xhr) {
            var self = this;
diff --git a/src/widgets.js b/src/widgets.js
index 8a97f61b..4a2820c9 100644
--- a/src/widgets.js
+++ b/src/widgets.js
@@ -955,7 +955,7 @@ angularWidget('select', function(element){
  *
  * @example
     <doc:example>
-      <doc:source>
+      <doc:source jsfiddle="false">
        <select name="url">
         <option value="examples/ng-include/template1.html">template1.html</option>
         <option value="examples/ng-include/template2.html">template2.html</option>
@@ -1389,7 +1389,7 @@ angularWidget("@ng:non-bindable", noop);
  *
  * @example
     <doc:example>
-      <doc:source>
+      <doc:source jsfiddle="false">
          <script>
            function MyCtrl($route) {
              $route.when('/overview',