chore: add embedded plunkers functionality (#2194)

Author: Foxandxss

.gitignore

@@ -25,6 +25,8 @@ www
 npm-debug*.log*
 *.plnkr.html
 plnkr.html
+*.eplnkr.html
+eplnkr.html
 *plnkr.no-link.html
 public/docs/*/latest/guide/cheatsheet.json
 protractor-results.txt

gulpfile.js

@@ -45,7 +45,8 @@ var STYLES_SOURCE_PATH = path.join(TOOLS_PATH, 'styles-builder/less');
 
 var docShredder = require(path.resolve(TOOLS_PATH, 'doc-shredder/doc-shredder'));
 var exampleZipper = require(path.resolve(TOOLS_PATH, '_example-zipper/exampleZipper'));
-var plunkerBuilder = require(path.resolve(TOOLS_PATH, 'plunker-builder/plunkerBuilder'));
+var regularPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/regularPlunker'));
+var embeddedPlunker = require(path.resolve(TOOLS_PATH, 'plunker-builder/embeddedPlunker'));
 var fsUtils = require(path.resolve(TOOLS_PATH, 'fs-utils/fsUtils'));
 
 const isSilent = !!argv.silent;
@@ -603,7 +604,8 @@ gulp.task('build-dart-api-docs', ['_shred-api-examples', 'dartdoc'], function()
 });
 
 gulp.task('build-plunkers', ['_copy-example-boilerplate'], function() {
-  return plunkerBuilder.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build });
+  regularPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build });
+  return embeddedPlunker.buildPlunkers(EXAMPLES_PATH, LIVE_EXAMPLES_PATH, { errFn: gutil.log, build: argv.build });
 });
 
 gulp.task('build-dart-cheatsheet', [], function() {

public/_includes/_scripts-include.jade

@@ -64,4 +64,4 @@ script(src="//www.gstatic.com/feedback/api.js" type="text/javascript")
 
 <!-- Twitter Widget -->
 script.
-  (function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}})(document,"script","twitter-wjs");
+  (function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}})(document,"script","twitter-wjs");

public/docs/ts/latest/guide/ngmodule.jade

@@ -131,7 +131,7 @@ a#bootstrap
 :marked
   The samples in this chapter demonstrate the dynamic bootstrapping approach. 
 
-  <live-example plnkr="minimal.0">Try the live example.</live-example>
+  <live-example embedded plnkr="minimal.0">Try the live example.</live-example>
 
 
   ### Static bootstrapping with the Ahead-Of-Time (AOT) compiler
@@ -606,7 +606,7 @@ a#feature-modules
     * No `ContactService` provider
     * No `HighlightDirective` conflict
 
-  <live-example plnkr="contact.2">Try the live example of version 2.</live-example>
+  <live-example embedded plnkr="contact.2">Try the live example.</live-example>
 
 a#lazy-load
 .l-main-section
@@ -782,7 +782,7 @@ a#hero-module
 
   The `CrisisModule` is much the same. There's nothing more to say that's new. 
 
-  <live-example plnkr="pre-shared.3">Try the live example.</live-example>
+  <live-example embedded plnkr="pre-shared.3">Try the live example.</live-example>
 
 a#shared-module
 .l-main-section

public/resources/css/main.scss

@@ -55,6 +55,7 @@
 @import 'module/features';
 @import 'module/docs-landing';
 @import 'module/copy';
+@import 'module/embedded-plunker';
 
 /*
 * PRINT STYLES

public/resources/css/module/_embedded-plunker.scss

@@ -0,0 +1,3 @@
+live-example iframe {
+  height: 500px;
+}

public/resources/images/plunker/placeholder.png

@@ -5,7 +5,7 @@
 * app this directive is contained in.
 *
 * Usage:
-*   <live-example [name="..."] [plnkr='...'] [noSource] [srcText="..."]>text</live-example>
+*   <live-example [name="..."] [plnkr='...'] [noSource] [embedded] [srcText="..."]>text</live-example>
 * Example:
 *   <p>Run <live-example>Try the live example</live-example></p>.
 *   // ~/resources/live-examples/{chapter}/ts/plnkr.html
@@ -15,6 +15,12 @@
 *
 *   <p>Run <live-example plnkr="minimal"></live-example></p>.
 *   // ~/resources/live-examples/{chapter}/ts/minimal.plnkr.html
+*
+*   <live-example embedded></live-example>
+*   // ~/resources/live-examples/{chapter}/ts/eplnkr.html
+*
+*   <live-example embedded plnkr="minimal"></live-example>
+*   // ~/resources/live-examples/{chapter}/ts/minimal.eplnkr.html
 */
 angularIO.directive('liveExample', ['$location', function ($location) {
 
@@ -26,42 +32,60 @@ angularIO.directive('liveExample', ['$location', function ($location) {
 
   function span(text) { return '<span>' + text + '</span>'; }
 
+  function embeddedTemplate(src, name) {
+    return '<div ng-if="embeddedShow">' +
+        '<iframe frameborder="0" width="100%" height="100%" name="' + name + '" src="' + src + '"></iframe>' +
+      '</div>' +
+      '<img ng-click="toggleEmbedded()" ng-if="!embeddedShow" src="/resources/images/plunker/placeholder.png" alt="plunker">';
+  }
+
   return {
     restrict: 'E',
-
+    scope: true,
     compile: function (tElement, attrs) {
       var text = tElement.text() || 'live example';
       var ex = attrs.name || NgIoUtil.getExampleName($location);
-      var plnkr = '';
+      var embedded = attrs.hasOwnProperty('embedded');
+      var plnkr = embedded ? 'eplnkr' : 'plnkr';
       var href, template;
 
       if (attrs.plnkr) {
-        plnkr = attrs.plnkr + '.';
+        plnkr = attrs.plnkr + '.' + plnkr;
       }
 
       var isForDart = attrs.lang === 'dart' || NgIoUtil.isDoc($location, 'dart');
       var isForJs = attrs.lang === 'js' || NgIoUtil.isDoc($location, 'js');
       var exLang = isForDart ? 'dart' : isForJs ? 'js' : 'ts';
-      var href = isForDart
-        ? 'http://angular-examples.github.io/' + ex
-        : '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + 'plnkr.html';
 
-      // Link to live example.
-      var template = a(text, { href: href, target: '_blank' });
+      if (attrs.hasOwnProperty('embedded') && !isForDart) {
+        href = '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html'
+        template = embeddedTemplate(href, plnkr);
+      } else {
+        var href = isForDart
+          ? 'http://angular-examples.github.io/' + ex
+          : '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html'
+
+        // Link to live example.
+        var template = a(text, { href: href, target: '_blank' });
 
-      // The hosted example and sources are in different locations for Dart.
-      // Also show link to sources for Dart, unless noSource is specified.
-      if (isForDart && !attrs.hasOwnProperty('nosource')) {
-        var srcText = attrs.srcText || 'view source';
-        var srcHref = 'http://github.com/angular-examples/' + ex;
-        template = span(template + ' (' + a(srcText, { href: srcHref, target: '_blank' }) + ')');
+        // The hosted example and sources are in different locations for Dart.
+        // Also show link to sources for Dart, unless noSource is specified.
+        if (isForDart && !attrs.hasOwnProperty('nosource')) {
+          var srcText = attrs.srcText || 'view source';
+          var srcHref = 'http://github.com/angular-examples/' + ex;
+          template = span(template + ' (' + a(srcText, { href: srcHref, target: '_blank' }) + ')');
+        }
       }
 
       // UPDATE ELEMENT WITH NEW TEMPLATE
       tElement.html(template);
 
       // RETURN ELEMENT
-      return function (scope, element, attrs) { };
+      return function (scope, element, attrs) {
+        scope.toggleEmbedded = function() {
+          scope.embeddedShow = !scope.embeddedShow;
+        }
+      };
     }
   };
 }]);