honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: add default title and embedded-style options to <live-example> (#2882) 

Adds default title (tooltip) of the example text unless overiden with "title" attribute
The "embedded-style" attribute causes link to open in new tab in the embedded style.
Use for samples that have a confusingly large number of files.
The "embedded" attribute option remains and displays _inline_ in the _same_ tab.
This commit is contained in:
Ward Bell 2016-11-27 13:48:20 -08:00 committed by GitHub
parent a4f0a32c3a
commit e0e2e40217
1 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
public/resources/js/directives/live-example.js
View File

@ -1,26 +1,46 @@
/**
* Angular.io Live Example Directive
*
* Renders a link to a live/host example of the doc chapter
* Renders a link to a live/host example of the doc page
* 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
* // ~/resources/live-examples/{page}/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
*
* // Link to the default plunker in the toh-1 sample
* // The title overrides default ("live example") with "Tour of Heroes - Part 1"
* <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
* // ~/resources/live-examples/{page}/ts/minimal.plnkr.html
*
* <live-example embedded></live-example>
* // ~/resources/live-examples/{chapter}/ts/eplnkr.html
* // Embed the current page's default plunker
* // Text within tag is "live example"
* // No title (no tooltip)
* <live-example embedded title=""></live-example>
* // ~/resources/live-examples/{page}/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/{page}//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) {
@ -43,11 +63,13 @@ angularIO.directive('liveExample', ['$location', function ($location) {
restrict: 'E',
scope: true,
compile: function (tElement, attrs) {
var href, template;
var text = tElement.text() || 'live example';
if (attrs['title'] == undefined) { tElement[0].setAttribute('title', text); } // set default title (tooltip)
var ex = attrs.name || NgIoUtil.getExampleName($location);
var embedded = attrs.hasOwnProperty('embedded');
var plnkr = embedded ? 'eplnkr' : 'plnkr';
var href, template;
var embeddedStyle = embedded || attrs.hasOwnProperty('embeddedstyle') || attrs.hasOwnProperty('embeddedStyle');
var plnkr = embeddedStyle ? 'eplnkr' : 'plnkr';
var imageBase = '/resources/images/';
var defaultImg = 'plunker/placeholder.png';