chore: add title and embedded-style options to <live-example>

The title provides a tooltip
The embedded-style causes link to open in new tab in the embedded style.
Use for samples that have a confusingly large number of files.
The 'embedded' option remains and displays _inline_ in the _same_ tab.

Author: wardbell

public/resources/js/directives/live-example.js

@@ -5,22 +5,37 @@
 * app this directive is contained in.
 *
 * Usage:
-*   <live-example [name="..."] [plnkr='...'] [noSource] [embedded] [srcText="..."]>text</live-example>
+*   <live-example
+*      [name="..."]
+*      [plnkr='...']
+*      [noSource]
+*      [embedded]
+*      [embedded-style]
+*      [srcText="..."]
+*      [title="..."]>text</live-example>
 * Example:
 *   <p>Run <live-example>Try the live example</live-example></p>.
 *   // ~/resources/live-examples/{chapter}/ts/plnkr.html
 *
 *   <p>Run <live-example name="toh-1">this example</live-example></p>.
-*   // ~/resources/live-examples/toh-1/ts/minimal.plnkr.html
+*   // ~/resources/live-examples/toh-1/ts/plnkr.html
+*
+*   <p>Run <live-example name="toh-1" title="Tour of Heroes - Part 1"></live-example></p>.
+*   // ~/resources/live-examples/toh-1/ts/plnkr.html
 *
 *   <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
+*   // Links to a *new* tab as an embedded style plunker editor
+*   <live-example embedded-style>this example</live-example>
+*   // ~/resources/live-examples/{chapter}//ts/eplnkr.html
+*
+*   // Displays in *same* tab as an embedded style plunker editor
+*   <live-example name="toh-1" embedded plnkr="minimal" img="toh>Tour of Heroes - Part 1</live-example>
+*   // ~/resources/live-examples/toh-1/ts/minimal.eplnkr.html
 */
 angularIO.directive('liveExample', ['$location', function ($location) {
 
@@ -46,7 +61,9 @@ angularIO.directive('liveExample', ['$location', function ($location) {
       var text = tElement.text() || 'live example';
       var ex = attrs.name || NgIoUtil.getExampleName($location);
       var embedded = attrs.hasOwnProperty('embedded');
-      var plnkr = embedded ? 'eplnkr' : 'plnkr';
+      var embeddedStyle = embedded || attrs.hasOwnProperty('embeddedstyle') || attrs.hasOwnProperty('embeddedStyle');
+      var plnkr = embeddedStyle ? 'eplnkr' : 'plnkr';
+      var title = attrs['title'];
       var href, template;
       var imageBase  = '/resources/images/';
       var defaultImg = 'plunker/placeholder.png';
@@ -69,7 +86,9 @@ angularIO.directive('liveExample', ['$location', function ($location) {
           : '/resources/live-examples/' + ex + '/' + exLang + '/' + plnkr + '.html'
 
         // Link to live example.
-        var template = a(text, { href: href, target: '_blank' });
+        var options = { href: href, target: '_blank' };
+        if (title) { options['title'] = title; }
+        var template = a(text, options);
 
         // The hosted example and sources are in different locations for Dart.
         // Also show link to sources for Dart, unless noSource is specified.