docs(runnableExamples): add "edit in Plunker" button

The "runnableExample.template.html" template overrides the one in the
dgeni-packages "examples" package with a similar template that also has
a link to a special Plunker URL that can pull in the example from our
code.angularjs.org website.

2 files changed, 29 insertions, 0 deletions

diff --git a/docs/app/src/docs.js b/docs/app/src/docs.js
index 74d78136..5c6a76d4 100644
--- a/docs/app/src/docs.js
+++ b/docs/app/src/docs.js
@@ -2,6 +2,8 @@ angular.module('DocsController', [])
 
 .controller('DocsController', function($scope, $rootScope, $location, $window, $cookies, NG_PAGES, NG_NAVIGATION, NG_VERSION) {
 
+  $scope.docsVersion = NG_VERSION.isSnapshot ? 'snapshot' : NG_VERSION.version;
+  
   $scope.fold = function(url) {
     if(url) {
       $scope.docs_fold = '/notes/' + url;
diff --git a/docs/config/templates/runnableExample.template.html b/docs/config/templates/runnableExample.template.html
new file mode 100644
index 00000000..4fe2a38f
--- /dev/null
+++ b/docs/config/templates/runnableExample.template.html
@@ -0,0 +1,27 @@
+{# Be aware that we need these extra new lines here or marked will not realise that the <div>
+   is HTML and wrap each line in a <p> - thus breaking the HTML #}
+
+<div>
+  <a ng-href="http://plnkr.co/edit/ngdoc:{$ doc.example.id $}@{{docsVersion}}?p=preview" class="btn pull-right" target="_blank">
+    <i class="glyphicon glyphicon-edit">&nbsp;</i>
+    Edit in Plunker</a>
+  <div class="runnable-example"
+      path="{$ doc.example.outputFolder $}"
+      {%- for attrName, attrValue in doc.example.attributes %}
+      {$ attrName $}="{$ attrValue $}"{% endfor %}>
+
+   {% for fileName, file in doc.example.files %}
+    <div class="runnable-example-file" {% for attrName, attrValue in file.attributes %}
+      {$ attrName $}="{$ attrValue $}"{% endfor %}>
+      {% code -%}
+      {$ file.fileContents $}
+      {%- endcode %}  
+    </div>
+  {% endfor %}
+
+    <iframe class="runnable-example-frame" src="{$ doc.example.outputFolder $}/index.html" name="{$ doc.example.id $}"></iframe>
+  </div>
+</div>
+
+{# Be aware that we need these extra new lines here or marked will not realise that the <div>
+   above is HTML and wrap each line in a <p> - thus breaking the HTML #}
\ No newline at end of file