docs: allow plnkr links to open in new window

Closes #8328
Closes #14008

Author: Narretz

docs/app/src/docs.js

@@ -1,13 +1,11 @@
 angular.module('DocsController', [])
 
 .controller('DocsController', [
-          '$scope', '$rootScope', '$location', '$window', '$cookies', 'openPlunkr',
+          '$scope', '$rootScope', '$location', '$window', '$cookies',
               'NG_PAGES', 'NG_NAVIGATION', 'NG_VERSION',
-  function($scope, $rootScope, $location, $window, $cookies, openPlunkr,
+  function($scope, $rootScope, $location, $window, $cookies,
               NG_PAGES, NG_NAVIGATION, NG_VERSION) {
 
-  $scope.openPlunkr = openPlunkr;
-
   $scope.docsVersion = NG_VERSION.isSnapshot ? 'snapshot' : NG_VERSION.version;
 
   $scope.navClass = function(navItem) {

docs/app/src/examples.js

@@ -22,15 +22,14 @@ angular.module('examples', [])
   };
 }])
 
-
-.factory('openPlunkr', ['formPostData', '$http', '$q', function(formPostData, $http, $q) {
-
+.factory('createCopyrightNotice', function() {
     var COPYRIGHT = 'Copyright ' + (new Date()).getFullYear() + ' Google Inc. All Rights Reserved.\n'
      + 'Use of this source code is governed by an MIT-style license that\n'
      + 'can be found in the LICENSE file at http://angular.io/license';
     var COPYRIGHT_JS_CSS = '\n\n/*\n' + COPYRIGHT + '\n*/';
     var COPYRIGHT_HTML = '\n\n<!-- \n' + COPYRIGHT + '\n-->';
-    function getCopyright(filename) {
+
+    return function getCopyright(filename) {
       switch (filename.substr(filename.lastIndexOf('.'))) {
         case '.html':
           return COPYRIGHT_HTML;
@@ -41,37 +40,100 @@ angular.module('examples', [])
           return COPYRIGHT;
       }
       return '';
-    }
+    };
+})
+
+.directive('plnkrOpener', ['$q', 'getExampleData', 'formPostData', 'createCopyrightNotice', function($q, getExampleData, formPostData, createCopyrightNotice) {
+  return {
+    scope: {},
+    bindToController: {
+      'examplePath': '@'
+    },
+    controllerAs: 'plnkr',
+    template: '<button ng-click="plnkr.open($event)" class="btn pull-right"> <i class="glyphicon glyphicon-edit">&nbsp;</i> Edit in Plunker</button> ',
+    controller: [function() {
+      var ctrl = this;
+
+      ctrl.example = {
+        path: ctrl.examplePath,
+        manifest: undefined,
+        files: undefined,
+        name: 'AngularJS Example'
+      };
+
+      ctrl.prepareExampleData = function() {
+        if (ctrl.example.manifest) {
+          return $q.when(ctrl.example);
+        }
+
+        return getExampleData(ctrl.examplePath).then(function(data) {
+          ctrl.example.files = data.files;
+          ctrl.example.manifest = data.manifest;
+
+          // Build a pretty title for the Plunkr
+          var exampleNameParts = data.manifest.name.split('-');
+          exampleNameParts.unshift('AngularJS');
+          angular.forEach(exampleNameParts, function(part, index) {
+            exampleNameParts[index] = part.charAt(0).toUpperCase() + part.substr(1);
+          });
+          ctrl.example.name = exampleNameParts.join(' - ');
+
+          return ctrl.example;
+        });
+      };
+
+      ctrl.open = function(clickEvent) {
+
+        var newWindow = clickEvent.ctrlKey || clickEvent.metaKey;
 
-    return function(exampleFolder, clickEvent) {
+        var postData = {
+          'tags[0]': "angularjs",
+          'tags[1]': "example",
+          'private': true
+        };
 
-    var exampleName = 'AngularJS Example';
-    var newWindow = clickEvent.ctrlKey || clickEvent.metaKey;
+        // Make sure the example data is available.
+        // If an XHR must be made, this might break some pop-up blockers when
+        // new window is requested
+        ctrl.prepareExampleData()
+          .then(function() {
+            angular.forEach(ctrl.example.files, function(file) {
+              postData['files[' + file.name + ']'] = file.content + createCopyrightNotice(file.name);
+            });
 
+            postData.description = ctrl.example.name;
+
+            formPostData('http://plnkr.co/edit/?p=preview', newWindow, postData);
+          });
+
+      };
+
+      // Initialize the example data, so it's ready when clicking the open button.
+      // Otherwise pop-up blockers will prevent a new window from opening
+      ctrl.prepareExampleData(ctrl.example.path);
+
+    }]
+  };
+}])
+
+.factory('getExampleData', ['$http', '$q', function($http, $q) {
+  return function(exampleFolder){
     // Load the manifest for the example
-    $http.get(exampleFolder + '/manifest.json')
+    return $http.get(exampleFolder + '/manifest.json')
       .then(function(response) {
         return response.data;
       })
       .then(function(manifest) {
         var filePromises = [];
 
-        // Build a pretty title for the Plunkr
-        var exampleNameParts = manifest.name.split('-');
-        exampleNameParts.unshift('AngularJS');
-        angular.forEach(exampleNameParts, function(part, index) {
-          exampleNameParts[index] = part.charAt(0).toUpperCase() + part.substr(1);
-        });
-        exampleName = exampleNameParts.join(' - ');
-
         angular.forEach(manifest.files, function(filename) {
           filePromises.push($http.get(exampleFolder + '/' + filename, { transformResponse: [] })
             .then(function(response) {
 
               // The manifests provide the production index file but Plunkr wants
               // a straight index.html
               if (filename === "index-production.html") {
-                filename = "index.html"
+                filename = "index.html";
               }
 
               return {
@@ -80,21 +142,11 @@ angular.module('examples', [])
               };
             }));
         });
-        return $q.all(filePromises);
-      })
-      .then(function(files) {
-        var postData = {};
 
-        angular.forEach(files, function(file) {
-          postData['files[' + file.name + ']'] = file.content + getCopyright(file.name);
+        return $q.all({
+          manifest: manifest,
+          files: $q.all(filePromises)
         });
-
-        postData['tags[0]'] = "angularjs";
-        postData['tags[1]'] = "example";
-        postData.private = true;
-        postData.description = exampleName;
-
-        formPostData('http://plnkr.co/edit/?p=preview', newWindow, postData);
       });
   };
-}]);
+}]);

docs/app/test/docsSpec.js

@@ -3,7 +3,6 @@ describe("DocsController", function() {
 
   angular.module('fake', [])
     .value('$cookies', {})
-    .value('openPlunkr', function() {})
     .value('NG_PAGES', {})
     .value('NG_NAVIGATION', {})
     .value('NG_VERSION', {});

docs/config/templates/runnableExample.template.html

@@ -2,9 +2,7 @@
    is HTML and wrap each line in a <p> - thus breaking the HTML #}
 
 <div>
-  <a ng-click="openPlunkr('{$ doc.path $}', $event)" class="btn pull-right">
-    <i class="glyphicon glyphicon-edit">&nbsp;</i>
-    Edit in Plunker</a>
+  <plnkr-opener example-path="{$ doc.path $}"></plnkr-opener>
 
   <div class="runnable-example"
       path="{$ doc.example.deployments.default.path $}"