Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit a7d69c9

Browse files
Narretzpetebacondarwin
authored andcommitted
docs: allow plnkr links to open in new window
Closes #8328 Closes #14008
1 parent f0f6da3 commit a7d69c9

File tree

4 files changed

+87
-40
lines changed

4 files changed

+87
-40
lines changed

docs/app/src/docs.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
angular.module('DocsController', [])
22

33
.controller('DocsController', [
4-
'$scope', '$rootScope', '$location', '$window', '$cookies', 'openPlunkr',
4+
'$scope', '$rootScope', '$location', '$window', '$cookies',
55
'NG_PAGES', 'NG_NAVIGATION', 'NG_VERSION',
6-
function($scope, $rootScope, $location, $window, $cookies, openPlunkr,
6+
function($scope, $rootScope, $location, $window, $cookies,
77
NG_PAGES, NG_NAVIGATION, NG_VERSION) {
88

9-
$scope.openPlunkr = openPlunkr;
10-
119
$scope.docsVersion = NG_VERSION.isSnapshot ? 'snapshot' : NG_VERSION.version;
1210

1311
$scope.navClass = function(navItem) {

docs/app/src/examples.js

+84-32
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,14 @@ angular.module('examples', [])
2222
};
2323
}])
2424

25-
26-
.factory('openPlunkr', ['formPostData', '$http', '$q', function(formPostData, $http, $q) {
27-
25+
.factory('createCopyrightNotice', function() {
2826
var COPYRIGHT = 'Copyright ' + (new Date()).getFullYear() + ' Google Inc. All Rights Reserved.\n'
2927
+ 'Use of this source code is governed by an MIT-style license that\n'
3028
+ 'can be found in the LICENSE file at http://angular.io/license';
3129
var COPYRIGHT_JS_CSS = '\n\n/*\n' + COPYRIGHT + '\n*/';
3230
var COPYRIGHT_HTML = '\n\n<!-- \n' + COPYRIGHT + '\n-->';
33-
function getCopyright(filename) {
31+
32+
return function getCopyright(filename) {
3433
switch (filename.substr(filename.lastIndexOf('.'))) {
3534
case '.html':
3635
return COPYRIGHT_HTML;
@@ -41,37 +40,100 @@ angular.module('examples', [])
4140
return COPYRIGHT;
4241
}
4342
return '';
44-
}
43+
};
44+
})
45+
46+
.directive('plnkrOpener', ['$q', 'getExampleData', 'formPostData', 'createCopyrightNotice', function($q, getExampleData, formPostData, createCopyrightNotice) {
47+
return {
48+
scope: {},
49+
bindToController: {
50+
'examplePath': '@'
51+
},
52+
controllerAs: 'plnkr',
53+
template: '<button ng-click="plnkr.open($event)" class="btn pull-right"> <i class="glyphicon glyphicon-edit">&nbsp;</i> Edit in Plunker</button> ',
54+
controller: [function() {
55+
var ctrl = this;
56+
57+
ctrl.example = {
58+
path: ctrl.examplePath,
59+
manifest: undefined,
60+
files: undefined,
61+
name: 'AngularJS Example'
62+
};
63+
64+
ctrl.prepareExampleData = function() {
65+
if (ctrl.example.manifest) {
66+
return $q.when(ctrl.example);
67+
}
68+
69+
return getExampleData(ctrl.examplePath).then(function(data) {
70+
ctrl.example.files = data.files;
71+
ctrl.example.manifest = data.manifest;
72+
73+
// Build a pretty title for the Plunkr
74+
var exampleNameParts = data.manifest.name.split('-');
75+
exampleNameParts.unshift('AngularJS');
76+
angular.forEach(exampleNameParts, function(part, index) {
77+
exampleNameParts[index] = part.charAt(0).toUpperCase() + part.substr(1);
78+
});
79+
ctrl.example.name = exampleNameParts.join(' - ');
80+
81+
return ctrl.example;
82+
});
83+
};
84+
85+
ctrl.open = function(clickEvent) {
86+
87+
var newWindow = clickEvent.ctrlKey || clickEvent.metaKey;
4588

46-
return function(exampleFolder, clickEvent) {
89+
var postData = {
90+
'tags[0]': "angularjs",
91+
'tags[1]': "example",
92+
'private': true
93+
};
4794

48-
var exampleName = 'AngularJS Example';
49-
var newWindow = clickEvent.ctrlKey || clickEvent.metaKey;
95+
// Make sure the example data is available.
96+
// If an XHR must be made, this might break some pop-up blockers when
97+
// new window is requested
98+
ctrl.prepareExampleData()
99+
.then(function() {
100+
angular.forEach(ctrl.example.files, function(file) {
101+
postData['files[' + file.name + ']'] = file.content + createCopyrightNotice(file.name);
102+
});
50103

104+
postData.description = ctrl.example.name;
105+
106+
formPostData('http://plnkr.co/edit/?p=preview', newWindow, postData);
107+
});
108+
109+
};
110+
111+
// Initialize the example data, so it's ready when clicking the open button.
112+
// Otherwise pop-up blockers will prevent a new window from opening
113+
ctrl.prepareExampleData(ctrl.example.path);
114+
115+
}]
116+
};
117+
}])
118+
119+
.factory('getExampleData', ['$http', '$q', function($http, $q) {
120+
return function(exampleFolder){
51121
// Load the manifest for the example
52-
$http.get(exampleFolder + '/manifest.json')
122+
return $http.get(exampleFolder + '/manifest.json')
53123
.then(function(response) {
54124
return response.data;
55125
})
56126
.then(function(manifest) {
57127
var filePromises = [];
58128

59-
// Build a pretty title for the Plunkr
60-
var exampleNameParts = manifest.name.split('-');
61-
exampleNameParts.unshift('AngularJS');
62-
angular.forEach(exampleNameParts, function(part, index) {
63-
exampleNameParts[index] = part.charAt(0).toUpperCase() + part.substr(1);
64-
});
65-
exampleName = exampleNameParts.join(' - ');
66-
67129
angular.forEach(manifest.files, function(filename) {
68130
filePromises.push($http.get(exampleFolder + '/' + filename, { transformResponse: [] })
69131
.then(function(response) {
70132

71133
// The manifests provide the production index file but Plunkr wants
72134
// a straight index.html
73135
if (filename === "index-production.html") {
74-
filename = "index.html"
136+
filename = "index.html";
75137
}
76138

77139
return {
@@ -80,21 +142,11 @@ angular.module('examples', [])
80142
};
81143
}));
82144
});
83-
return $q.all(filePromises);
84-
})
85-
.then(function(files) {
86-
var postData = {};
87145

88-
angular.forEach(files, function(file) {
89-
postData['files[' + file.name + ']'] = file.content + getCopyright(file.name);
146+
return $q.all({
147+
manifest: manifest,
148+
files: $q.all(filePromises)
90149
});
91-
92-
postData['tags[0]'] = "angularjs";
93-
postData['tags[1]'] = "example";
94-
postData.private = true;
95-
postData.description = exampleName;
96-
97-
formPostData('http://plnkr.co/edit/?p=preview', newWindow, postData);
98150
});
99151
};
100-
}]);
152+
}]);

docs/app/test/docsSpec.js

-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ describe("DocsController", function() {
33

44
angular.module('fake', [])
55
.value('$cookies', {})
6-
.value('openPlunkr', function() {})
76
.value('NG_PAGES', {})
87
.value('NG_NAVIGATION', {})
98
.value('NG_VERSION', {});

docs/config/templates/runnableExample.template.html

+1-3
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
is HTML and wrap each line in a <p> - thus breaking the HTML #}
33

44
<div>
5-
<a ng-click="openPlunkr('{$ doc.path $}', $event)" class="btn pull-right">
6-
<i class="glyphicon glyphicon-edit">&nbsp;</i>
7-
Edit in Plunker</a>
5+
<plnkr-opener example-path="{$ doc.path $}"></plnkr-opener>
86

97
<div class="runnable-example"
108
path="{$ doc.example.deployments.default.path $}"

0 commit comments

Comments
 (0)