feat(docs): add plunkr support

Add option to edit source in Angular Docs in Plunkr in addition to JsFiddle
angular · Oct 31, 2012 · 7c67b2f · 7c67b2f
1 parent 3c9b39f
commit 7c67b2f
Showing 1 changed file with 54 additions and 4 deletions.
diff --git a/docs/src/templates/js/docs.js b/docs/src/templates/js/docs.js
@@ -30,9 +30,16 @@ docsApp.directive.code = function() {
 
 docsApp.directive.sourceEdit = function(getEmbeddedTemplate) {
   return {
-    template: '<button ng-click="fiddle($event)" class="btn btn-primary pull-right"><i class="icon-pencil icon-white"></i> Edit</button>\n',
+    template: '<div class="btn-group pull-right">' +
+        '<a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href>' +
+        '  <i class="icon-pencil icon-white"></i> Edit<span class="caret"></span>' +
+        '</a>' +
+        '<ul class="dropdown-menu">' +
+        '  <li><a ng-click="plunkr($event)" href="">In Plunkr</a></li>' +
+        '  <li><a ng-click="fiddle($event)" href="">In JsFiddle</a></li>' +
+        '</ul>',
     scope: true,
-    controller: function($scope, $attrs, openJsFiddle) {
+    controller: function($scope, $attrs, openJsFiddle, openPlunkr) {
       var sources = {
         module: $attrs.sourceEdit,
         deps: read($attrs.sourceEditDeps),
@@ -45,7 +52,11 @@ docsApp.directive.sourceEdit = function(getEmbeddedTemplate) {
       $scope.fiddle = function(e) {
         e.stopPropagation();
         openJsFiddle(sources);
-      }
+      };
+      $scope.plunkr = function(e) {
+        e.stopPropagation();
+        openPlunkr(sources);
+      };
     }
   }
 
@@ -145,8 +156,47 @@ docsApp.serviceFactory.formPostData = function($document) {
   };
 };
 
+docsApp.serviceFactory.openPlunkr = function(templateMerge, formPostData, angularUrls) {
+  return function(content) {
+    var allFiles = [].concat(content.js, content.css, content.html);
+    var indexHtmlContent = '<!doctype html>\n' +
+        '<html ng-app>\n' +
+        '  <head>\n' +
+        '    <script src="{{angularJSUrl}}"></script>\n' +
+        '{{scriptDeps}}\n' +
+        '  </head>\n' +
+        '  <body>\n\n' +
+        '{{indexContents}}' +
+        '\n\n  </body>\n' +
+        '</html>\n';
+    var scriptDeps = '';
+    angular.forEach(content.deps, function(file) {
+      if (file.name !== 'angular.js') {
+        scriptDeps += '    <script src="' + file.name + '"></script>\n'
+      }
+    });
+    indexProp = {
+      angularJSUrl: angularUrls['angular.js'],
+      scriptDeps: scriptDeps,
+      indexContents: content.html[0].content
+    };
+    var postData = {};
+    angular.forEach(allFiles, function(file, index) {
+      if (file.content && file.name != 'index.html') {
+        postData['files[' + file.name + ']'] = file.content;
+      }
+    });
+
+    postData['files[index.html]'] = templateMerge(indexHtmlContent, indexProp);
+
+    postData.description = 'AngularJS Example Plunkr';
+
+    formPostData('http://plnkr.co/edit/?p=preview', postData);
+  };
+};
+
+docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angularUrls) {
 
-docsApp.serviceFactory.openJsFiddle = function(templateMerge, getEmbeddedTemplate, formPostData, angularUrls) {
   var HTML = '<div ng-app=\"{{module}}\">\n{{html:2}}</div>',
       CSS = '</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> \n' +
         '{{head:0}}<style>\n.ng-invalid { border: 1px solid red; }\n{{css}}',