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

Commit 8d6bd51

Browse files
matskomhevery
matsko
authored and
mhevery
committed
fix(ngdocs): make jsFiddle and Plunkr links work with external AngularJS modules
1 parent 576269b commit 8d6bd51

File tree

1 file changed

+86
-23
lines changed

1 file changed

+86
-23
lines changed

‎docs/src/templates/js/docs.js

+86-23
Original file line numberDiff line numberDiff line change
@@ -357,32 +357,85 @@ docsApp.serviceFactory.formPostData = function($document) {
357357
};
358358
};
359359

360-
docsApp.serviceFactory.openPlunkr = function(templateMerge, formPostData, angularUrls) {
361-
return function(content) {
360+
361+
362+
docsApp.serviceFactory.prepareEditorAssetTags = function(angularUrls) {
363+
return function(content, options) {
364+
options = options || {};
365+
var includeLocalFiles = options.includeLocalFiles;
366+
var html = makeScriptTag(angularUrls['angular.js']);
367+
362368
var allFiles = [].concat(content.js, content.css, content.html, content.json);
363-
var indexHtmlContent = '<!doctype html>\n' +
364-
'<html ng-app="{{module}}">\n' +
365-
' <head>\n' +
366-
' <script src="{{angularJSUrl}}"></script>\n' +
367-
'{{scriptDeps}}\n' +
368-
' </head>\n' +
369-
' <body>\n\n' +
370-
'{{indexContents}}' +
371-
'\n\n </body>\n' +
372-
'</html>\n';
373-
var scriptDeps = '';
374369
angular.forEach(content.deps, function(file) {
375370
if (file.name !== 'angular.js') {
376-
scriptDeps += ' <script src="' + file.name + '"></script>\n';
371+
var isLocal = false;
372+
for(var i=0;i<allFiles.length;i++) {
373+
if(allFiles[i].name == file.name) {
374+
isLocal = true;
375+
break;
376+
}
377+
}
378+
if(!(isLocal && !includeLocalFiles)) {
379+
var assetUrl = angularUrls[file.name] || file.name;
380+
html += makeScriptTag(assetUrl);
381+
}
377382
}
378383
});
384+
385+
if(includeLocalFiles) {
386+
angular.forEach(content.css, function(file, index) {
387+
html += makeCssLinkTag(file.name);
388+
});
389+
}
390+
391+
return html;
392+
393+
394+
function makeScriptTag(src) {
395+
return '<script type="text/javascript" src="' + src + '"></script>\n';
396+
};
397+
398+
function makeCssLinkTag(src) {
399+
return '<link rel="stylesheet" type="text/css" href="' + src + '" />\n';
400+
};
401+
};
402+
};
403+
404+
405+
docsApp.serviceFactory.openPlunkr = function(templateMerge, formPostData, prepareEditorAssetTags) {
406+
return function(content) {
407+
var hasRouting = false;
408+
angular.forEach(content.deps, function(file) {
409+
hasRouting = hasRouting || file.name == 'angular-route.js';
410+
});
411+
var indexHtmlContent = '<!doctype html>\n' +
412+
'<html ng-app="{{module}}">\n' +
413+
' <head>\n' +
414+
'{{scriptDeps}}';
415+
416+
if(hasRouting) {
417+
indexHtmlContent += '<script type="text/javascript">\n' +
418+
'//this is here to make plunkr work with AngularJS routing\n' +
419+
'angular.element(document.getElementsByTagName(\'head\')).append(' +
420+
'angular.element(\'<base href="\' + window.location.pathname + \'" />\')' +
421+
');\n' +
422+
'</script>\n';
423+
}
424+
425+
indexHtmlContent += '</head>\n' +
426+
' <body>\n\n' +
427+
'{{indexContents}}\n\n' +
428+
' </body>\n' +
429+
'</html>\n';
430+
379431
indexProp = {
380432
module: content.module,
381-
angularJSUrl: angularUrls['angular.js'],
382-
scriptDeps: scriptDeps,
433+
scriptDeps: prepareEditorAssetTags(content, { includeLocalFiles : true }),
383434
indexContents: content.html[0].content
384435
};
385436
var postData = {};
437+
438+
var allFiles = [].concat(content.js, content.css, content.html, content.json);
386439
angular.forEach(allFiles, function(file, index) {
387440
if (file.content && file.name != 'index.html') {
388441
postData['files[' + file.name + ']'] = file.content;
@@ -399,13 +452,14 @@ docsApp.serviceFactory.openPlunkr = function(templateMerge, formPostData, angula
399452
};
400453
};
401454

402-
docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angularUrls) {
403-
455+
docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, prepareEditorAssetTags) {
404456
var HTML = '<div ng-app=\"{{module}}\">\n{{html:2}}</div>',
405-
CSS = '</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> \n' +
457+
CSS = '</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> \n' +
406458
'{{head:0}}<style>\n​.ng-invalid { border: 1px solid red; }​\n{{css}}',
407459
SCRIPT = '{{script}}',
408-
SCRIPT_CACHE = '\n\n<!-- {{name}} -->\n<script type="text/ng-template" id="{{name}}">\n{{content:2}}</script>';
460+
SCRIPT_CACHE = '\n\n<!-- {{name}} -->\n<script type="text/ng-template" id="{{name}}">\n{{content:2}}</script>',
461+
BASE_HREF_TAG = '<!-- Ugly Hack to make AngularJS routing work inside of jsFiddle -->\n' +
462+
'<base href="/" />\n\n';
409463

410464
return function(content) {
411465
var prop = {
@@ -415,8 +469,6 @@ docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angu
415469
script: ''
416470
};
417471

418-
prop.head = templateMerge('<script src="{{url}}"></script>', {url: angularUrls['angular.js']});
419-
420472
angular.forEach(content.html, function(file, index) {
421473
if (index) {
422474
prop.html += templateMerge(SCRIPT_CACHE, file);
@@ -425,6 +477,8 @@ docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angu
425477
}
426478
});
427479

480+
prop.head = prepareEditorAssetTags(content, { includeLocalFiles : false });
481+
428482
angular.forEach(content.js, function(file, index) {
429483
prop.script += file.content;
430484
});
@@ -433,9 +487,18 @@ docsApp.serviceFactory.openJsFiddle = function(templateMerge, formPostData, angu
433487
prop.css += file.content;
434488
});
435489

490+
var hasRouting = false;
491+
angular.forEach(content.deps, function(file) {
492+
hasRouting = hasRouting || file.name == 'angular-route.js';
493+
});
494+
495+
var compiledHTML = templateMerge(HTML, prop);
496+
if(hasRouting) {
497+
compiledHTML = BASE_HREF_TAG + compiledHTML;
498+
}
436499
formPostData("http://jsfiddle.net/api/post/library/pure/", {
437500
title: 'AngularJS Example',
438-
html: templateMerge(HTML, prop),
501+
html: compiledHTML,
439502
js: templateMerge(SCRIPT, prop),
440503
css: templateMerge(CSS, prop)
441504
});

0 commit comments

Comments
 (0)