Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-17 07:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(docs): add plunkr support

Browse source 
Add option to edit source in Angular Docs in Plunkr in addition to JsFiddle
This commit is contained in:
Shyam Seshadri 2012-10-25 20:57:15 +05:30 committed by Igor Minar
parent 3c9b39ff52
commit 7c67b2fb6a
1 changed files with 54 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
docs/src/templates/js/docs.js
View file

@ -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}}',